@gnist/design-system 0.1.0

package/dist/index.cjs

@@ -0,0 +1,135 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const InputHelperText = require("./building-blocks/inputs/InputHelperText.cjs");
+const PrimaryButton = require("./components/actions/buttons/PrimaryButton.cjs");
+const SecondaryButton = require("./components/actions/buttons/SecondaryButton.cjs");
+const SuccessButton = require("./components/actions/buttons/SuccessButton.cjs");
+const DangerButton = require("./components/actions/buttons/DangerButton.cjs");
+const GhostButton = require("./components/actions/buttons/GhostButton.cjs");
+const TextButton = require("./components/actions/buttons/TextButton.cjs");
+const IconButton = require("./components/actions/buttons/IconButton.cjs");
+const Checkbox = require("./components/actions/selectionControls/Checkbox.cjs");
+const RadioButton = require("./components/actions/selectionControls/RadioButton.cjs");
+const ActionChip = require("./components/actions/chips/ActionChip.cjs");
+const FilterChip = require("./components/actions/chips/FilterChip.cjs");
+const TagChip = require("./components/actions/chips/TagChip.cjs");
+const AlertBanner = require("./components/feedback/alerts/AlertBanner.cjs");
+const LoadingSpinner = require("./components/feedback/loaders/LoadingSpinner.cjs");
+const Lozenge = require("./components/feedback/notifications/Lozenge.cjs");
+const ProgressBar = require("./components/feedback/progress/ProgressBar.cjs");
+const MultiSelect = require("./components/inputs/dropdowns/MultiSelect.cjs");
+const SingleSelect = require("./components/inputs/dropdowns/SingleSelect.cjs");
+const calendar = require("./components/inputs/pickers/calendar.cjs");
+const TextArea = require("./components/inputs/textFields/TextArea.cjs");
+const TextField = require("./components/inputs/textFields/TextField.cjs");
+const Spinner = require("./components/progress/Spinner.cjs");
+const ActionCard = require("./components/surfaces/cards/ActionCard.cjs");
+const CheckboxCard = require("./components/surfaces/cards/CheckboxCard.cjs");
+const InfoCard = require("./components/surfaces/cards/InfoCard.cjs");
+const LinkCard = require("./components/surfaces/cards/LinkCard.cjs");
+const RadioCard = require("./components/surfaces/cards/RadioCard.cjs");
+const Modal = require("./components/surfaces/modal/Modal.cjs");
+const Accordion = require("./components/surfaces/accordion/Accordion.cjs");
+const index$1 = require("./fonts/index.cjs");
+const ExtraIconsProvider = require("./foundation/iconography/ExtraIconsProvider.cjs");
+const IconVariantProvider = require("./foundation/iconography/IconVariantProvider.cjs");
+const icons = require("./foundation/iconography/icons.cjs");
+const Icon = require("./foundation/iconography/Icon.cjs");
+const index$2 = require("./foundation/typography/index.cjs");
+const Logo = require("./foundation/logos/Logo.cjs");
+const index = require("./translations/index.cjs");
+const ScreenReaderOnly = require("./utilities/accessibility/ScreenReaderOnly.cjs");
+const visuallyHidden_css = require("./utilities/accessibility/visuallyHidden.css.cjs");
+const formContext = require("./utilities/forms/formContext.cjs");
+const formInputs = require("./utilities/forms/formInputs.cjs");
+const useLocalFormState = require("./utilities/forms/useLocalFormState.cjs");
+const date = require("./utilities/time/date.cjs");
+const breakpoints = require("./utilities/layout/breakpoints.cjs");
+const Column = require("./utilities/layout/Column.cjs");
+const Row = require("./utilities/layout/Row.cjs");
+const LocalizationProvider = require("./translations/LocalizationProvider.cjs");
+exports.InputHelperText = InputHelperText.InputHelperText;
+exports.useInputHelperText = InputHelperText.useInputHelperText;
+exports.PrimaryButton = PrimaryButton.PrimaryButton;
+exports.SecondaryButton = SecondaryButton.SecondaryButton;
+exports.SuccessButton = SuccessButton.SuccessButton;
+exports.DangerButton = DangerButton.DangerButton;
+exports.GhostButton = GhostButton.GhostButton;
+exports.TextButton = TextButton.TextButton;
+exports.IconButton = IconButton.IconButton;
+exports.Checkbox = Checkbox.Checkbox;
+exports.RadioButton = RadioButton.RadioButton;
+exports.ActionChip = ActionChip.ActionChip;
+exports.FilterChip = FilterChip.FilterChip;
+exports.TagChip = TagChip.TagChip;
+exports.AlertBanner = AlertBanner.AlertBanner;
+exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
+exports.Lozenge = Lozenge.Lozenge;
+exports.ProgressBar = ProgressBar.ProgressBar;
+exports.ProgressBarComponent = ProgressBar.ProgressBarComponent;
+exports.MultiSelect = MultiSelect.MultiSelect;
+exports.SingleSelect = SingleSelect.SingleSelect;
+exports.Calendar = calendar.Calendar;
+exports.TextArea = TextArea.TextArea;
+exports.characterCount = TextArea.characterCount;
+exports.wordCount = TextArea.wordCount;
+exports.TextField = TextField.TextField;
+exports.Spinner = Spinner.Spinner;
+exports.ActionCard = ActionCard.ActionCard;
+exports.CheckboxCard = CheckboxCard.CheckboxCard;
+exports.InfoCard = InfoCard.InfoCard;
+exports.LinkCard = LinkCard.LinkCard;
+exports.RadioCard = RadioCard.RadioCard;
+exports.Modal = Modal.Modal;
+exports.Accordion = Accordion.Accordion;
+exports.AudiFont = index$1.AudiFont;
+exports.AutoriaFont = index$1.AutoriaFont;
+exports.BilholdFont = index$1.BilholdFont;
+exports.CupraFont = index$1.CupraFont;
+exports.DahlesFont = index$1.DahlesFont;
+exports.GumpenFont = index$1.GumpenFont;
+exports.MollerFont = index$1.MollerFont;
+exports.SkodaFont = index$1.SkodaFont;
+exports.ToolsFont = index$1.ToolsFont;
+exports.VWFont = index$1.VWFont;
+exports.ExtraIconsProvider = ExtraIconsProvider.ExtraIconsProvider;
+exports.IconVariantProvider = IconVariantProvider.IconVariantProvider;
+exports.defineIcons = icons.defineIcons;
+exports.Icon = Icon.Icon;
+exports.BodyText = index$2.BodyText;
+exports.DetailText = index$2.DetailText;
+exports.DisplayText = index$2.DisplayText;
+exports.HeaderLevels = index$2.HeaderLevels;
+exports.Heading1Text = index$2.Heading1Text;
+exports.Heading2Text = index$2.Heading2Text;
+exports.Heading3Text = index$2.Heading3Text;
+exports.LeadText = index$2.LeadText;
+exports.Link = index$2.Link;
+exports.TextContainer = index$2.TextContainer;
+exports.Logo = Logo.Logo;
+exports.sliceTranslate = index.sliceTranslate;
+exports.translate = index.translate;
+exports.useTranslation = index.useTranslation;
+exports.ScreenReaderOnly = ScreenReaderOnly.ScreenReaderOnly;
+exports.visuallyHidden = visuallyHidden_css.visuallyHidden;
+exports.FormProvider = formContext.FormProvider;
+exports.useForm = formContext.useForm;
+exports.formInputs = formInputs.formInputs;
+exports.useLocalFormState = useLocalFormState.useLocalFormState;
+exports.addDays = date.addDays;
+exports.addMonths = date.addMonths;
+exports.getStartOfDay = date.getStartOfDay;
+exports.isNorwegianHoliday = date.isNorwegianHoliday;
+exports.isSameDate = date.isSameDate;
+exports.maxDayOfMonth = date.maxDayOfMonth;
+exports.minDayOfMonth = date.minDayOfMonth;
+exports.nextMonth = date.nextMonth;
+exports.today = date.today;
+exports.breakpointDesktop = breakpoints.breakpointDesktop;
+exports.breakpointMobile = breakpoints.breakpointMobile;
+exports.breakpointTablet = breakpoints.breakpointTablet;
+exports.Column = Column.Column;
+exports.Row = Row.Row;
+exports.LocalizationProvider = LocalizationProvider.LocalizationProvider;
+exports.useLanguage = LocalizationProvider.useLanguage;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./building-blocks/inputs/index.js";
+export * from "./components/index.js";
+export * from "./fonts/index.js";
+export * from "./foundation/index.js";
+export { LocalizationProvider, sliceTranslate, translate, useLanguage, useTranslation, type Language, type Translation, } from "./translations/index.js";
+export * from "./utilities/accessibility/index.js";
+export * from "./utilities/index.js";
+export * from "./utilities/layout/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EACH,oBAAoB,EACpB,cAAc,EACd,SAAS,EACT,WAAW,EACX,cAAc,EACd,KAAK,QAAQ,EACb,KAAK,WAAW,GACnB,MAAM,yBAAyB,CAAC;AACjC,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC"}

package/dist/index.js

@@ -0,0 +1,135 @@
+"use client";
+import { InputHelperText, useInputHelperText } from "./building-blocks/inputs/InputHelperText.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";
+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 { Checkbox } from "./components/actions/selectionControls/Checkbox.js";
+import { RadioButton } from "./components/actions/selectionControls/RadioButton.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 { AlertBanner } from "./components/feedback/alerts/AlertBanner.js";
+import { LoadingSpinner } from "./components/feedback/loaders/LoadingSpinner.js";
+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 { 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 { 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 { 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,
+  LoadingSpinner,
+  LocalizationProvider,
+  Logo,
+  Lozenge,
+  Modal,
+  MollerFont,
+  MultiSelect,
+  PrimaryButton,
+  ProgressBar,
+  ProgressBarComponent,
+  RadioButton,
+  RadioCard,
+  Row,
+  ScreenReaderOnly,
+  SecondaryButton,
+  SingleSelect,
+  SkodaFont,
+  Spinner,
+  SuccessButton,
+  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

@@ -0,0 +1,13 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const css = require("@vanilla-extract/css");
+const clickAnimation = css.style({
+  transition: "transform ease-in 0.1s",
+  selectors: {
+    "&:active:not(:disabled)": {
+      transform: "scale(0.98)"
+    }
+  }
+});
+exports.clickAnimation = clickAnimation;

package/dist/styles/animations.css.d.ts

@@ -0,0 +1,2 @@
+export declare const clickAnimation: string;
+//# sourceMappingURL=animations.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animations.css.d.ts","sourceRoot":"","sources":["../../src/styles/animations.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,QAOzB,CAAC"}

package/dist/styles/animations.css.js

@@ -0,0 +1,13 @@
+"use client";
+import { style } from "@vanilla-extract/css";
+const clickAnimation = style({
+  transition: "transform ease-in 0.1s",
+  selectors: {
+    "&:active:not(:disabled)": {
+      transform: "scale(0.98)"
+    }
+  }
+});
+export {
+  clickAnimation
+};

package/dist/styles/states.css.cjs

@@ -0,0 +1,109 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const recipes = require("@vanilla-extract/recipes");
+const Record = require("fp-ts/Record");
+const _function = require("fp-ts/function");
+const focusStyle = css.style({
+  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
+};
+const colorVariants = {
+  ..._function.pipe(supportedColorTokens, Record.mapWithIndex((token) => 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 = recipes.recipe({
+  base: css.style({
+    "::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 }
+      }
+    })))
+  }
+});
+const stateLayers = stateLayersInternal;
+exports.focusStyle = focusStyle;
+exports.stateLayers = stateLayers;

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

@@ -0,0 +1,22 @@
+import { ComplexStyleRule } from "@vanilla-extract/css";
+export declare const focusStyle: string;
+declare const stateLayersInternal: import("@vanilla-extract/recipes").RuntimeFn<{
+    setFocusState: {
+        true: {
+            selectors: {
+                "&:not(:disabled):focus::after": {
+                    opacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        false: string;
+    };
+    borderSize: Record<"none" | "small" | "medium" | "large" | "x-small", ComplexStyleRule>;
+    borderRadius: Record<"none" | "overlay" | "button" | "input" | "small" | "checkbox" | "medium" | "large" | "x-large" | "xx-large" | "full" | "card" | "picker" | "feedback", ComplexStyleRule>;
+    backgroundColor: Record<"on-primary" | "on-secondary" | "on-secondary-container" | "on-background" | "on-surface-variant" | "on-error" | "on-success" | "palette-black", ComplexStyleRule>;
+}>;
+type RecipeProperties = Pick<typeof stateLayersInternal, "variants" | "classNames">;
+type RecipeFunction = (options: Required<Parameters<typeof stateLayersInternal>[0]>) => string;
+export declare const stateLayers: RecipeProperties & RecipeFunction;
+export {};
+//# sourceMappingURL=states.css.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,109 @@
+"use client";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
+import { mapWithIndex, map } from "fp-ts/Record";
+import { pipe } from "fp-ts/function";
+const focusStyle = style({
+  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
+};
+const 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 = recipe({
+  base: style({
+    "::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 }
+      }
+    })))
+  }
+});
+const stateLayers = stateLayersInternal;
+export {
+  focusStyle,
+  stateLayers
+};

package/dist/translations/LocalizationProvider.cjs

@@ -0,0 +1,36 @@
+"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 LocalizationProvider = ({ children, ...props }) => jsxRuntime.jsx(localizationContext.Provider, { value: props, children });
+function useLocalization() {
+  return React__namespace.useContext(localizationContext);
+}
+function useLanguage() {
+  return useLocalization().language;
+}
+exports.LocalizationProvider = LocalizationProvider;
+exports.useLanguage = useLanguage;
+exports.useLocalization = useLocalization;

package/dist/translations/LocalizationProvider.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Language } from "./types.js";
+export interface LocalizationState {
+    /** The language used for texts in the library, e.g. validation messages, text elements or assistive text */
+    language: Language;
+}
+/**
+ * Use this to set the localization context for the library.
+ */
+export declare const LocalizationProvider: React.FC<LocalizationState>;
+export declare function useLocalization(): LocalizationState;
+export declare function useLanguage(): Language;
+//# sourceMappingURL=LocalizationProvider.d.ts.map

package/dist/translations/LocalizationProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalizationProvider.d.ts","sourceRoot":"","sources":["../../src/translations/LocalizationProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,WAAW,iBAAiB;IAC9B,4GAA4G;IAC5G,QAAQ,EAAE,QAAQ,CAAC;CACtB;AAMD;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAO5D,CAAC;AAEF,wBAAgB,eAAe,sBAE9B;AAED,wBAAgB,WAAW,aAE1B"}

package/dist/translations/LocalizationProvider.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+const localizationContext = React.createContext({
+  language: "no"
+});
+const LocalizationProvider = ({ children, ...props }) => jsx(localizationContext.Provider, { value: props, children });
+function useLocalization() {
+  return React.useContext(localizationContext);
+}
+function useLanguage() {
+  return useLocalization().language;
+}
+export {
+  LocalizationProvider,
+  useLanguage,
+  useLocalization
+};