@nlabs/gothamui 1.8.0

package/lib/components/RadioField/RadioField.stories.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { gothamColors } from '../../utils/colorUtils.js';
+import { interactWithCanvas } from '../../utils/storyInteractions.js';
+import { RadioField } from './RadioField.js';
+const meta = {
+    argTypes: {
+        color: {
+            control: 'select',
+            description: 'The color of the radio group',
+            options: gothamColors
+        },
+        defaultValue: {
+            control: 'text',
+            description: 'The default selected value'
+        },
+        label: {
+            control: 'text',
+            description: 'The label text for the radio group'
+        },
+        name: {
+            control: 'text',
+            description: 'The name of the radio group'
+        },
+        optionClass: {
+            control: 'text',
+            description: 'The class name for the radio options'
+        },
+        options: {
+            control: 'object',
+            description: 'Array of radio options'
+        }
+    },
+    component: RadioField,
+    decorators: [
+        (Story)=>/*#__PURE__*/ _jsx("div", {
+                className: "p-4 max-w-md",
+                children: /*#__PURE__*/ _jsx(Story, {})
+            })
+    ],
+    parameters: {
+        backgrounds: {
+            default: 'light',
+            values: [
+                {
+                    name: 'light',
+                    value: '#ffffff'
+                },
+                {
+                    name: 'dark',
+                    value: '#1a1a1a'
+                }
+            ]
+        },
+        layout: 'centered'
+    },
+    title: 'Components/Form/RadioField'
+};
+export default meta;
+const defaultOptions = [
+    {
+        description: 'This is the first option description',
+        id: 'option1',
+        label: 'First Option',
+        value: '1'
+    },
+    {
+        description: 'This is the second option description',
+        id: 'option2',
+        label: 'Second Option',
+        value: '2'
+    },
+    {
+        description: 'This is the third option description',
+        id: 'option3',
+        label: 'Third Option',
+        value: '3'
+    }
+];
+export const Default = {
+    args: {
+        label: 'Choose a Color',
+        name: 'colorSelection',
+        options: [
+            {
+                id: 'red',
+                label: 'Red',
+                value: 'red'
+            },
+            {
+                id: 'blue',
+                label: 'Blue',
+                value: 'blue'
+            },
+            {
+                id: 'green',
+                label: 'Green',
+                value: 'green'
+            }
+        ]
+    },
+    play: interactWithCanvas
+};
+export const WithDefaultValue = {
+    args: {
+        defaultValue: '2',
+        label: 'Select an Option',
+        name: 'radioGroupWithDefault',
+        options: defaultOptions
+    },
+    play: interactWithCanvas
+};
+export const WithLongDescriptions = {
+    args: {
+        label: 'Select a Plan',
+        name: 'planSelection',
+        options: [
+            {
+                description: 'Perfect for individuals and small projects. Includes basic features and support.',
+                id: 'basic',
+                label: 'Basic Plan',
+                value: 'basic'
+            },
+            {
+                description: 'Ideal for growing businesses. Includes advanced features, priority support, and team collaboration tools.',
+                id: 'pro',
+                label: 'Professional Plan',
+                value: 'pro'
+            },
+            {
+                description: 'Enterprise-grade solution with all features, dedicated support, and custom integrations.',
+                id: 'enterprise',
+                label: 'Enterprise Plan',
+                value: 'enterprise'
+            }
+        ]
+    },
+    play: interactWithCanvas
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1JhZGlvRmllbGQvUmFkaW9GaWVsZC5zdG9yaWVzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge2dvdGhhbUNvbG9yc30gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JVdGlscy5qcyc7XG5pbXBvcnQge2ludGVyYWN0V2l0aENhbnZhc30gZnJvbSAnLi4vLi4vdXRpbHMvc3RvcnlJbnRlcmFjdGlvbnMuanMnO1xuaW1wb3J0IHtSYWRpb0ZpZWxkfSBmcm9tICcuL1JhZGlvRmllbGQuanMnO1xuXG5pbXBvcnQgdHlwZSB7TWV0YSwgU3RvcnlPYmp9IGZyb20gJ0BubGFicy9sZXgvc3Rvcnlib29rJztcblxuY29uc3QgbWV0YTogTWV0YTx0eXBlb2YgUmFkaW9GaWVsZD4gPSB7XG4gIGFyZ1R5cGVzOiB7XG4gICAgY29sb3I6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgZGVzY3JpcHRpb246ICdUaGUgY29sb3Igb2YgdGhlIHJhZGlvIGdyb3VwJyxcbiAgICAgIG9wdGlvbnM6IGdvdGhhbUNvbG9yc1xuICAgIH0sXG4gICAgZGVmYXVsdFZhbHVlOiB7XG4gICAgICBjb250cm9sOiAndGV4dCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ1RoZSBkZWZhdWx0IHNlbGVjdGVkIHZhbHVlJ1xuICAgIH0sXG4gICAgbGFiZWw6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGxhYmVsIHRleHQgZm9yIHRoZSByYWRpbyBncm91cCdcbiAgICB9LFxuICAgIG5hbWU6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIG5hbWUgb2YgdGhlIHJhZGlvIGdyb3VwJ1xuICAgIH0sXG4gICAgb3B0aW9uQ2xhc3M6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGNsYXNzIG5hbWUgZm9yIHRoZSByYWRpbyBvcHRpb25zJ1xuICAgIH0sXG4gICAgb3B0aW9uczoge1xuICAgICAgY29udHJvbDogJ29iamVjdCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ0FycmF5IG9mIHJhZGlvIG9wdGlvbnMnXG4gICAgfVxuICB9LFxuICBjb21wb25lbnQ6IFJhZGlvRmllbGQsXG4gIGRlY29yYXRvcnM6IFtcbiAgICAoU3RvcnkpID0+IChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwicC00IG1heC13LW1kXCI+XG4gICAgICAgIDxTdG9yeSAvPlxuICAgICAgPC9kaXY+XG4gICAgKVxuICBdLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgYmFja2dyb3VuZHM6IHtcbiAgICAgIGRlZmF1bHQ6ICdsaWdodCcsXG4gICAgICB2YWx1ZXM6IFtcbiAgICAgICAge25hbWU6ICdsaWdodCcsIHZhbHVlOiAnI2ZmZmZmZid9LFxuICAgICAgICB7bmFtZTogJ2RhcmsnLCB2YWx1ZTogJyMxYTFhMWEnfVxuICAgICAgXVxuICAgIH0sXG4gICAgbGF5b3V0OiAnY2VudGVyZWQnXG4gIH0sXG4gIHRpdGxlOiAnQ29tcG9uZW50cy9Gb3JtL1JhZGlvRmllbGQnXG59O1xuXG5leHBvcnQgZGVmYXVsdCBtZXRhO1xudHlwZSBTdG9yeSA9IFN0b3J5T2JqPHR5cGVvZiBSYWRpb0ZpZWxkPjtcblxuY29uc3QgZGVmYXVsdE9wdGlvbnMgPSBbXG4gIHtcbiAgICBkZXNjcmlwdGlvbjogJ1RoaXMgaXMgdGhlIGZpcnN0IG9wdGlvbiBkZXNjcmlwdGlvbicsXG4gICAgaWQ6ICdvcHRpb24xJyxcbiAgICBsYWJlbDogJ0ZpcnN0IE9wdGlvbicsXG4gICAgdmFsdWU6ICcxJ1xuICB9LFxuICB7XG4gICAgZGVzY3JpcHRpb246ICdUaGlzIGlzIHRoZSBzZWNvbmQgb3B0aW9uIGRlc2NyaXB0aW9uJyxcbiAgICBpZDogJ29wdGlvbjInLFxuICAgIGxhYmVsOiAnU2Vjb25kIE9wdGlvbicsXG4gICAgdmFsdWU6ICcyJ1xuICB9LFxuICB7XG4gICAgZGVzY3JpcHRpb246ICdUaGlzIGlzIHRoZSB0aGlyZCBvcHRpb24gZGVzY3JpcHRpb24nLFxuICAgIGlkOiAnb3B0aW9uMycsXG4gICAgbGFiZWw6ICdUaGlyZCBPcHRpb24nLFxuICAgIHZhbHVlOiAnMydcbiAgfVxuXTtcblxuXG5leHBvcnQgY29uc3QgRGVmYXVsdDogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBsYWJlbDogJ0Nob29zZSBhIENvbG9yJyxcbiAgICBuYW1lOiAnY29sb3JTZWxlY3Rpb24nLFxuICAgIG9wdGlvbnM6IFtcbiAgICAgIHtcbiAgICAgICAgaWQ6ICdyZWQnLFxuICAgICAgICBsYWJlbDogJ1JlZCcsXG4gICAgICAgIHZhbHVlOiAncmVkJ1xuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaWQ6ICdibHVlJyxcbiAgICAgICAgbGFiZWw6ICdCbHVlJyxcbiAgICAgICAgdmFsdWU6ICdibHVlJ1xuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaWQ6ICdncmVlbicsXG4gICAgICAgIGxhYmVsOiAnR3JlZW4nLFxuICAgICAgICB2YWx1ZTogJ2dyZWVuJ1xuICAgICAgfVxuICAgIF1cbiAgfSxcbiAgcGxheTogaW50ZXJhY3RXaXRoQ2FudmFzXG59O1xuXG5leHBvcnQgY29uc3QgV2l0aERlZmF1bHRWYWx1ZTogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBkZWZhdWx0VmFsdWU6ICcyJyxcbiAgICBsYWJlbDogJ1NlbGVjdCBhbiBPcHRpb24nLFxuICAgIG5hbWU6ICdyYWRpb0dyb3VwV2l0aERlZmF1bHQnLFxuICAgIG9wdGlvbnM6IGRlZmF1bHRPcHRpb25zXG4gIH0sXG4gIHBsYXk6IGludGVyYWN0V2l0aENhbnZhc1xufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhMb25nRGVzY3JpcHRpb25zOiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGxhYmVsOiAnU2VsZWN0IGEgUGxhbicsXG4gICAgbmFtZTogJ3BsYW5TZWxlY3Rpb24nLFxuICAgIG9wdGlvbnM6IFtcbiAgICAgIHtcbiAgICAgICAgZGVzY3JpcHRpb246ICdQZXJmZWN0IGZvciBpbmRpdmlkdWFscyBhbmQgc21hbGwgcHJvamVjdHMuIEluY2x1ZGVzIGJhc2ljIGZlYXR1cmVzIGFuZCBzdXBwb3J0LicsXG4gICAgICAgIGlkOiAnYmFzaWMnLFxuICAgICAgICBsYWJlbDogJ0Jhc2ljIFBsYW4nLFxuICAgICAgICB2YWx1ZTogJ2Jhc2ljJ1xuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgZGVzY3JpcHRpb246ICdJZGVhbCBmb3IgZ3Jvd2luZyBidXNpbmVzc2VzLiBJbmNsdWRlcyBhZHZhbmNlZCBmZWF0dXJlcywgcHJpb3JpdHkgc3VwcG9ydCwgYW5kIHRlYW0gY29sbGFib3JhdGlvbiB0b29scy4nLFxuICAgICAgICBpZDogJ3BybycsXG4gICAgICAgIGxhYmVsOiAnUHJvZmVzc2lvbmFsIFBsYW4nLFxuICAgICAgICB2YWx1ZTogJ3BybydcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIGRlc2NyaXB0aW9uOiAnRW50ZXJwcmlzZS1ncmFkZSBzb2x1dGlvbiB3aXRoIGFsbCBmZWF0dXJlcywgZGVkaWNhdGVkIHN1cHBvcnQsIGFuZCBjdXN0b20gaW50ZWdyYXRpb25zLicsXG4gICAgICAgIGlkOiAnZW50ZXJwcmlzZScsXG4gICAgICAgIGxhYmVsOiAnRW50ZXJwcmlzZSBQbGFuJyxcbiAgICAgICAgdmFsdWU6ICdlbnRlcnByaXNlJ1xuICAgICAgfVxuICAgIF1cbiAgfSxcbiAgcGxheTogaW50ZXJhY3RXaXRoQ2FudmFzXG59O1xuIl0sIm5hbWVzIjpbImdvdGhhbUNvbG9ycyIsImludGVyYWN0V2l0aENhbnZhcyIsIlJhZGlvRmllbGQiLCJtZXRhIiwiYXJnVHlwZXMiLCJjb2xvciIsImNvbnRyb2wiLCJkZXNjcmlwdGlvbiIsIm9wdGlvbnMiLCJkZWZhdWx0VmFsdWUiLCJsYWJlbCIsIm5hbWUiLCJvcHRpb25DbGFzcyIsImNvbXBvbmVudCIsImRlY29yYXRvcnMiLCJTdG9yeSIsImRpdiIsImNsYXNzTmFtZSIsInBhcmFtZXRlcnMiLCJiYWNrZ3JvdW5kcyIsImRlZmF1bHQiLCJ2YWx1ZXMiLCJ2YWx1ZSIsImxheW91dCIsInRpdGxlIiwiZGVmYXVsdE9wdGlvbnMiLCJpZCIsIkRlZmF1bHQiLCJhcmdzIiwicGxheSIsIldpdGhEZWZhdWx0VmFsdWUiLCJXaXRoTG9uZ0Rlc2NyaXB0aW9ucyJdLCJtYXBwaW5ncyI6IjtBQUFBLFNBQVFBLFlBQVksUUFBTyw0QkFBNEI7QUFDdkQsU0FBUUMsa0JBQWtCLFFBQU8sbUNBQW1DO0FBQ3BFLFNBQVFDLFVBQVUsUUFBTyxrQkFBa0I7QUFJM0MsTUFBTUMsT0FBZ0M7SUFDcENDLFVBQVU7UUFDUkMsT0FBTztZQUNMQyxTQUFTO1lBQ1RDLGFBQWE7WUFDYkMsU0FBU1I7UUFDWDtRQUNBUyxjQUFjO1lBQ1pILFNBQVM7WUFDVEMsYUFBYTtRQUNmO1FBQ0FHLE9BQU87WUFDTEosU0FBUztZQUNUQyxhQUFhO1FBQ2Y7UUFDQUksTUFBTTtZQUNKTCxTQUFTO1lBQ1RDLGFBQWE7UUFDZjtRQUNBSyxhQUFhO1lBQ1hOLFNBQVM7WUFDVEMsYUFBYTtRQUNmO1FBQ0FDLFNBQVM7WUFDUEYsU0FBUztZQUNUQyxhQUFhO1FBQ2Y7SUFDRjtJQUNBTSxXQUFXWDtJQUNYWSxZQUFZO1FBQ1YsQ0FBQ0Msc0JBQ0MsS0FBQ0M7Z0JBQUlDLFdBQVU7MEJBQ2IsY0FBQSxLQUFDRjs7S0FHTjtJQUNERyxZQUFZO1FBQ1ZDLGFBQWE7WUFDWEMsU0FBUztZQUNUQyxRQUFRO2dCQUNOO29CQUFDVixNQUFNO29CQUFTVyxPQUFPO2dCQUFTO2dCQUNoQztvQkFBQ1gsTUFBTTtvQkFBUVcsT0FBTztnQkFBUzthQUNoQztRQUNIO1FBQ0FDLFFBQVE7SUFDVjtJQUNBQyxPQUFPO0FBQ1Q7QUFFQSxlQUFlckIsS0FBSztBQUdwQixNQUFNc0IsaUJBQWlCO0lBQ3JCO1FBQ0VsQixhQUFhO1FBQ2JtQixJQUFJO1FBQ0poQixPQUFPO1FBQ1BZLE9BQU87SUFDVDtJQUNBO1FBQ0VmLGFBQWE7UUFDYm1CLElBQUk7UUFDSmhCLE9BQU87UUFDUFksT0FBTztJQUNUO0lBQ0E7UUFDRWYsYUFBYTtRQUNibUIsSUFBSTtRQUNKaEIsT0FBTztRQUNQWSxPQUFPO0lBQ1Q7Q0FDRDtBQUdELE9BQU8sTUFBTUssVUFBaUI7SUFDNUJDLE1BQU07UUFDSmxCLE9BQU87UUFDUEMsTUFBTTtRQUNOSCxTQUFTO1lBQ1A7Z0JBQ0VrQixJQUFJO2dCQUNKaEIsT0FBTztnQkFDUFksT0FBTztZQUNUO1lBQ0E7Z0JBQ0VJLElBQUk7Z0JBQ0poQixPQUFPO2dCQUNQWSxPQUFPO1lBQ1Q7WUFDQTtnQkFDRUksSUFBSTtnQkFDSmhCLE9BQU87Z0JBQ1BZLE9BQU87WUFDVDtTQUNEO0lBQ0g7SUFDQU8sTUFBTTVCO0FBQ1IsRUFBRTtBQUVGLE9BQU8sTUFBTTZCLG1CQUEwQjtJQUNyQ0YsTUFBTTtRQUNKbkIsY0FBYztRQUNkQyxPQUFPO1FBQ1BDLE1BQU07UUFDTkgsU0FBU2lCO0lBQ1g7SUFDQUksTUFBTTVCO0FBQ1IsRUFBRTtBQUVGLE9BQU8sTUFBTThCLHVCQUE4QjtJQUN6Q0gsTUFBTTtRQUNKbEIsT0FBTztRQUNQQyxNQUFNO1FBQ05ILFNBQVM7WUFDUDtnQkFDRUQsYUFBYTtnQkFDYm1CLElBQUk7Z0JBQ0poQixPQUFPO2dCQUNQWSxPQUFPO1lBQ1Q7WUFDQTtnQkFDRWYsYUFBYTtnQkFDYm1CLElBQUk7Z0JBQ0poQixPQUFPO2dCQUNQWSxPQUFPO1lBQ1Q7WUFDQTtnQkFDRWYsYUFBYTtnQkFDYm1CLElBQUk7Z0JBQ0poQixPQUFPO2dCQUNQWSxPQUFPO1lBQ1Q7U0FDRDtJQUNIO0lBQ0FPLE1BQU01QjtBQUNSLEVBQUUifQ==

package/lib/components/ReviewList/ReviewList.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ReviewItem {
+    readonly author: string;
+    readonly avatarSrc?: string;
+    readonly body: ReactNode;
+    readonly id?: string | number;
+    readonly rating?: number;
+    readonly title?: ReactNode;
+}
+export interface ReviewListProps extends HTMLAttributes<HTMLDivElement> {
+    readonly reviews: ReviewItem[];
+}
+declare const ReviewListComponent: ({ className, reviews, ...props }: ReviewListProps) => import("react").JSX.Element;
+export declare const ReviewList: import("react").MemoExoticComponent<typeof ReviewListComponent>;
+export {};

package/lib/components/ReviewList/ReviewList.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@nlabs/utils';
+import { Star } from 'lucide-react';
+import { memo } from 'react';
+import { Avatar } from '../Avatar/Avatar.js';
+const ReviewListComponent = ({ className, reviews, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('grid grid-cols-1 gap-6 lg:grid-cols-2', className),
+        "data-slot": "review-list",
+        ...props,
+        children: reviews.map((review)=>/*#__PURE__*/ _jsxs("figure", {
+                className: "rounded-lg border border-border bg-card p-6 shadow-sm dark:border-border-dark dark:bg-card-dark",
+                children: [
+                    typeof review.rating === 'number' ? /*#__PURE__*/ _jsx("div", {
+                        "aria-label": `${review.rating} out of 5 stars`,
+                        className: "flex gap-1 text-primary dark:text-primary-dark",
+                        children: Array.from({
+                            length: 5
+                        }, (_, index)=>/*#__PURE__*/ _jsx(Star, {
+                                "aria-hidden": "true",
+                                className: cn('size-4', index < review.rating ? 'fill-current' : 'opacity-25')
+                            }, index))
+                    }) : null,
+                    review.title ? /*#__PURE__*/ _jsx("h3", {
+                        className: "mt-4 text-base font-semibold text-foreground dark:text-foreground-dark",
+                        children: review.title
+                    }) : null,
+                    /*#__PURE__*/ _jsx("blockquote", {
+                        className: "mt-3 text-sm/6 text-muted-foreground dark:text-muted-foreground-dark",
+                        children: review.body
+                    }),
+                    /*#__PURE__*/ _jsxs("figcaption", {
+                        className: "mt-6 flex items-center gap-3",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                initials: review.author.slice(0, 2).toUpperCase(),
+                                size: "sm",
+                                src: review.avatarSrc
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-sm font-medium text-foreground dark:text-foreground-dark",
+                                children: review.author
+                            })
+                        ]
+                    })
+                ]
+            }, review.id ?? review.author))
+    });
+export const ReviewList = /*#__PURE__*/ memo(ReviewListComponent);
+ReviewList.displayName = 'ReviewList';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1Jldmlld0xpc3QvUmV2aWV3TGlzdC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtjbn0gZnJvbSAnQG5sYWJzL3V0aWxzJztcbmltcG9ydCB7U3Rhcn0gZnJvbSAnbHVjaWRlLXJlYWN0JztcbmltcG9ydCB7bWVtb30gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge0F2YXRhcn0gZnJvbSAnLi4vQXZhdGFyL0F2YXRhci5qcyc7XG5cbmltcG9ydCB0eXBlIHtIVE1MQXR0cmlidXRlcywgUmVhY3ROb2RlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUmV2aWV3SXRlbSB7XG4gIHJlYWRvbmx5IGF1dGhvcjogc3RyaW5nO1xuICByZWFkb25seSBhdmF0YXJTcmM/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IGJvZHk6IFJlYWN0Tm9kZTtcbiAgcmVhZG9ubHkgaWQ/OiBzdHJpbmcgfCBudW1iZXI7XG4gIHJlYWRvbmx5IHJhdGluZz86IG51bWJlcjtcbiAgcmVhZG9ubHkgdGl0bGU/OiBSZWFjdE5vZGU7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgUmV2aWV3TGlzdFByb3BzIGV4dGVuZHMgSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+IHtcbiAgcmVhZG9ubHkgcmV2aWV3czogUmV2aWV3SXRlbVtdO1xufVxuXG5jb25zdCBSZXZpZXdMaXN0Q29tcG9uZW50ID0gKHtcbiAgY2xhc3NOYW1lLFxuICByZXZpZXdzLFxuICAuLi5wcm9wc1xufTogUmV2aWV3TGlzdFByb3BzKSA9PiAoXG4gIDxkaXYgY2xhc3NOYW1lPXtjbignZ3JpZCBncmlkLWNvbHMtMSBnYXAtNiBsZzpncmlkLWNvbHMtMicsIGNsYXNzTmFtZSl9IGRhdGEtc2xvdD1cInJldmlldy1saXN0XCIgey4uLnByb3BzfT5cbiAgICB7cmV2aWV3cy5tYXAoKHJldmlldykgPT4gKFxuICAgICAgPGZpZ3VyZSBjbGFzc05hbWU9XCJyb3VuZGVkLWxnIGJvcmRlciBib3JkZXItYm9yZGVyIGJnLWNhcmQgcC02IHNoYWRvdy1zbSBkYXJrOmJvcmRlci1ib3JkZXItZGFyayBkYXJrOmJnLWNhcmQtZGFya1wiIGtleT17cmV2aWV3LmlkID8/IHJldmlldy5hdXRob3J9PlxuICAgICAgICB7dHlwZW9mIHJldmlldy5yYXRpbmcgPT09ICdudW1iZXInID8gKFxuICAgICAgICAgIDxkaXYgYXJpYS1sYWJlbD17YCR7cmV2aWV3LnJhdGluZ30gb3V0IG9mIDUgc3RhcnNgfSBjbGFzc05hbWU9XCJmbGV4IGdhcC0xIHRleHQtcHJpbWFyeSBkYXJrOnRleHQtcHJpbWFyeS1kYXJrXCI+XG4gICAgICAgICAgICB7QXJyYXkuZnJvbSh7bGVuZ3RoOiA1fSwgKF8sIGluZGV4KSA9PiAoXG4gICAgICAgICAgICAgIDxTdGFyXG4gICAgICAgICAgICAgICAgYXJpYS1oaWRkZW49XCJ0cnVlXCJcbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NuKCdzaXplLTQnLCBpbmRleCA8IHJldmlldy5yYXRpbmchID8gJ2ZpbGwtY3VycmVudCcgOiAnb3BhY2l0eS0yNScpfVxuICAgICAgICAgICAgICAgIGtleT17aW5kZXh9XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICAgIHtyZXZpZXcudGl0bGUgPyA8aDMgY2xhc3NOYW1lPVwibXQtNCB0ZXh0LWJhc2UgZm9udC1zZW1pYm9sZCB0ZXh0LWZvcmVncm91bmQgZGFyazp0ZXh0LWZvcmVncm91bmQtZGFya1wiPntyZXZpZXcudGl0bGV9PC9oMz4gOiBudWxsfVxuICAgICAgICA8YmxvY2txdW90ZSBjbGFzc05hbWU9XCJtdC0zIHRleHQtc20vNiB0ZXh0LW11dGVkLWZvcmVncm91bmQgZGFyazp0ZXh0LW11dGVkLWZvcmVncm91bmQtZGFya1wiPntyZXZpZXcuYm9keX08L2Jsb2NrcXVvdGU+XG4gICAgICAgIDxmaWdjYXB0aW9uIGNsYXNzTmFtZT1cIm10LTYgZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTNcIj5cbiAgICAgICAgICA8QXZhdGFyIGluaXRpYWxzPXtyZXZpZXcuYXV0aG9yLnNsaWNlKDAsIDIpLnRvVXBwZXJDYXNlKCl9IHNpemU9XCJzbVwiIHNyYz17cmV2aWV3LmF2YXRhclNyY30gLz5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9XCJ0ZXh0LXNtIGZvbnQtbWVkaXVtIHRleHQtZm9yZWdyb3VuZCBkYXJrOnRleHQtZm9yZWdyb3VuZC1kYXJrXCI+e3Jldmlldy5hdXRob3J9PC9zcGFuPlxuICAgICAgICA8L2ZpZ2NhcHRpb24+XG4gICAgICA8L2ZpZ3VyZT5cbiAgICApKX1cbiAgPC9kaXY+XG4pO1xuXG5leHBvcnQgY29uc3QgUmV2aWV3TGlzdCA9IG1lbW8oUmV2aWV3TGlzdENvbXBvbmVudCk7XG5SZXZpZXdMaXN0LmRpc3BsYXlOYW1lID0gJ1Jldmlld0xpc3QnO1xuIl0sIm5hbWVzIjpbImNuIiwiU3RhciIsIm1lbW8iLCJBdmF0YXIiLCJSZXZpZXdMaXN0Q29tcG9uZW50IiwiY2xhc3NOYW1lIiwicmV2aWV3cyIsInByb3BzIiwiZGl2IiwiZGF0YS1zbG90IiwibWFwIiwicmV2aWV3IiwiZmlndXJlIiwicmF0aW5nIiwiYXJpYS1sYWJlbCIsIkFycmF5IiwiZnJvbSIsImxlbmd0aCIsIl8iLCJpbmRleCIsImFyaWEtaGlkZGVuIiwidGl0bGUiLCJoMyIsImJsb2NrcXVvdGUiLCJib2R5IiwiZmlnY2FwdGlvbiIsImluaXRpYWxzIiwiYXV0aG9yIiwic2xpY2UiLCJ0b1VwcGVyQ2FzZSIsInNpemUiLCJzcmMiLCJhdmF0YXJTcmMiLCJzcGFuIiwiaWQiLCJSZXZpZXdMaXN0IiwiZGlzcGxheU5hbWUiXSwibWFwcGluZ3MiOiI7QUFBQSxTQUFRQSxFQUFFLFFBQU8sZUFBZTtBQUNoQyxTQUFRQyxJQUFJLFFBQU8sZUFBZTtBQUNsQyxTQUFRQyxJQUFJLFFBQU8sUUFBUTtBQUUzQixTQUFRQyxNQUFNLFFBQU8sc0JBQXNCO0FBaUIzQyxNQUFNQyxzQkFBc0IsQ0FBQyxFQUMzQkMsU0FBUyxFQUNUQyxPQUFPLEVBQ1AsR0FBR0MsT0FDYSxpQkFDaEIsS0FBQ0M7UUFBSUgsV0FBV0wsR0FBRyx5Q0FBeUNLO1FBQVlJLGFBQVU7UUFBZSxHQUFHRixLQUFLO2tCQUN0R0QsUUFBUUksR0FBRyxDQUFDLENBQUNDLHVCQUNaLE1BQUNDO2dCQUFPUCxXQUFVOztvQkFDZixPQUFPTSxPQUFPRSxNQUFNLEtBQUsseUJBQ3hCLEtBQUNMO3dCQUFJTSxjQUFZLEdBQUdILE9BQU9FLE1BQU0sQ0FBQyxlQUFlLENBQUM7d0JBQUVSLFdBQVU7a0NBQzNEVSxNQUFNQyxJQUFJLENBQUM7NEJBQUNDLFFBQVE7d0JBQUMsR0FBRyxDQUFDQyxHQUFHQyxzQkFDM0IsS0FBQ2xCO2dDQUNDbUIsZUFBWTtnQ0FDWmYsV0FBV0wsR0FBRyxVQUFVbUIsUUFBUVIsT0FBT0UsTUFBTSxHQUFJLGlCQUFpQjsrQkFDN0RNO3lCQUlUO29CQUNIUixPQUFPVSxLQUFLLGlCQUFHLEtBQUNDO3dCQUFHakIsV0FBVTtrQ0FBMEVNLE9BQU9VLEtBQUs7eUJBQVM7a0NBQzdILEtBQUNFO3dCQUFXbEIsV0FBVTtrQ0FBd0VNLE9BQU9hLElBQUk7O2tDQUN6RyxNQUFDQzt3QkFBV3BCLFdBQVU7OzBDQUNwQixLQUFDRjtnQ0FBT3VCLFVBQVVmLE9BQU9nQixNQUFNLENBQUNDLEtBQUssQ0FBQyxHQUFHLEdBQUdDLFdBQVc7Z0NBQUlDLE1BQUs7Z0NBQUtDLEtBQUtwQixPQUFPcUIsU0FBUzs7MENBQzFGLEtBQUNDO2dDQUFLNUIsV0FBVTswQ0FBaUVNLE9BQU9nQixNQUFNOzs7OztlQWhCdUJoQixPQUFPdUIsRUFBRSxJQUFJdkIsT0FBT2dCLE1BQU07O0FBdUJ6SixPQUFPLE1BQU1RLDJCQUFhakMsS0FBS0UscUJBQXFCO0FBQ3BEK0IsV0FBV0MsV0FBVyxHQUFHIn0=

package/lib/components/ReviewList/ReviewList.stories.js

@@ -0,0 +1,29 @@
+import { ReviewList } from './ReviewList.js';
+const meta = {
+    component: ReviewList,
+    parameters: {
+        layout: 'padded'
+    },
+    title: 'Ecommerce/ReviewList'
+};
+export default meta;
+export const MultiColumn = {
+    args: {
+        reviews: [
+            {
+                author: 'Judith Black',
+                body: 'The quality is excellent and the packaging feels considered.',
+                rating: 5,
+                title: 'Worth it'
+            },
+            {
+                author: 'Leslie Alexander',
+                body: 'Beautiful details, quick shipping, and easy checkout.',
+                rating: 4,
+                title: 'Great experience'
+            }
+        ]
+    }
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1Jldmlld0xpc3QvUmV2aWV3TGlzdC5zdG9yaWVzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1Jldmlld0xpc3R9IGZyb20gJy4vUmV2aWV3TGlzdC5qcyc7XG5cbmltcG9ydCB0eXBlIHtNZXRhLCBTdG9yeU9ian0gZnJvbSAnQG5sYWJzL2xleC9zdG9yeWJvb2snO1xuXG5jb25zdCBtZXRhOiBNZXRhPHR5cGVvZiBSZXZpZXdMaXN0PiA9IHtcbiAgY29tcG9uZW50OiBSZXZpZXdMaXN0LFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAncGFkZGVkJ1xuICB9LFxuICB0aXRsZTogJ0Vjb21tZXJjZS9SZXZpZXdMaXN0J1xufTtcblxuZXhwb3J0IGRlZmF1bHQgbWV0YTtcblxudHlwZSBTdG9yeSA9IFN0b3J5T2JqPHR5cGVvZiBSZXZpZXdMaXN0PjtcblxuZXhwb3J0IGNvbnN0IE11bHRpQ29sdW1uOiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIHJldmlld3M6IFtcbiAgICAgIHthdXRob3I6ICdKdWRpdGggQmxhY2snLCBib2R5OiAnVGhlIHF1YWxpdHkgaXMgZXhjZWxsZW50IGFuZCB0aGUgcGFja2FnaW5nIGZlZWxzIGNvbnNpZGVyZWQuJywgcmF0aW5nOiA1LCB0aXRsZTogJ1dvcnRoIGl0J30sXG4gICAgICB7YXV0aG9yOiAnTGVzbGllIEFsZXhhbmRlcicsIGJvZHk6ICdCZWF1dGlmdWwgZGV0YWlscywgcXVpY2sgc2hpcHBpbmcsIGFuZCBlYXN5IGNoZWNrb3V0LicsIHJhdGluZzogNCwgdGl0bGU6ICdHcmVhdCBleHBlcmllbmNlJ31cbiAgICBdXG4gIH1cbn07XG4iXSwibmFtZXMiOlsiUmV2aWV3TGlzdCIsIm1ldGEiLCJjb21wb25lbnQiLCJwYXJhbWV0ZXJzIiwibGF5b3V0IiwidGl0bGUiLCJNdWx0aUNvbHVtbiIsImFyZ3MiLCJyZXZpZXdzIiwiYXV0aG9yIiwiYm9keSIsInJhdGluZyJdLCJtYXBwaW5ncyI6IkFBQUEsU0FBUUEsVUFBVSxRQUFPLGtCQUFrQjtBQUkzQyxNQUFNQyxPQUFnQztJQUNwQ0MsV0FBV0Y7SUFDWEcsWUFBWTtRQUNWQyxRQUFRO0lBQ1Y7SUFDQUMsT0FBTztBQUNUO0FBRUEsZUFBZUosS0FBSztBQUlwQixPQUFPLE1BQU1LLGNBQXFCO0lBQ2hDQyxNQUFNO1FBQ0pDLFNBQVM7WUFDUDtnQkFBQ0MsUUFBUTtnQkFBZ0JDLE1BQU07Z0JBQWdFQyxRQUFRO2dCQUFHTixPQUFPO1lBQVU7WUFDM0g7Z0JBQUNJLFFBQVE7Z0JBQW9CQyxNQUFNO2dCQUF5REMsUUFBUTtnQkFBR04sT0FBTztZQUFrQjtTQUNqSTtJQUNIO0FBQ0YsRUFBRSJ9

package/lib/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    readonly actions?: ReactNode;
+    readonly align?: 'left' | 'center';
+    readonly eyebrow?: ReactNode;
+    readonly subtitle?: ReactNode;
+    readonly title: ReactNode;
+}
+export declare const SectionHeader: ({ actions, align, children, className, eyebrow, subtitle, title, ...props }: SectionHeaderProps) => import("react").JSX.Element;

package/lib/components/SectionHeader/SectionHeader.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@nlabs/utils';
+export const SectionHeader = ({ actions, align = 'left', children, className, eyebrow, subtitle, title, ...props })=>{
+    const actionClasses = actions && align === 'left' ? 'sm:max-w-none sm:flex-row sm:items-end sm:justify-between' : '';
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex flex-col gap-4', align === 'center' ? 'mx-auto max-w-3xl items-center text-center' : 'max-w-3xl', actionClasses, className),
+        "data-slot": "section-header",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn('min-w-0', align === 'center' && 'flex flex-col items-center'),
+                children: [
+                    eyebrow ? /*#__PURE__*/ _jsx("p", {
+                        className: "text-sm/6 font-semibold text-primary dark:text-primary-dark",
+                        children: eyebrow
+                    }) : null,
+                    /*#__PURE__*/ _jsx("h2", {
+                        className: "mt-2 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl dark:text-foreground-dark",
+                        children: title
+                    }),
+                    subtitle ? /*#__PURE__*/ _jsx("p", {
+                        className: "mt-4 text-base/7 text-muted-foreground dark:text-muted-foreground-dark",
+                        children: subtitle
+                    }) : null,
+                    children
+                ]
+            }),
+            actions ? /*#__PURE__*/ _jsx("div", {
+                className: "flex shrink-0 items-center gap-3",
+                children: actions
+            }) : null
+        ]
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1NlY3Rpb25IZWFkZXIvU2VjdGlvbkhlYWRlci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtjbn0gZnJvbSAnQG5sYWJzL3V0aWxzJztcblxuaW1wb3J0IHR5cGUge0hUTUxBdHRyaWJ1dGVzLCBSZWFjdE5vZGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGludGVyZmFjZSBTZWN0aW9uSGVhZGVyUHJvcHMgZXh0ZW5kcyBPbWl0PEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PiwgJ3RpdGxlJz4ge1xuICByZWFkb25seSBhY3Rpb25zPzogUmVhY3ROb2RlO1xuICByZWFkb25seSBhbGlnbj86ICdsZWZ0JyB8ICdjZW50ZXInO1xuICByZWFkb25seSBleWVicm93PzogUmVhY3ROb2RlO1xuICByZWFkb25seSBzdWJ0aXRsZT86IFJlYWN0Tm9kZTtcbiAgcmVhZG9ubHkgdGl0bGU6IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGNvbnN0IFNlY3Rpb25IZWFkZXIgPSAoe1xuICBhY3Rpb25zLFxuICBhbGlnbiA9ICdsZWZ0JyxcbiAgY2hpbGRyZW4sXG4gIGNsYXNzTmFtZSxcbiAgZXllYnJvdyxcbiAgc3VidGl0bGUsXG4gIHRpdGxlLFxuICAuLi5wcm9wc1xufTogU2VjdGlvbkhlYWRlclByb3BzKSA9PiB7XG4gIGNvbnN0IGFjdGlvbkNsYXNzZXMgPSBhY3Rpb25zICYmIGFsaWduID09PSAnbGVmdCdcbiAgICA/ICdzbTptYXgtdy1ub25lIHNtOmZsZXgtcm93IHNtOml0ZW1zLWVuZCBzbTpqdXN0aWZ5LWJldHdlZW4nXG4gICAgOiAnJztcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICdmbGV4IGZsZXgtY29sIGdhcC00JyxcbiAgICAgICAgYWxpZ24gPT09ICdjZW50ZXInID8gJ214LWF1dG8gbWF4LXctM3hsIGl0ZW1zLWNlbnRlciB0ZXh0LWNlbnRlcicgOiAnbWF4LXctM3hsJyxcbiAgICAgICAgYWN0aW9uQ2xhc3NlcyxcbiAgICAgICAgY2xhc3NOYW1lXG4gICAgICApfVxuICAgICAgZGF0YS1zbG90PVwic2VjdGlvbi1oZWFkZXJcIlxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtjbignbWluLXctMCcsIGFsaWduID09PSAnY2VudGVyJyAmJiAnZmxleCBmbGV4LWNvbCBpdGVtcy1jZW50ZXInKX0+XG4gICAgICAgIHtleWVicm93ID8gKFxuICAgICAgICAgIDxwIGNsYXNzTmFtZT1cInRleHQtc20vNiBmb250LXNlbWlib2xkIHRleHQtcHJpbWFyeSBkYXJrOnRleHQtcHJpbWFyeS1kYXJrXCI+e2V5ZWJyb3d9PC9wPlxuICAgICAgICApIDogbnVsbH1cbiAgICAgICAgPGgyIGNsYXNzTmFtZT1cIm10LTIgdGV4dC0zeGwgZm9udC1zZW1pYm9sZCB0cmFja2luZy10aWdodCB0ZXh0LWZvcmVncm91bmQgc206dGV4dC00eGwgZGFyazp0ZXh0LWZvcmVncm91bmQtZGFya1wiPlxuICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgPC9oMj5cbiAgICAgICAge3N1YnRpdGxlID8gKFxuICAgICAgICAgIDxwIGNsYXNzTmFtZT1cIm10LTQgdGV4dC1iYXNlLzcgdGV4dC1tdXRlZC1mb3JlZ3JvdW5kIGRhcms6dGV4dC1tdXRlZC1mb3JlZ3JvdW5kLWRhcmtcIj57c3VidGl0bGV9PC9wPlxuICAgICAgICApIDogbnVsbH1cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9kaXY+XG4gICAgICB7YWN0aW9ucyA/IDxkaXYgY2xhc3NOYW1lPVwiZmxleCBzaHJpbmstMCBpdGVtcy1jZW50ZXIgZ2FwLTNcIj57YWN0aW9uc308L2Rpdj4gOiBudWxsfVxuICAgIDwvZGl2PlxuICApO1xufTtcbiJdLCJuYW1lcyI6WyJjbiIsIlNlY3Rpb25IZWFkZXIiLCJhY3Rpb25zIiwiYWxpZ24iLCJjaGlsZHJlbiIsImNsYXNzTmFtZSIsImV5ZWJyb3ciLCJzdWJ0aXRsZSIsInRpdGxlIiwicHJvcHMiLCJhY3Rpb25DbGFzc2VzIiwiZGl2IiwiZGF0YS1zbG90IiwicCIsImgyIl0sIm1hcHBpbmdzIjoiO0FBQUEsU0FBUUEsRUFBRSxRQUFPLGVBQWU7QUFZaEMsT0FBTyxNQUFNQyxnQkFBZ0IsQ0FBQyxFQUM1QkMsT0FBTyxFQUNQQyxRQUFRLE1BQU0sRUFDZEMsUUFBUSxFQUNSQyxTQUFTLEVBQ1RDLE9BQU8sRUFDUEMsUUFBUSxFQUNSQyxLQUFLLEVBQ0wsR0FBR0MsT0FDZ0I7SUFDbkIsTUFBTUMsZ0JBQWdCUixXQUFXQyxVQUFVLFNBQ3ZDLDhEQUNBO0lBRUoscUJBQ0UsTUFBQ1E7UUFDQ04sV0FBV0wsR0FDVCx1QkFDQUcsVUFBVSxXQUFXLCtDQUErQyxhQUNwRU8sZUFDQUw7UUFFRk8sYUFBVTtRQUNULEdBQUdILEtBQUs7OzBCQUVULE1BQUNFO2dCQUFJTixXQUFXTCxHQUFHLFdBQVdHLFVBQVUsWUFBWTs7b0JBQ2pERyx3QkFDQyxLQUFDTzt3QkFBRVIsV0FBVTtrQ0FBK0RDO3lCQUMxRTtrQ0FDSixLQUFDUTt3QkFBR1QsV0FBVTtrQ0FDWEc7O29CQUVGRCx5QkFDQyxLQUFDTTt3QkFBRVIsV0FBVTtrQ0FBMEVFO3lCQUNyRjtvQkFDSEg7OztZQUVGRix3QkFBVSxLQUFDUztnQkFBSU4sV0FBVTswQkFBb0NIO2lCQUFpQjs7O0FBR3JGLEVBQUUifQ==

package/lib/components/SectionHeader/SectionHeader.stories.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { interactWithCanvas } from '../../utils/storyInteractions.js';
+import { Button } from '../Button/Button.js';
+import { SectionHeader } from './SectionHeader.js';
+const meta = {
+    component: SectionHeader,
+    parameters: {
+        layout: 'padded'
+    },
+    title: 'Marketing/Sections/SectionHeader'
+};
+export default meta;
+export const Default = {
+    args: {
+        eyebrow: 'Deploy faster',
+        subtitle: 'Composable section headers for marketing and application surfaces.',
+        title: 'Everything you need to ship'
+    },
+    play: interactWithCanvas
+};
+export const WithAction = {
+    play: interactWithCanvas,
+    render: ()=>/*#__PURE__*/ _jsx(SectionHeader, {
+            actions: /*#__PURE__*/ _jsx(Button, {
+                label: "View all",
+                size: "sm",
+                variant: "outlined"
+            }),
+            subtitle: "A compact page heading with a trailing action.",
+            title: "Recent activity"
+        })
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1NlY3Rpb25IZWFkZXIvU2VjdGlvbkhlYWRlci5zdG9yaWVzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge2ludGVyYWN0V2l0aENhbnZhc30gZnJvbSAnLi4vLi4vdXRpbHMvc3RvcnlJbnRlcmFjdGlvbnMuanMnO1xuaW1wb3J0IHtCdXR0b259IGZyb20gJy4uL0J1dHRvbi9CdXR0b24uanMnO1xuaW1wb3J0IHtTZWN0aW9uSGVhZGVyfSBmcm9tICcuL1NlY3Rpb25IZWFkZXIuanMnO1xuXG5pbXBvcnQgdHlwZSB7TWV0YSwgU3RvcnlPYmp9IGZyb20gJ0BubGFicy9sZXgvc3Rvcnlib29rJztcblxuY29uc3QgbWV0YTogTWV0YTx0eXBlb2YgU2VjdGlvbkhlYWRlcj4gPSB7XG4gIGNvbXBvbmVudDogU2VjdGlvbkhlYWRlcixcbiAgcGFyYW1ldGVyczoge1xuICAgIGxheW91dDogJ3BhZGRlZCdcbiAgfSxcbiAgdGl0bGU6ICdNYXJrZXRpbmcvU2VjdGlvbnMvU2VjdGlvbkhlYWRlcidcbn07XG5cbmV4cG9ydCBkZWZhdWx0IG1ldGE7XG5cbnR5cGUgU3RvcnkgPSBTdG9yeU9iajx0eXBlb2YgU2VjdGlvbkhlYWRlcj47XG5cbmV4cG9ydCBjb25zdCBEZWZhdWx0OiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGV5ZWJyb3c6ICdEZXBsb3kgZmFzdGVyJyxcbiAgICBzdWJ0aXRsZTogJ0NvbXBvc2FibGUgc2VjdGlvbiBoZWFkZXJzIGZvciBtYXJrZXRpbmcgYW5kIGFwcGxpY2F0aW9uIHN1cmZhY2VzLicsXG4gICAgdGl0bGU6ICdFdmVyeXRoaW5nIHlvdSBuZWVkIHRvIHNoaXAnXG4gIH0sXG4gIHBsYXk6IGludGVyYWN0V2l0aENhbnZhc1xufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhBY3Rpb246IFN0b3J5ID0ge1xuICBwbGF5OiBpbnRlcmFjdFdpdGhDYW52YXMsXG4gIHJlbmRlcjogKCkgPT4gKFxuICAgIDxTZWN0aW9uSGVhZGVyXG4gICAgICBhY3Rpb25zPXs8QnV0dG9uIGxhYmVsPVwiVmlldyBhbGxcIiBzaXplPVwic21cIiB2YXJpYW50PVwib3V0bGluZWRcIiAvPn1cbiAgICAgIHN1YnRpdGxlPVwiQSBjb21wYWN0IHBhZ2UgaGVhZGluZyB3aXRoIGEgdHJhaWxpbmcgYWN0aW9uLlwiXG4gICAgICB0aXRsZT1cIlJlY2VudCBhY3Rpdml0eVwiXG4gICAgLz5cbiAgKVxufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCIsImludGVyYWN0V2l0aENhbnZhcyIsIkJ1dHRvbiIsIlNlY3Rpb25IZWFkZXIiLCJtZXRhIiwiY29tcG9uZW50IiwicGFyYW1ldGVycyIsImxheW91dCIsInRpdGxlIiwiRGVmYXVsdCIsImFyZ3MiLCJleWVicm93Iiwic3VidGl0bGUiLCJwbGF5IiwiV2l0aEFjdGlvbiIsInJlbmRlciIsImFjdGlvbnMiLCJsYWJlbCIsInNpemUiLCJ2YXJpYW50Il0sIm1hcHBpbmdzIjoiO0FBQUEsT0FBT0EsV0FBVyxRQUFRO0FBRTFCLFNBQVFDLGtCQUFrQixRQUFPLG1DQUFtQztBQUNwRSxTQUFRQyxNQUFNLFFBQU8sc0JBQXNCO0FBQzNDLFNBQVFDLGFBQWEsUUFBTyxxQkFBcUI7QUFJakQsTUFBTUMsT0FBbUM7SUFDdkNDLFdBQVdGO0lBQ1hHLFlBQVk7UUFDVkMsUUFBUTtJQUNWO0lBQ0FDLE9BQU87QUFDVDtBQUVBLGVBQWVKLEtBQUs7QUFJcEIsT0FBTyxNQUFNSyxVQUFpQjtJQUM1QkMsTUFBTTtRQUNKQyxTQUFTO1FBQ1RDLFVBQVU7UUFDVkosT0FBTztJQUNUO0lBQ0FLLE1BQU1aO0FBQ1IsRUFBRTtBQUVGLE9BQU8sTUFBTWEsYUFBb0I7SUFDL0JELE1BQU1aO0lBQ05jLFFBQVEsa0JBQ04sS0FBQ1o7WUFDQ2EsdUJBQVMsS0FBQ2Q7Z0JBQU9lLE9BQU07Z0JBQVdDLE1BQUs7Z0JBQUtDLFNBQVE7O1lBQ3BEUCxVQUFTO1lBQ1RKLE9BQU07O0FBR1osRUFBRSJ9

package/lib/components/SelectField/SelectField.d.ts

@@ -0,0 +1,18 @@
+import { InputBorderType } from '../InputField/InputField.js';
+import { SelectFieldOption } from './SelectOption.js';
+import type { GothamColor } from '../../utils/colorUtils.js';
+export type SelectFieldProps = {
+    readonly backgroundColor?: GothamColor;
+    readonly borderColor?: GothamColor;
+    readonly borderType?: InputBorderType;
+    readonly className?: string;
+    readonly color?: GothamColor;
+    readonly defaultValue?: string;
+    readonly label?: string;
+    readonly labelColor?: GothamColor;
+    readonly labelClass?: string;
+    readonly name: string;
+    readonly options: SelectFieldOption[];
+    readonly showChevron?: boolean;
+};
+export declare const SelectField: import("react").NamedExoticComponent<SelectFieldProps>;

package/lib/components/SelectField/SelectField.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Listbox, ListboxButton, ListboxOptions } from '@headlessui/react';
+import { cn } from '@nlabs/utils';
+import { ChevronDown } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useIsMobile } from '../../hooks/useIsMobile.js';
+import { getBackgroundClasses, getOutlineClasses, getTextClasses } from '../../utils/colorUtils.js';
+import { useGothamFormField } from '../Form/FormContext.js';
+import { getInputBorderClass } from '../InputField/InputField.js';
+import { Svg } from '../Svg/Svg.js';
+import { SelectOption } from './SelectOption.js';
+const SelectFieldComponent = ({ backgroundColor = 'transparent', borderColor = 'black', borderType = 'solid', className = 'cursor-default grid outline-1 w-full grid-cols-1 rounded-md px-3.5 py-2 text-left sm:text-sm/6', color = 'primary', defaultValue, label, labelClass, labelColor = 'neutral', name, options, showChevron = true })=>{
+    const isMobile = useIsMobile();
+    const form = useGothamFormField(name);
+    const [localValue, setLocalValue] = useState(defaultValue ?? '');
+    const fieldValue = form?.value ?? localValue;
+    const normalizedFieldValue = fieldValue === undefined || fieldValue === null ? '' : String(fieldValue);
+    const selectClasses = useMemo(()=>cn('flex relative w-full', getInputBorderClass(borderType, borderColor, color, 'transparent'), className), [
+        borderType,
+        borderColor,
+        color,
+        className
+    ]);
+    const nativeSelectClasses = useMemo(()=>cn(selectClasses, 'appearance-none', {
+            'pr-10': showChevron
+        }), [
+        selectClasses,
+        showChevron
+    ]);
+    const labelClasses = useMemo(()=>cn(labelClass, 'block text-sm/6 font-medium', getTextClasses(labelColor)), [
+        labelClass,
+        labelColor
+    ]);
+    const optionsClasses = useMemo(()=>cn('absolute z-10 max-h-56 w-full overflow-auto rounded-md py-1 text-base focus:outline-hidden data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm', getBackgroundClasses('white'), getOutlineClasses(color, {
+            hasFocus: true,
+            hasHover: true
+        })), [
+        backgroundColor,
+        color
+    ]);
+    const chevronClasses = useMemo(()=>cn('col-start-1 row-start-1 mr-3 size-5 self-center justify-self-end sm:size-4', getTextClasses(color)), [
+        color
+    ]);
+    const selected = useMemo(()=>options.find((option)=>String(option?.value) === normalizedFieldValue), [
+        normalizedFieldValue,
+        options
+    ]);
+    const onChange = (value)=>{
+        if (!form) {
+            setLocalValue(String(value));
+        }
+        form?.setValue(name, String(value));
+        form?.clearError(name);
+    };
+    return isMobile ? /*#__PURE__*/ _jsxs("div", {
+        className: "relative w-full",
+        children: [
+            /*#__PURE__*/ _jsx("select", {
+                className: nativeSelectClasses,
+                name: name,
+                onChange: (event)=>onChange(event.target.value),
+                value: normalizedFieldValue,
+                children: options.map((option)=>/*#__PURE__*/ _jsx("option", {
+                        value: String(option.value),
+                        children: option.label
+                    }, option.id))
+            }),
+            showChevron ? /*#__PURE__*/ _jsx(ChevronDown, {
+                "aria-hidden": "true",
+                className: cn('pointer-events-none absolute right-3 top-1/2 size-5 -translate-y-1/2', getTextClasses(color))
+            }) : null
+        ]
+    }) : /*#__PURE__*/ _jsx("div", {
+        className: "flex flex-col w-full",
+        children: /*#__PURE__*/ _jsxs(Listbox, {
+            onChange: onChange,
+            value: normalizedFieldValue,
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    className: labelClasses,
+                    children: label
+                }),
+                /*#__PURE__*/ _jsx("select", {
+                    hidden: true,
+                    name: name,
+                    onChange: (event)=>onChange(event.target.value),
+                    value: normalizedFieldValue,
+                    children: options.map((option)=>/*#__PURE__*/ _jsx("option", {
+                            value: String(option.value),
+                            children: option.label
+                        }, option.id))
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: cn('flex flex-col relative w-full', {
+                        'mt-2': label
+                    }),
+                    children: [
+                        /*#__PURE__*/ _jsxs(ListboxButton, {
+                            className: selectClasses,
+                            children: [
+                                /*#__PURE__*/ _jsxs("span", {
+                                    className: "col-start-1 row-start-1 flex items-center gap-3 pr-6",
+                                    children: [
+                                        selected?.image && /*#__PURE__*/ _jsx("img", {
+                                            alt: "",
+                                            className: "size-5 shrink-0 rounded-full",
+                                            src: selected.image
+                                        }),
+                                        selected?.icon && /*#__PURE__*/ _jsx(Svg, {
+                                            className: "size-5 shrink-0 rounded-full",
+                                            name: selected.icon
+                                        }),
+                                        /*#__PURE__*/ _jsxs("span", {
+                                            className: "block truncate",
+                                            children: [
+                                                selected?.label,
+                                                " "
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                showChevron ? /*#__PURE__*/ _jsx(ChevronDown, {
+                                    "aria-hidden": "true",
+                                    className: chevronClasses
+                                }) : null
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(ListboxOptions, {
+                            className: optionsClasses,
+                            transition: true,
+                            children: options.map((option)=>option && /*#__PURE__*/ _jsx(SelectOption, {
+                                    option: option
+                                }, option?.id || option?.label))
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export const SelectField = /*#__PURE__*/ memo(SelectFieldComponent);
+SelectField.displayName = 'SelectField';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1NlbGVjdEZpZWxkL1NlbGVjdEZpZWxkLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCc7XG5cbmltcG9ydCB7TGFiZWwsIExpc3Rib3gsIExpc3Rib3hCdXR0b24sIExpc3Rib3hPcHRpb25zfSBmcm9tICdAaGVhZGxlc3N1aS9yZWFjdCc7XG5pbXBvcnQge2NufSBmcm9tICdAbmxhYnMvdXRpbHMnO1xuaW1wb3J0IHtDaGV2cm9uRG93bn0gZnJvbSAnbHVjaWRlLXJlYWN0JztcbmltcG9ydCB7bWVtbywgdXNlTWVtbywgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHt1c2VJc01vYmlsZX0gZnJvbSAnLi4vLi4vaG9va3MvdXNlSXNNb2JpbGUuanMnO1xuaW1wb3J0IHtnZXRCYWNrZ3JvdW5kQ2xhc3NlcywgZ2V0T3V0bGluZUNsYXNzZXMsIGdldFRleHRDbGFzc2VzfSBmcm9tICcuLi8uLi91dGlscy9jb2xvclV0aWxzLmpzJztcbmltcG9ydCB7dXNlR290aGFtRm9ybUZpZWxkfSBmcm9tICcuLi9Gb3JtL0Zvcm1Db250ZXh0LmpzJztcbmltcG9ydCB7SW5wdXRCb3JkZXJUeXBlLCBnZXRJbnB1dEJvcmRlckNsYXNzfSBmcm9tICcuLi9JbnB1dEZpZWxkL0lucHV0RmllbGQuanMnO1xuaW1wb3J0IHtTdmd9IGZyb20gJy4uL1N2Zy9TdmcuanMnO1xuaW1wb3J0IHtTZWxlY3RGaWVsZE9wdGlvbiwgU2VsZWN0T3B0aW9ufSBmcm9tICcuL1NlbGVjdE9wdGlvbi5qcyc7XG5cbmltcG9ydCB0eXBlIHtGQ30gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUge0dvdGhhbUNvbG9yfSBmcm9tICcuLi8uLi91dGlscy9jb2xvclV0aWxzLmpzJztcblxuZXhwb3J0IHR5cGUgU2VsZWN0RmllbGRQcm9wcyA9IHtcbiAgcmVhZG9ubHkgYmFja2dyb3VuZENvbG9yPzogR290aGFtQ29sb3I7XG4gIHJlYWRvbmx5IGJvcmRlckNvbG9yPzogR290aGFtQ29sb3I7XG4gIHJlYWRvbmx5IGJvcmRlclR5cGU/OiBJbnB1dEJvcmRlclR5cGU7XG4gIHJlYWRvbmx5IGNsYXNzTmFtZT86IHN0cmluZztcbiAgcmVhZG9ubHkgY29sb3I/OiBHb3RoYW1Db2xvcjtcbiAgcmVhZG9ubHkgZGVmYXVsdFZhbHVlPzogc3RyaW5nO1xuICByZWFkb25seSBsYWJlbD86IHN0cmluZztcbiAgcmVhZG9ubHkgbGFiZWxDb2xvcj86IEdvdGhhbUNvbG9yO1xuICByZWFkb25seSBsYWJlbENsYXNzPzogc3RyaW5nO1xuICByZWFkb25seSBuYW1lOiBzdHJpbmc7XG4gIHJlYWRvbmx5IG9wdGlvbnM6IFNlbGVjdEZpZWxkT3B0aW9uW107XG4gIHJlYWRvbmx5IHNob3dDaGV2cm9uPzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IFNlbGVjdEZpZWxkQ29tcG9uZW50OiBGQzxTZWxlY3RGaWVsZFByb3BzPiA9ICh7XG4gIGJhY2tncm91bmRDb2xvciA9ICd0cmFuc3BhcmVudCcsXG4gIGJvcmRlckNvbG9yID0gJ2JsYWNrJyxcbiAgYm9yZGVyVHlwZSA9ICdzb2xpZCcsXG4gIGNsYXNzTmFtZSA9ICdjdXJzb3ItZGVmYXVsdCBncmlkIG91dGxpbmUtMSB3LWZ1bGwgZ3JpZC1jb2xzLTEgcm91bmRlZC1tZCBweC0zLjUgcHktMiB0ZXh0LWxlZnQgc206dGV4dC1zbS82JyxcbiAgY29sb3IgPSAncHJpbWFyeScsXG4gIGRlZmF1bHRWYWx1ZSxcbiAgbGFiZWwsXG4gIGxhYmVsQ2xhc3MsXG4gIGxhYmVsQ29sb3IgPSAnbmV1dHJhbCcsXG4gIG5hbWUsXG4gIG9wdGlvbnMsXG4gIHNob3dDaGV2cm9uID0gdHJ1ZVxufSkgPT4ge1xuICBjb25zdCBpc01vYmlsZSA9IHVzZUlzTW9iaWxlKCk7XG4gIGNvbnN0IGZvcm0gPSB1c2VHb3RoYW1Gb3JtRmllbGQobmFtZSk7XG4gIGNvbnN0IFtsb2NhbFZhbHVlLCBzZXRMb2NhbFZhbHVlXSA9IHVzZVN0YXRlKGRlZmF1bHRWYWx1ZSA/PyAnJyk7XG4gIGNvbnN0IGZpZWxkVmFsdWUgPSBmb3JtPy52YWx1ZSA/PyBsb2NhbFZhbHVlO1xuICBjb25zdCBub3JtYWxpemVkRmllbGRWYWx1ZSA9IGZpZWxkVmFsdWUgPT09IHVuZGVmaW5lZCB8fCBmaWVsZFZhbHVlID09PSBudWxsID8gJycgOiBTdHJpbmcoZmllbGRWYWx1ZSk7XG4gIGNvbnN0IHNlbGVjdENsYXNzZXMgPSB1c2VNZW1vKCgpID0+IGNuKFxuICAgICdmbGV4IHJlbGF0aXZlIHctZnVsbCcsXG4gICAgZ2V0SW5wdXRCb3JkZXJDbGFzcyhib3JkZXJUeXBlLCBib3JkZXJDb2xvciwgY29sb3IsICd0cmFuc3BhcmVudCcpLCBjbGFzc05hbWUpLCBbYm9yZGVyVHlwZSwgYm9yZGVyQ29sb3IsIGNvbG9yLCBjbGFzc05hbWVdXG4gICk7XG4gIGNvbnN0IG5hdGl2ZVNlbGVjdENsYXNzZXMgPSB1c2VNZW1vKCgpID0+IGNuKFxuICAgIHNlbGVjdENsYXNzZXMsXG4gICAgJ2FwcGVhcmFuY2Utbm9uZScsXG4gICAgeydwci0xMCc6IHNob3dDaGV2cm9ufVxuICApLCBbc2VsZWN0Q2xhc3Nlcywgc2hvd0NoZXZyb25dKTtcbiAgY29uc3QgbGFiZWxDbGFzc2VzID0gdXNlTWVtbygoKSA9PiBjbihcbiAgICBsYWJlbENsYXNzLFxuICAgICdibG9jayB0ZXh0LXNtLzYgZm9udC1tZWRpdW0nLFxuICAgIGdldFRleHRDbGFzc2VzKGxhYmVsQ29sb3IpXG4gICksIFtsYWJlbENsYXNzLCBsYWJlbENvbG9yXSk7XG4gIGNvbnN0IG9wdGlvbnNDbGFzc2VzID0gdXNlTWVtbygoKSA9PiBjbihcbiAgICAnYWJzb2x1dGUgei0xMCBtYXgtaC01NiB3LWZ1bGwgb3ZlcmZsb3ctYXV0byByb3VuZGVkLW1kIHB5LTEgdGV4dC1iYXNlIGZvY3VzOm91dGxpbmUtaGlkZGVuIGRhdGEtbGVhdmU6dHJhbnNpdGlvbiBkYXRhLWxlYXZlOmR1cmF0aW9uLTEwMCBkYXRhLWxlYXZlOmVhc2UtaW4gZGF0YS1jbG9zZWQ6ZGF0YS1sZWF2ZTpvcGFjaXR5LTAgc206dGV4dC1zbScsXG4gICAgZ2V0QmFja2dyb3VuZENsYXNzZXMoJ3doaXRlJyksXG4gICAgZ2V0T3V0bGluZUNsYXNzZXMoY29sb3IsIHtoYXNGb2N1czogdHJ1ZSwgaGFzSG92ZXI6IHRydWV9KVxuICApLCBbYmFja2dyb3VuZENvbG9yLCBjb2xvcl0pO1xuICBjb25zdCBjaGV2cm9uQ2xhc3NlcyA9IHVzZU1lbW8oKCkgPT4gY24oXG4gICAgJ2NvbC1zdGFydC0xIHJvdy1zdGFydC0xIG1yLTMgc2l6ZS01IHNlbGYtY2VudGVyIGp1c3RpZnktc2VsZi1lbmQgc206c2l6ZS00JyxcbiAgICBnZXRUZXh0Q2xhc3Nlcyhjb2xvcilcbiAgKSwgW2NvbG9yXSk7XG4gIGNvbnN0IHNlbGVjdGVkID0gdXNlTWVtbyhcbiAgICAoKSA9PiBvcHRpb25zLmZpbmQoKG9wdGlvbikgPT4gU3RyaW5nKG9wdGlvbj8udmFsdWUpID09PSBub3JtYWxpemVkRmllbGRWYWx1ZSksXG4gICAgW25vcm1hbGl6ZWRGaWVsZFZhbHVlLCBvcHRpb25zXVxuICApO1xuXG4gIGNvbnN0IG9uQ2hhbmdlID0gKHZhbHVlOiBzdHJpbmcpID0+IHtcbiAgICBpZighZm9ybSkge1xuICAgICAgc2V0TG9jYWxWYWx1ZShTdHJpbmcodmFsdWUpKTtcbiAgICB9XG4gICAgZm9ybT8uc2V0VmFsdWUobmFtZSwgU3RyaW5nKHZhbHVlKSk7XG4gICAgZm9ybT8uY2xlYXJFcnJvcihuYW1lKTtcbiAgfTtcblxuICByZXR1cm4gaXNNb2JpbGUgPyAoXG4gICAgPGRpdiBjbGFzc05hbWU9XCJyZWxhdGl2ZSB3LWZ1bGxcIj5cbiAgICAgIDxzZWxlY3RcbiAgICAgICAgY2xhc3NOYW1lPXtuYXRpdmVTZWxlY3RDbGFzc2VzfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgICBvbkNoYW5nZT17KGV2ZW50KSA9PiBvbkNoYW5nZShldmVudC50YXJnZXQudmFsdWUpfVxuICAgICAgICB2YWx1ZT17bm9ybWFsaXplZEZpZWxkVmFsdWV9PlxuICAgICAgICB7b3B0aW9ucy5tYXAoKG9wdGlvbikgPT4gKFxuICAgICAgICAgIDxvcHRpb24ga2V5PXtvcHRpb24uaWR9IHZhbHVlPXtTdHJpbmcob3B0aW9uLnZhbHVlKX0+e29wdGlvbi5sYWJlbH08L29wdGlvbj5cbiAgICAgICAgKSl9XG4gICAgICA8L3NlbGVjdD5cbiAgICAgIHtzaG93Q2hldnJvbiA/IChcbiAgICAgICAgPENoZXZyb25Eb3duXG4gICAgICAgICAgYXJpYS1oaWRkZW49XCJ0cnVlXCJcbiAgICAgICAgICBjbGFzc05hbWU9e2NuKCdwb2ludGVyLWV2ZW50cy1ub25lIGFic29sdXRlIHJpZ2h0LTMgdG9wLTEvMiBzaXplLTUgLXRyYW5zbGF0ZS15LTEvMicsIGdldFRleHRDbGFzc2VzKGNvbG9yKSl9XG4gICAgICAgIC8+XG4gICAgICApIDogbnVsbH1cbiAgICA8L2Rpdj5cbiAgKSA6IChcbiAgICA8ZGl2IGNsYXNzTmFtZT1cImZsZXggZmxleC1jb2wgdy1mdWxsXCI+XG4gICAgICA8TGlzdGJveCBvbkNoYW5nZT17b25DaGFuZ2V9IHZhbHVlPXtub3JtYWxpemVkRmllbGRWYWx1ZX0+XG4gICAgICAgIDxMYWJlbCBjbGFzc05hbWU9e2xhYmVsQ2xhc3Nlc30+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0xhYmVsPlxuICAgICAgICA8c2VsZWN0IGhpZGRlbiBuYW1lPXtuYW1lfSBvbkNoYW5nZT17KGV2ZW50KSA9PiBvbkNoYW5nZShldmVudC50YXJnZXQudmFsdWUpfSB2YWx1ZT17bm9ybWFsaXplZEZpZWxkVmFsdWV9PlxuICAgICAgICAgIHtvcHRpb25zLm1hcCgob3B0aW9uKSA9PiAoXG4gICAgICAgICAgICA8b3B0aW9uIGtleT17b3B0aW9uLmlkfSB2YWx1ZT17U3RyaW5nKG9wdGlvbi52YWx1ZSl9PntvcHRpb24ubGFiZWx9PC9vcHRpb24+XG4gICAgICAgICAgKSl9XG4gICAgICAgIDwvc2VsZWN0PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y24oJ2ZsZXggZmxleC1jb2wgcmVsYXRpdmUgdy1mdWxsJywgeydtdC0yJzogbGFiZWx9KX0+XG4gICAgICAgICAgPExpc3Rib3hCdXR0b24gY2xhc3NOYW1lPXtzZWxlY3RDbGFzc2VzfT5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImNvbC1zdGFydC0xIHJvdy1zdGFydC0xIGZsZXggaXRlbXMtY2VudGVyIGdhcC0zIHByLTZcIj5cbiAgICAgICAgICAgICAge3NlbGVjdGVkPy5pbWFnZSAmJiA8aW1nIGFsdD1cIlwiIGNsYXNzTmFtZT1cInNpemUtNSBzaHJpbmstMCByb3VuZGVkLWZ1bGxcIiBzcmM9e3NlbGVjdGVkLmltYWdlfSAvPn1cbiAgICAgICAgICAgICAge3NlbGVjdGVkPy5pY29uICYmIDxTdmcgY2xhc3NOYW1lPVwic2l6ZS01IHNocmluay0wIHJvdW5kZWQtZnVsbFwiIG5hbWU9e3NlbGVjdGVkLmljb259IC8+fVxuICAgICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9XCJibG9jayB0cnVuY2F0ZVwiPntzZWxlY3RlZD8ubGFiZWx9Jm5ic3A7PC9zcGFuPlxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAge3Nob3dDaGV2cm9uID8gKFxuICAgICAgICAgICAgICA8Q2hldnJvbkRvd25cbiAgICAgICAgICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2hldnJvbkNsYXNzZXN9XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICA8L0xpc3Rib3hCdXR0b24+XG5cbiAgICAgICAgICA8TGlzdGJveE9wdGlvbnNcbiAgICAgICAgICAgIGNsYXNzTmFtZT17b3B0aW9uc0NsYXNzZXN9XG4gICAgICAgICAgICB0cmFuc2l0aW9uXG4gICAgICAgICAgPlxuICAgICAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24pID0+IG9wdGlvbiAmJiAoXG4gICAgICAgICAgICAgIDxTZWxlY3RPcHRpb24ga2V5PXtvcHRpb24/LmlkIHx8IG9wdGlvbj8ubGFiZWx9IG9wdGlvbj17b3B0aW9ufSAvPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgPC9MaXN0Ym94T3B0aW9ucz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L0xpc3Rib3g+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgU2VsZWN0RmllbGQgPSBtZW1vKFNlbGVjdEZpZWxkQ29tcG9uZW50KTtcblNlbGVjdEZpZWxkLmRpc3BsYXlOYW1lID0gJ1NlbGVjdEZpZWxkJztcbiJdLCJuYW1lcyI6WyJMYWJlbCIsIkxpc3Rib3giLCJMaXN0Ym94QnV0dG9uIiwiTGlzdGJveE9wdGlvbnMiLCJjbiIsIkNoZXZyb25Eb3duIiwibWVtbyIsInVzZU1lbW8iLCJ1c2VTdGF0ZSIsInVzZUlzTW9iaWxlIiwiZ2V0QmFja2dyb3VuZENsYXNzZXMiLCJnZXRPdXRsaW5lQ2xhc3NlcyIsImdldFRleHRDbGFzc2VzIiwidXNlR290aGFtRm9ybUZpZWxkIiwiZ2V0SW5wdXRCb3JkZXJDbGFzcyIsIlN2ZyIsIlNlbGVjdE9wdGlvbiIsIlNlbGVjdEZpZWxkQ29tcG9uZW50IiwiYmFja2dyb3VuZENvbG9yIiwiYm9yZGVyQ29sb3IiLCJib3JkZXJUeXBlIiwiY2xhc3NOYW1lIiwiY29sb3IiLCJkZWZhdWx0VmFsdWUiLCJsYWJlbCIsImxhYmVsQ2xhc3MiLCJsYWJlbENvbG9yIiwibmFtZSIsIm9wdGlvbnMiLCJzaG93Q2hldnJvbiIsImlzTW9iaWxlIiwiZm9ybSIsImxvY2FsVmFsdWUiLCJzZXRMb2NhbFZhbHVlIiwiZmllbGRWYWx1ZSIsInZhbHVlIiwibm9ybWFsaXplZEZpZWxkVmFsdWUiLCJ1bmRlZmluZWQiLCJTdHJpbmciLCJzZWxlY3RDbGFzc2VzIiwibmF0aXZlU2VsZWN0Q2xhc3NlcyIsImxhYmVsQ2xhc3NlcyIsIm9wdGlvbnNDbGFzc2VzIiwiaGFzRm9jdXMiLCJoYXNIb3ZlciIsImNoZXZyb25DbGFzc2VzIiwic2VsZWN0ZWQiLCJmaW5kIiwib3B0aW9uIiwib25DaGFuZ2UiLCJzZXRWYWx1ZSIsImNsZWFyRXJyb3IiLCJkaXYiLCJzZWxlY3QiLCJldmVudCIsInRhcmdldCIsIm1hcCIsImlkIiwiYXJpYS1oaWRkZW4iLCJoaWRkZW4iLCJzcGFuIiwiaW1hZ2UiLCJpbWciLCJhbHQiLCJzcmMiLCJpY29uIiwidHJhbnNpdGlvbiIsIlNlbGVjdEZpZWxkIiwiZGlzcGxheU5hbWUiXSwibWFwcGluZ3MiOiJBQUFBOztBQUVBLFNBQVFBLEtBQUssRUFBRUMsT0FBTyxFQUFFQyxhQUFhLEVBQUVDLGNBQWMsUUFBTyxvQkFBb0I7QUFDaEYsU0FBUUMsRUFBRSxRQUFPLGVBQWU7QUFDaEMsU0FBUUMsV0FBVyxRQUFPLGVBQWU7QUFDekMsU0FBUUMsSUFBSSxFQUFFQyxPQUFPLEVBQUVDLFFBQVEsUUFBTyxRQUFRO0FBRTlDLFNBQVFDLFdBQVcsUUFBTyw2QkFBNkI7QUFDdkQsU0FBUUMsb0JBQW9CLEVBQUVDLGlCQUFpQixFQUFFQyxjQUFjLFFBQU8sNEJBQTRCO0FBQ2xHLFNBQVFDLGtCQUFrQixRQUFPLHlCQUF5QjtBQUMxRCxTQUF5QkMsbUJBQW1CLFFBQU8sOEJBQThCO0FBQ2pGLFNBQVFDLEdBQUcsUUFBTyxnQkFBZ0I7QUFDbEMsU0FBMkJDLFlBQVksUUFBTyxvQkFBb0I7QUFvQmxFLE1BQU1DLHVCQUE2QyxDQUFDLEVBQ2xEQyxrQkFBa0IsYUFBYSxFQUMvQkMsY0FBYyxPQUFPLEVBQ3JCQyxhQUFhLE9BQU8sRUFDcEJDLFlBQVksZ0dBQWdHLEVBQzVHQyxRQUFRLFNBQVMsRUFDakJDLFlBQVksRUFDWkMsS0FBSyxFQUNMQyxVQUFVLEVBQ1ZDLGFBQWEsU0FBUyxFQUN0QkMsSUFBSSxFQUNKQyxPQUFPLEVBQ1BDLGNBQWMsSUFBSSxFQUNuQjtJQUNDLE1BQU1D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