@gnist/design-system 3.8.3 → 3.9.0

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

@@ -1,3 +1,4 @@
 export { Checkbox, type CheckboxProps } from "./Checkbox.js";
 export { RadioButton, type RadioButtonProps } from "./RadioButton.js";
+export { Switch, type SwitchProps } from "./Switch.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC"}

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

@@ -1,7 +1,9 @@
 "use client";
 import { Checkbox } from "./Checkbox.js";
 import { RadioButton } from "./RadioButton.js";
+import { Switch } from "./Switch.js";
 export {
   Checkbox,
-  RadioButton
+  RadioButton,
+  Switch
 };

package/dist/components/actions/selectionControls/switch.css.cjs

@@ -0,0 +1,165 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const recipes = require("@vanilla-extract/recipes");
+const css = require("@vanilla-extract/css");
+const switchContainerStyle = css.style({
+  display: "flex",
+  alignItems: "center"
+});
+const switchContainer = css.style([
+  {
+    position: "relative",
+    display: "inline-flex",
+    cursor: "pointer",
+    transition: "background-color 0.2s ease"
+  },
+  atoms_css_js.atoms({
+    borderRadius: "full",
+    width: "xxl",
+    height: "l"
+  })
+]);
+const SwitchRecipe = recipes.recipe({
+  base: [
+    switchContainer,
+    atoms_css_js.atoms({
+      borderColor: "outline"
+    }),
+    {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      boxSizing: "border-box"
+    },
+    {
+      selectors: {
+        "&:focus:not(:focus-visible)": {
+          outline: "none"
+        },
+        "&:has(:focus-visible)": {
+          outline: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.interactive}`
+        }
+      }
+    }
+  ],
+  variants: {
+    selected: {
+      true: [
+        atoms_css_js.atoms({
+          backgroundColor: "success"
+        })
+      ],
+      false: [
+        atoms_css_js.atoms({
+          backgroundColor: "surface-variant"
+        })
+      ]
+    },
+    disabled: {
+      true: [
+        atoms_css_js.atoms({
+          backgroundColor: "disabled",
+          borderColor: "disabled"
+        }),
+        {
+          cursor: "not-allowed",
+          opacity: 0.6
+        }
+      ],
+      false: {}
+    },
+    validity: {
+      error: [
+        atoms_css_js.atoms({
+          borderColor: "error"
+        })
+      ]
+    }
+  }
+});
+const switchThumb = css.style({
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  transition: "left 0.2s ease, background-color 0.2s ease",
+  borderRadius: "50%",
+  backgroundColor: tokens_css_js.tokens.palette.white,
+  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+});
+const SwitchThumbRecipe = recipes.recipe({
+  base: [
+    switchThumb,
+    atoms_css_js.atoms({
+      width: "m",
+      height: "m"
+    })
+  ],
+  variants: {
+    selected: {
+      true: {
+        left: `calc(100% - ${tokens_css_js.tokens.spacing.m} - 1px)`
+      },
+      false: {
+        left: "1px"
+      }
+    },
+    disabled: {
+      true: [
+        atoms_css_js.atoms({
+          backgroundColor: "on-disabled"
+        })
+      ],
+      false: {}
+    }
+  }
+});
+const switchLabel = css.style([
+  {
+    userSelect: "none",
+    fontSize: tokens_css_js.tokens.type.small.body.fontSize,
+    lineHeight: tokens_css_js.tokens.type.small.body.lineHeight
+  },
+  atoms_css_js.atoms({
+    color: "on-surface"
+  })
+]);
+const SwitchLabelRecipe = recipes.recipe({
+  base: [switchLabel],
+  variants: {
+    disabled: {
+      true: [
+        atoms_css_js.atoms({
+          color: "on-disabled"
+        })
+      ],
+      false: {}
+    },
+    side: {
+      left: [
+        atoms_css_js.atoms({
+          marginRight: "xxs"
+        })
+      ],
+      right: [
+        atoms_css_js.atoms({
+          marginLeft: "xxs"
+        })
+      ]
+    }
+  }
+});
+const switchDescription = css.style([
+  atoms_css_js.atoms({
+    color: "on-secondary"
+  })
+]);
+exports.SwitchLabelRecipe = SwitchLabelRecipe;
+exports.SwitchRecipe = SwitchRecipe;
+exports.SwitchThumbRecipe = SwitchThumbRecipe;
+exports.switchContainer = switchContainer;
+exports.switchContainerStyle = switchContainerStyle;
+exports.switchDescription = switchDescription;
+exports.switchLabel = switchLabel;
+exports.switchThumb = switchThumb;

package/dist/components/actions/selectionControls/switch.css.d.ts

@@ -0,0 +1,46 @@
+export declare const switchContainerStyle: string;
+export declare const switchContainer: string;
+export declare const SwitchRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: (string | {
+            cursor: "not-allowed";
+            opacity: number;
+        })[];
+        false: {};
+    };
+    validity: {
+        error: string[];
+    };
+}>;
+export declare const switchThumb: string;
+export declare const SwitchThumbRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            left: `calc(100% - var(--${string}) - 1px)`;
+        };
+        false: {
+            left: "1px";
+        };
+    };
+    disabled: {
+        true: string[];
+        false: {};
+    };
+}>;
+export declare const switchLabel: string;
+export declare const SwitchLabelRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: string[];
+        false: {};
+    };
+    side: {
+        left: string[];
+        right: string[];
+    };
+}>;
+export declare const switchDescription: string;
+//# sourceMappingURL=switch.css.d.ts.map

package/dist/components/actions/selectionControls/switch.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,QAG/B,CAAC;AACH,eAAO,MAAM,eAAe,QAY1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;EAwDvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAQtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0B5B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;EAwB5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}

package/dist/components/actions/selectionControls/switch.css.js

@@ -0,0 +1,165 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { recipe } from "@vanilla-extract/recipes";
+import { style } from "@vanilla-extract/css";
+const switchContainerStyle = style({
+  display: "flex",
+  alignItems: "center"
+});
+const switchContainer = style([
+  {
+    position: "relative",
+    display: "inline-flex",
+    cursor: "pointer",
+    transition: "background-color 0.2s ease"
+  },
+  atoms({
+    borderRadius: "full",
+    width: "xxl",
+    height: "l"
+  })
+]);
+const SwitchRecipe = recipe({
+  base: [
+    switchContainer,
+    atoms({
+      borderColor: "outline"
+    }),
+    {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      boxSizing: "border-box"
+    },
+    {
+      selectors: {
+        "&:focus:not(:focus-visible)": {
+          outline: "none"
+        },
+        "&:has(:focus-visible)": {
+          outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}`
+        }
+      }
+    }
+  ],
+  variants: {
+    selected: {
+      true: [
+        atoms({
+          backgroundColor: "success"
+        })
+      ],
+      false: [
+        atoms({
+          backgroundColor: "surface-variant"
+        })
+      ]
+    },
+    disabled: {
+      true: [
+        atoms({
+          backgroundColor: "disabled",
+          borderColor: "disabled"
+        }),
+        {
+          cursor: "not-allowed",
+          opacity: 0.6
+        }
+      ],
+      false: {}
+    },
+    validity: {
+      error: [
+        atoms({
+          borderColor: "error"
+        })
+      ]
+    }
+  }
+});
+const switchThumb = style({
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  transition: "left 0.2s ease, background-color 0.2s ease",
+  borderRadius: "50%",
+  backgroundColor: tokens.palette.white,
+  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+});
+const SwitchThumbRecipe = recipe({
+  base: [
+    switchThumb,
+    atoms({
+      width: "m",
+      height: "m"
+    })
+  ],
+  variants: {
+    selected: {
+      true: {
+        left: `calc(100% - ${tokens.spacing.m} - 1px)`
+      },
+      false: {
+        left: "1px"
+      }
+    },
+    disabled: {
+      true: [
+        atoms({
+          backgroundColor: "on-disabled"
+        })
+      ],
+      false: {}
+    }
+  }
+});
+const switchLabel = style([
+  {
+    userSelect: "none",
+    fontSize: tokens.type.small.body.fontSize,
+    lineHeight: tokens.type.small.body.lineHeight
+  },
+  atoms({
+    color: "on-surface"
+  })
+]);
+const SwitchLabelRecipe = recipe({
+  base: [switchLabel],
+  variants: {
+    disabled: {
+      true: [
+        atoms({
+          color: "on-disabled"
+        })
+      ],
+      false: {}
+    },
+    side: {
+      left: [
+        atoms({
+          marginRight: "xxs"
+        })
+      ],
+      right: [
+        atoms({
+          marginLeft: "xxs"
+        })
+      ]
+    }
+  }
+});
+const switchDescription = style([
+  atoms({
+    color: "on-secondary"
+  })
+]);
+export {
+  SwitchLabelRecipe,
+  SwitchRecipe,
+  SwitchThumbRecipe,
+  switchContainer,
+  switchContainerStyle,
+  switchDescription,
+  switchLabel,
+  switchThumb
+};

package/dist/components/index.cjs

@@ -10,6 +10,7 @@ const TextButton = require("./actions/buttons/TextButton.cjs");
 const IconButton = require("./actions/buttons/IconButton.cjs");
 const Checkbox = require("./actions/selectionControls/Checkbox.cjs");
 const RadioButton = require("./actions/selectionControls/RadioButton.cjs");
+const Switch = require("./actions/selectionControls/Switch.cjs");
 const ActionChip = require("./actions/chips/ActionChip.cjs");
 const FilterChip = require("./actions/chips/FilterChip.cjs");
 const TagChip = require("./actions/chips/TagChip.cjs");
@@ -39,6 +40,7 @@ exports.TextButton = TextButton.TextButton;
 exports.IconButton = IconButton.IconButton;
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
+exports.Switch = Switch.Switch;
 exports.ActionChip = ActionChip.ActionChip;
 exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;

package/dist/components/index.js

@@ -8,6 +8,7 @@ import { TextButton } from "./actions/buttons/TextButton.js";
 import { IconButton } from "./actions/buttons/IconButton.js";
 import { Checkbox } from "./actions/selectionControls/Checkbox.js";
 import { RadioButton } from "./actions/selectionControls/RadioButton.js";
+import { Switch } from "./actions/selectionControls/Switch.js";
 import { ActionChip } from "./actions/chips/ActionChip.js";
 import { FilterChip } from "./actions/chips/FilterChip.js";
 import { TagChip } from "./actions/chips/TagChip.js";
@@ -55,6 +56,7 @@ export {
   SingleSelect,
   Spinner,
   SuccessButton,
+  Switch,
   TagChip,
   TextArea,
   TextButton,

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

@@ -1,9 +1,8 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
 const SelectBase = require("./SelectBase.cjs");
-const MultiSelect = React.forwardRef(function MultiSelect2(props, ref) {
-  return SelectBase.SelectBase(props, true, ref);
-});
+function MultiSelect(props) {
+  return 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 const MultiSelect: React.FC<MultiSelectProps>;
+export declare function MultiSelect(props: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
 //# 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":"AACA,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,CAIlD,CAAC"}
+{"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"}

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

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

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

@@ -25,10 +25,12 @@ require("../../progress/Spinner.cjs");
 require("../../actions/buttons/styles.css.cjs");
 require("../../../styles/states.css.cjs");
 const Checkbox = require("../../actions/selectionControls/Checkbox.cjs");
-require("../../actions/selectionControls/RadioButton.cjs");
-require("../../actions/chips/ActionChip.cjs");
-require("../../actions/chips/FilterChip.cjs");
-require("../../actions/chips/TagChip.cjs");
+require("../../actions/selectionControls/radiobutton.css.cjs");
+require("../../actions/selectionControls/shared.css.cjs");
+require("../../../utilities/layout/Column.cjs");
+require("../../actions/selectionControls/Switch.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");
@@ -37,11 +39,11 @@ const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in
 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, ref) {
+function SelectBase(props, isMultiple) {
   const { contentProps, wrapperProps, commonInputProps } = shared.useSelectInputLogic(props);
   const { selectProps } = shared.getSelectInputProps(props);
   const [isExpanded, setIsExpanded] = React.useState(false);
-  return jsxRuntime.jsxs("span", { ref, className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
+  return jsxRuntime.jsxs("span", { className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
     validityType: props.validity?.type
@@ -50,7 +52,7 @@ function SelectBase(props, isMultiple, ref) {
       [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
       [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
     })
-  }, ...commonInputProps, ...selectProps, ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
+  }, ...commonInputProps, ...selectProps, ref: props.ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
     listbox: listBoxComponent,
     popup: popUpComponent
   }, onChange: (e, value) => {

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

@@ -1,5 +1,4 @@
 import { SelectBaseInputProps } from "../shared.js";
-import { ForwardedRef } from "react";
 export interface SelectBaseProps<TVal> extends SelectBaseInputProps<TVal> {
     /**
      * Values to be listed as options
@@ -10,5 +9,5 @@ export interface SelectBaseProps<TVal> extends SelectBaseInputProps<TVal> {
         value: string;
     }[];
 }
-export declare function SelectBase<T>(props: SelectBaseProps<T>, isMultiple: boolean, ref: ForwardedRef<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectBase<T>(props: SelectBaseProps<T>, isMultiple: boolean): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SelectBase.d.ts.map

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;AAM1D,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAqB/C,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,EACxB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,UAAU,EAAE,OAAO,EACnB,GAAG,EAAE,YAAY,CAAC,iBAAiB,CAAC,2CA4HvC"}
+{"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"}

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

@@ -23,21 +23,23 @@ import "../../progress/Spinner.js";
 import "../../actions/buttons/styles.css.js";
 import "../../../styles/states.css.js";
 import { Checkbox } from "../../actions/selectionControls/Checkbox.js";
-import "../../actions/selectionControls/RadioButton.js";
-import "../../actions/chips/ActionChip.js";
-import "../../actions/chips/FilterChip.js";
-import "../../actions/chips/TagChip.js";
+import "../../actions/selectionControls/radiobutton.css.js";
+import "../../actions/selectionControls/shared.css.js";
+import "../../../utilities/layout/Column.js";
+import "../../actions/selectionControls/Switch.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, ref) {
+function SelectBase(props, isMultiple) {
   const { contentProps, wrapperProps, commonInputProps } = useSelectInputLogic(props);
   const { selectProps } = getSelectInputProps(props);
   const [isExpanded, setIsExpanded] = useState(false);
-  return jsxs("span", { ref, className: classNames(wrapperProps.className, wrapperStyle), children: [jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
+  return jsxs("span", { className: classNames(wrapperProps.className, wrapperStyle), children: [jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
     validityType: props.validity?.type
@@ -46,7 +48,7 @@ function SelectBase(props, isMultiple, ref) {
       [preInputWidth]: wrapperProps.preInputWidth,
       [postInputWidth]: wrapperProps.postInputWidth
     })
-  }, ...commonInputProps, ...selectProps, ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
+  }, ...commonInputProps, ...selectProps, ref: props.ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
     listbox: listBoxComponent,
     popup: popUpComponent
   }, onChange: (e, value) => {

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

@@ -1,9 +1,8 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
 const SelectBase = require("./SelectBase.cjs");
-const SingleSelect = React.forwardRef(function SingleSelect2(props, ref) {
-  return SelectBase.SelectBase(props, false, ref);
-});
+function SingleSelect(props) {
+  return SelectBase.SelectBase(props, false);
+}
 exports.SingleSelect = SingleSelect;

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

@@ -7,5 +7,5 @@ export type SingleSelectProps = SelectBaseProps<string>;
 
  Documentation: [SingleSelect](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-dropdowns-singleselect--docs)
  */
-export declare const SingleSelect: React.FC<SingleSelectProps>;
+export declare function SingleSelect(props: SingleSelectProps): import("react/jsx-runtime").JSX.Element;
 //# 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":"AACA,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,CAIpD,CAAC"}
+{"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"}

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

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

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

@@ -28,11 +28,13 @@ require("../../progress/Spinner.cjs");
 require("../../actions/buttons/styles.css.cjs");
 require("../../../styles/states.css.cjs");
 const IconButton = require("../../actions/buttons/IconButton.cjs");
-require("../../actions/selectionControls/Checkbox.cjs");
-require("../../actions/selectionControls/RadioButton.cjs");
-require("../../actions/chips/ActionChip.cjs");
-require("../../actions/chips/FilterChip.cjs");
-require("../../actions/chips/TagChip.cjs");
+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("../../../styles/animations.css.cjs");
+require("../../actions/chips/styles.css.cjs");
 const Calendar_css = require("./Calendar.css.cjs");
 const HeaderCell = componentUtils.component("HeaderCell", Calendar_css.headerCell, "div");
 function weekDayNumberStartingMonday(date2) {
@@ -165,7 +167,7 @@ function clampDate(date2, minDate, maxDate) {
   }
   return date2;
 }
-const Calendar = React.forwardRef(function Calendar2({ selected, setSelected, isDateUnavailable, minDate: origMinDate, maxDate: origMaxDate, onNavigate, isLoading }, ref) {
+function Calendar({ selected, setSelected, isDateUnavailable, minDate: origMinDate, maxDate: origMaxDate, onNavigate, isLoading, ref }) {
   const minDate = origMinDate ? date.getStartOfDay(origMinDate) : void 0;
   const maxDate = origMaxDate ? date.getStartOfDay(origMaxDate) : void 0;
   const text = index.useTranslation((t) => t.components.inputs.pickers.calendar);
@@ -204,5 +206,5 @@ const Calendar = React.forwardRef(function Calendar2({ selected, setSelected, is
   }, label: text.showPreviousMonth, disabled: minDate && date.maxDayOfMonth(date.nextMonth(current, -1)) < minDate }), jsxRuntime.jsx(IconButton.IconButton, { className: Calendar_css.arrowButton, icon: "arrow_forward", onClick: () => {
     handleChangeMonth(1);
   }, label: text.showNextMonth, disabled: maxDate && date.nextMonth(current, 1) > maxDate })] })] }), jsxRuntime.jsxs("div", { className: Calendar_css.gridStyle, role: "grid", children: [jsxRuntime.jsxs("div", { className: Calendar_css.rowStyle, role: "row", style: { height: "unset" }, children: [jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.mon }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.tue }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.wed }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.thu }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.fri }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.sat }), jsxRuntime.jsx(HeaderCell, { role: "columnheader", children: days.sun })] }), jsxRuntime.jsx(DateGrid, { current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading: !!isLoading })] })] });
-});
+}
 exports.Calendar = Calendar;