@fluidattacks/design 3.1.12 → 3.1.13

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

@@ -1,28 +1,48 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as $ } from "react";
-import { styled as o } from "styled-components";
-import { B as s } from "../../styles-C3cZmKVJ.mjs";
-const l = o(s)`
+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: e, $lg: m, $md: t }) => `
+  ${({ theme: r, $xl: t, $lg: e, $md: i }) => `
     @media (width >= ${r.breakpoints.sm}) {
-      grid-template-columns: repeat(${t}, 1fr);
+      grid-template-columns: repeat(${i}, 1fr);
     }
 
     @media (width >= ${r.breakpoints.md}) {
-      grid-template-columns: repeat(${m}, 1fr);
+      grid-template-columns: repeat(${e}, 1fr);
     }
 
     @media (width >= ${r.breakpoints.lg}) {
-      grid-template-columns: repeat(${e}, 1fr);
+      grid-template-columns: repeat(${t}, 1fr);
     }
   `}
-`, u = $(function({ children: r, md: e, sm: m, lg: t, xl: n, gap: a, ...i }, d) {
-  return p(l, { $gap: a, $lg: t, $md: e, $sm: m, $xl: n, ref: d, ...i, children: r });
+`, 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
+    }
+  );
 });
 export {
-  u as GridContainer
+  C as GridContainer
 };

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

@@ -1,25 +1,134 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { useState as p, useCallback as d, useEffect as I } from "react";
-import { createPortal as b } from "react-dom";
-import { useTheme as T } from "styled-components";
-import { S as L, O as k, a as j } from "../../index-B5yoGFs6.mjs";
+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 N } from "../divider/index.js";
-import { Icon as O } from "../icon/index.js";
-import { IconButton as q } from "../icon-button/index.js";
-import { Search as A } from "../search/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: g, onSelect: u, onClose: x, selectedItem: y, title: C, variant: S }) => {
-  const o = T(), [s, l] = p(n), [c, m] = p(""), a = d((r) => {
-    l((v) => v.filter((z) => String(z.name).toLowerCase().includes(r.toLocaleLowerCase())));
-  }, [l]), w = d((r) => {
-    r.currentTarget && (m(r.currentTarget.value), a(r.currentTarget.value));
-  }, [m, a]);
-  return I(() => {
-    l(n), a(c);
-  }, [n, a, c]), f ? b(e(t, { "aria-modal": "true", className: "comp-modal fixed inset-0 overflow-auto", zIndex: 99999, children: e(t, { alignItems: "center", bgColor: "rgb(52 64 84 / 70%)", display: "flex", height: "100vh", justify: "center", left: "0", top: "0", width: "100%", children: i(L, { $itemsLength: s.length, children: [i(t, { alignItems: "center", display: "flex", justify: "space-between", children: [e(h, { color: o.palette.gray[800], fontWeight: "bold", size: "lg", children: C }), e(q, { icon: "xmark", iconColor: o.palette.gray[400], iconSize: "xs", iconType: "fa-light", onClick: x, variant: "ghost" })] }), e(t, { mt: 1, children: e(A, { onInput: w, placeholder: "Search" }) }), e(N, { mb: 1, mt: 1 }), i(t, { display: "inline-flex", gap: 1, maxHeight: "332px", scroll: "y", wrap: "wrap", children: [S === "organization-selector" ? e(k, { onClick: g, children: i(t, { alignItems: "center", display: "flex", children: [e(O, { icon: "square-plus", iconColor: o.palette.gray[400], iconSize: "xs", iconType: "fa-light", mr: 0.5 }), e(h, { color: o.palette.gray[400], size: "sm", children: "New organization" })] }) }) : void 0, s.map((r) => e(j, { isSelected: y.toLowerCase() === r.name, label: r.name.charAt(0).toUpperCase() + r.name.slice(1), onSelect: u }, r.name))] })] }) }) }), document.body) : e("div", {});
+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", {});
 };
 export {
   Q as GroupSelector

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

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "styled-components";
-import { O, a as s } from "../../../index-B5yoGFs6.mjs";
+import { O, a as s } from "../../../index-CWlrSlUk.mjs";
 import "../../icon/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";

package/dist/components/icon/index.js

@@ -1,19 +1,37 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as $ } from "react/jsx-runtime";
 import { forwardRef as v } from "react";
-import { styled as d } from "styled-components";
-import { c as C } from "../../styles-C3cZmKVJ.mjs";
-const u = { xl: "96px", lg: "64px", md: "32px", sm: "24px", xs: "16px", xxs: "12px", xxss: "10px" }, b = d(C)`
-  ${({ $clickable: n, $color: a = "inherit", $disabled: l = !1, $hoverColor: o, $rotation: r, $size: e, $secondaryColor: i }) => `
-      color: ${a};
-      cursor: ${n ? "pointer" : "inherit"};
-      font-size: ${u[e]};
+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: ${l ? "0.5" : "1"};
+      opacity: ${a ? "0.5" : "1"};
 
       > svg {
-        --fa-secondary-color: ${i};
+        --fa-secondary-color: ${s};
         transform: ${r === void 0 ? "" : `rotate(${r}deg)`};
       }
 
@@ -26,13 +44,14 @@ const u = { xl: "96px", lg: "64px", md: "32px", sm: "24px", xs: "16px", xxs: "12
         fill: url(#gradient-02);
       }
 
-      ${n ? `&:hover {
-              filter: ${o ? "" : "brightness(50%)"};
-              color: ${o ?? ""};
+      ${i ? `&:hover {
+              filter: ${t};
+              color: ${l};
             }` : ""}
-    `}
+    `;
+}}
 `;
-d.div`
+c.div`
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
@@ -40,9 +59,50 @@ d.div`
     transform: scale(1.2);
   }
 `;
-const T = v(function({ clickable: n, disabled: a, hoverColor: l, icon: o, iconClass: r = "", iconColor: e, iconMask: i, iconSize: $, iconTransform: s, iconType: t = "fa-solid", onClick: f, rotation: p, spanClass: m, secondaryColor: g, ...x }, h) {
-  return c(b, { $clickable: n, $color: e, $disabled: a, $hoverColor: l, $rotation: p, $secondaryColor: g, $size: $, className: m, "data-testid": `${o}-icon`, onClick: f, ref: h, ...x, children: c("i", { className: `${t} fa-${o} ${r}`, ...i !== void 0 ? { "data-fa-mask": i } : {}, ...s !== void 0 ? { "data-fa-transform": s } : {} }) }, `${t}-${o}`);
+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}`
+  );
 });
 export {
-  T as Icon
+  w as Icon
 };

package/dist/components/icon-button/index.js

@@ -1,14 +1,14 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { styled as C } from "styled-components";
-import { S as R } from "../../styles-EIbGRPlk.mjs";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { styled as T } from "styled-components";
+import { S as j } from "../../styles-B2N0JLw1.mjs";
 import { Icon as k } from "../icon/index.js";
-import { T as S } from "../../index-D-lcuEHY.mjs";
-const j = C(R)`
-  ${({ theme: i, $borderRadius: n = "4px", $px: o = 0.5, $py: r = 0.5 }) => `
-    --btn-spacing: ${n};
-    --btn-padding-x: ${i.spacing[o]};
-    --btn-padding-y: ${i.spacing[r]};
+import { T as w } from "../../index-DwznImvK.mjs";
+const R = T(j)`
+  ${({ theme: r, $borderRadius: t = "4px", $px: n = 0.5, $py: o = 0.5 }) => `
+    --btn-spacing: ${t};
+    --btn-padding-x: ${r.spacing[n]};
+    --btn-padding-y: ${r.spacing[o]};
 
     align-items: center;
     line-height: 0;
@@ -18,10 +18,59 @@ const j = C(R)`
       margin: 0 !important;
     }
   `}
-`, q = v(function({ borderRadius: i, disabled: n, icon: o, iconColor: r, iconSize: d = "xxs", iconTransform: l, iconType: m, id: a, justify: b = "center", onClick: f, px: u, py: y, type: e = "button", tooltip: p, tooltipPlace: $, value: g, variant: c = "primary", ...x }, T) {
-  const s = t(j, { $borderRadius: i, $px: u, $py: y, $variant: c, "aria-disabled": n, "aria-label": a, borderRadius: i, disabled: n, id: a, justify: b, onClick: f, ref: T, type: e, value: g, ...x, children: t(k, { clickable: !1, icon: o, iconColor: r, iconSize: d, iconTransform: l, iconType: m }) }), h = (e + (c ?? "") + (a ?? o)).replace(/ /u, "_");
-  return p === void 0 ? s : t(S, { id: `${h}-tooltip`, place: $, tip: p, children: s });
+`, E = S(function({
+  borderRadius: t,
+  disabled: n,
+  icon: o,
+  iconColor: m,
+  iconSize: s = "xxs",
+  iconTransform: f,
+  iconType: d,
+  id: a,
+  justify: g = "center",
+  onClick: u,
+  px: $,
+  py: x,
+  type: e = "button",
+  tooltip: c,
+  tooltipPlace: b,
+  value: y,
+  variant: p = "primary",
+  ...B
+}, I) {
+  const l = /* @__PURE__ */ i(
+    R,
+    {
+      $borderRadius: t,
+      $px: $,
+      $py: x,
+      $variant: p,
+      "aria-disabled": n,
+      "aria-label": a,
+      borderRadius: t,
+      disabled: n,
+      id: a,
+      justify: g,
+      onClick: u,
+      ref: I,
+      type: e,
+      value: y,
+      ...B,
+      children: /* @__PURE__ */ i(
+        k,
+        {
+          clickable: !1,
+          icon: o,
+          iconColor: m,
+          iconSize: s,
+          iconTransform: f,
+          iconType: d
+        }
+      )
+    }
+  ), h = (e + (p ?? "") + (a ?? o)).replace(/ /u, "_");
+  return c === void 0 ? l : /* @__PURE__ */ i(w, { id: `${h}-tooltip`, place: b, tip: c, children: l });
 });
 export {
-  q as IconButton
+  E as IconButton
 };

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

@@ -1,15 +1,74 @@
-import { jsx as n, jsxs as o } from "react/jsx-runtime";
-import { isUndefined as i } from "lodash";
-import { useTheme as u } from "styled-components";
-import { Container as d } from "../container/index.js";
-import { T as v } from "../../index-D-lcuEHY.mjs";
-import { Heading as I } from "../typography/heading/index.js";
+import { jsx as l, jsxs as n } from "react/jsx-runtime";
+import { isUndefined as r } from "lodash";
+import { useTheme as h } from "styled-components";
+import { Container as p } from "../container/index.js";
+import { T as b } from "../../index-DwznImvK.mjs";
+import { Heading as C } from "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as b } from "../typography/text/index.js";
-const H = ({ description: s, height: c = "auto", leftIconName: a, children: m, rightIconName: l, title: p, tooltipId: g, tooltipTip: f, tooltipPlace: h = "bottom", variant: x = "centered", width: y = "318px" }) => {
-  const t = u(), e = x === "centered", r = n(v, { icon: l ?? a, iconColor: t.palette.gray[800], id: g, place: h, tip: f });
-  return o(d, { alignItems: e ? "center" : "flex-start", bgColor: t.palette.gray[50], border: `1px solid ${t.palette.gray[200]}`, borderRadius: "4px", display: "inline-flex", flexDirection: e ? "column" : "column-reverse", gap: 0.5, height: c, justify: "center", padding: [1.25, 1.25, 1.25, 1.25], width: y, children: [o(d, { alignItems: "center", display: "flex", gap: 0.5, children: [e || i(a) ? void 0 : r, n(b, { color: e ? t.palette.gray[800] : t.palette.gray[400], size: "md", textAlign: e ? "center" : "start", children: s }), e || i(l) ? void 0 : r] }), o(d, { alignItems: "center", display: "flex", gap: 0.5, my: 0.5, children: [e && !i(a) ? r : void 0, o("div", { style: { display: "flex", gap: "12px" }, children: [i(p) ? void 0 : n(I, { fontWeight: "bold", size: "md", children: p }), m] }), e && !i(l) ? r : void 0] })] });
+import { Text as T } from "../typography/text/index.js";
+const W = ({
+  description: s,
+  height: m = "auto",
+  leftIconName: o,
+  children: c,
+  rightIconName: d,
+  title: a,
+  tooltipId: f,
+  tooltipTip: g,
+  tooltipPlace: x = "bottom",
+  variant: u = "centered",
+  width: y = "318px"
+}) => {
+  const t = h(), e = u === "centered", i = /* @__PURE__ */ l(
+    b,
+    {
+      icon: d ?? o,
+      iconColor: t.palette.gray[800],
+      id: f,
+      place: x,
+      tip: g
+    }
+  );
+  return /* @__PURE__ */ n(
+    p,
+    {
+      alignItems: e ? "center" : "flex-start",
+      bgColor: t.palette.gray[50],
+      border: `1px solid ${t.palette.gray[200]}`,
+      borderRadius: "4px",
+      display: "inline-flex",
+      flexDirection: e ? "column" : "column-reverse",
+      gap: 0.5,
+      height: m,
+      justify: "center",
+      padding: [1.25, 1.25, 1.25, 1.25],
+      width: y,
+      children: [
+        /* @__PURE__ */ n(p, { alignItems: "center", display: "flex", gap: 0.5, children: [
+          e || r(o) ? void 0 : i,
+          /* @__PURE__ */ l(
+            T,
+            {
+              color: e ? t.palette.gray[800] : t.palette.gray[400],
+              size: "md",
+              textAlign: e ? "center" : "start",
+              children: s
+            }
+          ),
+          e || r(d) ? void 0 : i
+        ] }),
+        /* @__PURE__ */ n(p, { alignItems: "center", display: "flex", gap: 0.5, my: 0.5, children: [
+          e && !r(o) ? i : void 0,
+          /* @__PURE__ */ n("div", { style: { display: "flex", gap: "12px" }, children: [
+            r(a) ? void 0 : /* @__PURE__ */ l(C, { fontWeight: "bold", size: "md", children: a }),
+            c
+          ] }),
+          e && !r(d) ? i : void 0
+        ] })
+      ]
+    }
+  );
 };
 export {
-  H as IndicatorCard
+  W as IndicatorCard
 };

package/dist/components/info-sidebar/index.js

@@ -1,16 +1,116 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useTheme as m } from "styled-components";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useTheme as x } from "styled-components";
 import { Button as h } from "../button/index.js";
 import { Container as t } from "../container/index.js";
 import { IconButton as y } from "../icon-button/index.js";
 import { Tabs as g } from "../tabs/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as b } from "../typography/text/index.js";
-const B = ({ actions: n, children: c, header: d, title: f, tabs: x, footer: p }) => {
-  const i = m();
-  return a(t, { alignItems: "flex-start", bgColor: i.palette.white, borderLeft: `1px solid ${i.palette.gray[300]}`, display: "flex", flexDirection: "column", maxHeight: "750px", width: "480px", children: [a(t, { alignItems: "flex-start", alignSelf: "stretch", borderBottom: `1px solid ${i.palette.gray[300]}`, display: "flex", gap: 0.25, justify: "space-between", px: 1.25, py: 1, children: [a(t, { display: "flex", flexDirection: "column", gap: 0.25, children: [e(b, { color: i.palette.gray[800], fontWeight: "bold", lineSpacing: 1.75, size: "xl", children: f }), d] }), n && e(t, { display: "flex", gap: 0.25, children: n.map(({ icon: l, onClick: o }, r) => e(y, { icon: l ?? "paper-plane", iconColor: i.palette.gray[400], iconSize: "xxs", iconType: "fa-light", onClick: o, variant: "ghost" }, `${r}-${l}`)) })] }), e(t, { display: "flex", pt: 0.25, width: "100%", children: e(g, { items: x }) }), e(t, { alignSelf: "stretch", display: "flex", flexDirection: "column", px: 1.25, py: 1, scroll: "y", children: c }), p && e(t, { alignSelf: "stretch", borderTop: `1px solid ${i.palette.gray[300]}`, display: "flex", gap: 0.5, justify: "end", px: 1.25, py: 1, children: p.map(({ icon: l, text: o, onClick: r }, s) => e(h, { icon: l, onClick: r, variant: s === 0 ? "primary" : "tertiary", width: "100%", children: o }, `${s}-${o}`)) })] });
+import { Text as u } from "../typography/text/index.js";
+const D = ({
+  actions: a,
+  children: m,
+  header: f,
+  title: c,
+  tabs: d,
+  footer: n
+}) => {
+  const i = x();
+  return /* @__PURE__ */ p(
+    t,
+    {
+      alignItems: "flex-start",
+      bgColor: i.palette.white,
+      borderLeft: `1px solid ${i.palette.gray[300]}`,
+      display: "flex",
+      flexDirection: "column",
+      maxHeight: "750px",
+      width: "480px",
+      children: [
+        /* @__PURE__ */ p(
+          t,
+          {
+            alignItems: "flex-start",
+            alignSelf: "stretch",
+            borderBottom: `1px solid ${i.palette.gray[300]}`,
+            display: "flex",
+            gap: 0.25,
+            justify: "space-between",
+            px: 1.25,
+            py: 1,
+            children: [
+              /* @__PURE__ */ p(t, { display: "flex", flexDirection: "column", gap: 0.25, children: [
+                /* @__PURE__ */ e(
+                  u,
+                  {
+                    color: i.palette.gray[800],
+                    fontWeight: "bold",
+                    lineSpacing: 1.75,
+                    size: "xl",
+                    children: c
+                  }
+                ),
+                f
+              ] }),
+              a && /* @__PURE__ */ e(t, { display: "flex", gap: 0.25, children: a.map(
+                ({ icon: r, onClick: l }, o) => /* @__PURE__ */ e(
+                  y,
+                  {
+                    icon: r ?? "paper-plane",
+                    iconColor: i.palette.gray[400],
+                    iconSize: "xxs",
+                    iconType: "fa-light",
+                    onClick: l,
+                    variant: "ghost"
+                  },
+                  `${o}-${r}`
+                )
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(t, { display: "flex", pt: 0.25, width: "100%", children: /* @__PURE__ */ e(g, { items: d }) }),
+        /* @__PURE__ */ e(
+          t,
+          {
+            alignSelf: "stretch",
+            display: "flex",
+            flexDirection: "column",
+            px: 1.25,
+            py: 1,
+            scroll: "y",
+            children: m
+          }
+        ),
+        n && /* @__PURE__ */ e(
+          t,
+          {
+            alignSelf: "stretch",
+            borderTop: `1px solid ${i.palette.gray[300]}`,
+            display: "flex",
+            gap: 0.5,
+            justify: "end",
+            px: 1.25,
+            py: 1,
+            children: n.map(
+              ({ icon: r, text: l, onClick: o }, s) => /* @__PURE__ */ e(
+                h,
+                {
+                  icon: r,
+                  onClick: o,
+                  variant: s === 0 ? "primary" : "tertiary",
+                  width: "100%",
+                  children: l
+                },
+                `${s}-${l}`
+              )
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  B as InfoSidebar
+  D as InfoSidebar
 };