@synerise/ds-color-picker 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.1.2...@synerise/ds-color-picker@0.1.3) (2023-01-02)
+
+
+### Bug Fixes
+
+* **color-picker:** fix adding dot to tags and typing,copy text ([b33b588](https://github.com/Synerise/synerise-design/commit/b33b5882d5d357b745d2b9421c4d30d09c651871))
+* **color-picker:** fix height of dropdown ([0f1d964](https://github.com/Synerise/synerise-design/commit/0f1d9647cfd29936c98218f4fd7de9a175dcb3e2))
+* **color-picker:** remove select and add input to pick color ([dd9cd1a](https://github.com/Synerise/synerise-design/commit/dd9cd1aba392af05637ee89b51f09ffc59e9c5b7))
+
+
+
+
+
 ## [0.1.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.1.1...@synerise/ds-color-picker@0.1.2) (2022-12-08)
 
 

package/dist/ColorPicker.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ColorPickerProps } from './ColorPicker.types';
-export declare function ColorPicker({ value, onChange, colors, onSaveColors, infix, placeholder, selectProps, maxSavedColors, }: ColorPickerProps): JSX.Element;
+export declare function ColorPicker({ value, onChange, colors, onSaveColors, infix, placeholder, inputProps, maxSavedColors, tooltipText, isShownSavedColors, size, errorText, description, }: ColorPickerProps): JSX.Element;
 export default ColorPicker;

package/dist/ColorPicker.js

@@ -2,12 +2,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import * as React from 'react';
 import { HexColorPicker as ReactColorful } from 'react-colorful';
-import Select from '@synerise/ds-select';
-import Button from '@synerise/ds-button';
 import Divider from '@synerise/ds-divider';
-import { Input } from '@synerise/ds-input';
-import Tags, { TagShape } from '@synerise/ds-tags';
+import Tags, { TagShape, Tag } from '@synerise/ds-tags';
 import Icon, { FormulaPlusM } from '@synerise/ds-icon';
+import { CopyClipboardM } from '@synerise/ds-icon/src';
+import * as copy from 'copy-to-clipboard';
+import Tooltip from '@synerise/ds-tooltip';
+import Dropdown from '@synerise/ds-dropdown';
+import { useOnClickOutside } from '@synerise/ds-utils';
 import ColorPickerStyles from './ColorPicker.styles';
 export function ColorPicker(_ref) {
   var _ref$value = _ref.value,
@@ -21,22 +23,55 @@ export function ColorPicker(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   } : _ref$infix,
       placeholder = _ref.placeholder,
-      selectProps = _ref.selectProps,
+      inputProps = _ref.inputProps,
       _ref$maxSavedColors = _ref.maxSavedColors,
-      maxSavedColors = _ref$maxSavedColors === void 0 ? 10 : _ref$maxSavedColors;
+      maxSavedColors = _ref$maxSavedColors === void 0 ? 9 : _ref$maxSavedColors,
+      tooltipText = _ref.tooltipText,
+      isShownSavedColors = _ref.isShownSavedColors,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'M' : _ref$size,
+      errorText = _ref.errorText,
+      description = _ref.description;
 
   var _React$useState = React.useState(value),
       color = _React$useState[0],
       setColor = _React$useState[1];
 
+  var _React$useState2 = React.useState(-1),
+      pressed = _React$useState2[0],
+      setPressed = _React$useState2[1];
+
   var onChangeColor = function onChangeColor(colorValue) {
     setColor(colorValue);
     onChange && onChange(colorValue);
   };
 
-  var _React$useState2 = React.useState(colors),
-      savedColors = _React$useState2[0],
-      setSavedColors = _React$useState2[1];
+  var heightOfDropdown = React.useCallback(function () {
+    if (errorText || description) {
+      if (errorText && description) {
+        return -40;
+      }
+
+      return -20;
+    }
+
+    return 4;
+  }, [errorText, description]);
+
+  var _React$useState3 = React.useState(false),
+      dropdownVisible = _React$useState3[0],
+      setDropdownVisible = _React$useState3[1];
+
+  var ref = React.useRef(null);
+  useOnClickOutside(ref, function () {
+    setDropdownVisible(false);
+  });
+
+  var _React$useState4 = React.useState(colors),
+      savedColors = _React$useState4[0],
+      setSavedColors = _React$useState4[1];
+
+  var hash = '#';
 
   var saveColor = function saveColor() {
     setSavedColors(function (ar) {
@@ -46,48 +81,92 @@ export function ColorPicker(_ref) {
     });
   };
 
-  var swatchSection = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  var swatchSection = /*#__PURE__*/React.createElement(ColorPickerStyles.SwatchSectionWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Save color swatch"
+  }, /*#__PURE__*/React.createElement(ColorPickerStyles.AddColorButton, {
     mode: "single-icon",
+    type: "ghost",
     onClick: saveColor
   }, /*#__PURE__*/React.createElement(Icon, {
+    size: 16,
     component: /*#__PURE__*/React.createElement(FormulaPlusM, null)
-  })), infix({
+  }))), infix({
     color: color,
     setColor: onChangeColor
   }), savedColors.length > 0 && /*#__PURE__*/React.createElement(Tags, {
-    tagShape: TagShape.SINGLE_CHARACTER_SQUARE,
+    tagShape: TagShape.SINGLE_CHARACTER_SQUARE // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    ,
     selected: savedColors.map(function (colorEntry, i) {
       return {
         id: i,
         key: "color-" + i,
-        name: '',
+        name: /*#__PURE__*/React.createElement(Tooltip, {
+          title: colorEntry
+        }, /*#__PURE__*/React.createElement(ColorPickerStyles.TagDot, {
+          pressed: i === pressed
+        })),
         color: colorEntry,
         onClick: function onClick() {
           onChangeColor(colorEntry);
+          setPressed(i);
         }
       };
     }),
     disabled: false
   }));
-  var dropdown = /*#__PURE__*/React.createElement(ColorPickerStyles.Container, null, /*#__PURE__*/React.createElement(ReactColorful, {
+  var dropdown = /*#__PURE__*/React.createElement(ColorPickerStyles.Container, {
+    ref: ref,
+    size: size
+  }, /*#__PURE__*/React.createElement(ReactColorful, {
     color: color,
     onChange: onChangeColor
-  }), /*#__PURE__*/React.createElement(ColorPickerStyles.Subcontainer, null, /*#__PURE__*/React.createElement(Input, {
-    value: color,
+  }), /*#__PURE__*/React.createElement(ColorPickerStyles.PrefixTag, {
+    height: isShownSavedColors
+  }, /*#__PURE__*/React.createElement(Tag, {
+    shape: TagShape.SINGLE_CHARACTER_SQUARE,
+    color: color,
+    disabled: false
+  })), /*#__PURE__*/React.createElement(ColorPickerStyles.SubContainer, {
+    savedColors: isShownSavedColors
+  }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerInput, {
+    value: color.substr(1),
+    prefixel: /*#__PURE__*/React.createElement(ColorPickerStyles.PreffixWrapper, null, "#"),
+    onChange: function onChange(ev) {
+      return setColor(hash + ev.target.value);
+    },
+    placeholder: placeholder,
+    icon1: /*#__PURE__*/React.createElement(ColorPickerStyles.CopyIcon, {
+      onClick: function onClick() {
+        copy(color);
+      },
+      component: /*#__PURE__*/React.createElement(CopyClipboardM, null)
+    }),
+    icon1Tooltip: /*#__PURE__*/React.createElement("span", null, tooltipText)
+  }), isShownSavedColors && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Divider, null), swatchSection)));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+    align: {
+      offset: [0, heightOfDropdown()]
+    },
+    visible: dropdownVisible,
+    overlay: dropdown,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerSelect, _extends({
+    prefix: /*#__PURE__*/React.createElement(ColorPickerStyles.ColorTag, {
+      shape: TagShape.SINGLE_CHARACTER_ROUND,
+      color: color,
+      disabled: false
+    }),
     onChange: function onChange(ev) {
       return setColor(ev.target.value);
     },
-    placeholder: placeholder
-  }), /*#__PURE__*/React.createElement(Divider, null), swatchSection));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({
-    showSearch: true,
-    showArrow: false,
+    placeholder: placeholder,
+    onClick: function onClick() {
+      return setDropdownVisible(!dropdownVisible);
+    },
     value: color,
-    dropdownMatchSelectWidth: false,
-    filterOption: false,
-    dropdownRender: function dropdownRender() {
-      return dropdown;
-    }
-  }, selectProps)));
+    description: description,
+    errorText: errorText
+  }, inputProps))));
 }
 export default ColorPicker;

package/dist/ColorPicker.styles.d.ts

@@ -1,5 +1,95 @@
+/// <reference types="react" />
+import Button from '@synerise/ds-button';
+export declare const TagDot: import("styled-components").StyledComponent<"div", any, {
+    pressed?: boolean | undefined;
+}, never>;
+export declare const ColorTag: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-tags/dist/Tag/Tag.types").Props>, any, {}, never>;
+export declare const AddColorButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+export declare const CopyIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
+export declare const ColorPickerInput: import("styled-components").StyledComponent<(import("react").ComponentClass<(object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps & {
+    mask: string;
+    formatCharacters?: object | undefined;
+    placeholderChar?: string | undefined;
+    value?: string | undefined;
+}) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").TextAreaProps), any> & {
+    displayName: string;
+}) | (import("react").FunctionComponent<(object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").TextAreaProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps & {
+    mask: string;
+    formatCharacters?: object | undefined;
+    placeholderChar?: string | undefined;
+    value?: string | undefined;
+})> & {
+    displayName: string;
+}), any, {}, never>;
+export declare const ColorPickerSelect: import("styled-components").StyledComponent<(import("react").ComponentClass<(object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps & {
+    mask: string;
+    formatCharacters?: object | undefined;
+    placeholderChar?: string | undefined;
+    value?: string | undefined;
+}) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").TextAreaProps), any> & {
+    displayName: string;
+}) | (import("react").FunctionComponent<(object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").TextAreaProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps & {
+    mask: string;
+    formatCharacters?: object | undefined;
+    placeholderChar?: string | undefined;
+    value?: string | undefined;
+})> & {
+    displayName: string;
+}), any, {}, never>;
+export declare const PrefixTag: import("styled-components").StyledComponent<"div", any, {
+    height?: boolean | undefined;
+}, never>;
+export declare const SwatchSectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ValueWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const _default: {
-    Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-    Subcontainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Container: import("styled-components").StyledComponent<"div", any, {
+        size?: "S" | "M" | "L" | undefined;
+    }, never>;
+    SubContainer: import("styled-components").StyledComponent<"div", any, {
+        savedColors?: boolean | undefined;
+    }, never>;
+    ColorTag: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-tags/dist/Tag/Tag.types").Props>, any, {}, never>;
+    PrefixTag: import("styled-components").StyledComponent<"div", any, {
+        height?: boolean | undefined;
+    }, never>;
+    AddColorButton: import("styled-components").StyledComponent<typeof Button, 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>;
+    CopyIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
+    ColorPickerInput: import("styled-components").StyledComponent<(import("react").ComponentClass<(object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps & {
+        mask: string;
+        formatCharacters?: object | undefined;
+        placeholderChar?: string | undefined;
+        value?: string | undefined;
+    }) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").TextAreaProps), any> & {
+        displayName: string;
+    }) | (import("react").FunctionComponent<(object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").TextAreaProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps & {
+        mask: string;
+        formatCharacters?: object | undefined;
+        placeholderChar?: string | undefined;
+        value?: string | undefined;
+    })> & {
+        displayName: string;
+    }), any, {}, never>;
+    TagDot: import("styled-components").StyledComponent<"div", any, {
+        pressed?: boolean | undefined;
+    }, never>;
+    ColorPickerSelect: import("styled-components").StyledComponent<(import("react").ComponentClass<(object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps & {
+        mask: string;
+        formatCharacters?: object | undefined;
+        placeholderChar?: string | undefined;
+        value?: string | undefined;
+    }) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").TextAreaProps), any> & {
+        displayName: string;
+    }) | (import("react").FunctionComponent<(object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").TextAreaProps) | (object & import("@synerise/ds-input").InputProps & import("antd/lib/input").InputProps & {
+        mask: string;
+        formatCharacters?: object | undefined;
+        placeholderChar?: string | undefined;
+        value?: string | undefined;
+    })> & {
+        displayName: string;
+    }), any, {}, never>;
 };
 export default _default;

package/dist/ColorPicker.styles.js

@@ -1,14 +1,95 @@
-import styled from 'styled-components';
-import { TagsStyles } from '@synerise/ds-tags';
+import styled from 'styled-components'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+
+import { TagsStyles, Tag } from '@synerise/ds-tags';
+import Button from '@synerise/ds-button';
+import Icon from '@synerise/ds-icon';
+import { Input } from '@synerise/ds-input';
+import { ColorPickerSize } from './ColorPicker.types';
+export var TagDot = styled.div.withConfig({
+  displayName: "ColorPickerstyles__TagDot",
+  componentId: "sc-1iu8b6j-0"
+})(["display:", ";width:4px;height:4px;background-color:", ";border-radius:50%;"], function (props) {
+  return props.pressed ? 'flex' : 'none';
+}, function (props) {
+  return props.theme.palette.white;
+});
+var SIZE_DEFAULT = 167;
 var Container = styled.div.withConfig({
   displayName: "ColorPickerstyles__Container",
-  componentId: "sc-1iu8b6j-0"
-})(["@media (min-width:200px){min-width:200px;}.react-colorful__last-control{margin:16px 46px 8px 16px;border-radius:4px;height:8px;}.ant-divider-horizontal{margin:16px 0px;}", "{margin-bottom:-8px;}"], TagsStyles.Container);
-var Subcontainer = styled.div.withConfig({
-  displayName: "ColorPickerstyles__Subcontainer",
   componentId: "sc-1iu8b6j-1"
-})(["padding:16px;padding-top:8px;"]);
+})(["@media (min-width:200px){min-width:200px;margin:-8px;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{height:96px;}}&&& .ds-tag{width:16px;height:16px;margin:0px 4px 8px;border:1px solid ", ";&:hover{", "{display:flex;}}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:268px;max-width:268px;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;}"], function (props) {
+  return props.theme.palette.white;
+}, function (props) {
+  return props.theme.palette['grey-300'];
+}, TagDot, function (props) {
+  return ColorPickerSize[props.size] || SIZE_DEFAULT;
+}, function (props) {
+  return props.theme.palette['grey-300'];
+}, function (props) {
+  return props.theme.palette.white;
+}, TagsStyles.Container);
+var SubContainer = styled.div.withConfig({
+  displayName: "ColorPickerstyles__SubContainer",
+  componentId: "sc-1iu8b6j-2"
+})(["padding:", ";"], function (props) {
+  return props.savedColors ? '8px 16px 16px' : '8px 16px 0;';
+});
+export var ColorTag = styled(Tag).withConfig({
+  displayName: "ColorPickerstyles__ColorTag",
+  componentId: "sc-1iu8b6j-3"
+})(["width:16px;height:16px;border:1px solid ", ";"], function (props) {
+  return props.theme.palette['grey-300'];
+});
+export var AddColorButton = styled(Button).withConfig({
+  displayName: "ColorPickerstyles__AddColorButton",
+  componentId: "sc-1iu8b6j-4"
+})(["&&&.ant-btn{width:16px;height:16px;margin-right:2px;}"]);
+export var CopyIcon = styled(Icon).withConfig({
+  displayName: "ColorPickerstyles__CopyIcon",
+  componentId: "sc-1iu8b6j-5"
+})(["display:none;"]);
+export var ColorPickerInput = styled(Input).withConfig({
+  displayName: "ColorPickerstyles__ColorPickerInput",
+  componentId: "sc-1iu8b6j-6"
+})(["&:hover{", "{display:flex;}}"], CopyIcon);
+export var ColorPickerSelect = 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;max-width:100px;"]);
+export var PrefixTag = styled.div.withConfig({
+  displayName: "ColorPickerstyles__PrefixTag",
+  componentId: "sc-1iu8b6j-8"
+})(["&&& .ds-tag{width:24px;height:24px;border:1px solid ", ";cursor:auto;&:hover:before{cursor:auto;filter:brightness(100%);}}position:absolute;right:", ";bottom:", ";z-index:2;cursor:auto;"], function (props) {
+  return props.theme.palette['grey-300'];
+}, function (props) {
+  return props.height ? '12px' : '12px';
+}, function (props) {
+  return props.height ? '97px' : '48px';
+});
+export var SwatchSectionWrapper = styled.div.withConfig({
+  displayName: "ColorPickerstyles__SwatchSectionWrapper",
+  componentId: "sc-1iu8b6j-9"
+})(["display:flex;alignitems:center;"]);
+export var PreffixWrapper = styled.div.withConfig({
+  displayName: "ColorPickerstyles__PreffixWrapper",
+  componentId: "sc-1iu8b6j-10"
+})(["padding:6px 12px;"]);
+export var ValueWrapper = styled.div.withConfig({
+  displayName: "ColorPickerstyles__ValueWrapper",
+  componentId: "sc-1iu8b6j-11"
+})(["display:flex;font-size:12px;"]);
 export default {
   Container: Container,
-  Subcontainer: Subcontainer
+  SubContainer: SubContainer,
+  ColorTag: ColorTag,
+  PrefixTag: PrefixTag,
+  AddColorButton: AddColorButton,
+  SwatchSectionWrapper: SwatchSectionWrapper,
+  PreffixWrapper: PreffixWrapper,
+  ValueWrapper: ValueWrapper,
+  CopyIcon: CopyIcon,
+  ColorPickerInput: ColorPickerInput,
+  TagDot: TagDot,
+  ColorPickerSelect: ColorPickerSelect
 };

package/dist/ColorPicker.types.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="react" />
-import type { SelectProps } from '@synerise/ds-select';
+import type { InputProps } from '@synerise/ds-input';
 export declare type ColorHookType = {
     color: string;
     setColor: (color: string) => void;
 };
+export declare enum ColorPickerSize {
+    'S' = 135,
+    'M' = 167,
+    'L' = 199
+}
 export interface ColorPickerProps extends Partial<Pick<HTMLInputElement, 'placeholder'>> {
     value?: string;
     onChange?: (color: string) => void;
@@ -15,5 +20,10 @@ export interface ColorPickerProps extends Partial<Pick<HTMLInputElement, 'placeh
      */
     infix?: (colorHooks?: Partial<ColorHookType>) => JSX.Element;
     maxSavedColors?: number;
-    selectProps?: Omit<SelectProps, 'value' | 'onChange' | 'defaultValue'>;
+    inputProps?: Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>;
+    tooltipText?: string;
+    isShownSavedColors?: boolean;
+    size?: 'S' | 'M' | 'L';
+    errorText?: string;
+    description?: string;
 }

package/dist/ColorPicker.types.js

@@ -1 +1,7 @@
-export {};
+export var ColorPickerSize;
+
+(function (ColorPickerSize) {
+  ColorPickerSize[ColorPickerSize["S"] = 135] = "S";
+  ColorPickerSize[ColorPickerSize["M"] = 167] = "M";
+  ColorPickerSize[ColorPickerSize["L"] = 199] = "L";
+})(ColorPickerSize || (ColorPickerSize = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-color-picker",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,9 +35,9 @@
     "@synerise/ds-button": "^0.17.10",
     "@synerise/ds-divider": "^0.5.26",
     "@synerise/ds-icon": "^0.52.0",
-    "@synerise/ds-input": "^0.18.27",
-    "@synerise/ds-select": "^0.14.29",
-    "@synerise/ds-tags": "^0.7.1",
+    "@synerise/ds-input": "^0.18.28",
+    "@synerise/ds-select": "^0.14.30",
+    "@synerise/ds-tags": "^0.7.2",
     "rc-select": "~11.4.0",
     "react-colorful": "^5.2.0"
   },
@@ -45,5 +45,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "6b7a49d1e4ab90ba861c6037226988f9629b744e"
+  "gitHead": "dc78070c73476c9959230e11a5ae020d413e5c16"
 }