@selfdecode/sd-component-library 4.0.6 → 4.0.7-3.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library95.js","sources":["../src/components/meters/bars-meter/bars-meter.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { Grid } from \"../../containers\";\nimport { BarsMeterProps as Props } from \"./interfaces\";\n\n/**\n *  BarsMeter component.\n */\nexport const BarsMeter: React.FC<Props> = (props) => {\n  const {\n    value,\n    activeColor = \"cl_purple\",\n    maxValue = 5,\n    heightPx = 25,\n    gap = \"3px\",\n    inactiveColor = \"cl_grey\",\n    barWidth = \"5px\",\n    minHeight = 0,\n    ...gridProps\n  } = props;\n\n  const bars: React.ReactNode[] = [];\n\n  for (let i = 0; i < maxValue; i++) {\n    const color = i < value ? activeColor : inactiveColor;\n    const height = minHeight\n      ? ((heightPx - minHeight) / (maxValue - 1)) * i + minHeight\n      : (heightPx / maxValue) * (i + 1);\n\n    bars.push(\n      <Box\n        data-testid={i < value ? \"single-bar-active\" : \"single-bar-inactive\"}\n        key={i}\n        sx={{\n          width: barWidth,\n          borderRadius: `calc(${barWidth} / 2)`,\n          height: `${height}px`,\n          backgroundColor: color,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Grid\n      data-testid=\"bars-meter\"\n      alignItems=\"end\"\n      gridTemplateColumns={[`repeat(${maxValue}, max-content)`]}\n      gap={gap}\n      {...gridProps}\n    >\n      {bars}\n    </Grid>\n  );\n};\n"],"names":["BarsMeter","props","value","activeColor","maxValue","heightPx","gap","inactiveColor","barWidth","minHeight","gridProps","bars","i","color","height","jsx","Box","Grid"],"mappings":";;;AAUa,MAAAA,IAA6B,CAACC,MAAU;AAC7C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,KAAAC,IAAM;AAAA,IACN,eAAAC,IAAgB;AAAA,IAChB,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EACD,IAAAT,GAEEU,IAA0B,CAAA;AAEhC,WAASC,IAAI,GAAGA,IAAIR,GAAUQ,KAAK;AAC3B,UAAAC,IAAQD,IAAIV,IAAQC,IAAcI,GAClCO,IAASL,KACTJ,IAAWI,MAAcL,IAAW,KAAMQ,IAAIH,IAC/CJ,IAAWD,KAAaQ,IAAI;AAE5B,IAAAD,EAAA;AAAA,MACHI,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,eAAaJ,IAAIV,IAAQ,sBAAsB;AAAA,UAE/C,IAAI;AAAA,YACF,OAAOM;AAAA,YACP,cAAc,QAAQA,CAAQ;AAAA,YAC9B,QAAQ,GAAGM,CAAM;AAAA,YACjB,iBAAiBD;AAAA,UACnB;AAAA,QAAA;AAAA,QANKD;AAAA,MAOP;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAAG,gBAAAA,EAAA;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,YAAW;AAAA,MACX,qBAAqB,CAAC,UAAUb,CAAQ,gBAAgB;AAAA,MACxD,KAAAE;AAAA,MACC,GAAGI;AAAA,MAEH,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/sd-component-library96.js

@@ -0,0 +1,72 @@
+import { j as o } from "./sd-component-library195.js";
+import { Box as j } from "rebass";
+import { isPDFFlow as g } from "./sd-component-library4.js";
+import { areSegmentsValid as v } from "./sd-component-library246.js";
+import { Segment as w } from "./sd-component-library247.js";
+const E = ({
+  segments: x,
+  outlineWidth: e = 2,
+  segmentWidth: n = 40,
+  size: r = 280,
+  labelOffset: p = 100,
+  labelPointerOffset: m = 10,
+  verticalOffset: d = 20,
+  sideOffset: a = 5,
+  labelOffsetMobile: f = 30,
+  mobile: t = !1,
+  verticalOffsetMobile: l = 50,
+  containerSx: u,
+  children: c
+}) => {
+  const h = g();
+  if (!v(x))
+    return null;
+  const i = {
+    width: `${r}px`,
+    height: `${r}px`
+  };
+  return /* @__PURE__ */ o.jsx(
+    j,
+    {
+      sx: {
+        overflow: "hidden",
+        cursor: "default",
+        ...t ? {} : { pr: "10px" },
+        ...u
+      },
+      children: /* @__PURE__ */ o.jsxs(
+        "svg",
+        {
+          ...i,
+          style: {
+            margin: `${t ? l : d}px ${p + a}px`,
+            borderRadius: `${r / 2}px`,
+            ...!h && { boxShadow: "10px 15px 15px #9BA2B44D" },
+            overflow: "visible"
+          },
+          children: [
+            x.map((s) => /* @__PURE__ */ o.jsx(
+              w,
+              {
+                segment: s,
+                segmentWidth: n,
+                size: r,
+                outlineWidth: e,
+                labelOffset: p,
+                labelPointerOffset: m,
+                mobile: t,
+                labelOffsetMobile: f
+              },
+              s.text
+            )),
+            /* @__PURE__ */ o.jsx("foreignObject", { x: 0, y: 0, ...i, style: { pointerEvents: "none" }, children: c })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  E as DonutDiagram
+};
+//# sourceMappingURL=sd-component-library96.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library96.js","sources":["../src/components/meters/donut-diagram/donut-diagram.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { isPDFFlow } from \"../../../core/functions\";\nimport { DonutDiagramProps as Props } from \"./interfaces\";\nimport { Segment } from \"./partials\";\nimport { areSegmentsValid } from \"./utils\";\n\nexport const DonutDiagram: React.FC<Props> = ({\n  segments,\n  outlineWidth = 2,\n  segmentWidth = 40,\n  size = 280,\n  labelOffset = 100,\n  labelPointerOffset = 10,\n  verticalOffset = 20,\n  sideOffset = 5,\n  labelOffsetMobile = 30,\n  mobile = false,\n  verticalOffsetMobile = 50,\n  containerSx,\n  children,\n}) => {\n  const isPdf = isPDFFlow();\n\n  if (!areSegmentsValid(segments)) return null;\n\n  const sizes = {\n    width: `${size}px`,\n    height: `${size}px`,\n  };\n\n  return (\n    <Box\n      sx={{\n        overflow: \"hidden\",\n        cursor: \"default\",\n        ...(mobile ? {} : { pr: \"10px\" }),\n        ...containerSx,\n      }}\n    >\n      <svg\n        {...sizes}\n        style={{\n          margin: `${mobile ? verticalOffsetMobile : verticalOffset}px ${\n            labelOffset + sideOffset\n          }px`,\n          borderRadius: `${size / 2}px`,\n          ...(!isPdf && { boxShadow: \"10px 15px 15px #9BA2B44D\" }),\n          overflow: \"visible\",\n        }}\n      >\n        {segments.map((segment) => (\n          <Segment\n            key={segment.text}\n            segment={segment}\n            segmentWidth={segmentWidth}\n            size={size}\n            outlineWidth={outlineWidth}\n            labelOffset={labelOffset}\n            labelPointerOffset={labelPointerOffset}\n            mobile={mobile}\n            labelOffsetMobile={labelOffsetMobile}\n          />\n        ))}\n\n        <foreignObject x={0} y={0} {...sizes} style={{ pointerEvents: \"none\" }}>\n          {children}\n        </foreignObject>\n      </svg>\n    </Box>\n  );\n};\n"],"names":["DonutDiagram","segments","outlineWidth","segmentWidth","size","labelOffset","labelPointerOffset","verticalOffset","sideOffset","labelOffsetMobile","mobile","verticalOffsetMobile","containerSx","children","isPdf","isPDFFlow","areSegmentsValid","sizes","jsx","Box","jsxs","segment","Segment"],"mappings":";;;;;AASO,MAAMA,IAAgC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,oBAAAC,IAAqB;AAAA,EACrB,gBAAAC,IAAiB;AAAA,EACjB,YAAAC,IAAa;AAAA,EACb,mBAAAC,IAAoB;AAAA,EACpB,QAAAC,IAAS;AAAA,EACT,sBAAAC,IAAuB;AAAA,EACvB,aAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAQC;AAEV,MAAA,CAACC,EAAiBf,CAAQ;AAAU,WAAA;AAExC,QAAMgB,IAAQ;AAAA,IACZ,OAAO,GAAGb,CAAI;AAAA,IACd,QAAQ,GAAGA,CAAI;AAAA,EAAA;AAIf,SAAAc,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,GAAIT,IAAS,CAAA,IAAK,EAAE,IAAI,OAAO;AAAA,QAC/B,GAAGE;AAAA,MACL;AAAA,MAEA,UAAAQ,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGH;AAAA,UACJ,OAAO;AAAA,YACL,QAAQ,GAAGP,IAASC,IAAuBJ,CAAc,MACvDF,IAAcG,CAChB;AAAA,YACA,cAAc,GAAGJ,IAAO,CAAC;AAAA,YACzB,GAAI,CAACU,KAAS,EAAE,WAAW,2BAA2B;AAAA,YACtD,UAAU;AAAA,UACZ;AAAA,UAEC,UAAA;AAAA,YAASb,EAAA,IAAI,CAACoB,MACbH,gBAAAA,EAAA;AAAA,cAACI;AAAA,cAAA;AAAA,gBAEC,SAAAD;AAAA,gBACA,cAAAlB;AAAA,gBACA,MAAAC;AAAA,gBACA,cAAAF;AAAA,gBACA,aAAAG;AAAA,gBACA,oBAAAC;AAAA,gBACA,QAAAI;AAAA,gBACA,mBAAAD;AAAA,cAAA;AAAA,cARKY,EAAQ;AAAA,YAAA,CAUhB;AAAA,YAEAH,gBAAAA,EAAAA,IAAA,iBAAA,EAAc,GAAG,GAAG,GAAG,GAAI,GAAGD,GAAO,OAAO,EAAE,eAAe,UAC3D,UAAAJ,EACH,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/lib/sd-component-library97.js

@@ -0,0 +1,51 @@
+import { j as n } from "./sd-component-library195.js";
+import { areSegmentsValid as h } from "./sd-component-library246.js";
+import { CompactDonutGaugeSegment as x } from "./sd-component-library248.js";
+import { CompactDonutGaugeValueIndicator as f } from "./sd-component-library249.js";
+const C = ({
+  segments: e,
+  size: r = 70,
+  value: t,
+  segmentWidth: m = 10,
+  outlineWidth: c = 2,
+  cursor: p = "default",
+  children: a
+}) => {
+  if (!h(e))
+    return null;
+  if (t > 1 || t < 0)
+    return console.error(
+      "Value should be not less than 0 and not higher than 1",
+      `Received: ${t}`
+    ), null;
+  const i = e.find(
+    ({ start: o, end: u }) => t >= o && t <= u
+  ), s = {
+    width: `${r}px`,
+    height: `${r}px`
+  };
+  return /* @__PURE__ */ n.jsxs("svg", { ...s, style: { cursor: p }, children: [
+    e.map((o) => /* @__PURE__ */ n.jsx(
+      x,
+      {
+        segment: o,
+        isMatching: o.start === i.start,
+        size: r,
+        segmentWidth: m,
+        outlineWidth: c
+      },
+      o.color
+    )),
+    a ? /* @__PURE__ */ n.jsx("foreignObject", { x: 0, y: 0, ...s, children: a }) : /* @__PURE__ */ n.jsx(
+      f,
+      {
+        size: r,
+        segment: i
+      }
+    )
+  ] });
+};
+export {
+  C as CompactDonutGauge
+};
+//# sourceMappingURL=sd-component-library97.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library97.js","sources":["../src/components/meters/compact-donut-gauge/compact-donut-gauge.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { areSegmentsValid } from \"../donut-diagram/utils\";\nimport { CompactDonutGaugeProps as Props } from \"./interfaces\";\nimport {\n  CompactDonutGaugeSegment,\n  CompactDonutGaugeValueIndicator,\n} from \"./partials\";\n\nexport const CompactDonutGauge: React.FC<PropsWithChildren<Props>> = ({\n  segments,\n  size = 70,\n  value,\n  segmentWidth = 10,\n  outlineWidth = 2,\n  cursor = \"default\",\n  children,\n}) => {\n  if (!areSegmentsValid(segments)) return null;\n\n  if (value > 1 || value < 0) {\n    console.error(\n      \"Value should be not less than 0 and not higher than 1\",\n      `Received: ${value}`\n    );\n    return null;\n  }\n\n  const matchingSegment = segments.find(\n    ({ start, end }) => value >= start && value <= end\n  )!;\n\n  const sizes = {\n    width: `${size}px`,\n    height: `${size}px`,\n  };\n\n  return (\n    <svg {...sizes} style={{ cursor }}>\n      {segments.map((segment) => (\n        <CompactDonutGaugeSegment\n          segment={segment}\n          isMatching={segment.start === matchingSegment.start}\n          size={size}\n          segmentWidth={segmentWidth}\n          outlineWidth={outlineWidth}\n          key={segment.color}\n        />\n      ))}\n\n      {children ? (\n        <foreignObject x={0} y={0} {...sizes}>\n          {children}\n        </foreignObject>\n      ) : (\n        <CompactDonutGaugeValueIndicator\n          size={size}\n          segment={matchingSegment}\n        />\n      )}\n    </svg>\n  );\n};\n"],"names":["CompactDonutGauge","segments","size","value","segmentWidth","outlineWidth","cursor","children","areSegmentsValid","matchingSegment","start","end","sizes","segment","jsx","CompactDonutGaugeSegment","CompactDonutGaugeValueIndicator"],"mappings":";;;;AASO,MAAMA,IAAwD,CAAC;AAAA,EACpE,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,QAAAC,IAAS;AAAA,EACT,UAAAC;AACF,MAAM;AACA,MAAA,CAACC,EAAiBP,CAAQ;AAAU,WAAA;AAEpC,MAAAE,IAAQ,KAAKA,IAAQ;AACf,mBAAA;AAAA,MACN;AAAA,MACA,aAAaA,CAAK;AAAA,IAAA,GAEb;AAGT,QAAMM,IAAkBR,EAAS;AAAA,IAC/B,CAAC,EAAE,OAAAS,GAAO,KAAAC,QAAUR,KAASO,KAASP,KAASQ;AAAA,EAAA,GAG3CC,IAAQ;AAAA,IACZ,OAAO,GAAGV,CAAI;AAAA,IACd,QAAQ,GAAGA,CAAI;AAAA,EAAA;AAGjB,gCACG,OAAK,EAAA,GAAGU,GAAO,OAAO,EAAE,QAAAN,EACtB,GAAA,UAAA;AAAA,IAASL,EAAA,IAAI,CAACY,MACbC,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAF;AAAA,QACA,YAAYA,EAAQ,UAAUJ,EAAgB;AAAA,QAC9C,MAAAP;AAAA,QACA,cAAAE;AAAA,QACA,cAAAC;AAAA,MAAA;AAAA,MACKQ,EAAQ;AAAA,IAAA,CAEhB;AAAA,IAEAN,IACEO,gBAAAA,EAAA,IAAA,iBAAA,EAAc,GAAG,GAAG,GAAG,GAAI,GAAGF,GAC5B,UAAAL,EAAA,CACH,IAEAO,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAAd;AAAA,QACA,SAASO;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/lib/sd-component-library98.js

@@ -0,0 +1,53 @@
+import { j as r } from "./sd-component-library195.js";
+import { LinearGaugeSegment as c } from "./sd-component-library250.js";
+import { LinearGaugeLabel as d } from "./sd-component-library251.js";
+import { GridCenter as f } from "./sd-component-library44.js";
+import { GridContainerV2 as h } from "./sd-component-library41.js";
+function $(l) {
+  const {
+    gap: o = 3,
+    segmentHeight: i = 8,
+    value: n,
+    options: t,
+    labelGap: s = 12,
+    defaultColor: m = "cl_lightGrey",
+    defaultMatchedColor: p,
+    cursor: u = "default",
+    labelProps: g
+  } = l;
+  return /* @__PURE__ */ r.jsx(
+    f,
+    {
+      width: "100%",
+      gap: `${o}px`,
+      gridTemplateColumns: `repeat(${t.length}, 1fr)`,
+      sx: { cursor: u },
+      children: t.map((e, x) => {
+        const a = e.value === n ? e.labelColor ?? p : m;
+        return /* @__PURE__ */ r.jsxs(h, { gap: `${s}px`, children: [
+          /* @__PURE__ */ r.jsx(
+            c,
+            {
+              color: a,
+              segmentHeight: i,
+              idx: x,
+              total: t.length
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            d,
+            {
+              text: e.label,
+              color: a,
+              ...g
+            }
+          )
+        ] }, `${e.value}`);
+      })
+    }
+  );
+}
+export {
+  $ as LinearDiscreteGaugeMeter
+};
+//# sourceMappingURL=sd-component-library98.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library98.js","sources":["../src/components/meters/linear-discrete-gauge-meter/linear-discrete-gauge-meter.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { Grid, GridCenter } from \"../../containers\";\nimport {\n  LinearGaugeLabel,\n  LinearGaugeSegment,\n} from \"../linear-gauge-meter-partials\";\nimport { LinearDiscreteGaugeMeterProps as Props } from \"./interfaces\";\n\nexport function LinearDiscreteGaugeMeter<T>(\n  props: PropsWithChildren<Props<T>>\n) {\n  const {\n    gap = 3,\n    segmentHeight = 8,\n    value,\n    options,\n    labelGap = 12,\n    defaultColor = \"cl_lightGrey\",\n    defaultMatchedColor,\n    cursor = \"default\",\n    labelProps,\n  } = props;\n\n  return (\n    <GridCenter\n      width=\"100%\"\n      gap={`${gap}px`}\n      gridTemplateColumns={`repeat(${options.length}, 1fr)`}\n      sx={{ cursor }}\n    >\n      {options.map((option, idx) => {\n        const color =\n          option.value === value\n            ? option.labelColor ?? defaultMatchedColor\n            : defaultColor;\n\n        return (\n          <Grid gap={`${labelGap}px`} key={`${option.value}`}>\n            <LinearGaugeSegment\n              color={color}\n              segmentHeight={segmentHeight}\n              idx={idx}\n              total={options.length}\n            />\n\n            <LinearGaugeLabel\n              text={option.label}\n              color={color}\n              {...labelProps}\n            />\n          </Grid>\n        );\n      })}\n    </GridCenter>\n  );\n}\n"],"names":["LinearDiscreteGaugeMeter","props","gap","segmentHeight","value","options","labelGap","defaultColor","defaultMatchedColor","cursor","labelProps","jsx","GridCenter","option","idx","color","jsxs","Grid","LinearGaugeSegment","LinearGaugeLabel"],"mappings":";;;;;AASO,SAASA,EACdC,GACA;AACM,QAAA;AAAA,IACJ,KAAAC,IAAM;AAAA,IACN,eAAAC,IAAgB;AAAA,IAChB,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,cAAAC,IAAe;AAAA,IACf,qBAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC;AAAA,EACE,IAAAT;AAGF,SAAAU,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,KAAK,GAAGV,CAAG;AAAA,MACX,qBAAqB,UAAUG,EAAQ,MAAM;AAAA,MAC7C,IAAI,EAAE,QAAAI,EAAO;AAAA,MAEZ,UAAQJ,EAAA,IAAI,CAACQ,GAAQC,MAAQ;AAC5B,cAAMC,IACJF,EAAO,UAAUT,IACbS,EAAO,cAAcL,IACrBD;AAEN,eACGS,gBAAAA,EAAA,KAAAC,GAAA,EAAK,KAAK,GAAGX,CAAQ,MACpB,UAAA;AAAA,UAAAK,gBAAAA,EAAA;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,OAAAH;AAAA,cACA,eAAAZ;AAAA,cACA,KAAAW;AAAA,cACA,OAAOT,EAAQ;AAAA,YAAA;AAAA,UACjB;AAAA,UAEAM,gBAAAA,EAAA;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,MAAMN,EAAO;AAAA,cACb,OAAAE;AAAA,cACC,GAAGL;AAAA,YAAA;AAAA,UACN;AAAA,QAZ+B,EAAA,GAAA,GAAGG,EAAO,KAAK,EAahD;AAAA,MAAA,CAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/sd-component-library99.js

@@ -0,0 +1,51 @@
+import { j as e } from "./sd-component-library195.js";
+import { isMatchingRange as u } from "./sd-component-library252.js";
+import { GridCenter as c } from "./sd-component-library44.js";
+import { GridContainerV2 as f } from "./sd-component-library41.js";
+import { LinearGaugeSegment as d } from "./sd-component-library250.js";
+import { LinearGaugeLabel as j } from "./sd-component-library251.js";
+const M = ({
+  gap: i = 3,
+  segmentHeight: l = 8,
+  value: n,
+  options: t,
+  labelGap: o = 12,
+  defaultColor: s = "cl_lightGrey",
+  defaultMatchedColor: g,
+  cursor: x = "default",
+  labelProps: p
+}) => /* @__PURE__ */ e.jsx(
+  c,
+  {
+    width: "100%",
+    gap: `${i}px`,
+    gridTemplateColumns: t.map(({ start: r, end: a }) => `${a - r}fr`).join(" "),
+    sx: { cursor: x },
+    children: t.map((r, a) => {
+      const m = u(r, n) ? r.labelColor ?? g : s;
+      return /* @__PURE__ */ e.jsxs(f, { gap: `${o}px`, children: [
+        /* @__PURE__ */ e.jsx(
+          d,
+          {
+            color: m,
+            segmentHeight: l,
+            idx: a,
+            total: t.length
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          j,
+          {
+            text: r.label,
+            color: m,
+            ...p
+          }
+        )
+      ] }, `${r.start}`);
+    })
+  }
+);
+export {
+  M as LinearNumericGaugeMeter
+};
+//# sourceMappingURL=sd-component-library99.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-component-library99.js","sources":["../src/components/meters/linear-numeric-gauge-meter/linear-numeric-gauge-meter.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Grid, GridCenter } from \"../../containers\";\nimport {\n  LinearGaugeLabel,\n  LinearGaugeSegment,\n} from \"../linear-gauge-meter-partials\";\nimport { LinearNumericGaugeMeterProps as Props } from \"./interfaces\";\nimport { isMatchingRange } from \"./utils\";\n\nexport const LinearNumericGaugeMeter: React.FC<Props> = ({\n  gap = 3,\n  segmentHeight = 8,\n  value,\n  options,\n  labelGap = 12,\n  defaultColor = \"cl_lightGrey\",\n  defaultMatchedColor,\n  cursor = \"default\",\n  labelProps,\n}) => {\n  return (\n    <GridCenter\n      width=\"100%\"\n      gap={`${gap}px`}\n      gridTemplateColumns={options\n        .map(({ start, end }) => `${end - start}fr`)\n        .join(\" \")}\n      sx={{ cursor }}\n    >\n      {options.map((option, idx) => {\n        const color = isMatchingRange(option, value)\n          ? option.labelColor ?? defaultMatchedColor\n          : defaultColor;\n\n        return (\n          <Grid gap={`${labelGap}px`} key={`${option.start}`}>\n            <LinearGaugeSegment\n              color={color}\n              segmentHeight={segmentHeight}\n              idx={idx}\n              total={options.length}\n            />\n\n            <LinearGaugeLabel\n              text={option.label}\n              color={color}\n              {...labelProps}\n            />\n          </Grid>\n        );\n      })}\n    </GridCenter>\n  );\n};\n"],"names":["LinearNumericGaugeMeter","gap","segmentHeight","value","options","labelGap","defaultColor","defaultMatchedColor","cursor","labelProps","jsx","GridCenter","start","end","option","idx","color","isMatchingRange","jsxs","Grid","LinearGaugeSegment","LinearGaugeLabel"],"mappings":";;;;;;AAUO,MAAMA,IAA2C,CAAC;AAAA,EACvD,KAAAC,IAAM;AAAA,EACN,eAAAC,IAAgB;AAAA,EAChB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,qBAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,YAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,KAAK,GAAGV,CAAG;AAAA,IACX,qBAAqBG,EAClB,IAAI,CAAC,EAAE,OAAAQ,GAAO,KAAAC,EAAU,MAAA,GAAGA,IAAMD,CAAK,IAAI,EAC1C,KAAK,GAAG;AAAA,IACX,IAAI,EAAE,QAAAJ,EAAO;AAAA,IAEZ,UAAQJ,EAAA,IAAI,CAACU,GAAQC,MAAQ;AAC5B,YAAMC,IAAQC,EAAgBH,GAAQX,CAAK,IACvCW,EAAO,cAAcP,IACrBD;AAEJ,aACGY,gBAAAA,EAAA,KAAAC,GAAA,EAAK,KAAK,GAAGd,CAAQ,MACpB,UAAA;AAAA,QAAAK,gBAAAA,EAAA;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,OAAAJ;AAAA,YACA,eAAAd;AAAA,YACA,KAAAa;AAAA,YACA,OAAOX,EAAQ;AAAA,UAAA;AAAA,QACjB;AAAA,QAEAM,gBAAAA,EAAA;AAAA,UAACW;AAAA,UAAA;AAAA,YACC,MAAMP,EAAO;AAAA,YACb,OAAAE;AAAA,YACC,GAAGP;AAAA,UAAA;AAAA,QACN;AAAA,MAZ+B,EAAA,GAAA,GAAGK,EAAO,KAAK,EAahD;AAAA,IAAA,CAEH;AAAA,EAAA;AAAA;"}

package/lib/setupTests.d.ts

@@ -1,2 +1 @@
-import "@testing-library/jest-dom";
-import "@testing-library/jest-dom/extend-expect";
+export {};

package/lib/style.css

@@ -0,0 +1 @@
+.rdrCalendarWrapper{box-sizing:border-box;background:#ffffff;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rdrDateDisplay{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between}.rdrDateDisplayItem{-webkit-box-flex:1;flex:1 1;width:0;text-align:center;color:inherit}.rdrDateDisplayItem+.rdrDateDisplayItem{margin-left:.833em}.rdrDateDisplayItem input{text-align:inherit}.rdrDateDisplayItem input:disabled{cursor:default}.rdrMonthAndYearWrapper{box-sizing:inherit;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between}.rdrMonthAndYearPickers{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.rdrNextPrevButton{box-sizing:inherit;cursor:pointer;outline:none}.rdrMonths{display:-webkit-box;display:flex}.rdrMonthsVertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.rdrMonthsHorizontal>div>div>div{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.rdrMonth{width:27.667em}.rdrWeekDays{display:-webkit-box;display:flex}.rdrWeekDay{flex-basis:calc(100% / 7);box-sizing:inherit;text-align:center}.rdrDays{display:-webkit-box;display:flex;flex-wrap:wrap}.rdrInfiniteMonths{overflow:auto}.rdrDateRangeWrapper{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rdrDateInput{position:relative}.rdrDateInput input{outline:none}.rdrDateInput .rdrWarning{position:absolute;font-size:1.6em;line-height:1.6em;top:0;right:.25em;color:red}.rdrDay{box-sizing:inherit;width:calc(100% / 7);position:relative;font:inherit;cursor:pointer}.rdrDayNumber{display:block;position:relative}.rdrDayNumber span{color:#1d2429}.rdrDayDisabled{cursor:not-allowed}@supports (-ms-ime-align: auto){.rdrDay{flex-basis:14.285%!important}}.rdrSelected,.rdrInRange,.rdrStartEdge,.rdrEndEdge,.rdrDayStartPreview,.rdrDayInPreview,.rdrDayEndPreview{pointer-events:none}.rdrDateRangePickerWrapper{display:-webkit-inline-box;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rdrStaticRanges{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.rdrStaticRange{font-size:inherit}.rdrInputRange{display:-webkit-box;display:flex}.rdrCalendarWrapper{color:#000;font-size:12px}.rdrDateDisplayWrapper{background-color:#eff2f7}.rdrDateDisplay{margin:.833em}.rdrDateDisplayItem{border-radius:4px;background-color:#fff;box-shadow:0 1px 2px #23394236;border:1px solid transparent}.rdrDateDisplayItem input{cursor:pointer;height:2.5em;line-height:2.5em;border:0px;background:transparent;width:100%;color:#849095}.rdrDateDisplayItemActive{border-color:currentColor}.rdrDateDisplayItemActive input{color:#7d888d}.rdrMonthAndYearWrapper{-webkit-box-align:center;align-items:center;height:60px;padding-top:10px}.rdrMonthAndYearPickers{font-weight:600}.rdrMonthAndYearPickers select{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:10px 30px 10px 10px;border-radius:4px;outline:0;color:#3e484f;background:url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;background-position:right 8px center;cursor:pointer;text-align:center}.rdrMonthAndYearPickers select:hover{background-color:#00000012}.rdrMonthPicker,.rdrYearPicker{margin:0 5px}.rdrNextPrevButton{display:block;width:24px;height:24px;margin:0 .833em;padding:0;border:0;border-radius:5px;background:#EFF2F7}.rdrNextPrevButton:hover{background:#E1E7F0}.rdrNextPrevButton i{display:block;width:0;height:0;padding:0;text-align:center;border-style:solid;margin:auto;-webkit-transform:translate(-3px,0px);transform:translate(-3px)}.rdrPprevButton i{border-width:4px 6px 4px 4px;border-color:transparent rgb(52,73,94) transparent transparent;-webkit-transform:translate(-3px,0px);transform:translate(-3px)}.rdrNextButton i{margin:0 0 0 7px;border-width:4px 4px 4px 6px;border-color:transparent transparent transparent rgb(52,73,94);-webkit-transform:translate(3px,0px);transform:translate(3px)}.rdrWeekDays{padding:0 .833em}.rdrMonth{padding:0 .833em 1.666em}.rdrMonth .rdrWeekDays{padding:0}.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{display:none}.rdrWeekDay{font-weight:400;line-height:2.667em;color:#849095}.rdrDay{background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;padding:0;line-height:3em;height:3em;text-align:center;color:#1d2429}.rdrDay:focus{outline:0}.rdrDayNumber{outline:0;font-weight:300;position:absolute;left:0;right:0;top:5px;bottom:5px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.rdrDayToday .rdrDayNumber span{font-weight:500}.rdrDayToday .rdrDayNumber span:after{content:"";position:absolute;bottom:4px;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%);width:18px;height:2px;border-radius:2px;background:#3d91ff}.rdrDayToday:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span:after{background:#fff}.rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span{color:#ffffffd9}.rdrSelected,.rdrInRange,.rdrStartEdge,.rdrEndEdge{background:currentColor;position:absolute;top:5px;left:0;right:0;bottom:5px}.rdrSelected{left:2px;right:2px}.rdrStartEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}.rdrEndEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}.rdrSelected{border-radius:1.042em}.rdrDayStartOfMonth .rdrInRange,.rdrDayStartOfMonth .rdrEndEdge,.rdrDayStartOfWeek .rdrInRange,.rdrDayStartOfWeek .rdrEndEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}.rdrDayEndOfMonth .rdrInRange,.rdrDayEndOfMonth .rdrStartEdge,.rdrDayEndOfWeek .rdrInRange,.rdrDayEndOfWeek .rdrStartEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}.rdrDayStartOfMonth .rdrDayInPreview,.rdrDayStartOfMonth .rdrDayEndPreview,.rdrDayStartOfWeek .rdrDayInPreview,.rdrDayStartOfWeek .rdrDayEndPreview{border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;border-left-width:1px;left:0}.rdrDayEndOfMonth .rdrDayInPreview,.rdrDayEndOfMonth .rdrDayStartPreview,.rdrDayEndOfWeek .rdrDayInPreview,.rdrDayEndOfWeek .rdrDayStartPreview{border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;border-right-width:1px;right:0}.rdrDayStartPreview,.rdrDayInPreview,.rdrDayEndPreview{background:rgba(255,255,255,.09);position:absolute;top:3px;left:0;right:0;bottom:3px;pointer-events:none;border:0px solid currentColor;z-index:1}.rdrDayStartPreview{border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;left:0}.rdrDayInPreview{border-top-width:1px;border-bottom-width:1px}.rdrDayEndPreview{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;right:0}.rdrDefinedRangesWrapper{font-size:12px;width:226px;border-right:solid 1px #eff2f7;background:#fff}.rdrDefinedRangesWrapper .rdrStaticRangeSelected{color:currentColor;font-weight:600}.rdrStaticRange{border:0;cursor:pointer;display:block;outline:0;border-bottom:1px solid #eff2f7;padding:0;background:#fff}.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{background:#eff2f7}.rdrStaticRangeLabel{display:block;outline:0;line-height:18px;padding:10px 20px;text-align:left}.rdrInputRanges{padding:10px 0}.rdrInputRange{-webkit-box-align:center;align-items:center;padding:5px 20px}.rdrInputRangeInput{width:30px;height:30px;line-height:30px;border-radius:4px;text-align:center;border:solid 1px rgb(222,231,235);margin-right:10px;color:#6c767a}.rdrInputRangeInput:focus,.rdrInputRangeInput:hover{border-color:#b4bfc4;outline:0;color:#333}.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{content:"";border:1px solid currentColor;border-radius:1.333em;position:absolute;top:-2px;bottom:-2px;left:0;right:0;background:transparent}.rdrDayPassive{pointer-events:none}.rdrDayPassive .rdrDayNumber span{color:#d5dce0}.rdrDayPassive .rdrInRange,.rdrDayPassive .rdrStartEdge,.rdrDayPassive .rdrEndEdge,.rdrDayPassive .rdrSelected,.rdrDayPassive .rdrDayStartPreview,.rdrDayPassive .rdrDayInPreview,.rdrDayPassive .rdrDayEndPreview{display:none}.rdrDayDisabled{background-color:#f8f8f8}.rdrDayDisabled .rdrDayNumber span{color:#aeb9bf}.rdrDayDisabled .rdrInRange,.rdrDayDisabled .rdrStartEdge,.rdrDayDisabled .rdrEndEdge,.rdrDayDisabled .rdrSelected,.rdrDayDisabled .rdrDayStartPreview,.rdrDayDisabled .rdrDayInPreview,.rdrDayDisabled .rdrDayEndPreview{-webkit-filter:grayscale(100%) opacity(60%);filter:grayscale(100%) opacity(60%)}.rdrMonthName{text-align:left;font-weight:600;color:#849095;padding:.833em}

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@selfdecode/sd-component-library",
-  "version": "4.0.6",
+  "version": "4.0.73.2",
   "private": false,
   "license": "MIT",
-  "main": "./lib/index.js",
   "files": [
     "lib"
   ],
@@ -11,79 +10,24 @@
     "lib": "lib"
   },
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@rebass/forms": "^4.0.6",
-    "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^7.2.1",
-    "@types/body-scroll-lock": "^3.1.0",
-    "@types/jest": "^24.9.1",
-    "@types/node": "^18.7.11",
-    "@types/react": "^18.0.17",
-    "@types/react-date-range": "1.1.3",
-    "@types/react-dom": "^18.0.6",
-    "@zarconontol/enzyme-adapter-react-18": "^0.7.3",
-    "babel-jest": "^27.4.2",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-preset-react-app": "^10.0.1",
-    "bfj": "^7.0.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "browserslist": "^4.18.1",
-    "camelcase": "^6.2.1",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.30.0",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
-    "emotion-theming": "^10.0.27",
-    "eslint": "^8.3.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-webpack-plugin": "^3.1.1",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^10.0.0",
+    "emotion-theming": "^10.0.28",
     "history": "^4.10.1",
-    "html-webpack-plugin": "^5.5.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.4.3",
-    "jest-resolve": "^27.4.2",
-    "jest-watch-typeahead": "^1.0.0",
-    "lint-staged": "^10.2.11",
-    "mini-css-extract-plugin": "^2.4.5",
-    "next-share": "^0.18.0",
-    "postcss": "^8.4.4",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
-    "prettier": "^2.0.5",
-    "prompts": "^2.4.2",
-    "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-contenteditable": "^3.3.6",
     "react-date-range": "1.1.3",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "^18.2.0",
     "react-refresh": "^0.11.0",
-    "react-router-dom": "^5.3.3",
     "react-transition-group": "^4.4.1",
     "rebass": "^4.0.7",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",
-    "sass": "^1.52.1",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.5",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.2",
-    "terser-webpack-plugin": "^5.2.5",
-    "webpack": "^5.64.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
+    "semver": "^7.3.5"
   },
   "husky": {
     "hooks": {
@@ -96,18 +40,14 @@
     ]
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "ci-test": "npm run-script ci-prettier-check && jest --collectCoverage",
+    "ci:test": "vitest run --coverage.provider c8",
     "ci-prettier-check": "prettier-check 'src/**/@(*.js|*.ts|*.tsx|*.json|*.css|*.scss|*.md)!(*.chunk.js)'",
-    "test": "node scripts/test.js",
-    "styleguide": "styleguidist server --port=7070",
-    "styleguide:build": "styleguidist build",
     "clean": "npx shx rm -rf ./lib",
     "copy": "copyfiles -u 1 ./src/**/*.svg ./lib",
     "prebuild": "npm run clean",
     "postbuild": "npm run copy",
-    "build": "tsc --build && webpack",
-    "prepublishOnly": "npm run ci-test && npm run build"
+    "build": "tsc & vite build",
+    "prepublishOnly": "npm run ci:test & npm run build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -125,88 +65,64 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
     "@trivago/prettier-plugin-sort-imports": "^3.1.1",
-    "@types/enzyme": "^3.10.5",
+    "@types/body-scroll-lock": "^3.1.0",
     "@types/history": "^4.7.11",
     "@types/lodash": "^4.14.182",
+    "@types/lodash-es": "^4.17.8",
+    "@types/node": "^18.17.1",
+    "@types/react": "^18.0.17",
+    "@types/react-date-range": "1.1.3",
+    "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.1",
     "@types/rebass": "^4.0.6",
     "@types/rebass__forms": "^4.0.2",
+    "@vitejs/plugin-react": "^4.0.4",
+    "c8": "^8.0.0",
     "copyfiles": "^2.3.0",
-    "enzyme": "^3.11.0",
+    "eslint": "^8.3.0",
+    "eslint-config-react-app": "^7.0.1",
+    "file-loader": "^6.2.0",
     "husky": "^4.2.5",
+    "lint-staged": "^10.2.11",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "prettier": "^2.0.5",
     "prettier-check": "^2.0.0",
     "react-docgen-typescript": "^1.18.0",
-    "react-styleguidist": "^11.2.0",
+    "sass": "^1.52.1",
     "shelljs": "^0.8.4",
-    "typescript": "^4.6.4",
-    "webpack-cli": "^4.1.0",
-    "webpack-node-externals": "^2.5.2"
+    "tailwindcss": "^3.0.2",
+    "typescript": "4.6.4",
+    "vite": "^4.4.2",
+    "vite-plugin-dts": "^3.4.0",
+    "vite-plugin-svgr": "^3.2.0",
+    "vitest": "^0.33.0"
+  },
+  "peerDependencies": {
+    "@rebass/forms": "^4.0.6",
+    "theme-ui": "^0.16.1",
+    "lodash-es": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^5.3.3",
+    "rebass": "^4.0.7"
   },
-  "description": "The SelfDecode Component Libary (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.",
+  "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.",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/selfdecode/sd-component-library.git"
   },
   "author": "selfdecode",
-  "homepage": "https://bitbucket.org/selfdecode/sd-component-library#readme",
-  "jest": {
-    "roots": [
-      "<rootDir>/src"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts"
-    ],
-    "setupFiles": [
-      "react-app-polyfill/jsdom"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.ts"
-    ],
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
-    ],
-    "testEnvironment": "jsdom",
-    "transform": {
-      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
-      "^.+\\.module\\.(css|sass|scss)$"
-    ],
-    "modulePaths": [
-      "/Users/vaibhav/development/SelfDecode/frontend-component-library/src"
-    ],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ],
-    "watchPlugins": [
-      "jest-watch-typeahead/filename",
-      "jest-watch-typeahead/testname"
-    ],
-    "resetMocks": true
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  }
+  "homepage": "https://github.com/selfdecode/frontend-component-library#readme",
+  "type": "module",
+  "module": "./lib/sd-component-library.js",
+  "types": "./lib/sd-component-library.d.ts",
+  "sideEffects": false
 }

package/lib/02db83b5e22f52e82765429b20693529.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.1 20.06">
-  <path d="M3107.57,3227.67h-4.52v13.54h4.52v-13.54Zm0.29-4.18a2.325,2.325,0,0,0-2.52-2.34,2.36,2.36,0,0,0-2.56,2.34,2.328,2.328,0,0,0,2.5,2.33h0.03A2.327,2.327,0,0,0,3107.86,3223.49Zm16.01,9.96c0-4.16-2.22-6.1-5.2-6.1a4.489,4.489,0,0,0-4.11,2.29h0.03v-1.97h-4.52s0.06,1.27,0,13.54h4.52v-7.56a3.429,3.429,0,0,1,.15-1.11,2.475,2.475,0,0,1,2.32-1.63c1.63,0,2.29,1.24,2.29,3.06v7.24h4.52v-7.76Z" transform="translate(-3102.78 -3221.16)"/>
-</svg>

package/lib/0494d4103772511cf11590e5e6d92ecf.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20.45" viewBox="0 0 20.45 22">
-    <path class="a" d="M17.9,10.758a4.785,4.785,0,0,0,4.78-4.79c0-2.646-9.56-2.646-9.56,0A4.785,4.785,0,0,0,17.9,10.758Z" transform="translate(-7.678 -3.984)"/>
-    <path class="a" d="M17.685,17.7l0,0a.39.39,0,0,1,0-.735l0,0a10.277,10.277,0,0,0,6.7-8.671q.024-.252.035-.508a.44.44,0,0,0-.438-.459H22.368a.435.435,0,0,0-.434.413q-.013.24-.04.476a7.753,7.753,0,0,1-15.408,0q-.027-.236-.04-.476a.435.435,0,0,0-.434-.413H4.4a.44.44,0,0,0-.438.459q.011.256.035.508a10.277,10.277,0,0,0,6.7,8.671l0,0a.39.39,0,0,1,0,.735l0,0A10.277,10.277,0,0,0,4,26.369q-.024.252-.035.508a.44.44,0,0,0,.438.459H6.013a.435.435,0,0,0,.434-.413q.013-.24.04-.476a7.771,7.771,0,0,1,7.7-6.882h0a7.771,7.771,0,0,1,7.7,6.882q.027.236.04.476a.435.435,0,0,0,.434.413h1.609a.44.44,0,0,0,.438-.459q-.011-.256-.035-.508A10.277,10.277,0,0,0,17.685,17.7Z" transform="translate(-3.965 -5.337)"/>
-</svg>

package/lib/04d1baa25fecec12cb3d5afbe2275c66.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 9h24v6h-24z"/></svg>

package/lib/077dc132a657b8d72f09112ca29aecf4.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.983 6.021">
-    <path d="M1795.1,1135.7l4.66,4.217a.338.338,0,0,0,.462,0l4.66-4.217a.266.266,0,0,0,0-.417l-.5-1.2a.327.327,0,0,0-.231-.091.319.319,0,0,0-.227.091l-3.934,3.557-3.932-3.557a.334.334,0,0,0-.457,0l-.5,1.2a.266.266,0,0,0,0,.417Z" transform="translate(-1795.001 -1133.985)"/>
-</svg>

package/lib/0781b0cddf63f010838327756278be56.svg

@@ -1,58 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 139.5 48.1" style="enable-background:new 0 0 139.5 48.1;" xml:space="preserve">
-<path fill="#A2A2A2" d="M138,30.7C138,30.7,138,30.7,138,30.7C138,30.8,138,30.8,138,30.7C138,30.8,138,30.8,138,30.7
-	C138,30.8,138,30.8,138,30.7C138,30.8,138,30.8,138,30.7C138,30.8,138,30.8,138,30.7l-0.2,0.1v0.5c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0
-	c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0v-0.5h-0.2c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0
-	c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0L138,30.7C138,30.7,138,30.7,138,30.7C138,30.7,138,30.7,138,30.7z M138.8,30.8
-	C138.8,30.8,138.8,30.7,138.8,30.8C138.8,30.7,138.8,30.7,138.8,30.8C138.8,30.7,138.8,30.7,138.8,30.8l-0.1,0c0,0,0,0,0,0
-	c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0l-0.1,0.4h0l-0.1-0.4c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0h-0.1c0,0,0,0,0,0
-	c0,0,0,0,0,0v0.6c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0v-0.5l0.2,0.5
-	c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0l0.2-0.5v0.5c0,0,0,0,0,0s0,0,0,0
-	c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0L138.8,30.8C138.8,30.8,138.8,30.8,138.8,30.8z M39.5,33.1
-	c-1.5-0.4-2.6-0.6-2.6-1.5c0-0.8,0.7-1.3,1.9-1.3c1.3,0,2.6,0.5,3.6,1.3c0,0,0,0,0,0c0.1,0.1,0.2,0,0.3,0l1.3-1.7
-	c0.1-0.1,0.1-0.2,0-0.3c-1.4-1.2-3.2-1.8-5-1.7c-3.1,0-5,1.8-5,3.9c0,2.9,2.7,3.5,4.9,4c1.5,0.4,2.6,0.7,2.6,1.7
-	c0,0.7-0.7,1.5-2.3,1.5c-1.5,0-2.9-0.6-4-1.6c0,0,0,0,0,0c-0.1-0.1-0.2,0-0.3,0l-1.3,1.8c-0.1,0.1,0,0.2,0,0.3c1.5,1.3,3.4,2,5.4,2
-	c3.5,0,5.2-1.8,5.2-4.2C44.4,34.2,41.7,33.6,39.5,33.1z M55.3,36.6V37c0,0.1-0.1,0.2-0.2,0.2h-6.9c0.2,1.5,1.6,2.7,4,2
-	c0.3-0.1,0.7-0.3,0.9-0.5c0.1-0.1,0.3-0.1,0.4,0c0,0,0,0,0,0l0.8,1.2c0,0.1,0,0.2,0,0.2c-1.1,0.8-2.4,1.3-3.8,1.2
-	c-2.6,0.1-4.9-1.9-5-4.5c0-0.2,0-0.3,0-0.5c-0.1-2.7,2-4.9,4.7-5c0.1,0,0.1,0,0.2,0C53.3,31.4,55.3,33.5,55.3,36.6z M52.8,35.4
-	C52.8,35.4,52.8,35.4,52.8,35.4c-0.1-1.2-1.1-2.1-2.3-2c-1.2,0-2.2,0.8-2.3,2c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0L52.8,35.4
-	C52.8,35.4,52.8,35.4,52.8,35.4z M59.6,27.8h-2.1c-0.1,0-0.2,0.1-0.2,0.2v13.1c0,0.1,0.1,0.2,0.2,0.2h2.1c0,0,0,0,0,0
-	c0.1,0,0.2-0.1,0.2-0.2V28c0,0,0,0,0,0C59.8,27.9,59.7,27.8,59.6,27.8z M66.2,27.8c-0.1,0-0.3,0-0.4,0c-1.7,0.1-2.9,1.6-2.8,3.3v0.8
-	h-1.5c0,0,0,0,0,0V34c0,0,0,0,0,0H63l0,7.2c0,0,0,0,0,0h2.4c0,0,0,0,0,0V34h1.9c0,0,0,0,0,0v-2.1c0,0,0,0,0,0h-1.9v-0.7
-	c0-0.9,0.5-1.4,1.2-1.4c0.3,0,0.5,0.1,0.8,0.2c0,0,0,0,0,0c0,0,0,0,0,0l0.5-1.7c0,0,0,0,0,0C67.5,27.9,66.8,27.8,66.2,27.8z
-	 M81.3,34c0,0.2,0,0.4,0,0.6c0.1,3.6-2.7,6.6-6.3,6.7c-0.2,0-0.4,0-0.6,0h-4.9c-0.1,0-0.2-0.1-0.2-0.2V28c0-0.1,0.1-0.2,0.2-0.2h4.9
-	C78,27.6,81.1,30.4,81.3,34z M78.4,34.8c0-0.1,0-0.1,0-0.2c0.2-2.2-1.5-4.1-3.7-4.3c-0.1,0-0.3,0-0.4,0h-2.1c-0.1,0-0.2,0.1-0.2,0.2
-	v8.1c0,0.1,0.1,0.2,0.2,0.2l2.1,0C76.6,38.9,78.4,37,78.4,34.8z M92.2,36.6v0.5h-7c0.2,1.3,1.4,2.3,2.7,2.2c0.9,0,1.8-0.3,2.5-0.9
-	c0,0,0,0,0.1,0c0,0,0,0,0,0l1,1.5c0,0,0,0,0,0.1c-1.1,0.9-2.5,1.3-3.9,1.3c-2.6,0.1-4.9-1.9-5-4.5c0-0.2,0-0.3,0-0.5
-	c-0.1-2.7,2-4.9,4.7-5c0.1,0,0.1,0,0.2,0C90.3,31.4,92.2,33.5,92.2,36.6z M89.8,35.4C89.8,35.4,89.8,35.4,89.8,35.4
-	c-0.1-1.2-1.1-2.1-2.3-2.1c0,0,0,0,0,0c-1.2,0-2.2,0.9-2.3,2c0,0,0,0,0,0c0,0,0,0,0,0L89.8,35.4C89.8,35.4,89.8,35.4,89.8,35.4z
-	 M100.9,38.2C100.9,38.1,100.9,38.1,100.9,38.2c-0.1,0-0.1,0-0.2,0c-0.5,0.6-1.2,0.9-1.9,0.9c-0.1,0-0.2,0-0.2,0
-	c-1.4-0.1-2.4-1.4-2.3-2.8c0-0.1,0-0.2,0-0.3c0-1.4,1.2-2.5,2.6-2.5c0.8,0,1.5,0.3,1.9,0.9c0,0,0,0,0,0c0,0,0.1,0,0.2,0l1.5-1.4
-	c0,0,0-0.1,0-0.1c-0.9-1.1-2.3-1.7-3.7-1.6c-0.4,0-0.9,0-1.3,0.1c-2.6,0.6-4.2,3.3-3.6,5.9c0.4,2.1,2.1,3.7,4.2,3.9
-	c1.6,0.3,3.3-0.3,4.4-1.6c0,0,0-0.1,0-0.1L100.9,38.2z M113.7,36.3c0,2.8-2.2,5-5,5c-2.8,0-5-2.2-5-5c0-2.8,2.2-5,5-5
-	C111.4,31.3,113.7,33.6,113.7,36.3z M109,33.6c-1.3-0.2-2.6,0.8-2.7,2.1c0,0.2,0,0.4,0,0.6c-0.2,1.3,0.8,2.6,2.1,2.7
-	c1.3,0.2,2.6-0.8,2.7-2.1c0-0.2,0-0.4,0-0.6C111.2,35,110.3,33.8,109,33.6z M124.8,28v13.1c0,0.1-0.1,0.2-0.2,0.2h-2.1
-	c-0.1,0-0.2-0.1-0.2-0.2v-1.2c-0.7,0.9-1.8,1.4-2.9,1.4c-2.4,0-4.2-1.8-4.2-5c0-3.1,1.8-5,4.2-5c1.1,0,2.2,0.5,2.9,1.4V28
-	c0-0.1,0.1-0.2,0.2-0.2h2.1C124.7,27.8,124.8,27.9,124.8,28z M122.2,34.7c-0.5-0.7-1.3-1.1-2.2-1.1c-1.4,0-2.4,1.2-2.4,2.5
-	c0,0.1,0,0.2,0,0.2c-0.2,1.4,0.8,2.6,2.2,2.7c0.1,0,0.1,0,0.2,0c0.8,0,1.6-0.4,2.2-1.1V34.7z M136.5,36.6v0.5h-7
-	c0.2,1.3,1.4,2.3,2.7,2.2c0.9,0,1.8-0.3,2.5-0.9l1.1,1.6c-1.1,0.9-2.5,1.4-3.9,1.3c-2.6,0.1-4.9-1.9-5-4.5c0-0.2,0-0.3,0-0.5
-	c-0.1-2.7,2-4.9,4.7-4.9c0.1,0,0.1,0,0.2,0C134.6,31.4,136.5,33.5,136.5,36.6z M134.1,35.4c0-1.2-1.1-2.1-2.3-2.1c0,0,0,0-0.1,0
-	c-1.2,0-2.2,0.9-2.3,2.1H134.1z M12.7,29.2c3.3,0,5.9-2.7,5.9-5.9c0,0,0,0,0,0c0-3.3-11.9-3.3-11.9,0C6.8,26.5,9.4,29.2,12.7,29.2z
-	 M17.1,35.2L17.1,35.2c4.6-1.7,7.9-5.9,8.3-10.8c0-0.2,0-0.4,0-0.6c0-0.3-0.2-0.6-0.5-0.6c0,0,0,0,0,0h-2c-0.3,0-0.5,0.2-0.5,0.5
-	c0,0.2,0,0.4,0,0.6c-0.6,5.3-5.4,9.1-10.7,8.5c-4.5-0.5-8-4-8.5-8.5c0-0.2,0-0.4,0-0.6c0-0.3-0.3-0.5-0.5-0.5h-2
-	c-0.3,0-0.5,0.2-0.5,0.5c0,0,0,0,0,0c0,0.2,0,0.4,0,0.6c0.5,4.9,3.7,9.1,8.3,10.8h0c0.3,0.1,0.4,0.4,0.3,0.6c0,0.1-0.2,0.3-0.3,0.3
-	C3.8,37.8,0.5,42,0,46.9c0,0.2,0,0.4,0,0.6c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0h2c0.3,0,0.5-0.2,0.5-0.5c0-0.2,0-0.4,0-0.6
-	c0.6-4.9,4.7-8.5,9.6-8.5c4.9,0,9,3.7,9.6,8.5c0,0.2,0,0.4,0,0.6c0,0.3,0.3,0.5,0.5,0.5h2c0.3,0,0.5-0.2,0.5-0.5c0,0,0,0,0,0
-	c0-0.2,0-0.4,0-0.6c-0.5-4.9-3.7-9.1-8.3-10.8c-0.3-0.1-0.4-0.4-0.3-0.6C16.8,35.3,16.9,35.2,17.1,35.2z M1.7,9h-1V2.3h2.8
-	c1.4,0,2.1,0.9,2.1,2s-0.8,2-2.1,2H1.7V9z M1.7,5.6h1.7c0.7,0,1.2-0.5,1.2-1.2c0-0.7-0.5-1.2-1.2-1.2H1.7V5.6z M7.4,5.7
-	c0-2,1.4-3.4,3.4-3.4s3.4,1.5,3.4,3.4s-1.4,3.4-3.4,3.4S7.4,7.7,7.4,5.7z M8.5,5.7c0,1.5,0.9,2.6,2.3,2.6c1.4,0,2.3-1.1,2.3-2.6
-	c0-1.5-0.9-2.6-2.3-2.6C9.4,3.1,8.5,4.2,8.5,5.7z M18.5,9l1.4-5.1L21.3,9h1.1l1.9-6.7h-1.1l-1.4,5.3l-1.4-5.3h-0.8L18,7.7l-1.4-5.3
-	h-1.1L17.4,9H18.5z M26.1,9h4.5V8.1h-3.5V6h3.4V5.2h-3.4V3.2h3.5V2.3h-4.5V9z M33.8,9h-1V2.3h2.8c1.3,0,2.1,0.8,2.1,2
-	c0,1.2-0.8,1.8-1.7,1.9L37.8,9h-1.2l-1.6-2.6h-1.2V9z M33.8,5.6h1.7c0.7,0,1.2-0.5,1.2-1.2c0-0.7-0.5-1.2-1.2-1.2h-1.7V5.6z M40,9
-	h4.5V8.1H41V6h3.4V5.2H41V3.2h3.5V2.3H40V9z M49.1,9h-2.4V2.3h2.4c2.1,0,3.5,1.4,3.5,3.3C52.6,7.6,51.2,9,49.1,9z M47.7,8.1h1.4
-	c1.5,0,2.4-1.1,2.4-2.4c0-1.4-0.9-2.5-2.4-2.5h-1.4V8.1z M61.6,9h-3.2V2.3h3.1c1.2,0,1.9,0.7,1.9,1.7c0,0.8-0.5,1.4-1.2,1.5
-	c0.7,0.1,1.3,0.8,1.3,1.6C63.5,8.2,62.8,9,61.6,9z M59.4,5.2h1.9c0.7,0,1-0.4,1-1s-0.4-1-1-1h-1.9V5.2z M61.3,8.1
-	c0.7,0,1.1-0.4,1.1-1c0-0.5-0.4-1-1.1-1h-2v2.1H61.3z M69.8,2.3l-1.9,3l-2-3h-1.1l2.6,3.9V9h1V6.2L71,2.3H69.8z"/>
-</svg>

package/lib/1466cc434ae48bd9e2be60af284743f7.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
-  <path  d="M3060.99,3222.39a2.661,2.661,0,0,0-2.66-2.39h-17.66a2.592,2.592,0,0,0-.48.04,2.649,2.649,0,0,0-2.19,2.66v17.59a3.4,3.4,0,0,0,.03.45,2.643,2.643,0,0,0,2.59,2.26h17.76c0.1,0,.2-0.01.31-0.02a2.641,2.641,0,0,0,2.31-2.6v-17.76A1.848,1.848,0,0,0,3060.99,3222.39Zm-11.49,4.69a4.42,4.42,0,1,1-4.42,4.42A4.415,4.415,0,0,1,3049.5,3227.08Zm8.85,2.77v9.53a0.891,0.891,0,0,1-.96.97h-15.8a0.882,0.882,0,0,1-.93-0.93c-0.01-3.19,0-6.39,0-9.58v-0.1h1.99a7.072,7.072,0,0,0,3.39,7.94,7.059,7.059,0,0,0,7.44-.33,7.064,7.064,0,0,0,2.87-7.61h2v0.11Zm0-3.68a0.883,0.883,0,0,1-.91.91h-2.61a0.873,0.873,0,0,1-.9-0.88c-0.01-.89-0.01-1.78,0-2.66a0.868,0.868,0,0,1,.9-0.88c0.87-.01,1.75-0.01,2.62,0a0.878,0.878,0,0,1,.9.9v2.61Z" transform="translate(-3038 -3220)"/>
-</svg>