@react-spectrum/s2 3.0.0-nightly-fd7075c5f-250128 → 3.0.0-nightly-e3ed3c7f6-250130

package/dist/ColorHandle.cjs.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, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId, useLayoutEffect} from '@react-aria/utils';\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) {\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.cjs.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, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId, useLayoutEffect} from '@react-aria/utils';\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) {\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.cjs.map"}

package/dist/ColorHandle.css

@@ -1,29 +1,29 @@
 @layer _.a {
-  ._P-1oihi8a {
+  ._S-1oihi8a {
     transition-property: width, height;
   }
 
-  ._R-375x7f {
+  ._U-375x7f {
     transition-duration: .15s;
   }
 
-  ._Sa {
+  ._Va {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .lE {
+  .kE {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .lU {
+  .kU {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .kE {
+  .jE {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .kU {
+  .jU {
     height: calc(2rem * var(--s2-scale));
   }
 
@@ -31,127 +31,163 @@
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .uc {
+  .tc {
     border-top-width: 2px;
   }
 
-  .vc {
+  .uc {
     border-bottom-width: 2px;
   }
 
-  .sc {
+  .rc {
     border-inline-start-width: 2px;
   }
 
-  .tc {
+  .sc {
     border-inline-end-width: 2px;
   }
 
-  .cc {
-    border-color: #fff;
+  .xc {
+    border-top-color: #fff;
+  }
+
+  .xi {
+    border-top-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .ci {
-    border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
+  .yc {
+    border-bottom-color: #fff;
   }
 
-  ._Mb {
+  .yi {
+    border-bottom-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
+  }
+
+  .vc {
+    border-inline-start-color: #fff;
+  }
+
+  .vi {
+    border-inline-start-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
+  }
+
+  .wc {
+    border-inline-end-color: #fff;
+  }
+
+  .wi {
+    border-inline-end-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
+  }
+
+  ._Pb {
     outline-style: solid;
   }
 
-  ._Ob {
+  ._Rb {
     outline-width: 1px;
   }
 
-  .db42 {
+  .cb42 {
     outline-color: #0000006b;
   }
 
-  .lb {
+  .kb {
     width: 100%;
   }
 
-  .kb {
+  .jb {
     height: 100%;
   }
 
-  ._wf {
+  ._zf {
     border-start-start-radius: 9999px;
   }
 
-  ._xf {
+  ._Af {
     border-start-end-radius: 9999px;
   }
 
-  ._yf {
+  ._Bf {
     border-end-start-radius: 9999px;
   }
 
-  ._zf {
+  ._Cf {
     border-end-end-radius: 9999px;
   }
 
-  .__oa {
+  .__ra {
     box-sizing: border-box;
   }
 
-  .wa {
+  .za {
     border-style: solid;
   }
 
-  .ub {
+  .tb {
     border-top-width: 1px;
   }
 
-  .vb {
+  .ub {
     border-bottom-width: 1px;
   }
 
-  .sb {
+  .rb {
     border-inline-start-width: 1px;
   }
 
-  .tb {
+  .sb {
     border-inline-end-width: 1px;
   }
 
-  .cb42 {
-    border-color: #0000006b;
+  .xb42 {
+    border-top-color: #0000006b;
+  }
+
+  .yb42 {
+    border-bottom-color: #0000006b;
   }
 
-  ._vb {
+  .vb42 {
+    border-inline-start-color: #0000006b;
+  }
+
+  .wb42 {
+    border-inline-end-color: #0000006b;
+  }
+
+  ._yb {
     filter: drop-shadow(0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a));
   }
 
-  .__Ca {
+  .__Fa {
     pointer-events: none;
   }
 
-  ._U-375x4t {
+  ._X-375x4t {
     animation-duration: .125s;
   }
 
-  ._Xb {
+  ._0b {
     animation-fill-mode: forwards;
   }
 
-  ._Za {
+  ._2a {
     animation-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .__Ga {
+  .__Ja {
     isolation: isolate;
   }
 
-  .xb {
+  .Ab {
     stroke-width: 1px;
   }
 
-  .f_____n {
+  .e_____n {
     stroke: #0000001f;
   }
 
-  .eA {
+  .dA {
     fill: #fff;
   }
 }
@@ -160,15 +196,27 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____I {
+    .ca_____I {
       outline-color: buttonborder;
     }
 
-    .ca_____I {
-      border-color: buttonborder;
+    .xa_____I {
+      border-top-color: buttonborder;
+    }
+
+    .ya_____I {
+      border-bottom-color: buttonborder;
+    }
+
+    .va_____I {
+      border-inline-start-color: buttonborder;
+    }
+
+    .wa_____I {
+      border-inline-end-color: buttonborder;
     }
 
-    .fa_____K {
+    .ea_____K {
       stroke: buttonborder;
     }
   }

package/dist/ColorHandle.css.map

@@ -1 +1 @@
-{"mappings":"ACiCiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgCI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkFJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BE;;;;EAAA;;;;EAAA;;;;;AA/IF;;AAAA;EAAA;IAAA;;;;IAgCI;;;;IA+GF;;;;;;AAtDI;;;;;;;AAOD","sources":["e345175c46126410","packages/@react-spectrum/s2/src/ColorHandle.tsx"],"sourcesContent":["@import \"63203eb3a948f993\";\n@import \"ba33a56d675003f7\";\n@import \"bf115cb0a25c2b12\";\n@import \"5d32c8c9143517d5\";\n@import \"cf10a6b7558ccf38\";\n@import \"d7c9e49b2d44a61e\";\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 {cloneElement, JSX, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId, useLayoutEffect} from '@react-aria/utils';\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) {\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.css.map"}
+{"mappings":"ACiCiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgCI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkFJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BE;;;;EAAA;;;;EAAA;;;;;AA/IF;;AAAA;EAAA;IAAA;;;;IAgCI;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA+GF;;;;;;AAtDI;;;;;;;AAOD","sources":["e345175c46126410","packages/@react-spectrum/s2/src/ColorHandle.tsx"],"sourcesContent":["@import \"63203eb3a948f993\";\n@import \"ba33a56d675003f7\";\n@import \"bf115cb0a25c2b12\";\n@import \"5d32c8c9143517d5\";\n@import \"cf10a6b7558ccf38\";\n@import \"d7c9e49b2d44a61e\";\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 {cloneElement, JSX, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId, useLayoutEffect} from '@react-aria/utils';\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) {\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.css.map"}

package/dist/ColorHandle.mjs

@@ -29,30 +29,36 @@ function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef,
     return /*#__PURE__*/ (0, $kShzN$jsx)((0, $kShzN$ColorThumb), {
         className: function anonymous(props) {
             let rules = " .";
-            rules += ' _P-1oihi8a';
-            rules += ' _R-375x7f';
-            rules += ' _Sa';
-            if (props.isFocusVisible) rules += ' lU';
-            else rules += ' lE';
+            rules += ' _S-1oihi8a';
+            rules += ' _U-375x7f';
+            rules += ' _Va';
             if (props.isFocusVisible) rules += ' kU';
             else rules += ' kE';
+            if (props.isFocusVisible) rules += ' jU';
+            else rules += ' jE';
             if (props.isDisabled) rules += ' bg';
-            rules += ' _wf';
-            rules += ' _xf';
-            rules += ' _yf';
             rules += ' _zf';
-            rules += ' __oa';
-            rules += ' wa';
+            rules += ' _Af';
+            rules += ' _Bf';
+            rules += ' _Cf';
+            rules += ' __ra';
+            rules += ' za';
+            rules += ' tc';
             rules += ' uc';
-            rules += ' vc';
+            rules += ' rc';
             rules += ' sc';
-            rules += ' tc';
-            if (props.isDisabled) rules += ' ci';
-            else rules += ' cc';
-            rules += ' _Mb';
-            rules += ' _Ob';
-            rules += ' da_____I';
-            rules += ' db42';
+            if (props.isDisabled) rules += ' xi';
+            else rules += ' xc';
+            if (props.isDisabled) rules += ' yi';
+            else rules += ' yc';
+            if (props.isDisabled) rules += ' vi';
+            else rules += ' vc';
+            if (props.isDisabled) rules += ' wi';
+            else rules += ' wc';
+            rules += ' _Pb';
+            rules += ' _Rb';
+            rules += ' ca_____I';
+            rules += ' cb42';
             return rules;
         },
         style: ({ defaultStyle: defaultStyle, isDisabled: isDisabled })=>({
@@ -64,7 +70,7 @@ function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef,
         children: ({ isDragging: isDragging, color: color })=>/*#__PURE__*/ (0, $kShzN$jsxs)((0, $kShzN$Fragment), {
                 children: [
                     /*#__PURE__*/ (0, $kShzN$jsx)("div", {
-                        className: " lb kb _wf _xf _yf _zf __oa wa ub vb sb tb cb42 ca_____I"
+                        className: " kb jb _zf _Af _Bf _Cf __ra za tb ub rb sb xb42 xa_____I yb42 ya_____I vb42 va_____I wb42 wa_____I"
                     }),
                     /*#__PURE__*/ (0, $kShzN$jsx)($b4f7db7c45cd3de9$var$ColorLoupePortal, {
                         isOpen: isDragging,
@@ -125,7 +131,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
             marginLeft: -$b4f7db7c45cd3de9$var$LOUPE_WIDTH / 2 - $b4f7db7c45cd3de9$var$LOUPE_BORDER_WIDTH,
             animationName: isExiting ? exitAnimation : enterAnimation
         },
-        className: " _vb __Ca _U-375x4t _Xb _Za __Ga",
+        className: " _yb __Fa _X-375x4t _0b _2a __Ja",
         onAnimationEnd: (e)=>{
             if (e.animationName === exitAnimation) onExited();
         },
@@ -174,7 +180,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $kShzN$jsx)("path", {
-                className: " xb f_____n fa_____K eA",
+                className: " Ab e_____n ea_____K dA",
                 d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
             })
         ]

package/dist/ColorHandle.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, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId, useLayoutEffect} from '@react-aria/utils';\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) {\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, RefObject, useState} from 'react';\nimport {ColorThumb} from 'react-aria-components';\nimport {createPortal} from 'react-dom';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useId, useLayoutEffect} from '@react-aria/utils';\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) {\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"}

package/dist/ColorSlider.cjs

@@ -46,19 +46,19 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
         "aria-label": props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined),
         className: (renderProps)=>UNSAFE_className + function anonymous(props, overrides) {
                 let rules = " .";
-                let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
+                let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q)[^\s]+/g) || [];
                 rules += matches.join('');
-                let $l = false;
-                for (let p of matches)if (/^\s*l/.test(p)) $l = true;
-                if (!$l) {
-                    if (props.orientation === "horizontal") rules += ' l___u';
+                let $k = false;
+                for (let p of matches)if (/^\s*k/.test(p)) $k = true;
+                if (!$k) {
+                    if (props.orientation === "horizontal") rules += ' k___u';
                 }
-                if (props.orientation === "vertical") rules += ' k___u';
-                if (props.orientation === "vertical") rules += ' _0a';
-                else if (props.orientation === "horizontal") rules += ' _0f';
-                rules += ' __i-15pd573';
-                rules += ' __k-1kch5qg';
-                rules += ' ic';
+                if (props.orientation === "vertical") rules += ' j___u';
+                if (props.orientation === "vertical") rules += ' _3a';
+                else if (props.orientation === "horizontal") rules += ' _3f';
+                rules += ' __l-15pd573';
+                rules += ' __n-1kch5qg';
+                rules += ' hc';
                 return rules;
             }(renderProps, styles),
         children: ({ isDisabled: isDisabled, orientation: orientation, state: state })=>/*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsxs)((0, $hkRua$reactjsxruntime.Fragment), {
@@ -75,37 +75,37 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
                     orientation === 'horizontal' && /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $hkRua$reactariacomponents.SliderOutput), {
                         className: function anonymous(props) {
                             let rules = " .";
-                            rules += ' __b-ny5g4a';
-                            rules += ' __c-ny5g4a';
-                            rules += ' __d-ny5g4a';
                             rules += ' __e-ny5g4a';
-                            rules += ' _d-bc1l9oh';
-                            rules += ' _d-1uotwbwg';
-                            rules += ' _d-eo0c6sf';
-                            rules += ' _d-enzzrge';
-                            rules += ' _d-enzykdd';
-                            rules += ' _d-enzwzjc';
-                            rules += ' _d-enzrfpb';
-                            rules += ' _da';
+                            rules += ' __f-ny5g4a';
+                            rules += ' __g-ny5g4a';
+                            rules += ' __h-ny5g4a';
+                            rules += ' _g-bc1l9oh';
+                            rules += ' _g-1uotwbwg';
+                            rules += ' _g-eo0c6sf';
+                            rules += ' _g-enzzrge';
+                            rules += ' _g-enzykdd';
+                            rules += ' _g-enzwzjc';
+                            rules += ' _g-enzrfpb';
+                            rules += ' _ga';
                             if (props.size === "XL") {
-                                rules += ' _ebj';
-                                rules += ' _ei';
+                                rules += ' _hbj';
+                                rules += ' _hi';
                             } else if (props.size === "L") {
-                                rules += ' _ebh';
-                                rules += ' _eg';
+                                rules += ' _hbh';
+                                rules += ' _hg';
                             } else if (props.size === "S") {
-                                rules += ' _ebd';
-                                rules += ' _ec';
+                                rules += ' _hbd';
+                                rules += ' _hc';
                             } else if (props.size === "XS") {
-                                rules += ' _ebb';
-                                rules += ' _ea';
+                                rules += ' _hbb';
+                                rules += ' _ha';
                             } else {
-                                rules += ' _ebf';
-                                rules += ' _ee';
+                                rules += ' _hbf';
+                                rules += ' _he';
                             }
-                            rules += ' _fb';
-                            rules += ' _g-1x99dlob';
-                            rules += ' _ga';
+                            rules += ' _ib';
+                            rules += ' _j-1x99dlob';
+                            rules += ' _ja';
                             if (props.isDisabled) rules += ' aj';
                             else {
                                 if (props.isPressed) rules += ' an';
@@ -113,7 +113,7 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
                                 else if (props.isHovered) rules += ' an';
                                 else rules += ' am';
                             }
-                            rules += ' __Ib';
+                            rules += ' __Lb';
                             return rules;
                         }
                     }),
@@ -124,24 +124,24 @@ const $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react
                             }),
                         className: function anonymous(props) {
                             let rules = " .";
-                            rules += ' __b-n9hk5a';
-                            rules += ' __c-n9hk5a';
-                            rules += ' __d-n9hk5a';
                             rules += ' __e-n9hk5a';
-                            if (props.orientation === "vertical") rules += ' lM';
-                            else if (props.orientation === "horizontal") rules += ' lb';
-                            if (props.orientation === "vertical") rules += ' kb';
-                            else if (props.orientation === "horizontal") rules += ' kM';
-                            rules += ' _wc';
-                            rules += ' _xc';
-                            rules += ' _yc';
+                            rules += ' __f-n9hk5a';
+                            rules += ' __g-n9hk5a';
+                            rules += ' __h-n9hk5a';
+                            if (props.orientation === "vertical") rules += ' kM';
+                            else if (props.orientation === "horizontal") rules += ' kb';
+                            if (props.orientation === "vertical") rules += ' jb';
+                            else if (props.orientation === "horizontal") rules += ' jM';
                             rules += ' _zc';
-                            rules += ' da_____I';
-                            rules += ' dp10';
-                            rules += ' _Ob';
-                            rules += ' _N-3hmpv';
-                            if (props.isDisabled) rules += ' _Ma';
-                            else rules += ' _Mb';
+                            rules += ' _Ac';
+                            rules += ' _Bc';
+                            rules += ' _Cc';
+                            rules += ' ca_____I';
+                            rules += ' cp10';
+                            rules += ' _Rb';
+                            rules += ' _Q-3hmpv';
+                            if (props.isDisabled) rules += ' _Pa';
+                            else rules += ' _Pb';
                             if (props.isDisabled) rules += ' bg';
                             return rules;
                         },