@wireapp/react-ui-kit 9.69.0 → 9.69.4

package/lib/Surface/DropdownMenu/DropdownMenu.styles.js

@@ -1,123 +0,0 @@
-"use strict";
-/*
- * 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/.
- *
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.triggerStyles = exports.textStyles = exports.itemStyle = exports.contentStyle = void 0;
-const react_1 = require("@emotion/react");
-const util_1 = require("../../utils/util");
-const slideUpAndFade = (0, react_1.keyframes) `
-	from {
-		opacity: 0;
-		transform: translateY(2px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-`;
-const slideRightAndFade = (0, react_1.keyframes) `
-	from {
-		opacity: 0;
-		transform: translateX(-2px);
-	}
-	to {
-		opacity: 1;
-		transform: translateX(0);
-	}
-}`;
-const slideDownAndFade = (0, react_1.keyframes) `
-	from {
-		opacity: 0;
-		transform: translateY(-2px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-`;
-const slideLeftAndFade = (0, react_1.keyframes) `
-	from {
-		opacity: 0;
-		transform: translateX(2px);
-	}
-	to {
-		opacity: 1;
-		transform: translateX(0);
-	}
-}
-`;
-exports.contentStyle = {
-    minWidth: '160px',
-    zIndex: 'var(--z-index-modal)',
-    padding: '8px 0',
-    borderRadius: '12px',
-    backgroundColor: 'var(--dropdown-menu-bg)',
-    boxShadow: '0 0 1px 0 rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.16)',
-    animationDuration: '400ms',
-    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    willChange: 'transform, opacity',
-    outline: 'auto',
-    '&[data-side="top"]': {
-        animationName: slideDownAndFade,
-    },
-    '&[data-side="right"]': {
-        animationName: slideLeftAndFade,
-    },
-    '&[data-side="bottom"]': {
-        animationName: slideUpAndFade,
-    },
-    '&[data-side="left"]': {
-        animationName: slideRightAndFade,
-    },
-};
-exports.itemStyle = {
-    height: '30px',
-    fontSize: '12px',
-    fontWeight: 400,
-    lineHeight: '2rem',
-    padding: '0 24px',
-    position: 'relative',
-    userSelect: 'none',
-    outline: 'none',
-    cursor: 'pointer',
-    display: 'flex',
-    overflow: 'hidden',
-    maxWidth: '300px',
-    alignItems: 'center',
-    '&[data-highlighted]': {
-        backgroundColor: 'var(--foreground-fade-16)',
-    },
-};
-exports.textStyles = {
-    ...(0, util_1.ellipsis)(),
-    display: 'inline-block',
-    flexGrow: 1,
-};
-exports.triggerStyles = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '0',
-    margin: '0',
-    border: 'none',
-    background: 'none',
-    cursor: 'pointer',
-};

package/lib/Surface/DropdownMenu/index.d.ts

@@ -1,2 +0,0 @@
-export * from './DropdownMenu';
-//# sourceMappingURL=index.d.ts.map

package/lib/Surface/DropdownMenu/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Surface/DropdownMenu/index.ts"],"names":[],"mappings":"AAmBA,cAAc,gBAAgB,CAAC"}

package/lib/Surface/DropdownMenu/index.js

@@ -1,35 +0,0 @@
-"use strict";
-/*
- * 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/.
- *
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DropdownMenu"), exports);

package/lib/Surface/MenuModal/MenuModal.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-interface MenuModalProps<T = HTMLDivElement> extends React.HTMLProps<T> {
-    onBackgroundClick?: () => void;
-}
-export declare const MenuModal: ({ children, onBackgroundClick, ...props }: MenuModalProps & React.HTMLProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export type MenuItemProps<T = HTMLLIElement> = React.HTMLProps<T>;
-export declare const MenuItem: ({ children, ...props }: MenuItemProps & React.HTMLProps<HTMLLIElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=MenuModal.d.ts.map

package/lib/Surface/MenuModal/MenuModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuModal.d.ts","sourceRoot":"","sources":["../../../src/Surface/MenuModal/MenuModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsE/B,UAAU,cAAc,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,8CAInB,cAAc,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,qDAOlD,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,aAAa,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,QAAQ,2BAAiC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,qDAenG,CAAC"}

package/lib/Surface/MenuModal/MenuModal.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = exports.MenuModal = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const Identity_1 = require("../../Identity");
-const motions_1 = require("../../Identity/motions/motions");
-const utils_1 = require("../../utils");
-const util_1 = require("../../utils/util");
-const Overlay_1 = require("../Modal/Overlay");
-const menuModalWrapperStyle = props => ({
-    ...(0, Overlay_1.overlayBackgroundStyle)(props),
-    alignItems: 'flex-end',
-    alignSelf: 'flex-end',
-    display: 'flex',
-    overflowY: 'hidden',
-    padding: 0,
-});
-const MenuModalWrapper = (props) => (0, jsx_runtime_1.jsx)("div", { css: menuModalWrapperStyle, ...props });
-const MenuModalBody = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => ({
-        animation: `${motions_1.ANIMATION.bottomUpMovement} ${motions_1.DURATION.DEFAULT}ms ${motions_1.EASE.EXPONENTIAL}`,
-        backgroundColor: Identity_1.COLOR.tint(theme.general.backgroundColor, 0.16),
-        boxShadow: '0 16px 64px 0 rgba(0, 0, 0, 0.16)',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        padding: '8px 16px',
-        position: 'relative',
-        width: '767px',
-        zIndex: 9999,
-        [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
-            width: '100%',
-        },
-    }), ...props }));
-const MenuModalContent = (props) => ((0, jsx_runtime_1.jsx)("ul", { css: {
-        li: {
-            borderBottom: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
-        },
-        'li:last-child': {
-            borderBottom: 0,
-        },
-        margin: 0,
-        maxWidth: '100%',
-        minWidth: '100%',
-        padding: 0,
-    }, ...props }));
-const modalBackgroundStyle = props => ({
-    ...(0, Overlay_1.overlayBackgroundStyle)(props),
-    background: 'rgba(50, 54, 57, 0.4)',
-});
-const MenuModalBackground = (props) => (0, jsx_runtime_1.jsx)("div", { css: modalBackgroundStyle, ...props });
-const MenuModal = ({ children = null, onBackgroundClick = util_1.noop, ...props }) => ((0, jsx_runtime_1.jsxs)(MenuModalWrapper, { ...props, children: [(0, jsx_runtime_1.jsx)(MenuModalBody, { children: (0, jsx_runtime_1.jsx)(MenuModalContent, { children: children }) }), (0, jsx_runtime_1.jsx)(MenuModalBackground, { onClick: onBackgroundClick, "data-uie-name": "menu-background" })] }));
-exports.MenuModal = MenuModal;
-const MenuItem = ({ children = null, ...props }) => ((0, jsx_runtime_1.jsx)("li", { css: (theme) => ({
-        alignItems: 'center',
-        color: theme.general.color,
-        cursor: 'pointer',
-        display: 'flex',
-        height: '56px',
-        listStyleType: 'none',
-        maxWidth: '100%',
-    }), ...props, children: children }));
-exports.MenuItem = MenuItem;

package/lib/Surface/MenuModal/index.d.ts

@@ -1,2 +0,0 @@
-export * from './MenuModal';
-//# sourceMappingURL=index.d.ts.map

package/lib/Surface/MenuModal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Surface/MenuModal/index.ts"],"names":[],"mappings":"AAmBA,cAAc,aAAa,CAAC"}

package/lib/Surface/MenuModal/index.js

@@ -1,35 +0,0 @@
-"use strict";
-/*
- * 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/.
- *
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./MenuModal"), exports);

package/lib/Surface/Modal/Modal.d.ts

@@ -1,21 +0,0 @@
-import { CSSProperties } from 'react';
-import * as React from 'react';
-export interface ModalBodyProps<T = HTMLDivElement> extends React.HTMLProps<T> {
-    fullscreen?: boolean;
-}
-export interface ModalActionItem {
-    bold?: boolean;
-    dataUieName?: string;
-    onClick: (event: React.MouseEvent<HTMLElement>) => void;
-    title: string;
-}
-interface ModalProps {
-    actions?: ModalActionItem[];
-    bodyStyle?: CSSProperties;
-    fullscreen?: boolean;
-    onBackgroundClick?: () => void;
-    onClose?: () => void;
-}
-export declare const Modal: React.FC<ModalProps & React.HTMLProps<HTMLDivElement>>;
-export {};
-//# sourceMappingURL=Modal.d.ts.map

package/lib/Surface/Modal/Modal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Surface/Modal/Modal.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAgED,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;CACf;AA0DD,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAsBxE,CAAC"}

package/lib/Surface/Modal/Modal.js

@@ -1,98 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const color_1 = __importDefault(require("color"));
-const Overlay_1 = require("./Overlay");
-const Icon_1 = require("../../DataDisplay/Icon");
-const Identity_1 = require("../../Identity");
-const utils_1 = require("../../utils");
-const util_1 = require("../../utils/util");
-const modalBodyStyle = (theme, { fullscreen = false }) => ({
-    alignItems: 'center',
-    backgroundColor: theme.general.backgroundColor,
-    borderRadius: fullscreen ? 0 : '8px',
-    bottom: fullscreen ? 0 : undefined,
-    boxShadow: fullscreen ? 'none' : '0 16px 64px 0 rgba(0, 0, 0, 0.16)',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: fullscreen ? 'center' : 'space-between',
-    left: fullscreen ? 0 : undefined,
-    margin: 'auto',
-    position: fullscreen ? 'fixed' : 'relative',
-    right: fullscreen ? 0 : undefined,
-    top: fullscreen ? 0 : undefined,
-    transform: 'translate3d(0, 0, 0)',
-    zIndex: 9999,
-    [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
-        width: fullscreen ? 'initial' : '100%',
-    },
-});
-const filterModalBodyProps = (props) => (0, util_1.filterProps)(props, ['fullscreen']);
-const ModalBody = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => modalBodyStyle(theme, props), ...filterModalBodyProps(props) }));
-const ModalClose = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 16, height: 16, css: {
-        alignItems: 'center',
-        cursor: 'pointer',
-        display: 'flex',
-        justifyContent: 'center',
-        position: 'absolute',
-        right: 16,
-        top: 16,
-    }, ...props }));
-const ModalContent = props => ((0, jsx_runtime_1.jsx)("div", { css: {
-        maxWidth: '100%',
-        overflowY: 'auto',
-        padding: '40px',
-    }, ...props }));
-const modalBackgroundStyle = props => ({
-    ...(0, Overlay_1.overlayBackgroundStyle)(props),
-    backgroundColor: 'rgba(50, 54, 57, 0.4)',
-});
-const ModalBackground = (props) => (0, jsx_runtime_1.jsx)("div", { css: modalBackgroundStyle(props), ...props });
-const modalActionsWrapperStyles = () => ({
-    borderTop: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
-    bottom: 0,
-    display: 'flex',
-    div: {
-        '&:hover': {
-            backgroundColor: Identity_1.COLOR.opaque(Identity_1.COLOR.GRAY_DARKEN_72, 0.04),
-        },
-        '&:active': {
-            backgroundColor: Identity_1.COLOR.opaque(Identity_1.COLOR.GRAY_DARKEN_72, 0.08),
-        },
-        borderRight: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
-    },
-    'div:first-child': {
-        borderBottomLeftRadius: 8,
-    },
-    'div:last-child': {
-        borderBottomRightRadius: 8,
-        borderRight: 0,
-    },
-    position: 'absolute',
-    width: '100%',
-});
-const modalActionStyles = ({ bold }) => ({
-    '&:hover': {
-        color: (0, color_1.default)(Identity_1.COLOR.BLUE).mix((0, color_1.default)(Identity_1.COLOR.BLACK), 0.16).toString(),
-    },
-    color: Identity_1.COLOR.BLUE,
-    cursor: 'pointer',
-    display: 'flex',
-    flex: 1,
-    fontWeight: bold ? 'bold' : 'normal',
-    justifyContent: 'center',
-    padding: '8px 0',
-});
-const ModalActions = ({ actions }) => ((0, jsx_runtime_1.jsx)("div", { css: modalActionsWrapperStyles(), children: actions.map(action => ((0, jsx_runtime_1.jsx)("div", { onClick: action.onClick, css: modalActionStyles({ bold: action.bold }), "data-uie-name": action.dataUieName, children: action.title }, action.title))) }));
-const Modal = ({ actions = [], children, bodyStyle, fullscreen, onClose, onBackgroundClick, ...props }) => ((0, jsx_runtime_1.jsxs)(Overlay_1.OverlayWrapper, { ...props, "data-uie-name": "modal", children: [(0, jsx_runtime_1.jsxs)(ModalBody, { fullscreen: fullscreen, style: bodyStyle, children: [(0, jsx_runtime_1.jsx)(ModalContent, { children: children }), onClose !== util_1.noop && (0, jsx_runtime_1.jsx)(ModalClose, { onClick: onClose, "data-uie-name": "do-close" }), actions.length > 0 && (0, jsx_runtime_1.jsx)(ModalActions, { actions: actions, "data-uie-name": "modal-actions" })] }), !fullscreen && ((0, jsx_runtime_1.jsx)(ModalBackground, { onClick: onBackgroundClick === util_1.noop ? onClose : onBackgroundClick, "data-uie-name": "modal-background" }))] }));
-exports.Modal = Modal;
-exports.Modal.defaultProps = {
-    actions: [],
-    fullscreen: false,
-    onBackgroundClick: util_1.noop,
-    onClose: util_1.noop,
-};

package/lib/Surface/Modal/Modal.stories.d.ts

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Modal } from './Modal';
-declare const meta: Meta<typeof Modal>;
-export default meta;
-type Story = StoryObj<typeof Modal>;
-export declare const Default: Story;
-export declare const WithActions: Story;
-export declare const Fullscreen: Story;
-export declare const CustomWidth: Story;
-export declare const WithLongContent: Story;
-export declare const MultipleActions: Story;
-//# sourceMappingURL=Modal.stories.d.ts.map

package/lib/Surface/Modal/Modal.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/Surface/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAK9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAM5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAYpC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAuB7B,CAAC"}

package/lib/Surface/Modal/Modal.stories.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultipleActions = exports.WithLongContent = exports.CustomWidth = exports.Fullscreen = exports.WithActions = 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 Modal_1 = require("./Modal");
-const Inputs_1 = require("../../Inputs");
-const Typography_1 = require("../../Typography");
-const meta = {
-    component: Modal_1.Modal,
-    title: 'Surface/Modal',
-    parameters: {
-        layout: 'fullscreen',
-    },
-};
-exports.default = meta;
-const ModalDemo = ({ children }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '24px' }, children: [(0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(true), children: "Open Modal" }), children(isOpen, setIsOpen)] }));
-};
-exports.Default = {
-    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Normal Modal" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This is a normal modal with default styling." }) }), (0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
-};
-exports.WithActions = {
-    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), bodyStyle: { width: 360 }, actions: [
-                { title: 'Cancel', onClick: () => setIsOpen(false), bold: false },
-                { title: 'Send', onClick: () => setIsOpen(false), bold: true },
-            ], children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Modal with actions" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This modal has action buttons at the bottom." }) })] })) })),
-};
-exports.Fullscreen = {
-    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { fullscreen: true, onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(Typography_1.H1, { children: "Fullscreen Modal" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This modal takes up the entire screen." }) }), (0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
-};
-exports.CustomWidth = {
-    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), bodyStyle: { width: 800 }, children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Wide Modal" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This modal has a custom width of 800px." }) }), (0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
-};
-exports.WithLongContent = {
-    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Modal with Long Content" }), Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultricies, nunc nunc aliquam nunc, vitae aliquam nunc nunc vitae nunc." }) }, index))), (0, jsx_runtime_1.jsx)(Inputs_1.Button, { onClick: () => setIsOpen(false), children: "Close" })] })) })),
-};
-exports.MultipleActions = {
-    render: () => ((0, jsx_runtime_1.jsx)(ModalDemo, { children: (isOpen, setIsOpen) => isOpen && ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { onClose: () => setIsOpen(false), bodyStyle: { width: 400 }, actions: [
-                { title: 'Delete', onClick: () => setIsOpen(false), bold: false },
-                { title: 'Edit', onClick: () => setIsOpen(false), bold: false },
-                { title: 'Save', onClick: () => setIsOpen(false), bold: true },
-            ], children: [(0, jsx_runtime_1.jsx)(Typography_1.H2, { style: { margin: 0 }, children: "Multiple Actions" }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph, { children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { block: true, children: "This modal has multiple action buttons." }) })] })) })),
-};

package/lib/Surface/Modal/Overlay.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { CSSObject } from '@emotion/react';
-export type OverlayWrapperProps<T = HTMLDivElement> = React.HTMLProps<T>;
-export declare const overlayWrapperStyle: <T>(props: OverlayWrapperProps<T>) => CSSObject;
-export declare const OverlayWrapper: (props: OverlayWrapperProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const OverlayContent: (props: React.HTMLProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export type OverlayBackgroundProps<T = HTMLDivElement> = React.HTMLProps<T>;
-export declare const overlayBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject;
-export declare const OverlayBackground: (props: OverlayBackgroundProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export interface OverlayProps<T = HTMLDivElement> extends React.HTMLProps<T> {
-    onBackgroundClick?: () => void;
-}
-export declare const Overlay: ({ onBackgroundClick, children, ...props }: OverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Overlay.d.ts.map

package/lib/Surface/Modal/Overlay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../src/Surface/Modal/Overlay.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAOzC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAEzE,eAAO,MAAM,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAUtE,CAAC;AAEH,eAAO,MAAM,cAAc,UAAW,mBAAmB,qDAAiD,CAAC;AAE3G,eAAO,MAAM,cAAc,UAAW,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,qDAsBpE,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,sBAAsB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,SAS5E,CAAC;AAEH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAAoD,CAAC;AAEpH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,OAAO,8CAA2D,YAAY,qDAK1F,CAAC"}

package/lib/Surface/Modal/Overlay.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Overlay = exports.OverlayBackground = exports.overlayBackgroundStyle = exports.OverlayContent = exports.OverlayWrapper = exports.overlayWrapperStyle = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const Identity_1 = require("../../Identity");
-const motions_1 = require("../../Identity/motions");
-const utils_1 = require("../../utils");
-const util_1 = require("../../utils/util");
-const overlayWrapperStyle = () => ({
-    bottom: 0,
-    display: 'flex',
-    left: 0,
-    overflowY: 'auto',
-    padding: '24px',
-    position: 'fixed',
-    right: 0,
-    top: 0,
-    zIndex: 9997,
-});
-exports.overlayWrapperStyle = overlayWrapperStyle;
-const OverlayWrapper = (props) => (0, jsx_runtime_1.jsx)("div", { css: exports.overlayWrapperStyle, ...props });
-exports.OverlayWrapper = OverlayWrapper;
-const OverlayContent = (props) => ((0, jsx_runtime_1.jsx)("div", { css: {
-        '*': {
-            color: Identity_1.COLOR.WHITE,
-        },
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        margin: 'auto',
-        maxWidth: '100%',
-        overflowY: 'auto',
-        position: 'relative',
-        transform: 'translate3d(0, 0, 0)',
-        zIndex: 9999,
-        [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
-            width: '100%',
-        },
-    }, ...props }));
-exports.OverlayContent = OverlayContent;
-const overlayBackgroundStyle = () => ({
-    animation: `${motions_1.ANIMATION.fadeIn} ${motions_1.DURATION.PROACTIVE_SLOW}ms ${motions_1.EASE.QUART}`,
-    background: 'rgba(0, 0, 0, 0.88)',
-    height: '100vh',
-    left: 0,
-    position: 'fixed',
-    top: 0,
-    width: '100vw',
-    zIndex: 9998,
-});
-exports.overlayBackgroundStyle = overlayBackgroundStyle;
-const OverlayBackground = (props) => (0, jsx_runtime_1.jsx)("div", { css: exports.overlayBackgroundStyle, ...props });
-exports.OverlayBackground = OverlayBackground;
-const Overlay = ({ onBackgroundClick = util_1.noop, children = null, ...props }) => ((0, jsx_runtime_1.jsxs)(exports.OverlayWrapper, { ...props, "data-uie-name": "modal", children: [(0, jsx_runtime_1.jsx)(exports.OverlayContent, { children: children }), (0, jsx_runtime_1.jsx)(exports.OverlayBackground, { onClick: onBackgroundClick, "data-uie-name": "overlay-background" })] }));
-exports.Overlay = Overlay;

package/lib/Surface/Modal/index.d.ts

@@ -1,3 +0,0 @@
-export * from './Modal';
-export { Overlay } from './Overlay';
-//# sourceMappingURL=index.d.ts.map

package/lib/Surface/Modal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Surface/Modal/index.ts"],"names":[],"mappings":"AAmBA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC"}

package/lib/Surface/Modal/index.js

@@ -1,38 +0,0 @@
-"use strict";
-/*
- * Wire
- * Copyright (C) 2018 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/.
- *
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Overlay = void 0;
-__exportStar(require("./Modal"), exports);
-var Overlay_1 = require("./Overlay");
-Object.defineProperty(exports, "Overlay", { enumerable: true, get: function () { return Overlay_1.Overlay; } });

package/lib/Surface/TabBar/TabBar.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { TextProps } from '../../Typography';
-export type TabBarProps<T = HTMLDivElement> = React.HTMLProps<T>;
-export declare const TabBar: ({ children, ...props }: TabBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export interface TabBarItemProps<T = HTMLSpanElement> extends TextProps<T> {
-    active: boolean;
-}
-export declare const TabBarItem: ({ children, ...props }: TabBarItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TabBar.d.ts.map

package/lib/Surface/TabBar/TabBar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/Surface/TabBar/TabBar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,SAAS,EAAY,MAAM,kBAAkB,CAAC;AAGtD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAWjE,eAAO,MAAM,MAAM,2BAAiC,WAAW,qDAI9D,CAAC;AAEF,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACxE,MAAM,EAAE,OAAO,CAAC;CACjB;AA2BD,eAAO,MAAM,UAAU,2BAAiC,eAAe,qDAItE,CAAC"}