@lanaco/lnc-react-ui 3.11.34 → 4.0.1

package/README.md

@@ -9,14 +9,12 @@ This library includes basic and advanced UI components used with ReactJS fronten
 - [Contributing](#contributing)
 - [License](#license)
 
-
 ## Installing
 
 ```
 $ npm install @lanaco/lnc-react-ui
 ```
 
-
 ## Developing Locally
 
 To see your changes to `@lanaco/lnc-react-ui` locally, all you need is to run storybook with `npm start` command
@@ -35,7 +33,6 @@ $ npm start
 4. Test your changes by [running your local version](#requirements)
 5. Push your branch and open a Pull Request
 
-
 ## License
 
 This code is open source software licensed under the MIT License.

package/dist/Accordion.cjs

@@ -0,0 +1,6 @@
+"use strict";const g=require("react/jsx-runtime"),t=require("react"),o=require("./index-DXnSjbfJ.cjs"),x=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),l=require("./utils-hdRGTsQ7.cjs"),R=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),S=require("./useUpdateEffect-BtMgpgIV.cjs"),N=x.newStyled.div`
+  color: ${s=>!s.disabled&&l.getColorRgbaValue(s.theme,"Accordion","primary","enabled","text")};
+  background-color: transparent;
+  ${s=>l.getComponentTypographyCss(s.theme,"Accordion",s.size,"enabled")};
+  ${s=>s.disabled===!0?l.getDisabledStateCss(s.theme):""}
+`,u=t.forwardRef((s,y)=>{const{expanded:a=!1,disabled:i=!1,change:_=()=>{},size:c="small",className:C="",style:b={},children:p,...f}=s,E={theme:R.useTheme(),size:c,style:b,className:"lnc-ui-accordion "+C},[r,m]=t.useState(a);S.useUpdateEffect(()=>{m(a)},[a]);const d=e=>{_(!r,e),m(!r)},T=t.Children.map(p,e=>{var n;if(t.isValidElement(e)&&(e.props.__TYPE__=="ACCORDION_SUMMARY"||((n=e==null?void 0:e.type)==null?void 0:n.displayName)==="ACCORDION_SUMMARY"))return t.cloneElement(e,{size:c,onClick:d,onExpand:d,isExpanded:r,disabled:i})}),A=t.Children.map(p,e=>{var n;if(t.isValidElement(e)&&(e.props.__TYPE__=="ACCORDION_DETAILS"||((n=e==null?void 0:e.type)==null?void 0:n.displayName)==="ACCORDION_DETAILS"))return t.cloneElement(e,{size:c,isExpanded:r})});return g.jsxs(N,{ref:y,...E,disabled:i,...f,children:[T,A]})});u.propTypes={expanded:o.PropTypes.bool,disabled:o.PropTypes.bool,change:o.PropTypes.func,className:o.PropTypes.string,style:o.PropTypes.object,size:o.PropTypes.oneOf(["small","medium","large"])};module.exports=u;

package/dist/Accordion.js

@@ -0,0 +1,65 @@
+import { jsxs as E } from "react/jsx-runtime";
+import a, { useState as g } from "react";
+import { P as o } from "./index-Ds9PUTwb.js";
+import { n as N } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { b as O, a as R, g as S } from "./utils-DEke8iwo.js";
+import { u as x } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+import { u as D } from "./useUpdateEffect-CuYWz7EA.js";
+const T = N.div`
+  color: ${(t) => !t.disabled && O(t.theme, "Accordion", "primary", "enabled", "text")};
+  background-color: transparent;
+  ${(t) => R(t.theme, "Accordion", t.size, "enabled")};
+  ${(t) => t.disabled === !0 ? S(t.theme) : ""}
+`, I = a.forwardRef((t, c) => {
+  const {
+    expanded: r = !1,
+    disabled: l = !1,
+    change: f = () => {
+    },
+    size: m = "small",
+    className: u = "",
+    style: C = {},
+    children: d,
+    ...y
+  } = t, _ = { theme: x(), size: m, style: C, className: "lnc-ui-accordion " + u }, [n, p] = g(r);
+  D(() => {
+    p(r);
+  }, [r]);
+  const i = (e) => {
+    f(!n, e), p(!n);
+  }, b = a.Children.map(d, (e) => {
+    var s;
+    if (a.isValidElement(e) && (e.props.__TYPE__ == "ACCORDION_SUMMARY" || ((s = e == null ? void 0 : e.type) == null ? void 0 : s.displayName) === "ACCORDION_SUMMARY"))
+      return a.cloneElement(e, {
+        size: m,
+        onClick: i,
+        onExpand: i,
+        isExpanded: n,
+        disabled: l
+      });
+  }), A = a.Children.map(d, (e) => {
+    var s;
+    if (a.isValidElement(e) && (e.props.__TYPE__ == "ACCORDION_DETAILS" || ((s = e == null ? void 0 : e.type) == null ? void 0 : s.displayName) === "ACCORDION_DETAILS"))
+      return a.cloneElement(e, {
+        size: m,
+        isExpanded: n
+      });
+  });
+  return /* @__PURE__ */ E(T, { ref: c, ..._, disabled: l, ...y, children: [
+    b,
+    A
+  ] });
+});
+I.propTypes = {
+  expanded: o.bool,
+  disabled: o.bool,
+  //--------------------------------------------------------------
+  change: o.func,
+  //---------------------------------------------------------------
+  className: o.string,
+  style: o.object,
+  size: o.oneOf(["small", "medium", "large"])
+};
+export {
+  I as default
+};

package/dist/AccordionDetails.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),d=require("react"),t=require("./index-DXnSjbfJ.cjs"),u=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),i=(e,r)=>r=="medium"?`${e?"0.4rem":"0"} 1.25rem ${e?"0.8rem":"0"} 1.25rem`:r=="large"?`${e?"0.6rem":"0"} 1.5rem ${e?"1rem":"0"} 1.5rem`:`${e?"0.2rem":"0"} 1rem ${e?"0.6rem":"0"} 1rem`,c=u.newStyled.div`
+  transform: ${e=>e.isExpanded?"scaleY(1)":"scaleY(0)"};
+  transform-origin: top;
+  transition: transform 0.25s ease;
+  max-height: ${e=>e.isExpanded?"auto":"0"};
+  padding: ${e=>i(e.isExpanded,e.size)};
+`,s=d.forwardRef((e,r)=>{const{__TYPE__:_="ACCORDION_DETAILS",isExpanded:o,size:n="small",children:m,...a}=e;return l.jsx(c,{ref:r,size:n,isExpanded:o,...a,children:m})});s.propTypes={__TYPE__:t.PropTypes.string,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"])};s.displayName="ACCORDION_DETAILS";exports.default=s;exports.getPadding=i;

package/dist/AccordionDetails.js

@@ -0,0 +1,32 @@
+import { jsx as n } from "react/jsx-runtime";
+import l from "react";
+import { P as t } from "./index-Ds9PUTwb.js";
+import { n as f } from "./emotion-styled.browser.esm-BZSYYThs.js";
+const d = (r, e) => e == "medium" ? `${r ? "0.4rem" : "0"} 1.25rem ${r ? "0.8rem" : "0"} 1.25rem` : e == "large" ? `${r ? "0.6rem" : "0"} 1.5rem ${r ? "1rem" : "0"} 1.5rem` : `${r ? "0.2rem" : "0"} 1rem ${r ? "0.6rem" : "0"} 1rem`, c = f.div`
+  transform: ${(r) => r.isExpanded ? "scaleY(1)" : "scaleY(0)"};
+  transform-origin: top;
+  transition: transform 0.25s ease;
+  max-height: ${(r) => r.isExpanded ? "auto" : "0"};
+  padding: ${(r) => d(r.isExpanded, r.size)};
+`, m = l.forwardRef((r, e) => {
+  const {
+    __TYPE__: _ = "ACCORDION_DETAILS",
+    isExpanded: s,
+    size: a = "small",
+    children: o,
+    ...i
+  } = r;
+  return /* @__PURE__ */ n(c, { ref: e, size: a, isExpanded: s, ...i, children: o });
+});
+m.propTypes = {
+  __TYPE__: t.string,
+  //---------------------------------------------------------------
+  className: t.string,
+  style: t.object,
+  size: t.oneOf(["small", "medium", "large"])
+};
+m.displayName = "ACCORDION_DETAILS";
+export {
+  m as default,
+  d as getPadding
+};

package/dist/AccordionSummary.cjs

@@ -0,0 +1,12 @@
+"use strict";const o=require("react/jsx-runtime"),f=require("react"),s=require("./index-DXnSjbfJ.cjs"),x=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./Icon.cjs"),C=require("./utils-hdRGTsQ7.cjs"),P=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),h={small:"0.6rem 1rem",medium:"0.8rem 1.25rem",large:"1rem 1.5rem"},R=x.newStyled.div`
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  color: ${e=>C.getColorRgbaValue(e.theme,"Accordion","primary","enabled","summaryText")};
+
+  padding: ${e=>h[e.size]};
+  & .accordion-icon-lnc {
+    transform: ${e=>e.isExpanded?"rotate(180deg)":"rotate(0)"};
+    transition: transform 0.25s ease;
+  }
+`,r=f.forwardRef((e,t)=>{const{__TYPE__:b="ACCORDION_SUMMARY",disabled:i,isExpanded:c,onExpand:a,onClick:m=()=>{},size:l="small",className:d="",style:p={},children:u,...y}=e,_={theme:P.useTheme(),size:l,style:p,className:d},T=n=>{i==!1&&a(n),m(n)};return o.jsxs(R,{ref:t,..._,onClick:T,isExpanded:c,...y,children:[u,o.jsx(g,{icon:"angle-down",sizeInUnits:"1.125rem",className:"accordion-icon-lnc"})]})});r.propTypes={__TYPE__:s.PropTypes.string,onClick:s.PropTypes.func,className:s.PropTypes.string,style:s.PropTypes.object,size:s.PropTypes.oneOf(["small","medium","large"])};r.displayName="ACCORDION_SUMMARY";module.exports=r;

package/dist/AccordionSummary.js

@@ -0,0 +1,78 @@
+import { jsxs as y, jsx as _ } from "react/jsx-runtime";
+import C from "react";
+import { P as o } from "./index-Ds9PUTwb.js";
+import { n as g } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import h from "./Icon.js";
+import { b as x } from "./utils-DEke8iwo.js";
+import { u as A } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const N = {
+  small: "0.6rem 1rem",
+  medium: "0.8rem 1.25rem",
+  large: "1rem 1.5rem"
+}, O = g.div`
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  color: ${(e) => x(
+  e.theme,
+  "Accordion",
+  "primary",
+  "enabled",
+  "summaryText"
+)};
+
+  padding: ${(e) => N[e.size]};
+  & .accordion-icon-lnc {
+    transform: ${(e) => e.isExpanded ? "rotate(180deg)" : "rotate(0)"};
+    transition: transform 0.25s ease;
+  }
+`, s = C.forwardRef((e, n) => {
+  const {
+    __TYPE__: R = "ACCORDION_SUMMARY",
+    disabled: a,
+    isExpanded: t,
+    onExpand: m,
+    onClick: i = () => {
+    },
+    size: c = "small",
+    className: l = "",
+    style: d = {},
+    children: p,
+    ...f
+  } = e, u = { theme: A(), size: c, style: d, className: l };
+  return /* @__PURE__ */ y(
+    O,
+    {
+      ref: n,
+      ...u,
+      onClick: (r) => {
+        a == !1 && m(r), i(r);
+      },
+      isExpanded: t,
+      ...f,
+      children: [
+        p,
+        /* @__PURE__ */ _(
+          h,
+          {
+            icon: "angle-down",
+            sizeInUnits: "1.125rem",
+            className: "accordion-icon-lnc"
+          }
+        )
+      ]
+    }
+  );
+});
+s.propTypes = {
+  __TYPE__: o.string,
+  onClick: o.func,
+  //---------------------------------------------------------------
+  className: o.string,
+  style: o.object,
+  size: o.oneOf(["small", "medium", "large"])
+};
+s.displayName = "ACCORDION_SUMMARY";
+export {
+  s as default
+};

package/dist/ActionsToolbar.cjs

@@ -0,0 +1,19 @@
+"use strict";const o=require("react/jsx-runtime"),$=require("react"),e=require("./index-DXnSjbfJ.cjs"),B=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),M=require("./DropdownMenu-B6qr13ik.cjs"),i=require("./DropdownItem.cjs"),V=require("./Separator.cjs"),y=require("./Button.cjs"),b=require("./utils-hdRGTsQ7.cjs"),Y=require("./ThemeProvider.cjs"),Z=B.newStyled.div`
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  padding: 6px;
+  margin-bottom: 12px;
+  font-weight: 700;
+  font-size: 0.875rem;
+  color: rgba(15, 23, 42, 100%);
+  background-color: ${t=>b.getColorRgbaValue(t.theme,"Toolbar",t.color,"enabled","background","backgroundOpacity")};
+  border: ${t=>`1px solid ${b.getColorRgbaValue(t.theme,"Toolbar",t.color,"enabled","border","borderOpacity")}`};
+  gap: 6px;
+  justify-content: space-between;
+  & > div {
+    display: flex;
+    gap: 0.5rem;
+  }
+}
+`,c=$.forwardRef((t,T)=>{const{__TYPE__:F="ACTIONS_TOOLBAR",showCreate:u=!0,enableCreate:x=!0,createText:d="Create new item",showEdit:m=!0,enableEditOnSelection:g=!0,editText:P="Edit",showDelete:w=!0,enableDeleteOnSelection:h=!0,deleteText:C="Delete",showCopy:f=!0,enableCopyOnSelection:O=!0,copyText:j="Copy",actionsText:S="Actions",customActions:a,selectedRowsLength:n=0,readOnly:s=!1,actionDropdownProps:D,actionsDropdownZIndex:_,actionsDropdownPlacement:q,onCreate:E=()=>{},onEdit:R=()=>{},onDelete:k=()=>{},onCopy:v=()=>{},className:A="",style:I={},color:l="primary",size:p="small",...N}=t,{theme:z}=Y.useTheme();return o.jsxs(Z,{ref:T,theme:z,color:l,className:`lnc-table-view-actions-toolbar ${A}`,style:I,...N,children:[o.jsx("div",{children:u&&s==!1&&o.jsx(y,{leadingIcon:"plus",btnType:"outline",type:"button",color:l,size:p,title:d,disabled:!x,onClick:E,text:d})}),o.jsx("div",{children:o.jsxs(M.DropdownMenu,{className:"lnc-table-view-actions-toolbar-dropdown",color:l,size:p,zIndex:_,placement:q,...D,control:o.jsx(y,{text:S,btnType:"outline",trailingIcon:"angle-down",color:l,size:p,type:"button"}),children:[f&&s==!1&&o.jsx(i,{icon:"copy",disabled:!(O&&n>0),onClick:v,children:j}),m&&s==!1&&o.jsx(i,{icon:"pen",disabled:!(g&&n>0),onClick:R,children:P}),w&&s==!1&&o.jsx(i,{icon:"trash",disabled:!(h&&n>0),onClick:k,children:C}),o.jsx(V,{}),a==null?void 0:a.map((r,L)=>{if((r==null?void 0:r.show)!=!1)return o.jsx(i,{icon:r.icon,disabled:!(r.enableOnSelection==!0&&n>0||r.enable==!0&&r.enableOnSelection==!1),onClick:r.onAction,children:r.name},L)})]})})]})});c.propTypes={__TYPE__:e.PropTypes.string,showCreate:e.PropTypes.bool,enableCreate:e.PropTypes.bool,createText:e.PropTypes.string,showEdit:e.PropTypes.bool,enableEditOnSelection:e.PropTypes.bool,editText:e.PropTypes.string,showDelete:e.PropTypes.bool,enableDeleteOnSelection:e.PropTypes.bool,deleteText:e.PropTypes.string,showCopy:e.PropTypes.bool,enableCopyOnSelection:e.PropTypes.bool,copyText:e.PropTypes.string,actionsText:e.PropTypes.string,customActions:e.PropTypes.array,selectedRowsLength:e.PropTypes.number,readOnly:e.PropTypes.bool,onCreate:e.PropTypes.func,onEdit:e.PropTypes.func,onDelete:e.PropTypes.func,onCopy:e.PropTypes.func,className:e.PropTypes.string,style:e.PropTypes.object,size:e.PropTypes.oneOf(["small","medium","large"]),color:e.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};c.displayName="ACTIONS_TOOLBAR";module.exports=c;

package/dist/ActionsToolbar.js

@@ -0,0 +1,225 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import Y from "react";
+import { P as e } from "./index-Ds9PUTwb.js";
+import { n as M } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { D as V } from "./DropdownMenu-DZi3TJ8Q.js";
+import i from "./DropdownItem.js";
+import Z from "./Separator.js";
+import b from "./Button.js";
+import { b as m } from "./utils-DEke8iwo.js";
+import { useTheme as q } from "./ThemeProvider.js";
+const F = M.div`
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  padding: 6px;
+  margin-bottom: 12px;
+  font-weight: 700;
+  font-size: 0.875rem;
+  color: rgba(15, 23, 42, 100%);
+  background-color: ${(n) => m(
+  n.theme,
+  "Toolbar",
+  n.color,
+  "enabled",
+  "background",
+  "backgroundOpacity"
+)};
+  border: ${(n) => `1px solid ${m(
+  n.theme,
+  "Toolbar",
+  n.color,
+  "enabled",
+  "border",
+  "borderOpacity"
+)}`};
+  gap: 6px;
+  justify-content: space-between;
+  & > div {
+    display: flex;
+    gap: 0.5rem;
+  }
+}
+`, u = Y.forwardRef((n, f) => {
+  const {
+    __TYPE__: G = "ACTIONS_TOOLBAR",
+    showCreate: y = !0,
+    enableCreate: g = !0,
+    createText: c = "Create new item",
+    showEdit: w = !0,
+    enableEditOnSelection: h = !0,
+    editText: T = "Edit",
+    showDelete: x = !0,
+    enableDeleteOnSelection: C = !0,
+    deleteText: O = "Delete",
+    showCopy: D = !0,
+    enableCopyOnSelection: S = !0,
+    copyText: _ = "Copy",
+    actionsText: E = "Actions",
+    customActions: s,
+    selectedRowsLength: r = 0,
+    readOnly: l = !1,
+    actionDropdownProps: k,
+    actionsDropdownZIndex: A,
+    actionsDropdownPlacement: I,
+    //----------------
+    onCreate: N = () => {
+    },
+    onEdit: R = () => {
+    },
+    onDelete: v = () => {
+    },
+    onCopy: P = () => {
+    },
+    className: j = "",
+    style: z = {},
+    color: a = "primary",
+    size: d = "small",
+    ...L
+  } = n, { theme: $ } = q();
+  return /* @__PURE__ */ p(
+    F,
+    {
+      ref: f,
+      theme: $,
+      color: a,
+      className: `lnc-table-view-actions-toolbar ${j}`,
+      style: z,
+      ...L,
+      children: [
+        /* @__PURE__ */ t("div", { children: y && l == !1 && /* @__PURE__ */ t(
+          b,
+          {
+            leadingIcon: "plus",
+            btnType: "outline",
+            type: "button",
+            color: a,
+            size: d,
+            title: c,
+            disabled: !g,
+            onClick: N,
+            text: c
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { children: /* @__PURE__ */ p(
+          V,
+          {
+            className: "lnc-table-view-actions-toolbar-dropdown",
+            color: a,
+            size: d,
+            zIndex: A,
+            placement: I,
+            ...k,
+            control: /* @__PURE__ */ t(
+              b,
+              {
+                text: E,
+                btnType: "outline",
+                trailingIcon: "angle-down",
+                color: a,
+                size: d,
+                type: "button"
+              }
+            ),
+            children: [
+              D && l == !1 && /* @__PURE__ */ t(
+                i,
+                {
+                  icon: "copy",
+                  disabled: !(S && r > 0),
+                  onClick: P,
+                  children: _
+                }
+              ),
+              w && l == !1 && /* @__PURE__ */ t(
+                i,
+                {
+                  icon: "pen",
+                  disabled: !(h && r > 0),
+                  onClick: R,
+                  children: T
+                }
+              ),
+              x && l == !1 && /* @__PURE__ */ t(
+                i,
+                {
+                  icon: "trash",
+                  disabled: !(C && r > 0),
+                  onClick: v,
+                  children: O
+                }
+              ),
+              /* @__PURE__ */ t(Z, {}),
+              s == null ? void 0 : s.map((o, B) => {
+                if ((o == null ? void 0 : o.show) != !1)
+                  return /* @__PURE__ */ t(
+                    i,
+                    {
+                      icon: o.icon,
+                      disabled: !(o.enableOnSelection == !0 && r > 0 || o.enable == !0 && o.enableOnSelection == !1),
+                      onClick: o.onAction,
+                      children: o.name
+                    },
+                    B
+                  );
+              })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+});
+u.propTypes = {
+  /**
+   * This property determines where the component is rendered.
+   * Should not be overridden!
+   */
+  __TYPE__: e.string,
+  showCreate: e.bool,
+  enableCreate: e.bool,
+  createText: e.string,
+  showEdit: e.bool,
+  enableEditOnSelection: e.bool,
+  editText: e.string,
+  showDelete: e.bool,
+  enableDeleteOnSelection: e.bool,
+  deleteText: e.string,
+  showCopy: e.bool,
+  enableCopyOnSelection: e.bool,
+  copyText: e.string,
+  actionsText: e.string,
+  /**
+   * Actions that will be shown in toolbar with existing actions
+   * customActions=[{name: `<string>`, show: `<bool>`, enable: `<bool>`, enableOnSelection: `<bool>`, onAction: `PropTypes.func`}, ...]
+   */
+  customActions: e.array,
+  selectedRowsLength: e.number,
+  /**
+   * If `readOnly={true}` actions Delete, Edit and Copy won't be shown.
+   */
+  readOnly: e.bool,
+  //-------------------------------------------------------------
+  onCreate: e.func,
+  onEdit: e.func,
+  onDelete: e.func,
+  onCopy: e.func,
+  //------------------------------------------------------------
+  className: e.string,
+  style: e.object,
+  size: e.oneOf(["small", "medium", "large"]),
+  color: e.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+u.displayName = "ACTIONS_TOOLBAR";
+export {
+  u as default
+};

package/dist/Alert.cjs

@@ -0,0 +1,40 @@
+"use strict";const o=require("react/jsx-runtime"),c=require("react"),r=require("./index-DXnSjbfJ.cjs"),x=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),T=require("./ThemeProvider.cjs"),t=require("./utils-hdRGTsQ7.cjs"),s=require("./Icon.cjs"),P=x.newStyled.div`
+  min-height: 3rem;
+  ${e=>t.getComponentTypographyCss(e.theme,"Alert",e.size,"enabled")};
+  line-height: 1.25rem;
+  border-radius: ${e=>t.getBorderRadiusValueWithUnits(e.theme,"regular")};
+  background-color: ${e=>t.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","background","backgroundOpacity")};
+  color: ${e=>t.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","text")};
+  word-wrap: break-word;
+  box-sizing: border-box;
+  padding: 0.875rem 1rem;
+  display: flex;
+  gap: 1rem;
+  & .alert-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  & .alert-icon {
+    align-items: flex-start;
+    & i {
+      font-size: 1.25rem;
+    }
+  }
+  & .alert-title {
+    font-weight: ${e=>t.getComponentPropValue(e.theme,"Alert",e.color,"enabled","fontWeightTitle")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","title")};
+  }
+  & .alert-actions {
+    display: ${e=>e.actions?"flex":"none"};
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding-top: 0.5rem;
+  }
+
+  & .alert-actions > * {
+    font-weight: ${e=>t.getComponentPropValue(e.theme,"Alert",e.color,"enabled","fontWeightAction")};
+    color: ${e=>t.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","action")};
+    cursor: pointer;
+  }
+`,w=e=>e=="danger"?"times-circle":e=="warning"?"exclamation-triangle":e=="success"?"check-circle":"exclamation-circle",C=({statusIcon:e,color:n})=>typeof e=="boolean"&&e==!0?o.jsx(s,{className:"alert-icon",icon:w(n)}):typeof e=="string"&&e!==""?o.jsx(s,{className:"alert-icon",icon:e}):c.cloneElement(e,{className:"alert-icon "+(e==null?void 0:e.className)}),m=c.forwardRef((e,n)=>{const{className:d="",size:p="small",color:l="primary",title:g,actions:i,noIcon:u=!1,statusIcon:a=!0,children:y,...h}=e,{theme:f}=T.useTheme(),b={theme:f,size:p,color:l};return o.jsxs(P,{ref:n,...b,className:"lnc-ui-alert "+d,actions:i,...h,children:[u==!1&&a&&o.jsx(C,{color:l,statusIcon:a}),o.jsxs("div",{className:"alert-content",children:[o.jsx("div",{className:"alert-title",children:g}),y,o.jsx("div",{className:"alert-actions",children:i})]})]})});m.propTypes={title:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.element]),actions:r.PropTypes.element,statusIcon:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.element,r.PropTypes.bool]),noIcon:r.PropTypes.bool,className:r.PropTypes.string,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=m;

package/dist/Alert.js

@@ -0,0 +1,138 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import d from "react";
+import { P as r } from "./index-Ds9PUTwb.js";
+import { n as x } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { useTheme as w } from "./ThemeProvider.js";
+import { a as N, c as A, b as o, d as m } from "./utils-DEke8iwo.js";
+import s from "./Icon.js";
+const $ = x.div`
+  min-height: 3rem;
+  ${(e) => N(e.theme, "Alert", e.size, "enabled")};
+  line-height: 1.25rem;
+  border-radius: ${(e) => A(e.theme, "regular")};
+  background-color: ${(e) => o(
+  e.theme,
+  "Alert",
+  e.color,
+  "enabled",
+  "background",
+  "backgroundOpacity"
+)};
+  color: ${(e) => o(e.theme, "Alert", e.color, "enabled", "text")};
+  word-wrap: break-word;
+  box-sizing: border-box;
+  padding: 0.875rem 1rem;
+  display: flex;
+  gap: 1rem;
+  & .alert-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  & .alert-icon {
+    align-items: flex-start;
+    & i {
+      font-size: 1.25rem;
+    }
+  }
+  & .alert-title {
+    font-weight: ${(e) => m(
+  e.theme,
+  "Alert",
+  e.color,
+  "enabled",
+  "fontWeightTitle"
+)};
+    color: ${(e) => o(e.theme, "Alert", e.color, "enabled", "title")};
+  }
+  & .alert-actions {
+    display: ${(e) => e.actions ? "flex" : "none"};
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding-top: 0.5rem;
+  }
+
+  & .alert-actions > * {
+    font-weight: ${(e) => m(
+  e.theme,
+  "Alert",
+  e.color,
+  "enabled",
+  "fontWeightAction"
+)};
+    color: ${(e) => o(
+  e.theme,
+  "Alert",
+  e.color,
+  "enabled",
+  "action"
+)};
+    cursor: pointer;
+  }
+`, T = (e) => e == "danger" ? "times-circle" : e == "warning" ? "exclamation-triangle" : e == "success" ? "check-circle" : "exclamation-circle", C = ({ statusIcon: e, color: n }) => typeof e == "boolean" && e == !0 ? /* @__PURE__ */ t(s, { className: "alert-icon", icon: T(n) }) : typeof e == "string" && e !== "" ? /* @__PURE__ */ t(s, { className: "alert-icon", icon: e }) : d.cloneElement(e, {
+  className: "alert-icon " + (e == null ? void 0 : e.className)
+}), k = d.forwardRef((e, n) => {
+  const {
+    className: f = "",
+    size: g = "small",
+    color: l = "primary",
+    title: h,
+    actions: a,
+    noIcon: p = !1,
+    statusIcon: i = !0,
+    children: u,
+    ...b
+  } = e, { theme: y } = w();
+  return /* @__PURE__ */ c(
+    $,
+    {
+      ref: n,
+      ...{ theme: y, size: g, color: l },
+      className: "lnc-ui-alert " + f,
+      actions: a,
+      ...b,
+      children: [
+        p == !1 && i && /* @__PURE__ */ t(C, { color: l, statusIcon: i }),
+        /* @__PURE__ */ c("div", { className: "alert-content", children: [
+          /* @__PURE__ */ t("div", { className: "alert-title", children: h }),
+          u,
+          /* @__PURE__ */ t("div", { className: "alert-actions", children: a })
+        ] })
+      ]
+    }
+  );
+});
+k.propTypes = {
+  title: r.oneOfType([r.string, r.element]),
+  actions: r.element,
+  /**
+   * Can be boolean (true - display default icon, false - don't display icon at all), string (display custom icon), element (display custom element as icon)
+   */
+  statusIcon: r.oneOfType([
+    r.string,
+    r.element,
+    r.bool
+  ]),
+  /**
+   * Disable display of status icon
+   */
+  noIcon: r.bool,
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  /**
+   * When `status` is not defined color of alert can be defined with `color` prop
+   */
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  k as default
+};

package/dist/Avatar.cjs

@@ -0,0 +1,16 @@
+"use strict";const n=require("react/jsx-runtime"),T=require("react"),i=require("./index-DXnSjbfJ.cjs"),I=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs");;/* empty css                       */const s=require("./utils-hdRGTsQ7.cjs"),P=require("./Icon.cjs"),f=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),x=I.newStyled.div`
+  border-radius: ${e=>s.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
+  color: white;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: ${e=>e.sizeInUnits?e.sizeInUnits:s.getSizeValueWithUnits(e.theme,e.size)};
+  width: ${e=>e.sizeInUnits?e.sizeInUnits:s.getSizeValueWithUnits(e.theme,e.size)};
+  ${e=>e.disabled===!0&&s.getDisabledStateCss(e.theme)};
+  background-color: ${e=>!e.disabled&&s.getColorRgbaValue(e.theme,"Chip",e.color,"enabled","text")};
+  overflow: hidden;
+  & img {
+    height: ${e=>e.sizeInUnits?e.sizeInUnits:s.getSizeValueWithUnits(e.theme,e.size)};
+    width: ${e=>e.sizeInUnits?e.sizeInUnits:s.getSizeValueWithUnits(e.theme,e.size)};
+  }
+`,a=T.forwardRef((e,l)=>{const{image:r,icon:c="user",tabIndex:w,sizeInUnits:t,disabled:q=!1,borderRadius:u="curved",onFocus:d=()=>{},onBlur:m=()=>{},onClick:g=()=>{},size:o="small",color:h="primary",className:y="",style:z={},...b}=e,U={theme:f.useTheme(),color:h,style:z,size:o,sizeInUnits:t,className:"lnc-ui-avatar "+y};return n.jsx(x,{ref:l,...U,borderRadius:u,onClick:g,onFocus:d,onBlur:m,...b,children:r?n.jsx("img",{src:r}):n.jsx(P,{icon:c,size:o,sizeInUnits:t?`calc(${t} / 2)`:null})})});a.propTypes={image:i.PropTypes.string,icon:i.PropTypes.string,tabIndex:i.PropTypes.number,sizeInUnits:i.PropTypes.string,disabled:i.PropTypes.bool,borderRadius:i.PropTypes.oneOf(["slight","regular","edged","curved","none"]),onBlur:i.PropTypes.func,onFocus:i.PropTypes.func,onClick:i.PropTypes.func,className:i.PropTypes.string,style:i.PropTypes.object,size:i.PropTypes.oneOf(["small","medium","large"]),color:i.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};module.exports=a;