@react-spectrum/s2 0.2.1-nightly.4979

package/dist/ComboBox.css

@@ -0,0 +1,473 @@
+@layer _.a {
+  ._Zd {
+    display: flex;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  ._jb {
+    text-align: center;
+  }
+
+  .wf {
+    border-style: none;
+  }
+
+  ._vi {
+    border-start-start-radius: .285714em;
+  }
+
+  ._wi {
+    border-start-end-radius: .285714em;
+  }
+
+  ._xi {
+    border-end-start-radius: .285714em;
+  }
+
+  ._yi {
+    border-end-end-radius: .285714em;
+  }
+
+  ._1c {
+    align-items: center;
+  }
+
+  ._2d {
+    justify-content: center;
+  }
+
+  .lh {
+    width: 1rem;
+  }
+
+  .li {
+    width: 1.25rem;
+  }
+
+  .lk {
+    width: 1.5rem;
+  }
+
+  .lo {
+    width: 2rem;
+  }
+
+  .kh {
+    height: 1rem;
+  }
+
+  .ki {
+    height: 1.25rem;
+  }
+
+  .kk {
+    height: 1.5rem;
+  }
+
+  .ko {
+    height: 2rem;
+  }
+
+  .yE {
+    margin-inline-start: .714286em;
+  }
+
+  ._bb {
+    aspect-ratio: 1;
+  }
+
+  ._Oa {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  }
+
+  ._Q-375x7f {
+    transition-duration: .15s;
+  }
+
+  ._Ra {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  .bh {
+    background-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
+  }
+
+  .bg {
+    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  }
+
+  .an {
+    color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .ao {
+    color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .aj {
+    color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  ._8-3t1x {
+    flex-shrink: 0;
+  }
+
+  .R-3hn0u {
+    rotate: 90deg;
+  }
+
+  .-rwx0fg_e-b {
+    --iconPrimary: currentColor;
+  }
+
+  ._Zf {
+    display: grid;
+  }
+
+  .__a-3t1y {
+    grid-column-start: 1;
+  }
+
+  .__b-7u9dhl {
+    grid-column-end: span 2;
+  }
+
+  .__h-375yi6 {
+    grid-template-columns: 1fr;
+  }
+
+  .__h-jyg4vb {
+    grid-template-columns: auto 1fr;
+  }
+
+  .__h-1cwd7ud {
+    grid-template-columns: subgrid;
+  }
+
+  .__i-fdenls {
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .__i-jyg4vb {
+    grid-template-rows: auto 1fr;
+  }
+
+  .__j-xlaqir {
+    grid-template-areas: "label"
+                         "input"
+                         "helptext";
+  }
+
+  .__j-5eez8j {
+    grid-template-areas: "label input"
+                         "label helptext";
+  }
+
+  ._de {
+    font-size: .875rem;
+  }
+
+  ._da {
+    font-size: .6875rem;
+  }
+
+  ._dc {
+    font-size: .75rem;
+  }
+
+  ._dg {
+    font-size: 1rem;
+  }
+
+  ._di {
+    font-size: 1.125rem;
+  }
+
+  ._1d {
+    align-items: baseline;
+  }
+
+  ._fa {
+    line-height: 1.3;
+  }
+
+  .-aqrvqh_k-o {
+    --field-height: 2rem;
+  }
+
+  .-aqrvqh_k-i {
+    --field-height: 1.25rem;
+  }
+
+  .-aqrvqh_k-k {
+    --field-height: 1.5rem;
+  }
+
+  .-aqrvqh_k-p {
+    --field-height: 2.5rem;
+  }
+
+  .-aqrvqh_k-v {
+    --field-height: 3rem;
+  }
+
+  .-_1inj1bc_i--prjw07 {
+    --field-gap: calc((var(--field-height)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  }
+
+  .jd {
+    column-gap: .75rem;
+  }
+
+  .__R-yksgrp {
+    -webkit-tap-highlight-color: #0000;
+  }
+
+  .__a-4cfph1 {
+    grid-column-start: input;
+  }
+
+  .__b-4cfph1 {
+    grid-column-end: input;
+  }
+
+  .__c-4cfph1 {
+    grid-row-start: input;
+  }
+
+  .__d-4cfph1 {
+    grid-row-end: input;
+  }
+
+  .qo {
+    min-width: 2rem;
+  }
+
+  .qi {
+    min-width: 1.25rem;
+  }
+
+  .qk {
+    min-width: 1.5rem;
+  }
+
+  .qp {
+    min-width: 2.5rem;
+  }
+
+  .qv {
+    min-width: 3rem;
+  }
+
+  .-usygro_l-P {
+    --defaultWidth: 13rem;
+  }
+
+  .-usygro_l-N {
+    --defaultWidth: 12rem;
+  }
+
+  .-usygro_l-R {
+    --defaultWidth: 14rem;
+  }
+
+  .-usygro_l-O {
+    --defaultWidth: 15rem;
+  }
+
+  .m-rwozxi {
+    contain-intrinsic-width: calc(var(--defaultWidth)  - var(--C, 0px)  - var(--D, 0px)  - var(--s, 0px)  - var(--t, 0px));
+  }
+
+  .C-375tnm {
+    padding-inline-start: var(--C);
+  }
+
+  .D-375tnn {
+    padding-inline-end: var(--D);
+  }
+
+  .-_375tnm_C-H {
+    --C: calc(var(--k, var(--o)) * 3 / 8);
+  }
+
+  .-_375tnn_D--45az6c {
+    --D: calc(var(--k, var(--o)) * 3 / 16);
+  }
+
+  .q-1utmx2y {
+    min-width: var(--trigger-width);
+  }
+
+  .l-1utmx2y {
+    width: var(--trigger-width);
+  }
+}
+
+@layer _.b {
+  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.5;
+  }
+}
+
+@layer UNSAFE_overrides;
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .lbi {
+      width: 1.25rem;
+    }
+
+    .lbj {
+      width: 1.5625rem;
+    }
+
+    .lbl {
+      width: 1.875rem;
+    }
+
+    .lbp {
+      width: 2.5rem;
+    }
+
+    .kbi {
+      height: 1.25rem;
+    }
+
+    .kbj {
+      height: 1.5625rem;
+    }
+
+    .kbl {
+      height: 1.875rem;
+    }
+
+    .kbp {
+      height: 2.5rem;
+    }
+
+    ._dbf {
+      font-size: 1.0625rem;
+    }
+
+    ._dbb {
+      font-size: .8125rem;
+    }
+
+    ._dbd {
+      font-size: .9375rem;
+    }
+
+    ._dbh {
+      font-size: 1.1875rem;
+    }
+
+    ._dbj {
+      font-size: 1.375rem;
+    }
+
+    .-aqrvqh_k-bp {
+      --field-height: 2.5rem;
+    }
+
+    .-aqrvqh_k-bj {
+      --field-height: 1.5625rem;
+    }
+
+    .-aqrvqh_k-bl {
+      --field-height: 1.875rem;
+    }
+
+    .-aqrvqh_k-bs {
+      --field-height: 3.125rem;
+    }
+
+    .-aqrvqh_k-bw {
+      --field-height: 3.75rem;
+    }
+
+    .qbp {
+      min-width: 2.5rem;
+    }
+
+    .qbj {
+      min-width: 1.5625rem;
+    }
+
+    .qbl {
+      min-width: 1.875rem;
+    }
+
+    .qbs {
+      min-width: 3.125rem;
+    }
+
+    .qbw {
+      min-width: 3.75rem;
+    }
+
+    .-usygro_l-bQ {
+      --defaultWidth: 16.25rem;
+    }
+
+    .-usygro_l-bO {
+      --defaultWidth: 15rem;
+    }
+
+    .-usygro_l-bS {
+      --defaultWidth: 17.5rem;
+    }
+
+    .-usygro_l-bT {
+      --defaultWidth: 18.75rem;
+    }
+  }
+}
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    ._Oag {
+      transition-property: none;
+    }
+
+    ._Qa-375x7f {
+      transition-duration: .15s;
+    }
+
+    ._Raa {
+      transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+    }
+
+    .ba_____x {
+      background-color: buttontext;
+    }
+
+    .ba_____z {
+      background-color: highlight;
+    }
+
+    .ba_____B {
+      background-color: graytext;
+    }
+
+    .aa_____w {
+      color: buttonface;
+    }
+  }
+}
+
+@layer _.b.-_1s8glxu {
+  @supports (contain-intrinsic-width: 1px) {
+    .__m-1s8glxue {
+      contain: inline-size;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=ComboBox.css.map */

package/dist/ComboBox.css.map

@@ -0,0 +1 @@
+{"mappings":"AC4FoB;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;;;;EA2CD;;;;EAAA;;;;EAAA;;;;EAkFiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CA;;;;EAAA;;;;;AApMF;EA6HgB;;;;;AA7HhB;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6HgB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwBd;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AArJF;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAqJE;EAAA;IAAA;;;;;;AA+CA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\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  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  PopoverProps as AriaPopoverProps,\n  Section as AriaSection,\n  Button,\n  InputContext,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps\n} from 'react-aria-components';\nimport {baseColor, 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 {createContext, CSSProperties, forwardRef, ReactNode, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef, useFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FocusableRef, 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';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {Popover} from './Popover';\nimport {pressScale} from './pressScale';\n\n\nexport interface ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default \"M\"\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n  ComboboxStyleProps,\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\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderRadius: 'control-sm',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\nfunction ComboBox<T extends object>(props: ComboBoxProps<T>, ref: FocusableRef<HTMLDivElement>) {\n  let domRef = useFocusableRef(ref);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\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    ...pickerProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\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  let triggerRef = useRef<HTMLDivElement>(null);\n   // Make menu width match input + button\n  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (triggerRef.current) {\n      let inputRect = triggerRef.current.getBoundingClientRect();\n      let minX = inputRect.left;\n      let maxX = inputRect.right;\n      setTriggerWidth((maxX - minX) + 'px');\n    }\n  }, [triggerRef, setTriggerWidth]);\n\n  useResizeObserver({\n    ref: triggerRef,\n    onResize: onResize\n  });\n\n  return (\n    <AriaComboBox\n      {...pickerProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <>\n          <InternalComboboxContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <FieldGroup\n              ref={triggerRef}\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                paddingStart: 'edge-to-text',\n                // better way to do this one? it's not actually half, they are\n                // [9, 4], [12, 6], [15, 8], [18, 8]\n                // also noticed that our measurement is including the border, making the padding too much\n                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n              })({size})}>\n              <InputContext.Consumer>\n                {ctx => (\n                  <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                    <Input />\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n              <Button\n                ref={buttonRef}\n                style={renderProps => pressScale(buttonRef)(renderProps)}\n                className={renderProps => inputButton({\n                  ...renderProps,\n                  size,\n                  isOpen\n                })}>\n                <ChevronIcon\n                  size={size}\n                  className={iconStyles} />\n              </Button>\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <Popover\n              hideArrow\n              triggerRef={triggerRef}\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth ? `${menuWidth}px` : undefined,\n                // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n                '--trigger-width': `calc(${triggerWidth} - 2px)`\n              } as CSSProperties}\n              styles={style({\n                minWidth: '[var(--trigger-width)]',\n                width: '[var(--trigger-width)]'\n              })}>\n              <Provider\n                values={[\n                  [HeaderContext, {className: sectionHeader({size})}],\n                  [HeadingContext, {className: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      'description': {className: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </Popover>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n}\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ComboBox);\nexport {_ComboBox as ComboBox};\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  children: ReactNode\n}\n\nexport function ComboBoxItem(props: ComboBoxItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalComboboxContext);\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          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', className: iconCenterWrapper}), styles: icon}\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    label: {className: label},\n                    description: {className: description({...renderProps, size})}\n                  }\n                }]\n              ]}>\n              {!isLink && <CheckmarkIcon size={({S: 'S', M: 'L', L: 'XL', XL: 'XXL'} as const)[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </Provider>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<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":"ComboBox.css.map"}