ddingdong-design-system 0.3.5 → 0.3.7

package/dist/ddingdong-design-system.es.js

@@ -194,9 +194,9 @@ const ce = "-", Xe = (e) => {
     if (s.includes(L))
       continue;
     s.push(L);
-    const P = n(x, k);
-    for (let j = 0; j < P.length; ++j) {
-      const _ = P[j];
+    const G = n(x, k);
+    for (let j = 0; j < G.length; ++j) {
+      const _ = G[j];
       s.push(f + _);
     }
     i = u + (i.length > 0 ? " " + i : i);
@@ -237,7 +237,7 @@ function ct(e, ...r) {
 const b = (e) => {
   const r = (t) => t[e] || [];
   return r.isThemeGetter = !0, r;
-}, je = /^\[(?:([a-z-]+):)?(.+)\]$/i, dt = /^\d+\/\d+$/, ut = /* @__PURE__ */ new Set(["px", "full", "screen"]), pt = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, gt = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, mt = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, ht = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ft = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, S = (e) => R(e) || ut.has(e) || dt.test(e), z = (e) => V(e, "length", Nt), R = (e) => !!e && !Number.isNaN(Number(e)), ne = (e) => V(e, "number", R), W = (e) => !!e && Number.isInteger(Number(e)), bt = (e) => e.endsWith("%") && R(e.slice(0, -1)), p = (e) => je.test(e), A = (e) => pt.test(e), wt = /* @__PURE__ */ new Set(["length", "size", "percentage"]), xt = (e) => V(e, wt, Be), yt = (e) => V(e, "position", Be), vt = /* @__PURE__ */ new Set(["image", "url"]), Ct = (e) => V(e, vt, Et), kt = (e) => V(e, "", Lt), F = () => !0, V = (e, r, t) => {
+}, je = /^\[(?:([a-z-]+):)?(.+)\]$/i, dt = /^\d+\/\d+$/, ut = /* @__PURE__ */ new Set(["px", "full", "screen"]), pt = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, gt = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, mt = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, ht = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ft = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, S = (e) => R(e) || ut.has(e) || dt.test(e), z = (e) => V(e, "length", Nt), R = (e) => !!e && !Number.isNaN(Number(e)), ne = (e) => V(e, "number", R), F = (e) => !!e && Number.isInteger(Number(e)), bt = (e) => e.endsWith("%") && R(e.slice(0, -1)), p = (e) => je.test(e), A = (e) => pt.test(e), wt = /* @__PURE__ */ new Set(["length", "size", "percentage"]), xt = (e) => V(e, wt, Be), yt = (e) => V(e, "position", Be), vt = /* @__PURE__ */ new Set(["image", "url"]), Ct = (e) => V(e, vt, Et), kt = (e) => V(e, "", Lt), H = () => !0, V = (e, r, t) => {
   const o = je.exec(e);
   return o ? o[1] ? typeof r == "string" ? o[1] === r : r.has(o[1]) : t(o[2]) : !1;
 }, Nt = (e) => (
@@ -246,12 +246,12 @@ const b = (e) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   gt.test(e) && !mt.test(e)
 ), Be = () => !1, Lt = (e) => ht.test(e), Et = (e) => ft.test(e), Mt = () => {
-  const e = b("colors"), r = b("spacing"), t = b("blur"), o = b("brightness"), n = b("borderColor"), s = b("borderRadius"), a = b("borderSpacing"), i = b("borderWidth"), d = b("contrast"), u = b("grayscale"), m = b("hueRotate"), h = b("invert"), v = b("gap"), N = b("gradientColorStops"), k = b("gradientColorStopPositions"), x = b("inset"), g = b("margin"), f = b("opacity"), L = b("padding"), P = b("saturate"), j = b("scale"), _ = b("sepia"), me = b("skew"), he = b("space"), fe = b("translate"), ee = () => ["auto", "contain", "none"], te = () => ["auto", "hidden", "clip", "visible", "scroll"], re = () => ["auto", p, r], w = () => [p, r], be = () => ["", S, z], $ = () => ["auto", R, p], we = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], Z = () => ["solid", "dashed", "dotted", "double", "none"], xe = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], oe = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], G = () => ["", "0", p], ye = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], I = () => [R, p];
+  const e = b("colors"), r = b("spacing"), t = b("blur"), o = b("brightness"), n = b("borderColor"), s = b("borderRadius"), a = b("borderSpacing"), i = b("borderWidth"), d = b("contrast"), u = b("grayscale"), m = b("hueRotate"), h = b("invert"), v = b("gap"), N = b("gradientColorStops"), k = b("gradientColorStopPositions"), x = b("inset"), g = b("margin"), f = b("opacity"), L = b("padding"), G = b("saturate"), j = b("scale"), _ = b("sepia"), me = b("skew"), he = b("space"), fe = b("translate"), ee = () => ["auto", "contain", "none"], te = () => ["auto", "hidden", "clip", "visible", "scroll"], re = () => ["auto", p, r], w = () => [p, r], be = () => ["", S, z], $ = () => ["auto", R, p], we = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], Z = () => ["solid", "dashed", "dotted", "double", "none"], xe = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], oe = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], W = () => ["", "0", p], ye = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], I = () => [R, p];
   return {
     cacheSize: 500,
     separator: ":",
     theme: {
-      colors: [F],
+      colors: [H],
       spacing: [S, z],
       blur: ["none", "", A, p],
       brightness: I(),
@@ -260,9 +260,9 @@ const b = (e) => {
       borderSpacing: w(),
       borderWidth: be(),
       contrast: I(),
-      grayscale: G(),
+      grayscale: W(),
       hueRotate: I(),
-      invert: G(),
+      invert: W(),
       gap: w(),
       gradientColorStops: [e],
       gradientColorStopPositions: [bt, z],
@@ -272,7 +272,7 @@ const b = (e) => {
       padding: w(),
       saturate: I(),
       scale: I(),
-      sepia: G(),
+      sepia: W(),
       skew: I(),
       space: w(),
       translate: w()
@@ -491,7 +491,7 @@ const b = (e) => {
        * @see https://tailwindcss.com/docs/z-index
        */
       z: [{
-        z: ["auto", W, p]
+        z: ["auto", F, p]
       }],
       // Flexbox and Grid
       /**
@@ -527,28 +527,28 @@ const b = (e) => {
        * @see https://tailwindcss.com/docs/flex-grow
        */
       grow: [{
-        grow: G()
+        grow: W()
       }],
       /**
        * Flex Shrink
        * @see https://tailwindcss.com/docs/flex-shrink
        */
       shrink: [{
-        shrink: G()
+        shrink: W()
       }],
       /**
        * Order
        * @see https://tailwindcss.com/docs/order
        */
       order: [{
-        order: ["first", "last", "none", W, p]
+        order: ["first", "last", "none", F, p]
       }],
       /**
        * Grid Template Columns
        * @see https://tailwindcss.com/docs/grid-template-columns
        */
       "grid-cols": [{
-        "grid-cols": [F]
+        "grid-cols": [H]
       }],
       /**
        * Grid Column Start / End
@@ -556,7 +556,7 @@ const b = (e) => {
        */
       "col-start-end": [{
         col: ["auto", {
-          span: ["full", W, p]
+          span: ["full", F, p]
         }, p]
       }],
       /**
@@ -578,7 +578,7 @@ const b = (e) => {
        * @see https://tailwindcss.com/docs/grid-template-rows
        */
       "grid-rows": [{
-        "grid-rows": [F]
+        "grid-rows": [H]
       }],
       /**
        * Grid Row Start / End
@@ -586,7 +586,7 @@ const b = (e) => {
        */
       "row-start-end": [{
         row: ["auto", {
-          span: [W, p]
+          span: [F, p]
         }, p]
       }],
       /**
@@ -941,7 +941,7 @@ const b = (e) => {
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [F]
+        font: [H]
       }],
       /**
        * Font Variant Numeric
@@ -1626,7 +1626,7 @@ const b = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow-color
        */
       "shadow-color": [{
-        shadow: [F]
+        shadow: [H]
       }],
       /**
        * Opacity
@@ -1712,7 +1712,7 @@ const b = (e) => {
        * @see https://tailwindcss.com/docs/saturate
        */
       saturate: [{
-        saturate: [P]
+        saturate: [G]
       }],
       /**
        * Sepia
@@ -1783,7 +1783,7 @@ const b = (e) => {
        * @see https://tailwindcss.com/docs/backdrop-saturate
        */
       "backdrop-saturate": [{
-        "backdrop-saturate": [P]
+        "backdrop-saturate": [G]
       }],
       /**
        * Backdrop Sepia
@@ -1905,7 +1905,7 @@ const b = (e) => {
        * @see https://tailwindcss.com/docs/rotate
        */
       rotate: [{
-        rotate: [W, p]
+        rotate: [F, p]
       }],
       /**
        * Translate X
@@ -2339,12 +2339,12 @@ const b = (e) => {
   trash: Dt,
   write: Ut,
   loading: Ft
-}, Mr = Object.keys(Ve);
+}, Er = Object.keys(Ve);
 function E({ name: e, color: r = "gray", size: t = 25, ...o }) {
   const n = Ve[e];
   return /* @__PURE__ */ l(n, { width: `${t}px`, height: `${t}px`, style: { color: Re[r] }, ...o });
 }
-function Ir({
+function Mr({
   type: e = "single",
   className: r = "",
   children: t,
@@ -2370,7 +2370,7 @@ const U = {
     opacity: { duration: 0.1 }
   }
 }, qt = (e) => ["INPUT", "TEXTAREA", "A"].includes(e.tagName);
-function Sr({
+function Ir({
   trigger: e,
   isArrow: r = !0,
   value: t,
@@ -2433,7 +2433,7 @@ const Jt = {
   lg: { class: "size-18", width: 72, height: 72 },
   xl: { class: "size-20", width: 80, height: 80 }
 };
-function zr({ size: e = "lg", src: r, alt: t, className: o, ...n }) {
+function Sr({ size: e = "lg", src: r, alt: t, className: o, ...n }) {
   const { class: s, width: a, height: i } = Jt[e];
   return /* @__PURE__ */ l(
     "img",
@@ -2453,7 +2453,7 @@ const Kt = {
   negative: "bg-red-100 text-red-300",
   neutral: "bg-gray-100 text-gray-400"
 };
-function Ar({ variant: e = "neutral", text: r, ...t }) {
+function zr({ variant: e = "neutral", text: r, ...t }) {
   const o = Kt[e];
   return /* @__PURE__ */ l(
     "div",
@@ -2538,7 +2538,7 @@ const Le = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, Ee = Se, Q
     ]
   }
 );
-function Tr({
+function Ar({
   children: e,
   variant: r,
   color: t,
@@ -2619,7 +2619,7 @@ const Pe = X(null), de = () => {
     handleMouseLeave: N
   };
 };
-function jr({ className: e = "", children: r }) {
+function Tr({ className: e = "", children: r }) {
   const t = Yt();
   return /* @__PURE__ */ l(Pe.Provider, { value: t, children: /* @__PURE__ */ C(
     "div",
@@ -2637,7 +2637,7 @@ function jr({ className: e = "", children: r }) {
     }
   ) });
 }
-function Br({ children: e, className: r = "" }) {
+function jr({ children: e, className: r = "" }) {
   const { scrollContainerRef: t } = de();
   return /* @__PURE__ */ l(
     "div",
@@ -2651,7 +2651,7 @@ function Br({ children: e, className: r = "" }) {
     }
   );
 }
-function Or({ children: e, className: r = "" }) {
+function Br({ children: e, className: r = "" }) {
   return /* @__PURE__ */ l("div", { className: y("w-full min-w-full flex-shrink-0", r), children: e });
 }
 function Qt() {
@@ -2680,7 +2680,7 @@ function er() {
     }
   ) : null;
 }
-function Rr({
+function Or({
   as: e,
   className: r,
   children: t,
@@ -2723,7 +2723,7 @@ const tr = {
   wrap: "flex-wrap",
   "wrap-reverse": "flex-wrap-reverse"
 };
-function H({
+function P({
   as: e = "div",
   dir: r = "row",
   alignItems: t = "stretch",
@@ -2751,8 +2751,8 @@ function H({
     }
   );
 }
-function Vr({ left: e, right: r }) {
-  return /* @__PURE__ */ C(H, { dir: "row", justifyContent: "between", alignItems: "center", className: "w-full gap-2 md:gap-4", children: [
+function Rr({ left: e, right: r }) {
+  return /* @__PURE__ */ C(P, { dir: "row", justifyContent: "between", alignItems: "center", className: "w-full gap-2 md:gap-4", children: [
     /* @__PURE__ */ l("div", { className: "flex-1", children: e }),
     /* @__PURE__ */ l("div", { className: "flex-1", children: r })
   ] });
@@ -2771,7 +2771,7 @@ const se = {
   exit: { x: "100%" },
   transition: { type: "spring", damping: 30, stiffness: 260 }
 };
-function Pr({ isOpen: e, onClose: r, children: t }) {
+function Vr({ isOpen: e, onClose: r, children: t }) {
   return /* @__PURE__ */ C(ue, { isOpen: e, children: [
     /* @__PURE__ */ l(
       T.div,
@@ -2840,8 +2840,8 @@ const B = (e) => {
     return /* @__PURE__ */ l(ir, { variant: e, ...t });
   }
   return r;
-}, ar = B("Title1"), Gr = B("Title2"), lr = B("Title3"), Wr = B("Body1"), Fr = B("Body2"), cr = B("Body3"), Ge = B("Caption1");
-function Hr({ id: e, mode: r, ...t }) {
+}, ar = B("Title1"), Pr = B("Title2"), lr = B("Title3"), Gr = B("Body1"), Wr = B("Body2"), cr = B("Body3"), Ge = B("Caption1");
+function Fr({ id: e, mode: r, ...t }) {
   const o = le(), n = e || o;
   return /* @__PURE__ */ C(
     "label",
@@ -2849,7 +2849,7 @@ function Hr({ id: e, mode: r, ...t }) {
       className: "focus-within:bg-primary-50 block w-full cursor-pointer rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 md:py-3.5",
       htmlFor: n,
       children: [
-        /* @__PURE__ */ C(H, { alignItems: "center", children: [
+        /* @__PURE__ */ C(P, { alignItems: "center", children: [
           /* @__PURE__ */ l(E, { name: "file", size: 25, color: "gray" }),
           /* @__PURE__ */ l(cr, { className: "text-gray-400", weight: "medium", children: t.placeholder || (r === "single" ? "파일을 업로드해주세요" : "파일 여러개를 선택해주세요") })
         ] }),
@@ -2893,13 +2893,13 @@ function ur({
     }
   );
 }
-function _r({ value: e, onClickReset: r, ...t }) {
-  return /* @__PURE__ */ C(H, { gap: 8, alignItems: "center", className: "relative w-full", children: [
+function Hr({ value: e, onClickReset: r, ...t }) {
+  return /* @__PURE__ */ C(P, { gap: 8, alignItems: "center", className: "relative w-full", children: [
     /* @__PURE__ */ l(
       "input",
       {
         value: e,
-        className: "w-full rounded-xl border-none bg-white px-4 py-3 outline-1 outline-gray-200 focus:ring-4 focus:ring-blue-200 focus:outline-blue-500 md:py-3.5",
+        className: "w-full rounded-xl border-none bg-white px-4 py-3.5 outline-1 outline-gray-200 focus:ring-4 focus:ring-blue-200 focus:outline-blue-500",
         ...t
       }
     ),
@@ -2923,7 +2923,7 @@ const J = {
   exit: { opacity: 0 },
   transition: { duration: 0.3 }
 };
-function $r({ isOpen: e, closeModal: r, children: t, className: o }) {
+function _r({ isOpen: e, closeModal: r, children: t, className: o }) {
   const n = (s) => {
     s.target instanceof HTMLElement && s.target === s.currentTarget && r && r();
   };
@@ -2944,7 +2944,7 @@ function $r({ isOpen: e, closeModal: r, children: t, className: o }) {
 }
 function pr({ children: e }) {
   return /* @__PURE__ */ l(
-    H,
+    P,
     {
       role: "dialog",
       "aria-modal": "true",
@@ -2955,7 +2955,7 @@ function pr({ children: e }) {
     }
   );
 }
-function Zr({ title: e, size: r, onClick: t }) {
+function $r({ title: e, size: r, onClick: t }) {
   return /* @__PURE__ */ l(
     "button",
     {
@@ -2998,7 +2998,7 @@ function mr({ page: e, isActive: r, onClick: t }) {
     }
   );
 }
-function Dr({ currentPage: e, totalPages: r, onPageChange: t, className: o = "" }) {
+function Zr({ currentPage: e, totalPages: r, onPageChange: t, className: o = "" }) {
   const n = () => {
     e > 1 && t(e - 1);
   }, s = () => {
@@ -3039,12 +3039,12 @@ const We = X(null), Fe = () => {
   if (!e) throw new Error("error");
   return e;
 }, hr = Q(
-  "font-semibold text- cursor-pointer first:rounded-t-md last:rounded-b-md hover:bg-gray-50",
+  "font-semibold text- cursor-pointer first:rounded-t-md last:rounded-b-md hover:bg-gray-100",
   {
     variants: {
       size: {
         md: "px-3 py-1 text-sm",
-        lg: "px-5 py-2 md:py-2.5"
+        lg: "px-4 py-3.5"
       }
     },
     defaultVariants: {
@@ -3070,15 +3070,15 @@ function He({ name: e, size: r, className: t }) {
   );
 }
 function fr({ name: e }) {
-  return /* @__PURE__ */ l("div", { className: "border-b-2 border-gray-100 px-5 py-2 text-base text-gray-300 md:text-lg", children: e });
+  return /* @__PURE__ */ l("div", { className: "border-b-2 border-gray-100 px-4 py-3.5 text-lg text-gray-300", children: e });
 }
 const br = Q(
-  "absolute top-full left-0 z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-gray-200 bg-white font-semibold text-gray-400 shadow-lg",
+  "absolute z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-gray-200 bg-white font-semibold text-gray-400 shadow-lg",
   {
     variants: {
       size: {
         md: "text-sm min-w-24",
-        lg: "text-base md:text-lg"
+        lg: "md:text-lg min-w-64"
       }
     },
     defaultVariants: {
@@ -3091,23 +3091,25 @@ function pe({ children: e, size: r }) {
   return /* @__PURE__ */ l("div", { className: y(br({ size: r || t })), children: e });
 }
 const wr = {
-  md: "px-3 py-1 text-sm w-fit min-w-24",
-  lg: "px-5 py-1.5 md:py-2.5 min-w-64 md:w-72 text-base md:text-lg"
+  md: "px-3 py-1 text-sm min-w-24",
+  lg: "px-4 py-3.5 min-w-64 text-lg"
 };
 function ge({ selected: e, onClick: r, isOpen: t, size: o = "lg" }) {
   return /* @__PURE__ */ l(
-    "div",
+    P,
     {
+      alignItems: "center",
       onClick: r,
       className: y(
         wr[o],
-        "flex cursor-pointer items-center rounded-lg border border-gray-200 bg-white text-start font-semibold text-gray-400"
+        "w-full rounded-lg border border-gray-200 bg-white font-semibold text-gray-400"
       ),
       children: /* @__PURE__ */ C(
         "button",
         {
+          type: "button",
           className: y(
-            "flex w-full items-center justify-between rounded-lg align-middle hover:rounded-lg",
+            "flex w-full cursor-pointer items-center justify-between rounded-lg align-middle",
             t && "hover:rounded-b-none"
           ),
           children: [
@@ -3129,47 +3131,47 @@ function ge({ selected: e, onClick: r, isOpen: t, size: o = "lg" }) {
     }
   );
 }
-function _e({ value: e, onChange: r, size: t = "lg", children: o }) {
-  const [n, s] = M(!1), a = (i) => {
-    s(!1), r == null || r(i);
+function _e({ value: e, onChange: r, size: t = "lg", defaultValue: o, children: n }) {
+  const [s, a] = M(!1), i = (d) => {
+    a(!1), r == null || r(d);
   };
   return /* @__PURE__ */ l(
     We.Provider,
     {
       value: {
         selected: e,
-        onSelect: a,
+        onSelect: i,
         size: t
       },
-      children: /* @__PURE__ */ C("div", { className: "relative w-fit", children: [
+      children: /* @__PURE__ */ C("div", { className: "relative w-full", children: [
         /* @__PURE__ */ l(
           ge,
           {
-            selected: e,
-            onClick: () => s(!n),
+            selected: e || o,
+            onClick: () => a(!s),
             size: t,
-            isOpen: n
+            isOpen: s
           }
         ),
-        n && /* @__PURE__ */ l(pe, { children: o })
+        s && /* @__PURE__ */ l(pe, { children: n })
       ] })
     }
   );
 }
-const Ur = Object.assign(_e, {
+const Dr = Object.assign(_e, {
   Option: He,
   Button: ge,
   List: pe
-}), qr = Object.assign(_e, {
+}), Ur = Object.assign(_e, {
   Option: He,
   Select: ge,
   List: pe,
   Group: fr
 });
-function Jr({ className: e, ...r }) {
+function qr({ className: e, ...r }) {
   return /* @__PURE__ */ l("div", { className: y("w-full animate-pulse rounded-md bg-gray-200", e), ...r });
 }
-function Kr({ color: e = "primary", ...r }) {
+function Jr({ color: e = "primary", ...r }) {
   return /* @__PURE__ */ l(
     Ce.Root,
     {
@@ -3181,7 +3183,7 @@ function Kr({ color: e = "primary", ...r }) {
   );
 }
 const $e = X(void 0);
-function Xr({ children: e, defaultIndex: r = 0, ...t }) {
+function Kr({ children: e, defaultIndex: r = 0, ...t }) {
   const o = De(
     () => Ue.toArray(e).filter((a) => qe(a)).map((a) => a.props.label),
     [e]
@@ -3209,43 +3211,37 @@ function Xr({ children: e, defaultIndex: r = 0, ...t }) {
     e
   ] }) });
 }
-function Yr({ label: e, children: r, ...t }) {
+function Xr({ label: e, children: r, ...t }) {
   const o = Y($e), n = (o == null ? void 0 : o.activeLabel) === e;
   return /* @__PURE__ */ l("div", { className: `${!n && "hidden"}`, ...t, children: r });
 }
-const xr = {
-  gray: "bg-gray-50",
-  white: "bg-white"
-};
-function Qr({
+function Yr({
   value: e,
-  variant: r = "gray",
-  rows: t = 3,
-  showCounter: o = !1,
-  className: n,
-  ...s
+  rows: r = 3,
+  showCounter: t = !1,
+  className: o,
+  ...n
 }) {
-  return /* @__PURE__ */ C(H, { dir: "col", gap: 2, children: [
+  return /* @__PURE__ */ C(P, { dir: "col", gap: 2, children: [
     /* @__PURE__ */ l(
       "textarea",
       {
-        rows: t,
+        rows: r,
         className: y(
-          "focus:border-primary-100 w-full resize-none rounded-xl border-none px-4 py-3 text-gray-900 outline-1 outline-gray-200 transition-colors placeholder:text-gray-400 focus:border-1",
-          xr[r],
-          n
+          "w-full resize-none rounded-xl border-none bg-white px-4 py-3.5 text-gray-900 outline-1 outline-gray-200 transition-colors placeholder:text-gray-400 focus:ring-4 focus:ring-blue-200 focus:outline-blue-500",
+          o
         ),
-        ...s
+        ...n
       }
     ),
-    o && s.maxLength && /* @__PURE__ */ C(Ge, { weight: "normal", className: "text-right text-gray-500", children: [
+    t && n.maxLength && /* @__PURE__ */ C(Ge, { weight: "normal", className: "text-right text-gray-500", children: [
       e.length ?? 0,
       "/",
-      s.maxLength
+      n.maxLength
     ] })
   ] });
 }
-const yr = {
+const xr = {
   SPRING: {
     initial: { opacity: 0, scale: 0.6, y: 15 },
     animate: {
@@ -3300,7 +3296,7 @@ const yr = {
       transition: { duration: 0.15, ease: "easeIn" }
     }
   }
-}, vr = {
+}, yr = {
   primary: {
     bg: "bg-primary-300",
     text: "text-white"
@@ -3337,7 +3333,7 @@ const yr = {
     bg: "bg-black",
     text: "text-white"
   }
-}, Cr = () => {
+}, vr = () => {
   const [e, r] = M(!1), [t, o] = M(null), n = ie(null), s = () => r(!0), a = () => r(!1);
   return K(() => {
     if (n.current && e) {
@@ -3352,13 +3348,13 @@ const yr = {
     position: t
   };
 };
-function eo({
+function Qr({
   content: e,
   color: r = "gray",
   animationMode: t = "SPRING",
   children: o
 }) {
-  const n = le(), { open: s, ref: a, show: i, hide: d, position: u } = Cr(), m = vr[r], h = yr[t];
+  const n = le(), { open: s, ref: a, show: i, hide: d, position: u } = vr(), m = yr[r], h = xr[t];
   return /* @__PURE__ */ C(
     "div",
     {
@@ -3396,7 +3392,7 @@ function eo({
     }
   );
 }
-const to = () => {
+const eo = () => {
   const [e, r] = M(!1);
   return {
     isOpen: e,
@@ -3405,45 +3401,45 @@ const to = () => {
   };
 };
 export {
-  Ir as Accordion,
-  Sr as AccordionItem,
-  zr as Avatar,
-  Ar as Badge,
-  Wr as Body1,
-  Fr as Body2,
+  Mr as Accordion,
+  Ir as AccordionItem,
+  Sr as Avatar,
+  zr as Badge,
+  Gr as Body1,
+  Wr as Body2,
   cr as Body3,
-  Tr as Button,
+  Ar as Button,
   Ge as Caption1,
-  Rr as Card,
-  jr as Carousel,
-  Br as CarouselContent,
-  Or as CarouselItem,
-  Vr as DoubleButton,
-  Pr as Drawer,
-  Hr as FileUpload,
-  H as Flex,
-  qr as GroupingSelect,
+  Or as Card,
+  Tr as Carousel,
+  jr as CarouselContent,
+  Br as CarouselItem,
+  Rr as DoubleButton,
+  Vr as Drawer,
+  Fr as FileUpload,
+  P as Flex,
+  Ur as GroupingSelect,
   E as Icon,
   ur as IconButton,
   Ve as Icons,
-  _r as Input,
-  $r as Modal,
-  Zr as NavBack,
-  Dr as Pagination,
+  Hr as Input,
+  _r as Modal,
+  $r as NavBack,
+  Zr as Pagination,
   ue as Portal,
-  Ur as Select,
-  Jr as Skeleton,
-  Kr as Switch,
-  Yr as TabItem,
-  Xr as Tabs,
-  Qr as TextArea,
+  Dr as Select,
+  qr as Skeleton,
+  Jr as Switch,
+  Xr as TabItem,
+  Kr as Tabs,
+  Yr as TextArea,
   ar as Title1,
-  Gr as Title2,
+  Pr as Title2,
   lr as Title3,
-  eo as Tooltip,
+  Qr as Tooltip,
   y as cn,
   O as colors,
-  Mr as iconNames,
-  to as usePortal
+  Er as iconNames,
+  eo as usePortal
 };
 //# sourceMappingURL=ddingdong-design-system.es.js.map