@xfers/design-system 7.1.0-dev.86ca620f59 → 7.1.0-dev.89ea3acf11

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 +442 -205
  2. package/cjs/index.js.map +1 -1
  3. package/dist/components/Sidebar/CompanyProfile.js +85 -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 +20 -0
  10. package/dist/components/Sidebar/Sidebar.js.map +1 -0
  11. package/dist/components/Sidebar/SidebarNavItem.js +24 -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 +120 -0
  16. package/dist/components/Sidebar/dropdownStyles.js.map +1 -0
  17. package/dist/components/Sidebar/index.js +53 -0
  18. package/dist/components/Sidebar/index.js.map +1 -0
  19. package/dist/components/Sidebar/styles.js +190 -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 +9 -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 +14 -0
  29. package/dist/types/components/Sidebar/SidebarNavItem.d.ts +19 -0
  30. package/dist/types/components/Sidebar/SidebarSubItem.d.ts +10 -0
  31. package/dist/types/components/Sidebar/dropdownStyles.d.ts +11 -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 +451 -214
  37. package/es/index.js.map +1 -1
  38. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -20,7 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
20
20
  };
21
21
  Object.defineProperty(exports, "__esModule", { value: true });
22
22
  exports.Spin = exports.ErrorPage = exports.Tooltip = exports.CopyBox = exports.Section = exports.Banner = exports.Note = exports.ContentBreakdown = exports.Hidden = exports.Link = exports.Divider = exports.EmptyData = exports.SmallP = exports.P1Bold = exports.P1 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Checkbox = exports.DatePicker = exports.Timer = exports.Tabs = exports.Table = exports.Steps = exports.SelectionBoxGroup = exports.SelectionBox = exports.Select = exports.RangePicker = exports.Radio = exports.Pagination = exports.DeprecatedModal = exports.DialogItems = exports.Modal = exports.Tag = exports.InputWithButton = exports.Input = exports.Form = exports.DynamicSelect = exports.Dropdown = exports.Carousel = exports.Chart = exports.Card = exports.BadgeIcon = exports.Accordion = exports.ActionCard = exports.ActionButton = exports.Button = exports.Alert = exports.AntdConfigProvider = void 0;
23
- exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.MAIN_FONT = exports.BACKGROUND_COLORS = exports.TEXT_COLORS = exports.ICON_COLORS = exports.MAIN_COLORS = exports.NEUTRAL_COLORS = exports.YELLOW_COLORS = exports.RED_COLORS = exports.GREEN_COLORS = exports.BLUE_COLORS = exports.TABLET_BREAKPOINT = exports.LAPTOP_BREAKPOINT = exports.DESKTOP_BREAKPOINT = exports.EXTRA_LARGE_DESKTOP_BREAKPOINT = exports.useModal = exports.ModalProvider = exports.straitsXTheme = exports.xfersTheme = exports.useTheme = exports.ThemeProvider = exports.Typography = exports.MaterialSymbols = exports.getCoachmarkJoyrideConfig = exports.Coachmark = exports.Timeline = exports.SummaryCard = void 0;
23
+ exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.MAIN_FONT = exports.BACKGROUND_COLORS = exports.TEXT_COLORS = exports.ICON_COLORS = exports.MAIN_COLORS = exports.NEUTRAL_COLORS = exports.YELLOW_COLORS = exports.RED_COLORS = exports.GREEN_COLORS = exports.BLUE_COLORS = exports.TABLET_BREAKPOINT = exports.LAPTOP_BREAKPOINT = exports.DESKTOP_BREAKPOINT = exports.EXTRA_LARGE_DESKTOP_BREAKPOINT = exports.useModal = exports.ModalProvider = exports.straitsXTheme = exports.xfersTheme = exports.useTheme = exports.ThemeProvider = exports.Typography = exports.MaterialSymbols = exports.getCoachmarkJoyrideConfig = exports.CopyrightNotice = exports.CompanyProfileDropdown = exports.CompanyProfile = exports.SidebarSubItem = exports.SidebarNavItem = exports.SidebarBase = exports.Sidebar = exports.Coachmark = exports.Timeline = exports.SummaryCard = void 0;
24
24
  // Components
25
25
  var AntdConfigProvider_1 = require("./components/AntdConfigProvider");
26
26
  Object.defineProperty(exports, "AntdConfigProvider", { enumerable: true, get: function () { return __importDefault(AntdConfigProvider_1).default; } });
@@ -121,6 +121,14 @@ var Timeline_1 = require("./components/Timeline");
121
121
  Object.defineProperty(exports, "Timeline", { enumerable: true, get: function () { return __importDefault(Timeline_1).default; } });
122
122
  var Coachmark_1 = require("./components/Coachmark");
123
123
  Object.defineProperty(exports, "Coachmark", { enumerable: true, get: function () { return __importDefault(Coachmark_1).default; } });
124
+ var Sidebar_1 = require("./components/Sidebar");
125
+ Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return __importDefault(Sidebar_1).default; } });
126
+ Object.defineProperty(exports, "SidebarBase", { enumerable: true, get: function () { return Sidebar_1.SidebarBase; } });
127
+ Object.defineProperty(exports, "SidebarNavItem", { enumerable: true, get: function () { return Sidebar_1.SidebarNavItem; } });
128
+ Object.defineProperty(exports, "SidebarSubItem", { enumerable: true, get: function () { return Sidebar_1.SidebarSubItem; } });
129
+ Object.defineProperty(exports, "CompanyProfile", { enumerable: true, get: function () { return Sidebar_1.CompanyProfile; } });
130
+ Object.defineProperty(exports, "CompanyProfileDropdown", { enumerable: true, get: function () { return Sidebar_1.CompanyProfileDropdown; } });
131
+ Object.defineProperty(exports, "CopyrightNotice", { enumerable: true, get: function () { return Sidebar_1.CopyrightNotice; } });
124
132
  // Helper Functions
125
133
  var getJoyrideConfig_1 = require("./components/Coachmark/getJoyrideConfig");
126
134
  Object.defineProperty(exports, "getCoachmarkJoyrideConfig", { enumerable: true, get: function () { return getJoyrideConfig_1.getCoachmarkJoyrideConfig; } });
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import type { CompanyOption, DropdownMenuItem } from './CompanyProfileDropdown';
3
+ type CompanyProfileProps = {
4
+ companyName?: string;
5
+ subtitle?: string;
6
+ enableDropdown?: boolean;
7
+ /** Renders only the company switcher, without the menu items. */
8
+ switchOnly?: boolean;
9
+ companies?: CompanyOption[];
10
+ /** Menu items shown below the divider. Consumer provides icon + label. */
11
+ menuItems?: DropdownMenuItem[];
12
+ onMenuItemClick?: (label: string) => void;
13
+ onClick?: () => void;
14
+ };
15
+ declare const CompanyProfile: ({ companyName, subtitle, enableDropdown, switchOnly, companies, menuItems, onMenuItemClick, onClick, }: CompanyProfileProps) => React.JSX.Element;
16
+ export default CompanyProfile;
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import { MaterialSymbol } from 'material-symbols';
3
+ export type CompanyOption = {
4
+ name: string;
5
+ subtitle?: string;
6
+ active?: boolean;
7
+ onClick?: () => void;
8
+ };
9
+ export type DropdownMenuItem = {
10
+ /** Material Symbol icon name (e.g. 'domain', 'group', 'receipt_long'). */
11
+ icon: MaterialSymbol;
12
+ /** Display label for the menu item. */
13
+ label: string;
14
+ onClick?: () => void;
15
+ };
16
+ type CompanyProfileDropdownProps = {
17
+ /** When false, only the company switcher is rendered (Figma `switchOnly`). */
18
+ showMenuItems?: boolean;
19
+ /** When false, the switch-company block is hidden (Figma `switchCompany`). */
20
+ switchCompany?: boolean;
21
+ /** Companies shown in the SWITCH COMPANY section. */
22
+ companies?: CompanyOption[];
23
+ /**
24
+ * Menu items shown below the divider. Each item needs an icon (MaterialSymbol)
25
+ * and a label. Consumer must provide this explicitly.
26
+ */
27
+ menuItems?: DropdownMenuItem[];
28
+ /** Fired when a menu item is clicked (if the item doesn't have its own onClick). */
29
+ onMenuItemClick?: (label: string) => void;
30
+ };
31
+ declare const CompanyProfileDropdown: ({ showMenuItems, switchCompany, companies, menuItems, onMenuItemClick, }: CompanyProfileDropdownProps) => React.JSX.Element;
32
+ export default CompanyProfileDropdown;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ type CopyrightNoticeProps = {
3
+ text?: string;
4
+ };
5
+ declare const CopyrightNotice: ({ text, }: CopyrightNoticeProps) => React.JSX.Element;
6
+ export default CopyrightNotice;
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import type { SidebarVariant } from './styles';
3
+ type SidebarBaseProps = {
4
+ variant?: SidebarVariant;
5
+ logo?: React.ReactNode;
6
+ companyProfile?: React.ReactNode;
7
+ children?: React.ReactNode;
8
+ footer?: React.ReactNode;
9
+ };
10
+ export declare const SidebarBase: ({ variant, logo, companyProfile, children, footer, }: SidebarBaseProps) => React.JSX.Element;
11
+ declare const Sidebar: {
12
+ Base: ({ variant, logo, companyProfile, children, footer, }: SidebarBaseProps) => React.JSX.Element;
13
+ };
14
+ export default Sidebar;
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { MaterialSymbol } from 'material-symbols';
3
+ import type { SidebarVariant } from './styles';
4
+ export type SubItem = {
5
+ label: string;
6
+ active?: boolean;
7
+ onClick?: () => void;
8
+ };
9
+ type SidebarNavItemProps = {
10
+ icon: MaterialSymbol;
11
+ label: string;
12
+ variant?: SidebarVariant;
13
+ active?: boolean;
14
+ onClick?: () => void;
15
+ subItems?: SubItem[];
16
+ isExpanded?: boolean;
17
+ };
18
+ declare const SidebarNavItem: ({ icon, label, variant, active, onClick, subItems, isExpanded, }: SidebarNavItemProps) => React.JSX.Element;
19
+ export default SidebarNavItem;
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import type { SidebarVariant } from './styles';
3
+ type SidebarSubItemProps = {
4
+ label: string;
5
+ variant?: SidebarVariant;
6
+ active?: boolean;
7
+ onClick?: () => void;
8
+ };
9
+ declare const SidebarSubItem: ({ label, variant, active, onClick, }: SidebarSubItemProps) => React.JSX.Element;
10
+ export default SidebarSubItem;
@@ -0,0 +1,11 @@
1
+ export declare const DropdownPanel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
2
+ export declare const DropdownSectionLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
3
+ export declare const DropdownRow: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
4
+ active?: boolean;
5
+ }, object>;
6
+ export declare const DropdownMenuRow: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
7
+ export declare const DropdownRowContent: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
8
+ export declare const DropdownPrimaryText: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
9
+ export declare const DropdownSecondaryText: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
10
+ export declare const DropdownMenuLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
11
+ export declare const DropdownDivider: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
@@ -0,0 +1,11 @@
1
+ import Sidebar, { SidebarBase } from './Sidebar';
2
+ import SidebarNavItem from './SidebarNavItem';
3
+ import SidebarSubItem from './SidebarSubItem';
4
+ import CompanyProfile from './CompanyProfile';
5
+ import CompanyProfileDropdown from './CompanyProfileDropdown';
6
+ import CopyrightNotice from './CopyrightNotice';
7
+ export { SidebarBase, SidebarNavItem, SidebarSubItem, CompanyProfile, CompanyProfileDropdown, CopyrightNotice, };
8
+ export type { SidebarVariant } from './styles';
9
+ export type { SubItem } from './SidebarNavItem';
10
+ export type { CompanyOption, DropdownMenuItem } from './CompanyProfileDropdown';
11
+ export default Sidebar;
@@ -0,0 +1,33 @@
1
+ import { BASE, STATUS } from '../../constants/Colors/colors';
2
+ export type SidebarVariant = 'business' | 'personal' | 'sandbox';
3
+ export declare const itemTextColor: (variant: SidebarVariant, active?: boolean) => BASE.ON_CONTAINER | BASE.ON_NEUTRAL_SECONDARY | STATUS.POSITIVE;
4
+ export declare const SidebarWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
5
+ variant: SidebarVariant;
6
+ }, object>;
7
+ export declare const MenuHeader: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
8
+ export declare const LogoWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
9
+ export declare const MenuContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
10
+ export declare const NavItemWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
11
+ variant: SidebarVariant;
12
+ active?: boolean;
13
+ }, object>;
14
+ export declare const NavItemLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
15
+ variant: SidebarVariant;
16
+ active?: boolean;
17
+ }, object>;
18
+ export declare const NavItemAffordance: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
19
+ export declare const SubItemWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
20
+ variant: SidebarVariant;
21
+ active?: boolean;
22
+ }, object>;
23
+ export declare const SubItemLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
24
+ variant: SidebarVariant;
25
+ active?: boolean;
26
+ }, object>;
27
+ export declare const CompanyProfileContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
28
+ export declare const CompanyProfileWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
29
+ export declare const CompanyProfileContent: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
30
+ export declare const CompanyName: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
31
+ export declare const CompanySubtitle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
32
+ export declare const CopyrightNoticeWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
33
+ export declare const CopyrightNoticeText: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
@@ -105,5 +105,7 @@ export declare enum COMPONENT {
105
105
  BUTTON_PRIMARY = "#00A965",
106
106
  LABEL_INPUT = "#757575",
107
107
  HELPER_INPUT = "#757575",
108
- PLACEHOLDER_INPUT = "#B6B6B6"
108
+ PLACEHOLDER_INPUT = "#B6B6B6",
109
+ SIDEBAR_ACTIVE = "#D7EFE2",
110
+ SIDEBAR_ACTIVE_SANDBOX = "#005755"
109
111
  }
@@ -44,6 +44,8 @@ export { default as Spin } from './components/Spin';
44
44
  export { default as SummaryCard } from './components/SummaryCard';
45
45
  export { default as Timeline } from './components/Timeline';
46
46
  export { default as Coachmark } from './components/Coachmark';
47
+ export { default as Sidebar, SidebarBase, SidebarNavItem, SidebarSubItem, CompanyProfile, CompanyProfileDropdown, CopyrightNotice, } from './components/Sidebar';
48
+ export type { SidebarVariant, SubItem as SidebarSubItemType, CompanyOption as SidebarCompanyOption, DropdownMenuItem as SidebarDropdownMenuItem, } from './components/Sidebar';
47
49
  export { getCoachmarkJoyrideConfig } from './components/Coachmark/getJoyrideConfig';
48
50
  export * from './icons';
49
51
  export { MaterialSymbols } from './icons/MaterialSymbols';