@fluidattacks/design 3.1.11 → 3.1.12

package/dist/_commonjsHelpers-C6fGbg64.mjs

@@ -0,0 +1,6 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as g
+};

package/dist/components/@core/index.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../utils-C2whpEd3.js"),t=require("../../styles-C2CoGJl7.js");exports.variantBuilder=e.variantBuilder,exports.BaseButtonComponent=t.BaseButtonComponent,exports.BaseComponent=t.BaseComponent,exports.BaseSpanComponent=t.BaseSpanComponent,exports.BaseTextComponent=t.BaseTextComponent,exports.getStyledConfig=t.getStyledConfig,exports.hiddenProps=t.hiddenProps,exports.setBorder=t.setBorder,exports.setDisplay=t.setDisplay,exports.setInteraction=t.setInteraction,exports.setMargin=t.setMargin,exports.setPadding=t.setPadding,exports.setPosition=t.setPosition,exports.setText=t.setText;
+import { v as e } from "../../utils-CQvBF-wY.mjs";
+import { a as o, B as n, c as i, b as r, k as p, h as d, j as B, i as m, f as g, e as C, s as f, g as x, d as l } from "../../styles-C3cZmKVJ.mjs";
+export {
+  o as BaseButtonComponent,
+  n as BaseComponent,
+  i as BaseSpanComponent,
+  r as BaseTextComponent,
+  p as getStyledConfig,
+  d as hiddenProps,
+  B as setBorder,
+  m as setDisplay,
+  g as setInteraction,
+  C as setMargin,
+  f as setPadding,
+  x as setPosition,
+  l as setText,
+  e as variantBuilder
+};

package/dist/components/accordion/accordion-content/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../container/index.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js");const t=require("../../typography/text/index.js");exports.AccordionContent=({item:r})=>e.jsxs(i.Container,{display:"block",id:`panel-${r.title}`,padding:[.75,.75,.75,.75],children:[r.description?e.jsx(t.Text,{mb:r.extraElement?.5:void 0,size:"sm",children:r.description}):void 0,r.extraElement?e.jsx(i.Container,{children:r.extraElement}):void 0]});
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { Container as t } from "../../container/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as r } from "../../typography/text/index.js";
+const p = ({ item: i }) => o(t, { display: "block", id: `panel-${i.title}`, padding: [0.75, 0.75, 0.75, 0.75], children: [i.description ? e(r, { mb: i.extraElement ? 0.5 : void 0, size: "sm", children: i.description }) : void 0, i.extraElement ? e(t, { children: i.extraElement }) : void 0] });
+export {
+  p as AccordionContent
+};

package/dist/components/accordion/index.js

@@ -1 +1,21 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),o=require("./accordion-content/index.js"),i=require("../container/index.js"),n=require("../icon/index.js");require("../typography/heading/index.js"),require("../typography/span/index.js");const a=require("../typography/text/index.js"),s=r.forwardRef((function({aligned:s="end",items:l,bgColor:c},d){const p=t.useTheme(),[x,u]=r.useState(!1),[g,h]=r.useState(-1),y=r.useCallback((e=>()=>{h(e),u(e!==g||(e=>!e))}),[g]);return e.jsx(i.Container,{ref:d,children:l.map(((r,t)=>{const d=t===g&&x;return e.jsxs(i.Container,{bgColor:c??p.palette.white,children:[e.jsx(i.Container,{"aria-controls":`panel-${r.title}`,"aria-expanded":x,"aria-label":r.title,as:"button",bgColor:c??p.palette.white,bgColorHover:p.palette.gray[100],borderBottom:d||t===l.length-1?"1px solid":void 0,borderColor:p.palette.gray[200],borderTop:"1px solid",cursor:"pointer",display:"flex",onClick:y(t),padding:[.75,.75,.75,.75],width:"100%",children:e.jsxs(i.Container,{as:"summary",display:"flex",flexDirection:"end"===s?"row":"row-reverse",gap:.75,justify:"space-between",width:"100%",children:[e.jsx(a.Text,{color:p.palette.gray[800],fontWeight:"bold",size:"sm",sizeSm:"sm",textAlign:"start",children:r.title}),e.jsx(n.Icon,{icon:d?"chevron-up":"chevron-down",iconColor:p.palette.gray[400],iconSize:"xs",iconType:"fa-light"})]})}),d&&e.jsx(o.AccordionContent,{item:r})]},r.title)}))})}));exports.Accordion=s;
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as x, useState as c, useCallback as u } from "react";
+import { useTheme as y } from "styled-components";
+import { AccordionContent as C } from "./accordion-content/index.js";
+import { Container as i } from "../container/index.js";
+import { Icon as w } from "../icon/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as v } from "../typography/text/index.js";
+const I = x(function({ aligned: m = "end", items: l, bgColor: s }, f) {
+  const e = y(), [p, g] = c(!1), [a, h] = c(-1), b = u((o) => () => {
+    h(o), g(o !== a || ((t) => !t));
+  }, [a]);
+  return r(i, { ref: f, children: l.map((o, t) => {
+    const n = t === a && p;
+    return d(i, { bgColor: s ?? e.palette.white, children: [r(i, { "aria-controls": `panel-${o.title}`, "aria-expanded": p, "aria-label": o.title, as: "button", bgColor: s ?? e.palette.white, bgColorHover: e.palette.gray[100], borderBottom: n || t === l.length - 1 ? "1px solid" : void 0, borderColor: e.palette.gray[200], borderTop: "1px solid", cursor: "pointer", display: "flex", onClick: b(t), padding: [0.75, 0.75, 0.75, 0.75], width: "100%", children: d(i, { as: "summary", display: "flex", flexDirection: m === "end" ? "row" : "row-reverse", gap: 0.75, justify: "space-between", width: "100%", children: [r(v, { color: e.palette.gray[800], fontWeight: "bold", size: "sm", sizeSm: "sm", textAlign: "start", children: o.title }), r(w, { icon: n ? "chevron-up" : "chevron-down", iconColor: e.palette.gray[400], iconSize: "xs", iconType: "fa-light" })] }) }), n && r(C, { item: o })] }, o.title);
+  }) });
+});
+export {
+  I as Accordion
+};

package/dist/components/alert/index.js

@@ -1,6 +1,113 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),t=require("styled-components"),r=require("../../utils-C2whpEd3.js"),o=require("../container/index.js"),i=require("../icon/index.js"),a=require("../icon-button/index.js"),c=n=>{switch(n){case"warning":return"triangle-exclamation";case"info":return"circle-info";case"success":return"circle-check";default:return"circle-exclamation"}},{getVariant:l}=r.variantBuilder((n=>({error:`\n      background: ${n.palette.error[50]};\n      border: 1px solid ${n.palette.error[500]};\n      color: ${n.palette.error[700]};\n\n      button {\n        color: ${n.palette.error[700]};\n\n        &:hover:not([disabled]) {\n          background-color: ${n.palette.error[200]};\n          color: ${n.palette.error[700]};\n        }\n      }\n    `,info:`\n      background: ${n.palette.info[50]};\n      border: 1px solid ${n.palette.info[500]};\n      color: ${n.palette.info[700]};\n\n      button {\n        color: ${n.palette.info[700]};\n\n        &:hover:not([disabled]) {\n          background-color: ${n.palette.info[200]};\n          color: ${n.palette.info[700]};\n        }\n      }\n    `,success:`\n      background: ${n.palette.success[50]};\n      border: 1px solid ${n.palette.success[500]};\n      color: ${n.palette.success[700]};\n\n      button {\n        color: ${n.palette.success[700]};\n\n        &:hover:not([disabled]) {\n          background-color: ${n.palette.success[200]};\n          color: ${n.palette.success[700]};\n        }\n      }\n    `,warning:`\n      background: ${n.palette.warning[50]};\n      border: 1px solid ${n.palette.warning[500]};\n      color: ${n.palette.warning[700]};\n\n      button {\n        color: ${n.palette.warning[700]};\n\n        &:hover:not([disabled]) {\n          background-color: ${n.palette.warning[200]};\n          color: ${n.palette.warning[700]};\n        }\n      }\n    `}))),s=t.styled.div`
-  ${({theme:n,$variant:e})=>`\n    background: transparent;\n    align-items: center;\n    border-radius: ${n.spacing[.25]};\n    display: inline-flex;\n    font-family: ${n.typography.type.primary};\n    font-size: ${n.typography.text.sm};\n    font-weight: ${n.typography.weight.bold};\n    line-height: ${n.spacing[1.25]};\n    min-width: 250px;\n    width: 100%;\n    padding: ${n.spacing[.75]};\n    position: relative;\n    gap: ${n.spacing[.75]};\n\n    button {\n      background-color: transparent;\n    }\n\n    ${l(n,e??"error")}\n  `}
-`,d=t.styled.div`
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as m, useState as k, useCallback as w, useEffect as s } from "react";
+import { styled as p } from "styled-components";
+import { v as x } from "../../utils-CQvBF-wY.mjs";
+import { Container as y } from "../container/index.js";
+import { Icon as v } from "../icon/index.js";
+import { IconButton as T } from "../icon-button/index.js";
+const z = (e) => {
+  switch (e) {
+    case "warning":
+      return "triangle-exclamation";
+    case "info":
+      return "circle-info";
+    case "success":
+      return "circle-check";
+    default:
+      return "circle-exclamation";
+  }
+}, { getVariant: C } = x((e) => ({ error: `
+      background: ${e.palette.error[50]};
+      border: 1px solid ${e.palette.error[500]};
+      color: ${e.palette.error[700]};
+
+      button {
+        color: ${e.palette.error[700]};
+
+        &:hover:not([disabled]) {
+          background-color: ${e.palette.error[200]};
+          color: ${e.palette.error[700]};
+        }
+      }
+    `, info: `
+      background: ${e.palette.info[50]};
+      border: 1px solid ${e.palette.info[500]};
+      color: ${e.palette.info[700]};
+
+      button {
+        color: ${e.palette.info[700]};
+
+        &:hover:not([disabled]) {
+          background-color: ${e.palette.info[200]};
+          color: ${e.palette.info[700]};
+        }
+      }
+    `, success: `
+      background: ${e.palette.success[50]};
+      border: 1px solid ${e.palette.success[500]};
+      color: ${e.palette.success[700]};
+
+      button {
+        color: ${e.palette.success[700]};
+
+        &:hover:not([disabled]) {
+          background-color: ${e.palette.success[200]};
+          color: ${e.palette.success[700]};
+        }
+      }
+    `, warning: `
+      background: ${e.palette.warning[50]};
+      border: 1px solid ${e.palette.warning[500]};
+      color: ${e.palette.warning[700]};
+
+      button {
+        color: ${e.palette.warning[700]};
+
+        &:hover:not([disabled]) {
+          background-color: ${e.palette.warning[200]};
+          color: ${e.palette.warning[700]};
+        }
+      }
+    ` })), S = p.div`
+  ${({ theme: e, $variant: t }) => `
+    background: transparent;
+    align-items: center;
+    border-radius: ${e.spacing[0.25]};
+    display: inline-flex;
+    font-family: ${e.typography.type.primary};
+    font-size: ${e.typography.text.sm};
+    font-weight: ${e.typography.weight.bold};
+    line-height: ${e.spacing[1.25]};
+    min-width: 250px;
+    width: 100%;
+    padding: ${e.spacing[0.75]};
+    position: relative;
+    gap: ${e.spacing[0.75]};
+
+    button {
+      background-color: transparent;
+    }
+
+    ${C(e, t ?? "error")}
+  `}
+`, j = p.div`
   padding-right: 4px;
   width: 100%;
-`,p=e.forwardRef((function({autoHide:t=!1,children:r,closable:l=!1,onTimeOut:p,show:u=!0,time:g=8,variant:$="error",id:b,...h},f){const[x,y]=e.useState(u),w=e.useCallback((()=>{y(!1)}),[]);return e.useEffect((()=>{const n=setTimeout((()=>{null==p||p(!0),t&&w()}),1e3*g);return()=>{clearTimeout(n)}}),[t,w,g,p]),e.useEffect((()=>{y(u)}),[u,y]),n.jsx(o.Container,{display:x?"block":"none",ref:f,role:"alert",...h,children:n.jsxs(s,{$variant:$,id:b,children:[n.jsx(i.Icon,{clickable:!1,icon:c($),iconSize:"xs",iconType:"fa-light"}),n.jsx(d,{children:r}),l?n.jsx(a.IconButton,{height:"fit-content",icon:"close",iconSize:"xs",iconType:"fa-light",onClick:w,px:.125,py:.125,variant:"ghost"}):void 0]})})}));exports.Alert=p;
+`, V = m(function({ autoHide: e = !1, children: t, closable: d = !1, onTimeOut: n, show: r = !0, time: c = 8, variant: l = "error", id: u, ...$ }, g) {
+  const [f, a] = k(r), i = w(() => {
+    a(!1);
+  }, []);
+  return s(() => {
+    const b = setTimeout(() => {
+      n == null || n(!0), e && i();
+    }, 1e3 * c);
+    return () => {
+      clearTimeout(b);
+    };
+  }, [e, i, c, n]), s(() => {
+    a(r);
+  }, [r, a]), o(y, { display: f ? "block" : "none", ref: g, role: "alert", ...$, children: h(S, { $variant: l, id: u, children: [o(v, { clickable: !1, icon: z(l), iconSize: "xs", iconType: "fa-light" }), o(j, { children: t }), d ? o(T, { height: "fit-content", icon: "close", iconSize: "xs", iconType: "fa-light", onClick: i, px: 0.125, py: 0.125, variant: "ghost" }) : void 0] }) });
+});
+export {
+  V as Alert
+};

package/dist/components/button/index.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),o=require("../../styles--Elze-LV.js"),r=require("../icon/index.js"),n=require("../../index-CmylnDrF.js"),t=require("lodash"),l=i.forwardRef((function({children:l,disabled:a=!1,external:s=!1,href:d,id:c,icon:u,name:p,onClick:x,showArrow:b=!1,type:f="button",tooltip:j,tooltipPlace:h="bottom",underline:v=!1,value:y,variant:m="primary",...q},w){const g=void 0!==j,k=`${c}-tooltip`,S=i.useCallback((()=>{d&&((e,i=!0)=>{const o=window.open(e,i?void 0:"_self","noopener,noreferrer,");t.isObject(o)&&(o.opener=null)})(d,s)}),[s,d]);return e.jsx(n.Tooltip,{disabled:!g,id:k,place:h,tip:j,children:e.jsxs(o.StyledButton,{$variant:m,"aria-disabled":a,className:v?"underline":void 0,disabled:a,id:c,name:p,onClick:"link"===m?S:x,ref:w,type:f,value:y,...g?{"data-tooltip-id":k}:{},...q,children:[void 0!==u&&e.jsx(r.Icon,{icon:u,iconSize:"xs",iconType:"fa-light"}),l,(b||"link"===m)&&e.jsx(r.Icon,{icon:"arrow-right",iconSize:"xs",iconType:"fa-light"})]})})}));exports.Button=l;
+import { jsx as e, jsxs as z } from "react/jsx-runtime";
+import { forwardRef as C, useCallback as $ } from "react";
+import { S as j } from "../../styles-EIbGRPlk.mjs";
+import { Icon as p } from "../icon/index.js";
+import { T as A } from "../../index-D-lcuEHY.mjs";
+import { isObject as B } from "lodash";
+const q = C(function({ children: m, disabled: r = !1, external: n = !1, href: o, id: a, icon: t, name: f, onClick: u, showArrow: b = !1, type: h = "button", tooltip: l, tooltipPlace: v = "bottom", underline: w = !1, value: k, variant: i = "primary", ...x }, y) {
+  const s = l !== void 0, d = `${a}-tooltip`, S = $(() => {
+    o && ((T, g = !0) => {
+      const c = window.open(T, g ? void 0 : "_self", "noopener,noreferrer,");
+      B(c) && (c.opener = null);
+    })(o, n);
+  }, [n, o]);
+  return e(A, { disabled: !s, id: d, place: v, tip: l, children: z(j, { $variant: i, "aria-disabled": r, className: w ? "underline" : void 0, disabled: r, id: a, name: f, onClick: i === "link" ? S : u, ref: y, type: h, value: k, ...s ? { "data-tooltip-id": d } : {}, ...x, children: [t !== void 0 && e(p, { icon: t, iconSize: "xs", iconType: "fa-light" }), m, (b || i === "link") && e(p, { icon: "arrow-right", iconSize: "xs", iconType: "fa-light" })] }) });
+});
+export {
+  q as Button
+};

package/dist/components/card/card-header/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("../../container/index.js"),i=require("../../../index-CmylnDrF.js");require("../../typography/heading/index.js"),require("../../typography/span/index.js");const o=require("../../typography/text/index.js");exports.CardHeader=({authorEmail:n,date:l,description:s,descriptionColor:a,id:d,title:x,titleColor:c,textAlign:p,textSpacing:g=0,tooltip:h})=>{const u=t.useTheme();return e.jsxs(r.Container,{width:"100%",children:["string"==typeof x?e.jsx(o.Text,{color:c??u.palette.gray[800],fontWeight:"bold",mb:g,size:"sm",textAlign:p,wordBreak:"break-word",children:x}):x,e.jsxs(r.Container,{alignItems:"start",display:"flex",flexDirection:"column",gap:.25,children:[s&&e.jsx(o.Text,{color:a??u.palette.gray[800],fontWeight:void 0===s?"bold":"regular",size:"sm",textAlign:p,wordBreak:"break-word",children:s}),l&&e.jsx(o.Text,{color:u.palette.gray[800],fontWeight:"bold",size:"sm",textAlign:p,wordBreak:"break-word",children:`Date: ${l.split(" ")[0]}`}),n&&e.jsx(o.Text,{color:u.palette.gray[800],fontWeight:"bold",size:"sm",textAlign:p,wordBreak:"break-word",children:`$Author: ${n}`}),h&&e.jsx(i.Tooltip,{icon:"circle-info",id:d,tip:h})]})]})};
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { useTheme as h } from "styled-components";
+import { Container as m } from "../../container/index.js";
+import { T as x } from "../../../index-D-lcuEHY.mjs";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as o } from "../../typography/text/index.js";
+const B = ({ authorEmail: a, date: n, description: i, descriptionColor: p, id: c, title: l, titleColor: g, textAlign: r, textSpacing: f = 0, tooltip: s }) => {
+  const e = h();
+  return d(m, { width: "100%", children: [typeof l == "string" ? t(o, { color: g ?? e.palette.gray[800], fontWeight: "bold", mb: f, size: "sm", textAlign: r, wordBreak: "break-word", children: l }) : l, d(m, { alignItems: "start", display: "flex", flexDirection: "column", gap: 0.25, children: [i && t(o, { color: p ?? e.palette.gray[800], fontWeight: i === void 0 ? "bold" : "regular", size: "sm", textAlign: r, wordBreak: "break-word", children: i }), n && t(o, { color: e.palette.gray[800], fontWeight: "bold", size: "sm", textAlign: r, wordBreak: "break-word", children: `Date: ${n.split(" ")[0]}` }), a && t(o, { color: e.palette.gray[800], fontWeight: "bold", size: "sm", textAlign: r, wordBreak: "break-word", children: `$Author: ${a}` }), s && t(x, { icon: "circle-info", id: c, tip: s })] })] });
+};
+export {
+  B as CardHeader
+};

package/dist/components/card/card-with-image/index.js

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),r=require("styled-components"),t=require("../card-header/index.js"),o=require("../../container/index.js"),n=require("../../file-preview/index.js"),a=require("../../icon-button/index.js");exports.CardWithImage=({alt:s,authorEmail:d,date:l,description:c,src:p,children:u,isEditing:x,onClick:h,title:g,hideDescription:j=!1,headerType:m="image",showMaximize:b=!0})=>{const y=r.useTheme(),[C,v]=i.useState(!1),f=i.useCallback((()=>{v(!0)}),[]),w=i.useCallback((()=>{v(!1)}),[]);return e.jsxs(o.Container,{bgColor:"transparent",border:"1px solid transparent",borderColorHover:"black",borderRadius:y.spacing[.25],display:"flex",flexDirection:"column",gap:1,onHover:f,onLeave:w,padding:[.5,.5,.5,.5],width:"100%",children:[e.jsx(o.Container,{cursor:x?"unset":"pointer",display:"inline-flex",justify:"center",onClick:h,position:"relative",width:"100%",children:void 0===u?e.jsxs(i.Fragment,{children:[e.jsx(n.FilePreview,{alt:s,fileType:m,height:"147px",opacity:C?.3:0,src:p,width:"100%"}),b?e.jsx(o.Container,{bottom:"10px",position:"absolute",right:"10px",children:e.jsx(a.IconButton,{color:"white",icon:"arrows-maximize",iconSize:"xxs",iconType:"fa-light",variant:"secondary"})}):void 0]}):u}),j?null:e.jsx(t.CardHeader,{authorEmail:d,date:l,description:c,descriptionColor:y.palette.gray[600],id:`${s}-card-header`,title:g})]})};
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import v, { useState as w, useCallback as s } from "react";
+import { useTheme as k } from "styled-components";
+import { CardHeader as j } from "../card-header/index.js";
+import { Container as e } from "../../container/index.js";
+import { FilePreview as z } from "../../file-preview/index.js";
+import { IconButton as E } from "../../icon-button/index.js";
+const L = ({ alt: r, authorEmail: l, date: d, description: c, src: p, children: o, isEditing: m, onClick: h, title: u, hideDescription: x = !1, headerType: f = "image", showMaximize: g = !0 }) => {
+  const t = k(), [C, a] = w(!1), y = s(() => {
+    a(!0);
+  }, []), b = s(() => {
+    a(!1);
+  }, []);
+  return n(e, { bgColor: "transparent", border: "1px solid transparent", borderColorHover: "black", borderRadius: t.spacing[0.25], display: "flex", flexDirection: "column", gap: 1, onHover: y, onLeave: b, padding: [0.5, 0.5, 0.5, 0.5], width: "100%", children: [i(e, { cursor: m ? "unset" : "pointer", display: "inline-flex", justify: "center", onClick: h, position: "relative", width: "100%", children: o === void 0 ? n(v.Fragment, { children: [i(z, { alt: r, fileType: f, height: "147px", opacity: C ? 0.3 : 0, src: p, width: "100%" }), g ? i(e, { bottom: "10px", position: "absolute", right: "10px", children: i(E, { color: "white", icon: "arrows-maximize", iconSize: "xxs", iconType: "fa-light", variant: "secondary" }) }) : void 0] }) : o }), x ? null : i(j, { authorEmail: l, date: d, description: c, descriptionColor: t.palette.gray[600], id: `${r}-card-header`, title: u })] });
+};
+export {
+  L as CardWithImage
+};

package/dist/components/card/card-with-input/index.js

@@ -1,3 +1,57 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),n=require("styled-components"),t=require("../card-header/index.js");require("../../inputs/fields/combobox/index.js");const r=require("../../inputs/fields/date/index.js");require("../../inputs/fields/date-range/index.js"),require("../../inputs/fields/date-time/index.js"),require("lodash"),require("../../icon/index.js"),require("../../../index-CmylnDrF.js"),require("../../container/index.js"),require("../../link/index.js"),require("../../typography/heading/index.js"),require("../../typography/span/index.js"),require("../../typography/text/index.js");const s=require("../../inputs/fields/input/index.js");require("../../inputs/fields/input-file/index.js"),require("../../inputs/fields/input-tags/index.js");const d=require("../../inputs/fields/number/index.js");require("../../inputs/fields/number-range/index.js"),require("../../inputs/fields/phone/index.js"),require("../../inputs/fields/text-area/index.js"),require("../../../styles-Bl-CstrT.js"),require("../../tag/index.js"),require("../../icon-button/index.js");const u=n.styled.div`
-  ${({theme:e,$align:i="center",$minWidth:n="auto",$minHeight:t="auto"})=>`\n    display: flex;\n    background-color: ${e.palette.white};\n    border-radius: ${e.spacing[.25]};\n    border: 1px solid ${e.palette.gray[200]};\n    flex-direction: column;\n    justify-content: center;\n    gap: ${e.spacing[.5]};\n    min-width: ${n};\n    min-height: ${t};\n    padding: ${e.spacing[1]};\n\n    input {\n      color: ${e.palette.gray[800]};\n      line-height: ${e.spacing[1.5]};\n      text-align: ${i};\n    }\n  `}
-`;exports.CardWithInput=({description:n,disabled:a,id:l,align:p,inputType:o="text",inputNumberProps:c,minHeight:x,minWidth:j,name:m,placeholder:g,tooltip:q,title:h})=>{const f=i.useMemo((()=>{if("text"===o)return e.jsx(s.Input,{disabled:a,name:m,placeholder:g});if("date"===o)return e.jsx(r.InputDate,{disabled:a,name:m});const{decimalPlaces:i,max:n,min:t}=c??{};return e.jsx(d.InputNumber,{decimalPlaces:i,disabled:a,max:n,min:t,name:m,placeholder:g})}),[a,c,o,m,g]);return e.jsxs(u,{$align:p,$minHeight:x,$minWidth:j,children:[e.jsx(t.CardHeader,{description:n,id:l,title:h,tooltip:q}),f]})};
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+import { styled as f } from "styled-components";
+import { CardHeader as y } from "../card-header/index.js";
+import "../../inputs/fields/combobox/index.js";
+import { InputDate as H } from "../../inputs/fields/date/index.js";
+import "../../inputs/fields/date-range/index.js";
+import "../../inputs/fields/date-time/index.js";
+import "lodash";
+import "../../icon/index.js";
+import "../../../index-D-lcuEHY.mjs";
+import "../../container/index.js";
+import "../../link/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import "../../typography/text/index.js";
+import { Input as I } from "../../inputs/fields/input/index.js";
+import "../../inputs/fields/input-file/index.js";
+import "../../inputs/fields/input-tags/index.js";
+import { InputNumber as W } from "../../inputs/fields/number/index.js";
+import "../../inputs/fields/number-range/index.js";
+import "../../inputs/fields/phone/index.js";
+import "../../inputs/fields/text-area/index.js";
+import "../../../styles-lSVV9kjn.mjs";
+import "../../tag/index.js";
+import "../../icon-button/index.js";
+const j = f.div`
+  ${({ theme: t, $align: i = "center", $minWidth: n = "auto", $minHeight: o = "auto" }) => `
+    display: flex;
+    background-color: ${t.palette.white};
+    border-radius: ${t.spacing[0.25]};
+    border: 1px solid ${t.palette.gray[200]};
+    flex-direction: column;
+    justify-content: center;
+    gap: ${t.spacing[0.5]};
+    min-width: ${n};
+    min-height: ${o};
+    padding: ${t.spacing[1]};
+
+    input {
+      color: ${t.palette.gray[800]};
+      line-height: ${t.spacing[1.5]};
+      text-align: ${i};
+    }
+  `}
+`, Y = ({ description: t, disabled: i, id: n, align: o, inputType: p = "text", inputNumberProps: a, minHeight: d, minWidth: l, name: e, placeholder: m, tooltip: s, title: c }) => {
+  const u = x(() => {
+    if (p === "text") return r(I, { disabled: i, name: e, placeholder: m });
+    if (p === "date") return r(H, { disabled: i, name: e });
+    const { decimalPlaces: g, max: $, min: h } = a ?? {};
+    return r(W, { decimalPlaces: g, disabled: i, max: $, min: h, name: e, placeholder: m });
+  }, [i, a, p, e, m]);
+  return b(j, { $align: o, $minHeight: d, $minWidth: l, children: [r(y, { description: t, id: n, title: c, tooltip: s }), u] });
+};
+export {
+  Y as CardWithInput
+};

package/dist/components/card/card-with-selector/index.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("styled-components"),t=require("../../../index-TKLFHcRp.js"),r=require("../../container/index.js"),n=require("../../icon/index.js"),o=require("../../radio-button/index.js"),a=require("../../typography/heading/index.js");require("../../typography/span/index.js"),require("../../typography/text/index.js"),exports.CardWithSelector=({alt:d,imageId:s,icon:l,selectorProps:c,onClick:p,title:x,width:g="fit-content"})=>{const u=i.useTheme();return e.jsxs(r.Container,{alignItems:"center",border:`1px solid ${u.palette.gray[200]}`,borderColorHover:u.palette.gray[600],borderRadius:u.spacing[.25],display:"inline-flex",padding:[1,1,1,1],shadowHover:"md",width:g,children:[e.jsx(r.Container,{alignSelf:"start",display:"flex",width:"fit-content",children:e.jsx(o.RadioButton,{name:c.name,onClick:p,value:c.value})}),e.jsxs(r.Container,{alignItems:"center",display:"flex",gap:.5,justify:"space-between",ml:1,mr:1,width:"100%",children:[void 0===s?void 0:e.jsx(t.MemoizedImage,{alt:d??"card image",height:"32px",publicId:s,width:"32px"}),void 0===l?void 0:e.jsx(n.Icon,{icon:l,iconSize:"sm",iconType:"fa-light"}),e.jsx(a.Heading,{fontWeight:"bold",lineSpacing:1.75,size:"xs",children:x})]})]})};
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { useTheme as m } from "styled-components";
+import { M as c } from "../../../index-BwFnfaRh.mjs";
+import { Container as t } from "../../container/index.js";
+import { Icon as f } from "../../icon/index.js";
+import { RadioButton as h } from "../../radio-button/index.js";
+import { Heading as g } from "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import "../../typography/text/index.js";
+const j = ({ alt: d, imageId: o, icon: r, selectorProps: a, onClick: l, title: s, width: p = "fit-content" }) => {
+  const e = m();
+  return n(t, { alignItems: "center", border: `1px solid ${e.palette.gray[200]}`, borderColorHover: e.palette.gray[600], borderRadius: e.spacing[0.25], display: "inline-flex", padding: [1, 1, 1, 1], shadowHover: "md", width: p, children: [i(t, { alignSelf: "start", display: "flex", width: "fit-content", children: i(h, { name: a.name, onClick: l, value: a.value }) }), n(t, { alignItems: "center", display: "flex", gap: 0.5, justify: "space-between", ml: 1, mr: 1, width: "100%", children: [o === void 0 ? void 0 : i(c, { alt: d ?? "card image", height: "32px", publicId: o, width: "32px" }), r === void 0 ? void 0 : i(f, { icon: r, iconSize: "sm", iconType: "fa-light" }), i(g, { fontWeight: "bold", lineSpacing: 1.75, size: "xs", children: s })] })] });
+};
+export {
+  j as CardWithSelector
+};

package/dist/components/card/card-with-switch/index.js

@@ -1 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("styled-components"),t=require("../card-header/index.js"),r=require("../../container/index.js"),n=require("../../toggle/index.js");exports.CardWithSwitch=({id:o,title:a,toggles:d,minWidth:s="auto",height:l="auto"})=>{const g=i.useTheme();return e.jsxs(r.Container,{alignItems:"center",bgColor:g.palette.white,border:`1px solid ${g.palette.gray[200]}`,borderRadius:g.spacing[.25],display:"flex",flexDirection:"column",gap:.5,height:l,justify:"center",minHeight:"100px",minWidth:s,padding:[1.25,1.25,1.25,1.25],children:[e.jsx(t.CardHeader,{id:o,title:a}),e.jsx(r.Container,{display:"flex",flexDirection:"column",gap:.5,minHeight:"40px",width:"100%",children:d.map((i=>e.jsx(n.Toggle,{...i},`$card-toggle-${i.name}`)))})]})};
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useTheme as m } from "styled-components";
+import { CardHeader as g } from "../card-header/index.js";
+import { Container as r } from "../../container/index.js";
+import { Toggle as p } from "../../toggle/index.js";
+const y = ({ id: o, title: a, toggles: n, minWidth: s = "auto", height: d = "auto" }) => {
+  const i = m();
+  return l(r, { alignItems: "center", bgColor: i.palette.white, border: `1px solid ${i.palette.gray[200]}`, borderRadius: i.spacing[0.25], display: "flex", flexDirection: "column", gap: 0.5, height: d, justify: "center", minHeight: "100px", minWidth: s, padding: [1.25, 1.25, 1.25, 1.25], children: [t(g, { id: o, title: a }), t(r, { display: "flex", flexDirection: "column", gap: 0.5, minHeight: "40px", width: "100%", children: n.map((e) => t(p, { ...e }, `$card-toggle-${e.name}`)) })] });
+};
+export {
+  y as CardWithSwitch
+};

package/dist/components/card/index.js

@@ -1 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./card-header/index.js"),r=require("./card-with-image/index.js"),t=require("./card-with-input/index.js"),i=require("./card-with-selector/index.js"),d=require("./card-with-switch/index.js");exports.CardHeader=e.CardHeader,exports.CardWithImage=r.CardWithImage,exports.CardWithInput=t.CardWithInput,exports.CardWithSelector=i.CardWithSelector,exports.CardWithSwitch=d.CardWithSwitch;
+import { CardHeader as o } from "./card-header/index.js";
+import { CardWithImage as a } from "./card-with-image/index.js";
+import { CardWithInput as m } from "./card-with-input/index.js";
+import { CardWithSelector as f } from "./card-with-selector/index.js";
+import { CardWithSwitch as i } from "./card-with-switch/index.js";
+export {
+  o as CardHeader,
+  a as CardWithImage,
+  m as CardWithInput,
+  f as CardWithSelector,
+  i as CardWithSwitch
+};

package/dist/components/carousel/index.js

@@ -1,24 +1,50 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),i=require("../../use-carousel-64dKFW4E.js");require("lodash");const n=r.styled.div`
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { useCallback as m } from "react";
+import { styled as r } from "styled-components";
+import { u } from "../../use-carousel-CvRxi2FI.mjs";
+import "lodash";
+const h = r.div`
   position: relative;
   margin: auto;
   overflow: hidden;
-`,s=r.styled.div`
+`, $ = r.div`
   display: flex;
   transition: transform 0.5s ease-in-out;
   transform: translateX(
-    ${({$currentIndex:e})=>100*-e}%
+    ${({ $currentIndex: e }) => 100 * -e}%
   );
-`,a=r.styled.div`
+`, g = r.div`
   align-items: center;
   display: flex;
   justify-content: center;
   min-width: 100%;
-`,l=r.styled.button`
-  ${({theme:e,$isActive:t})=>`\n    background-color: ${t?e.palette.primary[400]:e.palette.white};\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    height: ${e.spacing[.75]};\n    width: ${e.spacing[.75]};\n  `}
-`,o=r.styled.div`
+`, f = r.button`
+  ${({ theme: e, $isActive: s }) => `
+    background-color: ${s ? e.palette.primary[400] : e.palette.white};
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    height: ${e.spacing[0.75]};
+    width: ${e.spacing[0.75]};
+  `}
+`, v = r.div`
   align-items: center;
   display: flex;
-  gap: ${({theme:e})=>e.spacing[.5]};
+  gap: ${({ theme: e }) => e.spacing[0.5]};
   justify-content: center;
-  margin-top: ${({theme:e})=>e.spacing[2]};
-`;exports.Carousel=({slides:r,interval:c=300})=>{const{cycle:d,setCycle:u,setProgress:p}=i.useCarousel(c,r.length),m=t.useCallback((e=>()=>{u(e),p(0)}),[u,p]);return e.jsxs(n,{"aria-roledescription":"carousel",children:[e.jsx(s,{$currentIndex:d,children:r.map(((t,r)=>{const i=`slide-${r}`;return e.jsx(a,{"aria-label":i,"aria-roledescription":"slide",children:t.content},i)}))}),e.jsx(o,{children:r.map(((t,r)=>{const i=`nav-button-${r}`;return e.jsx(l,{$isActive:r===d,"aria-label":`Go to slide ${r+1}`,"data-testid":r===d?"active":"inactive",onClick:m(r)},i)}))})]})};
+  margin-top: ${({ theme: e }) => e.spacing[2]};
+`, C = ({ slides: e, interval: s = 300 }) => {
+  const { cycle: o, setCycle: l, setProgress: c } = u(s, e.length), d = m((n) => () => {
+    l(n), c(0);
+  }, [l, c]);
+  return p(h, { "aria-roledescription": "carousel", children: [a($, { $currentIndex: o, children: e.map((n, t) => {
+    const i = `slide-${t}`;
+    return a(g, { "aria-label": i, "aria-roledescription": "slide", children: n.content }, i);
+  }) }), a(v, { children: e.map((n, t) => {
+    const i = `nav-button-${t}`;
+    return a(f, { $isActive: t === o, "aria-label": `Go to slide ${t + 1}`, "data-testid": t === o ? "active" : "inactive", onClick: d(t) }, i);
+  }) })] });
+};
+export {
+  C as Carousel
+};

package/dist/components/checkbox/index.js

@@ -1,3 +1,84 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),t=require("styled-components"),a=require("../icon/index.js"),i=t.styled.label`
-  ${({theme:n})=>`\n    align-items: start;\n    color: ${n.palette.gray[600]};\n    display: flex;\n    cursor: pointer;\n    font-family: ${n.typography.type.primary};\n    font-size: ${n.typography.text.sm};\n    font-weight: ${n.typography.weight.regular};\n    line-height: ${n.spacing[1]};\n    letter-spacing: 0;\n    position: relative;\n    text-align: left;\n\n    &[aria-disabled="true"] {\n      color: ${n.palette.gray[300]};\n      cursor: not-allowed;\n    }\n\n    input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      height: 0;\n      width: 0;\n    }\n\n    svg {\n      background-color: ${n.palette.white};\n      border-radius: ${n.spacing[.25]};\n      border: 1px solid ${n.palette.gray[600]};\n      top: 0;\n      left: 0;\n      height: ${n.spacing[.5]};\n      margin-right: ${n.spacing[.5]};\n      width: ${n.spacing[.5]};\n      padding: ${n.spacing[.25]};\n    }\n\n    svg > path {\n      fill: ${n.palette.white};\n    }\n\n    input:checked ~ span > svg {\n      background-color: ${n.palette.primary[500]};\n      border: 1px solid ${n.palette.primary[500]};\n    }\n\n    input:disabled ~ span > svg {\n      border: 1px solid ${n.palette.gray[300]};\n      cursor: not-allowed;\n    }\n\n    input:not(:disabled):hover ~ span > svg {\n      box-shadow: 0 0 0 4px ${n.palette.gray[100]};\n    }\n\n    input:checked:disabled ~ span > svg {\n      background-color: ${n.palette.gray[300]};\n      border: 1px solid ${n.palette.gray[300]};\n    }\n\n    input:not(:disabled):hover:checked ~ span > svg {\n      box-shadow: 0 0 0 4px ${n.palette.primary[50]};\n    }\n\n    input:checked ~ span > svg > path {\n      fill: ${n.palette.white};\n    }\n\n    input:checked:disabled ~ span > svg > path {\n      fill: ${n.palette.white};\n    }\n  `}
-`,r=e.forwardRef((function({defaultChecked:e=!1,disabled:t=!1,label:r,name:o,onChange:l,onClick:p,onFocus:s,onKeyDown:d,value:c,...g},h){return n.jsxs(i,{"aria-disabled":t,htmlFor:o,children:[n.jsx("input",{"aria-checked":e,"aria-disabled":t,"aria-label":o,defaultChecked:e,disabled:t,id:o,name:o,onChange:l,onClick:p,onFocus:s,onKeyDown:d,ref:h,type:"checkbox",value:c,...g}),n.jsx(a.Icon,{disabled:t,icon:"check",iconSize:"sm"}),r??c]})}));exports.Checkbox=r;
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { styled as u } from "styled-components";
+import { Icon as b } from "../icon/index.js";
+const y = u.label`
+  ${({ theme: e }) => `
+    align-items: start;
+    color: ${e.palette.gray[600]};
+    display: flex;
+    cursor: pointer;
+    font-family: ${e.typography.type.primary};
+    font-size: ${e.typography.text.sm};
+    font-weight: ${e.typography.weight.regular};
+    line-height: ${e.spacing[1]};
+    letter-spacing: 0;
+    position: relative;
+    text-align: left;
+
+    &[aria-disabled="true"] {
+      color: ${e.palette.gray[300]};
+      cursor: not-allowed;
+    }
+
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+    }
+
+    svg {
+      background-color: ${e.palette.white};
+      border-radius: ${e.spacing[0.25]};
+      border: 1px solid ${e.palette.gray[600]};
+      top: 0;
+      left: 0;
+      height: ${e.spacing[0.5]};
+      margin-right: ${e.spacing[0.5]};
+      width: ${e.spacing[0.5]};
+      padding: ${e.spacing[0.25]};
+    }
+
+    svg > path {
+      fill: ${e.palette.white};
+    }
+
+    input:checked ~ span > svg {
+      background-color: ${e.palette.primary[500]};
+      border: 1px solid ${e.palette.primary[500]};
+    }
+
+    input:disabled ~ span > svg {
+      border: 1px solid ${e.palette.gray[300]};
+      cursor: not-allowed;
+    }
+
+    input:not(:disabled):hover ~ span > svg {
+      box-shadow: 0 0 0 4px ${e.palette.gray[100]};
+    }
+
+    input:checked:disabled ~ span > svg {
+      background-color: ${e.palette.gray[300]};
+      border: 1px solid ${e.palette.gray[300]};
+    }
+
+    input:not(:disabled):hover:checked ~ span > svg {
+      box-shadow: 0 0 0 4px ${e.palette.primary[50]};
+    }
+
+    input:checked ~ span > svg > path {
+      fill: ${e.palette.white};
+    }
+
+    input:checked:disabled ~ span > svg > path {
+      fill: ${e.palette.white};
+    }
+  `}
+`, x = h(function({ defaultChecked: e = !1, disabled: n = !1, label: o, name: a, onChange: r, onClick: l, onFocus: p, onKeyDown: s, value: t, ...d }, c) {
+  return g(y, { "aria-disabled": n, htmlFor: a, children: [i("input", { "aria-checked": e, "aria-disabled": n, "aria-label": a, defaultChecked: e, disabled: n, id: a, name: a, onChange: r, onClick: l, onFocus: p, onKeyDown: s, ref: c, type: "checkbox", value: t, ...d }), i(b, { disabled: n, icon: "check", iconSize: "sm" }), o ?? t] });
+});
+export {
+  x as Checkbox
+};

package/dist/components/cloud-image/index.js

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("react/jsx-runtime");const e=require("../../index-TKLFHcRp.js");require("react"),require("../../use-cloudinary-image-YMMafagv.js"),require("lodash"),exports.CloudImage=e.MemoizedImage;
+import "react/jsx-runtime";
+import { M as a } from "../../index-BwFnfaRh.mjs";
+import "react";
+import "../../use-cloudinary-image-fG7ODNgr.mjs";
+import "lodash";
+export {
+  a as CloudImage
+};

package/dist/components/code-snippet/index.js

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("lodash"),n=require("react"),t=require("styled-components"),o=require("../../styles-CNzziAXG.js"),r=require("../button/index.js"),s=require("../container/index.js"),a=require("../icon/index.js"),l=require("../icon-button/index.js");exports.CodeSnippet=({noCodeMessage:c="Code snippet not available",snippet:u})=>{const p=t.useTheme(),[d,h]=n.useState(!1),[x,g]=n.useState(!0),j=n.useCallback((()=>{h((e=>!e))}),[h]),C=n.useCallback((()=>{if(i.isNil(u)||i.isEmpty(u)||!i.isString(u))return g(!1),c;const e=u.split("\n");return e.length>8&&!d?`${[...e].splice(0,7).join("\n")}\n${e[8]}...`:(e.length<8&&g(!1),u)}),[d,u,c]),y=n.useMemo(C,[C]),b=n.useCallback((async()=>{await navigator.clipboard.writeText(y)}),[y]);return e.jsxs(s.Container,{bgColor:p.palette.gray[100],borderRadius:"4px",display:"inline-flex",minWidth:"565px",position:"relative",children:[e.jsx(o.CodeContainer,{"data-private":!0,children:e.jsx("pre",{children:e.jsx("code",{className:"language-none",children:y})})}),e.jsxs(o.ButtonsContainer,{children:[e.jsx(l.IconButton,{height:p.spacing[2.5],icon:"copy",iconColor:p.palette.gray[700],iconSize:"xs",iconType:"fa-light",onClick:b,variant:"ghost",width:p.spacing[2.5]}),!!x&&e.jsxs(r.Button,{onClick:j,variant:"ghost",children:[d?"Show Less":"Show more",e.jsx(a.Icon,{icon:d?"chevron-up":"chevron-down",iconColor:p.palette.gray[700],iconSize:"xxs",iconType:"fa-light",ml:.25,onClick:b})]})]})]})};
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import s from "lodash";
+import { useState as f, useCallback as p, useMemo as C } from "react";
+import { useTheme as x } from "styled-components";
+import { C as y, B as v } from "../../styles-Cx93EcVo.mjs";
+import { Button as w } from "../button/index.js";
+import { Container as S } from "../container/index.js";
+import { Icon as b } from "../icon/index.js";
+import { IconButton as j } from "../icon-button/index.js";
+const L = ({ noCodeMessage: l = "Code snippet not available", snippet: o }) => {
+  const e = x(), [t, c] = f(!1), [g, m] = f(!0), u = p(() => {
+    c((i) => !i);
+  }, [c]), h = p(() => {
+    if (s.isNil(o) || s.isEmpty(o) || !s.isString(o)) return m(!1), l;
+    const i = o.split(`
+`);
+    return i.length > 8 && !t ? `${[...i].splice(0, 7).join(`
+`)}
+${i[8]}...` : (i.length < 8 && m(!1), o);
+  }, [t, o, l]), r = C(h, [h]), d = p(async () => {
+    await navigator.clipboard.writeText(r);
+  }, [r]);
+  return a(S, { bgColor: e.palette.gray[100], borderRadius: "4px", display: "inline-flex", minWidth: "565px", position: "relative", children: [n(y, { "data-private": !0, children: n("pre", { children: n("code", { className: "language-none", children: r }) }) }), a(v, { children: [n(j, { height: e.spacing[2.5], icon: "copy", iconColor: e.palette.gray[700], iconSize: "xs", iconType: "fa-light", onClick: d, variant: "ghost", width: e.spacing[2.5] }), !!g && a(w, { onClick: u, variant: "ghost", children: [t ? "Show Less" : "Show more", n(b, { icon: t ? "chevron-up" : "chevron-down", iconColor: e.palette.gray[700], iconSize: "xxs", iconType: "fa-light", ml: 0.25, onClick: d })] })] })] });
+};
+export {
+  L as CodeSnippet
+};