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

package/dist/esm/components/FormItens/Switch/index.js

@@ -1,17 +1,15 @@
-import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { generateColorVariants } from "../../../utils/functions";
 import { SwitchArea, SwitchLabel } from "./styles";
 import { forwardRef, useMemo } from "react";
 import { Spinner } from "../../Spinner";
 import { useTheme } from "styled-components";
-export var Switch = forwardRef(function Switch(_a, ref) {
-    var label = _a.label, _b = _a.labelPosition, labelPosition = _b === void 0 ? "right" : _b, customColor = _a.customColor, isLoading = _a.isLoading, register = _a.register, props = __rest(_a, ["label", "labelPosition", "customColor", "isLoading", "register"]);
-    var theme = useTheme();
-    var colorVariants = customColor
-        ? useMemo(function () { return generateColorVariants(customColor); }, [customColor])
+export const Switch = forwardRef(function Switch({ label, labelPosition = "right", customColor, isLoading, register, ...props }, ref) {
+    const theme = useTheme();
+    const colorVariants = customColor
+        ? useMemo(() => generateColorVariants(customColor), [customColor])
         : undefined;
-    return (_jsxs(SwitchLabel, { labelPosition: labelPosition, children: [_jsx("input", __assign({ ref: ref, type: "checkbox" }, props, { disabled: isLoading || props.disabled }, register)), label && _jsx("span", { children: label }), _jsx(SwitchArea, { colorVariants: colorVariants, isLoading: isLoading, children: _jsx(Spinner, { size: 10, color: theme.colors.neutral.lighter, style: {
+    return (_jsxs(SwitchLabel, { labelPosition: labelPosition, children: [_jsx("input", { ref: ref, type: "checkbox", ...props, disabled: isLoading || props.disabled, ...register }), label && _jsx("span", { children: label }), _jsx(SwitchArea, { colorVariants: colorVariants, isLoading: isLoading, children: _jsx(Spinner, { size: 10, color: theme.colors.neutral.lighter, style: {
                         position: "absolute",
                         left: 14,
                         top: 4,

package/dist/esm/components/FormItens/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Switch/index.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAU7C,MAAM,CAAC,IAAM,MAAM,GAAG,UAAU,CAAC,SAAS,MAAM,CAC9C,EAOc,EACd,GAAgC;IAP9B,IAAA,KAAK,WAAA,EACL,qBAAuB,EAAvB,aAAa,mBAAG,OAAO,KAAA,EACvB,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,QAAQ,cAAA,EACL,KAAK,cANV,kEAOC,CADS;IAIV,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,IAAM,aAAa,GAAG,WAAW;QAC/B,CAAC,CAAC,OAAO,CAAC,cAAM,OAAA,qBAAqB,CAAC,WAAW,CAAC,EAAlC,CAAkC,EAAE,CAAC,WAAW,CAAC,CAAC;QAClE,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,MAAC,WAAW,IAAC,aAAa,EAAE,aAAa,aACvC,yBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,IACX,KAAK,IACT,QAAQ,EAAE,SAAS,IAAI,KAAK,CAAC,QAAQ,IACjC,QAAQ,EACZ,EACD,KAAK,IAAI,yBAAO,KAAK,GAAQ,EAC9B,KAAC,UAAU,IAAC,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,YAC5D,KAAC,OAAO,IACN,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EACnC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,EAAE;wBACR,GAAG,EAAE,CAAC;wBACN,UAAU,EAAE,yCAAyC;wBACrD,MAAM,EAAE,CAAC;wBACT,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3B,GACD,GACS,IACD,CACf,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Switch/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAU7C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,SAAS,MAAM,CAC9C,EACE,KAAK,EACL,aAAa,GAAG,OAAO,EACvB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACI,EACd,GAAgC;IAEhC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,WAAW;QAC/B,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;QAClE,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,MAAC,WAAW,IAAC,aAAa,EAAE,aAAa,aACvC,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,KACX,KAAK,EACT,QAAQ,EAAE,SAAS,IAAI,KAAK,CAAC,QAAQ,KACjC,QAAQ,GACZ,EACD,KAAK,IAAI,yBAAO,KAAK,GAAQ,EAC9B,KAAC,UAAU,IAAC,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,YAC5D,KAAC,OAAO,IACN,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EACnC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,EAAE;wBACR,GAAG,EAAE,CAAC;wBACN,UAAU,EAAE,yCAAyC;wBACrD,MAAM,EAAE,CAAC;wBACT,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3B,GACD,GACS,IACD,CACf,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/esm/components/FormItens/Switch/styles.js

@@ -1,49 +1,109 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-import { LABEL_POSITIONS, spacing } from "../../../utils/consts";
-export var SwitchLabel = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  flex-direction: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n\n  &:has(> input[type=\"checkbox\"]:focus-visible) {\n    outline: 1px solid black;\n    outline-offset: 2px;\n  }\n\n  span {\n    color: ", ";\n    font-family: Poppins;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px; /* 142.857% */\n    letter-spacing: 0.1px;\n    transition: all 0.3s;\n  }\n\n  &:has(> input[type=\"checkbox\"]:disabled) {\n    cursor: default;\n\n    span {\n      color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  flex-direction: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n\n  &:has(> input[type=\"checkbox\"]:focus-visible) {\n    outline: 1px solid black;\n    outline-offset: 2px;\n  }\n\n  span {\n    color: ", ";\n    font-family: Poppins;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px; /* 142.857% */\n    letter-spacing: 0.1px;\n    transition: all 0.3s;\n  }\n\n  &:has(> input[type=\"checkbox\"]:disabled) {\n    cursor: default;\n\n    span {\n      color: ", ";\n    }\n  }\n"])), spacing.xs, function (_a) {
-    var labelPosition = _a.labelPosition;
-    return LABEL_POSITIONS[labelPosition];
-}, spacing.xxs, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.darker;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.light;
-});
-export var SwitchArea = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-shrink: 0;\n  position: relative;\n  width: 40px;\n  height: 20px;\n  border-radius: 20px;\n  transition: all 0.3s;\n  background-color: ", ";\n  border: 1px solid transparent;\n\n  label:hover > & {\n    background-color: ", ";\n  }\n\n  // Switch button\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background-color: white;\n    transition: all 0.3s;\n    top: 2px;\n    left: ", ";\n  }\n\n  // Checked\n  input[type=\"checkbox\"]:checked ~ & {\n    background-color: ", ";\n\n    label:hover > & {\n      background-color: ", ";\n    }\n\n    &::after {\n      left: ", ";\n    }\n  }\n\n  // Disabled\n  input[type=\"checkbox\"]:disabled ~ & {\n    background-color: #fff;\n    border-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  //Disabled and checked\n  input[type=\"checkbox\"]:disabled:checked ~ & {\n    background-color: ", ";\n    border-color: transparent;\n\n    label:hover > & {\n      background-color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"], ["\n  flex-shrink: 0;\n  position: relative;\n  width: 40px;\n  height: 20px;\n  border-radius: 20px;\n  transition: all 0.3s;\n  background-color: ", ";\n  border: 1px solid transparent;\n\n  label:hover > & {\n    background-color: ", ";\n  }\n\n  // Switch button\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background-color: white;\n    transition: all 0.3s;\n    top: 2px;\n    left: ", ";\n  }\n\n  // Checked\n  input[type=\"checkbox\"]:checked ~ & {\n    background-color: ", ";\n\n    label:hover > & {\n      background-color: ", ";\n    }\n\n    &::after {\n      left: ", ";\n    }\n  }\n\n  // Disabled\n  input[type=\"checkbox\"]:disabled ~ & {\n    background-color: #fff;\n    border-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  //Disabled and checked\n  input[type=\"checkbox\"]:disabled:checked ~ & {\n    background-color: ", ";\n    border-color: transparent;\n\n    label:hover > & {\n      background-color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.default;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.dark;
-}, function (_a) {
-    var isLoading = _a.isLoading;
-    return (isLoading ? "12px" : "2px");
-}, function (_a) {
-    var colorVariants = _a.colorVariants, theme = _a.theme;
-    return (colorVariants === null || colorVariants === void 0 ? void 0 : colorVariants.default) || theme.colors.green.default;
-}, function (_a) {
-    var colorVariants = _a.colorVariants, theme = _a.theme;
-    return (colorVariants === null || colorVariants === void 0 ? void 0 : colorVariants.dark) || theme.colors.green.dark;
-}, function (_a) {
-    var isLoading = _a.isLoading;
-    return isLoading ? "12px" : "22px";
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.light;
-}, 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.lighter;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.light;
-});
-var templateObject_1, templateObject_2;
+import { LABEL_POSITIONS } from "../../../utils/consts";
+export const SwitchLabel = styled.label `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xs};
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  flex-direction: ${({ labelPosition }) => LABEL_POSITIONS[labelPosition]};
+  border-radius: ${({ theme }) => theme.spacing.xxs};
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  &:has(> input[type="checkbox"]:focus-visible) {
+    outline: 1px solid black;
+    outline-offset: 2px;
+  }
+
+  span {
+    color: ${({ theme }) => theme.colors.neutral.darker};
+    font-family: Poppins;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px; /* 142.857% */
+    letter-spacing: 0.1px;
+    transition: all 0.3s;
+  }
+
+  &:has(> input[type="checkbox"]:disabled) {
+    cursor: default;
+
+    span {
+      color: ${({ theme }) => theme.colors.neutral.light};
+    }
+  }
+`;
+export const SwitchArea = styled.div `
+  flex-shrink: 0;
+  position: relative;
+  width: 40px;
+  height: 20px;
+  border-radius: 20px;
+  transition: all 0.3s;
+  background-color: ${({ theme }) => theme.colors.neutral.default};
+  border: 1px solid transparent;
+
+  label:hover > & {
+    background-color: ${({ theme }) => theme.colors.neutral.dark};
+  }
+
+  // Switch button
+  &::after {
+    content: "";
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: white;
+    transition: all 0.3s;
+    top: 2px;
+    left: ${({ isLoading }) => (isLoading ? "12px" : "2px")};
+  }
+
+  // Checked
+  input[type="checkbox"]:checked ~ & {
+    background-color: ${({ colorVariants, theme }) => colorVariants?.default || theme.colors.green.default};
+
+    label:hover > & {
+      background-color: ${({ colorVariants, theme }) => colorVariants?.dark || theme.colors.green.dark};
+    }
+
+    &::after {
+      left: ${({ isLoading }) => isLoading ? "12px" : "22px"};
+    }
+  }
+
+  // Disabled
+  input[type="checkbox"]:disabled ~ & {
+    background-color: #fff;
+    border-color: ${({ theme }) => theme.colors.neutral.light};
+
+    &::after {
+      background-color: ${({ theme }) => theme.colors.neutral.light};
+    }
+  }
+
+  //Disabled and checked
+  input[type="checkbox"]:disabled:checked ~ & {
+    background-color: ${({ theme }) => theme.colors.neutral.lighter};
+    border-color: transparent;
+
+    label:hover > & {
+      background-color: ${({ theme }) => theme.colors.neutral.lighter};
+    }
+
+    &::after {
+      background-color: ${({ theme }) => theme.colors.neutral.light};
+    }
+  }
+`;
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/FormItens/Switch/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Switch/styles.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAOjE,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,KAAK,qzBAAkB,6BAEhD,EAAU,kGAIC,EAAqD,sBACtD,EAAW,sRAiBjB,EAA0C,4SAcxC,EAAyC,iBAGvD,KAvCQ,OAAO,CAAC,EAAE,EAIC,UAAC,EAAiB;QAAf,aAAa,mBAAA;IAAO,OAAA,eAAe,CAAC,aAAa,CAAC;AAA9B,CAA8B,EACtD,OAAO,CAAC,GAAG,EAiBjB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAcxC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;AAA1B,CAA0B,CAGvD,CAAC;AAOF,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,GAAG,oqCAAiB,oJAO/B,EAA2C,oFAIzC,EAAwC,2OAapD,EAAgE,0FAKpD,EACkC,sDAGhC,EAC4B,0CAIxC,EACqB,4HAOf,EAAyC,+CAGnC,EAAyC,sHAM3C,EAA2C,sFAIzC,EAA2C,sDAI3C,EAAyC,iBAGlE,KA3DqB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAIzC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAAzB,CAAyB,EAapD,UAAC,EAA8B;QAA5B,SAAS,eAAA;IAAwB,OAAA,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;AAA5B,CAA4B,EAKpD,UAAC,EAAwB;QAAtB,aAAa,mBAAA,EAAE,KAAK,WAAA;IACzC,OAAA,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,KAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO;AAApD,CAAoD,EAGhC,UAAC,EAAwB;QAAtB,aAAa,mBAAA,EAAE,KAAK,WAAA;IACzC,OAAA,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,KAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;AAA9C,CAA8C,EAIxC,UAAC,EAA8B;QAA5B,SAAS,eAAA;IAClB,OAAA,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;AAA3B,CAA2B,EAOf,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;AAA1B,CAA0B,EAGnC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;AAA1B,CAA0B,EAM3C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAIzC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAI3C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;AAA1B,CAA0B,CAGlE,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAOxD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAkB;;SAEhD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;;;oBAIpB,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC;mBACtD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;;;;;;;;;;;;;;;;;aAiBtC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;;;;;;;;;;;;;;eAcxC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;;;CAGvD,CAAC;AAOF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAiB;;;;;;;sBAO/B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;;;;wBAIzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;;;;;;;;;;YAapD,CAAC,EAAE,SAAS,EAAmB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;wBAKpD,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE,CAC/C,aAAa,EAAE,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO;;;0BAGhC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE,CAC/C,aAAa,EAAE,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;;;;cAIxC,CAAC,EAAE,SAAS,EAAmB,EAAE,EAAE,CACzC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;;;;oBAOf,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;;;0BAGnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;;;;;;wBAM3C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;;;;0BAIzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;;;;0BAI3C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;;;CAGlE,CAAC"}

package/dist/esm/components/Icon/Icon.stories.js

@@ -5,11 +5,12 @@ import { icons } from "../../utils/icons";
 import { IconList, Item, SearchInput } from "./styles";
 import { defaultTheme } from "../../utils/consts";
 import { Subtitle } from "../StoriesComponents/styles";
-var meta = {
+const meta = {
     title: "Design System/Icon",
     component: Icon,
     parameters: {
-        componentSubtitle: (_jsxs(Subtitle, { children: ["Componente para renderizar os \u00EDcones do sistema.", _jsx("br", {}), " Na lista abaixo voc\u00EA pode pesquisar os \u00EDcones dispon\u00EDveis e copiar o c\u00F3digo para usar no seu projeto. Exemplo: Ao clicar no icone \"takeatIconFilled\" o c\u00F3digo", " ", "\n        <Icon icon=\"takeatIconFilled\" />", " ", "ser\u00E1 copiado para a \u00E1rea de transfer\u00EAncia."] })),
+        componentSubtitle: (_jsxs(Subtitle, { children: ["Componente para renderizar os \u00EDcones do sistema.", _jsx("br", {}), " Na lista abaixo voc\u00EA pode pesquisar os \u00EDcones dispon\u00EDveis e copiar o c\u00F3digo para usar no seu projeto. Exemplo: Ao clicar no icone \"takeatIconFilled\" o c\u00F3digo", " ", `
+        <Icon icon="takeatIconFilled" />`, " ", "ser\u00E1 copiado para a \u00E1rea de transfer\u00EAncia."] })),
     },
     argTypes: {
         icon: {
@@ -26,21 +27,19 @@ var meta = {
     },
 };
 export default meta;
-export var Example = {
+export const Example = {
     name: "Exemplo",
     args: {
         icon: "takeatIconFilled",
     },
 };
-export var List = {
+export const List = {
     name: "Lista de icones",
-    render: function () {
-        var _a = useState(""), search = _a[0], setSearch = _a[1];
-        return (_jsxs("div", { children: [_jsx(SearchInput, { placeholder: "Buscar", value: search, onChange: function (e) { return setSearch(e.target.value); } }), _jsx(IconList, { children: Object.keys(icons)
-                        .filter(function (icon) { return icon.includes(search); })
-                        .map(function (icon) { return (_jsxs(Item, { onClick: function () {
-                            return navigator.clipboard.writeText('<Icon icon="' + icon + '" />');
-                        }, children: [_jsx(Icon, { icon: icon, color: defaultTheme.colors.primary.default }), _jsx("span", { style: { color: defaultTheme.colors.neutral.darker }, children: icon })] }, icon)); }) })] }));
+    render: () => {
+        const [search, setSearch] = useState("");
+        return (_jsxs("div", { children: [_jsx(SearchInput, { placeholder: "Buscar", value: search, onChange: (e) => setSearch(e.target.value) }), _jsx(IconList, { children: Object.keys(icons)
+                        .filter((icon) => icon.includes(search))
+                        .map((icon) => (_jsxs(Item, { onClick: () => navigator.clipboard.writeText('<Icon icon="' + icon + '" />'), children: [_jsx(Icon, { icon: icon, color: defaultTheme.colors.primary.default }), _jsx("span", { style: { color: defaultTheme.colors.neutral.darker }, children: icon })] }, icon))) })] }));
     },
 };
 //# sourceMappingURL=Icon.stories.js.map

package/dist/esm/components/Icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,IAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,iBAAiB,EAAE,CACjB,MAAC,QAAQ,wEAEP,cAAM,+LAEsB,GAAG,EAC9B,8CACgC,EAAE,GAAG,iEAE7B,CACZ;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,4DAA4D;YACzE,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO;aACd;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,IAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,SAAS;IACf,IAAI,EAAE;QACJ,IAAI,EAAE,kBAAkB;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAU;IACzB,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE;QACA,IAAA,KAAsB,QAAQ,CAAC,EAAE,CAAC,EAAjC,MAAM,QAAA,EAAE,SAAS,QAAgB,CAAC;QAEzC,OAAO,CACL,0BACE,KAAC,WAAW,IACV,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAzB,CAAyB,GAC1C,EAEF,KAAC,QAAQ,cACN,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;yBAChB,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAArB,CAAqB,CAAC;yBACvC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACb,MAAC,IAAI,IAEH,OAAO,EAAE;4BACP,OAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,GAAG,MAAM,CAAC;wBAA7D,CAA6D,aAG/D,KAAC,IAAI,IACH,IAAI,EAAE,IAAmC,EACzC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,GAC1C,EACF,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,YACvD,IAAI,GACA,KAXF,IAAI,CAYJ,CACR,EAfc,CAed,CAAC,GACK,IACP,CACP,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,iBAAiB,EAAE,CACjB,MAAC,QAAQ,wEAEP,cAAM,+LAEsB,GAAG,EAC9B;yCACgC,EAAE,GAAG,iEAE7B,CACZ;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,4DAA4D;YACzE,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO;aACd;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,SAAS;IACf,IAAI,EAAE;QACJ,IAAI,EAAE,kBAAkB;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;QAEzC,OAAO,CACL,0BACE,KAAC,WAAW,IACV,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1C,EAEF,KAAC,QAAQ,cACN,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;yBAChB,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;yBACvC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACb,MAAC,IAAI,IAEH,OAAO,EAAE,GAAG,EAAE,CACZ,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,GAAG,MAAM,CAAC,aAG/D,KAAC,IAAI,IACH,IAAI,EAAE,IAA0B,EAChC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,GAC1C,EACF,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,YACvD,IAAI,GACA,KAXF,IAAI,CAYJ,CACR,CAAC,GACK,IACP,CACP,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/esm/components/Icon/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ICON_NAMES } from "../../utils/consts";
+import { icons } from "../../utils/icons";
 interface IconProps extends React.HTMLAttributes<SVGElement> {
-    icon: (typeof ICON_NAMES)[number];
+    icon: keyof typeof icons;
     color?: string;
     size?: number;
 }

package/dist/esm/components/Icon/index.js

@@ -1,14 +1,12 @@
-import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { icons } from "../../utils/icons";
 import { defaultTheme } from "../../utils/consts";
-export var Icon = forwardRef(function Icon(_a) {
-    var icon = _a.icon, _b = _a.color, color = _b === void 0 ? defaultTheme.colors.neutral.darker : _b, _c = _a.size, size = _c === void 0 ? 26 : _c, rest = __rest(_a, ["icon", "color", "size"]);
-    var IconComponent = icons[icon];
+import { icons } from "../../utils/icons";
+export const Icon = forwardRef(function Icon({ icon, color = defaultTheme.colors.neutral.darker, size = 26, ...props }) {
+    const IconComponent = icons[icon];
     if (!IconComponent) {
         return null;
     }
-    return _jsx(IconComponent, __assign({ fill: color }, rest, { height: size, width: size }));
+    return _jsx(IconComponent, { fill: color, ...props, height: size, width: size });
 });
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":";;AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAc,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAQ9D,MAAM,CAAC,IAAM,IAAI,GAAG,UAAU,CAAC,SAAS,IAAI,CAAC,EAKjC;IAJV,IAAA,IAAI,UAAA,EACJ,aAA0C,EAA1C,KAAK,mBAAG,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,KAAA,EAC1C,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACN,IAAI,cAJoC,yBAK5C,CADQ;IAEP,IAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAC,aAAa,aAAC,IAAI,EAAE,KAAK,IAAM,IAAI,IAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,IAAI,CAAC;AAC7E,CAAC,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAQ1C,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,IAAI,CAAC,EAC3C,IAAI,EACJ,KAAK,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAC1C,IAAI,GAAG,EAAE,EACT,GAAG,KAAK,EACE;IACV,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAC,aAAa,IAAC,IAAI,EAAE,KAAK,KAAM,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CAAC;AAC9E,CAAC,CAAC,CAAC"}

package/dist/esm/components/Icon/styles.js

@@ -1,16 +1,29 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-import { spacing } from "../../utils/consts";
-// Componente
-// Stories
-export var IconList = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: ", ";\n"])), spacing.xs);
-export var Item = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-basis: 245px;\n  display: flex;\n  gap: ", ";\n  align-items: center;\n  padding: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  transition: border-color 0.3s;\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  flex-basis: 245px;\n  display: flex;\n  gap: ", ";\n  align-items: center;\n  padding: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  transition: border-color 0.3s;\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), spacing.xs, spacing.xs, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.light;
-}, spacing.xs, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.neutral.default;
-});
-export var SearchInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 8px 16px;\n  font-size: 16px;\n  border-radius: 8px;\n  border: 1px solid grey;\n  margin-bottom: 16px;\n"], ["\n  padding: 8px 16px;\n  font-size: 16px;\n  border-radius: 8px;\n  border: 1px solid grey;\n  margin-bottom: 16px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+export const IconList = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xs};
+`;
+export const Item = styled.div `
+  flex-basis: 245px;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xs};
+  align-items: center;
+  padding: ${({ theme }) => theme.spacing.xs};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.light};
+  border-radius: ${({ theme }) => theme.radius.s};
+  cursor: pointer;
+  transition: border-color 0.3s;
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.neutral.default};
+  }
+`;
+export const SearchInput = styled.input `
+  padding: 8px 16px;
+  font-size: 16px;
+  border-radius: 8px;
+  border: 1px solid grey;
+  margin-bottom: 16px;
+`;
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/Icon/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Icon/styles.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,aAAa;AAEb,UAAU;AAEV,MAAM,CAAC,IAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,2HAAA,iDAGzB,EAAU,KAClB,KADQ,OAAO,CAAC,EAAE,CAClB,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAG,MAAM,CAAC,GAAG,6TAAA,mDAGrB,EAAU,wCAEN,EAAU,yBACD,EAAyC,sBAC5C,EAAU,4FAKT,EAA2C,UAE9D,KAXQ,OAAO,CAAC,EAAE,EAEN,OAAO,CAAC,EAAE,EACD,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;AAA1B,CAA0B,EAC5C,OAAO,CAAC,EAAE,EAKT,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,CAE9D,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,KAAK,2LAAA,wHAMtC,IAAA,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Icon/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGzB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGrB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;aAE3B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;sBACtB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;mBAC5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;;;;;oBAK5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;;CAE9D,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;CAMtC,CAAC"}

package/dist/esm/components/Layouts/ColumnsGrid/ColumnsGrid.stories.js

@@ -1,9 +1,8 @@
-import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MockComponent } from "../../MockComponent";
 import { ColumnsGrid } from "./index";
 import { Subtitle } from "../../StoriesComponents/styles";
-var meta = {
+const meta = {
     title: "Layout/Columns Grid",
     component: ColumnsGrid,
     parameters: {
@@ -30,16 +29,16 @@ var meta = {
         },
     },
 };
-var exampleArray = Array.from({ length: 10 }, function (_, i) { return i + 1; });
+const exampleArray = Array.from({ length: 10 }, (_, i) => i + 1);
 export default meta;
-export var Example = {
+export const Example = {
     args: {
         columnCount: 3,
         gap: "10px",
     },
-    render: function (args) { return (_jsx(ColumnsGrid, __assign({}, args, { children: exampleArray.map(function (item) {
-            var randomHeight = Math.floor(Math.random() * 100);
+    render: (args) => (_jsx(ColumnsGrid, { ...args, children: exampleArray.map((item) => {
+            const randomHeight = Math.floor(Math.random() * 100);
             return (_jsx(MockComponent, { style: { height: randomHeight }, children: item }, item));
-        }) }))); },
+        }) })),
 };
 //# sourceMappingURL=ColumnsGrid.stories.js.map

package/dist/esm/components/Layouts/ColumnsGrid/ColumnsGrid.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnsGrid.stories.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/ColumnsGrid/ColumnsGrid.stories.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,IAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,iBAAiB,EAAE,CACjB,MAAC,QAAQ,6RAKP,cAAM,wDACG,CACZ;KACF;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,GAAG,EAAE;YACH,WAAW,EACT,oQAAoQ;YACtQ,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,6CAA6C;YAC1D,OAAO,EAAE;gBACP,OAAO,EAAE,IAAI;aACd;SACF;KACF;CACF,CAAC;AAEF,IAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,GAAG,CAAC,EAAL,CAAK,CAAC,CAAC;AAEjE,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,IAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,WAAW,EAAE,CAAC;QACd,GAAG,EAAE,MAAM;KACZ;IACD,MAAM,EAAE,UAAC,IAAI,IAAK,OAAA,CAChB,KAAC,WAAW,eAAK,IAAI,cAClB,YAAY,CAAC,GAAG,CAAC,UAAC,IAAI;YACrB,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;YACrD,OAAO,CACL,KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,YAC3C,IAAI,IAD8C,IAAI,CAEzC,CACjB,CAAC;QACJ,CAAC,CAAC,IACU,CACf,EAXiB,CAWjB;CACF,CAAC"}
+{"version":3,"file":"ColumnsGrid.stories.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/ColumnsGrid/ColumnsGrid.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,iBAAiB,EAAE,CACjB,MAAC,QAAQ,6RAKP,cAAM,wDACG,CACZ;KACF;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,GAAG,EAAE;YACH,WAAW,EACT,oQAAoQ;YACtQ,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,6CAA6C;YAC1D,OAAO,EAAE;gBACP,OAAO,EAAE,IAAI;aACd;SACF;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAEjE,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,WAAW,EAAE,CAAC;QACd,GAAG,EAAE,MAAM;KACZ;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,KAAC,WAAW,OAAK,IAAI,YAClB,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACzB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;YACrD,OAAO,CACL,KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,YAC3C,IAAI,IAD8C,IAAI,CAEzC,CACjB,CAAC;QACJ,CAAC,CAAC,GACU,CACf;CACF,CAAC"}

package/dist/esm/components/Layouts/ColumnsGrid/index.js

@@ -1,18 +1,16 @@
-import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, forwardRef } from "react";
 import { Column, ColumnsGridContainer } from "./styles";
-export var ColumnsGrid = forwardRef(function (_a, ref) {
-    var columnCount = _a.columnCount, _b = _a.gap, gap = _b === void 0 ? "10px" : _b, children = _a.children, props = __rest(_a, ["columnCount", "gap", "children"]);
-    var array = Array.from({ length: columnCount }, function (_) { return []; });
-    Children.forEach(children, function (child, index) {
-        var column = array[index % columnCount];
+export const ColumnsGrid = forwardRef(({ columnCount, gap = "10px", children, ...props }, ref) => {
+    const array = Array.from({ length: columnCount }, (_) => []);
+    Children.forEach(children, (child, index) => {
+        const column = array[index % columnCount];
         if (Array.isArray(column)) {
             column.push(child);
         }
     });
-    return (_jsx(ColumnsGridContainer, __assign({ ref: ref, gap: gap }, props, { children: array.map(function (column) {
+    return (_jsx(ColumnsGridContainer, { ref: ref, gap: gap, ...props, children: array.map((column) => {
             return _jsx(Column, { gap: gap, children: column });
-        }) })));
+        }) }));
 });
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Layouts/ColumnsGrid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/ColumnsGrid/index.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAQxD,MAAM,CAAC,IAAM,WAAW,GAAG,UAAU,CACnC,UACE,EAAmE,EACnE,GAA8B;IAD5B,IAAA,WAAW,iBAAA,EAAE,WAAY,EAAZ,GAAG,mBAAG,MAAM,KAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA/C,kCAAiD,CAAF;IAG/C,IAAM,KAAK,GAAqB,KAAK,CAAC,IAAI,CACxC,EAAE,MAAM,EAAE,WAAW,EAAE,EACvB,UAAC,CAAC,IAAK,OAAA,EAAE,EAAF,CAAE,CACV,CAAC;IAEF,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,KAAK;QACtC,IAAM,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC;QAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAC1B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,oBAAoB,aAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAM,KAAK,cAChD,KAAK,CAAC,GAAG,CAAC,UAAC,MAAM;YAChB,OAAO,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,YAAG,MAAM,GAAU,CAAC;QAC7C,CAAC,CAAC,IACmB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/ColumnsGrid/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAQxD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAAE,WAAW,EAAE,GAAG,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB,EACnE,GAA8B,EAC9B,EAAE;IACF,MAAM,KAAK,GAAqB,KAAK,CAAC,IAAI,CACxC,EAAE,MAAM,EAAE,WAAW,EAAE,EACvB,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CACV,CAAC;IAEF,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC;QAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAC1B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAM,KAAK,YAChD,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACpB,OAAO,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,YAAG,MAAM,GAAU,CAAC;QAC7C,CAAC,CAAC,GACmB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/esm/components/Layouts/ColumnsGrid/styles.js

@@ -1,12 +1,12 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var ColumnsGridContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  gap: ", ";\n  width: 100%;\n"])), function (_a) {
-    var gap = _a.gap;
-    return gap;
-});
-export var Column = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"])), function (_a) {
-    var gap = _a.gap;
-    return gap;
-});
-var templateObject_1, templateObject_2;
+export const ColumnsGridContainer = styled.div `
+  display: flex;
+  gap: ${({ gap }) => gap};
+  width: 100%;
+`;
+export const Column = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ gap }) => gap};
+`;
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/Layouts/ColumnsGrid/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/ColumnsGrid/styles.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,uHAA2B,6BAEhE,EAAgB,qBAExB,KAFQ,UAAC,EAAO;QAAL,GAAG,SAAA;IAAO,OAAA,GAAG;AAAH,CAAG,CAExB,CAAC;AAMF,MAAM,CAAC,IAAM,MAAM,GAAG,MAAM,CAAC,GAAG,kIAAa,wDAGpC,EAAgB,KACxB,KADQ,UAAC,EAAO;QAAL,GAAG,SAAA;IAAO,OAAA,GAAG;AAAH,CAAG,CACxB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/ColumnsGrid/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA2B;;SAEhE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG;;CAExB,CAAC;AAMF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAa;;;SAGpC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG;CACxB,CAAC"}

package/dist/esm/components/Layouts/Grid/Grid.stories.js

@@ -1,9 +1,8 @@
-import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MockComponent } from "../../MockComponent";
 import { Grid } from "./index";
 import { Subtitle } from "../../StoriesComponents/styles";
-var meta = {
+const meta = {
     title: "Layout/Grid",
     component: Grid,
     parameters: {
@@ -31,12 +30,12 @@ var meta = {
     },
 };
 export default meta;
-var exmapleArray = Array.from({ length: 10 }, function (_, i) { return i + 1; });
-export var Example = {
+const exmapleArray = Array.from({ length: 10 }, (_, i) => i + 1);
+export const Example = {
     args: {
         elementsPerRow: [1, 4, 2, 3],
         gap: "8px",
     },
-    render: function (args) { return (_jsx(Grid, __assign({}, args, { children: exmapleArray.map(function (item) { return (_jsx(MockComponent, { children: item }, item)); }) }))); },
+    render: (args) => (_jsx(Grid, { ...args, children: exmapleArray.map((item) => (_jsx(MockComponent, { children: item }, item))) })),
 };
 //# sourceMappingURL=Grid.stories.js.map

package/dist/esm/components/Layouts/Grid/Grid.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/Grid/Grid.stories.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,IAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,iBAAiB,EAAE,CACjB,MAAC,QAAQ,+OAIP,cAAM,0CACG,CACZ;KACF;IACD,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,WAAW,EACT,wEAAwE;YAC1E,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,GAAG,EAAE;YACH,WAAW,EACT,oQAAoQ;YACtQ,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,6CAA6C;YAC1D,OAAO,EAAE;gBACP,OAAO,EAAE,IAAI;aACd;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,IAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,GAAG,CAAC,EAAL,CAAK,CAAC,CAAC;AAEjE,MAAM,CAAC,IAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAC5B,GAAG,EAAE,KAAK;KACX;IACD,MAAM,EAAE,UAAC,IAAI,IAAK,OAAA,CAChB,KAAC,IAAI,eAAK,IAAI,cACX,YAAY,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CAC1B,KAAC,aAAa,cAAa,IAAI,IAAX,IAAI,CAAwB,CACjD,EAF2B,CAE3B,CAAC,IACG,CACR,EANiB,CAMjB;CACF,CAAC"}
+{"version":3,"file":"Grid.stories.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/Grid/Grid.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,iBAAiB,EAAE,CACjB,MAAC,QAAQ,+OAIP,cAAM,0CACG,CACZ;KACF;IACD,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,WAAW,EACT,wEAAwE;YAC1E,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,GAAG,EAAE;YACH,WAAW,EACT,oQAAoQ;YACtQ,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,6CAA6C;YAC1D,OAAO,EAAE;gBACP,OAAO,EAAE,IAAI;aACd;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAEjE,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAC5B,GAAG,EAAE,KAAK;KACX;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,KAAC,IAAI,OAAK,IAAI,YACX,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC1B,KAAC,aAAa,cAAa,IAAI,IAAX,IAAI,CAAwB,CACjD,CAAC,GACG,CACR;CACF,CAAC"}

package/dist/esm/components/Layouts/Grid/index.js

@@ -1,25 +1,26 @@
-import { __assign, __rest } from "tslib";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, forwardRef } from "react";
 import { mmcArray } from "../../../utils/functions";
 import { GridContainer } from "./styles";
-export var Grid = forwardRef(function (_a, ref) {
-    var elementsPerRow = _a.elementsPerRow, _b = _a.gap, gap = _b === void 0 ? "8px" : _b, children = _a.children, props = __rest(_a, ["elementsPerRow", "gap", "children"]);
-    var colCount = mmcArray(elementsPerRow || [1]);
-    var start = 0;
-    return (_jsxs(GridContainer, __assign({ ref: ref, gap: gap, colCount: colCount }, props, { children: [elementsPerRow === null || elementsPerRow === void 0 ? void 0 : elementsPerRow.map(function (rowCount) {
-                var elementsToReturn = children
+export const Grid = forwardRef(({ elementsPerRow, gap = "8px", children, ...props }, ref) => {
+    const colCount = mmcArray(elementsPerRow || [1]);
+    let start = 0;
+    return (_jsxs(GridContainer, { ref: ref, gap: gap, colCount: colCount, ...props, children: [elementsPerRow?.map((rowCount) => {
+                const elementsToReturn = children
                     .slice(start, start + rowCount)
-                    .map(function (child) {
+                    .map((child) => {
                     console.log("child: ", child.props);
                     return cloneElement(child, {
-                        style: __assign(__assign({}, child.props.style), { gridColumn: "span ".concat(colCount / rowCount) }),
+                        style: {
+                            ...child.props.style,
+                            gridColumn: `span ${colCount / rowCount}`,
+                        },
                     });
                 });
                 start += rowCount;
                 return elementsToReturn;
-            }), children.slice(start).map(function (child) {
+            }), children.slice(start).map((child) => {
                 return child;
-            })] })));
+            })] }));
 });
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Layouts/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/Grid/index.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAgB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAQzC,MAAM,CAAC,IAAM,IAAI,GAAG,UAAU,CAC5B,UACE,EAA8D,EAC9D,GAA8B;IAD5B,IAAA,cAAc,oBAAA,EAAE,WAAW,EAAX,GAAG,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAAjD,qCAAmD,CAAF;IAGjD,IAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,OAAO,CACL,MAAC,aAAa,aAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,IAAM,KAAK,eAC7D,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,GAAG,CAAC,UAAC,QAAQ;gBAC5B,IAAM,gBAAgB,GAAG,QAAQ;qBAC9B,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,CAAC;qBAC9B,GAAG,CAAC,UAAC,KAAK;oBACT,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;oBACpC,OAAO,YAAY,CAAC,KAAK,EAAE;wBACzB,KAAK,wBACA,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,UAAU,EAAE,eAAQ,QAAQ,GAAG,QAAQ,CAAE,GAC1C;qBACF,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBACL,KAAK,IAAI,QAAQ,CAAC;gBAClB,OAAO,gBAAgB,CAAC;YAC1B,CAAC,CAAC,EACD,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK;gBAC/B,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,KACY,CACjB,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/Grid/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAgB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAQzC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAAE,cAAc,EAAE,GAAG,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAC9D,GAA8B,EAC9B,EAAE;IACF,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,aAC7D,cAAc,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAChC,MAAM,gBAAgB,GAAG,QAAQ;qBAC9B,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,CAAC;qBAC9B,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBACb,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;oBACpC,OAAO,YAAY,CAAC,KAAK,EAAE;wBACzB,KAAK,EAAE;4BACL,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK;4BACpB,UAAU,EAAE,QAAQ,QAAQ,GAAG,QAAQ,EAAE;yBAC1C;qBACF,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBACL,KAAK,IAAI,QAAQ,CAAC;gBAClB,OAAO,gBAAgB,CAAC;YAC1B,CAAC,CAAC,EACD,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACnC,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,IACY,CACjB,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/esm/components/Layouts/Grid/styles.js

@@ -1,11 +1,11 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var GridContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  gap: ", ";\n\n  .red {\n    background-color: red;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  gap: ", ";\n\n  .red {\n    background-color: red;\n  }\n"])), function (_a) {
-    var colCount = _a.colCount;
-    return colCount;
-}, function (_a) {
-    var gap = _a.gap;
-    return gap;
-});
-var templateObject_1;
+export const GridContainer = styled.div `
+  display: grid;
+  grid-template-columns: repeat(${({ colCount }) => colCount}, 1fr);
+  gap: ${({ gap }) => gap};
+
+  .red {
+    background-color: red;
+  }
+`;
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/Layouts/Grid/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/Grid/styles.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,iMAAoB,sDAEzB,EAA0B,kBACnD,EAAgB,kDAKxB,KANiC,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ;AAAR,CAAQ,EACnD,UAAC,EAAO;QAAL,GAAG,SAAA;IAAO,OAAA,GAAG;AAAH,CAAG,CAKxB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/Layouts/Grid/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAoB;;kCAEzB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;SACnD,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG;;;;;CAKxB,CAAC"}