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

package/dist/Grid/Grid.js

@@ -1,15 +1,24 @@
-import { jsx as e } from "react/jsx-runtime";
-import s from "styled-components";
-import i from "../helpers/handleResponsiveValues.js";
-import { Box as m } from "../Box/Box.js";
-const a = s(m)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const handleResponsiveValues = require('../helpers/handleResponsiveValues.js');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const GridWrapper = styled__default.default(Box.Box) `
   display: grid;
-  grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
-  ${({ theme: r, gap: o }) => i("gap", o, r)}
-`, f = (r) => {
-  const { gap: o = "0", gridCols: p = 12, ...t } = r;
-  return e(a, { gap: o, gridCols: p, ...t });
-};
-export {
-  f as Grid
+  grid-template-columns: repeat(${({ gridCols }) => gridCols}, 1fr);
+  ${({ theme, gap }) => handleResponsiveValues('gap', gap, theme)}
+`;
+const Grid = (props) => {
+    const { gap = '0', gridCols = 12, ...rest } = props;
+    return jsxRuntime.jsx(GridWrapper, { gap: gap, gridCols: gridCols, ...rest });
 };
+
+exports.Grid = Grid;

package/dist/Grid/Grid.mjs

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import handleResponsiveValues from '../helpers/handleResponsiveValues.mjs';
+import { Box } from '../Box/Box.mjs';
+
+const GridWrapper = styled(Box) `
+  display: grid;
+  grid-template-columns: repeat(${({ gridCols }) => gridCols}, 1fr);
+  ${({ theme, gap }) => handleResponsiveValues('gap', gap, theme)}
+`;
+const Grid = (props) => {
+    const { gap = '0', gridCols = 12, ...rest } = props;
+    return jsx(GridWrapper, { gap: gap, gridCols: gridCols, ...rest });
+};
+
+export { Grid };

package/dist/Grid/GridItem.js

@@ -1,17 +1,25 @@
-import m from "styled-components";
-import { Box as e } from "../Box/Box.js";
-const t = m(e)`
-  grid-column: span ${({ col: i }) => i};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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 GridItem = styled__default.default(Box.Box) `
+  grid-column: span ${({ col }) => col};
   max-width: 100%;
 
-  ${({ theme: i }) => i.mediaQueries.tablet} {
-    grid-column: span ${({ s: i }) => i};
+  ${({ theme }) => theme.mediaQueries.tablet} {
+    grid-column: span ${({ s }) => s};
   }
 
-  ${({ theme: i }) => i.mediaQueries.mobile} {
-    grid-column: span ${({ xs: i }) => i};
+  ${({ theme }) => theme.mediaQueries.mobile} {
+    grid-column: span ${({ xs }) => xs};
   }
 `;
-export {
-  t as GridItem
-};
+
+exports.GridItem = GridItem;

package/dist/Grid/GridItem.mjs

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { Box } from '../Box/Box.mjs';
+
+const GridItem = styled(Box) `
+  grid-column: span ${({ col }) => col};
+  max-width: 100%;
+
+  ${({ theme }) => theme.mediaQueries.tablet} {
+    grid-column: span ${({ s }) => s};
+  }
+
+  ${({ theme }) => theme.mediaQueries.mobile} {
+    grid-column: span ${({ xs }) => xs};
+  }
+`;
+
+export { GridItem };

package/dist/Grid/index.js

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

package/dist/Grid/index.mjs

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

package/dist/Icon/Icon.js

@@ -1,15 +1,27 @@
-import { jsx as m } from "react/jsx-runtime";
-import f from "react";
-import c from "styled-components";
-import { extractStyleFromTheme as l } from "../helpers/theme.js";
-import { Box as p } from "../Box/Box.js";
-const a = c(p)`
+'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 theme = require('../helpers/theme.js');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const IconWrapper = styled__default.default(Box.Box) `
   path {
-    fill: ${({ color: o, theme: r }) => l(r.colors, o, void 0)};
+    fill: ${({ color, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.colors, color, undefined)};
   }
-  ${({ theme: o, colors: r }) => r(o)}
-`, n = f.forwardRef(({ color: o = "neutral600", colors: r = () => "", ...t }, e) => m(a, { ref: e, color: o, colors: r, ...t }));
-n.displayName = "Icon";
-export {
-  n as Icon
-};
+  ${({ theme, colors }) => colors(theme)}
+`;
+const Icon = React__default.default.forwardRef(({ color = 'neutral600', colors = () => '', ...restProps }, ref) => {
+    return jsxRuntime.jsx(IconWrapper, { ref: ref, color: color, colors: colors, ...restProps });
+});
+Icon.displayName = 'Icon';
+
+exports.Icon = Icon;

package/dist/Icon/Icon.mjs

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { extractStyleFromTheme } from '../helpers/theme.mjs';
+import { Box } from '../Box/Box.mjs';
+
+const IconWrapper = styled(Box) `
+  path {
+    fill: ${({ color, theme }) => extractStyleFromTheme(theme.colors, color, undefined)};
+  }
+  ${({ theme, colors }) => colors(theme)}
+`;
+const Icon = React__default.forwardRef(({ color = 'neutral600', colors = () => '', ...restProps }, ref) => {
+    return jsx(IconWrapper, { ref: ref, color: color, colors: colors, ...restProps });
+});
+Icon.displayName = 'Icon';
+
+export { Icon };

package/dist/Icon/index.js

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

package/dist/Icon/index.mjs

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

package/dist/IconButton/IconButton.js

@@ -1,41 +1,96 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import * as e from "react";
-import s from "styled-components";
-import { VisuallyHidden as g } from "../VisuallyHidden/VisuallyHidden.js";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
-import { BaseButton as R } from "../BaseButton/BaseButton.js";
-import { Flex as k } from "../Flex/Flex.js";
-const W = e.forwardRef(({ label: r, background: i, borderWidth: c, noBorder: d = !1, children: u, icon: f, disabled: o = !1, onClick: l, "aria-label": p, ...h }, $) => {
-  const t = m(n, { "aria-disabled": o, background: o ? "neutral150" : i, borderWidth: d ? 0 : c, justifyContent: "center", height: "2rem", width: "2rem", ...h, ref: $, onClick: (b) => {
-    !o && l && l(b);
-  }, children: [a(g, { as: "span", children: r ?? p }), e.cloneElement(f || u, {
-    "aria-hidden": !0,
-    focusable: !1
-    // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
-  })] });
-  return r ? a(v, { label: r, children: t }) : t;
-}), n = s(R)`
-  svg {
-    > g,
-    path {
-      fill: ${({ theme: r }) => r.colors.neutral500};
+'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 VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const Tooltip = require('../Tooltip/Tooltip.js');
+const BaseButton = require('../BaseButton/BaseButton.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
     }
   }
+  n.default = e;
+  return Object.freeze(n);
+}
 
-  &:hover {
-    svg {
-      > g,
-      path {
-        fill: ${({ theme: r }) => r.colors.neutral600};
-      }
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+// TODO: we should align the default state in v2 with the Button
+// component
+const VARIANT_DEFAULT = 'tertiary';
+const VARIANT_SECONDARY = 'secondary';
+const SIZES = ['S', 'M', 'L'];
+const VARIANTS = [VARIANT_DEFAULT, VARIANT_SECONDARY];
+const IconButton = React__namespace.forwardRef(({ label, background, borderWidth, noBorder = false, children, icon, disabled = false, onClick, size = SIZES[0], 'aria-label': ariaLabel, variant = VARIANTS[0], ...restProps }, ref) => {
+    const handleClick = (e) => {
+        if (!disabled && onClick) {
+            onClick(e);
+        }
+    };
+    const component = (jsxRuntime.jsxs(IconButtonWrapper, { "aria-disabled": disabled, background: disabled ? 'neutral150' : background, borderWidth: noBorder ? 0 : borderWidth, justifyContent: "center", ...restProps, ref: ref, size: size, onClick: handleClick, variant: variant, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { as: "span", children: label ?? ariaLabel }), React__namespace.cloneElement((icon || children), {
+                'aria-hidden': true,
+                focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+            })] }));
+    return label ? jsxRuntime.jsx(Tooltip.Tooltip, { label: label, children: component }) : component;
+});
+const IconButtonWrapper = styled__default.default(BaseButton.BaseButton) `
+  background: ${({ theme, variant }) => {
+    if (variant === VARIANT_SECONDARY) {
+        return theme.colors.primary100;
+    }
+    return undefined;
+}};
+  border: 1px solid
+    ${({ theme, variant }) => {
+    if (variant === VARIANT_SECONDARY) {
+        return theme.colors.primary200;
+    }
+    return theme.colors.neutral200;
+}};
+  height: ${({ theme, size }) => theme.sizes.button[size]};
+  width: ${({ theme, size }) => theme.sizes.button[size]};
+
+  svg {
+    g,
+    path {
+      fill: ${({ theme, variant }) => {
+    if (variant === VARIANT_SECONDARY) {
+        return theme.colors.primary500;
+    }
+    return theme.colors.neutral500;
+}};
     }
   }
 
-  &:active {
+  :hover,
+  :focus {
     svg {
-      > g,
+      g,
       path {
-        fill: ${({ theme: r }) => r.colors.neutral400};
+        fill: ${({ theme, variant }) => {
+    if (variant === VARIANT_SECONDARY) {
+        return theme.colors.primary600;
+    }
+    return theme.colors.neutral600;
+}};
       }
     }
   }
@@ -43,45 +98,46 @@ const W = e.forwardRef(({ label: r, background: i, borderWidth: c, noBorder: d =
   &[aria-disabled='true'] {
     svg {
       path {
-        fill: ${({ theme: r }) => r.colors.neutral600};
+        fill: ${({ theme }) => theme.colors.neutral600};
       }
     }
   }
-`, E = s(k)`
+`;
+const IconButtonGroup = styled__default.default(Flex.Flex) `
   & span:first-child button {
-    border-left: 1px solid ${({ theme: r }) => r.colors.neutral200};
-    border-radius: ${({ theme: r }) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
+    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
+    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
   }
 
   & span:last-child button {
-    border-radius: ${({ theme: r }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
+    border-radius: ${({ theme }) => `0 ${theme.borderRadius} ${theme.borderRadius} 0`};
   }
 
-  & ${n} {
+  & ${IconButtonWrapper} {
     border-radius: 0;
     border-left: none;
 
     svg {
       path {
-        fill: ${({ theme: r }) => r.colors.neutral700};
+        fill: ${({ theme }) => theme.colors.neutral700};
       }
     }
 
     &:hover {
-      background-color: ${({ theme: r }) => r.colors.neutral100};
+      background-color: ${({ theme }) => theme.colors.neutral100};
 
       svg {
         path {
-          fill: ${({ theme: r }) => r.colors.neutral800};
+          fill: ${({ theme }) => theme.colors.neutral800};
         }
       }
     }
 
     &:active {
-      background-color: ${({ theme: r }) => r.colors.neutral150};
+      background-color: ${({ theme }) => theme.colors.neutral150};
       svg {
         path {
-          fill: ${({ theme: r }) => r.colors.neutral900};
+          fill: ${({ theme }) => theme.colors.neutral900};
         }
       }
     }
@@ -89,13 +145,12 @@ const W = e.forwardRef(({ label: r, background: i, borderWidth: c, noBorder: d =
     &[aria-disabled='true'] {
       svg {
         path {
-          fill: ${({ theme: r }) => r.colors.neutral600};
+          fill: ${({ theme }) => theme.colors.neutral600};
         }
       }
     }
   }
 `;
-export {
-  W as IconButton,
-  E as IconButtonGroup
-};
+
+exports.IconButton = IconButton;
+exports.IconButtonGroup = IconButtonGroup;

package/dist/IconButton/IconButton.mjs

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import styled from 'styled-components';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { BaseButton } from '../BaseButton/BaseButton.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+// TODO: we should align the default state in v2 with the Button
+// component
+const VARIANT_DEFAULT = 'tertiary';
+const VARIANT_SECONDARY = 'secondary';
+const SIZES = ['S', 'M', 'L'];
+const VARIANTS = [VARIANT_DEFAULT, VARIANT_SECONDARY];
+const IconButton = React.forwardRef(({ label, background, borderWidth, noBorder = false, children, icon, disabled = false, onClick, size = SIZES[0], 'aria-label': ariaLabel, variant = VARIANTS[0], ...restProps }, ref) => {
+    const handleClick = (e) => {
+        if (!disabled && onClick) {
+            onClick(e);
+        }
+    };
+    const component = (jsxs(IconButtonWrapper, { "aria-disabled": disabled, background: disabled ? 'neutral150' : background, borderWidth: noBorder ? 0 : borderWidth, justifyContent: "center", ...restProps, ref: ref, size: size, onClick: handleClick, variant: variant, children: [jsx(VisuallyHidden, { as: "span", children: label ?? ariaLabel }), React.cloneElement((icon || children), {
+                'aria-hidden': true,
+                focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+            })] }));
+    return label ? jsx(Tooltip, { label: label, children: component }) : component;
+});
+const IconButtonWrapper = styled(BaseButton) `
+  background: ${({ theme, variant }) => {
+    if (variant === VARIANT_SECONDARY) {
+        return theme.colors.primary100;
+    }
+    return undefined;
+}};
+  border: 1px solid
+    ${({ theme, variant }) => {
+    if (variant === VARIANT_SECONDARY) {
+        return theme.colors.primary200;
+    }
+    return theme.colors.neutral200;
+}};
+  height: ${({ theme, size }) => theme.sizes.button[size]};
+  width: ${({ theme, size }) => theme.sizes.button[size]};
+
+  svg {
+    g,
+    path {
+      fill: ${({ theme, variant }) => {
+    if (variant === VARIANT_SECONDARY) {
+        return theme.colors.primary500;
+    }
+    return theme.colors.neutral500;
+}};
+    }
+  }
+
+  :hover,
+  :focus {
+    svg {
+      g,
+      path {
+        fill: ${({ theme, variant }) => {
+    if (variant === VARIANT_SECONDARY) {
+        return theme.colors.primary600;
+    }
+    return theme.colors.neutral600;
+}};
+      }
+    }
+  }
+
+  &[aria-disabled='true'] {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral600};
+      }
+    }
+  }
+`;
+const IconButtonGroup = styled(Flex) `
+  & span:first-child button {
+    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
+    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
+  }
+
+  & span:last-child button {
+    border-radius: ${({ theme }) => `0 ${theme.borderRadius} ${theme.borderRadius} 0`};
+  }
+
+  & ${IconButtonWrapper} {
+    border-radius: 0;
+    border-left: none;
+
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral700};
+      }
+    }
+
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.neutral100};
+
+      svg {
+        path {
+          fill: ${({ theme }) => theme.colors.neutral800};
+        }
+      }
+    }
+
+    &:active {
+      background-color: ${({ theme }) => theme.colors.neutral150};
+      svg {
+        path {
+          fill: ${({ theme }) => theme.colors.neutral900};
+        }
+      }
+    }
+
+    &[aria-disabled='true'] {
+      svg {
+        path {
+          fill: ${({ theme }) => theme.colors.neutral600};
+        }
+      }
+    }
+  }
+`;
+
+export { IconButton, IconButtonGroup };

package/dist/IconButton/index.js

@@ -1,5 +1,10 @@
-import { IconButton as n, IconButtonGroup as r } from "./IconButton.js";
-export {
-  n as IconButton,
-  r as IconButtonGroup
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const IconButton = require('./IconButton.js');
+
+
+
+exports.IconButton = IconButton.IconButton;
+exports.IconButtonGroup = IconButton.IconButtonGroup;

package/dist/IconButton/index.mjs

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