@react-spectrum/color 3.1.7 → 3.2.0

package/dist/zh-TW.module.js

@@ -1,12 +0,0 @@
-var $c6270153671dc8fc$exports = {};
-$c6270153671dc8fc$exports = {
-    "colorFormat": `\u{984F}\u{8272}\u{683C}\u{5F0F}`,
-    "hex": `Hex`,
-    "hsb": `HSB`,
-    "hsl": `HSL`,
-    "rgb": `RGB`
-};
-
-
-export {$c6270153671dc8fc$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -1 +0,0 @@
-{"mappings":";AAAA,4BAAiB;IAAG,eAAe,CAAC,gCAAI,CAAC;IACvC,OAAO,CAAC,GAAG,CAAC;IACZ,OAAO,CAAC,GAAG,CAAC;IACZ,OAAO,CAAC,GAAG,CAAC;IACZ,OAAO,CAAC,GAAG,CAAC;AACd","sources":["packages/@react-spectrum/color/intl/zh-TW.json"],"sourcesContent":["{\n  \"colorFormat\": \"顏色格式\",\n  \"hex\": \"Hex\",\n  \"hsb\": \"HSB\",\n  \"hsl\": \"HSL\",\n  \"rgb\": \"RGB\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/src/ColorArea.tsx

@@ -1,87 +0,0 @@
-/*
- * Copyright 2021 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.
- */
-
-import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {ColorAreaContext, useContextProps} from 'react-aria-components';
-import {ColorThumb} from './ColorThumb';
-import {FocusableRef} from '@react-types/shared';
-import {mergeProps} from '@react-aria/utils';
-import React, {ReactElement, useRef} from 'react';
-import {SpectrumColorAreaProps} from '@react-types/color';
-import styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';
-import {useColorArea} from '@react-aria/color';
-import {useColorAreaState} from '@react-stately/color';
-import {useFocusRing} from '@react-aria/focus';
-import {useProviderProps} from '@react-spectrum/provider';
-
-/**
- * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- */
-export const ColorArea = React.forwardRef(function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {
-  props = useProviderProps(props);
-  let inputXRef = useRef(null);
-  let inputYRef = useRef(null);
-  let containerRef = useFocusableRef(ref, inputXRef);
-  [props, containerRef] = useContextProps(props, containerRef, ColorAreaContext);
-
-  let {isDisabled} = props;
-  let size = props.size && dimensionValue(props.size);
-  let {styleProps} = useStyleProps(props);
-
-
-  let state = useColorAreaState(props);
-
-  let {
-    colorAreaProps,
-    xInputProps,
-    yInputProps,
-    thumbProps
-  } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);
-  let {focusProps, isFocusVisible} = useFocusRing();
-
-  return (
-    <div
-      {...colorAreaProps}
-      className={
-        classNames(
-          styles,
-          'spectrum-ColorArea',
-          {
-            'is-disabled': isDisabled
-          },
-          styleProps.className
-        )
-      }
-      ref={containerRef}
-      style={{
-        ...(isDisabled ? {} : colorAreaProps.style),
-        ...styleProps.style,
-        // Workaround around https://github.com/adobe/spectrum-css/issues/1032
-        width: size,
-        height: size
-      }}>
-      <ColorThumb
-        value={state.getDisplayColor()}
-        isFocused={isFocusVisible}
-        isDisabled={isDisabled}
-        isDragging={state.isDragging}
-        containerRef={containerRef}
-        className={classNames(styles, 'spectrum-ColorArea-handle')}
-        {...thumbProps}>
-        <div role="presentation">
-          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />
-          <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />
-        </div>
-      </ColorThumb>
-    </div>
-  );
-}) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;

package/src/ColorEditor.tsx

@@ -1,60 +0,0 @@
-import {ColorArea} from './ColorArea';
-import {ColorField} from './ColorField';
-import {ColorSlider} from './ColorSlider';
-import {ColorSpace} from '@react-types/color';
-import {DOMRef} from '@react-types/shared';
-import {getColorChannels} from '@react-stately/color';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {Item, Picker} from '@react-spectrum/picker';
-import React, {CSSProperties, useState} from 'react';
-import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
-import {useDOMRef} from '@react-spectrum/utils';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-
-export interface SpectrumColorEditorProps {
-  /** Whether to hide the alpha channel color slider and color field. */
-  hideAlphaChannel?: boolean
-}
-
-/**
- * ColorEditor provides a default UI for editing colors within a ColorPicker.
- */
-export const ColorEditor = React.forwardRef(function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
-  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
-  let domRef = useDOMRef(ref);
-  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');
-
-  return (
-    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>
-      <div className={style({display: 'flex', gap: 4})()}>
-        <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
-        <ColorSlider colorSpace="hsb" channel="hue" orientation="vertical" />
-        {!props.hideAlphaChannel &&
-          <ColorSlider channel="alpha" orientation="vertical" />
-        }
-      </div>
-      <div className={style({display: 'flex', gap: 4})()}>
-        <Picker
-          aria-label={formatter.format('colorFormat')}
-          isQuiet
-          width="size-700"
-          menuWidth="size-1000"
-          selectedKey={format}
-          onSelectionChange={f => setFormat(f as typeof format)}>
-          <Item key="hex">{formatter.format('hex')}</Item>
-          <Item key="rgb">{formatter.format('rgb')}</Item>
-          <Item key="hsl">{formatter.format('hsl')}</Item>
-          <Item key="hsb">{formatter.format('hsb')}</Item>
-        </Picker>
-        {format === 'hex'
-          ? <ColorField isQuiet width="size-1000" aria-label={formatter.format('hex')} />
-          : getColorChannels(format).map(channel => (
-            <ColorField key={channel} colorSpace={format} channel={channel} isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />
-          ))}
-        {!props.hideAlphaChannel &&
-          <ColorField channel="alpha" isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />}
-      </div>
-    </div>
-  );
-});

package/src/ColorField.tsx

@@ -1,111 +0,0 @@
-/*
- * 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.
- */
-
-import {classNames} from '@react-spectrum/utils';
-import {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';
-import {ColorFieldContext, useContextProps} from 'react-aria-components';
-import React, {Ref, useEffect, useRef} from 'react';
-import styles from './colorfield.css';
-import {TextFieldBase} from '@react-spectrum/textfield';
-import {TextFieldRef} from '@react-types/textfield';
-import {useColorChannelField, useColorField} from '@react-aria/color';
-import {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';
-import {useFormProps} from '@react-spectrum/form';
-import {useLocale} from '@react-aria/i18n';
-import {useProviderProps} from '@react-spectrum/provider';
-
-/**
- * A color field allows users to edit a hex color or individual color channel value.
- */
-export const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
-  props = useProviderProps(props);
-  props = useFormProps(props);
-  [props] = useContextProps(props, null, ColorFieldContext);
-  
-  let hasWarned = useRef(false);
-  useEffect(() => {
-    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
-      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
-      hasWarned.current = true;
-    }
-  }, [props.placeholder]);
-
-  if (props.channel) {
-    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;
-  } else {
-    return <HexColorField {...props} forwardedRef={ref} />;
-  }
-});
-
-interface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {
-  channel: ColorChannel,
-  forwardedRef: Ref<TextFieldRef>
-}
-
-function ColorChannelField(props: ColorChannelFieldProps) {
-  let {
-    // These disabled props are handled by the state hook
-    value,          // eslint-disable-line @typescript-eslint/no-unused-vars
-    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars
-    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars
-    validate,       // eslint-disable-line @typescript-eslint/no-unused-vars
-    forwardedRef,
-    ...otherProps
-  } = props;
-  let {locale} = useLocale();
-  let state = useColorChannelFieldState({
-    ...props,
-    locale
-  });
-
-  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
-  let result = useColorChannelField(otherProps, state, inputRef);
-
-  return (
-    <>
-      <TextFieldBase
-        {...otherProps}
-        ref={forwardedRef}
-        inputRef={inputRef}
-        {...result}
-        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />
-      {props.name && <input type="hidden" name={props.name} form={props.form} value={isNaN(state.numberValue) ? '' : state.numberValue} />}
-    </>
-  );
-}
-
-interface HexColorFieldProps extends SpectrumColorFieldProps {
-  forwardedRef: Ref<TextFieldRef>
-}
-
-function HexColorField(props: HexColorFieldProps) {
-  let {
-    // These disabled props are handled by the state hook
-    value,          // eslint-disable-line @typescript-eslint/no-unused-vars
-    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars
-    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars
-    forwardedRef,
-    ...otherProps
-  } = props;
-  let state = useColorFieldState(props);
-  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
-  let result = useColorField(otherProps, state, inputRef);
-
-  return (
-    <TextFieldBase
-      {...otherProps}
-      ref={forwardedRef}
-      inputRef={inputRef}
-      {...result}
-      inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />
-  );
-}

package/src/ColorPicker.tsx

@@ -1,120 +0,0 @@
-/*
- * 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.
- */
-
-import {ColorPicker as AriaColorPicker, Button, Color} from 'react-aria-components';
-import {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';
-import {ColorSwatch} from './ColorSwatch';
-import {Content} from '@react-spectrum/view';
-import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
-import React, {ReactNode, useRef} from 'react';
-import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
-import {unwrapDOMRef, useFocusableRef} from '@react-spectrum/utils';
-import {useId} from '@react-aria/utils';
-
-export interface SpectrumColorPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps {
-  /** A visual label for the color picker. */
-  label?: ReactNode,
-  /** The contents of the color picker popover, e.g. `<ColorEditor />`. */
-  children?: ReactNode,
-  /**
-   * The size of the color swatch.
-   * @default "M"
-   */
-  size?: 'XS' | 'S' | 'M' | 'L',
-  /**
-   * The corner rounding of the color swatch.
-   * @default "default"
-   */
-  rounding?: 'default' | 'none' | 'full'
-}
-
-/**
- * A ColorPicker combines a swatch with a customizable popover for editing a color.
- */
-export const ColorPicker = React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {
-  let swatchRef = useRef(null);
-  let domRef = useFocusableRef(ref);
-  let labelId = useId();
-  return (
-    <AriaColorPicker {...props}>
-      <DialogTrigger type="popover" mobileType="tray" targetRef={unwrapDOMRef(swatchRef)}>
-        <Button 
-          ref={domRef}
-          className={style({
-            backgroundColor: 'transparent',
-            borderStyle: 'none',
-            padding: 0,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 'text-to-control',
-            outlineStyle: 'none',
-            fontFamily: 'sans',
-            color: 'body',
-            fontSize: {
-              size: {
-                XS: 'xs',
-                S: 'sm',
-                M: 'base',
-                L: 'lg'
-              }
-            }
-          })({size: props.size || 'M'})}>
-          {({isFocusVisible}) => (
-            <>
-              <div
-                className={style({
-                  outlineStyle: {
-                    default: 'none',
-                    isFocusVisible: 'solid'
-                  },
-                  outlineColor: 'focus-ring',
-                  outlineWidth: 2,
-                  outlineOffset: 2,
-                  borderRadius: 'default'
-                })({isFocusVisible})}>
-                <ColorSwatch
-                  ref={swatchRef}
-                  color={props.value}
-                  size={props.size}
-                  rounding={props.rounding}
-                  aria-label={props['aria-label']}
-                  aria-labelledby={props['aria-labelledby']}
-                  aria-describedby={props['aria-describedby']}
-                  aria-details={props['aria-details']} />
-              </div>
-              {props.label && 
-                <span id={labelId}>{props.label}</span>
-              }
-            </>
-          )}
-        </Button>
-        <Dialog 
-          aria-labelledby={props.label ? labelId : props['aria-labelledby']}
-          aria-label={props['aria-label']}
-          UNSAFE_style={{
-            width: 'fit-content',
-            minWidth: 0,
-            margin: '0 auto' // Center within tray.
-          }}>
-          <Content 
-            UNSAFE_style={{
-              position: 'relative',
-              margin: 'calc(var(--spectrum-dialog-padding) * -1)',
-              padding: 'var(--spectrum-global-dimension-size-200)'
-            }}>
-            {props.children}
-          </Content>
-        </Dialog>
-      </DialogTrigger>
-    </AriaColorPicker>
-  );
-});

package/src/ColorSlider.tsx

@@ -1,142 +0,0 @@
-/*
- * 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.
- */
-
-import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {ColorSliderContext, useContextProps} from 'react-aria-components';
-import {ColorThumb} from './ColorThumb';
-import {FocusableRef} from '@react-types/shared';
-import {Label} from '@react-spectrum/label';
-import React, {useRef, useState} from 'react';
-import {SpectrumColorSliderProps} from '@react-types/color';
-import styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';
-import {useColorSlider} from '@react-aria/color';
-import {useColorSliderState} from '@react-stately/color';
-import {useFocus, useFocusVisible} from '@react-aria/interactions';
-import {useLocale} from '@react-aria/i18n';
-import {useProviderProps} from '@react-spectrum/provider';
-
-/**
- * ColorSliders allow users to adjust an individual channel of a color value.
- */
-export const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {
-  props = useProviderProps(props);
-  let inputRef = useRef(null);
-  let trackRef = useRef(null);
-  let domRef = useFocusableRef(ref, inputRef);
-  [props, domRef] = useContextProps(props, domRef, ColorSliderContext);
-
-  let {
-    isDisabled,
-    channel,
-    orientation,
-    label,
-    showValueLabel,
-    'aria-label': ariaLabel
-  } = props;
-  let vertical = orientation === 'vertical';
-
-  let {styleProps} = useStyleProps(props);
-  let {locale} = useLocale();
-
-  let state = useColorSliderState({...props, 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, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({
-    ...props,
-    label,
-    'aria-label': ariaLabel,
-    trackRef,
-    inputRef
-  }, state);
-
-  let {isFocusVisible} = useFocusVisible();
-  let [isFocused, setIsFocused] = useState(false);
-  let {focusProps} = useFocus({
-    isDisabled,
-    onFocusChange: setIsFocused
-  });
-
-  return (
-    <div
-      ref={domRef}
-      {...styleProps}
-      className={classNames(
-        styles,
-        {
-          'spectrum-ColorSlider-container--horizontal': !vertical,
-          'spectrum-ColorSlider-container--vertical': vertical
-        },
-        styleProps.className
-      )}>
-      {label &&
-        <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>
-          <Label {...labelProps}>{label}</Label>
-          {props.contextualHelp &&
-            <SlotProvider
-              slots={{
-                actionButton: {
-                  UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')
-                }
-              }}>
-              {props.contextualHelp}
-            </SlotProvider>
-          }
-          {showValueLabel && (
-            <Label elementType="span" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>
-              <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>
-            </Label>
-          )}
-        </div>
-      }
-      <div
-        {...trackProps}
-        ref={trackRef}
-        className={classNames(
-          styles,
-          'spectrum-ColorSlider', {
-            'is-disabled': isDisabled,
-            'spectrum-ColorSlider--vertical': vertical
-          }
-        )
-      }>
-        <ColorThumb
-          value={state.getDisplayColor()}
-          isFocused={isFocused && isFocusVisible}
-          isDisabled={isDisabled}
-          isDragging={state.isThumbDragging(0)}
-          containerRef={trackRef}
-          className={classNames(styles, 'spectrum-ColorSlider-handle')}
-          {...thumbProps}>
-          <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />
-        </ColorThumb>
-      </div>
-    </div>
-  );
-});

package/src/ColorSwatch.tsx

@@ -1,99 +0,0 @@
-/*
- * 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.
- */
-
-import {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color';
-import {Color} from '@react-types/color';
-import {ColorSwatchContext, useContextProps} from 'react-aria-components';
-import {DOMRef, StyleProps} from '@react-types/shared';
-import React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';
-import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
-import {useDOMRef, useStyleProps} from '@react-spectrum/utils';
-
-export interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {
-  /**
-   * The size of the ColorSwatch.
-   * @default "M"
-   */
-  size?: 'XS' | 'S' | 'M' | 'L',
-  /**
-   * The corner rounding of the ColorSwatch.
-   * @default "default"
-   */
-  rounding?: 'default' | 'none' | 'full'
-}
-
-interface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps, 'size' | 'rounding'> {
-  useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element
-}
-
-export const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
-
-/**
- * A ColorSwatch displays a preview of a selected color.
- */
-export const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
-  let domRef = useDOMRef(ref);
-  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);
-  let {colorSwatchProps, color} = useColorSwatch(props);
-  let {styleProps} = useStyleProps(props);
-  let ctx = useContext(SpectrumColorSwatchContext);
-  let {
-    size = ctx?.size || 'M',
-    rounding = ctx?.rounding || 'default'
-  } = props;
-
-  let swatch = (
-    <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`
-          // Red slash to indicate there is no selected color.
-          : '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 + style({
-        size: {
-          size: {
-            XS: 4,
-            S: 6,
-            M: 8,
-            L: 10
-          }
-        },
-        borderRadius: {
-          rounding: {
-            default: 'default',
-            none: 'none',
-            full: 'full'
-          }
-        },
-        // Trick to create a partially transparent color from a variable.
-        // Ideally we'd use relative color syntax for this but it's not in Firefox yet.
-        borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        boxSizing: 'border-box',
-        forcedColorAdjust: 'none'
-      })({size, rounding})} />
-  );
-
-  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
-  if (ctx) {
-    return ctx.useWrapper(swatch, color, rounding);
-  }
-
-  return swatch;
-});