@react-spectrum/s2 0.5.0 → 0.6.0

package/dist/ColorSlider.cjs

@@ -32,7 +32,7 @@ $parcel$export(module.exports, "ColorSlider", () => $fdd6f3d03620d438$export$44f
 
 
 const $fdd6f3d03620d438$export$717b2c0a523a0b53 = /*#__PURE__*/ (0, $hkRua$react.createContext)(null);
-function $fdd6f3d03620d438$var$ColorSlider(props, ref) {
+const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react.forwardRef)(function ColorSlider(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $fdd6f3d03620d438$export$717b2c0a523a0b53);
     let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles } = props;
     let containerRef = (0, $hkRua$reactspectrumutils.useDOMRef)(ref);
@@ -46,7 +46,7 @@ function $fdd6f3d03620d438$var$ColorSlider(props, ref) {
         "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|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+                let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
                 rules += matches.join('');
                 let $l = false;
                 for (let p of matches)if (/^\s*l/.test(p)) $l = true;
@@ -54,10 +54,10 @@ function $fdd6f3d03620d438$var$ColorSlider(props, ref) {
                     if (props.orientation === "horizontal") rules += ' l___u';
                 }
                 if (props.orientation === "vertical") rules += ' k___u';
-                if (props.orientation === "vertical") rules += ' _Za';
-                else if (props.orientation === "horizontal") rules += ' _Zf';
-                rules += ' __h-1egg2pz';
-                rules += ' __j-1roc9nk';
+                if (props.orientation === "vertical") rules += ' _0a';
+                else if (props.orientation === "horizontal") rules += ' _0f';
+                rules += ' __i-15pd573';
+                rules += ' __k-1kch5qg';
                 rules += ' ic';
                 return rules;
             }(renderProps, styles),
@@ -75,37 +75,37 @@ function $fdd6f3d03620d438$var$ColorSlider(props, ref) {
                     orientation === 'horizontal' && /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $hkRua$reactariacomponents.SliderOutput), {
                         className: function anonymous(props) {
                             let rules = " .";
-                            rules += ' __a-5czzau';
-                            rules += ' __b-5czzau';
-                            rules += ' __c-5czzau';
-                            rules += ' __d-5czzau';
-                            rules += ' _c-bc1l9oh';
-                            rules += ' _c-1uotwbwg';
-                            rules += ' _c-eo0c6sf';
-                            rules += ' _c-enzzrge';
-                            rules += ' _c-enzykdd';
-                            rules += ' _c-enzwzjc';
-                            rules += ' _c-enzrfpb';
-                            rules += ' _ca';
+                            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';
                             if (props.size === "XL") {
-                                rules += ' _dbj';
-                                rules += ' _di';
+                                rules += ' _ebj';
+                                rules += ' _ei';
                             } else if (props.size === "L") {
-                                rules += ' _dbh';
-                                rules += ' _dg';
+                                rules += ' _ebh';
+                                rules += ' _eg';
                             } else if (props.size === "S") {
-                                rules += ' _dbd';
-                                rules += ' _dc';
+                                rules += ' _ebd';
+                                rules += ' _ec';
                             } else if (props.size === "XS") {
-                                rules += ' _dbb';
-                                rules += ' _da';
+                                rules += ' _ebb';
+                                rules += ' _ea';
                             } else {
-                                rules += ' _dbf';
-                                rules += ' _de';
+                                rules += ' _ebf';
+                                rules += ' _ee';
                             }
-                            rules += ' _eb';
-                            rules += ' _f-1x99dlob';
-                            rules += ' _fa';
+                            rules += ' _fb';
+                            rules += ' _g-1x99dlob';
+                            rules += ' _ga';
                             if (props.isDisabled) rules += ' aj';
                             else {
                                 if (props.isPressed) rules += ' an';
@@ -113,7 +113,7 @@ function $fdd6f3d03620d438$var$ColorSlider(props, ref) {
                                 else if (props.isHovered) rules += ' an';
                                 else rules += ' am';
                             }
-                            rules += ' __Hb';
+                            rules += ' __Ib';
                             return rules;
                         }
                     }),
@@ -124,24 +124,24 @@ function $fdd6f3d03620d438$var$ColorSlider(props, ref) {
                             }),
                         className: function anonymous(props) {
                             let rules = " .";
-                            rules += ' __a-4ka10a';
-                            rules += ' __b-4ka10a';
-                            rules += ' __c-4ka10a';
-                            rules += ' __d-4ka10a';
+                            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 += ' _vc';
                             rules += ' _wc';
                             rules += ' _xc';
                             rules += ' _yc';
-                            rules += ' da_____v';
+                            rules += ' _zc';
+                            rules += ' da_____I';
                             rules += ' dp10';
-                            rules += ' _Nb';
-                            rules += ' _M-3hmpv';
-                            if (props.isDisabled) rules += ' _La';
-                            else rules += ' _Lb';
+                            rules += ' _Ob';
+                            rules += ' _N-3hmpv';
+                            if (props.isDisabled) rules += ' _Ma';
+                            else rules += ' _Mb';
                             if (props.isDisabled) rules += ' bg';
                             return rules;
                         },
@@ -160,10 +160,7 @@ function $fdd6f3d03620d438$var$ColorSlider(props, ref) {
                 ]
             })
     });
-}
-/**
- * A ColorSlider allows users to adjust an individual channel of a color value.
- */ let $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react.forwardRef)($fdd6f3d03620d438$var$ColorSlider);
+});
 
 
 //# sourceMappingURL=ColorSlider.cjs.map

package/dist/ColorSlider.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,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;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,uBAAS,EAAE","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<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction 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\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n"],"names":[],"version":3,"file":"ColorSlider.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuBM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAKtG,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<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"}

package/dist/ColorSlider.css

@@ -7,19 +7,19 @@
     height: calc(12rem * var(--s2-scale));
   }
 
-  ._Zf {
+  ._0f {
     display: grid;
   }
 
-  ._Za {
+  ._0a {
     display: block;
   }
 
-  .__h-1egg2pz {
+  .__i-15pd573 {
     grid-template-columns: 1fr auto;
   }
 
-  .__j-1roc9nk {
+  .__k-1kch5qg {
     grid-template-areas: "label output"
                          "track track";
   }
@@ -28,53 +28,53 @@
     row-gap: .25rem;
   }
 
-  .__a-5czzau {
+  .__b-ny5g4a {
     grid-column-start: output;
   }
 
-  .__b-5czzau {
+  .__c-ny5g4a {
     grid-column-end: output;
   }
 
-  .__c-5czzau {
+  .__d-ny5g4a {
     grid-row-start: output;
   }
 
-  .__d-5czzau {
+  .__e-ny5g4a {
     grid-row-end: output;
   }
 
-  ._ca {
+  ._da {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._de {
+  ._ee {
     font-size: .875rem;
   }
 
-  ._da {
+  ._ea {
     font-size: .6875rem;
   }
 
-  ._dc {
+  ._ec {
     font-size: .75rem;
   }
 
-  ._dg {
+  ._eg {
     font-size: 1rem;
   }
 
-  ._di {
+  ._ei {
     font-size: 1.125rem;
   }
 
-  ._eb {
+  ._fb {
     font-variation-settings: "wght" 400;
     font-synthesis-weight: none;
     font-weight: 400;
   }
 
-  ._fa {
+  ._ga {
     line-height: 1.3;
   }
 
@@ -90,23 +90,23 @@
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  .__Hb {
+  .__Ib {
     cursor: default;
   }
 
-  .__a-4ka10a {
+  .__b-n9hk5a {
     grid-column-start: track;
   }
 
-  .__b-4ka10a {
+  .__c-n9hk5a {
     grid-column-end: track;
   }
 
-  .__c-4ka10a {
+  .__d-n9hk5a {
     grid-row-start: track;
   }
 
-  .__d-4ka10a {
+  .__e-n9hk5a {
     grid-row-end: track;
   }
 
@@ -126,19 +126,19 @@
     height: 100%;
   }
 
-  ._vc {
+  ._wc {
     border-start-start-radius: .5rem;
   }
 
-  ._wc {
+  ._xc {
     border-start-end-radius: .5rem;
   }
 
-  ._xc {
+  ._yc {
     border-end-start-radius: .5rem;
   }
 
-  ._yc {
+  ._zc {
     border-end-end-radius: .5rem;
   }
 
@@ -146,19 +146,19 @@
     outline-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff1a);
   }
 
-  ._Nb {
+  ._Ob {
     outline-width: 1px;
   }
 
-  ._M-3hmpv {
+  ._N-3hmpv {
     outline-offset: -1px;
   }
 
-  ._Lb {
+  ._Mb {
     outline-style: solid;
   }
 
-  ._La {
+  ._Ma {
     outline-style: none;
   }
 
@@ -168,11 +168,11 @@
 }
 
 @layer _.b {
-  ._c-enzrfpb:lang(ar) {
+  ._d-enzrfpb:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 }
@@ -180,60 +180,60 @@
 @layer UNSAFE_overrides;
 
 @layer _.c {
-  ._c-enzwzjc:lang(he) {
+  ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._c-enzykdd:lang(ja) {
+  ._d-enzykdd:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  ._c-enzzrge:lang(ko) {
+  ._d-enzzrge:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._c-eo0c6sf:lang(zh) {
+  ._d-eo0c6sf:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._c-1uotwbwg:lang(zh-hant) {
+  ._d-1uotwbwg:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._d-bc1l9oh: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;
   }
 }
 
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    ._dbf {
+    ._ebf {
       font-size: 1.0625rem;
     }
 
-    ._dbb {
+    ._ebb {
       font-size: .8125rem;
     }
 
-    ._dbd {
+    ._ebd {
       font-size: .9375rem;
     }
 
-    ._dbh {
+    ._ebh {
       font-size: 1.1875rem;
     }
 
-    ._dbj {
+    ._ebj {
       font-size: 1.375rem;
     }
   }
@@ -245,7 +245,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____v {
+    .da_____I {
       outline-color: buttonborder;
     }
   }

package/dist/ColorSlider.css.map

@@ -1 +1 @@
-{"mappings":"ACiDmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAoC5B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnD8B;EAoC5B;;;;EAAA;;;;;AApC4B;;AAoC5B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAeF;;;;AAAA;EAAA;IAAA","sources":["14771332a5b9bbc4","packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["@import \"d6c5746f419c314b\";\n@import \"59869632975fb938\";\n@import \"927ebdef839461cd\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  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<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction 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\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n"],"names":[],"version":3,"file":"ColorSlider.css.map"}
+{"mappings":"ACoDmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAoC5B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnD8B;EAoC5B;;;;EAAA;;;;;AApC4B;;AAoC5B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAeF;;;;AAAA;EAAA;IAAA","sources":["14771332a5b9bbc4","packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["@import \"d6c5746f419c314b\";\n@import \"59869632975fb938\";\n@import \"927ebdef839461cd\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  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<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.css.map"}

package/dist/ColorSlider.mjs

@@ -4,7 +4,7 @@ import {FieldLabel as $9afd80978c252040$export$1acdcf5a973a8414} from "./Field.m
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $3i9ps$jsx, jsxs as $3i9ps$jsxs, Fragment as $3i9ps$Fragment} from "react/jsx-runtime";
 import {useLocale as $3i9ps$useLocale, ColorSlider as $3i9ps$ColorSlider, SliderOutput as $3i9ps$SliderOutput, SliderTrack as $3i9ps$SliderTrack} from "react-aria-components";
-import {createContext as $3i9ps$createContext, useRef as $3i9ps$useRef, forwardRef as $3i9ps$forwardRef} from "react";
+import {createContext as $3i9ps$createContext, forwardRef as $3i9ps$forwardRef, useRef as $3i9ps$useRef} from "react";
 import {useDOMRef as $3i9ps$useDOMRef} from "@react-spectrum/utils";
 
 /*
@@ -25,7 +25,7 @@ import {useDOMRef as $3i9ps$useDOMRef} from "@react-spectrum/utils";
 
 
 const $495db619596088aa$export$717b2c0a523a0b53 = /*#__PURE__*/ (0, $3i9ps$createContext)(null);
-function $495db619596088aa$var$ColorSlider(props, ref) {
+const $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwardRef)(function ColorSlider(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $495db619596088aa$export$717b2c0a523a0b53);
     let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles } = props;
     let containerRef = (0, $3i9ps$useDOMRef)(ref);
@@ -39,7 +39,7 @@ function $495db619596088aa$var$ColorSlider(props, ref) {
         "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|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+                let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
                 rules += matches.join('');
                 let $l = false;
                 for (let p of matches)if (/^\s*l/.test(p)) $l = true;
@@ -47,10 +47,10 @@ function $495db619596088aa$var$ColorSlider(props, ref) {
                     if (props.orientation === "horizontal") rules += ' l___u';
                 }
                 if (props.orientation === "vertical") rules += ' k___u';
-                if (props.orientation === "vertical") rules += ' _Za';
-                else if (props.orientation === "horizontal") rules += ' _Zf';
-                rules += ' __h-1egg2pz';
-                rules += ' __j-1roc9nk';
+                if (props.orientation === "vertical") rules += ' _0a';
+                else if (props.orientation === "horizontal") rules += ' _0f';
+                rules += ' __i-15pd573';
+                rules += ' __k-1kch5qg';
                 rules += ' ic';
                 return rules;
             }(renderProps, styles),
@@ -68,37 +68,37 @@ function $495db619596088aa$var$ColorSlider(props, ref) {
                     orientation === 'horizontal' && /*#__PURE__*/ (0, $3i9ps$jsx)((0, $3i9ps$SliderOutput), {
                         className: function anonymous(props) {
                             let rules = " .";
-                            rules += ' __a-5czzau';
-                            rules += ' __b-5czzau';
-                            rules += ' __c-5czzau';
-                            rules += ' __d-5czzau';
-                            rules += ' _c-bc1l9oh';
-                            rules += ' _c-1uotwbwg';
-                            rules += ' _c-eo0c6sf';
-                            rules += ' _c-enzzrge';
-                            rules += ' _c-enzykdd';
-                            rules += ' _c-enzwzjc';
-                            rules += ' _c-enzrfpb';
-                            rules += ' _ca';
+                            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';
                             if (props.size === "XL") {
-                                rules += ' _dbj';
-                                rules += ' _di';
+                                rules += ' _ebj';
+                                rules += ' _ei';
                             } else if (props.size === "L") {
-                                rules += ' _dbh';
-                                rules += ' _dg';
+                                rules += ' _ebh';
+                                rules += ' _eg';
                             } else if (props.size === "S") {
-                                rules += ' _dbd';
-                                rules += ' _dc';
+                                rules += ' _ebd';
+                                rules += ' _ec';
                             } else if (props.size === "XS") {
-                                rules += ' _dbb';
-                                rules += ' _da';
+                                rules += ' _ebb';
+                                rules += ' _ea';
                             } else {
-                                rules += ' _dbf';
-                                rules += ' _de';
+                                rules += ' _ebf';
+                                rules += ' _ee';
                             }
-                            rules += ' _eb';
-                            rules += ' _f-1x99dlob';
-                            rules += ' _fa';
+                            rules += ' _fb';
+                            rules += ' _g-1x99dlob';
+                            rules += ' _ga';
                             if (props.isDisabled) rules += ' aj';
                             else {
                                 if (props.isPressed) rules += ' an';
@@ -106,7 +106,7 @@ function $495db619596088aa$var$ColorSlider(props, ref) {
                                 else if (props.isHovered) rules += ' an';
                                 else rules += ' am';
                             }
-                            rules += ' __Hb';
+                            rules += ' __Ib';
                             return rules;
                         }
                     }),
@@ -117,24 +117,24 @@ function $495db619596088aa$var$ColorSlider(props, ref) {
                             }),
                         className: function anonymous(props) {
                             let rules = " .";
-                            rules += ' __a-4ka10a';
-                            rules += ' __b-4ka10a';
-                            rules += ' __c-4ka10a';
-                            rules += ' __d-4ka10a';
+                            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 += ' _vc';
                             rules += ' _wc';
                             rules += ' _xc';
                             rules += ' _yc';
-                            rules += ' da_____v';
+                            rules += ' _zc';
+                            rules += ' da_____I';
                             rules += ' dp10';
-                            rules += ' _Nb';
-                            rules += ' _M-3hmpv';
-                            if (props.isDisabled) rules += ' _La';
-                            else rules += ' _Lb';
+                            rules += ' _Ob';
+                            rules += ' _N-3hmpv';
+                            if (props.isDisabled) rules += ' _Ma';
+                            else rules += ' _Mb';
                             if (props.isDisabled) rules += ' bg';
                             return rules;
                         },
@@ -153,10 +153,7 @@ function $495db619596088aa$var$ColorSlider(props, ref) {
                 ]
             })
     });
-}
-/**
- * A ColorSlider allows users to adjust an individual channel of a color value.
- */ let $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwardRef)($495db619596088aa$var$ColorSlider);
+});
 
 
 export {$495db619596088aa$export$717b2c0a523a0b53 as ColorSliderContext, $495db619596088aa$export$44fd664bcca5b6fb as ColorSlider};