@react-spectrum/s2 1.3.1 → 1.4.0

package/dist/private/ColorHandle.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ColorHandle.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 {cloneElement, JSX, ReactNode, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components/ColorThumb';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\n\nconst HANDLE_SIZE = 16;\nconst LOUPE_HEIGHT = 64; // Does not include borders\nconst LOUPE_WIDTH = 48;\nconst LOUPE_BORDER_WIDTH = 1;\nconst LOUPE_OFFSET = 12; // Offset from handle to loupe\n\ninterface ColorHandleProps {\n  containerRef: RefObject<HTMLElement | null>,\n  getPosition: () => {x: number, y: number}\n}\n\nexport function ColorHandle({containerRef, getPosition}: ColorHandleProps): ReactNode {\n  return (\n    <ColorThumb\n      className={style({\n        transition: '[width, height]',\n        size: {\n          default: HANDLE_SIZE,\n          isFocusVisible: 32\n        },\n        backgroundColor: {\n          isDisabled: 'disabled'\n        },\n        borderRadius: 'full',\n        boxSizing: 'border-box',\n        borderStyle: 'solid',\n        borderWidth: 2,\n        borderColor: {\n          default: 'white',\n          isDisabled: 'disabled'\n        },\n        outlineStyle: 'solid',\n        outlineWidth: 1,\n        outlineColor: {\n          default: 'black/42',\n          forcedColors: 'ButtonBorder'\n        }\n      })}\n      style={({defaultStyle, isDisabled}) => ({\n        background: isDisabled ? undefined : `linear-gradient(${defaultStyle.backgroundColor}, ${defaultStyle.backgroundColor}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        backgroundColor: undefined,\n        top: defaultStyle.top || '50%',\n        left: defaultStyle.left || '50%'\n      })}>\n      {({isDragging, color}) => (<>\n        <div\n          className={style({\n            size: 'full',\n            borderRadius: 'full',\n            boxSizing: 'border-box',\n            borderStyle: 'solid',\n            borderWidth: 1,\n            borderColor: {\n              default: 'black/42',\n              forcedColors: 'ButtonBorder'\n            }\n          })} />\n        <ColorLoupePortal isOpen={isDragging}>\n          <ColorLoupe containerRef={containerRef} color={color} getPosition={getPosition} />\n        </ColorLoupePortal>\n      </>)}\n    </ColorThumb>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupePortal({isOpen, children}: { isOpen: boolean, children: JSX.Element }) {\n  let [state, setState] = useState(isOpen ? 'open' : 'closed');\n  if (isOpen && state === 'closed') {\n    setState('open');\n  }\n\n  if (!isOpen && state === 'open') {\n    setState('exiting');\n  }\n\n  if (isOpen || state === 'exiting') {\n    return createPortal(cloneElement(children, {isExiting: state === 'exiting', onExited: () => setState('closed')}), document.body);\n  }\n\n  return null;\n}\n\nfunction ColorLoupe({isExiting, onExited, containerRef, loupeRef, getPosition, color}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let {x: thumbLeft, y: thumbTop} = getPosition();\n  thumbTop *= containerRect.height;\n  thumbLeft *= containerRect.width;\n\n  let enterAnimation = keyframes(`\n    from {\n      transform: translateY(8px);\n      opacity: 0;\n    }\n  `);\n\n  let exitAnimation = keyframes(`\n    to {\n      transform: translateY(8px);\n      opacity: 0;\n    }\n  `);\n\n  return (\n    <svg\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft,\n        marginTop: -LOUPE_HEIGHT - LOUPE_BORDER_WIDTH * 2 - HANDLE_SIZE / 2 - LOUPE_OFFSET,\n        marginLeft: -LOUPE_WIDTH / 2 - LOUPE_BORDER_WIDTH,\n        animationName: isExiting ? exitAnimation : enterAnimation\n      }}\n      className={style({\n        filter: 'elevated',\n        pointerEvents: 'none',\n        animationDuration: 125,\n        animationFillMode: 'forwards',\n        animationTimingFunction: 'in-out',\n        isolation: 'isolate'\n      })}\n      onAnimationEnd={e => {\n        if (e.animationName === exitAnimation) {\n          onExited();\n        }\n      }}\n      width={LOUPE_WIDTH + LOUPE_BORDER_WIDTH * 2}\n      height={LOUPE_HEIGHT + LOUPE_BORDER_WIDTH * 2}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect fill=\"white\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect fill=\"#E1E1E1\" x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect fill=\"#E1E1E1\" x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`} />\n      <path\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={color.toString()} />\n      <path\n        className={style({\n          strokeWidth: 1,\n          stroke: {\n            default: 'transparent-black-200',\n            forcedColors: 'ButtonBorder'\n          },\n          fill: 'white'\n        })}\n        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\" />\n    </svg>\n  );\n}\n"],"names":[],"version":3,"file":"ColorHandle.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ColorHandle.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 {cloneElement, JSX, ReactNode, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components/ColorThumb';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId} from 'react-aria/useId';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\n\nconst HANDLE_SIZE = 16;\nconst LOUPE_HEIGHT = 64; // Does not include borders\nconst LOUPE_WIDTH = 48;\nconst LOUPE_BORDER_WIDTH = 1;\nconst LOUPE_OFFSET = 12; // Offset from handle to loupe\n\ninterface ColorHandleProps {\n  containerRef: RefObject<HTMLElement | null>;\n  getPosition: () => {x: number; y: number};\n}\n\nexport function ColorHandle({containerRef, getPosition}: ColorHandleProps): ReactNode {\n  return (\n    <ColorThumb\n      className={style({\n        transition: '[width, height]',\n        size: {\n          default: HANDLE_SIZE,\n          isFocusVisible: 32\n        },\n        backgroundColor: {\n          isDisabled: 'disabled'\n        },\n        borderRadius: 'full',\n        boxSizing: 'border-box',\n        borderStyle: 'solid',\n        borderWidth: 2,\n        borderColor: {\n          default: 'white',\n          isDisabled: 'disabled'\n        },\n        outlineStyle: 'solid',\n        outlineWidth: 1,\n        outlineColor: {\n          default: 'black/42',\n          forcedColors: 'ButtonBorder'\n        }\n      })}\n      style={({defaultStyle, isDisabled}) => ({\n        background: isDisabled\n          ? undefined\n          : `linear-gradient(${defaultStyle.backgroundColor}, ${defaultStyle.backgroundColor}), repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`,\n        backgroundColor: undefined,\n        top: defaultStyle.top || '50%',\n        left: defaultStyle.left || '50%'\n      })}>\n      {({isDragging, color}) => (\n        <>\n          <div\n            className={style({\n              size: 'full',\n              borderRadius: 'full',\n              boxSizing: 'border-box',\n              borderStyle: 'solid',\n              borderWidth: 1,\n              borderColor: {\n                default: 'black/42',\n                forcedColors: 'ButtonBorder'\n              }\n            })}\n          />\n          <ColorLoupePortal isOpen={isDragging}>\n            <ColorLoupe containerRef={containerRef} color={color} getPosition={getPosition} />\n          </ColorLoupePortal>\n        </>\n      )}\n    </ColorThumb>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupePortal({isOpen, children}: {isOpen: boolean; children: JSX.Element}) {\n  let [state, setState] = useState(isOpen ? 'open' : 'closed');\n  if (isOpen && state === 'closed') {\n    setState('open');\n  }\n\n  if (!isOpen && state === 'open') {\n    setState('exiting');\n  }\n\n  if (isOpen || state === 'exiting') {\n    return createPortal(\n      cloneElement(children, {isExiting: state === 'exiting', onExited: () => setState('closed')}),\n      document.body\n    );\n  }\n\n  return null;\n}\n\nfunction ColorLoupe({isExiting, onExited, containerRef, loupeRef, getPosition, color}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let {x: thumbLeft, y: thumbTop} = getPosition();\n  thumbTop *= containerRect.height;\n  thumbLeft *= containerRect.width;\n\n  let enterAnimation = keyframes(`\n    from {\n      transform: translateY(8px);\n      opacity: 0;\n    }\n  `);\n\n  let exitAnimation = keyframes(`\n    to {\n      transform: translateY(8px);\n      opacity: 0;\n    }\n  `);\n\n  return (\n    <svg\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft,\n        marginTop: -LOUPE_HEIGHT - LOUPE_BORDER_WIDTH * 2 - HANDLE_SIZE / 2 - LOUPE_OFFSET,\n        marginLeft: -LOUPE_WIDTH / 2 - LOUPE_BORDER_WIDTH,\n        animationName: isExiting ? exitAnimation : enterAnimation\n      }}\n      className={style({\n        filter: 'elevated',\n        pointerEvents: 'none',\n        animationDuration: 125,\n        animationFillMode: 'forwards',\n        animationTimingFunction: 'in-out',\n        isolation: 'isolate'\n      })}\n      onAnimationEnd={e => {\n        if (e.animationName === exitAnimation) {\n          onExited();\n        }\n      }}\n      width={LOUPE_WIDTH + LOUPE_BORDER_WIDTH * 2}\n      height={LOUPE_HEIGHT + LOUPE_BORDER_WIDTH * 2}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect fill=\"white\" x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect fill=\"#E1E1E1\" x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect fill=\"#E1E1E1\" x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`}\n      />\n      <path\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={color.toString()}\n      />\n      <path\n        className={style({\n          strokeWidth: 1,\n          stroke: {\n            default: 'transparent-black-200',\n            forcedColors: 'ButtonBorder'\n          },\n          fill: 'white'\n        })}\n        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\"\n      />\n    </svg>\n  );\n}\n"],"names":[],"version":3,"file":"ColorHandle.mjs.map"}

package/dist/private/ColorSlider.cjs

@@ -57,19 +57,23 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
                     rules += p[0];
                 }
                 if (props.orientation === "horizontal") {
-                    if (!width) rules += ' Zr13';
+                    if (!width) rules += ' Zr131';
                 }
-                if (props.orientation === "vertical") rules += ' Fs13';
-                if (props.orientation === "vertical") rules += ' sb13';
-                else if (props.orientation === "horizontal") rules += ' se13';
-                rules += ' Dxumf9b13';
-                rules += ' CmAQJSd13';
-                rules += ' Ub13';
+                if (props.orientation === "vertical") rules += ' Fs131';
+                if (props.orientation === "vertical") rules += ' sb131';
+                else if (props.orientation === "horizontal") rules += ' se131';
+                rules += ' Dxumf9b131';
+                rules += ' CmAQJSd131';
+                rules += ' Ub131';
                 return rules;
             }(renderProps, styles),
         children: ({ isDisabled: isDisabled, orientation: orientation, state: state })=>/*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsxs)((0, $hkRua$reactjsxruntime.Fragment), {
                 children: [
-                    orientation === 'horizontal' && (props.label || props.label === undefined && !props['aria-label'] && !props['aria-labelledby']) && /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.FieldLabel), {
+                    orientation === 'horizontal' && (props.label || props.label === undefined && !props['aria-label'] && !props['aria-labelledby']) && // If no external label, aria-label or aria-labelledby is provided,
+                    // default to displaying the localized channel value.
+                    // Specifically check if label is undefined. If label is `null` then display no visible label.
+                    // A default aria-label is provided by useColorSlider in that case.
+                    /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.FieldLabel), {
                         isDisabled: isDisabled,
                         contextualHelp: props.contextualHelp,
                         children: props.label || state.value.getChannelName(props.channel, locale)
@@ -77,112 +81,112 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
                     orientation === 'horizontal' && /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $hkRua$reactariacomponentsSlider.SliderOutput), {
                         className: function anonymous(props) {
                             let rules = " ";
-                            rules += ' zChk6v13';
-                            rules += ' yChk6v13';
-                            rules += ' BChk6v13';
-                            rules += ' AChk6v13';
+                            rules += ' zChk6v131';
+                            rules += ' yChk6v131';
+                            rules += ' BChk6v131';
+                            rules += ' AChk6v131';
                             if (props.size === "XL") {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk131';
+                                rules += ' ucJ9TBTb131';
+                                rules += ' ud3Euai131';
+                                rules += ' uea131';
+                                rules += ' ugb131';
+                                rules += ' uhd131';
+                                rules += ' uje131';
+                                rules += ' u2NhKxcl131';
+                                rules += ' uic131';
                             } else if (props.size === "L") {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk131';
+                                rules += ' ucJ9TBTb131';
+                                rules += ' ud3Euai131';
+                                rules += ' uea131';
+                                rules += ' ugb131';
+                                rules += ' uhd131';
+                                rules += ' uje131';
+                                rules += ' u2NhKxcl131';
+                                rules += ' uic131';
                             } else if (props.size === "S") {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk131';
+                                rules += ' ucJ9TBTb131';
+                                rules += ' ud3Euai131';
+                                rules += ' uea131';
+                                rules += ' ugb131';
+                                rules += ' uhd131';
+                                rules += ' uje131';
+                                rules += ' u2NhKxcl131';
+                                rules += ' uic131';
                             } else if (props.size === "XS") {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk131';
+                                rules += ' ucJ9TBTb131';
+                                rules += ' ud3Euai131';
+                                rules += ' uea131';
+                                rules += ' ugb131';
+                                rules += ' uhd131';
+                                rules += ' uje131';
+                                rules += ' u2NhKxcl131';
+                                rules += ' uic131';
                             } else {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk131';
+                                rules += ' ucJ9TBTb131';
+                                rules += ' ud3Euai131';
+                                rules += ' uea131';
+                                rules += ' ugb131';
+                                rules += ' uhd131';
+                                rules += ' uje131';
+                                rules += ' u2NhKxcl131';
+                                rules += ' uic131';
                             }
                             if (props.size === "XL") {
-                                rules += ' -_6BNtrc-e13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-e131';
+                                rules += ' vx131';
                             } else if (props.size === "L") {
-                                rules += ' -_6BNtrc-d13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-d131';
+                                rules += ' vx131';
                             } else if (props.size === "S") {
-                                rules += ' -_6BNtrc-b13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-b131';
+                                rules += ' vx131';
                             } else if (props.size === "XS") {
-                                rules += ' -_6BNtrc-a13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-a131';
+                                rules += ' vx131';
                             } else {
-                                rules += ' -_6BNtrc-c13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-c131';
+                                rules += ' vx131';
                             }
                             if (props.size === "XL") {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb131';
+                                rules += ' _xa131';
                             } else if (props.size === "L") {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb131';
+                                rules += ' _xa131';
                             } else if (props.size === "S") {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb131';
+                                rules += ' _xa131';
                             } else if (props.size === "XS") {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb131';
+                                rules += ' _xa131';
                             } else {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb131';
+                                rules += ' _xa131';
                             }
                             if (props.size === "XL") {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd131';
+                                rules += ' _FnuYUweb131';
                             } else if (props.size === "L") {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd131';
+                                rules += ' _FnuYUweb131';
                             } else if (props.size === "S") {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd131';
+                                rules += ' _FnuYUweb131';
                             } else if (props.size === "XS") {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd131';
+                                rules += ' _FnuYUweb131';
                             } else {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd131';
+                                rules += ' _FnuYUweb131';
                             }
-                            if (props.isDisabled) rules += ' pp13';
-                            else rules += ' pv13';
-                            rules += ' ri13';
+                            if (props.isDisabled) rules += ' pp131';
+                            else rules += ' pv131';
+                            rules += ' ri131';
                             return rules;
                         }
                     }),
@@ -193,25 +197,25 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
                             }),
                         className: function anonymous(props) {
                             let rules = " ";
-                            rules += ' zCPUPs13';
-                            rules += ' yCPUPs13';
-                            rules += ' BCPUPs13';
-                            rules += ' ACPUPs13';
-                            if (props.orientation === "vertical") rules += ' Zo13';
-                            else if (props.orientation === "horizontal") rules += ' Za13';
-                            if (props.orientation === "vertical") rules += ' Fb13';
-                            else if (props.orientation === "horizontal") rules += ' Fp13';
-                            rules += ' ob13';
-                            rules += ' nb13';
-                            rules += ' kb13';
-                            rules += ' jb13';
-                            rules += ' Oi13';
-                            rules += ' Ola13';
-                            rules += ' _Mb13';
-                            rules += ' _Ka13';
-                            if (props.isDisabled) rules += ' _Le13';
-                            else rules += ' _Lf13';
-                            if (props.isDisabled) rules += ' gH13';
+                            rules += ' zCPUPs131';
+                            rules += ' yCPUPs131';
+                            rules += ' BCPUPs131';
+                            rules += ' ACPUPs131';
+                            if (props.orientation === "vertical") rules += ' Zo131';
+                            else if (props.orientation === "horizontal") rules += ' Za131';
+                            if (props.orientation === "vertical") rules += ' Fb131';
+                            else if (props.orientation === "horizontal") rules += ' Fp131';
+                            rules += ' ob131';
+                            rules += ' nb131';
+                            rules += ' kb131';
+                            rules += ' jb131';
+                            rules += ' Oi131';
+                            rules += ' Ola131';
+                            rules += ' _Mb131';
+                            rules += ' _Ka131';
+                            if (props.isDisabled) rules += ' _Le131';
+                            else rules += ' _Lf131';
+                            if (props.isDisabled) rules += ' gH131';
                             return rules;
                         },
                         children: /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $5b07976eb9e358fe$exports.ColorHandle), {

package/dist/private/ColorSlider.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAoBM,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,aAAC,SAAS,UAAE,MAAM,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAElC,qBACG,gCAAC,CAAA,GAAA,iDAAc;QACb,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,mBAK7H,gCAAC,CAAA,GAAA,oCAAS;wBAAE,YAAY;wBAAY,gBAAgB,MAAM,cAAc;kCACtE,MAAM,KAAK,IAAI,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;;oBAG7D,gBAAgB,8BACf,gCAAC,CAAA,GAAA,6CAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAUJ,gCAAC,CAAA,GAAA,4CAAU;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,YAAY,cAAc,QAAQ,MAAM,eAAe,CAAC,KAAK,IAAI,MAAM,eAAe,CAAC;gCAC3F,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,YAAY;gCACzD,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 {ColorSlider as AriaColorSlider, ColorSliderProps as AriaColorSliderProps} from 'react-aria-components/ColorSlider';\n\nimport {ColorHandle} from './ColorHandle';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {SliderOutput, SliderTrack} from 'react-aria-components/Slider';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, 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 {direction, 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: controlFont(),\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 thumbLeft = direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);\n              let x = state.orientation === 'horizontal' ? thumbLeft : 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;;;;;;;;;AAmCM,MAAM,0DACX,CAAA,GAAA,0BAAY,EAAwE;AAK/E,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAA2B;IAE3B,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,aAAC,SAAS,UAAE,MAAM,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAElC,qBACE,gCAAC,CAAA,GAAA,iDAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,8EAA8E;QAC9E,cACE,KAAK,CAAC,aAAa,IAAK,CAAA,MAAM,WAAW,KAAK,aAAa,MAAM,KAAK,GAAG,SAAQ;QAEnF,WAAW,CAAA,cACT,mBACA;;;;;;;;;;;;;;;;;;cAuBE,aAAa;kBAEhB,CAAC,cAAC,UAAU,eAAE,WAAW,SAAE,KAAK,EAAC,iBAChC;;oBACG,gBAAgB,gBACd,CAAA,MAAM,KAAK,IACT,MAAM,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAC/E,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;;oBAG/D,gBAAgB,8BACf,gCAAC,CAAA,GAAA,6CAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAWJ,gCAAC,CAAA,GAAA,4CAAU;wBACT,KAAK;wBACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aACR,YACA,GAAG,aAAa,UAAU,CAAC,wEAAwE,CAAC;4BAC1G,CAAA;wBACA;;;;;;;;;;;;;;;;;;;;;;;kCA6BA,cAAA,gCAAC,CAAA,GAAA,qCAAU;4BACT,cAAc;4BACd,aAAa;gCACX,IAAI,YACF,cAAc,QAAQ,MAAM,eAAe,CAAC,KAAK,IAAI,MAAM,eAAe,CAAC;gCAC7E,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,YAAY;gCACzD,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,IAAI,MAAM,eAAe,CAAC;gCAC7E,OAAO;uCAAC;uCAAG;gCAAC;4BACd;;;;;;AAOd","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} from 'react-aria-components/ColorSlider';\n\nimport {ColorHandle} from './ColorHandle';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, useRef} from 'react';\nimport {\n  DOMRef,\n  DOMRefValue,\n  GlobalDOMAttributes,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {SliderOutput, SliderTrack} from 'react-aria-components/Slider';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps\n  extends\n    Omit<\n      AriaColorSliderProps,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<SpectrumLabelableProps, 'contextualHelp'>,\n    StyleProps {\n  label?: string;\n}\n\nexport const ColorSliderContext =\n  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(\n  props: ColorSliderProps,\n  ref: DOMRef<HTMLDivElement>\n) {\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 {direction, 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={\n        props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)\n      }\n      className={renderProps =>\n        UNSAFE_className +\n        style(\n          {\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: ['label output', 'track track'],\n            rowGap: 4\n          },\n          getAllowedOverrides()\n        )(renderProps, styles)\n      }>\n      {({isDisabled, orientation, state}) => (\n        <>\n          {orientation === 'horizontal' &&\n            (props.label ||\n              (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: controlFont(),\n                cursor: 'default',\n                color: {\n                  default: 'neutral-subdued',\n                  isDisabled: 'disabled'\n                }\n              })}\n            />\n          )}\n          <SliderTrack\n            ref={trackRef}\n            style={({defaultStyle, isDisabled}) => ({\n              background: isDisabled\n                ? undefined\n                : `${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 thumbLeft =\n                  direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);\n                let x = state.orientation === 'horizontal' ? thumbLeft : 0.5;\n                let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n                return {x, y};\n              }}\n            />\n          </SliderTrack>\n        </>\n      )}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.cjs.map"}