@dynatrace/strato-components 3.11.2 → 3.12.0

package/forms/select/components/MenuList.js

@@ -34,10 +34,55 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_react_intl = require("react-intl");
 var import_NoOptionsMessage = require("./NoOptionsMessage.js");
 var import_sort_selected_options_first = require("./sort-selected-options-first.js");
 var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
+var import_screen_reader_only_css = require("../../../styles/screen-reader-only.sty.js");
 var styles = __toESM(require("../styles/Select.sty.js"));
+function countSelectableOptions(children) {
+  let count = 0;
+  for (const child of children) {
+    if (child === null || child === void 0) {
+      continue;
+    }
+    const props = child.props;
+    if ("type" in props) {
+      if (!props.isDisabled) {
+        count += 1;
+      }
+    } else {
+      count += props.options.filter((o) => !o.isDisabled).length;
+    }
+  }
+  return count;
+}
+function buildFilterAnnouncement(intl, children, isFiltering, isShowingNoOptions) {
+  if (!isFiltering) {
+    if (isShowingNoOptions) {
+      return "";
+    }
+    return intl.formatMessage(
+      {
+        defaultMessage: "{count, plural, one {Showing # option} other {Showing all # options}}",
+        id: "k21q5kyTS9rGFWLF",
+        description: "Screen reader announcement when the select filter is cleared, showing the total number of available options."
+      },
+      { count: countSelectableOptions(children) }
+    );
+  }
+  if (isShowingNoOptions) {
+    return intl.formatMessage(import_NoOptionsMessage.noResultsMessage);
+  }
+  return intl.formatMessage(
+    {
+      defaultMessage: "{count, plural, one {# option found} other {# options found}}",
+      id: "IUvOgujQzBX+gSUq",
+      description: "Screen reader announcement of the number of options matching the select filter."
+    },
+    { count: countSelectableOptions(children) }
+  );
+}
 function MenuList(props) {
   const { children, selectProps, innerProps } = props;
   const parentRef = (0, import_react.useRef)(null);
@@ -46,7 +91,8 @@ function MenuList(props) {
   const sortingMap = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
   let childrenArray = import_react.Children.toArray(children);
   const currentChildrenLength = (0, import_react.useRef)(childrenArray.length);
-  if (selectProps.showSelectedOptionsFirst && !(childrenArray.length === 1 && childrenArray[0].type === import_NoOptionsMessage.NoOptionsMessage)) {
+  const isShowingNoOptions = childrenArray.length === 1 && childrenArray[0].type === import_NoOptionsMessage.NoOptionsMessage;
+  if (selectProps.showSelectedOptionsFirst && !isShowingNoOptions) {
     if (initialRender.current === true) {
       [childrenArray, sortingMap.current] = (0, import_sort_selected_options_first.sortSelectedOptions)(childrenArray);
     } else if (currentChildrenLength.current !== childrenArray.length) {
@@ -61,6 +107,14 @@ function MenuList(props) {
     }
   }
   initialRender.current = false;
+  const intl = (0, import_react_intl.useIntl)();
+  const isFiltering = selectProps.customFilter !== void 0 && selectProps.inputValue !== void 0 && selectProps.inputValue !== "";
+  const filterAnnouncement = buildFilterAnnouncement(
+    intl,
+    childrenArray,
+    isFiltering,
+    isShowingNoOptions
+  );
   const optionVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: childrenArray.length,
     getScrollElement: () => parentRef.current,
@@ -91,52 +145,67 @@ function MenuList(props) {
       });
     });
   }, [notifyParentRefChange, childrenArray.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...innerProps,
-      ref: menulistref,
-      className: (0, import_clsx.default)(styles.selectMenuListWrapper, "strato-select-menulist"),
-      style: {
-        width: optionVirtualizer.scrollOffset !== null && optionVirtualizer.scrollOffset > 0 && selectProps.contentWidth === "max-content" ? optionVirtualizer.scrollRect?.width : void 0
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          role: "presentation",
-          style: {
-            height: optionVirtualizer.getTotalSize(),
-            display: "grid",
-            // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.
-            gridTemplateRows: Array.from(
-              optionVirtualizer.measurementsCache,
-              (el) => `${el?.size ?? 32}px`
-            ).join(" ")
-          },
-          className: styles.selectVirtualizationWrapper,
-          children: optionVirtualizer.getVirtualItems().map((virtualRow) => {
-            const child = childrenArray?.[virtualRow.index];
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                className: "strato-select-option",
-                "data-index": virtualRow.index,
-                style: {
-                  gridRow: virtualRow.index + 1,
-                  minWidth: 0,
-                  height: "fit-content"
-                },
-                ref: (el) => {
-                  optionVirtualizer.measureElement(el);
-                },
-                children: child
-              },
-              virtualRow.key
-            );
-          })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    selectProps.customFilter && // Rendered as a sibling, not a child, of the listbox below — role="listbox"
+    // only permits option/group children, so a nested role="status" trips axe's
+    // aria-required-children rule.
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: import_screen_reader_only_css.screenReaderOnly,
+        children: filterAnnouncement
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...innerProps,
+        ref: menulistref,
+        className: (0, import_clsx.default)(styles.selectMenuListWrapper, "strato-select-menulist"),
+        style: {
+          width: optionVirtualizer.scrollOffset !== null && optionVirtualizer.scrollOffset > 0 && selectProps.contentWidth === "max-content" ? optionVirtualizer.scrollRect?.width : void 0
         },
-        `wrapper-${selectProps.options.length}`
-      )
-    }
-  );
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            role: "presentation",
+            style: {
+              height: optionVirtualizer.getTotalSize(),
+              display: "grid",
+              // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.
+              gridTemplateRows: Array.from(
+                optionVirtualizer.measurementsCache,
+                (el) => `${el?.size ?? 32}px`
+              ).join(" ")
+            },
+            className: styles.selectVirtualizationWrapper,
+            children: optionVirtualizer.getVirtualItems().map((virtualRow) => {
+              const child = childrenArray?.[virtualRow.index];
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "strato-select-option",
+                  "data-index": virtualRow.index,
+                  style: {
+                    gridRow: virtualRow.index + 1,
+                    minWidth: 0,
+                    height: "fit-content"
+                  },
+                  ref: (el) => {
+                    optionVirtualizer.measureElement(el);
+                  },
+                  children: child
+                },
+                virtualRow.key
+              );
+            })
+          },
+          `wrapper-${selectProps.options.length}`
+        )
+      }
+    )
+  ] });
 }

package/forms/select/components/NoOptionsMessage.d.ts

@@ -1,4 +1,6 @@
+import { type MessageDescriptor } from 'react-intl';
 import type { GroupBase, NoticeProps as ReactNoOptionsMessageProps } from 'react-select';
+export declare const noResultsMessage: MessageDescriptor;
 type NoOptionsMessageProps<OptionValue, isMulti extends boolean, Group extends GroupBase<OptionValue>> = ReactNoOptionsMessageProps<OptionValue, isMulti, Group>;
 export declare function NoOptionsMessage<OptionValue, isMulti extends boolean, Group extends GroupBase<OptionValue>>(props: Readonly<NoOptionsMessageProps<OptionValue, isMulti, Group>>): import("react").JSX.Element;
 export {};

package/forms/select/components/NoOptionsMessage.js

@@ -27,7 +27,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var NoOptionsMessage_exports = {};
 __export(NoOptionsMessage_exports, {
-  NoOptionsMessage: () => NoOptionsMessage
+  NoOptionsMessage: () => NoOptionsMessage,
+  noResultsMessage: () => noResultsMessage
 });
 module.exports = __toCommonJS(NoOptionsMessage_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -36,6 +37,11 @@ var import_react_intl = require("react-intl");
 var import_can_receive_default_text_format = require("../../../core/utils/can-receive-default-text-format.js");
 var import_Text = require("../../../typography/text/Text.js");
 var styles = __toESM(require("../styles/Select.sty.js"));
+const noResultsMessage = {
+  defaultMessage: "No results found",
+  id: "U09aNQxYT1yrJ4eJ",
+  description: "Default message when no options are available in the select."
+};
 function NoOptionsMessage(props) {
   const selectEmptyState = props.selectProps.emptyState?.props.children;
   const {
@@ -53,11 +59,7 @@ function NoOptionsMessage(props) {
         className: (0, import_clsx.default)(styles.selectNoOptionsMessage, consumerClassName),
         as: "p",
         ...remainingProps,
-        children: selectEmptyState ?? intl.formatMessage({
-          defaultMessage: "No results found",
-          id: "U09aNQxYT1yrJ4eJ",
-          description: "Default message when no options are available in the select."
-        })
+        children: selectEmptyState ?? intl.formatMessage(noResultsMessage)
       }
     );
   } else {

package/forms/select/styles/Select.css

@@ -1,89 +1,89 @@
-._dlenfc0-3-11-2._dlenfc0-3-11-2 {
+._dlenfc0-3-12-0._dlenfc0-3-12-0 {
   pointer-events: auto;
 }
-._dlenfc1-3-11-2._dlenfc1-3-11-2 {
+._dlenfc1-3-12-0._dlenfc1-3-12-0 {
   min-width: unset;
 }
-._dlenfc3-3-11-2 {
+._dlenfc3-3-12-0 {
   width: 100%;
 }
-._dlenfc4-3-11-2 {
+._dlenfc4-3-12-0 {
   width: auto;
 }
-._dlenfc5-3-11-2 > span {
+._dlenfc5-3-12-0 > span {
   z-index: unset;
 }
-._dlenfc6-3-11-2 {
+._dlenfc6-3-12-0 {
   display: flex;
 }
-._dlenfc7-3-11-2 {
+._dlenfc7-3-12-0 {
   transform: rotate(180deg);
 }
-._dlenfc8-3-11-2 {
+._dlenfc8-3-12-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }
-._dlenfca-3-11-2 {
+._dlenfca-3-12-0 {
   width: auto;
 }
-._dlenfcc-3-11-2 {
+._dlenfcc-3-12-0 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-11-2) ._dlenfcc-3-11-2 {
-  --_bx32h3-3-11-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+:root:not(._1jgl8s50-3-12-0) ._dlenfcc-3-12-0 {
+  --_bx32h3-3-12-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._dlenfcd-3-11-2 {
+._dlenfcd-3-12-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-11-2 ._dlenfce-3-11-2, ._1jgl8s50-3-11-2 ._dlenfce-3-11-2:hover, ._1jgl8s50-3-11-2 ._dlenfce-3-11-2:active {
-  --_bx32h3-3-11-2: var(--dt-colors-background-surface-default, #fff);
-  --_bx32h4-3-11-2: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-12-0 ._dlenfce-3-12-0, ._1jgl8s50-3-12-0 ._dlenfce-3-12-0:hover, ._1jgl8s50-3-12-0 ._dlenfce-3-12-0:active {
+  --_bx32h3-3-12-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-3-12-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._dlenfcf-3-11-2 {
+._dlenfcf-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcg-3-11-2 {
+._dlenfcg-3-12-0 {
   width: 100%;
   position: relative;
 }
-._dlenfch-3-11-2 {
+._dlenfch-3-12-0 {
   overflow: auto;
 }
-._dlenfci-3-11-2 {
+._dlenfci-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfcj-3-11-2 {
+._dlenfcj-3-12-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfck-3-11-2 ._dlenfcl-3-11-2 {
+._dlenfck-3-12-0 ._dlenfcl-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcm-3-11-2 {
+._dlenfcm-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._dlenfcn-3-11-2.strato-select-divider {
+._dlenfcn-3-12-0.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfco-3-11-2 {
+._dlenfco-3-12-0 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfcp-3-11-2 {
+._dlenfcp-3-12-0 {
   min-width: 128px;
 }
-._dlenfcq-3-11-2 {
+._dlenfcq-3-12-0 {
   display: inline;
 }
-._dlenfcq-3-11-2 + ._dlenfcq-3-11-2:before {
+._dlenfcq-3-12-0 + ._dlenfcq-3-12-0:before {
   content: ", ";
 }
-._dlenfcr-3-11-2 {
+._dlenfcr-3-12-0 {
   position: relative;
   cursor: pointer;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -93,23 +93,23 @@
   padding-bottom: var(--dt-spacings-size-6, 6px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dlenfcr-3-11-2:hover:not(.strato-select-option--disabled) {
+._dlenfcr-3-12-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcr-3-11-2.strato-select-option--selected {
+._dlenfcr-3-12-0.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcr-3-11-2.strato-select-option--disabled {
+._dlenfcr-3-12-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcr-3-11-2.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcr-3-12-0.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcr-3-11-2.strato-select-option--selected:hover {
+._dlenfcr-3-12-0.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcr-3-11-2.strato-select-option--selected::before {
+._dlenfcr-3-12-0.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -120,11 +120,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcs-3-11-2:focus {
+._dlenfcs-3-12-0:focus {
   outline: none;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._dlenfct-3-11-2 {
+._dlenfct-3-12-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-top: var(--dt-spacings-size-6, 6px);
@@ -134,14 +134,14 @@
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
 }
-._dlenfct-3-11-2:hover:not(.strato-select-option--disabled) {
+._dlenfct-3-12-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfct-3-11-2.strato-select-option--disabled {
+._dlenfct-3-12-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcu-3-11-2 {
+._dlenfcu-3-12-0 {
   display: flex;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -153,29 +153,29 @@
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-sizing: border-box;
 }
-.strato-select-option--disabled ._dlenfcu-3-11-2 {
+.strato-select-option--disabled ._dlenfcu-3-12-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfcv-3-11-2 {
+._dlenfcv-3-12-0 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcw-3-11-2 {
+._dlenfcw-3-12-0 {
   fill: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcw-3-11-2 {
+.strato-select-option--disabled ._dlenfcw-3-12-0 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcx-3-11-2 {
+._dlenfcx-3-12-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._dlenfcy-3-11-2 {
+._dlenfcy-3-12-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);

package/forms/select/styles/Select.sty.js

@@ -47,27 +47,27 @@ var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/A
 var import_field_css_ts_vanilla = require("../../../styles/field.css");
 var import_Select_css_ts_vanilla = require("./Select.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearReactSelectZIndex = "_dlenfc5-3-11-2";
-var filter = "_dlenfc1-3-11-2";
-var placeholderColor = "_dlenfcl-3-11-2";
-var select = "_dlenfc0-3-11-2";
-var selectAll = "_dlenfcs-3-11-2";
-var selectGroupHeading = "_dlenfcf-3-11-2";
-var selectMenuDivider = "_dlenfcn-3-11-2";
-var selectMenuListWrapper = "_dlenfch-3-11-2";
-var selectMenuLoadingWrapper = "_dlenfcm-3-11-2";
-var selectMenuOverlay = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfco-3-11-2", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-11-2" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfcq-3-11-2";
-var selectNoOptionsMessage = "_dlenfci-3-11-2";
-var selectOptionMulti = "_dlenfct-3-11-2";
-var selectOptionMultiIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfcu-3-11-2", variantClassNames: { selected: { true: "_dlenfcv-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcw-3-11-2";
-var selectOptionPrefix = "_dlenfcx-3-11-2";
-var selectOptionSingle = "_dlenfcr-3-11-2";
-var selectOptionSuffix = "_dlenfcy-3-11-2";
-var selectTrigger = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc9-3-11-2", variantClassNames: { fullWidth: { true: "_dlenfca-3-11-2" }, showError: { true: "_dlenfcb-3-11-2" }, readOnly: { true: "_dlenfcc-3-11-2" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-11-2"], [{ showError: false, readOnly: true }, "_dlenfce-3-11-2"]] });
-var selectTriggerIconWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc6-3-11-2", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-11-2" }, readOnly: { true: "_dlenfc8-3-11-2" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfcj-3-11-2";
-var selectVirtualizationWrapper = "_dlenfcg-3-11-2";
-var selectWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc2-3-11-2", variantClassNames: { fullWidth: { true: "_dlenfc3-3-11-2", false: "_dlenfc4-3-11-2" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfck-3-11-2";
+var clearReactSelectZIndex = "_dlenfc5-3-12-0";
+var filter = "_dlenfc1-3-12-0";
+var placeholderColor = "_dlenfcl-3-12-0";
+var select = "_dlenfc0-3-12-0";
+var selectAll = "_dlenfcs-3-12-0";
+var selectGroupHeading = "_dlenfcf-3-12-0";
+var selectMenuDivider = "_dlenfcn-3-12-0";
+var selectMenuListWrapper = "_dlenfch-3-12-0";
+var selectMenuLoadingWrapper = "_dlenfcm-3-12-0";
+var selectMenuOverlay = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfco-3-12-0", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-12-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
+var selectMultiValue = "_dlenfcq-3-12-0";
+var selectNoOptionsMessage = "_dlenfci-3-12-0";
+var selectOptionMulti = "_dlenfct-3-12-0";
+var selectOptionMultiIndicator = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfcu-3-12-0", variantClassNames: { selected: { true: "_dlenfcv-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var selectOptionMultiIndicatorIcon = "_dlenfcw-3-12-0";
+var selectOptionPrefix = "_dlenfcx-3-12-0";
+var selectOptionSingle = "_dlenfcr-3-12-0";
+var selectOptionSuffix = "_dlenfcy-3-12-0";
+var selectTrigger = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc9-3-12-0", variantClassNames: { fullWidth: { true: "_dlenfca-3-12-0" }, showError: { true: "_dlenfcb-3-12-0" }, readOnly: { true: "_dlenfcc-3-12-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-12-0"], [{ showError: false, readOnly: true }, "_dlenfce-3-12-0"]] });
+var selectTriggerIconWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc6-3-12-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-12-0" }, readOnly: { true: "_dlenfc8-3-12-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
+var selectValueContainerTruncationBox = "_dlenfcj-3-12-0";
+var selectVirtualizationWrapper = "_dlenfcg-3-12-0";
+var selectWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dlenfc2-3-12-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-12-0", false: "_dlenfc4-3-12-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var validAndEnabled = "_dlenfck-3-12-0";

package/forms/spin-buttons/SpinButton.css

@@ -1,28 +1,28 @@
-._r47o0w1-3-11-2 {
+._r47o0w1-3-12-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-11-2:empty::before {
+._r47o0w1-3-12-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-11-2:focus:empty {
+._r47o0w1-3-12-0:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-11-2 {
+._r47o0w2-3-12-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-11-2:focus:empty {
+._r47o0w2-3-12-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-11-2 {
+._r47o0w3-3-12-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-11-2:empty::before {
+._r47o0w3-3-12-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-11-2 {
+._r47o0w4-3-12-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

package/forms/spin-buttons/SpinButton.sty.js

@@ -23,5 +23,5 @@ __export(SpinButton_css_exports, {
 module.exports = __toCommonJS(SpinButton_css_exports);
 var import_SpinButton_css_ts_vanilla = require("./SpinButton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var spinButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_r47o0w1-3-11-2", variantClassNames: { error: { true: "_r47o0w2-3-11-2" }, disabled: { true: "_r47o0w3-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-11-2"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-11-2";
+var spinButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_r47o0w1-3-12-0", variantClassNames: { error: { true: "_r47o0w2-3-12-0" }, disabled: { true: "_r47o0w3-3-12-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-12-0"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-12-0";