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

package/dist/Alert/Alert.js

@@ -1,111 +1,147 @@
-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)`
+var k = Object.defineProperty, w = Object.defineProperties;
+var y = Object.getOwnPropertyDescriptors;
+var a = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var g = (r, o, t) => o in r ? k(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, i = (r, o) => {
+  for (var t in o || (o = {}))
+    f.call(o, t) && g(r, t, o[t]);
+  if (a)
+    for (var t of a(o))
+      m.call(o, t) && g(r, t, o[t]);
+  return r;
+}, u = (r, o) => w(r, y(o));
+var p = (r, o) => {
+  var t = {};
+  for (var e in r)
+    f.call(r, e) && o.indexOf(e) < 0 && (t[e] = r[e]);
+  if (r != null && a)
+    for (var e of a(r))
+      o.indexOf(e) < 0 && m.call(r, e) && (t[e] = r[e]);
+  return t;
+};
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import l from "styled-components";
+import { Cross as A, CheckCircle as I, ExclamationMarkCircle as R, Information as v } from "@strapi/icons";
+import { Box as d } from "../Box/Box.js";
+import { Typography as C } from "../Typography/Typography.js";
+import { Flex as W } from "../Flex/Flex.js";
+import { buttonFocusStyle as j } from "../themes/utils.js";
+import { handleBorderColor as z, handleBackgroundColor as F, handleIconColor as c } from "./utils.js";
+const S = l(d)`
   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`
+`, T = l(d)`
+  border: 1px solid ${z};
+  background: ${F};
+  box-shadow: ${({
+  theme: r
+}) => r.shadows.filterShadow};
+`, E = l.button`
   border: none;
   background: transparent;
   font-size: ${12 / 16}rem;
   svg path {
-    fill: ${({ theme: t }) => t.colors.neutral700};
+    fill: ${({
+  theme: r
+}) => r.colors.neutral700};
   }
-  margin-top: ${({ theme: t }) => t.spaces[1]};
-  ${y};
-`, k = i(o)`
+  margin-top: ${({
+  theme: r
+}) => r.spaces[1]};
+  ${j};
+`, L = l(d)`
   font-size: ${20 / 16}rem;
   svg path {
-    fill: ${d};
+    fill: ${c};
   }
-`, 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)`
+`, M = (t) => {
+  var e = t, {
+    variant: r
+  } = e, o = p(e, [
+    "variant"
+  ]);
+  return r === "success" ? n(I, i({}, o)) : r === "danger" ? n(R, i({}, o)) : n(v, i({}, o));
+}, q = l(d)`
   // Checked with the designers, validated
   padding-top: 1px;
 
   & a > span {
-    color: ${d};
+    color: ${c};
 
     svg path {
-      fill: ${d};
+      fill: ${c};
     }
   }
-`, s = ({ title: t, children: n, variant: a, onClose: c, closeLabel: f, titleAs: g, action: l, ...u }) => /* @__PURE__ */ e.createElement(B, {
-  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
+`, V = (D) => {
+  var h = D, {
+    title: r,
+    children: o,
+    variant: t = "default",
+    onClose: e,
+    closeLabel: $,
+    titleAs: b = "p",
+    action: s
+  } = h, B = p(h, [
+    "title",
+    "children",
+    "variant",
+    "onClose",
+    "closeLabel",
+    "titleAs",
+    "action"
+  ]);
+  return n(T, u(i({
+    hasRadius: !0,
+    paddingLeft: 5,
+    paddingRight: 6,
+    paddingTop: 5,
+    variant: t
+  }, B), {
+    children: x(W, {
+      alignItems: "flex-start",
+      children: [n(L, {
+        paddingRight: 3,
+        variant: t,
+        children: n(M, {
+          variant: t,
+          "aria-hidden": !0
+        })
+      }), x(S, {
+        role: t === "danger" ? "alert" : "status",
+        children: [n(d, {
+          paddingBottom: 2,
+          paddingRight: 1,
+          children: n(C, {
+            fontWeight: "bold",
+            textColor: "neutral800",
+            as: b,
+            children: r
+          })
+        }), n(d, {
+          paddingBottom: s ? 2 : 5,
+          paddingRight: 2,
+          children: n(C, {
+            as: "p",
+            textColor: "neutral800",
+            children: o
+          })
+        }), s && n(q, {
+          paddingBottom: 5,
+          variant: t,
+          children: s
+        })]
+      }), n(E, {
+        onClick: e,
+        "aria-label": $,
+        children: n(A, {
+          "aria-hidden": !0
+        })
+      })]
+    })
+  }));
 };
 export {
-  s as Alert
+  V as Alert
 };

package/dist/Alert/index.d.ts

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

package/dist/Alert/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=({theme:r,variant:o})=>o==="danger"?r.colors.danger100:o==="success"?r.colors.success100:o==="warning"?r.colors.warning100:r.colors.primary100,s=({theme:r,variant:o})=>o==="danger"?r.colors.danger200:o==="success"?r.colors.success200:o==="warning"?r.colors.warning200:r.colors.primary200,c=({theme:r,variant:o})=>o==="danger"?r.colors.danger700:o==="success"?r.colors.success700:o==="warning"?r.colors.warning700:r.colors.primary700;exports.handleBackgroundColor=n;exports.handleBorderColor=s;exports.handleIconColor=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=({theme:r,variant:o})=>o==="danger"?r.colors.danger100:o==="success"?r.colors.success100:r.colors.primary100,c=({theme:r,variant:o})=>o==="danger"?r.colors.danger200:o==="success"?r.colors.success200:r.colors.primary200,e=({theme:r,variant:o})=>o==="danger"?r.colors.danger700:o==="success"?r.colors.success700:r.colors.primary700;exports.handleBackgroundColor=s;exports.handleBorderColor=c;exports.handleIconColor=e;

package/dist/Alert/utils.d.ts

@@ -0,0 +1,10 @@
+import { DefaultTheme } from 'styled-components';
+import type { AlertVariant } from './Alert';
+interface StyledProps {
+    theme: DefaultTheme;
+    variant: AlertVariant;
+}
+export declare const handleBackgroundColor: ({ theme, variant }: StyledProps) => string;
+export declare const handleBorderColor: ({ theme, variant }: StyledProps) => string;
+export declare const handleIconColor: ({ theme, variant }: StyledProps) => string;
+export {};

package/dist/Alert/utils.js

@@ -1,6 +1,6 @@
-const s = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger100 : o === "success" ? r.colors.success100 : o === "warning" ? r.colors.warning100 : r.colors.primary100, n = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger200 : o === "success" ? r.colors.success200 : o === "warning" ? r.colors.warning200 : r.colors.primary200, c = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger700 : o === "success" ? r.colors.success700 : o === "warning" ? r.colors.warning700 : r.colors.primary700;
+const s = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger100 : o === "success" ? r.colors.success100 : r.colors.primary100, c = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger200 : o === "success" ? r.colors.success200 : r.colors.primary200, n = ({ theme: r, variant: o }) => o === "danger" ? r.colors.danger700 : o === "success" ? r.colors.success700 : r.colors.primary700;
 export {
   s as handleBackgroundColor,
-  n as handleBorderColor,
-  c as handleIconColor
+  c as handleBorderColor,
+  n as handleIconColor
 };

package/dist/Avatar/Avatar.cjs

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),f=require("styled-components"),v=require("prop-types"),t=require("./constants.cjs"),g=require("../Typography/Typography.cjs"),h=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=l(d),o=l(f),r=l(v),y=o.default.img`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=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]};
-`,S=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;
-`,s=({src:e,alt:c,preview:i})=>{const[n,u]=d.useState(!1);return a.default.createElement("span",null,i&&n?a.default.createElement(b,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:i===!0?e:i}):null,a.default.createElement(m,{hovering:i&&n,onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1)},i&&n?a.default.createElement(S,null):null,a.default.createElement(y,{src:e,alt:c,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})))},x=o.default(h.Flex)`
+`,f=({src:e,alt:n,preview:r})=>{const[s,o]=l.useState(!1);return a.jsxs("span",{children:[r&&s?a.jsx(x,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:r===!0?e:r}):null,a.jsxs(v,{hovering:Boolean(r&&s),onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),children:[r&&s?a.jsx(g,{}):null,a.jsx(h,{src:e,alt:n,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})]})]})},y=i.default(d.Flex)`
   span {
     line-height: 0;
   }
-`,p=({children:e})=>a.default.createElement(x,{borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,background:"primary600",justifyContent:"center"},a.default.createElement(g.Typography,{fontWeight:"bold",textColor:"buttonNeutral0",fontSize:0,textTransform:"uppercase"},e));p.propTypes={children:r.default.node.isRequired};s.defaultProps={alt:void 0,preview:void 0};s.propTypes={alt:r.default.string,preview:r.default.oneOfType([r.default.string,r.default.bool]),src:r.default.string.isRequired};exports.Avatar=s;exports.Initials=p;
+`,b=({children:e})=>a.jsx(y,{borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,background:"primary600",justifyContent:"center",children:a.jsx(c.Typography,{fontWeight:"bold",textColor:"buttonNeutral0",fontSize:0,textTransform:"uppercase",children:e})});exports.Avatar=f;exports.Initials=b;

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,19 @@
+export interface AvatarProps {
+    /**
+     * Alternative text
+     */
+    alt?: string;
+    /**
+     * Image src of the image preview (displayed on `Avatar` hover).
+     */
+    preview?: boolean | string;
+    /**
+     * Image src of the `Avatar`
+     */
+    src: string;
+}
+export declare const Avatar: ({ src, alt, preview }: AvatarProps) => JSX.Element;
+export interface InitialsProps {
+    children: React.ReactNode;
+}
+export declare const Initials: ({ children }: InitialsProps) => JSX.Element;

package/dist/Avatar/Avatar.js

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

package/dist/Avatar/AvatarGroup.d.ts

@@ -0,0 +1 @@
+export declare const AvatarGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Flex").FlexProps<HTMLDivElement>, never>;

package/dist/Avatar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const avatarSize = 26;
+export declare const previewSize = 64;

package/dist/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Avatar';
+export * from './AvatarGroup';

package/dist/Badge/Badge.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),f=require("prop-types"),g=require("styled-components"),y=require("../Flex/Flex.cjs"),b=require("../Typography/Typography.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=a(p),t=a(f),m=a(g),h=m.default(y.Flex)`
-  border-radius: ${({theme:e,size:r})=>r==="S"?"2px":e.borderRadius};
-  height: ${({size:e,theme:r})=>r.sizes.badge[e]};
-`,o=({active:e,size:r,textColor:d,backgroundColor:u,children:s,minWidth:i,...c})=>{const n=r==="S"?1:2;return l.default.createElement(h,{inline:!0,alignItem:"center",justifyContent:"center",minWidth:i,paddingLeft:n,paddingRight:n,background:e?"primary200":u,size:r,...c},l.default.createElement(b.Typography,{variant:"sigma",textColor:e?"primary600":d},s))};o.defaultProps={active:!1,backgroundColor:"neutral150",minWidth:5,size:"M",textColor:"neutral600"};o.propTypes={active:t.default.bool,backgroundColor:t.default.string,children:t.default.oneOfType([t.default.number,t.default.string]).isRequired,minWidth:t.default.number,size:t.default.oneOf(["S","M"]),textColor:t.default.string};exports.Badge=o;
+"use strict";var x=Object.defineProperty,j=Object.defineProperties;var m=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var o=(e,t,r)=>t in e?x(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,u=(e,t)=>{for(var r in t||(t={}))d.call(t,r)&&o(e,r,t[r]);if(a)for(var r of a(t))l.call(t,r)&&o(e,r,t[r]);return e},c=(e,t)=>j(e,m(t));var g=(e,t)=>{var r={};for(var n in e)d.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(e!=null&&a)for(var n of a(e))t.indexOf(n)<0&&l.call(e,n)&&(r[n]=e[n]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),b=require("styled-components"),T=require("../Flex/Flex.cjs"),_=require("../Typography/Typography.cjs"),q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},F=q(b),S=F.default(T.Flex)`
+  border-radius: ${({theme:e,size:t})=>t==="S"?"2px":e.borderRadius};
+  height: ${({size:e,theme:t})=>t.sizes.badge[e]};
+`,B=M=>{var i=M,{active:e=!1,size:t="M",textColor:r="neutral600",backgroundColor:n="neutral150",children:y,minWidth:f=5}=i,h=g(i,["active","size","textColor","backgroundColor","children","minWidth"]);const s=t==="S"?1:2;return p.jsx(S,c(u({inline:!0,alignItem:"center",justifyContent:"center",minWidth:f,paddingLeft:s,paddingRight:s,background:e?"primary200":n,size:t},h),{children:p.jsx(_.Typography,{variant:"sigma",textColor:e?"primary600":r,children:y})}))};exports.Badge=B;

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import { DefaultTheme } from 'styled-components';
+import { FlexProps } from '../Flex';
+export type BadgeSize = 'S' | 'M';
+export interface BadgeProps extends FlexProps {
+    /**
+     * If `true`, it changes the `backgroundColor` to `primary200` and the `textColor` to `primary600`
+     */
+    active?: boolean;
+    backgroundColor?: keyof DefaultTheme['colors'];
+    size?: BadgeSize;
+    textColor?: keyof DefaultTheme['colors'];
+}
+export declare const Badge: ({ active, size, textColor, backgroundColor, children, minWidth, ...props }: BadgeProps) => JSX.Element;

package/dist/Badge/Badge.js

@@ -1,43 +1,71 @@
-import i from "react";
-import e from "prop-types";
-import l from "styled-components";
-import { Flex as g } from "../Flex/Flex.js";
-import { Typography as u } from "../Typography/Typography.js";
-const c = l(g)`
-  border-radius: ${({ theme: r, size: t }) => t === "S" ? "2px" : r.borderRadius};
-  height: ${({ size: r, theme: t }) => t.sizes.badge[r]};
-`, n = ({ active: r, size: t, textColor: a, backgroundColor: d, children: p, minWidth: m, ...s }) => {
-  const o = t === "S" ? 1 : 2;
-  return /* @__PURE__ */ i.createElement(c, {
+var y = Object.defineProperty, x = Object.defineProperties;
+var b = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var d = (r, e, t) => e in r ? y(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, s = (r, e) => {
+  for (var t in e || (e = {}))
+    m.call(e, t) && d(r, t, e[t]);
+  if (n)
+    for (var t of n(e))
+      p.call(e, t) && d(r, t, e[t]);
+  return r;
+}, g = (r, e) => x(r, b(e));
+var l = (r, e) => {
+  var t = {};
+  for (var i in r)
+    m.call(r, i) && e.indexOf(i) < 0 && (t[i] = r[i]);
+  if (r != null && n)
+    for (var i of n(r))
+      e.indexOf(i) < 0 && p.call(r, i) && (t[i] = r[i]);
+  return t;
+};
+import { jsx as u } from "react/jsx-runtime";
+import j from "styled-components";
+import { Flex as B } from "../Flex/Flex.js";
+import { Typography as C } from "../Typography/Typography.js";
+const R = j(B)`
+  border-radius: ${({
+  theme: r,
+  size: e
+}) => e === "S" ? "2px" : r.borderRadius};
+  height: ${({
+  size: r,
+  theme: e
+}) => e.sizes.badge[r]};
+`, L = (S) => {
+  var o = S, {
+    active: r = !1,
+    size: e = "M",
+    textColor: t = "neutral600",
+    backgroundColor: i = "neutral150",
+    children: c,
+    minWidth: f = 5
+  } = o, h = l(o, [
+    "active",
+    "size",
+    "textColor",
+    "backgroundColor",
+    "children",
+    "minWidth"
+  ]);
+  const a = e === "S" ? 1 : 2;
+  return u(R, g(s({
     inline: !0,
     alignItem: "center",
     justifyContent: "center",
-    minWidth: m,
-    paddingLeft: o,
-    paddingRight: o,
-    background: r ? "primary200" : d,
-    size: t,
-    ...s
-  }, /* @__PURE__ */ i.createElement(u, {
-    variant: "sigma",
-    textColor: r ? "primary600" : a
-  }, p));
-};
-n.defaultProps = {
-  active: !1,
-  backgroundColor: "neutral150",
-  minWidth: 5,
-  size: "M",
-  textColor: "neutral600"
-};
-n.propTypes = {
-  active: e.bool,
-  backgroundColor: e.string,
-  children: e.oneOfType([e.number, e.string]).isRequired,
-  minWidth: e.number,
-  size: e.oneOf(["S", "M"]),
-  textColor: e.string
+    minWidth: f,
+    paddingLeft: a,
+    paddingRight: a,
+    background: r ? "primary200" : i,
+    size: e
+  }, h), {
+    children: u(C, {
+      variant: "sigma",
+      textColor: r ? "primary600" : t,
+      children: c
+    })
+  }));
 };
 export {
-  n as Badge
+  L as Badge
 };

package/dist/Badge/index.d.ts

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