@xfers/design-system 8.0.0 → 8.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/cjs/index.js +493 -207
  2. package/cjs/index.js.map +1 -1
  3. package/dist/components/Sidebar/CompanyProfile.js +123 -0
  4. package/dist/components/Sidebar/CompanyProfile.js.map +1 -0
  5. package/dist/components/Sidebar/CompanyProfileDropdown.js +29 -0
  6. package/dist/components/Sidebar/CompanyProfileDropdown.js.map +1 -0
  7. package/dist/components/Sidebar/CopyrightNotice.js +14 -0
  8. package/dist/components/Sidebar/CopyrightNotice.js.map +1 -0
  9. package/dist/components/Sidebar/Sidebar.js +154 -0
  10. package/dist/components/Sidebar/Sidebar.js.map +1 -0
  11. package/dist/components/Sidebar/SidebarNavItem.js +39 -0
  12. package/dist/components/Sidebar/SidebarNavItem.js.map +1 -0
  13. package/dist/components/Sidebar/SidebarSubItem.js +11 -0
  14. package/dist/components/Sidebar/SidebarSubItem.js.map +1 -0
  15. package/dist/components/Sidebar/dropdownStyles.js +125 -0
  16. package/dist/components/Sidebar/dropdownStyles.js.map +1 -0
  17. package/dist/components/Sidebar/index.js +56 -0
  18. package/dist/components/Sidebar/index.js.map +1 -0
  19. package/dist/components/Sidebar/styles.js +214 -0
  20. package/dist/components/Sidebar/styles.js.map +1 -0
  21. package/dist/constants/Colors/colors.js +2 -0
  22. package/dist/constants/Colors/colors.js.map +1 -1
  23. package/dist/index.js +12 -1
  24. package/dist/index.js.map +1 -1
  25. package/dist/types/components/Sidebar/CompanyProfile.d.ts +16 -0
  26. package/dist/types/components/Sidebar/CompanyProfileDropdown.d.ts +32 -0
  27. package/dist/types/components/Sidebar/CopyrightNotice.d.ts +6 -0
  28. package/dist/types/components/Sidebar/Sidebar.d.ts +40 -0
  29. package/dist/types/components/Sidebar/SidebarNavItem.d.ts +30 -0
  30. package/dist/types/components/Sidebar/SidebarSubItem.d.ts +10 -0
  31. package/dist/types/components/Sidebar/dropdownStyles.d.ts +12 -0
  32. package/dist/types/components/Sidebar/index.d.ts +11 -0
  33. package/dist/types/components/Sidebar/styles.d.ts +33 -0
  34. package/dist/types/constants/Colors/colors.d.ts +3 -1
  35. package/dist/types/index.d.ts +2 -0
  36. package/es/index.js +598 -312
  37. package/es/index.js.map +1 -1
  38. package/package.json +1 -2
package/dist/components/Sidebar/CompanyProfile.js ADDED
@@ -0,0 +1,123 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ var __importDefault = (this && this.__importDefault) || function (mod) {
36
+ return (mod && mod.__esModule) ? mod : { "default": mod };
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ const react_1 = __importStar(require("react"));
40
+ const react_dom_1 = require("react-dom");
41
+ const styles_1 = require("./styles");
42
+ const dropdownStyles_1 = require("./dropdownStyles");
43
+ const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
44
+ const colors_1 = require("../../constants/Colors/colors");
45
+ const CompanyProfileDropdown_1 = __importDefault(require("./CompanyProfileDropdown"));
46
+ const CompanyProfile = ({ companyName = 'ABC Pte. Ltd', subtitle = 'Company', enableDropdown = true, switchOnly = false, companies, menuItems, onMenuItemClick, onClick, }) => {
47
+ const [isOpen, setIsOpen] = (0, react_1.useState)(false);
48
+ const [flyoutPos, setFlyoutPos] = (0, react_1.useState)(null);
49
+ const containerRef = (0, react_1.useRef)(null);
50
+ const triggerRef = (0, react_1.useRef)(null);
51
+ const flyoutRef = (0, react_1.useRef)(null);
52
+ const resolvedCompanies = companies !== null && companies !== void 0 ? companies : [
53
+ { name: companyName, subtitle: 'Business Account', active: true },
54
+ ];
55
+ // Position the flyout to the right of the sidebar. The dropdown is portaled
56
+ // to <body> so it escapes the sidebar's overflow clipping; we track the
57
+ // trigger's on-screen position to anchor it.
58
+ (0, react_1.useLayoutEffect)(() => {
59
+ if (!isOpen)
60
+ return undefined;
61
+ const el = triggerRef.current;
62
+ if (!el)
63
+ return undefined;
64
+ const measure = () => {
65
+ const rect = el.getBoundingClientRect();
66
+ const sidebar = el.closest('[data-sidebar-root]');
67
+ const rightEdge = sidebar
68
+ ? sidebar.getBoundingClientRect().right
69
+ : rect.right;
70
+ setFlyoutPos({ top: rect.top, left: rightEdge + 8 });
71
+ };
72
+ measure();
73
+ window.addEventListener('resize', measure);
74
+ window.addEventListener('scroll', measure, true);
75
+ return () => {
76
+ window.removeEventListener('resize', measure);
77
+ window.removeEventListener('scroll', measure, true);
78
+ };
79
+ }, [isOpen]);
80
+ // Dismiss on outside click or Escape. The flyout is portaled, so an outside
81
+ // click is one landing on neither the trigger nor the portaled flyout.
82
+ (0, react_1.useEffect)(() => {
83
+ if (!isOpen)
84
+ return undefined;
85
+ const handlePointerDown = (event) => {
86
+ var _a, _b;
87
+ const target = event.target;
88
+ if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
89
+ return;
90
+ if ((_b = flyoutRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
91
+ return;
92
+ setIsOpen(false);
93
+ };
94
+ const handleKeyDown = (event) => {
95
+ if (event.key === 'Escape')
96
+ setIsOpen(false);
97
+ };
98
+ document.addEventListener('mousedown', handlePointerDown);
99
+ document.addEventListener('keydown', handleKeyDown);
100
+ return () => {
101
+ document.removeEventListener('mousedown', handlePointerDown);
102
+ document.removeEventListener('keydown', handleKeyDown);
103
+ };
104
+ }, [isOpen]);
105
+ const handleClick = () => {
106
+ if (enableDropdown)
107
+ setIsOpen((prev) => !prev);
108
+ onClick === null || onClick === void 0 ? void 0 : onClick();
109
+ };
110
+ return (react_1.default.createElement(styles_1.CompanyProfileContainer, { ref: containerRef },
111
+ react_1.default.createElement(styles_1.CompanyProfileWrapper, { ref: triggerRef, onClick: handleClick },
112
+ react_1.default.createElement(styles_1.CompanyProfileContent, null,
113
+ react_1.default.createElement(styles_1.CompanyName, null, companyName),
114
+ react_1.default.createElement(styles_1.CompanySubtitle, null, subtitle)),
115
+ enableDropdown && (react_1.default.createElement(MaterialSymbols_1.default, { icon: "keyboard_arrow_down", size: "m", color: colors_1.BASE.ON_NEUTRAL_SECONDARY, style: isOpen ? { transform: 'rotate(180deg)' } : undefined }))),
116
+ enableDropdown &&
117
+ isOpen &&
118
+ flyoutPos &&
119
+ (0, react_dom_1.createPortal)(react_1.default.createElement(dropdownStyles_1.DropdownFlyout, { ref: flyoutRef, style: { top: flyoutPos.top, left: flyoutPos.left } },
120
+ react_1.default.createElement(CompanyProfileDropdown_1.default, { showMenuItems: !switchOnly, companies: resolvedCompanies, menuItems: menuItems, onMenuItemClick: onMenuItemClick })), document.body)));
121
+ };
122
+ exports.default = CompanyProfile;
123
+ //# sourceMappingURL=CompanyProfile.js.map
package/dist/components/Sidebar/CompanyProfile.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CompanyProfile.js","sourceRoot":"","sources":["../../../src/components/Sidebar/CompanyProfile.tsx"],"names":[],"mappings":"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"}
package/dist/components/Sidebar/CompanyProfileDropdown.js ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const dropdownStyles_1 = require("./dropdownStyles");
8
+ const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
9
+ const colors_1 = require("../../constants/Colors/colors");
10
+ const CompanyProfileDropdown = ({ showMenuItems = true, switchCompany = true, companies = [], menuItems = [], onMenuItemClick, }) => (react_1.default.createElement(dropdownStyles_1.DropdownPanel, null,
11
+ switchCompany && companies.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
12
+ react_1.default.createElement(dropdownStyles_1.DropdownSectionLabel, null, "SWITCH COMPANY"),
13
+ companies.map((company) => (react_1.default.createElement(dropdownStyles_1.DropdownRow, { key: company.name, active: company.active, onClick: company.onClick },
14
+ react_1.default.createElement(dropdownStyles_1.DropdownRowContent, null,
15
+ react_1.default.createElement(dropdownStyles_1.DropdownPrimaryText, null, company.name),
16
+ company.subtitle && (react_1.default.createElement(dropdownStyles_1.DropdownSecondaryText, null, company.subtitle))),
17
+ company.active && (react_1.default.createElement(MaterialSymbols_1.default, { icon: "check", size: "m", color: colors_1.STATUS.POSITIVE }))))),
18
+ showMenuItems && menuItems.length > 0 && react_1.default.createElement(dropdownStyles_1.DropdownDivider, null))),
19
+ showMenuItems &&
20
+ menuItems.map((item) => (react_1.default.createElement(dropdownStyles_1.DropdownMenuRow, { key: item.label, onClick: () => {
21
+ var _a;
22
+ (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
23
+ onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(item.label);
24
+ } },
25
+ react_1.default.createElement(MaterialSymbols_1.default, { icon: item.icon, size: "m", color: colors_1.BASE.ON_NEUTRAL_SECONDARY }),
26
+ react_1.default.createElement(dropdownStyles_1.DropdownRowContent, null,
27
+ react_1.default.createElement(dropdownStyles_1.DropdownMenuLabel, null, item.label)))))));
28
+ exports.default = CompanyProfileDropdown;
29
+ //# sourceMappingURL=CompanyProfileDropdown.js.map
package/dist/components/Sidebar/CompanyProfileDropdown.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CompanyProfileDropdown.js","sourceRoot":"","sources":["../../../src/components/Sidebar/CompanyProfileDropdown.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,qDAUyB;AACzB,kGAAyE;AACzE,0DAA4D;AAiC5D,MAAM,sBAAsB,GAAG,CAAC,EAC9B,aAAa,GAAG,IAAI,EACpB,aAAa,GAAG,IAAI,EACpB,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,EAAE,EACd,eAAe,GACa,EAAE,EAAE,CAAC,CACjC,8BAAC,8BAAa;IACX,aAAa,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACxC;QACE,8BAAC,qCAAoB,yBAAsC;QAC1D,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC1B,8BAAC,4BAAW,IACV,GAAG,EAAE,OAAO,CAAC,IAAI,EACjB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,OAAO,EAAE,OAAO,CAAC,OAAO;YAExB,8BAAC,mCAAkB;gBACjB,8BAAC,oCAAmB,QAAE,OAAO,CAAC,IAAI,CAAuB;gBACxD,OAAO,CAAC,QAAQ,IAAI,CACnB,8BAAC,sCAAqB,QACnB,OAAO,CAAC,QAAQ,CACK,CACzB,CACkB;YACpB,OAAO,CAAC,MAAM,IAAI,CACjB,8BAAC,yBAAe,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAE,eAAM,CAAC,QAAQ,GAAI,CAClE,CACW,CACf,CAAC;QACD,aAAa,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,8BAAC,gCAAe,OAAG,CAC5D,CACJ;IACA,aAAa;QACZ,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtB,8BAAC,gCAAe,IACd,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,GAAG,EAAE;;gBACZ,MAAA,IAAI,CAAC,OAAO,oDAAI,CAAA;gBAChB,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,IAAI,CAAC,KAAK,CAAC,CAAA;YAC/B,CAAC;YAED,8BAAC,yBAAe,IACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,aAAI,CAAC,oBAAoB,GAChC;YACF,8BAAC,mCAAkB;gBACjB,8BAAC,kCAAiB,QAAE,IAAI,CAAC,KAAK,CAAqB,CAChC,CACL,CACnB,CAAC,CACU,CACjB,CAAA;AAED,kBAAe,sBAAsB,CAAA"}
package/dist/components/Sidebar/CopyrightNotice.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const styles_1 = require("./styles");
8
+ const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
9
+ const colors_1 = require("../../constants/Colors/colors");
10
+ const CopyrightNotice = ({ text = 'Licensed & Regulated \nby Monetary Authority of Singapore', }) => (react_1.default.createElement(styles_1.CopyrightNoticeWrapper, null,
11
+ react_1.default.createElement(MaterialSymbols_1.default, { icon: "verified_user", size: "m", fill: 0, color: colors_1.STATUS.POSITIVE }),
12
+ react_1.default.createElement(styles_1.CopyrightNoticeText, null, text)));
13
+ exports.default = CopyrightNotice;
14
+ //# sourceMappingURL=CopyrightNotice.js.map
package/dist/components/Sidebar/CopyrightNotice.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CopyrightNotice.js","sourceRoot":"","sources":["../../../src/components/Sidebar/CopyrightNotice.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,qCAAsE;AACtE,kGAAyE;AACzE,0DAAsD;AAMtD,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,GAAG,2DAA2D,GAC7C,EAAE,EAAE,CAAC,CAC1B,8BAAC,+BAAsB;IACrB,8BAAC,yBAAe,IACd,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,GAAG,EACR,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,eAAM,CAAC,QAAQ,GACtB;IACF,8BAAC,4BAAmB,QAAE,IAAI,CAAuB,CAC1B,CAC1B,CAAA;AAED,kBAAe,eAAe,CAAA"}
package/dist/components/Sidebar/Sidebar.js ADDED
@@ -0,0 +1,154 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ var __importDefault = (this && this.__importDefault) || function (mod) {
36
+ return (mod && mod.__esModule) ? mod : { "default": mod };
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ exports.SidebarBase = exports.SidebarTrigger = exports.SidebarProvider = exports.useSidebar = void 0;
40
+ const react_1 = __importStar(require("react"));
41
+ const styled_1 = __importDefault(require("@emotion/styled"));
42
+ const styles_1 = require("./styles");
43
+ const colors_1 = require("../../constants/Colors/colors");
44
+ const SidebarContext = (0, react_1.createContext)(null);
45
+ const useSidebar = () => {
46
+ const ctx = (0, react_1.useContext)(SidebarContext);
47
+ if (!ctx)
48
+ throw new Error('useSidebar must be used inside a <SidebarProvider>');
49
+ return ctx;
50
+ };
51
+ exports.useSidebar = useSidebar;
52
+ const SidebarProvider = ({ open: controlledOpen, onOpenChange, defaultOpen = true, mobileBreakpoint = 1280, children, }) => {
53
+ const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
54
+ const [isMobile, setIsMobile] = (0, react_1.useState)(false);
55
+ const isControlled = controlledOpen !== undefined;
56
+ const open = isControlled ? controlledOpen : internalOpen;
57
+ const setOpen = (0, react_1.useCallback)((value) => {
58
+ if (!isControlled)
59
+ setInternalOpen(value);
60
+ onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
61
+ }, [isControlled, onOpenChange]);
62
+ const toggle = (0, react_1.useCallback)(() => setOpen(!open), [setOpen, open]);
63
+ // Responsive: detect mobile breakpoint
64
+ (0, react_1.useEffect)(() => {
65
+ const mq = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
66
+ const handler = (e) => {
67
+ setIsMobile(e.matches);
68
+ setOpen(!e.matches);
69
+ };
70
+ handler(mq);
71
+ mq.addEventListener('change', handler);
72
+ return () => mq.removeEventListener('change', handler);
73
+ }, [mobileBreakpoint, setOpen]);
74
+ return (react_1.default.createElement(SidebarContext.Provider, { value: { open, setOpen, toggle, isMobile } }, children));
75
+ };
76
+ exports.SidebarProvider = SidebarProvider;
77
+ const SidebarTrigger = ({ className = '', label = 'Toggle navigation', }) => {
78
+ const { toggle } = (0, exports.useSidebar)();
79
+ return (react_1.default.createElement(TriggerButton, { type: "button", className: className, onClick: toggle, "aria-label": label },
80
+ react_1.default.createElement("span", { className: "material-symbols-rounded", translate: "no" }, "menu")));
81
+ };
82
+ exports.SidebarTrigger = SidebarTrigger;
83
+ const TriggerButton = styled_1.default.button `
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ width: 40px;
88
+ height: 40px;
89
+ border: none;
90
+ border-radius: 8px;
91
+ background: transparent;
92
+ cursor: pointer;
93
+ color: ${colors_1.BASE.ON_NEUTRAL};
94
+
95
+ &:hover {
96
+ background: #ececec;
97
+ }
98
+
99
+ .material-symbols-rounded {
100
+ font-size: 24px;
101
+ }
102
+ `;
103
+ const SidebarBase = ({ variant = 'business', logo, companyProfile, children, footer, }) => {
104
+ var _a, _b;
105
+ const context = (0, react_1.useContext)(SidebarContext);
106
+ const open = (_a = context === null || context === void 0 ? void 0 : context.open) !== null && _a !== void 0 ? _a : true;
107
+ const isMobile = (_b = context === null || context === void 0 ? void 0 : context.isMobile) !== null && _b !== void 0 ? _b : false;
108
+ const sidebarContent = (react_1.default.createElement(styles_1.SidebarWrapper, { variant: variant, "data-sidebar-root": true },
109
+ react_1.default.createElement(styles_1.MenuHeader, null,
110
+ logo && react_1.default.createElement(styles_1.LogoWrapper, null, logo),
111
+ companyProfile,
112
+ react_1.default.createElement(styles_1.MenuContainer, null, children),
113
+ footer)));
114
+ // Mobile: render as drawer overlay
115
+ if (isMobile) {
116
+ if (!open)
117
+ return null;
118
+ return (react_1.default.createElement(Overlay, null,
119
+ react_1.default.createElement(Scrim, { onClick: () => context === null || context === void 0 ? void 0 : context.setOpen(false), "aria-label": "Close navigation" }),
120
+ react_1.default.createElement(DrawerContainer, null, sidebarContent)));
121
+ }
122
+ // Desktop: render inline (hidden when collapsed)
123
+ if (!open)
124
+ return null;
125
+ return sidebarContent;
126
+ };
127
+ exports.SidebarBase = SidebarBase;
128
+ // ─── Mobile drawer styles ───
129
+ const Overlay = styled_1.default.div `
130
+ position: fixed;
131
+ inset: 0;
132
+ z-index: 1000;
133
+ display: flex;
134
+ `;
135
+ const Scrim = styled_1.default.div `
136
+ position: absolute;
137
+ inset: 0;
138
+ background-color: ${colors_1.BASE.OVERLAY};
139
+ cursor: pointer;
140
+ `;
141
+ const DrawerContainer = styled_1.default.div `
142
+ position: relative;
143
+ z-index: 1;
144
+ height: 100%;
145
+ overflow-y: auto;
146
+ `;
147
+ // ─── Default export ───
148
+ const Sidebar = {
149
+ Base: exports.SidebarBase,
150
+ Provider: exports.SidebarProvider,
151
+ Trigger: exports.SidebarTrigger,
152
+ };
153
+ exports.default = Sidebar;
154
+ //# sourceMappingURL=Sidebar.js.map
package/dist/components/Sidebar/Sidebar.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"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"}
package/dist/components/Sidebar/SidebarNavItem.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const styles_1 = require("./styles");
8
+ const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
9
+ const Tag_1 = __importDefault(require("../Tag"));
10
+ const SidebarSubItem_1 = __importDefault(require("./SidebarSubItem"));
11
+ const SidebarNavItem = ({ id, icon, label, variant = 'business', active = false, onClick, subItems, isExpanded = false, tag, autoSelectFirstSubItem = false, }) => {
12
+ const color = (0, styles_1.itemTextColor)(variant, active);
13
+ const hasSubItems = Boolean(subItems && subItems.length > 0);
14
+ const handleClick = () => {
15
+ var _a, _b, _c;
16
+ // Fire the parent handler (consumer toggles expansion). If auto-select is
17
+ // on and this click is opening a collapsed group, also select the first
18
+ // sub-item so it's active without a second click.
19
+ if (autoSelectFirstSubItem &&
20
+ hasSubItems &&
21
+ !isExpanded &&
22
+ ((_a = subItems === null || subItems === void 0 ? void 0 : subItems[0]) === null || _a === void 0 ? void 0 : _a.onClick)) {
23
+ (_c = (_b = subItems[0]).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
24
+ }
25
+ onClick === null || onClick === void 0 ? void 0 : onClick();
26
+ };
27
+ return (react_1.default.createElement(react_1.default.Fragment, null,
28
+ react_1.default.createElement(styles_1.NavItemWrapper, { variant: variant, active: active, onClick: handleClick, "data-id": id },
29
+ react_1.default.createElement(MaterialSymbols_1.default, { icon: icon, size: "m", fill: active ? 1 : 0, color: color }),
30
+ react_1.default.createElement(styles_1.NavItemLabel, { variant: variant, active: active }, label),
31
+ tag && (react_1.default.createElement(Tag_1.default, { type: "positive", variant: "filled", size: "sm" }, tag)),
32
+ hasSubItems && (react_1.default.createElement(styles_1.NavItemAffordance, null,
33
+ react_1.default.createElement(MaterialSymbols_1.default, { icon: "keyboard_arrow_down", size: "m", color: color, style: isExpanded ? { transform: 'rotate(180deg)' } : undefined })))),
34
+ isExpanded &&
35
+ subItems &&
36
+ subItems.map((sub) => (react_1.default.createElement(SidebarSubItem_1.default, { key: sub.id, label: sub.label, variant: variant, active: sub.active, onClick: sub.onClick })))));
37
+ };
38
+ exports.default = SidebarNavItem;
39
+ //# sourceMappingURL=SidebarNavItem.js.map
package/dist/components/Sidebar/SidebarNavItem.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SidebarNavItem.js","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarNavItem.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,qCAKiB;AAEjB,kGAAyE;AACzE,iDAAwB;AACxB,sEAA6C;AA6B7C,MAAM,cAAc,GAAG,CAAC,EACtB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,OAAO,GAAG,UAAU,EACpB,MAAM,GAAG,KAAK,EACd,OAAO,EACP,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,GAAG,EACH,sBAAsB,GAAG,KAAK,GACV,EAAE,EAAE;IACxB,MAAM,KAAK,GAAG,IAAA,sBAAa,EAAC,OAAO,EAAE,MAAM,CAAC,CAAA;IAC5C,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAE5D,MAAM,WAAW,GAAG,GAAG,EAAE;;QACvB,0EAA0E;QAC1E,wEAAwE;QACxE,kDAAkD;QAClD,IACE,sBAAsB;YACtB,WAAW;YACX,CAAC,UAAU;aACX,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,0CAAE,OAAO,CAAA,EACtB,CAAC;YACD,MAAA,MAAA,QAAQ,CAAC,CAAC,CAAC,EAAC,OAAO,kDAAI,CAAA;QACzB,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;IACb,CAAC,CAAA;IAED,OAAO,CACL;QACE,8BAAC,uBAAc,IACb,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,aACX,EAAE;YAEX,8BAAC,yBAAe,IACd,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,GAAG,EACR,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACpB,KAAK,EAAE,KAAK,GACZ;YACF,8BAAC,qBAAY,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,IAC3C,KAAK,CACO;YACd,GAAG,IAAI,CACN,8BAAC,aAAG,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,IAC5C,GAAG,CACA,CACP;YACA,WAAW,IAAI,CACd,8BAAC,0BAAiB;gBAChB,8BAAC,yBAAe,IACd,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,GAC/D,CACgB,CACrB,CACc;QAChB,UAAU;YACT,QAAQ;YACR,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,8BAAC,wBAAc,IACb,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,OAAO,EAAE,GAAG,CAAC,OAAO,GACpB,CACH,CAAC,CACH,CACJ,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,cAAc,CAAA"}
package/dist/components/Sidebar/SidebarSubItem.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const styles_1 = require("./styles");
8
+ const SidebarSubItem = ({ label, variant = 'business', active = false, onClick, }) => (react_1.default.createElement(styles_1.SubItemWrapper, { variant: variant, active: active, onClick: onClick },
9
+ react_1.default.createElement(styles_1.SubItemLabel, { variant: variant, active: active }, label)));
10
+ exports.default = SidebarSubItem;
11
+ //# sourceMappingURL=SidebarSubItem.js.map
package/dist/components/Sidebar/SidebarSubItem.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SidebarSubItem.js","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarSubItem.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,qCAAuD;AAUvD,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,OAAO,GAAG,UAAU,EACpB,MAAM,GAAG,KAAK,EACd,OAAO,GACa,EAAE,EAAE,CAAC,CACzB,8BAAC,uBAAc,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO;IAChE,8BAAC,qBAAY,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,IAC3C,KAAK,CACO,CACA,CAClB,CAAA;AAED,kBAAe,cAAc,CAAA"}
package/dist/components/Sidebar/dropdownStyles.js ADDED
@@ -0,0 +1,125 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.DropdownDivider = exports.DropdownMenuLabel = exports.DropdownSecondaryText = exports.DropdownPrimaryText = exports.DropdownRowContent = exports.DropdownMenuRow = exports.DropdownRow = exports.DropdownSectionLabel = exports.DropdownPanel = exports.DropdownFlyout = void 0;
7
+ const styled_1 = __importDefault(require("@emotion/styled"));
8
+ const fontStyles_1 = require("../../constants/fontStyles");
9
+ const colors_1 = require("../../constants/Colors/colors");
10
+ // ─── Company profile dropdown ───
11
+ /*
12
+ * Flyout wrapper: fixed-positioned so it escapes the sidebar's overflow
13
+ * clipping and opens to the right of the panel. CompanyProfile sets top/left
14
+ * inline from the trigger's measured position.
15
+ */
16
+ exports.DropdownFlyout = styled_1.default.div `
17
+ position: fixed;
18
+ z-index: 1000;
19
+ `;
20
+ exports.DropdownPanel = styled_1.default.div `
21
+ width: 208px;
22
+ box-sizing: border-box;
23
+ padding: 8px 0;
24
+ border-radius: 12px;
25
+ overflow: hidden;
26
+ display: flex;
27
+ flex-direction: column;
28
+ align-items: flex-start;
29
+ background-color: ${colors_1.SURFACE.NEUTRAL};
30
+ box-shadow:
31
+ 0px 12px 16px -4px rgba(10, 13, 18, 0.08),
32
+ 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
33
+ `;
34
+ exports.DropdownSectionLabel = styled_1.default.div `
35
+ display: flex;
36
+ align-items: center;
37
+ padding: 8px 12px;
38
+ width: 100%;
39
+ box-sizing: border-box;
40
+ font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
41
+ font-weight: 400;
42
+ font-size: 12px;
43
+ line-height: normal;
44
+ color: ${colors_1.BASE.ON_NEUTRAL_SECONDARY};
45
+ white-space: nowrap;
46
+ `;
47
+ exports.DropdownRow = styled_1.default.div `
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 8px;
51
+ padding: 8px 12px;
52
+ width: 100%;
53
+ box-sizing: border-box;
54
+ cursor: pointer;
55
+ background-color: ${(props) => props.active ? colors_1.COMPONENT.SIDEBAR_ACTIVE : 'transparent'};
56
+
57
+ &:hover {
58
+ background-color: ${(props) => props.active ? colors_1.COMPONENT.SIDEBAR_ACTIVE : colors_1.INTERACTIVE.HOVER_SURFACE};
59
+ }
60
+ `;
61
+ exports.DropdownMenuRow = styled_1.default.div `
62
+ display: flex;
63
+ align-items: center;
64
+ gap: 8px;
65
+ padding: 12px;
66
+ width: 100%;
67
+ box-sizing: border-box;
68
+ cursor: pointer;
69
+
70
+ &:hover {
71
+ background-color: ${colors_1.INTERACTIVE.HOVER_SURFACE};
72
+ }
73
+ `;
74
+ exports.DropdownRowContent = styled_1.default.div `
75
+ display: flex;
76
+ flex-direction: column;
77
+ align-items: flex-start;
78
+ justify-content: center;
79
+ gap: 4px;
80
+ flex: 1 0 0;
81
+ min-width: 0;
82
+ `;
83
+ exports.DropdownPrimaryText = styled_1.default.span `
84
+ width: 100%;
85
+ font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
86
+ font-weight: 400;
87
+ font-size: 16px;
88
+ line-height: normal;
89
+ color: ${colors_1.BASE.ON_NEUTRAL};
90
+ overflow-wrap: break-word;
91
+ `;
92
+ exports.DropdownSecondaryText = styled_1.default.span `
93
+ width: 100%;
94
+ font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
95
+ font-weight: 400;
96
+ font-size: 14px;
97
+ line-height: normal;
98
+ color: ${colors_1.BASE.ON_NEUTRAL_SECONDARY};
99
+ overflow-wrap: break-word;
100
+ `;
101
+ exports.DropdownMenuLabel = styled_1.default.span `
102
+ width: 100%;
103
+ font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
104
+ font-weight: 400;
105
+ font-size: 16px;
106
+ line-height: normal;
107
+ color: ${colors_1.BASE.ON_NEUTRAL_SECONDARY};
108
+ overflow-wrap: break-word;
109
+ `;
110
+ exports.DropdownDivider = styled_1.default.div `
111
+ width: 100%;
112
+ height: 14px;
113
+ flex-shrink: 0;
114
+ display: flex;
115
+ align-items: center;
116
+
117
+ &::after {
118
+ content: '';
119
+ display: block;
120
+ width: calc(100% - 24px);
121
+ margin: 0 12px;
122
+ border-top: 1px solid ${colors_1.BASE.LINE};
123
+ }
124
+ `;
125
+ //# sourceMappingURL=dropdownStyles.js.map
package/dist/components/Sidebar/dropdownStyles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dropdownStyles.js","sourceRoot":"","sources":["../../../src/components/Sidebar/dropdownStyles.ts"],"names":[],"mappings":";;;;;;AAAA,6DAAoC;AACpC,2DAAqE;AACrE,0DAKsC;AAEtC,mCAAmC;AAEnC;;;;GAIG;AACU,QAAA,cAAc,GAAG,gBAAM,CAAC,GAAG,CAAA;;;CAGvC,CAAA;AAEY,QAAA,aAAa,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;sBASjB,gBAAO,CAAC,OAAO;;;;CAIpC,CAAA;AAEY,QAAA,oBAAoB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;iBAM7B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,oBAAoB;;CAEnC,CAAA;AAEY,QAAA,WAAW,GAAG,gBAAM,CAAC,GAAG,CAAsB;;;;;;;;sBAQrC,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAS,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa;;;wBAGnC,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAS,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAW,CAAC,aAAa;;CAExE,CAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;;wBAUjB,oBAAW,CAAC,aAAa;;CAEhD,CAAA;AAEY,QAAA,kBAAkB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ3C,CAAA;AAEY,QAAA,mBAAmB,GAAG,gBAAM,CAAC,IAAI,CAAA;;iBAE7B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,UAAU;;CAEzB,CAAA;AAEY,QAAA,qBAAqB,GAAG,gBAAM,CAAC,IAAI,CAAA;;iBAE/B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,oBAAoB;;CAEnC,CAAA;AAEY,QAAA,iBAAiB,GAAG,gBAAM,CAAC,IAAI,CAAA;;iBAE3B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,oBAAoB;;CAEnC,CAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;4BAYb,aAAI,CAAC,IAAI;;CAEpC,CAAA"}
package/dist/components/Sidebar/index.js ADDED
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ var __importDefault = (this && this.__importDefault) || function (mod) {
36
+ return (mod && mod.__esModule) ? mod : { "default": mod };
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ exports.CopyrightNotice = exports.CompanyProfileDropdown = exports.CompanyProfile = exports.SidebarSubItem = exports.SidebarNavItem = exports.useSidebar = exports.SidebarTrigger = exports.SidebarProvider = exports.SidebarBase = void 0;
40
+ const Sidebar_1 = __importStar(require("./Sidebar"));
41
+ Object.defineProperty(exports, "SidebarBase", { enumerable: true, get: function () { return Sidebar_1.SidebarBase; } });
42
+ Object.defineProperty(exports, "SidebarProvider", { enumerable: true, get: function () { return Sidebar_1.SidebarProvider; } });
43
+ Object.defineProperty(exports, "SidebarTrigger", { enumerable: true, get: function () { return Sidebar_1.SidebarTrigger; } });
44
+ Object.defineProperty(exports, "useSidebar", { enumerable: true, get: function () { return Sidebar_1.useSidebar; } });
45
+ const SidebarNavItem_1 = __importDefault(require("./SidebarNavItem"));
46
+ exports.SidebarNavItem = SidebarNavItem_1.default;
47
+ const SidebarSubItem_1 = __importDefault(require("./SidebarSubItem"));
48
+ exports.SidebarSubItem = SidebarSubItem_1.default;
49
+ const CompanyProfile_1 = __importDefault(require("./CompanyProfile"));
50
+ exports.CompanyProfile = CompanyProfile_1.default;
51
+ const CompanyProfileDropdown_1 = __importDefault(require("./CompanyProfileDropdown"));
52
+ exports.CompanyProfileDropdown = CompanyProfileDropdown_1.default;
53
+ const CopyrightNotice_1 = __importDefault(require("./CopyrightNotice"));
54
+ exports.CopyrightNotice = CopyrightNotice_1.default;
55
+ exports.default = Sidebar_1.default;
56
+ //# sourceMappingURL=index.js.map
package/dist/components/Sidebar/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAKkB;AAQhB,4FAZA,qBAAW,OAYA;AACX,gGAZA,yBAAe,OAYA;AACf,+FAZA,wBAAc,OAYA;AACd,2FAZA,oBAAU,OAYA;AAVZ,sEAA6C;AAW3C,yBAXK,wBAAc,CAWL;AAVhB,sEAA6C;AAW3C,yBAXK,wBAAc,CAWL;AAVhB,sEAA6C;AAW3C,yBAXK,wBAAc,CAWL;AAVhB,sFAA6D;AAW3D,iCAXK,gCAAsB,CAWL;AAVxB,wEAA+C;AAW7C,0BAXK,yBAAe,CAWL;AAMjB,kBAAe,iBAAO,CAAA"}