@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250430

package/dist/ColorHandle.css

@@ -1,187 +1,187 @@
 @layer _.a {
-  ._P-1oihi8a {
+  ._iEw2M9d {
     transition-property: width, height;
   }
 
-  ._R-375x7f {
+  ._ka {
     transition-duration: .15s;
   }
 
-  ._Sa {
+  ._ea {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .lE {
+  .ff {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .lU {
+  .fg {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .kE {
+  .eg {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .kU {
+  .ec {
     height: calc(2rem * var(--s2-scale));
   }
 
-  .bg {
+  .ca {
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .uc {
+  ._nb {
     border-top-width: 2px;
   }
 
-  .vc {
+  ._ma {
     border-bottom-width: 2px;
   }
 
-  .sc {
+  ._ta {
     border-inline-start-width: 2px;
   }
 
-  .tc {
+  ._sa {
     border-inline-end-width: 2px;
   }
 
-  .cc {
+  .qC {
     border-color: #fff;
   }
 
-  .ci {
+  .qb {
     border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  ._Mb {
+  .tb {
     outline-style: solid;
   }
 
-  ._Ob {
+  ._gb {
     outline-width: 1px;
   }
 
-  .db42 {
+  .Bk {
     outline-color: #0000006b;
   }
 
-  .lb {
+  .fa {
     width: 100%;
   }
 
-  .kb {
+  .ef {
     height: 100%;
   }
 
-  ._wf {
+  .za {
     border-start-start-radius: 9999px;
   }
 
-  ._xf {
+  .xa {
     border-start-end-radius: 9999px;
   }
 
-  ._yf {
+  .wa {
     border-end-start-radius: 9999px;
   }
 
-  ._zf {
+  .ya {
     border-end-end-radius: 9999px;
   }
 
-  .__oa {
+  ._qa {
     box-sizing: border-box;
   }
 
-  .wa {
+  .Ra {
     border-style: solid;
   }
 
-  .ub {
+  ._nc {
     border-top-width: 1px;
   }
 
-  .vb {
+  ._mb {
     border-bottom-width: 1px;
   }
 
-  .sb {
+  ._tc {
     border-inline-start-width: 1px;
   }
 
-  .tb {
+  ._sc {
     border-inline-end-width: 1px;
   }
 
-  .cb42 {
+  .qA {
     border-color: #0000006b;
   }
 
-  ._vb {
+  .__ba {
     filter: drop-shadow(0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a));
   }
 
-  .__Ca {
+  ._1a {
     pointer-events: none;
   }
 
-  ._U-375x4t {
+  .__Ec {
     animation-duration: .125s;
   }
 
-  ._Xb {
+  .__ia {
     animation-fill-mode: forwards;
   }
 
-  ._Za {
+  ._2a {
     animation-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .__Ga {
+  ._9a {
     isolation: isolate;
   }
 
-  .xb {
+  .__qa {
     stroke-width: 1px;
   }
 
-  .f_____n {
+  .__gi {
     stroke: #0000001f;
   }
 
-  .eA {
+  .Og {
     fill: #fff;
   }
 }
 
 @layer _.b;
 
-@layer _.b.a {
+@layer _.b.b {
   @media (forced-colors: active) {
-    .da_____I {
+    .Bbc {
       outline-color: buttonborder;
     }
 
-    .ca_____I {
+    .qbc {
       border-color: buttonborder;
     }
 
-    .fa_____K {
+    .__gba {
       stroke: buttonborder;
     }
   }
 }
 
-@keyframes -_16byv7u {
+@keyframes AmkoXc {
   from {
     opacity: 0;
     transform: translateY(8px);
   }
 }
 
-@keyframes -fqdrzt {
+@keyframes HaKxcb {
   to {
     opacity: 0;
     transform: translateY(8px);

package/dist/ColorHandle.mjs

@@ -28,31 +28,31 @@ const $b4f7db7c45cd3de9$var$LOUPE_OFFSET = 12; // Offset from handle to loupe
 function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef, getPosition: getPosition }) {
     return /*#__PURE__*/ (0, $kShzN$jsx)((0, $kShzN$ColorThumb), {
         className: function anonymous(props) {
-            let rules = " .";
-            rules += ' _P-1oihi8a';
-            rules += ' _R-375x7f';
-            rules += ' _Sa';
-            if (props.isFocusVisible) rules += ' lU';
-            else rules += ' lE';
-            if (props.isFocusVisible) rules += ' kU';
-            else rules += ' kE';
-            if (props.isDisabled) rules += ' bg';
-            rules += ' _wf';
-            rules += ' _xf';
-            rules += ' _yf';
-            rules += ' _zf';
-            rules += ' __oa';
+            let rules = " ";
+            rules += ' _iEw2M9d';
+            rules += ' _ka';
+            rules += ' _ea';
+            if (props.isFocusVisible) rules += ' fg';
+            else rules += ' ff';
+            if (props.isFocusVisible) rules += ' ec';
+            else rules += ' eg';
+            if (props.isDisabled) rules += ' ca';
+            rules += ' za';
+            rules += ' xa';
             rules += ' wa';
-            rules += ' uc';
-            rules += ' vc';
-            rules += ' sc';
-            rules += ' tc';
-            if (props.isDisabled) rules += ' ci';
-            else rules += ' cc';
-            rules += ' _Mb';
-            rules += ' _Ob';
-            rules += ' da_____I';
-            rules += ' db42';
+            rules += ' ya';
+            rules += ' _qa';
+            rules += ' Ra';
+            rules += ' _nb';
+            rules += ' _ma';
+            rules += ' _ta';
+            rules += ' _sa';
+            if (props.isDisabled) rules += ' qb';
+            else rules += ' qC';
+            rules += ' tb';
+            rules += ' _gb';
+            rules += ' Bk';
+            rules += ' Bbc';
             return rules;
         },
         style: ({ defaultStyle: defaultStyle, isDisabled: isDisabled })=>({
@@ -64,7 +64,7 @@ function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef,
         children: ({ isDragging: isDragging, color: color })=>/*#__PURE__*/ (0, $kShzN$jsxs)((0, $kShzN$Fragment), {
                 children: [
                     /*#__PURE__*/ (0, $kShzN$jsx)("div", {
-                        className: " lb kb _wf _xf _yf _zf __oa wa ub vb sb tb cb42 ca_____I"
+                        className: " fa ef za xa wa ya _qa Ra _nc _mb _tc _sc qA qbc"
                     }),
                     /*#__PURE__*/ (0, $kShzN$jsx)($b4f7db7c45cd3de9$var$ColorLoupePortal, {
                         isOpen: isDragging,
@@ -113,8 +113,8 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
     let { x: thumbLeft, y: thumbTop } = getPosition();
     thumbTop *= containerRect.height;
     thumbLeft *= containerRect.width;
-    let enterAnimation = "-_16byv7u";
-    let exitAnimation = "-fqdrzt";
+    let enterAnimation = "AmkoXc";
+    let exitAnimation = "HaKxcb";
     return /*#__PURE__*/ (0, $kShzN$jsxs)("svg", {
         style: {
             // Position relative to the viewport.
@@ -125,7 +125,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
             marginLeft: -$b4f7db7c45cd3de9$var$LOUPE_WIDTH / 2 - $b4f7db7c45cd3de9$var$LOUPE_BORDER_WIDTH,
             animationName: isExiting ? exitAnimation : enterAnimation
         },
-        className: " _vb __Ca _U-375x4t _Xb _Za __Ga",
+        className: " __ba _1a __Ec __ia _2a _9a",
         onAnimationEnd: (e)=>{
             if (e.animationName === exitAnimation) onExited();
         },
@@ -174,7 +174,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $kShzN$jsx)("path", {
-                className: " xb f_____n fa_____K eA",
+                className: " __qa __gi __gba Og",
                 d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
             })
         ]

package/dist/ColorSlider.cjs

@@ -45,20 +45,22 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
         // The visual label is hidden when vertical, so make it an aria-label instead.
         "aria-label": props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined),
         className: (renderProps)=>UNSAFE_className + function anonymous(props, overrides) {
-                let rules = " .";
-                let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
-                rules += matches.join('');
-                let $l = false;
-                for (let p of matches)if (/^\s*l/.test(p)) $l = true;
-                if (!$l) {
-                    if (props.orientation === "horizontal") rules += ' l___u';
+                let rules = " ";
+                let width = false;
+                let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
+                for (let p of matches){
+                    if (p[1] === "f") width = true;
+                    rules += p[0];
                 }
-                if (props.orientation === "vertical") rules += ' k___u';
-                if (props.orientation === "vertical") rules += ' _0a';
-                else if (props.orientation === "horizontal") rules += ' _0f';
-                rules += ' __i-15pd573';
-                rules += ' __k-1kch5qg';
-                rules += ' ic';
+                if (props.orientation === "horizontal") {
+                    if (!width) rules += ' fd';
+                }
+                if (props.orientation === "vertical") rules += ' ev';
+                if (props.orientation === "vertical") rules += ' mc';
+                else if (props.orientation === "horizontal") rules += ' mb';
+                rules += ' Sxumf9b';
+                rules += ' _umAQJSd';
+                rules += ' pb';
                 return rules;
             }(renderProps, styles),
         children: ({ isDisabled: isDisabled, orientation: orientation, state: state })=>/*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsxs)((0, $hkRua$reactjsxruntime.Fragment), {
@@ -74,46 +76,48 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
                     }),
                     orientation === 'horizontal' && /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $hkRua$reactariacomponents.SliderOutput), {
                         className: function anonymous(props) {
-                            let rules = " .";
-                            rules += ' __b-ny5g4a';
-                            rules += ' __c-ny5g4a';
-                            rules += ' __d-ny5g4a';
-                            rules += ' __e-ny5g4a';
-                            rules += ' _d-bc1l9oh';
-                            rules += ' _d-1uotwbwg';
-                            rules += ' _d-eo0c6sf';
-                            rules += ' _d-enzzrge';
-                            rules += ' _d-enzykdd';
-                            rules += ' _d-enzwzjc';
-                            rules += ' _d-enzrfpb';
-                            rules += ' _da';
+                            let rules = " ";
+                            rules += ' LChk6v';
+                            rules += ' NChk6v';
+                            rules += ' _fChk6v';
+                            rules += ' _dChk6v';
+                            rules += ' bh';
+                            rules += ' bdf';
+                            rules += ' beg';
+                            rules += ' bfa';
+                            rules += ' bgb';
+                            rules += ' bhd';
+                            rules += ' bje';
+                            rules += ' bic';
                             if (props.size === "XL") {
-                                rules += ' _ebj';
-                                rules += ' _ei';
+                                rules += ' ah';
+                                rules += ' aac';
                             } else if (props.size === "L") {
-                                rules += ' _ebh';
-                                rules += ' _eg';
+                                rules += ' ae';
+                                rules += ' aad';
                             } else if (props.size === "S") {
-                                rules += ' _ebd';
-                                rules += ' _ec';
+                                rules += ' af';
+                                rules += ' aag';
                             } else if (props.size === "XS") {
-                                rules += ' _ebb';
-                                rules += ' _ea';
+                                rules += ' ai';
+                                rules += ' aaj';
                             } else {
-                                rules += ' _ebf';
-                                rules += ' _ee';
+                                rules += ' aa';
+                                rules += ' aab';
                             }
-                            rules += ' _fb';
-                            rules += ' _g-1x99dlob';
-                            rules += ' _ga';
-                            if (props.isDisabled) rules += ' aj';
+                            rules += ' Da';
+                            rules += ' Ea';
+                            rules += ' Ca';
+                            rules += ' gb';
+                            rules += ' gca';
+                            if (props.isDisabled) rules += ' dc';
                             else {
-                                if (props.isPressed) rules += ' an';
-                                else if (props.isFocusVisible) rules += ' an';
-                                else if (props.isHovered) rules += ' an';
-                                else rules += ' am';
+                                if (props.isPressed) rules += ' da';
+                                else if (props.isFocusVisible) rules += ' da';
+                                else if (props.isHovered) rules += ' da';
+                                else rules += ' dg';
                             }
-                            rules += ' __Ib';
+                            rules += ' Aa';
                             return rules;
                         }
                     }),
@@ -123,26 +127,26 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
                                 background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`
                             }),
                         className: function anonymous(props) {
-                            let rules = " .";
-                            rules += ' __b-n9hk5a';
-                            rules += ' __c-n9hk5a';
-                            rules += ' __d-n9hk5a';
-                            rules += ' __e-n9hk5a';
-                            if (props.orientation === "vertical") rules += ' lM';
-                            else if (props.orientation === "horizontal") rules += ' lb';
-                            if (props.orientation === "vertical") rules += ' kb';
-                            else if (props.orientation === "horizontal") rules += ' kM';
-                            rules += ' _wc';
-                            rules += ' _xc';
+                            let rules = " ";
+                            rules += ' LCPUPs';
+                            rules += ' NCPUPs';
+                            rules += ' _fCPUPs';
+                            rules += ' _dCPUPs';
+                            if (props.orientation === "vertical") rules += ' fc';
+                            else if (props.orientation === "horizontal") rules += ' fa';
+                            if (props.orientation === "vertical") rules += ' ef';
+                            else if (props.orientation === "horizontal") rules += ' eb';
+                            rules += ' zc';
+                            rules += ' xc';
+                            rules += ' wc';
+                            rules += ' yc';
+                            rules += ' Be';
+                            rules += ' Bbc';
+                            rules += ' _gb';
                             rules += ' _yc';
-                            rules += ' _zc';
-                            rules += ' da_____I';
-                            rules += ' dp10';
-                            rules += ' _Ob';
-                            rules += ' _N-3hmpv';
-                            if (props.isDisabled) rules += ' _Ma';
-                            else rules += ' _Mb';
-                            if (props.isDisabled) rules += ' bg';
+                            if (props.isDisabled) rules += ' ta';
+                            else rules += ' tb';
+                            if (props.isDisabled) rules += ' ca';
                             return rules;
                         },
                         children: /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $5b07976eb9e358fe$exports.ColorHandle), {

package/dist/ColorSlider.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAK/G,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,mCAAQ,EAAE;IAC7B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAEvB,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,8EAA8E;QAC9E,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,MAAM,WAAW,KAAK,aAAa,MAAM,KAAK,GAAG,SAAQ;QAC7F,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;cAuBnB,aAAa;kBACtC,CAAC,cAAC,UAAU,eAAE,WAAW,SAAE,KAAK,EAAC,iBAAM;;oBACrC,gBAAgB,gBAAiB,CAAA,MAAM,KAAK,IAAK,MAAM,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAC9H,mEAAmE;oBACnE,qDAAqD;oBACrD,8FAA8F;oBAC9F,mEAAmE;kCACnE,gCAAC,CAAA,GAAA,oCAAS;wBAAE,YAAY;wBAAY,gBAAgB,MAAM,cAAc;kCACrE,MAAM,KAAK,IAAI,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;;oBAG7D,gBAAgB,8BACf,gCAAC,CAAA,GAAA,uCAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAUJ,gCAAC,CAAA,GAAA,sCAAU;wBACT,KAAK;wBACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,GAAG,aAAa,UAAU,CAAC,wEAAwE,CAAC;4BAC3I,CAAA;wBACA;;;;;;;;;;;;;;;;;;;;;;;kCA6BA,cAAA,gCAAC,CAAA,GAAA,qCAAU;4BACT,cAAc;4BACd,aAAa;gCACX,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,eAAe,CAAC,KAAK;gCACxE,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,IAAI,MAAM,eAAe,CAAC;gCAC7E,OAAO;uCAAC;uCAAG;gCAAC;4BACd;;;;;;AAKZ","sources":["packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' &&\n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: 'control',\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle\n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAK/G,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,mCAAQ,EAAE;IAC7B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAEvB,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,8EAA8E;QAC9E,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,MAAM,WAAW,KAAK,aAAa,MAAM,KAAK,GAAG,SAAQ;QAC7F,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;cAuBnB,aAAa;kBACtC,CAAC,cAAC,UAAU,eAAE,WAAW,SAAE,KAAK,EAAC,iBAAM;;oBACrC,gBAAgB,gBAAiB,CAAA,MAAM,KAAK,IAAK,MAAM,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAC9H,mEAAmE;oBACnE,qDAAqD;oBACrD,8FAA8F;oBAC9F,mEAAmE;kCACnE,gCAAC,CAAA,GAAA,oCAAS;wBAAE,YAAY;wBAAY,gBAAgB,MAAM,cAAc;kCACrE,MAAM,KAAK,IAAI,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;;oBAG7D,gBAAgB,8BACf,gCAAC,CAAA,GAAA,uCAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAUJ,gCAAC,CAAA,GAAA,sCAAU;wBACT,KAAK;wBACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,GAAG,aAAa,UAAU,CAAC,wEAAwE,CAAC;4BAC3I,CAAA;wBACA;;;;;;;;;;;;;;;;;;;;;;;kCA6BA,cAAA,gCAAC,CAAA,GAAA,qCAAU;4BACT,cAAc;4BACd,aAAa;gCACX,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,eAAe,CAAC,KAAK;gCACxE,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,IAAI,MAAM,eAAe,CAAC;gCAC7E,OAAO;uCAAC;uCAAG;gCAAC;4BACd;;;;;;AAKZ","sources":["packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' &&\n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: 'control',\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle\n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.cjs.map"}