@react-spectrum/s2 0.6.0 → 0.7.0

package/dist/CloseButton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA0BD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAK/G,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAoC;IACtH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,qBACE,gBAAC,CAAA,GAAA,aAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBACtJ,cAAA,gBAAC,CAAA,GAAA,wCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\n  flexShrink: 0,\n  borderRadius: 'full',\n  padding: 0,\n  borderStyle: 'none',\n  transition: 'default',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: hoverBackground,\n    isFocusVisible: hoverBackground,\n    isPressed: hoverBackground\n  },\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: 'neutral',\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        default: 'ButtonText',\n        isDisabled: 'GrayText'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<CloseButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA0BD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAiF;AAKxH,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAoC;IACtH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,qBACE,gBAAC,CAAA,GAAA,aAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBACtJ,cAAA,gBAAC,CAAA,GAAA,wCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n  /**\n   * The size of the CloseButton.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n  default: 'gray-200',\n  isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: 'control',\n  flexShrink: 0,\n  borderRadius: 'full',\n  padding: 0,\n  borderStyle: 'none',\n  transition: 'default',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: hoverBackground,\n    isFocusVisible: hoverBackground,\n    isPressed: hoverBackground\n  },\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: 'neutral',\n      isDisabled: 'disabled',\n      isStaticColor: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        default: 'ButtonText',\n        isDisabled: 'GrayText'\n      }\n    }\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n  let {UNSAFE_style, UNSAFE_className = ''} = props;\n  let domRef = useFocusableRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <Button\n      {...props}\n      ref={domRef}\n      slot=\"close\"\n      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n      style={pressScale(domRef, UNSAFE_style)}\n      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n      <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n    </Button>\n  );\n});\n"],"names":[],"version":3,"file":"CloseButton.mjs.map"}

package/dist/ColorArea.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAiBM,MAAM,0DAAmB,CAAA,GAAA,0BAAY,EAA6D;AAKlG,MAAM,0DAAY,CAAA,GAAA,uBAAS,EAAE,SAAS,UAAU,KAAqB,EAAE,GAA2B;IACvG,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,qBACE,gCAAC,CAAA,GAAA,oCAAY;QACV,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gBACtC,GAAG,YAAY;gBACf,YAAY,aAAa,YAAY,aAAa,UAAU;gBAC5D,kEAAkE;gBAClE,UAAU;gBACV,GAAG,YAAY;YACjB,CAAA;QACA,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkBL,aAAa;kBACpD,CAAC,SAAC,KAAK,EAAC,iBACN,gCAAC,CAAA,GAAA,qCAAU;gBACV,cAAc;gBACd,aAAa,IAAM,MAAM,gBAAgB;;;AAInD","sources":["packages/@react-spectrum/s2/src/ColorArea.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  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps,\n  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nexport const ColorAreaContext = createContext<ContextValue<ColorAreaProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\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      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n});\n"],"names":[],"version":3,"file":"ColorArea.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAiBM,MAAM,0DAAmB,CAAA,GAAA,0BAAY,EAAsE;AAK3G,MAAM,0DAAY,CAAA,GAAA,uBAAS,EAAE,SAAS,UAAU,KAAqB,EAAE,GAA2B;IACvG,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,qBACE,gCAAC,CAAA,GAAA,oCAAY;QACV,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gBACtC,GAAG,YAAY;gBACf,YAAY,aAAa,YAAY,aAAa,UAAU;gBAC5D,kEAAkE;gBAClE,UAAU;gBACV,GAAG,YAAY;YACjB,CAAA;QACA,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkBL,aAAa;kBACpD,CAAC,SAAC,KAAK,EAAC,iBACN,gCAAC,CAAA,GAAA,qCAAU;gBACV,cAAc;gBACd,aAAa,IAAM,MAAM,gBAAgB;;;AAInD","sources":["packages/@react-spectrum/s2/src/ColorArea.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  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps,\n  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nexport const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\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      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n});\n"],"names":[],"version":3,"file":"ColorArea.cjs.map"}

package/dist/ColorArea.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   .Vc {
     position: relative;
@@ -64,7 +60,7 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 
 @layer _.b.a {
   @media (forced-colors: active) {

package/dist/ColorArea.css.map

@@ -1 +1 @@
-{"mappings":"AA+CmD;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/ColorArea.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  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps,\n  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nexport const ColorAreaContext = createContext<ContextValue<ColorAreaProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\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      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n});\n"],"names":[],"version":3,"file":"ColorArea.css.map"}
+{"mappings":"AA+CmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/ColorArea.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  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps,\n  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nexport const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\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      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n});\n"],"names":[],"version":3,"file":"ColorArea.css.map"}

package/dist/ColorArea.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAiBM,MAAM,0DAAmB,CAAA,GAAA,oBAAY,EAA6D;AAKlG,MAAM,0DAAY,CAAA,GAAA,iBAAS,EAAE,SAAS,UAAU,KAAqB,EAAE,GAA2B;IACvG,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,gBAAQ,EAAE;IAC7B,qBACE,gBAAC,CAAA,GAAA,gBAAY;QACV,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gBACtC,GAAG,YAAY;gBACf,YAAY,aAAa,YAAY,aAAa,UAAU;gBAC5D,kEAAkE;gBAClE,UAAU;gBACV,GAAG,YAAY;YACjB,CAAA;QACA,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkBL,aAAa;kBACpD,CAAC,SAAC,KAAK,EAAC,iBACN,gBAAC,CAAA,GAAA,yCAAU;gBACV,cAAc;gBACd,aAAa,IAAM,MAAM,gBAAgB;;;AAInD","sources":["packages/@react-spectrum/s2/src/ColorArea.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  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps,\n  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nexport const ColorAreaContext = createContext<ContextValue<ColorAreaProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\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      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n});\n"],"names":[],"version":3,"file":"ColorArea.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAiBM,MAAM,0DAAmB,CAAA,GAAA,oBAAY,EAAsE;AAK3G,MAAM,0DAAY,CAAA,GAAA,iBAAS,EAAE,SAAS,UAAU,KAAqB,EAAE,GAA2B;IACvG,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,gBAAQ,EAAE;IAC7B,qBACE,gBAAC,CAAA,GAAA,gBAAY;QACV,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gBACtC,GAAG,YAAY;gBACf,YAAY,aAAa,YAAY,aAAa,UAAU;gBAC5D,kEAAkE;gBAClE,UAAU;gBACV,GAAG,YAAY;YACjB,CAAA;QACA,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkBL,aAAa;kBACpD,CAAC,SAAC,KAAK,EAAC,iBACN,gBAAC,CAAA,GAAA,yCAAU;gBACV,cAAc;gBACd,aAAa,IAAM,MAAM,gBAAgB;;;AAInD","sources":["packages/@react-spectrum/s2/src/ColorArea.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  ColorArea as AriaColorArea,\n  ColorAreaProps as AriaColorAreaProps,\n  ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}\n\nexport const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nexport const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  return (\n    <AriaColorArea\n      {...props}\n      ref={containerRef}\n      style={({defaultStyle, isDisabled}) => ({\n        ...defaultStyle,\n        background: isDisabled ? undefined : defaultStyle.background,\n        // Move position: relative to style macro so it can be overridden.\n        position: undefined,\n        ...UNSAFE_style\n      })}\n      className={renderProps => UNSAFE_className + style({\n        position: 'relative',\n        size: 192,\n        minSize: 64,\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      }, getAllowedOverrides({height: true}))(renderProps, styles)}>\n      {({state}) =>\n        (<ColorHandle\n          containerRef={containerRef}\n          getPosition={() => state.getThumbPosition()} />)\n      }\n    </AriaColorArea>\n  );\n});\n"],"names":[],"version":3,"file":"ColorArea.mjs.map"}

package/dist/ColorField.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA0BM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAA+C;AAKrF,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAsB;IACrG,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,uBACb,YAAY,oBACZ,mBAAmB,YACnB,MAAM,EACN,GAAG,YACJ,GAAG;IAEJ,sCAAsC;IACtC,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,CAAA,GAAA,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,4CAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gCAAC,CAAA,GAAA,qCAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBAAM;;kCAC7B,gCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,iCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAK;wBAAe,YAAY;wBAAY,WAAW;wBAAW,MAAM,MAAM,IAAI;;0CAC5F,gCAAC,CAAA,GAAA,+BAAI;gCAAE,KAAK;;4BACX,2BAAa,gCAAC,CAAA,GAAA,wCAAa;gCAAE,YAAY;;;;kCAE5C,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<ColorFieldProps, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA0BM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAAwD;AAK9F,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAsB;IACrG,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,uBACb,YAAY,oBACZ,mBAAmB,YACnB,MAAM,EACN,GAAG,YACJ,GAAG;IAEJ,sCAAsC;IACtC,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,CAAA,GAAA,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,4CAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gCAAC,CAAA,GAAA,qCAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBAAM;;kCAC7B,gCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,iCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAK;wBAAe,YAAY;wBAAY,WAAW;wBAAW,MAAM,MAAM,IAAI;;0CAC5F,gCAAC,CAAA,GAAA,+BAAI;gCAAE,KAAK;;4BACX,2BAAa,gCAAC,CAAA,GAAA,wCAAa;gCAAE,YAAY;;;;kCAE5C,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.cjs.map"}

package/dist/ColorField.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   ._0f {
     display: grid;
@@ -113,8 +109,6 @@
   }
 }
 
-@layer UNSAFE_overrides;
-
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
     ._ebf {

package/dist/ColorField.css.map

@@ -1 +1 @@
-{"mappings":"AA8EoC;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<ColorFieldProps, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.css.map"}
+{"mappings":"AA8EoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.css.map"}

package/dist/ColorField.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA0BM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAA+C;AAKrF,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAsB;IACrG,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,uBACb,YAAY,oBACZ,mBAAmB,YACnB,MAAM,EACN,GAAG,YACJ,GAAG;IAEJ,sCAAsC;IACtC,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yBAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gBAAC,CAAA,GAAA,iBAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBAAM;;kCAC7B,gBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,iBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAK;wBAAe,YAAY;wBAAY,WAAW;wBAAW,MAAM,MAAM,IAAI;;0CAC5F,gBAAC,CAAA,GAAA,yCAAI;gCAAE,KAAK;;4BACX,2BAAa,gBAAC,CAAA,GAAA,yCAAa;gCAAE,YAAY;;;;kCAE5C,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<ColorFieldProps, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.mjs.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA0BM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAAwD;AAK9F,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAsB;IACrG,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,uBACb,YAAY,oBACZ,mBAAmB,YACnB,MAAM,EACN,GAAG,YACJ,GAAG;IAEJ,sCAAsC;IACtC,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yBAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gBAAC,CAAA,GAAA,iBAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBAAM;;kCAC7B,gBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,iBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAK;wBAAe,YAAY;wBAAY,WAAW;wBAAW,MAAM,MAAM,IAAI;;0CAC5F,gBAAC,CAAA,GAAA,yCAAI;gCAAE,KAAK;;4BACX,2BAAa,gBAAC,CAAA,GAAA,yCAAa;gCAAE,YAAY;;;;kCAE5C,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue\n} from 'react-aria-components';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    description,\n    errorMessage,\n    necessityIndicator,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  return (\n    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({isDisabled, isInvalid}) => (<>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n          size={props.size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size}>\n          <Input ref={inputRef} />\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.mjs.map"}

package/dist/ColorHandle.cjs

@@ -70,7 +70,7 @@ function $5b07976eb9e358fe$export$92862704de639678({ containerRef: containerRef,
         children: ({ isDragging: isDragging, color: color })=>/*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsxs)((0, $8hzuN$reactjsxruntime.Fragment), {
                 children: [
                     /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)("div", {
-                        className: " . lb kb _wf _xf _yf _zf __oa wa ub vb sb tb cb42 ca_____I"
+                        className: " lb kb _wf _xf _yf _zf __oa wa ub vb sb tb cb42 ca_____I"
                     }),
                     /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)($5b07976eb9e358fe$var$ColorLoupePortal, {
                         isOpen: isDragging,
@@ -131,7 +131,7 @@ function $5b07976eb9e358fe$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
             marginLeft: -$5b07976eb9e358fe$var$LOUPE_WIDTH / 2 - $5b07976eb9e358fe$var$LOUPE_BORDER_WIDTH,
             animationName: isExiting ? exitAnimation : enterAnimation
         },
-        className: " . _vb __Ca _U-375x4t _Xb _Za __Ga",
+        className: " _vb __Ca _U-375x4t _Xb _Za __Ga",
         onAnimationEnd: (e)=>{
             if (e.animationName === exitAnimation) onExited();
         },
@@ -180,7 +180,7 @@ function $5b07976eb9e358fe$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $8hzuN$reactjsxruntime.jsx)("path", {
-                className: " . xb f_____n fa_____K eA",
+                className: " xb f_____n fa_____K eA",
                 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.css

@@ -156,7 +156,7 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 
 @layer _.b.a {
   @media (forced-colors: active) {
@@ -187,8 +187,4 @@
     transform: translateY(8px);
   }
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=ColorHandle.css.map */

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;;;;;;;AAkBL","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;;;;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"}

package/dist/ColorHandle.mjs

@@ -64,7 +64,7 @@ function $b4f7db7c45cd3de9$export$92862704de639678({ containerRef: containerRef,
         children: ({ isDragging: isDragging, color: color })=>/*#__PURE__*/ (0, $kShzN$jsxs)((0, $kShzN$Fragment), {
                 children: [
                     /*#__PURE__*/ (0, $kShzN$jsx)("div", {
-                        className: " . lb kb _wf _xf _yf _zf __oa wa ub vb sb tb cb42 ca_____I"
+                        className: " lb kb _wf _xf _yf _zf __oa wa ub vb sb tb cb42 ca_____I"
                     }),
                     /*#__PURE__*/ (0, $kShzN$jsx)($b4f7db7c45cd3de9$var$ColorLoupePortal, {
                         isOpen: isDragging,
@@ -125,7 +125,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
             marginLeft: -$b4f7db7c45cd3de9$var$LOUPE_WIDTH / 2 - $b4f7db7c45cd3de9$var$LOUPE_BORDER_WIDTH,
             animationName: isExiting ? exitAnimation : enterAnimation
         },
-        className: " . _vb __Ca _U-375x4t _Xb _Za __Ga",
+        className: " _vb __Ca _U-375x4t _Xb _Za __Ga",
         onAnimationEnd: (e)=>{
             if (e.animationName === exitAnimation) onExited();
         },
@@ -174,7 +174,7 @@ function $b4f7db7c45cd3de9$var$ColorLoupe({ isExiting: isExiting, onExited: onEx
                 fill: color.toString()
             }),
             /*#__PURE__*/ (0, $kShzN$jsx)("path", {
-                className: " . xb f_____n fa_____K eA",
+                className: " xb f_____n fa_____K eA",
                 d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
             })
         ]

package/dist/ColorSlider.cjs.map

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

package/dist/ColorSlider.css

@@ -177,8 +177,6 @@
   }
 }
 
-@layer UNSAFE_overrides;
-
 @layer _.c {
   ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
@@ -239,10 +237,6 @@
   }
 }
 
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.b.a {
   @media (forced-colors: active) {
     .da_____I {

package/dist/ColorSlider.css.map

@@ -1 +1 @@
-{"mappings":"ACoDmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAoC5B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnD8B;EAoC5B;;;;EAAA;;;;;AApC4B;;AAoC5B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAeF;;;;AAAA;EAAA;IAAA","sources":["14771332a5b9bbc4","packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["@import \"d6c5746f419c314b\";\n@import \"59869632975fb938\";\n@import \"927ebdef839461cd\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' &&\n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: 'control',\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle\n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.css.map"}
+{"mappings":"ACoDmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAoC5B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnD8B;EAoC5B;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAeF;EAAA;IAAA","sources":["14771332a5b9bbc4","packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["@import \"d6c5746f419c314b\";\n@import \"59869632975fb938\";\n@import \"927ebdef839461cd\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' &&\n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: 'control',\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle\n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.css.map"}

package/dist/ColorSlider.mjs.map

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

package/dist/ColorSwatch.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AACtG,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,qCAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,qCAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  Color,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.cjs.map"}

package/dist/ColorSwatch.css

@@ -1,7 +1,3 @@
-.\.:not(#a#b) {
-  all: revert-layer;
-}
-
 @layer _.a {
   .lE {
     width: calc(1rem * var(--s2-scale));
@@ -120,5 +116,5 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
+@layer _.b;
 /*# sourceMappingURL=ColorSwatch.css.map */

package/dist/ColorSwatch.css.map

@@ -1 +1 @@
-{"mappings":"AA2EiB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.css.map"}
+{"mappings":"AA2EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  Color,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.css.map"}

package/dist/ColorSwatch.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AACtG,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAC/G,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,iBAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  Color,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.mjs.map"}

package/dist/ColorSwatchPicker.cjs

@@ -97,7 +97,7 @@ function $a267e3efa7024819$var$useWrapper(swatch, color, rounding) {
                     swatch,
                     isSelected && /*#__PURE__*/ (0, $7eldL$reactjsxruntime.jsx)("div", {
                         "aria-hidden": true,
-                        className: " . Va __Ca Ya _aa Wa Xa __oa co wa uc vc sc tc dd _Mb _Oc _N-3hmpy _Ab _w-17zqamw _x-17zqamw _y-17zqamw _z-17zqamw"
+                        className: " Va __Ca Ya _aa Wa Xa __oa co wa uc vc sc tc dd _Mb _Oc _N-3hmpy _Ab _w-17zqamw _x-17zqamw _y-17zqamw _z-17zqamw"
                     })
                 ]
             })