krl-alfred 2.17.49 → 2.17.51

package/dist/components/Input/stories/Input.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateInput = exports.Default = void 0;
+exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Input_1 = __importDefault(require("../Input"));
 exports.default = {
@@ -24,8 +24,13 @@ exports.default = {
     argTypes: {
         hasError: { control: 'boolean' },
         hasCopyButton: { control: 'boolean' },
+        isClearable: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        readOnly: { control: 'boolean' },
+        inline: { control: 'boolean' },
+        hasNumericFormat: { control: 'boolean' },
         onCustomLinkClick: { action: 'clicked' },
-        type: { control: 'select', options: ["text", "number", "password", "date"] },
+        type: { control: 'select', options: ["text", "number", "password", "date", "email", "tel"] },
     }
 };
 exports.Default = {
@@ -37,15 +42,402 @@ exports.Default = {
         isClearable: false,
         label: "Label",
         type: "text",
-        infoText: "text",
-        id: "customInput",
-        format: "dd/MM/yyyy",
+        infoText: null,
+        id: "input_default",
+        format: null,
         mask: null,
         onChange: function (e) {
             console.log(e, "onChange");
         }
     },
 };
+exports.WithLabel = {
+    args: {
+        placeholder: "Enter your name",
+        label: "Full Name",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "text",
+        infoText: null,
+        id: "input_with_label",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.WithError = {
+    args: {
+        placeholder: "Enter your email",
+        label: "Email",
+        hasError: true,
+        errorMessage: "Please enter a valid email address",
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "text",
+        infoText: null,
+        id: "input_with_error",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.Disabled = {
+    args: {
+        placeholder: "Disabled input",
+        label: "Disabled Field",
+        hasError: false,
+        disabled: true,
+        readOnly: false,
+        isClearable: false,
+        type: "text",
+        value: "This field is disabled",
+        infoText: null,
+        id: "input_disabled",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.ReadOnly = {
+    args: {
+        placeholder: "Read only input",
+        label: "Read Only Field",
+        hasError: false,
+        disabled: false,
+        readOnly: true,
+        isClearable: false,
+        type: "text",
+        value: "This field is read only",
+        infoText: null,
+        id: "input_readonly",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.WithCustomLink = {
+    args: {
+        placeholder: "Enter your password",
+        label: "Password",
+        customLinkText: "Forgot password?",
+        customLinkHref: "#",
+        onCustomLinkClick: function () { return console.log("Custom link clicked"); },
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "text",
+        infoText: null,
+        id: "input_with_link",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.Password = {
+    args: {
+        placeholder: "Enter your password",
+        label: "Password",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "password",
+        infoText: null,
+        id: "input_password",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.PasswordWithValue = {
+    args: {
+        placeholder: "Enter your password",
+        label: "Password",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "password",
+        value: "mypassword123",
+        infoText: null,
+        id: "input_password_value",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
 exports.DateInput = {
-    args: __assign(__assign({}, exports.Default.args), { type: "date", autoFocus: false, infoText: null }),
+    args: {
+        placeholder: "Select date",
+        label: "Date",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "date",
+        format: "dd.MM.yyyy",
+        infoText: null,
+        id: "input_date",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.DateInline = {
+    args: {
+        placeholder: "Select date",
+        label: "Date (Inline)",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "date",
+        format: "dd.MM.yyyy",
+        inline: true,
+        infoText: null,
+        id: "input_date_inline",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.DateWithMinMax = {
+    args: {
+        placeholder: "Select date",
+        label: "Date with Range",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "date",
+        format: "dd.MM.yyyy",
+        minDate: new Date(),
+        maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
+        infoText: null,
+        id: "input_date_range",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.WithCopyButton = {
+    args: {
+        placeholder: "Copy this text",
+        label: "Copyable Text",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        hasCopyButton: true,
+        type: "text",
+        value: "This text can be copied",
+        infoText: null,
+        id: "input_copy",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.Clearable = {
+    args: {
+        placeholder: "Type something",
+        label: "Clearable Input",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: true,
+        type: "text",
+        value: "This can be cleared",
+        infoText: null,
+        id: "input_clearable",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        },
+        onClear: function () {
+            console.log("Input cleared");
+        }
+    },
+};
+exports.WithInfoText = {
+    args: {
+        placeholder: "Enter your information",
+        label: "Input with Info",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "text",
+        infoText: "This is helpful information about this field",
+        id: "input_info",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.NumericFormat = {
+    args: {
+        placeholder: "Enter number",
+        label: "Numeric Input",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        hasNumericFormat: true,
+        type: "text",
+        infoText: null,
+        id: "input_numeric",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.PatternFormat = {
+    args: {
+        placeholder: "Enter phone number",
+        label: "Phone Number",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "text",
+        format: "+90 (###) ### ## ##",
+        mask: "_",
+        infoText: null,
+        id: "input_pattern",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.PatternFormatWithValue = {
+    args: {
+        placeholder: "Enter phone number",
+        label: "Phone Number",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "text",
+        format: "+90 (###) ### ## ##",
+        mask: "_",
+        value: "+90 (555) 123 45 67",
+        infoText: null,
+        id: "input_pattern_value",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.Email = {
+    args: {
+        placeholder: "Enter your email",
+        label: "Email Address",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "email",
+        infoText: null,
+        id: "input_email",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.Tel = {
+    args: {
+        placeholder: "Enter phone number",
+        label: "Phone Number",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "tel",
+        infoText: null,
+        id: "input_tel",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.Number = {
+    args: {
+        placeholder: "Enter number",
+        label: "Number",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "number",
+        infoText: null,
+        id: "input_number",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.CustomWidth = {
+    args: {
+        placeholder: "Custom width input",
+        label: "Custom Width",
+        width: "200px",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "text",
+        infoText: null,
+        id: "input_custom_width",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
+exports.Complete = {
+    args: {
+        placeholder: "Complete input example",
+        label: "Complete Input",
+        customLinkText: "Need help?",
+        customLinkHref: "#",
+        onCustomLinkClick: function () { return console.log("Help clicked"); },
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: true,
+        hasCopyButton: false,
+        type: "text",
+        value: "Complete example",
+        infoText: "This is a complete example with all features",
+        id: "input_complete",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        },
+        onClear: function () {
+            console.log("Input cleared");
+        }
+    },
+};
+exports.ErrorWithCustomLink = {
+    args: {
+        placeholder: "Enter your email",
+        label: "Email",
+        customLinkText: "Forgot email?",
+        customLinkHref: "#",
+        onCustomLinkClick: function () { return console.log("Forgot email clicked"); },
+        hasError: true,
+        errorMessage: "Invalid email format",
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        type: "email",
+        infoText: null,
+        id: "input_error_link",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
 };

package/dist/components/SearchBox/SearchBox.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -42,7 +43,6 @@ var react_1 = __importStar(require("react"));
 var props_1 = require("./props");
 var SearchBox_styled_1 = require("./SearchBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
-var simplebar_react_1 = __importDefault(require("simplebar-react"));
 var react_i18next_1 = require("react-i18next");
 var ProductCardHorizontal_1 = __importDefault(require("../ProductCardHorizontal"));
 var SearchBox = react_1.default.forwardRef(function (_a, ref) {
@@ -50,7 +50,7 @@ var SearchBox = react_1.default.forwardRef(function (_a, ref) {
     var _c = _a.onKeyUp, onKeyUp = _c === void 0 ? props_1.SearchBoxDefault.onKeyUp : _c, _d = _a.onBlur, onBlur = _d === void 0 ? props_1.SearchBoxDefault.onBlur : _d, _e = _a.onFocus, onFocus = _e === void 0 ? props_1.SearchBoxDefault.onFocus : _e, _f = _a.onChange, onChange = _f === void 0 ? props_1.SearchBoxDefault.onChange : _f, _g = _a.onButtonClick, onButtonClick = _g === void 0 ? props_1.SearchBoxDefault.onButtonClick : _g, children = _a.children, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.SearchBoxDefault.isLoading : _h, _j = _a.showResultList, showResultList = _j === void 0 ? props_1.SearchBoxDefault.showResultList : _j, _k = _a.placeholder, placeholder = _k === void 0 ? props_1.SearchBoxDefault.placeholder : _k, _l = _a.size, size = _l === void 0 ? props_1.SearchBoxDefault.size : _l, _m = _a.value, value = _m === void 0 ? props_1.SearchBoxDefault.value : _m, _o = _a.maxResultHeight, maxResultHeight = _o === void 0 ? props_1.SearchBoxDefault.maxResultHeight : _o, _p = _a.minSearchLength, minSearchLength = _p === void 0 ? props_1.SearchBoxDefault.minSearchLength : _p, _q = _a.ariaLabel, ariaLabel = _q === void 0 ? props_1.SearchBoxDefault.ariaLabel : _q, _r = _a.id, id = _r === void 0 ? "searchbox" : _r, _s = _a.disabled, disabled = _s === void 0 ? props_1.SearchBoxDefault.disabled : _s, className = _a.className;
     var t = (0, react_i18next_1.useTranslation)().t;
     var resultRef = (0, react_1.useRef)(null);
-    var simplebarRef = (0, react_1.useRef)(null);
+    var scrollContainerRef = (0, react_1.useRef)(null);
     var innerRef = (0, react_1.useRef)(null);
     var _t = (0, react_1.useState)(null), selectedIndex = _t[0], setSelectedIndex = _t[1];
     // Forward the ref while maintaining internal ref
@@ -106,10 +106,9 @@ var SearchBox = react_1.default.forwardRef(function (_a, ref) {
             return;
         var list = resultRef.current.querySelectorAll(".productCard");
         list.forEach(function (el, index) {
-            var _a;
             if (index === selectedIndex) {
                 el.classList.add("selected");
-                var scrollContainer = (_a = simplebarRef.current) === null || _a === void 0 ? void 0 : _a.el.querySelector('.simplebar-content-wrapper');
+                var scrollContainer = scrollContainerRef.current;
                 if (scrollContainer) {
                     var elementTop = el.offsetTop;
                     var elementHeight = el.offsetHeight;
@@ -136,11 +135,11 @@ var SearchBox = react_1.default.forwardRef(function (_a, ref) {
     }, [selectedIndex]);
     var shouldShowResults = showResultList &&
         (!minSearchLength || ((_b = value === null || value === void 0 ? void 0 : value.length) !== null && _b !== void 0 ? _b : 0) >= minSearchLength);
-    return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$showResultList": shouldShowResults, "$size": size, "$disabled": disabled, className: className }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadowBox" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { ref: handleRef, type: "text", id: id, "aria-label": ariaLabel, "aria-expanded": shouldShowResults, "aria-controls": shouldShowResults ? "".concat(id, "-results") : undefined, "aria-activedescendant": selectedIndex !== null ? "".concat(id, "-result-").concat(selectedIndex) : undefined, role: "combobox", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange, disabled: disabled, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon", "aria-label": t("SEARCH"), disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Searchsmall" }) }))] })), shouldShowResults && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList", id: "".concat(id, "-results"), role: "listbox" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "resultListInner" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false, style: { maxHeight: maxResultHeight } }, { children: isLoading ? (Array.from({ length: 4 }, function (_, index) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard", "data-id": "".concat(id, "-result-").concat(index), "data-role": "option", "data-selected": selectedIndex === index }, { children: (0, jsx_runtime_1.jsx)(ProductCardHorizontal_1.default, { hasLoading: true, size: size }) }), index)); })) : (react_1.default.Children.map(children, function (child, index) {
-                            if (!react_1.default.isValidElement(child))
-                                return child;
-                            return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard", "data-id": "".concat(id, "-result-").concat(index), "data-role": "option", "data-selected": selectedIndex === index, tabIndex: -1 }, { children: child }), index));
-                        })) })) })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$showResultList": shouldShowResults, "$size": size, "$disabled": disabled, className: className }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadowBox" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { ref: handleRef, type: "text", id: id, "aria-label": ariaLabel, "aria-expanded": shouldShowResults, "aria-controls": shouldShowResults ? "".concat(id, "-results") : undefined, "aria-activedescendant": selectedIndex !== null ? "".concat(id, "-result-").concat(selectedIndex) : undefined, role: "combobox", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange, disabled: disabled, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon", "aria-label": t("SEARCH"), disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Searchsmall" }) }))] })), shouldShowResults && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList", id: "".concat(id, "-results"), role: "listbox" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "resultListInner", ref: scrollContainerRef }, { children: isLoading ? (Array.from({ length: 4 }, function (_, index) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard", "data-id": "".concat(id, "-result-").concat(index), "data-role": "option", "data-selected": selectedIndex === index }, { children: (0, jsx_runtime_1.jsx)(ProductCardHorizontal_1.default, { hasLoading: true, size: size }) }), index)); })) : (react_1.default.Children.map(children, function (child, index) {
+                        if (!react_1.default.isValidElement(child))
+                            return child;
+                        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard", "data-id": "".concat(id, "-result-").concat(index), "data-role": "option", "data-selected": selectedIndex === index, tabIndex: -1 }, { children: child }), index));
+                    })) })) })))] })));
 });
 SearchBox.displayName = 'SearchBox';
 exports.default = react_1.default.memo(SearchBox);

package/dist/components/SearchBox/SearchBox.styled.js

@@ -31,6 +31,6 @@ exports.LoadingStyled = exports.SearchBoxStyled = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 var disabledStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    opacity: 0.6;\n    pointer-events: none;\n    cursor: not-allowed;\n"], ["\n    opacity: 0.6;\n    pointer-events: none;\n    cursor: not-allowed;\n"])));
-exports.SearchBoxStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n\n    .shadowBox {\n        height: 48px;\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 0.5rem;\n        box-shadow: ", ";\n        display: ", ";\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n        }\n    }\n\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 0.5rem;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 0.5rem;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 54px 8px 24px;\n            color: var(--dark);\n            font: var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            transition: all 0.2s ease;\n\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n\n            &:disabled {\n                ", ";\n                background-color: var(--dark-opacity-5);\n            }\n        }\n\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        padding: 0;\n        border-radius: 0.5rem;\n        background: white;\n        box-sizing: border-box;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n        &:before{\n            content: \"\";\n            height: calc(100% + 48px);\n            position: absolute;\n            width: calc(100% - 10px);\n            left: 50%;\n            bottom: 0;\n            transform: translateX(-50%);\n            border-radius: inherit;\n            box-shadow: ", ";\n            user-select: none;\n            pointer-events: none;\n            @media only screen and ", " {\n                box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n            }\n        }\n\n        .resultListInner {\n            position: relative;\n            overflow: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\n\n            [data-simplebar] {\n                height: auto !important;\n                max-height: 408px !important;\n                padding: 1.5rem !important;\n                position: relative;\n                z-index: 1;\n                background-color: white;\n\n                .simplebar-track.simplebar-vertical {\n                    width: 9px !important;\n                }\n            }\n\n            .productCard {\n                border-radius: 0.5rem;\n                transition: all 0.2s ease;\n                outline: none;\n\n                &:is(.selected) {\n                    background: var(--dark-opacity-3);\n                }\n\n                &:focus-visible {\n                    box-shadow: 0 0 0 2px var(--primary-opacity-20);\n                }\n            }\n\n            ", "\n\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 256px;\n                [data-simplebar] {\n                    max-height: 256px !important;\n                }\n            }\n        }\n    }\n\n    ", "\n"], ["\n    position: relative;\n    width: 100%;\n\n    .shadowBox {\n        height: 48px;\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 0.5rem;\n        box-shadow: ", ";\n        display: ", ";\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n        }\n    }\n\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 0.5rem;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 0.5rem;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 54px 8px 24px;\n            color: var(--dark);\n            font: var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            transition: all 0.2s ease;\n\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n\n            &:disabled {\n                ", ";\n                background-color: var(--dark-opacity-5);\n            }\n        }\n\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        padding: 0;\n        border-radius: 0.5rem;\n        background: white;\n        box-sizing: border-box;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n        &:before{\n            content: \"\";\n            height: calc(100% + 48px);\n            position: absolute;\n            width: calc(100% - 10px);\n            left: 50%;\n            bottom: 0;\n            transform: translateX(-50%);\n            border-radius: inherit;\n            box-shadow: ", ";\n            user-select: none;\n            pointer-events: none;\n            @media only screen and ", " {\n                box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n            }\n        }\n\n        .resultListInner {\n            position: relative;\n            overflow: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\n\n            [data-simplebar] {\n                height: auto !important;\n                max-height: 408px !important;\n                padding: 1.5rem !important;\n                position: relative;\n                z-index: 1;\n                background-color: white;\n\n                .simplebar-track.simplebar-vertical {\n                    width: 9px !important;\n                }\n            }\n\n            .productCard {\n                border-radius: 0.5rem;\n                transition: all 0.2s ease;\n                outline: none;\n\n                &:is(.selected) {\n                    background: var(--dark-opacity-3);\n                }\n\n                &:focus-visible {\n                    box-shadow: 0 0 0 2px var(--primary-opacity-20);\n                }\n            }\n\n            ", "\n\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 256px;\n                [data-simplebar] {\n                    max-height: 256px !important;\n                }\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, function (props) { return props.$showResultList ? "none" : "block"; }, devices_1.devices.xl, disabledStyles, function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, devices_1.devices.xl, function (props) { return props.$size === "small" && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                row-gap: 0.5rem;\n                max-height: 256px;\n                [data-simplebar] {\n                    max-height: 256px !important;\n                }\n            "], ["\n                row-gap: 0.5rem;\n                max-height: 256px;\n                [data-simplebar] {\n                    max-height: 256px !important;\n                }\n            "]))); }, devices_1.devices.xl, function (props) { return props.$disabled && disabledStyles; });
+exports.SearchBoxStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n\n    .shadowBox {\n        height: 48px;\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 0.5rem;\n        box-shadow: ", ";\n        display: ", ";\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n        }\n    }\n\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 0.5rem;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 0.5rem;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 54px 8px 24px;\n            color: var(--dark);\n            font: var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            transition: all 0.2s ease;\n\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n\n            &:disabled {\n                ", ";\n                background-color: var(--dark-opacity-5);\n            }\n        }\n\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        padding: 0;\n        border-radius: 0.5rem;\n        background: white;\n        box-sizing: border-box;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n        &:before{\n            content: \"\";\n            height: calc(100% + 48px);\n            position: absolute;\n            width: calc(100% - 10px);\n            left: 50%;\n            bottom: 0;\n            transform: translateX(-50%);\n            border-radius: inherit;\n            box-shadow: ", ";\n            user-select: none;\n            pointer-events: none;\n            @media only screen and ", " {\n                box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n            }\n        }\n\n        .resultListInner {\n            position: relative;\n            overflow-y: auto;\n            overflow-x: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\n            max-height: 408px;\n            padding: 1.5rem;\n            background-color: white;\n            z-index: 1;\n\n            // Custom scrollbar styling\n            &::-webkit-scrollbar {\n                width: 9px;\n            }\n\n            &::-webkit-scrollbar-track {\n                background: transparent;\n            }\n\n            &::-webkit-scrollbar-thumb {\n                background: var(--dark-opacity-10);\n                border-radius: 4px;\n            }\n\n            &::-webkit-scrollbar-thumb:hover {\n                background: var(--dark-opacity-20);\n            }\n\n            .productCard {\n                border-radius: 0.5rem;\n                transition: all 0.2s ease;\n                outline: none;\n\n                &:is(.selected) {\n                    background: var(--dark-opacity-3);\n                }\n\n                &:focus-visible {\n                    box-shadow: 0 0 0 2px var(--primary-opacity-20);\n                }\n            }\n\n            ", "\n\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 256px;\n            }\n        }\n    }\n\n    ", "\n"], ["\n    position: relative;\n    width: 100%;\n\n    .shadowBox {\n        height: 48px;\n        position: absolute;\n        width: calc(100% - 10px);\n        left: 50%;\n        transform: translateX(-50%);\n        border-radius: 0.5rem;\n        box-shadow: ", ";\n        display: ", ";\n        @media only screen and ", " {\n            box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n        }\n    }\n\n    .inputWrapper {\n        position: relative;\n        z-index: 5;\n        border-radius: 0.5rem;\n        input {\n            box-sizing: border-box;\n            width: 100%;\n            height: 48px;\n            background: white;\n            border-radius: 0.5rem;\n            border: 1px solid var(--dark-opacity-10);\n            padding: 8px 54px 8px 24px;\n            color: var(--dark);\n            font: var(--body-medium-14-17);\n            line-height: normal;\n            outline: none;\n            transition: all 0.2s ease;\n\n            &::placeholder {\n                color: var(--dark-opacity-50);\n            }\n\n            &:disabled {\n                ", ";\n                background-color: var(--dark-opacity-5);\n            }\n        }\n\n        .icon {\n            position: absolute;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent;\n            border: 0;\n            outline: none;\n            cursor: pointer;\n            padding: 0;\n            color: var(--primary);\n            &:hover{\n                color: var(--primary-hover);\n            }\n        }\n    }\n\n    .resultList {\n        padding: 0;\n        border-radius: 0.5rem;\n        background: white;\n        box-sizing: border-box;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 4;\n        display: grid;\n        row-gap: 1.5rem;\n        &:before{\n            content: \"\";\n            height: calc(100% + 48px);\n            position: absolute;\n            width: calc(100% - 10px);\n            left: 50%;\n            bottom: 0;\n            transform: translateX(-50%);\n            border-radius: inherit;\n            box-shadow: ", ";\n            user-select: none;\n            pointer-events: none;\n            @media only screen and ", " {\n                box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n            }\n        }\n\n        .resultListInner {\n            position: relative;\n            overflow-y: auto;\n            overflow-x: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\n            max-height: 408px;\n            padding: 1.5rem;\n            background-color: white;\n            z-index: 1;\n\n            // Custom scrollbar styling\n            &::-webkit-scrollbar {\n                width: 9px;\n            }\n\n            &::-webkit-scrollbar-track {\n                background: transparent;\n            }\n\n            &::-webkit-scrollbar-thumb {\n                background: var(--dark-opacity-10);\n                border-radius: 4px;\n            }\n\n            &::-webkit-scrollbar-thumb:hover {\n                background: var(--dark-opacity-20);\n            }\n\n            .productCard {\n                border-radius: 0.5rem;\n                transition: all 0.2s ease;\n                outline: none;\n\n                &:is(.selected) {\n                    background: var(--dark-opacity-3);\n                }\n\n                &:focus-visible {\n                    box-shadow: 0 0 0 2px var(--primary-opacity-20);\n                }\n            }\n\n            ", "\n\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 256px;\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, function (props) { return props.$showResultList ? "none" : "block"; }, devices_1.devices.xl, disabledStyles, function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, devices_1.devices.xl, function (props) { return props.$size === "small" && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                row-gap: 0.5rem;\n                max-height: 256px;\n            "], ["\n                row-gap: 0.5rem;\n                max-height: 256px;\n            "]))); }, devices_1.devices.xl, function (props) { return props.$disabled && disabledStyles; });
 exports.LoadingStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"], ["\n    text-align: center;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,4 +1,3 @@
-import { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
     component: ({ tabs, activeTab, defaultTab, size, hasAutoFlex, isHideTabHeaderOnMobile, onChange, }: import("..").TabsProps) => import("react/jsx-runtime").JSX.Element;
@@ -8,10 +7,71 @@ declare const meta: {
     tags: string[];
 };
 export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const WithDefaultTab: Story;
-export declare const WithDisabledTab: Story;
-export declare const WithAutoFlex: Story;
-export declare const SmallSize: Story;
-export declare const LargeSize: Story;
+export declare const Default: {
+    args: {
+        tabs: {
+            key: string;
+            title: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        size: string;
+    };
+};
+export declare const WithDefaultTab: {
+    args: {
+        tabs: {
+            key: string;
+            title: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        defaultTab: string;
+        size: string;
+    };
+};
+export declare const WithDisabledTab: {
+    args: {
+        tabs: ({
+            key: string;
+            title: string;
+            content: import("react/jsx-runtime").JSX.Element;
+            isDisabled?: undefined;
+        } | {
+            key: string;
+            title: string;
+            content: import("react/jsx-runtime").JSX.Element;
+            isDisabled: boolean;
+        })[];
+        size: string;
+    };
+};
+export declare const WithAutoFlex: {
+    args: {
+        tabs: {
+            key: string;
+            title: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        hasAutoFlex: boolean;
+        size: string;
+    };
+};
+export declare const SmallSize: {
+    args: {
+        tabs: {
+            key: string;
+            title: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        size: string;
+    };
+};
+export declare const LargeSize: {
+    args: {
+        tabs: {
+            key: string;
+            title: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        size: string;
+    };
+};