krl-alfred 1.84.0 → 2.17.4

package/dist/components/SearchBox/SearchBox.js

@@ -10,68 +10,143 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+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 = function (_a) {
-    var _b = _a.onKeyUp, onKeyUp = _b === void 0 ? props_1.SearchBoxDefault.onKeyUp : _b, _c = _a.onBlur, onBlur = _c === void 0 ? props_1.SearchBoxDefault.onBlur : _c, _d = _a.onFocus, onFocus = _d === void 0 ? props_1.SearchBoxDefault.onFocus : _d, _e = _a.onChange, onChange = _e === void 0 ? props_1.SearchBoxDefault.onChange : _e, _f = _a.onButtonClick, onButtonClick = _f === void 0 ? props_1.SearchBoxDefault.onButtonClick : _f, _g = _a.children, children = _g === void 0 ? props_1.SearchBoxDefault.children : _g, _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, value = _a.value;
+var SearchBox = react_1.default.forwardRef(function (_a, ref) {
+    var _b;
+    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)();
+    var resultRef = (0, react_1.useRef)(null);
     var simplebarRef = (0, react_1.useRef)(null);
-    var _m = (0, react_1.useState)(null), selectedIndex = _m[0], setSelectedIndex = _m[1];
-    var handleKeyUp = function (e) {
-        e = e || window.event;
-        var charCode = e.keyCode || e.which;
-        if (![38, 40].includes(charCode)) {
-            onKeyUp(e);
+    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
+    var handleRef = function (element) {
+        innerRef.current = element;
+        if (typeof ref === 'function') {
+            ref(element);
         }
-        else {
-            e.preventDefault();
+        else if (ref) {
+            ref.current = element;
         }
     };
-    var handleKeyDown = function (e) {
-        var _a;
-        e = e || window.event;
-        var charCode = e.keyCode || e.which;
-        if ([38, 40].includes(charCode)) {
-            e.preventDefault();
-            // 38 up , 40 down
-            var list_1 = (_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".productCard");
-            if (list_1.length > 0) {
-                setSelectedIndex(function (prev) { return charCode === 38 ? prev === 0 ? 0 : prev - 1 : prev === list_1.length - 1 ? list_1.length - 1 : prev === null ? 0 : prev + 1; });
-            }
+    var handleKeyUp = (0, react_1.useCallback)(function (e) {
+        if (![38, 40, 13].includes(e.keyCode)) {
+            onKeyUp(e);
         }
         else {
-            setSelectedIndex(null);
+            e.preventDefault();
         }
-    };
+    }, [onKeyUp]);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
+        if (!showResultList)
+            return;
+        var list = (_a = resultRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".productCard");
+        if (!(list === null || list === void 0 ? void 0 : list.length))
+            return;
+        switch (e.keyCode) {
+            case 38: // up
+                e.preventDefault();
+                setSelectedIndex(function (prev) {
+                    return prev === null ? list.length - 1 :
+                        prev === 0 ? 0 : prev - 1;
+                });
+                break;
+            case 40: // down
+                e.preventDefault();
+                setSelectedIndex(function (prev) {
+                    return prev === null ? 0 :
+                        prev === list.length - 1 ? list.length - 1 : prev + 1;
+                });
+                break;
+            case 13: // enter
+                e.preventDefault();
+                if (selectedIndex !== null) {
+                    list[selectedIndex].click();
+                }
+                break;
+            case 27: // escape
+                e.preventDefault();
+                (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+                break;
+            default:
+                setSelectedIndex(null);
+        }
+    }, [showResultList, selectedIndex]);
     (0, react_1.useEffect)(function () {
-        var _a;
-        var list = (_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".productCard");
-        list === null || list === void 0 ? void 0 : list.forEach(function (el, index) {
+        if (!resultRef.current || selectedIndex === null)
+            return;
+        var list = resultRef.current.querySelectorAll(".productCard");
+        list.forEach(function (el, index) {
             var _a;
             if (index === selectedIndex) {
                 el.classList.add("selected");
-                (_a = simplebarRef.current.el.querySelector('.simplebar-content-wrapper')) === null || _a === void 0 ? void 0 : _a.scrollTo({
-                    top: el.offsetHeight * (index),
-                    left: 0,
-                    behavior: 'smooth'
-                });
+                var scrollContainer = (_a = simplebarRef.current) === null || _a === void 0 ? void 0 : _a.el.querySelector('.simplebar-content-wrapper');
+                if (scrollContainer) {
+                    var elementTop = el.offsetTop;
+                    var elementHeight = el.offsetHeight;
+                    var containerHeight = scrollContainer.clientHeight;
+                    var scrollTop = scrollContainer.scrollTop;
+                    if (elementTop < scrollTop) {
+                        scrollContainer.scrollTo({
+                            top: elementTop,
+                            behavior: 'smooth'
+                        });
+                    }
+                    else if (elementTop + elementHeight > scrollTop + containerHeight) {
+                        scrollContainer.scrollTo({
+                            top: elementTop + elementHeight - containerHeight,
+                            behavior: 'smooth'
+                        });
+                    }
+                }
             }
             else {
                 el.classList.remove("selected");
             }
         });
     }, [selectedIndex]);
-    return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$showResultList": showResultList, "$size": size }, { 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", { type: "text", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon", "aria-label": t("SEARCH") }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Searchsmall" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { 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 }, { children: isLoading ? Array.from({ length: 4 }, function (_, index) { return index; }).map(function (index) { return (0, jsx_runtime_1.jsx)(ProductCardHorizontal_1.default, { hasLoading: true }, index); }) : children })) })) })))] })));
-};
-exports.default = SearchBox;
+    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 }) }), 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.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SearchBoxStyledProps } from "./props";
 export declare const SearchBoxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SearchBoxStyledProps>> & string;
-export declare const LoadingStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("./props").SearchBox>> & string;
+export declare const LoadingStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -3,13 +3,34 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingStyled = exports.SearchBoxStyled = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\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    .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            &::placeholder {\n                color: var(--dark-opacity-50);\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        max-height: 408px;\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        .resultListInner{\n            position: relative;\n            overflow: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\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                .simplebar-track.simplebar-vertical {\n                    width: 9px !important;\n                }\n            }\n            .productCard{\n                border-radius: 0.5rem;\n                transition: all .2s ease;\n                &:is(.selected){\n                    background: var(--dark-opacity-3);\n                }\n            }\n            ", "\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 326px;\n                [data-simplebar] {\n                    max-height: 326px !important;\n                }\n            }\n        }\n    }\n"], ["\n    position: relative;\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    .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            &::placeholder {\n                color: var(--dark-opacity-50);\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        max-height: 408px;\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        .resultListInner{\n            position: relative;\n            overflow: hidden;\n            border-radius: inherit;\n            border: 1px solid var(--dark-opacity-10);\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                .simplebar-track.simplebar-vertical {\n                    width: 9px !important;\n                }\n            }\n            .productCard{\n                border-radius: 0.5rem;\n                transition: all .2s ease;\n                &:is(.selected){\n                    background: var(--dark-opacity-3);\n                }\n            }\n            ", "\n            @media only screen and ", " {\n                row-gap: 0.5rem;\n                max-height: 326px;\n                [data-simplebar] {\n                    max-height: 326px !important;\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, 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" ? "\n                row-gap: 0.5rem;\n                max-height: 326px;\n                [data-simplebar] {\n                    max-height: 326px !important;\n                }\n            " : ""; }, devices_1.devices.xl);
-exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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;
+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: 326px;\n                [data-simplebar] {\n                    max-height: 326px !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: 326px;\n                [data-simplebar] {\n                    max-height: 326px !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: 326px;\n                [data-simplebar] {\n                    max-height: 326px !important;\n                }\n            "], ["\n                row-gap: 0.5rem;\n                max-height: 326px;\n                [data-simplebar] {\n                    max-height: 326px !important;\n                }\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/SearchBox/props.d.ts

@@ -1,23 +1,45 @@
 /// <reference types="react" />
-export declare const sizes: string[];
-type SIZES = typeof sizes[number];
-export interface SearchBox {
-    size?: SIZES;
-    onKeyUp?(e: any): any;
-    onBlur?: () => void;
-    onFocus?: () => void;
-    onChange?(e: any): void;
-    onButtonClick?(): void;
+export declare const sizes: readonly ["medium", "small"];
+export type Size = typeof sizes[number];
+export interface SearchBoxProps {
+    /** The size variant of the search box */
+    size?: Size;
+    /** Handler for keyup events */
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Handler for blur events */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Handler for focus events */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Handler for change events */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Handler for search button click */
+    onButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Content to be rendered in the result list */
     children?: React.ReactNode;
+    /** Whether the search is currently loading */
     isLoading?: boolean;
+    /** Whether to show the result list */
     showResultList?: boolean;
+    /** Placeholder text for the input */
     placeholder?: string;
+    /** Current value of the input */
     value?: string;
+    /** Maximum height of the result list in pixels */
+    maxResultHeight?: number;
+    /** Minimum characters required before showing results */
+    minSearchLength?: number;
+    /** ARIA label for the search input */
+    ariaLabel?: string;
+    /** ID for the search input (for accessibility) */
+    id?: string;
+    /** Whether the search box is disabled */
+    disabled?: boolean;
+    /** Custom class name for the root element */
+    className?: string;
 }
 export interface SearchBoxStyledProps {
     $showResultList?: boolean;
-    $size?: SIZES;
+    $size?: Size;
+    $disabled?: boolean;
 }
-export declare const SearchBoxDefault: SearchBox;
-export type SearchBoxProps = typeof SearchBoxDefault;
-export {};
+export declare const SearchBoxDefault: Required<Omit<SearchBoxProps, 'children' | 'className' | 'id'>>;

package/dist/components/SearchBox/props.js

@@ -4,13 +4,17 @@ exports.SearchBoxDefault = exports.sizes = void 0;
 exports.sizes = ['medium', 'small'];
 exports.SearchBoxDefault = {
     size: "medium",
-    onKeyUp: null,
-    onBlur: null,
-    onFocus: null,
-    onChange: null,
-    onButtonClick: null,
-    children: null,
+    onKeyUp: function () { },
+    onBlur: function () { },
+    onFocus: function () { },
+    onChange: function () { },
+    onButtonClick: function () { },
     isLoading: false,
     showResultList: false,
-    placeholder: "Teknolojik ürün ara..."
+    placeholder: "Teknolojik ürün ara...",
+    value: "",
+    maxResultHeight: 408,
+    minSearchLength: 2,
+    ariaLabel: "Search",
+    disabled: false
 };

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

@@ -1,11 +1,12 @@
+import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ onKeyUp, onBlur, onFocus, onChange, onButtonClick, children, isLoading, showResultList, placeholder, size, value, }: import("../props").SearchBox) => import("react/jsx-runtime").JSX.Element;
+    component: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("../props").SearchBoxProps & React.RefAttributes<HTMLInputElement>>>;
     tags: string[];
     argTypes: {
         size: {
             control: string;
-            options: string[];
+            options: readonly ["medium", "small"];
         };
     };
 };

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

@@ -1,6 +1,6 @@
 import { TabsProps } from "./props";
 declare const Tabs: {
-    ({ activeIndex, children, onActive, hasAutoFlex, size, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    ({ activeIndex, children, onActive, hasAutoFlex, isHideTabHeaderOnMobile, size, }: TabsProps): import("react/jsx-runtime").JSX.Element;
     TabItem: ({ isActive, hasAutoFlex, size, isDisabled, title, children, key, onClick, }: import("./props").TabItem) => import("react/jsx-runtime").JSX.Element;
 };
 export default Tabs;

package/dist/components/Tabs/Tabs.js

@@ -44,9 +44,9 @@ var Tabs_styled_1 = require("./Tabs.styled");
 var TabContext_1 = require("./TabContext");
 var TabItem_1 = __importDefault(require("./TabItem"));
 var Tabs = function (_a) {
-    var _b = _a.activeIndex, activeIndex = _b === void 0 ? props_1.TabsDefault.activeIndex : _b, _c = _a.children, children = _c === void 0 ? props_1.TabsDefault.children : _c, _d = _a.onActive, onActive = _d === void 0 ? props_1.TabsDefault.onActive : _d, _e = _a.hasAutoFlex, hasAutoFlex = _e === void 0 ? props_1.TabsDefault.hasAutoFlex : _e, _f = _a.size, size = _f === void 0 ? props_1.TabsDefault.size : _f;
-    var _g = (0, react_1.useState)(activeIndex || 0), tabActiveIndex = _g[0], setTabActiveIndex = _g[1];
-    var _h = (0, react_1.useState)(null), activeContent = _h[0], setActiveContent = _h[1];
+    var _b = _a.activeIndex, activeIndex = _b === void 0 ? props_1.TabsDefault.activeIndex : _b, _c = _a.children, children = _c === void 0 ? props_1.TabsDefault.children : _c, _d = _a.onActive, onActive = _d === void 0 ? props_1.TabsDefault.onActive : _d, _e = _a.hasAutoFlex, hasAutoFlex = _e === void 0 ? props_1.TabsDefault.hasAutoFlex : _e, _f = _a.isHideTabHeaderOnMobile, isHideTabHeaderOnMobile = _f === void 0 ? props_1.TabsDefault.isHideTabHeaderOnMobile : _f, _g = _a.size, size = _g === void 0 ? props_1.TabsDefault.size : _g;
+    var _h = (0, react_1.useState)(activeIndex || 0), tabActiveIndex = _h[0], setTabActiveIndex = _h[1];
+    var _j = (0, react_1.useState)(null), activeContent = _j[0], setActiveContent = _j[1];
     (0, react_1.useEffect)(function () {
         setTabActiveIndex(activeIndex);
     }, [activeIndex]);
@@ -67,21 +67,21 @@ var Tabs = function (_a) {
         };
     }, [tabActiveIndex, activeIndex]);
     (0, react_1.useEffect)(function () {
-        var _a, _b, _c;
+        var _a, _b;
         if (window && typeof window !== "undefined") {
             var elem = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.querySelector(".tabHeader");
             var activeItem = (_b = window === null || window === void 0 ? void 0 : window.document) === null || _b === void 0 ? void 0 : _b.querySelector(".customTabItem.isActive");
             if (activeItem && elem) {
-                //activeItem.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-                elem.scrollLeft = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.offsetLeft) - (window.innerWidth / 2) + (((_c = activeItem === null || activeItem === void 0 ? void 0 : activeItem.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width) / 2);
+                activeItem.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+                //elem.scrollLeft = activeItem?.offsetLeft - (window.innerWidth / 2) + (activeItem?.getBoundingClientRect()?.width / 2);
             }
         }
     });
-    return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ "$size": size, "$hasAutoFlex": hasAutoFlex, className: "tabHeader" }, { children: children === null || children === void 0 ? void 0 : children.map(function (child, index) { return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(TabContext_1.TabsContext.Provider, __assign({ value: getTabsContext(index) }, { children: child
+    return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ "$size": size, "$hasAutoFlex": hasAutoFlex, "$isHideTabHeaderOnMobile": isHideTabHeaderOnMobile, className: "tabHeader" }, { children: children === null || children === void 0 ? void 0 : children.map(function (child, index) { return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(TabContext_1.TabsContext.Provider, __assign({ value: getTabsContext(index) }, { children: child
                             ? // cloneElement is needed for backward compatibility with custom
                                 // styled components that rely on active. We should reassess
                                 // if it is still necessary in our next major release.
-                                react_1.default.cloneElement(child, { isActive: activeIndex === index, hasAutoFlex: hasAutoFlex, size: size }) : child })) }, index)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ className: "active-tab-".concat(activeIndex) }, { children: activeContent }))] }));
+                                react_1.default.cloneElement(child, { isActive: activeIndex === index, hasAutoFlex: hasAutoFlex, size: size }) : child })) }, index)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ "$size": size, className: "active-tab-".concat(activeIndex) }, { children: activeContent }))] }));
 };
 Tabs.TabItem = TabItem_1.default;
 exports.default = Tabs;

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

@@ -4,4 +4,4 @@ export declare const TabsStyled: import("styled-components/dist/types").IStyledC
 export declare const TabHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TabStyledProps>> & string;
 export declare const TabItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TabItemStyledProps>> & string;
 export declare const TabItemTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TabItemStyledProps>> & string;
-export declare const TabItemContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("./props").TabItem>> & string;
+export declare const TabItemContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TabItemStyledProps>> & string;

package/dist/components/Tabs/Tabs.styled.js

@@ -11,8 +11,8 @@ exports.TabItemContentStyled = exports.TabItemTitleStyled = exports.TabItemStyle
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.TabsStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: ", ";\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: ", ";\n    ", "\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return props.$size === "large" ? "1.5rem" : "1rem"; }, function (props) { return !props.$hasAutoFlex && "\n      scroll-snap-type: x proximity;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width: none;\n      overflow-x: scroll;\n      padding: 2rem;\n      margin: -2rem;\n      @media only screen and ".concat(devices_1.devices.xl, " {\n        padding: 2rem 1rem;\n        margin: -2rem -1rem;\n      }\n    "); });
+exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: ", ";\n    ", "\n    ", "\n    @media only screen and ", " {\n        column-gap: ", ";\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: ", ";\n    ", "\n    ", "\n    @media only screen and ", " {\n        column-gap: ", ";\n    }\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return props.$size === "large" ? "1.5rem" : "1rem"; }, function (props) { return !props.$hasAutoFlex && "\n      scroll-snap-type: x proximity;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width: none;\n      overflow-x: scroll;\n      padding: 2rem;\n      margin: -2rem;\n      @media only screen and ".concat(devices_1.devices.xl, " {\n        padding: 2rem 1rem;\n        margin: -2rem -1rem;\n        column-gap: ").concat(function (props) { return props.$size === "large" ? "1rem" : "1rem"; }, ";\n      }\n    "); }, function (props) { return props.$isHideTabHeaderOnMobile ? "\n        @media only screen and ".concat(devices_1.devices.lg, " {\n            display: none;\n        }\n    ") : ""; }, devices_1.devices.xl, function (props) { return props.$size === "large" ? "1rem" : "1rem"; });
 exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: ", ";\n    ", "\n"], ["\n    flex: ", ";\n    ", "\n"])), function (props) { return props.$hasAutoFlex ? "1 0" : "auto 0"; }, function (props) { return props.$isDisabled ? "\n        cursor: no-drop;\n        pointer-events: none;\n        user-select: none;\n    " : ""; });
 exports.TabItemTitleStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: ", ";\n    height: 40px;\n    cursor: pointer;\n    font: var(--body-semi-bold-14-17);\n    white-space: ", ";\n    outline: none !important;\n    &:hover {\n        color: var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"], ["\n    background: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: ", ";\n    height: 40px;\n    cursor: pointer;\n    font: var(--body-semi-bold-14-17);\n    white-space: ", ";\n    outline: none !important;\n    &:hover {\n        color: var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"])), function (props) { return props.$isActive ? "var(--dark)" : "var(--dark-opacity-75)"; }, function (props) { return props.$isActive ? "var(--grey-10)" : "transparent"; }, function (props) { return props.$isActive ? "var(--box-shadow-color)" : "transparent"; }, function (props) { return props.$hasAutoFlex ? "0" : props.$size === "large" ? "0 1.5rem" : "0 1rem"; }, function (props) { return props.$hasAutoFlex ? "pre-wrap" : "nowrap"; });
-exports.TabItemContentStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding-top: 1rem;\n"], ["\n    padding-top: 1rem;\n"])));
+exports.TabItemContentStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding-top: ", ";\n    @media only screen and ", " {\n        padding-top: ", ";\n    }\n"], ["\n    padding-top: ", ";\n    @media only screen and ", " {\n        padding-top: ", ";\n    }\n"])), function (props) { return props.$size === "large" ? "1.5rem" : "1rem"; }, devices_1.devices.lg, function (props) { return props.$size === "large" ? "1.5rem" : "1rem"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -6,6 +6,7 @@ export interface Tabs {
     children?: any;
     onActive?(e: any): void;
     hasAutoFlex?: boolean;
+    isHideTabHeaderOnMobile?: boolean;
     size: SIZES;
 }
 export interface TabItem {
@@ -20,6 +21,7 @@ export interface TabItem {
 }
 export interface TabStyledProps {
     $hasAutoFlex?: boolean;
+    $isHideTabHeaderOnMobile?: boolean;
     $size?: SIZES;
 }
 export interface TabItemStyledProps {

package/dist/components/Tabs/props.js

@@ -7,6 +7,7 @@ exports.TabsDefault = {
     children: null,
     onActive: null,
     hasAutoFlex: true,
+    isHideTabHeaderOnMobile: false,
     size: "medium"
 };
 exports.TabItemDefault = {

package/dist/components/VideoCard/VideoCard.d.ts

@@ -1,6 +1,3 @@
 import { VideoCardProps } from "./props";
-declare const VideoCard: {
-    ({ poster, title, videoUrl }: VideoCardProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {};
-};
+declare const VideoCard: ({ poster, title, videoUrl }: VideoCardProps) => import("react/jsx-runtime").JSX.Element;
 export default VideoCard;

package/dist/components/VideoCard/VideoCard.js

@@ -10,13 +10,49 @@ var __assign = (this && this.__assign) || function () {
     };
     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 });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var props_1 = require("./props");
 var VideoCard_styled_1 = require("./VideoCard.styled");
+var Icon_1 = __importDefault(require("../Icon"));
+var useVideoPlayer_1 = require("../../hooks/useVideoPlayer");
+var VideoControlsComponent = function (_a) {
+    var videoRef = _a.videoRef, onPlayClick = _a.onPlayClick, onMuteClick = _a.onMuteClick;
+    var _b = (0, react_1.useState)({
+        isPaused: true,
+        isMuted: true
+    }), controlState = _b[0], setControlState = _b[1];
+    (0, react_1.useEffect)(function () {
+        var video = videoRef.current;
+        if (!video)
+            return;
+        var updateControlState = function () {
+            setControlState({
+                isPaused: video.paused,
+                isMuted: video.muted
+            });
+        };
+        // Initial state
+        updateControlState();
+        // Event listeners
+        video.addEventListener('play', updateControlState);
+        video.addEventListener('pause', updateControlState);
+        video.addEventListener('volumechange', updateControlState);
+        return function () {
+            video.removeEventListener('play', updateControlState);
+            video.removeEventListener('pause', updateControlState);
+            video.removeEventListener('volumechange', updateControlState);
+        };
+    }, [videoRef]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(VideoCard_styled_1.VideoControls, { children: [(0, jsx_runtime_1.jsx)(VideoCard_styled_1.PlayOverlay, __assign({ onClick: onPlayClick }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: controlState.isPaused ? "Play" : "Pause", width: "16", height: "16", color: "white", hasWrapper: false }) })), (0, jsx_runtime_1.jsx)(VideoCard_styled_1.ControlButton, __assign({ onClick: onMuteClick }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: controlState.isMuted ? "VolumeOffSm" : "VolumeUpSm", width: "16", height: "16", color: "white", hasWrapper: false }) }))] }) }));
+};
 var VideoCard = function (_a) {
     var _b = _a.poster, poster = _b === void 0 ? props_1.VideoCardDefault.poster : _b, _c = _a.title, title = _c === void 0 ? props_1.VideoCardDefault.title : _c, _d = _a.videoUrl, videoUrl = _d === void 0 ? props_1.VideoCardDefault.videoUrl : _d;
-    return ((0, jsx_runtime_1.jsxs)(VideoCard_styled_1.VideoCardStyled, { children: [(0, jsx_runtime_1.jsx)(VideoCard_styled_1.VideoWrapper, { children: (0, jsx_runtime_1.jsxs)("video", __assign({ controls: true }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoUrl, type: "video/mp4" }), "Your browser does not support the video tag."] })) }), (0, jsx_runtime_1.jsx)(VideoCard_styled_1.Title, { children: title })] }));
+    var _e = (0, useVideoPlayer_1.useVideoPlayer)(), videoRef = _e.videoRef, togglePlay = _e.togglePlay, toggleMute = _e.toggleMute;
+    return ((0, jsx_runtime_1.jsxs)(VideoCard_styled_1.VideoCardStyled, { children: [(0, jsx_runtime_1.jsxs)(VideoCard_styled_1.VideoWrapper, { children: [(0, jsx_runtime_1.jsxs)("video", __assign({ ref: videoRef, poster: poster, muted: true, onClick: togglePlay }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoUrl, type: "video/mp4" }), "Your browser does not support the video tag."] })), (0, jsx_runtime_1.jsx)(VideoControlsComponent, { videoRef: videoRef, onPlayClick: togglePlay, onMuteClick: toggleMute })] }), (0, jsx_runtime_1.jsx)(VideoCard_styled_1.Title, { children: title })] }));
 };
-VideoCard.defaultProps = {};
 exports.default = VideoCard;

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

@@ -1,4 +1,7 @@
 /// <reference types="react" />
 export declare const VideoCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const VideoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VideoControls: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ControlButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PlayOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/components/VideoCard/VideoCard.styled.js

@@ -7,9 +7,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Title = exports.VideoWrapper = exports.VideoCardStyled = void 0;
+exports.Title = exports.PlayOverlay = exports.ControlButton = exports.VideoControls = exports.VideoWrapper = exports.VideoCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.VideoCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    cursor: pointer;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n"], ["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    transition: all .2s ease;\n    cursor: pointer;\n    &:hover{\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n"])));
-exports.VideoWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    video{\n        display: block;\n        width: 100%;\n        height: 371px;\n        object-fit: cover;\n        position: relative;\n        overflow: hidden;\n        border-radius: 0.5rem;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    video{\n        display: block;\n        width: 100%;\n        height: 371px;\n        object-fit: cover;\n        position: relative;\n        overflow: hidden;\n        border-radius: 0.5rem;\n    }\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-top: 1.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    font : var(--title-bold-16-19);\n"], ["\n    margin-top: 1.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    font : var(--title-bold-16-19);\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+exports.VideoWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    position: relative;\n    video{\n        display: block;\n        width: 100%;\n        height: 371px;\n        object-fit: cover;\n        position: relative;\n        overflow: hidden;\n        border-radius: 0.5rem;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    position: relative;\n    video{\n        display: block;\n        width: 100%;\n        height: 371px;\n        object-fit: cover;\n        position: relative;\n        overflow: hidden;\n        border-radius: 0.5rem;\n    }\n"])));
+exports.VideoControls = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    bottom: 1rem;\n    right: 1rem;\n    left: 1rem;\n    display: flex;\n    gap: 1rem;\n    z-index: 2;\n    align-items: center;\n    justify-content: flex-start;\n"], ["\n    position: absolute;\n    bottom: 1rem;\n    right: 1rem;\n    left: 1rem;\n    display: flex;\n    gap: 1rem;\n    z-index: 2;\n    align-items: center;\n    justify-content: flex-start;\n"])));
+exports.ControlButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    cursor: pointer;\n    svg{\n        display: block;\n    }\n"], ["\n    cursor: pointer;\n    svg{\n        display: block;\n    }\n"])));
+exports.PlayOverlay = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    cursor: pointer;\n    svg{\n        display: block;\n    }\n"], ["\n    cursor: pointer;\n    svg{\n        display: block;\n    }\n"])));
+exports.Title = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-top: 1.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    font : var(--title-bold-16-19);\n"], ["\n    margin-top: 1.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    font : var(--title-bold-16-19);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 interface VideoCard {
-    poster?: React.ReactNode;
+    poster?: string;
     title?: string;
     videoUrl?: string;
 }

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

@@ -7,7 +7,7 @@ declare const _default: {
 export default _default;
 export declare const Default: {
     args: {
-        poster: import("react/jsx-runtime").JSX.Element;
+        poster: string;
         title: string;
         videoUrl: string;
     };