krl-alfred 2.17.6 → 2.17.8

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

@@ -10,6 +10,6 @@ export declare const BreadcrumbsListItemIconWrapper: import("styled-components/d
 export declare const BreadcrumbsListItemBackIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const BreadcrumbsListDropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const BreadcrumbsListDropdownOpener: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const DropdownList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, BreadcrumbsStyledProps>> & string;
+export declare const DropdownList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export declare const SubMenuMobileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export declare const SubMenuMobileItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, BreadcrumbsStyledProps>> & string;

package/dist/components/ReviewBlock/ReviewBlock.js

@@ -34,7 +34,7 @@ var ReviewBlock = function (_a) {
     ];
     return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ReviewCard, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.Header, __assign({ "$hasDropdown": hasDropdown, "$hasApproveButton": hasApproveButton }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.StarsWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "notFilleds" }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--dark-opacity-10)" }, i)); }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "filleds", style: { width: "".concat(percentage, "%") } }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--yellowDark)" }, i)); }) }))] }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.CustomerName, { children: customerName })] }), (0, jsx_runtime_1.jsxs)("div", { children: [hasApproveButton && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onApproveButtonClick }, { children: t("POST_COMMENTS") })) })), hasBadge && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: badgeVariant, title: badgeText }) })), hasDropdown && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "0", width: "145px", top: "calc(100% + 4px)" }) })), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Date, { children: date })] })] })), comment && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.PlatformReview, { children: comment }), productReviews === null || productReviews === void 0 ? void 0 : productReviews.map(function (product, idx) {
                 var _a, _b;
-                return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductReviewBlock, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductWrapper, { children: [(0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductImage, { children: product === null || product === void 0 ? void 0 : product.image }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductReviewContent, { children: (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductName, { children: product === null || product === void 0 ? void 0 : product.name }) })] }), (product === null || product === void 0 ? void 0 : product.question) && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductQuestion, { children: product === null || product === void 0 ? void 0 : product.question }), (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductAnswer, { children: ["\u201C", product === null || product === void 0 ? void 0 : product.answer, "\u201D"] }), ((_a = product === null || product === void 0 ? void 0 : product.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Tags, { children: (_b = product === null || product === void 0 ? void 0 : product.tags) === null || _b === void 0 ? void 0 : _b.map(function (tag, i) { return ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: tag }, i)); }) }))] }, idx));
+                return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductReviewBlock, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductWrapper, { children: [(0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductImage, { children: product === null || product === void 0 ? void 0 : product.image }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductReviewContent, { children: (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductName, { children: product === null || product === void 0 ? void 0 : product.name }) })] }), (product === null || product === void 0 ? void 0 : product.question) && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductQuestion, { children: product === null || product === void 0 ? void 0 : product.question }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductAnswer, { children: product === null || product === void 0 ? void 0 : product.answer }), ((_a = product === null || product === void 0 ? void 0 : product.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Tags, { children: (_b = product === null || product === void 0 ? void 0 : product.tags) === null || _b === void 0 ? void 0 : _b.map(function (tag, i) { return ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: tag }, i)); }) }))] }, idx));
             })] }));
 };
 exports.default = ReviewBlock;

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

@@ -1,6 +1,3 @@
 import { TabsProps } from "./props";
-declare const Tabs: {
-    ({ 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;
-};
+declare const Tabs: ({ tabs, activeTab, defaultTab, size, hasAutoFlex, isHideTabHeaderOnMobile, onChange, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/components/Tabs/Tabs.js

@@ -10,79 +10,47 @@ 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 = __importStar(require("react"));
+var react_1 = require("react");
 var props_1 = require("./props");
 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.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];
+    var _b;
+    var _c = _a.tabs, tabs = _c === void 0 ? props_1.TabsDefault.tabs : _c, activeTab = _a.activeTab, defaultTab = _a.defaultTab, _d = _a.size, size = _d === void 0 ? props_1.TabsDefault.size : _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, onChange = _a.onChange;
+    var _g = (0, react_1.useState)(function () {
+        var _a;
+        if (activeTab)
+            return activeTab;
+        if (defaultTab)
+            return defaultTab;
+        return ((_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.key) || '';
+    }), currentTab = _g[0], setCurrentTab = _g[1];
+    var headerRef = (0, react_1.useRef)(null);
+    // Sync with controlled activeTab prop
     (0, react_1.useEffect)(function () {
-        setTabActiveIndex(activeIndex);
-    }, [activeIndex]);
-    var handleActive = function (e) { return onActive(e); };
-    var getTabsContext = (0, react_1.useCallback)(function (index) {
-        var activateTab = function (nextIndex) {
-            setTabActiveIndex(nextIndex);
-            if (handleActive) {
-                handleActive(nextIndex);
-            }
-        };
-        return {
-            activeIndex: tabActiveIndex,
-            setActiveIndex: setTabActiveIndex,
-            active: activeIndex === index,
-            onActivate: function () { return activateTab(index); },
-            setActiveContent: setActiveContent,
-        };
-    }, [tabActiveIndex, activeIndex]);
+        if (activeTab) {
+            setCurrentTab(activeTab);
+        }
+    }, [activeTab]);
+    // Handle mobile scroll into view
     (0, react_1.useEffect)(function () {
-        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");
-            // Mobil cihaz kontrolü (768px breakpoint'i)
+        if (typeof window !== "undefined") {
+            var headerElement = headerRef.current;
+            var activeItem = headerElement === null || headerElement === void 0 ? void 0 : headerElement.querySelector("[data-key=\"".concat(currentTab, "\"]"));
             var isMobile = window.innerWidth <= 992;
-            if (activeItem && elem && isMobile) {
+            if (activeItem && headerElement && isMobile) {
                 activeItem.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
             }
         }
-    }, [activeIndex]); // activeIndex değiştiğinde çalışsın
-    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({ "$size": size, className: "active-tab-".concat(activeIndex) }, { children: activeContent }))] }));
+    }, [currentTab]);
+    var handleTabChange = function (key) {
+        if (onChange) {
+            onChange(key);
+        }
+        setCurrentTab(key);
+    };
+    var activeTabContent = (_b = tabs.find(function (tab) { return tab.key === currentTab; })) === null || _b === void 0 ? void 0 : _b.content;
+    return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ ref: headerRef, "$size": size, "$hasAutoFlex": hasAutoFlex, "$isHideTabHeaderOnMobile": isHideTabHeaderOnMobile }, { children: tabs.map(function (tab) { return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "data-key": tab.key, "$size": size, "$isActive": currentTab === tab.key, "$isDisabled": tab.isDisabled, "$hasAutoFlex": hasAutoFlex }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$size": size, "$isActive": currentTab === tab.key, "$hasAutoFlex": hasAutoFlex, onClick: function () { return !tab.isDisabled && handleTabChange(tab.key); } }, { children: tab.title })) }), tab.key)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ "$size": size }, { children: activeTabContent }))] }));
 };
-Tabs.TabItem = TabItem_1.default;
 exports.default = Tabs;

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

@@ -10,9 +10,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabItemContentStyled = exports.TabItemTitleStyled = exports.TabItemStyled = exports.TabHeaderStyled = exports.TabsStyled = void 0;
 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    @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"; });
+var getTabSize = function ($size) {
+    switch ($size) {
+        case 'lg':
+            return {
+                columnGap: '1.5rem',
+                padding: '0 1.5rem',
+                paddingTop: '1.5rem',
+                height: '40px'
+            };
+        case 'sm':
+            return {
+                columnGap: '1rem',
+                padding: '0 1rem',
+                paddingTop: '1rem',
+                height: '32px'
+            };
+        case 'md':
+        default:
+            return {
+                columnGap: '1rem',
+                padding: '0 1rem',
+                paddingTop: '1rem',
+                height: '40px'
+            };
+    }
+};
+exports.TabsStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+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"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: ", ";\n    ", "\n    ", "\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return getTabSize(props.$size).columnGap; }, 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(getTabSize(props.$size).columnGap, ";\n      }\n    "); }, function (props) { return props.$isHideTabHeaderOnMobile ? "\n        @media only screen and (".concat(devices_1.devices.lg, ") {\n            display: none;\n        }\n    ") : ""; });
 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: ", ";\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"; });
+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: ", ";\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: ", ";\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" : getTabSize(props.$size).padding; }, function (props) { return getTabSize(props.$size).height; }, function (props) { return props.$hasAutoFlex ? "pre-wrap" : "nowrap"; });
+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 getTabSize(props.$size).paddingTop; }, devices_1.devices.lg, function (props) { return getTabSize(props.$size).paddingTop; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1 +1,2 @@
-export { default } from './Tabs';
+export { default } from "./Tabs";
+export * from "./props";

package/dist/components/Tabs/index.js

@@ -1,4 +1,18 @@
 "use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,3 +20,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 var Tabs_1 = require("./Tabs");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });
+__exportStar(require("./props"), exports);

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

@@ -1,23 +1,20 @@
-/// <reference types="react" />
-export declare const sizes: string[];
+import { ReactNode } from "react";
+export declare const sizes: readonly ["lg", "md", "sm"];
 type SIZES = typeof sizes[number];
-export interface Tabs {
-    activeIndex?: number;
-    children?: any;
-    onActive?(e: any): void;
-    hasAutoFlex?: boolean;
-    isHideTabHeaderOnMobile?: boolean;
-    size: SIZES;
-}
 export interface TabItem {
-    isActive?: boolean;
+    key: string;
+    title: ReactNode;
+    content: ReactNode;
     isDisabled?: boolean;
-    title?: React.ReactNode;
-    children?: any;
-    key?: number;
-    onClick?(e: any): void;
-    hasAutoFlex?: boolean;
+}
+export interface TabsProps {
+    tabs: TabItem[];
+    activeTab?: string;
+    defaultTab?: string;
     size?: SIZES;
+    hasAutoFlex?: boolean;
+    isHideTabHeaderOnMobile?: boolean;
+    onChange?: (key: string) => void;
 }
 export interface TabStyledProps {
     $hasAutoFlex?: boolean;
@@ -30,8 +27,5 @@ export interface TabItemStyledProps {
     $hasAutoFlex?: boolean;
     $size?: SIZES;
 }
-export declare const TabsDefault: Tabs;
-export declare const TabItemDefault: TabItem;
-export type TabsProps = typeof TabsDefault;
-export type TabItemProps = typeof TabItemDefault;
+export declare const TabsDefault: TabsProps;
 export {};

package/dist/components/Tabs/props.js

@@ -1,22 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabItemDefault = exports.TabsDefault = exports.sizes = void 0;
-exports.sizes = ['large', 'medium'];
+exports.TabsDefault = exports.sizes = void 0;
+exports.sizes = ['lg', 'md', 'sm'];
 exports.TabsDefault = {
-    activeIndex: null,
-    children: null,
-    onActive: null,
-    hasAutoFlex: true,
+    tabs: [],
+    size: 'md',
+    hasAutoFlex: false,
     isHideTabHeaderOnMobile: false,
-    size: "medium"
-};
-exports.TabItemDefault = {
-    isActive: false,
-    isDisabled: false,
-    title: null,
-    children: null,
-    key: null,
-    onClick: null,
-    hasAutoFlex: exports.TabsDefault.hasAutoFlex,
-    size: exports.TabsDefault.size,
 };

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

@@ -1,14 +1,17 @@
-declare const _default: {
+import { StoryObj } from "@storybook/react";
+declare const meta: {
     title: string;
-    component: (props: any) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    argTypes: {};
-};
-export default _default;
-export declare const Default: {
-    args: {
-        activeIndex: number;
-        onActive: (e: any) => void;
-        hasAutoFlex: boolean;
+    component: ({ tabs, activeTab, defaultTab, size, hasAutoFlex, isHideTabHeaderOnMobile, onChange, }: import("..").TabsProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
     };
+    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;

package/dist/components/Tabs/stories/Tabs.stories.js

@@ -14,21 +14,81 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.LargeSize = exports.SmallSize = exports.WithAutoFlex = exports.WithDisabledTab = exports.WithDefaultTab = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Tabs_1 = __importDefault(require("../Tabs"));
-exports.default = {
-    title: 'Components/Tabs',
-    component: function (props) {
-        return ((0, jsx_runtime_1.jsxs)(Tabs_1.default, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 1", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 1" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 2", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 2" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 3", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 3" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ title: "Tab 4", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 4" })), (0, jsx_runtime_1.jsx)(Tabs_1.default.TabItem, __assign({ isDisabled: true, title: "Tab 5", hasAutoFlex: props.hasAutoFlex }, { children: "Tab 5 (disabled)" }))] })));
+var meta = {
+    title: "Components/Tabs",
+    component: Tabs_1.default,
+    parameters: {
+        layout: "centered",
     },
-    tags: ['autodocs'],
-    argTypes: {}
+    tags: ["autodocs"],
+};
+exports.default = meta;
+var ExampleContent = function (_a) {
+    var title = _a.title;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { padding: "20px", background: "#f5f5f5", borderRadius: "8px" } }, { children: [title, " Content"] })));
 };
 exports.Default = {
     args: {
-        activeIndex: 0,
-        onActive: function (e) { return console.log(e, "onActive"); },
+        tabs: [
+            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
+            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
+            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
+        ],
+        size: "md",
+    },
+};
+exports.WithDefaultTab = {
+    args: {
+        tabs: [
+            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
+            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
+            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
+        ],
+        defaultTab: "tab2",
+        size: "md",
+    },
+};
+exports.WithDisabledTab = {
+    args: {
+        tabs: [
+            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
+            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }), isDisabled: true },
+            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
+        ],
+        size: "md",
+    },
+};
+exports.WithAutoFlex = {
+    args: {
+        tabs: [
+            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
+            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
+            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
+        ],
         hasAutoFlex: true,
+        size: "md",
+    },
+};
+exports.SmallSize = {
+    args: {
+        tabs: [
+            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
+            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
+            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
+        ],
+        size: "sm",
+    },
+};
+exports.LargeSize = {
+    args: {
+        tabs: [
+            { key: "tab1", title: "Tab 1", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 1" }) },
+            { key: "tab2", title: "Tab 2", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 2" }) },
+            { key: "tab3", title: "Tab 3", content: (0, jsx_runtime_1.jsx)(ExampleContent, { title: "Tab 3" }) },
+        ],
+        size: "lg",
     },
 };

package/dist/components/VideoCard/VideoCard.js

@@ -53,6 +53,6 @@ var VideoControlsComponent = function (_a) {
 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;
     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, 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 })] }));
+    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, onClick: togglePlay, playsInline: 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)(VideoControlsComponent, { videoRef: videoRef, onPlayClick: togglePlay, onMuteClick: toggleMute })] }), (0, jsx_runtime_1.jsx)(VideoCard_styled_1.Title, { children: title })] }));
 };
 exports.default = VideoCard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.17.6",
+  "version": "2.17.8",
   "files": [
     "dist"
   ],

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

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const TabsContext: React.Context<{
-    activeIndex: number;
-    setActiveIndex: (e: any) => void;
-    onActivate: () => void;
-    setActiveContent: (e: any) => void;
-}>;

package/dist/components/Tabs/TabContext.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsContext = void 0;
-var react_1 = __importDefault(require("react"));
-exports.TabsContext = react_1.default.createContext({
-    activeIndex: 0,
-    setActiveIndex: function (e) { },
-    onActivate: function () { },
-    setActiveContent: function (e) { },
-});

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

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

package/dist/components/Tabs/TabItem.js

@@ -1,42 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var props_1 = require("./props");
-var react_1 = require("react");
-var TabContext_1 = require("./TabContext");
-var Tabs_styled_1 = require("./Tabs.styled");
-var classnames_1 = __importDefault(require("classnames"));
-var TabItem = function (_a) {
-    var _b = _a.isActive, isActive = _b === void 0 ? props_1.TabItemDefault.isActive : _b, _c = _a.hasAutoFlex, hasAutoFlex = _c === void 0 ? props_1.TabsDefault.hasAutoFlex : _c, _d = _a.size, size = _d === void 0 ? props_1.TabsDefault.size : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? props_1.TabItemDefault.isDisabled : _e, _f = _a.title, title = _f === void 0 ? props_1.TabItemDefault.title : _f, _g = _a.children, children = _g === void 0 ? props_1.TabItemDefault.children : _g, _h = _a.key, key = _h === void 0 ? props_1.TabItemDefault.key : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.TabItemDefault.onClick : _j;
-    var _k = (0, react_1.useContext)(TabContext_1.TabsContext), onActivate = _k.onActivate, setActiveContent = _k.setActiveContent;
-    var onClickTab = function (event) {
-        if (event) {
-            event.preventDefault();
-        }
-        onActivate();
-        setActiveContent(children);
-        if (onClick) {
-            onClick(event);
-        }
-    };
-    (0, react_1.useEffect)(function () {
-        if (isActive)
-            setActiveContent(children);
-    }, [isActive, children]);
-    return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "$size": size, className: (0, classnames_1.default)("customTabItem", { isActive: isActive }), "$isDisabled": isDisabled, "$hasAutoFlex": hasAutoFlex }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$size": size, "$isActive": isActive, "$hasAutoFlex": hasAutoFlex, onClick: onClickTab }, { children: title })) }), key));
-};
-exports.default = TabItem;