@lanaco/lnc-react-ui 4.0.206 → 4.0.207

package/BREAKPOINTS.md

@@ -0,0 +1,148 @@
+# Breakpoint System
+
+Unified responsive design system for consistent layouts across all screen sizes.
+
+## Breakpoint Ranges
+
+| Key | Width | Typical Devices |
+|-----|-------|-----------------|
+| **XS** | 0–480px | Phones portrait |
+| **S**  | 481–767px | Phones landscape / large phones |
+| **M**  | 768–1024px | Tablets |
+| **L**  | 1025–1280px | Laptops / small desktops |
+| **XL** | 1281px+ | Large desktops |
+
+## Media Query Helpers
+
+### `up(key)` — "this breakpoint and larger"
+
+```js
+import { up } from "@lanaco/lnc-react-ui";
+
+// Show on tablet and up
+@media ${up("M")} {
+  /* min-width: 768px */
+}
+```
+
+### `down(key)` — "this breakpoint and smaller"
+
+```js
+import { down } from "@lanaco/lnc-react-ui";
+
+// Mobile only
+@media ${down("S")} {
+  /* max-width: 767px */
+}
+```
+
+### `only(key)` — "exactly this breakpoint"
+
+```js
+import { only } from "@lanaco/lnc-react-ui";
+
+// Tablet only
+@media ${only("M")} {
+  /* min-width: 768px and max-width: 1024px */
+}
+```
+
+### `between(start, end)` — "range between two breakpoints"
+
+```js
+import { between } from "@lanaco/lnc-react-ui";
+
+// Tablet and laptop
+@media ${between("M", "L")} {
+  /* min-width: 768px and max-width: 1280px */
+}
+```
+
+## Raw Values
+
+```js
+import { screenSizes, MOBILE_SIZE_PX, SMALL_MOBILE_SIZE_PX } from "@lanaco/lnc-react-ui";
+
+// In styled-components
+@media (max-width: ${screenSizes.S.max}px) { }
+@media (max-width: ${MOBILE_SIZE_PX}px) { }      // 767 — mobile = XS + S
+@media (max-width: ${SMALL_MOBILE_SIZE_PX}px) { } // 480 — small phones
+```
+
+## Via Theme
+
+When using `ThemeProvider`, breakpoints are available on the theme:
+
+```js
+import { useTheme } from "@lanaco/lnc-react-ui";
+
+const MyComponent = () => {
+  const { theme } = useTheme();
+
+  return (
+    <div
+      css={{
+        padding: 16,
+        [theme.breakpoints.down("S")]: { padding: 8 },
+      }}
+    />
+  );
+};
+```
+
+## Hooks
+
+### `useScreenSize()` — Current breakpoint
+
+Returns `"XS"`, `"S"`, `"M"`, `"L"`, or `"XL"` based on viewport width.
+
+```js
+import { useScreenSize } from "@lanaco/lnc-react-ui";
+
+const size = useScreenSize(); // "M"
+```
+
+### `useIsMobile()` — Semantic mobile check
+
+Returns `true` for XS and S (phones).
+
+```js
+import { useIsMobile } from "@lanaco/lnc-react-ui";
+
+const isMobile = useIsMobile(); // true on phones
+```
+
+### `useDetectMobile()` — Width-based mobile check
+
+Returns `true` when viewport width ≤ 767px. Same cutoff as `useIsMobile` but uses `window.innerWidth`.
+
+```js
+import { useDetectMobile } from "@lanaco/lnc-react-ui";
+
+const isMobile = useDetectMobile();
+```
+
+**When to use which:**
+- **useScreenSize** — When you need the exact breakpoint (e.g. Table VisibilityPattern, FlexGridItem columns)
+- **useIsMobile** — When you need "mobile vs desktop" logic; uses media queries (matches `useMedia`)
+- **useDetectMobile** — When you need the same boolean but prefer window resize; useful for components that already use it
+
+## Semantic Helpers
+
+```js
+import { isMobile, isTablet, isDesktop } from "@lanaco/lnc-react-ui";
+
+const size = useScreenSize();
+if (isMobile(size)) { /* XS or S */ }
+if (isTablet(size)) { /* M */ }
+if (isDesktop(size)) { /* L or XL */ }
+```
+
+## Constants
+
+| Export | Value | Description |
+|--------|-------|-------------|
+| `MOBILE_SIZE_PX` | 767 | Max width for mobile (S.max) |
+| `SMALL_MOBILE_SIZE_PX` | 480 | Max width for small phones (XS.max) |
+| `BREAKPOINT_ORDER` | `["XS","S","M","L","XL"]` | Ordered breakpoint keys |
+| `DEVICE_CATEGORIES` | `{ mobile, tablet, desktop }` | Semantic groupings |

package/dist/Accordion.cjs

@@ -1,4 +1,4 @@
-"use strict";const b=require("react/jsx-runtime"),s=require("react"),R=require("./emotion-styled.browser.esm-BtEseadx.cjs"),c=require("./utils-RnrgDDZP.cjs"),S=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=require("./useUpdateEffect-BtMgpgIV.cjs"),D=R.styled.div`
+"use strict";const b=require("react/jsx-runtime"),s=require("react"),R=require("./emotion-styled.browser.esm-BtEseadx.cjs"),c=require("./utils-CITgSxXe.cjs"),S=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=require("./useUpdateEffect-BtMgpgIV.cjs"),D=R.styled.div`
   color: ${t=>!t.disabled&&c.getColorRgbaValue(t.theme,"Accordion","primary","enabled","text")};
   background-color: transparent;
   ${t=>c.getComponentTypographyCss(t.theme,"Accordion",t.size,"enabled")};

package/dist/Accordion.js

@@ -1,7 +1,7 @@
 import { jsxs as D } from "react/jsx-runtime";
-import { forwardRef as N, useState as O, Children as c, isValidElement as i, cloneElement as l } from "react";
+import { forwardRef as N, useState as O, Children as i, isValidElement as c, cloneElement as l } from "react";
 import { s as R } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as S, c as g, h as x } from "./utils-DtEfC-TX.js";
+import { c as S, d as g, i as x } from "./utils-B2fsQ6PS.js";
 import { u as I } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import { u as T } from "./useUpdateEffect-CuYWz7EA.js";
 const M = R.div`
@@ -31,9 +31,9 @@ const M = R.div`
   }, [a]);
   const p = (e) => {
     u(!o, e), d(!o);
-  }, E = c.map(m, (e) => {
+  }, E = i.map(m, (e) => {
     var s;
-    if (i(e) && (e.props.__TYPE__ == "ACCORDION_SUMMARY" || ((s = e == null ? void 0 : e.type) == null ? void 0 : s.displayName) === "ACCORDION_SUMMARY"))
+    if (c(e) && (e.props.__TYPE__ == "ACCORDION_SUMMARY" || ((s = e == null ? void 0 : e.type) == null ? void 0 : s.displayName) === "ACCORDION_SUMMARY"))
       return l(e, {
         size: r,
         onClick: p,
@@ -41,9 +41,9 @@ const M = R.div`
         isExpanded: o,
         disabled: n
       });
-  }), b = c.map(m, (e) => {
+  }), b = i.map(m, (e) => {
     var s;
-    if (i(e) && (e.props.__TYPE__ == "ACCORDION_DETAILS" || ((s = e == null ? void 0 : e.type) == null ? void 0 : s.displayName) === "ACCORDION_DETAILS"))
+    if (c(e) && (e.props.__TYPE__ == "ACCORDION_DETAILS" || ((s = e == null ? void 0 : e.type) == null ? void 0 : s.displayName) === "ACCORDION_DETAILS"))
       return l(e, {
         size: r,
         isExpanded: o

package/dist/AccordionSummary.cjs

@@ -1,4 +1,4 @@
-"use strict";const s=require("react/jsx-runtime"),f=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),b=require("./Icon.cjs"),g=require("./utils-RnrgDDZP.cjs"),q=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),C={small:"0.6rem 1rem",medium:"0.8rem 1.25rem",large:"1rem 1.5rem"},R=h.styled.div`
+"use strict";const s=require("react/jsx-runtime"),f=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),b=require("./Icon.cjs"),g=require("./utils-CITgSxXe.cjs"),q=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),C={small:"0.6rem 1rem",medium:"0.8rem 1.25rem",large:"1rem 1.5rem"},R=h.styled.div`
   display: flex;
   justify-content: space-between;
   cursor: pointer;

package/dist/AccordionSummary.js

@@ -2,13 +2,13 @@ import { jsxs as f, jsx as u } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
 import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import x from "./Icon.js";
-import { b as C } from "./utils-DtEfC-TX.js";
+import { c as C } from "./utils-B2fsQ6PS.js";
 import { u as g } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const b = {
+const A = {
   small: "0.6rem 1rem",
   medium: "0.8rem 1.25rem",
   large: "1rem 1.5rem"
-}, A = h.div`
+}, N = h.div`
   display: flex;
   justify-content: space-between;
   cursor: pointer;
@@ -20,12 +20,12 @@ const b = {
   "summaryText"
 )};
 
-  padding: ${(e) => b[e.size]};
+  padding: ${(e) => A[e.size]};
   & .accordion-icon-lnc {
     transform: ${(e) => e.isExpanded ? "rotate(180deg)" : "rotate(0)"};
     transition: transform 0.25s ease;
   }
-`, N = y((e, r) => {
+`, b = y((e, r) => {
   const {
     disabled: s,
     isExpanded: n,
@@ -39,7 +39,7 @@ const b = {
     ...d
   } = e, p = { theme: g(), size: t, style: c, className: i };
   return /* @__PURE__ */ f(
-    A,
+    N,
     {
       ref: r,
       ...p,
@@ -62,7 +62,7 @@ const b = {
     }
   );
 });
-N.displayName = "ACCORDION_SUMMARY";
+b.displayName = "ACCORDION_SUMMARY";
 export {
-  N as default
+  b as default
 };

package/dist/ActionsToolbar.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),B=require("react"),L=require("./emotion-styled.browser.esm-BtEseadx.cjs"),V=require("./DropdownMenu.cjs"),s=require("./DropdownItem.cjs"),M=require("./Separator.cjs"),d=require("./Button.cjs"),b=require("./utils-RnrgDDZP.cjs"),Z=require("./ThemeProvider.cjs"),F=L.styled.div`
+"use strict";const e=require("react/jsx-runtime"),B=require("react"),L=require("./emotion-styled.browser.esm-BtEseadx.cjs"),V=require("./DropdownMenu.cjs"),s=require("./DropdownItem.cjs"),M=require("./Separator.cjs"),c=require("./Button.cjs"),p=require("./utils-CITgSxXe.cjs"),Z=require("./ThemeProvider.cjs"),F=require("./breakpoints-CcVm-gVm.cjs"),G=L.styled.div`
   display: flex;
   align-items: center;
   border-radius: 8px;
@@ -7,12 +7,23 @@
   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")}`};
+  background-color: ${t=>p.getColorRgbaValue(t.theme,"Toolbar",t.color,"enabled","background","backgroundOpacity")};
+  border: ${t=>`1px solid ${p.getColorRgbaValue(t.theme,"Toolbar",t.color,"enabled","border","borderOpacity")}`};
   gap: 6px;
   justify-content: space-between;
+  flex-wrap: wrap;
   & > div {
     display: flex;
     gap: 0.5rem;
+    flex-wrap: wrap;
   }
-`,u=B.forwardRef((t,p)=>{const{showCreate:x=!0,enableCreate:m=!0,createText:c="Create new item",showEdit:y=!0,enableEditOnSelection:h=!0,editText:w="Edit",showDelete:g=!0,enableDeleteOnSelection:C=!0,deleteText:f="Delete",showCopy:T=!0,enableCopyOnSelection:j=!0,copyText:O="Copy",actionsText:q="Actions",customActions:i,selectedRowsLength:n=0,readOnly:r=!1,actionDropdownProps:D,actionsDropdownZIndex:S,actionsDropdownPlacement:k,onCreate:R=()=>{},onEdit:v=()=>{},onDelete:I=()=>{},onCopy:N=()=>{},className:A="",style:E={},color:l="primary",size:a="small",selectedRows:$,...z}=t,{theme:P}=Z.useTheme();return e.jsxs(F,{ref:p,theme:P,color:l,className:`lnc-table-view-actions-toolbar ${A}`,style:E,...z,children:[e.jsx("div",{children:x&&r==!1&&e.jsx(d,{leadingIcon:"plus",btnType:"outline",type:"button",color:l,size:a,title:c,disabled:!m,onClick:R,text:c})}),e.jsx("div",{children:e.jsxs(V,{className:"lnc-table-view-actions-toolbar-dropdown",color:l,size:a,zIndex:S,placement:k,...D,control:e.jsx(d,{text:q,btnType:"outline",trailingIcon:"angle-down",color:l,size:a,type:"button"}),children:[T&&r==!1&&e.jsx(s,{icon:"copy",disabled:!(j&&n>0),onClick:N,children:O}),y&&r==!1&&e.jsx(s,{icon:"pen",disabled:!(h&&n>0),onClick:v,children:w}),g&&r==!1&&e.jsx(s,{icon:"trash",disabled:!(C&&n>0),onClick:I,children:f}),e.jsx(M,{}),i==null?void 0:i.map((o,_)=>{if((o==null?void 0:o.show)!=!1)return e.jsx(s,{icon:o.icon,disabled:!(o.enableOnSelection==!0&&n>0||o.enable==!0&&o.enableOnSelection==!1),onClick:()=>{o.onAction($)},children:o.name},_)})]})})]})});u.displayName="ACTIONS_TOOLBAR";module.exports=u;
+
+  @media ${F.down("S")} {
+    gap: 4px;
+    padding: 4px;
+    margin-bottom: 8px;
+    & > div {
+      gap: 0.25rem;
+    }
+  }
+`,b=B.forwardRef((t,u)=>{const{showCreate:x=!0,enableCreate:m=!0,createText:d="Create new item",showEdit:w=!0,enableEditOnSelection:g=!0,editText:y="Edit",showDelete:h=!0,enableDeleteOnSelection:f=!0,deleteText:C="Delete",showCopy:T=!0,enableCopyOnSelection:j=!0,copyText:O="Copy",actionsText:q="Actions",customActions:a,selectedRowsLength:n=0,readOnly:r=!1,actionDropdownProps:S,actionsDropdownZIndex:k,actionsDropdownPlacement:D,onCreate:v=()=>{},onEdit:R=()=>{},onDelete:I=()=>{},onCopy:N=()=>{},className:$="",style:A={},color:l="primary",size:i="small",selectedRows:E,...z}=t,{theme:P}=Z.useTheme();return e.jsxs(G,{ref:u,theme:P,color:l,className:`lnc-table-view-actions-toolbar ${$}`,style:A,...z,children:[e.jsx("div",{children:x&&r==!1&&e.jsx(c,{leadingIcon:"plus",btnType:"outline",type:"button",color:l,size:i,title:d,disabled:!m,onClick:v,text:d})}),e.jsx("div",{children:e.jsxs(V,{className:"lnc-table-view-actions-toolbar-dropdown",color:l,size:i,zIndex:k,placement:D,...S,control:e.jsx(c,{text:q,btnType:"outline",trailingIcon:"angle-down",color:l,size:i,type:"button"}),children:[T&&r==!1&&e.jsx(s,{icon:"copy",disabled:!(j&&n>0),onClick:N,children:O}),w&&r==!1&&e.jsx(s,{icon:"pen",disabled:!(g&&n>0),onClick:R,children:y}),h&&r==!1&&e.jsx(s,{icon:"trash",disabled:!(f&&n>0),onClick:I,children:C}),e.jsx(M,{}),a==null?void 0:a.map((o,_)=>{if((o==null?void 0:o.show)!=!1)return e.jsx(s,{icon:o.icon,disabled:!(o.enableOnSelection==!0&&n>0||o.enable==!0&&o.enableOnSelection==!1),onClick:()=>{o.onAction(E)},children:o.name},_)})]})})]})});b.displayName="ACTIONS_TOOLBAR";module.exports=b;

package/dist/ActionsToolbar.js

@@ -1,13 +1,14 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import { forwardRef as M } from "react";
 import { s as V } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import Z from "./DropdownMenu.js";
 import a from "./DropdownItem.js";
 import _ from "./Separator.js";
-import p from "./Button.js";
-import { b } from "./utils-DtEfC-TX.js";
+import c from "./Button.js";
+import { c as m } from "./utils-B2fsQ6PS.js";
 import { useTheme as q } from "./ThemeProvider.js";
-const F = V.div`
+import { d as F } from "./breakpoints-ff0SIcV3.js";
+const G = V.div`
   display: flex;
   align-items: center;
   border-radius: 8px;
@@ -16,7 +17,7 @@ const F = V.div`
   font-weight: 700;
   font-size: 0.875rem;
   color: rgba(15, 23, 42, 100%);
-  background-color: ${(t) => b(
+  background-color: ${(t) => m(
   t.theme,
   "Toolbar",
   t.color,
@@ -24,7 +25,7 @@ const F = V.div`
   "background",
   "backgroundOpacity"
 )};
-  border: ${(t) => `1px solid ${b(
+  border: ${(t) => `1px solid ${m(
   t.theme,
   "Toolbar",
   t.color,
@@ -34,29 +35,40 @@ const F = V.div`
 )}`};
   gap: 6px;
   justify-content: space-between;
+  flex-wrap: wrap;
   & > div {
     display: flex;
     gap: 0.5rem;
+    flex-wrap: wrap;
   }
-`, G = M((t, m) => {
+
+  @media ${F("S")} {
+    gap: 4px;
+    padding: 4px;
+    margin-bottom: 8px;
+    & > div {
+      gap: 0.25rem;
+    }
+  }
+`, H = M((t, b) => {
   const {
-    showCreate: u = !0,
-    enableCreate: f = !0,
+    showCreate: f = !0,
+    enableCreate: u = !0,
     createText: s = "Create new item",
-    showEdit: y = !0,
-    enableEditOnSelection: h = !0,
-    editText: w = "Edit",
-    showDelete: x = !0,
-    enableDeleteOnSelection: g = !0,
+    showEdit: w = !0,
+    enableEditOnSelection: x = !0,
+    editText: y = "Edit",
+    showDelete: g = !0,
+    enableDeleteOnSelection: h = !0,
     deleteText: C = "Delete",
     showCopy: T = !0,
     enableCopyOnSelection: O = !0,
     copyText: D = "Copy",
-    actionsText: k = "Actions",
+    actionsText: S = "Actions",
     customActions: i,
     selectedRowsLength: r = 0,
-    readOnly: l = !1,
-    actionDropdownProps: S,
+    readOnly: n = !1,
+    actionDropdownProps: k,
     actionsDropdownZIndex: v,
     actionsDropdownPlacement: I,
     //----------------
@@ -64,86 +76,86 @@ const F = V.div`
     },
     onEdit: R = () => {
     },
-    onDelete: A = () => {
+    onDelete: $ = () => {
     },
-    onCopy: E = () => {
+    onCopy: A = () => {
     },
-    className: $ = "",
+    className: E = "",
     style: j = {},
-    color: n = "primary",
+    color: l = "primary",
     size: d = "small",
     selectedRows: z,
     ...B
   } = t, { theme: L } = q();
-  return /* @__PURE__ */ c(
-    F,
+  return /* @__PURE__ */ p(
+    G,
     {
-      ref: m,
+      ref: b,
       theme: L,
-      color: n,
-      className: `lnc-table-view-actions-toolbar ${$}`,
+      color: l,
+      className: `lnc-table-view-actions-toolbar ${E}`,
       style: j,
       ...B,
       children: [
-        /* @__PURE__ */ o("div", { children: u && l == !1 && /* @__PURE__ */ o(
-          p,
+        /* @__PURE__ */ o("div", { children: f && n == !1 && /* @__PURE__ */ o(
+          c,
           {
             leadingIcon: "plus",
             btnType: "outline",
             type: "button",
-            color: n,
+            color: l,
             size: d,
             title: s,
-            disabled: !f,
+            disabled: !u,
             onClick: N,
             text: s
           }
         ) }),
-        /* @__PURE__ */ o("div", { children: /* @__PURE__ */ c(
+        /* @__PURE__ */ o("div", { children: /* @__PURE__ */ p(
           Z,
           {
             className: "lnc-table-view-actions-toolbar-dropdown",
-            color: n,
+            color: l,
             size: d,
             zIndex: v,
             placement: I,
-            ...S,
+            ...k,
             control: /* @__PURE__ */ o(
-              p,
+              c,
               {
-                text: k,
+                text: S,
                 btnType: "outline",
                 trailingIcon: "angle-down",
-                color: n,
+                color: l,
                 size: d,
                 type: "button"
               }
             ),
             children: [
-              T && l == !1 && /* @__PURE__ */ o(
+              T && n == !1 && /* @__PURE__ */ o(
                 a,
                 {
                   icon: "copy",
                   disabled: !(O && r > 0),
-                  onClick: E,
+                  onClick: A,
                   children: D
                 }
               ),
-              y && l == !1 && /* @__PURE__ */ o(
+              w && n == !1 && /* @__PURE__ */ o(
                 a,
                 {
                   icon: "pen",
-                  disabled: !(h && r > 0),
+                  disabled: !(x && r > 0),
                   onClick: R,
-                  children: w
+                  children: y
                 }
               ),
-              x && l == !1 && /* @__PURE__ */ o(
+              g && n == !1 && /* @__PURE__ */ o(
                 a,
                 {
                   icon: "trash",
-                  disabled: !(g && r > 0),
-                  onClick: A,
+                  disabled: !(h && r > 0),
+                  onClick: $,
                   children: C
                 }
               ),
@@ -170,7 +182,7 @@ const F = V.div`
     }
   );
 });
-G.displayName = "ACTIONS_TOOLBAR";
+H.displayName = "ACTIONS_TOOLBAR";
 export {
-  G as default
+  H as default
 };

package/dist/AdBannerSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),a=require("react"),c=require("./useDetectMobile-zkbzoOGV.cjs"),o=require("./emotion-styled.browser.esm-BtEseadx.cjs"),m=require("./consts-goSZX3xP.cjs"),d=o.styled.div`
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),c=require("./useDetectMobile-DYV6V1yw.cjs"),o=require("./emotion-styled.browser.esm-BtEseadx.cjs"),m=require("./breakpoints-CcVm-gVm.cjs"),d=o.styled.div`
   width: 100%;
   height: 100%;
   max-width: 60.625rem;
@@ -15,7 +15,7 @@
     cursor: pointer;
   }
 
-  @media (max-width: ${m.MOBILE_SIZE_PX+"px"}) {
+  @media ${m.down("S")} {
     width: 100%;
     height: 100%;
     max-width: 100%;
@@ -30,8 +30,8 @@
       aspect-ratio: 1 / 1;
     }
   }
-`,x=a.forwardRef(({image:i,imageForMobile:r,isMobile:s,onSelectCard:e},h)=>t.jsx(d,{ref:h,children:t.jsx("img",{src:s?r:i,className:"wrapper__image",onClick:e})})),p=o.styled.div`
+`,p=a.forwardRef(({image:i,imageForMobile:r,isMobile:s,onSelectCard:e},h)=>t.jsx(d,{ref:h,children:t.jsx("img",{src:s?r:i,className:"wrapper__image",onClick:e})})),w=o.styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
-`,w=a.forwardRef(({image:i,imageForMobile:r,link:s,onSelectCard:e=()=>{}},h)=>{const n=c.useDetectMobile();return t.jsx(p,{ref:h,children:t.jsx(x,{image:i,imageForMobile:r,isMobile:n,onSelectCard:()=>e==null?void 0:e(s)})})});module.exports=w;
+`,x=a.forwardRef(({image:i,imageForMobile:r,link:s,onSelectCard:e=()=>{}},h)=>{const n=c.useDetectMobile();return t.jsx(w,{ref:h,children:t.jsx(p,{image:i,imageForMobile:r,isMobile:n,onSelectCard:()=>e==null?void 0:e(s)})})});module.exports=x;

package/dist/AdBannerSection.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { u as p } from "./useDetectMobile-Bkvj0VMa.js";
+import { u as p } from "./useDetectMobile-CcVo3PNi.js";
 import { s as o } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as d } from "./consts-BuFChS64.js";
+import { d } from "./breakpoints-ff0SIcV3.js";
 const n = o.div`
   width: 100%;
   height: 100%;
@@ -20,7 +20,7 @@ const n = o.div`
     cursor: pointer;
   }
 
-  @media (max-width: ${d + "px"}) {
+  @media ${d("S")} {
     width: 100%;
     height: 100%;
     max-width: 100%;
@@ -48,7 +48,7 @@ const n = o.div`
   display: flex;
   justify-content: center;
   width: 100%;
-`, u = m(
+`, _ = m(
   ({ image: e, imageForMobile: r, link: a, onSelectCard: i = () => {
   } }, h) => {
     const s = p();
@@ -64,5 +64,5 @@ const n = o.div`
   }
 );
 export {
-  u as default
+  _ as default
 };

package/dist/Alert.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),c=require("react"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),p=require("./ThemeProvider.cjs"),r=require("./utils-RnrgDDZP.cjs"),a=require("./Icon.cjs"),y=x.styled.div`
+"use strict";const t=require("react/jsx-runtime"),c=require("react"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),p=require("./ThemeProvider.cjs"),r=require("./utils-CITgSxXe.cjs"),a=require("./Icon.cjs"),y=x.styled.div`
   min-height: 3rem;
   ${e=>r.getComponentTypographyCss(e.theme,"Alert",e.size,"enabled")};
   line-height: 1.25rem;

package/dist/Alert.js

@@ -2,7 +2,7 @@ import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import { forwardRef as u, cloneElement as x } from "react";
 import { s as y } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { useTheme as w } from "./ThemeProvider.js";
-import { c as A, a as N, b as t, g as c } from "./utils-DtEfC-TX.js";
+import { d as A, b as N, c as t, g as c } from "./utils-B2fsQ6PS.js";
 import m from "./Icon.js";
 const $ = y.div`
   min-height: 3rem;

package/dist/Avatar.cjs

@@ -1,4 +1,4 @@
-"use strict";const s=require("react/jsx-runtime"),b=require("react"),I=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./utils-RnrgDDZP.cjs"),$=require("./Icon.cjs"),w=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=I.styled.div`
+"use strict";const s=require("react/jsx-runtime"),b=require("react"),I=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./utils-CITgSxXe.cjs"),$=require("./Icon.cjs"),w=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=I.styled.div`
   border-radius: ${e=>t.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
   color: white;
   display: inline-flex;

package/dist/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as U } from "react";
 import { s as I } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { a as b, d as t, h as $, b as v } from "./utils-DtEfC-TX.js";
+import { b, e as i, i as $, c as v } from "./utils-B2fsQ6PS.js";
 import y from "./Icon.js";
 import { u as w } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const R = I.div`
@@ -10,25 +10,25 @@ const R = I.div`
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  height: ${(e) => e.sizeInUnits ? e.sizeInUnits : t(e.theme, e.size)};
-  width: ${(e) => e.sizeInUnits ? e.sizeInUnits : t(e.theme, e.size)};
+  height: ${(e) => e.sizeInUnits ? e.sizeInUnits : i(e.theme, e.size)};
+  width: ${(e) => e.sizeInUnits ? e.sizeInUnits : i(e.theme, e.size)};
   ${(e) => e.disabled === !0 && $(e.theme)};
   background-color: ${(e) => !e.disabled && v(e.theme, "Chip", e.color, "enabled", "text")};
   overflow: hidden;
   & img {
-    height: ${(e) => e.sizeInUnits ? e.sizeInUnits : t(e.theme, e.size)};
-    width: ${(e) => e.sizeInUnits ? e.sizeInUnits : t(e.theme, e.size)};
+    height: ${(e) => e.sizeInUnits ? e.sizeInUnits : i(e.theme, e.size)};
+    width: ${(e) => e.sizeInUnits ? e.sizeInUnits : i(e.theme, e.size)};
   }
 `, B = U((e, r) => {
   const {
     image: n,
     icon: l = "user",
-    sizeInUnits: i,
+    sizeInUnits: t,
     borderRadius: m = "curved",
     //----------------
-    onFocus: d = () => {
+    onFocus: o = () => {
     },
-    onBlur: o = () => {
+    onBlur: d = () => {
     },
     onClick: c = () => {
     },
@@ -43,7 +43,7 @@ const R = I.div`
     color: h,
     style: z,
     size: a,
-    sizeInUnits: i,
+    sizeInUnits: t,
     className: "lnc-ui-avatar " + u
   };
   return /* @__PURE__ */ s(
@@ -53,15 +53,15 @@ const R = I.div`
       ...g,
       borderRadius: m,
       onClick: c,
-      onFocus: d,
-      onBlur: o,
+      onFocus: o,
+      onBlur: d,
       ...f,
       children: n ? /* @__PURE__ */ s("img", { src: n }) : /* @__PURE__ */ s(
         y,
         {
           icon: l,
           size: a,
-          sizeInUnits: i ? `calc(${i} / 2)` : null
+          sizeInUnits: t ? `calc(${t} / 2)` : null
         }
       )
     }

package/dist/Badge.cjs

@@ -1,4 +1,4 @@
-"use strict";const h=require("react/jsx-runtime"),b=require("react"),y=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./utils-RnrgDDZP.cjs"),z=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),t=e=>e=="large"?"2rem":e=="medium"?"1.75rem":"1.5rem",R=y.styled.div`
+"use strict";const h=require("react/jsx-runtime"),b=require("react"),y=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./utils-CITgSxXe.cjs"),z=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),t=e=>e=="large"?"2rem":e=="medium"?"1.75rem":"1.5rem",R=y.styled.div`
   ${e=>r.getComponentTypographyCss(e.theme,"Badge",e.size,"enabled")};
   background-color: ${e=>r.getColorRgbaValue(e.theme,"Badge",e.color,"enabled","background","backgroundOpacity")};
   color: ${e=>r.getColorRgbaValue(e.theme,"Badge",e.color,"enabled","text")};