@mrshmllw/smores-react 14.1.1 → 14.3.0

package/dist/utils/space.js

@@ -1,6 +1,16 @@
+import { getFromObject } from './getFromObject';
 import { resolveResponsiveProp } from './responsiveProp';
-export const resolveSpacing = (value) => {
+export const resolveSpacing = (value, theme) => {
     if (typeof value === 'string') {
+        if (theme) {
+            const spacingValue = getFromObject({
+                obj: theme,
+                path: value,
+            });
+            if (spacingValue !== undefined) {
+                return String(spacingValue);
+            }
+        }
         return value;
     }
     if (typeof value.custom === 'string') {
@@ -9,66 +19,66 @@ export const resolveSpacing = (value) => {
     return `${value.custom}px`;
 };
 export const margin = (props) => {
-    const { $m, $mx, $my, $ml, $mr, $mt, $mb } = props;
+    const { $m, $mx, $my, $ml, $mr, $mt, $mb, theme } = props;
     return `
     ${$m
-        ? resolveResponsiveProp($m, (value) => `margin: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($m, (value) => `margin: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$mx
         ? resolveResponsiveProp($mx, (value) => `
-        margin-left: ${resolveSpacing(value)};
-        margin-right: ${resolveSpacing(value)};
+        margin-left: ${resolveSpacing(value, theme)};
+        margin-right: ${resolveSpacing(value, theme)};
       `)
         : ''}
     ${$my
         ? resolveResponsiveProp($my, (value) => `
-        margin-top: ${resolveSpacing(value)};
-        margin-bottom: ${resolveSpacing(value)};
+        margin-top: ${resolveSpacing(value, theme)};
+        margin-bottom: ${resolveSpacing(value, theme)};
       `)
         : ''}
     ${$ml
-        ? resolveResponsiveProp($ml, (value) => `margin-left: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($ml, (value) => `margin-left: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$mr
-        ? resolveResponsiveProp($mr, (value) => `margin-right: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($mr, (value) => `margin-right: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$mt
-        ? resolveResponsiveProp($mt, (value) => `margin-top: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($mt, (value) => `margin-top: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$mb
-        ? resolveResponsiveProp($mb, (value) => `margin-bottom: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($mb, (value) => `margin-bottom: ${resolveSpacing(value, theme)};`)
         : ''}
   `;
 };
 export const padding = (props) => {
-    const { $p, $px, $py, $pl, $pr, $pt, $pb } = props;
+    const { $p, $px, $py, $pl, $pr, $pt, $pb, theme } = props;
     return `
     ${$p
-        ? resolveResponsiveProp($p, (value) => `padding: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($p, (value) => `padding: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$px
         ? resolveResponsiveProp($px, (value) => `
-        padding-left: ${resolveSpacing(value)};
-        padding-right: ${resolveSpacing(value)};
+        padding-left: ${resolveSpacing(value, theme)};
+        padding-right: ${resolveSpacing(value, theme)};
       `)
         : ''}
     ${$py
         ? resolveResponsiveProp($py, (value) => `
-        padding-top: ${resolveSpacing(value)};
-        padding-bottom: ${resolveSpacing(value)};
+        padding-top: ${resolveSpacing(value, theme)};
+        padding-bottom: ${resolveSpacing(value, theme)};
       `)
         : ''}
     ${$pl
-        ? resolveResponsiveProp($pl, (value) => `padding-left: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($pl, (value) => `padding-left: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$pr
-        ? resolveResponsiveProp($pr, (value) => `padding-right: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($pr, (value) => `padding-right: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$pt
-        ? resolveResponsiveProp($pt, (value) => `padding-top: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($pt, (value) => `padding-top: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$pb
-        ? resolveResponsiveProp($pb, (value) => `padding-bottom: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($pb, (value) => `padding-bottom: ${resolveSpacing(value, theme)};`)
         : ''}
   `;
 };

package/dist/utils/space.js.map

@@ -1 +1 @@
-{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAkB,MAAM,kBAAkB,CAAA;AAOxE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC5D,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;QACrC,OAAO,KAAK,CAAC,MAAM,CAAA;IACrB,CAAC;IAED,OAAO,GAAG,KAAK,CAAC,MAAM,IAAI,CAAA;AAC5B,CAAC,CAAA;AAyBD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAA2B,EAAU,EAAE;IAC5D,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAA;IAElD,OAAO;MAEH,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,cAAc,CAAC,KAAK,CAAC,GAAG,CAC/C;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC;uBACA,cAAc,CAAC,KAAK,CAAC;wBACpB,cAAc,CAAC,KAAK,CAAC;OACtC,CACI;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC;sBACD,cAAc,CAAC,KAAK,CAAC;yBAClB,cAAc,CAAC,KAAK,CAAC;OACvC,CACI;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,cAAc,CAAC,KAAK,CAAC,GAAG,CACpD;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,iBAAiB,cAAc,CAAC,KAAK,CAAC,GAAG,CACrD;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,cAAc,CAAC,KAAK,CAAC,GAAG,CACnD;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,cAAc,CAAC,KAAK,CAAC,GAAG,CACtD;QACH,CAAC,CAAC,EACN;GACD,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAA4B,EAAU,EAAE;IAC9D,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAA;IAElD,OAAO;MAEH,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,cAAc,CAAC,KAAK,CAAC,GAAG,CAChD;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC;wBACC,cAAc,CAAC,KAAK,CAAC;yBACpB,cAAc,CAAC,KAAK,CAAC;OACvC,CACI;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC;uBACA,cAAc,CAAC,KAAK,CAAC;0BAClB,cAAc,CAAC,KAAK,CAAC;OACxC,CACI;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,iBAAiB,cAAc,CAAC,KAAK,CAAC,GAAG,CACrD;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,cAAc,CAAC,KAAK,CAAC,GAAG,CACtD;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,cAAc,CAAC,KAAK,CAAC,GAAG,CACpD;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,cAAc,CAAC,KAAK,CAAC,GAAG,CACvD;QACH,CAAC,CAAC,EACN;GACD,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { resolveResponsiveProp, ResponsiveProp } from './responsiveProp'\nimport { TransientProps } from './utilTypes'\n\ntype Spacing = '8px' | '12px' | '16px' | '24px' | '32px' | '48px' | '64px'\n\nexport type SpacingProp = '0' | Spacing | { custom: number | string }\n\nexport const resolveSpacing = (value: SpacingProp | 'auto') => {\n  if (typeof value === 'string') {\n    return value\n  }\n\n  if (typeof value.custom === 'string') {\n    return value.custom\n  }\n\n  return `${value.custom}px`\n}\n\nexport interface MarginProps {\n  m?: ResponsiveProp<SpacingProp>\n  mx?: ResponsiveProp<SpacingProp | 'auto'>\n  my?: ResponsiveProp<SpacingProp>\n  ml?: ResponsiveProp<SpacingProp>\n  mr?: ResponsiveProp<SpacingProp>\n  mt?: ResponsiveProp<SpacingProp>\n  mb?: ResponsiveProp<SpacingProp>\n}\n\nexport interface PaddingProps {\n  p?: ResponsiveProp<SpacingProp>\n  px?: ResponsiveProp<SpacingProp>\n  py?: ResponsiveProp<SpacingProp>\n  pl?: ResponsiveProp<SpacingProp>\n  pr?: ResponsiveProp<SpacingProp>\n  pt?: ResponsiveProp<SpacingProp>\n  pb?: ResponsiveProp<SpacingProp>\n}\n\nexport type TransientMarginProps = TransientProps<MarginProps>\nexport type TransientPaddingProps = TransientProps<PaddingProps>\n\nexport const margin = (props: TransientMarginProps): string => {\n  const { $m, $mx, $my, $ml, $mr, $mt, $mb } = props\n\n  return `\n    ${\n      $m\n        ? resolveResponsiveProp(\n            $m,\n            (value) => `margin: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $mx\n        ? resolveResponsiveProp(\n            $mx,\n            (value) => `\n        margin-left: ${resolveSpacing(value)};\n        margin-right: ${resolveSpacing(value)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $my\n        ? resolveResponsiveProp(\n            $my,\n            (value) => `\n        margin-top: ${resolveSpacing(value)};\n        margin-bottom: ${resolveSpacing(value)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $ml\n        ? resolveResponsiveProp(\n            $ml,\n            (value) => `margin-left: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $mr\n        ? resolveResponsiveProp(\n            $mr,\n            (value) => `margin-right: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $mt\n        ? resolveResponsiveProp(\n            $mt,\n            (value) => `margin-top: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $mb\n        ? resolveResponsiveProp(\n            $mb,\n            (value) => `margin-bottom: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n  `\n}\n\nexport const padding = (props: TransientPaddingProps): string => {\n  const { $p, $px, $py, $pl, $pr, $pt, $pb } = props\n\n  return `\n    ${\n      $p\n        ? resolveResponsiveProp(\n            $p,\n            (value) => `padding: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $px\n        ? resolveResponsiveProp(\n            $px,\n            (value) => `\n        padding-left: ${resolveSpacing(value)};\n        padding-right: ${resolveSpacing(value)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $py\n        ? resolveResponsiveProp(\n            $py,\n            (value) => `\n        padding-top: ${resolveSpacing(value)};\n        padding-bottom: ${resolveSpacing(value)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $pl\n        ? resolveResponsiveProp(\n            $pl,\n            (value) => `padding-left: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $pr\n        ? resolveResponsiveProp(\n            $pr,\n            (value) => `padding-right: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $pt\n        ? resolveResponsiveProp(\n            $pt,\n            (value) => `padding-top: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $pb\n        ? resolveResponsiveProp(\n            $pb,\n            (value) => `padding-bottom: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n  `\n}\n"]}
+{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Theme } from '../ThemeProvider/ThemeProvider'\nimport { Flatten, Prettify } from '../types'\nimport { getFromObject } from './getFromObject'\nimport { resolveResponsiveProp, ResponsiveProp } from './responsiveProp'\nimport { TransientProps } from './utilTypes'\n\ntype LegacySpacing = '8px' | '12px' | '16px' | '24px' | '32px' | '48px' | '64px'\n\nexport type ThemeSpacing = Prettify<Flatten<Pick<Theme, 'space'>>>\n\nexport type SpacingProp =\n  | '0'\n  | LegacySpacing\n  | ThemeSpacing\n  | { custom: number | string }\n\nexport const resolveSpacing = (value: SpacingProp | 'auto', theme?: Theme) => {\n  if (typeof value === 'string') {\n    if (theme) {\n      const spacingValue = getFromObject({\n        obj: theme,\n        path: value,\n      })\n\n      if (spacingValue !== undefined) {\n        return String(spacingValue)\n      }\n    }\n\n    return value\n  }\n\n  if (typeof value.custom === 'string') {\n    return value.custom\n  }\n\n  return `${value.custom}px`\n}\n\nexport interface MarginProps {\n  m?: ResponsiveProp<SpacingProp>\n  mx?: ResponsiveProp<SpacingProp | 'auto'>\n  my?: ResponsiveProp<SpacingProp>\n  ml?: ResponsiveProp<SpacingProp>\n  mr?: ResponsiveProp<SpacingProp>\n  mt?: ResponsiveProp<SpacingProp>\n  mb?: ResponsiveProp<SpacingProp>\n}\n\nexport interface PaddingProps {\n  p?: ResponsiveProp<SpacingProp>\n  px?: ResponsiveProp<SpacingProp>\n  py?: ResponsiveProp<SpacingProp>\n  pl?: ResponsiveProp<SpacingProp>\n  pr?: ResponsiveProp<SpacingProp>\n  pt?: ResponsiveProp<SpacingProp>\n  pb?: ResponsiveProp<SpacingProp>\n}\n\nexport type TransientMarginProps = TransientProps<MarginProps>\nexport type TransientPaddingProps = TransientProps<PaddingProps>\n\nexport const margin = (\n  props: TransientMarginProps & { theme: Theme },\n): string => {\n  const { $m, $mx, $my, $ml, $mr, $mt, $mb, theme } = props\n\n  return `\n    ${\n      $m\n        ? resolveResponsiveProp(\n            $m,\n            (value) => `margin: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mx\n        ? resolveResponsiveProp(\n            $mx,\n            (value) => `\n        margin-left: ${resolveSpacing(value, theme)};\n        margin-right: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $my\n        ? resolveResponsiveProp(\n            $my,\n            (value) => `\n        margin-top: ${resolveSpacing(value, theme)};\n        margin-bottom: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $ml\n        ? resolveResponsiveProp(\n            $ml,\n            (value) => `margin-left: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mr\n        ? resolveResponsiveProp(\n            $mr,\n            (value) => `margin-right: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mt\n        ? resolveResponsiveProp(\n            $mt,\n            (value) => `margin-top: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $mb\n        ? resolveResponsiveProp(\n            $mb,\n            (value) => `margin-bottom: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n  `\n}\n\nexport const padding = (\n  props: TransientPaddingProps & { theme: Theme },\n): string => {\n  const { $p, $px, $py, $pl, $pr, $pt, $pb, theme } = props\n\n  return `\n    ${\n      $p\n        ? resolveResponsiveProp(\n            $p,\n            (value) => `padding: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $px\n        ? resolveResponsiveProp(\n            $px,\n            (value) => `\n        padding-left: ${resolveSpacing(value, theme)};\n        padding-right: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $py\n        ? resolveResponsiveProp(\n            $py,\n            (value) => `\n        padding-top: ${resolveSpacing(value, theme)};\n        padding-bottom: ${resolveSpacing(value, theme)};\n      `,\n          )\n        : ''\n    }\n    ${\n      $pl\n        ? resolveResponsiveProp(\n            $pl,\n            (value) => `padding-left: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $pr\n        ? resolveResponsiveProp(\n            $pr,\n            (value) => `padding-right: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $pt\n        ? resolveResponsiveProp(\n            $pt,\n            (value) => `padding-top: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $pb\n        ? resolveResponsiveProp(\n            $pb,\n            (value) => `padding-bottom: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n  `\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "14.1.1",
+  "version": "14.3.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "type": "module",
@@ -46,55 +46,58 @@
     "fix-package-lock-conflicts": "echo \"Make sure conflicts in package.json are resolved before running this script\" && npm i --package-lock-only"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.2.0",
-    "@mrshmllw/campfire": "^2.3.1",
-    "@snyk/protect": "^1.1301.1",
-    "@storybook/addon-a11y": "^10.1.5",
+    "@commitlint/cli": "^20.4.1",
+    "@mrshmllw/campfire": "^2.3.2",
+    "@snyk/protect": "^1.1302.1",
+    "@storybook/addon-a11y": "^10.2.6",
     "@storybook/addon-coverage": "^3.0.0",
-    "@storybook/addon-docs": "^10.1.5",
-    "@storybook/addon-links": "^10.1.5",
-    "@storybook/react-vite": "^10.1.5",
+    "@storybook/addon-docs": "^10.2.6",
+    "@storybook/addon-links": "^10.2.6",
+    "@storybook/react-vite": "^10.2.6",
     "@storybook/test-runner": "^0.24.2",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@types/body-scroll-lock": "^3.1.2",
-    "@types/node": "^24.10.2",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.2.11",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.47.0",
-    "@typescript-eslint/parser": "^8.47.0",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
     "axe-playwright": "^2.2.2",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "10.1.5",
+    "eslint-plugin-storybook": "^10.2.6",
     "husky": "^9.1.7",
     "jest-styled-components": "^7.2.0",
-    "jsdom": "^27.3.0",
+    "jsdom": "^27.4.0",
     "lint-staged": "^16.2.7",
-    "playwright": "^1.57.0",
-    "prettier": "^3.7.4",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.1",
+    "playwright": "^1.58.1",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rimraf": "^6.1.2",
     "storybook": "^10.0.8",
     "styled-components": "^6.1.19",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "vite": "^7.2.7",
-    "vitest": "^4.0.15"
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "dependencies": {
-    "@floating-ui/react": "0.27.16",
-    "@lexical/react": "^0.38.2",
+    "@awesome.me/kit-46ca99185c": "^1.0.22",
+    "@floating-ui/react": "0.27.17",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
+    "@lexical/react": "^0.40.0",
     "@mrshmllw/smores-foundations": "^1.1.0",
     "body-scroll-lock": "^4.0.0-beta.0",
     "date-fns": "^4.1.0",
     "dompurify": "^3.3.1",
     "fuse.js": "^7.1.0",
-    "lexical": "^0.38.2",
+    "lexical": "^0.40.0",
     "polished": "^4.3.1"
   },
   "peerDependencies": {