@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/card/card-with-input/index.js

@@ -1,31 +1,36 @@
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import { useMemo as x } from "react";
-import { styled as f } from "styled-components";
-import { CardHeader as y } from "../card-header/index.js";
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import { useMemo as I } from "react";
+import { styled as C } from "styled-components";
+import { CardHeader as j } from "../card-header/index.js";
 import "../../inputs/fields/combobox/index.js";
-import { InputDate as H } from "../../inputs/fields/date/index.js";
+import { InputDate as y } from "../../inputs/fields/date/index.js";
 import "../../inputs/fields/date-range/index.js";
 import "../../inputs/fields/date-time/index.js";
 import "lodash";
 import "../../icon/index.js";
-import "../../../index-D-lcuEHY.mjs";
+import "../../../index-DwznImvK.mjs";
 import "../../container/index.js";
 import "../../link/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import "../../typography/text/index.js";
-import { Input as I } from "../../inputs/fields/input/index.js";
+import { Input as h } from "../../inputs/fields/input/index.js";
 import "../../inputs/fields/input-file/index.js";
 import "../../inputs/fields/input-tags/index.js";
-import { InputNumber as W } from "../../inputs/fields/number/index.js";
+import { InputNumber as w } from "../../inputs/fields/number/index.js";
 import "../../inputs/fields/number-range/index.js";
 import "../../inputs/fields/phone/index.js";
 import "../../inputs/fields/text-area/index.js";
-import "../../../styles-lSVV9kjn.mjs";
+import "../../../styles-BXFVwnWT.mjs";
 import "../../tag/index.js";
 import "../../icon-button/index.js";
-const j = f.div`
-  ${({ theme: t, $align: i = "center", $minWidth: n = "auto", $minHeight: o = "auto" }) => `
+const H = C.div`
+  ${({
+  theme: t,
+  $align: r = "center",
+  $minWidth: p = "auto",
+  $minHeight: m = "auto"
+}) => `
     display: flex;
     background-color: ${t.palette.white};
     border-radius: ${t.spacing[0.25]};
@@ -33,25 +38,69 @@ const j = f.div`
     flex-direction: column;
     justify-content: center;
     gap: ${t.spacing[0.5]};
-    min-width: ${n};
-    min-height: ${o};
+    min-width: ${p};
+    min-height: ${m};
     padding: ${t.spacing[1]};
 
     input {
       color: ${t.palette.gray[800]};
       line-height: ${t.spacing[1.5]};
-      text-align: ${i};
+      text-align: ${r};
     }
   `}
-`, Y = ({ description: t, disabled: i, id: n, align: o, inputType: p = "text", inputNumberProps: a, minHeight: d, minWidth: l, name: e, placeholder: m, tooltip: s, title: c }) => {
-  const u = x(() => {
-    if (p === "text") return r(I, { disabled: i, name: e, placeholder: m });
-    if (p === "date") return r(H, { disabled: i, name: e });
-    const { decimalPlaces: g, max: $, min: h } = a ?? {};
-    return r(W, { decimalPlaces: g, disabled: i, max: $, min: h, name: e, placeholder: m });
-  }, [i, a, p, e, m]);
-  return b(j, { $align: o, $minHeight: d, $minWidth: l, children: [r(y, { description: t, id: n, title: c, tooltip: s }), u] });
+`, Z = ({
+  description: t,
+  disabled: r,
+  id: p,
+  align: m,
+  inputType: n = "text",
+  inputNumberProps: c,
+  minHeight: e,
+  minWidth: u,
+  name: i,
+  placeholder: a,
+  tooltip: g,
+  title: s
+}) => {
+  const $ = I(() => {
+    if (n === "text")
+      return /* @__PURE__ */ o(h, { disabled: r, name: i, placeholder: a });
+    if (n === "date")
+      return /* @__PURE__ */ o(y, { disabled: r, name: i });
+    const { decimalPlaces: d, max: f, min: l } = c ?? {};
+    return /* @__PURE__ */ o(
+      w,
+      {
+        decimalPlaces: d,
+        disabled: r,
+        max: f,
+        min: l,
+        name: i,
+        placeholder: a
+      }
+    );
+  }, [r, c, n, i, a]);
+  return /* @__PURE__ */ x(
+    H,
+    {
+      $align: m,
+      $minHeight: e,
+      $minWidth: u,
+      children: [
+        /* @__PURE__ */ o(
+          j,
+          {
+            description: t,
+            id: p,
+            title: s,
+            tooltip: g
+          }
+        ),
+        $
+      ]
+    }
+  );
 };
 export {
-  Y as CardWithInput
+  Z as CardWithInput
 };

package/dist/components/card/card-with-selector/index.js

@@ -1,16 +1,71 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import { useTheme as m } from "styled-components";
-import { M as c } from "../../../index-BwFnfaRh.mjs";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useTheme as f } from "styled-components";
+import { M as s } from "../../../index-maWH3JYC.mjs";
 import { Container as t } from "../../container/index.js";
-import { Icon as f } from "../../icon/index.js";
+import { Icon as c } from "../../icon/index.js";
 import { RadioButton as h } from "../../radio-button/index.js";
 import { Heading as g } from "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import "../../typography/text/index.js";
-const j = ({ alt: d, imageId: o, icon: r, selectorProps: a, onClick: l, title: s, width: p = "fit-content" }) => {
-  const e = m();
-  return n(t, { alignItems: "center", border: `1px solid ${e.palette.gray[200]}`, borderColorHover: e.palette.gray[600], borderRadius: e.spacing[0.25], display: "inline-flex", padding: [1, 1, 1, 1], shadowHover: "md", width: p, children: [i(t, { alignSelf: "start", display: "flex", width: "fit-content", children: i(h, { name: a.name, onClick: l, value: a.value }) }), n(t, { alignItems: "center", display: "flex", gap: 0.5, justify: "space-between", ml: 1, mr: 1, width: "100%", children: [o === void 0 ? void 0 : i(c, { alt: d ?? "card image", height: "32px", publicId: o, width: "32px" }), r === void 0 ? void 0 : i(f, { icon: r, iconSize: "sm", iconType: "fa-light" }), i(g, { fontWeight: "bold", lineSpacing: 1.75, size: "xs", children: s })] })] });
+const z = ({
+  alt: a,
+  imageId: n,
+  icon: r,
+  selectorProps: o,
+  onClick: m,
+  title: l,
+  width: p = "fit-content"
+}) => {
+  const i = f();
+  return /* @__PURE__ */ d(
+    t,
+    {
+      alignItems: "center",
+      border: `1px solid ${i.palette.gray[200]}`,
+      borderColorHover: i.palette.gray[600],
+      borderRadius: i.spacing[0.25],
+      display: "inline-flex",
+      padding: [1, 1, 1, 1],
+      shadowHover: "md",
+      width: p,
+      children: [
+        /* @__PURE__ */ e(t, { alignSelf: "start", display: "flex", width: "fit-content", children: /* @__PURE__ */ e(
+          h,
+          {
+            name: o.name,
+            onClick: m,
+            value: o.value
+          }
+        ) }),
+        /* @__PURE__ */ d(
+          t,
+          {
+            alignItems: "center",
+            display: "flex",
+            gap: 0.5,
+            justify: "space-between",
+            ml: 1,
+            mr: 1,
+            width: "100%",
+            children: [
+              n === void 0 ? void 0 : /* @__PURE__ */ e(
+                s,
+                {
+                  alt: a ?? "card image",
+                  height: "32px",
+                  publicId: n,
+                  width: "32px"
+                }
+              ),
+              r === void 0 ? void 0 : /* @__PURE__ */ e(c, { icon: r, iconSize: "sm", iconType: "fa-light" }),
+              /* @__PURE__ */ e(g, { fontWeight: "bold", lineSpacing: 1.75, size: "xs", children: l })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  j as CardWithSelector
+  z as CardWithSelector
 };

package/dist/components/card/card-with-switch/index.js

@@ -1,11 +1,49 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useTheme as m } from "styled-components";
-import { CardHeader as g } from "../card-header/index.js";
-import { Container as r } from "../../container/index.js";
-import { Toggle as p } from "../../toggle/index.js";
-const y = ({ id: o, title: a, toggles: n, minWidth: s = "auto", height: d = "auto" }) => {
-  const i = m();
-  return l(r, { alignItems: "center", bgColor: i.palette.white, border: `1px solid ${i.palette.gray[200]}`, borderRadius: i.spacing[0.25], display: "flex", flexDirection: "column", gap: 0.5, height: d, justify: "center", minHeight: "100px", minWidth: s, padding: [1.25, 1.25, 1.25, 1.25], children: [t(g, { id: o, title: a }), t(r, { display: "flex", flexDirection: "column", gap: 0.5, minHeight: "40px", width: "100%", children: n.map((e) => t(p, { ...e }, `$card-toggle-${e.name}`)) })] });
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useTheme as d } from "styled-components";
+import { CardHeader as c } from "../card-header/index.js";
+import { Container as i } from "../../container/index.js";
+import { Toggle as g } from "../../toggle/index.js";
+const y = ({
+  id: o,
+  title: a,
+  toggles: m,
+  minWidth: n = "auto",
+  height: l = "auto"
+}) => {
+  const e = d();
+  return /* @__PURE__ */ p(
+    i,
+    {
+      alignItems: "center",
+      bgColor: e.palette.white,
+      border: `1px solid ${e.palette.gray[200]}`,
+      borderRadius: e.spacing[0.25],
+      display: "flex",
+      flexDirection: "column",
+      gap: 0.5,
+      height: l,
+      justify: "center",
+      minHeight: "100px",
+      minWidth: n,
+      padding: [1.25, 1.25, 1.25, 1.25],
+      children: [
+        /* @__PURE__ */ t(c, { id: o, title: a }),
+        /* @__PURE__ */ t(
+          i,
+          {
+            display: "flex",
+            flexDirection: "column",
+            gap: 0.5,
+            minHeight: "40px",
+            width: "100%",
+            children: m.map(
+              (r) => /* @__PURE__ */ t(g, { ...r }, `$card-toggle-${r.name}`)
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   y as CardWithSwitch

package/dist/components/carousel/index.js

@@ -1,50 +1,76 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import { useCallback as m } from "react";
-import { styled as r } from "styled-components";
-import { u } from "../../use-carousel-CvRxi2FI.mjs";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { useCallback as u } from "react";
+import { styled as e } from "styled-components";
+import { u as m } from "../../use-carousel-CgAF78h3.mjs";
 import "lodash";
-const h = r.div`
+const g = e.div`
   position: relative;
   margin: auto;
   overflow: hidden;
-`, $ = r.div`
+`, v = e.div`
   display: flex;
   transition: transform 0.5s ease-in-out;
   transform: translateX(
-    ${({ $currentIndex: e }) => 100 * -e}%
+    ${({ $currentIndex: t }) => -t * 100}%
   );
-`, g = r.div`
+`, f = e.div`
   align-items: center;
   display: flex;
   justify-content: center;
   min-width: 100%;
-`, f = r.button`
-  ${({ theme: e, $isActive: s }) => `
-    background-color: ${s ? e.palette.primary[400] : e.palette.white};
+`, $ = e.button`
+  ${({ theme: t, $isActive: a }) => `
+    background-color: ${a ? t.palette.primary[400] : t.palette.white};
     border: none;
     border-radius: 50%;
     cursor: pointer;
-    height: ${e.spacing[0.75]};
-    width: ${e.spacing[0.75]};
+    height: ${t.spacing[0.75]};
+    width: ${t.spacing[0.75]};
   `}
-`, v = r.div`
+`, y = e.div`
   align-items: center;
   display: flex;
-  gap: ${({ theme: e }) => e.spacing[0.5]};
+  gap: ${({ theme: t }) => t.spacing[0.5]};
   justify-content: center;
-  margin-top: ${({ theme: e }) => e.spacing[2]};
-`, C = ({ slides: e, interval: s = 300 }) => {
-  const { cycle: o, setCycle: l, setProgress: c } = u(s, e.length), d = m((n) => () => {
-    l(n), c(0);
-  }, [l, c]);
-  return p(h, { "aria-roledescription": "carousel", children: [a($, { $currentIndex: o, children: e.map((n, t) => {
-    const i = `slide-${t}`;
-    return a(g, { "aria-label": i, "aria-roledescription": "slide", children: n.content }, i);
-  }) }), a(v, { children: e.map((n, t) => {
-    const i = `nav-button-${t}`;
-    return a(f, { $isActive: t === o, "aria-label": `Go to slide ${t + 1}`, "data-testid": t === o ? "active" : "inactive", onClick: d(t) }, i);
-  }) })] });
+  margin-top: ${({ theme: t }) => t.spacing[2]};
+`, w = ({
+  slides: t,
+  interval: a = 300
+}) => {
+  const { cycle: s, setCycle: c, setProgress: l } = m(a, t.length), p = u(
+    (n) => () => {
+      c(n), l(0);
+    },
+    [c, l]
+  );
+  return /* @__PURE__ */ d(g, { "aria-roledescription": "carousel", children: [
+    /* @__PURE__ */ i(v, { $currentIndex: s, children: t.map((n, r) => {
+      const o = `slide-${r}`;
+      return /* @__PURE__ */ i(
+        f,
+        {
+          "aria-label": o,
+          "aria-roledescription": "slide",
+          children: n.content
+        },
+        o
+      );
+    }) }),
+    /* @__PURE__ */ i(y, { children: t.map((n, r) => {
+      const o = `nav-button-${r}`;
+      return /* @__PURE__ */ i(
+        $,
+        {
+          $isActive: r === s,
+          "aria-label": `Go to slide ${r + 1}`,
+          "data-testid": r === s ? "active" : "inactive",
+          onClick: p(r)
+        },
+        o
+      );
+    }) })
+  ] });
 };
 export {
-  C as Carousel
+  w as Carousel
 };

package/dist/components/checkbox/index.js

@@ -1,23 +1,23 @@
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { styled as u } from "styled-components";
-import { Icon as b } from "../icon/index.js";
-const y = u.label`
-  ${({ theme: e }) => `
+import { jsxs as $, jsx as p } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { styled as b } from "styled-components";
+import { Icon as u } from "../icon/index.js";
+const f = b.label`
+  ${({ theme: a }) => `
     align-items: start;
-    color: ${e.palette.gray[600]};
+    color: ${a.palette.gray[600]};
     display: flex;
     cursor: pointer;
-    font-family: ${e.typography.type.primary};
-    font-size: ${e.typography.text.sm};
-    font-weight: ${e.typography.weight.regular};
-    line-height: ${e.spacing[1]};
+    font-family: ${a.typography.type.primary};
+    font-size: ${a.typography.text.sm};
+    font-weight: ${a.typography.weight.regular};
+    line-height: ${a.spacing[1]};
     letter-spacing: 0;
     position: relative;
     text-align: left;
 
     &[aria-disabled="true"] {
-      color: ${e.palette.gray[300]};
+      color: ${a.palette.gray[300]};
       cursor: not-allowed;
     }
 
@@ -30,55 +30,89 @@ const y = u.label`
     }
 
     svg {
-      background-color: ${e.palette.white};
-      border-radius: ${e.spacing[0.25]};
-      border: 1px solid ${e.palette.gray[600]};
+      background-color: ${a.palette.white};
+      border-radius: ${a.spacing[0.25]};
+      border: 1px solid ${a.palette.gray[600]};
       top: 0;
       left: 0;
-      height: ${e.spacing[0.5]};
-      margin-right: ${e.spacing[0.5]};
-      width: ${e.spacing[0.5]};
-      padding: ${e.spacing[0.25]};
+      height: ${a.spacing[0.5]};
+      margin-right: ${a.spacing[0.5]};
+      width: ${a.spacing[0.5]};
+      padding: ${a.spacing[0.25]};
     }
 
     svg > path {
-      fill: ${e.palette.white};
+      fill: ${a.palette.white};
     }
 
     input:checked ~ span > svg {
-      background-color: ${e.palette.primary[500]};
-      border: 1px solid ${e.palette.primary[500]};
+      background-color: ${a.palette.primary[500]};
+      border: 1px solid ${a.palette.primary[500]};
     }
 
     input:disabled ~ span > svg {
-      border: 1px solid ${e.palette.gray[300]};
+      border: 1px solid ${a.palette.gray[300]};
       cursor: not-allowed;
     }
 
     input:not(:disabled):hover ~ span > svg {
-      box-shadow: 0 0 0 4px ${e.palette.gray[100]};
+      box-shadow: 0 0 0 4px ${a.palette.gray[100]};
     }
 
     input:checked:disabled ~ span > svg {
-      background-color: ${e.palette.gray[300]};
-      border: 1px solid ${e.palette.gray[300]};
+      background-color: ${a.palette.gray[300]};
+      border: 1px solid ${a.palette.gray[300]};
     }
 
     input:not(:disabled):hover:checked ~ span > svg {
-      box-shadow: 0 0 0 4px ${e.palette.primary[50]};
+      box-shadow: 0 0 0 4px ${a.palette.primary[50]};
     }
 
     input:checked ~ span > svg > path {
-      fill: ${e.palette.white};
+      fill: ${a.palette.white};
     }
 
     input:checked:disabled ~ span > svg > path {
-      fill: ${e.palette.white};
+      fill: ${a.palette.white};
     }
   `}
-`, x = h(function({ defaultChecked: e = !1, disabled: n = !1, label: o, name: a, onChange: r, onClick: l, onFocus: p, onKeyDown: s, value: t, ...d }, c) {
-  return g(y, { "aria-disabled": n, htmlFor: a, children: [i("input", { "aria-checked": e, "aria-disabled": n, "aria-label": a, defaultChecked: e, disabled: n, id: a, name: a, onChange: r, onClick: l, onFocus: p, onKeyDown: s, ref: c, type: "checkbox", value: t, ...d }), i(b, { disabled: n, icon: "check", iconSize: "sm" }), o ?? t] });
+`, v = y(function({
+  defaultChecked: o = !1,
+  disabled: i = !1,
+  label: l,
+  name: r,
+  onChange: s,
+  onClick: n,
+  onFocus: e,
+  onKeyDown: c,
+  value: t,
+  ...d
+}, g) {
+  return /* @__PURE__ */ $(f, { "aria-disabled": i, htmlFor: r, children: [
+    /* @__PURE__ */ p(
+      "input",
+      {
+        "aria-checked": o,
+        "aria-disabled": i,
+        "aria-label": r,
+        defaultChecked: o,
+        disabled: i,
+        id: r,
+        name: r,
+        onChange: s,
+        onClick: n,
+        onFocus: e,
+        onKeyDown: c,
+        ref: g,
+        type: "checkbox",
+        value: t,
+        ...d
+      }
+    ),
+    /* @__PURE__ */ p(u, { disabled: i, icon: "check", iconSize: "sm" }),
+    l ?? t
+  ] });
 });
 export {
-  x as Checkbox
+  v as Checkbox
 };

package/dist/components/cloud-image/index.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
-import { M as a } from "../../index-BwFnfaRh.mjs";
+import { M as a } from "../../index-maWH3JYC.mjs";
 import "react";
-import "../../use-cloudinary-image-fG7ODNgr.mjs";
+import "../../use-cloudinary-image-BCxwj15o.mjs";
 import "lodash";
 export {
   a as CloudImage

package/dist/components/code-snippet/index.js

@@ -1,27 +1,72 @@
 import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import s from "lodash";
-import { useState as f, useCallback as p, useMemo as C } from "react";
-import { useTheme as x } from "styled-components";
-import { C as y, B as v } from "../../styles-Cx93EcVo.mjs";
-import { Button as w } from "../button/index.js";
-import { Container as S } from "../container/index.js";
-import { Icon as b } from "../icon/index.js";
-import { IconButton as j } from "../icon-button/index.js";
-const L = ({ noCodeMessage: l = "Code snippet not available", snippet: o }) => {
-  const e = x(), [t, c] = f(!1), [g, m] = f(!0), u = p(() => {
-    c((i) => !i);
-  }, [c]), h = p(() => {
-    if (s.isNil(o) || s.isEmpty(o) || !s.isString(o)) return m(!1), l;
-    const i = o.split(`
+import l from "lodash";
+import { useState as g, useCallback as c, useMemo as C } from "react";
+import { useTheme as w } from "styled-components";
+import { C as x, B as y } from "../../styles-CROOwXEH.mjs";
+import { Button as S } from "../button/index.js";
+import { Container as v } from "../container/index.js";
+import { Icon as B } from "../icon/index.js";
+import { IconButton as b } from "../icon-button/index.js";
+const E = ({
+  noCodeMessage: s = "Code snippet not available",
+  snippet: o
+}) => {
+  const e = w(), [i, h] = g(!1), [d, m] = g(!0), u = c(() => {
+    h((t) => !t);
+  }, [h]), p = c(() => {
+    if (l.isNil(o) || l.isEmpty(o) || !l.isString(o))
+      return m(!1), s;
+    const t = o.split(`
 `);
-    return i.length > 8 && !t ? `${[...i].splice(0, 7).join(`
+    return t.length > 8 && !i ? `${[...t].splice(0, 7).join(`
 `)}
-${i[8]}...` : (i.length < 8 && m(!1), o);
-  }, [t, o, l]), r = C(h, [h]), d = p(async () => {
+${t[8]}...` : (t.length < 8 && m(!1), o);
+  }, [i, o, s]), r = C(p, [p]), f = c(async () => {
     await navigator.clipboard.writeText(r);
   }, [r]);
-  return a(S, { bgColor: e.palette.gray[100], borderRadius: "4px", display: "inline-flex", minWidth: "565px", position: "relative", children: [n(y, { "data-private": !0, children: n("pre", { children: n("code", { className: "language-none", children: r }) }) }), a(v, { children: [n(j, { height: e.spacing[2.5], icon: "copy", iconColor: e.palette.gray[700], iconSize: "xs", iconType: "fa-light", onClick: d, variant: "ghost", width: e.spacing[2.5] }), !!g && a(w, { onClick: u, variant: "ghost", children: [t ? "Show Less" : "Show more", n(b, { icon: t ? "chevron-up" : "chevron-down", iconColor: e.palette.gray[700], iconSize: "xxs", iconType: "fa-light", ml: 0.25, onClick: d })] })] })] });
+  return /* @__PURE__ */ a(
+    v,
+    {
+      bgColor: e.palette.gray[100],
+      borderRadius: "4px",
+      display: "inline-flex",
+      minWidth: "565px",
+      position: "relative",
+      children: [
+        /* @__PURE__ */ n(x, { "data-private": !0, children: /* @__PURE__ */ n("pre", { children: /* @__PURE__ */ n("code", { className: "language-none", children: r }) }) }),
+        /* @__PURE__ */ a(y, { children: [
+          /* @__PURE__ */ n(
+            b,
+            {
+              height: e.spacing[2.5],
+              icon: "copy",
+              iconColor: e.palette.gray[700],
+              iconSize: "xs",
+              iconType: "fa-light",
+              onClick: f,
+              variant: "ghost",
+              width: e.spacing[2.5]
+            }
+          ),
+          d ? /* @__PURE__ */ a(S, { onClick: u, variant: "ghost", children: [
+            i ? "Show Less" : "Show more",
+            /* @__PURE__ */ n(
+              B,
+              {
+                icon: i ? "chevron-up" : "chevron-down",
+                iconColor: e.palette.gray[700],
+                iconSize: "xxs",
+                iconType: "fa-light",
+                ml: 0.25,
+                onClick: f
+              }
+            )
+          ] }) : !1
+        ] })
+      ]
+    }
+  );
 };
 export {
-  L as CodeSnippet
+  E as CodeSnippet
 };