@react-spectrum/s2 0.5.0 → 0.6.0

package/dist/ColorField.css

@@ -3,74 +3,74 @@
 }
 
 @layer _.a {
-  ._Zf {
+  ._0f {
     display: grid;
   }
 
-  .__a-3t1y {
+  .__b-3t1y {
     grid-column-start: 1;
   }
 
-  .__b-7u9dhl {
+  .__c-yqnebx {
     grid-column-end: span 2;
   }
 
-  .__h-375yi6 {
+  .__i-2wzs0i {
     grid-template-columns: 1fr;
   }
 
-  .__h-jyg4vb {
+  .__i-ar5vcf {
     grid-template-columns: auto 1fr;
   }
 
-  .__h-1cwd7ud {
+  .__i-1a97rzt {
     grid-template-columns: subgrid;
   }
 
-  .__i-fdenls {
+  .__j-1a6w430 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .__i-jyg4vb {
+  .__j-ar5vcf {
     grid-template-rows: auto 1fr;
   }
 
-  .__j-xlaqir {
+  .__k-1srn173 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .__j-5eez8j {
+  .__k-18h2yqz {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  ._de {
+  ._ee {
     font-size: .875rem;
   }
 
-  ._da {
+  ._ea {
     font-size: .6875rem;
   }
 
-  ._dc {
+  ._ec {
     font-size: .75rem;
   }
 
-  ._dg {
+  ._eg {
     font-size: 1rem;
   }
 
-  ._di {
+  ._ei {
     font-size: 1.125rem;
   }
 
-  ._1d {
+  ._2d {
     align-items: baseline;
   }
 
-  ._fa {
+  ._ga {
     line-height: 1.3;
   }
 
@@ -102,13 +102,13 @@
     column-gap: .75rem;
   }
 
-  .__R-yksgrp {
+  .__S-yksgrp {
     -webkit-tap-highlight-color: #0000;
   }
 }
 
 @layer _.b {
-  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 }
@@ -117,23 +117,23 @@
 
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    ._dbf {
+    ._ebf {
       font-size: 1.0625rem;
     }
 
-    ._dbb {
+    ._ebb {
       font-size: .8125rem;
     }
 
-    ._dbd {
+    ._ebd {
       font-size: .9375rem;
     }
 
-    ._dbh {
+    ._ebh {
       font-size: 1.1875rem;
     }
 
-    ._dbj {
+    ._ebj {
       font-size: 1.375rem;
     }
   }

package/dist/ColorField.css.map

@@ -1 +1 @@
-{"mappings":"AA2EoC;;;;AAAA;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;;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<ColorFieldProps, TextFieldRef>>(null);\n\nfunction 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\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nconst _ColorField = forwardRef(ColorField);\nexport {_ColorField as ColorField};\n"],"names":[],"version":3,"file":"ColorField.css.map"}
+{"mappings":"AA8EoC;;;;AAAA;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;;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<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"}

package/dist/ColorField.mjs

@@ -4,7 +4,7 @@ import {FormContext as $9b916426527cebe7$export$c24727297075ec6a, useFormProps a
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $Y0ll1$jsx, jsxs as $Y0ll1$jsxs, Fragment as $Y0ll1$Fragment} from "react/jsx-runtime";
 import {ColorField as $Y0ll1$ColorField} from "react-aria-components";
-import {createContext as $Y0ll1$createContext, useContext as $Y0ll1$useContext, useRef as $Y0ll1$useRef, useImperativeHandle as $Y0ll1$useImperativeHandle, forwardRef as $Y0ll1$forwardRef} from "react";
+import {createContext as $Y0ll1$createContext, forwardRef as $Y0ll1$forwardRef, useContext as $Y0ll1$useContext, useRef as $Y0ll1$useRef, useImperativeHandle as $Y0ll1$useImperativeHandle} from "react";
 import {createFocusableRef as $Y0ll1$createFocusableRef} from "@react-spectrum/utils";
 
 /*
@@ -25,7 +25,7 @@ import {createFocusableRef as $Y0ll1$createFocusableRef} from "@react-spectrum/u
 
 
 const $9c5ed7ec0bc126af$export$44644b8a16031b5b = /*#__PURE__*/ (0, $Y0ll1$createContext)(null);
-function $9c5ed7ec0bc126af$var$ColorField(props, ref) {
+const $9c5ed7ec0bc126af$export$b865d4358897bb17 = /*#__PURE__*/ (0, $Y0ll1$forwardRef)(function ColorField(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $9c5ed7ec0bc126af$export$44644b8a16031b5b);
     let formContext = (0, $Y0ll1$useContext)((0, $9b916426527cebe7$export$c24727297075ec6a));
     props = (0, $9b916426527cebe7$export$a6b5be5c6b451665)(props);
@@ -48,51 +48,51 @@ function $9c5ed7ec0bc126af$var$ColorField(props, ref) {
         style: UNSAFE_style,
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
             rules += matches.join('');
-            let $__a = false;
             let $__b = false;
+            let $__c = false;
             for (let p of matches){
-                if (/^\s*__a/.test(p)) $__a = true;
                 if (/^\s*__b/.test(p)) $__b = true;
+                if (/^\s*__c/.test(p)) $__c = true;
             }
-            rules += ' _Zf';
-            if (!$__a) {
-                if (props.isInForm) rules += ' __a-3t1y';
-            }
+            rules += ' _0f';
             if (!$__b) {
+                if (props.isInForm) rules += ' __b-3t1y';
+            }
+            if (!$__c) {
                 if (props.isInForm) {
-                    if (props.labelPosition === "side") rules += ' __b-7u9dhl';
+                    if (props.labelPosition === "side") rules += ' __c-yqnebx';
                 }
             }
-            if (props.isInForm) rules += ' __h-1cwd7ud';
+            if (props.isInForm) rules += ' __i-1a97rzt';
             else {
-                if (props.labelPosition === "side") rules += ' __h-jyg4vb';
-                else if (props.labelPosition === "top") rules += ' __h-375yi6';
+                if (props.labelPosition === "side") rules += ' __i-ar5vcf';
+                else if (props.labelPosition === "top") rules += ' __i-2wzs0i';
             }
-            if (props.labelPosition === "side") rules += ' __i-jyg4vb';
-            else if (props.labelPosition === "top") rules += ' __i-fdenls';
-            if (props.labelPosition === "side") rules += ' __j-5eez8j';
-            else if (props.labelPosition === "top") rules += ' __j-xlaqir';
+            if (props.labelPosition === "side") rules += ' __j-ar5vcf';
+            else if (props.labelPosition === "top") rules += ' __j-1a6w430';
+            if (props.labelPosition === "side") rules += ' __k-18h2yqz';
+            else if (props.labelPosition === "top") rules += ' __k-1srn173';
             if (props.size === "XL") {
-                rules += ' _dbj';
-                rules += ' _di';
+                rules += ' _ebj';
+                rules += ' _ei';
             } else if (props.size === "L") {
-                rules += ' _dbh';
-                rules += ' _dg';
+                rules += ' _ebh';
+                rules += ' _eg';
             } else if (props.size === "S") {
-                rules += ' _dbd';
-                rules += ' _dc';
+                rules += ' _ebd';
+                rules += ' _ec';
             } else if (props.size === "XS") {
-                rules += ' _dbb';
-                rules += ' _da';
+                rules += ' _ebb';
+                rules += ' _ea';
             } else {
-                rules += ' _dbf';
-                rules += ' _de';
+                rules += ' _ebf';
+                rules += ' _ee';
             }
-            rules += ' _1d';
-            rules += ' _f-1x99dlob';
-            rules += ' _fa';
+            rules += ' _2d';
+            rules += ' _g-1x99dlob';
+            rules += ' _ga';
             if (props.size === "XL") rules += ' -aqrvqh_k-j';
             else if (props.size === "L") rules += ' -aqrvqh_k-i';
             else if (props.size === "S") rules += ' -aqrvqh_k-h';
@@ -100,7 +100,7 @@ function $9c5ed7ec0bc126af$var$ColorField(props, ref) {
             else rules += ' -aqrvqh_k-f';
             rules += ' -_1inj1bc_i--prjw07';
             rules += ' je';
-            rules += ' __R-yksgrp';
+            rules += ' __S-yksgrp';
             return rules;
         }({
             size: props.size,
@@ -143,10 +143,7 @@ function $9c5ed7ec0bc126af$var$ColorField(props, ref) {
                 ]
             })
     });
-}
-/**
- * A color field allows users to edit a hex color or individual color channel value.
- */ const $9c5ed7ec0bc126af$export$b865d4358897bb17 = /*#__PURE__*/ (0, $Y0ll1$forwardRef)($9c5ed7ec0bc126af$var$ColorField);
+});
 
 
 export {$9c5ed7ec0bc126af$export$44644b8a16031b5b as ColorFieldContext, $9c5ed7ec0bc126af$export$b865d4358897bb17 as ColorField};

package/dist/ColorField.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA0BM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAA+C;AAE5F,SAAS,iCAAW,KAAsB,EAAE,GAAsB;IAChE,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;AAEA;;CAEC,GACD,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE","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<ColorFieldProps, TextFieldRef>>(null);\n\nfunction 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\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nconst _ColorField = forwardRef(ColorField);\nexport {_ColorField as ColorField};\n"],"names":[],"version":3,"file":"ColorField.mjs.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA0BM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAA+C;AAKrF,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<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"}

package/dist/ColorHandle.cjs

@@ -35,19 +35,19 @@ function $5b07976eb9e358fe$export$92862704de639678({ containerRef: containerRef,
     return /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)((0, $8hzuN$reactariacomponents.ColorThumb), {
         className: function anonymous(props) {
             let rules = " .";
-            rules += ' _O-1oihi8a';
-            rules += ' _Q-375x7f';
-            rules += ' _Ra';
+            rules += ' _P-1oihi8a';
+            rules += ' _R-375x7f';
+            rules += ' _Sa';
             if (props.isFocusVisible) rules += ' lU';
             else rules += ' lE';
             if (props.isFocusVisible) rules += ' kU';
             else rules += ' kE';
             if (props.isDisabled) rules += ' bg';
-            rules += ' _vf';
             rules += ' _wf';
             rules += ' _xf';
             rules += ' _yf';
-            rules += ' __na';
+            rules += ' _zf';
+            rules += ' __oa';
             rules += ' wa';
             rules += ' uc';
             rules += ' vc';
@@ -55,9 +55,9 @@ function $5b07976eb9e358fe$export$92862704de639678({ containerRef: containerRef,
             rules += ' tc';
             if (props.isDisabled) rules += ' ci';
             else rules += ' cc';
-            rules += ' _Lb';
-            rules += ' _Nb';
-            rules += ' da_____v';
+            rules += ' _Mb';
+            rules += ' _Ob';
+            rules += ' da_____I';
             rules += ' db42';
             return rules;
         },
@@ -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: " . lb kb _vf _wf _xf _yf __na wa ub vb sb tb cb42 ca_____v"
+                        className: " . lb kb _wf _xf _yf _zf __oa wa ub vb sb tb cb42 ca_____I"
                     }),
                     /*#__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: " . _ub __Ba _T-375x4t _Wb _Ya __Fa",
+        className: " . _vb __Ca _U-375x4t _Xb _Za __Ga",
         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: " . xb f_____n fa_____x eA",
+                className: " . xb f_____n fa_____K eA",
                 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,13 +1,13 @@
 @layer _.a {
-  ._O-1oihi8a {
+  ._P-1oihi8a {
     transition-property: width, height;
   }
 
-  ._Q-375x7f {
+  ._R-375x7f {
     transition-duration: .15s;
   }
 
-  ._Ra {
+  ._Sa {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
@@ -55,11 +55,11 @@
     border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  ._Lb {
+  ._Mb {
     outline-style: solid;
   }
 
-  ._Nb {
+  ._Ob {
     outline-width: 1px;
   }
 
@@ -75,23 +75,23 @@
     height: 100%;
   }
 
-  ._vf {
+  ._wf {
     border-start-start-radius: 9999px;
   }
 
-  ._wf {
+  ._xf {
     border-start-end-radius: 9999px;
   }
 
-  ._xf {
+  ._yf {
     border-end-start-radius: 9999px;
   }
 
-  ._yf {
+  ._zf {
     border-end-end-radius: 9999px;
   }
 
-  .__na {
+  .__oa {
     box-sizing: border-box;
   }
 
@@ -119,27 +119,27 @@
     border-color: #0000006b;
   }
 
-  ._ub {
+  ._vb {
     filter: drop-shadow(0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a));
   }
 
-  .__Ba {
+  .__Ca {
     pointer-events: none;
   }
 
-  ._T-375x4t {
+  ._U-375x4t {
     animation-duration: .125s;
   }
 
-  ._Wb {
+  ._Xb {
     animation-fill-mode: forwards;
   }
 
-  ._Ya {
+  ._Za {
     animation-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .__Fa {
+  .__Ga {
     isolation: isolate;
   }
 
@@ -160,15 +160,15 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____v {
+    .da_____I {
       outline-color: buttonborder;
     }
 
-    .ca_____v {
+    .ca_____I {
       border-color: buttonborder;
     }
 
-    .fa_____x {
+    .fa_____K {
       stroke: buttonborder;
     }
   }

package/dist/ColorHandle.mjs

@@ -29,19 +29,19 @@ function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef,
     return /*#__PURE__*/ (0, $kShzN$jsx)((0, $kShzN$ColorThumb), {
         className: function anonymous(props) {
             let rules = " .";
-            rules += ' _O-1oihi8a';
-            rules += ' _Q-375x7f';
-            rules += ' _Ra';
+            rules += ' _P-1oihi8a';
+            rules += ' _R-375x7f';
+            rules += ' _Sa';
             if (props.isFocusVisible) rules += ' lU';
             else rules += ' lE';
             if (props.isFocusVisible) rules += ' kU';
             else rules += ' kE';
             if (props.isDisabled) rules += ' bg';
-            rules += ' _vf';
             rules += ' _wf';
             rules += ' _xf';
             rules += ' _yf';
-            rules += ' __na';
+            rules += ' _zf';
+            rules += ' __oa';
             rules += ' wa';
             rules += ' uc';
             rules += ' vc';
@@ -49,9 +49,9 @@ function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef,
             rules += ' tc';
             if (props.isDisabled) rules += ' ci';
             else rules += ' cc';
-            rules += ' _Lb';
-            rules += ' _Nb';
-            rules += ' da_____v';
+            rules += ' _Mb';
+            rules += ' _Ob';
+            rules += ' da_____I';
             rules += ' db42';
             return rules;
         },
@@ -64,7 +64,7 @@ function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef,
         children: ({ isDragging: isDragging, color: color })=>/*#__PURE__*/ (0, $kShzN$jsxs)((0, $kShzN$Fragment), {
                 children: [
                     /*#__PURE__*/ (0, $kShzN$jsx)("div", {
-                        className: " . lb kb _vf _wf _xf _yf __na wa ub vb sb tb cb42 ca_____v"
+                        className: " . lb kb _wf _xf _yf _zf __oa wa ub vb sb tb cb42 ca_____I"
                     }),
                     /*#__PURE__*/ (0, $kShzN$jsx)($b4f7db7c45cd3de9$var$ColorLoupePortal, {
                         isOpen: isDragging,
@@ -125,7 +125,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
             marginLeft: -$b4f7db7c45cd3de9$var$LOUPE_WIDTH / 2 - $b4f7db7c45cd3de9$var$LOUPE_BORDER_WIDTH,
             animationName: isExiting ? exitAnimation : enterAnimation
         },
-        className: " . _ub __Ba _T-375x4t _Wb _Ya __Fa",
+        className: " . _vb __Ca _U-375x4t _Xb _Za __Ga",
         onAnimationEnd: (e)=>{
             if (e.animationName === exitAnimation) onExited();
         },
@@ -174,7 +174,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $kShzN$jsx)("path", {
-                className: " . xb f_____n fa_____x eA",
+                className: " . xb f_____n fa_____K eA",
                 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"
             })
         ]