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

package/dist/Accordion/AccordionToggle.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("react"),P=require("prop-types"),F=require("@strapi/icons/CarretDown"),I=require("styled-components"),M=require("../TextButton/TextButton.cjs"),z=require("../Typography/Typography.cjs"),D=require("./Accordion.cjs"),W=require("./AccordionContext.cjs"),C=require("../Flex/Flex.cjs"),T=require("../Stack/Stack.cjs"),L=require("../Icon/Icon.cjs"),O=require("./utils.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(w),i=l(P),U=l(F),k=l(I),X=k.default(M.TextButton)`
+"use strict";var D=Object.defineProperty,W=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var $=(e,o,t)=>o in e?D(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))k.call(o,t)&&$(e,t,o[t]);if(d)for(var t of d(o))w.call(o,t)&&$(e,t,o[t]);return e},g=(e,o)=>W(e,L(o));var C=(e,o)=>{var t={};for(var r in e)k.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&d)for(var r of d(e))o.indexOf(r)<0&&w.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),P=require("@strapi/icons"),O=require("styled-components"),U=require("../TextButton/TextButton.cjs"),X=require("../Typography/Typography.cjs"),S=require("../Flex/Flex.cjs"),q=require("../Stack/Stack.cjs"),Y=require("../Icon/Icon.cjs"),E=require("./Accordion.cjs"),G=require("./AccordionContext.cjs"),H=require("./utils.cjs"),J=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},A=J(O),K=A.default(U.TextButton)`
   text-align: left;
 
   // necessary to make the ellipsis prop work on the title
@@ -11,12 +11,12 @@
     height: ${14/16}rem;
 
     path {
-      fill: ${({theme:e,expanded:r})=>r?e.colors.primary600:e.colors.neutral500};
+      fill: ${({theme:e,expanded:o})=>o?e.colors.primary600:e.colors.neutral500};
     }
   }
-`,Y=k.default(C.Flex)`
-  min-height: ${({theme:e,size:r})=>e.sizes.accordions[r]};
-  border-radius: ${({theme:e,expanded:r})=>r?`${e.borderRadius} ${e.borderRadius} 0 0`:e.borderRadius};
+`,N=A.default(S.Flex)`
+  min-height: ${({theme:e,size:o})=>e.sizes.accordions[o]};
+  border-radius: ${({theme:e,expanded:o})=>o?`${e.borderRadius} ${e.borderRadius} 0 0`:e.borderRadius};
 
   &:hover {
     svg {
@@ -25,4 +25,4 @@
       }
     }
   }
-`,u=({title:e,description:r,as:v,togglePosition:s,action:p,...$})=>{const g=w.useRef(null),{onToggle:f,toggle:y,expanded:o,id:d,size:n,variant:j,disabled:a}=W.useAccordion(),q=`accordion-content-${d}`,m=`accordion-label-${d}`,_=`accordion-desc-${d}`,c=n==="M"?6:4,h=n==="M"?c:c-2,R=O.getBackground({expanded:o,disabled:a,variant:j}),S={as:v,fontWeight:n==="S"?"bold":void 0,id:m,textColor:o?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},A=o?"primary600":"neutral600",B=o?"primary200":"neutral200",x=n==="M"?`${32/16}rem`:`${24/16}rem`,E=()=>{a||(y&&!f?(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'),y()):f())},b=t.default.createElement(C.Flex,{justifyContent:"center",borderRadius:"50%",height:x,width:x,transform:o?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,disabled:a,"aria-hidden":!0,as:"span",background:B,cursor:a?"not-allowed":"pointer",onClick:()=>g?.current?.click(),shrink:0},t.default.createElement(L.Icon,{as:U.default,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:o?"primary600":"neutral600"}));return t.default.createElement(Y,{paddingBottom:h,paddingLeft:c,paddingRight:c,paddingTop:h,background:R,expanded:o,size:n,justifyContent:"space-between",cursor:a?"not-allowed":""},t.default.createElement(T.Stack,{horizontal:!0,spacing:3,flex:1,maxWidth:"100%"},s==="left"&&b,t.default.createElement(X,{ref:g,onClick:E,"aria-disabled":a,"aria-expanded":o,"aria-controls":q,"aria-labelledby":m,"data-strapi-accordion-toggle":!0,expanded:o,type:"button",flex:1,minWidth:0,...$},t.default.createElement(t.default.Fragment,null,t.default.createElement(D.AccordionTypography,{...S},e),r&&t.default.createElement(z.Typography,{as:"p",id:_,textColor:A},r))),s==="right"&&t.default.createElement(T.Stack,{horizontal:!0,spacing:3},b,p),s==="left"&&p))};u.defaultProps={action:void 0,as:"span",description:void 0,variant:"primary",togglePosition:"right"};u.propTypes={action:i.default.node,as:i.default.string,description:i.default.string,title:i.default.string.isRequired,togglePosition:i.default.oneOf(["right","left"]),variant:i.default.oneOf(["primary","secondary"])};exports.AccordionToggle=u;
+`,Q=V=>{var x=V,{title:e,description:o,as:t="span",togglePosition:r="right",action:h}=x,v=C(x,["title","description","as","togglePosition","action"]);const{onToggle:l,toggle:f,expanded:i,id:u,size:a,variant:B,disabled:s}=G.useAccordion(),z=`accordion-content-${u}`,y=`accordion-label-${u}`,F=`accordion-desc-${u}`,c=a==="M"?6:4,j=a==="M"?c:c-2,I=H.getBackground({expanded:i,disabled:s,variant:B}),M={as:t,fontWeight:a==="S"?"bold":void 0,id:y,textColor:i?"primary600":"neutral700",ellipsis:!0,variant:a==="M"?"delta":void 0},R=i?"primary600":"neutral600",_=i?"primary200":"neutral200",m=a==="M"?`${32/16}rem`:`${24/16}rem`,b=()=>{s||(f&&!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'),f()):l&&l())},T=n.jsx(S.Flex,{justifyContent:"center",borderRadius:"50%",height:m,width:m,transform:i?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,"aria-hidden":!0,as:"span",background:_,cursor:s?"not-allowed":"pointer",onClick:b,shrink:0,children:n.jsx(Y.Icon,{as:P.CarretDown,width:a==="M"?`${11/16}rem`:`${8/16}rem`,color:i?"primary600":"neutral600"})});return n.jsx(N,{paddingBottom:j,paddingLeft:c,paddingRight:c,paddingTop:j,background:I,expanded:i,size:a,justifyContent:"space-between",cursor:s?"not-allowed":"",children:n.jsxs(q.Stack,{horizontal:!0,spacing:3,flex:1,maxWidth:"100%",children:[r==="left"&&T,n.jsx(K,g(p({onClick:b,"aria-disabled":s,"aria-expanded":i,"aria-controls":z,"aria-labelledby":y,"data-strapi-accordion-toggle":!0,expanded:i,type:"button",flex:1,minWidth:0},v),{children:n.jsxs(n.Fragment,{children:[n.jsx(E.AccordionTypography,g(p({},M),{children:e})),o&&n.jsx(X.Typography,{as:"p",id:F,textColor:R,children:o})]})})),r==="right"&&n.jsxs(q.Stack,{horizontal:!0,spacing:3,children:[T,h]}),r==="left"&&h]})})};exports.AccordionToggle=Q;

package/dist/Accordion/AccordionToggle.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface AccordionToggleProps {
+    /**
+     * Will render a node to the right of the Accordion component
+     */
+    action?: React.ReactNode;
+    as?: string | React.ComponentType<any>;
+    /**
+     * Show the secondary text of the Accordion component
+     */
+    description?: string;
+    /**
+     * Show the main title of the Accordion component
+     */
+    title: string;
+    /**
+     * Set the position of the toggle icon button
+     */
+    togglePosition?: 'right' | 'left';
+}
+export declare const AccordionToggle: ({ title, description, as, togglePosition, action, ...props }: AccordionToggleProps) => JSX.Element;
+export {};

package/dist/Accordion/AccordionToggle.js

@@ -1,16 +1,36 @@
-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 { Flex as $ } from "../Flex/Flex.js";
-import { Stack as b } from "../Stack/Stack.js";
-import { Icon as F } from "../Icon/Icon.js";
-import { getBackground as L } from "./utils.js";
-const O = x(S)`
+var P = Object.defineProperty, U = Object.defineProperties;
+var X = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var T = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable;
+var k = (o, r, e) => r in o ? P(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e, g = (o, r) => {
+  for (var e in r || (r = {}))
+    T.call(r, e) && k(o, e, r[e]);
+  if (s)
+    for (var e of s(r))
+      z.call(r, e) && k(o, e, r[e]);
+  return o;
+}, m = (o, r) => U(o, X(r));
+var v = (o, r) => {
+  var e = {};
+  for (var t in o)
+    T.call(o, t) && r.indexOf(t) < 0 && (e[t] = o[t]);
+  if (o != null && s)
+    for (var t of s(o))
+      r.indexOf(t) < 0 && z.call(o, t) && (e[t] = o[t]);
+  return e;
+};
+import { jsx as a, jsxs as h, Fragment as Y } from "react/jsx-runtime";
+import { CarretDown as q } from "@strapi/icons";
+import B from "styled-components";
+import { TextButton as E } from "../TextButton/TextButton.js";
+import { Typography as G } from "../Typography/Typography.js";
+import { Flex as M } from "../Flex/Flex.js";
+import { Stack as j } from "../Stack/Stack.js";
+import { Icon as H } from "../Icon/Icon.js";
+import { AccordionTypography as J } from "./Accordion.js";
+import { useAccordion as K } from "./AccordionContext.js";
+import { getBackground as N } from "./utils.js";
+const O = B(E)`
   text-align: left;
 
   // necessary to make the ellipsis prop work on the title
@@ -23,105 +43,130 @@ 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: r
+}) => r ? 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};
+`, Q = B(M)`
+  min-height: ${({
+  theme: o,
+  size: r
+}) => o.sizes.accordions[r]};
+  border-radius: ${({
+  theme: o,
+  expanded: r
+}) => r ? `${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,
-    textColor: r ? "primary600" : "neutral700",
+`, go = (V) => {
+  var f = V, {
+    title: o,
+    description: r,
+    as: e = "span",
+    togglePosition: t = "right",
+    action: u
+  } = f, R = v(f, [
+    "title",
+    "description",
+    "as",
+    "togglePosition",
+    "action"
+  ]);
+  const {
+    onToggle: c,
+    toggle: x,
+    expanded: i,
+    id: p,
+    size: n,
+    variant: A,
+    disabled: d
+  } = K(), I = `accordion-content-${p}`, b = `accordion-label-${p}`, S = `accordion-desc-${p}`, l = n === "M" ? 6 : 4, y = n === "M" ? l : l - 2, W = N({
+    expanded: i,
+    disabled: d,
+    variant: A
+  }), D = {
+    as: e,
+    fontWeight: n === "S" ? "bold" : void 0,
+    id: b,
+    textColor: i ? "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: n === "M" ? "delta" : void 0
+  }, F = i ? "primary600" : "neutral600", L = i ? "primary200" : "neutral200", $ = n === "M" ? `${32 / 16}rem` : `${24 / 16}rem`, w = () => {
+    d || (x && !c ? (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'), x()) : c && c());
+  }, C = a(M, {
     justifyContent: "center",
     borderRadius: "50%",
-    height: h,
-    width: h,
-    transform: r ? "rotate(180deg)" : void 0,
+    height: $,
+    width: $,
+    transform: i ? "rotate(180deg)" : void 0,
     "data-strapi-dropdown": !0,
-    disabled: n,
     "aria-hidden": !0,
     as: "span",
-    background: P,
-    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,
-    expanded: r,
-    size: i,
+    background: L,
+    cursor: d ? "not-allowed" : "pointer",
+    onClick: w,
+    shrink: 0,
+    children: a(H, {
+      as: q,
+      width: n === "M" ? `${11 / 16}rem` : `${8 / 16}rem`,
+      color: i ? "primary600" : "neutral600"
+    })
+  });
+  return a(Q, {
+    paddingBottom: y,
+    paddingLeft: l,
+    paddingRight: l,
+    paddingTop: y,
+    background: W,
+    expanded: i,
+    size: n,
     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: d ? "not-allowed" : "",
+    children: h(j, {
+      horizontal: !0,
+      spacing: 3,
+      flex: 1,
+      maxWidth: "100%",
+      children: [t === "left" && C, a(O, m(g({
+        onClick: w,
+        "aria-disabled": d,
+        "aria-expanded": i,
+        "aria-controls": I,
+        "aria-labelledby": b,
+        "data-strapi-accordion-toggle": !0,
+        expanded: i,
+        type: "button",
+        flex: 1,
+        minWidth: 0
+      }, R), {
+        children: h(Y, {
+          children: [a(J, m(g({}, D), {
+            children: o
+          })), r && a(G, {
+            as: "p",
+            id: S,
+            textColor: F,
+            children: r
+          })]
+        })
+      })), t === "right" && h(j, {
+        horizontal: !0,
+        spacing: 3,
+        children: [C, u]
+      }), t === "left" && u]
+    })
+  });
 };
 export {
-  w as AccordionToggle
+  go as AccordionToggle
 };

package/dist/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './AccordionContent';
+export * from './AccordionToggle';
+export * from './AccordionGroup';

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.d.ts

@@ -0,0 +1,7 @@
+import { DefaultTheme } from 'styled-components';
+import { AccordionVariant } from './Accordion';
+export declare const getBackground: ({ expanded, disabled, variant, }: {
+    expanded: boolean;
+    disabled: boolean;
+    variant: AccordionVariant;
+}) => keyof DefaultTheme['colors'];

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

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,33 @@
+import { BoxProps } from '../Box';
+export type AlertVariant = 'success' | 'danger' | 'default';
+export interface AlertProps extends BoxProps {
+    /**
+     * Render a React element below the body of an `Alert` (Mainly used to render a Link).
+     */
+    action?: React.ReactNode;
+    /**
+     * The body of the `Alert` (Will be rendered under the `Alert` title).
+     */
+    children: React.ReactNode;
+    /**
+     * Accessible label for the close icon button.
+     */
+    closeLabel: string;
+    /**
+     * The callback invoked when click on the close icon button.
+     */
+    onClose: () => void;
+    /**
+     * The title of the `Alert`.
+     */
+    title: string;
+    /**
+     * Changes the element, as which a component will render (similar to styled-components).
+     */
+    titleAs?: string | React.ComponentType<any>;
+    /**
+     * `Alert` color variant.
+     */
+    variant?: AlertVariant;
+}
+export declare const Alert: ({ title, children, variant, onClose, closeLabel, titleAs, action, ...props }: AlertProps) => JSX.Element;