@gnist/design-system 3.12.1 → 3.12.3

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.12.3](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.12.2...@gnist/design-system@3.12.3) (2025-09-19)
+
+### Bug Fixes
+
+* add link to documentation for LocalizationProvider ([3c6ba95](https://github.com/mollerdigital/design-system-design-system/commit/3c6ba9583c30eb6f2706ebfe20b75b94d7a2d903))
+
+## [3.12.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.12.1...@gnist/design-system@3.12.2) (2025-09-16)
+
+**Note:** Version bump only for package @gnist/design-system
+
 ## [3.12.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.12.0...@gnist/design-system@3.12.1) (2025-09-12)
 
 ### Bug Fixes

package/dist/components/actions/selectionControls/Switch.cjs

@@ -6,12 +6,11 @@ const InputHelperText = require("../../../building-blocks/inputs/InputHelperText
 const ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
 require("../../../utilities/accessibility/visuallyHidden.css.cjs");
 const index = require("../../../utilities/html/index.cjs");
-const React = require("react");
 const switch_css = require("./switch.css.cjs");
 const shared_css = require("./shared.css.cjs");
 const shared = require("./shared.cjs");
 const defaultRender = (switchElement, description) => jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [switchElement, jsxRuntime.jsx("div", { className: switch_css.switchDescription, children: description })] });
-const Switch = React.forwardRef(function Switch2({ offLabel, onLabel, description, value = false, onChange, disabled, validity, id = index.createValidHtmlId(offLabel || onLabel || "toggle"), hideLabel = false, canShowErrorMessage = false, className, ...rest }, ref) {
+function Switch({ offLabel, onLabel, description, value = false, onChange, disabled, validity, id = index.createValidHtmlId(offLabel || onLabel || "toggle"), hideLabel = false, canShowErrorMessage = false, className, ref, ...rest }) {
   const inputId = id;
   const labelId = `${id}-label`;
   const helperId = `${id}-helper`;
@@ -45,5 +44,5 @@ const Switch = React.forwardRef(function Switch2({ offLabel, onLabel, descriptio
     disabled
   }), children: onLabel })] }) });
   return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: defaultRender(switchElement, descriptionElement) });
-});
+}
 exports.Switch = Switch;

package/dist/components/actions/selectionControls/Switch.d.ts

@@ -1,9 +1,11 @@
+import { Ref } from "react";
 import { SelectionControlProps } from "./shared.js";
 export interface SwitchProps extends Omit<SelectionControlProps<boolean>, "render"> {
     /** The left side label of the switch. */
     offLabel?: string;
     /** The right side label of the switch. */
     onLabel: string;
+    ref?: Ref<HTMLSpanElement>;
 }
 /**
  * Use switches to:
@@ -13,5 +15,5 @@ export interface SwitchProps extends Omit<SelectionControlProps<boolean>, "rende
  *
  * Documentation: [Switch](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-switch--docs)
  */
-export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Switch({ offLabel, onLabel, description, value, onChange, disabled, validity, id, hideLabel, canShowErrorMessage, className, ref, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/components/actions/selectionControls/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Switch.tsx"],"names":[],"mappings":"AAYA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC;IACtD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;CACnB;AAYD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,yGAkHjB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAC;AAS1C,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC;IACtD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC9B;AAYD;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAa,EACb,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAAuD,EACvD,SAAiB,EACjB,mBAA2B,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACV,EAAE,WAAW,2CAkGb"}

package/dist/components/actions/selectionControls/Switch.js

@@ -4,12 +4,11 @@ import { useInputHelperText } from "../../../building-blocks/inputs/InputHelperT
 import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
 import "../../../utilities/accessibility/visuallyHidden.css.js";
 import { createValidHtmlId } from "../../../utilities/html/index.js";
-import { forwardRef } from "react";
 import { switchContainerStyle, SwitchLabelRecipe, SwitchRecipe, SwitchThumbRecipe, switchDescription } from "./switch.css.js";
 import { InputWrapper, InputStyleRecipe } from "./shared.css.js";
 import { SelectionDescription, HelperTextWrapper } from "./shared.js";
 const defaultRender = (switchElement, description) => jsxs(Fragment, { children: [switchElement, jsx("div", { className: switchDescription, children: description })] });
-const Switch = forwardRef(function Switch2({ offLabel, onLabel, description, value = false, onChange, disabled, validity, id = createValidHtmlId(offLabel || onLabel || "toggle"), hideLabel = false, canShowErrorMessage = false, className, ...rest }, ref) {
+function Switch({ offLabel, onLabel, description, value = false, onChange, disabled, validity, id = createValidHtmlId(offLabel || onLabel || "toggle"), hideLabel = false, canShowErrorMessage = false, className, ref, ...rest }) {
   const inputId = id;
   const labelId = `${id}-label`;
   const helperId = `${id}-helper`;
@@ -43,7 +42,7 @@ const Switch = forwardRef(function Switch2({ offLabel, onLabel, description, val
     disabled
   }), children: onLabel })] }) });
   return jsx(HelperTextWrapper, { ...helperTextProps, children: defaultRender(switchElement, descriptionElement) });
-});
+}
 export {
   Switch
 };

package/dist/components/inputs/dropdowns/MultiSelect.cjs

@@ -2,7 +2,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const SelectBase = require("./SelectBase.cjs");
-function MultiSelect(props) {
-  return SelectBase.SelectBase(props, true);
-}
+const MultiSelect = (props) => SelectBase.SelectBase(props, true);
 exports.MultiSelect = MultiSelect;

package/dist/components/inputs/dropdowns/MultiSelect.d.ts

@@ -5,5 +5,5 @@ export type MultiSelectProps = SelectBaseProps<string[]>;
 
  Documentation: [MultiSelect](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-dropdowns-multiselect--docs)
  */
-export declare function MultiSelect(props: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: React.FC<MultiSelectProps>;
 //# sourceMappingURL=MultiSelect.d.ts.map

package/dist/components/inputs/dropdowns/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC;AAEzD;;;;GAIG;AAEH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC;AAEzD;;;;GAIG;AAEH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAEb,CAAC"}

package/dist/components/inputs/dropdowns/MultiSelect.js

@@ -1,8 +1,6 @@
 "use client";
 import { SelectBase } from "./SelectBase.js";
-function MultiSelect(props) {
-  return SelectBase(props, true);
-}
+const MultiSelect = (props) => SelectBase(props, true);
 export {
   MultiSelect
 };

package/dist/components/inputs/dropdowns/SelectBase.cjs

@@ -2,23 +2,26 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const componentUtils = require("@gnist/component-utils");
-const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
-require("../../../utilities/layout/Row.cjs");
-require("@gnist/themes/tokens.css.js");
-require("react-content-loader");
 const React = require("react");
+const select = require("@base-ui-components/react/select");
+const classNames = require("classnames");
+const inputField_css = require("../shared-styles/inputField.css.cjs");
+const select_css = require("./select.css.cjs");
+const dynamic = require("@vanilla-extract/dynamic");
+const inputFieldConstants_css = require("../shared-styles/inputFieldConstants.css.cjs");
 const shared = require("../shared.cjs");
 require("../../../foundation/iconography/ExtraIconsProvider.cjs");
 require("../../../foundation/iconography/IconVariantProvider.cjs");
 require("../../../foundation/iconography/icons.cjs");
 const Icon = require("../../../foundation/iconography/Icon.cjs");
 require("../../../foundation/typography/index.cjs");
-const classNames = require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const base = require("@mui/base");
-const dynamic = require("@vanilla-extract/dynamic");
+const labelStyles_css = require("../shared-styles/labelStyles.css.cjs");
+const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+require("../../../utilities/layout/Row.cjs");
+require("@gnist/themes/tokens.css.js");
+require("react-content-loader");
 require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
 require("../../../utilities/accessibility/visuallyHidden.css.cjs");
 require("../../progress/Spinner.cjs");
@@ -28,42 +31,63 @@ const Checkbox = require("../../actions/selectionControls/Checkbox.cjs");
 require("../../actions/selectionControls/radiobutton.css.cjs");
 require("../../actions/selectionControls/shared.css.cjs");
 require("../../../utilities/layout/Column.cjs");
-require("../../actions/selectionControls/Switch.cjs");
+require("../../actions/selectionControls/switch.css.cjs");
 require("../../../styles/animations.css.cjs");
 require("../../actions/chips/styles.css.cjs");
-const inputField_css = require("../shared-styles/inputField.css.cjs");
-const inputFieldConstants_css = require("../shared-styles/inputFieldConstants.css.cjs");
-const labelStyles_css = require("../shared-styles/labelStyles.css.cjs");
-const select_css = require("./select.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+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 classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const listBoxComponent = base.prepareForSlot(componentUtils.component("listBox", select_css.listBoxStyle, "div"));
-const popUpComponent = base.prepareForSlot(componentUtils.component("popUp", select_css.popUpStyle, "div"));
 function SelectBase(props, isMultiple) {
   const { contentProps, wrapperProps, commonInputProps } = shared.useSelectInputLogic(props);
-  const { selectProps } = shared.getSelectInputProps(props);
+  const itemsMap = React__namespace.useMemo(() => Object.fromEntries(props.options.map((o) => [o.value, o.label])), [props.options]);
   const [isExpanded, setIsExpanded] = React.useState(false);
-  return jsxRuntime.jsxs("span", { className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
+  const hasValue = isMultiple ? props.value.length > 0 : props.value !== "";
+  return jsxRuntime.jsxs("span", { className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [jsxRuntime.jsxs("label", { className: inputField_css.inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
     validityType: props.validity?.type
-  }), children: [jsxRuntime.jsx(base.Select, { ...commonInputProps, ...selectProps, style: {
+  }), children: [jsxRuntime.jsxs(select.Select.Root, { items: itemsMap, onValueChange: (val) => {
+    if (Array.isArray(val)) {
+      props.onChange?.(val);
+    } else {
+      const next = val ?? "";
+      props.onChange?.(next);
+    }
+  }, onOpenChange: setIsExpanded, value: props.value, disabled: props.disabled, multiple: isMultiple, children: [jsxRuntime.jsx(select.Select.Trigger, { ref: props.ref, className: select_css.selectStyle, style: {
     ...dynamic.assignInlineVars({
       [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
       [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
     })
-  }, className: select_css.selectStyle, ref: props.ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
-    listbox: listBoxComponent,
-    popup: popUpComponent
-  }, onChange: (e, value) => {
-    selectProps.onChange?.(value);
-  }, children: props.options.map((option) => jsxRuntime.jsxs(base.Option, { value: option.value, className: select_css.optionStyle, children: [jsxRuntime.jsx("div", { className: select_css.optionBackground }), isMultiple ? jsxRuntime.jsx(Checkbox.Checkbox, { label: option.label, value: Array.isArray(props.value) && props.value?.includes(option.value), readOnly: true, tabIndex: -1 }) : jsxRuntime.jsxs("div", { className: select_css.singleOptionStyle, children: [jsxRuntime.jsx("p", { children: option.label }), typeof props.value === "string" && props.value === option.value && jsxRuntime.jsx(Icon.Icon, { icon: "check" })] })] }, option.value)) }), jsxRuntime.jsxs("span", { className: inputField_css.inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsxRuntime.jsx(Icon.Icon, { icon: props.leadingIcon, className: atoms_css_js.atoms({
+  }, ...commonInputProps, children: jsxRuntime.jsx(select.Select.Value, { children: (value) => {
+    const selectedValues = Array.isArray(value) ? value : [value];
+    if (selectedValues.length === 0) {
+      return null;
+    }
+    return selectedValues.map((value2) => itemsMap[value2]).join(", ");
+  } }) }), jsxRuntime.jsx(select.Select.Portal, { children: jsxRuntime.jsx(select.Select.Positioner, { className: select_css.popUpStyle, side: "bottom", alignItemWithTrigger: false, align: "start", children: jsxRuntime.jsx(select.Select.Popup, { className: select_css.listBoxStyle, children: props.options.map((opt) => jsxRuntime.jsxs(select.Select.Item, { value: opt.value, label: opt.label, className: select_css.optionStyle, children: [jsxRuntime.jsx("div", { className: select_css.optionBackground }), isMultiple ? jsxRuntime.jsx(Checkbox.Checkbox, { label: opt.label, value: Array.isArray(props.value) && props.value?.includes(opt.value), readOnly: true, tabIndex: -1 }) : jsxRuntime.jsxs("div", { className: select_css.singleOptionStyle, children: [jsxRuntime.jsx(select.Select.ItemText, { children: opt.label }), jsxRuntime.jsx(select.Select.ItemIndicator, { children: jsxRuntime.jsx(Icon.Icon, { icon: "check" }) })] })] }, opt.value)) }) }) })] }), jsxRuntime.jsxs("span", { className: inputField_css.inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsxRuntime.jsx(Icon.Icon, { icon: props.leadingIcon, className: atoms_css_js.atoms({
     paddingRight: "xxs",
     color: props.disabled ? "on-disabled" : "on-surface"
-  }) }), jsxRuntime.jsx("label", { id: contentProps.labelId, className: labelStyles_css.labelStyle({
+  }) }), jsxRuntime.jsx("span", { id: contentProps.labelId, className: labelStyles_css.labelStyle({
     density: props.density,
     validityType: props.validity?.type,
-    isElevated: !!props.value,
+    isElevated: hasValue,
     disabled: props.disabled
   }), style: {
     ...dynamic.assignInlineVars({

package/dist/components/inputs/dropdowns/SelectBase.d.ts

@@ -1,4 +1,8 @@
 import { SelectBaseInputProps } from "../shared.js";
+export type SelectOption = {
+    label: string;
+    value: string;
+};
 export interface SelectBaseProps<TVal> extends SelectBaseInputProps<TVal> {
     /**
      * Values to be listed as options

package/dist/components/inputs/dropdowns/SelectBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SelectBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,oBAAoB,EAGvB,qBAAyD;AA2B1D,MAAM,WAAW,eAAe,CAAC,IAAI,CAAE,SAAQ,oBAAoB,CAAC,IAAI,CAAC;IACrE;;;OAGG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAOD,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,2CAwH3E"}
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SelectBase.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,oBAAoB,EAAuB,MAAM,cAAc,CAAC;AAOzE,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,MAAM,WAAW,eAAe,CAAC,IAAI,CAAE,SAAQ,oBAAoB,CAAC,IAAI,CAAC;IACrE;;;OAGG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,2CA6K3E"}

package/dist/components/inputs/dropdowns/SelectBase.js

@@ -1,22 +1,26 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { component } from "@gnist/component-utils";
-import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
-import "../../../utilities/layout/Row.js";
-import "@gnist/themes/tokens.css.js";
-import "react-content-loader";
+import * as React from "react";
 import { useState } from "react";
-import { useSelectInputLogic, getSelectInputProps } from "../shared.js";
+import { Select } from "@base-ui-components/react/select";
+import classNames from "classnames";
+import { inputFieldWrapperRecipe, inputContentWrapper, wrapperStyle } from "../shared-styles/inputField.css.js";
+import { selectStyle, popUpStyle, listBoxStyle, optionStyle, optionBackground, singleOptionStyle } from "./select.css.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { postInputWidth, preInputWidth } from "../shared-styles/inputFieldConstants.css.js";
+import { useSelectInputLogic } from "../shared.js";
 import "../../../foundation/iconography/ExtraIconsProvider.js";
 import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import "../../../foundation/typography/index.js";
-import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { prepareForSlot, Select, Option } from "@mui/base";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { labelStyle } from "../shared-styles/labelStyles.css.js";
+import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import "../../../utilities/layout/Row.js";
+import "@gnist/themes/tokens.css.js";
+import "react-content-loader";
 import "../../../utilities/accessibility/ScreenReaderOnly.js";
 import "../../../utilities/accessibility/visuallyHidden.css.js";
 import "../../progress/Spinner.js";
@@ -26,40 +30,43 @@ import { Checkbox } from "../../actions/selectionControls/Checkbox.js";
 import "../../actions/selectionControls/radiobutton.css.js";
 import "../../actions/selectionControls/shared.css.js";
 import "../../../utilities/layout/Column.js";
-import "../../actions/selectionControls/Switch.js";
+import "../../actions/selectionControls/switch.css.js";
 import "../../../styles/animations.css.js";
 import "../../actions/chips/styles.css.js";
-import { inputFieldWrapperRecipe, inputContentWrapper, wrapperStyle } from "../shared-styles/inputField.css.js";
-import { postInputWidth, preInputWidth } from "../shared-styles/inputFieldConstants.css.js";
-import { labelStyle } from "../shared-styles/labelStyles.css.js";
-import { listBoxStyle, popUpStyle, selectStyle, optionStyle, optionBackground, singleOptionStyle } from "./select.css.js";
-const listBoxComponent = prepareForSlot(component("listBox", listBoxStyle, "div"));
-const popUpComponent = prepareForSlot(component("popUp", popUpStyle, "div"));
 function SelectBase(props, isMultiple) {
   const { contentProps, wrapperProps, commonInputProps } = useSelectInputLogic(props);
-  const { selectProps } = getSelectInputProps(props);
+  const itemsMap = React.useMemo(() => Object.fromEntries(props.options.map((o) => [o.value, o.label])), [props.options]);
   const [isExpanded, setIsExpanded] = useState(false);
-  return jsxs("span", { className: classNames(wrapperProps.className, wrapperStyle), children: [jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
+  const hasValue = isMultiple ? props.value.length > 0 : props.value !== "";
+  return jsxs("span", { className: classNames(wrapperProps.className, wrapperStyle), children: [jsxs("label", { className: inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
     validityType: props.validity?.type
-  }), children: [jsx(Select, { ...commonInputProps, ...selectProps, style: {
+  }), children: [jsxs(Select.Root, { items: itemsMap, onValueChange: (val) => {
+    if (Array.isArray(val)) {
+      props.onChange?.(val);
+    } else {
+      const next = val ?? "";
+      props.onChange?.(next);
+    }
+  }, onOpenChange: setIsExpanded, value: props.value, disabled: props.disabled, multiple: isMultiple, children: [jsx(Select.Trigger, { ref: props.ref, className: selectStyle, style: {
     ...assignInlineVars({
       [preInputWidth]: wrapperProps.preInputWidth,
       [postInputWidth]: wrapperProps.postInputWidth
     })
-  }, className: selectStyle, ref: props.ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
-    listbox: listBoxComponent,
-    popup: popUpComponent
-  }, onChange: (e, value) => {
-    selectProps.onChange?.(value);
-  }, children: props.options.map((option) => jsxs(Option, { value: option.value, className: optionStyle, children: [jsx("div", { className: optionBackground }), isMultiple ? jsx(Checkbox, { label: option.label, value: Array.isArray(props.value) && props.value?.includes(option.value), readOnly: true, tabIndex: -1 }) : jsxs("div", { className: singleOptionStyle, children: [jsx("p", { children: option.label }), typeof props.value === "string" && props.value === option.value && jsx(Icon, { icon: "check" })] })] }, option.value)) }), jsxs("span", { className: inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsx(Icon, { icon: props.leadingIcon, className: atoms({
+  }, ...commonInputProps, children: jsx(Select.Value, { children: (value) => {
+    const selectedValues = Array.isArray(value) ? value : [value];
+    if (selectedValues.length === 0) {
+      return null;
+    }
+    return selectedValues.map((value2) => itemsMap[value2]).join(", ");
+  } }) }), jsx(Select.Portal, { children: jsx(Select.Positioner, { className: popUpStyle, side: "bottom", alignItemWithTrigger: false, align: "start", children: jsx(Select.Popup, { className: listBoxStyle, children: props.options.map((opt) => jsxs(Select.Item, { value: opt.value, label: opt.label, className: optionStyle, children: [jsx("div", { className: optionBackground }), isMultiple ? jsx(Checkbox, { label: opt.label, value: Array.isArray(props.value) && props.value?.includes(opt.value), readOnly: true, tabIndex: -1 }) : jsxs("div", { className: singleOptionStyle, children: [jsx(Select.ItemText, { children: opt.label }), jsx(Select.ItemIndicator, { children: jsx(Icon, { icon: "check" }) })] })] }, opt.value)) }) }) })] }), jsxs("span", { className: inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsx(Icon, { icon: props.leadingIcon, className: atoms({
     paddingRight: "xxs",
     color: props.disabled ? "on-disabled" : "on-surface"
-  }) }), jsx("label", { id: contentProps.labelId, className: labelStyle({
+  }) }), jsx("span", { id: contentProps.labelId, className: labelStyle({
     density: props.density,
     validityType: props.validity?.type,
-    isElevated: !!props.value,
+    isElevated: hasValue,
     disabled: props.disabled
   }), style: {
     ...assignInlineVars({

package/dist/components/inputs/dropdowns/SingleSelect.cjs

@@ -2,7 +2,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const SelectBase = require("./SelectBase.cjs");
-function SingleSelect(props) {
-  return SelectBase.SelectBase(props, false);
-}
+const SingleSelect = (props) => SelectBase.SelectBase(props, false);
 exports.SingleSelect = SingleSelect;

package/dist/components/inputs/dropdowns/SingleSelect.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { SelectBaseProps } from "./SelectBase.js";
 export type SingleSelectProps = SelectBaseProps<string>;
 /**
@@ -7,5 +8,5 @@ export type SingleSelectProps = SelectBaseProps<string>;
 
  Documentation: [SingleSelect](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-dropdowns-singleselect--docs)
  */
-export declare function SingleSelect(props: SingleSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelect: React.FC<SingleSelectProps>;
 //# sourceMappingURL=SingleSelect.d.ts.map

package/dist/components/inputs/dropdowns/SingleSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SingleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAExD;;;;;;GAMG;AAEH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAEpD"}
+{"version":3,"file":"SingleSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SingleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAExD;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAExB,CAAC"}

package/dist/components/inputs/dropdowns/SingleSelect.js

@@ -1,8 +1,6 @@
 "use client";
 import { SelectBase } from "./SelectBase.js";
-function SingleSelect(props) {
-  return SelectBase(props, false);
-}
+const SingleSelect = (props) => SelectBase(props, false);
 export {
   SingleSelect
 };

package/dist/components/inputs/dropdowns/select.css.cjs

@@ -7,9 +7,9 @@ const css = require("@vanilla-extract/css");
 const inputField_css = require("../shared-styles/inputField.css.cjs");
 const listBoxStyle = css.style([
   atoms_css_js.atoms({
+    marginTop: "xxs",
     display: "flex",
     flexDirection: "column",
-    marginTop: "s",
     padding: "base",
     borderRadius: "picker",
     backgroundColor: "surface",
@@ -35,7 +35,13 @@ const selectStyle = css.style([
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    cursor: "default"
+    cursor: "default",
+    // Makes trigger cover the wrapper, allowing trigger to activate
+    position: "absolute",
+    inset: 0,
+    paddingTop: "inherit",
+    paddingBottom: "inherit",
+    boxSizing: "border-box"
   }
 ]);
 const optionStyle = css.style([

package/dist/components/inputs/dropdowns/select.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/select.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,QAkBvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,WAAW,QAQtB,CAAC;AAEH,eAAO,MAAM,WAAW,QAkBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAoB3B,CAAC"}
+{"version":3,"file":"select.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/select.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,QAkBvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,WAAW,QAetB,CAAC;AAEH,eAAO,MAAM,WAAW,QAkBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAoB3B,CAAC"}

package/dist/components/inputs/dropdowns/select.css.js

@@ -5,9 +5,9 @@ import { style } from "@vanilla-extract/css";
 import { inputFieldStyle } from "../shared-styles/inputField.css.js";
 const listBoxStyle = style([
   atoms({
+    marginTop: "xxs",
     display: "flex",
     flexDirection: "column",
-    marginTop: "s",
     padding: "base",
     borderRadius: "picker",
     backgroundColor: "surface",
@@ -33,7 +33,13 @@ const selectStyle = style([
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    cursor: "default"
+    cursor: "default",
+    // Makes trigger cover the wrapper, allowing trigger to activate
+    position: "absolute",
+    inset: 0,
+    paddingTop: "inherit",
+    paddingBottom: "inherit",
+    boxSizing: "border-box"
   }
 ]);
 const optionStyle = style([

package/dist/components/inputs/pickers/calendar.cjs

@@ -32,7 +32,7 @@ require("../../actions/selectionControls/checkbox.css.cjs");
 require("../../actions/selectionControls/shared.css.cjs");
 require("../../../utilities/layout/Column.cjs");
 require("../../actions/selectionControls/radiobutton.css.cjs");
-require("../../actions/selectionControls/Switch.cjs");
+require("../../actions/selectionControls/switch.css.cjs");
 require("../../../styles/animations.css.cjs");
 require("../../actions/chips/styles.css.cjs");
 const Calendar_css = require("./Calendar.css.cjs");

package/dist/components/inputs/pickers/calendar.js

@@ -30,7 +30,7 @@ import "../../actions/selectionControls/checkbox.css.js";
 import "../../actions/selectionControls/shared.css.js";
 import "../../../utilities/layout/Column.js";
 import "../../actions/selectionControls/radiobutton.css.js";
-import "../../actions/selectionControls/Switch.js";
+import "../../actions/selectionControls/switch.css.js";
 import "../../../styles/animations.css.js";
 import "../../actions/chips/styles.css.js";
 import { headerCell, containerStyle, selectMonthRow, buttonRow, arrowButton, gridStyle, rowStyle, cellSkeletonStyle, firstDay, cellRecipe } from "./Calendar.css.js";

package/dist/components/inputs/shared.cjs

@@ -77,6 +77,7 @@ function useSelectInputLogic({ label, density: _density = "default", validity =
         "aria-invalid": true,
         "aria-errormessage": helperId
       },
+      "aria-labelledby": labelId,
       "aria-describedby": helperId,
       id,
       // Placeholder must be whitespace to ensure :placeholder-shown triggers when field is empty
@@ -99,27 +100,7 @@ function getInputFieldProps({ label, density, prefix, suffix, leadingIcon, trail
     inputProps
   };
 }
-function getSelectInputProps({ label, density, leadingIcon, helperText, ...selectProps }) {
-  return {
-    extraInformation: {
-      label,
-      density,
-      leadingIcon,
-      helperText
-    },
-    selectProps: {
-      onChange: selectProps.onChange,
-      validity: selectProps.validity,
-      id: selectProps.id,
-      disabled: selectProps.disabled,
-      value: selectProps.value,
-      ref: selectProps.ref,
-      key: selectProps.key
-    }
-  };
-}
 exports.getInputFieldProps = getInputFieldProps;
-exports.getSelectInputProps = getSelectInputProps;
 exports.isClickableIcon = isClickableIcon;
 exports.useInputFieldLogic = useInputFieldLogic;
 exports.useSelectInputLogic = useSelectInputLogic;

package/dist/components/inputs/shared.d.ts

@@ -107,6 +107,7 @@ export declare function useSelectInputLogic<T>({ label, density: _density, valid
         helperId: string;
     };
     commonInputProps: {
+        "aria-labelledby": string;
         "aria-describedby": string;
         id: string;
         placeholder: string;

package/dist/components/inputs/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,yBAAwC;AAE7E,OAAO,EAAE,aAAa,EAAE,WAAW,EAAY,MAAM,OAAO,CAAC;AAC7D,OAAO,EACH,gBAAgB,EAChB,UAAU,EACV,KAAK,EACL,QAAQ,EACX,MAAM,wBAAwB,CAAC;AAchC,wBAAgB,eAAe,CAC3B,IAAI,EAAE,YAAY,GAAG,aAAa,GACnC,IAAI,IAAI,aAAa,CAEvB;AAED,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,MAAM,WAAW,cACb,SAAQ,gBAAgB,CAAC,MAAM,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,IAAI,CACtC,SAAQ,aAAa,CAAC,iBAAiB,CAAC,EACpC,gBAAgB,CAAC,IAAI,CAAC,EACtB,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwChB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCzB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,EAClC,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,sBAAsB,EACtB,GAAG,UAAU,EAChB,EAAE,CAAC,GAAG,cAAc;;;;;;;;;;;;EAcpB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,GAAG,WAAW,EACjB,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;gCAtIK,IAAI;;;;;;;;;;EAwJlC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,yBAAwC;AAE7E,OAAO,EAAE,aAAa,EAAE,WAAW,EAAY,MAAM,OAAO,CAAC;AAC7D,OAAO,EACH,gBAAgB,EAChB,UAAU,EACV,KAAK,EACL,QAAQ,EACX,MAAM,wBAAwB,CAAC;AAchC,wBAAgB,eAAe,CAC3B,IAAI,EAAE,YAAY,GAAG,aAAa,GACnC,IAAI,IAAI,aAAa,CAEvB;AAED,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,MAAM,WAAW,cACb,SAAQ,gBAAgB,CAAC,MAAM,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,IAAI,CACtC,SAAQ,aAAa,CAAC,iBAAiB,CAAC,EACpC,gBAAgB,CAAC,IAAI,CAAC,EACtB,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwChB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCzB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,EAClC,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,sBAAsB,EACtB,GAAG,UAAU,EAChB,EAAE,CAAC,GAAG,cAAc;;;;;;;;;;;;EAcpB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,GAAG,WAAW,EACjB,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;gCAvIK,IAAI;;;;;;;;;;EAyJlC"}

package/dist/components/inputs/shared.js

@@ -75,6 +75,7 @@ function useSelectInputLogic({ label, density: _density = "default", validity =
         "aria-invalid": true,
         "aria-errormessage": helperId
       },
+      "aria-labelledby": labelId,
       "aria-describedby": helperId,
       id,
       // Placeholder must be whitespace to ensure :placeholder-shown triggers when field is empty
@@ -97,28 +98,8 @@ function getInputFieldProps({ label, density, prefix, suffix, leadingIcon, trail
     inputProps
   };
 }
-function getSelectInputProps({ label, density, leadingIcon, helperText, ...selectProps }) {
-  return {
-    extraInformation: {
-      label,
-      density,
-      leadingIcon,
-      helperText
-    },
-    selectProps: {
-      onChange: selectProps.onChange,
-      validity: selectProps.validity,
-      id: selectProps.id,
-      disabled: selectProps.disabled,
-      value: selectProps.value,
-      ref: selectProps.ref,
-      key: selectProps.key
-    }
-  };
-}
 export {
   getInputFieldProps,
-  getSelectInputProps,
   isClickableIcon,
   useInputFieldLogic,
   useSelectInputLogic

package/dist/components/surfaces/modal/Modal.cjs

@@ -26,7 +26,7 @@ require("../../actions/selectionControls/shared.css.cjs");
 require("../../../utilities/layout/Column.cjs");
 require("../../../utilities/layout/Row.cjs");
 require("../../actions/selectionControls/radiobutton.css.cjs");
-require("../../actions/selectionControls/Switch.cjs");
+require("../../actions/selectionControls/switch.css.cjs");
 require("../../../styles/animations.css.cjs");
 require("../../actions/chips/styles.css.cjs");
 const index = require("../../../translations/index.cjs");

package/dist/components/surfaces/modal/Modal.js

@@ -24,7 +24,7 @@ import "../../actions/selectionControls/shared.css.js";
 import "../../../utilities/layout/Column.js";
 import "../../../utilities/layout/Row.js";
 import "../../actions/selectionControls/radiobutton.css.js";
-import "../../actions/selectionControls/Switch.js";
+import "../../actions/selectionControls/switch.css.js";
 import "../../../styles/animations.css.js";
 import "../../actions/chips/styles.css.js";
 import { useTranslation } from "../../../translations/index.js";

package/dist/translations/LocalizationProvider.d.ts

@@ -6,6 +6,8 @@ export interface LocalizationState {
 }
 /**
  * Use this to set the localization context for the library.
+ *
+ * Documentation: [LocalizationProvider](https://gnist.moller.no/developers/components/latest/?path=/docs/configuration-localizationprovider--docs)
  */
 export declare const LocalizationProvider: React.FC<React.PropsWithChildren<LocalizationState>>;
 export declare function useLocalization(): LocalizationState;

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

@@ -1 +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,CACvC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAK7C,CAAC;AAEF,wBAAgB,eAAe,sBAE9B;AAED,wBAAgB,WAAW,aAE1B"}
+{"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;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CACvC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAK7C,CAAC;AAEF,wBAAgB,eAAe,sBAE9B;AAED,wBAAgB,WAAW,aAE1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnist/design-system",
-  "version": "3.12.1",
+  "version": "3.12.3",
   "license": "UNLICENSED",
   "type": "module",
   "main": "dist/index.cjs",
@@ -47,10 +47,10 @@
     "build-storybook": "cd docs && pnpm run build"
   },
   "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.2",
     "@formkit/auto-animate": "^0.8.2",
-    "@gnist/component-utils": "3.0.9",
-    "@gnist/themes": "^3.16.0",
-    "@mui/base": "^5.0.0-beta.70",
+    "@gnist/component-utils": "3.0.10",
+    "@gnist/themes": "^3.17.0",
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/css-utils": "^0.1.6",
     "@vanilla-extract/dynamic": "^2.1.5",
@@ -90,7 +90,7 @@
     "tslib": "^2.8.1",
     "tsx": "^4.20.4",
     "typescript-transform-paths": "^3.5.5",
-    "vite": "7.1.2",
+    "vite": "7.1.5",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4"
   },
@@ -102,5 +102,5 @@
       "optional": true
     }
   },
-  "gitHead": "0991cca0228700718ae27f309495a2afe3b67634"
+  "gitHead": "879ab31f050b17a16676d47b551fc712b5d6ed11"
 }