@clubmed/trident-ui 1.1.0-beta.1 → 1.1.0-beta.3

package/molecules/Forms/TextField.js

@@ -1,13 +1,13 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { c as u } from "../../index-Cu0xwYjD.js";
-import { useValue as k } from "../../hooks/useValue.js";
-import { useInternalStatus as F } from "../../hooks/useInternalStatus.js";
-import { FormControl as S } from "./FormControl.js";
-import { Icon as o } from "../../atoms/Icons/Icon.js";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { c as m } from "../../index-Cu0xwYjD.js";
+import { useValue as F } from "../../hooks/useValue.js";
+import { useInternalStatus as S } from "../../hooks/useInternalStatus.js";
+import { FormControl as j } from "./FormControl.js";
+import { Icon as i } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-import { useId as j } from "react";
-const B = (m) => {
-  const p = j(), {
+import { useId as D } from "react";
+const E = (u) => {
+  const p = D(), {
     id: t = p,
     name: a = t,
     label: x,
@@ -23,13 +23,14 @@ const B = (m) => {
     className: v,
     dataTestId: y = "TextField",
     onChange: w,
-    ...N
-  } = m, { value: C, setValue: I } = k({ name: a, initialValue: b, onChange: w }), e = F({
+    formatter: N,
+    ...C
+  } = u, { value: I, setValue: T } = F({ name: a, initialValue: b, onChange: w, formatter: N }), e = S({
     isDisabled: l,
     validationStatus: n
   });
   return /* @__PURE__ */ r(
-    S,
+    j,
     {
       id: t,
       label: x,
@@ -42,18 +43,18 @@ const B = (m) => {
       hideRequiredStar: g,
       validationStatus: n,
       errorMessage: h,
-      children: /* @__PURE__ */ i("div", { className: "relative", children: [
+      children: /* @__PURE__ */ o("div", { className: "relative", children: [
         /* @__PURE__ */ r(
           "input",
           {
-            ...N,
+            ...C,
             id: t,
             name: a,
             disabled: l,
             required: c,
-            value: C,
-            onChange: (T) => I(T.target.value),
-            className: u(
+            value: I,
+            onChange: (k) => T(k.target.value),
+            className: m(
               "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none",
               {
                 "border-lightGrey focus:border-black active:border-black": e === "default",
@@ -68,10 +69,10 @@ const B = (m) => {
             "aria-label": a
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: u(
+            className: m(
               "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
               {
                 "text-grey": e === "disabled",
@@ -80,10 +81,10 @@ const B = (m) => {
               }
             ),
             children: [
-              s && /* @__PURE__ */ r(o, { name: s, width: "24px" }),
-              /* @__PURE__ */ i("span", { className: "ms-auto flex gap-x-8", children: [
-                e === "error" && /* @__PURE__ */ r(o, { name: "CrossDefault", width: "24px", type: d }),
-                e === "success" && /* @__PURE__ */ r(o, { name: "CheckDefault", width: "24px", type: d })
+              s && /* @__PURE__ */ r(i, { name: s, width: "24px" }),
+              /* @__PURE__ */ o("span", { className: "ms-auto flex gap-x-8", children: [
+                e === "error" && /* @__PURE__ */ r(i, { name: "CrossDefault", width: "24px", type: d }),
+                e === "success" && /* @__PURE__ */ r(i, { name: "CheckDefault", width: "24px", type: d })
               ] })
             ]
           }
@@ -93,6 +94,6 @@ const B = (m) => {
   );
 };
 export {
-  B as TextField
+  E as TextField
 };
 //# sourceMappingURL=TextField.js.map

package/molecules/Forms/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../lib/molecules/Forms/TextField.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, FormControlProps } from './FormControl.js';\nimport { Icon, IconicNames, IconicTypes } from '@/atoms/Icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    onChange,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'ps-[52px]': icon,\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["TextField","props","internalId","useId","id","name","label","initialValue","description","validationStatus","icon","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","e","classnames","Icon"],"mappings":";;;;;;;;AAea,MAAAA,IAAY,CAAkBC,MAAiC;AAC1E,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAlB,GAEE,EAAE,OAAAmB,GAAO,UAAAC,MAAaC,EAAgB,EAAE,MAAAjB,GAAM,cAAAE,GAAc,UAAAW,EAAA,CAAU,GACtEK,IAAiBC,EAAkB;AAAA,IACvC,YAAYX;AAAA,IACZ,kBAAAJ;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAtB;AAAA,MACA,OAAAE;AAAA,MACA,WAAAU;AAAA,MACA,aAAAR;AAAA,MACA,UAAS;AAAA,MACT,YAAAS;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAN;AAAA,MACA,cAAAG;AAAA,MAEA,UAAA,gBAAAe,EAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGN;AAAA,YACJ,IAAAf;AAAA,YACA,MAAAC;AAAA,YACA,UAAAQ;AAAA,YACA,UAAAC;AAAA,YACA,OAAAM;AAAA,YACA,UAAU,CAACQ,MAAMP,EAASO,EAAE,OAAO,KAAc;AAAA,YACjD,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,2DACEN,MAAmB;AAAA,gBACrB,aAAab;AAAA,gBACb,aAAaa,MAAmB,WAAWA,MAAmB;AAAA,gBAC9D,uBAAuBA,MAAmB;AAAA,gBAC1C,sBAAsBA,MAAmB;AAAA,gBACzC,cAAcA,MAAmB;AAAA,gBACjC,gBAAgBA,MAAmB;AAAA,cACrC;AAAA,YACF;AAAA,YACA,cAAYlB;AAAA,UAAA;AAAA,QACd;AAAA,QAEA,gBAAAsB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA;AAAA,gBACE,aAAaN,MAAmB;AAAA,gBAChC,YAAYA,MAAmB;AAAA,gBAC/B,cAAcA,MAAmB;AAAA,cACnC;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,cAAAb,KAAS,gBAAAe,EAAAK,GAAA,EAAK,MAAMpB,GAAM,OAAM,QAAO;AAAA,cAExC,gBAAAiB,EAAC,QAAK,EAAA,WAAU,wBACb,UAAA;AAAA,gBAAmBJ,MAAA,6BACjBO,GAAK,EAAA,MAAK,gBAAe,OAAM,QAAO,MAAMnB,EAAU,CAAA;AAAA,gBAGxDY,MAAmB,aACjB,gBAAAE,EAAAK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMnB,EAAU,CAAA;AAAA,cAAA,GAE3D;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TextField.js","sources":["../../../lib/molecules/Forms/TextField.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue, UseValueProps } from '@/hooks/useValue';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { FormControl, FormControlProps } from './FormControl.js';\nimport { Icon, IconicNames, IconicTypes } from '@/atoms/Icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'ps-[52px]': icon,\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl text-grey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["TextField","props","internalId","useId","id","name","label","initialValue","description","validationStatus","icon","iconType","errorMessage","disabled","required","hideRequiredStar","className","dataTestId","onChange","formatter","rest","value","setValue","useValue","internalStatus","useInternalStatus","jsx","FormControl","jsxs","e","classnames","Icon"],"mappings":";;;;;;;;AAgBa,MAAAA,IAAY,CAAkBC,MAAiC;AAC1E,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,OAAOC;AAAA,IACP,aAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAnB,GAEE,EAAE,OAAAoB,GAAO,UAAAC,EAAA,IAAaC,EAAgB,EAAE,MAAAlB,GAAM,cAAAE,GAAc,UAAAW,GAAU,WAAAC,EAAA,CAAW,GACjFK,IAAiBC,EAAkB;AAAA,IACvC,YAAYZ;AAAA,IACZ,kBAAAJ;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAvB;AAAA,MACA,OAAAE;AAAA,MACA,WAAAU;AAAA,MACA,aAAAR;AAAA,MACA,UAAS;AAAA,MACT,YAAAS;AAAA,MACA,UAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAN;AAAA,MACA,cAAAG;AAAA,MAEA,UAAA,gBAAAgB,EAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGN;AAAA,YACJ,IAAAhB;AAAA,YACA,MAAAC;AAAA,YACA,UAAAQ;AAAA,YACA,UAAAC;AAAA,YACA,OAAAO;AAAA,YACA,UAAU,CAACQ,MAAMP,EAASO,EAAE,OAAO,KAAc;AAAA,YACjD,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,2DACEN,MAAmB;AAAA,gBACrB,aAAad;AAAA,gBACb,aAAac,MAAmB,WAAWA,MAAmB;AAAA,gBAC9D,uBAAuBA,MAAmB;AAAA,gBAC1C,sBAAsBA,MAAmB;AAAA,gBACzC,cAAcA,MAAmB;AAAA,gBACjC,gBAAgBA,MAAmB;AAAA,cACrC;AAAA,YACF;AAAA,YACA,cAAYnB;AAAA,UAAA;AAAA,QACd;AAAA,QAEA,gBAAAuB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA;AAAA,gBACE,aAAaN,MAAmB;AAAA,gBAChC,YAAYA,MAAmB;AAAA,gBAC/B,cAAcA,MAAmB;AAAA,cACnC;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,cAAAd,KAAS,gBAAAgB,EAAAK,GAAA,EAAK,MAAMrB,GAAM,OAAM,QAAO;AAAA,cAExC,gBAAAkB,EAAC,QAAK,EAAA,WAAU,wBACb,UAAA;AAAA,gBAAmBJ,MAAA,6BACjBO,GAAK,EAAA,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAU,CAAA;AAAA,gBAGxDa,MAAmB,aACjB,gBAAAE,EAAAK,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO,MAAMpB,EAAU,CAAA;AAAA,cAAA,GAE3D;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/HamburgerIcon.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { a as C, b as t } from "../react-spring_web.modern-BPtZcx1z.js";
+import { a as C, b as t } from "../react-spring_web.modern-DyRwH83_.js";
 const m = ({
   width: e = "24px",
   isActive: a = !1

package/molecules/Loader.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as l, jsxs as a } from "react/jsx-runtime";
-import { c as n, b as r } from "../react-spring_web.modern-BPtZcx1z.js";
+import { c as n, b as r } from "../react-spring_web.modern-DyRwH83_.js";
 import { Backdrop as o } from "./Backdrop.js";
 const h = /* @__PURE__ */ a("svg", { viewBox: "0 0 140 140", width: 140, children: [
   /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ l(

package/molecules/Popin.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { c as f, b as p, d as x } from "../react-spring_web.modern-BPtZcx1z.js";
+import { c as f, b as p, d as x } from "../react-spring_web.modern-DyRwH83_.js";
 import { Backdrop as h } from "./Backdrop.js";
 import { Button as u } from "./Buttons/Button.js";
 import { c as v } from "../index-Cu0xwYjD.js";

package/molecules/Tabs/TabsHeader.js

@@ -2,7 +2,7 @@
 import { jsx as r, jsxs as w } from "react/jsx-runtime";
 import { c as l } from "../../index-Cu0xwYjD.js";
 import { useRef as f, useEffect as v } from "react";
-import { a as b, b as h } from "../../react-spring_web.modern-BPtZcx1z.js";
+import { a as b, b as h } from "../../react-spring_web.modern-DyRwH83_.js";
 import { useActiveTabControl as L } from "./hooks/tabControl.js";
 const k = ({
   className: n,

package/molecules/Tabs/TabsHeading.js

@@ -2,7 +2,7 @@
 import { jsx as u, jsxs as B } from "react/jsx-runtime";
 import { c as d } from "../../index-Cu0xwYjD.js";
 import { useRef as m, useEffect as H, useCallback as r } from "react";
-import { b as I } from "../../react-spring_web.modern-BPtZcx1z.js";
+import { b as I } from "../../react-spring_web.modern-DyRwH83_.js";
 import { useActiveTab as _, useRegisterTabControl as z } from "./hooks/tabControl.js";
 import { getTheme as G } from "./theme.js";
 import { useSafeBoop as M } from "../../hooks/useSafeBoop.js";

package/molecules/Tabs/TabsPanel.js

@@ -2,7 +2,7 @@
 import { jsx as p } from "react/jsx-runtime";
 import { c as d } from "../../index-Cu0xwYjD.js";
 import { useRef as l, useEffect as f } from "react";
-import { a as b, b as u } from "../../react-spring_web.modern-BPtZcx1z.js";
+import { a as b, b as u } from "../../react-spring_web.modern-DyRwH83_.js";
 import { useActiveTab as y } from "./hooks/tabControl.js";
 const r = {
   opacity: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.0-beta.3",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -41,11 +41,6 @@
       "import": "./atoms/Icons/svg-use/index.js",
       "default": "./atoms/Icons/svg-use/index.js"
     },
-    "./atoms/Icons/fonts": {
-      "types": "./atoms/Icons/fonts/index.d.ts",
-      "import": "./atoms/Icons/fonts/index.js",
-      "default": "./atoms/Icons/fonts/index.js"
-    },
     "./molecules/Tabs": {
       "types": "./molecules/Tabs/index.d.ts",
       "import": "./molecules/Tabs/index.js",
@@ -125,18 +120,18 @@
     "@commitlint/cli": "18.6.1",
     "@commitlint/config-conventional": "18.6.2",
     "@netsells/storybook-mockdate": "^0.3.2",
-    "@storybook/addon-a11y": "8.0.8",
-    "@storybook/addon-actions": "8.0.8",
-    "@storybook/addon-essentials": "8.0.8",
-    "@storybook/addon-interactions": "8.0.8",
-    "@storybook/addon-links": "8.0.8",
-    "@storybook/addon-mdx-gfm": "8.0.8",
+    "@storybook/addon-a11y": "8.3.5",
+    "@storybook/addon-actions": "8.3.5",
+    "@storybook/addon-essentials": "8.3.5",
+    "@storybook/addon-interactions": "8.3.5",
+    "@storybook/addon-links": "8.3.5",
+    "@storybook/addon-mdx-gfm": "8.3.5",
     "@storybook/addon-styling": "1.3.7",
-    "@storybook/addon-viewport": "8.0.8",
-    "@storybook/blocks": "8.0.8",
-    "@storybook/react": "8.0.8",
-    "@storybook/react-vite": "8.0.8",
-    "@storybook/test": "8.0.8",
+    "@storybook/addon-viewport": "8.3.5",
+    "@storybook/blocks": "8.3.5",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-vite": "8.3.5",
+    "@storybook/test": "8.3.5",
     "@svgr/rollup": "8.1.0",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
@@ -148,7 +143,7 @@
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.3.1",
+    "@vitest/coverage-v8": "2.1.2",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.17",
     "change-case": "^5.4.3",
@@ -171,16 +166,16 @@
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "rollup-preserve-directives": "^1.1.1",
-    "storybook": "8.0.8",
+    "storybook": "8.3.5",
     "svgtofont": "^4.2.0",
     "tailwindcss": "^3.3.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
-    "vite": "^5.0.0",
+    "vite": "5.4.8",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "1.0.1",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.0.1"
+    "vitest": "^2.1.2"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",