@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/inputs/utils/number-field/index.js

@@ -1,12 +1,85 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
 import { useMemo as h } from "react";
-import { useTheme as x } from "styled-components";
-import { S as g } from "../../../../styles-lSVV9kjn.mjs";
-import { ActionButton as n } from "../action-button/index.js";
-import { Icon as v } from "../../../icon/index.js";
-const N = ({ error: i, decimalPlaces: a = 0, disabled: e = !1, max: t = 1 / 0, min: l = 0, name: m = "input-number", placeholder: d, ref: c, required: p, value: s, ...u }) => {
-  const o = x(), b = h(() => a < 0 ? 0 : a, [a]);
-  return f(g, { className: `${e ? "disabled" : ""} ${i ? "error" : ""}`, children: [r("input", { "aria-hidden": !1, "aria-invalid": i ? "true" : "false", "aria-label": m, "aria-required": p, autoComplete: "off", disabled: e, max: t, min: l, placeholder: d, ref: c, required: void 0, step: 10 ** -b, type: "number", value: /^-?\d+/u.test(String(s)) ? s : "", ...u }), i && r(v, { icon: "exclamation-circle", iconClass: "error-icon", iconColor: o.palette.error[500], iconSize: "xs" }), r(n, { borderLeft: "inherit", borderRight: "inherit", disabled: e, icon: "minus", margin: "0 -0.625rem 0 0", px: 0.75, py: 0.75 }), r(n, { borderRadius: `0 ${o.spacing[0.5]} ${o.spacing[0.5]} 0`, disabled: e, icon: "plus", px: 0.75, py: 0.75 })] });
+import { useTheme as b } from "styled-components";
+import { S as g } from "../../../../styles-BXFVwnWT.mjs";
+import { ActionButton as m } from "../action-button/index.js";
+import { Icon as y } from "../../../icon/index.js";
+const N = ({
+  error: i,
+  decimalPlaces: o = 0,
+  disabled: r = !1,
+  max: a = 1 / 0,
+  min: p = 0,
+  name: s = "input-number",
+  placeholder: u,
+  ref: c,
+  required: f,
+  value: n,
+  ...l
+}) => {
+  const t = b(), d = h(
+    () => o < 0 ? 0 : o,
+    [o]
+  );
+  return /* @__PURE__ */ x(
+    g,
+    {
+      className: `${r ? "disabled" : ""} ${i ? "error" : ""}`,
+      children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            "aria-hidden": !1,
+            "aria-invalid": i ? "true" : "false",
+            "aria-label": s,
+            "aria-required": f,
+            autoComplete: "off",
+            disabled: r,
+            max: a,
+            min: p,
+            placeholder: u,
+            ref: c,
+            required: void 0,
+            step: 10 ** -d,
+            type: "number",
+            value: /^-?\d+/u.test(String(n)) ? n : "",
+            ...l
+          }
+        ),
+        i && /* @__PURE__ */ e(
+          y,
+          {
+            icon: "exclamation-circle",
+            iconClass: "error-icon",
+            iconColor: t.palette.error[500],
+            iconSize: "xs"
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            borderLeft: "inherit",
+            borderRight: "inherit",
+            disabled: r,
+            icon: "minus",
+            margin: "0 -0.625rem 0 0",
+            px: 0.75,
+            py: 0.75
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            borderRadius: `0 ${t.spacing[0.5]} ${t.spacing[0.5]} 0`,
+            disabled: r,
+            icon: "plus",
+            px: 0.75,
+            py: 0.75
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   N as NumberField

package/dist/components/inputs/utils/popover/index.js

@@ -1,13 +1,44 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useRef as v, useCallback as g } from "react";
-import { usePopover as m, Overlay as R } from "react-aria";
-const P = ({ className: o, children: p, isFilter: f = !1, popoverRef: t, state: a, triggerRef: e, ...c }) => {
-  var n;
-  const s = v(null), r = (n = e == null ? void 0 : e.current) == null ? void 0 : n.getBoundingClientRect(), { popoverProps: i } = m({ ...c, popoverRef: t ?? s, triggerRef: e }, a), d = g((u) => {
-    u.preventDefault();
-  }, []);
-  return l(R, { children: l("div", { ...i, className: o, onPointerDown: f ? d : void 0, ref: t ?? s, style: { ...i.style, ...o === "dropdown" ? { display: "flex", justifyContent: "center", width: r == null ? void 0 : r.width } : {} }, children: p }) });
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as m, useCallback as y } from "react";
+import { usePopover as P, Overlay as a } from "react-aria";
+const C = ({
+  className: e,
+  children: d,
+  isFilter: u = !1,
+  popoverRef: t,
+  state: i,
+  triggerRef: o,
+  ...c
+}) => {
+  var p;
+  const s = m(null), n = (p = o == null ? void 0 : o.current) == null ? void 0 : p.getBoundingClientRect(), { popoverProps: l } = P(
+    { ...c, popoverRef: t ?? s, triggerRef: o },
+    i
+  ), v = y(
+    (f) => {
+      f.preventDefault();
+    },
+    []
+  );
+  return /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(
+    "div",
+    {
+      ...l,
+      className: e,
+      onPointerDown: u ? v : void 0,
+      ref: t ?? s,
+      style: {
+        ...l.style,
+        ...e === "dropdown" ? {
+          display: "flex",
+          justifyContent: "center",
+          width: n == null ? void 0 : n.width
+        } : {}
+      },
+      children: d
+    }
+  ) });
 };
 export {
-  P as Popover
+  C as Popover
 };

package/dist/components/interactive-card/icon/index.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { a as p } from "../../../index-Co_k0WFk.mjs";
+import { a as p } from "../../../index-Ckmu1TfV.mjs";
 import "../../colors/index.js";
 import "../../icon/index.js";
 export {

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

@@ -1,15 +1,118 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useTheme as d } from "styled-components";
-import { I as h, a as f } from "../../index-Co_k0WFk.mjs";
+import { useTheme as p } from "styled-components";
+import { I as h, a as f } from "../../index-Ckmu1TfV.mjs";
 import { Button as g } from "../button/index.js";
 import { Container as o } from "../container/index.js";
-import { Heading as a } from "../typography/heading/index.js";
+import { Heading as r } from "../typography/heading/index.js";
 import "../typography/span/index.js";
 import { Text as l } from "../typography/text/index.js";
-const j = ({ category: r, description: s, href: c, icon: m, location: p, title: n }) => {
-  const i = d();
-  return t(h, { children: [t(o, { alignItems: "flex-start", display: "flex", flexDirection: "column", gap: 1.5, height: "100%", id: "uncover", justify: "space-between", children: [t("div", { className: "flex flex-col gap-0.5", children: [e(l, { color: i.palette.white, size: "sm", sizeSm: "xs", children: r }), e(a, { color: i.palette.white, fontWeight: "bold", lineSpacing: 2.25, lineSpacingSm: 1.75, size: "lg", sizeSm: "md", children: n })] }), t("div", { className: "flex flex-col gap-0.5", children: [e(l, { color: i.palette.white, size: "sm", sizeSm: "xs", children: "Location" }), e(l, { color: i.palette.white, fontWeight: "bold", lineSpacing: 1.5, lineSpacingSm: 1.25, size: "md", sizeSm: "sm", children: p })] })] }), t(o, { alignItems: "self-start", display: "flex", flexDirection: "column", gap: 2, height: "100%", id: "hovered", justify: "space-between", pt: 1, children: [e(a, { color: i.palette.white, fontWeight: "bold", lineSpacing: 1.75, lineSpacingSm: 1.5, size: "md", sizeSm: "sm", children: n }), t("div", { className: "flex flex-col gap-8", children: [e(l, { color: i.palette.gray[100], lineSpacing: 1.5, lineSpacingSm: 1.25, size: "md", sizeSm: "sm", children: s }), e(g, { external: !0, href: c, variant: "link", width: "max-content", children: "Download now" })] })] }), e(f, { icon: m })] });
+const y = ({
+  category: a,
+  description: c,
+  href: m,
+  icon: s,
+  location: d,
+  title: n
+}) => {
+  const i = p();
+  return /* @__PURE__ */ t(h, { children: [
+    /* @__PURE__ */ t(
+      o,
+      {
+        alignItems: "flex-start",
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5,
+        height: "100%",
+        id: "uncover",
+        justify: "space-between",
+        children: [
+          /* @__PURE__ */ t("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ e(l, { color: i.palette.white, size: "sm", sizeSm: "xs", children: a }),
+            /* @__PURE__ */ e(
+              r,
+              {
+                color: i.palette.white,
+                fontWeight: "bold",
+                lineSpacing: 2.25,
+                lineSpacingSm: 1.75,
+                size: "lg",
+                sizeSm: "md",
+                children: n
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ e(l, { color: i.palette.white, size: "sm", sizeSm: "xs", children: "Location" }),
+            /* @__PURE__ */ e(
+              l,
+              {
+                color: i.palette.white,
+                fontWeight: "bold",
+                lineSpacing: 1.5,
+                lineSpacingSm: 1.25,
+                size: "md",
+                sizeSm: "sm",
+                children: d
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      o,
+      {
+        alignItems: "self-start",
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        height: "100%",
+        id: "hovered",
+        justify: "space-between",
+        pt: 1,
+        children: [
+          /* @__PURE__ */ e(
+            r,
+            {
+              color: i.palette.white,
+              fontWeight: "bold",
+              lineSpacing: 1.75,
+              lineSpacingSm: 1.5,
+              size: "md",
+              sizeSm: "sm",
+              children: n
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: "flex flex-col gap-8", children: [
+            /* @__PURE__ */ e(
+              l,
+              {
+                color: i.palette.gray[100],
+                lineSpacing: 1.5,
+                lineSpacingSm: 1.25,
+                size: "md",
+                sizeSm: "sm",
+                children: c
+              }
+            ),
+            /* @__PURE__ */ e(
+              g,
+              {
+                external: !0,
+                href: m,
+                variant: "link",
+                width: "max-content",
+                children: "Download now"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(f, { icon: s })
+  ] });
 };
 export {
-  j as InteractiveCard
+  y as InteractiveCard
 };

package/dist/components/language-selector/index.js

@@ -1,13 +1,37 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as x, useCallback as d } from "react";
-import { S as p, a as h, b, I as f } from "../../index-38JqtnAI.mjs";
-import { Icon as g } from "../icon/index.js";
-const S = [{ text: "EN" }, { text: "ES" }], E = ({ items: r, handleClick: a, mode: s = "light" }) => {
-  const o = r ?? S, [c, l] = x(o[0].text), m = d((e) => () => {
-    a(e.text), l(e.text);
-  }, [a]);
-  return i(p, { children: [i(h, { className: s, children: [t(g, { icon: "globe", iconSize: "xs", iconType: "fa-light" }), c] }), t(b, { children: o.map((e, n) => t(f, { disabled: e.disabled, mode: s, onClick: m(e), text: e.text }, `${e.text}_${n}`)) })] });
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as x, useCallback as p } from "react";
+import { S, a as m, b as f, I as g } from "../../index-BzAniA2J.mjs";
+import { Icon as b } from "../icon/index.js";
+const u = [{ text: "EN" }, { text: "ES" }], j = ({
+  items: n,
+  handleClick: o,
+  mode: s = "light"
+}) => {
+  const c = n ?? u, [a, r] = x(c[0].text), i = p(
+    (t) => () => {
+      o(t.text), r(t.text);
+    },
+    [o]
+  );
+  return /* @__PURE__ */ l(S, { children: [
+    /* @__PURE__ */ l(m, { className: s, children: [
+      /* @__PURE__ */ e(b, { icon: "globe", iconSize: "xs", iconType: "fa-light" }),
+      a
+    ] }),
+    /* @__PURE__ */ e(f, { children: c.map(
+      (t, d) => /* @__PURE__ */ e(
+        g,
+        {
+          disabled: t.disabled,
+          mode: s,
+          onClick: i(t),
+          text: t.text
+        },
+        `${t.text}_${d}`
+      )
+    ) })
+  ] });
 };
 export {
-  E as LanguageSelector
+  j as LanguageSelector
 };

package/dist/components/language-selector/item-list/index.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { I as e } from "../../../index-38JqtnAI.mjs";
+import { I as e } from "../../../index-BzAniA2J.mjs";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import "../../typography/text/index.js";

package/dist/components/link/index.js

@@ -1,22 +1,27 @@
-import { jsxs as d, jsx as g } from "react/jsx-runtime";
-import { Link as m } from "react-router-dom";
-import { css as f, styled as p } from "styled-components";
-import { v as $ } from "../../utils-CQvBF-wY.mjs";
+import { jsxs as p, jsx as g } from "react/jsx-runtime";
+import { Link as y } from "react-router-dom";
+import { css as u, styled as s } from "styled-components";
+import { v as $ } from "../../utils-V0EumEPM.mjs";
 import { Icon as w } from "../icon/index.js";
-const { getVariant: v } = $((r) => ({ highRelevance: `
+const { getVariant: m } = $(
+  (r) => ({
+    highRelevance: `
       color: ${r.palette.primary[500]};
 
       &:hover:not([disabled]) {
         color: ${r.palette.primary[400]};
       }
-    `, lowRelevance: `
+    `,
+    lowRelevance: `
       color: ${r.palette.gray[800]};
 
       &:hover:not([disabled]) {
         color: ${r.palette.gray[500]};
       }
-    ` })), s = f`
-  ${({ theme: r, $color: a, $variant: n }) => `
+    `
+  })
+), c = u`
+  ${({ theme: r, $color: a, $variant: e }) => `
     align-items: center;
     cursor: pointer;
     font-family: ${r.typography.type.primary};
@@ -37,16 +42,65 @@ const { getVariant: v } = $((r) => ({ highRelevance: `
       text-decoration: none;
     }
 
-    ${a ?? v(r, n)}
+    ${a ?? m(r, e)}
   `}
-`, y = p.a`
-  ${s}
-`, k = p(m)`
-  ${s}
-`, j = ({ children: r, color: a, download: n, href: i, iconPosition: o = "right", onClick: l, target: e, variant: c = "lowRelevance" }) => {
-  const h = i.startsWith("https://"), t = g(w, { icon: n === void 0 ? "arrow-up-right-from-square" : "arrow-down-to-bracket", iconSize: "xxs", iconType: "fa-regular", ml: 0.25, mr: 0.25 });
-  return h ? d(y, { $color: a, $variant: c, download: n, href: i, onClick: l, rel: "nofollow noopener noreferrer", target: e ?? "_blank", children: [o === "left" ? t : void 0, r, o === "right" ? t : void 0] }) : d(k, { $variant: c, download: n, onClick: l, rel: "nofollow noopener noreferrer", target: e, to: i, children: [e !== void 0 && o === "left" ? t : void 0, r, e !== void 0 && o === "right" ? t : void 0] });
+`, x = s.a`
+  ${c}
+`, b = s(y)`
+  ${c}
+`, R = ({
+  children: r,
+  color: a,
+  download: e,
+  href: i,
+  iconPosition: o = "right",
+  onClick: l,
+  target: n,
+  variant: d = "lowRelevance"
+}) => {
+  const f = i.startsWith("https://"), t = /* @__PURE__ */ g(
+    w,
+    {
+      icon: e === void 0 ? "arrow-up-right-from-square" : "arrow-down-to-bracket",
+      iconSize: "xxs",
+      iconType: "fa-regular",
+      ml: 0.25,
+      mr: 0.25
+    }
+  );
+  return f ? /* @__PURE__ */ p(
+    x,
+    {
+      $color: a,
+      $variant: d,
+      download: e,
+      href: i,
+      onClick: l,
+      rel: "nofollow noopener noreferrer",
+      target: n ?? "_blank",
+      children: [
+        o === "left" ? t : void 0,
+        r,
+        o === "right" ? t : void 0
+      ]
+    }
+  ) : /* @__PURE__ */ p(
+    b,
+    {
+      $variant: d,
+      download: e,
+      onClick: l,
+      rel: "nofollow noopener noreferrer",
+      target: n,
+      to: i,
+      children: [
+        n !== void 0 && o === "left" ? t : void 0,
+        r,
+        n !== void 0 && o === "right" ? t : void 0
+      ]
+    }
+  );
 };
 export {
-  j as Link
+  R as Link
 };

package/dist/components/list-item/index.js

@@ -1,16 +1,67 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { Children as u, isValidElement as v, cloneElement as y } from "react";
-import { useTheme as C } from "styled-components";
-import { L as g } from "../../styles-Q1VXuWI7.mjs";
-import { a as V } from "../../styles-Q1VXuWI7.mjs";
-import { Container as k } from "../container/index.js";
-import { Icon as p } from "../icon/index.js";
-import { Link as I } from "../link/index.js";
-const E = ({ children: n, disabled: e = !1, icon: a, iconType: l = "fa-light", href: s, onClick: f, onKeyDown: h, selected: t = !1, value: i, ...x }) => {
-  const c = C().palette.gray[e ? 300 : 800], d = e ? u.map(n, (o) => v(o) ? y(o, { disabled: e, ...o.props }) : o) : n;
-  return m(g, { "aria-disabled": e, "aria-label": i, "aria-selected": t, "data-testid": i, onClick: f, onKeyDown: h, value: i, ...x, children: [a !== void 0 || i !== void 0 ? m(k, { alignItems: "center", display: "flex", gap: 0.625, children: [a ? r(p, { disabled: e, icon: a, iconColor: c, iconSize: "xs", iconType: l }) : null, s === void 0 ? d : r(I, { href: s, children: d })] }) : null, t ? r(p, { disabled: e, icon: "check", iconColor: c, iconSize: "xs", iconType: l }) : null] });
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { Children as C, isValidElement as L, cloneElement as g } from "react";
+import { useTheme as I } from "styled-components";
+import { L as d } from "../../styles-Bdque9TT.mjs";
+import { a as D } from "../../styles-Bdque9TT.mjs";
+import { Container as j } from "../container/index.js";
+import { Icon as c } from "../icon/index.js";
+import { Link as k } from "../link/index.js";
+const w = ({
+  children: i,
+  disabled: r = !1,
+  icon: o,
+  iconType: m = "fa-light",
+  href: s,
+  onClick: x,
+  onKeyDown: u,
+  selected: a = !1,
+  value: e,
+  ...h
+}) => {
+  const p = I().palette.gray[r ? 300 : 800], l = r ? C.map(i, (t) => L(t) ? g(t, {
+    disabled: r,
+    ...t.props
+  }) : t) : i;
+  return /* @__PURE__ */ f(
+    d,
+    {
+      "aria-disabled": r,
+      "aria-label": e,
+      "aria-selected": a,
+      "data-testid": e,
+      onClick: x,
+      onKeyDown: u,
+      value: e,
+      ...h,
+      children: [
+        o !== void 0 || e !== void 0 ? /* @__PURE__ */ f(j, { alignItems: "center", display: "flex", gap: 0.625, children: [
+          o ? /* @__PURE__ */ n(
+            c,
+            {
+              disabled: r,
+              icon: o,
+              iconColor: p,
+              iconSize: "xs",
+              iconType: m
+            }
+          ) : null,
+          s === void 0 ? l : /* @__PURE__ */ n(k, { href: s, children: l })
+        ] }) : null,
+        a ? /* @__PURE__ */ n(
+          c,
+          {
+            disabled: r,
+            icon: "check",
+            iconColor: p,
+            iconSize: "xs",
+            iconType: m
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
-  E as ListItem,
-  V as ListItemsWrapper
+  w as ListItem,
+  D as ListItemsWrapper
 };

package/dist/components/little-flag/index.js

@@ -1,15 +1,32 @@
-import { jsx as a } from "react/jsx-runtime";
-import { styled as r } from "styled-components";
-const i = r.span`
-  ${({ theme: t, $bgColor: n = t.palette.secondary[500], $txtDecoration: o = "none" }) => `
-  background-color: ${n};
+import { jsx as r } from "react/jsx-runtime";
+import { styled as i } from "styled-components";
+const s = i.span`
+  ${({
+  theme: o,
+  $bgColor: a = o.palette.secondary[500],
+  $txtDecoration: t = "none"
+}) => `
+  background-color: ${a};
   border-radius: 5px;
-  color: ${t.palette.white};
+  color: ${o.palette.white};
   font-size: 10px;
-  padding: ${t.spacing[0.125]} ${t.spacing[0.25]} ${t.spacing[0.125]} ${t.spacing[0.25]};
-  text-decoration: ${o}
+  padding: ${o.spacing[0.125]} ${o.spacing[0.25]} ${o.spacing[0.125]} ${o.spacing[0.25]};
+  text-decoration: ${t}
   `}
-`, l = ({ bgColor: t, children: n, txtDecoration: o, ml: e = 1 }) => a(i, { $bgColor: t, $txtDecoration: o, className: `ml-${e}`, children: n });
+`, l = ({
+  bgColor: o,
+  children: a,
+  txtDecoration: t,
+  ml: n = 1
+}) => /* @__PURE__ */ r(
+  s,
+  {
+    $bgColor: o,
+    $txtDecoration: t,
+    className: `ml-${n}`,
+    children: a
+  }
+);
 export {
   l as LittleFlag
 };