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

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

@@ -1,84 +1,128 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useState } from "react";
-import { Select } from "@base-ui/react/select";
-import classNames from "classnames";
-import { inputContentWrapper, inputFieldWrapperRecipe, 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 "../../../foundation/logos/Logo.css.js";
-import { atoms } from "@gnist/themes/atoms.css.js";
-import { labelStyle } from "../shared-styles/labelStyles.css.js";
+import "../../../foundation/index.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";
-import "../../actions/buttons/styles.css.js";
-import "../../../styles/states.css.js";
 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/RadioGroup.js";
-import "../../actions/selectionControls/switch.css.js";
-import "../../../styles/animations.css.js";
-import "../../actions/chips/styles.css.js";
+import "../../../building-blocks/index.js";
+import "../../actions/index.js";
+import { postInputWidth, preInputWidth } from "../shared-styles/inputFieldConstants.css.js";
+import { inputContentWrapper, inputFieldWrapperRecipe, wrapperStyle } from "../shared-styles/inputField.css.js";
+import { listBoxStyle, optionBackground, optionStyle, popUpStyle, selectStyle, singleOptionStyle } from "./select.css.js";
+import { useSelectInputLogic } from "../shared.js";
+import { labelStyle } from "../shared-styles/labelStyles.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import * as React from "react";
+import { useState } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import classNames from "classnames";
+import { Select } from "@base-ui/react/select";
+//#region src/components/inputs/dropdowns/SelectBase.tsx
 function SelectBase(props, isMultiple) {
-  const { contentProps, wrapperProps, commonInputProps } = useSelectInputLogic(props);
-  const itemsMap = React.useMemo(() => Object.fromEntries(props.options.map((o) => [o.value, o.label])), [props.options]);
-  const [isExpanded, setIsExpanded] = useState(false);
-  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: [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
-    })
-  }, ...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("span", { id: contentProps.labelId, className: labelStyle({
-    density: props.density,
-    validityType: props.validity?.type,
-    isElevated: hasValue,
-    disabled: props.disabled,
-    visuallyHidden: props.hideLabel && hasValue || false
-  }), style: {
-    ...assignInlineVars({
-      [preInputWidth]: wrapperProps.preInputWidth
-    })
-  }, children: jsx("span", { style: { position: "relative" }, children: props.label }) }), jsx("span", { style: { flexGrow: "1" } }), jsx(Icon, { icon: isExpanded ? "expand_less" : "expand_more", className: atoms({
-    paddingLeft: "xxs",
-    color: props.disabled ? "on-disabled" : "on-surface"
-  }) })] })] }), jsx(InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, disabled: props.disabled, reserveSpaceForMessage: props.reserveSpaceForMessage })] });
+	const { contentProps, wrapperProps, commonInputProps } = useSelectInputLogic(props);
+	const itemsMap = React.useMemo(() => Object.fromEntries(props.options.map((o) => [o.value, o.label])), [props.options]);
+	const [isExpanded, setIsExpanded] = useState(false);
+	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: [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
+					}) },
+					...commonInputProps,
+					children: jsx(Select.Value, { children: (value) => {
+						const selectedValues = Array.isArray(value) ? value : [value];
+						if (selectedValues.length === 0) return null;
+						return selectedValues.map((value) => itemsMap[value]).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("span", {
+						id: contentProps.labelId,
+						className: labelStyle({
+							density: props.density,
+							validityType: props.validity?.type,
+							isElevated: hasValue,
+							disabled: props.disabled,
+							visuallyHidden: props.hideLabel && hasValue || false
+						}),
+						style: { ...assignInlineVars({ [preInputWidth]: wrapperProps.preInputWidth }) },
+						children: jsx("span", {
+							style: { position: "relative" },
+							children: props.label
+						})
+					}),
+					jsx("span", { style: { flexGrow: "1" } }),
+					jsx(Icon, {
+						icon: isExpanded ? "expand_less" : "expand_more",
+						className: atoms({
+							paddingLeft: "xxs",
+							color: props.disabled ? "on-disabled" : "on-surface"
+						})
+					})
+				]
+			})]
+		}), jsx(InputHelperText, {
+			id: contentProps.helperId,
+			validity: props.validity,
+			helperText: props.helperText,
+			disabled: props.disabled,
+			reserveSpaceForMessage: props.reserveSpaceForMessage
+		})]
+	});
 }
-export {
-  SelectBase
-};
+//#endregion
+export { SelectBase };

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

@@ -1,6 +1,13 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const SelectBase = require("./SelectBase.cjs");
-const SingleSelect = (props) => SelectBase.SelectBase(props, false);
+const require_SelectBase = require("./SelectBase.cjs");
+//#region src/components/inputs/dropdowns/SingleSelect.tsx
+/**
+Single select allows users to select one item from a predefined list of options, presented in a dropdown. We typically see selects in forms.
+
+When the user opens the list, the first option is selected, and as the user hovers or arrows down the options, selected options are highlighted.  The single select can be used with or without leading icons in the item list.
+
+Documentation: [SingleSelect](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-dropdowns-singleselect--docs)
+*/
+var SingleSelect = (props) => require_SelectBase.SelectBase(props, false);
+//#endregion
 exports.SingleSelect = SingleSelect;

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

@@ -1,6 +1,13 @@
 "use client";
 import { SelectBase } from "./SelectBase.js";
-const SingleSelect = (props) => SelectBase(props, false);
-export {
-  SingleSelect
-};
+//#region src/components/inputs/dropdowns/SingleSelect.tsx
+/**
+Single select allows users to select one item from a predefined list of options, presented in a dropdown. We typically see selects in forms.
+
+When the user opens the list, the first option is selected, and as the user hovers or arrows down the options, selected options are highlighted.  The single select can be used with or without leading icons in the item list.
+
+Documentation: [SingleSelect](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-dropdowns-singleselect--docs)
+*/
+var SingleSelect = (props) => SelectBase(props, false);
+//#endregion
+export { SingleSelect };

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

@@ -1,7 +1,6 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const MultiSelect = require("./MultiSelect.cjs");
-const SingleSelect = require("./SingleSelect.cjs");
-exports.MultiSelect = MultiSelect.MultiSelect;
-exports.SingleSelect = SingleSelect.SingleSelect;
+const require_MultiSelect = require("./MultiSelect.cjs");
+const require_SingleSelect = require("./SingleSelect.cjs");
+exports.MultiSelect = require_MultiSelect.MultiSelect;
+exports.SingleSelect = require_SingleSelect.SingleSelect;

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

@@ -1,7 +1,4 @@
 "use client";
 import { MultiSelect } from "./MultiSelect.js";
 import { SingleSelect } from "./SingleSelect.js";
-export {
-  MultiSelect,
-  SingleSelect
-};
+export { MultiSelect, SingleSelect };

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

@@ -1,97 +1,76 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const inputField_css = require("../shared-styles/inputField.css.cjs");
-const listBoxStyle = layers_css_js.gnistStyle([
-  atoms_css_js.atoms({
-    marginTop: "xxs",
-    display: "flex",
-    flexDirection: "column",
-    padding: "base",
-    borderRadius: "picker",
-    backgroundColor: "surface",
-    color: "on-surface",
-    boxShadow: "medium",
-    rowGap: "base"
-  }),
-  {
-    outline: "none",
-    maxHeight: "40vh",
-    height: "fit-content",
-    overflow: "auto"
-  }
-]);
-const popUpStyle = layers_css_js.gnistStyle({
-  zIndex: 1400,
-  minWidth: "280px",
-  maxWidth: "100%"
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_inputField_css = require("../shared-styles/inputField.css.cjs");
+let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+//#region src/components/inputs/dropdowns/select.css.ts
+var listBoxStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+	marginTop: "xxs",
+	display: "flex",
+	flexDirection: "column",
+	padding: "base",
+	borderRadius: "picker",
+	backgroundColor: "surface",
+	color: "on-surface",
+	boxShadow: "medium",
+	rowGap: "base"
+}), {
+	outline: "none",
+	maxHeight: "40vh",
+	height: "fit-content",
+	overflow: "auto"
+}]);
+var popUpStyle = (0, _vanilla_extract_css.style)({
+	zIndex: 1400,
+	minWidth: "280px",
+	maxWidth: "100%"
 });
-const selectStyle = layers_css_js.gnistStyle([
-  inputField_css.inputFieldStyle,
-  {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    cursor: "default",
-    // Makes trigger cover the wrapper, allowing trigger to activate
-    position: "absolute",
-    inset: 0,
-    paddingTop: "inherit",
-    paddingBottom: "inherit",
-    boxSizing: "border-box"
-  }
-]);
-const optionStyle = layers_css_js.gnistStyle([
-  atoms_css_js.atoms({
-    display: "flex",
-    position: "relative",
-    height: "xl",
-    borderRadius: "picker",
-    alignItems: "center"
-  }),
-  {
-    cursor: "pointer",
-    padding: `0 ${tokens_css_js.tokens.spacing.xs}`,
-    outline: "none",
-    selectors: {
-      "&:focus,&:focus-visible": {
-        outline: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.interactive}`
-      }
-    }
-  }
-]);
-const singleOptionStyle = layers_css_js.gnistStyle([
-  atoms_css_js.atoms({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }),
-  { width: "100%" }
-]);
-const optionBackground = layers_css_js.gnistStyle([
-  atoms_css_js.atoms({
-    display: "flex",
-    position: "absolute",
-    backgroundColor: "on-surface",
-    borderRadius: "picker"
-  }),
-  {
-    opacity: 0,
-    height: "100%",
-    width: "100%",
-    right: 0,
-    selectors: {
-      "&:hover": { opacity: tokens_css_js.tokens.opacity["on-hover"] },
-      "&:active": { opacity: tokens_css_js.tokens.opacity["on-pressed"] },
-      "&:focus,&:focus-visible": {
-        opacity: tokens_css_js.tokens.opacity["on-focus"]
-      }
-    }
-  }
-]);
+var selectStyle = (0, _vanilla_extract_css.style)([require_inputField_css.inputFieldStyle, {
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	cursor: "default",
+	position: "absolute",
+	inset: 0,
+	paddingTop: "inherit",
+	paddingBottom: "inherit",
+	boxSizing: "border-box"
+}]);
+var optionStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+	display: "flex",
+	position: "relative",
+	height: "xl",
+	borderRadius: "picker",
+	alignItems: "center"
+}), {
+	cursor: "pointer",
+	padding: `0 ${_gnist_themes_tokens_css_js.tokens.spacing.xs}`,
+	outline: "none",
+	selectors: { "&:focus,&:focus-visible": { outline: `${_gnist_themes_tokens_css_js.tokens.stroke.medium} solid ${_gnist_themes_tokens_css_js.tokens.color.interactive}` } }
+}]);
+var singleOptionStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+}), { width: "100%" }]);
+var optionBackground = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+	display: "flex",
+	position: "absolute",
+	backgroundColor: "on-surface",
+	borderRadius: "picker"
+}), {
+	opacity: 0,
+	height: "100%",
+	width: "100%",
+	right: 0,
+	selectors: {
+		"&:hover": { opacity: _gnist_themes_tokens_css_js.tokens.opacity["on-hover"] },
+		"&:active": { opacity: _gnist_themes_tokens_css_js.tokens.opacity["on-pressed"] },
+		"&:focus,&:focus-visible": { opacity: _gnist_themes_tokens_css_js.tokens.opacity["on-focus"] }
+	}
+}]);
+//#endregion
 exports.listBoxStyle = listBoxStyle;
 exports.optionBackground = optionBackground;
 exports.optionStyle = optionStyle;

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

@@ -1,100 +1,73 @@
 "use client";
+import { inputFieldStyle } from "../shared-styles/inputField.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { inputFieldStyle } from "../shared-styles/inputField.css.js";
-const listBoxStyle = gnistStyle([
-  atoms({
-    marginTop: "xxs",
-    display: "flex",
-    flexDirection: "column",
-    padding: "base",
-    borderRadius: "picker",
-    backgroundColor: "surface",
-    color: "on-surface",
-    boxShadow: "medium",
-    rowGap: "base"
-  }),
-  {
-    outline: "none",
-    maxHeight: "40vh",
-    height: "fit-content",
-    overflow: "auto"
-  }
-]);
-const popUpStyle = gnistStyle({
-  zIndex: 1400,
-  minWidth: "280px",
-  maxWidth: "100%"
+import { style } from "@vanilla-extract/css";
+//#region src/components/inputs/dropdowns/select.css.ts
+var listBoxStyle = style([atoms({
+	marginTop: "xxs",
+	display: "flex",
+	flexDirection: "column",
+	padding: "base",
+	borderRadius: "picker",
+	backgroundColor: "surface",
+	color: "on-surface",
+	boxShadow: "medium",
+	rowGap: "base"
+}), {
+	outline: "none",
+	maxHeight: "40vh",
+	height: "fit-content",
+	overflow: "auto"
+}]);
+var popUpStyle = style({
+	zIndex: 1400,
+	minWidth: "280px",
+	maxWidth: "100%"
 });
-const selectStyle = gnistStyle([
-  inputFieldStyle,
-  {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    cursor: "default",
-    // Makes trigger cover the wrapper, allowing trigger to activate
-    position: "absolute",
-    inset: 0,
-    paddingTop: "inherit",
-    paddingBottom: "inherit",
-    boxSizing: "border-box"
-  }
-]);
-const optionStyle = gnistStyle([
-  atoms({
-    display: "flex",
-    position: "relative",
-    height: "xl",
-    borderRadius: "picker",
-    alignItems: "center"
-  }),
-  {
-    cursor: "pointer",
-    padding: `0 ${tokens.spacing.xs}`,
-    outline: "none",
-    selectors: {
-      "&:focus,&:focus-visible": {
-        outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}`
-      }
-    }
-  }
-]);
-const singleOptionStyle = gnistStyle([
-  atoms({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }),
-  { width: "100%" }
-]);
-const optionBackground = gnistStyle([
-  atoms({
-    display: "flex",
-    position: "absolute",
-    backgroundColor: "on-surface",
-    borderRadius: "picker"
-  }),
-  {
-    opacity: 0,
-    height: "100%",
-    width: "100%",
-    right: 0,
-    selectors: {
-      "&:hover": { opacity: tokens.opacity["on-hover"] },
-      "&:active": { opacity: tokens.opacity["on-pressed"] },
-      "&:focus,&:focus-visible": {
-        opacity: tokens.opacity["on-focus"]
-      }
-    }
-  }
-]);
-export {
-  listBoxStyle,
-  optionBackground,
-  optionStyle,
-  popUpStyle,
-  selectStyle,
-  singleOptionStyle
-};
+var selectStyle = style([inputFieldStyle, {
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	cursor: "default",
+	position: "absolute",
+	inset: 0,
+	paddingTop: "inherit",
+	paddingBottom: "inherit",
+	boxSizing: "border-box"
+}]);
+var optionStyle = style([atoms({
+	display: "flex",
+	position: "relative",
+	height: "xl",
+	borderRadius: "picker",
+	alignItems: "center"
+}), {
+	cursor: "pointer",
+	padding: `0 ${tokens.spacing.xs}`,
+	outline: "none",
+	selectors: { "&:focus,&:focus-visible": { outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}` } }
+}]);
+var singleOptionStyle = style([atoms({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+}), { width: "100%" }]);
+var optionBackground = style([atoms({
+	display: "flex",
+	position: "absolute",
+	backgroundColor: "on-surface",
+	borderRadius: "picker"
+}), {
+	opacity: 0,
+	height: "100%",
+	width: "100%",
+	right: 0,
+	selectors: {
+		"&:hover": { opacity: tokens.opacity["on-hover"] },
+		"&:active": { opacity: tokens.opacity["on-pressed"] },
+		"&:focus,&:focus-visible": { opacity: tokens.opacity["on-focus"] }
+	}
+}]);
+//#endregion
+export { listBoxStyle, optionBackground, optionStyle, popUpStyle, selectStyle, singleOptionStyle };

package/dist/components/inputs/index.cjs

@@ -1,15 +1,17 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const MultiSelect = require("./dropdowns/MultiSelect.cjs");
-const SingleSelect = require("./dropdowns/SingleSelect.cjs");
-const calendar = require("./pickers/calendar.cjs");
-const TextArea = require("./textFields/TextArea.cjs");
-const TextField = require("./textFields/TextField.cjs");
-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;
+const require_MultiSelect = require("./dropdowns/MultiSelect.cjs");
+const require_SingleSelect = require("./dropdowns/SingleSelect.cjs");
+require("./dropdowns/index.cjs");
+const require_calendar = require("./pickers/calendar.cjs");
+require("./pickers/index.cjs");
+const require_TextArea = require("./textFields/TextArea.cjs");
+const require_TextField = require("./textFields/TextField.cjs");
+require("./textFields/index.cjs");
+exports.Calendar = require_calendar.Calendar;
+exports.MultiSelect = require_MultiSelect.MultiSelect;
+exports.SingleSelect = require_SingleSelect.SingleSelect;
+exports.TextArea = require_TextArea.TextArea;
+exports.TextField = require_TextField.TextField;
+exports.characterCount = require_TextArea.characterCount;
+exports.wordCount = require_TextArea.wordCount;