@fibery/ui-kit 1.30.0 → 1.32.0

package/src/emoji-picker/primitives/category-label.tsx

@@ -1,10 +1,10 @@
 import type {Category} from "@fibery/emoji-data";
 
 import {css} from "@linaria/core";
-import {space, textStyles, themeVars} from "../../design-system";
-import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {IconButton} from "../../button/icon-button";
+import {space, textStyles, themeVars} from "../../design-system";
 import Settings from "../../icons/react/Settings";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 
 const categoryLabelCss = css`
   ${textStyles.heading6}
@@ -33,8 +33,8 @@ export const EmojiPickerCategoryLabel: React.FC<EmojiPickerCategoryLabelProps> =
       <span>{label}</span>
 
       {category.id === "custom" && emojiPickerCtx.onCustomCategorySettings && (
-        <IconButton onClick={emojiPickerCtx.onCustomCategorySettings}>
-          <Settings iconSize={16} />
+        <IconButton onClick={emojiPickerCtx.onCustomCategorySettings} size="small">
+          <Settings />
         </IconButton>
       )}
     </div>

package/src/emoji-picker/primitives/grid-item.tsx

@@ -39,15 +39,12 @@ export const EmojiPickerGridItem = memo<EmojiPickerGridItemProps>(({id, category
         width: emojiContentSettings.emojiContainerSize,
         height: emojiContentSettings.emojiContainerSize,
       }}
-      size="big"
+      size="large"
       onClick={() => emojiPickerCtx.onEmojiSelect(emoji)}
       onMouseEnter={() => setEmojiPreview({emoji, categoryId})}
       onMouseLeave={() => setEmojiPreview(null)}
       data-highlighted={highlighted}
       className={css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
         &:hover:not(:disabled),
         &:focus-visible,
         &[data-highlighted="true"] {

package/src/emoji-picker/primitives/search.tsx

@@ -7,11 +7,11 @@ import {border, space, textStyles, themeVars} from "../../design-system";
 import Close from "../../icons/react/Close";
 import Search from "../../icons/react/Search";
 import {useEmojiDataStore} from "../stores/emoji-data-store";
+import type {EmojiPickerGridHandle} from "./grid";
+import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
 import {useEmojiSkin} from "./skin-provider";
-import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
-import type {EmojiPickerGridHandle} from "./grid";
 
 const searchCss = css`
   ${textStyles.regular}
@@ -24,7 +24,7 @@ const searchCss = css`
 
   display: flex;
   align-items: center;
-  padding-left: ${space.s12}px;
+  padding-left: ${space.s8}px;
   gap: ${space.s2}px;
 
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
@@ -58,13 +58,13 @@ const searchInputCss = css`
 `;
 
 const searchIconCss = css`
-  padding: ${space.s2}px;
+  padding: ${space.s4}px;
 `;
 
 const extraActionSlotCss = css`
   background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
-  border-top-right-radius: ${space.s6}px;
-  border-bottom-right-radius: ${space.s6}px;
+  border-radius: ${space.s6}px;
+  margin-right: ${space.s4}px;
 `;
 
 export type EmojiPickerSearchProps = {
@@ -159,7 +159,7 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({
     <section className={cx(searchCss, className)} aria-label={i18n.search}>
       {foundEmojis ? (
         <IconButton size="small" onClick={clearSearch}>
-          <Close iconSize={16} />
+          <Close />
         </IconButton>
       ) : (
         <span className={searchIconCss}>

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -1,11 +1,11 @@
 import {EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {useState} from "react";
+import {IconButton} from "../../button/icon-button";
 import {textStyles, themeVars} from "../../design-system";
 import {Emoji} from "./emoji";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
-import {IconButton} from "../../button/icon-button";
 
 const skinToneWrapperCss = css`
   display: flex;
@@ -75,7 +75,7 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
     skinToneNodes.push(
       <span key={`skin-tone-${skinTone}`} className={cx(skinToneSwatchCss, (selected || opened) && expandedCss)}>
         <IconButton
-          size="big"
+          size="large"
           onClick={() => {
             if (opened) {
               setSkin(skinTone as EmojiSkin);

package/src/error-alert/error-alert-action.tsx

@@ -1,9 +1,12 @@
-import {Button, ButtonProps} from "../button/button";
-import {useTheme} from "../theme-provider";
+import {ButtonProps, Button} from "../button/button";
 
-export const ErrorAlertAction: React.FC<ButtonProps> = (props) => {
-  const theme = useTheme();
-
-  return <Button size=":button-size/small" color={theme.textColor} {...props} />;
+export const ErrorAlertAction = ({
+  size = "small",
+  variant = "outline",
+  color = "neutral",
+  className,
+  ...rest
+}: ButtonProps) => {
+  return <Button size={size} variant={variant} color={color} className={className} {...rest} />;
 };
 export type ErrorAlertActionElement = React.ReactElement<typeof ErrorAlertAction>;

package/src/error-alert/error-alert.tsx

@@ -50,8 +50,8 @@ export const ErrorAlert: React.FC<ErrorAlertProps> = ({message, description, act
       </div>
       {action}
       {onClose ? (
-        <IconButton onClick={onClose} aria-label="Hide error">
-          <CloseIcon iconSize={16} />
+        <IconButton size="small" onClick={onClose} aria-label="Hide error">
+          <CloseIcon />
         </IconButton>
       ) : null}
     </div>

package/src/icons/Icon.tsx

@@ -13,6 +13,7 @@ const size = `var(${iconSizeVar}, ${defaultIconSize}px)`;
 const containerSize = `var(${iconContainerSizeVar}, ${size})`;
 
 export const iconContainer = css`
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;

package/src/icons/ast/Folder.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Folder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.417 4.583A.917.917 0 0 0 3.5 5.5v9.167a.917.917 0 0 0 .917.917h11.149c.006-.001.03-.005.074-.015a2.051 2.051 0 0 0 .472-.173.565.565 0 0 0 .12-.081.917.917 0 0 0 .268-.648V8a.917.917 0 0 0-.917-.917H10a.75.75 0 0 1-.53-.22l-2.28-2.28H4.416Zm-1.71-.792a2.417 2.417 0 0 1 1.71-.708H7.5a.75.75 0 0 1 .53.22l2.28 2.28h5.273A2.417 2.417 0 0 1 18 8v6.667c0 .64-.255 1.255-.708 1.709-.274.273-.645.441-.912.537-.26.093-.572.17-.797.17H4.417A2.417 2.417 0 0 1 2 14.668V5.5c0-.64.255-1.255.708-1.709Z"},"children":[]}],"metadata":""}]},"name":"folder"};
+
+export default Folder;

package/src/icons/ast/SmartFolder.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const SmartFolder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.134 3.38a1.846 1.846 0 0 1 1.943.368l4.476 4.218.012.013c.565.585.935 1.262.935 2.021 0 .76-.37 1.436-.935 2.021l-.012.013-4.476 4.218a1.846 1.846 0 0 1-1.943.37C6.527 16.384 6 15.804 6 15V5c0-.805.527-1.385 1.134-1.62Zm.544 1.397c-.133.051-.178.139-.178.223v10c0 .084.045.172.178.223a.346.346 0 0 0 .371-.064l4.449-4.192c.392-.41.502-.729.502-.967s-.11-.557-.502-.967L8.049 4.841a.347.347 0 0 0-.371-.064Z"},"children":[]}],"metadata":""}]},"name":"smart-folder"};
+const SmartFolder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.586 9.219a.75.75 0 0 0-1.172-.937l-2 2.5A.75.75 0 0 0 8 12h2l-.586 1.282a.75.75 0 0 0 1.172.937l2-2.5A.75.75 0 0 0 12 10.5h-2l.586-1.281Z","fill":"#51616C","fillOpacity":0.9},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2.708 3.791a2.417 2.417 0 0 1 1.709-.708H7.5a.75.75 0 0 1 .53.22l2.28 2.28h5.273A2.417 2.417 0 0 1 18 8v6.667c0 .64-.255 1.255-.708 1.709-.274.273-.645.441-.912.537-.26.093-.572.17-.797.17H4.417A2.417 2.417 0 0 1 2 14.668V5.5c0-.64.255-1.255.708-1.709Zm1.709.792A.917.917 0 0 0 3.5 5.5v9.167a.917.917 0 0 0 .917.917h11.151c.008-.002.032-.005.072-.015a2.051 2.051 0 0 0 .472-.173.565.565 0 0 0 .12-.081.917.917 0 0 0 .268-.648V8a.917.917 0 0 0-.917-.917H10a.75.75 0 0 1-.53-.22l-2.28-2.28H4.416Z"},"children":[]}],"metadata":""}]},"name":"smart-folder"};
 
 export default SmartFolder;

package/src/icons/ast/index.tsx

@@ -93,6 +93,7 @@ export { default as FileUpload } from './FileUpload';
 export { default as Filter } from './Filter';
 export { default as FocusModeOff } from './FocusModeOff';
 export { default as FocusMode } from './FocusMode';
+export { default as Folder } from './Folder';
 export { default as FormWithCover } from './FormWithCover';
 export { default as FormWithoutCover } from './FormWithoutCover';
 export { default as Github } from './Github';

package/src/icons/react/Folder.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import FolderSvg from '../ast/Folder';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Folder = forwardRef<SVGSVGElement, IconBaseProps>(function Folder(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={FolderSvg} />});
+
+export default Folder;

package/src/icons/react/index.tsx

@@ -93,6 +93,7 @@ export { default as FileUpload } from './FileUpload';
 export { default as Filter } from './Filter';
 export { default as FocusModeOff } from './FocusModeOff';
 export { default as FocusMode } from './FocusMode';
+export { default as Folder } from './Folder';
 export { default as FormWithCover } from './FormWithCover';
 export { default as FormWithoutCover } from './FormWithoutCover';
 export { default as Github } from './Github';

package/src/integration-compact-info-button.tsx

@@ -1,10 +1,10 @@
 import {css, cx} from "@linaria/core";
-import {ButtonBase} from "./button/button-base";
 import {Tooltip} from "./tooltip";
 import {space, textStyles, themeVars} from "./design-system";
 import {useTheme} from "./theme-provider";
 import WarningIcon from "./icons/react/WarningTriangle";
 import {Spinner} from "./loaders";
+import {BaseButton} from "./button/base-button";
 
 const buttonCss = css`
   ${textStyles.heading5}
@@ -12,6 +12,7 @@ const buttonCss = css`
   align-items: center;
   padding: ${space.s2}px ${space.s8}px ${space.s2}px ${space.s4}px;
   gap: ${space.s4}px;
+  border-radius: 6px;
 `;
 
 const loadingCss = css`
@@ -39,10 +40,10 @@ export const IntegrationCompactInfoButton: React.FC<{
   const className = cx(buttonCss, loading && loadingCss);
 
   const button = onClick ? (
-    <ButtonBase dangerous={Boolean(error)} borderless className={className} onClick={onClick}>
+    <BaseButton color={error ? "error" : "neutral"} variant="ghost" className={className} onClick={onClick}>
       {iconNode}
       {name}
-    </ButtonBase>
+    </BaseButton>
   ) : (
     <div className={className}>
       {iconNode}

package/src/select/custom-select-partials/clear-indicator.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import RemoveIcon from "../../icons/react/Remove";
 import {ClearIndicatorProps, GroupBase, MultiValueRemoveProps} from "react-select";
-import {Button} from "../../button/button";
+import {IconButton} from "../../button/icon-button";
+import RemoveIcon from "../../icons/react/Remove";
 
 export function ClearIndicator<
   TOption,
@@ -16,7 +15,9 @@ export function ClearIndicator<
   }
   return (
     <div {...innerProps}>
-      <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />
+      <IconButton disabled={selectProps.isDisabled} size={"small"}>
+        <RemoveIcon />
+      </IconButton>
     </div>
   );
 }

package/src/select/select-in-popover.tsx

@@ -28,6 +28,7 @@ import {
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 import {Menu} from "./custom-select-partials/menu";
+import {useIsPhone} from "../use-is-phone";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
@@ -56,6 +57,11 @@ const popupClassName = css`
   padding-left: ${space.s8}px;
   padding-right: ${space.s8}px;
 `;
+const mobileClassName = css`
+  padding-top: ${space.s12}px;
+  padding-left: ${space.s12}px;
+  padding-right: ${space.s12}px;
+`;
 
 const valueClassName = css`
   border-radius: ${border.radius4}px;
@@ -301,11 +307,13 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
   );
   const paddingPopup = popupPaddingTop + popupPaddingBottom;
   const paddingMenu = 6 + 6 + 6;
-  const maxMenuHeight =
-    Math.max((document.body.clientHeight / 100) * popupHeightVH, popupMinHeightPx) -
-    valueMaxHeight -
-    paddingPopup -
-    paddingMenu;
+  const isPhone = useIsPhone();
+  const maxMenuHeight = isPhone
+    ? document.body.clientHeight - 45 - valueMaxHeight
+    : Math.max((document.body.clientHeight / 100) * popupHeightVH, popupMinHeightPx) -
+      valueMaxHeight -
+      paddingPopup -
+      paddingMenu;
   const mergedComponents = {...defaultComponents, ...components};
 
   return (
@@ -320,9 +328,12 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
       </mergedComponents.Trigger>
       {Boolean(triggerElement) && (
         <Popup
+          supportMobile
+          title={title}
           offset={offset}
           popupContainerClassName={popupContainerClassName}
           popupClassName={cx(popupClassName, popupStyles)}
+          mobilePopupContentClassName={mobileClassName}
           placement="bottom-start"
           renderInPortal={renderInPortal}
           open={visible}
@@ -332,7 +343,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
           triggerDomElement={triggerElement}
           getPopupContainer={getPopupContainer}
         >
-          {title && <div className={titleClassName}>{title}</div>}
+          {title && !isPhone && <div className={titleClassName}>{title}</div>}
           {/*Usually we set popupContainerElement for react-select via context (SelectControlSettingsProvider). But here we render react-select in popover.*/}
           {/*Render target in controlled by Popover here. So we just override SelectControlContext here and set popupContainerElement to undefined. */}
           {/*So in dom react-select will be a child of popover. */}
@@ -350,6 +361,9 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               }}
               autoFocus={autoFocus}
               onBlur={() => {
+                if (isPhone) {
+                  return;
+                }
                 blurTimeoutRef.current = setTimeout(() => {
                   onHide(false);
                 }, 250);

package/src/toast/primitives.tsx

@@ -150,8 +150,8 @@ export const ToastSubtitle = forwardRef<
 export const ToastClose = () => {
   return (
     <ToastPrimitives.Close aria-label="Dismiss" asChild>
-      <IconButton>
-        <CloseIcon iconSize={16} />
+      <IconButton size="small">
+        <CloseIcon />
       </IconButton>
     </ToastPrimitives.Close>
   );

package/src/toast/toast-action.tsx

@@ -1,9 +1,7 @@
+import {css} from "@linaria/core";
 import {Action as RadixToastAction, type ToastActionProps} from "@radix-ui/react-toast";
 import {ElementRef, forwardRef} from "react";
-import {ButtonProps} from "../button/button";
-import {Button} from "../button";
-import {useTheme} from "../theme-provider";
-import {css} from "@linaria/core";
+import {ButtonProps, Button} from "../button/button";
 import {space} from "../design-system";
 
 const toastActionCss = css`
@@ -16,10 +14,9 @@ export const ToastAction = forwardRef<
   ElementRef<typeof RadixToastAction>,
   ButtonProps & {altText: ToastActionProps["altText"]}
 >(({children, altText, ...props}, ref) => {
-  const theme = useTheme();
   return (
     <RadixToastAction className={toastActionCss} ref={ref} altText={altText} asChild>
-      <Button color={theme.textColor} {...props}>
+      <Button variant="outline" color="neutral" {...props}>
         {children}
       </Button>
     </RadixToastAction>

package/src/toggle.tsx

@@ -4,6 +4,7 @@ import chroma from "chroma-js";
 import {ComponentProps, FC, ReactNode} from "react";
 import {layout, space, textStyles, transition} from "./design-system";
 import _ from "lodash";
+import SpinnerIcon from "./icons/react/Spinner";
 
 const Input = styled.input<{containerSize: number; containerWidth: number; outlineColor: string}>`
   position: absolute;
@@ -85,12 +86,14 @@ interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
   backgroundColor: string;
   labelPosition?: "first" | "last";
   wrapperClassName?: string;
+  pending?: boolean;
 }
 
 export const Toggle: FC<ToggleProps> = ({
   value,
   label,
   labelTitle,
+  pending,
   disabled = false,
   backgroundColor,
   size = 16,
@@ -130,25 +133,28 @@ export const Toggle: FC<ToggleProps> = ({
       )}
       title={labelTitle}
     >
-      <CircleContainer
-        containerSize={size}
-        containerWidth={width}
-        backgroundColor={backgroundColor}
-        disabled={disabled}
-      >
-        <Circle containerSize={size} style={circleTransformStyle} />
-        <Input
+      {pending && <SpinnerIcon />}
+      {!pending && (
+        <CircleContainer
           containerSize={size}
           containerWidth={width}
-          outlineColor={outlineColor}
-          onChange={onChange}
-          className={className}
-          type="checkbox"
+          backgroundColor={backgroundColor}
           disabled={disabled}
-          checked={value}
-          {...rest}
-        />
-      </CircleContainer>
+        >
+          <Circle containerSize={size} style={circleTransformStyle} />
+          <Input
+            containerSize={size}
+            containerWidth={width}
+            outlineColor={outlineColor}
+            onChange={onChange}
+            className={className}
+            type="checkbox"
+            disabled={disabled}
+            checked={value}
+            {...rest}
+          />
+        </CircleContainer>
+      )}
 
       {label && (
         <Label disabled={disabled && labelMutedWhenDisabled} labelPosition={labelPosition}>

package/src/back-button.tsx

@@ -1,3 +0,0 @@
-import {BackButton} from "./button/back-button";
-
-export {BackButton};

package/src/button/button-base.tsx

@@ -1,180 +0,0 @@
-import {styled} from "@linaria/react";
-import {ComponentPropsWithoutRef, forwardRef} from "react";
-import {border, colors, fontWeight, getDarkenColor, getOpacities, opacity, ThemeColors} from "../design-system";
-import {useTheme} from "../theme-provider";
-
-export const getMainColor = ({color, dangerous, theme}: {color?: string; dangerous?: boolean; theme: ThemeColors}) => {
-  if (color) {
-    return color;
-  }
-  if (dangerous) {
-    return theme.danger;
-  }
-  if (!theme) {
-    return colors.primary;
-  }
-  return theme.buttonColor;
-};
-
-const getBorderColor = ({
-  mainColor,
-  borderless,
-  primary,
-}: {
-  mainColor: string;
-  borderless?: boolean;
-  primary?: boolean;
-}) => {
-  if (borderless) {
-    return colors.transparent;
-  }
-  if (primary) {
-    return mainColor;
-  }
-  return getOpacities(mainColor).opacity30;
-};
-
-const getHoverBorderColor = ({
-  mainColor,
-  borderless,
-  primary,
-  hoverBgColor,
-}: {
-  mainColor: string;
-  borderless?: boolean;
-  primary?: boolean;
-  hoverBgColor: string;
-}) => {
-  if (borderless) {
-    return colors.transparent;
-  }
-  if (primary) {
-    return hoverBgColor;
-  }
-  return mainColor;
-};
-
-export const getTextColor = ({
-  mainColor,
-  primary,
-  theme,
-}: {
-  mainColor: string;
-  primary?: boolean;
-  theme: ThemeColors;
-}) => {
-  if (primary) {
-    return theme.buttonPrimaryTextColor;
-  }
-  return mainColor;
-};
-
-const getBgColor = ({mainColor, primary}: {mainColor: string; primary?: boolean}) => {
-  if (primary) {
-    return mainColor;
-  }
-  return colors.transparent;
-};
-
-const getHoverBgColor = ({
-  mainColor,
-  borderless,
-  primary,
-}: {
-  mainColor: string;
-  primary?: boolean;
-  borderless?: boolean;
-}) => {
-  if (primary) {
-    return getDarkenColor(mainColor);
-  }
-  if (borderless) {
-    return getOpacities(mainColor).opacity15;
-  }
-  return colors.transparent;
-};
-
-export const buttonBorderWidth = 1;
-
-type StyledProps = {
-  textColor: string;
-  bgColor: string;
-  borderColor: string;
-  hoverBgColor: string;
-  hoverBorderColor: string;
-  borderWidth: number;
-};
-
-export const StyledButtonBase = styled.button<StyledProps>`
-  display: block;
-  box-sizing: border-box;
-  font-weight: ${fontWeight.medium};
-  margin: 0;
-  border-radius: ${border.radius6}px;
-  border: 0;
-  border-width: ${({borderWidth}) => `${borderWidth}px`};
-  border-style: solid;
-  padding: 0;
-  cursor: pointer;
-  transition: all 150ms ease-out;
-  color: ${({textColor}) => textColor};
-  background-color: ${({bgColor}) => bgColor};
-  border-color: ${({borderColor}) => borderColor};
-
-  &:disabled {
-    cursor: default;
-    opacity: ${opacity.opacity40};
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    box-shadow: ${({borderColor}) => `0 0 0 3px ${getOpacities(borderColor).opacity25}`};
-    background-color: ${({hoverBgColor}) => hoverBgColor};
-    border-color: ${({hoverBorderColor}) => hoverBorderColor};
-  }
-
-  &:hover:not(:disabled) {
-    background-color: ${({hoverBgColor}) => hoverBgColor};
-    border-color: ${({hoverBorderColor}) => hoverBorderColor};
-  }
-`;
-
-export type ButtonBaseProps = {
-  color?: string;
-  primary?: boolean;
-  dangerous?: boolean;
-  borderless?: boolean;
-} & ComponentPropsWithoutRef<"button">;
-export const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(function ButtonBase(
-  {primary, color, borderless, dangerous, className, type = "button", ...buttonProps},
-  ref
-) {
-  const theme = useTheme();
-
-  const mainColor = getMainColor({color, dangerous, theme});
-  const textColor = getTextColor({mainColor, primary, theme});
-  const bgColor = getBgColor({mainColor, primary});
-  const hoverBgColor = getHoverBgColor({mainColor, borderless, primary});
-  const borderColor = getBorderColor({mainColor, borderless, primary});
-  const hoverBorderColor = getHoverBorderColor({
-    mainColor,
-    borderless,
-    primary,
-    hoverBgColor,
-  });
-  const borderWidth = borderless ? 0 : buttonBorderWidth;
-
-  const styledProps: StyledProps = {
-    bgColor,
-    borderColor,
-    hoverBgColor,
-    hoverBorderColor,
-    textColor,
-    borderWidth,
-  };
-
-  return <StyledButtonBase ref={ref} type={type} className={className} {...styledProps} {...buttonProps} />;
-});

package/src/button.tsx

@@ -1,3 +0,0 @@
-import {Button} from "./button/button";
-
-export {Button};

package/src/icon-button.tsx

@@ -1,3 +0,0 @@
-import {IconButton} from "./button/icon-button";
-
-export {IconButton};