@fattureincloud/fic-design-system 0.3.18 → 0.3.22

package/dist/components/buttons/iconButton/iconButton.stories.js

@@ -0,0 +1,17 @@
+import { faFire } from '@fortawesome/pro-solid-svg-icons';
+import { action } from '@storybook/addon-actions';
+import { select } from '@storybook/addon-knobs';
+import React from 'react';
+import IconButton from './IconButton';
+var icon = {
+    icon: faFire,
+    size: 'lg',
+};
+export var WithKnobs = function () {
+    var color = select('color', ['blue', 'red', 'green', 'yellow'], 'blue');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { icon: icon, color: color, onClick: action('Hai cliccato il bottone') }),
+        React.createElement(IconButton, { icon: icon, color: color, onClick: action('Hai cliccato il bottone'), type: 'secondary' }),
+        React.createElement(IconButton, { icon: icon, color: color, onClick: action('Hai cliccato il bottone'), isDisabled: true })));
+};
+//# sourceMappingURL=iconButton.stories.js.map

package/dist/components/buttons/iconButton/iconButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButton.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/iconButton/iconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,UAAU,MAAM,cAAc,CAAA;AAGrC,IAAM,IAAI,GAAc;IACtB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,IAAI;CACX,CAAA;AAED,MAAM,CAAC,IAAM,SAAS,GAAG;IACvB,IAAM,KAAK,GAAG,MAAM,CAAmB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAA;IAE3F,OAAO,CACL;QACE,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,yBAAyB,CAAC,GAAI;QACpF,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,yBAAyB,CAAC,EAAE,IAAI,EAAE,WAAW,GAAI;QACvG,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,yBAAyB,CAAC,EAAE,UAAU,SAAG,CAC9F,CACJ,CAAA;AACH,CAAC,CAAA"}

package/dist/components/buttons/iconButton/iconButtonPalette.js

@@ -0,0 +1,51 @@
+import defaultPalette from '../../../styles/defaultPalette';
+var iconButtonPalette = {
+    primary: {
+        blue: {
+            normal: defaultPalette.blue[200],
+            hover: defaultPalette.blue[500],
+        },
+        red: {
+            normal: defaultPalette.red[200],
+            hover: defaultPalette.red[500],
+        },
+        green: {
+            normal: defaultPalette.green[200],
+            hover: defaultPalette.green[500],
+        },
+        yellow: {
+            normal: defaultPalette.yellow[200],
+            hover: defaultPalette.yellow[500],
+        },
+        disabled: {
+            normal: defaultPalette.grey[200],
+            hover: defaultPalette.grey[200],
+        },
+    },
+    secondary: {
+        blue: {
+            normal: defaultPalette.blue[200],
+            hover: defaultPalette.white[100],
+        },
+        red: {
+            normal: defaultPalette.red[200],
+            hover: defaultPalette.white[100],
+        },
+        green: {
+            normal: defaultPalette.green[200],
+            hover: defaultPalette.white[100],
+        },
+        yellow: {
+            normal: defaultPalette.yellow[200],
+            hover: defaultPalette.white[100],
+        },
+        disabled: {
+            normal: defaultPalette.grey[200],
+            hover: defaultPalette.grey[200],
+        },
+    },
+    defaultType: 'primary',
+    defaultColor: 'blue',
+};
+export default iconButtonPalette;
+//# sourceMappingURL=iconButtonPalette.js.map

package/dist/components/buttons/iconButton/iconButtonPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButtonPalette.js","sourceRoot":"","sources":["../../../../src/components/buttons/iconButton/iconButtonPalette.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAwB3D,IAAM,iBAAiB,GAAsB;IAC3C,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;YAChC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;SAChC;QACD,GAAG,EAAE;YACH,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC;YAC/B,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC;SAC/B;QACD,KAAK,EAAE;YACL,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;YACjC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;SACjC;QACD,MAAM,EAAE;YACN,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC;YAClC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC;SAClC;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;YAChC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;SAChC;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;YAChC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;SACjC;QACD,GAAG,EAAE;YACH,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC;YAC/B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;SACjC;QACD,KAAK,EAAE;YACL,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;YACjC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;SACjC;QACD,MAAM,EAAE;YACN,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC;YAClC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;SACjC;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;YAChC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;SAChC;KACF;IACD,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,MAAM;CACrB,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/components/buttons/iconButton/types.js

@@ -0,0 +1,5 @@
+export var iconButtonTypesArray = ['primary', 'secondary'];
+export var iconButtonColorsArray = ['blue', 'red', 'green', 'yellow'];
+export var iconButtonDisableColorArray = ['disabled'];
+export var iconButtonPartsArray = ['normal', 'hover'];
+//# sourceMappingURL=types.js.map

package/dist/components/buttons/iconButton/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/buttons/iconButton/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,oBAAoB,GAAG,CAAC,SAAS,EAAE,WAAW,CAAU,CAAA;AAGrE,MAAM,CAAC,IAAM,qBAAqB,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAA;AAGhF,MAAM,CAAC,IAAM,2BAA2B,GAAG,CAAC,UAAU,CAAU,CAAA;AAGhE,MAAM,CAAC,IAAM,oBAAoB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAA"}

package/dist/components/buttons/iconButton/utils.js

@@ -0,0 +1,8 @@
+export var getIconButtonColors = function (_a) {
+    var color = _a.color, isDisabled = _a.isDisabled, theme = _a.theme, type = _a.type;
+    var _b = theme.components.iconButton, defaultColor = _b.defaultColor, defaultType = _b.defaultType;
+    var actualColor = isDisabled ? 'disabled' : color || defaultColor;
+    var actualType = type || defaultType;
+    return theme.components.iconButton[actualType][actualColor];
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/buttons/iconButton/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/buttons/iconButton/utils.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,IAAM,mBAAmB,GAA4B,UAAC,EAAkC;QAAhC,gBAAK,EAAE,0BAAU,EAAE,gBAAK,EAAE,cAAI;IACrF,IAAA,gCAA2D,EAAzD,8BAAY,EAAE,4BAA2C,CAAA;IAEjE,IAAM,WAAW,GAA8C,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,YAAY,CAAA;IAC9G,IAAM,UAAU,GAAoB,IAAI,IAAI,WAAW,CAAA;IACvD,OAAO,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,CAAA;AAC7D,CAAC,CAAA"}

package/dist/components/buttons/index.js

@@ -0,0 +1,6 @@
+import Button from './button/Button';
+import buttonPalette from './button/buttonPalette';
+import IconButton from './iconButton/IconButton';
+import iconButtonPalette from './iconButton/iconButtonPalette';
+export { Button, IconButton, buttonPalette, iconButtonPalette, };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAuB,MAAM,iBAAiB,CAAA;AACrD,OAAO,aAAgC,MAAM,wBAAwB,CAAA;AACrE,OAAO,UAA+B,MAAM,yBAAyB,CAAA;AACrE,OAAO,iBAAwC,MAAM,gCAAgC,CAAA;AAErF,OAAO,EACL,MAAM,EACN,UAAU,EAGV,aAAa,EAEb,iBAAiB,GAElB,CAAA"}

package/dist/components/chips/chips.js

@@ -0,0 +1,49 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 { faTimes } from '@fortawesome/pro-solid-svg-icons';
+import React, { Component } from 'react';
+import { StyledChipWrapper, StyledIcon } from './components/styledChipWrapper';
+var UnstyledChip = /** @class */ (function (_super) {
+    __extends(UnstyledChip, _super);
+    function UnstyledChip() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    UnstyledChip.prototype.render = function () {
+        var _a = this.props, closeAction = _a.closeAction, statusEdit = _a.statusEdit, text = _a.text;
+        return (React.createElement(React.Fragment, null,
+            text,
+            ' ',
+            statusEdit ? (React.createElement("div", null,
+                React.createElement(StyledIcon, { icon: faTimes, onClick: function () {
+                        closeAction ? closeAction() : null;
+                    } }))) : null));
+    };
+    return UnstyledChip;
+}(Component));
+export { UnstyledChip };
+var Chip = function (props) { return (React.createElement(StyledChipWrapper, __assign({}, props),
+    React.createElement(UnstyledChip, __assign({}, props)))); };
+export default Chip;
+//# sourceMappingURL=chips.js.map

package/dist/components/chips/chips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chips.js","sourceRoot":"","sources":["../../../src/components/chips/chips.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAA;AAC1D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAA;AAG9E;IAAkC,gCAA+C;IAAjF;;IAmBA,CAAC;IAlBC,6BAAM,GAAN;QACQ,IAAA,eAA8C,EAA5C,4BAAW,EAAE,0BAAU,EAAE,cAAmB,CAAA;QACpD,OAAO,CACL;YACG,IAAI;YAAE,GAAG;YACT,UAAU,CAAC,CAAC,CAAC,CACZ;gBACE,oBAAC,UAAU,IACT,IAAI,EAAE,OAAO,EACb,OAAO,EAAE;wBACP,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;oBACpC,CAAC,GACD,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CACP,CACJ,CAAA;IACH,CAAC;IACH,mBAAC;AAAD,CAAC,AAnBD,CAAkC,SAAS,GAmB1C;;AAED,IAAM,IAAI,GAAU,UAAA,KAAK,IAAI,OAAA,CAC3B,oBAAC,iBAAiB,eAAK,KAAK;IAC1B,oBAAC,YAAY,eAAK,KAAK,EAAI,CACT,CACrB,EAJ4B,CAI5B,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/chips/chips.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Chip } from '.';
+export var Normal = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("div", { style: { marginBottom: '1rem' } },
+        React.createElement("p", null, "View"),
+        React.createElement(Chip, { text: 'Guasti' })),
+    React.createElement("div", null,
+        React.createElement("p", null, "Editable"),
+        React.createElement(Chip, { text: 'Assemblee', closeAction: function () { return console.log('CLICK'); }, statusEdit: true })))); };
+var ChipStories = {
+    title: 'Old Components/Chip',
+    component: Chip,
+};
+export default ChipStories;
+//# sourceMappingURL=chips.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chips.stories.js","sourceRoot":"","sources":["../../../src/components/chips/chips.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAA;AAExB,MAAM,CAAC,IAAM,MAAM,GAAG,cAAM,OAAA,CAC1B;IACE,6BAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE;QAClC,sCAAW;QACX,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CAClB;IACN;QACE,0CAAe;QACf,oBAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,WAAW,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAApB,CAAoB,EAAE,UAAU,SAAG,CACzE,CACL,CACJ,EAX2B,CAW3B,CAAA;AAED,IAAM,WAAW,GAAsC;IACrD,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/components/chips/components/styledChipWrapper.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';
+import { spacing } from '../../../styles/spacing';
+import { Icon } from '../../icon';
+export var StyledChipWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 100px;\n  display: inline-flex;\n  align-items: center;\n  font-size: 14px;\n  line-height: 1em;\n  white-space: nowrap;\n  padding: 5px ", ";\n\n  ", "\n\n  ", "\n"], ["\n  border-radius: 100px;\n  display: inline-flex;\n  align-items: center;\n  font-size: 14px;\n  line-height: 1em;\n  white-space: nowrap;\n  padding: 5px ", ";\n\n  ",
+    "\n\n  ",
+    "\n"])), spacing.xs, function (_a) {
+    var palette = _a.theme.palette;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n  "], ["\n    background-color: ", ";\n    color: ", ";\n  "])), palette.grey[100], palette.black[100]);
+}, function (_a) {
+    var statusEdit = _a.statusEdit, palette = _a.theme.palette;
+    if (statusEdit) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        &:hover {\n          background-color: ", ";\n        }\n        &:active {\n          background-color: ", ";\n        }\n      "], ["\n        &:hover {\n          background-color: ", ";\n        }\n        &:active {\n          background-color: ", ";\n        }\n      "])), palette.grey[200], palette.grey[300]);
+    }
+    return undefined;
+});
+export var StyledIcon = styled(Icon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  margin-left: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  cursor: pointer;\n  margin-left: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n"])), spacing.xs);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=styledChipWrapper.js.map

package/dist/components/chips/components/styledChipWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styledChipWrapper.js","sourceRoot":"","sources":["../../../../src/components/chips/components/styledChipWrapper.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAGjC,MAAM,CAAC,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,4PAAY,8JAOtC,EAAU,SAEvB;IAGD,QAEC;IAYD,IACF,KApBgB,OAAO,CAAC,EAAE,EAEvB,UAAC,EAAsB;QAAX,0BAAO;IAAS,OAAA,GAAG,wHAAA,0BACX,EAAiB,gBAC5B,EAAkB,OAC5B,KAFqB,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5B,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;AAFC,CAG7B,EAEC,UAAC,EAAkC;QAAhC,0BAAU,EAAW,0BAAO;IAC/B,IAAI,UAAU,EAAE;QACd,OAAO,GAAG,gNAAA,mDAEc,EAAiB,gEAGjB,EAAiB,sBAExC,KALuB,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAGjB,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAExC;KACF;IACD,OAAO,SAAS,CAAA;AAClB,CAAC,CACF,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,yJAAA,uCAErB,EAAU,6CAI1B,KAJgB,OAAO,CAAC,EAAE,CAI1B,CAAA"}

package/dist/components/chips/index.js

@@ -0,0 +1,3 @@
+import Chip from './chips';
+export { Chip };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/chips/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAA;AAE1B,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/chips/types.js

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

package/dist/components/chips/types.js.map

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

package/dist/components/drawer/components/styledDrawerWrapper.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, { css } from 'styled-components';
+import { spacing } from '../../../styles/spacing';
+import { Icon } from '../../icon';
+import { showHandler } from '../utils';
+export var StyledDrawerWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+    "\n"])), function (_a) {
+    var show = _a.show, palette = _a.theme.palette;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .drawer {\n      position: fixed;\n      right: 0;\n      top: 0;\n      height: 100vh;\n      width: 500px;\n      box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n      border-radius: 8px 0 0 8px;\n      transform: translateX(110%);\n      transition: transform 0.4s ease-in-out;\n      z-index: 5;\n      background-color: ", ";\n      display: flex;\n      flex-direction: column;\n\n      ", "\n\n      .drawer__header {\n        padding-right: calc(", " + ", ");\n        padding-left: ", ";\n        display: flex;\n        align-items: center;\n        background-color: ", ";\n        border-bottom: 1px solid ", ";\n\n        .drawer__header__title {\n          font-weight: 500;\n          font-size: 20px;\n          line-height: 30px;\n          display: flex;\n          align-items: center;\n          height: calc(", " + ", ");\n        }\n\n        .drawer__header__actions {\n          position: absolute;\n          right: ", ";\n          top: ", ";\n          font-size: 24px;\n        }\n      }\n\n      .drawer__body {\n        height: 100%;\n        overflow-y: scroll;\n      }\n\n      .drawer__footer {\n        height: 80px;\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        padding: 0 ", ";\n        border-top: 1px solid ", ";\n      }\n    }\n  "], ["\n    .drawer {\n      position: fixed;\n      right: 0;\n      top: 0;\n      height: 100vh;\n      width: 500px;\n      box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n      border-radius: 8px 0 0 8px;\n      transform: translateX(110%);\n      transition: transform 0.4s ease-in-out;\n      z-index: 5;\n      background-color: ", ";\n      display: flex;\n      flex-direction: column;\n\n      ", "\n\n      .drawer__header {\n        padding-right: calc(", " + ", ");\n        padding-left: ", ";\n        display: flex;\n        align-items: center;\n        background-color: ", ";\n        border-bottom: 1px solid ", ";\n\n        .drawer__header__title {\n          font-weight: 500;\n          font-size: 20px;\n          line-height: 30px;\n          display: flex;\n          align-items: center;\n          height: calc(", " + ", ");\n        }\n\n        .drawer__header__actions {\n          position: absolute;\n          right: ", ";\n          top: ", ";\n          font-size: 24px;\n        }\n      }\n\n      .drawer__body {\n        height: 100%;\n        overflow-y: scroll;\n      }\n\n      .drawer__footer {\n        height: 80px;\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        padding: 0 ", ";\n        border-top: 1px solid ", ";\n      }\n    }\n  "])), palette.white[100], showHandler(show), spacing.xxxl, spacing.m, spacing.l, palette.grey[50], palette.grey[100], spacing.xxxl, spacing.m, spacing.l, spacing.l, spacing.l, palette.grey[100]);
+});
+export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: pointer;\n    &:hover {\n    color: ", ";\n"], ["\n    cursor: pointer;\n    &:hover {\n    color: ", ";\n"])), function (_a) {
+    var palette = _a.theme.palette;
+    return palette.grey[800];
+});
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=styledDrawerWrapper.js.map

package/dist/components/drawer/components/styledDrawerWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styledDrawerWrapper.js","sourceRoot":"","sources":["../../../../src/components/drawer/components/styledDrawerWrapper.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAEtC,MAAM,CAAC,IAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,+EAAqB,MAC9D;IAyDD,IACF,KA1DG,UAAC,EAA4B;QAA1B,cAAI,EAAW,0BAAO;IAAS,OAAA,GAAG,85CAAA,mXAYf,EAAkB,kEAIpC,EAAiB,2DAGK,EAAY,KAAM,EAAS,4BACjC,EAAS,qFAGL,EAAgB,sCACT,EAAiB,iNAQ3B,EAAY,KAAM,EAAS,uGAKjC,EAAS,oBACX,EAAS,0SAeL,EAAS,mCACE,EAAiB,uBAG9C,KA7CuB,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAIpC,WAAW,CAAC,IAAI,CAAC,EAGK,OAAO,CAAC,IAAI,EAAM,OAAO,CAAC,CAAC,EACjC,OAAO,CAAC,CAAC,EAGL,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EACT,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAQ3B,OAAO,CAAC,IAAI,EAAM,OAAO,CAAC,CAAC,EAKjC,OAAO,CAAC,CAAC,EACX,OAAO,CAAC,CAAC,EAeL,OAAO,CAAC,CAAC,EACE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAtDX,CAyDnC,CACF,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,8HAAA,oDAGzB,EAA6C,KACzD,KADY,UAAC,EAAsB;QAAX,0BAAO;IAAS,OAAA,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAAjB,CAAiB,CACzD,CAAA"}

package/dist/components/drawer/drawer.js

@@ -0,0 +1,52 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 { faTimes } from '@fortawesome/pro-solid-svg-icons';
+import React, { Component } from 'react';
+import { StyledDrawerWrapper, StyledIcon } from './components/styledDrawerWrapper';
+var UnstyledDrawer = /** @class */ (function (_super) {
+    __extends(UnstyledDrawer, _super);
+    function UnstyledDrawer(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {};
+        return _this;
+    }
+    UnstyledDrawer.prototype.render = function () {
+        var _a = this.props, actionClose = _a.actionClose, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, title = _a.title;
+        return (React.createElement("div", { className: 'drawer' },
+            React.createElement("div", { className: 'drawer__header' },
+                renderHeader ? renderHeader() : React.createElement("div", { className: 'drawer__header__title' }, title),
+                React.createElement("div", { className: 'drawer__header__actions' },
+                    React.createElement("span", { onClick: actionClose },
+                        React.createElement(StyledIcon, { icon: faTimes })))),
+            React.createElement("div", { className: 'drawer__body' }, this.props.children),
+            renderFooter ? React.createElement("div", { className: 'drawer__footer' }, renderFooter()) : null));
+    };
+    return UnstyledDrawer;
+}(Component));
+export { UnstyledDrawer };
+var Drawer = function (props) { return (React.createElement(StyledDrawerWrapper, __assign({}, props),
+    React.createElement(UnstyledDrawer, __assign({}, props)))); };
+export default Drawer;
+//# sourceMappingURL=drawer.js.map

package/dist/components/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAA;AAC1D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAGlF;IAAoC,kCAAmD;IACrF,wBAAY,KAA0B;QAAtC,YACE,kBAAM,KAAK,CAAC,SAGb;QADC,KAAI,CAAC,KAAK,GAAG,EAAE,CAAA;;IACjB,CAAC;IAED,+BAAM,GAAN;QACQ,IAAA,eAA+D,EAA7D,4BAAW,EAAE,8BAAY,EAAE,8BAAY,EAAE,gBAAoB,CAAA;QACrE,OAAO,CACL,6BAAK,SAAS,EAAC,QAAQ;YACrB,6BAAK,SAAS,EAAC,gBAAgB;gBAC5B,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO;gBACrF,6BAAK,SAAS,EAAC,yBAAyB;oBACtC,8BAAM,OAAO,EAAE,WAAW;wBACxB,oBAAC,UAAU,IAAC,IAAI,EAAE,OAAO,GAAI,CACxB,CACH,CACF;YACN,6BAAK,SAAS,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO;YAExD,YAAY,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,gBAAgB,IAAE,YAAY,EAAE,CAAO,CAAC,CAAC,CAAC,IAAI,CACzE,CACP,CAAA;IACH,CAAC;IACH,qBAAC;AAAD,CAAC,AAzBD,CAAoC,SAAS,GAyB5C;;AAED,IAAM,MAAM,GAAY,UAAA,KAAK,IAAI,OAAA,CAC/B,oBAAC,mBAAmB,eAAK,KAAK;IAC5B,oBAAC,cAAc,eAAK,KAAK,EAAI,CACT,CACvB,EAJgC,CAIhC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/components/drawer/drawer.stories.js

@@ -0,0 +1,77 @@
+import { faCircle, faCog, faPencilAlt } from '@fortawesome/pro-solid-svg-icons';
+import { boolean, text } from '@storybook/addon-knobs';
+import React, { useCallback, useState } from 'react';
+import { Accordion } from '../accordions';
+import { Button } from '../buttons';
+import { Icon } from '../icon';
+import { Drawer } from '.';
+export var DrawerGroup = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Accordion, { title: 'Pagamenti', renderBody: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("div", null,
+                React.createElement("p", null,
+                    React.createElement(Icon, { icon: faCircle }))),
+            React.createElement("div", null,
+                React.createElement("p", null,
+                    React.createElement("small", null, "Preferenza pagamento rate")),
+                React.createElement("p", null, "Bollettino MAV")))); }, lateralActions: [
+            {
+                action: function () {
+                    console.log('edit');
+                },
+                icon: React.createElement(Icon, { icon: faPencilAlt }),
+            },
+        ] }),
+    React.createElement(Accordion, { title: 'Pagamenti', renderBody: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("div", null,
+                React.createElement("p", null,
+                    React.createElement(Icon, { icon: faCircle }))),
+            React.createElement("div", null,
+                React.createElement("p", null,
+                    React.createElement("small", null, "Preferenza pagamento rate")),
+                React.createElement("p", null, "Bollettino MAV")))); }, lateralActions: [
+            {
+                action: function () {
+                    console.log('edit');
+                },
+                icon: React.createElement(Icon, { icon: faCog }),
+            },
+        ] }),
+    React.createElement(Accordion, { title: 'Pagamenti', renderBody: function () { return (React.createElement(React.Fragment, null,
+            React.createElement("div", null,
+                React.createElement("p", null,
+                    React.createElement(Icon, { icon: faCircle }))),
+            React.createElement("div", null,
+                React.createElement("p", null,
+                    React.createElement("small", null, "Preferenza pagamento rate")),
+                React.createElement("p", null, "Bollettino MAV")))); }, lateralActions: [
+            {
+                action: function () {
+                    console.log('edit');
+                },
+                icon: React.createElement(Icon, { icon: faPencilAlt }),
+            },
+        ] }))); };
+export var Editable = function () {
+    var show = boolean('show', true);
+    var title = text('title', 'Massimiliano Bolognesi');
+    return (React.createElement(Drawer, { show: show, title: title, renderFooter: function () { return (React.createElement("div", null,
+            React.createElement(Button, { text: 'Posiz. nei condom\u00ECni' }))); } },
+        React.createElement(DrawerGroup, null)));
+};
+var renderFooter = function () { return (React.createElement("div", null,
+    React.createElement(Button, { text: 'Posiz. nei condom\u00ECni' }))); };
+var DrawerWithState = function () {
+    var _a = useState(false), show = _a[0], setShow = _a[1];
+    var toggleShow = useCallback(function () { return setShow(function (show) { return !show; }); }, []);
+    return (React.createElement("div", null,
+        React.createElement("button", { onClick: toggleShow }, "Show"),
+        React.createElement(Drawer, { actionClose: function () { return setShow(false); }, show: show, title: 'Massimiliano Bolognesi', renderFooter: renderFooter },
+            React.createElement(DrawerGroup, null))));
+};
+export var WithState = function () { return React.createElement(DrawerWithState, null); };
+var DrawerStories = {
+    title: 'Old Components/Drawer',
+    component: Drawer,
+};
+export default DrawerStories;
+//# sourceMappingURL=drawer.stories.js.map

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

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

package/dist/components/drawer/index.js

@@ -0,0 +1,3 @@
+import Drawer from './drawer';
+export { Drawer };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/drawer/types.js

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

package/dist/components/drawer/types.js.map

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

package/dist/components/drawer/utils.js

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from 'styled-components';
+export var showHandler = function (show) {
+    return show
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        transform: translateX(0);\n      "], ["\n        transform: translateX(0);\n      "]))) : undefined;
+};
+var templateObject_1;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/drawer/utils.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAEvC,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,IAAc;IACxC,OAAA,IAAI;QACF,CAAC,CAAC,GAAG,gHAAA,6CAEF,KACH,CAAC,CAAC,SAAS;AAJb,CAIa,CAAA"}

package/dist/components/dropdown/DropdownImpl.js

@@ -0,0 +1,107 @@
+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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { usePopper } from 'react-popper';
+import { CSSTransition } from 'react-transition-group';
+import { useClickAway } from 'react-use';
+import styled, { css } from 'styled-components';
+import DefaultDropdown from './components/DefaultDropdown';
+import DefaultTrigger from './components/DefaultTrigger';
+var DropdownImpl = function (props) {
+    var className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, _b = props.placement, placement = _b === void 0 ? 'bottom-start' : _b, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title, _c = props.forceOpen, forceOpen = _c === void 0 ? false : _c;
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var toggleDropdown = useCallback(function (e) {
+        setIsOpen(function (isOpen) { return !isOpen; });
+        e.stopPropagation();
+    }, []);
+    var closeDropdown = useCallback(function () { return setIsOpen(false); }, []);
+    useEffect(function () {
+        setIsOpen(forceOpen);
+    }, [forceOpen]);
+    // Close Dropdown on click outside
+    var wrapperRef = useRef(null);
+    useClickAway(wrapperRef, function () { return closeDropdown(); });
+    var popperRef = useRef(null);
+    var buttonRef = useRef(null);
+    var _e = useState(null), arrowRef = _e[0], setArrowRef = _e[1];
+    var _f = usePopper(buttonRef.current, popperRef.current, {
+        placement: placement,
+        strategy: 'fixed',
+        modifiers: useMemo(function () { return [
+            {
+                name: 'arrow',
+                options: {
+                    element: arrowRef,
+                },
+            },
+            {
+                name: 'offset',
+                enabled: true,
+                options: {
+                    offset: [0, 4],
+                },
+            },
+            {
+                name: 'minWidthAsTrigger',
+                enabled: minWidthAsTrigger,
+                phase: 'beforeWrite',
+                requires: ['computeStyles'],
+                fn: function (_a) {
+                    var state = _a.state;
+                    state.styles.popper.minWidth = state.rects.reference.width + "px";
+                },
+                effect: function (_a) {
+                    var state = _a.state;
+                    var width = state.elements.reference.getBoundingClientRect().width;
+                    state.elements.popper.style.minWidth = width + "px";
+                },
+            },
+        ]; }, [minWidthAsTrigger, arrowRef]),
+    }), attributes = _f.attributes, styles = _f.styles;
+    return (React.createElement(Wrapper, { className: className, ref: wrapperRef },
+        React.createElement("div", { style: triggerStyles, ref: buttonRef, onClick: toggleDropdown },
+            title && React.createElement(DefaultTrigger, { title: title }),
+            !title && renderTrigger && renderTrigger()),
+        React.createElement(CSSTransition, { in: forceOpen || isOpen, timeout: 200, unmountOnExit: true, appear: true },
+            React.createElement(BodyAnimationWrapper, null,
+                React.createElement(PopperContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
+                    React.createElement("div", { ref: setArrowRef, style: styles.arrow }),
+                    React.createElement("div", { style: styles.offset }, content ? (React.createElement(DefaultWrapper, { fullWidth: fullWidth, maxWidth: maxWidth },
+                        React.createElement(DefaultDropdown, { content: content, fullWidth: fullWidth, maxWidth: maxWidth, closeDropdown: closeDropdown }))) : (React.createElement(CustomWrapper, { maxWidth: maxWidth }, renderContent === null || renderContent === void 0 ? void 0 : renderContent(closeDropdown)))))))));
+};
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var DefaultWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ",
+    ";\n"])), function (_a) {
+    var fullWidth = _a.fullWidth, maxWidth = _a.maxWidth;
+    return maxWidth
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          max-width: ", ";\n        "], ["\n          max-width: ", ";\n        "])), maxWidth) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), fullWidth ? 'auto' : '200px');
+});
+var CustomWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+    "\n"])), function (_a) {
+    var maxWidth = _a.maxWidth;
+    return maxWidth && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      max-width: ", ";\n    "], ["\n      max-width: ", ";\n    "])), maxWidth);
+});
+var PopperContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  overflow-y: hidden;\n  padding: 8px 0;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 3px;\n  box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n  z-index: 9;\n"], ["\n  overflow-y: hidden;\n  padding: 8px 0;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 3px;\n  box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n  z-index: 9;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[900];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.white[100];
+});
+var BodyAnimationWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  &.enter {\n    opacity: 0;\n    margin-top: -10px;\n  }\n\n  &.enter-active {\n    opacity: 1;\n    margin-top: 0;\n    transition: margin-top 200ms, opacity 200ms;\n  }\n\n  &.exit {\n    opacity: 1;\n    margin-top: 0;\n  }\n\n  &.exit-active {\n    opacity: 0;\n    margin-top: -10px;\n    transition: margin-top 200ms, opacity 200ms;\n  }\n"], ["\n  &.enter {\n    opacity: 0;\n    margin-top: -10px;\n  }\n\n  &.enter-active {\n    opacity: 1;\n    margin-top: 0;\n    transition: margin-top 200ms, opacity 200ms;\n  }\n\n  &.exit {\n    opacity: 1;\n    margin-top: 0;\n  }\n\n  &.exit-active {\n    opacity: 0;\n    margin-top: -10px;\n    transition: margin-top 200ms, opacity 200ms;\n  }\n"])));
+export default DropdownImpl;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=DropdownImpl.js.map

package/dist/components/dropdown/DropdownImpl.js.map

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

package/dist/components/dropdown/components/DefaultDropdown.js

@@ -0,0 +1,40 @@
+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, { useMemo } from 'react';
+import Item from './Item';
+var DefaultDropdown = function (_a) {
+    var closeDropdown = _a.closeDropdown, content = _a.content, fullWidth = _a.fullWidth, maxWidth = _a.maxWidth;
+    var mappedItems = useMemo(function () {
+        return content.map(function (_a, id) {
+            var onClick = _a.onClick, rest = __rest(_a, ["onClick"]);
+            return (React.createElement(Item, __assign({ fullWidth: fullWidth, maxWidth: maxWidth, key: id, onClick: function (e) {
+                    e.stopPropagation();
+                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                    closeDropdown();
+                } }, rest)));
+        });
+    }, [closeDropdown, content, fullWidth, maxWidth]);
+    return React.createElement(React.Fragment, null, mappedItems);
+};
+export default DefaultDropdown;
+//# sourceMappingURL=DefaultDropdown.js.map

package/dist/components/dropdown/components/DefaultDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultDropdown.js","sourceRoot":"","sources":["../../../../src/components/dropdown/components/DefaultDropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,IAAI,MAAM,QAAQ,CAAA;AASzB,IAAM,eAAe,GAAG,UAAC,EAAsD;QAApD,gCAAa,EAAE,oBAAO,EAAE,wBAAS,EAAE,sBAAQ;IACpE,IAAM,WAAW,GAAG,OAAO,CACzB;QACE,OAAA,OAAO,CAAC,GAAG,CAAC,UAAC,EAAuC,EAAE,EAAE;YAAzC,IAAA,oBAAO,EAAE,8BAAO;YAA8B,OAAA,CAC3D,oBAAC,IAAI,aACH,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,EAAE,EACP,OAAO,EAAE,UAAA,CAAC;oBACR,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,EAAC;oBACZ,aAAa,EAAE,CAAA;gBACjB,CAAC,IACG,IAAI,EACR,CACH,CAAA;SAAA,CAAC;IAZF,CAYE,EACJ,CAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC,CAC9C,CAAA;IAED,OAAO,0CAAG,WAAW,CAAI,CAAA;AAC3B,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/components/dropdown/components/DefaultTrigger.js

@@ -0,0 +1,9 @@
+import { faChevronDown } from '@fortawesome/pro-solid-svg-icons';
+import React from 'react';
+import { Button } from '../../buttons';
+var DefaultTrigger = function (_a) {
+    var title = _a.title;
+    return React.createElement(Button, { text: title, iconRight: { icon: faChevronDown } });
+};
+export default DefaultTrigger;
+//# sourceMappingURL=DefaultTrigger.js.map