@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/Badge/BadgeStyled.js

@@ -0,0 +1,122 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTheme, css } from '@emotion/react';
+import Color from '../Color';
+import BadgeBase from './BadgeBase';
+import { themeFocusRing, BORDER_WIDTH } from '../ThemeProvider/tokens';
+const parseColor = (color, fallback) => {
+    try {
+        return Color.fromString(color);
+    }
+    catch (err) {
+        console.error(`invalid color value «${color}»`);
+        return fallback;
+    }
+};
+const getStandardColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return {
+                $color: theme.color.accentSecondaryContrast,
+                $background: theme.color.accentSecondary,
+            };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return { $background: theme.color.surface.darken(10), $color: theme.color.textPrimary };
+        default: {
+            const $background = parseColor(String(color), theme.color.surface);
+            return {
+                $background,
+                $color: $background.getContrast(theme.color.textPrimary) > 5
+                    ? theme.color.textPrimary
+                    : theme.color.surface,
+            };
+        }
+    }
+};
+const getOutlinedColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimary, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return { $color: theme.color.accentSecondary, $background: theme.color.accentSecondary };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return {
+                $color: Color.fromString(theme.color.textPrimary.toString()),
+                $background: theme.color.textPrimary.lighten(100),
+            };
+        default: {
+            const c = parseColor(String(color), theme.color.textPrimary);
+            return { $color: c, $background: c };
+        }
+    }
+};
+/**
+ * Both variants are one styled component: switching the variant (e.g. a toggling filter badge)
+ * must not remount the element, otherwise the focused badge loses the focus
+ */
+const StyledBadge = styled(BadgeBase) `
+  border-style: solid;
+  border-width: ${BORDER_WIDTH};
+  border-color: ${({ $background }) => $background.toString()};
+
+  ${({ $variant, $color, $background, theme }) => $variant === 'outlined'
+    ? css `
+          color: ${$color.darken(30).toString()};
+          background-color: transparent;
+
+          &:focus-visible {
+            outline-style: solid;
+            outline-width: 0.14em;
+            outline-color: ${$background.rgbString()};
+          }
+        `
+    : css `
+          color: ${$color.toString()};
+          background-color: ${$background.toString()};
+
+          &:focus-visible {
+            outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
+          }
+        `}
+
+  ${({ $clickable, $variant, $background }) => $clickable &&
+    css `
+      cursor: pointer;
+
+      &:hover {
+        ${$variant === 'outlined'
+        ? css `
+              background-color: ${$background.darken(20).alpha(0.1).toString()};
+            `
+        : css `
+              background-color: ${$background.darken(30).toString()};
+              border-color: ${$background.darken(30).toString()};
+            `}
+      }
+    `}
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const BadgeStyled = (props, ref) => {
+    const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);
+    const theme = useTheme();
+    const { $background, $color } = React.useMemo(() => variant === 'outlined' ? getOutlinedColors(color, theme) : getStandardColors(color, theme), [color, variant, theme]);
+    return (React.createElement(StyledBadge, Object.assign({ "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, color: color, variant: variant, onClick: onClick }, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(BadgeStyled);

package/esm/Badge/BadgeTextWrapper.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const TextWrapper = styled.span `
+  font-size: 0.86em;
+  padding: 0.3em 0.5em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+const BadgeTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(BadgeTextWrapper);

package/esm/Badge/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import BadgeStyled from './BadgeStyled';
+// One component for both variants, so changing the variant does not remount the badge
+const Badge = (props, ref) => (React.createElement(BadgeStyled, Object.assign({}, props, { ref: ref })));
+export default React.forwardRef(Badge);

package/esm/Button/ButtonBase.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import IconWrapper from './ButtonIconWrapper';
+import TextWrapper from './ButtonTextWrapper';
+import Container from './ButtonContainer';
+const ButtonBase = (props, ref) => {
+    const { children, startIcon, endIcon, color, overrides, iconOnly, type, variant, groupOrientation } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides", "iconOnly", "type", "variant", "groupOrientation"]);
+    const overridesMap = React.useMemo(() => ({
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || TextWrapper,
+        IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || IconWrapper,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+    }), [overrides]);
+    // Warn once when the combination appears, not on every render
+    const isIconOnlyWithIcons = Boolean(iconOnly) &&
+        ((typeof startIcon !== 'undefined' && startIcon !== null) ||
+            (typeof endIcon !== 'undefined' && endIcon !== null));
+    React.useEffect(() => {
+        if (isIconOnlyWithIcons) {
+            console.warn('The «iconOnly» property should not be used simultaneously with «startIcon» and/or «endIcon»');
+        }
+    }, [isIconOnlyWithIcons]);
+    return (React.createElement(overridesMap.Container, Object.assign({ type: typeof type === 'undefined' ? 'button' : type }, nativeProps, { color: color, iconOnly: iconOnly, variant: variant, groupOrientation: groupOrientation, ref: ref }),
+        typeof startIcon !== 'undefined' && startIcon !== null && (React.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
+        React.createElement(overridesMap.TextWrapper, { iconOnly: iconOnly }, children),
+        typeof endIcon !== 'undefined' && endIcon !== null && (React.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))));
+};
+export default React.forwardRef(ButtonBase);

package/esm/Button/ButtonContainer.js

@@ -0,0 +1,73 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { themeFocusRing, controlHeight, CONTROL_BORDER, CONTROL_LINE_HEIGHT, } from '../ThemeProvider/tokens';
+import { buttonVariantStyles } from './buttonVariants';
+/**
+ * The outlined buttons and all the buttons of the ButtonGroup have a border.
+ * The other ones get its width in the padding, so all the buttons have the same height
+ */
+const buttonPadding = ({ theme, $variant, $group }) => {
+    const { y, x } = theme.padding.control;
+    const hasBorder = $variant === 'outlined' || Boolean($group) || !$variant;
+    return hasBorder ? `${y} ${x}` : `calc(${y} + ${CONTROL_BORDER}) calc(${x} + ${CONTROL_BORDER})`;
+};
+const StyledButton = styled.button `
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  padding: ${buttonPadding};
+  line-height: ${CONTROL_LINE_HEIGHT};
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  font-size: 1em;
+  /* Buttons do not inherit the font by default */
+  font-family: inherit;
+  border-width: 0;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 0.14em;
+  /*
+   * The colors only: the variants have different border and padding, a transition of the sizes
+   * makes the button grow for a moment when the variant changes (the border width changes by whole pixels)
+   */
+  transition-property: color, background-color, border-color, box-shadow, outline-color;
+  transition-duration: 180ms;
+  transition-timing-function: ease-out;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  color: ${({ color, disabled, theme }) => {
+    switch (true) {
+        case disabled:
+            return theme.color.textSecondary.alpha(0.8).toString();
+        case !disabled && typeof color === 'undefined':
+        default:
+            return theme.color.textPrimary.toString();
+    }
+}};
+  ${({ iconOnly, theme }) => iconOnly &&
+    css `
+      padding: 0;
+      justify-content: center;
+      box-sizing: border-box;
+      width: ${controlHeight(theme)};
+      height: ${controlHeight(theme)};
+      border-radius: ${theme.shape.radiusFactor * 3}em;
+    `}
+  ${({ $variant, $group, color, disabled, theme }) => $variant && buttonVariantStyles({ variant: $variant, color, disabled, group: $group, theme })}
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const ButtonContainer = (props, ref) => {
+    const { children, iconOnly, variant, groupOrientation } = props, nativeProps = __rest(props, ["children", "iconOnly", "variant", "groupOrientation"]);
+    return (React.createElement(StyledButton, Object.assign({ iconOnly: iconOnly, "$variant": variant, "$group": groupOrientation }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(ButtonContainer);

package/esm/Button/ButtonIconWrapper.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const Wrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${({ $position }) => $position === 'start' &&
+    css `
+      margin-right: 0.8em;
+    `};
+  ${({ $position }) => $position === 'end' &&
+    css `
+      margin-left: 0.8em;
+    `};
+`;
+const ButtonIconWrapper = (props, ref) => {
+    const { children, position } = props, nativeProps = __rest(props, ["children", "position"]);
+    return (React.createElement(Wrapper, Object.assign({ "$position": position }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(ButtonIconWrapper);

package/esm/Button/ButtonOutlined.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ButtonStyled from './ButtonStyled';
+/**
+ * The button with the `outlined` variant. Prefer `<Button variant="outlined">`
+ */
+const ButtonOutlined = (props, ref) => React.createElement(ButtonStyled, Object.assign({}, props, { variant: "outlined", ref: ref }));
+export default React.forwardRef(ButtonOutlined);

package/esm/Button/ButtonPlain.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ButtonStyled from './ButtonStyled';
+/**
+ * The button with the `plain` variant. Prefer `<Button variant="plain">`
+ */
+const ButtonPlain = (props, ref) => React.createElement(ButtonStyled, Object.assign({}, props, { variant: "plain", ref: ref }));
+export default React.forwardRef(ButtonPlain);

package/esm/Button/ButtonStandard.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ButtonStyled from './ButtonStyled';
+/**
+ * The button with the `standard` variant. Prefer `<Button variant="standard">`
+ */
+const ButtonStandard = (props, ref) => React.createElement(ButtonStyled, Object.assign({}, props, { variant: "standard", ref: ref }));
+export default React.forwardRef(ButtonStandard);

package/esm/Button/ButtonStyled.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import ButtonBase from './ButtonBase';
+import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
+/**
+ * Resolves the variant and the color inside the ButtonGroup. The styles of the variant are in the Container part.
+ * All the variants are one component: switching the variant (e.g. a toggle button)
+ * must not remount the element, otherwise the focused button loses the focus
+ */
+const ButtonStyled = (props, ref) => {
+    const group = React.useContext(ButtonGroupContext);
+    const { children, onClick } = props, buttonProps = __rest(props, ["children", "onClick"]);
+    const buttonValue = typeof buttonProps.value !== 'undefined' ? String(buttonProps.value) : undefined;
+    const isSelectable = Boolean((group === null || group === void 0 ? void 0 : group.selectable) && typeof buttonValue !== 'undefined');
+    const isSelected = isSelectable && Boolean(group === null || group === void 0 ? void 0 : group.isSelected(String(buttonValue)));
+    // Inside the ButtonGroup the own props of the button win over the props of the group
+    const { disabled = group === null || group === void 0 ? void 0 : group.disabled, color = isSelected ? group === null || group === void 0 ? void 0 : group.selectedColor : group === null || group === void 0 ? void 0 : group.color, variant = group ? (isSelected ? 'standard' : group.variant) : 'standard' } = buttonProps, restProps = __rest(buttonProps, ["disabled", "color", "variant"]);
+    const handleClick = event => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (isSelectable && !event.defaultPrevented && group) {
+            group.toggle(String(buttonValue));
+        }
+    };
+    return (React.createElement(ButtonBase, Object.assign({ variant: variant, color: color, groupOrientation: group === null || group === void 0 ? void 0 : group.orientation, "data-group-variant": group ? variant : undefined, disabled: disabled, "aria-pressed": isSelectable ? isSelected : undefined }, restProps, { onClick: handleClick, ref: ref }), children));
+};
+export default React.forwardRef(ButtonStyled);

package/esm/Button/ButtonTextWrapper.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const TextWrapper = styled.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  ${({ iconOnly }) => iconOnly &&
+    css `
+      font-size: 1em;
+      justify-content: center;
+    `}
+`;
+const ButtonTextWrapper = (props, ref) => {
+    const { children, iconOnly } = props, nativeProps = __rest(props, ["children", "iconOnly"]);
+    return (React.createElement(TextWrapper, Object.assign({ iconOnly: iconOnly }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(ButtonTextWrapper);

package/esm/Button/buttonVariants.js

@@ -0,0 +1,162 @@
+import { css } from '@emotion/react';
+import Color from '../Color';
+import { CONTROL_BORDER } from '../ThemeProvider/tokens';
+const parseColor = (color, fallback) => {
+    try {
+        return Color.fromString(color);
+    }
+    catch (err) {
+        console.error(`invalid color value «${color}»`);
+        return fallback;
+    }
+};
+/**
+ * Text and background colors of the standard variant
+ */
+const getStandardColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return {
+                $color: theme.color.accentSecondaryContrast,
+                $background: theme.color.accentSecondary,
+            };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return { $background: theme.color.surface, $color: theme.color.textPrimary };
+        default: {
+            const $background = parseColor(String(color), theme.color.surface);
+            return {
+                $background,
+                $color: $background.getContrast(theme.color.textPrimary) > 5
+                    ? theme.color.textPrimary
+                    : theme.color.surface,
+            };
+        }
+    }
+};
+/**
+ * The main color of the outlined and plain variants (text and border)
+ */
+const getAccentColor = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return theme.color.accentPrimary;
+        case color === 'secondary':
+            return theme.color.accentSecondary;
+        case typeof color === 'undefined':
+        case color === 'default':
+            return theme.color.textPrimary;
+        default:
+            return parseColor(String(color), theme.color.textPrimary);
+    }
+};
+const focusOutlineColor = (color, theme) => color.rgbString() === theme.color.accentPrimary.rgbString()
+    ? theme.color.textPrimary.toString()
+    : theme.color.accentPrimary.toString();
+const standardStyles = ({ $color, $background, disabled, theme }) => css `
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
+  background-color: ${disabled
+    ? $background.darken(40).toString()
+    : $background.darken(10).toString()};
+
+  ${!disabled &&
+    css `
+    &:hover {
+      background-color: ${$background.darken(30).toString()};
+    }
+    &:active {
+      background-color: ${$background.darken(80).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($background, theme)};
+    }
+  `}
+`;
+const outlinedStyles = ({ $color, disabled, theme }) => css `
+  color: ${disabled ? theme.color.textPrimary.alpha(0.4).toString() : $color.darken(30).toString()};
+  border-color: ${disabled
+    ? theme.color.surface.darken(80).alpha(0.4).toString()
+    : $color.toString()};
+  background-color: transparent;
+  border-style: solid;
+  border-width: ${CONTROL_BORDER};
+
+  ${!disabled &&
+    css `
+    &:hover {
+      background-color: ${$color.darken(20).alpha(0.1).toString()};
+    }
+    &:active {
+      background-color: ${$color.darken(50).alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
+const plainStyles = ({ $color, disabled, theme }) => css `
+  box-shadow: none;
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
+  background: none;
+
+  ${!disabled &&
+    css `
+    &:hover {
+      color: ${$color.darken(30).toString()};
+      background-color: ${$color.alpha(0.1).toString()};
+    }
+    &:active {
+      color: ${$color.darken(80).toString()};
+      background-color: ${$color.alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
+/**
+ * Inside the ButtonGroup all the variants have the same border width, so the buttons have the same size
+ * and the selected (standard) button does not shrink. Two adjacent standard buttons are separated by a thin line
+ */
+const groupStyles = ({ $group, $variant, $color }) => $group &&
+    css `
+    border-style: solid;
+    border-width: ${CONTROL_BORDER};
+    ${$variant !== 'outlined' &&
+        css `
+      border-color: transparent;
+    `}
+    ${$variant === 'standard' &&
+        css `
+      [data-group-variant='standard'] + & {
+        ${$group === 'vertical' ? 'border-top-color' : 'border-left-color'}: ${$color
+            .alpha(0.25)
+            .toString()};
+      }
+    `}
+  `;
+/**
+ * The styles of the variant. They are applied inside the Container part,
+ * so the theme styles and the `styled(ButtonContainer)` of the user go after them and win
+ */
+export const buttonVariantStyles = (params) => {
+    const { variant, color, disabled, group, theme } = params;
+    const colors = variant === 'standard'
+        ? getStandardColors(color, theme)
+        : { $color: getAccentColor(color, theme), $background: getAccentColor(color, theme) };
+    const props = Object.assign(Object.assign({}, colors), { $variant: variant, $group: group, disabled, theme });
+    return css `
+    ${variant === 'outlined'
+        ? outlinedStyles(props)
+        : variant === 'plain'
+            ? plainStyles(props)
+            : standardStyles(props)}
+    ${groupStyles(props)}
+  `;
+};

package/esm/Button/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ButtonStyled from './ButtonStyled';
+// One component for all the variants, so changing the variant does not remount the button
+const Button = (props, ref) => (React.createElement(ButtonStyled, Object.assign({}, props, { ref: ref })));
+export default React.forwardRef(Button);

package/esm/ButtonGroup/ButtonGroupContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Buttons inside the ButtonGroup read the common props and the selection from this context
+ */
+const ButtonGroupContext = React.createContext(null);
+export default ButtonGroupContext;