@appquality/unguess-design-system 3.1.50 → 3.1.52

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v3.1.52 (Wed Nov 08 2023)
+
+#### 🐛 Bug Fix
+
+- 🔀 chore(color-swatch): update import statement for ColorSwatch component [#275](https://github.com/AppQuality/unguess-design-system/pull/275) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v3.1.51 (Wed Nov 08 2023)
+
+#### 🐛 Bug Fix
+
+- Color swatch [#274](https://github.com/AppQuality/unguess-design-system/pull/274) ([@iDome89](https://github.com/iDome89) [@marcbon](https://github.com/marcbon))
+- Color swatch [#273](https://github.com/AppQuality/unguess-design-system/pull/273) ([@iDome89](https://github.com/iDome89) [@marcbon](https://github.com/marcbon))
+
+#### Authors: 2
+
+- [@iDome89](https://github.com/iDome89)
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.50 (Mon Oct 09 2023)
 
 #### 🐛 Bug Fix

package/build/index.d.ts

@@ -22,6 +22,7 @@ export * from "./stories/charts/sunburst";
 export * from "./stories/charts/waffle";
 export * from "./stories/charts/sentiment";
 export * from "./stories/close";
+export * from "./stories/color-swatch";
 export * from "./stories/drawers";
 export * as DropdownField from "./stories/dropdowns/field";
 export * from "./stories/dropdowns/item";

package/build/index.js

@@ -24,6 +24,8 @@ var pie = require('@nivo/pie');
 var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
 var line = require('@nivo/line');
+var containerUtilities = require('@zendeskgarden/container-utilities');
+var reactColorpickers = require('@zendeskgarden/react-colorpickers');
 var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
 var reactForms = require('@zendeskgarden/react-forms');
@@ -819,9 +821,9 @@ Tag.Close = StyledClose;
 Tag.SecondaryText = StyledSpan;
 
 var _path$x;
-function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
+function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
 var SvgUgSquare = function SvgUgSquare(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -834,9 +836,9 @@ var SvgUgSquare = function SvgUgSquare(props) {
 };
 
 var _path$w;
-function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
+function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
 var SvgUgCircle = function SvgUgCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -849,9 +851,9 @@ var SvgUgCircle = function SvgUgCircle(props) {
 };
 
 var _path$v;
-function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
+function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
 var SvgUgTriangle = function SvgUgTriangle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -864,9 +866,9 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
 };
 
 var _rect$4, _path$u, _path2$b, _path3$4;
-function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
+function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
 var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -890,9 +892,9 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
 };
 
 var _rect$3, _path$t, _path2$a;
-function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
+function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
 var SvgCampaignLocked = function SvgCampaignLocked(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -917,9 +919,9 @@ var SvgCampaignLocked = function SvgCampaignLocked(props) {
 };
 
 var _rect$2, _path$s, _path2$9;
-function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
 var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -946,9 +948,9 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
 };
 
 var _rect$1, _path$r, _path2$8, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
-function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
 var SvgCampaignProgress = function SvgCampaignProgress(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -993,9 +995,9 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
 };
 
 var _g$b, _path$q, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1065,9 +1067,9 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
 };
 
 var _g$a, _path$p;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1942,9 +1944,9 @@ const WaffleChart = ({ height, width, data, total, tooltip, }) => {
 };
 
 var _g$9, _defs$4;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
 var SvgSentiment1 = function SvgSentiment1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
     width: 27,
     height: 26,
     viewBox: "0 0 27 26",
@@ -1968,9 +1970,9 @@ var SvgSentiment1 = function SvgSentiment1(props) {
 };
 
 var _g$8, _defs$3;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 var SvgSentiment2 = function SvgSentiment2(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
     width: 27,
     height: 26,
     viewBox: "0 0 27 26",
@@ -1994,9 +1996,9 @@ var SvgSentiment2 = function SvgSentiment2(props) {
 };
 
 var _g$7, _defs$2;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 var SvgSentiment3 = function SvgSentiment3(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     width: 27,
     height: 26,
     viewBox: "0 0 27 26",
@@ -2026,9 +2028,9 @@ var SvgSentiment3 = function SvgSentiment3(props) {
 };
 
 var _g$6, _defs$1;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgSentiment4 = function SvgSentiment4(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     width: 27,
     height: 26,
     viewBox: "0 0 27 26",
@@ -2058,9 +2060,9 @@ var SvgSentiment4 = function SvgSentiment4(props) {
 };
 
 var _g$5, _defs;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgSentiment5 = function SvgSentiment5(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     width: 26,
     height: 26,
     viewBox: "0 0 26 26",
@@ -2301,6 +2303,56 @@ const UgClose$1 = styled__default["default"](reactNotifications.Close) `
  */
 const Close = (props) => jsxRuntime.jsx(UgClose$1, Object.assign({}, props));
 
+var _circle;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+var SvgCircleFullFill = function SvgCircleFullFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 8,
+    cy: 8,
+    r: 8,
+    fill: "currentColor"
+  })));
+};
+
+const Trigger$1 = styled.styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+`;
+const ColorSwatchTrigger = React__default["default"].forwardRef((props, ref) => {
+    var _a;
+    return (jsxRuntime.jsx(Trigger$1, Object.assign({ ref: ref }, props, { style: Object.assign(Object.assign({}, props.style), { color: props.color }) }, { children: (_a = props.children) !== null && _a !== void 0 ? _a : jsxRuntime.jsx(SvgCircleFullFill, {}) })));
+});
+const ColorSwatch = ({ colors, rowSize, children, onSelect, }) => {
+    const matrix = containerUtilities.convertToMatrix(colors, rowSize !== null && rowSize !== void 0 ? rowSize : 7);
+    const [color, setColor] = React.useState(matrix[0][0].value);
+    const [rowIndex, setRowIndex] = React.useState(0);
+    const [colIndex, setColIndex] = React.useState(0);
+    const [selectedRowIndex, setSelectedRowIndex] = React.useState(0);
+    const [selectedColIndex, setSelectedColIndex] = React.useState(0);
+    const handleChange = (rowIdx, colIdx) => {
+        setRowIndex(rowIdx);
+        setColIndex(colIdx);
+    };
+    const handleSelect = (rowIdx, colIdx) => {
+        setSelectedRowIndex(rowIdx);
+        setSelectedColIndex(colIdx);
+        setColor(matrix[rowIdx][colIdx].value);
+    };
+    return (jsxRuntime.jsx(reactColorpickers.ColorSwatchDialog, Object.assign({ colors: matrix, onChange: handleChange, onSelect: (rowIdx, colIdx) => {
+            handleSelect(rowIdx, colIdx);
+            if (onSelect)
+                onSelect(color);
+        }, rowIndex: rowIndex, colIndex: colIndex, selectedRowIndex: selectedRowIndex, selectedColIndex: selectedColIndex }, { children: jsxRuntime.jsx(ColorSwatchTrigger, Object.assign({ color: color }, { children: children })) })));
+};
+
 const UgDrawer = styled__default["default"](reactModals.DrawerModal) `
   @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
     width: 100%;
@@ -5766,6 +5818,7 @@ exports.Chrome = Chrome;
 exports.Close = Close;
 exports.Code = Code;
 exports.Col = Col;
+exports.ColorSwatch = ColorSwatch;
 exports.ContainerCard = ContainerCard;
 exports.Content = Content$1;
 exports.CounterMultiselect = CounterMultiselect;

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    justifyContent?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXs?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentSm?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentMd?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentLg?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXl?: "start" | "center" | "end" | "between" | "around" | undefined;
+    alignItems?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    justifyContent?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentXs?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentSm?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentMd?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentLg?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentXl?: "center" | "start" | "end" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -33,7 +33,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -84,7 +84,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -93,7 +93,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXs?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfSm?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfMd?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfLg?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXl?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    textAlign?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXs?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignSm?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignMd?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignLg?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXl?: "start" | "center" | "end" | "justify" | undefined;
+    alignSelf?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfXs?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfSm?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfMd?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfLg?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfXl?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    textAlign?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignXs?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignSm?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignMd?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignLg?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignXl?: "center" | "start" | "end" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -330,7 +330,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -381,7 +381,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -390,7 +390,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -600,7 +600,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -651,7 +651,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -660,7 +660,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

package/build/stories/color-swatch/_types.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface ColorSwatchProps {
+    colors: {
+        label: string;
+        value: string;
+    }[];
+    rowSize?: number;
+    children?: React.ReactNode | React.ReactNode[];
+    onSelect?: (color: string) => void;
+}
+export interface ColorSwatchTriggerProps {
+    style?: React.CSSProperties;
+    children?: React.ReactNode | React.ReactNode[];
+}

package/build/stories/color-swatch/index.d.ts

@@ -0,0 +1,3 @@
+import { ColorSwatchProps } from "./_types";
+declare const ColorSwatch: ({ colors, rowSize, children, onSelect, }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorSwatch };

package/build/stories/color-swatch/index.stories.d.ts

@@ -0,0 +1,4 @@
+import { ColorSwatchProps } from "./_types";
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ColorSwatchProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ColorSwatchProps>;
+export default _default;

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

package/build/stories/editor/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.50",
+  "version": "3.1.52",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -50,6 +50,7 @@
     "@zendeskgarden/react-breadcrumbs": "^8.49.0",
     "@zendeskgarden/react-buttons": "^8.48.2",
     "@zendeskgarden/react-chrome": "^8.49.0",
+    "@zendeskgarden/react-colorpickers": "^8.73.2",
     "@zendeskgarden/react-grid": "^8.49.0",
     "@zendeskgarden/react-loaders": "^8.49.0",
     "@zendeskgarden/react-modals": "^8.49.0",