@pushwoosh/dumb-components 1.0.0 → 1.0.2

package/Button/colors.js

@@ -0,0 +1,130 @@
+import { css } from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+export const colors = {
+  primary: {
+    shape: {
+      base: {
+        color: `var(--primary-shape-base-color, ${Color.CLEAR})`,
+        bgColor: `var(--primary-shape-base-bg-color, ${Color.PRIMARY})`
+      },
+      disabled: {
+        bgColor: `var(--primary-shape-disabled-bg-color, ${Color.LOCKED})`
+      },
+      hover: {
+        bgColor: `var(--primary-shape-hover-bg-color, ${Color.PRIMARY_HOVER})`
+      }
+    },
+    ghost: {
+      base: {
+        color: `var(--primary-ghost-base-color, ${Color.PRIMARY})`,
+        bgColor: 'var(--primary-ghost-base-bg-color, transparent)'
+      },
+      disabled: {
+        color: `var(--primary-ghost-disabled-color, ${Color.LOCKED})`
+      },
+      hover: {
+        color: `var(--primary-ghost-hover-color, ${Color.PRIMARY_HOVER})`,
+        bgColor: `var(--primary-ghost-hover-bg-color, ${Color.BRIGHT_LIGHT})`
+      }
+    }
+  },
+  secondary: {
+    shape: {
+      base: {
+        color: `var(--secondary-shape-base-color, ${Color.MAIN})`,
+        bgColor: `var(--secondary-shape-base-bg-color, ${Color.FROZEN})`,
+        borderColor: `var(--secondary-shape-base-border-color, ${Color.FORM})`
+      },
+      disabled: {
+        color: `var(--secondary-shape-disabled-color, ${Color.LOCKED})`
+      },
+      hover: {
+        color: `var(--secondary-shape-hover-color, ${Color.PRIMARY_HOVER})`,
+        bgColor: `var(--secondary-shape-hover-bg-color, ${Color.BRIGHT_LIGHT})`,
+        borderColor: 'var(--secondary-shape-hover-border-color, #005EFF24)'
+      }
+    },
+    ghost: {
+      base: {
+        color: `var(--secondary-ghost-base-color, ${Color.MAIN})`,
+        bgColor: 'var(--secondary-ghost-base-bg-color, transparent)'
+      },
+      disabled: {
+        color: `var(--secondary-ghost-disabled-color, ${Color.LOCKED})`
+      },
+      hover: {
+        color: `var(--secondary-ghost-hover-color, ${Color.PRIMARY_HOVER})`,
+        bgColor: `var(--secondary-ghost-hover-bg-color, ${Color.BRIGHT_LIGHT})`
+      }
+    }
+  },
+  danger: {
+    shape: {
+      base: {
+        color: `var(--danger-shape-base-color, ${Color.CLEAR})`,
+        bgColor: `var(--danger-shape-base-bg-color, ${Color.DANGER})`
+      },
+      disabled: {
+        color: `var(--danger-shape-disabled-color, ${Color.LOCKED})`
+      },
+      hover: {
+        bgColor: `var(--danger-shape-hover-bg-color, ${Color.DANGER_HOVER})`
+      }
+    },
+    ghost: {
+      base: {
+        color: `var(--danger-ghost-base-color, ${Color.DANGER})`,
+        bgColor: 'var(--danger-ghost-base-bg-color, transparent)'
+      },
+      disabled: {
+        color: `var(--danger-ghost-disabled-color, ${Color.LOCKED})`
+      },
+      hover: {
+        color: `var(--danger-ghost-hover-color, ${Color.DANGER_HOVER})`,
+        bgColor: `var(--danger-ghost-hover-bg-color, ${Color.DANGER_LIGHT})`
+      }
+    }
+  }
+};
+export function createColors(buttonColors) {
+  const base = {
+    borderColor: 'transparent',
+    ...buttonColors.base
+  };
+  const disabled = {
+    ...base,
+    ...buttonColors.disabled
+  };
+  const hover = {
+    ...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;}"], ({
+    $isOpen,
+    $isDisabled
+  }) => {
+    if ($isOpen) {
+      return Color.CLEAR;
+    }
+    return $isDisabled ? disabled.color : base.color;
+  }, ({
+    $isOpen,
+    $isDisabled
+  }) => {
+    if ($isOpen) {
+      return Color.MAIN;
+    }
+    return $isDisabled ? disabled.color : base.bgColor;
+  }, ({
+    $isOpen,
+    $isDisabled
+  }) => {
+    if ($isOpen) {
+      return Color.MAIN;
+    }
+    return $isDisabled ? disabled.color : base.bgColor;
+  }, disabled.color, disabled.bgColor, disabled.borderColor, ({
+    $isOpen
+  }) => $isOpen ? '' : hoverCss /* sc-custom "display: none;" */, hover.color, hover.bgColor, hover.borderColor);
+}

package/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonPropsWithoutAs, ButtonPropsWithAsTag, ButtonPropsWithAsComponent, RequiredButtonProps, } from './types';
+export { GhostButton } from './GhostButton';

package/Button/index.js

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export { GhostButton } from './GhostButton';

package/Button/maps.d.ts

@@ -0,0 +1,132 @@
+export declare const SpinnerSizeByButtonSizeMap: {
+    compact: "small";
+    field: "medium";
+};
+export declare const ButtonPropsToButtonBoxMap: {
+    readonly danger: {
+        readonly shape: {
+            readonly field: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+            readonly compact: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+        };
+        readonly ghost: {
+            readonly field: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+            readonly compact: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+        };
+    };
+    readonly primary: {
+        readonly shape: {
+            readonly field: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+            readonly compact: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+        };
+        readonly ghost: {
+            readonly field: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+            readonly compact: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+        };
+    };
+    readonly secondary: {
+        readonly shape: {
+            readonly field: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+            readonly compact: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+        };
+        readonly ghost: {
+            readonly field: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+            readonly compact: import("styled-components").StyledComponent<"button", any, {
+                $isDisabled?: boolean;
+                $isLoading?: boolean;
+                $isOpen?: boolean;
+                $hideContent?: boolean;
+                $hasLeftIcon?: boolean;
+                $hasRightIcon?: boolean;
+                $hasContent?: boolean;
+            }, never>;
+        };
+    };
+};

package/Button/maps.js

@@ -0,0 +1,37 @@
+import { ButtonBoxDangerShapeCompact, ButtonBoxDangerGhostCompact, ButtonBoxDangerShapeField, ButtonBoxDangerGhostField, ButtonBoxPrimaryShapeCompact, ButtonBoxPrimaryGhostCompact, ButtonBoxPrimaryShapeField, ButtonBoxPrimaryGhostField, ButtonBoxSecondaryShapeCompact, ButtonBoxSecondaryGhostCompact, ButtonBoxSecondaryShapeField, ButtonBoxSecondaryGhostField } from './styles';
+export const SpinnerSizeByButtonSizeMap = {
+  compact: 'small',
+  field: 'medium'
+};
+export const ButtonPropsToButtonBoxMap = {
+  danger: {
+    shape: {
+      field: ButtonBoxDangerShapeField,
+      compact: ButtonBoxDangerShapeCompact
+    },
+    ghost: {
+      field: ButtonBoxDangerGhostField,
+      compact: ButtonBoxDangerGhostCompact
+    }
+  },
+  primary: {
+    shape: {
+      field: ButtonBoxPrimaryShapeField,
+      compact: ButtonBoxPrimaryShapeCompact
+    },
+    ghost: {
+      field: ButtonBoxPrimaryGhostField,
+      compact: ButtonBoxPrimaryGhostCompact
+    }
+  },
+  secondary: {
+    shape: {
+      field: ButtonBoxSecondaryShapeField,
+      compact: ButtonBoxSecondaryShapeCompact
+    },
+    ghost: {
+      field: ButtonBoxSecondaryGhostField,
+      compact: ButtonBoxSecondaryGhostCompact
+    }
+  }
+};

package/Button/styles.d.ts

@@ -0,0 +1,120 @@
+export declare const ButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonBox: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxDangerGhostCompact: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxDangerGhostField: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxDangerShapeCompact: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxDangerShapeField: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxPrimaryShapeCompact: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxPrimaryShapeField: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxPrimaryGhostCompact: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxPrimaryGhostField: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxSecondaryGhostCompact: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxSecondaryGhostField: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxSecondaryShapeCompact: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;
+export declare const ButtonBoxSecondaryShapeField: import("styled-components").StyledComponent<"button", any, {
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $isOpen?: boolean;
+    $hideContent?: boolean;
+    $hasLeftIcon?: boolean;
+    $hasRightIcon?: boolean;
+    $hasContent?: boolean;
+}, never>;

package/Button/styles.js

@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+import { Color, FontSize, LineHeight, Spacing, ShapeRadius, FontWeight, UnitSize } from '@pushwoosh/kit-constants';
+import { colors, createColors } from './colors';
+export const ButtonIcon = styled.div.withConfig({
+  displayName: "ButtonIcon",
+  componentId: "sc-qltvdl-0"
+})(["flex:0 0 auto;"]);
+export const ButtonContent = styled.div.withConfig({
+  displayName: "ButtonContent",
+  componentId: "sc-qltvdl-1"
+})(["display:grid;justify-content:start;& > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}&:first-child{justify-content:center;}&:first-child:last-child{padding-left:", ";padding-right:", ";}&:last-child:not(:first-child){padding-right:", ";}"], Spacing.S2, Spacing.S2, Spacing.S2);
+export const ButtonSpinner = styled.div.withConfig({
+  displayName: "ButtonSpinner",
+  componentId: "sc-qltvdl-2"
+})(["position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;"]);
+export const ButtonBox = styled.button.withConfig({
+  displayName: "ButtonBox",
+  componentId: "sc-qltvdl-3"
+})(["position:relative;display:inline-grid;grid-template-columns:", ";gap:", ";align-items:center;appearance:none !important;border:1px solid transparent;border-radius:", ";font-size:", ";line-height:", ";text-decoration:none;cursor:", ";user-select:none;&:hover{text-decoration:none;}&:focus{outline:none;}&:active{pointer-events:", ";}& ", "{opacity:", ";}"], props => `${props.$hasLeftIcon ? 'auto ' : ''}${props.$hasContent ? '1fr' : ''}${props.$hasRightIcon ? ' auto' : ''}`, Spacing.S1, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, props => props.$isDisabled || props.$isLoading ? 'not-allowed!important' : 'pointer', props => props.$isDisabled || props.$isLoading ? 'none' : 'auto', /* sc-selector */ButtonContent, ({
+  $hideContent,
+  $isLoading
+}) => {
+  if ($hideContent) {
+    return 0;
+  }
+  return $isLoading ? 0.5 : 1;
+});
+// danger ghost --------------
+const dangerGhostColors = createColors(colors.danger.ghost);
+export const ButtonBoxDangerGhostCompact = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxDangerGhostCompact",
+  componentId: "sc-qltvdl-4"
+})(["height:16px;padding:0;font-size:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:0;}& ", " + ", "{padding:0 0 0 ", ";}", ";--danger-ghost-hover-bg-color:transparent;"], FontSize.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-selector */ButtonIcon, /* sc-selector */ButtonContent, Spacing.S1, /* sc-custom "display: none;" */dangerGhostColors);
+export const ButtonBoxDangerGhostField = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxDangerGhostField",
+  componentId: "sc-qltvdl-5"
+})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */dangerGhostColors);
+// danger shape --------------
+const dangerShapeColors = createColors(colors.danger.shape);
+export const ButtonBoxDangerShapeCompact = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxDangerShapeCompact",
+  componentId: "sc-qltvdl-6"
+})(["height:28px;padding:0 calc(", " - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], Spacing.S2, FontSize.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */dangerShapeColors);
+export const ButtonBoxDangerShapeField = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxDangerShapeField",
+  componentId: "sc-qltvdl-7"
+})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */dangerShapeColors);
+// primary shape --------------
+const primaryShapeColors = createColors(colors.primary.shape);
+export const ButtonBoxPrimaryShapeCompact = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxPrimaryShapeCompact",
+  componentId: "sc-qltvdl-8"
+})(["height:28px;padding:0 calc(", " - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], Spacing.S2, FontSize.SMALL, FontWeight.BOLD, /* sc-custom "display: none;" */primaryShapeColors);
+export const ButtonBoxPrimaryShapeField = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxPrimaryShapeField",
+  componentId: "sc-qltvdl-9"
+})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */primaryShapeColors);
+// primary ghost --------------
+const primaryGhostColors = createColors(colors.primary.ghost);
+export const ButtonBoxPrimaryGhostCompact = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxPrimaryGhostCompact",
+  componentId: "sc-qltvdl-10"
+})(["height:16px;padding:0;font-size:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:0;}& ", " + ", "{padding:0 0 0 ", ";}", ";--primary-ghost-hover-bg-color:transparent;"], FontSize.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-selector */ButtonIcon, /* sc-selector */ButtonContent, Spacing.S1, /* sc-custom "display: none;" */primaryGhostColors);
+export const ButtonBoxPrimaryGhostField = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxPrimaryGhostField",
+  componentId: "sc-qltvdl-11"
+})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */primaryGhostColors);
+// secondary ghost --------------
+const secondaryGhostColors = createColors(colors.secondary.ghost);
+export const ButtonBoxSecondaryGhostCompact = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxSecondaryGhostCompact",
+  componentId: "sc-qltvdl-12"
+})(["height:16px;padding:0;font-size:", ";font-weight:", ";text-transform:uppercase;& ", "{padding:0;}& ", " + ", "{padding:0 0 0 ", ";}", ";--secondary-ghost-base-color:", ";--secondary-ghost-hover-bg-color:transparent;"], FontSize.SMALL, FontWeight.BOLD, /* sc-selector */ButtonContent, /* sc-selector */ButtonIcon, /* sc-selector */ButtonContent, Spacing.S1, /* sc-custom "display: none;" */secondaryGhostColors, Color.SOFT);
+export const ButtonBoxSecondaryGhostField = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxSecondaryGhostField",
+  componentId: "sc-qltvdl-13"
+})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryGhostColors);
+// secondary shape --------------
+const secondaryShapeColors = createColors(colors.secondary.shape);
+export const ButtonBoxSecondaryShapeCompact = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxSecondaryShapeCompact",
+  componentId: "sc-qltvdl-14"
+})(["height:28px;padding:0 calc(", " - 1px);font-size:", ";font-weight:", ";text-transform:uppercase;", ";"], Spacing.S2, FontSize.SMALL, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
+export const ButtonBoxSecondaryShapeField = styled(ButtonBox).withConfig({
+  displayName: "ButtonBoxSecondaryShapeField",
+  componentId: "sc-qltvdl-15"
+})(["height:", ";padding:0 calc(", " - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, Spacing.S2, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
+ButtonBox.displayName = 'ButtonBox';
+ButtonIcon.displayName = 'ButtonIcon';
+ButtonContent.displayName = 'ButtonContent';
+ButtonSpinner.displayName = 'ButtonSpinner';
+ButtonBoxDangerGhostCompact.displayName = 'ButtonBoxDangerGhostCompact';
+ButtonBoxDangerGhostField.displayName = 'ButtonBoxDangerGhostField';
+ButtonBoxDangerShapeCompact.displayName = 'ButtonBoxDangerShapeCompact';
+ButtonBoxDangerShapeField.displayName = 'ButtonBoxDangerShapeField';
+ButtonBoxPrimaryGhostCompact.displayName = 'ButtonBoxPrimaryGhostCompact';
+ButtonBoxPrimaryGhostField.displayName = 'ButtonBoxPrimaryGhostField';
+ButtonBoxPrimaryShapeCompact.displayName = 'ButtonBoxPrimaryShapeCompact';
+ButtonBoxPrimaryShapeField.displayName = 'ButtonBoxPrimaryShapeField';
+ButtonBoxSecondaryGhostCompact.displayName = 'ButtonBoxSecondaryGhostCompact';
+ButtonBoxSecondaryGhostField.displayName = 'ButtonBoxSecondaryGhostField';
+ButtonBoxSecondaryShapeCompact.displayName = 'ButtonBoxSecondaryShapeCompact';
+ButtonBoxSecondaryShapeField.displayName = 'ButtonBoxSecondaryShapeField';

package/Button/types.d.ts

@@ -0,0 +1,26 @@
+import type { JSX, ReactNode, Ref, ComponentType } from 'react';
+export type RequiredButtonProps = {
+    readonly boxRef?: any;
+    readonly color: 'primary' | 'secondary' | 'danger';
+    readonly size?: 'field' | 'compact';
+    readonly view?: 'shape' | 'ghost';
+    readonly className?: string;
+    readonly isDisabled?: boolean;
+    readonly isLoading?: boolean;
+    readonly isOpen?: boolean;
+    readonly icon?: ReactNode;
+    readonly rightIcon?: ReactNode;
+    readonly children?: ReactNode;
+};
+export type ButtonPropsWithoutAs = Omit<JSX.IntrinsicElements['button'], 'ref'> & RequiredButtonProps & {
+    readonly boxRef?: Ref<HTMLButtonElement>;
+    readonly type?: 'button' | 'submit';
+};
+export type ButtonPropsWithAsTag<AS extends keyof HTMLElementTagNameMap> = Omit<JSX.IntrinsicElements[AS], 'ref'> & RequiredButtonProps & {
+    readonly boxRef?: Ref<HTMLElementTagNameMap[AS]>;
+    readonly as?: AS;
+};
+export type ButtonPropsWithAsComponent<OuterProps extends object> = OuterProps & RequiredButtonProps & {
+    readonly boxRef?: Ref<HTMLElement>;
+    readonly as?: ComponentType<OuterProps>;
+};

package/CardMetric/CardChildren.d.ts

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

package/CardMetric/CardChildren.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Spinner } from '../Spinner';
+import { CardCollapse } from './CardCollapse';
+export function CardChildren(props) {
+  const {
+    loading,
+    collapse,
+    isCollapsed,
+    children
+  } = props;
+  if (!children) {
+    return null;
+  }
+  if (loading) {
+    return React.createElement(Spinner, {
+      size: "medium"
+    });
+  }
+  if (collapse !== undefined) {
+    return React.createElement(CardCollapse, {
+      isCollapsed: isCollapsed
+    }, children);
+  }
+  return React.createElement(React.Fragment, null, children);
+}

package/CardMetric/CardCollapse.d.ts

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

package/CardMetric/CardCollapse.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CollapseContainer, CollapseInner } from './styles';
+export function CardCollapse(props) {
+  const {
+    children,
+    isCollapsed
+  } = props;
+  return React.createElement(CollapseContainer, {
+    isCollapsed: isCollapsed
+  }, React.createElement(CollapseInner, {
+    isCollapsed: isCollapsed
+  }, children));
+}

package/CardMetric/CardMetric.d.ts

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