krl-alfred 2.18.24 → 2.20.0

package/dist/components/AddressCard/AddressCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { AddressCardProps } from "./props";
-declare const AddressCard: ({ title, description, handleUpdate, onChange, checked, isShowEditBtn, id, minHeight, name, value, disabled }: AddressCardProps) => React.JSX.Element;
+declare const AddressCard: ({ title, description, content, handleUpdate, onChange, checked, isShowEditBtn, id, minHeight, name, value, disabled, hasBlockDescription }: AddressCardProps) => React.JSX.Element;
 export default AddressCard;

package/dist/components/AddressCard/AddressCard.js

@@ -21,8 +21,8 @@ var RadioButton_1 = __importDefault(require("../RadioButton"));
 var TextLink_1 = __importDefault(require("../TextLink"));
 var react_i18next_1 = require("react-i18next");
 var AddressCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.AddressCardDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.AddressCardDefault.description : _c, _d = _a.handleUpdate, handleUpdate = _d === void 0 ? props_1.AddressCardDefault.handleUpdate : _d, _e = _a.onChange, onChange = _e === void 0 ? props_1.AddressCardDefault.onChange : _e, _f = _a.checked, checked = _f === void 0 ? props_1.AddressCardDefault.checked : _f, _g = _a.isShowEditBtn, isShowEditBtn = _g === void 0 ? props_1.AddressCardDefault.isShowEditBtn : _g, _h = _a.id, id = _h === void 0 ? props_1.AddressCardDefault.id : _h, _j = _a.minHeight, minHeight = _j === void 0 ? props_1.AddressCardDefault.minHeight : _j, _k = _a.name, name = _k === void 0 ? props_1.AddressCardDefault.name : _k, _l = _a.value, value = _l === void 0 ? props_1.AddressCardDefault.value : _l, _m = _a.disabled, disabled = _m === void 0 ? props_1.AddressCardDefault.disabled : _m;
+    var _b = _a.title, title = _b === void 0 ? props_1.AddressCardDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.AddressCardDefault.description : _c, _d = _a.content, content = _d === void 0 ? props_1.AddressCardDefault.content : _d, _e = _a.handleUpdate, handleUpdate = _e === void 0 ? props_1.AddressCardDefault.handleUpdate : _e, _f = _a.onChange, onChange = _f === void 0 ? props_1.AddressCardDefault.onChange : _f, _g = _a.checked, checked = _g === void 0 ? props_1.AddressCardDefault.checked : _g, _h = _a.isShowEditBtn, isShowEditBtn = _h === void 0 ? props_1.AddressCardDefault.isShowEditBtn : _h, _j = _a.id, id = _j === void 0 ? props_1.AddressCardDefault.id : _j, _k = _a.minHeight, minHeight = _k === void 0 ? props_1.AddressCardDefault.minHeight : _k, _l = _a.name, name = _l === void 0 ? props_1.AddressCardDefault.name : _l, _m = _a.value, value = _m === void 0 ? props_1.AddressCardDefault.value : _m, _o = _a.disabled, disabled = _o === void 0 ? props_1.AddressCardDefault.disabled : _o, _p = _a.hasBlockDescription, hasBlockDescription = _p === void 0 ? props_1.AddressCardDefault.hasBlockDescription : _p;
     var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: id, checked: checked, "$minHeight": minHeight }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: id, onChange: onChange, checked: checked, isWrapText: false, layout: "basic", size: "small", label: title, name: name, value: value, disabled: disabled, textSize: "large" }), isShowEditBtn && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "xxxxx", className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleUpdate }, { children: t("edit") })) })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: description }))] })));
+    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: id, checked: checked, "$minHeight": minHeight, "$hasBlockDescription": hasBlockDescription }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: id, onChange: onChange, checked: checked, isWrapText: false, layout: "basic", size: "small", label: title, name: name, value: value, disabled: disabled, textSize: "large" }), isShowEditBtn && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "xxxxx", className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleUpdate }, { children: t("edit") })) })))] })), description && (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: description })), checked && content != null && ((0, jsx_runtime_1.jsx)(AddressCard_styled_1.Content, { children: content }))] })));
 };
 exports.default = AddressCard;

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

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { AddressCardStyledProps } from "./props";
 export declare const AddressCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof AddressCardStyledProps> & AddressCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof AddressCardStyledProps> & AddressCardStyledProps, never>>> & string;
+export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/components/AddressCard/AddressCard.styled.js

@@ -7,8 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AddressCardStyled = void 0;
+exports.Content = exports.AddressCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        display: -webkit-inline-box;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        vertical-align: middle;\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary-hover);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary-hover);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; });
-var templateObject_1;
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        margin-bottom: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--dark);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary-hover);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary-hover);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'middle'; });
+exports.Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: 1rem;\n    cursor: default;\n"], ["\n    margin-top: 1rem;\n    cursor: default;\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/AddressCard/props.d.ts

@@ -1,6 +1,8 @@
+import React from "react";
 export interface AddressCard {
     title?: string;
     description?: string;
+    content?: React.ReactNode;
     handleUpdate?: () => void;
     onChange?: () => void;
     checked?: boolean;
@@ -10,10 +12,12 @@ export interface AddressCard {
     name?: string;
     value?: string;
     disabled?: boolean;
+    hasBlockDescription?: boolean;
 }
 export interface AddressCardStyledProps {
     checked?: boolean;
     $minHeight?: string;
+    $hasBlockDescription?: boolean;
 }
 export declare const AddressCardDefault: AddressCard;
 export type AddressCardProps = typeof AddressCardDefault;

package/dist/components/AddressCard/props.js

@@ -4,6 +4,7 @@ exports.AddressCardDefault = void 0;
 exports.AddressCardDefault = {
     title: "",
     description: "",
+    content: null,
     handleUpdate: null,
     onChange: null,
     checked: false,
@@ -13,4 +14,5 @@ exports.AddressCardDefault = {
     disabled: false,
     isShowEditBtn: true,
     minHeight: "68px",
+    hasBlockDescription: false,
 };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { AddressCardProps } from "../props";
 declare const _default: {
     title: string;
     component: (props: any) => React.JSX.Element;
@@ -13,6 +14,12 @@ declare const _default: {
         isShowEditBtn: {
             control: string;
         };
+        hasBlockDescription: {
+            control: string;
+        };
+        content: {
+            control: boolean;
+        };
     };
 };
 export default _default;
@@ -151,6 +158,38 @@ export declare const CustomMinHeight: {
         minHeight: string;
     };
 };
+export declare const WithContent: {
+    render: (args: AddressCardProps) => React.JSX.Element;
+    args: {
+        title: string;
+        description: any;
+        handleUpdate: () => void;
+        id: string;
+        name: string;
+        value: string;
+        checked: boolean;
+        disabled: boolean;
+        isShowEditBtn: boolean;
+        minHeight: string;
+        hasBlockDescription: boolean;
+    };
+};
+export declare const BlockDescription: {
+    args: {
+        title: string;
+        description: string;
+        handleUpdate: () => void;
+        onChange: () => void;
+        id: string;
+        name: string;
+        value: string;
+        checked: boolean;
+        disabled: boolean;
+        isShowEditBtn: boolean;
+        minHeight: string;
+        hasBlockDescription: boolean;
+    };
+};
 export declare const Complete: {
     args: {
         title: string;

package/dist/components/AddressCard/stories/AddressCard.stories.js

@@ -14,9 +14,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Complete = exports.CustomMinHeight = exports.LongDescription = exports.ShortDescription = exports.DisabledChecked = exports.Disabled = exports.WithoutEditButtonChecked = exports.WithoutEditButton = exports.Checked = exports.Default = void 0;
+exports.Complete = exports.BlockDescription = exports.WithContent = exports.CustomMinHeight = exports.LongDescription = exports.ShortDescription = exports.DisabledChecked = exports.Disabled = exports.WithoutEditButtonChecked = exports.WithoutEditButton = exports.Checked = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var AddressCard_1 = __importDefault(require("../AddressCard"));
+var Input_1 = __importDefault(require("../../Input"));
+var WithContentStory = function (args) {
+    var _a;
+    var _b = react_1.default.useState((_a = args.checked) !== null && _a !== void 0 ? _a : false), checked = _b[0], setChecked = _b[1];
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '305px' } }, { children: (0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, args, { checked: checked, onChange: function () { return setChecked(function (prev) { return !prev; }); }, content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: '0 0 0.5rem', font: 'var(--body-regular-14-17)', color: 'var(--dark)' } }, { children: "Aboneli\u011Fin se\u00E7ti\u011Fin tarihte otomatik olarak yeniden ba\u015Flar." })), (0, jsx_runtime_1.jsx)(Input_1.default, { label: "Tarih", placeholder: "GG/AA/YYYY", type: "text" })] }) })) })));
+};
 exports.default = {
     title: 'Components/AddressCard',
     component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '305px' } }, { children: (0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, props)) })); },
@@ -25,6 +32,8 @@ exports.default = {
         checked: { control: 'boolean' },
         disabled: { control: 'boolean' },
         isShowEditBtn: { control: 'boolean' },
+        hasBlockDescription: { control: 'boolean' },
+        content: { control: false },
     }
 };
 exports.Default = {
@@ -162,6 +171,38 @@ exports.CustomMinHeight = {
         minHeight: "120px",
     },
 };
+exports.WithContent = {
+    render: function (args) { return (0, jsx_runtime_1.jsx)(WithContentStory, __assign({}, args)); },
+    args: {
+        title: "Belirli bir tarihte tekrar başlasın",
+        description: null,
+        handleUpdate: function () { return console.log('handleUpdate'); },
+        id: "addressCard_content",
+        name: "pause",
+        value: "pause_date",
+        checked: false,
+        disabled: false,
+        isShowEditBtn: false,
+        minHeight: "auto",
+        hasBlockDescription: true,
+    },
+};
+exports.BlockDescription = {
+    args: {
+        title: "Block Description Address",
+        description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
+        handleUpdate: function () { return console.log('handleUpdate'); },
+        onChange: function () { return console.log('onChange'); },
+        id: "addressCard_block",
+        name: "address",
+        value: "address_block",
+        checked: false,
+        disabled: false,
+        isShowEditBtn: true,
+        minHeight: "68px",
+        hasBlockDescription: true,
+    },
+};
 exports.Complete = {
     args: {
         title: "Complete Address Card",

package/dist/components/Button/Button.js

@@ -33,15 +33,17 @@ var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Loader_1 = __importDefault(require("../Loader"));
 var Children = function (props) {
-    var children = props.children, icon = props.icon, isLoading = props.isLoading, iconSize = props.iconSize;
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('children', { 'isLoading': isLoading }) }, { children: children })), icon && ((0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: iconSize, height: iconSize, name: icon }) }))] });
+    var children = props.children, icon = props.icon, isLoading = props.isLoading, iconSize = props.iconSize, iconPosition = props.iconPosition;
+    var iconElement = icon && ((0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, __assign({ "$iconPosition": iconPosition, "$icon": icon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: iconSize, height: iconSize, name: icon }) })));
+    var content = ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('children', { 'isLoading': isLoading }) }, { children: children })));
+    return iconPosition === 'left' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconElement, content] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, iconElement] }));
 };
 var Button = (0, react_1.forwardRef)(function (props, ref) {
-    var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, _a = props.icon, icon = _a === void 0 ? props_1.ButtonDefault.icon : _a, children = props.children, _b = props.iconSize, iconSize = _b === void 0 ? props_1.ButtonDefault.iconSize : _b, _c = props.tooltip, tooltip = _c === void 0 ? props_1.ButtonDefault.tooltip : _c, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "children", "iconSize", "tooltip"]);
+    var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, _a = props.icon, icon = _a === void 0 ? props_1.ButtonDefault.icon : _a, _b = props.iconPosition, iconPosition = _b === void 0 ? props_1.ButtonDefault.iconPosition : _b, children = props.children, _c = props.iconSize, iconSize = _c === void 0 ? props_1.ButtonDefault.iconSize : _c, _d = props.tooltip, tooltip = _d === void 0 ? props_1.ButtonDefault.tooltip : _d, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "iconPosition", "children", "iconSize", "tooltip"]);
     var handleClick = function (e) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         e.currentTarget.blur();
     };
-    return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: handleClick, disabled: disabled, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children && (0, jsx_runtime_1.jsx)("span", { children: children })] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: handleClick, disabled: disabled, "$size": size, "$variant": variant, "$width": width, "$icon": icon, "$iconPosition": iconPosition, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize, iconPosition: iconPosition }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children && (0, jsx_runtime_1.jsx)("span", { children: children })] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
 });
 exports.default = Button;

package/dist/components/Button/Button.styled.js

@@ -128,6 +128,6 @@ exports.ButtonStyled = styled_components_1.default.button(templateObject_6 || (t
         default:
             return "48px";
     }
-}, function (props) { return props.$icon && !props.$isLoading ? "10px" : "0"; });
-exports.IconStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  svg{\n    width: ", ";\n    height: ", ";\n    transition: all .2s ease;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  svg{\n    width: ", ";\n    height: ", ";\n    transition: all .2s ease;\n  }\n"])), function (props) { return props.$iconSize && props.$iconSize; }, function (props) { return props.$iconSize && props.$iconSize; });
+}, function (props) { return props.$icon && !props.$isLoading && props.$iconPosition !== 'left' ? "10px" : "0"; });
+exports.IconStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  svg{\n    width: ", ";\n    height: ", ";\n    transition: all .2s ease;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n  svg{\n    width: ", ";\n    height: ", ";\n    transition: all .2s ease;\n  }\n"])), function (props) { return props.$iconPosition === 'left' && props.$icon ? "10px" : "0"; }, function (props) { return props.$iconSize && props.$iconSize; }, function (props) { return props.$iconSize && props.$iconSize; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 export declare const variants: string[];
 export declare const sizes: string[];
+export declare const iconPositions: readonly ["left", "right"];
 export declare const iconNames: string[];
 type SIZES = typeof sizes[number];
 type VARIANT = typeof variants[number];
 type ICON = typeof iconNames[any];
+type ICON_POSITION = typeof iconPositions[number];
 export interface Button {
     size: SIZES;
     variant: VARIANT;
@@ -13,6 +15,7 @@ export interface Button {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     disabled?: boolean;
     icon?: ICON;
+    iconPosition?: ICON_POSITION;
     width?: string;
     type?: "submit" | "reset" | "button" | undefined;
     iconSize?: string;
@@ -22,6 +25,7 @@ export interface ButtonStyledProps {
     $size?: SIZES;
     $variant?: VARIANT;
     $icon?: ICON;
+    $iconPosition?: ICON_POSITION;
     $width?: string;
     $isLoading?: boolean;
     $iconSize?: string;

package/dist/components/Button/props.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonDefault = exports.iconNames = exports.sizes = exports.variants = void 0;
+exports.ButtonDefault = exports.iconNames = exports.iconPositions = exports.sizes = exports.variants = void 0;
 var iconList_1 = require("../Icon/iconList");
 exports.variants = ['primary', 'secondary', 'inverted', 'ghost', "success"];
 exports.sizes = ['big', 'medium', 'small', 'xsmall'];
+exports.iconPositions = ['left', 'right'];
 exports.iconNames = Object.keys(iconList_1.iconList);
 exports.ButtonDefault = {
     size: 'medium',
@@ -14,4 +15,5 @@ exports.ButtonDefault = {
     iconSize: "1rem",
     tooltip: null,
     icon: null,
+    iconPosition: 'right',
 };

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

@@ -16,6 +16,10 @@ declare const _default: {
             control: string;
             options: string[];
         };
+        iconPosition: {
+            control: string;
+            options: readonly ["left", "right"];
+        };
         onClick: {
             action: string;
         };
@@ -48,6 +52,21 @@ export declare const Icon: {
         tooltip: string;
     };
 };
+export declare const IconLeft: {
+    args: {
+        children: string;
+        icon: string;
+        iconPosition: string;
+        iconSize: string;
+        variant: string;
+        size: string;
+        disabled: boolean;
+        isLoading: boolean;
+        width: string;
+        type: string;
+        tooltip: string;
+    };
+};
 export declare const Primary: {
     args: {
         variant: string;

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

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithTooltip = exports.FullWidth = exports.IconOnly = exports.Disabled = exports.Loading = exports.AllSizes = exports.AllVariants = exports.Success = exports.Ghost = exports.Inverted = exports.Secondary = exports.Primary = exports.Icon = exports.Default = void 0;
+exports.WithTooltip = exports.FullWidth = exports.IconOnly = exports.Disabled = exports.Loading = exports.AllSizes = exports.AllVariants = exports.Success = exports.Ghost = exports.Inverted = exports.Secondary = exports.Primary = exports.IconLeft = exports.Icon = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Button_1 = __importDefault(require("../Button"));
 var props_1 = require("../props");
@@ -27,6 +27,7 @@ exports.default = {
         variant: { control: 'select', options: props_1.variants },
         size: { control: 'select', options: props_1.sizes },
         icon: { control: 'select', options: Object.keys(iconList_1.iconList) },
+        iconPosition: { control: 'select', options: props_1.iconPositions },
         onClick: { action: 'clicked' }
     }
 };
@@ -45,6 +46,9 @@ exports.Default = {
 exports.Icon = {
     args: __assign(__assign({}, exports.Default.args), { icon: 'ArrowSmallRight', iconSize: "1rem" }),
 };
+exports.IconLeft = {
+    args: __assign(__assign({}, exports.Default.args), { children: "Geri", icon: 'ArrowLeft', iconPosition: 'left', iconSize: "1rem" }),
+};
 // Variant specific stories
 exports.Primary = {
     args: __assign(__assign({}, exports.Default.args), { variant: 'primary' }),

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CheckboxProps } from "./props";
-declare const Checkbox: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, color, textSize, verticalAlign, required, readOnly, }: CheckboxProps) => import("react").JSX.Element;
+declare const Checkbox: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, textSize, verticalAlign, required, readOnly, }: CheckboxProps) => import("react").JSX.Element;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -14,15 +14,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var props_1 = require("./props");
 var Checkbox_styled_1 = require("./Checkbox.styled");
-var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
+var getRootCssVariable_1 = require("../../utils/getRootCssVariable");
 var Checkbox = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.color, color = _m === void 0 ? props_1.CheckboxDefault.color : _m, _o = _a.textSize, textSize = _o === void 0 ? props_1.CheckboxDefault.textSize : _o, _p = _a.verticalAlign, verticalAlign = _p === void 0 ? props_1.CheckboxDefault.verticalAlign : _p, _q = _a.required, required = _q === void 0 ? props_1.CheckboxDefault.required : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.CheckboxDefault.readOnly : _r;
-    var _s = (0, react_1.useState)(color), inputColor = _s[0], setInputColor = _s[1];
+    var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.textSize, textSize = _m === void 0 ? props_1.CheckboxDefault.textSize : _m, _o = _a.verticalAlign, verticalAlign = _o === void 0 ? props_1.CheckboxDefault.verticalAlign : _o, _p = _a.required, required = _p === void 0 ? props_1.CheckboxDefault.required : _p, _q = _a.readOnly, readOnly = _q === void 0 ? props_1.CheckboxDefault.readOnly : _q;
     var t = (0, react_i18next_1.useTranslation)().t;
-    (0, react_1.useEffect)(function () {
-        setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
-    });
-    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$color": inputColor, "$textSize": textSize, "$verticalAlign": verticalAlign, "$required": required }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, readOnly: readOnly }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "indicator" }), label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "labelsWrapper" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, " ", !required && (0, jsx_runtime_1.jsxs)("b", { children: ["(", t("OPTIONAL"), ")"] })] })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$color": (0, getRootCssVariable_1.getPrimaryColor)(), "$textSize": textSize, "$verticalAlign": verticalAlign, "$required": required }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, readOnly: readOnly }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "indicator" }), label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "labelsWrapper" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, " ", !required && (0, jsx_runtime_1.jsxs)("b", { children: ["(", t("OPTIONAL"), ")"] })] })) })))] })));
 };
 exports.default = Checkbox;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, color, textSize, verticalAlign, required, readOnly, }: import("../props").Checkbox) => import("react").JSX.Element;
+    component: ({ value, checked, onChange, name, id, label, disabled, size, valid, labelOffset, textSize, verticalAlign, required, readOnly, }: import("../props").Checkbox) => import("react").JSX.Element;
     tags: string[];
     argTypes: {
         size: {

package/dist/components/Icon/iconList/ForwardMd.d.ts

@@ -0,0 +1,3 @@
+export default SvgForwardMd;
+declare function SvgForwardMd(props: any): React.JSX.Element;
+import * as React from "react";

package/dist/components/Icon/iconList/ForwardMd.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgForwardMd = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.5448 10.792C16.1729 11.4715 16.1731 12.5276 15.5448 13.207L15.4003 13.3467L9.55554 18.4082C8.40133 19.4072 6.6073 18.5872 6.6073 17.0605V6.9375C6.60741 5.41077 8.40138 4.5914 9.55554 5.59082L15.4003 10.6523L15.5448 10.792Z", stroke: "currentColor", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("rect", { x: 17.5, y: 5.5, width: 1, height: 13, rx: 0.5, stroke: "currentColor" })] }))); };
+exports.default = SvgForwardMd;

package/dist/components/Icon/iconList/PauseMd.d.ts

@@ -0,0 +1,3 @@
+export default SvgPauseMd;
+declare function SvgPauseMd(props: any): React.JSX.Element;
+import * as React from "react";

package/dist/components/Icon/iconList/PauseMd.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgPauseMd = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("rect", { x: 5.62903, y: 5.38672, width: 4.80635, height: 13.2254, rx: 1.56127, stroke: "currentColor", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("rect", { x: 13.5647, y: 5.38672, width: 4.80635, height: 13.2254, rx: 1.56127, stroke: "currentColor", strokeWidth: 2 })] }))); };
+exports.default = SvgPauseMd;

package/dist/components/Icon/iconList/PlayMd.d.ts

@@ -0,0 +1,3 @@
+export default SvgPlayMd;
+declare function SvgPlayMd(props: any): React.JSX.Element;
+import * as React from "react";

package/dist/components/Icon/iconList/PlayMd.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgPlayMd = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M17.3311 10.792C17.9591 11.4715 17.9594 12.5276 17.3311 13.207L17.1865 13.3467L11.3418 18.4082C10.1876 19.4072 8.39355 18.5872 8.39355 17.0605V6.9375C8.39366 5.41077 10.1876 4.5914 11.3418 5.59082L17.1865 10.6523L17.3311 10.792Z", stroke: "currentColor", strokeWidth: 2 }) }))); };
+exports.default = SvgPlayMd;

package/dist/components/Icon/iconList/Rectangle.js

@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
-var SvgRectangle = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 90, height: 90, viewBox: "0 0 90 90", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { id: "Rectangle 8", d: "M5.21017e-05 62.2132C7.71369e-05 58.235 1.58042 54.4197 4.39344 51.6067L52.5829 3.41714C54.7708 1.22916 57.7384 -3.13031e-05 60.8326 -3.55178e-05L82 -5.45681e-05C86.4183 -5.59168e-05 90 3.58166 90 7.99994L83 7.99994L7.99997 82.9999V89.9999C3.58164 89.9999 -0.000102999 86.4181 -7.50132e-05 81.9998L5.21017e-05 62.2132Z", fill: "url(#paint0_linear_17925_27746)" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", __assign({ id: "paint0_linear_17925_27746", x1: 93.9999, y1: 3.99994, x2: 73, y2: -17, gradientUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#7730FA" }), (0, jsx_runtime_1.jsx)("stop", { offset: 1, stopColor: "#9961FF" })] })) })] }))); };
+var SvgRectangle = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 90, height: 90, viewBox: "0 0 90 90", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { id: "Rectangle 8", d: "M5.21017e-05 62.2132C7.71369e-05 58.235 1.58042 54.4197 4.39344 51.6067L52.5829 3.41714C54.7708 1.22916 57.7384 -3.13031e-05 60.8326 -3.55178e-05L82 -5.45681e-05C86.4183 -5.59168e-05 90 3.58166 90 7.99994L83 7.99994L7.99997 82.9999V89.9999C3.58164 89.9999 -0.000102999 86.4181 -7.50132e-05 81.9998L5.21017e-05 62.2132Z", fill: "url(#paint0_linear_17925_27746)" }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", __assign({ id: "paint0_linear_17925_27746", x1: 93.9999, y1: 3.99994, x2: 73, y2: -17, gradientUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "var(--primary-linear)" }), (0, jsx_runtime_1.jsx)("stop", { offset: 1, stopColor: "var(--primary-linear-to)" })] })) })] }))); };
 exports.default = SvgRectangle;

package/dist/components/Icon/iconList/TimeCircleMd.d.ts

@@ -0,0 +1,3 @@
+export default SvgTimeCircleMd;
+declare function SvgTimeCircleMd(props: any): React.JSX.Element;
+import * as React from "react";

package/dist/components/Icon/iconList/TimeCircleMd.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var SvgTimeCircleMd = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.2499 12C21.2499 17.109 17.1089 21.25 11.9999 21.25C6.89088 21.25 2.74988 17.109 2.74988 12C2.74988 6.891 6.89088 2.75 11.9999 2.75C17.1089 2.75 21.2499 6.891 21.2499 12Z", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.4315 14.9417L11.6615 12.6927V7.8457", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+exports.default = SvgTimeCircleMd;