@kusitms/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1315 @@
+import { ToggleOpenSIcon, ArrowRightIcon, ArrowRightMIcon, RightSIcon, SnowGraphic, CancelMIcon, KeyboardArrowLeftIcon, KeyboardArrowRightIcon, KeyboardDoubleArrowLeftIcon, KeyboardDoubleArrowRightIcon, LinkIcon, GithubIcon, BehanceIcon } from '@kusitms/icons';
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import { useRef, useState, useEffect, useId, Children, isValidElement, cloneElement, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as RadixSelect from '@radix-ui/react-select';
+
+// src/components/Accordion/Accordion.tsx
+
+// src/utils/cn.ts
+function cn(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function AccordionRoot({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    RadixAccordion.Root,
+    {
+      className: cn("flex w-full flex-col gap-2 lg:gap-3", className),
+      ...props,
+      children
+    }
+  );
+}
+function AccordionItem({
+  value,
+  question,
+  answer,
+  className
+}) {
+  const itemRef = useRef(null);
+  const innerRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const item = itemRef.current;
+    if (!item) return;
+    const update = () => {
+      const open = item.getAttribute("data-state") === "open";
+      setIsOpen(open);
+      setHeight(open ? innerRef.current?.scrollHeight ?? 0 : 0);
+    };
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(item, {
+      attributes: true,
+      attributeFilter: ["data-state"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    RadixAccordion.Item,
+    {
+      ref: itemRef,
+      value,
+      className: cn(
+        "w-full bg-fill-netural",
+        "rounded-2xl px-5 py-4",
+        "lg:rounded-5 lg:px-10 lg:py-8",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(RadixAccordion.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+          RadixAccordion.Trigger,
+          {
+            className: cn(
+              "group flex w-full cursor-pointer items-center justify-between gap-2 text-left outline-none",
+              "focus-visible:rounded-md focus-visible:ring-2 focus-visible:ring-brand-primary/40"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-start gap-1 lg:items-center lg:gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-center text-body-18sb text-brand-primary lg:w-5.75 lg:pb-1 lg:text-headline-24sb", children: "Q." }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 pt-0.5 text-body-16m text-label-normal lg:pt-0 lg:text-headline-24sb", children: question })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ToggleOpenSIcon,
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "shrink-0 text-label-normal transition-transform duration-200",
+                    "size-5 lg:size-6",
+                    "group-data-[state=open]:-rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(RadixAccordion.Content, { forceMount: true, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              height,
+              overflow: "hidden",
+              opacity: isOpen ? 1 : 0,
+              transition: [
+                `height ${isOpen ? 300 : 500}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+                `opacity ${isOpen ? 200 : 400}ms`
+              ].join(", ")
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: innerRef,
+                className: "whitespace-pre-line pt-3 text-body-16r text-label-netural lg:text-headline-20r",
+                children: answer
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+var Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem
+});
+function getChipClasses(type) {
+  switch (type) {
+    case "brand":
+      return cn(
+        "inline-flex items-center justify-center rounded px-4 py-1",
+        "bg-fill-primary text-brand-primary text-label-14sb whitespace-nowrap lg:w-16 lg:h-8"
+      );
+    case "secondary":
+      return cn(
+        "inline-flex items-center justify-center rounded-md px-3 py-1",
+        "bg-fill-netural text-label-alternative",
+        "text-caption-12sb lg:text-label-14sb whitespace-nowrap"
+      );
+  }
+}
+function Label({
+  children,
+  className,
+  type = "brand",
+  description,
+  ...props
+}) {
+  if (type === "default") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn("inline-flex self-start items-center gap-2.5", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex h-7.5 w-20 items-center justify-center rounded-sm bg-fill-netural",
+                "text-label-normal text-label-14sb whitespace-nowrap"
+              ),
+              children
+            }
+          ),
+          description != null && description !== "" && /* @__PURE__ */ jsx("span", { className: "text-label-alternative text-label-14m whitespace-nowrap", children: description })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(getChipClasses(type), "self-start", className),
+      ...props,
+      children
+    }
+  );
+}
+function Blog({ imageUrl, title, content, labels }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row gap-3 lg:gap-7 pb-5 lg:pb-8 px-4 lg:pr-8 lg:pl-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "size-26 lg:w-60 lg:h-41 rounded-lg bg-fill-netural shrink-0 self-stretch overflow-hidden", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageUrl,
+        alt: title,
+        className: "block h-full w-full object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2 lg:gap-4 py-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 lg:gap-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-body-16b text-label-netural lg:text-headline-20b line-clamp-1", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "h-10 lg:h-13 text-label-14m text-label-alternative lg:text-body-16m line-clamp-2", children: content })
+      ] }),
+      labels.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap gap-1 lg:gap-2", children: labels.map((label) => /* @__PURE__ */ jsx(Label, { type: "secondary", children: label }, label)) })
+    ] })
+  ] });
+}
+function BottomGradient({
+  height = 54,
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `absolute bottom-0 left-1/2 -translate-x-1/2 w-full pointer-events-none ${className ?? ""}`,
+      style: { height: `${height}px`, ...style },
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-transparent to-white rounded-b-2xl" })
+    }
+  );
+}
+function Button({
+  children,
+  className,
+  disabled,
+  showIcon = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(
+        "group relative overflow-hidden inline-flex items-center justify-center rounded-full transition-colors",
+        "py-2 px-3 gap-1 lg:px-6 lg:gap-2",
+        disabled ? "text-label-14r lg:text-body-18m bg-fill-alternative text-label-light cursor-not-allowed" : "text-label-14m lg:text-body-18sb bg-brand-primary text-label-contrast cursor-pointer",
+        className
+      ),
+      ...props,
+      children: [
+        !disabled && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 bg-white/0 transition-colors group-hover:bg-white/25 group-active:bg-black/8" }),
+        /* @__PURE__ */ jsx("span", { className: showIcon ? "pl-2" : void 0, children }),
+        showIcon && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            ArrowRightIcon,
+            {
+              className: cn(
+                "size-5 shrink-0 lg:hidden",
+                disabled ? "text-label-light" : "text-label-contrast"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ArrowRightMIcon,
+            {
+              className: cn(
+                "size-6 shrink-0 hidden lg:block",
+                disabled ? "text-label-light" : "text-label-contrast"
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function NavigationButton({
+  children,
+  className,
+  icon,
+  showArrow = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "group relative inline-flex items-center overflow-hidden rounded-lg bg-fill-netural pl-3 pr-2 py-2 gap-2 text-label-netural transition-colors cursor-pointer",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 rounded-lg bg-transparent transition-colors group-hover:bg-interaction-hover-inverse" }),
+        icon ? /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex size-5 shrink-0 items-center justify-center overflow-hidden", children: icon }) : null,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative z-10 flex-1 text-left text-body-16m",
+              !showArrow && "pr-1"
+            ),
+            children
+          }
+        ),
+        showArrow ? /* @__PURE__ */ jsx(
+          RightSIcon,
+          {
+            "aria-hidden": "true",
+            className: "relative z-10 size-5 shrink-0 text-label-alternative"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function PageNavButton({
+  className,
+  color = "light",
+  direction = "next",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": direction === "next" ? "\uB2E4\uC74C \uD398\uC774\uC9C0\uB85C \uC774\uB3D9" : "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9",
+      className: cn(
+        "group relative inline-flex items-center justify-center overflow-hidden rounded-full transition-colors cursor-pointer",
+        "size-9 lg:size-13",
+        color === "light" ? "bg-fill-transparent-white text-static-white" : "bg-fill-transparent-black text-static-white",
+        direction === "prev" ? "rotate-180" : void 0,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 rounded-full bg-transparent transition-colors group-active:bg-interaction-pressed" }),
+        /* @__PURE__ */ jsx(RightSIcon, { className: "relative z-10 size-7 lg:size-10 translate-x-px" })
+      ]
+    }
+  );
+}
+function ScrollTopButton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "\uB9E8 \uC704\uB85C \uC774\uB3D9",
+      className: cn(
+        "group relative inline-flex items-center justify-center overflow-hidden rounded-full border transition-colors cursor-pointer",
+        "size-10 lg:size-12",
+        "border-line-neutral bg-fill-normal text-static-black active:bg-interaction-pressed",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowRightIcon, { "aria-hidden": true, className: "-rotate-90 size-5 lg:size-6" })
+    }
+  );
+}
+var variantStyles = {
+  default: {
+    container: "w-75 gap-5 px-4 pt-7 pb-9.5 pt-8.5 lg:pb-8.5 lg:pt-7.5",
+    content: ({ description }) => /* @__PURE__ */ jsx("p", { className: "text-label-14sb text-label-normal lg:text-body-16sb text-center whitespace-pre-line", children: description })
+  },
+  titled: {
+    container: "w-75 lg:w-55 gap-5 px-4 py-5 lg:pb-6.5",
+    content: ({ title, description }) => /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-5 text-center lg:gap-4.5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:gap-2.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-brand-primary text-body-16b lg:text-body-18b", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "w-3.5 h-[1.5px] bg-line-normal rounded-full mx-auto" }),
+      /* @__PURE__ */ jsx("p", { className: "text-label-normal text-label-14m whitespace-pre-line", children: description })
+    ] }) })
+  }
+};
+function RecruitmentCard({
+  type,
+  graphic: Graphic,
+  title,
+  description
+}) {
+  const { container, content } = variantStyles[type];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-col items-center rounded-2xl bg-fill-primary ${container}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-20 shrink-0 items-center justify-center rounded-full bg-fill-normal", children: /* @__PURE__ */ jsx(Graphic, {}) }),
+        content({ title, description })
+      ]
+    }
+  );
+}
+function ReviewCard({ name, part, body }) {
+  return /* @__PURE__ */ jsxs("div", { className: "w-72 lg:w-76 flex flex-col rounded-2xl bg-fill-primary p-5", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-body-16b text-label-normal pb-1 lg:text-body-18b", children: name }),
+    /* @__PURE__ */ jsx("p", { className: "text-label-14sb text-brand-primary pb-3", children: part }),
+    /* @__PURE__ */ jsx("p", { className: "text-label-14m text-label-netural", children: body })
+  ] });
+}
+function ShowcaseCard({
+  name,
+  description,
+  th,
+  isMeetup = false,
+  type,
+  imageUrl
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-85.75 lg:w-96 shrink-0 self-start flex-col rounded-2xl bg-fill-normal shadow-[0_1px_10px_0_rgba(179,179,188,0.25)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-47.5 lg:h-64 w-full shrink-0 overflow-hidden rounded-t-2xl bg-fill-alternative", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageUrl,
+        alt: name,
+        className: "block h-full w-full object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4 pt-4 pb-4.5 lg:px-5 lg:pb-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-label-14b text-brand-primary lg:text-body-18b", children: [
+          th,
+          "\uAE30"
+        ] }),
+        isMeetup && /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-1.25 text-label-assitive text-caption-12r", children: [
+          /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "lg:text-body-16m", children: type })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-label-netural text-body-16b mb-0.5 lg:text-headline-20b", children: name }),
+      /* @__PURE__ */ jsx("div", { className: "h-10 lg:h-13 overflow-hidden shrink-0", children: /* @__PURE__ */ jsx("p", { className: "text-label-14m text-label-alternative lg:text-body-18m line-clamp-2", children: description }) })
+    ] })
+  ] });
+}
+function Dropdown({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "\uC120\uD0DD",
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    RadixSelect.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsxs(
+          RadixSelect.Trigger,
+          {
+            className: cn(
+              "group flex cursor-pointer items-center gap-x-2 bg-fill-normal outline-none",
+              "border border-line-neutral",
+              "rounded-md py-1.5 pl-3 pr-2",
+              "lg:rounded-lg lg:py-2.5 lg:pl-5 lg:pr-4",
+              "text-label-14sb lg:text-body-18sb text-label-light",
+              "disabled:cursor-not-allowed disabled:opacity-40",
+              className
+            ),
+            "aria-label": placeholder,
+            children: [
+              /* @__PURE__ */ jsx(RadixSelect.Value, { placeholder }),
+              /* @__PURE__ */ jsx(RadixSelect.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+                ToggleOpenSIcon,
+                {
+                  className: cn(
+                    "shrink-0 text-label-light transition-transform duration-200",
+                    "size-4 lg:size-5",
+                    "group-data-[state=open]:-rotate-180"
+                  )
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsx(
+          RadixSelect.Content,
+          {
+            position: "popper",
+            sideOffset: 4,
+            className: cn(
+              "z-50 min-w-[var(--radix-select-trigger-width)]",
+              "bg-fill-normal rounded-lg p-1",
+              "shadow-[0px_1px_10px_rgba(179,179,188,0.25)]",
+              "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+              "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+              "data-[side=bottom]:slide-in-from-top-2"
+            ),
+            children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { children: options.map((option) => /* @__PURE__ */ jsx(
+              RadixSelect.Item,
+              {
+                value: option.value,
+                className: cn(
+                  "flex cursor-pointer items-center rounded-md outline-none select-none",
+                  "text-label-alternative text-label-14m lg:text-body-18m",
+                  "p-2 lg:px-3 lg:py-2",
+                  "data-[state=checked]:text-brand-primary data-[state=checked]:text-label-14sb lg:data-[state=checked]:text-body-18sb",
+                  "data-[highlighted]:bg-fill-netural data-[highlighted]:outline-none"
+                ),
+                children: /* @__PURE__ */ jsx(RadixSelect.ItemText, { children: option.label })
+              },
+              option.value
+            )) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function EmailInput({
+  value,
+  onChange,
+  onSubmit,
+  validate,
+  buttonLabel = "\uC54C\uB9BC \uBC1B\uAE30",
+  buttonProps,
+  disabled,
+  className,
+  placeholder = "\uC774\uBA54\uC77C\uC744 \uC785\uB825\uD558\uC138\uC694",
+  ...inputProps
+}) {
+  const canSubmit = !disabled && (validate ? validate(value) : value.length > 0);
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    onSubmit?.(value);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleSubmit();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center rounded-full bg-fill-netural",
+        "w-full gap-1 py-2 pl-5 pr-2.5 min-w-72",
+        "lg:w-163 lg:gap-2 lg:py-3 lg:pl-7 lg:pr-5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "email",
+            value,
+            onChange: (event) => onChange(event.target.value),
+            onKeyDown: handleKeyDown,
+            disabled,
+            placeholder,
+            className: cn(
+              "min-w-0 flex-1 bg-transparent outline-none",
+              "text-label-strong placeholder:text-label-alternative",
+              "disabled:cursor-not-allowed",
+              "text-body-16m lg:text-headline-20m"
+            ),
+            ...inputProps
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            showIcon: false,
+            disabled: !canSubmit,
+            onClick: handleSubmit,
+            className: "shrink-0",
+            ...buttonProps,
+            children: buttonLabel
+          }
+        )
+      ]
+    }
+  );
+}
+var defaultBylawsLink = (device, href, label = "\uD559\uD68C\uC815\uAD00") => {
+  const className = cn(
+    "font-sans not-italic text-label-normal",
+    device === "desktop" ? "text-body-16sb" : "text-caption-12r"
+  );
+  if (!href) {
+    return /* @__PURE__ */ jsx("span", { className, children: label });
+  }
+  return /* @__PURE__ */ jsx("a", { className: `${className} underline decoration-solid`, href, children: label });
+};
+function Footer({
+  logo,
+  mobileLogo,
+  links,
+  contactIcons,
+  copyright = "KUSITMS (\uD050\uC2DC\uC998, \uD55C\uAD6D\uB300\uD559\uC0DDIT\uACBD\uC601\uD559\uD68C)\n\xA9 2023.KUSITMS. ALL rights reserved.",
+  scrollTopButton,
+  bylawsHref,
+  bylawsLabel = "\uD559\uD68C\uC815\uAD00",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("footer", { className: cn("w-full", "bg-fill-normal", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden w-full flex-col items-center justify-center px-10 pb-15 lg:flex", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-end justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex w-68.5 flex-col items-start", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start pb-10 pt-15", children: logo }),
+        /* @__PURE__ */ jsx("div", { className: "flex w-full pb-3", children: links ?? defaultBylawsLink("desktop", bylawsHref, bylawsLabel) }),
+        /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap font-sans text-body-16sb text-label-normal", children: copyright })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-start gap-5", children: [
+        /* @__PURE__ */ jsx("p", { className: "w-full font-sans text-body-16sb text-label-normal", children: "Contact" }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-5", children: contactIcons })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col items-center justify-center px-4 pb-15 lg:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-start", children: [
+          /* @__PURE__ */ jsx("div", { className: "pb-4 pt-15", children: mobileLogo ?? logo }),
+          /* @__PURE__ */ jsx("div", { className: "pb-2", children: links ?? defaultBylawsLink("mobile", bylawsHref, bylawsLabel) }),
+          /* @__PURE__ */ jsx("p", { className: "w-full whitespace-pre-wrap font-sans text-caption-12r text-label-normal", children: copyright })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 pt-13", children: scrollTopButton })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-2 pt-7", children: [
+        /* @__PURE__ */ jsx("p", { className: "w-full font-sans text-body-16sb text-label-normal", children: "Contact" }),
+        /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap items-center gap-1.5", children: contactIcons })
+      ] })
+    ] }) })
+  ] });
+}
+function HeaderMobileBar({
+  logo,
+  menuIcon,
+  closeIcon,
+  isOpen,
+  onToggle,
+  menuId
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-17.25 w-full items-center justify-between bg-fill-normal px-4 py-5", children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0", children: logo }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex size-6 shrink-0 items-center justify-center transition-transform duration-200",
+          isOpen && "rotate-90"
+        ),
+        onClick: onToggle,
+        "aria-controls": menuId,
+        "aria-expanded": isOpen,
+        "aria-label": isOpen ? "Close navigation menu" : "Open navigation menu",
+        children: isOpen ? closeIcon : menuIcon
+      }
+    )
+  ] });
+}
+function HeaderMobileMenu({
+  children,
+  isOpen,
+  menuId
+}) {
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const updateHeight = useCallback(() => {
+    if (isOpen && contentRef.current) {
+      setHeight(contentRef.current.scrollHeight);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    updateHeight();
+  }, [updateHeight]);
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!isOpen || !content || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [isOpen, updateHeight]);
+  useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+    }
+  }, [isOpen]);
+  const handleTransitionEnd = (event) => {
+    if (event.target === event.currentTarget && !isOpen) {
+      setIsVisible(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: menuId,
+      className: "overflow-hidden transition-[max-height] duration-300 ease-in-out",
+      style: { maxHeight: isOpen ? height : 0 },
+      onTransitionEnd: handleTransitionEnd,
+      children: /* @__PURE__ */ jsx(
+        "nav",
+        {
+          ref: contentRef,
+          className: isVisible || isOpen ? "bg-fill-netural" : "hidden",
+          children
+        }
+      )
+    }
+  );
+}
+function HeaderMobileNavigationItem({
+  child
+}) {
+  const className = cn(
+    "flex w-full flex-col items-center gap-3 bg-fill-netural px-4 py-5"
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-center font-sans text-headline-20sb text-label-normal", children: child.props.children }),
+    /* @__PURE__ */ jsx("span", { className: "h-px w-full bg-line-alternative" })
+  ] });
+  if (child.props.href) {
+    return /* @__PURE__ */ jsx("a", { className, href: child.props.href, children: content });
+  }
+  return /* @__PURE__ */ jsx("button", { className, type: "button", onClick: child.props.onClick, children: content });
+}
+function HeaderMobileNavigation({ children }) {
+  return Children.map(children, (child) => {
+    if (!isValidElement(child)) {
+      return child;
+    }
+    return /* @__PURE__ */ jsx(HeaderMobileNavigationItem, { child });
+  });
+}
+function Header2({
+  logo,
+  children,
+  mobileLogo,
+  menuIcon,
+  closeIcon,
+  isOpen,
+  defaultOpen = false,
+  onOpenChange,
+  menuId,
+  className,
+  ...props
+}) {
+  const generatedMenuId = useId();
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const hasResponsiveHeader = Boolean(mobileLogo || menuIcon || closeIcon);
+  const isMenuOpen = isOpen ?? uncontrolledOpen;
+  const resolvedMenuId = menuId ?? generatedMenuId;
+  const handleToggle = () => {
+    const nextOpen = !isMenuOpen;
+    if (isOpen === void 0) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  };
+  if (hasResponsiveHeader) {
+    return /* @__PURE__ */ jsxs("header", { className: cn("w-full bg-fill-normal", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-between px-10 py-6 lg:flex", children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: logo }),
+        /* @__PURE__ */ jsx("nav", { className: "flex min-w-0 items-center justify-end gap-6 overflow-hidden", children })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "lg:hidden", children: [
+        /* @__PURE__ */ jsx(
+          HeaderMobileBar,
+          {
+            logo: mobileLogo ?? logo,
+            menuIcon,
+            closeIcon,
+            isOpen: isMenuOpen,
+            onToggle: handleToggle,
+            menuId: resolvedMenuId
+          }
+        ),
+        /* @__PURE__ */ jsx(HeaderMobileMenu, { menuId: resolvedMenuId, isOpen: isMenuOpen, children: /* @__PURE__ */ jsx(HeaderMobileNavigation, { children }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex items-center justify-between",
+        "w-full",
+        "bg-fill-normal px-10 py-6",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: logo }),
+        /* @__PURE__ */ jsx("nav", { className: "flex min-w-0 items-center justify-end gap-6 overflow-hidden", children })
+      ]
+    }
+  );
+}
+var stateStyles = {
+  default: "text-body-16m text-label-light hover:text-body-16b hover:text-label-normal active:text-body-16b active:text-brand-primary",
+  hovered: "text-body-16b text-label-normal",
+  pressed: "text-body-16b text-brand-primary"
+};
+function isLinkProps(props) {
+  return "href" in props && typeof props.href === "string";
+}
+function HeaderNavigation({
+  children,
+  className,
+  state = "default",
+  ...props
+}) {
+  const sharedClassName = cn(
+    "flex max-w-full items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap px-4",
+    "font-sans transition-colors",
+    stateStyles[state],
+    className
+  );
+  if (isLinkProps(props)) {
+    const linkProps = props;
+    return /* @__PURE__ */ jsx("a", { className: sharedClassName, ...linkProps, children });
+  }
+  const buttonProps = props;
+  return /* @__PURE__ */ jsx("button", { className: sharedClassName, ...buttonProps, type: "button", children });
+}
+function List({ title, items }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-5.5 h-6 lg:w-7.5 lg:h-8 shrink-0", children: /* @__PURE__ */ jsx(SnowGraphic, { className: "w-full h-full" }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-body-16b text-label-normal lg:text-headline-20b", children: title })
+    ] }),
+    /* @__PURE__ */ jsxs("ul", { className: "list-disc list-inside space-y-3 rounded-2xl bg-fill-netural px-4 py-6 lg:px-6 lg:py-7 w-236", children: [
+      /* @__PURE__ */ jsx("li", { className: "text-body-16m text-label-netural lg:text-body-18m truncate", children: items[0] }),
+      /* @__PURE__ */ jsx("li", { className: "text-body-16m text-label-netural lg:text-body-18m truncate", children: items[1] }),
+      /* @__PURE__ */ jsx("li", { className: "text-body-16m text-label-netural lg:text-body-18m truncate", children: items[2] })
+    ] })
+  ] });
+}
+var LINK_ICONS = {
+  behance: BehanceIcon,
+  github: GithubIcon,
+  service: LinkIcon
+};
+function ModalLinkIcon({ type }) {
+  const Icon2 = LINK_ICONS[type];
+  return /* @__PURE__ */ jsx(Icon2, { className: "size-5 shrink-0" });
+}
+function Modal({
+  isOpen,
+  onClose,
+  onPrev,
+  onNext,
+  name,
+  th,
+  type,
+  imageUrl,
+  description,
+  teamRoles = [],
+  links = []
+}) {
+  useEffect(() => {
+    if (!isOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const hasNav = !!(onPrev || onNext);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 overflow-y-auto",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": name,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fixed inset-0 bg-effect-dimmer",
+            onClick: onClose,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-start lg:items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            hasNav && /* @__PURE__ */ jsx("div", { className: "hidden lg:flex mr-5", children: /* @__PURE__ */ jsx(
+              PageNavButton,
+              {
+                direction: "prev",
+                color: "light",
+                onClick: onPrev,
+                className: !onPrev ? "invisible pointer-events-none" : ""
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex w-83.75 lg:w-156 max-h-144 lg:max-h-231.5 flex-col rounded-2xl bg-fill-normal overflow-hidden", children: [
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b-2 border-line-alternative p-4 lg:pl-7 lg:pr-8 lg:py-6", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "\uB2EB\uAE30",
+                  onClick: onClose,
+                  className: "flex items-center justify-center text-label-alternative cursor-pointer",
+                  children: /* @__PURE__ */ jsx(CancelMIcon, { "aria-hidden": true, className: "size-5 lg:size-8" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex-1 min-h-0 overflow-y-auto pt-3 pb-4 lg:pt-5 lg:pb-8",
+                    "[&::-webkit-scrollbar]:w-0.75",
+                    "[&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-track]:rounded-full",
+                    "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-label-normal/75 [&::-webkit-scrollbar-thumb]:h-16"
+                  ),
+                  children: /* @__PURE__ */ jsxs("div", { className: "px-5 lg:px-8", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-headline-20b lg:text-pc-30b text-label-normal", children: name }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 lg:gap-2", children: [
+                        /* @__PURE__ */ jsxs(Label, { type: "brand", children: [
+                          th,
+                          "\uAE30"
+                        ] }),
+                        /* @__PURE__ */ jsx(Label, { type: "brand", children: type })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "pt-4 lg:pt-5 pb-6 lg:pb-5", children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-xl border border-line-neutral bg-fill-alternative aspect-video", children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: imageUrl,
+                        alt: name,
+                        className: "block h-full w-full object-cover"
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 lg:gap-8", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 lg:gap-2", children: [
+                        /* @__PURE__ */ jsx("p", { className: "text-body-16b lg:text-body-18b text-label-netural", children: "\uD504\uB85C\uC81D\uD2B8 \uC124\uBA85" }),
+                        /* @__PURE__ */ jsx("p", { className: "text-label-light text-body-16r lg:text-body-16m lg:text-label-alternative", children: description })
+                      ] }),
+                      (teamRoles.length > 0 || links.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 lg:flex-row lg:gap-8", children: [
+                        teamRoles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 lg:gap-3 lg:flex-1", children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-body-16b lg:text-body-18b text-label-netural", children: "\uD504\uB85C\uC81D\uD2B8 \uD300\uC6D0" }),
+                          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: teamRoles.map(({ role, members }) => /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: "flex items-center gap-2.5",
+                              children: [
+                                /* @__PURE__ */ jsx(Label, { type: "default", children: role }),
+                                /* @__PURE__ */ jsx("span", { className: "text-label-14m text-label-alternative", children: members.join(", ") })
+                              ]
+                            },
+                            role
+                          )) })
+                        ] }),
+                        links.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 lg:flex-1", children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-body-16b lg:text-body-18b text-label-netural", children: "\uB9C1\uD06C" }),
+                          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 items-start", children: links.map(({ type: linkType, label, url }) => /* @__PURE__ */ jsx(
+                            NavigationButton,
+                            {
+                              icon: /* @__PURE__ */ jsx(ModalLinkIcon, { type: linkType }),
+                              onClick: () => window.open(url, "_blank", "noreferrer"),
+                              children: label
+                            },
+                            url
+                          )) })
+                        ] })
+                      ] })
+                    ] })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                BottomGradient,
+                {
+                  height: 48,
+                  className: "lg:left-5! lg:right-5! lg:w-auto! lg:translate-x-0!"
+                }
+              )
+            ] }),
+            hasNav && /* @__PURE__ */ jsx("div", { className: "hidden lg:flex ml-5", children: /* @__PURE__ */ jsx(
+              PageNavButton,
+              {
+                direction: "next",
+                color: "light",
+                onClick: onNext,
+                className: !onNext ? "invisible pointer-events-none" : ""
+              }
+            ) })
+          ] }),
+          hasNav && /* @__PURE__ */ jsxs("div", { className: "flex w-83.75 justify-between mt-4 lg:hidden", children: [
+            /* @__PURE__ */ jsx(
+              PageNavButton,
+              {
+                direction: "prev",
+                color: "light",
+                onClick: onPrev,
+                className: !onPrev ? "invisible pointer-events-none" : ""
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              PageNavButton,
+              {
+                direction: "next",
+                color: "light",
+                onClick: onNext,
+                className: !onNext ? "invisible pointer-events-none" : ""
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+var filterStyles = {
+  desktop: {
+    container: "justify-center gap-5",
+    item: "min-w-30 px-2.5 py-2.5",
+    activeItem: "bg-fill-primary",
+    text: "",
+    activeText: "text-headline-20b text-brand-primary",
+    inactiveText: "text-headline-20m text-label-netural"
+  },
+  mobile: {
+    container: "justify-start gap-1 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none]",
+    item: "py-1",
+    activeItem: "bg-fill-primary px-4",
+    inactiveItem: "px-3",
+    text: "",
+    activeText: "text-body-16sb text-brand-primary",
+    inactiveText: "text-body-16m text-label-netural"
+  },
+  responsive: {
+    container: "justify-start gap-1 overflow-x-auto pb-10 [scrollbar-width:none] [-ms-overflow-style:none] lg:justify-center lg:gap-5 lg:overflow-visible lg:px-50 lg:pb-15",
+    item: "py-1 lg:min-w-30 lg:px-2.5 lg:py-2.5",
+    activeItem: "bg-fill-primary px-4 lg:px-2.5",
+    inactiveItem: "px-3 lg:px-2.5",
+    text: "",
+    activeText: "text-body-16sb text-brand-primary lg:text-headline-20b",
+    inactiveText: "text-body-16m text-label-netural lg:text-headline-20m"
+  }
+};
+function FilterItem({
+  children,
+  active = false,
+  device = "responsive",
+  className,
+  ...props
+}) {
+  const styles = filterStyles[device];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-pressed": active,
+      className: cn(
+        "flex shrink-0 items-center justify-center rounded-full whitespace-nowrap",
+        styles.item,
+        active ? styles.activeItem : styles.inactiveItem,
+        className
+      ),
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "font-sans",
+            styles.text,
+            active ? styles.activeText : styles.inactiveText
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function NavigationFilter({
+  children,
+  device = "responsive",
+  className,
+  ...props
+}) {
+  const styles = filterStyles[device];
+  const childrenWithDevice = Children.map(children, (child) => {
+    if (!isValidElement(child)) {
+      return child;
+    }
+    return cloneElement(child, {
+      device: child.props.device ?? device
+    });
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center",
+        device === "desktop" ? "flex-wrap" : void 0,
+        device === "responsive" ? "lg:flex-wrap" : void 0,
+        styles.container,
+        className
+      ),
+      ...props,
+      children: childrenWithDevice
+    }
+  );
+}
+var sizeStyles = {
+  m: {
+    container: "max-w-300",
+    item: "h-31",
+    text: "text-headline-24m",
+    textOffset: "translate-y-4.75",
+    activeText: "text-headline-24sb text-label-normal",
+    inactiveText: "text-label-netural",
+    underline: "after:h-0.75"
+  },
+  s: {
+    container: "max-w-256",
+    item: "h-26",
+    text: "text-body-16m",
+    textOffset: "translate-y-7",
+    activeText: "text-body-16b text-label-normal",
+    inactiveText: "text-label-netural",
+    underline: "after:h-0.5"
+  },
+  responsive: {
+    container: "max-w-256 lg:max-w-300",
+    item: "h-26 lg:h-31",
+    text: "text-body-16m lg:text-headline-24m",
+    textOffset: "translate-y-7 lg:translate-y-4.75",
+    activeText: "text-body-16b text-label-normal lg:text-headline-24sb lg:text-label-normal",
+    inactiveText: "text-label-netural",
+    underline: "after:h-0.5 lg:after:h-0.75"
+  }
+};
+function NavigationTabItem({
+  children,
+  active = false,
+  size = "responsive",
+  className,
+  ...props
+}) {
+  const styles = sizeStyles[size];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "relative flex min-w-0 flex-1 basis-0 items-center justify-center border-b border-line-alternative px-4",
+        styles.item,
+        active ? "after:absolute after:bottom-0 after:left-0 after:w-full after:bg-brand-primary" : void 0,
+        active ? styles.underline : void 0,
+        className
+      ),
+      role: "tab",
+      "aria-selected": active,
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "max-w-full overflow-hidden text-ellipsis whitespace-nowrap font-sans",
+            styles.text,
+            styles.textOffset,
+            active ? styles.activeText : styles.inactiveText
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function NavigationTab({
+  children,
+  size = "responsive",
+  className,
+  ...props
+}) {
+  const styles = sizeStyles[size];
+  const childrenWithSize = Children.map(children, (child) => {
+    if (!isValidElement(child)) {
+      return child;
+    }
+    return cloneElement(child, {
+      size: child.props.size ?? size
+    });
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-full items-stretch",
+        styles.container,
+        className
+      ),
+      role: "tablist",
+      "aria-orientation": "horizontal",
+      ...props,
+      children: childrenWithSize
+    }
+  );
+}
+var paginationControlClassName = "flex size-6 items-center justify-center disabled:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0";
+var getPageItems = (currentPage, totalPages) => {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const middleStart = Math.max(2, currentPage - 1);
+  const middleEnd = Math.min(totalPages - 1, currentPage + 1);
+  const items = [1];
+  if (middleStart > 2) {
+    items.push("ellipsis-start");
+  }
+  for (let page = middleStart; page <= middleEnd; page += 1) {
+    items.push(page);
+  }
+  if (middleEnd < totalPages - 1) {
+    items.push("ellipsis-end");
+  }
+  items.push(totalPages);
+  return items;
+};
+function Pagination({
+  currentPage = 1,
+  totalPages = 5,
+  onPageChange,
+  prevIcon = /* @__PURE__ */ jsx(KeyboardArrowLeftIcon, { "aria-hidden": "true" }),
+  nextIcon = /* @__PURE__ */ jsx(KeyboardArrowRightIcon, { "aria-hidden": "true" }),
+  firstIcon = /* @__PURE__ */ jsx(KeyboardDoubleArrowLeftIcon, { "aria-hidden": "true" }),
+  lastIcon = /* @__PURE__ */ jsx(KeyboardDoubleArrowRightIcon, { "aria-hidden": "true" }),
+  className,
+  ...props
+}) {
+  const safeTotalPages = Math.max(1, Math.floor(totalPages));
+  const safeCurrentPage = Math.min(
+    safeTotalPages,
+    Math.max(1, Math.floor(currentPage))
+  );
+  const pageItems = getPageItems(safeCurrentPage, safeTotalPages);
+  const handlePageChange = (page) => {
+    onPageChange?.(Math.min(safeTotalPages, Math.max(1, page)));
+  };
+  const isFirstPage = safeCurrentPage === 1;
+  const isLastPage = safeCurrentPage === safeTotalPages;
+  const getControlClassName = (disabled) => cn(
+    paginationControlClassName,
+    disabled ? "text-label-disable" : "text-label-normal"
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("inline-flex h-11 items-center gap-3 sm:gap-5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(getControlClassName(isFirstPage), "hidden sm:flex"),
+              onClick: () => handlePageChange(1),
+              disabled: isFirstPage,
+              "aria-label": "First page",
+              children: firstIcon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: getControlClassName(isFirstPage),
+              onClick: () => handlePageChange(safeCurrentPage - 1),
+              disabled: isFirstPage,
+              "aria-label": "Previous page",
+              children: prevIcon
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 sm:gap-3", children: pageItems.map((pageItem) => {
+          if (typeof pageItem !== "number") {
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "font-sans text-body-16m text-label-disable",
+                children: "..."
+              },
+              pageItem
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "whitespace-nowrap font-sans",
+                pageItem === safeCurrentPage ? "text-body-16b text-label-normal" : "text-body-16m text-label-disable"
+              ),
+              onClick: () => handlePageChange(pageItem),
+              "aria-current": pageItem === safeCurrentPage ? "page" : void 0,
+              children: pageItem
+            },
+            pageItem
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: getControlClassName(isLastPage),
+              onClick: () => handlePageChange(safeCurrentPage + 1),
+              disabled: isLastPage,
+              "aria-label": "Next page",
+              children: nextIcon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(getControlClassName(isLastPage), "hidden sm:flex"),
+              onClick: () => handlePageChange(safeTotalPages),
+              disabled: isLastPage,
+              "aria-label": "Last page",
+              children: lastIcon
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { Accordion, Blog, BottomGradient, Button, Dropdown, EmailInput, FilterItem, Footer, Header2 as Header, HeaderNavigation, Label, List, Modal, NavigationButton, NavigationFilter, NavigationTab, NavigationTabItem, PageNavButton, Pagination, RecruitmentCard, ReviewCard, ScrollTopButton, ShowcaseCard };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map