@soul-refiner/design-system 0.1.38 → 0.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {
@@ -12,7 +12,17 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "exports": "./dist/index.js",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.10",
     "@storybook/addon-interactions": "^7.0.10",

package/public/logo.svg

@@ -1,12 +0,0 @@
-<svg viewBox="3.65 -34.6 154.64 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path 
-    d="M22.25-24.6L22.25-24.6Q22.25-26.7 20.63-27.48 19-28.25 15.2-28.25L15.2-28.25 15.2-20.6Q17.55-20.6 19.03-20.95 20.5-21.3 21.38-22.18 22.25-23.05 22.25-24.6ZM22.9-11.25L22.9-11.25Q22.9-12.9 22.05-13.8 21.2-14.7 19.6-15.08 18-15.45 15.2-15.45L15.2-15.45 15.2-6.8Q19.1-6.8 21-7.78 22.9-8.75 22.9-11.25ZM29.05-17.8L29.05-17.8Q33.7-15.05 33.7-10.45L33.7-10.45Q33.7-8.45 32.93-6.63 32.15-4.8 30.63-3.3 29.1-1.8 26.6-0.93 24.1-0.05 20.95-0.05L20.95-0.05 9.35-0.05Q6.3-0.05 4.98-1.6 3.65-3.15 3.65-7.15L3.65-7.15 3.65-28.3Q3.65-30 4.25-31.3 4.85-32.6 6.18-33.4 7.5-34.2 9.35-34.2L9.35-34.2 20.8-34.2Q25.8-34.15 29.13-31.48 32.45-28.8 32.45-24.6L32.45-24.6Q32.45-23.25 32.23-22.23 32-21.2 31.55-20.4 31.1-19.6 30.5-19 29.9-18.4 29.05-17.8ZM38.8-30.8L38.8-30.8Q38.8-32.45 40.22-33.52 41.65-34.6 44.25-34.6L44.25-34.6Q49.7-34.6 49.7-30.8L49.7-30.8Q49.7-28.7 48.32-27.85 46.95-27 44.25-27L44.25-27Q41.9-27 40.35-27.9 38.8-28.8 38.8-30.8ZM49.65-18.35L49.65-5.35Q49.65-2.35 48.4-1.18 47.15 0 44 0L44 0Q41.05 0 39.97-1.38 38.9-2.75 38.9-5.9L38.9-5.9 38.9-18.2Q38.9-20.75 40.27-22.3 41.65-23.85 43.95-23.85L43.95-23.85Q46.65-23.85 48.15-22.68 49.65-21.5 49.65-18.35L49.65-18.35ZM65.25-28.65L65.25-21.8Q68.55-24.25 72.4-24.25L72.4-24.25Q76.3-24.25 78.9-20.95 81.5-17.65 81.5-12.6L81.5-12.6Q81.5-6.5 77.55-3.08 73.59 0.35 67.3 0.35L67.3 0.35Q63.45 0.35 60.57-0.75 57.7-1.85 56.07-4.05 54.45-6.25 54.4-9.35L54.4-9.35 54.3-28.2Q54.3-31.3 55.8-32.75 57.3-34.2 59.8-34.2L59.8-34.2Q62.6-34.2 63.92-32.88 65.25-31.55 65.25-28.65L65.25-28.65ZM65.3-7.65L65.3-7.65Q66.2-5.95 67.8-5.95L67.8-5.95Q69.15-5.95 69.9-7.65 70.65-9.35 70.65-11.55L70.65-11.55Q70.65-12.75 70.45-13.9 70.25-15.05 69.9-15.98 69.55-16.9 69-17.48 68.45-18.05 67.75-18.05L67.75-18.05Q66.2-18.05 65.3-16.2L65.3-16.2Q65.3-15.55 65.3-12.48 65.3-9.4 65.3-7.65ZM96.69-28.65L96.69-21.8Q99.99-24.25 103.84-24.25L103.84-24.25Q107.74-24.25 110.34-20.95 112.94-17.65 112.94-12.6L112.94-12.6Q112.94-6.5 108.99-3.08 105.04 0.35 98.74 0.35L98.74 0.35Q94.89 0.35 92.02-0.75 89.14-1.85 87.52-4.05 85.89-6.25 85.84-9.35L85.84-9.35 85.74-28.2Q85.74-31.3 87.24-32.75 88.74-34.2 91.24-34.2L91.24-34.2Q94.04-34.2 95.37-32.88 96.69-31.55 96.69-28.65L96.69-28.65ZM96.74-7.65L96.74-7.65Q97.64-5.95 99.24-5.95L99.24-5.95Q100.59-5.95 101.34-7.65 102.09-9.35 102.09-11.55L102.09-11.55Q102.09-12.75 101.89-13.9 101.69-15.05 101.34-15.98 100.99-16.9 100.44-17.48 99.89-18.05 99.19-18.05L99.19-18.05Q97.64-18.05 96.74-16.2L96.74-16.2Q96.74-15.55 96.74-12.48 96.74-9.4 96.74-7.65ZM128.09-28.7L128.09-7.55Q128.09-3.5 126.74-1.75 125.39 0 122.59 0L122.59 0Q119.79 0 118.49-1.58 117.19-3.15 117.19-7.15L117.19-7.15 117.09-28.25Q117.09-29.55 117.37-30.55 117.64-31.55 118.12-32.25 118.59-32.95 119.29-33.4 119.99-33.85 120.82-34.05 121.64-34.25 122.59-34.25L122.59-34.25Q125.34-34.25 126.72-33.15 128.09-32.05 128.09-28.7L128.09-28.7ZM146.44 0.3L146.44 0.3Q140.34 0.3 136.36-2.85 132.39-6 132.39-11.45L132.39-11.45Q132.39-17.35 136.31-20.78 140.24-24.2 146.44-24.2L146.44-24.2Q152.29-24.2 155.01-22.13 157.74-20.05 157.74-16.45L157.74-16.45Q157.74-15.75 157.56-15.1 157.39-14.45 157.01-13.83 156.64-13.2 156.01-12.68 155.39-12.15 154.59-11.73 153.79-11.3 152.69-11.08 151.59-10.85 150.34-10.85L150.34-10.85 143.29-10.8Q143.79-9.2 145.09-8.28 146.39-7.35 148.39-7.35L148.39-7.35Q150.54-7.35 152.79-7.9L152.79-7.9Q153.74-8.15 154.86-8.7 155.99-9.25 156.49-9.25L156.49-9.25Q157.34-9.25 157.81-8.75 158.29-8.25 158.29-7.5L158.29-7.5Q158.29-6.6 157.49-5.33 156.69-4.05 155.26-2.78 153.84-1.5 151.49-0.6 149.14 0.3 146.44 0.3ZM143.04-14L143.04-14Q146.49-14.05 146.79-14.05L146.79-14.05Q147.54-14.05 147.89-14.95L147.89-14.95Q148.14-15.6 148.14-16.75L148.14-16.75Q148.14-19.9 146.24-19.9L146.24-19.9Q145.54-19.9 144.86-19.15 144.19-18.4 143.69-17.03 143.19-15.65 143.04-14Z" 
-    opacity="1" 
-    transform="matrix(1,0,0,1,0,0)" 
-    fill="#1b7bcb" 
-    class="undefined-text-0" 
-    data-fill-palette-color="primary" 
-    id="text-0"
-  >
-  </path>
-</svg>

package/src/common/colors.ts

@@ -1,138 +0,0 @@
-export const COLORS = [
-  'inherit',
-  'page-bg',
-  'white',
-  'primary-blue-0',
-  'primary-blue-1',
-  'primary-blue-2',
-  'primary-blue-3',
-  'primary-blue-4',
-  'grey-0',
-  'grey-1',
-  'grey-2',
-  'grey-3',
-  'grey-4',
-  'grey-5',
-  'grey-6',
-  'grey-7',
-  'grey-8',
-  'grey-9',
-  'grey-10',
-  'red-0',
-  'red-1',
-  'red-2',
-  'red-3',
-  'red-4',
-  'red-5',
-  'red-6',
-  'red-7',
-  'red-8',
-  'red-9',
-  'red-10',
-  'green-0',
-  'green-1',
-  'green-2',
-  'green-3',
-  'green-4',
-  'green-5',
-  'green-6',
-  'green-7',
-  'green-8',
-  'green-9',
-  'green-10',
-  'blue-0',
-  'blue-1',
-  'blue-2',
-  'blue-3',
-  'blue-4',
-  'blue-5',
-  'blue-6',
-  'blue-7',
-  'blue-8',
-  'blue-9',
-  'blue-10',
-  'turquoise-0',
-  'turquoise-1',
-  'turquoise-2',
-  'turquoise-3',
-  'turquoise-4',
-  'turquoise-5',
-  'turquoise-6',
-  'turquoise-7',
-  'turquoise-8',
-  'turquoise-9',
-  'turquoise-10',
-  'purple-0',
-  'purple-1',
-  'purple-2',
-  'purple-3',
-  'purple-4',
-  'purple-5',
-  'purple-6',
-  'purple-7',
-  'purple-8',
-  'purple-9',
-  'purple-10',
-  'yellow-0',
-  'yellow-1',
-  'yellow-2',
-  'yellow-3',
-  'yellow-4',
-  'yellow-5',
-  'yellow-6',
-  'yellow-7',
-  'yellow-8',
-  'yellow-9',
-  'yellow-10',
-  'orange-0',
-  'orange-1',
-  'orange-2',
-  'orange-3',
-  'orange-4',
-  'orange-5',
-  'orange-6',
-  'orange-7',
-  'orange-8',
-  'orange-9',
-  'orange-10',
-  'hue-pink-1',
-  'hue-pink-2',
-  'hue-pink-3',
-  'hue-purple-1',
-  'hue-purple-2',
-  'hue-purple-3',
-  'hue-ocean-1',
-  'hue-ocean-2',
-  'hue-ocean-3',
-  'hue-mint-1',
-  'hue-mint-2',
-  'hue-mint-3',
-  'hue-blue-1',
-  'hue-blue-2',
-  'hue-blue-3',
-  'hue-orange-1',
-  'hue-orange-2',
-  'hue-orange-3',
-  'special-yellow-1',
-  'special-yellow-2',
-  'special-orange-1',
-  'special-orange-2',
-  'special-red-1',
-  'special-red-2',
-  'special-pink-1',
-  'special-pink-2',
-  'special-purple-1',
-  'special-purple-2',
-  'special-blue-1',
-  'special-blue-2',
-  'special-turquoise-1',
-  'special-turquoise-2',
-  'special-green-1',
-  'special-green-2',
-  'special-grape-1',
-  'special-grape-2',
-] as const;
-
-export const colorReference = Object.fromEntries(
-  COLORS.map((item) => [item, `var(--color-${item})`])
-) as Record<(typeof COLORS)[number], string>;

package/src/common/date.ts

@@ -1,30 +0,0 @@
-export const THIS_YEAR = +new Date().getFullYear();
-
-export const THIS_MONTH = +new Date().getMonth() + 1;
-
-export enum WEEKDAYS {
-  MON = 'Mon',
-  TUE = 'Tue',
-  WED = 'Wed',
-  THU = 'Thu',
-  FRI = 'Fri',
-  SAT = 'Sat',
-  SUN = 'Sun',
-}
-
-export enum MONTHS {
-  JAN = 'Jan',
-  FEB = 'Feb',
-  MAR = 'Mar',
-  APR = 'Apr',
-  MAY = 'May',
-  JUN = 'Jun',
-  JUL = 'Jul',
-  AUG = 'Aug',
-  SEP = 'Sep',
-  OCT = 'Oct',
-  NOV = 'Nov',
-  DEC = 'Dec',
-}
-
-export const CALENDAR_WEEKS = 6;

package/src/common/index.ts

@@ -1,9 +0,0 @@
-export { colorReference, COLORS } from './colors';
-export {
-  CALENDAR_WEEKS,
-  MONTHS,
-  THIS_MONTH,
-  THIS_YEAR,
-  WEEKDAYS,
-} from './date';
-export { Styles } from './styles';

package/src/common/styles.ts

@@ -1,95 +0,0 @@
-import { css } from 'styled-components';
-import {
-  BackgroundColor,
-  BorderRadius,
-  Color,
-  Elevation,
-  Flex,
-  Margin,
-  Padding,
-  Styleable,
-  TextClamp,
-  TypographyStyle,
-  TypographyWeight,
-} from '../types';
-import { colorReference } from './colors';
-
-export namespace Styles {
-  export const backgroundColor = css<BackgroundColor>`
-    background-color: ${({ $backgroundColor }) =>
-      $backgroundColor ? colorReference[$backgroundColor] : 'var(--page-bg)'};
-  `;
-
-  export const borderRadius = css<BorderRadius>`
-    border-radius: ${({ $borderRadius }) =>
-      $borderRadius ? `var(--${$borderRadius})` : ''};
-  `;
-
-  export const color = css<Color>`
-    color: ${({ $color }) =>
-      $color ? colorReference[$color] : 'var(--color-grey-3)'};
-  `;
-
-  export const elevation = css<Elevation>`
-    box-shadow: ${({ $elevation }) =>
-      $elevation ? `var(--elevation-${$elevation})` : 'none'};
-  `;
-
-  export const flex = css<Flex>`
-    align-items: ${({ $align }) => $align ?? 'normal'};
-    gap: ${({ $gap }) =>
-      $gap && typeof $gap === 'number'
-        ? `${$gap}px`
-        : $gap && typeof $gap === 'string'
-        ? `var(--${$gap})`
-        : '0px'};
-    flex: ${({ $flex }) => $flex ?? 'none'};
-    flex-flow: ${({ $flow }) => $flow ?? 'row'};
-    flex-direction: ${({ $dir }) => $dir ?? 'row'};
-    justify-content: ${({ $justify }) => $justify ?? 'normal'};
-  `;
-
-  export const margin = css<Margin>`
-    margin: ${({ $margin }) =>
-      $margin && typeof $margin === 'number'
-        ? `${$margin}px`
-        : $margin && typeof $margin === 'string'
-        ? `var(--${$margin})`
-        : '0px'};
-  `;
-
-  export const padding = css<Padding>`
-    padding: ${({ $padding }) =>
-      $padding && typeof $padding === 'number'
-        ? `${$padding}px;`
-        : $padding && typeof $padding === 'string' && $padding.includes('px')
-        ? $padding
-        : $padding && typeof $padding === 'string'
-        ? `var(--${$padding});`
-        : '0px'};
-  `;
-
-  export const styleable = css<Styleable>`
-    ${({ sx }) => (sx ? sx : '')}
-  `;
-
-  export const textClamp = css<TextClamp>`
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
-    -webkit-line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
-    -webkit-box-orient: vertical;
-  `;
-
-  export const typography = css<TypographyStyle>`
-    font-style: ${({ $italic }) => ($italic ? 'italic' : 'normal')};
-    text-decoration: ${({ $strikethrough, $underline }) =>
-      $strikethrough ? 'line-through' : $underline ? 'underline' : 'none'};
-  `;
-
-  export const weight = css<TypographyWeight>`
-    font-weight: ${({ $bold, $semiBold, $mediumBold }) =>
-      $bold ? 700 : $semiBold ? 600 : $mediumBold ? 500 : 400};
-  `;
-}

package/src/components/actions/button/button.tsx

@@ -1,364 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { Styles } from '../../../common';
-import { P } from '../../';
-import { Box } from '../../atoms/box/box';
-import { ChevronDown, ChevronUp } from '../../../icons';
-
-const LG_ICON_SIZE = 20;
-const LG_ICON_SIZE_WO_CHILDREN = 24;
-const LG_FONT_SIZE = 16;
-const LG_PADDING = '11px 19px';
-const LG_PADDING_WO_CHILDREN = '11px';
-
-const SM_ICON_SIZE = 16;
-const SM_FONT_SIZE = 14;
-const SM_PADDING = '5px 15px';
-const SM_PADDING_WO_CHILDREN = '7px';
-
-type NativeProps = Pick<
-  React.HTMLAttributes<HTMLButtonElement>,
-  | 'dangerouslySetInnerHTML'
-  | 'onClick'
-  | 'onMouseDown'
-  | 'onMouseDownCapture'
-  | 'onMouseEnter'
-  | 'onMouseLeave'
-  | 'onMouseOut'
-  | 'onMouseOver'
-> & { value?: string };
-
-type ButtonTypes =
-  | 'primary'
-  | 'secondary'
-  | 'outlined'
-  | 'danger'
-  | 'text'
-  | 'raised'
-  | 'special';
-type ButtonSize = 'small' | 'large';
-type ButtonShape = 'none' | 'small' | 'medium-small' | 'large';
-
-export interface ButtonProps extends NativeProps, React.PropsWithChildren {
-  as?: React.ElementType;
-  disabled?: boolean;
-  fluid?: boolean;
-  icon?: React.ReactElement | undefined;
-  isDropdownOpen?: boolean;
-  roundness?: ButtonShape;
-  size?: ButtonSize;
-  sx?: string;
-  type?: ButtonTypes;
-}
-
-export const Button = ({
-  as = 'button',
-  children,
-  disabled,
-  fluid = false,
-  icon,
-  isDropdownOpen,
-  roundness = 'large',
-  size = 'large',
-  sx,
-  type = 'primary',
-  ...props
-}: ButtonProps) => {
-  const Component = Components()[type];
-
-  const buttonIcon = React.Children.map(icon, (item) => {
-    if (React.isValidElement(item))
-      return {
-        ...item,
-        props: {
-          size:
-            size === 'large' && !children
-              ? LG_ICON_SIZE_WO_CHILDREN
-              : size === 'large'
-              ? LG_ICON_SIZE
-              : SM_ICON_SIZE,
-        },
-      };
-  })?.[0];
-
-  const dropdownIcon =
-    isDropdownOpen === true ? (
-      <ChevronUp size={size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE} />
-    ) : isDropdownOpen === false ? (
-      <ChevronDown size={size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE} />
-    ) : undefined;
-
-  const padding = !!children
-    ? size === 'large'
-      ? LG_PADDING
-      : SM_PADDING
-    : size === 'large'
-    ? LG_PADDING_WO_CHILDREN
-    : SM_PADDING_WO_CHILDREN;
-
-  return (
-    <Component
-      as={as}
-      disabled={disabled}
-      $align="center"
-      $display="flex"
-      $fluid={fluid}
-      $gap={size === 'large' ? 12 : 8}
-      $hasChildren={!!children}
-      $justify="center"
-      $padding={padding}
-      $roundness={roundness}
-      $size={size}
-      $sx={sx}
-      {...props}
-    >
-      {buttonIcon}
-      {children && (
-        <P
-          as="span"
-          $mediumBold
-          $fontSize={size === 'large' ? LG_FONT_SIZE : SM_FONT_SIZE}
-          $color="inherit"
-        >
-          {children}
-        </P>
-      )}
-      {!!children && dropdownIcon}
-    </Component>
-  );
-};
-
-const Components = (): Record<ButtonTypes, any> => ({
-  primary: Primary,
-  secondary: Secondary,
-  outlined: Outlined,
-  danger: Danger,
-  raised: Raised,
-  special: Special,
-  text: Text,
-});
-
-const base = css<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  display: flex;
-  border-radius: ${({ $roundness }) =>
-    $roundness === 'large'
-      ? '32px'
-      : $roundness === 'medium-small'
-      ? '8px'
-      : $roundness === 'small'
-      ? '4px'
-      : '0px'};
-  cursor: pointer;
-  user-select: none;
-  box-sizing: border-box;
-  outline: none;
-  ${({ $fluid }) =>
-    $fluid
-      ? `flex-basis: max-content;
-    flex: 1 !important;
-    width: max-content`
-      : ''}
-
-  svg {
-    fill: currentColor;
-  }
-
-  &:disabled {
-    background-color: var(--color-grey-9) !important;
-    border: 1px solid var(--color-grey-8) !important;
-    color: var(--color-grey-7) !important;
-    cursor: unset !important;
-  }
-`;
-
-const Primary = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-primary-blue-2);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-blue-2);
-
-  &:hover {
-    border: 1px solid var(--color-primary-blue-1);
-    background-color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    border: 1px solid var(--color-primary-blue-0);
-    background-color: var(--color-primary-blue-0);
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Secondary = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-primary-blue-4);
-  color: var(--color-primary-blue-2);
-  border: 1px solid var(--color-primary-blue-4);
-
-  &:hover {
-    border: 1px solid var(--color-primary-blue-2);
-    color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    color: var(--color-primary-blue-0);
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Outlined = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-white);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-grey-8);
-
-  &:active {
-    background-color: var(--color-grey-8);
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Danger = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-red-4);
-  color: var(--color-white);
-  border: 1px solid var(--color-red-4);
-
-  &:hover {
-    border: 1px solid var(--color-red-3);
-    background-color: var(--color-red-3);
-  }
-
-  &:active {
-    border: 1px solid var(--color-red-2);
-    background-color: var(--color-red-2);
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Text = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color-primary-blue-2);
-
-  &:hover {
-    color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    color: var(--color-primary-blue-0);
-  }
-
-  &:disabled {
-    background-color: transparent !important;
-    border: 1px solid transparent !important;
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Raised = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-white);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-white);
-  box-shadow: var(--elevation-1);
-
-  &:hover {
-    background-color: var(--color-grey-9);
-    border: 1px solid var(--color-grey-9);
-  }
-
-  &:active {
-    background-color: var(--color-grey-8);
-    border: 1px solid var(--color-grey-8);
-  }
-
-  &:disabled {
-    border: 1px solid var(--color-grey-9) !important;
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Special = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color-primary-grey-3);
-
-  &:hover {
-    color: var(--color-grey-3);
-  }
-
-  &:active {
-    background-color: var(--color-grey-9);
-  }
-
-  &:disabled {
-    background-color: transparent !important;
-    border: 1px solid transparent !important;
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;

package/src/components/actions/button/index.ts

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