@wireapp/react-ui-kit 9.32.0 → 9.33.0

package/lib/Identity/colors-v2.stories.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AmberScale = exports.RedScale = exports.PurpleScale = exports.TurquoiseScale = exports.GreenScale = exports.BlueScale = exports.GrayScale = exports.BaseColors = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const colors_v2_1 = require("./colors-v2");
+const meta = {
+    title: 'Identity/Colors/V2',
+};
+exports.default = meta;
+const ColorBox = ({ color, name }) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                backgroundColor: color,
+                border: '1px solid #E5E5E5',
+                borderRadius: '4px',
+                height: '48px',
+                marginBottom: '4px',
+                width: '100%',
+            } }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("code", { children: color })] })] }));
+const ColorSection = ({ title, colors }) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), (0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'grid',
+                gap: '16px',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            }, children: Object.entries(colors).map(([key, value]) => ((0, jsx_runtime_1.jsx)(ColorBox, { color: value, name: key }, key))) })] }));
+const getColorScale = (prefix) => {
+    const lightColors = Object.entries(colors_v2_1.COLOR_V2)
+        .filter(([key]) => key.includes(`${prefix}_LIGHT_`))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    const darkColors = Object.entries(colors_v2_1.COLOR_V2)
+        .filter(([key]) => key.includes(`${prefix}_DARK_`))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return { lightColors, darkColors };
+};
+const BaseColors = () => {
+    const lightColors = Object.entries(colors_v2_1.COLOR_V2)
+        .filter(([key]) => key.includes('LIGHT_500'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    const darkColors = Object.entries(colors_v2_1.COLOR_V2)
+        .filter(([key]) => key.includes('DARK_500'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorSection, { title: "Base Light Colors", colors: lightColors }), (0, jsx_runtime_1.jsx)(ColorSection, { title: "Base Dark Colors", colors: darkColors })] }));
+};
+exports.BaseColors = BaseColors;
+const GrayScale = () => {
+    const colors = Object.entries(colors_v2_1.COLOR_V2)
+        .filter(([key]) => key.includes('GRAY_'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Gray Scale", colors: colors });
+};
+exports.GrayScale = GrayScale;
+const BlueScale = () => {
+    const { lightColors, darkColors } = getColorScale('BLUE');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorSection, { title: "Blue Scale (Light)", colors: lightColors }), (0, jsx_runtime_1.jsx)(ColorSection, { title: "Blue Scale (Dark)", colors: darkColors })] }));
+};
+exports.BlueScale = BlueScale;
+const GreenScale = () => {
+    const { lightColors, darkColors } = getColorScale('GREEN');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorSection, { title: "Green Scale (Light)", colors: lightColors }), (0, jsx_runtime_1.jsx)(ColorSection, { title: "Green Scale (Dark)", colors: darkColors })] }));
+};
+exports.GreenScale = GreenScale;
+const TurquoiseScale = () => {
+    const { lightColors, darkColors } = getColorScale('TURQUOISE');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorSection, { title: "Turquoise Scale (Light)", colors: lightColors }), (0, jsx_runtime_1.jsx)(ColorSection, { title: "Turquoise Scale (Dark)", colors: darkColors })] }));
+};
+exports.TurquoiseScale = TurquoiseScale;
+const PurpleScale = () => {
+    const { lightColors, darkColors } = getColorScale('PURPLE');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorSection, { title: "Purple Scale (Light)", colors: lightColors }), (0, jsx_runtime_1.jsx)(ColorSection, { title: "Purple Scale (Dark)", colors: darkColors })] }));
+};
+exports.PurpleScale = PurpleScale;
+const RedScale = () => {
+    const { lightColors, darkColors } = getColorScale('RED');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorSection, { title: "Red Scale (Light)", colors: lightColors }), (0, jsx_runtime_1.jsx)(ColorSection, { title: "Red Scale (Dark)", colors: darkColors })] }));
+};
+exports.RedScale = RedScale;
+const AmberScale = () => {
+    const { lightColors, darkColors } = getColorScale('AMBER');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorSection, { title: "Amber Scale (Light)", colors: lightColors }), (0, jsx_runtime_1.jsx)(ColorSection, { title: "Amber Scale (Dark)", colors: darkColors })] }));
+};
+exports.AmberScale = AmberScale;

package/lib/Identity/colors.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const BaseColors: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DarkVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LightVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OpaqueVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ComponentColors: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const AllColorVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=colors.stories.d.ts.map

package/lib/Identity/colors.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.stories.d.ts","sourceRoot":"","sources":["../../src/Identity/colors.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AA8CpB,eAAO,MAAM,UAAU,wDAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAMxB,CAAC;AAEF,eAAO,MAAM,aAAa,wDAMzB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAM1B,CAAC;AAEF,eAAO,MAAM,eAAe,wDAM3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wDAuB5B,CAAC"}

package/lib/Identity/colors.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllColorVariants = exports.ComponentColors = exports.OpaqueVariants = exports.LightVariants = exports.DarkVariants = exports.BaseColors = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const colors_1 = require("./colors");
+const meta = {
+    title: 'Identity/Colors/V1',
+};
+exports.default = meta;
+const ColorBox = ({ color, name }) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                backgroundColor: color,
+                border: '1px solid #E5E5E5',
+                borderRadius: '4px',
+                height: '48px',
+                marginBottom: '4px',
+                width: '100%',
+            } }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("code", { children: color })] })] }));
+const ColorSection = ({ title, colors }) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), (0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'grid',
+                gap: '16px',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            }, children: Object.entries(colors)
+                .filter(([, value]) => typeof value === 'string')
+                .map(([key, value]) => ((0, jsx_runtime_1.jsx)(ColorBox, { color: value, name: key }, key))) })] }));
+const BaseColors = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key, value]) => typeof value === 'string' && !key.includes('_'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Base Colors", colors: colors });
+};
+exports.BaseColors = BaseColors;
+const DarkVariants = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key]) => key.includes('DARKEN'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Dark Variants", colors: colors });
+};
+exports.DarkVariants = DarkVariants;
+const LightVariants = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key]) => key.includes('LIGHTEN'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Light Variants", colors: colors });
+};
+exports.LightVariants = LightVariants;
+const OpaqueVariants = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key]) => key.includes('OPAQUE'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Opaque Variants", colors: colors });
+};
+exports.OpaqueVariants = OpaqueVariants;
+const ComponentColors = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key]) => ['DISABLED', 'ICON', 'LINK', 'TEXT'].includes(key))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Component Colors", colors: colors });
+};
+exports.ComponentColors = ComponentColors;
+const AllColorVariants = () => {
+    const baseColors = Object.entries(colors_1.COLOR)
+        .filter(([key, value]) => typeof value === 'string' && !key.includes('_'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    const colorsByBase = Object.keys(baseColors).map(baseColor => {
+        const variants = Object.entries(colors_1.COLOR)
+            .filter(([key, value]) => typeof value === 'string' && key.startsWith(baseColor) && key !== baseColor)
+            .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+        return {
+            base: baseColor,
+            variants: { [baseColor]: baseColors[baseColor], ...variants },
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: colorsByBase.map(({ base, variants }) => ((0, jsx_runtime_1.jsx)(ColorSection, { title: `${base} - All Variants`, colors: variants }, base))) }));
+};
+exports.AllColorVariants = AllColorVariants;

package/lib/Layout/Box.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Box } from './Box';
+declare const meta: Meta<typeof Box>;
+export default meta;
+type Story = StoryObj<typeof Box>;
+export declare const Default: Story;
+export declare const WithCustomPadding: Story;
+export declare const WithCustomBorder: Story;
+export declare const WithFormattedContent: Story;
+export declare const Nested: Story;
+export declare const Interactive: Story;
+//# sourceMappingURL=Box.stories.d.ts.map

package/lib/Layout/Box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../src/Layout/Box.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAU1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAMlC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgBlC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAapB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAuBzB,CAAC"}

package/lib/Layout/Box.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Interactive = exports.Nested = exports.WithFormattedContent = exports.WithCustomBorder = exports.WithCustomPadding = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Box_1 = require("./Box");
+const colors_1 = require("../Identity/colors");
+const Text_1 = require("../Text");
+const meta = {
+    component: Box_1.Box,
+    title: 'Layout/Box',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+const LOREM_IPSUM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a mattis nibh, sed maximus leo. Fusce a lacinia sem,
+vitae ornare dolor. Quisque rhoncus, magna non lacinia sagittis, erat augue fringilla metus, eu consectetur leo velit
+non lacus. Phasellus ipsum turpis, dapibus ut purus in, lobortis consectetur mi.`;
+exports.Default = {
+    args: {
+        children: LOREM_IPSUM,
+    },
+};
+exports.WithCustomPadding = {
+    args: {
+        children: LOREM_IPSUM,
+        style: { padding: '32px' },
+    },
+};
+exports.WithCustomBorder = {
+    args: {
+        children: LOREM_IPSUM,
+        style: { border: `2px solid ${colors_1.COLOR.BLUE}` },
+    },
+};
+exports.WithFormattedContent = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, style: { fontSize: '20px', fontWeight: 'bold', marginBottom: '16px' }, children: "Important Notice" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, style: { marginBottom: '12px' }, children: LOREM_IPSUM }), (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, style: { color: colors_1.COLOR.GRAY }, children: "Last updated: 2025-01-01" })] })),
+    },
+};
+exports.Nested = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, style: { marginBottom: '16px' }, children: "Outer box content" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { style: { backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_92 }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Inner box content" }) })] })),
+    },
+};
+exports.Interactive = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)("div", { style: { textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, style: { marginBottom: '16px' }, children: "Click the button below" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                        backgroundColor: colors_1.COLOR.BLUE,
+                        border: 'none',
+                        borderRadius: '4px',
+                        color: colors_1.COLOR.WHITE,
+                        cursor: 'pointer',
+                        padding: '8px 16px',
+                    }, children: "Action Button" })] })),
+        style: { cursor: 'pointer' },
+    },
+};

package/lib/Layout/Column.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Columns } from './Column';
+declare const meta: Meta<typeof Columns>;
+export default meta;
+type Story = StoryObj<typeof Columns>;
+export declare const Default: Story;
+export declare const TwoColumns: Story;
+export declare const ResponsiveColumns: Story;
+export declare const NestedColumns: Story;
+//# sourceMappingURL=Column.stories.d.ts.map

package/lib/Layout/Column.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.stories.d.ts","sourceRoot":"","sources":["../../src/Layout/Column.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAS,OAAO,EAAC,MAAM,UAAU,CAAC;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAG9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAgBtC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAiB/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAC"}

package/lib/Layout/Column.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NestedColumns = exports.ResponsiveColumns = exports.TwoColumns = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Column_1 = require("./Column");
+const colors_1 = require("../Identity/colors");
+const mediaQueries_1 = require("../mediaQueries");
+const meta = {
+    component: Column_1.Columns,
+    title: 'Layout/Column',
+};
+exports.default = meta;
+const Box = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { style: {
+        backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_72,
+        border: `1px solid ${colors_1.COLOR.GRAY_LIGHTEN_48}`,
+        borderRadius: '4px',
+        padding: '16px',
+        textAlign: 'center',
+    }, children: children }));
+exports.Default = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 1" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 2" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 3" }) })] })),
+    },
+};
+exports.TwoColumns = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 1" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Column 2" }) })] })),
+    },
+};
+exports.ResponsiveColumns = {
+    args: {
+        query: mediaQueries_1.QueryKeys.TABLET,
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Stacks on tablet" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Stacks on tablet" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Stacks on tablet" }) })] })),
+    },
+};
+exports.NestedColumns = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Main Column" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsxs)(Column_1.Columns, { children: [(0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Nested 1" }) }), (0, jsx_runtime_1.jsx)(Column_1.Column, { children: (0, jsx_runtime_1.jsx)(Box, { children: "Nested 2" }) })] }) })] })),
+    },
+};

package/lib/Layout/Container.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Container } from './Container';
+declare const meta: Meta<typeof Container>;
+export default meta;
+type Story = StoryObj<typeof Container>;
+export declare const Default: Story;
+export declare const CenteredText: Story;
+export declare const VerticalCentered: Story;
+export declare const Sizes: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Container.stories.d.ts.map

package/lib/Layout/Container.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.stories.d.ts","sourceRoot":"","sources":["../../src/Layout/Container.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAmE,MAAM,aAAa,CAAC;AAIxG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAgBxC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF,eAAO,MAAM,KAAK,wDAkBjB,CAAC"}

package/lib/Layout/Container.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sizes = exports.VerticalCentered = exports.CenteredText = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Container_1 = require("./Container");
+const colors_1 = require("../Identity/colors");
+const meta = {
+    component: Container_1.Container,
+    title: 'Layout/Container',
+};
+exports.default = meta;
+const DemoContent = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { style: {
+        backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_72,
+        border: `1px solid ${colors_1.COLOR.GRAY_LIGHTEN_48}`,
+        borderRadius: '4px',
+        padding: '16px',
+        textAlign: 'center',
+    }, children: children }));
+exports.Default = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "Default Container" }),
+    },
+};
+exports.CenteredText = {
+    args: {
+        centerText: true,
+        children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "Centered Text Container" }),
+    },
+};
+exports.VerticalCentered = {
+    args: {
+        verticalCenter: true,
+        style: { height: '400px' },
+        children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "Vertically Centered Container" }),
+    },
+};
+const Sizes = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsx)(Container_1.ContainerXXS, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "XXS Container" }) }), (0, jsx_runtime_1.jsx)(Container_1.ContainerXS, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "XS Container" }) }), (0, jsx_runtime_1.jsx)(Container_1.ContainerSM, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "SM Container" }) }), (0, jsx_runtime_1.jsx)(Container_1.ContainerMD, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "MD Container" }) }), (0, jsx_runtime_1.jsx)(Container_1.ContainerLG, { children: (0, jsx_runtime_1.jsx)(DemoContent, { children: "LG Container" }) })] }));
+exports.Sizes = Sizes;

package/lib/Layout/headerMenu/HeaderMenu.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { HeaderMenu } from './HeaderMenu';
+declare const meta: Meta<typeof HeaderMenu>;
+export default meta;
+type Story = StoryObj<typeof HeaderMenu>;
+export declare const Default: Story;
+export declare const WithoutCenterElement: Story;
+export declare const WithoutLogo: Story;
+export declare const MinimalExample: Story;
+//# sourceMappingURL=HeaderMenu.stories.d.ts.map

package/lib/Layout/headerMenu/HeaderMenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/Layout/headerMenu/HeaderMenu.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAMxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAajC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAezC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAezB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}

package/lib/Layout/headerMenu/HeaderMenu.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MinimalExample = exports.WithoutLogo = exports.WithoutCenterElement = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const HeaderMenu_1 = require("./HeaderMenu");
+const colors_1 = require("../../Identity/colors");
+const Logo_1 = require("../../Identity/Logo");
+const Text_1 = require("../../Text");
+const meta = {
+    component: HeaderMenu_1.HeaderMenu,
+    title: 'Layout/HeaderMenu',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { height: '400px', position: 'relative', paddingRight: '16px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+exports.default = meta;
+const MenuLink = ({ children }) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { style: {
+        cursor: 'pointer',
+        display: 'block',
+        margin: '16px 16px 0 16px',
+        textDecoration: 'none',
+    }, children: children }));
+exports.Default = {
+    args: {
+        logoElement: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 16 }),
+        centerElement: ((0, jsx_runtime_1.jsx)("div", { style: { color: colors_1.COLOR.GRAY }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, children: "Center Element" }) })),
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuLink, { children: 'First Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Second Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Third Link' })] })),
+    },
+};
+exports.WithoutCenterElement = {
+    args: {
+        logoElement: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 16 }),
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuLink, { children: 'First Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Second Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Third Link' })] })),
+    },
+};
+exports.WithoutLogo = {
+    args: {
+        centerElement: ((0, jsx_runtime_1.jsx)("div", { style: { color: colors_1.COLOR.GRAY }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { block: true, children: "Center Element" }) })),
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuLink, { children: 'First Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Second Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Third Link' })] })),
+    },
+};
+exports.MinimalExample = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuLink, { children: 'First Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Second Link' }), (0, jsx_runtime_1.jsx)(MenuLink, { children: 'Third Link' })] })),
+    },
+};

package/lib/Menu/TabBar.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TabBar } from './TabBar';
+declare const meta: Meta<typeof TabBar>;
+export default meta;
+type Story = StoryObj<typeof TabBar>;
+export declare const Default: Story;
+export declare const Interactive: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const WithContent: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const WithBadge: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CustomStyling: Story;
+//# sourceMappingURL=TabBar.stories.d.ts.map

package/lib/Menu/TabBar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.stories.d.ts","sourceRoot":"","sources":["../../src/Menu/TabBar.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAa,MAAM,UAAU,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,WAAW,wDAavB,CAAC;AAEF,eAAO,MAAM,WAAW,wDAoBvB,CAAC;AAEF,eAAO,MAAM,SAAS,wDA0BrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC"}

package/lib/Menu/TabBar.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomStyling = exports.WithBadge = exports.WithContent = exports.Interactive = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const TabBar_1 = require("./TabBar");
+const meta = {
+    component: TabBar_1.TabBar,
+    title: 'Menu/TabBar',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: true, children: "First Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, children: "Second Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, children: "Third Tab" })] })),
+    },
+};
+const Interactive = () => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    const tabs = ['First Tab', 'Second Tab', 'Third Tab'];
+    return ((0, jsx_runtime_1.jsx)(TabBar_1.TabBar, { children: tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === index, onClick: () => setActiveTab(index), children: tab }, tab))) }));
+};
+exports.Interactive = Interactive;
+const WithContent = () => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    const tabs = ['Details', 'History', 'Settings'];
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBar, { children: tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === index, onClick: () => setActiveTab(index), children: tab }, tab))) }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '16px' }, children: [activeTab === 0 && (0, jsx_runtime_1.jsx)("div", { children: "Details content" }), activeTab === 1 && (0, jsx_runtime_1.jsx)("div", { children: "History content" }), activeTab === 2 && (0, jsx_runtime_1.jsx)("div", { children: "Settings content" })] })] }));
+};
+exports.WithContent = WithContent;
+const WithBadge = () => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsxs)(TabBar_1.TabBar, { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === 0, onClick: () => setActiveTab(0), children: "Messages" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: activeTab === 1, onClick: () => setActiveTab(1), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: ["Notifications", (0, jsx_runtime_1.jsx)("span", { style: {
+                                backgroundColor: 'red',
+                                borderRadius: '8px',
+                                color: 'white',
+                                fontSize: '12px',
+                                padding: '2px 6px',
+                            }, children: "3" })] }) })] }));
+};
+exports.WithBadge = WithBadge;
+exports.CustomStyling = {
+    args: {
+        style: { backgroundColor: '#f5f5f5', padding: '8px' },
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: true, style: { fontWeight: 'bold' }, children: "Bold Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, style: { color: 'blue' }, children: "Blue Tab" }), (0, jsx_runtime_1.jsx)(TabBar_1.TabBarItem, { active: false, style: { textTransform: 'none' }, children: "Normal Case Tab" })] })),
+    },
+};

package/lib/Misc/ButtonGroup.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ButtonGroup } from './ButtonGroup';
+declare const meta: Meta<typeof ButtonGroup>;
+export default meta;
+type Story = StoryObj<typeof ButtonGroup>;
+export declare const Default: Story;
+export declare const SingleButton: Story;
+export declare const WithIcons: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MixedContent: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonGroup.stories.d.ts.map

package/lib/Misc/ButtonGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../src/Misc/ButtonGroup.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAUlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,wDAarB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAaxB,CAAC"}

package/lib/Misc/ButtonGroup.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedContent = exports.WithIcons = exports.SingleButton = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const ButtonGroup_1 = require("./ButtonGroup");
+const Icon_1 = require("../Icon");
+const meta = {
+    component: ButtonGroup_1.ButtonGroup,
+    title: 'Misc/ButtonGroup',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "Button" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Text only" })] })),
+    },
+};
+exports.SingleButton = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Text only" }),
+    },
+};
+const WithIcons = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [(0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) })] }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "Add" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "Create" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "New" })] })] }));
+exports.WithIcons = WithIcons;
+const MixedContent = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [(0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Middle" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "End" })] }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Start" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "End" })] })] }));
+exports.MixedContent = MixedContent;

package/lib/Misc/IconButton.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IconButton } from './IconButton';
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Disabled: Story;
+export declare const CustomBackground: Story;
+export declare const AllVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DifferentIcons: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const WithCustomStyles: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Interactive: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconButton.stories.d.ts.map

package/lib/Misc/IconButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../src/Misc/IconButton.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAoB,MAAM,cAAc,CAAC;AAK3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAmBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,eAAO,MAAM,WAAW,wDA0BvB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAY1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wDAY5B,CAAC;AAEF,eAAO,MAAM,WAAW,wDAavB,CAAC"}