@wireapp/react-ui-kit 9.31.0 → 9.33.0

package/lib/Identity/AvatarGrid.stories.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleSizes = exports.SingleItem = exports.TwoItems = exports.CustomStyle = exports.WithImages = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const AvatarGrid_1 = require("./AvatarGrid");
+const colors_1 = require("./colors");
+const meta = {
+    component: AvatarGrid_1.AvatarGrid,
+    title: 'Identity/AvatarGrid',
+    argTypes: {
+        backgroundColor: { control: 'color' },
+        borderColor: { control: 'color' },
+        borderWidth: { control: { type: 'number', min: 0, max: 4, step: 1 } },
+        size: { control: { type: 'number', min: 32, max: 256, step: 8 } },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        size: 120,
+        items: [
+            { color: colors_1.COLOR.RED, name: 'Joe Doe' },
+            { color: colors_1.COLOR.BLUE, name: 'Bon Jovi' },
+            { color: colors_1.COLOR.ORANGE, name: 'Mick Jagger' },
+            { color: colors_1.COLOR.GREEN, name: 'Freddy Mercury' },
+        ],
+    },
+};
+exports.WithImages = {
+    args: {
+        size: 120,
+        items: [
+            {
+                color: colors_1.COLOR.RED,
+                name: 'Joe Doe',
+                url: 'https://wire.com/hs-fs/hubfs/images%202024/about-us-hero-min.jpg?width=200&height=200',
+            },
+            { color: colors_1.COLOR.BLUE, name: 'Bon Jovi' },
+            {
+                color: colors_1.COLOR.ORANGE,
+                name: 'Mick Jagger',
+                url: 'https://wire.com/hs-fs/hubfs/images%202024/about-us-hero-min.jpg?width=200&height=200',
+            },
+            { color: colors_1.COLOR.GREEN, name: 'Freddy Mercury' },
+        ],
+    },
+};
+exports.CustomStyle = {
+    args: {
+        backgroundColor: colors_1.COLOR.BLUE,
+        borderColor: colors_1.COLOR.WHITE,
+        borderWidth: 2,
+        size: 120,
+        items: [
+            { color: colors_1.COLOR.RED, name: 'Joe Doe' },
+            { color: colors_1.COLOR.YELLOW, name: 'Bon Jovi' },
+            { color: colors_1.COLOR.ORANGE, name: 'Mick Jagger' },
+        ],
+    },
+};
+exports.TwoItems = {
+    args: {
+        size: 64,
+        items: [
+            { color: colors_1.COLOR.ORANGE, name: 'Mick Jagger' },
+            { color: colors_1.COLOR.BLUE, name: 'Freddy Mercury' },
+        ],
+    },
+};
+exports.SingleItem = {
+    args: {
+        size: 64,
+        items: [{ color: colors_1.COLOR.ORANGE, name: 'Mick Jagger' }],
+    },
+};
+exports.MultipleSizes = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(AvatarGrid_1.AvatarGrid, { size: 32, items: [
+                    { color: colors_1.COLOR.RED, name: 'Joe' },
+                    { color: colors_1.COLOR.BLUE, name: 'Bon' },
+                ] }), (0, jsx_runtime_1.jsx)(AvatarGrid_1.AvatarGrid, { size: 64, items: [
+                    { color: colors_1.COLOR.RED, name: 'Joe' },
+                    { color: colors_1.COLOR.BLUE, name: 'Bon' },
+                    { color: colors_1.COLOR.GREEN, name: 'Fred' },
+                ] }), (0, jsx_runtime_1.jsx)(AvatarGrid_1.AvatarGrid, { size: 96, items: [
+                    { color: colors_1.COLOR.RED, name: 'Joe' },
+                    { color: colors_1.COLOR.BLUE, name: 'Bon' },
+                    { color: colors_1.COLOR.GREEN, name: 'Fred' },
+                    { color: colors_1.COLOR.ORANGE, name: 'Mick' },
+                ] })] })),
+};

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Logo } from './Logo';
+declare const meta: Meta<typeof Logo>;
+export default meta;
+type Story = StoryObj<typeof Logo>;
+export declare const Default: Story;
+export declare const CustomColor: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const OnDifferentBackgrounds: Story;
+export declare const InContext: Story;
+//# sourceMappingURL=Logo.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.stories.d.ts","sourceRoot":"","sources":["../../src/Identity/Logo.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAc3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA4BpC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAoBvB,CAAC"}

package/lib/Identity/Logo.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InContext = exports.OnDifferentBackgrounds = exports.Colors = exports.Sizes = exports.CustomColor = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const colors_1 = require("./colors");
+const Logo_1 = require("./Logo");
+const meta = {
+    component: Logo_1.Logo,
+    title: 'Identity/Logo',
+    argTypes: {
+        height: { control: { type: 'number', min: 12, max: 96, step: 4 } },
+        color: { control: 'color' },
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        height: 32,
+    },
+};
+exports.CustomColor = {
+    args: {
+        color: colors_1.COLOR.BLUE,
+        height: 32,
+    },
+};
+exports.Sizes = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px', alignItems: 'flex-start' }, children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 16 }), (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 24 }), (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32 }), (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 48 }), (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 64 })] })),
+};
+exports.Colors = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { padding: '12px' }, children: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: colors_1.COLOR.BLUE }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '12px', backgroundColor: colors_1.COLOR.BLUE }, children: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: colors_1.COLOR.WHITE }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '12px', backgroundColor: colors_1.COLOR.BLACK }, children: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: colors_1.COLOR.WHITE }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '12px', backgroundColor: colors_1.COLOR.GRAY }, children: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: colors_1.COLOR.WHITE }) })] })),
+};
+exports.OnDifferentBackgrounds = {
+    render: () => ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [
+            colors_1.COLOR.WHITE,
+            colors_1.COLOR.GRAY_LIGHTEN_48,
+            colors_1.COLOR.GRAY_LIGHTEN_72,
+            colors_1.COLOR.GRAY,
+            colors_1.COLOR.GRAY_DARKEN_48,
+            colors_1.COLOR.GRAY_DARKEN_72,
+            colors_1.COLOR.BLACK,
+        ].map(backgroundColor => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                alignItems: 'center',
+                backgroundColor,
+                display: 'flex',
+                gap: '24px',
+                padding: '24px',
+            }, children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: backgroundColor === colors_1.COLOR.WHITE ? colors_1.COLOR.BLACK : colors_1.COLOR.WHITE }), (0, jsx_runtime_1.jsx)("code", { style: { color: backgroundColor === colors_1.COLOR.WHITE ? colors_1.COLOR.BLACK : colors_1.COLOR.WHITE }, children: backgroundColor })] }, backgroundColor))) })),
+};
+exports.InContext = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: {
+            alignItems: 'center',
+            backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_72,
+            display: 'flex',
+            gap: '16px',
+            justifyContent: 'space-between',
+            padding: '16px 24px',
+        }, children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 24 }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: '24px', width: '24px', backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_32 } }), (0, jsx_runtime_1.jsx)("div", { style: { height: '24px', width: '24px', backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_32 } }), (0, jsx_runtime_1.jsx)("div", { style: { height: '24px', width: '24px', backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_32 } })] })] })),
+};

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

@@ -0,0 +1,12 @@
+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 GrayScale: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BlueScale: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const GreenScale: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TurquoiseScale: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PurpleScale: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RedScale: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const AmberScale: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=colors-v2.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colors-v2.stories.d.ts","sourceRoot":"","sources":["../../src/Identity/colors-v2.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAwDpB,eAAO,MAAM,UAAU,wDAetB,CAAC;AAEF,eAAO,MAAM,SAAS,wDAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,wDAQrB,CAAC;AAEF,eAAO,MAAM,UAAU,wDAQtB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAQ1B,CAAC;AAEF,eAAO,MAAM,WAAW,wDAQvB,CAAC;AAEF,eAAO,MAAM,QAAQ,wDAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,wDAQtB,CAAC"}

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"}