@react-spectrum/s2 0.3.2-nightly.5042 → 0.4.1

package/dist/Picker.css

@@ -31,23 +31,23 @@
     grid-row-end: input;
   }
 
-  .qo {
+  .qq {
     min-width: 2rem;
   }
 
-  .qi {
+  .qk {
     min-width: 1.25rem;
   }
 
-  .qk {
+  .qm {
     min-width: 1.5rem;
   }
 
-  .qp {
+  .qr {
     min-width: 2.5rem;
   }
 
-  .qv {
+  .qx {
     min-width: 3rem;
   }
 
@@ -55,19 +55,19 @@
     contain: none;
   }
 
-  .-usygro_l-P {
+  .-usygro_l-R {
     --defaultWidth: 13rem;
   }
 
-  .-usygro_l-N {
+  .-usygro_l-P {
     --defaultWidth: 12rem;
   }
 
-  .-usygro_l-R {
+  .-usygro_l-T {
     --defaultWidth: 14rem;
   }
 
-  .-usygro_l-O {
+  .-usygro_l-Q {
     --defaultWidth: 15rem;
   }
 
@@ -109,11 +109,11 @@
     height: var(--k);
   }
 
-  .jE {
+  .jF {
     column-gap: .714286em;
   }
 
-  .jF {
+  .jG {
     column-gap: .428571em;
   }
 
@@ -137,11 +137,11 @@
     background-color: #0000;
   }
 
-  .r5 {
+  .r6 {
     max-width: max-content;
   }
 
-  .-_375tnm_C-H {
+  .-_375tnm_C-I {
     --C: calc(var(--k, var(--o)) * 3 / 8);
   }
 
@@ -149,7 +149,7 @@
     --C: 0rem;
   }
 
-  .-_375tnn_D-H {
+  .-_375tnn_D-I {
     --D: calc(var(--k, var(--o)) * 3 / 8);
   }
 
@@ -157,27 +157,27 @@
     --D: 0rem;
   }
 
-  .-_375toq_k-o {
+  .-_375toq_k-q {
     --k: 2rem;
   }
 
-  .-_375toq_k-i {
+  .-_375toq_k-k {
     --k: 1.25rem;
   }
 
-  .-_375toq_k-k {
+  .-_375toq_k-m {
     --k: 1.5rem;
   }
 
-  .-_375toq_k-p {
+  .-_375toq_k-r {
     --k: 2.5rem;
   }
 
-  .-_375toq_k-v {
+  .-_375toq_k-x {
     --k: 3rem;
   }
 
-  .l2 {
+  .l4 {
     width: 100%;
   }
 
@@ -241,19 +241,19 @@
     overflow-y: auto;
   }
 
-  .Ec {
+  .Ed {
     padding-top: .5rem;
   }
 
-  .Fc {
+  .Fd {
     padding-bottom: .5rem;
   }
 
-  .Cc {
+  .Cd {
     padding-inline-start: .5rem;
   }
 
-  .Dc {
+  .Dd {
     padding-inline-end: .5rem;
   }
 
@@ -440,23 +440,23 @@
     line-height: 1.3;
   }
 
-  .-aqrvqh_k-o {
+  .-aqrvqh_k-q {
     --field-height: 2rem;
   }
 
-  .-aqrvqh_k-i {
+  .-aqrvqh_k-k {
     --field-height: 1.25rem;
   }
 
-  .-aqrvqh_k-k {
+  .-aqrvqh_k-m {
     --field-height: 1.5rem;
   }
 
-  .-aqrvqh_k-p {
+  .-aqrvqh_k-r {
     --field-height: 2.5rem;
   }
 
-  .-aqrvqh_k-v {
+  .-aqrvqh_k-x {
     --field-height: 3rem;
   }
 
@@ -464,7 +464,7 @@
     --field-gap: calc((var(--field-height)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
   }
 
-  .jd {
+  .je {
     column-gap: .75rem;
   }
 
@@ -508,7 +508,7 @@
     min-width: var(--trigger-width);
   }
 
-  .qN {
+  .qP {
     min-width: 12rem;
   }
 
@@ -520,7 +520,7 @@
     width: calc(var(--trigger-width)  + (-2 * var(--y)));
   }
 
-  .-_375tp4_y-L {
+  .-_375tp4_y-M {
     --y: -.75rem;
   }
 }
@@ -587,63 +587,63 @@
 
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    .qbp {
+    .qbr {
       min-width: 2.5rem;
     }
 
-    .qbj {
+    .qbl {
       min-width: 1.5625rem;
     }
 
-    .qbl {
+    .qbn {
       min-width: 1.875rem;
     }
 
-    .qbs {
+    .qbu {
       min-width: 3.125rem;
     }
 
-    .qbw {
+    .qby {
       min-width: 3.75rem;
     }
 
-    .-usygro_l-bQ {
+    .-usygro_l-bS {
       --defaultWidth: 16.25rem;
     }
 
-    .-usygro_l-bO {
+    .-usygro_l-bQ {
       --defaultWidth: 15rem;
     }
 
-    .-usygro_l-bS {
+    .-usygro_l-bU {
       --defaultWidth: 17.5rem;
     }
 
-    .-usygro_l-bT {
+    .-usygro_l-bV {
       --defaultWidth: 18.75rem;
     }
 
-    .jbG {
+    .jbH {
       column-gap: .470588em;
     }
 
-    .-_375toq_k-bp {
+    .-_375toq_k-br {
       --k: 2.5rem;
     }
 
-    .-_375toq_k-bj {
+    .-_375toq_k-bl {
       --k: 1.5625rem;
     }
 
-    .-_375toq_k-bl {
+    .-_375toq_k-bn {
       --k: 1.875rem;
     }
 
-    .-_375toq_k-bs {
+    .-_375toq_k-bu {
       --k: 3.125rem;
     }
 
-    .-_375toq_k-bw {
+    .-_375toq_k-by {
       --k: 3.75rem;
     }
 
@@ -667,27 +667,27 @@
       font-size: 1.375rem;
     }
 
-    .-aqrvqh_k-bp {
+    .-aqrvqh_k-br {
       --field-height: 2.5rem;
     }
 
-    .-aqrvqh_k-bj {
+    .-aqrvqh_k-bl {
       --field-height: 1.5625rem;
     }
 
-    .-aqrvqh_k-bl {
+    .-aqrvqh_k-bn {
       --field-height: 1.875rem;
     }
 
-    .-aqrvqh_k-bs {
+    .-aqrvqh_k-bu {
       --field-height: 3.125rem;
     }
 
-    .-aqrvqh_k-bw {
+    .-aqrvqh_k-by {
       --field-height: 3.75rem;
     }
 
-    .qbO {
+    .qbQ {
       min-width: 15rem;
     }
   }

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;;;;EAyCG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBI;;;;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;;;;EAwDiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8BqC;;;;EAgBzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2C1B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlPF;EAsDF;;;;EAmGkB;;;;;AAzJhB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAyCG;;;;;;AAzCH;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyJgB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyFd;;;;;;AAlPF;EAAA;IAAA;;;;;;AAyCG","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  PopoverProps as AriaPopoverProps,\n  Section as AriaSection,\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, style} from '../style/spectrum-theme' 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, focusRing, 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 {Popover} 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: 'none',\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  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});\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\nfunction 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              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            <Popover\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            </Popover>\n          </InternalPickerContext.Provider>\n        </>\n      )}\n    </AriaSelect>\n  );\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);\nexport {_Picker as Picker};\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  return (\n    <>\n      <AriaSection\n        {...props}\n        className={section}>\n        {props.children}\n      </AriaSection>\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;;;;EAyCG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBI;;;;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;;;;EAwDiB;;;;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;;;;;AArPF;EAsDF;;;;EAmGkB;;;;;AAzJhB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAyCG;;;;;;AAzCH;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyJgB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA4Fd;;;;;;AArPF;EAAA;IAAA;;;;;;AAyCG","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  PopoverProps as AriaPopoverProps,\n  Section as AriaSection,\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 {Popover} 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: 'none',\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  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});\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\nfunction 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            <Popover\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            </Popover>\n          </InternalPickerContext.Provider>\n        </>\n      )}\n    </AriaSelect>\n  );\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);\nexport {_Picker as Picker};\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  return (\n    <>\n      <AriaSection\n        {...props}\n        className={section}>\n        {props.children}\n      </AriaSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Picker.css.map"}

package/dist/Picker.mjs

@@ -10,7 +10,7 @@ import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons
 import $c77I5$intlStringsmjs from "./intlStrings.mjs";
 import {Popover as $88b746eba92c8d0d$export$5b6b19405a83ff9d} from "./Popover.mjs";
 import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
-import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "./useSpectrumContextProps.mjs";
+import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $c77I5$jsx, Fragment as $c77I5$Fragment, jsxs as $c77I5$jsxs} from "react/jsx-runtime";
 import {Select as $c77I5$Select, Button as $c77I5$Button, SelectValue as $c77I5$SelectValue, Provider as $c77I5$Provider, ListBox as $c77I5$ListBox, ListBoxItem as $c77I5$ListBoxItem, Section as $c77I5$Section} from "react-aria-components";
 import {createContext as $c77I5$createContext, useContext as $c77I5$useContext, forwardRef as $c77I5$forwardRef, useRef as $c77I5$useRef} from "react";
@@ -63,35 +63,35 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
     rules += ' __c-4cfph1';
     rules += ' __d-4cfph1';
     if (props.size === "XL") {
-        rules += ' qbw';
-        rules += ' qv';
+        rules += ' qby';
+        rules += ' qx';
     } else if (props.size === "L") {
-        rules += ' qbs';
-        rules += ' qp';
+        rules += ' qbu';
+        rules += ' qr';
     } else if (props.size === "S") {
+        rules += ' qbn';
+        rules += ' qm';
+    } else if (props.size === "XS") {
         rules += ' qbl';
         rules += ' qk';
-    } else if (props.size === "XS") {
-        rules += ' qbj';
-        rules += ' qi';
     } else {
-        rules += ' qbp';
-        rules += ' qo';
+        rules += ' qbr';
+        rules += ' qq';
     }
     if (props.isQuiet) rules += ' __ma';
     else rules += ' __m-1s8glxue';
     if (props.size === "XL") {
-        rules += ' -usygro_l-bT';
-        rules += ' -usygro_l-O';
+        rules += ' -usygro_l-bV';
+        rules += ' -usygro_l-Q';
     } else if (props.size === "L") {
-        rules += ' -usygro_l-bS';
-        rules += ' -usygro_l-R';
+        rules += ' -usygro_l-bU';
+        rules += ' -usygro_l-T';
     } else if (props.size === "S") {
-        rules += ' -usygro_l-bO';
-        rules += ' -usygro_l-N';
-    } else {
         rules += ' -usygro_l-bQ';
         rules += ' -usygro_l-P';
+    } else {
+        rules += ' -usygro_l-bS';
+        rules += ' -usygro_l-R';
     }
     rules += ' m-rwozxi';
     rules += ' Uc';
@@ -142,9 +142,9 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
     rules += ' _Q-375x7f';
     rules += ' _Ra';
     if (props.isQuiet) {
-        rules += ' jbG';
-        rules += ' jF';
-    } else rules += ' jE';
+        rules += ' jbH';
+        rules += ' jG';
+    } else rules += ' jF';
     rules += ' C-375tnm';
     rules += ' D-375tnn';
     if (props.isQuiet) rules += ' ba';
@@ -156,31 +156,31 @@ const $b41c15d27fbaff7d$var$inputButton = function anonymous(props) {
         else if (props.isHovered) rules += ' bh';
         else rules += ' bg';
     }
-    if (props.isQuiet) rules += ' r5';
+    if (props.isQuiet) rules += ' r6';
     rules += ' __R-yksgrp';
     if (props.isQuiet) rules += ' -_375tnm_C-a';
-    else rules += ' -_375tnm_C-H';
+    else rules += ' -_375tnm_C-I';
     if (props.isQuiet) rules += ' -_375tnn_D-a';
-    else rules += ' -_375tnn_D-H';
+    else rules += ' -_375tnn_D-I';
     if (props.size === "XL") {
-        rules += ' -_375toq_k-bw';
-        rules += ' -_375toq_k-v';
+        rules += ' -_375toq_k-by';
+        rules += ' -_375toq_k-x';
     } else if (props.size === "L") {
-        rules += ' -_375toq_k-bs';
-        rules += ' -_375toq_k-p';
+        rules += ' -_375toq_k-bu';
+        rules += ' -_375toq_k-r';
     } else if (props.size === "S") {
+        rules += ' -_375toq_k-bn';
+        rules += ' -_375toq_k-m';
+    } else if (props.size === "XS") {
         rules += ' -_375toq_k-bl';
         rules += ' -_375toq_k-k';
-    } else if (props.size === "XS") {
-        rules += ' -_375toq_k-bj';
-        rules += ' -_375toq_k-i';
     } else {
-        rules += ' -_375toq_k-bp';
-        rules += ' -_375toq_k-o';
+        rules += ' -_375toq_k-br';
+        rules += ' -_375toq_k-q';
     }
     return rules;
 };
-const $b41c15d27fbaff7d$var$quietFocusLine = " . l2 k-375zlr Ua Za _vf _wf _xf _yf bx ba_____z";
+const $b41c15d27fbaff7d$var$quietFocusLine = " . l4 k-375zlr Ua Za _vf _wf _xf _yf bx ba_____z";
 let $b41c15d27fbaff7d$export$b1e5508a851be14d = function anonymous(props) {
     let rules = " .";
     rules += ' _La';
@@ -193,10 +193,10 @@ let $b41c15d27fbaff7d$export$b1e5508a851be14d = function anonymous(props) {
     rules += ' p-17zqamw';
     rules += ' __va';
     rules += ' __wa';
-    rules += ' Ec';
-    rules += ' Fc';
-    rules += ' Cc';
-    rules += ' Dc';
+    rules += ' Ed';
+    rules += ' Fd';
+    rules += ' Cd';
+    rules += ' Dd';
     rules += ' _c-bc1l9oh';
     rules += ' _c-1uotwbwg';
     rules += ' _c-eo0c6sf';
@@ -331,23 +331,23 @@ function $b41c15d27fbaff7d$var$Picker(props1, ref) {
             rules += ' _f-1x99dlob';
             rules += ' _fa';
             if (props.size === "XL") {
-                rules += ' -aqrvqh_k-bw';
-                rules += ' -aqrvqh_k-v';
+                rules += ' -aqrvqh_k-by';
+                rules += ' -aqrvqh_k-x';
             } else if (props.size === "L") {
-                rules += ' -aqrvqh_k-bs';
-                rules += ' -aqrvqh_k-p';
+                rules += ' -aqrvqh_k-bu';
+                rules += ' -aqrvqh_k-r';
             } else if (props.size === "S") {
+                rules += ' -aqrvqh_k-bn';
+                rules += ' -aqrvqh_k-m';
+            } else if (props.size === "XS") {
                 rules += ' -aqrvqh_k-bl';
                 rules += ' -aqrvqh_k-k';
-            } else if (props.size === "XS") {
-                rules += ' -aqrvqh_k-bj';
-                rules += ' -aqrvqh_k-i';
             } else {
-                rules += ' -aqrvqh_k-bp';
-                rules += ' -aqrvqh_k-o';
+                rules += ' -aqrvqh_k-br';
+                rules += ' -aqrvqh_k-q';
             }
             rules += ' -_1inj1bc_i--prjw07';
-            rules += ' jd';
+            rules += ' je';
             rules += ' __R-yksgrp';
             return rules;
         }({
@@ -375,6 +375,9 @@ function $b41c15d27fbaff7d$var$Picker(props1, ref) {
                         /*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$Button), {
                             ref: domRef,
                             style: (renderProps)=>(0, $10ea7662e51a285b$export$56e8cba416805d8d)(domRef)(renderProps),
+                            // Prevent press scale from sticking while Picker is open.
+                            // @ts-ignore
+                            isPressed: false,
                             className: (renderProps)=>$b41c15d27fbaff7d$var$inputButton({
                                     ...renderProps,
                                     size: size,
@@ -463,12 +466,12 @@ function $b41c15d27fbaff7d$var$Picker(props1, ref) {
                                 let rules = " .";
                                 rules += ' y-375tp4';
                                 if (props.isQuiet) {
-                                    rules += ' qbO';
-                                    rules += ' qN';
+                                    rules += ' qbQ';
+                                    rules += ' qP';
                                 } else rules += ' q-1utmx2y';
                                 if (props.isQuiet) rules += ' l-13f72lm';
                                 else rules += ' l-1utmx2y';
-                                if (props.isQuiet) rules += ' -_375tp4_y-L';
+                                if (props.isQuiet) rules += ' -_375tp4_y-M';
                                 return rules;
                             }(props1),
                             children: /*#__PURE__*/ (0, $c77I5$jsx)((0, $c77I5$Provider), {