@selfdecode/sd-component-library 4.0.106 → 4.0.108

package/lib/sd-component-library98.js

@@ -1,49 +1,61 @@
-import { j as n } from "./sd-component-library197.js";
-import { Box as h } from "rebass";
-import { GridContainerV2 as u } from "./sd-component-library39.js";
-const f = (c) => {
+import { j as a } from "./sd-component-library198.js";
+import { Box as d } from "rebass";
+import { BaseGridContainer as g } from "./sd-component-library37.js";
+const f = (h) => {
   const {
-    value: i,
-    activeColor: l = "cl_purple",
-    maxValue: r = 5,
-    heightPx: o = 25,
-    gap: p = "3px",
-    inactiveColor: d = "cl_grey",
-    barWidth: a = "5px",
-    minHeight: e = 0,
-    ...m
-  } = c, s = [];
-  for (let t = 0; t < r; t++) {
-    const x = t < i ? l : d, g = e ? (o - e) / (r - 1) * t + e : o / r * (t + 1);
-    s.push(
-      /* @__PURE__ */ n.jsx(
-        h,
-        {
-          "data-testid": t < i ? "single-bar-active" : "single-bar-inactive",
-          sx: {
-            width: a,
-            borderRadius: `calc(${a} / 2)`,
-            height: `${g}px`,
-            backgroundColor: x
-          }
-        },
-        t
-      )
-    );
-  }
-  return /* @__PURE__ */ n.jsx(
-    u,
+    value: e,
+    vertical: r,
+    gap: o = ["5px"],
+    width: p,
+    dashWidth: c = "18px",
+    verticalDashWidth: l = "11px",
+    dashHeight: n = "6px",
+    verticalDashHeight: m = "5px",
+    dashBorderRadius: s = "2px",
+    activeColor: i = "cl_purple",
+    ...x
+  } = h;
+  return /* @__PURE__ */ a.jsx(
+    g,
     {
-      "data-testid": "bars-meter",
-      alignItems: "end",
-      gridTemplateColumns: [`repeat(${r}, max-content)`],
-      gap: p,
-      ...m,
-      children: s
+      width: p,
+      gap: o,
+      gridTemplateColumns: [
+        r ? "max-content" : "repeat(5, max-content)"
+      ],
+      ...x,
+      "data-testid": "dashed-meter",
+      children: Array(5).fill("").map(
+        (v, t) => r ? /* @__PURE__ */ a.jsx(
+          d,
+          {
+            sx: {
+              height: m,
+              width: l,
+              borderRadius: s,
+              bg: e < 5 - t ? "cl_grey" : i
+            },
+            "data-testid": e < 5 - t ? "dash-inactive" : "dash-active"
+          },
+          t
+        ) : /* @__PURE__ */ a.jsx(
+          d,
+          {
+            sx: {
+              height: n,
+              width: c,
+              borderRadius: s,
+              bg: e <= t ? "cl_grey" : i
+            },
+            "data-testid": e <= t ? "dash-inactive" : "dash-active"
+          },
+          t
+        )
+      )
     }
   );
 };
 export {
-  f as BarsMeter
+  f as DashedMeter
 };
 //# sourceMappingURL=sd-component-library98.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library98.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;"}
+{"version":3,"file":"sd-component-library98.js","sources":["../src/components/meters/dashed-meter/dashed-meter.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { BaseGridContainer } from \"../../containers/grid-containers/base-grid-container\";\nimport { DashedMeterProps as Props } from \"./interfaces\";\n\nexport const DashedMeter: React.FC<Props> = (props) => {\n  const {\n    value,\n    vertical,\n    gap = [\"5px\"],\n    width,\n    dashWidth = \"18px\",\n    verticalDashWidth = \"11px\",\n    dashHeight = \"6px\",\n    verticalDashHeight = \"5px\",\n    dashBorderRadius = \"2px\",\n    activeColor = \"cl_purple\",\n    ...baseProps\n  } = props;\n  return (\n    <BaseGridContainer\n      width={width}\n      gap={gap}\n      gridTemplateColumns={[\n        vertical ? \"max-content\" : \"repeat(5, max-content)\",\n      ]}\n      {...baseProps}\n      data-testid=\"dashed-meter\"\n    >\n      {Array(5)\n        .fill(\"\")\n        .map((_, idx) =>\n          vertical ? (\n            <Box\n              key={idx}\n              sx={{\n                height: verticalDashHeight,\n                width: verticalDashWidth,\n                borderRadius: dashBorderRadius,\n                bg: value < 5 - idx ? \"cl_grey\" : activeColor,\n              }}\n              data-testid={value < 5 - idx ? \"dash-inactive\" : \"dash-active\"}\n            />\n          ) : (\n            <Box\n              key={idx}\n              sx={{\n                height: dashHeight,\n                width: dashWidth,\n                borderRadius: dashBorderRadius,\n                bg: value <= idx ? \"cl_grey\" : activeColor,\n              }}\n              data-testid={value <= idx ? \"dash-inactive\" : \"dash-active\"}\n            />\n          )\n        )}\n    </BaseGridContainer>\n  );\n};\n"],"names":["DashedMeter","props","value","vertical","gap","width","dashWidth","verticalDashWidth","dashHeight","verticalDashHeight","dashBorderRadius","activeColor","baseProps","jsx","BaseGridContainer","_","idx","Box"],"mappings":";;;AAOa,MAAAA,IAA+B,CAACC,MAAU;AAC/C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,KAAAC,IAAM,CAAC,KAAK;AAAA,IACZ,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,IACpB,YAAAC,IAAa;AAAA,IACb,oBAAAC,IAAqB;AAAA,IACrB,kBAAAC,IAAmB;AAAA,IACnB,aAAAC,IAAc;AAAA,IACd,GAAGC;AAAA,EACD,IAAAX;AAEF,SAAAY,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACA,KAAAD;AAAA,MACA,qBAAqB;AAAA,QACnBD,IAAW,gBAAgB;AAAA,MAC7B;AAAA,MACC,GAAGS;AAAA,MACJ,eAAY;AAAA,MAEX,UAAM,MAAA,CAAC,EACL,KAAK,EAAE,EACP;AAAA,QAAI,CAACG,GAAGC,MACPb,IACEU,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YAEC,IAAI;AAAA,cACF,QAAQR;AAAA,cACR,OAAOF;AAAA,cACP,cAAcG;AAAA,cACd,IAAIR,IAAQ,IAAIc,IAAM,YAAYL;AAAA,YACpC;AAAA,YACA,eAAaT,IAAQ,IAAIc,IAAM,kBAAkB;AAAA,UAAA;AAAA,UAP5CA;AAAA,QAAA,IAUPH,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YAEC,IAAI;AAAA,cACF,QAAQT;AAAA,cACR,OAAOF;AAAA,cACP,cAAcI;AAAA,cACd,IAAIR,KAASc,IAAM,YAAYL;AAAA,YACjC;AAAA,YACA,eAAaT,KAASc,IAAM,kBAAkB;AAAA,UAAA;AAAA,UAPzCA;AAAA,QAQP;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAGR;"}

package/lib/sd-component-library99.js

@@ -1,72 +1,49 @@
-import { j as o } from "./sd-component-library197.js";
-import { Box as j } from "rebass";
-import { isPDFFlow as g } from "./sd-component-library4.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,
-  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",
+import { j as n } from "./sd-component-library198.js";
+import { Box as h } from "rebass";
+import { GridContainerV2 as u } from "./sd-component-library40.js";
+const f = (c) => {
+  const {
+    value: i,
+    activeColor: l = "cl_purple",
+    maxValue: r = 5,
+    heightPx: o = 25,
+    gap: p = "3px",
+    inactiveColor: d = "cl_grey",
+    barWidth: a = "5px",
+    minHeight: e = 0,
+    ...m
+  } = c, s = [];
+  for (let t = 0; t < r; t++) {
+    const x = t < i ? l : d, g = e ? (o - e) / (r - 1) * t + e : o / r * (t + 1);
+    s.push(
+      /* @__PURE__ */ n.jsx(
+        h,
         {
-          ...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 })
-          ]
-        }
+          "data-testid": t < i ? "single-bar-active" : "single-bar-inactive",
+          sx: {
+            width: a,
+            borderRadius: `calc(${a} / 2)`,
+            height: `${g}px`,
+            backgroundColor: x
+          }
+        },
+        t
       )
+    );
+  }
+  return /* @__PURE__ */ n.jsx(
+    u,
+    {
+      "data-testid": "bars-meter",
+      alignItems: "end",
+      gridTemplateColumns: [`repeat(${r}, max-content)`],
+      gap: p,
+      ...m,
+      children: s
     }
   );
 };
 export {
-  E as DonutDiagram
+  f as BarsMeter
 };
 //# sourceMappingURL=sd-component-library99.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library99.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;"}
+{"version":3,"file":"sd-component-library99.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selfdecode/sd-component-library",
-  "version": "4.0.106",
+  "version": "4.0.108",
   "private": false,
   "license": "MIT",
   "files": [
@@ -17,7 +17,6 @@
     "history": "^4.10.1",
     "react-app-polyfill": "^3.0.0",
     "react-contenteditable": "^3.3.6",
-    "react-dev-utils": "^12.0.1",
     "react-refresh": "^0.11.0",
     "react-transition-group": "^4.4.1",
     "resolve": "^1.20.0",
@@ -65,13 +64,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",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -93,7 +92,7 @@
     "copyfiles": "^2.3.0",
     "eslint": "^8.3.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.8.0",
     "file-loader": "^6.2.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",
@@ -106,11 +105,11 @@
     "react-docgen-typescript": "^1.18.0",
     "sass": "^1.52.1",
     "shelljs": "^0.8.4",
-    "storybook": "^7.4.0",
+    "storybook": "^8.1.10",
     "tailwindcss": "^3.0.2",
     "typescript": "4.6.4",
     "vite": "^4.4.2",
-    "vite-plugin-dts": "^3.4.0",
+    "vite-plugin-dts": "3.9.1",
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "^0.33.0"
   },