@pushwoosh/dumb-components 1.0.1 → 1.0.2

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@pushwoosh/kit-constants';
-import { Spinner } from '@pushwoosh/kit-spinner';
+import { Spinner } from '../Spinner';
 import { Container, LoadingHeader, LoadingText, ProgressLine, ProgressBarActive, ProgressBoxContainer, RightSlotContainer, SpinnerContainer, ProgressLineContainer } from './styles';
 export function ProgressBar(props) {
   const {

package/PushPreview/PushPreview.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Columns } from '@pushwoosh/kit-helpers';
-import { Spinner } from '@pushwoosh/kit-spinner';
+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';

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;

package/ReCaptcha/hooks.js

@@ -0,0 +1,66 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { RECAPTCHA_KEY, RECAPTCHA_SCRIPT_URL, RECAPTCHA_CONTAINER_ID } from './constants';
+import { asyncScriptLoad } from './helpers';
+export function useRecaptcha() {
+  var _window;
+  const promiseRef = useRef({});
+  const [isRecaptchaLoaded, setRecaptchaLoaded] = useState(!!((_window = window) !== null && _window !== void 0 && (_window = _window.grecaptcha) !== null && _window !== void 0 && _window.render));
+  const [widgetID, setWidgetID] = useState(null);
+  const [isRecaptchaReady, setRecaptchaReady] = useState(!!(isRecaptchaLoaded && widgetID));
+  const [recaptchaErrorCode, setRecaptchaErrorCode] = useState(''); // RIEXXX - ReCaptcha Internal Error
+  const [intervalID, setIntervalID] = useState(0);
+  // Load external script effect, fires once
+  useEffect(() => {
+    asyncScriptLoad(RECAPTCHA_SCRIPT_URL).catch(() => setRecaptchaErrorCode('RIE001'));
+  }, []);
+  // Set interval while library download and initialize
+  useEffect(() => {
+    const newInterval = window.setInterval(() => {
+      var _window2;
+      if ((_window2 = window) !== null && _window2 !== void 0 && (_window2 = _window2.grecaptcha) !== null && _window2 !== void 0 && _window2.render) {
+        setRecaptchaLoaded(true);
+      }
+    }, 500);
+    setIntervalID(newInterval);
+    return () => {
+      clearInterval(newInterval);
+    };
+  }, []);
+  // Render recaptcha widget when script loaded, stop interval
+  useEffect(() => {
+    if (isRecaptchaLoaded && widgetID === null) {
+      clearInterval(intervalID);
+      try {
+        const widget = window.grecaptcha.render(RECAPTCHA_CONTAINER_ID, {
+          sitekey: RECAPTCHA_KEY,
+          size: 'invisible',
+          callback: token => {
+            var _promiseRef$current;
+            return (_promiseRef$current = promiseRef.current) === null || _promiseRef$current === void 0 ? void 0 : _promiseRef$current.resolve(token);
+          }
+          // 'expired-callback': () => {},
+          // 'error-callback': () => {},
+        });
+        setWidgetID(widget);
+        setRecaptchaReady(true);
+      } catch {
+        setRecaptchaErrorCode('RIE002');
+      }
+    }
+  }, [isRecaptchaLoaded, widgetID, intervalID, promiseRef]);
+  // async function to get recaptcha token, resolves by resolveAction callback
+  const getRecaptchaToken = useCallback(async () => new Promise((resolve, reject) => {
+    try {
+      window.grecaptcha.reset(widgetID);
+      window.grecaptcha.execute(widgetID);
+      promiseRef.current.resolve = resolve;
+    } catch (error) {
+      reject(error);
+    }
+  }), [widgetID, promiseRef]);
+  return {
+    isRecaptchaReady,
+    recaptchaErrorCode,
+    getRecaptchaToken
+  };
+}

package/ReCaptcha/index.d.ts

@@ -0,0 +1,3 @@
+export { ReCaptcha } from './ReCaptcha';
+export { useRecaptcha } from './hooks';
+export { asyncScriptLoad } from './helpers';

package/ReCaptcha/index.js

@@ -0,0 +1,3 @@
+export { ReCaptcha } from './ReCaptcha';
+export { useRecaptcha } from './hooks';
+export { asyncScriptLoad } from './helpers';

package/ReCaptcha/styles.d.ts

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

package/ReCaptcha/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const RecaptchaElement = styled.div.withConfig({
+  displayName: "RecaptchaElement",
+  componentId: "sc-100g1t3-0"
+})(["display:none;"]);

package/ReCaptcha/types.d.ts

@@ -0,0 +1,8 @@
+export type RecaptchaExposedApi = {
+    readonly isRecaptchaReady: boolean;
+    readonly recaptchaErrorCode: string;
+    readonly getRecaptchaToken: () => Promise<string>;
+};
+export type PromiseRef = {
+    resolve?: (token: string) => void;
+};

package/ReCaptcha/types.js

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

package/Skeleton/TextSkeleton.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement, type PropsWithChildren } from 'react';
+import type { TextSkeletonProps } from './types';
+export declare function TextSkeleton(props: PropsWithChildren<TextSkeletonProps>): ReactElement;