@pushwoosh/dumb-components 1.0.0 → 1.0.1

package/ActionsGroup/ActionsGroup.d.ts

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

package/ActionsGroup/ActionsGroup.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ActionsGroupBox, ActionsGroupInner } from './styles';
+export function ActionsGroup(props) {
+  const {
+    boxRef,
+    align,
+    gap,
+    children,
+    ...rest
+  } = props;
+  return React.createElement(ActionsGroupBox, {
+    ...rest,
+    ref: boxRef
+  }, React.createElement(ActionsGroupInner, {
+    "$align": align,
+    "$gap": gap
+  }, children));
+}

package/ActionsGroup/ActionsGroupItem.d.ts

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

package/ActionsGroup/ActionsGroupItem.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ActionsGroupItemBox } from './styles';
+export function ActionsGroupItem(props) {
+  const {
+    boxRef,
+    ...rest
+  } = props;
+  return React.createElement(ActionsGroupItemBox, {
+    ...rest,
+    ref: boxRef
+  });
+}

package/ActionsGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { ActionsGroup } from './ActionsGroup';
+export { ActionsGroupItem } from './ActionsGroupItem';
+export type { ActionsGroupProps, ActionsGroupItemProps } from './types';

package/ActionsGroup/index.js

@@ -0,0 +1,2 @@
+export { ActionsGroup } from './ActionsGroup';
+export { ActionsGroupItem } from './ActionsGroupItem';

package/ActionsGroup/styles.d.ts

@@ -0,0 +1,7 @@
+import type { ActionsGroupProps } from './types';
+export declare const ActionsGroupBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionsGroupItemBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionsGroupInner: import("styled-components").StyledComponent<"div", any, {
+    $align: ActionsGroupProps["align"];
+    $gap: ActionsGroupProps["gap"];
+}, never>;

package/ActionsGroup/styles.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const ActionsGroupBox = styled.div.withConfig({
+  displayName: "ActionsGroupBox",
+  componentId: "sc-eb6b51-0"
+})([""]);
+export const ActionsGroupItemBox = styled.div.withConfig({
+  displayName: "ActionsGroupItemBox",
+  componentId: "sc-eb6b51-1"
+})([""]);
+export const ActionsGroupInner = styled.div.withConfig({
+  displayName: "ActionsGroupInner",
+  componentId: "sc-eb6b51-2"
+})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:", ";margin:0 ", ";", "{padding:0 ", ";}"], ({
+  $align
+}) => $align === 'end' ? 'flex-end' : 'flex-start', ({
+  $gap
+}) => `calc(-${$gap}/2)`, ActionsGroupItemBox, ({
+  $gap
+}) => `calc(${$gap}/2)`);
+ActionsGroupBox.displayName = 'ActionsGroupBox';
+ActionsGroupInner.displayName = 'ActionsGroupInner';
+ActionsGroupItemBox.displayName = 'ActionsGroupBox';

package/ActionsGroup/types.d.ts

@@ -0,0 +1,12 @@
+import type { Ref, ReactNode } from 'react';
+import type { Spacing } from '@pushwoosh/kit-constants';
+export type ActionsGroupProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
+    readonly boxRef?: Ref<HTMLDivElement>;
+    readonly align: 'start' | 'end';
+    readonly gap: Spacing;
+    readonly children: ReactNode;
+};
+export type ActionsGroupItemProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
+    readonly boxRef?: Ref<HTMLDivElement>;
+    readonly children: ReactNode;
+};

package/Badge/Badge.d.ts

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

package/Badge/Badge.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BadgeBox } from './styles';
+export function Badge(props) {
+  const {
+    boxRef,
+    color,
+    isSaturated,
+    ...rest
+  } = props;
+  return React.createElement(BadgeBox, {
+    ...rest,
+    ref: boxRef,
+    "$color": color,
+    "$isSaturated": isSaturated
+  });
+}

package/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeColor } from './types';

package/Badge/index.js

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

package/Badge/maps.d.ts

@@ -0,0 +1,19 @@
+import { Color } from '@pushwoosh/kit-constants';
+export declare const BadgeColorToColorMap: {
+    gray: Color;
+    green: Color;
+    orange: Color;
+    red: Color;
+    purple: Color;
+    sky: Color;
+    locked: Color;
+};
+export declare const BadgeColorToLightColorMap: {
+    gray: Color;
+    green: Color;
+    orange: Color;
+    red: Color;
+    purple: Color;
+    sky: Color;
+    locked: Color;
+};

package/Badge/maps.js

@@ -0,0 +1,19 @@
+import { Color } from '@pushwoosh/kit-constants';
+export const BadgeColorToColorMap = {
+  gray: Color.SOFT,
+  green: Color.SUCCESS,
+  orange: Color.WARNING,
+  red: Color.DANGER,
+  purple: Color.EXCEPTIONAL,
+  sky: Color.BRIGHT,
+  locked: Color.LOCKED
+};
+export const BadgeColorToLightColorMap = {
+  gray: Color.SOFT_LIGHT,
+  green: Color.SUCCESS_LIGHT,
+  orange: Color.WARNING_LIGHT,
+  red: Color.DANGER_LIGHT,
+  purple: Color.EXCEPTIONAL_LIGHT,
+  sky: Color.BRIGHT_LIGHT,
+  locked: Color.FROZEN
+};

package/Badge/styles.d.ts

@@ -0,0 +1,5 @@
+import type { BadgeProps } from './types';
+export declare const BadgeBox: import("styled-components").StyledComponent<"div", any, {
+    $color: BadgeProps["color"];
+    $isSaturated?: boolean;
+}, never>;

package/Badge/styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight, FontFamily, LineHeight, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { BadgeColorToColorMap, BadgeColorToLightColorMap } from './maps';
+export const BadgeBox = styled.div.withConfig({
+  displayName: "BadgeBox",
+  componentId: "sc-6ptm8-0"
+})(["display:inline-block;width:fit-content;padding:", " ", ";border-radius:", ";color:", ";background-color:", ";font-size:", ";font-family:", ";font-weight:", ";line-height:", ";text-transform:uppercase;user-select:none;"], Spacing.S0, Spacing.S2, ShapeRadius.SECTION, ({
+  $isSaturated,
+  $color
+}) => $isSaturated ? Color.CLEAR : BadgeColorToColorMap[$color], ({
+  $isSaturated,
+  $color
+}) => $isSaturated ? BadgeColorToColorMap[$color] : BadgeColorToLightColorMap[$color], FontSize.HEADING5, FontFamily.MAIN, FontWeight.MEDIUM, LineHeight.SMALL);
+BadgeBox.displayName = 'BadgeBox';

package/Badge/types.d.ts

@@ -0,0 +1,8 @@
+import type { Ref, ReactNode } from 'react';
+export type BadgeColor = 'gray' | 'green' | 'orange' | 'red' | 'purple' | 'sky' | 'locked';
+export type BadgeProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
+    readonly boxRef?: Ref<HTMLDivElement>;
+    readonly color: BadgeColor;
+    readonly isSaturated?: boolean;
+    readonly children: ReactNode;
+};

package/Banner/Banner.d.ts

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

package/Banner/Banner.js

@@ -0,0 +1,82 @@
+import React, { useState, useCallback } from 'react';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { H4 } from '@pushwoosh/kit-typography';
+import { Spinner } from '../Spinner';
+import { BannerPropsToBannerBoxMap, BannerPropsToIconContainerMap, BannerTypeToSpinnerColorMap } from './maps';
+import { ActionButton, BannerContent, BannerSpinner, CloseButton, IconContainer } from './styles';
+export function Banner(props) {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isActionPressed, setIsActionPressed] = useState(false);
+  const [isClosePressed, setIsClosePressed] = useState(false);
+  const {
+    boxRef,
+    type,
+    title,
+    icon,
+    view = 'shape',
+    canBeClosed,
+    isLoading = false,
+    children,
+    className,
+    onClose,
+    ...rest
+  } = props;
+  const {
+    action
+  } = props;
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setIsClosePressed(true);
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+  const handleAction = useCallback(() => {
+    setIsActionPressed(true);
+    action === null || action === void 0 || action.onClick();
+  }, [action]);
+  if (!type) {
+    console.error(`[Banner]: required prop type "${type}" is not set`);
+    return null;
+  }
+  const BannerBox = BannerPropsToBannerBoxMap[view];
+  if (!BannerBox) {
+    console.error(`[Banner]: cannot render with type "${type}" and view "${view}"`);
+    return null;
+  }
+  const DefaultIcon = BannerPropsToIconContainerMap[type] ?? null;
+  const SpinnerColor = BannerTypeToSpinnerColorMap[type];
+  if (!isOpen) {
+    return null;
+  }
+  return React.createElement(BannerBox, {
+    ...rest,
+    "$isOpen": isOpen,
+    "$isLoading": isLoading,
+    ref: boxRef,
+    "$type": type,
+    className: className
+  }, React.createElement(IconContainer, null, icon || React.createElement(DefaultIcon, {
+    size: "small",
+    view: "filled"
+  })), React.createElement(BannerContent, {
+    "$hasChildren": !!children
+  }, React.createElement(H4, null, title), children && React.createElement("div", null, children)), action && React.createElement(Vertical, {
+    "$padding": `0 ${Spacing.S3} 0 0`,
+    "$alignContent": "center"
+  }, React.createElement(ActionButton, {
+    onClick: handleAction,
+    "$isPressed": isActionPressed,
+    "$isLoading": isLoading
+  }, React.createElement("span", null, action.buttonText), isLoading && React.createElement(BannerSpinner, null, React.createElement(Spinner, {
+    size: "small",
+    color: SpinnerColor
+  })))), canBeClosed && React.createElement(CloseButton, {
+    onClick: handleClose,
+    "$isPressed": isClosePressed
+  }, React.createElement(CloseIcon, {
+    size: "small"
+  })));
+}

package/Banner/colors.d.ts

@@ -0,0 +1,12 @@
+import type { BannerType } from './types';
+type Colors = {
+    color: string;
+    bgColor: string;
+};
+type BannerColors = {
+    base: Colors;
+    iconArea: Colors;
+    hover: Partial<Colors>;
+};
+export declare const colors: Record<BannerType, Record<'shape' | 'ghost', BannerColors>>;
+export {};

package/Banner/colors.js

@@ -0,0 +1,115 @@
+import { Color } from '@pushwoosh/kit-constants';
+export const colors = {
+  error: {
+    shape: {
+      base: {
+        color: Color.MAIN,
+        bgColor: Color.DANGER_LIGHT
+      },
+      iconArea: {
+        color: Color.CLEAR,
+        bgColor: Color.DANGER
+      },
+      hover: {
+        bgColor: Color.DANGER_LIGHT
+      }
+    },
+    ghost: {
+      base: {
+        color: Color.MAIN,
+        bgColor: Color.DANGER_LIGHT
+      },
+      iconArea: {
+        color: Color.DANGER,
+        bgColor: Color.DANGER_LIGHT
+      },
+      hover: {
+        bgColor: Color.DANGER_LIGHT
+      }
+    }
+  },
+  warning: {
+    shape: {
+      base: {
+        color: Color.MAIN,
+        bgColor: Color.WARNING_LIGHT
+      },
+      iconArea: {
+        color: Color.CLEAR,
+        bgColor: Color.WARNING
+      },
+      hover: {
+        bgColor: Color.WARNING_LIGHT
+      }
+    },
+    ghost: {
+      base: {
+        color: Color.MAIN,
+        bgColor: Color.WARNING_LIGHT
+      },
+      iconArea: {
+        color: Color.WARNING,
+        bgColor: Color.WARNING_LIGHT
+      },
+      hover: {
+        bgColor: Color.WARNING_LIGHT
+      }
+    }
+  },
+  info: {
+    shape: {
+      base: {
+        color: Color.MAIN,
+        bgColor: Color.BRIGHT_LIGHT
+      },
+      iconArea: {
+        color: Color.CLEAR,
+        bgColor: Color.BRIGHT
+      },
+      hover: {
+        bgColor: Color.BRIGHT_LIGHT
+      }
+    },
+    ghost: {
+      base: {
+        color: Color.MAIN,
+        bgColor: Color.BRIGHT_LIGHT
+      },
+      iconArea: {
+        color: Color.BRIGHT,
+        bgColor: Color.BRIGHT_LIGHT
+      },
+      hover: {
+        bgColor: Color.BRIGHT_LIGHT
+      }
+    }
+  },
+  success: {
+    shape: {
+      base: {
+        color: Color.MAIN,
+        bgColor: Color.SUCCESS_LIGHT
+      },
+      iconArea: {
+        color: Color.CLEAR,
+        bgColor: Color.SUCCESS
+      },
+      hover: {
+        bgColor: Color.SUCCESS_LIGHT
+      }
+    },
+    ghost: {
+      base: {
+        color: Color.MAIN,
+        bgColor: Color.SUCCESS_LIGHT
+      },
+      iconArea: {
+        color: Color.SUCCESS,
+        bgColor: Color.SUCCESS_LIGHT
+      },
+      hover: {
+        bgColor: Color.SUCCESS_LIGHT
+      }
+    }
+  }
+};

package/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export { Banner } from './Banner';
+export type { BannerType, RequiredBannerProps, BannerPropsWithButton, } from './types';

package/Banner/index.js

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

package/Banner/maps.d.ts

@@ -0,0 +1,27 @@
+import { Color } from '@pushwoosh/kit-constants';
+export declare const BannerPropsToIconContainerMap: {
+    error: import("react").FC<import("@pushwoosh/kit-icons").DangerTriangleIconProps>;
+    warning: import("react").FC<import("@pushwoosh/kit-icons").WarningRoundIconProps>;
+    info: import("react").FC<import("@pushwoosh/kit-icons").WarningRoundIconProps>;
+    success: import("react").FC<import("@pushwoosh/kit-icons").WarningRoundIconProps>;
+};
+export declare const BannerTypeToSpinnerColorMap: {
+    error: Color;
+    warning: Color;
+    info: Color;
+    success: Color;
+};
+export declare const BannerPropsToBannerBoxMap: {
+    readonly shape: import("styled-components").StyledComponent<"div", any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        $isOpen?: boolean;
+        $isLoading: boolean;
+    } & {
+        $type: import("./types").BannerType;
+    }, never>;
+    readonly ghost: import("styled-components").StyledComponent<"div", any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        $isOpen?: boolean;
+        $isLoading: boolean;
+    } & {
+        $type: import("./types").BannerType;
+    }, never>;
+};

package/Banner/maps.js

@@ -0,0 +1,19 @@
+import { Color } from '@pushwoosh/kit-constants';
+import { DangerTriangleIcon, WarningRoundIcon } from '@pushwoosh/kit-icons';
+import { BannerShape, BannerGhost } from './styles';
+export const BannerPropsToIconContainerMap = {
+  error: DangerTriangleIcon,
+  warning: WarningRoundIcon,
+  info: WarningRoundIcon,
+  success: WarningRoundIcon
+};
+export const BannerTypeToSpinnerColorMap = {
+  error: Color.DANGER,
+  warning: Color.WARNING,
+  info: Color.BRIGHT,
+  success: Color.SUCCESS
+};
+export const BannerPropsToBannerBoxMap = {
+  shape: BannerShape,
+  ghost: BannerGhost
+};

package/Banner/styles.d.ts

@@ -0,0 +1,29 @@
+import type { BannerType } from './types';
+export declare const BannerSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<"button", any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    $isPressed: boolean;
+    $isLoading?: boolean;
+}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"button", any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    $isPressed: boolean;
+}, never>;
+export declare const BannerBox: import("styled-components").StyledComponent<"div", any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $isOpen?: boolean;
+    $isLoading: boolean;
+}, never>;
+export declare const BannerContent: import("styled-components").StyledComponent<"div", any, {
+    $hasChildren?: boolean;
+}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerShape: import("styled-components").StyledComponent<"div", any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $isOpen?: boolean;
+    $isLoading: boolean;
+} & {
+    $type: BannerType;
+}, never>;
+export declare const BannerGhost: import("styled-components").StyledComponent<"div", any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $isOpen?: boolean;
+    $isLoading: boolean;
+} & {
+    $type: BannerType;
+}, never>;

package/Banner/styles.js

@@ -0,0 +1,45 @@
+import { rgba } from 'polished';
+import styled from 'styled-components';
+import { Spacing, ShapeRadius, FontWeight } from '@pushwoosh/kit-constants';
+import { colors } from './colors';
+export const BannerSpinner = styled.div.withConfig({
+  displayName: "BannerSpinner",
+  componentId: "sc-9uu4ap-0"
+})(["position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;"]);
+export const ActionButton = styled.button.withConfig({
+  displayName: "ActionButton",
+  componentId: "sc-9uu4ap-1"
+})(["appearance:none !important;border:none;background:initial;cursor:pointer;padding:", ";position:relative;font-weight:", ";white-space:nowrap;height:fit-content;> span{visibility:", ";}opacity:", ";"], Spacing.S2, FontWeight.BOLD, ({
+  $isLoading
+}) => $isLoading ? 'hidden' : 'visible', ({
+  $isPressed,
+  $isLoading
+}) => $isPressed && !$isLoading ? 0.5 : 1);
+export const CloseButton = styled.button.withConfig({
+  displayName: "CloseButton",
+  componentId: "sc-9uu4ap-2"
+})(["appearance:none !important;border:none;background:initial;cursor:pointer;padding:0 ", " 0 0;height:fit-content;align-self:center;opacity:", ";"], Spacing.S3, props => props.$isPressed ? 0.5 : 1);
+export const BannerBox = styled.div.withConfig({
+  displayName: "BannerBox",
+  componentId: "sc-9uu4ap-3"
+})(["display:flex;border-radius:", ";pointer-events:", ";"], ShapeRadius.SECTION, ({
+  $isLoading
+}) => $isLoading ? 'none' : 'auto');
+export const BannerContent = styled.div.withConfig({
+  displayName: "BannerContent",
+  componentId: "sc-9uu4ap-4"
+})(["flex-grow:1;padding:", ";color:", ";"], ({
+  $hasChildren
+}) => $hasChildren ? Spacing.S5 : `${Spacing.S3} ${Spacing.S5}`, colors.error.shape.base.color);
+export const IconContainer = styled.div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-9uu4ap-5"
+})(["display:flex;align-items:center;justify-content:center;padding:0 ", ";border-radius:", " 0 0 ", ";"], Spacing.S3, ShapeRadius.SECTION, ShapeRadius.SECTION);
+export const BannerShape = styled(BannerBox).withConfig({
+  displayName: "BannerShape",
+  componentId: "sc-9uu4ap-6"
+})(["background:", ";", "{color:", ";background:", ";}", "{color:", ";background:", ";;border-radius:", ";&:hover{text-decoration:none;background:", ";border-radius:", ";}}", "{color:", ";> *{&:hover{text-decoration:none;background:", ";border-radius:", ";}}}"], props => colors[props.$type].shape.base.bgColor, IconContainer, props => colors[props.$type].shape.iconArea.color, props => colors[props.$type].shape.iconArea.bgColor, ActionButton, props => colors[props.$type].shape.iconArea.bgColor, props => props.$isLoading ? colors[props.$type].shape.base.bgColor : 'initial', props => props.$isLoading ? ShapeRadius.CONTROL : 'initial', props => colors[props.$type].shape.hover.bgColor, ShapeRadius.CONTROL, CloseButton, props => colors[props.$type].shape.iconArea.bgColor, props => colors[props.$type].shape.hover.bgColor, Spacing.S5);
+export const BannerGhost = styled(BannerBox).withConfig({
+  displayName: "BannerGhost",
+  componentId: "sc-9uu4ap-7"
+})(["background:", ";", "{color:", ";background:", ";}", "{color:", ";background:", ";;border-radius:", ";&:hover{text-decoration:none;background:", ";border-radius:", ";}}", "{color:", ";> *{&:hover{text-decoration:none;background:", ";border-radius:", ";}}}"], props => colors[props.$type].ghost.base.bgColor, IconContainer, props => colors[props.$type].ghost.iconArea.color, props => rgba(colors[props.$type].ghost.iconArea.bgColor, 0.14), ActionButton, props => colors[props.$type].ghost.iconArea.color, props => props.$isLoading ? colors[props.$type].ghost.base.bgColor : 'initial', props => props.$isLoading ? ShapeRadius.CONTROL : 'initial', props => colors[props.$type].ghost.hover.bgColor, ShapeRadius.CONTROL, CloseButton, props => colors[props.$type].ghost.iconArea.color, props => colors[props.$type].ghost.hover.bgColor, Spacing.S5);

package/Banner/types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement, ReactNode } from 'react';
+export type BannerType = 'error' | 'warning' | 'info' | 'success';
+export type RequiredBannerProps = {
+    readonly boxRef?: any;
+    readonly type: BannerType;
+    readonly title: string;
+    readonly view?: 'shape' | 'ghost';
+    readonly icon?: ReactElement;
+    readonly className?: string;
+    readonly isLoading?: boolean;
+    readonly canBeClosed?: boolean;
+    readonly onClose?: () => void;
+    readonly children?: ReactNode;
+};
+export type BannerPropsWithButton = RequiredBannerProps & {
+    readonly action?: {
+        readonly onClick: () => void;
+        readonly buttonText: string;
+    };
+};

package/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import { type ReactElement } from 'react';
+import type { ButtonPropsWithoutAs, ButtonPropsWithAsTag, ButtonPropsWithAsComponent } from './types';
+export declare function Button(props: ButtonPropsWithoutAs): ReactElement | null;
+export declare function Button<AS extends keyof HTMLElementTagNameMap>(props: ButtonPropsWithAsTag<AS>): ReactElement | null;
+export declare function Button<OuterProps extends object>(props: ButtonPropsWithAsComponent<OuterProps>): ReactElement | null;

package/Button/Button.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Spinner } from '../Spinner';
+import { ButtonPropsToButtonBoxMap, SpinnerSizeByButtonSizeMap } from './maps';
+import { ButtonIcon, ButtonSpinner, ButtonContent } from './styles';
+export function Button(props) {
+  const {
+    type = 'button',
+    boxRef,
+    color,
+    view = 'shape',
+    size = 'field',
+    isDisabled,
+    isLoading,
+    isOpen,
+    icon,
+    rightIcon,
+    children,
+    ...rest
+  } = props;
+  if (!color) {
+    console.error(`[Button]: required prop color "${color}" is not set`);
+    return null;
+  }
+  const ButtonBox = ButtonPropsToButtonBoxMap[color][view][size];
+  if (!ButtonBox) {
+    console.error(`[Button]: cannot render with color "${color}" and size "${size}" and view "${view}"`);
+    return null;
+  }
+  const isShowOverlaySpinner = !!children && !icon && view !== 'ghost' && isLoading;
+  return React.createElement(ButtonBox, {
+    ...rest,
+    type: type,
+    disabled: isDisabled,
+    "$isDisabled": isDisabled,
+    "$isLoading": isLoading,
+    "$isOpen": isOpen,
+    "$hideContent": isShowOverlaySpinner,
+    "$hasLeftIcon": !!icon,
+    "$hasRightIcon": !!rightIcon,
+    "$hasContent": !!children,
+    ref: boxRef
+  }, icon && React.createElement(ButtonIcon, null, isLoading ? React.createElement(Spinner, {
+    size: SpinnerSizeByButtonSizeMap[size]
+  }) : icon), children && React.createElement(ButtonContent, null, React.createElement("div", null, children)), rightIcon && React.createElement(ButtonIcon, null, rightIcon), isShowOverlaySpinner && React.createElement(ButtonSpinner, null, React.createElement(Spinner, {
+    color: "danger",
+    size: SpinnerSizeByButtonSizeMap[size]
+  })));
+}

package/Button/GhostButton.d.ts

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

package/Button/GhostButton.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const GhostButton = styled.button.withConfig({
+  displayName: "GhostButton",
+  componentId: "sc-11te6l1-0"
+})(["padding:0;appearance:none;border:none;background-color:transparent;user-select:none;&:focus{outline:none;}"]);

package/Button/colors.d.ts

@@ -0,0 +1,16 @@
+type Colors = {
+    color: string;
+    bgColor: string;
+    borderColor?: string;
+};
+type ButtonColors = {
+    base: Colors;
+    disabled: Partial<Colors>;
+    hover: Partial<Colors>;
+};
+export declare const colors: Record<string, Record<string, ButtonColors>>;
+export declare function createColors(buttonColors: ButtonColors): import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    $isOpen?: boolean;
+    $isDisabled?: boolean;
+}, any>>;
+export {};