@strapi/design-system 1.9.0 → 1.10.0-alpha.0

package/dist/Button/utils.mjs

@@ -0,0 +1,153 @@
+import { SUCCESS_LIGHT, DANGER_LIGHT, TERTIARY, DEFAULT, SECONDARY, VARIANTS, LIGHT_VARIANTS, GHOST, DANGER, SUCCESS } from './constants.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const getVariantColorName = (variant) => {
+    if (variant === SUCCESS_LIGHT || variant === DANGER_LIGHT) {
+        return `${variant.substring(0, variant.lastIndexOf('-'))}`;
+    }
+    if (variant === TERTIARY) {
+        return 'neutral';
+    }
+    if (variant === DEFAULT || variant === SECONDARY || VARIANTS.every((vari) => vari !== variant)) {
+        return 'primary';
+    }
+    // @ts-expect-error ghost is a variant, but ghostXXX is not any color...
+    return `${variant}`;
+};
+const getDisabledStyle = ({ theme }) => {
+    return `
+    border: 1px solid ${theme.colors.neutral200};
+    background: ${theme.colors.neutral150};
+    ${Typography} {
+      color: ${theme.colors.neutral600};
+    }
+    svg {
+      > g, path {
+        fill: ${theme.colors.neutral600};
+      }
+    }
+  `;
+};
+const getHoverStyle = ({ theme, variant }) => {
+    if ([...LIGHT_VARIANTS, SECONDARY].includes(variant)) {
+        return `
+      background-color: ${theme.colors.neutral0};
+    `;
+    }
+    if (variant === TERTIARY) {
+        return `
+      background-color: ${theme.colors.neutral100};
+    `;
+    }
+    if (variant === GHOST) {
+        return `
+      background-color: ${theme.colors.neutral100};
+    `;
+    }
+    if (variant === DEFAULT) {
+        return `
+      border: 1px solid ${theme.colors.buttonPrimary500};
+      background: ${theme.colors.buttonPrimary500};
+    `;
+    }
+    return `
+    border: 1px solid ${theme.colors[`${getVariantColorName(variant)}500`]};
+    background: ${theme.colors[`${getVariantColorName(variant)}500`]};
+  `;
+};
+const getActiveStyle = ({ theme, variant }) => {
+    if ([...LIGHT_VARIANTS, SECONDARY].includes(variant)) {
+        return `
+      background-color: ${theme.colors.neutral0};
+      border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
+      ${Typography} {
+        color: ${theme.colors[`${getVariantColorName(variant)}600`]};
+      }
+      svg {
+        > g, path {
+          fill: ${theme.colors[`${getVariantColorName(variant)}600`]};
+        }
+      }
+    `;
+    }
+    if (variant === TERTIARY) {
+        return `
+      background-color: ${theme.colors.neutral150};
+    `;
+    }
+    return `
+    border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
+    background: ${theme.colors[`${getVariantColorName(variant)}600`]};
+  `;
+};
+const getVariantStyle = ({ theme, variant }) => {
+    switch (variant) {
+        case DANGER_LIGHT:
+        case SUCCESS_LIGHT:
+        case SECONDARY: {
+            return `
+          border: 1px solid ${theme.colors[`${getVariantColorName(variant)}200`]};
+          background: ${theme.colors[`${getVariantColorName(variant)}100`]};
+          ${Typography} {
+            color: ${theme.colors[`${getVariantColorName(variant)}700`]};
+          }
+          svg {
+            > g, path {
+              fill: ${theme.colors[`${getVariantColorName(variant)}700`]};
+            }
+          }
+        `;
+        }
+        case TERTIARY: {
+            return `
+          border: 1px solid ${theme.colors.neutral200};
+          background: ${theme.colors.neutral0};
+          ${Typography} {
+            color: ${theme.colors.neutral800};
+          }
+          svg {
+            > g, path {
+              fill: ${theme.colors.neutral800};
+            }
+          }
+        `;
+        }
+        case GHOST: {
+            return `
+        border: 1px solid transparent;
+        background: transparent;
+
+        ${Typography} {
+          color: ${theme.colors.neutral800};
+        }
+
+        svg {
+          > g, path {
+            fill: ${theme.colors.neutral500};
+          }
+        }
+      `;
+        }
+        case SUCCESS:
+        case DANGER: {
+            return `
+          border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
+          background: ${theme.colors[`${getVariantColorName(variant)}600`]};
+          ${Typography} {
+            color: ${theme.colors.neutral0};
+          }
+        `;
+        }
+        default: {
+            return `
+          svg {
+            > g, path {
+              fill: ${theme.colors.buttonNeutral0};
+            }
+          }
+        `;
+        }
+    }
+};
+
+export { getActiveStyle, getDisabledStyle, getHoverStyle, getVariantColorName, getVariantStyle };

package/dist/Card/Card.js

@@ -1,12 +1,17 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useMemo as a } from "react";
-import { CardContext as i } from "./CardContext.js";
-import { useId as l } from "../hooks/useId.js";
-import { Box as n } from "../Box/Box.js";
-const p = ({ id: o, ...t }) => {
-  const r = l(o), d = a(() => ({ id: r }), [r]);
-  return e(i.Provider, { value: d, children: e(n, { id: o, tabIndex: 0, hasRadius: !0, background: "neutral0", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", shadow: "tableShadow", as: "article", "aria-labelledby": `${r}-title`, ...t }) });
-};
-export {
-  p as Card
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const CardContext = require('./CardContext.js');
+const useId = require('../hooks/useId.js');
+const Box = require('../Box/Box.js');
+
+const Card = ({ id, ...props }) => {
+    const generatedId = useId.useId(id);
+    const context = React.useMemo(() => ({ id: generatedId }), [generatedId]);
+    return (jsxRuntime.jsx(CardContext.CardContext.Provider, { value: context, children: jsxRuntime.jsx(Box.Box, { id: id, tabIndex: 0, hasRadius: true, background: "neutral0", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", shadow: "tableShadow", as: "article", "aria-labelledby": `${generatedId}-title`, ...props }) }));
 };
+
+exports.Card = Card;

package/dist/Card/Card.mjs

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { CardContext } from './CardContext.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { Box } from '../Box/Box.mjs';
+
+const Card = ({ id, ...props }) => {
+    const generatedId = useId(id);
+    const context = useMemo(() => ({ id: generatedId }), [generatedId]);
+    return (jsx(CardContext.Provider, { value: context, children: jsx(Box, { id: id, tabIndex: 0, hasRadius: true, background: "neutral0", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", shadow: "tableShadow", as: "article", "aria-labelledby": `${generatedId}-title`, ...props }) }));
+};
+
+export { Card };

package/dist/Card/CardAction.js

@@ -1,20 +1,34 @@
-import e from "styled-components";
-import { Stack as n } from "../Stack/Stack.js";
-const i = e(n).attrs({
-  horizontal: !0,
-  spacing: 2
-})`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styled = require('styled-components');
+const Stack = require('../Stack/Stack.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const CardAction = styled__default.default(Stack.Stack).attrs({
+    horizontal: true,
+    spacing: 2,
+}) `
   position: absolute;
-  top: ${({ theme: t }) => t.spaces[3]};
-  right: ${({ position: t, theme: r }) => {
-  if (t === "end")
-    return r.spaces[3];
+  top: ${({ theme }) => theme.spaces[3]};
+  right: ${({ position, theme }) => {
+    // @ts-expect-error styled-components can't overwrite the position prop from Stack
+    if (position === 'end') {
+        return theme.spaces[3];
+    }
+    return undefined;
 }};
-  left: ${({ position: t, theme: r }) => {
-  if (t === "start")
-    return r.spaces[3];
+  left: ${({ position, theme }) => {
+    // @ts-expect-error styled-components can't overwrite the position prop from Stack
+    if (position === 'start') {
+        return theme.spaces[3];
+    }
+    return undefined;
 }};
 `;
-export {
-  i as CardAction
-};
+
+exports.CardAction = CardAction;

package/dist/Card/CardAction.mjs

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Stack } from '../Stack/Stack.mjs';
+
+const CardAction = styled(Stack).attrs({
+    horizontal: true,
+    spacing: 2,
+}) `
+  position: absolute;
+  top: ${({ theme }) => theme.spaces[3]};
+  right: ${({ position, theme }) => {
+    // @ts-expect-error styled-components can't overwrite the position prop from Stack
+    if (position === 'end') {
+        return theme.spaces[3];
+    }
+    return undefined;
+}};
+  left: ${({ position, theme }) => {
+    // @ts-expect-error styled-components can't overwrite the position prop from Stack
+    if (position === 'start') {
+        return theme.spaces[3];
+    }
+    return undefined;
+}};
+`;
+
+export { CardAction };

package/dist/Card/CardAsset.js

@@ -1,7 +1,16 @@
-import { jsx as t } from "react/jsx-runtime";
-import r from "styled-components";
-import { Flex as s } from "../Flex/Flex.js";
-const a = r.img`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const CardAssetImg = styled__default.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
@@ -10,19 +19,23 @@ const a = r.img`
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
-`, n = {
-  S: 88,
-  M: 164
-}, d = r.div`
+`;
+const sizes = {
+    S: 88,
+    M: 164,
+};
+const CardAssetWrapper = styled__default.default.div `
   display: flex;
   justify-content: center;
-  height: ${({ size: e }) => n[e] / 16}rem;
+  height: ${({ size }) => sizes[size] / 16}rem;
   width: 100%;
-  background: repeating-conic-gradient(${({ theme: e }) => e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
+  background: repeating-conic-gradient(${({ theme }) => theme.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};
-`, m = ({ size: e = "M", children: i, ...o }) => t(d, { size: e, children: i ? t(s, { children: i }) : t(a, { ...o, "aria-hidden": !0 }) });
-export {
-  m as CardAsset
+  border-top-left-radius: ${({ theme }) => theme.borderRadius};
+  border-top-right-radius: ${({ theme }) => theme.borderRadius};
+`;
+const CardAsset = ({ size = 'M', children, ...props }) => {
+    return (jsxRuntime.jsx(CardAssetWrapper, { size: size, children: children ? jsxRuntime.jsx(Flex.Flex, { children: children }) : jsxRuntime.jsx(CardAssetImg, { ...props, "aria-hidden": true }) }));
 };
+
+exports.CardAsset = CardAsset;

package/dist/Card/CardAsset.mjs

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Flex } from '../Flex/Flex.mjs';
+
+const CardAssetImg = styled.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
+  margin: 0;
+  padding: 0;
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+`;
+const sizes = {
+    S: 88,
+    M: 164,
+};
+const CardAssetWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  height: ${({ size }) => sizes[size] / 16}rem;
+  width: 100%;
+  background: repeating-conic-gradient(${({ theme }) => theme.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
+    20px;
+  border-top-left-radius: ${({ theme }) => theme.borderRadius};
+  border-top-right-radius: ${({ theme }) => theme.borderRadius};
+`;
+const CardAsset = ({ size = 'M', children, ...props }) => {
+    return (jsx(CardAssetWrapper, { size: size, children: children ? jsx(Flex, { children: children }) : jsx(CardAssetImg, { ...props, "aria-hidden": true }) }));
+};
+
+export { CardAsset };

package/dist/Card/CardBadge.js

@@ -1,12 +1,22 @@
-import { jsx as o } from "react/jsx-runtime";
-import e from "styled-components";
-import { Badge as t } from "../Badge/Badge.js";
-const a = e.div`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const Badge = require('../Badge/Badge.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const CardBadgeWrapper = styled__default.default.div `
   margin-left: auto;
   flex-shrink: 0;
-`, i = e(t)`
-  margin-left: ${({ theme: r }) => r.spaces[1]};
-`, n = (r) => o(a, { children: o(i, { ...r }) });
-export {
-  n as CardBadge
-};
+`;
+const BadgePosition = styled__default.default(Badge.Badge) `
+  margin-left: ${({ theme }) => theme.spaces[1]};
+`;
+const CardBadge = (props) => (jsxRuntime.jsx(CardBadgeWrapper, { children: jsxRuntime.jsx(BadgePosition, { ...props }) }));
+
+exports.CardBadge = CardBadge;

package/dist/Card/CardBadge.mjs

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Badge } from '../Badge/Badge.mjs';
+
+const CardBadgeWrapper = styled.div `
+  margin-left: auto;
+  flex-shrink: 0;
+`;
+const BadgePosition = styled(Badge) `
+  margin-left: ${({ theme }) => theme.spaces[1]};
+`;
+const CardBadge = (props) => (jsx(CardBadgeWrapper, { children: jsx(BadgePosition, { ...props }) }));
+
+export { CardBadge };

package/dist/Card/CardBody.js

@@ -1,7 +1,13 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Box as r } from "../Box/Box.js";
-import { Flex as d } from "../Flex/Flex.js";
-const n = (t) => o(r, { paddingLeft: 3, paddingRight: 3, paddingTop: 2, paddingBottom: 2, children: o(d, { ...t, alignItems: "flex-start" }) });
-export {
-  n as CardBody
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+
+const CardBody = (props) => {
+    return (jsxRuntime.jsx(Box.Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 2, paddingBottom: 2, children: jsxRuntime.jsx(Flex.Flex, { ...props, alignItems: "flex-start" }) }));
 };
+
+exports.CardBody = CardBody;

package/dist/Card/CardBody.mjs

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const CardBody = (props) => {
+    return (jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 2, paddingBottom: 2, children: jsx(Flex, { ...props, alignItems: "flex-start" }) }));
+};
+
+export { CardBody };

package/dist/Card/CardCheckbox.js

@@ -1,14 +1,17 @@
-import { jsx as r } from "react/jsx-runtime";
-import { CardAction as i } from "./CardAction.js";
-import { useCard as e } from "./CardContext.js";
-import { BaseCheckbox as a } from "../BaseCheckbox/BaseCheckbox.js";
-const n = (o) => {
-  const { id: t } = e();
-  return (
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const CardAction = require('./CardAction.js');
+const CardContext = require('./CardContext.js');
+const BaseCheckbox = require('../BaseCheckbox/BaseCheckbox.js');
+
+const CardCheckbox = (props) => {
+    const { id } = CardContext.useCard();
+    return (
     // @ts-expect-error styled-components can't overwrite the position prop from Stack
-    r(i, { position: "start", children: r(a, { "aria-labelledby": `${t}-title`, ...o }) })
-  );
-};
-export {
-  n as CardCheckbox
+    jsxRuntime.jsx(CardAction.CardAction, { position: "start", children: jsxRuntime.jsx(BaseCheckbox.BaseCheckbox, { "aria-labelledby": `${id}-title`, ...props }) }));
 };
+
+exports.CardCheckbox = CardCheckbox;

package/dist/Card/CardCheckbox.mjs

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { CardAction } from './CardAction.mjs';
+import { useCard } from './CardContext.mjs';
+import { BaseCheckbox } from '../BaseCheckbox/BaseCheckbox.mjs';
+
+const CardCheckbox = (props) => {
+    const { id } = useCard();
+    return (
+    // @ts-expect-error styled-components can't overwrite the position prop from Stack
+    jsx(CardAction, { position: "start", children: jsx(BaseCheckbox, { "aria-labelledby": `${id}-title`, ...props }) }));
+};
+
+export { CardCheckbox };

package/dist/Card/CardContent.js

@@ -1,9 +1,20 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "styled-components";
-import { Box as m } from "../Box/Box.js";
-const n = e(m)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const BreakBox = styled__default.default(Box.Box) `
   word-break: break-all;
-`, l = ({ children: r, ...o }) => t(n, { ...o, children: r });
-export {
-  l as CardContent
+`;
+const CardContent = ({ children, ...props }) => {
+    return jsxRuntime.jsx(BreakBox, { ...props, children: children });
 };
+
+exports.CardContent = CardContent;

package/dist/Card/CardContent.mjs

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Box } from '../Box/Box.mjs';
+
+const BreakBox = styled(Box) `
+  word-break: break-all;
+`;
+const CardContent = ({ children, ...props }) => {
+    return jsx(BreakBox, { ...props, children: children });
+};
+
+export { CardContent };

package/dist/Card/CardContext.js

@@ -1,6 +1,11 @@
-import { createContext as t, useContext as e } from "react";
-const o = t({ id: "" }), n = () => e(o);
-export {
-  o as CardContext,
-  n as useCard
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const CardContext = React.createContext({ id: '' });
+const useCard = () => React.useContext(CardContext);
+
+exports.CardContext = CardContext;
+exports.useCard = useCard;

package/dist/Card/CardContext.mjs

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+
+const CardContext = createContext({ id: '' });
+const useCard = () => useContext(CardContext);
+
+export { CardContext, useCard };

package/dist/Card/CardHeader.js

@@ -1,9 +1,20 @@
-import { jsx as o } from "react/jsx-runtime";
-import t from "styled-components";
-import { Flex as e } from "../Flex/Flex.js";
-const i = t(e)`
-  border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral150};
-`, a = (r) => o(i, { position: "relative", justifyContent: "center", ...r });
-export {
-  a as CardHeader
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const CardHeaderWrapper = styled__default.default(Flex.Flex) `
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const CardHeader = (props) => {
+    return jsxRuntime.jsx(CardHeaderWrapper, { position: "relative", justifyContent: "center", ...props });
 };
+
+exports.CardHeader = CardHeader;

package/dist/Card/CardHeader.mjs

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Flex } from '../Flex/Flex.mjs';
+
+const CardHeaderWrapper = styled(Flex) `
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const CardHeader = (props) => {
+    return jsx(CardHeaderWrapper, { position: "relative", justifyContent: "center", ...props });
+};
+
+export { CardHeader };

package/dist/Card/CardTimer.js

@@ -1,7 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Box as i } from "../Box/Box.js";
-import { Typography as a } from "../Typography/Typography.js";
-const p = ({ children: o, ...t }) => r(i, { as: "time", background: "neutral800", bottom: 1, right: 1, color: "neutral0", hasRadius: !0, position: "absolute", padding: 1, ...t, children: r(a, { variant: "pi", textColor: "neutral0", children: o }) });
-export {
-  p as CardTimer
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Box = require('../Box/Box.js');
+const Typography = require('../Typography/Typography.js');
+
+const CardTimer = ({ children, ...props }) => (jsxRuntime.jsx(Box.Box, { as: "time", background: "neutral800", bottom: 1, right: 1, color: "neutral0", hasRadius: true, position: "absolute", padding: 1, ...props, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "neutral0", children: children }) }));
+
+exports.CardTimer = CardTimer;

package/dist/Card/CardTimer.mjs

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../Box/Box.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const CardTimer = ({ children, ...props }) => (jsx(Box, { as: "time", background: "neutral800", bottom: 1, right: 1, color: "neutral0", hasRadius: true, position: "absolute", padding: 1, ...props, children: jsx(Typography, { variant: "pi", textColor: "neutral0", children: children }) }));
+
+export { CardTimer };