@adobe/react-spectrum 3.47.1 → 3.47.3

package/dist/private/circleloader_vars.css

@@ -1,38 +1,38 @@
 .bK8jfq_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
 
-.bK8jfq_i18nFontFamily:lang(ar) {
-  font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
+  &:lang(ar) {
+    font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.bK8jfq_i18nFontFamily:lang(he) {
-  font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
+  &:lang(he) {
+    font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.bK8jfq_i18nFontFamily:lang(zh) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
-}
+  &:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
 
-.bK8jfq_i18nFontFamily:lang(zh-Hans) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-Hans) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.bK8jfq_i18nFontFamily:lang(zh-Hant) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
-}
+  &:lang(zh-Hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
 
-.bK8jfq_i18nFontFamily:lang(zh-SG), .bK8jfq_i18nFontFamily:lang(zh-CN) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-SG), &:lang(zh-CN) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.bK8jfq_i18nFontFamily:lang(ko) {
-  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
-}
+  &:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
 
-.bK8jfq_i18nFontFamily:lang(ja) {
-  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  &:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
 }
 
 .bK8jfq_spectrum-FocusRing-ring {
@@ -41,42 +41,50 @@
   --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
   --spectrum-focus-ring-border-size: 0px;
   --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
-}
 
-.bK8jfq_spectrum-FocusRing-ring:after {
-  border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
-  content: "";
-  margin: calc(-1 * var(--spectrum-focus-ring-border-size));
-  pointer-events: none;
-  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
+  &:after {
+    border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
+    content: "";
+    margin: calc(-1 * var(--spectrum-focus-ring-border-size));
+    pointer-events: none;
+    transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
       margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
-  display: block;
-  position: absolute;
-  inset: 0;
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
 }
 
-.bK8jfq_spectrum-FocusRing.bK8jfq_focus-ring:after {
-  margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
-  box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+.bK8jfq_spectrum-FocusRing {
+  &.bK8jfq_focus-ring {
+    &:after {
+      margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
+      box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+    }
+  }
 }
 
-.bK8jfq_spectrum-FocusRing--quiet:after {
-  border-radius: 0;
-}
+.bK8jfq_spectrum-FocusRing--quiet {
+  &:after {
+    border-radius: 0;
+  }
 
-.bK8jfq_spectrum-FocusRing--quiet.bK8jfq_focus-ring:after {
-  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
+  &.bK8jfq_focus-ring {
+    &:after {
+      margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
         0;
-  box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+      box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+    }
+  }
 }
 
 @media (forced-colors: active) {
   .bK8jfq_spectrum-FocusRing, .bK8jfq_spectrum-FocusRing-ring, .bK8jfq_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
-  }
 
-  :is(.bK8jfq_spectrum-FocusRing, .bK8jfq_spectrum-FocusRing-ring, .bK8jfq_spectrum-FocusRing--quiet):after {
-    forced-color-adjust: none;
+    &:after {
+      forced-color-adjust: none;
+    }
   }
 }
 
@@ -636,46 +644,48 @@
 .bK8jfq_spectrum-CircleLoader--small {
   width: var(--spectrum-loader-circle-small-width, var(--spectrum-global-dimension-static-size-200));
   height: var(--spectrum-loader-circle-small-height, var(--spectrum-global-dimension-static-size-200));
-}
 
-.bK8jfq_spectrum-CircleLoader--small .bK8jfq_spectrum-CircleLoader-track, .bK8jfq_spectrum-CircleLoader--small .bK8jfq_spectrum-CircleLoader-fill {
-  width: calc(var(--spectrum-loader-circle-small-width, var(--spectrum-global-dimension-static-size-200)));
-  height: calc(var(--spectrum-loader-circle-small-height, var(--spectrum-global-dimension-static-size-200)));
-  border-style: solid;
-  border-width: var(--spectrum-loader-circle-small-border-size);
-  border-radius: var(--spectrum-loader-circle-small-width, var(--spectrum-global-dimension-static-size-200));
+  & .bK8jfq_spectrum-CircleLoader-track, & .bK8jfq_spectrum-CircleLoader-fill {
+    width: calc(var(--spectrum-loader-circle-small-width, var(--spectrum-global-dimension-static-size-200)));
+    height: calc(var(--spectrum-loader-circle-small-height, var(--spectrum-global-dimension-static-size-200)));
+    border-style: solid;
+    border-width: var(--spectrum-loader-circle-small-border-size);
+    border-radius: var(--spectrum-loader-circle-small-width, var(--spectrum-global-dimension-static-size-200));
+  }
 }
 
 .bK8jfq_spectrum-CircleLoader--large {
   width: var(--spectrum-loader-circle-large-width, var(--spectrum-global-dimension-size-800));
   height: var(--spectrum-loader-circle-large-height, var(--spectrum-global-dimension-size-800));
-}
 
-.bK8jfq_spectrum-CircleLoader--large .bK8jfq_spectrum-CircleLoader-track, .bK8jfq_spectrum-CircleLoader--large .bK8jfq_spectrum-CircleLoader-fill {
-  width: calc(var(--spectrum-loader-circle-large-width, var(--spectrum-global-dimension-size-800)));
-  height: calc(var(--spectrum-loader-circle-large-height, var(--spectrum-global-dimension-size-800)));
-  border-style: solid;
-  border-width: var(--spectrum-loader-circle-large-border-size, var(--spectrum-global-dimension-size-50));
-  border-radius: var(--spectrum-loader-circle-large-width, var(--spectrum-global-dimension-size-800));
+  & .bK8jfq_spectrum-CircleLoader-track, & .bK8jfq_spectrum-CircleLoader-fill {
+    width: calc(var(--spectrum-loader-circle-large-width, var(--spectrum-global-dimension-size-800)));
+    height: calc(var(--spectrum-loader-circle-large-height, var(--spectrum-global-dimension-size-800)));
+    border-style: solid;
+    border-width: var(--spectrum-loader-circle-large-border-size, var(--spectrum-global-dimension-size-50));
+    border-radius: var(--spectrum-loader-circle-large-width, var(--spectrum-global-dimension-size-800));
+  }
 }
 
-.bK8jfq_spectrum-CircleLoader--indeterminate .bK8jfq_spectrum-CircleLoader-fills {
-  will-change: transform;
-  transform-origin: center;
-  animation: 1s cubic-bezier(.25, .78, .48, .89) infinite bK8jfq_spectrum-fills-rotate;
-  transform: translateZ(0);
-}
+.bK8jfq_spectrum-CircleLoader--indeterminate {
+  & .bK8jfq_spectrum-CircleLoader-fills {
+    will-change: transform;
+    transform-origin: center;
+    animation: 1s cubic-bezier(.25, .78, .48, .89) infinite bK8jfq_spectrum-fills-rotate;
+    transform: translateZ(0);
+  }
 
-.bK8jfq_spectrum-CircleLoader--indeterminate .bK8jfq_spectrum-CircleLoader-fillSubMask1 {
-  will-change: transform;
-  animation: 1s linear infinite bK8jfq_spectrum-fill-mask-1;
-  transform: translateZ(0);
-}
+  & .bK8jfq_spectrum-CircleLoader-fillSubMask1 {
+    will-change: transform;
+    animation: 1s linear infinite bK8jfq_spectrum-fill-mask-1;
+    transform: translateZ(0);
+  }
 
-.bK8jfq_spectrum-CircleLoader--indeterminate .bK8jfq_spectrum-CircleLoader-fillSubMask2 {
-  will-change: transform;
-  animation: 1s linear infinite bK8jfq_spectrum-fill-mask-2;
-  transform: translateZ(0);
+  & .bK8jfq_spectrum-CircleLoader-fillSubMask2 {
+    will-change: transform;
+    animation: 1s linear infinite bK8jfq_spectrum-fill-mask-2;
+    transform: translateZ(0);
+  }
 }
 
 .bK8jfq_spectrum-CircleLoader {
@@ -692,20 +702,24 @@
   border-color: var(--spectrum-loader-circle-medium-track-fill-color, var(--spectrum-global-color-blue-500));
 }
 
-:is(.bK8jfq_spectrum-CircleLoader--overBackground, .bK8jfq_spectrum-CircleLoader--staticWhite) .bK8jfq_spectrum-CircleLoader-track {
-  border-color: var(--spectrum-loader-circle-medium-over-background-track-color, var(--spectrum-alias-track-color-over-background));
-}
+.bK8jfq_spectrum-CircleLoader--overBackground, .bK8jfq_spectrum-CircleLoader--staticWhite {
+  & .bK8jfq_spectrum-CircleLoader-track {
+    border-color: var(--spectrum-loader-circle-medium-over-background-track-color, var(--spectrum-alias-track-color-over-background));
+  }
 
-:is(.bK8jfq_spectrum-CircleLoader--overBackground, .bK8jfq_spectrum-CircleLoader--staticWhite) .bK8jfq_spectrum-CircleLoader-fill {
-  border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color, var(--spectrum-global-color-static-white));
+  & .bK8jfq_spectrum-CircleLoader-fill {
+    border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color, var(--spectrum-global-color-static-white));
+  }
 }
 
-.bK8jfq_spectrum-CircleLoader--staticBlack .bK8jfq_spectrum-CircleLoader-track {
-  border-color: var(--spectrum-loader-circle-static-black-track-color);
-}
+.bK8jfq_spectrum-CircleLoader--staticBlack {
+  & .bK8jfq_spectrum-CircleLoader-track {
+    border-color: var(--spectrum-loader-circle-static-black-track-color);
+  }
 
-.bK8jfq_spectrum-CircleLoader--staticBlack .bK8jfq_spectrum-CircleLoader-fill {
-  border-color: var(--spectrum-loader-circle-static-black-fill-color);
+  & .bK8jfq_spectrum-CircleLoader-fill {
+    border-color: var(--spectrum-loader-circle-static-black-fill-color);
+  }
 }
 
 @media (forced-colors: active) {

package/dist/private/circleloader_vars.css.map

@@ -1 +1 @@
-{"mappings":"AA4DA;;;;;AAKE;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAKA;;;;AAQA;;;;AAIA;;;;AAMF;;;;;;;;AAUE","sources":["packages/@adobe/spectrum-css-temp/components/circleloader/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"circleloader_vars.css.map"}
+{"mappings":"AA4DA;;;;EAKE;;;;EAKA;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAQA;;;;EAIA;;;;;AAMF;;;;;;;EAUE;;;;;;;;;;;;;EAsBE;;;;;;;;AAQF;;;;;EAKE","sources":["packages/@adobe/spectrum-css-temp/components/circleloader/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"circleloader_vars.css.map"}

package/dist/private/color/ColorEditor.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,qBAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAE1D,qBACE,0DAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,0DAAC;QAAI,WAAW;;;;;;;qBACd,0DAAC,CAAA,GAAA,mCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,0DAAC,CAAA,GAAA,qCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBAAI,0DAAC,CAAA,GAAA,qCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAEvE,0DAAC;QAAI,WAAW;;;;;;;qBACd,0DAAC,CAAA,GAAA,gCAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,0DAAC,CAAA,GAAA,4BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,4BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,4BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,4BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACV,0DAAC,CAAA,GAAA,oCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SAEnE,CAAA,GAAA,yCAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC3B,0DAAC,CAAA,GAAA,oCAAS;YACR,KAAK;YACL,YAAY;YACZ,SAAS;YACT,SAAA;YACA,OAAM;YACN,MAAA;YACA,cAAc;gBAAC,kCAAkC;YAAC;aAIvD,CAAC,MAAM,gBAAgB,kBACtB,0DAAC,CAAA,GAAA,oCAAS;QACR,SAAQ;QACR,SAAA;QACA,OAAM;QACN,MAAA;QACA,cAAc;YAAC,kCAAkC;QAAC;;AAM9D","sources":["packages/@adobe/react-spectrum/src/color/ColorEditor.tsx"],"sourcesContent":["import {ColorArea} from './ColorArea';\nimport {ColorField} from './ColorField';\nimport {ColorSlider} from './ColorSlider';\nimport {ColorSpace, getColorChannels} from 'react-stately/Color';\nimport {DOMRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../../intl/color/*.json';\nimport {Item} from 'react-stately/Item';\nimport {Picker} from '../picker/Picker';\nimport React, {CSSProperties, useState} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface SpectrumColorEditorProps {\n  /** Whether to hide the alpha channel color slider and color field. */\n  hideAlphaChannel?: boolean;\n}\n\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function ColorEditor(\n  props: SpectrumColorEditorProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');\n  let domRef = useDOMRef(ref);\n  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');\n\n  return (\n    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n        <ColorSlider colorSpace=\"hsb\" channel=\"hue\" orientation=\"vertical\" />\n        {!props.hideAlphaChannel && <ColorSlider channel=\"alpha\" orientation=\"vertical\" />}\n      </div>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <Picker\n          aria-label={formatter.format('colorFormat')}\n          isQuiet\n          width=\"size-700\"\n          menuWidth=\"size-1000\"\n          selectedKey={format}\n          onSelectionChange={f => setFormat(f as typeof format)}>\n          <Item key=\"hex\">{formatter.format('hex')}</Item>\n          <Item key=\"rgb\">{formatter.format('rgb')}</Item>\n          <Item key=\"hsl\">{formatter.format('hsl')}</Item>\n          <Item key=\"hsb\">{formatter.format('hsb')}</Item>\n        </Picker>\n        {format === 'hex' ? (\n          <ColorField isQuiet width=\"size-1000\" aria-label={formatter.format('hex')} />\n        ) : (\n          getColorChannels(format).map(channel => (\n            <ColorField\n              key={channel}\n              colorSpace={format}\n              channel={channel}\n              isQuiet\n              width=\"size-400\"\n              flex\n              UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n            />\n          ))\n        )}\n        {!props.hideAlphaChannel && (\n          <ColorField\n            channel=\"alpha\"\n            isQuiet\n            width=\"size-400\"\n            flex\n            UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorEditor.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,qBAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAE1D,qBACE,0DAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,0DAAC;QAAI,WAAW;;;;;;;qBACd,0DAAC,CAAA,GAAA,mCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,0DAAC,CAAA,GAAA,qCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBAAI,0DAAC,CAAA,GAAA,qCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAEvE,0DAAC;QAAI,WAAW;;;;;;;qBACd,0DAAC,CAAA,GAAA,gCAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,0DAAC,CAAA,GAAA,4BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,4BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,4BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,0DAAC,CAAA,GAAA,4BAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACV,0DAAC,CAAA,GAAA,oCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SAEnE,CAAA,GAAA,yCAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC3B,0DAAC,CAAA,GAAA,oCAAS;YACR,KAAK;YACL,YAAY;YACZ,SAAS;YACT,SAAA;YACA,OAAM;YACN,MAAA;YACA,cAAc;gBAAC,kCAAkC;YAAC;aAIvD,CAAC,MAAM,gBAAgB,kBACtB,0DAAC,CAAA,GAAA,oCAAS;QACR,SAAQ;QACR,SAAA;QACA,OAAM;QACN,MAAA;QACA,cAAc;YAAC,kCAAkC;QAAC;;AAM9D","sources":["packages/@adobe/react-spectrum/src/color/ColorEditor.tsx"],"sourcesContent":["import {ColorArea} from './ColorArea';\nimport {ColorField} from './ColorField';\nimport {ColorSlider} from './ColorSlider';\nimport {ColorSpace, getColorChannels} from 'react-stately/Color';\nimport {DOMRef} from '@react-types/shared';\nimport intlMessages from '../../intl/color/*.json';\nimport {Item} from 'react-stately/Item';\nimport {Picker} from '../picker/Picker';\nimport React, {CSSProperties, useState} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface SpectrumColorEditorProps {\n  /** Whether to hide the alpha channel color slider and color field. */\n  hideAlphaChannel?: boolean;\n}\n\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function ColorEditor(\n  props: SpectrumColorEditorProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');\n  let domRef = useDOMRef(ref);\n  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');\n\n  return (\n    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n        <ColorSlider colorSpace=\"hsb\" channel=\"hue\" orientation=\"vertical\" />\n        {!props.hideAlphaChannel && <ColorSlider channel=\"alpha\" orientation=\"vertical\" />}\n      </div>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <Picker\n          aria-label={formatter.format('colorFormat')}\n          isQuiet\n          width=\"size-700\"\n          menuWidth=\"size-1000\"\n          selectedKey={format}\n          onSelectionChange={f => setFormat(f as typeof format)}>\n          <Item key=\"hex\">{formatter.format('hex')}</Item>\n          <Item key=\"rgb\">{formatter.format('rgb')}</Item>\n          <Item key=\"hsl\">{formatter.format('hsl')}</Item>\n          <Item key=\"hsb\">{formatter.format('hsb')}</Item>\n        </Picker>\n        {format === 'hex' ? (\n          <ColorField isQuiet width=\"size-1000\" aria-label={formatter.format('hex')} />\n        ) : (\n          getColorChannels(format).map(channel => (\n            <ColorField\n              key={channel}\n              colorSpace={format}\n              channel={channel}\n              isQuiet\n              width=\"size-400\"\n              flex\n              UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n            />\n          ))\n        )}\n        {!props.hideAlphaChannel && (\n          <ColorField\n            channel=\"alpha\"\n            isQuiet\n            width=\"size-400\"\n            flex\n            UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorEditor.cjs.map"}

package/dist/private/color/ColorEditor.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,eAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,8CAAW,GAAG;IAE1D,qBACE,gCAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,gCAAC,CAAA,GAAA,yCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBAAI,gCAAC,CAAA,GAAA,yCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAEvE,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACV,gCAAC,CAAA,GAAA,yCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SAEnE,CAAA,GAAA,uBAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC3B,gCAAC,CAAA,GAAA,yCAAS;YACR,KAAK;YACL,YAAY;YACZ,SAAS;YACT,SAAA;YACA,OAAM;YACN,MAAA;YACA,cAAc;gBAAC,kCAAkC;YAAC;aAIvD,CAAC,MAAM,gBAAgB,kBACtB,gCAAC,CAAA,GAAA,yCAAS;QACR,SAAQ;QACR,SAAA;QACA,OAAM;QACN,MAAA;QACA,cAAc;YAAC,kCAAkC;QAAC;;AAM9D","sources":["packages/@adobe/react-spectrum/src/color/ColorEditor.tsx"],"sourcesContent":["import {ColorArea} from './ColorArea';\nimport {ColorField} from './ColorField';\nimport {ColorSlider} from './ColorSlider';\nimport {ColorSpace, getColorChannels} from 'react-stately/Color';\nimport {DOMRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../../intl/color/*.json';\nimport {Item} from 'react-stately/Item';\nimport {Picker} from '../picker/Picker';\nimport React, {CSSProperties, useState} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface SpectrumColorEditorProps {\n  /** Whether to hide the alpha channel color slider and color field. */\n  hideAlphaChannel?: boolean;\n}\n\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function ColorEditor(\n  props: SpectrumColorEditorProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');\n  let domRef = useDOMRef(ref);\n  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');\n\n  return (\n    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n        <ColorSlider colorSpace=\"hsb\" channel=\"hue\" orientation=\"vertical\" />\n        {!props.hideAlphaChannel && <ColorSlider channel=\"alpha\" orientation=\"vertical\" />}\n      </div>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <Picker\n          aria-label={formatter.format('colorFormat')}\n          isQuiet\n          width=\"size-700\"\n          menuWidth=\"size-1000\"\n          selectedKey={format}\n          onSelectionChange={f => setFormat(f as typeof format)}>\n          <Item key=\"hex\">{formatter.format('hex')}</Item>\n          <Item key=\"rgb\">{formatter.format('rgb')}</Item>\n          <Item key=\"hsl\">{formatter.format('hsl')}</Item>\n          <Item key=\"hsb\">{formatter.format('hsb')}</Item>\n        </Picker>\n        {format === 'hex' ? (\n          <ColorField isQuiet width=\"size-1000\" aria-label={formatter.format('hex')} />\n        ) : (\n          getColorChannels(format).map(channel => (\n            <ColorField\n              key={channel}\n              colorSpace={format}\n              channel={channel}\n              isQuiet\n              width=\"size-400\"\n              flex\n              UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n            />\n          ))\n        )}\n        {!props.hideAlphaChannel && (\n          <ColorField\n            channel=\"alpha\"\n            isQuiet\n            width=\"size-400\"\n            flex\n            UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorEditor.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,eAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,8CAAW,GAAG;IAE1D,qBACE,gCAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,gCAAC,CAAA,GAAA,yCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBAAI,gCAAC,CAAA,GAAA,yCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAEvE,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACV,gCAAC,CAAA,GAAA,yCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SAEnE,CAAA,GAAA,uBAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC3B,gCAAC,CAAA,GAAA,yCAAS;YACR,KAAK;YACL,YAAY;YACZ,SAAS;YACT,SAAA;YACA,OAAM;YACN,MAAA;YACA,cAAc;gBAAC,kCAAkC;YAAC;aAIvD,CAAC,MAAM,gBAAgB,kBACtB,gCAAC,CAAA,GAAA,yCAAS;QACR,SAAQ;QACR,SAAA;QACA,OAAM;QACN,MAAA;QACA,cAAc;YAAC,kCAAkC;QAAC;;AAM9D","sources":["packages/@adobe/react-spectrum/src/color/ColorEditor.tsx"],"sourcesContent":["import {ColorArea} from './ColorArea';\nimport {ColorField} from './ColorField';\nimport {ColorSlider} from './ColorSlider';\nimport {ColorSpace, getColorChannels} from 'react-stately/Color';\nimport {DOMRef} from '@react-types/shared';\nimport intlMessages from '../../intl/color/*.json';\nimport {Item} from 'react-stately/Item';\nimport {Picker} from '../picker/Picker';\nimport React, {CSSProperties, useState} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface SpectrumColorEditorProps {\n  /** Whether to hide the alpha channel color slider and color field. */\n  hideAlphaChannel?: boolean;\n}\n\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function ColorEditor(\n  props: SpectrumColorEditorProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');\n  let domRef = useDOMRef(ref);\n  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');\n\n  return (\n    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n        <ColorSlider colorSpace=\"hsb\" channel=\"hue\" orientation=\"vertical\" />\n        {!props.hideAlphaChannel && <ColorSlider channel=\"alpha\" orientation=\"vertical\" />}\n      </div>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <Picker\n          aria-label={formatter.format('colorFormat')}\n          isQuiet\n          width=\"size-700\"\n          menuWidth=\"size-1000\"\n          selectedKey={format}\n          onSelectionChange={f => setFormat(f as typeof format)}>\n          <Item key=\"hex\">{formatter.format('hex')}</Item>\n          <Item key=\"rgb\">{formatter.format('rgb')}</Item>\n          <Item key=\"hsl\">{formatter.format('hsl')}</Item>\n          <Item key=\"hsb\">{formatter.format('hsb')}</Item>\n        </Picker>\n        {format === 'hex' ? (\n          <ColorField isQuiet width=\"size-1000\" aria-label={formatter.format('hex')} />\n        ) : (\n          getColorChannels(format).map(channel => (\n            <ColorField\n              key={channel}\n              colorSpace={format}\n              channel={channel}\n              isQuiet\n              width=\"size-400\"\n              flex\n              UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n            />\n          ))\n        )}\n        {!props.hideAlphaChannel && (\n          <ColorField\n            channel=\"alpha\"\n            isQuiet\n            width=\"size-400\"\n            flex\n            UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorEditor.js.map"}

package/dist/private/color/ColorEditor.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,eAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAE1D,qBACE,gCAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,gCAAC,CAAA,GAAA,yCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBAAI,gCAAC,CAAA,GAAA,yCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAEvE,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACV,gCAAC,CAAA,GAAA,yCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SAEnE,CAAA,GAAA,uBAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC3B,gCAAC,CAAA,GAAA,yCAAS;YACR,KAAK;YACL,YAAY;YACZ,SAAS;YACT,SAAA;YACA,OAAM;YACN,MAAA;YACA,cAAc;gBAAC,kCAAkC;YAAC;aAIvD,CAAC,MAAM,gBAAgB,kBACtB,gCAAC,CAAA,GAAA,yCAAS;QACR,SAAQ;QACR,SAAA;QACA,OAAM;QACN,MAAA;QACA,cAAc;YAAC,kCAAkC;QAAC;;AAM9D","sources":["packages/@adobe/react-spectrum/src/color/ColorEditor.tsx"],"sourcesContent":["import {ColorArea} from './ColorArea';\nimport {ColorField} from './ColorField';\nimport {ColorSlider} from './ColorSlider';\nimport {ColorSpace, getColorChannels} from 'react-stately/Color';\nimport {DOMRef} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../../intl/color/*.json';\nimport {Item} from 'react-stately/Item';\nimport {Picker} from '../picker/Picker';\nimport React, {CSSProperties, useState} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface SpectrumColorEditorProps {\n  /** Whether to hide the alpha channel color slider and color field. */\n  hideAlphaChannel?: boolean;\n}\n\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function ColorEditor(\n  props: SpectrumColorEditorProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');\n  let domRef = useDOMRef(ref);\n  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');\n\n  return (\n    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n        <ColorSlider colorSpace=\"hsb\" channel=\"hue\" orientation=\"vertical\" />\n        {!props.hideAlphaChannel && <ColorSlider channel=\"alpha\" orientation=\"vertical\" />}\n      </div>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <Picker\n          aria-label={formatter.format('colorFormat')}\n          isQuiet\n          width=\"size-700\"\n          menuWidth=\"size-1000\"\n          selectedKey={format}\n          onSelectionChange={f => setFormat(f as typeof format)}>\n          <Item key=\"hex\">{formatter.format('hex')}</Item>\n          <Item key=\"rgb\">{formatter.format('rgb')}</Item>\n          <Item key=\"hsl\">{formatter.format('hsl')}</Item>\n          <Item key=\"hsb\">{formatter.format('hsb')}</Item>\n        </Picker>\n        {format === 'hex' ? (\n          <ColorField isQuiet width=\"size-1000\" aria-label={formatter.format('hex')} />\n        ) : (\n          getColorChannels(format).map(channel => (\n            <ColorField\n              key={channel}\n              colorSpace={format}\n              channel={channel}\n              isQuiet\n              width=\"size-400\"\n              flex\n              UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n            />\n          ))\n        )}\n        {!props.hideAlphaChannel && (\n          <ColorField\n            channel=\"alpha\"\n            isQuiet\n            width=\"size-400\"\n            flex\n            UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorEditor.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAA2B;IAE3B,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,eAAO,EAAsB;IACvD,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAE1D,qBACE,gCAAC;QAAI,WAAW;;;;;;;;QAA6D,KAAK;qBAChF,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAQ;QAAE,YAAW;QAAM,UAAS;QAAa,UAAS;sBAC3D,gCAAC,CAAA,GAAA,yCAAU;QAAE,YAAW;QAAM,SAAQ;QAAM,aAAY;QACvD,CAAC,MAAM,gBAAgB,kBAAI,gCAAC,CAAA,GAAA,yCAAU;QAAE,SAAQ;QAAQ,aAAY;uBAEvE,gCAAC;QAAI,WAAW;;;;;;;qBACd,gCAAC,CAAA,GAAA,yCAAK;QACJ,cAAY,UAAU,MAAM,CAAC;QAC7B,SAAA;QACA,OAAM;QACN,WAAU;QACV,aAAa;QACb,mBAAmB,CAAA,IAAK,UAAU;qBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,uBAClC,gCAAC,CAAA,GAAA,WAAG;QAAE,KAAI;OAAO,UAAU,MAAM,CAAC,UAEnC,WAAW,sBACV,gCAAC,CAAA,GAAA,yCAAS;QAAE,SAAA;QAAQ,OAAM;QAAY,cAAY,UAAU,MAAM,CAAC;SAEnE,CAAA,GAAA,uBAAe,EAAE,QAAQ,GAAG,CAAC,CAAA,wBAC3B,gCAAC,CAAA,GAAA,yCAAS;YACR,KAAK;YACL,YAAY;YACZ,SAAS;YACT,SAAA;YACA,OAAM;YACN,MAAA;YACA,cAAc;gBAAC,kCAAkC;YAAC;aAIvD,CAAC,MAAM,gBAAgB,kBACtB,gCAAC,CAAA,GAAA,yCAAS;QACR,SAAQ;QACR,SAAA;QACA,OAAM;QACN,MAAA;QACA,cAAc;YAAC,kCAAkC;QAAC;;AAM9D","sources":["packages/@adobe/react-spectrum/src/color/ColorEditor.tsx"],"sourcesContent":["import {ColorArea} from './ColorArea';\nimport {ColorField} from './ColorField';\nimport {ColorSlider} from './ColorSlider';\nimport {ColorSpace, getColorChannels} from 'react-stately/Color';\nimport {DOMRef} from '@react-types/shared';\nimport intlMessages from '../../intl/color/*.json';\nimport {Item} from 'react-stately/Item';\nimport {Picker} from '../picker/Picker';\nimport React, {CSSProperties, useState} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\n\nexport interface SpectrumColorEditorProps {\n  /** Whether to hide the alpha channel color slider and color field. */\n  hideAlphaChannel?: boolean;\n}\n\n/**\n * ColorEditor provides a default UI for editing colors within a ColorPicker.\n */\nexport const ColorEditor = React.forwardRef(function ColorEditor(\n  props: SpectrumColorEditorProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');\n  let domRef = useDOMRef(ref);\n  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');\n\n  return (\n    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n        <ColorSlider colorSpace=\"hsb\" channel=\"hue\" orientation=\"vertical\" />\n        {!props.hideAlphaChannel && <ColorSlider channel=\"alpha\" orientation=\"vertical\" />}\n      </div>\n      <div className={style({display: 'flex', gap: 4})()}>\n        <Picker\n          aria-label={formatter.format('colorFormat')}\n          isQuiet\n          width=\"size-700\"\n          menuWidth=\"size-1000\"\n          selectedKey={format}\n          onSelectionChange={f => setFormat(f as typeof format)}>\n          <Item key=\"hex\">{formatter.format('hex')}</Item>\n          <Item key=\"rgb\">{formatter.format('rgb')}</Item>\n          <Item key=\"hsl\">{formatter.format('hsl')}</Item>\n          <Item key=\"hsb\">{formatter.format('hsb')}</Item>\n        </Picker>\n        {format === 'hex' ? (\n          <ColorField isQuiet width=\"size-1000\" aria-label={formatter.format('hex')} />\n        ) : (\n          getColorChannels(format).map(channel => (\n            <ColorField\n              key={channel}\n              colorSpace={format}\n              channel={channel}\n              isQuiet\n              width=\"size-400\"\n              flex\n              UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n            />\n          ))\n        )}\n        {!props.hideAlphaChannel && (\n          <ColorField\n            channel=\"alpha\"\n            isQuiet\n            width=\"size-400\"\n            flex\n            UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorEditor.mjs.map"}

package/dist/private/color/ColorField.cjs

@@ -43,6 +43,7 @@ $parcel$export(module.exports, "ColorField", function () { return $cd43964140eb8
 
 
 const $cd43964140eb8bb2$export$b865d4358897bb17 = /*#__PURE__*/ (0, ($parcel$interopDefault($5QiVu$react))).forwardRef(function ColorField(props, ref) {
+    // oxlint-disable-next-line react/react-compiler
     props = (0, $544fc82701fc93e9$exports.useProviderProps)(props);
     props = (0, $1af2ca8553741739$exports.useFormProps)(props);
     [props] = (0, $5QiVu$reactariacomponentsslots.useContextProps)(props, null, (0, $5QiVu$reactariacomponentsColorField.ColorFieldContext));

package/dist/private/color/ColorField.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA+CM,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAsB;IAEtB,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,+CAAc,EAAE,OAAO,MAAM,CAAA,GAAA,sDAAgB;IAEvD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CACV;YAEF,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,IAAI,MAAM,OAAO,EACf,qBAAO,0DAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,0DAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,sCAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,+DAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,kDAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,oIACE,0DAAC,CAAA,GAAA,uCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAEpC,MAAM,IAAI,kBACT,0DAAC;QACC,MAAK;QACL,MAAM,MAAM,IAAI;QAChB,MAAM,MAAM,IAAI;QAChB,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAKlE;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,wDAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2CAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,0DAAC,CAAA,GAAA,uCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAGzC","sources":["packages/@adobe/react-spectrum/src/color/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorFieldProps, useColorChannelField, useColorField} from 'react-aria/useColorField';\n\nimport {classNames} from '../utils/classNames';\nimport {Color, ColorChannel, ColorSpace} from 'react-stately/Color';\nimport {ColorFieldContext} from 'react-aria-components/ColorField';\nimport React, {Ref, useEffect, useRef} from 'react';\nimport {\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport {TextFieldRef} from '../textfield/TextField';\nimport {useColorChannelFieldState, useColorFieldState} from 'react-stately/useColorFieldState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumColorFieldProps\n  extends\n    SpectrumTextInputBase,\n    Omit<AriaColorFieldProps, 'isInvalid' | 'validationState'>,\n    SpectrumFieldValidation<Color | null>,\n    SpectrumLabelableProps,\n    StyleProps {\n  /**\n   * The color channel that this field edits. If not provided,\n   * the color is edited as a hex value.\n   */\n  channel?: ColorChannel;\n  /**\n   * The color space that the color field operates in if a `channel` prop is provided.\n   * If no `channel` is provided, the color field always displays the color as an RGB hex value.\n   */\n  colorSpace?: ColorSpace;\n  /** Whether the ColorField should be displayed with a quiet style. */\n  isQuiet?: boolean;\n}\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(\n  props: SpectrumColorFieldProps,\n  ref: Ref<TextFieldRef>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text'\n      );\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel;\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n      />\n      {props.name && (\n        <input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={isNaN(state.numberValue) ? '' : state.numberValue}\n        />\n      )}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA+CM,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAsB;IAEtB,gDAAgD;IAChD,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,+CAAc,EAAE,OAAO,MAAM,CAAA,GAAA,sDAAgB;IAEvD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CACV;YAEF,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,IAAI,MAAM,OAAO,EACf,qBAAO,0DAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,0DAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,sCAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,+DAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,kDAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,oIACE,0DAAC,CAAA,GAAA,uCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAEpC,MAAM,IAAI,kBACT,0DAAC;QACC,MAAK;QACL,MAAM,MAAM,IAAI;QAChB,MAAM,MAAM,IAAI;QAChB,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAKlE;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,wDAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2CAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,0DAAC,CAAA,GAAA,uCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAGzC","sources":["packages/@adobe/react-spectrum/src/color/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorFieldProps, useColorChannelField, useColorField} from 'react-aria/useColorField';\n\nimport {classNames} from '../utils/classNames';\nimport {Color, ColorChannel, ColorSpace} from 'react-stately/Color';\nimport {ColorFieldContext} from 'react-aria-components/ColorField';\nimport React, {Ref, useEffect, useRef} from 'react';\nimport {\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport {TextFieldRef} from '../textfield/TextField';\nimport {useColorChannelFieldState, useColorFieldState} from 'react-stately/useColorFieldState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumColorFieldProps\n  extends\n    SpectrumTextInputBase,\n    Omit<AriaColorFieldProps, 'isInvalid' | 'validationState'>,\n    SpectrumFieldValidation<Color | null>,\n    SpectrumLabelableProps,\n    StyleProps {\n  /**\n   * The color channel that this field edits. If not provided,\n   * the color is edited as a hex value.\n   */\n  channel?: ColorChannel;\n  /**\n   * The color space that the color field operates in if a `channel` prop is provided.\n   * If no `channel` is provided, the color field always displays the color as an RGB hex value.\n   */\n  colorSpace?: ColorSpace;\n  /** Whether the ColorField should be displayed with a quiet style. */\n  isQuiet?: boolean;\n}\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(\n  props: SpectrumColorFieldProps,\n  ref: Ref<TextFieldRef>\n) {\n  // oxlint-disable-next-line react/react-compiler\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text'\n      );\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel;\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n      />\n      {props.name && (\n        <input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={isNaN(state.numberValue) ? '' : state.numberValue}\n        />\n      )}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.cjs.map"}

package/dist/private/color/ColorField.js

@@ -37,6 +37,7 @@ function $parcel$interopDefault(a) {
 
 
 const $5b07f9ba6aa1e89e$export$b865d4358897bb17 = /*#__PURE__*/ (0, $5a4rp$react).forwardRef(function ColorField(props, ref) {
+    // oxlint-disable-next-line react/react-compiler
     props = (0, $089943c7a219141c$export$521c373ccc32c300)(props);
     props = (0, $d23ca6800ac02cf1$export$a6b5be5c6b451665)(props);
     [props] = (0, $5a4rp$useContextProps)(props, null, (0, $5a4rp$ColorFieldContext));

package/dist/private/color/ColorField.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA+CM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAsB;IAEtB,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,MAAM,CAAA,GAAA,wBAAgB;IAEvD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CACV;YAEF,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,IAAI,MAAM,OAAO,EACf,qBAAO,gCAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,gCAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,gCAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2BAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,gFACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,kDAAK,GAAG;QAEpC,MAAM,IAAI,kBACT,gCAAC;QACC,MAAK;QACL,MAAM,MAAM,IAAI;QAChB,MAAM,MAAM,IAAI;QAChB,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAKlE;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,oBAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,kDAAK,GAAG;;AAGzC","sources":["packages/@adobe/react-spectrum/src/color/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorFieldProps, useColorChannelField, useColorField} from 'react-aria/useColorField';\n\nimport {classNames} from '../utils/classNames';\nimport {Color, ColorChannel, ColorSpace} from 'react-stately/Color';\nimport {ColorFieldContext} from 'react-aria-components/ColorField';\nimport React, {Ref, useEffect, useRef} from 'react';\nimport {\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport {TextFieldRef} from '../textfield/TextField';\nimport {useColorChannelFieldState, useColorFieldState} from 'react-stately/useColorFieldState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumColorFieldProps\n  extends\n    SpectrumTextInputBase,\n    Omit<AriaColorFieldProps, 'isInvalid' | 'validationState'>,\n    SpectrumFieldValidation<Color | null>,\n    SpectrumLabelableProps,\n    StyleProps {\n  /**\n   * The color channel that this field edits. If not provided,\n   * the color is edited as a hex value.\n   */\n  channel?: ColorChannel;\n  /**\n   * The color space that the color field operates in if a `channel` prop is provided.\n   * If no `channel` is provided, the color field always displays the color as an RGB hex value.\n   */\n  colorSpace?: ColorSpace;\n  /** Whether the ColorField should be displayed with a quiet style. */\n  isQuiet?: boolean;\n}\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(\n  props: SpectrumColorFieldProps,\n  ref: Ref<TextFieldRef>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text'\n      );\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel;\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n      />\n      {props.name && (\n        <input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={isNaN(state.numberValue) ? '' : state.numberValue}\n        />\n      )}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA+CM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAsB;IAEtB,gDAAgD;IAChD,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,MAAM,CAAA,GAAA,wBAAgB;IAEvD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CACV;YAEF,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,IAAI,MAAM,OAAO,EACf,qBAAO,gCAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,gCAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,gCAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2BAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,gFACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,kDAAK,GAAG;QAEpC,MAAM,IAAI,kBACT,gCAAC;QACC,MAAK;QACL,MAAM,MAAM,IAAI;QAChB,MAAM,MAAM,IAAI;QAChB,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAKlE;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,oBAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,kDAAK,GAAG;;AAGzC","sources":["packages/@adobe/react-spectrum/src/color/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorFieldProps, useColorChannelField, useColorField} from 'react-aria/useColorField';\n\nimport {classNames} from '../utils/classNames';\nimport {Color, ColorChannel, ColorSpace} from 'react-stately/Color';\nimport {ColorFieldContext} from 'react-aria-components/ColorField';\nimport React, {Ref, useEffect, useRef} from 'react';\nimport {\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport {TextFieldRef} from '../textfield/TextField';\nimport {useColorChannelFieldState, useColorFieldState} from 'react-stately/useColorFieldState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumColorFieldProps\n  extends\n    SpectrumTextInputBase,\n    Omit<AriaColorFieldProps, 'isInvalid' | 'validationState'>,\n    SpectrumFieldValidation<Color | null>,\n    SpectrumLabelableProps,\n    StyleProps {\n  /**\n   * The color channel that this field edits. If not provided,\n   * the color is edited as a hex value.\n   */\n  channel?: ColorChannel;\n  /**\n   * The color space that the color field operates in if a `channel` prop is provided.\n   * If no `channel` is provided, the color field always displays the color as an RGB hex value.\n   */\n  colorSpace?: ColorSpace;\n  /** Whether the ColorField should be displayed with a quiet style. */\n  isQuiet?: boolean;\n}\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(\n  props: SpectrumColorFieldProps,\n  ref: Ref<TextFieldRef>\n) {\n  // oxlint-disable-next-line react/react-compiler\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text'\n      );\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel;\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n      />\n      {props.name && (\n        <input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={isNaN(state.numberValue) ? '' : state.numberValue}\n        />\n      )}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.js.map"}

package/dist/private/color/ColorField.mjs

@@ -37,6 +37,7 @@ function $parcel$interopDefault(a) {
 
 
 const $41f1a8db81de171a$export$b865d4358897bb17 = /*#__PURE__*/ (0, $f9TgH$react).forwardRef(function ColorField(props, ref) {
+    // oxlint-disable-next-line react/react-compiler
     props = (0, $71dfb0e0358a12de$export$521c373ccc32c300)(props);
     props = (0, $c29c48d4ef19ffc4$export$a6b5be5c6b451665)(props);
     [props] = (0, $f9TgH$useContextProps)(props, null, (0, $f9TgH$ColorFieldContext));

package/dist/private/color/ColorField.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA+CM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAsB;IAEtB,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,MAAM,CAAA,GAAA,wBAAgB;IAEvD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CACV;YAEF,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,IAAI,MAAM,OAAO,EACf,qBAAO,gCAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,gCAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,gCAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2BAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,gFACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,kDAAK,GAAG;QAEpC,MAAM,IAAI,kBACT,gCAAC;QACC,MAAK;QACL,MAAM,MAAM,IAAI;QAChB,MAAM,MAAM,IAAI;QAChB,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAKlE;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,oBAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,kDAAK,GAAG;;AAGzC","sources":["packages/@adobe/react-spectrum/src/color/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorFieldProps, useColorChannelField, useColorField} from 'react-aria/useColorField';\n\nimport {classNames} from '../utils/classNames';\nimport {Color, ColorChannel, ColorSpace} from 'react-stately/Color';\nimport {ColorFieldContext} from 'react-aria-components/ColorField';\nimport React, {Ref, useEffect, useRef} from 'react';\nimport {\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport {TextFieldRef} from '../textfield/TextField';\nimport {useColorChannelFieldState, useColorFieldState} from 'react-stately/useColorFieldState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumColorFieldProps\n  extends\n    SpectrumTextInputBase,\n    Omit<AriaColorFieldProps, 'isInvalid' | 'validationState'>,\n    SpectrumFieldValidation<Color | null>,\n    SpectrumLabelableProps,\n    StyleProps {\n  /**\n   * The color channel that this field edits. If not provided,\n   * the color is edited as a hex value.\n   */\n  channel?: ColorChannel;\n  /**\n   * The color space that the color field operates in if a `channel` prop is provided.\n   * If no `channel` is provided, the color field always displays the color as an RGB hex value.\n   */\n  colorSpace?: ColorSpace;\n  /** Whether the ColorField should be displayed with a quiet style. */\n  isQuiet?: boolean;\n}\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(\n  props: SpectrumColorFieldProps,\n  ref: Ref<TextFieldRef>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text'\n      );\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel;\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n      />\n      {props.name && (\n        <input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={isNaN(state.numberValue) ? '' : state.numberValue}\n        />\n      )}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA+CM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAA8B,EAC9B,GAAsB;IAEtB,gDAAgD;IAChD,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,CAAC,MAAM,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,MAAM,CAAA,GAAA,wBAAgB;IAEvD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,WAAW,IAAI,CAAC,UAAU,OAAO,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAAc;YACpF,QAAQ,IAAI,CACV;YAEF,UAAU,OAAO,GAAG;QACtB;IACF,GAAG;QAAC,MAAM,WAAW;KAAC;IAEtB,IAAI,MAAM,OAAO,EACf,qBAAO,gCAAC;QAAmB,GAAG,KAAK;QAAE,SAAS,MAAM,OAAO;QAAE,cAAc;;SAE3E,qBAAO,gCAAC;QAAe,GAAG,KAAK;QAAE,cAAc;;AAEnD;AAOA,SAAS,wCAAkB,KAA6B;IACtD,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,YACR,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,gCAAwB,EAAE;QACpC,GAAG,KAAK;gBACR;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,2BAAmB,EAAE,YAAY,OAAO;IAErD,qBACE,gFACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,kDAAK,GAAG;QAEpC,MAAM,IAAI,kBACT,gCAAC;QACC,MAAK;QACL,MAAM,MAAM,IAAI;QAChB,MAAM,MAAM,IAAI;QAChB,OAAO,MAAM,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW;;AAKlE;AAMA,SAAS,oCAAc,KAAyB;IAC9C,IAAI,SACF,qDAAqD;IACrD,KAAK,gBACL,YAAY,YACZ,QAAQ,gBACR,YAAY,EACZ,GAAG,YACJ,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAA0C;IAC9D,IAAI,SAAS,CAAA,GAAA,oBAAY,EAAE,YAAY,OAAO;IAE9C,qBACE,gCAAC,CAAA,GAAA,yCAAY;QACV,GAAG,UAAU;QACd,KAAK;QACL,UAAU;QACT,GAAG,MAAM;QACV,gBAAgB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,kDAAK,GAAG;;AAGzC","sources":["packages/@adobe/react-spectrum/src/color/ColorField.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaColorFieldProps, useColorChannelField, useColorField} from 'react-aria/useColorField';\n\nimport {classNames} from '../utils/classNames';\nimport {Color, ColorChannel, ColorSpace} from 'react-stately/Color';\nimport {ColorFieldContext} from 'react-aria-components/ColorField';\nimport React, {Ref, useEffect, useRef} from 'react';\nimport {\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  SpectrumTextInputBase,\n  StyleProps\n} from '@react-types/shared';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '../textfield/TextFieldBase';\nimport {TextFieldRef} from '../textfield/TextField';\nimport {useColorChannelFieldState, useColorFieldState} from 'react-stately/useColorFieldState';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumColorFieldProps\n  extends\n    SpectrumTextInputBase,\n    Omit<AriaColorFieldProps, 'isInvalid' | 'validationState'>,\n    SpectrumFieldValidation<Color | null>,\n    SpectrumLabelableProps,\n    StyleProps {\n  /**\n   * The color channel that this field edits. If not provided,\n   * the color is edited as a hex value.\n   */\n  channel?: ColorChannel;\n  /**\n   * The color space that the color field operates in if a `channel` prop is provided.\n   * If no `channel` is provided, the color field always displays the color as an RGB hex value.\n   */\n  colorSpace?: ColorSpace;\n  /** Whether the ColorField should be displayed with a quiet style. */\n  isQuiet?: boolean;\n}\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = React.forwardRef(function ColorField(\n  props: SpectrumColorFieldProps,\n  ref: Ref<TextFieldRef>\n) {\n  // oxlint-disable-next-line react/react-compiler\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  [props] = useContextProps(props, null, ColorFieldContext);\n\n  let hasWarned = useRef(false);\n  useEffect(() => {\n    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\n      console.warn(\n        'Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text'\n      );\n      hasWarned.current = true;\n    }\n  }, [props.placeholder]);\n\n  if (props.channel) {\n    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;\n  } else {\n    return <HexColorField {...props} forwardedRef={ref} />;\n  }\n});\n\ninterface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {\n  channel: ColorChannel;\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction ColorChannelField(props: ColorChannelFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    validate, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let {locale} = useLocale();\n  let state = useColorChannelFieldState({\n    ...props,\n    locale\n  });\n\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorChannelField(otherProps, state, inputRef);\n\n  return (\n    <>\n      <TextFieldBase\n        {...otherProps}\n        ref={forwardedRef}\n        inputRef={inputRef}\n        {...result}\n        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n      />\n      {props.name && (\n        <input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={isNaN(state.numberValue) ? '' : state.numberValue}\n        />\n      )}\n    </>\n  );\n}\n\ninterface HexColorFieldProps extends SpectrumColorFieldProps {\n  forwardedRef: Ref<TextFieldRef>;\n}\n\nfunction HexColorField(props: HexColorFieldProps) {\n  let {\n    // These disabled props are handled by the state hook\n    value, // eslint-disable-line @typescript-eslint/no-unused-vars\n    defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n    forwardedRef,\n    ...otherProps\n  } = props;\n  let state = useColorFieldState(props);\n  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n  let result = useColorField(otherProps, state, inputRef);\n\n  return (\n    <TextFieldBase\n      {...otherProps}\n      ref={forwardedRef}\n      inputRef={inputRef}\n      {...result}\n      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"ColorField.mjs.map"}

package/dist/private/color/ColorPicker.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAuCM,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAAoC;IAEpC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,UAAU,CAAA,GAAA,2BAAI;IAClB,qBACE,0DAAC,CAAA,GAAA,iDAAc,GAAM,qBACnB,0DAAC,CAAA,GAAA,uCAAY;QAAE,MAAK;QAAU,YAAW;QAAO,WAAW,CAAA,GAAA,sCAAW,EAAE;qBACtE,0DAAC,CAAA,GAAA,uCAAK;QACJ,KAAK;QACL,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkBR;YAAC,MAAM,MAAM,IAAI,IAAI;QAAG;OAC1B,CAAC,kBAAC,cAAc,EAAC,iBAChB,oIACE,0DAAC;YACC,WAAW;;;;;;;;;;;;;cASR;gCAAC;YAAc;yBAClB,0DAAC,CAAA,GAAA,qCAAU;YACT,KAAK;YACL,OAAO,MAAM,KAAK;YAClB,MAAM,MAAM,IAAI;YAChB,UAAU,MAAM,QAAQ;YACxB,cAAY,KAAK,CAAC,aAAa;YAC/B,mBAAiB,KAAK,CAAC,kBAAkB;YACzC,oBAAkB,KAAK,CAAC,mBAAmB;YAC3C,gBAAc,KAAK,CAAC,eAAe;aAGtC,MAAM,KAAK,kBAAI,0DAAC;YAAK,IAAI;WAAU,MAAM,KAAK,mBAIrD,0DAAC,CAAA,GAAA,gCAAK;QACJ,mBAAiB,MAAM,KAAK,GAAG,UAAU,KAAK,CAAC,kBAAkB;QACjE,cAAY,KAAK,CAAC,aAAa;QAC/B,cAAc;YACZ,OAAO;YACP,UAAU;YACV,QAAQ,SAAS,sBAAsB;QACzC;qBACA,0DAAC,CAAA,GAAA,iCAAM;QACL,cAAc;YACZ,UAAU;YACV,QAAQ;YACR,SAAS;QACX;OACC,MAAM,QAAQ;AAM3B","sources":["packages/@adobe/react-spectrum/src/color/ColorPicker.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 {ColorPicker as AriaColorPicker} from 'react-aria-components/ColorPicker';\n\nimport {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';\nimport {Button} from 'react-aria-components/Button';\nimport {Color} from 'react-stately/Color';\nimport {ColorSwatch} from './ColorSwatch';\nimport {Content} from '../view/Content';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport React, {ReactNode, useRef} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {unwrapDOMRef, useFocusableRef} from '../utils/useDOMRef';\nimport {useId} from 'react-aria/useId';\n\nexport interface SpectrumColorPickerProps\n  extends ValueBase<string | Color, Color>, AriaLabelingProps {\n  /** A visual label for the color picker. */\n  label?: ReactNode;\n  /** The contents of the color picker popover, e.g. `<ColorEditor />`. */\n  children?: ReactNode;\n  /**\n   * The size of the color swatch.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the color swatch.\n   *\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full';\n}\n\n/**\n * A ColorPicker combines a swatch with a customizable popover for editing a color.\n */\nexport const ColorPicker = React.forwardRef(function ColorPicker(\n  props: SpectrumColorPickerProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  let swatchRef = useRef(null);\n  let domRef = useFocusableRef(ref);\n  let labelId = useId();\n  return (\n    <AriaColorPicker {...props}>\n      <DialogTrigger type=\"popover\" mobileType=\"tray\" targetRef={unwrapDOMRef(swatchRef)}>\n        <Button\n          ref={domRef}\n          className={style({\n            backgroundColor: 'transparent',\n            borderStyle: 'none',\n            padding: 0,\n            display: 'flex',\n            alignItems: 'center',\n            gap: 'text-to-control',\n            outlineStyle: 'none',\n            fontFamily: 'sans',\n            color: 'body',\n            fontSize: {\n              size: {\n                XS: 'xs',\n                S: 'sm',\n                M: 'base',\n                L: 'lg'\n              }\n            }\n          })({size: props.size || 'M'})}>\n          {({isFocusVisible}) => (\n            <>\n              <div\n                className={style({\n                  outlineStyle: {\n                    default: 'none',\n                    isFocusVisible: 'solid'\n                  },\n                  outlineColor: 'focus-ring',\n                  outlineWidth: 2,\n                  outlineOffset: 2,\n                  borderRadius: 'default'\n                })({isFocusVisible})}>\n                <ColorSwatch\n                  ref={swatchRef}\n                  color={props.value}\n                  size={props.size}\n                  rounding={props.rounding}\n                  aria-label={props['aria-label']}\n                  aria-labelledby={props['aria-labelledby']}\n                  aria-describedby={props['aria-describedby']}\n                  aria-details={props['aria-details']}\n                />\n              </div>\n              {props.label && <span id={labelId}>{props.label}</span>}\n            </>\n          )}\n        </Button>\n        <Dialog\n          aria-labelledby={props.label ? labelId : props['aria-labelledby']}\n          aria-label={props['aria-label']}\n          UNSAFE_style={{\n            width: 'fit-content',\n            minWidth: 0,\n            margin: '0 auto' // Center within tray.\n          }}>\n          <Content\n            UNSAFE_style={{\n              position: 'relative',\n              margin: 'calc(var(--spectrum-dialog-padding) * -1)',\n              padding: 'var(--spectrum-global-dimension-size-200)'\n            }}>\n            {props.children}\n          </Content>\n        </Dialog>\n      </DialogTrigger>\n    </AriaColorPicker>\n  );\n});\n"],"names":[],"version":3,"file":"ColorPicker.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAuCM,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YACnD,KAA+B,EAC/B,GAAoC;IAEpC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,UAAU,CAAA,GAAA,2BAAI;IAClB,qBACE,0DAAC,CAAA,GAAA,iDAAc,GAAM,qBAEnB,0DAAC,CAAA,GAAA,uCAAY;QAAE,MAAK;QAAU,YAAW;QAAO,WAAW,CAAA,GAAA,sCAAW,EAAE;qBACtE,0DAAC,CAAA,GAAA,uCAAK;QACJ,KAAK;QACL,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkBR;YAAC,MAAM,MAAM,IAAI,IAAI;QAAG;OAC1B,CAAC,kBAAC,cAAc,EAAC,iBAChB,oIACE,0DAAC;YACC,WAAW;;;;;;;;;;;;;cASR;gCAAC;YAAc;yBAClB,0DAAC,CAAA,GAAA,qCAAU;YACT,KAAK;YACL,OAAO,MAAM,KAAK;YAClB,MAAM,MAAM,IAAI;YAChB,UAAU,MAAM,QAAQ;YACxB,cAAY,KAAK,CAAC,aAAa;YAC/B,mBAAiB,KAAK,CAAC,kBAAkB;YACzC,oBAAkB,KAAK,CAAC,mBAAmB;YAC3C,gBAAc,KAAK,CAAC,eAAe;aAGtC,MAAM,KAAK,kBAAI,0DAAC;YAAK,IAAI;WAAU,MAAM,KAAK,mBAIrD,0DAAC,CAAA,GAAA,gCAAK;QACJ,mBAAiB,MAAM,KAAK,GAAG,UAAU,KAAK,CAAC,kBAAkB;QACjE,cAAY,KAAK,CAAC,aAAa;QAC/B,cAAc;YACZ,OAAO;YACP,UAAU;YACV,QAAQ,SAAS,sBAAsB;QACzC;qBACA,0DAAC,CAAA,GAAA,iCAAM;QACL,cAAc;YACZ,UAAU;YACV,QAAQ;YACR,SAAS;QACX;OACC,MAAM,QAAQ;AAM3B","sources":["packages/@adobe/react-spectrum/src/color/ColorPicker.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 {ColorPicker as AriaColorPicker} from 'react-aria-components/ColorPicker';\n\nimport {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';\nimport {Button} from 'react-aria-components/Button';\nimport {Color} from 'react-stately/Color';\nimport {ColorSwatch} from './ColorSwatch';\nimport {Content} from '../view/Content';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport React, {ReactNode, useRef} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {unwrapDOMRef, useFocusableRef} from '../utils/useDOMRef';\nimport {useId} from 'react-aria/useId';\n\nexport interface SpectrumColorPickerProps\n  extends ValueBase<string | Color, Color>, AriaLabelingProps {\n  /** A visual label for the color picker. */\n  label?: ReactNode;\n  /** The contents of the color picker popover, e.g. `<ColorEditor />`. */\n  children?: ReactNode;\n  /**\n   * The size of the color swatch.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L';\n  /**\n   * The corner rounding of the color swatch.\n   *\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full';\n}\n\n/**\n * A ColorPicker combines a swatch with a customizable popover for editing a color.\n */\nexport const ColorPicker = React.forwardRef(function ColorPicker(\n  props: SpectrumColorPickerProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  let swatchRef = useRef(null);\n  let domRef = useFocusableRef(ref);\n  let labelId = useId();\n  return (\n    <AriaColorPicker {...props}>\n      {/* oxlint-disable-next-line react/react-compiler */}\n      <DialogTrigger type=\"popover\" mobileType=\"tray\" targetRef={unwrapDOMRef(swatchRef)}>\n        <Button\n          ref={domRef}\n          className={style({\n            backgroundColor: 'transparent',\n            borderStyle: 'none',\n            padding: 0,\n            display: 'flex',\n            alignItems: 'center',\n            gap: 'text-to-control',\n            outlineStyle: 'none',\n            fontFamily: 'sans',\n            color: 'body',\n            fontSize: {\n              size: {\n                XS: 'xs',\n                S: 'sm',\n                M: 'base',\n                L: 'lg'\n              }\n            }\n          })({size: props.size || 'M'})}>\n          {({isFocusVisible}) => (\n            <>\n              <div\n                className={style({\n                  outlineStyle: {\n                    default: 'none',\n                    isFocusVisible: 'solid'\n                  },\n                  outlineColor: 'focus-ring',\n                  outlineWidth: 2,\n                  outlineOffset: 2,\n                  borderRadius: 'default'\n                })({isFocusVisible})}>\n                <ColorSwatch\n                  ref={swatchRef}\n                  color={props.value}\n                  size={props.size}\n                  rounding={props.rounding}\n                  aria-label={props['aria-label']}\n                  aria-labelledby={props['aria-labelledby']}\n                  aria-describedby={props['aria-describedby']}\n                  aria-details={props['aria-details']}\n                />\n              </div>\n              {props.label && <span id={labelId}>{props.label}</span>}\n            </>\n          )}\n        </Button>\n        <Dialog\n          aria-labelledby={props.label ? labelId : props['aria-labelledby']}\n          aria-label={props['aria-label']}\n          UNSAFE_style={{\n            width: 'fit-content',\n            minWidth: 0,\n            margin: '0 auto' // Center within tray.\n          }}>\n          <Content\n            UNSAFE_style={{\n              position: 'relative',\n              margin: 'calc(var(--spectrum-dialog-padding) * -1)',\n              padding: 'var(--spectrum-global-dimension-size-200)'\n            }}>\n            {props.children}\n          </Content>\n        </Dialog>\n      </DialogTrigger>\n    </AriaColorPicker>\n  );\n});\n"],"names":[],"version":3,"file":"ColorPicker.cjs.map"}

package/dist/private/color/ColorPicker.css

@@ -1,44 +1,58 @@
 @layer s1-a;
 
 @layer s1-b {
-  .s1-5-enzrfps1-b:lang(ar) {
-    font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  .s1-5-enzrfps1-b {
+    &:lang(ar) {
+      font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+    }
   }
 }
 
 @layer s1-c {
-  .s1-5-enzwzjs1-c:lang(he) {
-    font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  .s1-5-enzwzjs1-c {
+    &:lang(he) {
+      font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+    }
   }
 }
 
 @layer s1-d {
-  .s1-5-enzykds1-d:lang(ja) {
-    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  .s1-5-enzykds1-d {
+    &:lang(ja) {
+      font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+    }
   }
 }
 
 @layer s1-e {
-  .s1-5-enzzrgs1-e:lang(ko) {
-    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  .s1-5-enzzrgs1-e {
+    &:lang(ko) {
+      font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+    }
   }
 }
 
 @layer s1-f {
-  .s1-5-eo0c6ss1-f:lang(zh) {
-    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  .s1-5-eo0c6ss1-f {
+    &:lang(zh) {
+      font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+    }
   }
 }
 
 @layer s1-g {
-  .s1-5-1uotwbws1-g:lang(zh-hant) {
-    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  .s1-5-1uotwbws1-g {
+    &:lang(zh-hant) {
+      font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+    }
   }
 }
 
 @layer s1-h {
-  .s1-5-bc1l9os1-h:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
-    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  .s1-5-bc1l9os1-h {
+    &:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+      font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+    }
   }
 }