@fluidattacks/design 3.1.13 → 3.1.14

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

@@ -1,135 +1,8 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { useState as p, useCallback as d, useEffect as z } from "react";
-import { createPortal as T } from "react-dom";
-import { useTheme as v } from "styled-components";
-import { S as L, O as j, a as k } from "../../index-CWlrSlUk.mjs";
-import { Container as t } from "../container/index.js";
-import { Divider as O } from "../divider/index.js";
-import { Icon as B } from "../icon/index.js";
-import { IconButton as F } from "../icon-button/index.js";
-import { Search as G } from "../search/index.js";
-import "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as h } from "../typography/text/index.js";
-const Q = ({
-  isOpen: f = !0,
-  items: n,
-  handleNewOrganization: u,
-  onSelect: g,
-  onClose: x,
-  selectedItem: y,
-  title: C,
-  variant: S
-}) => {
-  const o = v(), [c, l] = p(n), [s, m] = p(""), a = d(
-    (r) => {
-      l(
-        (I) => I.filter(
-          (b) => String(b.name).toLowerCase().includes(r.toLocaleLowerCase())
-        )
-      );
-    },
-    [l]
-  ), w = d(
-    (r) => {
-      r.currentTarget && (m(r.currentTarget.value), a(r.currentTarget.value));
-    },
-    [m, a]
-  );
-  return z(() => {
-    l(n), a(s);
-  }, [n, a, s]), f ? T(/* @__PURE__ */ e(
-    t,
-    {
-      "aria-modal": "true",
-      className: "comp-modal fixed inset-0 overflow-auto",
-      zIndex: 99999,
-      children: /* @__PURE__ */ e(
-        t,
-        {
-          alignItems: "center",
-          bgColor: "rgb(52 64 84 / 70%)",
-          display: "flex",
-          height: "100vh",
-          justify: "center",
-          left: "0",
-          top: "0",
-          width: "100%",
-          children: /* @__PURE__ */ i(L, { $itemsLength: c.length, children: [
-            /* @__PURE__ */ i(
-              t,
-              {
-                alignItems: "center",
-                display: "flex",
-                justify: "space-between",
-                children: [
-                  /* @__PURE__ */ e(
-                    h,
-                    {
-                      color: o.palette.gray[800],
-                      fontWeight: "bold",
-                      size: "lg",
-                      children: C
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    F,
-                    {
-                      icon: "xmark",
-                      iconColor: o.palette.gray[400],
-                      iconSize: "xs",
-                      iconType: "fa-light",
-                      onClick: x,
-                      variant: "ghost"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ e(t, { mt: 1, children: /* @__PURE__ */ e(G, { onInput: w, placeholder: "Search" }) }),
-            /* @__PURE__ */ e(O, { mb: 1, mt: 1 }),
-            /* @__PURE__ */ i(
-              t,
-              {
-                display: "inline-flex",
-                gap: 1,
-                maxHeight: "332px",
-                scroll: "y",
-                wrap: "wrap",
-                children: [
-                  S === "organization-selector" ? /* @__PURE__ */ e(j, { onClick: u, children: /* @__PURE__ */ i(t, { alignItems: "center", display: "flex", children: [
-                    /* @__PURE__ */ e(
-                      B,
-                      {
-                        icon: "square-plus",
-                        iconColor: o.palette.gray[400],
-                        iconSize: "xs",
-                        iconType: "fa-light",
-                        mr: 0.5
-                      }
-                    ),
-                    /* @__PURE__ */ e(h, { color: o.palette.gray[400], size: "sm", children: "New organization" })
-                  ] }) }) : void 0,
-                  c.map(
-                    (r) => /* @__PURE__ */ e(
-                      k,
-                      {
-                        isSelected: y.toLowerCase() === r.name,
-                        label: r.name.charAt(0).toUpperCase() + r.name.slice(1),
-                        onSelect: g
-                      },
-                      r.name
-                    )
-                  )
-                ]
-              }
-            )
-          ] })
-        }
-      )
-    }
-  ), document.body) : /* @__PURE__ */ e("div", {});
-};
+import "react/jsx-runtime";
+import "react";
+import "react-dom";
+import "styled-components";
+import { K as e } from "../../components-C2JBXbtI.mjs";
 export {
-  Q as GroupSelector
+  e as GroupSelector
 };

package/dist/components/group-selector/option-container/index.js

@@ -1,12 +1,8 @@
 import "react/jsx-runtime";
 import "react";
 import "styled-components";
-import { O, a as s } from "../../../index-CWlrSlUk.mjs";
-import "../../icon/index.js";
-import "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import "../../typography/text/index.js";
+import { bk as p, bj as a } from "../../../components-C2JBXbtI.mjs";
 export {
-  O as OptionBoxContainer,
-  s as OptionContainer
+  p as OptionBoxContainer,
+  a as OptionContainer
 };

package/dist/components/icon/index.js

@@ -1,108 +1,6 @@
-import { jsx as $ } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { styled as c } from "styled-components";
-import { c as b } from "../../styles-CplEd2kw.mjs";
-const y = {
-  xl: "96px",
-  lg: "64px",
-  md: "32px",
-  sm: "24px",
-  xs: "16px",
-  xxs: "12px",
-  xxss: "10px"
-}, z = c(b)`
-  ${({
-  $clickable: i,
-  $color: o = "inherit",
-  $disabled: a = !1,
-  $hoverColor: e,
-  $rotation: r,
-  $size: n,
-  $secondaryColor: s
-}) => {
-  const t = e ? "" : "brightness(50%)", l = e ?? "";
-  return `
-      color: ${o};
-      cursor: ${i ? "pointer" : "inherit"};
-      font-size: ${y[n]};
-      line-height: 0;
-      vertical-align: middle;
-      pointer-events: inherit;
-      opacity: ${a ? "0.5" : "1"};
-
-      > svg {
-        --fa-secondary-color: ${s};
-        transform: ${r === void 0 ? "" : `rotate(${r}deg)`};
-      }
-
-      .fill-gradient-01 path {
-        fill: url(/gradients.svg#gradient-01);
-        fill: url(#gradient-01);
-      }
-      .fill-gradient-02 path {
-        fill: url(/gradients.svg#gradient-02);
-        fill: url(#gradient-02);
-      }
-
-      ${i ? `&:hover {
-              filter: ${t};
-              color: ${l};
-            }` : ""}
-    `;
-}}
-`;
-c.div`
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  &:hover:not([disabled]) {
-    transform: scale(1.2);
-  }
-`;
-const w = v(function({
-  clickable: o,
-  disabled: a,
-  hoverColor: e,
-  icon: r,
-  iconClass: n = "",
-  iconColor: s,
-  iconMask: t,
-  iconSize: l,
-  iconTransform: d,
-  iconType: f = "fa-solid",
-  onClick: p,
-  rotation: m,
-  spanClass: g,
-  secondaryColor: x,
-  ...h
-}, u) {
-  return /* @__PURE__ */ $(
-    z,
-    {
-      $clickable: o,
-      $color: s,
-      $disabled: a,
-      $hoverColor: e,
-      $rotation: m,
-      $secondaryColor: x,
-      $size: l,
-      className: g,
-      "data-testid": `${r}-icon`,
-      onClick: p,
-      ref: u,
-      ...h,
-      children: /* @__PURE__ */ $(
-        "i",
-        {
-          className: `${f} fa-${r} ${n}`,
-          ...t !== void 0 ? { "data-fa-mask": t } : {},
-          ...d !== void 0 ? { "data-fa-transform": d } : {}
-        }
-      )
-    },
-    `${f}-${r}`
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import { L as t } from "../../components-C2JBXbtI.mjs";
 export {
-  w as Icon
+  t as Icon
 };

package/dist/components/icon-button/index.js

@@ -1,76 +1,6 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as S } from "react";
-import { styled as T } from "styled-components";
-import { S as j } from "../../styles-B2N0JLw1.mjs";
-import { Icon as k } from "../icon/index.js";
-import { T as w } from "../../index-DwznImvK.mjs";
-const R = T(j)`
-  ${({ theme: r, $borderRadius: t = "4px", $px: n = 0.5, $py: o = 0.5 }) => `
-    --btn-spacing: ${t};
-    --btn-padding-x: ${r.spacing[n]};
-    --btn-padding-y: ${r.spacing[o]};
-
-    align-items: center;
-    line-height: 0;
-    text-align: center;
-
-    > span {
-      margin: 0 !important;
-    }
-  `}
-`, E = S(function({
-  borderRadius: t,
-  disabled: n,
-  icon: o,
-  iconColor: m,
-  iconSize: s = "xxs",
-  iconTransform: f,
-  iconType: d,
-  id: a,
-  justify: g = "center",
-  onClick: u,
-  px: $,
-  py: x,
-  type: e = "button",
-  tooltip: c,
-  tooltipPlace: b,
-  value: y,
-  variant: p = "primary",
-  ...B
-}, I) {
-  const l = /* @__PURE__ */ i(
-    R,
-    {
-      $borderRadius: t,
-      $px: $,
-      $py: x,
-      $variant: p,
-      "aria-disabled": n,
-      "aria-label": a,
-      borderRadius: t,
-      disabled: n,
-      id: a,
-      justify: g,
-      onClick: u,
-      ref: I,
-      type: e,
-      value: y,
-      ...B,
-      children: /* @__PURE__ */ i(
-        k,
-        {
-          clickable: !1,
-          icon: o,
-          iconColor: m,
-          iconSize: s,
-          iconTransform: f,
-          iconType: d
-        }
-      )
-    }
-  ), h = (e + (p ?? "") + (a ?? o)).replace(/ /u, "_");
-  return c === void 0 ? l : /* @__PURE__ */ i(w, { id: `${h}-tooltip`, place: b, tip: c, children: l });
-});
+import "react/jsx-runtime";
+import "react";
+import { N as p } from "../../components-C2JBXbtI.mjs";
 export {
-  E as IconButton
+  p as IconButton
 };

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

@@ -1,74 +1,7 @@
-import { jsx as l, jsxs as n } from "react/jsx-runtime";
-import { isUndefined as r } from "lodash";
-import { useTheme as h } from "styled-components";
-import { Container as p } from "../container/index.js";
-import { T as b } from "../../index-DwznImvK.mjs";
-import { Heading as C } from "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as T } from "../typography/text/index.js";
-const W = ({
-  description: s,
-  height: m = "auto",
-  leftIconName: o,
-  children: c,
-  rightIconName: d,
-  title: a,
-  tooltipId: f,
-  tooltipTip: g,
-  tooltipPlace: x = "bottom",
-  variant: u = "centered",
-  width: y = "318px"
-}) => {
-  const t = h(), e = u === "centered", i = /* @__PURE__ */ l(
-    b,
-    {
-      icon: d ?? o,
-      iconColor: t.palette.gray[800],
-      id: f,
-      place: x,
-      tip: g
-    }
-  );
-  return /* @__PURE__ */ n(
-    p,
-    {
-      alignItems: e ? "center" : "flex-start",
-      bgColor: t.palette.gray[50],
-      border: `1px solid ${t.palette.gray[200]}`,
-      borderRadius: "4px",
-      display: "inline-flex",
-      flexDirection: e ? "column" : "column-reverse",
-      gap: 0.5,
-      height: m,
-      justify: "center",
-      padding: [1.25, 1.25, 1.25, 1.25],
-      width: y,
-      children: [
-        /* @__PURE__ */ n(p, { alignItems: "center", display: "flex", gap: 0.5, children: [
-          e || r(o) ? void 0 : i,
-          /* @__PURE__ */ l(
-            T,
-            {
-              color: e ? t.palette.gray[800] : t.palette.gray[400],
-              size: "md",
-              textAlign: e ? "center" : "start",
-              children: s
-            }
-          ),
-          e || r(d) ? void 0 : i
-        ] }),
-        /* @__PURE__ */ n(p, { alignItems: "center", display: "flex", gap: 0.5, my: 0.5, children: [
-          e && !r(o) ? i : void 0,
-          /* @__PURE__ */ n("div", { style: { display: "flex", gap: "12px" }, children: [
-            r(a) ? void 0 : /* @__PURE__ */ l(C, { fontWeight: "bold", size: "md", children: a }),
-            c
-          ] }),
-          e && !r(d) ? i : void 0
-        ] })
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "lodash";
+import "styled-components";
+import { O as p } from "../../components-C2JBXbtI.mjs";
 export {
-  W as IndicatorCard
+  p as IndicatorCard
 };

package/dist/components/info-sidebar/index.js

@@ -1,116 +1,6 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { useTheme as x } from "styled-components";
-import { Button as h } from "../button/index.js";
-import { Container as t } from "../container/index.js";
-import { IconButton as y } from "../icon-button/index.js";
-import { Tabs as g } from "../tabs/index.js";
-import "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as u } from "../typography/text/index.js";
-const D = ({
-  actions: a,
-  children: m,
-  header: f,
-  title: c,
-  tabs: d,
-  footer: n
-}) => {
-  const i = x();
-  return /* @__PURE__ */ p(
-    t,
-    {
-      alignItems: "flex-start",
-      bgColor: i.palette.white,
-      borderLeft: `1px solid ${i.palette.gray[300]}`,
-      display: "flex",
-      flexDirection: "column",
-      maxHeight: "750px",
-      width: "480px",
-      children: [
-        /* @__PURE__ */ p(
-          t,
-          {
-            alignItems: "flex-start",
-            alignSelf: "stretch",
-            borderBottom: `1px solid ${i.palette.gray[300]}`,
-            display: "flex",
-            gap: 0.25,
-            justify: "space-between",
-            px: 1.25,
-            py: 1,
-            children: [
-              /* @__PURE__ */ p(t, { display: "flex", flexDirection: "column", gap: 0.25, children: [
-                /* @__PURE__ */ e(
-                  u,
-                  {
-                    color: i.palette.gray[800],
-                    fontWeight: "bold",
-                    lineSpacing: 1.75,
-                    size: "xl",
-                    children: c
-                  }
-                ),
-                f
-              ] }),
-              a && /* @__PURE__ */ e(t, { display: "flex", gap: 0.25, children: a.map(
-                ({ icon: r, onClick: l }, o) => /* @__PURE__ */ e(
-                  y,
-                  {
-                    icon: r ?? "paper-plane",
-                    iconColor: i.palette.gray[400],
-                    iconSize: "xxs",
-                    iconType: "fa-light",
-                    onClick: l,
-                    variant: "ghost"
-                  },
-                  `${o}-${r}`
-                )
-              ) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(t, { display: "flex", pt: 0.25, width: "100%", children: /* @__PURE__ */ e(g, { items: d }) }),
-        /* @__PURE__ */ e(
-          t,
-          {
-            alignSelf: "stretch",
-            display: "flex",
-            flexDirection: "column",
-            px: 1.25,
-            py: 1,
-            scroll: "y",
-            children: m
-          }
-        ),
-        n && /* @__PURE__ */ e(
-          t,
-          {
-            alignSelf: "stretch",
-            borderTop: `1px solid ${i.palette.gray[300]}`,
-            display: "flex",
-            gap: 0.5,
-            justify: "end",
-            px: 1.25,
-            py: 1,
-            children: n.map(
-              ({ icon: r, text: l, onClick: o }, s) => /* @__PURE__ */ e(
-                h,
-                {
-                  icon: r,
-                  onClick: o,
-                  variant: s === 0 ? "primary" : "tertiary",
-                  width: "100%",
-                  children: l
-                },
-                `${s}-${l}`
-              )
-            )
-          }
-        )
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { P as p } from "../../components-C2JBXbtI.mjs";
 export {
-  D as InfoSidebar
+  p as InfoSidebar
 };

package/dist/components/inputs/fields/combobox/index.js

@@ -1,146 +1,9 @@
-import { jsx as r, jsxs as O } from "react/jsx-runtime";
-import { forwardRef as J, useState as x, useRef as u, useMemo as Q, useCallback as C } from "react";
-import { useFilter as U, useComboBox as W, useListBox as X, useButton as Y } from "react-aria";
-import { Item as Z, useComboBoxState as _ } from "react-stately";
-import { useTheme as k } from "styled-components";
-import { S as g, O as oo } from "../../../../index-CUQBAqt_.mjs";
-import { OutlineContainer as to } from "../../outline-container/index.js";
-import { S as eo } from "../../../../styles-BXFVwnWT.mjs";
-import { Popover as no } from "../../utils/popover/index.js";
-import { Icon as ro } from "../../../icon/index.js";
-import { IconButton as so } from "../../../icon-button/index.js";
-const Io = J(function({
-  disabled: b = !1,
-  error: i,
-  helpLink: z,
-  helpLinkText: F,
-  helpText: N,
-  label: B,
-  name: m,
-  items: t,
-  onChange: e,
-  required: T,
-  tooltip: V,
-  value: S,
-  weight: j,
-  ...K
-}, I) {
-  const P = k(), [l, R] = x(S ?? ""), [L, v] = x(S), [a, h] = x(t), { contains: c } = U({ sensitivity: "base" }), f = u(null), d = u(null), w = u(null), y = u(null), $ = Q(() => t.map(
-    (o) => c(o.name, l) ? /* @__PURE__ */ r(Z, { children: o.name }, o.value) : null
-  ), [c, l, t]), D = C(
-    (o) => {
-      R(o), v((s) => {
-        const p = o === "" ? "" : s;
-        return e == null || e(p), p;
-      }), h(t.filter((s) => c(s.name, o)));
-    },
-    [c, t, e]
-  ), E = C(
-    (o) => {
-      var s;
-      o && (R(((s = t.find((p) => p.value === o)) == null ? void 0 : s.name) ?? ""), v(String(o)), e == null || e(o), h(t));
-    },
-    [e, t]
-  ), n = _({
-    allowsEmptyCollection: !0,
-    inputValue: l,
-    items: a,
-    shouldCloseOnBlur: !0,
-    selectedKey: L,
-    onInputChange: D,
-    onSelectionChange: E,
-    children: $
-  }), {
-    buttonProps: M,
-    inputProps: q,
-    listBoxProps: A
-  } = W(
-    {
-      inputValue: l,
-      items: a,
-      buttonRef: f,
-      id: m,
-      inputRef: I,
-      label: B,
-      listBoxRef: d,
-      name: m,
-      popoverRef: y
-    },
-    n
-  ), { listBoxProps: G } = X(A, n, d), { buttonProps: H } = Y(M, f);
-  return /* @__PURE__ */ O(
-    to,
-    {
-      error: i,
-      helpLink: z,
-      helpLinkText: F,
-      helpText: N,
-      htmlFor: m,
-      label: B,
-      required: T,
-      tooltip: V,
-      weight: j,
-      children: [
-        /* @__PURE__ */ O(
-          eo,
-          {
-            className: `${b ? "disabled" : ""} ${i ? "error" : ""}`,
-            ref: w,
-            children: [
-              /* @__PURE__ */ r(
-                "input",
-                {
-                  ...q,
-                  ...K,
-                  "aria-invalid": i ? "true" : "false",
-                  ref: I
-                }
-              ),
-              i ? /* @__PURE__ */ r(
-                ro,
-                {
-                  icon: "exclamation-circle",
-                  iconClass: "error-icon",
-                  iconColor: P.palette.error[500],
-                  iconSize: "xs"
-                }
-              ) : void 0,
-              /* @__PURE__ */ r(
-                so,
-                {
-                  ...H,
-                  className: "action",
-                  icon: n.isOpen ? "chevron-up" : "chevron-down",
-                  iconColor: P.palette.gray[400],
-                  iconSize: "xxs",
-                  iconType: "fa-light",
-                  px: 0.125,
-                  py: 0.125,
-                  ref: f,
-                  variant: "ghost"
-                }
-              )
-            ]
-          }
-        ),
-        n.isOpen && n.collection.size > 0 && !b ? /* @__PURE__ */ r(
-          no,
-          {
-            className: "dropdown",
-            offset: 4,
-            placement: "bottom start",
-            popoverRef: y,
-            state: n,
-            triggerRef: w,
-            children: /* @__PURE__ */ r(g, { ...G, ref: d, children: a.map(
-              (o) => /* @__PURE__ */ r(oo, { item: o, state: n }, o.value)
-            ) })
-          }
-        ) : null
-      ]
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import "react-aria";
+import "react-stately";
+import "styled-components";
+import { S as a } from "../../../../components-C2JBXbtI.mjs";
 export {
-  Io as ComboBox
+  a as ComboBox
 };