@eleventheye/asui 2.5.5 → 2.7.0

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

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import { ASComponentSize, ASTheme } from '../../apptypes';
+import { ASNavBarItemType } from '../../asnavbar/ASNavBar.types';
+export type ASNavBarPickPanelOwnProps = {
+    className?: string;
+    theme?: ASTheme;
+    navItems?: ASNavBarItemType[];
+    size?: ASComponentSize;
+    selectedId?: string;
+    selectedIndex?: number;
+    onItemSelected?: (itemId: string, deltaIndex: number) => void;
+};
+export type ASNavBarPickPanelProps = PropsWithChildren<ASNavBarPickPanelOwnProps>;
+//# sourceMappingURL=ASNavBarPickPanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ASNavBarPickPanel.types.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanel/ASNavBarPickPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEjE,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC,yBAAyB,CAAC,CAAC"}

package/dist/asnavbar/navbarpickpanel/ASNavBarPickPanel.types.js

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

package/dist/asnavbar/navbarpickpanel/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,YAAY,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/asnavbar/navbarpickpanel/index.js

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

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

@@ -0,0 +1,11 @@
+import { ASTheme } from '../../apptypes/ASUI.types';
+interface ASNavBarPickPanelStyledProps {
+    theme: ASTheme;
+    $count?: number;
+    $borderRadius?: number;
+    $padding?: string;
+    $gap?: number;
+}
+export declare const ASNavBarPickPanelStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarPickPanelStyledProps>> & string;
+export {};
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanel/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AA6BpD,UAAU,4BAA4B;IACpC,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,uBAAuB,iQA2BnC,CAAC"}

package/dist/asnavbar/navbarpickpanel/styles.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ASNavBarPickPanelStyled = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const ScrollBarConfig = (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.ASNavBarPickPanelStyled = styled_components_1.default.div `
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: ${({ $gap = 4 }) => $gap}px;
+  z-index: 100;
+  border-radius: ${({ $borderRadius = 4 }) => $borderRadius}px;
+  padding: ${({ $padding = '16px' }) => $padding};
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc(100vh - 20%);
+
+  width: 100%;
+  @supports (width: -webkit-fill-available) {
+    width: -webkit-fill-available;
+  }
+  min-width: 250px;
+  box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
+  background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  ${ScrollBarConfig}
+`;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ASNavBarItemProps } from '../ASNavBar.types';
+declare const ASNavBarPickPanelItem: React.FC<ASNavBarItemProps>;
+export default ASNavBarPickPanelItem;
+//# sourceMappingURL=ASNavBarPickPanelItem.d.ts.map

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

@@ -0,0 +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"}

package/dist/asnavbar/{ASNavBarItem.js → navbarpickpanelitem/ASNavBarPickPanelItem.js}

@@ -3,15 +3,17 @@ 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 styles_1 = require("../asnavbar/styles");
-const astheme_1 = tslib_1.__importDefault(require("../astheme"));
-const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText = '---', icon, selected = false, itemId, onItemClick = () => undefined, onItemResized = () => undefined, }) => {
+const apptypes_1 = require("../../apptypes");
+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 [navItemSizeInitialized, setNavSizeInitialized] = (0, react_1.useState)(false);
     const navItemWidthRef = (0, react_1.useRef)(0);
     const navBarItemRef = (0, react_1.useRef)(null);
     const isNavBarItemSelected = (0, react_1.useRef)(selected);
     const onItemClickHandler = (e) => {
-        onItemClick(itemId, e);
+        onItemClick(e, itemId, itemIndex);
     };
     (0, react_1.useEffect)(() => {
         if (navBarItemRef.current) {
@@ -40,6 +42,6 @@ const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText =
     (0, react_1.useEffect)(() => {
         isNavBarItemSelected.current = selected;
     }, [selected]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarItemStyled, { id: itemId, theme: theme, ref: navBarItemRef, className: className, "$selected": selected, onClick: onItemClickHandler, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarItemPadding, { 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, 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] }));
 };
-exports.default = ASNavBarItem;
+exports.default = ASNavBarPickPanelItem;

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

@@ -0,0 +1,3 @@
+export type { ASNavBarItemType, ASNavBarOwnProps, ASNavBarProps } from '../ASNavBar.types';
+export { default } from './ASNavBarPickPanelItem';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/asnavbar/navbarpickpanelitem/index.js

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

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

@@ -0,0 +1,11 @@
+import { ASTheme } from '../../apptypes/ASUI.types';
+interface ASNavBarPickPanelItemStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $selected?: boolean;
+    $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 {};
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +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"}

package/dist/asnavbar/navbarpickpanelitem/styles.js

@@ -0,0 +1,70 @@
+"use strict";
+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 astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const styles_1 = require("../styles");
+exports.ASNavBarPickPanelItemStyled = styled_components_1.default.div `
+  font-family: ${({ theme }) => theme.fontFamily};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  transition: color 0.3s ease-in-out 0.1s;
+  text-transform: uppercase;
+  margin: ${({ $margin = '4px 0' }) => $margin};
+  padding: ${({ $padding = '8px 0' }) => $padding};
+  box-shadow: 1px 2px 2px 1px #000000, 0px 0px 1px 0 #ffffff;
+  border-radius: 4px;
+  width: -webkit-fill-available;
+  background: radial-gradient(black, transparent);
+  z-index: 1;
+  white-space: nowrap;
+  user-select: none;
+
+  &.ASSmall {
+    font-size: 1.3rem;
+    font-weight: 400;
+  }
+
+  &.ASMedium {
+    font-size: 1.7rem;
+    font-weight: 500;
+  }
+
+  &.ASLarge {
+    font-size: 2.1rem;
+    font-weight: 600;
+  }
+
+  ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `
+    transition: all 0.3s ease-in-out 0.2s;
+    box-shadow: 1px 2px 2px 0 #000000 inset, 0px 0px 1px 0 #ffffff;
+    background: ${theme.navbar.navBarSelectedBoxBackgroundColor};
+    color: ${theme.navbar.navBarItemColorSelected};
+  `
+    : `color: ${theme.navbar.navBarItemColor};`}
+
+  @media (hover) {
+    &:hover {
+      ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `color: ${theme.navbar.navBarItemColorSelected};`
+    : `cursor: pointer;
+        box-shadow: 1px 2px 2px 0 #000000, 0px 0px 1px 0 #ffffff;
+        transition: color 0.3s ease-in-out;
+        color: ${theme.navbar.navBarItemColorHover};
+        & > div > div > svg > path {
+          stroke-width: 0.4;
+          stroke: ${theme.navbar.navBarItemColorHover};
+        }
+      `}
+    }
+  }
+
+  & ${styles_1.ASNavBarStyled} {
+    min-width: 200px;
+  }
+`;

package/dist/asnavbar/styles.d.ts

@@ -8,25 +8,10 @@ interface ASNavBarStyledProps {
     $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 ASNavBarSelectedBoxStyledProps {
-    theme: ASTheme;
-    $mobileMode?: boolean;
-    $height?: number;
-    $borderRadius?: number;
-}
-export declare const ASSelectedBoxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ASNavBarSelectedBoxStyledProps>> & string;
-interface ASNavBarItemStyledProps {
-    theme: ASTheme;
-    $mobileMode?: boolean;
-    $selected?: boolean;
-    $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;
 interface ASNavBarItemPaddingProps {
     theme: ASTheme;
     $selected?: boolean;
 }
-export declare const ASNavBarItemPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemPaddingProps>> & string;
+export declare const ASNavBarLeadingIconPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemPaddingProps>> & string;
 export {};
 //# sourceMappingURL=styles.d.ts.map

package/dist/asnavbar/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;AAED,eAAO,MAAM,cAAc,wPAgC1B,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,4PAoD9B,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/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"}

package/dist/asnavbar/styles.js

@@ -1,121 +1,99 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ASNavBarItemPadding = exports.ASNavBarItemStyled = exports.ASSelectedBoxStyled = exports.ASNavBarStyled = void 0;
+exports.ASNavBarLeadingIconPadding = exports.ASNavBarStyled = void 0;
 const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
-exports.ASNavBarStyled = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  flex-direction: row;
-  position: relative;
-  gap: ${({ $gap = 30 }) => $gap}px;
-  width: fit-content;
-  max-width: ${({ $maxWidth = 800 }) => $maxWidth}px;
-  border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
-  background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
-  padding: ${({ $padding = '0 24px' }) => $padding};
-  box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
-
-  &.ASSmall {
-    height: 30px;
-    font-size: 1rem;
-    font-weight: 400;
+const ScrollBarConfig = (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;
   }
-
-  &.ASMedium {
-    height: 40px;
-    font-size: 1.5rem;
-    font-weight: 500;
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    height: 1px; // Set scrollbar track height (horizontal)
+    width: 1px;
   }
 
-  &.ASLarge {
-    height: 50px;
-    font-size: 2rem;
-    font-weight: 600;
+  &::-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;
   }
-`;
-exports.ASSelectedBoxStyled = styled_components_1.default.span `
-  position: absolute;
-  height: 90%;
-  border-radius: ${({ $borderRadius = 4 }) => $borderRadius}px;
-  background-color: ${({ theme }) => theme.navbar.navBarSelectedBoxBackgroundColor};
-  z-index: 0;
-  left: 0;
-  transition: all 0.3s ease-in-out 0.1s allow-discrete;
 
-  @starting-style {
-    z-index: 0;
-    left: 0;
-  }
+  /* Firefox */
+  scrollbar-color: #ffda3f transparent; // thumb color, track color
+  scrollbar-width: thinner;
 `;
-exports.ASNavBarItemStyled = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
+exports.ASNavBarStyled = styled_components_1.default.div `
+  anchor-name: --navbarAnchor;
+  display: grid;
+  touch-action: manipulation;
+  border-radius: ${({ $borderRadius = 4 }) => $borderRadius}px;
+  grid-auto-rows: auto;
+  grid-auto-flow: column;
+  grid-column: 3;
+  grid-row: 1;
+  grid-gap: 16px;
+  // display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
   flex-wrap: nowrap;
-  flex-direction: row;
-  transition: color 0.3s ease-in-out 0.1s;
-  text-transform: uppercase;
-  margin: ${({ $margin = '4px 0' }) => $margin};
-  padding: ${({ $padding = '0 8px' }) => $padding};
-  z-index: 1;
-  white-space: nowrap;
-  user-select: none;
+  position: relative;
+  overflow-x: auto;
+  margin: 0 auto;
+  padding: ${({ $padding = '0' }) => $padding};
+  border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
+  background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
+  box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
 
-  &.ASSmall {
-    font-size: 1rem;
-    font-weight: 400;
+  width: 100%;
+  @supports (width: -webkit-fill-available) {
+    width: -webkit-fill-available;
+    max-width: ${({ $maxWidth }) => ($maxWidth ? $maxWidth + 'px' : '100%')};
   }
 
-  &.ASMedium {
-    font-size: 1.5rem;
-    font-weight: 500;
+  @media screen and (max-width: 768px) {
+    max-width: 300px;
+    width: 100%;
   }
 
-  &.ASLarge {
-    font-size: 2rem;
-    font-weight: 600;
+  @media screen and (max-width: 1024px) {
+    max-width: 800px;
+    // width: 100%;
   }
 
-  ${({ $selected = false, theme = astheme_1.default }) => $selected
-    ? `
-    transition: all 0.3s ease-in-out 0.2s;
-    color: ${theme.navbar.navBarItemColorSelected};
-  `
-    : `color: ${theme.navbar.navBarItemColor};`}
+  // @media screen and (max-width: 1440px) {
+  // max-width: 1024px;
+  // width: 100%;
+  // }
 
-  @media (hover) {
-    &:hover {
-      ${({ $selected = false, theme = astheme_1.default }) => $selected
-    ? `color: ${theme.navbar.navBarItemColorSelected};`
-    : `cursor: pointer;
-        transition: color 0.3s ease-in-out;
-        color: ${theme.navbar.navBarItemColorHover};
-        & > div > div > svg > path {
-          stroke-width: 0.4;
-          stroke: ${theme.navbar.navBarItemColorHover};
-        }
-      `}
-    }
-  }
+  // @media screen and (max-width: 1920px) {
+  // max-width: 1440px;
+  // width: 100%;
+  // }
+
+  ${ScrollBarConfig}
 `;
-exports.ASNavBarItemPadding = styled_components_1.default.div `
+exports.ASNavBarLeadingIconPadding = styled_components_1.default.div `
   padding: 0 4px;
   pointer-events: none;
   user-select: none;
   ${({ $selected = false, theme = astheme_1.default }) => $selected
     ? `
-      & > div > svg > path {
-        stroke-width: 0.4;
-        stroke: ${theme.navbar.navBarItemColorSelected};
-      }`
+    & > div > svg > path {
+      stroke-width: 0.4;
+      stroke: ${theme.navbar.navBarItemColorSelected};
+    }`
     : `
-      & > div > svg > path {
-        stroke-width: 0.4;
-        stroke: ${theme.navbar.navBarItemColor};
-      }
-  `};
+    & > div > svg > path {
+      stroke-width: 0.4;
+      stroke: ${theme.navbar.navBarItemColor};
+    }`};
 `;

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", size: 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, size: 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", size: 20 }), showType === 'text' && (0, jsx_runtime_1.jsx)(styles_1.ScaledSlashedEyeIcon, { color: "#333333", fillColor: "#333333", size: 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", 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 })] }))] }));
 };
 exports.default = ASTextField;

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;AAwEjD,QAAA,MAAM,cAAc,EAAE,OAyFrB,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;AAyEjD,QAAA,MAAM,cAAc,EAAE,OA8FrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/astheme/ASThemeDefault.js

@@ -40,6 +40,7 @@ const colors = {
     mainGray55: '#555555',
     mainGray58: '#585858',
     mainGray66: '#666666',
+    mainGray69: '#696969',
     mainGray6d: '#6d6d6d',
     mainGray72: '#727272',
     mainGray81: '#818181',
@@ -90,6 +91,7 @@ const ASThemeDefault = {
         buttonColorHover: colors.mainGray41,
         buttonColorSelected: colors.mainGray33,
         buttonColorDisabled: colors.mainGray99,
+        buttonIconColor: colors.mainGray69,
     },
     loader: {
         loaderBackdropFilter: `blur(2px) contrast(0.5) brightness(0.5) opacity(0.75)`,
@@ -154,5 +156,9 @@ const ASThemeDefault = {
         navBarItemColorSelected: colors.mainGray33,
     },
     borderRadius: '35px',
+    fontFamily: "'Big Shoulders Display', 'BigShouldersDisplay'",
+    fontFamilyFallback: 'Arial, sans-serif',
+    fontSize: '1rem',
+    fontWeight: '400',
 };
 exports.default = ASThemeDefault;

package/dist/asutils/screenSizeHelpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getScreenSize: () => "sml" | "med" | "lrg" | "xl" | "xxl" | undefined;
+//# sourceMappingURL=screenSizeHelpers.d.ts.map

package/dist/asutils/screenSizeHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenSizeHelpers.d.ts","sourceRoot":"","sources":["../../src/asutils/screenSizeHelpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,wDAQzB,CAAC"}

package/dist/asutils/screenSizeHelpers.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScreenSize = void 0;
+const apptypes_1 = require("../apptypes");
+const getScreenSize = () => {
+    const windowWidth = window.innerWidth;
+    if (windowWidth < 475)
+        return apptypes_1.ScreenSize.Small;
+    if (windowWidth < 768)
+        return apptypes_1.ScreenSize.Medium;
+    if (windowWidth < 1024)
+        return apptypes_1.ScreenSize.Large;
+    if (windowWidth < 1440)
+        return apptypes_1.ScreenSize.ExtraLarge;
+    if (windowWidth < 1920)
+        return apptypes_1.ScreenSize.ExtraExtraLarge;
+};
+exports.getScreenSize = getScreenSize;

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

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

package/dist/icons/ASIcon.js

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

package/dist/icons/AddItemIcon.js

@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ASIcon_1 = tslib_1.__importDefault(require("./ASIcon"));
 const styles_1 = require("./styles");
-const AddItemSvg = ({ size = 24, color = '#000000', strokeWidth = 0.1, fillColor = '#000000', fillOpacity = 1, withCircle = false, ...props }) => ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.8 18.7V16.5H7.7V14.3h2.2V12.1h2.2v2.2h2.2v2.2H12.1v2.2H9.8ZM5.5 1.1c-1.8 0-3.3 1.5-3.3 3.3V19.8c0 1.8 1.5 3.3 3.3 3.3h13.2c1.8 0 3.3-1.5 3.3-3.3V8.8c0-4.3-3.4-7.7-7.7-7.7H5.5Zm0 2.2h7.7V8.8h6.6v11c0 .6-.5 1.1-1.1 1.1H5.5c-.6 0-1.1-.5-1.1-1.1V4.4c0-.6.5-1.1 1.1-1.1Zm9.9.1c1.8.4 3.2 1.6 3.9 3.2H15.4V3.4Z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity }) }));
+const AddItemSvg = ({ iconSize: size = 24, color = '#000000', strokeWidth = 0.1, fillColor = '#000000', fillOpacity = 1, withCircle = false, ...props }) => ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.8 18.7V16.5H7.7V14.3h2.2V12.1h2.2v2.2h2.2v2.2H12.1v2.2H9.8ZM5.5 1.1c-1.8 0-3.3 1.5-3.3 3.3V19.8c0 1.8 1.5 3.3 3.3 3.3h13.2c1.8 0 3.3-1.5 3.3-3.3V8.8c0-4.3-3.4-7.7-7.7-7.7H5.5Zm0 2.2h7.7V8.8h6.6v11c0 .6-.5 1.1-1.1 1.1H5.5c-.6 0-1.1-.5-1.1-1.1V4.4c0-.6.5-1.1 1.1-1.1Zm9.9.1c1.8.4 3.2 1.6 3.9 3.2H15.4V3.4Z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity }) }));
 const AddItemIcon = ({ ...props }) => {
     return ((0, jsx_runtime_1.jsx)(ASIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)(AddItemSvg, {}) }));
 };

package/dist/icons/AddUserIcon.js

@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ASIcon_1 = tslib_1.__importDefault(require("./ASIcon"));
 const styles_1 = require("./styles");
-const AddUseSvg = ({ size = 24, color = '#000000', strokeWidth = 0.1, fillColor = '#000000', fillOpacity = 1, withCircle = false, ...props }) => ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M7.8 10.9c2.4 0 4.3-1.9 4.3-4.3s-1.9-4.3-4.3-4.3-4.3 1.9-4.3 4.3 1.9 4.3 4.3 4.3Zm0-2.2c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2-2.2 1-2.2 2.2 1 2.2 2.2 2.2Zm3.2 5.4c.6 0 1.1.5 1.1 1.1v6.5h2.2v-6.5c0-1.8-1.5-3.2-3.2-3.2H4.6c-1.8 0-3.2 1.4-3.2 3.2v6.5H3.5v-6.5c0-.6.5-1.1 1.1-1.1h6.5Zm7.6-7.5h2.2v2.2H23V11H20.8v2.2H18.6V11H16.5V8.7h2.2V6.6Z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity, fillRule: "evenodd" }) }));
+const AddUseSvg = ({ iconSize: size = 24, color = '#000000', strokeWidth = 0.1, fillColor = '#000000', fillOpacity = 1, withCircle = false, ...props }) => ((0, jsx_runtime_1.jsx)(styles_1.TopIcon, { "$withCircle": withCircle, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M7.8 10.9c2.4 0 4.3-1.9 4.3-4.3s-1.9-4.3-4.3-4.3-4.3 1.9-4.3 4.3 1.9 4.3 4.3 4.3Zm0-2.2c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2-2.2 1-2.2 2.2 1 2.2 2.2 2.2Zm3.2 5.4c.6 0 1.1.5 1.1 1.1v6.5h2.2v-6.5c0-1.8-1.5-3.2-3.2-3.2H4.6c-1.8 0-3.2 1.4-3.2 3.2v6.5H3.5v-6.5c0-.6.5-1.1 1.1-1.1h6.5Zm7.6-7.5h2.2v2.2H23V11H20.8v2.2H18.6V11H16.5V8.7h2.2V6.6Z", stroke: color, strokeWidth: strokeWidth, fill: fillColor, fillOpacity: fillOpacity, fillRule: "evenodd" }) }));
 const AddUserIcon = ({ ...props }) => {
     return ((0, jsx_runtime_1.jsx)(ASIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)(AddUseSvg, {}) }));
 };