@bestow-ui/react 1.6.0 → 1.7.0

package/dist/shared.js

@@ -4,15 +4,20 @@ import {
   createTheme,
   cx,
   dateRangePresets,
+  field,
+  fieldFullWidth,
   focusField,
+  helperText,
   kakaoPostcodeProvider,
+  label,
   parseISODate,
   presetRange,
+  requiredMark,
   themeClass,
   toISODate,
   vars,
   visuallyHidden
-} from "./chunk-NKLDAXUR.js";
+} from "./chunk-YYLDXZWR.js";
 
 // src/theme/color.ts
 import { darkColors, lightColors, palette } from "@bestow-ui/tokens";
@@ -223,6 +228,12 @@ var en = {
   businessNumber: "Business registration number",
   businessNumberInvalid: "This business registration number is not valid. Please check it again.",
   businessNumberIncomplete: "Enter all 10 digits.",
+  residentNumber: "Resident registration number",
+  residentNumberFront: "First 6 digits",
+  residentNumberBack: "Last 7 digits",
+  residentNumberBackFirst: "First digit of the second part",
+  residentNumberInvalid: "This number is not valid. Check the date of birth and the first digit of the second part.",
+  residentNumberIncomplete: (digits) => `Enter all ${digits} digits.`,
   amount: "Amount",
   currencyUnit: "KRW",
   address: "Address",
@@ -259,6 +270,36 @@ import {
   formatPhoneNumber,
   isValidBusinessNumber
 } from "@bestow-ui/korean-utils";
+import {
+  formatResidentNumber,
+  isValidResidentNumber,
+  maskCardNumber,
+  maskDigits,
+  maskName,
+  maskPhoneNumber,
+  maskResidentNumber,
+  parseResidentNumber
+} from "@bestow-ui/korean-utils";
+
+// src/utils/responsive.ts
+var media = {
+  sm: "(min-width: 40em)",
+  md: "(min-width: 48em)",
+  lg: "(min-width: 64em)",
+  xl: "(min-width: 80em)"
+};
+var keys = ["base", "sm", "md", "lg", "xl"];
+var isResponsiveObject = (value2) => typeof value2 === "object" && value2 !== null;
+function responsiveVars(out, name, value2, toCss) {
+  if (value2 === void 0) return;
+  const values = isResponsiveObject(value2) ? value2 : { base: value2 };
+  let current;
+  for (const key of keys) {
+    current = values[key] ?? current;
+    if (current !== void 0) out[`--bestow-${name}-${key}`] = toCss(current);
+  }
+}
+var spaceVar = (key) => `var(--bestow-space-${key})`;
 
 // src/components/AgreementGroup/agreements.ts
 function hasAllRequiredAgreements(items, value2) {
@@ -270,8 +311,8 @@ import { forwardRef } from "react";
 
 // src/components/Badge/Badge.css.ts
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var badge = /* @__PURE__ */ _7a468({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb", warning: "_1295cfnc" }, size: { sm: "_1295cfnd", md: "_1295cfne", lg: "_1295cfnf" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
-var icon = "_1295cfng";
+var badge = /* @__PURE__ */ _7a468({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb", warning: "_1295cfnc", info: "_1295cfnd" }, size: { sm: "_1295cfne", md: "_1295cfnf", lg: "_1295cfng" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
+var icon = "_1295cfnh";
 
 // src/components/Badge/Badge.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -307,23 +348,36 @@ var CardFooter = /* @__PURE__ */ forwardRef2(function CardFooter2({ className, .
   return /* @__PURE__ */ jsx2("div", { ref, className: cx(footer, className), ...rest });
 });
 
+// src/components/Container/Container.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/components/Container/Container.css.ts
+import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
+var container = /* @__PURE__ */ _7a4683({ defaultClassName: "b404nn0", variantClassNames: { size: { sm: "b404nn1", md: "b404nn2", lg: "b404nn3", xl: "b404nn4", full: "b404nn5" }, flush: { true: "b404nn6" } }, defaultVariants: { size: "lg" }, compoundVariants: [] });
+
+// src/components/Container/Container.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Container = /* @__PURE__ */ forwardRef3(function Container2({ as: Component = "div", size, flush, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx3(Component, { ref, className: cx(container({ size, flush }), className), ...rest });
+});
+
 // src/components/DescriptionList/DescriptionList.tsx
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 
 // src/components/DescriptionList/DescriptionList.css.ts
-import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
 var description = "_14g0ot47";
-var item = /* @__PURE__ */ _7a4683({ defaultClassName: "_14g0ot42", variantClassNames: { layout: { horizontal: "_14g0ot43", vertical: "_14g0ot44" }, divided: { true: "_14g0ot45" } }, defaultVariants: { layout: "horizontal" }, compoundVariants: [] });
+var item = /* @__PURE__ */ _7a4684({ defaultClassName: "_14g0ot42", variantClassNames: { layout: { horizontal: "_14g0ot43", vertical: "_14g0ot44" }, divided: { true: "_14g0ot45" } }, defaultVariants: { layout: "horizontal" }, compoundVariants: [] });
 var root = "_14g0ot41";
 var term = "_14g0ot46";
 var termWidth = "var(--_14g0ot40)";
 
 // src/components/DescriptionList/DescriptionList.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var DescriptionList = /* @__PURE__ */ forwardRef3(
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var DescriptionList = /* @__PURE__ */ forwardRef4(
   function DescriptionList2({ items, layout = "horizontal", termWidth: termWidth2, divided, className, style, ...rest }, ref) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       "dl",
       {
         ref,
@@ -331,8 +385,8 @@ var DescriptionList = /* @__PURE__ */ forwardRef3(
         style: termWidth2 ? { ...assignInlineVars({ [termWidth]: termWidth2 }), ...style } : style,
         ...rest,
         children: items.map((item2, index) => /* @__PURE__ */ jsxs2("div", { className: item({ layout, divided }), children: [
-          /* @__PURE__ */ jsx3("dt", { className: term, children: item2.term }),
-          /* @__PURE__ */ jsx3("dd", { className: description, children: item2.description })
+          /* @__PURE__ */ jsx4("dt", { className: term, children: item2.term }),
+          /* @__PURE__ */ jsx4("dd", { className: description, children: item2.description })
         ] }, index))
       }
     );
@@ -340,47 +394,101 @@ var DescriptionList = /* @__PURE__ */ forwardRef3(
 );
 
 // src/components/Divider/Divider.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 
 // src/components/Divider/Divider.css.ts
-import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
-var divider = /* @__PURE__ */ _7a4684({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
+import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
+var divider = /* @__PURE__ */ _7a4685({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
 var labeled = "_1t3gq8v3";
 var line = "_1t3gq8v4";
 
 // src/components/Divider/Divider.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var Divider = /* @__PURE__ */ forwardRef4(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Divider = /* @__PURE__ */ forwardRef5(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
   if (children && orientation === "horizontal") {
     return /* @__PURE__ */ jsxs3("div", { ref, className: cx(labeled, className), ...rest, children: [
-      /* @__PURE__ */ jsx4("span", { className: line, "aria-hidden": true }),
+      /* @__PURE__ */ jsx5("span", { className: line, "aria-hidden": true }),
       children,
-      /* @__PURE__ */ jsx4("span", { className: line, "aria-hidden": true })
+      /* @__PURE__ */ jsx5("span", { className: line, "aria-hidden": true })
     ] });
   }
   const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
-  return /* @__PURE__ */ jsx4("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
+  return /* @__PURE__ */ jsx5("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
+});
+
+// src/components/FormField/FormField.tsx
+import { forwardRef as forwardRef6, useId } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var FormField = /* @__PURE__ */ forwardRef6(function FormField2({ label: label3, helperText: helperText2, error, required, id, fullWidth, className, children, ...rest }, ref) {
+  const generatedId = useId();
+  const controlId = id ?? generatedId;
+  const labelId = label3 ? `${controlId}-label` : void 0;
+  const helperId = helperText2 ? `${controlId}-helper` : void 0;
+  return /* @__PURE__ */ jsxs4("div", { ref, className: cx(field, fullWidth && fieldFullWidth, className), ...rest, children: [
+    label3 && /* @__PURE__ */ jsxs4("label", { id: labelId, htmlFor: controlId, className: label, children: [
+      label3,
+      required && /* @__PURE__ */ jsx6("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    children(
+      {
+        id: controlId,
+        "aria-describedby": helperId,
+        "aria-invalid": error || void 0,
+        "aria-required": required || void 0
+      },
+      { labelId, helperId }
+    ),
+    helperText2 && /* @__PURE__ */ jsx6("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+  ] });
+});
+
+// src/components/Grid/Grid.tsx
+import { forwardRef as forwardRef7 } from "react";
+
+// src/components/Grid/Grid.css.ts
+var columns = "_1tylv9m1";
+var grid = "_1tylv9m0";
+var responsiveGap = "iarbla0";
+
+// src/components/Grid/Grid.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var repeatColumns = (count) => `repeat(${count}, minmax(0, 1fr))`;
+var Grid = /* @__PURE__ */ forwardRef7(function Grid2({ as: Component = "div", columns: columns2, minItemWidth, gap, className, style, ...rest }, ref) {
+  const responsive = {};
+  if (minItemWidth)
+    responsive["--bestow-grid-columns-base"] = `repeat(auto-fill, minmax(min(100%, ${minItemWidth}), 1fr))`;
+  else responsiveVars(responsive, "grid-columns", columns2, repeatColumns);
+  responsiveVars(responsive, "gap", gap, spaceVar);
+  return /* @__PURE__ */ jsx7(
+    Component,
+    {
+      ref,
+      className: cx(grid, columns, gap !== void 0 && responsiveGap, className),
+      style: { ...responsive, ...style },
+      ...rest
+    }
+  );
 });
 
 // src/components/Progress/Progress.tsx
-import { forwardRef as forwardRef5, useId } from "react";
+import { forwardRef as forwardRef8, useId as useId2 } from "react";
 
 // src/components/Progress/Progress.css.ts
-import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
 var header2 = "_1tvkq001";
-var indicator = /* @__PURE__ */ _7a4685({ defaultClassName: "_1tvkq008", variantClassNames: { color: { primary: "_1tvkq009", neutral: "_1tvkq00a", success: "_1tvkq00b", warning: "_1tvkq00c", danger: "_1tvkq00d" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
-var label = "_1tvkq002";
+var indicator = /* @__PURE__ */ _7a4686({ defaultClassName: "_1tvkq008", variantClassNames: { color: { primary: "_1tvkq009", neutral: "_1tvkq00a", success: "_1tvkq00b", warning: "_1tvkq00c", danger: "_1tvkq00d" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
+var label2 = "_1tvkq002";
 var root2 = "_1tvkq000";
-var track = /* @__PURE__ */ _7a4685({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var track = /* @__PURE__ */ _7a4686({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var value = "_1tvkq003";
 
 // src/components/Progress/Progress.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultFormat = (value2, max) => `${Math.round(value2 / max * 100)}%`;
-var Progress = /* @__PURE__ */ forwardRef5(function Progress2({
+var Progress = /* @__PURE__ */ forwardRef8(function Progress2({
   value: value2,
   max = 100,
-  label: label2,
+  label: label3,
   "aria-label": ariaLabel,
   showValue,
   formatValue = defaultFormat,
@@ -389,28 +497,28 @@ var Progress = /* @__PURE__ */ forwardRef5(function Progress2({
   className,
   ...rest
 }, ref) {
-  const labelId = useId();
+  const labelId = useId2();
   const isIndeterminate = value2 === void 0 || value2 === null;
   const safeMax = max > 0 ? max : 100;
   const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value2));
   const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
-  return /* @__PURE__ */ jsxs4("div", { ref, className: cx(root2, className), ...rest, children: [
-    (label2 || showValue && valueText) && /* @__PURE__ */ jsxs4("div", { className: header2, children: [
-      label2 && /* @__PURE__ */ jsx5("span", { id: labelId, className: label, children: label2 }),
-      showValue && valueText && /* @__PURE__ */ jsx5("span", { className: value, "aria-hidden": true, children: valueText })
+  return /* @__PURE__ */ jsxs5("div", { ref, className: cx(root2, className), ...rest, children: [
+    (label3 || showValue && valueText) && /* @__PURE__ */ jsxs5("div", { className: header2, children: [
+      label3 && /* @__PURE__ */ jsx8("span", { id: labelId, className: label2, children: label3 }),
+      showValue && valueText && /* @__PURE__ */ jsx8("span", { className: value, "aria-hidden": true, children: valueText })
     ] }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         role: "progressbar",
-        "aria-labelledby": label2 ? labelId : void 0,
-        "aria-label": label2 ? void 0 : ariaLabel,
+        "aria-labelledby": label3 ? labelId : void 0,
+        "aria-label": label3 ? void 0 : ariaLabel,
         "aria-valuemin": 0,
         "aria-valuemax": safeMax,
         "aria-valuenow": isIndeterminate ? void 0 : clamped,
         "aria-valuetext": valueText,
         className: track({ size }),
-        children: /* @__PURE__ */ jsx5(
+        children: /* @__PURE__ */ jsx8(
           "div",
           {
             className: indicator({ color }),
@@ -424,27 +532,65 @@ var Progress = /* @__PURE__ */ forwardRef5(function Progress2({
 });
 
 // src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 
 // src/components/Stack/Stack.css.ts
-import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
-var stack = /* @__PURE__ */ _7a4686({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
+import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
+var responsiveAlign = "_1jz9hj9t";
+var responsiveDirection = "_1jz9hj9s";
+var responsiveGap2 = "iarbla0";
+var responsiveJustify = "_1jz9hj9u";
+var stack = /* @__PURE__ */ _7a4687({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/Stack/Stack.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Stack = /* @__PURE__ */ forwardRef6(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx6(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
+import { jsx as jsx9 } from "react/jsx-runtime";
+var flexValues = {
+  start: "flex-start",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+var flexValue = (value2) => flexValues[value2] ?? value2;
+var responsiveProps = [
+  ["direction", "stack-direction", String, responsiveDirection],
+  ["gap", "gap", spaceVar, responsiveGap2],
+  ["align", "stack-align", flexValue, responsiveAlign],
+  ["justify", "stack-justify", flexValue, responsiveJustify]
+];
+var Stack = /* @__PURE__ */ forwardRef9(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, style, ...rest }, ref) {
+  const props = { direction: direction ?? "column", gap, align, justify };
+  const variants = { wrap };
+  const classes = [];
+  const cssVars = {};
+  for (const [key, name, toCss, responsiveClass] of responsiveProps) {
+    const value2 = props[key];
+    if (!isResponsiveObject(value2)) variants[key] = value2;
+    else {
+      responsiveVars(cssVars, name, key === "direction" ? { base: "column", ...value2 } : value2, toCss);
+      classes.push(responsiveClass);
+    }
+  }
+  return /* @__PURE__ */ jsx9(
+    Component,
+    {
+      ref,
+      className: cx(stack(variants), ...classes, className),
+      style: classes.length ? { ...cssVars, ...style } : style,
+      ...rest
+    }
+  );
 });
 
 // src/components/Typography/Typography.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 
 // src/components/Typography/Typography.css.ts
-import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
-var typography = /* @__PURE__ */ _7a4687({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", warning: "kioliog", inherit: "kiolioh" }, weight: { regular: "kiolioi", medium: "kiolioj", semibold: "kioliok", bold: "kioliol" }, align: { start: "kioliom", center: "kiolion", end: "kiolioo" }, truncate: { true: "kioliop" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
+import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
+var typography = /* @__PURE__ */ _7a4688({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", warning: "kioliog", inherit: "kiolioh" }, weight: { regular: "kiolioi", medium: "kiolioj", semibold: "kioliok", bold: "kioliol" }, align: { start: "kioliom", center: "kiolion", end: "kiolioo" }, truncate: { true: "kioliop" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
 
 // src/components/Typography/Typography.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -456,9 +602,9 @@ var defaultElement = {
   "body-sm": "p",
   caption: "span"
 };
-var Typography = /* @__PURE__ */ forwardRef7(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
+var Typography = /* @__PURE__ */ forwardRef10(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
   const Component = as ?? defaultElement[variant];
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     Component,
     {
       ref,
@@ -469,10 +615,10 @@ var Typography = /* @__PURE__ */ forwardRef7(function Typography2({ variant = "b
 });
 
 // src/components/VisuallyHidden/VisuallyHidden.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var VisuallyHidden = /* @__PURE__ */ forwardRef8(function VisuallyHidden2({ as: Component = "span", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx8(Component, { ref, className: cx(visuallyHidden, className), ...rest });
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var VisuallyHidden = /* @__PURE__ */ forwardRef11(function VisuallyHidden2({ as: Component = "span", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx11(Component, { ref, className: cx(visuallyHidden, className), ...rest });
 });
 export {
   Badge,
@@ -480,8 +626,11 @@ export {
   CardBody,
   CardFooter,
   CardHeader,
+  Container,
   DescriptionList,
   Divider,
+  FormField,
+  Grid,
   Progress,
   Skeleton,
   Stack,
@@ -498,10 +647,19 @@ export {
   formatKoreanAmount,
   formatKoreanDate,
   formatPhoneNumber,
+  formatResidentNumber,
   hasAllRequiredAgreements,
   isValidBusinessNumber,
+  isValidResidentNumber,
   kakaoPostcodeProvider,
+  maskCardNumber,
+  maskDigits,
+  maskName,
+  maskPhoneNumber,
+  maskResidentNumber,
+  media,
   parseISODate,
+  parseResidentNumber,
   presetRange,
   strongInputBorders,
   themeClass,