@soul-refiner/design-system 2.5.0-alpha.6 → 2.5.0-alpha.8

package/dist/common/colors.js

@@ -1,135 +1 @@
-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})`]));
+"use strict";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"],colorReference=Object.fromEntries(COLORS.map(e=>[e,`var(--color-${e})`]));exports.COLORS=COLORS,exports.colorReference=colorReference;

package/dist/common/date.js

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

package/dist/common/styles.js

@@ -1,63 +1,34 @@
-import { css } from 'styled-components';
-import { colorReference } from '../common/colors';
-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 `
+"use strict";var styled=require("styled-components"),colors=require("./colors.js");exports.Styles=void 0,function(e){e.backgroundColor=styled.css`
+    background-color: ${({$backgroundColor:e})=>e?colors.colorReference[e]:"var(--page-bg)"};
+  `,e.borderRadius=styled.css`
+    border-radius: ${({$borderRadius:e})=>e?`var(--${e})`:""};
+  `,e.color=styled.css`
+    color: ${({$color:e})=>e?colors.colorReference[e]:"var(--color-grey-3)"};
+  `,e.elevation=styled.css`
+    box-shadow: ${({$elevation:e})=>e?`var(--elevation-${e})`:"none"};
+  `,e.flex=styled.css`
+    align-items: ${({$align:e})=>e??"normal"};
+    gap: ${({$gap:e})=>e&&"number"==typeof e?e+"px":e&&"string"==typeof e?`var(--${e})`:"0px"};
+    flex: ${({$flex:e})=>e??"none"};
+    flex-flow: ${({$flow:e})=>e??"row"};
+    flex-direction: ${({$dir:e})=>e??"row"};
+    justify-content: ${({$justify:e})=>e??"normal"};
+  `,e.margin=styled.css`
+    margin: ${({$margin:e})=>e&&"number"==typeof e?e+"px":e&&"string"==typeof e?`var(--${e})`:"0px"};
+  `,e.padding=styled.css`
+    padding: ${({$padding:e})=>e&&"number"==typeof e?e+"px;":e&&"string"==typeof e&&e.includes("px")?e:e&&"string"==typeof e?`var(--${e});`:"0px"};
+  `,e.styleable=styled.css`
+    ${({sx:e})=>e||""}
+  `,e.textClamp=styled.css`
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
-    line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
-    -webkit-line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
+    line-clamp: ${({$textClampLines:e})=>e??1};
+    -webkit-line-clamp: ${({$textClampLines:e})=>e??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 = {}));
+  `,e.typography=styled.css`
+    font-style: ${({$italic:e})=>e?"italic":"normal"};
+    text-decoration: ${({$strikethrough:e,$underline:o})=>e?"line-through":o?"underline":"none"};
+  `,e.weight=styled.css`
+    font-weight: ${({$bold:e,$semiBold:o,$mediumBold:s})=>e?700:o?600:s?500:400};
+  `}(exports.Styles||(exports.Styles={}));

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

@@ -1,87 +1,15 @@
-'use client';
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { Styles } from '../../../common/styles';
-import { P } from '../../../components/atoms/typography/paragraph';
-import { Box } from '../../../components/atoms/box/box';
-import { ChevronDown } from '../../../icons/arrow/chevron_down';
-import { ChevronUp } from '../../../icons/arrow/chevron_up';
-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, href, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', showChevron = true, customDropdownIcon, ...props }) => {
-    const Component = Components()[type];
-    const buttonIcon = React.Children.map(icon, (item) => {
-        if (React.isValidElement(item))
-            return {
-                ...item,
-                props: {
-                    ...(item.props ?? {}),
-                    size: size === 'large' && !children
-                        ? LG_ICON_SIZE_WO_CHILDREN
-                        : size === 'large'
-                            ? LG_ICON_SIZE
-                            : SM_ICON_SIZE,
-                },
-            };
-    })?.[0];
-    const CustomDropdownIcon = customDropdownIcon;
-    let dropdownIcon = undefined;
-    if (showChevron) {
-        if (isDropdownOpen === true) {
-            dropdownIcon = CustomDropdownIcon ? (React.createElement(CustomDropdownIcon, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : (React.createElement(ChevronUp, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE }));
-        }
-        else if (isDropdownOpen === false) {
-            dropdownIcon = CustomDropdownIcon ? (React.createElement(CustomDropdownIcon, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : (React.createElement(ChevronDown, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE }));
-        }
-    }
-    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, href: href, "$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,
-    dropdown: Dropdown,
-});
-const base = css `
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),paragraph=require("../../atoms/typography/paragraph.js"),box=require("../../atoms/box/box.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js");function _interopDefaultCompat(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const LG_ICON_SIZE=20,LG_ICON_SIZE_WO_CHILDREN=24,LG_FONT_SIZE=16,LG_PADDING="11px 19px",LG_PADDING_WO_CHILDREN="11px",SM_ICON_SIZE=16,SM_FONT_SIZE=14,SM_PADDING="5px 15px",SM_PADDING_WO_CHILDREN="7px",Button=({as:r="button",children:o,disabled:e,fluid:l=!1,href:a,icon:t,isDropdownOpen:d,roundness:s="large",size:c="large",sx:i,type:n="primary",showChevron:p=!0,customDropdownIcon:u,...b})=>{n=Components()[n],t=React__default.default.Children.map(t,r=>{if(React__default.default.isValidElement(r))return{...r,props:{...r.props??{},size:"large"!==c||o?"large"===c?LG_ICON_SIZE:SM_ICON_SIZE:LG_ICON_SIZE_WO_CHILDREN}}})?.[0];let y=void 0;p&&(!0===d?y=u?React__default.default.createElement(u,{sx:"margin-left:auto;",size:"large"===c?LG_ICON_SIZE:SM_ICON_SIZE}):React__default.default.createElement(chevron_up.ChevronUp,{sx:"margin-left:auto;",size:"large"===c?LG_ICON_SIZE:SM_ICON_SIZE}):!1===d&&(y=u?React__default.default.createElement(u,{sx:"margin-left:auto;",size:"large"===c?LG_ICON_SIZE:SM_ICON_SIZE}):React__default.default.createElement(chevron_down.ChevronDown,{sx:"margin-left:auto;",size:"large"===c?LG_ICON_SIZE:SM_ICON_SIZE})));p=o?"large"===c?LG_PADDING:SM_PADDING:"large"===c?LG_PADDING_WO_CHILDREN:SM_PADDING_WO_CHILDREN;return React__default.default.createElement(n,{as:r,disabled:e,href:a,$align:"center",$display:"flex",$fluid:l,$gap:"large"===c?12:8,$hasChildren:!!o,$justify:"center",$padding:p,$roundness:s,$size:c,$sx:i,...b},t,o&&React__default.default.createElement(paragraph.P,{as:"span",$mediumBold:!0,$fontSize:"large"===c?LG_FONT_SIZE:SM_FONT_SIZE,$color:"inherit"},o),!!o&&y)},Components=()=>({primary:Primary,secondary:Secondary,outlined:Outlined,danger:Danger,raised:Raised,special:Special,text:Text,dropdown:Dropdown}),base=styled.css`
   font-family: var(--font-inter);
   display: flex;
-  border-radius: ${({ $roundness }) => $roundness === 'large'
-    ? '32px'
-    : $roundness === 'medium-small'
-        ? '8px'
-        : $roundness === 'small'
-            ? '4px'
-            : '0px'};
+  border-radius: ${({$roundness:r})=>"large"===r?"32px":"medium-small"===r?"8px":"small"===r?"4px":"0px"};
   cursor: pointer;
   user-select: none;
   box-sizing: border-box;
   outline: none;
-  ${({ $fluid }) => $fluid
-    ? `flex-basis: max-content;
+  ${({$fluid:r})=>r?`flex-basis: max-content;
     flex: 1 !important;
-    width: max-content`
-    : ''}
+    width: max-content`:""}
 
   svg {
     fill: currentColor;
@@ -93,8 +21,7 @@ const base = css `
     color: var(--color-grey-7) !important;
     cursor: unset !important;
   }
-`;
-const Primary = styled(Box) `
+`,Primary=styled__default.default(box.Box)`
   background-color: var(--color-primary-blue-2);
   color: var(--color-white);
   border: 1px solid var(--color-primary-blue-2);
@@ -115,12 +42,11 @@ const Primary = styled(Box) `
   }
 
   ${base}
-  ${Styles.flex}
-  ${Styles.padding}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Secondary = styled(Box) `
+  ${({$sx:r})=>r||""}
+`,Secondary=styled__default.default(box.Box)`
   background-color: var(--color-primary-blue-4);
   color: var(--color-primary-blue-2);
   border: 1px solid var(--color-primary-blue-4);
@@ -141,12 +67,11 @@ const Secondary = styled(Box) `
   }
 
   ${base}
-  ${Styles.flex}
-  ${Styles.padding}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Outlined = styled(Box) `
+  ${({$sx:r})=>r||""}
+`,Outlined=styled__default.default(box.Box)`
   background-color: var(--color-white);
   color: var(--color-grey-3);
   border: 1px solid var(--color-grey-8);
@@ -179,12 +104,11 @@ const Outlined = styled(Box) `
   }
 
   ${base}
-  ${Styles.flex}
-  ${Styles.padding}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Danger = styled(Box) `
+  ${({$sx:r})=>r||""}
+`,Danger=styled__default.default(box.Box)`
   background-color: var(--color-red-4);
   color: var(--color-white);
   border: 1px solid var(--color-red-4);
@@ -205,12 +129,11 @@ const Danger = styled(Box) `
   }
 
   ${base}
-  ${Styles.flex}
-  ${Styles.padding}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Text = styled(Box) `
+  ${({$sx:r})=>r||""}
+`,Text=styled__default.default(box.Box)`
   background-color: transparent;
   border-color: transparent !important;
   border: 1px solid transparent;
@@ -235,11 +158,10 @@ const Text = styled(Box) `
   }
 
   ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Raised = styled(Box) `
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+  ${({$sx:r})=>r||""}
+`,Raised=styled__default.default(box.Box)`
   background-color: var(--color-white);
   color: var(--color-grey-3);
   border: 1px solid var(--color-white);
@@ -260,12 +182,11 @@ const Raised = styled(Box) `
   }
 
   ${base}
-  ${Styles.flex}
-  ${Styles.padding}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Special = styled(Box) `
+  ${({$sx:r})=>r||""}
+`,Special=styled__default.default(box.Box)`
   background-color: transparent;
   border: 1px solid transparent;
   color: var(--color-primary-grey-3);
@@ -290,12 +211,11 @@ const Special = styled(Box) `
   }
 
   ${base}
-  ${Styles.flex}
-  ${Styles.padding}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Dropdown = styled(Box) `
+  ${({$sx:r})=>r||""}
+`,Dropdown=styled__default.default(box.Box)`
   width: 100%;
   background-color: var(--color-blue-10);
   color: var(--color-grey-3);
@@ -310,10 +230,10 @@ const Dropdown = styled(Box) `
   }
 
   ${base}
-  ${Styles.flex}
-  ${Styles.padding}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
 
   border-radius: 8px;
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
+  ${({$sx:r})=>r||""}
+`;exports.Button=Button;