@taiv/ui 1.3.2 → 1.4.0

package/dist/components/Inputs/Dropdowns/FontSelect/font-options.js

@@ -0,0 +1,65 @@
+export const FONTS = [
+    { value: 'Poppins', label: 'Poppins' },
+    { value: 'Insanibu', label: 'Insanibu' },
+    { value: 'MINI_Serif', label: 'MINI_Serif' },
+    { value: 'CHEESEPIZZA', label: 'CHEESEPIZZA' },
+    { value: 'BMW', label: 'BMW' },
+    { value: 'Abrakatebra', label: 'Abrakatebra' },
+    { value: 'Aramisi', label: 'Aramisi' },
+    { value: 'Facebook', label: 'Facebook' },
+    { value: 'Merriweather', label: 'Merriweather' },
+    { value: 'MINI_Sans', label: 'MINI_Sans' },
+    { value: 'Arvo', label: 'Arvo' },
+    { value: 'Dolce_Vita', label: 'Dolce_Vita' },
+    { value: 'Spectral', label: 'Spectral' },
+    { value: 'Twitter', label: 'Twitter' },
+    { value: 'CaviarDreams', label: 'CaviarDreams' },
+    { value: 'Freestyle_Script', label: 'Freestyle_Script' },
+    { value: 'Roboto', label: 'Roboto' },
+    { value: 'Cardo', label: 'Cardo' },
+    { value: 'Oswald', label: 'Oswald' },
+    { value: 'Nunito', label: 'Nunito' },
+    { value: 'Oxygen', label: 'Oxygen' },
+    { value: 'arial', label: 'arial' },
+    { value: 'Lora', label: 'Lora' },
+    { value: 'Montserrat', label: 'Montserrat' },
+    { value: 'College_Block', label: 'College_Block' },
+    { value: 'Karla', label: 'Karla' },
+    { value: 'Raleway', label: 'Raleway' },
+    { value: 'Rubik', label: 'Rubik' },
+    { value: 'Underground', label: 'Underground' },
+    { value: 'SS_Nickson_One', label: 'SS_Nickson_One' },
+    { value: 'Instagram', label: 'Instagram' },
+    { value: 'Cormorant', label: 'Cormorant' },
+    { value: 'Hamburger_Heaven', label: 'Hamburger_Heaven' },
+    { value: 'Coquette_Regular', label: 'Coquette_Regular' },
+    { value: 'Lato', label: 'Lato' },
+];
+export const FONT_SIZES = [
+    { value: '5', label: '5' },
+    { value: '5.5', label: '5.5' },
+    { value: '6.5', label: '6.5' },
+    { value: '7.5', label: '7.5' },
+    { value: '8', label: '8' },
+    { value: '9', label: '9' },
+    { value: '10', label: '10' },
+    { value: '10.5', label: '10.5' },
+    { value: '11', label: '11' },
+    { value: '12', label: '12' },
+    { value: '14', label: '14' },
+    { value: '16', label: '16' },
+    { value: '18', label: '18' },
+    { value: '20', label: '20' },
+    { value: '22', label: '22' },
+    { value: '24', label: '24' },
+    { value: '26', label: '26' },
+    { value: '28', label: '28' },
+    { value: '36', label: '36' },
+    { value: '40', label: '40' },
+    { value: '44', label: '44' },
+    { value: '48', label: '48' },
+    { value: '58', label: '58' },
+    { value: '64', label: '64' },
+    { value: '72', label: '72' },
+];
+export default { FONTS, FONT_SIZES };

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,12 @@
+import { MultiSelectProps as MantineMultiSelectProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+import { componentSizes } from '../shared/sizes';
+interface MultiSelectProps extends MantineMultiSelectProps {
+    size?: keyof typeof componentSizes;
+    width?: string | number;
+    fullWidth?: boolean;
+    styles?: Record<string, CSSObject>;
+}
+export declare const MultiSelect: ({ size, width, fullWidth, placeholder, styles, ...props }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,gBAAiB,SAAQ,uBAAuB;IACxD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,GAAI,2DAA6F,gBAAgB,4CA0FxI,CAAC"}

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MultiSelect as MantineMultiSelect } from '@mantine/core';
+import { neutral, primary } from '../../../../constants/colors';
+import { fontBase } from '../../../../constants/font';
+import { componentSizes } from '../shared/sizes';
+export const MultiSelect = ({ size = 'md', width, fullWidth = false, placeholder = 'Select options', styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.maxWidth}rem`;
+    const style = {
+        input: {
+            height: 'auto',
+            minHeight: `${selectedSize.height}rem`,
+            padding: selectedSize.inputPadding,
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer',
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '8px',
+            backgroundColor: 'white',
+            transition: 'all 200ms ease-in-out',
+            '&:hover': {
+                backgroundColor: 'white',
+            },
+        },
+        dropdown: {
+            border: 'none',
+            borderRadius: '8px',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+        },
+        item: {
+            padding: selectedSize.dropdownPadding,
+            marginBottom: '0.5rem',
+            borderRadius: '8px',
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+            backgroundColor: 'white',
+            '&[data-selected]': {
+                backgroundColor: neutral[50],
+                color: neutral[200],
+                '&:hover': {
+                    backgroundColor: neutral[50],
+                },
+            },
+            '&:hover': {
+                backgroundColor: neutral[50],
+            },
+            '&:not(:hover):not([data-selected])': {
+                backgroundColor: 'white',
+            },
+        },
+        value: {
+            padding: selectedSize.valuePadding,
+            borderRadius: '25px',
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.125rem)`,
+            color: primary[300],
+            backgroundColor: primary[50],
+            '&:hover': {
+                backgroundColor: primary[50],
+            },
+        },
+        defaultValueRemove: {
+            marginLeft: '0.75rem',
+            borderRadius: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: primary[300],
+            backgroundColor: primary[25],
+            '&:hover': {
+                backgroundColor: primary[25],
+            },
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
+            color: neutral[200],
+        },
+        defaultValueLabel: {
+            ...fontBase,
+        },
+        searchInput: {
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return _jsx(MantineMultiSelect, { placeholder: placeholder, size: size, w: computedWidth, styles: style, maxDropdownHeight: selectedSize.dropdownHeight, searchable: true, ...props });
+};

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MultiSelect } from './MultiSelect';
+declare const meta: Meta<typeof MultiSelect>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const AdditionalFunctionality: Story;
+export declare const CustomStyling: Story;
+//# sourceMappingURL=MultiSelect.stories.d.ts.map

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/MultiSelect/MultiSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAkHlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqBnC,eAAO,MAAM,OAAO,EAAE,KAmCrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAsBrC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAuD3B,CAAC"}

package/dist/components/Inputs/Dropdowns/MultiSelect/MultiSelect.stories.js

@@ -0,0 +1,260 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MultiSelect } from './MultiSelect';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/Dropdowns/MultiSelect',
+    component: MultiSelect,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the multi select size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        placeholder: {
+            control: { type: 'text' },
+            description: 'Placeholder text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "'Select options'" },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Multi select label',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: { type: 'text' },
+            description: 'Description text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        error: {
+            control: { type: 'text' },
+            description: 'Error message',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        required: {
+            control: { type: 'boolean' },
+            description: 'Required field',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+            description: 'Full width of container',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width',
+            table: {
+                type: { summary: 'string | number' },
+            },
+        },
+        clearable: {
+            control: { type: 'boolean' },
+            description: 'Allow clearing all selections',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        searchable: {
+            control: { type: 'boolean' },
+            description: 'Allow searching options',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        maxSelectedValues: {
+            control: { type: 'number' },
+            description: 'Maximum number of selected values',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(value: string[]) => void' },
+            },
+        },
+    },
+};
+export default meta;
+const basicOptions = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+    { value: 'option4', label: 'Option 4' },
+    { value: 'option5', label: 'Option 5' },
+];
+const tagOptions = [
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'svelte', label: 'Svelte' },
+    { value: 'typescript', label: 'TypeScript' },
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'python', label: 'Python' },
+    { value: 'java', label: 'Java' },
+];
+export const Default = {
+    args: {
+        label: 'Choose multiple options',
+        data: basicOptions,
+        size: 'md',
+        disabled: false,
+        required: false,
+        fullWidth: false,
+        clearable: false,
+        searchable: true,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '220px' }, children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        docs: {
+            source: {
+                code: `<MultiSelect
+  label="Choose multiple options"
+  value={selectedValues}
+  onChange={setSelectedValues}
+  data={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' },
+  ]}
+/>`,
+            },
+        },
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { label: "Basic Multi Select", data: basicOptions }), _jsx(MultiSelect, { label: "Tag Selection", data: tagOptions, placeholder: "Select technologies" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { size: "sm", label: "Small MultiSelect", data: basicOptions }), _jsx(MultiSelect, { size: "md", label: "Medium MultiSelect (Default)", data: basicOptions }), _jsx(MultiSelect, { size: "lg", label: "Large MultiSelect", data: basicOptions })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<MultiSelect size="sm" label="Small MultiSelect" value={values} onChange={setValues} data={options} />
+<MultiSelect size="lg" label="Large MultiSelect" value={values} onChange={setValues} data={options} />`,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { label: "Normal Multi Select", data: basicOptions }), _jsx(MultiSelect, { label: "Disabled Multi Select", data: basicOptions, disabled: true }), _jsx(MultiSelect, { label: "Required Multi Select", data: basicOptions, required: true }), _jsx(MultiSelect, { label: "Multi Select with Description", description: "Select multiple options", data: basicOptions }), _jsx(MultiSelect, { label: "Multi Select with Error", error: "Please select at least one option", data: basicOptions })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const AdditionalFunctionality = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { label: "Tags", placeholder: "Add or select tags", creatable: true, clearable: true, data: tagOptions }), _jsx(MultiSelect, { label: "Limited Selection", data: basicOptions, maxSelectedValues: 3, placeholder: "Max 3 selections" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<MultiSelect
+  label="Tags"
+  placeholder="Add or select tags"
+  creatable
+  clearable
+  value={tags}
+  onChange={setTags}
+  data={existingTags}
+/>`,
+            },
+        },
+    },
+};
+export const CustomStyling = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(MultiSelect, { label: "Custom Styled Multi Select", data: basicOptions, styles: {
+                    input: {
+                        borderColor: '#ff6b6b',
+                        '&:focus': {
+                            borderColor: '#ff6b6b',
+                            boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#ff6b6b',
+                        fontWeight: 600,
+                    },
+                    value: {
+                        backgroundColor: '#ff6b6b',
+                        color: 'white',
+                    },
+                } }), _jsx(MultiSelect, { label: "Another Custom Style", data: basicOptions, styles: {
+                    input: {
+                        backgroundColor: '#f8f9fa',
+                        borderColor: '#4CAF50',
+                        '&:focus': {
+                            borderColor: '#4CAF50',
+                            boxShadow: '0 0 0 2px rgba(76, 175, 80, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#4CAF50',
+                        fontSize: '16px',
+                    },
+                    value: {
+                        backgroundColor: '#4CAF50',
+                        color: 'white',
+                    },
+                } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

package/dist/components/Inputs/Dropdowns/Select/Select.d.ts

@@ -0,0 +1,11 @@
+import { SelectProps as MantineSelectProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+import { componentSizes } from '../shared/sizes';
+export interface SelectProps extends MantineSelectProps {
+    size?: keyof typeof componentSizes;
+    width?: string | number;
+    fullWidth?: boolean;
+    styles?: Record<string, CSSObject>;
+}
+export declare const Select: ({ size, width, fullWidth, placeholder, styles, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/Inputs/Dropdowns/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,MAAM,GAAI,2DAA+F,WAAW,4CA0DhI,CAAC"}

package/dist/components/Inputs/Dropdowns/Select/Select.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select as MantineSelect } from '@mantine/core';
+import { neutral } from '../../../../constants/colors';
+import { fontBase } from '../../../../constants/font';
+import { componentSizes } from '../shared/sizes';
+export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'Select an option', styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const style = {
+        root: {
+            width: fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`,
+        },
+        input: {
+            height: `${selectedSize.height}rem`,
+            paddingRight: selectedSize.inputPadding,
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[300],
+            borderRadius: '8px',
+            border: `1px solid ${neutral[100]}`,
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            transition: 'all 200ms ease-in-out',
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
+            color: neutral[200],
+        },
+        dropdown: {
+            border: 'none',
+            borderRadius: '8px',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+        },
+        item: {
+            padding: selectedSize.dropdownPadding,
+            marginBottom: '0.2rem',
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+            borderRadius: '8px',
+            backgroundColor: 'white',
+            '&[data-selected]': {
+                backgroundColor: neutral[50],
+                color: neutral[200],
+                '&:hover': {
+                    backgroundColor: neutral[50],
+                },
+            },
+            '&:hover': {
+                backgroundColor: neutral[50],
+            },
+            '&:not(:hover):not([data-selected])': {
+                backgroundColor: 'white',
+            },
+        },
+        rightSection: {
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return _jsx(MantineSelect, { radius: "md", size: size, styles: style, placeholder: placeholder, maxDropdownHeight: selectedSize.dropdownHeight, ...props });
+};

package/dist/components/Inputs/Dropdowns/Select/Select.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Select } from './Select';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const WithFeatures: Story;
+export declare const FullWidth: Story;
+export declare const CustomStyles: Story;
+//# sourceMappingURL=Select.stories.d.ts.map

package/dist/components/Inputs/Dropdowns/Select/Select.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA2G7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAmBnC,eAAO,MAAM,OAAO,EAAE,KAmCrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAqB1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiD1B,CAAC"}