@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/content-card/category-tag/index.js

@@ -1,13 +1,42 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useTheme as r } from "styled-components";
-import { Container as a } from "../../container/index.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useTheme as o } from "styled-components";
+import { Container as n } from "../../container/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
-import { Text as n } from "../../typography/text/index.js";
-const d = ({ tag: t, tagPosition: e }) => {
-  const i = r();
-  return t ? o(a, { alignItems: "center", bgColor: i.palette.white, borderRadius: "8px", display: "flex", justify: "center", margin: e === "top" ? [0.75, 0.75, 0.75, 0.75] : void 0, padding: [0.25, 0.5, 0.25, 0.5], position: e === "top" ? "absolute" : "relative", top: "0", width: "max-content", children: o(n, { color: i.palette.gray[900], lineSpacing: 1.5, lineSpacingSm: 1.25, size: "md", sizeSm: "sm", textAlign: "center", children: t }) }) : null;
+import { Text as m } from "../../typography/text/index.js";
+const f = ({
+  tag: e,
+  tagPosition: t
+}) => {
+  const r = o();
+  return e ? /* @__PURE__ */ i(
+    n,
+    {
+      alignItems: "center",
+      bgColor: r.palette.white,
+      borderRadius: "8px",
+      display: "flex",
+      justify: "center",
+      margin: t === "top" ? [0.75, 0.75, 0.75, 0.75] : void 0,
+      padding: [0.25, 0.5, 0.25, 0.5],
+      position: t === "top" ? "absolute" : "relative",
+      top: "0",
+      width: "max-content",
+      children: /* @__PURE__ */ i(
+        m,
+        {
+          color: r.palette.gray[900],
+          lineSpacing: 1.5,
+          lineSpacingSm: 1.25,
+          size: "md",
+          sizeSm: "sm",
+          textAlign: "center",
+          children: e
+        }
+      )
+    }
+  ) : null;
 };
 export {
-  d as CategoryTag
+  f as CategoryTag
 };

package/dist/components/content-card/event-date/index.js

@@ -1,15 +1,58 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { isEmpty as m } from "lodash";
-import { useTheme as a } from "styled-components";
-import { Container as l } from "../../container/index.js";
-import { Heading as p } from "../../typography/heading/index.js";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { isEmpty as l } from "lodash";
+import { useTheme as s } from "styled-components";
+import { Container as p } from "../../container/index.js";
+import { Heading as d } from "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import { Text as c } from "../../typography/text/index.js";
-const b = ({ eventDate: e }) => {
-  const t = a(), i = m(e) ? null : e == null ? void 0 : e.split("-");
-  if (i) {
-    const [o, r] = i;
-    return s(l, { alignItems: "center", bgColor: t.palette.white, borderRadius: "8px", display: "flex", flexDirection: "column", margin: [0.75, 0.75, 0.75, 0.75], padding: [0.75, 1.5, 0.75, 1.5], position: "absolute", right: "0", shadow: "md", top: "0", children: [n(p, { fontWeight: "semibold", lineSpacingSm: 1.25, size: "md", sizeSm: "sm", textAlign: "center", children: o }), n(c, { color: t.palette.gray[800], fontWeight: "semibold", lineSpacing: 1.5, lineSpacingSm: 1.25, size: "md", sizeSm: "sm", textAlign: "center", children: r.toUpperCase() })] });
+const b = ({
+  eventDate: i
+}) => {
+  const o = s(), t = l(i) ? null : i == null ? void 0 : i.split("-");
+  if (t) {
+    const [r, m] = t;
+    return /* @__PURE__ */ n(
+      p,
+      {
+        alignItems: "center",
+        bgColor: o.palette.white,
+        borderRadius: "8px",
+        display: "flex",
+        flexDirection: "column",
+        margin: [0.75, 0.75, 0.75, 0.75],
+        padding: [0.75, 1.5, 0.75, 1.5],
+        position: "absolute",
+        right: "0",
+        shadow: "md",
+        top: "0",
+        children: [
+          /* @__PURE__ */ e(
+            d,
+            {
+              fontWeight: "semibold",
+              lineSpacingSm: 1.25,
+              size: "md",
+              sizeSm: "sm",
+              textAlign: "center",
+              children: r
+            }
+          ),
+          /* @__PURE__ */ e(
+            c,
+            {
+              color: o.palette.gray[800],
+              fontWeight: "semibold",
+              lineSpacing: 1.5,
+              lineSpacingSm: 1.25,
+              size: "md",
+              sizeSm: "sm",
+              textAlign: "center",
+              children: m.toUpperCase()
+            }
+          )
+        ]
+      }
+    );
   }
   return null;
 };

package/dist/components/content-card/index.js

@@ -1,15 +1,15 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import z, { useTheme as v } from "styled-components";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import z, { useTheme as b } from "styled-components";
 import { CategoryTag as k } from "./category-tag/index.js";
-import { EventDate as w } from "./event-date/index.js";
-import { Button as $ } from "../button/index.js";
-import { M as D } from "../../index-BwFnfaRh.mjs";
-import { Container as s } from "../container/index.js";
+import { EventDate as u } from "./event-date/index.js";
+import { Button as C } from "../button/index.js";
+import { M as v } from "../../index-maWH3JYC.mjs";
+import { Container as c } from "../container/index.js";
 import { Icon as S } from "../icon/index.js";
-import { Heading as T } from "../typography/heading/index.js";
+import { Heading as j } from "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as g } from "../typography/text/index.js";
-const C = z.div`
+import { Text as f } from "../typography/text/index.js";
+const I = z.div`
   ${({ theme: t }) => `
     align-items: flex-start;
     display: flex;
@@ -54,10 +54,115 @@ const C = z.div`
       }
     }
   `}
-`, q = ({ author: t, buttonText: h, description: f, eventDate: x, href: l, imageId: d, mode: b = "light", publishDate: m, readingTime: c, tag: p, tagPosition: n = "top", title: y }) => {
-  const i = v(), r = m == null ? void 0 : m.split("-"), a = b === "dark", u = o(C, { "data-testid": `content-card-${y}`, children: [d || x || p && n === "top" ? o(s, { id: "card-image", position: "relative", children: [d && e(D, { publicId: d }), n === "top" && e(k, { tag: p, tagPosition: n }), e(w, { eventDate: x })] }) : void 0, o(s, { alignItems: "flex-start", display: "flex", flexDirection: "column", gap: 0.5, id: "card-content", children: [n === "bottom" && e(k, { tag: p, tagPosition: n }), t || r || c ? o(s, { display: "flex", justify: "space-between", width: "100%", children: [t && r && e(g, { color: i.palette.gray[a ? 300 : 400], fontWeight: "semibold", size: "sm", sizeSm: "xs", children: t + ` • ${r[0]} ${r[1]}, ${r[2]}` }), c && o(s, { alignItems: "center", display: "flex", gap: 0.25, justify: "center", minWidth: "60px", children: [e(S, { icon: "eye", iconColor: i.palette.gray[a ? 300 : 400], iconSize: "xs", iconType: "fa-light" }), e(g, { color: i.palette.gray[a ? 300 : 400], size: "sm", sizeSm: "xs", textAlign: "right", children: c })] })] }) : void 0, e(T, { className: `title-${b}`, color: a ? i.palette.white : i.palette.gray[800], fontWeight: "semibold", size: "sm", sizeSm: "xs", children: y }), f && e(g, { color: i.palette.gray[a ? 100 : 600], size: "md", sizeSm: "sm", children: f }), h && l && e($, { href: l, variant: "link", children: h })] })] });
-  return l ? e("a", { className: "flex w-fit", href: l, rel: "noopener noreferrer", target: "_self", children: u }) : u;
+`, G = ({
+  author: t,
+  buttonText: g,
+  description: x,
+  eventDate: h,
+  href: a,
+  imageId: d,
+  mode: y = "light",
+  publishDate: s,
+  readingTime: m,
+  tag: p,
+  tagPosition: r = "top",
+  title: w
+}) => {
+  const i = b(), o = s == null ? void 0 : s.split("-"), n = y === "dark", $ = /* @__PURE__ */ l(I, { "data-testid": `content-card-${w}`, children: [
+    d || h || p && r === "top" ? /* @__PURE__ */ l(c, { id: "card-image", position: "relative", children: [
+      d && /* @__PURE__ */ e(v, { publicId: d }),
+      r === "top" && /* @__PURE__ */ e(k, { tag: p, tagPosition: r }),
+      /* @__PURE__ */ e(u, { eventDate: h })
+    ] }) : void 0,
+    /* @__PURE__ */ l(
+      c,
+      {
+        alignItems: "flex-start",
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.5,
+        id: "card-content",
+        children: [
+          r === "bottom" && /* @__PURE__ */ e(k, { tag: p, tagPosition: r }),
+          t || o || m ? /* @__PURE__ */ l(c, { display: "flex", justify: "space-between", width: "100%", children: [
+            t && o && /* @__PURE__ */ e(
+              f,
+              {
+                color: i.palette.gray[n ? 300 : 400],
+                fontWeight: "semibold",
+                size: "sm",
+                sizeSm: "xs",
+                children: t + ` • ${o[0]} ${o[1]}, ${o[2]}`
+              }
+            ),
+            m && /* @__PURE__ */ l(
+              c,
+              {
+                alignItems: "center",
+                display: "flex",
+                gap: 0.25,
+                justify: "center",
+                minWidth: "60px",
+                children: [
+                  /* @__PURE__ */ e(
+                    S,
+                    {
+                      icon: "eye",
+                      iconColor: i.palette.gray[n ? 300 : 400],
+                      iconSize: "xs",
+                      iconType: "fa-light"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    f,
+                    {
+                      color: i.palette.gray[n ? 300 : 400],
+                      size: "sm",
+                      sizeSm: "xs",
+                      textAlign: "right",
+                      children: m
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : void 0,
+          /* @__PURE__ */ e(
+            j,
+            {
+              className: `title-${y}`,
+              color: n ? i.palette.white : i.palette.gray[800],
+              fontWeight: "semibold",
+              size: "sm",
+              sizeSm: "xs",
+              children: w
+            }
+          ),
+          x && /* @__PURE__ */ e(
+            f,
+            {
+              color: i.palette.gray[n ? 100 : 600],
+              size: "md",
+              sizeSm: "sm",
+              children: x
+            }
+          ),
+          g && a && /* @__PURE__ */ e(C, { href: a, variant: "link", children: g })
+        ]
+      }
+    )
+  ] });
+  return a ? /* @__PURE__ */ e(
+    "a",
+    {
+      className: "flex w-fit",
+      href: a,
+      rel: "noopener noreferrer",
+      target: "_self",
+      children: $
+    }
+  ) : $;
 };
 export {
-  q as ContentCard
+  G as ContentCard
 };

package/dist/components/content-card-carousel/index.js

@@ -1,15 +1,95 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useRef as c } from "react";
-import { O as p, S as a } from "../../index-Cu7uUMlx.mjs";
-import { Container as t } from "../container/index.js";
+import { useRef as d } from "react";
+import { O as p, S as r } from "../../index-CAIe8hBv.mjs";
+import { Container as n } from "../container/index.js";
 import { ContentCard as f } from "../content-card/index.js";
 import { Heading as x } from "../typography/heading/index.js";
 import "../typography/span/index.js";
 import { Text as g } from "../typography/text/index.js";
-const I = ({ description: s, items: r, title: o, titleHighlighted: m }) => {
-  const n = c(null);
-  return i(p, { "data-testid": "content-card-carousel", children: [i(t, { alignItems: "flex-start", display: "flex", justify: "space-between", children: [i(t, { alignItems: "flex-start", display: "flex", flexDirection: "column", gap: 0.625, maxWidth: "800px", children: [i(x, { display: "inline", fontWeight: "semibold", lineSpacing: 2.25, lineSpacingSm: 1.75, size: "lg", sizeSm: "md", children: [o + " ", " ", e("span", { className: "inline", children: m })] }), e(g, { lineSpacing: 1.5, lineSpacingSm: 1.25, size: "md", sizeSm: "sm", children: s })] }), e(a, { containerRef: n, id: "desktop" })] }), e(t, { alignSelf: "stretch", display: "flex", id: "carousel", pb: 1, pr: 2.25, ref: n, scroll: "x", children: e(t, { alignItems: "flex-start", display: "flex", gap: 1.5, width: "max-content", children: r.map((l, d) => e(f, { ...l }, `${d}-${l.title}`)) }) }), e(a, { containerRef: n, id: "mobile" })] });
+const j = ({
+  description: a,
+  items: o,
+  title: s,
+  titleHighlighted: m
+}) => {
+  const t = d(null);
+  return /* @__PURE__ */ i(p, { "data-testid": "content-card-carousel", children: [
+    /* @__PURE__ */ i(
+      n,
+      {
+        alignItems: "flex-start",
+        display: "flex",
+        justify: "space-between",
+        children: [
+          /* @__PURE__ */ i(
+            n,
+            {
+              alignItems: "flex-start",
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.625,
+              maxWidth: "800px",
+              children: [
+                /* @__PURE__ */ i(
+                  x,
+                  {
+                    display: "inline",
+                    fontWeight: "semibold",
+                    lineSpacing: 2.25,
+                    lineSpacingSm: 1.75,
+                    size: "lg",
+                    sizeSm: "md",
+                    children: [
+                      s + " ",
+                      " ",
+                      /* @__PURE__ */ e("span", { className: "inline", children: m })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  g,
+                  {
+                    lineSpacing: 1.5,
+                    lineSpacingSm: 1.25,
+                    size: "md",
+                    sizeSm: "sm",
+                    children: a
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(r, { containerRef: t, id: "desktop" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      n,
+      {
+        alignSelf: "stretch",
+        display: "flex",
+        id: "carousel",
+        pb: 1,
+        pr: 2.25,
+        ref: t,
+        scroll: "x",
+        children: /* @__PURE__ */ e(
+          n,
+          {
+            alignItems: "flex-start",
+            display: "flex",
+            gap: 1.5,
+            width: "max-content",
+            children: o.map(
+              (l, c) => /* @__PURE__ */ e(f, { ...l }, `${c}-${l.title}`)
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(r, { containerRef: t, id: "mobile" })
+  ] });
 };
 export {
-  I as ContentCardCarousel
+  j as ContentCardCarousel
 };

package/dist/components/content-card-carousel/scroll-buttons/index.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "styled-components";
-import { S as s } from "../../../index-Cu7uUMlx.mjs";
+import { S as s } from "../../../index-CAIe8hBv.mjs";
 import "../../container/index.js";
 import "../../icon/index.js";
 export {

package/dist/components/divider/index.js

@@ -1,10 +1,25 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { theme as s } from "../colors/index.js";
-import { Container as f } from "../container/index.js";
-const c = i(function({ color: r = s.palette.gray[100], mt: o = 0.5, mb: t = 0.5, ...m }, e) {
-  return a(f, { as: "hr", border: `1px solid ${r}`, mb: t, mt: o, ref: e, ...m });
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { theme as p } from "../colors/index.js";
+import { Container as n } from "../container/index.js";
+const h = f(function({
+  color: r = p.palette.gray[100],
+  mt: o = 0.5,
+  mb: t = 0.5,
+  ...e
+}, i) {
+  return /* @__PURE__ */ m(
+    n,
+    {
+      as: "hr",
+      border: `1px solid ${r}`,
+      mb: t,
+      mt: o,
+      ref: i,
+      ...e
+    }
+  );
 });
 export {
-  c as Divider
+  h as Divider
 };

package/dist/components/empty-state/empty-button/index.js

@@ -1,6 +1,6 @@
-import { jsx as n } from "react/jsx-runtime";
-import { Button as r } from "../../button/index.js";
-const s = ({ buttonProps: t, variant: o }) => n(r, { onClick: t.onClick, variant: o, children: t.text });
+import { jsx as r } from "react/jsx-runtime";
+import { Button as n } from "../../button/index.js";
+const c = ({ buttonProps: t, variant: o }) => /* @__PURE__ */ r(n, { onClick: t.onClick, variant: o, children: t.text });
 export {
-  s as EmptyButton
+  c as EmptyButton
 };

package/dist/components/empty-state/index.js

@@ -1,19 +1,19 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import { EmptyButton as m } from "./empty-button/index.js";
-import { styled as r } from "styled-components";
-import { M as g } from "../../index-BwFnfaRh.mjs";
-import { Heading as h } from "../typography/heading/index.js";
+import { styled as n } from "styled-components";
+import { M as g } from "../../index-maWH3JYC.mjs";
+import { Heading as f } from "../typography/heading/index.js";
 import "../typography/span/index.js";
 import { Text as x } from "../typography/text/index.js";
-const f = r.div`
+const h = n.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: ${({ theme: t, $padding: e }) => t.spacing[e]};
+  padding: ${({ theme: i, $padding: e }) => i.spacing[e]};
   max-width: 900px;
   white-space: pre-line;
   margin: 0 auto;
-`, u = r.div`
+`, y = n.div`
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -21,28 +21,65 @@ const f = r.div`
   background-color: transparent;
   width: 96px;
   height: 96px;
-  margin-bottom: ${({ theme: t }) => t.spacing[2]};
+  margin-bottom: ${({ theme: i }) => i.spacing[2]};
 
   > img {
     width: 100%;
   }
-`, y = r.div`
+`, u = n.div`
   display: flex;
   flex-direction: row;
   margin: 0;
-  margin-bottom: ${({ theme: t }) => t.spacing[2]};
+  margin-bottom: ${({ theme: i }) => i.spacing[2]};
 
   > * {
-    margin-right: ${({ theme: t }) => t.spacing[0.75]};
+    margin-right: ${({ theme: i }) => i.spacing[0.75]};
   }
 
   > *:last-child {
     margin-right: 0;
   }
-`, d = { md: { description: "md", title: "lg" }, sm: { description: "sm", title: "xs" } }, S = ({ cancelButton: t, confirmButton: e, description: p, imageSrc: s = "integrates/empty/addRoot", padding: c = 1.25, title: l, size: n = "md" }) => {
-  const o = (e ?? t) !== void 0;
-  return a(f, { $padding: c, children: [i(u, { children: i(g, { alt: "empty-icon", publicId: s }) }), i(h, { fontWeight: "bold", lineSpacing: 1.75, mb: 0.25, size: d[n].title, textAlign: "center", children: l }), i(x, { mb: o ? 2 : void 0, size: d[n].description, textAlign: "center", children: p }), o ? a(y, { children: [t && i(m, { buttonProps: t, variant: "tertiary" }), e && i(m, { buttonProps: e, variant: "primary" })] }) : void 0] });
+`, a = {
+  md: { description: "md", title: "lg" },
+  sm: { description: "sm", title: "xs" }
+}, C = ({
+  cancelButton: i = void 0,
+  confirmButton: e = void 0,
+  description: p,
+  imageSrc: s = "integrates/empty/addRoot",
+  padding: l = 1.25,
+  title: c,
+  size: r = "md"
+}) => {
+  const o = (e ?? i) !== void 0;
+  return /* @__PURE__ */ d(h, { $padding: l, children: [
+    /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(g, { alt: "empty-icon", publicId: s }) }),
+    /* @__PURE__ */ t(
+      f,
+      {
+        fontWeight: "bold",
+        lineSpacing: 1.75,
+        mb: 0.25,
+        size: a[r].title,
+        textAlign: "center",
+        children: c
+      }
+    ),
+    /* @__PURE__ */ t(
+      x,
+      {
+        mb: o ? 2 : void 0,
+        size: a[r].description,
+        textAlign: "center",
+        children: p
+      }
+    ),
+    o ? /* @__PURE__ */ d(u, { children: [
+      i && /* @__PURE__ */ t(m, { buttonProps: i, variant: "tertiary" }),
+      e && /* @__PURE__ */ t(m, { buttonProps: e, variant: "primary" })
+    ] }) : void 0
+  ] });
 };
 export {
-  S as EmptyState
+  C as EmptyState
 };

package/dist/components/file-preview/index.js

@@ -1,9 +1,15 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { styled as h } from "styled-components";
-import { Container as p } from "../container/index.js";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { styled as p } from "styled-components";
+import { Container as a } from "../container/index.js";
 import n from "lodash";
-import { Link as d } from "../link/index.js";
-const a = h(p).attrs(({ ...i }) => ({ display: "inline-block", position: "relative", ...i }))`
+import { Link as m } from "../link/index.js";
+const d = p(a).attrs(
+  ({ ...e }) => ({
+    display: "inline-block",
+    position: "relative",
+    ...e
+  })
+)`
   & img {
     display: block;
   }
@@ -16,13 +22,23 @@ const a = h(p).attrs(({ ...i }) => ({ display: "inline-block", position: "relati
     width: 100%;
     height: 100%;
     pointer-events: none;
-    ${({ $opacity: i = 0 }) => `background-color: rgba(0, 0, 0, ${i});`}
+    ${({ $opacity: e = 0 }) => `background-color: rgba(0, 0, 0, ${e});`}
   }
-`, m = (i, s) => !n.isUndefined(s) && n.includes(i, ((t) => {
-  if (n.isNil(t)) return "";
-  const e = t.split(".");
-  return (e.length > 1 ? n.last(e) : "").toLowerCase();
-})(s)), b = ({ alt: i, fileType: s, width: t = "100%", opacity: e = 0, src: o, height: l = "auto" }) => s === "video" || m(["webm"], o) ? r(a, { $opacity: e, children: c("video", { controls: !0, height: l, muted: !0, width: t, children: [r("source", { src: o, type: "video/webm" }), r(d, { href: o, iconPosition: "hidden", children: o })] }) }) : r(a, { $opacity: e, children: r("img", { alt: i, height: l, src: o, width: t }) });
+`, u = (e) => {
+  if (n.isNil(e)) return "";
+  const t = e.split(".");
+  return (t.length > 1 ? n.last(t) : "").toLowerCase();
+}, f = (e, t) => n.isUndefined(t) ? !1 : n.includes(e, u(t)), w = ({
+  alt: e,
+  fileType: t,
+  width: r = "100%",
+  opacity: s = 0,
+  src: o,
+  height: l = "auto"
+}) => t === "video" || f(["webm"], o) ? /* @__PURE__ */ i(d, { $opacity: s, children: /* @__PURE__ */ c("video", { controls: !0, height: l, muted: !0, width: r, children: [
+  /* @__PURE__ */ i("source", { src: o, type: "video/webm" }),
+  /* @__PURE__ */ i(m, { href: o, iconPosition: "hidden", children: o })
+] }) }) : /* @__PURE__ */ i(d, { $opacity: s, children: /* @__PURE__ */ i("img", { alt: e, height: l, src: o, width: r }) });
 export {
-  b as FilePreview
+  w as FilePreview
 };

package/dist/components/form/index.js

@@ -1,9 +1,9 @@
-import { jsx as n, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { styled as b } from "styled-components";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { styled as y } from "styled-components";
 import { Button as a } from "../button/index.js";
-import { Container as r } from "../container/index.js";
-const x = b.form`
+import { Container as n } from "../container/index.js";
+const b = y.form`
   ${({ theme: i }) => `
     align-items: flex-start;
     align-self: stretch;
@@ -17,10 +17,47 @@ const x = b.form`
       }
     }
   `}
-`, v = u(function({ cancelLabel: i, children: c, id: o = "modal-confirm", onCancel: e, onConfirm: t = "submit", submitLabel: m, submitDisabled: d = !1, ...f }, p) {
-  const l = t === "submit", h = [e, t].some(Boolean);
-  return n(x, { ref: p, ...f, children: s(r, { children: [n(r, { display: "flex", flexDirection: "column", gap: 0.5, mb: 1.5, children: c }), h && s(r, { display: "flex", gap: 0.75, maxWidth: "392px", children: [e ? n(a, { id: `${o}-cancel`, justify: "center", onClick: e, type: "reset", variant: "tertiary", width: "100%", children: i ?? "Cancel" }) : void 0, n(a, { disabled: d, id: o, justify: "center", onClick: l ? void 0 : t, type: l ? "submit" : "button", width: "100%", children: m ?? "Confirm" })] })] }) });
+`, F = x(function({
+  cancelLabel: m,
+  children: c,
+  id: o = "modal-confirm",
+  onCancel: e,
+  onConfirm: r = "submit",
+  submitLabel: d,
+  submitDisabled: f = !1,
+  ...p
+}, u) {
+  const s = r === "submit", h = [e, r].some(Boolean);
+  return /* @__PURE__ */ t(b, { ref: u, ...p, children: /* @__PURE__ */ l(n, { children: [
+    /* @__PURE__ */ t(n, { display: "flex", flexDirection: "column", gap: 0.5, mb: 1.5, children: c }),
+    h && /* @__PURE__ */ l(n, { display: "flex", gap: 0.75, maxWidth: "392px", children: [
+      e ? /* @__PURE__ */ t(
+        a,
+        {
+          id: `${o}-cancel`,
+          justify: "center",
+          onClick: e,
+          type: "reset",
+          variant: "tertiary",
+          width: "100%",
+          children: m ?? "Cancel"
+        }
+      ) : void 0,
+      /* @__PURE__ */ t(
+        a,
+        {
+          disabled: f,
+          id: o,
+          justify: "center",
+          onClick: s ? void 0 : r,
+          type: s ? "submit" : "button",
+          width: "100%",
+          children: d ?? "Confirm"
+        }
+      )
+    ] })
+  ] }) });
 });
 export {
-  v as Form
+  F as Form
 };