@fluidattacks/design 8.1.0 → 8.2.0

package/dist/components/item-card-db/index.js

@@ -1,6 +1,72 @@
-import "react/jsx-runtime";
-import { a8 as a } from "../../components-LCJjFofC.mjs";
-import "../../vendor-i-lggy4V.mjs";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { ItemCardContainer as C, ItemIconBox as T } from "./styles.js";
+import { CloudImage as v } from "../cloud-image/index.js";
+import { Container as w } from "../container/index.js";
+import { Icon as s } from "../icon/index.js";
+import { Tag as y } from "../tag/index.js";
+import { Heading as k } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as l } from "../typography/text/index.js";
+import { safeUrl as j } from "../../utils/url.js";
+const L = {
+  md: { titleSize: "xs", descSize: "md", linkTextSize: "md" },
+  lg: { titleSize: "sm", descSize: "lg", linkTextSize: "lg" }
+}, U = ({
+  desc: r,
+  href: c,
+  icon: n,
+  imageHeight: m = 48,
+  imageWidth: a = 48,
+  Link: h,
+  LinkElement: f,
+  linkText: p = "Learn more ",
+  publicId: o,
+  size: z = "lg",
+  tag: d,
+  title: t
+}) => {
+  const g = h ?? "a", { titleSize: x, descSize: S, linkTextSize: I } = L[z];
+  return /* @__PURE__ */ i(C, { "data-testid": t, children: [
+    /* @__PURE__ */ i(
+      w,
+      {
+        display: "flex",
+        gap: 0.75,
+        justify: "space-between",
+        width: "100%",
+        children: [
+          /* @__PURE__ */ i(
+            T,
+            {
+              $hasImage: !!o,
+              $height: m,
+              $width: a,
+              children: [
+                n ? /* @__PURE__ */ e(s, { icon: n, iconSize: "xl", iconType: "fa-gradient" }) : void 0,
+                o ? /* @__PURE__ */ e(
+                  v,
+                  {
+                    alt: t,
+                    height: m,
+                    publicId: o,
+                    width: a
+                  }
+                ) : void 0
+              ]
+            }
+          ),
+          d ? /* @__PURE__ */ e(y, { tagLabel: d, variant: "inactive" }) : void 0
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(k, { size: x, children: t }),
+    r ? /* @__PURE__ */ e(l, { size: S, children: r }) : void 0,
+    f ?? /* @__PURE__ */ e(g, { href: j(c), style: { textDecoration: "none" }, children: /* @__PURE__ */ i(l, { size: I, children: [
+      p,
+      /* @__PURE__ */ e(s, { icon: "arrow-right", iconSize: "sm", iconType: "fa-light" })
+    ] }) })
+  ] });
+};
 export {
-  a as ItemCardDB
+  U as ItemCardDB
 };

package/dist/components/item-card-db/styles.js

@@ -0,0 +1,47 @@
+import { styled as r } from "styled-components";
+const n = r.article`
+  ${({ theme: a }) => `
+    align-items: flex-start;
+    align-self: stretch;
+    background: ${a.palette.white};
+    border: 1px solid ${a.palette.gray[200]};
+    border-radius: ${a.spacing[0.5]};
+    box-shadow: ${a.shadows.sm};
+    display: flex;
+    flex-direction: column;
+    gap: ${a.spacing[0.75]};
+    padding: ${a.spacing[1.5]};
+    transition: all .15s ease;
+    width: 100%;
+
+    &:hover {
+      background:
+        linear-gradient(#fff, #fff) padding-box,
+        ${a.palette.gradient} border-box;
+      border: 1px solid transparent;
+    }
+
+    a > * {
+      color: ${a.palette.primary[500]};
+      text-decoration: none;
+
+      &:hover {
+        color: ${a.palette.primary[400]};
+      }
+    }
+  `}
+`, d = r.div`
+  ${({ theme: a, $hasImage: t, $width: i, $height: o }) => `
+    width: ${i}px;
+    height: ${o}px;
+    border-radius: ${a.spacing[0.75]};
+    background: ${t ? a.palette.white : a.palette.primary[25]};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `}
+`;
+export {
+  n as ItemCardContainer,
+  d as ItemIconBox
+};

package/dist/components/language-switcher/index.js

@@ -1,9 +1,94 @@
-import "react/jsx-runtime";
-import "../../vendor-i-lggy4V.mjs";
-import "react";
-import "react-dom";
-import "styled-components";
-import { aa as e } from "../../components-LCJjFofC.mjs";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { useFloating as C } from "../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import { useState as O, useCallback as c, useEffect as F, Fragment as L } from "react";
+import { createPortal as I } from "react-dom";
+import { useTheme as T } from "styled-components";
+import { LanguageOption as j } from "./language-option/index.js";
+import { Spinner as M } from "./spinner/index.js";
+import { StyledSwitcherButton as U, StyledFlag as z, StyledLoader as A, StyledLanguageList as B } from "./styles.js";
+import { Icon as P } from "../icon/index.js";
+import { useClickOutside as R } from "../../hooks/use-click-outside.js";
+import { autoUpdate as $ } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as q, flip as D, shift as G } from "../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const te = ({
+  disabled: m = !1,
+  id: p,
+  isLoading: o = !1,
+  label: u = "Change content language",
+  languages: s,
+  onSelect: d,
+  selectedCode: i
+}) => {
+  const h = T(), [g, r] = O(!1), n = g && !o, y = n ? "chevron-up" : "chevron-down", { refs: l, floatingStyles: S } = C({
+    middleware: [q({ mainAxis: 4 }), D(), G({ padding: 8 })],
+    placement: "bottom-end",
+    whileElementsMounted: $
+  }), { setFloating: v, setReference: w } = l, a = s.find(
+    (e) => e.code === i
+  ), b = c(() => {
+    r((e) => !e);
+  }, []), k = c(() => {
+    r(!1);
+  }, []);
+  R(l.floating, k, [l.reference]), F(() => {
+    if (!n)
+      return;
+    const e = (x) => {
+      x.key === "Escape" && r(!1);
+    };
+    return document.addEventListener("keydown", e), () => {
+      document.removeEventListener("keydown", e);
+    };
+  }, [n]);
+  const E = c(
+    (e) => {
+      o || (d(e), r(!1));
+    },
+    [o, d]
+  );
+  return /* @__PURE__ */ f(L, { children: [
+    /* @__PURE__ */ f(
+      U,
+      {
+        "aria-expanded": n,
+        "aria-haspopup": "true",
+        "aria-label": u,
+        disabled: m || o,
+        id: `language-switcher-toggle-${p}`,
+        onClick: b,
+        ref: w,
+        type: "button",
+        children: [
+          a?.flag === void 0 ? null : /* @__PURE__ */ t(z, { children: a.flag }),
+          (a?.code ?? i).toUpperCase(),
+          o ? /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(M, {}) }) : null,
+          /* @__PURE__ */ t(
+            P,
+            {
+              icon: y,
+              iconColor: h.palette.gray[400],
+              iconSize: "sm",
+              iconType: "fa-light"
+            }
+          )
+        ]
+      }
+    ),
+    n ? I(
+      /* @__PURE__ */ t(B, { ref: v, style: S, children: s.map(
+        (e) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+          j,
+          {
+            isSelected: e.code === i,
+            language: e,
+            onSelect: E
+          }
+        ) }, e.code)
+      ) }),
+      document.body
+    ) : void 0
+  ] });
+};
 export {
-  e as LanguageSwitcher
+  te as LanguageSwitcher
 };

package/dist/components/language-switcher/language-option/index.js

@@ -1,7 +1,37 @@
-import "react/jsx-runtime";
-import "react";
-import "styled-components";
-import { cu as m } from "../../../components-LCJjFofC.mjs";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useCallback as m } from "react";
+import { useTheme as p } from "styled-components";
+import { StyledLanguageOption as l } from "../styles.js";
+import { Icon as s } from "../../icon/index.js";
+const d = ({
+  isSelected: r,
+  language: o,
+  onSelect: t
+}) => {
+  const i = p(), c = m(() => {
+    t(o.code), o.onClick?.();
+  }, [o, t]);
+  return /* @__PURE__ */ n(
+    l,
+    {
+      "aria-current": r,
+      onClick: c,
+      type: "button",
+      children: [
+        `${o.label} (${o.code})`,
+        r ? /* @__PURE__ */ e(
+          s,
+          {
+            icon: "check",
+            iconColor: i.palette.gray[800],
+            iconSize: "sm",
+            iconType: "fa-light"
+          }
+        ) : null
+      ]
+    }
+  );
+};
 export {
-  m as LanguageOption
+  d as LanguageOption
 };

package/dist/components/language-switcher/spinner/index.js

@@ -1,5 +1,17 @@
-import "react/jsx-runtime";
-import { cv as e } from "../../../components-LCJjFofC.mjs";
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { StyledSpinner as n, StyledSpinnerTrack as i, StyledSpinnerArc as t } from "../styles.js";
+const p = () => /* @__PURE__ */ e(
+  n,
+  {
+    "aria-hidden": "true",
+    "data-testid": "language-switcher-spinner",
+    viewBox: "0 0 16 16",
+    children: [
+      /* @__PURE__ */ r(i, { cx: 8, cy: 8, r: 6 }),
+      /* @__PURE__ */ r(t, { cx: 8, cy: 8, r: 6 })
+    ]
+  }
+);
 export {
-  e as Spinner
+  p as Spinner
 };

package/dist/components/language-switcher/styles.js

@@ -0,0 +1,121 @@
+import { styled as n, keyframes as a } from "styled-components";
+const e = n.button`
+  ${({ theme: t }) => `
+    align-items: center;
+    background: ${t.palette.white};
+    border: 1px solid ${t.palette.gray[200]};
+    border-radius: ${t.spacing[0.25]};
+    color: ${t.palette.gray[800]};
+    cursor: pointer;
+    display: inline-flex;
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text.sm};
+    font-weight: ${t.typography.weight.regular};
+    gap: ${t.spacing[0.5]};
+    line-height: 1;
+    padding: ${t.spacing[0.5]} ${t.spacing[0.625]};
+
+    &:hover:not(:disabled) {
+      background: ${t.palette.gray[100]};
+    }
+
+    &:disabled {
+      color: ${t.palette.gray[400]};
+      cursor: not-allowed;
+    }
+  `}
+`, o = n.span`
+  ${({ theme: t }) => `
+    font-size: ${t.typography.text.md};
+    line-height: 1;
+  `}
+`, p = n.ul`
+  ${({ theme: t }) => `
+    align-items: stretch;
+    background: ${t.palette.white};
+    border: 1px solid ${t.palette.gray[200]};
+    border-radius: ${t.spacing[0.25]};
+    box-shadow: ${t.shadows.md};
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    min-width: 180px;
+    padding: ${t.spacing[0.25]} 0;
+    white-space: nowrap;
+    z-index: 9999;
+  `}
+`, s = n.button`
+  ${({ theme: t }) => `
+    align-items: center;
+    background: ${t.palette.white};
+    border: none;
+    color: ${t.palette.gray[800]};
+    cursor: pointer;
+    display: flex;
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text.md};
+    gap: ${t.spacing[0.5]};
+    justify-content: space-between;
+    padding: ${t.spacing[0.25]} ${t.spacing[0.625]};
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+      background: ${t.palette.gray[100]};
+    }
+
+    &[aria-current="true"] {
+      background: ${t.palette.gray[100]};
+    }
+  `}
+`, r = a`
+  0% {
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    transform: rotateZ(360deg);
+  }
+`, l = n.span`
+  ${({ theme: t }) => `
+    align-items: center;
+    background: ${t.palette.warning[50]};
+    border-radius: ${t.spacing[0.25]};
+    display: flex;
+    height: 18px;
+    justify-content: center;
+    line-height: 0;
+    padding: 0 ${t.spacing[0.25]};
+  `}
+`, g = n.svg`
+  animation: ${r} 1s linear infinite;
+  height: 12px;
+  width: 12px;
+`, d = n.circle`
+  ${({ theme: t }) => `
+    fill: none;
+    stroke: ${t.palette.warning[400]};
+    stroke-width: 2;
+  `}
+`, c = n.circle`
+  ${({ theme: t }) => `
+    fill: none;
+    stroke: ${t.palette.warning[700]};
+    stroke-dasharray: 15 23;
+    stroke-linecap: round;
+    stroke-width: 2;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  `}
+`;
+export {
+  o as StyledFlag,
+  p as StyledLanguageList,
+  s as StyledLanguageOption,
+  l as StyledLoader,
+  g as StyledSpinner,
+  c as StyledSpinnerArc,
+  d as StyledSpinnerTrack,
+  e as StyledSwitcherButton
+};

package/dist/components/layout/categories/buttons/index.js

@@ -1,7 +1,17 @@
-import "styled-components";
-import { j as a, k as l, l as n } from "../../../../components-LCJjFofC.mjs";
+import { styled as t } from "styled-components";
+const a = t.div.attrs({
+  className: "flex flex-wrap justify-center pv3 w-100"
+})``, s = t.div.attrs({
+  className: "flex flex-wrap items-center justify-start mb2"
+})`
+  gap: 12px;
+`, r = t.div.attrs({
+  className: "flex flex-wrap items-center justify-end mb2"
+})`
+  gap: 8px;
+`;
 export {
   a as ButtonToolbarCenter,
-  l as ButtonToolbarRow,
-  n as ButtonToolbarStartRow
+  r as ButtonToolbarRow,
+  s as ButtonToolbarStartRow
 };

package/dist/components/layout/categories/column/index.js

@@ -1,5 +1,25 @@
-import "react/jsx-runtime";
-import { y as p } from "../../../../components-LCJjFofC.mjs";
+import { jsx as r } from "react/jsx-runtime";
+import { StyledCol as i } from "./styles.js";
+const e = ({
+  children: o,
+  xl: m,
+  lg: t,
+  md: $,
+  sm: d,
+  paddingTop: l,
+  width: p
+}) => /* @__PURE__ */ r(
+  i,
+  {
+    $lg: t,
+    $md: $,
+    $paddingTop: l,
+    $sm: d,
+    $width: p,
+    $xl: m,
+    children: o
+  }
+);
 export {
-  p as Col
+  e as Col
 };

package/dist/components/layout/categories/column/styles.js

@@ -0,0 +1,32 @@
+import i from "../../../../_virtual/isNumber.js";
+import { styled as o } from "styled-components";
+const t = (d) => d === void 0 ? "flex-grow: 1;" : `width: calc(${d}00% / var(--cols));`, p = o.div.attrs({
+  className: "comp-col"
+})`
+  word-wrap: break-word;
+
+  ${({ $width: d = null }) => d === null ? "" : `width: ${d}`};
+
+  ${({ $paddingTop: d }) => `padding-top: ${d ?? 0}px;`}
+
+  @media (width <= 768px) {
+    ${({ $sm: d }) => t(d)}
+  }
+
+  @media (width >= 768px) and (width <= 992px) {
+    ${({ $md: d }) => t(d)}
+  }
+
+  @media (width >= 992px) {
+    ${({ $lg: d }) => t(d)}
+  }
+
+  ${({ $xl: d }) => i(d) ? `@media (min-width: 1200px) { ${t(d)} }` : ""}
+
+  > .comp-card {
+    height: 100%;
+  }
+`;
+export {
+  p as StyledCol
+};

package/dist/components/layout/categories/gap/index.js

@@ -1,5 +1,6 @@
-import "react/jsx-runtime";
-import { S as a } from "../../../../components-LCJjFofC.mjs";
+import { jsx as t } from "react/jsx-runtime";
+import { StyledGap as i } from "./styles.js";
+const a = ({ children: m, disp: o, mh: p, mv: r }) => /* @__PURE__ */ t(i, { $disp: o, $mh: p, $mv: r, children: m });
 export {
   a as Gap
 };

package/dist/components/layout/categories/gap/styles.js

@@ -0,0 +1,17 @@
+import { styled as e } from "styled-components";
+const r = e.div.attrs({
+  className: "comp-gap"
+})`
+  ${({ $disp: t = "flex", $mh: p = 4, $mv: a = 4 }) => `
+    align-items: center;
+    display: ${t};
+    margin: ${-a}px ${-p}px;
+
+    > * {
+      margin: ${a}px ${p}px;
+    }
+  `}
+`;
+export {
+  r as StyledGap
+};

package/dist/components/layout/categories/row/index.js

@@ -1,5 +1,21 @@
-import "react/jsx-runtime";
-import { aF as m } from "../../../../components-LCJjFofC.mjs";
+import { jsx as l } from "react/jsx-runtime";
+import { StyledRow as m } from "./styles.js";
+const d = ({
+  align: o,
+  children: t,
+  cols: i,
+  colsPadding: r,
+  justify: s
+}) => /* @__PURE__ */ l(
+  m,
+  {
+    $align: o,
+    $cols: i,
+    $colsPadding: r,
+    $justify: s,
+    children: t
+  }
+);
 export {
-  m as Row
+  d as Row
 };

package/dist/components/layout/categories/row/styles.js

@@ -0,0 +1,30 @@
+import { styled as r } from "styled-components";
+const c = r.div.attrs({
+  className: "comp-row flex flex-row flex-wrap"
+})`
+  ${({
+  $align: o = "stretch",
+  $cols: e = 100,
+  $colsPadding: l = 6,
+  $justify: t = "start"
+}) => `
+    align-items: ${o};
+    justify-content: ${t};
+    margin: -6px;
+    text-align: ${t};
+
+    --cols: ${e};
+
+    > *:not(.comp-col) {
+      width: 100%;
+      margin: 6px;
+    }
+
+    > .comp-col {
+      padding: ${l}px;
+    }
+  `}
+`;
+export {
+  c as StyledRow
+};

package/dist/components/layout/index.js

@@ -1,9 +1,12 @@
-import { j as t, k as r, l as s, y as l, S as n, aF as b } from "../../components-LCJjFofC.mjs";
+import { ButtonToolbarCenter as t, ButtonToolbarRow as e, ButtonToolbarStartRow as a } from "./categories/buttons/index.js";
+import { Col as f } from "./categories/column/index.js";
+import { Gap as m } from "./categories/gap/index.js";
+import { Row as x } from "./categories/row/index.js";
 export {
   t as ButtonToolbarCenter,
-  r as ButtonToolbarRow,
-  s as ButtonToolbarStartRow,
-  l as Col,
-  n as Gap,
-  b as Row
+  e as ButtonToolbarRow,
+  a as ButtonToolbarStartRow,
+  f as Col,
+  m as Gap,
+  x as Row
 };

package/dist/components/link/index.js

@@ -1,5 +1,63 @@
-import "react/jsx-runtime";
-import { ab as i } from "../../components-LCJjFofC.mjs";
+import { jsxs as p, jsx as v } from "react/jsx-runtime";
+import { StyledExternalLink as c, StyledInternalLink as d } from "./styles.js";
+import { Icon as h } from "../icon/index.js";
+const k = ({
+  children: i,
+  color: l,
+  download: t,
+  href: n,
+  iconPosition: r = "right",
+  onClick: a,
+  target: o,
+  variant: f = "lowRelevance",
+  wrap: m = !1
+}) => {
+  const s = n.startsWith("https://"), e = /* @__PURE__ */ v(
+    h,
+    {
+      icon: t === void 0 ? "arrow-up-right-from-square" : "arrow-down-to-bracket",
+      iconSize: "sm",
+      iconType: "fa-light",
+      ml: 0.25,
+      mr: 0.25
+    }
+  );
+  return s ? /* @__PURE__ */ p(
+    c,
+    {
+      $color: l,
+      $variant: f,
+      $wrap: m,
+      download: t,
+      href: n,
+      onClick: a,
+      rel: "nofollow noopener noreferrer",
+      target: o ?? "_blank",
+      children: [
+        r === "left" ? e : void 0,
+        i,
+        r === "right" ? e : void 0
+      ]
+    }
+  ) : /* @__PURE__ */ p(
+    d,
+    {
+      $color: l,
+      $variant: f,
+      $wrap: m,
+      download: t,
+      onClick: a,
+      rel: "nofollow noopener noreferrer",
+      target: o,
+      to: n,
+      children: [
+        o !== void 0 && r === "left" ? e : void 0,
+        i,
+        o !== void 0 && r === "right" ? e : void 0
+      ]
+    }
+  );
+};
 export {
-  i as Link
+  k as Link
 };