beth-clarity 1.1.19 → 1.1.21

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

@@ -42,7 +42,120 @@ const Dt = ({
       children: d
     }
   );
-}, At = ({
+}, ve = {
+  fontFamily: {
+    sans: ["Inter", "system-ui", "sans-serif"],
+    mono: ["Fira Code", "monospace"]
+  },
+  fontSize: {
+    xs: "12px",
+    sm: "14px",
+    base: "16px",
+    lg: "18px",
+    xl: "20px",
+    "2xl": "24px",
+    "3xl": "30px"
+  },
+  fontWeight: {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  letterSpacing: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em"
+  }
+}, ue = (e) => {
+  if (e) {
+    if (e.startsWith("#") || e.startsWith("rgb") || e.startsWith("hsl") || e === "transparent")
+      return e;
+    if (e.includes(".")) {
+      const [t, s] = e.split(".");
+      return `var(--clarity-${t}-${s})`;
+    }
+    return `var(--clarity-${e})`;
+  }
+}, U = (e) => e !== void 0 ? `var(--clarity-spacing-${e})` : void 0, de = E.forwardRef(({
+  as: e,
+  children: t,
+  className: s,
+  display: n,
+  flexDirection: l,
+  alignItems: i,
+  justifyContent: d,
+  gap: o,
+  m: r,
+  mt: c,
+  mr: p,
+  mb: v,
+  ml: m,
+  mx: f,
+  my: u,
+  p: h,
+  pt: y,
+  pr: b,
+  pb: N,
+  pl: B,
+  px: x,
+  py: _,
+  bg: $,
+  color: L,
+  fontSize: k,
+  fontWeight: j,
+  textAlign: I,
+  lineHeight: A,
+  letterSpacing: O,
+  borderRadius: g,
+  boxShadow: V,
+  borderWidth: H,
+  borderTopWidth: W,
+  borderRightWidth: q,
+  borderBottomWidth: X,
+  borderLeftWidth: F,
+  borderXWidth: P,
+  borderYWidth: Y,
+  borderColor: le,
+  ...re
+}, ie) => {
+  const C = e || "div", S = (R, J) => {
+    if (R === void 0 || R === 0) return;
+    const rt = `var(--clarity-border-width-${R})`, it = J ? ue(J) : "currentColor";
+    return `${rt} solid ${it}`;
+  }, G = {
+    display: n,
+    flexDirection: l,
+    alignItems: i,
+    justifyContent: d,
+    gap: U(o),
+    marginTop: U(c ?? u ?? r),
+    marginRight: U(p ?? f ?? r),
+    marginBottom: U(v ?? u ?? r),
+    marginLeft: U(m ?? f ?? r),
+    paddingTop: U(y ?? _ ?? h),
+    paddingRight: U(b ?? x ?? h),
+    paddingBottom: U(N ?? _ ?? h),
+    paddingLeft: U(B ?? x ?? h),
+    backgroundColor: $ ? ue($) : void 0,
+    color: L ? ue(L) : void 0,
+    fontSize: k ? `var(--clarity-font-size-${k})` : void 0,
+    fontWeight: j ? ve.fontWeight[j] : void 0,
+    textAlign: I,
+    lineHeight: A,
+    letterSpacing: O ? ve.letterSpacing[O] : void 0,
+    borderRadius: g ? `var(--clarity-radius-${g})` : void 0,
+    boxShadow: V ? `var(--clarity-shadow-${V})` : void 0,
+    border: S(H, le),
+    borderTop: S(W ?? Y),
+    borderRight: S(q ?? P),
+    borderBottom: S(X ?? Y),
+    borderLeft: S(F ?? P)
+  };
+  return /* @__PURE__ */ a(C, { ref: ie, className: `clarity-box ${s || ""}`.trim(), style: G, ...re, children: t });
+}), At = ({
   variant: e = "primary",
   size: t = "medium",
   disabled: s = !1,
@@ -1880,131 +1993,20 @@ const Et = (e) => `${e / 12 * 100}%`, Lt = (e) => `${e / 12 * 100}%`, St = ({
   return E.createElement(c, { className: h, style: m, ...v }, r);
 };
 St.displayName = "Col";
-const ve = {
-  fontFamily: {
-    sans: ["Inter", "system-ui", "sans-serif"],
-    mono: ["Fira Code", "monospace"]
-  },
-  fontSize: {
-    xs: "12px",
-    sm: "14px",
-    base: "16px",
-    lg: "18px",
-    xl: "20px",
-    "2xl": "24px",
-    "3xl": "30px"
-  },
-  fontWeight: {
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700
-  },
-  letterSpacing: {
-    tighter: "-0.05em",
-    tight: "-0.025em",
-    normal: "0em",
-    wide: "0.025em",
-    wider: "0.05em"
-  }
-}, ue = (e) => {
-  if (e) {
-    if (e.includes(".")) {
-      const [t, s] = e.split(".");
-      return `var(--clarity-${t}-${s})`;
-    }
-    return `var(--clarity-${e})`;
-  }
-}, U = (e) => e !== void 0 ? `var(--clarity-spacing-${e})` : void 0, de = E.forwardRef(({
-  as: e,
-  children: t,
-  className: s,
-  display: n,
-  flexDirection: l,
-  alignItems: i,
-  justifyContent: d,
-  gap: o,
-  m: r,
-  mt: c,
-  mr: p,
-  mb: v,
-  ml: m,
-  mx: f,
-  my: u,
-  p: h,
-  pt: y,
-  pr: b,
-  pb: N,
-  pl: B,
-  px: x,
-  py: _,
-  bg: $,
-  color: L,
-  fontSize: k,
-  fontWeight: j,
-  textAlign: I,
-  lineHeight: A,
-  letterSpacing: O,
-  borderRadius: g,
-  boxShadow: V,
-  borderWidth: H,
-  borderTopWidth: W,
-  borderRightWidth: q,
-  borderBottomWidth: X,
-  borderLeftWidth: F,
-  borderXWidth: P,
-  borderYWidth: Y,
-  borderColor: le,
-  ...re
-}, ie) => {
-  const C = e || "div", S = (R, J) => {
-    if (R === void 0 || R === 0) return;
-    const rt = `var(--clarity-border-width-${R})`, it = J ? ue(J) : "currentColor";
-    return `${rt} solid ${it}`;
-  }, G = {
-    display: n,
-    flexDirection: l,
-    alignItems: i,
-    justifyContent: d,
-    gap: U(o),
-    marginTop: U(c ?? u ?? r),
-    marginRight: U(p ?? f ?? r),
-    marginBottom: U(v ?? u ?? r),
-    marginLeft: U(m ?? f ?? r),
-    paddingTop: U(y ?? _ ?? h),
-    paddingRight: U(b ?? x ?? h),
-    paddingBottom: U(N ?? _ ?? h),
-    paddingLeft: U(B ?? x ?? h),
-    backgroundColor: $ ? ue($) : void 0,
-    color: L ? ue(L) : void 0,
-    fontSize: k ? `var(--clarity-font-size-${k})` : void 0,
-    fontWeight: j ? ve.fontWeight[j] : void 0,
-    textAlign: I,
-    lineHeight: A,
-    letterSpacing: O ? ve.letterSpacing[O] : void 0,
-    borderRadius: g ? `var(--clarity-radius-${g})` : void 0,
-    boxShadow: V ? `var(--clarity-shadow-${V})` : void 0,
-    border: S(H, le),
-    borderTop: S(W ?? Y),
-    borderRight: S(q ?? P),
-    borderBottom: S(X ?? Y),
-    borderLeft: S(F ?? P)
-  };
-  return /* @__PURE__ */ a(C, { ref: ie, className: `clarity-box ${s || ""}`.trim(), style: G, ...re, children: t });
-}), at = ({ children: e, className: t }) => /* @__PURE__ */ a(de, { as: "header", p: 4, borderBottomWidth: 1, borderColor: "gray.200", className: t, children: e });
+const at = ({ children: e, className: t, ...s }) => /* @__PURE__ */ a(de, { as: "header", p: 4, borderBottomWidth: 1, borderColor: "gray.200", className: t, ...s, children: e });
 at.displayName = "Card.Header";
-const nt = ({ children: e, className: t }) => /* @__PURE__ */ a(de, { p: 4, className: t, children: e });
+const nt = ({ children: e, className: t, ...s }) => /* @__PURE__ */ a(de, { p: 4, className: t, ...s, children: e });
 nt.displayName = "Card.Content";
-const lt = ({ children: e, className: t }) => /* @__PURE__ */ a(de, { as: "footer", p: 4, borderTopWidth: 1, borderColor: "gray.200", display: "flex", justifyContent: "flex-end", gap: 3, className: t, children: e });
+const lt = ({ children: e, className: t, ...s }) => /* @__PURE__ */ a(de, { as: "footer", p: 4, borderTopWidth: 1, borderColor: "gray.200", display: "flex", justifyContent: "flex-end", gap: 3, className: t, ...s, children: e });
 lt.displayName = "Card.Footer";
-const me = ({ children: e, ...t }) => /* @__PURE__ */ a(
+const me = ({ children: e, bg: t = "white", ...s }) => /* @__PURE__ */ a(
   de,
   {
-    bg: "white",
+    bg: t,
     borderRadius: 3,
     boxShadow: 1,
     overflow: "hidden",
-    ...t,
+    ...s,
     children: e
   }
 );
@@ -2073,6 +2075,7 @@ const Jt = {
 export {
   Ft as Accordion,
   Dt as Badge,
+  de as Box,
   At as Button,
   Pt as ButtonGroup,
   Mt as ButtonIcon,