@zendeskgarden/react-colorpickers 8.75.1 → 8.76.0

package/dist/esm/styled/Colorpicker/StyledColorWell.js

@@ -0,0 +1,36 @@
+/**
+* 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, hsl } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_colorwell';
+const background = props => {
+  const blackAlpha = rgba(props.theme.palette.black, 0.9);
+  const black = `linear-gradient(0deg, ${props.theme.palette.black}, ${blackAlpha} 1%, transparent 99%)`;
+  const whiteAngle = `${props.theme.rtl ? -90 : 90}deg`;
+  const white = `linear-gradient(${whiteAngle}, ${props.theme.palette.white} 1%, transparent)`;
+  const colorValue = hsl(props.hue, 1, 0.5);
+  const color = `linear-gradient(${colorValue}, ${colorValue})`;
+  return `${black}, ${white}, ${color}`;
+};
+const StyledColorWell = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  'data-test-id': 'colorwell',
+  style: {
+    background: background(props)
+  }
+})).withConfig({
+  displayName: "StyledColorWell",
+  componentId: "sc-54ly7s-0"
+})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledColorWell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledColorWell };

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

@@ -0,0 +1,40 @@
+/**
+* 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 { stripUnit } from 'polished';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb';
+const sizeStyles = theme => {
+  const borderWidth = stripUnit(theme.borderWidths.sm) * 2;
+  const size = theme.space.base * 5;
+  const translateValue = size / -2;
+  return `
+    transform: translate(${translateValue}px, ${translateValue}px);
+    box-sizing: border-box;
+    border-width: ${borderWidth}px;
+    width: ${size}px;
+    height: ${size}px;
+  `;
+};
+const StyledColorWellThumb = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  'data-test-id': 'colorwell-thumb',
+  style: {
+    top: `${props.top}%`,
+    left: `${props.left}%`
+  }
+})).withConfig({
+  displayName: "StyledColorWellThumb",
+  componentId: "sc-1pnz3jz-0"
+})(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.theme.palette.white, props => props.theme.shadows.lg(`${props.theme.space.base}px`, `${props.theme.space.base * 2}px`, getColorV8('neutralHue', 800, props.theme, 0.24)), props => sizeStyles(props.theme), 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': '8.76.0',
+  spellcheck: false
+}).withConfig({
+  displayName: "StyledHexField",
+  componentId: "sc-1lk14t4-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': '8.76.0'
+}).withConfig({
+  displayName: "StyledHueRange",
+  componentId: "sc-13ly7p-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': '8.76.0',
+  focusInset: false
+}).withConfig({
+  displayName: "StyledInput",
+  componentId: "sc-1iap93p-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': '8.76.0'
+}).withConfig({
+  displayName: "StyledInputGroup",
+  componentId: "sc-mmy93w-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': '8.76.0'
+}).withConfig({
+  displayName: "StyledLabel",
+  componentId: "sc-1klhp6m-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,37 @@
+/**
+* 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 } from '@zendeskgarden/react-theming';
+import { checkeredBackground } from '../common/checkeredBackground.js';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_preview_box';
+const background = props => {
+  const alpha = props.alpha ? props.alpha / 100 : 0;
+  const color = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
+  let retVal = `linear-gradient(${color}, ${color})`;
+  if (!props.isOpaque) {
+    retVal = `${retVal}, ${checkeredBackground(props.theme, 13)}`;
+  }
+  return retVal;
+};
+const StyledPreview = styled.div.attrs(props => ({
+  style: {
+    background: background(props)
+  },
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  'data-test-id': 'preview-box'
+})).withConfig({
+  displayName: "StyledPreview",
+  componentId: "sc-d70mj1-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': '8.76.0'
+}).withConfig({
+  displayName: "StyledRGBAField",
+  componentId: "sc-ibo1yw-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': '8.76.0'
+}).withConfig({
+  displayName: "StyledSliderGroup",
+  componentId: "sc-rsq0ak-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,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 { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_sliders';
+const StyledSliders = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSliders",
+  componentId: "sc-aclca2-0"
+})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => getTrackMargin(props) * 2 + getTrackHeight(props), getTrackMargin, getTrackMargin, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSliders.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSliders };

package/dist/esm/styled/ColorpickerDialog/StyledButton.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 { Button } from '@zendeskgarden/react-buttons';
+
+const COMPONENT_ID = 'colorpickers.colordialog_button';
+const StyledButton = styled(Button).attrs({
+  isNeutral: true,
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledButton",
+  componentId: "sc-101xjve-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, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledButton };

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

@@ -0,0 +1,48 @@
+/**
+* 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 } from '@zendeskgarden/react-theming';
+import { checkeredBackground } from '../common/checkeredBackground.js';
+
+const COMPONENT_ID = 'colorpickers.colordialog_preview';
+const background = props => {
+  const {
+    backgroundColor
+  } = props;
+  let color;
+  if (typeof backgroundColor === 'string') {
+    color = backgroundColor;
+  } else if (backgroundColor === undefined) {
+    color = props.theme.palette.white;
+  } else {
+    const {
+      red,
+      green,
+      blue,
+      alpha = 1
+    } = backgroundColor;
+    color = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
+  }
+  return `linear-gradient(${color}, ${color})`;
+};
+const StyledButtonPreview = styled.span.attrs(props => ({
+  style: {
+    background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
+  },
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  'data-test-id': 'dialog-preview'
+})).withConfig({
+  displayName: "StyledButtonPreview",
+  componentId: "sc-1jzysg3-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': '8.76.0'
+}).withConfig({
+  displayName: "StyledTooltipBody",
+  componentId: "sc-6gsgsy-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': '8.76.0'
+}).withConfig({
+  displayName: "StyledTooltipModal",
+  componentId: "sc-o022s8-0"
+})(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltipModal.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltipModal };

package/dist/esm/styled/common/StyledRange.js

@@ -0,0 +1,151 @@
+/**
+* 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 { Range } from '@zendeskgarden/react-forms';
+import styled from 'styled-components';
+import { stripUnit, math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colorpicker_range';
+const thumbStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-thumb {
+      ${styles}
+    }
+
+    &${modifier}::-ms-thumb {
+      ${styles}
+    }
+
+    &${modifier}::-webkit-slider-thumb {
+      ${styles}
+    }
+  `;
+};
+const trackStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-track {
+      ${styles}
+    }
+
+    &${modifier}::-ms-track {
+      ${styles}
+    }
+
+    &${modifier}::-webkit-slider-runnable-track {
+      ${styles}
+    }
+  `;
+};
+const trackLowerStyles = function (styles) {
+  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return `
+    &${modifier}::-moz-range-progress {
+      ${styles}
+    }
+
+    &${modifier}::-ms-fill-lower {
+      ${styles}
+    }
+  `;
+};
+const colorStyles = props => {
+  const thumbBackgroundColor = getColorV8('neutralHue', 100, props.theme);
+  const thumbBorderColor = thumbBackgroundColor;
+  const thumbActiveBackgroundColor = getColorV8('neutralHue', 200, props.theme);
+  const thumbActiveBorderColor = getColorV8('primaryHue', 600, props.theme);
+  const thumbFocusBorderColor = getColorV8('primaryHue', 400, props.theme);
+  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
+  const thumbHoverBorderColor = thumbHoverBackgroundColor;
+  return `
+    border-color: ${props.isOpaque && getColorV8('background', 600 , props.theme)};
+
+    ${trackStyles(`
+      background-color: transparent;
+    `)}
+
+    ${thumbStyles(`
+      border-color: ${thumbBorderColor};
+      background-color: ${thumbBackgroundColor};
+    `)}
+
+    ${trackLowerStyles(`
+      background-color: transparent;
+    `)}
+
+    ${thumbStyles(`
+        border-color: ${thumbHoverBorderColor};
+        background-color: ${thumbHoverBackgroundColor};
+      `, ':hover')}
+
+    ${thumbStyles(`
+        background-color: ${thumbBackgroundColor};
+        border-color: ${thumbFocusBorderColor};
+      `, '[data-garden-focus-visible="true"]')}
+
+    ${thumbStyles(`
+        border-color: ${thumbActiveBorderColor};
+        background-color: ${thumbActiveBackgroundColor}
+      `, ':active')}
+  `;
+};
+const getThumbSize = props => props.theme.space.base * (props.isOpaque ? 6 : 4);
+const getTrackHeight = props => props.theme.space.base * (props.isOpaque ? 6 : 3);
+const getTrackMargin = props => (getThumbSize(props) - getTrackHeight(props)) / 2 + stripUnit(props.theme.shadowWidths.md);
+const sizeStyles = props => {
+  const thumbSize = getThumbSize(props);
+  const trackHeight = getTrackHeight(props);
+  const trackMargin = getTrackMargin(props);
+  const thumbMargin = (trackHeight - thumbSize) / 2;
+  const trackOffset = props.theme.space.base * (props.isOpaque ? -2 : -1);
+  const height = props.isOpaque ? trackHeight : trackMargin * 2 + trackHeight;
+  let marginHorizontal;
+  let border;
+  let borderRadius;
+  if (props.isOpaque) {
+    marginHorizontal = `-${trackMargin}px`;
+    border = `${trackMargin}px ${props.theme.borderStyles.solid}`;
+    borderRadius = `${trackMargin + stripUnit(props.theme.shadowWidths.md)}px`;
+  }
+  return `
+    /* stylelint-disable-next-line declaration-no-important */
+    margin-top: 0 !important;
+    margin-${props.theme.rtl ? 'right' : 'left'}: ${marginHorizontal};
+    height: ${height}px; /* [1] */
+    box-sizing: content-box; /* [2] */
+    border: ${border};
+    border-radius: ${borderRadius};
+
+    ${trackStyles(`
+      margin: ${trackMargin}px ${trackOffset}px;
+      height: ${trackHeight}px;
+    `)}
+
+    ${thumbStyles(`
+      margin: ${thumbMargin}px 0;
+      border-width: ${math(`${props.theme.borderWidths.sm} * 2`)};
+      height: ${thumbSize}px;
+      width: ${thumbSize}px;
+    `)};
+  `;
+};
+const StyledRange = styled(Range).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  hasLowerTrack: false
+}).withConfig({
+  displayName: "StyledRange",
+  componentId: "sc-ug3wi9-0"
+})(["", ";", " ", ";", ";"], sizeStyles, trackStyles(`
+    border-radius: 0;
+  `), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRange.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRange, getTrackHeight, getTrackMargin, trackStyles };

package/dist/esm/styled/common/checkeredBackground.js

@@ -0,0 +1,28 @@
+/**
+* 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 { getColorV8 } from '@zendeskgarden/react-theming';
+
+const checkeredBackground = function (theme, size) {
+  let positionY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let repeat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'repeat';
+  const color = getColorV8('neutralHue', 400, theme);
+  const dimensions = `${size}px ${size}px`;
+  const positionX1 = theme.rtl ? '100%' : '0';
+  const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`;
+  const position1 = `${positionX1} ${positionY}px`;
+  const position2 = `${positionX2} ${size / 2 + positionY}px`;
+  const position3 = `${positionX2} ${positionY}px`;
+  const position4 = `${positionX1} ${size / -2 + positionY}px`;
+  return `
+    linear-gradient(45deg, ${color} 25%, transparent 25%) ${position1} / ${dimensions} ${repeat},
+    linear-gradient(45deg, transparent 75%, ${color} 75%) ${position2} / ${dimensions} ${repeat},
+    linear-gradient(135deg, ${color} 25%, transparent 25%) ${position3} / ${dimensions} ${repeat},
+    linear-gradient(135deg, transparent 75%, ${color} 75%) ${position4} / ${dimensions} ${repeat}
+  `;
+};
+
+export { checkeredBackground };

package/dist/esm/utils/conversion.js

@@ -0,0 +1,34 @@
+/**
+* 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.
+*/
+function hslToHsv(h, s, l) {
+  let saturation = s;
+  saturation *= (l < 50 ? l : 100 - l) / 100;
+  const v = l + saturation;
+  return {
+    h,
+    s: v === 0 ? 0 : 2 * saturation / v * 100,
+    v
+  };
+}
+function hsvToHsl(h, s, v) {
+  let saturation = s;
+  let value = v;
+  saturation /= 100;
+  value /= 100;
+  let l = (2 - saturation) * value;
+  let sl = saturation * value;
+  sl /= l <= 1 ? l : 2 - l;
+  sl = sl || 0;
+  l /= 2;
+  return {
+    h,
+    s: sl * 100,
+    l: l * 100
+  };
+}
+
+export { hslToHsv, hsvToHsl };