linear-react-components-ui 1.1.2-beta.7 → 1.1.2-beta.9

package/lib/assets/styles/checkbox.scss

@@ -80,14 +80,6 @@
     padding-left: 22px;
   }
   
-  > .errormessages {
-    width: 100%;
-    color: red;
-    font-size: 13px!important;
-    line-height: 13px;
-    margin-top: 0px;
-  }
-
   &.-skeletonized {
     > .inputcontent {
       .input {

package/lib/assets/styles/dialog.scss

@@ -1,9 +1,6 @@
 @import "commons.scss";
 @import "colors.scss";
 @import "effects.scss";
-
-$shadow-button-default: 1px 1px 1px rgba(0, 0, 0, 0.2);
-$shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-button-default;
 .modalcontainer {
   font-family: 'Roboto', sans-serif;
   line-height: 22px;
@@ -62,37 +59,23 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
           width: 100%;
           margin-left: 2px;
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          .modal-title {
-            color: $font-color-default;
-            font-weight: 400;
+          &.modal-title {
+            color: #4e4c4c;
+            font-weight: 600;
           }
         }
         .close-button {
-          all: unset;
+          margin-left: auto;
           line-height: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 28px;
-          height: 28px;
-          border: none;
-          background-color: $default-color;
-          color: $font-color-soft;
-          border-radius: 999999px;
-          cursor: pointer !important;
-          >svg {
-            fill: $font-color-soft;
+          cursor: pointer;
+          > svg {
+            fill: #252424;
             pointer-events: fill;
             transition: 0.2s fill;
-          }
-          &:hover {
-            background-color: $default-hover-color;
-          }
-          &:focus {
-            -webkit-box-shadow: $shadow-button-inset-default;
-            box-shadow: $shadow-button-inset-default;
+            &:hover {
+              fill: rgba(0, 0, 0, 0.164);
+            }
           }
         }
       }

package/lib/assets/styles/icon.scss

@@ -1,15 +1,42 @@
+@import "colors.scss";
+
 /*
 * Caso altere o nome da classe, deverá pesquisar em todo projeto se existe 
 * algum lugar que esta sobescrevendo
 */
-.icon-component {
-  margin: 0px 2px;
-}
-
 .icon-component-container {
   display: inline-flex;
   place-self: center;
   padding: 2px;
   border-radius: 99999px;
   pointer-events: fill;
+
+}
+
+.icon-component {
+  margin: 0px 2px;
+  &:not([fill]) { 
+    fill: #676464;
+  }
+
+  &[data-color-style="primary"] {
+    fill: $primary-color
+  }
+
+  &[data-color-style="success"] {
+    fill: $success-color
+  }
+
+  &[data-color-style="info"] {
+    fill: $info-color
+  }
+
+  &[data-color-style="warning"] {
+    fill: $warning-color
+  }
+
+  &[data-color-style="danger"] {
+    fill: $danger-color
+  }
 }
+

package/lib/assets/styles/multiSelect.scss

@@ -23,10 +23,6 @@
         top: 50%;
         left: 10px;
         transform: translateY(-50%);
-
-        button {
-          all: unset;
-        }
       }
     }
 
@@ -99,7 +95,6 @@
     }
 
     .menubutton {
-      all: unset;
       background-color: transparent;
       border: 0;
       padding: 0;
@@ -122,4 +117,4 @@
       }
     }
   }
-}
+}

package/lib/assets/styles/select.scss

@@ -10,15 +10,14 @@
     height: auto;
   }
 
-  .selectwrapper .actionbuttonsselect {
+  .selectwrapper .actionbutton {
+    cursor: pointer;
     display: flex;
-    flex-direction: row;
+    align-items: center;
+    height: 100%;
 
-    .actionbutton {
-      all: unset;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
+    >.iconclear {
+      margin: 8px -3px 2px 3px;
     }
   }
 
@@ -43,10 +42,6 @@
       float: left;
       margin: 2px;
       padding: 0px 8px 0px 5px;
-
-      .close {
-        all: unset;
-      }
     }
   }
 
@@ -123,7 +118,6 @@
     }
 
     .menubutton {
-      all: unset;
       background-color: transparent;
       border: 0;
       padding: 0;
@@ -151,4 +145,4 @@
     font-style: italic;
     font-size: 13px;
   }
-}
+}

package/lib/assets/styles/tabs.scss

@@ -123,9 +123,6 @@ $dropdown-width: 38px;
         float: none;
       }
     }
-    .toolbar-component {
-      width: auto;
-    }
   }
 
   >.panel {

package/lib/assets/styles/textContent.scss

@@ -0,0 +1,9 @@
+@import "colors.scss";
+@import "fonts.scss";
+
+.text-content-component {
+  @extend %component-fonts;
+  &[data-textcontent="strong"] {
+    font-weight: bold;
+  }
+}

package/lib/checkbox/index.d.ts

@@ -1,5 +1,5 @@
+import React__default from 'react';
 import { ICheckBoxProps } from './types.js';
-import 'react';
 import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 
@@ -8,6 +8,6 @@ import '../@types/Position.js';
  * o componente Field dentro do componente Form, pois o mesmo leva em consideração o tipo do
  * componente para gerar propriedades customizadas.
  */
-declare const CheckBox: ({ name, required, value, label, onChange, autofocus, hint, id, gridLayout, checked, disabled, permissionAttr, tooltip, tooltipPosition, tooltipWidth, skeletonize, targetRef, errorMessages, }: ICheckBoxProps) => JSX.Element | null;
+declare const CheckBox: React__default.ForwardRefExoticComponent<ICheckBoxProps & React__default.RefAttributes<HTMLInputElement>>;
 
 export { CheckBox as default };

package/lib/checkbox/index.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Label = _interopRequireDefault(require("./Label"));
-var _hint = _interopRequireDefault(require("../hint"));
 var _gridlayout = _interopRequireDefault(require("../gridlayout"));
-var helpers = _interopRequireWildcard(require("../inputs/base/helpers"));
-var _permissionValidations = require("../permissionValidations");
+var _Label = _interopRequireDefault(require("./Label"));
 require("../assets/styles/checkbox.scss");
+var _permissionValidations = require("../permissionValidations");
+var _hint = _interopRequireDefault(require("../hint"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -21,7 +20,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * componente para gerar propriedades customizadas.
  */
 
-const CheckBox = _ref => {
+const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     name,
     required,
@@ -30,7 +29,7 @@ const CheckBox = _ref => {
     onChange,
     autofocus,
     hint,
-    id = '',
+    id = undefined,
     gridLayout,
     checked = false,
     disabled,
@@ -39,13 +38,13 @@ const CheckBox = _ref => {
     tooltipPosition = 'top',
     tooltipWidth = 'auto',
     skeletonize,
-    targetRef,
-    errorMessages
+    targetRef
   } = _ref;
   const [isChecked, setIsChecked] = (0, _react.useState)(checked);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
   const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
   const inputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => inputRef.current, [inputRef.current]);
   (0, _react.useEffect)(() => {
     setIsChecked(checked);
   }, [checked]);
@@ -77,8 +76,7 @@ const CheckBox = _ref => {
     onClick: !shouldDisable() && !skeletonize ? () => setIsChecked(!isChecked) : undefined,
     tabIndex: -1,
     role: "checkbox",
-    "aria-checked": "false",
-    onKeyPress: undefined
+    "aria-checked": "false"
   }, /*#__PURE__*/_react.default.createElement("input", {
     ref: r => {
       if (targetRef) targetRef(r);
@@ -103,11 +101,12 @@ const CheckBox = _ref => {
     visible: !!hint,
     description: hint,
     customClass: "hint"
-  }), errorMessages && helpers.getErrorMessages(errorMessages));
+  }));
   if (onDenied.unvisible) return null;
   return gridLayout ? /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
     customClass: "-withinput",
     cols: gridLayout
   }, renderInput()) : renderInput();
-};
+});
+CheckBox.displayName = 'CheckBox';
 var _default = exports.default = CheckBox;

package/lib/checkbox/types.d.ts

@@ -4,7 +4,7 @@ import { Position } from '../@types/Position.js';
 
 type ChangeEvent = {
     checked: boolean;
-    id: string;
+    id?: string;
     name?: string;
     value: boolean;
 };
@@ -37,7 +37,6 @@ interface ICheckBoxProps {
     skeletonize?: boolean;
     targetRef?: (ref: HTMLInputElement | null) => void;
     targetSpanRef?: (ref: HTMLSpanElement | null) => void;
-    errorMessages?: string[] | undefined;
 }
 
 export type { ChangeEvent, ICheckBoxProps };

package/lib/dialog/Custom.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _uuid = _interopRequireDefault(require("uuid"));
+var uuid = _interopRequireWildcard(require("uuid"));
 var _base = _interopRequireDefault(require("./base"));
 var _Footer = _interopRequireDefault(require("./base/Footer"));
 var _icons = _interopRequireDefault(require("../icons"));
 var _buttons = require("../buttons");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = 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.apply(this, arguments); }
 const getIcon = (iconName, icon) => {
@@ -46,7 +48,7 @@ const Custom = props => {
   }, props.text)), props.buttons && props.buttons.length > 0 && /*#__PURE__*/_react.default.createElement(_Footer.default, props, /*#__PURE__*/_react.default.createElement(_buttons.ButtonContainer, {
     position: "right"
   }, props.buttons.map(button => /*#__PURE__*/_react.default.cloneElement(button, {
-    key: "button-".concat(_uuid.default.v1())
+    key: "button-".concat(uuid.v1())
   })))));
 };
 var _default = exports.default = Custom;

package/lib/dialog/base/Content.js

@@ -13,7 +13,6 @@ const Content = _ref => {
     styleForContent
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    id: "modal-dialog-content",
     className: "dialog-content",
     style: styleForContent
   }, children);

package/lib/dialog/base/Header.js

@@ -11,11 +11,11 @@ var _base = require("../base");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const getCloseButton = handleClose => /*#__PURE__*/_react.default.createElement("button", {
-  id: "botao-fechar-modal-cabecalho",
+const getCloseButton = handleClose => /*#__PURE__*/_react.default.createElement("span", {
   className: "close-button",
-  tabIndex: 0,
-  onClick: handleClose
+  onClick: handleClose,
+  role: "button",
+  tabIndex: 0
 }, /*#__PURE__*/_react.default.createElement(_icons.default, {
   name: "cancel2"
 }));

package/lib/dialog/base/index.js

@@ -103,10 +103,10 @@ const BaseDialog = props => {
   };
   const createdModal = /*#__PURE__*/_react.default.createElement("div", {
     className: "modalcontainer",
-    onMouseDown: handleClickOutside,
     style: {
       zIndex: 99999 + Number(zIndex)
-    }
+    },
+    onMouseDown: handleClickOutside
   }, overlay && /*#__PURE__*/_react.default.createElement("div", {
     className: "modal-overlay",
     "data-testid": "modal-overlay"
@@ -120,10 +120,8 @@ const BaseDialog = props => {
     ref: wrapperEl
   }, children)));
   (0, _react.useEffect)(() => {
-    if (open) {
-      if (closeOnEsc) {
-        document.addEventListener('keydown', handleCloseOnEsc);
-      }
+    if (open && closeOnEsc) {
+      document.addEventListener('keydown', handleCloseOnEsc);
     }
     return () => {
       document.removeEventListener('keydown', handleCloseOnEsc);

package/lib/dialog/form/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FormDialogContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _uuid = _interopRequireDefault(require("uuid"));
+var uuid = _interopRequireWildcard(require("uuid"));
 var _base = _interopRequireDefault(require("../base"));
 var _Header = _interopRequireDefault(require("../base/Header"));
 var _index = require("../../buttons/index");
@@ -71,12 +71,12 @@ const ModalForm = props => {
   }), props.buttons.map(button => {
     if (context && context.securityBeforeUnload && button && button.type && button.type.name === 'CancelButton') {
       return /*#__PURE__*/_react.default.cloneElement(button, {
-        key: "button-".concat(_uuid.default.v1()),
+        key: "button-".concat(uuid.v1()),
         onClick: props.handlerClose
       });
     }
     return /*#__PURE__*/_react.default.cloneElement(button, {
-      key: "button-".concat(_uuid.default.v1())
+      key: "button-".concat(uuid.v1())
     });
   })))));
 };

package/lib/drawer/Drawer.js

@@ -82,9 +82,8 @@ const BaseDrawer = _ref => {
     body.appendChild(drawerOverlay);
   };
   const closeDrawerOnEsc = e => {
-    if (closeOnEsc && e.key === 'ESC') {
+    if (closeOnEsc && (e.keyCode === 27 || e.key === 'ESC')) {
       handlerClose === null || handlerClose === void 0 ? void 0 : handlerClose();
-      e.stopPropagation();
     }
   };
   (0, _react.useEffect)(() => {
@@ -99,7 +98,7 @@ const BaseDrawer = _ref => {
     if (overlay && !targetId && body) setDrawerOverlay(body);
     return () => {
       const drawerOverlay = document.getElementsByClassName('drawer-overlay')[0];
-      if (closeOnEsc) document.body.removeEventListener('keydown', closeDrawerOnEsc);
+      if (closeOnEsc) document.body.removeEventListener('keyup', closeDrawerOnEsc);
       if (targetId) {
         const drawerComponentTarget = document.getElementById(targetId);
         if (drawerComponentTarget && drawerComponentEl.current) {
@@ -111,9 +110,9 @@ const BaseDrawer = _ref => {
   }, []);
   (0, _react.useEffect)(() => {
     if (closeOnEsc) {
-      document.body.addEventListener('keydown', closeDrawerOnEsc);
+      document.body.addEventListener('keyup', closeDrawerOnEsc);
     }
-    return () => document.body.removeEventListener('keydown', closeDrawerOnEsc);
+    return () => document.body.removeEventListener('keyup', closeDrawerOnEsc);
   }, [closeOnEsc]);
   const contextValues = {
     handlerClose,

package/lib/drawer/Header.js

@@ -24,7 +24,7 @@ const getIcon = (titleIcon, icon) => {
     return /*#__PURE__*/_react.default.createElement("span", {
       "data-testid": "icon-header",
       className: "icon-header"
-    }, icon || /*#__PURE__*/_react.default.createElement(_icons.default, {
+    }, icon || titleIcon && /*#__PURE__*/_react.default.createElement(_icons.default, {
       name: titleIcon,
       color: "#000",
       size: 24

package/lib/dropdown/Popup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IPopUpProps } from './types.js';
 
-declare const DropdownPopup: ({ id, customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, ...props }: IPopUpProps) => React.ReactPortal;
+declare const DropdownPopup: ({ customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, ...props }: IPopUpProps) => React.ReactPortal;
 
 export { DropdownPopup as default };

package/lib/dropdown/Popup.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _uuid = require("uuid");
-const _excluded = ["id", "customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth"];
+const _excluded = ["customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -31,7 +30,6 @@ const getCalendarDropdownStyle = _ref => {
 const body = document.getElementsByTagName('body')[0];
 const DropdownPopup = _ref2 => {
   let {
-      id,
       customClassForDropdown = '',
       align = 'left',
       isFloatMenu = false,
@@ -55,11 +53,10 @@ const DropdownPopup = _ref2 => {
   if (popup && popup.current) {
     const modalContainers = document.body.getElementsByClassName('modalcontainer');
     const lastModalContainer = modalContainers[modalContainers.length - 1];
-    popup.current.style.zIndex = "".concat(modalContainers.length ? Number(lastModalContainer.style.zIndex) + 1 : 99999);
+    popup.current.style.zIndex = "".concat(modalContainers.length ? lastModalContainer.style.zIndex : 99999);
   }
   (0, _react.useEffect)(() => {
     body.appendChild(popup.current);
-    popup.current.id = id || "dropdown-component-".concat((0, _uuid.v1)());
     return () => {
       body.removeChild(popup.current);
     };

package/lib/dropdown/types.d.ts

@@ -22,7 +22,6 @@ interface WithDropdownContextProps {
     handleDropdownClose: () => void;
 }
 interface IPopUpProps {
-    id?: string;
     children?: ReactNode;
     customClassForDropdown?: string;
     align: 'left' | 'right';

package/lib/icons/helper.js

@@ -575,7 +575,7 @@ var _default = exports.default = {
   },
   cash3: {
     viewbox: '0 0 17 16',
-    paths: ['9h1v1h-1v-1z', 'M0 6v9h17v-9h-17zM3 14h-2v-2h1v1h1v1zM3 8h-1v1h-1v-2h2v1zM10.5 10c0.276 0 0.5 0.224 0.5 0.5v2c0 0.276-0.224 0.5-0.5 0.5h-1.5v0.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-0.5h-1.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1.5v-1h-1.5c-0.276 0-0.5-0.224-0.5-0.5v-2c0-0.276 0.224-0.5 0.5-0.5h1.5v-0.5c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v0.5h1.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1.5v1h1.5zM16 14h-2v-1h1v-1h1v2zM16 9h-1v-1h-1v-1h2v2z', 'M9 11h1v1h-1v-1z', 'M1 4h15v1.5h-15v-1.5z', 'M2 2h13v1.5h-13v-1.5z']
+    paths: ['M7 9h1v1h-1v-1z', 'M0 6v9h17v-9h-17zM3 14h-2v-2h1v1h1v1zM3 8h-1v1h-1v-2h2v1zM10.5 10c0.276 0 0.5 0.224 0.5 0.5v2c0 0.276-0.224 0.5-0.5 0.5h-1.5v0.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-0.5h-1.5c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1.5v-1h-1.5c-0.276 0-0.5-0.224-0.5-0.5v-2c0-0.276 0.224-0.5 0.5-0.5h1.5v-0.5c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v0.5h1.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1.5v1h1.5zM16 14h-2v-1h1v-1h1v2zM16 9h-1v-1h-1v-1h2v2z', 'M9 11h1v1h-1v-1z', 'M1 4h15v1.5h-15v-1.5z', 'M2 2h13v1.5h-13v-1.5z']
   },
   wallet: {
     viewbox: '0 0 17 16',

package/lib/icons/index.d.ts

@@ -1,13 +1,14 @@
-import { IIconProps } from './types.js';
+import { IconProps } from './types.js';
 import 'react';
 import '../@types/PointerEvents.js';
 import '../@types/SizePixels.js';
 import '../@types/Icon.js';
 import './helper.js';
 import '../@types/Position.js';
+import '../@types/ColorStyles.js';
 
 declare const _default: {
-    (props: IIconProps): JSX.Element;
+    (props: IconProps): JSX.Element;
     displayName: string;
 };
 

package/lib/icons/index.js

@@ -24,17 +24,23 @@ const Icon = _ref => {
     disabled = false,
     customClass = '',
     customClassForContainer = '',
-    color = '#676464',
+    colorStyle = 'default',
+    color,
+    viewBox,
     pointerEvents = 'none',
     targetRef,
     tooltip
   } = _ref;
+  const isUsingColorStyle = colorStyle !== 'default';
+  const colorFromProp = isUsingColorStyle || !color ? undefined : color;
   const refSvg = (0, _react.useRef)(null);
+  const viewBoxFromIconOrSvgStrcut = name ? listIcon[name].viewbox : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.viewbox;
   const getPaths = () => name ? listIcon[name].paths : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.paths;
   const getSvg = () => {
     var _getPaths;
     return /*#__PURE__*/_react.default.createElement("svg", {
       "data-testid": "icon",
+      "data-color-style": colorStyle,
       onClick: () => {
         if (onClick && !disabled) onClick();
       },
@@ -43,8 +49,8 @@ const Icon = _ref => {
       },
       width: "".concat(size, "px"),
       height: "".concat(size, "px"),
-      fill: disabled ? disabledIconColor : color,
-      viewBox: name ? listIcon[name].viewbox : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.viewbox,
+      fill: disabled ? disabledIconColor : colorFromProp,
+      viewBox: viewBox || viewBoxFromIconOrSvgStrcut,
       className: "icon-component ".concat(customClass),
       pointerEvents: pointerEvents,
       style: style
@@ -54,6 +60,7 @@ const Icon = _ref => {
       key: value
     })));
   };
+  if (color && colorStyle !== 'default') throw new Error('Expected only one of the two properties: colorStyle or color');
   if (!name && !svgStruct) throw new Error('One of the "name" and "svgStruct" props must be filled');
   if (!visible) return null;
   if (!tooltip) return getSvg();

package/lib/icons/types.d.ts

@@ -3,6 +3,7 @@ import { PointerEvents } from '../@types/PointerEvents.js';
 import { SizePixels } from '../@types/SizePixels.js';
 import { IconNames } from '../@types/Icon.js';
 import { Position } from '../@types/Position.js';
+import { ColorStyles } from '../@types/ColorStyles.js';
 import './helper.js';
 
 type ListIconType = {
@@ -11,26 +12,38 @@ type ListIconType = {
         paths: Array<string>;
     };
 };
-interface IIconProps {
+type SvgStruct = {
+    viewbox: string;
+    paths: Array<string>;
+};
+type BaseIconProps = {
     size?: SizePixels;
-    color?: string;
     customClass?: string;
     customClassForContainer?: string;
     style?: CSSProperties;
     visible?: boolean;
     disabled?: boolean;
     pointerEvents?: PointerEvents;
-    name?: IconNames;
     viewBox?: string;
-    svgStruct?: {
-        viewbox: string;
-        paths: Array<string>;
-    };
     onClick?: () => void;
     tooltipPosition?: Exclude<Position, 'center'>;
     tooltipWidth?: string | number;
     tooltip?: string;
     targetRef?: (ref: HTMLDivElement) => void;
-}
+};
+type ColorProps = ({
+    colorStyle?: ColorStyles | 'default';
+    color?: null;
+} | {
+    color?: string;
+    colorStyle?: undefined;
+});
+type IconProps = BaseIconProps & ColorProps & ({
+    name: IconNames;
+    svgStruct?: null;
+} | {
+    svgStruct: SvgStruct;
+    name?: null;
+});
 
-export type { IIconProps, ListIconType };
+export type { IconProps, ListIconType };

package/lib/index.d.ts

@@ -27,6 +27,7 @@ import './labels/types.js';
 import './icons/types.js';
 import './@types/PointerEvents.js';
 import './@types/SizePixels.js';
+import './@types/ColorStyles.js';
 import './list/Header.js';
 import './list/types.js';
 import './list/Item.js';