takeat-design-system-ui-kit 0.1.18 → 0.1.21

package/dist/cjs/components/Modal/Modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":";;;;;AACA,oCAAmC;AACnC,+BAAiC;AACjC,+CAAsB;AACtB,6CAAkD;AAClD,gCAA+B;AAE/B,IAAM,IAAI,GAAuB;IAC/B,SAAS,EAAE,UAAK;IAChB,KAAK,EAAE,qBAAqB;IAC5B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,oDAAoD;YACjE,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;aAChB;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE;gBACP,OAAO,EAAE,IAAI;aACd;SACF;QACD,aAAa,EAAE;YACb,WAAW,EACT,2FAA2F;YAC7F,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC5B,MAAM,EAAE;QACA,IAAA,KAA4B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;QAElD,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,eAAe,EAAE,WAAW,EAAE,aACnE,uBAAC,eAAM,IAAC,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,CAAC,SAAS,CAAC,EAAxB,CAAwB,2BAAqB,EAEpE,wBAAC,UAAK,IACJ,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,cAAM,OAAA,YAAY,CAAC,CAAC,SAAS,CAAC,EAAxB,CAAwB,EACtC,aAAa,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAEhD,wBAAC,UAAK,CAAC,MAAM,eACX,4DAAuB,EACvB,yEAAoC,IACvB,EACf,wBAAC,UAAK,CAAC,IAAI,yQAIiD,GAAG,EAC7D,uBAAC,WAAI,IAAC,IAAI,EAAC,kBAAkB,GAAG,IACrB,EACb,wBAAC,UAAK,CAAC,MAAM,eACX,uBAAC,eAAM,IAAC,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,CAAC,SAAS,CAAC,EAAxB,CAAwB,uBAAiB,EAChE,uBAAC,eAAM,IACL,WAAW,EAAE,qBAAY,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAC9C,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,CAAC,SAAS,CAAC,EAAxB,CAAwB,uBAGhC,IACI,IACT,IACJ,CACP,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":";;;;;AACA,sCAAmC;AACnC,iCAAiC;AACjC,iDAAsB;AACtB,+CAAkD;AAClD,kCAA+B;AAE/B,MAAM,IAAI,GAAuB;IAC/B,SAAS,EAAE,UAAK;IAChB,KAAK,EAAE,qBAAqB;IAC5B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,oDAAoD;YACjE,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;aAChB;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE;gBACP,OAAO,EAAE,IAAI;aACd;SACF;QACD,aAAa,EAAE;YACb,WAAW,EACT,2FAA2F;YAC7F,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC5B,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;QAElD,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,eAAe,EAAE,WAAW,EAAE,aACnE,uBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,2BAAqB,EAEpE,wBAAC,UAAK,IACJ,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,EACtC,aAAa,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAEhD,wBAAC,UAAK,CAAC,MAAM,eACX,4DAAuB,EACvB,yEAAoC,IACvB,EACf,wBAAC,UAAK,CAAC,IAAI,yQAIiD,GAAG,EAC7D,uBAAC,WAAI,IAAC,IAAI,EAAC,kBAAkB,GAAG,IACrB,EACb,wBAAC,UAAK,CAAC,MAAM,eACX,uBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,uBAAiB,EAChE,uBAAC,eAAM,IACL,WAAW,EAAE,qBAAY,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,uBAGhC,IACI,IACT,IACJ,CACP,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/cjs/components/Modal/index.js

@@ -1,34 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = tslib_1.__importStar(require("react"));
-var styles_1 = require("./styles");
-var Icon_1 = require("../Icon");
-var Divider_1 = require("../Divider");
-var Modal = (0, react_1.forwardRef)(function Modal(_a, ref) {
-    var open = _a.open, toggle = _a.toggle, overlayStyles = _a.overlayStyles, children = _a.children, props = tslib_1.__rest(_a, ["open", "toggle", "overlayStyles", "children"]);
-    var modifiedChildren = react_1.default.Children.map(children, function (child) {
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("./styles");
+const Icon_1 = require("../Icon");
+const Divider_1 = require("../Divider");
+const Modal = (0, react_1.forwardRef)(function Modal({ open, toggle, overlayStyles, children, ...props }, ref) {
+    const modifiedChildren = react_1.default.Children.map(children, (child) => {
         if (react_1.default.isValidElement(child) && child.props.hasClose) {
             // @ts-ignore
-            return react_1.default.cloneElement(child, { toggle: toggle });
+            return react_1.default.cloneElement(child, { toggle });
         }
         return child;
     });
-    return ((0, jsx_runtime_1.jsx)(styles_1.ModalOverlay, { ref: ref, style: overlayStyles, open: open, onClick: function () { return toggle === null || toggle === void 0 ? void 0 : toggle(); }, children: (0, jsx_runtime_1.jsx)(styles_1.ModalContent, tslib_1.__assign({ onClick: function (e) { return e.stopPropagation(); } }, props, { children: modifiedChildren })) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ModalOverlay, { ref: ref, style: overlayStyles, open: open, onClick: () => toggle?.(), children: (0, jsx_runtime_1.jsx)(styles_1.ModalContent, { onClick: (e) => e.stopPropagation(), ...props, children: modifiedChildren }) }));
 });
-var Header = function (_a) {
-    var children = _a.children, hasClose = _a.hasClose, toggle = _a.toggle, props = tslib_1.__rest(_a, ["children", "hasClose", "toggle"]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ModalHeader, tslib_1.__assign({}, props, { children: [(0, jsx_runtime_1.jsx)(styles_1.ModalTitles, { children: children }), hasClose && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "close", onClick: function () { return toggle === null || toggle === void 0 ? void 0 : toggle(); } })] })));
+const Header = ({ children, hasClose, toggle, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ModalHeader, { ...props, children: [(0, jsx_runtime_1.jsx)(styles_1.ModalTitles, { children: children }), hasClose && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "close", onClick: () => toggle?.() })] }));
 };
-var Body = function (_a) {
-    var children = _a.children, props = tslib_1.__rest(_a, ["children"]);
-    return (0, jsx_runtime_1.jsx)(styles_1.ModalBody, tslib_1.__assign({}, props, { children: children }));
+const Body = ({ children, ...props }) => {
+    return (0, jsx_runtime_1.jsx)(styles_1.ModalBody, { ...props, children: children });
 };
-var Footer = function (_a) {
-    var children = _a.children, props = tslib_1.__rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.Divider, {}), (0, jsx_runtime_1.jsx)(styles_1.ModalFooter, tslib_1.__assign({}, props, { children: children }))] }));
+const Footer = ({ children, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.Divider, {}), (0, jsx_runtime_1.jsx)(styles_1.ModalFooter, { ...props, children: children })] }));
 };
-var ModalComponent = Object.assign(Modal, { Header: Header, Body: Body, Footer: Footer });
+const ModalComponent = Object.assign(Modal, { Header, Body, Footer });
 exports.default = ModalComponent;
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;;;AAAA,qDAA0C;AAC1C,mCAOkB;AAClB,gCAA+B;AAC/B,sCAAqC;AAQrC,IAAM,KAAK,GAAG,IAAA,kBAAU,EAAC,SAAS,KAAK,CACrC,EAA+D,EAC/D,GAA8B;IAD5B,IAAA,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,sBAAjD,+CAAmD,CAAF;IAGjD,IAAM,gBAAgB,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CACzC,QAAQ,EACR,UAAC,KAAsB;QACrB,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxD,aAAa;YACb,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;QAC/C,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CACF,CAAC;IAEF,OAAO,CACL,uBAAC,qBAAY,IACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,aAAa,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,cAAM,OAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,EAAV,CAAU,YAEzB,uBAAC,qBAAY,qBAAC,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,eAAe,EAAE,EAAnB,CAAmB,IAAM,KAAK,cACzD,gBAAgB,IACJ,GACF,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAOH,IAAM,MAAM,GAAG,UAAC,EAA0D;IAAxD,IAAA,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAK,KAAK,sBAAtC,kCAAwC,CAAF;IACpD,OAAO,CACL,wBAAC,oBAAW,uBAAK,KAAK,eACpB,uBAAC,oBAAW,cAAE,QAAQ,GAAe,EACpC,QAAQ,IAAI,uBAAC,WAAI,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,cAAM,OAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,EAAV,CAAU,GAAI,KACjD,CACf,CAAC;AACJ,CAAC,CAAC;AAIF,IAAM,IAAI,GAAG,UAAC,EAAsC;IAApC,IAAA,QAAQ,cAAA,EAAK,KAAK,sBAApB,YAAsB,CAAF;IAChC,OAAO,uBAAC,kBAAS,uBAAK,KAAK,cAAG,QAAQ,IAAa,CAAC;AACtD,CAAC,CAAC;AAIF,IAAM,MAAM,GAAG,UAAC,EAAwC;IAAtC,IAAA,QAAQ,cAAA,EAAK,KAAK,sBAApB,YAAsB,CAAF;IAClC,OAAO,CACL,6DACE,uBAAC,iBAAO,KAAG,EACX,uBAAC,oBAAW,uBAAK,KAAK,cAAG,QAAQ,IAAe,IAC/C,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,QAAA,EAAE,IAAI,MAAA,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;AAEtE,kBAAe,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;;;AAAA,uDAA0C;AAC1C,qCAOkB;AAClB,kCAA+B;AAC/B,wCAAqC;AAQrC,MAAM,KAAK,GAAG,IAAA,kBAAU,EAAC,SAAS,KAAK,CACrC,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc,EAC/D,GAA8B;IAE9B,MAAM,gBAAgB,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CACzC,QAAQ,EACR,CAAC,KAAsB,EAAE,EAAE;QACzB,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxD,aAAa;YACb,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAC/C,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CACF,CAAC;IAEF,OAAO,CACL,uBAAC,qBAAY,IACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,aAAa,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,YAEzB,uBAAC,qBAAY,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,KAAM,KAAK,YACzD,gBAAgB,GACJ,GACF,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAOH,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE;IAC5E,OAAO,CACL,wBAAC,oBAAW,OAAK,KAAK,aACpB,uBAAC,oBAAW,cAAE,QAAQ,GAAe,EACpC,QAAQ,IAAI,uBAAC,WAAI,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,GAAI,IACjD,CACf,CAAC;AACJ,CAAC,CAAC;AAIF,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE;IACtD,OAAO,uBAAC,kBAAS,OAAK,KAAK,YAAG,QAAQ,GAAa,CAAC;AACtD,CAAC,CAAC;AAIF,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE;IAC1D,OAAO,CACL,6DACE,uBAAC,iBAAO,KAAG,EACX,uBAAC,oBAAW,OAAK,KAAK,YAAG,QAAQ,GAAe,IAC/C,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;AAEtE,kBAAe,cAAc,CAAC"}

package/dist/cjs/components/Modal/styles.js

@@ -1,40 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalFooter = exports.ModalBody = exports.ModalTitles = exports.ModalHeader = exports.ModalContent = exports.ModalOverlay = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100dvw;\n  height: 100dvh;\n  padding: ", ";\n  background-color: transparent;\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n  backdrop-filter: blur(2px);\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100dvw;\n  height: 100dvh;\n  padding: ", ";\n  background-color: transparent;\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n  backdrop-filter: blur(2px);\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.m;
-}, function (_a) {
-    var open = _a.open;
-    return (open ? "flex" : "none");
-});
-exports.ModalContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  min-width: fit-content;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  min-width: fit-content;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.s;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.radius.m;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shadows.default;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.s;
-});
-exports.ModalHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
-exports.ModalTitles = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n\n  h1 {\n    color: ", ";\n    font-size: 22px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 28px;\n  }\n\n  h2 {\n    color: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n\n  h1 {\n    color: ", ";\n    font-size: 22px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 28px;\n  }\n\n  h2 {\n    color: ", ";\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.darker;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.dark;
-});
-exports.ModalBody = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
-exports.ModalFooter = styled_components_1.default.div(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  gap: ", ";\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  gap: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.xs;
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.ModalOverlay = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100dvw;
+  height: 100dvh;
+  padding: ${({ theme }) => theme.spacing.m};
+  background-color: transparent;
+  display: ${({ open }) => (open ? "flex" : "none")};
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(2px);
+`;
+exports.ModalContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.s};
+  background-color: white;
+  border-radius: ${({ theme }) => theme.radius.m};
+  box-shadow: ${({ theme }) => theme.shadows.default};
+  padding: ${({ theme }) => theme.spacing.s};
+  width: 100%;
+  height: 100%;
+  min-width: fit-content;
+`;
+exports.ModalHeader = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  svg {
+    cursor: pointer;
+  }
+`;
+exports.ModalTitles = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  h1 {
+    color: ${({ theme }) => theme.colors.neutral.darker};
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+  }
+
+  h2 {
+    color: ${({ theme }) => theme.colors.neutral.dark};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+  }
+`;
+exports.ModalBody = styled_components_1.default.div `
+  flex-grow: 1;
+`;
+exports.ModalFooter = styled_components_1.default.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: ${({ theme }) => theme.spacing.xs};
+`;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/components/Modal/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Modal/styles.ts"],"names":[],"mappings":";;;;AAAA,gFAAuC;AAM1B,QAAA,YAAY,GAAG,2BAAM,CAAC,GAAG,wTAAmB,+FAM5C,EAA8B,kDAE9B,EAAsC,wFAIlD,KANY,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EAE9B,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;AAAxB,CAAwB,EAIjD;AAEW,QAAA,YAAY,GAAG,2BAAM,CAAC,GAAG,iSAAA,wDAG7B,EAA8B,kDAEpB,EAA6B,mBAChC,EAAoC,gBACvC,EAA8B,iEAI1C,KARQ,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EAEpB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,CAAC;AAAd,CAAc,EAChC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,OAAO;AAArB,CAAqB,EACvC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EAIzC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,sMAAA,2HAQpC,KAAC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,uaAAA,uFAMxB,EAA0C,6HAQ1C,EAAwC,oIAOpD,KAfY,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAQ1C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAAzB,CAAyB,EAOnD;AAEW,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,gGAAA,qBAElC,KAAC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,6IAAA,2DAG5B,EAA+B,KACvC,KADQ,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,EAAE;AAAhB,CAAgB,EACtC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Modal/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAuC;AAM1B,QAAA,YAAY,GAAG,2BAAM,CAAC,GAAG,CAAmB;;;;;;aAM5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;;aAE9B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;CAIlD,CAAC;AAEW,QAAA,YAAY,GAAG,2BAAM,CAAC,GAAG,CAAA;;;SAG7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;;mBAEpB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBAChC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;aACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;;;;CAI1C,CAAC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;CAQpC,CAAC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;aAMxB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;;;;;;;;aAQ1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;;;;CAOpD,CAAC;AAEW,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAElC,CAAC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,CAAA;;;SAG5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;CACvC,CAAC"}

package/dist/cjs/components/NotificationBanner/NotificationBanner.stories.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Example = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var _1 = require(".");
-var meta = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _1 = require(".");
+const meta = {
     component: _1.NotificationBanner,
     title: "Design System/NotificationBanner",
     argTypes: {

package/dist/cjs/components/NotificationBanner/NotificationBanner.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBanner.stories.js","sourceRoot":"","sources":["../../../../src/components/NotificationBanner/NotificationBanner.stories.tsx"],"names":[],"mappings":";;;;AACA,sBAAuC;AAEvC,IAAM,IAAI,GAAoC;IAC5C,SAAS,EAAE,qBAAkB;IAC7B,KAAK,EAAE,kCAAkC;IACzC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC;aACjD;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,yDAAyD;YACtE,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,oCAAoC;YACjD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;aAChB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EACT,gEAAgE;YAClE,MAAM,EAAE,SAAS;SAClB;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,CACR,4CACE,oDAAe,EACf,oEAAyB,IACrB,CACP;KACF;CACF,CAAC"}
+{"version":3,"file":"NotificationBanner.stories.js","sourceRoot":"","sources":["../../../../src/components/NotificationBanner/NotificationBanner.stories.tsx"],"names":[],"mappings":";;;;AACA,wBAAuC;AAEvC,MAAM,IAAI,GAAoC;IAC5C,SAAS,EAAE,qBAAkB;IAC7B,KAAK,EAAE,kCAAkC;IACzC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC;aACjD;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,yDAAyD;YACtE,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,oCAAoC;YACjD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;aAChB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EACT,gEAAgE;YAClE,MAAM,EAAE,SAAS;SAClB;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,CACR,4CACE,oDAAe,EACf,oEAAyB,IACrB,CACP;KACF;CACF,CAAC"}

package/dist/cjs/components/NotificationBanner/index.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationBanner = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styles_1 = require("./styles");
-var Icon_1 = require("../Icon");
-var BANNER_OPTIONS = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("./styles");
+const Icon_1 = require("../Icon");
+const BANNER_OPTIONS = {
     success: {
         color: "green",
         icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check" }),
@@ -24,8 +23,7 @@ var BANNER_OPTIONS = {
         icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "info" }),
     },
 };
-exports.NotificationBanner = (0, react_1.forwardRef)(function NotificationBanner(_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? "info" : _b, onClose = _a.onClose, isOpen = _a.isOpen, children = _a.children, props = tslib_1.__rest(_a, ["variant", "onClose", "isOpen", "children"]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.NotificationBannerWrapper, tslib_1.__assign({ ref: ref, color: BANNER_OPTIONS[variant].color, isOpen: isOpen }, props, { children: [BANNER_OPTIONS[variant].icon, (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { children: children }), !!onClose && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: "close-icon", icon: "close", onClick: function () { return onClose(); } }))] })));
+exports.NotificationBanner = (0, react_1.forwardRef)(function NotificationBanner({ variant = "info", onClose, isOpen, children, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.NotificationBannerWrapper, { ref: ref, color: BANNER_OPTIONS[variant].color, isOpen: isOpen, ...props, children: [BANNER_OPTIONS[variant].icon, (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { children: children }), !!onClose && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: "close-icon", icon: "close", onClick: () => onClose() }))] }));
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/NotificationBanner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/NotificationBanner/index.tsx"],"names":[],"mappings":";;;;;AAAA,+BAA0C;AAC1C,mCAAqE;AACrE,gCAA+B;AAQ/B,IAAM,cAAc,GAAG;IACrB,OAAO,EAAE;QACP,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,OAAO,GAAG;KAC5B;IACD,OAAO,EAAE;QACP,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,SAAS,GAAG;KAC9B;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,aAAa,GAAG;KAClC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,MAAM,GAAG;KAC3B;CACF,CAAC;AAEW,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EAAC,SAAS,kBAAkB,CACtE,EAM0B,EAC1B,GAA8B;IAN5B,IAAA,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,OAAO,aAAA,EACP,MAAM,YAAA,EACN,QAAQ,cAAA,EACL,KAAK,sBALV,4CAMC,CADS;IAIV,OAAO,CACL,wBAAC,kCAAyB,qBACxB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,KAAK,EACpC,MAAM,EAAE,MAAM,IACV,KAAK,eAER,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAC7B,uBAAC,uBAAc,cAAE,QAAQ,GAAkB,EAC1C,CAAC,CAAC,OAAO,IAAI,CACZ,uBAAC,WAAI,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,cAAM,OAAA,OAAO,EAAE,EAAT,CAAS,GAAI,CACvE,KACyB,CAC7B,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/NotificationBanner/index.tsx"],"names":[],"mappings":";;;;AAAA,iCAA0C;AAC1C,qCAAqE;AACrE,kCAA+B;AAQ/B,MAAM,cAAc,GAAG;IACrB,OAAO,EAAE;QACP,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,OAAO,GAAG;KAC5B;IACD,OAAO,EAAE;QACP,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,SAAS,GAAG;KAC9B;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,aAAa,GAAG;KAClC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,MAAM,GAAG;KAC3B;CACF,CAAC;AAEW,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EAAC,SAAS,kBAAkB,CACtE,EACE,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACgB,EAC1B,GAA8B;IAE9B,OAAO,CACL,wBAAC,kCAAyB,IACxB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,KAAK,EACpC,MAAM,EAAE,MAAM,KACV,KAAK,aAER,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAC7B,uBAAC,uBAAc,cAAE,QAAQ,GAAkB,EAC1C,CAAC,CAAC,OAAO,IAAI,CACZ,uBAAC,WAAI,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,GAAI,CACvE,IACyB,CAC7B,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/cjs/components/NotificationBanner/styles.js

@@ -1,38 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentWrapper = exports.NotificationBannerWrapper = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.NotificationBannerWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  display: flex;\n  gap: ", ";\n  align-items: flex-start;\n  transition: all 0.3s;\n\n  color: ", ";\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n\n  svg {\n    flex-shrink: 0;\n    fill: ", ";\n  }\n\n  .close-icon {\n    cursor: pointer;\n    fill: ", ";\n    height: 18px;\n  }\n\n  transform-origin: top;\n  ", "\n"], ["\n  padding: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  display: flex;\n  gap: ", ";\n  align-items: flex-start;\n  transition: all 0.3s;\n\n  color: ", ";\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n\n  svg {\n    flex-shrink: 0;\n    fill: ", ";\n  }\n\n  .close-icon {\n    cursor: pointer;\n    fill: ", ";\n    height: 18px;\n  }\n\n  transform-origin: top;\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.s;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.radius.m;
-}, function (_a) {
-    var theme = _a.theme, color = _a.color;
-    return theme.colors[color].lightest + "66";
-}, function (_a) {
-    var theme = _a.theme, color = _a.color;
-    return theme.colors[color].lighter;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.s;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.dark;
-}, function (_a) {
-    var theme = _a.theme, color = _a.color;
-    return theme.colors[color].default;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.dark;
-}, function (_a) {
-    var isOpen = _a.isOpen;
-    return isOpen
-        ? "pointer-events: auto; transform: scaleY(1);"
-        : " pointer-events: none; transform: scaleY(0);";
-});
-exports.ContentWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
-var templateObject_1, templateObject_2;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.NotificationBannerWrapper = styled_components_1.default.div `
+  padding: ${({ theme }) => theme.spacing.s};
+  border-radius: ${({ theme }) => theme.radius.m};
+  background-color: ${({ theme, color }) => theme.colors[color].lightest + "66"};
+  border: 1px solid
+    ${({ theme, color }) => theme.colors[color].lighter};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.s};
+  align-items: flex-start;
+  transition: all 0.3s;
+
+  color: ${({ theme }) => theme.colors.neutral.dark};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+
+  svg {
+    flex-shrink: 0;
+    fill: ${({ theme, color }) => theme.colors[color].default};
+  }
+
+  .close-icon {
+    cursor: pointer;
+    fill: ${({ theme }) => theme.colors.neutral.dark};
+    height: 18px;
+  }
+
+  transform-origin: top;
+  ${({ isOpen }) => isOpen
+    ? "pointer-events: auto; transform: scaleY(1);"
+    : " pointer-events: none; transform: scaleY(0);"}
+`;
+exports.ContentWrapper = styled_components_1.default.div `
+  flex-grow: 1;
+`;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/components/NotificationBanner/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/NotificationBanner/styles.ts"],"names":[],"mappings":";;;;AAAA,gFAAuC;AAO1B,QAAA,yBAAyB,GAAG,2BAAM,CAAC,GAAG,6hBAAgC,eACtE,EAA8B,sBACxB,EAA6B,yBAC1B,EAC8C,8BAE9D,EACwD,8BAErD,EAA8B,qEAI5B,EAAwC,qIAQvC,EACkD,6DAKlD,EAAwC,2DAKhD,EAGkD,IACrD,KAnCY,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EACxB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,CAAC;AAAd,CAAc,EAC1B,UAAC,EAAgB;QAAd,KAAK,WAAA,EAAE,KAAK,WAAA;IACjC,OAAA,KAAK,CAAC,MAAM,CAAC,KAAkC,CAAC,CAAC,QAAQ,GAAG,IAAI;AAAhE,CAAgE,EAE9D,UAAC,EAAgB;QAAd,KAAK,WAAA,EAAE,KAAK,WAAA;IACf,OAAA,KAAK,CAAC,MAAM,CAAC,KAAkC,CAAC,CAAC,OAAO;AAAxD,CAAwD,EAErD,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,CAAC;AAAf,CAAe,EAI5B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAAzB,CAAyB,EAQvC,UAAC,EAAgB;QAAd,KAAK,WAAA,EAAE,KAAK,WAAA;IACrB,OAAA,KAAK,CAAC,MAAM,CAAC,KAAkC,CAAC,CAAC,OAAO;AAAxD,CAAwD,EAKlD,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAAzB,CAAyB,EAKhD,UAAC,EAAU;QAAR,MAAM,YAAA;IACT,OAAA,MAAM;QACJ,CAAC,CAAC,6CAA6C;QAC/C,CAAC,CAAC,8CAA8C;AAFlD,CAEkD,EACpD;AAEW,QAAA,cAAc,GAAG,2BAAM,CAAC,GAAG,gGAAA,qBAEvC,KAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/NotificationBanner/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAuC;AAO1B,QAAA,yBAAyB,GAAG,2BAAM,CAAC,GAAG,CAAgC;aACtE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;mBACxB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;sBAC1B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CACvC,KAAK,CAAC,MAAM,CAAC,KAAkC,CAAC,CAAC,QAAQ,GAAG,IAAI;;MAE9D,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CACrB,KAAK,CAAC,MAAM,CAAC,KAAkC,CAAC,CAAC,OAAO;;SAErD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;;;;WAI5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;;;;;YAQvC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAC3B,KAAK,CAAC,MAAM,CAAC,KAAkC,CAAC,CAAC,OAAO;;;;;YAKlD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;;IAKhD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,MAAM;IACJ,CAAC,CAAC,6CAA6C;IAC/C,CAAC,CAAC,8CAA8C;CACrD,CAAC;AAEW,QAAA,cAAc,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAEvC,CAAC"}

package/dist/cjs/components/SingleTab/SingleTab.stories.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Example = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var _1 = require(".");
-var Icon_1 = require("../Icon");
-var consts_1 = require("../../utils/consts");
-var meta = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _1 = require(".");
+const Icon_1 = require("../Icon");
+const icons_1 = require("../../utils/icons");
+const meta = {
     component: _1.SingleTab,
     title: "Design System/SingleTab",
     argTypes: {
@@ -23,7 +23,7 @@ var meta = {
             description: "Ícone a ser exibido no início do botão. Se deixado em branco, nenhum ícone será exibido.",
             control: {
                 type: "select",
-                options: consts_1.ICON_NAMES,
+                options: Object.keys(icons_1.icons),
             },
         },
         variant: {

package/dist/cjs/components/SingleTab/SingleTab.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleTab.stories.js","sourceRoot":"","sources":["../../../../src/components/SingleTab/SingleTab.stories.tsx"],"names":[],"mappings":";;;;AACA,sBAA8B;AAC9B,gCAA+B;AAC/B,6CAAgD;AAEhD,IAAM,IAAI,GAA2B;IACnC,SAAS,EAAE,YAAS;IACpB,KAAK,EAAE,yBAAyB;IAChC,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,WAAW,EAAE,sDAAsD;SACpE;QACD,OAAO,EAAE;YACP,WAAW,EACT,gFAAgF;YAClF,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,aAAa,EAAE,KAAK;aACrB;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EACT,0FAA0F;YAC5F,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,mBAAU;aACpB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC;aACpC;SACF;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,aAAa;QACvB,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,MAAM,GAAG;QAC1B,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,SAAS;KACnB;CACF,CAAC"}
+{"version":3,"file":"SingleTab.stories.js","sourceRoot":"","sources":["../../../../src/components/SingleTab/SingleTab.stories.tsx"],"names":[],"mappings":";;;;AACA,wBAA8B;AAC9B,kCAA+B;AAC/B,6CAA0C;AAE1C,MAAM,IAAI,GAA2B;IACnC,SAAS,EAAE,YAAS;IACpB,KAAK,EAAE,yBAAyB;IAChC,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,WAAW,EAAE,sDAAsD;SACpE;QACD,OAAO,EAAE;YACP,WAAW,EACT,gFAAgF;YAClF,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,aAAa,EAAE,KAAK;aACrB;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EACT,0FAA0F;YAC5F,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,aAAK,CAAC;aAC5B;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC;aACpC;SACF;KACF;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,aAAa;QACvB,IAAI,EAAE,uBAAC,WAAI,IAAC,IAAI,EAAC,MAAM,GAAG;QAC1B,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,SAAS;KACnB;CACF,CAAC"}

package/dist/cjs/components/SingleTab/index.js

@@ -1,17 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SingleTab = exports.TAB_OPTIONS = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styles_1 = require("./styles");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("./styles");
 exports.TAB_OPTIONS = {
     default: styles_1.Tab,
     transparent: styles_1.TransparentTab,
 };
-exports.SingleTab = (0, react_1.forwardRef)(function SingleTab(_a, ref) {
-    var icon = _a.icon, counter = _a.counter, isSelected = _a.isSelected, children = _a.children, _b = _a.variant, variant = _b === void 0 ? "default" : _b, props = tslib_1.__rest(_a, ["icon", "counter", "isSelected", "children", "variant"]);
-    var TabToRender = exports.TAB_OPTIONS[variant];
-    return ((0, jsx_runtime_1.jsxs)(TabToRender, tslib_1.__assign({ ref: ref, isSelected: isSelected }, props, { children: [icon, children, !isNaN(Number(counter)) && (0, jsx_runtime_1.jsx)(styles_1.NumberTag, { children: counter })] })));
+exports.SingleTab = (0, react_1.forwardRef)(function SingleTab({ icon, counter, isSelected, children, variant = "default", ...props }, ref) {
+    const TabToRender = exports.TAB_OPTIONS[variant];
+    return ((0, jsx_runtime_1.jsxs)(TabToRender, { ref: ref, isSelected: isSelected, ...props, children: [icon, children, !isNaN(Number(counter)) && (0, jsx_runtime_1.jsx)(styles_1.NumberTag, { children: counter })] }));
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/SingleTab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SingleTab/index.tsx"],"names":[],"mappings":";;;;;AAAA,+BAA0C;AAC1C,mCAA0D;AAS7C,QAAA,WAAW,GAAG;IACzB,OAAO,EAAE,YAAG;IACZ,WAAW,EAAE,uBAAc;CAC5B,CAAC;AAEW,QAAA,SAAS,GAAG,IAAA,kBAAU,EAAC,SAAS,SAAS,CACpD,EAOiB,EACjB,GAAiC;IAP/B,IAAA,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,KAAK,sBANV,wDAOC,CADS;IAIV,IAAM,WAAW,GAAG,mBAAW,CAAC,OAAO,CAAC,CAAC;IAEzC,OAAO,CACL,wBAAC,WAAW,qBAAC,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,IAAM,KAAK,eACrD,IAAI,EACJ,QAAQ,EACR,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,uBAAC,kBAAS,cAAE,OAAO,GAAa,KAChD,CACf,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SingleTab/index.tsx"],"names":[],"mappings":";;;;AAAA,iCAA0C;AAC1C,qCAA0D;AAS7C,QAAA,WAAW,GAAG;IACzB,OAAO,EAAE,YAAG;IACZ,WAAW,EAAE,uBAAc;CAC5B,CAAC;AAEW,QAAA,SAAS,GAAG,IAAA,kBAAU,EAAC,SAAS,SAAS,CACpD,EACE,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,WAAW,GAAG,mBAAW,CAAC,OAAO,CAAC,CAAC;IAEzC,OAAO,CACL,wBAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,KAAM,KAAK,aACrD,IAAI,EACJ,QAAQ,EACR,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,uBAAC,kBAAS,cAAE,OAAO,GAAa,IAChD,CACf,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/cjs/components/SingleTab/styles.js

@@ -1,63 +1,104 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransparentTab = exports.NumberTag = exports.Tab = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.Tab = styled_components_1.default.button(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n  border: none;\n  background-color: ", ";\n  border-radius: ", ";\n  width: fit-content;\n  cursor: pointer;\n\n  color: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n\n  svg {\n    fill: ", ";\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &:disabled {\n    cursor: default;\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n  border: none;\n  background-color: ", ";\n  border-radius: ", ";\n  width: fit-content;\n  cursor: pointer;\n\n  color: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: normal;\n\n  svg {\n    fill: ", ";\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &:disabled {\n    cursor: default;\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.xs;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.xxs + " " + theme.spacing.xs;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.lightest;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.radius.m + " " + theme.radius.m + " 0 0";
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.dark;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.family.default;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.dark;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.lighter;
-}, function (_a) {
-    var isSelected = _a.isSelected, theme = _a.theme;
-    return isSelected &&
-        "\n    background-color: #fff;\n    color: ".concat(theme.colors.neutral.darker, ";\n\n    svg {\n        fill: ").concat(theme.colors.neutral.darker, ";\n    }\n    ");
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.light;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.lighter;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.light;
-});
-exports.NumberTag = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  min-width: 19px;\n\n  color: #fff;\n  font-size: 11px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 11px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  min-width: 19px;\n\n  color: #fff;\n  font-size: 11px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 11px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.light;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.radius.s;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.xxs;
-});
-exports.TransparentTab = (0, styled_components_1.default)(exports.Tab)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  background-color: transparent;\n  position: relative;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    bottom: 0px;\n    left: 50%;\n    height: 2px;\n    width: 0px;\n    background-color: ", ";\n    border-radius: 2px;\n    transition: all 0.2s;\n  }\n\n  &:hover {\n    background-color: transparent;\n  }\n\n  &:hover::after {\n    width: calc(100% - 16px);\n    left: 8px;\n  }\n\n  ", "\n"], ["\n  background-color: transparent;\n  position: relative;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    bottom: 0px;\n    left: 50%;\n    height: 2px;\n    width: 0px;\n    background-color: ", ";\n    border-radius: 2px;\n    transition: all 0.2s;\n  }\n\n  &:hover {\n    background-color: transparent;\n  }\n\n  &:hover::after {\n    width: calc(100% - 16px);\n    left: 8px;\n  }\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.default;
-}, function (_a) {
-    var isSelected = _a.isSelected, theme = _a.theme;
-    return isSelected &&
-        "\n        &::after {\n        width: calc(100% - 16px);\n        left: 8px;\n        background-color: ".concat(theme.colors.primary.default, ";\n        }\n    ");
-});
-var templateObject_1, templateObject_2, templateObject_3;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.Tab = styled_components_1.default.button `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xs};
+  padding: ${({ theme }) => theme.spacing.xxs + " " + theme.spacing.xs};
+  border: none;
+  background-color: ${({ theme }) => theme.colors.neutral.lightest};
+  border-radius: ${({ theme }) => theme.radius.m + " " + theme.radius.m + " 0 0"};
+  width: fit-content;
+  cursor: pointer;
+
+  color: ${({ theme }) => theme.colors.neutral.dark};
+  font-family: ${({ theme }) => theme.typography.family.default};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+
+  svg {
+    fill: ${({ theme }) => theme.colors.neutral.dark};
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral.lighter};
+  }
+
+  ${({ isSelected, theme }) => isSelected &&
+    `
+    background-color: #fff;
+    color: ${theme.colors.neutral.darker};
+
+    svg {
+        fill: ${theme.colors.neutral.darker};
+    }
+    `}
+
+  &:disabled {
+    cursor: default;
+    color: ${({ theme }) => theme.colors.neutral.light};
+    background-color: ${({ theme }) => theme.colors.neutral.lighter};
+
+    svg {
+      fill: ${({ theme }) => theme.colors.neutral.light};
+    }
+  }
+`;
+exports.NumberTag = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.colors.neutral.light};
+  border-radius: ${({ theme }) => theme.radius.s};
+  padding: ${({ theme }) => theme.spacing.xxs};
+  min-width: 19px;
+
+  color: #fff;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 11px;
+`;
+exports.TransparentTab = (0, styled_components_1.default)(exports.Tab) `
+  background-color: transparent;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    height: 2px;
+    width: 0px;
+    background-color: ${({ theme }) => theme.colors.neutral.default};
+    border-radius: 2px;
+    transition: all 0.2s;
+  }
+
+  &:hover {
+    background-color: transparent;
+  }
+
+  &:hover::after {
+    width: calc(100% - 16px);
+    left: 8px;
+  }
+
+  ${({ isSelected, theme }) => isSelected &&
+    `
+        &::after {
+        width: calc(100% - 16px);
+        left: 8px;
+        background-color: ${theme.colors.primary.default};
+        }
+    `}
+`;
 //# sourceMappingURL=styles.js.map