@pushwoosh/dumb-components 1.0.0 → 1.0.2

package/PageHeader/components/PageHeaderSkeleton/styles.js

@@ -0,0 +1,15 @@
+import styled, { keyframes } from 'styled-components';
+import { Color, Spacing, ShapeRadius } from '@pushwoosh/kit-constants';
+const animation = keyframes(["0%{opacity:0.2;}50%{opacity:0.1;}100%{opacity:0.2;}"]);
+export const RootBox = styled.div.withConfig({
+  displayName: "RootBox",
+  componentId: "sc-1idyyj7-0"
+})(["display:flex;align-items:center;justify-content:space-between;"]);
+export const SkeletonStyled = styled.div.withConfig({
+  displayName: "SkeletonStyled",
+  componentId: "sc-1idyyj7-1"
+})(["width:", ";height:", ";padding:", " 0;background:", ";border-radius:", ";animation:", " 1s ease-in-out infinite;opacity:0.1;"], ({
+  width
+}) => width ? `${width}px` : Spacing.S7, ({
+  height
+}) => height ? `${height}px` : Spacing.S7, Spacing.S1, Color.SOFT, ShapeRadius.CONTROL, animation);

package/PageHeader/index.d.ts

@@ -0,0 +1,3 @@
+export { AutosizeInput } from './components/AutosizeInput';
+export { PageHeader } from './components/PageHeader';
+export { PageHeaderEditable } from './components/PageHeaderEditable';

package/PageHeader/index.js

@@ -0,0 +1,3 @@
+export { AutosizeInput } from './components/AutosizeInput';
+export { PageHeader } from './components/PageHeader';
+export { PageHeaderEditable } from './components/PageHeaderEditable';

package/Pagination/Pagination.d.ts

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

package/Pagination/Pagination.js

@@ -0,0 +1,85 @@
+import React, { useCallback } from 'react';
+import { ArrowIcon } from '@pushwoosh/kit-icons';
+import { getSafelyNumber } from './helpers';
+import { PaginationBox, PaginationArrow, PaginationDivider, PaginationButton } from './styles';
+export function Pagination(props) {
+  const {
+    boxRef,
+    activePage,
+    totalPages,
+    adjacentPagesCount = 2,
+    isLoading = false,
+    onChangePage,
+    ...rest
+  } = props;
+  const safelyActivePageNumber = getSafelyNumber(activePage);
+  const safelyTotalPagesNumber = getSafelyNumber(totalPages);
+  const handleChangePage = useCallback(event => {
+    onChangePage(getSafelyNumber(event.currentTarget.value));
+  }, [onChangePage]);
+  const isValidActivePage = safelyActivePageNumber >= 1 && safelyActivePageNumber <= safelyTotalPagesNumber;
+  const helperArray = Array.from({
+    length: adjacentPagesCount
+  });
+  const isDisabledLeftArrow = safelyActivePageNumber === 1;
+  const isDisabledRightArrow = safelyActivePageNumber >= safelyTotalPagesNumber;
+  const shouldShowShowFirstPage = safelyActivePageNumber - adjacentPagesCount - 1 > 0;
+  const shouldShowShowLeftDivider = safelyActivePageNumber - adjacentPagesCount - 2 > 0;
+  const shouldShowShowLastPage = safelyTotalPagesNumber - safelyActivePageNumber > adjacentPagesCount;
+  const shouldShowShowRightDivider = safelyTotalPagesNumber - safelyActivePageNumber - 1 > adjacentPagesCount;
+  if (!isValidActivePage) {
+    console.error(`[Pagination]: prop activePage: ${activePage} is not valid!`);
+    return null;
+  }
+  return React.createElement(PaginationBox, {
+    ...rest,
+    ref: boxRef
+  }, React.createElement(PaginationArrow, {
+    value: safelyActivePageNumber - 1,
+    disabled: isLoading || isDisabledLeftArrow,
+    onClick: handleChangePage
+  }, React.createElement(ArrowIcon, {
+    direction: "left",
+    size: "medium"
+  })), shouldShowShowFirstPage && React.createElement(PaginationButton, {
+    value: 1,
+    disabled: isLoading,
+    onClick: handleChangePage
+  }, 1), shouldShowShowLeftDivider && React.createElement(PaginationDivider, null, "..."), helperArray.map((_, index) => {
+    const currentIndex = safelyActivePageNumber - adjacentPagesCount + index;
+    if (currentIndex < 1 || currentIndex > safelyTotalPagesNumber) {
+      return null;
+    }
+    return React.createElement(PaginationButton, {
+      key: currentIndex,
+      value: currentIndex,
+      disabled: isLoading,
+      onClick: handleChangePage
+    }, currentIndex);
+  }), React.createElement(PaginationButton, {
+    "$isActive": true,
+    disabled: true
+  }, safelyActivePageNumber), helperArray.map((_, index) => {
+    const currentIndex = safelyActivePageNumber + index + 1;
+    if (currentIndex > safelyTotalPagesNumber) {
+      return null;
+    }
+    return React.createElement(PaginationButton, {
+      key: currentIndex,
+      value: currentIndex,
+      disabled: isLoading,
+      onClick: handleChangePage
+    }, currentIndex);
+  }), shouldShowShowRightDivider && React.createElement(PaginationDivider, null, "..."), shouldShowShowLastPage && React.createElement(PaginationButton, {
+    value: safelyTotalPagesNumber,
+    disabled: isLoading,
+    onClick: handleChangePage
+  }, safelyTotalPagesNumber), React.createElement(PaginationArrow, {
+    value: safelyActivePageNumber + 1,
+    disabled: isLoading || isDisabledRightArrow,
+    onClick: handleChangePage
+  }, React.createElement(ArrowIcon, {
+    direction: "right",
+    size: "medium"
+  })));
+}

package/Pagination/helpers.d.ts

@@ -0,0 +1 @@
+export declare const getSafelyNumber: (input: string | number) => number;

package/Pagination/helpers.js

@@ -0,0 +1,4 @@
+export const getSafelyNumber = input => {
+  const number = typeof input === 'string' ? parseInt(input, 10) : input;
+  return Number.isNaN(number) ? 1 : number;
+};

package/Pagination/index.d.ts

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

package/Pagination/index.js

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

package/Pagination/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const PaginationBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaginationArrow: import("styled-components").StyledComponent<"button", any, {
+    $isActive?: boolean;
+}, never>;
+export declare const PaginationDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaginationButton: import("styled-components").StyledComponent<"button", any, {
+    $isActive?: boolean;
+}, never>;

package/Pagination/styles.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight, ShapeRadius, Spacing, UnitSize } from '@pushwoosh/kit-constants';
+const PaginationControl = styled.button.withConfig({
+  displayName: "PaginationControl",
+  componentId: "sc-o79vko-0"
+})(["height:", ";appearance:none;border:1px solid ", ";border-right:none;background-color:", ";color:", ";font-weight:", ";font-size:", ";&:hover{background-color:", ";color:", ";}&:disabled{background-color:", ";color:", ";}user-select:none;"], UnitSize.FIELD_HEIGHT, Color.DIVIDER, Color.CLEAR, Color.MAIN, FontWeight.MEDIUM, FontSize.REGULAR, ({
+  $isActive
+}) => $isActive ? Color.MAIN : Color.BRIGHT_LIGHT, ({
+  $isActive
+}) => $isActive ? Color.CLEAR : Color.PRIMARY_HOVER, Color.CLEAR, Color.PHANTOM);
+export const PaginationBox = styled.div.withConfig({
+  displayName: "PaginationBox",
+  componentId: "sc-o79vko-1"
+})(["display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;"]);
+export const PaginationArrow = styled(PaginationControl).withConfig({
+  displayName: "PaginationArrow",
+  componentId: "sc-o79vko-2"
+})(["padding:0 ", ";&:first-child{border-radius:", " 0 0 ", ";}&:last-child{border-right:1px solid ", ";border-radius:0 ", " ", " 0;}user-select:none;"], Spacing.S2, ShapeRadius.CONTROL, ShapeRadius.CONTROL, Color.DIVIDER, ShapeRadius.CONTROL, ShapeRadius.CONTROL);
+export const PaginationDivider = styled.div.withConfig({
+  displayName: "PaginationDivider",
+  componentId: "sc-o79vko-3"
+})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;width:32px;height:", ";color:", ";background-color:", ";border:1px solid ", ";border-right:none;box-sizing:border-box;user-select:none;"], UnitSize.FIELD_HEIGHT, Color.LOCKED, Color.FROZEN, Color.DIVIDER);
+export const PaginationButton = styled(PaginationControl).withConfig({
+  displayName: "PaginationButton",
+  componentId: "sc-o79vko-4"
+})(["padding:0 ", ";&:disabled{background-color:", ";color:", ";}"], Spacing.S4, ({
+  $isActive
+}) => $isActive ? Color.MAIN : Color.CLEAR, ({
+  $isActive
+}) => $isActive ? Color.CLEAR : Color.MAIN);
+PaginationBox.displayName = 'PaginationBox';
+PaginationControl.displayName = 'PaginationControl';
+PaginationArrow.displayName = 'PaginationArrow';
+PaginationDivider.displayName = 'PaginationDivider';
+PaginationButton.displayName = 'PaginationButton';

package/Pagination/types.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'react';
+export type PaginationProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
+    readonly boxRef?: Ref<HTMLDivElement>;
+    readonly activePage: string | number;
+    readonly totalPages: string | number;
+    readonly adjacentPagesCount?: number;
+    readonly isLoading?: boolean;
+    readonly onChangePage: (page: number) => any;
+};

package/Pagination/types.js

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

package/Popover/Popover.d.ts

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

package/Popover/Popover.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { PopoverContainerPortal, PopoverContainerWindow } from './styles';
+export function Popover(props) {
+  const {
+    open,
+    anchorEl,
+    internalWindowRef = null,
+    loading = false,
+    position = 'right-start',
+    zIndex = 1000,
+    windowWidth,
+    children
+  } = props;
+  return React.createElement(PopoverContainerPortal, {
+    animation: false,
+    delay: 0,
+    duration: 0,
+    placement: position,
+    maxWidth: windowWidth,
+    reference: anchorEl,
+    zIndex: zIndex,
+    visible: open,
+    className: "popover-container",
+    content: React.createElement(PopoverContainerWindow, {
+      "$minWidth": windowWidth,
+      "$isLoading": loading,
+      ref: internalWindowRef
+    }, open && children),
+    popperOptions: {
+      strategy: 'fixed',
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 4]
+        }
+      }, {
+        name: 'preventOverflow',
+        options: {
+          mainAxis: false
+        }
+      }]
+    }
+  });
+}

package/Popover/index.d.ts

@@ -0,0 +1,4 @@
+export type { Placement } from 'tippy.js';
+export { Popover } from './Popover';
+export { PopoverContainer, PopoverContainerPortal, PopoverContainerWindow } from './styles';
+export type { PopoverProps } from './types';

package/Popover/index.js

@@ -0,0 +1,2 @@
+export { Popover } from './Popover';
+export { PopoverContainer, PopoverContainerPortal, PopoverContainerWindow } from './styles';

package/Popover/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const PopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverContainerWindow: import("styled-components").StyledComponent<"div", any, {
+    $minWidth?: number | null;
+    $isLoading: boolean;
+}, never>;
+export declare const PopoverContainerPortal: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@tippyjs/react").TippyProps>, any, {}, never>;

package/Popover/styles.js

@@ -0,0 +1,19 @@
+import Tippy from '@tippyjs/react';
+import styled from 'styled-components';
+import { Color, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+export const PopoverContainer = styled.div.withConfig({
+  displayName: "PopoverContainer",
+  componentId: "sc-qsqk3z-0"
+})(["display:flex;position:relative;"]);
+export const PopoverContainerWindow = styled.div.withConfig({
+  displayName: "PopoverContainerWindow",
+  componentId: "sc-qsqk3z-1"
+})(["min-width:", ";padding:", ";border:1px solid ", ";border-radius:", ";background:", ";transition:visibility 50ms linear;> *{opacity:", ";}"], ({
+  $minWidth
+}) => $minWidth ? `${$minWidth}px` : 'auto', Spacing.S5, Color.FORM, ShapeRadius.DIALOG, Color.CLEAR, ({
+  $isLoading
+}) => $isLoading ? '0.5' : '1');
+export const PopoverContainerPortal = styled(Tippy).withConfig({
+  displayName: "PopoverContainerPortal",
+  componentId: "sc-qsqk3z-2"
+})(["pointer-events:all;&.popover-container.tippy-box{position:static;background-color:transparent;border-radius:0;color:", ";font-size:inherit;line-height:inherit;outline:0;transition:none;}&.popover-container .tippy-content{position:static;padding:0;z-index:auto;}&.popover-container .tippy-arrow{display:none;}"], Color.MAIN);

package/Popover/types.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject, ReactNode } from 'react';
+import type { Placement } from 'tippy.js';
+export interface PopoverProps {
+    readonly anchorEl: RefObject<HTMLElement>;
+    readonly internalWindowRef?: RefObject<HTMLDivElement>;
+    readonly position?: Placement;
+    readonly open: boolean;
+    readonly loading?: boolean;
+    readonly zIndex?: number;
+    readonly windowWidth?: number;
+    readonly children: ReactNode | undefined;
+}

package/Popover/types.js

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

package/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import { type ReactElement } from 'react';
 import { type ProgressBoxProps } from './types';
-export declare const ProgressBar: ({ percentValue, title, rightSlot, color, backgroundColor, }: ProgressBoxProps) => React.JSX.Element;
+export declare function ProgressBar(props: ProgressBoxProps): ReactElement;

package/ProgressBar/ProgressBar.js

@@ -1,19 +1,22 @@
 import React from 'react';
 import { Color } from '@pushwoosh/kit-constants';
-import { Spinner } from '@pushwoosh/kit-spinner';
-import { Container, LoadingHeader, LoadingText, ProgressLine, ProgressBarActive, ProgressBoxContainer, RightSlotContainer, SpinnerContainer, ProgressLineContainer } from './styled';
-export const ProgressBar = ({
-  percentValue,
-  title,
-  rightSlot,
-  color = Color.BRIGHT,
-  backgroundColor = Color.BRIGHT_LIGHT
-}) => React.createElement(Container, null, React.createElement(SpinnerContainer, {
-  "$backgroundColor": backgroundColor
-}, React.createElement(Spinner, {
-  color: color,
-  size: "medium"
-})), React.createElement(ProgressBoxContainer, null, React.createElement(LoadingHeader, null, React.createElement(LoadingText, null, title, ' ', `${percentValue}%`), rightSlot && React.createElement(RightSlotContainer, null, rightSlot)), React.createElement(ProgressLineContainer, null, React.createElement(ProgressLine, null, React.createElement(ProgressBarActive, {
-  "$width": percentValue,
-  "$color": color
-})))));
+import { Spinner } from '../Spinner';
+import { Container, LoadingHeader, LoadingText, ProgressLine, ProgressBarActive, ProgressBoxContainer, RightSlotContainer, SpinnerContainer, ProgressLineContainer } from './styles';
+export function ProgressBar(props) {
+  const {
+    percentValue,
+    title,
+    rightSlot,
+    color = Color.BRIGHT,
+    backgroundColor = Color.BRIGHT_LIGHT
+  } = props;
+  return React.createElement(Container, null, React.createElement(SpinnerContainer, {
+    "$backgroundColor": backgroundColor
+  }, React.createElement(Spinner, {
+    color: color,
+    size: "medium"
+  })), React.createElement(ProgressBoxContainer, null, React.createElement(LoadingHeader, null, React.createElement(LoadingText, null, title, ' ', `${percentValue}%`), rightSlot && React.createElement(RightSlotContainer, null, rightSlot)), React.createElement(ProgressLineContainer, null, React.createElement(ProgressLine, null, React.createElement(ProgressBarActive, {
+    "$width": percentValue,
+    "$color": color
+  })))));
+}

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

@@ -3,15 +3,15 @@ import { Color, FontSize, ShapeRadius, Spacing } from '@pushwoosh/kit-constants'
 import { H5 } from '@pushwoosh/kit-typography';
 export const ProgressLine = styled.div.withConfig({
   displayName: "ProgressLine",
-  componentId: "sc-1asyx7c-0"
+  componentId: "sc-jfhkho-0"
 })(["display:flex;height:5px;border-radius:", ";background:", ";"], ShapeRadius.CONTROL, Color.SOFT_LIGHT);
 export const ProgressLineContainer = styled.div.withConfig({
   displayName: "ProgressLineContainer",
-  componentId: "sc-1asyx7c-1"
+  componentId: "sc-jfhkho-1"
 })(["padding:", " 0;"], Spacing.S1);
 export const ProgressBarActive = styled(ProgressLine).withConfig({
   displayName: "ProgressBarActive",
-  componentId: "sc-1asyx7c-2"
+  componentId: "sc-jfhkho-2"
 })(["width:", ";background:", ";"], ({
   $width
 }) => `${$width}%`, ({
@@ -19,27 +19,27 @@ export const ProgressBarActive = styled(ProgressLine).withConfig({
 }) => $color || Color.BRIGHT);
 export const Container = styled.div.withConfig({
   displayName: "Container",
-  componentId: "sc-1asyx7c-3"
-})(["display:flex;width:100%;gap:", ";align-items:center;"], Spacing.S4);
+  componentId: "sc-jfhkho-3"
+})(["display:flex;align-items:center;width:100%;gap:", ";"], Spacing.S4);
 export const SpinnerContainer = styled.div.withConfig({
   displayName: "SpinnerContainer",
-  componentId: "sc-1asyx7c-4"
+  componentId: "sc-jfhkho-4"
 })(["background-color:", ";border-radius:", ";padding:", ";"], ({
   $backgroundColor
 }) => $backgroundColor, ShapeRadius.CONTROL, Spacing.S1);
 export const ProgressBoxContainer = styled.div.withConfig({
   displayName: "ProgressBoxContainer",
-  componentId: "sc-1asyx7c-5"
+  componentId: "sc-jfhkho-5"
 })(["display:flex;flex-direction:column;flex:1;"]);
 export const LoadingHeader = styled.div.withConfig({
   displayName: "LoadingHeader",
-  componentId: "sc-1asyx7c-6"
+  componentId: "sc-jfhkho-6"
 })(["display:flex;gap:", ";align-items:center;justify-content:space-between;"], Spacing.S2);
 export const LoadingText = styled(H5).withConfig({
   displayName: "LoadingText",
-  componentId: "sc-1asyx7c-7"
+  componentId: "sc-jfhkho-7"
 })(["color:", ";text-transform:uppercase;font-size:", ";"], Color.MAIN, FontSize.SMALL);
 export const RightSlotContainer = styled.div.withConfig({
   displayName: "RightSlotContainer",
-  componentId: "sc-1asyx7c-8"
+  componentId: "sc-jfhkho-8"
 })(["display:flex;right:0;"]);

package/PushPreview/PushPreview.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Columns } from '@pushwoosh/kit-helpers';
-import { Spinner } from '@pushwoosh/kit-spinner';
-import { PREVIEW_ICON_URL } from './constants/urls';
-import { getLocalizedContent } from './helpers/helpers';
-import { LoadingBox, PushBox, AppIcon, PushContent, PushTitleBox, PushTitleText, PushDate, PushDescription } from './styled';
+import { Spinner } from '../Spinner';
+import { PREVIEW_ICON_URL } from './constants';
+import { getLocalizedContent } from './helpers';
+import { LoadingBox, PushBox, AppIcon, PushContent, PushTitleBox, PushTitleText, PushDate, PushDescription } from './styles';
 export function PushPreview(props) {
   const {
     pushPreset,

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

@@ -3,37 +3,37 @@ import { Color, FontWeight, FontSize, Shadow, ShapeRadius, Spacing } from '@push
 import { Vertical } from '@pushwoosh/kit-helpers';
 export const PushBox = styled.div.withConfig({
   displayName: "PushBox",
-  componentId: "sc-13jvrn7-0"
+  componentId: "sc-185rvhg-0"
 })(["display:grid;width:", ";min-height:50px;padding:10px;background:", ";box-shadow:", ";border-radius:10px;"], ({
   $width
 }) => $width || '100%', Color.CLEAR, Shadow.LARGE);
 export const AppIcon = styled.img.withConfig({
   displayName: "AppIcon",
-  componentId: "sc-13jvrn7-1"
+  componentId: "sc-185rvhg-1"
 })(["width:30px;height:30px;border-radius:", ";"], ShapeRadius.CONTROL);
 export const PushContent = styled(Vertical).withConfig({
   displayName: "PushContent",
-  componentId: "sc-13jvrn7-2"
+  componentId: "sc-185rvhg-2"
 })(["max-width:240px;"]);
 export const PushTitleBox = styled.span.withConfig({
   displayName: "PushTitleBox",
-  componentId: "sc-13jvrn7-3"
+  componentId: "sc-185rvhg-3"
 })(["display:grid;grid-template-columns:1fr min-content;grid-gap:", ";"], Spacing.S3);
 export const PushTitleText = styled.span.withConfig({
   displayName: "PushTitleText",
-  componentId: "sc-13jvrn7-4"
+  componentId: "sc-185rvhg-4"
 })(["font-weight:", ";font-size:13px;line-height:140%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"], FontWeight.MEDIUM);
 export const PushDate = styled.span.withConfig({
   displayName: "PushDate",
-  componentId: "sc-13jvrn7-5"
+  componentId: "sc-185rvhg-5"
 })(["color:#555;font-weight:", ";font-size:", ";letter-spacing:0;"], FontWeight.REGULAR, FontSize.SMALL);
 export const PushDescription = styled.div.withConfig({
   displayName: "PushDescription",
-  componentId: "sc-13jvrn7-6"
+  componentId: "sc-185rvhg-6"
 })(["color:", ";font-weight:", ";font-size:13px;line-height:140%;"], ({
   $isLocked
 }) => $isLocked ? Color.LOCKED : Color.MAIN, FontWeight.REGULAR);
 export const LoadingBox = styled.div.withConfig({
   displayName: "LoadingBox",
-  componentId: "sc-13jvrn7-7"
+  componentId: "sc-185rvhg-7"
 })(["display:flex;align-items:center;justify-content:center;flex:1;"]);

package/Radio/Radio.d.ts

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

package/Radio/Radio.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { NativeLabel, NativeRadio } from './styled';
+// eslint-disable-next-line prefer-const
+let counter = 0;
+export function Radio(props) {
+  const {
+    label,
+    id,
+    name,
+    value,
+    color,
+    isChecked,
+    isDisabled,
+    onChange,
+    onBlur
+  } = props;
+  const [localId] = useState(() => {
+    if (id) {
+      return id;
+    }
+    const newCounter = counter + 1;
+    return `radio-id-${newCounter}`;
+  });
+  return React.createElement(NativeLabel, {
+    htmlFor: localId,
+    "$color": isDisabled ? 'locked' : color
+  }, React.createElement(NativeRadio, {
+    type: "radio",
+    id: localId,
+    value: value,
+    name: name,
+    checked: isChecked,
+    disabled: isDisabled,
+    onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value),
+    onBlur: onBlur
+  }), label && React.createElement("span", null, label));
+}

package/Radio/index.d.ts

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

package/Radio/index.js

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

package/Radio/maps.d.ts

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

package/Radio/maps.js

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

package/Radio/styled.d.ts

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

package/Radio/styled.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { Color, Spacing, FontSize, LineHeight } from '@pushwoosh/kit-constants';
+import { ColorMap } from './maps';
+export const NativeRadio = styled.input.withConfig({
+  displayName: "NativeRadio",
+  componentId: "sc-154q01x-0"
+})(["appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid ", ";border-radius:50%;background-color:", ";transition:border 0.1s,background-color 0.1s;cursor:pointer;&:focus{outline:none;}&[type=radio]:hover{border-color:", ";}&[type=radio]:disabled{cursor:not-allowed;border-color:", ";background-color:", ";}&[type=radio]:checked{border:6px solid ", ";}&[type=radio]:checked:hover{border-color:", ";}&[type=radio]:checked:disabled{border-color:", ";background-color:", ";}"], Color.PHANTOM, Color.CLEAR, Color.PRIMARY_HOVER, Color.LOCKED, Color.FROZEN, Color.PRIMARY, Color.PRIMARY_HOVER, Color.LOCKED, Color.FROZEN);
+export const NativeLabel = styled.label.withConfig({
+  displayName: "NativeLabel",
+  componentId: "sc-154q01x-1"
+})(["display:inline-flex;align-items:center;font-size:", ";line-height:", ";user-select:none;", " & > ", "{&:not(:last-child){margin-right:", ";}}"], FontSize.REGULAR, LineHeight.REGULAR, ({
+  $color
+}) => $color && `color: ${ColorMap[$color]};`, NativeRadio, Spacing.S3);

package/Radio/types.d.ts

@@ -0,0 +1,12 @@
+export type RadioTextColor = 'main' | 'primary' | 'danger' | 'current' | 'locked';
+export type RadioProps = {
+    label?: string;
+    id?: string;
+    name?: string;
+    value?: string;
+    color?: RadioTextColor;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    onChange?: (checked: string | number) => void;
+    onBlur?: () => void;
+};

package/Radio/types.js

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

package/ReCaptcha/ReCaptcha.d.ts

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

package/ReCaptcha/ReCaptcha.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { RECAPTCHA_CONTAINER_ID } from './constants';
+import { RecaptchaElement } from './styles';
+export function ReCaptcha() {
+  return React.createElement(RecaptchaElement, {
+    id: RECAPTCHA_CONTAINER_ID
+  });
+}

package/ReCaptcha/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const RECAPTCHA_KEY = "6LdS7DYUAAAAABVgt0djIBoyyMQ0oDAUl7jt1Mxh";
+export declare const RECAPTCHA_SCRIPT_URL = "https://www.google.com/recaptcha/api.js?render=explicit";
+export declare const RECAPTCHA_CONTAINER_ID = "g-recaptcha";

package/ReCaptcha/constants.js

@@ -0,0 +1,4 @@
+export const RECAPTCHA_KEY = '6LdS7DYUAAAAABVgt0djIBoyyMQ0oDAUl7jt1Mxh';
+// onload script: https://www.google.com/recaptcha/api.js?onload=recaptchaOnLoad&render=explicit'
+export const RECAPTCHA_SCRIPT_URL = 'https://www.google.com/recaptcha/api.js?render=explicit';
+export const RECAPTCHA_CONTAINER_ID = 'g-recaptcha';

package/ReCaptcha/helpers.d.ts

@@ -0,0 +1 @@
+export declare function asyncScriptLoad(scriptUrl: string): Promise<Event | void>;

package/ReCaptcha/helpers.js

@@ -0,0 +1,15 @@
+export async function asyncScriptLoad(scriptUrl) {
+  return new Promise((resolve, reject) => {
+    const isAlreadyLoaded = document.querySelector(`script[src="${scriptUrl}"]`);
+    if (isAlreadyLoaded) {
+      resolve();
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = scriptUrl;
+    script.async = true;
+    document.body.appendChild(script);
+    script.onload = resolve;
+    script.onerror = reject;
+  });
+}

package/ReCaptcha/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { RecaptchaExposedApi } from './types';
+export declare function useRecaptcha(): RecaptchaExposedApi;