@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/dist/Button/utils.js

@@ -1,161 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const constants = require('./constants.js');
-const Typography = require('../Typography/Typography.js');
-
-const getVariantColorName = (variant) => {
-    if (variant === constants.SUCCESS_LIGHT || variant === constants.DANGER_LIGHT) {
-        return `${variant.substring(0, variant.lastIndexOf('-'))}`;
-    }
-    if (variant === constants.TERTIARY) {
-        return 'neutral';
-    }
-    if (variant === constants.DEFAULT || variant === constants.SECONDARY || constants.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.Typography} {
-      color: ${theme.colors.neutral600};
-    }
-    svg {
-      > g, path {
-        fill: ${theme.colors.neutral600};
-      }
-    }
-  `;
-};
-const getHoverStyle = ({ theme, variant }) => {
-    if ([...constants.LIGHT_VARIANTS, constants.SECONDARY].includes(variant)) {
-        return `
-      background-color: ${theme.colors.neutral0};
-    `;
-    }
-    if (variant === constants.TERTIARY) {
-        return `
-      background-color: ${theme.colors.neutral100};
-    `;
-    }
-    if (variant === constants.GHOST) {
-        return `
-      background-color: ${theme.colors.neutral100};
-    `;
-    }
-    if (variant === constants.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 ([...constants.LIGHT_VARIANTS, constants.SECONDARY].includes(variant)) {
-        return `
-      background-color: ${theme.colors.neutral0};
-      border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
-      ${Typography.Typography} {
-        color: ${theme.colors[`${getVariantColorName(variant)}600`]};
-      }
-      svg {
-        > g, path {
-          fill: ${theme.colors[`${getVariantColorName(variant)}600`]};
-        }
-      }
-    `;
-    }
-    if (variant === constants.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 constants.DANGER_LIGHT:
-        case constants.SUCCESS_LIGHT:
-        case constants.SECONDARY: {
-            return `
-          border: 1px solid ${theme.colors[`${getVariantColorName(variant)}200`]};
-          background: ${theme.colors[`${getVariantColorName(variant)}100`]};
-          ${Typography.Typography} {
-            color: ${theme.colors[`${getVariantColorName(variant)}700`]};
-          }
-          svg {
-            > g, path {
-              fill: ${theme.colors[`${getVariantColorName(variant)}700`]};
-            }
-          }
-        `;
-        }
-        case constants.TERTIARY: {
-            return `
-          border: 1px solid ${theme.colors.neutral200};
-          background: ${theme.colors.neutral0};
-          ${Typography.Typography} {
-            color: ${theme.colors.neutral800};
-          }
-          svg {
-            > g, path {
-              fill: ${theme.colors.neutral800};
-            }
-          }
-        `;
-        }
-        case constants.GHOST: {
-            return `
-        border: 1px solid transparent;
-        background: transparent;
-
-        ${Typography.Typography} {
-          color: ${theme.colors.neutral800};
-        }
-
-        svg {
-          > g, path {
-            fill: ${theme.colors.neutral500};
-          }
-        }
-      `;
-        }
-        case constants.SUCCESS:
-        case constants.DANGER: {
-            return `
-          border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
-          background: ${theme.colors[`${getVariantColorName(variant)}600`]};
-          ${Typography.Typography} {
-            color: ${theme.colors.neutral0};
-          }
-        `;
-        }
-        default: {
-            return `
-          svg {
-            > g, path {
-              fill: ${theme.colors.buttonNeutral0};
-            }
-          }
-        `;
-        }
-    }
-};
-
-exports.getActiveStyle = getActiveStyle;
-exports.getDisabledStyle = getDisabledStyle;
-exports.getHoverStyle = getHoverStyle;
-exports.getVariantColorName = getVariantColorName;
-exports.getVariantStyle = getVariantStyle;

package/dist/Button/utils.mjs

@@ -1,153 +0,0 @@
-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,17 +0,0 @@
-'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

@@ -1,13 +0,0 @@
-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,34 +0,0 @@
-'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 }) => 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;
-}};
-`;
-
-exports.CardAction = CardAction;

package/dist/Card/CardAction.mjs

@@ -1,26 +0,0 @@
-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,41 +0,0 @@
-'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
-  margin: 0;
-  padding: 0;
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-`;
-const sizes = {
-    S: 88,
-    M: 164,
-};
-const CardAssetWrapper = styled__default.default.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 (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

@@ -1,33 +0,0 @@
-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,22 +0,0 @@
-'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;
-`;
-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

@@ -1,14 +0,0 @@
-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,13 +0,0 @@
-'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

@@ -1,9 +0,0 @@
-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,17 +0,0 @@
-'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
-    jsxRuntime.jsx(CardAction.CardAction, { position: "start", children: jsxRuntime.jsx(BaseCheckbox.BaseCheckbox, { "aria-labelledby": `${id}-title`, ...props }) }));
-};
-
-exports.CardCheckbox = CardCheckbox;

package/dist/Card/CardCheckbox.mjs

@@ -1,13 +0,0 @@
-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,20 +0,0 @@
-'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;
-`;
-const CardContent = ({ children, ...props }) => {
-    return jsxRuntime.jsx(BreakBox, { ...props, children: children });
-};
-
-exports.CardContent = CardContent;

package/dist/Card/CardContent.mjs

@@ -1,12 +0,0 @@
-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,11 +0,0 @@
-'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

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

package/dist/Card/CardHeader.js

@@ -1,20 +0,0 @@
-'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

@@ -1,12 +0,0 @@
-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 };