@arbor-education/design-system.components 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.1
+
+### Patch Changes
+
+- [#126](https://github.com/arbor-education/design-system.components/pull/126) [`3c0783e`](https://github.com/arbor-education/design-system.components/commit/3c0783e66d6babf6a835991e1c1ff2df8903d269) Thanks [@AmeeMorris](https://github.com/AmeeMorris)! - MIS-68964 UserDropdown component
+
 ## 0.4.0
 
 ### Minor Changes

package/CLAUDE.md

@@ -130,6 +130,15 @@ The Table component is a wrapper around AG Grid:
 - lint-staged runs ESLint on TypeScript files and stylelint on SCSS files
 - All linters run with `--fix` flag to auto-fix issues when possible
 
+## Branch rules
+- Never try to push directly to main, all work must be on a branch
+- Branch namining conventions are: 
+- The branch must have a jira ticket number in it i.e. `MIS-68964`
+- The branch should start with `feature/` `bugfix/` `issue/`
+
+## Commit rules
+- Each commit message should start with the same Jira ticket number as the branch name followed by a description of whats being committed. i.e. `MIS-68964 changed x prop to be a string`
+
 ## Notes for Claude
 - This is an active production codebase serving educational institutions
 - Changes can affect millions of users - be thoughtful and careful

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type AvatarSize = 'small' | 'medium' | 'large' | 'extra-large';
+export type AvatarProps = {
+    size?: AvatarSize;
+    src?: string;
+    alt?: string;
+    initials?: string;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAsDxC,CAAC"}

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import React from 'react';
+export const Avatar = (props) => {
+    const { size = 'medium', src, alt = '', initials, className, ...rest } = props;
+    const renderContent = () => {
+        if (src) {
+            return (_jsx("img", { src: src, alt: alt, className: "ds-avatar__image" }));
+        }
+        if (initials) {
+            return (_jsx("span", { className: "ds-avatar__initials", "aria-label": alt, children: initials }));
+        }
+        return (_jsx("span", { className: "ds-avatar__placeholder", "aria-label": alt || 'User avatar', children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "ds-avatar__placeholder-icon", children: _jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }));
+    };
+    return (_jsx("div", { className: classNames('ds-avatar', `ds-avatar--${size}`, className), ...rest, children: renderContent() }));
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,IAAI,GAAG,QAAQ,EACf,GAAG,EACH,GAAG,GAAG,EAAE,EACR,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,kBAAkB,GAC5B,CACH,CAAC;QACJ,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,CACL,eAAM,SAAS,EAAC,qBAAqB,gBAAa,GAAG,YAClD,QAAQ,GACJ,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,eAAM,SAAS,EAAC,wBAAwB,gBAAa,GAAG,IAAI,aAAa,YACvE,cACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,6BAA6B,YAEvC,eAAM,CAAC,EAAC,+GAA+G,GAAG,GACtH,GACD,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,UAAU,CACnB,WAAW,EACX,cAAc,IAAI,EAAE,EACpB,SAAS,CACV,KACG,IAAI,YAEP,aAAa,EAAE,GACZ,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/avatar/Avatar.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar } from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+type Story = StoryObj<typeof Avatar>;
+export declare const Default: Story;
+export declare const WithInitials: Story;
+export declare const Placeholder: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;
+export declare const AllSizes: Story;
+export default meta;
+//# sourceMappingURL=Avatar.stories.d.ts.map

package/dist/components/avatar/Avatar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/avatar/Avatar.stories.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from './Avatar';
+const meta = {
+    title: 'Components/Avatar',
+    component: Avatar,
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['small', 'medium', 'large', 'extra-large'],
+        },
+    },
+};
+export const Default = {
+    args: {
+        size: 'medium',
+        src: 'https://i.pravatar.cc/150?img=1',
+        alt: 'User avatar',
+    },
+};
+export const WithInitials = {
+    args: {
+        size: 'medium',
+        initials: 'CM',
+        alt: 'Christine Montgomery',
+    },
+};
+export const Placeholder = {
+    args: {
+        size: 'medium',
+        alt: 'User avatar',
+    },
+};
+export const Small = {
+    args: {
+        size: 'small',
+        src: 'https://i.pravatar.cc/150?img=2',
+        alt: 'User avatar',
+    },
+};
+export const Medium = {
+    args: {
+        size: 'medium',
+        src: 'https://i.pravatar.cc/150?img=3',
+        alt: 'User avatar',
+    },
+};
+export const Large = {
+    args: {
+        size: 'large',
+        src: 'https://i.pravatar.cc/150?img=4',
+        alt: 'User avatar',
+    },
+};
+export const ExtraLarge = {
+    args: {
+        size: 'extra-large',
+        src: 'https://i.pravatar.cc/150?img=5',
+        alt: 'User avatar',
+    },
+};
+export const AllSizes = {
+    render: () => (_jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [_jsx(Avatar, { size: "small", src: "https://i.pravatar.cc/150?img=6", alt: "Small avatar" }), _jsx(Avatar, { size: "medium", src: "https://i.pravatar.cc/150?img=7", alt: "Medium avatar" }), _jsx(Avatar, { size: "large", src: "https://i.pravatar.cc/150?img=8", alt: "Large avatar" }), _jsx(Avatar, { size: "extra-large", src: "https://i.pravatar.cc/150?img=9", alt: "Extra large avatar" })] })),
+};
+export default meta;
+//# sourceMappingURL=Avatar.stories.js.map

package/dist/components/avatar/Avatar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;SACrD;KACF;CACF,CAAC;AAIF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,IAAI;QACd,GAAG,EAAE,sBAAsB;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,aAAa;QACnB,GAAG,EAAE,iCAAiC;QACtC,GAAG,EAAE,aAAa;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,aAChE,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAC,iCAAiC,EAAC,GAAG,EAAC,cAAc,GAAG,EAChF,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,iCAAiC,EAAC,GAAG,EAAC,eAAe,GAAG,EAClF,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAC,iCAAiC,EAAC,GAAG,EAAC,cAAc,GAAG,EAChF,KAAC,MAAM,IAAC,IAAI,EAAC,aAAa,EAAC,GAAG,EAAC,iCAAiC,EAAC,GAAG,EAAC,oBAAoB,GAAG,IACxF,CACP;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/avatar/Avatar.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=Avatar.test.d.ts.map

package/dist/components/avatar/Avatar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.test.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}

package/dist/components/avatar/Avatar.test.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, test, describe } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Avatar } from './Avatar';
+import '@testing-library/jest-dom/vitest';
+describe('Avatar', () => {
+    test('renders with image when src is provided', () => {
+        render(_jsx(Avatar, { src: "https://example.com/avatar.jpg", alt: "Test User" }));
+        const image = screen.getByRole('img', { hidden: true });
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+        expect(image).toHaveAttribute('alt', 'Test User');
+    });
+    test('renders with initials when no src is provided', () => {
+        render(_jsx(Avatar, { initials: "CM", alt: "Christine Montgomery" }));
+        expect(screen.getByText('CM')).toBeInTheDocument();
+        expect(screen.getByLabelText('Christine Montgomery')).toBeInTheDocument();
+    });
+    test('renders placeholder when no src or initials provided', () => {
+        render(_jsx(Avatar, { alt: "User avatar" }));
+        expect(screen.getByLabelText('User avatar')).toBeInTheDocument();
+    });
+    test('renders placeholder with default label when no alt provided', () => {
+        render(_jsx(Avatar, {}));
+        expect(screen.getByLabelText('User avatar')).toBeInTheDocument();
+    });
+    test('applies size variant class', () => {
+        const { container, rerender } = render(_jsx(Avatar, { size: "small" }));
+        expect(container.firstChild).toHaveClass('ds-avatar--small');
+        rerender(_jsx(Avatar, { size: "medium" }));
+        expect(container.firstChild).toHaveClass('ds-avatar--medium');
+        rerender(_jsx(Avatar, { size: "large" }));
+        expect(container.firstChild).toHaveClass('ds-avatar--large');
+        rerender(_jsx(Avatar, { size: "extra-large" }));
+        expect(container.firstChild).toHaveClass('ds-avatar--extra-large');
+    });
+    test('applies default medium size when no size specified', () => {
+        const { container } = render(_jsx(Avatar, {}));
+        expect(container.firstChild).toHaveClass('ds-avatar--medium');
+    });
+    test('applies custom className', () => {
+        const { container } = render(_jsx(Avatar, { className: "custom-class" }));
+        expect(container.firstChild).toHaveClass('ds-avatar');
+        expect(container.firstChild).toHaveClass('custom-class');
+    });
+    test('spreads additional HTML attributes', () => {
+        const { container } = render(_jsx(Avatar, { "data-testid": "avatar-test" }));
+        expect(container.firstChild).toHaveAttribute('data-testid', 'avatar-test');
+    });
+});
+//# sourceMappingURL=Avatar.test.js.map

package/dist/components/avatar/Avatar.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.test.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/dropdown/Dropdown.d.ts

@@ -12,5 +12,7 @@ export declare const Dropdown: {
     }) => import("react/jsx-runtime").JSX.Element;
     Item: (props: DropdownMenu.DropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element;
     SelectItem: (props: import("./items/DropdownSelectItem").DropdowSelectItemProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: (props: DropdownMenu.DropdownMenuSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    Group: (props: DropdownMenu.DropdownMenuGroupProps) => import("react/jsx-runtime").JSX.Element;
 };
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAMxC,eAAO,MAAM,QAAQ;YAAW,YAAY,CAAC,iBAAiB;;;;;;;;;;;;CAO7D,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAQxC,eAAO,MAAM,QAAQ;YAAW,YAAY,CAAC,iBAAiB;;;;;;;;;;;;;;CAO7D,CAAC"}

package/dist/components/dropdown/Dropdown.js

@@ -4,12 +4,16 @@ import { DropdownTrigger } from './DropdownTrigger';
 import { DropdownContent } from './DropdownContent';
 import { DropdownItem } from './items/DropdownItem';
 import { DropdownSelectItem } from './items/DropdownSelectItem';
+import { DropdownSeparator } from './items/DropdownSeparator';
+import { DropdownGroup } from './items/DropdownGroup';
 export const Dropdown = (props) => {
     const { children, ...rest } = props;
-    return (_jsx(DropdownMenu.Root, { ...rest, children: children }));
+    return (_jsx(DropdownMenu.Root, { modal: false, ...rest, children: children }));
 };
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Content = DropdownContent;
 Dropdown.Item = DropdownItem;
 Dropdown.SelectItem = DropdownSelectItem;
+Dropdown.Separator = DropdownSeparator;
+Dropdown.Group = DropdownGroup;
 //# sourceMappingURL=Dropdown.js.map

package/dist/components/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAqC,EAAE,EAAE;IAChE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpC,OAAO,CACL,KAAC,YAAY,CAAC,IAAI,OAAK,IAAI,YACxB,QAAQ,GACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,OAAO,GAAG,eAAe,CAAC;AACnC,QAAQ,CAAC,OAAO,GAAG,eAAe,CAAC;AACnC,QAAQ,CAAC,IAAI,GAAG,YAAY,CAAC;AAC7B,QAAQ,CAAC,UAAU,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAqC,EAAE,EAAE;IAChE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpC,OAAO,CACL,KAAC,YAAY,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,KAAM,IAAI,YACtC,QAAQ,GACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,OAAO,GAAG,eAAe,CAAC;AACnC,QAAQ,CAAC,OAAO,GAAG,eAAe,CAAC;AACnC,QAAQ,CAAC,IAAI,GAAG,YAAY,CAAC;AAC7B,QAAQ,CAAC,UAAU,GAAG,kBAAkB,CAAC;AACzC,QAAQ,CAAC,SAAS,GAAG,iBAAiB,CAAC;AACvC,QAAQ,CAAC,KAAK,GAAG,aAAa,CAAC"}

package/dist/components/dropdown/items/DropdownGroup.d.ts

@@ -0,0 +1,3 @@
+import { DropdownMenu } from 'radix-ui';
+export declare const DropdownGroup: (props: DropdownMenu.DropdownMenuGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DropdownGroup.d.ts.map

package/dist/components/dropdown/items/DropdownGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/items/DropdownGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,eAAO,MAAM,aAAa,GAAI,OAAO,YAAY,CAAC,sBAAsB,4CAOvE,CAAC"}

package/dist/components/dropdown/items/DropdownGroup.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu } from 'radix-ui';
+import classNames from 'classnames';
+export const DropdownGroup = (props) => {
+    const { children, className = '', ...rest } = props;
+    return (_jsx(DropdownMenu.Group, { className: classNames('ds-dropdown__group', className), ...rest, children: children }));
+};
+//# sourceMappingURL=DropdownGroup.js.map

package/dist/components/dropdown/items/DropdownGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownGroup.js","sourceRoot":"","sources":["../../../../src/components/dropdown/items/DropdownGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAA0C,EAAE,EAAE;IAC1E,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACL,KAAC,YAAY,CAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,KAAM,IAAI,YACjF,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/dropdown/items/DropdownSeparator.d.ts

@@ -0,0 +1,3 @@
+import { DropdownMenu } from 'radix-ui';
+export declare const DropdownSeparator: (props: DropdownMenu.DropdownMenuSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DropdownSeparator.d.ts.map

package/dist/components/dropdown/items/DropdownSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownSeparator.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/items/DropdownSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,eAAO,MAAM,iBAAiB,GAAI,OAAO,YAAY,CAAC,0BAA0B,4CAK/E,CAAC"}

package/dist/components/dropdown/items/DropdownSeparator.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu } from 'radix-ui';
+import classNames from 'classnames';
+export const DropdownSeparator = (props) => {
+    const { className = '', ...rest } = props;
+    return (_jsx(DropdownMenu.Separator, { className: classNames('ds-dropdown__separator', className), ...rest }));
+};
+//# sourceMappingURL=DropdownSeparator.js.map

package/dist/components/dropdown/items/DropdownSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownSeparator.js","sourceRoot":"","sources":["../../../../src/components/dropdown/items/DropdownSeparator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA8C,EAAE,EAAE;IAClF,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,OAAO,CACL,KAAC,YAAY,CAAC,SAAS,IAAC,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAAM,IAAI,GAAI,CACjG,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/userDropdown/UserDropdown.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export type UserDropdownUser = {
+    name: string;
+    subtitle?: string;
+    avatarSrc?: string;
+    avatarAlt?: string;
+    avatarInitials?: string;
+};
+export type UserDropdownApp = {
+    logo?: React.ReactNode;
+    name: string;
+    description?: string;
+    onClick?: () => void;
+};
+export type UserDropdownSection = {
+    label?: string;
+    apps: UserDropdownApp[];
+};
+export type UserDropdownUserInfoAction = {
+    type: 'link';
+    onClick: () => void;
+} | {
+    type: 'menu';
+    items: Array<{
+        label: string;
+        onClick: () => void;
+    }>;
+};
+export type UserDropdownProps = {
+    user: UserDropdownUser;
+    logoSrc?: string;
+    logoAlt?: string;
+    sections?: UserDropdownSection[];
+    discoverSection?: {
+        label: string;
+        apps: UserDropdownApp[];
+        defaultOpen?: boolean;
+    };
+    userInfoAction?: UserDropdownUserInfoAction;
+    onSignOut: () => void;
+    signOutLabel?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    variant?: 'dark' | 'light';
+};
+export declare const UserDropdown: (props: UserDropdownProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserDropdown.d.ts.map

package/dist/components/userDropdown/UserDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/userDropdown/UserDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAChC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,GACrC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAA;CAAE,CAAC;AAE7E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,eAAe,CAAC,EAAE;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,eAAe,EAAE,CAAC;QACxB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CA2DpD,CAAC"}

package/dist/components/userDropdown/UserDropdown.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Dropdown } from '../dropdown/Dropdown';
+import { UserDropdownTrigger } from './internal/UserDropdownTrigger';
+import { UserDropdownUserInfo } from './internal/UserDropdownUserInfo';
+import { UserDropdownAppItem } from './internal/UserDropdownAppItem';
+import { UserDropdownCollapsibleSection } from './internal/UserDropdownCollapsibleSection';
+import { UserDropdownSignOut } from './internal/UserDropdownSignOut';
+export const UserDropdown = (props) => {
+    const { user, logoSrc, logoAlt, sections = [], discoverSection, userInfoAction, onSignOut, signOutLabel, open, onOpenChange, variant = 'dark', } = props;
+    return (_jsxs(Dropdown, { open: open, onOpenChange: onOpenChange, children: [_jsx(UserDropdownTrigger, { avatarSrc: user.avatarSrc, avatarAlt: user.avatarAlt, avatarInitials: user.avatarInitials, logoSrc: logoSrc, logoAlt: logoAlt, variant: variant }), _jsxs(Dropdown.Content, { className: "ds-user-dropdown__content", contentProps: { sideOffset: 12 }, children: [_jsx(UserDropdownUserInfo, { user: user, action: userInfoAction }), sections.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Dropdown.Separator, { className: "ds-user-dropdown__divider" }), sections.map((section, index) => (_jsxs(React.Fragment, { children: [section.label && _jsx("div", { className: "ds-user-dropdown__section-label", children: section.label }), _jsx(Dropdown.Group, { className: "ds-user-dropdown__section", children: section.apps.map((app, appIndex) => (_jsx(UserDropdownAppItem, { ...app }, appIndex))) })] }, index)))] })), discoverSection && (_jsx(UserDropdownCollapsibleSection, { label: discoverSection.label, apps: discoverSection.apps, defaultOpen: discoverSection.defaultOpen })), _jsx(Dropdown.Separator, { className: "ds-user-dropdown__divider" }), _jsx(UserDropdownSignOut, { onClick: onSignOut, label: signOutLabel })] })] }));
+};
+//# sourceMappingURL=UserDropdown.js.map

package/dist/components/userDropdown/UserDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserDropdown.js","sourceRoot":"","sources":["../../../src/components/userDropdown/UserDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,8BAA8B,EAAE,MAAM,2CAA2C,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AA4CrE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACvD,MAAM,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAQ,GAAG,EAAE,EACb,eAAe,EACf,cAAc,EACd,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,YAAY,EACZ,OAAO,GAAG,MAAM,GACjB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,aAC9C,KAAC,mBAAmB,IAClB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,EAEF,MAAC,QAAQ,CAAC,OAAO,IAAC,SAAS,EAAC,2BAA2B,EAAC,YAAY,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aACtF,KAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,GAAI,EAE3D,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACtB,8BACE,KAAC,QAAQ,CAAC,SAAS,IAAC,SAAS,EAAC,2BAA2B,GAAG,EAC3D,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,MAAC,KAAK,CAAC,QAAQ,eACZ,OAAO,CAAC,KAAK,IAAI,cAAK,SAAS,EAAC,iCAAiC,YAAE,OAAO,CAAC,KAAK,GAAO,EACxF,KAAC,QAAQ,CAAC,KAAK,IAAC,SAAS,EAAC,2BAA2B,YAClD,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CACnC,KAAC,mBAAmB,OAAoB,GAAG,IAAjB,QAAQ,CAAa,CAChD,CAAC,GACa,KANE,KAAK,CAOT,CAClB,CAAC,IACD,CACJ,EAEA,eAAe,IAAI,CAClB,KAAC,8BAA8B,IAC7B,KAAK,EAAE,eAAe,CAAC,KAAK,EAC5B,IAAI,EAAE,eAAe,CAAC,IAAI,EAC1B,WAAW,EAAE,eAAe,CAAC,WAAW,GACxC,CACH,EAED,KAAC,QAAQ,CAAC,SAAS,IAAC,SAAS,EAAC,2BAA2B,GAAG,EAE5D,KAAC,mBAAmB,IAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,GAAI,IAC/C,IACV,CACZ,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/userDropdown/UserDropdown.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { UserDropdown } from './UserDropdown';
+declare const meta: Meta<typeof UserDropdown>;
+type Story = StoryObj<typeof UserDropdown>;
+export declare const Default: Story;
+export declare const WithApps: Story;
+export declare const Minimal: Story;
+export declare const WithMenu: Story;
+export declare const DarkVariant: Story;
+export declare const LightVariant: Story;
+export default meta;
+//# sourceMappingURL=UserDropdown.stories.d.ts.map

package/dist/components/userDropdown/UserDropdown.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserDropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/userDropdown/UserDropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAInC,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAoB3C,eAAO,MAAM,OAAO,EAAE,KAkErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAkBtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkCzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkC1B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/userDropdown/UserDropdown.stories.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UserDropdown } from './UserDropdown';
+import { ArborLogo, GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from './assets/logos';
+const meta = {
+    title: 'Components/UserDropdown',
+    component: UserDropdown,
+    tags: ['autodocs'],
+};
+// Mock avatar image (placeholder)
+const avatarSrc = 'data:image/svg+xml,%3Csvg width="32" height="32" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="16" cy="16" r="16" fill="%233cad51"/%3E%3Ctext x="16" y="21" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle"%3ECM%3C/text%3E%3C/svg%3E';
+// Import real logos from assets
+const logoArborWorkflows = ArborLogo;
+const logoGovernorHub = GovhubLogo;
+const logoTheKey = KeyLogo;
+const logoRobin = RobinLogo;
+const logoSamPeople = SampeopleLogo;
+const logoTimetabler = TimetablerLogo;
+const AppLogo = ({ src, alt }) => (_jsx("img", { src: src, alt: alt, width: 24, height: 24, style: { objectFit: 'contain' } }));
+// Mock company logo SVG
+const mockLogoSrc = 'data:image/svg+xml,%3Csvg width="50" height="30" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="50" height="30" rx="4" fill="%233cad51"/%3E%3Ctext x="25" y="20" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle"%3ELogo%3C/text%3E%3C/svg%3E';
+export const Default = {
+    args: {
+        user: {
+            name: 'Christine Montgomery-Smith',
+            subtitle: 'Business Manager',
+            avatarSrc,
+            avatarAlt: 'Christine Montgomery-Smith',
+        },
+        logoSrc: mockLogoSrc,
+        logoAlt: 'Arbor',
+        sections: [
+            {
+                label: 'My Apps',
+                apps: [
+                    {
+                        logo: _jsx(AppLogo, { src: logoArborWorkflows, alt: "Arbor Workflows" }),
+                        name: 'Arbor Workflows',
+                        onClick: () => { console.log('Open Arbor Workflows'); },
+                    },
+                    {
+                        logo: _jsx(AppLogo, { src: logoGovernorHub, alt: "GovernorHub" }),
+                        name: 'GovernorHub',
+                        onClick: () => { console.log('Open GovernorHub'); },
+                    },
+                    {
+                        logo: _jsx(AppLogo, { src: logoTheKey, alt: "The Key" }),
+                        name: 'The Key',
+                        onClick: () => { console.log('Open The Key'); },
+                    },
+                ],
+            },
+        ],
+        discoverSection: {
+            label: 'Discover the Arbor suite',
+            defaultOpen: true,
+            apps: [
+                {
+                    logo: _jsx(AppLogo, { src: logoArborWorkflows, alt: "Arbor Finance" }),
+                    name: 'Arbor Finance',
+                    description: 'Cloud-based accounting',
+                    onClick: () => { console.log('Open Arbor Finance'); },
+                },
+                {
+                    logo: _jsx(AppLogo, { src: logoRobin, alt: "Robin" }),
+                    name: 'Robin',
+                    description: 'AI website compliance checks',
+                    onClick: () => { console.log('Open Robin'); },
+                },
+                {
+                    logo: _jsx(AppLogo, { src: logoSamPeople, alt: "SAMPeople" }),
+                    name: 'SAMPeople',
+                    description: 'HR and recruitment',
+                    onClick: () => { console.log('Open SAMPeople'); },
+                },
+                {
+                    logo: _jsx(AppLogo, { src: logoTimetabler, alt: "Timetabler" }),
+                    name: 'Timetabler',
+                    description: 'Schedule timetables and more',
+                    onClick: () => { console.log('Open Timetabler'); },
+                },
+            ],
+        },
+        userInfoAction: { type: 'link', onClick: () => { console.log('View profile'); } },
+        onSignOut: () => { console.log('Sign out'); },
+        signOutLabel: 'Sign out of Arbor',
+    },
+};
+export const WithApps = {
+    args: {
+        user: {
+            name: 'Christine Montgomery-Smith',
+            subtitle: 'Business Manager',
+            avatarInitials: 'CM',
+        },
+        sections: [
+            {
+                label: 'Quick Actions',
+                apps: [
+                    { name: 'Settings', onClick: () => { console.log('Settings'); } },
+                    { name: 'Help', onClick: () => { console.log('Help'); } },
+                ],
+            },
+        ],
+        onSignOut: () => { console.log('Sign out'); },
+    },
+};
+export const Minimal = {
+    args: {
+        user: {
+            name: 'Christine Montgomery',
+            avatarInitials: 'CM',
+            avatarAlt: 'Christine Montgomery',
+        },
+        onSignOut: () => { console.log('Sign out'); },
+    },
+};
+export const WithMenu = {
+    args: {
+        user: {
+            name: 'Christine Montgomery-Smith',
+            subtitle: 'Business Manager',
+            avatarSrc,
+            avatarAlt: 'Christine Montgomery-Smith',
+        },
+        logoSrc: mockLogoSrc,
+        logoAlt: 'Arbor',
+        sections: [
+            {
+                label: 'My Apps',
+                apps: [
+                    {
+                        logo: _jsx(AppLogo, { src: logoArborWorkflows, alt: "Arbor Workflows" }),
+                        name: 'Arbor Workflows',
+                        onClick: () => { console.log('Open Arbor Workflows'); },
+                    },
+                ],
+            },
+        ],
+        userInfoAction: {
+            type: 'menu',
+            items: [
+                { label: 'Help centre', onClick: () => { console.log('Help centre'); } },
+                { label: 'About', onClick: () => { console.log('About'); } },
+                { label: 'Leave feedback', onClick: () => { console.log('Leave feedback'); } },
+            ],
+        },
+        onSignOut: () => { console.log('Sign out'); },
+        signOutLabel: 'Sign out of Arbor',
+    },
+};
+export const DarkVariant = {
+    args: {
+        user: {
+            name: 'Christine Montgomery-Smith',
+            subtitle: 'Business Manager',
+            avatarSrc,
+            avatarAlt: 'Christine Montgomery-Smith',
+        },
+        logoSrc: mockLogoSrc,
+        logoAlt: 'Arbor',
+        variant: 'dark',
+        sections: [
+            {
+                label: 'My Apps',
+                apps: [
+                    {
+                        logo: _jsx(AppLogo, { src: logoArborWorkflows, alt: "Arbor Workflows" }),
+                        name: 'Arbor Workflows',
+                        onClick: () => { console.log('Open Arbor Workflows'); },
+                    },
+                ],
+            },
+        ],
+        onSignOut: () => { console.log('Sign out'); },
+        signOutLabel: 'Sign out of Arbor',
+    },
+    parameters: {
+        backgrounds: {
+            default: 'dark',
+            values: [
+                { name: 'dark', value: '#2f2f2f' },
+            ],
+        },
+    },
+};
+export const LightVariant = {
+    args: {
+        user: {
+            name: 'Christine Montgomery-Smith',
+            subtitle: 'Business Manager',
+            avatarSrc,
+            avatarAlt: 'Christine Montgomery-Smith',
+        },
+        logoSrc: mockLogoSrc,
+        logoAlt: 'Arbor',
+        variant: 'light',
+        sections: [
+            {
+                label: 'My Apps',
+                apps: [
+                    {
+                        logo: _jsx(AppLogo, { src: logoArborWorkflows, alt: "Arbor Workflows" }),
+                        name: 'Arbor Workflows',
+                        onClick: () => { console.log('Open Arbor Workflows'); },
+                    },
+                ],
+            },
+        ],
+        onSignOut: () => { console.log('Sign out'); },
+        signOutLabel: 'Sign out of Arbor',
+    },
+    parameters: {
+        backgrounds: {
+            default: 'light',
+            values: [
+                { name: 'light', value: '#ffffff' },
+            ],
+        },
+    },
+};
+export default meta;
+//# sourceMappingURL=UserDropdown.stories.js.map