krl-alfred 2.18.23 → 2.19.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

@@ -13,6 +13,12 @@ declare const _default: {
         isShowEditBtn: {
             control: string;
         };
+        hasBlockDescription: {
+            control: string;
+        };
+        content: {
+            control: boolean;
+        };
     };
 };
 export default _default;
@@ -151,6 +157,38 @@ export declare const CustomMinHeight: {
         minHeight: string;
     };
 };
+export declare const WithContent: {
+    render: (args: any) => 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,11 @@ 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"));
 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 +27,8 @@ exports.default = {
         checked: { control: 'boolean' },
         disabled: { control: 'boolean' },
         isShowEditBtn: { control: 'boolean' },
+        hasBlockDescription: { control: 'boolean' },
+        content: { control: false },
     }
 };
 exports.Default = {
@@ -162,6 +166,42 @@ exports.CustomMinHeight = {
         minHeight: "120px",
     },
 };
+exports.WithContent = {
+    render: 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" })] }) })) })));
+    },
+    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/Icon/iconList/CheckMarkMd.d.ts

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

package/dist/components/Icon/iconList/CheckMarkMd.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 SvgCheckMarkMd = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6.25019 9.05079C5.83271 9.50742 5.11338 9.50742 4.6959 9.05079L3.47997 7.72087C2.74049 6.91206 1.46638 6.91206 0.726898 7.72087C0.0754094 8.43343 0.075409 9.5254 0.726897 10.238L3.91875 13.7291C4.75372 14.6423 6.19237 14.6423 7.02734 13.7291L15.2736 4.7097C15.9251 3.99713 15.9251 2.90517 15.2736 2.1926C14.5341 1.3838 13.26 1.3838 12.5205 2.1926L6.25019 9.05079Z", fill: "currentColor" }) }))); };
+exports.default = SvgCheckMarkMd;

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/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;