@ttoss/layouts 0.4.36 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # @ttoss/layouts
 
-**@ttoss/layouts** is a collection of React components that implement the layouts to use in your application.
+Professional layout components for React applications with responsive design and accessibility built-in.
 
 ## Installation
 
@@ -8,51 +8,166 @@
 pnpm add @ttoss/layouts @ttoss/ui @emotion/react
 ```
 
-## Quickstart
+## Available Layouts
 
-Use a layout as `StackedLayout` to add specific layout to your application:
+### StackedLayout - Simple Vertical Layout
+
+Perfect for traditional websites with header, main content, and footer.
 
 ```tsx
 import { Layout, StackedLayout } from '@ttoss/layouts';
 
 const App = () => (
   <StackedLayout>
-    <Layout.Header>Header</Layout.Header>
-    <Layout.Main>Main</Layout.Main>
-    <Layout.Footer>Footer</Layout.Footer>
+    <Layout.Header>Navigation & Branding</Layout.Header>
+    <Layout.Main>Page Content</Layout.Main>
+    <Layout.Footer>Copyright & Links</Layout.Footer>
   </StackedLayout>
 );
 ```
 
-## Layouts
+### SidebarCollapseLayout - Dashboard & Admin Interfaces
+
+Responsive sidebar that collapses on mobile, perfect for dashboards and admin panels.
+
+```tsx
+import { Layout, SidebarCollapseLayout } from '@ttoss/layouts';
+
+const Dashboard = () => (
+  <SidebarCollapseLayout>
+    <Layout.Header showSidebarButton>App Header with Menu Toggle</Layout.Header>
+    <Layout.Sidebar>Navigation Menu</Layout.Sidebar>
+    <Layout.Main.Header>Page Title & Actions</Layout.Main.Header>
+    <Layout.Main>Dashboard Content</Layout.Main>
+    <Layout.Main.Footer>Status Bar</Layout.Main.Footer>
+  </SidebarCollapseLayout>
+);
+```
 
-Check the [Layouts Stories](http://localhost:6006/?path=/story/layouts-layout) to see the available layouts.
+## Core Components
 
-## Custom Layout Components
+### Layout.Main Sub-Components
 
-You can create your own layout components by using the `Layout` sub-components:
+Enhanced main content area with optional header and footer sections.
 
 ```tsx
-import { Layout, StackedLayout } from '@ttoss/layouts';
+<Layout.Main.Header>
+  <h1>Page Title</h1>
+  <button>Action Button</button>
+</Layout.Main.Header>
+
+<Layout.Main>
+  Main content with consistent padding and overflow handling
+</Layout.Main>
+
+<Layout.Main.Footer>
+  <span>Last updated: Today</span>
+</Layout.Main.Footer>
+```
 
-const CustomHeader = (props) => (
-  <Layout.Header {...props} style={{ backgroundColor: 'red' }}>
-    Header
-  </Layout.Header>
+## Automatic Layout Composition
+
+**Key Concept**: Layout components automatically detect and organize their child components by `displayName`, even when components are distributed across different files or routing structures.
+
+### React Router Integration
+
+Perfect for apps where layout components come from different routes:
+
+```tsx
+// App.tsx - Layout wrapper
+import { Layout, SidebarCollapseLayout } from '@ttoss/layouts';
+import { Outlet } from 'react-router-dom';
+
+const AppLayout = () => (
+  <SidebarCollapseLayout>
+    <AppHeader />
+    <AppSidebar />
+    <Outlet /> {/* Routes render here */}
+  </SidebarCollapseLayout>
 );
 
-CustomHeader.displayName = Layout.Header.displayName;
+// pages/Dashboard.tsx - Page-specific components
+const Dashboard = () => (
+  <>
+    <Layout.Main.Header>
+      <h1>Dashboard</h1>
+    </Layout.Main.Header>
+    <Layout.Main>
+      <DashboardCharts />
+    </Layout.Main>
+    <Layout.Main.Footer>Last updated: {lastUpdate}</Layout.Main.Footer>
+  </>
+);
+```
 
-const App = () => (
-  <StackedLayout>
-    <CustomHeader />
-    <Layout.Main>Main</Layout.Main>
-    <Layout.Footer>Footer</Layout.Footer>
-  </StackedLayout>
+The layout **automatically composes** itself by finding components with matching `displayName` properties, regardless of component hierarchy or file structure.
+
+### Component Detection System
+
+```tsx
+// These components can be anywhere in your component tree:
+<Layout.Header />     // → Detected as "Header"
+<Layout.Sidebar />    // → Detected as "Sidebar"
+<Layout.Main />       // → Detected as "Main"
+<Layout.Footer />     // → Detected as "Footer"
+<Layout.Main.Header />  // → Detected as "MainHeader"
+<Layout.Main.Footer />  // → Detected as "MainFooter"
+```
+
+## Component Properties
+
+### Responsive Behavior
+
+- **Desktop**: Sidebar remains visible, toggleable via button
+- **Mobile**: Sidebar becomes slide-out drawer, auto-closes on navigation
+- **Accessible**: Full keyboard navigation and screen reader support
+
+### Styling Integration
+
+All components integrate seamlessly with `@ttoss/ui` theme system via `sx` prop:
+
+```tsx
+<Layout.Header
+  sx={{
+    backgroundColor: 'brand.primary',
+    borderBottom: '2px solid',
+  }}
+>
+  Custom styled header
+</Layout.Header>
+```
+
+## Advanced Usage
+
+### Custom Components with displayName
+
+Create reusable layout components by preserving the required `displayName`:
+
+```tsx
+const AppHeader = ({ children, ...props }) => (
+  <Layout.Header {...props}>
+    <Logo />
+    {children}
+    <UserMenu />
+  </Layout.Header>
 );
+
+AppHeader.displayName = Layout.Header.displayName; // Required for layout detection
 ```
 
-For the layout to work correctly, you must use the `displayName` property of the `Layout` sub-components, because the layout components use the `displayName` to identify the layout sub-components.
+### Sidebar with Logo Slot
+
+Add branding or controls to the sidebar area:
+
+```tsx
+<Layout.Header sidebarSlot={<CompanyLogo />} showSidebarButton>
+  Main header content
+</Layout.Header>
+```
+
+## Examples
+
+View complete examples in [Storybook](https://storybook.ttoss.dev/?path=/story/layouts-layout).
 
 ## License
 

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
 // src/components/Layout.tsx
-import { Box as Box5, Container } from "@ttoss/ui";
+import { Box as Box7, Container } from "@ttoss/ui";
 
 // src/components/Footer.tsx
 import { Box } from "@ttoss/ui";
@@ -16,10 +16,10 @@ var Footer = props => {
 };
 Footer.displayName = "Footer";
 
-// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.1.0/node_modules/@iconify-icon/react/dist/iconify.mjs
+// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.1.1/node_modules/@iconify-icon/react/dist/iconify.mjs
 import React from "react";
 
-// ../../node_modules/.pnpm/iconify-icon@2.2.0/node_modules/iconify-icon/dist/iconify-icon.mjs
+// ../../node_modules/.pnpm/iconify-icon@2.3.0/node_modules/iconify-icon/dist/iconify-icon.mjs
 var defaultIconDimensions = Object.freeze({
   left: 0,
   top: 0,
@@ -869,181 +869,6 @@ function sendAPIQuery(target, query, callback) {
   }
   return redundancy.query(query, send2, callback)().abort;
 }
-var browserCacheVersion = "iconify2";
-var browserCachePrefix = "iconify";
-var browserCacheCountKey = browserCachePrefix + "-count";
-var browserCacheVersionKey = browserCachePrefix + "-version";
-var browserStorageHour = 36e5;
-var browserStorageCacheExpiration = 168;
-var browserStorageLimit = 50;
-function getStoredItem(func, key) {
-  try {
-    return func.getItem(key);
-  } catch (err) {}
-}
-function setStoredItem(func, key, value) {
-  try {
-    func.setItem(key, value);
-    return true;
-  } catch (err) {}
-}
-function removeStoredItem(func, key) {
-  try {
-    func.removeItem(key);
-  } catch (err) {}
-}
-function setBrowserStorageItemsCount(storage2, value) {
-  return setStoredItem(storage2, browserCacheCountKey, value.toString());
-}
-function getBrowserStorageItemsCount(storage2) {
-  return parseInt(getStoredItem(storage2, browserCacheCountKey)) || 0;
-}
-var browserStorageConfig = {
-  local: true,
-  session: true
-};
-var browserStorageEmptyItems = {
-  local: /* @__PURE__ */new Set(),
-  session: /* @__PURE__ */new Set()
-};
-var browserStorageStatus = false;
-function setBrowserStorageStatus(status) {
-  browserStorageStatus = status;
-}
-var _window = typeof window === "undefined" ? {} : window;
-function getBrowserStorage(key) {
-  const attr = key + "Storage";
-  try {
-    if (_window && _window[attr] && typeof _window[attr].length === "number") {
-      return _window[attr];
-    }
-  } catch (err) {}
-  browserStorageConfig[key] = false;
-}
-function iterateBrowserStorage(key, callback) {
-  const func = getBrowserStorage(key);
-  if (!func) {
-    return;
-  }
-  const version = getStoredItem(func, browserCacheVersionKey);
-  if (version !== browserCacheVersion) {
-    if (version) {
-      const total2 = getBrowserStorageItemsCount(func);
-      for (let i = 0; i < total2; i++) {
-        removeStoredItem(func, browserCachePrefix + i.toString());
-      }
-    }
-    setStoredItem(func, browserCacheVersionKey, browserCacheVersion);
-    setBrowserStorageItemsCount(func, 0);
-    return;
-  }
-  const minTime = Math.floor(Date.now() / browserStorageHour) - browserStorageCacheExpiration;
-  const parseItem = index => {
-    const name = browserCachePrefix + index.toString();
-    const item = getStoredItem(func, name);
-    if (typeof item !== "string") {
-      return;
-    }
-    try {
-      const data = JSON.parse(item);
-      if (typeof data === "object" && typeof data.cached === "number" && data.cached > minTime && typeof data.provider === "string" && typeof data.data === "object" && typeof data.data.prefix === "string" &&
-      // Valid item: run callback
-      callback(data, index)) {
-        return true;
-      }
-    } catch (err) {}
-    removeStoredItem(func, name);
-  };
-  let total = getBrowserStorageItemsCount(func);
-  for (let i = total - 1; i >= 0; i--) {
-    if (!parseItem(i)) {
-      if (i === total - 1) {
-        total--;
-        setBrowserStorageItemsCount(func, total);
-      } else {
-        browserStorageEmptyItems[key].add(i);
-      }
-    }
-  }
-}
-function initBrowserStorage() {
-  if (browserStorageStatus) {
-    return;
-  }
-  setBrowserStorageStatus(true);
-  for (const key in browserStorageConfig) {
-    iterateBrowserStorage(key, item => {
-      const iconSet = item.data;
-      const provider = item.provider;
-      const prefix = iconSet.prefix;
-      const storage2 = getStorage(provider, prefix);
-      if (!addIconSet(storage2, iconSet).length) {
-        return false;
-      }
-      const lastModified = iconSet.lastModified || -1;
-      storage2.lastModifiedCached = storage2.lastModifiedCached ? Math.min(storage2.lastModifiedCached, lastModified) : lastModified;
-      return true;
-    });
-  }
-}
-function updateLastModified(storage2, lastModified) {
-  const lastValue = storage2.lastModifiedCached;
-  if (
-  // Matches or newer
-  lastValue && lastValue >= lastModified) {
-    return lastValue === lastModified;
-  }
-  storage2.lastModifiedCached = lastModified;
-  if (lastValue) {
-    for (const key in browserStorageConfig) {
-      iterateBrowserStorage(key, item => {
-        const iconSet = item.data;
-        return item.provider !== storage2.provider || iconSet.prefix !== storage2.prefix || iconSet.lastModified === lastModified;
-      });
-    }
-  }
-  return true;
-}
-function storeInBrowserStorage(storage2, data) {
-  if (!browserStorageStatus) {
-    initBrowserStorage();
-  }
-  function store(key) {
-    let func;
-    if (!browserStorageConfig[key] || !(func = getBrowserStorage(key))) {
-      return;
-    }
-    const set = browserStorageEmptyItems[key];
-    let index;
-    if (set.size) {
-      set.delete(index = Array.from(set).shift());
-    } else {
-      index = getBrowserStorageItemsCount(func);
-      if (index >= browserStorageLimit || !setBrowserStorageItemsCount(func, index + 1)) {
-        return;
-      }
-    }
-    const item = {
-      cached: Math.floor(Date.now() / browserStorageHour),
-      provider: storage2.provider,
-      data
-    };
-    return setStoredItem(func, browserCachePrefix + index.toString(), JSON.stringify(item));
-  }
-  if (data.lastModified && !updateLastModified(storage2, data.lastModified)) {
-    return;
-  }
-  if (!Object.keys(data.icons).length) {
-    return;
-  }
-  if (data.not_found) {
-    data = Object.assign({}, data);
-    delete data.not_found;
-  }
-  if (!store("local")) {
-    store("session");
-  }
-}
 function emptyCallback() {}
 function loadedNewIcons(storage2) {
   if (!storage2.iconsLoaderFlag) {
@@ -1065,7 +890,7 @@ function checkIconNamesForAPI(icons) {
     invalid
   };
 }
-function parseLoaderResponse(storage2, icons, data, isAPIResponse) {
+function parseLoaderResponse(storage2, icons, data) {
   function checkMissing() {
     const pending = storage2.pendingIcons;
     icons.forEach(name => {
@@ -1084,9 +909,6 @@ function parseLoaderResponse(storage2, icons, data, isAPIResponse) {
         checkMissing();
         return;
       }
-      if (isAPIResponse) {
-        storeInBrowserStorage(storage2, data);
-      }
     } catch (err) {
       console.error(err);
     }
@@ -1127,7 +949,7 @@ function loadNewIcons(storage2, icons) {
       const customIconLoader = storage2.loadIcon;
       if (storage2.loadIcons && (icons2.length > 1 || !customIconLoader)) {
         parsePossiblyAsyncResponse(storage2.loadIcons(icons2, prefix, provider), data => {
-          parseLoaderResponse(storage2, icons2, data, false);
+          parseLoaderResponse(storage2, icons2, data);
         });
         return;
       }
@@ -1141,7 +963,7 @@ function loadNewIcons(storage2, icons) {
                 [name]: data
               }
             } : null;
-            parseLoaderResponse(storage2, [name], iconSet, false);
+            parseLoaderResponse(storage2, [name], iconSet);
           });
         });
         return;
@@ -1151,20 +973,20 @@ function loadNewIcons(storage2, icons) {
         invalid
       } = checkIconNamesForAPI(icons2);
       if (invalid.length) {
-        parseLoaderResponse(storage2, invalid, null, false);
+        parseLoaderResponse(storage2, invalid, null);
       }
       if (!valid.length) {
         return;
       }
       const api = prefix.match(matchIconName) ? getAPIModule(provider) : null;
       if (!api) {
-        parseLoaderResponse(storage2, valid, null, false);
+        parseLoaderResponse(storage2, valid, null);
         return;
       }
       const params = api.prepare(provider, prefix, valid);
       params.forEach(item => {
         sendAPIQuery(provider, item, data => {
-          parseLoaderResponse(storage2, item.icons, data, true);
+          parseLoaderResponse(storage2, item.icons, data);
         });
       });
     });
@@ -1641,19 +1463,6 @@ function setCustomIconsLoader$1(loader, prefix, provider) {
 function setCustomIconLoader$1(loader, prefix, provider) {
   getStorage(provider || "", prefix).loadIcon = loader;
 }
-function toggleBrowserCache(storage2, value) {
-  switch (storage2) {
-    case "local":
-    case "session":
-      browserStorageConfig[storage2] = value;
-      break;
-    case "all":
-      for (const key in browserStorageConfig) {
-        browserStorageConfig[key] = value;
-      }
-      break;
-  }
-}
 var nodeAttr = "data-style";
 var customStyle = "";
 function appendCustomStyle(style) {
@@ -1671,14 +1480,13 @@ function updateStyle(parent, inline) {
 function exportFunctions() {
   setAPIModule("", fetchAPIModule);
   allowSimpleNames(true);
-  let _window2;
+  let _window;
   try {
-    _window2 = window;
+    _window = window;
   } catch (err) {}
-  if (_window2) {
-    initBrowserStorage();
-    if (_window2.IconifyPreload !== void 0) {
-      const preload = _window2.IconifyPreload;
+  if (_window) {
+    if (_window.IconifyPreload !== void 0) {
+      const preload = _window.IconifyPreload;
       const err = "Invalid IconifyPreload syntax.";
       if (typeof preload === "object" && preload !== null) {
         (preload instanceof Array ? preload : [preload]).forEach(item => {
@@ -1698,8 +1506,8 @@ function exportFunctions() {
         });
       }
     }
-    if (_window2.IconifyProviders !== void 0) {
-      const providers = _window2.IconifyProviders;
+    if (_window.IconifyProviders !== void 0) {
+      const providers = _window.IconifyProviders;
       if (typeof providers === "object" && providers !== null) {
         for (const key in providers) {
           const err = "IconifyProviders[" + key + "] is invalid.";
@@ -1727,8 +1535,10 @@ function exportFunctions() {
     listAPIProviders
   };
   return {
-    enableCache: storage2 => toggleBrowserCache(storage2, true),
-    disableCache: storage2 => toggleBrowserCache(storage2, false),
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    enableCache: storage2 => {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    disableCache: storage2 => {},
     iconLoaded: iconLoaded$1,
     iconExists: iconLoaded$1,
     // deprecated, kept to avoid breaking changes
@@ -2242,7 +2052,7 @@ var {
   _api
 } = IconifyIconComponent;
 
-// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.1.0/node_modules/@iconify-icon/react/dist/iconify.mjs
+// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.1.1/node_modules/@iconify-icon/react/dist/iconify.mjs
 var Icon = React.forwardRef((props, ref) => {
   const newProps = {
     ...props,
@@ -2542,10 +2352,55 @@ var Header = ({
 Header.displayName = "Header";
 
 // src/components/Main.tsx
+import { Box as Box6 } from "@ttoss/ui";
+
+// src/components/MainFooter.tsx
 import { Box as Box4 } from "@ttoss/ui";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Main = props => {
+var MainFooter = props => {
   return /* @__PURE__ */jsx6(Box4, {
+    variant: "layout.main.footer",
+    ...props,
+    sx: {
+      paddingX: "10",
+      paddingY: "3",
+      borderTop: "sm",
+      borderColor: "display.border.muted.default",
+      backgroundColor: "navigation.background.primary.default",
+      width: "full",
+      ...props.sx
+    },
+    children: props.children
+  });
+};
+MainFooter.displayName = "MainFooter";
+
+// src/components/MainHeader.tsx
+import { Box as Box5 } from "@ttoss/ui";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var MainHeader = props => {
+  return /* @__PURE__ */jsx7(Box5, {
+    variant: "layout.main.header",
+    ...props,
+    as: "header",
+    sx: {
+      paddingX: "4",
+      paddingY: "3",
+      borderBottom: "sm",
+      borderColor: "display.border.muted.default",
+      backgroundColor: "navigation.background.primary.default",
+      width: "full",
+      ...props.sx
+    },
+    children: props.children
+  });
+};
+MainHeader.displayName = "MainHeader";
+
+// src/components/Main.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Main = props => {
+  return /* @__PURE__ */jsx8(Box6, {
     variant: "layout.main",
     ...props,
     as: "main",
@@ -2561,13 +2416,15 @@ var Main = props => {
   });
 };
 Main.displayName = "Main";
+Main.Header = MainHeader;
+Main.Footer = MainFooter;
 
 // src/components/Layout.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Layout = ({
   children
 }) => {
-  return /* @__PURE__ */jsx7(Box5, {
+  return /* @__PURE__ */jsx9(Box7, {
     variant: "layout.layout",
     children
   });
@@ -2587,7 +2444,9 @@ var semanticComponents = {
   Header: "header",
   Sidebar: "sidebar",
   Footer: "footer",
-  Main: "main"
+  Main: "main",
+  MainHeader: "mainHeader",
+  MainFooter: "mainFooter"
 };
 var getSematicElements = ({
   children
@@ -2606,7 +2465,7 @@ var getSematicElements = ({
 };
 
 // src/components/SidebarCollapseLayout.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var SidebarCollapseLayout = ({
   children,
   ...props
@@ -2614,11 +2473,13 @@ var SidebarCollapseLayout = ({
   const {
     header,
     main,
-    sidebar
+    sidebar,
+    mainFooter,
+    mainHeader
   } = getSematicElements({
     children
   });
-  return /* @__PURE__ */jsx8(LayoutProvider, {
+  return /* @__PURE__ */jsx10(LayoutProvider, {
     children: /* @__PURE__ */jsxs3(Stack, {
       ...props,
       sx: {
@@ -2634,7 +2495,14 @@ var SidebarCollapseLayout = ({
           overflow: "hidden",
           flexDirection: ["row"]
         },
-        children: [sidebar, main]
+        children: [sidebar, /* @__PURE__ */jsxs3(Stack, {
+          sx: {
+            flex: 1,
+            height: "full",
+            overflow: "hidden"
+          },
+          children: [mainHeader, main, mainFooter]
+        })]
       })]
     })
   });
@@ -2642,7 +2510,7 @@ var SidebarCollapseLayout = ({
 
 // src/components/StackedLayout.tsx
 import { Stack as Stack2 } from "@ttoss/ui";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var StackedLayout = ({
   children,
   ...props
@@ -2654,7 +2522,7 @@ var StackedLayout = ({
   } = getSematicElements({
     children
   });
-  return /* @__PURE__ */jsx9(LayoutProvider, {
+  return /* @__PURE__ */jsx11(LayoutProvider, {
     children: /* @__PURE__ */jsxs4(Stack2, {
       ...props,
       children: [header, main, footer]
@@ -2674,6 +2542,6 @@ iconify-icon/dist/iconify-icon.mjs:
   * Licensed under MIT.
   *
   * @license MIT
-  * @version 2.2.0
+  * @version 2.3.0
   *)
 */

package/dist/index.d.ts

@@ -21,6 +21,14 @@ declare const Layout: {
     Main: {
         (props: BoxProps): react_jsx_runtime.JSX.Element;
         displayName: string;
+        Header: {
+            (props: BoxProps): react_jsx_runtime.JSX.Element;
+            displayName: string;
+        };
+        Footer: {
+            (props: BoxProps): react_jsx_runtime.JSX.Element;
+            displayName: string;
+        };
     };
     Footer: {
         (props: BoxProps): react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/layouts",
-  "version": "0.4.36",
+  "version": "0.5.0",
   "description": "Layout components for React",
   "license": "MIT",
   "author": "ttoss",
@@ -25,8 +25,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.2.25",
-    "@ttoss/ui": "^5.9.1"
+    "@ttoss/components": "^2.2.26",
+    "@ttoss/ui": "^5.9.2"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -34,11 +34,11 @@
     "jest": "^30.0.4",
     "react": "^19.1.0",
     "tsup": "^8.5.0",
-    "@ttoss/config": "^1.35.5",
-    "@ttoss/test-utils": "^2.1.25",
-    "@ttoss/ui": "^5.9.1",
-    "@ttoss/react-icons": "^0.4.14",
-    "@ttoss/components": "^2.2.25"
+    "@ttoss/components": "^2.2.26",
+    "@ttoss/config": "^1.35.6",
+    "@ttoss/react-icons": "^0.4.15",
+    "@ttoss/ui": "^5.9.2",
+    "@ttoss/test-utils": "^2.1.26"
   },
   "keywords": [
     "React"