@strapi/design-system 0.0.0-599b75fb-test

package/dist/BaseLink/BaseLink.js

@@ -0,0 +1,24 @@
+import { jsx as s } from "react/jsx-runtime";
+import i from "react";
+import l from "styled-components";
+const m = l.a`
+  cursor: pointer;
+`, p = i.forwardRef(({
+  href: o,
+  rel: a = "noreferrer noopener",
+  target: f = "_self",
+  disabled: e = !1,
+  isExternal: r = !1,
+  ...t
+}, n) => s(m, {
+  ref: n,
+  target: r ? "_blank" : f,
+  rel: r ? a : void 0,
+  href: e ? "#" : o,
+  "aria-disabled": e,
+  ...t
+}));
+p.displayName = "BaseLink";
+export {
+  p as BaseLink
+};

package/dist/BaseLink/index.cjs

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

package/dist/BaseLink/index.js

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

package/dist/BaseRadio/BaseRadio.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),r=require("react"),g=require("styled-components"),y=require("./context.cjs"),t=require("./utils.cjs"),R=require("../hooks/useId.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=d(r),h=d(g),x=h.default.input`
+  margin: 0;
+  padding: 0;
+  background-color: ${({theme:e})=>e.colors.neutral0};
+  border: 1px solid ${({theme:e})=>e.colors.primary600};
+  border-radius: 50%;
+  height: ${({size:e})=>typeof e=="number"?e:t.getRadioSize(e)};
+  width: ${({size:e})=>typeof e=="number"?e:t.getRadioSize(e)};
+  -webkit-appearance: none;
+
+  &:after {
+    border-radius: 50%;
+    content: '';
+    position: relative;
+    z-index: 1;
+    display: block;
+    height: ${({size:e})=>typeof e=="number"?e:t.getSelectedRadioSize(e)};
+    width: ${({size:e})=>typeof e=="number"?e:t.getSelectedRadioSize(e)};
+    left: ${t.getSelectedRadioPosition};
+    top: ${t.getSelectedRadioPosition};
+  }
+
+  &:checked:after {
+    background: ${({theme:e})=>e.colors.primary600};
+  }
+
+  &:disabled {
+    border: 1px solid ${({theme:e})=>e.colors.neutral300};
+    background: ${({theme:e})=>e.colors.neutral200};
+  }
+`,a=m.default.forwardRef(({value:e,disabled:n=!1,...i},c)=>{const s=R.useId(),{onChange:l,selected:u,name:p,size:f}=r.useContext(y.RadioContext),o=u===e;return b.jsx(x,{ref:c,type:"radio",name:p,value:e,tabIndex:o?0:-1,"aria-checked":o,checked:o,disabled:n,id:s,size:f,onChange:l,...i})});a.displayName="Radio";exports.BaseRadio=a;

package/dist/BaseRadio/BaseRadio.js

@@ -0,0 +1,84 @@
+import { jsx as f } from "react/jsx-runtime";
+import u, { useContext as b } from "react";
+import g from "styled-components";
+import { RadioContext as h } from "./context.js";
+import { getRadioSize as r, getSelectedRadioSize as t, getSelectedRadioPosition as d } from "./utils.js";
+import { useId as $ } from "../hooks/useId.js";
+const y = g.input`
+  margin: 0;
+  padding: 0;
+  background-color: ${({
+  theme: e
+}) => e.colors.neutral0};
+  border: 1px solid ${({
+  theme: e
+}) => e.colors.primary600};
+  border-radius: 50%;
+  height: ${({
+  size: e
+}) => typeof e == "number" ? e : r(e)};
+  width: ${({
+  size: e
+}) => typeof e == "number" ? e : r(e)};
+  -webkit-appearance: none;
+
+  &:after {
+    border-radius: 50%;
+    content: '';
+    position: relative;
+    z-index: 1;
+    display: block;
+    height: ${({
+  size: e
+}) => typeof e == "number" ? e : t(e)};
+    width: ${({
+  size: e
+}) => typeof e == "number" ? e : t(e)};
+    left: ${d};
+    top: ${d};
+  }
+
+  &:checked:after {
+    background: ${({
+  theme: e
+}) => e.colors.primary600};
+  }
+
+  &:disabled {
+    border: 1px solid ${({
+  theme: e
+}) => e.colors.neutral300};
+    background: ${({
+  theme: e
+}) => e.colors.neutral200};
+  }
+`, R = u.forwardRef(({
+  value: e,
+  disabled: a = !1,
+  ...n
+}, i) => {
+  const c = $(), {
+    onChange: l,
+    selected: p,
+    name: m,
+    size: s
+  } = b(h), o = p === e;
+  return f(y, {
+    ref: i,
+    type: "radio",
+    name: m,
+    value: e,
+    tabIndex: o ? 0 : -1,
+    "aria-checked": o,
+    checked: o,
+    disabled: a,
+    id: c,
+    size: s,
+    onChange: l,
+    ...n
+  });
+});
+R.displayName = "Radio";
+export {
+  R as BaseRadio
+};

package/dist/BaseRadio/RadioGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),r=require("react"),l=require("./context.cjs"),x=require("../helpers/setTabIndexOnFirstItem.cjs"),b=({children:n,labelledBy:u,onChange:o,value:e="",size:s="M",name:t,...d})=>{const i=r.useRef(null);r.useLayoutEffect(()=>{e||x.setTabIndexOnFirstItem(i.current,`[name="${t}"]`)},[e,t]);const a=r.useMemo(()=>({onChange:o,selected:e,name:t,size:s}),[t,o,s,e]);return c.jsx(l.RadioContext.Provider,{value:a,children:c.jsx("div",{ref:i,role:"radiogroup","aria-labelledby":u,...d,children:n})})};exports.RadioGroup=b;

package/dist/BaseRadio/RadioGroup.js

@@ -0,0 +1,37 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as n, useLayoutEffect as p, useMemo as u } from "react";
+import { RadioContext as l } from "./context.js";
+import { setTabIndexOnFirstItem as x } from "../helpers/setTabIndexOnFirstItem.js";
+const G = ({
+  children: f,
+  labelledBy: c,
+  onChange: t,
+  value: r = "",
+  size: e = "M",
+  name: o,
+  ...s
+}) => {
+  const i = n(null);
+  p(() => {
+    r || x(i.current, `[name="${o}"]`);
+  }, [r, o]);
+  const m = u(() => ({
+    onChange: t,
+    selected: r,
+    name: o,
+    size: e
+  }), [o, t, e, r]);
+  return d(l.Provider, {
+    value: m,
+    children: d("div", {
+      ref: i,
+      role: "radiogroup",
+      "aria-labelledby": c,
+      ...s,
+      children: f
+    })
+  });
+};
+export {
+  G 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:void 0,name:"",size:"M",selected:""});exports.RadioContext=t;

package/dist/BaseRadio/context.js

@@ -0,0 +1,10 @@
+import { createContext as e } from "react";
+const n = e({
+  onChange: void 0,
+  name: "",
+  size: "M",
+  selected: ""
+});
+export {
+  n 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=e=>e==="M"?"18px":"20px",i=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 = (e) => e === "M" ? "18px" : "20px", r = (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,79 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(n),l={color:!0,cursor:!0,height:!0,width:!0},m=d.default.div.withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+  // Font
+  font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
+
+  // Colors
+  background: ${({theme:e,background:t})=>r.extractStyleFromTheme(e.colors,t,t)};
+  color: ${({theme:e,color:t})=>r.extractStyleFromTheme(e.colors,t,void 0)};
+
+  // Spaces
+  ${({theme:e,padding:t})=>o("padding",t,e)}
+  ${({theme:e,paddingTop:t})=>o("padding-top",t,e)}
+  ${({theme:e,paddingRight:t})=>o("padding-right",t,e)}
+  ${({theme:e,paddingBottom:t})=>o("padding-bottom",t,e)}
+  ${({theme:e,paddingLeft:t})=>o("padding-left",t,e)}
+  ${({theme:e,marginLeft:t})=>o("margin-left",t,e)}
+  ${({theme:e,marginRight:t})=>o("margin-right",t,e)}
+  ${({theme:e,marginTop:t})=>o("margin-top",t,e)}
+  ${({theme:e,marginBottom:t})=>o("margin-bottom",t,e)}
+
+  // Responsive hiding
+  ${({theme:e,hiddenS:t})=>t?`${e.mediaQueries.tablet} { display: none; }`:void 0}
+  ${({theme:e,hiddenXS:t})=>t?`${e.mediaQueries.mobile} { display: none; }`:void 0}
+  
+
+  // Borders
+  border-radius: ${({theme:e,hasRadius:t,borderRadius:s})=>t?e.borderRadius:s};
+  border-style: ${({borderStyle:e})=>e};
+  border-width: ${({borderWidth:e})=>e};
+  border-color: ${({borderColor:e,theme:t})=>r.extractStyleFromTheme(t.colors,e,void 0)};
+  border: ${({theme:e,borderColor:t,borderStyle:s,borderWidth:i})=>{if(t&&!s&&typeof i>"u")return`1px solid ${e.colors[t]}`}};
+
+  // Shadows
+  box-shadow: ${({theme:e,shadow:t})=>r.extractStyleFromTheme(e.shadows,t,void 0)};
+
+  // Handlers
+  pointer-events: ${({pointerEvents:e})=>e};
+  &:hover {
+    ${({_hover:e,theme:t})=>e?e(t):void 0}
+  }
+
+  // Display
+  display: ${({display:e})=>e};
+
+  // Position
+  position: ${({position:e})=>e};
+  left: ${({left:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  right: ${({right:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  top: ${({top:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  bottom: ${({bottom:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  z-index: ${({zIndex:e})=>e};
+  overflow: ${({overflow:e})=>e};
+
+  // Size
+  width: ${({width:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  max-width: ${({maxWidth:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  min-width: ${({minWidth:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  height: ${({height:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  max-height: ${({maxHeight:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  min-height: ${({minHeight:e,theme:t})=>r.extractStyleFromTheme(t.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};
+`;exports.Box=m;

package/dist/Box/Box.js

@@ -0,0 +1,221 @@
+import d from "styled-components";
+import r from "../helpers/handleResponsiveValues.js";
+import { extractStyleFromTheme as s } from "../helpers/theme.js";
+const t = {
+  color: !0,
+  cursor: !0,
+  height: !0,
+  width: !0
+}, l = d.div.withConfig({
+  shouldForwardProp: (e, o) => !t[e] && o(e)
+})`
+  // Font
+  font-size: ${({
+  fontSize: e,
+  theme: o
+}) => s(o.fontSizes, e, e)};
+
+  // Colors
+  background: ${({
+  theme: e,
+  background: o
+}) => s(e.colors, o, o)};
+  color: ${({
+  theme: e,
+  color: o
+}) => s(e.colors, o, void 0)};
+
+  // Spaces
+  ${({
+  theme: e,
+  padding: o
+}) => r("padding", o, e)}
+  ${({
+  theme: e,
+  paddingTop: o
+}) => r("padding-top", o, e)}
+  ${({
+  theme: e,
+  paddingRight: o
+}) => r("padding-right", o, e)}
+  ${({
+  theme: e,
+  paddingBottom: o
+}) => r("padding-bottom", o, e)}
+  ${({
+  theme: e,
+  paddingLeft: o
+}) => r("padding-left", o, e)}
+  ${({
+  theme: e,
+  marginLeft: o
+}) => r("margin-left", o, e)}
+  ${({
+  theme: e,
+  marginRight: o
+}) => r("margin-right", o, e)}
+  ${({
+  theme: e,
+  marginTop: o
+}) => r("margin-top", o, e)}
+  ${({
+  theme: e,
+  marginBottom: o
+}) => r("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: i
+}) => o ? e.borderRadius : i};
+  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: i,
+  borderWidth: n
+}) => {
+  if (o && !i && typeof n > "u")
+    return `1px solid ${e.colors[o]}`;
+}};
+
+  // Shadows
+  box-shadow: ${({
+  theme: e,
+  shadow: o
+}) => s(e.shadows, o, void 0)};
+
+  // 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
+}) => 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: 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: 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};
+`;
+export {
+  l as Box
+};

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 r=require("react/jsx-runtime"),d=require("@strapi/icons"),u=require("styled-components"),t=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),i=require("../Typography/Typography.cjs"),c=require("../VisuallyHidden/VisuallyHidden.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=p(u),h=y.default(s.Flex)`
+  svg {
+    height: ${10/16}rem;
+    width: ${10/16}rem;
+    path {
+      fill: ${({theme:e})=>e.colors.neutral500};
+    }
+  }
+  :last-of-type ${t.Box} {
+    display: none;
+  }
+  :last-of-type ${i.Typography} {
+    color: ${({theme:e})=>e.colors.neutral800};
+    font-weight: ${({theme:e})=>e.fontWeights.bold};
+  }
+`,l=({children:e})=>r.jsxs(h,{inline:!0,as:"li",children:[r.jsx(i.Typography,{variant:"pi",textColor:"neutral600",children:e}),r.jsx(t.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3,children:r.jsx(d.ChevronRight,{})})]});l.displayName="Crumb";const o=({children:e,label:n,...a})=>r.jsxs(s.Flex,{...a,children:[r.jsx(c.VisuallyHidden,{children:n}),r.jsx("ol",{"aria-hidden":!0,children:e})]});o.displayName="Breadcrumbs";exports.Breadcrumbs=o;exports.Crumb=l;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,63 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { ChevronRight as d } from "@strapi/icons";
+import m from "styled-components";
+import { Box as o } from "../Box/Box.js";
+import { Flex as t } from "../Flex/Flex.js";
+import { Typography as l } from "../Typography/Typography.js";
+import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
+const s = m(t)`
+  svg {
+    height: ${10 / 16}rem;
+    width: ${10 / 16}rem;
+    path {
+      fill: ${({
+  theme: r
+}) => r.colors.neutral500};
+    }
+  }
+  :last-of-type ${o} {
+    display: none;
+  }
+  :last-of-type ${l} {
+    color: ${({
+  theme: r
+}) => r.colors.neutral800};
+    font-weight: ${({
+  theme: r
+}) => r.fontWeights.bold};
+  }
+`, h = ({
+  children: r
+}) => i(s, {
+  inline: !0,
+  as: "li",
+  children: [e(l, {
+    variant: "pi",
+    textColor: "neutral600",
+    children: r
+  }), e(o, {
+    "aria-hidden": !0,
+    paddingLeft: 3,
+    paddingRight: 3,
+    children: e(d, {})
+  })]
+});
+h.displayName = "Crumb";
+const c = ({
+  children: r,
+  label: n,
+  ...a
+}) => i(t, {
+  ...a,
+  children: [e(p, {
+    children: n
+  }), e("ol", {
+    "aria-hidden": !0,
+    children: r
+  })]
+});
+c.displayName = "Breadcrumbs";
+export {
+  c as Breadcrumbs,
+  h 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,31 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),q=require("react"),v=require("@strapi/icons"),l=require("styled-components"),d=require("./constants.cjs"),r=require("./utils.cjs"),S=require("../BaseButton/BaseButton.cjs"),T=require("../Box/Box.cjs"),_=require("../Flex/Flex.cjs"),$=require("../Typography/Typography.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},D=f(q),p=f(l),F=l.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`,L=p.default.div`
+  animation: ${F} 2s infinite linear;
+  will-change: transform;
+`,y=p.default(S.BaseButton)`
+  height: ${({theme:e,size:n})=>e.sizes.button[n]};
+
+  &[aria-disabled='true'] {
+    ${r.getDisabledStyle}
+
+    &:active {
+      ${r.getDisabledStyle}
+    }
+  }
+
+  &:hover {
+    ${r.getHoverStyle}
+  }
+
+  &:active {
+    ${r.getActiveStyle}
+  }
+
+  ${r.getVariantStyle}
+`,g=D.default.forwardRef(({variant:e=d.DEFAULT,startIcon:n,endIcon:s,disabled:h=!1,children:B,onClick:c,size:u=d.BUTTON_SIZES[0],loading:i=!1,fullWidth:a=!1,...j},x)=>{const o=h||i,b=m=>{!o&&c&&c(m)};return t.jsxs(y,{ref:x,"aria-disabled":o,disabled:o,size:u,variant:e,onClick:b,fullWidth:a,alignItems:"center",background:"buttonPrimary600",borderColor:"buttonPrimary600",gap:2,inline:a,justifyContent:a?"center":void 0,paddingLeft:4,paddingRight:4,width:a?"100%":void 0,...j,children:[(n||i)&&t.jsx(T.Box,{"aria-hidden":!0,children:i?t.jsx(L,{children:t.jsx(v.Loader,{})}):n}),t.jsx($.Typography,{variant:u==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,textColor:"buttonNeutral0",children:B}),s&&t.jsx(_.Flex,{"aria-hidden":!0,children:s})]})});g.displayName="Button";exports.Button=g;exports.ButtonWrapper=y;