@pushwoosh/dumb-components 1.0.0 → 1.0.1

package/CardMetric/CardMetric.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { InfoRoundIcon, ChevronIcon } from '@pushwoosh/kit-icons';
+import { Spinner } from '../Spinner';
+import { Tooltip } from '../Tooltip';
+import { CardChildren } from './CardChildren';
+import { CardContainer, CardHeader, CardTitle, CardInfo, CardMetricValue, CardExtraMetric, CardDescription, CardHeaderLeft } from './styles';
+export function CardMetric(props) {
+  const {
+    view = 'rounded',
+    focus = false,
+    title = '',
+    tooltip = '',
+    description = '',
+    loading = false,
+    collapse = undefined,
+    metric = undefined,
+    extraMetric = undefined,
+    extraMetricColor = Color.MAIN,
+    headerExtra = undefined,
+    children,
+    ...otherProps
+  } = props;
+  const [visibleInfo, setVisibleInfo] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(!!(collapse !== null && collapse !== void 0 && collapse.isCollapsed));
+  const onMouseOver = () => setVisibleInfo(true);
+  const onMouseOut = () => setVisibleInfo(false);
+  return React.createElement(CardContainer, {
+    view: view,
+    focus: focus,
+    ...otherProps
+  }, (!!title || !!headerExtra) && React.createElement(CardHeader, null, React.createElement(CardHeaderLeft, null, React.createElement(CardTitle, {
+    onClick: () => {
+      if (collapse !== undefined) {
+        setIsCollapsed(prevState => !prevState);
+      }
+    },
+    collapsable: collapse !== undefined
+  }, title, collapse !== undefined && React.createElement(ChevronIcon, {
+    direction: isCollapsed ? 'down' : 'up',
+    size: "small"
+  }), React.createElement(CardInfo, {
+    hide: !tooltip,
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut
+  }, React.createElement(Tooltip, {
+    isVisible: visibleInfo,
+    content: tooltip
+  }, React.createElement("div", null, React.createElement(InfoRoundIcon, {
+    size: "small",
+    view: "lined",
+    color: visibleInfo ? Color.PRIMARY_HOVER : Color.SOFT
+  }))))), metric !== undefined && (loading ? React.createElement(Spinner, {
+    size: "medium"
+  }) : React.createElement(CardMetricValue, null, metric, React.createElement(CardExtraMetric, {
+    color: extraMetricColor
+  }, extraMetric)))), React.createElement("div", null, headerExtra)), React.createElement(CardChildren, {
+    loading: loading,
+    collapse: collapse,
+    isCollapsed: isCollapsed
+  }, children), !!description && React.createElement(CardDescription, null, description));
+}

package/CardMetric/index.d.ts

@@ -0,0 +1,2 @@
+export { CardMetric } from './CardMetric';
+export type { CardMetricProps } from './types';

package/CardMetric/index.js

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

package/CardMetric/styles.d.ts

@@ -0,0 +1,13 @@
+import type { CardContainerProps, CardTitleProps, CollapseContainerProps } from './types';
+export declare const CardContainer: import("styled-components").StyledComponent<"div", any, CardContainerProps, never>;
+export declare const CardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardHeaderLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardTitle: import("styled-components").StyledComponent<"div", any, CardTitleProps, never>;
+export declare const CardInfo: import("styled-components").StyledComponent<"div", any, {
+    hide: boolean;
+}, never>;
+export declare const CardMetricValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardExtraMetric: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollapseContainer: import("styled-components").StyledComponent<"div", any, CollapseContainerProps, never>;
+export declare const CollapseInner: import("styled-components").StyledComponent<"div", any, CollapseContainerProps, never>;

package/CardMetric/styles.js

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import { Color, Spacing, FontSize, FontWeight } from '@pushwoosh/kit-constants';
+export const CardContainer = styled.div.withConfig({
+  displayName: "CardContainer",
+  componentId: "sc-17snd37-0"
+})(["display:flex;color:", ";background-color:white;flex-direction:column;scroll-margin:4px;outline-style:solid;gap:", ";padding:", ";border-radius:", ";border-bottom:", ";outline-color:", ";outline-width:", ";"], Color.MAIN, Spacing.S4, ({
+  view
+}) => view === 'stacking' ? '24px' : '16px', ({
+  view
+}) => view === 'stacking' ? 0 : '4px', ({
+  view,
+  focus
+}) => view === 'stacking' && !focus ? `1px solid ${Color.DIVIDER}` : 'none', ({
+  focus
+}) => focus ? Color.BRIGHT : Color.DIVIDER, ({
+  view,
+  focus
+}) => {
+  if (focus) {
+    return '4px';
+  }
+  if (view === 'stacking') {
+    return 0;
+  }
+  return '1px';
+});
+export const CardHeader = styled.div.withConfig({
+  displayName: "CardHeader",
+  componentId: "sc-17snd37-1"
+})(["display:flex;justify-content:space-between;align-items:start;gap:", ";"], Spacing.S3);
+export const CardHeaderLeft = styled.div.withConfig({
+  displayName: "CardHeaderLeft",
+  componentId: "sc-17snd37-2"
+})(["display:flex;flex-direction:column;flex:1;gap:", ";"], Spacing.S3);
+export const CardTitle = styled.div.withConfig({
+  displayName: "CardTitle",
+  componentId: "sc-17snd37-3"
+})(["display:flex;align-items:center;text-transform:uppercase;font-size:", ";color:", ";cursor:", ";gap:", ";"], FontSize.SMALL, ({
+  collapsable
+}) => collapsable ? Color.SOFT : Color.MAIN, ({
+  collapsable
+}) => collapsable ? 'pointer' : 'auto', Spacing.S1);
+export const CardInfo = styled.div.withConfig({
+  displayName: "CardInfo",
+  componentId: "sc-17snd37-4"
+})(["display:", ";cursor:pointer;"], ({
+  hide
+}) => hide ? 'none' : 'block');
+export const CardMetricValue = styled.div.withConfig({
+  displayName: "CardMetricValue",
+  componentId: "sc-17snd37-5"
+})(["display:flex;align-items:start;justify-content:start;font-size:", ";font-weight:", ";gap:", ";"], FontSize.HEADING1, FontWeight.MEDIUM, Spacing.S1);
+export const CardExtraMetric = styled.div.withConfig({
+  displayName: "CardExtraMetric",
+  componentId: "sc-17snd37-6"
+})(["color:", ";font-size:", ";"], ({
+  color
+}) => color, FontSize.REGULAR);
+export const CardDescription = styled.div.withConfig({
+  displayName: "CardDescription",
+  componentId: "sc-17snd37-7"
+})(["color:", ";"], Color.LOCKED);
+export const CollapseContainer = styled.div.withConfig({
+  displayName: "CollapseContainer",
+  componentId: "sc-17snd37-8"
+})(["display:grid;grid-template-rows:", ";transition:grid-template-rows 0.5s ease-out;"], ({
+  isCollapsed
+}) => isCollapsed ? '0fr' : '1fr');
+export const CollapseInner = styled.div.withConfig({
+  displayName: "CollapseInner",
+  componentId: "sc-17snd37-9"
+})(["overflow:", ";"], ({
+  isCollapsed
+}) => isCollapsed ? 'hidden' : 'auto');

package/CardMetric/types.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement, ReactNode } from 'react';
+export type CardMetricProps = {
+    view?: 'rounded' | 'stacking';
+    focus?: boolean;
+    title?: string | ReactElement;
+    tooltip?: string;
+    loading?: boolean;
+    collapse?: {
+        isCollapsed: boolean;
+    };
+    description?: string;
+    metric?: string | number;
+    extraMetric?: string | number;
+    extraMetricColor?: string;
+    headerExtra?: ReactElement;
+    [key: string]: any;
+};
+export type CardContainerProps = {
+    view: 'rounded' | 'stacking';
+    focus: boolean;
+};
+export type CardTitleProps = {
+    collapsable: boolean;
+};
+export type CollapseContainerProps = {
+    isCollapsed: boolean;
+    children: ReactNode;
+};
+export type CardChildrenProps = {
+    loading: boolean;
+    collapse?: object;
+    isCollapsed: boolean;
+    children: ReactNode;
+};

package/Checkbox/Checkbox.d.ts

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

package/Checkbox/Checkbox.js

@@ -0,0 +1,47 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { NativeLabel, NativeCheckbox } from './styles';
+// eslint-disable-next-line prefer-const
+let counter = 0;
+export function Checkbox(props) {
+  const {
+    label,
+    id,
+    name,
+    value,
+    color,
+    activeCheckboxColor,
+    isChecked,
+    isDisabled,
+    isIndeterminate,
+    onChange,
+    className
+  } = props;
+  const [localId] = useState(() => {
+    if (id) {
+      return id;
+    }
+    const newCounter = counter + 1;
+    return `checkbox-${newCounter}`;
+  });
+  const checkboxRef = useRef(null);
+  useEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = isIndeterminate ?? false;
+    }
+  }, [checkboxRef, isIndeterminate]);
+  return React.createElement(NativeLabel, {
+    htmlFor: localId,
+    "$color": color,
+    className: className
+  }, React.createElement(NativeCheckbox, {
+    type: "checkbox",
+    id: localId,
+    ref: checkboxRef,
+    value: value,
+    color: activeCheckboxColor,
+    name: name,
+    checked: isChecked,
+    disabled: isDisabled,
+    onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.checked)
+  }), label && React.createElement("span", null, label));
+}

package/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './types';

package/Checkbox/index.js

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

package/Checkbox/maps.d.ts

@@ -0,0 +1,3 @@
+import { Color } from '@pushwoosh/kit-constants';
+import type { TextColor } from './types';
+export declare const ColorMap: Record<TextColor, Color>;

package/Checkbox/maps.js

@@ -0,0 +1,7 @@
+import { Color } from '@pushwoosh/kit-constants';
+export const ColorMap = {
+  main: Color.MAIN,
+  primary: Color.PRIMARY,
+  danger: Color.DANGER,
+  current: Color.CURRENT
+};

package/Checkbox/styles.d.ts

@@ -0,0 +1,9 @@
+import type { TextColor } from './types';
+export declare const NativeCheckbox: import("styled-components").StyledComponent<"input", any, {
+    type: "checkbox";
+} & {
+    color?: string;
+}, "type">;
+export declare const NativeLabel: import("styled-components").StyledComponent<"label", any, {
+    $color?: TextColor;
+}, never>;

package/Checkbox/styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { Color, Spacing, FontSize, LineHeight } from '@pushwoosh/kit-constants';
+import { ColorMap } from './maps';
+export const NativeCheckbox = styled.input.attrs({
+  type: 'checkbox'
+}).withConfig({
+  displayName: "NativeCheckbox",
+  componentId: "sc-1lw3rny-0"
+})(["--active:", ";--active-inner:", ";--focus:2px rgba(39,94,254,.3);--border:#BBC1E1;--border-hover:#275EFE;--default-background:", ";--disabled:#F6F8FF;--disabled-inner:#E1E6F9;appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:2px solid var(--bc,var(--border));border-radius:4px;box-sizing:border-box;background:var(--background,var(--default-background));transition:background 0.3s,border-color 0.3s,box-shadow 0.2s;&:checked{--background:var(--active);--bc:var(--active);--d-o:.3s;--d-t:.6s;--o:1;--r:43deg;}&:disabled{--background:var(--disabled);cursor:not-allowed;opacity:0.9;}&:disabled:checked{--background:var(--disabled-inner);--bc:var(--border);}&:hover:not(:checked):not(:disabled){--bc:var(--border-hover);}&:focus{box-shadow:0 0 0 var(--focus);}&:after{content:\"\";display:block;position:absolute;transition:transform var(--d-t,0.3s),opacity var(--d-o,0.2s);opacity:var(--o,0);width:4px;height:8px;border:1px solid var(--active-inner);border-top:0;border-left:0;left:5px;top:1px;transform:rotate(var(--r,20deg)) scale(1.4);}&:indeterminate{--background:var(--active);--bc:var(--active);}&:indeterminate:after{width:11.5px;height:1.5px;top:6.25px;left:1.3px;border:none;background-color:var(--active-inner);transform:none;opacity:var(--o,1);transition:width var(--d-t,0.3s),height var(--d-o,0.2s),opacity var(--d-o,0.2s);}&:disabled + span{cursor:not-allowed;}"], ({
+  color
+}) => color ?? Color.PRIMARY, Color.CLEAR, Color.CLEAR);
+export const NativeLabel = styled.label.withConfig({
+  displayName: "NativeLabel",
+  componentId: "sc-1lw3rny-1"
+})(["font-size:", ";line-height:", ";", " user-select:none;& > ", "{margin:1px;&:not(:last-child){margin-right:", ";}}"], FontSize.REGULAR, LineHeight.REGULAR, ({
+  $color
+}) => $color && `color: ${ColorMap[$color]};`, NativeCheckbox, Spacing.S3);

package/Checkbox/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type TextColor = 'main' | 'primary' | 'danger' | 'current';
+export type CheckboxProps = {
+    label?: ReactNode;
+    id?: string;
+    name?: string;
+    value?: string | number;
+    color?: TextColor;
+    activeCheckboxColor?: string;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+};

package/Drawer/Drawer.d.ts

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

package/Drawer/Drawer.js

@@ -0,0 +1,62 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { drawerSizes } from './maps';
+import { DrawerBoxTrans, DrawerBox, LockBody, DrawerInner, DrawerContainer } from './styles';
+function createDivElement() {
+  return document.createElement('div');
+}
+export function Drawer(props) {
+  const {
+    size,
+    isOpen,
+    zIndex = 10000,
+    onClose,
+    children,
+    withoutLockScreen = false,
+    closeOnClickOutside = true
+  } = props;
+  const ref = useRef();
+  const [element] = useState(createDivElement);
+  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);
+      };
+    }
+    return () => {};
+  }, [isOpen, onClose]);
+  const handleClose = useCallback(event => {
+    if (event.target === event.currentTarget) {
+      onClose === null || onClose === void 0 || onClose();
+    }
+  }, [onClose]);
+  const handleClickOutside = useCallback(event => {
+    if (closeOnClickOutside) {
+      handleClose(event);
+    }
+  }, [handleClose, closeOnClickOutside]);
+  return createPortal(React.createElement(DrawerBoxTrans, {
+    nodeRef: ref,
+    isOpen: isOpen,
+    withoutLockScreen: withoutLockScreen
+  }, React.createElement(DrawerBox, {
+    ref: ref,
+    "$zIndex": zIndex
+  }, React.createElement(LockBody, null), React.createElement(DrawerInner, {
+    onMouseDown: handleClickOutside
+  }, React.createElement(DrawerContainer, {
+    "$width": drawerSizes[size],
+    onClick: handleClose
+  }, children)))), element);
+}

package/Drawer/index.d.ts

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

package/Drawer/index.js

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

package/Drawer/maps.d.ts

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

package/Drawer/maps.js

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

package/Drawer/styles.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { DrawerBoxBaseProps, IDrawerBoxTransProps } from './types';
+export declare const LockBody: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export declare const DrawerBox: import("styled-components").StyledComponent<"div", any, {
+    $zIndex: number;
+}, never>;
+export declare const DrawerInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawerBoxTrans: import("styled-components").StyledComponent<React.FC<DrawerBoxBaseProps>, any, IDrawerBoxTransProps, never>;
+export declare const DrawerContainer: import("styled-components").StyledComponent<"div", any, {
+    $width: string;
+}, never>;

package/Drawer/styles.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import styled, { createGlobalStyle } from 'styled-components';
+const animationTimeout = 300;
+export const LockBody = createGlobalStyle(["body{overflow:hidden;position:relative;height:100%;}"]);
+export const DrawerBox = styled.div.withConfig({
+  displayName: "DrawerBox",
+  componentId: "sc-1c6sp83-0"
+})(["position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:all;z-index:", ";"], ({
+  $zIndex
+}) => $zIndex);
+export const DrawerInner = styled.div.withConfig({
+  displayName: "DrawerInner",
+  componentId: "sc-1c6sp83-1"
+})(["display:flex;justify-content:flex-end;width:100vw;height:100vh;padding:0 0 0 280px;"]);
+const DrawerBoxBase = props => {
+  const {
+    isOpen,
+    nodeRef,
+    className,
+    children
+  } = props;
+  return React.createElement(CSSTransition, {
+    appear: true,
+    unmountOnExit: true,
+    in: isOpen,
+    timeout: animationTimeout,
+    classNames: className,
+    nodeRef: nodeRef
+  }, children);
+};
+export const DrawerBoxTrans = styled(DrawerBoxBase).withConfig({
+  displayName: "DrawerBoxTrans",
+  componentId: "sc-1c6sp83-2"
+})(["&-appear{background-color:", ";transition:background-color ", "ms;", "{opacity:0;transform:translateX(100%);}}&-appear-active{background-color:", ";", "{opacity:0.99;transform:translateX(.1%);transition:opacity ", "ms,transform ", "ms;}}&-appear-done{background-color:", ";", "{opacity:1;transform:translateX(0);}}&-enter{background-color:", ";transition:background-color ", "ms;", "{opacity:0;transform:translateX(100%);}}&-enter-active{background-color:", ";", "{opacity:0.99;transform:translateX(.1%);transition:opacity ", "ms,transform ", "ms;}}&-enter-done{background-color:", ";", "{opacity:1;transform:translateX(0);}}&-exit{background-color:", ";", "{opacity:1;transform:translateX(0);transition:opacity ", "ms,transform ", "ms;}}&-exit-active{transition:background-color ", "ms;background-color:", ";", "{opacity:0;transform:translateX(100%);}}"], ({
+  withoutLockScreen = false
+}) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 0%)', animationTimeout, DrawerInner, ({
+  withoutLockScreen = false
+}) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, animationTimeout, animationTimeout, ({
+  withoutLockScreen = false
+}) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, ({
+  withoutLockScreen = false
+}) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 0%)', animationTimeout, DrawerInner, ({
+  withoutLockScreen = false
+}) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, animationTimeout, animationTimeout, ({
+  withoutLockScreen = false
+}) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, ({
+  withoutLockScreen = false
+}) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 70%)', DrawerInner, animationTimeout, animationTimeout, animationTimeout, ({
+  withoutLockScreen = false
+}) => withoutLockScreen ? 'transparent' : 'rgb(0 0 0 / 0%)', DrawerInner);
+export const DrawerContainer = styled.div.withConfig({
+  displayName: "DrawerContainer",
+  componentId: "sc-1c6sp83-3"
+})(["position:relative;display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:", ";height:100vh;z-index:10;box-shadow:0 10px 16px 0 rgba(27,31,36,0.1);"], ({
+  $width
+}) => $width);

package/Drawer/types.d.ts

@@ -0,0 +1,18 @@
+import type { MutableRefObject, PropsWithChildren } from 'react';
+import type { drawerSizes } from './maps';
+export type DrawerProps = PropsWithChildren<{
+    readonly size: keyof typeof drawerSizes;
+    readonly isOpen: boolean;
+    readonly zIndex?: number;
+    readonly onClose?: () => any;
+    readonly withoutLockScreen?: boolean;
+    readonly closeOnClickOutside?: boolean;
+}>;
+export type DrawerBoxBaseProps = PropsWithChildren<{
+    className?: string;
+    isOpen: boolean;
+    nodeRef: MutableRefObject<HTMLElement | undefined>;
+}>;
+export type IDrawerBoxTransProps = {
+    withoutLockScreen?: boolean;
+};

package/EditableField/EditableField.d.ts

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

package/EditableField/EditableField.js

@@ -0,0 +1,61 @@
+import React, { useRef } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { DropdownIcon, EditIcon } from '@pushwoosh/kit-icons';
+import { Button } from '../Button';
+import { useOnClickOutside } from '../hooks';
+import { Popover, PopoverContainer } from '../Popover';
+import { FieldBox, TitleBox, ButtonsGroup } from './styles';
+export function EditableField(props) {
+  const {
+    value,
+    title = '',
+    open = false,
+    loading = false,
+    width = 332,
+    position = 'right-start',
+    zIndex = 1000,
+    onToggleOpen,
+    onSubmit,
+    onCancel,
+    children
+  } = props;
+  const rootRef = useRef(null);
+  const buttonRef = useRef(null);
+  useOnClickOutside(rootRef, onCancel);
+  return React.createElement(PopoverContainer, {
+    ref: rootRef
+  }, React.createElement(FieldBox, {
+    open: open,
+    onClick: onToggleOpen,
+    ref: buttonRef
+  }, React.createElement("span", null, value), open ? React.createElement(DropdownIcon, {
+    direction: "up",
+    size: "small",
+    color: Color.CLEAR
+  }) : React.createElement(EditIcon, {
+    view: "lined",
+    size: "small"
+  })), React.createElement(Popover, {
+    open: open,
+    position: position,
+    anchorEl: buttonRef,
+    windowWidth: width,
+    internalWindowRef: rootRef,
+    loading: loading,
+    zIndex: zIndex
+  }, title && React.createElement(TitleBox, null, title), children, React.createElement(ButtonsGroup, {
+    "$isLoading": loading
+  }, React.createElement(Button, {
+    view: "shape",
+    color: "primary",
+    size: "compact",
+    isLoading: loading,
+    onClick: onSubmit
+  }, "Submit"), React.createElement(Button, {
+    view: "shape",
+    color: "secondary",
+    size: "compact",
+    isDisabled: loading,
+    onClick: onCancel
+  }, "Cancel"))));
+}

package/EditableField/index.d.ts

@@ -0,0 +1,2 @@
+export { EditableField } from './EditableField';
+export type { EditableFieldProps } from './types';

package/EditableField/index.js

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

package/EditableField/styles.d.ts

@@ -0,0 +1,8 @@
+import { H5 } from '@pushwoosh/kit-typography';
+export declare const FieldBox: import("styled-components").StyledComponent<"div", any, {
+    open: boolean;
+}, never>;
+export declare const TitleBox: import("styled-components").StyledComponent<typeof H5, any, {}, never>;
+export declare const ButtonsGroup: import("styled-components").StyledComponent<"div", any, {
+    $isLoading: boolean;
+}, never>;

package/EditableField/styles.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius, Spacing, FontSize, LineHeight } from '@pushwoosh/kit-constants';
+import { H5 } from '@pushwoosh/kit-typography';
+export const FieldBox = styled.div.withConfig({
+  displayName: "FieldBox",
+  componentId: "sc-qxboek-0"
+})(["display:flex;align-items:center;font-size:", ";line-height:", ";padding:", " ", " ", " ", ";gap:", ";border-radius:", ";color:", ";background:", ";box-sizing:border-box;cursor:pointer;svg{opacity:0.2;}&:active{opacity:0.5;}&:hover{color:", ";background:", ";svg{opacity:1;}}"], FontSize.REGULAR, LineHeight.REGULAR, Spacing.S0, Spacing.S2, Spacing.S0, Spacing.S3, Spacing.S2, ShapeRadius.CONTROL, ({
+  open
+}) => open ? Color.CLEAR : Color.MAIN, ({
+  open
+}) => open ? Color.MAIN : Color.CLEAR, ({
+  open
+}) => open ? Color.CLEAR : Color.PRIMARY_HOVER, ({
+  open
+}) => open ? Color.MAIN : 'rgba(153, 201, 255, 0.14)');
+export const TitleBox = styled(H5).withConfig({
+  displayName: "TitleBox",
+  componentId: "sc-qxboek-1"
+})(["color:", ";margin-bottom:", ";"], Color.MAIN, Spacing.S1);
+export const ButtonsGroup = styled.div.withConfig({
+  displayName: "ButtonsGroup",
+  componentId: "sc-qxboek-2"
+})(["display:flex;margin-top:", ";opacity:", ";gap:", ";"], Spacing.S5, ({
+  $isLoading
+}) => $isLoading ? '0.5' : '1', Spacing.S3);

package/EditableField/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { Placement } from '../Popover';
+export interface EditableFieldProps {
+    readonly value: string;
+    readonly title?: string;
+    readonly open?: boolean;
+    readonly loading?: boolean;
+    readonly position?: Placement;
+    readonly zIndex?: number;
+    readonly width?: number;
+    readonly onToggleOpen: () => void;
+    readonly onSubmit: () => void;
+    readonly onCancel: () => void;
+    readonly children: ReactNode | undefined;
+}

package/EmailTemplatePreview/EmailTemplatePreview.d.ts

@@ -1,11 +1,3 @@
-import { type FC } from 'react';
-type PreviewIframeProps = {
-    scale?: number;
-    width?: string;
-    height?: string;
-    template: string;
-    localization: Record<string, string>;
-    values: Record<string, any>;
-};
-export declare const EmailTemplatePreview: FC<PreviewIframeProps>;
-export {};
+import { type ReactElement } from 'react';
+import type { PreviewIframeProps } from './types';
+export declare function EmailTemplatePreview(props: PreviewIframeProps): ReactElement;