@fluidattacks/design 3.1.11 → 3.1.13

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-V0EumEPM.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-CplEd2kw.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,22 @@
-"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 i, jsx as n } from "react/jsx-runtime";
+import { Container as r } from "../../container/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as o } from "../../typography/text/index.js";
+const s = ({
+  item: e
+}) => /* @__PURE__ */ i(
+  r,
+  {
+    display: "block",
+    id: `panel-${e.title}`,
+    padding: [0.75, 0.75, 0.75, 0.75],
+    children: [
+      e.description ? /* @__PURE__ */ n(o, { mb: e.extraElement ? 0.5 : void 0, size: "sm", children: e.description }) : void 0,
+      e.extraElement ? /* @__PURE__ */ n(r, { children: e.extraElement }) : void 0
+    ]
+  }
+);
+export {
+  s as AccordionContent
+};

package/dist/components/accordion/index.js

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

package/dist/components/alert/index.js

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

package/dist/components/button/index.js

@@ -1 +1,69 @@
-"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 t, jsxs as g } from "react/jsx-runtime";
+import { forwardRef as j, useCallback as B } from "react";
+import { S as C } from "../../styles-B2N0JLw1.mjs";
+import { Icon as p } from "../icon/index.js";
+import { T as z } from "../../index-DwznImvK.mjs";
+import { isObject as I } from "lodash";
+const $ = (r, n = !0) => {
+  const o = window.open(
+    r,
+    n ? void 0 : "_self",
+    "noopener,noreferrer,"
+  );
+  I(o) && (o.opener = null);
+}, q = j(function({
+  children: n,
+  disabled: o = !1,
+  external: l = !1,
+  href: i,
+  id: s,
+  icon: a,
+  name: m,
+  onClick: u,
+  showArrow: b = !1,
+  type: k = "button",
+  tooltip: f,
+  tooltipPlace: T = "bottom",
+  underline: h = !1,
+  value: w,
+  variant: e = "primary",
+  ...x
+}, y) {
+  const c = f !== void 0, d = `${s}-tooltip`, S = B(() => {
+    i && $(i, l);
+  }, [l, i]);
+  return /* @__PURE__ */ t(
+    z,
+    {
+      disabled: !c,
+      id: d,
+      place: T,
+      tip: f,
+      children: /* @__PURE__ */ g(
+        C,
+        {
+          $variant: e,
+          "aria-disabled": o,
+          className: h ? "underline" : void 0,
+          disabled: o,
+          id: s,
+          name: m,
+          onClick: e === "link" ? S : u,
+          ref: y,
+          type: k,
+          value: w,
+          ...c ? { "data-tooltip-id": d } : {},
+          ...x,
+          children: [
+            a !== void 0 && /* @__PURE__ */ t(p, { icon: a, iconSize: "xs", iconType: "fa-light" }),
+            n,
+            (b || e === "link") && /* @__PURE__ */ t(p, { icon: "arrow-right", iconSize: "xs", iconType: "fa-light" })
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  q as Button
+};

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

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

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

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

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

@@ -1,3 +1,106 @@
-"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 o, jsxs as x } from "react/jsx-runtime";
+import { useMemo as I } from "react";
+import { styled as C } from "styled-components";
+import { CardHeader as j } from "../card-header/index.js";
+import "../../inputs/fields/combobox/index.js";
+import { InputDate as y } 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-DwznImvK.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 h } 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-BXFVwnWT.mjs";
+import "../../tag/index.js";
+import "../../icon-button/index.js";
+const H = C.div`
+  ${({
+  theme: t,
+  $align: r = "center",
+  $minWidth: p = "auto",
+  $minHeight: m = "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: ${p};
+    min-height: ${m};
+    padding: ${t.spacing[1]};
+
+    input {
+      color: ${t.palette.gray[800]};
+      line-height: ${t.spacing[1.5]};
+      text-align: ${r};
+    }
+  `}
+`, Z = ({
+  description: t,
+  disabled: r,
+  id: p,
+  align: m,
+  inputType: n = "text",
+  inputNumberProps: c,
+  minHeight: e,
+  minWidth: u,
+  name: i,
+  placeholder: a,
+  tooltip: g,
+  title: s
+}) => {
+  const $ = I(() => {
+    if (n === "text")
+      return /* @__PURE__ */ o(h, { disabled: r, name: i, placeholder: a });
+    if (n === "date")
+      return /* @__PURE__ */ o(y, { disabled: r, name: i });
+    const { decimalPlaces: d, max: f, min: l } = c ?? {};
+    return /* @__PURE__ */ o(
+      w,
+      {
+        decimalPlaces: d,
+        disabled: r,
+        max: f,
+        min: l,
+        name: i,
+        placeholder: a
+      }
+    );
+  }, [r, c, n, i, a]);
+  return /* @__PURE__ */ x(
+    H,
+    {
+      $align: m,
+      $minHeight: e,
+      $minWidth: u,
+      children: [
+        /* @__PURE__ */ o(
+          j,
+          {
+            description: t,
+            id: p,
+            title: s,
+            tooltip: g
+          }
+        ),
+        $
+      ]
+    }
+  );
+};
+export {
+  Z as CardWithInput
+};