@pushwoosh/dumb-components 3.5.0 → 4.0.0

package/AccessForbidden/styles.d.ts

@@ -8,6 +8,7 @@ export declare const ImageBox: import("styled-components/dist/types").IStyledCom
 export declare const TitleBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     readonly boxRef?: import("react").Ref<HTMLHeadingElement>;
     readonly children: import("react").ReactNode;
+    readonly $textTransform?: import("react").CSSProperties["textTransform"];
 }, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string & Omit<typeof H1, keyof import("react").Component<any, {}, any>>;

package/Badge/styles.js

@@ -10,5 +10,5 @@ export const BadgeBox = styled.div.withConfig({
 }) => $isSaturated ? Color.CLEAR : BadgeColorToColorMap[$color], ({
   $isSaturated,
   $color
-}) => $isSaturated ? BadgeColorToColorMap[$color] : BadgeColorToLightColorMap[$color], FontSize.HEADING5, FontFamily.MAIN, FontWeight.MEDIUM, LineHeight.SMALL);
+}) => $isSaturated ? BadgeColorToColorMap[$color] : BadgeColorToLightColorMap[$color], FontSize.HEADING4, FontFamily.MAIN, FontWeight.MEDIUM, LineHeight.SMALL);
 BadgeBox.displayName = 'BadgeBox';

package/Banner/Banner.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { CloseIcon } from '@pushwoosh/kit-icons';
-import { H4 } from '@pushwoosh/kit-typography';
+import { H3 } from '@pushwoosh/kit-typography';
 import { Spinner } from '../Spinner';
 import { BannerPropsToBannerBoxMap, BannerPropsToIconContainerMap, BannerTypeToSpinnerColorMap } from './maps';
 import { ActionButton, BannerContent, BannerSpinner, CloseButton, IconContainer } from './styles';
@@ -80,7 +80,7 @@ export function Banner(props) {
         view: "filled"
       })
     }), _jsxs(BannerContent, {
-      children: [hasTitle && _jsx(H4, {
+      children: [hasTitle && _jsx(H3, {
         children: title
       }), hasChildren && _jsx("div", {
         children: children

package/Button/Button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Spinner } from '../Spinner';
-import { ButtonPropsToButtonBoxMap, SpinnerSizeByButtonSizeMap } from './maps';
-import { ButtonIcon, ButtonSpinner, ButtonContent } from './styles';
+import { geometryBySizeAndView, spinnerSizeBySize } from './constants';
+import { ButtonBox, ButtonIcon, ButtonSpinner, ButtonContent } from './styles';
 export function Button(props) {
   const {
     type = 'button',
@@ -15,22 +15,33 @@ export function Button(props) {
     icon,
     rightIcon,
     children,
+    onClick,
     ...rest
   } = props;
   if (!color) {
     console.error(`[Button]: required prop color "${color}" is not set`);
     return null;
   }
-  const ButtonBox = ButtonPropsToButtonBoxMap[color][view][size];
-  if (!ButtonBox) {
+  if (!geometryBySizeAndView[size]?.[view]) {
     console.error(`[Button]: cannot render with color "${color}" and size "${size}" and view "${view}"`);
     return null;
   }
   const isShowOverlaySpinner = !!children && !icon && view !== 'ghost' && isLoading;
+  const isDisabledNonButton = !!isDisabled && !!rest.as && rest.as !== 'button';
+  const handleClick = isDisabledNonButton ? event => {
+    event.preventDefault();
+    event.stopPropagation();
+  } : onClick;
   return _jsxs(ButtonBox, {
     ...rest,
     type: type,
     disabled: isDisabled,
+    onClick: handleClick,
+    "aria-disabled": isDisabledNonButton || undefined,
+    tabIndex: isDisabledNonButton ? -1 : rest.tabIndex,
+    "$color": color,
+    "$view": view,
+    "$size": size,
     "$isDisabled": isDisabled,
     "$isLoading": isLoading,
     "$isOpen": isOpen,
@@ -41,7 +52,7 @@ export function Button(props) {
     ref: boxRef,
     children: [icon && _jsx(ButtonIcon, {
       children: isLoading ? _jsx(Spinner, {
-        size: SpinnerSizeByButtonSizeMap[size]
+        size: spinnerSizeBySize[size]
       }) : icon
     }), children && _jsx(ButtonContent, {
       children: _jsx("div", {
@@ -52,7 +63,7 @@ export function Button(props) {
     }), isShowOverlaySpinner && _jsx(ButtonSpinner, {
       children: _jsx(Spinner, {
         color: "danger",
-        size: SpinnerSizeByButtonSizeMap[size]
+        size: spinnerSizeBySize[size]
       })
     })]
   });

package/Button/colors.d.ts

@@ -1,3 +1,4 @@
+import type { ButtonColor, ButtonSize, ButtonView } from './types';
 type Colors = {
     color: string;
     bgColor: string;
@@ -8,9 +9,10 @@ type ButtonColors = {
     disabled: Partial<Colors>;
     hover: Partial<Colors>;
 };
-export declare const colors: Record<string, Record<string, ButtonColors>>;
-export declare function createColors(buttonColors: ButtonColors): import("styled-components").RuleSet<NoInfer<{
+declare function createColors(buttonColors: ButtonColors, opened: Colors): import("styled-components").RuleSet<NoInfer<{
     $isOpen?: boolean;
     $isDisabled?: boolean;
 }>>;
+/** Palette per `color` × `view` × `size`, including the `isOpen` matrix. */
+export declare const colorStyles: Record<ButtonColor, Record<ButtonView, Record<ButtonSize, ReturnType<typeof createColors>>>>;
 export {};

package/Button/colors.js

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 import { Color } from '@pushwoosh/kit-constants';
-export const colors = {
+const colors = {
   primary: {
     shape: {
       base: {
@@ -84,7 +84,33 @@ export const colors = {
     }
   }
 };
-export function createColors(buttonColors) {
+const openedFilled = {
+  color: Color.CLEAR,
+  bgColor: Color.MAIN,
+  borderColor: Color.MAIN
+};
+const openedText = {
+  color: Color.MAIN,
+  bgColor: 'transparent',
+  borderColor: 'transparent'
+};
+const ghostCompactBaseColor = {
+  secondary: `var(--secondary-ghost-base-color, ${Color.SOFT})`
+};
+function toGhostCompact(color, buttonColors) {
+  return {
+    ...buttonColors,
+    base: {
+      ...buttonColors.base,
+      color: ghostCompactBaseColor[color] ?? buttonColors.base.color
+    },
+    hover: {
+      ...buttonColors.hover,
+      bgColor: 'transparent'
+    }
+  };
+}
+function createColors(buttonColors, opened) {
   const base = {
     borderColor: 'transparent',
     ...buttonColors.base
@@ -97,13 +123,13 @@ export function createColors(buttonColors) {
     ...base,
     ...buttonColors.hover
   };
-  const hoverCss = css(["&:hover:not([disabled]){color:", ";background-color:", ";border-color:", ";}"], hover.color, hover.bgColor, hover.borderColor);
-  return css(["color:", ";background-color:", ";border-color:", ";&:disabled{color:", ";background-color:", ";border-color:", ";}", " &:active:not([disabled]){color:", ";background-color:", ";border-color:", ";opacity:0.5;}"], ({
+  const hoverCss = css(["&:hover:not([disabled]):not([aria-disabled='true']){color:", ";background-color:", ";border-color:", ";}"], hover.color, hover.bgColor, hover.borderColor);
+  return css(["color:", ";background-color:", ";border-color:", ";&:disabled{color:", ";background-color:", ";border-color:", ";}", " &:active:not([disabled]):not([aria-disabled='true']){color:", ";background-color:", ";border-color:", ";opacity:0.5;}"], ({
     $isOpen,
     $isDisabled
   }) => {
     if ($isOpen) {
-      return Color.CLEAR;
+      return opened.color;
     }
     return $isDisabled ? disabled.color : base.color;
   }, ({
@@ -111,7 +137,7 @@ export function createColors(buttonColors) {
     $isDisabled
   }) => {
     if ($isOpen) {
-      return Color.MAIN;
+      return opened.bgColor;
     }
     return $isDisabled ? disabled.bgColor : base.bgColor;
   }, ({
@@ -119,10 +145,39 @@ export function createColors(buttonColors) {
     $isDisabled
   }) => {
     if ($isOpen) {
-      return Color.MAIN;
+      return opened.borderColor;
     }
     return $isDisabled ? disabled.borderColor : base.borderColor;
   }, disabled.color, disabled.bgColor, disabled.borderColor, ({
     $isOpen
-  }) => $isOpen ? '' : hoverCss /* sc-custom "display: none;" */, hover.color, hover.bgColor, hover.borderColor);
-}
+  }) => $isOpen ? '' : hoverCss, hover.color, hover.bgColor, hover.borderColor);
+}
+function createColorsBySize(color, view) {
+  const buttonColors = colors[color][view];
+  const field = createColors(buttonColors, openedFilled);
+  if (view === 'shape') {
+    return {
+      field,
+      compact: field
+    };
+  }
+  return {
+    field,
+    compact: createColors(toGhostCompact(color, buttonColors), openedText)
+  };
+}
+/** Palette per `color` × `view` × `size`, including the `isOpen` matrix. */
+export const colorStyles = {
+  primary: {
+    shape: createColorsBySize('primary', 'shape'),
+    ghost: createColorsBySize('primary', 'ghost')
+  },
+  secondary: {
+    shape: createColorsBySize('secondary', 'shape'),
+    ghost: createColorsBySize('secondary', 'ghost')
+  },
+  danger: {
+    shape: createColorsBySize('danger', 'shape'),
+    ghost: createColorsBySize('danger', 'ghost')
+  }
+};

package/Button/constants.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonSize, ButtonView } from './types';
+/** Geometry and typography resolved from `size` and `view`. */
+export type ButtonGeometry = {
+    readonly height: string;
+    readonly border: string;
+    readonly padding: string;
+    readonly labelPadding: string;
+    readonly gap: string;
+    readonly iconSlot: string;
+    readonly fontSize: string;
+    readonly lineHeight: number;
+    readonly fontWeight: number;
+    readonly textTransform: 'none' | 'uppercase';
+};
+/** Geometry per `size` × `view`; colors live in `colors.ts`. */
+export declare const geometryBySizeAndView: Record<ButtonSize, Record<ButtonView, ButtonGeometry>>;
+/** Spinner size used in place of the icon, per button `size`. */
+export declare const spinnerSizeBySize: {
+    readonly compact: "small";
+    readonly field: "medium";
+};

package/Button/constants.js

@@ -0,0 +1,54 @@
+import { FontSize, FontWeight, LineHeight, UnitSize } from '@pushwoosh/kit-constants';
+const fieldTypography = {
+  fontSize: FontSize.REGULAR,
+  lineHeight: LineHeight.REGULAR,
+  fontWeight: FontWeight.MEDIUM,
+  textTransform: 'none'
+};
+const compactTypography = {
+  fontSize: FontSize.SMALL,
+  lineHeight: LineHeight.SMALL,
+  fontWeight: FontWeight.BOLD,
+  textTransform: 'uppercase'
+};
+const boxed = {
+  border: '1px',
+  padding: '6px',
+  labelPadding: '6px',
+  gap: '0px'
+};
+const fieldBox = {
+  ...fieldTypography,
+  ...boxed,
+  height: UnitSize.FIELD_HEIGHT,
+  iconSlot: UnitSize.ICON_MEDIUM
+};
+/** Geometry per `size` × `view`; colors live in `colors.ts`. */
+export const geometryBySizeAndView = {
+  field: {
+    shape: fieldBox,
+    ghost: fieldBox
+  },
+  compact: {
+    shape: {
+      ...compactTypography,
+      ...boxed,
+      height: UnitSize.COMPACT_HEIGHT,
+      iconSlot: UnitSize.ICON_SMALL
+    },
+    ghost: {
+      ...compactTypography,
+      height: '16px',
+      border: '0px',
+      padding: '0px',
+      labelPadding: '0px',
+      gap: '6px',
+      iconSlot: UnitSize.ICON_SMALL
+    }
+  }
+};
+/** Spinner size used in place of the icon, per button `size`. */
+export const spinnerSizeBySize = {
+  compact: 'small',
+  field: 'medium'
+};

package/Button/styles.d.ts

@@ -1,3 +1,4 @@
+import type { ButtonColor, ButtonSize, ButtonView } from './types';
 export declare const ButtonIcon: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
@@ -7,110 +8,10 @@ export declare const ButtonContent: import("styled-components/dist/types").IStyl
 export declare const ButtonSpinner: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
-export declare const ButtonBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>> & string;
-export declare const ButtonBoxDangerGhostCompact: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxDangerGhostField: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxDangerShapeCompact: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxDangerShapeField: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxPrimaryShapeCompact: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxPrimaryShapeField: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
+type ButtonBoxProps = {
+    $color: ButtonColor;
+    $view: ButtonView;
+    $size: ButtonSize;
     $isDisabled?: boolean;
     $isLoading?: boolean;
     $isOpen?: boolean;
@@ -118,122 +19,11 @@ export declare const ButtonBoxPrimaryShapeField: import("styled-components/dist/
     $hasLeftIcon?: boolean;
     $hasRightIcon?: boolean;
     $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxPrimaryGhostCompact: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxPrimaryGhostField: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxSecondaryGhostCompact: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxSecondaryGhostField: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxSecondaryShapeCompact: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
-export declare const ButtonBoxSecondaryShapeField: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+};
+export declare const ButtonBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
-    $isDisabled?: boolean;
-    $isLoading?: boolean;
-    $isOpen?: boolean;
-    $hideContent?: boolean;
-    $hasLeftIcon?: boolean;
-    $hasRightIcon?: boolean;
-    $hasContent?: boolean;
-}>, "as" | "forwardedAs"> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
-        [key: `--${string}`]: string | number | undefined;
-    }) | undefined;
-}> & string;
+}, ButtonBoxProps>> & string;
 export declare const RemoveButtonBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export {};