@quen-ui/components 0.0.14 → 1.0.0

package/dist/ColorPicker/InputsColor.cjs.js

@@ -0,0 +1,177 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const chroma = require("chroma-js");
+const TextField = require("../TextField/TextField.cjs.js");
+const InputNumber = require("../InputNumber/InputNumber.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const polished = require("polished");
+const InputsColor = ({
+  format,
+  onChangeHex,
+  onChangeRGB,
+  onBlur,
+  hsl,
+  size,
+  onChangeHSL,
+  disabled
+}) => {
+  const hex = React.useMemo(
+    () => chroma.hsl(
+      hsl.hue,
+      hsl.saturation,
+      hsl.lightness,
+      "alpha" in hsl ? hsl.alpha : 1
+    ).hex(),
+    [hsl]
+  );
+  const rgb = React.useMemo(() => polished.parseToRgb(hex), [hex]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "s", children: [
+    ["hex", "hexa"].includes(format) && /* @__PURE__ */ jsxRuntime.jsx(
+      TextField,
+      {
+        disabled,
+        size: "s",
+        value: hex,
+        onChange: onChangeHex,
+        onBlur,
+        "aria-label": "color input",
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onBlur();
+          }
+        }
+      }
+    ),
+    ["rgba", "rgb"].includes(format) && size !== "xs" && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: rgb.red,
+          onChange: (value) => {
+            const v = helpers.clamp(Number(value || 0), 0, 255);
+            onChangeRGB({ ...rgb, red: v });
+          },
+          "aria-label": "r",
+          min: 0,
+          max: 255
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: rgb.green,
+          onChange: (value) => {
+            const v = helpers.clamp(Number(value || 0), 0, 255);
+            onChangeRGB({ ...rgb, green: v });
+          },
+          "aria-label": "g",
+          min: 0,
+          max: 255
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: rgb.blue,
+          onChange: (value) => {
+            const v = helpers.clamp(Number(value || 0), 0, 255);
+            onChangeRGB({ ...rgb, blue: v });
+          },
+          "aria-label": "b",
+          min: 0,
+          max: 255
+        }
+      ),
+      format === "rgba" && /* @__PURE__ */ jsxRuntime.jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: ("alpha" in rgb ? rgb.alpha : 1) * 100,
+          onChange: (value) => {
+            const v = helpers.clamp(Number(value || 0), 0, 100);
+            onChangeRGB({ ...rgb, alpha: Number((v / 100).toFixed(2)) });
+          },
+          "aria-label": "alpha",
+          min: 0,
+          max: 100,
+          formatter: (v) => `${Number(v).toFixed(0)}%`
+        }
+      )
+    ] }),
+    ["hsl", "hsla"].includes(format) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: Number(hsl.hue.toFixed(0)),
+          onChange: (value) => {
+            const v = helpers.clamp(Number(value || 0), 0, 360);
+            onChangeHSL({ ...hsl, hue: v });
+          },
+          "aria-label": "hue",
+          min: 0,
+          max: 360
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: Number((hsl.saturation * 100).toFixed(0)),
+          onChange: (value) => {
+            const v = helpers.clamp(Number(value || 0), 0, 100);
+            onChangeHSL({ ...hsl, saturation: Number((v / 100).toFixed(2)) });
+          },
+          "aria-label": "saturation",
+          min: 0,
+          max: 100,
+          formatter: (v) => `${Number(v).toFixed(0)}%`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: hsl.lightness * 100,
+          onChange: (value) => {
+            const v = helpers.clamp(Number(value || 0), 0, 100);
+            onChangeHSL({ ...hsl, lightness: Number((v / 100).toFixed(2)) });
+          },
+          "aria-label": "lightness",
+          min: 0,
+          max: 100,
+          formatter: (v) => `${Number(v).toFixed(0)}%`
+        }
+      ),
+      format === "hsla" && /* @__PURE__ */ jsxRuntime.jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: ("alpha" in hsl ? hsl.alpha : 1) * 100,
+          onChange: (value) => {
+            const v = helpers.clamp(Number(value || 0), 0, 100);
+            onChangeHSL({ ...hsl, alpha: Number((v / 100).toFixed(2)) });
+          },
+          "aria-label": "alpha",
+          min: 0,
+          max: 100,
+          formatter: (v) => `${Number(v).toFixed(0)}%`
+        }
+      )
+    ] })
+  ] });
+};
+module.exports = InputsColor;

package/dist/ColorPicker/InputsColor.d.ts

@@ -0,0 +1,3 @@
+import { IInputsColorProps } from './types';
+declare const InputsColor: ({ format, onChangeHex, onChangeRGB, onBlur, hsl, size, onChangeHSL, disabled }: IInputsColorProps) => import("react/jsx-runtime").JSX.Element;
+export default InputsColor;

package/dist/ColorPicker/InputsColor.es.js

@@ -0,0 +1,178 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import chroma from "chroma-js";
+import TextField from "../TextField/TextField.es.js";
+import InputNumber from "../InputNumber/InputNumber.es.js";
+import Flex from "../Flex/Flex.es.js";
+import { clamp } from "./helpers.es.js";
+import { parseToRgb } from "polished";
+const InputsColor = ({
+  format,
+  onChangeHex,
+  onChangeRGB,
+  onBlur,
+  hsl,
+  size,
+  onChangeHSL,
+  disabled
+}) => {
+  const hex = useMemo(
+    () => chroma.hsl(
+      hsl.hue,
+      hsl.saturation,
+      hsl.lightness,
+      "alpha" in hsl ? hsl.alpha : 1
+    ).hex(),
+    [hsl]
+  );
+  const rgb = useMemo(() => parseToRgb(hex), [hex]);
+  return /* @__PURE__ */ jsxs(Flex, { gap: "s", children: [
+    ["hex", "hexa"].includes(format) && /* @__PURE__ */ jsx(
+      TextField,
+      {
+        disabled,
+        size: "s",
+        value: hex,
+        onChange: onChangeHex,
+        onBlur,
+        "aria-label": "color input",
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onBlur();
+          }
+        }
+      }
+    ),
+    ["rgba", "rgb"].includes(format) && size !== "xs" && /* @__PURE__ */ jsxs(Flex, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: rgb.red,
+          onChange: (value) => {
+            const v = clamp(Number(value || 0), 0, 255);
+            onChangeRGB({ ...rgb, red: v });
+          },
+          "aria-label": "r",
+          min: 0,
+          max: 255
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: rgb.green,
+          onChange: (value) => {
+            const v = clamp(Number(value || 0), 0, 255);
+            onChangeRGB({ ...rgb, green: v });
+          },
+          "aria-label": "g",
+          min: 0,
+          max: 255
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: rgb.blue,
+          onChange: (value) => {
+            const v = clamp(Number(value || 0), 0, 255);
+            onChangeRGB({ ...rgb, blue: v });
+          },
+          "aria-label": "b",
+          min: 0,
+          max: 255
+        }
+      ),
+      format === "rgba" && /* @__PURE__ */ jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: ("alpha" in rgb ? rgb.alpha : 1) * 100,
+          onChange: (value) => {
+            const v = clamp(Number(value || 0), 0, 100);
+            onChangeRGB({ ...rgb, alpha: Number((v / 100).toFixed(2)) });
+          },
+          "aria-label": "alpha",
+          min: 0,
+          max: 100,
+          formatter: (v) => `${Number(v).toFixed(0)}%`
+        }
+      )
+    ] }),
+    ["hsl", "hsla"].includes(format) && /* @__PURE__ */ jsxs(Flex, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: Number(hsl.hue.toFixed(0)),
+          onChange: (value) => {
+            const v = clamp(Number(value || 0), 0, 360);
+            onChangeHSL({ ...hsl, hue: v });
+          },
+          "aria-label": "hue",
+          min: 0,
+          max: 360
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: Number((hsl.saturation * 100).toFixed(0)),
+          onChange: (value) => {
+            const v = clamp(Number(value || 0), 0, 100);
+            onChangeHSL({ ...hsl, saturation: Number((v / 100).toFixed(2)) });
+          },
+          "aria-label": "saturation",
+          min: 0,
+          max: 100,
+          formatter: (v) => `${Number(v).toFixed(0)}%`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: hsl.lightness * 100,
+          onChange: (value) => {
+            const v = clamp(Number(value || 0), 0, 100);
+            onChangeHSL({ ...hsl, lightness: Number((v / 100).toFixed(2)) });
+          },
+          "aria-label": "lightness",
+          min: 0,
+          max: 100,
+          formatter: (v) => `${Number(v).toFixed(0)}%`
+        }
+      ),
+      format === "hsla" && /* @__PURE__ */ jsx(
+        InputNumber,
+        {
+          disabled,
+          size: "s",
+          value: ("alpha" in hsl ? hsl.alpha : 1) * 100,
+          onChange: (value) => {
+            const v = clamp(Number(value || 0), 0, 100);
+            onChangeHSL({ ...hsl, alpha: Number((v / 100).toFixed(2)) });
+          },
+          "aria-label": "alpha",
+          min: 0,
+          max: 100,
+          formatter: (v) => `${Number(v).toFixed(0)}%`
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  InputsColor as default
+};

package/dist/ColorPicker/helpers.cjs.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const polished = require("polished");
+function parseColor(value) {
+  if (!value) {
+    return { hue: 0, saturation: 0, lightness: 1 };
+  }
+  if (typeof value === "string") {
+    return polished.parseToHsl(value);
+  }
+  return polished.parseToHsl(polished.toColorString(value));
+}
+function clamp(n, a, b) {
+  return Math.min(b, Math.max(a, n));
+}
+const formatColor = (hsl, format) => {
+  const hex = polished.hslToColorString(hsl);
+  if (format === "hex" || format === "hexa") {
+    return hex;
+  }
+  if (format === "rgb" || format === "rgba") {
+    const rgba = polished.parseToRgb(hex);
+    return format === "rgba" && "alpha" in rgba ? `rgba(${rgba.red}, ${rgba.green}, ${rgba.blue}, ${rgba.alpha})` : `rgb(${rgba.red}, ${rgba.green}, ${rgba.blue})`;
+  }
+  if (format === "hsla" && "alpha" in hsl) {
+    return `hsla(${Math.round(hsl.hue)}, ${Math.round(hsl.saturation) * 100}%, ${Math.round(hsl.lightness) * 100}%, ${hsl.alpha})`;
+  }
+  return `hsl(${Math.round(hsl.hue)}, ${Math.round(hsl.saturation) * 100}%, ${Math.round(hsl.lightness) * 100}%)`;
+};
+exports.clamp = clamp;
+exports.formatColor = formatColor;
+exports.parseColor = parseColor;

package/dist/ColorPicker/helpers.d.ts

@@ -0,0 +1,4 @@
+import { TColorValue, THslColor, TColorFormat } from './types';
+export declare function parseColor(value?: TColorValue): THslColor;
+export declare function clamp(n: number, a: number, b: number): number;
+export declare const formatColor: (hsl: THslColor, format: TColorFormat) => string;

package/dist/ColorPicker/helpers.es.js

@@ -0,0 +1,32 @@
+import { parseToHsl, toColorString, hslToColorString, parseToRgb } from "polished";
+function parseColor(value) {
+  if (!value) {
+    return { hue: 0, saturation: 0, lightness: 1 };
+  }
+  if (typeof value === "string") {
+    return parseToHsl(value);
+  }
+  return parseToHsl(toColorString(value));
+}
+function clamp(n, a, b) {
+  return Math.min(b, Math.max(a, n));
+}
+const formatColor = (hsl, format) => {
+  const hex = hslToColorString(hsl);
+  if (format === "hex" || format === "hexa") {
+    return hex;
+  }
+  if (format === "rgb" || format === "rgba") {
+    const rgba = parseToRgb(hex);
+    return format === "rgba" && "alpha" in rgba ? `rgba(${rgba.red}, ${rgba.green}, ${rgba.blue}, ${rgba.alpha})` : `rgb(${rgba.red}, ${rgba.green}, ${rgba.blue})`;
+  }
+  if (format === "hsla" && "alpha" in hsl) {
+    return `hsla(${Math.round(hsl.hue)}, ${Math.round(hsl.saturation) * 100}%, ${Math.round(hsl.lightness) * 100}%, ${hsl.alpha})`;
+  }
+  return `hsl(${Math.round(hsl.hue)}, ${Math.round(hsl.saturation) * 100}%, ${Math.round(hsl.lightness) * 100}%)`;
+};
+export {
+  clamp,
+  formatColor,
+  parseColor
+};

package/dist/ColorPicker/index.cjs.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ColorPicker$1 = require("./ColorPicker.cjs.js");
+const InputColor = require("./InputColor.cjs.js");
+const ColorPicker = ColorPicker$1;
+ColorPicker.Input = InputColor;
+exports.ColorPicker = ColorPicker;

package/dist/ColorPicker/index.d.ts

@@ -0,0 +1,8 @@
+import { default as ColorPickerComponent } from './ColorPicker';
+import { default as InputColor } from './InputColor';
+export type { IColorPickerProps, THslColor, TColorFormat, TColorValue, TRgbColor, TInputColorProps } from './types';
+type TColorPicker = typeof ColorPickerComponent & {
+    Input: typeof InputColor;
+};
+declare const ColorPicker: TColorPicker;
+export { ColorPicker };

package/dist/ColorPicker/index.es.js

@@ -0,0 +1,7 @@
+import ColorPicker$1 from "./ColorPicker.es.js";
+import InputColor from "./InputColor.es.js";
+const ColorPicker = ColorPicker$1;
+ColorPicker.Input = InputColor;
+export {
+  ColorPicker
+};

package/dist/ColorPicker/styles.cjs.js

@@ -0,0 +1,234 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const getSizeWrapper = (size) => {
+  switch (size) {
+    case "l":
+      return "26.25rem";
+    case "s":
+      return "15rem";
+    case "xs":
+      return "11.25rem";
+    case "m":
+    default:
+      return "20rem";
+  }
+};
+const getSizeThumb = (size) => {
+  switch (size) {
+    case "xs":
+      return "0.625rem";
+    case "s":
+      return "0.75rem";
+    case "l":
+      return "1.5rem";
+    case "m":
+    default:
+      return "1rem";
+  }
+};
+const getSizePreset = (size) => {
+  switch (size) {
+    case "xs":
+      return "1.375rem";
+    case "s":
+      return "1.625rem";
+    case "l":
+      return "2.5rem";
+    case "m":
+    default:
+      return "2rem";
+  }
+};
+const getSizeSlider = (size) => {
+  switch (size) {
+    case "xs":
+      return "0.75rem";
+    case "s":
+      return "1rem";
+    case "l":
+      return "1.5rem";
+    case "m":
+    default:
+      return "1.25rem";
+  }
+};
+const getHeightPreview = (size, hideInputs, isAlpha) => {
+  if (isAlpha === false && !hideInputs) {
+    return polished.math(
+      `${getSizeSlider(size)} * 2 + 0.75rem + 0.875rem`
+    );
+  }
+  if (!isAlpha && hideInputs) {
+    return polished.math(
+      `${getSizeSlider(size)} + 0.25rem`
+    );
+  }
+  return polished.math(
+    `${getSizeSlider(size)} * 2 + 0.75rem`
+  );
+};
+const getSizeSwatchInput = (size) => {
+  switch (size) {
+    case "m":
+    default:
+      return polished.math(`2.5rem - 0.75rem`);
+  }
+};
+const ColorPickerWrapper = styled.div`
+  width: ${({ size }) => getSizeWrapper(size)};
+  user-select: none;
+`;
+const ColorPickerPanel = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  background: ${({ theme }) => theme.components.ColorPicker.background};
+  border-radius: ${({ theme }) => theme.components.ColorPicker.radius};
+  padding: ${({ theme, size }) => theme.components.ColorPicker.padding[size]};
+  border: 1px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+const ColorPickerSaturationWrapStyled = styled.div`
+  position: relative;
+  width: 100%;
+  padding-top: 56%;
+  border-radius: 6px;
+  overflow: hidden;
+  touch-action: none;
+`;
+const ColorPickerSaturationGradientStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
+  position: absolute;
+  inset: 0;
+  background: ${({ color }) => `linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, #fff, ${color})`};
+`;
+const ColorPickerThumbStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["left", "top", "size"].includes(prop)
+})`
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  width: ${({ size }) => getSizeThumb(size)};
+  height: ${({ size }) => getSizeThumb(size)};
+  left: ${({ left }) => left}%;
+  top: ${({ top }) => top}%;
+  transform: translate(-50%, -50%);
+`;
+const ColorPickerSliderStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  position: relative;
+  height: ${({ size }) => getSizeSlider(size)};
+  border-radius: 6px;
+  cursor: pointer;
+  background-image: conic-gradient(
+    rgba(0, 0, 0, 0.6) 25%,
+    transparent 25% 50%,
+    rgba(0, 0, 0, 0.6) 50% 75%,
+    transparent 75% 100%
+  );
+  background-size: 8px 8px;
+`;
+const ColorPickerSliderTrackStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["bg"].includes(prop)
+})`
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: ${({ bg }) => bg};
+`;
+const ColorPickerSliderHueTrackStyled = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 34%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+`;
+const ColorPickerSliderThumbStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["left", "size"].includes(prop)
+})`
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: ${({ size }) => getSizeSlider(size)};
+  height: ${({ size }) => getSizeSlider(size)};
+  border-radius: 50%;
+  border: 2px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  left: ${({ left }) => left ?? 0}%;
+`;
+const ColorPickerPresetStyled = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["color", "active", "size"].includes(prop)
+})`
+  width: ${({ size }) => getSizePreset(size)};
+  height: ${({ size }) => getSizePreset(size)};
+  border-radius: ${({ theme }) => theme.components.ColorPicker.radius};
+  border: ${({ active, theme }) => active ? `2px solid ${theme.components.ColorPicker.borderColor}` : "none"};
+  background: ${({ color }) => color};
+  cursor: pointer;
+`;
+const ColorPickerPreviewSwatchStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["color", "size", "isAlpha", "hiddenInputs"].includes(prop)
+})`
+  min-width: ${({ size }) => size === "xs" ? "100%" : polished.math(`${getSizeSlider(size)} * 2`)};
+  height: ${({ size, isAlpha, hiddenInputs }) => getHeightPreview(size, hiddenInputs, isAlpha)};
+  border-radius: ${({ theme }) => theme.components.ColorPicker.radius};
+  border: 1px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  background-image: conic-gradient(
+    rgba(0, 0, 0, 0.6) 25%,
+    transparent 25% 50%,
+    rgba(0, 0, 0, 0.6) 50% 75%,
+    transparent 75% 100%
+  );
+  background-size: ${({ size }) => size === "xs" ? "8px 8px" : "50% 50%"};
+
+  .quen-ui__color-picker__preview-swatch__inner {
+    width: 100%;
+    height: 100%;
+    background: ${({ color }) => color};
+  }
+`;
+const ColorPickerSwatchInputStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "color"].includes(prop)
+})`
+  border: 1px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  background-image: conic-gradient(
+      rgba(0, 0, 0, 0.6) 25%,
+      transparent 25% 50%,
+      rgba(0, 0, 0, 0.6) 50% 75%,
+      transparent 75% 100%
+  );
+  background-size: 8px 8px;
+  width: ${({ size }) => getSizeSwatchInput(size)};
+  height: ${({ size }) => getSizeSwatchInput(size)};
+  
+  .quen-ui__color-picker__swatch-input__inner {
+    background: ${({ color }) => typeof color === "string" || !color ? color : polished.toColorString(color)};
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+exports.ColorPickerPanel = ColorPickerPanel;
+exports.ColorPickerPresetStyled = ColorPickerPresetStyled;
+exports.ColorPickerPreviewSwatchStyled = ColorPickerPreviewSwatchStyled;
+exports.ColorPickerSaturationGradientStyled = ColorPickerSaturationGradientStyled;
+exports.ColorPickerSaturationWrapStyled = ColorPickerSaturationWrapStyled;
+exports.ColorPickerSliderHueTrackStyled = ColorPickerSliderHueTrackStyled;
+exports.ColorPickerSliderStyled = ColorPickerSliderStyled;
+exports.ColorPickerSliderThumbStyled = ColorPickerSliderThumbStyled;
+exports.ColorPickerSliderTrackStyled = ColorPickerSliderTrackStyled;
+exports.ColorPickerSwatchInputStyled = ColorPickerSwatchInputStyled;
+exports.ColorPickerThumbStyled = ColorPickerThumbStyled;
+exports.ColorPickerWrapper = ColorPickerWrapper;