@hyphen/hyphen-components 2.12.0 → 2.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -62,62 +62,61 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.23.7",
-    "@chromatic-com/storybook": "^1.3.3",
+    "@chromatic-com/storybook": "^1.8.0",
     "@semantic-release/commit-analyzer": "^11.1.0",
-    "@size-limit/preset-small-lib": "^11.0.1",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-mdx-gfm": "^8.0.9",
-    "@storybook/addon-themes": "^8.0.9",
-    "@storybook/blocks": "^8.0.9",
-    "@storybook/manager-api": "^8.0.9",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-vite": "^8.0.9",
-    "@storybook/theming": "^8.0.9",
-    "@testing-library/jest-dom": "^6.2.1",
+    "@size-limit/preset-small-lib": "^11.1.4",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-themes": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
-    "@tsconfig/recommended": "^1.0.3",
-    "@tsconfig/vite-react": "^3.0.0",
-    "@types/react": "^18.2.47",
+    "@tsconfig/recommended": "^1.0.7",
+    "@tsconfig/vite-react": "^3.0.2",
+    "@types/react": "^18.3.5",
     "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.3.0",
     "@types/react-modal": "^3.16.3",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
-    "chromatic": "^11.3.0",
+    "chromatic": "^11.7.1",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.9.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cssnano": "^6.0.3",
     "csstype": "^3.1.3",
-    "dts-cli": "^2.0.4",
+    "dts-cli": "^2.0.5",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-preview": "^0.3.1",
-    "mini-css-extract-plugin": "^2.7.7",
+    "mini-css-extract-plugin": "^2.9.1",
     "postcss-loader": "^7.3.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-scss": "^4.0.0",
-    "sass": "^1.69.7",
+    "sass": "^1.77.8",
     "sass-loader": "^13.3.3",
     "semantic-release": "^23.0.0",
-    "size-limit": "^11.0.1",
-    "storybook": "^8.0.9",
+    "size-limit": "^11.1.4",
+    "storybook": "^8.2.9",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
-    "vite": "^5.1.6",
-    "webpack": "^5.89.0",
+    "vite": "^5.4.2",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-fix-style-only-entries": "^0.6.1"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.9.6"
+    "@rollup/rollup-linux-x64-gnu": "^4.21.2"
   },
   "dependencies": {
     "@hyphen/hyphen-design-tokens": "^4.9.0",
@@ -126,13 +125,13 @@
     "classnames": "^2.5.1",
     "date-fns": "^2.16.1",
     "focus-trap-react": "^10.2.3",
-    "formik": "^2.4.5",
+    "formik": "^2.4.6",
     "react-datepicker": "^6.3.0",
-    "react-focus-lock": "^2.11.2",
+    "react-focus-lock": "^2.13.2",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
-    "react-remove-scroll": "^2.5.9",
-    "react-router-dom": "^6.22.3",
+    "react-remove-scroll": "^2.5.10",
+    "react-router-dom": "^6.26.1",
     "react-select": "^5.8.0",
     "react-select-event": "^5.5.1"
   }

package/src/components/Box/Box.tsx

@@ -453,7 +453,9 @@ export const Box: FC<BoxProps> = forwardRef(
       };
 
       if (typeof direction === 'string') {
-        childGapDirection = { base: getChildGapMarginDirection(direction) };
+        childGapDirection = {
+          base: getChildGapMarginDirection(direction as CssFlexDirectionValue),
+        };
       } else if (typeof direction === 'object' && direction !== null) {
         childGapDirection = Object.keys(direction).reduce(
           (acc, curr) => ({

package/src/components/SelectInput/SelectInput.module.scss

@@ -25,7 +25,6 @@
   @extend %react-select-icon;
 }
 
-// stylelint-disable
 @mixin size-sm {
   :global(.react-select__control) {
     border-radius: var(
@@ -201,6 +200,16 @@
       }
     }
 
+    :global(.react-select__option--is-selected),
+    :global(.react-select__option--is-focused) {
+      background-color: var(--color-background-tertiary);
+    }
+
+    :global(.react-select__option),
+    :global(.react-select__single-value) {
+      color: var(--color-font-base);
+    }
+
     :global(.react-select__control) {
       line-height: var(
         --form-control-line-height,
@@ -220,10 +229,7 @@
       }
 
       :global(.react-select__placeholder) {
-        color: var(
-          --form-control-placeholder-color,
-          var(--INTERNAL_form-control-placeholder-color)
-        );
+        color: var(--color-font-placeholder);
       }
 
       :global(.react-select__clear-indicator) {
@@ -253,16 +259,15 @@
 
       &:global(.react-select__control--is-disabled) {
         :global(.react-select__dropdown-indicator) {
-          color: var(
-            --form-control-placeholder-color,
-            var(--INTERNAL_form-control-placeholder-color)
-          );
+          color: var(--color-font-disabled);
         }
       }
     }
 
     :global(.react-select__menu) {
       z-index: var(--size-z-index-popover);
+      background-color: var(--color-background-primary);
+      border-color: var(--color-border-default);
     }
 
     &.error {

package/src/components/TextInput/TextInput.module.scss

@@ -307,10 +307,7 @@
 
     &::placeholder {
       opacity: 1;
-      color: var(
-        --form-control-placeholder-color,
-        var(--INTERNAL_form-control-placeholder-color)
-      );
+      color: var(--color-font-placeholder);
     }
 
     &:focus {

package/src/components/TextareaInput/TextareaInput.module.scss

@@ -139,10 +139,7 @@
 
     &::placeholder {
       opacity: 1;
-      color: var(
-        --form-control-placeholder-color,
-        var(--INTERNAL_form-control-placeholder-color)
-      );
+      color: var(--color-font-placeholder);
     }
 
     &:focus {

package/src/styles/variables/forms.scss

@@ -50,7 +50,6 @@
   --INTERNAL_form-control-description-color: var(--color-font-secondary);
   --INTERNAL_form-control-icon-color: var(--color-base-grey-300);
   --INTERNAL_form-control-icon-color-hover: var(--color-base-grey);
-  --INTERNAL_form-control-placeholder-color: var(--color-font-placeholder);
 
   // ----RADIO GROUP----
   --INTERNAL_form-control-radio-group-description-spacing: var(