@fluidattacks/design 3.1.11 → 3.1.12

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

@@ -1,5 +1,95 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("styled-components"),r=require("../../utils-C2whpEd3.js");require("../../styles-C2CoGJl7.js");const i=require("../container/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const t=require("../typography/text/index.js"),{getVariant:a}=r.variantBuilder((n=>({compliance:`\n      display: inline-flex;\n\n      &.horizontal {\n        height: ${n.spacing[.75]};\n      }\n      &.vertical {\n        width: ${n.spacing[.75]};\n      }\n    `,default:`\n      display: inline-flex;\n\n      &.horizontal {\n        height: ${n.spacing[.5]};\n      }\n      &.vertical {\n        width: ${n.spacing[.5]};\n      }\n      .progress-bar {\n        background-color: ${n.palette.primary[500]};\n      }\n    `,progressIndicator:`\n      display: flex;\n\n      &.horizontal {\n        height: ${n.spacing[.125]};\n      }\n      &.vertical {\n        width: ${n.spacing[.125]};\n      }\n      .progress-bar {\n        background-color: ${n.palette.primary[500]};\n      }\n    `,progressIndicatorError:`\n      display: flex;\n\n      &.horizontal {\n        height: ${n.spacing[.125]};\n      }\n      &.vertical {\n        width: ${n.spacing[.125]};\n      }\n      .progress-bar {\n        background-color: ${n.palette.error[200]};\n      }\n    `,small:`\n      color: ${n.palette.primary[500]};\n      display: inline-flex;\n\n      &.horizontal {\n        height: ${n.spacing[.25]};\n      }\n      &.vertical {\n        width: ${n.spacing[.25]};\n      }\n      .progress-bar {\n        background-color: ${n.palette.primary[500]};\n      }\n    `}))),o=e.styled.div`
-  ${({theme:n,$minWidth:e,$orientation:r,$rounded:i,$variant:t})=>`\n    background-color: ${n.palette.gray[100]};\n    border-radius: ${i?"100px":"unset"};\n    ${"horizontal"===r?"min-width":"min-height"}: ${e}px;\n    ${"horizontal"===r?"":"height: 100%;"}\n\n    ${a(n,t)}\n\n  `}
-`,s=e.styled.div`
-  ${({theme:n,$percentage:e,$rounded:r,$variant:i})=>{return`\n    display: inline-flex;\n    width: ${e}%;\n    max-width: 100%;\n    min-width: 0%;\n    height: 100%;\n    border-radius: ${r?"100px":"unset"};\n    border-end-end-radius: ${r&&e<100?"0":"inherit"};\n    border-start-end-radius: ${r&&e<100?"0":"inherit"};\n    background-color: ${"compliance"===i?(t=n,a=e,a<50?t.palette.error[500]:a<80?t.palette.warning[500]:t.palette.success[500]):"inherit"};\n  `;var t,a}}
-`;exports.ProgressBar=({minWidth:e=100,percentage:r,percentageLocation:a="right",showPercentage:l=!1,orientation:d="horizontal",rounded:p=!0,variant:c="default"})=>{const h=l&&"left"===a,g=l?n.jsx(i.Container,{alignItems:"center",display:"flex",justify:h?"flex-end":"flex-start",width:"40px",children:n.jsx(t.Text,{ml:.5,mr:h?.5:0,size:"sm",children:`${r}%`})}):null,$=n.jsx(o,{$minWidth:e,$orientation:d,$rounded:p,$variant:c,className:d,children:n.jsx(s,{$percentage:r,$rounded:p,$variant:c,className:"progress-bar"})});return n.jsxs(i.Container,{alignItems:"center",display:"inline-flex",flexDirection:h?"row-reverse":"row",height:"horizontal"===d?"auto":"100%",maxWidth:h?`${e+43}px`:void 0,minWidth:h?`${e+43}px`:void 0,textAlign:"end",children:[$,g]})};
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import { styled as p } from "styled-components";
+import { v as g } from "../../utils-CQvBF-wY.mjs";
+import "../../styles-C3cZmKVJ.mjs";
+import { Container as d } from "../container/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as $ } from "../typography/text/index.js";
+const { getVariant: m } = g((n) => ({ compliance: `
+      display: inline-flex;
+
+      &.horizontal {
+        height: ${n.spacing[0.75]};
+      }
+      &.vertical {
+        width: ${n.spacing[0.75]};
+      }
+    `, default: `
+      display: inline-flex;
+
+      &.horizontal {
+        height: ${n.spacing[0.5]};
+      }
+      &.vertical {
+        width: ${n.spacing[0.5]};
+      }
+      .progress-bar {
+        background-color: ${n.palette.primary[500]};
+      }
+    `, progressIndicator: `
+      display: flex;
+
+      &.horizontal {
+        height: ${n.spacing[0.125]};
+      }
+      &.vertical {
+        width: ${n.spacing[0.125]};
+      }
+      .progress-bar {
+        background-color: ${n.palette.primary[500]};
+      }
+    `, progressIndicatorError: `
+      display: flex;
+
+      &.horizontal {
+        height: ${n.spacing[0.125]};
+      }
+      &.vertical {
+        width: ${n.spacing[0.125]};
+      }
+      .progress-bar {
+        background-color: ${n.palette.error[200]};
+      }
+    `, small: `
+      color: ${n.palette.primary[500]};
+      display: inline-flex;
+
+      &.horizontal {
+        height: ${n.spacing[0.25]};
+      }
+      &.vertical {
+        width: ${n.spacing[0.25]};
+      }
+      .progress-bar {
+        background-color: ${n.palette.primary[500]};
+      }
+    ` })), u = p.div`
+  ${({ theme: n, $minWidth: r, $orientation: e, $rounded: t, $variant: i }) => `
+    background-color: ${n.palette.gray[100]};
+    border-radius: ${t ? "100px" : "unset"};
+    ${e === "horizontal" ? "min-width" : "min-height"}: ${r}px;
+    ${e === "horizontal" ? "" : "height: 100%;"}
+
+    ${m(n, i)}
+
+  `}
+`, x = p.div`
+  ${({ theme: n, $percentage: r, $rounded: e, $variant: t }) => `
+    display: inline-flex;
+    width: ${r}%;
+    max-width: 100%;
+    min-width: 0%;
+    height: 100%;
+    border-radius: ${e ? "100px" : "unset"};
+    border-end-end-radius: ${e && r < 100 ? "0" : "inherit"};
+    border-start-end-radius: ${e && r < 100 ? "0" : "inherit"};
+    background-color: ${t === "compliance" ? ((i, a) => a < 50 ? i.palette.error[500] : a < 80 ? i.palette.warning[500] : i.palette.success[500])(n, r) : "inherit"};
+  `}
+`, I = ({ minWidth: n = 100, percentage: r, percentageLocation: e = "right", showPercentage: t = !1, orientation: i = "horizontal", rounded: a = !0, variant: s = "default" }) => {
+  const o = t && e === "left", c = t ? l(d, { alignItems: "center", display: "flex", justify: o ? "flex-end" : "flex-start", width: "40px", children: l($, { ml: 0.5, mr: o ? 0.5 : 0, size: "sm", children: `${r}%` }) }) : null;
+  return h(d, { alignItems: "center", display: "inline-flex", flexDirection: o ? "row-reverse" : "row", height: i === "horizontal" ? "auto" : "100%", maxWidth: o ? `${n + 43}px` : void 0, minWidth: o ? `${n + 43}px` : void 0, textAlign: "end", children: [l(u, { $minWidth: n, $orientation: i, $rounded: a, $variant: s, className: i, children: l(x, { $percentage: r, $rounded: a, $variant: s, className: "progress-bar" }) }), c] });
+};
+export {
+  I as ProgressBar
+};

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

@@ -1,3 +1,88 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("styled-components"),a=t.styled.label`
-  ${({theme:e})=>`\n    align-items: center;\n    display: flex;\n    color: ${e.palette.gray[600]};\n    cursor: pointer;\n    font-family: ${e.typography.type.primary};\n    font-size: ${e.typography.text.sm};\n    font-weight: ${e.typography.weight.regular};\n    gap: ${e.spacing[.5]};\n    line-height: ${e.typography.text.lg};\n    text-align: left;\n    position: relative;\n\n    &[aria-disabled="true"] {\n      color: ${e.palette.gray[300]};\n      cursor: not-allowed;\n    }\n\n    input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      width: 0;\n    }\n\n    .checkmark {\n      position: relative;\n      top: 0;\n      left: 0;\n      height: 16px;\n      width: 16px;\n      background-color: ${e.palette.white};\n      border-radius: 50%;\n      border: 1px solid ${e.palette.gray[600]};\n    }\n\n    input:disabled ~ .checkmark {\n      border: 1px solid ${e.palette.gray[300]};\n      background-color: ${e.palette.white};\n      cursor: not-allowed;\n    }\n\n    input:not(:disabled):checked ~ .checkmark {\n      background-color: ${e.palette.white};\n      border: 1px solid ${e.palette.primary[500]};\n    }\n\n    input:not(:disabled):hover ~ .checkmark {\n      background-color: ${e.palette.white};\n      box-shadow: 0 0 0 4px ${e.palette.gray[100]};\n    }\n\n    input:not(:disabled):hover:checked ~ .checkmark {\n      background-color: ${e.palette.white};\n      box-shadow: 0 0 0 4px ${e.palette.primary[50]};\n    }\n\n    .checkmark::after {\n      content: "";\n      position: absolute;\n      display: none;\n      top: 3px;\n      left: 3px;\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: ${e.palette.primary[500]};\n    }\n\n    input:checked ~ .checkmark::after {\n      display: block;\n    }\n\n    input:disabled:checked ~ .checkmark::after {\n      background-color: ${e.palette.gray[300]};\n    }\n\n  `}
-`,r=t.styled.span.attrs({className:"checkmark"})``,o=n.forwardRef((function({defaultChecked:n=!1,disabled:t=!1,label:o,name:i,onChange:l,onClick:p,value:d,...c},s){return e.jsxs(a,{"aria-disabled":t,"aria-label":i,role:"radiogroup",children:[e.jsx("input",{"aria-checked":n,"aria-disabled":t,"aria-label":i,defaultChecked:n,disabled:t,name:i,onChange:l,onClick:p,ref:s,type:"radio",value:d,...c}),e.jsx(r,{}),o??null]})}));exports.RadioButton=o;
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { styled as r } from "styled-components";
+const k = r.label`
+  ${({ theme: n }) => `
+    align-items: center;
+    display: flex;
+    color: ${n.palette.gray[600]};
+    cursor: pointer;
+    font-family: ${n.typography.type.primary};
+    font-size: ${n.typography.text.sm};
+    font-weight: ${n.typography.weight.regular};
+    gap: ${n.spacing[0.5]};
+    line-height: ${n.typography.text.lg};
+    text-align: left;
+    position: relative;
+
+    &[aria-disabled="true"] {
+      color: ${n.palette.gray[300]};
+      cursor: not-allowed;
+    }
+
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      width: 0;
+    }
+
+    .checkmark {
+      position: relative;
+      top: 0;
+      left: 0;
+      height: 16px;
+      width: 16px;
+      background-color: ${n.palette.white};
+      border-radius: 50%;
+      border: 1px solid ${n.palette.gray[600]};
+    }
+
+    input:disabled ~ .checkmark {
+      border: 1px solid ${n.palette.gray[300]};
+      background-color: ${n.palette.white};
+      cursor: not-allowed;
+    }
+
+    input:not(:disabled):checked ~ .checkmark {
+      background-color: ${n.palette.white};
+      border: 1px solid ${n.palette.primary[500]};
+    }
+
+    input:not(:disabled):hover ~ .checkmark {
+      background-color: ${n.palette.white};
+      box-shadow: 0 0 0 4px ${n.palette.gray[100]};
+    }
+
+    input:not(:disabled):hover:checked ~ .checkmark {
+      background-color: ${n.palette.white};
+      box-shadow: 0 0 0 4px ${n.palette.primary[50]};
+    }
+
+    .checkmark::after {
+      content: "";
+      position: absolute;
+      display: none;
+      top: 3px;
+      left: 3px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: ${n.palette.primary[500]};
+    }
+
+    input:checked ~ .checkmark::after {
+      display: block;
+    }
+
+    input:disabled:checked ~ .checkmark::after {
+      background-color: ${n.palette.gray[300]};
+    }
+
+  `}
+`, u = r.span.attrs({ className: "checkmark" })``, y = h(function({ defaultChecked: n = !1, disabled: e = !1, label: o, name: a, onChange: i, onClick: l, value: p, ...d }, c) {
+  return s(k, { "aria-disabled": e, "aria-label": a, role: "radiogroup", children: [t("input", { "aria-checked": n, "aria-disabled": e, "aria-label": a, defaultChecked: n, disabled: e, name: a, onChange: i, onClick: l, ref: c, type: "radio", value: p, ...d }), t(u, {}), o ?? null] });
+});
+export {
+  y as RadioButton
+};

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

@@ -1,6 +1,24 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),o=require("styled-components"),r=require("../icon-button/index.js"),l=o.styled.div.attrs({className:"comp-scroll-up"})`
+import { jsx as r } from "react/jsx-runtime";
+import { useState as l, useEffect as a, useCallback as m } from "react";
+import { styled as d } from "styled-components";
+import { IconButton as p } from "../icon-button/index.js";
+const u = d.div.attrs({ className: "comp-scroll-up" })`
   bottom: 15px;
   position: fixed;
   right: 140px;
   z-index: 100;
-`;exports.ScrollUpButton=({scrollerId:o="dashboard",visibleAt:s=500})=>{const[n,i]=t.useState(!1),[c,u]=t.useState(null);t.useEffect((()=>{u(document.getElementById(o)),null==c||c.addEventListener("scroll",(()=>{i(c.scrollTop>s)}))}),[c,o,s]);const d=t.useCallback((()=>{null==c||c.scrollTo({behavior:"smooth",top:0})}),[c]);return n?e.jsx(l,{children:e.jsx(r.IconButton,{height:"40px",icon:"arrow-up",iconSize:"sm",id:"scroll-up",onClick:d,width:"40px"})}):null};
+`, v = ({ scrollerId: t = "dashboard", visibleAt: s = 500 }) => {
+  const [e, i] = l(!1), [o, c] = l(null);
+  a(() => {
+    c(document.getElementById(t)), o == null || o.addEventListener("scroll", () => {
+      i(o.scrollTop > s);
+    });
+  }, [o, t, s]);
+  const n = m(() => {
+    o == null || o.scrollTo({ behavior: "smooth", top: 0 });
+  }, [o]);
+  return e ? r(u, { children: r(p, { height: "40px", icon: "arrow-up", iconSize: "sm", id: "scroll-up", onClick: n, width: "40px" }) }) : null;
+};
+export {
+  v as ScrollUpButton
+};

package/dist/components/search/index.js

@@ -1,7 +1,63 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../index-CmylnDrF.js"),t=require("lodash"),r=require("react"),i=require("styled-components"),o=require("../icon/index.js"),a=require("../icon-button/index.js"),s=require("../../use-click-outside-BqkLISED.js"),l=i.styled.input`
-  ${({theme:e})=>`\n    background: none;\n    border: none !important;\n    box-shadow: none;\n    box-sizing: border-box;\n    color: ${e.palette.gray[800]};\n    font-family: ${e.typography.type.primary};\n    font-size: ${e.typography.text.sm};\n    outline: none;\n    width: 100%;\n\n    &::placeholder {\n      color: ${e.palette.gray[400]};\n    }\n  `}
-`,c=i.styled.div`
-  ${({theme:e})=>`\n    align-items: center;\n    background-color: ${e.palette.white};\n    border: 1px solid ${e.palette.gray[300]};\n    border-radius: ${e.spacing[.5]};\n    display: flex;\n    height: 40px;\n    gap: ${e.spacing[.5]};\n    padding: ${e.spacing[.5]};\n    width: 100%;\n\n    &:hover {\n      border-color: ${e.palette.gray[600]};\n    }\n\n    &:focus-within {\n      border: 2px solid ${e.palette.black};\n    }\n  `}
-`,d=i.styled.div`
-  ${({theme:e})=>`\n    background-color: ${e.palette.white};\n    border-radius: ${e.spacing[.5]};\n    width: 250px;\n  `}
-`,p=r.forwardRef((function({name:p,smallSearch:g=!1,value:u,...y},h){const x=i.useTheme(),[f,m]=r.useState(!1),{refs:b,floatingStyles:$}=n.useFloating(),j=r.useCallback((()=>{m((e=>!e))}),[]);s.useClickOutside(b.floating.current,(()=>{m(!1)}),!0);const k=e.jsxs(c,{children:[e.jsx(o.Icon,{icon:"magnifying-glass",iconColor:x.palette.gray[700],iconSize:"xs",iconType:"fa-light"}),e.jsx(l,{...y,id:p,name:p,ref:h,value:u}),!t.isEmpty(u)&&e.jsx(a.IconButton,{icon:"xmark",iconColor:x.palette.gray[300],iconSize:"xs",iconType:"fa-light",px:.25,py:.25,type:"reset",variant:"ghost"})]});return g?e.jsxs(r.Fragment,{children:[e.jsx(a.IconButton,{border:`1px solid ${x.palette.gray[300]} !important`,icon:"magnifying-glass",iconSize:"xs",iconType:"fa-light",onClick:j,ref:b.setReference,variant:"ghost"}),f?e.jsx(d,{ref:b.setFloating,style:$,children:k}):void 0]}):k}));exports.Search=p;
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { u } from "../../index-D-lcuEHY.mjs";
+import { isEmpty as x } from "lodash";
+import { forwardRef as $, useState as b, useCallback as v, Fragment as w } from "react";
+import { styled as r, useTheme as k } from "styled-components";
+import { Icon as S } from "../icon/index.js";
+import { IconButton as p } from "../icon-button/index.js";
+import { u as z } from "../../use-click-outside-BtZLIoU1.mjs";
+const C = r.input`
+  ${({ theme: e }) => `
+    background: none;
+    border: none !important;
+    box-shadow: none;
+    box-sizing: border-box;
+    color: ${e.palette.gray[800]};
+    font-family: ${e.typography.type.primary};
+    font-size: ${e.typography.text.sm};
+    outline: none;
+    width: 100%;
+
+    &::placeholder {
+      color: ${e.palette.gray[400]};
+    }
+  `}
+`, T = r.div`
+  ${({ theme: e }) => `
+    align-items: center;
+    background-color: ${e.palette.white};
+    border: 1px solid ${e.palette.gray[300]};
+    border-radius: ${e.spacing[0.5]};
+    display: flex;
+    height: 40px;
+    gap: ${e.spacing[0.5]};
+    padding: ${e.spacing[0.5]};
+    width: 100%;
+
+    &:hover {
+      border-color: ${e.palette.gray[600]};
+    }
+
+    &:focus-within {
+      border: 2px solid ${e.palette.black};
+    }
+  `}
+`, j = r.div`
+  ${({ theme: e }) => `
+    background-color: ${e.palette.white};
+    border-radius: ${e.spacing[0.5]};
+    width: 250px;
+  `}
+`, G = $(function({ name: e, smallSearch: c = !1, value: a, ...g }, m) {
+  const o = k(), [d, i] = b(!1), { refs: t, floatingStyles: f } = u(), h = v(() => {
+    i((y) => !y);
+  }, []);
+  z(t.floating.current, () => {
+    i(!1);
+  }, !0);
+  const s = l(T, { children: [n(S, { icon: "magnifying-glass", iconColor: o.palette.gray[700], iconSize: "xs", iconType: "fa-light" }), n(C, { ...g, id: e, name: e, ref: m, value: a }), !x(a) && n(p, { icon: "xmark", iconColor: o.palette.gray[300], iconSize: "xs", iconType: "fa-light", px: 0.25, py: 0.25, type: "reset", variant: "ghost" })] });
+  return c ? l(w, { children: [n(p, { border: `1px solid ${o.palette.gray[300]} !important`, icon: "magnifying-glass", iconSize: "xs", iconType: "fa-light", onClick: h, ref: t.setReference, variant: "ghost" }), d ? n(j, { ref: t.setFloating, style: f, children: s }) : void 0] }) : s;
+});
+export {
+  G as Search
+};

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

@@ -1 +1,32 @@
-"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 S, useCallback as l } from "react";
+import { S as D, a as H, b as W, c as j, d as m, I as p } from "../../index-BLbKylyw.mjs";
+import { Button as A } from "../button/index.js";
+import { M as B } from "../../index-BwFnfaRh.mjs";
+import { theme as f } from "../colors/index.js";
+import { Icon as z } from "../icon/index.js";
+import { Heading as R } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as h } from "../typography/text/index.js";
+import { u as q } from "../../use-click-outside-BtZLIoU1.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" }], C = { hit: { slug: "/contact-us/", title: "Contact Support" }, icon: "envelope" }, Y = ({ items: n, placeholder: b = "Search", refine: d, query: v }) => {
+  const [o, k] = y(v), [w, u] = y(!1), g = S(null), a = S(null), s = o.length >= 2, r = l((t) => {
+    k(t), d(t);
+  }, [d]), c = l(() => {
+    r("");
+  }, [r]), I = l(() => {
+    u(!0);
+  }, []), N = l((t) => {
+    r(t.currentTarget.value);
+  }, [r]), P = l((t) => {
+    t.preventDefault(), t.stopPropagation(), c(), a.current && a.current.focus();
+  }, [c]), $ = l((t) => {
+    t.preventDefault(), t.stopPropagation(), a.current && a.current.blur();
+  }, []);
+  return q(g.current, () => {
+    c(), u(!1);
+  }, !0), i(D, { ref: g, children: [i(H, { action: "", noValidate: !0, onReset: P, onSubmit: $, role: "search", children: [i("div", { className: "flex gap-2 w-full", children: [e("div", { className: "h-10 p-2", children: e(z, { icon: "magnifying-glass", iconSize: "sm", iconType: "fa-light" }) }), e(W, { autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", maxLength: 512, onChange: N, onFocus: I, placeholder: b, ref: a, spellCheck: !1, type: "search", value: o })] }), s && e(j, { type: "reset", children: e(z, { icon: "xmark", iconSize: "sm", iconType: "fa-light" }) })] }), w && o.length < 2 && i(m, { children: [e(h, { color: f.palette.gray[400], fontWeight: "bold", lineSpacing: 1.5, size: "md", sizeSm: "sm", children: "Suggested" }), e("div", { className: "flex flex-col items-start self-stretch", children: F.map(({ hit: t, icon: x }, T) => e(p, { hit: t, icon: x, showIcon: !0 }, `${x}-${T}`)) }), e(h, { color: f.palette.gray[400], fontWeight: "bold", lineSpacing: 1.5, size: "md", sizeSm: "sm", children: "Can’t find what you’re looking for?" }), e(p, { hit: C.hit, icon: C.icon, showIcon: !0 })] }), s && n.length > 0 && i(m, { $showHits: s, children: [e(h, { color: f.palette.gray[400], fontWeight: "bold", lineSpacing: 1.5, size: "md", sizeSm: "sm", children: "Results" }), e("div", { className: "flex flex-col items-start self-stretch", children: n.map((t) => e(p, { hit: t }, t.objectID)) })] }), s && n.length === 0 && e(m, { $empty: n.length === 0, children: i("div", { className: "items-center	flex flex-col	gap-4 py-[90px] w-full", children: [e(B, { height: 96, publicId: "airs/search-bar/empty-state-icon", width: 96 }), e(R, { display: "flex", size: "sm", sizeSm: "xs", textAlign: "center", children: "No results found" }), i(h, { display: "flex", lineSpacing: 1.5, size: "md", sizeSm: "sm", textAlign: "center", children: [`“${o}” did not match.`, e("br", {}), "Please try again."] }), e(A, { 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-BLbKylyw.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,14 @@
-"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 n } from "styled-components";
+import { theme as e } from "../colors/index.js";
+import { Container as l } from "../container/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as a } from "../typography/text/index.js";
+const x = { 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] } }, L = ({ textL: r, textR: p, variant: i }) => {
+  const s = n(), { bgColor: t, colorL: c, colorR: g } = x[i];
+  return d(l, { alignItems: "flex-start", display: "inline-flex", children: [r ? o(l, { alignItems: "center", bgColor: s.palette.white, border: `1px solid ${t}`, borderRadius: "4px 0px 0px 4px", display: "flex", justify: "center", padding: [0, 0.25, 0, 0.25], children: o(a, { color: c, size: "xs", children: r }) }) : void 0, o(l, { alignItems: "center", bgColor: t, border: `1px solid ${t}`, 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: o(a, { color: g, size: "xs", children: p }) })] });
+};
+export {
+  L as SeverityBadge
+};

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

@@ -1 +1,18 @@
-"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 f, jsx as t } from "react/jsx-runtime";
+import { capitalize as m } from "lodash";
+import { theme as e } from "../../colors/index.js";
+import { Container as s } from "../../container/index.js";
+import { T as C } from "../../../index-D-lcuEHY.mjs";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as d } from "../../typography/text/index.js";
+const j = ({ variant: r, value: a }) => {
+  const { iconColor: x, iconText: h, iconTextColor: g, textColor: y } = ((i, o) => {
+    const l = { 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] }, p = { disabled: e.palette.gray[400], enabled: e.palette.gray[800] }, c = { 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 ? l.none : l[i], iconText: m(i.charAt(0)), iconTextColor: o < 1 ? c.none : c[i], textColor: o < 1 ? p.disabled : p.enabled };
+  })(r, a), n = m(r.charAt(0)) + r.slice(1);
+  return f(s, { alignItems: "center", display: "inline-flex", gap: 0.5, minWidth: "43px", children: [t(C, { id: n, place: "top", tip: n, children: t(s, { alignItems: "center", bgColor: x, borderRadius: "4px", cursor: "pointer", display: "flex", height: "22px", maxWidth: "22px", minWidth: "22px", children: t(d, { color: g, size: "sm", textAlign: "center", children: h }) }) }), t(d, { color: y, size: "sm", children: a })] });
+};
+export {
+  j as SeverityOverviewBadge
+};

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

@@ -1 +1,7 @@
-"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 l, jsx as i } from "react/jsx-runtime";
+import { SeverityOverviewBadge as a } from "./badge/index.js";
+import { Container as n } from "../container/index.js";
+const c = ({ critical: e, high: r, medium: t, low: v }) => l(n, { alignItems: "center", display: "inline-flex", gap: 1, children: [i(a, { value: e, variant: "critical" }), i(a, { value: r, variant: "high" }), i(a, { value: t, variant: "medium" }), i(a, { value: v, variant: "low" })] });
+export {
+  c as SeverityOverview
+};

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

@@ -1,3 +1,25 @@
-"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 o, jsx as i } from "react/jsx-runtime";
+import { styled as r } from "styled-components";
+import { Container as s } from "../container/index.js";
+const t = r.div`
+  ${({ theme: n }) => `
+    border-radius: ${n.spacing[0.25]};
+    cursor: pointer;
+    display: flex;
+    gap: ${n.spacing[0.5]};
+    justify-content: end;
+    position: relative;
+    z-index: 20;
+
+    &:hover {
+      background-color: ${n.palette.gray[100]};
+    }
+
+    &:hover > div {
+      display: block;
+    }
+  `}
+`, p = ({ visibleElement: n, hiddenElement: e }) => o(t, { children: [n, i(s, { display: "none", position: "absolute", top: "100%", zIndex: 10, children: e })] });
+export {
+  p as ShowOnHover
+};