@eleventheye/asui 2.7.7 → 2.7.9

package/dist/asiconbutton/ASIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASIconButton.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuF7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ASIconButton.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqF7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/asiconbutton/ASIconButton.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const ASUI_types_1 = require("../apptypes/ASUI.types");
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
 const styles_1 = require("./styles");
-const ASIconButton = ({ className = '', onIconButtonTap = () => undefined, selected = false, toggle = false, size = ASUI_types_1.ComponentSize.Medium, iconSize = size === ASUI_types_1.ComponentSize.Small ? 22 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 40, paddingSize = [ASUI_types_1.ComponentSize.Medium, ASUI_types_1.ComponentSize.Medium], disabled = false, isLoading = false, icon: Icon, theme = astheme_1.default, strokeWidth = 1, strokeColor = astheme_1.default.button.buttonBg, fillColor = astheme_1.default.button.buttonColor, color = astheme_1.default.button.buttonColor, text, id, style, ...props }) => {
+const ASIconButton = ({ className = '', onIconButtonTap = () => undefined, selected = false, toggle = false, size = ASUI_types_1.ComponentSize.Medium, iconSize = size === ASUI_types_1.ComponentSize.Small ? 22 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 40, disabled = false, isLoading = false, icon: Icon, theme = astheme_1.default, strokeWidth = 0.1, strokeColor = astheme_1.default.button.buttonBg, fillColor = astheme_1.default.button.buttonColor, color = astheme_1.default.button.buttonColor, id, style, ...props }) => {
     const tapDebounceRef = (0, react_1.useRef)('None');
     const [isSelected, setIsSelected] = (0, react_1.useState)(selected);
     (0, react_1.useEffect)(() => {

package/dist/asiconbutton/ASIconButton.types.d.ts

@@ -1,19 +1,17 @@
 import { PointerEvent } from 'react';
-import { ASComponentSize, ASPaddingSize, ASTheme } from '../apptypes/ASUI.types';
+import { ASComponentSize, ASTheme } from '../apptypes/ASUI.types';
 import { ASIcon, IconProps } from '../icons';
 type ASIconButtonOwnProps = {
     className?: string;
-    text?: string;
     selected?: boolean;
     toggle?: boolean;
     size?: ASComponentSize;
     iconSize?: number;
     theme?: ASTheme;
-    paddingSize?: ASPaddingSize;
     isLoading?: boolean;
     icon: typeof ASIcon;
     onIconButtonTap?: (e: PointerEvent) => void;
-} & IconProps & Omit<React.HTMLProps<HTMLDivElement>, 'size'>;
+} & IconProps & Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'text'>;
 export type ASIconButtonProps = React.PropsWithChildren<ASIconButtonOwnProps>;
 export {};
 //# sourceMappingURL=ASIconButton.types.d.ts.map

package/dist/asiconbutton/ASIconButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASIconButton.types.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,QAAQ,CAAC,EAAE,OAAO,CAAC;IASnB,MAAM,CAAC,EAAE,OAAO,CAAC;IASjB,IAAI,CAAC,EAAE,eAAe,CAAC;IAQvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,WAAW,CAAC,EAAE,aAAa,CAAC;IAO5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAOpB,IAAI,EAAE,OAAO,MAAM,CAAC;IAEpB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CAC7C,GAAG,SAAS,GACX,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"ASIconButton.types.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IASnB,MAAM,CAAC,EAAE,OAAO,CAAC;IASjB,IAAI,CAAC,EAAE,eAAe,CAAC;IAQvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,SAAS,CAAC,EAAE,OAAO,CAAC;IAOpB,IAAI,EAAE,OAAO,MAAM,CAAC;IAEpB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CAC7C,GAAG,SAAS,GACX,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEzD,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC"}

package/dist/asnavbar/ASNavBar.js

@@ -32,7 +32,7 @@ exports.defaultNavBarDWStyleOptions = {
     $hideHorizontalScrollbarInDW: true,
     $gap: 30,
     $borderRadius: 6,
-    $padding: '0 44px',
+    $padding: '0',
     $margin: '0 auto',
     $minWidth: 300,
     $minWidthUnit: 'px',
@@ -46,7 +46,7 @@ exports.defaultNavBarMWStyleOptions = {
     $maxWidth: 300,
     $maxWidthUnit: 'px',
     $borderRadius: 6,
-    $padding: '0 4px',
+    $padding: '0',
 };
 const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions = { ...exports.defaultNavBarStyleOptions }, dwStyleOptions = { ...exports.defaultNavBarDWStyleOptions }, mwStyleOptions = { ...exports.defaultNavBarMWStyleOptions }, }) => {
     const visitedCountRef = (0, react_1.useRef)(0);

package/dist/asnavbar/desktop/ASNavBarDW.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarDW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/ASNavBarDW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAI/F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQ9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4IvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ASNavBarDW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/ASNavBarDW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAI/F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAc9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmJvC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/asnavbar/desktop/ASNavBarDW.js

@@ -16,13 +16,14 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
     const selectedItemElRef = (0, react_1.useRef)(null);
     const navBarRef = (0, react_1.useRef)(null);
     const navBarHighlightBoxRef = (0, react_1.useRef)(null);
+    const navBarScrollRef = (0, react_1.useRef)(null);
     const [selected, setSelected] = (0, react_1.useState)(selectedItemId);
     const slideHighlightToSelectedItem = (selectedItemEl, itemId) => {
-        if (!navBarHighlightBoxRef.current || !navBarRef.current)
+        if (!navBarHighlightBoxRef.current || !navBarScrollRef.current)
             return;
         selectedItemElRef.current = selectedItemEl;
         const selectedElRect = selectedItemEl.getBoundingClientRect();
-        const parentRect = navBarRef.current.getBoundingClientRect();
+        const parentRect = navBarScrollRef.current.getBoundingClientRect();
         const offsetToSelectedEl = selectedElRect.left - parentRect.left;
         const selectedBox = navBarHighlightBoxRef.current;
         const selectedBoxWidth = selectedElRect.width;
@@ -37,11 +38,12 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
         });
     };
     const onScrollEndHandler = () => {
-        if (!navBarHighlightBoxRef.current || !navBarRef.current || !selectedItemElRef.current)
+        if (!navBarHighlightBoxRef.current || !navBarScrollRef.current || !navBarRef.current || !selectedItemElRef.current)
             return;
         const selectedItemEl = selectedItemElRef.current;
         const selectedElRect = selectedItemEl.getBoundingClientRect();
-        const parentRect = navBarRef.current.getBoundingClientRect();
+        const parentRect = navBarScrollRef.current.getBoundingClientRect();
+        const rootRect = navBarRef.current.getBoundingClientRect();
         const offsetToSelectedEl = selectedElRect.left - parentRect.left;
         const selectedBox = navBarHighlightBoxRef.current;
         const selectedBoxWidth = selectedElRect.width;
@@ -96,6 +98,6 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
     };
     const onItemResizedHandler = (itemId, item) => slideHighlightToSelectedItem(item, itemId);
     const isSelected = (itemId) => selected === itemId;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarDWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { onScrollEnd: onScrollEndHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbaritem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler, size: size }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { onArrowButtonClicked: scrollToDirection, className: styles_1.ASNavButtonsDWContainer, theme: theme, size: size, totalItemCount: totalItemCount, selectedIndex: selectedIndex, styleOptions: styleOptions })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarDWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsxs)(styles_1.ASNavBarScrollableItems, { ref: navBarScrollRef, children: [(0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { onScrollEnd: onScrollEndHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbaritem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler, size: size }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme })] }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { onArrowButtonClicked: scrollToDirection, className: styles_1.ASNavButtonsDWContainer, theme: theme, size: size, totalItemCount: totalItemCount, selectedIndex: selectedIndex, styleOptions: styleOptions, isMobile: false })] }));
 };
 exports.default = ASNavBarDW;

package/dist/asnavbar/desktop/styles.d.ts

@@ -1,4 +1,4 @@
-import { ASStyleOptions, ASTheme } from '../../apptypes/ASUI.types';
+import { ASTheme } from '../../apptypes/ASUI.types';
 interface ASNavBarStyledProps {
     theme: ASTheme;
     $mobileMode?: boolean;
@@ -24,14 +24,8 @@ interface ASNavBarItemStyledProps {
     $padding?: string;
 }
 export declare const ASNavBarItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemStyledProps>> & string;
-interface ASNavBarItemPaddingProps {
-    theme: ASTheme;
-    $mobileMode?: boolean;
-    $styleOptions?: ASStyleOptions | {};
-    $selected?: boolean;
-}
-export declare const ASNavBarItemPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemPaddingProps>> & string;
 export declare const ASNavButtonsDWContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ASNavBarScrollableItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ASScrollContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
 export {};
 //# sourceMappingURL=styles.d.ts.map

package/dist/asnavbar/desktop/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAGpE,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAsBD,eAAO,MAAM,gBAAgB,wPAmB5B,CAAC;AAEF,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,qQAc/B,CAAC;AAEF,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,4PAuC9B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,cAAc,GAAG,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,6PAiB/B,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAInC,CAAC;AAEF,eAAO,MAAM,uBAAuB,wPAYnC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAqBpD,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAsBD,eAAO,MAAM,gBAAgB,wPAoB5B,CAAC;AAEF,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,qQAc/B,CAAC;AAEF,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,4PAuC9B,CAAC;AA4BF,eAAO,MAAM,uBAAuB,6NAInC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAYnC,CAAC;AAEF,eAAO,MAAM,uBAAuB,wPAWnC,CAAC"}

package/dist/asnavbar/desktop/styles.js

@@ -1,9 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ASScrollContainerStyled = exports.ASNavButtonsDWContainer = exports.ASNavBarItemPadding = exports.ASNavBarItemStyled = exports.ASSelectedBoxStyled = exports.ASNavBarDWStyled = void 0;
+exports.ASScrollContainerStyled = exports.ASNavBarScrollableItems = exports.ASNavButtonsDWContainer = exports.ASNavBarItemStyled = exports.ASSelectedBoxStyled = exports.ASNavBarDWStyled = void 0;
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importStar(require("styled-components"));
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const HideScrollBarConfig = (0, styled_components_1.css) `
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`;
+const maxWidth = (0, styled_components_1.css) `
+  width: 100%;
+  @supports (width: -webkit-fill-available) {
+    width: -webkit-fill-available;
+  }
+`;
 const dimensionsForSizes = (0, styled_components_1.css) `
   &.ASSmall {
     height: 30px;
@@ -31,10 +47,11 @@ exports.ASNavBarDWStyled = styled_components_1.default.div `
   flex-direction: row;
   position: relative;
   gap: ${({ $gap = 30 }) => $gap}px;
-  width: fit-content;
+  width: -webkit-fill-available;
+  contain: layout;
   grid-row: 1;
   min-width: ${({ $minWidth = 300 }) => $minWidth}px;
-  padding: ${({ $padding = '0 44px' }) => $padding};
+  padding: ${({ $padding = '0' }) => $padding};
   border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
   background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
   box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
@@ -96,28 +113,24 @@ exports.ASNavBarItemStyled = styled_components_1.default.div `
     }
   }
 `;
-exports.ASNavBarItemPadding = styled_components_1.default.div `
-  padding: 0 4px;
-  pointer-events: none;
-  user-select: none;
-  ${({ $selected = false, theme = astheme_1.default }) => $selected
-    ? `
-      & > div > svg > path {
-        stroke-width: 0.4;
-        stroke: ${theme.navbar.navBarItemColorSelected};
-      }`
-    : `
-      & > div > svg > path {
-        stroke-width: 0.4;
-        stroke: ${theme.navbar.navBarItemColor};
-      }
-  `};
-`;
 exports.ASNavButtonsDWContainer = styled_components_1.default.div `
   position: fixed;
   max-width: inherit;
   height: inherit;
 `;
+exports.ASNavBarScrollableItems = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  // overflow-x: overlay;
+  width: fit-content;
+  padding: 0 44px;
+  ${HideScrollBarConfig}
+`;
 exports.ASScrollContainerStyled = styled_components_1.default.div `
   display: flex;
   justify-content: flex-start;
@@ -125,9 +138,8 @@ exports.ASScrollContainerStyled = styled_components_1.default.div `
   flex-direction: row;
   position: relative;
   overflow: hidden;
+  overflow-x: auto;
+  width: 100%
   gap: 16px;
-  width: 100%;
-  @supports (width: -webkit-fill-available) {
-    width: -webkit-fill-available;
-  }
+  ${HideScrollBarConfig}
 `;

package/dist/asnavbar/mobile/ASNavBarMW.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarMW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/ASNavBarMW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAM3F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiKvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ASNavBarMW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/ASNavBarMW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAM3F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkKvC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/asnavbar/mobile/ASNavBarMW.js

@@ -98,6 +98,6 @@ const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', na
             selectNext(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarMWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxMWStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ScrollableNavBarItems, { id: "ScrollableNavBarItems", ref: scrollContainerRef, onScrollEnd: onScrollEndedHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarItemMWStyled, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, size: size, title: item.displayText, onItemClick: () => setShowSelectionPanel(true) }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { ...styleOptions, onArrowButtonClicked: onButtonsPressed, theme: theme, size: size, totalItemCount: navItems.length, selectedIndex: selectedIndex, styleOptions: styleOptions }), (0, jsx_runtime_1.jsx)(asmodal_1.default, { isOpen: showSelectionPanel, onBackdropClick: () => setShowSelectionPanel(false), className: className, children: (0, jsx_runtime_1.jsx)(navbarpickpanel_1.default, { theme: theme, size: size, className: className, navItems: navItems, selectedId: selected, selectedIndex: selectedIndex, onItemSelected: onNavBarItemPickedHandler }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarMWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxMWStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ScrollableNavBarItems, { id: "ScrollableNavBarItems", ref: scrollContainerRef, onScrollEnd: onScrollEndedHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarItemMWStyled, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, size: size, title: item.displayText, onItemClick: () => setShowSelectionPanel(true) }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { ...styleOptions, onArrowButtonClicked: onButtonsPressed, theme: theme, size: size, totalItemCount: navItems.length, selectedIndex: selectedIndex, styleOptions: styleOptions, isMobile: true }), (0, jsx_runtime_1.jsx)(asmodal_1.default, { isOpen: showSelectionPanel, onBackdropClick: () => setShowSelectionPanel(false), className: className, children: (0, jsx_runtime_1.jsx)(navbarpickpanel_1.default, { theme: theme, size: size, className: className, navItems: navItems, selectedId: selected, selectedIndex: selectedIndex, onItemSelected: onNavBarItemPickedHandler }) })] }));
 };
 exports.default = ASNavBarMW;

package/dist/asnavbar/mobile/styles.d.ts

@@ -27,10 +27,5 @@ interface ASNavBarItemStyledProps {
 export declare const ASNavBarItemMWStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../ASNavBar.types").ASNavBarItemProps, ASNavBarItemStyledProps>> & string & Omit<import("react").FC<import("../ASNavBar.types").ASNavBarItemProps>, keyof import("react").Component<any, {}, any>>;
 export declare const ScrollableNavBarItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ASNavBarMWStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
-interface ASNavBarItemPaddingProps {
-    theme: ASTheme;
-    $selected?: boolean;
-}
-export declare const ASNavBarItemPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemPaddingProps>> & string;
 export {};
 //# sourceMappingURL=styles.d.ts.map

package/dist/asnavbar/mobile/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAwB1E,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,eAAO,MAAM,qBAAqB,qQAgBjC,CAAC;AAEF,UAAU,mBAAoB,SAAQ,oBAAoB;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,oBAAoB,iUAwDhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NA0BjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,wPAkB5B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,6PAiB/B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAwB1E,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,eAAO,MAAM,qBAAqB,qQAgBjC,CAAC;AAEF,UAAU,mBAAoB,SAAQ,oBAAoB;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,oBAAoB,iUAwDhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NA0BjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,wPAkB5B,CAAC"}

package/dist/asnavbar/mobile/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ASNavBarItemPadding = exports.ASNavBarMWStyled = exports.ScrollableNavBarItems = exports.ASNavBarItemMWStyled = exports.ASSelectedBoxMWStyled = void 0;
+exports.ASNavBarMWStyled = exports.ScrollableNavBarItems = exports.ASNavBarItemMWStyled = exports.ASSelectedBoxMWStyled = void 0;
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importStar(require("styled-components"));
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
@@ -137,25 +137,8 @@ exports.ASNavBarMWStyled = styled_components_1.default.div `
   max-width: ${({ $maxWidth = 300, $maxWidthUnit = 'px' }) => `${$maxWidth}${$maxWidthUnit}`};
   border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
   background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
-  padding: ${({ $padding = '0 4px' }) => $padding};
+  padding: ${({ $padding = '0' }) => $padding};
   box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
 
   ${dimensionsForSizes}
 `;
-exports.ASNavBarItemPadding = styled_components_1.default.div `
-  padding: 0 4px;
-  pointer-events: none;
-  user-select: none;
-  ${({ $selected = false, theme = astheme_1.default }) => $selected
-    ? `
-      & > div > svg > path {
-        stroke-width: 0.4;
-        stroke: ${theme.navbar.navBarItemColorSelected};
-      }`
-    : `
-      & > div > svg > path {
-        stroke-width: 0.4;
-        stroke: ${theme.navbar.navBarItemColor};
-      }
-  `};
-`;

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarArrowButtons.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAMzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CA2BvF,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAyBhE,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAyBjE,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"ASNavBarArrowButtons.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAMzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CAmCvF,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2BhE,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2BjE,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.js

@@ -10,24 +10,24 @@ const icons_1 = require("../../icons");
 const styles_1 = require("./styles");
 const clsY = 'background: goldenrod; color: #000000; border-radius: 10px;';
 const clsG = 'background: forestgreen; color: #000000; border-radius: 10px;';
-const ASNavBarArrowButtons = ({ className = '', onArrowButtonClicked = () => undefined, selectedIndex = 0, totalItemCount = 0, size = apptypes_1.ComponentSize.Medium, styleOptions = ASNavBar_1.defaultNavBarStyleOptions, theme = astheme_1.default, }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarArrowButtonsStyled, { className: `${className} ${size}`, theme: theme, styleOptions: styleOptions, children: [(0, jsx_runtime_1.jsx)(ASLeftNavBarArrowButton, { onArrowButtonClicked: onArrowButtonClicked, theme: theme, size: size, selectedIndex: selectedIndex, disabled: selectedIndex <= 0 }), (0, jsx_runtime_1.jsx)(ASRightNavBarArrowButton, { onArrowButtonClicked: onArrowButtonClicked, theme: theme, size: size, selectedIndex: selectedIndex, disabled: selectedIndex >= totalItemCount - 1 })] }));
+const ASNavBarArrowButtons = ({ className = '', onArrowButtonClicked = () => undefined, selectedIndex = 0, totalItemCount = 0, size = apptypes_1.ComponentSize.Medium, styleOptions = ASNavBar_1.defaultNavBarStyleOptions, theme = astheme_1.default, isMobile = false, }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarArrowButtonsStyled, { className: `${className} ${size}`, theme: theme, isMobile: isMobile, styleOptions: styleOptions, children: [(0, jsx_runtime_1.jsx)(ASLeftNavBarArrowButton, { onArrowButtonClicked: onArrowButtonClicked, theme: theme, size: size, selectedIndex: selectedIndex, disabled: selectedIndex <= 0, isMobile: isMobile }), (0, jsx_runtime_1.jsx)(ASRightNavBarArrowButton, { onArrowButtonClicked: onArrowButtonClicked, theme: theme, size: size, selectedIndex: selectedIndex, disabled: selectedIndex >= totalItemCount - 1, isMobile: isMobile })] }));
 };
 exports.ASNavBarArrowButtons = ASNavBarArrowButtons;
 exports.default = exports.ASNavBarArrowButtons;
-const ASLeftNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, disabled = false, onArrowButtonClicked = () => undefined, }) => {
+const ASLeftNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, disabled = false, onArrowButtonClicked = () => undefined, isMobile = false, }) => {
     const tapHandler = (e, dir) => {
         console.log(`e: %c ${e.currentTarget.role} %c, dir: %c ${dir} %c`, clsG, '', clsY, '');
         onArrowButtonClicked(e, dir);
     };
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonLeftStyled, { icon: icons_1.ArrowLeftIcon, onIconButtonTap: (e) => tapHandler(e, apptypes_1.ArrowButtonDirection.Left), theme: theme, size: size, toggle: false, selected: false, disabled: disabled, id: "LeftButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonLeftStyled, { icon: icons_1.ArrowLeftIcon, onIconButtonTap: (e) => tapHandler(e, apptypes_1.ArrowButtonDirection.Left), theme: theme, size: size, toggle: false, selected: false, disabled: disabled, isMobile: isMobile, id: "LeftButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
 };
 exports.ASLeftNavBarArrowButton = ASLeftNavBarArrowButton;
-const ASRightNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, onArrowButtonClicked = () => undefined, disabled = false, }) => {
+const ASRightNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, onArrowButtonClicked = () => undefined, disabled = false, isMobile = false, }) => {
     const tapHandler = (e, dir) => {
         console.log(`e: %c ${e.currentTarget.role} %c, dir: %c ${dir} %c`, clsG, '', clsY, '');
         onArrowButtonClicked(e, dir);
     };
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonRightStyled, { icon: icons_1.ArrowRightIcon, onIconButtonTap: (e) => tapHandler(e, apptypes_1.ArrowButtonDirection.Right), theme: theme, toggle: false, selected: false, size: size, disabled: disabled, id: "RightButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonRightStyled, { icon: icons_1.ArrowRightIcon, onIconButtonTap: (e) => tapHandler(e, apptypes_1.ArrowButtonDirection.Right), theme: theme, toggle: false, selected: false, size: size, disabled: disabled, isMobile: isMobile, id: "RightButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
 };
 exports.ASRightNavBarArrowButton = ASRightNavBarArrowButton;

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.d.ts

@@ -6,6 +6,7 @@ export interface ASNavBarArrowButtonsStyledProps {
     icon?: React.ReactNode;
     theme?: ASTheme;
     size?: ASComponentSize;
+    isMobile?: boolean;
     styleOptions?: ASNavBarStyleOptions;
 }
 export type ASNavBarArrowButtonClickFn = (event: PointerEvent, dir: ASComponentDirection) => void;
@@ -15,6 +16,7 @@ export type ASNavBarArrowButtonsProps = {
     selectedIndex?: number;
     totalItemCount?: number;
     onArrowButtonClicked?: ASNavBarArrowButtonClickFn;
+    isMobile?: boolean;
     size?: ASComponentSize;
     styleOptions?: ASNavBarStyleOptions;
     disabled?: boolean;

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarArrowButtons.types.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEtG,MAAM,WAAW,+BAA+B;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;AAElG,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,0BAA0B,CAAC;IAClD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"ASNavBarArrowButtons.types.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEtG,MAAM,WAAW,+BAA+B;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;AAElG,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,0BAA0B,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/asnavbar/navbararrowbuttons/styles.d.ts

@@ -12,32 +12,28 @@ interface ASNavBarIconButtonStyledProps {
 }
 export declare const ASIconButtonRightStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
     className?: string;
-    text?: string;
     selected?: boolean;
     toggle?: boolean;
     size?: ASComponentSize;
     iconSize?: number;
     theme?: ASTheme;
-    paddingSize?: import("../../apptypes").ASPaddingSize;
     isLoading?: boolean;
     icon: import("react").FC<import("react").PropsWithChildren<import("../..").IconProps>>;
     onIconButtonTap?: (e: import("react").PointerEvent) => void;
-} & import("../..").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
+} & import("../..").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "text" | "size"> & {
     children?: import("react").ReactNode | undefined;
 }, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../../asiconbutton").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;
 export declare const ASIconButtonLeftStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
     className?: string;
-    text?: string;
     selected?: boolean;
     toggle?: boolean;
     size?: ASComponentSize;
     iconSize?: number;
     theme?: ASTheme;
-    paddingSize?: import("../../apptypes").ASPaddingSize;
     isLoading?: boolean;
     icon: import("react").FC<import("react").PropsWithChildren<import("../..").IconProps>>;
     onIconButtonTap?: (e: import("react").PointerEvent) => void;
-} & import("../..").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
+} & import("../..").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "text" | "size"> & {
     children?: import("react").ReactNode | undefined;
 }, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../../asiconbutton").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;
 export {};

package/dist/asnavbar/navbararrowbuttons/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC;AAwC/E,eAAO,MAAM,0BAA0B,oQA2BtC,CAAC;AAEF,UAAU,6BAA6B;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;qKAKnC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;qKAKlC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC;AAwC/E,eAAO,MAAM,0BAA0B,oQA+BtC,CAAC;AAEF,UAAU,6BAA6B;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;qKAKnC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;qKAKlC,CAAC"}

package/dist/asnavbar/navbararrowbuttons/styles.js

@@ -24,7 +24,7 @@ const dimensionsForSizes = (0, styled_components_1.css) `
   &.ASLarge {
     height: 50px;
     max-height: 50px;
-    font-size: 2.1rem;
+    font-size: 2rem;
     font-weight: 600;
   }
 `;
@@ -33,44 +33,47 @@ const scrollEdgesCover = (0, styled_components_1.css) `
   background: #333333;
   position: absolute;
   top: 0;
-  height: 100%;
+  height: 96%;
   border-radius: 6px;
 `;
 const getWidthBySize = (size) => size === apptypes_1.ComponentSize.Large ? 50 : apptypes_1.ComponentSize.Medium === size ? 40 : 30;
 exports.ASNavBarArrowButtonsStyled = styled_components_1.default.div `
   position: fixed;
-  position-anchor: --navbarAnchor;
-  left: calc(anchor(left) + 2px);
-  right: calc(anchor(right) - 2px);
+  contain: strict;
   display: ${({ styleOptions = ASNavBar_1.defaultNavBarStyleOptions }) => styleOptions.$hideNavArrowButtonsInDW ? 'none' : 'flex'};
   align-items: center;
   justify-content: space-between;
   width: -webkit-fill-available;
+  max-width: ${({ styleOptions = ASNavBar_1.defaultNavBarStyleOptions, isMobile = false }) => styleOptions.$maxWidth && styleOptions.$maxWidthUnit
+    ? `${styleOptions.$maxWidth}${styleOptions.$maxWidthUnit}`
+    : isMobile
+        ? '300px'
+        : '100%'};
   pointer-events: none;
   user-select: none;
   z-index: 10;
 
   &:before {
     ${scrollEdgesCover}
-    width: ${({ size = apptypes_1.ComponentSize.Medium }) => `calc(${getWidthBySize(size)}px + 8px)`};
-    left: -2px;
+    width: ${({ size = apptypes_1.ComponentSize.Medium }) => `calc(${getWidthBySize(size)}px + 6px)`};
+    left: 0;
   }
 
   &:after {
     ${scrollEdgesCover}
-    width: ${({ size = apptypes_1.ComponentSize.Medium }) => `calc(${getWidthBySize(size)}px + 8px)`};
-    right: -2px;
+    width: ${({ size = apptypes_1.ComponentSize.Medium }) => `calc(${getWidthBySize(size)}px + 6px)`};
+    right: 0;
   }
 
   ${dimensionsForSizes}
 `;
 exports.ASIconButtonRightStyled = (0, styled_components_1.default)(asiconbutton_1.default) `
-  margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
+  margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0' : '0 5px 0 0'};
   z-index: 1;
-  scale: 0.8;
+  scale: ${({ size = apptypes_1.ComponentSize.Medium }) => (size === apptypes_1.ComponentSize.Large ? '0.75' : '0.75')};
 `;
 exports.ASIconButtonLeftStyled = (0, styled_components_1.default)(asiconbutton_1.default) `
-  margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
+  margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0' : '0 5px'};
   z-index: 1;
-  scale: 0.8;
+  scale: ${({ size = apptypes_1.ComponentSize.Medium }) => (size === apptypes_1.ComponentSize.Large ? '0.75' : '0.75')};
 `;

package/dist/asnavbar/styles.js

@@ -77,7 +77,7 @@ exports.ASNavBarStyled = styled_components_1.default.div `
   ${({ $hideHorizontalScrollbarInDW = true }) => $hideHorizontalScrollbarInDW ? HideScrollBarConfig : ShowScrollBarConfig};
 `;
 exports.ASNavBarLeadingIconPadding = styled_components_1.default.div `
-  padding: 0 4px;
+  // padding: 0 4px;
   pointer-events: none;
   user-select: none;
   ${({ $selected = false, theme = astheme_1.default }) => $selected

package/dist/icons/ASIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ASIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AA8B1C,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAsBlD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"ASIcon.d.ts","sourceRoot":"","sources":["../../src/icons/ASIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AA8B1C,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAuBlD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/icons/ASIcon.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("./styles");
 const CircleSvg = ({ iconSize = 24, circleStrokeWidth = 1.5, circleFillColor = 'transparent', circleStrokeColor = '#fffff0', circleFillOpacity = 1, withCircle = false, }) => ((0, jsx_runtime_1.jsx)(styles_1.IconCircle, { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("circle", { fill: withCircle ? circleFillColor : 'none', fillOpacity: circleFillOpacity, cx: "12", cy: "12", r: "10.5", stroke: withCircle ? circleStrokeColor : 'transparent', strokeWidth: `${circleStrokeWidth}px` }) }));
-const ASIcon = ({ className = '', iconSize = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', withCircle = false, style, children, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.IconWrapper, { className: className, style: props.style, ...props, onClick: props.onClick, children: [(0, jsx_runtime_1.jsx)(CircleSvg, { iconSize: iconSize, circleStrokeColor, withCircle, ...props }), react_1.default.Children.map(children, (child) => react_1.default.isValidElement(child)
+const ASIcon = ({ className = '', iconSize = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', circleStrokeWidth = 1.5, withCircle = false, style, children, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.IconWrapper, { className: className, style: props.style, ...props, onClick: props.onClick, children: [(0, jsx_runtime_1.jsx)(CircleSvg, { iconSize: iconSize, circleStrokeColor, withCircle, circleStrokeWidth, ...props }), react_1.default.Children.map(children, (child) => react_1.default.isValidElement(child)
                 ? react_1.default.cloneElement(child, { iconSize, color, fillColor, withCircle, fillOpacity, style, ...props })
                 : child)] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eleventheye/asui",
-  "version": "2.7.7",
+  "version": "2.7.9",
   "private": false,
   "description": "AS UI React Library by eleventheye (another one!)",
   "keywords": [