@fluidattacks/design 3.1.13 → 3.2.0

package/dist/components/colors/index.js

@@ -1,224 +1,9 @@
-import { jsx as r } from "react/jsx-runtime";
-import { ThemeProvider as a } from "styled-components";
-const o = {
-  25: "#fcfcfd",
-  50: "#f9fafb",
-  100: "#f2f4f7",
-  200: "#eaecf0",
-  300: "#d0d5dd",
-  400: "#98a2b3",
-  500: "#667085",
-  600: "#475467",
-  700: "#2f394b",
-  800: "#212a36",
-  900: "#161b25"
-}, f = {
-  25: "#fef2f3",
-  50: "#fddfe2",
-  100: "#fbbac0",
-  200: "#f9959e",
-  300: "#f65e6a",
-  400: "#f32637",
-  500: "#bf0b1a",
-  // Brand color
-  600: "#ac0a17",
-  700: "#9a0915",
-  800: "#870812",
-  900: "#750710"
-}, s = {
-  25: "",
-  50: "",
-  100: "#ffe6ff",
-  200: "",
-  300: "#b8075d",
-  400: "",
-  500: "#7f0540",
-  600: "",
-  700: "#59042d",
-  800: "",
-  900: "#460323"
-}, n = {
-  25: "",
-  50: "#fef3f2",
-  100: "",
-  200: "#fecdca",
-  300: "",
-  400: "",
-  500: "#f04438",
-  600: "",
-  700: "#b42318",
-  800: "",
-  900: ""
-}, c = {
-  25: "",
-  50: "#fffaeb",
-  100: "",
-  200: "#fef0c7",
-  300: "",
-  400: "#ffd562",
-  500: "#fdb022",
-  600: "#dc6803",
-  700: "#b54708",
-  800: "",
-  900: ""
-}, p = {
-  25: "",
-  50: "#f6fef9",
-  100: "",
-  200: "#a6f4c5",
-  300: "",
-  400: "",
-  500: "#12b76a",
-  600: "",
-  700: "#027a48",
-  800: "",
-  900: ""
-}, l = {
-  25: "",
-  50: "#eff8ff",
-  100: "",
-  200: "#b2ddff",
-  300: "",
-  400: "",
-  500: "#2e90fa",
-  600: "",
-  700: "#175cd3",
-  800: "",
-  900: ""
-}, t = {
-  "01": "linear-gradient(45deg, #f32637 0%, #b8075d 100%)",
-  "02": "linear-gradient(45deg, #fcfcfd 0%, #667085 100%)"
-}, i = {
-  type: {
-    primary: "Roboto, sans-serif",
-    poppins: "'Poppins', sans-serif",
-    mono: "'Space Mono', monospace"
-  },
-  heading: {
-    xxl: "64px",
-    xl: "48px",
-    lg: "32px",
-    md: "24px",
-    sm: "20px",
-    xs: "16px"
-  },
-  text: {
-    xl: "20px",
-    lg: "18px",
-    md: "16px",
-    sm: "14px",
-    xs: "12px"
-  },
-  weight: {
-    bold: "700",
-    semibold: "600",
-    regular: "400"
-  }
-}, m = {
-  none: "none",
-  sm: "0px 1px 2px 0px rgba(16, 24, 40, 0.15)",
-  md: "0px 4px 6px 0px rgba(16, 24, 40, 0.15)",
-  lg: "0px 8px 24px 0px rgba(16, 24, 40, 0.15)"
-}, d = {
-  mobile: "480px",
-  tablet: "960px",
-  sm: "1024px",
-  md: "1440px",
-  lg: "1920px"
-}, x = {
-  0: "0rem",
-  0.125: "0.125rem",
-  0.188: "0.188rem",
-  0.25: "0.25rem",
-  0.5: "0.5rem",
-  0.625: "0.625rem",
-  0.75: "0.75rem",
-  1: "1rem",
-  1.25: "1.25rem",
-  1.5: "1.5rem",
-  1.75: "1.75rem",
-  2: "2rem",
-  2.25: "2.25rem",
-  2.5: "2.5rem",
-  3: "3rem",
-  3.5: "3.5rem",
-  4: "4rem",
-  4.5: "4.5rem",
-  5: "5rem",
-  6: "6rem"
-}, u = [
-  "lock-keyhole",
-  "bars-sort",
-  "bolt",
-  "books",
-  "brain-circuit",
-  "briefcase",
-  "bug",
-  "buildings",
-  "bullseye-pointer",
-  "calendar-clock",
-  "calendar-xmark",
-  "chart-network",
-  "clipboard-check",
-  "comment",
-  "envelope",
-  "eye",
-  "file",
-  "flag",
-  "globe",
-  "hand-holding-dollar",
-  "hands-clapping",
-  "headset",
-  "hexagon-exclamation",
-  "light-emergency-on",
-  "magnifying-glass",
-  "pen-line",
-  "plane-departure",
-  "screwdriver-wrench",
-  "sensor-triangle-exclamation",
-  "shield-check",
-  "sidebar",
-  "skull",
-  "sliders",
-  "star-christmas",
-  "telescope",
-  "trash",
-  "unlock",
-  "user-group",
-  "user-hoodie",
-  "xmark"
-], k = [
-  ["fal", "arrow-down"],
-  ["fal", "arrow-left"],
-  ["fal", "arrow-right"],
-  ["fal", "arrow-up"],
-  ["fal", "plus"],
-  ["fal", "minus"],
-  ["fas", "check"],
-  ["fas", "circle-question"]
-], b = {
-  typography: i,
-  shadows: m,
-  breakpoints: d,
-  spacing: x,
-  palette: {
-    primary: f,
-    complementary: s,
-    error: n,
-    info: l,
-    warning: c,
-    success: p,
-    black: "#0c111d",
-    white: "#ffffff",
-    gray: o,
-    gradients: t
-  }
-}, w = ({
-  children: e
-}) => /* @__PURE__ */ r(a, { theme: b, children: e });
+import "react/jsx-runtime";
+import "styled-components";
+import { w as r, y as i, x as t, z as a } from "../../components-C7JPRIEW.mjs";
 export {
-  w as CustomThemeProvider,
-  u as icons,
-  b as theme,
-  k as uniqueIcons
+  r as CustomThemeProvider,
+  i as icons,
+  t as theme,
+  a as uniqueIcons
 };

package/dist/components/confirm-dialog/index.js

@@ -1,46 +1,7 @@
-import { jsxs as d, jsx as p } from "react/jsx-runtime";
-import { useState as f, useRef as C, useCallback as a, useEffect as D } from "react";
-import { Modal as h } from "../modal/index.js";
+import "react/jsx-runtime";
+import "react";
+import { D as t } from "../../components-C7JPRIEW.mjs";
 import "lodash";
-import { u as x } from "../../use-modal-CtgexKnf.mjs";
-import { ModalConfirm as M } from "../modal/modal-confirm/index.js";
-const y = () => {
-  const [c, o] = f(!1), [e, r] = f(), t = C(null), s = x("confirm-dialog-modal"), l = a(
-    async (n) => (r(n), o(!0), new Promise((m) => {
-      t.current = m;
-    })),
-    []
-  ), u = a(() => {
-    var n;
-    o(!1), r(void 0), (n = t.current) == null || n.call(t, !0);
-  }, []), i = a(() => {
-    var n;
-    o(!1), r(void 0), (n = t.current) == null || n.call(t, !1);
-  }, []);
-  return D(() => {
-    s.setIsOpen(c);
-  }, [c, s]), { ConfirmDialog: ({ id: n = "confirm-dialog-modal", children: m }) => /* @__PURE__ */ d(
-    h,
-    {
-      id: n,
-      modalRef: { ...s, close: i },
-      size: "sm",
-      title: e == null ? void 0 : e.title,
-      children: [
-        m,
-        e == null ? void 0 : e.message,
-        /* @__PURE__ */ p(
-          M,
-          {
-            id: e == null ? void 0 : e.id,
-            onCancel: i,
-            onConfirm: u
-          }
-        )
-      ]
-    }
-  ), confirm: l };
-};
 export {
-  y as useConfirmDialog
+  t as useConfirmDialog
 };

package/dist/components/container/index.js

@@ -1,51 +1,6 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as $ } from "react";
-import { styled as c } from "styled-components";
-import { B as f } from "../../styles-CplEd2kw.mjs";
-const b = c(f)`
-  ${({ theme: o, $center: r = !1, $styleMd: a, $styleSm: n }) => `
-    ${r ? "margin: auto;" : ""}
-    scrollbar-color: ${o.palette.gray[600]} ${o.palette.gray[100]};
-    scroll-padding: ${o.spacing[0.5]};
-
-    @media screen
-      and (min-width: ${o.breakpoints.mobile})
-      and (max-width: ${o.breakpoints.tablet})
-    {
-      ${a};
-    }
-
-    @media screen and (max-width: ${o.breakpoints.mobile}) {
-      ${n};
-    }
-  `}
-`, x = $(function({
-  as: r = "div",
-  center: a,
-  children: n,
-  id: e,
-  onHover: t,
-  onLeave: i,
-  styleMd: s,
-  styleSm: d,
-  ...l
-}, m) {
-  return /* @__PURE__ */ p(
-    b,
-    {
-      $center: a,
-      $styleMd: s,
-      $styleSm: d,
-      as: r,
-      id: e,
-      onMouseLeave: i,
-      onMouseOver: t,
-      ref: m,
-      ...l,
-      children: n
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import { E as m } from "../../components-C7JPRIEW.mjs";
 export {
-  x as Container
+  m as Container
 };

package/dist/components/content-card/category-tag/index.js

@@ -1,42 +1,6 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useTheme as o } from "styled-components";
-import { Container as n } from "../../container/index.js";
-import "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import { Text as m } from "../../typography/text/index.js";
-const f = ({
-  tag: e,
-  tagPosition: t
-}) => {
-  const r = o();
-  return e ? /* @__PURE__ */ i(
-    n,
-    {
-      alignItems: "center",
-      bgColor: r.palette.white,
-      borderRadius: "8px",
-      display: "flex",
-      justify: "center",
-      margin: t === "top" ? [0.75, 0.75, 0.75, 0.75] : void 0,
-      padding: [0.25, 0.5, 0.25, 0.5],
-      position: t === "top" ? "absolute" : "relative",
-      top: "0",
-      width: "max-content",
-      children: /* @__PURE__ */ i(
-        m,
-        {
-          color: r.palette.gray[900],
-          lineSpacing: 1.5,
-          lineSpacingSm: 1.25,
-          size: "md",
-          sizeSm: "sm",
-          textAlign: "center",
-          children: e
-        }
-      )
-    }
-  ) : null;
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { be as e } from "../../../components-C7JPRIEW.mjs";
 export {
-  f as CategoryTag
+  e as CategoryTag
 };

package/dist/components/content-card/event-date/index.js

@@ -1,61 +1,7 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { isEmpty as l } from "lodash";
-import { useTheme as s } from "styled-components";
-import { Container as p } from "../../container/index.js";
-import { Heading as d } from "../../typography/heading/index.js";
-import "../../typography/span/index.js";
-import { Text as c } from "../../typography/text/index.js";
-const b = ({
-  eventDate: i
-}) => {
-  const o = s(), t = l(i) ? null : i == null ? void 0 : i.split("-");
-  if (t) {
-    const [r, m] = t;
-    return /* @__PURE__ */ n(
-      p,
-      {
-        alignItems: "center",
-        bgColor: o.palette.white,
-        borderRadius: "8px",
-        display: "flex",
-        flexDirection: "column",
-        margin: [0.75, 0.75, 0.75, 0.75],
-        padding: [0.75, 1.5, 0.75, 1.5],
-        position: "absolute",
-        right: "0",
-        shadow: "md",
-        top: "0",
-        children: [
-          /* @__PURE__ */ e(
-            d,
-            {
-              fontWeight: "semibold",
-              lineSpacingSm: 1.25,
-              size: "md",
-              sizeSm: "sm",
-              textAlign: "center",
-              children: r
-            }
-          ),
-          /* @__PURE__ */ e(
-            c,
-            {
-              color: o.palette.gray[800],
-              fontWeight: "semibold",
-              lineSpacing: 1.5,
-              lineSpacingSm: 1.25,
-              size: "md",
-              sizeSm: "sm",
-              textAlign: "center",
-              children: m.toUpperCase()
-            }
-          )
-        ]
-      }
-    );
-  }
-  return null;
-};
+import "react/jsx-runtime";
+import "lodash";
+import "styled-components";
+import { bf as e } from "../../../components-C7JPRIEW.mjs";
 export {
-  b as EventDate
+  e as EventDate
 };

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

@@ -1,168 +1,6 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import z, { useTheme as b } from "styled-components";
-import { CategoryTag as k } from "./category-tag/index.js";
-import { EventDate as u } from "./event-date/index.js";
-import { Button as C } from "../button/index.js";
-import { M as v } from "../../index-maWH3JYC.mjs";
-import { Container as c } from "../container/index.js";
-import { Icon as S } from "../icon/index.js";
-import { Heading as j } from "../typography/heading/index.js";
-import "../typography/span/index.js";
-import { Text as f } from "../typography/text/index.js";
-const I = z.div`
-  ${({ theme: t }) => `
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    gap: ${t.spacing[1.5]};
-    width: 384px;
-
-    img {
-      height: 100%;
-      width: 100%;
-    }
-
-    #card-image {
-      border-radius: ${t.spacing[1]};
-      height: 240px;
-      overflow: hidden;
-    }
-
-    &:hover {
-      img {
-        transform: scale(1.2);
-      }
-
-      > #card-content {
-        > .title-dark {
-          color: ${t.palette.gray[400]};
-        }
-        > .title-light {
-          background: ${t.palette.gradients["01"]};
-          background-clip: text;
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-      }
-    }
-
-    @media screen and (max-width: ${t.breakpoints.mobile}) {
-      width: 320px;
-
-      #card-image {
-        height: 200px;
-      }
-    }
-  `}
-`, G = ({
-  author: t,
-  buttonText: g,
-  description: x,
-  eventDate: h,
-  href: a,
-  imageId: d,
-  mode: y = "light",
-  publishDate: s,
-  readingTime: m,
-  tag: p,
-  tagPosition: r = "top",
-  title: w
-}) => {
-  const i = b(), o = s == null ? void 0 : s.split("-"), n = y === "dark", $ = /* @__PURE__ */ l(I, { "data-testid": `content-card-${w}`, children: [
-    d || h || p && r === "top" ? /* @__PURE__ */ l(c, { id: "card-image", position: "relative", children: [
-      d && /* @__PURE__ */ e(v, { publicId: d }),
-      r === "top" && /* @__PURE__ */ e(k, { tag: p, tagPosition: r }),
-      /* @__PURE__ */ e(u, { eventDate: h })
-    ] }) : void 0,
-    /* @__PURE__ */ l(
-      c,
-      {
-        alignItems: "flex-start",
-        display: "flex",
-        flexDirection: "column",
-        gap: 0.5,
-        id: "card-content",
-        children: [
-          r === "bottom" && /* @__PURE__ */ e(k, { tag: p, tagPosition: r }),
-          t || o || m ? /* @__PURE__ */ l(c, { display: "flex", justify: "space-between", width: "100%", children: [
-            t && o && /* @__PURE__ */ e(
-              f,
-              {
-                color: i.palette.gray[n ? 300 : 400],
-                fontWeight: "semibold",
-                size: "sm",
-                sizeSm: "xs",
-                children: t + ` • ${o[0]} ${o[1]}, ${o[2]}`
-              }
-            ),
-            m && /* @__PURE__ */ l(
-              c,
-              {
-                alignItems: "center",
-                display: "flex",
-                gap: 0.25,
-                justify: "center",
-                minWidth: "60px",
-                children: [
-                  /* @__PURE__ */ e(
-                    S,
-                    {
-                      icon: "eye",
-                      iconColor: i.palette.gray[n ? 300 : 400],
-                      iconSize: "xs",
-                      iconType: "fa-light"
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    f,
-                    {
-                      color: i.palette.gray[n ? 300 : 400],
-                      size: "sm",
-                      sizeSm: "xs",
-                      textAlign: "right",
-                      children: m
-                    }
-                  )
-                ]
-              }
-            )
-          ] }) : void 0,
-          /* @__PURE__ */ e(
-            j,
-            {
-              className: `title-${y}`,
-              color: n ? i.palette.white : i.palette.gray[800],
-              fontWeight: "semibold",
-              size: "sm",
-              sizeSm: "xs",
-              children: w
-            }
-          ),
-          x && /* @__PURE__ */ e(
-            f,
-            {
-              color: i.palette.gray[n ? 100 : 600],
-              size: "md",
-              sizeSm: "sm",
-              children: x
-            }
-          ),
-          g && a && /* @__PURE__ */ e(C, { href: a, variant: "link", children: g })
-        ]
-      }
-    )
-  ] });
-  return a ? /* @__PURE__ */ e(
-    "a",
-    {
-      className: "flex w-fit",
-      href: a,
-      rel: "noopener noreferrer",
-      target: "_self",
-      children: $
-    }
-  ) : $;
-};
+import "react/jsx-runtime";
+import "styled-components";
+import { bg as p } from "../../components-C7JPRIEW.mjs";
 export {
-  G as ContentCard
+  p as ContentCard
 };