@react-spectrum/s2 0.9.2 → 0.10.1

package/dist/ColorField.css

@@ -1,135 +1,121 @@
 @layer _.a {
-  .se91 {
+  .se11 {
     display: grid;
   }
 
-  .z2mU91 {
+  .z2mU11 {
     grid-column-start: 1;
   }
 
-  .yvoofG91 {
+  .yvoofG11 {
     grid-column-end: span 2;
   }
 
-  .DM8Mfn91 {
+  .DM8Mfn11 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb91 {
+  .DPlN5qb11 {
     grid-template-columns: auto 1fr;
   }
 
-  .DLwlgod91 {
+  .DLwlgod11 {
     grid-template-columns: subgrid;
   }
 
-  .E4w1sLc91 {
+  .E4w1sLc11 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .EPlN5qb91 {
+  .EPlN5qb11 {
     grid-template-rows: auto 1fr;
   }
 
-  .Cxaocre91 {
+  .Cxaocre11 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .CbRM95c91 {
+  .CbRM95c11 {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  .vd91 {
-    font-size: .875rem;
+  .-_6BNtrc-c11 {
+    --fs: pow(1.125, 0);
   }
 
-  .va91 {
-    font-size: .6875rem;
+  .-_6BNtrc-a11 {
+    --fs: pow(1.125, -2);
   }
 
-  .vb91 {
-    font-size: .75rem;
+  .-_6BNtrc-b11 {
+    --fs: pow(1.125, -1);
   }
 
-  .vp91 {
-    font-size: 1rem;
+  .-_6BNtrc-d11 {
+    --fs: pow(1.125, 1);
   }
 
-  .vg91 {
-    font-size: 1.125rem;
+  .-_6BNtrc-e11 {
+    --fs: pow(1.125, 2);
   }
 
-  .ea91 {
+  .vx11 {
+    font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
+  }
+
+  .ea11 {
     align-items: baseline;
   }
 
-  ._Fa91 {
-    line-height: 1.3;
+  ._Fd11 {
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .-BhX7R-Fx91 {
+  .-BhX7R-Fx11 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn91 {
+  .-BhX7R-Fn11 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp91 {
+  .-BhX7R-Fp11 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv91 {
+  .-BhX7R-Fv11 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz91 {
+  .-BhX7R-Fz11 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UVkF0Db91 {
+  .-AJjOLd-UVkF0Db11 {
     --field-gap: calc((var(--field-height)  - var(--_k, 0px)  - var(--h, 0px)  - 1lh) / 2);
   }
 
-  .qg91 {
+  .qg11 {
     column-gap: .75rem;
   }
 
-  .__ca91 {
+  .__ca11 {
     -webkit-tap-highlight-color: #0000;
   }
 }
 
 @layer _.b {
-  ._Ffb91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
-    line-height: 1.5;
+  ._FezxGHba11:is(:lang(ar), :lang(he)) {
+    line-height: 1.3;
   }
 }
 
-@layer _.b.s {
-  @media not ((hover: hover) and (pointer: fine)) {
-    .vsf91 {
-      font-size: 1.0625rem;
-    }
-
-    .vsc91 {
-      font-size: .8125rem;
-    }
-
-    .vse91 {
-      font-size: .9375rem;
-    }
-
-    .vsh91 {
-      font-size: 1.1875rem;
-    }
-
-    .vsj91 {
-      font-size: 1.375rem;
-    }
+@layer _.c {
+  ._FnuYUweb11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    line-height: 1.5;
   }
 }
 /*# sourceMappingURL=ColorField.css.map */

package/dist/ColorField.css.map

@@ -1 +1 @@
-{"mappings":"AA8EoC;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;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\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 {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\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_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <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 role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.css.map"}
+{"mappings":"AA8EoC;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;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\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 {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\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_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <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 size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.css.map"}

package/dist/ColorField.mjs

@@ -56,51 +56,52 @@ const $9c5ed7ec0bc126af$export$b865d4358897bb17 = /*#__PURE__*/ (0, $Y0ll1$forwa
                 if (p[1] === "y") gridColumnEnd = true;
                 rules += p[0];
             }
-            rules += ' se91';
+            rules += ' se11';
             if (props.isInForm) {
-                if (!gridColumnStart) rules += ' z2mU91';
+                if (!gridColumnStart) rules += ' z2mU11';
             }
             if (props.isInForm) {
                 if (props.labelPosition === "side") {
-                    if (!gridColumnEnd) rules += ' yvoofG91';
+                    if (!gridColumnEnd) rules += ' yvoofG11';
                 }
             }
-            if (props.isInForm) rules += ' DLwlgod91';
+            if (props.isInForm) rules += ' DLwlgod11';
             else {
-                if (props.labelPosition === "side") rules += ' DPlN5qb91';
-                else if (props.labelPosition === "top") rules += ' DM8Mfn91';
+                if (props.labelPosition === "side") rules += ' DPlN5qb11';
+                else if (props.labelPosition === "top") rules += ' DM8Mfn11';
             }
-            if (props.labelPosition === "side") rules += ' EPlN5qb91';
-            else if (props.labelPosition === "top") rules += ' E4w1sLc91';
-            if (props.labelPosition === "side") rules += ' CbRM95c91';
-            else if (props.labelPosition === "top") rules += ' Cxaocre91';
+            if (props.labelPosition === "side") rules += ' EPlN5qb11';
+            else if (props.labelPosition === "top") rules += ' E4w1sLc11';
+            if (props.labelPosition === "side") rules += ' CbRM95c11';
+            else if (props.labelPosition === "top") rules += ' Cxaocre11';
             if (props.size === "XL") {
-                rules += ' vg91';
-                rules += ' vsj91';
+                rules += ' -_6BNtrc-e11';
+                rules += ' vx11';
             } else if (props.size === "L") {
-                rules += ' vp91';
-                rules += ' vsh91';
+                rules += ' -_6BNtrc-d11';
+                rules += ' vx11';
             } else if (props.size === "S") {
-                rules += ' vb91';
-                rules += ' vse91';
+                rules += ' -_6BNtrc-b11';
+                rules += ' vx11';
             } else if (props.size === "XS") {
-                rules += ' va91';
-                rules += ' vsc91';
+                rules += ' -_6BNtrc-a11';
+                rules += ' vx11';
             } else {
-                rules += ' vd91';
-                rules += ' vsf91';
+                rules += ' -_6BNtrc-c11';
+                rules += ' vx11';
             }
-            rules += ' ea91';
-            rules += ' _Fa91';
-            rules += ' _Ffb91';
-            if (props.size === "XL") rules += ' -BhX7R-Fz91';
-            else if (props.size === "L") rules += ' -BhX7R-Fv91';
-            else if (props.size === "S") rules += ' -BhX7R-Fp91';
-            else if (props.size === "XS") rules += ' -BhX7R-Fn91';
-            else rules += ' -BhX7R-Fx91';
-            rules += ' -AJjOLd-UVkF0Db91';
-            rules += ' qg91';
-            rules += ' __ca91';
+            rules += ' ea11';
+            rules += ' _Fd11';
+            rules += ' _FezxGHba11';
+            rules += ' _FnuYUweb11';
+            if (props.size === "XL") rules += ' -BhX7R-Fz11';
+            else if (props.size === "L") rules += ' -BhX7R-Fv11';
+            else if (props.size === "S") rules += ' -BhX7R-Fp11';
+            else if (props.size === "XS") rules += ' -BhX7R-Fn11';
+            else rules += ' -BhX7R-Fx11';
+            rules += ' -AJjOLd-UVkF0Db11';
+            rules += ' qg11';
+            rules += ' __ca11';
             return rules;
         }({
             size: props.size,
@@ -120,9 +121,6 @@ const $9c5ed7ec0bc126af$export$b865d4358897bb17 = /*#__PURE__*/ (0, $Y0ll1$forwa
                         children: label
                     }),
                     /*#__PURE__*/ (0, $Y0ll1$jsxs)((0, $9afd80978c252040$export$f0fe469072bc6950), {
-                        role: "presentation",
-                        isDisabled: isDisabled,
-                        isInvalid: isInvalid,
                         size: props.size,
                         children: [
                             /*#__PURE__*/ (0, $Y0ll1$jsx)((0, $9afd80978c252040$export$f5b8910cec6cf069), {

package/dist/ColorField.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA0BM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAAwD;AAK9F,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAsB;IACrG,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,uBACb,YAAY,oBACZ,mBAAmB,YACnB,MAAM,EACN,GAAG,YACJ,GAAG;IAEJ,sCAAsC;IACtC,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,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,iBAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBAAM;;kCAC7B,gBAAC,CAAA,GAAA,yCAAS;wBACR,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;wBAAE,MAAK;wBAAe,YAAY;wBAAY,WAAW;wBAAW,MAAM,MAAM,IAAI;;0CAC5F,gBAAC,CAAA,GAAA,yCAAI;gCAAE,KAAK;;4BACX,2BAAa,gBAAC,CAAA,GAAA,yCAAa;gCAAE,YAAY;;;;kCAE5C,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\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 {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\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_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <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 role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.mjs.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA0BM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAAwD;AAK9F,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAsB;IACrG,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,uBACb,YAAY,oBACZ,mBAAmB,YACnB,MAAM,EACN,GAAG,YACJ,GAAG;IAEJ,sCAAsC;IACtC,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,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,iBAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBAAM;;kCAC7B,gBAAC,CAAA,GAAA,yCAAS;wBACR,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;wBAAE,MAAM,MAAM,IAAI;;0CAC1B,gBAAC,CAAA,GAAA,yCAAI;gCAAE,KAAK;;4BACX,2BAAa,gBAAC,CAAA,GAAA,yCAAa;gCAAE,YAAY;;;;kCAE5C,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\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 {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\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_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <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 size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.mjs.map"}

package/dist/ColorHandle.cjs

@@ -35,30 +35,30 @@ function $5b07976eb9e358fe$export$92862704de639678({ containerRef: containerRef,
     return /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)((0, $8hzuN$reactariacomponents.ColorThumb), {
         className: function anonymous(props) {
             let rules = " ";
-            rules += ' YEw2M9d91';
-            rules += ' Xb91';
-            rules += ' _2b91';
-            if (props.isFocusVisible) rules += ' ZC91';
-            else rules += ' Zu91';
-            if (props.isFocusVisible) rules += ' Fx91';
-            else rules += ' Ft91';
-            if (props.isDisabled) rules += ' gH91';
-            rules += ' og91';
-            rules += ' ng91';
-            rules += ' kg91';
-            rules += ' jg91';
-            rules += ' _oa91';
-            rules += ' _jf91';
-            rules += ' _kc91';
-            rules += ' hc91';
-            rules += ' mc91';
-            rules += ' lc91';
-            if (props.isDisabled) rules += ' iq91';
-            else rules += ' iB91';
-            rules += ' _Lf91';
-            rules += ' _Mb91';
-            rules += ' O1lWhre91';
-            rules += ' Ola91';
+            rules += ' YEw2M9d11';
+            rules += ' Xb11';
+            rules += ' _2b11';
+            if (props.isFocusVisible) rules += ' ZC11';
+            else rules += ' Zu11';
+            if (props.isFocusVisible) rules += ' Fx11';
+            else rules += ' Ft11';
+            if (props.isDisabled) rules += ' gH11';
+            rules += ' og11';
+            rules += ' ng11';
+            rules += ' kg11';
+            rules += ' jg11';
+            rules += ' _oa11';
+            rules += ' _jf11';
+            rules += ' _kc11';
+            rules += ' hc11';
+            rules += ' mc11';
+            rules += ' lc11';
+            if (props.isDisabled) rules += ' iq11';
+            else rules += ' iB11';
+            rules += ' _Lf11';
+            rules += ' _Mb11';
+            rules += ' O1lWhre11';
+            rules += ' Ola11';
             return rules;
         },
         style: ({ defaultStyle: defaultStyle, isDisabled: isDisabled })=>({
@@ -70,7 +70,7 @@ function $5b07976eb9e358fe$export$92862704de639678({ containerRef: containerRef,
         children: ({ isDragging: isDragging, color: color })=>/*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsxs)((0, $8hzuN$reactjsxruntime.Fragment), {
                 children: [
                     /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)("div", {
-                        className: " Za91 Fb91 og91 ng91 kg91 jg91 _oa91 _jf91 _kb91 hb91 mb91 lb91 i1lWhre91 ila91"
+                        className: " Za11 Fb11 og11 ng11 kg11 jg11 _oa11 _jf11 _kb11 hb11 mb11 lb11 i1lWhre11 ila11"
                     }),
                     /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)($5b07976eb9e358fe$var$ColorLoupePortal, {
                         isOpen: isDragging,
@@ -131,7 +131,7 @@ function $5b07976eb9e358fe$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
             marginLeft: -$5b07976eb9e358fe$var$LOUPE_WIDTH / 2 - $5b07976eb9e358fe$var$LOUPE_BORDER_WIDTH,
             animationName: isExiting ? exitAnimation : enterAnimation
         },
-        className: " _rb91 _Ob91 _eb91 _fc91 _hb91 _Bb91",
+        className: " _rb11 _Ob11 _eb11 _fc11 _hb11 _Bb11",
         onAnimationEnd: (e)=>{
             if (e.animationName === exitAnimation) onExited();
         },
@@ -180,7 +180,7 @@ function $5b07976eb9e358fe$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)("path", {
-                className: " _Vb91 Vi91 Vlb91 tw91",
+                className: " _Vb11 Vi11 Vlb11 tw11",
                 d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
             })
         ]

package/dist/ColorHandle.css

@@ -1,157 +1,157 @@
 @layer _.a {
-  .YEw2M9d91 {
+  .YEw2M9d11 {
     transition-property: width, height;
   }
 
-  .Xb91 {
+  .Xb11 {
     transition-duration: .15s;
   }
 
-  ._2b91 {
+  ._2b11 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .Zu91 {
+  .Zu11 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .ZC91 {
+  .ZC11 {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .Ft91 {
+  .Ft11 {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .Fx91 {
+  .Fx11 {
     height: calc(2rem * var(--s2-scale));
   }
 
-  .gH91 {
+  .gH11 {
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  ._kc91 {
+  ._kc11 {
     border-top-width: 2px;
   }
 
-  .hc91 {
+  .hc11 {
     border-bottom-width: 2px;
   }
 
-  .mc91 {
+  .mc11 {
     border-inline-start-width: 2px;
   }
 
-  .lc91 {
+  .lc11 {
     border-inline-end-width: 2px;
   }
 
-  .iB91 {
+  .iB11 {
     border-color: #fff;
   }
 
-  .iq91 {
+  .iq11 {
     border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  ._Lf91 {
+  ._Lf11 {
     outline-style: solid;
   }
 
-  ._Mb91 {
+  ._Mb11 {
     outline-width: 1px;
   }
 
-  .O1lWhre91 {
+  .O1lWhre11 {
     outline-color: #0000006b;
   }
 
-  .Za91 {
+  .Za11 {
     width: 100%;
   }
 
-  .Fb91 {
+  .Fb11 {
     height: 100%;
   }
 
-  .og91 {
+  .og11 {
     border-start-start-radius: 9999px;
   }
 
-  .ng91 {
+  .ng11 {
     border-start-end-radius: 9999px;
   }
 
-  .kg91 {
+  .kg11 {
     border-end-start-radius: 9999px;
   }
 
-  .jg91 {
+  .jg11 {
     border-end-end-radius: 9999px;
   }
 
-  ._oa91 {
+  ._oa11 {
     box-sizing: border-box;
   }
 
-  ._jf91 {
+  ._jf11 {
     border-style: solid;
   }
 
-  ._kb91 {
+  ._kb11 {
     border-top-width: 1px;
   }
 
-  .hb91 {
+  .hb11 {
     border-bottom-width: 1px;
   }
 
-  .mb91 {
+  .mb11 {
     border-inline-start-width: 1px;
   }
 
-  .lb91 {
+  .lb11 {
     border-inline-end-width: 1px;
   }
 
-  .i1lWhre91 {
+  .i1lWhre11 {
     border-color: #0000006b;
   }
 
-  ._rb91 {
+  ._rb11 {
     filter: drop-shadow(0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a));
   }
 
-  ._Ob91 {
+  ._Ob11 {
     pointer-events: none;
   }
 
-  ._eb91 {
+  ._eb11 {
     animation-duration: .125s;
   }
 
-  ._fc91 {
+  ._fc11 {
     animation-fill-mode: forwards;
   }
 
-  ._hb91 {
+  ._hb11 {
     animation-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  ._Bb91 {
+  ._Bb11 {
     isolation: isolate;
   }
 
-  ._Vb91 {
+  ._Vb11 {
     stroke-width: 1px;
   }
 
-  .Vi91 {
+  .Vi11 {
     stroke: #0000001f;
   }
 
-  .tw91 {
+  .tw11 {
     fill: #fff;
   }
 }
@@ -160,15 +160,15 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Ola91 {
+    .Ola11 {
       outline-color: buttonborder;
     }
 
-    .ila91 {
+    .ila11 {
       border-color: buttonborder;
     }
 
-    .Vlb91 {
+    .Vlb11 {
       stroke: buttonborder;
     }
   }