@strapi/design-system 1.5.0-alpha.0 → 1.6.0-alpha.0

package/dist/Accordion/AccordionToggle.js

@@ -1,16 +1,15 @@
-import e, { useRef as A } from "react";
-import a from "prop-types";
-import I from "@strapi/icons/CarretDown";
-import x from "styled-components";
-import { TextButton as S } from "../TextButton/TextButton.js";
-import { Typography as W } from "../Typography/Typography.js";
-import { AccordionTypography as j } from "./Accordion.js";
-import { useAccordion as D } from "./AccordionContext.js";
+import { jsx as i, jsxs as c, Fragment as R } from "react/jsx-runtime";
+import { CarretDown as A } from "@strapi/icons";
+import y from "styled-components";
+import { TextButton as I } from "../TextButton/TextButton.js";
+import { Typography as S } from "../Typography/Typography.js";
 import { Flex as $ } from "../Flex/Flex.js";
 import { Stack as b } from "../Stack/Stack.js";
-import { Icon as F } from "../Icon/Icon.js";
+import { Icon as W } from "../Icon/Icon.js";
+import { AccordionTypography as D } from "./Accordion.js";
+import { useAccordion as F } from "./AccordionContext.js";
 import { getBackground as L } from "./utils.js";
-const O = x(S)`
+const P = y(I)`
   text-align: left;
 
   // necessary to make the ellipsis prop work on the title
@@ -23,105 +22,125 @@ const O = x(S)`
     height: ${14 / 16}rem;
 
     path {
-      fill: ${({ theme: o, expanded: t }) => t ? o.colors.primary600 : o.colors.neutral500};
+      fill: ${({
+  theme: o,
+  expanded: e
+}) => e ? o.colors.primary600 : o.colors.neutral500};
     }
   }
-`, _ = x($)`
-  min-height: ${({ theme: o, size: t }) => o.sizes.accordions[t]};
-  border-radius: ${({ theme: o, expanded: t }) => t ? `${o.borderRadius} ${o.borderRadius} 0 0` : o.borderRadius};
+`, U = y($)`
+  min-height: ${({
+  theme: o,
+  size: e
+}) => o.sizes.accordions[e]};
+  border-radius: ${({
+  theme: o,
+  expanded: e
+}) => e ? `${o.borderRadius} ${o.borderRadius} 0 0` : o.borderRadius};
 
   &:hover {
     svg {
       path {
-        fill: ${({ theme: o }) => o.colors.primary600};
+        fill: ${({
+  theme: o
+}) => o.colors.primary600};
       }
     }
   }
-`, w = ({ title: o, description: t, as: v, togglePosition: l, action: c, ...C }) => {
-  const p = A(null), { onToggle: m, toggle: g, expanded: r, id: s, size: i, variant: T, disabled: n } = D(), k = `accordion-content-${s}`, u = `accordion-label-${s}`, E = `accordion-desc-${s}`, d = i === "M" ? 6 : 4, f = i === "M" ? d : d - 2, R = L({ expanded: r, disabled: n, variant: T }), z = {
-    as: v,
-    fontWeight: i === "S" ? "bold" : void 0,
-    id: u,
+`, Z = ({
+  title: o,
+  description: e,
+  as: w = "span",
+  togglePosition: d = "right",
+  action: p,
+  ...C
+}) => {
+  const {
+    onToggle: l,
+    toggle: g,
+    expanded: r,
+    id: s,
+    size: t,
+    variant: k,
+    disabled: n
+  } = F(), T = `accordion-content-${s}`, m = `accordion-label-${s}`, z = `accordion-desc-${s}`, a = t === "M" ? 6 : 4, h = t === "M" ? a : a - 2, v = L({
+    expanded: r,
+    disabled: n,
+    variant: k
+  }), j = {
+    as: w,
+    fontWeight: t === "S" ? "bold" : void 0,
+    id: m,
     textColor: r ? "primary600" : "neutral700",
     ellipsis: !0,
-    variant: i === "M" ? "delta" : void 0
-  }, B = r ? "primary600" : "neutral600", P = r ? "primary200" : "neutral200", h = i === "M" ? `${32 / 16}rem` : `${24 / 16}rem`, M = () => {
-    n || (g && !m ? (console.warn(
-      'Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'
-    ), g()) : m());
-  }, y = /* @__PURE__ */ e.createElement($, {
+    variant: t === "M" ? "delta" : void 0
+  }, B = r ? "primary600" : "neutral600", M = r ? "primary200" : "neutral200", u = t === "M" ? `${32 / 16}rem` : `${24 / 16}rem`, f = () => {
+    n || (g && !l ? (console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'), g()) : l && l());
+  }, x = i($, {
     justifyContent: "center",
     borderRadius: "50%",
-    height: h,
-    width: h,
+    height: u,
+    width: u,
     transform: r ? "rotate(180deg)" : void 0,
     "data-strapi-dropdown": !0,
-    disabled: n,
     "aria-hidden": !0,
     as: "span",
-    background: P,
+    background: M,
     cursor: n ? "not-allowed" : "pointer",
-    onClick: () => p?.current?.click(),
-    shrink: 0
-  }, /* @__PURE__ */ e.createElement(F, {
-    as: I,
-    width: i === "M" ? `${11 / 16}rem` : `${8 / 16}rem`,
-    color: r ? "primary600" : "neutral600"
-  }));
-  return /* @__PURE__ */ e.createElement(_, {
-    paddingBottom: f,
-    paddingLeft: d,
-    paddingRight: d,
-    paddingTop: f,
-    background: R,
+    onClick: f,
+    shrink: 0,
+    children: i(W, {
+      as: A,
+      width: t === "M" ? `${11 / 16}rem` : `${8 / 16}rem`,
+      color: r ? "primary600" : "neutral600"
+    })
+  });
+  return i(U, {
+    paddingBottom: h,
+    paddingLeft: a,
+    paddingRight: a,
+    paddingTop: h,
+    background: v,
     expanded: r,
-    size: i,
+    size: t,
     justifyContent: "space-between",
-    cursor: n ? "not-allowed" : ""
-  }, /* @__PURE__ */ e.createElement(b, {
-    horizontal: !0,
-    spacing: 3,
-    flex: 1,
-    maxWidth: "100%"
-  }, l === "left" && y, /* @__PURE__ */ e.createElement(O, {
-    ref: p,
-    onClick: M,
-    "aria-disabled": n,
-    "aria-expanded": r,
-    "aria-controls": k,
-    "aria-labelledby": u,
-    "data-strapi-accordion-toggle": !0,
-    expanded: r,
-    type: "button",
-    flex: 1,
-    minWidth: 0,
-    ...C
-  }, /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(j, {
-    ...z
-  }, o), t && /* @__PURE__ */ e.createElement(W, {
-    as: "p",
-    id: E,
-    textColor: B
-  }, t))), l === "right" && /* @__PURE__ */ e.createElement(b, {
-    horizontal: !0,
-    spacing: 3
-  }, y, c), l === "left" && c));
-};
-w.defaultProps = {
-  action: void 0,
-  as: "span",
-  description: void 0,
-  variant: "primary",
-  togglePosition: "right"
-};
-w.propTypes = {
-  action: a.node,
-  as: a.string,
-  description: a.string,
-  title: a.string.isRequired,
-  togglePosition: a.oneOf(["right", "left"]),
-  variant: a.oneOf(["primary", "secondary"])
+    cursor: n ? "not-allowed" : "",
+    children: c(b, {
+      horizontal: !0,
+      spacing: 3,
+      flex: 1,
+      maxWidth: "100%",
+      children: [d === "left" && x, i(P, {
+        onClick: f,
+        "aria-disabled": n,
+        "aria-expanded": r,
+        "aria-controls": T,
+        "aria-labelledby": m,
+        "data-strapi-accordion-toggle": !0,
+        expanded: r,
+        type: "button",
+        flex: 1,
+        minWidth: 0,
+        ...C,
+        children: c(R, {
+          children: [i(D, {
+            ...j,
+            children: o
+          }), e && i(S, {
+            as: "p",
+            id: z,
+            textColor: B,
+            children: e
+          })]
+        })
+      }), d === "right" && c(b, {
+        horizontal: !0,
+        spacing: 3,
+        children: [x, p]
+      }), d === "left" && p]
+    })
+  });
 };
 export {
-  w as AccordionToggle
+  Z as AccordionToggle
 };

package/dist/Accordion/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=({expanded:r,disabled:t,variant:u})=>{let e;return r?e="primary100":t?e="neutral150":u==="primary"?e="neutral0":e="neutral100",e};exports.getBackground=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=({expanded:r,disabled:t,variant:u})=>{let e="neutral100";return r?e="primary100":t?e="neutral150":u==="primary"&&(e="neutral0"),e};exports.getBackground=a;

package/dist/Accordion/utils.js

@@ -1,7 +1,7 @@
-const l = ({ expanded: r, disabled: t, variant: a }) => {
-  let e;
-  return r ? e = "primary100" : t ? e = "neutral150" : a === "primary" ? e = "neutral0" : e = "neutral100", e;
+const n = ({ expanded: e, disabled: t, variant: a }) => {
+  let r = "neutral100";
+  return e ? r = "primary100" : t ? r = "neutral150" : a === "primary" && (r = "neutral0"), r;
 };
 export {
-  l as getBackground
+  n as getBackground
 };

package/dist/Alert/Alert.cjs

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),y=require("prop-types"),C=require("styled-components"),E=require("@strapi/icons/Information"),q=require("@strapi/icons/CheckCircle"),B=require("@strapi/icons/ExclamationMarkCircle"),_=require("@strapi/icons/Cross"),l=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),s=require("./utils.cjs"),R=require("../themes/utils.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(x),r=a(y),d=a(C),T=a(E),$=a(q),k=a(B),w=a(_),A=d.default(l.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("styled-components"),a=require("@strapi/icons"),o=require("../Box/Box.cjs"),i=require("../Typography/Typography.cjs"),g=require("../Flex/Flex.cjs"),f=require("../themes/utils.cjs"),s=require("./utils.cjs"),j=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=j(h),y=l.default(o.Box)`
   flex: 1;
   flex-wrap: wrap;
   display: flex;
   flex-direction: row;
-`,I=d.default(l.Box)`
+`,B=l.default(o.Box)`
   border: 1px solid ${s.handleBorderColor};
   background: ${s.handleBackgroundColor};
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
-`,j=d.default.button`
+`,m=l.default.button`
   border: none;
   background: transparent;
   font-size: ${12/16}rem;
@@ -15,13 +15,13 @@
     fill: ${({theme:e})=>e.colors.neutral700};
   }
   margin-top: ${({theme:e})=>e.spaces[1]};
-  ${R.buttonFocusStyle};
-`,v=d.default(l.Box)`
+  ${f.buttonFocusStyle};
+`,C=l.default(o.Box)`
   font-size: ${20/16}rem;
   svg path {
     fill: ${s.handleIconColor};
   }
-`,f=({variant:e,...o})=>e==="success"?t.default.createElement($.default,{...o}):e==="danger"||e==="warning"?t.default.createElement(k.default,{...o}):t.default.createElement(T.default,{...o}),F=d.default(l.Box)`
+`,b=({variant:e,...r})=>e==="success"?t.jsx(a.CheckCircle,{...r}):e==="danger"||e==="warning"?t.jsx(a.ExclamationMarkCircle,{...r}):t.jsx(a.Information,{...r}),$=l.default(o.Box)`
   // Checked with the designers, validated
   padding-top: 1px;
 
@@ -32,4 +32,4 @@
       fill: ${s.handleIconColor};
     }
   }
-`,i=({title:e,children:o,variant:n,onClose:p,closeLabel:g,titleAs:h,action:c,...m})=>t.default.createElement(I,{hasRadius:!0,paddingLeft:5,paddingRight:6,paddingTop:5,variant:n,...m},t.default.createElement(b.Flex,{alignItems:"flex-start"},t.default.createElement(v,{paddingRight:3,variant:n},t.default.createElement(f,{variant:n,"aria-hidden":!0})),t.default.createElement(A,{role:n==="danger"?"alert":"status"},t.default.createElement(l.Box,{paddingBottom:2,paddingRight:1},t.default.createElement(u.Typography,{fontWeight:"bold",textColor:"neutral800",as:h},e)),t.default.createElement(l.Box,{paddingBottom:c?2:5,paddingRight:2},t.default.createElement(u.Typography,{as:"p",textColor:"neutral800"},o)),c&&t.default.createElement(F,{paddingBottom:5,variant:n},c)),t.default.createElement(j,{onClick:p,"aria-label":g},t.default.createElement(w.default,{"aria-hidden":!0}))));i.defaultProps={action:void 0,variant:"default",titleAs:"p"};i.propTypes={action:r.default.element,children:r.default.node.isRequired,closeLabel:r.default.string.isRequired,onClose:r.default.func.isRequired,title:r.default.string.isRequired,titleAs:r.default.string,variant:r.default.oneOf(["danger","success","default","warning"])};f.propTypes={variant:i.propTypes.variant.isRequired};exports.Alert=i;
+`,q=({title:e,children:r,variant:n="default",onClose:c,closeLabel:u,titleAs:x="p",action:d,...p})=>t.jsx(B,{hasRadius:!0,paddingLeft:5,paddingRight:6,paddingTop:5,variant:n,...p,children:t.jsxs(g.Flex,{alignItems:"flex-start",children:[t.jsx(C,{paddingRight:3,variant:n,children:t.jsx(b,{variant:n,"aria-hidden":!0})}),t.jsxs(y,{role:n==="danger"?"alert":"status",children:[t.jsx(o.Box,{paddingBottom:2,paddingRight:1,children:t.jsx(i.Typography,{fontWeight:"bold",textColor:"neutral800",as:x,children:e})}),t.jsx(o.Box,{paddingBottom:d?2:5,paddingRight:2,children:t.jsx(i.Typography,{as:"p",textColor:"neutral800",children:r})}),d&&t.jsx($,{paddingBottom:5,variant:n,children:d})]}),t.jsx(m,{onClick:c,"aria-label":u,children:t.jsx(a.Cross,{"aria-hidden":!0})})]})});exports.Alert=q;

package/dist/Alert/Alert.js

@@ -1,111 +1,118 @@
-import e from "react";
-import r from "prop-types";
-import i from "styled-components";
-import h from "@strapi/icons/Information";
-import E from "@strapi/icons/CheckCircle";
-import x from "@strapi/icons/ExclamationMarkCircle";
-import C from "@strapi/icons/Cross";
-import { Box as o } from "../Box/Box.js";
-import { Typography as p } from "../Typography/Typography.js";
-import { Flex as R } from "../Flex/Flex.js";
-import { handleBorderColor as $, handleBackgroundColor as b, handleIconColor as d } from "./utils.js";
-import { buttonFocusStyle as y } from "../themes/utils.js";
-const w = i(o)`
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import d from "styled-components";
+import { Cross as f, CheckCircle as m, ExclamationMarkCircle as u, Information as x } from "@strapi/icons";
+import { Box as t } from "../Box/Box.js";
+import { Typography as s } from "../Typography/Typography.js";
+import { Flex as C } from "../Flex/Flex.js";
+import { buttonFocusStyle as $ } from "../themes/utils.js";
+import { handleBorderColor as b, handleBackgroundColor as B, handleIconColor as l } from "./utils.js";
+const w = d(t)`
   flex: 1;
   flex-wrap: wrap;
   display: flex;
   flex-direction: row;
-`, B = i(o)`
-  border: 1px solid ${$};
-  background: ${b};
-  box-shadow: ${({ theme: t }) => t.shadows.filterShadow};
-`, A = i.button`
+`, k = d(t)`
+  border: 1px solid ${b};
+  background: ${B};
+  box-shadow: ${({
+  theme: o
+}) => o.shadows.filterShadow};
+`, y = d.button`
   border: none;
   background: transparent;
   font-size: ${12 / 16}rem;
   svg path {
-    fill: ${({ theme: t }) => t.colors.neutral700};
+    fill: ${({
+  theme: o
+}) => o.colors.neutral700};
   }
-  margin-top: ${({ theme: t }) => t.spaces[1]};
-  ${y};
-`, k = i(o)`
+  margin-top: ${({
+  theme: o
+}) => o.spaces[1]};
+  ${$};
+`, A = d(t)`
   font-size: ${20 / 16}rem;
   svg path {
-    fill: ${d};
+    fill: ${l};
   }
-`, m = ({ variant: t, ...n }) => t === "success" ? /* @__PURE__ */ e.createElement(E, {
-  ...n
-}) : t === "danger" || t === "warning" ? /* @__PURE__ */ e.createElement(x, {
-  ...n
-}) : /* @__PURE__ */ e.createElement(h, {
-  ...n
-}), T = i(o)`
+`, I = ({
+  variant: o,
+  ...e
+}) => o === "success" ? r(m, {
+  ...e
+}) : o === "danger" || o === "warning" ? r(u, {
+  ...e
+}) : r(x, {
+  ...e
+}), R = d(t)`
   // Checked with the designers, validated
   padding-top: 1px;
 
   & a > span {
-    color: ${d};
+    color: ${l};
 
     svg path {
-      fill: ${d};
+      fill: ${l};
     }
   }
-`, s = ({ title: t, children: n, variant: a, onClose: c, closeLabel: f, titleAs: g, action: l, ...u }) => /* @__PURE__ */ e.createElement(B, {
+`, L = ({
+  title: o,
+  children: e,
+  variant: n = "default",
+  onClose: p,
+  closeLabel: c,
+  titleAs: h = "p",
+  action: i,
+  ...g
+}) => r(k, {
   hasRadius: !0,
   paddingLeft: 5,
   paddingRight: 6,
   paddingTop: 5,
-  variant: a,
-  ...u
-}, /* @__PURE__ */ e.createElement(R, {
-  alignItems: "flex-start"
-}, /* @__PURE__ */ e.createElement(k, {
-  paddingRight: 3,
-  variant: a
-}, /* @__PURE__ */ e.createElement(m, {
-  variant: a,
-  "aria-hidden": !0
-})), /* @__PURE__ */ e.createElement(w, {
-  role: a === "danger" ? "alert" : "status"
-}, /* @__PURE__ */ e.createElement(o, {
-  paddingBottom: 2,
-  paddingRight: 1
-}, /* @__PURE__ */ e.createElement(p, {
-  fontWeight: "bold",
-  textColor: "neutral800",
-  as: g
-}, t)), /* @__PURE__ */ e.createElement(o, {
-  paddingBottom: l ? 2 : 5,
-  paddingRight: 2
-}, /* @__PURE__ */ e.createElement(p, {
-  as: "p",
-  textColor: "neutral800"
-}, n)), l && /* @__PURE__ */ e.createElement(T, {
-  paddingBottom: 5,
-  variant: a
-}, l)), /* @__PURE__ */ e.createElement(A, {
-  onClick: c,
-  "aria-label": f
-}, /* @__PURE__ */ e.createElement(C, {
-  "aria-hidden": !0
-}))));
-s.defaultProps = {
-  action: void 0,
-  variant: "default",
-  titleAs: "p"
-};
-s.propTypes = {
-  action: r.element,
-  children: r.node.isRequired,
-  closeLabel: r.string.isRequired,
-  onClose: r.func.isRequired,
-  title: r.string.isRequired,
-  titleAs: r.string,
-  variant: r.oneOf(["danger", "success", "default", "warning"])
-};
-m.propTypes = {
-  variant: s.propTypes.variant.isRequired
-};
+  variant: n,
+  ...g,
+  children: a(C, {
+    alignItems: "flex-start",
+    children: [r(A, {
+      paddingRight: 3,
+      variant: n,
+      children: r(I, {
+        variant: n,
+        "aria-hidden": !0
+      })
+    }), a(w, {
+      role: n === "danger" ? "alert" : "status",
+      children: [r(t, {
+        paddingBottom: 2,
+        paddingRight: 1,
+        children: r(s, {
+          fontWeight: "bold",
+          textColor: "neutral800",
+          as: h,
+          children: o
+        })
+      }), r(t, {
+        paddingBottom: i ? 2 : 5,
+        paddingRight: 2,
+        children: r(s, {
+          as: "p",
+          textColor: "neutral800",
+          children: e
+        })
+      }), i && r(R, {
+        paddingBottom: 5,
+        variant: n,
+        children: i
+      })]
+    }), r(y, {
+      onClick: p,
+      "aria-label": c,
+      children: r(f, {
+        "aria-hidden": !0
+      })
+    })]
+  })
+});
 export {
-  s as Alert
+  L as Alert
 };

package/dist/Avatar/Avatar.cjs

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),f=require("styled-components"),v=require("prop-types"),t=require("./constants.cjs"),g=require("../Typography/Typography.cjs"),h=require("../Flex/Flex.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=s(c),o=s(f),a=s(v),y=o.default.img`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),l=require("react"),u=require("styled-components"),c=require("../Typography/Typography.cjs"),d=require("../Flex/Flex.cjs"),t=require("./constants.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=p(u),h=i.default.img`
   border-radius: 50%;
   object-fit: cover;
   display: block;
   position: relative;
-`,m=o.default.div`
+`,v=i.default.div`
   position: relative;
   width: ${t.avatarSize/16}rem;
   height: ${t.avatarSize/16}rem;
   z-index: ${({hovering:e})=>e?1:void 0};
-`,b=o.default.img`
+`,x=i.default.img`
   border-radius: 50%;
   object-fit: cover;
   position: absolute;
   transform: translate(-${(t.previewSize-t.avatarSize)/2}px, -100%);
   margin-top: -${({theme:e})=>e.spaces[1]};
-`,x=o.default.div`
+`,g=i.default.div`
   z-index: 1;
   border-radius: 30%;
   position: absolute;
@@ -22,8 +22,8 @@
   height: ${t.avatarSize/16}rem;
   background: ${({theme:e})=>e.colors.neutral0};
   opacity: 0.4;
-`,u=({src:e,alt:l,preview:r})=>{const[n,p]=c.useState(!1);return i.default.createElement("span",null,r&&n?i.default.createElement(b,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:r===!0?e:r}):null,i.default.createElement(m,{hovering:r&&n,onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1)},r&&n?i.default.createElement(x,null):null,i.default.createElement(y,{src:e,alt:l,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})))},S=o.default(h.Flex)`
+`,f=({src:e,alt:s,preview:a})=>{const[o,n]=l.useState(!1);return r.jsxs("span",{children:[a&&o?r.jsx(x,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:a===!0?e:a}):null,r.jsxs(v,{hovering:Boolean(a&&o),onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),children:[a&&o?r.jsx(g,{}):null,r.jsx(h,{src:e,alt:s,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})]})]})},y=i.default(d.Flex)`
   span {
     line-height: 0;
   }
-`,d=({children:e,background:l,textColor:r})=>i.default.createElement(S,{background:l,borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,justifyContent:"center"},i.default.createElement(g.Typography,{fontSize:0,fontWeight:"bold",textColor:r,textTransform:"uppercase"},e));d.defaultProps={background:"primary600",textColor:"buttonNeutral0"};d.propTypes={background:a.default.string,children:a.default.node.isRequired,textColor:a.default.string};u.defaultProps={alt:void 0,preview:void 0};u.propTypes={alt:a.default.string,preview:a.default.oneOfType([a.default.string,a.default.bool]),src:a.default.string.isRequired};exports.Avatar=u;exports.Initials=d;
+`,b=({children:e,background:s="primary600",textColor:a="buttonNeutral0"})=>r.jsx(y,{background:s,borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,justifyContent:"center",children:r.jsx(c.Typography,{fontSize:0,fontWeight:"bold",textColor:a,textTransform:"uppercase",children:e})});exports.Avatar=f;exports.Initials=b;