krl-alfred 2.23.4 → 2.23.6

package/dist/components/CategoryMenu/CategoryMenu.js

@@ -32,7 +32,8 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
 var OptionMenu_1 = __importDefault(require("../OptionMenu"));
 var Badges_1 = __importDefault(require("../Badges"));
 var CategoryMenu = function (_a) {
-    var _b = _a.data, data = _b === void 0 ? props_1.CategoryMenuDefault.data : _b, _c = _a.subMenuRowLength, subMenuRowLength = _c === void 0 ? props_1.CategoryMenuDefault.subMenuRowLength : _c, _d = _a.showIcons, showIcons = _d === void 0 ? props_1.CategoryMenuDefault.showIcons : _d;
+    var _b;
+    var _c = _a.data, data = _c === void 0 ? props_1.CategoryMenuDefault.data : _c, _d = _a.subMenuRowLength, subMenuRowLength = _d === void 0 ? props_1.CategoryMenuDefault.subMenuRowLength : _d, _e = _a.showIcons, showIcons = _e === void 0 ? props_1.CategoryMenuDefault.showIcons : _e;
     var ButtonLinkComponent = function (_a) {
         var item = _a.item, children = _a.children;
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })));
@@ -41,8 +42,9 @@ var CategoryMenu = function (_a) {
         var item = __rest(_a, []);
         return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, __assign({ "$isActiveCategory": item.isActive, "$hasCustomItem": item.hasCustomItem }, { children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(item === null || item === void 0 ? void 0 : item.badgeTextSm) && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonBadgeSm, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: item === null || item === void 0 ? void 0 : item.badgeTextSm }) })), showIcons && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, __assign({ "$hasAnimation": item === null || item === void 0 ? void 0 : item.badgeText }, { children: (item === null || item === void 0 ? void 0 : item.badgeText) ? ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonBadge, { children: item === null || item === void 0 ? void 0 : item.badgeText })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { color: ["ElSatis"].includes(item.icon) ? "var(--primary)" : null, name: item.icon, hasColorChanged: !["CampaignColorful", "Lightning", "Flash", "Valentine", "NewYear"].includes(item.icon) })) }))), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, __assign({ "$showIcons": showIcons }, { children: item.name }))] }) })), item.children] })));
     };
-    return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
+    var hasFewCategories = ((_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0) <= 4;
+    return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, __assign({ "$hasFewCategories": hasFewCategories }, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
             return ((0, jsx_runtime_1.jsx)(MenuButton, __assign({}, item, { children: item.children.length > 0 && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.children, rowLength: item.subMenuRowLength || subMenuRowLength }) })) }), item.id));
-        }) }));
+        }) })));
 };
 exports.default = CategoryMenu;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CategoryMenuStyled } from "./props";
-export declare const CategoryMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
+export declare const CategoryMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never>>> & string;
 export declare const CategoryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never>>> & string;
 export declare const CategoryItemButtonInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const CategoryItemButtonIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof CategoryMenuStyled> & CategoryMenuStyled, never>>> & string;

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -29,7 +29,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonBadgeSm = exports.CategoryItemButtonBadge = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])));
+exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])), function (props) { return props.$hasFewCategories ? 'flex-start' : 'space-between'; });
 var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"])));
 exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; }, function (props) { return props.$hasCustomItem ? "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n          &:before{\n            content: '';\n            background-color:var(--grey-10);\n            height: 39px;\n            width: 2px;\n            display: block;\n            vertical-align: middle;\n            border-radius: 8px;\n            margin-right: 6px;\n            margin-left: 6px;\n          }\n    " : ""; });
 exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));

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

@@ -11,6 +11,7 @@ export interface CategoryMenuStyled {
     $hasAnimation?: boolean;
     $hasCustomItem?: boolean;
     $showIcons?: boolean;
+    $hasFewCategories?: boolean;
 }
 export declare const CategoryMenuDefault: CategoryMenu;
 export type CategoryMenuProps = typeof CategoryMenuDefault;

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

@@ -179,3 +179,166 @@ export declare const Default: {
         })[];
     };
 };
+export declare const FourCategories: {
+    argTypes: {
+        subMenuRowLength: {
+            control: string;
+        };
+        showIcons: {
+            control: string;
+        };
+        data: {
+            control: string;
+        };
+    };
+    args: {
+        subMenuRowLength: number;
+        showIcons: boolean;
+        data: ({
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: string;
+            medias: any[];
+            icon: string;
+            children: ({
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: any;
+                medias: any[];
+                children: any[];
+                parent: any[];
+                hasBadge: boolean;
+                badgeText: string;
+            } | {
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: any;
+                medias: any[];
+                children: any[];
+                parent: any[];
+                hasBadge?: undefined;
+                badgeText?: undefined;
+            })[];
+            parent: any[];
+            badgeTextSm?: undefined;
+            component?: undefined;
+            hasCustomItem?: undefined;
+        } | {
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: string;
+            medias: any[];
+            icon: string;
+            children: {
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: string;
+                medias: any[];
+                children: any[];
+                parent: any[];
+            }[];
+            parent: any[];
+            badgeTextSm?: undefined;
+            component?: undefined;
+            hasCustomItem?: undefined;
+        } | {
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: string;
+            medias: any[];
+            icon: string;
+            badgeTextSm: string;
+            children: {
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: string;
+                medias: any[];
+                children: any[];
+                parent: any[];
+            }[];
+            parent: any[];
+            component?: undefined;
+            hasCustomItem?: undefined;
+        } | {
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: any;
+            medias: any[];
+            icon: string;
+            component: ({ children }: {
+                children: any;
+            }) => import("react").JSX.Element;
+            children: {
+                id: number;
+                parentId: number;
+                name: string;
+                filterName: any;
+                isShowHeader: boolean;
+                slug: string;
+                productCount: number;
+                headerMediaUrl: any;
+                medias: any[];
+                children: any[];
+            }[];
+            parent?: undefined;
+            badgeTextSm?: undefined;
+            hasCustomItem?: undefined;
+        } | {
+            id: number;
+            parentId: number;
+            name: string;
+            filterName: any;
+            isShowHeader: boolean;
+            slug: string;
+            productCount: number;
+            headerMediaUrl: any;
+            medias: any[];
+            icon: string;
+            children: any[];
+            hasCustomItem: boolean;
+            parent?: undefined;
+            badgeTextSm?: undefined;
+            component?: undefined;
+        })[];
+    };
+};

package/dist/components/CategoryMenu/stories/CategoryMenu.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.FourCategories = exports.Default = void 0;
 var CategoryMenu_1 = __importDefault(require("../CategoryMenu"));
 var categories_1 = __importDefault(require("../../../jsons/categories"));
 exports.default = {
@@ -28,3 +28,15 @@ exports.Default = {
         data: categories_1.default,
     },
 };
+exports.FourCategories = {
+    argTypes: {
+        subMenuRowLength: { control: 'number' },
+        showIcons: { control: 'boolean' },
+        data: { control: 'disabled' }
+    },
+    args: {
+        subMenuRowLength: 7,
+        showIcons: true,
+        data: categories_1.default.slice(0, 4),
+    },
+};

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

@@ -47,9 +47,13 @@ var getUncheckedBackground = function (props) {
 var getCheckedBackground = function (props) {
     return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color, name: "CheckboxElementChecked" }));
 };
-exports.CheckboxWrapper = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n"], ["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n"])), function (props) { return props.$verticalAlign; });
-exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"], ["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"])), function (props) { return getUncheckedBackground(props); }, function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return props.disabled ? 'not-allowed' : 'pointer'; });
-exports.CheckboxInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked + ", " {\n        background-image: url('", "');\n    }\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked + ", " {\n        background-image: url('", "');\n    }\n"])), exports.CheckboxIndicator, function (props) { return getCheckedBackground(props); });
-exports.LabelsWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"], ["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"])), function (props) { return props.disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) { return !props.$valid && 'color: var(--red)'; });
+exports.CheckboxWrapper = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"], ["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"])), function (props) { return props.$verticalAlign; }, function (props) { return props.disabled ? 'default' : 'pointer'; });
+exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"], ["\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n"])), function (props) { return getUncheckedBackground(props); }, function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return props.disabled ? 'default' : 'pointer'; });
+exports.CheckboxInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        background-image: url('", "');\n    }\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        background-image: url('", "');\n    }\n"])), exports.CheckboxIndicator, function (props) { return getCheckedBackground(props); });
+exports.LabelsWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"], ["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, function (props) {
+    if (props.disabled)
+        return 'var(--dark-opacity-25)';
+    return props.$valid ? 'var(--dark)' : 'var(--red)';
+}, function (props) { return !props.disabled && !props.$valid && 'color: var(--red)'; });
 exports.CheckboxLabel = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--dark-opacity-50);\n    }\n"], ["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--dark-opacity-50);\n    }\n"])), function (props) { return getLabelFont(props.$textSize); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/DescriptionCard/DescriptionCard.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DescriptionCardProps } from "./props";
-declare const DescriptionCard: ({ title, titleSize, headerSize, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
+declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
 export default DescriptionCard;

package/dist/components/DescriptionCard/DescriptionCard.js

@@ -32,15 +32,17 @@ var SubcategoryRow = function (_a) {
     return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
 };
 var DescriptionCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerDescription, headerDescription = _e === void 0 ? props_1.DescriptionCardDefault.headerDescription : _e, _f = _a.headerButtonText, headerButtonText = _f === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _f, _g = _a.hasHeaderDropdown, hasHeaderDropdown = _g === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _g, _h = _a.hasHeaderBackButton, hasHeaderBackButton = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _h, _j = _a.list, list = _j === void 0 ? props_1.DescriptionCardDefault.list : _j, _k = _a.hasBadge, hasBadge = _k === void 0 ? props_1.DescriptionCardDefault.hasBadge : _k, _l = _a.badgeText, badgeText = _l === void 0 ? props_1.DescriptionCardDefault.badgeText : _l, _m = _a.hasHeader, hasHeader = _m === void 0 ? props_1.DescriptionCardDefault.hasHeader : _m, _o = _a.hasHeaderBackground, hasHeaderBackground = _o === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _o, _p = _a.hasHeaderBorder, hasHeaderBorder = _p === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _p, _q = _a.hasRounded, hasRounded = _q === void 0 ? props_1.DescriptionCardDefault.hasRounded : _q, _r = _a.hasBorder, hasBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasBorder : _r, _s = _a.headerImage, headerImage = _s === void 0 ? props_1.DescriptionCardDefault.headerImage : _s, _t = _a.headerRightContent, headerRightContent = _t === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _t, _u = _a.dropdownList, dropdownList = _u === void 0 ? props_1.DescriptionCardDefault.dropdownList : _u, _v = _a.dropdownWidth, dropdownWidth = _v === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _v, _w = _a.accordionList, accordionList = _w === void 0 ? props_1.DescriptionCardDefault.accordionList : _w, _x = _a.boxSize, boxSize = _x === void 0 ? props_1.DescriptionCardDefault.boxSize : _x, _y = _a.hasHeaderButton, hasHeaderButton = _y === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _y, _z = _a.headerButtonWidth, headerButtonWidth = _z === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _z, _0 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _0 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _0, _1 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _1 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _1, _2 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _2, _3 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _3, _4 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _4, _5 = _a.content, content = _5 === void 0 ? props_1.DescriptionCardDefault.content : _5, _6 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _6 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _6, _7 = _a.middleTitle, middleTitle = _7 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _7, _8 = _a.subcategoryList, subcategoryList = _8 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _8, _9 = _a.hasCategoryLayout, hasCategoryLayout = _9 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _9, _10 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _10 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _10, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _11 = _a.customColumnSpan, customColumnSpan = _11 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _11;
+    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasHeader, hasHeader = _o === void 0 ? props_1.DescriptionCardDefault.hasHeader : _o, _p = _a.hasHeaderBackground, hasHeaderBackground = _p === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _p, _q = _a.hasHeaderBorder, hasHeaderBorder = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _q, _r = _a.hasRounded, hasRounded = _r === void 0 ? props_1.DescriptionCardDefault.hasRounded : _r, _s = _a.hasBorder, hasBorder = _s === void 0 ? props_1.DescriptionCardDefault.hasBorder : _s, _t = _a.headerImage, headerImage = _t === void 0 ? props_1.DescriptionCardDefault.headerImage : _t, _u = _a.headerRightContent, headerRightContent = _u === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _u, _v = _a.dropdownList, dropdownList = _v === void 0 ? props_1.DescriptionCardDefault.dropdownList : _v, _w = _a.dropdownWidth, dropdownWidth = _w === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _w, _x = _a.accordionList, accordionList = _x === void 0 ? props_1.DescriptionCardDefault.accordionList : _x, _y = _a.boxSize, boxSize = _y === void 0 ? props_1.DescriptionCardDefault.boxSize : _y, _z = _a.hasHeaderButton, hasHeaderButton = _z === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _z, _0 = _a.headerButtonWidth, headerButtonWidth = _0 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _0, _1 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _1 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _1, _2 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _2, _3 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _3 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _3, _4 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _4, _5 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _5, _6 = _a.content, content = _6 === void 0 ? props_1.DescriptionCardDefault.content : _6, _7 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _7 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _7, _8 = _a.middleTitle, middleTitle = _8 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _8, _9 = _a.subcategoryList, subcategoryList = _9 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _9, _10 = _a.hasCategoryLayout, hasCategoryLayout = _10 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _10, _11 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _11 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _11, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _12 = _a.customColumnSpan, customColumnSpan = _12 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _12;
     var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
     var HeaderDropdownComponent = hasCategoryLayout ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
     var hasHeaderRightContent = !!headerRightContent;
-    var isHeaderClickable = !!onHeaderClick;
-    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$hasMiddleTitle": (!hasTwoColumnHeader && !!middleTitle) || hasCategoryLayout, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder, "$hasHeaderDescription": Boolean(headerDescription), "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
+    var isHeaderClickable = !!onHeaderClick && !hasHeaderBackButton;
+    var handleBackTitleClick = onHeaderClick !== null && onHeaderClick !== void 0 ? onHeaderClick : (onHeaderBack ? function () { onHeaderBack(); } : undefined);
+    var isBackTitleClickable = hasHeaderBackButton && !!handleBackTitleClick;
+    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasTwoColumnHeader": hasTwoColumnHeader, "$hasHeaderRightContent": hasHeaderRightContent, "$hasMiddleTitle": (!hasTwoColumnHeader && !!middleTitle) || hasCategoryLayout, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder, "$hasHeaderDescription": Boolean(headerDescription), "$headerSize": headerSize, "$headerAlignItems": headerAlignItems }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
                                     e.stopPropagation();
                                     onHeaderBack === null || onHeaderBack === void 0 ? void 0 : onHeaderBack();
-                                }, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), middleTitle && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasHeaderRightContent": hasHeaderRightContent, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(HeaderDropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), content && (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ContentWrapper, __assign({ "$hasNoContentSidePadding": hasNoContentSidePadding }, { children: content })), (hasCategoryLayout || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryLayout: hasCategoryLayout }, key)); }) }))) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize, "$hasHeader": hasHeader, "$hasAccordion": (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 }, { children: list.map(function (listItem, key) {
+                                }, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: isHeaderClickable ? onHeaderClick : undefined }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleTopStyled, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize, "$isClickable": isBackTitleClickable, onClick: isBackTitleClickable ? handleBackTitleClick : undefined }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), headerDescription && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleDescriptionStyled, { children: headerDescription }))] }))] }), middleTitle && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryLayout": hasCategoryLayout, "$hasHeaderRightContent": hasHeaderRightContent, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(HeaderDropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), content && (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ContentWrapper, __assign({ "$hasNoContentSidePadding": hasNoContentSidePadding }, { children: content })), (hasCategoryLayout || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryLayout: hasCategoryLayout }, key)); }) }))) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize, "$hasHeader": hasHeader, "$hasAccordion": (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 }, { children: list.map(function (listItem, key) {
                     var _a;
                     var span = (_a = customColumnSpan[key]) !== null && _a !== void 0 ? _a : 1;
                     return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.ListItemStyled, __assign({ "$columnSpan": span }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayTitleStyled, { children: listItem.title }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayValueStyled, { children: listItem.display || "-" })] }), key));

package/dist/components/DescriptionCard/DescriptionCard.styled.js

@@ -14,7 +14,7 @@ exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_
 exports.DropdownWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n\n    &:hover{\n        > div{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.2s;\n        }\n        button{\n            svg{\n                transform: rotate(180deg);\n            }\n        }\n    }\n"], ["\n    display: block;\n    position: relative;\n\n    &:hover{\n        > div{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.2s;\n        }\n        button{\n            svg{\n                transform: rotate(180deg);\n            }\n        }\n    }\n"])));
 exports.CategoryDropdownWrapper = (0, styled_components_1.default)(exports.DropdownWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"], ["\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"])));
 exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    border-radius: ", ";\n    padding: 0;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: ", ";\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n        z-index: 2;\n    }\n"], ["\n    display: block;\n    position: relative;\n    border-radius: ", ";\n    padding: 0;\n    &:before{\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border: ", ";\n        border-radius: inherit;\n        user-select: none;\n        pointer-events: none;\n        z-index: 2;\n    }\n"])), function (props) { return props.$hasRounded ? "0.5rem" : "0"; }, function (props) { return props.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
-exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: ", ";\n    padding: ", ";\n    min-height: ", ";\n    box-sizing: border-box;\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n    border-bottom: ", ";\n    ", "\n"], ["\n    margin: ", ";\n    padding: ", ";\n    min-height: ", ";\n    box-sizing: border-box;\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1.5rem;\n    background-color: ", ";\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n    border-bottom: ", ";\n    ", "\n"])), function (props) { return props.$hasHeaderBackground ? '0' : '0 1.5rem'; }, function (props) {
+exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: ", ";\n    padding: ", ";\n    min-height: ", ";\n    box-sizing: border-box;\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: ", ";\n    gap: 1.5rem;\n    background-color: ", ";\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n    border-bottom: ", ";\n    ", "\n"], ["\n    margin: ", ";\n    padding: ", ";\n    min-height: ", ";\n    box-sizing: border-box;\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: ", ";\n    gap: 1.5rem;\n    background-color: ", ";\n    border-top-left-radius: 0.5rem;\n    border-top-right-radius: 0.5rem;\n    border-bottom: ", ";\n    ", "\n"])), function (props) { return props.$hasHeaderBackground ? '0' : '0 1.5rem'; }, function (props) {
     var hasImage = Boolean(props.$headerImage);
     var reduceBottomPadding = props.$hasHeaderDescription && props.$hasHeaderBorder;
     if (props.$hasHeaderBackground) {
@@ -35,7 +35,7 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
     if (props.$hasMiddleTitle)
         return '1fr 1fr auto';
     return '1fr auto';
-}, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$hasCategoryLayout && "\n        &:hover ".concat(exports.CategoryDropdownWrapper, ",\n        ").concat(exports.CategoryDropdownWrapper, ":hover,\n        ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n            opacity: 1;\n            visibility: visible;\n        }\n    "); });
+}, function (props) { return props.$headerAlignItems || 'center'; }, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$hasCategoryLayout && "\n        &:hover ".concat(exports.CategoryDropdownWrapper, ",\n        ").concat(exports.CategoryDropdownWrapper, ":hover,\n        ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n            opacity: 1;\n            visibility: visible;\n        }\n    "); });
 exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"])));
 exports.HeaderBackButtonStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"])));
 exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"])), function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; });
@@ -44,9 +44,9 @@ exports.HeaderRightContentStyled = styled_components_1.default.div(templateObjec
 exports.HeaderTitleWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    cursor: ", ";\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
 exports.HeaderTitleTopStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    min-width: 0;\n"])));
 exports.HeaderTitleDescriptionStyled = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin: 1rem 0 0;\n    font: var(--body-regular-14-17);\n    color: var(--dark);\n"], ["\n    margin: 1rem 0 0;\n    font: var(--body-regular-14-17);\n    color: var(--dark);\n"])));
-exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: ", ";\n    display: block;\n"], ["\n    font: ", ";\n    display: block;\n"])), function (props) { return props.$titleSize === 'lg'
+exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    font: ", ";\n    display: inline-block;\n    cursor: ", ";\n"], ["\n    font: ", ";\n    display: inline-block;\n    cursor: ", ";\n"])), function (props) { return props.$titleSize === 'lg'
     ? 'var(--headline-semi-bold-20-24)'
-    : 'var(--headline-semi-bold-18-22)'; });
+    : 'var(--headline-semi-bold-18-22)'; }, function (props) { return props.$isClickable ? 'pointer' : 'inherit'; });
 exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"], ["\n    display: block;\n    border: 1px solid var(--dark-opacity-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    margin-right: 1.5rem;\n    background-color: white;\n    *{\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n        padding: 0.5rem;\n        box-sizing: border-box;\n    }\n"])));
 exports.BadgeWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    display: block;\n    margin-left: 1.5rem;\n"], ["\n    display: block;\n    margin-left: 1.5rem;\n"])));
 exports.ContentWrapper = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: block;\n    padding: ", ";\n"], ["\n    display: block;\n    padding: ", ";\n"])), function (props) { return props.$hasNoContentSidePadding ? '0' : '0 1.5rem'; });

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

@@ -7,10 +7,14 @@ export declare const titleSizes: readonly ["md", "lg"];
 type TITLE_SIZE = typeof titleSizes[number];
 export declare const headerSizes: readonly ["small", "medium"];
 type HEADER_SIZE = typeof headerSizes[number];
+export declare const headerAlignItems: readonly ["center", "flex-start"];
+type HEADER_ALIGN_ITEMS = typeof headerAlignItems[number];
 export interface DescriptionCard {
     title?: string;
     titleSize?: TITLE_SIZE;
     headerSize?: HEADER_SIZE;
+    /** Header dikey hizalama (`center` | `flex-start`) */
+    headerAlignItems?: HEADER_ALIGN_ITEMS;
     headerDescription?: string;
     hasBadge?: boolean;
     badgeText?: string;
@@ -74,6 +78,7 @@ export interface DescriptionCardStyledProps {
     $hasNoContentSidePadding?: boolean;
     $titleSize?: TITLE_SIZE;
     $headerSize?: HEADER_SIZE;
+    $headerAlignItems?: HEADER_ALIGN_ITEMS;
     $isClickable?: boolean;
     $hasAccordion?: boolean;
     $customColumnSpan?: {

package/dist/components/DescriptionCard/props.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DescriptionCardDefault = exports.headerSizes = exports.titleSizes = exports.iconNames = void 0;
+exports.DescriptionCardDefault = exports.headerAlignItems = exports.headerSizes = exports.titleSizes = exports.iconNames = void 0;
 var iconList_1 = require("../Icon/iconList");
 exports.iconNames = Object.keys(iconList_1.iconList);
 exports.titleSizes = ['md', 'lg'];
 exports.headerSizes = ['small', 'medium'];
+exports.headerAlignItems = ['center', 'flex-start'];
 exports.DescriptionCardDefault = {
     title: "Header title",
     titleSize: "md",
     headerSize: "small",
+    headerAlignItems: "center",
     headerDescription: null,
     hasBadge: false,
     hasHeader: true,

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

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ title, titleSize, headerSize, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
+    component: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
     tags: string[];
     argTypes: {
         title: {
@@ -14,6 +14,11 @@ declare const _default: {
             control: string;
             options: string[];
         };
+        headerAlignItems: {
+            control: string;
+            options: string[];
+            description: string;
+        };
         hasBadge: {
             control: string;
         };

package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js

@@ -64,6 +64,11 @@ exports.default = {
         title: { control: 'text' },
         headerDescription: { control: 'text' },
         headerSize: { control: 'select', options: ['small', 'medium'] },
+        headerAlignItems: {
+            control: 'select',
+            options: ['center', 'flex-start'],
+            description: 'Header dikey hizalama',
+        },
         hasBadge: { control: 'boolean' },
         badgeText: { control: 'text' },
         hasHeader: { control: 'boolean' },

package/dist/components/Icon/iconList/Closemini.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 SvgClosemini = function (props) { return ((0, jsx_runtime_1.jsxs)("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: "M10.6654 5.33398L5.33203 10.6673", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 5.33398L5.33203 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 5.33398L5.33203 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 10.6673L5.33203 5.33398", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 10.6673L5.33203 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6654 10.6673L5.33203 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+var SvgClosemini = function (props) { return ((0, jsx_runtime_1.jsxs)("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: "M10.6668 5.33398L5.3335 10.6673", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 5.33398L5.3335 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 5.33398L5.3335 10.6673", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 10.6673L5.3335 5.33398", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 10.6673L5.3335 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.6668 10.6673L5.3335 5.33398", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
 exports.default = SvgClosemini;

package/dist/components/OtpInput/Otp.js

@@ -19,132 +19,76 @@ var react_1 = require("react");
 var props_1 = require("./props");
 var OtpInput_styled_1 = require("./OtpInput.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
-var keyEnums_1 = require("../../enums/keyEnums");
-var keyDownEventName = 'keydown';
+var normalizeOtp = function (raw, size) {
+    return String(raw !== null && raw !== void 0 ? raw : "")
+        .replace(/\D/g, "")
+        .slice(0, size);
+};
+var isMobileDevice = function () {
+    return typeof window !== "undefined" && /Mobi/.test(window.navigator.userAgent);
+};
 var Otp = function (_a) {
     var _b = _a.value, value = _b === void 0 ? props_1.OtpInputDefault.value : _b, _c = _a.onInputChange, onInputChange = _c === void 0 ? props_1.OtpInputDefault.onInputChange : _c, _d = _a.inputSize, inputSize = _d === void 0 ? props_1.OtpInputDefault.inputSize : _d, _e = _a.hasError, hasError = _e === void 0 ? props_1.OtpInputDefault.hasError : _e, _f = _a.errorMessage, errorMessage = _f === void 0 ? props_1.OtpInputDefault.errorMessage : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? props_1.OtpInputDefault.autoFocus : _g;
-    var _h = (0, react_1.useState)(value), otpValue = _h[0], setOtpValue = _h[1];
+    var _h = (0, react_1.useState)(function () { return normalizeOtp(value, inputSize); }), otpValue = _h[0], setOtpValue = _h[1];
     var inputRef = (0, react_1.useRef)(null);
+    var skipNextExternalSync = (0, react_1.useRef)(false);
+    var focusInput = function () {
+        var input = inputRef.current;
+        if (!input)
+            return;
+        input.focus({ preventScroll: true });
+    };
     (0, react_1.useEffect)(function () {
-        setUserFocus();
-    }, [hasError]);
+        if (autoFocus) {
+            focusInput();
+        }
+    }, [autoFocus]);
     (0, react_1.useEffect)(function () {
-        if (value === undefined || value === null || value === '') {
-            setOtpValue('');
+        if (hasError) {
+            focusInput();
         }
-        else if (!isNaN(Number(value))) {
-            setOtpValue(value.toString());
+    }, [hasError]);
+    (0, react_1.useEffect)(function () {
+        if (skipNextExternalSync.current) {
+            skipNextExternalSync.current = false;
+            return;
         }
-    }, [value]);
-    var addKeydownEventListener = function () {
-        window.addEventListener(keyDownEventName, handleOnKeyDown);
-    };
-    var removeKeyDownEventListener = function () {
-        window.removeEventListener(keyDownEventName, handleOnKeyDown);
+        var nextValue = normalizeOtp(value, inputSize);
+        setOtpValue(function (prev) { return (prev === nextValue ? prev : nextValue); });
+    }, [value, inputSize]);
+    var updateOtpValue = function (nextRaw) {
+        var nextValue = normalizeOtp(nextRaw, inputSize);
+        skipNextExternalSync.current = true;
+        setOtpValue(nextValue);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
     };
-    var isShortcutKey = function (keyCode) {
-        return keyCode === keyEnums_1.KeyConditions.CTRL_V;
+    var handleChange = function (event) {
+        updateOtpValue(event.target.value);
     };
-    var isKeyboardNumber = function (keyCode) {
-        return (keyCode > keyEnums_1.KeyConditions.KEYBOARD_MIN &&
-            keyCode < keyEnums_1.KeyConditions.KEYBOARD_MAX);
-    };
-    var isNumberPad = function (keyCode) {
-        return (keyCode > keyEnums_1.KeyConditions.NUMBERPAD_MIN &&
-            keyCode < keyEnums_1.KeyConditions.NUMBERPAD_MAX);
-    };
-    var handleOnKeyDown = (0, react_1.useCallback)(function (event) {
-        var key = event.key, keyCode = event.keyCode;
-        if (keyCode === keyEnums_1.KeyCodesEnums.BACKSPACE ||
-            key === keyEnums_1.KeyEnums.BACKSPACE ||
-            keyCode === keyEnums_1.KeyCodesEnums.DELETE ||
-            key === keyEnums_1.KeyEnums.DELETE) {
-            event.preventDefault();
-            removeLastCharacter();
-        }
-        else if (isShortcutKey(event.keyCode)) {
-            event.preventDefault();
-            onShortcutPaste();
-        }
-        else if ((isKeyboardNumber(event.keyCode) || isNumberPad(event.keyCode)) &&
-            !isNaN(Number(event.key))) {
-            event.preventDefault();
-            addNewCharacter(event.key);
-        }
-    }, []);
-    (0, react_1.useEffect)(function () {
-        addKeydownEventListener();
-        setUserFocus();
-        return function () {
-            removeKeyDownEventListener();
-        };
-    }, [handleOnKeyDown]);
-    var removeLastCharacter = function () {
-        var newValue = '';
-        setOtpValue(function (prevValue) {
-            newValue = prevValue ? prevValue.slice(0, -1) : '';
-            return newValue;
-        });
+    var handleKeyDown = function (event) {
+        if (event.key !== "Backspace" && event.key !== "Delete")
+            return;
+        if (otpValue.length === 0)
+            return;
+        event.preventDefault();
+        updateOtpValue(otpValue.slice(0, -1));
     };
-    var addNewCharacter = function (character) {
-        var newValue = '';
-        setOtpValue(function (prevValue) {
-            newValue = prevValue || '';
-            if (!prevValue || (prevValue && prevValue.length < inputSize)) {
-                newValue += character;
+    var handleBlur = function () {
+        if (isMobileDevice())
+            return;
+        // Keep desktop focus on OTP without forced select/click loops.
+        requestAnimationFrame(function () {
+            if (document.activeElement !== inputRef.current) {
+                focusInput();
             }
-            return newValue;
         });
     };
-    (0, react_1.useEffect)(function () {
-        if (otpValue)
-            onInputChange(otpValue);
-    }, [otpValue]);
-    var onShortcutPaste = function () {
-        var _a;
-        var result = false;
-        if ((_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) {
-            try {
-                window.navigator.clipboard.readText().then(function (text) {
-                    insertFromClipboard(text);
-                });
-                result = true;
-            }
-            catch (_) {
-                result = false;
-            }
-        }
-    };
-    var insertFromClipboard = function (stringData) {
-        var intData = Number(stringData);
-        if (!isNaN(intData)) {
-            var formattedData = intData.toString();
-            setOtpValue(formattedData);
-        }
-    };
-    var setUserFocus = function () {
-        if (inputRef.current) {
-            inputRef.current.focus();
-            inputRef.current.select();
-            inputRef.current.click();
-        }
-    };
-    var isMobileDevice = function () { return /Mobi/.test(window.navigator.userAgent); };
-    var onInputBlur = function () {
-        if (!isMobileDevice()) {
-            setUserFocus();
-        }
-    };
-    var onChange = function (event) {
-        var _a;
-        event.preventDefault();
-        if (!isNaN(Number((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value))) {
-            setOtpValue(event.target.value);
-        }
-    };
-    return (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputWrapper, { children: [(0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpanWrapper, __assign({ "$inputSize": inputSize, onClick: setUserFocus }, { children: Array.from({ length: inputSize }, function (_, index) { return index; }).map(function (index) { return ((0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpan, __assign({ active: (otpValue ? index === otpValue.length : index === 0) ||
-                        (otpValue &&
-                            otpValue.length === inputSize &&
-                            index === inputSize - 1), filled: Boolean(otpValue === null || otpValue === void 0 ? void 0 : otpValue[index]), hasError: hasError }, { children: otpValue && otpValue[index] }), index)); }) })), hasError && (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpError, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }), (0, jsx_runtime_1.jsx)("input", { type: 'tel', autoComplete: 'one-time-code', autoFocus: autoFocus, value: otpValue, maxLength: inputSize, ref: inputRef, onBlur: onInputBlur, onChange: onChange })] });
+    return ((0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputWrapper, { children: [(0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpanWrapper, __assign({ "$inputSize": inputSize, onClick: focusInput }, { children: Array.from({ length: inputSize }, function (_, index) {
+                    var digit = otpValue[index];
+                    var isFilled = digit !== undefined;
+                    var isActive = index === otpValue.length ||
+                        (otpValue.length === inputSize && index === inputSize - 1);
+                    return ((0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpan, __assign({ active: isActive, filled: isFilled, hasError: hasError }, { children: digit }), index));
+                }) })), hasError && ((0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpError, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })), (0, jsx_runtime_1.jsx)("input", { type: "tel", inputMode: "numeric", pattern: "[0-9]*", autoComplete: "one-time-code", autoFocus: autoFocus, value: otpValue, maxLength: inputSize, ref: inputRef, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, "aria-invalid": hasError })] }));
 };
 exports.default = Otp;

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

@@ -4,6 +4,26 @@ declare const _default: {
     component: (props: any) => React.JSX.Element;
     tags: string[];
     argTypes: {
+        value: {
+            control: string;
+        };
+        inputSize: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        autoFocus: {
+            control: string;
+        };
+        hasError: {
+            control: string;
+        };
+        errorMessage: {
+            control: string;
+        };
         onInputChange: {
             action: string;
         };
@@ -16,13 +36,73 @@ export declare const Default: {
         errorMessage: string;
         hasError: boolean;
         inputSize: number;
+        value: string;
+    };
+};
+export declare const SixDigits: {
+    args: {
+        inputSize: number;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+        value: string;
+    };
+};
+export declare const EightDigits: {
+    args: {
+        inputSize: number;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+        value: string;
     };
 };
 export declare const TenDigits: {
+    args: {
+        inputSize: number;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+        value: string;
+    };
+};
+export declare const WithValue: {
+    name: string;
+    args: {
+        inputSize: number;
+        value: string;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+    };
+};
+export declare const LeadingZeros: {
+    name: string;
+    args: {
+        inputSize: number;
+        value: string;
+        autoFocus: boolean;
+        errorMessage: string;
+        hasError: boolean;
+    };
+};
+export declare const WithError: {
+    name: string;
+    args: {
+        inputSize: number;
+        value: string;
+        hasError: boolean;
+        errorMessage: string;
+        autoFocus: boolean;
+    };
+};
+export declare const WithoutAutoFocus: {
+    name: string;
     args: {
         autoFocus: boolean;
         errorMessage: string;
         hasError: boolean;
         inputSize: number;
+        value: string;
     };
 };

package/dist/components/OtpInput/stories/OtpInput.stories.js

@@ -1,40 +1,76 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TenDigits = exports.Default = void 0;
+exports.WithoutAutoFocus = exports.WithError = exports.LeadingZeros = exports.WithValue = exports.TenDigits = exports.EightDigits = exports.SixDigits = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Otp_1 = __importDefault(require("../Otp"));
 var OtpStory = function (props) {
-    var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
-    var onChange = function (val) {
-        setValue(val);
-    };
-    return (0, jsx_runtime_1.jsx)(Otp_1.default, { value: value, onInputChange: onChange, autoFocus: props.autoFocus, errorMessage: props.errorMessage, hasError: props.hasError, inputSize: props.inputSize });
+    var _a;
+    var _b = (0, react_1.useState)((_a = props.value) !== null && _a !== void 0 ? _a : ''), value = _b[0], setValue = _b[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 480 } }, { children: [(0, jsx_runtime_1.jsx)(Otp_1.default, { value: value, onInputChange: function (nextValue) {
+                    var _a;
+                    setValue(nextValue);
+                    (_a = props.onInputChange) === null || _a === void 0 ? void 0 : _a.call(props, nextValue);
+                }, autoFocus: props.autoFocus, errorMessage: props.errorMessage, hasError: props.hasError, inputSize: props.inputSize }), (0, jsx_runtime_1.jsxs)("p", __assign({ style: { marginTop: 16, font: 'var(--caption-semi-bold-12-15)', color: 'var(--dark-opacity-50)' } }, { children: ["De\u011Fer: ", value || '—'] }))] })));
 };
 exports.default = {
     title: 'Components/OtpInput',
     component: OtpStory,
     tags: ['autodocs'],
     argTypes: {
+        value: { control: 'text' },
+        inputSize: { control: { type: 'number', min: 4, max: 10, step: 1 } },
+        autoFocus: { control: 'boolean' },
+        hasError: { control: 'boolean' },
+        errorMessage: { control: 'text' },
         onInputChange: { action: 'changed' },
-    }
+    },
 };
 exports.Default = {
     args: {
         autoFocus: true,
-        errorMessage: "Hata Mesajı",
+        errorMessage: 'Hata Mesajı',
         hasError: false,
-        inputSize: 4
+        inputSize: 4,
+        value: '',
     },
 };
+exports.SixDigits = {
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 6 }),
+};
+exports.EightDigits = {
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 8 }),
+};
 exports.TenDigits = {
-    args: {
-        autoFocus: true,
-        errorMessage: "Hata Mesajı",
-        hasError: false,
-        inputSize: 10
-    },
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 10 }),
+};
+exports.WithValue = {
+    name: 'Dolu değer',
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 6, value: '123456', autoFocus: false }),
+};
+exports.LeadingZeros = {
+    name: 'Başında sıfır (006789)',
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 6, value: '006789', autoFocus: false }),
+};
+exports.WithError = {
+    name: 'Hata durumu',
+    args: __assign(__assign({}, exports.Default.args), { inputSize: 6, value: '123456', hasError: true, errorMessage: 'Doğrulama kodu hatalı. Lütfen tekrar dene.', autoFocus: false }),
+};
+exports.WithoutAutoFocus = {
+    name: 'AutoFocus kapalı',
+    args: __assign(__assign({}, exports.Default.args), { autoFocus: false }),
 };

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -30,6 +30,7 @@ var ItalicIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({
 var UnderlineIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 5v6a5 5 0 0 0 10 0V5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 19h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
 var StrikeIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.5 8.5C9.2 7 10.5 6 12.2 6c2.1 0 3.8 1.2 3.8 3 0 .8-.3 1.5-.9 2M15.5 15.5c-.7 1.5-2 2.5-3.7 2.5-2.1 0-3.8-1.2-3.8-3 0-.8.3-1.5.9-2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }))); };
 var OrderedListIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 6h10M10 12h10M10 18h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 5.5h1.5V9M4 9h3M4.5 14.5c.8 0 1.5.5 1.5 1.25S5.3 17 4.5 17H4v1.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+var HeadingIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 5v14M18 5v14M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))); };
 var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.RichTextEditorDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.RichTextEditorDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.RichTextEditorDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.RichTextEditorDefault.errorMessage : _g, className = _a.className, id = _a.id, _h = _a.minHeight, minHeight = _h === void 0 ? props_1.RichTextEditorDefault.minHeight : _h;
     var _j = (0, react_1.useState)(false), focused = _j[0], setFocused = _j[1];
@@ -38,7 +39,9 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
         immediatelyRender: false,
         extensions: [
             starter_kit_1.default.configure({
-                heading: false,
+                heading: {
+                    levels: [2],
+                },
                 code: false,
                 codeBlock: false,
                 blockquote: false,
@@ -107,7 +110,7 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
     }); }, [editor, disabled]);
     if (!editor)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
 });
 RichTextEditor.displayName = 'RichTextEditor';
 exports.default = RichTextEditor;

package/dist/components/RichTextEditor/RichTextEditor.styled.js

@@ -11,11 +11,11 @@ exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = ex
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.RichTextEditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
 exports.FieldLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
-exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: border-color 0.15s ease;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: border-color 0.15s ease;\n"])), function (props) { return (props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'); }, function (props) { return (props.$disabled ? 0.7 : 1); }, function (props) { return (props.$disabled ? 'none' : 'auto'); });
+exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: -1px;\n        border: 2px solid ", ";\n        border-radius: inherit;\n        pointer-events: none;\n        z-index: 1;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: -1px;\n        border: 2px solid ", ";\n        border-radius: inherit;\n        pointer-events: none;\n        z-index: 1;\n    }\n"])), function (props) { return (props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'); }, function (props) { return (props.$hasError ? 'var(--red)' : 'var(--grey-10)'); }, function (props) { return (props.$disabled ? 0.7 : 1); }, function (props) { return (props.$disabled ? 'none' : 'auto'); }, function (props) { return (props.$focused ? 'var(--primary)' : 'transparent'); });
 exports.Toolbar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"])));
-exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: ", ";\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-10);\n        color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: ", ";\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-10);\n        color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"])), function (props) { return (props.$active ? 'var(--primary-opacity-10)' : 'transparent'); }, function (props) { return (props.$active ? 'var(--primary)' : 'var(--grey-50)'); });
+exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"])), function (props) { return (props.$active ? 'var(--dark)' : 'var(--grey-50)'); });
 exports.ToolbarDivider = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"], ["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"])));
-exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"], ["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"])), function (props) { return props.$minHeight || '200px'; });
+exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"], ["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"])), function (props) { return props.$minHeight || '200px'; });
 exports.ErrorMessage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"])));
 exports.VariableActions = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"])));
 exports.VariableChipButton = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"])));

package/dist/components/RichTextEditor/utils/sanitize.js

@@ -8,6 +8,7 @@ var dompurify_1 = __importDefault(require("dompurify"));
 var ALLOWED_TAGS = [
     'p',
     'br',
+    'h2',
     'strong',
     'b',
     'em',
@@ -81,7 +82,7 @@ var prepareEditorHtml = function (html) {
                 parent.replaceChild(emptyParagraph, element);
                 return;
             }
-            if (tag === 'P' || tag === 'SPAN') {
+            if (tag === 'P' || tag === 'H2' || tag === 'SPAN') {
                 return;
             }
             if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV') {

package/dist/components/TagInput/TagInput.js

@@ -28,6 +28,7 @@ var react_1 = require("react");
 var props_1 = require("./props");
 var TagInput_styled_1 = require("./TagInput.styled");
 var Tag_1 = __importDefault(require("../Tag"));
+var Button_1 = __importDefault(require("../Button"));
 var normalizeTag = function (value) { return value.trim(); };
 var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
     var className = _a.className, _b = _a.label, label = _b === void 0 ? props_1.TagInputDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.TagInputDefault.placeholder : _c, name = _a.name, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.TagInputDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.TagInputDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.TagInputDefault.hasError : _f, errorMessage = _a.errorMessage, _g = _a.buttonText, buttonText = _g === void 0 ? props_1.TagInputDefault.buttonText : _g, maxTags = _a.maxTags, maxLength = _a.maxLength, _h = _a.allowDuplicates, allowDuplicates = _h === void 0 ? props_1.TagInputDefault.allowDuplicates : _h, id = _a.id;
@@ -71,9 +72,7 @@ var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     var removeTag = function (index) {
-        var _a;
         updateTags(tags.filter(function (_, tagIndex) { return tagIndex !== index; }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     var handleAddClick = function () {
         addTag(inputValue);
@@ -95,7 +94,7 @@ var TagInput = (0, react_1.forwardRef)(function (_a, ref) {
         }
     };
     var isAddDisabled = disabled || !canAddTag(inputValue);
-    return ((0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputStyled, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputLabel, __assign({ htmlFor: inputId }, { children: label })), (0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputFields, { children: [(0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputField, { ref: inputRef, id: inputId, type: "text", value: inputValue, placeholder: placeholder, disabled: disabled, "$hasError": hasError, "$disabled": disabled, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: onBlur, "aria-invalid": hasError, "aria-describedby": hasError && errorMessage ? "".concat(inputId, "-error") : undefined }), (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputButton, __assign({ type: "button", disabled: isAddDisabled, "$disabled": isAddDisabled, onClick: handleAddClick }, { children: buttonText }))] }), tags.length > 0 && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagList, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, disabled: disabled, onRemove: function () { return removeTag(index); } }, "".concat(tag, "-").concat(index))); }) })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputError, __assign({ id: "".concat(inputId, "-error") }, { children: errorMessage }))), name && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputHiddenInputs, __assign({ "aria-hidden": "true" }, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag, readOnly: true }, "".concat(name, "-").concat(tag, "-").concat(index))); }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputStyled, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputLabel, __assign({ htmlFor: inputId }, { children: label })), (0, jsx_runtime_1.jsxs)(TagInput_styled_1.TagInputFields, { children: [(0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputField, { ref: inputRef, id: inputId, type: "text", value: inputValue, placeholder: placeholder, disabled: disabled, "$hasError": hasError, "$disabled": disabled, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: onBlur, "aria-invalid": hasError, "aria-describedby": hasError && errorMessage ? "".concat(inputId, "-error") : undefined }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ type: "button", size: "big", variant: "inverted", disabled: isAddDisabled, onClick: handleAddClick }, { children: buttonText }))] }), tags.length > 0 && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagList, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: tag, disabled: disabled, onRemove: function () { return removeTag(index); } }, "".concat(tag, "-").concat(index))); }) })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputError, __assign({ id: "".concat(inputId, "-error") }, { children: errorMessage }))), name && ((0, jsx_runtime_1.jsx)(TagInput_styled_1.TagInputHiddenInputs, __assign({ "aria-hidden": "true" }, { children: tags.map(function (tag, index) { return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag, readOnly: true }, "".concat(name, "-").concat(tag, "-").concat(index))); }) })))] })));
 });
 TagInput.displayName = 'TagInput';
 exports.default = TagInput;

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

@@ -9,11 +9,6 @@ export declare const TagInputField: import("styled-components/dist/types").IStyl
     $hasError?: boolean;
     $disabled?: boolean;
 }, never>>> & string;
-export declare const TagInputButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$disabled"> & {
-    $disabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$disabled"> & {
-    $disabled?: boolean;
-}, never>>> & string;
 export declare const TagList: 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;
 export declare const TagInputError: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
 export declare const TagInputHiddenInputs: 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/TagInput/TagInput.styled.js

@@ -7,14 +7,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagInputHiddenInputs = exports.TagInputError = exports.TagList = exports.TagInputButton = exports.TagInputField = exports.TagInputFields = exports.TagInputLabel = exports.TagInputStyled = void 0;
+exports.TagInputHiddenInputs = exports.TagInputError = exports.TagList = exports.TagInputField = exports.TagInputFields = exports.TagInputLabel = exports.TagInputStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.TagInputStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
 exports.TagInputLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
 exports.TagInputFields = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: flex-start;\n    gap: 1rem;\n"], ["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: flex-start;\n    gap: 1rem;\n"])));
 exports.TagInputField = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: 19.5px 24px;\n    color: ", ";\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        background: white;\n    }\n\n    &:disabled {\n        color: var(--dark-opacity-25);\n        cursor: not-allowed;\n    }\n"], ["\n    box-sizing: border-box;\n    width: 100%;\n    height: 56px;\n    background: ", ";\n    border-radius: 0.5rem;\n    border: ", ";\n    padding: 19.5px 24px;\n    color: ", ";\n    font: var(--body-semi-bold-14-17);\n    outline: none;\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    &:focus {\n        padding: 18.5px 23px;\n        border: 2px solid ", ";\n        background: white;\n    }\n\n    &:disabled {\n        color: var(--dark-opacity-25);\n        cursor: not-allowed;\n    }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; });
-exports.TagInputButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    box-sizing: border-box;\n    height: 56px;\n    min-width: 56px;\n    padding: 0 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: white;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: ", ";\n    transition: border-color 0.2s ease, color 0.2s ease;\n\n    &:not(:disabled):hover {\n        border-color: var(--primary);\n    }\n"], ["\n    box-sizing: border-box;\n    height: 56px;\n    min-width: 56px;\n    padding: 0 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background-color: white;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: ", ";\n    transition: border-color 0.2s ease, color 0.2s ease;\n\n    &:not(:disabled):hover {\n        border-color: var(--primary);\n    }\n"])), function (props) { return props.$disabled ? 'var(--dark-opacity-25)' : 'var(--primary)'; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; });
-exports.TagList = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"])));
-exports.TagInputError = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"])));
-exports.TagInputHiddenInputs = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+exports.TagList = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-top: 1rem;\n"])));
+exports.TagInputError = styled_components_1.default.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--red);\n    font: var(--caption-semi-bold-11-13);\n"])));
+exports.TagInputHiddenInputs = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.23.4",
+  "version": "2.23.6",
   "files": [
     "dist"
   ],
@@ -54,7 +54,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "tsc && npm run generate-minified-css",
+    "build": "NODE_OPTIONS=--max-old-space-size=4096 tsc && npm run generate-minified-css",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "storybook dev",