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

package/dist/Button/Button.js

@@ -1,109 +1,149 @@
-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`
+var T = Object.defineProperty, W = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var a = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var p = (t, e, r) => e in t ? T(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, u = (t, e) => {
+  for (var r in e || (e = {}))
+    h.call(e, r) && p(t, r, e[r]);
+  if (a)
+    for (var r of a(e))
+      g.call(e, r) && p(t, r, e[r]);
+  return t;
+}, $ = (t, e) => W(t, j(e));
+var y = (t, e) => {
+  var r = {};
+  for (var i in t)
+    h.call(t, i) && e.indexOf(i) < 0 && (r[i] = t[i]);
+  if (t != null && a)
+    for (var i of a(t))
+      e.indexOf(i) < 0 && g.call(t, i) && (r[i] = t[i]);
+  return r;
+};
+import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import D from "react";
+import d, { keyframes as H } from "styled-components";
+import { Loader as N } from "@strapi/icons";
+import { Typography as v } from "../Typography/Typography.js";
+import { Box as s } from "../Box/Box.js";
+import { BaseButton as R } from "../BaseButton/BaseButton.js";
+import { getDisabledStyle as b, getHoverStyle as _, getActiveStyle as A, getVariantStyle as C } from "./utils.js";
+import { DEFAULT as E, BUTTON_SIZES as F } from "./constants.js";
+const P = H`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`, N = n.div`
-  animation: ${I} 2s infinite linear;
+`, U = d.div`
+  animation: ${P} 2s infinite linear;
   will-change: transform;
-`, P = n(l)`
+`, z = d(s)`
   height: 100%;
-`, w = n(W)`
+`, O = d(R)`
   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]};
+  background-color: ${({
+  theme: t
+}) => t.colors.buttonPrimary600};
+  border: 1px solid ${({
+  theme: t
+}) => t.colors.buttonPrimary600};
+  height: ${({
+  theme: t,
+  size: e
+}) => t.sizes.button[e]};
+  padding-left: ${({
+  theme: t
+}) => t.spaces[4]};
+  padding-right: ${({
+  theme: t
+}) => t.spaces[4]};
 
-  ${l} {
+  ${s} {
     display: flex;
     align-items: center;
   }
 
-  ${p} {
-    color: ${({ theme: e }) => e.colors.buttonNeutral0};
+  ${v} {
+    color: ${({
+  theme: t
+}) => t.colors.buttonNeutral0};
   }
 
   &[aria-disabled='true'] {
-    ${f}
+    ${b}
     &:active {
-      ${f}
+      ${b}
     }
   }
   &:hover {
-    ${E}
+    ${_}
   }
   &:active {
-    ${x}
+    ${A}
   }
-  ${T}
-  ${({ fullWidth: e }) => e && `
+  ${C}
+  ${({
+  fullWidth: t
+}) => t && `
     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, {
+`, V = D.forwardRef((Z, k) => {
+  var m = Z, {
+    variant: t = E,
+    startIcon: e,
+    endIcon: r,
+    disabled: i = !1,
+    children: x,
+    onClick: f,
+    size: c = F[0],
+    loading: n = !1,
+    fullWidth: B = !1
+  } = m, S = y(m, [
+    "variant",
+    "startIcon",
+    "endIcon",
+    "disabled",
+    "children",
+    "onClick",
+    "size",
+    "loading",
+    "fullWidth"
+  ]);
+  const l = i || n;
+  return w(O, $(u({
+    ref: k,
+    "aria-disabled": l,
+    disabled: l,
+    size: c,
+    variant: t,
+    onClick: (L) => {
+      !l && f && f(L);
+    },
+    fullWidth: B
+  }, S), {
+    children: [(e || n) && o(z, {
       "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,
+      paddingRight: 2,
+      children: n ? o(U, {
+        children: o(N, {})
+      }) : e
+    }), o(v, {
+      variant: c === "S" ? "pi" : void 0,
       fontWeight: "bold",
-      lineHeight: 0
-    }, g), s && /* @__PURE__ */ o.createElement(l, {
+      lineHeight: 0,
+      children: x
+    }), r && o(s, {
       "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)
-};
+      paddingLeft: 2,
+      children: r
+    })]
+  }));
+});
+V.displayName = "Button";
 export {
-  d as Button,
-  w as ButtonWrapper
+  V as Button,
+  O as ButtonWrapper
 };

package/dist/Button/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const SUCCESS_LIGHT = "success-light";
+export declare const DANGER_LIGHT = "danger-light";
+export declare const DEFAULT = "default";
+export declare const TERTIARY = "tertiary";
+export declare const SECONDARY = "secondary";
+export declare const DANGER = "danger";
+export declare const SUCCESS = "success";
+export declare const GHOST = "ghost";
+export declare const LIGHT_VARIANTS: readonly ["success-light", "danger-light"];
+export declare const VARIANTS: readonly ["default", "tertiary", "secondary", "danger", "success", "ghost", "success-light", "danger-light"];
+export declare const BUTTON_SIZES: readonly ["S", "M", "L"];
+export type Variant = typeof VARIANTS[number];
+export type ButtonSizes = typeof BUTTON_SIZES[number];

package/dist/Button/index.d.ts

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

package/dist/Button/utils.cjs

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

package/dist/Button/utils.d.ts

@@ -0,0 +1,18 @@
+import { DefaultTheme } from 'styled-components';
+import { Variant } from './constants';
+export declare const getVariantColorName: (variant: Variant) => 'success' | 'danger' | 'neutral' | 'primary';
+export declare const getDisabledStyle: ({ theme }: {
+    theme: DefaultTheme;
+}) => string;
+export declare const getHoverStyle: ({ theme, variant }: {
+    theme: DefaultTheme;
+    variant: Variant;
+}) => string;
+export declare const getActiveStyle: ({ theme, variant }: {
+    theme: DefaultTheme;
+    variant: Variant;
+}) => string;
+export declare const getVariantStyle: ({ theme, variant }: {
+    theme: DefaultTheme;
+    variant: Variant;
+}) => string;

package/dist/Button/utils.js

@@ -1,6 +1,6 @@
 import { Typography as c } from "../Typography/Typography.js";
-import { LIGHT_VARIANTS as $, TERTIARY as s, DEFAULT as n, SECONDARY as u, VARIANTS as g, GHOST as d, DANGER as b, SUCCESS as t, SUCCESS_LIGHT as p, DANGER_LIGHT as e } from "./constants.js";
-const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ? "neutral" : [n, u].includes(o) || !g.includes(o) ? "primary" : o, a = ({ theme: o }) => `
+import { SUCCESS_LIGHT as $, DANGER_LIGHT as n, TERTIARY as s, DEFAULT as d, SECONDARY as u, VARIANTS as p, LIGHT_VARIANTS as g, GHOST as b, DANGER as t, SUCCESS as e } from "./constants.js";
+const l = (o) => o === $ || o === n ? `${o.substring(0, o.lastIndexOf("-"))}600` : o === s ? "neutral" : o === d || o === u || p.every((r) => r !== o) ? "primary" : `${o}`, k = ({ theme: o }) => `
     border: 1px solid ${o.colors.neutral200};
     background: ${o.colors.neutral150};
     ${c} {
@@ -11,19 +11,19 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
         fill: ${o.colors.neutral600};
       }
     }
-  `, S = ({ theme: o, variant: r }) => [...$, u].includes(r) ? `
+  `, i = ({ theme: o, variant: r }) => [...g, u].includes(r) ? `
       background-color: ${o.colors.neutral0};
     ` : r === s ? `
       background-color: ${o.colors.neutral100};
-    ` : r === d ? `
+    ` : r === b ? `
       background-color: ${o.colors.neutral100};
-    ` : r === n ? `
+    ` : r === d ? `
       border: 1px solid ${o.colors.buttonPrimary500};
       background: ${o.colors.buttonPrimary500};
     ` : `
     border: 1px solid ${o.colors[`${l(r)}500`]};
     background: ${o.colors[`${l(r)}500`]};
-  `, k = ({ theme: o, variant: r }) => [...$, u].includes(r) ? `
+  `, x = ({ theme: o, variant: r }) => [...g, u].includes(r) ? `
       background-color: ${o.colors.neutral0};
       border: 1px solid ${o.colors[`${l(r)}600`]};
       ${c} {
@@ -39,10 +39,10 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
     ` : `
     border: 1px solid ${o.colors[`${l(r)}600`]};
     background: ${o.colors[`${l(r)}600`]};
-  `, x = ({ theme: o, variant: r }) => {
+  `, a = ({ theme: o, variant: r }) => {
   switch (r) {
-    case e:
-    case p:
+    case n:
+    case $:
     case u:
       return `
           border: 1px solid ${o.colors[`${l(r)}200`]};
@@ -69,7 +69,7 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
             }
           }
         `;
-    case d:
+    case b:
       return `
         border: 1px solid transparent;
         background: transparent;
@@ -84,8 +84,8 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
           }
         }
       `;
+    case e:
     case t:
-    case b:
       return `
           border: 1px solid ${o.colors[`${l(r)}600`]};
           background: ${o.colors[`${l(r)}600`]};
@@ -104,9 +104,9 @@ const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ?
   }
 };
 export {
-  k as getActiveStyle,
-  a as getDisabledStyle,
-  S as getHoverStyle,
+  x as getActiveStyle,
+  k as getDisabledStyle,
+  i as getHoverStyle,
   l as getVariantColorName,
-  x as getVariantStyle
+  a as getVariantStyle
 };

package/dist/Card/Card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),u=require("prop-types"),l=require("../Box/Box.cjs"),n=require("./CardContext.cjs"),c=require("../helpers/useId.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=a(s),i=a(u),t=({id:e,...d})=>{const r=c.useId("card",e);return o.default.createElement(n.CardContext.Provider,{value:{id:r}},o.default.createElement(l.Box,{id:e,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${r}-title`,...d}))};t.defaultProps={id:void 0};t.propTypes={id:i.default.string};exports.Card=t;
+"use strict";var x=Object.defineProperty;var o=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;var s=(e,r,t)=>r in e?x(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,i=(e,r)=>{for(var t in r||(r={}))u.call(r,t)&&s(e,t,r[t]);if(o)for(var t of o(r))n.call(r,t)&&s(e,t,r[t]);return e};var l=(e,r)=>{var t={};for(var d in e)u.call(e,d)&&r.indexOf(d)<0&&(t[d]=e[d]);if(e!=null&&o)for(var d of o(e))r.indexOf(d)<0&&n.call(e,d)&&(t[d]=e[d]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),b=require("../Box/Box.cjs"),C=require("../helpers/useId.cjs"),j=require("./CardContext.cjs"),h=t=>{var d=t,{id:e}=d,r=l(d,["id"]);const a=C.useId("card",e);return c.jsx(j.CardContext.Provider,{value:{id:a},children:c.jsx(b.Box,i({id:e,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${a}-title`},r))})};exports.Card=h;

package/dist/Card/Card.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '../Box';
+export interface CardProps extends BoxProps {
+    id?: string;
+}
+export declare const Card: ({ id, ...props }: CardProps) => JSX.Element;

package/dist/Card/Card.js

@@ -1,32 +1,52 @@
-import t from "react";
-import d from "prop-types";
-import { Box as i } from "../Box/Box.js";
-import { CardContext as l } from "./CardContext.js";
-import { useId as p } from "../helpers/useId.js";
-const o = ({ id: r, ...a }) => {
-  const e = p("card", r);
-  return /* @__PURE__ */ t.createElement(l.Provider, {
-    value: { id: e }
-  }, /* @__PURE__ */ t.createElement(i, {
-    id: r,
-    tabIndex: 0,
-    hasRadius: !0,
-    background: "neutral0",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    borderColor: "neutral150",
-    shadow: "tableShadow",
-    as: "article",
-    "aria-labelledby": `${e}-title`,
-    ...a
-  }));
+var u = Object.defineProperty;
+var d = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+var i = (r, e, o) => e in r ? u(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, s = (r, e) => {
+  for (var o in e || (e = {}))
+    l.call(e, o) && i(r, o, e[o]);
+  if (d)
+    for (var o of d(e))
+      n.call(e, o) && i(r, o, e[o]);
+  return r;
 };
-o.defaultProps = {
-  id: void 0
+var b = (r, e) => {
+  var o = {};
+  for (var t in r)
+    l.call(r, t) && e.indexOf(t) < 0 && (o[t] = r[t]);
+  if (r != null && d)
+    for (var t of d(r))
+      e.indexOf(t) < 0 && n.call(r, t) && (o[t] = r[t]);
+  return o;
 };
-o.propTypes = {
-  id: d.string
+import { jsx as m } from "react/jsx-runtime";
+import { Box as c } from "../Box/Box.js";
+import { useId as p } from "../helpers/useId.js";
+import { CardContext as x } from "./CardContext.js";
+const v = (o) => {
+  var t = o, {
+    id: r
+  } = t, e = b(t, [
+    "id"
+  ]);
+  const a = p("card", r);
+  return m(x.Provider, {
+    value: {
+      id: a
+    },
+    children: m(c, s({
+      id: r,
+      tabIndex: 0,
+      hasRadius: !0,
+      background: "neutral0",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderColor: "neutral150",
+      shadow: "tableShadow",
+      as: "article",
+      "aria-labelledby": `${a}-title`
+    }, e))
+  });
 };
 export {
-  o as Card
+  v as Card
 };

package/dist/Card/CardAction.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),s=require("../Stack/Stack.cjs"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},c=a(o),i=c.default(s.Stack).attrs({horizontal:!0,spacing:2})`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),r=require("../Stack/Stack.cjs"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=s(n),o=a.default(r.Stack).attrs({horizontal:!0,spacing:2})`
   position: absolute;
   top: ${({theme:t})=>t.spaces[3]};
-  right: ${({position:t,theme:e})=>t==="end"?e.spaces[3]:void 0};
-  left: ${({position:t,theme:e})=>t==="start"?e.spaces[3]:void 0};
-`;exports.CardAction=i;
+  right: ${({position:t,theme:e})=>{if(t==="end")return e.spaces[3]}};
+  left: ${({position:t,theme:e})=>{if(t==="start")return e.spaces[3]}};
+`;exports.CardAction=o;

package/dist/Card/CardAction.d.ts

@@ -0,0 +1,8 @@
+import { StackProps } from '../Stack';
+export type CardActionPosition = 'end' | 'start';
+export declare const CardAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
+    horizontal: true;
+    spacing: 2;
+} & {
+    position: StackProps['position'] | CardActionPosition;
+}, "horizontal" | "spacing">;

package/dist/Card/CardAction.js

@@ -1,14 +1,20 @@
-import s from "styled-components";
-import { Stack as r } from "../Stack/Stack.js";
-const e = s(r).attrs({
+import e from "styled-components";
+import { Stack as n } from "../Stack/Stack.js";
+const i = e(n).attrs({
   horizontal: !0,
   spacing: 2
 })`
   position: absolute;
   top: ${({ theme: t }) => t.spaces[3]};
-  right: ${({ position: t, theme: o }) => t === "end" ? o.spaces[3] : void 0};
-  left: ${({ position: t, theme: o }) => t === "start" ? o.spaces[3] : void 0};
+  right: ${({ position: t, theme: r }) => {
+  if (t === "end")
+    return r.spaces[3];
+}};
+  left: ${({ position: t, theme: r }) => {
+  if (t === "start")
+    return r.spaces[3];
+}};
 `;
 export {
-  e as CardAction
+  i as CardAction
 };

package/dist/Card/CardAsset.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),l=require("styled-components"),c=require("prop-types"),u=require("../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(n),i=a(l),o=a(c),p=i.default.img`
+"use strict";var g=Object.defineProperty,m=Object.defineProperties;var f=Object.getOwnPropertyDescriptors;var r=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var n=(e,t,s)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,l=(e,t)=>{for(var s in t||(t={}))d.call(t,s)&&n(e,s,t[s]);if(r)for(var s of r(t))c.call(t,s)&&n(e,s,t[s]);return e},u=(e,t)=>m(e,f(t));var p=(e,t)=>{var s={};for(var i in e)d.call(e,i)&&t.indexOf(i)<0&&(s[i]=e[i]);if(e!=null&&r)for(var i of r(e))t.indexOf(i)<0&&c.call(e,i)&&(s[i]=e[i]);return s};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),x=require("styled-components"),b=require("../Flex/Flex.cjs"),y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},h=y(x),j=h.default.img`
   // inline flows is based on typography and displays an extra white space below the image
   // switch to block is required in order to make the img stick the bottom of the container
   // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
@@ -7,13 +7,13 @@
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
-`,f={S:88,M:164},h=i.default.div`
+`,w={S:88,M:164},k=h.default.div`
   display: flex;
   justify-content: center;
-  height: ${({size:e})=>f[e]/16}rem;
+  height: ${({size:e})=>w[e]/16}rem;
   width: 100%;
   background: repeating-conic-gradient(${({theme:e})=>e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
     20px;
   border-top-left-radius: ${({theme:e})=>e.borderRadius};
   border-top-right-radius: ${({theme:e})=>e.borderRadius};
-`,r=({size:e,children:s,...d})=>t.default.createElement(h,{size:e},s?t.default.createElement(u.Flex,null,s):t.default.createElement(p,{...d,"aria-hidden":!0}));r.defaultProps={children:void 0,size:"M"};r.propTypes={children:o.default.node,size:o.default.oneOf(["S","M"])};exports.CardAsset=r;
+`,q=i=>{var o=i,{size:e="M",children:t}=o,s=p(o,["size","children"]);return a.jsx(k,{size:e,children:t?a.jsx(b.Flex,{children:t}):a.jsx(j,u(l({},s),{"aria-hidden":!0}))})};exports.CardAsset=q;

package/dist/Card/CardAsset.d.ts

@@ -0,0 +1,7 @@
+import { ImgHTMLAttributes } from 'react';
+export type CardAssetSizes = 'S' | 'M';
+export interface CardAssetProps extends ImgHTMLAttributes<HTMLImageElement> {
+    size?: CardAssetSizes;
+    children?: React.ReactNode;
+}
+export declare const CardAsset: ({ size, children, ...props }: CardAssetProps) => JSX.Element;