@gnist/design-system 6.0.0-alpha.3 → 6.1.0

package/dist/index.js

@@ -1,5 +1,17 @@
 "use client";
+import { ExtraIconsProvider } from "./foundation/iconography/ExtraIconsProvider.js";
+import { IconVariantProvider } from "./foundation/iconography/IconVariantProvider.js";
+import { defineIcons } from "./foundation/iconography/icons.js";
+import { Icon } from "./foundation/iconography/Icon.js";
+import { BodyText, DetailText, DisplayText, HeaderLevels, Heading1Text, Heading2Text, Heading3Text, LeadText, Link, TextContainer } from "./foundation/typography/index.js";
+import { Logo } from "./foundation/logos/Logo.js";
+import "./foundation/index.js";
 import { InputHelperText, useInputHelperText } from "./building-blocks/inputs/InputHelperText.js";
+import "./building-blocks/inputs/index.js";
+import { visuallyHidden } from "./utilities/accessibility/visuallyHidden.css.js";
+import { ScreenReaderOnly } from "./utilities/accessibility/ScreenReaderOnly.js";
+import "./utilities/accessibility/index.js";
+import { Spinner } from "./components/progress/Spinner.js";
 import { PrimaryButton } from "./components/actions/buttons/PrimaryButton.js";
 import { SecondaryButton } from "./components/actions/buttons/SecondaryButton.js";
 import { SuccessButton } from "./components/actions/buttons/SuccessButton.js";
@@ -7,13 +19,19 @@ import { DangerButton } from "./components/actions/buttons/DangerButton.js";
 import { GhostButton } from "./components/actions/buttons/GhostButton.js";
 import { TextButton } from "./components/actions/buttons/TextButton.js";
 import { IconButton } from "./components/actions/buttons/IconButton.js";
+import { breakpointDesktop, breakpointMobile, breakpointTablet } from "./utilities/layout/breakpoints.js";
+import { Column } from "./utilities/layout/Column.js";
+import { Row } from "./utilities/layout/Row.js";
+import "./utilities/layout/index.js";
 import { Checkbox } from "./components/actions/selectionControls/Checkbox.js";
+import { RadioGroup } from "./components/actions/selectionControls/RadioGroup.js";
 import { RadioButton } from "./components/actions/selectionControls/RadioButton.js";
 import { Switch } from "./components/actions/selectionControls/Switch.js";
-import { RadioGroup } from "./components/actions/selectionControls/RadioGroup.js";
 import { ActionChip } from "./components/actions/chips/ActionChip.js";
 import { FilterChip } from "./components/actions/chips/FilterChip.js";
 import { TagChip } from "./components/actions/chips/TagChip.js";
+import { LocalizationProvider, useLanguage } from "./translations/LocalizationProvider.js";
+import { sliceTranslate, translate, useTranslation } from "./translations/index.js";
 import { AlertBanner } from "./components/feedback/alerts/AlertBanner.js";
 import { LoadingSpinner } from "./components/feedback/loaders/LoadingSpinner.js";
 import { LoadingBar, LoadingBarComponent } from "./components/feedback/loaders/LoadingBar.js";
@@ -21,122 +39,21 @@ import { Lozenge } from "./components/feedback/notifications/Lozenge.js";
 import { ProgressBar, ProgressBarComponent } from "./components/feedback/progress/ProgressBar.js";
 import { MultiSelect } from "./components/inputs/dropdowns/MultiSelect.js";
 import { SingleSelect } from "./components/inputs/dropdowns/SingleSelect.js";
+import { addDays, addMonths, getStartOfDay, isNorwegianHoliday, isSameDate, maxDayOfMonth, minDayOfMonth, nextMonth, today } from "./utilities/time/date.js";
 import { Calendar } from "./components/inputs/pickers/calendar.js";
 import { TextArea, characterCount, wordCount } from "./components/inputs/textFields/TextArea.js";
 import { TextField } from "./components/inputs/textFields/TextField.js";
-import { Spinner } from "./components/progress/Spinner.js";
 import { ActionCard } from "./components/surfaces/cards/ActionCard.js";
-import { CheckboxCard } from "./components/surfaces/cards/CheckboxCard.js";
 import { InfoCard } from "./components/surfaces/cards/InfoCard.js";
+import { CheckboxCard } from "./components/surfaces/cards/CheckboxCard.js";
 import { LinkCard } from "./components/surfaces/cards/LinkCard.js";
 import { RadioCard } from "./components/surfaces/cards/RadioCard.js";
 import { Modal } from "./components/surfaces/modal/Modal.js";
 import { Accordion } from "./components/surfaces/accordion/Accordion.js";
+import "./components/index.js";
 import { AudiFont, AutoriaFont, BilholdFont, CupraFont, DahlesFont, GumpenFont, MollerFont, SkodaFont, ToolsFont, VWFont } from "./fonts/index.js";
-import { ExtraIconsProvider } from "./foundation/iconography/ExtraIconsProvider.js";
-import { IconVariantProvider } from "./foundation/iconography/IconVariantProvider.js";
-import { defineIcons } from "./foundation/iconography/icons.js";
-import { Icon } from "./foundation/iconography/Icon.js";
-import { BodyText, DetailText, DisplayText, HeaderLevels, Heading1Text, Heading2Text, Heading3Text, LeadText, Link, TextContainer } from "./foundation/typography/index.js";
-import { Logo } from "./foundation/logos/Logo.js";
-import { sliceTranslate, translate, useTranslation } from "./translations/index.js";
-import { ScreenReaderOnly } from "./utilities/accessibility/ScreenReaderOnly.js";
-import { visuallyHidden } from "./utilities/accessibility/visuallyHidden.css.js";
 import { FormProvider, useForm } from "./utilities/forms/formContext.js";
 import { formInputs } from "./utilities/forms/formInputs.js";
 import { useLocalFormState } from "./utilities/forms/useLocalFormState.js";
-import { addDays, addMonths, getStartOfDay, isNorwegianHoliday, isSameDate, maxDayOfMonth, minDayOfMonth, nextMonth, today } from "./utilities/time/date.js";
-import { breakpointDesktop, breakpointMobile, breakpointTablet } from "./utilities/layout/breakpoints.js";
-import { Column } from "./utilities/layout/Column.js";
-import { Row } from "./utilities/layout/Row.js";
-import { LocalizationProvider, useLanguage } from "./translations/LocalizationProvider.js";
-export {
-  Accordion,
-  ActionCard,
-  ActionChip,
-  AlertBanner,
-  AudiFont,
-  AutoriaFont,
-  BilholdFont,
-  BodyText,
-  Calendar,
-  Checkbox,
-  CheckboxCard,
-  Column,
-  CupraFont,
-  DahlesFont,
-  DangerButton,
-  DetailText,
-  DisplayText,
-  ExtraIconsProvider,
-  FilterChip,
-  FormProvider,
-  GhostButton,
-  GumpenFont,
-  HeaderLevels,
-  Heading1Text,
-  Heading2Text,
-  Heading3Text,
-  Icon,
-  IconButton,
-  IconVariantProvider,
-  InfoCard,
-  InputHelperText,
-  LeadText,
-  Link,
-  LinkCard,
-  LoadingBar,
-  LoadingBarComponent,
-  LoadingSpinner,
-  LocalizationProvider,
-  Logo,
-  Lozenge,
-  Modal,
-  MollerFont,
-  MultiSelect,
-  PrimaryButton,
-  ProgressBar,
-  ProgressBarComponent,
-  RadioButton,
-  RadioCard,
-  RadioGroup,
-  Row,
-  ScreenReaderOnly,
-  SecondaryButton,
-  SingleSelect,
-  SkodaFont,
-  Spinner,
-  SuccessButton,
-  Switch,
-  TagChip,
-  TextArea,
-  TextButton,
-  TextContainer,
-  TextField,
-  ToolsFont,
-  VWFont,
-  addDays,
-  addMonths,
-  breakpointDesktop,
-  breakpointMobile,
-  breakpointTablet,
-  characterCount,
-  defineIcons,
-  formInputs,
-  getStartOfDay,
-  isNorwegianHoliday,
-  isSameDate,
-  maxDayOfMonth,
-  minDayOfMonth,
-  nextMonth,
-  sliceTranslate,
-  today,
-  translate,
-  useForm,
-  useInputHelperText,
-  useLanguage,
-  useLocalFormState,
-  useTranslation,
-  visuallyHidden,
-  wordCount
-};
+import "./utilities/index.js";
+export { Accordion, ActionCard, ActionChip, AlertBanner, AudiFont, AutoriaFont, BilholdFont, BodyText, Calendar, Checkbox, CheckboxCard, Column, CupraFont, DahlesFont, DangerButton, DetailText, DisplayText, ExtraIconsProvider, FilterChip, FormProvider, GhostButton, GumpenFont, HeaderLevels, Heading1Text, Heading2Text, Heading3Text, Icon, IconButton, IconVariantProvider, InfoCard, InputHelperText, LeadText, Link, LinkCard, LoadingBar, LoadingBarComponent, LoadingSpinner, LocalizationProvider, Logo, Lozenge, Modal, MollerFont, MultiSelect, PrimaryButton, ProgressBar, ProgressBarComponent, RadioButton, RadioCard, RadioGroup, Row, ScreenReaderOnly, SecondaryButton, SingleSelect, SkodaFont, Spinner, SuccessButton, Switch, TagChip, TextArea, TextButton, TextContainer, TextField, ToolsFont, VWFont, addDays, addMonths, breakpointDesktop, breakpointMobile, breakpointTablet, characterCount, defineIcons, formInputs, getStartOfDay, isNorwegianHoliday, isSameDate, maxDayOfMonth, minDayOfMonth, nextMonth, sliceTranslate, today, translate, useForm, useInputHelperText, useLanguage, useLocalFormState, useTranslation, visuallyHidden, wordCount };

package/dist/styles/animations.css.cjs

@@ -1,13 +1,9 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const layers_css_js = require("@gnist/themes/layers.css.js");
-const clickAnimation = layers_css_js.gnistStyle({
-  transition: "transform ease-in 0.1s",
-  selectors: {
-    "&:active:not(:disabled)": {
-      transform: "scale(0.98)"
-    }
-  }
+require("../_virtual/_rolldown/runtime.cjs");
+//#region src/styles/animations.css.ts
+var clickAnimation = (0, require("@vanilla-extract/css").style)({
+	transition: "transform ease-in 0.1s",
+	selectors: { "&:active:not(:disabled)": { transform: "scale(0.98)" } }
 });
+//#endregion
 exports.clickAnimation = clickAnimation;

package/dist/styles/animations.css.js

@@ -1,13 +1,9 @@
 "use client";
-import { gnistStyle } from "@gnist/themes/layers.css.js";
-const clickAnimation = gnistStyle({
-  transition: "transform ease-in 0.1s",
-  selectors: {
-    "&:active:not(:disabled)": {
-      transform: "scale(0.98)"
-    }
-  }
+import { style } from "@vanilla-extract/css";
+//#region src/styles/animations.css.ts
+var clickAnimation = style({
+	transition: "transform ease-in 0.1s",
+	selectors: { "&:active:not(:disabled)": { transform: "scale(0.98)" } }
 });
-export {
-  clickAnimation
-};
+//#endregion
+export { clickAnimation };

package/dist/styles/states.css.cjs

@@ -1,108 +1,75 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const layers_css_js = require("@gnist/themes/layers.css.js");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const cssUtils = require("@vanilla-extract/css-utils");
-const Record = require("fp-ts/Record");
-const _function = require("fp-ts/function");
-const focusStyle = layers_css_js.gnistStyle({
-  selectors: {
-    "&:focus:not(:focus-visible)": {
-      outline: "none"
-    },
-    "&:focus-visible": {
-      outline: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.interactive}`
-    }
-  }
-});
-const supportedColorTokens = {
-  "on-primary": true,
-  "on-secondary": true,
-  "on-secondary-container": true,
-  "on-error": true,
-  "on-success": true,
-  "on-surface-variant": true,
-  "on-background": true
-};
-const otherSupportedColors = {
-  "palette-black": tokens_css_js.tokens.palette.black
+require("../_virtual/_rolldown/runtime.cjs");
+let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+let fp_ts_Record = require("fp-ts/Record");
+let fp_ts_function = require("fp-ts/function");
+//#region src/styles/states.css.ts
+var focusStyle = (0, _vanilla_extract_css.style)({ selectors: {
+	"&:focus:not(:focus-visible)": { outline: "none" },
+	"&:focus-visible": { outline: `${_gnist_themes_tokens_css_js.tokens.stroke.medium} solid ${_gnist_themes_tokens_css_js.tokens.color.interactive}` }
+} });
+var supportedColorTokens = {
+	"on-primary": true,
+	"on-secondary": true,
+	"on-secondary-container": true,
+	"on-error": true,
+	"on-success": true,
+	"on-surface-variant": true,
+	"on-background": true
 };
-const colorVariants = {
-  ..._function.pipe(supportedColorTokens, Record.mapWithIndex((token) => tokens_css_js.tokens.color[token])),
-  ...otherSupportedColors
+var otherSupportedColors = { "palette-black": _gnist_themes_tokens_css_js.tokens.palette.black };
+var colorVariants = {
+	...(0, fp_ts_function.pipe)(supportedColorTokens, (0, fp_ts_Record.mapWithIndex)((token) => _gnist_themes_tokens_css_js.tokens.color[token])),
+	...otherSupportedColors
 };
-const afterHover = "&:not(:disabled):hover::after";
-const afterFocus = "&:not(:disabled):focus::after";
-const afterActive = "&:not(:disabled):active::after";
-const afterAllStates = [afterHover, afterFocus, afterActive].join(", ");
-const stateLayersInternal = layers_css_js.gnistRecipe({
-  base: layers_css_js.gnistStyle({
-    "::after": {
-      opacity: 0
-    },
-    selectors: {
-      [afterAllStates]: {
-        content: "",
-        position: "absolute",
-        width: "100%",
-        height: "100%"
-      },
-      [afterActive]: {
-        opacity: tokens_css_js.tokens.opacity["on-pressed"]
-      }
-    },
-    "@media": {
-      // Hover state only make sense when the user's main pointer has hover functionality
-      "(hover: hover)": {
-        selectors: {
-          [afterHover]: {
-            opacity: tokens_css_js.tokens.opacity["on-hover"]
-          },
-          // Re-apply active here to ensure it overrides the hover state
-          [afterActive]: {
-            opacity: tokens_css_js.tokens.opacity["on-pressed"]
-          }
-        }
-      }
-    }
-  }),
-  variants: {
-    setFocusState: {
-      true: {
-        selectors: {
-          [afterFocus]: {
-            opacity: tokens_css_js.tokens.opacity["on-focus"]
-          }
-        }
-      },
-      false: ""
-    },
-    borderSize: _function.pipe(
-      // Here we also support `borderSize: "none"`. Maybe that should be a stroke token.
-      { none: "0", ...tokens_css_js.tokens.stroke },
-      Record.map((borderSize) => ({
-        selectors: {
-          [afterAllStates]: {
-            top: borderSize === "0" ? 0 : cssUtils.calc.negate(borderSize),
-            left: borderSize === "0" ? 0 : cssUtils.calc.negate(borderSize),
-            border: `${borderSize} solid`
-          }
-        }
-      }))
-    ),
-    borderRadius: _function.pipe({ ...tokens_css_js.tokens.radius, ...tokens_css_js.tokens["border-radius"] }, Record.map((borderRadius) => ({
-      selectors: {
-        [afterAllStates]: { borderRadius }
-      }
-    }))),
-    backgroundColor: _function.pipe(colorVariants, Record.map((backgroundColor) => ({
-      selectors: {
-        [afterAllStates]: { backgroundColor }
-      }
-    })))
-  }
+var afterHover = "&:not(:disabled):hover::after";
+var afterFocus = "&:not(:disabled):focus::after";
+var afterActive = "&:not(:disabled):active::after";
+var afterAllStates = [
+	afterHover,
+	afterFocus,
+	afterActive
+].join(", ");
+var stateLayers = (0, _vanilla_extract_recipes.recipe)({
+	base: (0, _vanilla_extract_css.style)({
+		"::after": { opacity: 0 },
+		selectors: {
+			[afterAllStates]: {
+				content: "",
+				position: "absolute",
+				width: "100%",
+				height: "100%"
+			},
+			[afterActive]: { opacity: _gnist_themes_tokens_css_js.tokens.opacity["on-pressed"] }
+		},
+		"@media": { "(hover: hover)": { selectors: {
+			[afterHover]: { opacity: _gnist_themes_tokens_css_js.tokens.opacity["on-hover"] },
+			[afterActive]: { opacity: _gnist_themes_tokens_css_js.tokens.opacity["on-pressed"] }
+		} } }
+	}),
+	variants: {
+		setFocusState: {
+			true: { selectors: { [afterFocus]: { opacity: _gnist_themes_tokens_css_js.tokens.opacity["on-focus"] } } },
+			false: ""
+		},
+		borderSize: (0, fp_ts_function.pipe)({
+			none: "0",
+			..._gnist_themes_tokens_css_js.tokens.stroke
+		}, (0, fp_ts_Record.map)((borderSize) => ({ selectors: { [afterAllStates]: {
+			top: borderSize === "0" ? 0 : _vanilla_extract_css_utils.calc.negate(borderSize),
+			left: borderSize === "0" ? 0 : _vanilla_extract_css_utils.calc.negate(borderSize),
+			border: `${borderSize} solid`
+		} } }))),
+		borderRadius: (0, fp_ts_function.pipe)({
+			..._gnist_themes_tokens_css_js.tokens.radius,
+			..._gnist_themes_tokens_css_js.tokens["border-radius"]
+		}, (0, fp_ts_Record.map)((borderRadius) => ({ selectors: { [afterAllStates]: { borderRadius } } }))),
+		backgroundColor: (0, fp_ts_function.pipe)(colorVariants, (0, fp_ts_Record.map)((backgroundColor) => ({ selectors: { [afterAllStates]: { backgroundColor } } })))
+	}
 });
-const stateLayers = stateLayersInternal;
+//#endregion
 exports.focusStyle = focusStyle;
 exports.stateLayers = stateLayers;

package/dist/styles/states.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"states.css.d.ts","sourceRoot":"","sources":["../../src/styles/states.css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAKxD,eAAO,MAAM,UAAU,QASrB,CAAC;AAkCH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;EAoFvB,CAAC;AAEH,KAAK,gBAAgB,GAAG,IAAI,CACxB,OAAO,mBAAmB,EAC1B,UAAU,GAAG,YAAY,CAC5B,CAAC;AACF,KAAK,cAAc,GAAG,CAClB,OAAO,EAAE,QAAQ,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,KAC3D,MAAM,CAAC;AAEZ,eAAO,MAAM,WAAW,EAAE,gBAAgB,GAAG,cACtB,CAAC"}
+{"version":3,"file":"states.css.d.ts","sourceRoot":"","sources":["../../src/styles/states.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAS,MAAM,sBAAsB,CAAC;AAM/D,eAAO,MAAM,UAAU,QASrB,CAAC;AAkCH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;EAoFvB,CAAC;AAEH,KAAK,gBAAgB,GAAG,IAAI,CACxB,OAAO,mBAAmB,EAC1B,UAAU,GAAG,YAAY,CAC5B,CAAC;AACF,KAAK,cAAc,GAAG,CAClB,OAAO,EAAE,QAAQ,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,KAC3D,MAAM,CAAC;AAEZ,eAAO,MAAM,WAAW,EAAE,gBAAgB,GAAG,cACtB,CAAC"}

package/dist/styles/states.css.js

@@ -1,108 +1,73 @@
 "use client";
-import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
+import { recipe } from "@vanilla-extract/recipes";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { calc } from "@vanilla-extract/css-utils";
-import { mapWithIndex, map } from "fp-ts/Record";
+import { style } from "@vanilla-extract/css";
+import { map, mapWithIndex } from "fp-ts/Record";
 import { pipe } from "fp-ts/function";
-const focusStyle = gnistStyle({
-  selectors: {
-    "&:focus:not(:focus-visible)": {
-      outline: "none"
-    },
-    "&:focus-visible": {
-      outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}`
-    }
-  }
-});
-const supportedColorTokens = {
-  "on-primary": true,
-  "on-secondary": true,
-  "on-secondary-container": true,
-  "on-error": true,
-  "on-success": true,
-  "on-surface-variant": true,
-  "on-background": true
-};
-const otherSupportedColors = {
-  "palette-black": tokens.palette.black
+//#region src/styles/states.css.ts
+var focusStyle = style({ selectors: {
+	"&:focus:not(:focus-visible)": { outline: "none" },
+	"&:focus-visible": { outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}` }
+} });
+var supportedColorTokens = {
+	"on-primary": true,
+	"on-secondary": true,
+	"on-secondary-container": true,
+	"on-error": true,
+	"on-success": true,
+	"on-surface-variant": true,
+	"on-background": true
 };
-const colorVariants = {
-  ...pipe(supportedColorTokens, mapWithIndex((token) => tokens.color[token])),
-  ...otherSupportedColors
+var otherSupportedColors = { "palette-black": tokens.palette.black };
+var colorVariants = {
+	...pipe(supportedColorTokens, mapWithIndex((token) => tokens.color[token])),
+	...otherSupportedColors
 };
-const afterHover = "&:not(:disabled):hover::after";
-const afterFocus = "&:not(:disabled):focus::after";
-const afterActive = "&:not(:disabled):active::after";
-const afterAllStates = [afterHover, afterFocus, afterActive].join(", ");
-const stateLayersInternal = gnistRecipe({
-  base: gnistStyle({
-    "::after": {
-      opacity: 0
-    },
-    selectors: {
-      [afterAllStates]: {
-        content: "",
-        position: "absolute",
-        width: "100%",
-        height: "100%"
-      },
-      [afterActive]: {
-        opacity: tokens.opacity["on-pressed"]
-      }
-    },
-    "@media": {
-      // Hover state only make sense when the user's main pointer has hover functionality
-      "(hover: hover)": {
-        selectors: {
-          [afterHover]: {
-            opacity: tokens.opacity["on-hover"]
-          },
-          // Re-apply active here to ensure it overrides the hover state
-          [afterActive]: {
-            opacity: tokens.opacity["on-pressed"]
-          }
-        }
-      }
-    }
-  }),
-  variants: {
-    setFocusState: {
-      true: {
-        selectors: {
-          [afterFocus]: {
-            opacity: tokens.opacity["on-focus"]
-          }
-        }
-      },
-      false: ""
-    },
-    borderSize: pipe(
-      // Here we also support `borderSize: "none"`. Maybe that should be a stroke token.
-      { none: "0", ...tokens.stroke },
-      map((borderSize) => ({
-        selectors: {
-          [afterAllStates]: {
-            top: borderSize === "0" ? 0 : calc.negate(borderSize),
-            left: borderSize === "0" ? 0 : calc.negate(borderSize),
-            border: `${borderSize} solid`
-          }
-        }
-      }))
-    ),
-    borderRadius: pipe({ ...tokens.radius, ...tokens["border-radius"] }, map((borderRadius) => ({
-      selectors: {
-        [afterAllStates]: { borderRadius }
-      }
-    }))),
-    backgroundColor: pipe(colorVariants, map((backgroundColor) => ({
-      selectors: {
-        [afterAllStates]: { backgroundColor }
-      }
-    })))
-  }
+var afterHover = "&:not(:disabled):hover::after";
+var afterFocus = "&:not(:disabled):focus::after";
+var afterActive = "&:not(:disabled):active::after";
+var afterAllStates = [
+	afterHover,
+	afterFocus,
+	afterActive
+].join(", ");
+var stateLayers = recipe({
+	base: style({
+		"::after": { opacity: 0 },
+		selectors: {
+			[afterAllStates]: {
+				content: "",
+				position: "absolute",
+				width: "100%",
+				height: "100%"
+			},
+			[afterActive]: { opacity: tokens.opacity["on-pressed"] }
+		},
+		"@media": { "(hover: hover)": { selectors: {
+			[afterHover]: { opacity: tokens.opacity["on-hover"] },
+			[afterActive]: { opacity: tokens.opacity["on-pressed"] }
+		} } }
+	}),
+	variants: {
+		setFocusState: {
+			true: { selectors: { [afterFocus]: { opacity: tokens.opacity["on-focus"] } } },
+			false: ""
+		},
+		borderSize: pipe({
+			none: "0",
+			...tokens.stroke
+		}, map((borderSize) => ({ selectors: { [afterAllStates]: {
+			top: borderSize === "0" ? 0 : calc.negate(borderSize),
+			left: borderSize === "0" ? 0 : calc.negate(borderSize),
+			border: `${borderSize} solid`
+		} } }))),
+		borderRadius: pipe({
+			...tokens.radius,
+			...tokens["border-radius"]
+		}, map((borderRadius) => ({ selectors: { [afterAllStates]: { borderRadius } } }))),
+		backgroundColor: pipe(colorVariants, map((backgroundColor) => ({ selectors: { [afterAllStates]: { backgroundColor } } })))
+	}
 });
-const stateLayers = stateLayersInternal;
-export {
-  focusStyle,
-  stateLayers
-};
+//#endregion
+export { focusStyle, stateLayers };

package/dist/translations/LocalizationProvider.cjs

@@ -1,36 +1,26 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === "object" && "default" in e) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
-const localizationContext = React__namespace.createContext({
-  language: "no"
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/translations/LocalizationProvider.tsx
+var localizationContext = react.createContext({ language: "no" });
+/**
+* Use this to set the localization context for the library.
+*
+* Documentation: [LocalizationProvider](https://gnist.moller.no/developers/components/latest/?path=/docs/configuration-localizationprovider--docs)
+*/
+var LocalizationProvider = ({ children, language }) => (0, react_jsx_runtime.jsx)(localizationContext.Provider, {
+	value: { language },
+	children
 });
-const LocalizationProvider = ({ children, language }) => jsxRuntime.jsx(localizationContext.Provider, { value: { language }, children });
 function useLocalization() {
-  return React__namespace.useContext(localizationContext);
+	return react.useContext(localizationContext);
 }
 function useLanguage() {
-  return useLocalization().language;
+	return useLocalization().language;
 }
+//#endregion
 exports.LocalizationProvider = LocalizationProvider;
 exports.useLanguage = useLanguage;
 exports.useLocalization = useLocalization;