@lanaco/lnc-react-ui 4.0.2 → 4.0.3

package/dist/NotificationContainer.cjs

@@ -0,0 +1,37 @@
+"use strict";const s=require("react/jsx-runtime"),C=require("react"),o=require("./index-BIlhCoy2.cjs"),N=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),_=require("./react-toastify.esm-Dqcb4SQT.cjs");;/* empty css                         */const t=require("./utils-DTAPpJXU.cjs"),R=require("./ThemeProvider.cjs"),v=N.newStyled.div`
+  & .lnc-notification {
+    & > div {
+      background-color: ${e=>t.getColorRgbaValue(e.theme,"Notification",e.color,"enabled","background","backgroundOpacity")};
+
+      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+      border: ${e=>`1px solid ${t.getColorRgbaValue(e.theme,"Notification","default","enabled","border")}`};
+      border-radius: ${e=>t.getBorderRadiusValueWithUnits(e.theme,"regular")};
+    }
+    & .Toastify__close-button {
+      & svg {
+        fill: ${e=>t.getColorRgbaValue(e.theme,"Notification","default","enabled","icon")};
+      }
+    }
+    & .Toastify__toast--success {
+      & svg {
+        fill: ${e=>t.getColorRgbaValue(e.theme,"Notification","success","enabled","icon")};
+      }
+    }
+    & .Toastify__toast--information {
+      & svg {
+        fill: ${e=>t.getColorRgbaValue(e.theme,"Notification","information","enabled","icon")};
+      }
+    }
+    & .Toastify__toast--danger {
+      & svg {
+        fill: ${e=>t.getColorRgbaValue(e.theme,"Notification","warning","enabled","icon")};
+      }
+    }
+    & .Toastify__toast--error {
+      & svg {
+        fill: ${e=>t.getColorRgbaValue(e.theme,"Notification","danger","enabled","icon")};
+      }
+    }
+  }
+`,r=C.forwardRef((e,i)=>{const{position:a="top-right",autoClose:n=5e5,hideProgressBar:l=!0,newestOnTop:c=!0,closeOnClick:p=!0,rtl:u=!1,pauseOnFocusLoss:b=!1,draggable:g=!1,pauseOnHover:d=!1,closeButton:f=!0,className:y="",style:m={},toastContainerProps:T,children:O,...h}=e,{theme:P}=R.useTheme(),x={theme:P,className:"lnc-ui-notification "+y,style:m};return s.jsx(v,{ref:i,...x,...h,children:s.jsx(_.ToastContainer,{position:a,autoClose:n,hideProgressBar:l,newestOnTop:c,closeOnClick:p,rtl:u,pauseOnFocusLoss:b,draggable:g,pauseOnHover:d,closeButton:f,className:"lnc-notification",...T})})});r.propTypes={position:o.PropTypes.oneOf(["top-right","top-center","top-left","bottom-right","bottom-center","bottom-left"]),autoClose:o.PropTypes.number,hideProgressBar:o.PropTypes.bool,newestOnTop:o.PropTypes.bool,closeOnClick:o.PropTypes.bool,rtl:o.PropTypes.bool,pauseOnFocusLoss:o.PropTypes.bool,draggable:o.PropTypes.bool,pauseOnHover:o.PropTypes.bool,closeButton:o.PropTypes.bool,className:o.PropTypes.string,style:o.PropTypes.object,toastContainerProps:o.PropTypes.any};module.exports=r;

package/dist/NotificationContainer.js

@@ -0,0 +1,162 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as T } from "react";
+import { P as t } from "./index-BYnWp42a.js";
+import { n as O } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { T as _ } from "./react-toastify.esm-CkXGwKXL.js";
+/* empty css                       */
+import { a as e, b as v } from "./utils-C52T57HO.js";
+import { useTheme as C } from "./ThemeProvider.js";
+const $ = O.div`
+  & .lnc-notification {
+    & > div {
+      background-color: ${(o) => e(
+  o.theme,
+  "Notification",
+  o.color,
+  "enabled",
+  "background",
+  "backgroundOpacity"
+)};
+
+      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+      border: ${(o) => `1px solid ${e(
+  o.theme,
+  "Notification",
+  "default",
+  "enabled",
+  "border"
+)}`};
+      border-radius: ${(o) => v(o.theme, "regular")};
+    }
+    & .Toastify__close-button {
+      & svg {
+        fill: ${(o) => e(
+  o.theme,
+  "Notification",
+  "default",
+  "enabled",
+  "icon"
+)};
+      }
+    }
+    & .Toastify__toast--success {
+      & svg {
+        fill: ${(o) => e(
+  o.theme,
+  "Notification",
+  "success",
+  "enabled",
+  "icon"
+)};
+      }
+    }
+    & .Toastify__toast--information {
+      & svg {
+        fill: ${(o) => e(
+  o.theme,
+  "Notification",
+  "information",
+  "enabled",
+  "icon"
+)};
+      }
+    }
+    & .Toastify__toast--danger {
+      & svg {
+        fill: ${(o) => e(
+  o.theme,
+  "Notification",
+  "warning",
+  "enabled",
+  "icon"
+)};
+      }
+    }
+    & .Toastify__toast--error {
+      & svg {
+        fill: ${(o) => e(
+  o.theme,
+  "Notification",
+  "danger",
+  "enabled",
+  "icon"
+)};
+      }
+    }
+  }
+`, P = T((o, a) => {
+  const {
+    position: s = "top-right",
+    autoClose: n = 5e5,
+    hideProgressBar: r = !0,
+    newestOnTop: l = !0,
+    closeOnClick: c = !0,
+    rtl: f = !1,
+    pauseOnFocusLoss: p = !1,
+    draggable: m = !1,
+    pauseOnHover: b = !1,
+    closeButton: d = !0,
+    className: u = "",
+    style: g = {},
+    toastContainerProps: h,
+    children: w,
+    ...y
+  } = o, { theme: N } = C(), x = {
+    theme: N,
+    className: "lnc-ui-notification " + u,
+    style: g
+  };
+  return /* @__PURE__ */ i($, { ref: a, ...x, ...y, children: /* @__PURE__ */ i(
+    _,
+    {
+      position: s,
+      autoClose: n,
+      hideProgressBar: r,
+      newestOnTop: l,
+      closeOnClick: c,
+      rtl: f,
+      pauseOnFocusLoss: p,
+      draggable: m,
+      pauseOnHover: b,
+      closeButton: d,
+      className: "lnc-notification",
+      ...h
+    }
+  ) });
+});
+P.propTypes = {
+  position: t.oneOf([
+    "top-right",
+    "top-center",
+    "top-left",
+    "bottom-right",
+    "bottom-center",
+    "bottom-left"
+  ]),
+  /**
+   * Value in ms
+   */
+  autoClose: t.number,
+  hideProgressBar: t.bool,
+  newestOnTop: t.bool,
+  closeOnClick: t.bool,
+  /**
+   * Right to Left
+   */
+  rtl: t.bool,
+  pauseOnFocusLoss: t.bool,
+  draggable: t.bool,
+  pauseOnHover: t.bool,
+  closeButton: t.bool,
+  //----------------------------
+  className: t.string,
+  style: t.object,
+  /**
+   * Other react-toastify ToastContainer props.
+   */
+  toastContainerProps: t.any
+};
+export {
+  P as default
+};

package/dist/NotificationMessage.cjs

@@ -0,0 +1,47 @@
+"use strict";const i=require("react/jsx-runtime"),P=require("react"),t=require("./index-BIlhCoy2.cjs"),w=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs");;/* empty css                         */const N=require("./Icon.cjs"),o=require("./utils-DTAPpJXU.cjs"),T=require("./Avatar.cjs"),j=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),v=w.newStyled.div`
+  ${e=>o.getComponentTypographyCss(e.theme,"Notification","small","enabled")};
+
+  word-wrap: break-word;
+  box-sizing: border-box;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+
+  & .notification-actions {
+    align-items: center;
+    ${e=>e.sideButtons&&"margin: -14px"};
+    flex-direction: ${e=>e.sideButtons?"column":"row"};
+    ${e=>e.sideButtons&&"margin-left: auto"};
+    ${e=>e.inlineActions==!1&&e.sideButtons==!1&&"padding-top: 4px"};
+    gap: ${e=>e.sideButtons?"0":"1rem"};
+    display: flex;
+
+    color: ${e=>o.getColorRgbaValue(e.theme,"Notification",e.color,"enabled","action")};
+
+    & > button {
+      ${e=>e.sideButtons&&"flex: 1; width: 100%;"}
+    }
+  }
+  & .notification-main {
+    word-wrap: break-word;
+    box-sizing: border-box;
+    display: flex;
+    gap: 1rem;
+  }
+  & .notification-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    color: ${e=>o.getColorRgbaValue(e.theme,"Notification",e.color,"enabled","text")};
+  }
+  & .notification-icon {
+    align-items: flex-start;
+    & i {
+      font-size: 1.25rem;
+    }
+  }
+  & .notification-title {
+    font-weight: ${e=>o.getComponentPropValue(e.theme,"Notification",e.color,"enabled","fontWeightTitle")};
+    color: ${e=>o.getColorRgbaValue(e.theme,"Notification",e.color,"enabled","title")};
+  }
+`,c=P.forwardRef((e,l)=>{const{title:d,icon:a,className:m,style:p={},size:f="small",avatar:u=!1,actions:r,inlineActions:n=!1,sideButtons:s=!1,iconProps:g,avatarProps:x,children:y,...b}=e,h={theme:j.useTheme(),className:m,style:p,size:f,inlineActions:n,sideButtons:s};return i.jsxs(v,{ref:l,...h,...b,children:[i.jsxs("div",{className:"notification-main",children:[u?i.jsx(T,{sizeInUnits:"2.75rem",...x}):a&&i.jsx(N,{className:"notification-icon",icon:a,...g}),i.jsxs("div",{className:"notification-content",children:[i.jsx("div",{className:"notification-title",children:d}),y,!n&&!s&&i.jsx("div",{className:"notification-actions",children:r})]})]}),(n||s)&&i.jsx("div",{className:"notification-actions",children:r})]})});c.propTypes={avatar:t.PropTypes.bool,title:t.PropTypes.string,icon:t.PropTypes.string,actions:t.PropTypes.element,inlineActions:t.PropTypes.bool,sideButtons:t.PropTypes.bool,className:t.PropTypes.string,style:t.PropTypes.object,iconProps:t.PropTypes.any,avatarProps:t.PropTypes.any};module.exports=c;

package/dist/NotificationMessage.js

@@ -0,0 +1,133 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { P as i } from "./index-BYnWp42a.js";
+import { n as w } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+/* empty css                       */
+import v from "./Icon.js";
+import { g as $, a as s, c as B } from "./utils-C52T57HO.js";
+import P from "./Avatar.js";
+import { u as z } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
+const T = w.div`
+  ${(t) => $(t.theme, "Notification", "small", "enabled")};
+
+  word-wrap: break-word;
+  box-sizing: border-box;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+
+  & .notification-actions {
+    align-items: center;
+    ${(t) => t.sideButtons && "margin: -14px"};
+    flex-direction: ${(t) => t.sideButtons ? "column" : "row"};
+    ${(t) => t.sideButtons && "margin-left: auto"};
+    ${(t) => t.inlineActions == !1 && t.sideButtons == !1 && "padding-top: 4px"};
+    gap: ${(t) => t.sideButtons ? "0" : "1rem"};
+    display: flex;
+
+    color: ${(t) => s(
+  t.theme,
+  "Notification",
+  t.color,
+  "enabled",
+  "action"
+)};
+
+    & > button {
+      ${(t) => t.sideButtons && "flex: 1; width: 100%;"}
+    }
+  }
+  & .notification-main {
+    word-wrap: break-word;
+    box-sizing: border-box;
+    display: flex;
+    gap: 1rem;
+  }
+  & .notification-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    color: ${(t) => s(
+  t.theme,
+  "Notification",
+  t.color,
+  "enabled",
+  "text"
+)};
+  }
+  & .notification-icon {
+    align-items: flex-start;
+    & i {
+      font-size: 1.25rem;
+    }
+  }
+  & .notification-title {
+    font-weight: ${(t) => B(
+  t.theme,
+  "Notification",
+  t.color,
+  "enabled",
+  "fontWeightTitle"
+)};
+    color: ${(t) => s(
+  t.theme,
+  "Notification",
+  t.color,
+  "enabled",
+  "title"
+)};
+  }
+`, j = N((t, c) => {
+  const {
+    title: m,
+    icon: r,
+    className: f,
+    style: d = {},
+    size: p = "small",
+    avatar: g = !1,
+    actions: l,
+    inlineActions: e = !1,
+    sideButtons: n = !1,
+    iconProps: b,
+    avatarProps: h,
+    children: u,
+    ...x
+  } = t, y = {
+    theme: z(),
+    className: f,
+    style: d,
+    size: p,
+    inlineActions: e,
+    sideButtons: n
+  };
+  return /* @__PURE__ */ a(T, { ref: c, ...y, ...x, children: [
+    /* @__PURE__ */ a("div", { className: "notification-main", children: [
+      g ? /* @__PURE__ */ o(P, { sizeInUnits: "2.75rem", ...h }) : r && /* @__PURE__ */ o(v, { className: "notification-icon", icon: r, ...b }),
+      /* @__PURE__ */ a("div", { className: "notification-content", children: [
+        /* @__PURE__ */ o("div", { className: "notification-title", children: m }),
+        u,
+        !e && !n && /* @__PURE__ */ o("div", { className: "notification-actions", children: l })
+      ] })
+    ] }),
+    (e || n) && /* @__PURE__ */ o("div", { className: "notification-actions", children: l })
+  ] });
+});
+j.propTypes = {
+  avatar: i.bool,
+  title: i.string,
+  /**
+   * If `avatar={true}` icon won't be displayed
+   */
+  icon: i.string,
+  actions: i.element,
+  inlineActions: i.bool,
+  sideButtons: i.bool,
+  //-----------------------
+  className: i.string,
+  style: i.object,
+  iconProps: i.any,
+  avatarProps: i.any
+};
+export {
+  j as default
+};

package/dist/NumberInput.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),t=require("./index-DXnSjbfJ.cjs"),l=require("react"),U=require("./index-BjdOz5Ok.cjs"),d=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),n=require("./utils-hdRGTsQ7.cjs"),A=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),B=d.newStyled.div`
+"use strict";const i=require("react/jsx-runtime"),t=require("./index-BIlhCoy2.cjs"),l=require("react"),U=require("./index-DaiUAQVF.cjs"),d=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),n=require("./utils-DTAPpJXU.cjs"),A=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),B=d.newStyled.div`
   display: flex;
   align-items: center;
 

package/dist/NumberInput.js

@@ -1,10 +1,10 @@
 import { jsxs as A, jsx as g } from "react/jsx-runtime";
-import { P as n } from "./index-Ds9PUTwb.js";
+import { P as n } from "./index-BYnWp42a.js";
 import P, { useState as C, useEffect as W, useCallback as G } from "react";
-import { d as M } from "./index-D5vEbKUT.js";
-import { n as i } from "./emotion-styled.browser.esm-BZSYYThs.js";
-import { f as d, b as a, c as U, h as D, g as S, a as X } from "./utils-DEke8iwo.js";
-import { u as q } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+import { d as M } from "./index-CNBqQrtK.js";
+import { n as i } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { d, a, b as U, e as D, h as S, g as X } from "./utils-C52T57HO.js";
+import { u as q } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const H = i.div`
   display: flex;
   align-items: center;

package/dist/PageLayout.cjs

@@ -1,4 +1,4 @@
-"use strict";const x=require("react/jsx-runtime"),a=require("react"),E=require("./index-DXnSjbfJ.cjs"),S=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),c=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),T=S.newStyled.section`
+"use strict";const x=require("react/jsx-runtime"),a=require("react"),E=require("./index-BIlhCoy2.cjs"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),S=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),T=c.newStyled.section`
   display: flex;
   flex: auto;
   flex-direction: ${s=>s.hasSidebar?"row":"column"};
@@ -23,4 +23,4 @@
     flex: 0 0 15rem;
     height: 100%;
   }
-`,u=a.forwardRef((s,f)=>{const{children:o,isChild:h,__TYPE__:C="PageLayout",...p}=s,P=c.useTheme(),g=a.Children.toArray(o).some(e=>{var t;return e.props.__TYPE__||((t=e==null?void 0:e.type)==null?void 0:t.displayName)=="Sidebar"}),m=e=>{let t,i,l;if(a.Children.forEach(e,(r,d)=>{var _,n,y;if(r.props.__TYPE__=="Sidebar"||((_=r==null?void 0:r.type)==null?void 0:_.displayName)==="Sidebar"){if(i)throw"Found multiple ocurrences of Sidebar component on the same level in the component tree.";i=d+1}else if(r.props.__TYPE__=="PageLayout"||((n=r==null?void 0:r.type)==null?void 0:n.displayName)==="PageLayout"){if(t)throw"Found multiple ocurrences of PageLayout component on the same level in the component tree.";t=d+1}else if(r.props.__TYPE__=="Content"||((y=r==null?void 0:r.type)==null?void 0:y.displayName)==="Content"){if(l)throw"Found multiple ocurrences of Content component on the same level in the component tree.";l=d+1}}),t&&i)return i<t?"left":"right";if(l&&i)return i<l?"left":"right"},b=a.Children.map(o,e=>{var t,i;if(a.isValidElement(e)){if(e.props.__TYPE__=="Sidebar"||((t=e.type)==null?void 0:t.displayName)==="Sidebar")return a.cloneElement(e,{placement:m(o)});if(e.props.__TYPE__=="PageLayout"||((i=e.type)==null?void 0:i.displayName)==="PageLayout")return a.cloneElement(e,{isChild:!0})}return e});return x.jsx(T,{isChild:h,hasSidebar:g,theme:P,ref:f,...p,children:b})});u.propTypes={__TYPE__:E.PropTypes.string};u.displayName="PageLayout";module.exports=u;
+`,u=a.forwardRef((s,f)=>{const{children:o,isChild:h,__TYPE__:C="PageLayout",...p}=s,P=S.useTheme(),g=a.Children.toArray(o).some(e=>{var t;return e.props.__TYPE__||((t=e==null?void 0:e.type)==null?void 0:t.displayName)=="Sidebar"}),m=e=>{let t,i,l;if(a.Children.forEach(e,(r,d)=>{var _,n,y;if(r.props.__TYPE__=="Sidebar"||((_=r==null?void 0:r.type)==null?void 0:_.displayName)==="Sidebar"){if(i)throw"Found multiple ocurrences of Sidebar component on the same level in the component tree.";i=d+1}else if(r.props.__TYPE__=="PageLayout"||((n=r==null?void 0:r.type)==null?void 0:n.displayName)==="PageLayout"){if(t)throw"Found multiple ocurrences of PageLayout component on the same level in the component tree.";t=d+1}else if(r.props.__TYPE__=="Content"||((y=r==null?void 0:r.type)==null?void 0:y.displayName)==="Content"){if(l)throw"Found multiple ocurrences of Content component on the same level in the component tree.";l=d+1}}),t&&i)return i<t?"left":"right";if(l&&i)return i<l?"left":"right"},b=a.Children.map(o,e=>{var t,i;if(a.isValidElement(e)){if(e.props.__TYPE__=="Sidebar"||((t=e.type)==null?void 0:t.displayName)==="Sidebar")return a.cloneElement(e,{placement:m(o)});if(e.props.__TYPE__=="PageLayout"||((i=e.type)==null?void 0:i.displayName)==="PageLayout")return React.cloneElement(e,{isChild:!0})}return e});return x.jsx(T,{isChild:h,hasSidebar:g,theme:P,ref:f,...p,children:b})});u.propTypes={__TYPE__:E.PropTypes.string};u.displayName="PageLayout";module.exports=u;

package/dist/PageLayout.js

@@ -1,13 +1,13 @@
 import { jsx as E } from "react/jsx-runtime";
-import i from "react";
-import { P as x } from "./index-Ds9PUTwb.js";
-import { n as S } from "./emotion-styled.browser.esm-BZSYYThs.js";
-import { u as T } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
-const C = S.section`
+import { forwardRef as x, Children as d, isValidElement as S, cloneElement as T } from "react";
+import { P as L } from "./index-BYnWp42a.js";
+import { n as C } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { u as Y } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
+const w = C.section`
   display: flex;
   flex: auto;
-  flex-direction: ${(s) => s.hasSidebar ? "row" : "column"};
-  height: ${(s) => s.isChild ? "100%" : "100dvh"};
+  flex-direction: ${(i) => i.hasSidebar ? "row" : "column"};
+  height: ${(i) => i.isChild ? "100%" : "100dvh"};
 
   * {
     box-sizing: border-box;
@@ -28,53 +28,53 @@ const C = S.section`
     flex: 0 0 15rem;
     height: 100%;
   }
-`, y = i.forwardRef((s, h) => {
-  const { children: o, isChild: n, __TYPE__: L = "PageLayout", ...p } = s, m = T(), P = i.Children.toArray(o).some(
+`, y = x((i, p) => {
+  const { children: l, isChild: h, __TYPE__: N = "PageLayout", ...n } = i, m = Y(), P = d.toArray(l).some(
     (e) => {
       var t;
       return e.props.__TYPE__ || ((t = e == null ? void 0 : e.type) == null ? void 0 : t.displayName) == "Sidebar";
     }
   ), g = (e) => {
-    let t, a, l;
-    if (i.Children.forEach(e, (r, d) => {
+    let t, a, s;
+    if (d.forEach(e, (r, o) => {
       var f, u, _;
       if (r.props.__TYPE__ == "Sidebar" || ((f = r == null ? void 0 : r.type) == null ? void 0 : f.displayName) === "Sidebar") {
         if (a)
           throw "Found multiple ocurrences of Sidebar component on the same level in the component tree.";
-        a = d + 1;
+        a = o + 1;
       } else if (r.props.__TYPE__ == "PageLayout" || ((u = r == null ? void 0 : r.type) == null ? void 0 : u.displayName) === "PageLayout") {
         if (t)
           throw "Found multiple ocurrences of PageLayout component on the same level in the component tree.";
-        t = d + 1;
+        t = o + 1;
       } else if (r.props.__TYPE__ == "Content" || ((_ = r == null ? void 0 : r.type) == null ? void 0 : _.displayName) === "Content") {
-        if (l)
+        if (s)
           throw "Found multiple ocurrences of Content component on the same level in the component tree.";
-        l = d + 1;
+        s = o + 1;
       }
     }), t && a)
       return a < t ? "left" : "right";
-    if (l && a)
-      return a < l ? "left" : "right";
-  }, b = i.Children.map(o, (e) => {
+    if (s && a)
+      return a < s ? "left" : "right";
+  }, b = d.map(l, (e) => {
     var t, a;
-    if (i.isValidElement(e)) {
+    if (S(e)) {
       if (e.props.__TYPE__ == "Sidebar" || ((t = e.type) == null ? void 0 : t.displayName) === "Sidebar")
-        return i.cloneElement(e, {
-          placement: g(o)
+        return T(e, {
+          placement: g(l)
         });
       if (e.props.__TYPE__ == "PageLayout" || ((a = e.type) == null ? void 0 : a.displayName) === "PageLayout")
-        return i.cloneElement(e, { isChild: !0 });
+        return React.cloneElement(e, { isChild: !0 });
     }
     return e;
   });
   return /* @__PURE__ */ E(
-    C,
+    w,
     {
-      isChild: n,
+      isChild: h,
       hasSidebar: P,
       theme: m,
-      ref: h,
-      ...p,
+      ref: p,
+      ...n,
       children: b
     }
   );
@@ -84,7 +84,7 @@ y.propTypes = {
    * Do not override this property.
    * Should only be used as indicator for type if you are passing custom component.
    */
-  __TYPE__: x.string
+  __TYPE__: L.string
 };
 y.displayName = "PageLayout";
 export {

package/dist/Pagination.cjs

@@ -0,0 +1,12 @@
+"use strict";const o=require("react/jsx-runtime"),E=require("react"),t=require("./index-BIlhCoy2.cjs"),P=require("./Button.cjs"),b=require("./IconButton.cjs"),_=require("./ButtonGroup.cjs"),C=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),G=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),w=require("./useUpdateEffect-BtMgpgIV.cjs"),U=C.newStyled.div`
+  display: inline-flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 0.375rem;
+  justify-content: ${u=>u.horizontalAlignment};
+`,$=C.newStyled.div`
+  & > .button-group-pagination-lnc {
+    width: 100%;
+    justify-content: ${u=>u.horizontalAlignment};
+  }
+`,O=u=>{const{icons:d={},borderRadius:c="regular",currentPage:f=1,buttonType:q="outline",currentPageButtonType:B="tinted",withFirstLast:m=!0,withButtonGroup:N=!0,disabledNext:v=!1,disabledPrevious:k=!1,disabledFirst:S=!1,disabledLast:z=!1,disabled:i=!1,totalNumberOfPages:g=1,pagesOffset:y=0,horizontalAlignment:T="left",onPageChange:L=()=>{},className:h="",style:x={},color:R="primary",size:F="small"}=u,l={theme:G.useTheme(),size:F,color:R,btnType:q},[s,a]=E.useState(f);w.useUpdateEffect(()=>{a(f)},[f]),w.useUpdateEffect(()=>{L(s)},[s]);const p=(r,e)=>{e=="next"&&s<g?a(s+1):e=="previous"&&s>1?a(s-1):e=="last"&&s!=g?a(g):e=="first"&&s!=1?a(1):isNaN(+e)||a(e)},A=()=>{let r=[];for(let e=s-y>0?s-y:1;e<s&&e>0;e++)r.push(o.jsx(P,{...l,borderRadius:c,onClick:n=>p(n,e),btnType:"basic",text:e.toString(),disabled:i},e));r.push(o.jsx(P,{...l,borderRadius:c,btnType:B,text:s.toString(),disabled:i},s));for(let e=s+1;e<=s+y&&e<=g;e++)r.push(o.jsx(P,{...l,borderRadius:c,onClick:n=>p(n,e),btnType:"basic",text:e.toString(),disabled:i},e));return r},j=(r=null)=>{var e={};return r&&(e.borderRadius=r),o.jsxs(o.Fragment,{children:[m&&o.jsx(b,{...l,icon:d.doubleLeft||"angle-double-left",disabled:S||i,onClick:n=>p(n,"first"),...e}),o.jsx(b,{...l,icon:d.left||"angle-left",disabled:k||i,onClick:n=>p(n,"previous"),...e}),A(),o.jsx(b,{...l,icon:d.right||"angle-right",disabled:v||i,onClick:n=>p(n,"next"),...e}),m&&o.jsx(b,{...l,icon:d.doubleRight||"angle-double-right",disabled:z||i,onClick:n=>p(n,"last"),...e})]})};return N?o.jsx($,{horizontalAlignment:T,children:o.jsx(_,{className:"button-group-pagination-lnc "+h,style:x,borderRadius:c,children:j()})}):o.jsx(U,{horizontalAlignment:T,className:h,style:x,children:j(c)})};O.propTypes={icons:t.PropTypes.shape({left:t.PropTypes.element,right:t.PropTypes.element,doubleLeft:t.PropTypes.element,doubleRight:t.PropTypes.element}),disabled:t.PropTypes.bool,borderRadius:t.PropTypes.oneOf(["slight","regular","edged","curved","none"]),buttonType:t.PropTypes.oneOf(["filled","tinted","outline","basic"]),currentPageButtonType:t.PropTypes.oneOf(["filled","tinted","outline","basic"]),withFirstLast:t.PropTypes.bool,withButtonGroup:t.PropTypes.bool,currentPage:t.PropTypes.number,totalNumberOfPages:t.PropTypes.number,pagesOffset:t.PropTypes.number,disabledNext:t.PropTypes.bool,disabledPrevious:t.PropTypes.bool,disabledFirst:t.PropTypes.bool,disabledLast:t.PropTypes.bool,horizontalAlignment:t.PropTypes.oneOf(["left","center","right"]),onPageChange:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};module.exports=O;