@teamturing/react-kit 1.1.6 → 1.2.1

package/dist/index.js

@@ -21,6 +21,21 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React$1);
 
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$2.apply(this, arguments);
+}
+
 const gray = {
   gray50: '#F9FAFB',
   gray100: '#F3F4F6',
@@ -2884,8 +2899,8 @@ var shadow = system({
   }
 });
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2896,7 +2911,7 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 // based on https://github.com/developit/dlv
@@ -3022,7 +3037,7 @@ var positiveOrNegative = function positiveOrNegative(scale, value) {
 };
 var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
   var _extends2;
-  return _extends$2({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+  return _extends$1({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
 }, {});
 var responsive = function responsive(styles) {
   return function (theme) {
@@ -3057,7 +3072,7 @@ var css = function css(args) {
     if (props === void 0) {
       props = {};
     }
-    var theme = _extends$2({}, defaultTheme, {}, props.theme || props);
+    var theme = _extends$1({}, defaultTheme, {}, props.theme || props);
     var result = {};
     var obj = typeof args === 'function' ? args(theme) : args;
     var styles = responsive(obj)(theme);
@@ -3066,7 +3081,7 @@ var css = function css(args) {
       var val = typeof x === 'function' ? x(theme) : x;
       if (key === 'variant') {
         var variant = css(get(theme, val))(theme);
-        result = _extends$2({}, result, {}, variant);
+        result = _extends$1({}, result, {}, variant);
         continue;
       }
       if (val && typeof val === 'object') {
@@ -3191,6 +3206,75 @@ position.zIndex;
   position.bottom;
   position.left;
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+const SvgProgressGradient = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M12 1.4a1.1 1.1 0 0 0-1.1 1.1v3.042a1.1 1.1 0 0 0 2.2 0V2.5A1.101 1.101 0 0 0 12 1.4Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M6.656 8.211a1.097 1.097 0 0 0 1.556 0 1.101 1.101 0 0 0 0-1.556L6.06 4.505A1.101 1.101 0 0 0 4.505 6.06l2.15 2.151h.001Z",
+  clipRule: "evenodd",
+  opacity: 0.16
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M6.642 12a1.1 1.1 0 0 0-1.1-1.1H2.5a1.1 1.1 0 0 0 0 2.2h3.042a1.1 1.1 0 0 0 1.1-1.1Z",
+  clipRule: "evenodd",
+  opacity: 0.32
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "m6.656 15.789-2.151 2.15a1.101 1.101 0 0 0 1.556 1.556l2.15-2.15a1.101 1.101 0 0 0-1.555-1.556ZM12 17.358a1.1 1.1 0 0 0-1.1 1.1V21.5a1.1 1.1 0 0 0 2.2 0v-3.042a1.1 1.1 0 0 0-1.1-1.1Z",
+  clipRule: "evenodd",
+  opacity: 0.56
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M17.344 15.789a1.1 1.1 0 0 0-1.556 1.556l2.151 2.15a1.098 1.098 0 0 0 1.878-.778 1.1 1.1 0 0 0-.322-.778l-2.15-2.15h-.001ZM21.5 10.9h-3.042a1.1 1.1 0 0 0 0 2.2H21.5a1.1 1.1 0 0 0 0-2.2ZM16.566 8.534c.281 0 .563-.107.778-.322l2.151-2.151a1.1 1.1 0 0 0-1.556-1.556l-2.15 2.15a1.1 1.1 0 0 0 .777 1.879Z",
+  clipRule: "evenodd",
+  opacity: 0.72
+}));
+
+const spin = nt`
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Spinner = Qe(SvgProgressGradient)`
+  animation: ${spin} 1000ms infinite steps(8, end);
+`;
+Spinner.defaultProps = {
+  width: 32,
+  height: 32,
+  color: color$1['icon/neutral']
+};
+
 // Support CSS custom properties in the `sx` prop
 
 const sx = props => css$1(props.sx);
@@ -3213,6 +3297,355 @@ const wordBreak = system({
   }
 });
 
+const View = Qe.div`
+  ${compose(layout, color, flexbox, background, border, position, shadow)}
+  ${sx}
+`;
+
+const UnstyledButton = Qe.button`
+  background: none;
+  border: 0;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
+
+  ${sx}
+`;
+
+const Button = /*#__PURE__*/React$1.forwardRef(({
+  size = 'm',
+  variant = 'primary',
+  fillWidth = false,
+  disabled = false,
+  loading = false,
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(BaseButton, _extends$2({
+    ref: ref,
+    size: size,
+    disabled: disabled || loading,
+    $disabled: disabled,
+    $loading: loading,
+    variant: variant,
+    leadingIcon: LeadingIcon,
+    trailingIcon: TrailingIcon,
+    fillWidth: fillWidth
+  }, props), /*#__PURE__*/React.createElement(View, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      columnGap: 1,
+      visibility: !loading ? 'initial' : 'hidden'
+    }
+  }, LeadingIcon ? /*#__PURE__*/React.createElement(LeadingIcon, null) : null, children, TrailingIcon ? /*#__PURE__*/React.createElement(TrailingIcon, null) : null), loading ? /*#__PURE__*/React.createElement(View, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(BaseSpinner, {
+    size: size,
+    variant: variant
+  })) : null);
+});
+const BaseButton = Qe(UnstyledButton)(({
+  $loading,
+  $disabled,
+  fillWidth
+}) => ({
+  'position': 'relative',
+  'borderRadius': radii.full,
+  'backgroundColor': 'black',
+  'transition': 'background-color 100ms, color 100ms',
+  'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
+  'width': fillWidth ? '100%' : 'initial',
+  '& svg': {
+    transition: 'color 100ms'
+  }
+}), ({
+  leadingIcon,
+  trailingIcon
+}) => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'pl': leadingIcon && !trailingIcon ? 3 : 4,
+      'pr': !leadingIcon && trailingIcon ? 3 : 4,
+      'py': 3,
+      'height': 'initial',
+      'maxHeight': 'initial',
+      'fontSize': typography$1['s'].fontSize,
+      'fontWeight': typography$1['s'].fontWeight,
+      'lineHeight': typography$1['s'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
+      }
+    },
+    m: {
+      'pl': leadingIcon && !trailingIcon ? 3 : 4,
+      'pr': !leadingIcon && trailingIcon ? 3 : 4,
+      'py': 2,
+      'height': 'initial',
+      'maxHeight': 'initial',
+      'fontSize': typography$1['xs'].fontSize,
+      'fontWeight': typography$1['xs'].fontWeight,
+      'lineHeight': typography$1['xs'].lineHeight,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    },
+    s: {
+      'pl': leadingIcon && !trailingIcon ? 2 : 3,
+      'pr': !leadingIcon && trailingIcon ? 2 : 3,
+      'py': 0,
+      'height': 32,
+      'maxHeight': 32,
+      'fontSize': typography$1['xxs'].fontSize,
+      'fontWeight': typography$1['xxs'].fontWeight,
+      'lineHeight': typography$1['xxs'].lineHeight,
+      '& svg': {
+        width: 12,
+        height: 12
+      }
+    }
+  }
+}), ({
+  $disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      'backgroundColor': color$1['bg/primary'],
+      'color': color$1['text/inverse'],
+      '& svg': {
+        color: color$1['icon/inverse']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/primary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/primary/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    },
+    secondary: {
+      'backgroundColor': color$1['bg/secondary'],
+      'color': color$1['text/primary'],
+      '& svg': {
+        color: color$1['icon/primary']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/secondary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/secondary/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    },
+    tertiary: {
+      'backgroundColor': color$1['bg/neutral'],
+      'color': color$1['text/neutral'],
+      '& svg': {
+        color: color$1['icon/accent/gray']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    },
+    outlined: {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['text/neutral/subtle'],
+      '& svg': {
+        color: color$1['icon/neutral/bolder']
+      },
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color$1['border/neutral/bolder'],
+        borderRadius: radii.full,
+        boxSizing: 'border-box'
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/subtler/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/subtler/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        },
+        ':after': {
+          display: 'none'
+        }
+      } : {})
+    },
+    plain: {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['text/neutral/subtle'],
+      '& svg': {
+        color: color$1['icon/neutral/bolder']
+      },
+      ':hover:not(:disabled)': {
+        'color': color$1['text/neutral'],
+        '& svg': {
+          color: color$1['icon/accent/gray']
+        }
+      },
+      ':active:not(:disabled)': {
+        'color': color$1['text/neutral'],
+        '& svg': {
+          color: color$1['icon/accent/gray']
+        }
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    },
+    danger: {
+      'backgroundColor': color$1['bg/danger/bold'],
+      'color': color$1['text/inverse'],
+      '& svg': {
+        color: color$1['icon/inverse']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/danger/bold/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/danger/bold/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    }
+  }
+}));
+const BaseSpinner = Qe(Spinner)(variant({
+  prop: 'size',
+  variants: {
+    l: {
+      width: 20,
+      height: 20
+    },
+    m: {
+      width: 16,
+      height: 16
+    },
+    s: {
+      width: 16,
+      height: 16
+    }
+  }
+}), variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      color: color$1['icon/inverse']
+    },
+    secondary: {
+      color: color$1['icon/primary']
+    },
+    tertiary: {
+      color: color$1['icon/accent/gray']
+    },
+    outlined: {
+      color: color$1['icon/neutral/bolder']
+    },
+    plain: {
+      color: color$1['icon/neutral/bolder']
+    },
+    danger: {
+      color: color$1['icon/inverse']
+    }
+  }
+}));
+
 const Chip = ({
   children,
   size = 'm',
@@ -3432,21 +3865,6 @@ const GradientText = Qe(Text)`
   -webkit-text-fill-color: transparent;
 `;
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-
 /**
  * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
  */
@@ -3458,11 +3876,6 @@ const isArray = value => Array.isArray(value);
 
 const isNullable = value => value === null || value === undefined;
 
-const View = Qe.div`
-  ${compose(layout, color, flexbox, background, border, position, shadow)}
-  ${sx}
-`;
-
 const Grid = /*#__PURE__*/React$1.forwardRef(({
   children,
   wrap: propWrap = true,
@@ -3472,7 +3885,7 @@ const Grid = /*#__PURE__*/React$1.forwardRef(({
   ...props
 }, ref) => {
   const wrap = Array.isArray(propWrap) ? propWrap.map(value => value === true ? 'true' : 'false') : propWrap === true ? 'true' : 'false';
-  return /*#__PURE__*/React.createElement(BaseGrid, _extends$1({
+  return /*#__PURE__*/React.createElement(BaseGrid, _extends$2({
     ref: ref,
     gapX: gapX,
     gapY: gapY,
@@ -3542,7 +3955,7 @@ const Unit = ({
     const percentage = Math.round(size * 100 * 10000) / 10000;
     return size === 'max' ? '100%' : size === 'min' ? 'none' : `${percentage}%`;
   };
-  return /*#__PURE__*/React.createElement(View, _extends$1({}, mapValueToResponsiveValueProps(size, value => ({
+  return /*#__PURE__*/React.createElement(View, _extends$2({}, mapValueToResponsiveValueProps(size, value => ({
     display: value === 0 ? 'none' : 'initial',
     flowGrow: getFlexGrowBySize(value),
     flex: getFlexBySize(value),
@@ -3557,85 +3970,6 @@ var index$1 = Object.assign(Grid, {
   Unit
 });
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const SvgProgressGradient = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "1em",
-  height: "1em",
-  fill: "none",
-  viewBox: "0 0 24 24"
-}, props), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "M12 1.4a1.1 1.1 0 0 0-1.1 1.1v3.042a1.1 1.1 0 0 0 2.2 0V2.5A1.101 1.101 0 0 0 12 1.4Z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "M6.656 8.211a1.097 1.097 0 0 0 1.556 0 1.101 1.101 0 0 0 0-1.556L6.06 4.505A1.101 1.101 0 0 0 4.505 6.06l2.15 2.151h.001Z",
-  clipRule: "evenodd",
-  opacity: 0.16
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "M6.642 12a1.1 1.1 0 0 0-1.1-1.1H2.5a1.1 1.1 0 0 0 0 2.2h3.042a1.1 1.1 0 0 0 1.1-1.1Z",
-  clipRule: "evenodd",
-  opacity: 0.32
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "m6.656 15.789-2.151 2.15a1.101 1.101 0 0 0 1.556 1.556l2.15-2.15a1.101 1.101 0 0 0-1.555-1.556ZM12 17.358a1.1 1.1 0 0 0-1.1 1.1V21.5a1.1 1.1 0 0 0 2.2 0v-3.042a1.1 1.1 0 0 0-1.1-1.1Z",
-  clipRule: "evenodd",
-  opacity: 0.56
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "M17.344 15.789a1.1 1.1 0 0 0-1.556 1.556l2.151 2.15a1.098 1.098 0 0 0 1.878-.778 1.1 1.1 0 0 0-.322-.778l-2.15-2.15h-.001ZM21.5 10.9h-3.042a1.1 1.1 0 0 0 0 2.2H21.5a1.1 1.1 0 0 0 0-2.2ZM16.566 8.534c.281 0 .563-.107.778-.322l2.151-2.151a1.1 1.1 0 0 0-1.556-1.556l-2.15 2.15a1.1 1.1 0 0 0 .777 1.879Z",
-  clipRule: "evenodd",
-  opacity: 0.72
-}));
-
-const spin = nt`
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-const Spinner = Qe(SvgProgressGradient)`
-  animation: ${spin} 1000ms infinite steps(8, end);
-`;
-Spinner.defaultProps = {
-  width: 32,
-  height: 32,
-  color: color$1['icon/neutral']
-};
-
-const UnstyledButton = Qe.button`
-  background: none;
-  border: 0;
-  padding: 0;
-  outline: none;
-  cursor: pointer;
-
-  ${sx}
-`;
-
 const IconButton = /*#__PURE__*/React$1.forwardRef(({
   icon: Icon,
   size = 'm',
@@ -3645,7 +3979,7 @@ const IconButton = /*#__PURE__*/React$1.forwardRef(({
   type = 'button',
   ...props
 }, ref) => {
-  return /*#__PURE__*/React.createElement(BaseIconButton, _extends$1({
+  return /*#__PURE__*/React.createElement(BaseIconButton, _extends$2({
     ref: ref,
     type: type,
     icon: Icon,
@@ -3846,7 +4180,7 @@ const IconToggleButton = ({
   sx,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(BaseIconToggleButton, _extends$1({
+  return /*#__PURE__*/React.createElement(BaseIconToggleButton, _extends$2({
     icon: Icon,
     size: size,
     variant: variant,
@@ -3954,7 +4288,7 @@ const Stack = /*#__PURE__*/React$1.forwardRef(({
   children,
   alignItems = 'center',
   ...props
-}, ref) => /*#__PURE__*/React.createElement(BaseStack, _extends$1({
+}, ref) => /*#__PURE__*/React.createElement(BaseStack, _extends$2({
   ref: ref,
   alignItems: alignItems,
   gapX: gapX,
@@ -3999,7 +4333,7 @@ const StyledIcon = ({
   icon: Icon,
   sx,
   ...props
-}) => /*#__PURE__*/React.createElement(View, _extends$1({}, props, {
+}) => /*#__PURE__*/React.createElement(View, _extends$2({}, props, {
   color: props.color,
   sx: {
     '& svg': {
@@ -4011,6 +4345,7 @@ const StyledIcon = ({
   }
 }), /*#__PURE__*/React.createElement(Icon, null));
 
+exports.Button = Button;
 exports.Chip = Chip;
 exports.GradientText = GradientText;
 exports.Grid = index$1;