@fluidattacks/design 3.1.13 → 3.2.0

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

@@ -1,95 +1,6 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-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 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" })
-  ] });
-};
+import "react/jsx-runtime";
+import "react";
+import { bh as e } from "../../components-C7JPRIEW.mjs";
 export {
-  j as ContentCardCarousel
+  e as ContentCardCarousel
 };

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

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

package/dist/components/divider/index.js

@@ -1,25 +1,6 @@
-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
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import { F as p } from "../../components-C7JPRIEW.mjs";
 export {
-  h as Divider
+  p as Divider
 };

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

@@ -1,6 +1,5 @@
-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 });
+import "react/jsx-runtime";
+import { bi as p } from "../../../components-C7JPRIEW.mjs";
 export {
-  c as EmptyButton
+  p as EmptyButton
 };

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

@@ -1,85 +1,5 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { EmptyButton as m } from "./empty-button/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 h = n.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: ${({ theme: i, $padding: e }) => i.spacing[e]};
-  max-width: 900px;
-  white-space: pre-line;
-  margin: 0 auto;
-`, y = n.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  width: 96px;
-  height: 96px;
-  margin-bottom: ${({ theme: i }) => i.spacing[2]};
-
-  > img {
-    width: 100%;
-  }
-`, u = n.div`
-  display: flex;
-  flex-direction: row;
-  margin: 0;
-  margin-bottom: ${({ theme: i }) => i.spacing[2]};
-
-  > * {
-    margin-right: ${({ theme: i }) => i.spacing[0.75]};
-  }
-
-  > *:last-child {
-    margin-right: 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
-  ] });
-};
+import "react/jsx-runtime";
+import { G as p } from "../../components-C7JPRIEW.mjs";
 export {
-  C as EmptyState
+  p as EmptyState
 };

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

@@ -1,44 +1,5 @@
-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 m } from "../link/index.js";
-const d = p(a).attrs(
-  ({ ...e }) => ({
-    display: "inline-block",
-    position: "relative",
-    ...e
-  })
-)`
-  & img {
-    display: block;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    ${({ $opacity: e = 0 }) => `background-color: rgba(0, 0, 0, ${e});`}
-  }
-`, 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 }) });
+import "react/jsx-runtime";
+import { H as o } from "../../components-C7JPRIEW.mjs";
 export {
-  w as FilePreview
+  o as FilePreview
 };

package/dist/components/form/index.js

@@ -1,63 +1,6 @@
-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 n } from "../container/index.js";
-const b = y.form`
-  ${({ theme: i }) => `
-    align-items: flex-start;
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-    gap: ${i.spacing[0.5]};
-
-    &:has(button[type="reset"]) {
-      &:last-child {
-        margin-top: ${i.spacing[1]};
-      }
-    }
-  `}
-`, 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"
-        }
-      )
-    ] })
-  ] }) });
-});
+import "react/jsx-runtime";
+import "react";
+import { I as t } from "../../components-C7JPRIEW.mjs";
 export {
-  F as Form
+  t as Form
 };

package/dist/components/grid-container/index.js

@@ -1,48 +1,6 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as $ } from "react";
-import { styled as s } from "styled-components";
-import { B as l } from "../../styles-CplEd2kw.mjs";
-const f = s(l)`
-  display: grid;
-  gap: ${({ $gap: r = 1.25 }) => `${r}rem`};
-  grid-template-columns: ${({ $sm: r }) => `repeat(${r}, 1fr)`};
-
-  ${({ theme: r, $xl: t, $lg: e, $md: i }) => `
-    @media (width >= ${r.breakpoints.sm}) {
-      grid-template-columns: repeat(${i}, 1fr);
-    }
-
-    @media (width >= ${r.breakpoints.md}) {
-      grid-template-columns: repeat(${e}, 1fr);
-    }
-
-    @media (width >= ${r.breakpoints.lg}) {
-      grid-template-columns: repeat(${t}, 1fr);
-    }
-  `}
-`, C = $(function({
-  children: t,
-  md: e,
-  sm: i,
-  lg: o,
-  xl: a,
-  gap: m,
-  ...n
-}, p) {
-  return /* @__PURE__ */ d(
-    f,
-    {
-      $gap: m,
-      $lg: o,
-      $md: e,
-      $sm: i,
-      $xl: a,
-      ref: p,
-      ...n,
-      children: t
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import { J as m } from "../../components-C7JPRIEW.mjs";
 export {
-  C as GridContainer
+  m as GridContainer
 };

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-C7JPRIEW.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-C7JPRIEW.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-C7JPRIEW.mjs";
 export {
-  w as Icon
+  t as Icon
 };