@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Blocks/Stepper/components/StepItem/styles.js

@@ -0,0 +1,88 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  width: 100%;\n  padding: 8px;\n\n  h6 {\n    font-size: 10px;\n  }\n\n  p {\n    font-size: 12px;\n  }\n\n  ",
+        " {\n    display: flex;\n  }\n\n  @media (min-width: ",
+        "px) {\n    width: 150px;\n    padding: 16px;\n\n    ",
+        " {\n      display: none;\n    }\n  }\n\n  @media (min-width: ",
+        "px) {\n    width: 200px;\n    padding: 24px;\n\n    ",
+        " {\n      display: flex;\n    }\n  }\n\n  @media (min-width: ",
+        "px) {\n    width: 240px;\n\n    p {\n      font-size: 16px;\n    }\n    h6 {\n      font-size: 12px;\n    }\n\n    ",
+        " {\n      display: flex;\n    }\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ",
+        ";\n  cursor: ",
+        ";\n  display: ",
+        ";\n  ",
+        "\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ",
+        ";\n  margin-bottom: 16px;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  column-gap: 16px;\n  align-items: flex-start;\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { StepCircleContainer } from "../StepCircle/styles";
+import styled, { css, th } from "@xstyled/styled-components";
+var responsiveCss = css(_templateObject(), StepCircleContainer, function(param) {
+    var total = param.total;
+    return total * 150;
+}, StepCircleContainer, function(param) {
+    var total = param.total;
+    return total * 200;
+}, StepCircleContainer, function(param) {
+    var total = param.total;
+    return total * 240;
+}, StepCircleContainer);
+var StepItemContainer = styled.div(_templateObject1(), function(param) {
+    var isActiveStep = param.isActiveStep;
+    return isActiveStep ? th.color("bgLightGray1") : "transparent";
+}, function(param) {
+    var isDisabled = param.isDisabled, onClick = param.onClick;
+    return isDisabled ? "not-allowed" : onClick ? "pointer" : "auto";
+}, function(param) {
+    var isVisible = param.isVisible;
+    return isVisible ? "block" : "none";
+}, responsiveCss);
+var Line = styled.div(_templateObject2(), function(param) {
+    var isActiveStep = param.isActiveStep, isCompletedStep = param.isCompletedStep;
+    if (isActiveStep) return th.color("red1");
+    if (isCompletedStep) return th.color("red20");
+    return th.color("lightGray7");
+});
+var ContentWrapper = styled.div(_templateObject3());
+export { ContentWrapper, Line, StepItemContainer };

package/ui/Blocks/Stepper/hooks/useStepper.js

@@ -0,0 +1,81 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useCallback, useState } from "react";
+var useStepper = function useStepper(param) {
+    var totalSteps = param.totalSteps;
+    var _useState = _sliced_to_array(useState(0), 2), activeStep = _useState[0], setActiveStep = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), isSuccess = _useState1[0], setSuccess = _useState1[1];
+    var handleReset = useCallback(function() {
+        setActiveStep(0);
+        setSuccess(false);
+    }, []);
+    var handleGoToNextStep = useCallback(function() {
+        if (activeStep + 1 === totalSteps) {
+            handleReset();
+            setSuccess(true);
+            return;
+        }
+        setActiveStep(activeStep + 1);
+    }, [
+        activeStep,
+        totalSteps,
+        handleReset
+    ]);
+    var handleChangeStep = useCallback(function(step) {
+        return function() {
+            setActiveStep(step);
+        };
+    }, []);
+    return {
+        activeStep: activeStep,
+        handleChangeStep: handleChangeStep,
+        handleGoToNextStep: handleGoToNextStep,
+        isSuccess: isSuccess,
+        handleReset: handleReset
+    };
+};
+export { useStepper };

package/ui/Blocks/Stepper/index.js

@@ -0,0 +1,4 @@
+import { Stepper } from "./Stepper";
+import { useStepper } from "./hooks/useStepper";
+import { StepCircle } from "./components/StepCircle";
+export { StepCircle, Stepper as default, useStepper };

package/ui/Blocks/Stepper/stories/Stepper.stories.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 declare const meta: {
     title: string;
     tags: string[];

package/ui/Blocks/Stepper/styles.d.ts

@@ -1,5 +1,5 @@
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ItemsWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ItemsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     total: number;
     hasComponent: boolean;
 }, never>;

package/ui/Blocks/Stepper/styles.js

@@ -0,0 +1,40 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  flex-direction: column;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  margin-bottom: ",
+        ";\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ",
+        "px) {\n    flex-direction: row;\n    width: auto;\n    max-width: 100%;\n  }\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled from "@xstyled/styled-components";
+var Container = styled.div(_templateObject());
+var ItemsWrapper = styled.div(_templateObject1(), function(param) {
+    var hasComponent = param.hasComponent;
+    return hasComponent ? "36px" : "0";
+}, function(param) {
+    var total = param.total;
+    return total * 150;
+});
+export { Container, ItemsWrapper };

package/ui/Blocks/Stepper/types.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import type { FC } from 'react';
 export type StepperProps = {
     items: StepperItem[];
     activeStep: number;

package/ui/Blocks/Table/Table.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { ColumnDefinitions, DataRow } from './types';
-
 type Props = {
     columnDefinitions: ColumnDefinitions;
     data?: DataRow[] | null;

package/ui/Blocks/Table/Table.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Table as TableComponent, Thead, Tr, Td, Th, Tbody } from "../../Elements/Table";
+var Table = function Table(param) {
+    var columnDefinitions = param.columnDefinitions, data = param.data, onRowClick = param.onRowClick;
+    return /* @__PURE__ */ jsxs(TableComponent, {
+        children: [
+            /* @__PURE__ */ jsx(Thead, {
+                children: /* @__PURE__ */ jsx(Tr, {
+                    children: columnDefinitions.map(function(column) {
+                        return /* @__PURE__ */ jsx(Th, {
+                            children: column.title
+                        });
+                    })
+                })
+            }),
+            /* @__PURE__ */ jsx(Tbody, {
+                children: data === null || data === void 0 ? void 0 : data.map(function(item) {
+                    return /* @__PURE__ */ jsx(Tr, {
+                        onClick: function onClick() {
+                            return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item);
+                        },
+                        cursor: onRowClick ? "pointer" : "auto",
+                        children: columnDefinitions.map(function(column) {
+                            return /* @__PURE__ */ jsx(Td, {
+                                children: item[column.name]
+                            }, column.name);
+                        })
+                    }, item.id);
+                })
+            })
+        ]
+    });
+};
+export { Table };

package/ui/Blocks/Table/index.js

@@ -0,0 +1,2 @@
+import { Table } from "./Table";
+export { Table };

package/ui/Blocks/Table/stories/Table.stories.d.ts

@@ -1,9 +1,9 @@
 declare const meta: {
     title: string;
-    component: import('react').FC<{
-        columnDefinitions: import('../types').ColumnDefinitions;
-        data?: import('../types').DataRow[] | null;
-        onRowClick?: (dataRow: import('../types').DataRow) => void;
+    component: import("react").FC<{
+        columnDefinitions: import("../types").ColumnDefinitions;
+        data?: import("../types").DataRow[] | null;
+        onRowClick?: (dataRow: import("../types").DataRow) => void;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Blocks/Tabs/TabContent.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { TabContentProps } from './types';
-
+import { type FC } from 'react';
+import type { TabContentProps } from './types';
 export declare const TabContent: FC<TabContentProps>;

package/ui/Blocks/Tabs/TabContent.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Activity } from "react";
+var TabContent = function TabContent(param) {
+    var activeTab = param.activeTab, value = param.value, children = param.children;
+    return /* @__PURE__ */ jsx(Activity, {
+        mode: activeTab === value ? "visible" : "hidden",
+        children: children
+    });
+};
+export { TabContent };

package/ui/Blocks/Tabs/Tabs.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
-import { TabsProps } from './types';
-
+import React from 'react';
+import type { TabsProps } from './types';
 export declare const Tabs: React.FC<TabsProps>;

package/ui/Blocks/Tabs/Tabs.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Icon } from "../../Elements/Icon";
+import { Text } from "../../Elements/Text";
+import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from "./styles";
+var Tab = function Tab(param) {
+    var tabDefinition = param.tabDefinition, value = param.value, isActive = param.isActive, onTabSwitch = param.onTabSwitch, minWidth = param.minWidth;
+    var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount, disabled = tabDefinition.disabled;
+    var handleOnClick = useCallback(function() {
+        onTabSwitch(value);
+    }, [
+        onTabSwitch,
+        value
+    ]);
+    return /* @__PURE__ */ jsx(StyledTabWrapper, {
+        children: /* @__PURE__ */ jsxs(StyledTab, {
+            onClick: !disabled ? handleOnClick : void 0,
+            active: isActive,
+            disabled: disabled,
+            minWidth: minWidth,
+            "data-testid": "tab-".concat(value),
+            children: [
+                icon && /* @__PURE__ */ jsx(StyledImageBox, {
+                    children: /* @__PURE__ */ jsx(Icon, {
+                        icon: icon
+                    })
+                }),
+                /* @__PURE__ */ jsx(Text, {
+                    children: label
+                }),
+                badgeCount === 0 || badgeCount && badgeCount > 0 && /* @__PURE__ */ jsx(RoundedWrap, {
+                    children: /* @__PURE__ */ jsx(Text, {
+                        variant: "medium",
+                        children: badgeCount
+                    })
+                })
+            ]
+        })
+    });
+};
+var Tabs = function Tabs(param) {
+    var tabsDefinition = param.tabsDefinition, activeTab = param.activeTab, onTabSwitch = param.onTabSwitch, mb = param.mb, mt = param.mt, minTabWidth = param.minTabWidth;
+    return /* @__PURE__ */ jsx(TabPanel, {
+        $mb: mb,
+        $mt: mt,
+        children: tabsDefinition.map(function(item, index) {
+            return /* @__PURE__ */ jsx(Tab, {
+                value: index,
+                tabDefinition: item,
+                isActive: index === activeTab,
+                minWidth: minTabWidth,
+                onTabSwitch: onTabSwitch
+            }, index);
+        })
+    });
+};
+export { Tabs };

package/ui/Blocks/Tabs/hooks/useTabs.d.ts

@@ -1,3 +1,2 @@
 import { UseTabsHook } from '../types';
-
 export declare const useTabs: UseTabsHook;

package/ui/Blocks/Tabs/hooks/useTabs.js

@@ -0,0 +1,62 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useCallback, useState } from "react";
+var useTabs = function useTabs(tabDefinitions) {
+    var index = tabDefinitions.map(function(item) {
+        return item.default;
+    }).indexOf(true);
+    var initialValue = index === -1 ? 0 : index;
+    var _useState = _sliced_to_array(useState(initialValue), 2), activeTab = _useState[0], setActiveTab = _useState[1];
+    var onTabSwitch = useCallback(function(value) {
+        setActiveTab(value);
+    }, []);
+    return {
+        activeTab: activeTab,
+        onTabSwitch: onTabSwitch
+    };
+};
+export { useTabs };

package/ui/Blocks/Tabs/index.d.js

@@ -0,0 +1,3 @@
+import { TabDefinition } from "./types";
+var index_d_default = Tabs;
+export { TabDefinition, index_d_default as default };

package/ui/Blocks/Tabs/index.d.ts

@@ -1,5 +1,4 @@
 import { Tabs } from './Tabs';
-
 export { TabContent } from './TabContent';
 export { useTabs } from './hooks/useTabs';
 export type { TabDefinition } from './types';

package/ui/Blocks/Tabs/index.js

@@ -0,0 +1,5 @@
+import { Tabs } from "./Tabs";
+import { TabContent } from "./TabContent";
+import { useTabs } from "./hooks/useTabs";
+var Tabs_default = Tabs;
+export { TabContent, Tabs_default as default, useTabs };

package/ui/Blocks/Tabs/stories/Tabs.stories.d.ts

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react-webpack5';
-
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').TabsProps>;
+    component: import("react").FC<import("../types").TabsProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Blocks/Tabs/styles.d.ts

@@ -1,12 +1,12 @@
-export declare const StyledImageBox: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
-export declare const StyledTabWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const RoundedWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Tab: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StyledImageBox: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const StyledTabWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const RoundedWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     active: boolean;
     disabled?: boolean;
     minWidth?: string | string[];
 }, never>;
-export declare const TabPanel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $mb?: string;
     $mt?: string;
 }, never>;

package/ui/Blocks/Tabs/styles.js

@@ -0,0 +1,110 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  margin-right: 1em;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ",
+        ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  color: ",
+        ";\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ",
+        ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ",
+        ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ",
+        ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ",
+        ";\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ",
+        ";\n  }\n\n  :active {\n    ",
+        ";\n  }\n\n  ",
+        ";\n\n  @media (min-width: 400px) {\n    min-width: ",
+        ";\n  }\n"
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ",
+        ";\n  margin-top: ",
+        ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ",
+        ";\n    height: 2px;\n  }\n"
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { css, th, x } from "@xstyled/styled-components";
+var StyledImageBox = styled(x.div)(_templateObject());
+var StyledTabWrapper = styled.div(_templateObject1());
+var RoundedWrap = styled.div(_templateObject2(), th.color("lightGray7"));
+var activeTab = css(_templateObject3(), th.color("red1"), th.color("red1"), th.color("typoPrimary"));
+var Tab = styled.div(_templateObject4(), function(param) {
+    var disabled = param.disabled;
+    return disabled ? "auto" : "pointer";
+}, th.color("gray"), function(param) {
+    var minWidth = param.minWidth;
+    return minWidth ? Array.isArray(minWidth) ? minWidth[0] : minWidth : "100px";
+}, function(param) {
+    var disabled = param.disabled;
+    return th.color(disabled ? "gray" : "typoPrimary");
+}, function(param) {
+    var disabled = param.disabled;
+    return !disabled && activeTab;
+}, function(param) {
+    var active = param.active;
+    return active ? activeTab : "";
+}, function(param) {
+    var minWidth = param.minWidth;
+    return minWidth ? Array.isArray(minWidth) ? minWidth[1] : minWidth : "120px";
+});
+var TabPanel = styled.div(_templateObject5(), function(param) {
+    var _param_$mb = param.$mb, $mb = _param_$mb === void 0 ? 0 : _param_$mb;
+    return $mb;
+}, function(param) {
+    var _param_$mt = param.$mt, $mt = _param_$mt === void 0 ? 0 : _param_$mt;
+    return $mt;
+}, th.color("bgLightGray1"));
+export { RoundedWrap, StyledImageBox, StyledTabWrapper, Tab, TabPanel };

package/ui/Blocks/Tabs/types.d.ts

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-
+import { type ReactNode } from 'react';
 export type TabDefinition = {
     label: string;
     icon?: string;

package/ui/Elements/Alert/Alert.d.ts

@@ -1,4 +1,3 @@
 import { IAlert } from './types';
-
 declare const Alert: IAlert;
 export default Alert;