@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/Logo/Logo.js

@@ -1,166 +1,69 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys, key, i;
-    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
-        sourceKeys = Reflect.ownKeys(Object(source));
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-        return target;
-    }
-    target = _object_without_properties_loose(source, excluded);
-    if (Object.getOwnPropertySymbols) {
-        sourceKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-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: ",
-        ";\n  height: ",
-        ";\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import logo_black_default from "./assets/mailship/logo_black.js";
+import logo_m_default from "./assets/mailship/logo_m.js";
+import logo_white_default from "./assets/mailship/logo_white.js";
+import mailship_logo_default from "./assets/mailship/mailship-logo.js";
+import mailstep_black_default from "./assets/mailstep/mailstep_black.js";
+import mailstep_white_default from "./assets/mailstep/mailstep_white.js";
+import mailstock_default from "./assets/mailstock/mailstock.js";
+import mailwiseLogo_default from "./assets/mailwise/mailwiseLogo.js";
+import mailwiseLogoSmall_default from "./assets/mailwise/mailwiseLogoSmall.js";
+import mailwrapLogo_default from "./assets/mailwrap/mailwrapLogo.js";
+import mailwrapLogoSmall_default from "./assets/mailwrap/mailwrapLogoSmall.js";
+import manager2_default from "./assets/warehouse/manager2.js";
+import manager3_default from "./assets/warehouse/manager3.js";
+import manager_default from "./assets/warehouse/manager.js";
+import "react";
+import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
-import logoBlackImage from "./assets/mailship/logo_black.png";
-import logoMImage from "./assets/mailship/logo_m.png";
-import logoWhiteImage from "./assets/mailship/logo_white.png";
-import logoSvg from "./assets/mailship/mailship-logo.svg";
-import logoMailstepBlack from "./assets/mailstep/mailstep_black.svg";
-import logoMailstepWhite from "./assets/mailstep/mailstep_white.svg";
-import logoMailstock from "./assets/mailstock/mailstock.svg";
-import logoMailwise from "./assets/mailwise/mailwiseLogo.svg";
-import logoMailwiseSmall from "./assets/mailwise/mailwiseLogoSmall.svg";
-import logoMailwrap from "./assets/mailwrap/mailwrapLogo.svg";
-import logoMailwrapSmall from "./assets/mailwrap/mailwrapLogoSmall.svg";
-import warehouseManager2 from "./assets/warehouse/manager2.svg";
-import warehouseManager3 from "./assets/warehouse/manager3.svg";
-import warehouseManager from "./assets/warehouse/manager.svg";
-import styled from "@xstyled/styled-components";
-var defaultSizes = {
-    small: "30px",
-    // cca 100px width on full logo
-    medium: "46px",
-    // cca 150px width on full logo
-    big: "61px"
+//#region packages/ui/Elements/Logo/Logo.tsx
+const defaultSizes = {
+	small: "30px",
+	medium: "46px",
+	big: "61px"
 };
-var variantMap = {
-    mailship: {
-        white: logoWhiteImage,
-        black: logoBlackImage,
-        m: logoMImage,
-        s: logoSvg
-    },
-    mailwise: {
-        black: logoMailwise,
-        s: logoMailwiseSmall
-    },
-    mailstock: {
-        black: logoMailstock
-    },
-    mailstep: {
-        black: logoMailstepBlack,
-        white: logoMailstepWhite
-    },
-    mailwrap: {
-        black: logoMailwrap,
-        s: logoMailwrapSmall
-    },
-    warehouse: {
-        black: warehouseManager,
-        m: warehouseManager2,
-        s: warehouseManager3
-    }
+const variantMap = {
+	mailship: {
+		white: logo_white_default,
+		black: logo_black_default,
+		m: logo_m_default,
+		s: mailship_logo_default
+	},
+	mailwise: {
+		black: mailwiseLogo_default,
+		s: mailwiseLogoSmall_default
+	},
+	mailstock: { black: mailstock_default },
+	mailstep: {
+		black: mailstep_black_default,
+		white: mailstep_white_default
+	},
+	mailwrap: {
+		black: mailwrapLogo_default,
+		s: mailwrapLogoSmall_default
+	},
+	warehouse: {
+		black: manager_default,
+		m: manager2_default,
+		s: manager3_default
+	}
 };
-var StyledImage = styled.img(_templateObject(), function(param) {
-    var width = param.width;
-    return width || "auto";
-}, function(param) {
-    var height = param.height, width = param.width, size = param.size;
-    return height || (width ? "auto" : size ? defaultSizes[size] : defaultSizes.medium);
-});
-var Logo = function Logo(_0) {
-    var _0_brand = _0.brand, brand = _0_brand === void 0 ? "mailship" : _0_brand, variant = _0.variant, size = _0.size, width = _0.width, height = _0.height, rest = _object_without_properties(_0, [
-        "brand",
-        "variant",
-        "size",
-        "width",
-        "height"
-    ]);
-    var variants = variantMap[brand];
-    var logo = variants === null || variants === void 0 ? void 0 : variants[variant];
-    if (!logo) {
-        console.warn("No variant for this logo exists.");
-        return null;
-    }
-    return /* @__PURE__ */ jsx(StyledImage, _object_spread({
-        src: logo,
-        size: size,
-        width: width,
-        height: height
-    }, rest));
+const StyledImage = styled$1.img`
+  width: ${({ width }) => width || "auto"};
+  height: ${({ height, width, size }) => height || (width ? "auto" : size ? defaultSizes[size] : defaultSizes.medium)};
+`;
+const Logo = ({ brand = "mailship", variant, size, width, height, ...rest }) => {
+	const logo = variantMap[brand]?.[variant];
+	if (!logo) {
+		console.warn("No variant for this logo exists.");
+		return null;
+	}
+	return /* @__PURE__ */ jsx(StyledImage, {
+		src: logo,
+		size,
+		width,
+		height,
+		...rest
+	});
 };
-var Logo_default = Logo;
-export { Logo_default as default };
+//#endregion
+export { Logo as default };

package/ui/Elements/Logo/assets/mailship/logo_black.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailship/logo_black.png
+var logo_black_default = "./logo_black.png";
+//#endregion
+export { logo_black_default as default };

package/ui/Elements/Logo/assets/mailship/logo_m.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailship/logo_m.png
+var logo_m_default = "./logo_m.png";
+//#endregion
+export { logo_m_default as default };

package/ui/Elements/Logo/assets/mailship/logo_white.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailship/logo_white.png
+var logo_white_default = "./logo_white.png";
+//#endregion
+export { logo_white_default as default };

package/ui/Elements/Logo/assets/mailship/mailship-logo.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailship/mailship-logo.svg
+var mailship_logo_default = "./mailship-logo.svg";
+//#endregion
+export { mailship_logo_default as default };

package/ui/Elements/Logo/assets/mailstep/mailstep_black.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailstep/mailstep_black.svg
+var mailstep_black_default = "./mailstep_black.svg";
+//#endregion
+export { mailstep_black_default as default };

package/ui/Elements/Logo/assets/mailstep/mailstep_white.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailstep/mailstep_white.svg
+var mailstep_white_default = "./mailstep_white.svg";
+//#endregion
+export { mailstep_white_default as default };

package/ui/Elements/Logo/assets/mailstock/mailstock.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailstock/mailstock.svg
+var mailstock_default = "./mailstock.svg";
+//#endregion
+export { mailstock_default as default };

package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg
+var mailwiseLogo_default = "./mailwiseLogo.svg";
+//#endregion
+export { mailwiseLogo_default as default };

package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg
+var mailwiseLogoSmall_default = "./mailwiseLogoSmall.svg";
+//#endregion
+export { mailwiseLogoSmall_default as default };

package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg
+var mailwrapLogo_default = "./mailwrapLogo.svg";
+//#endregion
+export { mailwrapLogo_default as default };

package/ui/Elements/Logo/assets/mailwrap/mailwrapLogoSmall.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/mailwrap/mailwrapLogoSmall.svg
+var mailwrapLogoSmall_default = "./mailwrapLogoSmall.svg";
+//#endregion
+export { mailwrapLogoSmall_default as default };

package/ui/Elements/Logo/assets/warehouse/manager.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/warehouse/manager.svg
+var manager_default = "./manager.svg";
+//#endregion
+export { manager_default as default };

package/ui/Elements/Logo/assets/warehouse/manager2.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/warehouse/manager2.svg
+var manager2_default = "./manager2.svg";
+//#endregion
+export { manager2_default as default };

package/ui/Elements/Logo/assets/warehouse/manager3.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Elements/Logo/assets/warehouse/manager3.svg
+var manager3_default = "./manager3.svg";
+//#endregion
+export { manager3_default as default };

package/ui/Elements/Logo/index.js

@@ -1,3 +1,5 @@
-import Logo from "./Logo";
+import Logo from "./Logo.js";
+//#region packages/ui/Elements/Logo/index.ts
 var Logo_default = Logo;
+//#endregion
 export { Logo, Logo_default as default };

package/ui/Elements/Logo/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Elements/Pagination/Pagination.js

@@ -1,87 +1,63 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Btn, DotsWrapper, GoIcon, PageBtn, Wrapper } from "./styled.js";
 import { useCallback, useMemo } from "react";
-import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from "./styled";
-var Pagination = function Pagination(param) {
-    var onPageChange = param.onPageChange, _param_itemPerPage = param.itemPerPage, itemPerPage = _param_itemPerPage === void 0 ? 3 : _param_itemPerPage, _param_itemCount = param.itemCount, itemCount = _param_itemCount === void 0 ? 0 : _param_itemCount, page = param.page, _param_radius = param.radius, radius = _param_radius === void 0 ? 5 : _param_radius, _param_rate = param.rate, rate = _param_rate === void 0 ? 4 : _param_rate, customPaginationHandler = param.customPaginationHandler;
-    var setPage = useCallback(function(number) {
-        return function() {
-            if (customPaginationHandler) {
-                customPaginationHandler(number, itemPerPage);
-                return;
-            }
-            if (onPageChange) {
-                onPageChange(number, itemPerPage);
-            }
-        };
-    }, [
-        itemPerPage,
-        onPageChange,
-        customPaginationHandler
-    ]);
-    var pageX = page !== null && page !== void 0 ? page : 1;
-    var pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
-    var arrayOfPages = useMemo(function() {
-        var pageNumbers = Array.from({
-            length: pageCount
-        }, function(_, i) {
-            return i + 1;
-        });
-        if (pageCount < radius + 1) {
-            return pageNumbers.slice(1, pageCount - 1);
-        } else if (pageX < radius) {
-            return pageNumbers.slice(1, Math.min(pageX + rate, radius));
-        } else if (pageX > pageCount - Math.floor(radius / 2)) {
-            return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
-        } else {
-            return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
-        }
-    }, [
-        pageCount,
-        pageX
-    ]);
-    return /* @__PURE__ */ jsxs(Wrapper, {
-        children: [
-            /* @__PURE__ */ jsx(Btn, {
-                disabled: pageX <= 1,
-                onClick: setPage(pageX - 1),
-                children: /* @__PURE__ */ jsx(GoIcon, {
-                    icon: "goLeft",
-                    isActive: pageX > 1
-                })
-            }),
-            /* @__PURE__ */ jsx(PageBtn, {
-                isCurrent: pageX === 1,
-                onClick: setPage(1),
-                children: 1
-            }),
-            arrayOfPages[0] > 2 && /* @__PURE__ */ jsx(DotsWrapper, {
-                children: "..."
-            }),
-            arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function(number) {
-                return /* @__PURE__ */ jsx(PageBtn, {
-                    isCurrent: pageX === number,
-                    onClick: setPage(number !== null && number !== void 0 ? number : 1),
-                    children: number
-                }, number);
-            }),
-            arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && /* @__PURE__ */ jsx(DotsWrapper, {
-                children: "..."
-            }),
-            pageCount !== 1 && /* @__PURE__ */ jsx(PageBtn, {
-                isCurrent: pageX === pageCount,
-                onClick: setPage(pageCount),
-                children: pageCount
-            }),
-            /* @__PURE__ */ jsx(Btn, {
-                disabled: pageX >= pageCount,
-                onClick: setPage(pageX + 1),
-                children: /* @__PURE__ */ jsx(GoIcon, {
-                    icon: "goRight",
-                    isActive: pageX < pageCount
-                })
-            })
-        ]
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Pagination/Pagination.tsx
+const Pagination = ({ onPageChange, itemPerPage = 3, itemCount = 0, page, radius = 5, rate = 4, customPaginationHandler }) => {
+	const setPage = useCallback((number) => () => {
+		if (customPaginationHandler) {
+			customPaginationHandler(number, itemPerPage);
+			return;
+		}
+		if (onPageChange) onPageChange(number, itemPerPage);
+	}, [
+		itemPerPage,
+		onPageChange,
+		customPaginationHandler
+	]);
+	const pageX = page ?? 1;
+	const pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
+	const arrayOfPages = useMemo(() => {
+		const pageNumbers = Array.from({ length: pageCount }, (_, i) => i + 1);
+		if (pageCount < radius + 1) return pageNumbers.slice(1, pageCount - 1);
+		else if (pageX < radius) return pageNumbers.slice(1, Math.min(pageX + rate, radius));
+		else if (pageX > pageCount - Math.floor(radius / 2)) return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
+		else return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
+	}, [pageCount, pageX]);
+	return /* @__PURE__ */ jsxs(Wrapper, { children: [
+		/* @__PURE__ */ jsx(Btn, {
+			disabled: pageX <= 1,
+			onClick: setPage(pageX - 1),
+			children: /* @__PURE__ */ jsx(GoIcon, {
+				icon: "goLeft",
+				isActive: pageX > 1
+			})
+		}),
+		/* @__PURE__ */ jsx(PageBtn, {
+			isCurrent: pageX === 1,
+			onClick: setPage(1),
+			children: 1
+		}),
+		arrayOfPages[0] > 2 && /* @__PURE__ */ jsx(DotsWrapper, { children: "..." }),
+		arrayOfPages?.map((number) => /* @__PURE__ */ jsx(PageBtn, {
+			isCurrent: pageX === number,
+			onClick: setPage(number ?? 1),
+			children: number
+		}, number)),
+		arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && /* @__PURE__ */ jsx(DotsWrapper, { children: "..." }),
+		pageCount !== 1 && /* @__PURE__ */ jsx(PageBtn, {
+			isCurrent: pageX === pageCount,
+			onClick: setPage(pageCount),
+			children: pageCount
+		}),
+		/* @__PURE__ */ jsx(Btn, {
+			disabled: pageX >= pageCount,
+			onClick: setPage(pageX + 1),
+			children: /* @__PURE__ */ jsx(GoIcon, {
+				icon: "goRight",
+				isActive: pageX < pageCount
+			})
+		})
+	] });
 };
-var Pagination_default = Pagination;
-export { Pagination_default as default };
+//#endregion
+export { Pagination as default };

package/ui/Elements/Pagination/index.js

@@ -1,3 +1,5 @@
-import Pagination from "./Pagination";
+import Pagination from "./Pagination.js";
+//#region packages/ui/Elements/Pagination/index.ts
 var Pagination_default = Pagination;
+//#endregion
 export { Pagination, Pagination_default as default };

package/ui/Elements/Pagination/styled.js

@@ -1,91 +1,64 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
+import Icon_default from "../Icon/index.js";
+import styled$1, { x } from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+//#region packages/ui/Elements/Pagination/styled.tsx
+const Wrapper = styled$1(x.div)`
+  display: inline-flex;
+  align-items: center;
+
+  & > *:not(:last-child) {
+    margin-right: 1px;
+    @media (min-width: 1024px) {
+      margin-right: 4px;
     }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  background-color: transparent;\n  border: none;\n  cursor: ",
-        ";\n  opacity: ",
-        ";\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  color: gray1;\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ",
-        ";\n  font-size: 14px;\n  font-weight: ",
-        ";\n  font-family: ",
-        ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { x } from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-import Icon from "../Icon";
-var Wrapper = styled(x.div)(_templateObject());
-var Btn = styled.button(_templateObject1(), function(param) {
-    var disabled = param.disabled;
-    return disabled ? "default" : "pointer";
-}, function(param) {
-    var disabled = param.disabled;
-    return disabled ? 0 : 1;
-});
-var ArrowIcon = styled(Icon)(_templateObject2());
-var GoIcon = styled(ArrowIcon)(_templateObject3());
-var DotsWrapper = styled.div(_templateObject4());
-var PageBtn = styled.span(_templateObject5(), function(param) {
-    var isCurrent = param.isCurrent;
-    return isCurrent ? th.color("red1") : th.color("gray1");
-}, function(param) {
-    var isCurrent = param.isCurrent;
-    return isCurrent ? th.fontWeight("semiBold") : th.fontWeight("normal");
-}, th("fonts.primary"));
+  }
+`;
+const Btn = styled$1.button`
+  background-color: transparent;
+  border: none;
+  cursor: ${({ disabled }) => disabled ? "default" : "pointer"};
+  opacity: ${({ disabled }) => disabled ? 0 : 1};
+`;
+const ArrowIcon = styled$1(Icon_default)`
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  color: blue2;
+
+  &:hover {
+    color: blue2;
+  }
+`;
+const GoIcon = styled$1(ArrowIcon)`
+  margin: 0 8px;
+  font-size: 12px;
+  & > svg {
+    width: 10px;
+  }
+`;
+const DotsWrapper = styled$1.div`
+  color: gray1;
+`;
+const PageBtn = styled$1.span`
+  height: 18px;
+  min-width: 18px;
+  display: flex;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0 4px;
+  color: ${({ isCurrent }) => isCurrent ? th$1.color("red1") : th$1.color("gray1")};
+  font-size: 14px;
+  font-weight: ${({ isCurrent }) => isCurrent ? th$1.fontWeight("semiBold") : th$1.fontWeight("normal")};
+  font-family: ${th$1("fonts.primary")};
+  line-height: 1em;
+
+  &:hover {
+    color: blue2;
+  }
+`;
+//#endregion
 export { ArrowIcon, Btn, DotsWrapper, GoIcon, PageBtn, Wrapper };