@fattureincloud/fic-design-system 0.3.17 → 0.3.21

package/dist/components/groupedList/groupedList.stories.js

@@ -1,15 +1,8 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
+import { faBuilding } from '@fortawesome/pro-solid-svg-icons';
 import React from 'react';
-import { GlobalStyles } from '../../utils/globalStyles';
 import { GroupedList } from './index';
-import { faBuilding } from '@fortawesome/pro-solid-svg-icons';
-import { ThemeProvider } from '../themeProvider';
-import { defaultTheme } from '../../styles/theme';
-var stories = storiesOf('GroupedList', module);
-stories.addDecorator(withKnobs);
 var buildingIcon = {
-    icon: faBuilding
+    icon: faBuilding,
 };
 var defaultData = [
     {
@@ -21,7 +14,7 @@ var defaultData = [
                 onClick: function () {
                     console.log('0 - 1');
                 },
-                action: React.createElement("div", null, "Ciao")
+                action: React.createElement("div", null, "Ciao"),
             },
             {
                 title: 'elemento 2',
@@ -30,9 +23,9 @@ var defaultData = [
                 onClick: function () {
                     console.log('0 - 2');
                 },
-                action: React.createElement("div", null, "Ciao")
-            }
-        ]
+                action: React.createElement("div", null, "Ciao"),
+            },
+        ],
     },
     {
         title: 'Gruppo 1',
@@ -44,7 +37,7 @@ var defaultData = [
                     console.log('1 - 1');
                 },
                 action: React.createElement("div", null, "Ciao"),
-                showActionOnHover: true
+                showActionOnHover: true,
             },
             {
                 title: "L'elemento sotto è mancante",
@@ -54,7 +47,7 @@ var defaultData = [
                     console.log('1 - 2');
                 },
                 action: React.createElement("div", null, "Ciao"),
-                showActionOnHover: true
+                showActionOnHover: true,
             },
             {
                 title: '',
@@ -64,7 +57,7 @@ var defaultData = [
                     console.log('1 - 3');
                 },
                 action: React.createElement("div", null, "Ciao"),
-                showActionOnHover: true
+                showActionOnHover: true,
             },
             {
                 title: "L'elemento sopra è mancante",
@@ -74,7 +67,7 @@ var defaultData = [
                     console.log('1 - 4');
                 },
                 action: React.createElement("div", null, "Ciao"),
-                showActionOnHover: true
+                showActionOnHover: true,
             },
             {
                 title: 'elemento 7',
@@ -83,7 +76,7 @@ var defaultData = [
                     console.log('1 - 5');
                 },
                 action: React.createElement("div", null, "Ciao"),
-                showActionOnHover: true
+                showActionOnHover: true,
             },
             {
                 title: 'elemento 8',
@@ -93,7 +86,7 @@ var defaultData = [
                     console.log('1 - 6');
                 },
                 action: React.createElement("div", null, "Ciao"),
-                showActionOnHover: true
+                showActionOnHover: true,
             },
             {
                 title: 'elemento 9',
@@ -103,7 +96,7 @@ var defaultData = [
                     console.log('1 - 7');
                 },
                 action: React.createElement("div", null, "Ciao"),
-                showActionOnHover: true
+                showActionOnHover: true,
             },
             {
                 title: 'elemento 10',
@@ -113,9 +106,9 @@ var defaultData = [
                     console.log('1 - 8');
                 },
                 action: React.createElement("div", null, "Ciao"),
-                showActionOnHover: true
-            }
-        ]
+                showActionOnHover: true,
+            },
+        ],
     },
     {
         title: 'Gruppo 2',
@@ -123,50 +116,53 @@ var defaultData = [
             {
                 title: 'elemento 11',
                 icon: buildingIcon,
-                active: true
+                active: true,
             },
             {
                 title: 'elemento 12',
-                icon: buildingIcon
+                icon: buildingIcon,
             },
             {
                 title: 'elemento 13',
                 icon: buildingIcon,
-                active: true
+                active: true,
             },
             {
                 title: 'elemento 14',
-                icon: buildingIcon
+                icon: buildingIcon,
             },
             {
                 title: 'elemento 15',
                 icon: buildingIcon,
-                active: true
+                active: true,
             },
             {
                 title: 'elemento 16',
-                icon: buildingIcon
+                icon: buildingIcon,
             },
             {
                 title: 'elemento 17',
                 icon: buildingIcon,
-                active: true
+                active: true,
             },
             {
                 title: 'elemento 18',
-                icon: buildingIcon
+                icon: buildingIcon,
             },
             {
                 title: 'elemento 19',
-                icon: buildingIcon
-            }
-        ]
-    }
+                icon: buildingIcon,
+            },
+        ],
+    },
 ];
-stories.add('simple', function () {
+export var Simple = function () {
     var wrapperStyle = { height: '350px', border: '1px solid red', overflow: 'auto' };
-    return (React.createElement(ThemeProvider, { theme: defaultTheme },
-        React.createElement(GlobalStyles, null),
-        React.createElement(GroupedList, { wrapperStyle: wrapperStyle, groups: defaultData, navigable: true, placeholder: 'Placeholder' })));
-});
+    return React.createElement(GroupedList, { wrapperStyle: wrapperStyle, groups: defaultData, navigable: true, placeholder: 'Placeholder' });
+};
+var GroupedListStories = {
+    title: 'Old Components/GroupedList',
+    component: GroupedList,
+};
+export default GroupedListStories;
 //# sourceMappingURL=groupedList.stories.js.map

package/dist/components/groupedList/groupedList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"groupedList.stories.js","sourceRoot":"","sources":["../../../src/components/groupedList/groupedList.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"groupedList.stories.js","sourceRoot":"","sources":["../../../src/components/groupedList/groupedList.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/groupedList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/groupedList/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/groupedList/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/icon/Icon.d.ts

@@ -1,7 +1,10 @@
-import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
-import { IconColorPalette, iconColors } from './iconPalette';
+/// <reference types="react" />
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { iconColors } from './iconPalette';
 export interface IconProps extends Omit<FontAwesomeIconProps, 'color'> {
     color?: iconColors;
+    isDisabled?: boolean;
 }
-declare const _default: import("styled-components").StyledComponent<typeof FontAwesomeIcon, import("styled-components").DefaultTheme, IconColorPalette & IconProps, "primary" | "secondary">;
-export default _default;
+declare const Icon: ({ onClick, isDisabled, ...props }: IconProps) => JSX.Element;
+export declare type StyledIconProps = IconProps;
+export default Icon;

package/dist/components/icon/Icon.js

@@ -13,29 +13,36 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import { getIconColor } from './utils';
-var IconImpl = function (props) { return React.createElement(FontAwesomeIcon, __assign({}, props)); };
-export var Icon = styled(IconImpl)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: ", ";\n  font-size: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n  --fa-primary-opacity: ", ";\n  --fa-secondary-opacity: ", ";\n"], ["\n  cursor: ", ";\n  font-size: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n  --fa-primary-opacity: ", ";\n  --fa-secondary-opacity: ", ";\n"])), function (_a) {
+import { getIconStyles } from './utils';
+var Icon = function (_a) {
+    var onClick = _a.onClick, isDisabled = _a.isDisabled, props = __rest(_a, ["onClick", "isDisabled"]);
+    var handleClick = useMemo(function () { return (isDisabled || !onClick ? undefined : function (e) { return onClick(e); }); }, [isDisabled, onClick]);
+    return React.createElement(StyledIcon, __assign({}, props, { onClick: handleClick }));
+};
+var StyledIcon = styled(FontAwesomeIcon).attrs(getIconStyles)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n"], ["\n  cursor: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n"])), function (_a) {
     var onClick = _a.onClick;
     return (onClick ? 'pointer' : 'inherit');
 }, function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var color = _a.color;
-    return getIconColor(color);
-}, function (_a) {
-    var secondaryColor = _a.secondaryColor;
-    return getIconColor(secondaryColor);
-}, function (_a) {
-    var primaryOpacity = _a.primaryOpacity;
-    return primaryOpacity;
+    var primary = _a.primary;
+    return primary;
 }, function (_a) {
-    var secondaryOpacity = _a.secondaryOpacity;
-    return secondaryOpacity;
+    var secondary = _a.secondary;
+    return secondary;
 });
+export default Icon;
 var templateObject_1;
 //# sourceMappingURL=Icon.js.map

package/dist/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,EAAE,eAAe,EAAwB,MAAM,gCAAgC,CAAC;AACvF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,IAAM,QAAQ,GAAG,UAAC,KAAgB,IAAK,OAAA,oBAAC,eAAe,eAAK,KAAK,EAAI,EAA9B,CAA8B,CAAC;AAEtE,MAAM,CAAC,IAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,2NAAA,cACxB,EAAkD,kBAC/C,EAAkB,cACtB,EAAkC,6BACnB,EAAoD,6BACpD,EAAsC,+BACpC,EAA0C,KACrE,KANW,UAAC,EAAW;QAAT,oBAAO;IAAO,OAAA,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AAAjC,CAAiC,EAC/C,UAAC,EAAQ;QAAN,cAAI;IAAO,OAAA,IAAI;AAAJ,CAAI,EACtB,UAAC,EAAS;QAAP,gBAAK;IAAO,OAAA,YAAY,CAAC,KAAK,CAAC;AAAnB,CAAmB,EACnB,UAAC,EAAkB;QAAhB,kCAAc;IAAO,OAAA,YAAY,CAAC,cAAc,CAAC;AAA5B,CAA4B,EACpD,UAAC,EAAkB;QAAhB,kCAAc;IAAO,OAAA,cAAc;AAAd,CAAc,EACpC,UAAC,EAAoB;QAAlB,sCAAgB;IAAO,OAAA,gBAAgB;AAAhB,CAAgB,CACrE,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,eAAe,EAAwB,MAAM,gCAAgC,CAAA;AACtF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAGtC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAOvC,IAAM,IAAI,GAAG,UAAC,EAA4C;IAA1C,IAAA,oBAAO,EAAE,0BAAU,EAAE,6CAAQ;IAC3C,IAAM,WAAW,GAAG,OAAO,CACzB,cAAM,OAAA,CAAC,UAAU,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAA,CAAC,IAAI,OAAA,OAAO,CAAC,CAAC,CAAC,EAAV,CAAU,CAAC,EAAtD,CAAsD,EAC5D,CAAC,UAAU,EAAE,OAAO,CAAC,CACtB,CAAA;IAED,OAAO,oBAAC,UAAU,eAAK,KAAK,IAAE,OAAO,EAAE,WAAW,IAAI,CAAA;AACxD,CAAC,CAAA;AAGD,IAAM,UAAU,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC,KAAK,CAAoC,aAAa,CAAC,uIAAiB,cACvG,EAAkD,cACnD,EAAwB,6BACT,EAA4B,KACrD,KAHW,UAAC,EAAW;QAAT,oBAAO;IAAO,OAAA,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AAAjC,CAAiC,EACnD,UAAC,EAAW;QAAT,oBAAO;IAAO,OAAA,OAAO;AAAP,CAAO,EACT,UAAC,EAAa;QAAX,wBAAS;IAAO,OAAA,SAAS;AAAT,CAAS,CACrD,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/icon/components/iconBackground/IconBackground.js

@@ -0,0 +1,48 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { iconSizeMap } from './utils';
+var IconBackground = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return React.createElement(Wrapper, __assign({}, rest), children);
+};
+var circleBackgroundScaleFactor = 1.5;
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n\n  min-width: calc(", " * ", ");\n  min-height: calc(", " * ", ");\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  background-color: ",
+    ";\n  border-radius: 50%;\n\n  min-width: calc(", " * ", ");\n  min-height: calc(", " * ", ");\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
+    var theme = _a.theme, color = _a.color, backgroundColor = _a.backgroundColor;
+    return backgroundColor || theme.components.iconBackground[color] || 'transparent';
+}, circleBackgroundScaleFactor, function (_a) {
+    var size = _a.size;
+    return iconSizeMap[size];
+}, circleBackgroundScaleFactor, function (_a) {
+    var size = _a.size;
+    return iconSizeMap[size];
+});
+export default IconBackground;
+var templateObject_1;
+//# sourceMappingURL=IconBackground.js.map

package/dist/components/icon/components/iconBackground/IconBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconBackground.js","sourceRoot":"","sources":["../../../../../src/components/icon/components/iconBackground/IconBackground.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAMrC,IAAM,cAAc,GAAG,UAAC,EAA4B;IAA1B,IAAA,sBAAQ,EAAE,+BAAO;IACzC,OAAO,oBAAC,OAAO,eAAK,IAAI,GAAG,QAAQ,CAAW,CAAA;AAChD,CAAC,CAAA;AASD,IAAM,2BAA2B,GAAG,GAAG,CAAA;AAEvC,IAAM,OAAO,GAAG,MAAM,CAAC,GAAG,6QAAc,wBAClB;IACwD,gDAG1D,EAA2B,KAAM,EAA+B,yBAC/D,EAA2B,KAAM,EAA+B,qFAKpF,KAVqB,UAAC,EAAiC;QAA/B,gBAAK,EAAE,gBAAK,EAAE,oCAAe;IAClD,OAAA,eAAe,IAAI,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,aAAa;AAA1E,CAA0E,EAG1D,2BAA2B,EAAM,UAAC,EAAQ;QAAN,cAAI;IAAO,OAAA,WAAW,CAAC,IAAI,CAAC;AAAjB,CAAiB,EAC/D,2BAA2B,EAAM,UAAC,EAAQ;QAAN,cAAI;IAAO,OAAA,WAAW,CAAC,IAAI,CAAC;AAAjB,CAAiB,CAKpF,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/components/icon/components/iconBackground/iconBackgroundPalette.js

@@ -0,0 +1,18 @@
+import defaultPalette from '../../../../styles/defaultPalette';
+var iconBackgroundPalette = {
+    blue: defaultPalette.blue[50],
+    indigo: defaultPalette.indigo[50],
+    yellow: defaultPalette.yellow[50],
+    orange: defaultPalette.orange[50],
+    red: defaultPalette.red[50],
+    green: defaultPalette.green[50],
+    fuchsia: defaultPalette.fuchsia[50],
+    pink: defaultPalette.pink[50],
+    cyan: defaultPalette.cyan[50],
+    primary: defaultPalette.primary[50],
+    grey: defaultPalette.grey[100],
+    white: defaultPalette.white[16],
+    black: defaultPalette.black[16],
+};
+export default iconBackgroundPalette;
+//# sourceMappingURL=iconBackgroundPalette.js.map

package/dist/components/icon/components/iconBackground/iconBackgroundPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconBackgroundPalette.js","sourceRoot":"","sources":["../../../../../src/components/icon/components/iconBackground/iconBackgroundPalette.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,mCAAmC,CAAA;AAQ9D,IAAM,qBAAqB,GAA0B;IACnD,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;IACjC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;IACjC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;IACjC,GAAG,EAAE,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;IACnC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAC7B,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAC7B,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;IACnC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;IAC9B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;CAChC,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/components/icon/components/iconBackground/index.js

@@ -0,0 +1,4 @@
+import IconBackground from './IconBackground';
+import iconBackgroundPalette from './iconBackgroundPalette';
+export { IconBackground, iconBackgroundPalette };
+//# sourceMappingURL=index.js.map

package/dist/components/icon/components/iconBackground/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/icon/components/iconBackground/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAgD,MAAM,yBAAyB,CAAA;AAEtF,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAyB,CAAA"}

package/dist/components/icon/components/iconBackground/utils.js

@@ -0,0 +1,16 @@
+export var iconSizeMap = {
+    xs: '.75em',
+    sm: '.875em',
+    lg: '1.33em',
+    '1x': '1em',
+    '2x': '2em',
+    '3x': '3em',
+    '4x': '4em',
+    '5x': '5em',
+    '6x': '6em',
+    '7x': '7em',
+    '8x': '8em',
+    '9x': '9em',
+    '10x': '10em',
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/icon/components/iconBackground/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/components/icon/components/iconBackground/utils.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,IAAM,WAAW,GAAoB;IAC1C,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,MAAM;CACd,CAAA"}

package/dist/components/icon/icon.stories.js

@@ -1,26 +1,82 @@
-import { storiesOf } from '@storybook/react';
-import { boolean, number, select, withKnobs } from '@storybook/addon-knobs';
-import { defaultTheme } from '../../styles/theme';
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { faBroom, faMap, faPencilPaintbrush, faQuestion, faWallet, faWind } from '@fortawesome/pro-duotone-svg-icons';
+import { faCoffee as faDuotoneCoffee } from '@fortawesome/pro-duotone-svg-icons';
+import { faCoffee as faLightCoffee } from '@fortawesome/pro-light-svg-icons';
+import { faCoffee as faRegularCoffee } from '@fortawesome/pro-regular-svg-icons';
+import { faCoffee as faSolidCoffee } from '@fortawesome/pro-solid-svg-icons';
+import { boolean, select } from '@storybook/addon-knobs';
 import React from 'react';
-import { Icon } from './Icon';
-import { GlobalStyles } from '../../utils/globalStyles';
-import { faCoffee } from '@fortawesome/pro-duotone-svg-icons';
-import { ThemeProvider } from '../themeProvider';
-var stories = storiesOf('Icon', module);
-stories.addDecorator(withKnobs);
+import styled from 'styled-components';
+import { allColorsList } from '../../styles/types';
+import { IconBackground } from './components/iconBackground';
+import Icon from './Icon';
 var sizes = ['xs', 'lg', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'];
-stories.add('normal', function () {
-    var color = select('color', Object.keys(defaultTheme.palette), 'primary');
+var iconOptions = ['faDuotoneCoffee', 'faRegularCoffee', 'faSolidCoffee', 'faLightCoffee'];
+var iconTypes = {
+    faDuotoneCoffee: faDuotoneCoffee,
+    faRegularCoffee: faRegularCoffee,
+    faSolidCoffee: faSolidCoffee,
+    faLightCoffee: faLightCoffee,
+};
+export var Normal = function () {
+    var color = select('color', allColorsList, 'blue');
     var size = select('size', sizes, '1x');
     var fixedWidth = boolean('fixedWidth', false);
     var spin = boolean('spin', false);
     var pulse = boolean('pulse', false);
     var rotation = select('rotation', [0, 90, 180, 270], 0);
-    var primaryOpacity = number('primaryOpacity (duotone only)', 1);
-    var secondaryColor = select('secondaryColor (duotone only)', Object.keys(defaultTheme.palette), 'red');
-    var secondaryOpacity = number('secondaryOpacity (duotone only)', 1);
-    return (React.createElement(ThemeProvider, { theme: defaultTheme },
-        React.createElement(GlobalStyles, null),
-        React.createElement(Icon, { icon: faCoffee, spin: spin, pulse: pulse, fixedWidth: fixedWidth, rotation: rotation || undefined, size: size, color: color, primaryOpacity: primaryOpacity, secondaryColor: secondaryColor, secondaryOpacity: secondaryOpacity })));
+    var iconType = select('type', iconOptions, 'faDuotoneCoffee');
+    return (React.createElement(Icon, { icon: iconTypes[iconType], spin: spin, pulse: pulse, fixedWidth: fixedWidth, rotation: rotation || undefined, size: size, color: color }));
+};
+export var WithBackground = function () {
+    var color = select('color', allColorsList, 'blue');
+    var size = select('size', sizes, '1x');
+    var fixedWidth = boolean('fixedWidth', false);
+    var spin = boolean('spin', false);
+    var pulse = boolean('pulse', false);
+    var rotation = select('rotation', [0, 90, 180, 270], 0);
+    var iconType = select('type', iconOptions, 'faDuotoneCoffee');
+    return (React.createElement(IconBackground, { color: color, size: size },
+        React.createElement(Icon, { icon: iconTypes[iconType], spin: spin, pulse: pulse, fixedWidth: fixedWidth, rotation: rotation || undefined, size: size, color: color })));
+};
+export var DuotoneColored = function () {
+    return (React.createElement(Wrapper, null,
+        React.createElement(Icon, { size: '4x', icon: faMap, color: 'grey' }),
+        React.createElement(Icon, { size: '4x', icon: faWallet, color: 'blue' }),
+        React.createElement(Icon, { size: '4x', icon: faQuestion, color: 'green' }),
+        React.createElement(Icon, { size: '4x', icon: faWind, color: 'red' }),
+        React.createElement(Icon, { size: '4x', icon: faBroom, color: 'yellow' })));
+};
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > * + * {\n    margin-left: 10px;\n  }\n"], ["\n  > * + * {\n    margin-left: 10px;\n  }\n"])));
+var opacityOptions = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
+export var _CustomIcon = function () {
+    var primaryColor = select('primaryColor', allColorsList, 'red');
+    var secondaryColor = select('secondaryColor', allColorsList, 'blue');
+    var primaryOpacity = select('primaryOpacity', opacityOptions, 0.4);
+    var secondaryOpacity = select('secondaryOpacity', opacityOptions, 0.3);
+    return (React.createElement(Wrapper, null,
+        React.createElement(CustomIcon, { size: '8x', icon: faPencilPaintbrush, primaryColor: primaryColor, secondaryColor: secondaryColor, primaryOpacity: primaryOpacity, secondaryOpacity: secondaryOpacity })));
+};
+var CustomIcon = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --fa-primary-color: ", ";\n  --fa-secondary-color: ", ";\n  --fa-primary-opacity: ", ";\n  --fa-secondary-opacity: ", ";\n"], ["\n  --fa-primary-color: ", ";\n  --fa-secondary-color: ", ";\n  --fa-primary-opacity: ", ";\n  --fa-secondary-opacity: ", ";\n"])), function (_a) {
+    var primaryColor = _a.primaryColor;
+    return primaryColor;
+}, function (_a) {
+    var secondaryColor = _a.secondaryColor;
+    return secondaryColor;
+}, function (_a) {
+    var primaryOpacity = _a.primaryOpacity;
+    return primaryOpacity;
+}, function (_a) {
+    var secondaryOpacity = _a.secondaryOpacity;
+    return secondaryOpacity;
 });
+var IconStories = {
+    title: 'Old Components/Icon',
+    component: Icon,
+};
+export default IconStories;
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=icon.stories.js.map

package/dist/components/icon/icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,IAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE1C,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;AAEhC,IAAM,KAAK,GAAe,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAE1G,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE;IACpB,IAAM,KAAK,GAAG,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,SAAS,CAAsC,CAAC;IACjH,IAAM,IAAI,GAAG,MAAM,CAAW,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IACnD,IAAM,UAAU,GAAG,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAChD,IAAM,IAAI,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACtC,IAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,CAAe,CAAC;IACxE,IAAM,cAAc,GAAG,MAAM,CAAC,+BAA+B,EAAE,CAAC,CAAC,CAAC;IAClE,IAAM,cAAc,GAAG,MAAM,CAC3B,+BAA+B,EAC/B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EACjC,KAAK,CAC+B,CAAC;IACvC,IAAM,gBAAgB,GAAG,MAAM,CAAC,iCAAiC,EAAE,CAAC,CAAC,CAAC;IAEtE,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,YAAY;QAChC,oBAAC,YAAY,OAAG;QAChB,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,GAClC,CACY,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/icon.stories.tsx"],"names":[],"mappings":";;;;AACA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAA;AACrH,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAA;AAChF,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAC5E,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAA;AAChF,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,IAAmB,MAAM,QAAQ,CAAA;AAExC,IAAM,KAAK,GAAe,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;AAEzG,IAAM,WAAW,GAAG,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,CAAU,CAAA;AACrG,IAAM,SAAS,GAAG;IAChB,eAAe,iBAAA;IACf,eAAe,iBAAA;IACf,aAAa,eAAA;IACb,aAAa,eAAA;CACd,CAAA;AAED,MAAM,CAAC,IAAM,MAAM,GAAG;IACpB,IAAM,KAAK,GAAG,MAAM,CAAC,OAAO,EAAE,aAAa,EAAE,MAAM,CAAC,CAAA;IACpD,IAAM,IAAI,GAAG,MAAM,CAAW,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;IAClD,IAAM,UAAU,GAAG,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;IAC/C,IAAM,IAAI,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IACnC,IAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IACrC,IAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,CAAe,CAAA;IACvE,IAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAA;IAE/D,OAAO,CACL,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,IAAM,KAAK,GAAG,MAAM,CAAC,OAAO,EAAE,aAAa,EAAE,MAAM,CAAC,CAAA;IACpD,IAAM,IAAI,GAAG,MAAM,CAAW,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;IAClD,IAAM,UAAU,GAAG,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;IAC/C,IAAM,IAAI,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IACnC,IAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IACrC,IAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,CAAe,CAAA;IACvE,IAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAA;IAE/D,OAAO,CACL,oBAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI;QACtC,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACZ,CACa,CAClB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAI;QAChD,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAI;QACnD,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,GAAI;QACtD,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI;QAChD,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,GAAI,CAC5C,CACX,CAAA;AACH,CAAC,CAAA;AAED,IAAM,OAAO,GAAG,MAAM,CAAC,GAAG,iHAAA,8CAIzB,IAAA,CAAA;AAED,IAAM,cAAc,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAA;AAEvE,MAAM,CAAC,IAAM,WAAW,GAAG;IACzB,IAAM,YAAY,GAAG,MAAM,CAAC,cAAc,EAAE,aAAa,EAAE,KAAK,CAAC,CAAA;IACjE,IAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,EAAE,aAAa,EAAE,MAAM,CAAC,CAAA;IACtE,IAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,EAAE,cAAc,EAAE,GAAG,CAAC,CAAA;IACpE,IAAM,gBAAgB,GAAG,MAAM,CAAC,kBAAkB,EAAE,cAAc,EAAE,GAAG,CAAC,CAAA;IAExE,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,kBAAkB,EACxB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,GAClC,CACM,CACX,CAAA;AACH,CAAC,CAAA;AASD,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,mMAAiB,0BACxB,EAAkC,6BAChC,EAAsC,6BACtC,EAAsC,+BACpC,EAA0C,KACrE,KAJuB,UAAC,EAAgB;QAAd,8BAAY;IAAO,OAAA,YAAY;AAAZ,CAAY,EAChC,UAAC,EAAkB;QAAhB,kCAAc;IAAO,OAAA,cAAc;AAAd,CAAc,EACtC,UAAC,EAAkB;QAAhB,kCAAc;IAAO,OAAA,cAAc;AAAd,CAAc,EACpC,UAAC,EAAoB;QAAlB,sCAAgB;IAAO,OAAA,gBAAgB;AAAhB,CAAgB,CACrE,CAAA;AAED,IAAM,WAAW,GAAoB;IACnC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/components/icon/iconPalette.js

@@ -0,0 +1,28 @@
+import defaultPalette from '../../styles/defaultPalette';
+var getColoredIcon = function (color) { return ({
+    primary: defaultPalette[color][500],
+    secondary: defaultPalette[color][200],
+}); };
+var iconPalette = {
+    blue: getColoredIcon('blue'),
+    red: getColoredIcon('red'),
+    green: getColoredIcon('green'),
+    yellow: getColoredIcon('yellow'),
+    orange: getColoredIcon('orange'),
+    primary: getColoredIcon('primary'),
+    cyan: getColoredIcon('cyan'),
+    fuchsia: getColoredIcon('fuchsia'),
+    indigo: getColoredIcon('indigo'),
+    pink: getColoredIcon('pink'),
+    grey: getColoredIcon('grey'),
+    white: {
+        primary: defaultPalette.white[100],
+        secondary: defaultPalette.white[48],
+    },
+    black: {
+        primary: defaultPalette.black[100],
+        secondary: defaultPalette.black[48],
+    },
+};
+export default iconPalette;
+//# sourceMappingURL=iconPalette.js.map

package/dist/components/icon/iconPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconPalette.js","sourceRoot":"","sources":["../../../src/components/icon/iconPalette.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,MAAM,6BAA6B,CAAA;AAcxD,IAAM,cAAc,GAAG,UAAC,KAAa,IAAuB,OAAA,CAAC;IAC3D,OAAO,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC;IACnC,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC;CACtC,CAAC,EAH0D,CAG1D,CAAA;AAEF,IAAM,WAAW,GAAgB;IAC/B,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;IAC5B,GAAG,EAAE,cAAc,CAAC,KAAK,CAAC;IAC1B,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC;IAC9B,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC;IAChC,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC;IAChC,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC;IAClC,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;IAC5B,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC;IAClC,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC;IAChC,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;IAC5B,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;IAC5B,KAAK,EAAE;QACL,OAAO,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;QAClC,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;KACpC;IACD,KAAK,EAAE;QACL,OAAO,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;QAClC,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;KACpC;CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/components/icon/index.js

@@ -0,0 +1,5 @@
+import { IconBackground, iconBackgroundPalette } from './components/iconBackground';
+import Icon from './Icon';
+import iconPalette from './iconPalette';
+export { Icon, iconPalette, IconBackground, iconBackgroundPalette };
+//# sourceMappingURL=index.js.map

package/dist/components/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAyB,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAC1G,OAAO,IAAmB,MAAM,QAAQ,CAAA;AACxC,OAAO,WAA4B,MAAM,eAAe,CAAA;AAExD,OAAO,EAAE,IAAI,EAA0B,WAAW,EAAE,cAAc,EAAE,qBAAqB,EAAyB,CAAA"}

package/dist/components/icon/utils.d.ts

@@ -1,7 +1,7 @@
 import { DefaultTheme } from 'styled-components';
-import { IconProps } from './Icon';
+import { StyledIconProps } from './Icon';
 import { IconColorPalette } from './iconPalette';
-interface GetIconStylesParams extends Pick<IconProps, 'color'> {
+interface GetIconStylesParams extends Pick<StyledIconProps, 'color'> {
     theme: DefaultTheme;
 }
 export declare const getIconStyles: ({ theme, color }: GetIconStylesParams) => IconColorPalette;

package/dist/components/icon/utils.js

@@ -1,14 +1,10 @@
-import { defaultTheme } from '../../styles/theme';
-export var getIconColor = function (color) {
-    if (color) {
-        if (Object.keys(defaultTheme.palette).includes(color)) {
-            var intensity = ['white', 'black'].includes(color) ? 100 : 500;
-            return defaultTheme.palette[color][intensity];
-        }
-        else {
-            return color;
-        }
-    }
-    return undefined;
+export var getIconStyles = function (_a) {
+    var theme = _a.theme, color = _a.color;
+    return color
+        ? theme.components.icon[color]
+        : {
+            primary: 'inherit',
+            secondary: 'inherit',
+        };
 };
 //# sourceMappingURL=utils.js.map

package/dist/components/icon/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/icon/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,KAAkD;IAC7E,IAAI,KAAK,EAAE;QACT,IAAI,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YACrD,IAAM,SAAS,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YACjE,OAAO,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC;SAC/C;aAAM;YACL,OAAO,KAAK,CAAC;SACd;KACF;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/icon/utils.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,EAAqC;QAAnC,gBAAK,EAAE,gBAAK;IAC1C,OAAA,KAAK;QACH,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;QAC9B,CAAC,CAAC;YACE,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,SAAS;SACrB;AALL,CAKK,CAAA"}

package/dist/components/inlineMessages/components/styledInlineMessageWrapper.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { InlineMessagesProps, StyledContentProps } from '../types';
 export declare const StyledIconTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInlineMessageWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, InlineMessagesProps, never>;
 export declare const StyledIconContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledContentProps, never>;
 export declare const StyledCloseIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCloseIcon: import("styled-components").StyledComponent<typeof import("@fortawesome/react-fontawesome").FontAwesomeIcon, import("styled-components").DefaultTheme, import("../../icon/iconPalette").IconColorPalette & import("../../icon").IconProps, "primary" | "secondary">;
+export declare const StyledCloseIcon: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;