@blockle/blocks 0.8.10 → 0.9.1

package/dist/styles/lib/css/atoms/sprinkles.css.mjs

@@ -6,7 +6,7 @@ setFileScope("src/lib/css/atoms/sprinkles.css.ts", "blocks");
 const unresponsiveAtomicProperties = defineProperties({
   properties: unresponsiveProperties,
   shorthands: {
-    inset: ["top", "bottom", "left", "right"]
+    inset: ["insetBlockStart", "insetBlockEnd", "insetInlineStart", "insetInlineEnd"]
   }
 });
 const responsiveAtomicProperties = defineProperties({
@@ -26,12 +26,9 @@ const responsiveAtomicProperties = defineProperties({
   responsiveArray: breakpointNames,
   properties: responsiveProperties,
   shorthands: {
-    margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
-    marginX: ["marginLeft", "marginRight"],
-    marginY: ["marginTop", "marginBottom"],
-    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
-    paddingX: ["paddingLeft", "paddingRight"],
-    paddingY: ["paddingTop", "paddingBottom"],
+    margin: ["marginBlockStart", "marginBlockEnd", "marginInlineStart", "marginInlineEnd"],
+    marginBlock: ["marginBlockStart", "marginBlockEnd"],
+    marginInline: ["marginInlineStart", "marginInlineEnd"],
     placeItems: ["justifyContent", "alignItems"]
   }
 });

package/dist/styles/themes/momotaro/components/button.css.cjs

@@ -44,15 +44,15 @@ const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("butto
     },
     size: {
       small: styles_lib_css_style_style_cjs.style({
-        paddingX: "large",
+        paddingInline: "large",
         height: 40
       }),
       medium: styles_lib_css_style_style_cjs.style({
-        paddingX: "xlarge",
+        paddingInline: "xlarge",
         height: 56
       }),
       large: styles_lib_css_style_style_cjs.style({
-        paddingX: "xlarge",
+        paddingInline: "xlarge",
         height: 72
       })
     },

package/dist/styles/themes/momotaro/components/button.css.mjs

@@ -43,15 +43,15 @@ const button = makeComponentTheme("button", {
     },
     size: {
       small: style({
-        paddingX: "large",
+        paddingInline: "large",
         height: 40
       }),
       medium: style({
-        paddingX: "xlarge",
+        paddingInline: "xlarge",
         height: 56
       }),
       large: style({
-        paddingX: "xlarge",
+        paddingInline: "xlarge",
         height: 72
       })
     },

package/dist/styles/themes/momotaro/components/checkbox.css.cjs

@@ -12,15 +12,18 @@ const checkbox = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("che
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: 24,
-    height: 24,
-    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`,
-    transitionProperty: "background-color",
-    ":hover": {
-      backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+    inlineSize: 24,
+    blockSize: 24,
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `background-color ${styles_lib_theme_vars_css_cjs.vars.transition.normal}, box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+      }
     },
     selectors: {
-      "&:has(input:checked):not(:hover)": {
+      "&:hover:not(:has(input:disabled))": {
+        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+      },
+      "&:has(input:checked)": {
         backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primary
       }
     }
@@ -29,16 +32,19 @@ const checkbox = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("che
     borderRadius: "small"
   }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "checkbox_base"),
   icon: css.style({
-    height: 12,
-    width: 12,
-    backgroundColor: "white",
-    borderRadius: "8px",
+    inlineSize: "1rem",
+    blockSize: "1rem",
+    color: "white",
     transform: "scale(0)",
-    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`,
     selectors: {
       "input:checked ~ &": {
         transform: "scale(1)"
       }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`
+      }
     }
   }, "checkbox_icon"),
   label: styles_lib_css_atoms_sprinkles_css_cjs.atoms({

package/dist/styles/themes/momotaro/components/checkbox.css.mjs

@@ -11,15 +11,18 @@ const checkbox = makeComponentTheme("checkbox", {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: 24,
-    height: 24,
-    transition: `transform ${vars.transition.fast}`,
-    transitionProperty: "background-color",
-    ":hover": {
-      backgroundColor: vars.color.primaryDark
+    inlineSize: 24,
+    blockSize: 24,
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `background-color ${vars.transition.normal}, box-shadow ${vars.transition.fast}`
+      }
     },
     selectors: {
-      "&:has(input:checked):not(:hover)": {
+      "&:hover:not(:has(input:disabled))": {
+        backgroundColor: vars.color.primaryDark
+      },
+      "&:has(input:checked)": {
         backgroundColor: vars.color.primary
       }
     }
@@ -28,16 +31,19 @@ const checkbox = makeComponentTheme("checkbox", {
     borderRadius: "small"
   }), focusable], "checkbox_base"),
   icon: style({
-    height: 12,
-    width: 12,
-    backgroundColor: "white",
-    borderRadius: "8px",
+    inlineSize: "1rem",
+    blockSize: "1rem",
+    color: "white",
     transform: "scale(0)",
-    transition: `transform ${vars.transition.normal} ${bounceOut}`,
     selectors: {
       "input:checked ~ &": {
         transform: "scale(1)"
       }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${vars.transition.normal} ${bounceOut}`
+      }
     }
   }, "checkbox_icon"),
   label: atoms({

package/dist/styles/themes/momotaro/components/dialog.css.cjs

@@ -14,6 +14,7 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
     borderRadius: "medium",
     boxShadow: "large"
   }), {
+    maxHeight: "90%",
     minWidth: "300px",
     selectors: {
       "&[data-open]": {
@@ -47,15 +48,15 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
     size: {
       small: css.style({
         width: "400px",
-        maxWidth: "min(400px, 90vw)"
+        maxWidth: "min(400px, 90%)"
       }, "dialog_variants_size_small"),
       medium: css.style({
         width: "600px",
-        maxWidth: "min(600px, 90vw)"
+        maxWidth: "min(600px, 90%)"
       }, "dialog_variants_size_medium"),
       large: css.style({
         width: "800px",
-        maxWidth: "min(800px, 90vw)"
+        maxWidth: "min(800px, 90%)"
       }, "dialog_variants_size_large")
     }
   },

package/dist/styles/themes/momotaro/components/dialog.css.mjs

@@ -13,6 +13,7 @@ const dialog = makeComponentTheme("dialog", {
     borderRadius: "medium",
     boxShadow: "large"
   }), {
+    maxHeight: "90%",
     minWidth: "300px",
     selectors: {
       "&[data-open]": {
@@ -46,15 +47,15 @@ const dialog = makeComponentTheme("dialog", {
     size: {
       small: style({
         width: "400px",
-        maxWidth: "min(400px, 90vw)"
+        maxWidth: "min(400px, 90%)"
       }, "dialog_variants_size_small"),
       medium: style({
         width: "600px",
-        maxWidth: "min(600px, 90vw)"
+        maxWidth: "min(600px, 90%)"
       }, "dialog_variants_size_medium"),
       large: style({
         width: "800px",
-        maxWidth: "min(800px, 90vw)"
+        maxWidth: "min(800px, 90%)"
       }, "dialog_variants_size_large")
     }
   },

package/dist/styles/themes/momotaro/components/helpers.css.cjs

@@ -5,12 +5,15 @@ const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs")
 fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts", "blocks");
 const focusRingColor = css.createVar("focusRingColor");
 const focusable = css.style({
+  "@media": {
+    "(prefers-reduced-motion: no-preference)": {
+      transition: `box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+    }
+  },
   ":focus-visible": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`,
-    transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
-    transitionProperty: "box-shadow"
+    boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`
   },
   selectors: {
     "&:disabled, &[disabled]": {
@@ -21,9 +24,7 @@ const focusable = css.style({
     "&:has(input:focus-visible)": {
       outline: "2px solid transparent",
       outlineOffset: "2px",
-      boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow,
-      transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
-      transitionProperty: "box-shadow"
+      boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow
     },
     "&:has(input:disabled)": {
       opacity: 0.5,

package/dist/styles/themes/momotaro/components/helpers.css.mjs

@@ -4,12 +4,15 @@ import { vars } from "../../../lib/theme/vars.css.mjs";
 setFileScope("src/themes/momotaro/components/helpers.css.ts", "blocks");
 const focusRingColor = createVar("focusRingColor");
 const focusable = style({
+  "@media": {
+    "(prefers-reduced-motion: no-preference)": {
+      transition: `box-shadow ${vars.transition.fast}`
+    }
+  },
   ":focus-visible": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`,
-    transitionDuration: vars.transition.fast,
-    transitionProperty: "box-shadow"
+    boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`
   },
   selectors: {
     "&:disabled, &[disabled]": {
@@ -20,9 +23,7 @@ const focusable = style({
     "&:has(input:focus-visible)": {
       outline: "2px solid transparent",
       outlineOffset: "2px",
-      boxShadow: vars.focus.boxShadow,
-      transitionDuration: vars.transition.fast,
-      transitionProperty: "box-shadow"
+      boxShadow: vars.focus.boxShadow
     },
     "&:has(input:disabled)": {
       opacity: 0.5,

package/dist/styles/themes/momotaro/components/index.cjs

@@ -9,6 +9,7 @@ const styles_themes_momotaro_components_label_css_cjs = require("./label.css.cjs
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
 const styles_themes_momotaro_components_progress_css_cjs = require("./progress.css.cjs");
 const styles_themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
+const styles_themes_momotaro_components_select_css_cjs = require("./select.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
 const styles_themes_momotaro_components_switch_css_cjs = require("./switch.css.cjs");
 const components = {
@@ -16,13 +17,14 @@ const components = {
   checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
   dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog,
   divider: styles_themes_momotaro_components_divider_css_cjs.divider,
+  dropdown: styles_themes_momotaro_components_dropdown_css_cjs.dropdown,
   input: styles_themes_momotaro_components_input_css_cjs.input,
   label: styles_themes_momotaro_components_label_css_cjs.label,
   link: styles_themes_momotaro_components_link_css_cjs.link,
   progress: styles_themes_momotaro_components_progress_css_cjs.progress,
   radio: styles_themes_momotaro_components_radio_css_cjs.radio,
+  select: styles_themes_momotaro_components_select_css_cjs.select,
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
-  dropdown: styles_themes_momotaro_components_dropdown_css_cjs.dropdown,
   switch: styles_themes_momotaro_components_switch_css_cjs.switchTheme
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -8,6 +8,7 @@ import { label } from "./label.css.mjs";
 import { link } from "./link.css.mjs";
 import { progress } from "./progress.css.mjs";
 import { radio } from "./radio.css.mjs";
+import { select } from "./select.css.mjs";
 import { spinner } from "./spinner.css.mjs";
 import { switchTheme } from "./switch.css.mjs";
 const components = {
@@ -15,13 +16,14 @@ const components = {
   checkbox,
   dialog,
   divider,
+  dropdown,
   input,
   label,
   link,
   progress,
   radio,
+  select,
   spinner,
-  dropdown,
   switch: switchTheme
 };
 export {

package/dist/styles/themes/momotaro/components/input.css.cjs

@@ -8,8 +8,7 @@ fileScope.setFileScope("src/themes/momotaro/components/input.css.ts", "blocks");
 const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input", {
   input: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     color: "text",
-    paddingY: "large",
-    paddingX: "large",
+    padding: "large",
     border: "none",
     borderRadius: "small"
   }), {
@@ -22,8 +21,11 @@ const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input"
   }], "input_input"),
   container: css.style([{
     minHeight: 56,
-    transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
-    transitionProperty: "box-shadow",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+      }
+    },
     ":focus-within": {
       outline: "2px solid transparent",
       outlineOffset: "2px",

package/dist/styles/themes/momotaro/components/input.css.mjs

@@ -7,8 +7,7 @@ setFileScope("src/themes/momotaro/components/input.css.ts", "blocks");
 const input = makeComponentTheme("input", {
   input: style([atoms({
     color: "text",
-    paddingY: "large",
-    paddingX: "large",
+    padding: "large",
     border: "none",
     borderRadius: "small"
   }), {
@@ -21,8 +20,11 @@ const input = makeComponentTheme("input", {
   }], "input_input"),
   container: style([{
     minHeight: 56,
-    transitionDuration: vars.transition.fast,
-    transitionProperty: "box-shadow",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `box-shadow ${vars.transition.fast}`
+      }
+    },
     ":focus-within": {
       outline: "2px solid transparent",
       outlineOffset: "2px",

package/dist/styles/themes/momotaro/components/progress.css.cjs

@@ -17,7 +17,7 @@ const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("pro
   base: css.style([{
     height: 8
   }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
-    width: "full",
+    inlineSize: "full",
     borderRadius: "small",
     backgroundColor: "textLight",
     color: "primary",

package/dist/styles/themes/momotaro/components/progress.css.mjs

@@ -16,7 +16,7 @@ const progress = makeComponentTheme("progress", {
   base: style([{
     height: 8
   }, atoms({
-    width: "full",
+    inlineSize: "full",
     borderRadius: "small",
     backgroundColor: "textLight",
     color: "primary",

package/dist/styles/themes/momotaro/components/radio.css.cjs

@@ -12,11 +12,14 @@ const radio = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("radio"
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: 24,
-    height: 24,
+    inlineSize: 24,
+    blockSize: 24,
     borderRadius: 12,
-    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`,
-    transitionProperty: "background-color",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `background-color ${styles_lib_theme_vars_css_cjs.vars.transition.fast}, box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+      }
+    },
     ":hover": {
       backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
     },
@@ -34,7 +37,11 @@ const radio = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("radio"
     backgroundColor: "white",
     borderRadius: "8px",
     transform: "scale(0)",
-    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`,
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`
+      }
+    },
     selectors: {
       "input:checked ~ &": {
         transform: "scale(1)"

package/dist/styles/themes/momotaro/components/radio.css.mjs

@@ -11,11 +11,14 @@ const radio = makeComponentTheme("radio", {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: 24,
-    height: 24,
+    inlineSize: 24,
+    blockSize: 24,
     borderRadius: 12,
-    transition: `transform ${vars.transition.fast}`,
-    transitionProperty: "background-color",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `background-color ${vars.transition.fast}, box-shadow ${vars.transition.fast}`
+      }
+    },
     ":hover": {
       backgroundColor: vars.color.primaryDark
     },
@@ -33,7 +36,11 @@ const radio = makeComponentTheme("radio", {
     backgroundColor: "white",
     borderRadius: "8px",
     transform: "scale(0)",
-    transition: `transform ${vars.transition.normal} ${bounceOut}`,
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${vars.transition.normal} ${bounceOut}`
+      }
+    },
     selectors: {
       "input:checked ~ &": {
         transform: "scale(1)"

package/dist/styles/themes/momotaro/components/select.css.cjs

@@ -0,0 +1,35 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/select.css.ts", "blocks");
+const select = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("select", {
+  // wrapper: style({}),
+  select: styles_lib_css_style_style_cjs.style([{
+    color: "text",
+    padding: "large",
+    border: "none",
+    outline: "none",
+    backgroundColor: "white",
+    borderRadius: "medium",
+    boxShadow: "medium",
+    minHeight: 56,
+    transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
+    transitionProperty: "box-shadow",
+    ":focus-within": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: `${styles_lib_theme_vars_css_cjs.vars.shadow.small}, ${styles_lib_theme_vars_css_cjs.vars.focus.boxShadow}`
+    }
+  }, styles_themes_momotaro_components_helpers_css_cjs.focusable]),
+  icon: styles_lib_css_style_style_cjs.style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "outline"
+  }
+});
+fileScope.endFileScope();
+exports.select = select;

package/dist/styles/themes/momotaro/components/select.css.mjs

@@ -0,0 +1,36 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "../../../lib/css/style/style.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+import { focusable } from "./helpers.css.mjs";
+setFileScope("src/themes/momotaro/components/select.css.ts", "blocks");
+const select = makeComponentTheme("select", {
+  // wrapper: style({}),
+  select: style([{
+    color: "text",
+    padding: "large",
+    border: "none",
+    outline: "none",
+    backgroundColor: "white",
+    borderRadius: "medium",
+    boxShadow: "medium",
+    minHeight: 56,
+    transitionDuration: vars.transition.fast,
+    transitionProperty: "box-shadow",
+    ":focus-within": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
+    }
+  }, focusable]),
+  icon: style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "outline"
+  }
+});
+endFileScope();
+export {
+  select
+};

package/dist/styles/themes/momotaro/components/switch.css.cjs

@@ -15,7 +15,7 @@ const switchTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("
     backgroundColor: "textLight",
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
-        transition: "background-color 120ms linear"
+        transition: `background-color 120ms linear, box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
       }
     },
     selectors: {

package/dist/styles/themes/momotaro/components/switch.css.mjs

@@ -14,7 +14,7 @@ const switchTheme = makeComponentTheme("switch", {
     backgroundColor: "textLight",
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
-        transition: "background-color 120ms linear"
+        transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
       }
     },
     selectors: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.8.10",
+  "version": "0.9.1",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -69,16 +69,16 @@
     "@changesets/cli": "^2.27.1",
     "@crackle/cli": "^0.13.0",
     "@crackle/core": "^0.31.0",
-    "@storybook/addon-a11y": "^7.6.9",
+    "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-essentials": "^7.6.9",
-    "@storybook/addon-interactions": "^7.6.9",
-    "@storybook/addon-links": "^7.6.9",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addons": "^7.6.17",
-    "@storybook/blocks": "^7.6.9",
+    "@storybook/blocks": "^7.6.17",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.6.9",
-    "@storybook/react-vite": "^7.6.9",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
@@ -101,7 +101,7 @@
     "jsdom": "^23.2.0",
     "prettier": "^3.2.4",
     "prop-types": "^15.8.1",
-    "storybook": "^7.6.9",
+    "storybook": "^7.6.17",
     "typescript": "^5.3.3",
     "vitest": "^1.2.1"
   },