@eleventheye/asui 2.7.0 → 2.7.2

package/dist/apptypes/ASUI.types.d.ts

@@ -195,6 +195,7 @@ export interface ASTheme {
     fontWeight: string;
     fontFamilyFallback: string;
 }
+export type ASDebounceState = 'Down' | 'Up' | 'None';
 export declare const DisplayMode: {
     readonly None: "none";
     readonly Mobile: "mobile";
@@ -207,15 +208,20 @@ export interface ASStyleOptions {
     $padding?: string;
     $margin?: string;
     $maxWidth?: number;
+    $maxWidthUnit?: string;
     $minWidth?: number;
+    $minWidthUnit?: string;
     $height?: number;
+    $heightUnit?: string;
     $width?: number;
+    $widthUnit?: string;
 }
 export interface ASNavBarStyleOptions extends ASStyleOptions {
     $displayModeOverride: ASDisplayMode;
     $mobileBreakpoint: number;
     $disableTransitionsBetweenDisplayModes: boolean;
     $hideNavArrowButtonsInDW: boolean;
+    $hideHorizontalScrollbarInDW: boolean;
 }
 export {};
 //# sourceMappingURL=ASUI.types.d.ts.map

package/dist/apptypes/ASUI.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASUI.types.d.ts","sourceRoot":"","sources":["../../src/apptypes/ASUI.types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAC;AACX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAExE,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAEjF,KAAK,kBAAkB,GAAG,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;AAC7D,KAAK,mBAAmB,GAAG,CAAC,eAAe,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC;AAC/E,KAAK,iBAAiB,GAAG,CAAC,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC;AAC9F,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAE3G,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAExE,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;AAEpG,MAAM,MAAM,aAAa,GAAG;KACzB,GAAG,IAAI,eAAe,GAAG,MAAM;CACjC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,MAAM,CAAC;IAE7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,0BAA0B,EAAE,MAAM,CAAC;IACnC,2BAA2B,EAAE,MAAM,CAAC;IAEpC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,wBAAwB,EAAE,MAAM,CAAC;IACjC,yBAAyB,EAAE,MAAM,CAAC;IAClC,wBAAwB,EAAE,MAAM,CAAC;IACjC,yBAAyB,EAAE,MAAM,CAAC;IAClC,0BAA0B,EAAE,MAAM,CAAC;IACnC,yBAAyB,EAAE,MAAM,CAAC;IAClC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0BAA0B,EAAE,MAAM,CAAC;IACnC,2BAA2B,EAAE,MAAM,CAAC;IACpC,0BAA0B,EAAE,MAAM,CAAC;IACnC,2BAA2B,EAAE,MAAM,CAAC;IACpC,4BAA4B,EAAE,MAAM,CAAC;IACrC,2BAA2B,EAAE,MAAM,CAAC;IACpC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,EAAE,MAAM,CAAC;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,gCAAgC,EAAE,MAAM,CAAC;IACzC,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uBAAuB,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,YAAY,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;CAId,CAAC;AACX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAE3E,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAM1D,oBAAoB,EAAE,aAAa,CAAC;IAOpC,iBAAiB,EAAE,MAAM,CAAC;IAO1B,sCAAsC,EAAE,OAAO,CAAC;IAMhD,wBAAwB,EAAE,OAAO,CAAC;CACnC"}
+{"version":3,"file":"ASUI.types.d.ts","sourceRoot":"","sources":["../../src/apptypes/ASUI.types.ts"],"names":[],"mappings":"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"}

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,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmE7C,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;AAIzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/asiconbutton/ASIconButton.js

@@ -7,14 +7,37 @@ const ASUI_types_1 = require("../apptypes/ASUI.types");
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
 const styles_1 = require("./styles");
 const ASIconButton = ({ className = '', onClick = () => undefined, selected = false, toggle = false, size = ASUI_types_1.ComponentSize.Medium, iconSize = size === ASUI_types_1.ComponentSize.Small ? 24 : 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 tapDebounceRef = (0, react_1.useRef)('None');
     const [isSelected, setIsSelected] = (0, react_1.useState)(selected);
     (0, react_1.useEffect)(() => {
         setIsSelected(selected);
     }, [selected]);
-    const onClickHandler = (e) => {
-        if (toggle)
-            setIsSelected(!isSelected);
-        onClick(e);
+    const clsR = 'background: crimson; color: #000000; border-radius: 10px;';
+    const clsY = 'background: goldenrod; color: #000000; border-radius: 10px;';
+    const clsG = 'background: forestgreen; color: #000000; border-radius: 10px;';
+    const onTap = (e) => {
+        if (tapDebounceRef.current === 'None') {
+            tapDebounceRef.current = 'Down';
+            console.log(`%c ${tapDebounceRef.current} %c`, clsR, '');
+            const btnEl = e.currentTarget;
+            btnEl.ariaPressed = 'true';
+            if (toggle)
+                setIsSelected(!isSelected);
+            onClick(e);
+            btnEl.releasePointerCapture(e.pointerId);
+        }
+    };
+    const onTapRelease = (e) => {
+        if (tapDebounceRef.current === 'Down') {
+            tapDebounceRef.current = 'Up';
+            const btnEl = e.currentTarget;
+            console.log(`%c ${tapDebounceRef.current} %c`, clsY, '');
+            setTimeout(() => {
+                btnEl.ariaPressed = 'false';
+                tapDebounceRef.current = 'None';
+                console.log(`%c ${tapDebounceRef.current} %c`, clsG, '');
+            }, 400);
+        }
     };
     const onEnableDisableHandler = (node) => {
         if (node) {
@@ -26,6 +49,6 @@ const ASIconButton = ({ className = '', onClick = () => undefined, selected = fa
             }
         }
     };
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { theme: theme, role: "button", ref: onEnableDisableHandler, size: size, "aria-disabled": isLoading ? 'true' : disabled.toString(), className: `${className} ${size} ${isSelected ? 'Selected' : ''}`, onClick: onClickHandler, style: style, id: id, ...props, children: (0, jsx_runtime_1.jsx)(Icon, { iconSize: iconSize, fillColor: fillColor, color: strokeColor, strokeWidth: strokeWidth }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { theme: theme, role: "button", ref: onEnableDisableHandler, size: size, "aria-disabled": isLoading ? 'true' : disabled.toString(), className: `${className} ${size} ${isSelected ? 'Selected' : ''}`, onPointerUp: onTapRelease, onPointerDown: onTap, style: style, id: id, ...props, children: (0, jsx_runtime_1.jsx)(Icon, { iconSize: iconSize, fillColor: fillColor, color: strokeColor, strokeWidth: strokeWidth }) }));
 };
 exports.default = ASIconButton;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,kBAAkB;WAAuB,OAAO;UAAQ,eAAe;YA6KnF,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,kBAAkB;WAAuB,OAAO;UAAQ,eAAe;YA8LnF,CAAC"}

package/dist/asiconbutton/styles.js

@@ -10,7 +10,7 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
   aspect-ratio: 1;
   cursor: pointer;
   white-space: nowrap;
-  transition: all 0.25s ease-in-out;
+  transition: all 0.15s ease-in-out;
   position: relative;
   display: inline-block;
   border-radius: 75px;
@@ -21,6 +21,7 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
   text-transform: uppercase;
   text-align: center;
   -webkit-tap-highlight-color: transparent;
+  pointer-events: auto;
 
   &.ASLarge,
   &.ASMedium,
@@ -57,6 +58,7 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
   &.ASSmall {
     font-size: 1rem;
     line-height: 1.875rem;
+    min-height: 30px;
     & > div > :last-child(svg) {
       min-height: 24px;
       max-height: 24px;
@@ -100,10 +102,12 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
   }
 
   &:active,
+  &:focus,
   &.Selected {
-    &:not([aria-disabled='true']) {
+    &:not([aria-disabled='true'])&:not([aria-pressed='false']) {
       user-select: none;
       background: ${({ theme }) => theme.button.buttonGradientUp};
+      box-shadow: ${({ theme, size }) => theme.button[`buttonShadowActive${size}`]};
       color: transparent;
       text-shadow: none;
     }
@@ -152,12 +156,25 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
         text-shadow: none;
       }
     }
+
+    &:active,
+    &.Selected {
+      &:not([aria-disabled='true']),
+      &:is([aria-pressed='true']) {
+        box-shadow: ${({ theme, size }) => theme.button[`buttonShadowActive${size}`]};
+      }
+    }
   }
 
+  &:focus,
   &:active,
   &.Selected {
-    &:not([aria-disabled='true']) {
+    &:is([aria-pressed='true']) {
       box-shadow: ${({ theme, size }) => theme.button[`buttonShadowActive${size}`]};
+      -webkit-tap-highlight-color: grey;
+      & > div {
+        scale: 0.95;
+      }
     }
   }
 

package/dist/asnavbar/ASNavBar.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { ASNavBarStyleOptions } from '../apptypes/ASUI.types';
 import { ASNavBarProps } from './ASNavBar.types';
 export declare const defaultNavBarStyleOptions: ASNavBarStyleOptions;
+export declare const defaultNavBarDWStyleOptions: ASNavBarStyleOptions;
+export declare const defaultNavBarMWStyleOptions: ASNavBarStyleOptions;
 declare const ASNavBar: React.FC<ASNavBarProps>;
 export default ASNavBar;
 //# sourceMappingURL=ASNavBar.d.ts.map

package/dist/asnavbar/ASNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBar.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,oBAAoB,EAA8B,MAAM,wBAAwB,CAAC;AAG1F,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,eAAO,MAAM,yBAAyB,EAAE,oBAKvC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ASNavBar.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,oBAAoB,EAA8B,MAAM,wBAAwB,CAAC;AAG1F,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,eAAO,MAAM,yBAAyB,EAAE,oBAYvC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAYzC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAUzC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/asnavbar/ASNavBar.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultNavBarStyleOptions = void 0;
+exports.defaultNavBarMWStyleOptions = exports.defaultNavBarDWStyleOptions = exports.defaultNavBarStyleOptions = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -16,8 +16,39 @@ exports.defaultNavBarStyleOptions = {
     $disableTransitionsBetweenDisplayModes: false,
     $mobileBreakpoint: 768,
     $hideNavArrowButtonsInDW: false,
+    $hideHorizontalScrollbarInDW: true,
+    $gap: 0,
+    $borderRadius: 6,
+    $padding: '0',
+    $margin: '0 auto',
+    $maxWidth: 100,
+    $maxWidthUnit: '%',
 };
-const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions = { ...exports.defaultNavBarStyleOptions }, }) => {
+exports.defaultNavBarDWStyleOptions = {
+    $displayModeOverride: ASUI_types_1.DisplayMode.None,
+    $disableTransitionsBetweenDisplayModes: false,
+    $mobileBreakpoint: 768,
+    $hideNavArrowButtonsInDW: false,
+    $hideHorizontalScrollbarInDW: true,
+    $gap: 30,
+    $borderRadius: 6,
+    $padding: '0 44px',
+    $margin: '0 auto',
+    $minWidth: 300,
+    $minWidthUnit: 'px',
+};
+exports.defaultNavBarMWStyleOptions = {
+    $displayModeOverride: ASUI_types_1.DisplayMode.None,
+    $disableTransitionsBetweenDisplayModes: false,
+    $mobileBreakpoint: 768,
+    $hideNavArrowButtonsInDW: false,
+    $hideHorizontalScrollbarInDW: true,
+    $maxWidth: 300,
+    $maxWidthUnit: 'px',
+    $borderRadius: 6,
+    $padding: '0 4px',
+};
+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);
     const [navBarComponentId] = (0, react_1.useState)(`asnavbar-${(0, uuid_1.v4)()}`);
     const [isMobile, setIsMobile] = (0, react_1.useState)(false);
@@ -25,7 +56,7 @@ const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSe
     const { $mobileBreakpoint, $disableTransitionsBetweenDisplayModes, $displayModeOverride, $hideNavArrowButtonsInDW } = styleOptions;
     (0, react_1.useEffect)(() => {
         const screenSize = (0, screenSizeHelpers_1.getScreenSize)();
-        console.log(`Screen size detected: ${screenSize}`);
+        console.info(`Screen size detected: ${screenSize}`);
     }, []);
     (0, react_1.useEffect)(() => {
         setSelectedId(selectedItemId);
@@ -40,7 +71,6 @@ const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSe
             return;
         }
         visitedCountRef.current += 1;
-        console.log(`Initializing display mode, visited count: ${visitedCountRef.current}`);
         window.addEventListener('resize', () => {
             const width = window.innerWidth;
             setIsMobile(width < $mobileBreakpoint);
@@ -57,6 +87,6 @@ const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSe
         setSelectedId(itemId);
         onItemSelected(itemId);
     };
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarStyled, { id: navBarComponentId, theme: theme, ...styleOptions, children: isMobile ? ((0, jsx_runtime_1.jsx)(mobile_1.default, { id: `asnavbar-mw-${(0, uuid_1.v4)()}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: styleOptions })) : ((0, jsx_runtime_1.jsx)(desktop_1.default, { id: `asnavbar-dw-${(0, uuid_1.v4)()}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: styleOptions })) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarStyled, { id: navBarComponentId, theme: theme, ...styleOptions, children: isMobile ? ((0, jsx_runtime_1.jsx)(mobile_1.default, { id: `asnavbar-mw-${(0, uuid_1.v4)()}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: mwStyleOptions })) : ((0, jsx_runtime_1.jsx)(desktop_1.default, { id: `asnavbar-dw-${(0, uuid_1.v4)()}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: dwStyleOptions })) }));
 };
 exports.default = ASNavBar;

package/dist/asnavbar/ASNavBar.types.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, PropsWithChildren } from 'react';
+import { PointerEvent, PropsWithChildren } from 'react';
 import { ASComponentSize, ASNavBarStyleOptions, ASTheme } from '../apptypes';
 export type ASNavBarItemType = {
     itemId: string;
@@ -17,7 +17,7 @@ export type ASNavBarItemProps = {
     itemIndex?: number;
     size?: ASComponentSize;
     title?: string;
-    onItemClick?: (e: MouseEvent, id: string, index: number) => void;
+    onItemClick?: (e: PointerEvent, id: string, index: number) => void;
     onItemResized?: (id: string, element: HTMLDivElement) => void;
 };
 export type ASNavBarOwnProps = {
@@ -29,6 +29,8 @@ export type ASNavBarOwnProps = {
     navItems?: ASNavBarItemType[];
     size?: ASComponentSize;
     styleOptions?: ASNavBarStyleOptions;
+    dwStyleOptions?: ASNavBarStyleOptions;
+    mwStyleOptions?: ASNavBarStyleOptions;
 };
 export type ASNavBarProps = PropsWithChildren<ASNavBarOwnProps>;
 //# sourceMappingURL=ASNavBar.types.d.ts.map

package/dist/asnavbar/ASNavBar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,cAAc,CAAC,EAAE,oBAAoB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}

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,KAAwE,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQ9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8HvC,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;AAQ9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4IvC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/asnavbar/desktop/ASNavBarDW.js

@@ -13,12 +13,14 @@ const styles_1 = require("./styles");
 const INIT_VALUE = (0, uuid_1.v4)();
 const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions = { ...ASNavBar_1.defaultNavBarStyleOptions }, }) => {
     const selectedItemIdRef = (0, react_1.useRef)(INIT_VALUE);
+    const selectedItemElRef = (0, react_1.useRef)(null);
     const navBarRef = (0, react_1.useRef)(null);
     const navBarHighlightBoxRef = (0, react_1.useRef)(null);
     const [selected, setSelected] = (0, react_1.useState)(selectedItemId);
     const slideHighlightToSelectedItem = (selectedItemEl, itemId) => {
         if (!navBarHighlightBoxRef.current || !navBarRef.current)
             return;
+        selectedItemElRef.current = selectedItemEl;
         const selectedElRect = selectedItemEl.getBoundingClientRect();
         const parentRect = navBarRef.current.getBoundingClientRect();
         const offsetToSelectedEl = selectedElRect.left - parentRect.left;
@@ -34,6 +36,18 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
             inline: 'center',
         });
     };
+    const onScrollEndHandler = () => {
+        if (!navBarHighlightBoxRef.current || !navBarRef.current || !selectedItemElRef.current)
+            return;
+        const selectedItemEl = selectedItemElRef.current;
+        const selectedElRect = selectedItemEl.getBoundingClientRect();
+        const parentRect = navBarRef.current.getBoundingClientRect();
+        const offsetToSelectedEl = selectedElRect.left - parentRect.left;
+        const selectedBox = navBarHighlightBoxRef.current;
+        const selectedBoxWidth = selectedElRect.width;
+        selectedBox.style.transform = `translateX(${offsetToSelectedEl}px)`;
+        selectedBox.style.width = `${selectedBoxWidth}px`;
+    };
     const locateSelectedItemInDOM = (selectedId) => {
         const selectedItemEl = document.getElementById(selectedId);
         if (selectedItemEl) {
@@ -82,7 +96,6 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
     };
     const onItemResizedHandler = (itemId, item) => slideHighlightToSelectedItem(item, itemId);
     const isSelected = (itemId) => selected === itemId;
-    console.log(`What is inside styleOptions? ${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.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { 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.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 })] }));
 };
 exports.default = ASNavBarDW;

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,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,qQAa/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;CAKrB;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,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"}

package/dist/asnavbar/desktop/styles.js

@@ -14,13 +14,13 @@ const dimensionsForSizes = (0, styled_components_1.css) `
   &.ASMedium {
     height: 40px;
     font-size: 1.7rem;
-    font-weight: 500;
+    font-weight: 400;
   }
 
   &.ASLarge {
     height: 50px;
     font-size: 2.1rem;
-    font-weight: 600;
+    font-weight: 500;
   }
 `;
 exports.ASNavBarDWStyled = styled_components_1.default.div `
@@ -33,7 +33,6 @@ exports.ASNavBarDWStyled = styled_components_1.default.div `
   gap: ${({ $gap = 30 }) => $gap}px;
   width: fit-content;
   grid-row: 1;
-
   min-width: ${({ $minWidth = 300 }) => $minWidth}px;
   padding: ${({ $padding = '0 44px' }) => $padding};
   border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
@@ -51,7 +50,8 @@ exports.ASSelectedBoxStyled = styled_components_1.default.span `
   background-color: ${({ theme }) => theme.navbar.navBarSelectedBoxBackgroundColor};
   z-index: 0;
   left: 0;
-  transition: all 0.3s ease-in-out 0.1s allow-discrete;
+  // will-change: width, transform;
+  transition: all 0.25s ease-in-out 0.01s allow-discrete;
 
   @starting-style {
     z-index: 0;
@@ -64,7 +64,7 @@ exports.ASNavBarItemStyled = styled_components_1.default.div `
   justify-content: center;
   flex-wrap: nowrap;
   flex-direction: row;
-  transition: color 0.3s ease-in-out 0.1s;
+  transition: color 0.3s ease-in-out 0.01s;
   text-transform: uppercase;
   margin: ${({ $margin = '4px 0' }) => $margin};
   padding: ${({ $padding = '0 8px' }) => $padding};

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,KAAoE,MAAM,OAAO,CAAC;AAMzF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAalD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0KvC,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,CAoKvC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/asnavbar/mobile/ASNavBarMW.js

@@ -7,11 +7,12 @@ const uuid_1 = require("uuid");
 const ASUI_types_1 = require("../../apptypes/ASUI.types");
 const asmodal_1 = tslib_1.__importDefault(require("../../asmodal"));
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
-const icons_1 = require("../../icons");
+const ASNavBar_1 = require("../ASNavBar");
+const navbararrowbuttons_1 = tslib_1.__importDefault(require("../navbararrowbuttons"));
 const navbarpickpanel_1 = tslib_1.__importDefault(require("../navbarpickpanel"));
 const styles_1 = require("./styles");
 const INIT_VALUE = (0, uuid_1.v4)();
-const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions: options = {}, }) => {
+const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions = ASNavBar_1.defaultNavBarMWStyleOptions, }) => {
     const scrollContainerRef = (0, react_1.useRef)(null);
     const selectedItemIdRef = (0, react_1.useRef)(INIT_VALUE);
     const navBarRef = (0, react_1.useRef)(null);
@@ -47,7 +48,6 @@ const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', na
     (0, react_1.useEffect)(() => {
         if (selectedItemIdRef.current === selected)
             return;
-        console.log(`🟢 NEW ITEM SELECTED ${selected}`);
         selectedItemIdRef.current = selected;
         onItemSelected(selected);
     }, [selected]);
@@ -93,6 +93,14 @@ const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', na
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarMWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...options, 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.jsxs)(styles_1.NavButtonsContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { role: "button", icon: icons_1.ArrowLeftIcon, onMouseOver: (e) => { }, onClick: selectPrev, theme: theme, size: size, disabled: selectedIndex <= 0, id: "LeftButtonId", iconSize: size === ASUI_types_1.ComponentSize.Large ? 32 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }), (0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { icon: icons_1.ArrowRightIcon, id: "RightButtonId", iconSize: size === ASUI_types_1.ComponentSize.Large ? 32 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 24, size: size, fillColor: theme.button.buttonIconColor, disabled: selectedIndex >= navItems.length - 1, onClick: selectNext })] }), (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 }) })] }));
+    const onButtonsPressed = (e, direction) => {
+        if (direction === ASUI_types_1.ArrowButtonDirection.Left) {
+            selectPrev(e);
+        }
+        else {
+            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 }) })] }));
 };
 exports.default = ASNavBarMW;

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

@@ -1,37 +1,15 @@
-import { ASComponentSize, ASTheme } from '../../apptypes/ASUI.types';
-interface ASNavBarIconButtonStyledProps {
-    theme: ASTheme;
-    $mobileMode?: boolean;
-    $gap?: number;
-    $maxWidth?: number;
-    $borderRadius?: number;
-    $padding?: string;
-    size?: ASComponentSize;
-}
-export declare const ASIconButtonStyled: 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/ASUI.types").ASPaddingSize;
-    isLoading?: boolean;
-    icon: import("react").FC<import("react").PropsWithChildren<import("../../icons").IconProps>>;
-} & import("../../icons").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
-    children?: import("react").ReactNode | undefined;
-}, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../..").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;
-export declare const NavControlLeftButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../icons").IconProps, never>> & string & Omit<import("react").FC<import("../../icons").IconProps>, keyof import("react").Component<any, {}, any>>;
-export declare const NavControlRightButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../icons").IconProps, never>> & string & Omit<import("react").FC<import("../../icons").IconProps>, keyof import("react").Component<any, {}, any>>;
+import { ASNavBarStyleOptions, ASTheme } from '../../apptypes/ASUI.types';
 interface ASNavBarSelectedBoxStyledProps {
     theme: ASTheme;
     $mobileMode?: boolean;
     $height?: number;
+    $heightUnit?: string;
+    $width?: number;
+    $widthUnit?: string;
     $borderRadius?: number;
 }
 export declare const ASSelectedBoxMWStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ASNavBarSelectedBoxStyledProps>> & string;
-interface ASNavBarStyledProps {
+interface ASNavBarStyledProps extends ASNavBarStyleOptions {
     theme: ASTheme;
     $mobileMode?: boolean;
     $gap?: number;
@@ -39,7 +17,6 @@ interface ASNavBarStyledProps {
     $borderRadius?: number;
     $padding?: string;
 }
-export declare const NavButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
 interface ASNavBarItemStyledProps {
     theme: ASTheme;
     $mobileMode?: boolean;

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,eAAe,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAC;AA2BpF,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,kBAAkB;;;;;;;;;;;;;wJAM9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,sQAQhC,CAAC;AACF,eAAO,MAAM,qBAAqB,sQASjC,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;AACD,eAAO,MAAM,qBAAqB,qQAgBjC,CAAC;AAEF,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,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,mBAAmB,wPAgC/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,oBAAoB,iUAuDhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NA0BjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,wPA4C5B,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,iUAuDhC,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"}

package/dist/asnavbar/mobile/styles.js

@@ -1,107 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ASNavBarItemPadding = exports.ASNavBarMWStyled = exports.ScrollableNavBarItems = exports.ASNavBarItemMWStyled = exports.NavButtonsContainer = exports.ASSelectedBoxMWStyled = exports.NavControlRightButton = exports.NavControlLeftButton = exports.ASIconButtonStyled = void 0;
+exports.ASNavBarItemPadding = 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 ASUI_types_1 = require("../../apptypes/ASUI.types");
-const ASIconButton_1 = tslib_1.__importDefault(require("../../asiconbutton/ASIconButton"));
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
-const icons_1 = require("../../icons");
 const navbaritem_1 = tslib_1.__importDefault(require("../navbaritem"));
-const getNavControlButtonStyle = (0, styled_components_1.css) `
-  pointer-events: all;
-  cursor: pointer;
-
-  &:active {
-    svg > path {
-      fill: rgb(61, 61, 61);
-    }
-  }
-  > @media (hover) {
-    &:hover {
-      svg > path {
-        // fill: rgb(61, 61, 61);
-        stroke: #ffd321;
-        strokewidth: 1px;
-        stroke-width: 1px;
-      }
-    }
+const dimensionsForSizes = (0, styled_components_1.css) `
+  &.ASSmall {
+    height: 30px;
+    font-size: 1.3rem;
+    font-weight: 400;
   }
-`;
-exports.ASIconButtonStyled = (0, styled_components_1.default)(ASIconButton_1.default) `
-  margin: ${({ size = ASUI_types_1.ComponentSize.Medium }) => size === ASUI_types_1.ComponentSize.Small ? '0 10px' : size === ASUI_types_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
-  z-index: 1;
-  scale: ${({ size = ASUI_types_1.ComponentSize.Medium }) => size === ASUI_types_1.ComponentSize.Small ? 0.9 : size === ASUI_types_1.ComponentSize.Large ? 0.8 : 0.8};
-`;
-exports.NavControlLeftButton = (0, styled_components_1.default)(icons_1.ArrowLeftIcon) `
-  margin-left: 10px;
-  ${getNavControlButtonStyle}
-  &:hover {
-    &:last-child(svg) > path {
-      fill: rgb(61, 61, 61);
-    }
+
+  &.ASMedium {
+    height: 40px;
+    font-size: 1.7rem;
+    font-weight: 400;
   }
-`;
-exports.NavControlRightButton = (0, styled_components_1.default)(icons_1.ArrowRightIcon) `
-  margin-right: 10px;
-  ${getNavControlButtonStyle}
 
-  &:hover {
-    &:last-child(svg) > path {
-      fill: rgb(61, 61, 61);
-    }
+  &.ASLarge {
+    height: 50px;
+    font-size: 2.1rem;
+    font-weight: 500;
   }
 `;
 exports.ASSelectedBoxMWStyled = styled_components_1.default.span `
   position: absolute;
-  height: 85%;
-  width: 200px;
+  height: ${({ $height = 85, $heightUnit = '%' }) => `${$height}${$heightUnit}`};
+  width: ${({ $width = 200, $widthUnit = 'px' }) => `${$width}${$widthUnit}`};
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   border-radius: ${({ $borderRadius = 4 }) => $borderRadius}px;
   background-color: ${({ theme }) => theme.navbar.navBarSelectedBoxBackgroundColor};
   z-index: 0;
-  transition: all 0.3s ease-in-out 0.1s allow-discrete;
+  transition: all 0.3s ease-in-out 0.05s allow-discrete;
 
   @starting-style {
     z-index: 0;
     left: 0;
   }
 `;
-exports.NavButtonsContainer = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: -webkit-fill-available;
-  pointer-events: none;
-  user-select: none;
-  z-index: 10;
-
-  &.ASSmall {
-    height: 30px;
-    font-size: 1.3rem;
-    font-weight: 400;
-    > ${exports.ASSelectedBoxMWStyled} {
-      height: 80%;
-    }
-  }
-
-  &.ASMedium {
-    height: 40px;
-    font-size: 1.7rem;
-    font-weight: 500;
-  }
-
-  &.ASLarge {
-    height: 50px;
-    font-size: 2.1rem;
-    font-weight: 600;
-    > ${exports.ASSelectedBoxMWStyled} {
-      height: 90%;
-    }
-  }
-`;
 exports.ASNavBarItemMWStyled = (0, styled_components_1.default)(navbaritem_1.default) `
   display: flex;
   align-items: center;
@@ -126,12 +65,12 @@ exports.ASNavBarItemMWStyled = (0, styled_components_1.default)(navbaritem_1.def
 
   &.ASMedium {
     font-size: 1.7rem;
-    font-weight: 500;
+    font-weight: 400;
   }
 
   &.ASLarge {
     font-size: 2.1rem;
-    font-weight: 600;
+    font-weight: 500;
   }
 
   ${({ $selected = false, theme = astheme_1.default }) => $selected
@@ -190,43 +129,17 @@ exports.ASNavBarMWStyled = styled_components_1.default.div `
   justify-content: flex-start;
   flex-wrap: nowrap;
   flex-direction: row;
-  width: -webkit-fill-available;
-  max-width: 300px;
+  width: 100%;
+  @supports (width: -webkit-fill-available) {
+    width: -webkit-fill-available;
+  }
+  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};
   box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
 
-  & ${exports.NavButtonsContainer} {
-    position: fixed;
-    max-width: inherit;
-    height: inherit;
-
-    ${exports.ASSelectedBoxMWStyled} {
-      position: absolute;
-      left: 50px;
-      height: 90%;
-      z-index: 0;
-    }
-  }
-
-  &.ASSmall {
-    height: 30px;
-    font-size: 1.3rem;
-    font-weight: 400;
-  }
-
-  &.ASMedium {
-    height: 40px;
-    font-size: 1.7rem;
-    font-weight: 500;
-  }
-
-  &.ASLarge {
-    height: 50px;
-    font-size: 2.1rem;
-    font-weight: 600;
-  }
+  ${dimensionsForSizes}
 `;
 exports.ASNavBarItemPadding = styled_components_1.default.div `
   padding: 0 4px;

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,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAGzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CA2BvF,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmBhE,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmBjE,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;AAGzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CA2BvF,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqBhE,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqBjE,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.js

@@ -14,10 +14,10 @@ const ASNavBarArrowButtons = ({ className = '', onArrowButtonClicked = () => und
 exports.ASNavBarArrowButtons = ASNavBarArrowButtons;
 exports.default = exports.ASNavBarArrowButtons;
 const ASLeftNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, disabled = false, onArrowButtonClicked = () => undefined, }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonLeftStyled, { role: "button", icon: icons_1.ArrowLeftIcon, onClick: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Left), theme: theme, size: size, 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, { role: "button", icon: icons_1.ArrowLeftIcon, onPointerDown: (e) => onArrowButtonClicked(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 }));
 };
 exports.ASLeftNavBarArrowButton = ASLeftNavBarArrowButton;
 const ASRightNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, onArrowButtonClicked = () => undefined, disabled = false, }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonRightStyled, { role: "button", icon: icons_1.ArrowRightIcon, onClick: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Right), theme: theme, 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, { role: "button", icon: icons_1.ArrowRightIcon, onPointerDown: (e) => onArrowButtonClicked(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 }));
 };
 exports.ASRightNavBarArrowButton = ASRightNavBarArrowButton;

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

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { PointerEvent } from 'react';
 import { ASComponentDirection, ASComponentSize, ASNavBarStyleOptions, ASTheme } from '../../apptypes';
 export interface ASNavBarArrowButtonsStyledProps {
     itemId?: string;
@@ -8,7 +8,7 @@ export interface ASNavBarArrowButtonsStyledProps {
     size?: ASComponentSize;
     styleOptions?: ASNavBarStyleOptions;
 }
-export type ASNavBarArrowButtonClickFn = (event: MouseEvent, dir: ASComponentDirection) => void;
+export type ASNavBarArrowButtonClickFn = (event: PointerEvent, dir: ASComponentDirection) => void;
 export type ASNavBarArrowButtonsProps = {
     className?: string;
     theme?: ASTheme;

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,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,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,UAAU,EAAE,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;AAEhG,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,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"}

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;;;;;;;;;;;;;qKAMnC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;qKAMlC,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,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"}

package/dist/asnavbar/navbararrowbuttons/styles.js

@@ -67,10 +67,10 @@ exports.ASNavBarArrowButtonsStyled = styled_components_1.default.div `
 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'};
   z-index: 1;
-  scale: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? 0.9 : size === apptypes_1.ComponentSize.Large ? 0.8 : 0.8};
+  scale: 0.8;
 `;
 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'};
   z-index: 1;
-  scale: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? 0.9 : size === apptypes_1.ComponentSize.Large ? 0.8 : 0.8};
+  scale: 0.8;
 `;

package/dist/asnavbar/navbaritem/ASNavBarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/asnavbar/navbaritem/ASNavBarItem.js

@@ -44,6 +44,6 @@ const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText =
     (0, react_1.useEffect)(() => {
         isNavBarItemSelected.current = selected;
     }, [selected]);
-    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarItemStyled, { id: itemId, theme: theme, title: displayText, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onClick: onItemClickHandler, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarItemStyled, { id: itemId, theme: theme, title: displayText, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerDown: onItemClickHandler, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
 };
 exports.default = ASNavBarItem;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAIpD,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,4PAmE9B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAIpD,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,4PAoE9B,CAAC"}

package/dist/asnavbar/navbaritem/styles.js

@@ -23,6 +23,7 @@ exports.ASNavBarItemStyled = styled_components_1.default.div `
   z-index: 1;
   white-space: nowrap;
   user-select: none;
+  min-width: fit-content;
 
   & > div > div {
     pointer-events: none;
@@ -37,12 +38,12 @@ exports.ASNavBarItemStyled = styled_components_1.default.div `
 
   &.ASMedium {
     font-size: 1.7rem;
-    font-weight: 500;
+    font-weight: 400;
   }
 
   &.ASLarge {
     font-size: 2.1rem;
-    font-weight: 600;
+    font-weight: 500;
   }
 
   ${({ $selected = false, theme = astheme_1.default }) => $selected

package/dist/asnavbar/navbarpickpanel/ASNavBarPickPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarPickPanel.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanel/ASNavBarPickPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ASNavBarPickPanel.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanel/ASNavBarPickPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAKvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBarPickPanelItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsEtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ASNavBarPickPanelItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6FtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.js

@@ -8,6 +8,7 @@ const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
 const styles_1 = require("../styles");
 const styles_2 = require("./styles");
 const ASNavBarPickPanelItem = ({ className = '', theme = astheme_1.default, displayText = '---', icon, selected = false, itemId, itemIndex = 0, size = apptypes_1.ComponentSize.Medium, onItemClick = () => undefined, onItemResized = () => undefined, }) => {
+    const tapDebounceRef = (0, react_1.useRef)('None');
     const [navItemSizeInitialized, setNavSizeInitialized] = (0, react_1.useState)(false);
     const navItemWidthRef = (0, react_1.useRef)(0);
     const navBarItemRef = (0, react_1.useRef)(null);
@@ -42,6 +43,25 @@ const ASNavBarPickPanelItem = ({ className = '', theme = astheme_1.default, disp
     (0, react_1.useEffect)(() => {
         isNavBarItemSelected.current = selected;
     }, [selected]);
-    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarPickPanelItemStyled, { id: itemId, theme: theme, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onClick: onItemClickHandler, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
+    const onTap = (e) => {
+        if (tapDebounceRef.current === 'None') {
+            tapDebounceRef.current = 'Down';
+            const btnEl = e.currentTarget;
+            btnEl.ariaPressed = 'true';
+            onItemClickHandler(e);
+            btnEl.releasePointerCapture(e.pointerId);
+        }
+    };
+    const onTapRelease = (e) => {
+        if (tapDebounceRef.current === 'Down') {
+            tapDebounceRef.current = 'Up';
+            const btnEl = e.currentTarget;
+            setTimeout(() => {
+                btnEl.ariaPressed = 'false';
+                tapDebounceRef.current = 'None';
+            }, 400);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarPickPanelItemStyled, { id: itemId, theme: theme, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerUp: onTapRelease, onPointerDown: onTap, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
 };
 exports.default = ASNavBarPickPanelItem;

package/dist/asnavbar/navbarpickpanelitem/styles.js

@@ -31,12 +31,12 @@ exports.ASNavBarPickPanelItemStyled = styled_components_1.default.div `
 
   &.ASMedium {
     font-size: 1.7rem;
-    font-weight: 500;
+    font-weight: 400;
   }
 
   &.ASLarge {
     font-size: 2.1rem;
-    font-weight: 600;
+    font-weight: 500;
   }
 
   ${({ $selected = false, theme = astheme_1.default }) => $selected

package/dist/asnavbar/styles.d.ts

@@ -1,11 +1,9 @@
-import { ASTheme } from '../apptypes/ASUI.types';
-interface ASNavBarStyledProps {
+import { ASNavBarStyleOptions, ASTheme } from '../apptypes/ASUI.types';
+interface ASNavBarStyledProps extends ASNavBarStyleOptions {
     theme: ASTheme;
     $mobileMode?: boolean;
     $gap?: number;
     $maxWidth?: number;
-    $borderRadius?: number;
-    $padding?: string;
 }
 export declare const ASNavBarStyled: 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 {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asnavbar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,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,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,eAAO,MAAM,cAAc,wPAkD1B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,6PAgBtC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asnavbar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGvE,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;CACpB;AAwCD,eAAO,MAAM,cAAc,wPAoC1B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,6PAgBtC,CAAC"}

package/dist/asnavbar/styles.js

@@ -4,7 +4,7 @@ exports.ASNavBarLeadingIconPadding = exports.ASNavBarStyled = 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 ScrollBarConfig = (0, styled_components_1.css) `
+const ShowScrollBarConfig = (0, styled_components_1.css) `
   /* Chrome, Edge, and Safari */
   &::-webkit-scrollbar {
     width: 1px;
@@ -30,6 +30,16 @@ const ScrollBarConfig = (0, styled_components_1.css) `
   scrollbar-color: #ffda3f transparent; // thumb color, track color
   scrollbar-width: thinner;
 `;
+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 */
+`;
 exports.ASNavBarStyled = styled_components_1.default.div `
   anchor-name: --navbarAnchor;
   display: grid;
@@ -47,7 +57,7 @@ exports.ASNavBarStyled = styled_components_1.default.div `
   flex-wrap: nowrap;
   position: relative;
   overflow-x: auto;
-  margin: 0 auto;
+  margin: ${({ $margin = '0 auto' }) => $margin};
   padding: ${({ $padding = '0' }) => $padding};
   border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
   background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
@@ -56,7 +66,7 @@ exports.ASNavBarStyled = styled_components_1.default.div `
   width: 100%;
   @supports (width: -webkit-fill-available) {
     width: -webkit-fill-available;
-    max-width: ${({ $maxWidth }) => ($maxWidth ? $maxWidth + 'px' : '100%')};
+    max-width: ${({ $maxWidth = 100, $maxWidthUnit = '%' }) => `${$maxWidth}${$maxWidthUnit}`};
   }
 
   @media screen and (max-width: 768px) {
@@ -64,22 +74,7 @@ exports.ASNavBarStyled = styled_components_1.default.div `
     width: 100%;
   }
 
-  @media screen and (max-width: 1024px) {
-    max-width: 800px;
-    // width: 100%;
-  }
-
-  // @media screen and (max-width: 1440px) {
-  // max-width: 1024px;
-  // width: 100%;
-  // }
-
-  // @media screen and (max-width: 1920px) {
-  // max-width: 1440px;
-  // width: 100%;
-  // }
-
-  ${ScrollBarConfig}
+  ${({ $hideHorizontalScrollbarInDW = true }) => $hideHorizontalScrollbarInDW ? HideScrollBarConfig : ShowScrollBarConfig};
 `;
 exports.ASNavBarLeadingIconPadding = styled_components_1.default.div `
   padding: 0 4px;

package/dist/astheme/ASThemeDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASThemeDefault.d.ts","sourceRoot":"","sources":["../../src/astheme/ASThemeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAyEjD,QAAA,MAAM,cAAc,EAAE,OA8FrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ASThemeDefault.d.ts","sourceRoot":"","sources":["../../src/astheme/ASThemeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AA0EjD,QAAA,MAAM,cAAc,EAAE,OA8FrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/astheme/ASThemeDefault.js

@@ -17,6 +17,7 @@ const colors = {
     yellow85: '#ffee66',
     yellow88: '#fff6af',
     yellow90: '#867017',
+    yellow91: '#a47200',
     yellow95: '#a68500',
     yellow100: '#4a4000',
     yellow110: '#3d340e',
@@ -75,12 +76,12 @@ const ASThemeDefault = {
     button: {
         buttonGradientDown: `linear-gradient(to bottom, ${colors.yellow30} 0%, ${colors.mainYellow} 100%)`,
         buttonGradientUp: `linear-gradient(to top, ${colors.yellow30} 0%, ${colors.mainYellow} 100%)`,
-        buttonShadowHoverASSmall: `inset 0 0 5px 0 ${colors.mainGray47}`,
-        buttonShadowHoverASMedium: `inset 0 0 10px 0 ${colors.mainGray47}`,
-        buttonShadowHoverASLarge: `inset 0 0 15px 0 ${colors.mainGray47}`,
-        buttonShadowActiveASSmall: `inset 0 0 5px 1px ${colors.mainBlack}`,
-        buttonShadowActiveASMedium: `inset 0 0 8px 2px ${colors.mainBlack}`,
-        buttonShadowActiveASLarge: `inset 0 0 11px 3px ${colors.mainBlack}`,
+        buttonShadowHoverASSmall: `inset 0 0 1px 0 ${colors.yellow91}`,
+        buttonShadowHoverASMedium: `inset 0 0 4px 0 ${colors.yellow91}`,
+        buttonShadowHoverASLarge: `inset 0 0 6px 0 ${colors.yellow91}`,
+        buttonShadowActiveASSmall: `inset 0 0 5px 1px ${colors.yellow91}`,
+        buttonShadowActiveASMedium: `inset 0 0 6px 1px ${colors.yellow91}`,
+        buttonShadowActiveASLarge: `inset 0 0 11px 2px ${colors.yellow91}`,
         buttonShadowNormal: `inset 0 0 1px 0 ${colors.yellow30}`,
         buttonShadowHover: `inset 0 0 1px 0 ${colors.yellow80}`,
         buttonOutline: colors.mainYellow,

package/package.json

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