@react-spectrum/color 3.1.7 → 3.2.0

package/dist/ColorSlider.mjs

@@ -1,121 +0,0 @@
-import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.mjs";
-import "./color.4034864f.css";
-import $fxUYb$colorslider_vars_cssmodulejs from "./colorslider_vars_css.mjs";
-import {useFocusableRef as $fxUYb$useFocusableRef, useStyleProps as $fxUYb$useStyleProps, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
-import {useContextProps as $fxUYb$useContextProps, ColorSliderContext as $fxUYb$ColorSliderContext} from "react-aria-components";
-import {Label as $fxUYb$Label} from "@react-spectrum/label";
-import $fxUYb$react, {useRef as $fxUYb$useRef, useState as $fxUYb$useState} from "react";
-import {useColorSlider as $fxUYb$useColorSlider} from "@react-aria/color";
-import {useColorSliderState as $fxUYb$useColorSliderState} from "@react-stately/color";
-import {useFocusVisible as $fxUYb$useFocusVisible, useFocus as $fxUYb$useFocus} from "@react-aria/interactions";
-import {useLocale as $fxUYb$useLocale} from "@react-aria/i18n";
-import {useProviderProps as $fxUYb$useProviderProps} from "@react-spectrum/provider";
-
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-
-
-
-
-
-
-
-const $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $fxUYb$react).forwardRef(function ColorSlider(props, ref) {
-    props = (0, $fxUYb$useProviderProps)(props);
-    let inputRef = (0, $fxUYb$useRef)(null);
-    let trackRef = (0, $fxUYb$useRef)(null);
-    let domRef = (0, $fxUYb$useFocusableRef)(ref, inputRef);
-    [props, domRef] = (0, $fxUYb$useContextProps)(props, domRef, (0, $fxUYb$ColorSliderContext));
-    let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, 'aria-label': ariaLabel } = props;
-    let vertical = orientation === 'vertical';
-    let { styleProps: styleProps } = (0, $fxUYb$useStyleProps)(props);
-    let { locale: locale } = (0, $fxUYb$useLocale)();
-    let state = (0, $fxUYb$useColorSliderState)({
-        ...props,
-        locale: locale
-    });
-    // If vertical and a label is provided, use it as an aria-label instead.
-    if (vertical && label) {
-        ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
-        label = null;
-    }
-    // If no external label, aria-label or aria-labelledby is provided,
-    // default to displaying the localized channel value.
-    // Specifically check if label is undefined. If label is `null` then display no visible label.
-    // A default aria-label is provided by useColorSlider in that case.
-    if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) label = state.value.getChannelName(channel, locale);
-    // Show the value label by default if there is a visible label
-    if (showValueLabel == null) showValueLabel = !!label;
-    let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $fxUYb$useColorSlider)({
-        ...props,
-        label: label,
-        'aria-label': ariaLabel,
-        trackRef: trackRef,
-        inputRef: inputRef
-    }, state);
-    let { isFocusVisible: isFocusVisible } = (0, $fxUYb$useFocusVisible)();
-    let [isFocused, setIsFocused] = (0, $fxUYb$useState)(false);
-    let { focusProps: focusProps } = (0, $fxUYb$useFocus)({
-        isDisabled: isDisabled,
-        onFocusChange: setIsFocused
-    });
-    return /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
-        ref: domRef,
-        ...styleProps,
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), {
-            'spectrum-ColorSlider-container--horizontal': !vertical,
-            'spectrum-ColorSlider-container--vertical': vertical
-        }, styleProps.className)
-    }, label && /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-labelContainer')
-    }, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$SlotProvider), {
-        slots: {
-            actionButton: {
-                UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-contextualHelp')
-            }
-        }
-    }, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), {
-        elementType: "span",
-        UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-valueLabel')
-    }, /*#__PURE__*/ (0, $fxUYb$react).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
-        ...trackProps,
-        ref: trackRef,
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider', {
-            'is-disabled': isDisabled,
-            'spectrum-ColorSlider--vertical': vertical
-        })
-    }, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
-        value: state.getDisplayColor(),
-        isFocused: isFocused && isFocusVisible,
-        isDisabled: isDisabled,
-        isDragging: state.isThumbDragging(0),
-        containerRef: trackRef,
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-handle'),
-        ...thumbProps
-    }, /*#__PURE__*/ (0, $fxUYb$react).createElement("input", {
-        ...inputProps,
-        ...focusProps,
-        ref: inputRef,
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-slider')
-    }))));
-});
-
-
-export {$3870e4ce67ed7ee1$export$44fd664bcca5b6fb as ColorSlider};
-//# sourceMappingURL=ColorSlider.module.js.map

package/dist/ColorSlider.module.js

@@ -1,121 +0,0 @@
-import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.module.js";
-import "./color.4034864f.css";
-import $fxUYb$colorslider_vars_cssmodulejs from "./colorslider_vars_css.module.js";
-import {useFocusableRef as $fxUYb$useFocusableRef, useStyleProps as $fxUYb$useStyleProps, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
-import {useContextProps as $fxUYb$useContextProps, ColorSliderContext as $fxUYb$ColorSliderContext} from "react-aria-components";
-import {Label as $fxUYb$Label} from "@react-spectrum/label";
-import $fxUYb$react, {useRef as $fxUYb$useRef, useState as $fxUYb$useState} from "react";
-import {useColorSlider as $fxUYb$useColorSlider} from "@react-aria/color";
-import {useColorSliderState as $fxUYb$useColorSliderState} from "@react-stately/color";
-import {useFocusVisible as $fxUYb$useFocusVisible, useFocus as $fxUYb$useFocus} from "@react-aria/interactions";
-import {useLocale as $fxUYb$useLocale} from "@react-aria/i18n";
-import {useProviderProps as $fxUYb$useProviderProps} from "@react-spectrum/provider";
-
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-
-
-
-
-
-
-
-const $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $fxUYb$react).forwardRef(function ColorSlider(props, ref) {
-    props = (0, $fxUYb$useProviderProps)(props);
-    let inputRef = (0, $fxUYb$useRef)(null);
-    let trackRef = (0, $fxUYb$useRef)(null);
-    let domRef = (0, $fxUYb$useFocusableRef)(ref, inputRef);
-    [props, domRef] = (0, $fxUYb$useContextProps)(props, domRef, (0, $fxUYb$ColorSliderContext));
-    let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, 'aria-label': ariaLabel } = props;
-    let vertical = orientation === 'vertical';
-    let { styleProps: styleProps } = (0, $fxUYb$useStyleProps)(props);
-    let { locale: locale } = (0, $fxUYb$useLocale)();
-    let state = (0, $fxUYb$useColorSliderState)({
-        ...props,
-        locale: locale
-    });
-    // If vertical and a label is provided, use it as an aria-label instead.
-    if (vertical && label) {
-        ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
-        label = null;
-    }
-    // If no external label, aria-label or aria-labelledby is provided,
-    // default to displaying the localized channel value.
-    // Specifically check if label is undefined. If label is `null` then display no visible label.
-    // A default aria-label is provided by useColorSlider in that case.
-    if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) label = state.value.getChannelName(channel, locale);
-    // Show the value label by default if there is a visible label
-    if (showValueLabel == null) showValueLabel = !!label;
-    let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $fxUYb$useColorSlider)({
-        ...props,
-        label: label,
-        'aria-label': ariaLabel,
-        trackRef: trackRef,
-        inputRef: inputRef
-    }, state);
-    let { isFocusVisible: isFocusVisible } = (0, $fxUYb$useFocusVisible)();
-    let [isFocused, setIsFocused] = (0, $fxUYb$useState)(false);
-    let { focusProps: focusProps } = (0, $fxUYb$useFocus)({
-        isDisabled: isDisabled,
-        onFocusChange: setIsFocused
-    });
-    return /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
-        ref: domRef,
-        ...styleProps,
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), {
-            'spectrum-ColorSlider-container--horizontal': !vertical,
-            'spectrum-ColorSlider-container--vertical': vertical
-        }, styleProps.className)
-    }, label && /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-labelContainer')
-    }, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$SlotProvider), {
-        slots: {
-            actionButton: {
-                UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-contextualHelp')
-            }
-        }
-    }, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $fxUYb$Label), {
-        elementType: "span",
-        UNSAFE_className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-valueLabel')
-    }, /*#__PURE__*/ (0, $fxUYb$react).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, $fxUYb$react).createElement("div", {
-        ...trackProps,
-        ref: trackRef,
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider', {
-            'is-disabled': isDisabled,
-            'spectrum-ColorSlider--vertical': vertical
-        })
-    }, /*#__PURE__*/ (0, $fxUYb$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
-        value: state.getDisplayColor(),
-        isFocused: isFocused && isFocusVisible,
-        isDisabled: isDisabled,
-        isDragging: state.isThumbDragging(0),
-        containerRef: trackRef,
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-handle'),
-        ...thumbProps
-    }, /*#__PURE__*/ (0, $fxUYb$react).createElement("input", {
-        ...inputProps,
-        ...focusProps,
-        ref: inputRef,
-        className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-slider')
-    }))));
-});
-
-
-export {$3870e4ce67ed7ee1$export$44fd664bcca5b6fb as ColorSlider};
-//# sourceMappingURL=ColorSlider.module.js.map

package/dist/ColorSlider.module.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/@react-spectrum/color/src/ColorSlider.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorSliderContext, useContextProps} from 'react-aria-components';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n  let inputRef = useRef(null);\n  let trackRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  [props, domRef] = useContextProps(props, domRef, ColorSliderContext);\n\n  let {\n    isDisabled,\n    channel,\n    orientation,\n    label,\n    showValueLabel,\n    'aria-label': ariaLabel\n  } = props;\n  let vertical = orientation === 'vertical';\n\n  let {styleProps} = useStyleProps(props);\n  let {locale} = useLocale();\n\n  let state = useColorSliderState({...props, locale});\n\n  // If vertical and a label is provided, use it as an aria-label instead.\n  if (vertical && label) {\n    ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n    label = null;\n  }\n\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  if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n    label = state.value.getChannelName(channel, locale);\n  }\n\n  // Show the value label by default if there is a visible label\n  if (showValueLabel == null) {\n    showValueLabel = !!label;\n  }\n\n  let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n    ...props,\n    label,\n    'aria-label': ariaLabel,\n    trackRef,\n    inputRef\n  }, state);\n\n  let {isFocusVisible} = useFocusVisible();\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusProps} = useFocus({\n    isDisabled,\n    onFocusChange: setIsFocused\n  });\n\n  return (\n    <div\n      ref={domRef}\n      {...styleProps}\n      className={classNames(\n        styles,\n        {\n          'spectrum-ColorSlider-container--horizontal': !vertical,\n          'spectrum-ColorSlider-container--vertical': vertical\n        },\n        styleProps.className\n      )}>\n      {label &&\n        <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n          <Label {...labelProps}>{label}</Label>\n          {props.contextualHelp &&\n            <SlotProvider\n              slots={{\n                actionButton: {\n                  UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n                }\n              }}>\n              {props.contextualHelp}\n            </SlotProvider>\n          }\n          {showValueLabel && (\n            <Label elementType=\"span\" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n              <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n            </Label>\n          )}\n        </div>\n      }\n      <div\n        {...trackProps}\n        ref={trackRef}\n        className={classNames(\n          styles,\n          'spectrum-ColorSlider', {\n            'is-disabled': isDisabled,\n            'spectrum-ColorSlider--vertical': vertical\n          }\n        )\n      }>\n        <ColorThumb\n          value={state.getDisplayColor()}\n          isFocused={isFocused && isFocusVisible}\n          isDisabled={isDisabled}\n          isDragging={state.isThumbDragging(0)}\n          containerRef={trackRef}\n          className={classNames(styles, 'spectrum-ColorSlider-handle')}\n          {...thumbProps}>\n          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n        </ColorThumb>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.module.js.map"}

package/dist/ColorSwatch.main.js

@@ -1,91 +0,0 @@
-require("./color.6dfdb0cd.css");
-var $ikjCA$reactariacolor = require("@react-aria/color");
-var $ikjCA$reactariacomponents = require("react-aria-components");
-var $ikjCA$react = require("react");
-var $ikjCA$reactspectrumutils = require("@react-spectrum/utils");
-
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-
-$parcel$export(module.exports, "SpectrumColorSwatchContext", () => $f076f5c85640192a$export$8529d7908a78c058);
-$parcel$export(module.exports, "ColorSwatch", () => $f076f5c85640192a$export$cae13e90592f246a);
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-const $f076f5c85640192a$export$8529d7908a78c058 = /*#__PURE__*/ (0, $ikjCA$react.createContext)(null);
-const $f076f5c85640192a$export$cae13e90592f246a = /*#__PURE__*/ (0, $ikjCA$react.forwardRef)(function ColorSwatch(props, ref) {
-    let domRef = (0, $ikjCA$reactspectrumutils.useDOMRef)(ref);
-    [props, domRef] = (0, $ikjCA$reactariacomponents.useContextProps)(props, domRef, (0, $ikjCA$reactariacomponents.ColorSwatchContext));
-    let { colorSwatchProps: colorSwatchProps, color: color } = (0, $ikjCA$reactariacolor.useColorSwatch)(props);
-    let { styleProps: styleProps } = (0, $ikjCA$reactspectrumutils.useStyleProps)(props);
-    let ctx = (0, $ikjCA$react.useContext)($f076f5c85640192a$export$8529d7908a78c058);
-    let { size: size = (ctx === null || ctx === void 0 ? void 0 : ctx.size) || 'M', rounding: rounding = (ctx === null || ctx === void 0 ? void 0 : ctx.rounding) || 'default' } = props;
-    let swatch = /*#__PURE__*/ (0, ($parcel$interopDefault($ikjCA$react))).createElement("div", {
-        ...colorSwatchProps,
-        ...styleProps,
-        ref: domRef,
-        style: {
-            ...styleProps.style,
-            // TODO: should there be a distinction between transparent and no value (e.g. null)?
-            background: color.getChannelValue('alpha') > 0 ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px` : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
-        },
-        className: styleProps.className + function anonymous(props) {
-            let rules = "";
-            if (props.size === "L") rules += ' s1-os1-k';
-            else if (props.size === "M") rules += ' s1-os1-i';
-            else if (props.size === "S") rules += ' s1-os1-g';
-            else if (props.size === "XS") rules += ' s1-os1-e';
-            if (props.size === "L") rules += ' s1-ns1-k';
-            else if (props.size === "M") rules += ' s1-ns1-i';
-            else if (props.size === "S") rules += ' s1-ns1-g';
-            else if (props.size === "XS") rules += ' s1-ns1-e';
-            if (props.rounding === "full") rules += ' s1-_qs1-f';
-            else if (props.rounding === "none") rules += ' s1-_qs1-a';
-            else if (props.rounding === "default") rules += ' s1-_qs1-c';
-            if (props.rounding === "full") rules += ' s1-_rs1-f';
-            else if (props.rounding === "none") rules += ' s1-_rs1-a';
-            else if (props.rounding === "default") rules += ' s1-_rs1-c';
-            if (props.rounding === "full") rules += ' s1-_ss1-f';
-            else if (props.rounding === "none") rules += ' s1-_ss1-a';
-            else if (props.rounding === "default") rules += ' s1-_ss1-c';
-            if (props.rounding === "full") rules += ' s1-_ts1-f';
-            else if (props.rounding === "none") rules += ' s1-_ts1-a';
-            else if (props.rounding === "default") rules += ' s1-_ts1-c';
-            rules += ' s1-c-1n5whoe';
-            rules += ' s1-ws1-b';
-            rules += ' s1-xs1-b';
-            rules += ' s1-us1-b';
-            rules += ' s1-vs1-b';
-            rules += ' s1-As1-a';
-            rules += ' s1-__ls1-a';
-            rules += ' s1-_us1-b';
-            return rules;
-        }({
-            size: size,
-            rounding: rounding
-        })
-    });
-    // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
-    if (ctx) return ctx.useWrapper(swatch, color, rounding);
-    return swatch;
-});
-
-
-//# sourceMappingURL=ColorSwatch.main.js.map

package/dist/ColorSwatch.main.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA2BM,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAA2B;IACrH,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,6CAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,oCAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,CAAA,gBAAA,0BAAA,IAAK,IAAI,KAAI,eACpB,WAAW,CAAA,gBAAA,0BAAA,IAAK,QAAQ,KAAI,WAC7B,GAAG;IAEJ,IAAI,uBACF,0DAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACN;QACA,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuB/B;kBAAC;sBAAM;QAAQ;;IAGtB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/color/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 {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color';\nimport {Color} from '@react-types/color';\nimport {ColorSwatchContext, useContextProps} from 'react-aria-components';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef, useStyleProps} from '@react-spectrum/utils';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\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}\n\ninterface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  let domRef = useDOMRef(ref);\n  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let {styleProps} = useStyleProps(props);\n  let ctx = useContext(SpectrumColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default'\n  } = props;\n\n  let swatch = (\n    <div\n      {...colorSwatchProps}\n      {...styleProps}\n      ref={domRef}\n      style={{\n        ...styleProps.style,\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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      }}\n      className={styleProps.className + style({\n        size: {\n          size: {\n            XS: 4,\n            S: 6,\n            M: 8,\n            L: 10\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'default',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        // Trick to create a partially transparent color from a variable.\n        // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n        borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none'\n      })({size, rounding})} />\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.main.js.map"}

package/dist/ColorSwatch.mjs

@@ -1,81 +0,0 @@
-import "./color.6dfdb0cd.css";
-import {useColorSwatch as $5Pjc1$useColorSwatch} from "@react-aria/color";
-import {useContextProps as $5Pjc1$useContextProps, ColorSwatchContext as $5Pjc1$ColorSwatchContext} from "react-aria-components";
-import $5Pjc1$react, {createContext as $5Pjc1$createContext, forwardRef as $5Pjc1$forwardRef, useContext as $5Pjc1$useContext} from "react";
-import {useDOMRef as $5Pjc1$useDOMRef, useStyleProps as $5Pjc1$useStyleProps} from "@react-spectrum/utils";
-
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-const $d68786ae409fa722$export$8529d7908a78c058 = /*#__PURE__*/ (0, $5Pjc1$createContext)(null);
-const $d68786ae409fa722$export$cae13e90592f246a = /*#__PURE__*/ (0, $5Pjc1$forwardRef)(function ColorSwatch(props, ref) {
-    let domRef = (0, $5Pjc1$useDOMRef)(ref);
-    [props, domRef] = (0, $5Pjc1$useContextProps)(props, domRef, (0, $5Pjc1$ColorSwatchContext));
-    let { colorSwatchProps: colorSwatchProps, color: color } = (0, $5Pjc1$useColorSwatch)(props);
-    let { styleProps: styleProps } = (0, $5Pjc1$useStyleProps)(props);
-    let ctx = (0, $5Pjc1$useContext)($d68786ae409fa722$export$8529d7908a78c058);
-    let { size: size = (ctx === null || ctx === void 0 ? void 0 : ctx.size) || 'M', rounding: rounding = (ctx === null || ctx === void 0 ? void 0 : ctx.rounding) || 'default' } = props;
-    let swatch = /*#__PURE__*/ (0, $5Pjc1$react).createElement("div", {
-        ...colorSwatchProps,
-        ...styleProps,
-        ref: domRef,
-        style: {
-            ...styleProps.style,
-            // TODO: should there be a distinction between transparent and no value (e.g. null)?
-            background: color.getChannelValue('alpha') > 0 ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px` : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
-        },
-        className: styleProps.className + function anonymous(props) {
-            let rules = "";
-            if (props.size === "L") rules += ' s1-os1-k';
-            else if (props.size === "M") rules += ' s1-os1-i';
-            else if (props.size === "S") rules += ' s1-os1-g';
-            else if (props.size === "XS") rules += ' s1-os1-e';
-            if (props.size === "L") rules += ' s1-ns1-k';
-            else if (props.size === "M") rules += ' s1-ns1-i';
-            else if (props.size === "S") rules += ' s1-ns1-g';
-            else if (props.size === "XS") rules += ' s1-ns1-e';
-            if (props.rounding === "full") rules += ' s1-_qs1-f';
-            else if (props.rounding === "none") rules += ' s1-_qs1-a';
-            else if (props.rounding === "default") rules += ' s1-_qs1-c';
-            if (props.rounding === "full") rules += ' s1-_rs1-f';
-            else if (props.rounding === "none") rules += ' s1-_rs1-a';
-            else if (props.rounding === "default") rules += ' s1-_rs1-c';
-            if (props.rounding === "full") rules += ' s1-_ss1-f';
-            else if (props.rounding === "none") rules += ' s1-_ss1-a';
-            else if (props.rounding === "default") rules += ' s1-_ss1-c';
-            if (props.rounding === "full") rules += ' s1-_ts1-f';
-            else if (props.rounding === "none") rules += ' s1-_ts1-a';
-            else if (props.rounding === "default") rules += ' s1-_ts1-c';
-            rules += ' s1-c-1n5whoe';
-            rules += ' s1-ws1-b';
-            rules += ' s1-xs1-b';
-            rules += ' s1-us1-b';
-            rules += ' s1-vs1-b';
-            rules += ' s1-As1-a';
-            rules += ' s1-__ls1-a';
-            rules += ' s1-_us1-b';
-            return rules;
-        }({
-            size: size,
-            rounding: rounding
-        })
-    });
-    // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
-    if (ctx) return ctx.useWrapper(swatch, color, rounding);
-    return swatch;
-});
-
-
-export {$d68786ae409fa722$export$8529d7908a78c058 as SpectrumColorSwatchContext, $d68786ae409fa722$export$cae13e90592f246a as ColorSwatch};
-//# sourceMappingURL=ColorSwatch.module.js.map

package/dist/ColorSwatch.module.js

@@ -1,81 +0,0 @@
-import "./color.6dfdb0cd.css";
-import {useColorSwatch as $5Pjc1$useColorSwatch} from "@react-aria/color";
-import {useContextProps as $5Pjc1$useContextProps, ColorSwatchContext as $5Pjc1$ColorSwatchContext} from "react-aria-components";
-import $5Pjc1$react, {createContext as $5Pjc1$createContext, forwardRef as $5Pjc1$forwardRef, useContext as $5Pjc1$useContext} from "react";
-import {useDOMRef as $5Pjc1$useDOMRef, useStyleProps as $5Pjc1$useStyleProps} from "@react-spectrum/utils";
-
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-const $d68786ae409fa722$export$8529d7908a78c058 = /*#__PURE__*/ (0, $5Pjc1$createContext)(null);
-const $d68786ae409fa722$export$cae13e90592f246a = /*#__PURE__*/ (0, $5Pjc1$forwardRef)(function ColorSwatch(props, ref) {
-    let domRef = (0, $5Pjc1$useDOMRef)(ref);
-    [props, domRef] = (0, $5Pjc1$useContextProps)(props, domRef, (0, $5Pjc1$ColorSwatchContext));
-    let { colorSwatchProps: colorSwatchProps, color: color } = (0, $5Pjc1$useColorSwatch)(props);
-    let { styleProps: styleProps } = (0, $5Pjc1$useStyleProps)(props);
-    let ctx = (0, $5Pjc1$useContext)($d68786ae409fa722$export$8529d7908a78c058);
-    let { size: size = (ctx === null || ctx === void 0 ? void 0 : ctx.size) || 'M', rounding: rounding = (ctx === null || ctx === void 0 ? void 0 : ctx.rounding) || 'default' } = props;
-    let swatch = /*#__PURE__*/ (0, $5Pjc1$react).createElement("div", {
-        ...colorSwatchProps,
-        ...styleProps,
-        ref: domRef,
-        style: {
-            ...styleProps.style,
-            // TODO: should there be a distinction between transparent and no value (e.g. null)?
-            background: color.getChannelValue('alpha') > 0 ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px` : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
-        },
-        className: styleProps.className + function anonymous(props) {
-            let rules = "";
-            if (props.size === "L") rules += ' s1-os1-k';
-            else if (props.size === "M") rules += ' s1-os1-i';
-            else if (props.size === "S") rules += ' s1-os1-g';
-            else if (props.size === "XS") rules += ' s1-os1-e';
-            if (props.size === "L") rules += ' s1-ns1-k';
-            else if (props.size === "M") rules += ' s1-ns1-i';
-            else if (props.size === "S") rules += ' s1-ns1-g';
-            else if (props.size === "XS") rules += ' s1-ns1-e';
-            if (props.rounding === "full") rules += ' s1-_qs1-f';
-            else if (props.rounding === "none") rules += ' s1-_qs1-a';
-            else if (props.rounding === "default") rules += ' s1-_qs1-c';
-            if (props.rounding === "full") rules += ' s1-_rs1-f';
-            else if (props.rounding === "none") rules += ' s1-_rs1-a';
-            else if (props.rounding === "default") rules += ' s1-_rs1-c';
-            if (props.rounding === "full") rules += ' s1-_ss1-f';
-            else if (props.rounding === "none") rules += ' s1-_ss1-a';
-            else if (props.rounding === "default") rules += ' s1-_ss1-c';
-            if (props.rounding === "full") rules += ' s1-_ts1-f';
-            else if (props.rounding === "none") rules += ' s1-_ts1-a';
-            else if (props.rounding === "default") rules += ' s1-_ts1-c';
-            rules += ' s1-c-1n5whoe';
-            rules += ' s1-ws1-b';
-            rules += ' s1-xs1-b';
-            rules += ' s1-us1-b';
-            rules += ' s1-vs1-b';
-            rules += ' s1-As1-a';
-            rules += ' s1-__ls1-a';
-            rules += ' s1-_us1-b';
-            return rules;
-        }({
-            size: size,
-            rounding: rounding
-        })
-    });
-    // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
-    if (ctx) return ctx.useWrapper(swatch, color, rounding);
-    return swatch;
-});
-
-
-export {$d68786ae409fa722$export$8529d7908a78c058 as SpectrumColorSwatchContext, $d68786ae409fa722$export$cae13e90592f246a as ColorSwatch};
-//# sourceMappingURL=ColorSwatch.module.js.map

package/dist/ColorSwatch.module.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;AA2BM,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAA2B;IACrH,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,yBAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,CAAA,gBAAA,0BAAA,IAAK,IAAI,KAAI,eACpB,WAAW,CAAA,gBAAA,0BAAA,IAAK,QAAQ,KAAI,WAC7B,GAAG;IAEJ,IAAI,uBACF,gCAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACN;QACA,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuB/B;kBAAC;sBAAM;QAAQ;;IAGtB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/color/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 {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color';\nimport {Color} from '@react-types/color';\nimport {ColorSwatchContext, useContextProps} from 'react-aria-components';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef, useStyleProps} from '@react-spectrum/utils';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\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}\n\ninterface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  let domRef = useDOMRef(ref);\n  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n  let {colorSwatchProps, color} = useColorSwatch(props);\n  let {styleProps} = useStyleProps(props);\n  let ctx = useContext(SpectrumColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default'\n  } = props;\n\n  let swatch = (\n    <div\n      {...colorSwatchProps}\n      {...styleProps}\n      ref={domRef}\n      style={{\n        ...styleProps.style,\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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      }}\n      className={styleProps.className + style({\n        size: {\n          size: {\n            XS: 4,\n            S: 6,\n            M: 8,\n            L: 10\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'default',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        // Trick to create a partially transparent color from a variable.\n        // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n        borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none'\n      })({size, rounding})} />\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.module.js.map"}