@pushwoosh/dumb-components 1.0.0 → 1.0.2

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/NumberPicker/NumberPicker.js

@@ -1,9 +1,9 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { Vertical, useMount, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { ChevronIcon } from '@pushwoosh/kit-icons';
-import { AutosizeInput } from './AutosizeInput';
+import { AutosizeInput } from './components/AutosizeInput';
 import { intVal, isStringInteger } from './helpers';
-import { Hint, SingleInputFrame, InputStyled } from './styled';
+import { Hint, SingleInputFrame, InputStyled } from './styles';
 export function NumberPicker(props) {
   const {
     value,

package/NumberPicker/{AutosizeInput.d.ts → components/AutosizeInput/AutosizeInput.d.ts}

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

package/NumberPicker/{AutosizeInput.js → components/AutosizeInput/AutosizeInput.js}

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { minimalWidth } from './AutosizeInput.constants';
-import { Hidden } from './AutosizeInput.styled';
-import { InputStyled } from './styled';
+import { minimalWidth } from './constants';
+import { Hidden } from './styles';
+import { InputStyled } from '../../styles';
 export function AutosizeInput(props) {
   const {
     value,

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

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

package/NumberPicker/components/AutosizeInput/index.js

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

package/NumberPicker/{AutosizeInput.styled.js → components/AutosizeInput/styles.js}

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
 export const Hidden = styled.span.withConfig({
   displayName: "Hidden",
-  componentId: "sc-dce14p-0"
+  componentId: "sc-1nzsz1n-0"
 })(["position:absolute;visibility:hidden;"]);

package/NumberPicker/components/AutosizeInput/types.js

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

package/NumberPicker/{styled.js → styles.js}

@@ -4,15 +4,15 @@ export const InputStyled = styled.input.attrs({
   type: 'text'
 }).withConfig({
   displayName: "InputStyled",
-  componentId: "sc-6ibrwh-0"
+  componentId: "sc-vq8xnz-0"
 })(["&:disabled{background-color:", ";}"], Color.FROZEN);
 export const Hint = styled.div.withConfig({
   displayName: "Hint",
-  componentId: "sc-6ibrwh-1"
+  componentId: "sc-vq8xnz-1"
 })(["display:flex;align-items:center;font-size:100%;line-height:initial;padding-right:", ";color:", ";pointer-events:none;"], Spacing.S3, Color.PHANTOM);
 export const SingleInputFrame = styled.div.withConfig({
   displayName: "SingleInputFrame",
-  componentId: "sc-6ibrwh-2"
+  componentId: "sc-vq8xnz-2"
 })(["display:inline-grid;grid-template-columns:", ";box-sizing:border-box;align-items:center;height:", ";position:relative;padding-left:", ";color:", ";border:1px solid ", ";border-radius:", ";background-color:", ";cursor:pointer;pointer-events:", ";&:focus-within{border-color:", ";}& > input{color:", ";height:34px;border:none;padding:0;outline:none;line-height:140%;}& > div:last-of-type{height:34px;padding-left:1px;background-color:", ";border-radius:0 ", " ", " 0;& > div{display:flex;justify-content:center;align-items:center;color:", ";background-color:", ";cursor:pointer;&:hover > *{transform:scale(1.3);}&:first-of-type{border-top-right-radius:", ";}&:last-of-type{border-bottom-right-radius:", ";}}}"], ({
   $hasHint
 }) => $hasHint ? '1fr max-content 21px' : '1fr 21px', UnitSize.FIELD_HEIGHT, Spacing.S4, ({

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;

package/PageHeader/components/PageHeaderEditable/PageHeaderEditable.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Columns } from '@pushwoosh/kit-helpers';
+import { ArrowRoundIcon } from '@pushwoosh/kit-icons';
+import { Button } from '../../../Button';
+import { AutosizeInput } from '../AutosizeInput';
+import { PageHeaderError } from '../PageHeaderError';
+import { PageHeaderSkeleton } from '../PageHeaderSkeleton';
+import { RootBox, BackButton, TitleBox, DescriptionBox, AutosizeInputBox, ActionsBox, MoreActionsBox } from './styles';
+export function PageHeaderEditable(props) {
+  const {
+    title,
+    description,
+    error,
+    resolveErrorText,
+    value,
+    maxLength,
+    placeholder,
+    submitText,
+    cancelText,
+    isLoading,
+    isLoadingSubmit,
+    moreActions,
+    onBack,
+    onChange,
+    onComplete,
+    onSubmit,
+    onCancel,
+    onResolveError
+  } = props;
+  if (isLoading) {
+    return React.createElement(PageHeaderSkeleton, null);
+  }
+  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(AutosizeInputBox, null, title, value !== undefined && React.createElement(AutosizeInput, {
+    placeholder: placeholder,
+    maxLength: maxLength,
+    value: value,
+    onChange: onChange,
+    onComplete: onComplete
+  }))), 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: () => value ? onSubmit(value) : null,
+    isLoading: !!isLoadingSubmit
+  }, submitText || 'Create'))), !!error && React.createElement(PageHeaderError, {
+    error: error,
+    resolveErrorText: resolveErrorText,
+    onResolveError: onResolveError
+  }), !!description && React.createElement(DescriptionBox, null, description));
+}

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

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

package/PageHeader/components/PageHeaderEditable/index.js

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

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

@@ -0,0 +1,10 @@
+import { H2, 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 AutosizeInputBox: import("styled-components").StyledComponent<typeof H2, 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/PageHeaderEditable/styles.js

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

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

@@ -0,0 +1,21 @@
+import type { ReactElement } from 'react';
+export interface PageHeaderEditableProps {
+    title: string;
+    description?: string;
+    error?: string;
+    resolveErrorText?: string;
+    value?: string;
+    maxLength?: number;
+    placeholder?: string;
+    submitText?: string;
+    cancelText?: string;
+    isLoading?: boolean;
+    isLoadingSubmit?: boolean;
+    moreActions?: ReactElement;
+    onBack?: () => void;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onCancel?: () => void;
+    onResolveError?: () => void;
+}

package/PageHeader/components/PageHeaderEditable/types.js

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

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

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

package/PageHeader/components/PageHeaderError/PageHeaderError.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DangerTriangleIcon } from '@pushwoosh/kit-icons';
+import { RootBox, ErrorIconBox, ErrorText, ResolveError } from './styles';
+export function PageHeaderError(props) {
+  const {
+    error,
+    resolveErrorText,
+    onResolveError
+  } = props;
+  return React.createElement(RootBox, null, React.createElement(ErrorIconBox, null, React.createElement(DangerTriangleIcon, {
+    color: "white",
+    size: "small",
+    view: "filled"
+  })), React.createElement(ErrorText, null, error), resolveErrorText && onResolveError && React.createElement(ResolveError, {
+    view: "ghost",
+    color: "danger",
+    onClick: onResolveError
+  }, resolveErrorText));
+}

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

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

package/PageHeader/components/PageHeaderError/index.js

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

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

@@ -0,0 +1,6 @@
+import { H4 } from '@pushwoosh/kit-typography';
+import { Button } from '../../../Button';
+export declare const RootBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorIconBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorText: import("styled-components").StyledComponent<typeof H4, any, {}, never>;
+export declare const ResolveError: typeof Button;

package/PageHeader/components/PageHeaderError/styles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { Color, Spacing, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { H4 } from '@pushwoosh/kit-typography';
+import { Button } from '../../../Button';
+export const RootBox = styled.div.withConfig({
+  displayName: "RootBox",
+  componentId: "sc-1lsctcc-0"
+})(["display:flex;align-items:center;padding-right:", ";margin-top:", ";background:", ";"], Spacing.S3, Spacing.S5, Color.DANGER_LIGHT);
+export const ErrorIconBox = styled.div.withConfig({
+  displayName: "ErrorIconBox",
+  componentId: "sc-1lsctcc-1"
+})(["display:flex;align-items:center;justify-content:center;width:32px;height:36px;padding:", ";border-radius:4px 0 0 4px;background:", ";"], Spacing.S3, Color.DANGER);
+export const ErrorText = styled(H4).withConfig({
+  displayName: "ErrorText",
+  componentId: "sc-1lsctcc-2"
+})(["padding:", " ", ";"], Spacing.S3, Spacing.S4);
+export const ResolveError = styled(Button).withConfig({
+  displayName: "ResolveError",
+  componentId: "sc-1lsctcc-3"
+})(["margin-left:auto;font-size:", ";line-height:", ";font-weight:", ";text-transform:uppercase;&:hover{background:transparent;}"], FontSize.SMALL, LineHeight.SMALL, FontWeight.BOLD);

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

@@ -0,0 +1,5 @@
+export interface PageHeaderErrorProps {
+    error: string;
+    resolveErrorText?: string | undefined;
+    onResolveError?: (() => void) | undefined;
+}

package/PageHeader/components/PageHeaderError/types.js

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

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

@@ -0,0 +1,2 @@
+import { type ReactElement } from 'react';
+export declare function PageHeaderSkeleton(): ReactElement;

package/PageHeader/components/PageHeaderSkeleton/PageHeaderSkeleton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { RootBox, SkeletonStyled } from './styles';
+export function PageHeaderSkeleton() {
+  return React.createElement(RootBox, null, React.createElement(Horizontal, {
+    "$gap": 16
+  }, React.createElement(SkeletonStyled, null), React.createElement(SkeletonStyled, {
+    width: 60
+  }), React.createElement(SkeletonStyled, {
+    width: 60
+  })), React.createElement(Horizontal, {
+    "$gap": 16
+  }, React.createElement(SkeletonStyled, {
+    width: 68,
+    height: 36
+  }), React.createElement(SkeletonStyled, {
+    width: 68,
+    height: 36
+  })));
+}

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

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

package/PageHeader/components/PageHeaderSkeleton/index.js

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

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

@@ -0,0 +1,5 @@
+export declare const RootBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SkeletonStyled: import("styled-components").StyledComponent<"div", any, {
+    width?: number;
+    height?: number;
+}, never>;