@highpixel-co/palda-design-system 0.4.1

package/dist/chunk-GPCPGABI.js

@@ -0,0 +1,976 @@
+import {
+  CloseIcon
+} from "./chunk-TWYJ2UTC.js";
+
+// ../../components/src/Alert/Alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TITLE_COLOR_CLASS = {
+  neutral: "palda-alert--neutral",
+  accent: "palda-alert--accent",
+  warning: "palda-alert--warning",
+  danger: "palda-alert--danger"
+};
+function Alert({
+  children,
+  className = "",
+  title,
+  icon,
+  action,
+  variant = "neutral",
+  ...props
+}) {
+  const classes = ["palda-alert", TITLE_COLOR_CLASS[variant], className].filter(Boolean).join(" ");
+  const role = variant === "danger" ? "alert" : "status";
+  return /* @__PURE__ */ jsxs("div", { ...props, className: classes, role, children: [
+    icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "palda-alert__icon", children: icon }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "palda-alert__content", children: [
+      title ? /* @__PURE__ */ jsx("p", { className: "palda-alert__title palda-text-body2-reading-semibold", children: title }) : null,
+      /* @__PURE__ */ jsx("div", { className: "palda-alert__body palda-text-body2-reading-medium", children }),
+      action ? /* @__PURE__ */ jsx("div", { className: "palda-alert__action", children: action }) : null
+    ] })
+  ] });
+}
+
+// ../../components/src/Badge/Badge.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TYPOGRAPHY_CLASS = {
+  md: "palda-text-label-regular-semibold",
+  sm: "palda-text-caption-regular-semibold"
+};
+function Badge({
+  children,
+  className = "",
+  variant = "primary",
+  icon,
+  size = "md",
+  ...props
+}) {
+  const classes = [
+    "palda-badge",
+    `palda-badge--${variant}`,
+    `palda-badge--${size}`,
+    TYPOGRAPHY_CLASS[size],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs2("span", { ...props, className: classes, children: [
+    icon ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "palda-badge__icon", children: icon }) : null,
+    /* @__PURE__ */ jsx2("span", { className: "palda-badge__label", children })
+  ] });
+}
+
+// ../../components/src/Button/Button.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TYPOGRAPHY_CLASS2 = {
+  md: "palda-text-body2-regular-semibold",
+  sm: "palda-text-label-regular-semibold"
+};
+function Button({
+  children,
+  className = "",
+  leadingIcon,
+  size = "md",
+  trailingIcon,
+  type = "button",
+  variant = "primary",
+  ...props
+}) {
+  const classes = [
+    "palda-button",
+    `palda-button--${variant}`,
+    `palda-button--${size}`,
+    TYPOGRAPHY_CLASS2[size],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3("button", { ...props, className: classes, type, children: [
+    leadingIcon ? /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "palda-button__icon", children: leadingIcon }) : null,
+    /* @__PURE__ */ jsx3("span", { className: "palda-button__content", children }),
+    trailingIcon ? /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "palda-button__icon", children: trailingIcon }) : null
+  ] });
+}
+
+// ../../components/src/Checkbox/Checkbox.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var LABEL_TYPOGRAPHY_CLASS = "palda-text-body2-regular-medium";
+function Checkbox({ children, className = "", disabled, ...props }) {
+  const classes = ["palda-checkbox", disabled ? "palda-checkbox--disabled" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4("label", { className: classes, children: [
+    /* @__PURE__ */ jsx4("input", { ...props, className: "palda-checkbox__input", disabled, type: "checkbox" }),
+    /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "palda-checkbox__control", children: /* @__PURE__ */ jsx4(
+      "svg",
+      {
+        className: "palda-checkbox__check",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5",
+        viewBox: "0 0 20 20",
+        children: /* @__PURE__ */ jsx4("path", { d: "M16 5 7.75 14 4 9.90909" })
+      }
+    ) }),
+    children === void 0 || children === null || children === "" ? null : /* @__PURE__ */ jsx4("span", { className: `palda-checkbox__label ${LABEL_TYPOGRAPHY_CLASS}`, children })
+  ] });
+}
+
+// ../../components/src/Chip/Chip.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var TYPOGRAPHY_CLASS3 = {
+  md: "palda-text-body2-regular-medium",
+  sm: "palda-text-label-regular-semibold"
+};
+function Chip({
+  children,
+  className = "",
+  icon,
+  selected = false,
+  size = "md",
+  variant = "primary",
+  ...props
+}) {
+  const classes = [
+    "palda-chip",
+    `palda-chip--${variant}`,
+    `palda-chip--${size}`,
+    selected ? "palda-chip--selected" : "",
+    TYPOGRAPHY_CLASS3[size],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5("button", { ...props, "aria-pressed": selected, className: classes, type: "button", children: [
+    /* @__PURE__ */ jsx5("span", { className: "palda-chip__content", children }),
+    icon ? /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "palda-chip__icon", children: icon }) : null
+  ] });
+}
+
+// ../../components/src/DropdownButton/DropdownButton.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var TYPOGRAPHY_CLASS4 = "palda-text-body2-regular-medium";
+function DropdownButton({
+  align = "start",
+  children,
+  className = "",
+  items,
+  onClick,
+  onKeyDown,
+  onSelect,
+  trailingIcon,
+  variant = "outline",
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const itemRefs = useRef([]);
+  const menuId = useId();
+  const enabled = items.map((item, index) => item.disabled ? -1 : index).filter((i) => i >= 0);
+  const first = enabled.length > 0 ? enabled[0] : -1;
+  const last = enabled.length > 0 ? enabled[enabled.length - 1] : -1;
+  useEffect(() => {
+    if (open) {
+      itemRefs.current[activeIndex]?.focus();
+    }
+  }, [activeIndex, open]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+  const openAt = (index) => {
+    setActiveIndex(index);
+    setOpen(true);
+  };
+  const close = () => {
+    setOpen(false);
+    setActiveIndex(-1);
+  };
+  const closeAndFocusTrigger = () => {
+    close();
+    triggerRef.current?.focus();
+  };
+  const handleTriggerClick = (event) => {
+    onClick?.(event);
+    if (open) {
+      close();
+    } else {
+      openAt(first);
+    }
+  };
+  const handleTriggerKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      openAt(first);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      openAt(last);
+    } else if (event.key === "Escape" && open) {
+      event.preventDefault();
+      close();
+    }
+  };
+  const handleMenuKeyDown = (event) => {
+    if (enabled.length === 0) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeAndFocusTrigger();
+      }
+      return;
+    }
+    const position = enabled.indexOf(activeIndex);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex(enabled[(position + 1) % enabled.length]);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex(enabled[(position - 1 + enabled.length) % enabled.length]);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      setActiveIndex(first);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      setActiveIndex(last);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      closeAndFocusTrigger();
+    }
+  };
+  const handleBlur = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      close();
+    }
+  };
+  const handleItemClick = (item) => {
+    onSelect?.(item.value);
+    closeAndFocusTrigger();
+  };
+  const classes = [
+    "palda-dropdown-button",
+    `palda-dropdown-button--${variant}`,
+    `palda-dropdown-button--${align}`,
+    open ? "palda-dropdown-button--open" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs6("div", { className: classes, onBlur: handleBlur, ref: rootRef, children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        ...props,
+        "aria-controls": open ? menuId : void 0,
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        className: `palda-dropdown-button__trigger ${TYPOGRAPHY_CLASS4}`,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+        ref: triggerRef,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: "palda-dropdown-button__label", children }),
+          trailingIcon ? /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "palda-dropdown-button__icon", children: trailingIcon }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: "palda-dropdown-button__menu",
+        id: menuId,
+        onKeyDown: handleMenuKeyDown,
+        role: "menu",
+        children: items.map((item, index) => /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            className: `palda-dropdown-button__item ${TYPOGRAPHY_CLASS4}`,
+            disabled: item.disabled,
+            onClick: () => handleItemClick(item),
+            ref: (node) => {
+              itemRefs.current[index] = node;
+            },
+            role: "menuitem",
+            tabIndex: index === activeIndex ? 0 : -1,
+            type: "button",
+            children: [
+              item.icon ? /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "palda-dropdown-button__item-icon", children: item.icon }) : null,
+              /* @__PURE__ */ jsx6("span", { className: "palda-dropdown-button__item-label", children: item.label })
+            ]
+          },
+          item.value
+        ))
+      }
+    ) : null
+  ] });
+}
+
+// ../../components/src/IconButton/IconButton.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function IconButton({
+  className = "",
+  icon,
+  label,
+  size = "md",
+  type = "button",
+  variant = "primary",
+  ...props
+}) {
+  const classes = [
+    "palda-icon-button",
+    `palda-icon-button--${variant}`,
+    `palda-icon-button--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx7("button", { ...props, "aria-label": label, className: classes, type, children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", className: "palda-icon-button__icon", children: icon }) });
+}
+
+// ../../components/src/Link/Link.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var TYPOGRAPHY_CLASS5 = {
+  md: "palda-text-body2-reading-medium",
+  sm: "palda-text-label-reading-medium"
+};
+function Link({
+  children,
+  className = "",
+  external = false,
+  href,
+  rel,
+  size = "md",
+  target,
+  variant = "primary",
+  ...props
+}) {
+  const classes = [
+    "palda-link",
+    `palda-link--${variant}`,
+    `palda-link--${size}`,
+    TYPOGRAPHY_CLASS5[size],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs7(
+    "a",
+    {
+      ...props,
+      className: classes,
+      href,
+      rel: external ? rel ?? "noreferrer" : rel,
+      target: external ? target ?? "_blank" : target,
+      children: [
+        children,
+        external ? /* @__PURE__ */ jsx8("span", { className: "palda-link__new-window", children: "(\uC0C8 \uCC3D)" }) : null
+      ]
+    }
+  );
+}
+
+// ../../components/src/Modal/Modal.tsx
+import { useEffect as useEffect2, useId as useId2, useRef as useRef2 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var TITLE_TYPOGRAPHY_CLASS = "palda-text-body1-regular-semibold";
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not(:disabled)",
+  "input:not(:disabled)",
+  "select:not(:disabled)",
+  "textarea:not(:disabled)",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function ModalActions({ children, className = "" }) {
+  return /* @__PURE__ */ jsx9("div", { className: ["palda-modal__actions", className].filter(Boolean).join(" "), children });
+}
+function Modal({
+  children,
+  className = "",
+  closeLabel = "\uB2EB\uAE30",
+  footer,
+  onClose,
+  open,
+  showCloseButton = true,
+  title
+}) {
+  const dialogRef = useRef2(null);
+  const titleId = useId2();
+  useEffect2(() => {
+    if (!open) {
+      return;
+    }
+    const previous = document.activeElement;
+    const dialog = dialogRef.current;
+    const first = dialog?.querySelector(FOCUSABLE_SELECTOR);
+    (first ?? dialog)?.focus();
+    return () => previous?.focus();
+  }, [open]);
+  useEffect2(() => {
+    if (!open) {
+      return;
+    }
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [open]);
+  if (!open) {
+    return null;
+  }
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onClose();
+      return;
+    }
+    if (event.key !== "Tab") {
+      return;
+    }
+    const items = Array.from(
+      dialogRef.current?.querySelectorAll(FOCUSABLE_SELECTOR) ?? []
+    );
+    if (items.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  const handleScrimPointerDown = (event) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx9("div", { className: "palda-modal__scrim", onPointerDown: handleScrimPointerDown, children: /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        "aria-labelledby": titleId,
+        "aria-modal": "true",
+        className: ["palda-modal", className].filter(Boolean).join(" "),
+        onKeyDown: handleKeyDown,
+        ref: dialogRef,
+        role: "dialog",
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxs8("div", { className: "palda-modal__header", children: [
+            /* @__PURE__ */ jsx9("h2", { className: `palda-modal__title ${TITLE_TYPOGRAPHY_CLASS}`, id: titleId, children: title }),
+            showCloseButton ? /* @__PURE__ */ jsx9(
+              "button",
+              {
+                "aria-label": closeLabel,
+                className: "palda-modal__close",
+                onClick: onClose,
+                type: "button",
+                children: /* @__PURE__ */ jsx9(CloseIcon, {})
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx9("div", { className: "palda-modal__body", children }),
+          footer ? /* @__PURE__ */ jsx9("div", { className: "palda-modal__footer", children: footer }) : null
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// ../../components/src/NavigationButton/NavigationButton.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function NavigationButton({
+  children,
+  className = "",
+  icon,
+  selected = false,
+  ...props
+}) {
+  const classes = [
+    "palda-navigation-button",
+    selected ? "palda-navigation-button--selected" : "",
+    "palda-text-body2-regular-semibold",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      ...props,
+      "aria-current": selected ? "page" : void 0,
+      className: classes,
+      type: "button",
+      children: [
+        icon ? /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "palda-navigation-button__icon", children: icon }) : null,
+        /* @__PURE__ */ jsx10("span", { className: "palda-navigation-button__label", children })
+      ]
+    }
+  );
+}
+
+// ../../components/src/ProgressBar/ProgressBar.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function ProgressBar({ value, label, className = "", ...props }) {
+  const clamped = Math.min(100, Math.max(0, Math.round(value)));
+  const classes = ["palda-progress-bar", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ...props,
+      "aria-label": label,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": clamped,
+      className: classes,
+      role: "progressbar",
+      children: /* @__PURE__ */ jsx11("div", { className: "palda-progress-bar__fill", style: { inlineSize: `${clamped}%` } })
+    }
+  );
+}
+
+// ../../components/src/Radio/Radio.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var LABEL_TYPOGRAPHY_CLASS2 = "palda-text-body2-regular-medium";
+function Radio({ children, className = "", disabled, ...props }) {
+  const classes = ["palda-radio", disabled ? "palda-radio--disabled" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs10("label", { className: classes, children: [
+    /* @__PURE__ */ jsx12("input", { ...props, className: "palda-radio__input", disabled, type: "radio" }),
+    /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", className: "palda-radio__control" }),
+    children === void 0 || children === null || children === "" ? null : /* @__PURE__ */ jsx12("span", { className: `palda-radio__label ${LABEL_TYPOGRAPHY_CLASS2}`, children })
+  ] });
+}
+
+// ../../components/src/Switch/Switch.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function Switch({ className = "", disabled, size = "md", ...props }) {
+  const classes = [
+    "palda-switch",
+    `palda-switch--${size}`,
+    disabled ? "palda-switch--disabled" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs11("label", { className: classes, children: [
+    /* @__PURE__ */ jsx13(
+      "input",
+      {
+        ...props,
+        className: "palda-switch__input",
+        disabled,
+        role: "switch",
+        type: "checkbox"
+      }
+    ),
+    /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: "palda-switch__track", children: /* @__PURE__ */ jsx13("span", { className: "palda-switch__knob" }) })
+  ] });
+}
+
+// ../../components/src/Tab/Tab.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function Tab({ children, className = "", icon, selected = false, ...props }) {
+  const classes = [
+    "palda-tab",
+    selected ? "palda-tab--selected" : "",
+    "palda-text-body2-regular-semibold",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs12("button", { ...props, "aria-selected": selected, className: classes, role: "tab", type: "button", children: [
+    icon ? /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", className: "palda-tab__icon", children: icon }) : null,
+    /* @__PURE__ */ jsx14("span", { className: "palda-tab__label", children })
+  ] });
+}
+
+// ../../components/src/TextField/TextField.tsx
+import { useId as useId3, useState as useState2 } from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var LABEL_TYPOGRAPHY_CLASS3 = "palda-text-body2-regular-semibold";
+var FOOTER_TYPOGRAPHY_CLASS = "palda-text-label-regular-semibold";
+var CONTROL_TYPOGRAPHY_CLASS = {
+  md: "palda-text-body2-reading-medium",
+  sm: "palda-text-body2-regular-medium"
+};
+function TextField({
+  className = "",
+  defaultValue,
+  description,
+  disabled,
+  error = false,
+  icon,
+  id,
+  label,
+  maxLength,
+  onChange,
+  required,
+  size = "sm",
+  value,
+  variant = "outline",
+  ...props
+}) {
+  const generatedId = useId3();
+  const controlId = id ?? generatedId;
+  const descriptionId = `${controlId}-description`;
+  const countId = `${controlId}-count`;
+  const showCount = maxLength !== void 0;
+  const [uncontrolledLength, setUncontrolledLength] = useState2(
+    () => String(defaultValue ?? "").length
+  );
+  const length = value === void 0 ? uncontrolledLength : String(value).length;
+  const handleChange = (event) => {
+    setUncontrolledLength(event.target.value.length);
+    onChange?.(event);
+  };
+  const describedBy = [description ? descriptionId : "", showCount ? countId : ""].filter(Boolean).join(" ");
+  const controlProps = {
+    ...props,
+    "aria-describedby": describedBy || void 0,
+    "aria-invalid": error || void 0,
+    className: `palda-text-field__control ${CONTROL_TYPOGRAPHY_CLASS[size]}`,
+    defaultValue,
+    disabled,
+    id: controlId,
+    maxLength,
+    onChange: handleChange,
+    required,
+    value
+  };
+  const classes = [
+    "palda-text-field",
+    `palda-text-field--${variant}`,
+    `palda-text-field--${size}`,
+    error ? "palda-text-field--error" : "",
+    disabled ? "palda-text-field--disabled" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs13("div", { className: classes, children: [
+    label === void 0 || label === null || label === "" ? null : /* @__PURE__ */ jsxs13("label", { className: `palda-text-field__label ${LABEL_TYPOGRAPHY_CLASS3}`, htmlFor: controlId, children: [
+      label,
+      required ? /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", className: "palda-text-field__required", children: "*" }) : null
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "palda-text-field__field", children: [
+      size === "md" ? (
+        // input과 textarea는 같은 prop을 받지만 이벤트 타입만 다르다.
+        /* @__PURE__ */ jsx15("textarea", { ...controlProps })
+      ) : /* @__PURE__ */ jsx15("input", { ...controlProps }),
+      icon ? /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", className: "palda-text-field__icon", children: icon }) : null
+    ] }),
+    description || showCount ? /* @__PURE__ */ jsxs13("div", { className: `palda-text-field__footer ${FOOTER_TYPOGRAPHY_CLASS}`, children: [
+      /* @__PURE__ */ jsx15("span", { className: "palda-text-field__description", id: descriptionId, children: description }),
+      showCount ? /* @__PURE__ */ jsxs13("span", { className: "palda-text-field__count", id: countId, children: [
+        length,
+        "/",
+        maxLength
+      ] }) : null
+    ] }) : null
+  ] });
+}
+
+// ../../components/src/Toast/toastStore.ts
+var queue = [];
+var lastId = 0;
+var listeners = /* @__PURE__ */ new Set();
+function publish(next) {
+  queue = next;
+  for (const listener of listeners) {
+    listener();
+  }
+}
+function subscribeToToasts(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getToasts() {
+  return queue;
+}
+function toast(message, options = {}) {
+  lastId += 1;
+  const id = `palda-toast-${lastId}`;
+  publish([...queue, { ...options, id, message }]);
+  return id;
+}
+toast.dismiss = (id) => {
+  publish(id === void 0 ? [] : queue.filter((item) => item.id !== id));
+};
+
+// ../../components/src/Toast/Toaster.tsx
+import { useSyncExternalStore } from "react";
+
+// ../../components/src/Toast/Toast.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var TYPOGRAPHY_CLASS6 = "palda-text-body2-reading-medium";
+var DEFAULT_DURATION_MS = 5e3;
+function Toast({
+  actionLabel,
+  children,
+  className = "",
+  closeLabel = "\uB2EB\uAE30",
+  duration = DEFAULT_DURATION_MS,
+  icon,
+  onAction,
+  onClose,
+  variant = "primary"
+}) {
+  const [paused, setPaused] = useState3(false);
+  const remainingRef = useRef3(duration);
+  useEffect3(() => {
+    remainingRef.current = duration;
+  }, [duration]);
+  useEffect3(() => {
+    if (!onClose || duration <= 0 || paused) {
+      return;
+    }
+    const startedAt = Date.now();
+    const timer = setTimeout(onClose, remainingRef.current);
+    return () => {
+      clearTimeout(timer);
+      remainingRef.current = Math.max(remainingRef.current - (Date.now() - startedAt), 0);
+    };
+  }, [duration, onClose, paused]);
+  const classes = ["palda-toast", `palda-toast--${variant}`, TYPOGRAPHY_CLASS6, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: classes,
+      onBlur: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      role: variant === "danger" ? "alert" : "status",
+      children: [
+        icon ? /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "palda-toast__icon", children: icon }) : null,
+        /* @__PURE__ */ jsx16("span", { className: "palda-toast__content", children }),
+        actionLabel ? /* @__PURE__ */ jsx16("button", { className: "palda-toast__action", onClick: onAction, type: "button", children: actionLabel }) : null,
+        onClose ? /* @__PURE__ */ jsx16(
+          "button",
+          {
+            "aria-label": closeLabel,
+            className: "palda-toast__close",
+            onClick: onClose,
+            type: "button",
+            children: /* @__PURE__ */ jsx16(CloseIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// ../../components/src/Toast/Toaster.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+import { createElement } from "react";
+function Toaster({ className = "", placement = "bottom-center" }) {
+  const toasts = useSyncExternalStore(subscribeToToasts, getToasts, getToasts);
+  const classes = ["palda-toaster", `palda-toaster--${placement}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx17("div", { className: classes, children: toasts.map(({ id, message, onAction, ...options }) => /* @__PURE__ */ createElement(
+    Toast,
+    {
+      ...options,
+      key: id,
+      onAction: onAction ? () => {
+        onAction();
+        toast.dismiss(id);
+      } : void 0,
+      onClose: () => toast.dismiss(id)
+    },
+    message
+  )) });
+}
+
+// ../../components/src/Tooltip/Tooltip.tsx
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect as useEffect4,
+  useId as useId4,
+  useLayoutEffect,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+var OPPOSITE = {
+  bottom: "top",
+  left: "right",
+  right: "left",
+  top: "bottom"
+};
+var OPEN_DELAY_MS = 200;
+var CLOSE_GRACE_MS = 100;
+var GAP_FALLBACK_PX = 4;
+var ARROW_INSET_PX = 10;
+var clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+function readGap(element) {
+  const raw = getComputedStyle(element).getPropertyValue("--palda-tooltip-gap");
+  const parsed = Number.parseFloat(raw);
+  return Number.isNaN(parsed) ? GAP_FALLBACK_PX : parsed;
+}
+function Tooltip({ children, className = "", label, placement = "top" }) {
+  const [open, setOpen] = useState4(false);
+  const [position, setPosition] = useState4(null);
+  const anchorRef = useRef4(null);
+  const bubbleRef = useRef4(null);
+  const timerRef = useRef4(void 0);
+  const tooltipId = useId4();
+  const clearTimer = () => clearTimeout(timerRef.current);
+  useEffect4(() => clearTimer, []);
+  const place = useCallback(() => {
+    const anchor = anchorRef.current;
+    const bubble = bubbleRef.current;
+    if (!anchor || !bubble) {
+      return;
+    }
+    const trigger2 = anchor.getBoundingClientRect();
+    const { height, width } = bubble.getBoundingClientRect();
+    const gap = readGap(bubble);
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const room = {
+      bottom: viewportHeight - trigger2.bottom,
+      left: trigger2.left,
+      right: viewportWidth - trigger2.right,
+      top: trigger2.top
+    };
+    const needed = (side) => (side === "top" || side === "bottom" ? height : width) + gap * 2;
+    const flipped = OPPOSITE[placement];
+    const next = room[placement] < needed(placement) && room[flipped] >= needed(flipped) ? flipped : placement;
+    const vertical = next === "top" || next === "bottom";
+    let left = vertical ? trigger2.left + trigger2.width / 2 - width / 2 : next === "left" ? trigger2.left - width - gap : trigger2.right + gap;
+    let top = vertical ? next === "top" ? trigger2.top - height - gap : trigger2.bottom + gap : trigger2.top + trigger2.height / 2 - height / 2;
+    if (vertical) {
+      left = clamp(left, gap, viewportWidth - width - gap);
+    } else {
+      top = clamp(top, gap, viewportHeight - height - gap);
+    }
+    const center = vertical ? trigger2.left + trigger2.width / 2 - left : trigger2.top + trigger2.height / 2 - top;
+    setPosition({
+      arrowOffset: clamp(
+        center,
+        ARROW_INSET_PX,
+        Math.max((vertical ? width : height) - ARROW_INSET_PX, ARROW_INSET_PX)
+      ),
+      left,
+      placement: next,
+      top
+    });
+  }, [placement]);
+  useLayoutEffect(() => {
+    if (open) {
+      place();
+    } else {
+      setPosition(null);
+    }
+  }, [open, place]);
+  useEffect4(() => {
+    if (!open) {
+      return;
+    }
+    const handleScroll = () => place();
+    window.addEventListener("resize", handleScroll);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      window.removeEventListener("resize", handleScroll);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [open, place]);
+  useEffect4(() => {
+    if (!open) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+  const handleMouseEnter = () => {
+    clearTimer();
+    timerRef.current = setTimeout(() => setOpen(true), OPEN_DELAY_MS);
+  };
+  const handleMouseLeave = () => {
+    clearTimer();
+    timerRef.current = setTimeout(() => setOpen(false), CLOSE_GRACE_MS);
+  };
+  const handleFocus = () => {
+    clearTimer();
+    setOpen(true);
+  };
+  const handleBlur = () => {
+    clearTimer();
+    setOpen(false);
+  };
+  const bubbleClasses = [
+    "palda-tooltip__bubble",
+    `palda-tooltip__bubble--${position?.placement ?? placement}`,
+    "palda-text-label-reading-medium"
+  ].join(" ");
+  const trigger = isValidElement(children) ? cloneElement(children, {
+    "aria-describedby": open ? tooltipId : children.props["aria-describedby"]
+  }) : children;
+  return /* @__PURE__ */ jsxs15(
+    "span",
+    {
+      className: ["palda-tooltip", className].filter(Boolean).join(" "),
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ref: anchorRef,
+      children: [
+        trigger,
+        open ? /* @__PURE__ */ jsxs15(
+          "span",
+          {
+            className: bubbleClasses,
+            id: tooltipId,
+            ref: bubbleRef,
+            role: "tooltip",
+            style: position ? {
+              "--palda-tooltip-arrow-offset": `${position.arrowOffset}px`,
+              // 논리 속성이 아니라 물리 좌표다(Tooltip.css의 화살표 주석 참고).
+              left: `${position.left}px`,
+              top: `${position.top}px`
+            } : (
+              // 재기 전에는 자리를 모르니 감춰 둔다. 첫 프레임에 엉뚱한 곳에 보이지 않게 한다.
+              { visibility: "hidden" }
+            ),
+            children: [
+              label,
+              /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: "palda-tooltip__arrow" })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export {
+  Alert,
+  Badge,
+  Button,
+  Checkbox,
+  Chip,
+  DropdownButton,
+  IconButton,
+  Link,
+  ModalActions,
+  Modal,
+  NavigationButton,
+  ProgressBar,
+  Radio,
+  Switch,
+  Tab,
+  TextField,
+  toast,
+  Toaster,
+  Tooltip
+};