@zendeskgarden/react-colorpickers 9.0.0-next.2 → 9.0.0-next.21

package/dist/esm/styled/ColorPicker/StyledColorWellThumb.js

@@ -0,0 +1,51 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { stripUnit } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    hue: 'white'
+  });
+  const boxShadow = `${theme.shadows.xs(getColor({
+    theme,
+    hue: 'black'
+  }))}`;
+  return css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const borderWidth = stripUnit(theme.borderWidths.sm) * 2;
+  const size = theme.space.base * 5;
+  const translateValue = size / -2;
+  return css(["transform:translate(", "px,", "px);box-sizing:border-box;border-width:", "px;width:", "px;height:", "px;"], translateValue, translateValue, borderWidth, size, size);
+};
+const StyledColorWellThumb = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  'data-test-id': 'colorwell-thumb',
+  style: {
+    top: `${props.top}%`,
+    left: `${props.left}%`
+  }
+})).withConfig({
+  displayName: "StyledColorWellThumb",
+  componentId: "sc-1npyab0-0"
+})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledColorWellThumb.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledColorWellThumb };

package/dist/esm/styled/ColorPicker/StyledHexField.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { Field } from '@zendeskgarden/react-forms';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_hex_field';
+const StyledHexField = styled(Field).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  spellcheck: false
+}).withConfig({
+  displayName: "StyledHexField",
+  componentId: "sc-ijq1c-0"
+})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHexField.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHexField };

package/dist/esm/styled/ColorPicker/StyledHueRange.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_hue';
+const StyledHueRange = styled(StyledRange).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledHueRange",
+  componentId: "sc-1gdhww1-0"
+})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.$isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
+StyledHueRange.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHueRange };

package/dist/esm/styled/ColorPicker/StyledInput.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { Input } from '@zendeskgarden/react-forms';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_input';
+const StyledInput = styled(Input).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  focusInset: false
+}).withConfig({
+  displayName: "StyledInput",
+  componentId: "sc-1uzlutt-0"
+})(["text-align:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledInput };

package/dist/esm/styled/ColorPicker/StyledInputGroup.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_input_group';
+const StyledInputGroup = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledInputGroup",
+  componentId: "sc-1m9g2wg-0"
+})(["display:flex;justify-content:space-between;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledInputGroup.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledInputGroup };

package/dist/esm/styled/ColorPicker/StyledLabel.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { Label } from '@zendeskgarden/react-forms';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_label';
+const StyledLabel = styled(Label).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledLabel",
+  componentId: "sc-1vxt3m9-0"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLabel };

package/dist/esm/styled/ColorPicker/StyledPreview.js

@@ -0,0 +1,39 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { rgba } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getCheckeredBackground } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_preview_box';
+const background = props => {
+  const alpha = props.$alpha ? props.$alpha / 100 : 0;
+  let retVal = `rgba(${props.$red}, ${props.$green}, ${props.$blue}, ${alpha})`;
+  if (!props.$isOpaque) {
+    retVal = getCheckeredBackground({
+      theme: props.theme,
+      size: 13,
+      overlay: retVal
+    });
+  }
+  return retVal;
+};
+const StyledPreview = styled.div.attrs(props => ({
+  style: {
+    background: background(props)
+  },
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  'data-test-id': 'preview-box'
+})).withConfig({
+  displayName: "StyledPreview",
+  componentId: "sc-1z5nh7-0"
+})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.$isOpaque ? 6 : 8), props => props.theme.space.base * (props.$isOpaque ? 6 : 8), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPreview.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPreview };

package/dist/esm/styled/ColorPicker/StyledRGBAField.js

@@ -0,0 +1,32 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { Field } from '@zendeskgarden/react-forms';
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_rgb_field';
+const sizeStyles = theme => {
+  const margin = `${theme.space.base * 1.5}px`;
+  const width = `${theme.space.base * 12.75}px`;
+  return `
+    margin-${theme.rtl ? 'right' : 'left'}: ${margin};
+    width: ${width};
+    min-width: ${width};
+  `;
+};
+const StyledRGBAField = styled(Field).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledRGBAField",
+  componentId: "sc-13266k8-0"
+})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRGBAField.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRGBAField };

package/dist/esm/styled/ColorPicker/StyledSliderGroup.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_slider_group';
+const StyledSliderGroup = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledSliderGroup",
+  componentId: "sc-tigkzg-0"
+})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSliderGroup.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSliderGroup };

package/dist/esm/styled/ColorPicker/StyledSliders.js

@@ -0,0 +1,45 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getTrackHeight, getTrackMargin } from '../common/StyledRange.js';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_sliders';
+const sizeStyles = props => {
+  if (props.$isOpaque) {
+    return undefined;
+  }
+  const trackHeight = getTrackHeight(props);
+  const trackMargin = getTrackMargin(props);
+  return `
+    & > * {
+      position: absolute;
+      width: 100%;
+      height: ${trackMargin * 2 + trackHeight}px;
+    }
+
+    & > :first-child {
+      top: -${trackMargin}px;
+    }
+
+    & > :last-child {
+      bottom: -${trackMargin}px;
+    }
+  `;
+};
+const StyledSliders = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledSliders",
+  componentId: "sc-1lgr50m-0"
+})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSliders.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSliders };

package/dist/esm/styled/ColorPickerDialog/StyledButton.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { Button } from '@zendeskgarden/react-buttons';
+
+const StyledButton = styled(Button).attrs({
+  isNeutral: true,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledButton",
+  componentId: "sc-1dlijfv-0"
+})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md);
+StyledButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledButton };

package/dist/esm/styled/ColorPickerDialog/StyledButtonPreview.js

@@ -0,0 +1,52 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { rgba } from 'polished';
+import { getCheckeredBackground, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colordialog_preview';
+const background = _ref => {
+  let {
+    $backgroundColor,
+    theme
+  } = _ref;
+  let retVal;
+  if (typeof $backgroundColor === 'string') {
+    retVal = $backgroundColor;
+  } else if ($backgroundColor === undefined) {
+    retVal = theme.palette.white;
+  } else {
+    const {
+      red,
+      green,
+      blue,
+      alpha = 1
+    } = $backgroundColor;
+    retVal = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
+  }
+  return retVal;
+};
+const StyledButtonPreview = styled.span.attrs(props => ({
+  style: {
+    background: getCheckeredBackground({
+      theme: props.theme,
+      size: 8,
+      overlay: background(props)
+    })
+  },
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  'data-test-id': 'dialog-preview'
+})).withConfig({
+  displayName: "StyledButtonPreview",
+  componentId: "sc-yxis8h-0"
+})(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base, props => props.theme.borderRadii.sm, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledButtonPreview.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledButtonPreview };

package/dist/esm/styled/ColorPickerDialog/StyledTooltipBody.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { TooltipModal } from '@zendeskgarden/react-modals';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal_body';
+const StyledTooltipBody = styled(TooltipModal.Body).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTooltipBody",
+  componentId: "sc-1ueddpo-0"
+})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipBody.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipBody };

package/dist/esm/styled/ColorPickerDialog/StyledTooltipModal.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { TooltipModal } from '@zendeskgarden/react-modals';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal';
+const StyledTooltipModal = styled(TooltipModal).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTooltipModal",
+  componentId: "sc-gykkrw-0"
+})(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModal.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModal };

package/dist/esm/styled/ColorSwatch/StyledCell.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.swatch_cell';
+const StyledCell = styled.td.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledCell",
+  componentId: "sc-qr3oit-0"
+})(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCell };

package/dist/esm/styled/ColorSwatch/StyledColorSwatch.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.color_swatch';
+const StyledColorSwatch = styled.table.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledColorSwatch",
+  componentId: "sc-ajx440-0"
+})(["border-collapse:collapse;line-height:normal;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledColorSwatch.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledColorSwatch };

package/dist/esm/styled/ColorSwatch/StyledColorSwatchInput.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.color_swatch_input';
+const StyledColorSwatchInput = styled.input.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledColorSwatchInput",
+  componentId: "sc-em45h0-0"
+})(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledColorSwatchInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledColorSwatchInput };

package/dist/esm/styled/ColorSwatch/StyledColorSwatchLabel.js

@@ -0,0 +1,53 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { parseToRgb, readableColor } from 'polished';
+import { focusStyles, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledButtonPreview } from '../ColorPickerDialog/StyledButtonPreview.js';
+
+const COMPONENT_ID = 'colorpickers.color_swatch_label';
+const colorStyles = _ref => {
+  let {
+    $backgroundColor,
+    theme
+  } = _ref;
+  const {
+    alpha
+  } = parseToRgb($backgroundColor);
+  const returnIfLightColor = getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 900
+  });
+  let foregroundColor = returnIfLightColor;
+  if (alpha === undefined || alpha >= 0.4) {
+    const returnIfDarkColor = getColor({
+      theme,
+      hue: 'white'
+    });
+    foregroundColor = readableColor($backgroundColor, returnIfLightColor, returnIfDarkColor, false );
+  }
+  return `
+    color: ${foregroundColor};
+  `;
+};
+const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
+  as: 'label',
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledColorSwatchLabel",
+  componentId: "sc-1aghocg-0"
+})(["position:relative;top:0;border-radius:", ";", ";", " ", ";"], props => props.theme.borderRadii.md, colorStyles, props => focusStyles({
+  theme: props.theme,
+  selector: '&:has(:focus-visible)'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledColorSwatchLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledColorSwatchLabel };

package/dist/esm/styled/ColorSwatch/StyledIcon.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import SvgCheckSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledColorSwatchInput } from './StyledColorSwatchInput.js';
+
+const COMPONENT_ID = 'colorpickers.colorswatch_check';
+const StyledIcon = styled(SvgCheckSmFill).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledIcon",
+  componentId: "sc-8oigif-0"
+})(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIcon };