@edu-tosel/design 1.0.304 → 1.0.305

package/asset/SVG.d.ts

@@ -54,8 +54,8 @@ declare const SVG: {
     Print: typeof Print;
     Profile: typeof Profile;
     Symbol: {
-        LessThan: ({ className, onClick }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
-        GreaterThan: ({ className, onClick }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
+        LessThan: ({ className, onClick, color }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
+        GreaterThan: ({ className, onClick, color }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
     };
     Login: {
         User: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;

package/asset/svg/Symbol.d.ts

@@ -2,11 +2,12 @@ import { OnClick } from "../../interface";
 export interface SymbolProps {
     className?: string;
     onClick?: OnClick;
+    color?: string;
 }
 declare const Symbol: {
     LessThan: typeof LessThan;
     GreaterThan: typeof GreaterThan;
 };
-declare function LessThan({ className, onClick }: SymbolProps): import("react/jsx-runtime").JSX.Element;
-declare function GreaterThan({ className, onClick }: SymbolProps): import("react/jsx-runtime").JSX.Element;
+declare function LessThan({ className, onClick, color }: SymbolProps): import("react/jsx-runtime").JSX.Element;
+declare function GreaterThan({ className, onClick, color }: SymbolProps): import("react/jsx-runtime").JSX.Element;
 export default Symbol;

package/asset/svg/Symbol.js

@@ -4,18 +4,18 @@ const Symbol = {
     LessThan,
     GreaterThan,
 };
-function LessThan({ className, onClick }) {
+function LessThan({ className, onClick, color }) {
     const container = {
         className,
         cursors: onClick ? "cursor-pointer" : "cursor-default",
     };
-    return (_jsx("svg", { className: cn(container), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", height: "11", width: "6", viewBox: "0 0 6 11", fill: "none", children: _jsx("path", { d: "M5.2475 10.7488C5.0575 10.7488 4.8675 10.6788 4.7175 10.5288L0.2175 6.02875C-0.0725 5.73875 -0.0725 5.25875 0.2175 4.96875L4.7175 0.468751C5.0075 0.178751 5.4875 0.178751 5.7775 0.468751C6.0675 0.758751 6.0675 1.23875 5.7775 1.52875L1.8075 5.49875L5.7775 9.46875C6.0675 9.75875 6.0675 10.2388 5.7775 10.5288C5.6275 10.6788 5.4375 10.7488 5.2475 10.7488Z", fill: "white" }) }));
+    return (_jsx("svg", { className: cn(container, color || "text-white"), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", height: "11", width: "6", viewBox: "0 0 6 11", fill: "none", children: _jsx("path", { d: "M5.2475 10.7488C5.0575 10.7488 4.8675 10.6788 4.7175 10.5288L0.2175 6.02875C-0.0725 5.73875 -0.0725 5.25875 0.2175 4.96875L4.7175 0.468751C5.0075 0.178751 5.4875 0.178751 5.7775 0.468751C6.0675 0.758751 6.0675 1.23875 5.7775 1.52875L1.8075 5.49875L5.7775 9.46875C6.0675 9.75875 6.0675 10.2388 5.7775 10.5288C5.6275 10.6788 5.4375 10.7488 5.2475 10.7488Z", fill: "currentColor" }) }));
 }
-function GreaterThan({ className, onClick }) {
+function GreaterThan({ className, onClick, color }) {
     const container = {
         className,
         cursors: onClick ? "cursor-pointer" : "cursor-default",
     };
-    return (_jsx("svg", { className: cn(container), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "6", height: "11", viewBox: "0 0 6 11", fill: "none", children: _jsx("path", { d: "M0.74249 0.251248C0.93249 0.251248 1.12249 0.321249 1.27249 0.471249L5.77249 4.97125C6.06249 5.26125 6.06249 5.74125 5.77249 6.03125L1.27249 10.5312C0.982491 10.8212 0.50249 10.8212 0.21249 10.5312C-0.0775099 10.2412 -0.0775099 9.76125 0.21249 9.47125L4.18249 5.50125L0.21249 1.53125C-0.0775099 1.24125 -0.0775099 0.761249 0.21249 0.471249C0.36249 0.321249 0.55249 0.251248 0.74249 0.251248Z", fill: "white" }) }));
+    return (_jsx("svg", { className: cn(container, color || "text-white"), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "6", height: "11", viewBox: "0 0 6 11", fill: "none", children: _jsx("path", { d: "M0.74249 0.251248C0.93249 0.251248 1.12249 0.321249 1.27249 0.471249L5.77249 4.97125C6.06249 5.26125 6.06249 5.74125 5.77249 6.03125L1.27249 10.5312C0.982491 10.8212 0.50249 10.8212 0.21249 10.5312C-0.0775099 10.2412 -0.0775099 9.76125 0.21249 9.47125L4.18249 5.50125L0.21249 1.53125C-0.0775099 1.24125 -0.0775099 0.761249 0.21249 0.471249C0.36249 0.321249 0.55249 0.251248 0.74249 0.251248Z", fill: "currentColor" }) }));
 }
 export default Symbol;

package/asset/svg/Symbol.tsx

@@ -4,6 +4,7 @@ import { cn } from "../../util";
 export interface SymbolProps {
   className?: string;
   onClick?: OnClick;
+  color?: string; // 테일윈드 텍스트 색상 클래스 (예: "text-red-500", "text-blue-400")
 }
 
 const Symbol = {
@@ -11,14 +12,14 @@ const Symbol = {
   GreaterThan,
 };
 
-function LessThan({ className, onClick }: SymbolProps) {
+function LessThan({ className, onClick, color }: SymbolProps) {
   const container = {
     className,
     cursors: onClick ? "cursor-pointer" : "cursor-default",
   };
   return (
     <svg
-      className={cn(container)}
+      className={cn(container, color || "text-white")}
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
       height="11"
@@ -28,20 +29,20 @@ function LessThan({ className, onClick }: SymbolProps) {
     >
       <path
         d="M5.2475 10.7488C5.0575 10.7488 4.8675 10.6788 4.7175 10.5288L0.2175 6.02875C-0.0725 5.73875 -0.0725 5.25875 0.2175 4.96875L4.7175 0.468751C5.0075 0.178751 5.4875 0.178751 5.7775 0.468751C6.0675 0.758751 6.0675 1.23875 5.7775 1.52875L1.8075 5.49875L5.7775 9.46875C6.0675 9.75875 6.0675 10.2388 5.7775 10.5288C5.6275 10.6788 5.4375 10.7488 5.2475 10.7488Z"
-        fill="white"
+        fill="currentColor"
       />
     </svg>
   );
 }
 
-function GreaterThan({ className, onClick }: SymbolProps) {
+function GreaterThan({ className, onClick, color }: SymbolProps) {
   const container = {
     className,
     cursors: onClick ? "cursor-pointer" : "cursor-default",
   };
   return (
     <svg
-      className={cn(container)}
+      className={cn(container, color || "text-white")}
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
       width="6"
@@ -51,7 +52,7 @@ function GreaterThan({ className, onClick }: SymbolProps) {
     >
       <path
         d="M0.74249 0.251248C0.93249 0.251248 1.12249 0.321249 1.27249 0.471249L5.77249 4.97125C6.06249 5.26125 6.06249 5.74125 5.77249 6.03125L1.27249 10.5312C0.982491 10.8212 0.50249 10.8212 0.21249 10.5312C-0.0775099 10.2412 -0.0775099 9.76125 0.21249 9.47125L4.18249 5.50125L0.21249 1.53125C-0.0775099 1.24125 -0.0775099 0.761249 0.21249 0.471249C0.36249 0.321249 0.55249 0.251248 0.74249 0.251248Z"
-        fill="white"
+        fill="currentColor"
       />
     </svg>
   );

package/layout/template/home/Announcement.js

@@ -1,9 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
-import { useRef } from "react";
+import { useRef, useState, useEffect } from "react";
 export default function Announcement({ banners }) {
     const scrollContainerRef = useRef(null);
     const cardWidth = 320; //card width
+    // 스크롤 위치 상태 관리
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(true);
+    // 스크롤 위치 확인 함수
+    const checkScrollPosition = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+            // 왼쪽 끝 확인 (약간의 여유값 포함)
+            setCanScrollLeft(scrollLeft > 5);
+            // 오른쪽 끝 확인 (약간의 여유값 포함)
+            setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 5);
+        }
+    };
+    // 초기 로드시와 banners 변경시 스크롤 위치 확인
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            checkScrollPosition();
+        }, 100); // DOM 렌더링 후 확인
+        return () => clearTimeout(timer);
+    }, [banners]);
+    // 스크롤 이벤트 리스너 등록
+    useEffect(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (scrollContainer) {
+            scrollContainer.addEventListener("scroll", checkScrollPosition);
+            return () => {
+                scrollContainer.removeEventListener("scroll", checkScrollPosition);
+            };
+        }
+    }, []);
     const handleScroll = (direction) => {
         if (scrollContainerRef.current) {
             const scrollAmount = cardWidth;
@@ -19,7 +49,7 @@ export default function Announcement({ banners }) {
     };
     const bgWrapper = {
         displays: "flex",
-        sizes: "h-fit w-full mt-10",
+        sizes: "h-fit w-full mt-10 pb-10",
         bacgrounds: "bg-gray-light/80",
     };
     const container = {
@@ -52,18 +82,23 @@ export default function Announcement({ banners }) {
         spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
     };
     const buttonPositioning = {
-        displays: "hidden flex-row md:flex",
+        displays: "flex flex-row",
         sizes: "w-full h-full",
-        spacings: "xl:pl-[calc(50vw-600px)] md:pl-[62px] pl-2 pr-2",
-        positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
+        spacings: "xl:pr-[calc(50vw-600px)] md:pr-[62px] pl-2 pr-4 gap-5",
+        positions: "justify-end items-center duration-300",
         hovering: "group pointer-events-none",
     };
     const hoverButton = {
-        sizes: "rounded-full w-12 h-12 scale-50 group-hover:scale-100",
-        animation: "duration-300 ",
-        test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500",
+        sizes: "rounded-full w-9 h-9",
+        animation: "duration-300",
+        test: "bg-gray-medium/50 hover:bg-gray-medium pointer-events-auto backdrop-blur-sm",
+    };
+    const disabledButton = {
+        sizes: "rounded-full w-9 h-9",
+        animation: "duration-300",
+        test: "bg-gray-medium/20 pointer-events-none backdrop-blur-sm opacity-30",
     };
-    return (_jsx("div", { className: cn(bgWrapper), children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uACF5\uC9C0\uC0AC\uD56D" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }) }));
+    return (_jsx("div", { className: cn(bgWrapper), children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uACF5\uC9C0\uC0AC\uD56D" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(canScrollLeft ? hoverButton : disabledButton), onClick: canScrollLeft ? () => handleScroll("left") : undefined, children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(canScrollRight ? hoverButton : disabledButton), onClick: canScrollRight ? () => handleScroll("right") : undefined, children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }) }));
 }
 function Banner({ onClick, titles }) {
     //ghost card snaps to the end of the viewport

package/layout/template/home/layout/Carousel.js

@@ -11,6 +11,7 @@ export default function Carousel({ contents, option, }) {
     const [index, setIndex] = useState(0);
     const [flag, inTime] = useEase(10000, 1000);
     const [loaded, setLoaded] = useState(false);
+    const [isPlaying, setIsPlaying] = useState(true);
     const isMD = useResponsive("md");
     const isXL = useResponsive("xl");
     const intervalRef = useRef(null);
@@ -24,20 +25,29 @@ export default function Carousel({ contents, option, }) {
             easing: easings.easeOutQuad,
         },
     });
+    // 인덱스 변경 시 애니메이션을 위해 loaded를 false로 설정
+    useEffect(() => {
+        setLoaded(false);
+        // 짧은 지연 후 애니메이션 시작 (이미지가 캐시된 경우를 위해)
+        const timer = setTimeout(() => {
+            setLoaded(true);
+        }, 50);
+        return () => clearTimeout(timer);
+    }, [index]);
     const resetTimer = useCallback(() => {
         // resetting the timer
         if (intervalRef.current) {
             clearInterval(intervalRef.current);
         }
-        intervalRef.current = setInterval(() => {
-            setIndex((prevIndex) => (prevIndex + 1) % contents.length);
-            setLoaded(false); // trigger animation
-        }, 3000);
-    }, [contents.length]);
-    useEffect(() => {
-        if (!option?.isStatic) {
-            resetTimer(); // timerstarts after mounting component
+        if (isPlaying && !option?.isStatic) {
+            intervalRef.current = setInterval(() => {
+                setIndex((prevIndex) => (prevIndex + 1) % contents.length);
+                setLoaded(false); // trigger animation
+            }, 3000);
         }
+    }, [contents.length, isPlaying, option?.isStatic]);
+    useEffect(() => {
+        resetTimer(); // timer starts/stops based on isPlaying state
         return () => {
             // clear timer after unmounting component
             if (intervalRef.current) {
@@ -55,6 +65,10 @@ export default function Carousel({ contents, option, }) {
         setIndex((prevIndex) => (prevIndex - 1 + contents.length) % contents.length);
         resetTimer();
     };
+    const handlePlayPause = (e) => {
+        e.stopPropagation();
+        setIsPlaying(!isPlaying);
+    };
     // Styles definition
     const container = {
         displays: "relative flex justify-center items-center",
@@ -66,7 +80,7 @@ export default function Carousel({ contents, option, }) {
     const titleWrapper = {
         displays: "static md:relative flex flex-col xxs:flex-row xxs:items-center md:items-start md:flex-col",
         sizes: "w-full h-fit xxs:h-full xxs:w-fit md:w-72",
-        spacings: "mt-4 px-5 xxs:mt-8 xxs:gap-8 md:p-0 md:mt-0 md:gap-6 md:pl-7.5 md:pt-20",
+        spacings: "mt-4 px-5 xxs:mt-8 xxs:gap-8 md:p-0 md:mt-0 md:gap-6 md:pl-7.5 md:pt-10 ml:pt-20",
         animations: "duration-500",
     };
     const titleSet = {
@@ -80,7 +94,7 @@ export default function Carousel({ contents, option, }) {
         textStyles: "text-sm md:text-base break-keep",
     };
     const body = {
-        displays: "flex flex-none flex-col items-center justify-center md:flex-row",
+        displays: "relative flex flex-none flex-col items-center justify-center md:flex-row",
         sizes: "w-full max-w-256 h-full",
         text: contents[index].option?.text ?? "text-gray-dark",
         animations: "duration-500",
@@ -100,12 +114,19 @@ export default function Carousel({ contents, option, }) {
     const buttonBox = {
         displays: "relative justify-center items-center gap-1 flex z-10",
         animations: "duration-500",
-        sizes: "w-34 h-10 md:h-6.25 md:w-26 bg-gray-dark rounded-full",
-        paddings: "px-1.5 mt-0 mb-5 md:mb-17 ",
+        sizes: "w-34 h-10 md:h-6.25 md:w-26  rounded-full",
+        paddings: "px-1.5 mt-0 mb-5 md:mb-10 ml:mb-17 ",
+        background: "bg-white shadow-main",
     };
     const handlePosition = {
         displays: "absolute flex justify-between items-center",
         sizes: "w-full h-full",
     };
-    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: cn(subtitleStyles), texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsxs("div", { className: cn(handlePosition), children: [_jsx("button", { onClick: handlePrev, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsx("button", { onClick: handleNext, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-white w-4 text-sm text-center", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-4 text-sm text-center", children: contents.length })] })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit image-container", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
+    const playbutton = {
+        displays: "absolute flex justify-center items-center",
+        positions: "bottom-10 right-10",
+        sizes: "w-10 h-10 rounded-full",
+        background: "bg-white text-gray-dark shadow-main",
+    };
+    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: cn(subtitleStyles), texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsxs("div", { className: cn(handlePosition), children: [_jsx("button", { onClick: handlePrev, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, { color: "text-gray-dark" }) }), _jsx("button", { onClick: handleNext, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, { color: "text-gray-dark" }) })] }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-gray-dark w-4 text-sm text-center", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-gray-dark w-4 text-sm text-center", children: contents.length })] })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit image-container", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) }), isMD && (_jsx("div", { className: cn(playbutton), onClick: handlePlayPause, children: isPlaying ? (_jsx("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", children: _jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M9.5.25A1.5 1.5 0 008 1.75v10.5a1.5 1.5 0 003 0V1.75A1.5 1.5 0 009.5.25zm-7 0A1.5 1.5 0 001 1.75v10.5a1.5 1.5 0 003 0V1.75A1.5 1.5 0 002.5.25z", clipRule: "evenodd" }) })) : (_jsx("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", children: _jsx("path", { fill: "currentColor", d: "M1.688 12.952a1 1 0 001.614.789l7.4-5.77a1 1 0 00.019-1.562L3.32.34a1 1 0 00-1.634.774v11.838z" }) })) }))] }) }));
 }

package/layout/template/home/layout/Header.js

@@ -86,7 +86,7 @@ export default function Header({ logo, rightButton, contents, }) {
                                         background: gradient.bg.greenToRed,
                                         text: "text-white",
                                     } })), _jsx("button", { onClick: toggleHeight, className: cn(menuButton), children: _jsx("div", { className: "w-6 h-6", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [!isExpanded && (_jsx("path", { id: "menu", fill: "#B0B8C1", d: "M4.118 6.2h16a1.2 1.2 0 100-2.4h-16a1.2 1.2 0 100 2.4m16 4.6h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4m0 7h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4", "fill-rule": "evenodd" })), isExpanded && (_jsx("path", { id: "close", fill: "#B0B8C1", "fill-rule": "evenodd", d: "M13.815 12l5.651-5.651a1.2 1.2 0 00-1.697-1.698l-5.651 5.652-5.652-5.652a1.201 1.201 0 00-1.697 1.698L10.421 12l-5.652 5.651a1.202 1.202 0 00.849 2.049c.307 0 .614-.117.848-.351l5.652-5.652 5.651 5.652a1.198 1.198 0 001.697 0 1.2 1.2 0 000-1.698L13.815 12z" }))] }) }) })] })] }), _jsxs("div", { className: cn(rightWrapper), children: [_jsx("div", { className: cn(buttonBoxWrapper), children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), _jsx("div", { className: "hidden md:block", children: rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
-                                    width: "2xs",
+                                    width: "xs",
                                     height: "xs",
                                     background: gradient.bg.greenToRed,
                                     text: "text-white",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.304",
+  "version": "1.0.305",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.304
+1.0.305