@fluidattacks/design 3.1.11 → 3.1.13

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

@@ -1 +1,95 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),n=require("../../index-DUMgwAbO.js"),t=require("../container/index.js"),r=require("../content-card/index.js"),s=require("../typography/heading/index.js");require("../typography/span/index.js");const l=require("../typography/text/index.js");exports.ContentCardCarousel=({description:a,items:d,title:o,titleHighlighted:c})=>{const x=i.useRef(null);return e.jsxs(n.OutlineContainer,{"data-testid":"content-card-carousel",children:[e.jsxs(t.Container,{alignItems:"flex-start",display:"flex",justify:"space-between",children:[e.jsxs(t.Container,{alignItems:"flex-start",display:"flex",flexDirection:"column",gap:.625,maxWidth:"800px",children:[e.jsxs(s.Heading,{display:"inline",fontWeight:"semibold",lineSpacing:2.25,lineSpacingSm:1.75,size:"lg",sizeSm:"md",children:[o+" "," ",e.jsx("span",{className:"inline",children:c})]}),e.jsx(l.Text,{lineSpacing:1.5,lineSpacingSm:1.25,size:"md",sizeSm:"sm",children:a})]}),e.jsx(n.ScrollButtons,{containerRef:x,id:"desktop"})]}),e.jsx(t.Container,{alignSelf:"stretch",display:"flex",id:"carousel",pb:1,pr:2.25,ref:x,scroll:"x",children:e.jsx(t.Container,{alignItems:"flex-start",display:"flex",gap:1.5,width:"max-content",children:d.map(((i,n)=>e.jsx(r.ContentCard,{...i},`${n}-${i.title}`)))})}),e.jsx(n.ScrollButtons,{containerRef:x,id:"mobile"})]})};
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useRef as d } from "react";
+import { O as p, S as r } from "../../index-CAIe8hBv.mjs";
+import { Container as n } from "../container/index.js";
+import { ContentCard as f } from "../content-card/index.js";
+import { Heading as x } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as g } from "../typography/text/index.js";
+const j = ({
+  description: a,
+  items: o,
+  title: s,
+  titleHighlighted: m
+}) => {
+  const t = d(null);
+  return /* @__PURE__ */ i(p, { "data-testid": "content-card-carousel", children: [
+    /* @__PURE__ */ i(
+      n,
+      {
+        alignItems: "flex-start",
+        display: "flex",
+        justify: "space-between",
+        children: [
+          /* @__PURE__ */ i(
+            n,
+            {
+              alignItems: "flex-start",
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.625,
+              maxWidth: "800px",
+              children: [
+                /* @__PURE__ */ i(
+                  x,
+                  {
+                    display: "inline",
+                    fontWeight: "semibold",
+                    lineSpacing: 2.25,
+                    lineSpacingSm: 1.75,
+                    size: "lg",
+                    sizeSm: "md",
+                    children: [
+                      s + " ",
+                      " ",
+                      /* @__PURE__ */ e("span", { className: "inline", children: m })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  g,
+                  {
+                    lineSpacing: 1.5,
+                    lineSpacingSm: 1.25,
+                    size: "md",
+                    sizeSm: "sm",
+                    children: a
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(r, { containerRef: t, id: "desktop" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      n,
+      {
+        alignSelf: "stretch",
+        display: "flex",
+        id: "carousel",
+        pb: 1,
+        pr: 2.25,
+        ref: t,
+        scroll: "x",
+        children: /* @__PURE__ */ e(
+          n,
+          {
+            alignItems: "flex-start",
+            display: "flex",
+            gap: 1.5,
+            width: "max-content",
+            children: o.map(
+              (l, c) => /* @__PURE__ */ e(f, { ...l }, `${c}-${l.title}`)
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(r, { containerRef: t, id: "mobile" })
+  ] });
+};
+export {
+  j as ContentCardCarousel
+};

package/dist/components/content-card-carousel/scroll-buttons/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("react/jsx-runtime"),require("react"),require("styled-components");const e=require("../../../index-DUMgwAbO.js");require("../../container/index.js"),require("../../icon/index.js"),exports.ScrollButtons=e.ScrollButtons;
+import "react/jsx-runtime";
+import "react";
+import "styled-components";
+import { S as s } from "../../../index-CAIe8hBv.mjs";
+import "../../container/index.js";
+import "../../icon/index.js";
+export {
+  s as ScrollButtons
+};

package/dist/components/divider/index.js

@@ -1 +1,25 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../colors/index.js"),o=require("../container/index.js"),i=r.forwardRef((function({color:r=t.theme.palette.gray[100],mt:i=.5,mb:n=.5,...s},a){return e.jsx(o.Container,{as:"hr",border:`1px solid ${r}`,mb:n,mt:i,ref:a,...s})}));exports.Divider=i;
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { theme as p } from "../colors/index.js";
+import { Container as n } from "../container/index.js";
+const h = f(function({
+  color: r = p.palette.gray[100],
+  mt: o = 0.5,
+  mb: t = 0.5,
+  ...e
+}, i) {
+  return /* @__PURE__ */ m(
+    n,
+    {
+      as: "hr",
+      border: `1px solid ${r}`,
+      mb: t,
+      mt: o,
+      ref: i,
+      ...e
+    }
+  );
+});
+export {
+  h as Divider
+};

package/dist/components/empty-state/empty-button/index.js

@@ -1 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../../button/index.js");exports.EmptyButton=({buttonProps:r,variant:n})=>t.jsx(e.Button,{onClick:r.onClick,variant:n,children:r.text});
+import { jsx as r } from "react/jsx-runtime";
+import { Button as n } from "../../button/index.js";
+const c = ({ buttonProps: t, variant: o }) => /* @__PURE__ */ r(n, { onClick: t.onClick, variant: o, children: t.text });
+export {
+  c as EmptyButton
+};

package/dist/components/empty-state/index.js

@@ -1,12 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./empty-button/index.js"),i=require("styled-components"),n=require("../../index-TKLFHcRp.js"),r=require("../typography/heading/index.js");require("../typography/span/index.js");const d=require("../typography/text/index.js"),s=i.styled.div`
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { EmptyButton as m } from "./empty-button/index.js";
+import { styled as n } from "styled-components";
+import { M as g } from "../../index-maWH3JYC.mjs";
+import { Heading as f } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as x } from "../typography/text/index.js";
+const h = n.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: ${({theme:e,$padding:t})=>e.spacing[t]};
+  padding: ${({ theme: i, $padding: e }) => i.spacing[e]};
   max-width: 900px;
   white-space: pre-line;
   margin: 0 auto;
-`,o=i.styled.div`
+`, y = n.div`
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -14,22 +21,65 @@
   background-color: transparent;
   width: 96px;
   height: 96px;
-  margin-bottom: ${({theme:e})=>e.spacing[2]};
+  margin-bottom: ${({ theme: i }) => i.spacing[2]};
 
   > img {
     width: 100%;
   }
-`,a=i.styled.div`
+`, u = n.div`
   display: flex;
   flex-direction: row;
   margin: 0;
-  margin-bottom: ${({theme:e})=>e.spacing[2]};
+  margin-bottom: ${({ theme: i }) => i.spacing[2]};
 
   > * {
-    margin-right: ${({theme:e})=>e.spacing[.75]};
+    margin-right: ${({ theme: i }) => i.spacing[0.75]};
   }
 
   > *:last-child {
     margin-right: 0;
   }
-`,p={md:{description:"md",title:"lg"},sm:{description:"sm",title:"xs"}};exports.EmptyState=({cancelButton:i,confirmButton:c,description:l,imageSrc:m="integrates/empty/addRoot",padding:g=1.25,title:x,size:h="md"})=>{const u=void 0!==(c??i);return e.jsxs(s,{$padding:g,children:[e.jsx(o,{children:e.jsx(n.MemoizedImage,{alt:"empty-icon",publicId:m})}),e.jsx(r.Heading,{fontWeight:"bold",lineSpacing:1.75,mb:.25,size:p[h].title,textAlign:"center",children:x}),e.jsx(d.Text,{mb:u?2:void 0,size:p[h].description,textAlign:"center",children:l}),u?e.jsxs(a,{children:[i&&e.jsx(t.EmptyButton,{buttonProps:i,variant:"tertiary"}),c&&e.jsx(t.EmptyButton,{buttonProps:c,variant:"primary"})]}):void 0]})};
+`, a = {
+  md: { description: "md", title: "lg" },
+  sm: { description: "sm", title: "xs" }
+}, C = ({
+  cancelButton: i = void 0,
+  confirmButton: e = void 0,
+  description: p,
+  imageSrc: s = "integrates/empty/addRoot",
+  padding: l = 1.25,
+  title: c,
+  size: r = "md"
+}) => {
+  const o = (e ?? i) !== void 0;
+  return /* @__PURE__ */ d(h, { $padding: l, children: [
+    /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(g, { alt: "empty-icon", publicId: s }) }),
+    /* @__PURE__ */ t(
+      f,
+      {
+        fontWeight: "bold",
+        lineSpacing: 1.75,
+        mb: 0.25,
+        size: a[r].title,
+        textAlign: "center",
+        children: c
+      }
+    ),
+    /* @__PURE__ */ t(
+      x,
+      {
+        mb: o ? 2 : void 0,
+        size: a[r].description,
+        textAlign: "center",
+        children: p
+      }
+    ),
+    o ? /* @__PURE__ */ d(u, { children: [
+      i && /* @__PURE__ */ t(m, { buttonProps: i, variant: "tertiary" }),
+      e && /* @__PURE__ */ t(m, { buttonProps: e, variant: "primary" })
+    ] }) : void 0
+  ] });
+};
+export {
+  C as EmptyState
+};

package/dist/components/file-preview/index.js

@@ -1,4 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("styled-components"),t=require("../container/index.js"),o=require("lodash"),r=require("../link/index.js"),n=i.styled(t.Container).attrs((({...e})=>({display:"inline-block",position:"relative",...e})))`
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { styled as p } from "styled-components";
+import { Container as a } from "../container/index.js";
+import n from "lodash";
+import { Link as m } from "../link/index.js";
+const d = p(a).attrs(
+  ({ ...e }) => ({
+    display: "inline-block",
+    position: "relative",
+    ...e
+  })
+)`
   & img {
     display: block;
   }
@@ -11,6 +22,23 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
-    ${({$opacity:e=0})=>`background-color: rgba(0, 0, 0, ${e});`}
+    ${({ $opacity: e = 0 }) => `background-color: rgba(0, 0, 0, ${e});`}
   }
-`;exports.FilePreview=({alt:i,fileType:t,width:s="100%",opacity:l=0,src:c,height:d="auto"})=>"video"===t||((e,i)=>!o.isUndefined(i)&&o.includes(e,(e=>{if(o.isNil(e))return"";const i=e.split(".");return(i.length>1?o.last(i):"").toLowerCase()})(i)))(["webm"],c)?e.jsx(n,{$opacity:l,children:e.jsxs("video",{controls:!0,height:d,muted:!0,width:s,children:[e.jsx("source",{src:c,type:"video/webm"}),e.jsx(r.Link,{href:c,iconPosition:"hidden",children:c})]})}):e.jsx(n,{$opacity:l,children:e.jsx("img",{alt:i,height:d,src:c,width:s})});
+`, u = (e) => {
+  if (n.isNil(e)) return "";
+  const t = e.split(".");
+  return (t.length > 1 ? n.last(t) : "").toLowerCase();
+}, f = (e, t) => n.isUndefined(t) ? !1 : n.includes(e, u(t)), w = ({
+  alt: e,
+  fileType: t,
+  width: r = "100%",
+  opacity: s = 0,
+  src: o,
+  height: l = "auto"
+}) => t === "video" || f(["webm"], o) ? /* @__PURE__ */ i(d, { $opacity: s, children: /* @__PURE__ */ c("video", { controls: !0, height: l, muted: !0, width: r, children: [
+  /* @__PURE__ */ i("source", { src: o, type: "video/webm" }),
+  /* @__PURE__ */ i(m, { href: o, iconPosition: "hidden", children: o })
+] }) }) : /* @__PURE__ */ i(d, { $opacity: s, children: /* @__PURE__ */ i("img", { alt: e, height: l, src: o, width: r }) });
+export {
+  w as FilePreview
+};

package/dist/components/form/index.js

@@ -1,3 +1,63 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("styled-components"),i=require("../button/index.js"),r=require("../container/index.js"),s=t.styled.form`
-  ${({theme:e})=>`\n    align-items: flex-start;\n    align-self: stretch;\n    display: flex;\n    flex-direction: column;\n    gap: ${e.spacing[.5]};\n\n    &:has(button[type="reset"]) {\n      &:last-child {\n        margin-top: ${e.spacing[1]};\n      }\n    }\n  `}
-`,o=n.forwardRef((function({cancelLabel:n,children:t,id:o="modal-confirm",onCancel:l,onConfirm:a="submit",submitLabel:c,submitDisabled:d=!1,...u},m){const x="submit"===a,f=[l,a].some(Boolean);return e.jsx(s,{ref:m,...u,children:e.jsxs(r.Container,{children:[e.jsx(r.Container,{display:"flex",flexDirection:"column",gap:.5,mb:1.5,children:t}),f&&e.jsxs(r.Container,{display:"flex",gap:.75,maxWidth:"392px",children:[l?e.jsx(i.Button,{id:`${o}-cancel`,justify:"center",onClick:l,type:"reset",variant:"tertiary",width:"100%",children:n??"Cancel"}):void 0,e.jsx(i.Button,{disabled:d,id:o,justify:"center",onClick:x?void 0:a,type:x?"submit":"button",width:"100%",children:c??"Confirm"})]})]})})}));exports.Form=o;
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { styled as y } from "styled-components";
+import { Button as a } from "../button/index.js";
+import { Container as n } from "../container/index.js";
+const b = y.form`
+  ${({ theme: i }) => `
+    align-items: flex-start;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: ${i.spacing[0.5]};
+
+    &:has(button[type="reset"]) {
+      &:last-child {
+        margin-top: ${i.spacing[1]};
+      }
+    }
+  `}
+`, F = x(function({
+  cancelLabel: m,
+  children: c,
+  id: o = "modal-confirm",
+  onCancel: e,
+  onConfirm: r = "submit",
+  submitLabel: d,
+  submitDisabled: f = !1,
+  ...p
+}, u) {
+  const s = r === "submit", h = [e, r].some(Boolean);
+  return /* @__PURE__ */ t(b, { ref: u, ...p, children: /* @__PURE__ */ l(n, { children: [
+    /* @__PURE__ */ t(n, { display: "flex", flexDirection: "column", gap: 0.5, mb: 1.5, children: c }),
+    h && /* @__PURE__ */ l(n, { display: "flex", gap: 0.75, maxWidth: "392px", children: [
+      e ? /* @__PURE__ */ t(
+        a,
+        {
+          id: `${o}-cancel`,
+          justify: "center",
+          onClick: e,
+          type: "reset",
+          variant: "tertiary",
+          width: "100%",
+          children: m ?? "Cancel"
+        }
+      ) : void 0,
+      /* @__PURE__ */ t(
+        a,
+        {
+          disabled: f,
+          id: o,
+          justify: "center",
+          onClick: s ? void 0 : r,
+          type: s ? "submit" : "button",
+          width: "100%",
+          children: d ?? "Confirm"
+        }
+      )
+    ] })
+  ] }) });
+});
+export {
+  F as Form
+};

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

@@ -1,7 +1,48 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),n=require("../../styles-C2CoGJl7.js"),i=t.styled(n.BaseComponent)`
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as $ } from "react";
+import { styled as s } from "styled-components";
+import { B as l } from "../../styles-CplEd2kw.mjs";
+const f = s(l)`
   display: grid;
-  gap: ${({$gap:e=1.25})=>`${e}rem`};
-  grid-template-columns: ${({$sm:e})=>`repeat(${e}, 1fr)`};
+  gap: ${({ $gap: r = 1.25 }) => `${r}rem`};
+  grid-template-columns: ${({ $sm: r }) => `repeat(${r}, 1fr)`};
 
-  ${({theme:e,$xl:r,$lg:t,$md:n})=>`\n    @media (width >= ${e.breakpoints.sm}) {\n      grid-template-columns: repeat(${n}, 1fr);\n    }\n\n    @media (width >= ${e.breakpoints.md}) {\n      grid-template-columns: repeat(${t}, 1fr);\n    }\n\n    @media (width >= ${e.breakpoints.lg}) {\n      grid-template-columns: repeat(${r}, 1fr);\n    }\n  `}
-`,a=r.forwardRef((function({children:r,md:t,sm:n,lg:a,xl:s,gap:m,...d},l){return e.jsx(i,{$gap:m,$lg:a,$md:t,$sm:n,$xl:s,ref:l,...d,children:r})}));exports.GridContainer=a;
+  ${({ theme: r, $xl: t, $lg: e, $md: i }) => `
+    @media (width >= ${r.breakpoints.sm}) {
+      grid-template-columns: repeat(${i}, 1fr);
+    }
+
+    @media (width >= ${r.breakpoints.md}) {
+      grid-template-columns: repeat(${e}, 1fr);
+    }
+
+    @media (width >= ${r.breakpoints.lg}) {
+      grid-template-columns: repeat(${t}, 1fr);
+    }
+  `}
+`, 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 {
+  C as GridContainer
+};

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

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