@chayns-components/navigation 5.0.0-beta.1389

package/lib/cjs/components/dynamic-toolbar/dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarOverflowTray.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","_DynamicToolbar","e","__esModule","default","StyledMotionDynamicToolbarOverflowTray","exports","styled","motion","div","theme","StyledDynamicToolbarOverflowTrayItems","DYNAMIC_TOOLBAR_CONTENT_PADDING_PX","StyledMotionDynamicToolbarOverflowTrayWrapper","DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW","StyledMotionDynamicToolbarOverflowTraySpacer","DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX"],"sources":["../../../../../src/components/dynamic-toolbar/dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport { WithTheme } from '@chayns-components/core';\nimport {\n    DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX,\n    DYNAMIC_TOOLBAR_CONTENT_PADDING_PX,\n    DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW,\n} from '../DynamicToolbar.constants';\n\ntype StyledMotionDynamicToolbarOverflowTrayProps = WithTheme<{}>;\n\nexport const StyledMotionDynamicToolbarOverflowTray = styled(\n    motion.div,\n)<StyledMotionDynamicToolbarOverflowTrayProps>`\n    background-color: ${({ theme }) => theme['100']};\n    border-radius: 8px;\n`;\n\nexport const StyledDynamicToolbarOverflowTrayItems = styled.div`\n    display: flex;\n    flex-wrap: wrap;\n    gap: ${DYNAMIC_TOOLBAR_CONTENT_PADDING_PX}px;\n    padding: ${DYNAMIC_TOOLBAR_CONTENT_PADDING_PX}px;\n`;\n\nexport const StyledMotionDynamicToolbarOverflowTrayWrapper = styled.div`\n    position: fixed;\n    bottom: 33px;\n    width: ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;\n    overflow: hidden;\n`;\n\nexport const StyledMotionDynamicToolbarOverflowTraySpacer = styled.div`\n    height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,eAAA,GAAAH,OAAA;AAIqC,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAI9B,MAAMG,sCAAsC,GAAAC,OAAA,CAAAD,sCAAA,GAAG,IAAAE,yBAAM,EACxDC,aAAM,CAACC,GACX,CAA8C;AAC9C,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAL,OAAA,CAAAK,qCAAA,GAAGJ,yBAAM,CAACE,GAAG;AAC/D;AACA;AACA,WAAWG,kDAAkC;AAC7C,eAAeA,kDAAkC;AACjD,CAAC;AAEM,MAAMC,6CAA6C,GAAAP,OAAA,CAAAO,6CAAA,GAAGN,yBAAM,CAACE,GAAG;AACvE;AACA;AACA,aAAaK,gDAAgC;AAC7C;AACA,CAAC;AAEM,MAAMC,4CAA4C,GAAAT,OAAA,CAAAS,4CAAA,GAAGR,yBAAM,CAACE,GAAG;AACtE,cAAcO,iDAAiC;AAC/C,CAAC","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar-spacer/DynamicToolbarSpacer.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DynamicToolbarSpacer = require("./DynamicToolbarSpacer.styles");
+var _DynamicToolbar = require("../dynamic-toolbar/DynamicToolbar.constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Spacer for DynamicToolbar to prevent content from being overlapped.
+ *
+ * @description A spacer component that can be used to create space for the DynamicToolbar.
+ * This can be used in lists or other scrollable content to prevent the toolbar from overlapping
+ * content at the end of the list. If the toolbar is display in area layout this element will add
+ * space for the toolbar height.
+ */
+const DynamicToolbarSpacer = ({
+  className
+}) => {
+  const spacerClassName = className ? `${_DynamicToolbar.DYNAMIC_TOOLBAR_SPACER_BASE_CLASS} ${className}` : _DynamicToolbar.DYNAMIC_TOOLBAR_SPACER_BASE_CLASS;
+  return /*#__PURE__*/_react.default.createElement(_DynamicToolbarSpacer.StyledDynamicToolbarSpacer, {
+    className: spacerClassName
+  });
+};
+DynamicToolbarSpacer.displayName = 'DynamicToolbarSpacer';
+var _default = exports.default = DynamicToolbarSpacer;
+//# sourceMappingURL=DynamicToolbarSpacer.js.map

package/lib/cjs/components/dynamic-toolbar-spacer/DynamicToolbarSpacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarSpacer.js","names":["_react","_interopRequireDefault","require","_DynamicToolbarSpacer","_DynamicToolbar","e","__esModule","default","DynamicToolbarSpacer","className","spacerClassName","DYNAMIC_TOOLBAR_SPACER_BASE_CLASS","createElement","StyledDynamicToolbarSpacer","displayName","_default","exports"],"sources":["../../../../src/components/dynamic-toolbar-spacer/DynamicToolbarSpacer.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyledDynamicToolbarSpacer } from './DynamicToolbarSpacer.styles';\nimport type { DynamicToolbarSpacerProps } from './DynamicToolbarSpacer.types';\nimport { DYNAMIC_TOOLBAR_SPACER_BASE_CLASS } from '../dynamic-toolbar/DynamicToolbar.constants';\n\n/**\n * Spacer for DynamicToolbar to prevent content from being overlapped.\n *\n * @description A spacer component that can be used to create space for the DynamicToolbar.\n * This can be used in lists or other scrollable content to prevent the toolbar from overlapping\n * content at the end of the list. If the toolbar is display in area layout this element will add\n * space for the toolbar height.\n */\nconst DynamicToolbarSpacer: FC<DynamicToolbarSpacerProps> = ({ className }) => {\n    const spacerClassName = className\n        ? `${DYNAMIC_TOOLBAR_SPACER_BASE_CLASS} ${className}`\n        : DYNAMIC_TOOLBAR_SPACER_BASE_CLASS;\n\n    return <StyledDynamicToolbarSpacer className={spacerClassName} />;\n};\n\nDynamicToolbarSpacer.displayName = 'DynamicToolbarSpacer';\n\nexport default DynamicToolbarSpacer;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,qBAAA,GAAAD,OAAA;AAEA,IAAAE,eAAA,GAAAF,OAAA;AAAgG,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,oBAAmD,GAAGA,CAAC;EAAEC;AAAU,CAAC,KAAK;EAC3E,MAAMC,eAAe,GAAGD,SAAS,GAC3B,GAAGE,iDAAiC,IAAIF,SAAS,EAAE,GACnDE,iDAAiC;EAEvC,oBAAOX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,qBAAA,CAAAU,0BAA0B;IAACJ,SAAS,EAAEC;EAAgB,CAAE,CAAC;AACrE,CAAC;AAEDF,oBAAoB,CAACM,WAAW,GAAG,sBAAsB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAT,OAAA,GAE3CC,oBAAoB","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar-spacer/DynamicToolbarSpacer.styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledDynamicToolbarSpacer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _DynamicToolbar = require("../dynamic-toolbar/DynamicToolbar.constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledDynamicToolbarSpacer = exports.StyledDynamicToolbarSpacer = _styledComponents.default.div`
+    height: ${_DynamicToolbar.DYNAMIC_TOOLBAR_HEIGHT_PX}px;
+    width: 100%;
+`;
+//# sourceMappingURL=DynamicToolbarSpacer.styles.js.map

package/lib/cjs/components/dynamic-toolbar-spacer/DynamicToolbarSpacer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarSpacer.styles.js","names":["_styledComponents","_interopRequireDefault","require","_DynamicToolbar","e","__esModule","default","StyledDynamicToolbarSpacer","exports","styled","div","DYNAMIC_TOOLBAR_HEIGHT_PX"],"sources":["../../../../src/components/dynamic-toolbar-spacer/DynamicToolbarSpacer.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { DYNAMIC_TOOLBAR_HEIGHT_PX } from '../dynamic-toolbar/DynamicToolbar.constants';\n\nexport const StyledDynamicToolbarSpacer = styled.div`\n    height: ${DYNAMIC_TOOLBAR_HEIGHT_PX}px;\n    width: 100%;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AAAwF,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEjF,MAAMG,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,GAAGE,yBAAM,CAACC,GAAG;AACpD,cAAcC,yCAAyB;AACvC;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar-spacer/DynamicToolbarSpacer.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=DynamicToolbarSpacer.types.js.map

package/lib/cjs/components/dynamic-toolbar-spacer/DynamicToolbarSpacer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarSpacer.types.js","names":[],"sources":["../../../../src/components/dynamic-toolbar-spacer/DynamicToolbarSpacer.types.ts"],"sourcesContent":["export type DynamicToolbarSpacerProps = {\n    className?: string;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DynamicToolbar", {
+  enumerable: true,
+  get: function () {
+    return _DynamicToolbar.default;
+  }
+});
+Object.defineProperty(exports, "DynamicToolbarLayout", {
+  enumerable: true,
+  get: function () {
+    return _DynamicToolbar2.DynamicToolbarLayout;
+  }
+});
+Object.defineProperty(exports, "DynamicToolbarSpacer", {
+  enumerable: true,
+  get: function () {
+    return _DynamicToolbarSpacer.default;
+  }
+});
+var _DynamicToolbar = _interopRequireDefault(require("./components/dynamic-toolbar/DynamicToolbar"));
+var _DynamicToolbar2 = require("./components/dynamic-toolbar/DynamicToolbar.types");
+var _DynamicToolbarSpacer = _interopRequireDefault(require("./components/dynamic-toolbar-spacer/DynamicToolbarSpacer"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_DynamicToolbar","_interopRequireDefault","require","_DynamicToolbar2","_DynamicToolbarSpacer","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\nexport { default as DynamicToolbar } from './components/dynamic-toolbar/DynamicToolbar';\nexport { DynamicToolbarLayout } from './components/dynamic-toolbar/DynamicToolbar.types';\nexport type {\n    DynamicToolbarItem,\n    DynamicToolbarProps,\n} from './components/dynamic-toolbar/DynamicToolbar.types';\n\nexport { default as DynamicToolbarSpacer } from './components/dynamic-toolbar-spacer/DynamicToolbarSpacer';\nexport type { DynamicToolbarSpacerProps } from './components/dynamic-toolbar-spacer/DynamicToolbarSpacer.types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAMA,IAAAE,qBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA2G,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/esm/components/dynamic-toolbar/DynamicToolbar.constants.js

@@ -0,0 +1,14 @@
+// Shared constants keep toolbar layout/math identical across components and stories.
+export const DYNAMIC_TOOLBAR_BADGE_MAX_VALUE = 99;
+export const DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH = 64;
+export const DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA = 20;
+export const DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO = 0.8;
+export const DYNAMIC_TOOLBAR_HEIGHT_PX = 85;
+export const DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX = 52;
+export const DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW = 80;
+export const DYNAMIC_TOOLBAR_CONTENT_PADDING_PX = 6;
+export const DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX = 30;
+export const DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX = 36;
+export const DYNAMIC_TOOLBAR_BASE_CLASS = 'beta-chayns-dynamic-toolbar';
+export const DYNAMIC_TOOLBAR_SPACER_BASE_CLASS = 'beta-chayns-dynamic-toolbar-spacer';
+//# sourceMappingURL=DynamicToolbar.constants.js.map

package/lib/esm/components/dynamic-toolbar/DynamicToolbar.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbar.constants.js","names":["DYNAMIC_TOOLBAR_BADGE_MAX_VALUE","DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH","DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA","DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO","DYNAMIC_TOOLBAR_HEIGHT_PX","DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX","DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW","DYNAMIC_TOOLBAR_CONTENT_PADDING_PX","DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX","DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX","DYNAMIC_TOOLBAR_BASE_CLASS","DYNAMIC_TOOLBAR_SPACER_BASE_CLASS"],"sources":["../../../../src/components/dynamic-toolbar/DynamicToolbar.constants.ts"],"sourcesContent":["// Shared constants keep toolbar layout/math identical across components and stories.\nexport const DYNAMIC_TOOLBAR_BADGE_MAX_VALUE = 99;\nexport const DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH = 64;\nexport const DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA = 20;\nexport const DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO = 0.8;\n\nexport const DYNAMIC_TOOLBAR_HEIGHT_PX = 85;\nexport const DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX = 52;\nexport const DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW = 80;\nexport const DYNAMIC_TOOLBAR_CONTENT_PADDING_PX = 6;\nexport const DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX = 30;\nexport const DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX = 36;\n\nexport const DYNAMIC_TOOLBAR_BASE_CLASS = 'beta-chayns-dynamic-toolbar';\nexport const DYNAMIC_TOOLBAR_SPACER_BASE_CLASS = 'beta-chayns-dynamic-toolbar-spacer';\n"],"mappings":"AAAA;AACA,OAAO,MAAMA,+BAA+B,GAAG,EAAE;AACjD,OAAO,MAAMC,8BAA8B,GAAG,EAAE;AAChD,OAAO,MAAMC,iCAAiC,GAAG,EAAE;AACnD,OAAO,MAAMC,oCAAoC,GAAG,GAAG;AAEvD,OAAO,MAAMC,yBAAyB,GAAG,EAAE;AAC3C,OAAO,MAAMC,iCAAiC,GAAG,EAAE;AACnD,OAAO,MAAMC,gCAAgC,GAAG,EAAE;AAClD,OAAO,MAAMC,kCAAkC,GAAG,CAAC;AACnD,OAAO,MAAMC,yCAAyC,GAAG,EAAE;AAC3D,OAAO,MAAMC,0CAA0C,GAAG,EAAE;AAE5D,OAAO,MAAMC,0BAA0B,GAAG,6BAA6B;AACvE,OAAO,MAAMC,iCAAiC,GAAG,oCAAoC","ignoreList":[]}

package/lib/esm/components/dynamic-toolbar/DynamicToolbar.js

@@ -0,0 +1,155 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AnimatePresence } from 'motion/react';
+import { Icon } from '@chayns-components/core';
+import DynamicToolbarItemButton from './dynamic-toolbar-item-button/DynamicToolbarItemButton';
+import DynamicToolbarOverflowTray from './dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray';
+import { StyledDynamicToolbarBackground, StyledDynamicToolbarContent, StyledDynamicToolbarOverflowTrigger, StyledMotionDynamicToolbar } from './DynamicToolbar.styles';
+import { DYNAMIC_TOOLBAR_BADGE_MAX_VALUE, DYNAMIC_TOOLBAR_BASE_CLASS, DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH, DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA, DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO } from './DynamicToolbar.constants';
+import { DynamicToolbarLayout } from './DynamicToolbar.types';
+const DynamicToolbar = ({
+  activeItemId,
+  className,
+  items = [],
+  layout = DynamicToolbarLayout.Floating,
+  onItemSelect
+}) => {
+  const [isAutoHidden, setIsAutoHidden] = useState(false);
+  const [isOverflowTrayOpen, setIsOverflowTrayOpen] = useState(false);
+  const [availableWidth, setAvailableWidth] = useState();
+  const previousScrollYRef = useRef(0);
+  const scrollAnimationFrame = useRef();
+  const toolbarClassName = className ? `${DYNAMIC_TOOLBAR_BASE_CLASS} ${className}` : DYNAMIC_TOOLBAR_BASE_CLASS;
+  const isHidden = layout === DynamicToolbarLayout.Floating && isAutoHidden || layout === DynamicToolbarLayout.Hidden || items.length === 0;
+  const handleToggleOverflowTrayVisibility = useCallback(() => {
+    setIsOverflowTrayOpen(prevState => !prevState);
+  }, []);
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const updateAvailableWidth = () => {
+      setAvailableWidth(window.innerWidth * DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO);
+    };
+
+    // Toggle the floating toolbar visibility while tracking the last scroll position.
+    const handleScroll = () => {
+      if (scrollAnimationFrame.current) {
+        return;
+      }
+      scrollAnimationFrame.current = window.requestAnimationFrame(() => {
+        scrollAnimationFrame.current = undefined;
+        const currentScrollY = window.scrollY;
+        const previousScrollY = previousScrollYRef.current;
+        const isScrollingDown = currentScrollY > previousScrollY;
+        const hasReachedHideThreshold = Math.abs(currentScrollY - previousScrollY) > DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA;
+        if (isScrollingDown && hasReachedHideThreshold) {
+          previousScrollYRef.current = currentScrollY;
+          setIsAutoHidden(true);
+          setIsOverflowTrayOpen(false);
+          return;
+        }
+        if (!isScrollingDown && hasReachedHideThreshold) {
+          previousScrollYRef.current = currentScrollY;
+          setIsAutoHidden(false);
+          return;
+        }
+        previousScrollYRef.current = currentScrollY;
+      });
+    };
+    updateAvailableWidth();
+    window.addEventListener('resize', updateAvailableWidth);
+    window.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener('resize', updateAvailableWidth);
+      window.removeEventListener('scroll', handleScroll);
+      if (scrollAnimationFrame.current) {
+        window.cancelAnimationFrame(scrollAnimationFrame.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (isHidden && isOverflowTrayOpen) {
+      setIsOverflowTrayOpen(false);
+    }
+  }, [isHidden, isOverflowTrayOpen]);
+  const handleItemSelection = useCallback(item => {
+    if (item.isDisabled) {
+      return;
+    }
+    onItemSelect?.(item);
+  }, [onItemSelect]);
+  const {
+    visibleItems,
+    overflowItems
+  } = useMemo(() => {
+    // Derive how many items fit into the toolbar before overflowing.
+    if (!availableWidth) {
+      return {
+        visibleItems: items,
+        overflowItems: []
+      };
+    }
+    const totalSlots = Math.max(1, Math.floor(availableWidth / DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH));
+    if (items.length <= totalSlots) {
+      return {
+        visibleItems: items,
+        overflowItems: []
+      };
+    }
+    const visibleCount = Math.max(1, totalSlots - 1);
+    return {
+      visibleItems: items.slice(0, visibleCount),
+      overflowItems: items.slice(visibleCount)
+    };
+  }, [availableWidth, items]);
+  useEffect(() => {
+    if (overflowItems.length === 0 && isOverflowTrayOpen) {
+      setIsOverflowTrayOpen(false);
+    }
+  }, [overflowItems.length, isOverflowTrayOpen]);
+  const renderedVisibleItems = useMemo(() => visibleItems.map(item => /*#__PURE__*/React.createElement(DynamicToolbarItemButton, {
+    badgeMaxValue: DYNAMIC_TOOLBAR_BADGE_MAX_VALUE,
+    isActive: item.id === activeItemId,
+    item: item,
+    key: item.id,
+    onSelect: handleItemSelection
+  })), [activeItemId, handleItemSelection, visibleItems]);
+  return /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, !isHidden && /*#__PURE__*/React.createElement(StyledMotionDynamicToolbar, {
+    animate: {
+      y: 0
+    },
+    className: toolbarClassName,
+    exit: {
+      y: '100%'
+    },
+    initial: {
+      y: '100%'
+    },
+    key: "dynamic-toolbar",
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    }
+  }, /*#__PURE__*/React.createElement(DynamicToolbarOverflowTray, {
+    activeItemId: activeItemId,
+    handleItemSelection: handleItemSelection,
+    items: overflowItems,
+    isOpen: isOverflowTrayOpen,
+    key: "overflow-tray"
+  }), /*#__PURE__*/React.createElement(StyledDynamicToolbarBackground, {
+    $layout: layout
+  }), /*#__PURE__*/React.createElement(StyledDynamicToolbarContent, null, renderedVisibleItems), overflowItems.length > 0 && /*#__PURE__*/React.createElement(StyledDynamicToolbarOverflowTrigger, {
+    onClick: handleToggleOverflowTrayVisibility
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: layout === DynamicToolbarLayout.Area ? 'white' : undefined,
+    icons: ['fa fa-ellipsis-vertical'],
+    size: 22
+  }))));
+};
+DynamicToolbar.displayName = 'DynamicToolbar';
+export default DynamicToolbar;
+//# sourceMappingURL=DynamicToolbar.js.map

package/lib/esm/components/dynamic-toolbar/DynamicToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbar.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","AnimatePresence","Icon","DynamicToolbarItemButton","DynamicToolbarOverflowTray","StyledDynamicToolbarBackground","StyledDynamicToolbarContent","StyledDynamicToolbarOverflowTrigger","StyledMotionDynamicToolbar","DYNAMIC_TOOLBAR_BADGE_MAX_VALUE","DYNAMIC_TOOLBAR_BASE_CLASS","DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH","DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA","DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO","DynamicToolbarLayout","DynamicToolbar","activeItemId","className","items","layout","Floating","onItemSelect","isAutoHidden","setIsAutoHidden","isOverflowTrayOpen","setIsOverflowTrayOpen","availableWidth","setAvailableWidth","previousScrollYRef","scrollAnimationFrame","toolbarClassName","isHidden","Hidden","length","handleToggleOverflowTrayVisibility","prevState","window","undefined","updateAvailableWidth","innerWidth","handleScroll","current","requestAnimationFrame","currentScrollY","scrollY","previousScrollY","isScrollingDown","hasReachedHideThreshold","Math","abs","addEventListener","passive","removeEventListener","cancelAnimationFrame","handleItemSelection","item","isDisabled","visibleItems","overflowItems","totalSlots","max","floor","visibleCount","slice","renderedVisibleItems","map","createElement","badgeMaxValue","isActive","id","key","onSelect","initial","animate","y","exit","transition","duration","type","isOpen","$layout","onClick","color","Area","icons","size","displayName"],"sources":["../../../../src/components/dynamic-toolbar/DynamicToolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\nimport { Icon } from '@chayns-components/core';\nimport DynamicToolbarItemButton from './dynamic-toolbar-item-button/DynamicToolbarItemButton';\nimport DynamicToolbarOverflowTray from './dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray';\nimport {\n    StyledDynamicToolbarBackground,\n    StyledDynamicToolbarContent,\n    StyledDynamicToolbarOverflowTrigger,\n    StyledMotionDynamicToolbar,\n} from './DynamicToolbar.styles';\nimport {\n    DYNAMIC_TOOLBAR_BADGE_MAX_VALUE,\n    DYNAMIC_TOOLBAR_BASE_CLASS,\n    DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH,\n    DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA,\n    DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO,\n} from './DynamicToolbar.constants';\nimport type { DynamicToolbarItem, DynamicToolbarProps } from './DynamicToolbar.types';\nimport { DynamicToolbarLayout } from './DynamicToolbar.types';\n\nconst DynamicToolbar: FC<DynamicToolbarProps> = ({\n    activeItemId,\n    className,\n    items = [],\n    layout = DynamicToolbarLayout.Floating,\n    onItemSelect,\n}) => {\n    const [isAutoHidden, setIsAutoHidden] = useState(false);\n    const [isOverflowTrayOpen, setIsOverflowTrayOpen] = useState(false);\n    const [availableWidth, setAvailableWidth] = useState<number>();\n\n    const previousScrollYRef = useRef(0);\n    const scrollAnimationFrame = useRef<number>();\n\n    const toolbarClassName = className\n        ? `${DYNAMIC_TOOLBAR_BASE_CLASS} ${className}`\n        : DYNAMIC_TOOLBAR_BASE_CLASS;\n\n    const isHidden =\n        (layout === DynamicToolbarLayout.Floating && isAutoHidden) ||\n        layout === DynamicToolbarLayout.Hidden ||\n        items.length === 0;\n\n    const handleToggleOverflowTrayVisibility = useCallback(() => {\n        setIsOverflowTrayOpen((prevState) => !prevState);\n    }, []);\n\n    useEffect(() => {\n        if (typeof window === 'undefined') {\n            return undefined;\n        }\n\n        const updateAvailableWidth = () => {\n            setAvailableWidth(window.innerWidth * DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO);\n        };\n\n        // Toggle the floating toolbar visibility while tracking the last scroll position.\n        const handleScroll = () => {\n            if (scrollAnimationFrame.current) {\n                return;\n            }\n\n            scrollAnimationFrame.current = window.requestAnimationFrame(() => {\n                scrollAnimationFrame.current = undefined;\n\n                const currentScrollY = window.scrollY;\n                const previousScrollY = previousScrollYRef.current;\n                const isScrollingDown = currentScrollY > previousScrollY;\n                const hasReachedHideThreshold =\n                    Math.abs(currentScrollY - previousScrollY) > DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA;\n\n                if (isScrollingDown && hasReachedHideThreshold) {\n                    previousScrollYRef.current = currentScrollY;\n                    setIsAutoHidden(true);\n                    setIsOverflowTrayOpen(false);\n\n                    return;\n                }\n\n                if (!isScrollingDown && hasReachedHideThreshold) {\n                    previousScrollYRef.current = currentScrollY;\n                    setIsAutoHidden(false);\n\n                    return;\n                }\n\n                previousScrollYRef.current = currentScrollY;\n            });\n        };\n\n        updateAvailableWidth();\n\n        window.addEventListener('resize', updateAvailableWidth);\n        window.addEventListener('scroll', handleScroll, { passive: true });\n\n        return () => {\n            window.removeEventListener('resize', updateAvailableWidth);\n            window.removeEventListener('scroll', handleScroll);\n\n            if (scrollAnimationFrame.current) {\n                window.cancelAnimationFrame(scrollAnimationFrame.current);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isHidden && isOverflowTrayOpen) {\n            setIsOverflowTrayOpen(false);\n        }\n    }, [isHidden, isOverflowTrayOpen]);\n\n    const handleItemSelection = useCallback(\n        (item: DynamicToolbarItem) => {\n            if (item.isDisabled) {\n                return;\n            }\n\n            onItemSelect?.(item);\n        },\n        [onItemSelect],\n    );\n\n    const { visibleItems, overflowItems } = useMemo(() => {\n        // Derive how many items fit into the toolbar before overflowing.\n        if (!availableWidth) {\n            return { visibleItems: items, overflowItems: [] };\n        }\n\n        const totalSlots = Math.max(1, Math.floor(availableWidth / DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH));\n\n        if (items.length <= totalSlots) {\n            return { visibleItems: items, overflowItems: [] };\n        }\n\n        const visibleCount = Math.max(1, totalSlots - 1);\n\n        return {\n            visibleItems: items.slice(0, visibleCount),\n            overflowItems: items.slice(visibleCount),\n        };\n    }, [availableWidth, items]);\n\n    useEffect(() => {\n        if (overflowItems.length === 0 && isOverflowTrayOpen) {\n            setIsOverflowTrayOpen(false);\n        }\n    }, [overflowItems.length, isOverflowTrayOpen]);\n\n    const renderedVisibleItems = useMemo(\n        () =>\n            visibleItems.map((item) => (\n                <DynamicToolbarItemButton\n                    badgeMaxValue={DYNAMIC_TOOLBAR_BADGE_MAX_VALUE}\n                    isActive={item.id === activeItemId}\n                    item={item}\n                    key={item.id}\n                    onSelect={handleItemSelection}\n                />\n            )),\n        [activeItemId, handleItemSelection, visibleItems],\n    );\n\n    return (\n        <AnimatePresence initial={false}>\n            {!isHidden && (\n                <StyledMotionDynamicToolbar\n                    animate={{ y: 0 }}\n                    className={toolbarClassName}\n                    exit={{ y: '100%' }}\n                    initial={{ y: '100%' }}\n                    key=\"dynamic-toolbar\"\n                    transition={{ duration: 0.2, type: 'tween' }}\n                >\n                    <DynamicToolbarOverflowTray\n                        activeItemId={activeItemId}\n                        handleItemSelection={handleItemSelection}\n                        items={overflowItems}\n                        isOpen={isOverflowTrayOpen}\n                        key=\"overflow-tray\"\n                    />\n                    <StyledDynamicToolbarBackground $layout={layout} />\n                    <StyledDynamicToolbarContent>\n                        {renderedVisibleItems}\n                    </StyledDynamicToolbarContent>\n                    {overflowItems.length > 0 && (\n                        <StyledDynamicToolbarOverflowTrigger\n                            onClick={handleToggleOverflowTrayVisibility}\n                        >\n                            <Icon\n                                color={layout === DynamicToolbarLayout.Area ? 'white' : undefined}\n                                icons={['fa fa-ellipsis-vertical']}\n                                size={22}\n                            />\n                        </StyledDynamicToolbarOverflowTrigger>\n                    )}\n                </StyledMotionDynamicToolbar>\n            )}\n        </AnimatePresence>\n    );\n};\n\nDynamicToolbar.displayName = 'DynamicToolbar';\n\nexport default DynamicToolbar;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/dynamic-toolbar/DynamicToolbar.styles.js

@@ -0,0 +1,64 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+import { DynamicToolbarLayout } from './DynamicToolbar.types';
+import { DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX, DYNAMIC_TOOLBAR_CONTENT_PADDING_PX, DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW, DYNAMIC_TOOLBAR_HEIGHT_PX, DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX, DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX } from './DynamicToolbar.constants';
+export const StyledMotionDynamicToolbar = styled(motion.div)`
+    align-items: flex-start;
+    bottom: 0;
+    display: flex;
+    height: ${DYNAMIC_TOOLBAR_HEIGHT_PX}px;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    width: 100%;
+`;
+export const StyledDynamicToolbarContent = styled.div`
+    display: flex;
+    gap: 6px;
+    height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;
+    justify-content: center;
+    padding: ${DYNAMIC_TOOLBAR_CONTENT_PADDING_PX}px;
+    width: ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;
+`;
+export const StyledDynamicToolbarBackground = styled.div`
+    background-color: ${({
+  theme
+}) => theme.primary};
+    position: absolute;
+    transition:
+        border-radius 0.3s ease,
+        box-shadow 0.3s ease,
+        height 0.3s ease,
+        width 0.3s ease;
+
+    ${({
+  $layout
+}) => $layout === DynamicToolbarLayout.Floating ? css`
+                  border-radius: 8px;
+                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                  height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;
+                  width: ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;
+              ` : css`
+                  border-radius: 0;
+                  box-shadow: none;
+                  height: 100%;
+                  width: 100vw;
+              `}
+`;
+export const StyledDynamicToolbarOverflowTrigger = styled.button`
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: calc(
+        ((100vw - ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw) / 2) -
+            ${DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX}px
+    );
+    width: ${DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX}px;
+`;
+//# sourceMappingURL=DynamicToolbar.styles.js.map

package/lib/esm/components/dynamic-toolbar/DynamicToolbar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbar.styles.js","names":["motion","styled","css","DynamicToolbarLayout","DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX","DYNAMIC_TOOLBAR_CONTENT_PADDING_PX","DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW","DYNAMIC_TOOLBAR_HEIGHT_PX","DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX","DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX","StyledMotionDynamicToolbar","div","StyledDynamicToolbarContent","StyledDynamicToolbarBackground","theme","primary","$layout","Floating","StyledDynamicToolbarOverflowTrigger","button"],"sources":["../../../../src/components/dynamic-toolbar/DynamicToolbar.styles.ts"],"sourcesContent":["import { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { DynamicToolbarLayout } from './DynamicToolbar.types';\nimport {\n    DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX,\n    DYNAMIC_TOOLBAR_CONTENT_PADDING_PX,\n    DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW,\n    DYNAMIC_TOOLBAR_HEIGHT_PX,\n    DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX,\n    DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX,\n} from './DynamicToolbar.constants';\n\nexport const StyledMotionDynamicToolbar = styled(motion.div)`\n    align-items: flex-start;\n    bottom: 0;\n    display: flex;\n    height: ${DYNAMIC_TOOLBAR_HEIGHT_PX}px;\n    justify-content: center;\n    left: 0;\n    position: fixed;\n    width: 100%;\n`;\n\nexport const StyledDynamicToolbarContent = styled.div`\n    display: flex;\n    gap: 6px;\n    height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;\n    justify-content: center;\n    padding: ${DYNAMIC_TOOLBAR_CONTENT_PADDING_PX}px;\n    width: ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;\n`;\n\ntype StyledDynamicToolbarBackgroundProps = WithTheme<{\n    $layout: DynamicToolbarLayout;\n}>;\n\nexport const StyledDynamicToolbarBackground = styled.div<StyledDynamicToolbarBackgroundProps>`\n    background-color: ${({ theme }) => theme.primary};\n    position: absolute;\n    transition:\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease,\n        height 0.3s ease,\n        width 0.3s ease;\n\n    ${({ $layout }) =>\n        $layout === DynamicToolbarLayout.Floating\n            ? css`\n                  border-radius: 8px;\n                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n                  height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;\n                  width: ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;\n              `\n            : css`\n                  border-radius: 0;\n                  box-shadow: none;\n                  height: 100%;\n                  width: 100vw;\n              `}\n`;\n\nexport const StyledDynamicToolbarOverflowTrigger = styled.button`\n    align-items: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;\n    justify-content: center;\n    padding: 0;\n    position: absolute;\n    right: calc(\n        ((100vw - ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw) / 2) -\n            ${DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX}px\n    );\n    width: ${DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX}px;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACIC,iCAAiC,EACjCC,kCAAkC,EAClCC,gCAAgC,EAChCC,yBAAyB,EACzBC,0CAA0C,EAC1CC,yCAAyC,QACtC,4BAA4B;AAEnC,OAAO,MAAMC,0BAA0B,GAAGT,MAAM,CAACD,MAAM,CAACW,GAAG,CAAC;AAC5D;AACA;AACA;AACA,cAAcJ,yBAAyB;AACvC;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,2BAA2B,GAAGX,MAAM,CAACU,GAAG;AACrD;AACA;AACA,cAAcP,iCAAiC;AAC/C;AACA,eAAeC,kCAAkC;AACjD,aAAaC,gCAAgC;AAC7C,CAAC;AAMD,OAAO,MAAMO,8BAA8B,GAAGZ,MAAM,CAACU,GAAwC;AAC7F,wBAAwB,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK,CAACC,OAAO;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAQ,CAAC,KACVA,OAAO,KAAKb,oBAAoB,CAACc,QAAQ,GACnCf,GAAG;AACjB;AACA;AACA,4BAA4BE,iCAAiC;AAC7D,2BAA2BE,gCAAgC;AAC3D,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMgB,mCAAmC,GAAGjB,MAAM,CAACkB,MAAM;AAChE;AACA;AACA;AACA;AACA;AACA,cAAcf,iCAAiC;AAC/C;AACA;AACA;AACA;AACA,oBAAoBE,gCAAgC;AACpD,cAAcE,0CAA0C;AACxD;AACA,aAAaC,yCAAyC;AACtD,CAAC","ignoreList":[]}

package/lib/esm/components/dynamic-toolbar/DynamicToolbar.types.js

@@ -0,0 +1,7 @@
+export let DynamicToolbarLayout = /*#__PURE__*/function (DynamicToolbarLayout) {
+  DynamicToolbarLayout["Area"] = "area";
+  DynamicToolbarLayout["Hidden"] = "hidden";
+  DynamicToolbarLayout["Floating"] = "floating";
+  return DynamicToolbarLayout;
+}({});
+//# sourceMappingURL=DynamicToolbar.types.js.map

package/lib/esm/components/dynamic-toolbar/DynamicToolbar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbar.types.js","names":["DynamicToolbarLayout"],"sources":["../../../../src/components/dynamic-toolbar/DynamicToolbar.types.ts"],"sourcesContent":["import type { IconProps } from '@chayns-components/core';\n\nexport enum DynamicToolbarLayout {\n    Area = 'area',\n    Hidden = 'hidden',\n    Floating = 'floating',\n}\n\nexport type DynamicToolbarItem = {\n    // Optional badge count that highlights pending conversations.\n    badgeCount?: number;\n    // Icon names that are forwarded to the shared Icon component.\n    icons: IconProps['icons'];\n    // Unique identifier that drives selection state and callbacks.\n    id: string;\n    // Marks the action as temporarily unavailable.\n    isDisabled?: boolean;\n    // Human-readable label for accessibility announcements.\n    label: string;\n    // Optional visual separator to highlight contextual groups.\n    hasRightSeparator?: boolean;\n};\n\nexport type DynamicToolbarProps = {\n    /**\n     * @description Identifier of the action that should appear as active.\n     * @example\n     * <DynamicToolbar activeItemId=\"chat\" items={[...]} />\n     * @optional\n     */\n    activeItemId?: string | null;\n    /**\n     * @description Custom class name passed to the root container for styled-component overrides.\n     * @example\n     * <DynamicToolbar className=\"support-toolbar\" items={[...]} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * @description Ordered collection of toolbar actions that should be rendered.\n     * @example\n     * <DynamicToolbar items={[{ id: 'chat', icons: ['far fa-comment'], label: 'Chat' }]} />\n     */\n    items: DynamicToolbarItem[];\n    /**\n     * @description Controls whether the toolbar floats, snaps to the edges, or is hidden.\n     * @example\n     * <DynamicToolbar layout={DynamicToolbarLayout.FLUSH} items={[...]} />\n     * @default DynamicToolbarLayout.Floating\n     * @optional\n     */\n    layout?: DynamicToolbarLayout;\n    /**\n     * @description Callback that receives the item triggered by the user.\n     * @example\n     * <DynamicToolbar onItemSelect={(item) => console.log(item.id)} items={[...]} />\n     * @optional\n     */\n    onItemSelect?: (item: DynamicToolbarItem) => void;\n};\n"],"mappings":"AAEA,WAAYA,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA","ignoreList":[]}

package/lib/esm/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.js

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import { Icon } from '@chayns-components/core';
+import { StyledDynamicToolbarItemButton, StyledMotionDynamicToolbarItemButtonBackground, StyledDynamicToolbarItemIconWrapper, StyledDynamicToolbarItemBadge, StyledDynamicToolbarItemLabel } from './DynamicToolbarItemButton.styles';
+/**
+ * Renders a single toolbar entry and optionally shows a badge or label depending on the context.
+ */
+const DynamicToolbarItemButton = ({
+  badgeMaxValue,
+  isActive,
+  isInOverflowTray = false,
+  item,
+  onSelect
+}) => {
+  const hasBadge = typeof item.badgeCount === 'number' && item.badgeCount > 0;
+  const badgeDisplayValue = hasBadge && item.badgeCount ? formatBadgeValue(item.badgeCount, badgeMaxValue) : null;
+  const handleClick = useCallback(() => {
+    onSelect(item);
+  }, [onSelect, item]);
+  return /*#__PURE__*/React.createElement(StyledDynamicToolbarItemButton, {
+    type: "button",
+    disabled: item.isDisabled,
+    $isDisabled: Boolean(item.isDisabled),
+    $isInOverflowTray: isInOverflowTray,
+    $hasRightSeparator: item.hasRightSeparator,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(StyledDynamicToolbarItemIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    color: isInOverflowTray ? undefined : 'white',
+    icons: item.icons,
+    size: 22
+  }), badgeDisplayValue && /*#__PURE__*/React.createElement(StyledDynamicToolbarItemBadge, null, badgeDisplayValue)), isActive && /*#__PURE__*/React.createElement(StyledMotionDynamicToolbarItemButtonBackground, {
+    layoutId: "toolbarItemBackground"
+  }), isInOverflowTray && /*#__PURE__*/React.createElement(StyledDynamicToolbarItemLabel, {
+    className: "ellipsis"
+  }, item.label));
+};
+
+/**
+ * Converts the raw badge count into the compact value displayed next to the icon.
+ */
+const formatBadgeValue = (value, maxValue) => {
+  if (value > maxValue) {
+    return `${maxValue}+`;
+  }
+  return `${value}`;
+};
+export default DynamicToolbarItemButton;
+//# sourceMappingURL=DynamicToolbarItemButton.js.map

package/lib/esm/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarItemButton.js","names":["React","useCallback","Icon","StyledDynamicToolbarItemButton","StyledMotionDynamicToolbarItemButtonBackground","StyledDynamicToolbarItemIconWrapper","StyledDynamicToolbarItemBadge","StyledDynamicToolbarItemLabel","DynamicToolbarItemButton","badgeMaxValue","isActive","isInOverflowTray","item","onSelect","hasBadge","badgeCount","badgeDisplayValue","formatBadgeValue","handleClick","createElement","type","disabled","isDisabled","$isDisabled","Boolean","$isInOverflowTray","$hasRightSeparator","hasRightSeparator","onClick","color","undefined","icons","size","layoutId","className","label","value","maxValue"],"sources":["../../../../../src/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport { Icon } from '@chayns-components/core';\nimport type { DynamicToolbarItem } from '../DynamicToolbar.types';\nimport {\n    StyledDynamicToolbarItemButton,\n    StyledMotionDynamicToolbarItemButtonBackground,\n    StyledDynamicToolbarItemIconWrapper,\n    StyledDynamicToolbarItemBadge,\n    StyledDynamicToolbarItemLabel,\n} from './DynamicToolbarItemButton.styles';\n\nexport type DynamicToolbarItemButtonProps = {\n    /**\n     * Maximum badge value before switching to the `max+` format.\n     */\n    badgeMaxValue: number;\n    /**\n     * Indicates whether the corresponding item is currently active.\n     */\n    isActive: boolean;\n    /**\n     * Indicates whether the corresponding item is rendered within an overflow tray.\n     */\n    isInOverflowTray?: boolean;\n    /**\n     * Item configuration that should be rendered.\n     */\n    item: DynamicToolbarItem;\n    /**\n     * Callback triggered when the user selects the toolbar entry.\n     */\n    onSelect: (item: DynamicToolbarItem) => void;\n};\n\n/**\n * Renders a single toolbar entry and optionally shows a badge or label depending on the context.\n */\nconst DynamicToolbarItemButton: FC<DynamicToolbarItemButtonProps> = ({\n    badgeMaxValue,\n    isActive,\n    isInOverflowTray = false,\n    item,\n    onSelect,\n}) => {\n    const hasBadge = typeof item.badgeCount === 'number' && item.badgeCount > 0;\n\n    const badgeDisplayValue =\n        hasBadge && item.badgeCount ? formatBadgeValue(item.badgeCount, badgeMaxValue) : null;\n\n    const handleClick = useCallback(() => {\n        onSelect(item);\n    }, [onSelect, item]);\n\n    return (\n        <StyledDynamicToolbarItemButton\n            type=\"button\"\n            disabled={item.isDisabled}\n            $isDisabled={Boolean(item.isDisabled)}\n            $isInOverflowTray={isInOverflowTray}\n            $hasRightSeparator={item.hasRightSeparator}\n            onClick={handleClick}\n        >\n            <StyledDynamicToolbarItemIconWrapper>\n                <Icon color={isInOverflowTray ? undefined : 'white'} icons={item.icons} size={22} />\n                {badgeDisplayValue && (\n                    <StyledDynamicToolbarItemBadge>\n                        {badgeDisplayValue}\n                    </StyledDynamicToolbarItemBadge>\n                )}\n            </StyledDynamicToolbarItemIconWrapper>\n            {isActive && (\n                <StyledMotionDynamicToolbarItemButtonBackground layoutId=\"toolbarItemBackground\" />\n            )}\n            {isInOverflowTray && (\n                <StyledDynamicToolbarItemLabel className=\"ellipsis\">\n                    {item.label}\n                </StyledDynamicToolbarItemLabel>\n            )}\n        </StyledDynamicToolbarItemButton>\n    );\n};\n\n/**\n * Converts the raw badge count into the compact value displayed next to the icon.\n */\nconst formatBadgeValue = (value: number, maxValue: number): string => {\n    if (value > maxValue) {\n        return `${maxValue}+`;\n    }\n\n    return `${value}`;\n};\n\nexport default DynamicToolbarItemButton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAC9C,SAASC,IAAI,QAAQ,yBAAyB;AAE9C,SACIC,8BAA8B,EAC9BC,8CAA8C,EAC9CC,mCAAmC,EACnCC,6BAA6B,EAC7BC,6BAA6B,QAC1B,mCAAmC;AAyB1C;AACA;AACA;AACA,MAAMC,wBAA2D,GAAGA,CAAC;EACjEC,aAAa;EACbC,QAAQ;EACRC,gBAAgB,GAAG,KAAK;EACxBC,IAAI;EACJC;AACJ,CAAC,KAAK;EACF,MAAMC,QAAQ,GAAG,OAAOF,IAAI,CAACG,UAAU,KAAK,QAAQ,IAAIH,IAAI,CAACG,UAAU,GAAG,CAAC;EAE3E,MAAMC,iBAAiB,GACnBF,QAAQ,IAAIF,IAAI,CAACG,UAAU,GAAGE,gBAAgB,CAACL,IAAI,CAACG,UAAU,EAAEN,aAAa,CAAC,GAAG,IAAI;EAEzF,MAAMS,WAAW,GAAGjB,WAAW,CAAC,MAAM;IAClCY,QAAQ,CAACD,IAAI,CAAC;EAClB,CAAC,EAAE,CAACC,QAAQ,EAAED,IAAI,CAAC,CAAC;EAEpB,oBACIZ,KAAA,CAAAmB,aAAA,CAAChB,8BAA8B;IAC3BiB,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAET,IAAI,CAACU,UAAW;IAC1BC,WAAW,EAAEC,OAAO,CAACZ,IAAI,CAACU,UAAU,CAAE;IACtCG,iBAAiB,EAAEd,gBAAiB;IACpCe,kBAAkB,EAAEd,IAAI,CAACe,iBAAkB;IAC3CC,OAAO,EAAEV;EAAY,gBAErBlB,KAAA,CAAAmB,aAAA,CAACd,mCAAmC,qBAChCL,KAAA,CAAAmB,aAAA,CAACjB,IAAI;IAAC2B,KAAK,EAAElB,gBAAgB,GAAGmB,SAAS,GAAG,OAAQ;IAACC,KAAK,EAAEnB,IAAI,CAACmB,KAAM;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,EACnFhB,iBAAiB,iBACdhB,KAAA,CAAAmB,aAAA,CAACb,6BAA6B,QACzBU,iBAC0B,CAEF,CAAC,EACrCN,QAAQ,iBACLV,KAAA,CAAAmB,aAAA,CAACf,8CAA8C;IAAC6B,QAAQ,EAAC;EAAuB,CAAE,CACrF,EACAtB,gBAAgB,iBACbX,KAAA,CAAAmB,aAAA,CAACZ,6BAA6B;IAAC2B,SAAS,EAAC;EAAU,GAC9CtB,IAAI,CAACuB,KACqB,CAEP,CAAC;AAEzC,CAAC;;AAED;AACA;AACA;AACA,MAAMlB,gBAAgB,GAAGA,CAACmB,KAAa,EAAEC,QAAgB,KAAa;EAClE,IAAID,KAAK,GAAGC,QAAQ,EAAE;IAClB,OAAO,GAAGA,QAAQ,GAAG;EACzB;EAEA,OAAO,GAAGD,KAAK,EAAE;AACrB,CAAC;AAED,eAAe5B,wBAAwB","ignoreList":[]}

package/lib/esm/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.styles.js

@@ -0,0 +1,73 @@
+import { motion } from 'motion/react';
+import styled from 'styled-components';
+export const StyledDynamicToolbarItemButton = styled.button`
+    align-items: center;
+    background: transparent;
+    border: none;
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    justify-content: space-between;
+    height: ${({
+  $isInOverflowTray
+}) => $isInOverflowTray ? '56px' : '40px'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    padding: 8px;
+    min-width: 0;
+    position: relative;
+    transition: opacity 0.2s ease;
+
+    &::after {
+        background: white;
+        bottom: 6px;
+        content: '';
+        display: ${({
+  $hasRightSeparator
+}) => $hasRightSeparator ? 'block' : 'none'};
+        opacity: 0.6;
+        position: absolute;
+        right: -4px;
+        top: 6px;
+        width: 2px;
+    }
+`;
+export const StyledDynamicToolbarItemIconWrapper = styled.span`
+    position: relative;
+`;
+export const StyledDynamicToolbarItemBadge = styled.span`
+    align-items: center;
+    background-color: #e53935;
+    border-radius: 9px;
+    color: #fff;
+    display: flex;
+    font-size: 0.75rem;
+    font-weight: bold;
+    height: 18px;
+    justify-content: center;
+    left: 50%;
+    line-height: 1;
+    min-width: 18px;
+    padding: 0 0.35rem;
+    position: absolute;
+    top: -8px;
+    z-index: 1;
+`;
+export const StyledMotionDynamicToolbarItemButtonBackground = styled(motion.div)`
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+`;
+export const StyledDynamicToolbarItemLabel = styled.span`
+    font-size: 0.75rem;
+    width: 100%;
+`;
+//# sourceMappingURL=DynamicToolbarItemButton.styles.js.map

package/lib/esm/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarItemButton.styles.js","names":["motion","styled","StyledDynamicToolbarItemButton","button","$isDisabled","$isInOverflowTray","$hasRightSeparator","StyledDynamicToolbarItemIconWrapper","span","StyledDynamicToolbarItemBadge","StyledMotionDynamicToolbarItemButtonBackground","div","StyledDynamicToolbarItemLabel"],"sources":["../../../../../src/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.styles.ts"],"sourcesContent":["import { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\ntype StyledDynamicToolbarItemButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $isInOverflowTray?: boolean;\n    $hasRightSeparator?: boolean;\n}>;\n\nexport const StyledDynamicToolbarItemButton = styled.button<StyledDynamicToolbarItemButtonProps>`\n    align-items: center;\n    background: transparent;\n    border: none;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    justify-content: space-between;\n    height: ${({ $isInOverflowTray }) => ($isInOverflowTray ? '56px' : '40px')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding: 8px;\n    min-width: 0;\n    position: relative;\n    transition: opacity 0.2s ease;\n\n    &::after {\n        background: white;\n        bottom: 6px;\n        content: '';\n        display: ${({ $hasRightSeparator }) => ($hasRightSeparator ? 'block' : 'none')};\n        opacity: 0.6;\n        position: absolute;\n        right: -4px;\n        top: 6px;\n        width: 2px;\n    }\n`;\n\nexport const StyledDynamicToolbarItemIconWrapper = styled.span`\n    position: relative;\n`;\n\nexport const StyledDynamicToolbarItemBadge = styled.span`\n    align-items: center;\n    background-color: #e53935;\n    border-radius: 9px;\n    color: #fff;\n    display: flex;\n    font-size: 0.75rem;\n    font-weight: bold;\n    height: 18px;\n    justify-content: center;\n    left: 50%;\n    line-height: 1;\n    min-width: 18px;\n    padding: 0 0.35rem;\n    position: absolute;\n    top: -8px;\n    z-index: 1;\n`;\n\nexport const StyledMotionDynamicToolbarItemButtonBackground = styled(motion.div)`\n    background: rgba(0, 0, 0, 0.15);\n    border-radius: 4px;\n    bottom: 0;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n`;\n\nexport const StyledDynamicToolbarItemLabel = styled.span`\n    font-size: 0.75rem;\n    width: 100%;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,8BAA8B,GAAGD,MAAM,CAACE,MAA2C;AAChG;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAkB,CAAC,KAAMA,iBAAiB,GAAG,MAAM,GAAG,MAAO;AAC9E,eAAe,CAAC;EAAED;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEE;AAAmB,CAAC,KAAMA,kBAAkB,GAAG,OAAO,GAAG,MAAO;AACtF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,mCAAmC,GAAGN,MAAM,CAACO,IAAI;AAC9D;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGR,MAAM,CAACO,IAAI;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,8CAA8C,GAAGT,MAAM,CAACD,MAAM,CAACW,GAAG,CAAC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGX,MAAM,CAACO,IAAI;AACxD;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/dynamic-toolbar/dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray.js

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+import { DYNAMIC_TOOLBAR_BADGE_MAX_VALUE } from '../DynamicToolbar.constants';
+import DynamicToolbarItemButton from '../dynamic-toolbar-item-button/DynamicToolbarItemButton';
+import { StyledDynamicToolbarOverflowTrayItems, StyledMotionDynamicToolbarOverflowTray, StyledMotionDynamicToolbarOverflowTraySpacer, StyledMotionDynamicToolbarOverflowTrayWrapper } from './DynamicToolbarOverflowTray.styles';
+const DynamicToolbarOverflowTray = ({
+  activeItemId,
+  handleItemSelection,
+  items,
+  isOpen
+}) => {
+  // Render overflow buttons only when the backing data changes.
+  const trayItems = useMemo(() => items.map(item => /*#__PURE__*/React.createElement(DynamicToolbarItemButton, {
+    badgeMaxValue: DYNAMIC_TOOLBAR_BADGE_MAX_VALUE,
+    isActive: item.id === activeItemId,
+    isInOverflowTray: true,
+    item: item,
+    key: item.id,
+    onSelect: handleItemSelection
+  })), [items, activeItemId, handleItemSelection]);
+  return /*#__PURE__*/React.createElement(StyledMotionDynamicToolbarOverflowTrayWrapper, null, /*#__PURE__*/React.createElement(StyledMotionDynamicToolbarOverflowTray, {
+    animate: {
+      y: isOpen ? 0 : '100%'
+    },
+    initial: false,
+    transition: {
+      duration: 0.2,
+      ease: 'easeOut'
+    }
+  }, /*#__PURE__*/React.createElement(StyledDynamicToolbarOverflowTrayItems, null, trayItems), /*#__PURE__*/React.createElement(StyledMotionDynamicToolbarOverflowTraySpacer, null)));
+};
+DynamicToolbarOverflowTray.displayName = 'DynamicToolbarOverflowTray';
+export default DynamicToolbarOverflowTray;
+//# sourceMappingURL=DynamicToolbarOverflowTray.js.map

package/lib/esm/components/dynamic-toolbar/dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarOverflowTray.js","names":["React","useMemo","DYNAMIC_TOOLBAR_BADGE_MAX_VALUE","DynamicToolbarItemButton","StyledDynamicToolbarOverflowTrayItems","StyledMotionDynamicToolbarOverflowTray","StyledMotionDynamicToolbarOverflowTraySpacer","StyledMotionDynamicToolbarOverflowTrayWrapper","DynamicToolbarOverflowTray","activeItemId","handleItemSelection","items","isOpen","trayItems","map","item","createElement","badgeMaxValue","isActive","id","isInOverflowTray","key","onSelect","animate","y","initial","transition","duration","ease","displayName"],"sources":["../../../../../src/components/dynamic-toolbar/dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { DYNAMIC_TOOLBAR_BADGE_MAX_VALUE } from '../DynamicToolbar.constants';\nimport DynamicToolbarItemButton from '../dynamic-toolbar-item-button/DynamicToolbarItemButton';\nimport type { DynamicToolbarItem } from '../DynamicToolbar.types';\nimport {\n    StyledDynamicToolbarOverflowTrayItems,\n    StyledMotionDynamicToolbarOverflowTray,\n    StyledMotionDynamicToolbarOverflowTraySpacer,\n    StyledMotionDynamicToolbarOverflowTrayWrapper,\n} from './DynamicToolbarOverflowTray.styles';\n\nexport type DynamicToolbarOverflowTrayProps = {\n    activeItemId?: string | null;\n    handleItemSelection: (item: DynamicToolbarItem) => void;\n    items: DynamicToolbarItem[];\n    isOpen: boolean;\n};\n\nconst DynamicToolbarOverflowTray: FC<DynamicToolbarOverflowTrayProps> = ({\n    activeItemId,\n    handleItemSelection,\n    items,\n    isOpen,\n}) => {\n    // Render overflow buttons only when the backing data changes.\n    const trayItems = useMemo(\n        () =>\n            items.map((item) => (\n                <DynamicToolbarItemButton\n                    badgeMaxValue={DYNAMIC_TOOLBAR_BADGE_MAX_VALUE}\n                    isActive={item.id === activeItemId}\n                    isInOverflowTray\n                    item={item}\n                    key={item.id}\n                    onSelect={handleItemSelection}\n                />\n            )),\n        [items, activeItemId, handleItemSelection],\n    );\n\n    return (\n        <StyledMotionDynamicToolbarOverflowTrayWrapper>\n            <StyledMotionDynamicToolbarOverflowTray\n                animate={{ y: isOpen ? 0 : '100%' }}\n                initial={false}\n                transition={{ duration: 0.2, ease: 'easeOut' }}\n            >\n                <StyledDynamicToolbarOverflowTrayItems>\n                    {trayItems}\n                </StyledDynamicToolbarOverflowTrayItems>\n                <StyledMotionDynamicToolbarOverflowTraySpacer />\n            </StyledMotionDynamicToolbarOverflowTray>\n        </StyledMotionDynamicToolbarOverflowTrayWrapper>\n    );\n};\n\nDynamicToolbarOverflowTray.displayName = 'DynamicToolbarOverflowTray';\n\nexport default DynamicToolbarOverflowTray;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SAASC,+BAA+B,QAAQ,6BAA6B;AAC7E,OAAOC,wBAAwB,MAAM,yDAAyD;AAE9F,SACIC,qCAAqC,EACrCC,sCAAsC,EACtCC,4CAA4C,EAC5CC,6CAA6C,QAC1C,qCAAqC;AAS5C,MAAMC,0BAA+D,GAAGA,CAAC;EACrEC,YAAY;EACZC,mBAAmB;EACnBC,KAAK;EACLC;AACJ,CAAC,KAAK;EACF;EACA,MAAMC,SAAS,GAAGZ,OAAO,CACrB,MACIU,KAAK,CAACG,GAAG,CAAEC,IAAI,iBACXf,KAAA,CAAAgB,aAAA,CAACb,wBAAwB;IACrBc,aAAa,EAAEf,+BAAgC;IAC/CgB,QAAQ,EAAEH,IAAI,CAACI,EAAE,KAAKV,YAAa;IACnCW,gBAAgB;IAChBL,IAAI,EAAEA,IAAK;IACXM,GAAG,EAAEN,IAAI,CAACI,EAAG;IACbG,QAAQ,EAAEZ;EAAoB,CACjC,CACJ,CAAC,EACN,CAACC,KAAK,EAAEF,YAAY,EAAEC,mBAAmB,CAC7C,CAAC;EAED,oBACIV,KAAA,CAAAgB,aAAA,CAACT,6CAA6C,qBAC1CP,KAAA,CAAAgB,aAAA,CAACX,sCAAsC;IACnCkB,OAAO,EAAE;MAAEC,CAAC,EAAEZ,MAAM,GAAG,CAAC,GAAG;IAAO,CAAE;IACpCa,OAAO,EAAE,KAAM;IACfC,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAU;EAAE,gBAE/C5B,KAAA,CAAAgB,aAAA,CAACZ,qCAAqC,QACjCS,SACkC,CAAC,eACxCb,KAAA,CAAAgB,aAAA,CAACV,4CAA4C,MAAE,CACX,CACG,CAAC;AAExD,CAAC;AAEDE,0BAA0B,CAACqB,WAAW,GAAG,4BAA4B;AAErE,eAAerB,0BAA0B","ignoreList":[]}