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

package/dist/BaseRadio/BaseRadio.js

@@ -1,17 +1,27 @@
-import { jsx as f } from "react/jsx-runtime";
-import u, { useContext as b } from "react";
-import g from "styled-components";
-import { RadioContext as h } from "./context.js";
-import { getRadioSize as r, getSelectedRadioSize as t, getSelectedRadioPosition as d } from "./utils.js";
-import { useId as $ } from "../hooks/useId.js";
-const y = g.input`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const context = require('./context.js');
+const utils = require('./utils.js');
+const useId = require('../hooks/useId.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const RadioInput = styled__default.default.input `
   margin: 0;
   padding: 0;
-  background-color: ${({ theme: e }) => e.colors.neutral0};
-  border: 1px solid ${({ theme: e }) => e.colors.primary600};
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.primary600};
   border-radius: 50%;
-  height: ${({ size: e }) => typeof e == "number" ? e : r(e)};
-  width: ${({ size: e }) => typeof e == "number" ? e : r(e)};
+  height: ${({ size }) => (typeof size === 'number' ? size : utils.getRadioSize(size))};
+  width: ${({ size }) => (typeof size === 'number' ? size : utils.getRadioSize(size))};
   -webkit-appearance: none;
 
   &:after {
@@ -20,39 +30,29 @@ const y = g.input`
     position: relative;
     z-index: 1;
     display: block;
-    height: ${({ size: e }) => typeof e == "number" ? e : t(e)};
-    width: ${({ size: e }) => typeof e == "number" ? e : t(e)};
-    left: ${d};
-    top: ${d};
+    height: ${({ size }) => (typeof size === 'number' ? size : utils.getSelectedRadioSize(size))};
+    width: ${({ size }) => (typeof size === 'number' ? size : utils.getSelectedRadioSize(size))};
+    left: ${utils.getSelectedRadioPosition};
+    top: ${utils.getSelectedRadioPosition};
   }
 
   &:checked:after {
-    background: ${({ theme: e }) => e.colors.primary600};
+    background: ${({ theme }) => theme.colors.primary600};
   }
 
   &:disabled {
-    border: 1px solid ${({ theme: e }) => e.colors.neutral300};
-    background: ${({ theme: e }) => e.colors.neutral200};
+    border: 1px solid ${({ theme }) => theme.colors.neutral300};
+    background: ${({ theme }) => theme.colors.neutral200};
   }
-`, R = u.forwardRef(({ value: e, disabled: a = !1, ...n }, i) => {
-  const c = $(), { onChange: l, selected: p, name: m, size: s } = b(h), o = p === e;
-  return f(y, {
-    ref: i,
-    type: "radio",
-    name: m,
-    value: e,
-    tabIndex: o ? 0 : -1,
-    "aria-checked": o,
-    checked: o,
-    disabled: a,
-    id: c,
-    // @ts-expect-error size is a html prop already.
-    size: s,
-    onChange: l,
-    ...n
-  });
+`;
+const BaseRadio = React__default.default.forwardRef(({ value, disabled = false, ...props }, ref) => {
+    const generatedId = useId.useId();
+    const { onChange, selected, name, size } = React.useContext(context.RadioContext);
+    const isSelected = selected === value;
+    return (jsxRuntime.jsx(RadioInput, { ref: ref, type: "radio", name: name, value: value, tabIndex: isSelected ? 0 : -1, "aria-checked": isSelected, checked: isSelected, disabled: disabled, id: generatedId, 
+        // @ts-expect-error size is a html prop already.
+        size: size, onChange: onChange, ...props }));
 });
-R.displayName = "Radio";
-export {
-  R as BaseRadio
-};
+BaseRadio.displayName = 'Radio';
+
+exports.BaseRadio = BaseRadio;

package/dist/BaseRadio/BaseRadio.mjs

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useContext } from 'react';
+import styled from 'styled-components';
+import { RadioContext } from './context.mjs';
+import { getRadioSize, getSelectedRadioSize, getSelectedRadioPosition } from './utils.mjs';
+import { useId } from '../hooks/useId.mjs';
+
+const RadioInput = styled.input `
+  margin: 0;
+  padding: 0;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.primary600};
+  border-radius: 50%;
+  height: ${({ size }) => (typeof size === 'number' ? size : getRadioSize(size))};
+  width: ${({ size }) => (typeof size === 'number' ? size : getRadioSize(size))};
+  -webkit-appearance: none;
+
+  &:after {
+    border-radius: 50%;
+    content: '';
+    position: relative;
+    z-index: 1;
+    display: block;
+    height: ${({ size }) => (typeof size === 'number' ? size : getSelectedRadioSize(size))};
+    width: ${({ size }) => (typeof size === 'number' ? size : getSelectedRadioSize(size))};
+    left: ${getSelectedRadioPosition};
+    top: ${getSelectedRadioPosition};
+  }
+
+  &:checked:after {
+    background: ${({ theme }) => theme.colors.primary600};
+  }
+
+  &:disabled {
+    border: 1px solid ${({ theme }) => theme.colors.neutral300};
+    background: ${({ theme }) => theme.colors.neutral200};
+  }
+`;
+const BaseRadio = React__default.forwardRef(({ value, disabled = false, ...props }, ref) => {
+    const generatedId = useId();
+    const { onChange, selected, name, size } = useContext(RadioContext);
+    const isSelected = selected === value;
+    return (jsx(RadioInput, { ref: ref, type: "radio", name: name, value: value, tabIndex: isSelected ? 0 : -1, "aria-checked": isSelected, checked: isSelected, disabled: disabled, id: generatedId, 
+        // @ts-expect-error size is a html prop already.
+        size: size, onChange: onChange, ...props }));
+});
+BaseRadio.displayName = 'Radio';
+
+export { BaseRadio };

package/dist/BaseRadio/RadioGroup.js

@@ -1,15 +1,21 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useRef as n, useLayoutEffect as p, useMemo as u } from "react";
-import { RadioContext as l } from "./context.js";
-import { setTabIndexOnFirstItem as x } from "../helpers/setTabIndexOnFirstItem.js";
-const G = ({ children: f, labelledBy: c, onChange: t, value: r = "", size: e = "M", name: o, ...s }) => {
-  const i = n(null);
-  p(() => {
-    r || x(i.current, `[name="${o}"]`);
-  }, [r, o]);
-  const m = u(() => ({ onChange: t, selected: r, name: o, size: e }), [o, t, e, r]);
-  return d(l.Provider, { value: m, children: d("div", { ref: i, role: "radiogroup", "aria-labelledby": c, ...s, children: f }) });
-};
-export {
-  G as RadioGroup
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('./context.js');
+const setTabIndexOnFirstItem = require('../helpers/setTabIndexOnFirstItem.js');
+
+const RadioGroup = ({ children, labelledBy, onChange, value = '', size = 'M', name, ...props }) => {
+    const radioGroupRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!value) {
+            setTabIndexOnFirstItem.setTabIndexOnFirstItem(radioGroupRef.current, `[name="${name}"]`);
+        }
+    }, [value, name]);
+    const context$1 = React.useMemo(() => ({ onChange, selected: value, name, size }), [name, onChange, size, value]);
+    return (jsxRuntime.jsx(context.RadioContext.Provider, { value: context$1, children: jsxRuntime.jsx("div", { ref: radioGroupRef, role: "radiogroup", "aria-labelledby": labelledBy, ...props, children: children }) }));
 };
+
+exports.RadioGroup = RadioGroup;

package/dist/BaseRadio/RadioGroup.mjs

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useLayoutEffect, useMemo } from 'react';
+import { RadioContext } from './context.mjs';
+import { setTabIndexOnFirstItem } from '../helpers/setTabIndexOnFirstItem.mjs';
+
+const RadioGroup = ({ children, labelledBy, onChange, value = '', size = 'M', name, ...props }) => {
+    const radioGroupRef = useRef(null);
+    useLayoutEffect(() => {
+        if (!value) {
+            setTabIndexOnFirstItem(radioGroupRef.current, `[name="${name}"]`);
+        }
+    }, [value, name]);
+    const context = useMemo(() => ({ onChange, selected: value, name, size }), [name, onChange, size, value]);
+    return (jsx(RadioContext.Provider, { value: context, children: jsx("div", { ref: radioGroupRef, role: "radiogroup", "aria-labelledby": labelledBy, ...props, children: children }) }));
+};
+
+export { RadioGroup };

package/dist/BaseRadio/context.js

@@ -1,10 +1,14 @@
-import { createContext as e } from "react";
-const n = e({
-  onChange: void 0,
-  name: "",
-  size: "M",
-  selected: ""
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const RadioContext = React.createContext({
+    onChange: undefined,
+    name: '',
+    size: 'M',
+    selected: '',
 });
-export {
-  n as RadioContext
-};
+
+exports.RadioContext = RadioContext;

package/dist/BaseRadio/context.mjs

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+const RadioContext = createContext({
+    onChange: undefined,
+    name: '',
+    size: 'M',
+    selected: '',
+});
+
+export { RadioContext };

package/dist/BaseRadio/index.js

@@ -1,6 +1,11 @@
-import { BaseRadio as a } from "./BaseRadio.js";
-import { RadioGroup as p } from "./RadioGroup.js";
-export {
-  a as BaseRadio,
-  p as RadioGroup
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const BaseRadio = require('./BaseRadio.js');
+const RadioGroup = require('./RadioGroup.js');
+
+
+
+exports.BaseRadio = BaseRadio.BaseRadio;
+exports.RadioGroup = RadioGroup.RadioGroup;

package/dist/BaseRadio/index.mjs

@@ -0,0 +1,2 @@
+export { BaseRadio } from './BaseRadio.mjs';
+export { RadioGroup } from './RadioGroup.mjs';

package/dist/BaseRadio/utils.js

@@ -1,6 +1,34 @@
-const t = (e) => e === "M" ? "18px" : "20px", r = (e) => e === "M" ? "10px" : "12px", i = () => "3px";
-export {
-  t as getRadioSize,
-  i as getSelectedRadioPosition,
-  r as getSelectedRadioSize
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const getRadioSize = (size) => {
+    if (size === 'M') {
+        return '18px';
+    }
+    return '20px';
 };
+const getSelectedRadioSize = (size) => {
+    if (size === 'M') {
+        return '10px';
+    }
+    return '12px';
+};
+const getSelectedRadioPosition = () => {
+    /**
+     * This is computed using:
+     * size = (radio height - radio selected height) / 2 - borderSize
+     * For S, it looks like
+     * size = (18 - 10) / 2 - 1
+     * size = 3
+     *
+     * For L, it looks like
+     * size = (20 - 12) / 2 -1
+     * size = 3
+     */
+    return '3px';
+};
+
+exports.getRadioSize = getRadioSize;
+exports.getSelectedRadioPosition = getSelectedRadioPosition;
+exports.getSelectedRadioSize = getSelectedRadioSize;

package/dist/BaseRadio/utils.mjs

@@ -0,0 +1,28 @@
+const getRadioSize = (size) => {
+    if (size === 'M') {
+        return '18px';
+    }
+    return '20px';
+};
+const getSelectedRadioSize = (size) => {
+    if (size === 'M') {
+        return '10px';
+    }
+    return '12px';
+};
+const getSelectedRadioPosition = () => {
+    /**
+     * This is computed using:
+     * size = (radio height - radio selected height) / 2 - borderSize
+     * For S, it looks like
+     * size = (18 - 10) / 2 - 1
+     * size = 3
+     *
+     * For L, it looks like
+     * size = (20 - 12) / 2 -1
+     * size = 3
+     */
+    return '3px';
+};
+
+export { getRadioSize, getSelectedRadioPosition, getSelectedRadioSize };

package/dist/Box/Box.js

@@ -1,95 +1,111 @@
-import d from "styled-components";
-import r from "../helpers/handleResponsiveValues.js";
-import { extractStyleFromTheme as s } from "../helpers/theme.js";
-const t = {
-  color: !0,
-  cursor: !0,
-  height: !0,
-  width: !0
-}, l = d.div.withConfig({
-  shouldForwardProp: (e, o) => !t[e] && o(e)
-})`
+'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: e, theme: o }) => s(o.fontSizes, e, e)};
+  font-size: ${({ fontSize, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.fontSizes, fontSize, fontSize)};
 
   // Colors
-  background: ${({ theme: e, background: o }) => s(e.colors, o, o)};
-  color: ${({ theme: e, color: o }) => s(e.colors, o, void 0)};
+  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: e, padding: o }) => r("padding", o, e)}
-  ${({ theme: e, paddingTop: o }) => r("padding-top", o, e)}
-  ${({ theme: e, paddingRight: o }) => r("padding-right", o, e)}
-  ${({ theme: e, paddingBottom: o }) => r("padding-bottom", o, e)}
-  ${({ theme: e, paddingLeft: o }) => r("padding-left", o, e)}
-  ${({ theme: e, marginLeft: o }) => r("margin-left", o, e)}
-  ${({ theme: e, marginRight: o }) => r("margin-right", o, e)}
-  ${({ theme: e, marginTop: o }) => r("margin-top", o, e)}
-  ${({ theme: e, marginBottom: o }) => r("margin-bottom", o, e)}
+  ${({ 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: e, hiddenS: o }) => o ? `${e.mediaQueries.tablet} { display: none; }` : void 0}
-  ${({ theme: e, hiddenXS: o }) => o ? `${e.mediaQueries.mobile} { display: none; }` : void 0}
+  ${({ theme, hiddenS }) => (hiddenS ? `${theme.mediaQueries.tablet} { display: none; }` : undefined)}
+  ${({ theme, hiddenXS }) => (hiddenXS ? `${theme.mediaQueries.mobile} { display: none; }` : undefined)}
   
 
   // Borders
-  border-radius: ${({ theme: e, hasRadius: o, borderRadius: i }) => o ? e.borderRadius : i};
-  border-style: ${({ borderStyle: e }) => e};
-  border-width: ${({ borderWidth: e }) => e};
-  border-color: ${({ borderColor: e, theme: o }) => s(o.colors, e, void 0)};
-  border: ${({ theme: e, borderColor: o, borderStyle: i, borderWidth: n }) => {
-  if (o && !i && typeof n > "u")
-    return `1px solid ${e.colors[o]}`;
+  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: e, shadow: o }) => s(e.shadows, o, void 0)};
+  box-shadow: ${({ theme: theme$1, shadow }) => theme.extractStyleFromTheme(theme$1.shadows, shadow, undefined)};
 
   // Handlers
-  pointer-events: ${({ pointerEvents: e }) => e};
+  pointer-events: ${({ pointerEvents }) => pointerEvents};
   &:hover {
-    ${({ _hover: e, theme: o }) => e ? e(o) : void 0}
+    ${({ _hover, theme }) => (_hover ? _hover(theme) : undefined)}
   }
 
   // Display
-  display: ${({ display: e }) => e};
+  display: ${({ display }) => display};
 
   // Position
-  position: ${({ position: e }) => e};
-  left: ${({ left: e, theme: o }) => s(o.spaces, e, e)};
-  right: ${({ right: e, theme: o }) => s(o.spaces, e, e)};
-  top: ${({ top: e, theme: o }) => s(o.spaces, e, e)};
-  bottom: ${({ bottom: e, theme: o }) => s(o.spaces, e, e)};
-  z-index: ${({ zIndex: e }) => e};
-  overflow: ${({ overflow: e }) => e};
+  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: e, theme: o }) => s(o.spaces, e, e)};
-  max-width: ${({ maxWidth: e, theme: o }) => s(o.spaces, e, e)};
-  min-width: ${({ minWidth: e, theme: o }) => s(o.spaces, e, e)};
-  height: ${({ height: e, theme: o }) => s(o.spaces, e, e)};
-  max-height: ${({ maxHeight: e, theme: o }) => s(o.spaces, e, e)};
-  min-height: ${({ minHeight: e, theme: o }) => s(o.spaces, e, e)};
+  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: e }) => e};
-  transform: ${({ transform: e }) => e};
-  animation: ${({ animation: e }) => e};
+  transition: ${({ transition }) => transition};
+  transform: ${({ transform }) => transform};
+  animation: ${({ animation }) => animation};
 
   //Flexbox children props
-  flex-shrink: ${({ shrink: e }) => e};
-  flex-grow: ${({ grow: e }) => e};
-  flex-basis: ${({ basis: e }) => e};
-  flex: ${({ flex: e }) => e};
+  flex-shrink: ${({ shrink }) => shrink};
+  flex-grow: ${({ grow }) => grow};
+  flex-basis: ${({ basis }) => basis};
+  flex: ${({ flex }) => flex};
 
   // Text
-  text-align: ${({ textAlign: e }) => e};
-  text-transform: ${({ textTransform: e }) => e};
-  line-height: ${({ theme: e, lineHeight: o }) => s(e.lineHeights, o, o)};
+  text-align: ${({ textAlign }) => textAlign};
+  text-transform: ${({ textTransform }) => textTransform};
+  line-height: ${({ theme: theme$1, lineHeight }) => theme.extractStyleFromTheme(theme$1.lineHeights, lineHeight, lineHeight)};
 
   // Cursor
-  cursor: ${({ cursor: e }) => e};
+  cursor: ${({ cursor }) => cursor};
 `;
-export {
-  l as Box
-};
+
+exports.Box = Box;

package/dist/Box/Box.mjs

@@ -0,0 +1,103 @@
+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/index.js

@@ -1,4 +1,9 @@
-import { Box as x } from "./Box.js";
-export {
-  x as Box
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Box = require('./Box.js');
+
+
+
+exports.Box = Box.Box;

package/dist/Box/index.mjs

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