@volvo-cars/ced-os-react-components - npm Package Compare versions

Comparing version 1.0.0-alpha.8 to 1.0.0-alpha.9

lib/index.js

@@ -12,7 +12,7 @@ // src/utils/classNames.ts
   children,
-  className: className4,
+  className: className2,
   ...props
 }) => {
   return /* @__PURE__ */ jsx(Element, {
-    className: classNames(root, className4),
+    className: classNames(root, className2),
     ...props,
@@ -28,6 +28,6 @@ children
 import { jsx as jsx2 } from "react/jsx-runtime";
-function Caption({ className: className4, ...props }) {
+function Caption({ className: className2, ...props }) {
   return /* @__PURE__ */ jsx2(Block, {
     as: "figcaption",
-    className: classNames(root2, className4),
+    className: classNames(root2, className2),
     ...props
@@ -38,4 +38,7 @@ });
 // src/support/ConfigProvider.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext
+} from "react";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 var ConfigContext = createContext({});
@@ -49,2 +52,8 @@ var ConfigProvider = ({ config, ...props }) => {
 };
+var withOptionalConfigProvider = (component, config) => config ? /* @__PURE__ */ jsx3(ConfigProvider, {
+  config,
+  children: component
+}) : /* @__PURE__ */ jsx3(Fragment, {
+  children: component
+});
 function isRtlLocale(locale) {
@@ -63,3 +72,3 @@ return typeof locale === "string" && (locale.startsWith("ar") || locale.startsWith("he"));
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -71,3 +80,3 @@ }) {
     href,
-    className: classNames(root3, className4),
+    className: classNames(root3, className2),
     ...props,
@@ -149,7 +158,7 @@ children
   children,
-  className: className4,
+  className: className2,
   ...props
 }) {
   return /* @__PURE__ */ jsx7("span", {
-    className: classNames(root5, className4),
+    className: classNames(root5, className2),
     ...props,
@@ -165,7 +174,7 @@ children
 import { jsx as jsx8 } from "react/jsx-runtime";
-function Symbol({ src, alt = "", className: className4, ...props }) {
+function Symbol({ src, alt = "", className: className2, ...props }) {
   return /* @__PURE__ */ jsx8("img", {
     src,
     alt,
-    className: classNames(root6, className4),
+    className: classNames(root6, className2),
     ...props
@@ -182,3 +191,3 @@ });
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -193,3 +202,3 @@ }) {
   return /* @__PURE__ */ jsx9("li", {
-    className: classNames(root7, className4),
+    className: classNames(root7, className2),
     ...props,
@@ -208,3 +217,3 @@ children: validChildren
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -219,3 +228,3 @@ }) {
   return /* @__PURE__ */ jsx10("ol", {
-    className: classNames(root8, className4),
+    className: classNames(root8, className2),
     ...props,
@@ -232,5 +241,5 @@ children: validChildren
 import { jsx as jsx11 } from "react/jsx-runtime";
-function Paragraph({ className: className4, ...props }) {
+function Paragraph({ className: className2, ...props }) {
   return /* @__PURE__ */ jsx11("p", {
-    className: classNames(root9, className4),
+    className: classNames(root9, className2),
     ...props
@@ -245,3 +254,3 @@ });
 import { jsx as jsx12 } from "react/jsx-runtime";
-function Media({ children, className: className4, ...props }) {
+function Media({ children, className: className2, ...props }) {
   const childrenArr = Children4.toArray(children);
@@ -254,3 +263,3 @@ const validChildren = filterValidChildren(
   return /* @__PURE__ */ jsx12("figure", {
-    className: classNames(root10, className4),
+    className: classNames(root10, className2),
     ...props,
@@ -288,7 +297,7 @@ children: validChildren.map((child, index) => {
 };
-function Title({ level = 1, children, className: className4, ...props }) {
+function Title({ level = 1, children, className: className2, ...props }) {
   const Element = element[level];
   const levelStyles = variant[level];
   return /* @__PURE__ */ jsx13(Element, {
-    className: classNames(root11, levelStyles, className4),
+    className: classNames(root11, levelStyles, className2),
     ...props,
@@ -324,3 +333,3 @@ children
 };
-var Icon = ({ type, color: color2, label, size: size2, className: className4 }) => {
+var Icon = ({ type, color: color2, label, size: size2, className: className2 }) => {
   const { icons } = useConfig();
@@ -341,3 +350,3 @@ const imageSrc = icons && typeof icons[type] === "string" ? icons[type] : defaultIcons[type];
       iconSizeClassName,
-      className4
+      className2
     )
@@ -357,3 +366,3 @@ });
   variant: variant4,
-  className: className4
+  className: className2
 }) {
@@ -364,3 +373,3 @@ var _a, _b, _c, _d;
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames(root13, className4, variantClassName),
+    className: classNames(root13, className2, variantClassName),
     children: [
@@ -418,5 +427,5 @@ /* @__PURE__ */ jsxs(Title, {
 import { jsx as jsx17 } from "react/jsx-runtime";
-function Lead({ children, className: className4, ...props }) {
+function Lead({ children, className: className2, ...props }) {
   return /* @__PURE__ */ jsx17("div", {
-    className: classNames(root14, className4),
+    className: classNames(root14, className2),
     ...props,
@@ -446,7 +455,7 @@ children: !Children7.toArray(children).find(
   children,
-  className: className4,
+  className: className2,
   ...props
 }) {
   return /* @__PURE__ */ jsx18("li", {
-    className: classNames(root15, className4),
+    className: classNames(root15, className2),
     ...props,
@@ -491,3 +500,3 @@ children
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -499,3 +508,3 @@ }) {
   return /* @__PURE__ */ jsxs2("div", {
-    className: classNames(root17, className4),
+    className: classNames(root17, className2),
     ...props,
@@ -517,7 +526,7 @@ children: [
 import { jsx as jsx21 } from "react/jsx-runtime";
-function MediaBlock({ ratio = "16:9", className: className4, ...props }) {
+function MediaBlock({ ratio = "16:9", className: className2, ...props }) {
   const [w, h] = parseRatio(ratio);
   const paddingPercent = h / w * 100;
   return /* @__PURE__ */ jsx21("div", {
-    className: classNames(root18, className4),
+    className: classNames(root18, className2),
     style: { paddingBottom: `${paddingPercent}%` },
@@ -546,7 +555,7 @@ ...props
   children,
-  className: className4,
+  className: className2,
   ...props
 }) {
   return /* @__PURE__ */ jsx22("span", {
-    className: classNames(root19, className4),
+    className: classNames(root19, className2),
     ...props,
@@ -568,3 +577,3 @@ children: insertBetween(Children10.toArray(children), /* @__PURE__ */ jsx22("span", {
 import { jsx as jsx23 } from "react/jsx-runtime";
-function OrderedList({ listType, className: className4, ...props }) {
+function OrderedList({ listType, className: className2, ...props }) {
   let listStyleType;
@@ -585,3 +594,3 @@ switch (listType) {
     as: "ol",
-    className: classNames(className4, listStyleType),
+    className: classNames(className2, listStyleType),
     ...props
@@ -607,6 +616,6 @@ });
   children,
-  className: className4
+  className: className2
 }) {
   return /* @__PURE__ */ jsx25("div", {
-    className: classNames(root20, className4),
+    className: classNames(root20, className2),
     children
@@ -629,3 +638,3 @@ });
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -640,3 +649,3 @@ }) {
   return /* @__PURE__ */ jsx26(ListItem, {
-    className: classNames(root21, className4),
+    className: classNames(root21, className2),
     ...props,
@@ -655,3 +664,3 @@ children: validChildren
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -666,3 +675,3 @@ }) {
   return /* @__PURE__ */ jsx27(OrderedList, {
-    className: classNames(root22, className4),
+    className: classNames(root22, className2),
     ...props,
@@ -697,3 +706,3 @@ children: validChildren
   children,
-  className: className4,
+  className: className2,
   morerows,
@@ -711,3 +720,3 @@ valign,
     style: { verticalAlign: valign },
-    className: classNames(root23, isHead ? head : void 0, className4),
+    className: classNames(root23, isHead ? head : void 0, className2),
     rowSpan: rowSpan || moreRowsInteger + 1,
@@ -727,3 +736,3 @@ colSpan,
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -738,3 +747,3 @@ }) {
   return /* @__PURE__ */ jsx29("tr", {
-    className: classNames(root24, className4),
+    className: classNames(root24, className2),
     ...props,
@@ -753,3 +762,3 @@ children: validChildren
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -764,3 +773,3 @@ }) {
   return /* @__PURE__ */ jsx30("tbody", {
-    className: classNames(root25, className4),
+    className: classNames(root25, className2),
     ...props,
@@ -777,6 +786,6 @@ children: validChildren
 import { jsx as jsx31 } from "react/jsx-runtime";
-function TableColSpec({ align, className: className4, ...props }) {
+function TableColSpec({ align, className: className2, ...props }) {
   return /* @__PURE__ */ jsx31("col", {
     align,
-    className: classNames(root26, className4),
+    className: classNames(root26, className2),
     ...props
@@ -794,5 +803,5 @@ });
 import { jsx as jsx32 } from "react/jsx-runtime";
-function TableCaption({ className: className4, ...props }) {
+function TableCaption({ className: className2, ...props }) {
   return /* @__PURE__ */ jsx32("caption", {
-    className: classNames(root27, className4),
+    className: classNames(root27, className2),
     ...props
@@ -812,3 +821,3 @@ });
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -823,3 +832,3 @@ }) {
   return /* @__PURE__ */ jsx33("tfoot", {
-    className: classNames(root28, className4),
+    className: classNames(root28, className2),
     ...props,
@@ -841,3 +850,3 @@ children: validChildren
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -854,3 +863,3 @@ }) {
     children: /* @__PURE__ */ jsx34("thead", {
-      className: classNames(root29, className4),
+      className: classNames(root29, className2),
       ...props,
@@ -868,3 +877,3 @@ children: validChildren
 import { jsx as jsx35, jsxs as jsxs3 } from "react/jsx-runtime";
-function TableGroup({ title: title2, children, className: className4, ...props }) {
+function TableGroup({ title: title2, children, className: className2, ...props }) {
   const childrenArr = Children17.toArray(children);
@@ -883,3 +892,3 @@ const validChildren = filterValidChildren(
   return /* @__PURE__ */ jsxs3("table", {
-    className: classNames(root30, className4),
+    className: classNames(root30, className2),
     ...props,
@@ -902,3 +911,3 @@ children: [
 import { jsx as jsx36 } from "react/jsx-runtime";
-function TableRoot({ className: className4, ...props }) {
+function TableRoot({ className: className2, ...props }) {
   const { titleComponent, children } = separateFirstTitleFromChildren(
@@ -916,3 +925,3 @@ props.children
     children: /* @__PURE__ */ jsx36("div", {
-      className: classNames(root24, className4),
+      className: classNames(root24, className2),
       ...props,
@@ -943,8 +952,45 @@ children: hasGroup ? validChildren.map(
 // src/support/molecules/Article/index.tsx
-import React20, { Children as Children19 } from "react";
+import React21, { Children as Children19 } from "react";
 
+// src/themes/ThemeProvider.tsx
+import {
+  createContext as createContext3,
+  useContext as useContext3
+} from "react";
+
+// src/themes/dcs-base-theme.css.ts
+var className = "dcs-base-theme";
+
+// src/themes/ThemeProvider.tsx
+import { Fragment as Fragment2, jsx as jsx38 } from "react/jsx-runtime";
+var themeClassNames = {
+  volvo: "dcs-volvo-theme",
+  polestar: "dcs-polestar-theme"
+};
+var ThemeContext = createContext3({});
+var ThemeProvider = function({
+  theme,
+  children
+}) {
+  let className2 = className;
+  if (theme) {
+    className2 += ` ${themeClassNames[theme]}`;
+  }
+  return /* @__PURE__ */ jsx38(ThemeContext.Provider, {
+    value: { theme, className: className2 },
+    children
+  });
+};
+var ThemeConsumer = ThemeContext.Consumer;
+var withOptionalThemeProvider = (component, theme) => theme ? /* @__PURE__ */ jsx38(ThemeProvider, {
+  theme,
+  children: component
+}) : /* @__PURE__ */ jsx38(Fragment2, {
+  children: component
+});
+
 // src/support/molecules/LegalDate/index.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function LegalDate({ children, ...props }) {
-  return /* @__PURE__ */ jsx38("div", {
+  return /* @__PURE__ */ jsx39("div", {
     ...props,
@@ -956,3 +1002,3 @@ children
 // src/support/molecules/Segment/index.tsx
-import React19 from "react";
+import React20 from "react";
 
@@ -964,3 +1010,3 @@ // src/support/molecules/Segment/Segment.css.ts
 import { jsxs as jsxs4 } from "react/jsx-runtime";
-function Segment({ className: className4, ...props }) {
+function Segment({ className: className2, ...props }) {
   const { titleComponent, children } = separateFirstTitleFromChildren(
@@ -970,6 +1016,6 @@ props.children
   return /* @__PURE__ */ jsxs4("section", {
-    className: classNames(root31, className4),
+    className: classNames(root31, className2),
     ...props,
     children: [
-      titleComponent ? React19.cloneElement(titleComponent, { level: 2 }) : null,
+      titleComponent ? React20.cloneElement(titleComponent, { level: 2 }) : null,
       children
@@ -990,5 +1036,5 @@ ]
 // src/support/molecules/Article/index.tsx
-import { jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs5 } from "react/jsx-runtime";
 function Article({
-  className: className4,
+  className: className2,
   children: originalChildren,
@@ -1005,11 +1051,13 @@ ...props
   const { direction, locale } = useConfig();
-  return /* @__PURE__ */ jsxs5("article", {
-    lang: locale,
-    className: classNames(root32, className4),
-    dir: direction,
-    ...props,
-    children: [
-      titleComponent ? React20.cloneElement(titleComponent, { level: 1 }) : null,
-      validChildren
-    ]
+  return /* @__PURE__ */ jsx40(ThemeConsumer, {
+    children: ({ className: themeClassName }) => /* @__PURE__ */ jsxs5("article", {
+      lang: locale,
+      className: classNames(root32, className2, themeClassName),
+      dir: direction,
+      ...props,
+      children: [
+        titleComponent ? React21.cloneElement(titleComponent, { level: 1 }) : null,
+        validChildren
+      ]
+    })
   });
@@ -1024,8 +1072,8 @@ }
 // src/support/atoms/TextNode/index.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
-function TextNode({ children, options, className: className4 }) {
+import { jsx as jsx41 } from "react/jsx-runtime";
+function TextNode({ children, options, className: className2 }) {
   const optionsArr = wrapArray(options);
   const variant4 = optionsArr == null ? void 0 : optionsArr.map((option) => variant3[option]).reduce((result, curr) => classNames(result, curr));
-  return /* @__PURE__ */ jsx39("span", {
-    className: classNames(root33, variant4, className4, ...optionsArr),
+  return /* @__PURE__ */ jsx41("span", {
+    className: classNames(root33, variant4, className2, ...optionsArr),
     children
@@ -1037,3 +1085,8 @@ });
 import { useCallback, useReducer } from "react";
-import { jsx as jsx40, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// src/support/molecules/Tooltip/Tooltip.css.ts
+var root34 = "Tooltip_root__k036290";
+
+// src/support/molecules/Tooltip/index.tsx
+import { jsx as jsx42, jsxs as jsxs6 } from "react/jsx-runtime";
 function reducer(state, action) {
@@ -1054,2 +1107,3 @@ switch (action.type) {
   return /* @__PURE__ */ jsxs6("button", {
+    className: root34,
     onClick: click,
@@ -1059,6 +1113,6 @@ ...props,
       children,
-      isVisible && /* @__PURE__ */ jsx40("div", {
-        children: /* @__PURE__ */ jsx40("div", {
-          children: /* @__PURE__ */ jsx40("div", {
-            children: /* @__PURE__ */ jsx40("div", {
+      isVisible && /* @__PURE__ */ jsx42("div", {
+        children: /* @__PURE__ */ jsx42("div", {
+          children: /* @__PURE__ */ jsx42("div", {
+            children: /* @__PURE__ */ jsx42("div", {
               children: content
@@ -1074,17 +1128,17 @@ })
 // src/support/molecules/Disclaimer/Disclaimer.css.ts
-var root34 = "Disclaimer_root__1w4hmt10";
+var root35 = "Disclaimer_root__1w4hmt10";
 
 // src/support/molecules/Disclaimer/index.tsx
-import { jsx as jsx41, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs7 } from "react/jsx-runtime";
 function Disclaimer({ children, ...props }) {
-  return /* @__PURE__ */ jsx41(Tooltip, {
+  return /* @__PURE__ */ jsx43(Tooltip, {
     content: /* @__PURE__ */ jsxs7("div", {
-      className: root34,
+      className: root35,
       children: [
-        /* @__PURE__ */ jsx41("div", {
-          children: /* @__PURE__ */ jsx41(Icon, {
+        /* @__PURE__ */ jsx43("div", {
+          children: /* @__PURE__ */ jsx43(Icon, {
             type: "important"
           })
         }),
-        /* @__PURE__ */ jsx41("div", {
+        /* @__PURE__ */ jsx43("div", {
           children
@@ -1095,3 +1149,3 @@ })
     ...props,
-    children: /* @__PURE__ */ jsx41(TextNode, {
+    children: /* @__PURE__ */ jsx43(TextNode, {
       value: "*",
@@ -1104,17 +1158,17 @@ options: ["sup"]
 // src/support/molecules/Footnote/index.tsx
-import { jsx as jsx42, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs8 } from "react/jsx-runtime";
 function Footnote({
   children,
-  className: className4,
+  className: className2,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(Tooltip, {
+  return /* @__PURE__ */ jsx44(Tooltip, {
     content: /* @__PURE__ */ jsxs8("div", {
       children: [
-        /* @__PURE__ */ jsx42("div", {
-          children: /* @__PURE__ */ jsx42(Icon, {
+        /* @__PURE__ */ jsx44("div", {
+          children: /* @__PURE__ */ jsx44(Icon, {
             type: "note"
           })
         }),
-        /* @__PURE__ */ jsx42("p", {
+        /* @__PURE__ */ jsx44("p", {
           children
@@ -1125,4 +1179,4 @@ })
     ...props,
-    children: /* @__PURE__ */ jsx42("span", {
-      children: /* @__PURE__ */ jsx42(Icon, {
+    children: /* @__PURE__ */ jsx44("span", {
+      children: /* @__PURE__ */ jsx44(Icon, {
         type: "note"
@@ -1139,9 +1193,9 @@ })
 var imageWrapper = "ImageParagraph_imageWrapper__1rimm3g1";
-var root35 = "ImageParagraph_root__1rimm3g0";
+var root36 = "ImageParagraph_root__1rimm3g0";
 
 // src/support/molecules/ImageParagraph/index.tsx
-import { jsx as jsx43, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs9 } from "react/jsx-runtime";
 function ImageParagraph({
   children,
-  className: className4,
+  className: className2,
   ...props
@@ -1154,11 +1208,11 @@ }) {
   return /* @__PURE__ */ jsxs9("div", {
-    className: classNames(root35, className4),
+    className: classNames(root36, className2),
     ...props,
     children: [
-      /* @__PURE__ */ jsx43("div", {
+      /* @__PURE__ */ jsx45("div", {
         className: imageWrapper,
         children: img
       }),
-      /* @__PURE__ */ jsx43("div", {
-        children: hasParagraph ? content : /* @__PURE__ */ jsx43(Paragraph, {
+      /* @__PURE__ */ jsx45("div", {
+        children: hasParagraph ? content : /* @__PURE__ */ jsx45(Paragraph, {
           children: content
@@ -1172,10 +1226,10 @@ })
 // src/support/molecules/SubSegment/index.tsx
-import React23 from "react";
+import React24 from "react";
 
 // src/support/molecules/SubSegment/SubSegment.css.ts
-var root36 = "SubSegment_root__1jl54nf0";
+var root37 = "SubSegment_root__1jl54nf0";
 
 // src/support/molecules/SubSegment/index.tsx
 import { jsxs as jsxs10 } from "react/jsx-runtime";
-function SubSegment({ className: className4, ...props }) {
+function SubSegment({ className: className2, ...props }) {
   const { titleComponent, children } = separateFirstTitleFromChildren(
@@ -1185,6 +1239,6 @@ props.children
   return /* @__PURE__ */ jsxs10("section", {
-    className: classNames(root36, className4),
+    className: classNames(root37, className2),
     ...props,
     children: [
-      titleComponent ? React23.cloneElement(titleComponent, { level: 3 }) : null,
+      titleComponent ? React24.cloneElement(titleComponent, { level: 3 }) : null,
       children
@@ -1196,13 +1250,13 @@ ]
 // src/support/molecules/Video/index.tsx
-import React24 from "react";
+import React25 from "react";
 
 // src/support/molecules/Video/Video.css.ts
-var root37 = "Video_root__ixzdwg0";
+var root38 = "Video_root__ixzdwg0";
 
 // src/support/molecules/Video/index.tsx
-import { jsx as jsx44, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs11 } from "react/jsx-runtime";
 function Video({
   poster,
   src,
-  className: className4,
+  className: className2,
   ratio = "16:9",
@@ -1213,9 +1267,9 @@ ...props
   return /* @__PURE__ */ jsxs11("div", {
-    className: classNames(root37, className4),
+    className: classNames(root38, className2),
     children: [
-      titleComponent ? React24.cloneElement(titleComponent, { level: 4 }) : null,
-      /* @__PURE__ */ jsx44(MediaBlock, {
+      titleComponent ? React25.cloneElement(titleComponent, { level: 4 }) : null,
+      /* @__PURE__ */ jsx46(MediaBlock, {
         ratio,
         ...props,
-        children: /* @__PURE__ */ jsx44("video", {
+        children: /* @__PURE__ */ jsx46("video", {
           preload: "auto",
@@ -1231,54 +1285,15 @@ poster,
 
-// src/themes/ThemeProvider.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-
-// src/themes/dcs-base-theme.css.ts
-var className = "dcs-base-theme";
-
-// src/themes/dcs-polestar-theme.css.ts
-var className2 = "dcs-polestar-theme";
-
-// src/themes/dcs-volvo-theme.css.ts
-var className3 = "dcs-volvo-theme";
-
-// src/themes/ThemeProvider.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
-var ThemeContext = createContext3({});
-var ThemeProvider = function({
-  theme,
-  children
-}) {
-  let className4 = "";
-  switch (theme) {
-    case "volvo":
-      className4 = className3;
-      break;
-    case "polestar":
-      className4 = className2;
-      break;
-    default:
-      className4 = "";
-  }
-  return /* @__PURE__ */ jsx45(ThemeContext.Provider, {
-    value: { theme, className: className4 },
-    children: /* @__PURE__ */ jsx45("div", {
-      className: `${className} ${className4}`,
-      children
-    })
-  });
-};
-
 // src/render/config.tsx
-import { Fragment as Fragment2 } from "react";
+import { Fragment as Fragment4 } from "react";
 
 // src/support/atoms/DefinitionDescription/DefinitionDescription.css.ts
-var root38 = "DefinitionDescription_root__2wqm700";
+var root39 = "DefinitionDescription_root__2wqm700";
 
 // src/support/atoms/DefinitionDescription/index.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function DefinitionDescription({
   children
 }) {
-  return /* @__PURE__ */ jsx46("dd", {
-    className: root38,
+  return /* @__PURE__ */ jsx47("dd", {
+    className: root39,
     children
@@ -1289,9 +1304,9 @@ });
 // src/support/atoms/DefinitionList/DefinitionList.css.ts
-var root39 = "DefinitionList_root__2et1dy0";
+var root40 = "DefinitionList_root__2et1dy0";
 
 // src/support/atoms/DefinitionList/index.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function DefinitionList({ children }) {
-  return /* @__PURE__ */ jsx47("dl", {
-    className: root39,
+  return /* @__PURE__ */ jsx48("dl", {
+    className: root40,
     children
@@ -1302,6 +1317,6 @@ });
 // src/support/atoms/DefinitionListItem/index.tsx
-import { Fragment } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { Fragment as Fragment3 } from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function DefinitionListItem({ children }) {
-  return /* @__PURE__ */ jsx48(Fragment, {
+  return /* @__PURE__ */ jsx49(Fragment3, {
     children
@@ -1312,9 +1327,9 @@ });
 // src/support/atoms/DefinitionTerm/DefinitionTerm.css.ts
-var root40 = "DefinitionTerm_root__1g7ihac0";
+var root41 = "DefinitionTerm_root__1g7ihac0";
 
 // src/support/atoms/DefinitionTerm/index.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function DefinitionTerm({ children }) {
-  return /* @__PURE__ */ jsx49("dt", {
-    className: root40,
+  return /* @__PURE__ */ jsx50("dt", {
+    className: root41,
     children
@@ -1325,5 +1340,5 @@ });
 // src/support/atoms/MenuBox/index.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function MenuBox(props) {
-  return /* @__PURE__ */ jsx50("div", {
+  return /* @__PURE__ */ jsx51("div", {
     ...props
@@ -1334,12 +1349,12 @@ });
 // src/support/atoms/MenuEntry/MenuEntry.css.ts
-var root41 = "MenuEntry_root__j74jeg0";
+var root42 = "MenuEntry_root__j74jeg0";
 
 // src/support/atoms/MenuEntry/index.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function MenuEntry({
-  className: className4,
+  className: className2,
   children
 }) {
-  return /* @__PURE__ */ jsx51("div", {
-    className: classNames(root41, className4),
+  return /* @__PURE__ */ jsx52("div", {
+    className: classNames(root42, className2),
     children
@@ -1350,9 +1365,9 @@ });
 // src/support/atoms/MenuRoot/MenuRoot.css.ts
-var root42 = "MenuRoot_root__5yvwu90";
+var root43 = "MenuRoot_root__5yvwu90";
 
 // src/support/atoms/MenuRoot/index.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
-function MenuRoot({ className: className4, ...props }) {
-  return /* @__PURE__ */ jsx52("div", {
-    className: classNames(className4, root42),
+import { jsx as jsx53 } from "react/jsx-runtime";
+function MenuRoot({ className: className2, ...props }) {
+  return /* @__PURE__ */ jsx53("div", {
+    className: classNames(className2, root43),
     ...props
@@ -1363,10 +1378,10 @@ });
 // src/support/atoms/Time/Time.css.ts
-var root43 = "Time_root__nmxlc30";
+var root44 = "Time_root__nmxlc30";
 
 // src/support/atoms/Time/index.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
-function Time({ value, datetime, className: className4, ...props }) {
-  return /* @__PURE__ */ jsx53("time", {
+import { jsx as jsx54 } from "react/jsx-runtime";
+function Time({ value, datetime, className: className2, ...props }) {
+  return /* @__PURE__ */ jsx54("time", {
     dateTime: datetime,
-    className: classNames(root43, className4),
+    className: classNames(root44, className2),
     ...props,
@@ -1394,3 +1409,3 @@ children: value
   },
-  fragment: { type: Fragment2 },
+  fragment: { type: Fragment4 },
   paragraph: { type: Paragraph },
@@ -1401,3 +1416,3 @@ text({ value, options }) {
     } else {
-      return { type: Fragment2, children: value };
+      return { type: Fragment4, children: value };
     }
@@ -1534,3 +1549,3 @@ },
 // src/render/createRenderer.tsx
-import { createElement, Fragment as Fragment3 } from "react";
+import { createElement, Fragment as Fragment5 } from "react";
 
@@ -1566,3 +1581,3 @@ // src/utils/filterDataAttributes.ts
     if (Array.isArray(data)) {
-      return createElement(Fragment3, null, renderChildren(render2, data));
+      return createElement(Fragment5, null, renderChildren(render2, data));
     }
@@ -1614,3 +1629,3 @@ if (typeof data === "string") {
     let props;
-    if (type !== Fragment3) {
+    if (type !== Fragment5) {
       const dataAttrs = filterDataAttributes(data);
@@ -1690,6 +1705,5 @@ props = {
 // src/support/organisms/JSONArticle/index.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
 var render = createRenderer(RENDER_CONFIG);
 function JSONArticle({
-  theme = "volvo",
+  theme,
   config,
@@ -1712,9 +1726,6 @@ data,
   }
-  return /* @__PURE__ */ jsx54(ConfigProvider, {
-    config,
-    children: /* @__PURE__ */ jsx54(ThemeProvider, {
-      theme,
-      children: article
-    })
-  });
+  return withOptionalThemeProvider(
+    withOptionalConfigProvider(article, config),
+    theme
+  );
 }
@@ -1721,0 +1732,0 @@ export {

lib/types/support/ConfigProvider.d.ts

@@ -1,2 +0,2 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 interface Config {
@@ -17,3 +17,4 @@ locale?: string;
 export declare const ConfigProvider: ({ config, ...props }: ConfigProviderProps) => JSX.Element;
+export declare const withOptionalConfigProvider: (component: ReactNode, config?: Config) => JSX.Element;
 export declare const useConfig: () => Config;
 export {};

lib/types/themes/ThemeProvider.d.ts

@@ -1,2 +0,2 @@
-import { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 interface ThemeContextValue {
@@ -6,6 +6,8 @@ theme?: string;
 }
-export declare const ThemeProvider: ({ theme, children, }: PropsWithChildren<{
+export declare const ThemeProvider: ({ theme, children, }: React.PropsWithChildren<{
     theme: string;
 }>) => JSX.Element;
+export declare const ThemeConsumer: React.Consumer<ThemeContextValue>;
+export declare const withOptionalThemeProvider: (component: ReactNode, theme?: string) => JSX.Element;
 export declare function useTheme(): ThemeContextValue;
 export {};

package.json

 {
   "name": "@volvo-cars/ced-os-react-components",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "description": "Set of components for developing UIs in the onboarding and support apps",
@@ -41,3 +41,3 @@ "keywords": [],
     "dev": "npm run storybook",
-    "build": "scripts/bundle.cjs && npm run types",
+    "build": "scripts/bundle.cjs && npm run build-samples && npm run types",
     "lint": "eslint ./src --fix",
@@ -47,2 +47,3 @@ "test": "jest \"./src/.*test.ts\"",
     "storybook": "start-storybook -p 6006",
+    "build-samples": "scripts/render-samples.cjs",
     "build-storybook": "build-storybook -s public",
@@ -49,0 +50,0 @@ "build-storybook:ci": "build-storybook -s public --quiet",

README.md

@@ -84,5 +84,5 @@ # Support Web Components
 
-If you want to use the renderer without creating a full JS project, with NPM etc, you can use the standalone solution. Include the standalone files under [lib](lib), and in the [HTML template file](src/standalone-support-article.html), make sure to make the following replacements:
+If you want to use the renderer without creating a full JS project, with NPM etc, you can use the standalone solution. Include the standalone files under [lib](lib), and in the [HTML template file](src/standalone-example.html), make sure to make the following replacements:
 * `article: null` must be replaced with `article: '<article>'`, where `article` is the (JSON representation) of an article. It must contain an `externalId`. It must also contain the content of the document, i.e. a `title` and optionally also a `description` and `body`. These fields may be directly on the `article` object itself, or nested inside of `article.content` or `article.jsonContent`.
 * `articleLinkClicked: null` may be replaced with `articleLinkClicked: function(articleId, targetId) { ... }`, where the function will be called whenever the user clicks a link to another article. The function takes two arguments: the ID of the article being linked to, as well as (optionally) the ID of the target element (will typically just be `null`). If `articleLinkClicked` is left as `null`, it will default to working as a normal link, such that if the current URL is `foo/bar/articleId1`, and the user clicks a link to an article with ID `articleId2`, it will navigate to `foo/bar/articleId2` (or `foo/bar/articleId2#targetId`, if `targetId` is not null).
 * `linkClicked: null` may be replaced with `linkClicked: function(href) { ... }`, where the function will be called whenever the user clicks on an external link. The function takes one argument: the URL of the link target. If `linkClicked` is left as null, it will default to simply navigating to the link.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1332322

increased by4.43%

Lines of code

31024

increased by3.68%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes