@soul-refiner/design-system 0.1.28 → 0.1.30

package/dist/common/colors.d.ts

@@ -0,0 +1,2 @@
+export declare const COLORS: readonly ["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"];
+export declare const colorReference: Record<"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", string>;

package/dist/common/colors.js

@@ -0,0 +1,135 @@
+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',
+];
+export const colorReference = Object.fromEntries(COLORS.map((item) => [item, `var(--color-${item})`]));

package/dist/common/date.d.ts

@@ -0,0 +1,26 @@
+export declare const THIS_YEAR: number;
+export declare const THIS_MONTH: number;
+export declare enum WEEKDAYS {
+    MON = "Mon",
+    TUE = "Tue",
+    WED = "Wed",
+    THU = "Thu",
+    FRI = "Fri",
+    SAT = "Sat",
+    SUN = "Sun"
+}
+export declare 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 declare const CALENDAR_WEEKS = 6;

package/dist/common/date.js

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

package/dist/common/index.d.ts

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

package/dist/common/index.js

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

package/dist/common/styles.d.ts

@@ -0,0 +1,14 @@
+import { BackgroundColor, BorderRadius, Color, Elevation, Flex, Margin, Padding, Styleable, TextClamp, TypographyStyle, TypographyWeight } from 'types';
+export declare namespace Styles {
+    const backgroundColor: import("styled-components").RuleSet<BackgroundColor>;
+    const borderRadius: import("styled-components").RuleSet<BorderRadius>;
+    const color: import("styled-components").RuleSet<Color>;
+    const elevation: import("styled-components").RuleSet<Elevation>;
+    const flex: import("styled-components").RuleSet<Flex>;
+    const margin: import("styled-components").RuleSet<Margin>;
+    const padding: import("styled-components").RuleSet<Padding>;
+    const styleable: import("styled-components").RuleSet<Styleable>;
+    const textClamp: import("styled-components").RuleSet<TextClamp>;
+    const typography: import("styled-components").RuleSet<TypographyStyle>;
+    const weight: import("styled-components").RuleSet<TypographyWeight>;
+}

package/dist/common/styles.js

@@ -0,0 +1,63 @@
+import { css } from 'styled-components';
+import { colorReference } from 'common';
+export var Styles;
+(function (Styles) {
+    Styles.backgroundColor = css `
+    background-color: ${({ $backgroundColor }) => $backgroundColor ? colorReference[$backgroundColor] : 'var(--page-bg)'};
+  `;
+    Styles.borderRadius = css `
+    border-radius: ${({ $borderRadius }) => $borderRadius ? `var(--${$borderRadius})` : ''};
+  `;
+    Styles.color = css `
+    color: ${({ $color }) => $color ? colorReference[$color] : 'var(--color-grey-3)'};
+  `;
+    Styles.elevation = css `
+    box-shadow: ${({ $elevation }) => $elevation ? `var(--elevation-${$elevation})` : 'none'};
+  `;
+    Styles.flex = css `
+    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'};
+  `;
+    Styles.margin = css `
+    margin: ${({ $margin }) => $margin && typeof $margin === 'number'
+        ? `${$margin}px`
+        : $margin && typeof $margin === 'string'
+            ? `var(--${$margin})`
+            : '0px'};
+  `;
+    Styles.padding = css `
+    padding: ${({ $padding }) => $padding && typeof $padding === 'number'
+        ? `${$padding}px;`
+        : $padding && typeof $padding === 'string' && $padding.includes('px')
+            ? $padding
+            : $padding && typeof $padding === 'string'
+                ? `var(--${$padding});`
+                : '0px'};
+  `;
+    Styles.styleable = css `
+    ${({ sx }) => (sx ? sx : '')}
+  `;
+    Styles.textClamp = css `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
+    -webkit-line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
+    -webkit-box-orient: vertical;
+  `;
+    Styles.typography = css `
+    font-style: ${({ $italic }) => ($italic ? 'italic' : 'normal')};
+    text-decoration: ${({ $strikethrough, $underline }) => $strikethrough ? 'line-through' : $underline ? 'underline' : 'none'};
+  `;
+    Styles.weight = css `
+    font-weight: ${({ $bold, $semiBold, $mediumBold }) => $bold ? 700 : $semiBold ? 600 : $mediumBold ? 500 : 400};
+  `;
+})(Styles || (Styles = {}));

package/dist/components/actions/button/button.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+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 declare const Button: ({ as, children, disabled, fluid, icon, isDropdownOpen, roundness, size, sx, type, ...props }: ButtonProps) => React.JSX.Element;
+export {};

package/dist/components/actions/button/button.js

@@ -0,0 +1,233 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Styles } from 'common';
+import { P } from 'components';
+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';
+export const Button = ({ as = 'button', children, disabled, fluid = false, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', ...props }) => {
+    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 ? (React.createElement(ChevronUp, { size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : isDropdownOpen === false ? (React.createElement(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 (React.createElement(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 && (React.createElement(P, { as: "span", "$mediumBold": true, "$fontSize": size === 'large' ? LG_FONT_SIZE : SM_FONT_SIZE, "$color": "inherit" }, children)),
+        !!children && dropdownIcon));
+};
+const Components = () => ({
+    primary: Primary,
+    secondary: Secondary,
+    outlined: Outlined,
+    danger: Danger,
+    raised: Raised,
+    special: Special,
+    text: Text,
+});
+const base = css `
+  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) `
+  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) `
+  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) `
+  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) `
+  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) `
+  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) `
+  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) `
+  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/dist/components/actions/button/button.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ButtonProps } from './button';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonProps>;
+export default meta;

package/dist/components/actions/button/button.stories.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button } from './button';
+import { Plus } from 'icons';
+const meta = {
+    title: 'Actions/Button',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = ({ children, icon, ...args }) => (React.createElement(Button, { icon: icon ? React.createElement(Plus, null) : undefined, ...args }, children));
+export const Default = Story.bind({});
+Default.argTypes = {
+    children: {
+        type: 'string',
+    },
+    disabled: {
+        type: 'boolean',
+    },
+    icon: {
+        type: 'boolean',
+    },
+    isDropdownOpen: {
+        type: 'boolean',
+    },
+    size: {
+        type: 'string',
+        options: ['large', 'small'],
+        control: 'select',
+    },
+    roundness: {
+        type: 'string',
+        options: ['none', 'small', 'medium-small', 'large'],
+        control: 'select',
+    },
+    type: {
+        type: 'string',
+        options: [
+            'primary',
+            'secondary',
+            'outlined',
+            'danger',
+            'text',
+            'raised',
+            'special',
+        ],
+        control: 'select',
+    },
+};
+Default.args = {
+    children: 'Button',
+    disabled: false,
+    icon: undefined,
+    isDropdownOpen: undefined,
+    size: 'large',
+    roundness: 'large',
+    type: 'primary',
+};
+export default meta;

package/dist/components/actions/button/index.d.ts

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

package/dist/components/actions/button/index.js

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

package/dist/components/actions/dropdown/dropdown.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
+export interface DropdownProps extends NativeProps, React.PropsWithChildren {
+    checkbox?: boolean;
+    closeOnChange?: boolean;
+    closeOnBlur?: boolean;
+    defaultValue?: string | string[];
+    disabled?: boolean;
+    hasArrow?: boolean;
+    maintainState?: boolean;
+    multiple?: boolean;
+    offset?: [number, number];
+    open?: 'right' | 'left';
+    options?: (Omit<DropdownOptionProps, 'selected' | 'onClick'> | 'break')[];
+    sx?: string;
+    trigger: React.ReactElement;
+}
+declare const Dropdown: {
+    ({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, multiple, offset, onChange, open: openDirection, options, sx, trigger, ...rest }: DropdownProps): React.JSX.Element;
+    Option: {
+        ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, }: DropdownOptionProps): React.JSX.Element;
+        displayName: string;
+    };
+    Spacer: {
+        ({ sx }: DropdownSpacerProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export interface DropdownOptionProps {
+    checkbox?: boolean;
+    color?: string;
+    disabled?: boolean;
+    icon?: React.ReactElement;
+    label?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
+    selected: boolean;
+    sublabel?: string;
+    sx?: string;
+    value: string;
+}
+export interface DropdownSpacerProps {
+    sx?: string;
+}
+export { Dropdown };