@pushwoosh/dumb-components 1.0.1 → 1.0.2

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';

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export interface ModalTitleProps {
+    readonly onClose?: () => void;
+    readonly children: ReactNode;
+}

package/Modal/components/ModalTitle/types.js

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

package/Modal/index.d.ts

@@ -0,0 +1,4 @@
+export { Modal } from './components/Modal';
+export { ModalTitle } from './components/ModalTitle';
+export { ModalConfirm, ModalConfirmProvider, useModalConfirm, } from './components/ModalConfirm';
+export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './components/ModalContent';

package/Modal/index.js

@@ -0,0 +1,4 @@
+export { Modal } from './components/Modal';
+export { ModalTitle } from './components/ModalTitle';
+export { ModalConfirm, ModalConfirmProvider, useModalConfirm } from './components/ModalConfirm';
+export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './components/ModalContent';

package/PageHeader/components/AutosizeInput/AutosizeInput.d.ts

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

package/PageHeader/components/AutosizeInput/AutosizeInput.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { EditIcon } from '@pushwoosh/kit-icons';
+import { DEFAULT_EMPTY_VALUE, WIDTH_EMPTY_VALUE } from './constants';
+import { RootBox, InputBox, InputStyled, PromptBox } from './styles';
+export function AutosizeInput(props) {
+  const {
+    placeholder,
+    maxLength,
+    value,
+    onChange,
+    onComplete
+  } = props;
+  const defaultValue = useRef(value);
+  const inputRef = useRef(null);
+  const hiddenValueRef = useRef(null);
+  const hiddenPlaceholderRef = useRef(null);
+  const [width, setWidth] = useState(value ? value.length : WIDTH_EMPTY_VALUE);
+  useEffect(() => {
+    if (!defaultValue.current) {
+      defaultValue.current = DEFAULT_EMPTY_VALUE;
+      onChange === null || onChange === void 0 || onChange(DEFAULT_EMPTY_VALUE);
+    }
+  }, [defaultValue, onChange]);
+  useEffect(() => {
+    if (value) {
+      setWidth(hiddenValueRef.current.offsetWidth + 15);
+    } else {
+      const placeholderWidth = hiddenPlaceholderRef.current.offsetWidth ? hiddenPlaceholderRef.current.offsetWidth + 15 : 0;
+      setWidth(placeholderWidth || WIDTH_EMPTY_VALUE);
+    }
+  }, [value]);
+  const onKeyDown = event => {
+    if (event.key === 'Enter') {
+      var _inputRef$current;
+      event.preventDefault();
+      inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+    }
+    if (event.key === 'Escape') {
+      var _inputRef$current2;
+      event.preventDefault();
+      onChange === null || onChange === void 0 || onChange(defaultValue.current);
+      setWidth(defaultValue.current.length);
+      inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+    }
+  };
+  const onChangeHandler = event => {
+    const formattedValue = maxLength ? event.currentTarget.value.slice(0, maxLength) : event.currentTarget.value;
+    onChange === null || onChange === void 0 || onChange(formattedValue.replace(/\n/g, ''));
+  };
+  const onBlur = () => {
+    if (value === '') {
+      onChange === null || onChange === void 0 || onChange(defaultValue.current);
+    }
+    setTimeout(() => {
+      var _inputRef$current3;
+      return onComplete === null || onComplete === void 0 ? void 0 : onComplete(inputRef === null || inputRef === void 0 || (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value);
+    }, 100);
+  };
+  return React.createElement(RootBox, null, React.createElement(InputBox, null, React.createElement(InputStyled, {
+    ref: inputRef,
+    width: width,
+    value: value,
+    placeholder: placeholder,
+    onKeyDown: onKeyDown,
+    onChange: onChangeHandler,
+    onBlur: onBlur
+  }), React.createElement("span", {
+    ref: hiddenValueRef
+  }, value), React.createElement("span", {
+    ref: hiddenPlaceholderRef
+  }, placeholder)), React.createElement(PromptBox, {
+    onClick: () => {
+      var _inputRef$current4;
+      return (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
+    }
+  }, React.createElement(EditIcon, {
+    size: "small",
+    view: "filled"
+  })));
+}

package/PageHeader/components/AutosizeInput/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_EMPTY_VALUE = "Untitled";
+export declare const WIDTH_EMPTY_VALUE = 90;

package/PageHeader/components/AutosizeInput/constants.js

@@ -0,0 +1,2 @@
+export const DEFAULT_EMPTY_VALUE = 'Untitled';
+export const WIDTH_EMPTY_VALUE = 90;

package/PageHeader/components/AutosizeInput/index.d.ts

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

package/PageHeader/components/AutosizeInput/index.js

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

package/PageHeader/components/AutosizeInput/styles.d.ts

@@ -0,0 +1,5 @@
+import type { InputStyledProps } from './types';
+export declare const PromptBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputStyled: import("styled-components").StyledComponent<"input", any, InputStyledProps, never>;
+export declare const RootBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/PageHeader/components/AutosizeInput/styles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { Color, Spacing, FontSize, FontWeight } from '@pushwoosh/kit-constants';
+export const PromptBox = styled.div.withConfig({
+  displayName: "PromptBox",
+  componentId: "sc-191i2ot-0"
+})(["display:flex;color:", ";font-weight:", ";font-size:", ";line-height:18px;> div{color:", ";cursor:pointer;}> span{display:none;}"], Color.PHANTOM, FontWeight.REGULAR, FontSize.SMALL, Color.PRIMARY);
+export const InputBox = styled.div.withConfig({
+  displayName: "InputBox",
+  componentId: "sc-191i2ot-1"
+})(["display:flex;flex-direction:column;overflow:hidden;"]);
+export const InputStyled = styled.input.withConfig({
+  displayName: "InputStyled",
+  componentId: "sc-191i2ot-2"
+})(["color:#0e72e5;width:", "px;max-width:100%;border:0;padding:0;margin:3px ", " 0 0;background:#0000;font-weight:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-bottom:1px dashed ", ";&::placeholder{color:", ";}&:active,&:hover,&:focus{border-bottom:1px dashed ", ";outline-offset:0;outline:0;}&:hover{color:", ";cursor:pointer;}&:active{opacity:0.5;cursor:pointer;}"], ({
+  width
+}) => width - 10, Spacing.S1, Color.PHANTOM, Color.PHANTOM, Color.PHANTOM, Color.PRIMARY_HOVER);
+export const RootBox = styled.div.withConfig({
+  displayName: "RootBox",
+  componentId: "sc-191i2ot-3"
+})(["display:flex;align-items:center;overflow:hidden;flex-grow:1;& > ", " > span{position:absolute;visibility:hidden;}&:focus-within{", " > div{display:none;}", " > span{display:block;white-space:nowrap;}", "{color:", ";}}"], InputBox, PromptBox, PromptBox, InputStyled, Color.MAIN);

package/PageHeader/components/AutosizeInput/types.d.ts

@@ -0,0 +1,10 @@
+export interface AutosizeInputProps {
+    value: string;
+    placeholder?: string | undefined;
+    maxLength?: number | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onComplete?: ((value: string) => void) | undefined;
+}
+export interface InputStyledProps {
+    width: number;
+}

package/PageHeader/components/AutosizeInput/types.js

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

package/PageHeader/components/PageHeader/PageHeader.d.ts

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

package/PageHeader/components/PageHeader/PageHeader.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Columns } from '@pushwoosh/kit-helpers';
+import { ArrowRoundIcon } from '@pushwoosh/kit-icons';
+import { H1 } from '@pushwoosh/kit-typography';
+import { Button } from '../../../Button';
+import { PageHeaderError } from '../PageHeaderError';
+import { RootBox, BackButton, TitleBox, DescriptionBox, ActionsBox, MoreActionsBox } from './styles';
+export function PageHeader(props) {
+  const {
+    title,
+    description,
+    error,
+    resolveErrorText,
+    submitText,
+    cancelText,
+    isLoadingSubmit,
+    moreActions,
+    onBack,
+    onSubmit,
+    onCancel,
+    onResolveError
+  } = props;
+  const hasActions = Boolean(onSubmit || onCancel);
+  const hasActionsBox = hasActions || Boolean(moreActions);
+  return React.createElement(RootBox, null, React.createElement(Columns, {
+    "$sizes": "minmax(0, 1fr) max-content",
+    "$gap": 24
+  }, React.createElement(TitleBox, null, onBack && React.createElement(BackButton, null, React.createElement(Button, {
+    color: "primary",
+    view: "ghost",
+    onClick: onBack
+  }, React.createElement(ArrowRoundIcon, {
+    direction: "left",
+    size: "medium",
+    view: "filled"
+  }))), React.createElement(H1, null, title)), hasActionsBox && React.createElement(ActionsBox, null, !!moreActions && React.createElement(MoreActionsBox, {
+    hasActions: hasActions
+  }, moreActions), onCancel && React.createElement(Button, {
+    color: "secondary",
+    onClick: onCancel
+  }, cancelText || 'Cancel'), onSubmit && React.createElement(Button, {
+    color: "primary",
+    type: "submit",
+    onClick: onSubmit,
+    isLoading: !!isLoadingSubmit
+  }, submitText || 'Create'))), !!error && React.createElement(PageHeaderError, {
+    error: error,
+    resolveErrorText: resolveErrorText,
+    onResolveError: onResolveError
+  }), !!description && React.createElement(DescriptionBox, null, description));
+}

package/PageHeader/components/PageHeader/index.d.ts

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

package/PageHeader/components/PageHeader/index.js

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

package/PageHeader/components/PageHeader/styles.d.ts

@@ -0,0 +1,9 @@
+import { Paragraph } from '@pushwoosh/kit-typography';
+export declare const RootBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BackButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionsBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MoreActionsBox: import("styled-components").StyledComponent<"div", any, {
+    hasActions: boolean;
+}, never>;
+export declare const DescriptionBox: import("styled-components").StyledComponent<typeof Paragraph, any, {}, never>;

package/PageHeader/components/PageHeader/styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Paragraph } from '@pushwoosh/kit-typography';
+export const RootBox = styled.div.withConfig({
+  displayName: "RootBox",
+  componentId: "sc-1qwo99q-0"
+})(["display:flex;flex-direction:column;"]);
+export const BackButton = styled.div.withConfig({
+  displayName: "BackButton",
+  componentId: "sc-1qwo99q-1"
+})(["min-width:36px;max-width:36px;& button{border:0;padding:0;}"]);
+export const TitleBox = styled.div.withConfig({
+  displayName: "TitleBox",
+  componentId: "sc-1qwo99q-2"
+})(["display:flex;align-items:center;justify-content:start;flex-shrink:0;gap:", ";"], Spacing.S3);
+export const ActionsBox = styled.div.withConfig({
+  displayName: "ActionsBox",
+  componentId: "sc-1qwo99q-3"
+})(["display:flex;justify-content:flex-end;gap:", ";"], Spacing.S3);
+export const MoreActionsBox = styled.div.withConfig({
+  displayName: "MoreActionsBox",
+  componentId: "sc-1qwo99q-4"
+})(["display:flex;margin-right:", ";"], ({
+  hasActions
+}) => hasActions ? Spacing.S5 : '0');
+export const DescriptionBox = styled(Paragraph).withConfig({
+  displayName: "DescriptionBox",
+  componentId: "sc-1qwo99q-5"
+})(["margin-top:", ";"], Spacing.S5);

package/PageHeader/components/PageHeader/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface PageHeaderProps {
+    title: ReactNode;
+    description?: ReactNode | string;
+    error?: string;
+    resolveErrorText?: string;
+    submitText?: string;
+    cancelText?: string;
+    isLoadingSubmit?: boolean;
+    moreActions?: ReactElement;
+    onBack?: () => void;
+    onSubmit?: (params?: any) => void;
+    onCancel?: () => void;
+    onResolveError?: () => void;
+}

package/PageHeader/components/PageHeader/types.js

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

package/PageHeader/components/PageHeaderEditable/PageHeaderEditable.d.ts

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