@uva-glass/component-library 1.40.4 → 1.41.1

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -4,3 +4,4 @@ import { CheckboxProps } from './Checkbox';
 declare const _default: Meta<CheckboxProps>;
 export default _default;
 export declare const CheckboxExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxProps>;
+export declare const WithLongLabel: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxProps>;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -1,20 +1,37 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { f as m } from "../../index-0Faxlks_.js";
-import { Checkbox as e } from "./Checkbox.js";
-import { FormField as i } from "../FormField/FormField.js";
-import { Label as n } from "../Label/Label.js";
-const h = {
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { f as e } from "../../index-0Faxlks_.js";
+import { Checkbox as l } from "./Checkbox.js";
+import { FormField as t } from "../FormField/FormField.js";
+import { Label as i } from "../Label/Label.js";
+const x = {
   title: "Atoms/Checkbox",
-  component: e
-}, s = (r) => /* @__PURE__ */ t(i, { inline: !0, children: [
-  /* @__PURE__ */ o(e, { id: "72103b4d", ...r }),
-  /* @__PURE__ */ o(n, { htmlFor: "72103b4d", children: "Example Checkbox" })
-] }), c = s.bind({});
-c.args = {
-  onChange: m()
+  component: l
+}, r = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
+  /* @__PURE__ */ o(l, { id: "72103b4d", ...n }),
+  /* @__PURE__ */ o(i, { htmlFor: "72103b4d", children: "Example Checkbox" })
+] }), m = r.bind({});
+m.args = {
+  onChange: e()
+};
+const a = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
+  /* @__PURE__ */ o(
+    "div",
+    {
+      style: {
+        alignSelf: "flex-start",
+        marginTop: "0.18rem"
+      },
+      children: /* @__PURE__ */ o(l, { id: "72103b4e", ...n })
+    }
+  ),
+  /* @__PURE__ */ o(i, { htmlFor: "72103b4e", children: "Example Checkbox with long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long label" })
+] }), h = a.bind({});
+h.args = {
+  onChange: e()
 };
 export {
-  c as CheckboxExample,
-  h as default
+  m as CheckboxExample,
+  h as WithLongLabel,
+  x as default
 };
 //# sourceMappingURL=Checkbox.stories.js.map

package/dist/components/Checkbox/Checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Checkbox',\n  component: Checkbox,\n} as Meta<CheckboxProps>;\n\nconst Template: StoryFn<CheckboxProps> = (args) => (\n  <FormField inline>\n    <Checkbox id=\"72103b4d\" {...args} />\n    <Label htmlFor=\"72103b4d\">Example Checkbox</Label>\n  </FormField>\n);\n\nexport const CheckboxExample = Template.bind({});\nCheckboxExample.args = {\n  onChange: fn(),\n};\n"],"names":["Checkbox_stories","Checkbox","Template","args","jsxs","FormField","jsx","Label","CheckboxExample","fn"],"mappings":";;;;;AAWA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAAmC,CAACC,MACvC,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC,EAACL,GAAS,EAAA,IAAG,YAAY,GAAGE,EAAM,CAAA;AAAA,EACjC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAgB,oBAAA;AAAA,EAC5C,CAAA,GAGWC,IAAkBN,EAAS,KAAK,EAAE;AAC/CM,EAAgB,OAAO;AAAA,EACrB,UAAUC,EAAG;AACf;"}
+{"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Checkbox',\n  component: Checkbox,\n} as Meta<CheckboxProps>;\n\nconst Template: StoryFn<CheckboxProps> = (args) => (\n  <FormField inline>\n    <Checkbox id=\"72103b4d\" {...args} />\n    <Label htmlFor=\"72103b4d\">Example Checkbox</Label>\n  </FormField>\n);\n\nexport const CheckboxExample = Template.bind({});\nCheckboxExample.args = {\n  onChange: fn(),\n};\n\n// Extra story created for UX to see how we can solve placement of checkbox when paired with long content\n// TODO: should this component be refactored to always include a label? (see RadioButton)\nconst WithLongLabelTemplate: StoryFn<CheckboxProps> = (args) => (\n  <FormField inline>\n    <div\n      style={{\n        alignSelf: 'flex-start',\n        marginTop: '0.18rem',\n      }}\n    >\n      <Checkbox id=\"72103b4e\" {...args} />\n    </div>\n    <Label htmlFor=\"72103b4e\">\n      Example Checkbox with long long long long long long long long long long long long long long long long long long\n      long long long long long long long long long long long long long long long long long long long long long long long\n      long long long long long long long long long long long long long long long long long long long long long long long\n      long long long long long long long long long long long label\n    </Label>\n  </FormField>\n);\n\nexport const WithLongLabel = WithLongLabelTemplate.bind({});\nWithLongLabel.args = {\n  onChange: fn(),\n};\n"],"names":["Checkbox_stories","Checkbox","Template","args","jsxs","FormField","jsx","Label","CheckboxExample","fn","WithLongLabelTemplate","WithLongLabel"],"mappings":";;;;;AAWA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAAmC,CAACC,MACvC,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC,EAACL,GAAS,EAAA,IAAG,YAAY,GAAGE,EAAM,CAAA;AAAA,EACjC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAgB,oBAAA;AAAA,EAC5C,CAAA,GAGWC,IAAkBN,EAAS,KAAK,EAAE;AAC/CM,EAAgB,OAAO;AAAA,EACrB,UAAUC,EAAG;AACf;AAIA,MAAMC,IAAgD,CAACP,MACpD,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MAEA,UAAC,gBAAAA,EAAAL,GAAA,EAAS,IAAG,YAAY,GAAGE,GAAM;AAAA,IAAA;AAAA,EACpC;AAAA,EACC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAK1B,sZAAA;AAAA,EACF,CAAA,GAGWI,IAAgBD,EAAsB,KAAK,EAAE;AAC1DC,EAAc,OAAO;AAAA,EACnB,UAAUF,EAAG;AACf;"}

package/dist/components/Periods/Periods.d.ts

@@ -6,7 +6,7 @@ interface Period {
 }
 export interface PeriodsProps {
     periods: Period[] | number[];
-    maxPeriods?: number;
+    maxPeriods?: 6 | 7;
     titlePeriods?: Record<string, Record<string, string>>;
 }
 export declare const Periods: ({ periods, titlePeriods, maxPeriods }: PeriodsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Periods/Periods.js

@@ -1,35 +1,35 @@
 import { jsx as c } from "react/jsx-runtime";
-import { c as y } from "../../clsx-OuTLNxxd.js";
-import { useId as N } from "react";
-import '../../assets/Periods.css';const v = "_period__container_njyb6_3", j = "_period__item_njyb6_8", _ = {
-  period__container: v,
-  period__item: j,
-  "period__item--active": "_period__item--active_njyb6_20"
-}, A = 6, O = ({ periods: t, titlePeriods: a, maxPeriods: l = A }) => {
-  const u = Array.from({ length: l }, (e, r) => r + 1), p = N(), s = t.some((e) => typeof e == "number"), d = (e) => {
-    let r = 0;
-    return t.reduce((b, $, m) => {
-      const { semesterNumber: o, periodInSemester: n } = $;
+import { c as N } from "../../clsx-OuTLNxxd.js";
+import { useId as v } from "react";
+import '../../assets/Periods.css';const y = "_period__container_12tqn_3", A = "_period__item_12tqn_8", n = {
+  period__container: y,
+  period__item: A,
+  "period__item--active": "_period__item--active_12tqn_20"
+}, P = 6, x = ({ periods: r, titlePeriods: a, maxPeriods: l = P }) => {
+  const p = Array.from({ length: l }, (e, t) => t + 1), u = v(), _ = r.some((e) => typeof e == "number"), d = (e) => {
+    let t = 0;
+    return r.reduce(($, b, m) => {
+      const { semesterNumber: s, periodInSemester: o } = b;
       let i = "";
-      return o !== r ? i = ` ${e.periods["period-title"].replace("{{ semester }}", o.toString())} ${n}` : t[m + 1] && t[m + 1].semesterNumber === r ? i = `, ${n}` : i = ` ${e.periods["last-separator"]} ${n}`, r = o, `${b}${i}`;
-    }, "");
-  }, f = (e) => s ? t.includes(e) : !!t.find((r) => r.number === e);
+      return s !== t ? i = ` ${e.periods["period-title"].replace("{{ semester }}", s.toString())} ${o}` : r[m + 1] && r[m + 1].semesterNumber === t ? i = `, ${o}` : i = ` ${e.periods["last-separator"]} ${o}`, t = s, `${$}${i}`;
+    }, "").trim();
+  }, f = (e) => _ ? r.includes(e) : !!r.find((t) => t.number === e);
   return /* @__PURE__ */ c(
     "div",
     {
-      className: _.period__container,
-      title: s ? "" : d(a),
-      children: u.map((e) => /* @__PURE__ */ c(
+      className: n.period__container,
+      title: _ ? "" : d(a),
+      children: p.map((e) => /* @__PURE__ */ c(
         "span",
         {
-          className: y(_.period__item, f(e) ? _["period__item--active"] : "")
+          className: N(n.period__item, f(e) ? n["period__item--active"] : "")
         },
-        s ? `${p}-${e}` : t[e - 1].id
+        `${u}-${e}`
       ))
     }
   );
 };
 export {
-  O as Periods
+  x as Periods
 };
 //# sourceMappingURL=Periods.js.map

package/dist/components/Periods/Periods.js.map

@@ -1 +1 @@
-{"version":3,"file":"Periods.js","sources":["../../../src/components/Periods/Periods.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId } from 'react';\n\nimport styles from './Periods.module.css';\n\ninterface Period {\n  id: string;\n  number: number;\n  semesterNumber: number;\n  periodInSemester: number;\n}\n\nexport interface PeriodsProps {\n  periods: Period[] | number[];\n  maxPeriods?: number;\n  titlePeriods?: Record<string, Record<string, string>>;\n}\n\nconst MAX_PERIODS = 6;\n\nexport const Periods = ({ periods, titlePeriods, maxPeriods = MAX_PERIODS }: PeriodsProps) => {\n  const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n  const idPrefix = useId();\n\n  const isArrayOfNumbers = periods.some((value) => {\n    return typeof value === 'number';\n  });\n\n  const getTitles = (titlePeriods: Record<string, Record<string, string>>): string => {\n    let currrentSemesterNumber = 0;\n\n    const title = periods.reduce((acc, period, index) => {\n      const { semesterNumber, periodInSemester } = period as Period;\n      let periodTitle = '';\n      if (semesterNumber !== currrentSemesterNumber) {\n        periodTitle = ` ${titlePeriods.periods['period-title'].replace('{{ semester }}', semesterNumber.toString())} ${periodInSemester}`;\n      } else if (periods[index + 1] && (periods[index + 1] as Period).semesterNumber === currrentSemesterNumber) {\n        periodTitle = `, ${periodInSemester}`;\n      } else {\n        periodTitle = ` ${titlePeriods.periods['last-separator']} ${periodInSemester}`;\n      }\n\n      currrentSemesterNumber = semesterNumber;\n      return `${acc}${periodTitle}`;\n    }, '');\n\n    return title;\n  };\n\n  const isPeriodActive = (periodIndex: number): boolean => {\n    if (isArrayOfNumbers) {\n      return (periods as number[]).includes(periodIndex);\n    } else {\n      return periods.find((period) => (period as Period).number === periodIndex) ? true : false;\n    }\n  };\n\n  return (\n    <div\n      className={styles['period__container']}\n      title={isArrayOfNumbers ? '' : getTitles(titlePeriods as Record<string, Record<string, string>>)}\n    >\n      {maxPeriodsList.map((periodIndex) => {\n        return (\n          <span\n            className={clsx(styles['period__item'], isPeriodActive(periodIndex) ? styles['period__item--active'] : '')}\n            key={isArrayOfNumbers ? `${idPrefix}-${periodIndex}` : (periods[periodIndex - 1] as Period).id}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["MAX_PERIODS","Periods","periods","titlePeriods","maxPeriods","maxPeriodsList","_","index","idPrefix","useId","isArrayOfNumbers","value","getTitles","currrentSemesterNumber","acc","period","semesterNumber","periodInSemester","periodTitle","isPeriodActive","periodIndex","jsx","styles","clsx"],"mappings":";;;;;;;GAkBMA,IAAc,GAEPC,IAAU,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,YAAAC,IAAaJ,QAAgC;AACtF,QAAAK,IAAiB,MAAM,KAAK,EAAE,QAAQD,KAAc,CAACE,GAAGC,MAAUA,IAAQ,CAAC,GAC3EC,IAAWC,KAEXC,IAAmBR,EAAQ,KAAK,CAACS,MAC9B,OAAOA,KAAU,QACzB,GAEKC,IAAY,CAACT,MAAiE;AAClF,QAAIU,IAAyB;AAiBtB,WAfOX,EAAQ,OAAO,CAACY,GAAKC,GAAQR,MAAU;AAC7C,YAAA,EAAE,gBAAAS,GAAgB,kBAAAC,EAAqB,IAAAF;AAC7C,UAAIG,IAAc;AAClB,aAAIF,MAAmBH,IACrBK,IAAc,IAAIf,EAAa,QAAQ,cAAc,EAAE,QAAQ,kBAAkBa,EAAe,SAAU,CAAA,CAAC,IAAIC,CAAgB,KACtHf,EAAQK,IAAQ,CAAC,KAAML,EAAQK,IAAQ,CAAC,EAAa,mBAAmBM,IACjFK,IAAc,KAAKD,CAAgB,KAEnCC,IAAc,IAAIf,EAAa,QAAQ,gBAAgB,CAAC,IAAIc,CAAgB,IAGrDJ,IAAAG,GAClB,GAAGF,CAAG,GAAGI,CAAW;AAAA,OAC1B,EAAE;AAAA,EAEE,GAGHC,IAAiB,CAACC,MAClBV,IACMR,EAAqB,SAASkB,CAAW,IAE1C,EAAAlB,EAAQ,KAAK,CAACa,MAAYA,EAAkB,WAAWK,CAAW;AAK3E,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO;AAAA,MAClB,OAAOZ,IAAmB,KAAKE,EAAUT,CAAsD;AAAA,MAE9F,UAAAE,EAAe,IAAI,CAACe,MAEjB,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAKD,EAAO,cAAiBH,EAAeC,CAAW,IAAIE,EAAO,sBAAsB,IAAI,EAAE;AAAA,QAAA;AAAA,QACpGZ,IAAmB,GAAGF,CAAQ,IAAIY,CAAW,KAAMlB,EAAQkB,IAAc,CAAC,EAAa;AAAA,MAAA,CAGjG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Periods.js","sources":["../../../src/components/Periods/Periods.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId } from 'react';\n\nimport styles from './Periods.module.css';\n\ninterface Period {\n  id: string;\n  number: number;\n  semesterNumber: number;\n  periodInSemester: number;\n}\n\nexport interface PeriodsProps {\n  periods: Period[] | number[];\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  maxPeriods?: 6 | 7;\n  titlePeriods?: Record<string, Record<string, string>>;\n}\n\nconst MAX_PERIODS = 6;\n\nexport const Periods = ({ periods, titlePeriods, maxPeriods = MAX_PERIODS }: PeriodsProps) => {\n  const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n  const idPrefix = useId();\n\n  const isArrayOfNumbers = periods.some((value) => {\n    return typeof value === 'number';\n  });\n\n  const getTitles = (titlePeriods: Record<string, Record<string, string>>): string => {\n    let currrentSemesterNumber = 0;\n\n    const title = periods.reduce((acc, period, index) => {\n      const { semesterNumber, periodInSemester } = period as Period;\n      let periodTitle = '';\n      if (semesterNumber !== currrentSemesterNumber) {\n        periodTitle = ` ${titlePeriods.periods['period-title'].replace('{{ semester }}', semesterNumber.toString())} ${periodInSemester}`;\n      } else if (periods[index + 1] && (periods[index + 1] as Period).semesterNumber === currrentSemesterNumber) {\n        periodTitle = `, ${periodInSemester}`;\n      } else {\n        periodTitle = ` ${titlePeriods.periods['last-separator']} ${periodInSemester}`;\n      }\n\n      currrentSemesterNumber = semesterNumber;\n      return `${acc}${periodTitle}`;\n    }, '');\n\n    return title.trim();\n  };\n\n  const isPeriodActive = (periodIndex: number): boolean => {\n    if (isArrayOfNumbers) {\n      return (periods as number[]).includes(periodIndex);\n    } else {\n      return periods.find((period) => (period as Period).number === periodIndex) ? true : false;\n    }\n  };\n\n  return (\n    <div\n      className={styles['period__container']}\n      title={isArrayOfNumbers ? '' : getTitles(titlePeriods as Record<string, Record<string, string>>)}\n    >\n      {maxPeriodsList.map((periodIndex) => {\n        return (\n          <span\n            className={clsx(styles['period__item'], isPeriodActive(periodIndex) ? styles['period__item--active'] : '')}\n            key={`${idPrefix}-${periodIndex}`}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["MAX_PERIODS","Periods","periods","titlePeriods","maxPeriods","maxPeriodsList","_","index","idPrefix","useId","isArrayOfNumbers","value","getTitles","currrentSemesterNumber","acc","period","semesterNumber","periodInSemester","periodTitle","isPeriodActive","periodIndex","jsx","styles","clsx"],"mappings":";;;;;;;GAmBMA,IAAc,GAEPC,IAAU,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,YAAAC,IAAaJ,QAAgC;AACtF,QAAAK,IAAiB,MAAM,KAAK,EAAE,QAAQD,KAAc,CAACE,GAAGC,MAAUA,IAAQ,CAAC,GAC3EC,IAAWC,KAEXC,IAAmBR,EAAQ,KAAK,CAACS,MAC9B,OAAOA,KAAU,QACzB,GAEKC,IAAY,CAACT,MAAiE;AAClF,QAAIU,IAAyB;AAiB7B,WAfcX,EAAQ,OAAO,CAACY,GAAKC,GAAQR,MAAU;AAC7C,YAAA,EAAE,gBAAAS,GAAgB,kBAAAC,EAAqB,IAAAF;AAC7C,UAAIG,IAAc;AAClB,aAAIF,MAAmBH,IACrBK,IAAc,IAAIf,EAAa,QAAQ,cAAc,EAAE,QAAQ,kBAAkBa,EAAe,SAAU,CAAA,CAAC,IAAIC,CAAgB,KACtHf,EAAQK,IAAQ,CAAC,KAAML,EAAQK,IAAQ,CAAC,EAAa,mBAAmBM,IACjFK,IAAc,KAAKD,CAAgB,KAEnCC,IAAc,IAAIf,EAAa,QAAQ,gBAAgB,CAAC,IAAIc,CAAgB,IAGrDJ,IAAAG,GAClB,GAAGF,CAAG,GAAGI,CAAW;AAAA,OAC1B,EAAE,EAEQ;EAAK,GAGdC,IAAiB,CAACC,MAClBV,IACMR,EAAqB,SAASkB,CAAW,IAE1C,EAAAlB,EAAQ,KAAK,CAACa,MAAYA,EAAkB,WAAWK,CAAW;AAK3E,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO;AAAA,MAClB,OAAOZ,IAAmB,KAAKE,EAAUT,CAAsD;AAAA,MAE9F,UAAAE,EAAe,IAAI,CAACe,MAEjB,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAKD,EAAO,cAAiBH,EAAeC,CAAW,IAAIE,EAAO,sBAAsB,IAAI,EAAE;AAAA,QAAA;AAAA,QACpG,GAAGd,CAAQ,IAAIY,CAAW;AAAA,MAAA,CAGpC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.40.4",
+  "version": "1.41.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -55,11 +55,11 @@
     "@storybook/react": "^8.2.6",
     "@storybook/react-vite": "^8.2.6",
     "@storybook/test": "^8.2.6",
-    "@types/node": "^20.14.12",
+    "@types/node": "^20.14.13",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@uva-glass/eslint-config": "^1.2.0",
     "@uva-glass/stylelint-config": "^1.1.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -83,7 +83,7 @@
     "semantic-release": "^24.0.0",
     "storybook": "^8.2.6",
     "style-dictionary": "^4.0.1",
-    "stylelint": "^16.7.0",
+    "stylelint": "^16.8.0",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",