@via-profit/ui-kit 0.5.0 → 0.7.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,20 +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;
-  ${({ theme }) => theme.elevation.surface && `box-shadow: ${theme.elevation.surface};`}
+  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

@@ -32,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;

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)
@@ -42,9 +52,8 @@ const AccordionContainer_1 = __importDefault(require("./AccordionContainer"));
 const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
 const AccordionContent_1 = __importDefault(require("./AccordionContent"));
 const AccordionActions_1 = __importDefault(require("./AccordionActions"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const Accordion = (props, ref) => {
-    const _a = (0, useThemeProps_1.default)('Accordion', props), { children, header, actions, isOpen, onOpen, overrides, noPadding, defaultOpened } = _a, nativeProps = __rest(_a, ["children", "header", "actions", "isOpen", "onOpen", "overrides", "noPadding", "defaultOpened"]);
+    const { children, header, actions, isOpen, onOpen, overrides, noPadding, defaultOpened } = props, nativeProps = __rest(props, ["children", "header", "actions", "isOpen", "onOpen", "overrides", "noPadding", "defaultOpened"]);
     const hasActions = typeof actions !== 'undefined' && actions !== null;
     const hasHeader = typeof header !== 'undefined' && header !== null;
     const [internalOpened, setInternalOpened] = React.useState(Boolean(defaultOpened));

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" | "rounded" | "circular" | undefined;
+    readonly variant?: "circular" | "rounded" | "square";
     /**
      * HTML image alt attribute
      */
-    readonly alt?: string | undefined;
+    readonly alt?: string;
 } & React.RefAttributes<HTMLPictureElement>>;
 export default _default;

package/Avatar/index.js

@@ -19,7 +19,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const Color_1 = __importDefault(require("../Color"));
 const AvatarBase_1 = __importDefault(require("./AvatarBase"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const StyledAvatarBase = (0, styled_1.default)(AvatarBase_1.default) `
   position: relative;
   color: ${({ $color }) => $color.toString()};
@@ -55,7 +54,7 @@ const StyledAvatarBase = (0, styled_1.default)(AvatarBase_1.default) `
 }}
 `;
 const Avatar = (props, ref) => {
-    const _a = (0, useThemeProps_1.default)('Avatar', props), { children, color, onClick, onKeyDown, isOnline, size, src, variant = 'circular', alt, overrides } = _a, restProps = __rest(_a, ["children", "color", "onClick", "onKeyDown", "isOnline", "size", "src", "variant", "alt", "overrides"]);
+    const { children, color, onClick, onKeyDown, isOnline, size, src, variant = 'circular', alt, overrides } = props, restProps = __rest(props, ["children", "color", "onClick", "onKeyDown", "isOnline", "size", "src", "variant", "alt", "overrides"]);
     const theme = (0, react_2.useTheme)();
     const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
     // A clickable avatar acts as a button, so it is activated by Enter and Space too

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

@@ -76,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'

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/Badge/index.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const BadgeStyled_1 = __importDefault(require("./BadgeStyled"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 // One component for both variants, so changing the variant does not remount the badge
-const Badge = (props, ref) => (react_1.default.createElement(BadgeStyled_1.default, Object.assign({}, (0, useThemeProps_1.default)('Badge', props), { ref: ref })));
+const Badge = (props, ref) => (react_1.default.createElement(BadgeStyled_1.default, Object.assign({}, props, { ref: ref })));
 exports.default = react_1.default.forwardRef(Badge);

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:

package/Button/ButtonContainer.d.ts

@@ -30,7 +30,7 @@ declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttribut
     /**
      * 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:
@@ -41,14 +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 | undefined;
+    readonly variant?: ButtonVariant;
     /**
      * The orientation of the ButtonGroup the button is in
      */
-    readonly groupOrientation?: ButtonGroupOrientation | undefined;
+    readonly groupOrientation?: ButtonGroupOrientation;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonContainer.js

@@ -19,9 +19,19 @@ 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 */
@@ -30,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;
@@ -45,10 +61,11 @@ 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 })}

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

@@ -6,6 +6,6 @@ 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;

package/Button/ButtonTextWrapper.d.ts

@@ -24,6 +24,6 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * ```
      `
      */
-    readonly iconOnly?: boolean | undefined;
+    readonly iconOnly?: ButtonContainerProps["iconOnly"];
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Button/buttonVariants.d.ts

@@ -12,5 +12,5 @@ export declare const buttonVariantStyles: (params: {
     readonly disabled?: boolean;
     readonly group?: ButtonGroupOrientation;
     readonly theme: Theme;
-}) => import("@emotion/utils").SerializedStyles;
+}) => import("@emotion/react").SerializedStyles;
 export {};

package/Button/buttonVariants.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buttonVariantStyles = void 0;
 const react_1 = require("@emotion/react");
 const Color_1 = __importDefault(require("../Color"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const parseColor = (color, fallback) => {
     try {
         return Color_1.default.fromString(color);
@@ -88,7 +89,7 @@ const outlinedStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
     : $color.toString()};
   background-color: transparent;
   border-style: solid;
-  border-width: 0.14em;
+  border-width: ${tokens_1.CONTROL_BORDER};
 
   ${!disabled &&
     (0, react_1.css) `
@@ -132,7 +133,7 @@ const plainStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
 const groupStyles = ({ $group, $variant, $color }) => $group &&
     (0, react_1.css) `
     border-style: solid;
-    border-width: 0.14em;
+    border-width: ${tokens_1.CONTROL_BORDER};
     ${$variant !== 'outlined' &&
         (0, react_1.css) `
       border-color: transparent;

package/Button/index.d.ts

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

package/Button/index.js

@@ -5,25 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const ButtonStyled_1 = __importDefault(require("./ButtonStyled"));
-const ButtonGroupContext_1 = __importDefault(require("../ButtonGroup/ButtonGroupContext"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
-/**
- * The props the ButtonGroup gives to its buttons. Inside the group the theme does not set them:
- * the own props of the button win, then the group, then the theme
- */
-const GROUP_PROPS = ['variant', 'color', 'disabled'];
 // One component for all the variants, so changing the variant does not remount the button
-const Button = (props, ref) => {
-    const group = react_1.default.useContext(ButtonGroupContext_1.default);
-    const themedProps = (0, useThemeProps_1.default)('Button', props);
-    if (!group) {
-        return react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, themedProps, { ref: ref }));
-    }
-    const ownProps = props;
-    const buttonProps = Object.assign({}, themedProps);
-    GROUP_PROPS.forEach(key => {
-        buttonProps[key] = ownProps[key];
-    });
-    return react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, buttonProps, { ref: ref }));
-};
+const Button = (props, ref) => (react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, props, { ref: ref })));
 exports.default = react_1.default.forwardRef(Button);