@bigtablet/design-system 3.14.2 → 3.15.0

package/dist/index.css

@@ -5708,8 +5708,8 @@ body:has(.bottom_nav) {
 }
 .drawer_close {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: 16px;
+  right: 16px;
   width: 32px;
   height: 32px;
   display: inline-flex;
@@ -5794,6 +5794,7 @@ body:has(.bottom_nav) {
   bottom: 0;
   left: 0;
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   place-items: center;
   background: var(--bt-color-bg-overlay);
   z-index: 100;
@@ -5821,8 +5822,8 @@ body:has(.bottom_nav) {
 }
 .modal_close {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: 16px;
+  right: 16px;
   width: 32px;
   height: 32px;
   display: inline-flex;
@@ -5843,9 +5844,15 @@ body:has(.bottom_nav) {
   outline: none;
   box-shadow: var(--bt-focus-ring);
 }
+@media (min-width: 600px) {
+  .modal_close {
+    top: 24px;
+    right: 24px;
+  }
+}
 .modal_title {
   margin: 0;
-  padding-right: 32px;
+  padding-right: 24px;
   color: var(--bt-color-text-heading);
   font-size: 28px;
   font-weight: 700;

package/dist/index.d.ts

@@ -866,6 +866,7 @@ declare const spacing: {
     readonly "4": "4px";
     readonly "6": "6px";
     readonly "8": "8px";
+    readonly "10": "10px";
     readonly "12": "12px";
     readonly "16": "16px";
     readonly "20": "20px";
@@ -873,6 +874,9 @@ declare const spacing: {
     readonly "32": "32px";
     readonly "40": "40px";
     readonly "48": "48px";
+    readonly "64": "64px";
+    readonly "96": "96px";
+    readonly "128": "128px";
 };
 
 declare const baseTypography: {
@@ -880,6 +884,7 @@ declare const baseTypography: {
         readonly primary: "Pretendard";
     };
     readonly fontSize: {
+        readonly "10": "10px";
         readonly "12": "12px";
         readonly "13": "13px";
         readonly "14": "14px";

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import './index.css';
-import * as React16 from 'react';
+import * as React11 from 'react';
 import { createContext, useRef, useState, useId, useEffect, useContext, useCallback, useMemo, Fragment, useImperativeHandle, useLayoutEffect } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { ChevronDown, ChevronRight, Globe, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, XCircle, AlertTriangle, CheckCircle2, Info, Bell, Search, Check, Image, X, EyeOff, Eye, TriangleAlert } from 'lucide-react';
@@ -58,11 +58,11 @@ function registerOverlay(onEscape) {
   };
 }
 function useOverlayEscape(active, onEscape) {
-  const handlerRef = React16.useRef(onEscape);
-  React16.useEffect(() => {
+  const handlerRef = React11.useRef(onEscape);
+  React11.useEffect(() => {
     handlerRef.current = onEscape;
   });
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     if (!active) return;
     return registerOverlay(() => handlerRef.current());
   }, [active]);
@@ -203,7 +203,7 @@ function useAnchoredPosition({
   gap,
   padding
 }) {
-  const [state, setState] = React16.useState({
+  const [state, setState] = React11.useState({
     x: 0,
     y: 0,
     placement,
@@ -262,8 +262,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React16.useRef(null);
-  React16.useEffect(() => {
+  const previousActiveElement = React11.useRef(null);
+  React11.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -313,8 +313,8 @@ function useFocusTrap(containerRef, isActive) {
   }, [isActive, containerRef]);
 }
 function useIsMounted() {
-  const [mounted, setMounted] = React16.useState(false);
-  React16.useEffect(() => {
+  const [mounted, setMounted] = React11.useState(false);
+  React11.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
@@ -348,13 +348,13 @@ function getServerSnapshot() {
   return false;
 }
 function useReducedMotion() {
-  return React16.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return React11.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 function useSpringHover({
   scale = 1.02,
   lift = -2
 } = {}) {
-  const [hovered, setHovered] = React16.useState(false);
+  const [hovered, setHovered] = React11.useState(false);
   const reduced = useReducedMotion();
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
@@ -421,9 +421,9 @@ var Accordion = ({
   ...props
 }) => {
   const isControlled = controlledKeys !== void 0;
-  const [internalKeys, setInternalKeys] = React16.useState(defaultOpenKeys);
+  const [internalKeys, setInternalKeys] = React11.useState(defaultOpenKeys);
   const open = isControlled ? controlledKeys ?? [] : internalKeys;
-  const idPrefix = React16.useId();
+  const idPrefix = React11.useId();
   const toggle = (key) => {
     const isOpen = open.includes(key);
     const next = isOpen ? open.filter((k) => k !== key) : multiple ? [...open, key] : [key];
@@ -489,7 +489,7 @@ var Avatar = ({
   style,
   ...props
 }) => {
-  const [imgFailed, setImgFailed] = React16.useState(false);
+  const [imgFailed, setImgFailed] = React11.useState(false);
   const showImage = src && !imgFailed;
   const initials = getInitials(name);
   return /* @__PURE__ */ jsx(
@@ -503,15 +503,7 @@ var Avatar = ({
       ...props,
       children: showImage ? (
         // biome-ignore lint/performance/noImgElement: DS is framework-agnostic - consumers wrap with next/image
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src,
-            alt: name,
-            onError: () => setImgFailed(true),
-            className: "avatar_image"
-          }
-        )
+        /* @__PURE__ */ jsx("img", { src, alt: name, onError: () => setImgFailed(true), className: "avatar_image" })
       ) : /* @__PURE__ */ jsx("span", { className: "avatar_initials", "aria-hidden": "true", children: initials })
     }
   );
@@ -614,27 +606,10 @@ var BottomNav = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      className: cn("bottom_nav", className),
-      "aria-label": ariaLabel,
-      ...props,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("nav", { className: cn("bottom_nav", className), "aria-label": ariaLabel, ...props, children });
 };
 var BottomNavItem = (props) => {
-  const {
-    icon,
-    label,
-    active,
-    badge,
-    as = "button",
-    className,
-    disabled,
-    ...rest
-  } = props;
+  const { icon, label, active, badge, as = "button", className, disabled, ...rest } = props;
   const classes = cn(
     "bottom_nav_item",
     active && "bottom_nav_item_active",
@@ -651,27 +626,24 @@ var BottomNavItem = (props) => {
   ] });
   if (as === "a") {
     const { href, onClick: onClick2, ...anchorRest } = rest;
-    return (
-      // biome-ignore lint/a11y/useValidAnchor: navigation link with optional active state
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          className: classes,
-          href,
-          "aria-current": ariaCurrent,
-          "aria-disabled": disabled ? "true" : void 0,
-          tabIndex: disabled ? -1 : void 0,
-          onClick: (e) => {
-            if (disabled) {
-              e.preventDefault();
-              return;
-            }
-            onClick2?.(e);
-          },
-          ...anchorRest,
-          children: content
-        }
-      )
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: classes,
+        href,
+        "aria-current": ariaCurrent,
+        "aria-disabled": disabled ? "true" : void 0,
+        tabIndex: disabled ? -1 : void 0,
+        onClick: (e) => {
+          if (disabled) {
+            e.preventDefault();
+            return;
+          }
+          onClick2?.(e);
+        },
+        ...anchorRest,
+        children: content
+      }
     );
   }
   const { type, onClick, ...buttonRest } = rest;
@@ -704,30 +676,19 @@ var Breadcrumb = ({
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: breadcrumb items have stable order
       /* @__PURE__ */ jsxs("li", { className: "breadcrumb_item", children: [
-        isLast ? /* @__PURE__ */ jsx("span", { className: "breadcrumb_current", "aria-current": "page", children: item.label }) : item.href ? (
-          // biome-ignore lint/a11y/useValidAnchor: navigation link
-          /* @__PURE__ */ jsx("a", { className: "breadcrumb_link", href: item.href, onClick: item.onClick, children: item.label })
-        ) : /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "breadcrumb_link",
-            onClick: item.onClick,
-            children: item.label
-          }
-        ),
+        isLast ? /* @__PURE__ */ jsx("span", { className: "breadcrumb_current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx("a", { className: "breadcrumb_link", href: item.href, onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsx("button", { type: "button", className: "breadcrumb_link", onClick: item.onClick, children: item.label }),
         !isLast && /* @__PURE__ */ jsx("span", { className: "breadcrumb_separator", "aria-hidden": "true", children: sep })
       ] }, idx)
     );
   }) }) });
 };
 var Menu = ({ items, trigger, align = "start" }) => {
-  const [open, setOpen] = React16.useState(false);
-  const wrapperRef = React16.useRef(null);
-  const itemRefs = React16.useRef([]);
-  const menuId = React16.useId();
+  const [open, setOpen] = React11.useState(false);
+  const wrapperRef = React11.useRef(null);
+  const itemRefs = React11.useRef([]);
+  const menuId = React11.useId();
   const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -742,7 +703,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     const active = document.activeElement;
     if (!open || active && itemRefs.current.includes(active)) return;
     const first = items.findIndex((it) => !it.disabled);
@@ -788,7 +749,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
         break;
     }
   };
-  const triggerWithProps = React16.cloneElement(
+  const triggerWithProps = React11.cloneElement(
     trigger,
     {
       onClick: () => setOpen((o) => !o),
@@ -905,10 +866,7 @@ var NavBar = ({
             "span",
             {
               "aria-hidden": "true",
-              className: cn(
-                "nav_bar_indicator",
-                hasMounted && "nav_bar_indicator_animated"
-              ),
+              className: cn("nav_bar_indicator", hasMounted && "nav_bar_indicator_animated"),
               style: { left: indicator.left, width: indicator.width }
             }
           )
@@ -1009,58 +967,39 @@ var LocaleSwitcher = ({ locale }) => {
         children: [
           /* @__PURE__ */ jsx(Globe, { size: iconSize.sm, "aria-hidden": "true" }),
           !locale.hideLabel && /* @__PURE__ */ jsx("span", { className: "nav_bar_locale_label", children: currentLabel }),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              size: iconSize.xs,
-              "aria-hidden": "true",
-              className: "nav_bar_locale_chevron"
-            }
-          )
+          /* @__PURE__ */ jsx(ChevronDown, { size: iconSize.xs, "aria-hidden": "true", className: "nav_bar_locale_chevron" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx(
-      "ul",
+    open && /* @__PURE__ */ jsx("ul", { id: menuId, role: "menu", className: "nav_bar_locale_menu", onKeyDown: handleMenuKeyDown, children: locale.options.map((opt, index) => /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(
+      "button",
       {
-        id: menuId,
-        role: "menu",
-        className: "nav_bar_locale_menu",
-        onKeyDown: handleMenuKeyDown,
-        children: locale.options.map((opt, index) => /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            ref: (el) => {
-              itemRefs.current[index] = el;
-            },
-            type: "button",
-            role: "menuitemradio",
-            "aria-checked": opt.value === locale.current,
-            tabIndex: -1,
-            className: cn(
-              "nav_bar_locale_item",
-              opt.value === locale.current && "nav_bar_locale_item_active"
-            ),
-            onClick: () => handleSelect(opt.value),
-            children: opt.label
-          }
-        ) }, opt.value))
+        ref: (el) => {
+          itemRefs.current[index] = el;
+        },
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": opt.value === locale.current,
+        tabIndex: -1,
+        className: cn(
+          "nav_bar_locale_item",
+          opt.value === locale.current && "nav_bar_locale_item_active"
+        ),
+        onClick: () => handleSelect(opt.value),
+        children: opt.label
       }
-    )
+    ) }, opt.value)) })
   ] });
 };
 var NavLink = ({ active, className, children, ...props }) => {
-  return (
-    // biome-ignore lint/a11y/useValidAnchor: navigation link
-    /* @__PURE__ */ jsx(
-      "a",
-      {
-        className: cn("nav_bar_link", active && "nav_bar_link_active"),
-        "aria-current": active ? "page" : void 0,
-        ...props,
-        children
-      }
-    )
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: cn("nav_bar_link", active && "nav_bar_link_active"),
+      "aria-current": active ? "page" : void 0,
+      ...props,
+      children
+    }
   );
 };
 var Sidebar = ({
@@ -1081,9 +1020,9 @@ var Sidebar = ({
   ...props
 }) => {
   const isControlled = collapsedProp !== void 0;
-  const [internalCollapsed, setInternalCollapsed] = React16.useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React11.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
-  const toggle = React16.useCallback(() => {
+  const toggle = React11.useCallback(() => {
     const next = !collapsed;
     if (!isControlled) setInternalCollapsed(next);
     onCollapsedChange?.(next);
@@ -1133,22 +1072,10 @@ var SidebarItem = (props) => {
   ] });
   if (as === "a") {
     const { href, ...anchorRest } = rest;
-    return (
-      // biome-ignore lint/a11y/useValidAnchor: navigation link with optional active state
-      /* @__PURE__ */ jsx("a", { className: classes, href, "aria-current": ariaCurrent, ...anchorRest, children: inner })
-    );
+    return /* @__PURE__ */ jsx("a", { className: classes, href, "aria-current": ariaCurrent, ...anchorRest, children: inner });
   }
   const { type, ...buttonRest } = rest;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: type ?? "button",
-      className: classes,
-      "aria-current": ariaCurrent,
-      ...buttonRest,
-      children: inner
-    }
-  );
+  return /* @__PURE__ */ jsx("button", { type: type ?? "button", className: classes, "aria-current": ariaCurrent, ...buttonRest, children: inner });
 };
 var SidebarSection = ({ label, className, children, ...props }) => {
   return /* @__PURE__ */ jsxs("div", { className: cn("sidebar_section", className), ...props, children: [
@@ -1156,9 +1083,9 @@ var SidebarSection = ({ label, className, children, ...props }) => {
     children
   ] });
 };
-var TabsContext = React16.createContext(null);
+var TabsContext = React11.createContext(null);
 function useTabsContext() {
-  const ctx = React16.useContext(TabsContext);
+  const ctx = React11.useContext(TabsContext);
   if (!ctx) {
     throw new Error(
       '[Bigtablet DS] <Tab>, <TabList>, <TabPanel>\uC740 \uBC18\uB4DC\uC2DC <Tabs> \uC548\uC5D0 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.\n\n\uC62C\uBC14\uB978 \uC0AC\uC6A9 \uC608:\n  <Tabs defaultValue="a">\n    <TabList>\n      <Tab value="a">A</Tab>\n    </TabList>\n    <TabPanel value="a">...</TabPanel>\n  </Tabs>'
@@ -1177,18 +1104,18 @@ var Tabs = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React16.useState(defaultValue);
+  const [internalValue, setInternalValue] = React11.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const setValue = React16.useCallback(
+  const setValue = React11.useCallback(
     (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const orderRef = React16.useRef([]);
-  const [firstTabValue, setFirstTabValue] = React16.useState();
-  const registerTab = React16.useCallback((v) => {
+  const orderRef = React11.useRef([]);
+  const [firstTabValue, setFirstTabValue] = React11.useState();
+  const registerTab = React11.useCallback((v) => {
     if (!orderRef.current.includes(v)) {
       orderRef.current = [...orderRef.current, v];
       setFirstTabValue(orderRef.current[0]);
@@ -1198,18 +1125,25 @@ var Tabs = ({
       setFirstTabValue(orderRef.current[0]);
     };
   }, []);
-  const idPrefix = React16.useId();
-  const ctx = React16.useMemo(
+  const idPrefix = React11.useId();
+  const ctx = React11.useMemo(
     () => ({ value, setValue, variant, size, idPrefix, registerTab, firstTabValue }),
     [value, setValue, variant, size, idPrefix, registerTab, firstTabValue]
   );
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { className: cn("tabs", `tabs_variant_${variant}`, `tabs_size_${size}`, className), ...props, children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("tabs", `tabs_variant_${variant}`, `tabs_size_${size}`, className),
+      ...props,
+      children
+    }
+  ) });
 };
 var TabList = ({ ariaLabel, className, children, ...props }) => {
   const { variant } = useTabsContext();
-  const listRef = React16.useRef(null);
-  const [indicator, setIndicator] = React16.useState(null);
-  const [hasMounted, setHasMounted] = React16.useState(false);
+  const listRef = React11.useRef(null);
+  const [indicator, setIndicator] = React11.useState(null);
+  const [hasMounted, setHasMounted] = React11.useState(false);
   useSafeLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
@@ -1272,7 +1206,7 @@ var Tab = ({ value, className, children, onClick, onKeyDown, ...props }) => {
   const panelId = `${ctx.idPrefix}-panel-${value}`;
   const tabId = `${ctx.idPrefix}-tab-${value}`;
   const { registerTab } = ctx;
-  React16.useEffect(() => registerTab(value), [registerTab, value]);
+  React11.useEffect(() => registerTab(value), [registerTab, value]);
   const handleClick = (e) => {
     ctx.setValue(value);
     onClick?.(e);
@@ -1280,10 +1214,13 @@ var Tab = ({ value, className, children, onClick, onKeyDown, ...props }) => {
   const handleKeyDown2 = (e) => {
     onKeyDown?.(e);
     if (e.defaultPrevented) return;
-    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End") return;
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End")
+      return;
     const list = e.currentTarget.closest('[role="tablist"]');
     if (!list) return;
-    const tabs = Array.from(list.querySelectorAll('[role="tab"]:not([disabled])'));
+    const tabs = Array.from(
+      list.querySelectorAll('[role="tab"]:not([disabled])')
+    );
     const currentIndex = tabs.indexOf(e.currentTarget);
     if (currentIndex < 0) return;
     e.preventDefault();
@@ -1355,15 +1292,15 @@ var Popover = ({
   className
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = React16.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React11.useState(defaultOpen);
   const open = isControlled ? openProp : internalOpen;
-  const [shouldRender, setShouldRender] = React16.useState(open ?? false);
+  const [shouldRender, setShouldRender] = React11.useState(open ?? false);
   if (open && !shouldRender) setShouldRender(true);
-  const wrapperRef = React16.useRef(null);
-  const positionRef = React16.useRef(null);
-  const popoverRef = React16.useRef(null);
-  const popoverId = React16.useId();
-  const setOpen = React16.useCallback(
+  const wrapperRef = React11.useRef(null);
+  const positionRef = React11.useRef(null);
+  const popoverRef = React11.useRef(null);
+  const popoverId = React11.useId();
+  const setOpen = React11.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
@@ -1396,7 +1333,7 @@ var Popover = ({
     onExitComplete: () => setShouldRender(false)
   });
   useFocusTrap(popoverRef, open);
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -1410,7 +1347,7 @@ var Popover = ({
   useOverlayEscape(open, () => {
     setOpen(false);
   });
-  const triggerWithProps = React16.cloneElement(
+  const triggerWithProps = React11.cloneElement(
     trigger,
     {
       onClick: (e) => {
@@ -1469,30 +1406,30 @@ var Tooltip = ({
   disabled = false,
   children
 }) => {
-  const [open, setOpen] = React16.useState(false);
-  const [shouldRender, setShouldRender] = React16.useState(false);
+  const [open, setOpen] = React11.useState(false);
+  const [shouldRender, setShouldRender] = React11.useState(false);
   if (open && !shouldRender) setShouldRender(true);
-  const timerRef = React16.useRef(null);
-  const tooltipId = React16.useId();
-  const wrapperRef = React16.useRef(null);
-  const positionRef = React16.useRef(null);
+  const timerRef = React11.useRef(null);
+  const tooltipId = React11.useId();
+  const wrapperRef = React11.useRef(null);
+  const positionRef = React11.useRef(null);
   const HIDE_DELAY = 120;
-  const show = React16.useCallback(() => {
+  const show = React11.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(true), delay);
   }, [delay]);
-  const hideNow = React16.useCallback(() => {
+  const hideNow = React11.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setOpen(false);
   }, []);
-  const hide = React16.useCallback(() => {
+  const hide = React11.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(false), HIDE_DELAY);
   }, []);
-  const cancelHide = React16.useCallback(() => {
+  const cancelHide = React11.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
@@ -1525,7 +1462,7 @@ var Tooltip = ({
   });
   const child = children;
   const childProps = child.props;
-  const trigger = React16.cloneElement(child, {
+  const trigger = React11.cloneElement(child, {
     onMouseEnter: (e) => {
       childProps.onMouseEnter?.(e);
       show();
@@ -1762,13 +1699,17 @@ var spacing = {
   "4": "4px",
   "6": "6px",
   "8": "8px",
+  "10": "10px",
   "12": "12px",
   "16": "16px",
   "20": "20px",
   "24": "24px",
   "32": "32px",
   "40": "40px",
-  "48": "48px"
+  "48": "48px",
+  "64": "64px",
+  "96": "96px",
+  "128": "128px"
 };
 
 // src/styles/skeleton/index.ts
@@ -1803,6 +1744,7 @@ var baseTypography = {
     primary: "Pretendard"
   },
   fontSize: {
+    "10": "10px",
     "12": "12px",
     "13": "13px",
     "14": "14px",
@@ -2474,8 +2416,8 @@ var MediaCard = ({
   ] });
 };
 var Prose = ({ size = "md", className, children, ref, ...props }) => {
-  const rootRef = React16.useRef(null);
-  React16.useImperativeHandle(ref, () => rootRef.current, []);
+  const rootRef = React11.useRef(null);
+  React11.useImperativeHandle(ref, () => rootRef.current, []);
   useSafeLayoutEffect(() => {
     const root = rootRef.current;
     if (!root) return;
@@ -2531,12 +2473,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React16.useRef(null);
-  React16.useImperativeHandle(
+  const inputRef = React11.useRef(null);
+  React11.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -2594,8 +2536,8 @@ var Table = ({
   const isEmpty = !isLoading && data.length === 0;
   const getRowKey = (item, index) => rowKey?.(item) ?? String(index);
   const allRowKeys = selectable ? data.map((item, index) => getRowKey(item, index)) : [];
-  const rowClickHintId = React16.useId();
-  const selectedSet = React16.useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
+  const rowClickHintId = React11.useId();
+  const selectedSet = React11.useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
   const selectedCount = allRowKeys.filter((key) => selectedSet.has(key)).length;
   const isAllSelected = allRowKeys.length > 0 && selectedCount === allRowKeys.length;
   const isSomeSelected = selectedCount > 0 && !isAllSelected;
@@ -2818,9 +2760,9 @@ var AlertModal = ({
   onClose
 }) => {
   const dismiss = onCancel ?? onClose;
-  const panelRef = React16.useRef(null);
-  const titleId = React16.useId();
-  const messageId = React16.useId();
+  const panelRef = React11.useRef(null);
+  const titleId = React11.useId();
+  const messageId = React11.useId();
   const [shouldRender, setShouldRender] = useState(isOpen);
   useFocusTrap(panelRef, isOpen);
   useOverlayEscape(isOpen, () => dismiss());
@@ -2844,7 +2786,7 @@ var AlertModal = ({
     immediate: reduced,
     config: OVERLAY_SPRING_CONFIG
   });
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     if (!shouldRender) return;
     lockBodyScroll();
     return unlockBodyScroll;
@@ -2927,10 +2869,7 @@ var LinearProgress = ({
         Array.from({ length: dotCount }, (_, i) => /* @__PURE__ */ jsx(
           "span",
           {
-            className: cn(
-              "linear_progress_step",
-              i <= clampedStep && "linear_progress_step_done"
-            ),
+            className: cn("linear_progress_step", i <= clampedStep && "linear_progress_step_done"),
             "aria-hidden": "true"
           },
           i
@@ -2954,7 +2893,7 @@ var Spinner = ({ size = 24, ariaLabel = "\uB85C\uB529 \uC911" }) => {
     }
   );
 };
-var ToastContext = React16.createContext(null);
+var ToastContext = React11.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: iconSize.md }),
   error: /* @__PURE__ */ jsx(XCircle, { size: iconSize.md }),
@@ -2963,9 +2902,9 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: iconSize.md })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [visible, setVisible] = React16.useState(true);
-  const closingRef = React16.useRef(false);
-  const rootRef = React16.useRef(null);
+  const [visible, setVisible] = React11.useState(true);
+  const closingRef = React11.useRef(false);
+  const rootRef = React11.useRef(null);
   const style = useSpringPresence({
     visible,
     from: "translateX(20px)",
@@ -2985,7 +2924,7 @@ var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
       onRemove(item.id);
     }
   });
-  const close = React16.useCallback(() => {
+  const close = React11.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setVisible(false);
@@ -3020,19 +2959,19 @@ var ToastProvider = ({
   closeAriaLabel = "\uB2EB\uAE30",
   regionLabel = "\uC54C\uB9BC"
 }) => {
-  const [toasts, setToasts] = React16.useState([]);
+  const [toasts, setToasts] = React11.useState([]);
   const isMounted = useIsMounted();
-  const addToast = React16.useCallback(
+  const addToast = React11.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React16.useCallback((id) => {
+  const removeToast = React11.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const contextValue = React16.useMemo(() => ({ addToast }), [addToast]);
+  const contextValue = React11.useMemo(() => ({ addToast }), [addToast]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: contextValue, children: [
     children,
     isMounted && createPortal(
@@ -3472,9 +3411,9 @@ var DatePicker = ({
   minDateSrFormat = "\uCD5C\uC18C \uB0A0\uC9DC: {date}",
   selectableRangeUntilTodaySrText = "\uC624\uB298\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5"
 }) => {
-  const groupId = React16.useId();
-  const constraintId = React16.useId();
-  const { todayYear, todayMonth, todayDay } = React16.useMemo(() => {
+  const groupId = React11.useId();
+  const constraintId = React11.useId();
+  const { todayYear, todayMonth, todayDay } = React11.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -3483,7 +3422,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React16.useMemo(() => {
+  const parsed = React11.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -3492,7 +3431,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React16.useMemo(() => {
+  const min = React11.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -3512,7 +3451,7 @@ var DatePicker = ({
       min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
     )
   );
-  const maxDay = React16.useMemo(() => {
+  const maxDay = React11.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -3520,28 +3459,28 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React16.useMemo(
+  const yearOptions = React11.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React16.useMemo(
+  const monthOptions = React11.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React16.useMemo(
+  const dayOptions = React11.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React16.useCallback(
+  const emit = React11.useCallback(
     (yy, mm, dd) => {
       const cb = onValueChange ?? onChange;
       if (mode === "year-month") {
@@ -3553,7 +3492,7 @@ var DatePicker = ({
     },
     [mode, onValueChange, onChange]
   );
-  const handleYearChange = React16.useCallback(
+  const handleYearChange = React11.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -3570,14 +3509,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React16.useCallback(
+  const handleMonthChange = React11.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React16.useCallback(
+  const handleDayChange = React11.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -3661,11 +3600,11 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React16.useId();
-  const helperId = React16.useId();
-  const inputRef = React16.useRef(null);
-  const [previewUrls, setPreviewUrls] = React16.useState([]);
-  const previewUrlsRef = React16.useRef([]);
+  const inputId = React11.useId();
+  const helperId = React11.useId();
+  const inputRef = React11.useRef(null);
+  const [previewUrls, setPreviewUrls] = React11.useState([]);
+  const previewUrlsRef = React11.useRef([]);
   const isPreviewVariant = variant === "preview";
   const showPreview = isPreviewVariant || preview;
   const handleChange = (e) => {
@@ -3706,7 +3645,7 @@ var FileInput = ({
     }
     onFiles?.(null);
   };
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     return () => {
       for (const url of previewUrlsRef.current) {
         URL.revokeObjectURL(url);
@@ -3744,14 +3683,7 @@ var FileInput = ({
         style: { width: previewSize, height: previewSize },
         children: hasImage ? (
           // biome-ignore lint/performance/noImgElement: framework-agnostic DS - host app should swap with next/image if needed
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: previewUrls[0],
-              alt: "",
-              className: "file_input_preview_image"
-            }
-          )
+          /* @__PURE__ */ jsx("img", { src: previewUrls[0], alt: "", className: "file_input_preview_image" })
         ) : /* @__PURE__ */ jsxs("span", { className: "file_input_preview_empty", children: [
           /* @__PURE__ */ jsx(Image, { size: iconSize.xl, "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "file_input_preview_empty_text", children: label })
@@ -3771,15 +3703,7 @@ var FileInput = ({
     supportingText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: supportingText }),
     !isPreviewVariant && previewUrls.length > 0 && /* @__PURE__ */ jsx("div", { className: "file_input_preview", children: previewUrls.map((url) => (
       // biome-ignore lint/performance/noImgElement: framework-agnostic DS - host app should swap with next/image if needed
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: url,
-          alt: "",
-          className: "file_input_preview_img"
-        },
-        url
-      )
+      /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "file_input_preview_img" }, url)
     )) })
   ] });
 };
@@ -4115,12 +4039,12 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React16.useRef([]);
-  const isTypingRef = React16.useRef(false);
-  React16.useEffect(() => {
+  const inputsRef = React11.useRef([]);
+  const isTypingRef = React11.useRef(false);
+  React11.useEffect(() => {
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
-  const digits = React16.useMemo(() => {
+  const digits = React11.useMemo(() => {
     const chars = value.split("").slice(0, length);
     while (chars.length < length) chars.push("");
     return chars;
@@ -4197,7 +4121,7 @@ var OtpInput = ({
     focusInput(nextIndex);
   };
   const rootClassName = cn("otp_input", className);
-  const supportingId = React16.useId();
+  const supportingId = React11.useId();
   return (
     // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force border/legend styles; role=group is the WAI-ARIA equivalent for OTP grouping
     /* @__PURE__ */ jsxs("div", { className: rootClassName, role: "group", "aria-label": ariaLabel, children: [
@@ -4241,9 +4165,9 @@ var OtpInput = ({
   );
 };
 OtpInput.displayName = "OtpInput";
-var RadioGroupContext = React16.createContext(null);
+var RadioGroupContext = React11.createContext(null);
 function useRadioGroupContext() {
-  return React16.useContext(RadioGroupContext);
+  return React11.useContext(RadioGroupContext);
 }
 var RadioGroup = ({
   value: controlledValue,
@@ -4261,21 +4185,21 @@ var RadioGroup = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React16.useState(defaultValue);
+  const [internalValue, setInternalValue] = React11.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const generatedName = React16.useId();
+  const generatedName = React11.useId();
   const name = nameProp ?? generatedName;
-  const idPrefix = React16.useId();
+  const idPrefix = React11.useId();
   const labelId = label ? `${idPrefix}-label` : void 0;
   const helperId = supportingText ? `${idPrefix}-help` : void 0;
-  const onChange = React16.useCallback(
+  const onChange = React11.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctx = React16.useMemo(
+  const ctx = React11.useMemo(
     () => ({ name, value, onChange, size, disabled }),
     [name, value, onChange, size, disabled]
   );
@@ -4384,9 +4308,7 @@ var Textarea = ({
   const helperId = supportingText ? `${inputId}-help` : void 0;
   const isControlled = value !== void 0;
   const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-  const [innerValue, setInnerValue] = useState(
-    () => applyTransform(value ?? defaultValue ?? "")
-  );
+  const [innerValue, setInnerValue] = useState(() => applyTransform(value ?? defaultValue ?? ""));
   const isComposingRef = useRef(false);
   const innerRef = useRef(null);
   const lastEmittedValueRef = useRef(innerValue);
@@ -4647,7 +4569,7 @@ var Toggle = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React16.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React11.useState(!!defaultChecked);
   const isOn = isControlled ? !!checked : innerChecked;
   const handleToggle = (e) => {
     props.onClick?.(e);
@@ -4737,7 +4659,7 @@ var Pagination = ({
   const emit = onPageChange ?? onChange;
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React16.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React11.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": navLabel, children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -4804,15 +4726,15 @@ var Drawer = ({
   className,
   ...props
 }) => {
-  const lastContentRef = React16.useRef({ children, title, footer });
+  const lastContentRef = React11.useRef({ children, title, footer });
   if (open) lastContentRef.current = { children, title, footer };
   const content = open ? { children, title, footer } : lastContentRef.current;
   const overlayDismissible = dismissible ?? closeOnOverlay;
   const escapeDismissible = dismissible ?? true;
-  const panelRef = React16.useRef(null);
-  const pressedOverlayRef = React16.useRef(false);
-  const titleId = React16.useId();
-  const [shouldRender, setShouldRender] = React16.useState(open);
+  const panelRef = React11.useRef(null);
+  const pressedOverlayRef = React11.useRef(false);
+  const titleId = React11.useId();
+  const [shouldRender, setShouldRender] = React11.useState(open);
   const reduced = useReducedMotion();
   const isMounted = useIsMounted();
   useFocusTrap(panelRef, open && isMounted);
@@ -4836,7 +4758,7 @@ var Drawer = ({
     immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     if (!open) return;
     lockBodyScroll();
     return unlockBodyScroll;
@@ -4876,16 +4798,7 @@ var Drawer = ({
               if (e.key !== "Escape") e.stopPropagation();
             },
             children: [
-              showCloseIcon && onClose && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "drawer_close",
-                  onClick: onClose,
-                  "aria-label": closeLabel,
-                  children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
-                }
-              ),
+              showCloseIcon && onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "drawer_close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" }) }),
               content.title && /* @__PURE__ */ jsx("div", { className: "drawer_header", children: /* @__PURE__ */ jsx("h2", { id: titleId, className: "drawer_title", children: content.title }) }),
               content.children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
               // `scrollable-region-focusable`). 다만 초기 포커스 대상에서는 제외한다 - 안쪽에
@@ -4919,15 +4832,15 @@ var Modal = ({
   onExited,
   ...props
 }) => {
-  const lastContentRef = React16.useRef({ children, title, description, footer });
+  const lastContentRef = React11.useRef({ children, title, description, footer });
   if (open) lastContentRef.current = { children, title, description, footer };
   const content = open ? { children, title, description, footer } : lastContentRef.current;
   const overlayDismissible = dismissible ?? closeOnOverlay;
   const escapeDismissible = dismissible ?? true;
-  const panelRef = React16.useRef(null);
-  const pressedOverlayRef = React16.useRef(false);
-  const titleId = React16.useId();
-  const [shouldRender, setShouldRender] = React16.useState(open);
+  const panelRef = React11.useRef(null);
+  const pressedOverlayRef = React11.useRef(false);
+  const titleId = React11.useId();
+  const [shouldRender, setShouldRender] = React11.useState(open);
   const isMounted = useIsMounted();
   useFocusTrap(panelRef, open && isMounted);
   useOverlayEscape(open && isMounted, () => {
@@ -4955,7 +4868,7 @@ var Modal = ({
     immediate: reduced,
     config: OVERLAY_SPRING_CONFIG
   });
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     if (!open) return;
     lockBodyScroll();
     return unlockBodyScroll;
@@ -5015,9 +4928,9 @@ var Modal = ({
     document.body
   );
 };
-var ThemeContext = React16.createContext(null);
+var ThemeContext = React11.createContext(null);
 var useTheme = () => {
-  const ctx = React16.useContext(ThemeContext);
+  const ctx = React11.useContext(ThemeContext);
   if (!ctx) {
     throw new Error(
       '[Bigtablet DS] useTheme\uB294 <ThemeProvider> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4.\n\n\uC571 \uCD5C\uC0C1\uB2E8\uC5D0 <ThemeProvider>\uB85C \uAC10\uC2F8\uC8FC\uC138\uC694:\n  <ThemeProvider mode="system">\n    <YourApp />\n  </ThemeProvider>'
@@ -5041,15 +4954,15 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React16.useState(defaultMode);
-  const [systemDark, setSystemDark] = React16.useState(false);
-  React16.useEffect(() => {
+  const [mode, setModeState] = React11.useState(defaultMode);
+  const [systemDark, setSystemDark] = React11.useState(false);
+  React11.useEffect(() => {
     setModeState(readStored(storageKey) ?? defaultMode);
     if (isClient) {
       setSystemDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
     }
   }, [storageKey, defaultMode]);
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSystemDark(e.matches);
@@ -5057,7 +4970,7 @@ var ThemeProvider = ({
     return () => mq.removeEventListener("change", handler);
   }, []);
   const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
-  React16.useEffect(() => {
+  React11.useEffect(() => {
     if (!isClient) return;
     const target = targetSelector ? document.querySelector(targetSelector) : document.documentElement;
     if (!target) return;
@@ -5067,7 +4980,7 @@ var ThemeProvider = ({
       target.setAttribute("data-theme", mode);
     }
   }, [mode, targetSelector]);
-  const setMode = React16.useCallback(
+  const setMode = React11.useCallback(
     (next) => {
       setModeState(next);
       if (storageKey && isClient) {
@@ -5079,7 +4992,7 @@ var ThemeProvider = ({
     },
     [storageKey]
   );
-  const value = React16.useMemo(
+  const value = React11.useMemo(
     () => ({ mode, resolved, setMode }),
     [mode, resolved, setMode]
   );
@@ -5149,12 +5062,7 @@ var Section = ({
     Tag,
     {
       ref,
-      className: cn(
-        "section",
-        `section_spacing_${spacing2}`,
-        `section_bg_${bg}`,
-        className
-      ),
+      className: cn("section", `section_spacing_${spacing2}`, `section_bg_${bg}`, className),
       ...props,
       children
     }

package/dist/styles/spacing/_index.scss

@@ -5,6 +5,7 @@ $spacing_3:  3px;
 $spacing_4:  4px;
 $spacing_6:  6px;
 $spacing_8:  8px;
+$spacing_10: 10px;
 $spacing_12: 12px;
 $spacing_16: 16px;
 $spacing_20: 20px;
@@ -12,3 +13,8 @@ $spacing_24: 24px;
 $spacing_32: 32px;
 $spacing_40: 40px;
 $spacing_48: 48px;
+// 레이아웃 리듬 - 컴포넌트 내부 여백이 아니라 Section 처럼 화면 단위 블록의 상하 여백에 쓴다.
+// 48 에서 스케일이 끝나 Section 이 raw 64/96/128 을 적고 있었다.
+$spacing_64: 64px;
+$spacing_96: 96px;
+$spacing_128: 128px;

package/dist/styles/typography/_index.scss

@@ -4,6 +4,9 @@ $font_family_primary: "Pretendard", sans-serif;
 
 // ── Base: Font size ───────────────────────────────────────────────────────────
 
+// 10px - 본문에는 쓰지 않는다. avatar xs(24px 원) 이니셜과 badge count 처럼 장식적인 숫자·글자
+// 전용이다. 그 자리에 12px 을 넣으면 16px 카운트 뱃지를 넘친다.
+$font_size_10: 10px;
 $font_size_12: 12px;
 $font_size_13: 13px;
 $font_size_14: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.14.2",
+	"version": "3.15.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",
@@ -50,6 +50,7 @@
 		"check:css-vars": "scripts/check-css-vars.sh",
 		"check:prose": "scripts/check-prose-headings.sh",
 		"check:defaults": "python3 scripts/check-prop-defaults.py",
+		"check:geometry": "python3 scripts/check-overlay-geometry.py",
 		"size": "size-limit",
 		"prepare": "husky"
 	},