@selfdecode/sd-component-library 4.0.78 → 4.0.80

package/lib/sd-component-library65.js

@@ -1,41 +1,41 @@
-import { j as o } from "./sd-component-library190.js";
+import { j as n } from "./sd-component-library190.js";
 import { useState as z } from "react";
-import D from "./sd-component-library214.js";
+import D from "./sd-component-library211.js";
 import u from "./sd-component-library189.js";
-import { escapeWrapper as F, unescapeWrapper as d } from "./sd-component-library215.js";
+import { escapeWrapper as F, unescapeWrapper as d } from "./sd-component-library212.js";
 import { GridContainerV2 as G } from "./sd-component-library39.js";
 import { BaseTextV2 as T } from "./sd-component-library132.js";
 import { HorizontalDivider as B } from "./sd-component-library49.js";
-const R = (e) => (t) => {
-  const n = t.target.value;
-  e == null || e(d(n));
+const R = (e) => (r) => {
+  const i = r.target.value;
+  e == null || e(d(i));
 }, Y = (e) => {
   const {
-    label: t,
-    value: n,
+    label: r,
+    value: i,
     onChange: x,
     errorMessage: a,
     width: h,
     fontSize: f = 18,
     fontWeight: g = 400,
     rows: y = 4,
-    lineHeight: i = 22,
+    lineHeight: l = 22,
     placeholder: _,
-    disabled: r,
+    disabled: o,
     underlineColor: w = "cl_lightGrey",
-    onFocus: l,
+    onFocus: s,
     gap: S = "10px",
     maxLength: p,
     labelSx: W,
     labelColor: j = "cl_darkGrey",
     minHeightRows: C = 1,
     inputWidth: H
-  } = e, [v, c] = z(!1), $ = () => {
-    c(!0), l == null || l();
-  }, m = (s) => {
-    p && !["Backspace", "Delete"].some((b) => s.key === b) && d(s.target.innerText).length >= p && s.preventDefault();
+  } = e, [v, c] = z(!1), $ = (t) => {
+    c(!0), s == null || s(t);
+  }, m = (t) => {
+    p && !["Backspace", "Delete"].some((b) => t.key === b) && d(t.target.innerText).length >= p && t.preventDefault();
   };
-  return /* @__PURE__ */ o.jsxs(
+  return /* @__PURE__ */ n.jsxs(
     G,
     {
       width: h,
@@ -49,7 +49,7 @@ const R = (e) => (t) => {
         }
       },
       children: [
-        t && /* @__PURE__ */ o.jsx(
+        r && /* @__PURE__ */ n.jsx(
           T,
           {
             color: a ? "cl_red" : j,
@@ -61,14 +61,14 @@ const R = (e) => (t) => {
               cursor: "default",
               ...W
             },
-            children: t
+            children: r
           }
         ),
-        /* @__PURE__ */ o.jsx(
+        /* @__PURE__ */ n.jsx(
           D,
           {
-            html: F(n),
-            disabled: r,
+            html: F(i),
+            disabled: o,
             onChange: R(x),
             onFocus: $,
             onBlur: () => c(!1),
@@ -78,22 +78,22 @@ const R = (e) => (t) => {
               fontFamily: "proxima-nova",
               fontSize: `${f}px`,
               fontWeight: g,
-              color: r ? u.colors.cl_grey : u.colors.cl_darkGrey,
+              color: o ? u.colors.cl_grey : u.colors.cl_darkGrey,
               border: "none",
               outline: "none",
-              lineHeight: `${i}px`,
-              minHeight: `${i * C}px`,
-              maxHeight: `${i * y}px`,
+              lineHeight: `${l}px`,
+              minHeight: `${l * C}px`,
+              maxHeight: `${l * y}px`,
               overflowY: "scroll",
-              cursor: r ? "default" : "text",
+              cursor: o ? "default" : "text",
               width: H
             }
           }
         ),
-        /* @__PURE__ */ o.jsx(
+        /* @__PURE__ */ n.jsx(
           B,
           {
-            color: r ? "cl_grey" : v ? "cl_blue" : a ? "cl_red" : w,
+            color: o ? "cl_grey" : v ? "cl_blue" : a ? "cl_red" : w,
             height: "2px"
           }
         )

package/lib/sd-component-library65.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library65.js","sources":["../src/components/inputs/multi-row-secondary-text-input/multi-row-secondary-text-input.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport ContentEditable, { ContentEditableEvent } from \"react-contenteditable\";\n\nimport theme from \"../../../core/theme\";\nimport { BaseTextV2, Grid, HorizontalDivider } from \"../../../index\";\nimport { MultiRowSecondaryTextInputProps as Props } from \"./interfaces\";\nimport { escapeWrapper, unescapeWrapper } from \"./utils\";\n\n/**\n * Problems:\n * - lodash escape/unescape functions don't take into account a regular space;\n * - content-editable wraps each new row by <div> element;\n * - if row is empty, it's represented by <br>.\n *\n * As a solution to mentioned problems, custom escape/unescape functions were used.\n */\n\nconst changeWrapper = (\n  callback?: (newValue: string) => void\n): ((event: ContentEditableEvent) => void) => {\n  return (event: ContentEditableEvent) => {\n    const newValue = event.target.value;\n    callback?.(unescapeWrapper(newValue));\n  };\n};\n\nexport const MultiRowSecondaryTextInput: React.FC<Props> = (props) => {\n  const {\n    label,\n    value,\n    onChange,\n    errorMessage,\n    width,\n    fontSize = 18,\n    fontWeight = 400,\n    rows = 4,\n    lineHeight = 22,\n    placeholder,\n    disabled,\n    underlineColor = \"cl_lightGrey\",\n    onFocus,\n    gap = \"10px\",\n    maxLength,\n    labelSx,\n    labelColor = \"cl_darkGrey\",\n    minHeightRows = 1,\n    inputWidth,\n  } = props;\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const onFocusWrapper = () => {\n    setIsFocused(true);\n    onFocus?.();\n  };\n\n  const checkCharactersLimit = (event: any) => {\n    if (\n      maxLength &&\n      ![\"Backspace\", \"Delete\"].some((key) => event.key === key) &&\n      unescapeWrapper((event.target as HTMLDivElement).innerText).length >=\n        maxLength\n    )\n      event.preventDefault();\n  };\n\n  return (\n    <Grid\n      width={width}\n      gap={gap}\n      data-testid=\"multi-row-secondary-text-input\"\n      sx={{\n        \"div[contenteditable]:empty::before\": {\n          cursor: \"text\",\n          content: `\"${placeholder}\"`,\n          color: \"cl_grey\",\n        },\n      }}\n    >\n      {label && (\n        <BaseTextV2\n          color={errorMessage ? \"cl_red\" : labelColor}\n          sx={{\n            fontSize: 12,\n            fontWeight: 600,\n            letterSpacing: \"1px\",\n            textTransform: \"uppercase\",\n            cursor: \"default\",\n            ...labelSx,\n          }}\n        >\n          {label}\n        </BaseTextV2>\n      )}\n\n      <ContentEditable\n        html={escapeWrapper(value)}\n        disabled={disabled}\n        onChange={changeWrapper(onChange)}\n        onFocus={onFocusWrapper}\n        onBlur={() => setIsFocused(false)}\n        onKeyDown={checkCharactersLimit}\n        onPaste={checkCharactersLimit}\n        style={{\n          fontFamily: \"proxima-nova\",\n          fontSize: `${fontSize}px`,\n          fontWeight,\n          color: disabled\n            ? theme.colors[\"cl_grey\"]\n            : theme.colors[\"cl_darkGrey\"],\n          border: \"none\",\n          outline: \"none\",\n          lineHeight: `${lineHeight}px`,\n          minHeight: `${lineHeight * minHeightRows}px`,\n          maxHeight: `${lineHeight * rows}px`,\n          overflowY: \"scroll\",\n          cursor: disabled ? \"default\" : \"text\",\n          width: inputWidth,\n        }}\n      />\n\n      <HorizontalDivider\n        color={\n          disabled\n            ? \"cl_grey\"\n            : isFocused\n            ? \"cl_blue\"\n            : errorMessage\n            ? \"cl_red\"\n            : underlineColor\n        }\n        height=\"2px\"\n      />\n    </Grid>\n  );\n};\n"],"names":["changeWrapper","callback","event","newValue","unescapeWrapper","MultiRowSecondaryTextInput","props","label","value","onChange","errorMessage","width","fontSize","fontWeight","rows","lineHeight","placeholder","disabled","underlineColor","onFocus","gap","maxLength","labelSx","labelColor","minHeightRows","inputWidth","isFocused","setIsFocused","useState","onFocusWrapper","checkCharactersLimit","key","jsxs","Grid","jsx","BaseTextV2","ContentEditable","escapeWrapper","theme","HorizontalDivider"],"mappings":";;;;;;;;AAiBA,MAAMA,IAAgB,CACpBC,MAEO,CAACC,MAAgC;AAChC,QAAAC,IAAWD,EAAM,OAAO;AACnB,EAAAD,KAAA,QAAAA,EAAAG,EAAgBD,CAAQ;AAAC,GAI3BE,IAA8C,CAACC,MAAU;AAC9D,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,SAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAnB,GAEE,CAACoB,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAiB,MAAM;AAC3B,IAAAF,EAAa,EAAI,GACPR,KAAA,QAAAA;AAAA,EAAA,GAGNW,IAAuB,CAAC5B,MAAe;AAC3C,IACEmB,KACA,CAAC,CAAC,aAAa,QAAQ,EAAE,KAAK,CAACU,MAAQ7B,EAAM,QAAQ6B,CAAG,KACxD3B,EAAiBF,EAAM,OAA0B,SAAS,EAAE,UAC1DmB,KAEFnB,EAAM,eAAe;AAAA,EAAA;AAIvB,SAAA8B,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,KAAAS;AAAA,MACA,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,sCAAsC;AAAA,UACpC,QAAQ;AAAA,UACR,SAAS,IAAIJ,CAAW;AAAA,UACxB,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QACCT,KAAA2B,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAOzB,IAAe,WAAWa;AAAA,YACjC,IAAI;AAAA,cACF,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,eAAe;AAAA,cACf,QAAQ;AAAA,cACR,GAAGD;AAAA,YACL;AAAA,YAEC,UAAAf;AAAA,UAAA;AAAA,QACH;AAAA,QAGF2B,gBAAAA,EAAA;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,MAAMC,EAAc7B,CAAK;AAAA,YACzB,UAAAS;AAAA,YACA,UAAUjB,EAAcS,CAAQ;AAAA,YAChC,SAASoB;AAAA,YACT,QAAQ,MAAMF,EAAa,EAAK;AAAA,YAChC,WAAWG;AAAA,YACX,SAASA;AAAA,YACT,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU,GAAGlB,CAAQ;AAAA,cACrB,YAAAC;AAAA,cACA,OAAOI,IACHqB,EAAM,OAAO,UACbA,EAAM,OAAO;AAAA,cACjB,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY,GAAGvB,CAAU;AAAA,cACzB,WAAW,GAAGA,IAAaS,CAAa;AAAA,cACxC,WAAW,GAAGT,IAAaD,CAAI;AAAA,cAC/B,WAAW;AAAA,cACX,QAAQG,IAAW,YAAY;AAAA,cAC/B,OAAOQ;AAAA,YACT;AAAA,UAAA;AAAA,QACF;AAAA,QAEAS,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OACEtB,IACI,YACAS,IACA,YACAhB,IACA,WACAQ;AAAA,YAEN,QAAO;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"sd-component-library65.js","sources":["../src/components/inputs/multi-row-secondary-text-input/multi-row-secondary-text-input.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport ContentEditable, { ContentEditableEvent } from \"react-contenteditable\";\n\nimport theme from \"../../../core/theme\";\nimport { BaseTextV2, Grid, HorizontalDivider } from \"../../../index\";\nimport { MultiRowSecondaryTextInputProps as Props } from \"./interfaces\";\nimport { escapeWrapper, unescapeWrapper } from \"./utils\";\n\n/**\n * Problems:\n * - lodash escape/unescape functions don't take into account a regular space;\n * - content-editable wraps each new row by <div> element;\n * - if row is empty, it's represented by <br>.\n *\n * As a solution to mentioned problems, custom escape/unescape functions were used.\n */\n\nconst changeWrapper = (\n  callback?: (newValue: string) => void\n): ((event: ContentEditableEvent) => void) => {\n  return (event: ContentEditableEvent) => {\n    const newValue = event.target.value;\n    callback?.(unescapeWrapper(newValue));\n  };\n};\n\nexport const MultiRowSecondaryTextInput: React.FC<Props> = (props) => {\n  const {\n    label,\n    value,\n    onChange,\n    errorMessage,\n    width,\n    fontSize = 18,\n    fontWeight = 400,\n    rows = 4,\n    lineHeight = 22,\n    placeholder,\n    disabled,\n    underlineColor = \"cl_lightGrey\",\n    onFocus,\n    gap = \"10px\",\n    maxLength,\n    labelSx,\n    labelColor = \"cl_darkGrey\",\n    minHeightRows = 1,\n    inputWidth,\n  } = props;\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const onFocusWrapper: Props[\"onFocus\"] = (event) => {\n    setIsFocused(true);\n    onFocus?.(event);\n  };\n\n  const checkCharactersLimit = (event: any) => {\n    if (\n      maxLength &&\n      ![\"Backspace\", \"Delete\"].some((key) => event.key === key) &&\n      unescapeWrapper((event.target as HTMLDivElement).innerText).length >=\n        maxLength\n    )\n      event.preventDefault();\n  };\n\n  return (\n    <Grid\n      width={width}\n      gap={gap}\n      data-testid=\"multi-row-secondary-text-input\"\n      sx={{\n        \"div[contenteditable]:empty::before\": {\n          cursor: \"text\",\n          content: `\"${placeholder}\"`,\n          color: \"cl_grey\",\n        },\n      }}\n    >\n      {label && (\n        <BaseTextV2\n          color={errorMessage ? \"cl_red\" : labelColor}\n          sx={{\n            fontSize: 12,\n            fontWeight: 600,\n            letterSpacing: \"1px\",\n            textTransform: \"uppercase\",\n            cursor: \"default\",\n            ...labelSx,\n          }}\n        >\n          {label}\n        </BaseTextV2>\n      )}\n\n      <ContentEditable\n        html={escapeWrapper(value)}\n        disabled={disabled}\n        onChange={changeWrapper(onChange)}\n        onFocus={onFocusWrapper}\n        onBlur={() => setIsFocused(false)}\n        onKeyDown={checkCharactersLimit}\n        onPaste={checkCharactersLimit}\n        style={{\n          fontFamily: \"proxima-nova\",\n          fontSize: `${fontSize}px`,\n          fontWeight,\n          color: disabled\n            ? theme.colors[\"cl_grey\"]\n            : theme.colors[\"cl_darkGrey\"],\n          border: \"none\",\n          outline: \"none\",\n          lineHeight: `${lineHeight}px`,\n          minHeight: `${lineHeight * minHeightRows}px`,\n          maxHeight: `${lineHeight * rows}px`,\n          overflowY: \"scroll\",\n          cursor: disabled ? \"default\" : \"text\",\n          width: inputWidth,\n        }}\n      />\n\n      <HorizontalDivider\n        color={\n          disabled\n            ? \"cl_grey\"\n            : isFocused\n            ? \"cl_blue\"\n            : errorMessage\n            ? \"cl_red\"\n            : underlineColor\n        }\n        height=\"2px\"\n      />\n    </Grid>\n  );\n};\n"],"names":["changeWrapper","callback","event","newValue","unescapeWrapper","MultiRowSecondaryTextInput","props","label","value","onChange","errorMessage","width","fontSize","fontWeight","rows","lineHeight","placeholder","disabled","underlineColor","onFocus","gap","maxLength","labelSx","labelColor","minHeightRows","inputWidth","isFocused","setIsFocused","useState","onFocusWrapper","checkCharactersLimit","key","jsxs","Grid","jsx","BaseTextV2","ContentEditable","escapeWrapper","theme","HorizontalDivider"],"mappings":";;;;;;;;AAiBA,MAAMA,IAAgB,CACpBC,MAEO,CAACC,MAAgC;AAChC,QAAAC,IAAWD,EAAM,OAAO;AACnB,EAAAD,KAAA,QAAAA,EAAAG,EAAgBD,CAAQ;AAAC,GAI3BE,IAA8C,CAACC,MAAU;AAC9D,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,SAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAnB,GAEE,CAACoB,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAmC,CAAC3B,MAAU;AAClD,IAAAyB,EAAa,EAAI,GACjBR,KAAA,QAAAA,EAAUjB;AAAA,EAAK,GAGX4B,IAAuB,CAAC5B,MAAe;AAC3C,IACEmB,KACA,CAAC,CAAC,aAAa,QAAQ,EAAE,KAAK,CAACU,MAAQ7B,EAAM,QAAQ6B,CAAG,KACxD3B,EAAiBF,EAAM,OAA0B,SAAS,EAAE,UAC1DmB,KAEFnB,EAAM,eAAe;AAAA,EAAA;AAIvB,SAAA8B,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,KAAAS;AAAA,MACA,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,sCAAsC;AAAA,UACpC,QAAQ;AAAA,UACR,SAAS,IAAIJ,CAAW;AAAA,UACxB,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QACCT,KAAA2B,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAOzB,IAAe,WAAWa;AAAA,YACjC,IAAI;AAAA,cACF,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,eAAe;AAAA,cACf,QAAQ;AAAA,cACR,GAAGD;AAAA,YACL;AAAA,YAEC,UAAAf;AAAA,UAAA;AAAA,QACH;AAAA,QAGF2B,gBAAAA,EAAA;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,MAAMC,EAAc7B,CAAK;AAAA,YACzB,UAAAS;AAAA,YACA,UAAUjB,EAAcS,CAAQ;AAAA,YAChC,SAASoB;AAAA,YACT,QAAQ,MAAMF,EAAa,EAAK;AAAA,YAChC,WAAWG;AAAA,YACX,SAASA;AAAA,YACT,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU,GAAGlB,CAAQ;AAAA,cACrB,YAAAC;AAAA,cACA,OAAOI,IACHqB,EAAM,OAAO,UACbA,EAAM,OAAO;AAAA,cACjB,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY,GAAGvB,CAAU;AAAA,cACzB,WAAW,GAAGA,IAAaS,CAAa;AAAA,cACxC,WAAW,GAAGT,IAAaD,CAAI;AAAA,cAC/B,WAAW;AAAA,cACX,QAAQG,IAAW,YAAY;AAAA,cAC/B,OAAOQ;AAAA,YACT;AAAA,UAAA;AAAA,QACF;AAAA,QAEAS,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OACEtB,IACI,YACAS,IACA,YACAhB,IACA,WACAQ;AAAA,YAEN,QAAO;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library67.js

@@ -1,10 +1,10 @@
 import { j as i } from "./sd-component-library190.js";
 import u from "react";
 import { Flex as R } from "rebass";
-import { CircleButton as a } from "./sd-component-library211.js";
-import { ReactComponent as _ } from "./sd-component-library212.js";
+import { CircleButton as a } from "./sd-component-library213.js";
+import { ReactComponent as _ } from "./sd-component-library214.js";
 import { NumberInput as I } from "./sd-component-library66.js";
-import { ReactComponent as M } from "./sd-component-library213.js";
+import { ReactComponent as M } from "./sd-component-library215.js";
 function m(d, t) {
   return (r, o) => {
     t == null || t(r, o), d(r);

package/lib/sd-component-library68.js

@@ -1,32 +1,28 @@
 import { j as x } from "./sd-component-library190.js";
-import { Box as m, Text as s } from "rebass";
-import { TextInput as d } from "./sd-component-library73.js";
-const j = (o) => {
+import { Box as n, Text as p } from "rebass";
+import { TextInput as a } from "./sd-component-library73.js";
+const f = (i) => {
   const {
-    onChange: i,
-    padding: n = ["14px 0px"],
+    padding: o = ["14px 0px"],
     errorMessage: t,
     errorMessageProps: r,
-    focusInput: e,
-    hideErrorText: p,
-    sx: a
-  } = o;
-  return /* @__PURE__ */ x.jsxs(m, { "data-testid": "primary-text-input", children: [
+    hideErrorText: e,
+    sx: m
+  } = i;
+  return /* @__PURE__ */ x.jsxs(n, { "data-testid": "primary-text-input", children: [
     /* @__PURE__ */ x.jsx(
-      d,
+      a,
       {
-        ...o,
-        onChange: i,
-        focusInput: e,
+        ...i,
         variant: t ? "primaryError" : "primary",
         sx: {
-          padding: n,
-          ...a
+          padding: o,
+          ...m
         }
       }
     ),
-    t && !p && /* @__PURE__ */ x.jsx(
-      s,
+    t && !e && /* @__PURE__ */ x.jsx(
+      p,
       {
         ...r,
         sx: {
@@ -42,6 +38,6 @@ const j = (o) => {
   ] });
 };
 export {
-  j as PrimaryTextInput
+  f as PrimaryTextInput
 };
 //# sourceMappingURL=sd-component-library68.js.map

package/lib/sd-component-library68.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library68.js","sources":["../src/components/inputs/primary-text-input/primary-text-input.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Text } from \"rebass\";\n\nimport { TextInput } from \"../text-input\";\nimport { PrimaryTextInputProps as Props } from \"./interfaces\";\n\nexport const PrimaryTextInput: React.FC<Props> = (props) => {\n  const {\n    onChange,\n    padding = [\"14px 0px\"],\n    errorMessage,\n    errorMessageProps,\n    focusInput,\n    hideErrorText,\n    sx,\n  } = props;\n\n  return (\n    <Box data-testid=\"primary-text-input\">\n      <TextInput\n        {...props}\n        onChange={onChange}\n        focusInput={focusInput}\n        variant={errorMessage ? \"primaryError\" : \"primary\"}\n        sx={{\n          padding,\n          ...sx,\n        }}\n      />\n      {errorMessage && !hideErrorText && (\n        <Text\n          {...errorMessageProps}\n          sx={{\n            fontSize: \"12px\",\n            mt: \"10px\",\n            color: \"cl_red\",\n            fontFamily: \"proxima-nova\",\n            ...errorMessageProps?.sx,\n          }}\n        >\n          {errorMessage}\n        </Text>\n      )}\n    </Box>\n  );\n};\n"],"names":["PrimaryTextInput","props","onChange","padding","errorMessage","errorMessageProps","focusInput","hideErrorText","sx","jsxs","Box","jsx","TextInput","Text"],"mappings":";;;AAOa,MAAAA,IAAoC,CAACC,MAAU;AACpD,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,SAAAC,IAAU,CAAC,UAAU;AAAA,IACrB,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,IAAAC;AAAA,EACE,IAAAP;AAGF,SAAAQ,gBAAAA,EAAA,KAACC,GAAI,EAAA,eAAY,sBACf,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACE,GAAGX;AAAA,QACJ,UAAAC;AAAA,QACA,YAAAI;AAAA,QACA,SAASF,IAAe,iBAAiB;AAAA,QACzC,IAAI;AAAA,UACF,SAAAD;AAAA,UACA,GAAGK;AAAA,QACL;AAAA,MAAA;AAAA,IACF;AAAA,IACCJ,KAAgB,CAACG,KAChBI,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,IAAI;AAAA,UACF,UAAU;AAAA,UACV,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,GAAGA,KAAA,gBAAAA,EAAmB;AAAA,QACxB;AAAA,QAEC,UAAAD;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sd-component-library68.js","sources":["../src/components/inputs/primary-text-input/primary-text-input.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box, Text } from \"rebass\";\n\nimport { TextInput } from \"../text-input\";\nimport { PrimaryTextInputProps as Props } from \"./interfaces\";\n\nexport const PrimaryTextInput: React.FC<Props> = (props) => {\n  const {\n    padding = [\"14px 0px\"],\n    errorMessage,\n    errorMessageProps,\n    hideErrorText,\n    sx,\n  } = props;\n\n  return (\n    <Box data-testid=\"primary-text-input\">\n      <TextInput\n        {...props}\n        variant={errorMessage ? \"primaryError\" : \"primary\"}\n        sx={{\n          padding,\n          ...sx,\n        }}\n      />\n      {errorMessage && !hideErrorText && (\n        <Text\n          {...errorMessageProps}\n          sx={{\n            fontSize: \"12px\",\n            mt: \"10px\",\n            color: \"cl_red\",\n            fontFamily: \"proxima-nova\",\n            ...errorMessageProps?.sx,\n          }}\n        >\n          {errorMessage}\n        </Text>\n      )}\n    </Box>\n  );\n};\n"],"names":["PrimaryTextInput","props","padding","errorMessage","errorMessageProps","hideErrorText","sx","jsxs","Box","jsx","TextInput","Text"],"mappings":";;;AAOa,MAAAA,IAAoC,CAACC,MAAU;AACpD,QAAA;AAAA,IACJ,SAAAC,IAAU,CAAC,UAAU;AAAA,IACrB,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,IAAAC;AAAA,EACE,IAAAL;AAGF,SAAAM,gBAAAA,EAAA,KAACC,GAAI,EAAA,eAAY,sBACf,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACE,GAAGT;AAAA,QACJ,SAASE,IAAe,iBAAiB;AAAA,QACzC,IAAI;AAAA,UACF,SAAAD;AAAA,UACA,GAAGI;AAAA,QACL;AAAA,MAAA;AAAA,IACF;AAAA,IACCH,KAAgB,CAACE,KAChBI,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACE,GAAGP;AAAA,QACJ,IAAI;AAAA,UACF,UAAU;AAAA,UACV,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,GAAGA,KAAA,gBAAAA,EAAmB;AAAA,QACxB;AAAA,QAEC,UAAAD;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library69.js

@@ -2,8 +2,8 @@ import { j as t } from "./sd-component-library190.js";
 import { useState as d } from "react";
 import { OutsideClickBox as g } from "./sd-component-library11.js";
 import { SecondaryTextInput as j } from "./sd-component-library72.js";
-import { ReactComponent as v } from "./sd-component-library217.js";
-import { SearchAutocompleteResultsBox as C } from "./sd-component-library219.js";
+import { ReactComponent as v } from "./sd-component-library216.js";
+import { SearchAutocompleteResultsBox as C } from "./sd-component-library217.js";
 const F = (s) => {
   const {
     searchValue: r,

package/lib/sd-component-library70.js

@@ -1,11 +1,11 @@
 import { j as s } from "./sd-component-library190.js";
 import { useState as V } from "react";
 import { useDependantState as q } from "./sd-component-library3.js";
-import { SearchBox as z } from "./sd-component-library216.js";
+import { SearchBox as z } from "./sd-component-library218.js";
 import { OutsideClickBox as G } from "./sd-component-library11.js";
 import { PrimaryTextInput as H } from "./sd-component-library68.js";
-import { ReactComponent as J } from "./sd-component-library217.js";
-import { ReactComponent as M } from "./sd-component-library218.js";
+import { ReactComponent as J } from "./sd-component-library216.js";
+import { ReactComponent as M } from "./sd-component-library219.js";
 function f(i, o, e, t) {
   t == null || t(i, o), e(i);
 }

package/lib/sd-component-library73.js

@@ -1,18 +1,19 @@
-import { j as r } from "./sd-component-library190.js";
-import { Input as x } from "./sd-component-library64.js";
-const p = (t) => {
-  const { variant: n, type: e = "text" } = t;
-  return /* @__PURE__ */ r.jsx(
-    x,
-    {
-      ...t,
-      variant: `textInput.${n}`,
-      type: e,
-      "data-test": "text-input"
-    }
-  );
-};
+import { j as e } from "./sd-component-library190.js";
+import { Input as n } from "./sd-component-library64.js";
+const s = ({
+  variant: t,
+  type: p = "text",
+  ...x
+}) => /* @__PURE__ */ e.jsx(
+  n,
+  {
+    ...x,
+    variant: `textInput.${t}`,
+    type: p,
+    "data-test": "text-input"
+  }
+);
 export {
-  p as TextInput
+  s as TextInput
 };
 //# sourceMappingURL=sd-component-library73.js.map

package/lib/sd-component-library73.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library73.js","sources":["../src/components/inputs/text-input/text-input.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Input } from \"../input\";\nimport { TextInputProps as Props } from \"./interfaces\";\n\n/**\n * Base Text input component. Other text inputs should inherit from this.\n */\nexport const TextInput: React.FC<Props> = (props) => {\n  const { variant, type = \"text\" } = props;\n\n  return (\n    <Input\n      {...props}\n      variant={`textInput.${variant}`}\n      type={type}\n      data-test=\"text-input\"\n    />\n  );\n};\n"],"names":["TextInput","props","variant","type","jsx","Input"],"mappings":";;AAQa,MAAAA,IAA6B,CAACC,MAAU;AACnD,QAAM,EAAE,SAAAC,GAAS,MAAAC,IAAO,OAAA,IAAWF;AAGjC,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,SAAS,aAAaC,CAAO;AAAA,MAC7B,MAAAC;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"sd-component-library73.js","sources":["../src/components/inputs/text-input/text-input.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Input } from \"../input\";\nimport { TextInputProps as Props } from \"./interfaces\";\n\n/**\n * Base Text input component. Other text inputs should inherit from this.\n */\nexport const TextInput: React.FC<Props> = ({\n  variant,\n  type = \"text\",\n  ...restOfProps\n}) => (\n  <Input\n    {...restOfProps}\n    variant={`textInput.${variant}`}\n    type={type}\n    data-test=\"text-input\"\n  />\n);\n"],"names":["TextInput","variant","type","restOfProps","jsx","Input"],"mappings":";;AAQO,MAAMA,IAA6B,CAAC;AAAA,EACzC,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MACEC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,SAAS,aAAaF,CAAO;AAAA,IAC7B,MAAAC;AAAA,IACA,aAAU;AAAA,EAAA;AACZ;"}

package/lib/sd-component-library74.js

@@ -1,7 +1,7 @@
 import { j as r } from "./sd-component-library190.js";
 import { Box as p } from "rebass";
 import { PrimaryTextInput as x } from "./sd-component-library68.js";
-import { ReactComponent as m } from "./sd-component-library217.js";
+import { ReactComponent as m } from "./sd-component-library216.js";
 const j = ({
   placeholder: s = "Enter your Search",
   searchStyle: a,

package/lib/sd-component-library80.js

@@ -5,7 +5,7 @@ import { useHover as R } from "./sd-component-library3.js";
 import { getResponsiveClick as H } from "./sd-component-library4.js";
 import { OutsideClickBox as W } from "./sd-component-library11.js";
 import { ReactComponent as $ } from "./sd-component-library181.js";
-import { ActionBox as A } from "./sd-component-library250.js";
+import { ActionBox as A } from "./sd-component-library222.js";
 import { FlexCenter as M } from "./sd-component-library35.js";
 import { HorizontalDivider as a } from "./sd-component-library49.js";
 const G = (d) => {

package/lib/sd-component-library81.js

@@ -1,13 +1,13 @@
 import { j as e } from "./sd-component-library190.js";
 import { Box as R } from "rebass";
 import { useElementCoordinates as O } from "./sd-component-library3.js";
-import { defaultPointerWidth as _, defaultTextBottomMargin as z } from "./sd-component-library222.js";
-import { labelWidth as X, defaultDistanceFromLabelToRanges as W, labelPaddingX as Y, defaultWidth as A, defaultHeight as D, defaultArc as E, defaultPointStrokeWidth as G, defaultInnerPointRadius as H, defaultGaugeWidth as V, defaultMaskBorderRadius as q } from "./sd-component-library223.js";
+import { defaultPointerWidth as _, defaultTextBottomMargin as z } from "./sd-component-library223.js";
+import { labelWidth as X, defaultDistanceFromLabelToRanges as W, labelPaddingX as Y, defaultWidth as A, defaultHeight as D, defaultArc as E, defaultPointStrokeWidth as G, defaultInnerPointRadius as H, defaultGaugeWidth as V, defaultMaskBorderRadius as q } from "./sd-component-library224.js";
 import { isValueInRange as N } from "./sd-component-library86.js";
-import { COLOR_TO_ICON_MAP as J, defaultSmileyWidth as K, defaultDistanceBetweenRanges as Q } from "./sd-component-library224.js";
-import { isCorrectSmileyMeterConfig as U, getIsHorizontal as Z } from "./sd-component-library225.js";
-import { SmileyMeterRanges as ee } from "./sd-component-library226.js";
-import { MatchedRangeLabelBox as te } from "./sd-component-library227.js";
+import { COLOR_TO_ICON_MAP as J, defaultSmileyWidth as K, defaultDistanceBetweenRanges as Q } from "./sd-component-library225.js";
+import { isCorrectSmileyMeterConfig as U, getIsHorizontal as Z } from "./sd-component-library226.js";
+import { SmileyMeterRanges as ee } from "./sd-component-library227.js";
+import { MatchedRangeLabelBox as te } from "./sd-component-library228.js";
 import { FlexCenter as ie } from "./sd-component-library35.js";
 const he = ($) => {
   const {

package/lib/sd-component-library82.js

@@ -1,6 +1,6 @@
 import { j as s } from "./sd-component-library190.js";
-import { smallMeterMaskBorderRadius as n } from "./sd-component-library223.js";
-import { smallSmileyMeterWidth as d, smallSmileyMeterHeight as h, smallSmileyGaugeWidth as S, smallSmileyWidth as u, smallSmileyInnerPointRadius as y, smallSmileyInnerPointStrokeWidth as g } from "./sd-component-library224.js";
+import { smallMeterMaskBorderRadius as n } from "./sd-component-library224.js";
+import { smallSmileyMeterWidth as d, smallSmileyMeterHeight as h, smallSmileyGaugeWidth as S, smallSmileyWidth as u, smallSmileyInnerPointRadius as y, smallSmileyInnerPointStrokeWidth as g } from "./sd-component-library225.js";
 import { SmileyMeterV2 as W } from "./sd-component-library81.js";
 const k = (e) => {
   const {

package/lib/sd-component-library83.js

@@ -1,6 +1,6 @@
 import { j as l } from "./sd-component-library190.js";
 import { Box as f } from "rebass";
-import { ReactComponent as d } from "./sd-component-library228.js";
+import { ReactComponent as d } from "./sd-component-library229.js";
 import { BaseGridContainer as h } from "./sd-component-library36.js";
 const F = [
   "#5CA13A",

package/lib/sd-component-library84.js

@@ -1,11 +1,11 @@
 import { j as r } from "./sd-component-library190.js";
 import { Box as P } from "rebass";
-import { labelWidth as H, defaultDistanceFromLabelToRanges as p, labelPaddingX as I, defaultArc as X, defaultWidth as A, defaultHeight as E, defaultDistanceBetweenRanges as G, defaultGaugeWidth as Y, defaultPointStrokeWidth as _, defaultInnerPointRadius as q, defaultDistanceFromRangesToNeedle as y, defaultInnerCircleStrokeWidth as z, defaultInnerCircleRadius as J, defaultNeedleWidth as K, defaultNumberOfDashes as Q, defaultDashHeight as U, defaultDashWidth as V, defaultDistanceFromRangesToScale as Z, defaultMaskBorderRadius as ee } from "./sd-component-library223.js";
+import { labelWidth as H, defaultDistanceFromLabelToRanges as p, labelPaddingX as I, defaultArc as X, defaultWidth as A, defaultHeight as E, defaultDistanceBetweenRanges as G, defaultGaugeWidth as Y, defaultPointStrokeWidth as _, defaultInnerPointRadius as q, defaultDistanceFromRangesToNeedle as y, defaultInnerCircleStrokeWidth as z, defaultInnerCircleRadius as J, defaultNeedleWidth as K, defaultNumberOfDashes as Q, defaultDashHeight as U, defaultDashWidth as V, defaultDistanceFromRangesToScale as Z, defaultMaskBorderRadius as ee } from "./sd-component-library224.js";
 import { isCorrectOutlineMeterConfig as te } from "./sd-component-library86.js";
-import { OutlineMeterRange as ae } from "./sd-component-library229.js";
-import { OutlineMeterScale as re } from "./sd-component-library230.js";
-import { OutlineMeterNeedle as ie } from "./sd-component-library231.js";
-import { OutlineMeterLabelBox as se } from "./sd-component-library232.js";
+import { OutlineMeterRange as ae } from "./sd-component-library230.js";
+import { OutlineMeterScale as re } from "./sd-component-library231.js";
+import { OutlineMeterNeedle as ie } from "./sd-component-library232.js";
+import { OutlineMeterLabelBox as se } from "./sd-component-library233.js";
 const ce = (R) => {
   const {
     marginTop: x = "50px",

package/lib/sd-component-library85.js

@@ -1,5 +1,5 @@
 import { j as u } from "./sd-component-library190.js";
-import { smallMeterWidth as g, smallMeterHeight as c, smallMeterPointStrokeWidth as R, smallMeterPointRadius as W, smallMeterInnerCircleStrokeWidth as k, smallMeterInnerCircleRadius as S, smallMeterGaugeWidth as p, smallMeterDistanceBetweenRanges as f, smallMeterDistanceFromRangesToNeedle as w, smallMeterNeedleWidth as x, smallMeterMaskBorderRadius as B } from "./sd-component-library223.js";
+import { smallMeterWidth as g, smallMeterHeight as c, smallMeterPointStrokeWidth as R, smallMeterPointRadius as W, smallMeterInnerCircleStrokeWidth as k, smallMeterInnerCircleRadius as S, smallMeterGaugeWidth as p, smallMeterDistanceBetweenRanges as f, smallMeterDistanceFromRangesToNeedle as w, smallMeterNeedleWidth as x, smallMeterMaskBorderRadius as B } from "./sd-component-library224.js";
 import { OutlineMeter as C } from "./sd-component-library84.js";
 const T = (e) => {
   const {

package/lib/sd-component-library87.js

@@ -1,11 +1,11 @@
 import { j as o } from "./sd-component-library190.js";
 import { Box as H } from "rebass";
-import { labelWidth as y, defaultDistanceFromLabelToRanges as R, labelPaddingX as E, defaultArc as G, defaultWidth as P, defaultHeight as X, defaultDistanceBetweenRanges as Y, defaultGaugeWidth as _, defaultDistanceFromRangesToNeedle as A, defaultInnerCircleStrokeWidth as V, defaultInnerCircleRadius as q, defaultNeedleWidth as J, defaultNumberOfDashes as K, defaultDashHeight as Q, defaultDashWidth as U, defaultDistanceFromRangesToScale as Z, defaultMaskBorderRadius as ee } from "./sd-component-library223.js";
-import { defaultPointerWidth as te } from "./sd-component-library222.js";
-import { DiscreteRange as ae } from "./sd-component-library233.js";
-import { OutlineMeterScale as oe } from "./sd-component-library230.js";
-import { DiscreteMeterNeedle as le } from "./sd-component-library234.js";
-import { MatchedRangeLabelBox as re } from "./sd-component-library235.js";
+import { labelWidth as y, defaultDistanceFromLabelToRanges as R, labelPaddingX as E, defaultArc as G, defaultWidth as P, defaultHeight as X, defaultDistanceBetweenRanges as Y, defaultGaugeWidth as _, defaultDistanceFromRangesToNeedle as A, defaultInnerCircleStrokeWidth as V, defaultInnerCircleRadius as q, defaultNeedleWidth as J, defaultNumberOfDashes as K, defaultDashHeight as Q, defaultDashWidth as U, defaultDistanceFromRangesToScale as Z, defaultMaskBorderRadius as ee } from "./sd-component-library224.js";
+import { defaultPointerWidth as te } from "./sd-component-library223.js";
+import { DiscreteRange as ae } from "./sd-component-library234.js";
+import { OutlineMeterScale as oe } from "./sd-component-library231.js";
+import { DiscreteMeterNeedle as le } from "./sd-component-library235.js";
+import { MatchedRangeLabelBox as re } from "./sd-component-library236.js";
 function me(x) {
   const {
     marginTop: b = "50px",

package/lib/sd-component-library88.js

@@ -1,5 +1,5 @@
 import { j as o } from "./sd-component-library190.js";
-import { smallMeterWidth as u, smallMeterHeight as M, smallMeterInnerCircleStrokeWidth as c, smallMeterInnerCircleRadius as h, smallMeterGaugeWidth as g, smallMeterDistanceBetweenRanges as R, smallMeterDistanceFromRangesToNeedle as W, smallMeterNeedleWidth as p, smallMeterMaskBorderRadius as f } from "./sd-component-library223.js";
+import { smallMeterWidth as u, smallMeterHeight as M, smallMeterInnerCircleStrokeWidth as c, smallMeterInnerCircleRadius as h, smallMeterGaugeWidth as g, smallMeterDistanceBetweenRanges as R, smallMeterDistanceFromRangesToNeedle as W, smallMeterNeedleWidth as p, smallMeterMaskBorderRadius as f } from "./sd-component-library224.js";
 import { MultiOptionDiscreteOutlineMeter as k } from "./sd-component-library87.js";
 function C(e) {
   const {

package/lib/sd-component-library89.js

@@ -1,12 +1,12 @@
 import { j as r } from "./sd-component-library190.js";
 import { Box as A } from "rebass";
-import { defaultWidth as H, defaultHeight as V, labelWidth as X, defaultDistanceFromLabelToRanges as p, labelPaddingX as Y, defaultGaugeWidth as _, defaultInnerPointRadius as z, defaultPointStrokeWidth as E, defaultArc as q, defaultDistanceFromRangesToScale as J, defaultDashHeight as K, defaultDashWidth as Q, defaultNumberOfDashes as U, defaultNeedleWidth as Z, defaultInnerCircleRadius as ee, defaultInnerCircleStrokeWidth as te, defaultDistanceFromRangesToNeedle as re, defaultMaskBorderRadius as ae } from "./sd-component-library223.js";
-import { mapAdjacent as oe, isLabelActive as x, flipPosition as R } from "./sd-component-library236.js";
-import { GradientMeterRange as ie } from "./sd-component-library237.js";
-import { OutlineMeterScale as ne } from "./sd-component-library230.js";
-import { GradientMeterNeedle as se } from "./sd-component-library238.js";
-import { OutlineMeterLabelPointer as de } from "./sd-component-library239.js";
-import { BaseMeterLabelBox as le } from "./sd-component-library240.js";
+import { defaultWidth as H, defaultHeight as V, labelWidth as X, defaultDistanceFromLabelToRanges as p, labelPaddingX as Y, defaultGaugeWidth as _, defaultInnerPointRadius as z, defaultPointStrokeWidth as E, defaultArc as q, defaultDistanceFromRangesToScale as J, defaultDashHeight as K, defaultDashWidth as Q, defaultNumberOfDashes as U, defaultNeedleWidth as Z, defaultInnerCircleRadius as ee, defaultInnerCircleStrokeWidth as te, defaultDistanceFromRangesToNeedle as re, defaultMaskBorderRadius as ae } from "./sd-component-library224.js";
+import { mapAdjacent as oe, isLabelActive as x, flipPosition as R } from "./sd-component-library239.js";
+import { GradientMeterRange as ie } from "./sd-component-library240.js";
+import { OutlineMeterScale as ne } from "./sd-component-library231.js";
+import { GradientMeterNeedle as se } from "./sd-component-library241.js";
+import { OutlineMeterLabelPointer as de } from "./sd-component-library242.js";
+import { BaseMeterLabelBox as le } from "./sd-component-library243.js";
 const be = (b) => {
   const {
     width: o = H,

package/lib/sd-component-library90.js

@@ -1,5 +1,5 @@
 import { j as m } from "./sd-component-library190.js";
-import { smallMeterWidth as h, smallMeterHeight as u, smallMeterGaugeWidth as M, smallMeterDistanceFromRangesToNeedle as c, smallMeterInnerCircleStrokeWidth as g, smallMeterInnerCircleRadius as W, smallMeterPointStrokeWidth as R, smallMeterPointRadius as S, smallMeterNeedleWidth as p } from "./sd-component-library223.js";
+import { smallMeterWidth as h, smallMeterHeight as u, smallMeterGaugeWidth as M, smallMeterDistanceFromRangesToNeedle as c, smallMeterInnerCircleStrokeWidth as g, smallMeterInnerCircleRadius as W, smallMeterPointStrokeWidth as R, smallMeterPointRadius as S, smallMeterNeedleWidth as p } from "./sd-component-library224.js";
 import { GradientOutlineMeter as f } from "./sd-component-library89.js";
 const j = (e) => {
   const {

package/lib/sd-component-library93.js

@@ -1,8 +1,8 @@
 import { j as o } from "./sd-component-library190.js";
 import { Box as j } from "rebass";
 import { isPDFFlow as g } from "./sd-component-library4.js";
-import { areSegmentsValid as v } from "./sd-component-library241.js";
-import { Segment as w } from "./sd-component-library242.js";
+import { areSegmentsValid as v } from "./sd-component-library244.js";
+import { Segment as w } from "./sd-component-library245.js";
 const E = ({
   segments: x,
   outlineWidth: e = 2,

package/lib/sd-component-library94.js

@@ -1,7 +1,7 @@
 import { j as n } from "./sd-component-library190.js";
-import { areSegmentsValid as h } from "./sd-component-library241.js";
-import { CompactDonutGaugeSegment as x } from "./sd-component-library243.js";
-import { CompactDonutGaugeValueIndicator as f } from "./sd-component-library244.js";
+import { areSegmentsValid as h } from "./sd-component-library244.js";
+import { CompactDonutGaugeSegment as x } from "./sd-component-library246.js";
+import { CompactDonutGaugeValueIndicator as f } from "./sd-component-library247.js";
 const C = ({
   segments: e,
   size: r = 70,

package/lib/sd-component-library95.js

@@ -1,6 +1,6 @@
 import { j as r } from "./sd-component-library190.js";
-import { LinearGaugeSegment as c } from "./sd-component-library245.js";
-import { LinearGaugeLabel as d } from "./sd-component-library246.js";
+import { LinearGaugeSegment as c } from "./sd-component-library248.js";
+import { LinearGaugeLabel as d } from "./sd-component-library249.js";
 import { GridCenter as f } from "./sd-component-library42.js";
 import { GridContainerV2 as h } from "./sd-component-library39.js";
 function $(l) {

package/lib/sd-component-library96.js

@@ -1,9 +1,9 @@
 import { j as e } from "./sd-component-library190.js";
-import { isMatchingRange as u } from "./sd-component-library247.js";
+import { isMatchingRange as u } from "./sd-component-library250.js";
 import { GridCenter as c } from "./sd-component-library42.js";
 import { GridContainerV2 as f } from "./sd-component-library39.js";
-import { LinearGaugeSegment as d } from "./sd-component-library245.js";
-import { LinearGaugeLabel as j } from "./sd-component-library246.js";
+import { LinearGaugeSegment as d } from "./sd-component-library248.js";
+import { LinearGaugeLabel as j } from "./sd-component-library249.js";
 const M = ({
   gap: i = 3,
   segmentHeight: l = 8,

package/lib/sd-component-library97.js

@@ -3,9 +3,9 @@ import { useRef as B, useState as I, useEffect as R } from "react";
 import { Box as s } from "rebass";
 import { useBodyScrollLock as E } from "./sd-component-library3.js";
 import { isIOS as F, isPDFFlow as T } from "./sd-component-library4.js";
-import X from "./sd-component-library248.js";
+import X from "./sd-component-library251.js";
 import { OutsideClickBox as P } from "./sd-component-library11.js";
-import { ReactComponent as z } from "./sd-component-library249.js";
+import { ReactComponent as z } from "./sd-component-library252.js";
 import { FlexCenter as A } from "./sd-component-library35.js";
 import { Button as D } from "./sd-component-library25.js";
 const r = 500, J = (d) => {

package/lib/sd-component-library99.js

@@ -1,9 +1,9 @@
 import { j as r } from "./sd-component-library190.js";
 import { useDependantState as j } from "./sd-component-library3.js";
-import { SquareButton as g } from "./sd-component-library251.js";
-import { ReactComponent as P } from "./sd-component-library252.js";
-import { CurrentPage as h } from "./sd-component-library253.js";
-import { ReactComponent as S } from "./sd-component-library254.js";
+import { SquareButton as g } from "./sd-component-library253.js";
+import { ReactComponent as P } from "./sd-component-library254.js";
+import { CurrentPage as h } from "./sd-component-library255.js";
+import { ReactComponent as S } from "./sd-component-library256.js";
 import { GridCenter as R } from "./sd-component-library42.js";
 function x(m, t, o, n) {
   t == null || t(o, n), m(o);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selfdecode/sd-component-library",
-  "version": "4.0.78",
+  "version": "4.0.80",
   "private": false,
   "license": "MIT",
   "files": [
@@ -42,10 +42,15 @@
     "prebuild": "npm run clean",
     "postbuild": "npm run copy",
     "build": "tsc & vite build",
-    "prepublishOnly": "npm run ci:test & npm run build"
+    "prepublishOnly": "npm run ci:test & npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "plugin:storybook/recommended"
+    ]
   },
   "browserslist": {
     "production": [
@@ -60,6 +65,13 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-vite": "^7.4.0",
+    "@storybook/testing-library": "^0.2.0",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -81,6 +93,7 @@
     "copyfiles": "^2.3.0",
     "eslint": "^8.3.0",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-storybook": "^0.6.13",
     "file-loader": "^6.2.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",
@@ -93,6 +106,7 @@
     "react-docgen-typescript": "^1.18.0",
     "sass": "^1.52.1",
     "shelljs": "^0.8.4",
+    "storybook": "^7.4.0",
     "tailwindcss": "^3.0.2",
     "typescript": "4.6.4",
     "vite": "^4.4.2",
@@ -101,14 +115,14 @@
     "vitest": "^0.33.0"
   },
   "peerDependencies": {
+    "@rebass/forms": "^4.0.6",
     "date-fns": "^2.30.0",
+    "emotion-theming": "^10.0.28",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
+    "react-date-range": "1.1.3",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.3.3",
-    "react-date-range": "1.1.3",
-    "emotion-theming": "^10.0.28",
-    "@rebass/forms": "^4.0.6",
     "rebass": "^4.0.7"
   },
   "description": "The SelfDecode Component Library (SCL) was built with intention of speeding up the development of all products under SD, by creating a single source for all shared components such as form components which are re-used across our different products.",