@fluidattacks/design 3.1.11 → 3.1.13

package/dist/components/search-bar/index.js

@@ -1 +1,219 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),i=require("../../index-qe0nJwzl.js"),s=require("../button/index.js"),l=require("../../index-TKLFHcRp.js"),n=require("../colors/index.js"),r=require("../icon/index.js"),a=require("../typography/heading/index.js");require("../typography/span/index.js");const c=require("../typography/text/index.js"),o=require("../../use-click-outside-BqkLISED.js"),h=[{hit:{slug:"/services/continuous-hacking/",title:"Continuous Hacking"},icon:"infinity"},{hit:{slug:"/platform/",title:"Platform"},icon:"sidebar"},{hit:{slug:"/plans/",title:"Plans"},icon:"star-christmas"},{hit:{slug:"/blog/",title:"Blog"},icon:"pen-line"}],u={hit:{slug:"/contact-us/",title:"Contact Support"},icon:"envelope"};exports.SearchBar=({items:d,placeholder:x="Search",refine:g,query:p})=>{const[m,f]=t.useState(p),[j,S]=t.useState(!1),y=t.useRef(null),b=t.useRef(null),C=m.length>=2,k=t.useCallback((e=>{f(e),g(e)}),[g]),z=t.useCallback((()=>{k("")}),[k]),I=t.useCallback((()=>{S(!0)}),[]),q=t.useCallback((e=>{k(e.currentTarget.value)}),[k]),v=t.useCallback((e=>{e.preventDefault(),e.stopPropagation(),z(),b.current&&b.current.focus()}),[z]),w=t.useCallback((e=>{e.preventDefault(),e.stopPropagation(),b.current&&b.current.blur()}),[]);return o.useClickOutside(y.current,(()=>{z(),S(!1)}),!0),e.jsxs(i.StyledSearchBox,{ref:y,children:[e.jsxs(i.StyledSearchBar,{action:"",noValidate:!0,onReset:v,onSubmit:w,role:"search",children:[e.jsxs("div",{className:"flex gap-2 w-full",children:[e.jsx("div",{className:"h-10 p-2",children:e.jsx(r.Icon,{icon:"magnifying-glass",iconSize:"sm",iconType:"fa-light"})}),e.jsx(i.StyledSearchInput,{autoCapitalize:"off",autoComplete:"off",autoCorrect:"off",maxLength:512,onChange:q,onFocus:I,placeholder:x,ref:b,spellCheck:!1,type:"search",value:m})]}),C&&e.jsx(i.StyledSearchReset,{type:"reset",children:e.jsx(r.Icon,{icon:"xmark",iconSize:"sm",iconType:"fa-light"})})]}),j&&m.length<2&&e.jsxs(i.StyledDropdownItems,{children:[e.jsx(c.Text,{color:n.theme.palette.gray[400],fontWeight:"bold",lineSpacing:1.5,size:"md",sizeSm:"sm",children:"Suggested"}),e.jsx("div",{className:"flex flex-col items-start self-stretch",children:h.map((({hit:t,icon:s},l)=>e.jsx(i.ItemSearching,{hit:t,icon:s,showIcon:!0},`${s}-${l}`)))}),e.jsx(c.Text,{color:n.theme.palette.gray[400],fontWeight:"bold",lineSpacing:1.5,size:"md",sizeSm:"sm",children:"Can’t find what you’re looking for?"}),e.jsx(i.ItemSearching,{hit:u.hit,icon:u.icon,showIcon:!0})]}),C&&d.length>0&&e.jsxs(i.StyledDropdownItems,{$showHits:C,children:[e.jsx(c.Text,{color:n.theme.palette.gray[400],fontWeight:"bold",lineSpacing:1.5,size:"md",sizeSm:"sm",children:"Results"}),e.jsx("div",{className:"flex flex-col items-start self-stretch",children:d.map((t=>e.jsx(i.ItemSearching,{hit:t},t.objectID)))})]}),C&&0===d.length&&e.jsx(i.StyledDropdownItems,{$empty:0===d.length,children:e.jsxs("div",{className:"items-center\tflex flex-col\tgap-4 py-[90px] w-full",children:[e.jsx(l.MemoizedImage,{height:96,publicId:"airs/search-bar/empty-state-icon",width:96}),e.jsx(a.Heading,{display:"flex",size:"sm",sizeSm:"xs",textAlign:"center",children:"No results found"}),e.jsxs(c.Text,{display:"flex",lineSpacing:1.5,size:"md",sizeSm:"sm",textAlign:"center",children:[`“${m}” did not match.`,e.jsx("br",{}),"Please try again."]}),e.jsx(s.Button,{onClick:z,variant:"secondary",children:"Clear search"})]})})]})};
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as y, useRef as x, useCallback as n } from "react";
+import { S as $, a as D, b as H, c as T, d as m, I as u } from "../../index-BMHVi812.mjs";
+import { Button as j } from "../button/index.js";
+import { M as V } from "../../index-maWH3JYC.mjs";
+import { theme as d } from "../colors/index.js";
+import { Icon as b } from "../icon/index.js";
+import { Heading as W } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as h } from "../typography/text/index.js";
+import { u as A } from "../../use-click-outside-BUll8Ag-.mjs";
+const F = [
+  {
+    hit: {
+      slug: "/services/continuous-hacking/",
+      title: "Continuous Hacking"
+    },
+    icon: "infinity"
+  },
+  {
+    hit: {
+      slug: "/platform/",
+      title: "Platform"
+    },
+    icon: "sidebar"
+  },
+  {
+    hit: {
+      slug: "/plans/",
+      title: "Plans"
+    },
+    icon: "star-christmas"
+  },
+  {
+    hit: {
+      slug: "/blog/",
+      title: "Blog"
+    },
+    icon: "pen-line"
+  }
+], z = {
+  hit: {
+    slug: "/contact-us/",
+    title: "Contact Support"
+  },
+  icon: "envelope"
+}, Y = ({
+  items: s,
+  placeholder: C = "Search",
+  refine: p,
+  query: I
+}) => {
+  const [l, v] = y(I), [w, f] = y(!1), g = x(null), o = x(null), a = l.length >= 2, r = n(
+    (t) => {
+      v(t), p(t);
+    },
+    [p]
+  ), c = n(() => {
+    r("");
+  }, [r]), k = n(() => {
+    f(!0);
+  }, []), R = n(
+    (t) => {
+      r(t.currentTarget.value);
+    },
+    [r]
+  ), N = n(
+    (t) => {
+      t.preventDefault(), t.stopPropagation(), c(), o.current && o.current.focus();
+    },
+    [c]
+  ), B = n(
+    (t) => {
+      t.preventDefault(), t.stopPropagation(), o.current && o.current.blur();
+    },
+    []
+  );
+  return A(
+    g.current,
+    () => {
+      c(), f(!1);
+    },
+    !0
+  ), /* @__PURE__ */ i($, { ref: g, children: [
+    /* @__PURE__ */ i(
+      D,
+      {
+        action: "",
+        noValidate: !0,
+        onReset: N,
+        onSubmit: B,
+        role: "search",
+        children: [
+          /* @__PURE__ */ i("div", { className: "flex gap-2 w-full", children: [
+            /* @__PURE__ */ e("div", { className: "h-10 p-2", children: /* @__PURE__ */ e(
+              b,
+              {
+                icon: "magnifying-glass",
+                iconSize: "sm",
+                iconType: "fa-light"
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              H,
+              {
+                autoCapitalize: "off",
+                autoComplete: "off",
+                autoCorrect: "off",
+                maxLength: 512,
+                onChange: R,
+                onFocus: k,
+                placeholder: C,
+                ref: o,
+                spellCheck: !1,
+                type: "search",
+                value: l
+              }
+            )
+          ] }),
+          a && /* @__PURE__ */ e(T, { type: "reset", children: /* @__PURE__ */ e(b, { icon: "xmark", iconSize: "sm", iconType: "fa-light" }) })
+        ]
+      }
+    ),
+    w && l.length < 2 && /* @__PURE__ */ i(m, { children: [
+      /* @__PURE__ */ e(
+        h,
+        {
+          color: d.palette.gray[400],
+          fontWeight: "bold",
+          lineSpacing: 1.5,
+          size: "md",
+          sizeSm: "sm",
+          children: "Suggested"
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex flex-col items-start self-stretch", children: F.map(({ hit: t, icon: S }, P) => /* @__PURE__ */ e(
+        u,
+        {
+          hit: t,
+          icon: S,
+          showIcon: !0
+        },
+        `${S}-${P}`
+      )) }),
+      /* @__PURE__ */ e(
+        h,
+        {
+          color: d.palette.gray[400],
+          fontWeight: "bold",
+          lineSpacing: 1.5,
+          size: "md",
+          sizeSm: "sm",
+          children: "Can’t find what you’re looking for?"
+        }
+      ),
+      /* @__PURE__ */ e(
+        u,
+        {
+          hit: z.hit,
+          icon: z.icon,
+          showIcon: !0
+        }
+      )
+    ] }),
+    a && s.length > 0 && /* @__PURE__ */ i(m, { $showHits: a, children: [
+      /* @__PURE__ */ e(
+        h,
+        {
+          color: d.palette.gray[400],
+          fontWeight: "bold",
+          lineSpacing: 1.5,
+          size: "md",
+          sizeSm: "sm",
+          children: "Results"
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex flex-col items-start self-stretch", children: s.map((t) => /* @__PURE__ */ e(u, { hit: t }, t.objectID)) })
+    ] }),
+    a && s.length === 0 && /* @__PURE__ */ e(m, { $empty: s.length === 0, children: /* @__PURE__ */ i("div", { className: "items-center	flex flex-col	gap-4 py-[90px] w-full", children: [
+      /* @__PURE__ */ e(
+        V,
+        {
+          height: 96,
+          publicId: "airs/search-bar/empty-state-icon",
+          width: 96
+        }
+      ),
+      /* @__PURE__ */ e(
+        W,
+        {
+          display: "flex",
+          size: "sm",
+          sizeSm: "xs",
+          textAlign: "center",
+          children: "No results found"
+        }
+      ),
+      /* @__PURE__ */ i(
+        h,
+        {
+          display: "flex",
+          lineSpacing: 1.5,
+          size: "md",
+          sizeSm: "sm",
+          textAlign: "center",
+          children: [
+            `“${l}” did not match.`,
+            /* @__PURE__ */ e("br", {}),
+            "Please try again."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(j, { onClick: c, variant: "secondary", children: "Clear search" })
+    ] }) })
+  ] });
+};
+export {
+  Y as SearchBar
+};

package/dist/components/search-bar/item-searching/index.js

@@ -1 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("react/jsx-runtime");const e=require("../../../index-qe0nJwzl.js");require("../../colors/index.js"),require("../../icon/index.js"),require("../../typography/heading/index.js"),require("../../typography/span/index.js"),require("../../typography/text/index.js"),exports.ItemSearching=e.ItemSearching;
+import "react/jsx-runtime";
+import { I } from "../../../index-BMHVi812.mjs";
+import "../../colors/index.js";
+import "../../icon/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import "../../typography/text/index.js";
+export {
+  I as ItemSearching
+};

package/dist/components/severity-badge/index.js

@@ -1 +1,74 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../colors/index.js"),o=require("../container/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const l=require("../typography/text/index.js"),i={critical:{bgColor:r.theme.palette.primary[700],colorL:r.theme.palette.gray[800],colorR:r.theme.palette.white},disable:{bgColor:r.theme.palette.gray[200],colorL:r.theme.palette.gray[400],colorR:r.theme.palette.gray[400]},high:{bgColor:r.theme.palette.error[500],colorL:r.theme.palette.gray[800],colorR:r.theme.palette.white},low:{bgColor:r.theme.palette.warning[200],colorL:r.theme.palette.gray[800],colorR:r.theme.palette.gray[800]},medium:{bgColor:r.theme.palette.warning[500],colorL:r.theme.palette.gray[800],colorR:r.theme.palette.gray[800]}};exports.SeverityBadge=({textL:r,textR:a,variant:p})=>{const n=t.useTheme(),{bgColor:s,colorL:x,colorR:c}=i[p];return e.jsxs(o.Container,{alignItems:"flex-start",display:"inline-flex",children:[r?e.jsx(o.Container,{alignItems:"center",bgColor:n.palette.white,border:`1px solid ${s}`,borderRadius:"4px 0px 0px 4px",display:"flex",justify:"center",padding:[0,.25,0,.25],children:e.jsx(l.Text,{color:x,size:"xs",children:r})}):void 0,e.jsx(o.Container,{alignItems:"center",bgColor:s,border:`1px solid ${s}`,borderRadius:r?"0px 4px 4px 0px":"4px",display:"flex",padding:r?[0,.25,0,.125]:[0,.25,0,.25],pb:.125,pl:.125,pr:.125,pt:.125,children:e.jsx(l.Text,{color:c,size:"xs",children:a})})]})};
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { useTheme as g } from "styled-components";
+import { theme as e } from "../colors/index.js";
+import { Container as t } from "../container/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as a } from "../typography/text/index.js";
+const m = {
+  critical: {
+    bgColor: e.palette.primary[700],
+    colorL: e.palette.gray[800],
+    colorR: e.palette.white
+  },
+  disable: {
+    bgColor: e.palette.gray[200],
+    colorL: e.palette.gray[400],
+    colorR: e.palette.gray[400]
+  },
+  high: {
+    bgColor: e.palette.error[500],
+    colorL: e.palette.gray[800],
+    colorR: e.palette.white
+  },
+  low: {
+    bgColor: e.palette.warning[200],
+    colorL: e.palette.gray[800],
+    colorR: e.palette.gray[800]
+  },
+  medium: {
+    bgColor: e.palette.warning[500],
+    colorL: e.palette.gray[800],
+    colorR: e.palette.gray[800]
+  }
+}, u = ({
+  textL: r,
+  textR: p,
+  variant: i
+}) => {
+  const n = g(), { bgColor: l, colorL: c, colorR: s } = m[i];
+  return /* @__PURE__ */ d(t, { alignItems: "flex-start", display: "inline-flex", children: [
+    r ? /* @__PURE__ */ o(
+      t,
+      {
+        alignItems: "center",
+        bgColor: n.palette.white,
+        border: `1px solid ${l}`,
+        borderRadius: "4px 0px 0px 4px",
+        display: "flex",
+        justify: "center",
+        padding: [0, 0.25, 0, 0.25],
+        children: /* @__PURE__ */ o(a, { color: c, size: "xs", children: r })
+      }
+    ) : void 0,
+    /* @__PURE__ */ o(
+      t,
+      {
+        alignItems: "center",
+        bgColor: l,
+        border: `1px solid ${l}`,
+        borderRadius: r ? "0px 4px 4px 0px" : "4px",
+        display: "flex",
+        padding: r ? [0, 0.25, 0, 0.125] : [0, 0.25, 0, 0.25],
+        pb: 0.125,
+        pl: 0.125,
+        pr: 0.125,
+        pt: 0.125,
+        children: /* @__PURE__ */ o(a, { color: s, size: "xs", children: p })
+      }
+    )
+  ] });
+};
+export {
+  u as SeverityBadge
+};

package/dist/components/severity-overview/badge/index.js

@@ -1 +1,69 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("lodash"),r=require("../../colors/index.js"),i=require("../../container/index.js"),n=require("../../../index-CmylnDrF.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js");const a=require("../../typography/text/index.js");exports.SeverityOverviewBadge=({variant:o,value:l})=>{const{iconColor:p,iconText:c,iconTextColor:s,textColor:h}=((e,i)=>{const n={critical:r.theme.palette.primary[700],high:r.theme.palette.error[500],low:r.theme.palette.warning[200],medium:r.theme.palette.warning[500],none:r.theme.palette.gray[200]},a={disabled:r.theme.palette.gray[400],enabled:r.theme.palette.gray[800]},o={critical:r.theme.palette.white,high:r.theme.palette.white,low:r.theme.palette.gray[800],medium:r.theme.palette.gray[800],none:r.theme.palette.gray[400]};return{iconColor:i<1?n.none:n[e],iconText:t.capitalize(e.charAt(0)),iconTextColor:i<1?o.none:o[e],textColor:i<1?a.disabled:a.enabled}})(o,l),d=t.capitalize(o.charAt(0))+o.slice(1);return e.jsxs(i.Container,{alignItems:"center",display:"inline-flex",gap:.5,minWidth:"43px",children:[e.jsx(n.Tooltip,{id:d,place:"top",tip:d,children:e.jsx(i.Container,{alignItems:"center",bgColor:p,borderRadius:"4px",cursor:"pointer",display:"flex",height:"22px",maxWidth:"22px",minWidth:"22px",children:e.jsx(a.Text,{color:s,size:"sm",textAlign:"center",children:c})})}),e.jsx(a.Text,{color:h,size:"sm",children:l})]})};
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { capitalize as m } from "lodash";
+import { theme as e } from "../../colors/index.js";
+import { Container as c } from "../../container/index.js";
+import { T as x } from "../../../index-DwznImvK.mjs";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as a } from "../../typography/text/index.js";
+const h = (t, o) => {
+  const r = {
+    critical: e.palette.primary[700],
+    high: e.palette.error[500],
+    low: e.palette.warning[200],
+    medium: e.palette.warning[500],
+    none: e.palette.gray[200]
+  }, i = {
+    disabled: e.palette.gray[400],
+    enabled: e.palette.gray[800]
+  }, l = {
+    critical: e.palette.white,
+    high: e.palette.white,
+    low: e.palette.gray[800],
+    medium: e.palette.gray[800],
+    none: e.palette.gray[400]
+  };
+  return {
+    iconColor: o < 1 ? r.none : r[t],
+    iconText: m(t.charAt(0)),
+    iconTextColor: o < 1 ? l.none : l[t],
+    textColor: o < 1 ? i.disabled : i.enabled
+  };
+}, z = ({
+  variant: t,
+  value: o
+}) => {
+  const { iconColor: r, iconText: i, iconTextColor: l, textColor: s } = h(
+    t,
+    o
+  ), p = m(t.charAt(0)) + t.slice(1);
+  return /* @__PURE__ */ d(
+    c,
+    {
+      alignItems: "center",
+      display: "inline-flex",
+      gap: 0.5,
+      minWidth: "43px",
+      children: [
+        /* @__PURE__ */ n(x, { id: p, place: "top", tip: p, children: /* @__PURE__ */ n(
+          c,
+          {
+            alignItems: "center",
+            bgColor: r,
+            borderRadius: "4px",
+            cursor: "pointer",
+            display: "flex",
+            height: "22px",
+            maxWidth: "22px",
+            minWidth: "22px",
+            children: /* @__PURE__ */ n(a, { color: l, size: "sm", textAlign: "center", children: i })
+          }
+        ) }),
+        /* @__PURE__ */ n(a, { color: s, size: "sm", children: o })
+      ]
+    }
+  );
+};
+export {
+  z as SeverityOverviewBadge
+};

package/dist/components/severity-overview/index.js

@@ -1 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("./badge/index.js"),r=require("../container/index.js");exports.SeverityOverview=({critical:a,high:t,medium:v,low:n})=>e.jsxs(r.Container,{alignItems:"center",display:"inline-flex",gap:1,children:[e.jsx(i.SeverityOverviewBadge,{value:a,variant:"critical"}),e.jsx(i.SeverityOverviewBadge,{value:t,variant:"high"}),e.jsx(i.SeverityOverviewBadge,{value:v,variant:"medium"}),e.jsx(i.SeverityOverviewBadge,{value:n,variant:"low"})]});
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { SeverityOverviewBadge as i } from "./badge/index.js";
+import { Container as l } from "../container/index.js";
+const s = ({
+  critical: r,
+  high: a,
+  medium: t,
+  low: v
+}) => /* @__PURE__ */ n(l, { alignItems: "center", display: "inline-flex", gap: 1, children: [
+  /* @__PURE__ */ e(i, { value: r, variant: "critical" }),
+  /* @__PURE__ */ e(i, { value: a, variant: "high" }),
+  /* @__PURE__ */ e(i, { value: t, variant: "medium" }),
+  /* @__PURE__ */ e(i, { value: v, variant: "low" })
+] });
+export {
+  s as SeverityOverview
+};

package/dist/components/show-on-hover/index.js

@@ -1,3 +1,31 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("styled-components"),i=require("../container/index.js"),r=n.styled.div`
-  ${({theme:e})=>`\n    border-radius: ${e.spacing[.25]};\n    cursor: pointer;\n    display: flex;\n    gap: ${e.spacing[.5]};\n    justify-content: end;\n    position: relative;\n    z-index: 20;\n\n    &:hover {\n      background-color: ${e.palette.gray[100]};\n    }\n\n    &:hover > div {\n      display: block;\n    }\n  `}
-`;exports.ShowOnHover=({visibleElement:n,hiddenElement:o})=>e.jsxs(r,{children:[n,e.jsx(i.Container,{display:"none",position:"absolute",top:"100%",zIndex:10,children:o})]});
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { styled as e } from "styled-components";
+import { Container as t } from "../container/index.js";
+const s = e.div`
+  ${({ theme: o }) => `
+    border-radius: ${o.spacing[0.25]};
+    cursor: pointer;
+    display: flex;
+    gap: ${o.spacing[0.5]};
+    justify-content: end;
+    position: relative;
+    z-index: 20;
+
+    &:hover {
+      background-color: ${o.palette.gray[100]};
+    }
+
+    &:hover > div {
+      display: block;
+    }
+  `}
+`, l = ({
+  visibleElement: o,
+  hiddenElement: r
+}) => /* @__PURE__ */ i(s, { children: [
+  o,
+  /* @__PURE__ */ n(t, { display: "none", position: "absolute", top: "100%", zIndex: 10, children: r })
+] });
+export {
+  l as ShowOnHover
+};