@spaced-out/ui-design-system 0.3.3 → 0.3.5

package/.cspell/custom-words.txt

@@ -27,6 +27,7 @@ datetime
 DEFAULTTEXT
 Dili
 dismissable
+Docgen
 drilldown
 Drilldown
 dropzone
@@ -47,6 +48,7 @@ innerref
 interdimensional
 Jangid
 Kamchatskiy
+Kemshetty
 Kiritimati
 Kosrae
 Kuala

package/.github/workflows/pages.yml

@@ -7,7 +7,7 @@ name: Publish Genesis Design System Storybook to Github Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["master"]
+    branches: ['master']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -20,7 +20,7 @@ permissions:
 
 # Allow one concurrent deployment
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: true
 
 jobs:
@@ -35,7 +35,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: '18.20.5'
       - name: Install and Build 🔧
         # Install npm packages and build the Storybook files
         run: |

package/.github/workflows/publish_to_npm.yml

@@ -42,7 +42,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '18'
+          node-version: '18.20.5'
 
       # Install dependencies (required by Run tests step)
       - name: Install dependencies

package/.storybook/main.js

@@ -1,58 +1,52 @@
 const path = require('path');
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.jsx'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.jsx'],
+
   features: {
     buildStoriesJson: true,
-    storyStoreV7: false, // 👈 Opt out of on-demand story loading
   },
+
   // Add any Storybook addons you want here: https://storybook.js.org/addons/
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-        babelOptions: {},
-        sourceLoaderOptions: null,
-        transcludeMarkdown: true,
-      },
+  addons: [{
+    name: '@storybook/addon-docs',
+    options: {
+      configureJSX: true,
+      babelOptions: {},
+      sourceLoaderOptions: null,
+      transcludeMarkdown: true,
     },
-    'storybook-css-modules',
-    '@storybook/addon-a11y',
-    '@storybook/addon-essentials',
-    '@storybook/testing-react',
-    // 'storybook-vscode-component/register', This is not supported in storybook 7
-    '@storybook/addon-mdx-gfm',
-    {
-      name: '@storybook/addon-storysource',
-      options: {
-        loaderOptions: {
-          injectStoryParameters: false,
-          prettierConfig: {
-            singleQuote: true,
-            trailingComma: 'all',
-            printWidth: 80,
-            tabWidth: 2,
-            bracketSpacing: false,
-            endOfLine: 'lf',
-            overrides: [
-              {
-                files: ['*.js', '*.jsx'],
-                options: {
-                  parser: 'babel-flow',
-                },
+  }, 'storybook-css-modules', '@storybook/addon-a11y', '@storybook/addon-essentials', // 'storybook-vscode-component/register', This is not supported in storybook 7
+  '@storybook/testing-react', '@storybook/addon-mdx-gfm', {
+    name: '@storybook/addon-storysource',
+    options: {
+      loaderOptions: {
+        injectStoryParameters: false,
+        prettierConfig: {
+          singleQuote: true,
+          trailingComma: 'all',
+          printWidth: 80,
+          tabWidth: 2,
+          bracketSpacing: false,
+          endOfLine: 'lf',
+          overrides: [
+            {
+              files: ['*.js', '*.jsx'],
+              options: {
+                parser: 'babel-flow',
               },
-              {
-                files: ['*.css'],
-                options: {
-                  parser: 'css',
-                },
+            },
+            {
+              files: ['*.css'],
+              options: {
+                parser: 'css',
               },
-            ],
-          },
+            },
+          ],
         },
       },
     },
-  ],
+  }, '@storybook/addon-webpack5-compiler-babel', '@chromatic-com/storybook'],
+
   babel: async (options) => ({
     ...options,
     sourceType: 'unambiguous',
@@ -74,6 +68,7 @@ module.exports = {
     ],
     plugins: ['macros'],
   }),
+
   webpackFinal: async (config) => {
     config.module.rules = config.module.rules.map((rule) => {
       if (rule.test && rule.test.toString().includes('woff')) {
@@ -108,9 +103,15 @@ module.exports = {
     config.resolve.extensions.push('.js', '.jsx');
     return config;
   },
+
   staticDirs: ['public', '../design-tokens'],
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };

package/.storybook/manager-head.html

@@ -73,4 +73,34 @@
   .sidebar-item svg {
     color: #b4a2e8;
   }
+
+  .sidebar-item svg path {
+    fill: #f4f4f4;
+  }
+
+  .search-field {
+    background-color: #f4f4f4;
+  }
+
+  .sidebar-subheading {
+    color: #f4f4f4 !important;
+  }
+
+  .sidebar-subheading svg path {
+    fill: #f4f4f4;
+  }
+
+  button[title='Tag filters'] {
+    display: none;
+  }
+
+  #storybook-explorer-searchfield + code + div {
+    /* Filter button */
+    display: none;
+  }
+
+  .search-field + div {
+    /* add story ui button immediately following the search bar */
+    display: none;
+  }
 </style>

package/.storybook/preview.js

@@ -35,6 +35,9 @@ import {themes} from '@storybook/theming';
 import {wd} from 'paths.macro';
 
 export const parameters = {
+  controls: {
+    disableSaveFromUI: true,
+  },
   backgrounds: {
     values: [
       {name: 'Dark', value: '#000'},

package/.vscode/extensions.json

@@ -4,6 +4,7 @@
     "streetsidesoftware.code-spell-checker",
     "esbenp.prettier-vscode",
     "simonsiefke.svg-preview",
-    "flowtype.flow-for-vscode"
+    "flowtype.flow-for-vscode",
+    "johnpapa.vscode-peacock"
   ]
 }

package/.vscode/settings.json

@@ -2,5 +2,25 @@
   "eslint.validate": ["javascript", "javascriptreact"],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
-  }
+  },
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#65c89b",
+    "activityBar.background": "#65c89b",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#945bc4",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#15202b99",
+    "sash.hoverBorder": "#65c89b",
+    "statusBar.background": "#42b883",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#359268",
+    "statusBarItem.remoteBackground": "#42b883",
+    "statusBarItem.remoteForeground": "#15202b",
+    "titleBar.activeBackground": "#42b883",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#42b88399",
+    "titleBar.inactiveForeground": "#15202b99"
+  },
+  "peacock.color": "#42b883"
 }

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.5](https://github.com/spaced-out/ui-design-system/compare/v0.3.4...v0.3.5) (2024-11-27)
+
+
+### Features
+
+* [GDS-445, GDS-467] Add 'description' prop to TimelineItem component and pass event as second argument in checkbox onChange handler ([#290](https://github.com/spaced-out/ui-design-system/issues/290)) ([f8e234b](https://github.com/spaced-out/ui-design-system/commit/f8e234bcb3d8dcd9b1a619aa90678fe21678f937))
+* weekdayname inside weekday picker ([#293](https://github.com/spaced-out/ui-design-system/issues/293)) ([ccdc996](https://github.com/spaced-out/ui-design-system/commit/ccdc996edff4f5775723f3226e938761aaf6da8c))
+
+### [0.3.4](https://github.com/spaced-out/ui-design-system/compare/v0.3.3...v0.3.4) (2024-11-22)
+
+
+### Features
+
+* ♳ Storybook upgrade ([#289](https://github.com/spaced-out/ui-design-system/issues/289)) ([3aebe22](https://github.com/spaced-out/ui-design-system/commit/3aebe22fbeae528d17bed1c33bb84113e77a4396))
+* introducing new focus states for menu and its derivatives ([#291](https://github.com/spaced-out/ui-design-system/issues/291)) ([69f702d](https://github.com/spaced-out/ui-design-system/commit/69f702d3870bbaa4d8a9bf2be10168f3f7c939ef))
+
+
+### Bug Fixes
+
+* bumps node versions in github workflows ([716c753](https://github.com/spaced-out/ui-design-system/commit/716c753070cbce82d129972920170e03c7a2ebd2))
+
 ### [0.3.3](https://github.com/spaced-out/ui-design-system/compare/v0.3.2...v0.3.3) (2024-11-13)
 
 

package/design-tokens/color/app-color.json

@@ -75,6 +75,9 @@
       "primary": {
         "value": "{baseColor.purple.100.value}"
       },
+      "secondary": {
+        "value": "{baseColor.purple.500.value}"
+      },
       "danger": {
         "value": "{baseColor.red.100.value}"
       }
@@ -195,7 +198,7 @@
           "value": "{baseColor.white.100.value}"
         }
       },
-      "account-bar":{
+      "account-bar": {
         "fill": {
           "value": "{baseColor.indigo.920.value}"
         }

package/lib/components/Checkbox/Checkbox.js

@@ -30,12 +30,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   } = _ref;
   const checkboxInput = /*#__PURE__*/React.createRef();
   React.useImperativeHandle(forwardRef, () => checkboxInput.current);
-  const handleOnClick = () => {
+  const handleOnClick = event => {
     if (!disabled) {
       onChange && onChange({
         value,
         checked: !checked
-      });
+      }, event);
     }
   };
   React.useEffect(() => {

package/lib/components/Checkbox/Checkbox.js.flow

@@ -29,7 +29,10 @@ export type CheckboxProps = {
   focused?: boolean,
   disabled?: boolean,
   error?: boolean,
-  onChange?: ({value: string, checked: boolean}) => mixed,
+  onChange?: (
+    {value: string, checked: boolean},
+    ?SyntheticEvent<HTMLElement>,
+  ) => mixed,
   align?: GroupAlign,
   classNames?: ClassNames,
   tabIndex?: number,
@@ -61,13 +64,16 @@ export const Checkbox: React$AbstractComponent<
     const checkboxInput = React.createRef<HTMLInputElement>();
     React.useImperativeHandle(forwardRef, () => checkboxInput.current);
 
-    const handleOnClick = () => {
+    const handleOnClick = (event) => {
       if (!disabled) {
         onChange &&
-          onChange({
-            value,
-            checked: !checked,
-          });
+          onChange(
+            {
+              value,
+              checked: !checked,
+            },
+            event,
+          );
       }
     };
 

package/lib/components/Menu/Menu.module.css

@@ -1,5 +1,7 @@
 @value (
   borderWidthPrimary,
+  borderWidthNone,
+  borderWidthTertiary,
   borderRadiusMedium,
   borderRadiusSmall
 ) from '../../styles/variables/_border.css';
@@ -11,7 +13,8 @@
   colorTextPrimary,
   colorTextSecondary,
   colorTextTertiary,
-  colorBackgroundTertiary
+  colorBackgroundTertiary,
+  colorFocusSecondary
 ) from '../../styles/variables/_color.css';
 
 @value (
@@ -177,15 +180,17 @@
 }
 
 .option:focus {
-  background: colorFillSecondary;
   outline: none;
   color: colorTextPrimary;
+  box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusSecondary;
 }
 
 .option:focus-within {
-  background: colorFillSecondary;
   outline: none;
   color: colorTextPrimary;
+  box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusSecondary;
 }
 
 .option.selected {

package/lib/components/Timeline/Timeline.module.css

@@ -80,15 +80,22 @@
   flex-direction: column;
   margin-bottom: spaceMedium;
 
-  & .timelineItemTitle {
-    justify-content: var(--justify);
+  & .timelineItemInfo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: var(--align);
+    min-height: size26;
   }
 }
 
 .timelineItemTitle {
+  composes: bodyMedium from '../../styles/typography.module.css';
+}
+
+.timelineItemDescription {
   composes: bodySmall from '../../styles/typography.module.css';
   composes: secondary from '../../styles/typography.module.css';
-  min-height: size26;
 }
 
 .timelineItemCardWrapper {

package/lib/components/Timeline/TimelineItem/TimelineItem.js

@@ -25,6 +25,7 @@ const TimelineItem_ = (_ref, ref) => {
     children,
     iconColor = _typography.TEXT_COLORS.information,
     classNames,
+    description,
     orientation = _Timeline.ORIENTATION.left,
     parentComponent,
     enableCardWrapper = true
@@ -56,13 +57,14 @@ const TimelineItem_ = (_ref, ref) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: _TimelineModule.default.border
   }))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      '--justify': orientation === 'left' ? 'flex-start' : 'flex-end'
-    },
     className: _TimelineModule.default.timelineItemEventDetails
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TimelineModule.default.timelineItemInfo
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_TimelineModule.default.timelineItemTitle, classNames?.title)
-  }, title), /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+  }, title), description ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TimelineModule.default.timelineItemDescription, classNames?.description)
+  }, description) : null), /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: enableCardWrapper,
     wrapper: children => /*#__PURE__*/React.createElement(_Card.Card, {
       paddingTop: _Card.PADDING_SIZES.small,

package/lib/components/Timeline/TimelineItem/TimelineItem.js.flow

@@ -19,6 +19,7 @@ type ClassNames = $ReadOnly<{
   icon?: string,
   title?: string,
   wrapper?: string,
+  description?: string,
 }>;
 
 export type TimelineItemProps = {
@@ -29,6 +30,7 @@ export type TimelineItemProps = {
   iconType?: IconType,
   iconColor?: ColorTypes,
   classNames?: ClassNames,
+  description?: React.Node,
   orientation?: Orientation,
   parentComponent?: React.Node,
   enableCardWrapper?: boolean,
@@ -43,6 +45,7 @@ const TimelineItem_ = (
     children,
     iconColor = TEXT_COLORS.information,
     classNames,
+    description,
     orientation = ORIENTATION.left,
     parentComponent,
     enableCardWrapper = true,
@@ -78,14 +81,21 @@ const TimelineItem_ = (
           <div className={css.border} />
         </div>
       </div>
-      <div
-        style={{
-          '--justify': orientation === 'left' ? 'flex-start' : 'flex-end',
-        }}
-        className={css.timelineItemEventDetails}
-      >
-        <div className={classify(css.timelineItemTitle, classNames?.title)}>
-          {title}
+      <div className={css.timelineItemEventDetails}>
+        <div className={css.timelineItemInfo}>
+          <div className={classify(css.timelineItemTitle, classNames?.title)}>
+            {title}
+          </div>
+          {description ? (
+            <div
+              className={classify(
+                css.timelineItemDescription,
+                classNames?.description,
+              )}
+            >
+              {description}
+            </div>
+          ) : null}
         </div>
         <ConditionalWrapper
           condition={enableCardWrapper}

package/lib/components/WeekdayPicker/WeekdayPicker.js

@@ -63,7 +63,12 @@ const DayButton = _ref => {
     "aria-label": `Select ${day.label}`,
     tabIndex: isDisabled || readOnly ? -1 : 0,
     role: "checkbox"
-  }, day.label);
+  }, day.secondaryLabel && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_WeekdayPickerModule.default.secondaryLabel, {
+      [_WeekdayPickerModule.default.secondaryLabelSelected]: isSelected,
+      [_WeekdayPickerModule.default.secondaryLabelDisabled]: isDisabled
+    })
+  }, day.secondaryLabel), day.label);
 };
 const WeekdayPicker = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {

package/lib/components/WeekdayPicker/WeekdayPicker.js.flow

@@ -36,6 +36,7 @@ type WeekdayPickerSize = $Values<typeof WEEKDAY_PICKER_SIZE>;
 type Weekday = {
   key: string,
   label: string,
+  secondaryLabel?: string,
 };
 
 export type WeekdayPickerProps = {
@@ -94,6 +95,16 @@ const DayButton = ({
     tabIndex={isDisabled || readOnly ? -1 : 0}
     role="checkbox"
   >
+    {day.secondaryLabel && (
+      <div
+        className={classify(css.secondaryLabel, {
+          [css.secondaryLabelSelected]: isSelected,
+          [css.secondaryLabelDisabled]: isDisabled,
+        })}
+      >
+        {day.secondaryLabel}
+      </div>
+    )}
     {day.label}
   </UnstyledButton>
 );

package/lib/components/WeekdayPicker/WeekdayPicker.module.css

@@ -1,5 +1,4 @@
-@value (
-  colorTextSecondary,
+@value (colorTextSecondary,
   colorFillSecondary,
   colorButtonFillTertiaryHovered,
   colorTextPrimary,
@@ -10,13 +9,12 @@
   colorFillDisabled,
   colorFocusPrimary,
   colorBackgroundSecondary,
-  colorGrayLightest
-) from '../../styles/variables/_color.css';
+  colorGrayLightest) from '../../styles/variables/_color.css';
 
-@value (spaceXXSmall,spaceXSmall,spaceSmall) from '../../styles/variables/_space.css';
-@value (size42,size34) from '../../styles/variables/_size.css';
+@value (spaceXXSmall, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
+@value (size8, size42, size34) from '../../styles/variables/_size.css';
 
-@value (borderRadiusSmall,borderWidthNone,borderWidthTertiary) from '../../styles/variables/_border.css';
+@value (borderRadiusSmall, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';
 
 .weekdayPickerContainer {
   display: flex;
@@ -32,6 +30,7 @@
 .weekdayButton {
   composes: formLabelSmall from '../../styles/typography.module.css';
   composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  flex-direction: column;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -63,6 +62,10 @@
   composes: buttonTextSmall from '../../styles/typography.module.css';
   height: size34;
   width: size34;
+
+  .secondaryLabel {
+    font-size: size8;
+  }
 }
 
 .weekdayButtonSelected {
@@ -73,6 +76,11 @@
   &:focus-visible {
     background-color: colorButtonFillPrimaryHovered;
     color: colorTextInversePrimary;
+
+    .secondaryLabel {
+      background-color: colorButtonFillPrimaryHovered;
+      color: colorTextInversePrimary;
+    }
   }
 }
 
@@ -83,6 +91,28 @@
   cursor: not-allowed;
 }
 
+.secondaryLabel {
+  composes: bodySmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+
+  /* Added a transition to .secondaryLabel for smoother and immediate style updates 
+   during hover or focus-visible states of .secondaryLabelSelected. This ensures the 
+   change feels intentional, even if there’s a minor rendering delay. */
+  transition: background-color 0.1s, color 0.1s, font-size 0.1s;
+}
+
+.secondaryLabelSelected {
+  background-color: colorButtonFillPrimaryEnabled;
+  color: colorTextInversePrimary;
+}
+
+.secondaryLabelDisabled {
+  background-color: colorFillDisabled;
+  color: colorTextDisabled;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
 .weekdayLabel {
   composes: formLabelSmall from '../../styles/typography.module.css';
   color: colorTextSecondary;

package/lib/styles/index.css

@@ -66,6 +66,8 @@
 
 @value colorFocusPrimary: #ccc0f0;
 
+@value colorFocusSecondary: #5c34cd;
+
 @value colorFocusDanger: #f6b9c8;
 
 @value colorFillPrimary: #5c34cd;

package/lib/styles/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
-exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = void 0;
-exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = void 0;
+exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusSecondary = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
+exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = void 0;
+exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -75,6 +75,8 @@ const colorBackgroundTertiary = '#ffffff';
 exports.colorBackgroundTertiary = colorBackgroundTertiary;
 const colorFocusPrimary = '#ccc0f0';
 exports.colorFocusPrimary = colorFocusPrimary;
+const colorFocusSecondary = '#5c34cd';
+exports.colorFocusSecondary = colorFocusSecondary;
 const colorFocusDanger = '#f6b9c8';
 exports.colorFocusDanger = colorFocusDanger;
 const colorFillPrimary = '#5c34cd';

package/lib/styles/index.js.flow

@@ -68,6 +68,8 @@ export const colorBackgroundTertiary = '#ffffff';
 
 export const colorFocusPrimary = '#ccc0f0';
 
+export const colorFocusSecondary = '#5c34cd';
+
 export const colorFocusDanger = '#f6b9c8';
 
 export const colorFillPrimary = '#5c34cd';

package/lib/styles/variables/_color.css

@@ -42,6 +42,8 @@
 
 @value colorFocusPrimary: #ccc0f0;
 
+@value colorFocusSecondary: #5c34cd;
+
 @value colorFocusDanger: #f6b9c8;
 
 @value colorFillPrimary: #5c34cd;

package/lib/styles/variables/_color.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
-exports.colorWarningLightest = void 0;
+exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusSecondary = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
+exports.colorWarningLightest = exports.colorWarningLight = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -50,6 +50,8 @@ const colorBackgroundTertiary = '#ffffff';
 exports.colorBackgroundTertiary = colorBackgroundTertiary;
 const colorFocusPrimary = '#ccc0f0';
 exports.colorFocusPrimary = colorFocusPrimary;
+const colorFocusSecondary = '#5c34cd';
+exports.colorFocusSecondary = colorFocusSecondary;
 const colorFocusDanger = '#f6b9c8';
 exports.colorFocusDanger = colorFocusDanger;
 const colorFillPrimary = '#5c34cd';

package/lib/styles/variables/_color.js.flow

@@ -44,6 +44,8 @@ export const colorBackgroundTertiary = '#ffffff';
 
 export const colorFocusPrimary = '#ccc0f0';
 
+export const colorFocusSecondary = '#5c34cd';
+
 export const colorFocusDanger = '#f6b9c8';
 
 export const colorFillPrimary = '#5c34cd';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -63,16 +63,18 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-a11y": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-mdx-gfm": "^7.6.7",
-    "@storybook/addon-storysource": "^7.6.7",
-    "@storybook/addons": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-webpack5": "^7.6.7",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-react": "^2.0.0",
-    "@storybook/theming": "^7.6.7",
+    "@storybook/addon-a11y": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-mdx-gfm": "^8.4.2",
+    "@storybook/addon-storysource": "^8.4.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/testing-react": "^2.0.1",
+    "@storybook/theming": "^8.4.2",
     "@testing-library/react": "^11.2.7",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
@@ -90,7 +92,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.11.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "flow-bin": "^0.184.0",
     "gulp": "^4.0.2",
@@ -101,7 +103,6 @@
     "invariant": "^2.2.4",
     "jest": "^29.3.1",
     "lint-staged": "^10.5.1",
-    "node-sass": "^7.0.0",
     "paths.macro": "^3.0.1",
     "prettier": "^2.5.1",
     "react": "17.0.2",
@@ -109,7 +110,7 @@
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",
-    "storybook": "^7.6.7",
+    "storybook": "^8.4.2",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.9",
     "style-dictionary": "^3.7.1"
@@ -129,7 +130,7 @@
     }
   },
   "volta": {
-    "node": "16.16.0",
+    "node": "18.20.5",
     "yarn": "1.22.19"
   }
 }