@danske/sapphire-css 51.0.0 → 52.2.0

package/components/searchField/searchField.module.css

@@ -23,6 +23,7 @@
   color: var(--sapphire-semantic-color-foreground-primary);
   font-size: var(--sapphire-semantic-size-font-control-lg);
   height: var(--sapphire-semantic-size-height-control-lg);
+  position: relative;
   background: var(
     --sapphire-semantic-color-background-action-secondary-default
   );
@@ -116,19 +117,17 @@
    * Css only solution to:
    *  - hide the clear button when the input is empty.
    *  - Apply a gentle transition on appearance/disappearance
+   * The button's space is kept reserved (only opacity/scale animate) so the
+   * input's flex space doesn't shift when the button appears/disappears.
    * IMPORTANT: there must be a placeholder provided for :placeholder-shown to
    * work. " " can be set as placeholder as a fallback, or
    * sapphire-search-field__input--empty class can be used instead.
    */
   opacity: 0;
-  width: 0; /* To not cover the input when invisible. */
   transform: scale(0.85);
+  cursor: text; /* cursor: text is used to avoid the button's hover effect when the input is empty */
   transition: transform var(--sapphire-semantic-time-fade-quick),
-    opacity var(--sapphire-semantic-time-fade-quick),
-    width var(--sapphire-semantic-time-fade-quick)
-      /* Zero duration will kill the transition */
-      var(--sapphire-semantic-time-fade-quick)
-      /* Delaying to prevent width transition*/;
+    opacity var(--sapphire-semantic-time-fade-quick);
 }
 
 /*
@@ -166,3 +165,29 @@
 .sapphire-search-field--md .sapphire-search-field__icon {
   margin-left: var(--sapphire-semantic-size-spacing-sm);
 }
+
+/**
+ * Small Size
+ */
+.sapphire-search-field--sm {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  height: var(--sapphire-semantic-size-height-control-sm);
+  border-radius: var(--sapphire-semantic-size-height-control-sm);
+}
+
+.sapphire-search-field--sm .sapphire-search-field__input {
+  padding-left: var(--sapphire-semantic-size-height-control-sm);
+}
+
+.sapphire-search-field--sm .sapphire-search-field__button {
+  height: var(--sapphire-semantic-size-height-control-sm);
+  width: var(--sapphire-semantic-size-height-control-sm);
+}
+
+.sapphire-search-field--sm .sapphire-search-field__input:last-child {
+  padding-right: var(--sapphire-semantic-size-spacing-xs);
+}
+
+.sapphire-search-field--sm .sapphire-search-field__icon {
+  margin-left: var(--sapphire-semantic-size-spacing-xs);
+}

package/components/searchField/searchField.module.css.d.ts

@@ -10,6 +10,7 @@ declare const styles: {
   readonly "sapphire-search-field__input--empty": string;
   readonly "sapphire-search-field__icon": string;
   readonly "sapphire-search-field--md": string;
+  readonly "sapphire-search-field--sm": string;
 };
 export = styles;
 

package/components/select/select.module.css

@@ -24,8 +24,7 @@
   height: var(--sapphire-semantic-size-height-control-lg);
   box-sizing: border-box;
   cursor: pointer;
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0
-    var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
   border: none;
   background: var(--sapphire-semantic-color-background-field);
   width: 100%;
@@ -46,6 +45,14 @@
   gap: var(--sapphire-semantic-size-spacing-xs);
 }
 
+.sapphire-select--sm .sapphire-select__button {
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  height: var(--sapphire-semantic-size-height-control-sm);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-sm) 0
+    var(--sapphire-semantic-size-spacing-control-horizontal-md);
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+}
+
 .sapphire-select__value {
   flex: 1 0 0;
   min-width: 0;
@@ -61,6 +68,10 @@
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+.sapphire-select--sm .sapphire-select__value {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+}
+
 .sapphire-select__placeholder {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -81,6 +92,11 @@
   height: var(--sapphire-semantic-size-icon-sm);
 }
 
+.sapphire-select--sm .sapphire-select__icon-container {
+  width: var(--sapphire-semantic-size-icon-sm);
+  height: var(--sapphire-semantic-size-icon-sm);
+}
+
 /**
  * Prefix
  */
@@ -91,15 +107,18 @@
   color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
-.sapphire-select:not(.sapphire-select--md)
-  .sapphire-select__button:has(.sapphire-select__prefix) {
-  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+.sapphire-select--sm .sapphire-select__button:has(.sapphire-select__prefix) {
+  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-sm);
 }
 
 .sapphire-select--md .sapphire-select__prefix {
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+.sapphire-select--sm .sapphire-select__prefix {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+}
+
 /*
  * Search input. If visually-hidden styles are not inline,
  * data-hidden="true" can be added when the input is visually hidden,
@@ -123,6 +142,34 @@
   z-index: 1;
 }
 
+/*
+ * iOS keyboard trigger.
+ *
+ * An invisible <label htmlFor> overlay (a sibling of __button) that covers the
+ * trigger while the searchable select is closed. On touch devices, tapping it
+ * forwards a trusted focus to the search input, which is the only way to make
+ * iOS Safari open the software keyboard — the trigger button itself cannot,
+ * because React Aria's usePress defers onPress to the click event and Sapphire's
+ * useButton (usePreventTouchEnd) calls preventDefault() on the trigger touchend.
+ *
+ * pointer-events is disabled by default so mouse/keyboard users interact with the
+ * trigger button exactly as before (hover, press, toggle). It is only enabled on
+ * touch devices, where the keyboard problem exists.
+ */
+.sapphire-select__ios-keyboard-trigger {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .sapphire-select__ios-keyboard-trigger {
+    pointer-events: auto;
+  }
+}
+
 /**
  * Error
  */
@@ -163,12 +210,6 @@
   outline-offset: calc(0px - var(--sapphire-semantic-size-focus-ring));
 }
 
-.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button {
-  outline: solid var(--sapphire-semantic-size-focus-ring)
-    var(--sapphire-semantic-color-border-negative-default);
-  outline-offset: calc(-1 * var(--sapphire-semantic-size-focus-ring));
-}
-
 .sapphire-select.is-disabled .sapphire-select__button {
   cursor: not-allowed;
   opacity: var(--sapphire-semantic-opacity-disabled);

package/components/select/select.module.css.d.ts

@@ -2,12 +2,14 @@ declare const styles: {
   readonly "sapphire-select": string;
   readonly "sapphire-select__button": string;
   readonly "sapphire-select--md": string;
+  readonly "sapphire-select--sm": string;
   readonly "sapphire-select__value": string;
   readonly "sapphire-select__placeholder": string;
   readonly "sapphire-select__icon-container": string;
   readonly "sapphire-select__prefix": string;
   readonly "sapphire-select__search-input": string;
   readonly "sapphire-select__native-select": string;
+  readonly "sapphire-select__ios-keyboard-trigger": string;
   readonly "sapphire-select--error": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;

package/components/slider/slider.module.css

@@ -4,12 +4,11 @@
   flex-direction: column;
   gap: var(--sapphire-semantic-size-spacing-xs);
   justify-content: center;
-  width: fit-content;
 }
 
 .sapphire-slider__track {
   position: relative;
-  width: var(--sapphire-semantic-size-width-field);
+  width: 100%;
   height: var(--sapphire-semantic-size-height-control-2xs);
   touch-action: none;
 }
@@ -22,7 +21,7 @@
   backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
   height: var(--sapphire-global-size-generic-10);
   border-radius: var(--sapphire-semantic-size-radius-sm);
-  width: var(--sapphire-semantic-size-width-field);
+  width: 100%;
   top: 50%;
   transform: translateY(-50%);
 }

package/components/switch/switch.module.css

@@ -66,6 +66,12 @@
   line-height: var(--sapphire-semantic-size-height-control-2xs);
 }
 
+.sapphire-switch--sm .sapphire-switch-label {
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  line-height: var(--sapphire-semantic-size-height-control-2xs);
+}
+
 /* focus */
 .sapphire-switch:not(.js-focus)
   .sapphire-switch-input:focus-visible
@@ -85,8 +91,9 @@
   width: var(--sapphire-global-size-generic-110);
   box-shadow: inset 0 0 0 var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-field-default);
-  transition: box-shadow var(--sapphire-semantic-time-motion-quick)
-    var(--sapphire-semantic-transitions-fade);
+  transition-property: background, box-shadow;
+  transition-duration: var(--sapphire-semantic-time-motion-quick);
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
   height: var(--sapphire-semantic-size-height-control-xs);
   border-radius: calc(var(--sapphire-semantic-size-height-control-xs) / 2);
   /* Prevents the component from shrinking */
@@ -162,7 +169,7 @@
   padding: var(--sapphire-global-size-static-5);
 
   height: 100%;
-  aspect-ratio: 1/1;
+  width: var(--sapphire-semantic-size-height-control-xs);
   border-radius: 50%;
   background-color: var(--sapphire-semantic-color-border-field-default);
   background-clip: content-box;
@@ -202,17 +209,41 @@
 }
 
 .sapphire-switch--md .sapphire-switch-track {
-  width: var(--sapphire-global-size-generic-80);
+  width: 2.25rem /* 36px - do we want a token for this? */;
   height: var(--sapphire-semantic-size-height-control-2xs);
   border-radius: calc(var(--sapphire-semantic-size-height-control-2xs) / 2);
 }
 
+.sapphire-switch--md .sapphire-switch-track::after {
+  width: var(--sapphire-semantic-size-height-control-2xs);
+}
+
 .sapphire-switch--md
   .sapphire-switch-input:checked
   ~ .sapphire-switch-track::after {
   left: calc(100% - var(--sapphire-semantic-size-height-control-2xs));
 }
 
+.sapphire-switch--sm .sapphire-switch-track {
+  width: 1.875rem; /* 30px - do we want a token for this? */
+  height: var(--sapphire-semantic-size-height-box-md);
+  border-radius: calc(var(--sapphire-semantic-size-height-box-md) / 2);
+}
+
+.sapphire-switch--sm .sapphire-switch-track::after {
+  width: var(--sapphire-semantic-size-height-box-md);
+}
+
+.sapphire-switch--sm
+  .sapphire-switch-input:checked
+  ~ .sapphire-switch-track::after {
+  left: calc(100% - var(--sapphire-semantic-size-height-box-md));
+}
+
+.sapphire-switch--sm {
+  gap: var(--sapphire-semantic-size-spacing-xs);
+}
+
 /* Note */
 .sapphire-switch__note {
   display: block;
@@ -231,8 +262,11 @@
 .sapphire-switch__note--md {
   font-size: var(--sapphire-semantic-size-font-label-sm);
   line-height: var(--sapphire-semantic-size-line-height-sm);
-  margin-left: calc(
-    var(--sapphire-semantic-size-spacing-sm) +
-      var(--sapphire-global-size-generic-80)
-  );
+  margin-left: calc(var(--sapphire-semantic-size-spacing-sm) + 2.25rem);
+}
+
+.sapphire-switch__note--sm {
+  font-size: var(--sapphire-semantic-size-font-label-sm);
+  line-height: var(--sapphire-semantic-size-line-height-sm);
+  margin-left: calc(var(--sapphire-semantic-size-spacing-xs) + 1.875rem);
 }

package/components/switch/switch.module.css.d.ts

@@ -4,6 +4,7 @@ declare const styles: {
   readonly "sapphire-switch-input": string;
   readonly "sapphire-switch-label": string;
   readonly "sapphire-switch--md": string;
+  readonly "sapphire-switch--sm": string;
   readonly "js-focus": string;
   readonly "sapphire-switch-track": string;
   readonly "is-focus": string;
@@ -12,6 +13,7 @@ declare const styles: {
   readonly "is-hover": string;
   readonly "sapphire-switch__note": string;
   readonly "sapphire-switch__note--md": string;
+  readonly "sapphire-switch__note--sm": string;
 };
 export = styles;
 

package/components/table/table.module.css

@@ -19,6 +19,11 @@
   background-color: var(--sapphire-semantic-color-background-surface);
 }
 
+.sapphire-table--negative-margin-self {
+  margin-left: calc(var(--sapphire-semantic-size-spacing-sm) * -1);
+  width: calc(100% + (var(--sapphire-semantic-size-spacing-sm) * 2));
+}
+
 .sapphire-table--overflow {
   /*
    * If the "sapphire-table" has a set height the table needs to overflow.
@@ -31,6 +36,7 @@
   border-spacing: 0;
   width: 100%;
   table-layout: auto;
+  --sapphire-table-side-padding: var(--sapphire-table-cell-spacing-h);
 }
 
 .sapphire-table__table--fixed-layout {
@@ -104,6 +110,14 @@
   width: 100%;
 }
 
+.sapphire-table__headCell:first-child .sapphire-table__headCell_container {
+  padding-left: var(--sapphire-table-side-padding);
+}
+
+.sapphire-table__headCell:last-child .sapphire-table__headCell_container {
+  padding-right: var(--sapphire-table-side-padding);
+}
+
 .sapphire-table__cell--alignRight .sapphire-table__headCell_container {
   justify-content: flex-end;
 }
@@ -217,6 +231,14 @@
     var(--sapphire-table-cell-spacing-h);
 }
 
+.sapphire-table__cell:not(.sapphire-table__cell--tree):first-child {
+  padding-left: var(--sapphire-table-side-padding);
+}
+
+.sapphire-table__cell:not(.sapphire-table__cell--tree):last-child {
+  padding-right: var(--sapphire-table-side-padding);
+}
+
 .sapphire-table__cell-contents {
   display: block;
   width: 100%;
@@ -265,11 +287,24 @@
   box-sizing: content-box;
   text-align: center;
 }
+
+.sapphire-table__selectionCell:first-child {
+  padding-left: var(--sapphire-table-side-padding);
+}
+
+.sapphire-table__selectionCell:last-child {
+  padding-right: var(--sapphire-table-side-padding);
+}
+
 .sapphire-table__head .sapphire-table__selectionCell {
   padding: var(--sapphire-semantic-size-spacing-2xs)
     var(--sapphire-table-cell-spacing-h);
 }
 
+.sapphire-table__head .sapphire-table__selectionCell:first-child {
+  padding-left: var(--sapphire-table-side-padding);
+}
+
 td.sapphire-table__selectionCell,
 th.sapphire-table__selectionCell {
   width: var(--sapphire-global-size-generic-50);
@@ -330,8 +365,8 @@ th.sapphire-table__selectionCell:first-child {
 }
 
 /* Applied only when the "action" on rows is disabled. If only selection is disabled, only the checkbox should be disabled */
-.sapphire-table__row.is-disabled:not(.sapphire-table__row--selected)
-  .sapphire-table__cell {
+.sapphire-table__row.is-disabled .sapphire-table__cell,
+.sapphire-table__row.is-disabled .sapphire-table__selectionCell {
   opacity: var(--sapphire-semantic-opacity-disabled);
 }
 
@@ -402,6 +437,14 @@ th.sapphire-table__selectionCell:first-child {
   --sapphire-table-row-level: 5;
 }
 
+.sapphire-table__headCell.sapphire-table__cell--tree {
+  --sapphire-table-row-level: 1;
+}
+.sapphire-table__headCell.sapphire-table__cell--tree
+  .sapphire-table__headCell_container {
+  padding-left: 0;
+}
+
 /* tree column renders expand/collapse icon and is indented based on row level */
 .sapphire-table__cell--tree {
   /* the unit of indentation for nested rows. */

package/components/table/table.module.css.d.ts

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "sapphire-table": string;
+  readonly "sapphire-table--negative-margin-self": string;
   readonly "sapphire-table--overflow": string;
   readonly "sapphire-table__table": string;
   readonly "sapphire-table__table--fixed-layout": string;
@@ -25,6 +26,7 @@ declare const styles: {
   readonly "sapphire-table__headCell__text": string;
   readonly "sapphire-table__headCell__icon": string;
   readonly "sapphire-table__body": string;
+  readonly "sapphire-table__cell--tree": string;
   readonly "sapphire-table__cell-contents": string;
   readonly "sapphire-table__cell--ellipsed": string;
   readonly "sapphire-table__headCell_content--ellipsed": string;
@@ -33,13 +35,12 @@ declare const styles: {
   readonly "sapphire-table__table--spacing-xl": string;
   readonly "sapphire-table__tfoot": string;
   readonly "is-disabled": string;
-  readonly "sapphire-table__row--selected": string;
   readonly "sapphire-table--interactive": string;
   readonly "sapphire-table__row--active": string;
   readonly "sapphire-table__row--interactive": string;
+  readonly "sapphire-table__row--selected": string;
   readonly "sapphire-table__row--expanded": string;
   readonly "sapphire-table__row-expand-button": string;
-  readonly "sapphire-table__cell--tree": string;
   readonly "sapphire-table__row-expand-button--expanded": string;
   readonly "sapphire-table--without-last-divider": string;
   readonly "sapphire-table__row--highlighted": string;

package/components/textField/textField.module.css

@@ -34,12 +34,18 @@
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+.sapphire-text-field--sm {
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  height: var(--sapphire-semantic-size-height-control-sm);
+  font-size: var(--sapphire-semantic-size-font-control-md);
+}
+
 .sapphire-text-field__input {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   margin: 0;
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
   line-height: var(--sapphire-semantic-size-line-height-md);
 
   font-family: inherit;
@@ -53,10 +59,6 @@
   outline: none;
 }
 
-.sapphire-text-field--md .sapphire-text-field__input {
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
-}
-
 /**
  * Placeholder
  */
@@ -82,6 +84,9 @@
 .sapphire-text-field--md:not(.sapphire-text-field--multiline) {
   gap: var(--sapphire-semantic-size-spacing-xs);
 }
+.sapphire-text-field--sm:not(.sapphire-text-field--multiline) {
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+}
 
 /**
  * Prefix/postfix
@@ -100,8 +105,8 @@
   margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
-.sapphire-text-field--md .sapphire-text-field__prefix {
-  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+.sapphire-text-field--sm .sapphire-text-field__prefix {
+  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-sm);
 }
 
 /**
@@ -121,8 +126,8 @@
   margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
-.sapphire-text-field--md .sapphire-text-field__postfix {
-  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+.sapphire-text-field--sm .sapphire-text-field__postfix {
+  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-sm);
 }
 
 /**
@@ -141,6 +146,12 @@
   height: var(--sapphire-semantic-size-icon-sm);
 }
 
+.sapphire-text-field--sm .sapphire-text-field__prefix--icon,
+.sapphire-text-field--sm .sapphire-text-field__postfix--icon {
+  width: var(--sapphire-semantic-size-icon-sm);
+  height: var(--sapphire-semantic-size-icon-sm);
+}
+
 /**
  * Multiline
  * (this does not support a prefix/postfix)
@@ -156,7 +167,7 @@
   resize: none;
   width: 100%;
   padding: var(--sapphire-semantic-size-spacing-control-vertical-lg)
-    var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+    var(--sapphire-semantic-size-spacing-control-horizontal-md);
   scroll-padding-bottom: var(
     --sapphire-semantic-size-spacing-control-vertical-lg
   );
@@ -171,6 +182,15 @@
   );
 }
 
+.sapphire-text-field--sm.sapphire-text-field--multiline
+  .sapphire-text-field__input {
+  padding: var(--sapphire-semantic-size-spacing-control-vertical-sm)
+    var(--sapphire-semantic-size-spacing-control-horizontal-sm);
+  scroll-padding-bottom: var(
+    --sapphire-semantic-size-spacing-control-vertical-sm
+  );
+}
+
 /**
  * Resizable
  */
@@ -276,6 +296,15 @@
   gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
+.sapphire-text-field--sm .sapphire-text-field__stepper {
+  padding: var(--sapphire-semantic-size-spacing-2xs)
+    calc(
+      var(--sapphire-semantic-size-spacing-2xs) +
+        var(--sapphire-semantic-size-border-sm)
+    );
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+}
+
 .sapphire-text-field:has(.sapphire-text-field__stepper)
   .sapphire-text-field__postfix {
   margin-right: 0;
@@ -331,3 +360,7 @@
 .sapphire-text-field--md.sapphire-text-field__stepper-button {
   width: var(--sapphire-semantic-size-icon-sm);
 }
+
+.sapphire-text-field--sm.sapphire-text-field__stepper-button {
+  width: var(--sapphire-semantic-size-icon-sm);
+}

package/components/textField/textField.module.css.d.ts

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-text-field": string;
   readonly "sapphire-text-field--md": string;
+  readonly "sapphire-text-field--sm": string;
   readonly "sapphire-text-field__input": string;
   readonly "sapphire-text-field__input--align-right": string;
   readonly "sapphire-text-field--multiline": string;

package/components/toast/toast.module.css

@@ -280,6 +280,7 @@
   justify-content: center;
   padding: var(--sapphire-semantic-size-spacing-2xs);
   overflow: hidden;
+  user-select: text;
 }
 
 .sapphire-toast__text-content > :nth-child(1 of :not(:only-child)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "51.0.0",
+  "version": "52.2.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -32,8 +32,8 @@
     "test:stylelint": "stylelint components/**/*.module.css",
     "test:findUnusedTokens": "stylelint components/**/*.module.css",
     "watch:types": "yarn run types -- -w",
-    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6007",
-    "build:storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook --docs -o dist",
+    "storybook": "storybook dev -p 6007",
+    "build:storybook": "storybook build --docs -o dist",
     "build:types": "tcm -p /**/*.module.css",
     "build:themes": "yarn build:themes:esm && yarn build:themes:cjs",
     "build:themes:esm": "tsc -p tsconfig.themes.json --module ES2020 --outDir build/themes/esm && tsc -p tsconfig.themes.json --module ES2020 --outDir themes",
@@ -42,33 +42,30 @@
     "postpublish": "node ../../../scripts/append-release-notes.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.17.2",
-    "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addons": "^6.5.13",
-    "@storybook/html": "^6.5.13",
-    "@storybook/theming": "^6.5.13",
-    "babel-loader": "^8.2.2",
+    "@danske/sapphire-react": "^5.17.3",
+    "@storybook/addon-docs": "8.6.14",
+    "@storybook/addon-links": "8.6.14",
+    "@storybook/addon-toolbars": "8.6.14",
+    "@storybook/blocks": "8.6.14",
+    "@storybook/html": "8.6.14",
+    "@storybook/html-vite": "8.6.14",
+    "@storybook/manager-api": "8.6.14",
+    "@storybook/theming": "8.6.14",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.4",
+    "html-webpack-plugin": "^4.5.2",
     "identity-obj-proxy": "^3.0.0",
     "react": "^18.3.1",
-    "storybook-addon-themes": "^6.1.0",
-    "storybook-css-modules": "^1.0.8",
-    "style-loader": "^2.0.0",
+    "react-dom": "^18.3.1",
+    "storybook": "8.6.14",
     "stylelint": "15.2.0",
     "stylelint-value-no-unknown-custom-properties": "4.0.0",
     "typed-css-modules": "0.6.5",
-    "typescript": "~4.6.4"
+    "typescript": "~4.6.4",
+    "vite": "^5.4.19"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^42.5.0"
+    "@danske/sapphire-design-tokens": "^43.1.0"
   },
-  "gitHead": "4903f9d28140b74e3e42467f790174d7f977f15d"
+  "gitHead": "c659e1463951455fb38f07b7b429083261776798"
 }