@xfers/design-system 8.0.0 → 8.1.0-dev.facf6bb234

package/dist/components/Select/style.js

@@ -29,9 +29,6 @@ exports.SelectContainer = styled_1.default.div `
   width: 100%;
 `;
 const selectSelectorStyles = (props) => {
-    // For multiple select, calculate padding to fit tags within min-height
-    // Small: 36px min-height - 24px tag = 12px total padding (6px top + 6px bottom)
-    // Large: 48px min-height - 32px tag = 16px total padding (8px top + 8px bottom)
     const getVerticalPadding = () => {
         if (props.$mode === 'multiple') {
             return props.$size === 'sm' ? '6px' : '8px';
@@ -40,29 +37,40 @@ const selectSelectorStyles = (props) => {
     };
     const verticalPadding = getVerticalPadding();
     return `
-  .ant-select-selector {
-    border-radius:  ${props.$size === 'sm' ? '8px' : '12px'}  !important;
+  &.ant-select {
+    outline: none !important;
+    border-radius: ${props.$size === 'sm' ? '8px' : '12px'} !important;
     position: relative !important;
     display: flex;
     align-items: ${props.$mode === 'multiple' ? 'flex-start' : 'center'} !important;
-    padding: ${verticalPadding} 16px !important;
+    padding-inline: 16px !important;
+    padding-block: ${verticalPadding} !important;
 
     min-height: ${props.$size === 'sm' ? '36px' : '48px'} !important;
     ${props.$mode !== 'multiple' ? `height: ${props.$size === 'sm' ? '36px' : '48px'} !important;` : 'height: auto !important;'}
 
-    background: ${props.disabled
+    &:not(.ant-select-borderless) {
+      background: ${props.disabled
         ? theme_1.straitsXTheme.color.surface.disabledSurface
         : theme_1.straitsXTheme.color.surface.neutral} !important;
 
-    border: 1px solid ${props.error
+      border: 1px solid ${props.error
         ? theme_1.straitsXTheme.color.status.critical
         : theme_1.straitsXTheme.color.base.line} !important;
+    }
+  }
+
+  &.ant-select-multiple:not(.ant-select-borderless) .ant-select-content {
+    &:before {
+      display: none !important;
+    }
+    gap: 8px !important;
   }
 `;
 };
 const selectHoverFocusStyles = (props) => `
-  &:hover .ant-select-selector,
-  &.ant-select-focused .ant-select-selector {
+  &:not(.ant-select-borderless):hover,
+  &.ant-select-focused:not(.ant-select-borderless) {
     ${!props.disabled &&
     `
       box-shadow: 0 0 0 1px ${theme_1.straitsXTheme.color.base.onNeutral}20 !important;
@@ -73,18 +81,18 @@ const selectHoverFocusStyles = (props) => `
   }
 `;
 const selectPlaceholderStyles = `
-  .ant-select-selection-placeholder {
+  .ant-select-placeholder {
     display: flex;
     align-items: center;
-    
+
     span {
       color: ${theme_1.straitsXTheme.color.component.placeholderInput} !important;
     }
   }
 `;
 const selectOverflowStyles = (props) => `
-  .ant-select-selection-overflow {
-    gap: 8px;
+  .ant-select-content {
+    gap: 8px !important;
     ${props.$mode === 'multiple' ? 'flex-wrap: wrap !important;' : ''}
     ${props.$mode === 'multiple' ? 'align-content: center !important;' : ''}
   }
@@ -96,18 +104,18 @@ const selectSelectedItemStyles = `
     color: ${theme_1.straitsXTheme.color.base.onNeutral} !important;
   }
 
-  &.ant-select-open .ant-select-selection-item {
+  &.ant-select-open .ant-select-content {
     color: ${theme_1.straitsXTheme.color.base.onNeutral} !important;
   }
 `;
 const selectArrowStyles = `
-  .ant-select-arrow {
+  .ant-select-suffix {
     display: flex !important;
     align-items: center !important;
     gap: 8px !important;
     width: auto !important;
     align-self: center !important;
-    
+
     span {
       color: ${theme_1.straitsXTheme.color.base.onNeutral} !important;
     }
@@ -144,11 +152,11 @@ const dropdownSelectedOptionStyles = `
   .ant-select-item-option-selected {
     background: #d7efe2 !important;
     position: relative !important;
-  
+
     .anticon {
       display: none !important;
     }
-    
+
     &::after {
       content: 'check' !important;
       font-family: 'Material Symbols Rounded' !important;
@@ -165,7 +173,7 @@ const dropdownInteractiveStyles = `
   .ant-select-item:hover {
     background: ${theme_1.straitsXTheme.color.interactive.hoverSurface} !important;
   }
-  
+
   .ant-select-item:active {
     background: ${theme_1.straitsXTheme.color.interactive.pressedSurface} !important;
   }
@@ -174,7 +182,7 @@ const dropdownDisabledOptionStyles = `
   .ant-select-item-option-disabled,
   .ant-select-item-option-disabled:hover {
     background: ${theme_1.straitsXTheme.color.surface.disabledSurface} !important;
-    span { 
+    span {
     color: ${theme_1.straitsXTheme.color.surface.disabledOnSurface} !important;
     }
   }

package/dist/components/Select/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Select/style.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Select/style.ts"],"names":[],"mappings":"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"}

package/dist/components/Sidebar/CompanyProfile.js

@@ -0,0 +1,123 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const styles_1 = require("./styles");
+const dropdownStyles_1 = require("./dropdownStyles");
+const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
+const colors_1 = require("../../constants/Colors/colors");
+const CompanyProfileDropdown_1 = __importDefault(require("./CompanyProfileDropdown"));
+const CompanyProfile = ({ companyName = 'ABC Pte. Ltd', subtitle = 'Company', enableDropdown = true, switchOnly = false, companies, menuItems, onMenuItemClick, onClick, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [flyoutPos, setFlyoutPos] = (0, react_1.useState)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const flyoutRef = (0, react_1.useRef)(null);
+    const resolvedCompanies = companies !== null && companies !== void 0 ? companies : [
+        { name: companyName, subtitle: 'Business Account', active: true },
+    ];
+    // Position the flyout to the right of the sidebar. The dropdown is portaled
+    // to <body> so it escapes the sidebar's overflow clipping; we track the
+    // trigger's on-screen position to anchor it.
+    (0, react_1.useLayoutEffect)(() => {
+        if (!isOpen)
+            return undefined;
+        const el = triggerRef.current;
+        if (!el)
+            return undefined;
+        const measure = () => {
+            const rect = el.getBoundingClientRect();
+            const sidebar = el.closest('[data-sidebar-root]');
+            const rightEdge = sidebar
+                ? sidebar.getBoundingClientRect().right
+                : rect.right;
+            setFlyoutPos({ top: rect.top, left: rightEdge + 8 });
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        window.addEventListener('scroll', measure, true);
+        return () => {
+            window.removeEventListener('resize', measure);
+            window.removeEventListener('scroll', measure, true);
+        };
+    }, [isOpen]);
+    // Dismiss on outside click or Escape. The flyout is portaled, so an outside
+    // click is one landing on neither the trigger nor the portaled flyout.
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return undefined;
+        const handlePointerDown = (event) => {
+            var _a, _b;
+            const target = event.target;
+            if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
+                return;
+            if ((_b = flyoutRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
+                return;
+            setIsOpen(false);
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape')
+                setIsOpen(false);
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+    const handleClick = () => {
+        if (enableDropdown)
+            setIsOpen((prev) => !prev);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (react_1.default.createElement(styles_1.CompanyProfileContainer, { ref: containerRef },
+        react_1.default.createElement(styles_1.CompanyProfileWrapper, { ref: triggerRef, onClick: handleClick },
+            react_1.default.createElement(styles_1.CompanyProfileContent, null,
+                react_1.default.createElement(styles_1.CompanyName, null, companyName),
+                react_1.default.createElement(styles_1.CompanySubtitle, null, subtitle)),
+            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 }))),
+        enableDropdown &&
+            isOpen &&
+            flyoutPos &&
+            (0, react_dom_1.createPortal)(react_1.default.createElement(dropdownStyles_1.DropdownFlyout, { ref: flyoutRef, style: { top: flyoutPos.top, left: flyoutPos.left } },
+                react_1.default.createElement(CompanyProfileDropdown_1.default, { showMenuItems: !switchOnly, companies: resolvedCompanies, menuItems: menuItems, onMenuItemClick: onMenuItemClick })), document.body)));
+};
+exports.default = CompanyProfile;
+//# sourceMappingURL=CompanyProfile.js.map

package/dist/components/Sidebar/CompanyProfile.js.map

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

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const dropdownStyles_1 = require("./dropdownStyles");
+const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
+const colors_1 = require("../../constants/Colors/colors");
+const CompanyProfileDropdown = ({ showMenuItems = true, switchCompany = true, companies = [], menuItems = [], onMenuItemClick, }) => (react_1.default.createElement(dropdownStyles_1.DropdownPanel, null,
+    switchCompany && companies.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(dropdownStyles_1.DropdownSectionLabel, null, "SWITCH COMPANY"),
+        companies.map((company) => (react_1.default.createElement(dropdownStyles_1.DropdownRow, { key: company.name, active: company.active, onClick: company.onClick },
+            react_1.default.createElement(dropdownStyles_1.DropdownRowContent, null,
+                react_1.default.createElement(dropdownStyles_1.DropdownPrimaryText, null, company.name),
+                company.subtitle && (react_1.default.createElement(dropdownStyles_1.DropdownSecondaryText, null, company.subtitle))),
+            company.active && (react_1.default.createElement(MaterialSymbols_1.default, { icon: "check", size: "m", color: colors_1.STATUS.POSITIVE }))))),
+        showMenuItems && menuItems.length > 0 && react_1.default.createElement(dropdownStyles_1.DropdownDivider, null))),
+    showMenuItems &&
+        menuItems.map((item) => (react_1.default.createElement(dropdownStyles_1.DropdownMenuRow, { key: item.label, onClick: () => {
+                var _a;
+                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(item.label);
+            } },
+            react_1.default.createElement(MaterialSymbols_1.default, { icon: item.icon, size: "m", color: colors_1.BASE.ON_NEUTRAL_SECONDARY }),
+            react_1.default.createElement(dropdownStyles_1.DropdownRowContent, null,
+                react_1.default.createElement(dropdownStyles_1.DropdownMenuLabel, null, item.label)))))));
+exports.default = CompanyProfileDropdown;
+//# sourceMappingURL=CompanyProfileDropdown.js.map

package/dist/components/Sidebar/CompanyProfileDropdown.js.map

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("./styles");
+const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
+const colors_1 = require("../../constants/Colors/colors");
+const CopyrightNotice = ({ text = 'Licensed & Regulated \nby Monetary Authority of Singapore', }) => (react_1.default.createElement(styles_1.CopyrightNoticeWrapper, null,
+    react_1.default.createElement(MaterialSymbols_1.default, { icon: "verified_user", size: "m", fill: 0, color: colors_1.STATUS.POSITIVE }),
+    react_1.default.createElement(styles_1.CopyrightNoticeText, null, text)));
+exports.default = CopyrightNotice;
+//# sourceMappingURL=CopyrightNotice.js.map

package/dist/components/Sidebar/CopyrightNotice.js.map

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

@@ -0,0 +1,154 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarBase = exports.SidebarTrigger = exports.SidebarProvider = exports.useSidebar = void 0;
+const react_1 = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const styles_1 = require("./styles");
+const colors_1 = require("../../constants/Colors/colors");
+const SidebarContext = (0, react_1.createContext)(null);
+const useSidebar = () => {
+    const ctx = (0, react_1.useContext)(SidebarContext);
+    if (!ctx)
+        throw new Error('useSidebar must be used inside a <SidebarProvider>');
+    return ctx;
+};
+exports.useSidebar = useSidebar;
+const SidebarProvider = ({ open: controlledOpen, onOpenChange, defaultOpen = true, mobileBreakpoint = 1280, children, }) => {
+    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const setOpen = (0, react_1.useCallback)((value) => {
+        if (!isControlled)
+            setInternalOpen(value);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
+    }, [isControlled, onOpenChange]);
+    const toggle = (0, react_1.useCallback)(() => setOpen(!open), [setOpen, open]);
+    // Responsive: detect mobile breakpoint
+    (0, react_1.useEffect)(() => {
+        const mq = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
+        const handler = (e) => {
+            setIsMobile(e.matches);
+            setOpen(!e.matches);
+        };
+        handler(mq);
+        mq.addEventListener('change', handler);
+        return () => mq.removeEventListener('change', handler);
+    }, [mobileBreakpoint, setOpen]);
+    return (react_1.default.createElement(SidebarContext.Provider, { value: { open, setOpen, toggle, isMobile } }, children));
+};
+exports.SidebarProvider = SidebarProvider;
+const SidebarTrigger = ({ className = '', label = 'Toggle navigation', }) => {
+    const { toggle } = (0, exports.useSidebar)();
+    return (react_1.default.createElement(TriggerButton, { type: "button", className: className, onClick: toggle, "aria-label": label },
+        react_1.default.createElement("span", { className: "material-symbols-rounded", translate: "no" }, "menu")));
+};
+exports.SidebarTrigger = SidebarTrigger;
+const TriggerButton = styled_1.default.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  color: ${colors_1.BASE.ON_NEUTRAL};
+
+  &:hover {
+    background: #ececec;
+  }
+
+  .material-symbols-rounded {
+    font-size: 24px;
+  }
+`;
+const SidebarBase = ({ variant = 'business', logo, companyProfile, children, footer, }) => {
+    var _a, _b;
+    const context = (0, react_1.useContext)(SidebarContext);
+    const open = (_a = context === null || context === void 0 ? void 0 : context.open) !== null && _a !== void 0 ? _a : true;
+    const isMobile = (_b = context === null || context === void 0 ? void 0 : context.isMobile) !== null && _b !== void 0 ? _b : false;
+    const sidebarContent = (react_1.default.createElement(styles_1.SidebarWrapper, { variant: variant, "data-sidebar-root": true },
+        react_1.default.createElement(styles_1.MenuHeader, null,
+            logo && react_1.default.createElement(styles_1.LogoWrapper, null, logo),
+            companyProfile,
+            react_1.default.createElement(styles_1.MenuContainer, null, children),
+            footer)));
+    // Mobile: render as drawer overlay
+    if (isMobile) {
+        if (!open)
+            return null;
+        return (react_1.default.createElement(Overlay, null,
+            react_1.default.createElement(Scrim, { onClick: () => context === null || context === void 0 ? void 0 : context.setOpen(false), "aria-label": "Close navigation" }),
+            react_1.default.createElement(DrawerContainer, null, sidebarContent)));
+    }
+    // Desktop: render inline (hidden when collapsed)
+    if (!open)
+        return null;
+    return sidebarContent;
+};
+exports.SidebarBase = SidebarBase;
+// ─── Mobile drawer styles ───
+const Overlay = styled_1.default.div `
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+`;
+const Scrim = styled_1.default.div `
+  position: absolute;
+  inset: 0;
+  background-color: ${colors_1.BASE.OVERLAY};
+  cursor: pointer;
+`;
+const DrawerContainer = styled_1.default.div `
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  overflow-y: auto;
+`;
+// ─── Default export ───
+const Sidebar = {
+    Base: exports.SidebarBase,
+    Provider: exports.SidebarProvider,
+    Trigger: exports.SidebarTrigger,
+};
+exports.default = Sidebar;
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMc;AACd,6DAAoC;AACpC,qCAKiB;AAEjB,0DAAoD;AAWpD,MAAM,cAAc,GAAG,IAAA,qBAAa,EAA6B,IAAI,CAAC,CAAA;AAE/D,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,cAAc,CAAC,CAAA;IACtC,IAAI,CAAC,GAAG;QACN,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAA;IACvE,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AALY,QAAA,UAAU,cAKtB;AAcM,MAAM,eAAe,GAAG,CAAC,EAC9B,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,IAAI,EACvB,QAAQ,GACa,EAAE,EAAE;IACzB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAA;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAE/C,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS,CAAA;IACjD,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAA;IAEzD,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,CAAC,KAAc,EAAE,EAAE;QACjB,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,KAAK,CAAC,CAAA;QACzC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,KAAK,CAAC,CAAA;IACvB,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B,CAAA;IAED,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAA;IAEjE,uCAAuC;IACvC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,gBAAgB,GAAG,CAAC,KAAK,CAAC,CAAA;QACtE,MAAM,OAAO,GAAG,CAAC,CAAuC,EAAE,EAAE;YAC1D,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;YACtB,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;QACrB,CAAC,CAAA;QACD,OAAO,CAAC,EAAE,CAAC,CAAA;QACX,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QACtC,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IACxD,CAAC,EAAE,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAA;IAE/B,OAAO,CACL,8BAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAChE,QAAQ,CACe,CAC3B,CAAA;AACH,CAAC,CAAA;AAxCY,QAAA,eAAe,mBAwC3B;AASM,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,mBAAmB,GACP,EAAE,EAAE;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,kBAAU,GAAE,CAAA;IAC/B,OAAO,CACL,8BAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,gBACH,KAAK;QAEjB,wCAAM,SAAS,EAAC,0BAA0B,EAAC,SAAS,EAAC,IAAI,WAElD,CACO,CACjB,CAAA;AACH,CAAC,CAAA;AAjBY,QAAA,cAAc,kBAiB1B;AAED,MAAM,aAAa,GAAG,gBAAM,CAAC,MAAM,CAAA;;;;;;;;;;WAUxB,aAAI,CAAC,UAAU;;;;;;;;;CASzB,CAAA;AAYM,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,GAAG,UAAU,EACpB,IAAI,EACJ,cAAc,EACd,QAAQ,EACR,MAAM,GACW,EAAE,EAAE;;IACrB,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,cAAc,CAAC,CAAA;IAC1C,MAAM,IAAI,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,IAAI,CAAA;IAClC,MAAM,QAAQ,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,KAAK,CAAA;IAE3C,MAAM,cAAc,GAAG,CACrB,8BAAC,uBAAc,IAAC,OAAO,EAAE,OAAO;QAC9B,8BAAC,mBAAU;YACR,IAAI,IAAI,8BAAC,oBAAW,QAAE,IAAI,CAAe;YACzC,cAAc;YACf,8BAAC,sBAAa,QAAE,QAAQ,CAAiB;YACxC,MAAM,CACI,CACE,CAClB,CAAA;IAED,mCAAmC;IACnC,IAAI,QAAQ,EAAE,CAAC;QACb,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAA;QACtB,OAAO,CACL,8BAAC,OAAO;YACN,8BAAC,KAAK,IACJ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,KAAK,CAAC,gBAC3B,kBAAkB,GAC7B;YACF,8BAAC,eAAe,QAAE,cAAc,CAAmB,CAC3C,CACX,CAAA;IACH,CAAC;IAED,iDAAiD;IACjD,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IACtB,OAAO,cAAc,CAAA;AACvB,CAAC,CAAA;AAvCY,QAAA,WAAW,eAuCvB;AAED,+BAA+B;AAE/B,MAAM,OAAO,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;CAKzB,CAAA;AAED,MAAM,KAAK,GAAG,gBAAM,CAAC,GAAG,CAAA;;;sBAGF,aAAI,CAAC,OAAO;;CAEjC,CAAA;AAED,MAAM,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;CAKjC,CAAA;AAED,yBAAyB;AAEzB,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,mBAAW;IACjB,QAAQ,EAAE,uBAAe;IACzB,OAAO,EAAE,sBAAc;CACxB,CAAA;AAED,kBAAe,OAAO,CAAA"}

package/dist/components/Sidebar/SidebarNavItem.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("./styles");
+const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
+const Tag_1 = __importDefault(require("../Tag"));
+const SidebarSubItem_1 = __importDefault(require("./SidebarSubItem"));
+const SidebarNavItem = ({ id, icon, label, variant = 'business', active = false, onClick, subItems, isExpanded = false, tag, autoSelectFirstSubItem = false, }) => {
+    const color = (0, styles_1.itemTextColor)(variant, active);
+    const hasSubItems = Boolean(subItems && subItems.length > 0);
+    const handleClick = () => {
+        var _a, _b, _c;
+        // Fire the parent handler (consumer toggles expansion). If auto-select is
+        // on and this click is opening a collapsed group, also select the first
+        // sub-item so it's active without a second click.
+        if (autoSelectFirstSubItem &&
+            hasSubItems &&
+            !isExpanded &&
+            ((_a = subItems === null || subItems === void 0 ? void 0 : subItems[0]) === null || _a === void 0 ? void 0 : _a.onClick)) {
+            (_c = (_b = subItems[0]).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(styles_1.NavItemWrapper, { variant: variant, active: active, onClick: handleClick, "data-id": id },
+            react_1.default.createElement(MaterialSymbols_1.default, { icon: icon, size: "m", fill: active ? 1 : 0, color: color }),
+            react_1.default.createElement(styles_1.NavItemLabel, { variant: variant, active: active }, label),
+            tag && (react_1.default.createElement(Tag_1.default, { type: "positive", variant: "filled", size: "sm" }, tag)),
+            hasSubItems && (react_1.default.createElement(styles_1.NavItemAffordance, null,
+                react_1.default.createElement(MaterialSymbols_1.default, { icon: "keyboard_arrow_down", size: "m", color: color, style: isExpanded ? { transform: 'rotate(180deg)' } : undefined })))),
+        isExpanded &&
+            subItems &&
+            subItems.map((sub) => (react_1.default.createElement(SidebarSubItem_1.default, { key: sub.id, label: sub.label, variant: variant, active: sub.active, onClick: sub.onClick })))));
+};
+exports.default = SidebarNavItem;
+//# sourceMappingURL=SidebarNavItem.js.map

package/dist/components/Sidebar/SidebarNavItem.js.map

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("./styles");
+const SidebarSubItem = ({ label, variant = 'business', active = false, onClick, }) => (react_1.default.createElement(styles_1.SubItemWrapper, { variant: variant, active: active, onClick: onClick },
+    react_1.default.createElement(styles_1.SubItemLabel, { variant: variant, active: active }, label)));
+exports.default = SidebarSubItem;
+//# sourceMappingURL=SidebarSubItem.js.map

package/dist/components/Sidebar/SidebarSubItem.js.map

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