@fattureincloud/fic-design-system 0.3.17 → 0.3.21

package/dist/components/tabs/{components/item → common}/Item.js

@@ -3,14 +3,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import React from 'react';
-import Tab from './components/Tab';
-import ActiveTag from './components/ActiveTag';
 import styled from 'styled-components';
+import ActiveTag from './item/ActiveTag';
+import Tab from './item/Tab';
 var Item = function (_a) {
-    var handleClick = _a.handleClick, active = _a.active, text = _a.text, tabRef = _a.tabRef;
-    return (React.createElement(ItemWrapper, { ref: tabRef, onClick: handleClick },
-        React.createElement(Tab, { active: !!active }, text),
-        React.createElement(ActiveTag, { active: !!active })));
+    var active = _a.active, handleClick = _a.handleClick, tabRef = _a.tabRef, text = _a.text;
+    return (React.createElement(ItemWrapper, { ref: tabRef === null || tabRef === void 0 ? void 0 : tabRef(), onClick: handleClick },
+        React.createElement(Tab, { active: active }, text),
+        React.createElement(ActiveTag, { active: active })));
 };
 var ItemWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  flex-shrink: 0;\n  position: relative;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n"], ["\n  cursor: pointer;\n  flex-shrink: 0;\n  position: relative;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n"])));
 export default Item;

package/dist/components/tabs/common/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/tabs/common/Item.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,GAAG,MAAM,YAAY,CAAA;AAO5B,IAAM,IAAI,GAAG,UAAC,EAA4C;QAA1C,kBAAM,EAAE,4BAAW,EAAE,kBAAM,EAAE,cAAI;IAA2B,OAAA,CAC1E,oBAAC,WAAW,IAAC,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,IAAM,OAAO,EAAE,WAAW;QAChD,oBAAC,GAAG,IAAC,MAAM,EAAE,MAAM,IAAG,IAAI,CAAO;QACjC,oBAAC,SAAS,IAAC,MAAM,EAAE,MAAM,GAAI,CACjB,CACf;AAL2E,CAK3E,CAAA;AAED,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,iMAAA,8HAO7B,IAAA,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/tabs/{components/item/components → common/item}/ActiveTag.js

@@ -4,13 +4,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from 'styled-components';
 var ActiveTag = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  width: 100%;\n  height: 4px;\n  margin-top: 6px;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  background: ", ";\n  width: 100%;\n  height: 4px;\n  margin-top: 6px;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme, active = _a.active;
-    return (active ? theme.palette.primary[500] : theme.palette.base.transparent);
+    var active = _a.active, theme = _a.theme;
+    return (active ? theme.palette.primary[500] : 'transparent');
 }, function (_a) {
-    var theme = _a.theme, active = _a.active;
+    var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[500]);
 }, function (_a) {
-    var theme = _a.theme, active = _a.active;
+    var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
 });
 export default ActiveTag;

package/dist/components/tabs/common/item/ActiveTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveTag.js","sourceRoot":"","sources":["../../../../../src/components/tabs/common/item/ActiveTag.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAQtC,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,wMAAe,kBAC5B,EAA4E,oEAKjF,EAAsF,+BAGpF,EAAsF,UAElG,KAVe,UAAC,EAAiB;QAAf,kBAAM,EAAE,gBAAK;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;AAArD,CAAqD,EAKjF,UAAC,EAAiB;QAAf,kBAAM,EAAE,gBAAK;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAA/D,CAA+D,EAGpF,UAAC,EAAiB;QAAf,kBAAM,EAAE,gBAAK;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAA/D,CAA+D,CAElG,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/components/tabs/{components/item/components → common/item}/Tab.js

@@ -4,10 +4,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from 'styled-components';
 var Tab = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: 'Inter UI', sans-serif;\n  font-style: normal;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n\n  align-items: center;\n  display: flex;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  font-family: 'Inter UI', sans-serif;\n  font-style: normal;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n\n  align-items: center;\n  display: flex;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme, active = _a.active;
+    var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[500]);
 }, function (_a) {
-    var theme = _a.theme, active = _a.active;
+    var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
 });
 export default Tab;

package/dist/components/tabs/common/item/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../src/components/tabs/common/item/Tab.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAQtC,IAAM,GAAG,GAAG,MAAM,CAAC,IAAI,ySAAU,yLAUtB,EAAsF,+BAGpF,EAAsF,UAElG,KALU,UAAC,EAAiB;QAAf,kBAAM,EAAE,gBAAK;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAA/D,CAA+D,EAGpF,UAAC,EAAiB;QAAf,kBAAM,EAAE,gBAAK;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAA/D,CAA+D,CAElG,CAAA;AAED,eAAe,GAAG,CAAA"}

package/dist/components/tabs/common/styled.js

@@ -0,0 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+export var TabsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 31px;\n  alignment-baseline: baseline;\n  display: flex;\n  white-space: nowrap;\n  margin-top: 3px;\n  width: 100%;\n\n  ", ";\n\n  & > *:first-child {\n    padding-left: ", "px;\n  }\n\n  & > *:last-child {\n    padding-right: ", "px;\n  }\n\n  & > * + * {\n    margin-left: ", "px;\n  }\n"], ["\n  box-sizing: border-box;\n  height: 31px;\n  alignment-baseline: baseline;\n  display: flex;\n  white-space: nowrap;\n  margin-top: 3px;\n  width: 100%;\n\n  ",
+    ";\n\n  & > *:first-child {\n    padding-left: ", "px;\n  }\n\n  & > *:last-child {\n    padding-right: ", "px;\n  }\n\n  & > * + * {\n    margin-left: ", "px;\n  }\n"])), function (_a) {
+    var hidden = _a.hidden;
+    return hidden && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      visibility: hidden;\n      position: absolute;\n    "], ["\n      visibility: hidden;\n      position: absolute;\n    "])));
+}, function (_a) {
+    var lateralPadding = _a.lateralPadding;
+    return lateralPadding;
+}, function (_a) {
+    var lateralPadding = _a.lateralPadding;
+    return lateralPadding;
+}, function (_a) {
+    var distance = _a.distance;
+    return distance;
+});
+export var ScrollableTabsWrapper = styled(TabsWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n"], ["\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=styled.js.map

package/dist/components/tabs/common/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../../src/components/tabs/common/styled.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAQ/C,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,+YAAsB,mKASvD;IAKC,gDAGe,EAAsC,uDAIrC,EAAsC,8CAIxC,EAA0B,YAE5C,KAlBG,UAAC,EAAU;QAAR,kBAAM;IACT,OAAA,MAAM,IACN,GAAG,iIAAA,8DAGF,IAAA;AAJD,CAIC,EAGe,UAAC,EAAkB;QAAhB,kCAAc;IAAO,OAAA,cAAc;AAAd,CAAc,EAIrC,UAAC,EAAkB;QAAhB,kCAAc;IAAO,OAAA,cAAc;AAAd,CAAc,EAIxC,UAAC,EAAY;QAAV,sBAAQ;IAAO,OAAA,QAAQ;AAAR,CAAQ,CAE5C,CAAA;AAED,MAAM,CAAC,IAAM,qBAAqB,GAAG,MAAM,CAAC,WAAW,CAAC,uIAAA,oEAIvD,IAAA,CAAA"}

package/dist/components/tabs/common/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/tabs/common/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/tabs/common/types.ts"],"names":[],"mappings":""}

package/dist/components/tabs/dropdownTabs/TabsDropdown.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { Dropdown as DSDropdown } from '../../dropdown/dropdown';
+import TabsDropdownTrigger from './TabsDropdownTrigger';
+var TabsDropdown = function (_a) {
+    var active = _a.active, tabs = _a.tabs;
+    var renderTrigger = useCallback(function () { return React.createElement(TabsDropdownTrigger, { active: active }); }, [active]);
+    var renderContent = useCallback(function (closeDropdown) { return (React.createElement(React.Fragment, null, tabs.map(function (_a, i) {
+        var active = _a.active, handleClick = _a.handleClick, text = _a.text;
+        return (React.createElement(DSDropdown.Item, { key: i, text: text, active: active, onClick: function () {
+                handleClick && handleClick();
+                closeDropdown();
+            } }));
+    }))); }, [tabs]);
+    return React.createElement(Dropdown, { placement: 'bottom-end', fullWidth: true, renderTrigger: renderTrigger, renderContent: renderContent });
+};
+var Dropdown = styled(DSDropdown)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+export default TabsDropdown;
+var templateObject_1;
+//# sourceMappingURL=TabsDropdown.js.map

package/dist/components/tabs/dropdownTabs/TabsDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsDropdown.js","sourceRoot":"","sources":["../../../../src/components/tabs/dropdownTabs/TabsDropdown.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAGhE,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AAOvD,IAAM,YAAY,GAAG,UAAC,EAAuB;QAArB,kBAAM,EAAE,cAAI;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,cAAM,OAAA,oBAAC,mBAAmB,IAAC,MAAM,EAAE,MAAM,GAAI,EAAvC,CAAuC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAE1F,IAAM,aAAa,GAAG,WAAW,CAC/B,UAAC,aAAgC,IAAK,OAAA,CACpC,0CACG,IAAI,CAAC,GAAG,CAAC,UAAC,EAA6B,EAAE,CAAC;YAA9B,kBAAM,EAAE,4BAAW,EAAE,cAAI;QAAU,OAAA,CAC9C,oBAAC,UAAU,CAAC,IAAI,IACd,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;gBACP,WAAW,IAAI,WAAW,EAAE,CAAA;gBAC5B,aAAa,EAAE,CAAA;YACjB,CAAC,GACD,CACH;IAV+C,CAU/C,CAAC,CACD,CACJ,EAdqC,CAcrC,EACD,CAAC,IAAI,CAAC,CACP,CAAA;IAED,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAE,YAAY,EAAE,SAAS,QAAC,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,GAAI,CAAA;AACpH,CAAC,CAAA;AAED,IAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,0FAAA,uBAElC,IAAA,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/tabs/{components/TabsDropdown/components → dropdownTabs}/TabsDropdownTrigger.js

@@ -2,14 +2,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import React from 'react';
 import { faEllipsisH } from '@fortawesome/pro-light-svg-icons';
+import React from 'react';
 import styled from 'styled-components';
-import { Icon } from '../../../../icon/Icon';
-import Item from '../../item/Item';
+import { Icon } from '../../icon';
+import Item from '../common/Item';
 var TabsDropdownTrigger = function (_a) {
     var active = _a.active;
-    return (React.createElement(Item, { active: active, text: (React.createElement(DropdownIcon, { icon: faEllipsisH, fixedWidth: true })) }));
+    return (React.createElement(Item, { active: active, text: React.createElement(DropdownIcon, { icon: faEllipsisH, fixedWidth: true }) }));
 };
 var DropdownIcon = styled(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 21px;\n"], ["\n  height: 21px;\n"])));
 export default TabsDropdownTrigger;

package/dist/components/tabs/dropdownTabs/TabsDropdownTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsDropdownTrigger.js","sourceRoot":"","sources":["../../../../src/components/tabs/dropdownTabs/TabsDropdownTrigger.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,IAAI,MAAM,gBAAgB,CAAA;AAOjC,IAAM,mBAAmB,GAAG,UAAC,EAAiB;QAAf,kBAAM;IAA2B,OAAA,CAC9D,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAC,YAAY,IAAC,IAAI,EAAE,WAAW,EAAE,UAAU,SAAG,GAAI,CAC/E;AAF+D,CAE/D,CAAA;AAED,IAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,wFAAA,qBAEhC,IAAA,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/components/tabs/{hooks → dropdownTabs/hooks}/useResizedWidth.js

@@ -1,5 +1,5 @@
-import { useDebounce, useMeasure } from 'react-use';
 import { useState } from 'react';
+import { useDebounce, useMeasure } from 'react-use';
 var useResizedWidth = function () {
     var _a = useMeasure(), elementsWrapperRef = _a[0], wrapperTmpWidth = _a[1].width;
     var _b = useState(0), wrapperWidth = _b[0], setWrapperWidth = _b[1];

package/dist/components/tabs/dropdownTabs/hooks/useResizedWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizedWidth.js","sourceRoot":"","sources":["../../../../../src/components/tabs/dropdownTabs/hooks/useResizedWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAQnD,IAAM,eAAe,GAAG;IAChB,IAAA,iBAA+E,EAA9E,0BAAkB,EAAI,6BAAwD,CAAA;IAC/E,IAAA,gBAA6C,EAA5C,oBAAY,EAAE,uBAA8B,CAAA;IACnD,WAAW,CAAC,cAAM,OAAA,eAAe,CAAC,eAAe,CAAC,EAAhC,CAAgC,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAC3E,OAAO,EAAE,kBAAkB,oBAAA,EAAE,YAAY,cAAA,EAAE,CAAA;AAC7C,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/components/tabs/dropdownTabs/hooks/useTabItemsCount.js

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+var useTabItemsCount = function (_a) {
+    var distance = _a.distance, lateralPadding = _a.lateralPadding, tabsLength = _a.tabsLength, tabsRefs = _a.tabsRefs, wrapperWidth = _a.wrapperWidth;
+    return useMemo(function () {
+        var _a;
+        var visibleCount = 0;
+        var remainingSpace = wrapperWidth - 2 * lateralPadding;
+        while (visibleCount !== tabsLength && remainingSpace > 0) {
+            var nextTabWidth = (_a = tabsRefs[visibleCount].current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+            if (nextTabWidth && remainingSpace - (nextTabWidth + distance) > 0) {
+                visibleCount++;
+                remainingSpace -= nextTabWidth + distance;
+            }
+            else {
+                remainingSpace = -1;
+            }
+        }
+        return { visibleCount: visibleCount };
+    }, [distance, lateralPadding, tabsLength, tabsRefs, wrapperWidth]);
+};
+export default useTabItemsCount;
+//# sourceMappingURL=useTabItemsCount.js.map

package/dist/components/tabs/dropdownTabs/hooks/useTabItemsCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabItemsCount.js","sourceRoot":"","sources":["../../../../../src/components/tabs/dropdownTabs/hooks/useTabItemsCount.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAA;AAc1C,IAAM,gBAAgB,GAAG,UAAC,EAAwE;QAAtE,sBAAQ,EAAE,kCAAc,EAAE,0BAAU,EAAE,sBAAQ,EAAE,8BAAY;IACtF,OAAA,OAAO,CAAC;;QACN,IAAI,YAAY,GAAG,CAAC,CAAA;QAEpB,IAAI,cAAc,GAAG,YAAY,GAAG,CAAC,GAAG,cAAc,CAAA;QACtD,OAAO,YAAY,KAAK,UAAU,IAAI,cAAc,GAAG,CAAC,EAAE;YACxD,IAAM,YAAY,SAAG,QAAQ,CAAC,YAAY,CAAC,CAAC,OAAO,0CAAE,WAAW,CAAA;YAChE,IAAI,YAAY,IAAI,cAAc,GAAG,CAAC,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAClE,YAAY,EAAE,CAAA;gBACd,cAAc,IAAI,YAAY,GAAG,QAAQ,CAAA;aAC1C;iBAAM;gBACL,cAAc,GAAG,CAAC,CAAC,CAAA;aACpB;SACF;QAED,OAAO,EAAE,YAAY,cAAA,EAAE,CAAA;IACzB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;AAflE,CAekE,CAAA;AAEpE,eAAe,gBAAgB,CAAA"}

package/dist/components/tabs/dropdownTabs.js

@@ -0,0 +1,58 @@
+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);
+};
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import Item from './common/Item';
+import { ScrollableTabsWrapper, TabsWrapper } from './common/styled';
+import useResizedWidth from './dropdownTabs/hooks/useResizedWidth';
+import useTabItemsCount from './dropdownTabs/hooks/useTabItemsCount';
+import TabsDropdown from './dropdownTabs/TabsDropdown';
+var DropdownTabs = function (_a) {
+    var className = _a.className, _b = _a.distance, distance = _b === void 0 ? 15 : _b, _c = _a.lateralPadding, lateralPadding = _c === void 0 ? 23 : _c, tabs = _a.tabs;
+    var _d = useResizedWidth(), elementsWrapperRef = _d.elementsWrapperRef, wrapperWidth = _d.wrapperWidth;
+    var _e = useState(0), refresh = _e[1];
+    var tabsLength = tabs.length;
+    var tabsRefs = useMemo(function () { return Array.from(Array(tabsLength), function () { return React.createRef(); }); }, [tabsLength]);
+    var cbRef = useMemo(function () {
+        return tabsRefs.map(function (ref) { return function () {
+            refresh(function (n) { return n + 1; });
+            return ref;
+        }; });
+    }, [tabsRefs]);
+    var visibleCount = useTabItemsCount({
+        distance: distance,
+        tabsLength: tabsLength,
+        wrapperWidth: wrapperWidth,
+        tabsRefs: tabsRefs,
+        lateralPadding: lateralPadding,
+    }).visibleCount;
+    var tabsItems = useMemo(function () { return tabs.map(function (attrs, i) { return React.createElement(Item, __assign({ key: i, tabRef: cbRef[i] }, attrs)); }); }, [tabs, tabsRefs]);
+    var visibleItems = useMemo(function () { return tabs.slice(0, visibleCount).map(function (attrs, i) { return React.createElement(Item, __assign({ key: i }, attrs)); }); }, [tabs, visibleCount]);
+    var dropdownItems = useMemo(function () { return tabs.slice(visibleCount); }, [tabs, visibleCount]);
+    var dropdownVisible = dropdownItems.length !== 0;
+    var dropdownActive = dropdownItems.some(function (e) { return e.active; });
+    var isCalculatingSpace = wrapperWidth === 0;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledScrollableWrapper, { className: className, distance: distance, lateralPadding: lateralPadding, hidden: !isCalculatingSpace }, tabsItems),
+        React.createElement(TabsWrapper, { className: className, distance: distance, lateralPadding: lateralPadding, hidden: isCalculatingSpace, ref: elementsWrapperRef },
+            visibleItems,
+            dropdownVisible && React.createElement(TabsDropdown, { active: dropdownActive, tabs: dropdownItems }))));
+};
+// Remove scrollbar on ScrollableWrapper used until real DropdownTabs is loaded
+var StyledScrollableWrapper = styled(ScrollableTabsWrapper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
+export default DropdownTabs;
+var templateObject_1;
+//# sourceMappingURL=dropdownTabs.js.map

package/dist/components/tabs/dropdownTabs.js.map

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

package/dist/components/tabs/index.js

@@ -1,3 +1,4 @@
-import Tabs from './tabs';
-export { Tabs };
+import DropdownTabs from './dropdownTabs';
+import ScrollableTabs from './scrollableTabs';
+export { DropdownTabs, ScrollableTabs };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AACA,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAE7C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAY,CAAA"}

package/dist/components/tabs/scrollableTabs.js

@@ -0,0 +1,21 @@
+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);
+};
+import React, { useMemo } from 'react';
+import Item from './common/Item';
+import { ScrollableTabsWrapper } from './common/styled';
+var ScrollableTabs = function (_a) {
+    var className = _a.className, _b = _a.distance, distance = _b === void 0 ? 15 : _b, _c = _a.lateralPadding, lateralPadding = _c === void 0 ? 23 : _c, tabs = _a.tabs;
+    var tabsItems = useMemo(function () { return tabs.map(function (attrs, i) { return React.createElement(Item, __assign({ key: i }, attrs)); }); }, [tabs]);
+    return (React.createElement(ScrollableTabsWrapper, { className: className, distance: distance, lateralPadding: lateralPadding }, tabsItems));
+};
+export default ScrollableTabs;
+//# sourceMappingURL=scrollableTabs.js.map

package/dist/components/tabs/scrollableTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollableTabs.js","sourceRoot":"","sources":["../../../src/components/tabs/scrollableTabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAUvD,IAAM,cAAc,GAAG,UAAC,EAA8D;QAA5D,wBAAS,EAAE,gBAAa,EAAb,kCAAa,EAAE,sBAAmB,EAAnB,wCAAmB,EAAE,cAAI;IAC3E,IAAM,SAAS,GAAG,OAAO,CAAC,cAAM,OAAA,IAAI,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,CAAC,IAAK,OAAA,oBAAC,IAAI,aAAC,GAAG,EAAE,CAAC,IAAM,KAAK,EAAI,EAA3B,CAA2B,CAAC,EAAnD,CAAmD,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAE5F,OAAO,CACL,oBAAC,qBAAqB,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,IAC5F,SAAS,CACY,CACzB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/components/tabs/tabs.stories.js

@@ -2,81 +2,79 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { object, withKnobs, boolean } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
+import { object } from '@storybook/addon-knobs';
 import React from 'react';
-import { defaultTheme } from '../../styles/theme';
-import { GlobalStyles } from '../../utils/globalStyles';
-import { ThemeProvider } from '../themeProvider';
-import { Tabs } from './';
 import styled from 'styled-components';
-var stories = storiesOf('Tabs', module);
-stories.addDecorator(withKnobs);
-stories.add('default', function () {
-    var tabsText = object('tabsText', [
-        {
-            text: 'Sotto sezione',
-            active: false,
-            handleClick: function () {
-                alert('1');
-            }
+import DropdownTabs from './dropdownTabs';
+import ScrollableTabs from './scrollableTabs';
+var tabs = object('tabs', [
+    {
+        text: 'Sotto sezione',
+        active: false,
+        handleClick: function () {
+            alert('1');
         },
-        {
-            text: 'Sotto sezione 2',
-            active: true,
-            handleClick: function () {
-                alert('2');
-            }
+    },
+    {
+        text: 'Sotto sezione 2',
+        active: true,
+        handleClick: function () {
+            alert('2');
         },
-        {
-            text: 'Sotto sezione 3',
-            active: false,
-            handleClick: function () {
-                alert('3');
-            }
+    },
+    {
+        text: 'Sotto sezione 3',
+        active: false,
+        handleClick: function () {
+            alert('3');
         },
-        {
-            text: 'Sotto sezione 4',
-            active: false,
-            handleClick: function () {
-                alert('4');
-            }
+    },
+    {
+        text: 'Sotto sezione 4',
+        active: false,
+        handleClick: function () {
+            alert('4');
         },
-        {
-            text: 'Sotto 5',
-            active: false,
-            handleClick: function () {
-                alert('5');
-            }
+    },
+    {
+        text: 'Sotto 5',
+        active: false,
+        handleClick: function () {
+            alert('5');
         },
-        {
-            text: 'Sotto sezi 6',
-            active: false,
-            handleClick: function () {
-                alert('6');
-            }
+    },
+    {
+        text: 'Sotto sezi 6',
+        active: false,
+        handleClick: function () {
+            alert('6');
         },
-        {
-            text: 'Sotto sezione 7 lunga',
-            active: true,
-            handleClick: function () {
-                alert('7');
-            }
+    },
+    {
+        text: 'Sotto sezione 7 lunga',
+        active: true,
+        handleClick: function () {
+            alert('7');
         },
-        {
-            text: 'So 8',
-            active: false,
-            handleClick: function () {
-                alert('8');
-            }
-        }
-    ]);
-    var scrollable = boolean('scrollable', false);
-    return (React.createElement(ThemeProvider, { theme: defaultTheme },
-        React.createElement(GlobalStyles, null),
-        React.createElement(Wrapper, null,
-            React.createElement(Tabs, { tabs: tabsText, scrollable: scrollable }))));
-});
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid;\n  width: 300px;\n  resize: both;\n  overflow: auto;\n"], ["\n  border: 1px solid;\n  width: 300px;\n  resize: both;\n  overflow: auto;\n"])));
-var templateObject_1;
+    },
+    {
+        text: 'So 8',
+        active: false,
+        handleClick: function () {
+            alert('8');
+        },
+    },
+]);
+export var WithDropdown = function () { return (React.createElement(Wrapper, null,
+    React.createElement(Test, { tabs: tabs }))); };
+export var Scrollable = function () { return (React.createElement(Wrapper, null,
+    React.createElement(ScrollableTabs, { tabs: tabs }))); };
+var Test = styled(DropdownTabs)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid red;\n"], ["\n  border-bottom: 1px solid red;\n"])));
+var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid;\n  width: 300px;\n  resize: both;\n  overflow: auto;\n  height: 200px;\n"], ["\n  border: 1px solid;\n  width: 300px;\n  resize: both;\n  overflow: auto;\n  height: 200px;\n"])));
+var TabsStories = {
+    title: 'Old Components/Tabs',
+    component: Test,
+};
+export default TabsStories;
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=tabs.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,IAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE1C,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;AAEhC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE;IACrB,IAAM,QAAQ,GAAG,MAAM,CAAa,UAAU,EAAE;QAC9C;YACE,IAAI,EAAE,eAAe;YACrB,MAAM,EAAE,KAAK;YACb,WAAW,EAAE;gBACX,KAAK,CAAC,GAAG,CAAC,CAAC;YACb,CAAC;SACF;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,MAAM,EAAE,IAAI;YACZ,WAAW,EAAE;gBACX,KAAK,CAAC,GAAG,CAAC,CAAC;YACb,CAAC;SACF;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,MAAM,EAAE,KAAK;YACb,WAAW,EAAE;gBACX,KAAK,CAAC,GAAG,CAAC,CAAC;YACb,CAAC;SACF;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,MAAM,EAAE,KAAK;YACb,WAAW,EAAE;gBACX,KAAK,CAAC,GAAG,CAAC,CAAC;YACb,CAAC;SACF;QACD;YACE,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,KAAK;YACb,WAAW,EAAE;gBACX,KAAK,CAAC,GAAG,CAAC,CAAC;YACb,CAAC;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,MAAM,EAAE,KAAK;YACb,WAAW,EAAE;gBACX,KAAK,CAAC,GAAG,CAAC,CAAC;YACb,CAAC;SACF;QACD;YACE,IAAI,EAAE,uBAAuB;YAC7B,MAAM,EAAE,IAAI;YACZ,WAAW,EAAE;gBACX,KAAK,CAAC,GAAG,CAAC,CAAC;YACb,CAAC;SACF;QACD;YACE,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,KAAK;YACb,WAAW,EAAE;gBACX,KAAK,CAAC,GAAG,CAAC,CAAC;YACb,CAAC;SACF;KACF,CAAC,CAAC;IAEH,IAAM,UAAU,GAAG,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAEhD,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,YAAY;QAChC,oBAAC,YAAY,OAAG;QAChB,oBAAC,OAAO;YACN,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,GAAI,CACxC,CACI,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAM,OAAO,GAAG,MAAM,CAAC,GAAG,kJAAA,+EAKzB,IAAA,CAAC"}
+{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAGtC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAE7C,IAAM,IAAI,GAAG,MAAM,CAAa,MAAM,EAAE;IACtC;QACE,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE;YACX,KAAK,CAAC,GAAG,CAAC,CAAA;QACZ,CAAC;KACF;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE;YACX,KAAK,CAAC,GAAG,CAAC,CAAA;QACZ,CAAC;KACF;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE;YACX,KAAK,CAAC,GAAG,CAAC,CAAA;QACZ,CAAC;KACF;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE;YACX,KAAK,CAAC,GAAG,CAAC,CAAA;QACZ,CAAC;KACF;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,KAAK;QACb,WAAW,EAAE;YACX,KAAK,CAAC,GAAG,CAAC,CAAA;QACZ,CAAC;KACF;IACD;QACE,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE;YACX,KAAK,CAAC,GAAG,CAAC,CAAA;QACZ,CAAC;KACF;IACD;QACE,IAAI,EAAE,uBAAuB;QAC7B,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE;YACX,KAAK,CAAC,GAAG,CAAC,CAAA;QACZ,CAAC;KACF;IACD;QACE,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,KAAK;QACb,WAAW,EAAE;YACX,KAAK,CAAC,GAAG,CAAC,CAAA;QACZ,CAAC;KACF;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,CAChC,oBAAC,OAAO;IACN,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CACZ,CACX,EAJiC,CAIjC,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,cAAM,OAAA,CAC9B,oBAAC,OAAO;IACN,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,GAAI,CACtB,CACX,EAJ+B,CAI/B,CAAA;AAED,IAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,wGAAA,qCAEhC,IAAA,CAAA;AAED,IAAM,OAAO,GAAG,MAAM,CAAC,GAAG,oKAAA,iGAMzB,IAAA,CAAA;AAED,IAAM,WAAW,GAAoB;IACnC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/components/tag/Tag.js

@@ -10,13 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { StyledTag, TagText } from './components/StyledTag';
-import { Icon } from '../icon/Icon';
+import { LeftIcon, RightIcon, StyledTag, Text } from './styled';
 export var Tag = function (_a) {
-    var text = _a.text, type = _a.type, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, tagStyle = _a.tagStyle;
-    return (React.createElement(StyledTag, { type: type, tagStyle: tagStyle },
-        leftIcon && React.createElement(Icon, __assign({}, leftIcon)),
-        React.createElement(TagText, { leftIcon: leftIcon, rightIcon: rightIcon }, text),
-        rightIcon && React.createElement(Icon, __assign({}, rightIcon))));
+    var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, tagStyle = _a.tagStyle, text = _a.text, type = _a.type, className = _a.className;
+    return (React.createElement(StyledTag, { className: className, type: type, tagStyle: tagStyle },
+        leftIcon && React.createElement(LeftIcon, __assign({}, leftIcon)),
+        React.createElement(Text, null, text),
+        rightIcon && React.createElement(RightIcon, __assign({}, rightIcon))));
 };
 //# sourceMappingURL=Tag.js.map

package/dist/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,CAAC,IAAM,GAAG,GAAG,UAAC,EAAuD;QAArD,cAAI,EAAE,cAAI,EAAE,sBAAQ,EAAE,wBAAS,EAAE,sBAAQ;IAAiB,OAAA,CAC9E,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ;QACtC,QAAQ,IAAI,oBAAC,IAAI,eAAK,QAAQ,EAAI;QACnC,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,IAC9C,IAAI,CACG;QACT,SAAS,IAAI,oBAAC,IAAI,eAAK,SAAS,EAAI,CAC3B,CACb;AAR+E,CAQ/E,CAAC"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAG/D,MAAM,CAAC,IAAM,GAAG,GAAG,UAAC,EAAkE;QAAhE,sBAAQ,EAAE,wBAAS,EAAE,sBAAQ,EAAE,cAAI,EAAE,cAAI,EAAE,wBAAS;IAAiB,OAAA,CACzF,oBAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ;QAC5D,QAAQ,IAAI,oBAAC,QAAQ,eAAK,QAAQ,EAAI;QACvC,oBAAC,IAAI,QAAE,IAAI,CAAQ;QAClB,SAAS,IAAI,oBAAC,SAAS,eAAK,SAAS,EAAI,CAChC,CACb;AAN0F,CAM1F,CAAA"}

package/dist/components/tag/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,UAA0B,MAAM,cAAc,CAAA;AAErD,OAAO,EAAE,GAAG,EAAE,UAAU,EAAc,CAAA"}

package/dist/components/tag/styled.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { TagParts } from './tagPalette';
 import { StyledTagProps } from './types';
-export declare const LeftIcon: 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 RightIcon: 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 LeftIcon: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const RightIcon: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTag: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TagParts & StyledTagProps, import("./tagPalette").tagParts>;

package/dist/components/tag/styled.js

@@ -0,0 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { Icon } from '../icon';
+import { getTagColors } from './utils';
+export var LeftIcon = styled(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+export var RightIcon = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+export var Text = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var StyledTag = styled.div.attrs(getTagColors)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: row;\n  border: 4px;\n  align-items: center;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  text-align: center;\n  border-radius: 4px;\n  padding: 3px 8px;\n  color: ", ";\n  background-color: ", ";\n\n  ", " + ", " {\n    padding-left: 4px;\n  }\n\n  ", " + ", " {\n    padding-right: 12px;\n  }\n"], ["\n  display: inline-flex;\n  flex-direction: row;\n  border: 4px;\n  align-items: center;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  text-align: center;\n  border-radius: 4px;\n  padding: 3px 8px;\n  color: ", ";\n  background-color: ", ";\n\n  ", " + ", " {\n    padding-left: 4px;\n  }\n\n  ", " + ", " {\n    padding-right: 12px;\n  }\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, LeftIcon, Text, Text, RightIcon);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=styled.js.map

package/dist/components/tag/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/tag/styled.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,MAAM,CAAC,IAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,qEAAA,EAAE,IAAA,CAAA;AACtC,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,qEAAA,EAAE,IAAA,CAAA;AACvC,MAAM,CAAC,IAAM,IAAI,GAAG,MAAM,CAAC,GAAG,qEAAA,EAAE,IAAA,CAAA;AAEhC,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAA2B,YAAY,CAAC,+aAAgB,wOAWtF,EAAoB,yBACT,EAAwC,SAE1D,EAAQ,KAAM,EAAI,uCAIlB,EAAI,KAAM,EAAS,qCAGtB,KAVU,UAAC,EAAS;QAAP,gBAAK;IAAO,OAAA,KAAK;AAAL,CAAK,EACT,UAAC,EAAmB;QAAjB,oCAAe;IAAO,OAAA,eAAe;AAAf,CAAe,EAE1D,QAAQ,EAAM,IAAI,EAIlB,IAAI,EAAM,SAAS,CAGtB,CAAA"}

package/dist/components/tag/tag.stories.js

@@ -1,32 +1,17 @@
-import { storiesOf } from '@storybook/react';
-import { ThemeProvider } from '../themeProvider';
-import { GlobalStyles } from '../../utils/globalStyles';
+import { faRocketLaunch } from '@fortawesome/pro-solid-svg-icons';
+import { select, text } from '@storybook/addon-knobs';
 import React from 'react';
 import { Tag } from './Tag';
-import { faRocketLaunch } from '@fortawesome/pro-solid-svg-icons';
-import { select, text, withKnobs } from '@storybook/addon-knobs';
-import { defaultTheme } from '../../styles/theme';
-var stories = storiesOf('Tag', module);
-stories.add('normal', function () { return (React.createElement(ThemeProvider, { theme: defaultTheme },
-    React.createElement(GlobalStyles, null),
-    React.createElement(Tag, { text: 'Type here', type: 'success', tagStyle: 'full', leftIcon: { icon: faRocketLaunch } }))); });
-stories.addDecorator(withKnobs);
-stories.add('with Knobs', function () {
+export var Normal = function () { return (React.createElement(Tag, { text: 'Type here', type: 'success', tagStyle: 'full', leftIcon: { icon: faRocketLaunch } })); };
+export var WithKnobs = function () {
     var value = text('content', 'Type here');
-    var type = select('type', {
-        standard: 'standard',
-        error: 'error',
-        info: 'info',
-        warning: 'warning',
-        success: 'success'
-    }, 'success');
-    var style = select('style', {
-        full: 'full',
-        soft: 'soft',
-        text: 'text'
-    }, 'full');
-    return (React.createElement(ThemeProvider, { theme: defaultTheme },
-        React.createElement(GlobalStyles, null),
-        React.createElement(Tag, { text: value, type: type, tagStyle: style })));
-});
+    var type = select('type', ['standard', 'error', 'info', 'warning', 'success'], 'success');
+    var style = select('style', ['full', 'soft', 'text'], 'full');
+    return React.createElement(Tag, { text: value, type: type, tagStyle: style });
+};
+var TagStories = {
+    title: 'Old Components/Tag',
+    component: Tag,
+};
+export default TagStories;
 //# sourceMappingURL=tag.stories.js.map