@dsn-starter-kit/design-tokens 2.0.0 → 3.1.0

package/dist/scss/_variables.scss

@@ -320,6 +320,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -857,6 +858,16 @@ $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de
 $dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
 $dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1204,14 +1215,13 @@ $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-bo
 $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
 $dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
 $dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
+$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
 $dsn-details-summary-color: $dsn-color-action-2-color-default; // Kleur van het summary-label (volgt Link via action-2)
+$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Kleur van het summary-label op hover
+$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Kleur van het summary-label op active
 $dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
 $dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
 $dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
-$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
-$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
-$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Kleur van het summary-label op hover
-$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Kleur van het summary-label op active
 $dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst
 $dsn-file-input-font-family: $dsn-form-control-font-family; // Font-familie van het bestandsinvoerveld
 $dsn-file-input-font-size: $dsn-form-control-font-size; // Font-size van het bestandsinvoerveld
@@ -1223,6 +1233,7 @@ $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-size: $dsn-icon-size-md;
 $dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Icoongrootte van de foutmelding
 $dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icoongrootte voor positive en warning varianten
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
@@ -1349,6 +1360,7 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
 $dsn-radio-checked-background-color: $dsn-form-control-accent-color;
 $dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;

package/dist/scss/_wireframe-dark-default.scss

@@ -171,6 +171,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -592,6 +593,15 @@ $dsn-grid-row-gap: $dsn-space-column-xl; // Vertical gap between grid rows (over
 $dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
 $dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1076,6 +1086,8 @@ $dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Tekst
 $dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor ongeldige formuliervelden
 $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
 $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default link
 $dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large link

package/dist/scss/_wireframe-dark-information-dense.scss

@@ -171,6 +171,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -592,6 +593,15 @@ $dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Linker pa
 $dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
 $dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1076,6 +1086,8 @@ $dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Tekst
 $dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor ongeldige formuliervelden
 $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
 $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default link
 $dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large link

package/dist/scss/_wireframe-light-default.scss

@@ -171,6 +171,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -592,6 +593,15 @@ $dsn-grid-row-gap: $dsn-space-column-xl; // Vertical gap between grid rows (over
 $dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
 $dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1076,6 +1086,8 @@ $dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Tekst
 $dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor ongeldige formuliervelden
 $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
 $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default link
 $dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large link

package/dist/scss/_wireframe-light-information-dense.scss

@@ -171,6 +171,7 @@ $dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
 $dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
 $dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
 $dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
+$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
 $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
 $dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
 $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
@@ -592,6 +593,15 @@ $dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Linker pa
 $dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
 $dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
 $dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
+$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
+$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
+$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
+$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
+$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
+$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
+$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
+$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
+$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
@@ -1076,6 +1086,8 @@ $dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Tekst
 $dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor ongeldige formuliervelden
 $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
 $dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
+$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
+$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
 $dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
 $dsn-link-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default link
 $dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large link

package/package.json

@@ -1,19 +1,31 @@
 {
   "name": "@dsn-starter-kit/design-tokens",
-  "version": "2.0.0",
+  "version": "3.1.0",
   "description": "Design tokens for the design system",
-  "main": "dist/js/tokens.js",
+  "type": "module",
+  "main": "dist/js/tokens.cjs",
+  "module": "dist/js/tokens.js",
   "types": "dist/js/tokens.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/js/tokens.d.ts",
-      "import": "./dist/js/tokens.js",
-      "default": "./dist/js/tokens.js"
+      "import": {
+        "types": "./dist/js/tokens.d.ts",
+        "default": "./dist/js/tokens.js"
+      },
+      "require": {
+        "types": "./dist/js/tokens.d.cts",
+        "default": "./dist/js/tokens.cjs"
+      }
     },
     "./dark": {
-      "types": "./dist/js/tokens-dark.d.ts",
-      "import": "./dist/js/tokens-dark.js",
-      "default": "./dist/js/tokens-dark.js"
+      "import": {
+        "types": "./dist/js/tokens-dark.d.ts",
+        "default": "./dist/js/tokens-dark.js"
+      },
+      "require": {
+        "types": "./dist/js/tokens-dark.d.cts",
+        "default": "./dist/js/tokens-dark.cjs"
+      }
     },
     "./css": "./dist/css/variables.css",
     "./css/dark": "./dist/css/variables-dark.css",
@@ -21,12 +33,13 @@
     "./scss": "./dist/scss/_variables.scss",
     "./scss/dark": "./dist/scss/_variables-dark.scss",
     "./css/scoped/start-hero-image-light": "./dist/css/scoped/start-light-hero-image.css",
-    "./css/scoped/wireframe-hero-image-light": "./dist/css/scoped/wireframe-light-hero-image.css"
+    "./css/scoped/wireframe-hero-image-light": "./dist/css/scoped/wireframe-light-hero-image.css",
+    "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "files": [
     "dist"
   ],
-  "type": "module",
   "keywords": [
     "design-tokens",
     "design-system",
@@ -38,10 +51,12 @@
     "access": "public"
   },
   "devDependencies": {
-    "style-dictionary": "^4.0.0"
+    "style-dictionary": "^4.0.0",
+    "tsdown": "^0.22.14"
   },
   "scripts": {
-    "build": "node src/config/build.js",
+    "build": "node src/config/build.js && tsdown",
+    "build:figma": "node src/config/build-figma.js",
     "clean": "rm -rf dist",
     "watch": "node --watch-path=src src/config/build.js"
   }