@strapi/design-system 1.3.0-beta.2 → 1.3.0

package/dist/BaseRadio/RadioGroup.js

@@ -0,0 +1,32 @@
+import t, { useRef as f, useLayoutEffect as p } from "react";
+import e from "prop-types";
+import { RadioContext as m } from "./context.js";
+import { setTabIndexOnFirstItem as c } from "../helpers/setTabIndexOnFirstItem.js";
+const n = ({ children: s, labelledBy: a, onChange: d, value: r, size: u, name: o, ...l }) => {
+  const i = f(null);
+  return p(() => {
+    r || c(i.current, `[name="${o}"]`);
+  }, [r]), /* @__PURE__ */ t.createElement(m.Provider, {
+    value: { onChange: d, selected: r, name: o, size: u }
+  }, /* @__PURE__ */ t.createElement("div", {
+    ref: i,
+    role: "radiogroup",
+    "aria-labelledby": a,
+    ...l
+  }, s));
+};
+n.defaultProps = {
+  value: "",
+  size: "M"
+};
+n.propTypes = {
+  children: e.node.isRequired,
+  labelledBy: e.string.isRequired,
+  name: e.string.isRequired,
+  onChange: e.func.isRequired,
+  size: e.oneOf(["M", "L"]),
+  value: e.string
+};
+export {
+  n as RadioGroup
+};

package/dist/BaseRadio/context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({onChange:()=>{},name:"",size:"M"});exports.RadioContext=t;

package/dist/BaseRadio/context.js

@@ -0,0 +1,6 @@
+import { createContext as o } from "react";
+const t = o({ onChange: () => {
+}, name: "", size: "M" });
+export {
+  t as RadioContext
+};

package/dist/BaseRadio/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./BaseRadio.cjs"),o=require("./RadioGroup.cjs");exports.BaseRadio=e.BaseRadio;exports.RadioGroup=o.RadioGroup;

package/dist/BaseRadio/index.js

@@ -0,0 +1,6 @@
+import { BaseRadio as a } from "./BaseRadio.js";
+import { RadioGroup as p } from "./RadioGroup.js";
+export {
+  a as BaseRadio,
+  p as RadioGroup
+};

package/dist/BaseRadio/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=({size:e})=>e==="M"?"18px":"20px",i=({size:e})=>e==="M"?"10px":"12px",o=()=>"3px";exports.getRadioSize=t;exports.getSelectedRadioPosition=o;exports.getSelectedRadioSize=i;

package/dist/BaseRadio/utils.js

@@ -0,0 +1,6 @@
+const t = ({ size: e }) => e === "M" ? "18px" : "20px", r = ({ size: e }) => e === "M" ? "10px" : "12px", i = () => "3px";
+export {
+  t as getRadioSize,
+  i as getSelectedRadioPosition,
+  r as getSelectedRadioSize
+};

package/dist/Box/Box.cjs

@@ -0,0 +1,80 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),s=require("../helpers/handleResponsiveValues.cjs"),t=require("./BoxProps.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},$=d(n),l={color:!0},i=$.default.div.withConfig({shouldForwardProp:(e,o)=>!l[e]&&o(e)})`
+  // Font
+  font-size: ${({fontSize:e,theme:o})=>o.fontSizes[e]||e};
+
+  // Colors
+  background: ${({theme:e,background:o})=>e.colors[o]};
+  color: ${({theme:e,color:o})=>e.colors[o]};
+
+  // Spaces
+  ${({theme:e,padding:o})=>s("padding",o,e)}
+  ${({theme:e,paddingTop:o})=>s("padding-top",o,e)}
+  ${({theme:e,paddingRight:o})=>s("padding-right",o,e)}
+  ${({theme:e,paddingBottom:o})=>s("padding-bottom",o,e)}
+  ${({theme:e,paddingLeft:o})=>s("padding-left",o,e)}
+  ${({theme:e,marginLeft:o})=>s("margin-left",o,e)}
+  ${({theme:e,marginRight:o})=>s("margin-right",o,e)}
+  ${({theme:e,marginTop:o})=>s("margin-top",o,e)}
+  ${({theme:e,marginBottom:o})=>s("margin-bottom",o,e)}
+
+  // Responsive hiding
+  ${({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: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})=>o.colors[e]};
+  border: ${({theme:e,borderColor:o,borderStyle:r,borderWidth:a})=>{if(o&&!r&&!a)return`1px solid ${e.colors[o]}`}};
+
+  // Shadows
+  box-shadow: ${({theme:e,shadow:o})=>e.shadows[o]};
+
+  // Handlers
+  pointer-events: ${({pointerEvents:e})=>e};
+  &:hover {
+    ${({_hover:e,theme:o})=>e?e(o):void 0}
+  }
+
+  // Display
+  display: ${({display:e})=>e};
+
+  // Position
+  position: ${({position:e})=>e};
+  left: ${({left:e,theme:o})=>o.spaces[e]||e};
+  right: ${({right:e,theme:o})=>o.spaces[e]||e};
+  top: ${({top:e,theme:o})=>o.spaces[e]||e};
+  bottom: ${({bottom:e,theme:o})=>o.spaces[e]||e};
+  z-index: ${({zIndex:e})=>e};
+  overflow: ${({overflow:e})=>e};
+  cursor: ${({cursor:e})=>e};
+
+  // Size
+  width: ${({width:e,theme:o})=>o.spaces[e]||e};
+  max-width: ${({maxWidth:e,theme:o})=>o.spaces[e]||e};
+  min-width: ${({minWidth:e,theme:o})=>o.spaces[e]||e};
+  height: ${({height:e,theme:o})=>o.spaces[e]||e};
+  max-height: ${({maxHeight:e,theme:o})=>o.spaces[e]||e};
+  min-height: ${({minHeight:e,theme:o})=>o.spaces[e]||e};
+
+  // Animation
+  transition: ${({transition:e})=>e};
+  transform: ${({transform:e})=>e};
+  animation: ${({animation:e})=>e};
+
+  //Flexbox children props
+  flex-shrink: ${({shrink:e})=>e};
+  flex-grow: ${({grow:e})=>e};
+  flex-basis: ${({basis:e})=>e};
+  flex: ${({flex:e})=>e};
+
+  // Text
+  text-align: ${({textAlign:e})=>e};
+  text-transform: ${({textTransform:e})=>e};
+  line-height: ${({lineHeight:e})=>e};
+
+  // Cursor
+  cursor: ${({cursor:e})=>e};
+`;i.defaultProps=t.boxDefaultProps;i.propTypes=t.boxPropTypes;exports.Box=i;

package/dist/Box/Box.js

@@ -0,0 +1,95 @@
+import a from "styled-components";
+import r from "../helpers/handleResponsiveValues.js";
+import { boxDefaultProps as t, boxPropTypes as n } from "./BoxProps.js";
+const d = {
+  color: !0
+}, i = a.div.withConfig({
+  shouldForwardProp: (o, s) => !d[o] && s(o)
+})`
+  // Font
+  font-size: ${({ fontSize: o, theme: s }) => s.fontSizes[o] || o};
+
+  // Colors
+  background: ${({ theme: o, background: s }) => o.colors[s]};
+  color: ${({ theme: o, color: s }) => o.colors[s]};
+
+  // 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)}
+
+  // 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}
+  
+
+  // 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]}`;
+}};
+
+  // Shadows
+  box-shadow: ${({ theme: o, shadow: s }) => o.shadows[s]};
+
+  // Handlers
+  pointer-events: ${({ pointerEvents: o }) => o};
+  &:hover {
+    ${({ _hover: o, theme: s }) => o ? o(s) : void 0}
+  }
+
+  // Display
+  display: ${({ display: o }) => o};
+
+  // 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};
+
+  // 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};
+
+  // Animation
+  transition: ${({ transition: o }) => o};
+  transform: ${({ transform: o }) => o};
+  animation: ${({ animation: o }) => o};
+
+  //Flexbox children props
+  flex-shrink: ${({ shrink: o }) => o};
+  flex-grow: ${({ grow: o }) => o};
+  flex-basis: ${({ basis: o }) => o};
+  flex: ${({ flex: o }) => o};
+
+  // Text
+  text-align: ${({ textAlign: o }) => o};
+  text-transform: ${({ textTransform: o }) => o};
+  line-height: ${({ lineHeight: o }) => o};
+
+  // Cursor
+  cursor: ${({ cursor: o }) => o};
+`;
+i.defaultProps = t;
+i.propTypes = n;
+export {
+  i as Box
+};

package/dist/Box/BoxProps.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),l=require("prop-types"),a=d=>d&&typeof d=="object"&&"default"in d?d:{default:d},r=a(u),e=a(l),t=d=>r.default.createElement("div",{...d}),o={background:void 0,borderColor:void 0,color:void 0,hiddenS:!1,hiddenXS:!1,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,hasRadius:!1,shadow:void 0,children:null,shrink:void 0,grow:void 0,basis:void 0,flex:void 0,_hover:()=>{}},f={_hover:e.default.func,background:e.default.string,basis:e.default.oneOfType([e.default.string,e.default.string]),borderColor:e.default.string,children:e.default.oneOfType([e.default.node,e.default.string]),color:e.default.string,flex:e.default.oneOfType([e.default.string,e.default.string]),grow:e.default.oneOfType([e.default.string,e.default.string]),hasRadius:e.default.bool,hiddenS:e.default.bool,hiddenXS:e.default.bool,padding:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingBottom:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingLeft:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingRight:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),paddingTop:e.default.oneOfType([e.default.number,e.default.arrayOf(e.default.number)]),shadow:e.default.string,shrink:e.default.oneOfType([e.default.string,e.default.string])};t.defaultProps=o;t.propTypes=f;exports.BoxProps=t;exports.boxDefaultProps=o;exports.boxPropTypes=f;

package/dist/Box/BoxProps.js

@@ -0,0 +1,51 @@
+import n from "react";
+import o from "prop-types";
+const r = (e) => /* @__PURE__ */ n.createElement("div", {
+  ...e
+}), d = {
+  background: void 0,
+  borderColor: void 0,
+  color: void 0,
+  hiddenS: !1,
+  hiddenXS: !1,
+  padding: void 0,
+  paddingTop: void 0,
+  paddingRight: void 0,
+  paddingBottom: void 0,
+  paddingLeft: void 0,
+  hasRadius: !1,
+  shadow: void 0,
+  children: null,
+  shrink: void 0,
+  grow: void 0,
+  basis: void 0,
+  flex: void 0,
+  _hover: () => {
+  }
+}, i = {
+  _hover: o.func,
+  background: o.string,
+  basis: o.oneOfType([o.string, o.string]),
+  borderColor: o.string,
+  children: o.oneOfType([o.node, o.string]),
+  color: o.string,
+  flex: o.oneOfType([o.string, o.string]),
+  grow: o.oneOfType([o.string, o.string]),
+  hasRadius: o.bool,
+  hiddenS: o.bool,
+  hiddenXS: o.bool,
+  padding: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingBottom: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingLeft: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingRight: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  paddingTop: o.oneOfType([o.number, o.arrayOf(o.number)]),
+  shadow: o.string,
+  shrink: o.oneOfType([o.string, o.string])
+};
+r.defaultProps = d;
+r.propTypes = i;
+export {
+  r as BoxProps,
+  d as boxDefaultProps,
+  i as boxPropTypes
+};

package/dist/Box/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Box.cjs");exports.Box=e.Box;

package/dist/Box/index.js

@@ -0,0 +1,4 @@
+import { Box as x } from "./Box.js";
+export {
+  x as Box
+};

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,16 @@
+"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)`
+  svg {
+    height: ${10/16}rem;
+    width: ${10/16}rem;
+    path {
+      fill: ${({theme:e})=>e.colors.neutral500};
+    }
+  }
+  :last-of-type ${s.Box} {
+    display: none;
+  }
+  :last-of-type ${u.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;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,52 @@
+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)`
+  svg {
+    height: ${10 / 16}rem;
+    width: ${10 / 16}rem;
+    path {
+      fill: ${({ theme: e }) => e.colors.neutral500};
+    }
+  }
+  :last-of-type ${l} {
+    display: none;
+  }
+  :last-of-type ${a} {
+    color: ${({ theme: e }) => e.colors.neutral800};
+    font-weight: ${({ theme: e }) => e.fontWeights.bold};
+  }
+`, o = ({ children: e }) => /* @__PURE__ */ r.createElement(f, {
+  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
+};
+export {
+  p as Breadcrumbs,
+  o as Crumb
+};

package/dist/Breadcrumbs/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Breadcrumbs.cjs");exports.Breadcrumbs=e.Breadcrumbs;exports.Crumb=e.Crumb;

package/dist/Breadcrumbs/index.js

@@ -0,0 +1,5 @@
+import { Breadcrumbs as b, Crumb as e } from "./Breadcrumbs.js";
+export {
+  b as Breadcrumbs,
+  e as Crumb
+};

package/dist/Button/Button.cjs

@@ -0,0 +1,48 @@
+"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`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`,R=u.default.div`
+  animation: ${P} 2s infinite linear;
+  will-change: transform;
+`,W=u.default(d.Box)`
+  height: 100%;
+`,b=u.default(E.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]};
+
+  ${d.Box} {
+    display: flex;
+    align-items: center;
+  }
+
+  ${h.Typography} {
+    color: ${({theme:e})=>e.colors.buttonNeutral0};
+  }
+
+  &[aria-disabled='true'] {
+    ${o.getDisabledStyle}
+    &:active {
+      ${o.getDisabledStyle}
+    }
+  }
+  &:hover {
+    ${o.getHoverStyle}
+  }
+  &:active {
+    ${o.getActiveStyle}
+  }
+  ${o.getVariantStyle}
+  ${({fullWidth:e})=>e&&`
+    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;

package/dist/Button/Button.js

@@ -0,0 +1,109 @@
+import o from "react";
+import t from "prop-types";
+import n, { keyframes as S } from "styled-components";
+import B from "@strapi/icons/Loader";
+import { Typography as p } from "../Typography/Typography.js";
+import { Box as l } from "../Box/Box.js";
+import { getDisabledStyle as f, getHoverStyle as E, getActiveStyle as x, getVariantStyle as T } from "./utils.js";
+import { BUTTON_SIZES as k, VARIANTS as R } from "./constants.js";
+import { BaseButton as W } from "../BaseButton/BaseButton.js";
+const I = S`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`, N = n.div`
+  animation: ${I} 2s infinite linear;
+  will-change: transform;
+`, P = n(l)`
+  height: 100%;
+`, w = n(W)`
+  align-items: center;
+  background-color: ${({ theme: e }) => e.colors.buttonPrimary600};
+  border: 1px solid ${({ theme: e }) => e.colors.buttonPrimary600};
+  height: ${({ theme: e, size: r }) => e.sizes.button[r]};
+  padding-left: ${({ theme: e }) => e.spaces[4]};
+  padding-right: ${({ theme: e }) => e.spaces[4]};
+
+  ${l} {
+    display: flex;
+    align-items: center;
+  }
+
+  ${p} {
+    color: ${({ theme: e }) => e.colors.buttonNeutral0};
+  }
+
+  &[aria-disabled='true'] {
+    ${f}
+    &:active {
+      ${f}
+    }
+  }
+  &:hover {
+    ${E}
+  }
+  &:active {
+    ${x}
+  }
+  ${T}
+  ${({ fullWidth: e }) => e && `
+    display: inline-flex;
+    justify-content: center;
+    width: 100%;
+  `}
+`, d = o.forwardRef(
+  ({ variant: e, startIcon: r, endIcon: s, disabled: u, children: g, onClick: c, size: m, loading: i, fullWidth: h, ...b }, y) => {
+    const a = u || i, $ = (v) => {
+      !a && c && c(v);
+    };
+    return /* @__PURE__ */ o.createElement(w, {
+      ref: y,
+      "aria-disabled": a,
+      disabled: a,
+      size: m,
+      variant: e,
+      onClick: $,
+      fullWidth: h,
+      ...b
+    }, (r || i) && /* @__PURE__ */ o.createElement(P, {
+      "aria-hidden": !0,
+      paddingRight: 2
+    }, i ? /* @__PURE__ */ o.createElement(N, null, /* @__PURE__ */ o.createElement(B, null)) : r), /* @__PURE__ */ o.createElement(p, {
+      variant: m === "S" ? "pi" : void 0,
+      fontWeight: "bold",
+      lineHeight: 0
+    }, g), s && /* @__PURE__ */ o.createElement(l, {
+      "aria-hidden": !0,
+      paddingLeft: 2
+    }, s));
+  }
+);
+d.displayName = "Button";
+d.defaultProps = {
+  disabled: !1,
+  endIcon: void 0,
+  fullWidth: !1,
+  loading: !1,
+  onClick: void 0,
+  size: "S",
+  startIcon: void 0,
+  variant: "default"
+};
+d.propTypes = {
+  children: t.node.isRequired,
+  disabled: t.bool,
+  endIcon: t.element,
+  fullWidth: t.bool,
+  loading: t.bool,
+  onClick: t.func,
+  size: t.oneOf(k),
+  startIcon: t.element,
+  variant: t.oneOf(R)
+};
+export {
+  d as Button,
+  w as ButtonWrapper
+};

package/dist/Button/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S="success-light",t="danger-light",s="default",T="tertiary",e="secondary",c="danger",o="success",A="ghost",n=[S,t],E=[s,T,e,c,o,A,...n],I=["S","M","L"];exports.BUTTON_SIZES=I;exports.DANGER=c;exports.DANGER_LIGHT=t;exports.DEFAULT=s;exports.GHOST=A;exports.LIGHT_VARIANTS=n;exports.SECONDARY=e;exports.SUCCESS=o;exports.SUCCESS_LIGHT=S;exports.TERTIARY=T;exports.VARIANTS=E;

package/dist/Button/constants.js

@@ -0,0 +1,14 @@
+const s = "success-light", t = "danger-light", c = "default", n = "tertiary", o = "secondary", S = "danger", T = "success", A = "ghost", e = [s, t], E = [c, n, o, S, T, A, ...e], I = ["S", "M", "L"];
+export {
+  I as BUTTON_SIZES,
+  S as DANGER,
+  t as DANGER_LIGHT,
+  c as DEFAULT,
+  A as GHOST,
+  e as LIGHT_VARIANTS,
+  o as SECONDARY,
+  T as SUCCESS,
+  s as SUCCESS_LIGHT,
+  n as TERTIARY,
+  E as VARIANTS
+};

package/dist/Button/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./Button.cjs");exports.Button=t.Button;exports.ButtonWrapper=t.ButtonWrapper;

package/dist/Button/index.js

@@ -0,0 +1,5 @@
+import { Button as r, ButtonWrapper as p } from "./Button.js";
+export {
+  r as Button,
+  p as ButtonWrapper
+};

package/dist/Button/utils.cjs

@@ -0,0 +1,87 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../Typography/Typography.cjs"),l=require("./constants.cjs"),c=o=>l.LIGHT_VARIANTS.includes(o)?o.substring(0,o.lastIndexOf("-")):o===l.TERTIARY?"neutral":[l.DEFAULT,l.SECONDARY].includes(o)||!l.VARIANTS.includes(o)?"primary":o,u=({theme:o})=>`
+    border: 1px solid ${o.colors.neutral200};
+    background: ${o.colors.neutral150};
+    ${s.Typography} {
+      color: ${o.colors.neutral600};
+    }
+    svg {
+      > g, path {
+        fill: ${o.colors.neutral600};
+      }
+    }
+  `,n=({theme:o,variant:r})=>[...l.LIGHT_VARIANTS,l.SECONDARY].includes(r)?`
+      background-color: ${o.colors.neutral0};
+    `:r===l.TERTIARY?`
+      background-color: ${o.colors.neutral100};
+    `:r===l.GHOST?`
+      background-color: ${o.colors.neutral100};
+    `:r===l.DEFAULT?`
+      border: 1px solid ${o.colors.buttonPrimary500};
+      background: ${o.colors.buttonPrimary500};
+    `:`
+    border: 1px solid ${o.colors[`${c(r)}500`]};
+    background: ${o.colors[`${c(r)}500`]};
+  `,$=({theme:o,variant:r})=>[...l.LIGHT_VARIANTS,l.SECONDARY].includes(r)?`
+      background-color: ${o.colors.neutral0};
+      border: 1px solid ${o.colors[`${c(r)}600`]};
+      ${s.Typography} {
+        color: ${o.colors[`${c(r)}600`]};
+      }
+      svg {
+        > g, path {
+          fill: ${o.colors[`${c(r)}600`]};
+        }
+      }
+    `:r===l.TERTIARY?`
+      background-color: ${o.colors.neutral150};
+    `:`
+    border: 1px solid ${o.colors[`${c(r)}600`]};
+    background: ${o.colors[`${c(r)}600`]};
+  `,e=({theme:o,variant:r})=>{switch(r){case l.DANGER_LIGHT:case l.SUCCESS_LIGHT:case l.SECONDARY:return`
+          border: 1px solid ${o.colors[`${c(r)}200`]};
+          background: ${o.colors[`${c(r)}100`]};
+          ${s.Typography} {
+            color: ${o.colors[`${c(r)}700`]};
+          }
+          svg {
+            > g, path {
+              fill: ${o.colors[`${c(r)}700`]};
+            }
+          }
+        `;case l.TERTIARY:return`
+          border: 1px solid ${o.colors.neutral200};
+          background: ${o.colors.neutral0};
+          ${s.Typography} {
+            color: ${o.colors.neutral800};
+          }
+          svg {
+            > g, path {
+              fill: ${o.colors.neutral800};
+            }
+          }
+        `;case l.GHOST:return`
+        border: 1px solid transparent;
+        background: transparent;
+
+        ${s.Typography} {
+          color: ${o.colors.neutral800};
+        }
+
+        svg {
+          > g, path {
+            fill: ${o.colors.neutral500};
+          }
+        }
+      `;case l.SUCCESS:case l.DANGER:return`
+          border: 1px solid ${o.colors[`${c(r)}600`]};
+          background: ${o.colors[`${c(r)}600`]};
+          ${s.Typography} {
+            color: ${o.colors.neutral0};
+          }
+        `;default:return`
+          svg {
+            > g, path {
+              fill: ${o.colors.buttonNeutral0};
+            }
+          }
+        `}};exports.getActiveStyle=$;exports.getDisabledStyle=u;exports.getHoverStyle=n;exports.getVariantColorName=c;exports.getVariantStyle=e;