@anoki/fse-ui 1.0.0-beta1.45.9 → 1.0.0-beta1.46.1

package/dist/index.es11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es11.js","sources":["../src/components/ui/Search/index.tsx"],"sourcesContent":["import \"./Search.scss\";\nimport clsx from \"clsx\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components\";\nimport { SearchIcon } from \"@/icons\";\n\ntype SearchProps = {\n  btnText: string;\n  helperText: string;\n  value: string;\n  variant?: \"outlined\" | \"basic\";\n  onChangeValue?: (value: string) => void;\n  onSearch?: (value: string) => void;\n  dimensionStrategy?: \"fixed\" | \"auto\";\n};\n\nexport const Search = ({\n  btnText,\n  helperText,\n  onChangeValue,\n  value,\n  variant = \"basic\",\n  onSearch,\n  dimensionStrategy = \"fixed\"\n}: SearchProps) => {\n  const [valueInput, setValueInput] = useState(value);\n  return (\n    <div\n      className={clsx(\n        \"ui-search\",\n        \"br-x4 bg-border-secondary w-full\",\n        variant,\n        {\n          \"ui-search-auto\": dimensionStrategy === \"auto\",\n        },\n      )}\n    >\n      {variant === \"basic\" ? (\n        <>\n          <input\n            id=\"search\"\n            type=\"search\"\n            className={clsx(\n              \"ui-search-input\",\n              \"bg-white fs-6 text-slate-20 br-x4 w-full pl-x24\",\n            )}\n            placeholder={helperText}\n            aria-label=\"Barra di ricerca\"\n            value={valueInput}\n            onChange={(e) => {\n              if (onChangeValue) {\n                onChangeValue(e.target.value);\n              }\n              setValueInput(e.target.value);\n            }}\n          />\n\n          <div className={clsx(\"ui-div-btn\")}>\n            <Button\n              className={clsx(\n                \"ui-btn-search\",\n                \"bg-primary text-white fs-7 fw-semibold br-x4\",\n              )}\n              onClick={() => onSearch?.(valueInput)}\n            >\n              {btnText}\n            </Button>\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"ui-search-icon\">\n            <SearchIcon width={20} height={20} />\n          </div>\n          <input\n            id=\"search\"\n            type=\"search\"\n            className={clsx(\n              \"ui-search-input\",\n              \"bg-white fs-6 text-slate-20 br-x4 w-full pl-x24\",\n            )}\n            placeholder={helperText}\n            aria-label=\"Barra di ricerca\"\n            value={valueInput}\n            onChange={(e) => {\n              if (onChangeValue) {\n                onChangeValue(e.target.value);\n              }\n              setValueInput(e.target.value);\n            }}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","btnText","helperText","onChangeValue","value","variant","onSearch","dimensionStrategy","valueInput","setValueInput","useState","jsx","clsx","jsxs","Fragment","e","Button","SearchIcon"],"mappings":";;;;;;AAgBO,MAAMA,IAAS,CAAC;AAAA,EACrB,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,MAAmB;AACjB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASN,CAAK;AAEhD,SAAAO,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAP;AAAA,QACA;AAAA,UACE,kBAAkBE,MAAsB;AAAA,QAAA;AAAA,MAE5C;AAAA,MAEC,UAAAF,MAAY,UAETQ,gBAAAA,EAAA,KAAAC,EAAA,UAAA,EAAA,UAAA;AAAA,QAAAH,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACA,aAAaV;AAAA,YACb,cAAW;AAAA,YACX,OAAOM;AAAA,YACP,UAAU,CAACO,MAAM;AACf,cAAIZ,KACYA,EAAAY,EAAE,OAAO,KAAK,GAEhBN,EAAAM,EAAE,OAAO,KAAK;AAAA,YAAA;AAAA,UAC9B;AAAA,QACF;AAAA,QAECJ,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAWC,EAAK,YAAY,GAC/B,UAAAD,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAWJ;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACA,SAAS,MAAMN,KAAA,gBAAAA,EAAWE;AAAA,YAEzB,UAAAP;AAAA,UAAA;AAAA,QAAA,EAEL,CAAA;AAAA,MAAA,EAAA,CACF,IAGEY,gBAAAA,EAAAA,KAAAC,EAAA,UAAA,EAAA,UAAA;AAAA,QAACH,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,kBACb,UAAAA,gBAAAA,EAAA,IAACM,KAAW,OAAO,IAAI,QAAQ,GAAA,CAAI,EACrC,CAAA;AAAA,QACAN,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACA,aAAaV;AAAA,YACb,cAAW;AAAA,YACX,OAAOM;AAAA,YACP,UAAU,CAACO,MAAM;AACf,cAAIZ,KACYA,EAAAY,EAAE,OAAO,KAAK,GAEhBN,EAAAM,EAAE,OAAO,KAAK;AAAA,YAAA;AAAA,UAC9B;AAAA,QAAA;AAAA,MACF,EACF,CAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}
+{"version":3,"file":"index.es11.js","sources":["../src/components/ui/Search/index.tsx"],"sourcesContent":["import \"./Search.scss\";\nimport clsx from \"clsx\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components\";\nimport { SearchIcon } from \"@/icons\";\n\ntype SearchProps = {\n  btnText: string;\n  helperText: string;\n  value: string;\n  variant?: \"outlined\" | \"basic\";\n  onChangeValue?: (value: string) => void;\n  onSearch?: (value: string) => void;\n  dimensionStrategy?: \"fixed\" | \"auto\";\n};\n\nexport const Search = ({\n  btnText,\n  helperText,\n  onChangeValue,\n  value,\n  variant = \"basic\",\n  onSearch,\n  dimensionStrategy = \"fixed\"\n}: SearchProps) => {\n  const [valueInput, setValueInput] = useState(value);\n  return (\n    <div\n      className={clsx(\n        \"ui-search\",\n        \"br-x4 bg-border-secondary w-full\",\n        variant,\n        {\n          \"ui-search-auto\": dimensionStrategy === \"auto\",\n        },\n      )}\n    >\n      {variant === \"basic\" ? (\n        <>\n          <input\n            id=\"search\"\n            type=\"search\"\n            className={clsx(\n              \"ui-search-input\",\n              \"bg-white fs-6 text-slate-20 br-x4 w-full pl-x24\",\n            )}\n            placeholder={helperText}\n            aria-label=\"Barra di ricerca\"\n            autoComplete=\"off\"\n            value={valueInput}\n            onChange={(e) => {\n              if (onChangeValue) {\n                onChangeValue(e.target.value);\n              }\n              setValueInput(e.target.value);\n            }}\n          />\n\n          <div className={clsx(\"ui-div-btn\")}>\n            <Button\n              className={clsx(\n                \"ui-btn-search\",\n                \"bg-primary text-white fs-7 fw-semibold br-x4\",\n              )}\n              onClick={() => onSearch?.(valueInput)}\n            >\n              {btnText}\n            </Button>\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"ui-search-icon\">\n            <SearchIcon width={20} height={20} />\n          </div>\n          <input\n            id=\"search\"\n            type=\"search\"\n            className={clsx(\n              \"ui-search-input\",\n              \"bg-white fs-6 text-slate-20 br-x4 w-full pl-x24\",\n            )}\n            placeholder={helperText}\n            aria-label=\"Barra di ricerca\"\n            autoComplete=\"off\"\n            value={valueInput}\n            onChange={(e) => {\n              if (onChangeValue) {\n                onChangeValue(e.target.value);\n              }\n              setValueInput(e.target.value);\n            }}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","btnText","helperText","onChangeValue","value","variant","onSearch","dimensionStrategy","valueInput","setValueInput","useState","jsx","clsx","jsxs","Fragment","e","Button","SearchIcon"],"mappings":";;;;;;AAgBO,MAAMA,IAAS,CAAC;AAAA,EACrB,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,MAAmB;AACjB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASN,CAAK;AAEhD,SAAAO,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAP;AAAA,QACA;AAAA,UACE,kBAAkBE,MAAsB;AAAA,QAAA;AAAA,MAE5C;AAAA,MAEC,UAAAF,MAAY,UAETQ,gBAAAA,EAAA,KAAAC,EAAA,UAAA,EAAA,UAAA;AAAA,QAAAH,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACA,aAAaV;AAAA,YACb,cAAW;AAAA,YACX,cAAa;AAAA,YACb,OAAOM;AAAA,YACP,UAAU,CAACO,MAAM;AACf,cAAIZ,KACYA,EAAAY,EAAE,OAAO,KAAK,GAEhBN,EAAAM,EAAE,OAAO,KAAK;AAAA,YAAA;AAAA,UAC9B;AAAA,QACF;AAAA,QAECJ,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAWC,EAAK,YAAY,GAC/B,UAAAD,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAWJ;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACA,SAAS,MAAMN,KAAA,gBAAAA,EAAWE;AAAA,YAEzB,UAAAP;AAAA,UAAA;AAAA,QAAA,EAEL,CAAA;AAAA,MAAA,EAAA,CACF,IAGEY,gBAAAA,EAAAA,KAAAC,EAAA,UAAA,EAAA,UAAA;AAAA,QAACH,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,kBACb,UAAAA,gBAAAA,EAAA,IAACM,KAAW,OAAO,IAAI,QAAQ,GAAA,CAAI,EACrC,CAAA;AAAA,QACAN,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACA,aAAaV;AAAA,YACb,cAAW;AAAA,YACX,cAAa;AAAA,YACb,OAAOM;AAAA,YACP,UAAU,CAACO,MAAM;AACf,cAAIZ,KACYA,EAAAY,EAAE,OAAO,KAAK,GAEhBN,EAAAM,EAAE,OAAO,KAAK;AAAA,YAAA;AAAA,UAC9B;AAAA,QAAA;AAAA,MACF,EACF,CAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}

package/dist/index.es136.js

@@ -1,31 +1,55 @@
 import { j as e } from "./index.es241.js";
-import { Col as n } from "./index.es10.js";
+import { Col as a } from "./index.es10.js";
 import "./index.es.js";
-import { Divider as p } from "./index.es281.js";
+import { Divider as l } from "./index.es281.js";
 import './components/ui/CardBanner/CardBanner.css';/* empty css            */
 import { Row as x } from "./index.es9.js";
 import { ArrowLink as o } from "./index.es42.js";
-import { ActionIconText as a } from "./index.es67.js";
+import { ActionIconText as c } from "./index.es67.js";
 const b = ({
-  actions: r,
-  description: l,
-  title: t,
-  link: s,
+  actions: s,
+  description: d,
+  title: p,
+  link: r,
   firstStatusLabel: i,
-  secondStatusLabel: d
-}) => /* @__PURE__ */ e.jsxs(n, { className: "ui-card-banner", py: "x24", children: [
-  /* @__PURE__ */ e.jsxs(x, { gap: "x16", px: "x24", children: [
-    i && /* @__PURE__ */ e.jsx("div", { className: "px-x16 py-x4 bg-blue-15 rounded ", children: /* @__PURE__ */ e.jsx("span", { className: "text-white fs-7 fw-bold", children: i }) }),
-    d && /* @__PURE__ */ e.jsx("div", { className: "  px-x16 py-x4 bg-status-secondary rounded ", children: /* @__PURE__ */ e.jsx("span", { className: "text-white fs-7 fw-bold", children: d }) })
+  secondStatusLabel: t,
+  personalStatusLabel: n
+}) => /* @__PURE__ */ e.jsxs(a, { className: "ui-card-banner", py: "x24", children: [
+  /* @__PURE__ */ e.jsxs(x, { gap: "x16", px: "x24", flexWrap: "wrap", children: [
+    n && /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: "px-x16 py-x4 bg-status-secondary rounded text-white ",
+        children: /* @__PURE__ */ e.jsx("span", { className: "text-white fs-7 fw-semibold fs-7", children: n })
+      }
+    ),
+    i && /* @__PURE__ */ e.jsx("div", { className: "px-x16 py-x4 bg-primary rounded text-white ", children: /* @__PURE__ */ e.jsx("span", { className: "text-white fs-7 fw-semibold fs-7", children: i }) }),
+    t && /* @__PURE__ */ e.jsx("div", { className: "px-x16 py-x4 bg-status-warning rounded text-white ", children: /* @__PURE__ */ e.jsx("span", { className: "text-white fs-7 fw-semibold fs-7", children: t }) })
   ] }),
-  /* @__PURE__ */ e.jsxs(n, { px: "x24", gap: "x16", children: [
-    /* @__PURE__ */ e.jsx("h3", { className: "title ", children: t }),
-    /* @__PURE__ */ e.jsx("p", { className: "description", children: l }),
-    !!s && /* @__PURE__ */ e.jsx(x, { justifyContent: "flex-end", children: /* @__PURE__ */ e.jsx(o, { href: s.link, isExternal: s.isExternal, children: s.title }) })
+  /* @__PURE__ */ e.jsxs(a, { px: "x24", gap: "x16", children: [
+    /* @__PURE__ */ e.jsx("h3", { className: "title", children: p }),
+    /* @__PURE__ */ e.jsx("p", { className: "description", children: d }),
+    !!r && /* @__PURE__ */ e.jsx(x, { justifyContent: "flex-end ", children: /* @__PURE__ */ e.jsx(o, { href: r.link, isExternal: r.isExternal, children: r.title }) })
   ] }),
-  !!r && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(p, { bg: "border-divider", className: "my-x24" }),
-    /* @__PURE__ */ e.jsx(x, { justifyContent: "flex-end", gap: "x16", px: "x24", children: r == null ? void 0 : r.map((m) => /* @__PURE__ */ e.jsx(a, { ...m })) })
+  !!s && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(l, { bg: "border-divider", className: "my-x24" }),
+    /* @__PURE__ */ e.jsx(
+      x,
+      {
+        justifyContent: "flex-end",
+        gap: "x16",
+        px: "x24",
+        flexWrap: "wrap",
+        className: "ui-actions-wrapper",
+        children: s == null ? void 0 : s.map((m) => /* @__PURE__ */ e.jsx(
+          c,
+          {
+            classNameComponent: "action-icon-text",
+            ...m
+          }
+        ))
+      }
+    )
   ] })
 ] });
 export {

package/dist/index.es136.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es136.js","sources":["../src/components/ui/CardBanner/index.tsx"],"sourcesContent":["import { Link } from \"@anoki/fse-common/dist\";\nimport { Col } from \"../Col\";\nimport { ActionIconText, ActionIconTextProps, ArrowLink, Row } from \"@/index\";\nimport { Divider } from \"../Divider\";\nimport { ReactNode } from \"react\";\nimport \"./CardBanner.scss\";\n\ntype Props = {\n  title: string;\n  description: string | ReactNode;\n  link?: Link;\n  actions?: Array<ActionIconTextProps>;\n  firstStatusLabel?: string;\n  secondStatusLabel?: string;\n};\n\nexport const CardBanner = ({\n  actions,\n  description,\n  title,\n  link,\n  firstStatusLabel,\n  secondStatusLabel,\n}: Props) => {\n  return (\n    <Col className=\"ui-card-banner\" py=\"x24\">\n      <Row gap={\"x16\"} px=\"x24\">\n        {firstStatusLabel && (\n          <div className={\"px-x16 py-x4 bg-blue-15 rounded \"}>\n            <span className={\"text-white fs-7 fw-bold\"}>\n              {firstStatusLabel}\n            </span>\n          </div>\n        )}\n        {secondStatusLabel && (\n          <div className={\"  px-x16 py-x4 bg-status-secondary rounded \"}>\n            <span className={\"text-white fs-7 fw-bold\"}>\n              {secondStatusLabel}\n            </span>\n          </div>\n        )}\n      </Row>\n      <Col px=\"x24\" gap=\"x16\">\n        <h3 className=\"title \">{title}</h3>\n        <p className=\"description\">{description}</p>\n        {!!link && (\n          <Row justifyContent=\"flex-end\">\n            <ArrowLink href={link.link} isExternal={link.isExternal}>\n              {link.title}\n            </ArrowLink>\n          </Row>\n        )}\n      </Col>\n\n      {!!actions && (\n        <>\n          <Divider bg=\"border-divider\" className=\"my-x24\" />\n          <Row justifyContent=\"flex-end\" gap=\"x16\" px=\"x24\">\n            {actions?.map((action) => <ActionIconText {...action} />)}\n          </Row>\n        </>\n      )}\n    </Col>\n  );\n};\n"],"names":["CardBanner","actions","description","title","link","firstStatusLabel","secondStatusLabel","jsxs","Col","Row","jsx","ArrowLink","Fragment","Divider","action","ActionIconText"],"mappings":";;;;;;;;AAgBO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC;AACF,MAEKC,gBAAAA,EAAAA,KAAAC,GAAA,EAAI,WAAU,kBAAiB,IAAG,OACjC,UAAA;AAAA,EAAAD,gBAAAA,EAAA,KAACE,GAAI,EAAA,KAAK,OAAO,IAAG,OACjB,UAAA;AAAA,IACCJ,KAAAK,gBAAAA,EAAA,IAAC,SAAI,WAAW,oCACd,gCAAC,QAAK,EAAA,WAAW,2BACd,UAAAL,EAAA,CACH,EACF,CAAA;AAAA,IAEDC,KACEI,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAW,+CACd,gCAAC,QAAK,EAAA,WAAW,2BACd,UAAAJ,EACH,CAAA,EACF,CAAA;AAAA,EAAA,GAEJ;AAAA,EACCC,gBAAAA,EAAA,KAAAC,GAAA,EAAI,IAAG,OAAM,KAAI,OAChB,UAAA;AAAA,IAACE,gBAAAA,EAAA,IAAA,MAAA,EAAG,WAAU,UAAU,UAAMP,GAAA;AAAA,IAC7BO,gBAAAA,EAAA,IAAA,KAAA,EAAE,WAAU,eAAe,UAAYR,GAAA;AAAA,IACvC,CAAC,CAACE,KACAM,gBAAAA,EAAAA,IAAAD,GAAA,EAAI,gBAAe,YAClB,UAAAC,gBAAAA,EAAAA,IAACC,GAAU,EAAA,MAAMP,EAAK,MAAM,YAAYA,EAAK,YAC1C,UAAAA,EAAK,OACR,EACF,CAAA;AAAA,EAAA,GAEJ;AAAA,EAEC,CAAC,CAACH,KAECM,gBAAAA,EAAAA,KAAAK,EAAA,UAAA,EAAA,UAAA;AAAA,IAAAF,gBAAAA,EAAA,IAACG,GAAQ,EAAA,IAAG,kBAAiB,WAAU,UAAS;AAAA,0BAC/CJ,GAAI,EAAA,gBAAe,YAAW,KAAI,OAAM,IAAG,OACzC,UAASR,KAAA,gBAAAA,EAAA,IAAI,CAACa,MAAWJ,gBAAAA,EAAA,IAACK,KAAgB,GAAGD,EAAQ,CAAA,GACxD,CAAA;AAAA,EAAA,EACF,CAAA;AAAA,GAEJ;"}
+{"version":3,"file":"index.es136.js","sources":["../src/components/ui/CardBanner/index.tsx"],"sourcesContent":["import { Link } from \"@anoki/fse-common/dist\";\nimport { Col } from \"../Col\";\nimport { ActionIconText, ActionIconTextProps, ArrowLink, Row } from \"@/index\";\nimport { Divider } from \"../Divider\";\nimport { ReactNode } from \"react\";\nimport \"./CardBanner.scss\";\n\ntype Props = {\n  title: string;\n  description: string | ReactNode;\n  link?: Link;\n  actions?: Array<ActionIconTextProps>;\n  firstStatusLabel?: string;\n  secondStatusLabel?: string;\n  personalStatusLabel?: string;\n};\n\nexport const CardBanner = ({\n  actions,\n  description,\n  title,\n  link,\n  firstStatusLabel,\n  secondStatusLabel,\n  personalStatusLabel,\n}: Props) => {\n  return (\n    <Col className=\"ui-card-banner\" py=\"x24\">\n      <Row gap={\"x16\"} px=\"x24\" flexWrap=\"wrap\">\n        {personalStatusLabel && (\n          <div\n            className={\"px-x16 py-x4 bg-status-secondary rounded text-white \"}\n          >\n            <span className={\"text-white fs-7 fw-semibold fs-7\"}>\n              {personalStatusLabel}\n            </span>\n          </div>\n        )}\n        {firstStatusLabel && (\n          <div className={\"px-x16 py-x4 bg-primary rounded text-white \"}>\n            <span className={\"text-white fs-7 fw-semibold fs-7\"}>\n              {firstStatusLabel}\n            </span>\n          </div>\n        )}\n        {secondStatusLabel && (\n          <div className={\"px-x16 py-x4 bg-status-warning rounded text-white \"}>\n            <span className={\"text-white fs-7 fw-semibold fs-7\"}>\n              {secondStatusLabel}\n            </span>\n          </div>\n        )}\n      </Row>\n      <Col px=\"x24\" gap=\"x16\">\n        <h3 className=\"title\">{title}</h3>\n        <p className=\"description\">{description}</p>\n        {!!link && (\n          <Row justifyContent=\"flex-end \">\n            <ArrowLink href={link.link} isExternal={link.isExternal}>\n              {link.title}\n            </ArrowLink>\n          </Row>\n        )}\n      </Col>\n\n      {!!actions && (\n        <>\n          <Divider bg=\"border-divider\" className=\"my-x24\" />\n          <Row\n            justifyContent=\"flex-end\"\n            gap=\"x16\"\n            px=\"x24\"\n            flexWrap=\"wrap\"\n            className=\"ui-actions-wrapper\"\n          >\n            {actions?.map((action) => (\n              <ActionIconText\n                classNameComponent=\"action-icon-text\"\n                {...action}\n              />\n            ))}\n          </Row>\n        </>\n      )}\n    </Col>\n  );\n};\n"],"names":["CardBanner","actions","description","title","link","firstStatusLabel","secondStatusLabel","personalStatusLabel","jsxs","Col","Row","jsx","ArrowLink","Fragment","Divider","action","ActionIconText"],"mappings":";;;;;;;;AAiBO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC;AACF,MAEKC,gBAAAA,EAAAA,KAAAC,GAAA,EAAI,WAAU,kBAAiB,IAAG,OACjC,UAAA;AAAA,EAAAD,gBAAAA,OAACE,KAAI,KAAK,OAAO,IAAG,OAAM,UAAS,QAChC,UAAA;AAAA,IACCH,KAAAI,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QAEX,UAACA,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAW,oCACd,UACHJ,EAAA,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,IAEDF,KACEM,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAW,+CACd,gCAAC,QAAK,EAAA,WAAW,oCACd,UAAAN,EAAA,CACH,EACF,CAAA;AAAA,IAEDC,KACEK,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAW,sDACd,gCAAC,QAAK,EAAA,WAAW,oCACd,UAAAL,EACH,CAAA,EACF,CAAA;AAAA,EAAA,GAEJ;AAAA,EACCE,gBAAAA,EAAA,KAAAC,GAAA,EAAI,IAAG,OAAM,KAAI,OAChB,UAAA;AAAA,IAACE,gBAAAA,EAAA,IAAA,MAAA,EAAG,WAAU,SAAS,UAAMR,GAAA;AAAA,IAC5BQ,gBAAAA,EAAA,IAAA,KAAA,EAAE,WAAU,eAAe,UAAYT,GAAA;AAAA,IACvC,CAAC,CAACE,KACAO,gBAAAA,EAAAA,IAAAD,GAAA,EAAI,gBAAe,aAClB,UAAAC,gBAAAA,EAAAA,IAACC,GAAU,EAAA,MAAMR,EAAK,MAAM,YAAYA,EAAK,YAC1C,UAAAA,EAAK,OACR,EACF,CAAA;AAAA,EAAA,GAEJ;AAAA,EAEC,CAAC,CAACH,KAECO,gBAAAA,EAAAA,KAAAK,EAAA,UAAA,EAAA,UAAA;AAAA,IAAAF,gBAAAA,EAAA,IAACG,GAAQ,EAAA,IAAG,kBAAiB,WAAU,UAAS;AAAA,IAChDH,gBAAAA,EAAA;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,KAAI;AAAA,QACJ,IAAG;AAAA,QACH,UAAS;AAAA,QACT,WAAU;AAAA,QAET,UAAAT,KAAA,gBAAAA,EAAS,IAAI,CAACc,MACbJ,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,oBAAmB;AAAA,YAClB,GAAGD;AAAA,UAAA;AAAA,QAEP;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EACF,CAAA;AAAA,GAEJ;"}

package/dist/index.es156.js

@@ -1,6 +1,6 @@
 import { j as c } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as e } from "./index.es273.js";
+import { createColorClasses as e } from "./index.es271.js";
 const n = ({
   width: a = 24,
   height: r = 24,

package/dist/index.es157.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const x = ({
   width: s = 24,
   height: o = 24,

package/dist/index.es158.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as l } from "./index.es243.js";
-import { createColorClasses as a } from "./index.es273.js";
+import { createColorClasses as a } from "./index.es271.js";
 const x = ({
   width: C = 32,
   height: s = 32,

package/dist/index.es159.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as l } from "./index.es273.js";
+import { createColorClasses as l } from "./index.es271.js";
 const x = ({
   width: s = 24,
   height: o = 24,

package/dist/index.es160.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const p = ({
   width: r = 24,
   height: o = 24,

package/dist/index.es161.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es241.js";
 import { clsx as l } from "./index.es243.js";
-import { createColorClasses as a } from "./index.es273.js";
+import { createColorClasses as a } from "./index.es271.js";
 const p = ({
   width: o = 114,
   height: r = 115,

package/dist/index.es162.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as l } from "./index.es243.js";
-import { createColorClasses as c } from "./index.es273.js";
+import { createColorClasses as c } from "./index.es271.js";
 const m = ({
   width: s = 121,
   height: e = 121,

package/dist/index.es163.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as e } from "./index.es273.js";
+import { createColorClasses as e } from "./index.es271.js";
 const f = ({
   width: m = 100,
   height: a = 100,

package/dist/index.es164.js

@@ -1,6 +1,6 @@
 import { j as c } from "./index.es241.js";
 import { clsx as s } from "./index.es243.js";
-import { createColorClasses as a } from "./index.es273.js";
+import { createColorClasses as a } from "./index.es271.js";
 const V = ({
   width: l = 263,
   height: h = 40,

package/dist/index.es165.js

@@ -1,6 +1,6 @@
 import { j as q } from "./index.es241.js";
 import { clsx as M } from "./index.es243.js";
-import { createColorClasses as t } from "./index.es273.js";
+import { createColorClasses as t } from "./index.es271.js";
 const i = ({
   width: v = 137,
   height: h = 40,

package/dist/index.es166.js

@@ -1,6 +1,6 @@
 import { j as c } from "./index.es241.js";
 import { clsx as s } from "./index.es243.js";
-import { createColorClasses as r } from "./index.es273.js";
+import { createColorClasses as r } from "./index.es271.js";
 const a = ({
   width: v = 118,
   height: m = 40,

package/dist/index.es167.js

@@ -1,6 +1,6 @@
 import { j as h } from "./index.es241.js";
 import { clsx as c } from "./index.es243.js";
-import { createColorClasses as r } from "./index.es273.js";
+import { createColorClasses as r } from "./index.es271.js";
 const v = ({
   width: l = 44,
   height: s = 44,

package/dist/index.es168.js

@@ -1,6 +1,6 @@
 import { j as q } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as s } from "./index.es273.js";
+import { createColorClasses as s } from "./index.es271.js";
 const x = ({
   width: l = 101,
   height: a = 40,

package/dist/index.es169.js

@@ -1,6 +1,6 @@
 import { j as q } from "./index.es241.js";
 import { clsx as M } from "./index.es243.js";
-import { createColorClasses as c } from "./index.es273.js";
+import { createColorClasses as c } from "./index.es271.js";
 const V = ({
   width: h = 181,
   height: v = 40,

package/dist/index.es170.js

@@ -1,6 +1,6 @@
 import { j as l } from "./index.es241.js";
 import { clsx as s } from "./index.es243.js";
-import { createColorClasses as f } from "./index.es273.js";
+import { createColorClasses as f } from "./index.es271.js";
 const n = ({
   width: e = 75,
   height: c = 75,

package/dist/index.es171.js

@@ -1,6 +1,6 @@
 import { j as l } from "./index.es241.js";
 import { clsx as o } from "./index.es243.js";
-import { createColorClasses as t } from "./index.es273.js";
+import { createColorClasses as t } from "./index.es271.js";
 const m = ({
   width: a = 75,
   height: s = 75,

package/dist/index.es172.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as m } from "./index.es273.js";
+import { createColorClasses as m } from "./index.es271.js";
 const p = ({
   width: t = 24,
   height: o = 24,

package/dist/index.es173.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as i } from "./index.es243.js";
-import { createColorClasses as a } from "./index.es273.js";
+import { createColorClasses as a } from "./index.es271.js";
 const x = ({
   width: s = 24,
   height: o = 24,

package/dist/index.es174.js

@@ -1,6 +1,6 @@
 import { j as e } from "./index.es241.js";
 import { clsx as c } from "./index.es243.js";
-import { createColorClasses as h } from "./index.es273.js";
+import { createColorClasses as h } from "./index.es271.js";
 const n = ({
   width: s = 32,
   height: o = 32,

package/dist/index.es175.js

@@ -1,6 +1,6 @@
 import { j as c } from "./index.es241.js";
 import { clsx as l } from "./index.es243.js";
-import { createColorClasses as r } from "./index.es273.js";
+import { createColorClasses as r } from "./index.es271.js";
 const d = ({
   width: a = 32,
   height: h = 32,

package/dist/index.es176.js

@@ -1,6 +1,6 @@
 import { j as a } from "./index.es241.js";
 import { clsx as r } from "./index.es243.js";
-import { createColorClasses as t } from "./index.es273.js";
+import { createColorClasses as t } from "./index.es271.js";
 const m = ({
   width: l = 32,
   height: c = 32,

package/dist/index.es177.js

@@ -1,6 +1,6 @@
 import { j as e } from "./index.es241.js";
 import { clsx as m } from "./index.es243.js";
-import { createColorClasses as d } from "./index.es273.js";
+import { createColorClasses as d } from "./index.es271.js";
 const n = ({
   width: l = 32,
   height: h = 32,

package/dist/index.es178.js

@@ -1,6 +1,6 @@
 import { j as c } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as v } from "./index.es273.js";
+import { createColorClasses as v } from "./index.es271.js";
 const m = ({
   width: l = 32,
   height: e = 32,

package/dist/index.es182.js

@@ -1,6 +1,6 @@
 import { j as l } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const n = ({
   width: o = 32,
   height: a = 32,

package/dist/index.es183.js

@@ -1,6 +1,6 @@
 import { j as a } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as c } from "./index.es273.js";
+import { createColorClasses as c } from "./index.es271.js";
 const d = ({
   width: l = 32,
   height: s = 32,

package/dist/index.es184.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as m } from "./index.es273.js";
+import { createColorClasses as m } from "./index.es271.js";
 const d = ({
   width: l = 24,
   height: e = 24,

package/dist/index.es186.js

@@ -1,6 +1,6 @@
 import { j as l } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as c } from "./index.es273.js";
+import { createColorClasses as c } from "./index.es271.js";
 const x = ({
   width: r = 32,
   height: s = 32,

package/dist/index.es187.js

@@ -1,6 +1,6 @@
 import { j as e } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const d = ({
   width: l = 24,
   height: s = 24,

package/dist/index.es188.js

@@ -1,6 +1,6 @@
 import { j as e } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as m } from "./index.es273.js";
+import { createColorClasses as m } from "./index.es271.js";
 const d = ({
   width: o = 24,
   height: r = 24,

package/dist/index.es189.js

@@ -1,6 +1,6 @@
 import { j as e } from "./index.es241.js";
 import { clsx as i } from "./index.es243.js";
-import { createColorClasses as a } from "./index.es273.js";
+import { createColorClasses as a } from "./index.es271.js";
 const c = ({
   width: r = 24,
   height: s = 24,

package/dist/index.es190.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es241.js";
 import { clsx as r } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const h = ({
   width: l = 24,
   height: o = 24,

package/dist/index.es191.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es241.js";
 import { clsx as l } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const a = ({
   width: r = 24,
   height: t = 24,

package/dist/index.es192.js

@@ -1,6 +1,6 @@
 import { j as e } from "./index.es241.js";
 import { clsx as i } from "./index.es243.js";
-import { createColorClasses as m } from "./index.es273.js";
+import { createColorClasses as m } from "./index.es271.js";
 const p = ({
   width: r = 16,
   height: s = 29,

package/dist/index.es193.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es241.js";
 import { clsx as c } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const d = ({
   width: r = 40,
   height: e = 40,

package/dist/index.es194.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as l } from "./index.es243.js";
-import { createColorClasses as x } from "./index.es273.js";
+import { createColorClasses as x } from "./index.es271.js";
 const m = ({
   width: s = 24,
   height: t = 32,

package/dist/index.es196.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as l } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const x = ({
   width: s = 24,
   height: t = 24,

package/dist/index.es197.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as i } from "./index.es243.js";
-import { createColorClasses as c } from "./index.es273.js";
+import { createColorClasses as c } from "./index.es271.js";
 const f = ({
   width: s = 13,
   height: o = 9,

package/dist/index.es198.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as i } from "./index.es243.js";
-import { createColorClasses as c } from "./index.es273.js";
+import { createColorClasses as c } from "./index.es271.js";
 const f = ({
   width: s = 13,
   height: o = 9,

package/dist/index.es199.js

@@ -1,6 +1,6 @@
 import { j as e } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const d = ({
   width: o = 20,
   height: r = 20,

package/dist/index.es200.js

@@ -1,6 +1,6 @@
 import { j as C } from "./index.es241.js";
 import { clsx as l } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const L = ({
   width: o = 24,
   height: e = 24,

package/dist/index.es201.js

@@ -1,6 +1,6 @@
 import { j as l } from "./index.es241.js";
 import { clsx as i } from "./index.es243.js";
-import { createColorClasses as a } from "./index.es273.js";
+import { createColorClasses as a } from "./index.es271.js";
 const d = ({
   width: r = 24,
   height: e = 24,

package/dist/index.es202.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const p = ({
   width: s = 24,
   height: o = 24,

package/dist/index.es205.js

@@ -1,6 +1,6 @@
 import { j as l } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const c = ({
   width: r = 24,
   height: e = 24,

package/dist/index.es206.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const p = ({
   width: e = 24,
   height: l = 24,

package/dist/index.es207.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as m } from "./index.es243.js";
-import { createColorClasses as a } from "./index.es273.js";
+import { createColorClasses as a } from "./index.es271.js";
 const p = ({
   width: e = 36,
   height: s = 36,

package/dist/index.es208.js

@@ -1,6 +1,6 @@
 import { j as a } from "./index.es241.js";
 import { clsx as l } from "./index.es243.js";
-import { createColorClasses as m } from "./index.es273.js";
+import { createColorClasses as m } from "./index.es271.js";
 const v = ({
   width: c = 24,
   height: e = 24,

package/dist/index.es209.js

@@ -1,6 +1,6 @@
 import { j as l } from "./index.es241.js";
 import { clsx as a } from "./index.es243.js";
-import { createColorClasses as m } from "./index.es273.js";
+import { createColorClasses as m } from "./index.es271.js";
 const c = ({
   width: e = 24,
   height: s = 24,

package/dist/index.es210.js

@@ -1,6 +1,6 @@
 import { j as C } from "./index.es241.js";
 import { clsx as t } from "./index.es243.js";
-import { createColorClasses as i } from "./index.es273.js";
+import { createColorClasses as i } from "./index.es271.js";
 const m = ({
   width: e = 32,
   height: s = 32,

package/dist/index.es211.js

@@ -1,6 +1,6 @@
 import { j as e } from "./index.es241.js";
 import { clsx as i } from "./index.es243.js";
-import { createColorClasses as C } from "./index.es273.js";
+import { createColorClasses as C } from "./index.es271.js";
 const m = ({
   width: s = 32,
   height: l = 32,

package/dist/index.es212.js

@@ -1,5 +1,5 @@
 import { j as e } from "./index.es241.js";
-import { createColorClasses as H } from "./index.es273.js";
+import { createColorClasses as H } from "./index.es271.js";
 import { clsx as V } from "./index.es243.js";
 const c = ({
   width: r = 32,

package/dist/index.es218.js

@@ -1,6 +1,6 @@
 import { j as l } from "./index.es241.js";
 import { clsx as o } from "./index.es243.js";
-import { createColorClasses as x } from "./index.es273.js";
+import { createColorClasses as x } from "./index.es271.js";
 const p = ({
   width: i = 73,
   height: s = 73,

package/dist/index.es220.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es241.js";
 import { clsx as n } from "./index.es243.js";
-import { createColorClasses as x } from "./index.es273.js";
+import { createColorClasses as x } from "./index.es271.js";
 const m = ({
   width: s = 24,
   height: e = 24,

package/dist/index.es221.js

@@ -1,5 +1,5 @@
 import { j as s } from "./index.es241.js";
-import { createColorClasses as m } from "./index.es273.js";
+import { createColorClasses as m } from "./index.es271.js";
 import { clsx as n } from "./index.es243.js";
 const x = ({
   width: o = 24,