@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.0

package/dist/Box/Box.js

@@ -1,111 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const styled = require('styled-components');
-const handleResponsiveValues = require('../helpers/handleResponsiveValues.js');
-const theme = require('../helpers/theme.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-/**
- * Prevents these attributes from being spread on the DOM node
- */
-const transientProps = {
-    color: true,
-    cursor: true,
-    height: true,
-    width: true,
-};
-const Box = styled__default.default.div.withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  // Font
-  font-size: ${({ fontSize, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.fontSizes, fontSize, fontSize)};
-
-  // Colors
-  background: ${({ theme: theme$1, background }) => theme.extractStyleFromTheme(theme$1.colors, background, background)};
-  color: ${({ theme: theme$1, color }) => theme.extractStyleFromTheme(theme$1.colors, color, undefined)};
-
-  // Spaces
-  ${({ theme, padding }) => handleResponsiveValues('padding', padding, theme)}
-  ${({ theme, paddingTop }) => handleResponsiveValues('padding-top', paddingTop, theme)}
-  ${({ theme, paddingRight }) => handleResponsiveValues('padding-right', paddingRight, theme)}
-  ${({ theme, paddingBottom }) => handleResponsiveValues('padding-bottom', paddingBottom, theme)}
-  ${({ theme, paddingLeft }) => handleResponsiveValues('padding-left', paddingLeft, theme)}
-  ${({ theme, marginLeft }) => handleResponsiveValues('margin-left', marginLeft, theme)}
-  ${({ theme, marginRight }) => handleResponsiveValues('margin-right', marginRight, theme)}
-  ${({ theme, marginTop }) => handleResponsiveValues('margin-top', marginTop, theme)}
-  ${({ theme, marginBottom }) => handleResponsiveValues('margin-bottom', marginBottom, theme)}
-
-  // Responsive hiding
-  ${({ theme, hiddenS }) => (hiddenS ? `${theme.mediaQueries.tablet} { display: none; }` : undefined)}
-  ${({ theme, hiddenXS }) => (hiddenXS ? `${theme.mediaQueries.mobile} { display: none; }` : undefined)}
-  
-
-  // Borders
-  border-radius: ${({ theme, hasRadius, borderRadius }) => (hasRadius ? theme.borderRadius : borderRadius)};
-  border-style: ${({ borderStyle }) => borderStyle};
-  border-width: ${({ borderWidth }) => borderWidth};
-  border-color: ${({ borderColor, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.colors, borderColor, undefined)};
-  border: ${({ theme, borderColor, borderStyle, borderWidth }) => {
-    // This condition prevents borderColor from override the border-color attribute when not passing borderStyle nor borderWidth
-    if (borderColor && !borderStyle && typeof borderWidth === 'undefined') {
-        return `1px solid ${theme.colors[borderColor]}`;
-    }
-    // eslint-disable-next-line consistent-return
-    return undefined;
-}};
-
-  // Shadows
-  box-shadow: ${({ theme: theme$1, shadow }) => theme.extractStyleFromTheme(theme$1.shadows, shadow, undefined)};
-
-  // Handlers
-  pointer-events: ${({ pointerEvents }) => pointerEvents};
-  &:hover {
-    ${({ _hover, theme }) => (_hover ? _hover(theme) : undefined)}
-  }
-
-  // Display
-  display: ${({ display }) => display};
-
-  // Position
-  position: ${({ position }) => position};
-  left: ${({ left, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, left, left)};
-  right: ${({ right, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, right, right)};
-  top: ${({ top, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, top, top)};
-  bottom: ${({ bottom, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, bottom, bottom)};
-  z-index: ${({ zIndex }) => zIndex};
-  overflow: ${({ overflow }) => overflow};
-
-  // Size
-  width: ${({ width, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, width, width)};
-  max-width: ${({ maxWidth, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, maxWidth, maxWidth)};
-  min-width: ${({ minWidth, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, minWidth, minWidth)};
-  height: ${({ height, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, height, height)};
-  max-height: ${({ maxHeight, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, maxHeight, maxHeight)};
-  min-height: ${({ minHeight, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.spaces, minHeight, minHeight)};
-
-  // Animation
-  transition: ${({ transition }) => transition};
-  transform: ${({ transform }) => transform};
-  animation: ${({ animation }) => animation};
-
-  //Flexbox children props
-  flex-shrink: ${({ shrink }) => shrink};
-  flex-grow: ${({ grow }) => grow};
-  flex-basis: ${({ basis }) => basis};
-  flex: ${({ flex }) => flex};
-
-  // Text
-  text-align: ${({ textAlign }) => textAlign};
-  text-transform: ${({ textTransform }) => textTransform};
-  line-height: ${({ theme: theme$1, lineHeight }) => theme.extractStyleFromTheme(theme$1.lineHeights, lineHeight, lineHeight)};
-
-  // Cursor
-  cursor: ${({ cursor }) => cursor};
-`;
-
-exports.Box = Box;

package/dist/Box/Box.mjs

@@ -1,103 +0,0 @@
-import styled from 'styled-components';
-import handleResponsiveValues from '../helpers/handleResponsiveValues.mjs';
-import { extractStyleFromTheme } from '../helpers/theme.mjs';
-
-/**
- * Prevents these attributes from being spread on the DOM node
- */
-const transientProps = {
-    color: true,
-    cursor: true,
-    height: true,
-    width: true,
-};
-const Box = styled.div.withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  // Font
-  font-size: ${({ fontSize, theme }) => extractStyleFromTheme(theme.fontSizes, fontSize, fontSize)};
-
-  // Colors
-  background: ${({ theme, background }) => extractStyleFromTheme(theme.colors, background, background)};
-  color: ${({ theme, color }) => extractStyleFromTheme(theme.colors, color, undefined)};
-
-  // Spaces
-  ${({ theme, padding }) => handleResponsiveValues('padding', padding, theme)}
-  ${({ theme, paddingTop }) => handleResponsiveValues('padding-top', paddingTop, theme)}
-  ${({ theme, paddingRight }) => handleResponsiveValues('padding-right', paddingRight, theme)}
-  ${({ theme, paddingBottom }) => handleResponsiveValues('padding-bottom', paddingBottom, theme)}
-  ${({ theme, paddingLeft }) => handleResponsiveValues('padding-left', paddingLeft, theme)}
-  ${({ theme, marginLeft }) => handleResponsiveValues('margin-left', marginLeft, theme)}
-  ${({ theme, marginRight }) => handleResponsiveValues('margin-right', marginRight, theme)}
-  ${({ theme, marginTop }) => handleResponsiveValues('margin-top', marginTop, theme)}
-  ${({ theme, marginBottom }) => handleResponsiveValues('margin-bottom', marginBottom, theme)}
-
-  // Responsive hiding
-  ${({ theme, hiddenS }) => (hiddenS ? `${theme.mediaQueries.tablet} { display: none; }` : undefined)}
-  ${({ theme, hiddenXS }) => (hiddenXS ? `${theme.mediaQueries.mobile} { display: none; }` : undefined)}
-  
-
-  // Borders
-  border-radius: ${({ theme, hasRadius, borderRadius }) => (hasRadius ? theme.borderRadius : borderRadius)};
-  border-style: ${({ borderStyle }) => borderStyle};
-  border-width: ${({ borderWidth }) => borderWidth};
-  border-color: ${({ borderColor, theme }) => extractStyleFromTheme(theme.colors, borderColor, undefined)};
-  border: ${({ theme, borderColor, borderStyle, borderWidth }) => {
-    // This condition prevents borderColor from override the border-color attribute when not passing borderStyle nor borderWidth
-    if (borderColor && !borderStyle && typeof borderWidth === 'undefined') {
-        return `1px solid ${theme.colors[borderColor]}`;
-    }
-    // eslint-disable-next-line consistent-return
-    return undefined;
-}};
-
-  // Shadows
-  box-shadow: ${({ theme, shadow }) => extractStyleFromTheme(theme.shadows, shadow, undefined)};
-
-  // Handlers
-  pointer-events: ${({ pointerEvents }) => pointerEvents};
-  &:hover {
-    ${({ _hover, theme }) => (_hover ? _hover(theme) : undefined)}
-  }
-
-  // Display
-  display: ${({ display }) => display};
-
-  // Position
-  position: ${({ position }) => position};
-  left: ${({ left, theme }) => extractStyleFromTheme(theme.spaces, left, left)};
-  right: ${({ right, theme }) => extractStyleFromTheme(theme.spaces, right, right)};
-  top: ${({ top, theme }) => extractStyleFromTheme(theme.spaces, top, top)};
-  bottom: ${({ bottom, theme }) => extractStyleFromTheme(theme.spaces, bottom, bottom)};
-  z-index: ${({ zIndex }) => zIndex};
-  overflow: ${({ overflow }) => overflow};
-
-  // Size
-  width: ${({ width, theme }) => extractStyleFromTheme(theme.spaces, width, width)};
-  max-width: ${({ maxWidth, theme }) => extractStyleFromTheme(theme.spaces, maxWidth, maxWidth)};
-  min-width: ${({ minWidth, theme }) => extractStyleFromTheme(theme.spaces, minWidth, minWidth)};
-  height: ${({ height, theme }) => extractStyleFromTheme(theme.spaces, height, height)};
-  max-height: ${({ maxHeight, theme }) => extractStyleFromTheme(theme.spaces, maxHeight, maxHeight)};
-  min-height: ${({ minHeight, theme }) => extractStyleFromTheme(theme.spaces, minHeight, minHeight)};
-
-  // Animation
-  transition: ${({ transition }) => transition};
-  transform: ${({ transform }) => transform};
-  animation: ${({ animation }) => animation};
-
-  //Flexbox children props
-  flex-shrink: ${({ shrink }) => shrink};
-  flex-grow: ${({ grow }) => grow};
-  flex-basis: ${({ basis }) => basis};
-  flex: ${({ flex }) => flex};
-
-  // Text
-  text-align: ${({ textAlign }) => textAlign};
-  text-transform: ${({ textTransform }) => textTransform};
-  line-height: ${({ theme, lineHeight }) => extractStyleFromTheme(theme.lineHeights, lineHeight, lineHeight)};
-
-  // Cursor
-  cursor: ${({ cursor }) => cursor};
-`;
-
-export { Box };

package/dist/Box/__tests__/Box.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Box/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Box = require('./Box.js');
-
-
-
-exports.Box = Box.Box;

package/dist/Box/index.mjs

@@ -1 +0,0 @@
-export { Box } from './Box.mjs';

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,41 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const icons = require('@strapi/icons');
-const styled = require('styled-components');
-const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const Flex = require('../Flex/Flex.js');
-const Box = require('../Box/Box.js');
-const Typography = require('../Typography/Typography.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const CrumbWrapper = styled__default.default(Flex.Flex) `
-  svg {
-    height: ${10 / 16}rem;
-    width: ${10 / 16}rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-  :last-of-type ${Box.Box} {
-    display: none;
-  }
-  :last-of-type ${Typography.Typography} {
-    color: ${({ theme }) => theme.colors.neutral800};
-    font-weight: ${({ theme }) => theme.fontWeights.bold};
-  }
-`;
-const Crumb = ({ children }) => {
-    return (jsxRuntime.jsxs(CrumbWrapper, { inline: true, as: "li", children: [jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "neutral600", children: children }), jsxRuntime.jsx(Box.Box, { "aria-hidden": true, paddingLeft: 3, paddingRight: 3, children: jsxRuntime.jsx(icons.ChevronRight, {}) })] }));
-};
-Crumb.displayName = 'Crumb';
-const Breadcrumbs = ({ children, label, ...props }) => (jsxRuntime.jsxs(Flex.Flex, { ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: label }), jsxRuntime.jsx("ol", { "aria-hidden": true, children: children })] }));
-Breadcrumbs.displayName = 'Breadcrumbs';
-
-exports.Breadcrumbs = Breadcrumbs;
-exports.Crumb = Crumb;

package/dist/Breadcrumbs/Breadcrumbs.mjs

@@ -1,32 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ChevronRight } from '@strapi/icons';
-import styled from 'styled-components';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const CrumbWrapper = styled(Flex) `
-  svg {
-    height: ${10 / 16}rem;
-    width: ${10 / 16}rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-  :last-of-type ${Box} {
-    display: none;
-  }
-  :last-of-type ${Typography} {
-    color: ${({ theme }) => theme.colors.neutral800};
-    font-weight: ${({ theme }) => theme.fontWeights.bold};
-  }
-`;
-const Crumb = ({ children }) => {
-    return (jsxs(CrumbWrapper, { inline: true, as: "li", children: [jsx(Typography, { variant: "pi", textColor: "neutral600", children: children }), jsx(Box, { "aria-hidden": true, paddingLeft: 3, paddingRight: 3, children: jsx(ChevronRight, {}) })] }));
-};
-Crumb.displayName = 'Crumb';
-const Breadcrumbs = ({ children, label, ...props }) => (jsxs(Flex, { ...props, children: [jsx(VisuallyHidden, { children: label }), jsx("ol", { "aria-hidden": true, children: children })] }));
-Breadcrumbs.displayName = 'Breadcrumbs';
-
-export { Breadcrumbs, Crumb };

package/dist/Breadcrumbs/index.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Breadcrumbs = require('./Breadcrumbs.js');
-
-
-
-exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
-exports.Crumb = Breadcrumbs.Crumb;

package/dist/Breadcrumbs/index.mjs

@@ -1 +0,0 @@
-export { Breadcrumbs, Crumb } from './Breadcrumbs.mjs';

package/dist/Button/Button.js

@@ -1,71 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const icons = require('@strapi/icons');
-const styled = require('styled-components');
-const constants = require('./constants.js');
-const utils = require('./utils.js');
-const BaseButton = require('../BaseButton/BaseButton.js');
-const Box = require('../Box/Box.js');
-const Typography = require('../Typography/Typography.js');
-const Flex = require('../Flex/Flex.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const React__default = /*#__PURE__*/_interopDefault(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const rotation = styled.keyframes `
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-`;
-const LoaderAnimated = styled__default.default(icons.Loader) `
-  animation: ${rotation} 2s infinite linear;
-  will-change: transform;
-`;
-const ButtonWrapper = styled__default.default(BaseButton.BaseButton) `
-  height: ${({ theme, size }) => theme.sizes.button[size]};
-
-  svg {
-    height: ${12 / 16}rem;
-    width: auto;
-  }
-
-  &[aria-disabled='true'] {
-    ${utils.getDisabledStyle}
-
-    &:active {
-      ${utils.getDisabledStyle}
-    }
-  }
-
-  &:hover {
-    ${utils.getHoverStyle}
-  }
-
-  &:active {
-    ${utils.getActiveStyle}
-  }
-
-  ${utils.getVariantStyle}
-`;
-const Button = React__default.default.forwardRef(({ variant = constants.DEFAULT, startIcon, endIcon, disabled = false, children, onClick, size = constants.BUTTON_SIZES[0], loading = false, fullWidth = false, ...props }, ref) => {
-    const isDisabled = disabled || loading;
-    const handleClick = (e) => {
-        if (!isDisabled && onClick) {
-            onClick(e);
-        }
-    };
-    return (jsxRuntime.jsxs(ButtonWrapper, { ref: ref, "aria-disabled": isDisabled, disabled: isDisabled, size: size, variant: variant, onClick: handleClick, fullWidth: fullWidth, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: fullWidth, justifyContent: fullWidth ? 'center' : undefined, paddingLeft: 4, paddingRight: 4, width: fullWidth ? '100%' : undefined, ...props, children: [(startIcon || loading) && jsxRuntime.jsx(Box.Box, { "aria-hidden": true, children: loading ? jsxRuntime.jsx(LoaderAnimated, {}) : startIcon }), jsxRuntime.jsx(Typography.Typography, { variant: size === 'S' ? 'pi' : undefined, fontWeight: "bold", textColor: "buttonNeutral0", children: children }), endIcon && jsxRuntime.jsx(Flex.Flex, { "aria-hidden": true, children: endIcon })] }));
-});
-Button.displayName = 'Button';
-
-exports.Button = Button;
-exports.ButtonWrapper = ButtonWrapper;

package/dist/Button/Button.mjs

@@ -1,61 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { Loader } from '@strapi/icons';
-import styled, { keyframes } from 'styled-components';
-import { DEFAULT, BUTTON_SIZES } from './constants.mjs';
-import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from './utils.mjs';
-import { BaseButton } from '../BaseButton/BaseButton.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-const rotation = keyframes `
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-`;
-const LoaderAnimated = styled(Loader) `
-  animation: ${rotation} 2s infinite linear;
-  will-change: transform;
-`;
-const ButtonWrapper = styled(BaseButton) `
-  height: ${({ theme, size }) => theme.sizes.button[size]};
-
-  svg {
-    height: ${12 / 16}rem;
-    width: auto;
-  }
-
-  &[aria-disabled='true'] {
-    ${getDisabledStyle}
-
-    &:active {
-      ${getDisabledStyle}
-    }
-  }
-
-  &:hover {
-    ${getHoverStyle}
-  }
-
-  &:active {
-    ${getActiveStyle}
-  }
-
-  ${getVariantStyle}
-`;
-const Button = React__default.forwardRef(({ variant = DEFAULT, startIcon, endIcon, disabled = false, children, onClick, size = BUTTON_SIZES[0], loading = false, fullWidth = false, ...props }, ref) => {
-    const isDisabled = disabled || loading;
-    const handleClick = (e) => {
-        if (!isDisabled && onClick) {
-            onClick(e);
-        }
-    };
-    return (jsxs(ButtonWrapper, { ref: ref, "aria-disabled": isDisabled, disabled: isDisabled, size: size, variant: variant, onClick: handleClick, fullWidth: fullWidth, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: fullWidth, justifyContent: fullWidth ? 'center' : undefined, paddingLeft: 4, paddingRight: 4, width: fullWidth ? '100%' : undefined, ...props, children: [(startIcon || loading) && jsx(Box, { "aria-hidden": true, children: loading ? jsx(LoaderAnimated, {}) : startIcon }), jsx(Typography, { variant: size === 'S' ? 'pi' : undefined, fontWeight: "bold", textColor: "buttonNeutral0", children: children }), endIcon && jsx(Flex, { "aria-hidden": true, children: endIcon })] }));
-});
-Button.displayName = 'Button';
-
-export { Button, ButtonWrapper };

package/dist/Button/__tests__/utils.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Button/constants.js

@@ -1,27 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const SUCCESS_LIGHT = 'success-light';
-const DANGER_LIGHT = 'danger-light';
-const DEFAULT = 'default';
-const TERTIARY = 'tertiary';
-const SECONDARY = 'secondary';
-const DANGER = 'danger';
-const SUCCESS = 'success';
-const GHOST = 'ghost';
-const LIGHT_VARIANTS = [SUCCESS_LIGHT, DANGER_LIGHT];
-const VARIANTS = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS];
-const BUTTON_SIZES = ['S', 'M', 'L'];
-
-exports.BUTTON_SIZES = BUTTON_SIZES;
-exports.DANGER = DANGER;
-exports.DANGER_LIGHT = DANGER_LIGHT;
-exports.DEFAULT = DEFAULT;
-exports.GHOST = GHOST;
-exports.LIGHT_VARIANTS = LIGHT_VARIANTS;
-exports.SECONDARY = SECONDARY;
-exports.SUCCESS = SUCCESS;
-exports.SUCCESS_LIGHT = SUCCESS_LIGHT;
-exports.TERTIARY = TERTIARY;
-exports.VARIANTS = VARIANTS;

package/dist/Button/constants.mjs

@@ -1,13 +0,0 @@
-const SUCCESS_LIGHT = 'success-light';
-const DANGER_LIGHT = 'danger-light';
-const DEFAULT = 'default';
-const TERTIARY = 'tertiary';
-const SECONDARY = 'secondary';
-const DANGER = 'danger';
-const SUCCESS = 'success';
-const GHOST = 'ghost';
-const LIGHT_VARIANTS = [SUCCESS_LIGHT, DANGER_LIGHT];
-const VARIANTS = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS];
-const BUTTON_SIZES = ['S', 'M', 'L'];
-
-export { BUTTON_SIZES, DANGER, DANGER_LIGHT, DEFAULT, GHOST, LIGHT_VARIANTS, SECONDARY, SUCCESS, SUCCESS_LIGHT, TERTIARY, VARIANTS };

package/dist/Button/index.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Button = require('./Button.js');
-
-
-
-exports.Button = Button.Button;
-exports.ButtonWrapper = Button.ButtonWrapper;

package/dist/Button/index.mjs

@@ -1 +0,0 @@
-export { Button, ButtonWrapper } from './Button.mjs';

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;