linear-react-components-ui 1.1.14-beta.0 → 1.1.14-beta.1

package/lib/form/withFormSecurity.js

@@ -1,54 +1,47 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FormSecurityContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var FormSecurityContext = /*#__PURE__*/_react.default.createContext({});
-exports.FormSecurityContext = FormSecurityContext;
-var withFormSecurity = function withFormSecurity(WrappedComponent) {
-  var EnhancedComponent = function EnhancedComponent(props) {
-    var handlerClose = props.handlerClose;
-    var changedData = (0, _react.useRef)(false);
-    var securityBeforeUnload = (0, _react.useRef)(false);
-    var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showQuestion = _useState2[0],
-      setShowQuestion = _useState2[1];
-    var newHandlerClose = function newHandlerClose() {
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const FormSecurityContext = exports.FormSecurityContext = /*#__PURE__*/_react.default.createContext({});
+const withFormSecurity = WrappedComponent => {
+  const EnhancedComponent = props => {
+    const {
+      onOpenChange,
+      handlerClose
+    } = props;
+    const changedData = (0, _react.useRef)(false);
+    const securityBeforeUnload = (0, _react.useRef)(false);
+    const [showQuestion, setShowQuestion] = (0, _react.useState)(false);
+    const newHandlerClose = () => {
       if (changedData.current && securityBeforeUnload.current) {
         setShowQuestion(true);
-      } else if (handlerClose) handlerClose();
+      } else if (onOpenChange) onOpenChange(false);else if (handlerClose) handlerClose();
     };
-    var onConfirmClick = function onConfirmClick() {
+    const onConfirmClick = () => {
+      if (onOpenChange) onOpenChange(false);
       if (handlerClose) handlerClose();
     };
-    var onUnconfirmClick = function onUnconfirmClick() {
+    const onUnconfirmClick = () => {
       setShowQuestion(false);
     };
-    var onChangedData = function onChangedData(value) {
+    const onChangedData = value => {
       changedData.current = value;
     };
-    var setSecurityBeforeUnload = function setSecurityBeforeUnload(value) {
+    const setSecurityBeforeUnload = value => {
       securityBeforeUnload.current = value;
     };
-    var contextValues = {
-      onChangedData: onChangedData,
-      showQuestion: showQuestion,
-      onConfirmClick: onConfirmClick,
-      onUnconfirmClick: onUnconfirmClick,
-      setSecurityBeforeUnload: setSecurityBeforeUnload,
+    const contextValues = {
+      onChangedData,
+      showQuestion,
+      onConfirmClick,
+      onUnconfirmClick,
+      setSecurityBeforeUnload,
       securityBeforeUnload: securityBeforeUnload.current
     };
     return /*#__PURE__*/_react.default.createElement(FormSecurityContext.Provider, {
@@ -59,5 +52,4 @@ var withFormSecurity = function withFormSecurity(WrappedComponent) {
   };
   return EnhancedComponent;
 };
-var _default = withFormSecurity;
-exports.default = _default;
+var _default = exports.default = withFormSecurity;

package/lib/gridlayout/GridCol.js

@@ -6,29 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("../assets/styles/gridlayout.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var getClass = function getClass(col) {
-  var cols = col ? col.split(' ') : [];
-  var classes = 'grid-container ';
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getClass = col => {
+  const cols = col ? col.split(' ') : [];
+  let classes = 'grid-container ';
   if (cols[0]) classes += "col-xs-".concat(cols[0]);
   if (cols[1]) classes += " col-sm-".concat(cols[1]);
   if (cols[2]) classes += " col-md-".concat(cols[2]);
   if (cols[3]) classes += " col-lg-".concat(cols[3]);
   return classes;
 };
-var GridCol = function GridCol(props) {
-  var cols = props.cols,
-    customClass = props.customClass,
-    children = props.children,
-    style = props.style,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? true : _props$visible;
-  var gridClasses = getClass(cols || '');
+const GridCol = props => {
+  const {
+    cols,
+    customClass,
+    children,
+    style,
+    visible = true
+  } = props;
+  const gridClasses = getClass(cols || '');
   if (!visible) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(customClass, " ").concat(gridClasses),
     style: style
   }, children);
 };
-var _default = GridCol;
-exports.default = _default;
+var _default = exports.default = GridCol;

package/lib/gridlayout/GridRow.js

@@ -6,20 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("../assets/styles/gridlayout.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var getClass = function getClass(props) {
-  return "row ".concat(props.customClass, "\n    ").concat(props.withTrim && ' -withtrim', "\n    ").concat(props.verticalAlign && " align-".concat(props.verticalAlign), "\n    ").concat(props.horizontalAlign && " justify-content-".concat(props.horizontalAlign));
-};
-var GridRow = function GridRow(props) {
-  var style = props.style,
-    children = props.children,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? true : _props$visible;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const getClass = props => "row ".concat(props.customClass, "\n    ").concat(props.withTrim && ' -withtrim', "\n    ").concat(props.verticalAlign && " align-items-".concat(props.verticalAlign), "\n    ").concat(props.horizontalAlign && " justify-content-".concat(props.horizontalAlign));
+const GridRow = props => {
+  const {
+    style,
+    children,
+    verticalAlign = 'start',
+    visible = true
+  } = props;
   if (!visible) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: style,
-    className: getClass(props)
+    className: getClass(_objectSpread(_objectSpread({}, props), {}, {
+      verticalAlign
+    }))
   }, children);
 };
-var _default = GridRow;
-exports.default = _default;
+var _default = exports.default = GridRow;

package/lib/gridlayout/index.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "GridRow", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _GridRow.default;
   }
 });
 exports.default = void 0;
 var _GridRow = _interopRequireDefault(require("./GridRow"));
 var _GridCol = _interopRequireDefault(require("./GridCol"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _GridCol.default;
-exports.default = _default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _GridCol.default;

package/lib/gridlayout/types.d.ts

@@ -9,7 +9,7 @@ interface IGridCol {
 }
 interface IGridRow {
     children: ReactNode | ReactNode[];
-    verticalAlign?: string;
+    verticalAlign?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
     horizontalAlign?: string;
     style?: CSSProperties;
     withTrim?: boolean;

package/lib/hint/helpers.d.ts

@@ -0,0 +1,3 @@
+declare const showHintList: (arrayHint: string[]) => JSX.Element;
+
+export { showHintList };

package/lib/hint/helpers.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showHintList = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const showHintList = arrayHint => /*#__PURE__*/_react.default.createElement("div", {
+  className: "rules-list",
+  style: {
+    padding: '15px 0px'
+  }
+}, /*#__PURE__*/_react.default.createElement("ul", {
+  style: {
+    listStyleType: 'none'
+  }
+}, arrayHint.map((hint, index) => /*#__PURE__*/_react.default.createElement("li", {
+  key: index.toString()
+}, "- ", hint))));
+exports.showHintList = showHintList;

package/lib/hint/index.d.ts

@@ -1,6 +1,7 @@
 import { HintProps } from './types.js';
 import 'react';
+import '../@types/ColorStyles.js';
 
-declare const Hint: ({ visible, description, customClass, skeletonize, style, }: HintProps) => JSX.Element | null;
+declare const Hint: ({ visible, description, customClass, skeletonize, style, disabled, color, }: HintProps) => JSX.Element | null;
 
 export { Hint as default };

package/lib/hint/index.js

@@ -5,37 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _helpers = require("./helpers");
 require("../assets/styles/hint.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var Hint = function Hint(_ref) {
-  var _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? true : _ref$visible,
-    description = _ref.description,
-    customClass = _ref.customClass,
-    _ref$skeletonize = _ref.skeletonize,
-    skeletonize = _ref$skeletonize === void 0 ? false : _ref$skeletonize,
-    style = _ref.style;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Hint = _ref => {
+  let {
+    visible = true,
+    description,
+    customClass,
+    skeletonize = false,
+    style,
+    disabled = false,
+    color
+  } = _ref;
   if (!visible || !description) return null;
-  var showHintList = function showHintList(arrayHint) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "rules-list",
-      style: {
-        padding: '15px 0px'
-      }
-    }, /*#__PURE__*/_react.default.createElement("ul", {
-      style: {
-        listStyleType: 'none'
-      }
-    }, arrayHint.map(function (hint, index) {
-      return /*#__PURE__*/_react.default.createElement("li", {
-        key: index.toString()
-      }, "- ", hint);
-    })));
-  };
   return /*#__PURE__*/_react.default.createElement("div", {
+    "aria-disabled": disabled,
     style: style,
-    className: "\n        hint-component\n        ".concat(customClass, "\n        ").concat(skeletonize ? '-skeletonized' : '', "\n      ")
-  }, Array.isArray(description) ? showHintList(description) : /*#__PURE__*/_react.default.createElement("span", null, description));
+    className: "\n        hint-component\n        ".concat(customClass, "\n        ").concat(skeletonize ? '-skeletonized' : '', "\n        ").concat(disabled ? '-disabled' : '', "\n        -").concat(color, "\n      ")
+  }, Array.isArray(description) ? (0, _helpers.showHintList)(description) : /*#__PURE__*/_react.default.createElement("span", {
+    "aria-disabled": disabled
+  }, description));
 };
-var _default = Hint;
-exports.default = _default;
+var _default = exports.default = Hint;

package/lib/hint/types.d.ts

@@ -1,11 +1,14 @@
 import { CSSProperties } from 'react';
+import { ColorStyles } from '../@types/ColorStyles.js';
 
 interface HintProps {
     description?: string | string[];
     visible?: boolean;
     customClass?: string;
     skeletonize?: boolean;
+    disabled?: boolean;
     style?: CSSProperties;
+    color?: ColorStyles;
 }
 
 export { HintProps };

package/lib/icons/helper.d.ts

@@ -603,6 +603,10 @@ declare const _default: {
         viewbox: string;
         paths: string[];
     };
+    user_block: {
+        viewbox: string;
+        paths: string[];
+    };
 };
 
 export { _default as default };

package/lib/icons/helper.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = {
+var _default = exports.default = {
   paperplane: {
     viewbox: '0 0 16 16',
     paths: ['M7 11l6.151 2.195 2.849-12.459zM5 10.311l11-9.575-16 7.913zM7 12.062v3.938l2.902-2.902z']
@@ -575,7 +575,7 @@ var _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',
@@ -608,6 +608,9 @@ var _default = {
   videoCamOutline: {
     viewbox: '0 0 16 16',
     paths: ['M15.294 4.004c-0.165 0-0.335 0.058-0.491 0.168l-2.803 1.978v-1.651c0-0.825-0.675-1.5-1.5-1.5h-9c-0.825 0-1.5 0.675-1.5 1.5v7c0 0.825 0.675 1.5 1.5 1.5h9c0.825 0 1.5-0.675 1.5-1.5v-1.65l2.803 1.978c0.156 0.11 0.326 0.168 0.491 0.168 0 0 0 0 0 0 0.22 0 0.421-0.101 0.551-0.278 0.101-0.137 0.154-0.313 0.154-0.51v-6.415c-0-0.518-0.355-0.788-0.706-0.788zM15 10.743l-2.469-1.743h-1.531v2.5c0 0.271-0.229 0.5-0.5 0.5h-9c-0.271 0-0.5-0.229-0.5-0.5v-7c0-0.271 0.229-0.5 0.5-0.5h9c0.271 0 0.5 0.229 0.5 0.5v2.5h1.531l2.469-1.743v5.486z', 'M4 5l5 3-5 3z']
+  },
+  user_block: {
+    viewbox: '0 0 16 16',
+    paths: ['M7.5 16h-6.977c-0.14 0-0.274-0.059-0.369-0.163s-0.141-0.242-0.129-0.382c0.11-1.22 0.585-2.363 1.373-3.305 0.697-0.832 1.59-1.452 2.602-1.809l0-0.475c-0.562-0.385-1.037-0.926-1.385-1.582-0.402-0.758-0.615-1.634-0.615-2.535 0-1.251 0.405-2.431 1.139-3.323 0.758-0.92 1.774-1.427 2.861-1.427 2.119 0 3.874 1.966 3.993 4.476 0.013 0.276-0.2 0.51-0.476 0.523s-0.51-0.2-0.523-0.476c-0.094-1.976-1.41-3.524-2.995-3.524-1.654 0-3 1.682-3 3.75 0 1.457 0.687 2.795 1.75 3.408 0.155 0.089 0.25 0.254 0.25 0.433l-0 1.116c0 0.224-0.149 0.42-0.364 0.481-0.967 0.274-1.822 0.828-2.471 1.604-0.538 0.643-0.901 1.397-1.064 2.208h6.4c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z', 'M11.5 7c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5zM8 11.5c0-1.93 1.57-3.5 3.5-3.5 0.785 0 1.511 0.26 2.095 0.698l-4.897 4.897c-0.438-0.584-0.698-1.31-0.698-2.095zM11.5 15c-0.785 0-1.511-0.26-2.095-0.698l4.897-4.897c0.438 0.584 0.698 1.31 0.698 2.095 0 1.93-1.57 3.5-3.5 3.5z']
   }
-};
-exports.default = _default;
+};

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

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,71 +8,67 @@ var _react = _interopRequireWildcard(require("react"));
 var _helper = _interopRequireDefault(require("./helper"));
 var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
 require("../assets/styles/icon.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var listIcon = _helper.default;
-var disabledIconColor = 'rgb(193, 193, 193)';
-var Icon = function Icon(_ref) {
-  var name = _ref.name,
-    _onClick = _ref.onClick,
-    svgStruct = _ref.svgStruct,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 16 : _ref$size,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? true : _ref$visible,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$customClass = _ref.customClass,
-    customClass = _ref$customClass === void 0 ? '' : _ref$customClass,
-    _ref$customClassForCo = _ref.customClassForContainer,
-    customClassForContainer = _ref$customClassForCo === void 0 ? '' : _ref$customClassForCo,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#676464' : _ref$color,
-    _ref$pointerEvents = _ref.pointerEvents,
-    pointerEvents = _ref$pointerEvents === void 0 ? 'none' : _ref$pointerEvents,
-    targetRef = _ref.targetRef,
-    tooltip = _ref.tooltip;
-  var refSvg = (0, _react.useRef)(null);
-  var getPaths = function getPaths() {
-    return name ? listIcon[name].paths : svgStruct === null || svgStruct === void 0 ? void 0 : svgStruct.paths;
-  };
-  var getSvg = function getSvg() {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 listIcon = _helper.default;
+const disabledIconColor = 'rgb(193, 193, 193)';
+const Icon = _ref => {
+  let {
+    name,
+    onClick,
+    svgStruct,
+    size = 16,
+    style = {},
+    visible = true,
+    disabled = false,
+    customClass = '',
+    customClassForContainer = '',
+    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",
-      onClick: function onClick() {
-        if (_onClick && !disabled) _onClick();
+      "data-color-style": colorStyle,
+      onClick: () => {
+        if (onClick && !disabled) onClick();
       },
-      ref: function ref(r) {
+      ref: r => {
         refSvg.current = r;
       },
       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
-    }, (_getPaths = getPaths()) === null || _getPaths === void 0 ? void 0 : _getPaths.map(function (value) {
-      return /*#__PURE__*/_react.default.createElement("path", {
-        "data-testid": "icon-path",
-        d: value,
-        key: value
-      });
-    }));
+    }, (_getPaths = getPaths()) === null || _getPaths === void 0 ? void 0 : _getPaths.map(value => /*#__PURE__*/_react.default.createElement("path", {
+      "data-testid": "icon-path",
+      d: value,
+      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();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "icon-component-container ".concat(customClassForContainer),
-    ref: function ref(r) {
+    ref: r => {
       if (targetRef && r) targetRef(r);
     }
   }, getSvg());
 };
-var _default = (0, _withTooltip.default)(Icon);
-exports.default = _default;
+var _default = exports.default = (0, _withTooltip.default)(Icon);

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 { IIconProps, ListIconType };
+export { IconProps, ListIconType };

package/lib/index.d.ts

@@ -7,7 +7,7 @@ export { default as List } from './list/index.js';
 export { default as Radio } from './radio/index.js';
 export { default as Tab } from './tabs/index.js';
 export { default as Dialog } from './dialog/base/index.js';
-import './types-c2a0f035.js';
+import './panel/types.js';
 import 'react';
 import './@types/PermissionAttr.js';
 import './internals/colorStyles.js';
@@ -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';