@wireapp/react-ui-kit 9.59.0 → 9.59.2

package/lib/Identity/Animation.stories.js

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomizableAnimation = exports.AllAnimations = 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 Animation_1 = require("./Animation");
-const colors_1 = require("./colors");
-const meta = {
-    title: 'Identity/Animation',
-    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 AnimationDemo = ({ title, children, }) => {
-    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
-    const toggle = () => setIsAnimating(!isAnimating);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { marginBottom: '8px' }, children: title }), (0, jsx_runtime_1.jsx)("button", { onClick: toggle, style: {
-                            backgroundColor: colors_1.COLOR.BLUE,
-                            border: 'none',
-                            borderRadius: '4px',
-                            color: colors_1.COLOR.WHITE,
-                            cursor: 'pointer',
-                            padding: '8px 16px',
-                        }, children: "Toggle Animation" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_72,
-                    borderRadius: '4px',
-                    minHeight: '100px',
-                    padding: '24px',
-                }, children: children(isAnimating, toggle) })] }));
-};
-const AllAnimations = () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Opacity", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.Opacity, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Fade in/out content" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Top Down Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.TopDownMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from top" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Bottom Up Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.BottomUpMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from bottom" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Y-Axis Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.YAxisMovement, { in: isAnimating, startValue: "50%", endValue: "-50%", children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Custom vertical movement" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Left Right Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.LeftRightMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from left" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Right Left Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.RightLeftMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from right" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "X-Axis Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.XAxisMovement, { in: isAnimating, startValue: "10vh", endValue: "-10vh", children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Custom horizontal movement" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Combined Animations", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.TopDownMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)(Animation_1.Opacity, { in: isAnimating, children: (0, jsx_runtime_1.jsx)(Animation_1.XAxisMovement, { in: isAnimating, startValue: "40vh", endValue: "10vh", children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Combined fade, vertical and horizontal movement" }) }) }) })) })] }));
-exports.AllAnimations = AllAnimations;
-exports.CustomizableAnimation = {
-    render: function Render() {
-        const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
-        const toggle = () => setIsAnimating(!isAnimating);
-        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { onClick: toggle, style: {
-                        backgroundColor: colors_1.COLOR.BLUE,
-                        border: 'none',
-                        borderRadius: '4px',
-                        color: colors_1.COLOR.WHITE,
-                        cursor: 'pointer',
-                        marginBottom: '24px',
-                        padding: '8px 16px',
-                    }, children: "Toggle Animation" }), (0, jsx_runtime_1.jsx)(Animation_1.Opacity, { in: isAnimating, timeout: 2000, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Customizable animation duration (2 seconds)" }) })] }));
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Animations can be customized with different durations and timing functions.',
-            },
-        },
-    },
-};

package/lib/Identity/Avatar.d.ts

@@ -1,14 +0,0 @@
-import { IsInViewportProps } from '../Misc/';
-export declare const DEFAULT_AVATAR_SIZE = 28;
-export interface AvatarProps<T = HTMLDivElement> extends IsInViewportProps<T> {
-    backgroundColor?: string;
-    borderColor?: string;
-    fetchImage?: () => void;
-    forceInitials?: boolean;
-    isAvatarGridItem?: boolean;
-    name?: string;
-    size?: number;
-    url?: string;
-}
-export declare const Avatar: (props: AvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Avatar.d.ts.map

package/lib/Identity/Avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Identity/Avatar.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAe,iBAAiB,EAAC,MAAM,UAAU,CAAC;AAGzD,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AA6CD,eAAO,MAAM,MAAM,UAAW,WAAW,qDA6CxC,CAAC"}

package/lib/Identity/Avatar.js

@@ -1,88 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.DEFAULT_AVATAR_SIZE = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/*
- * Wire
- * Copyright (C) 2019 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 colors_1 = require("./colors");
-const motions_1 = require("./motions");
-const Misc_1 = require("../Misc/");
-const util_1 = require("../util");
-exports.DEFAULT_AVATAR_SIZE = 28;
-const avatarStyle = ({ color = colors_1.COLOR.WHITE, url, borderColor, backgroundColor = colors_1.COLOR.GRAY, size = exports.DEFAULT_AVATAR_SIZE, isAvatarGridItem, }) => {
-    const BORDER_SIZE_LIMIT = 32;
-    const borderSize = size > BORDER_SIZE_LIMIT ? 2 : 1;
-    const borderWidth = url ? 0 : borderSize;
-    const fontSize = `${Math.ceil(size / 2.2)}px`;
-    return {
-        alignItems: 'center',
-        backgroundColor: backgroundColor,
-        borderRadius: isAvatarGridItem ? '0' : '50%',
-        boxShadow: isAvatarGridItem ? 'none' : `inset 0 0 0 ${borderWidth}px ${borderColor}`,
-        color,
-        display: 'flex',
-        fontSize,
-        fontWeight: isAvatarGridItem ? 700 : 400,
-        height: `${size}px`,
-        justifyContent: 'center',
-        minHeight: `${size}px`,
-        minWidth: `${size}px`,
-        overflow: 'hidden',
-        width: `${size}px`,
-    };
-};
-const filteredAvatarProps = (props) => (0, util_1.filterProps)(props, [
-    'size',
-    'forceInitials',
-    'name',
-    'url',
-    'borderColor',
-    'backgroundColor',
-    'fetchImage',
-    'isAvatarGridItem',
-]);
-const Avatar = (props) => {
-    const { url, forceInitials, name, fetchImage, isAvatarGridItem } = props;
-    const [scale, setScale] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        if (url) {
-            requestAnimationFrame(() => setScale(1));
-        }
-    }, [url]);
-    const getInitials = (name = '') => name
-        .split(' ')
-        .filter(Boolean)
-        .map(([initial]) => initial.toUpperCase())
-        .join('')
-        .substring(0, isAvatarGridItem ? 1 : 2);
-    return ((0, jsx_runtime_1.jsx)(Misc_1.IsInViewport, { checkViewportOnce: true, onEnterViewport: fetchImage, disabled: !!url, css: avatarStyle(props), "data-uie-name": !forceInitials && url ? 'element-avatar-image' : 'element-avatar-initials', ...filteredAvatarProps(props), children: forceInitials || !url ? (getInitials(name)) : ((0, jsx_runtime_1.jsx)("div", { css: {
-                backgroundImage: url && `url(${url})`,
-                backgroundPosition: 'center',
-                backgroundSize: 'cover',
-                borderRadius: isAvatarGridItem ? '0' : '50%',
-                minHeight: '100%',
-                minWidth: '100%',
-                opacity: scale,
-                transform: `scale(${scale})`,
-                transition: `all ${motions_1.DURATION.DEFAULT}ms ${motions_1.EASE.QUART}`,
-                width: '100%',
-            } })) }));
-};
-exports.Avatar = Avatar;

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

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../src/Identity/Avatar.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAY7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC"}

package/lib/Identity/Avatar.stories.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultipleSizes = exports.ForcedInitials = exports.Large = exports.Small = exports.CustomColors = exports.WithImage = exports.WithInitials = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const Avatar_1 = require("./Avatar");
-const colors_1 = require("./colors");
-const meta = {
-    component: Avatar_1.Avatar,
-    title: 'Identity/Avatar',
-    argTypes: {
-        backgroundColor: { control: 'color' },
-        borderColor: { control: 'color' },
-        size: { control: { type: 'number', min: 16, max: 128, step: 4 } },
-        name: { control: 'text' },
-        url: { control: 'text' },
-        forceInitials: { control: 'boolean' },
-        isAvatarGridItem: { control: 'boolean' },
-    },
-};
-exports.default = meta;
-exports.WithInitials = {
-    args: {
-        name: 'John Doe',
-        size: 48,
-    },
-};
-exports.WithImage = {
-    args: {
-        name: 'John Doe',
-        size: 48,
-        url: 'https://wire.com/hs-fs/hubfs/images%202024/about-us-hero-min.jpg?width=2175&height=2043&name=about-us-hero-min.jpg',
-    },
-};
-exports.CustomColors = {
-    args: {
-        backgroundColor: colors_1.COLOR.BLUE,
-        borderColor: colors_1.COLOR.WHITE,
-        name: 'Jane Smith',
-        size: 48,
-    },
-};
-exports.Small = {
-    args: {
-        name: 'JS',
-        size: 24,
-    },
-};
-exports.Large = {
-    args: {
-        name: 'Jane Smith',
-        size: 96,
-    },
-};
-exports.ForcedInitials = {
-    args: {
-        forceInitials: true,
-        name: 'John Doe',
-        size: 48,
-        url: 'https://placekitten.com/200/200',
-    },
-};
-exports.MultipleSizes = {
-    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 24 }), (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 32 }), (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 48 }), (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 64 }), (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 96 })] })),
-};

package/lib/Identity/AvatarGrid.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { AvatarProps } from '../Identity/';
-interface Props<T = HTMLDivElement> extends React.HTMLProps<T> {
-    backgroundColor?: string;
-    borderColor?: string;
-    borderWidth?: number;
-    fetchImages?: () => void;
-    items: Omit<AvatarProps, 'borderColor' | 'size' | 'borderColor' | 'isAvatarGridItem' | 'fetchImage'>[];
-    size?: number;
-}
-export declare const AvatarGrid: ({ borderWidth, size, items, fetchImages, ...props }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=AvatarGrid.d.ts.map

package/lib/Identity/AvatarGrid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGrid.d.ts","sourceRoot":"","sources":["../../src/Identity/AvatarGrid.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAIzC,UAAU,KAAK,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,GAAG,MAAM,GAAG,aAAa,GAAG,kBAAkB,GAAG,YAAY,CAAC,EAAE,CAAC;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA4BD,eAAO,MAAM,UAAU,wDAAiF,KAAK,qDAwC5G,CAAC"}

package/lib/Identity/AvatarGrid.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarGrid = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const Avatar_1 = require("./Avatar");
-const colors_1 = require("./colors");
-const Misc_1 = require("../Misc/");
-const util_1 = require("../util");
-const avatarGridStyle = ({ borderWidth, size, backgroundColor = colors_1.COLOR.GRAY_DARKEN_48, borderColor = colors_1.COLOR.GRAY_DARKEN_48, }) => {
-    return {
-        alignItems: 'start',
-        backgroundColor: backgroundColor,
-        border: `${borderWidth}px solid ${borderColor}`,
-        borderRadius: '16%',
-        display: 'grid',
-        gridGap: borderWidth,
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        gridTemplateRows: 'repeat(2, 1fr)',
-        height: `${size}px`,
-        justifyItems: 'center',
-        minWidth: `${size}px`,
-        overflow: 'hidden',
-        width: `${size}px`,
-    };
-};
-const filteredAvatarGridProps = (props) => (0, util_1.filterProps)(props, ['backgroundColor', 'borderColor', 'items', 'size', 'borderWidth']);
-const AvatarGrid = ({ borderWidth = 1, size = Avatar_1.DEFAULT_AVATAR_SIZE, items, fetchImages, ...props }) => {
-    const allProps = { borderWidth, items, size, ...props };
-    const slicedItems = items.slice(0, 4);
-    const missing = 4 - slicedItems.length;
-    for (let index = 0; index < missing; index++) {
-        slicedItems.push(null);
-    }
-    return ((0, jsx_runtime_1.jsx)(Misc_1.IsInViewport, { checkViewportOnce: true, onEnterViewport: fetchImages, css: avatarGridStyle(allProps), ...filteredAvatarGridProps(allProps), children: slicedItems.map(item => item ? ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { backgroundColor: item.backgroundColor || colors_1.COLOR.GRAY_DARKEN_80, url: item.url, color: item.color, forceInitials: item.forceInitials, isAvatarGridItem: true, name: item.name, size: size / 2 - borderWidth, style: { height: '100%', width: '100%' } }, Math.random().toString())) : ((0, jsx_runtime_1.jsx)("div", { css: {
-                backgroundColor: colors_1.COLOR.GRAY_DARKEN_80,
-                height: '100%',
-                width: '100%',
-            } }, Math.random().toString()))) }));
-};
-exports.AvatarGrid = AvatarGrid;

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

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGrid.stories.d.ts","sourceRoot":"","sources":["../../src/Identity/AvatarGrid.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CASjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC"}

package/lib/Identity/AvatarGrid.stories.js

@@ -1,90 +0,0 @@
-"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.d.ts

@@ -1,6 +0,0 @@
-import { SVGIconProps } from '../Icon/SVGIcon';
-export interface LogoProps<T = SVGSVGElement> extends SVGIconProps<T> {
-    hover?: boolean;
-}
-export declare const Logo: ({ hover, ...props }: LogoProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Logo.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/Identity/Logo.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAU,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAItD,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,aAAa,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAeD,eAAO,MAAM,IAAI,wBAAuB,SAAS,qDAIhD,CAAC"}

package/lib/Identity/Logo.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Logo = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const colors_1 = require("./colors");
-const SVGIcon_1 = require("../Icon/SVGIcon");
-const motions_1 = require("../Identity/motions");
-const logoStyle = (theme, { hover, color = theme.general.color }) => ({
-    '&:hover path': {
-        fill: hover ? colors_1.COLOR.shade(color, 0.06) : undefined,
-    },
-    path: {
-        fill: color,
-        transition: motions_1.defaultTransition,
-    },
-});
-const Logo = ({ hover, ...props }) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 57, realHeight: 18, css: (theme) => logoStyle(theme, { hover, ...props }), ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M10.857 14.767a5.45 5.45 0 0 1-1.277-3.51l.002-8.688c0-.708.573-1.284 1.277-1.284s1.277.576 1.277 1.284l-.002 8.687a5.45 5.45 0 0 1-1.277 3.51zm9.58-3.51c0 3.01-2.409 5.458-5.402 5.458a5.413 5.413 0 0 1-3.233-1.073 6.72 6.72 0 0 0 1.61-4.386l.002-8.687A2.565 2.565 0 0 0 10.859 0a2.565 2.565 0 0 0-2.555 2.569l-.002 8.687c0 1.675.64 3.206 1.65 4.386a5.413 5.413 0 0 1-3.233 1.073c-2.993 0-5.442-2.449-5.442-5.459V.66H0v10.597C0 14.975 3.035 18 6.733 18a6.681 6.681 0 0 0 4.164-1.458A6.587 6.587 0 0 0 15.028 18c3.698 0 6.686-3.025 6.686-6.744V.66h-1.278v10.597zm5.11 6.403h1.278V.624h-1.277V17.66zM38.008.327a7.337 7.337 0 0 0-6.073 3.233V.624h-1.278V17.66h1.278V7.72c0-3.367 2.725-6.106 6.073-6.106V.327zm2.394 13.705c-2.485-2.965-2.342-7.416.432-10.208a7.478 7.478 0 0 1 10.141-.436L40.401 14.032zM52.784 3.386a8.75 8.75 0 0 0-12.854-.471c-3.424 3.446-3.424 9.054 0 12.5a8.75 8.75 0 0 0 12.417.002l-.903-.91a7.478 7.478 0 0 1-10.14.434l5.285-5.32 6.195-6.235zM53.964.77h.447v1.16h.136V.77h.45V.643h-1.033V.77zM56.34.643l-.445 1.116L55.45.643h-.21v1.286h.131V.779l.457 1.15h.124l.455-1.145v1.145h.132V.643h-.201z" }) }));
-exports.Logo = Logo;

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

@@ -1,12 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,62 +0,0 @@
-"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.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors-v2.d.ts","sourceRoot":"","sources":["../../src/Identity/colors-v2.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,gBAAgB;;;;;;;CAOnB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAC;AA8LX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQX,CAAC"}

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

@@ -1 +0,0 @@
-{"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.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/Identity/colors.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAgE3F,eAAO,MAAM,KAAK,EAAE,GAWnB,CAAC"}

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

@@ -1 +0,0 @@
-{"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/motions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"motions.d.ts","sourceRoot":"","sources":["../../src/Identity/motions.ts"],"names":[],"mappings":"AAuBA;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI;;;CAGhB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,cAAc,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/Layout/Box.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,SAIhD,CAAC;AAEH,eAAO,MAAM,GAAG,UAAW,QAAQ,qDAA6C,CAAC"}

package/lib/Layout/Box.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Box = exports.boxStyle = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const Identity_1 = require("../Identity");
-const boxStyle = _ => ({
-    border: `2px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
-    borderRadius: '8px',
-    padding: '16px 32px',
-});
-exports.boxStyle = boxStyle;
-const Box = (props) => (0, jsx_runtime_1.jsx)("div", { css: (0, exports.boxStyle)(props), ...props });
-exports.Box = Box;

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

@@ -1 +0,0 @@
-{"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

@@ -1,58 +0,0 @@
-"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.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { QueryKeys } from '../mediaQueries';
-export interface ColumnsProps<T = HTMLDivElement> extends React.HTMLProps<T> {
-    query?: QueryKeys;
-}
-export declare const filterColumnsProps: (props: ColumnsProps) => Object;
-export declare const Columns: (props: ColumnsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export type ColumnProps<T = HTMLDivElement> = React.HTMLProps<T>;
-export declare const Column: (props: ColumnProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Column.d.ts.map