@dynatrace/strato-components 3.11.2 → 3.12.0

package/esm/forms/select/components/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/MenuList.tsx"],
-  "sourcesContent": ["import { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport type {\n  GroupBase,\n  MenuListProps as ReactSelectMenuListProps,\n} from 'react-select';\n\nimport { NoOptionsMessage } from './NoOptionsMessage.js';\nimport type { OptionProps } from './Option.js';\nimport {\n  applyStoredSelectionSortingOptions,\n  sortSelectedOptions,\n} from './sort-selected-options-first.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport * as styles from '../styles/Select.sty.js';\nimport type { BaseGroup, BaseOption } from '../types.js';\n\n/**\n * @internal\n */\nexport interface MenuListFunctionRefObject {\n  /** Function to scroll to the last option. */\n  scrollToBottom: () => void;\n  /** Function to scroll to a specific virtualizer index. */\n  scrollToIndex: (index: number) => void;\n}\n\ntype MenuListProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectMenuListProps<OptionValue, isMulti, Group>;\n\nexport function MenuList<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<MenuListProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const { children, selectProps, innerProps } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n  // Get a setter on the parentRef to get notified when the element re-renders.\n  const [notifyParentRefChange, setNotifyParentRefChange] =\n    useState<HTMLDivElement | null>();\n\n  const initialRender = useRef(true);\n  const sortingMap = useRef(new WeakMap());\n\n  let childrenArray = Children.toArray(children) as Array<\n    ReactElement<OptionProps<BaseOption<OptionValue>, isMulti, Group>>\n  >;\n\n  const currentChildrenLength = useRef(childrenArray.length);\n\n  // During the initial rendering, the sorting is created and positions saved in a WeakMap.\n  // If only the NoOptionsMessage/empty state is shown we don't need any sorting\n  if (\n    selectProps.showSelectedOptionsFirst &&\n    !(childrenArray.length === 1 && childrenArray[0].type === NoOptionsMessage)\n  ) {\n    if (initialRender.current === true) {\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    } else if (currentChildrenLength.current !== childrenArray.length) {\n      currentChildrenLength.current = childrenArray.length;\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    }\n    // Otherwise the data is sorted by the initial sorting parameters.\n    else {\n      const [newChildrenArray, newSortingMap] =\n        applyStoredSelectionSortingOptions(childrenArray, sortingMap.current);\n      childrenArray = newChildrenArray;\n      if (newSortingMap) {\n        sortingMap.current = newSortingMap;\n      }\n    }\n  }\n\n  initialRender.current = false;\n\n  const optionVirtualizer = useVirtualizer({\n    count: childrenArray.length,\n    getScrollElement: () => parentRef.current,\n    overscan: 5,\n    estimateSize: () => 32,\n  });\n\n  const menulistref = useMergeRefs([\n    props.innerRef,\n    parentRef,\n    setNotifyParentRefChange,\n    selectProps.contentRef,\n  ]);\n\n  useImperativeHandle(\n    selectProps.menuListFunctionRef,\n    (): MenuListFunctionRefObject => ({\n      scrollToBottom: () => {\n        optionVirtualizer.scrollToIndex(childrenArray.length);\n      },\n      scrollToIndex: (index: number) => {\n        optionVirtualizer.scrollToIndex(index);\n      },\n    }),\n  );\n\n  // When the parentElement re-renders, we will need to remeasure the virtualizer in order to\n  // keep the correct height.\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      optionVirtualizer.elementsCache.forEach((element) => {\n        optionVirtualizer.measureElement(element);\n      });\n    });\n    // Deliberately leave optionVirtualizer out of the update deps to prevent a maximum update depth exceeded issue.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notifyParentRefChange, childrenArray.length]);\n\n  return (\n    <div\n      {...innerProps}\n      ref={menulistref}\n      className={clsx(styles.selectMenuListWrapper, 'strato-select-menulist')}\n      style={{\n        width:\n          optionVirtualizer.scrollOffset !== null &&\n          optionVirtualizer.scrollOffset > 0 &&\n          selectProps.contentWidth === 'max-content'\n            ? optionVirtualizer.scrollRect?.width\n            : undefined,\n      }}\n    >\n      {/* role=\"presentation\" on a div is intentional \u2014 neutralizes the virtualization wrapper so screen readers count options correctly */}\n      <div\n        role=\"presentation\"\n        style={{\n          height: optionVirtualizer.getTotalSize(),\n          display: 'grid',\n          // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.\n          gridTemplateRows: Array.from(\n            optionVirtualizer.measurementsCache,\n            (el) => `${el?.size ?? 32}px`,\n          ).join(' '),\n        }}\n        key={`wrapper-${selectProps.options.length}`}\n        className={styles.selectVirtualizationWrapper}\n      >\n        {optionVirtualizer.getVirtualItems().map((virtualRow) => {\n          const child = childrenArray?.[virtualRow.index];\n          return (\n            <div\n              key={virtualRow.key}\n              className=\"strato-select-option\"\n              // data-index is required for the virtualizer to map the measure\n              // element correctly to the measured index.\n              data-index={virtualRow.index}\n              style={{\n                gridRow: virtualRow.index + 1,\n                minWidth: 0,\n                height: 'fit-content',\n              }}\n              ref={(el) => {\n                optionVirtualizer.measureElement(el);\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport { useIntl, type IntlShape } from 'react-intl';\nimport type {\n  GroupBase,\n  GroupProps as ReactSelectGroupProps,\n  MenuListProps as ReactSelectMenuListProps,\n  OptionProps as ReactSelectOptionProps,\n} from 'react-select';\n\nimport { NoOptionsMessage, noResultsMessage } from './NoOptionsMessage.js';\nimport type { OptionProps } from './Option.js';\nimport {\n  applyStoredSelectionSortingOptions,\n  sortSelectedOptions,\n} from './sort-selected-options-first.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { screenReaderOnly } from '../../../styles/screen-reader-only.sty.js';\nimport * as styles from '../styles/Select.sty.js';\nimport type { BaseGroup, BaseOption } from '../types.js';\n\n/**\n * @internal\n */\nexport interface MenuListFunctionRefObject {\n  /** Function to scroll to the last option. */\n  scrollToBottom: () => void;\n  /** Function to scroll to a specific virtualizer index. */\n  scrollToIndex: (index: number) => void;\n}\n\ntype MenuListProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectMenuListProps<OptionValue, isMulti, Group>;\n\n/**\n * Counts non-disabled leaf options across both flat and grouped children.\n * @param children - The current rendered option children.\n * @returns The number of selectable options.\n */\nfunction countSelectableOptions(children: ReactElement[]): number {\n  let count = 0;\n  for (const child of children) {\n    if (child === null || child === undefined) {\n      continue;\n    }\n    const props = (\n      child as unknown as ReactElement<\n        | ReactSelectGroupProps<BaseOption<unknown>>\n        | ReactSelectOptionProps<BaseOption<unknown>>\n      >\n    ).props;\n    // Distinguish between OptionProps and GroupProps: OptionProps has type:'option', GroupProps does not.\n    // Flat options expose isDisabled directly, groups have it in the options array.\n    if ('type' in props) {\n      if (!props.isDisabled) {\n        count += 1;\n      }\n    } else {\n      // props.options is the post-filter list; data.options would be the unfiltered original\n      count += props.options.filter((o) => !o.isDisabled).length;\n    }\n  }\n  return count;\n}\n\n/**\n * Builds the screen-reader live-region text shown when a custom filter is present.\n * @param intl - The intl instance used to format messages.\n * @param children - The current rendered option children.\n * @param isFiltering - Whether a non-empty filter is active.\n * @param isShowingNoOptions - Whether the no-options message is currently displayed.\n * @returns The live-region text to announce.\n */\nfunction buildFilterAnnouncement(\n  intl: IntlShape,\n  children: ReactElement[],\n  isFiltering: boolean,\n  isShowingNoOptions: boolean,\n): string {\n  if (!isFiltering) {\n    if (isShowingNoOptions) {\n      return '';\n    }\n    return intl.formatMessage(\n      {\n        defaultMessage:\n          '{count, plural, one {Showing # option} other {Showing all # options}}',\n        id: 'k21q5kyTS9rGFWLF',\n        description:\n          'Screen reader announcement when the select filter is cleared, showing the total number of available options.',\n      },\n      { count: countSelectableOptions(children) },\n    );\n  }\n\n  if (isShowingNoOptions) {\n    return intl.formatMessage(noResultsMessage);\n  }\n\n  return intl.formatMessage(\n    {\n      defaultMessage:\n        '{count, plural, one {# option found} other {# options found}}',\n      id: 'IUvOgujQzBX+gSUq',\n      description:\n        'Screen reader announcement of the number of options matching the select filter.',\n    },\n    { count: countSelectableOptions(children) },\n  );\n}\n\nexport function MenuList<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<MenuListProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const { children, selectProps, innerProps } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n  // Get a setter on the parentRef to get notified when the element re-renders.\n  const [notifyParentRefChange, setNotifyParentRefChange] =\n    useState<HTMLDivElement | null>();\n\n  const initialRender = useRef(true);\n  const sortingMap = useRef(new WeakMap());\n\n  let childrenArray = Children.toArray(children) as Array<\n    ReactElement<OptionProps<BaseOption<OptionValue>, isMulti, Group>>\n  >;\n\n  const currentChildrenLength = useRef(childrenArray.length);\n\n  const isShowingNoOptions =\n    childrenArray.length === 1 && childrenArray[0].type === NoOptionsMessage;\n\n  // During the initial rendering, the sorting is created and positions saved in a WeakMap.\n  // If only the NoOptionsMessage/empty state is shown we don't need any sorting\n  if (selectProps.showSelectedOptionsFirst && !isShowingNoOptions) {\n    if (initialRender.current === true) {\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    } else if (currentChildrenLength.current !== childrenArray.length) {\n      currentChildrenLength.current = childrenArray.length;\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    }\n    // Otherwise the data is sorted by the initial sorting parameters.\n    else {\n      const [newChildrenArray, newSortingMap] =\n        applyStoredSelectionSortingOptions(childrenArray, sortingMap.current);\n      childrenArray = newChildrenArray;\n      if (newSortingMap) {\n        sortingMap.current = newSortingMap;\n      }\n    }\n  }\n\n  initialRender.current = false;\n\n  const intl = useIntl();\n  const isFiltering =\n    selectProps.customFilter !== undefined &&\n    selectProps.inputValue !== undefined &&\n    selectProps.inputValue !== '';\n\n  const filterAnnouncement = buildFilterAnnouncement(\n    intl,\n    childrenArray,\n    isFiltering,\n    isShowingNoOptions,\n  );\n\n  const optionVirtualizer = useVirtualizer({\n    count: childrenArray.length,\n    getScrollElement: () => parentRef.current,\n    overscan: 5,\n    estimateSize: () => 32,\n  });\n\n  const menulistref = useMergeRefs([\n    props.innerRef,\n    parentRef,\n    setNotifyParentRefChange,\n    selectProps.contentRef,\n  ]);\n\n  useImperativeHandle(\n    selectProps.menuListFunctionRef,\n    (): MenuListFunctionRefObject => ({\n      scrollToBottom: () => {\n        optionVirtualizer.scrollToIndex(childrenArray.length);\n      },\n      scrollToIndex: (index: number) => {\n        optionVirtualizer.scrollToIndex(index);\n      },\n    }),\n  );\n\n  // When the parentElement re-renders, we will need to remeasure the virtualizer in order to\n  // keep the correct height.\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      optionVirtualizer.elementsCache.forEach((element) => {\n        optionVirtualizer.measureElement(element);\n      });\n    });\n    // Deliberately leave optionVirtualizer out of the update deps to prevent a maximum update depth exceeded issue.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notifyParentRefChange, childrenArray.length]);\n\n  return (\n    <>\n      {selectProps.customFilter && (\n        // Rendered as a sibling, not a child, of the listbox below \u2014 role=\"listbox\"\n        // only permits option/group children, so a nested role=\"status\" trips axe's\n        // aria-required-children rule.\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          className={screenReaderOnly}\n        >\n          {filterAnnouncement}\n        </div>\n      )}\n      <div\n        {...innerProps}\n        ref={menulistref}\n        className={clsx(styles.selectMenuListWrapper, 'strato-select-menulist')}\n        style={{\n          width:\n            optionVirtualizer.scrollOffset !== null &&\n            optionVirtualizer.scrollOffset > 0 &&\n            selectProps.contentWidth === 'max-content'\n              ? optionVirtualizer.scrollRect?.width\n              : undefined,\n        }}\n      >\n        {/* role=\"presentation\" on a div is intentional \u2014 neutralizes the virtualization wrapper so screen readers count options correctly */}\n        <div\n          role=\"presentation\"\n          style={{\n            height: optionVirtualizer.getTotalSize(),\n            display: 'grid',\n            // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.\n            gridTemplateRows: Array.from(\n              optionVirtualizer.measurementsCache,\n              (el) => `${el?.size ?? 32}px`,\n            ).join(' '),\n          }}\n          key={`wrapper-${selectProps.options.length}`}\n          className={styles.selectVirtualizationWrapper}\n        >\n          {optionVirtualizer.getVirtualItems().map((virtualRow) => {\n            const child = childrenArray?.[virtualRow.index];\n            return (\n              <div\n                key={virtualRow.key}\n                className=\"strato-select-option\"\n                // data-index is required for the virtualizer to map the measure\n                // element correctly to the measured index.\n                data-index={virtualRow.index}\n                style={{\n                  gridRow: virtualRow.index + 1,\n                  minWidth: 0,\n                  height: 'fit-content',\n                }}\n                ref={(el) => {\n                  optionVirtualizer.measureElement(el);\n                }}\n              >\n                {child}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/select/components/NoOptionsMessage.js

@@ -4,6 +4,11 @@ import { useIntl } from "react-intl";
 import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../../core/utils/can-receive-default-text-format.js";
 import { Text } from "../../../typography/text/Text.js";
 import * as styles from "../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 {
@@ -21,11 +26,7 @@ function NoOptionsMessage(props) {
         className: clsx(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 {
@@ -43,6 +44,7 @@ function NoOptionsMessage(props) {
   }
 }
 export {
-  NoOptionsMessage
+  NoOptionsMessage,
+  noResultsMessage
 };
 //# sourceMappingURL=NoOptionsMessage.js.map

package/esm/forms/select/components/NoOptionsMessage.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/NoOptionsMessage.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useIntl } from 'react-intl';\nimport type {\n  GroupBase,\n  NoticeProps as ReactNoOptionsMessageProps,\n} from 'react-select';\n\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport * as styles from '../styles/Select.sty.js';\n\ntype NoOptionsMessageProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactNoOptionsMessageProps<OptionValue, isMulti, Group>;\n\nexport function NoOptionsMessage<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: Readonly<NoOptionsMessageProps<OptionValue, isMulti, Group>>) {\n  const selectEmptyState = props.selectProps.emptyState?.props.children;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props.selectProps.componentProps.emptyState ?? {};\n  const intl = useIntl();\n\n  if (!selectEmptyState || _canReceiveDefaultTextFormat(selectEmptyState)) {\n    return (\n      <Text\n        textStyle=\"base\"\n        style={consumerStyle}\n        className={clsx(styles.selectNoOptionsMessage, consumerClassName)}\n        as=\"p\"\n        {...remainingProps}\n      >\n        {selectEmptyState ??\n          intl.formatMessage({\n            defaultMessage: 'No results found',\n            id: 'U09aNQxYT1yrJ4eJ',\n            description:\n              'Default message when no options are available in the select.',\n          })}\n      </Text>\n    );\n  } else {\n    return (\n      <Text\n        textStyle=\"base\"\n        style={consumerStyle}\n        className={clsx(styles.selectNoOptionsMessage, consumerClassName)}\n        as=\"p\"\n        {...remainingProps}\n      >\n        {selectEmptyState}\n      </Text>\n    );\n  }\n}\n"],
-  "mappings": "AAgCM;AAhCN,OAAO,UAAU;AACjB,SAAS,eAAe;AAMxB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,YAAY,YAAY;AAQjB,SAAS,iBAId,OAAqE;AACrE,QAAM,mBAAmB,MAAM,YAAY,YAAY,MAAM;AAC7D,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI,MAAM,YAAY,eAAe,cAAc,CAAC;AACpD,QAAM,OAAO,QAAQ;AAErB,MAAI,CAAC,oBAAoB,6BAA6B,gBAAgB,GAAG;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,QACP,WAAW,KAAK,OAAO,wBAAwB,iBAAiB;AAAA,QAChE,IAAG;AAAA,QACF,GAAG;AAAA,QAEH,8BACC,KAAK,cAAc;AAAA,UACjB,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aACE;AAAA,QACJ,CAAC;AAAA;AAAA,IACL;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,QACP,WAAW,KAAK,OAAO,wBAAwB,iBAAiB;AAAA,QAChE,IAAG;AAAA,QACF,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useIntl, type MessageDescriptor } from 'react-intl';\nimport type {\n  GroupBase,\n  NoticeProps as ReactNoOptionsMessageProps,\n} from 'react-select';\n\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport * as styles from '../styles/Select.sty.js';\n\n// Shared message descriptor for the \"no results\" state and the corresponding screen-reader announcement.\nexport const noResultsMessage: MessageDescriptor = {\n  defaultMessage: 'No results found',\n  id: 'U09aNQxYT1yrJ4eJ',\n  description: 'Default message when no options are available in the select.',\n};\n\ntype NoOptionsMessageProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactNoOptionsMessageProps<OptionValue, isMulti, Group>;\n\nexport function NoOptionsMessage<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: Readonly<NoOptionsMessageProps<OptionValue, isMulti, Group>>) {\n  const selectEmptyState = props.selectProps.emptyState?.props.children;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props.selectProps.componentProps.emptyState ?? {};\n  const intl = useIntl();\n\n  if (!selectEmptyState || _canReceiveDefaultTextFormat(selectEmptyState)) {\n    return (\n      <Text\n        textStyle=\"base\"\n        style={consumerStyle}\n        className={clsx(styles.selectNoOptionsMessage, consumerClassName)}\n        as=\"p\"\n        {...remainingProps}\n      >\n        {selectEmptyState ?? intl.formatMessage(noResultsMessage)}\n      </Text>\n    );\n  } else {\n    return (\n      <Text\n        textStyle=\"base\"\n        style={consumerStyle}\n        className={clsx(styles.selectNoOptionsMessage, consumerClassName)}\n        as=\"p\"\n        {...remainingProps}\n      >\n        {selectEmptyState}\n      </Text>\n    );\n  }\n}\n"],
+  "mappings": "AAuCM;AAvCN,OAAO,UAAU;AACjB,SAAS,eAAuC;AAMhD,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,YAAY,YAAY;AAGjB,MAAM,mBAAsC;AAAA,EACjD,gBAAgB;AAAA,EAChB,IAAI;AAAA,EACJ,aAAa;AACf;AAQO,SAAS,iBAId,OAAqE;AACrE,QAAM,mBAAmB,MAAM,YAAY,YAAY,MAAM;AAC7D,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI,MAAM,YAAY,eAAe,cAAc,CAAC;AACpD,QAAM,OAAO,QAAQ;AAErB,MAAI,CAAC,oBAAoB,6BAA6B,gBAAgB,GAAG;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,QACP,WAAW,KAAK,OAAO,wBAAwB,iBAAiB;AAAA,QAChE,IAAG;AAAA,QACF,GAAG;AAAA,QAEH,8BAAoB,KAAK,cAAc,gBAAgB;AAAA;AAAA,IAC1D;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,QACP,WAAW,KAAK,OAAO,wBAAwB,iBAAiB;AAAA,QAChE,IAAG;AAAA,QACF,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
   "names": []
 }

package/esm/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/esm/forms/select/styles/Select.sty.js

@@ -2,30 +2,30 @@ import "../../../core/components/app-root/AppRoot.css";
 import "../../../styles/field.css";
 import "./Select.css";
 import { createRuntimeFn as _7a468 } from "@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 = _7a468({ 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 = _7a468({ 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 = _7a468({ 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 = _7a468({ 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 = _7a468({ 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 = _7a468({ 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 = _7a468({ 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 = _7a468({ 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 = _7a468({ 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 = _7a468({ 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";
 export {
   clearReactSelectZIndex,
   filter,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/styles/Select.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../styles/field.css';\nimport './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-11-2';\nexport var filter = '_dlenfc1-3-11-2';\nexport var placeholderColor = '_dlenfcl-3-11-2';\nexport var select = '_dlenfc0-3-11-2';\nexport var selectAll = '_dlenfcs-3-11-2';\nexport var selectGroupHeading = '_dlenfcf-3-11-2';\nexport var selectMenuDivider = '_dlenfcn-3-11-2';\nexport var selectMenuListWrapper = '_dlenfch-3-11-2';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-11-2';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-11-2',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-11-2'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-11-2';\nexport var selectNoOptionsMessage = '_dlenfci-3-11-2';\nexport var selectOptionMulti = '_dlenfct-3-11-2';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-11-2',variantClassNames:{selected:{true:'_dlenfcv-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-11-2';\nexport var selectOptionPrefix = '_dlenfcx-3-11-2';\nexport var selectOptionSingle = '_dlenfcr-3-11-2';\nexport var selectOptionSuffix = '_dlenfcy-3-11-2';\nexport var selectTrigger = _7a468({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']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-11-2',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-11-2'},readOnly:{true:'_dlenfc8-3-11-2'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-11-2';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-11-2';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-11-2',variantClassNames:{fullWidth:{true:'_dlenfc3-3-11-2',false:'_dlenfc4-3-11-2'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-11-2';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../styles/field.css';\nimport './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-12-0';\nexport var filter = '_dlenfc1-3-12-0';\nexport var placeholderColor = '_dlenfcl-3-12-0';\nexport var select = '_dlenfc0-3-12-0';\nexport var selectAll = '_dlenfcs-3-12-0';\nexport var selectGroupHeading = '_dlenfcf-3-12-0';\nexport var selectMenuDivider = '_dlenfcn-3-12-0';\nexport var selectMenuListWrapper = '_dlenfch-3-12-0';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-12-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-12-0',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-12-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-12-0';\nexport var selectNoOptionsMessage = '_dlenfci-3-12-0';\nexport var selectOptionMulti = '_dlenfct-3-12-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-12-0',variantClassNames:{selected:{true:'_dlenfcv-3-12-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-12-0';\nexport var selectOptionPrefix = '_dlenfcx-3-12-0';\nexport var selectOptionSingle = '_dlenfcr-3-12-0';\nexport var selectOptionSuffix = '_dlenfcy-3-12-0';\nexport var selectTrigger = _7a468({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']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-12-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-12-0'},readOnly:{true:'_dlenfc8-3-12-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-12-0';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-12-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-12-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-12-0',false:'_dlenfc4-3-12-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB;AAC7B,IAAI,SAAS;AACb,IAAI,mBAAmB;AACvB,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,wBAAwB;AAC5B,IAAI,2BAA2B;AAC/B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,gBAAe,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,mBAAmB;AACvB,IAAI,yBAAyB;AAC7B,IAAI,oBAAoB;AACxB,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzK,IAAI,iCAAiC;AACrC,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,OAAM,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACvV,IAAI,2BAA2B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjO,IAAI,oCAAoC;AACxC,IAAI,8BAA8B;AAClC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpM,IAAI,kBAAkB;",
   "names": []
 }

package/esm/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/esm/forms/spin-buttons/SpinButton.sty.js

@@ -1,7 +1,7 @@
 import "./SpinButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var spinButtonCSS = _7a468({ 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 = _7a468({ 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";
 export {
   spinButtonCSS,
   spinButtonGroupCSS

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/spin-buttons/SpinButton.css.ts"],
-  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({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']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-11-2';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({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']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACzO,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/switch/Switch.css

@@ -1,70 +1,70 @@
-._1tkc5xf0-3-11-2 {
+._1tkc5xf0-3-12-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-11-2 {
+._1tkc5xf1-3-12-0 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-11-2 {
+._1tkc5xf2-3-12-0 {
   cursor: default;
 }
-._1tkc5xf3-3-11-2 {
+._1tkc5xf3-3-12-0 {
   font-size: var(--dt-typography-text-base-default-size, 14px);
   overflow-wrap: anywhere;
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._1tkc5xf4-3-11-2 {
+._1tkc5xf4-3-12-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-11-2 {
+._1tkc5xf5-3-12-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-11-2:after {
+._1tkc5xf6-3-12-0:after {
   content: "*";
 }
-._1tkc5xf7-3-11-2 {
+._1tkc5xf7-3-12-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xfb-3-11-2 {
-  --_1tkc5xfa-3-11-2: var(--_bx32h1-3-11-2);
+._1tkc5xfb-3-12-0 {
+  --_1tkc5xfa-3-12-0: var(--_bx32h1-3-12-0);
   display: flex;
   align-items: center;
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._1tkc5xfc-3-11-2 {
-  --_1tkc5xf8-3-11-2: 1;
-  --_1tkc5xf9-3-11-2: 0;
+._1tkc5xfc-3-12-0 {
+  --_1tkc5xf8-3-12-0: 1;
+  --_1tkc5xf9-3-12-0: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfd-3-11-2 {
-  --_1tkc5xf8-3-11-2: 0;
-  --_1tkc5xf9-3-11-2: 1;
+._1tkc5xfd-3-12-0 {
+  --_1tkc5xf8-3-12-0: 0;
+  --_1tkc5xf9-3-12-0: 1;
   transform: unset;
 }
-._1tkc5xfe-3-11-2 {
-  --_1tkc5xfa-3-11-2: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1tkc5xfe-3-12-0 {
+  --_1tkc5xfa-3-12-0: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1tkc5xfg-3-11-2 {
-  --_1tkc5xfa-3-11-2: var(--dt-colors-icon-critical-default, #bb0731);
+._1tkc5xfg-3-12-0 {
+  --_1tkc5xfa-3-12-0: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1tkc5xfb-3-11-2 > svg {
+._1tkc5xfb-3-12-0 > svg {
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-delay: var(--dt-timings-offset-medium, 30ms);
   transition-property: opacity;
 }
-._1tkc5xfb-3-11-2 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf8-3-11-2);
-  color: var(--_1tkc5xfa-3-11-2);
+._1tkc5xfb-3-12-0 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf8-3-12-0);
+  color: var(--_1tkc5xfa-3-12-0);
 }
-._1tkc5xfb-3-11-2 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf9-3-11-2);
-  color: var(--_1tkc5xfa-3-11-2);
+._1tkc5xfb-3-12-0 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf9-3-12-0);
+  color: var(--_1tkc5xfa-3-12-0);
 }
-._1tkc5xfh-3-11-2 {
+._1tkc5xfh-3-12-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -79,27 +79,27 @@
   min-width: 38px;
   position: relative;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-11-2);
+  background-color: var(--_bx32h3-3-12-0);
 }
-._1tkc5xfr-3-11-2 {
+._1tkc5xfr-3-12-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfs-3-11-2 {
+._1tkc5xfs-3-12-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xft-3-11-2 {
+._1tkc5xft-3-12-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._1tkc5xfu-3-11-2 {
+._1tkc5xfu-3-12-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1tkc5xfv-3-11-2 {
+._1tkc5xfv-3-12-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfw-3-11-2 {
+._1tkc5xfw-3-12-0 {
   transition-property: background-color;
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-fast, 150ms);
@@ -110,5 +110,5 @@
   height: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
   box-shadow: none;
-  background-color: var(--_1tkc5xfa-3-11-2);
+  background-color: var(--_1tkc5xfa-3-12-0);
 }