@via-profit/ui-kit 0.4.0 → 0.6.0

package/Accordion/AccordionActions.d.ts

@@ -3,6 +3,6 @@ export type AccordionActionsProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
+    readonly noPadding?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Accordion/AccordionActions.js

@@ -16,11 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledActions = styled_1.default.div `
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem 0')};
+  padding: ${({ $noPadding, theme }) => $noPadding ? '0' : `${(0, tokens_1.themePadding)(theme, 'container').y} 0`};
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 `;

package/Accordion/AccordionContainer.d.ts

@@ -3,6 +3,6 @@ export type AccordionContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly inline?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly inline?: boolean | undefined;
+    readonly inline?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Accordion/AccordionContainer.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledAccordionContainer = styled_1.default.div `
   display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
   box-sizing: border-box;
@@ -26,19 +27,7 @@ const StyledAccordionContainer = styled_1.default.div `
   font-size: 1em;
   position: relative;
   margin-top: 1px;
-  box-shadow:
-    ${({ theme }) => theme.isDark
-    ? theme.color.backgroundSecondary.lighten(80).alpha(0.2).toString()
-    : theme.color.backgroundSecondary.lighten(50).alpha(0.2).toString()}
-      0px 2px 1px -1px,
-    ${({ theme }) => theme.isDark
-    ? theme.color.backgroundSecondary.lighten(80).alpha(0.14).toString()
-    : theme.color.backgroundSecondary.lighten(50).alpha(0.14).toString()}
-      0px 1px 1px 0px,
-    ${({ theme }) => theme.isDark
-    ? theme.color.backgroundSecondary.lighten(80).alpha(0.12).toString()
-    : theme.color.backgroundSecondary.lighten(50).alpha(0.12).toString()}
-      0px 1px 3px 0px;
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'surface')};
 
   /*
    * Adjacent accordions form a group: the inner corners are square.

package/Accordion/AccordionContent.d.ts

@@ -4,7 +4,7 @@ export type AccordionContentProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly isOpen: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
+    readonly noPadding?: boolean;
     readonly isOpen: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Accordion/AccordionContent.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 /**
  * Animates the height with grid rows 0fr -> 1fr: no fixed max-height, so the tall content is not cut.
  * `visibility: hidden` of the collapsed content removes it from the tab order and the accessibility tree
@@ -33,7 +34,10 @@ const Clip = styled_1.default.div `
   overflow: hidden;
 `;
 const Wrapper = styled_1.default.div `
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem')};
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return $noPadding ? '0' : `${y} ${x}`;
+}};
 `;
 const AccordionContent = (props, ref) => {
     const { children, noPadding, isOpen } = props, nativeProps = __rest(props, ["children", "noPadding", "isOpen"]);

package/Accordion/AccordionHeader.d.ts

@@ -23,10 +23,10 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     /**
      * The id of the header button (the content is labelled by it)
      */
-    readonly headerID?: string | undefined;
+    readonly headerID?: string;
     /**
      * The id of the content (the header button controls it)
      */
-    readonly contentID?: string | undefined;
+    readonly contentID?: string;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Accordion/AccordionHeader.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Chevron_1 = __importDefault(require("./Chevron"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledHeader = styled_1.default.div `
   font-size: 1.3rem;
   font-weight: 600;
@@ -31,10 +32,14 @@ const HeaderButton = styled_1.default.button `
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  gap: 1rem;
+  gap: 1em;
   width: 100%;
   margin: 0;
-  padding: 1rem;
+  /* The text of the header is aligned with the content */
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
   border: 0;
   border-radius: inherit;
   background: none;
@@ -47,6 +52,7 @@ const HeaderButton = styled_1.default.button `
     outline: 0.1em solid ${({ theme }) => theme.color.accentPrimary.toString()};
     outline-offset: -0.1em;
   }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
 `;
 const HeaderCell = styled_1.default.span `
   flex: 1;

package/Accordion/index.d.ts

@@ -8,11 +8,11 @@ export type AccordionProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Header content
      */
-    readonly header?: JSX.Element | string;
+    readonly header?: React.JSX.Element | string;
     /**
      * Actions content
      */
-    readonly actions?: JSX.Element | string;
+    readonly actions?: React.JSX.Element | string;
     /**
      * Overridable components map
      */
@@ -59,32 +59,32 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     /**
      * Header content
      */
-    readonly header?: string | JSX.Element | undefined;
+    readonly header?: React.JSX.Element | string;
     /**
      * Actions content
      */
-    readonly actions?: string | JSX.Element | undefined;
+    readonly actions?: React.JSX.Element | string;
     /**
      * Overridable components map
      */
-    readonly overrides?: AccordionOverrides | undefined;
+    readonly overrides?: AccordionOverrides;
     /**
      * The state of the controlled accordion. Pass it together with `onOpen`
      */
-    readonly isOpen?: boolean | undefined;
+    readonly isOpen?: boolean;
     /**
      * The initial state of the uncontrolled accordion
      * Default: false
      */
-    readonly defaultOpened?: boolean | undefined;
+    readonly defaultOpened?: boolean;
     /**
      * Called when the user clicks the header, both to open and to close the accordion.\
      * Receives the next state: `true` - should be opened, `false` - should be closed
      */
-    readonly onOpen?: ((isOpen: boolean) => void) | undefined;
+    readonly onOpen?: (isOpen: boolean) => void;
     /**
      * If `true` initial padding of accorion content would be disabled
      */
-    readonly noPadding?: boolean | undefined;
+    readonly noPadding?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Accordion/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)

package/Autocomplete/AutocompleteContainer.d.ts

@@ -152,6 +152,6 @@ export type AutocompleteRef = {
     clear: () => void;
 };
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple> & {
-    ref?: React.Ref<AutocompleteRef> | undefined;
-}) => JSX.Element;
+    ref?: React.Ref<AutocompleteRef>;
+}) => React.JSX.Element;
 export default _default;

package/Autocomplete/AutocompleteContainer.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)

package/Autocomplete/AutocompleteItem.js

@@ -19,6 +19,7 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const MenuItem_1 = __importDefault(require("../Menu/MenuItem"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyeldMenuItem = (0, styled_1.default)(MenuItem_1.default, {
     shouldForwardProp: p => !['variant'].includes(p),
 }) `
@@ -28,7 +29,7 @@ const StyeldMenuItem = (0, styled_1.default)(MenuItem_1.default, {
       border-color: ${theme.color.accentPrimary.toString()};
       color: ${theme.color.textPrimary.toString()};
       border-style: dashed;
-      border-width: 0.02em;
+      border-width: ${tokens_1.BORDER_WIDTH};
 
       :hover {
         background-color: ${theme.color.accentPrimary.toString()};

package/Autocomplete/context.d.ts

@@ -14,15 +14,15 @@ type ActionSetPartial = {
     readonly type: 'setPartial';
     readonly payload: Partial<State>;
 };
-export declare const actionSetPartial: (payload: ActionSetPartial['payload']) => ActionSetPartial;
+export declare const actionSetPartial: (payload: ActionSetPartial["payload"]) => ActionSetPartial;
 export declare const defaultState: State;
 export declare const reducer: React.Reducer<State, Action>;
 export declare const createInitialState: <T, Multiple extends boolean | undefined = undefined>(params: {
     readonly items: readonly T[];
     readonly value: Value<T, Multiple> | null;
     readonly selectedItemToString: ItemToString<T, Multiple>;
-    readonly isOpen?: boolean | undefined;
-    readonly multiple?: Multiple | undefined;
+    readonly isOpen?: boolean;
+    readonly multiple?: Multiple;
     readonly filterItems: FilterItems<T> | undefined;
 }) => State;
 interface ContextProviderProps {

package/Autocomplete/index.d.ts

@@ -3,6 +3,6 @@ import { AutocompleteProps, AutocompleteRef } from './AutocompleteContainer';
 export * from './AutocompleteContainer';
 export * from './AutocompleteItem';
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple> & {
-    ref?: React.Ref<AutocompleteRef> | undefined;
-}) => JSX.Element;
+    ref?: React.Ref<AutocompleteRef>;
+}) => React.JSX.Element;
 export default _default;

package/Avatar/AvatarContainer.d.ts

@@ -15,12 +15,12 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
-    readonly color?: string | undefined;
+    readonly color?: "default" | "primary" | "secondary" | string;
     /**
      * Avatar size variant\
      * \
      * **Default**: `2.5em`
      */
-    readonly size?: string | undefined;
+    readonly size?: string;
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Avatar/AvatarPicture.d.ts

@@ -53,10 +53,10 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * \
      * **Default**: `circular`
      */
-    readonly variant?: "square" | "circular" | "rounded" | undefined;
+    readonly variant?: "circular" | "rounded" | "square";
     /**
      * HTML image alt attribute
      */
-    readonly alt?: string | undefined;
+    readonly alt?: string;
 } & React.RefAttributes<HTMLPictureElement>>;
 export default _default;

package/Badge/BadgeBase.d.ts

@@ -14,7 +14,7 @@ export interface BadgeBaseProps extends Omit<BadgeNativeProps, 'color'> {
      * </Badge>
      * ```
      */
-    readonly startIcon?: JSX.Element;
+    readonly startIcon?: React.JSX.Element;
     /**
      * Badge style variant\
      * Allowed variants: `standard` or `outlined`\

package/Badge/BadgeContainer.d.ts

@@ -9,6 +9,6 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
-    readonly color?: string | undefined;
+    readonly color?: "default" | "primary" | "secondary" | string;
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Badge/BadgeDeleteButton.d.ts

@@ -4,7 +4,7 @@ export type BadgeDeleteButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement
     readonly variant?: 'standard' | 'outlined';
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
-    readonly color?: string | undefined;
-    readonly variant?: "standard" | "outlined" | undefined;
+    readonly color?: "primary" | "secondary" | "default" | string;
+    readonly variant?: "standard" | "outlined";
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Badge/BadgeStyled.js

@@ -19,6 +19,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const Color_1 = __importDefault(require("../Color"));
 const BadgeBase_1 = __importDefault(require("./BadgeBase"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const parseColor = (color, fallback) => {
     try {
         return Color_1.default.fromString(color);
@@ -75,7 +76,7 @@ const getOutlinedColors = (color, theme) => {
  */
 const StyledBadge = (0, styled_1.default)(BadgeBase_1.default) `
   border-style: solid;
-  border-width: 0.14em;
+  border-width: ${tokens_1.BORDER_WIDTH};
   border-color: ${({ $background }) => $background.toString()};
 
   ${({ $variant, $color, $background, theme }) => $variant === 'outlined'
@@ -115,6 +116,7 @@ const StyledBadge = (0, styled_1.default)(BadgeBase_1.default) `
             `}
       }
     `}
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
 `;
 const BadgeStyled = (props, ref) => {
     const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);

package/Badge/index.d.ts

@@ -17,6 +17,6 @@ declare const _default: React.ForwardRefExoticComponent<import("./BadgeBase").Ba
      * \
      * **Default**: `standard`
      */
-    readonly variant?: "standard" | "outlined" | undefined;
+    readonly variant?: "standard" | "outlined";
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Button/ButtonBase.d.ts

@@ -13,7 +13,7 @@ export interface ButtonBaseProps extends Omit<ButtonNativeProps, 'color'> {
      * </Button>
      * ```
      */
-    readonly startIcon?: JSX.Element;
+    readonly startIcon?: React.JSX.Element;
     /**
      * Icon or another JSX element placed after button label
      * Example:
@@ -23,7 +23,7 @@ export interface ButtonBaseProps extends Omit<ButtonNativeProps, 'color'> {
      * </Button>
      * ```
      */
-    readonly endIcon?: JSX.Element;
+    readonly endIcon?: React.JSX.Element;
     /**
      * If true, then expect SVG icon as children. The button will be rendered as icon button
      * Example:
@@ -35,6 +35,14 @@ export interface ButtonBaseProps extends Omit<ButtonNativeProps, 'color'> {
      `
      */
     readonly iconOnly?: ButtonContainerProps['iconOnly'];
+    /**
+     * The variant styles, set by `<Button variant>`. The bare `ButtonBase` has no variant
+     */
+    readonly variant?: ButtonContainerProps['variant'];
+    /**
+     * The orientation of the ButtonGroup the button is in
+     */
+    readonly groupOrientation?: ButtonContainerProps['groupOrientation'];
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */

package/Button/ButtonBase.js

@@ -19,7 +19,7 @@ const ButtonIconWrapper_1 = __importDefault(require("./ButtonIconWrapper"));
 const ButtonTextWrapper_1 = __importDefault(require("./ButtonTextWrapper"));
 const ButtonContainer_1 = __importDefault(require("./ButtonContainer"));
 const ButtonBase = (props, ref) => {
-    const { children, startIcon, endIcon, color, overrides, iconOnly, type } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides", "iconOnly", "type"]);
+    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_1.default.useMemo(() => ({
         TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || ButtonTextWrapper_1.default,
         IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || ButtonIconWrapper_1.default,
@@ -34,7 +34,7 @@ const ButtonBase = (props, ref) => {
             console.warn('The «iconOnly» property should not be used simultaneously with «startIcon» and/or «endIcon»');
         }
     }, [isIconOnlyWithIcons]);
-    return (react_1.default.createElement(overridesMap.Container, Object.assign({ type: typeof type === 'undefined' ? 'button' : type }, nativeProps, { color: color, iconOnly: iconOnly, ref: ref }),
+    return (react_1.default.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_1.default.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
         react_1.default.createElement(overridesMap.TextWrapper, { iconOnly: iconOnly }, children),
         typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))));

package/Button/ButtonContainer.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import { ButtonVariant } from './buttonVariants';
+import type { ButtonGroupOrientation } from '../ButtonGroup/ButtonGroupContext';
 export type ButtonContainerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
@@ -15,12 +17,20 @@ export type ButtonContainerProps = React.ButtonHTMLAttributes<HTMLButtonElement>
      `
      */
     readonly iconOnly?: boolean;
+    /**
+     * The variant of the `<Button>`. Without it the button has no variant styles (the bare `ButtonBase`)
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * The orientation of the ButtonGroup the button is in
+     */
+    readonly groupOrientation?: ButtonGroupOrientation;
 };
 declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
-    readonly color?: string | undefined;
+    readonly color?: "default" | "primary" | "secondary" | string;
     /**
      * If true, then expect SVG icon as children. The button will be rendered as icon button
      * Example:
@@ -31,6 +41,14 @@ declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttribut
      * ```
      `
      */
-    readonly iconOnly?: boolean | undefined;
+    readonly iconOnly?: boolean;
+    /**
+     * The variant of the `<Button>`. Without it the button has no variant styles (the bare `ButtonBase`)
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * The orientation of the ButtonGroup the button is in
+     */
+    readonly groupOrientation?: ButtonGroupOrientation;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonContainer.js

@@ -17,9 +17,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
+const buttonVariants_1 = require("./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} + ${tokens_1.CONTROL_BORDER}) calc(${x} + ${tokens_1.CONTROL_BORDER})`;
+};
 const StyledButton = styled_1.default.button `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  padding: 0.8em 1em;
+  padding: ${buttonPadding};
+  line-height: ${tokens_1.CONTROL_LINE_HEIGHT};
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   font-size: 1em;
   /* Buttons do not inherit the font by default */
@@ -28,7 +40,13 @@ const StyledButton = styled_1.default.button `
   outline-style: solid;
   outline-color: transparent;
   outline-width: 0.14em;
-  transition: all 180ms ease-out 0s;
+  /*
+   * 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;
@@ -43,15 +61,18 @@ const StyledButton = styled_1.default.button `
 }};
   ${({ iconOnly, theme }) => iconOnly &&
     (0, react_2.css) `
-      padding: 1em;
+      padding: 0;
       justify-content: center;
-      width: 2.6em;
-      height: 2.6em;
+      box-sizing: border-box;
+      width: ${(0, tokens_1.controlHeight)(theme)};
+      height: ${(0, tokens_1.controlHeight)(theme)};
       border-radius: ${theme.shape.radiusFactor * 3}em;
     `}
+  ${({ $variant, $group, color, disabled, theme }) => $variant && (0, buttonVariants_1.buttonVariantStyles)({ variant: $variant, color, disabled, group: $group, theme })}
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
 `;
 const ButtonContainer = (props, ref) => {
-    const { children, iconOnly } = props, nativeProps = __rest(props, ["children", "iconOnly"]);
-    return (react_1.default.createElement(StyledButton, Object.assign({ iconOnly: iconOnly }, nativeProps, { ref: ref }), children));
+    const { children, iconOnly, variant, groupOrientation } = props, nativeProps = __rest(props, ["children", "iconOnly", "variant", "groupOrientation"]);
+    return (react_1.default.createElement(StyledButton, Object.assign({ iconOnly: iconOnly, "$variant": variant, "$group": groupOrientation }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ButtonContainer);

package/Button/ButtonIconWrapper.d.ts

@@ -9,6 +9,6 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     /**
      * Icon position
      */
-    readonly position: "end" | "start";
+    readonly position: "start" | "end";
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Button/ButtonStyled.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { ButtonBaseProps } from './ButtonBase';
-export type ButtonVariant = 'standard' | 'outlined' | 'plain';
+import type { ButtonVariant } from './buttonVariants';
+export type { ButtonVariant };
 export type ButtonStyledProps = ButtonBaseProps & {
     readonly variant?: ButtonVariant;
 };
 declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & {
-    readonly variant?: ButtonVariant | undefined;
+    readonly variant?: ButtonVariant;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;