@sendoutcards/quantum-design-ui 2.0.3 → 2.1.0

package/dist/index.d.ts

@@ -136,10 +136,11 @@ export declare type AnchorProps = {
     title?: string;
     size?: SizeType;
     color?: TextColor;
+    style?: default_2.CSSProperties;
     isDecorated?: boolean;
     target?: '_blank' | '_self' | '_parent' | '_top';
     shouldDownload?: boolean;
-} & HOCBaseProps & HOCMotionProps;
+} & HOCBaseProps & Omit<HOCMotionProps, 'style'>;
 
 export declare const AnimatedCheckMark: FC<AnimatedCheckMarkProps>;
 

package/dist/index.js

@@ -12918,10 +12918,10 @@ import './index.css';const A = (o) => {
     top: _,
     bottom: R,
     left: T,
-    right: W,
+    right: D,
     justifyContent: U,
     alignContent: V,
-    alignItems: D,
+    alignItems: W,
     flexDirection: O,
     flexGrow: J,
     flexShrink: Z,
@@ -12966,10 +12966,10 @@ import './index.css';const A = (o) => {
     top: _,
     bottom: R,
     left: T,
-    right: W,
+    right: D,
     justifyContent: U,
     alignContent: V,
-    alignItems: D,
+    alignItems: W,
     flexDirection: O,
     flexGrow: J,
     flexShrink: Z,
@@ -13121,10 +13121,10 @@ import './index.css';const A = (o) => {
     position: _,
     top: R,
     bottom: T,
-    left: W,
+    left: D,
     right: U,
     justifyContent: V,
-    alignContent: D,
+    alignContent: W,
     alignItems: O,
     flexDirection: J,
     flexGrow: Z,
@@ -13167,10 +13167,10 @@ import './index.css';const A = (o) => {
     z && G("minWidth", z, t.hocs.spacing),
     R && G("top", R, t.hocs.spacing),
     T && G("bottom", T, t.hocs.spacing),
-    W && G("left", W, t.hocs.spacing),
+    D && G("left", D, t.hocs.spacing),
     U && G("right", U, t.hocs.spacing),
     V && G("justifyContent", V),
-    D && G("alignContent", D),
+    W && G("alignContent", W),
     O && G("alignItems", O),
     J && G("flexDirection", J),
     Z && G("flexGrow", Z),
@@ -13323,13 +13323,13 @@ ${u.join(`
     ...z
   } = o, { text: _ } = X(), { width: R } = Lo(), T = Fe(
     (V) => {
-      const D = _.types[V];
+      const W = _.types[V];
       return {
-        color: a ? _.colors[a] : D.color,
-        fontSize: D.size,
-        fontWeight: p ? _.weights[p] : D.fontWeight,
-        lineHeight: v ?? D.lineHeight,
-        fontFamily: D.fontFamily,
+        color: a ? _.colors[a] : W.color,
+        fontSize: W.size,
+        fontWeight: p ? _.weights[p] : W.fontWeight,
+        lineHeight: v ?? W.lineHeight,
+        fontFamily: W.fontFamily,
         margin: 0,
         textAlign: n === "left" ? "left" : n === "center" ? "center" : "right",
         fontStyle: l ? "italic" : "normal",
@@ -13349,7 +13349,7 @@ ${u.join(`
       F,
       M
     ]
-  ), W = Fe(
+  ), D = Fe(
     (V) => {
       const O = { ...T(V), ...H };
       switch (V) {
@@ -13373,8 +13373,8 @@ ${u.join(`
     },
     [T, i, r, H, z]
   ), U = N(
-    () => mh(t, W, R),
-    [R, W, t]
+    () => mh(t, D, R),
+    [R, D, t]
   );
   return /* @__PURE__ */ e(le, { children: u || s ? /* @__PURE__ */ e(B, { inset: u, outset: s, children: U }) : U });
 }), Jo = (o, t) => t[o], yh = (o) => Jo(o, {
@@ -13432,7 +13432,15 @@ ${u.join(`
       style: z,
       className: R,
       ...M,
-      children: /* @__PURE__ */ e(I, { type: O1(r), color: a, children: o.title || o.children })
+      children: /* @__PURE__ */ e(
+        I,
+        {
+          type: O1(r),
+          color: a,
+          style: v,
+          children: o.title || o.children
+        }
+      )
     }
   );
 }), Ie = ie.memo((o) => {
@@ -14141,7 +14149,7 @@ ${u.join(`
   fontWeight: z,
   boxShadow: _ = !1
 }) => {
-  const R = X(), { buttons: T } = R, W = () => p || (d && v ? v : t === "shadow" ? "primaryBody" : t === "smoke" ? T.smoke.fontColor : d ? vh(t, {
+  const R = X(), { buttons: T } = R, D = () => p || (d && v ? v : t === "shadow" ? "primaryBody" : t === "smoke" ? T.smoke.fontColor : d ? vh(t, {
     primary: "primaryBrand",
     secondary: "secondaryBrand",
     danger: "danger",
@@ -14150,7 +14158,7 @@ ${u.join(`
     shadow: "inverseBody",
     accent: "accent",
     smoke: "primaryBody"
-  }) : "inverseBody"), [U, V] = q(!1), D = T[t];
+  }) : "inverseBody"), [U, V] = q(!1), W = T[t];
   return /* @__PURE__ */ c(
     B,
     {
@@ -14186,7 +14194,7 @@ ${u.join(`
             onClick: s ? (O) => s(O) : () => typeof r != "string" && (r == null ? void 0 : r()),
             style: Bh(
               t,
-              D,
+              W,
               R,
               a,
               d,
@@ -14204,7 +14212,7 @@ ${u.join(`
                 justifyContent: "space-around",
                 alignItems: "center",
                 style: Fh(t, R, a, z),
-                color: W(),
+                color: D(),
                 children: [
                   H && /* @__PURE__ */ e(
                     $,
@@ -14215,7 +14223,7 @@ ${u.join(`
                       children: /* @__PURE__ */ e(
                         P,
                         {
-                          primaryColor: H.fill ?? W(),
+                          primaryColor: H.fill ?? D(),
                           size: a === "large" || a === "xLarge" ? "medium" : a,
                           name: H.name
                         }
@@ -14859,9 +14867,9 @@ ${u.join(`
   outset: R
 }) => {
   var nr;
-  const [T, W] = q([]), [, U] = q(!1), V = Te(null), [D, O] = q(
+  const [T, D] = q([]), [, U] = q(!1), V = Te(null), [W, O] = q(
     ((nr = V.current) == null ? void 0 : nr.offsetHeight) || 0
-  ), { device: J } = Hr(), Z = J === "small" || J === "xSmall", { sheet: j } = X(), { height: ae } = Lo(), me = ae - D <= 0, Ee = {
+  ), { device: J } = Hr(), Z = J === "small" || J === "xSmall", { sheet: j } = X(), { height: ae } = Lo(), me = ae - W <= 0, Ee = {
     visible: {
       scale: 1,
       opacity: 1,
@@ -14884,24 +14892,24 @@ ${u.join(`
     }
   }, ue = Fe(
     (de) => {
-      const ze = ae - D;
+      const ze = ae - W;
       return ze >= 0 ? de : de < Math.abs(ze) ? Math.abs(ze) : de;
     },
-    [D, ae]
+    [W, ae]
   ), se = Fe(
     (de) => {
       de > 100 && (de = 100);
-      const ze = D * (de / 100), Ke = D - ze;
+      const ze = W * (de / 100), Ke = W - ze;
       return ue(Ke);
     },
-    [D, ue]
-  ), ne = ae - D < 0 ? Math.abs(ae - D) : 0, K = (de) => typeof de == "string" ? ce !== void 0 ? se(ce.percentage) : ne : typeof de == "number" && s ? se(s[de]) : ne, ce = T.find(
+    [W, ue]
+  ), ne = ae - W < 0 ? Math.abs(ae - W) : 0, K = (de) => typeof de == "string" ? ce !== void 0 ? se(ce.percentage) : ne : typeof de == "number" && s ? se(s[de]) : ne, ce = T.find(
     (de) => de.name === M ? M : u
     // TODO remove ternary when initialSnapPoint gets removed
-  ), Me = K(M || u), Be = $o(o ? ne : ae), o1 = [Me, D], X1 = so(Be, o1, [0, D]), We = so(Be, o1, [1, 0]), _1 = (de, ze) => de.reduce((Ke, Ne) => Math.abs(Ke - ze) < Math.abs(Ne - ze) ? Ke : Ne), Y1 = (de) => de instanceof HTMLElement;
+  ), Me = K(M || u), Be = $o(o ? ne : ae), o1 = [Me, W], X1 = so(Be, o1, [0, W]), We = so(Be, o1, [1, 0]), _1 = (de, ze) => de.reduce((Ke, Ne) => Math.abs(Ke - ze) < Math.abs(Ne - ze) ? Ke : Ne), Y1 = (de) => de instanceof HTMLElement;
   et(() => {
     var Ke;
-    if (V.current && D !== ((Ke = V.current) == null ? void 0 : Ke.offsetHeight) && O(V.current.offsetHeight), !V.current)
+    if (V.current && W !== ((Ke = V.current) == null ? void 0 : Ke.offsetHeight) && O(V.current.offsetHeight), !V.current)
       return;
     const de = V.current, ze = Array.from(
       de.getElementsByClassName("snapPoint")
@@ -14909,8 +14917,8 @@ ${u.join(`
       percentage: Ne.offsetTop / de.offsetHeight * 100,
       name: Ne.getAttribute("data-name")
     }));
-    Pt(ze, T) || W(ze);
-  }, [D, T, l, t]), Re(() => {
+    Pt(ze, T) || D(ze);
+  }, [W, T, l, t]), Re(() => {
     Z && Be.set(0);
   }, [Be, Z]);
   const R1 = Fe(
@@ -14939,20 +14947,20 @@ ${u.join(`
             (Co) => se(Co)
           ),
           Be.get()
-        ) : Be.get() / D > 0.4 ? D : ne;
-        P1(Ne, D), Dr(Be, Ne, {
+        ) : Be.get() / W > 0.4 ? W : ne;
+        P1(Ne, W), Dr(Be, Ne, {
           type: "spring",
           stiffness: 300,
           damping: 30,
           mass: 0.2
-        }), Ne >= D && (n == null || n(!1));
-        const De = ae - D;
+        }), Ne >= W && (n == null || n(!1));
+        const De = ae - W;
         De < 0 && Ne <= Math.abs(De) ? U(!0) : U(!1);
       }
     },
     [
       ae,
-      D,
+      W,
       se,
       n,
       s,
@@ -15093,11 +15101,11 @@ ${u.join(`
                       },
                       inset: _,
                       height: {
-                        xSmall: `calc(100vh - (${D - Me}px) + 48px)`,
+                        xSmall: `calc(100vh - (${W - Me}px) + 48px)`,
                         medium: "unset"
                       },
                       maxHeight: {
-                        medium: `${D}px`
+                        medium: `${W}px`
                       },
                       position: "relative",
                       zIndex: 2,
@@ -15119,7 +15127,7 @@ ${u.join(`
                   style: { ...ar, y: Be },
                   transition: bt,
                   drag: a && "y",
-                  dragConstraints: { top: 0, bottom: D },
+                  dragConstraints: { top: 0, bottom: W },
                   onDrag: R1,
                   onDragEnd: fo,
                   dragPropagation: !0,
@@ -15128,7 +15136,7 @@ ${u.join(`
                     y: Me,
                     transition: { type: "tween" }
                   },
-                  exit: { y: D },
+                  exit: { y: W },
                   dragElastic: 0.01,
                   children: [
                     /* @__PURE__ */ e(
@@ -15416,10 +15424,10 @@ ${u.join(`
   isTypingDisabled: _ = !1,
   width: R = 200,
   height: T = 50,
-  isPhoneInput: W = !1,
+  isPhoneInput: D = !1,
   hasSecurePassword: U = !1,
   maxLength: V,
-  isMaxLengthHit: D,
+  isMaxLengthHit: W,
   autoComplete: O,
   onMaxLengthCap: J,
   id: Z,
@@ -15440,8 +15448,8 @@ ${u.join(`
     () => Eh(Y1, We, P1, ue),
     [Y1, We, P1, ue]
   ), ir = N(
-    () => Wh(We, T, R1, W),
-    [We, T, R1, W]
+    () => Wh(We, T, R1, D),
+    [We, T, R1, D]
   ), nr = N(
     () => Dh(H),
     [H]
@@ -15630,7 +15638,7 @@ ${u.join(`
             }
           ),
           s && /* @__PURE__ */ e(er, { size: "medium" }),
-          V && i !== "number" && !D && /* @__PURE__ */ e(
+          V && i !== "number" && !W && /* @__PURE__ */ e(
             $,
             {
               inset: { right: "x1" },
@@ -15796,11 +15804,11 @@ ${u.join(`
       children: _,
       shouldScroll: R = !1,
       borderRadius: T = "default",
-      pinned: W = "center",
+      pinned: D = "center",
       backgroundVariant: U = "solid",
       footer: V,
-      ...D
-    } = o, O = W === "bottom" ? { top: T, bottom: "none" } : W === "top" ? { bottom: T, top: "none" } : T;
+      ...W
+    } = o, O = D === "bottom" ? { top: T, bottom: "none" } : D === "top" ? { bottom: T, top: "none" } : T;
     return /* @__PURE__ */ e(e1, { children: l && /* @__PURE__ */ e(
       Cr,
       {
@@ -15809,10 +15817,10 @@ ${u.join(`
         initial: "closed",
         zIndex: n,
         exit: "closed",
-        pinned: W,
+        pinned: D,
         backgroundVariant: U,
         shouldScroll: R,
-        ...D,
+        ...W,
         children: /* @__PURE__ */ c(
           B,
           {
@@ -15826,9 +15834,9 @@ ${u.join(`
             inset: F ?? a.defaultInset,
             outset: M ?? void 0,
             position: "absolute",
-            bottom: W === "bottom" ? 0 : void 0,
+            bottom: D === "bottom" ? 0 : void 0,
             maxWidth: s,
-            maxHeight: u || (p || W === "center" ? "calc(100vh - 24px )" : void 0),
+            maxHeight: u || (p || D === "center" ? "calc(100vh - 24px )" : void 0),
             width: (p ? "100%" : void 0) ?? z,
             height: H || (p ? "calc(100vh - 24px )" : void 0),
             children: [
@@ -15962,13 +15970,13 @@ ${u.join(`
     message: p,
     frontLabel: v,
     scrollBarWidth: F = "auto"
-  } = o, [M, H] = q(!1), [z, _] = q(!1), [R, T] = q(r), W = Te(null), U = Te(null);
+  } = o, [M, H] = q(!1), [z, _] = q(!1), [R, T] = q(r), D = Te(null), U = Te(null);
   po(U, () => {
     H(!1);
   });
   const V = (K) => {
     H(!1), T(K), a(K);
-  }, { inputs: D, hocs: O } = X(), J = N(() => ({}), []), Z = N(
+  }, { inputs: W, hocs: O } = X(), J = N(() => ({}), []), Z = N(
     () => ({
       "--focus-color": O.colors.swatches[u].base,
       "--select-height": l || "50px",
@@ -15991,7 +15999,7 @@ ${u.join(`
   ), me = () => {
     R !== void 0 && R !== r && a(R);
   }, Ee = (K) => {
-    W.current && W.current.children[K].scrollIntoView({
+    D.current && D.current.children[K].scrollIntoView({
       behavior: "auto",
       block: "center"
     });
@@ -16057,14 +16065,14 @@ ${u.join(`
             className: "select-body",
             style: {
               ...Z,
-              border: p ? `${D.text.borderWidth} solid ${O.colors.swatches[p.type].base}` : ""
+              border: p ? `${W.text.borderWidth} solid ${O.colors.swatches[p.type].base}` : ""
             },
             onClick: () => {
               ee(!M), R !== r && (M ? me() : T(r));
             },
             borderRadius: "default",
             backgroundColor: z || M ? "foreground" : "background",
-            boxShadow: z || M ? D.select.boxShadow : "none",
+            boxShadow: z || M ? W.select.boxShadow : "none",
             tabIndex: 0,
             children: [
               v && /* @__PURE__ */ e(
@@ -16166,9 +16174,9 @@ ${u.join(`
             variants: Zh,
             className: "select-dropdown-contents",
             style: j,
-            backgroundColor: D.select.dropDownBackgroundColor,
-            borderRadius: D.select.borderRadius,
-            boxShadow: D.select.dropDownShadow,
+            backgroundColor: W.select.dropDownBackgroundColor,
+            borderRadius: W.select.borderRadius,
+            boxShadow: W.select.dropDownShadow,
             top: s ? void 0 : "50px",
             bottom: s ? "50px" : void 0,
             zIndex: 5e4,
@@ -16179,7 +16187,7 @@ ${u.join(`
                 orientation: "vertical",
                 alignment: t || "center",
                 inset: "x1",
-                ref: W,
+                ref: D,
                 children: [
                   o.type === "reactNode" && o.options.map((K, ce) => /* @__PURE__ */ c(le, { children: [
                     /* @__PURE__ */ e(
@@ -16609,7 +16617,7 @@ ${u.join(`
   backgroundColor: H = "#fff"
 }) => {
   var Z;
-  const { drawer: z } = X(), _ = t === "left" || t === "right", R = t === "top" || t === "bottom", T = (j) => j === "left" || j === "top" ? v ? -n + v : -n : v ? n - v : n, W = (j) => {
+  const { drawer: z } = X(), _ = t === "left" || t === "right", R = t === "top" || t === "bottom", T = (j) => j === "left" || j === "top" ? v ? -n + v : -n : v ? n - v : n, D = (j) => {
     switch (j) {
       case "left":
         return [180, 360];
@@ -16624,10 +16632,10 @@ ${u.join(`
     U,
     [T(t), 0],
     r ? [0, 1] : [1, 1]
-  ), D = so(
+  ), W = so(
     U,
     [T(t), 0],
-    W(t)
+    D(t)
   ), O = {
     open: {
       x: 0,
@@ -16714,7 +16722,7 @@ ${u.join(`
             children: /* @__PURE__ */ e(
               Ie,
               {
-                style: { rotate: D },
+                style: { rotate: W },
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
@@ -16763,11 +16771,11 @@ ${u.join(`
       return z * me;
     },
     [a, t, _, z]
-  ), T = $o(R(o)), W = so(
+  ), T = $o(R(o)), D = so(
     T,
     [0, d - F + 2],
     [0, 1]
-  ), U = so(T, [0, d / 2], [1, 0]), V = so(T, [d, d / 2], [1, 0]), D = Te(null), O = Fe(
+  ), U = so(T, [0, d / 2], [1, 0]), V = so(T, [d, d / 2], [1, 0]), W = Te(null), O = Fe(
     (j) => t + _ * j,
     [t, _]
   ), J = Fe(
@@ -16800,7 +16808,7 @@ ${u.join(`
           B,
           {
             className: "slider-bar",
-            ref: D,
+            ref: W,
             display: "flex",
             flexDirection: "row",
             children: l === "center" ? /* @__PURE__ */ c(le, { children: [
@@ -16835,7 +16843,7 @@ ${u.join(`
               {
                 className: `slider-progress ${n ? "disabled" : "enabled"}`,
                 backgroundColor: v.colors[i],
-                style: { scaleX: W },
+                style: { scaleX: D },
                 transformOrigin: "0% 50%"
               }
             )
@@ -16848,7 +16856,7 @@ ${u.join(`
             drag: n ? void 0 : "x",
             onDrag: Z,
             onDragEnd: Z,
-            dragConstraints: D,
+            dragConstraints: W,
             dragElastic: 0,
             dragMomentum: !1,
             style: { x: T },
@@ -17112,7 +17120,7 @@ ${u.join(`
       ref: p,
       layout: !0,
       children: a ? /* @__PURE__ */ e(e1, { children: u.map((z, _) => {
-        const { hexColor: R, size: T } = z.props, W = E(R).luminosity(), U = `inset ${v.defaults.innerRing}, ${v.defaults.outerRing}`;
+        const { hexColor: R, size: T } = z.props, D = E(R).luminosity(), U = `inset ${v.defaults.innerRing}, ${v.defaults.outerRing}`;
         return /* @__PURE__ */ c(
           $,
           {
@@ -17142,7 +17150,7 @@ ${u.join(`
                   borderStyle: "solid",
                   borderWidth: "default",
                   borderColor: R,
-                  boxShadow: W > 0.9 ? U : void 0
+                  boxShadow: D > 0.9 ? U : void 0
                 }
               )
             ]
@@ -19320,14 +19328,14 @@ ${u.join(`
       `${y6(o)}${t ? `T${t.hour}:${t.minute}:${t.second}` : "T00:00:00"}`
     )
   ), d = () => gr(i.getFullYear(), l.getFullYear()), s = () => gr(i.getMonth(), l.getMonth()), u = () => {
-    const W = i.getDate(), U = l.getDate();
-    return gr(W, U);
+    const D = i.getDate(), U = l.getDate();
+    return gr(D, U);
   }, p = () => i.getDate() - l.getDate(), v = () => {
-    var W;
+    var D;
     return p() > 1 ? {
       monthsRemaing: s() - 1,
       daysRemaining: gr(
-        ((W = b6(l.getMonth())) == null ? void 0 : W.dayCount) ?? 0,
+        ((D = b6(l.getMonth())) == null ? void 0 : D.dayCount) ?? 0,
         i.getDate()
       ) + l.getDate(),
       yearsRemaining: d()
@@ -19337,18 +19345,18 @@ ${u.join(`
       yearsRemaining: d()
     };
   }, F = () => {
-    const W = +l - +i;
+    const D = +l - +i;
     return {
-      hoursRemaining: Math.floor(W / (1e3 * 60 * 60) % 24),
-      minutesRemaining: Math.floor(W / 1e3 / 60 % 60),
-      secondsRemaining: Math.floor(W / 1e3 % 60)
+      hoursRemaining: Math.floor(D / (1e3 * 60 * 60) % 24),
+      minutesRemaining: Math.floor(D / 1e3 / 60 % 60),
+      secondsRemaining: Math.floor(D / 1e3 % 60)
     };
   }, { monthsRemaing: M, daysRemaining: H, yearsRemaining: z } = v(), { hoursRemaining: _, minutesRemaining: R, secondsRemaining: T } = F();
   return Re(() => {
-    const W = setTimeout(() => {
+    const D = setTimeout(() => {
       n(/* @__PURE__ */ new Date());
     }, 1e3);
-    return () => clearInterval(W);
+    return () => clearInterval(D);
   }), z <= 0 && M <= 0 && H <= 0 && _ <= 0 && R <= 0 && T <= 0 ? /* @__PURE__ */ e(I, { type: "subtitle", children: r }) : /* @__PURE__ */ c(Ve, { justify: "center", gap: "x1", children: [
     H < 1 && z < 1 && M < 1 ? /* @__PURE__ */ c(Ve, { justify: "center", gap: "x1", children: [
       _ > 0 && /* @__PURE__ */ c(I, { type: O1(a), children: [
@@ -20029,7 +20037,7 @@ ${u.join(`
   borderRadius: t = "32px",
   ...a
 }) => {
-  const [r, i] = q(!1), [n, l] = q(!1), [d, s] = q(!1), u = a.status === "success" ? "success" : a.status === "warning" ? "warning" : "danger", p = o ? "primaryBody" : "inverseHeading", v = o ? "primaryBodyText" : "inverseHeadingText", F = o ? "foreground" : "#FFFFFF22", M = a.bannerTitle, H = a.children !== void 0 && a.children !== null, z = !!(M && H), _ = !!(a.isCollapsable && z), R = z && (!_ || !d), T = !!(_ || a.onClose), W = !!(M && R), U = _ && d, V = U ? {
+  const [r, i] = q(!1), [n, l] = q(!1), [d, s] = q(!1), u = a.status === "success" ? "success" : a.status === "warning" ? "warning" : "danger", p = o ? "primaryBody" : "inverseHeading", v = o ? "primaryBodyText" : "inverseHeadingText", F = o ? "foreground" : "#FFFFFF22", M = a.bannerTitle, H = a.children !== void 0 && a.children !== null, z = !!(M && H), _ = !!(a.isCollapsable && z), R = z && (!_ || !d), T = !!(_ || a.onClose), D = !!(M && R), U = _ && d, V = U ? {
     overflow: "hidden",
     textOverflow: "ellipsis"
   } : void 0;
@@ -20047,123 +20055,111 @@ ${u.join(`
         swatch: u,
         shade: "base"
       } : void 0,
-      inset: { vertical: "x2", horizontal: "x2" },
+      inset: { vertical: d ? "x1" : "x2", horizontal: "x2_5" },
       borderRadius: t,
       justifyContent: "flex-start",
-      alignItems: "stretch",
       flexDirection: "column",
-      rowGap: R ? "x1_5" : void 0,
+      rowGap: R ? "x1" : void 0,
       children: [
-        /* @__PURE__ */ c(
-          $,
-          {
-            width: "100%",
-            minWidth: "0",
-            alignItems: W ? "flex-start" : "center",
-            columnGap: "x1",
-            children: [
-              M ? /* @__PURE__ */ c(
-                $,
-                {
-                  width: "100%",
-                  minWidth: "0",
-                  alignItems: W ? "flex-start" : "center",
-                  columnGap: "x1",
-                  children: [
-                    M.icon && /* @__PURE__ */ e(
-                      $,
-                      {
-                        justifyContent: "center",
-                        alignItems: "center",
-                        flexShrink: 0,
-                        inset: W ? { top: "2px" } : void 0,
-                        children: /* @__PURE__ */ e(P, { name: M.icon, size: "small", primaryColor: v })
-                      }
-                    ),
-                    /* @__PURE__ */ e($, { width: "100%", minWidth: "0", children: /* @__PURE__ */ e(
-                      I,
-                      {
-                        content: M.message,
-                        color: p,
-                        type: { xSmall: "footnote", small: "caption" },
-                        weight: z ? "semiBold" : void 0,
-                        whiteSpace: U ? "nowrap" : void 0,
-                        style: V
-                      }
-                    ) })
-                  ]
-                }
-              ) : /* @__PURE__ */ e($, { width: "100%", minWidth: "0", alignItems: "center", children: a.children }),
-              T && /* @__PURE__ */ c(
-                $,
-                {
-                  alignItems: W ? "flex-start" : "center",
-                  flexShrink: 0,
-                  columnGap: "x_5",
-                  inset: W ? { top: "2px" } : void 0,
-                  children: [
-                    _ && /* @__PURE__ */ e(
-                      $,
-                      {
-                        onClick: () => s((D) => !D),
-                        width: "40px",
-                        height: "40px",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        cursor: "pointer",
-                        backgroundColor: n ? F : void 0,
-                        borderRadius: "circle",
-                        onHoverStart: () => l(!0),
-                        onHoverEnd: () => l(!1),
-                        children: /* @__PURE__ */ e(
-                          P,
-                          {
-                            name: d ? "rightChevron" : "chevron",
-                            orientation: d ? void 0 : "up",
-                            primaryColor: v,
-                            size: "xSmall"
-                          }
-                        )
-                      }
-                    ),
-                    a.onClose && /* @__PURE__ */ e(
-                      $,
+        /* @__PURE__ */ c($, { width: "100%", minWidth: "0", alignItems: "center", columnGap: "x1", children: [
+          M ? /* @__PURE__ */ c(
+            $,
+            {
+              width: "100%",
+              minWidth: "0",
+              alignItems: D ? "flex-start" : "center",
+              columnGap: "x1",
+              children: [
+                M.icon && /* @__PURE__ */ e(
+                  $,
+                  {
+                    justifyContent: "center",
+                    alignItems: "center",
+                    flexShrink: 0,
+                    inset: D ? { top: "2px" } : void 0,
+                    children: /* @__PURE__ */ e(
+                      P,
                       {
-                        justifyContent: "flex-end",
-                        alignItems: "center",
-                        flexShrink: 0,
-                        onHoverStart: () => i(!0),
-                        onHoverEnd: () => i(!1),
-                        children: /* @__PURE__ */ e(
-                          $,
-                          {
-                            onClick: a.onClose,
-                            width: "40px",
-                            height: "40px",
-                            justifyContent: "center",
-                            alignItems: "center",
-                            cursor: "pointer",
-                            backgroundColor: r ? F : void 0,
-                            borderRadius: "circle",
-                            children: /* @__PURE__ */ e(P, { primaryColor: v, size: "xSmall", name: "close" })
-                          }
-                        )
+                        name: M.icon,
+                        size: "small",
+                        primaryColor: v
                       }
                     )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
+                  }
+                ),
+                /* @__PURE__ */ e($, { width: "100%", minWidth: "0", children: /* @__PURE__ */ e(
+                  I,
+                  {
+                    content: M.message,
+                    color: p,
+                    type: { xSmall: "footnote", small: "caption" },
+                    weight: z ? "semiBold" : void 0,
+                    whiteSpace: U ? "nowrap" : void 0,
+                    style: V
+                  }
+                ) })
+              ]
+            }
+          ) : /* @__PURE__ */ e($, { width: "100%", minWidth: "0", alignItems: "center", children: a.children }),
+          T && /* @__PURE__ */ c($, { alignItems: "center", flexShrink: 0, columnGap: "x_5", children: [
+            _ && /* @__PURE__ */ e(
+              $,
+              {
+                onClick: () => s((W) => !W),
+                width: "24px",
+                height: "24px",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
+                backgroundColor: n ? F : void 0,
+                borderRadius: "circle",
+                onHoverStart: () => l(!0),
+                onHoverEnd: () => l(!1),
+                children: /* @__PURE__ */ e(
+                  P,
+                  {
+                    name: d ? "rightChevron" : "chevron",
+                    orientation: d ? void 0 : "up",
+                    primaryColor: v,
+                    size: "xSmall"
+                  }
+                )
+              }
+            ),
+            a.onClose && /* @__PURE__ */ e(
+              $,
+              {
+                justifyContent: "flex-end",
+                alignItems: "center",
+                flexShrink: 0,
+                onHoverStart: () => i(!0),
+                onHoverEnd: () => i(!1),
+                children: /* @__PURE__ */ e(
+                  $,
+                  {
+                    onClick: a.onClose,
+                    width: "24px",
+                    height: "24px",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    cursor: "pointer",
+                    backgroundColor: r ? F : void 0,
+                    borderRadius: "circle",
+                    children: /* @__PURE__ */ e(P, { primaryColor: v, size: 12, name: "close" })
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
         R && M && /* @__PURE__ */ e(
           $,
           {
             width: "100%",
             minWidth: "0",
             inset: {
-              left: M.icon ? "x3" : "x0",
-              right: "x0"
+              left: "x1",
+              right: "x1"
             },
             children: a.children
           }
@@ -21163,7 +21159,7 @@ ${u.join(`
   quickLinks: p,
   isFullScreen: v
 }) => {
-  const F = window.innerWidth, [M, H] = q(!1), [z, _] = q(!1), [R, T] = q(Qr(F)), [W, U] = q(!1), V = $o(0), D = A6(), O = Te(null), J = () => {
+  const F = window.innerWidth, [M, H] = q(!1), [z, _] = q(!1), [R, T] = q(Qr(F)), [D, U] = q(!1), V = $o(0), W = A6(), O = Te(null), J = () => {
     H(!M);
   }, Z = d || 250, j = R === "xSmall", ae = ie.useCallback(() => {
     const ee = Qr(window.innerWidth);
@@ -21176,12 +21172,12 @@ ${u.join(`
     () => ({
       position: "fixed",
       width: "100%",
-      height: `${D}px`,
+      height: `${W}px`,
       overflow: "hidden",
       boxShadow: "0 3px 6px 0 #ccc",
       zIndex: 0
     }),
-    [D]
+    [W]
   ), Ee = N(
     () => ({
       width: `${Z}px`,
@@ -21201,7 +21197,7 @@ ${u.join(`
     v ? /* @__PURE__ */ e(le, {}) : j ? /* @__PURE__ */ e(
       F6,
       {
-        isSheetOpen: W,
+        isSheetOpen: D,
         setSheetIsOpen: U,
         accountRouteOnClick: u,
         circleSize: 70,
@@ -21333,7 +21329,7 @@ ${u.join(`
     /* @__PURE__ */ e(
       Ct,
       {
-        isOpen: W,
+        isOpen: D,
         setIsOpen: U,
         draggable: !0,
         layer: 3,
@@ -21453,12 +21449,12 @@ ${u.join(`
   ), M = (z, _) => {
     const R = z.substring(0, o - _);
     R.length > 0 && d(Math.min(_ + R.length, o - 1));
-    const T = R.length > 0 ? R : [""], W = [
+    const T = R.length > 0 ? R : [""], D = [
       ...s.slice(0, _),
       ...T,
       ...s.slice(_ + 1, s.length - (T.length - 1))
-    ], U = W.join("");
-    t(U), U.length === o && r && r(U), u(W);
+    ], U = D.join("");
+    t(U), U.length === o && r && r(U), u(D);
   }, H = (z) => {
     z > 0 && d(z - 1);
   };
@@ -22473,10 +22469,10 @@ ${u.join(`
   const u = ie.Children.toArray(l), p = Math.round(
     a / u.length * 100
   ), v = u.sort(
-    (W, U) => W.props.order && U.props.order ? W.props.order > U.props.order ? 1 : -1 : 1
-  ), F = (W) => {
-    r(a + W);
-  }, M = (W) => {
+    (D, U) => D.props.order && U.props.order ? D.props.order > U.props.order ? 1 : -1 : 1
+  ), F = (D) => {
+    r(a + D);
+  }, M = (D) => {
     a + 1 === u.length && T(!0), R ? i() : t(!1);
   }, H = () => {
     if (a + 1 === u.length) {
@@ -22595,7 +22591,7 @@ ${u.join(`
   isSelected: _ = !1,
   isFullLength: R = !1
 }) => {
-  const { hocs: T } = X(), W = (Z) => {
+  const { hocs: T } = X(), D = (Z) => {
     switch (Z) {
       case "primaryBody":
         return "primaryBodyText";
@@ -22625,7 +22621,7 @@ ${u.join(`
   }, V = (Z) => {
     const j = Z;
     return j.feature !== void 0 && j.subFeatures !== void 0;
-  }, D = n ? l.textColor === "white" ? "inverseBody" : "primaryBody" : d === "white" ? "inverseBody" : "primaryBody", [O, J] = q(!1);
+  }, W = n ? l.textColor === "white" ? "inverseBody" : "primaryBody" : d === "white" ? "inverseBody" : "primaryBody", [O, J] = q(!1);
   return /* @__PURE__ */ e(
     $,
     {
@@ -22667,13 +22663,13 @@ ${u.join(`
                     content: o
                   }
                 ),
-                /* @__PURE__ */ e(I, { lineHeight: 1.5, type: "caption", color: D, children: s ?? M }),
+                /* @__PURE__ */ e(I, { lineHeight: 1.5, type: "caption", color: W, children: s ?? M }),
                 /* @__PURE__ */ c($, { width: "100%", alignItems: "center", children: [
                   t && /* @__PURE__ */ e(
                     I,
                     {
                       type: { xSmall: "subtitle", medium: "title" },
-                      color: D,
+                      color: W,
                       weight: "bold",
                       content: t
                     }
@@ -22684,7 +22680,7 @@ ${u.join(`
                       I,
                       {
                         type: { xSmall: "footnote", medium: "caption" },
-                        color: D,
+                        color: W,
                         children: u
                       }
                     ) })
@@ -22706,7 +22702,7 @@ ${u.join(`
                       I,
                       {
                         type: { xSmall: "caption", medium: "body" },
-                        color: D,
+                        color: W,
                         children: p
                       }
                     )
@@ -22723,7 +22719,7 @@ ${u.join(`
               {
                 name: V(Z) && (Z != null && Z.isNotIncluded) ? "closeCircle" : "check",
                 size: "xSmall",
-                primaryColor: W(
+                primaryColor: D(
                   n ? l.accentColor : r
                 )
               }
@@ -22741,7 +22737,7 @@ ${u.join(`
                   I,
                   {
                     type: { xSmall: "caption", medium: "body" },
-                    color: D,
+                    color: W,
                     weight: "bold",
                     children: Z.feature
                   }
@@ -22764,7 +22760,7 @@ ${u.join(`
                           top: "0",
                           bottom: "0"
                         },
-                        children: /* @__PURE__ */ e(I, { color: D, type: "body", children: ae })
+                        children: /* @__PURE__ */ e(I, { color: W, type: "body", children: ae })
                       },
                       me
                     ))
@@ -22776,7 +22772,7 @@ ${u.join(`
             I,
             {
               type: { xSmall: "caption", medium: "body" },
-              color: D,
+              color: W,
               weight: "bold",
               children: Z
             }
@@ -23192,9 +23188,9 @@ const vr = {
   menuDropdownLinks: d
 }) => {
   const [s, u] = q(0), [p, v] = q(!1), [F, M] = ie.useState(!1), { device: H } = Hr(), { ref: z, height: _ } = Go(), { hocs: R } = X(), T = (V) => {
-    const D = V;
-    return D.linkColumns !== void 0 && D.title !== void 0;
-  }, W = ["xSmall", "small", "medium"].includes(H), U = N(
+    const W = V;
+    return W.linkColumns !== void 0 && W.title !== void 0;
+  }, D = ["xSmall", "small", "medium"].includes(H), U = N(
     () => ({
       backdropFilter: l ? "blur(10px)" : "none",
       background: l ? "rgba(255, 255, 255, 0.7)" : R.colors.foreground
@@ -23214,7 +23210,7 @@ const vr = {
         inset: { horizontal: "x3" },
         zIndex: r,
         children: [
-          a && W && /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(
+          a && D && /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(
             No,
             {
               size: p ? "xSmall" : "small",
@@ -23222,7 +23218,7 @@ const vr = {
               onClick: () => v(!p)
             }
           ) }),
-          !a && !W && /* @__PURE__ */ e("div", {}),
+          !a && !D && /* @__PURE__ */ e("div", {}),
           /* @__PURE__ */ c($, { alignItems: "center", flexDirection: "row", columnGap: "x1", children: [
             d && /* @__PURE__ */ c(B, { maxWidth: "300px", children: [
               /* @__PURE__ */ e(
@@ -23276,18 +23272,18 @@ const vr = {
             ] }),
             ie.isValidElement(t) ? t : /* @__PURE__ */ e(p6, { ...t })
           ] }),
-          a && !W && /* @__PURE__ */ e(
+          a && !D && /* @__PURE__ */ e(
             $,
             {
               height: "100%",
               width: "100%",
               alignItems: "center",
               justifyContent: "center",
-              children: a && a.map((V, D) => /* @__PURE__ */ e(B, { inset: { horizontal: H === "large" ? "x1" : "x2" }, children: "href" in V && typeof V.title == "string" ? /* @__PURE__ */ e(
+              children: a && a.map((V, W) => /* @__PURE__ */ e(B, { inset: { horizontal: H === "large" ? "x1" : "x2" }, children: "href" in V && typeof V.title == "string" ? /* @__PURE__ */ e(
                 Yr,
                 {
                   title: V.title,
-                  isActive: s === D && p,
+                  isActive: s === W && p,
                   href: V.href,
                   target: V.target
                 }
@@ -23295,18 +23291,18 @@ const vr = {
                 B,
                 {
                   onHoverStart: () => {
-                    v(!0), u(D);
+                    v(!0), u(W);
                   },
-                  onClick: () => p ? v(!1) : (v(!0), u(D)),
+                  onClick: () => p ? v(!1) : (v(!0), u(W)),
                   children: /* @__PURE__ */ e(
                     Yr,
                     {
                       title: V.title,
-                      isActive: s === D && p
+                      isActive: s === W && p
                     }
                   )
                 },
-                D
+                W
               ) : /* @__PURE__ */ e(
                 _e,
                 {
@@ -23330,17 +23326,17 @@ const vr = {
         width: "100%",
         zIndex: r - 1,
         onHoverEnd: () => v(!1),
-        children: !W && /* @__PURE__ */ e(
+        children: !D && /* @__PURE__ */ e(
           St,
           {
-            isOpen: p && !W,
+            isOpen: p && !D,
             location: "top",
             onClick: () => v(!1),
             openValue: i || ((_ && _ + 64 < 248 ? 248 : _ && _ + 64) ?? 280),
             isTabHidden: !0,
             showTab: !1,
             zIndex: 10,
-            children: /* @__PURE__ */ e(B, { outset: "x3", ref: z, children: a && a.map((V, D) => s === D && /* @__PURE__ */ c(
+            children: /* @__PURE__ */ e(B, { outset: "x3", ref: z, children: a && a.map((V, W) => s === W && /* @__PURE__ */ c(
               Ve,
               {
                 gap: "x9",
@@ -23386,13 +23382,13 @@ const vr = {
                   ) }, J))
                 ]
               },
-              D
+              W
             )) })
           }
         )
       }
     ),
-    a && W && /* @__PURE__ */ e(
+    a && D && /* @__PURE__ */ e(
       B,
       {
         height: `calc(100% - ${n}px)`,
@@ -24149,10 +24145,10 @@ const vr = {
     var T;
     H(!1), (T = z.current) == null || T.click();
   }, R = (T) => {
-    const W = T.target.files;
-    if (W) {
-      const U = Array.from(W);
-      a({ accepted: U, rejected: [] }, W);
+    const D = T.target.files;
+    if (D) {
+      const U = Array.from(D);
+      a({ accepted: U, rejected: [] }, D);
     }
   };
   return /* @__PURE__ */ e(e1, { children: n && /* @__PURE__ */ c(
@@ -24240,7 +24236,7 @@ const vr = {
                         initial: { opacity: 0 },
                         animate: { opacity: 1 },
                         exit: { opacity: 0 },
-                        children: d == null ? void 0 : d.map((T, W) => /* @__PURE__ */ e(
+                        children: d == null ? void 0 : d.map((T, D) => /* @__PURE__ */ e(
                           U1,
                           {
                             gridColSpan: 2,
@@ -24257,7 +24253,7 @@ const vr = {
                               }
                             ) })
                           },
-                          W
+                          D
                         ))
                       }
                     )
@@ -25078,7 +25074,7 @@ const vr = {
         top: "-100%",
         transition: { duration: 0 }
       });
-    }, W = async () => {
+    }, D = async () => {
       _.start({
         width: "0%"
       }), await M.start({
@@ -25092,13 +25088,13 @@ const vr = {
     }, U = async (V) => {
       if (V.preventDefault(), V.target.files == null)
         return;
-      const D = V.target.files[0];
+      const W = V.target.files[0];
       if (a) {
-        F(!0), await R(), a(D);
+        F(!0), await R(), a(W);
         const O = new FileReader();
         O.onloadend = () => {
           p(O.result);
-        }, await T(), O.readAsDataURL(D), await W(), F(!1);
+        }, await T(), O.readAsDataURL(W), await D(), F(!1);
       } else
         p(null);
     };
@@ -25393,7 +25389,7 @@ const vr = {
   inset: R,
   outset: T
 }) => {
-  const [W, U] = ie.useState(""), { ref: V, height: D } = Go(), O = (ae) => a.find((me) => me.optionId === ae), J = O(F), Z = O(W), { height: j } = Lo();
+  const [D, U] = ie.useState(""), { ref: V, height: W } = Go(), O = (ae) => a.find((me) => me.optionId === ae), J = O(F), Z = O(D), { height: j } = Lo();
   return /* @__PURE__ */ e(
     Ct,
     {
@@ -25424,7 +25420,7 @@ const vr = {
           removeSelectedOption: M,
           children: p
         }
-      ) : W && (Z != null && Z.expandedChild) ? /* @__PURE__ */ c(
+      ) : D && (Z != null && Z.expandedChild) ? /* @__PURE__ */ c(
         B,
         {
           width: "100%",
@@ -25489,7 +25485,7 @@ const vr = {
             alignment: "center"
           }
         ),
-        D && D >= j && /* @__PURE__ */ e(_h, { name: "description" }),
+        W && W >= j && /* @__PURE__ */ e(_h, { name: "description" }),
         /* @__PURE__ */ e(pe, { space: "x2" }),
         /* @__PURE__ */ e(
           e8,
@@ -25657,11 +25653,11 @@ const vr = {
   hasIncrement: _,
   isConfigurable: R,
   disableMessage: T,
-  sliderOrientation: W,
+  sliderOrientation: D,
   sliderImage: U,
   secondaryAction: V
 }) => {
-  const [D, O] = ie.useState(!1), [J, Z] = ie.useState(!1), j = () => {
+  const [W, O] = ie.useState(!1), [J, Z] = ie.useState(!1), j = () => {
     v.forEach(
       (ee) => ee.setActiveConfigurationId("")
     ), M(!1);
@@ -25678,7 +25674,7 @@ const vr = {
     }
   };
   return /* @__PURE__ */ c($, { inset: "x3", flexDirection: { xSmall: "column", large: "row" }, children: [
-    D && H ? /* @__PURE__ */ e(
+    W && H ? /* @__PURE__ */ e(
       Xr,
       {
         title: H == null ? void 0 : H.title,
@@ -25687,14 +25683,14 @@ const vr = {
         accept: {
           title: H.accept.title,
           onClick: () => {
-            M(!0), O(!D), H.accept.onClick();
+            M(!0), O(!W), H.accept.onClick();
           }
         },
         decline: {
           title: "Cancel",
           onClick: () => {
             var ee;
-            O(!D), (ee = H.decline) == null || ee.onClick();
+            O(!W), (ee = H.decline) == null || ee.onClick();
           }
         },
         requireScroll: !1
@@ -25860,7 +25856,7 @@ const vr = {
               sliderFill: n,
               hasIncrement: _,
               cardImage: U,
-              cardOrientation: W,
+              cardOrientation: D,
               secondaryAction: V
             }
           ),
@@ -26085,7 +26081,7 @@ const vr = {
       checkoutDescription: r,
       selectableOptions: i,
       selectedOption: p,
-      handleSelectedOption: (W) => H(W),
+      handleSelectedOption: (D) => H(D),
       removeSelectedOption: v,
       upsaleContentTitle: n,
       upsaleContent: /* @__PURE__ */ e(
@@ -26229,10 +26225,10 @@ const vr = {
   successComponent: _,
   upsaleContentTitle: R,
   sponsorId: T = "9070",
-  extraLink: W,
+  extraLink: D,
   defaultNumOptionsShown: U,
   submitAction: V,
-  acceptSelectedAction: D,
+  acceptSelectedAction: W,
   shouldHideSendFreeCard: O,
   upsaleBanner: J,
   checkoutOnly: Z
@@ -26242,7 +26238,7 @@ const vr = {
   ), { ref: me, width: Ee, height: ee } = Go(), ue = O ? "120px" : "170px", se = Lo().width, ne = se <= 910, ce = ((Be) => i.filter(
     (o1) => o1.optionId === Be
   ))(u), Me = () => {
-    ae(!0), D == null || D.onClick();
+    ae(!0), W == null || W.onClick();
   };
   return /* @__PURE__ */ e(
     wr,
@@ -26329,9 +26325,9 @@ const vr = {
                         handleShouldShowCheckoutView: (Be) => ae(Be),
                         activeSelectedOption: ce[0],
                         extraLink: {
-                          title: W == null ? void 0 : W.title,
-                          onClick: W == null ? void 0 : W.onClick,
-                          href: W == null ? void 0 : W.href
+                          title: D == null ? void 0 : D.title,
+                          onClick: D == null ? void 0 : D.onClick,
+                          href: D == null ? void 0 : D.href
                         },
                         defaultNumOptionsShown: U,
                         submitAction: V,
@@ -26357,7 +26353,7 @@ const vr = {
                             type: "primary",
                             size: "large",
                             fullWidth: !0,
-                            title: (D == null ? void 0 : D.title) ?? "Continue to Checkout",
+                            title: (W == null ? void 0 : W.title) ?? "Continue to Checkout",
                             disabled: !u.length,
                             onClick: Me
                           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "type": "module",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.js",