@strapi/design-system 0.0.0-typescript.0 → 0.0.0-typescript.1

package/dist/Box/Box.js

@@ -1,95 +1,218 @@
-import a from "styled-components";
-import r from "../helpers/handleResponsiveValues.js";
-import { boxDefaultProps as t, boxPropTypes as n } from "./BoxProps.js";
-const d = {
+import d from "styled-components";
+import i from "../helpers/handleResponsiveValues.js";
+import { extractStyleFromTheme as s } from "../helpers/theme.js";
+const $ = {
   color: !0
-}, i = a.div.withConfig({
-  shouldForwardProp: (o, s) => !d[o] && s(o)
+}, l = d.div.withConfig({
+  shouldForwardProp: (e, o) => !$[e] && o(e)
 })`
   // Font
-  font-size: ${({ fontSize: o, theme: s }) => s.fontSizes[o] || o};
+  font-size: ${({
+  fontSize: e,
+  theme: o
+}) => s(o.fontSizes, e, e)};
 
   // Colors
-  background: ${({ theme: o, background: s }) => o.colors[s]};
-  color: ${({ theme: o, color: s }) => o.colors[s]};
+  background: ${({
+  theme: e,
+  background: o
+}) => s(e.colors, o, void 0)};
+  color: ${({
+  theme: e,
+  color: o
+}) => s(e.colors, o, void 0)};
 
   // Spaces
-  ${({ theme: o, padding: s }) => r("padding", s, o)}
-  ${({ theme: o, paddingTop: s }) => r("padding-top", s, o)}
-  ${({ theme: o, paddingRight: s }) => r("padding-right", s, o)}
-  ${({ theme: o, paddingBottom: s }) => r("padding-bottom", s, o)}
-  ${({ theme: o, paddingLeft: s }) => r("padding-left", s, o)}
-  ${({ theme: o, marginLeft: s }) => r("margin-left", s, o)}
-  ${({ theme: o, marginRight: s }) => r("margin-right", s, o)}
-  ${({ theme: o, marginTop: s }) => r("margin-top", s, o)}
-  ${({ theme: o, marginBottom: s }) => r("margin-bottom", s, o)}
+  ${({
+  theme: e,
+  padding: o
+}) => i("padding", o, e)}
+  ${({
+  theme: e,
+  paddingTop: o
+}) => i("padding-top", o, e)}
+  ${({
+  theme: e,
+  paddingRight: o
+}) => i("padding-right", o, e)}
+  ${({
+  theme: e,
+  paddingBottom: o
+}) => i("padding-bottom", o, e)}
+  ${({
+  theme: e,
+  paddingLeft: o
+}) => i("padding-left", o, e)}
+  ${({
+  theme: e,
+  marginLeft: o
+}) => i("margin-left", o, e)}
+  ${({
+  theme: e,
+  marginRight: o
+}) => i("margin-right", o, e)}
+  ${({
+  theme: e,
+  marginTop: o
+}) => i("margin-top", o, e)}
+  ${({
+  theme: e,
+  marginBottom: o
+}) => i("margin-bottom", o, e)}
 
   // Responsive hiding
-  ${({ theme: o, hiddenS: s }) => s ? `${o.mediaQueries.tablet} { display: none; }` : void 0}
-  ${({ theme: o, hiddenXS: s }) => s ? `${o.mediaQueries.mobile} { display: none; }` : void 0}
+  ${({
+  theme: e,
+  hiddenS: o
+}) => o ? `${e.mediaQueries.tablet} { display: none; }` : void 0}
+  ${({
+  theme: e,
+  hiddenXS: o
+}) => o ? `${e.mediaQueries.mobile} { display: none; }` : void 0}
   
 
   // Borders
-  border-radius: ${({ theme: o, hasRadius: s, borderRadius: e }) => s ? o.borderRadius : e};
-  border-style: ${({ borderStyle: o }) => o};
-  border-width: ${({ borderWidth: o }) => o};
-  border-color: ${({ borderColor: o, theme: s }) => s.colors[o]};
-  border: ${({ theme: o, borderColor: s, borderStyle: e, borderWidth: $ }) => {
-  if (s && !e && !$)
-    return `1px solid ${o.colors[s]}`;
+  border-radius: ${({
+  theme: e,
+  hasRadius: o,
+  borderRadius: r
+}) => o ? e.borderRadius : r};
+  border-style: ${({
+  borderStyle: e
+}) => e};
+  border-width: ${({
+  borderWidth: e
+}) => e};
+  border-color: ${({
+  borderColor: e,
+  theme: o
+}) => s(o.colors, e, void 0)};
+  border: ${({
+  theme: e,
+  borderColor: o,
+  borderStyle: r,
+  borderWidth: n
+}) => {
+  if (o && !r && !n)
+    return `1px solid ${e.colors[o]}`;
 }};
 
   // Shadows
-  box-shadow: ${({ theme: o, shadow: s }) => o.shadows[s]};
+  box-shadow: ${({
+  theme: e,
+  shadow: o
+}) => s(e.shadows, o, void 0)};
 
   // Handlers
-  pointer-events: ${({ pointerEvents: o }) => o};
+  pointer-events: ${({
+  pointerEvents: e
+}) => e};
   &:hover {
-    ${({ _hover: o, theme: s }) => o ? o(s) : void 0}
+    ${({
+  _hover: e,
+  theme: o
+}) => e ? e(o) : void 0}
   }
 
   // Display
-  display: ${({ display: o }) => o};
+  display: ${({
+  display: e
+}) => e};
 
   // Position
-  position: ${({ position: o }) => o};
-  left: ${({ left: o, theme: s }) => s.spaces[o] || o};
-  right: ${({ right: o, theme: s }) => s.spaces[o] || o};
-  top: ${({ top: o, theme: s }) => s.spaces[o] || o};
-  bottom: ${({ bottom: o, theme: s }) => s.spaces[o] || o};
-  z-index: ${({ zIndex: o }) => o};
-  overflow: ${({ overflow: o }) => o};
-  cursor: ${({ cursor: o }) => o};
+  position: ${({
+  position: e
+}) => e};
+  left: ${({
+  left: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  right: ${({
+  right: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  top: ${({
+  top: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  bottom: ${({
+  bottom: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  z-index: ${({
+  zIndex: e
+}) => e};
+  overflow: ${({
+  overflow: e
+}) => e};
 
   // Size
-  width: ${({ width: o, theme: s }) => s.spaces[o] || o};
-  max-width: ${({ maxWidth: o, theme: s }) => s.spaces[o] || o};
-  min-width: ${({ minWidth: o, theme: s }) => s.spaces[o] || o};
-  height: ${({ height: o, theme: s }) => s.spaces[o] || o};
-  max-height: ${({ maxHeight: o, theme: s }) => s.spaces[o] || o};
-  min-height: ${({ minHeight: o, theme: s }) => s.spaces[o] || o};
+  width: ${({
+  width: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  max-width: ${({
+  maxWidth: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  min-width: ${({
+  minWidth: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  height: ${({
+  height: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  max-height: ${({
+  maxHeight: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  min-height: ${({
+  minHeight: e,
+  theme: o
+}) => s(o.spaces, e, e)};
 
   // Animation
-  transition: ${({ transition: o }) => o};
-  transform: ${({ transform: o }) => o};
-  animation: ${({ animation: o }) => o};
+  transition: ${({
+  transition: e
+}) => e};
+  transform: ${({
+  transform: e
+}) => e};
+  animation: ${({
+  animation: e
+}) => e};
 
   //Flexbox children props
-  flex-shrink: ${({ shrink: o }) => o};
-  flex-grow: ${({ grow: o }) => o};
-  flex-basis: ${({ basis: o }) => o};
-  flex: ${({ flex: o }) => o};
+  flex-shrink: ${({
+  shrink: e
+}) => e};
+  flex-grow: ${({
+  grow: e
+}) => e};
+  flex-basis: ${({
+  basis: e
+}) => e};
+  flex: ${({
+  flex: e
+}) => e};
 
   // Text
-  text-align: ${({ textAlign: o }) => o};
-  text-transform: ${({ textTransform: o }) => o};
-  line-height: ${({ lineHeight: o }) => o};
+  text-align: ${({
+  textAlign: e
+}) => e};
+  text-transform: ${({
+  textTransform: e
+}) => e};
+  line-height: ${({
+  lineHeight: e
+}) => e};
 
   // Cursor
-  cursor: ${({ cursor: o }) => o};
+  cursor: ${({
+  cursor: e
+}) => e};
 `;
-i.defaultProps = t;
-i.propTypes = n;
 export {
-  i as Box
+  l as Box
 };

package/dist/Box/index.d.ts

@@ -0,0 +1 @@
+export * from './Box';

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),y=require("prop-types"),f=require("styled-components"),h=require("@strapi/icons/ChevronRight"),u=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),d=require("../Flex/Flex.cjs"),m=require("../VisuallyHidden/VisuallyHidden.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(p),r=l(y),g=l(f),b=l(h),T=g.default(d.Flex)`
+"use strict";var m=Object.defineProperty,f=Object.defineProperties;var b=Object.getOwnPropertyDescriptors;var l=Object.getOwnPropertySymbols;var a=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var n=(e,r,t)=>r in e?m(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,u=(e,r)=>{for(var t in r||(r={}))a.call(r,t)&&n(e,t,r[t]);if(l)for(var t of l(r))d.call(r,t)&&n(e,t,r[t]);return e},c=(e,r)=>f(e,b(r));var p=(e,r)=>{var t={};for(var s in e)a.call(e,s)&&r.indexOf(s)<0&&(t[s]=e[s]);if(e!=null&&l)for(var s of l(e))r.indexOf(s)<0&&d.call(e,s)&&(t[s]=e[s]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),B=require("styled-components"),q=require("@strapi/icons"),y=require("../Typography/Typography.cjs"),h=require("../Box/Box.cjs"),x=require("../Flex/Flex.cjs"),$=require("../VisuallyHidden/VisuallyHidden.cjs"),C=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},T=C(B),v=T.default(x.Flex)`
   svg {
     height: ${10/16}rem;
     width: ${10/16}rem;
@@ -6,11 +6,11 @@
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
-  :last-of-type ${s.Box} {
+  :last-of-type ${h.Box} {
     display: none;
   }
-  :last-of-type ${u.Typography} {
+  :last-of-type ${y.Typography} {
     color: ${({theme:e})=>e.colors.neutral800};
     font-weight: ${({theme:e})=>e.fontWeights.bold};
   }
-`,a=({children:e})=>t.default.createElement(T,{inline:!0,as:"li"},t.default.createElement(u.Typography,{variant:"pi",textColor:"neutral600"},e),t.default.createElement(s.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3},t.default.createElement(b.default,null)));a.displayName="Crumb";a.propTypes={children:r.default.node.isRequired};const n=r.default.shape({type:r.default.oneOf([a])}),o=({children:e,label:i,...c})=>t.default.createElement(d.Flex,{...c},t.default.createElement(m.VisuallyHidden,null,i),t.default.createElement("ol",{"aria-hidden":!0},e));o.displayName="Breadcrumbs";o.propTypes={children:r.default.oneOfType([r.default.arrayOf(n),n]).isRequired,label:r.default.string.isRequired};exports.Breadcrumbs=o;exports.Crumb=a;
+`,g=({children:e})=>i.jsxs(v,{inline:!0,as:"li",children:[i.jsx(y.Typography,{variant:"pi",textColor:"neutral600",children:e}),i.jsx(h.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3,children:i.jsx(q.ChevronRight,{})})]});g.displayName="Crumb";const j=s=>{var o=s,{children:e,label:r}=o,t=p(o,["children","label"]);return i.jsxs(x.Flex,c(u({},t),{children:[i.jsx($.VisuallyHidden,{children:r}),i.jsx("ol",{"aria-hidden":!0,children:e})]}))};j.displayName="Breadcrumbs";exports.Breadcrumbs=j;exports.Crumb=g;

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,16 @@
+import { FlexProps } from '../Flex';
+export interface CrumbProps {
+    children: React.ReactNode;
+}
+export declare const Crumb: {
+    ({ children }: CrumbProps): JSX.Element;
+    displayName: string;
+};
+export interface BreadcrumbsProps extends FlexProps {
+    children: React.ReactNode;
+    label: string;
+}
+export declare const Breadcrumbs: {
+    ({ children, label, ...props }: BreadcrumbsProps): JSX.Element;
+    displayName: string;
+};

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,52 +1,88 @@
-import r from "react";
-import t from "prop-types";
-import d from "styled-components";
-import c from "@strapi/icons/ChevronRight";
-import { Typography as a } from "../Typography/Typography.js";
-import { Box as l } from "../Box/Box.js";
-import { Flex as n } from "../Flex/Flex.js";
-import { VisuallyHidden as u } from "../VisuallyHidden/VisuallyHidden.js";
-const f = d(n)`
+var y = Object.defineProperty, $ = Object.defineProperties;
+var b = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var a = (r, e, i) => e in r ? y(r, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[e] = i, p = (r, e) => {
+  for (var i in e || (e = {}))
+    d.call(e, i) && a(r, i, e[i]);
+  if (l)
+    for (var i of l(e))
+      m.call(e, i) && a(r, i, e[i]);
+  return r;
+}, s = (r, e) => $(r, b(e));
+var h = (r, e) => {
+  var i = {};
+  for (var o in r)
+    d.call(r, o) && e.indexOf(o) < 0 && (i[o] = r[o]);
+  if (r != null && l)
+    for (var o of l(r))
+      e.indexOf(o) < 0 && m.call(r, o) && (i[o] = r[o]);
+  return i;
+};
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import x from "styled-components";
+import { ChevronRight as C } from "@strapi/icons";
+import { Typography as f } from "../Typography/Typography.js";
+import { Box as u } from "../Box/Box.js";
+import { Flex as g } from "../Flex/Flex.js";
+import { VisuallyHidden as v } from "../VisuallyHidden/VisuallyHidden.js";
+const B = x(g)`
   svg {
     height: ${10 / 16}rem;
     width: ${10 / 16}rem;
     path {
-      fill: ${({ theme: e }) => e.colors.neutral500};
+      fill: ${({
+  theme: r
+}) => r.colors.neutral500};
     }
   }
-  :last-of-type ${l} {
+  :last-of-type ${u} {
     display: none;
   }
-  :last-of-type ${a} {
-    color: ${({ theme: e }) => e.colors.neutral800};
-    font-weight: ${({ theme: e }) => e.fontWeights.bold};
+  :last-of-type ${f} {
+    color: ${({
+  theme: r
+}) => r.colors.neutral800};
+    font-weight: ${({
+  theme: r
+}) => r.fontWeights.bold};
   }
-`, o = ({ children: e }) => /* @__PURE__ */ r.createElement(f, {
+`, j = ({
+  children: r
+}) => c(B, {
   inline: !0,
-  as: "li"
-}, /* @__PURE__ */ r.createElement(a, {
-  variant: "pi",
-  textColor: "neutral600"
-}, e), /* @__PURE__ */ r.createElement(l, {
-  "aria-hidden": !0,
-  paddingLeft: 3,
-  paddingRight: 3
-}, /* @__PURE__ */ r.createElement(c, null)));
-o.displayName = "Crumb";
-o.propTypes = {
-  children: t.node.isRequired
-};
-const i = t.shape({ type: t.oneOf([o]) }), p = ({ children: e, label: m, ...s }) => /* @__PURE__ */ r.createElement(n, {
-  ...s
-}, /* @__PURE__ */ r.createElement(u, null, m), /* @__PURE__ */ r.createElement("ol", {
-  "aria-hidden": !0
-}, e));
-p.displayName = "Breadcrumbs";
-p.propTypes = {
-  children: t.oneOfType([t.arrayOf(i), i]).isRequired,
-  label: t.string.isRequired
+  as: "li",
+  children: [t(f, {
+    variant: "pi",
+    textColor: "neutral600",
+    children: r
+  }), t(u, {
+    "aria-hidden": !0,
+    paddingLeft: 3,
+    paddingRight: 3,
+    children: t(C, {})
+  })]
+});
+j.displayName = "Crumb";
+const w = (o) => {
+  var n = o, {
+    children: r,
+    label: e
+  } = n, i = h(n, [
+    "children",
+    "label"
+  ]);
+  return c(g, s(p({}, i), {
+    children: [t(v, {
+      children: e
+    }), t("ol", {
+      "aria-hidden": !0,
+      children: r
+    })]
+  }));
 };
+w.displayName = "Breadcrumbs";
 export {
-  p as Breadcrumbs,
-  o as Crumb
+  w as Breadcrumbs,
+  j as Crumb
 };

package/dist/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

package/dist/Button/Button.cjs

@@ -1,30 +1,30 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react"),x=require("prop-types"),g=require("styled-components"),j=require("@strapi/icons/Loader"),h=require("../Typography/Typography.cjs"),d=require("../Box/Box.cjs"),o=require("./utils.cjs"),y=require("./constants.cjs"),E=require("../BaseButton/BaseButton.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(q),t=n(x),u=n(g),L=n(j),P=g.keyframes`
+"use strict";var k=Object.defineProperty,w=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var g=(t,e,r)=>e in t?k(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,B=(t,e)=>{for(var r in e||(e={}))y.call(e,r)&&g(t,r,e[r]);if(s)for(var r of s(e))h.call(e,r)&&g(t,r,e[r]);return t},x=(t,e)=>w(t,H(e));var b=(t,e)=>{var r={};for(var i in t)y.call(t,i)&&e.indexOf(i)<0&&(r[i]=t[i]);if(t!=null&&s)for(var i of s(t))e.indexOf(i)<0&&h.call(t,i)&&(r[i]=t[i]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),N=require("react"),m=require("styled-components"),P=require("@strapi/icons"),$=require("../Typography/Typography.cjs"),c=require("../Box/Box.cjs"),A=require("../BaseButton/BaseButton.cjs"),o=require("./utils.cjs"),j=require("./constants.cjs"),v=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},E=v(N),d=v(m),F=m.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,R=u.default.div`
-  animation: ${P} 2s infinite linear;
+`,M=d.default.div`
+  animation: ${F} 2s infinite linear;
   will-change: transform;
-`,W=u.default(d.Box)`
+`,O=d.default(c.Box)`
   height: 100%;
-`,b=u.default(E.BaseButton)`
+`,S=d.default(A.BaseButton)`
   align-items: center;
-  background-color: ${({theme:e})=>e.colors.buttonPrimary600};
-  border: 1px solid ${({theme:e})=>e.colors.buttonPrimary600};
-  height: ${({theme:e,size:l})=>e.sizes.button[l]};
-  padding-left: ${({theme:e})=>e.spaces[4]};
-  padding-right: ${({theme:e})=>e.spaces[4]};
+  background-color: ${({theme:t})=>t.colors.buttonPrimary600};
+  border: 1px solid ${({theme:t})=>t.colors.buttonPrimary600};
+  height: ${({theme:t,size:e})=>t.sizes.button[e]};
+  padding-left: ${({theme:t})=>t.spaces[4]};
+  padding-right: ${({theme:t})=>t.spaces[4]};
 
-  ${d.Box} {
+  ${c.Box} {
     display: flex;
     align-items: center;
   }
 
-  ${h.Typography} {
-    color: ${({theme:e})=>e.colors.buttonNeutral0};
+  ${$.Typography} {
+    color: ${({theme:t})=>t.colors.buttonNeutral0};
   }
 
   &[aria-disabled='true'] {
@@ -40,9 +40,9 @@
     ${o.getActiveStyle}
   }
   ${o.getVariantStyle}
-  ${({fullWidth:e})=>e&&`
+  ${({fullWidth:t})=>t&&`
     display: inline-flex;
     justify-content: center;
     width: 100%;
   `}
-`,r=a.default.forwardRef(({variant:e,startIcon:l,endIcon:c,disabled:m,children:B,onClick:f,size:p,loading:i,fullWidth:v,...$},S)=>{const s=m||i,T=_=>{!s&&f&&f(_)};return a.default.createElement(b,{ref:S,"aria-disabled":s,disabled:s,size:p,variant:e,onClick:T,fullWidth:v,...$},(l||i)&&a.default.createElement(W,{"aria-hidden":!0,paddingRight:2},i?a.default.createElement(R,null,a.default.createElement(L.default,null)):l),a.default.createElement(h.Typography,{variant:p==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0},B),c&&a.default.createElement(d.Box,{"aria-hidden":!0,paddingLeft:2},c))});r.displayName="Button";r.defaultProps={disabled:!1,endIcon:void 0,fullWidth:!1,loading:!1,onClick:void 0,size:"S",startIcon:void 0,variant:"default"};r.propTypes={children:t.default.node.isRequired,disabled:t.default.bool,endIcon:t.default.element,fullWidth:t.default.bool,loading:t.default.bool,onClick:t.default.func,size:t.default.oneOf(y.BUTTON_SIZES),startIcon:t.default.element,variant:t.default.oneOf(y.VARIANTS)};exports.Button=r;exports.ButtonWrapper=b;
+`,q=E.default.forwardRef((U,L)=>{var p=U,{variant:t=j.DEFAULT,startIcon:e,endIcon:r,disabled:i=!1,children:T,onClick:u,size:f=j.BUTTON_SIZES[0],loading:n=!1,fullWidth:_=!1}=p,D=b(p,["variant","startIcon","endIcon","disabled","children","onClick","size","loading","fullWidth"]);const l=i||n,R=W=>{!l&&u&&u(W)};return a.jsxs(S,x(B({ref:L,"aria-disabled":l,disabled:l,size:f,variant:t,onClick:R,fullWidth:_},D),{children:[(e||n)&&a.jsx(O,{"aria-hidden":!0,paddingRight:2,children:n?a.jsx(M,{children:a.jsx(P.Loader,{})}):e}),a.jsx($.Typography,{variant:f==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,children:T}),r&&a.jsx(c.Box,{"aria-hidden":!0,paddingLeft:2,children:r})]}))});q.displayName="Button";exports.Button=q;exports.ButtonWrapper=S;

package/dist/Button/Button.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BaseButtonProps } from '../BaseButton';
+import { Variant, ButtonSizes } from './constants';
+export declare const ButtonWrapper: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, Required<Pick<ButtonProps, "variant" | "size" | "fullWidth">>, never>;
+export interface ButtonProps extends BaseButtonProps {
+    endIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    loading?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    size?: ButtonSizes;
+    startIcon?: React.ReactNode;
+    variant?: Variant;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;