suada-components 1.0.3

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,132 @@
+import { Button } from '.';
+import { ButtonTypeEnum, ButtonSizeEnum, HtmlButtonTypeEnum } from './Button.interface';
+import { themes } from '../../theme/Theme';
+// Storybook metadata
+var meta = {
+    title: 'Components/Button',
+    component: Button,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(ButtonTypeEnum),
+            },
+        },
+        size: {
+            control: {
+                type: 'select',
+                options: Object.values(ButtonSizeEnum),
+            },
+        },
+        htmlType: {
+            control: {
+                type: 'select',
+                options: Object.values(HtmlButtonTypeEnum),
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+        },
+        label: {
+            control: { type: 'text' },
+        },
+        iconLeft: {
+            control: { type: 'object' },
+        },
+        iconRight: {
+            control: { type: 'object' },
+        },
+        customStyles: {
+            control: { type: 'object' },
+        },
+        className: {
+            control: { type: 'text' },
+        },
+        onClick: {
+            action: 'clicked',
+        },
+        themes: {
+            control: { type: 'select' },
+            options: Object.keys(themes),
+            mapping: themes,
+            defaultValue: 'light',
+        },
+    },
+    args: {
+        onClick: function () { return console.log('Button clicked!'); },
+    },
+};
+export default meta;
+// Primary Button
+export var Primary = {
+    args: {
+        type: ButtonTypeEnum.PRIMARY,
+        size: ButtonSizeEnum.SM,
+        label: 'Primary Button',
+        htmlType: HtmlButtonTypeEnum.BUTTON,
+    },
+};
+// Secondary Button
+export var Secondary = {
+    args: {
+        type: ButtonTypeEnum.SECONDARY,
+        size: ButtonSizeEnum.SM,
+        label: 'Secondary Button',
+        htmlType: HtmlButtonTypeEnum.BUTTON,
+    },
+};
+// Disabled Button
+export var Disabled = {
+    args: {
+        type: ButtonTypeEnum.PRIMARY,
+        size: ButtonSizeEnum.SM,
+        label: 'Disabled Button',
+        disabled: true,
+        htmlType: HtmlButtonTypeEnum.BUTTON,
+    },
+};
+export var Positive = {
+    args: {
+        type: ButtonTypeEnum.POSITIVE,
+        size: ButtonSizeEnum.SM,
+        label: 'Success Button',
+        htmlType: HtmlButtonTypeEnum.BUTTON,
+    },
+};
+export var Negative = {
+    args: {
+        type: ButtonTypeEnum.NEGATIVE,
+        size: ButtonSizeEnum.SM,
+        label: 'Negative Button',
+        htmlType: HtmlButtonTypeEnum.BUTTON,
+    },
+};
+export var Ghost = {
+    args: {
+        type: ButtonTypeEnum.GHOST,
+        size: ButtonSizeEnum.SM,
+        label: 'Ghost Button',
+        htmlType: HtmlButtonTypeEnum.BUTTON,
+    },
+};
+export var Dark = {
+    args: {
+        type: ButtonTypeEnum.DARK,
+        size: ButtonSizeEnum.SM,
+        label: 'Dark Button',
+        htmlType: HtmlButtonTypeEnum.BUTTON,
+    },
+};
+export var Text = {
+    args: {
+        type: ButtonTypeEnum.TEXT,
+        size: ButtonSizeEnum.SM,
+        label: 'Text Button',
+        htmlType: HtmlButtonTypeEnum.BUTTON,
+    },
+};
+//# sourceMappingURL=Button.stories.js.map

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

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

package/dist/components/Button/Button.styles.d.ts

@@ -0,0 +1,2 @@
+import { StyledButtonProps } from './Button.interface';
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,39 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { ButtonSizeEnum, ButtonTypeEnum } from './Button.interface';
+export var StyledButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  padding: 12px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 8px;\n  text-transform: capitalize;\n  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n  cursor: pointer;\n  white-space: nowrap;\n\n  & > svg > path {\n    transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    transition: 0.1s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n\n    & > svg > path {\n      transition: 0.1s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n    }\n  }\n\n  ", "\n\n  ", "\n"], ["\n  display: inline-flex;\n  padding: 12px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 8px;\n  text-transform: capitalize;\n  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n  cursor: pointer;\n  white-space: nowrap;\n\n  & > svg > path {\n    transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    transition: 0.1s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n\n    & > svg > path {\n      transition: 0.1s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n    }\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var $size = _a.$size;
+    switch ($size) {
+        case ButtonSizeEnum.SM:
+            return "  \n          width: 159px;\n          height: 40px;\n          padding: 8px; \n        ";
+        case ButtonSizeEnum.LG:
+            return "\n          width: 167px;\n          height: 48px;\n          padding: 12px;\n        ";
+        default:
+            return '';
+    }
+}, function (_a) {
+    var theme = _a.theme, $type = _a.$type;
+    switch ($type) {
+        case ButtonTypeEnum.PRIMARY:
+            return "\n          color: ".concat(theme.colors.neutral[100], ";\n          background-color: ").concat(theme.colors.primary.main, ";\n\n          & > svg > path {\n            fill: ").concat(theme.colors.neutral[100], ";\n          }\n\n          &:not(:disabled):hover {\n            background-color: ").concat(theme.colors.primary[700], ";    \n          }\n\n          &:disabled {\n            background: ").concat(theme.colors.neutral[400], "; \n          }\n        ");
+        case ButtonTypeEnum.SECONDARY:
+            return "\n          border: 1px solid ".concat(theme.colors.primary.main, "; \n          color: ").concat(theme.colors.primary.main, ";\n\n          & > svg > path {\n            fill: ").concat(theme.colors.primary.main, ";\n          }\n\n          &:not(:disabled):hover {\n            border: 1px solid ").concat(theme.colors.primary[700], ";\n            color: ").concat(theme.colors.primary[700], ";\n\n            & > svg > path {\n              fill: ").concat(theme.colors.primary[700], ";\n            }\n          }\n\n          &:disabled {\n            border: 1px solid ").concat(theme.colors.neutral[400], "; \n            color: ").concat(theme.colors.neutral[400], "; \n\n            & > svg > path {\n              fill: ").concat(theme.colors.neutral[400], ";\n            }\n          }\n        ");
+        case ButtonTypeEnum.GHOST:
+            return "\n          background-color: transparent;\n          color: ".concat(theme.colors.neutral[900], ";\n\n          & > svg > path {\n            fill: ").concat(theme.colors.neutral[900], ";\n          }\n\n          &:not(:disabled):hover {\n            background-color: ").concat(theme.colors.neutral[300], ";\n          }\n\n          &:disabled {\n            color: ").concat(theme.colors.neutral[400], "; \n            \n            & > svg > path {\n              fill: ").concat(theme.colors.neutral[400], ";\n            }\n          }\n        ");
+        case ButtonTypeEnum.NEGATIVE:
+            return "\n          background-color: ".concat(theme.colors.system.error.main, ";\n          color: ").concat(theme.colors.neutral[100], ";\n\n          & > svg > path {\n            fill: ").concat(theme.colors.neutral[100], ";\n          }\n\n          &:not(:disabled):hover {\n            background-color: ").concat(theme.colors.system.error[700], ";\n          }\n\n          &:disabled {\n            background: ").concat(theme.colors.system.error[300], "; \n          }\n        ");
+        case ButtonTypeEnum.POSITIVE:
+            return "\n          background-color: ".concat(theme.colors.system.success.main, ";\n          color: ").concat(theme.colors.neutral[100], ";\n\n          & > svg > path {\n            fill: ").concat(theme.colors.neutral[100], ";\n          }\n\n          &:not(:disabled):hover {\n            background-color: ").concat(theme.colors.system.success[700], ";\n          }\n\n          &:disabled {\n            background: ").concat(theme.colors.system.success[300], "; \n          }\n        ");
+        case ButtonTypeEnum.DARK:
+            return "\n          border: 1px solid ".concat(theme.colors.neutral[900], "; \n          color: ").concat(theme.colors.neutral[900], ";\n\n          & > svg > path {\n            fill: ").concat(theme.colors.neutral[900], ";\n          }\n\n          &:not(:disabled):hover {\n            opacity: 0.8;\n          }\n\n          &:disabled {\n            border: 1px solid ").concat(theme.colors.neutral[400], "; \n            color: ").concat(theme.colors.neutral[400], "; \n          }\n        ");
+        case ButtonTypeEnum.TEXT:
+            return "\n          border: none; \n          color: ".concat(theme.colors.neutral[900], ";\n          padding-top: 0;\n          padding-bottom: 0;\n          width: fit-content;\n\n          & > svg > path {\n            fill: ").concat(theme.colors.neutral[900], ";\n          }\n\n          &:not(:disabled):hover {\n           color: ").concat(theme.colors.neutral[600], ";\n           \n            & > svg > path {\n              fill: ").concat(theme.colors.neutral[600], ";\n            }\n          }\n\n          &:disabled {\n            color: ").concat(theme.colors.neutral[400], "; \n\n            & > svg > path {\n              fill: ").concat(theme.colors.neutral[400], ";\n            }\n          }\n        ");
+        default:
+            return '';
+    }
+});
+var templateObject_1;
+//# sourceMappingURL=Button.styles.js.map

package/dist/components/Button/Button.styles.js.map

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

package/dist/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { ICheckboxV2Props } from './checkboxV2.interface';
+export declare const Checkbox: ({ checked, onChange, label, tooltip, name, }: ICheckboxV2Props) => ReactElement;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox as MUICheckBox, FormControlLabel, Tooltip } from '@mui/material';
+import { LabelContainer } from './styled-components';
+import { Help } from '../../icons';
+export var Checkbox = function (_a) {
+    var checked = _a.checked, onChange = _a.onChange, label = _a.label, tooltip = _a.tooltip, _b = _a.name, name = _b === void 0 ? 'checkbox' : _b;
+    var checkedColor = '#08c694';
+    return (_jsx(FormControlLabel, { control: _jsx(MUICheckBox, { checked: checked, onChange: onChange, name: name, sx: {
+                color: checked ? checkedColor : undefined,
+                '&.Mui-checked': {
+                    color: checkedColor,
+                },
+            } }), label: _jsxs(LabelContainer, { children: [_jsx("span", { children: label }), tooltip && (_jsx(Tooltip, { title: tooltip, children: _jsx(Help, {}) }))] }) }));
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAElF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAElC,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,EAMN;QALjB,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,OAAO,aAAA,EACP,YAAiB,EAAjB,IAAI,mBAAG,UAAU,KAAA;IAEjB,IAAM,YAAY,GAAG,SAAS,CAAA;IAC9B,OAAO,CACL,KAAC,gBAAgB,IACf,OAAO,EACL,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE;gBACF,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;gBACzC,eAAe,EAAE;oBACf,KAAK,EAAE,YAAY;iBACpB;aACF,GACD,EAEJ,KAAK,EACH,MAAC,cAAc,eACb,yBAAO,KAAK,GAAQ,EACnB,OAAO,IAAI,CACV,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,YACrB,KAAC,IAAI,KAAG,GACA,CACX,IACc,GAEnB,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+declare const _default: Meta<typeof Checkbox>;
+export default _default;
+export declare const Checked: import("@storybook/core/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./checkboxV2.interface").ICheckboxV2Props>;
+export declare const Unchecked: import("@storybook/core/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./checkboxV2.interface").ICheckboxV2Props>;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from './Checkbox';
+export default {
+    title: 'Components/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs', 'checkbox'],
+    decorators: [
+        function (Story) { return (_jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }, children: _jsx("div", { style: { maxWidth: '400px' }, children: _jsx(Story, {}) }) })); },
+    ],
+    argTypes: {
+        checked: { control: 'boolean' },
+        label: { control: 'text' },
+        tooltip: { control: 'text' },
+    },
+};
+var Template = function (args) { return _jsx(Checkbox, __assign({}, args)); };
+export var Checked = Template.bind({});
+Checked.args = {
+    checked: true,
+    label: 'Checkbox Label',
+    tooltip: 'Tooltip Text',
+};
+export var Unchecked = Template.bind({});
+Unchecked.args = {
+    checked: false,
+    label: 'Checkbox Label',
+    tooltip: 'Tooltip Text',
+};
+//# sourceMappingURL=Checkbox.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IAEnB,IAAI,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;IAC9B,UAAU,EAAE;QACV,UAAA,KAAK,IAAI,OAAA,CACP,cACE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAE1F,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,KAAK,KAAG,GACL,GACF,CACP,EARQ,CAQR;KACF;IAED,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC7B;CACuB,CAAA;AAE1B,IAAM,QAAQ,GAA6B,UAAA,IAAI,IAAI,OAAA,KAAC,QAAQ,eAAK,IAAI,EAAI,EAAtB,CAAsB,CAAA;AAEzE,MAAM,CAAC,IAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,gBAAgB;IACvB,OAAO,EAAE,cAAc;CACxB,CAAA;AAED,MAAM,CAAC,IAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,gBAAgB;IACvB,OAAO,EAAE,cAAc;CACxB,CAAA"}

package/dist/components/Checkbox/checkboxV2.interface.d.ts

@@ -0,0 +1,8 @@
+import { ChangeEvent } from 'react';
+export interface ICheckboxV2Props {
+    checked: boolean;
+    onChange: (e?: ChangeEvent<HTMLInputElement>) => void;
+    label: string;
+    tooltip?: string;
+    name?: string;
+}

package/dist/components/Checkbox/checkboxV2.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkboxV2.interface.js.map

package/dist/components/Checkbox/checkboxV2.interface.js.map

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

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/dist/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Checkbox/styled-components.d.ts

@@ -0,0 +1 @@
+export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Checkbox/styled-components.js

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from 'styled-components';
+export var LabelContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  span {\n    font-weight: 550;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  span {\n    font-weight: 550;\n  }\n"])));
+var templateObject_1;
+//# sourceMappingURL=styled-components.js.map

package/dist/components/Checkbox/styled-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-components.js","sourceRoot":"","sources":["../../../src/components/Checkbox/styled-components.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,uKAAA,oGAQvC,IAAA,CAAA"}

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { IColorPickerParams } from './colorPicker.interface';
+export declare const ColorPicker: ({ selectedColor, setSelectedColor, }: IColorPickerParams) => ReactElement;

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import colors from './colors';
+import { Container, Grid, ColorContainer, ColorContainerInput } from './styled.components';
+import { debounce } from 'lodash';
+export var ColorPicker = function (_a) {
+    var selectedColor = _a.selectedColor, setSelectedColor = _a.setSelectedColor;
+    var _b = useState('#828282'), customColor = _b[0], setCustomColor = _b[1];
+    // Debounce the setSelectedColor function
+    var debouncedSetSelectedColor = debounce(function (color) {
+        setSelectedColor(color);
+    }, 300);
+    return (_jsx(Container, { children: _jsxs(Grid, { children: [_jsx(ColorContainerInput, { color: '#828282', type: 'color', value: selectedColor || customColor, onChange: function (e) {
+                        setCustomColor(e.target.value);
+                        debouncedSetSelectedColor(e.target.value);
+                    } }), colors.map(function (color) { return (_jsx(ColorContainer, { color: color, onClick: function () { return setSelectedColor(color); }, className: "".concat(selectedColor && selectedColor === color && 'selected'), "data-testid": "color-container-".concat(color) }, color)); })] }) }));
+};
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAGjC,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAGP;QAFnB,aAAa,mBAAA,EACb,gBAAgB,sBAAA;IAEV,IAAA,KAAgC,QAAQ,CAAC,SAAS,CAAC,EAAlD,WAAW,QAAA,EAAE,cAAc,QAAuB,CAAA;IACzD,yCAAyC;IACzC,IAAM,yBAAyB,GAAG,QAAQ,CAAC,UAAA,KAAK;QAC9C,gBAAgB,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC,EAAE,GAAG,CAAC,CAAA;IAEP,OAAO,CACL,KAAC,SAAS,cACR,MAAC,IAAI,eACH,KAAC,mBAAmB,IAClB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,IAAI,WAAW,EACnC,QAAQ,EAAE,UAAC,CAAC;wBACV,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;wBAC9B,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,GACD,EACD,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,CACnB,KAAC,cAAc,IAEb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,cAAY,OAAA,gBAAgB,CAAC,KAAK,CAAC,EAAvB,CAAuB,EAC5C,SAAS,EAAE,UAAG,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,UAAU,CAAE,iBACzD,0BAAmB,KAAK,CAAE,IAJlC,KAAK,CAKV,CACH,EARoB,CAQpB,CAAC,IACG,GACG,CACb,CAAA;AACH,CAAC,CAAA"}

package/dist/components/ColorPicker/ColorPicker.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IColorPickerParams } from './colorPicker.interface';
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, IColorPickerParams>;

package/dist/components/ColorPicker/ColorPicker.stories.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorPicker } from './ColorPicker';
+export default {
+    title: 'Components/ColorPicker',
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    component: ColorPicker,
+};
+var Template = function (args) { return _jsx(ColorPicker, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    selectedColor: '#000000',
+    setSelectedColor: function (color) { return console.log(color); },
+};
+//# sourceMappingURL=ColorPicker.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAG3C,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,SAAS,EAAE,WAAW;CACf,CAAA;AAET,IAAM,QAAQ,GAAgC,UAAA,IAAI,IAAI,OAAA,KAAC,WAAW,eAAK,IAAI,EAAI,EAAzB,CAAyB,CAAA;AAE/E,MAAM,CAAC,IAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,aAAa,EAAE,SAAS;IACxB,gBAAgB,EAAE,UAAC,KAAa,IAAK,OAAA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAlB,CAAkB;CACxD,CAAA"}

package/dist/components/ColorPicker/colorPicker.interface.d.ts

@@ -0,0 +1,4 @@
+export interface IColorPickerParams {
+    selectedColor: string;
+    setSelectedColor: (color: string) => void;
+}

package/dist/components/ColorPicker/colorPicker.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=colorPicker.interface.js.map

package/dist/components/ColorPicker/colorPicker.interface.js.map

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

package/dist/components/ColorPicker/colors.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

package/dist/components/ColorPicker/colors.js

@@ -0,0 +1,14 @@
+export default [
+    '#b3ecda',
+    '#b4e0fb',
+    '#f0bec4',
+    '#fddbb6',
+    '#fef4c4',
+    '#f4d2fa',
+    '#d0d0d0',
+    '#b2b5ff',
+    '#e4ffb4',
+    '#b4fffc',
+    '#ffb6e3',
+];
+//# sourceMappingURL=colors.js.map

package/dist/components/ColorPicker/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/colors.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAA"}

package/dist/components/ColorPicker/index.d.ts

@@ -0,0 +1 @@
+export { ColorPicker } from './ColorPicker';

package/dist/components/ColorPicker/index.js

@@ -0,0 +1,2 @@
+export { ColorPicker } from './ColorPicker';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,8 @@
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Grid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ColorContainerInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    color: string;
+}>> & string;
+export declare const ColorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color: string;
+}>> & string;

package/dist/components/ColorPicker/styled.components.js

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 30px 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 30px 0;\n"])));
+export var Grid = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-gap: 60px;\n  height: 100%;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-gap: 60px;\n  height: 100%;\n"])));
+export var ColorContainerInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  width: 160px;\n  height: 156px;\n  background: ", ";\n  position: relative;\n  border: 1px solid transparent;\n  transform: scale(0.87);\n  transition: 0.3s ease;\n\n  &:hover,\n  &.selected {\n    border: 2px solid #06c68f;\n    transform: scale(1);\n  }\n\n  &.disabled {\n    pointer-events: none;\n    background: gray;\n  }\n\n  &:before {\n    content: 'Custom \u270E';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: 20px;\n    text-align: center;\n    padding: 2px 0;\n    width: 80px;\n    height: 20px;\n    background: white;\n    z-index: 50;\n    transition: 0.3s ease;\n  }\n"], ["\n  cursor: pointer;\n  width: 160px;\n  height: 156px;\n  background: ", ";\n  position: relative;\n  border: 1px solid transparent;\n  transform: scale(0.87);\n  transition: 0.3s ease;\n\n  &:hover,\n  &.selected {\n    border: 2px solid #06c68f;\n    transform: scale(1);\n  }\n\n  &.disabled {\n    pointer-events: none;\n    background: gray;\n  }\n\n  &:before {\n    content: 'Custom \u270E';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: 20px;\n    text-align: center;\n    padding: 2px 0;\n    width: 80px;\n    height: 20px;\n    background: white;\n    z-index: 50;\n    transition: 0.3s ease;\n  }\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+export var ColorContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  width: 160px;\n  height: 156px;\n  background: ", ";\n  position: relative;\n  border: 1px solid transparent;\n  transform: scale(0.87);\n  transition: 0.3s ease;\n\n  &:hover,\n  &.selected {\n    border: 2px solid #06c68f;\n    transform: scale(1);\n  }\n\n  &.disabled {\n    pointer-events: none;\n    background: gray;\n  }\n"], ["\n  cursor: pointer;\n  width: 160px;\n  height: 156px;\n  background: ", ";\n  position: relative;\n  border: 1px solid transparent;\n  transform: scale(0.87);\n  transition: 0.3s ease;\n\n  &:hover,\n  &.selected {\n    border: 2px solid #06c68f;\n    transform: scale(1);\n  }\n\n  &.disabled {\n    pointer-events: none;\n    background: gray;\n  }\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=styled.components.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.components.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/styled.components.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,kMAAA,+HAOlC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,IAAI,GAAG,MAAM,CAAC,GAAG,uKAAA,oGAK7B,IAAA,CAAA;AACD,MAAM,CAAC,IAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,6uBAAmB,yEAIlD,EAA4B,+lBAgC3C,KAhCe,UAAC,EAAS;QAAP,KAAK,WAAA;IAAe,OAAA,KAAK;AAAL,CAAK,CAgC3C,CAAA;AACD,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,uaAAmB,yEAI3C,EAA4B,yRAgB3C,KAhBe,UAAC,EAAS;QAAP,KAAK,WAAA;IAAe,OAAA,KAAK;AAAL,CAAK,CAgB3C,CAAA"}

package/dist/components/ColumnNavigation/ColumnNavigation.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { IColumnNavigationProps } from './columnNavigation.interface';
+export declare const ColumnNavigation: ({ tabs, activeTab, setActiveTab, }: IColumnNavigationProps) => ReactElement;

package/dist/components/ColumnNavigation/ColumnNavigation.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColumnNavigationContainer, NavigationItem } from './styled-components';
+export var ColumnNavigation = function (_a) {
+    var tabs = _a.tabs, activeTab = _a.activeTab, setActiveTab = _a.setActiveTab;
+    return (_jsx(ColumnNavigationContainer, { children: tabs.map(function (tab, index) {
+            if (tab) {
+                var label = tab.label, icon = tab.icon;
+                return (_jsxs(NavigationItem, { onClick: function () { return setActiveTab(index); }, active: activeTab === index, children: [_jsx("p", { children: label }), icon] }, index));
+            }
+            return null;
+        }) }));
+};
+//# sourceMappingURL=ColumnNavigation.js.map

package/dist/components/ColumnNavigation/ColumnNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnNavigation.js","sourceRoot":"","sources":["../../../src/components/ColumnNavigation/ColumnNavigation.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAG/E,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,EAIR;QAHvB,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,YAAY,kBAAA;IAC8B,OAAA,CAC1C,KAAC,yBAAyB,cACvB,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK;YACnB,IAAI,GAAG,EAAE,CAAC;gBACA,IAAA,KAAK,GAAW,GAAG,MAAd,EAAE,IAAI,GAAK,GAAG,KAAR,CAAQ;gBAC3B,OAAO,CACL,MAAC,cAAc,IAEb,OAAO,EAAE,cAAY,OAAA,YAAY,CAAC,KAAK,CAAC,EAAnB,CAAmB,EACxC,MAAM,EAAE,SAAS,KAAK,KAAK,aAE3B,sBAAI,KAAK,GAAK,EACb,IAAI,KALA,KAAK,CAMK,CAClB,CAAA;YACH,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC,CAAC,GACwB,CAC7B;AAnB2C,CAmB3C,CAAA"}

package/dist/components/ColumnNavigation/ColumnNavigation.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IColumnNavigationProps } from './columnNavigation.interface';
+declare const _default: Meta;
+export default _default;
+export declare const DefaultColumnNavigation: import("@storybook/core/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, IColumnNavigationProps>;

package/dist/components/ColumnNavigation/ColumnNavigation.stories.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ColumnNavigation } from './ColumnNavigation';
+import { Home, Settings } from '@mui/icons-material';
+export default {
+    title: 'Components/ColumnNavigation',
+    component: ColumnNavigation,
+    tags: ['autodocs', 'CourseNavigation'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+var Template = function (args) {
+    var _a = useState(0), activeTab = _a[0], setActiveTab = _a[1];
+    return _jsx(ColumnNavigation, __assign({}, args, { activeTab: activeTab, setActiveTab: setActiveTab }));
+};
+export var DefaultColumnNavigation = Template.bind({});
+DefaultColumnNavigation.args = {
+    tabs: [
+        { label: 'Home', icon: _jsx(Home, {}) },
+        { label: 'Settings', icon: _jsx(Settings, {}) },
+    ],
+};
+//# sourceMappingURL=ColumnNavigation.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnNavigation.stories.js","sourceRoot":"","sources":["../../../src/components/ColumnNavigation/ColumnNavigation.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC;IACtC,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAA;AAET,IAAM,QAAQ,GAAoC,UAAA,IAAI;IAC9C,IAAA,KAA4B,QAAQ,CAAC,CAAC,CAAC,EAAtC,SAAS,QAAA,EAAE,YAAY,QAAe,CAAA;IAC7C,OAAO,KAAC,gBAAgB,eAAK,IAAI,IAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,IAAI,CAAA;AACzF,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxD,uBAAuB,CAAC,IAAI,GAAG;IAC7B,IAAI,EAAE;QACJ,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAC,IAAI,KAAG,EAAE;QACjC,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,KAAC,QAAQ,KAAG,EAAE;KAC1C;CACF,CAAA"}

package/dist/components/ColumnNavigation/columnNavigation.interface.d.ts

@@ -0,0 +1,8 @@
+export interface IColumnNavigationProps {
+    tabs: {
+        label: string;
+        icon: JSX.Element;
+    }[];
+    activeTab: number;
+    setActiveTab: (index: number) => void;
+}

package/dist/components/ColumnNavigation/columnNavigation.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=columnNavigation.interface.js.map

package/dist/components/ColumnNavigation/columnNavigation.interface.js.map

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

package/dist/components/ColumnNavigation/index.d.ts

@@ -0,0 +1 @@
+export { ColumnNavigation } from './ColumnNavigation';

package/dist/components/ColumnNavigation/index.js

@@ -0,0 +1,2 @@
+export { ColumnNavigation } from './ColumnNavigation';
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/ColumnNavigation/styled-components.d.ts

@@ -0,0 +1,4 @@
+export declare const ColumnNavigationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const NavigationItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    active?: boolean;
+}>> & string;