@via-profit/ui-kit 0.1.0-rc.3 → 0.1.0-rc.30

package/Autocomplete/index.d.ts

@@ -30,7 +30,7 @@ export type AutocompleteRef<T> = Pick<MenuRef<T>, 'scrollToItem' | 'scrollTo' |
     readonly blur: () => void;
     readonly clearInput: () => void;
 };
-declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "value" | "isOpen" | "estimatedItemSize" | "overscanCount" | "items" | "endThreshold" | "multiple" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
+declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "isOpen" | "estimatedItemSize" | "overscanCount" | "items" | "value" | "endThreshold" | "multiple" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
     readonly containerRef?: React.Ref<HTMLDivElement> | undefined;
     readonly itemToString: ItemToString<T, Multiple>;
     readonly renderInput: (params: RenderInputProps<T, Multiple>) => React.ReactNode;

package/Button/ButtonBase.d.ts

@@ -1,4 +1,62 @@
 import React from 'react';
-export type ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+import { ButtonIconWrapperProps } from './ButtonIconWrapper';
+import { ButtonTextWrapperProps } from './ButtonTextWrapper';
+import { ButtonContainerProps } from './ButtonContainer';
+type ButtonNativeProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export interface ButtonBaseProps extends Omit<ButtonNativeProps, 'color'> {
+    /**
+     * Icon or another JSX element placed before button label\
+     * Example:
+     * ```tsx
+     * <Button startIcon={<MyIconElement />}>
+     *   Label
+     * </Button>
+     * ```
+     */
+    readonly startIcon?: JSX.Element;
+    /**
+     * Icon or another JSX element placed after button label
+     * Example:
+     * ```tsx
+     * <Button endIcon={<MyIconElement />}>
+     *   Label
+     * </Button>
+     * ```
+     */
+    readonly endIcon?: JSX.Element;
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: ButtonContainerProps['iconOnly'];
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: ButtonContainerProps['color'];
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: ButtonBaseOverrides;
+}
+export interface ButtonBaseOverrides {
+    /**
+     * Element container
+     */
+    readonly Container?: React.ForwardRefExoticComponent<ButtonContainerProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * icon wrapper
+     */
+    readonly IconWrapper?: React.ForwardRefExoticComponent<ButtonIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * text wrapper
+     */
+    readonly TextWrapper?: React.ForwardRefExoticComponent<ButtonTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+}
 declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonBase.js

@@ -15,24 +15,22 @@ 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 Button = styled_1.default.button `
-  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  padding: 0.8em 1em;
-  cursor: pointer;
-  font-size: 1em;
-  border: 0;
-  outline: transparent;
-  transition: all 180ms ease-out 0s;
-  background: none;
-  color: currentColor;
-`;
-const ButtonText = styled_1.default.span `
-  font-size: 0.86em;
-`;
+const ButtonIconWrapper_1 = __importDefault(require("./ButtonIconWrapper"));
+const ButtonTextWrapper_1 = __importDefault(require("./ButtonTextWrapper"));
+const ButtonContainer_1 = __importDefault(require("./ButtonContainer"));
 const ButtonBase = (props, ref) => {
-    const { children } = props, otherProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        react_1.default.createElement(ButtonText, null, children)));
+    const { children, startIcon, endIcon, color, overrides, iconOnly } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides", "iconOnly"]);
+    const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: ButtonTextWrapper_1.default,
+        IconWrapper: ButtonIconWrapper_1.default,
+        Container: ButtonContainer_1.default }, overrides)), [overrides]);
+    if (iconOnly &&
+        ((typeof startIcon !== 'undefined' && startIcon !== null) ||
+            (typeof endIcon !== 'undefined' && endIcon !== null))) {
+        console.warn('The «iconOnly» property should not be used simultaneously with «startIcon» and/or «endIcon»');
+    }
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, iconOnly: iconOnly, 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))));
 };
 exports.default = react_1.default.forwardRef(ButtonBase);

package/Button/ButtonContainer.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+export type ButtonContainerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: boolean;
+};
+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;
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/ButtonContainer.js

@@ -0,0 +1,56 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 StyledButton = styled_1.default.button `
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  padding: 0.8em 1em;
+  font-size: 0.8rem;
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  font-size: 1em;
+  border-width: 0;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 0.14em;
+  transition: all 180ms ease-out 0s;
+  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 &&
+    (0, react_2.css) `
+      padding: 1em;
+      justify-content: center;
+      width: 2.6em;
+      height: 2.6em;
+      border-radius: ${theme.shape.radiusFactor * 3}em;
+    `}
+`;
+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));
+};
+exports.default = react_1.default.forwardRef(ButtonContainer);

package/Button/ButtonIconWrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ButtonIconWrapperProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * Icon position
+     */
+    readonly position: 'start' | 'end';
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * Icon position
+     */
+    readonly position: "end" | "start";
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Button/ButtonIconWrapper.js

@@ -0,0 +1,37 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 Wrapper = styled_1.default.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${({ $position }) => $position === 'start' &&
+    (0, react_2.css) `
+      margin-right: 0.8em;
+    `};
+  ${({ $position }) => $position === 'end' &&
+    (0, react_2.css) `
+      margin-left: 0.8em;
+    `};
+`;
+const ButtonIconWrapper = (props, ref) => {
+    const { children, position } = props, nativeProps = __rest(props, ["children", "position"]);
+    return (react_1.default.createElement(Wrapper, Object.assign({ "$position": position }, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonIconWrapper);

package/Button/ButtonOutlined.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonBaseProps } from './ButtonBase';
+export type ButtonOutlinedProps = ButtonBaseProps;
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/ButtonOutlined.js

@@ -0,0 +1,87 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 Color_1 = __importDefault(require("../Color"));
+const ButtonBase_1 = __importDefault(require("./ButtonBase"));
+const StyledOutlinedButton = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme, disabled, $color }) => {
+    switch (true) {
+        case disabled:
+            return theme.color.textPrimary.alpha(0.4).toString();
+        default:
+            return $color.darken(30).toString();
+    }
+}};
+  border-color: ${({ theme, disabled, $color }) => {
+    switch (true) {
+        case disabled:
+            return theme.color.surface.darken(80).alpha(0.4).toString();
+        default:
+            return $color.toString();
+    }
+}};
+  background-color: transparent;
+  border-style: solid;
+  border-width: 0.14em;
+  ${({ disabled, $color, theme }) => !disabled &&
+    (0, react_2.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: ${$color.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
+      }
+    `};
+`;
+const ButtonOutlined = (props, ref) => {
+    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
+    const theme = (0, react_2.useTheme)();
+    const $color = react_1.default.useMemo(() => {
+        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;
+            case typeof color === 'string': {
+                let c = theme.color.textPrimary;
+                try {
+                    if (color) {
+                        c = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return c;
+            }
+            default:
+                return theme.color.textPrimary;
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(StyledOutlinedButton, Object.assign({ disabled: disabled, "$color": $color }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonOutlined);

package/Button/ButtonPlain.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonBaseProps } from './ButtonBase';
+export type ButtonPlainProps = ButtonBaseProps;
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/ButtonPlain.js

@@ -0,0 +1,90 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 Color_1 = __importDefault(require("../Color"));
+const ButtonBase_1 = __importDefault(require("./ButtonBase"));
+const StyledPlainButton = (0, styled_1.default)(ButtonBase_1.default) `
+  box-shadow: none;
+  color: ${({ $color, disabled }) => {
+    switch (true) {
+        case disabled:
+            return $color.alpha(0.4).toString();
+        default:
+            return $color.toString();
+    }
+}};
+  background: none;
+  ${({ disabled, theme, $color }) => !disabled &&
+    (0, react_2.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-color: ${$color.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
+      }
+    `}
+`;
+const ButtonPlain = (props, ref) => {
+    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
+    const theme = (0, react_2.useTheme)();
+    const { $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $color: theme.color.textPrimary,
+                };
+            case typeof color === 'string': {
+                let $color = theme.color.textPrimary;
+                try {
+                    if (color) {
+                        $color = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $color,
+                };
+            }
+            default:
+                return {
+                    $color: theme.color.textPrimary,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(StyledPlainButton, Object.assign({ "$color": $color, disabled: disabled }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonPlain);

package/Button/ButtonStandard.d.ts

@@ -1,19 +1,5 @@
 import React from 'react';
-/**
- * Standard
- */
-export type ButtonStandardProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    /**
-     * Starticon
-     */
-    readonly startIcon?: JSX.Element;
-    readonly endIcon?: JSX.Element;
-};
-declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    /**
-     * Starticon
-     */
-    readonly startIcon?: JSX.Element | undefined;
-    readonly endIcon?: JSX.Element | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+import { ButtonBaseProps } from './ButtonBase';
+export type ButtonStandardProps = ButtonBaseProps;
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonStandard.js

@@ -16,35 +16,95 @@ 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 react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
 const ButtonBase_1 = __importDefault(require("./ButtonBase"));
-const Button = (0, styled_1.default)(ButtonBase_1.default) `
-  color: ${({ theme }) => theme.colors.textPrimary().toString()};
-  background-color: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundPrimary().lighten(20).toString()
-    : theme.colors.backgroundPrimary().toString()};
-  box-shadow: 0 2px 12px
-    ${({ theme }) => theme.colors.backgroundPrimary().darken(40).alpha(0.6).toString()};
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(20).toString()};
-  }
-  &:active {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(40).toString()};
-  }
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary().toString()};
-  }
-`;
-const StartIconWrapper = styled_1.default.span `
-  margin-right: 0.8em;
-`;
-const EndIconWrapper = styled_1.default.span `
-  margin-left: 0.8em;
+const StyledStandardButton = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ $color, disabled }) => {
+    switch (true) {
+        case disabled:
+            return $color.alpha(0.4).toString();
+        default:
+            return $color.toString();
+    }
+}};
+  background-color: ${({ $background, disabled }) => {
+    switch (true) {
+        case disabled:
+            return $background.darken(10).toString();
+        default:
+            return $background.toString();
+    }
+}};
+  box-shadow: 0 0.125em 0.25em ${({ $background }) => $background.darken(100).alpha(0.5).toString()};
+  ${({ $background }) => {
+    switch (true) {
+        case $background.luminance() > 0.49:
+            return $background.darken(40).alpha(0.8).toString();
+        default:
+            return $background.darken(20).alpha(0.5).toString();
+    }
+}};
+  ${({ disabled, $background, theme }) => !disabled &&
+    (0, react_2.css) `
+      &:hover {
+        background-color: ${$background.darken(30).toString()};
+      }
+      &:active {
+        background-color: ${$background.darken(80).toString()};
+      }
+      &:focus-visible {
+        outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
+      }
+    `}
 `;
 const ButtonStandard = (props, ref) => {
-    const { children, startIcon, endIcon } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon"]);
-    return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(StartIconWrapper, null, startIcon)),
-        children,
-        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(EndIconWrapper, null, endIcon))));
+    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
+    const theme = (0, react_2.useTheme)();
+    const { $background, $color } = react_1.default.useMemo(() => {
+        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,
+                };
+            case typeof color === 'string': {
+                let $background = theme.color.surface;
+                try {
+                    if (color) {
+                        $background = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $background,
+                    $color: $background.contrast(theme.color.textPrimary.rgbString()) > 5
+                        ? theme.color.textPrimary
+                        : theme.color.surface,
+                };
+            }
+            default:
+                return {
+                    $background: theme.color.surface,
+                    $color: theme.color.textPrimary,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(StyledStandardButton, Object.assign({ "$color": $color, "$background": $background, disabled: disabled }, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ButtonStandard);

package/Button/ButtonTextWrapper.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { ButtonContainerProps } from './ButtonContainer';
+export type ButtonTextWrapperProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: ButtonContainerProps['iconOnly'];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: boolean | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;