@react-spectrum/s2 3.0.0-nightly-4baa1b08e-241029 → 3.0.0-nightly-dcc0752f8-241031

package/dist/SearchField.cjs

@@ -108,22 +108,11 @@ function $f0dfe14258307d4b$var$SearchField(props, ref) {
             rules += ' _1d';
             rules += ' _f-1x99dlob';
             rules += ' _fa';
-            if (props.size === "XL") {
-                rules += ' -aqrvqh_k-by';
-                rules += ' -aqrvqh_k-x';
-            } else if (props.size === "L") {
-                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 {
-                rules += ' -aqrvqh_k-br';
-                rules += ' -aqrvqh_k-q';
-            }
+            if (props.size === "XL") rules += ' -aqrvqh_k-n';
+            else if (props.size === "L") rules += ' -aqrvqh_k-l';
+            else if (props.size === "S") rules += ' -aqrvqh_k-h';
+            else if (props.size === "XS") rules += ' -aqrvqh_k-g';
+            else rules += ' -aqrvqh_k-j';
             rules += ' -_1inj1bc_i--prjw07';
             rules += ' je';
             rules += ' __R-yksgrp';

package/dist/SearchField.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AAgCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAgD;AAE9F,SAAS,kCAAY,KAAuB,EAAE,GAAsB;IAClE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,2BACb,mBAAmB,kBACnB,YAAY,EACZ,GAAG,kBACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IAExC,sCAAsC;IACtC,CAAA,GAAA,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,4CAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,gBAAgB;QACpB,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAaJ;YACxB,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,WAAE,OAAO,EAAC,iBAAM;;oBACrC,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAClB,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,iCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,MAAM,MAAM,IAAI;wBAChB,MAAM;;0CAKN,gCAAC,CAAA,GAAA,mCAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,qCAAU;wCAAG;4CACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;gDACrB,MAAM;gDACN,MAAM;4CAQR;4CACA,MAAM;wCAIR;qCAAE;iCACH;0CACD,cAAA,gCAAC,CAAA,GAAA,iCAAS;;0CAEZ,gCAAC,CAAA,GAAA,+BAAI;gCAAE,KAAK;gCAAU,gBAAgB;;4BACrC,CAAC,WAAW,CAAC,iBAAiB,UAAU,kBAAI,gCAAC,CAAA,GAAA,qCAAU;gCAAE,MAAM,MAAM,IAAI;;;;kCAE5E,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX;AAEA;;CAEC,GACD,IAAI,4CAAe,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/SearchField.tsx"],"sourcesContent":["/*\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  SearchField as AriaSearchField,\n  SearchFieldProps as AriaSearchFieldProps,\n  ContextValue,\n  Provider\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the SearchField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);\n\nfunction SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...searchFieldProps\n  } = props;\n\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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  return (\n    <AriaSearchField\n      {...searchFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        '--iconMargin': {\n          type: 'marginTop',\n          value: fontRelative(-2)\n        },\n        color: {\n          default: 'neutral',\n          isDisabled: {\n            default: 'disabled',\n            forcedColors: 'GrayText'\n          }\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid, isEmpty}) => (<>\n        {label && <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>}\n        <FieldGroup\n          isDisabled={isDisabled}\n          size={props.size}\n          styles={style({\n            borderRadius: 'full',\n            paddingStart: 'pill',\n            paddingEnd: 0\n          })}>\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({\n                  slot: 'icon',\n                  styles: style({\n                    flexShrink: 0,\n                    marginEnd: 'text-to-visual',\n                    '--iconPrimary': {\n                      type: 'fill',\n                      value: 'currentColor'\n                    }\n                  })\n                }),\n                styles: style({\n                  size: fontRelative(20),\n                  marginStart: '--iconMargin'\n                })\n              }]\n            ]}>\n            <SearchIcon />\n          </Provider>\n          <Input ref={inputRef} UNSAFE_className={raw('&::-webkit-search-cancel-button { display: none }')} />\n          {!isEmpty && !searchFieldProps.isReadOnly && <ClearButton size={props.size} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaSearchField>\n  );\n}\n\n/**\n * A SearchField is a text field designed for searches.\n */\nlet _SearchField = /*#__PURE__*/ forwardRef(SearchField);\nexport {_SearchField as SearchField};\n"],"names":[],"version":3,"file":"SearchField.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AAgCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAgD;AAE9F,SAAS,kCAAY,KAAuB,EAAE,GAAsB;IAClE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,2BACb,mBAAmB,kBACnB,YAAY,EACZ,GAAG,kBACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IAExC,sCAAsC;IACtC,CAAA,GAAA,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,4CAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,gBAAgB;QACpB,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAaJ;YACxB,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,WAAE,OAAO,EAAC,iBAAM;;oBACrC,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAClB,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,iCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,MAAM,MAAM,IAAI;wBAChB,MAAM;;0CAKN,gCAAC,CAAA,GAAA,mCAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,qCAAU;wCAAG;4CACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;gDACrB,MAAM;gDACN,MAAM;4CAQR;4CACA,MAAM;wCAIR;qCAAE;iCACH;0CACD,cAAA,gCAAC,CAAA,GAAA,iCAAS;;0CAEZ,gCAAC,CAAA,GAAA,+BAAI;gCAAE,KAAK;gCAAU,gBAAgB;;4BACrC,CAAC,WAAW,CAAC,iBAAiB,UAAU,kBAAI,gCAAC,CAAA,GAAA,qCAAU;gCAAE,MAAM,MAAM,IAAI;;;;kCAE5E,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX;AAEA;;CAEC,GACD,IAAI,4CAAe,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/SearchField.tsx"],"sourcesContent":["/*\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  SearchField as AriaSearchField,\n  SearchFieldProps as AriaSearchFieldProps,\n  ContextValue,\n  Provider\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the SearchField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);\n\nfunction SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...searchFieldProps\n  } = props;\n\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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  return (\n    <AriaSearchField\n      {...searchFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        '--iconMargin': {\n          type: 'marginTop',\n          value: fontRelative(-2)\n        },\n        color: {\n          default: 'neutral',\n          isDisabled: {\n            default: 'disabled',\n            forcedColors: 'GrayText'\n          }\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid, isEmpty}) => (<>\n        {label && <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>}\n        <FieldGroup\n          isDisabled={isDisabled}\n          size={props.size}\n          styles={style({\n            borderRadius: 'full',\n            paddingStart: 'pill',\n            paddingEnd: 0\n          })}>\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({\n                  slot: 'icon',\n                  styles: style({\n                    flexShrink: 0,\n                    marginEnd: 'text-to-visual',\n                    '--iconPrimary': {\n                      type: 'fill',\n                      value: 'currentColor'\n                    }\n                  })\n                }),\n                styles: style({\n                  size: fontRelative(20),\n                  marginStart: '--iconMargin'\n                })\n              }]\n            ]}>\n            <SearchIcon />\n          </Provider>\n          <Input ref={inputRef} UNSAFE_className={raw('&::-webkit-search-cancel-button { display: none }')} />\n          {!isEmpty && !searchFieldProps.isReadOnly && <ClearButton size={props.size} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaSearchField>\n  );\n}\n\n/**\n * A SearchField is a text field designed for searches.\n */\nlet _SearchField = /*#__PURE__*/ forwardRef(SearchField);\nexport {_SearchField as SearchField};\n"],"names":[],"version":3,"file":"SearchField.cjs.map"}

package/dist/SearchField.css

@@ -70,24 +70,24 @@
     line-height: 1.3;
   }
 
-  .-aqrvqh_k-q {
-    --field-height: 2rem;
+  .-aqrvqh_k-j {
+    --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-k {
-    --field-height: 1.25rem;
+  .-aqrvqh_k-g {
+    --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-m {
-    --field-height: 1.5rem;
+  .-aqrvqh_k-h {
+    --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-r {
-    --field-height: 2.5rem;
+  .-aqrvqh_k-l {
+    --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-aqrvqh_k-x {
-    --field-height: 3rem;
+  .-aqrvqh_k-n {
+    --field-height: calc(3rem * var(--s2-scale));
   }
 
   .-_1inj1bc_i--prjw07 {
@@ -201,26 +201,6 @@
       font-size: 1.375rem;
     }
 
-    .-aqrvqh_k-br {
-      --field-height: 2.5rem;
-    }
-
-    .-aqrvqh_k-bl {
-      --field-height: 1.5625rem;
-    }
-
-    .-aqrvqh_k-bn {
-      --field-height: 1.875rem;
-    }
-
-    .-aqrvqh_k-bu {
-      --field-height: 3.125rem;
-    }
-
-    .-aqrvqh_k-by {
-      --field-height: 3.75rem;
-    }
-
     .zbH {
       margin-inline-end: .470588em;
     }

package/dist/SearchField.css.map

@@ -1 +1 @@
-{"mappings":"ACiFoC;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;;;;EAgClB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUQ;;;;EAAA;;;;EAAA;;;;EASF;;;;EAAA;;;;EAAA;;;;EAQ0B;;;;;AA3Dd;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA0CV;;;;;;AA1CU;EAAA;IAAA;;;;;;AAgClB","sources":["701be11ab8dca66d","packages/@react-spectrum/s2/src/SearchField.tsx"],"sourcesContent":["@import \"95c78f98597e8421\";\n@import \"f4cdd67932b2e9e6\";\n@import \"6e171d7f06abfdd6\";\n@import \"0c29dd3d96ea9e9e\";\n@import \"a7198624cd817afc\";\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  SearchField as AriaSearchField,\n  SearchFieldProps as AriaSearchFieldProps,\n  ContextValue,\n  Provider\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the SearchField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);\n\nfunction SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...searchFieldProps\n  } = props;\n\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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  return (\n    <AriaSearchField\n      {...searchFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        '--iconMargin': {\n          type: 'marginTop',\n          value: fontRelative(-2)\n        },\n        color: {\n          default: 'neutral',\n          isDisabled: {\n            default: 'disabled',\n            forcedColors: 'GrayText'\n          }\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid, isEmpty}) => (<>\n        {label && <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>}\n        <FieldGroup\n          isDisabled={isDisabled}\n          size={props.size}\n          styles={style({\n            borderRadius: 'full',\n            paddingStart: 'pill',\n            paddingEnd: 0\n          })}>\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({\n                  slot: 'icon',\n                  styles: style({\n                    flexShrink: 0,\n                    marginEnd: 'text-to-visual',\n                    '--iconPrimary': {\n                      type: 'fill',\n                      value: 'currentColor'\n                    }\n                  })\n                }),\n                styles: style({\n                  size: fontRelative(20),\n                  marginStart: '--iconMargin'\n                })\n              }]\n            ]}>\n            <SearchIcon />\n          </Provider>\n          <Input ref={inputRef} UNSAFE_className={raw('&::-webkit-search-cancel-button { display: none }')} />\n          {!isEmpty && !searchFieldProps.isReadOnly && <ClearButton size={props.size} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaSearchField>\n  );\n}\n\n/**\n * A SearchField is a text field designed for searches.\n */\nlet _SearchField = /*#__PURE__*/ forwardRef(SearchField);\nexport {_SearchField as SearchField};\n"],"names":[],"version":3,"file":"SearchField.css.map"}
+{"mappings":"ACiFoC;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;;;;EAgClB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUQ;;;;EAAA;;;;EAAA;;;;EASF;;;;EAAA;;;;EAAA;;;;EAQ0B;;;;;AA3Dd;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA0CV;;;;;;AA1CU;EAAA;IAAA;;;;;;AAgClB","sources":["701be11ab8dca66d","packages/@react-spectrum/s2/src/SearchField.tsx"],"sourcesContent":["@import \"95c78f98597e8421\";\n@import \"f4cdd67932b2e9e6\";\n@import \"6e171d7f06abfdd6\";\n@import \"0c29dd3d96ea9e9e\";\n@import \"a7198624cd817afc\";\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  SearchField as AriaSearchField,\n  SearchFieldProps as AriaSearchFieldProps,\n  ContextValue,\n  Provider\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the SearchField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);\n\nfunction SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...searchFieldProps\n  } = props;\n\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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  return (\n    <AriaSearchField\n      {...searchFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        '--iconMargin': {\n          type: 'marginTop',\n          value: fontRelative(-2)\n        },\n        color: {\n          default: 'neutral',\n          isDisabled: {\n            default: 'disabled',\n            forcedColors: 'GrayText'\n          }\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid, isEmpty}) => (<>\n        {label && <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>}\n        <FieldGroup\n          isDisabled={isDisabled}\n          size={props.size}\n          styles={style({\n            borderRadius: 'full',\n            paddingStart: 'pill',\n            paddingEnd: 0\n          })}>\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({\n                  slot: 'icon',\n                  styles: style({\n                    flexShrink: 0,\n                    marginEnd: 'text-to-visual',\n                    '--iconPrimary': {\n                      type: 'fill',\n                      value: 'currentColor'\n                    }\n                  })\n                }),\n                styles: style({\n                  size: fontRelative(20),\n                  marginStart: '--iconMargin'\n                })\n              }]\n            ]}>\n            <SearchIcon />\n          </Provider>\n          <Input ref={inputRef} UNSAFE_className={raw('&::-webkit-search-cancel-button { display: none }')} />\n          {!isEmpty && !searchFieldProps.isReadOnly && <ClearButton size={props.size} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaSearchField>\n  );\n}\n\n/**\n * A SearchField is a text field designed for searches.\n */\nlet _SearchField = /*#__PURE__*/ forwardRef(SearchField);\nexport {_SearchField as SearchField};\n"],"names":[],"version":3,"file":"SearchField.css.map"}

package/dist/SearchField.mjs

@@ -101,22 +101,11 @@ function $e3d0f3db0eb61b92$var$SearchField(props, ref) {
             rules += ' _1d';
             rules += ' _f-1x99dlob';
             rules += ' _fa';
-            if (props.size === "XL") {
-                rules += ' -aqrvqh_k-by';
-                rules += ' -aqrvqh_k-x';
-            } else if (props.size === "L") {
-                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 {
-                rules += ' -aqrvqh_k-br';
-                rules += ' -aqrvqh_k-q';
-            }
+            if (props.size === "XL") rules += ' -aqrvqh_k-n';
+            else if (props.size === "L") rules += ' -aqrvqh_k-l';
+            else if (props.size === "S") rules += ' -aqrvqh_k-h';
+            else if (props.size === "XS") rules += ' -aqrvqh_k-g';
+            else rules += ' -aqrvqh_k-j';
             rules += ' -_1inj1bc_i--prjw07';
             rules += ' je';
             rules += ' __R-yksgrp';

package/dist/SearchField.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AAgCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAgD;AAE9F,SAAS,kCAAY,KAAuB,EAAE,GAAsB;IAClE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,2BACb,mBAAmB,kBACnB,YAAY,EACZ,GAAG,kBACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IAExC,sCAAsC;IACtC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yBAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,gBAAgB;QACpB,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAaJ;YACxB,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,WAAE,OAAO,EAAC,iBAAM;;oBACrC,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAClB,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,iBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,MAAM,MAAM,IAAI;wBAChB,MAAM;;0CAKN,gBAAC,CAAA,GAAA,eAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,yCAAU;wCAAG;4CACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;gDACrB,MAAM;gDACN,MAAM;4CAQR;4CACA,MAAM;wCAIR;qCAAE;iCACH;0CACD,cAAA,gBAAC,CAAA,GAAA,wCAAS;;0CAEZ,gBAAC,CAAA,GAAA,yCAAI;gCAAE,KAAK;gCAAU,gBAAgB;;4BACrC,CAAC,WAAW,CAAC,iBAAiB,UAAU,kBAAI,gBAAC,CAAA,GAAA,yCAAU;gCAAE,MAAM,MAAM,IAAI;;;;kCAE5E,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX;AAEA;;CAEC,GACD,IAAI,4CAAe,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/SearchField.tsx"],"sourcesContent":["/*\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  SearchField as AriaSearchField,\n  SearchFieldProps as AriaSearchFieldProps,\n  ContextValue,\n  Provider\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the SearchField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);\n\nfunction SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...searchFieldProps\n  } = props;\n\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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  return (\n    <AriaSearchField\n      {...searchFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        '--iconMargin': {\n          type: 'marginTop',\n          value: fontRelative(-2)\n        },\n        color: {\n          default: 'neutral',\n          isDisabled: {\n            default: 'disabled',\n            forcedColors: 'GrayText'\n          }\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid, isEmpty}) => (<>\n        {label && <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>}\n        <FieldGroup\n          isDisabled={isDisabled}\n          size={props.size}\n          styles={style({\n            borderRadius: 'full',\n            paddingStart: 'pill',\n            paddingEnd: 0\n          })}>\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({\n                  slot: 'icon',\n                  styles: style({\n                    flexShrink: 0,\n                    marginEnd: 'text-to-visual',\n                    '--iconPrimary': {\n                      type: 'fill',\n                      value: 'currentColor'\n                    }\n                  })\n                }),\n                styles: style({\n                  size: fontRelative(20),\n                  marginStart: '--iconMargin'\n                })\n              }]\n            ]}>\n            <SearchIcon />\n          </Provider>\n          <Input ref={inputRef} UNSAFE_className={raw('&::-webkit-search-cancel-button { display: none }')} />\n          {!isEmpty && !searchFieldProps.isReadOnly && <ClearButton size={props.size} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaSearchField>\n  );\n}\n\n/**\n * A SearchField is a text field designed for searches.\n */\nlet _SearchField = /*#__PURE__*/ forwardRef(SearchField);\nexport {_SearchField as SearchField};\n"],"names":[],"version":3,"file":"SearchField.mjs.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AAgCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAgD;AAE9F,SAAS,kCAAY,KAAuB,EAAE,GAAsB;IAClE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,2BACb,mBAAmB,kBACnB,YAAY,EACZ,GAAG,kBACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IAExC,sCAAsC;IACtC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yBAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,gBAAgB;QACpB,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAaJ;YACxB,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,WAAE,OAAO,EAAC,iBAAM;;oBACrC,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAClB,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,iBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,MAAM,MAAM,IAAI;wBAChB,MAAM;;0CAKN,gBAAC,CAAA,GAAA,eAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,yCAAU;wCAAG;4CACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;gDACrB,MAAM;gDACN,MAAM;4CAQR;4CACA,MAAM;wCAIR;qCAAE;iCACH;0CACD,cAAA,gBAAC,CAAA,GAAA,wCAAS;;0CAEZ,gBAAC,CAAA,GAAA,yCAAI;gCAAE,KAAK;gCAAU,gBAAgB;;4BACrC,CAAC,WAAW,CAAC,iBAAiB,UAAU,kBAAI,gBAAC,CAAA,GAAA,yCAAU;gCAAE,MAAM,MAAM,IAAI;;;;kCAE5E,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX;AAEA;;CAEC,GACD,IAAI,4CAAe,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/SearchField.tsx"],"sourcesContent":["/*\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  SearchField as AriaSearchField,\n  SearchFieldProps as AriaSearchFieldProps,\n  ContextValue,\n  Provider\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the SearchField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);\n\nfunction SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...searchFieldProps\n  } = props;\n\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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  return (\n    <AriaSearchField\n      {...searchFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        '--iconMargin': {\n          type: 'marginTop',\n          value: fontRelative(-2)\n        },\n        color: {\n          default: 'neutral',\n          isDisabled: {\n            default: 'disabled',\n            forcedColors: 'GrayText'\n          }\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid, isEmpty}) => (<>\n        {label && <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>}\n        <FieldGroup\n          isDisabled={isDisabled}\n          size={props.size}\n          styles={style({\n            borderRadius: 'full',\n            paddingStart: 'pill',\n            paddingEnd: 0\n          })}>\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({\n                  slot: 'icon',\n                  styles: style({\n                    flexShrink: 0,\n                    marginEnd: 'text-to-visual',\n                    '--iconPrimary': {\n                      type: 'fill',\n                      value: 'currentColor'\n                    }\n                  })\n                }),\n                styles: style({\n                  size: fontRelative(20),\n                  marginStart: '--iconMargin'\n                })\n              }]\n            ]}>\n            <SearchIcon />\n          </Provider>\n          <Input ref={inputRef} UNSAFE_className={raw('&::-webkit-search-cancel-button { display: none }')} />\n          {!isEmpty && !searchFieldProps.isReadOnly && <ClearButton size={props.size} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaSearchField>\n  );\n}\n\n/**\n * A SearchField is a text field designed for searches.\n */\nlet _SearchField = /*#__PURE__*/ forwardRef(SearchField);\nexport {_SearchField as SearchField};\n"],"names":[],"version":3,"file":"SearchField.mjs.map"}

package/dist/SegmentedControl.cjs

@@ -79,7 +79,7 @@ const $e33225559d5e019f$var$segmentedControl = function anonymous(props, overrid
     rules += ' _wd';
     rules += ' _xd';
     rules += ' _yd';
-    if (!$l) rules += ' l4';
+    if (!$l) rules += ' lG';
     return rules;
 };
 const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
@@ -116,27 +116,21 @@ const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
         else if (props.isHovered) rules += ' an';
         else rules += ' am';
     } else rules += ' am';
-    rules += ' C-1dz4pg9b-1aa9md1';
-    rules += ' C-1dz4pg9-6njx2e';
+    rules += ' C-1dz4pg9-ve8p9e';
     rules += ' CI';
-    rules += ' D-1dz4pg9b-1aa9md1';
-    rules += ' D-1dz4pg9-6njx2e';
+    rules += ' D-1dz4pg9-ve8p9e';
     rules += ' DI';
     rules += ' k-375toq';
     rules += ' _1c';
     if (!$h) rules += ' ha';
     if (!$_9) rules += ' _9-3t1y';
     if (!$_8) rules += ' _8-3t1x';
-    if (!$q) {
-        rules += ' qba';
-        rules += ' qa';
-    }
+    if (!$q) rules += ' qa';
     rules += ' _2d';
     rules += ' _pb';
     rules += ' __R-yksgrp';
     rules += ' -rwx0fg_e-b';
-    rules += ' -_375toq_k-br';
-    rules += ' -_375toq_k-q';
+    rules += ' -_375toq_k-j';
     return rules;
 };
 const $e33225559d5e019f$var$slider = function anonymous(props) {
@@ -151,8 +145,8 @@ const $e33225559d5e019f$var$slider = function anonymous(props) {
     else rules += ' ba_____z';
     rules += ' bd';
     rules += ' Ya';
-    rules += ' l4';
-    rules += ' k4';
+    rules += ' lG';
+    rules += ' kG';
     rules += ' Ua';
     rules += ' __na';
     rules += ' wa';
@@ -310,7 +304,7 @@ function $e33225559d5e019f$var$SegmentedControlItem(props, ref) {
                             style: (0, $2061c83559b50a66$exports.pressScale)(divRef)({
                                 isPressed: isPressed
                             }),
-                            className: " . __Q-3t1y _Zd iG ibH jG jbH _Oa _Q-375x7f _Ra _1c qa qba",
+                            className: " . __Q-3t1y _Zd iG ibH jG jbH _Oa _Q-375x7f _Ra _1c qa",
                             children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
                                 children: props.children
                             }) : props.children

package/dist/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["/*\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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: string | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: string,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: string) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: string,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.id === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props}\n      value={props.id}\n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["/*\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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: string | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: string,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: string) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: string,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.id === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props}\n      value={props.id}\n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}

package/dist/SegmentedControl.css

@@ -93,8 +93,8 @@
     --iconPrimary: currentColor;
   }
 
-  .-_375toq_k-q {
-    --k: 2rem;
+  .-_375toq_k-j {
+    --k: calc(2rem * var(--s2-scale));
   }
 
   ._La {
@@ -125,11 +125,11 @@
     left: 0;
   }
 
-  .l4 {
+  .lG {
     width: 100%;
   }
 
-  .k4 {
+  .kG {
     height: 100%;
   }
 
@@ -246,7 +246,7 @@
   }
 
   .qa {
-    min-width: 0;
+    min-width: calc(0rem * var(--s2-scale));
   }
 }
 
@@ -259,12 +259,12 @@
     line-height: 1.5;
   }
 
-  .C-1dz4pg9-6njx2e:has([slot="icon"]:only-child) {
-    padding-inline-start: .375rem;
+  .C-1dz4pg9-ve8p9e:has([slot="icon"]:only-child) {
+    padding-inline-start: calc(.375rem * var(--s2-scale));
   }
 
-  .D-1dz4pg9-6njx2e:has([slot="icon"]:only-child) {
-    padding-inline-end: .375rem;
+  .D-1dz4pg9-ve8p9e:has([slot="icon"]:only-child) {
+    padding-inline-end: calc(.375rem * var(--s2-scale));
   }
 }
 
@@ -328,10 +328,6 @@
       font-size: 1.375rem;
     }
 
-    .-_375toq_k-br {
-      --k: 2.5rem;
-    }
-
     .ibH {
       row-gap: .470588em;
     }
@@ -339,10 +335,6 @@
     .jbH {
       column-gap: .470588em;
     }
-
-    .qba {
-      min-width: 0;
-    }
   }
 }
 
@@ -382,18 +374,6 @@
   }
 }
 
-@layer _.c.b {
-  @media not ((hover: hover) and (pointer: fine)) {
-    .C-1dz4pg9b-1aa9md1:has([slot="icon"]:only-child) {
-      padding-inline-start: .46875rem;
-    }
-
-    .D-1dz4pg9b-1aa9md1:has([slot="icon"]:only-child) {
-      padding-inline-end: .46875rem;
-    }
-  }
-}
-
 .\.:not(#a#b) {
   all: revert-layer;
 }

package/dist/SegmentedControl.css.map

@@ -1 +1 @@
-{"mappings":"ACsDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6J+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7MxD;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;;AARK;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAQL;;;;IAqM6D;;;;IAAA;;;;IAAA;;;;;;AArM7D;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAmCL;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAnCK;EAAA;IAAA;;;;IAAA;;;;;;AAmCL","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: string | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: string,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: string) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: string,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.id === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props}\n      value={props.id}\n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}
+{"mappings":"ACsDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6J+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7MxD;EAAA;;;;EAAA;;;;EAQL;;;;EAAA;;;;;AARK;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA6MwD;;;;IAAA;;;;;;AArM7D;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAmCL;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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 {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: string | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: string,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: string) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: string,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style<{size: string}>({\n  font: 'control',\n  display: 'flex',\n  backgroundColor: 'gray-100',\n  borderRadius: 'lg',\n  width: 'full'\n}, getAllowedOverrides());\n\nconst controlItem = style({\n  position: 'relative',\n  display: 'flex',\n  forcedColorAdjust: 'none',\n  color: {\n    default: 'gray-700',\n    isHovered: 'neutral-subdued',\n    isSelected: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  // TODO: update this padding for icon-only items when we introduce the non-track style back\n  paddingX: {\n    default: 'edge-to-text',\n    ':has([slot=icon]:only-child)': size(6)\n  },\n  height: 32,\n  alignItems: 'center',\n  flexBasis: 0,\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n}, getAllowedOverrides());\n\nconst slider = style({\n  ...focusRing(),\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: string, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: string | null,\n  value?: string | null,\n  children?: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\nfunction SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (value: string) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n    \n    if (onSelectionChange) {\n      onSelectionChange(value);\n    }\n  };\n\n  return (\n    <RadioGroup \n      {...props}\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </RadioGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(RadioGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: string) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.setSelectedValue(value);\n    }\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]\n      ]}> \n      {props.children}\n    </Provider>\n  );\n}\n\nfunction SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);\n  let state = useContext(RadioGroupStateContext);\n  let isSelected = props.id === state?.selectedValue;\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let isReduced = false;\n  if (window?.matchMedia) {\n    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected]);\n\n  return (\n    <Radio \n      {...props}\n      value={props.id}\n      ref={domRef} \n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >\n      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}\n          <Provider \n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({zIndex: 1, display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </Radio>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nconst _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);\nexport {_SegmentedControlItem as SegmentedControlItem};\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nconst _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);\nexport {_SegmentedControl as SegmentedControl};\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}

package/dist/SegmentedControl.mjs

@@ -71,7 +71,7 @@ const $c679c2152e03f8bf$var$segmentedControl = function anonymous(props, overrid
     rules += ' _wd';
     rules += ' _xd';
     rules += ' _yd';
-    if (!$l) rules += ' l4';
+    if (!$l) rules += ' lG';
     return rules;
 };
 const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
@@ -108,27 +108,21 @@ const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
         else if (props.isHovered) rules += ' an';
         else rules += ' am';
     } else rules += ' am';
-    rules += ' C-1dz4pg9b-1aa9md1';
-    rules += ' C-1dz4pg9-6njx2e';
+    rules += ' C-1dz4pg9-ve8p9e';
     rules += ' CI';
-    rules += ' D-1dz4pg9b-1aa9md1';
-    rules += ' D-1dz4pg9-6njx2e';
+    rules += ' D-1dz4pg9-ve8p9e';
     rules += ' DI';
     rules += ' k-375toq';
     rules += ' _1c';
     if (!$h) rules += ' ha';
     if (!$_9) rules += ' _9-3t1y';
     if (!$_8) rules += ' _8-3t1x';
-    if (!$q) {
-        rules += ' qba';
-        rules += ' qa';
-    }
+    if (!$q) rules += ' qa';
     rules += ' _2d';
     rules += ' _pb';
     rules += ' __R-yksgrp';
     rules += ' -rwx0fg_e-b';
-    rules += ' -_375toq_k-br';
-    rules += ' -_375toq_k-q';
+    rules += ' -_375toq_k-j';
     return rules;
 };
 const $c679c2152e03f8bf$var$slider = function anonymous(props) {
@@ -143,8 +137,8 @@ const $c679c2152e03f8bf$var$slider = function anonymous(props) {
     else rules += ' ba_____z';
     rules += ' bd';
     rules += ' Ya';
-    rules += ' l4';
-    rules += ' k4';
+    rules += ' lG';
+    rules += ' kG';
     rules += ' Ua';
     rules += ' __na';
     rules += ' wa';
@@ -302,7 +296,7 @@ function $c679c2152e03f8bf$var$SegmentedControlItem(props, ref) {
                             style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(divRef)({
                                 isPressed: isPressed
                             }),
-                            className: " . __Q-3t1y _Zd iG ibH jG jbH _Oa _Q-375x7f _Ra _1c qa qba",
+                            className: " . __Q-3t1y _Zd iG ibH jG jbH _Oa _Q-375x7f _Ra _1c qa",
                             children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
                                 children: props.children
                             }) : props.children