@pushwoosh/dumb-components 1.0.0 → 1.0.2

package/InputFile/InputFile.js

@@ -0,0 +1,88 @@
+import React, { useRef } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { AttachmentIcon } from '@pushwoosh/kit-icons';
+import { Button } from '../Button';
+import { FieldBox } from '../FieldBox';
+import { InputFileFieldsStyled, InputFileButtonStyled, InputFileInputStyled, InputFileInputHiddenStyled, InputFileErrorStyled } from './styles';
+export function InputFile(props) {
+  const {
+    fileId,
+    textId,
+    buttonId,
+    label,
+    buttonText,
+    accept,
+    placeholder,
+    disabled,
+    fileName,
+    errorText,
+    name,
+    maxSize,
+    onError = () => {},
+    onChange,
+    isIgnoreFileSize = false
+  } = props;
+  const fieldRef = useRef(null);
+  const uploadFile = event => {
+    var _event$target$files;
+    const file = ((_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files.length) && event.target.files[0];
+    if (!file) {
+      return;
+    }
+    if (!isIgnoreFileSize) {
+      if (!file.size) {
+        onError('The file could not be empty', name);
+        return;
+      }
+      if (maxSize && file.size > maxSize * 1024 * 1024) {
+        onError(`The file size should be less than ${maxSize}MB`, name);
+        return;
+      }
+    }
+    const reader = new FileReader();
+    reader.onload = upload => {
+      var _upload$target;
+      const result = {
+        file,
+        [name]: (_upload$target = upload.target) === null || _upload$target === void 0 ? void 0 : _upload$target.result
+      };
+      onChange(result);
+    };
+    reader.readAsDataURL(file);
+  };
+  return React.createElement(FieldBox, {
+    title: label,
+    error: errorText
+  }, React.createElement(InputFileFieldsStyled, null, React.createElement(InputFileInputHiddenStyled, {
+    ref: fieldRef,
+    id: fileId,
+    type: "file",
+    disabled: disabled,
+    accept: accept,
+    onChange: uploadFile,
+    value: ""
+  }), React.createElement(InputFileInputStyled, {
+    id: textId,
+    type: "text",
+    disabled: disabled,
+    placeholder: placeholder,
+    value: fileName,
+    readOnly: true,
+    color: errorText ? Color.DANGER : Color.FORM
+  }), React.createElement(InputFileButtonStyled, null, React.createElement(Button, {
+    id: buttonId,
+    type: "button",
+    color: "secondary",
+    size: "field",
+    view: "shape",
+    isDisabled: disabled,
+    onClick: () => {
+      var _fieldRef$current;
+      return fieldRef === null || fieldRef === void 0 || (_fieldRef$current = fieldRef.current) === null || _fieldRef$current === void 0 ? void 0 : _fieldRef$current.click();
+    },
+    icon: React.createElement(AttachmentIcon, {
+      size: "medium",
+      view: "lined"
+    })
+  }, buttonText))), !!errorText && React.createElement(InputFileErrorStyled, null, errorText));
+}

package/InputFile/index.d.ts

@@ -0,0 +1 @@
+export { InputFile } from './InputFile';

package/InputFile/index.js

@@ -0,0 +1 @@
+export { InputFile } from './InputFile';

package/InputFile/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const InputFileFieldsStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputFileButtonStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputFileInputStyled: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const InputFileInputHiddenStyled: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const InputFileErrorStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/InputFile/styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { Color, Spacing, FontSize, FontFamily, ShapeRadius } from '@pushwoosh/kit-constants';
+export const InputFileFieldsStyled = styled.div.withConfig({
+  displayName: "InputFileFieldsStyled",
+  componentId: "sc-8mwin7-0"
+})(["display:flex;position:relative;gap:", ";"], Spacing.S5);
+export const InputFileButtonStyled = styled.div.withConfig({
+  displayName: "InputFileButtonStyled",
+  componentId: "sc-8mwin7-1"
+})(["Button{display:flex;}"]);
+export const InputFileInputStyled = styled.input.withConfig({
+  displayName: "InputFileInputStyled",
+  componentId: "sc-8mwin7-2"
+})(["width:100%;height:36px;padding:0 ", ";color:#555;font-size:", ";font-family:", ";line-height:1.4;background:", ";border:1px solid ", ";border-radius:4px;box-sizing:border-box;outline:none;caret-color:", ";&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{appearance:none;}&:focus{border-color:", ";}"], Spacing.S5, FontSize.HEADING4, FontFamily.MAIN, Color.CLEAR, ({
+  color
+}) => color, Color.BRIGHT, Color.BRIGHT);
+export const InputFileInputHiddenStyled = styled(InputFileInputStyled).withConfig({
+  displayName: "InputFileInputHiddenStyled",
+  componentId: "sc-8mwin7-3"
+})(["opacity:0;position:absolute;"]);
+export const InputFileErrorStyled = styled.div.withConfig({
+  displayName: "InputFileErrorStyled",
+  componentId: "sc-8mwin7-4"
+})(["margin:", " 0;padding:", " ", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";"], Spacing.S5, Spacing.S4, Spacing.S6, Color.DANGER, ShapeRadius.DIALOG, Color.DANGER, Color.DANGER_LIGHT);
+InputFileFieldsStyled.displayName = 'InputFileFieldsStyled';
+InputFileButtonStyled.displayName = 'InputFileButtonStyled';
+InputFileInputStyled.displayName = 'InputFileInputStyled';
+InputFileInputHiddenStyled.displayName = 'InputFileInputHiddenStyled';
+InputFileErrorStyled.displayName = 'InputFileErrorStyled';

package/InputFile/types.d.ts

@@ -0,0 +1,25 @@
+export type InputFileProps = {
+    name: string;
+    fileName?: string;
+    errorText?: string;
+    fileId?: string;
+    textId?: string;
+    buttonId?: string;
+    accept?: string;
+    label?: string;
+    buttonText?: string;
+    buttonWidth?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    maxSize?: number;
+    isIgnoreFileSize?: boolean;
+    onChange: (result: any) => void;
+    onError?: (message: string, field: string) => void;
+};
+type FileProp = {
+    file: File;
+};
+export type InputFileData = FileProp & {
+    [name: string]: string;
+};
+export {};

package/InputFile/types.js

@@ -0,0 +1 @@
+export {};

package/Link/Link.d.ts

@@ -0,0 +1,5 @@
+import { type ReactElement } from 'react';
+import type { LinkPropsWithoutAs, LinkPropsWithAsTag, LinkPropsWithAsComponent } from './types';
+export declare function Link(props: LinkPropsWithoutAs): ReactElement;
+export declare function Link<AS extends keyof JSX.IntrinsicElements>(props: LinkPropsWithAsTag<AS>): ReactElement;
+export declare function Link<OuterProps extends object>(props: LinkPropsWithAsComponent<OuterProps>): ReactElement;

package/Link/Link.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LinkBox } from './styles';
+export function Link(props) {
+  const {
+    boxRef,
+    ...rest
+  } = props;
+  return React.createElement(LinkBox, {
+    ...rest,
+    ref: boxRef
+  });
+}

package/Link/index.d.ts

@@ -0,0 +1 @@
+export { Link } from './Link';

package/Link/index.js

@@ -0,0 +1 @@
+export { Link } from './Link';

package/Link/styles.d.ts

@@ -0,0 +1 @@
+export declare const LinkBox: import("styled-components").StyledComponent<"a", any, {}, never>;

package/Link/styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+export const LinkBox = styled.a.withConfig({
+  displayName: "LinkBox",
+  componentId: "sc-4gb8j5-0"
+})(["display:inline;padding:0;appearance:none;border:none;background:transparent;color:", ";text-decoration:none;cursor:pointer;&:hover{color:", ";text-decoration:underline;}&:focus-visible{outline:1px solid ", ";outline-offset:2px;}&:active{color:", ";}&:focus:not(:focus-visible){outline:none;}"], Color.PRIMARY, Color.PRIMARY_HOVER, Color.BRIGHT, Color.PRIMARY_PRESSED);
+LinkBox.displayName = 'LinkBox';

package/Link/types.d.ts

@@ -0,0 +1,21 @@
+import type { Ref, ReactNode, ComponentType } from 'react';
+export type LinkPropsWithoutAs = Omit<JSX.IntrinsicElements['a'], 'ref'> & {
+    readonly boxRef?: Ref<HTMLAnchorElement>;
+    readonly title: string;
+    readonly href: string;
+    readonly children: ReactNode;
+};
+export type LinkPropsWithAsTag<AS extends keyof JSX.IntrinsicElements> = Omit<JSX.IntrinsicElements[AS], 'ref'> & {
+    readonly boxRef?: Ref<JSX.IntrinsicElements[AS]>;
+    readonly as: AS;
+    readonly title?: string;
+    readonly href?: string;
+    readonly children: ReactNode;
+};
+export type LinkPropsWithAsComponent<OuterProps extends object> = OuterProps & {
+    readonly boxRef?: Ref<HTMLElement>;
+    readonly as: ComponentType<OuterProps>;
+    readonly title?: string;
+    readonly href?: string;
+    readonly children: ReactNode;
+};

package/Link/types.js

@@ -0,0 +1 @@
+export {};

package/Modal/components/Modal/Modal.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { ModalProps } from './types';
+export declare function Modal(props: ModalProps): ReactElement;

package/Modal/components/Modal/Modal.js

@@ -0,0 +1,51 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { modalSizes } from './maps';
+import { LockBody, ModalBox, ModalBoxTrans, ModalContainer, ModalInner } from './styles';
+function createDivElement() {
+  return document.createElement('div');
+}
+export function Modal(props) {
+  const {
+    size,
+    zIndex = 10000,
+    isOpen,
+    onClose,
+    children
+  } = props;
+  const ref = useRef();
+  const [element] = useState(createDivElement);
+  const handleClose = useCallback(event => {
+    if (event.target === event.currentTarget) {
+      onClose === null || onClose === void 0 || onClose();
+    }
+  }, [onClose]);
+  useEffect(() => {
+    var _document$body$lastCh;
+    (_document$body$lastCh = document.body.lastChild) === null || _document$body$lastCh === void 0 || _document$body$lastCh.after(element);
+    return () => element.remove();
+  }, [element]);
+  useEffect(() => {
+    if (isOpen && onClose) {
+      const onCloseEventHandler = event => {
+        if (event.key === 'Escape') {
+          onClose();
+        }
+      };
+      window.addEventListener('keydown', onCloseEventHandler);
+      return () => window.removeEventListener('keydown', onCloseEventHandler);
+    }
+  }, [isOpen, onClose]);
+  return createPortal(React.createElement(ModalBoxTrans, {
+    nodeRef: ref,
+    isOpen: isOpen
+  }, React.createElement(ModalBox, {
+    ref: ref,
+    "$zIndex": zIndex
+  }, React.createElement(LockBody, null), React.createElement(ModalInner, {
+    onMouseDown: handleClose
+  }, React.createElement(ModalContainer, {
+    "$width": modalSizes[size],
+    onClick: handleClose
+  }, typeof children === 'function' ? children() : children)))), element);
+}

package/Modal/components/Modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/Modal/components/Modal/index.js

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/Modal/components/Modal/maps.d.ts

@@ -0,0 +1,6 @@
+export declare const modalSizes: {
+    small: string;
+    medium: string;
+    large: string;
+    full: string;
+};

package/Modal/components/Modal/maps.js

@@ -0,0 +1,6 @@
+export const modalSizes = {
+  small: '380px',
+  medium: '640px',
+  large: '960px',
+  full: '100%'
+};

package/Modal/components/Modal/styles.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from 'react';
+import type { ModalBoxBaseProps } from './types';
+export declare const LockBody: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export declare const ModalBox: import("styled-components").StyledComponent<"div", any, {
+    $zIndex: number;
+}, never>;
+export declare const ModalInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare function ModalBoxBase(props: ModalBoxBaseProps): ReactElement;
+export declare const ModalBoxTrans: import("styled-components").StyledComponent<typeof ModalBoxBase, any, {}, never>;
+export declare const ModalContainer: import("styled-components").StyledComponent<"div", any, {
+    $width: string;
+}, never>;
+export {};

package/Modal/components/Modal/styles.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import styled, { createGlobalStyle } from 'styled-components';
+import { ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+const animationTimeout = 300;
+export const LockBody = createGlobalStyle(["body{overflow:hidden;position:relative;height:100%;}"]);
+export const ModalBox = styled.div.withConfig({
+  displayName: "ModalBox",
+  componentId: "sc-lejcgu-0"
+})(["position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:all;z-index:", ";"], ({
+  $zIndex
+}) => $zIndex);
+export const ModalInner = styled.div.withConfig({
+  displayName: "ModalInner",
+  componentId: "sc-lejcgu-1"
+})(["display:flex;justify-content:center;width:100vw;height:100vh;padding:", " 0;"], Spacing.S13);
+function ModalBoxBase(props) {
+  const {
+    isOpen,
+    nodeRef,
+    className,
+    children
+  } = props;
+  return React.createElement(CSSTransition, {
+    appear: true,
+    in: isOpen,
+    timeout: animationTimeout,
+    classNames: className,
+    unmountOnExit: true,
+    nodeRef: nodeRef
+  }, children);
+}
+export const ModalBoxTrans = styled(ModalBoxBase).withConfig({
+  displayName: "ModalBoxTrans",
+  componentId: "sc-lejcgu-2"
+})(["&-appear{background-color:rgb(0 0 0 / 0%);transition:background-color ", "ms;", "{opacity:0;transform:scale(0.5);}}&-appear-active{background-color:rgb(0 0 0 / 70%);", "{opacity:0.99;transform:scale(0.99);transition:opacity ", "ms,transform ", "ms;}}&-appear-done{background-color:rgb(0 0 0 / 70%);", "{opacity:1;transform:translateX(0);}}&-enter{background-color:rgb(0 0 0 / 0%);transition:background-color ", "ms;", "{opacity:0;transform:scale(0.5);}}&-enter-active{background-color:rgb(0 0 0 / 70%);", "{opacity:0.99;transform:scale(0.99);transition:opacity ", "ms,transform ", "ms;}}&-enter-done{background-color:rgb(0 0 0 / 70%);", "{opacity:1;transform:translateX(0);}}&-exit{background-color:rgba(0 0 0 / 70%);", "{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}}&-exit-active{transition:background-color ", "ms;background-color:rgb(0 0 0 / 0%);", "{opacity:0;transform:scale(0.5);}}"], animationTimeout, ModalInner, ModalInner, animationTimeout, animationTimeout, ModalInner, animationTimeout, ModalInner, ModalInner, animationTimeout, animationTimeout, ModalInner, ModalInner, animationTimeout, animationTimeout, animationTimeout, ModalInner);
+export const ModalContainer = styled.div.withConfig({
+  displayName: "ModalContainer",
+  componentId: "sc-lejcgu-3"
+})(["display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;width:", ";height:calc(100vh - 2 * ", ");vertical-align:middle;z-index:10;& > *{&:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}"], ({
+  $width
+}) => $width, Spacing.S13, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG);
+ModalBox.displayName = 'ModalBox';
+ModalInner.displayName = 'ModalInner';
+ModalContainer.displayName = 'ModalContainer';

package/Modal/components/Modal/types.d.ts

@@ -0,0 +1,13 @@
+import type { MutableRefObject, PropsWithChildren } from 'react';
+import type { modalSizes } from './maps';
+export type ModalProps = PropsWithChildren<{
+    readonly size: keyof typeof modalSizes;
+    readonly zIndex?: number;
+    readonly isOpen: boolean;
+    readonly onClose?: () => any;
+}>;
+export type ModalBoxBaseProps = PropsWithChildren<{
+    isOpen: boolean;
+    className?: string;
+    nodeRef: MutableRefObject<HTMLElement | undefined>;
+}>;

package/Modal/components/Modal/types.js

@@ -0,0 +1 @@
+export {};

package/Modal/components/ModalConfirm/ModalConfirm.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { ModalConfirmProps } from './types';
+export declare function ModalConfirm(props: ModalConfirmProps): ReactElement;

package/Modal/components/ModalConfirm/ModalConfirm.js

@@ -0,0 +1,54 @@
+import React, { useState, useCallback } from 'react';
+import { Vertical, Horizontal } from '@pushwoosh/kit-helpers';
+import { Banner } from '../../../Banner';
+import { Button } from '../../../Button';
+import { Modal } from '../Modal';
+import { ModalHeader, ModalBody, ModalFooter } from '../ModalContent';
+import { ModalTitle } from '../ModalTitle';
+export function ModalConfirm(props) {
+  const {
+    isOpen,
+    title = 'Confirm action',
+    description = '',
+    confirmButtonText = 'Confirm',
+    cancelButtonText = 'Cancel',
+    confirmButtonColor = 'primary',
+    callback,
+    onAccept,
+    onCancel
+  } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const handleConfirm = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setErrorMessage('');
+      await (callback === null || callback === void 0 ? void 0 : callback());
+      await onAccept();
+    } catch (error) {
+      setErrorMessage((error === null || error === void 0 ? void 0 : error.message) || 'Unexpected error occurred');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [callback, onAccept]);
+  return React.createElement(Modal, {
+    size: "small",
+    isOpen: isOpen,
+    onClose: onCancel
+  }, React.createElement(ModalHeader, null, React.createElement(Vertical, {
+    "$gap": 8
+  }, React.createElement(ModalTitle, null, title), errorMessage && React.createElement(Banner, {
+    type: "error",
+    title: errorMessage
+  }))), description && React.createElement(ModalBody, null, description), React.createElement(ModalFooter, null, React.createElement(Horizontal, {
+    "$justifyContent": "end",
+    "$gap": 8
+  }, React.createElement(Button, {
+    color: "secondary",
+    onClick: onCancel
+  }, cancelButtonText), React.createElement(Button, {
+    color: confirmButtonColor,
+    isLoading: isLoading,
+    onClick: handleConfirm
+  }, confirmButtonText))));
+}

package/Modal/components/ModalConfirm/ModalConfirmProvider.d.ts

@@ -0,0 +1,4 @@
+import React, { type ReactElement, type PropsWithChildren } from 'react';
+import type { ModalConfirmContextProps } from './types';
+export declare const ModalConfirmContext: React.Context<ModalConfirmContextProps | null>;
+export declare function ModalConfirmProvider(props: PropsWithChildren): ReactElement;

package/Modal/components/ModalConfirm/ModalConfirmProvider.js

@@ -0,0 +1,35 @@
+import React, { useState, useMemo, createContext } from 'react';
+import { ModalConfirm } from './ModalConfirm';
+export const ModalConfirmContext = createContext(null);
+export function ModalConfirmProvider(props) {
+  const {
+    children
+  } = props;
+  const [modalConfirmParams, setModalConfirmParams] = useState(() => ({
+    isOpen: false,
+    title: '',
+    onAccept: () => null,
+    onCancel: () => null
+  }));
+  const contextValue = useMemo(() => {
+    const closeModalConfirm = () => setModalConfirmParams(prev => ({
+      ...prev,
+      isOpen: false
+    }));
+    const openModalConfirm = params => setModalConfirmParams({
+      ...params,
+      isOpen: true,
+      onCancel: params.onCancel || closeModalConfirm,
+      onAccept: params.onAccept
+    });
+    return {
+      openModalConfirm,
+      closeModalConfirm
+    };
+  }, []);
+  return React.createElement(ModalConfirmContext.Provider, {
+    value: contextValue
+  }, children, React.createElement(ModalConfirm, {
+    ...modalConfirmParams
+  }));
+}

package/Modal/components/ModalConfirm/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { ModalConfirmContextProps } from './types';
+export declare const useModalConfirm: () => ModalConfirmContextProps;

package/Modal/components/ModalConfirm/hooks.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ModalConfirmContext } from './ModalConfirmProvider';
+export const useModalConfirm = () => {
+  const context = useContext(ModalConfirmContext);
+  if (!context) {
+    throw new Error('useModalConfirm must be used within an ModalConfirmProvider');
+  }
+  return context;
+};

package/Modal/components/ModalConfirm/index.d.ts

@@ -0,0 +1,3 @@
+export { ModalConfirm } from './ModalConfirm';
+export { ModalConfirmProvider } from './ModalConfirmProvider';
+export { useModalConfirm } from './hooks';

package/Modal/components/ModalConfirm/index.js

@@ -0,0 +1,3 @@
+export { ModalConfirm } from './ModalConfirm';
+export { ModalConfirmProvider } from './ModalConfirmProvider';
+export { useModalConfirm } from './hooks';

package/Modal/components/ModalConfirm/types.d.ts

@@ -0,0 +1,20 @@
+export type ConfirmButtonColor = 'primary' | 'secondary' | 'danger';
+export interface ModalConfirmProps {
+    isOpen: boolean;
+    title: string;
+    description?: string;
+    confirmButtonText?: string;
+    confirmButtonColor?: ConfirmButtonColor;
+    cancelButtonText?: string;
+    callback?: () => void;
+    onAccept: () => void;
+    onCancel: () => void;
+}
+export type OpenModalConfirmParams = Omit<ModalConfirmProps, 'isOpen' | 'onCancel'> & {
+    isOpen?: ModalConfirmProps['isOpen'];
+    onCancel?: () => void;
+};
+export interface ModalConfirmContextProps {
+    openModalConfirm: (params: OpenModalConfirmParams) => void;
+    closeModalConfirm: () => void;
+}

package/Modal/components/ModalConfirm/types.js

@@ -0,0 +1 @@
+export {};

package/Modal/components/ModalContent/index.d.ts

@@ -0,0 +1 @@
+export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './styled';

package/Modal/components/ModalContent/index.js

@@ -0,0 +1 @@
+export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './styled';

package/Modal/components/ModalContent/styled.d.ts

@@ -0,0 +1,19 @@
+export declare const ModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalBodyGroup: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;
+export declare const ModalBodyItem: import("styled-components").StyledComponent<"div", any, {
+    $vPadding?: boolean;
+}, never>;
+export declare const ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Modal/components/ModalContent/styled.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { Color, Spacing } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const ModalHeader = styled.div.withConfig({
+  displayName: "ModalHeader",
+  componentId: "sc-t60vr-0"
+})(["padding:", " ", " ", ";background-color:", ";"], Spacing.S7, Spacing.S7, Spacing.S3, Color.CLEAR);
+ModalHeader.displayName = 'ModalHeader';
+export const ModalBodyGroup = styled(Vertical).withConfig({
+  displayName: "ModalBodyGroup",
+  componentId: "sc-t60vr-1"
+})(["background-color:", ";gap:1px;"], Color.DIVIDER);
+ModalBodyGroup.displayName = 'ModalBodyGroup';
+export const ModalBodyItem = styled.div.withConfig({
+  displayName: "ModalBodyItem",
+  componentId: "sc-t60vr-2"
+})(["padding:", " ", ";background-color:", ";"], ({
+  $vPadding
+}) => $vPadding ? Spacing.S7 : 0, Spacing.S7, Color.CLEAR);
+export const ModalBody = styled.div.withConfig({
+  displayName: "ModalBody",
+  componentId: "sc-t60vr-3"
+})(["background-color:", ";overflow-y:auto;&:not(:has(> ", ")){padding:", ";&:not(:first-child){padding-top:0;}}"], Color.CLEAR, ModalBodyGroup, Spacing.S7);
+ModalBody.displayName = 'ModalBody';
+export const ModalFooter = styled.div.withConfig({
+  displayName: "ModalFooter",
+  componentId: "sc-t60vr-4"
+})(["padding:", ";background-color:", ";border-top:1px solid ", ";"], Spacing.S7, Color.CLEAR, Color.DIVIDER);
+ModalFooter.displayName = 'ModalFooter';

package/Modal/components/ModalTitle/ModalTitle.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { ModalTitleProps } from './types';
+export declare function ModalTitle(props: ModalTitleProps): ReactElement;

package/Modal/components/ModalTitle/ModalTitle.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { ModalTitleBox } from './styles';
+import { GhostButton } from '../../../Button';
+export function ModalTitle(props) {
+  const {
+    children,
+    onClose,
+    ...rest
+  } = props;
+  return React.createElement(ModalTitleBox, {
+    ...rest
+  }, children, onClose && React.createElement(GhostButton, {
+    onClick: onClose
+  }, React.createElement(CloseIcon, {
+    size: "medium"
+  })));
+}

package/Modal/components/ModalTitle/index.d.ts

@@ -0,0 +1 @@
+export { ModalTitle } from './ModalTitle';

package/Modal/components/ModalTitle/index.js

@@ -0,0 +1 @@
+export { ModalTitle } from './ModalTitle';

package/Modal/components/ModalTitle/styles.d.ts

@@ -0,0 +1 @@
+export declare const ModalTitleBox: import("styled-components").StyledComponent<"h2", any, {}, never>;

package/Modal/components/ModalTitle/styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
+import { GhostButton } from '../../../Button';
+export const ModalTitleBox = styled.h2.withConfig({
+  displayName: "ModalTitleBox",
+  componentId: "sc-8qbijb-0"
+})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;font-size:", ";font-weight:", ";line-height:22px;letter-spacing:0;margin:0;", "{color:", ";cursor:pointer;&:hover{color:", ";}}"], FontSize.HEADING2, FontWeight.BOLD, GhostButton, Color.LOCKED, Color.MAIN);
+ModalTitleBox.displayName = 'ModalTitleBox';