@fluidattacks/design 3.1.13 → 3.2.0

package/dist/components/@core/index.js

@@ -1,18 +1,17 @@
-import { v as e } from "../../utils-V0EumEPM.mjs";
-import { a as o, B as n, c as i, b as r, k as p, h as d, j as B, i as m, f as g, e as C, s as f, g as x, d as l } from "../../styles-CplEd2kw.mjs";
+import { a as e, B as t, c as n, b as o, k as i, h as r, j as d, i as p, f as B, e as g, s as m, g as C, d as f, v as l } from "../../components-C7JPRIEW.mjs";
 export {
-  o as BaseButtonComponent,
-  n as BaseComponent,
-  i as BaseSpanComponent,
-  r as BaseTextComponent,
-  p as getStyledConfig,
-  d as hiddenProps,
-  B as setBorder,
-  m as setDisplay,
-  g as setInteraction,
-  C as setMargin,
-  f as setPadding,
-  x as setPosition,
-  l as setText,
-  e as variantBuilder
+  e as BaseButtonComponent,
+  t as BaseComponent,
+  n as BaseSpanComponent,
+  o as BaseTextComponent,
+  i as getStyledConfig,
+  r as hiddenProps,
+  d as setBorder,
+  p as setDisplay,
+  B as setInteraction,
+  g as setMargin,
+  m as setPadding,
+  C as setPosition,
+  f as setText,
+  l as variantBuilder
 };

package/dist/components/accordion/accordion-content/index.js

@@ -1,22 +1,5 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { Container as r } from "../../container/index.js";
-import "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import { Text as o } from "../../typography/text/index.js";
-const s = ({
-  item: e
-}) => /* @__PURE__ */ i(
-  r,
-  {
-    display: "block",
-    id: `panel-${e.title}`,
-    padding: [0.75, 0.75, 0.75, 0.75],
-    children: [
-      e.description ? /* @__PURE__ */ n(o, { mb: e.extraElement ? 0.5 : void 0, size: "sm", children: e.description }) : void 0,
-      e.extraElement ? /* @__PURE__ */ n(r, { children: e.extraElement }) : void 0
-    ]
-  }
-);
+import "react/jsx-runtime";
+import { aV as n } from "../../../components-C7JPRIEW.mjs";
 export {
-  s as AccordionContent
+  n as AccordionContent
 };

package/dist/components/accordion/index.js

@@ -1,78 +1,7 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as b, useState as m, useCallback as C } from "react";
-import { useTheme as w } from "styled-components";
-import { AccordionContent as x } from "./accordion-content/index.js";
-import { Container as n } from "../container/index.js";
-import { Icon as y } from "../icon/index.js";
-import "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as A } from "../typography/text/index.js";
-const H = b(function({ aligned: f = "end", items: a, bgColor: s }, h) {
-  const o = w(), [c, p] = m(!1), [i, u] = m(-1), g = C(
-    (e) => () => {
-      u(e), p(e === i ? (t) => !t : !0);
-    },
-    [i]
-  );
-  return /* @__PURE__ */ r(n, { ref: h, children: a.map((e, t) => {
-    const l = t === i && c;
-    return /* @__PURE__ */ d(n, { bgColor: s ?? o.palette.white, children: [
-      /* @__PURE__ */ r(
-        n,
-        {
-          "aria-controls": `panel-${e.title}`,
-          "aria-expanded": c,
-          "aria-label": e.title,
-          as: "button",
-          bgColor: s ?? o.palette.white,
-          bgColorHover: o.palette.gray[100],
-          borderBottom: l || t === a.length - 1 ? "1px solid" : void 0,
-          borderColor: o.palette.gray[200],
-          borderTop: "1px solid",
-          cursor: "pointer",
-          display: "flex",
-          onClick: g(t),
-          padding: [0.75, 0.75, 0.75, 0.75],
-          width: "100%",
-          children: /* @__PURE__ */ d(
-            n,
-            {
-              as: "summary",
-              display: "flex",
-              flexDirection: f === "end" ? "row" : "row-reverse",
-              gap: 0.75,
-              justify: "space-between",
-              width: "100%",
-              children: [
-                /* @__PURE__ */ r(
-                  A,
-                  {
-                    color: o.palette.gray[800],
-                    fontWeight: "bold",
-                    size: "sm",
-                    sizeSm: "sm",
-                    textAlign: "start",
-                    children: e.title
-                  }
-                ),
-                /* @__PURE__ */ r(
-                  y,
-                  {
-                    icon: l ? "chevron-up" : "chevron-down",
-                    iconColor: o.palette.gray[400],
-                    iconSize: "xs",
-                    iconType: "fa-light"
-                  }
-                )
-              ]
-            }
-          )
-        }
-      ),
-      l && /* @__PURE__ */ r(x, { item: e })
-    ] }, e.title);
-  }) });
-});
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { A as t } from "../../components-C7JPRIEW.mjs";
 export {
-  H as Accordion
+  t as Accordion
 };

package/dist/components/alert/index.js

@@ -1,164 +1,6 @@
-import { jsx as t, jsxs as k } from "react/jsx-runtime";
-import { forwardRef as w, useState as y, useCallback as v, useEffect as s } from "react";
-import { styled as p } from "styled-components";
-import { v as C } from "../../utils-V0EumEPM.mjs";
-import { Container as T } from "../container/index.js";
-import { Icon as B } from "../icon/index.js";
-import { IconButton as S } from "../icon-button/index.js";
-const z = (o) => {
-  switch (o) {
-    case "warning":
-      return "triangle-exclamation";
-    case "info":
-      return "circle-info";
-    case "success":
-      return "circle-check";
-    case "error":
-    default:
-      return "circle-exclamation";
-  }
-}, { getVariant: A } = C(
-  (o) => ({
-    error: `
-      background: ${o.palette.error[50]};
-      border: 1px solid ${o.palette.error[500]};
-      color: ${o.palette.error[700]};
-
-      button {
-        color: ${o.palette.error[700]};
-
-        &:hover:not([disabled]) {
-          background-color: ${o.palette.error[200]};
-          color: ${o.palette.error[700]};
-        }
-      }
-    `,
-    info: `
-      background: ${o.palette.info[50]};
-      border: 1px solid ${o.palette.info[500]};
-      color: ${o.palette.info[700]};
-
-      button {
-        color: ${o.palette.info[700]};
-
-        &:hover:not([disabled]) {
-          background-color: ${o.palette.info[200]};
-          color: ${o.palette.info[700]};
-        }
-      }
-    `,
-    success: `
-      background: ${o.palette.success[50]};
-      border: 1px solid ${o.palette.success[500]};
-      color: ${o.palette.success[700]};
-
-      button {
-        color: ${o.palette.success[700]};
-
-        &:hover:not([disabled]) {
-          background-color: ${o.palette.success[200]};
-          color: ${o.palette.success[700]};
-        }
-      }
-    `,
-    warning: `
-      background: ${o.palette.warning[50]};
-      border: 1px solid ${o.palette.warning[500]};
-      color: ${o.palette.warning[700]};
-
-      button {
-        color: ${o.palette.warning[700]};
-
-        &:hover:not([disabled]) {
-          background-color: ${o.palette.warning[200]};
-          color: ${o.palette.warning[700]};
-        }
-      }
-    `
-  })
-), I = p.div`
-  ${({ theme: o, $variant: r }) => `
-    background: transparent;
-    align-items: center;
-    border-radius: ${o.spacing[0.25]};
-    display: inline-flex;
-    font-family: ${o.typography.type.primary};
-    font-size: ${o.typography.text.sm};
-    font-weight: ${o.typography.weight.bold};
-    line-height: ${o.spacing[1.25]};
-    min-width: 250px;
-    width: 100%;
-    padding: ${o.spacing[0.75]};
-    position: relative;
-    gap: ${o.spacing[0.75]};
-
-    button {
-      background-color: transparent;
-    }
-
-    ${A(o, r ?? "error")}
-  `}
-`, j = p.div`
-  padding-right: 4px;
-  width: 100%;
-`, F = w(function({
-  autoHide: r = !1,
-  children: d,
-  closable: u = !1,
-  onTimeOut: n,
-  show: a = !0,
-  time: i = 8,
-  variant: l = "error",
-  id: g,
-  ...f
-}, $) {
-  const [b, e] = y(a), c = v(() => {
-    e(!1);
-  }, []);
-  return s(() => {
-    const x = setTimeout(() => {
-      n == null || n(!0), r && c();
-    }, i * 1e3);
-    return () => {
-      clearTimeout(x);
-    };
-  }, [r, c, i, n]), s(() => {
-    e(a);
-  }, [a, e]), /* @__PURE__ */ t(
-    T,
-    {
-      display: b ? "block" : "none",
-      ref: $,
-      role: "alert",
-      ...f,
-      children: /* @__PURE__ */ k(I, { $variant: l, id: g, children: [
-        /* @__PURE__ */ t(
-          B,
-          {
-            clickable: !1,
-            icon: z(l),
-            iconSize: "xs",
-            iconType: "fa-light"
-          }
-        ),
-        /* @__PURE__ */ t(j, { children: d }),
-        u ? /* @__PURE__ */ t(
-          S,
-          {
-            height: "fit-content",
-            icon: "close",
-            iconSize: "xs",
-            iconType: "fa-light",
-            onClick: c,
-            px: 0.125,
-            py: 0.125,
-            variant: "ghost"
-          }
-        ) : void 0
-      ] })
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import { l as p } from "../../components-C7JPRIEW.mjs";
 export {
-  F as Alert
+  p as Alert
 };

package/dist/components/button/index.js

@@ -1,69 +1,6 @@
-import { jsx as t, jsxs as g } from "react/jsx-runtime";
-import { forwardRef as j, useCallback as B } from "react";
-import { S as C } from "../../styles-B2N0JLw1.mjs";
-import { Icon as p } from "../icon/index.js";
-import { T as z } from "../../index-DwznImvK.mjs";
-import { isObject as I } from "lodash";
-const $ = (r, n = !0) => {
-  const o = window.open(
-    r,
-    n ? void 0 : "_self",
-    "noopener,noreferrer,"
-  );
-  I(o) && (o.opener = null);
-}, q = j(function({
-  children: n,
-  disabled: o = !1,
-  external: l = !1,
-  href: i,
-  id: s,
-  icon: a,
-  name: m,
-  onClick: u,
-  showArrow: b = !1,
-  type: k = "button",
-  tooltip: f,
-  tooltipPlace: T = "bottom",
-  underline: h = !1,
-  value: w,
-  variant: e = "primary",
-  ...x
-}, y) {
-  const c = f !== void 0, d = `${s}-tooltip`, S = B(() => {
-    i && $(i, l);
-  }, [l, i]);
-  return /* @__PURE__ */ t(
-    z,
-    {
-      disabled: !c,
-      id: d,
-      place: T,
-      tip: f,
-      children: /* @__PURE__ */ g(
-        C,
-        {
-          $variant: e,
-          "aria-disabled": o,
-          className: h ? "underline" : void 0,
-          disabled: o,
-          id: s,
-          name: m,
-          onClick: e === "link" ? S : u,
-          ref: y,
-          type: k,
-          value: w,
-          ...c ? { "data-tooltip-id": d } : {},
-          ...x,
-          children: [
-            a !== void 0 && /* @__PURE__ */ t(p, { icon: a, iconSize: "xs", iconType: "fa-light" }),
-            n,
-            (b || e === "link") && /* @__PURE__ */ t(p, { icon: "arrow-right", iconSize: "xs", iconType: "fa-light" })
-          ]
-        }
-      )
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import { m as p } from "../../components-C7JPRIEW.mjs";
 export {
-  q as Button
+  p as Button
 };

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

@@ -1,83 +1,6 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useTheme as b } from "styled-components";
-import { Container as s } from "../../container/index.js";
-import { T as g } from "../../../index-DwznImvK.mjs";
-import "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import { Text as t } from "../../typography/text/index.js";
-const W = ({
-  authorEmail: d,
-  date: l,
-  description: i,
-  descriptionColor: c,
-  id: p,
-  title: a,
-  titleColor: f,
-  textAlign: e,
-  textSpacing: h = 0,
-  tooltip: m
-}) => {
-  const o = b();
-  return /* @__PURE__ */ n(s, { width: "100%", children: [
-    typeof a == "string" ? /* @__PURE__ */ r(
-      t,
-      {
-        color: f ?? o.palette.gray[800],
-        fontWeight: "bold",
-        mb: h,
-        size: "sm",
-        textAlign: e,
-        wordBreak: "break-word",
-        children: a
-      }
-    ) : a,
-    /* @__PURE__ */ n(
-      s,
-      {
-        alignItems: "start",
-        display: "flex",
-        flexDirection: "column",
-        gap: 0.25,
-        children: [
-          i && /* @__PURE__ */ r(
-            t,
-            {
-              color: c ?? o.palette.gray[800],
-              fontWeight: i === void 0 ? "bold" : "regular",
-              size: "sm",
-              textAlign: e,
-              wordBreak: "break-word",
-              children: i
-            }
-          ),
-          l && /* @__PURE__ */ r(
-            t,
-            {
-              color: o.palette.gray[800],
-              fontWeight: "bold",
-              size: "sm",
-              textAlign: e,
-              wordBreak: "break-word",
-              children: `Date: ${l.split(" ")[0]}`
-            }
-          ),
-          d && /* @__PURE__ */ r(
-            t,
-            {
-              color: o.palette.gray[800],
-              fontWeight: "bold",
-              size: "sm",
-              textAlign: e,
-              wordBreak: "break-word",
-              children: `$Author: ${d}`
-            }
-          ),
-          m && /* @__PURE__ */ r(g, { icon: "circle-info", id: p, tip: m })
-        ]
-      }
-    )
-  ] });
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { C as m } from "../../../components-C7JPRIEW.mjs";
 export {
-  W as CardHeader
+  m as CardHeader
 };

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

@@ -1,93 +1,7 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import C, { useState as w, useCallback as s } from "react";
-import { useTheme as H } from "styled-components";
-import { CardHeader as j } from "../card-header/index.js";
-import { Container as r } from "../../container/index.js";
-import { FilePreview as I } from "../../file-preview/index.js";
-import { IconButton as T } from "../../icon-button/index.js";
-const D = ({
-  alt: o,
-  authorEmail: d,
-  date: l,
-  description: p,
-  src: c,
-  children: i,
-  isEditing: m,
-  onClick: f,
-  title: u,
-  hideDescription: h = !1,
-  headerType: x = "image",
-  showMaximize: g = !0
-}) => {
-  const t = H(), [b, n] = w(!1), v = s(() => {
-    n(!0);
-  }, []), y = s(() => {
-    n(!1);
-  }, []);
-  return /* @__PURE__ */ a(
-    r,
-    {
-      bgColor: "transparent",
-      border: "1px solid transparent",
-      borderColorHover: "black",
-      borderRadius: t.spacing[0.25],
-      display: "flex",
-      flexDirection: "column",
-      gap: 1,
-      onHover: v,
-      onLeave: y,
-      padding: [0.5, 0.5, 0.5, 0.5],
-      width: "100%",
-      children: [
-        /* @__PURE__ */ e(
-          r,
-          {
-            cursor: m ? "unset" : "pointer",
-            display: "inline-flex",
-            justify: "center",
-            onClick: f,
-            position: "relative",
-            width: "100%",
-            children: i === void 0 ? /* @__PURE__ */ a(C.Fragment, { children: [
-              /* @__PURE__ */ e(
-                I,
-                {
-                  alt: o,
-                  fileType: x,
-                  height: "147px",
-                  opacity: b ? 0.3 : 0,
-                  src: c,
-                  width: "100%"
-                }
-              ),
-              g ? /* @__PURE__ */ e(r, { bottom: "10px", position: "absolute", right: "10px", children: /* @__PURE__ */ e(
-                T,
-                {
-                  color: "white",
-                  icon: "arrows-maximize",
-                  iconSize: "xxs",
-                  iconType: "fa-light",
-                  variant: "secondary"
-                }
-              ) }) : void 0
-            ] }) : i
-          }
-        ),
-        h ? null : /* @__PURE__ */ e(
-          j,
-          {
-            authorEmail: d,
-            date: l,
-            description: p,
-            descriptionColor: t.palette.gray[600],
-            id: `${o}-card-header`,
-            title: u
-          }
-        )
-      ]
-    }
-  );
-};
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { o as p } from "../../../components-C7JPRIEW.mjs";
 export {
-  D as CardWithImage
+  p as CardWithImage
 };

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

@@ -1,106 +1,8 @@
-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 y } from "../../inputs/fields/date/index.js";
-import "../../inputs/fields/date-range/index.js";
-import "../../inputs/fields/date-time/index.js";
+import "react/jsx-runtime";
+import "react";
+import { n as a } from "../../../components-C7JPRIEW.mjs";
 import "lodash";
-import "../../icon/index.js";
-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 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 "../../inputs/fields/number-range/index.js";
-import "../../inputs/fields/phone/index.js";
-import "../../inputs/fields/text-area/index.js";
-import "../../../styles-BXFVwnWT.mjs";
-import "../../tag/index.js";
-import "../../icon-button/index.js";
-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]};
-    border: 1px solid ${t.palette.gray[200]};
-    flex-direction: column;
-    justify-content: center;
-    gap: ${t.spacing[0.5]};
-    min-width: ${p};
-    min-height: ${m};
-    padding: ${t.spacing[1]};
-
-    input {
-      color: ${t.palette.gray[800]};
-      line-height: ${t.spacing[1.5]};
-      text-align: ${r};
-    }
-  `}
-`, 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
-          }
-        ),
-        $
-      ]
-    }
-  );
-};
+import "styled-components";
 export {
-  Z as CardWithInput
+  a as CardWithInput
 };