newskit 7.3.0 → 7.4.0

package/cjs/stories/form.stories.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StoryFormComplete = void 0;
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var __1 = require("..");
+var button_1 = require("../button");
+var block_1 = require("../block");
+var icons_1 = require("../icons");
+var icon_button_1 = require("../icon-button");
+var fieldset_1 = require("../fieldset");
+var select_1 = require("../select");
+var radio_button_1 = require("../radio-button");
+var storybook_comps_1 = require("../test/storybook-comps");
+exports.default = {
+    title: 'Composed/Form',
+    component: function () { return 'None'; },
+    parameters: {
+        previewTabs: {
+            'storybook/canvas/panel': { index: -1 },
+            'storybook/docs/panel': { hidden: true },
+        },
+        viewMode: 'story',
+        docs: {
+            page: null,
+        },
+    },
+};
+var ShowPasswordButton = function (_a) {
+    var onClick = _a.onClick, isVisible = _a.isVisible;
+    return (React.createElement(icon_button_1.IconButton, { "aria-label": "toggle password", onClick: onClick, size: "small", overrides: { stylePreset: 'iconButtonMinimalPrimary' } }, isVisible ? (React.createElement(icons_1.IconFilledStop, { overrides: { size: 'iconSize010' } })) : (React.createElement(icons_1.IconFilledRemoveRedEye, { overrides: { size: 'iconSize010' } }))));
+};
+var StoryFormComplete = function () {
+    var _a = React.useState(false), showPassword = _a[0], toggleShowPassword = _a[1];
+    return (React.createElement(storybook_comps_1.StorybookPage, null,
+        React.createElement(__1.Form, { onSubmit: console.log },
+            React.createElement(fieldset_1.Fieldset, { legend: "Personal" },
+                React.createElement(block_1.Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(__1.FormInput, { name: "first-name", rules: {
+                            required: 'Required field',
+                            minLength: {
+                                value: 2,
+                                message: 'Name must be at least 2 characters long',
+                            },
+                        } },
+                        React.createElement(__1.FormInputLabel, null, "First name"),
+                        React.createElement(__1.FormInputTextField, null),
+                        React.createElement(__1.FormInputAssistiveText, null, "Enter your first name"))),
+                React.createElement(block_1.Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(__1.FormInput, { name: "last-name", rules: {
+                            required: 'Required field',
+                            minLength: {
+                                value: 2,
+                                message: 'Name must be at least 2 characters long',
+                            },
+                        } },
+                        React.createElement(__1.FormInputLabel, null, "Last name"),
+                        React.createElement(__1.FormInputTextField, null),
+                        React.createElement(__1.FormInputAssistiveText, null, "Enter your last name"))),
+                React.createElement(block_1.Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(__1.FormInput, { name: "country", rules: {
+                            required: 'Required field',
+                        } },
+                        React.createElement(__1.FormInputLabel, null, "Country"),
+                        React.createElement(__1.FormInputSelect, null,
+                            React.createElement(select_1.SelectOption, { value: "BG" }, "Bulgaria"),
+                            React.createElement(select_1.SelectOption, { value: "UK" }, "United Kingdom"),
+                            React.createElement(select_1.SelectOption, { value: "NL" }, "The Netherlands"),
+                            React.createElement(select_1.SelectOption, { value: "DE" }, "Germany")),
+                        React.createElement(__1.FormInputAssistiveText, null, "Enter your last name")))),
+            React.createElement(fieldset_1.Fieldset, { legend: "Login information" },
+                React.createElement(block_1.Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(__1.FormInput, { name: "email", rules: {
+                            required: 'Required field',
+                            pattern: /^\S+@\S+$/i,
+                        } },
+                        React.createElement(__1.FormInputLabel, null, "Email"),
+                        React.createElement(__1.FormInputTextField, { type: "email" }),
+                        React.createElement(__1.FormInputAssistiveText, null, "Enter your email"))),
+                React.createElement(block_1.Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(__1.FormInput, { name: "password", rules: {
+                            required: 'Required field',
+                            minLength: {
+                                value: 8,
+                                message: 'Name must be at least 8 characters long',
+                            },
+                        } },
+                        React.createElement(__1.FormInputLabel, null, "Password"),
+                        React.createElement(__1.FormInputTextField, { type: showPassword ? 'text' : 'password', endEnhancer: React.createElement(ShowPasswordButton, { onClick: function () { return toggleShowPassword(!showPassword); }, isVisible: showPassword }) }),
+                        React.createElement(__1.FormInputAssistiveText, null, "Enter your password")))),
+            React.createElement(fieldset_1.Fieldset, { legend: "Subscription type" },
+                React.createElement(block_1.Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(__1.FormInput, { name: "subscription", rules: {
+                            required: 'Required field',
+                        } },
+                        React.createElement(radio_button_1.RadioGroup, null,
+                            React.createElement(__1.FormInputRadioButton, { id: "subscription-online", value: "online", label: "Online", overrides: { marginBlockEnd: 'space020' } }),
+                            React.createElement(__1.FormInputRadioButton, { id: "subscription-print", value: "print", label: "Print", overrides: { marginBlockEnd: 'space020' } }),
+                            React.createElement(__1.FormInputRadioButton, { id: "subscription-both", value: "both", label: "Online and print", overrides: { marginBlockEnd: 'space020' } })),
+                        React.createElement(__1.FormInputAssistiveText, null, "Make your choice")))),
+            React.createElement(fieldset_1.Fieldset, { legend: "Interests" },
+                React.createElement(block_1.Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(__1.FormInput, { name: "interests", rules: {
+                            required: 'Required field',
+                            validate: function (value) {
+                                if (value.length < 3) {
+                                    return 'Select at least 3 interests';
+                                }
+                                return true;
+                            },
+                        } },
+                        React.createElement(__1.FormInputCheckbox, { id: "interests-politics", value: "politics", label: "Politics", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(__1.FormInputCheckbox, { id: "interests-business", value: "Business", label: "Business", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(__1.FormInputCheckbox, { id: "interests-society", value: "Society", label: "Society", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(__1.FormInputCheckbox, { id: "interests-technology", value: "Technology", label: "Technology", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(__1.FormInputCheckbox, { id: "interests-sport", value: "Sport", label: "Sport", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(__1.FormInputCheckbox, { id: "interests-science", value: "Science", label: "Science", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(__1.FormInputAssistiveText, null, "Make your choice")))),
+            React.createElement(button_1.Button, { type: "submit" }, "Register"))));
+};
+exports.StoryFormComplete = StoryFormComplete;
+exports.StoryFormComplete.storyName = 'Complete';
+//# sourceMappingURL=form.stories.js.map

package/cjs/stories/form.stories.js.map

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

package/cjs/stories/slices.stories.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { Story as StoryType } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: () => string;
+    parameters: {
+        previewTabs: {
+            'storybook/canvas/panel': {
+                index: number;
+            };
+            'storybook/docs/panel': {
+                hidden: boolean;
+            };
+        };
+        viewMode: string;
+        docs: {
+            page: null;
+        };
+    };
+    decorators: ((Story: StoryType, context: {
+        name: string;
+        globals: {
+            backgrounds: {
+                value: string;
+            };
+        };
+    }) => JSX.Element)[];
+};
+export default _default;
+export declare const TheSunStory: {
+    (): JSX.Element;
+    storyName: string;
+};
+export declare const TheTimesStory: {
+    (): JSX.Element;
+    storyName: string;
+};
+//# sourceMappingURL=slices.stories.d.ts.map

package/cjs/stories/slices.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slices.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/slices.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,KAAK,IAAI,SAAS,EAAC,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;yBA+EvC,SAAS,WACP;QAAC,MAAM,MAAM,CAAC;QAAC,OAAO,EAAE;YAAC,WAAW,EAAE;gBAAC,KAAK,EAAE,MAAM,CAAA;aAAC,CAAA;SAAC,CAAA;KAAC;;AAhBtE,wBA6BE;AAEF,eAAO,MAAM,WAAW;;;CAyBvB,CAAC;AAiFF,eAAO,MAAM,aAAa;;;CAmEzB,CAAC"}

package/cjs/stories/slices.stories.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TheTimesStory = exports.TheSunStory = void 0;
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var __1 = require("..");
+var theme_select_object_1 = require("../test/theme-select-object");
+var icons_1 = require("../icons");
+var the_sun_cards_1 = require("../card-composable/__tests__/the-sun-cards");
+var the_times_cards_1 = require("../card-composable/__tests__/the-times-cards");
+var default_focus_visible_1 = require("../utils/default-focus-visible");
+var themeOverrides = {
+    overrides: {
+        stylePresets: (0, tslib_1.__assign)({ divider: {
+                base: {
+                    borderStyle: 'solid',
+                    borderColor: '{{colors.interface030}}',
+                    borderWidth: '{{borders.borderWidthDefault}}',
+                },
+            }, cardContainer: {
+                base: {
+                    backgroundColor: '{{colors.transparent}}',
+                },
+            }, cardHeadline: {
+                base: {
+                    color: 'currentColor',
+                },
+            }, cardLink: {
+                base: {
+                    textDecoration: 'none',
+                    color: '{{colors.inkContrast}}',
+                },
+                hover: {
+                    color: '{{colors.interactiveLink020}}',
+                },
+                'focus-visible': default_focus_visible_1.defaultFocusVisible,
+            } }, the_sun_cards_1.stylePresets),
+        componentDefaults: {
+            cardLink: {
+                stylePreset: 'cardLink',
+            },
+        },
+    },
+};
+exports.default = {
+    title: 'Composed/Slices',
+    component: function () { return 'None'; },
+    parameters: {
+        previewTabs: {
+            'storybook/canvas/panel': { index: -1 },
+            'storybook/docs/panel': { hidden: true },
+        },
+        viewMode: 'story',
+        docs: {
+            page: null,
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            var _a, _b;
+            return (React.createElement(__1.ThemeProvider, { theme: (0, theme_select_object_1.createCustomThemeWithBaseThemeSwitch)((_b = (_a = context === null || context === void 0 ? void 0 : context.globals) === null || _a === void 0 ? void 0 : _a.backgrounds) === null || _b === void 0 ? void 0 : _b.value, themeOverrides, context === null || context === void 0 ? void 0 : context.name) },
+                React.createElement(Story, null)));
+        },
+    ],
+};
+var TheSunStory = function () { return (React.createElement(__1.GridLayout, { overrides: {
+        maxWidth: { xs: '340px', md: '620px', lg: '940px' },
+        marginInline: 'auto',
+    }, columns: { xs: '1fr', lg: '2fr 1fr' }, columnGap: "space040", rowGap: "space050" },
+    React.createElement(__1.GridLayoutItem, null,
+        React.createElement(the_sun_cards_1.CardVerticalResponsive, null)),
+    React.createElement(__1.GridLayout, { columns: { xs: '1fr', md: '1fr 1fr', lg: '1fr' }, columnGap: "space040", rowGap: "space050", alignContent: "space-between" },
+        React.createElement(the_sun_cards_1.CardHorizontalResponsive, null),
+        React.createElement(the_sun_cards_1.CardHorizontalResponsive, null),
+        React.createElement(the_sun_cards_1.CardHorizontalResponsive, null),
+        React.createElement(the_sun_cards_1.CardHorizontalResponsive, null)))); };
+exports.TheSunStory = TheSunStory;
+exports.TheSunStory.storyName = 'The Sun';
+var SecondLevelArticlesGroup = function () {
+    var areas = {
+        xs: "\n      p1 d1 p2\n      d2 d1 d3\n      p3 d1 p4\n    ",
+        md: "\n      p1 d1 p2 d2 p3 d3 p4\n    ",
+        lg: "\n      p1\n      d1\n      p2\n      d2\n      p3\n      d3\n      p4\n    ",
+        xl: "\n      p1 d1 p2\n      d2 d1 d3\n      p3 d1 p4\n    ",
+    };
+    return (React.createElement(__1.GridLayout, { areas: areas, columns: {
+            xs: '1fr auto 1fr',
+            md: '1fr auto 1fr auto 1fr auto 1fr',
+            lg: '1fr',
+            xl: '1fr auto 1fr',
+        }, columnGap: "space040", rowGap: "space040" },
+        React.createElement(__1.GridLayoutItem, { area: "p1" },
+            React.createElement(the_times_cards_1.SecondLevelCard, null)),
+        React.createElement(__1.GridLayoutItem, { area: "d1" },
+            React.createElement(__1.Divider, { vertical: { xs: true, lg: false, xl: true } })),
+        React.createElement(__1.GridLayoutItem, { area: "p2" },
+            React.createElement(the_times_cards_1.SecondLevelCard, null)),
+        React.createElement(__1.GridLayoutItem, { area: "d2" },
+            React.createElement(__1.Divider, { vertical: { xs: false, md: true, lg: false } })),
+        React.createElement(__1.GridLayoutItem, { area: "p3" },
+            React.createElement(the_times_cards_1.SecondLevelCard, null)),
+        React.createElement(__1.GridLayoutItem, { area: "d3" },
+            React.createElement(__1.Divider, { vertical: { xs: false, md: true, lg: false } })),
+        React.createElement(__1.GridLayoutItem, { area: "p4" },
+            React.createElement(the_times_cards_1.SecondLevelCard, null))));
+};
+var ThirdLevelArticlesGroup = function () { return (React.createElement(__1.GridLayout, { columns: {
+        xs: '1fr',
+        md: '1fr auto 1fr',
+    }, columnGap: "space040", rowGap: "space040" },
+    React.createElement(the_times_cards_1.ThirdLevelCard, null),
+    React.createElement(__1.Divider, { vertical: { xs: false, md: true } }),
+    React.createElement(the_times_cards_1.ThirdLevelCard, null))); };
+var TheTimesStory = function () {
+    var button = function () { return (React.createElement(__1.IconButton, { href: "/", size: "medium", title: "more articles" },
+        React.createElement(icons_1.IconFilledChevronRight, null))); };
+    var mainAreas = {
+        xs: "\n      lead\n      d1\n      second\n      d2\n      third\n    ",
+        lg: "\n      lead  d1 second\n      d2    d1 second\n      third d1 second\n    ",
+    };
+    return (React.createElement(__1.GridLayout, { overrides: { maxWidth: '1300px', marginInline: 'auto' }, rowGap: "space040" },
+        React.createElement(__1.TitleBar, { headingAs: "h2", actionItem: button, overrides: {
+                paddingInline: 'space000',
+                heading: {
+                    typographyPreset: 'editorialHeadline040',
+                },
+            } }, "Title bar"),
+        React.createElement(__1.GridLayout, { areas: mainAreas, columnGap: "space040", rowGap: "space040", columns: {
+                xs: '1fr',
+                lg: '1fr auto 232px',
+                xl: '1fr auto 402px',
+            } },
+            React.createElement(__1.GridLayoutItem, { area: "lead" },
+                React.createElement(the_times_cards_1.LeadCard, null)),
+            React.createElement(__1.GridLayoutItem, { area: "d1" },
+                React.createElement(__1.Divider, { vertical: { xs: false, lg: true } })),
+            React.createElement(__1.GridLayoutItem, { area: "second" },
+                React.createElement(SecondLevelArticlesGroup, null)),
+            React.createElement(__1.GridLayoutItem, { area: "d2" },
+                React.createElement(__1.Divider, null)),
+            React.createElement(__1.GridLayoutItem, { area: "third" },
+                React.createElement(ThirdLevelArticlesGroup, null)))));
+};
+exports.TheTimesStory = TheTimesStory;
+exports.TheTimesStory.storyName = 'The Times';
+//# sourceMappingURL=slices.stories.js.map

package/cjs/stories/slices.stories.js.map

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

package/cjs/text-field/types.d.ts

@@ -26,6 +26,7 @@ declare type FormEntryChildrenProps = {
     ref: UseFormRegisterReturn['ref'];
     refObject: React.RefObject<HTMLInputElement>;
     error?: string;
+    hasContent: boolean;
 };
 declare type FormValidationRules = Record<string, string | object>;
 export declare type FormEntryProps = {

package/cjs/text-field/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,qBAAqB,EAAC,MAAM,iCAAiC,CAAC;AACtE,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,oBAAY,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,iBAAiB,GAAG;QAC9B,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,SAAS,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACvB,KAAK,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACnB,gBAAgB,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QAC9B,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACxB,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KAC1B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,uBAAuB,EAAE,SAAS;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,aAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,GAAG,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAClC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,aAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAE3D,oBAAY,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,YAAY,CAAC;CACjE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,qBAAqB,EAAC,MAAM,iCAAiC,CAAC;AACtE,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,oBAAY,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,iBAAiB,GAAG;QAC9B,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,SAAS,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACvB,KAAK,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACnB,gBAAgB,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QAC9B,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACxB,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KAC1B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,uBAAuB,EAAE,SAAS;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,aAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,GAAG,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAClC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,aAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAE3D,oBAAY,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,YAAY,CAAC;CACjE,CAAC"}