@hyphen/hyphen-components 8.0.0 → 8.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -56,7 +56,7 @@
     "react-select": "^5.10.0",
     "react-select-event": "^5.5.1",
     "uuid": "^11.1.1",
-    "@hyphen/hyphen-design-tokens": "^8.0.0"
+    "@hyphen/hyphen-design-tokens": "^8.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
@@ -87,7 +87,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.11.0",
-    "css-minimizer-webpack-plugin": "^5.0.1",
+    "css-minimizer-webpack-plugin": "^8.0.0",
     "cssnano": "^6.1.2",
     "csstype": "^3.1.3",
     "eslint": "^8.57.0",
@@ -102,7 +102,7 @@
     "jest-preview": "^0.3.1",
     "mini-css-extract-plugin": "^2.9.1",
     "playwright": "^1.60.0",
-    "postcss": "^8.5.18",
+    "postcss": "^8.5.23",
     "postcss-loader": "^7.3.4",
     "postcss-modules": "^6.0.0",
     "react": "^18.3.1",

package/src/components/Badge/Badge.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 /*
  * Trims the padding on whichever side carries a graphic rather than a text label,

package/src/components/Button/Button.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 :root {
   --button-box-shadow-focus: 0 0 0 4px var(--color-base-grey-300);

package/src/components/CheckboxInput/components/Checkbox.module.scss

@@ -1,5 +1,5 @@
-@import '../../../styles/mixins';
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '../../../styles/mixins' as *;
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 $sm-dimension: 20px;
 $md-dimension: 24px;

package/src/components/Drawer/Drawer.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .drawer {
   top: 0;

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -37,7 +37,7 @@ const DropdownMenuItem = React.forwardRef<
     />
   );
 });
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+DropdownMenuItem.displayName = 'DropdownMenuItem';
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -58,7 +58,7 @@ const DropdownMenuContent = React.forwardRef<
     />
   </DropdownMenuPrimitive.Portal>
 ));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+DropdownMenuContent.displayName = 'DropdownMenuContent';
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
@@ -76,7 +76,7 @@ const DropdownMenuLabel = React.forwardRef<
     {...props}
   />
 ));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -95,7 +95,7 @@ const DropdownMenuSeparator = React.forwardRef<
     {...props}
   />
 ));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
 
 const DropdownMenuShortcut = ({
   className,
@@ -133,8 +133,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     <Icon name="caret-sm-right" className="m-left-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -149,8 +148,7 @@ const DropdownMenuSubContent = React.forwardRef<
     {...props}
   />
 ));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+DropdownMenuSubContent.displayName = 'DropdownMenuSubContent';
 
 export {
   DropdownMenu,

package/src/components/Modal/Modal.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .modal-close {
   border: none;

package/src/components/RadioGroup/RadioInput/RadioInput.module.scss

@@ -1,5 +1,5 @@
-@import '../../../styles/mixins';
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '../../../styles/mixins' as *;
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 $sm-dimension: 16px;
 $md-dimension: 20px;

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

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 // The following styles required the :global tag since they need to be applied to react-select elements for which we do not own the markup
 
 @mixin react-select-icon {

package/src/components/SelectInputInset/SelectInputInset.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin floating-label-minimize-md {
   opacity: 0.75;

package/src/components/SelectInputNative/SelectInputNative.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 %disabled-base {
   background-color: var(--color-background-disabled);

package/src/components/Switch/Switch.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin thumb-size-sm {
   width: calc(var(--size-spacing-2xl) - 4px);

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

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin size-sm {
   border-radius: var(

package/src/components/TextInputInset/TextInputInset.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin floating-label-minimize-md {
   opacity: 0.75;

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

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin size-sm {
   border-radius: var(

package/src/components/TextareaInputInset/TextareaInputInset.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin floating-label-minimize-md {
   opacity: 0.75;

package/src/components/Toggle/Toggle.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .item {
   line-height: 1;

package/src/components/ToggleGroup/ToggleGroup.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .item {
   line-height: 1;

package/src/styles/display.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables.scss';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .display-inherit {
   display: inherit;

package/src/styles/flex.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables.scss';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 // min-width and min-height needed because of this
 // https://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size

package/src/styles/overflow.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .overflow-visible { overflow: visible; }
 .overflow-hidden { overflow: hidden; }
 .overflow-clip { overflow: clip; }

package/src/styles/position.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .position-absolute { position: absolute; }
 .position-fixed { position: fixed; }
 .position-relative { position: relative; }

package/src/styles/text-align.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .text-align-left { text-align: left; }
 .text-align-right { text-align: right; }
 .text-align-center { text-align: center; }

package/src/styles/utilities.scss

@@ -1,13 +1,14 @@
+@use './animation';
+@use './cursor';
+@use './display';
+@use './flex';
+@use './overflow';
+@use './text-align';
+@use './white-space';
+@use './position';
+@use './transform';
+
 @import '@hyphen/hyphen-design-tokens/build/utilities/utilities.css';
-@import './animation';
-@import './cursor';
-@import './display';
-@import './flex';
-@import './overflow';
-@import './text-align';
-@import './white-space';
-@import './position';
-@import './transform';
 
 .sr-only {
   position: absolute;

package/src/styles/variables/index.scss

@@ -1,3 +1,4 @@
+@use './forms';
+
 @import '@hyphen/hyphen-design-tokens/build/css/variables.css';
 @import '@hyphen/hyphen-design-tokens/build/css/variables-root-dark.css';
-@import './forms';

package/src/styles/white-space.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .ws-normal { white-space: normal; }
 .ws-nowrap { white-space: nowrap; }
 .ws-pre { white-space: pre; }