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

Comparing version 0.3.0-alpha.20 to 0.3.0-alpha.21

dist/ced-os-react-components.cjs.js

@@ -37,3 +37,2 @@ var __create = Object.create;
   InfoBox: () => InfoBox,
-  InfoIcon: () => InfoIcon,
   InlineText: () => InlineText,
@@ -452,3 +451,3 @@ InteriorText: () => InteriorText,
 // src/support/atoms/InfoBox/index.js
-var import_vcc_ui15 = __toModule(require("vcc-ui"));
+var import_vcc_ui14 = __toModule(require("vcc-ui"));
 
@@ -483,28 +482,7 @@ // src/support/atoms/Title/index.js
 // src/support/atoms/InfoBox/index.js
-var import_react22 = __toModule(require("react"));
-
-// src/support/atoms/InfoIcon/index.js
-var import_vcc_ui14 = __toModule(require("vcc-ui"));
-var import_react20 = __toModule(require("react"));
+var import_react21 = __toModule(require("react"));
 var import_prop_types19 = __toModule(require("prop-types"));
-function InfoIcon({color, size = 1}) {
-  const theme = (0, import_vcc_ui14.useTheme)();
-  const w = size * theme.baselineGrid * 2;
-  return /* @__PURE__ */ import_react20.default.createElement(import_vcc_ui14.Inline, {
-    extend: {
-      verticalAlign: "baseline",
-      display: "inline-block",
-      width: w,
-      height: w,
-      backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 26.73828 26.73828' style='fill:` + encodeURIComponent(color) + `' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='be0d25ca-8fb5-41d9-9040-90201f3e2eb3' d='M13.37 0a13.37 13.37 0 1 0 13.368 13.37A13.385 13.385 0 0 0 13.37 0zm0 25.738A12.37 12.37 0 1 1 25.737 13.37 12.383 12.383 0 0 1 13.37 25.74z'/%3E%3Cpath class='be0d25ca-8fb5-41d9-9040-90201f3e2eb3' d='M14.689 7.428a1.46 1.46 0 0 0-1.292 1.397.741.741 0 0 0 .765.713 1.43 1.43 0 0 0 1.274-1.327.74.74 0 0 0-.747-.783zM13.776 17.817a.516.516 0 0 1-.534-.586 2.702 2.702 0 0 1 .152-.73c.062-.221.143-.465.196-.627.12-.382.222-.734.324-1.085.1-.342.199-.684.302-1.021.04-.138.103-.324.173-.53.052-.156.11-.323.162-.49a4.715 4.715 0 0 0 .2-.957.644.644 0 0 0-.694-.607 6.303 6.303 0 0 0-3.103 1.54l.265.3a1.84 1.84 0 0 1 .943-.485.554.554 0 0 1 .568.55 2.096 2.096 0 0 1-.1.455l-.047.177c-.056.194-.12.383-.164.511l-.17.537c-.18.583-.36 1.158-.527 1.745-.044.158-.097.318-.15.478a3.798 3.798 0 0 0-.263 1.187.775.775 0 0 0 .835.783 6.022 6.022 0 0 0 3.012-1.5l-.246-.262a2.611 2.611 0 0 1-1.134.617z'/%3E%3C/svg%3E")`
-    }
-  });
-}
-InfoIcon.propTypes = {color: import_prop_types19.default.string, size: import_prop_types19.default.number};
 
-// src/support/atoms/InfoBox/index.js
-var import_prop_types20 = __toModule(require("prop-types"));
-
 // src/support/atoms/StringsProvider/index.js
-var import_react21 = __toModule(require("react"));
+var import_react20 = __toModule(require("react"));
 
@@ -520,4 +498,4 @@ // src/support/atoms/StringsProvider/defaultStrings.js
 // src/support/atoms/StringsProvider/index.js
-var StringsContext = (0, import_react21.createContext)(defaultStrings);
-var StringsProvider = ({value, ...props}) => /* @__PURE__ */ import_react21.default.createElement(StringsContext.Provider, {
+var StringsContext = (0, import_react20.createContext)(defaultStrings);
+var StringsProvider = ({value, ...props}) => /* @__PURE__ */ import_react20.default.createElement(StringsContext.Provider, {
   value: {...defaultStrings, ...value},
@@ -527,3 +505,3 @@ ...props
 var useStrings = () => {
-  const strings = (0, import_react21.useContext)(StringsContext);
+  const strings = (0, import_react20.useContext)(StringsContext);
   return {s: (key, defaultValue) => strings[key] || defaultValue, strings};
@@ -533,6 +511,10 @@ };
 // src/support/atoms/InfoBox/index.js
+var import_vcc_ui15 = __toModule(require("vcc-ui"));
 function InfoBox({children, variant, title: propTitle}) {
   const {s} = useStrings();
-  const theme = (0, import_vcc_ui15.useTheme)();
-  let title, color = theme.color.foreground.secondary;
+  const theme = (0, import_vcc_ui14.useTheme)();
+  let title;
+  let icon;
+  let color;
+  let iconColor;
   if (typeof propTitle === "undefined") {
@@ -542,7 +524,11 @@ switch (variant) {
         title = s(variant, "Important!");
-        color = theme.color.foreground.alert;
+        icon = "checkmark-32";
+        color = theme.color.foreground.action;
+        iconColor = "action";
         break;
       case "warning":
         title = s(variant, "Warning!");
-        color = "orange";
+        icon = "car-driveralert-32";
+        color = theme.color.foreground.alert;
+        iconColor = "alert";
         break;
@@ -552,3 +538,5 @@ case "note":
         title = s(variant, "Note");
+        icon = "info-32";
         color = theme.color.foreground.secondary;
+        iconColor = "secondary";
         break;
@@ -559,25 +547,27 @@ }
   }
-  return /* @__PURE__ */ import_react22.default.createElement(import_vcc_ui15.View, {
+  return /* @__PURE__ */ import_react21.default.createElement(import_vcc_ui14.View, {
     extend: {borderLeft: `5px solid ${color}`},
     padding: 1,
     paddingLeft: 2
-  }, /* @__PURE__ */ import_react22.default.createElement(Title, {
-    level: 3
-  }, /* @__PURE__ */ import_react22.default.createElement(InfoIcon, {
-    color
-  }), " ", title), /* @__PURE__ */ import_react22.default.createElement(import_vcc_ui15.Spacer, {
+  }, /* @__PURE__ */ import_react21.default.createElement(Title, {
+    level: 3,
+    extend: {display: "flex", alignItems: "center"}
+  }, /* @__PURE__ */ import_react21.default.createElement(import_vcc_ui15.Inline, null, /* @__PURE__ */ import_react21.default.createElement(import_vcc_ui14.Icon, {
+    color: iconColor,
+    type: icon
+  })), "\xA0", /* @__PURE__ */ import_react21.default.createElement(import_vcc_ui15.Inline, null, title)), /* @__PURE__ */ import_react21.default.createElement(import_vcc_ui14.Spacer, {
     size: 2
-  }), /* @__PURE__ */ import_react22.default.createElement(import_vcc_ui15.Flex, null, children));
+  }), /* @__PURE__ */ import_react21.default.createElement(import_vcc_ui14.Flex, null, children));
 }
 InfoBox.propTypes = {
-  children: import_prop_types20.default.node,
-  variant: import_prop_types20.default.oneOf(["warning", "note", "important"]),
-  title: import_prop_types20.default.string
+  children: import_prop_types19.default.node,
+  variant: import_prop_types19.default.oneOf(["warning", "note", "important"]),
+  title: import_prop_types19.default.string
 };
 
 // src/support/atoms/InteriorText/index.js
-var import_react23 = __toModule(require("react"));
-var import_prop_types21 = __toModule(require("prop-types"));
+var import_react22 = __toModule(require("react"));
+var import_prop_types20 = __toModule(require("prop-types"));
 function InteriorText({extend, children}) {
-  return /* @__PURE__ */ import_react23.default.createElement(InlineText, {
+  return /* @__PURE__ */ import_react22.default.createElement(InlineText, {
     as: "i",
@@ -589,4 +579,4 @@ subStyle: "emphasis",
 InteriorText.propTypes = {
-  extend: import_prop_types21.default.object,
-  children: import_prop_types21.default.node
+  extend: import_prop_types20.default.object,
+  children: import_prop_types20.default.node
 };
@@ -596,14 +586,14 @@
 var import_vcc_ui16 = __toModule(require("vcc-ui"));
-var import_react24 = __toModule(require("react"));
-var import_prop_types22 = __toModule(require("prop-types"));
+var import_react23 = __toModule(require("react"));
+var import_prop_types21 = __toModule(require("prop-types"));
 function Lead({children, extend}) {
-  return /* @__PURE__ */ import_react24.default.createElement(import_vcc_ui16.Block, {
+  return /* @__PURE__ */ import_react23.default.createElement(import_vcc_ui16.Block, {
     extend
-  }, import_react24.Children.map(children, (child) => {
+  }, import_react23.Children.map(children, (child) => {
     if ((child == null ? void 0 : child.type) !== Paragraph) {
-      return /* @__PURE__ */ import_react24.default.createElement(Paragraph, {
+      return /* @__PURE__ */ import_react23.default.createElement(Paragraph, {
         variant: "hillary"
       }, child);
     } else {
-      return import_react24.default.cloneElement(child, {variant: "hillary"});
+      return import_react23.default.cloneElement(child, {variant: "hillary"});
     }
@@ -613,11 +603,11 @@ }));
 Lead.propTypes = {
-  children: allowedChildren([Paragraph, import_prop_types22.default.string]),
-  extend: import_prop_types22.default.object
+  children: allowedChildren([Paragraph, import_prop_types21.default.string]),
+  extend: import_prop_types21.default.object
 };
 
 // src/support/atoms/LiteralText/index.js
-var import_react25 = __toModule(require("react"));
-var import_prop_types23 = __toModule(require("prop-types"));
+var import_react24 = __toModule(require("react"));
+var import_prop_types22 = __toModule(require("prop-types"));
 function LiteralText({children, extend, ...props}) {
-  return /* @__PURE__ */ import_react25.default.createElement(InlineText, {
+  return /* @__PURE__ */ import_react24.default.createElement(InlineText, {
     extend,
@@ -628,4 +618,4 @@ ...props
 LiteralText.propTypes = {
-  extend: import_prop_types23.default.object,
-  children: import_prop_types23.default.node
+  extend: import_prop_types22.default.object,
+  children: import_prop_types22.default.node
 };
@@ -635,8 +625,8 @@
 var import_vcc_ui17 = __toModule(require("vcc-ui"));
-var import_react26 = __toModule(require("react"));
-var import_prop_types24 = __toModule(require("prop-types"));
+var import_react25 = __toModule(require("react"));
+var import_prop_types23 = __toModule(require("prop-types"));
 function MediaBlock({ratio = "16:9", children, extend}) {
   const [w, h] = ratio.match(/^(\d+)[x:](\d+)$/).slice(1);
   const paddingPercent = h / w * 100;
-  return /* @__PURE__ */ import_react26.default.createElement(import_vcc_ui17.Block, {
+  return /* @__PURE__ */ import_react25.default.createElement(import_vcc_ui17.Block, {
     extend: {
@@ -657,4 +647,4 @@ position: "relative",
 MediaBlock.propTypes = {
-  extend: import_prop_types24.default.object,
-  ratio: import_prop_types24.default.oneOf([
+  extend: import_prop_types23.default.object,
+  ratio: import_prop_types23.default.oneOf([
     "16:9",
@@ -669,3 +659,3 @@ "1:1",
   ]),
-  children: import_prop_types24.default.node
+  children: import_prop_types23.default.node
 };
@@ -675,3 +665,3 @@
 var import_vcc_ui18 = __toModule(require("vcc-ui"));
-var import_react27 = __toModule(require("react"));
+var import_react26 = __toModule(require("react"));
 
@@ -687,6 +677,6 @@ // src/utils/felaUtils.js
 // src/support/atoms/MenuPathText/index.js
-var import_prop_types25 = __toModule(require("prop-types"));
+var import_prop_types24 = __toModule(require("prop-types"));
 function MenuPathText({children, extend}) {
   const theme = (0, import_vcc_ui18.useTheme)();
-  return /* @__PURE__ */ import_react27.default.createElement(InlineText, {
+  return /* @__PURE__ */ import_react26.default.createElement(InlineText, {
     as: "span",
@@ -701,3 +691,3 @@ extend: {
 MenuPathText.propTypes = {
-  extend: import_prop_types25.default.object,
+  extend: import_prop_types24.default.object,
   children: allowedChildren([DisplayDbText, DisplayText])
@@ -707,6 +697,6 @@ };
 // src/support/atoms/NonBreakingText/index.js
-var import_react28 = __toModule(require("react"));
-var import_prop_types26 = __toModule(require("prop-types"));
+var import_react27 = __toModule(require("react"));
+var import_prop_types25 = __toModule(require("prop-types"));
 function NonBreakingText({children, extend}) {
-  return /* @__PURE__ */ import_react28.default.createElement(InlineText, {
+  return /* @__PURE__ */ import_react27.default.createElement(InlineText, {
     as: "span",
@@ -717,14 +707,14 @@ extend: {whiteSpace: "nowrap", ...extend}
 NonBreakingText.propTypes = {
-  extend: import_prop_types26.default.object,
-  children: import_prop_types26.default.node
+  extend: import_prop_types25.default.object,
+  children: import_prop_types25.default.node
 };
 
 // src/support/atoms/ProcedureAction/index.js
-var import_react29 = __toModule(require("react"));
-var import_prop_types27 = __toModule(require("prop-types"));
+var import_react28 = __toModule(require("react"));
+var import_prop_types26 = __toModule(require("prop-types"));
 function ProcedureAction({children}) {
-  return /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, children);
 }
 ProcedureAction.propTypes = {
-  extend: import_prop_types27.default.object,
+  extend: import_prop_types26.default.object,
   children: allowedChildren([Paragraph])
@@ -735,7 +725,7 @@ };
 var import_vcc_ui19 = __toModule(require("vcc-ui"));
-var import_react30 = __toModule(require("react"));
-var import_prop_types28 = __toModule(require("prop-types"));
+var import_react29 = __toModule(require("react"));
+var import_prop_types27 = __toModule(require("prop-types"));
 function ProcedureResult({children}) {
   const theme = (0, import_vcc_ui19.useTheme)();
-  return /* @__PURE__ */ import_react30.default.createElement(import_vcc_ui19.Block, {
+  return /* @__PURE__ */ import_react29.default.createElement(import_vcc_ui19.Block, {
     extend: {
@@ -755,3 +745,3 @@ "> *": {
 ProcedureResult.propTypes = {
-  extend: import_prop_types28.default.object,
+  extend: import_prop_types27.default.object,
   children: allowedChildren([Paragraph])
@@ -761,8 +751,8 @@ };
 // src/support/atoms/ProcedureRoot/index.js
-var import_react32 = __toModule(require("react"));
+var import_react31 = __toModule(require("react"));
 
 // src/support/atoms/ProcedureStep/index.js
-var import_react31 = __toModule(require("react"));
+var import_react30 = __toModule(require("react"));
 function ProcedureStep({children}) {
-  return /* @__PURE__ */ import_react31.default.createElement(ListItem, {
+  return /* @__PURE__ */ import_react30.default.createElement(ListItem, {
     extend: {
@@ -789,3 +779,3 @@ listStyleType: "none",
 function ProcedureRoot({children}) {
-  return /* @__PURE__ */ import_react32.default.createElement(OrderedList, {
+  return /* @__PURE__ */ import_react31.default.createElement(OrderedList, {
     extend: {
@@ -801,7 +791,7 @@ counterReset: "step"
 // src/support/atoms/SCharText/index.js
-var import_react33 = __toModule(require("react"));
-var import_prop_types29 = __toModule(require("prop-types"));
+var import_react32 = __toModule(require("react"));
+var import_prop_types28 = __toModule(require("prop-types"));
 var import_vcc_ui20 = __toModule(require("vcc-ui"));
 function SCharText({children, extend, font = "Arial Unicode MS"}) {
-  return /* @__PURE__ */ import_react33.default.createElement(import_vcc_ui20.Inline, {
+  return /* @__PURE__ */ import_react32.default.createElement(import_vcc_ui20.Inline, {
     extend: {fontFamily: font, ...extend}
@@ -811,12 +801,12 @@ }, children);
 SCharText.propTypes = {
-  font: import_prop_types29.default.string,
-  extend: import_prop_types29.default.object,
-  children: import_prop_types29.default.node
+  font: import_prop_types28.default.string,
+  extend: import_prop_types28.default.object,
+  children: import_prop_types28.default.node
 };
 
 // src/support/atoms/SubText/index.js
-var import_react34 = __toModule(require("react"));
-var import_prop_types30 = __toModule(require("prop-types"));
+var import_react33 = __toModule(require("react"));
+var import_prop_types29 = __toModule(require("prop-types"));
 function SubText({children, extend}) {
-  return /* @__PURE__ */ import_react34.default.createElement(InlineText, {
+  return /* @__PURE__ */ import_react33.default.createElement(InlineText, {
     as: "sub",
@@ -827,11 +817,11 @@ extend: {verticalAlign: "sub", ...extend}
 SubText.propTypes = {
-  extend: import_prop_types30.default.object,
-  children: import_prop_types30.default.node
+  extend: import_prop_types29.default.object,
+  children: import_prop_types29.default.node
 };
 
 // src/support/atoms/SupText/index.js
-var import_react35 = __toModule(require("react"));
-var import_prop_types31 = __toModule(require("prop-types"));
+var import_react34 = __toModule(require("react"));
+var import_prop_types30 = __toModule(require("prop-types"));
 function SupText({children, extend}) {
-  return /* @__PURE__ */ import_react35.default.createElement(InlineText, {
+  return /* @__PURE__ */ import_react34.default.createElement(InlineText, {
     as: "sup",
@@ -845,4 +835,4 @@ extend: {
 SupText.propTypes = {
-  extend: import_prop_types31.default.object,
-  children: import_prop_types31.default.node
+  extend: import_prop_types30.default.object,
+  children: import_prop_types30.default.node
 };
@@ -852,6 +842,6 @@
 var import_vcc_ui23 = __toModule(require("vcc-ui"));
-var import_react38 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
 
 // src/support/atoms/TableRow/index.js
-var import_react37 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
 var import_vcc_ui22 = __toModule(require("vcc-ui"));
@@ -861,4 +851,4 @@
 var import_vcc_ui21 = __toModule(require("vcc-ui"));
-var import_prop_types32 = __toModule(require("prop-types"));
-var import_react36 = __toModule(require("react"));
+var import_prop_types31 = __toModule(require("prop-types"));
+var import_react35 = __toModule(require("react"));
 function TableEntry({
@@ -875,3 +865,3 @@ children,
   const moreRowsInteger = !isNaN(morerows) ? parseInt(morerows, 10) : 0;
-  return /* @__PURE__ */ import_react36.default.createElement(import_vcc_ui21.Block, {
+  return /* @__PURE__ */ import_react35.default.createElement(import_vcc_ui21.Block, {
     as: isHead ? "th" : "td",
@@ -894,9 +884,9 @@ extend: {
 TableEntry.propTypes = {
-  isHead: import_prop_types32.default.bool,
-  morerows: import_prop_types32.default.oneOfType([import_prop_types32.default.number, import_prop_types32.default.string]),
-  valign: import_prop_types32.default.oneOf(["top", "bottom", "middle"]),
-  align: import_prop_types32.default.oneOf(["left", "right", "center", "justify"]),
-  children: import_prop_types32.default.node,
-  colSpan: import_prop_types32.default.oneOfType([import_prop_types32.default.number, import_prop_types32.default.string]),
-  rowSpan: import_prop_types32.default.oneOfType([import_prop_types32.default.number, import_prop_types32.default.string])
+  isHead: import_prop_types31.default.bool,
+  morerows: import_prop_types31.default.oneOfType([import_prop_types31.default.number, import_prop_types31.default.string]),
+  valign: import_prop_types31.default.oneOf(["top", "bottom", "middle"]),
+  align: import_prop_types31.default.oneOf(["left", "right", "center", "justify"]),
+  children: import_prop_types31.default.node,
+  colSpan: import_prop_types31.default.oneOfType([import_prop_types31.default.number, import_prop_types31.default.string]),
+  rowSpan: import_prop_types31.default.oneOfType([import_prop_types31.default.number, import_prop_types31.default.string])
 };
@@ -906,3 +896,3 @@
 function TableRow({children}) {
-  return /* @__PURE__ */ import_react37.default.createElement(import_vcc_ui22.Block, {
+  return /* @__PURE__ */ import_react36.default.createElement(import_vcc_ui22.Block, {
     as: "tr",
@@ -918,3 +908,3 @@ extend: {display: "table-row"}
 function TableBody({children}) {
-  return /* @__PURE__ */ import_react38.default.createElement(import_vcc_ui23.Block, {
+  return /* @__PURE__ */ import_react37.default.createElement(import_vcc_ui23.Block, {
     as: "tbody",
@@ -929,6 +919,6 @@ extend: {display: "table-row-group"}
 // src/support/atoms/TableColSpec/index.js
-var import_prop_types33 = __toModule(require("prop-types"));
-var import_react39 = __toModule(require("react"));
+var import_prop_types32 = __toModule(require("prop-types"));
+var import_react38 = __toModule(require("react"));
 function TableColSpec({children, align}) {
-  return /* @__PURE__ */ import_react39.default.createElement("col", {
+  return /* @__PURE__ */ import_react38.default.createElement("col", {
     align
@@ -938,4 +928,4 @@ });
 TableColSpec.propTypes = {
-  align: import_prop_types33.default.oneOf(["left", "right", "center", "justify"]),
-  children: import_prop_types33.default.node
+  align: import_prop_types32.default.oneOf(["left", "right", "center", "justify"]),
+  children: import_prop_types32.default.node
 };
@@ -945,9 +935,9 @@
 var import_vcc_ui25 = __toModule(require("vcc-ui"));
-var import_react41 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 
 // src/support/atoms/TableHead/index.js
 var import_vcc_ui24 = __toModule(require("vcc-ui"));
-var import_react40 = __toModule(require("react"));
+var import_react39 = __toModule(require("react"));
 function TableHead({children}) {
-  return /* @__PURE__ */ import_react40.default.createElement(import_vcc_ui24.Text, {
+  return /* @__PURE__ */ import_react39.default.createElement(import_vcc_ui24.Text, {
     as: "thead",
@@ -967,6 +957,6 @@ subStyle: "emphasis",
   const theme = (0, import_vcc_ui25.useTheme)();
-  const childArr = import_react41.Children.toArray(children);
+  const childArr = import_react40.Children.toArray(children);
   const colspecs = childArr.filter((child) => child.type === TableColSpec);
   const content = colspecs && colspecs.length ? childArr.filter((child) => child.type !== TableColSpec) : children;
-  return /* @__PURE__ */ import_react41.default.createElement(import_vcc_ui25.Block, {
+  return /* @__PURE__ */ import_react40.default.createElement(import_vcc_ui25.Block, {
     as: "table",
@@ -979,3 +969,3 @@ extend: {
     }
-  }, colspecs && colspecs.length ? /* @__PURE__ */ import_react41.default.createElement("colgroup", null, colspecs) : null, content);
+  }, colspecs && colspecs.length ? /* @__PURE__ */ import_react40.default.createElement("colgroup", null, colspecs) : null, content);
 }
@@ -988,7 +978,7 @@ TableGroup.propTypes = {
 var import_vcc_ui26 = __toModule(require("vcc-ui"));
-var import_react42 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 function TableRoot({children}) {
   const theme = (0, import_vcc_ui26.useTheme)();
-  const isGroup = !!import_react42.Children.toArray(children).find((child) => child.type === TableGroup);
-  return /* @__PURE__ */ import_react42.default.createElement(import_vcc_ui26.Block, {
+  const isGroup = !!import_react41.Children.toArray(children).find((child) => child.type === TableGroup);
+  return /* @__PURE__ */ import_react41.default.createElement(import_vcc_ui26.Block, {
     extend: {
@@ -999,3 +989,3 @@ width: "100%",
     }
-  }, isGroup ? children : /* @__PURE__ */ import_react42.default.createElement(TableGroup, null, children));
+  }, isGroup ? children : /* @__PURE__ */ import_react41.default.createElement(TableGroup, null, children));
 }
@@ -1007,7 +997,7 @@ TableRoot.propTypes = {
 // src/support/atoms/UrlText/index.js
-var import_react43 = __toModule(require("react"));
-var import_prop_types34 = __toModule(require("prop-types"));
+var import_react42 = __toModule(require("react"));
+var import_prop_types33 = __toModule(require("prop-types"));
 var import_vcc_ui27 = __toModule(require("vcc-ui"));
 function UrlText({extend, href, children}) {
-  return /* @__PURE__ */ import_react43.default.createElement(import_vcc_ui27.Text, {
+  return /* @__PURE__ */ import_react42.default.createElement(import_vcc_ui27.Text, {
     as: "a",
@@ -1020,5 +1010,5 @@ subStyle: "inline-link",
 UrlText.propTypes = {
-  href: import_prop_types34.default.string,
-  extend: import_prop_types34.default.object,
-  children: import_prop_types34.default.node
+  href: import_prop_types33.default.string,
+  extend: import_prop_types33.default.object,
+  children: import_prop_types33.default.node
 };
@@ -1028,11 +1018,11 @@
 var import_vcc_ui30 = __toModule(require("vcc-ui"));
-var import_prop_types38 = __toModule(require("prop-types"));
-var import_react47 = __toModule(require("react"));
+var import_prop_types37 = __toModule(require("prop-types"));
+var import_react46 = __toModule(require("react"));
 
 // src/support/molecules/Segment/index.js
 var import_vcc_ui28 = __toModule(require("vcc-ui"));
-var import_react44 = __toModule(require("react"));
-var import_prop_types35 = __toModule(require("prop-types"));
+var import_react43 = __toModule(require("react"));
+var import_prop_types34 = __toModule(require("prop-types"));
 function Segment({children, ...props}) {
-  return /* @__PURE__ */ import_react44.default.createElement(import_vcc_ui28.View, {
+  return /* @__PURE__ */ import_react43.default.createElement(import_vcc_ui28.View, {
     as: "section",
@@ -1044,28 +1034,28 @@ spacing: 4,
 Segment.propTypes = {
-  title: import_prop_types35.default.node,
-  children: import_prop_types35.default.node
+  title: import_prop_types34.default.node,
+  children: import_prop_types34.default.node
 };
 
 // src/support/molecules/Slot/index.js
-var import_react45 = __toModule(require("react"));
-var import_prop_types36 = __toModule(require("prop-types"));
+var import_react44 = __toModule(require("react"));
+var import_prop_types35 = __toModule(require("prop-types"));
 function Slot({children}) {
-  return import_react45.Children.only(children);
+  return import_react44.Children.only(children);
 }
 Slot.propTypes = {
-  children: import_prop_types36.default.node
+  children: import_prop_types35.default.node
 };
 
 // src/support/molecules/Article/index.js
-var import_prop_types39 = __toModule(require("vcc-ui/lib/prop-types"));
+var import_prop_types38 = __toModule(require("vcc-ui/lib/prop-types"));
 
 // src/support/molecules/LegalDate/index.js
-var import_react46 = __toModule(require("react"));
-var import_prop_types37 = __toModule(require("prop-types"));
+var import_react45 = __toModule(require("react"));
+var import_prop_types36 = __toModule(require("prop-types"));
 var import_vcc_ui29 = __toModule(require("vcc-ui"));
 LegalDate.propTypes = {
-  children: import_prop_types37.default.node
+  children: import_prop_types36.default.node
 };
 function LegalDate({children}) {
-  return /* @__PURE__ */ import_react46.default.createElement(import_vcc_ui29.Block, null, children);
+  return /* @__PURE__ */ import_react45.default.createElement(import_vcc_ui29.Block, null, children);
 }
@@ -1088,3 +1078,3 @@
 }) {
-  return /* @__PURE__ */ import_react47.default.createElement(import_vcc_ui30.View, {
+  return /* @__PURE__ */ import_react46.default.createElement(import_vcc_ui30.View, {
     spacing,
@@ -1102,3 +1092,3 @@ marginTop,
     ...props
-  }, children, /* @__PURE__ */ import_react47.default.createElement(import_vcc_ui30.Spacer, {
+  }, children, /* @__PURE__ */ import_react46.default.createElement(import_vcc_ui30.Spacer, {
     size: 2
@@ -1108,22 +1098,22 @@ }));
 Article.propTypes = {
-  spacing: import_prop_types39.responsiveNumberProp,
-  marginTop: import_prop_types39.responsiveNumberProp,
-  marginLeft: import_prop_types39.responsiveNumberProp,
-  marginRight: import_prop_types39.responsiveNumberProp,
-  marginBottom: import_prop_types39.responsiveNumberProp,
-  paddingTop: import_prop_types39.responsiveNumberProp,
-  paddingLeft: import_prop_types39.responsiveNumberProp,
-  paddingRight: import_prop_types39.responsiveNumberProp,
-  paddingBottom: import_prop_types39.responsiveNumberProp,
+  spacing: import_prop_types38.responsiveNumberProp,
+  marginTop: import_prop_types38.responsiveNumberProp,
+  marginLeft: import_prop_types38.responsiveNumberProp,
+  marginRight: import_prop_types38.responsiveNumberProp,
+  marginBottom: import_prop_types38.responsiveNumberProp,
+  paddingTop: import_prop_types38.responsiveNumberProp,
+  paddingLeft: import_prop_types38.responsiveNumberProp,
+  paddingRight: import_prop_types38.responsiveNumberProp,
+  paddingBottom: import_prop_types38.responsiveNumberProp,
   children: allowedChildren([Segment, Title, Lead, Slot, LegalDate]),
-  extend: import_prop_types38.default.object
+  extend: import_prop_types37.default.object
 };
 
 // src/support/molecules/Disclaimer/index.js
-var import_react49 = __toModule(require("react"));
+var import_react48 = __toModule(require("react"));
 
 // src/support/molecules/Tooltip/index.js
 var import_vcc_ui31 = __toModule(require("vcc-ui"));
-var import_react48 = __toModule(require("react"));
-var import_prop_types40 = __toModule(require("prop-types"));
+var import_react47 = __toModule(require("react"));
+var import_prop_types39 = __toModule(require("prop-types"));
 function reducer(state, action) {
@@ -1141,8 +1131,8 @@ switch (action.type) {
 function Tooltip({children, content}) {
-  const [isVisible, dispatch] = (0, import_react48.useReducer)(reducer, false);
-  const click = (0, import_react48.useCallback)(() => dispatch({type: "toggle"}), []);
-  return /* @__PURE__ */ import_react48.default.createElement(import_vcc_ui31.Click, {
+  const [isVisible, dispatch] = (0, import_react47.useReducer)(reducer, false);
+  const click = (0, import_react47.useCallback)(() => dispatch({type: "toggle"}), []);
+  return /* @__PURE__ */ import_react47.default.createElement(import_vcc_ui31.Click, {
     onClick: click,
     extend: {position: "relative", display: "inline"}
-  }, children, isVisible && /* @__PURE__ */ import_react48.default.createElement(import_vcc_ui31.Flex, {
+  }, children, isVisible && /* @__PURE__ */ import_react47.default.createElement(import_vcc_ui31.Flex, {
     extend: {
@@ -1161,42 +1151,54 @@ position: "fixed",
     }
-  }, /* @__PURE__ */ import_react48.default.createElement(import_vcc_ui31.Block, {
+  }, /* @__PURE__ */ import_react47.default.createElement(import_vcc_ui31.Block, {
     extend: {maxWidth: "500px", margin: "auto"}
-  }, /* @__PURE__ */ import_react48.default.createElement(import_vcc_ui31.Card, null, /* @__PURE__ */ import_react48.default.createElement(import_vcc_ui31.CardContent, null, content)))));
+  }, /* @__PURE__ */ import_react47.default.createElement(import_vcc_ui31.Card, null, /* @__PURE__ */ import_react47.default.createElement(import_vcc_ui31.CardContent, null, content)))));
 }
 Tooltip.propTypes = {
-  content: import_prop_types40.default.node.isRequired,
-  children: import_prop_types40.default.node.isRequired
+  content: import_prop_types39.default.node.isRequired,
+  children: import_prop_types39.default.node.isRequired
 };
 
 // src/support/molecules/Disclaimer/index.js
-var import_prop_types41 = __toModule(require("prop-types"));
+var import_prop_types40 = __toModule(require("prop-types"));
 var import_vcc_ui32 = __toModule(require("vcc-ui"));
 function Disclaimer({children}) {
-  return /* @__PURE__ */ import_react49.default.createElement(Tooltip, {
-    content: /* @__PURE__ */ import_react49.default.createElement(import_vcc_ui32.View, {
+  return /* @__PURE__ */ import_react48.default.createElement(Tooltip, {
+    content: /* @__PURE__ */ import_react48.default.createElement(import_vcc_ui32.View, {
       extend: {flexDirection: "row", alignItems: "center"},
       spacing: 2
-    }, /* @__PURE__ */ import_react49.default.createElement(import_vcc_ui32.Block, null, /* @__PURE__ */ import_react49.default.createElement(InfoIcon, {
-      size: 2
-    })), /* @__PURE__ */ import_react49.default.createElement(import_vcc_ui32.Block, null, children))
-  }, /* @__PURE__ */ import_react49.default.createElement(SupText, null, "*"));
+    }, /* @__PURE__ */ import_react48.default.createElement(import_vcc_ui32.Block, null, /* @__PURE__ */ import_react48.default.createElement(import_vcc_ui32.Icon, {
+      type: "car-features-40"
+    })), /* @__PURE__ */ import_react48.default.createElement(import_vcc_ui32.Block, null, children))
+  }, /* @__PURE__ */ import_react48.default.createElement(SupText, null, "*"));
 }
-Disclaimer.propTypes = {children: import_prop_types41.default.node};
+Disclaimer.propTypes = {children: import_prop_types40.default.node};
 
 // src/support/molecules/Footnote/index.js
-var import_react50 = __toModule(require("react"));
-var import_prop_types42 = __toModule(require("prop-types"));
+var import_react49 = __toModule(require("react"));
+var import_prop_types41 = __toModule(require("prop-types"));
 var import_vcc_ui33 = __toModule(require("vcc-ui"));
 function Footnote({children}) {
-  return /* @__PURE__ */ import_react50.default.createElement(Tooltip, {
-    content: /* @__PURE__ */ import_react50.default.createElement(import_vcc_ui33.View, {
+  return /* @__PURE__ */ import_react49.default.createElement(Tooltip, {
+    content: /* @__PURE__ */ import_react49.default.createElement(import_vcc_ui33.View, {
       extend: {flexDirection: "row", alignItems: "center"},
       spacing: 2
-    }, /* @__PURE__ */ import_react50.default.createElement(import_vcc_ui33.Block, null, /* @__PURE__ */ import_react50.default.createElement(InfoIcon, {
-      size: 2
-    })), /* @__PURE__ */ import_react50.default.createElement(import_vcc_ui33.Block, null, children))
-  }, /* @__PURE__ */ import_react50.default.createElement(InfoIcon, null));
+    }, /* @__PURE__ */ import_react49.default.createElement(import_vcc_ui33.Block, null, /* @__PURE__ */ import_react49.default.createElement(import_vcc_ui33.Icon, {
+      type: "info-40"
+    })), /* @__PURE__ */ import_react49.default.createElement(import_vcc_ui33.Text, null, children))
+  }, /* @__PURE__ */ import_react49.default.createElement(import_vcc_ui33.Inline, {
+    extend: {
+      display: "inline-block",
+      transform: "scale(0.75)",
+      lineHeight: 0,
+      marginTop: -5,
+      marginBottom: -5,
+      marginLeft: -3,
+      marginRight: -3
+    }
+  }, /* @__PURE__ */ import_react49.default.createElement(import_vcc_ui33.Icon, {
+    type: "info-24"
+  })));
 }
 Footnote.propTypes = {
-  children: import_prop_types42.default.node
+  children: import_prop_types41.default.node
 };
@@ -1206,13 +1208,13 @@
 var import_vcc_ui34 = __toModule(require("vcc-ui"));
-var import_react51 = __toModule(require("react"));
-var import_prop_types43 = __toModule(require("prop-types"));
+var import_react50 = __toModule(require("react"));
+var import_prop_types42 = __toModule(require("prop-types"));
 function PImg({children}) {
   const theme = (0, import_vcc_ui34.useTheme)();
-  const childArr = import_react51.Children.toArray(children);
+  const childArr = import_react50.Children.toArray(children);
   const img = childArr.filter((child) => child.type === Img);
   const content = childArr.filter((child) => child.type !== Img);
-  return /* @__PURE__ */ import_react51.default.createElement(import_vcc_ui34.View, {
+  return /* @__PURE__ */ import_react50.default.createElement(import_vcc_ui34.View, {
     spacing: 3,
     direction: ["column", "row"]
-  }, /* @__PURE__ */ import_react51.default.createElement(import_vcc_ui34.Block, {
+  }, /* @__PURE__ */ import_react50.default.createElement(import_vcc_ui34.Block, {
     extend: {
@@ -1222,3 +1224,3 @@ "> img": {width: "100%", maxWidth: "5rem"},
     }
-  }, img), /* @__PURE__ */ import_react51.default.createElement(import_vcc_ui34.Block, {
+  }, img), /* @__PURE__ */ import_react50.default.createElement(import_vcc_ui34.Block, {
     size: 10
@@ -1228,4 +1230,4 @@ }, content));
 PImg.propTypes = {
-  extend: import_prop_types43.default.object,
-  children: import_prop_types43.default.node
+  extend: import_prop_types42.default.object,
+  children: import_prop_types42.default.node
 };
@@ -1235,6 +1237,6 @@
 var import_vcc_ui35 = __toModule(require("vcc-ui"));
-var import_react52 = __toModule(require("react"));
-var import_prop_types44 = __toModule(require("prop-types"));
+var import_react51 = __toModule(require("react"));
+var import_prop_types43 = __toModule(require("prop-types"));
 function SubSegment({children, ...props}) {
-  return /* @__PURE__ */ import_react52.default.createElement(import_vcc_ui35.View, {
+  return /* @__PURE__ */ import_react51.default.createElement(import_vcc_ui35.View, {
     as: "section",
@@ -1246,4 +1248,4 @@ spacing: 3,
 SubSegment.propTypes = {
-  title: import_prop_types44.default.node,
-  children: import_prop_types44.default.node
+  title: import_prop_types43.default.node,
+  children: import_prop_types43.default.node
 };
@@ -1253,8 +1255,8 @@
 var import_vcc_ui36 = __toModule(require("vcc-ui"));
-var import_react53 = __toModule(require("react"));
-var import_prop_types45 = __toModule(require("prop-types"));
+var import_react52 = __toModule(require("react"));
+var import_prop_types44 = __toModule(require("prop-types"));
 function Video({poster, src, ratio = "16:9"}) {
-  return /* @__PURE__ */ import_react53.default.createElement(MediaBlock, {
+  return /* @__PURE__ */ import_react52.default.createElement(MediaBlock, {
     ratio
-  }, /* @__PURE__ */ import_react53.default.createElement(import_vcc_ui36.Block, {
+  }, /* @__PURE__ */ import_react52.default.createElement(import_vcc_ui36.Block, {
     as: "video",
@@ -1268,12 +1270,12 @@ preload: "auto",
 Video.propTypes = {
-  poster: import_prop_types45.default.string,
-  src: import_prop_types45.default.string,
-  ratio: import_prop_types45.default.string
+  poster: import_prop_types44.default.string,
+  src: import_prop_types44.default.string,
+  ratio: import_prop_types44.default.string
 };
 
 // src/support/organisms/JSONArticle/index.js
-var import_react57 = __toModule(require("react"));
+var import_react56 = __toModule(require("react"));
 
 // src/render/createRenderer.js
-var import_react54 = __toModule(require("react"));
+var import_react53 = __toModule(require("react"));
 
@@ -1294,3 +1296,3 @@ // src/render/renderUtils.js
     if (Array.isArray(data)) {
-      return import_react54.default.createElement(import_react54.default.Fragment, null, renderChildren(render2, data));
+      return import_react53.default.createElement(import_react53.default.Fragment, null, renderChildren(render2, data));
     }
@@ -1302,3 +1304,3 @@ const componentConfig = getComponentConfig(componentMappings, data);
       const {value, children} = componentConfig;
-      return import_react54.default.createElement(componentConfig.type, {
+      return import_react53.default.createElement(componentConfig.type, {
         key: typeof index !== void 0 ? generateKey(data.type) : null,
@@ -1357,3 +1359,3 @@ ...componentConfig.props
 // src/render/config.js
-var import_react56 = __toModule(require("react"));
+var import_react55 = __toModule(require("react"));
 
@@ -1371,7 +1373,7 @@ // src/render/configUtils.js
 // src/support/atoms/Time/index.js
-var import_react55 = __toModule(require("react"));
-var import_prop_types46 = __toModule(require("prop-types"));
+var import_react54 = __toModule(require("react"));
+var import_prop_types45 = __toModule(require("prop-types"));
 var import_vcc_ui37 = __toModule(require("vcc-ui"));
 function Time({value, datetime, extend}) {
-  return /* @__PURE__ */ import_react55.default.createElement(import_vcc_ui37.Inline, {
+  return /* @__PURE__ */ import_react54.default.createElement(import_vcc_ui37.Inline, {
     as: "time",
@@ -1383,9 +1385,9 @@ dateTime: datetime,
 Time.propTypes = {
-  extend: import_prop_types46.default.object,
-  datetime: import_prop_types46.default.string,
-  value: import_prop_types46.default.string
+  extend: import_prop_types45.default.object,
+  datetime: import_prop_types45.default.string,
+  value: import_prop_types45.default.string
 };
 
 // src/support/atoms/TextNode/index.js
-var import_prop_types47 = __toModule(require("prop-types"));
+var import_prop_types46 = __toModule(require("prop-types"));
 
@@ -1411,3 +1413,3 @@ // src/utils/interpolateTextVariables.js
 TextNode.propTypes = {
-  value: import_prop_types47.default.string
+  value: import_prop_types46.default.string
 };
@@ -1490,3 +1492,3 @@
   },
-  "important-ref": {type: import_react56.default.Fragment},
+  "important-ref": {type: import_react55.default.Fragment},
   important: {
@@ -1593,3 +1595,3 @@ type: InfoBox,
   },
-  "e.text": {type: import_react56.default.Fragment},
+  "e.text": {type: import_react55.default.Fragment},
   time({value, datetime}) {
@@ -1659,5 +1661,5 @@ return {type: Time, props: {value, datetime}};
   }
-  return /* @__PURE__ */ import_react57.default.createElement(StringsProvider, {
+  return /* @__PURE__ */ import_react56.default.createElement(StringsProvider, {
     value: strings
   }, article);
 }

dist/ced-os-react-components.esm.js

@@ -369,3 +369,3 @@ // src/support/atoms/InlineText/index.js
 // src/support/atoms/InfoBox/index.js
-import {Flex, Spacer as Spacer2, useTheme as useTheme4, View as View4} from "vcc-ui";
+import {Flex, Icon, Spacer as Spacer2, useTheme as useTheme3, View as View4} from "vcc-ui";
 
@@ -400,28 +400,7 @@ // src/support/atoms/Title/index.js
 // src/support/atoms/InfoBox/index.js
-import React22 from "react";
-
-// src/support/atoms/InfoIcon/index.js
-import {Inline as Inline3, useTheme as useTheme3} from "vcc-ui";
-import React20 from "react";
+import React21 from "react";
 import PropTypes19 from "prop-types";
-function InfoIcon({color, size = 1}) {
-  const theme = useTheme3();
-  const w = size * theme.baselineGrid * 2;
-  return /* @__PURE__ */ React20.createElement(Inline3, {
-    extend: {
-      verticalAlign: "baseline",
-      display: "inline-block",
-      width: w,
-      height: w,
-      backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 26.73828 26.73828' style='fill:` + encodeURIComponent(color) + `' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='be0d25ca-8fb5-41d9-9040-90201f3e2eb3' d='M13.37 0a13.37 13.37 0 1 0 13.368 13.37A13.385 13.385 0 0 0 13.37 0zm0 25.738A12.37 12.37 0 1 1 25.737 13.37 12.383 12.383 0 0 1 13.37 25.74z'/%3E%3Cpath class='be0d25ca-8fb5-41d9-9040-90201f3e2eb3' d='M14.689 7.428a1.46 1.46 0 0 0-1.292 1.397.741.741 0 0 0 .765.713 1.43 1.43 0 0 0 1.274-1.327.74.74 0 0 0-.747-.783zM13.776 17.817a.516.516 0 0 1-.534-.586 2.702 2.702 0 0 1 .152-.73c.062-.221.143-.465.196-.627.12-.382.222-.734.324-1.085.1-.342.199-.684.302-1.021.04-.138.103-.324.173-.53.052-.156.11-.323.162-.49a4.715 4.715 0 0 0 .2-.957.644.644 0 0 0-.694-.607 6.303 6.303 0 0 0-3.103 1.54l.265.3a1.84 1.84 0 0 1 .943-.485.554.554 0 0 1 .568.55 2.096 2.096 0 0 1-.1.455l-.047.177c-.056.194-.12.383-.164.511l-.17.537c-.18.583-.36 1.158-.527 1.745-.044.158-.097.318-.15.478a3.798 3.798 0 0 0-.263 1.187.775.775 0 0 0 .835.783 6.022 6.022 0 0 0 3.012-1.5l-.246-.262a2.611 2.611 0 0 1-1.134.617z'/%3E%3C/svg%3E")`
-    }
-  });
-}
-InfoIcon.propTypes = {color: PropTypes19.string, size: PropTypes19.number};
 
-// src/support/atoms/InfoBox/index.js
-import PropTypes20 from "prop-types";
-
 // src/support/atoms/StringsProvider/index.js
-import React21, {createContext, useContext} from "react";
+import React20, {createContext, useContext} from "react";
 
@@ -438,3 +417,3 @@ // src/support/atoms/StringsProvider/defaultStrings.js
 var StringsContext = createContext(defaultStrings);
-var StringsProvider = ({value, ...props}) => /* @__PURE__ */ React21.createElement(StringsContext.Provider, {
+var StringsProvider = ({value, ...props}) => /* @__PURE__ */ React20.createElement(StringsContext.Provider, {
   value: {...defaultStrings, ...value},
@@ -449,6 +428,10 @@ ...props
 // src/support/atoms/InfoBox/index.js
+import {Inline as Inline3} from "vcc-ui";
 function InfoBox({children, variant, title: propTitle}) {
   const {s} = useStrings();
-  const theme = useTheme4();
-  let title, color = theme.color.foreground.secondary;
+  const theme = useTheme3();
+  let title;
+  let icon;
+  let color;
+  let iconColor;
   if (typeof propTitle === "undefined") {
@@ -458,7 +441,11 @@ switch (variant) {
         title = s(variant, "Important!");
-        color = theme.color.foreground.alert;
+        icon = "checkmark-32";
+        color = theme.color.foreground.action;
+        iconColor = "action";
         break;
       case "warning":
         title = s(variant, "Warning!");
-        color = "orange";
+        icon = "car-driveralert-32";
+        color = theme.color.foreground.alert;
+        iconColor = "alert";
         break;
@@ -468,3 +455,5 @@ case "note":
         title = s(variant, "Note");
+        icon = "info-32";
         color = theme.color.foreground.secondary;
+        iconColor = "secondary";
         break;
@@ -475,25 +464,27 @@ }
   }
-  return /* @__PURE__ */ React22.createElement(View4, {
+  return /* @__PURE__ */ React21.createElement(View4, {
     extend: {borderLeft: `5px solid ${color}`},
     padding: 1,
     paddingLeft: 2
-  }, /* @__PURE__ */ React22.createElement(Title, {
-    level: 3
-  }, /* @__PURE__ */ React22.createElement(InfoIcon, {
-    color
-  }), " ", title), /* @__PURE__ */ React22.createElement(Spacer2, {
+  }, /* @__PURE__ */ React21.createElement(Title, {
+    level: 3,
+    extend: {display: "flex", alignItems: "center"}
+  }, /* @__PURE__ */ React21.createElement(Inline3, null, /* @__PURE__ */ React21.createElement(Icon, {
+    color: iconColor,
+    type: icon
+  })), "\xA0", /* @__PURE__ */ React21.createElement(Inline3, null, title)), /* @__PURE__ */ React21.createElement(Spacer2, {
     size: 2
-  }), /* @__PURE__ */ React22.createElement(Flex, null, children));
+  }), /* @__PURE__ */ React21.createElement(Flex, null, children));
 }
 InfoBox.propTypes = {
-  children: PropTypes20.node,
-  variant: PropTypes20.oneOf(["warning", "note", "important"]),
-  title: PropTypes20.string
+  children: PropTypes19.node,
+  variant: PropTypes19.oneOf(["warning", "note", "important"]),
+  title: PropTypes19.string
 };
 
 // src/support/atoms/InteriorText/index.js
-import React23 from "react";
-import PropTypes21 from "prop-types";
+import React22 from "react";
+import PropTypes20 from "prop-types";
 function InteriorText({extend, children}) {
-  return /* @__PURE__ */ React23.createElement(InlineText, {
+  return /* @__PURE__ */ React22.createElement(InlineText, {
     as: "i",
@@ -505,4 +496,4 @@ subStyle: "emphasis",
 InteriorText.propTypes = {
-  extend: PropTypes21.object,
-  children: PropTypes21.node
+  extend: PropTypes20.object,
+  children: PropTypes20.node
 };
@@ -512,14 +503,14 @@
 import {Block as Block2} from "vcc-ui";
-import React24, {Children as Children3} from "react";
-import PropTypes22 from "prop-types";
+import React23, {Children as Children3} from "react";
+import PropTypes21 from "prop-types";
 function Lead({children, extend}) {
-  return /* @__PURE__ */ React24.createElement(Block2, {
+  return /* @__PURE__ */ React23.createElement(Block2, {
     extend
   }, Children3.map(children, (child) => {
     if ((child == null ? void 0 : child.type) !== Paragraph) {
-      return /* @__PURE__ */ React24.createElement(Paragraph, {
+      return /* @__PURE__ */ React23.createElement(Paragraph, {
         variant: "hillary"
       }, child);
     } else {
-      return React24.cloneElement(child, {variant: "hillary"});
+      return React23.cloneElement(child, {variant: "hillary"});
     }
@@ -529,11 +520,11 @@ }));
 Lead.propTypes = {
-  children: allowedChildren([Paragraph, PropTypes22.string]),
-  extend: PropTypes22.object
+  children: allowedChildren([Paragraph, PropTypes21.string]),
+  extend: PropTypes21.object
 };
 
 // src/support/atoms/LiteralText/index.js
-import React25 from "react";
-import PropTypes23 from "prop-types";
+import React24 from "react";
+import PropTypes22 from "prop-types";
 function LiteralText({children, extend, ...props}) {
-  return /* @__PURE__ */ React25.createElement(InlineText, {
+  return /* @__PURE__ */ React24.createElement(InlineText, {
     extend,
@@ -544,4 +535,4 @@ ...props
 LiteralText.propTypes = {
-  extend: PropTypes23.object,
-  children: PropTypes23.node
+  extend: PropTypes22.object,
+  children: PropTypes22.node
 };
@@ -551,8 +542,8 @@
 import {Block as Block3} from "vcc-ui";
-import React26 from "react";
-import PropTypes24 from "prop-types";
+import React25 from "react";
+import PropTypes23 from "prop-types";
 function MediaBlock({ratio = "16:9", children, extend}) {
   const [w, h] = ratio.match(/^(\d+)[x:](\d+)$/).slice(1);
   const paddingPercent = h / w * 100;
-  return /* @__PURE__ */ React26.createElement(Block3, {
+  return /* @__PURE__ */ React25.createElement(Block3, {
     extend: {
@@ -573,4 +564,4 @@ position: "relative",
 MediaBlock.propTypes = {
-  extend: PropTypes24.object,
-  ratio: PropTypes24.oneOf([
+  extend: PropTypes23.object,
+  ratio: PropTypes23.oneOf([
     "16:9",
@@ -585,8 +576,8 @@ "1:1",
   ]),
-  children: PropTypes24.node
+  children: PropTypes23.node
 };
 
 // src/support/atoms/MenuPathText/index.js
-import {useTheme as useTheme5} from "vcc-ui";
-import React27 from "react";
+import {useTheme as useTheme4} from "vcc-ui";
+import React26 from "react";
 
@@ -602,6 +593,6 @@ // src/utils/felaUtils.js
 // src/support/atoms/MenuPathText/index.js
-import PropTypes25 from "prop-types";
+import PropTypes24 from "prop-types";
 function MenuPathText({children, extend}) {
-  const theme = useTheme5();
-  return /* @__PURE__ */ React27.createElement(InlineText, {
+  const theme = useTheme4();
+  return /* @__PURE__ */ React26.createElement(InlineText, {
     as: "span",
@@ -616,3 +607,3 @@ extend: {
 MenuPathText.propTypes = {
-  extend: PropTypes25.object,
+  extend: PropTypes24.object,
   children: allowedChildren([DisplayDbText, DisplayText])
@@ -622,6 +613,6 @@ };
 // src/support/atoms/NonBreakingText/index.js
-import React28 from "react";
-import PropTypes26 from "prop-types";
+import React27 from "react";
+import PropTypes25 from "prop-types";
 function NonBreakingText({children, extend}) {
-  return /* @__PURE__ */ React28.createElement(InlineText, {
+  return /* @__PURE__ */ React27.createElement(InlineText, {
     as: "span",
@@ -632,14 +623,14 @@ extend: {whiteSpace: "nowrap", ...extend}
 NonBreakingText.propTypes = {
-  extend: PropTypes26.object,
-  children: PropTypes26.node
+  extend: PropTypes25.object,
+  children: PropTypes25.node
 };
 
 // src/support/atoms/ProcedureAction/index.js
-import React29 from "react";
-import PropTypes27 from "prop-types";
+import React28 from "react";
+import PropTypes26 from "prop-types";
 function ProcedureAction({children}) {
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, children);
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, children);
 }
 ProcedureAction.propTypes = {
-  extend: PropTypes27.object,
+  extend: PropTypes26.object,
   children: allowedChildren([Paragraph])
@@ -649,8 +640,8 @@ };
 // src/support/atoms/ProcedureResult/index.js
-import {Block as Block4, useTheme as useTheme6} from "vcc-ui";
-import React30 from "react";
-import PropTypes28 from "prop-types";
+import {Block as Block4, useTheme as useTheme5} from "vcc-ui";
+import React29 from "react";
+import PropTypes27 from "prop-types";
 function ProcedureResult({children}) {
-  const theme = useTheme6();
-  return /* @__PURE__ */ React30.createElement(Block4, {
+  const theme = useTheme5();
+  return /* @__PURE__ */ React29.createElement(Block4, {
     extend: {
@@ -670,3 +661,3 @@ "> *": {
 ProcedureResult.propTypes = {
-  extend: PropTypes28.object,
+  extend: PropTypes27.object,
   children: allowedChildren([Paragraph])
@@ -676,8 +667,8 @@ };
 // src/support/atoms/ProcedureRoot/index.js
-import React32 from "react";
+import React31 from "react";
 
 // src/support/atoms/ProcedureStep/index.js
-import React31 from "react";
+import React30 from "react";
 function ProcedureStep({children}) {
-  return /* @__PURE__ */ React31.createElement(ListItem, {
+  return /* @__PURE__ */ React30.createElement(ListItem, {
     extend: {
@@ -704,3 +695,3 @@ listStyleType: "none",
 function ProcedureRoot({children}) {
-  return /* @__PURE__ */ React32.createElement(OrderedList, {
+  return /* @__PURE__ */ React31.createElement(OrderedList, {
     extend: {
@@ -716,7 +707,7 @@ counterReset: "step"
 // src/support/atoms/SCharText/index.js
-import React33 from "react";
-import PropTypes29 from "prop-types";
+import React32 from "react";
+import PropTypes28 from "prop-types";
 import {Inline as Inline4} from "vcc-ui";
 function SCharText({children, extend, font = "Arial Unicode MS"}) {
-  return /* @__PURE__ */ React33.createElement(Inline4, {
+  return /* @__PURE__ */ React32.createElement(Inline4, {
     extend: {fontFamily: font, ...extend}
@@ -726,12 +717,12 @@ }, children);
 SCharText.propTypes = {
-  font: PropTypes29.string,
-  extend: PropTypes29.object,
-  children: PropTypes29.node
+  font: PropTypes28.string,
+  extend: PropTypes28.object,
+  children: PropTypes28.node
 };
 
 // src/support/atoms/SubText/index.js
-import React34 from "react";
-import PropTypes30 from "prop-types";
+import React33 from "react";
+import PropTypes29 from "prop-types";
 function SubText({children, extend}) {
-  return /* @__PURE__ */ React34.createElement(InlineText, {
+  return /* @__PURE__ */ React33.createElement(InlineText, {
     as: "sub",
@@ -742,11 +733,11 @@ extend: {verticalAlign: "sub", ...extend}
 SubText.propTypes = {
-  extend: PropTypes30.object,
-  children: PropTypes30.node
+  extend: PropTypes29.object,
+  children: PropTypes29.node
 };
 
 // src/support/atoms/SupText/index.js
-import React35 from "react";
-import PropTypes31 from "prop-types";
+import React34 from "react";
+import PropTypes30 from "prop-types";
 function SupText({children, extend}) {
-  return /* @__PURE__ */ React35.createElement(InlineText, {
+  return /* @__PURE__ */ React34.createElement(InlineText, {
     as: "sup",
@@ -760,4 +751,4 @@ extend: {
 SupText.propTypes = {
-  extend: PropTypes31.object,
-  children: PropTypes31.node
+  extend: PropTypes30.object,
+  children: PropTypes30.node
 };
@@ -767,12 +758,12 @@
 import {Block as Block7} from "vcc-ui";
-import React38 from "react";
+import React37 from "react";
 
 // src/support/atoms/TableRow/index.js
-import React37 from "react";
+import React36 from "react";
 import {Block as Block6} from "vcc-ui";
 
 // src/support/atoms/TableEntry/index.js
-import {Block as Block5, useTheme as useTheme7} from "vcc-ui";
-import PropTypes32 from "prop-types";
-import React36 from "react";
+import {Block as Block5, useTheme as useTheme6} from "vcc-ui";
+import PropTypes31 from "prop-types";
+import React35 from "react";
 function TableEntry({
@@ -787,5 +778,5 @@ children,
 }) {
-  const theme = useTheme7();
+  const theme = useTheme6();
   const moreRowsInteger = !isNaN(morerows) ? parseInt(morerows, 10) : 0;
-  return /* @__PURE__ */ React36.createElement(Block5, {
+  return /* @__PURE__ */ React35.createElement(Block5, {
     as: isHead ? "th" : "td",
@@ -808,9 +799,9 @@ extend: {
 TableEntry.propTypes = {
-  isHead: PropTypes32.bool,
-  morerows: PropTypes32.oneOfType([PropTypes32.number, PropTypes32.string]),
-  valign: PropTypes32.oneOf(["top", "bottom", "middle"]),
-  align: PropTypes32.oneOf(["left", "right", "center", "justify"]),
-  children: PropTypes32.node,
-  colSpan: PropTypes32.oneOfType([PropTypes32.number, PropTypes32.string]),
-  rowSpan: PropTypes32.oneOfType([PropTypes32.number, PropTypes32.string])
+  isHead: PropTypes31.bool,
+  morerows: PropTypes31.oneOfType([PropTypes31.number, PropTypes31.string]),
+  valign: PropTypes31.oneOf(["top", "bottom", "middle"]),
+  align: PropTypes31.oneOf(["left", "right", "center", "justify"]),
+  children: PropTypes31.node,
+  colSpan: PropTypes31.oneOfType([PropTypes31.number, PropTypes31.string]),
+  rowSpan: PropTypes31.oneOfType([PropTypes31.number, PropTypes31.string])
 };
@@ -820,3 +811,3 @@
 function TableRow({children}) {
-  return /* @__PURE__ */ React37.createElement(Block6, {
+  return /* @__PURE__ */ React36.createElement(Block6, {
     as: "tr",
@@ -832,3 +823,3 @@ extend: {display: "table-row"}
 function TableBody({children}) {
-  return /* @__PURE__ */ React38.createElement(Block7, {
+  return /* @__PURE__ */ React37.createElement(Block7, {
     as: "tbody",
@@ -843,6 +834,6 @@ extend: {display: "table-row-group"}
 // src/support/atoms/TableColSpec/index.js
-import PropTypes33 from "prop-types";
-import React39 from "react";
+import PropTypes32 from "prop-types";
+import React38 from "react";
 function TableColSpec({children, align}) {
-  return /* @__PURE__ */ React39.createElement("col", {
+  return /* @__PURE__ */ React38.createElement("col", {
     align
@@ -852,15 +843,15 @@ });
 TableColSpec.propTypes = {
-  align: PropTypes33.oneOf(["left", "right", "center", "justify"]),
-  children: PropTypes33.node
+  align: PropTypes32.oneOf(["left", "right", "center", "justify"]),
+  children: PropTypes32.node
 };
 
 // src/support/atoms/TableGroup/index.js
-import {Block as Block8, useTheme as useTheme8} from "vcc-ui";
-import React41, {Children as Children4} from "react";
+import {Block as Block8, useTheme as useTheme7} from "vcc-ui";
+import React40, {Children as Children4} from "react";
 
 // src/support/atoms/TableHead/index.js
 import {Text as Text6} from "vcc-ui";
-import React40 from "react";
+import React39 from "react";
 function TableHead({children}) {
-  return /* @__PURE__ */ React40.createElement(Text6, {
+  return /* @__PURE__ */ React39.createElement(Text6, {
     as: "thead",
@@ -879,7 +870,7 @@ subStyle: "emphasis",
 function TableGroup({children}) {
-  const theme = useTheme8();
+  const theme = useTheme7();
   const childArr = Children4.toArray(children);
   const colspecs = childArr.filter((child) => child.type === TableColSpec);
   const content = colspecs && colspecs.length ? childArr.filter((child) => child.type !== TableColSpec) : children;
-  return /* @__PURE__ */ React41.createElement(Block8, {
+  return /* @__PURE__ */ React40.createElement(Block8, {
     as: "table",
@@ -892,3 +883,3 @@ extend: {
     }
-  }, colspecs && colspecs.length ? /* @__PURE__ */ React41.createElement("colgroup", null, colspecs) : null, content);
+  }, colspecs && colspecs.length ? /* @__PURE__ */ React40.createElement("colgroup", null, colspecs) : null, content);
 }
@@ -900,8 +891,8 @@ TableGroup.propTypes = {
 // src/support/atoms/TableRoot/index.js
-import {Block as Block9, useTheme as useTheme9} from "vcc-ui";
-import React42, {Children as Children5} from "react";
+import {Block as Block9, useTheme as useTheme8} from "vcc-ui";
+import React41, {Children as Children5} from "react";
 function TableRoot({children}) {
-  const theme = useTheme9();
+  const theme = useTheme8();
   const isGroup = !!Children5.toArray(children).find((child) => child.type === TableGroup);
-  return /* @__PURE__ */ React42.createElement(Block9, {
+  return /* @__PURE__ */ React41.createElement(Block9, {
     extend: {
@@ -912,3 +903,3 @@ width: "100%",
     }
-  }, isGroup ? children : /* @__PURE__ */ React42.createElement(TableGroup, null, children));
+  }, isGroup ? children : /* @__PURE__ */ React41.createElement(TableGroup, null, children));
 }
@@ -920,7 +911,7 @@ TableRoot.propTypes = {
 // src/support/atoms/UrlText/index.js
-import React43 from "react";
-import PropTypes34 from "prop-types";
+import React42 from "react";
+import PropTypes33 from "prop-types";
 import {Text as Text7} from "vcc-ui";
 function UrlText({extend, href, children}) {
-  return /* @__PURE__ */ React43.createElement(Text7, {
+  return /* @__PURE__ */ React42.createElement(Text7, {
     as: "a",
@@ -933,5 +924,5 @@ subStyle: "inline-link",
 UrlText.propTypes = {
-  href: PropTypes34.string,
-  extend: PropTypes34.object,
-  children: PropTypes34.node
+  href: PropTypes33.string,
+  extend: PropTypes33.object,
+  children: PropTypes33.node
 };
@@ -941,11 +932,11 @@
 import {Spacer as Spacer3, View as View6} from "vcc-ui";
-import PropTypes38 from "prop-types";
-import React46 from "react";
+import PropTypes37 from "prop-types";
+import React45 from "react";
 
 // src/support/molecules/Segment/index.js
 import {View as View5} from "vcc-ui";
-import React44 from "react";
-import PropTypes35 from "prop-types";
+import React43 from "react";
+import PropTypes34 from "prop-types";
 function Segment({children, ...props}) {
-  return /* @__PURE__ */ React44.createElement(View5, {
+  return /* @__PURE__ */ React43.createElement(View5, {
     as: "section",
@@ -957,4 +948,4 @@ spacing: 4,
 Segment.propTypes = {
-  title: PropTypes35.node,
-  children: PropTypes35.node
+  title: PropTypes34.node,
+  children: PropTypes34.node
 };
@@ -964,3 +955,3 @@
 import {Children as Children6} from "react";
-import PropTypes36 from "prop-types";
+import PropTypes35 from "prop-types";
 function Slot({children}) {
@@ -970,3 +961,3 @@ return Children6.only(children);
 Slot.propTypes = {
-  children: PropTypes36.node
+  children: PropTypes35.node
 };
@@ -978,10 +969,10 @@
 // src/support/molecules/LegalDate/index.js
-import React45 from "react";
-import PropTypes37 from "prop-types";
+import React44 from "react";
+import PropTypes36 from "prop-types";
 import {Block as Block10} from "vcc-ui";
 LegalDate.propTypes = {
-  children: PropTypes37.node
+  children: PropTypes36.node
 };
 function LegalDate({children}) {
-  return /* @__PURE__ */ React45.createElement(Block10, null, children);
+  return /* @__PURE__ */ React44.createElement(Block10, null, children);
 }
@@ -1004,3 +995,3 @@
 }) {
-  return /* @__PURE__ */ React46.createElement(View6, {
+  return /* @__PURE__ */ React45.createElement(View6, {
     spacing,
@@ -1018,3 +1009,3 @@ marginTop,
     ...props
-  }, children, /* @__PURE__ */ React46.createElement(Spacer3, {
+  }, children, /* @__PURE__ */ React45.createElement(Spacer3, {
     size: 2
@@ -1034,12 +1025,12 @@ }));
   children: allowedChildren([Segment, Title, Lead, Slot, LegalDate]),
-  extend: PropTypes38.object
+  extend: PropTypes37.object
 };
 
 // src/support/molecules/Disclaimer/index.js
-import React48 from "react";
+import React47 from "react";
 
 // src/support/molecules/Tooltip/index.js
 import {Block as Block11, Card, CardContent, Click, Flex as Flex2} from "vcc-ui";
-import React47, {useCallback, useReducer} from "react";
-import PropTypes39 from "prop-types";
+import React46, {useCallback, useReducer} from "react";
+import PropTypes38 from "prop-types";
 function reducer(state, action) {
@@ -1059,6 +1050,6 @@ switch (action.type) {
   const click = useCallback(() => dispatch({type: "toggle"}), []);
-  return /* @__PURE__ */ React47.createElement(Click, {
+  return /* @__PURE__ */ React46.createElement(Click, {
     onClick: click,
     extend: {position: "relative", display: "inline"}
-  }, children, isVisible && /* @__PURE__ */ React47.createElement(Flex2, {
+  }, children, isVisible && /* @__PURE__ */ React46.createElement(Flex2, {
     extend: {
@@ -1077,57 +1068,69 @@ position: "fixed",
     }
-  }, /* @__PURE__ */ React47.createElement(Block11, {
+  }, /* @__PURE__ */ React46.createElement(Block11, {
     extend: {maxWidth: "500px", margin: "auto"}
-  }, /* @__PURE__ */ React47.createElement(Card, null, /* @__PURE__ */ React47.createElement(CardContent, null, content)))));
+  }, /* @__PURE__ */ React46.createElement(Card, null, /* @__PURE__ */ React46.createElement(CardContent, null, content)))));
 }
 Tooltip.propTypes = {
-  content: PropTypes39.node.isRequired,
-  children: PropTypes39.node.isRequired
+  content: PropTypes38.node.isRequired,
+  children: PropTypes38.node.isRequired
 };
 
 // src/support/molecules/Disclaimer/index.js
-import PropTypes40 from "prop-types";
-import {Block as Block12, View as View7} from "vcc-ui";
+import PropTypes39 from "prop-types";
+import {Block as Block12, Icon as Icon2, View as View7} from "vcc-ui";
 function Disclaimer({children}) {
-  return /* @__PURE__ */ React48.createElement(Tooltip, {
-    content: /* @__PURE__ */ React48.createElement(View7, {
+  return /* @__PURE__ */ React47.createElement(Tooltip, {
+    content: /* @__PURE__ */ React47.createElement(View7, {
       extend: {flexDirection: "row", alignItems: "center"},
       spacing: 2
-    }, /* @__PURE__ */ React48.createElement(Block12, null, /* @__PURE__ */ React48.createElement(InfoIcon, {
-      size: 2
-    })), /* @__PURE__ */ React48.createElement(Block12, null, children))
-  }, /* @__PURE__ */ React48.createElement(SupText, null, "*"));
+    }, /* @__PURE__ */ React47.createElement(Block12, null, /* @__PURE__ */ React47.createElement(Icon2, {
+      type: "car-features-40"
+    })), /* @__PURE__ */ React47.createElement(Block12, null, children))
+  }, /* @__PURE__ */ React47.createElement(SupText, null, "*"));
 }
-Disclaimer.propTypes = {children: PropTypes40.node};
+Disclaimer.propTypes = {children: PropTypes39.node};
 
 // src/support/molecules/Footnote/index.js
-import React49 from "react";
-import PropTypes41 from "prop-types";
-import {Block as Block13, View as View8} from "vcc-ui";
+import React48 from "react";
+import PropTypes40 from "prop-types";
+import {Block as Block13, Icon as Icon3, Inline as Inline5, Text as Text8, View as View8} from "vcc-ui";
 function Footnote({children}) {
-  return /* @__PURE__ */ React49.createElement(Tooltip, {
-    content: /* @__PURE__ */ React49.createElement(View8, {
+  return /* @__PURE__ */ React48.createElement(Tooltip, {
+    content: /* @__PURE__ */ React48.createElement(View8, {
       extend: {flexDirection: "row", alignItems: "center"},
       spacing: 2
-    }, /* @__PURE__ */ React49.createElement(Block13, null, /* @__PURE__ */ React49.createElement(InfoIcon, {
-      size: 2
-    })), /* @__PURE__ */ React49.createElement(Block13, null, children))
-  }, /* @__PURE__ */ React49.createElement(InfoIcon, null));
+    }, /* @__PURE__ */ React48.createElement(Block13, null, /* @__PURE__ */ React48.createElement(Icon3, {
+      type: "info-40"
+    })), /* @__PURE__ */ React48.createElement(Text8, null, children))
+  }, /* @__PURE__ */ React48.createElement(Inline5, {
+    extend: {
+      display: "inline-block",
+      transform: "scale(0.75)",
+      lineHeight: 0,
+      marginTop: -5,
+      marginBottom: -5,
+      marginLeft: -3,
+      marginRight: -3
+    }
+  }, /* @__PURE__ */ React48.createElement(Icon3, {
+    type: "info-24"
+  })));
 }
 Footnote.propTypes = {
-  children: PropTypes41.node
+  children: PropTypes40.node
 };
 
 // src/support/molecules/PImg/index.js
-import {Block as Block14, useTheme as useTheme10, View as View9} from "vcc-ui";
-import React50, {Children as Children7} from "react";
-import PropTypes42 from "prop-types";
+import {Block as Block14, useTheme as useTheme9, View as View9} from "vcc-ui";
+import React49, {Children as Children7} from "react";
+import PropTypes41 from "prop-types";
 function PImg({children}) {
-  const theme = useTheme10();
+  const theme = useTheme9();
   const childArr = Children7.toArray(children);
   const img = childArr.filter((child) => child.type === Img);
   const content = childArr.filter((child) => child.type !== Img);
-  return /* @__PURE__ */ React50.createElement(View9, {
+  return /* @__PURE__ */ React49.createElement(View9, {
     spacing: 3,
     direction: ["column", "row"]
-  }, /* @__PURE__ */ React50.createElement(Block14, {
+  }, /* @__PURE__ */ React49.createElement(Block14, {
     extend: {
@@ -1137,3 +1140,3 @@ "> img": {width: "100%", maxWidth: "5rem"},
     }
-  }, img), /* @__PURE__ */ React50.createElement(Block14, {
+  }, img), /* @__PURE__ */ React49.createElement(Block14, {
     size: 10
@@ -1143,4 +1146,4 @@ }, content));
 PImg.propTypes = {
-  extend: PropTypes42.object,
-  children: PropTypes42.node
+  extend: PropTypes41.object,
+  children: PropTypes41.node
 };
@@ -1150,6 +1153,6 @@
 import {View as View10} from "vcc-ui";
-import React51 from "react";
-import PropTypes43 from "prop-types";
+import React50 from "react";
+import PropTypes42 from "prop-types";
 function SubSegment({children, ...props}) {
-  return /* @__PURE__ */ React51.createElement(View10, {
+  return /* @__PURE__ */ React50.createElement(View10, {
     as: "section",
@@ -1161,4 +1164,4 @@ spacing: 3,
 SubSegment.propTypes = {
-  title: PropTypes43.node,
-  children: PropTypes43.node
+  title: PropTypes42.node,
+  children: PropTypes42.node
 };
@@ -1168,8 +1171,8 @@
 import {Block as Block15} from "vcc-ui";
-import React52 from "react";
-import PropTypes44 from "prop-types";
+import React51 from "react";
+import PropTypes43 from "prop-types";
 function Video({poster, src, ratio = "16:9"}) {
-  return /* @__PURE__ */ React52.createElement(MediaBlock, {
+  return /* @__PURE__ */ React51.createElement(MediaBlock, {
     ratio
-  }, /* @__PURE__ */ React52.createElement(Block15, {
+  }, /* @__PURE__ */ React51.createElement(Block15, {
     as: "video",
@@ -1183,12 +1186,12 @@ preload: "auto",
 Video.propTypes = {
-  poster: PropTypes44.string,
-  src: PropTypes44.string,
-  ratio: PropTypes44.string
+  poster: PropTypes43.string,
+  src: PropTypes43.string,
+  ratio: PropTypes43.string
 };
 
 // src/support/organisms/JSONArticle/index.js
-import React56 from "react";
+import React55 from "react";
 
 // src/render/createRenderer.js
-import React53 from "react";
+import React52 from "react";
 
@@ -1209,3 +1212,3 @@ // src/render/renderUtils.js
     if (Array.isArray(data)) {
-      return React53.createElement(React53.Fragment, null, renderChildren(render2, data));
+      return React52.createElement(React52.Fragment, null, renderChildren(render2, data));
     }
@@ -1217,3 +1220,3 @@ const componentConfig = getComponentConfig(componentMappings, data);
       const {value, children} = componentConfig;
-      return React53.createElement(componentConfig.type, {
+      return React52.createElement(componentConfig.type, {
         key: typeof index !== void 0 ? generateKey(data.type) : null,
@@ -1272,3 +1275,3 @@ ...componentConfig.props
 // src/render/config.js
-import React55 from "react";
+import React54 from "react";
 
@@ -1286,7 +1289,7 @@ // src/render/configUtils.js
 // src/support/atoms/Time/index.js
-import React54 from "react";
-import PropTypes45 from "prop-types";
-import {Inline as Inline5} from "vcc-ui";
+import React53 from "react";
+import PropTypes44 from "prop-types";
+import {Inline as Inline6} from "vcc-ui";
 function Time({value, datetime, extend}) {
-  return /* @__PURE__ */ React54.createElement(Inline5, {
+  return /* @__PURE__ */ React53.createElement(Inline6, {
     as: "time",
@@ -1298,9 +1301,9 @@ dateTime: datetime,
 Time.propTypes = {
-  extend: PropTypes45.object,
-  datetime: PropTypes45.string,
-  value: PropTypes45.string
+  extend: PropTypes44.object,
+  datetime: PropTypes44.string,
+  value: PropTypes44.string
 };
 
 // src/support/atoms/TextNode/index.js
-import PropTypes46 from "prop-types";
+import PropTypes45 from "prop-types";
 
@@ -1326,3 +1329,3 @@ // src/utils/interpolateTextVariables.js
 TextNode.propTypes = {
-  value: PropTypes46.string
+  value: PropTypes45.string
 };
@@ -1405,3 +1408,3 @@
   },
-  "important-ref": {type: React55.Fragment},
+  "important-ref": {type: React54.Fragment},
   important: {
@@ -1508,3 +1511,3 @@ type: InfoBox,
   },
-  "e.text": {type: React55.Fragment},
+  "e.text": {type: React54.Fragment},
   time({value, datetime}) {
@@ -1574,3 +1577,3 @@ return {type: Time, props: {value, datetime}};
   }
-  return /* @__PURE__ */ React56.createElement(StringsProvider, {
+  return /* @__PURE__ */ React55.createElement(StringsProvider, {
     value: strings
@@ -1590,3 +1593,2 @@ }, article);
   InfoBox,
-  InfoIcon,
   InlineText,
@@ -1593,0 +1595,0 @@ InteriorText,

package.json

 {
   "name": "@volvo-cars/ced-os-react-components",
-  "version": "0.3.0-alpha.20",
+  "version": "0.3.0-alpha.21",
   "description": "Set of components for developing UIs in the onboarding and support apps",
@@ -26,2 +26,3 @@ "keywords": [],
   "scripts": {
+    "prepare": "husky install",
     "build:ejs": "esbuild src/index.js --outfile=dist/ced-os-react-components.esm.js --format=esm --bundle --loader:.js=jsx --external:react --external:prop-types --external:vcc-ui --target=es2019",
@@ -31,3 +32,4 @@ "build:cjs": "esbuild src/index.js --outfile=dist/ced-os-react-components.cjs.js --format=cjs --bundle --loader:.js=jsx --external:react --external:prop-types --external:vcc-ui --target=es2019,node12",
     "lint": "eslint ./src",
-    "test": "jest",
+    "test": "jest \"./src/.*test.js\"",
+    "test:bundle": "jest \"test/.*test.js\"",
     "dev": "npm run storybook",
@@ -37,3 +39,3 @@ "storybook": "start-storybook -p 6006",
     "build-storybook:ci": "build-storybook -s public --quiet",
-    "preversion": "npm run lint && npm run build && npm run test",
+    "preversion": "npm run lint && npm run test && npm run build && npm run test:bundle",
     "postversion": "git push && git push --tags"
@@ -76,2 +78,3 @@ },
     "fela-monolithic": "^11.3.3",
+    "husky": "^7.0.4",
     "jest": "^26.4.2",
@@ -84,4 +87,4 @@ "jest-react-fela": "^11.3.1",
     "react-fela": "^11.5.0",
-    "vcc-ui": "^2.7.1"
+    "vcc-ui": "^2.11.2"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

98954

decreased by-1.8%

Dev dependency count

36

increased by2.86%

No dependency changes