@synerise/ds-color-picker 1.3.48 → 1.3.50

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.50](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.3.49...@synerise/ds-color-picker@1.3.50) (2026-07-16)
+
+**Note:** Version bump only for package @synerise/ds-color-picker
+
+## [1.3.49](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.3.48...@synerise/ds-color-picker@1.3.49) (2026-07-09)
+
+**Note:** Version bump only for package @synerise/ds-color-picker
+
 ## [1.3.48](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.3.47...@synerise/ds-color-picker@1.3.48) (2026-07-09)
 
 **Note:** Version bump only for package @synerise/ds-color-picker

package/dist/ColorPicker.js

@@ -4,10 +4,10 @@ import { HexColorPicker } from "react-colorful";
 import Divider from "@synerise/ds-divider";
 import Dropdown from "@synerise/ds-dropdown";
 import Icon, { FormulaPlusM } from "@synerise/ds-icon";
-import Tags, { TagShape, Tag } from "@synerise/ds-tags";
+import { Tag, TagShape } from "@synerise/ds-tags";
 import Tooltip from "@synerise/ds-tooltip";
 import { useOnClickOutside, getPopupContainer } from "@synerise/ds-utils";
-import { SwatchSectionWrapper, AddColorButton, TagDot, Container, PrefixTag, SubContainer, ColorPickerInput, StyledCopyIcon, PreffixWrapper, ColorPickerSelect, ColorTag, ColorPickerModalStyle } from "./ColorPicker.styles.js";
+import { SwatchSectionWrapper, SwatchCreatorButton, SwatchPlaceholder, Swatch, SwatchDot, Container, PrefixTag, SubContainer, ColorPickerInput, StyledCopyIcon, PreffixWrapper, ColorPickerSelect, ColorTag, ColorPickerModalStyle } from "./ColorPicker.styles.js";
 import { isValidTextColor, standardizeColor, isValidHexColor, convert3DigitHexTo6Digit, filterAlphanumeric } from "./utils.js";
 const DEFAULT_MAX_WIDTH_PICKER = 228;
 const DEFAULT_COLOR = "#ffffff";
@@ -110,27 +110,25 @@ const ColorPicker = ({
     onChangeTextColor(event.target.value);
   }, [onChangeTextColor]);
   const swatchSection = /* @__PURE__ */ jsxs(SwatchSectionWrapper, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { title: "Save color swatch", children: /* @__PURE__ */ jsx(AddColorButton, { mode: "single-icon", type: "ghost", onClick: saveColor, children: /* @__PURE__ */ jsx(Icon, { size: 16, component: /* @__PURE__ */ jsx(FormulaPlusM, {}) }) }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "Save color swatch", children: /* @__PURE__ */ jsx(SwatchCreatorButton, { type: "button", "aria-label": "Save color swatch", onClick: saveColor, children: /* @__PURE__ */ jsx(Icon, { size: 16, component: /* @__PURE__ */ jsx(FormulaPlusM, {}) }) }) }),
     infix({
       color: colorTextInput,
       setColor: onChangeTextColor
     }),
-    savedColors.length > 0 && /* @__PURE__ */ jsx(
-      Tags,
-      {
-        tagShape: TagShape.SINGLE_CHARACTER_SQUARE,
-        selected: savedColors.map((colorEntry, i) => ({
-          id: i,
-          key: `color-${i}`,
-          name: /* @__PURE__ */ jsx(Tooltip, { title: colorEntry, children: /* @__PURE__ */ jsx(TagDot, { pressed: i === pressed }) }),
-          color: colorEntry,
-          onClick() {
-            onChangeHexColor(colorEntry);
-            setPressed(i);
-          }
-        }))
+    Array.from({
+      length: maxSavedColors
+    }, (_, i) => {
+      const colorEntry = savedColors[i];
+      if (colorEntry === void 0) {
+        return /* @__PURE__ */ jsx(SwatchPlaceholder, { className: "ds-color-swatch-placeholder" }, `swatch-placeholder-${i}`);
       }
-    )
+      return /* @__PURE__ */ jsx(Tooltip, { title: colorEntry, children: /* @__PURE__ */ jsx(Swatch, { type: "button", className: "ds-color-swatch", "aria-label": colorEntry, "aria-pressed": i === pressed, style: {
+        backgroundColor: colorEntry
+      }, onClick: () => {
+        onChangeHexColor(colorEntry);
+        setPressed(i);
+      }, children: i === pressed && /* @__PURE__ */ jsx(SwatchDot, {}) }) }, `swatch-${i}`);
+    })
   ] });
   const dropdown = /* @__PURE__ */ jsxs(Container, { ref, size, children: [
     /* @__PURE__ */ jsx(HexColorPicker, { color: lastValidHexColor, onChange: onChangeHexColor }),
@@ -150,7 +148,7 @@ const ColorPicker = ({
   ] });
   const trigger = useMemo(() => {
     const isClickable = !disabled && !readOnly;
-    return /* @__PURE__ */ jsx(ColorPickerSelect, { "data-testid": "color-picker", disabled, readOnly, prefix: /* @__PURE__ */ jsx(ColorTag, { shape: TagShape.SINGLE_CHARACTER_ROUND, color: lastValidHexColor, disabled: false, onClick: isClickable ? onClickHandler : void 0 }), onClick: isClickable ? onClickHandler : void 0, onChange: isClickable ? onChangeHandler : void 0, onBlur: onBlurHandler, placeholder, value: colorTextInput, description, errorText, error, ...inputProps });
+    return /* @__PURE__ */ jsx(ColorPickerSelect, { "data-testid": "color-picker", disabled, readOnly, innerPrefix: /* @__PURE__ */ jsx(ColorTag, { shape: TagShape.SINGLE_CHARACTER_ROUND, color: lastValidHexColor, disabled: false, onClick: isClickable ? onClickHandler : void 0 }), onClick: isClickable ? onClickHandler : void 0, onChange: isClickable ? onChangeHandler : void 0, onBlur: onBlurHandler, placeholder, value: colorTextInput, description, errorText, error, ...inputProps });
   }, [disabled, error, readOnly, onClickHandler, onChangeHandler, onBlurHandler, lastValidHexColor, placeholder, colorTextInput, description, errorText, inputProps]);
   if (readOnly || disabled) {
     return trigger;

package/dist/ColorPicker.styles.d.ts

@@ -1,6 +1,3 @@
-export declare const TagDot: import('styled-components').StyledComponent<"div", any, {
-    pressed?: boolean;
-}, never>;
 export declare const Container: import('styled-components').StyledComponent<"div", any, {
     size?: "S" | "M" | "L";
 }, never>;
@@ -26,27 +23,14 @@ export declare const ColorTag: import('styled-components').StyledComponent<impor
     dashed?: boolean;
     tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
 } & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id" | "disabled" | "name" | "className" | "color" | "onClick" | "prefixel" | "suffixel" | "image" | "shape" | "textColor" | "removable" | "onRemove" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const AddColorButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button/dist/BaseButton.types').BaseButtonProps, "type"> & {
-    type?: import('@synerise/ds-button').ButtonType;
-    mode?: import('@synerise/ds-utils').LiteralStringUnion<import('@synerise/ds-button/dist/Button.types').ButtonMode>;
-    color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
-    groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
-    loading?: boolean | {
-        delay?: number;
-    };
-    icon?: import('react').ReactNode;
-    onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
-    iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
-    error?: boolean;
-    readOnly?: boolean;
-    tagProps?: import('@synerise/ds-tags').TagProps;
-    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
-} & import('react').RefAttributes<HTMLButtonElement>> & {
-    Creator: import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button').CreatorProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-    Expander: ({ size, expanded, disabled, onClick, className, }: import('@synerise/ds-button').ExpanderProps) => import("react").JSX.Element;
-    Star: (props: import('@synerise/ds-button').StarButtonProps) => React.ReactElement;
-    Checkbox: (props: import('@synerise/ds-button').CheckboxButtonProps) => React.ReactElement;
-}, any, {}, never>;
+/** The "+" swatch creator (Figma: Swatch Creator). Plain button, not ds-button. */
+export declare const SwatchCreatorButton: import('styled-components').StyledComponent<"button", any, {}, never>;
+/** A single filled saved-colour swatch (Figma: Swatch — Filled / Filled Selected). */
+export declare const Swatch: import('styled-components').StyledComponent<"button", any, {}, never>;
+/** The centred white dot shown on the currently-selected swatch (Figma: Filled Selected). */
+export declare const SwatchDot: import('styled-components').StyledComponent<"span", any, {}, never>;
+/** An empty swatch slot (Figma: Swatch — Default). */
+export declare const SwatchPlaceholder: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const StyledCopyIcon: import('styled-components').StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...rest }: import('@synerise/ds-copy-icon').CopyIconProps) => React.JSX.Element, any, {}, never>;
 export declare const ColorPickerInput: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
     error?: boolean;
@@ -65,7 +49,17 @@ export declare const ColorPickerInput: import('styled-components').StyledCompone
     autoResizeProps?: Partial<Pick<import('@synerise/ds-input').AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
     expandable?: boolean;
     expandableTooltip?: React.ReactNode;
-} & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & import('antd').InputProps & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+} & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
+    size?: import('@synerise/ds-input/dist/Input.types').InputSize;
+    allowClear?: boolean;
+    bordered?: boolean;
+    innerPrefix?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const ColorPickerSelect: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
     error?: boolean;
     className?: string;
@@ -83,7 +77,17 @@ export declare const ColorPickerSelect: import('styled-components').StyledCompon
     autoResizeProps?: Partial<Pick<import('@synerise/ds-input').AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
     expandable?: boolean;
     expandableTooltip?: React.ReactNode;
-} & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & import('antd').InputProps & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+} & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
+    size?: import('@synerise/ds-input/dist/Input.types').InputSize;
+    allowClear?: boolean;
+    bordered?: boolean;
+    innerPrefix?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const PrefixTag: import('styled-components').StyledComponent<"div", any, {
     height?: boolean;
     size?: "S" | "M" | "L";
@@ -124,27 +128,10 @@ declare const _default: {
         height?: boolean;
         size?: "S" | "M" | "L";
     }, never>;
-    AddColorButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button/dist/BaseButton.types').BaseButtonProps, "type"> & {
-        type?: import('@synerise/ds-button').ButtonType;
-        mode?: import('@synerise/ds-utils').LiteralStringUnion<import('@synerise/ds-button/dist/Button.types').ButtonMode>;
-        color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
-        groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
-        loading?: boolean | {
-            delay?: number;
-        };
-        icon?: import('react').ReactNode;
-        onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
-        iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
-        error?: boolean;
-        readOnly?: boolean;
-        tagProps?: import('@synerise/ds-tags').TagProps;
-        tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
-    } & import('react').RefAttributes<HTMLButtonElement>> & {
-        Creator: import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button').CreatorProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-        Expander: ({ size, expanded, disabled, onClick, className, }: import('@synerise/ds-button').ExpanderProps) => import("react").JSX.Element;
-        Star: (props: import('@synerise/ds-button').StarButtonProps) => React.ReactElement;
-        Checkbox: (props: import('@synerise/ds-button').CheckboxButtonProps) => React.ReactElement;
-    }, any, {}, never>;
+    SwatchCreatorButton: import('styled-components').StyledComponent<"button", any, {}, never>;
+    Swatch: import('styled-components').StyledComponent<"button", any, {}, never>;
+    SwatchDot: import('styled-components').StyledComponent<"span", any, {}, never>;
+    SwatchPlaceholder: import('styled-components').StyledComponent<"div", any, {}, never>;
     SwatchSectionWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
     PreffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
     ValueWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
@@ -166,10 +153,17 @@ declare const _default: {
         autoResizeProps?: Partial<Pick<import('@synerise/ds-input').AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
         expandable?: boolean;
         expandableTooltip?: React.ReactNode;
-    } & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & import('antd').InputProps & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
-    TagDot: import('styled-components').StyledComponent<"div", any, {
-        pressed?: boolean;
-    }, never>;
+    } & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
+        size?: import('@synerise/ds-input/dist/Input.types').InputSize;
+        allowClear?: boolean;
+        bordered?: boolean;
+        innerPrefix?: React.ReactNode;
+        prefix?: React.ReactNode;
+        suffix?: React.ReactNode;
+        onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+        addonBefore?: React.ReactNode;
+        addonAfter?: React.ReactNode;
+    } & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
     ColorPickerSelect: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
         error?: boolean;
         className?: string;
@@ -187,7 +181,17 @@ declare const _default: {
         autoResizeProps?: Partial<Pick<import('@synerise/ds-input').AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
         expandable?: boolean;
         expandableTooltip?: React.ReactNode;
-    } & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & import('antd').InputProps & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+    } & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
+        size?: import('@synerise/ds-input/dist/Input.types').InputSize;
+        allowClear?: boolean;
+        bordered?: boolean;
+        innerPrefix?: React.ReactNode;
+        prefix?: React.ReactNode;
+        suffix?: React.ReactNode;
+        onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+        addonBefore?: React.ReactNode;
+        addonAfter?: React.ReactNode;
+    } & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
     ColorPickerModalStyle: import('styled-components').GlobalStyleComponent<{
         maxWidth: number;
     }, import('styled-components').DefaultTheme>;

package/dist/ColorPicker.styles.js

@@ -1,57 +1,65 @@
 import styled, { createGlobalStyle } from "styled-components";
-import Button from "@synerise/ds-button";
 import CopyIcon from "@synerise/ds-copy-icon";
 import { Input } from "@synerise/ds-input";
-import { TagsStyles, Tag } from "@synerise/ds-tags";
+import { Tag } from "@synerise/ds-tags";
 import { ColorPickerSize } from "./ColorPicker.types.js";
-const TagDot = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "ColorPickerstyles__TagDot",
-  componentId: "sc-1iu8b6j-0"
-})(["display:", ";width:4px;height:4px;background-color:", ";border-radius:50%;"], (props) => props.pressed ? "flex" : "none", (props) => props.theme.palette.white);
 const SIZE_DEFAULT = 168;
 const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ColorPickerstyles__Container",
-  componentId: "sc-1iu8b6j-1"
-})(["width:100%;@media (min-width:200px){min-width:200px;background-color:", ";}.react-colorful__last-control{margin:24px 56px 8px 17px;border-radius:4px;height:8px;}.react-colorful__saturation{border-bottom:0px;border-radius:4px 4px 0 0;height:96px;.react-colorful__interactive{width:100%;height:100%;}}&&& .ds-tag{width:16px;height:16px;border:1px solid ", ";margin:0 0 0 4px;&:hover{", "{display:flex;}}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:100%;height:", "px;}.react-colorful__hue-pointer{border:1px solid ", ";box-shadow:none !important;.react-colorful__pointer-fill{background-color:", " !important;}}.ant-divider-horizontal{margin:16px 0px;}", "{margin-bottom:-8px;}"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-300"], TagDot, (props) => props.size ? ColorPickerSize[props.size] : SIZE_DEFAULT, (props) => props.theme.palette["grey-300"], (props) => props.theme.palette.white, TagsStyles.Container);
+  componentId: "sc-1iu8b6j-0"
+})(["width:100%;@media (min-width:200px){min-width:200px;background-color:", ";}.react-colorful__last-control{margin:24px 56px 8px 17px;border-radius:4px;height:8px;}.react-colorful__saturation{border-bottom:0px;border-radius:4px 4px 0 0;height:96px;.react-colorful__interactive{width:100%;height:100%;}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:100%;height:", "px;}.react-colorful__hue-pointer{border:1px solid ", ";box-shadow:none !important;.react-colorful__pointer-fill{background-color:", " !important;}}.ant-divider-horizontal{margin:16px 0px;}"], (props) => props.theme.palette.white, (props) => props.size ? ColorPickerSize[props.size] : SIZE_DEFAULT, (props) => props.theme.palette["grey-300"], (props) => props.theme.palette.white);
 const SubContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ColorPickerstyles__SubContainer",
-  componentId: "sc-1iu8b6j-2"
+  componentId: "sc-1iu8b6j-1"
 })(["padding:8px 16px 16px;margin-bottom:", ";"], (props) => props.savedColors ? `0` : `-16px`);
 const ColorTag = /* @__PURE__ */ styled(Tag).withConfig({
   displayName: "ColorPickerstyles__ColorTag",
-  componentId: "sc-1iu8b6j-3"
+  componentId: "sc-1iu8b6j-2"
 })(["width:16px;height:16px;border:1px solid ", ";"], (props) => props.theme.palette["grey-300"]);
-const AddColorButton = /* @__PURE__ */ styled(Button).withConfig({
-  displayName: "ColorPickerstyles__AddColorButton",
+const SWATCH_SIZE = 16;
+const SwatchCreatorButton = /* @__PURE__ */ styled.button.withConfig({
+  displayName: "ColorPickerstyles__SwatchCreatorButton",
+  componentId: "sc-1iu8b6j-3"
+})(["display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:", "px;height:", "px;padding:0;border:none;border-radius:3px;background-color:transparent;color:", ";cursor:pointer;transition:background-color 0.2s ease;&:hover{background-color:", ";}&:focus-visible{outline:1px solid ", ";outline-offset:1px;}"], SWATCH_SIZE, SWATCH_SIZE, (props) => props.theme.palette["grey-800"], (props) => props.theme.palette["grey-200"], (props) => props.theme.palette["blue-600"]);
+const Swatch = /* @__PURE__ */ styled.button.withConfig({
+  displayName: "ColorPickerstyles__Swatch",
   componentId: "sc-1iu8b6j-4"
-})(["&&&.ant-btn{width:16px;height:16px;margin-right:0;}"]);
+})(["display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:", "px;height:", "px;padding:0;border:1px solid transparent;border-radius:3px;cursor:pointer;&:focus-visible{outline:1px solid ", ";outline-offset:1px;}"], SWATCH_SIZE, SWATCH_SIZE, (props) => props.theme.palette["blue-600"]);
+const SwatchDot = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "ColorPickerstyles__SwatchDot",
+  componentId: "sc-1iu8b6j-5"
+})(["width:4px;height:4px;border-radius:50%;background-color:", ";"], (props) => props.theme.palette.white);
+const SwatchPlaceholder = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ColorPickerstyles__SwatchPlaceholder",
+  componentId: "sc-1iu8b6j-6"
+})(["flex:0 0 auto;width:", "px;height:", "px;border:1px solid ", ";border-radius:3px;"], SWATCH_SIZE, SWATCH_SIZE, (props) => props.theme.palette["grey-300"]);
 const StyledCopyIcon = /* @__PURE__ */ styled(CopyIcon).withConfig({
   displayName: "ColorPickerstyles__StyledCopyIcon",
-  componentId: "sc-1iu8b6j-5"
+  componentId: "sc-1iu8b6j-7"
 })(["display:none;"]);
 const ColorPickerInput = /* @__PURE__ */ styled(Input).withConfig({
   displayName: "ColorPickerstyles__ColorPickerInput",
-  componentId: "sc-1iu8b6j-6"
-})(["&:hover{", "{display:flex;}}"], StyledCopyIcon);
+  componentId: "sc-1iu8b6j-8"
+})(["&:hover{", "{display:flex;}}input{font-variant-numeric:tabular-nums;}"], StyledCopyIcon);
 const ColorPickerSelect = /* @__PURE__ */ styled(Input).withConfig({
   displayName: "ColorPickerstyles__ColorPickerSelect",
-  componentId: "sc-1iu8b6j-7"
-})(["&&&{.ant-input-affix-wrapper{padding:4px 4px;}.ant-input-prefix{margin-right:8px;}.ant-input{padding-right:4px;box-shadow:none;}width:100px;}"]);
+  componentId: "sc-1iu8b6j-9"
+})(["&&&{width:100px;input{box-shadow:none;font-variant-numeric:tabular-nums;}}"]);
 const PrefixTag = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ColorPickerstyles__PrefixTag",
-  componentId: "sc-1iu8b6j-8"
+  componentId: "sc-1iu8b6j-10"
 })(["&&& .ds-tag{margin:0;width:24px;height:24px;border:1px solid ", ";cursor:auto;&:hover:before{cursor:auto;filter:brightness(100%);}}position:absolute;right:16px;top:", "px;z-index:2;cursor:auto;"], (props) => props.theme.palette["grey-300"], (props) => (props.size ? ColorPickerSize[props.size] : SIZE_DEFAULT) - 25);
 const SwatchSectionWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ColorPickerstyles__SwatchSectionWrapper",
-  componentId: "sc-1iu8b6j-9"
-})(["display:flex;alignitems:center;"]);
+  componentId: "sc-1iu8b6j-11"
+})(["display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding-top:16px;"]);
 const PreffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ColorPickerstyles__PreffixWrapper",
-  componentId: "sc-1iu8b6j-10"
+  componentId: "sc-1iu8b6j-12"
 })(["margin:0px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:", ";"], (props) => props.theme.palette["grey-500"]);
 const ValueWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ColorPickerstyles__ValueWrapper",
-  componentId: "sc-1iu8b6j-11"
+  componentId: "sc-1iu8b6j-13"
 })(["display:flex;font-size:12px;"]);
 const ColorPickerModalStyle = /* @__PURE__ */ createGlobalStyle([".color-picker-overlay{min-width:unset !important;max-width:", "px;width:100%;}"], ({
   maxWidth
@@ -61,18 +69,19 @@ const ColorPicker_styles = {
   SubContainer,
   ColorTag,
   PrefixTag,
-  AddColorButton,
+  SwatchCreatorButton,
+  Swatch,
+  SwatchDot,
+  SwatchPlaceholder,
   SwatchSectionWrapper,
   PreffixWrapper,
   ValueWrapper,
   CopyIcon,
   ColorPickerInput,
-  TagDot,
   ColorPickerSelect,
   ColorPickerModalStyle
 };
 export {
-  AddColorButton,
   ColorPickerInput,
   ColorPickerModalStyle,
   ColorPickerSelect,
@@ -82,8 +91,11 @@ export {
   PrefixTag,
   StyledCopyIcon,
   SubContainer,
+  Swatch,
+  SwatchCreatorButton,
+  SwatchDot,
+  SwatchPlaceholder,
   SwatchSectionWrapper,
-  TagDot,
   ValueWrapper,
   ColorPicker_styles as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-color-picker",
-  "version": "1.3.48",
+  "version": "1.3.50",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -41,14 +41,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.33",
     "@synerise/ds-copy-icon": "^1.2.15",
     "@synerise/ds-divider": "^1.3.15",
-    "@synerise/ds-dropdown": "^1.3.17",
+    "@synerise/ds-dropdown": "^1.3.19",
     "@synerise/ds-form-field": "^1.3.23",
     "@synerise/ds-icon": "^1.18.4",
-    "@synerise/ds-input": "^1.7.11",
-    "@synerise/ds-tags": "^1.5.48",
+    "@synerise/ds-input": "^1.7.12",
+    "@synerise/ds-tags": "^1.5.50",
     "@synerise/ds-tooltip": "^1.5.3",
     "@synerise/ds-utils": "^1.10.1",
     "react-colorful": "^5.2.0"
@@ -62,5 +61,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "70c23de84f26001a3555ac65f44e12eec30aaf8c"
+  "gitHead": "a81ab6519d49a3dea9c0cfebcdc9104cbb4f4226"
 }