@fluidattacks/design 8.0.0 → 8.2.0

package/dist/components/filters/search/no-matches/index.js

@@ -1,6 +1,53 @@
-import "react/jsx-runtime";
-import "styled-components";
-import { cl as p } from "../../../../components-BgqdC3aZ.mjs";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useTheme as n } from "styled-components";
+import { Container as t } from "../../../container/index.js";
+import { StyledContent as o } from "../../styles.js";
+import { Icon as c } from "../../../icon/index.js";
+import { Heading as l } from "../../../typography/heading/index.js";
+import "../../../typography/span/index.js";
+import { Text as s } from "../../../typography/text/index.js";
+const y = () => {
+  const r = n();
+  return /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i(
+    t,
+    {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      gap: 0.75,
+      justify: "center",
+      px: 1.25,
+      py: 1.25,
+      children: [
+        /* @__PURE__ */ e(
+          t,
+          {
+            alignItems: "center",
+            bgColor: r.palette.gray[200],
+            borderRadius: r.spacing[0.5],
+            display: "flex",
+            justify: "center",
+            children: /* @__PURE__ */ e(c, { icon: "search", iconSize: "lg", mx: 0.5, my: 0.5 })
+          }
+        ),
+        /* @__PURE__ */ i(
+          t,
+          {
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "column",
+            gap: 0.25,
+            justify: "center",
+            children: [
+              /* @__PURE__ */ e(l, { fontWeight: "bold", size: "xs", textAlign: "center", children: "No matches found" }),
+              /* @__PURE__ */ e(s, { size: "md", textAlign: "center", children: "We couldn’t find anything that matches your filters. Try adjusting your search or clearing filters." })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
 export {
-  p as NoMatches
+  y as NoMatches
 };

package/dist/components/filters/styles.js

@@ -0,0 +1,121 @@
+import { styled as i } from "styled-components";
+import { sharedStyles as o } from "../link/styles.js";
+const s = i.div`
+  ${({ theme: t, $left: a = "0" }) => `
+    align-items: flex-start;
+    background: ${t.palette.white};
+    border-radius: ${t.spacing[0.5]};
+    border: 1px solid ${t.palette.gray[300]};
+    box-shadow: ${t.shadows.md};
+    display: flex;
+    flex-direction: column;
+    max-height: 450px;
+    min-height: 150px;
+    position: absolute;
+    top: 100%;
+    left: ${a};
+    width: 342px;
+    z-index: 99999;
+  `}
+`, d = i.div`
+  ${({ theme: t }) => `
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: ${t.spacing[0.625]};
+    padding: ${t.spacing[0.875]} ${t.spacing[0.875]} 0 ${t.spacing[0.875]};
+    width: 100%;
+  `}
+`, p = i.div`
+  ${({ theme: t }) => `
+    background-color: ${t.palette.white};
+    border-radius: 0 ${t.spacing[0.5]} 0 0;
+    display: flex;
+    gap: ${t.spacing[0.5]};
+    padding: ${t.spacing[0.875]} ${t.spacing[0.875]} 0 ${t.spacing[0.875]};
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+  `}
+`, r = i.div`
+  ${({ theme: t, $border: a, $overflow: n }) => `
+    align-items: flex-start;
+    border-top: ${a ? `1px solid ${t.palette.gray[200]}` : "unset"};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: ${n ? "hidden auto" : "unset"};
+    padding: ${t.spacing[0.875]};
+    width: 100%;
+
+    form, label, .parent-checkbox {
+      width: 100%;
+    }
+  `}
+`, c = i.div`
+  ${({ theme: t }) => `
+    align-items: center;
+    display: flex;
+    color: ${t.palette.gray[800]};
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text.md};
+    font-weight: ${t.typography.weight.regular};
+    gap: ${t.spacing[0.5]};
+    line-height: ${t.spacing[1.25]};
+    overflow: hidden;
+    padding: ${t.spacing[0.5]};
+    width: 100%;
+
+    &:has(.filter-item, [type="checkbox"]):hover:not(:disabled) {
+      background: ${t.palette.gray[100]};
+      cursor: pointer;
+    }
+
+    &:has(.selected) {
+      background: ${t.palette.gray[100]};
+    }
+
+    * > label {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  `}
+`, g = i.button`
+  ${o}
+  min-width: fit-content;
+`, $ = i.div`
+  ${({ theme: t }) => `
+    display: flex;
+    justify-content: space-between;
+    gap: ${t.spacing[0.5]};
+
+    > #active-filters {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${t.spacing[0.5]};
+      padding-bottom: ${t.spacing[1]};
+      width: 100%;
+    }
+
+    > #remove-all-filters {
+      height: fit-content;
+      margin-left: auto;
+    }
+  `}
+`, f = i.span`
+  margin-left: auto;
+`;
+export {
+  g as StyledActionButton,
+  $ as StyledActiveFilters,
+  r as StyledContent,
+  p as StyledFloatingActions,
+  d as StyledHeader,
+  c as StyledItem,
+  f as StyledItemCount,
+  s as StyledModalContainer
+};

package/dist/components/filters/utils.js

@@ -0,0 +1,36 @@
+const b = 7, f = (r) => r.reduce(
+  (t, e) => e.type === "toggle" ? { ...t, inline: [...t.inline, e] } : e.type === "select" ? { ...t, pinned: [...t.pinned, e] } : { ...t, menu: [...t.menu, e] },
+  { menu: [], inline: [], pinned: [] }
+), a = (r) => r.reduce(
+  (t, e) => (e.group ? (t[e.group] || (t[e.group] = []), t[e.group].push(e)) : t.default = [...t.default || [], e], t),
+  {}
+), h = (r, t, e) => {
+  const n = r.find((s) => s.id === t), i = n?.hideMenuTitle ?? !1;
+  if (!n || !e)
+    return {
+      hideMenuTitle: i,
+      label: n?.label ?? "",
+      options: n?.options ?? []
+    };
+  const u = e.split(","), l = n.options?.map((s) => {
+    if (!s.items) return s;
+    const d = [...s.items].sort((p, g) => {
+      const o = u.includes(p.value), m = u.includes(g.value);
+      return o === m ? 0 : o ? -1 : 1;
+    });
+    return { ...s, items: d };
+  });
+  return { hideMenuTitle: i, label: n.label, options: l };
+}, v = (r, t) => Object.entries(r).map(([e, n]) => {
+  const i = n.filter(
+    (u) => !u.hide && u.label.toLowerCase().includes(t.toLowerCase())
+  );
+  return i.length > 0 ? { group: e, filters: i } : void 0;
+}).filter((e) => e !== void 0);
+export {
+  b as MAX_FILTERS_LENGTH,
+  v as filterMenu,
+  a as getGroupedFilters,
+  h as getSelectedFilter,
+  f as partitionFilters
+};

package/dist/components/form/index.js

@@ -1,13 +1,105 @@
-import "react/jsx-runtime";
-import { D as s, aJ as t, aK as m, aF as l, aL as n } from "../../vendor-i-lggy4V.mjs";
-import "styled-components";
-import { R as p, _ as u } from "../../components-BgqdC3aZ.mjs";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { yupResolver as S } from "../../node_modules/@hookform/resolvers/yup/dist/yup.js";
+import { useForm as j, FormProvider as k } from "../../node_modules/react-hook-form/dist/index.esm.js";
+import { Controller as G, useController as J, useFieldArray as K, useFormContext as L, useWatch as M } from "../../node_modules/react-hook-form/dist/index.esm.js";
+import { useTheme as D } from "styled-components";
+import { InnerForm as Q } from "./inner-form/index.js";
+import { StyledForm as P } from "./styles.js";
+import { Button as h } from "../button/index.js";
+import { Container as t } from "../container/index.js";
+const z = ({
+  alert: n,
+  buttonAlignment: a,
+  cancelButton: o,
+  children: u,
+  confirmButton: s,
+  defaultDisabled: x = !0,
+  id: d = "modal-confirm",
+  maxButtonWidth: y = "392px",
+  mode: b,
+  onSubmit: g,
+  padding: C = !0,
+  showButtons: p = !0,
+  yupSchema: m,
+  ...F
+}) => {
+  const e = D(), i = j({
+    ...F,
+    mode: b ?? "all",
+    resolver: m ? S(m) : void 0
+  });
+  function $(f) {
+    f.stopPropagation(), i.handleSubmit(g)(f);
+  }
+  const v = p ? `calc(100% - ${n ? "139px" : "83px"})` : "100%", c = C ? 1.5 : 0;
+  return /* @__PURE__ */ r(k, { ...i, children: /* @__PURE__ */ r(P, { onSubmit: $, children: /* @__PURE__ */ l(t, { scroll: "y", width: "100%", children: [
+    /* @__PURE__ */ r(
+      t,
+      {
+        borderRadius: `0 0 ${e.spacing[0.25]} ${e.spacing[0.25]}`,
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.5,
+        height: v,
+        pb: c,
+        pt: 0,
+        px: c,
+        scroll: "y",
+        children: u
+      }
+    ),
+    p && /* @__PURE__ */ l(
+      t,
+      {
+        borderRadius: `0 0 ${e.spacing[0.25]} ${e.spacing[0.25]}`,
+        borderTop: `1px solid ${e.palette.gray[200]}`,
+        display: "flex",
+        flexDirection: a ? "unset" : "column",
+        gap: 0.625,
+        justify: a ?? "stretch",
+        position: "sticky",
+        px: 1.25,
+        py: 1.25,
+        children: [
+          n,
+          /* @__PURE__ */ l(t, { display: "flex", gap: 0.75, maxWidth: y, children: [
+            o ? /* @__PURE__ */ r(
+              h,
+              {
+                icon: o.icon,
+                id: `${d}-cancel`,
+                justify: "center",
+                onClick: o.onClick,
+                type: "reset",
+                variant: "tertiary",
+                width: "100%",
+                children: o.label ?? "Cancel"
+              }
+            ) : void 0,
+            /* @__PURE__ */ r(
+              h,
+              {
+                disabled: (s?.disabled ?? !1) || i.formState.isSubmitting || x && !i.formState.isDirty,
+                icon: s?.icon,
+                id: d,
+                justify: "center",
+                type: "submit",
+                width: "100%",
+                children: s?.label ?? "Confirm"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) }) });
+};
 export {
-  s as Controller,
-  p as Form,
-  u as InnerForm,
-  t as useController,
-  m as useFieldArray,
-  l as useFormContext,
-  n as useWatch
+  G as Controller,
+  z as Form,
+  Q as InnerForm,
+  J as useController,
+  K as useFieldArray,
+  L as useFormContext,
+  M as useWatch
 };

package/dist/components/form/inner-form/index.js

@@ -1,5 +1,10 @@
-import "../../../vendor-i-lggy4V.mjs";
-import { _ as e } from "../../../components-BgqdC3aZ.mjs";
+import { useFormContext as t } from "../../../node_modules/react-hook-form/dist/index.esm.js";
+const n = ({
+  children: o
+}) => {
+  const r = t();
+  return o({ ...r });
+};
 export {
-  e as InnerForm
+  n as InnerForm
 };

package/dist/components/form/styles.js

@@ -0,0 +1,15 @@
+import { styled as e } from "styled-components";
+const o = e.form`
+  ${({ theme: t }) => `
+    align-items: flex-start;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: ${t.spacing[0.5]};
+    overflow: hidden auto;
+    width: 100%;
+  `}
+`;
+export {
+  o as StyledForm
+};

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

@@ -1,6 +1,35 @@
-import "react/jsx-runtime";
-import "react";
-import { T as m } from "../../components-BgqdC3aZ.mjs";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as G } from "react";
+import { GridContainer as l } from "./styles.js";
+const w = G(function({
+  children: r,
+  md: o,
+  sm: n,
+  lg: i,
+  xl: t,
+  gap: a,
+  gridAutoFlow: m,
+  rowGap: $,
+  columnGap: e,
+  ...p
+}, d) {
+  return /* @__PURE__ */ f(
+    l,
+    {
+      $autoFlow: m,
+      $columnGap: e,
+      $gap: a,
+      $lg: i,
+      $md: o,
+      $rowGap: $,
+      $sm: n,
+      $xl: t,
+      ref: d,
+      ...p,
+      children: r
+    }
+  );
+});
 export {
-  m as GridContainer
+  w as GridContainer
 };

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

@@ -0,0 +1,26 @@
+import { styled as m } from "styled-components";
+import { BaseComponent as a } from "../@core/styles.js";
+const p = m(a)`
+  display: grid;
+  grid-template-columns: ${({ $sm: r }) => `repeat(${r}, 1fr)`};
+  grid-auto-flow: ${({ $autoFlow: r = "row" }) => r};
+  gap: ${({ $rowGap: r, $gap: e = 1.25 }) => r ? `${r}rem` : `${e}rem`}
+    ${({ $columnGap: r, $gap: e = 1.25 }) => r ? `${r}rem` : `${e}rem`};
+
+  ${({ theme: r, $xl: e, $lg: t, $md: i }) => `
+    @media (width >= ${r.breakpoints.sm}) {
+      grid-template-columns: repeat(${i}, 1fr);
+    }
+
+    @media (width >= ${r.breakpoints.md}) {
+      grid-template-columns: repeat(${t}, 1fr);
+    }
+
+    @media (width >= ${r.breakpoints.lg}) {
+      grid-template-columns: repeat(${e}, 1fr);
+    }
+  `}
+`;
+export {
+  p as GridContainer
+};

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

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

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

@@ -1,8 +1,32 @@
-import "react/jsx-runtime";
-import "react";
-import "styled-components";
-import { cs as p, ct as a } from "../../../components-BgqdC3aZ.mjs";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useCallback as c } from "react";
+import { useTheme as p } from "styled-components";
+import { OptionBoxContainer as l } from "../styles.js";
+import { Icon as s } from "../../icon/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as f } from "../../typography/text/index.js";
+const j = ({
+  isSelected: i = !1,
+  label: o,
+  onSelect: r
+}) => {
+  const t = p(), e = c(() => {
+    r && r(o);
+  }, [r, o]);
+  return /* @__PURE__ */ m(l, { $isSelected: i, onClick: e, children: [
+    i ? /* @__PURE__ */ n(
+      s,
+      {
+        icon: "check",
+        iconColor: t.palette.gray[800],
+        iconSize: "lg"
+      }
+    ) : null,
+    /* @__PURE__ */ n(f, { color: t.palette.gray[800], fontWeight: "bold", size: "md", children: o })
+  ] });
+};
 export {
-  p as OptionBoxContainer,
-  a as OptionContainer
+  l as OptionBoxContainer,
+  j as OptionContainer
 };

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

@@ -0,0 +1,42 @@
+import { styled as a } from "styled-components";
+const o = a.div`
+  ${({ theme: i, $itemsLength: r }) => `
+    display: flex;
+    background-color: ${i.palette.white};
+    border: 1px solid ${i.palette.gray[200]};
+    border-radius: ${i.spacing[0.25]};
+    box-shadow: ${i.shadows.lg};
+    flex-direction: column;
+    min-width: 507px;
+    max-width: ${r <= 4 ? "507px" : "980px"};
+    padding: ${i.spacing[1.5]};
+
+    @media screen and (max-width: 980px) and (min-width: 742px) {
+      width: 742px;
+    }
+    @media screen and (max-width: 742px) {
+      width: 507px;
+    }
+  `}
+`, p = a.div`
+  ${({ theme: i, $isSelected: r }) => `
+    align-items: center;
+    background-color: ${r ? i.palette.gray[100] : i.palette.white};
+    border: 1px solid ${i.palette.gray[200]};
+    border-radius: ${i.spacing[0.25]};
+    cursor: pointer;
+    display: flex;
+    flex-direction: ${r ? "row-reverse" : "row"};
+    min-height: 50px;
+    padding: ${i.spacing[1]} ${i.spacing[0.625]};
+    width: 215px;
+
+    &:hover {
+      background-color: ${i.palette.gray[100]};
+    }
+  `}
+`;
+export {
+  p as OptionBoxContainer,
+  o as StyledGroupContainer
+};