@react-spectrum/s2 3.0.0-nightly-56da82e3e-250212 → 3.0.0-nightly-3dbdc1e8e-250214

package/dist/Picker.css.map

@@ -1 +1 @@
-{"mappings":"ACgHoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcF;;;;EAAA;;;;EAAA;;;;EAUD;;;;EAAA;;;;EAAA;;;;EA2DiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiCqC;;;;EAgBzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2C1B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnQF;EA+DF;;;;EAwGkB;;;;;AAvKhB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkDG;;;;;;AAlDH;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAuKgB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["552e27cf637b06d3","packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["@import \"3ea1b03e909704b0\";\n@import \"ee9bbd6fcdd43977\";\n@import \"6c757f8583900bce\";\n@import \"5664d1276ba33182\";\n@import \"4581fd7ca88158d4\";\n@import \"6f2c83ecc9c1c922\";\n@import \"5f2bbc1985161dbd\";\n@import \"19b2c692b4947046\";\n@import \"4d3d8008ddb5ca39\";\n@import \"6c5e73b19354c1ee\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectRenderProps as AriaSelectRenderProps,\n  Button,\n  ButtonRenderProps,\n  ContextValue,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps,\n  SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkmark,\n  description,\n  Divider,\n  icon,\n  iconCenterWrapper,\n  label,\n  menuitem,\n  section,\n  sectionHeader,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  FieldErrorIcon,\n  FieldLabel,\n  HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n  /**\n   * The size of the Picker.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the picker should be displayed with a quiet style.\n   * @private\n   */\n  isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n  PickerStyleProps,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps,\n  Pick<ListBoxProps<T>, 'items'>,\n  Pick<AriaPopoverProps, 'shouldFlip'> {\n    /** The contents of the collection. */\n    children: ReactNode | ((item: T) => ReactNode),\n    /**\n     * Direction the menu will render relative to the Picker.\n     *\n     * @default 'bottom'\n     */\n    direction?: 'bottom' | 'top',\n    /**\n     * Alignment of the menu relative to the input target.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'end',\n    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n    menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n  ...focusRing(),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    isQuiet: 'none'\n  },\n  position: 'relative',\n  font: 'control',\n  display: 'flex',\n  textAlign: 'start',\n  borderStyle: {\n    default: 'none',\n    forcedColors: 'solid'\n  },\n  borderColor: {\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'control',\n  alignItems: 'center',\n  height: 'control',\n  transition: 'default',\n  columnGap: {\n    default: 'text-to-control',\n    isQuiet: 'text-to-visual'\n  },\n  paddingX: {\n    default: 'edge-to-text',\n    isQuiet: 0\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    isQuiet: 'transparent'\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n  width: 'full',\n  // Use pixels since we are emulating a border.\n  height: '[2px]',\n  position: 'absolute',\n  bottom: 0,\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'blue-800',\n    forcedColors: 'Highlight'\n  }\n});\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  width: 'full',\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: 'control',\n  gridAutoRows: 'min-content'\n});\n\nconst invalidBorder = style({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  pointerEvents: 'none',\n  borderRadius: 'control',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: 'negative',\n  transition: 'default'\n});\n\nconst valueStyles = style({\n  flexGrow: {\n    default: 1,\n    isQuiet: 0\n  },\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n  let domRef = useFocusableRef(ref);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    placeholder = stringFormatter.format('picker.placeholder'),\n    isQuiet,\n    ...pickerProps\n  } = props;\n\n  // Better way to encode this into a style? need to account for flipping\n  let menuOffset: number;\n  if (size === 'S') {\n    menuOffset = 6;\n  } else if (size === 'M') {\n    menuOffset = 6;\n  } else if (size === 'L') {\n    menuOffset = 7;\n  } else {\n    menuOffset = 8;\n  }\n\n  return (\n    <AriaSelect\n      {...pickerProps}\n      placeholder={placeholder}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n        <>\n          <InternalPickerContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              isQuiet={isQuiet}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <Button\n              ref={domRef}\n              style={renderProps => pressScale(domRef)(renderProps)}\n              // Prevent press scale from sticking while Picker is open.\n              // @ts-ignore\n              isPressed={false}\n              className={renderProps => inputButton({\n                ...renderProps,\n                size: size,\n                isOpen,\n                isQuiet\n              })}>\n              {(renderProps) => (\n                <>\n                  <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n                    {({defaultChildren}) => {\n                      return (\n                        <Provider\n                          values={[\n                            [IconContext, {\n                              slots: {\n                                icon: {\n                                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                                  styles: icon\n                                }\n                              }\n                            }],\n                            [TextContext, {\n                              slots: {\n                                description: {},\n                                label: {styles: style({\n                                  display: 'block',\n                                  flexGrow: 1,\n                                  truncate: true\n                                })}\n                              }\n                            }],\n                            [InsideSelectValueContext, true]\n                          ]}>\n                          {defaultChildren}\n                        </Provider>\n                      );\n                    }}\n                  </SelectValue>\n                  {isInvalid && (\n                    <FieldErrorIcon isDisabled={isDisabled} />\n                  )}\n                  <ChevronIcon\n                    size={size}\n                    className={iconStyles} />\n                  {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n                  {isInvalid && !isDisabled && !isQuiet &&\n                    // @ts-ignore known limitation detecting functions from the theme\n                    <div className={invalidBorder({...renderProps, size})} />\n                  }\n                </>\n              )}\n            </Button>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <PopoverBase\n              hideArrow\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n              }}\n              styles={style({\n                marginStart: {\n                  isQuiet: -12\n                },\n                minWidth: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: 192\n                },\n                width: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n                }\n              })(props)}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      description: {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </PopoverBase>\n          </InternalPickerContext.Provider>\n        </>\n      )}\n    </AriaSelect>\n  );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalPickerContext);\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        return (\n          <DefaultProvider\n            context={IconContext}\n            value={{slots: {\n              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n            }}}>\n            <DefaultProvider\n              context={TextContext}\n              value={{\n                slots: {\n                  label: {styles: label({size})},\n                  description: {styles: description({...renderProps, size})}\n                }\n              }}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </DefaultProvider>\n          </DefaultProvider>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n  let inSelectValue = useContext(InsideSelectValueContext);\n  if (inSelectValue) {\n    return children;\n  }\n\n  return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n  let {size} = useContext(InternalPickerContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Picker.css.map"}
+{"mappings":"ACgHoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcF;;;;EAAA;;;;EAAA;;;;EAUD;;;;EAAA;;;;EAAA;;;;EA2DiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiCqC;;;;EAgBzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2C1B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnQF;EA+DF;;;;EAwGkB;;;;;AAvKhB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkDG;;;;;;AAlDH;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAuKgB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["552e27cf637b06d3","packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["@import \"3ea1b03e909704b0\";\n@import \"ee9bbd6fcdd43977\";\n@import \"6c757f8583900bce\";\n@import \"5664d1276ba33182\";\n@import \"4581fd7ca88158d4\";\n@import \"6f2c83ecc9c1c922\";\n@import \"5f2bbc1985161dbd\";\n@import \"19b2c692b4947046\";\n@import \"4d3d8008ddb5ca39\";\n@import \"6c5e73b19354c1ee\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectRenderProps as AriaSelectRenderProps,\n  Button,\n  ButtonRenderProps,\n  ContextValue,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps,\n  SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkmark,\n  description,\n  Divider,\n  icon,\n  iconCenterWrapper,\n  label,\n  menuitem,\n  section,\n  sectionHeader,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  FieldErrorIcon,\n  FieldLabel,\n  HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n  /**\n   * The size of the Picker.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the picker should be displayed with a quiet style.\n   * @private\n   */\n  isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n  PickerStyleProps,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps,\n  Pick<ListBoxProps<T>, 'items'>,\n  Pick<AriaPopoverProps, 'shouldFlip'> {\n    /** The contents of the collection. */\n    children: ReactNode | ((item: T) => ReactNode),\n    /**\n     * Direction the menu will render relative to the Picker.\n     *\n     * @default 'bottom'\n     */\n    direction?: 'bottom' | 'top',\n    /**\n     * Alignment of the menu relative to the input target.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'end',\n    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n    menuWidth?: number\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n  ...focusRing(),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    isQuiet: 'none'\n  },\n  position: 'relative',\n  font: 'control',\n  display: 'flex',\n  textAlign: 'start',\n  borderStyle: {\n    default: 'none',\n    forcedColors: 'solid'\n  },\n  borderColor: {\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'control',\n  alignItems: 'center',\n  height: 'control',\n  transition: 'default',\n  columnGap: {\n    default: 'text-to-control',\n    isQuiet: 'text-to-visual'\n  },\n  paddingX: {\n    default: 'edge-to-text',\n    isQuiet: 0\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    isQuiet: 'transparent'\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n  width: 'full',\n  // Use pixels since we are emulating a border.\n  height: '[2px]',\n  position: 'absolute',\n  bottom: 0,\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'blue-800',\n    forcedColors: 'Highlight'\n  }\n});\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  width: 'full',\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: 'control',\n  gridAutoRows: 'min-content'\n});\n\nconst invalidBorder = style({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  pointerEvents: 'none',\n  borderRadius: 'control',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: 'negative',\n  transition: 'default'\n});\n\nconst valueStyles = style({\n  flexGrow: {\n    default: 1,\n    isQuiet: 0\n  },\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n  let domRef = useFocusableRef(ref);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    placeholder = stringFormatter.format('picker.placeholder'),\n    isQuiet,\n    ...pickerProps\n  } = props;\n\n  // Better way to encode this into a style? need to account for flipping\n  let menuOffset: number;\n  if (size === 'S') {\n    menuOffset = 6;\n  } else if (size === 'M') {\n    menuOffset = 6;\n  } else if (size === 'L') {\n    menuOffset = 7;\n  } else {\n    menuOffset = 8;\n  }\n\n  return (\n    <AriaSelect\n      {...pickerProps}\n      placeholder={placeholder}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n        <>\n          <InternalPickerContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              isQuiet={isQuiet}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <Button\n              ref={domRef}\n              style={renderProps => pressScale(domRef)(renderProps)}\n              // Prevent press scale from sticking while Picker is open.\n              // @ts-ignore\n              isPressed={false}\n              className={renderProps => inputButton({\n                ...renderProps,\n                size: size,\n                isOpen,\n                isQuiet\n              })}>\n              {(renderProps) => (\n                <>\n                  <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n                    {({defaultChildren}) => {\n                      return (\n                        <Provider\n                          values={[\n                            [IconContext, {\n                              slots: {\n                                icon: {\n                                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                                  styles: icon\n                                }\n                              }\n                            }],\n                            [TextContext, {\n                              slots: {\n                                description: {},\n                                label: {styles: style({\n                                  display: 'block',\n                                  flexGrow: 1,\n                                  truncate: true\n                                })}\n                              }\n                            }],\n                            [InsideSelectValueContext, true]\n                          ]}>\n                          {defaultChildren}\n                        </Provider>\n                      );\n                    }}\n                  </SelectValue>\n                  {isInvalid && (\n                    <FieldErrorIcon isDisabled={isDisabled} />\n                  )}\n                  <ChevronIcon\n                    size={size}\n                    className={iconStyles} />\n                  {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n                  {isInvalid && !isDisabled && !isQuiet &&\n                    // @ts-ignore known limitation detecting functions from the theme\n                    <div className={invalidBorder({...renderProps, size})} />\n                  }\n                </>\n              )}\n            </Button>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <PopoverBase\n              hideArrow\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n              }}\n              styles={style({\n                marginStart: {\n                  isQuiet: -12\n                },\n                minWidth: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: 192\n                },\n                width: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n                }\n              })(props)}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      description: {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </PopoverBase>\n          </InternalPickerContext.Provider>\n        </>\n      )}\n    </AriaSelect>\n  );\n});\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalPickerContext);\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        return (\n          <DefaultProvider\n            context={IconContext}\n            value={{slots: {\n              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n            }}}>\n            <DefaultProvider\n              context={TextContext}\n              value={{\n                slots: {\n                  label: {styles: label({size})},\n                  description: {styles: description({...renderProps, size})}\n                }\n              }}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </DefaultProvider>\n          </DefaultProvider>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n  let inSelectValue = useContext(InsideSelectValueContext);\n  if (inSelectValue) {\n    return children;\n  }\n\n  return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n  let {size} = useContext(InternalPickerContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Picker.css.map"}

package/dist/Picker.mjs

@@ -51,57 +51,57 @@ function $parcel$interopDefault(a) {
 const $b41c15d27fbaff7d$export$b72b8dade9393cd5 = /*#__PURE__*/ (0, $c77I5$createContext)(null);
 const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
     let rules = " .";
-    if (props.isQuiet) rules += ' _Pa';
-    else if (props.isFocusVisible) rules += ' _Pb';
-    else rules += ' _Pa';
-    rules += ' ca_____M';
-    rules += ' cx';
-    rules += ' _Rc';
-    rules += ' _Q-3t1z';
+    if (props.isQuiet) rules += ' _Ma';
+    else if (props.isFocusVisible) rules += ' _Mb';
+    else rules += ' _Ma';
+    rules += ' da_____M';
+    rules += ' dx';
+    rules += ' _Oc';
+    rules += ' _N-3t1z';
+    rules += ' __b-g2ozi1';
+    rules += ' __c-g2ozi1';
+    rules += ' __d-g2ozi1';
     rules += ' __e-g2ozi1';
-    rules += ' __f-g2ozi1';
-    rules += ' __g-g2ozi1';
-    rules += ' __h-g2ozi1';
-    if (props.size === "XL") rules += ' pj';
-    else if (props.size === "L") rules += ' pi';
-    else if (props.size === "S") rules += ' ph';
-    else if (props.size === "XS") rules += ' pg';
-    else rules += ' pf';
-    if (props.isQuiet) rules += ' __qa';
-    else rules += ' __q-1s8glxue';
-    if (props.size === "XL") rules += ' -usygro_k-____g';
-    else if (props.size === "L") rules += ' -usygro_k-___0';
-    else if (props.size === "S") rules += ' -usygro_k-___u';
-    else rules += ' -usygro_k-___K';
-    rules += ' l-rwozxi';
-    rules += ' Yc';
-    rules += ' _g-bc1l9oh';
-    rules += ' _g-1uotwbwg';
-    rules += ' _g-eo0c6sf';
-    rules += ' _g-enzzrge';
-    rules += ' _g-enzykdd';
-    rules += ' _g-enzwzjc';
-    rules += ' _g-enzrfpb';
-    rules += ' _ga';
+    if (props.size === "XL") rules += ' qj';
+    else if (props.size === "L") rules += ' qi';
+    else if (props.size === "S") rules += ' qh';
+    else if (props.size === "XS") rules += ' qg';
+    else rules += ' qf';
+    if (props.isQuiet) rules += ' __na';
+    else rules += ' __n-1s8glxue';
+    if (props.size === "XL") rules += ' -usygro_l-____g';
+    else if (props.size === "L") rules += ' -usygro_l-___0';
+    else if (props.size === "S") rules += ' -usygro_l-___u';
+    else rules += ' -usygro_l-___K';
+    rules += ' m-rwozxi';
+    rules += ' Vc';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
     if (props.size === "XL") {
-        rules += ' _hbj';
-        rules += ' _hi';
+        rules += ' _ebj';
+        rules += ' _ei';
     } else if (props.size === "L") {
-        rules += ' _hbh';
-        rules += ' _hg';
+        rules += ' _ebh';
+        rules += ' _eg';
     } else if (props.size === "S") {
-        rules += ' _hbd';
-        rules += ' _hc';
+        rules += ' _ebd';
+        rules += ' _ec';
     } else if (props.size === "XS") {
-        rules += ' _hbb';
-        rules += ' _ha';
+        rules += ' _ebb';
+        rules += ' _ea';
     } else {
-        rules += ' _hbf';
-        rules += ' _he';
+        rules += ' _ebf';
+        rules += ' _ee';
     }
-    rules += ' _ib';
-    rules += ' _j-1x99dlob';
-    rules += ' _ja';
+    rules += ' _fb';
+    rules += ' _g-1x99dlob';
+    rules += ' _ga';
     if (props.isDisabled) rules += ' aj';
     else {
         if (props.isPressed) rules += ' ao';
@@ -109,33 +109,27 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
         else if (props.isHovered) rules += ' ao';
         else rules += ' an';
     }
-    rules += ' _3d';
-    rules += ' _na';
-    rules += ' zaa';
-    rules += ' zf';
-    if (props.isDisabled) rules += ' xa_____O';
-    else rules += ' xa_____K';
-    if (props.isDisabled) rules += ' ya_____O';
-    else rules += ' ya_____K';
-    if (props.isDisabled) rules += ' va_____O';
-    else rules += ' va_____K';
-    if (props.isDisabled) rules += ' wa_____O';
-    else rules += ' wa_____K';
+    rules += ' _0d';
+    rules += ' _ka';
+    rules += ' waa';
+    rules += ' wf';
+    if (props.isDisabled) rules += ' ca_____O';
+    else rules += ' ca_____K';
+    rules += ' _wh';
+    rules += ' _xh';
+    rules += ' _yh';
     rules += ' _zh';
-    rules += ' _Ah';
-    rules += ' _Bh';
-    rules += ' _Ch';
-    rules += ' _5c';
-    rules += ' j-375top';
+    rules += ' _2c';
+    rules += ' k-375toq';
+    rules += ' _Pa';
+    rules += ' _R-375x7f';
     rules += ' _Sa';
-    rules += ' _U-375x7f';
-    rules += ' _Va';
     if (props.isQuiet) {
-        rules += ' ibH';
-        rules += ' iG';
-    } else rules += ' iF';
-    rules += ' F-375tnp';
-    rules += ' G-375tnq';
+        rules += ' jbH';
+        rules += ' jG';
+    } else rules += ' jF';
+    rules += ' C-375tnm';
+    rules += ' D-375tnn';
     if (props.isQuiet) rules += ' ba';
     else if (props.isDisabled) rules += ' bg';
     else if (props.isOpen) rules += ' bh';
@@ -145,115 +139,103 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
         else if (props.isHovered) rules += ' bh';
         else rules += ' bg';
     }
-    if (props.isQuiet) rules += ' qd';
-    rules += ' __V-yksgrp';
-    if (props.isQuiet) rules += ' -_375tnp_F-a';
-    else rules += ' -_375tnp_F-I';
-    if (props.isQuiet) rules += ' -_375tnq_G-a';
-    else rules += ' -_375tnq_G-I';
-    if (props.size === "XL") rules += ' -_375top_j-j';
-    else if (props.size === "L") rules += ' -_375top_j-i';
-    else if (props.size === "S") rules += ' -_375top_j-h';
-    else if (props.size === "XS") rules += ' -_375top_j-g';
-    else rules += ' -_375top_j-f';
+    if (props.isQuiet) rules += ' rd';
+    rules += ' __S-yksgrp';
+    if (props.isQuiet) rules += ' -_375tnm_C-a';
+    else rules += ' -_375tnm_C-I';
+    if (props.isQuiet) rules += ' -_375tnn_D-a';
+    else rules += ' -_375tnn_D-I';
+    if (props.size === "XL") rules += ' -_375toq_k-j';
+    else if (props.size === "L") rules += ' -_375toq_k-i';
+    else if (props.size === "S") rules += ' -_375toq_k-h';
+    else if (props.size === "XS") rules += ' -_375toq_k-g';
+    else rules += ' -_375toq_k-f';
     return rules;
 };
-const $b41c15d27fbaff7d$var$quietFocusLine = " kb j-375zlr Ya _da _zf _Af _Bf _Cf bx ba_____M";
+const $b41c15d27fbaff7d$var$quietFocusLine = " lb k-375zlr Va _aa _wf _xf _yf _zf bx ba_____M";
 let $b41c15d27fbaff7d$export$b1e5508a851be14d = function anonymous(props) {
     let rules = " .";
-    rules += ' _Pa';
-    rules += ' _3f';
-    rules += ' kb';
-    if (props.size === "XL") rules += ' __l-14g31og';
-    else if (props.size === "L") rules += ' __l-1pqbi84';
-    else if (props.size === "M") rules += ' __l-n6rb9a';
-    else if (props.size === "S") rules += ' __l-iov3cy';
-    rules += ' __ra';
-    rules += ' o-17zqamw';
-    rules += ' __za';
-    rules += ' __Aa';
-    rules += ' Hd';
-    rules += ' Id';
+    rules += ' _Ma';
+    rules += ' _0f';
+    rules += ' lb';
+    if (props.size === "XL") rules += ' __i-14g31og';
+    else if (props.size === "L") rules += ' __i-1pqbi84';
+    else if (props.size === "M") rules += ' __i-n6rb9a';
+    else if (props.size === "S") rules += ' __i-iov3cy';
+    rules += ' __oa';
+    rules += ' p-17zqamw';
+    rules += ' __wa';
+    rules += ' __xa';
+    rules += ' Ed';
     rules += ' Fd';
-    rules += ' Gd';
-    rules += ' _g-bc1l9oh';
-    rules += ' _g-1uotwbwg';
-    rules += ' _g-eo0c6sf';
-    rules += ' _g-enzzrge';
-    rules += ' _g-enzykdd';
-    rules += ' _g-enzwzjc';
-    rules += ' _g-enzrfpb';
-    rules += ' _ga';
+    rules += ' Cd';
+    rules += ' Dd';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
     if (props.size === "XL") {
-        rules += ' _hbj';
-        rules += ' _hi';
+        rules += ' _ebj';
+        rules += ' _ei';
     } else if (props.size === "L") {
-        rules += ' _hbh';
-        rules += ' _hg';
+        rules += ' _ebh';
+        rules += ' _eg';
     } else if (props.size === "S") {
-        rules += ' _hbd';
-        rules += ' _hc';
+        rules += ' _ebd';
+        rules += ' _ec';
     } else if (props.size === "XS") {
-        rules += ' _hbb';
-        rules += ' _ha';
+        rules += ' _ebb';
+        rules += ' _ea';
     } else {
-        rules += ' _hbf';
-        rules += ' _he';
+        rules += ' _ebf';
+        rules += ' _ee';
     }
-    rules += ' __j-zexzcl';
+    rules += ' __g-zexzcl';
     return rules;
 };
 const $b41c15d27fbaff7d$var$invalidBorder = function anonymous(props) {
     let rules = " .";
+    rules += ' Va';
     rules += ' Ya';
+    rules += ' Za';
+    rules += ' _aa';
     rules += ' _ba';
-    rules += ' _ca';
-    rules += ' _da';
-    rules += ' _ea';
-    rules += ' __Fa';
+    rules += ' __Ca';
+    rules += ' _wh';
+    rules += ' _xh';
+    rules += ' _yh';
     rules += ' _zh';
-    rules += ' _Ah';
-    rules += ' _Bh';
-    rules += ' _Ch';
-    rules += ' za';
-    rules += ' tc';
+    rules += ' wa';
     rules += ' uc';
-    rules += ' rc';
+    rules += ' vc';
     rules += ' sc';
-    if (props.isPressed) rules += ' xQ';
-    else if (props.isFocusVisible) rules += ' xP';
-    else if (props.isHovered) rules += ' xP';
-    else rules += ' xO';
-    if (props.isPressed) rules += ' yQ';
-    else if (props.isFocusVisible) rules += ' yP';
-    else if (props.isHovered) rules += ' yP';
-    else rules += ' yO';
-    if (props.isPressed) rules += ' vQ';
-    else if (props.isFocusVisible) rules += ' vP';
-    else if (props.isHovered) rules += ' vP';
-    else rules += ' vO';
-    if (props.isPressed) rules += ' wQ';
-    else if (props.isFocusVisible) rules += ' wP';
-    else if (props.isHovered) rules += ' wP';
-    else rules += ' wO';
+    rules += ' tc';
+    if (props.isPressed) rules += ' cQ';
+    else if (props.isFocusVisible) rules += ' cP';
+    else if (props.isHovered) rules += ' cP';
+    else rules += ' cO';
+    rules += ' _Pa';
+    rules += ' _R-375x7f';
     rules += ' _Sa';
-    rules += ' _U-375x7f';
-    rules += ' _Va';
     return rules;
 };
 const $b41c15d27fbaff7d$var$valueStyles = function anonymous(props) {
     let rules = " .";
-    if (props.isQuiet) rules += ' __d-3t1x';
-    else rules += ' __d-3t1y';
-    rules += ' __zb';
-    rules += ' __Ab';
-    rules += ' _qa';
-    rules += ' _tb';
-    rules += ' _3d';
-    rules += ' _5c';
+    if (props.isQuiet) rules += ' __a-3t1x';
+    else rules += ' __a-3t1y';
+    rules += ' __wb';
+    rules += ' __xb';
+    rules += ' _na';
+    rules += ' _qb';
+    rules += ' _0d';
+    rules += ' _2c';
     return rules;
 };
-const $b41c15d27fbaff7d$var$iconStyles = " __c-3t1x U-3hn0u -rwx0fg_d-b";
+const $b41c15d27fbaff7d$var$iconStyles = " _9-3t1x R-3hn0u -rwx0fg_e-b";
 let $b41c15d27fbaff7d$var$InternalPickerContext = /*#__PURE__*/ (0, $c77I5$createContext)({
     size: 'M'
 });
@@ -277,59 +259,59 @@ const $b41c15d27fbaff7d$export$ba25329847403e11 = /*#__PURE__*/ (0, $c77I5$forwa
         style: UNSAFE_style,
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q)[^\s]+/g) || [];
+            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
             rules += matches.join('');
-            let $__e = false;
-            let $__f = false;
+            let $__b = false;
+            let $__c = false;
             for (let p of matches){
-                if (/^\s*__e/.test(p)) $__e = true;
-                if (/^\s*__f/.test(p)) $__f = true;
+                if (/^\s*__b/.test(p)) $__b = true;
+                if (/^\s*__c/.test(p)) $__c = true;
             }
-            rules += ' _3f';
-            if (!$__e) {
-                if (props.isInForm) rules += ' __e-3t1y';
+            rules += ' _0f';
+            if (!$__b) {
+                if (props.isInForm) rules += ' __b-3t1y';
             }
-            if (!$__f) {
+            if (!$__c) {
                 if (props.isInForm) {
-                    if (props.labelPosition === "side") rules += ' __f-yqnebx';
+                    if (props.labelPosition === "side") rules += ' __c-yqnebx';
                 }
             }
-            if (props.isInForm) rules += ' __l-1a97rzt';
+            if (props.isInForm) rules += ' __i-1a97rzt';
             else {
-                if (props.labelPosition === "side") rules += ' __l-ar5vcf';
-                else if (props.labelPosition === "top") rules += ' __l-2wzs0i';
+                if (props.labelPosition === "side") rules += ' __i-ar5vcf';
+                else if (props.labelPosition === "top") rules += ' __i-2wzs0i';
             }
-            if (props.labelPosition === "side") rules += ' __m-ar5vcf';
-            else if (props.labelPosition === "top") rules += ' __m-1a6w430';
-            if (props.labelPosition === "side") rules += ' __n-18h2yqz';
-            else if (props.labelPosition === "top") rules += ' __n-1srn173';
+            if (props.labelPosition === "side") rules += ' __j-ar5vcf';
+            else if (props.labelPosition === "top") rules += ' __j-1a6w430';
+            if (props.labelPosition === "side") rules += ' __k-18h2yqz';
+            else if (props.labelPosition === "top") rules += ' __k-1srn173';
             if (props.size === "XL") {
-                rules += ' _hbj';
-                rules += ' _hi';
+                rules += ' _ebj';
+                rules += ' _ei';
             } else if (props.size === "L") {
-                rules += ' _hbh';
-                rules += ' _hg';
+                rules += ' _ebh';
+                rules += ' _eg';
             } else if (props.size === "S") {
-                rules += ' _hbd';
-                rules += ' _hc';
+                rules += ' _ebd';
+                rules += ' _ec';
             } else if (props.size === "XS") {
-                rules += ' _hbb';
-                rules += ' _ha';
+                rules += ' _ebb';
+                rules += ' _ea';
             } else {
-                rules += ' _hbf';
-                rules += ' _he';
+                rules += ' _ebf';
+                rules += ' _ee';
             }
-            rules += ' _5d';
-            rules += ' _j-1x99dlob';
-            rules += ' _ja';
-            if (props.size === "XL") rules += ' -aqrvqh_j-j';
-            else if (props.size === "L") rules += ' -aqrvqh_j-i';
-            else if (props.size === "S") rules += ' -aqrvqh_j-h';
-            else if (props.size === "XS") rules += ' -aqrvqh_j-g';
-            else rules += ' -aqrvqh_j-f';
-            rules += ' -_1inj1bc_h--prjw07';
-            rules += ' ie';
-            rules += ' __V-yksgrp';
+            rules += ' _2d';
+            rules += ' _g-1x99dlob';
+            rules += ' _ga';
+            if (props.size === "XL") rules += ' -aqrvqh_k-j';
+            else if (props.size === "L") rules += ' -aqrvqh_k-i';
+            else if (props.size === "S") rules += ' -aqrvqh_k-h';
+            else if (props.size === "XS") rules += ' -aqrvqh_k-g';
+            else rules += ' -aqrvqh_k-f';
+            rules += ' -_1inj1bc_i--prjw07';
+            rules += ' je';
+            rules += ' __S-yksgrp';
             return rules;
         }({
             isInForm: !!formContext,
@@ -394,7 +376,7 @@ const $b41c15d27fbaff7d$export$ba25329847403e11 = /*#__PURE__*/ (0, $c77I5$forwa
                                                                 slots: {
                                                                     description: {},
                                                                     label: {
-                                                                        styles: " _3a __d-3t1y __zb __Ab _qa _tb"
+                                                                        styles: " _0a __a-3t1y __wb __xb _na _qb"
                                                                     }
                                                                 }
                                                             }
@@ -445,12 +427,12 @@ const $b41c15d27fbaff7d$export$ba25329847403e11 = /*#__PURE__*/ (0, $c77I5$forwa
                             },
                             styles: function anonymous(props) {
                                 let rules = " .";
-                                rules += ' B-375tnl';
-                                if (props.isQuiet) rules += ' p___u';
-                                else rules += ' p-1utmx2y';
-                                if (props.isQuiet) rules += ' k-13f72lm';
-                                else rules += ' k-1utmx2y';
-                                if (props.isQuiet) rules += ' -_375tnl_B-M';
+                                rules += ' y-375tp4';
+                                if (props.isQuiet) rules += ' q___u';
+                                else rules += ' q-1utmx2y';
+                                if (props.isQuiet) rules += ' l-13f72lm';
+                                else rules += ' l-1utmx2y';
+                                if (props.isQuiet) rules += ' -_375tp4_y-M';
                                 return rules;
                             }(props1),
                             children: /*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$Provider), {