@eleventheye/asui 2.8.0 → 2.9.0

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

@@ -82,6 +82,7 @@ export type ASColorTheme = {
     yellow85: string;
     yellow88: string;
     yellow90: string;
+    yellow91: string;
     yellow95: string;
     yellow100: string;
     yellow110: string;
@@ -101,9 +102,11 @@ export type ASColorTheme = {
     mainGray22: string;
     mainGray33: string;
     mainGray41: string;
+    mainGray47: string;
     mainGray55: string;
     mainGray58: string;
     mainGray66: string;
+    mainGray69: string;
     mainGray6d: string;
     mainGray72: string;
     mainGray81: string;
@@ -182,13 +185,20 @@ export type ASNavBarTheme = {
     navBarItemColorHover: string;
     navBarItemColorSelected: string;
 };
+export type ASModalTheme = {
+    modalBackgroundColor: string;
+    modalBackdropColor: string;
+    modalOutlineColor: string;
+    modalZIndex: string | number;
+};
 export interface ASTheme {
-    navbar: ASNavBarTheme;
-    textfield: ASTextFieldTheme;
-    dropdown: ASDropdownTheme;
     button: ASButtonTheme;
-    loader: ASLoaderTheme;
     colors: ASColorTheme;
+    dropdown: ASDropdownTheme;
+    loader: ASLoaderTheme;
+    modal: ASModalTheme;
+    navbar: ASNavBarTheme;
+    textfield: ASTextFieldTheme;
     borderRadius: string;
     fontFamily: string;
     fontSize: string;

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":"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"}
+{"version":3,"file":"ASUI.types.d.ts","sourceRoot":"","sources":["../../src/apptypes/ASUI.types.ts"],"names":[],"mappings":"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"}

package/dist/asbutton/ASButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASButton.d.ts","sourceRoot":"","sources":["../../src/asbutton/ASButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8DrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ASButton.d.ts","sourceRoot":"","sources":["../../src/asbutton/ASButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8DrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/asbutton/ASButton.js

@@ -7,7 +7,7 @@ const ASUI_types_1 = require("../apptypes/ASUI.types");
 const asloader_1 = tslib_1.__importDefault(require("../asloader"));
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
 const styles_1 = require("./styles");
-const ASButton = ({ className = '', onClick = () => undefined, selected = false, toggle = false, size = ASUI_types_1.ComponentSize.Medium, paddingSize = [ASUI_types_1.ComponentSize.Medium, ASUI_types_1.ComponentSize.Medium], theme = astheme_1.default, disabled = false, isLoading = false, children, text, id, style, ...props }) => {
+const ASButton = ({ className = '', onTapped = () => undefined, selected = false, toggle = false, size = ASUI_types_1.ComponentSize.Medium, paddingSize = [ASUI_types_1.ComponentSize.Medium, ASUI_types_1.ComponentSize.Medium], theme = astheme_1.default, disabled = false, isLoading = false, children, text, id, style, ...props }) => {
     const [isSelected, setIsSelected] = (0, react_1.useState)(selected);
     (0, react_1.useEffect)(() => {
         setIsSelected(selected);
@@ -15,7 +15,7 @@ const ASButton = ({ className = '', onClick = () => undefined, selected = false,
     const onClickHandler = (e) => {
         if (toggle)
             setIsSelected(!isSelected);
-        onClick(e);
+        onTapped?.(e);
     };
     const onEnableDisableHandler = (node) => {
         if (node) {
@@ -27,6 +27,6 @@ const ASButton = ({ className = '', onClick = () => undefined, selected = false,
             }
         }
     };
-    return ((0, jsx_runtime_1.jsx)(styles_1.ASButtonStyled, { theme: theme, role: "button", ref: onEnableDisableHandler, size: size, "aria-disabled": isLoading ? 'true' : disabled.toString(), className: `${className} ${size} ${isSelected ? 'Selected' : ''}`, "data-buttontext": isLoading ? '' : children ?? text, onClick: onClickHandler, style: style, id: id, ...props, children: (0, jsx_runtime_1.jsxs)(styles_1.ButtonPadding, { size: size, children: [(0, jsx_runtime_1.jsx)(asloader_1.default, { size: ASUI_types_1.ComponentSize.Small, loaderType: ASUI_types_1.LoaderType.Spin, showLoader: isLoading }), !isLoading && (children ?? text), isLoading && (0, jsx_runtime_1.jsx)(styles_1.ASButtonHidden, { children: children ?? text })] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASButtonStyled, { theme: theme, role: "button", ref: onEnableDisableHandler, size: size, "aria-disabled": isLoading ? 'true' : disabled.toString(), className: `${className} ${size} ${isSelected ? 'Selected' : ''}`, "data-buttontext": isLoading ? '' : children ?? text, onTapped: onClickHandler, style: style, id: id, ...props, children: (0, jsx_runtime_1.jsxs)(styles_1.ButtonPadding, { size: size, children: [(0, jsx_runtime_1.jsx)(asloader_1.default, { size: ASUI_types_1.ComponentSize.Small, loaderType: ASUI_types_1.LoaderType.Spin, showLoader: isLoading }), !isLoading && (children ?? text), isLoading && (0, jsx_runtime_1.jsx)(styles_1.ASButtonHidden, { children: children ?? text })] }) }));
 };
 exports.default = ASButton;

package/dist/asbutton/ASButton.types.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent, PointerEvent } from 'react';
 import { ASComponentSize, ASPaddingSize, ASTheme } from '../apptypes/ASUI.types';
 type ASButtonOwnProps = {
     className?: string;
@@ -8,6 +9,8 @@ type ASButtonOwnProps = {
     theme?: ASTheme;
     paddingSize?: ASPaddingSize;
     isLoading?: boolean;
+    onTapped?: (event: PointerEvent) => void;
+    onClick?: (event: MouseEvent) => void;
 } & Omit<React.HTMLProps<HTMLDivElement>, 'size'>;
 export type ASButtonProps = React.PropsWithChildren<ASButtonOwnProps>;
 export {};

package/dist/asbutton/ASButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASButton.types.d.ts","sourceRoot":"","sources":["../../src/asbutton/ASButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjF,KAAK,gBAAgB,GAAG;IACtB,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;IAMvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,WAAW,CAAC,EAAE,aAAa,CAAC;IAO5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"ASButton.types.d.ts","sourceRoot":"","sources":["../../src/asbutton/ASButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjF,KAAK,gBAAgB,GAAG;IACtB,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;IAMvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAOhB,WAAW,CAAC,EAAE,aAAa,CAAC;IAO5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAOpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAQzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/asbutton/styles.d.ts

@@ -1,8 +1,12 @@
 import { ASComponentSize, ASTheme } from '../apptypes/ASUI.types';
-export declare const ASButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const ASButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, {
     theme: ASTheme;
     size: ASComponentSize;
-}>> & string;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const ButtonPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     size?: ASComponentSize;
 }>> & string;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,wBAAwB,CAAC;AAEjF,eAAO,MAAM,cAAc;WAAuB,OAAO;UAAQ,eAAe;YAwJ/E,CAAC;AAEF,eAAO,MAAM,aAAa;WAAuB,eAAe;YAG/D,CAAC;AAEF,eAAO,MAAM,cAAc,6NAG1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,wBAAwB,CAAC;AAGjF,eAAO,MAAM,cAAc;;;WAA+B,OAAO;UAAQ,eAAe;;;kGAwJvF,CAAC;AAEF,eAAO,MAAM,aAAa;WAAuB,eAAe;YAG/D,CAAC;AAEF,eAAO,MAAM,cAAc,6NAG1B,CAAC"}

package/dist/asbutton/styles.js

@@ -4,7 +4,8 @@ exports.ASButtonHidden = exports.ButtonPadding = exports.ASButtonStyled = void 0
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 const ASUI_types_1 = require("../apptypes/ASUI.types");
-exports.ASButtonStyled = styled_components_1.default.div `
+const astappable_1 = tslib_1.__importDefault(require("../astappable"));
+exports.ASButtonStyled = (0, styled_components_1.default)(astappable_1.default) `
   font-weight: 400;
   min-width: 100px;
   min-height: 20px;

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;AAGzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqF7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ASIconButton.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+D7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/asiconbutton/ASIconButton.js

@@ -7,7 +7,6 @@ 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, 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)(() => {
         setIsSelected(selected);
@@ -15,30 +14,6 @@ const ASIconButton = ({ className = '', onIconButtonTap = () => undefined, selec
     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);
-        }
-    };
-    const onTapRelease = (e) => {
-        if (tapDebounceRef.current === 'Down') {
-            tapDebounceRef.current = 'Up';
-            const btnEl = e.currentTarget;
-            onIconButtonTap(e);
-            btnEl.releasePointerCapture(e.pointerId);
-            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) {
             if (disabled || isLoading) {
@@ -49,6 +24,11 @@ const ASIconButton = ({ className = '', onIconButtonTap = () => undefined, selec
             }
         }
     };
-    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 }) }));
+    const onTappedHandler = (e) => {
+        if (toggle)
+            setIsSelected(!isSelected);
+        onIconButtonTap(e);
+    };
+    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' : ''}`, onTapped: onTappedHandler, 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

@@ -1,6 +1,10 @@
 import { ASComponentSize, ASTheme } from '../apptypes/ASUI.types';
-export declare const ASIconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const ASIconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, {
     theme: ASTheme;
     size: ASComponentSize;
-}>> & string;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=styles.d.ts.map

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;YAgMnF,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;AAGlE,eAAO,MAAM,kBAAkB;;;WAA+B,OAAO;UAAQ,eAAe;;;kGAgM3F,CAAC"}

package/dist/asiconbutton/styles.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ASIconButtonStyled = void 0;
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.ASIconButtonStyled = styled_components_1.default.div `
+const astappable_1 = tslib_1.__importDefault(require("../astappable"));
+exports.ASIconButtonStyled = (0, styled_components_1.default)(astappable_1.default) `
   font-weight: 400;
   min-height: 20px;
   min-height: 20px;

package/dist/asmodal/ASModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASModal.d.ts","sourceRoot":"","sources":["../../src/asmodal/ASModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,YAAY,CAAC,CA0EtD,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"ASModal.d.ts","sourceRoot":"","sources":["../../src/asmodal/ASModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAkDtD,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/asmodal/ASModal.js

@@ -1,16 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
+const astheme_1 = tslib_1.__importDefault(require("../astheme"));
 const styles_1 = require("./styles");
-const ASModal = ({ className = '', isOpen = false, onBackdropClick = () => undefined, ...props }) => {
-    const tapDebounceRef = (0, react_1.useRef)('None');
+const ASModal = ({ className = '', isOpen = false, theme = astheme_1.default, showBackdrop = true, onBackdropClick = () => undefined, styleOptions = {
+    wrapperOptions: {
+        $padding: '16px',
+        $margin: '0',
+        $borderRadius: '4px',
+        $position: 'absolute',
+        $width: '300px',
+        $height: '500px',
+        $backdropFilter: 'blur(2px)',
+        $showInnerBorder: true,
+    },
+}, ...props }) => {
     const rootEl = document.body ?? document.getElementsByTagName('body')[0];
     (0, react_1.useEffect)(() => {
         if (!rootEl)
             return;
-        console.log('What is happening?');
         rootEl.style.overflow = isOpen ? 'hidden' : '';
         return () => {
             if (rootEl) {
@@ -21,31 +32,6 @@ const ASModal = ({ className = '', isOpen = false, onBackdropClick = () => undef
     if (!(isOpen && rootEl)) {
         return null;
     }
-    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';
-        }
-    };
-    const onTapRelease = (e) => {
-        if (tapDebounceRef.current === 'Down') {
-            tapDebounceRef.current = 'Up';
-            const btnEl = e.currentTarget;
-            onBackdropClick(e);
-            btnEl.releasePointerCapture(e.pointerId);
-            console.log(`%c ${tapDebounceRef.current} %c`, clsY, '');
-            setTimeout(() => {
-                btnEl.ariaPressed = 'false';
-                tapDebounceRef.current = 'None';
-                console.log(`%c ${tapDebounceRef.current} %c`, clsG, '');
-            }, 400);
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.ASModalBackdropStyled, { onPointerDown: onTap, onPointerUp: onTapRelease }), props.children] }), rootEl) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.ASModalBackdropStyled, { onTapped: onBackdropClick, theme: theme, "$showBackdropColor": showBackdrop }), (0, jsx_runtime_1.jsx)(styles_1.ASModalChildrenWrapper, { theme: theme, wrapperOptions: styleOptions.wrapperOptions, children: props.children })] }), rootEl) }));
 };
 exports.default = ASModal;

package/dist/asmodal/ASModal.types.d.ts

@@ -1,8 +1,29 @@
 import { PointerEvent } from 'react';
+import { ASTheme } from '../apptypes';
 export type ASModalProps = {
     className?: string;
+    theme?: ASTheme;
     isOpen?: boolean;
+    showBackdrop?: boolean;
     onBackdropClick?: (e: PointerEvent) => void;
-    bgColor?: string;
+    styleOptions?: ASModalStyleOptions;
 };
+export type ASModalBackdropStyledProps = {
+    theme?: ASTheme;
+    $showBackdropColor?: boolean;
+};
+export type ASModalStyledProps = {
+    theme?: ASTheme;
+    wrapperOptions?: {
+        $padding?: string;
+        $margin?: string;
+        $borderRadius?: string;
+        $position?: string;
+        $width?: string;
+        $height?: string;
+        $backdropFilter?: string;
+        $showInnerBorder?: boolean;
+    };
+};
+export type ASModalStyleOptions = {} & ASModalBackdropStyledProps & ASModalStyledProps;
 //# sourceMappingURL=ASModal.types.d.ts.map

package/dist/asmodal/ASModal.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASModal.types.d.ts","sourceRoot":"","sources":["../../src/asmodal/ASModal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}
+{"version":3,"file":"ASModal.types.d.ts","sourceRoot":"","sources":["../../src/asmodal/ASModal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,EAAE,GAAG,0BAA0B,GAAG,kBAAkB,CAAC"}

package/dist/asmodal/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './ASModal';
-export type { ASModalProps } from './ASModal.types';
+export type { ASModalBackdropStyledProps, ASModalProps } from './ASModal.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/asmodal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/asmodal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/asmodal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,0BAA0B,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/asmodal/styles.d.ts

@@ -1,2 +1,8 @@
-export declare const ASModalBackdropStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import { ASModalBackdropStyledProps, ASModalStyledProps } from './ASModal.types';
+export declare const ASModalBackdropStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, ASModalBackdropStyledProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ASModalChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASModalStyledProps>> & string;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asmodal/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,6NAQjC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asmodal/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEjF,eAAO,MAAM,qBAAqB;;;;kGAcjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,uPAmClC,CAAC"}

package/dist/asmodal/styles.js

@@ -1,14 +1,57 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ASModalBackdropStyled = void 0;
+exports.ASModalChildrenWrapper = exports.ASModalBackdropStyled = void 0;
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.ASModalBackdropStyled = styled_components_1.default.div `
-  content: '';
+const astappable_1 = tslib_1.__importDefault(require("../astappable"));
+exports.ASModalBackdropStyled = (0, styled_components_1.default)(astappable_1.default) `
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 2;
+  background: ${(props) => (props.$showBackdropColor ? props.theme.modal.modalBackdropColor : 'transparent')};
+  z-index: ${(props) => props.theme.modal.modalZIndex};
+  opacity: 1;
+
+  transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
+
+  @starting-style {
+    opacity: 0;
+  }
+`;
+exports.ASModalChildrenWrapper = styled_components_1.default.div `
+  position: ${(props) => props.wrapperOptions?.$position || 'absolute'};
+  background: ${(props) => props.theme.modal.modalBackgroundColor};
+  padding: ${(props) => props.wrapperOptions?.$padding || '0'};
+  margin: ${(props) => props.wrapperOptions?.$margin || '0'};
+  outline: thin solid ${(props) => props.theme.modal.modalOutlineColor};
+  border-radius: ${(props) => props.wrapperOptions?.$borderRadius || '6px'};
+  width: ${(props) => props.wrapperOptions?.$width || '300px'};
+  height: ${(props) => props.wrapperOptions?.$height || '500px'};
+  box-shadow: inset 0 0 6px 1px ${(props) => props.theme.colors.mainGray81};
+  backdrop-filter: ${(props) => props.wrapperOptions?.$backdropFilter || 'blur(2px)'};
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 1;
+  transition: opacity 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
+  z-index: ${(props) => parseInt(String(props.theme.modal.modalZIndex)) + 1};
+
+  @starting-style {
+    opacity: 0;
+  }
+
+  &:after {
+    display: ${(props) => (props.wrapperOptions?.$showInnerBorder ? 'block' : 'none')};
+    content: '';
+    box-shadow: inset -1px -1px 2px 0 #fff6, inset 1px 2px 6px 1px rgba(0, 0, 0, 0.212),
+      inset 1px 1px 4px 1px rgba(0, 0, 0, 0.512);
+    position: absolute;
+    inset: 0;
+    border-radius: 4px;
+    margin: 16px;
+    user-select: none;
+    touch-events: none;
+    pointer-events: none;
+  }
 `;

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;AAc9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmJvC,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,CAiJvC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/asnavbar/desktop/ASNavBarDW.js

@@ -38,12 +38,11 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
         });
     };
     const onScrollEndHandler = () => {
-        if (!navBarHighlightBoxRef.current || !navBarScrollRef.current || !navBarRef.current || !selectedItemElRef.current)
+        if (!navBarHighlightBoxRef.current || !navBarScrollRef.current || !selectedItemElRef.current)
             return;
         const selectedItemEl = selectedItemElRef.current;
         const selectedElRect = selectedItemEl.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;
@@ -98,6 +97,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.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 })] }));
+    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, ...styleOptions, 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

@@ -7,6 +7,7 @@ interface ASNavBarStyledProps {
     $minWidth?: number;
     $borderRadius?: number;
     $padding?: string;
+    $hideNavArrowButtonsInDW?: boolean;
 }
 export declare const ASNavBarDWStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
 interface ASNavBarSelectedBoxStyledProps {
@@ -25,7 +26,7 @@ interface ASNavBarItemStyledProps {
 }
 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;
 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 ASNavBarScrollableItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & 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,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;AAEF,eAAO,MAAM,uBAAuB,6NAInC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAYnC,CAAC;AAEF,eAAO,MAAM,uBAAuB,wPAiBnC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAIpD,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;IAClB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAsBD,eAAO,MAAM,gBAAgB,wPAqB5B,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,4PAwC9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAInC,CAAC;AAEF,eAAO,MAAM,uBAAuB,wPAYnC,CAAC;AAEF,eAAO,MAAM,uBAAuB,wPAiBnC,CAAC"}

package/dist/asnavbar/desktop/styles.js

@@ -4,22 +4,7 @@ exports.ASScrollContainerStyled = exports.ASNavBarScrollableItems = exports.ASNa
 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 ASSharedStyles_1 = require("../../astheme/ASSharedStyles");
 const dimensionsForSizes = (0, styled_components_1.css) `
   &.ASSmall {
     height: 30px;
@@ -35,7 +20,7 @@ const dimensionsForSizes = (0, styled_components_1.css) `
 
   &.ASLarge {
     height: 50px;
-    font-size: 2.1rem;
+    font-size: 2rem;
     font-weight: 500;
   }
 `;
@@ -47,7 +32,7 @@ exports.ASNavBarDWStyled = styled_components_1.default.div `
   flex-direction: row;
   position: relative;
   gap: ${({ $gap = 30 }) => $gap}px;
-  width: -webkit-fill-available;
+  ${ASSharedStyles_1.MaxWidthStyle}
   contain: layout;
   grid-row: 1;
   min-width: ${({ $minWidth = 300 }) => $minWidth}px;
@@ -56,7 +41,8 @@ exports.ASNavBarDWStyled = styled_components_1.default.div `
   background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
   box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
   overflow: hidden;
-  overflow-x: overlay;
+  contain: content;
+  max-width: 100%;
 
   ${dimensionsForSizes}
 `;
@@ -88,6 +74,7 @@ exports.ASNavBarItemStyled = styled_components_1.default.div `
   z-index: 1;
   white-space: nowrap;
   user-select: none;
+  overflow-x: overlay;
 
   ${dimensionsForSizes}
 
@@ -126,10 +113,10 @@ exports.ASNavBarScrollableItems = styled_components_1.default.div `
   flex-direction: row;
   position: relative;
   overflow: hidden;
-  width: fit-content;
-  padding: 0 44px;
+  max-width: 100%;
+  padding: ${({ $hideNavArrowButtonsInDW }) => ($hideNavArrowButtonsInDW ? '0' : '0 44px')};
   height: 95%;
-  ${HideScrollBarConfig}
+  ${ASSharedStyles_1.HideScrollBarStyle}
 `;
 exports.ASScrollContainerStyled = styled_components_1.default.div `
   display: flex;
@@ -139,7 +126,7 @@ exports.ASScrollContainerStyled = styled_components_1.default.div `
   position: relative;
   overflow: hidden;
   overflow-x: auto;
-  width: 100%
+  width: 100%;
   gap: 16px;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
@@ -147,5 +134,5 @@ exports.ASScrollContainerStyled = styled_components_1.default.div `
     scroll-snap-stop: always;
     scroll-snap-align: center;
   }
-  ${HideScrollBarConfig}
+  ${ASSharedStyles_1.HideScrollBarStyle}
 `;

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,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAQtD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiG7C,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,CAuE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/asnavbar/navbaritem/ASNavBarItem.js

@@ -7,11 +7,7 @@ const apptypes_1 = require("../../apptypes");
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
 const styles_1 = require("../styles");
 const styles_2 = require("./styles");
-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 ASNavBarItem = ({ 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);
@@ -46,25 +42,6 @@ const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText =
     (0, react_1.useEffect)(() => {
         isNavBarItemSelected.current = selected;
     }, [selected]);
-    const onTap = (e) => {
-        if (tapDebounceRef.current === 'None') {
-            tapDebounceRef.current = 'Down';
-            const btnEl = e.currentTarget;
-            btnEl.ariaPressed = 'true';
-        }
-    };
-    const onTapRelease = (e) => {
-        if (tapDebounceRef.current === 'Down') {
-            tapDebounceRef.current = 'Up';
-            const btnEl = e.currentTarget;
-            onItemClickHandler(e);
-            btnEl.releasePointerCapture(e.pointerId);
-            setTimeout(() => {
-                btnEl.ariaPressed = 'false';
-                tapDebounceRef.current = 'None';
-            }, 400);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarItemStyled, { id: itemId, theme: theme, title: displayText, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerDown: onTap, onPointerUp: onTapRelease, 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, onTapped: 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

@@ -6,6 +6,10 @@ interface ASNavBarItemStyledProps {
     $margin?: string;
     $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;
+export declare const ASNavBarItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, ASNavBarItemStyledProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("../../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export {};
 //# sourceMappingURL=styles.d.ts.map

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

package/dist/asnavbar/navbaritem/styles.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ASNavBarItemStyled = void 0;
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const astappable_1 = tslib_1.__importDefault(require("../../astappable"));
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
 const styles_1 = require("../styles");
-exports.ASNavBarItemStyled = styled_components_1.default.div `
+exports.ASNavBarItemStyled = (0, styled_components_1.default)(astappable_1.default) `
   font-family: ${({ theme }) => theme.fontFamily};
   display: flex;
   align-items: center;

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,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8FtD,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,CAuEtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.js

@@ -8,7 +8,6 @@ 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);
@@ -43,25 +42,6 @@ const ASNavBarPickPanelItem = ({ className = '', theme = astheme_1.default, disp
     (0, react_1.useEffect)(() => {
         isNavBarItemSelected.current = selected;
     }, [selected]);
-    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, role: "button", 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] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarPickPanelItemStyled, { id: itemId, theme: theme, role: "button", ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onTapped: 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 = ASNavBarPickPanelItem;

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

@@ -6,6 +6,10 @@ interface ASNavBarPickPanelItemStyledProps {
     $margin?: string;
     $padding?: string;
 }
-export declare const ASNavBarPickPanelItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarPickPanelItemStyledProps>> & string;
+export declare const ASNavBarPickPanelItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, ASNavBarPickPanelItemStyledProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("../../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export {};
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAIpD,UAAU,gCAAgC;IACxC,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,2BAA2B,qQAgEvC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAKpD,UAAU,gCAAgC;IACxC,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,2BAA2B;;;;kGAgEvC,CAAC"}

package/dist/asnavbar/navbarpickpanelitem/styles.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ASNavBarPickPanelItemStyled = void 0;
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const astappable_1 = tslib_1.__importDefault(require("../../astappable"));
 const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
 const styles_1 = require("../styles");
-exports.ASNavBarPickPanelItemStyled = styled_components_1.default.div `
+exports.ASNavBarPickPanelItemStyled = (0, styled_components_1.default)(astappable_1.default) `
   font-family: ${({ theme }) => theme.fontFamily};
   display: flex;
   align-items: center;

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,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"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asnavbar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAIvE,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;AAED,eAAO,MAAM,cAAc,wPAgC1B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,6PAetC,CAAC"}

package/dist/asnavbar/styles.js

@@ -2,44 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ASNavBarLeadingIconPadding = exports.ASNavBarStyled = void 0;
 const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
-const ShowScrollBarConfig = (0, styled_components_1.css) `
-  /* Chrome, Edge, and Safari */
-  &::-webkit-scrollbar {
-    width: 1px;
-    height: 1px; // Set scrollbar height (horizontal)
-    background: transparent;
-    scrollbar-color: #ffda3f transparent; // thumb color, track color
-    scrollbar-width: thinner;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-    height: 1px; // Set scrollbar track height (horizontal)
-    width: 1px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: linear-gradient(to bottom, rgb(22, 19, 8) 0%, rgb(255, 204, 0) 75%, rgb(66, 55, 14) 100%);
-    border-radius: 3px;
-    height: 1px; // Set scrollbar track height (horizontal)
-    width: 1px;
-  }
-
-  /* Firefox */
-  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 */
-`;
+const ASSharedStyles_1 = require("../astheme/ASSharedStyles");
 exports.ASNavBarStyled = styled_components_1.default.div `
   anchor-name: --navbarAnchor;
   display: grid;
@@ -50,7 +15,6 @@ exports.ASNavBarStyled = styled_components_1.default.div `
   grid-column: 3;
   grid-row: 1;
   grid-gap: 16px;
-  // display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
@@ -63,21 +27,17 @@ exports.ASNavBarStyled = styled_components_1.default.div `
   background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
   box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
 
-  width: 100%;
-  @supports (width: -webkit-fill-available) {
-    width: -webkit-fill-available;
-    max-width: ${({ $maxWidth = 100, $maxWidthUnit = '%' }) => `${$maxWidth}${$maxWidthUnit}`};
-  }
+  ${ASSharedStyles_1.MaxWidthStyle}
+  max-width: ${({ $maxWidth = 100, $maxWidthUnit = '%' }) => `${$maxWidth}${$maxWidthUnit}`};
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 425px) {
     max-width: 300px;
     width: 100%;
   }
 
-  ${({ $hideHorizontalScrollbarInDW = true }) => $hideHorizontalScrollbarInDW ? HideScrollBarConfig : ShowScrollBarConfig};
+  ${({ $hideHorizontalScrollbarInDW = true }) => $hideHorizontalScrollbarInDW ? ASSharedStyles_1.HideScrollBarStyle : ASSharedStyles_1.ShowScrollBarStyle};
 `;
 exports.ASNavBarLeadingIconPadding = styled_components_1.default.div `
-  // padding: 0 4px;
   pointer-events: none;
   user-select: none;
   ${({ $selected = false, theme = astheme_1.default }) => $selected

package/dist/astappable/ASTappable.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ASTappableProps } from './ASTappable.types';
+declare const ASTappable: React.ForwardRefExoticComponent<ASTappableProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ASTappable;
+//# sourceMappingURL=ASTappable.d.ts.map

package/dist/astappable/ASTappable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASTappable.d.ts","sourceRoot":"","sources":["../../src/astappable/ASTappable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,QAAA,MAAM,UAAU;;wCA4Bd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/astappable/ASTappable.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const ASTappable = react_1.default.forwardRef(({ onTapped, children, ...rest }, ref) => {
+    const tapDebounceRef = (0, react_1.useRef)('None');
+    const handlePointerDown = (e) => {
+        if (tapDebounceRef.current === 'None') {
+            tapDebounceRef.current = 'Down';
+            e.currentTarget.ariaPressed = 'true';
+        }
+    };
+    const handlePointerUp = (e) => {
+        if (tapDebounceRef.current === 'Down') {
+            tapDebounceRef.current = 'Up';
+            const tappableEl = e.currentTarget;
+            onTapped?.(e);
+            tappableEl.releasePointerCapture(e.pointerId);
+            setTimeout(() => {
+                tappableEl.ariaPressed = 'false';
+                tapDebounceRef.current = 'None';
+            }, 300);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ...rest, ref: ref, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, children: children }));
+});
+exports.default = ASTappable;

package/dist/astappable/ASTappable.types.d.ts

@@ -0,0 +1,5 @@
+import { PointerEvent } from 'react';
+export interface ASTappableProps extends React.HTMLAttributes<HTMLDivElement> {
+    onTapped?: (e: PointerEvent<HTMLDivElement>) => void;
+}
+//# sourceMappingURL=ASTappable.types.d.ts.map

package/dist/astappable/ASTappable.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASTappable.types.d.ts","sourceRoot":"","sources":["../../src/astappable/ASTappable.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACtD"}

package/dist/astappable/ASTappable.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/astappable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ASTappable';
+//# sourceMappingURL=index.d.ts.map

package/dist/astappable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/astappable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/astappable/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ASTappable_1 = require("./ASTappable");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ASTappable_1).default; } });

package/dist/astextfield/ASTextField.js

@@ -75,6 +75,6 @@ const ASTextField = ({ className = '', theme = astheme_1.default, value = '', on
         setShowType(showType === 'password' ? 'text' : 'password');
     };
     const baseCls = `"ASTextFieldInputContainer" ${size} ${leftIconCls} ${rightIconCls} ${passwordCls} ${className}`;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldInputContainer, { theme: theme, className: baseCls, style: props.style, children: [searchIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldSearchIcon, { theme: theme, className: "ASTextFieldSearchIcon", children: (0, jsx_runtime_1.jsx)(icons_1.SearchIcon, { color: "#333333", fillColor: "#333333", iconSize: 20 }) })), (0, jsx_runtime_1.jsx)(styles_1.ASTextFieldInput, { theme: theme, autoComplete: passwordIconVisible ? 'new-password' : disableAutofill ? 'off' : 'on', "aria-autocomplete": passwordIconVisible ? 'none' : 'list', autoCorrect: passwordIconVisible ? 'off' : 'on', autoCapitalize: 'none', spellCheck: passwordIconVisible ? 'false' : 'true', autoFocus: true, id: textFieldId, className: "ASTextFieldInput", type: showType, value: valueString, onChange: onValueChange, onFocus: onInputFieldFocus, ...props }), clearIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldClearIcon", onClick: clearValue, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: "transparent", fillColor: "#333333", circleStrokeColor: "#666666", circleStrokeWidth: 0.5, iconSize: 20 }) })), passwordIconVisible && ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldPasswordIcon", onClick: onPasswordShowHide, children: [showType === 'password' && (0, jsx_runtime_1.jsx)(styles_1.ScaledEyeIcon, { color: "#333333", fillColor: "#333333", iconSize: 20 }), showType === 'text' && (0, jsx_runtime_1.jsx)(styles_1.ScaledSlashedEyeIcon, { color: "#333333", fillColor: "#333333", iconSize: 20 })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldInputContainer, { theme: theme, className: baseCls, style: props.style, children: [searchIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldSearchIcon, { theme: theme, className: "ASTextFieldSearchIcon", children: (0, jsx_runtime_1.jsx)(icons_1.SearchIcon, { color: "#333333", fillColor: "#333333", iconSize: 20 }) })), (0, jsx_runtime_1.jsx)(styles_1.ASTextFieldInput, { theme: theme, autoComplete: passwordIconVisible ? 'new-password' : disableAutofill ? 'off' : 'on', "aria-autocomplete": passwordIconVisible ? 'none' : 'list', autoCorrect: passwordIconVisible ? 'off' : 'on', autoCapitalize: 'none', spellCheck: passwordIconVisible ? 'false' : 'true', autoFocus: true, id: textFieldId, className: "ASTextFieldInput", type: showType, value: valueString, onChange: onValueChange, onFocus: onInputFieldFocus, ...props }), clearIconVisible && ((0, jsx_runtime_1.jsx)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldClearIcon", onTapped: clearValue, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: "transparent", fillColor: "#333333", circleStrokeColor: "#666666", circleStrokeWidth: 0.5, iconSize: 20 }) })), passwordIconVisible && ((0, jsx_runtime_1.jsxs)(styles_1.ASTextFieldClickIcon, { theme: theme, className: "ASTextFieldPasswordIcon", onTapped: onPasswordShowHide, children: [showType === 'password' && (0, jsx_runtime_1.jsx)(styles_1.ScaledEyeIcon, { color: "#333333", fillColor: "#333333", iconSize: 20 }), showType === 'text' && (0, jsx_runtime_1.jsx)(styles_1.ScaledSlashedEyeIcon, { color: "#333333", fillColor: "#333333", iconSize: 20 })] }))] }));
 };
 exports.default = ASTextField;

package/dist/astextfield/styles.d.ts

@@ -5,12 +5,20 @@ export declare const ASTextFieldInputContainer: import("styled-components/dist/t
 export declare const ASTextFieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
     theme: ASTheme;
 }>> & string;
-export declare const ASTextFieldClickIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const ASTextFieldClickIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, {
     theme: ASTheme;
-}>> & string;
-export declare const ASTextFieldSearchIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ASTextFieldSearchIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, {
     theme: ASTheme;
-}>> & string;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("../astappable/ASTappable.types").ASTappableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const ScaledSlashedEyeIcon: 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 ScaledEyeIcon: 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>>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/astextfield/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,eAAO,MAAM,yBAAyB;WAAuB,OAAO;YAmHnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAAyB,OAAO;YAkD5D,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAAuB,OAAO;YAS9D,CAAC;AAEF,eAAO,MAAM,qBAAqB;WAAuB,OAAO;YAG/D,CAAC;AAkBF,eAAO,MAAM,oBAAoB,gQAEhC,CAAC;AACF,eAAO,MAAM,aAAa,gQAEzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/astextfield/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAIjD,eAAO,MAAM,yBAAyB;WAAuB,OAAO;YAmHnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAAyB,OAAO;YAkD5D,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;WAA+B,OAAO;;;kGAStE,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;WAA+B,OAAO;;;kGAGvE,CAAC;AAkBF,eAAO,MAAM,oBAAoB,gQAEhC,CAAC;AACF,eAAO,MAAM,aAAa,gQAEzB,CAAC"}

package/dist/astextfield/styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScaledEyeIcon = exports.ScaledSlashedEyeIcon = exports.ASTextFieldSearchIcon = exports.ASTextFieldClickIcon = exports.ASTextFieldInput = exports.ASTextFieldInputContainer = void 0;
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const astappable_1 = tslib_1.__importDefault(require("../astappable"));
 const icons_1 = require("../icons");
 exports.ASTextFieldInputContainer = styled_components_1.default.div `
   display: flex;
@@ -171,7 +172,7 @@ exports.ASTextFieldInput = styled_components_1.default.input `
     margin-right: -2px;
   }
 `;
-exports.ASTextFieldClickIcon = styled_components_1.default.div `
+exports.ASTextFieldClickIcon = (0, styled_components_1.default)(astappable_1.default) `
   cursor: pointer;
   user-select: none;
 
@@ -181,7 +182,7 @@ exports.ASTextFieldClickIcon = styled_components_1.default.div `
     }
   }
 `;
-exports.ASTextFieldSearchIcon = styled_components_1.default.div `
+exports.ASTextFieldSearchIcon = (0, styled_components_1.default)(astappable_1.default) `
   margin-right: -4px;
   user-select: none;
 `;

package/dist/astheme/ASSharedStyles.d.ts

@@ -0,0 +1,4 @@
+export declare const ShowScrollBarStyle: import("styled-components").RuleSet<object>;
+export declare const HideScrollBarStyle: import("styled-components").RuleSet<object>;
+export declare const MaxWidthStyle: import("styled-components").RuleSet<object>;
+//# sourceMappingURL=ASSharedStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ASSharedStyles.d.ts","sourceRoot":"","sources":["../../src/astheme/ASSharedStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,6CAyB9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6CAS9B,CAAC;AAEF,eAAO,MAAM,aAAa,6CAKzB,CAAC"}

package/dist/astheme/ASSharedStyles.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxWidthStyle = exports.HideScrollBarStyle = exports.ShowScrollBarStyle = void 0;
+const styled_components_1 = require("styled-components");
+exports.ShowScrollBarStyle = (0, styled_components_1.css) `
+  /* Chrome, Edge, and Safari */
+  &::-webkit-scrollbar {
+    width: 1px;
+    height: 1px; // Set scrollbar height (horizontal)
+    background: transparent;
+    scrollbar-color: #ffda3f transparent; // thumb color, track color
+    scrollbar-width: thinner;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    height: 1px; // Set scrollbar track height (horizontal)
+    width: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom, rgb(22, 19, 8) 0%, rgb(255, 204, 0) 75%, rgb(66, 55, 14) 100%);
+    border-radius: 3px;
+    height: 1px; // Set scrollbar track height (horizontal)
+    width: 1px;
+  }
+
+  /* Firefox */
+  scrollbar-color: #ffda3f transparent; // thumb color, track color
+  scrollbar-width: thinner;
+`;
+exports.HideScrollBarStyle = (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.MaxWidthStyle = (0, styled_components_1.css) `
+  width: 100%;
+  @supports (width: -webkit-fill-available) {
+    width: -webkit-fill-available;
+  }
+`;

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;AA0EjD,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,OAoGrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/astheme/ASThemeDefault.js

@@ -156,6 +156,12 @@ const ASThemeDefault = {
         navBarItemColorHover: colors.mainGrayE0,
         navBarItemColorSelected: colors.mainGray33,
     },
+    modal: {
+        modalBackdropColor: colors.blackAlpha50,
+        modalBackgroundColor: `linear-gradient(to bottom, rgba(185, 185, 185, 0.45) 0%, rgba(0, 0, 0, 0.65) 100%)`,
+        modalOutlineColor: colors.mainGray72,
+        modalZIndex: 100,
+    },
     borderRadius: '35px',
     fontFamily: "'Big Shoulders Display', 'BigShouldersDisplay'",
     fontFamilyFallback: 'Arial, sans-serif',

package/package.json

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