@synerise/ds-button 1.5.16 → 1.5.18

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.18](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.17...@synerise/ds-button@1.5.18) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-button
+
+## [1.5.17](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.16...@synerise/ds-button@1.5.17) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-button
+
 ## [1.5.16](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.15...@synerise/ds-button@1.5.16) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-button

package/README.md

@@ -65,9 +65,11 @@ import { AngleDownS } from '@synerise/ds-icon';
 | mode           | Defines the mode of the button content. It affects content inside the button | `single-icon` / `split` / `two-icons` /`label-icon` / `icon-label`                                                                        | -           |
 | onClick        | Callback executed after clicking the button                                  | (event: React.MouseEvent) => void                                                                                                         | -           |
 | type           | Defines the type of the button.                                              | `primary` / `secondary`/ `tertiary`/ `tertiary-white` / `ghost-primary` / `ghost` / `ghost-white` / `custom-color` / `custom-color-ghost` | `secondary` |
-| iconColor      | Defines color of `icon` in button.                                           | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet`                                      | `grey`      |
+| iconColor      | Defines color of `icon` in button.                                           | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet`                                      | -           |
 | error          | Defines if the button has error button styles .                              | boolean                                                                                                                                   | `false`     |
+| readOnly       | Disables ripple and freezes hover/focus styles (cursor: default).            | boolean                                                                                                                                   | -           |
 | tagProps       | Renders a status tag next to button label                                    | TagProps see ds-tag                                                                                                                       | -           |
+| tooltipProps   | Wraps the button label in a tooltip.                                         | TooltipProps see ds-tooltip                                                                                                               | -           |
 
 ## ButtonToggle
 
@@ -104,7 +106,7 @@ Special type of Button, with two states: default and activated (selected). Inher
 | disabled | Defines if the button is disabled.          | boolean                           | `false` |
 | expanded | The current state of the button.            | boolean                           | `false` |
 | onClick  | Callback executed after clicking the button | (event: React.MouseEvent) => void | -       |
-| size     | Defines the size of the button.             | `S` / `M`                         | `M`     |
+| size     | Defines the size of the button.             | `S` / `M`                         | `S`     |
 
 ## Button.Checkbox
 
@@ -134,3 +136,4 @@ It inherits all `Button`'s props excluding.
 | Property | Description                                              | Type      | Default     |
 | -------- | -------------------------------------------------------- | --------- | ----------- |
 | active   | (optional) Sets checkbox state for controlled component. | `boolean` | `undefined` |
+| hasError | (optional) Changes appearance for wrong validation.      | `boolean` | `undefined` |

package/dist/Button.d.ts

@@ -1,27 +1,25 @@
-import React, { type MouseEvent } from 'react';
-import '@synerise/ds-core/dist/js/style';
-import './style/index.less';
+import { default as React, MouseEvent } from 'react';
 declare const Button: React.ForwardRefExoticComponent<Omit<Partial<{
     href: string;
     target?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
-} & import("antd/lib/button/button").BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
-    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+} & import('antd/lib/button/button').BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import('antd/lib/button/button').ButtonHTMLType;
     onClick?: React.MouseEventHandler<HTMLElement>;
 } & Omit<React.ButtonHTMLAttributes<any>, "type" | "onClick">>, "ghost" | "type"> & {
-    type?: import("@synerise/ds-utils").LiteralStringUnion<import("./Button.types").ButtonType>;
-    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
-    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
-    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
-    justifyContent?: import("csstype").JustifyContentProperty;
+    type?: import('@synerise/ds-utils').LiteralStringUnion<import('./Button.types').ButtonType>;
+    mode?: import('@synerise/ds-utils').LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: import('csstype').JustifyContentProperty;
     loading?: boolean | {
         delay?: number;
     };
     onClick?: (event: MouseEvent<HTMLElement>) => void;
-    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
     error?: boolean;
     readOnly?: boolean;
-    tagProps?: import("@synerise/ds-tag").TagProps;
-    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+    tagProps?: import('@synerise/ds-tag').TagProps;
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/Button.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Button.figma.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import Button from "./Button.js";
+import { ButtonMode } from "./Button.types.js";
+const FIGMA_URL = "https://www.figma.com/design/fsSZONXpVvtrDsCgtu01Jb/Synerise-Design-System?node-id=139:4694&m=dev";
+const typeMapping = figma.enum("Variant", {
+  Primary: "primary",
+  Secondary: "secondary",
+  Tertiary: "tertiary",
+  "Tetriary White": "tertiary-white",
+  "Ghost Primary": "ghost-primary",
+  "Ghost Secondary": "ghost",
+  "Ghost Secondary White": "ghost-white"
+});
+const modeMapping = figma.enum("Content Type", {
+  Simple: void 0,
+  "Icon left": ButtonMode.ICON_LABEL,
+  "Icon right": ButtonMode.LABEL_ICON,
+  "Icon solo": ButtonMode.SINGLE_ICON,
+  "2 icons": ButtonMode.TWO_ICONS,
+  Split: ButtonMode.SPLIT
+});
+const sizeMapping = figma.enum("Size", {
+  Normal: void 0,
+  Large: "large"
+});
+const baseProps = {
+  type: typeMapping,
+  mode: modeMapping,
+  size: sizeMapping,
+  label: figma.string("✏️Text")
+};
+figma.connect(Button, FIGMA_URL, {
+  variant: {
+    State: "Default"
+  },
+  props: baseProps,
+  example: ({
+    type,
+    mode,
+    size,
+    label
+  }) => /* @__PURE__ */ jsx(Button, { type, mode, size, children: label })
+});
+figma.connect(Button, FIGMA_URL, {
+  variant: {
+    State: "Disabled"
+  },
+  props: baseProps,
+  example: ({
+    type,
+    mode,
+    size,
+    label
+  }) => /* @__PURE__ */ jsx(Button, { type, mode, size, disabled: true, children: label })
+});

package/dist/Button.js

@@ -1,110 +1,86 @@
-var _excluded = ["type", "mode", "justifyContent", "groupVariant", "loading", "onClick", "className", "color", "error", "tagProps", "children", "tooltipProps"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import '@synerise/ds-core/dist/js/style';
-import Icon, { SpinnerM } from '@synerise/ds-icon';
-import { TagShape } from '@synerise/ds-tag';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './Button.styles';
-import { ButtonMode } from './Button.types';
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect, useMemo } from "react";
+import Icon, { SpinnerM } from "@synerise/ds-icon";
+import { TagShape } from "@synerise/ds-tag";
+import Tooltip from "@synerise/ds-tooltip";
+import { RIPPLE_ANIMATION_TIME, ButtonLabel, Tag, AntdButton, RippleEffect, Spinner, ButtonFocus } from "./Button.styles.js";
+import { ButtonMode } from "./Button.types.js";
 import "./style/index.css";
-var RIPPLE_ANIMATION_OFFSET = 50;
-var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'secondary' : _ref$type,
-    mode = _ref.mode,
-    _ref$justifyContent = _ref.justifyContent,
-    justifyContent = _ref$justifyContent === void 0 ? 'center' : _ref$justifyContent,
-    groupVariant = _ref.groupVariant,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    onClick = _ref.onClick,
-    className = _ref.className,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'red' : _ref$color,
-    error = _ref.error,
-    tagProps = _ref.tagProps,
-    children = _ref.children,
-    tooltipProps = _ref.tooltipProps,
-    antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var rippleRef = useRef(null);
-  var _useState = useState(''),
-    rippleClassName = _useState[0],
-    setRippleClassName = _useState[1];
-  var _useState2 = useState(false),
-    pressed = _useState2[0],
-    setPressed = _useState2[1];
-  useEffect(function () {
-    var rippleAnimation;
-    if (rippleClassName !== '') {
-      rippleAnimation = setTimeout(function () {
-        setRippleClassName('');
-      }, S.RIPPLE_ANIMATION_TIME - RIPPLE_ANIMATION_OFFSET);
+const RIPPLE_ANIMATION_OFFSET = 50;
+const Button = forwardRef(({
+  type = "secondary",
+  mode,
+  justifyContent = "center",
+  groupVariant,
+  loading = false,
+  onClick,
+  className,
+  color = "red",
+  error,
+  tagProps,
+  children,
+  tooltipProps,
+  ...antdProps
+}, forwardedRef) => {
+  const rippleRef = useRef(null);
+  const [rippleClassName, setRippleClassName] = useState("");
+  const [pressed, setPressed] = useState(false);
+  useEffect(() => {
+    let rippleAnimation;
+    if (rippleClassName !== "") {
+      rippleAnimation = setTimeout(() => {
+        setRippleClassName("");
+      }, RIPPLE_ANIMATION_TIME - RIPPLE_ANIMATION_OFFSET);
     }
-    return function () {
+    return () => {
       rippleAnimation && clearTimeout(rippleAnimation);
     };
   }, [rippleClassName]);
-  var handleClick = function handleClick(event) {
-    var button = event.currentTarget.closest('.ant-btn');
+  const handleClick = (event) => {
+    const button = event.currentTarget.closest(".ant-btn");
     if (button) {
-      var buttonBoundingRect = button.getBoundingClientRect();
-      var x = event.clientX - buttonBoundingRect.left;
-      var y = event.clientY - buttonBoundingRect.top;
+      const buttonBoundingRect = button.getBoundingClientRect();
+      const x = event.clientX - buttonBoundingRect.left;
+      const y = event.clientY - buttonBoundingRect.top;
       if (rippleRef.current) {
-        rippleRef.current.style.cssText = "top: " + y + "px; left: " + x + "px";
+        rippleRef.current.style.cssText = `top: ${y}px; left: ${x}px`;
       }
-      setRippleClassName('animate');
+      setRippleClassName("animate");
       onClick && onClick(event);
     }
   };
-  var classNameString = useMemo(function () {
-    var modeStringifed = mode || '';
-    var readOnlyStringifed = antdProps.readOnly ? 'read-only' : '';
-    var classNameStringifed = className || '';
-    return "ds-button " + modeStringifed + " " + classNameStringifed + " " + readOnlyStringifed;
+  const classNameString = useMemo(() => {
+    const modeStringifed = mode || "";
+    const readOnlyStringifed = antdProps.readOnly ? "read-only" : "";
+    const classNameStringifed = className || "";
+    return `ds-button ${modeStringifed} ${classNameStringifed} ${readOnlyStringifed}`;
   }, [mode, className, antdProps.readOnly]);
-  var buttonLabel = useMemo(function () {
-    var label = /*#__PURE__*/React.createElement(S.ButtonLabel, {
-      // ref={forwardedRef}
-      withTooltip: !!tooltipProps,
-      "data-testid": "ds-button-label",
-      className: "ds-button-label"
-    }, children, tagProps && mode !== ButtonMode.SINGLE_ICON && /*#__PURE__*/React.createElement(S.Tag, _extends({}, tagProps, {
-      shape: TagShape.MEDIUM_ROUND,
-      asPill: true
-    })));
-    return tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, label) : label;
+  const buttonLabel = useMemo(() => {
+    const label = /* @__PURE__ */ jsxs(
+      ButtonLabel,
+      {
+        withTooltip: !!tooltipProps,
+        "data-testid": "ds-button-label",
+        className: "ds-button-label",
+        children: [
+          children,
+          tagProps && mode !== ButtonMode.SINGLE_ICON && /* @__PURE__ */ jsx(Tag, { ...tagProps, shape: TagShape.MEDIUM_ROUND, asPill: true })
+        ]
+      }
+    );
+    return tooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps, children: label }) : label;
   }, [children, tagProps, mode, tooltipProps]);
-  return /*#__PURE__*/React.createElement(S.AntdButton, _extends({
-    ref: forwardedRef,
-    justifyContent: justifyContent,
-    type: type || 'secondary',
-    mode: mode,
-    error: error,
-    groupVariant: groupVariant,
-    loading: loading,
-    onClick: handleClick,
-    onMouseDown: function onMouseDown() {
-      setPressed(true);
-    },
-    onMouseUp: function onMouseUp() {
-      setPressed(false);
-    },
-    pressed: pressed,
-    className: classNameString,
-    customColor: color
-  }, antdProps), !antdProps.readOnly && /*#__PURE__*/React.createElement(S.RippleEffect, {
-    ref: rippleRef,
-    className: "btn-ripple " + rippleClassName
-  }), buttonLabel, loading && /*#__PURE__*/React.createElement(S.Spinner, {
-    className: "btn-spinner",
-    "data-testid": "button-spinner"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(SpinnerM, null)
-  })), /*#__PURE__*/React.createElement(S.ButtonFocus, {
-    className: "btn-focus"
-  }));
+  return /* @__PURE__ */ jsxs(AntdButton, { ref: forwardedRef, justifyContent, type: type || "secondary", mode, error, groupVariant, loading, onClick: handleClick, onMouseDown: () => {
+    setPressed(true);
+  }, onMouseUp: () => {
+    setPressed(false);
+  }, pressed, className: classNameString, customColor: color, ...antdProps, children: [
+    !antdProps.readOnly && /* @__PURE__ */ jsx(RippleEffect, { ref: rippleRef, className: `btn-ripple ${rippleClassName}` }),
+    buttonLabel,
+    loading && /* @__PURE__ */ jsx(Spinner, { className: "btn-spinner", "data-testid": "button-spinner", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SpinnerM, {}) }) }),
+    /* @__PURE__ */ jsx(ButtonFocus, { className: "btn-focus" })
+  ] });
 });
-export default Button;
+export {
+  Button as default
+};

package/dist/Button.styles.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
-import { type ButtonProps } from './Button.types';
+import { default as React } from 'react';
+import { ButtonProps } from './Button.types';
 export declare const RIPPLE_ANIMATION_TIME = 500;
-export declare const Spinner: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RippleEffect: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ButtonFocus: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Tag: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
+export declare const Spinner: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const RippleEffect: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ButtonFocus: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Tag: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<{
     id?: string | number;
     name?: string;
     textColor?: string;
     color?: string;
     image?: string;
-    shape?: import("@synerise/ds-tag").TagShape;
+    shape?: import('@synerise/ds-tag').TagShape;
     removable?: boolean;
     className?: string;
     disabled?: boolean;
@@ -18,20 +18,20 @@ export declare const Tag: import("styled-components").StyledComponent<React.Forw
     onRemove?: (tag: string | number) => void;
     prefixel?: React.ReactNode;
     suffixel?: React.ReactNode;
-    texts?: import("@synerise/ds-tag").TagTexts;
+    texts?: import('@synerise/ds-tag').TagTexts;
     asPill?: boolean;
     dashed?: boolean;
-    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "className" | "id" | "color" | "disabled" | "name" | "shape" | "textColor" | "image" | "removable" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const ButtonLabel: import("styled-components").StyledComponent<"div", any, {
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "className" | "id" | "color" | "disabled" | "name" | "shape" | "textColor" | "image" | "removable" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const ButtonLabel: import('styled-components').StyledComponent<"div", any, {
     withTooltip?: boolean;
 }, never>;
-export declare const AntdButton: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<Partial<{
+export declare const AntdButton: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<Omit<Partial<{
     href: string;
     target?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
-} & import("antd/lib/button/button").BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
-    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+} & import('antd/lib/button/button').BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import('antd/lib/button/button').ButtonHTMLType;
     onClick?: React.MouseEventHandler<HTMLElement>;
 } & Omit<React.ButtonHTMLAttributes<any>, "type" | "onClick">>, "type"> & Pick<ButtonProps, "mode" | "justifyContent" | "groupVariant" | "iconColor" | "error"> & {
     pressed: boolean;

package/dist/Button.styles.js

@@ -1,122 +1,73 @@
-var _excluded = ["mode", "type", "loading", "justifyContent", "groupVariant", "customColor", "pressed", "size", "iconColor", "error"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import Button from 'antd/lib/button';
-import React, { forwardRef } from 'react';
-import styled, { css, keyframes } from 'styled-components';
-import { IconContainer } from '@synerise/ds-icon';
-import DSTag from '@synerise/ds-tag';
-export var RIPPLE_ANIMATION_TIME = 500;
-var leftIcon = '0 4px 0 8px';
-var rightIcon = '0 8px 0 4px';
-var rippleInitialSize = 20;
-var buttonTypes = ['secondary', 'tertiary', 'ghost'];
-var splitTypes = ['secondary', 'tertiary'];
-var pressedStyles = function pressedStyles(props) {
-  return css(["color:", ";background:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}", " > .ds-icon:before{background-color:", ";}"], props.theme.palette['blue-600'], props.theme.palette['blue-100'], props.theme.palette['blue-300'], ButtonLabel, props.theme.palette['blue-200']);
-};
-var spinnerAnimation = keyframes(["from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}"]);
-var rippleAnimation = keyframes(["from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(20);}"]);
-export var Spinner = styled.div.withConfig({
+import { jsx } from "react/jsx-runtime";
+import Button from "antd/lib/button";
+import { forwardRef } from "react";
+import styled, { css, keyframes } from "styled-components";
+import { IconContainer } from "@synerise/ds-icon";
+import DSTag from "@synerise/ds-tag";
+const RIPPLE_ANIMATION_TIME = 500;
+const leftIcon = "0 4px 0 8px";
+const rightIcon = "0 8px 0 4px";
+const rippleInitialSize = 20;
+const buttonTypes = ["secondary", "tertiary", "ghost"];
+const splitTypes = ["secondary", "tertiary"];
+const pressedStyles = (props) => css(["color:", ";background:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}", " > .ds-icon:before{background-color:", ";}"], props.theme.palette["blue-600"], props.theme.palette["blue-100"], props.theme.palette["blue-300"], ButtonLabel, props.theme.palette["blue-200"]);
+const spinnerAnimation = /* @__PURE__ */ keyframes(["from{transform:rotateZ(0deg);}to{transform:rotateZ(360deg);}"]);
+const rippleAnimation = /* @__PURE__ */ keyframes(["from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(20);}"]);
+const Spinner = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Buttonstyles__Spinner",
   componentId: "sc-3lgta1-0"
 })(["position:absolute !important;top:0;left:0;width:100%;height:100%;margin:0;background-color:transparent;border-radius:inherit;display:flex;align-items:center;justify-content:center;", "{animation:", " 1s forwards linear infinite;}"], IconContainer, spinnerAnimation);
-export var RippleEffect = styled.span.withConfig({
+const RippleEffect = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Buttonstyles__RippleEffect",
   componentId: "sc-3lgta1-1"
 })(["&&{display:flex;width:", "px;height:", "px;top:50%;left:50%;position:absolute !important;border-radius:50%;padding:0 !important;margin:-", "px 0 0 -", "px !important;z-index:0;opacity:0;visibility:visible !important;&.animate{opacity:1;animation:", " ", "ms ease-in;animation-iteration-count:1;}&::after{display:none;}}"], rippleInitialSize, rippleInitialSize, rippleInitialSize / 2, rippleInitialSize / 2, rippleAnimation, RIPPLE_ANIMATION_TIME);
-export var ButtonFocus = styled.div.withConfig({
+const ButtonFocus = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Buttonstyles__ButtonFocus",
   componentId: "sc-3lgta1-2"
 })(["content:'';display:flex;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:box-shadow 0.3s ease;border-radius:inherit;z-index:99;box-shadow:inset 0 0 0 0 transparent;"]);
-export var Tag = styled(DSTag).withConfig({
+const Tag = /* @__PURE__ */ styled(DSTag).withConfig({
   displayName: "Buttonstyles__Tag",
   componentId: "sc-3lgta1-3"
 })(["margin:0 0 0 8px;flex:0 0 auto;"]);
-export var ButtonLabel = styled.div.withConfig({
+const ButtonLabel = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Buttonstyles__ButtonLabel",
   componentId: "sc-3lgta1-4"
-})(["display:flex;align-items:center;flex-grow:1;min-width:0;justify-content:center;", ""], function (props) {
-  return props.withTooltip && "\n    && {\n      pointer-events: all;\n    }";
-});
-export var AntdButton = styled(/*#__PURE__*/forwardRef(function (_ref, ref) {
-  var mode = _ref.mode,
-    type = _ref.type,
-    loading = _ref.loading,
-    justifyContent = _ref.justifyContent,
-    groupVariant = _ref.groupVariant,
-    customColor = _ref.customColor,
-    pressed = _ref.pressed,
-    size = _ref.size,
-    iconColor = _ref.iconColor,
-    error = _ref.error,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    ref: ref
-    // @ts-expect-error type type mismatch
-    ,
-    type: type === 'custom-color-ghost' ? 'ghost-primary' : type,
-    size: size
-  }, rest));
+})(["display:flex;align-items:center;flex-grow:1;min-width:0;justify-content:center;", ""], (props) => props.withTooltip && `
+    && {
+      pointer-events: all;
+    }`);
+const AntdButton = /* @__PURE__ */ styled(forwardRef(({
+  mode,
+  type,
+  loading,
+  justifyContent,
+  groupVariant,
+  customColor,
+  pressed,
+  size,
+  iconColor,
+  error,
+  ...rest
+}, ref) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      type: type === "custom-color-ghost" ? "ghost-primary" : type,
+      size,
+      ...rest
+    }
+  );
 })).withConfig({
   displayName: "Buttonstyles__AntdButton",
   componentId: "sc-3lgta1-5"
-})(["   &&{-webkit-mask-image:-webkit-radial-gradient(white,black);display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;justify-content:", ";", ";&:not(:disabled):not(:focus){", " span{color:inherit;}}", " > *:not(.btn-focus){position:relative;}", " > .ds-icon,> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;svg{transition:all .3s cubic-bezier(.645,.045,.355,1);}}", " &&.ant-btn-default:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]){&:active{", "}&:focus:not(:active){color:", ";svg{fill:currentColor;}background:", ";}&:hover:not(:disabled):not(:focus){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}", " > .ds-icon:before{background-color:", ";}}&:active{color:", ";svg{fill:", ";!important;}}}", " ", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " &:hover:not(:disabled):not(:focus){", " span{color:", ";cursor:inherit;}}}"], function (props) {
-  return props.justifyContent;
-}, function (props) {
-  return props.shape && props.shape === 'circle' && css(["border-radius:50%;"]);
-}, ButtonLabel, ButtonLabel, ButtonLabel, function (props) {
-  return props.mode !== 'single-icon' && css(["&.ant-btn:not(.ds-expander):not(.ds-button-creator):not( .btn-search ):not(.btn-search-open){min-width:54px;}"]);
-}, function (props) {
-  return pressedStyles(props);
-}, function (props) {
-  return props.error ? props.theme.palette['red-600'] : props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette['grey-050'];
-}, function (props) {
-  return props.theme.palette['blue-050'];
-}, function (props) {
-  return props.theme.palette['blue-300'];
-}, ButtonLabel, function (props) {
-  return props.theme.palette['blue-200'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.readOnly && props.type !== 'custom-color-ghost' && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-secondary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-primary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-tertiary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-tertiary-white{&:hover,&:focus{background:rgba(219,224,227,0.15);.btn-focus{box-shadow:inset 0 0 0 0 rgba(219,224,227,0.15);}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-ghost-primary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-ghost{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-ghost-white{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}"], props.theme.palette['grey-050'], props.theme.palette['grey-300'], ButtonLabel, props.theme.palette['grey-700'], props.theme.palette['grey-700'], props.theme.palette['blue-600'], props.theme.palette['blue-600'], ButtonLabel, props.theme.palette['grey-050'], props.theme.palette['grey-050'], props.theme.palette['grey-100'], props.theme.palette['grey-100'], ButtonLabel, props.theme.palette['grey-700'], props.theme.palette['grey-700'], ButtonLabel, props.theme.palette['grey-050'], props.theme.palette['grey-050'], props.theme.palette.white, props.theme.palette.white, ButtonLabel, props.theme.palette['blue-600'], props.theme.palette['blue-600'], props.theme.palette.white, props.theme.palette.white, ButtonLabel, props.theme.palette['grey-600'], props.theme.palette['grey-600'], props.theme.palette['grey-600'], props.theme.palette['grey-600'], ButtonLabel, props.theme.palette['grey-050'], props.theme.palette['grey-050']);
-}, function (props) {
-  return props.loading && css(["> *:not(.btn-focus){opacity:0;visibility:hidden;}", "{opacity:1;visibility:visible;}"], Spinner);
-}, function (props) {
-  return buttonTypes.includes(props.type) && !props.error && css(["&.ant-btn{&:not(:disabled){svg{fill:", ";}&:hover{svg{fill:currentColor;}}}}"], props.iconColor ? props.theme.palette[props.iconColor + "-600"] : 'currentColor');
-}, function (props) {
-  return props.mode === 'split' && css(["&.ant-btn{padding-right:0;transition:0s;", "{position:relative;}", " > .ds-icon{margin:0 4px 0 15px;position:relative;&:before{content:'';background-color:", ";top:", ";height:", ";width:1px;left:-4px;position:absolute;transition:all 0.3s ease;}}}"], ButtonLabel, ButtonLabel, !splitTypes.includes(props.type) ? "rgba(255, 255, 255, 0.15);" : props.theme.palette['grey-300'], props.size === 'large' ? '-12px' : '-4px', props.size === 'large' ? '48px' : '32px');
-}, function (props) {
-  return props.mode === 'two-icons' && css(["&.ant-btn{padding:0;transition:0s;", " > ", ":first-of-type,", " > .ds-icon:first-of-type,& > ", ":first-of-type,& > .ds-icon:first-of-type{margin:", ";}", " > ", ":nth-of-type(2),", " > .ds-icon:nth-of-type(2),& > ", ":nth-of-type(2),& > .ds-icon:nth-of-type(2){margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon, ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag);
-}, function (props) {
-  return props.mode === 'label-icon' && css(["&.ant-btn{padding-right:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag);
-}, function (props) {
-  return props.mode === 'icon-label' && css(["&.ant-btn{padding-left:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon);
-}, function (props) {
-  return props.mode === 'single-icon' && css(["&.ant-btn:not(.ds-expander){display:flex;align-items:center;justify-content:center;padding:0;transition:0s;width:32px;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:0 4px 0 4px;}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer);
-}, function (props) {
-  return props.mode === 'single-icon' && props.size === 'large' && css(["&.ant-btn{width:48px;}"]);
-}, function (props) {
-  return props.groupVariant === 'squared' && css(["&.ant-btn{border-radius:0;}"]);
-}, function (props) {
-  return props.groupVariant === 'left-rounded' && css(["&.ant-btn{border-radius:3px 0 0 3px;}"]);
-}, function (props) {
-  return props.groupVariant === 'right-rounded' && css(["&.ant-btn{border-radius:0 3px 3px 0;}"]);
-}, function (props) {
-  return props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";", "{color:", ";}svg{fill:", ";}.btn-focus{box-shadow:none;}&&&:hover:not(:disabled):not(:focus){background-color:", ";box-shadow:inset 0 0 0 1px ", ";", "{color:", ";}svg{fill:", " !important;}}&:active{background-color:", ";box-shadow:none;", "{color:", ";}svg{fill:", ";}}&&&:focus:not(:active){border:none !important;background-color:", ";", "{color:", ";}.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}svg{fill:", ";}}", "{background-color:", ";}"], props.theme.palette["red-100"], props.theme.palette['red-600'], ButtonLabel, props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-200"], props.theme.palette['red-600'], ButtonLabel, props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-700"], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette["red-100"], ButtonLabel, props.theme.palette["red-600"], props.theme.palette['blue-600'], props.theme.palette["red-600"], RippleEffect, props.theme.palette["red-700"]);
-}, function (props) {
-  return props.error && props.type === 'secondary' && css(["&&&.ant-btn{", "{color:", ";}svg{fill:", ";}.btn-focus{box-shadow:none;}&&&:hover{background-color:", ";.btn-focus{box-shadow:none;}}&&&:focus:not(:active){.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&&&:active{background-color:", ";", "{color:", ";}svg{fill:", ";}}", "{background-color:", ";}}"], ButtonLabel, props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-200"], props.theme.palette['blue-600'], props.theme.palette["red-700"], ButtonLabel, props.theme.palette.white, props.theme.palette.white, RippleEffect, props.theme.palette["red-700"]);
-}, function (props) {
-  return props.type === 'custom-color' && !props.error && css(["&.ant-btn{background-color:", ";border:0 solid transparent;color:", ";", "{color:", ";}svg{color:", ";fill:", ";}", "{box-shadow:inset 0 0 0 0px transparent;}", "{background-color:", ";}&:focus:not(.read-only){", "{box-shadow:inset 0 0 0 2px ", ";}}&:hover:not(:disabled):not(:focus){background-color:", ";", "{color:", ";}svg{color:", " !important;fill:", " !important;}}&:disabled{opacity:0.4;background-color:", ";", "{color:", ";}svg{color:", " !important;fill:", " !important;}}}"], props.theme.palette[props.customColor + "-600"], props.theme.palette.white, ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, ButtonFocus, RippleEffect, props.theme.palette[props.customColor + "-700"], ButtonFocus, props.theme.palette['blue-600'], props.theme.palette[props.readOnly ? props.customColor + "-600" : props.customColor + "-500"], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, props.theme.palette[props.customColor + "-600"], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white);
-}, function (props) {
-  return props.type === 'custom-color-ghost' && !props.error && css(["&&&{color:", ";.ds-icon > svg{fill:", ";}&:disabled{opacity:0.4;color:", ";.ds-icon > svg{fill:", " !important;}}}"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"]);
-}, function (props) {
-  return props.readOnly && props.type === 'custom-color-ghost' && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-ghost-primary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", ";!important;}}}"], props.theme.palette.white, props.theme.palette.white, ButtonLabel, props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"]);
-}, Tag, function (props) {
-  return props.theme.palette.white;
-});
+})(["   &&{-webkit-mask-image:-webkit-radial-gradient(white,black);display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;justify-content:", ";", ";&:not(:disabled):not(:focus){", " span{color:inherit;}}", " > *:not(.btn-focus){position:relative;}", " > .ds-icon,> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;svg{transition:all .3s cubic-bezier(.645,.045,.355,1);}}", " &&.ant-btn-default:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]){&:active{", "}&:focus:not(:active){color:", ";svg{fill:currentColor;}background:", ";}&:hover:not(:disabled):not(:focus){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}", " > .ds-icon:before{background-color:", ";}}&:active{color:", ";svg{fill:", ";!important;}}}", " ", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " &:hover:not(:disabled):not(:focus){", " span{color:", ";cursor:inherit;}}}"], (props) => props.justifyContent, (props) => props.shape && props.shape === "circle" && css(["border-radius:50%;"]), ButtonLabel, ButtonLabel, ButtonLabel, (props) => props.mode !== "single-icon" && css(["&.ant-btn:not(.ds-expander):not(.ds-button-creator):not( .btn-search ):not(.btn-search-open){min-width:54px;}"]), (props) => pressedStyles(props), (props) => props.error ? props.theme.palette["red-600"] : props.theme.palette["grey-600"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-300"], ButtonLabel, (props) => props.theme.palette["blue-200"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"], (props) => props.readOnly && props.type !== "custom-color-ghost" && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-secondary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-primary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-tertiary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-tertiary-white{&:hover,&:focus{background:rgba(219,224,227,0.15);.btn-focus{box-shadow:inset 0 0 0 0 rgba(219,224,227,0.15);}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-ghost-primary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-ghost{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}&&.ant-btn-ghost-white{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", " !important;}}}"], props.theme.palette["grey-050"], props.theme.palette["grey-300"], ButtonLabel, props.theme.palette["grey-700"], props.theme.palette["grey-700"], props.theme.palette["blue-600"], props.theme.palette["blue-600"], ButtonLabel, props.theme.palette["grey-050"], props.theme.palette["grey-050"], props.theme.palette["grey-100"], props.theme.palette["grey-100"], ButtonLabel, props.theme.palette["grey-700"], props.theme.palette["grey-700"], ButtonLabel, props.theme.palette["grey-050"], props.theme.palette["grey-050"], props.theme.palette.white, props.theme.palette.white, ButtonLabel, props.theme.palette["blue-600"], props.theme.palette["blue-600"], props.theme.palette.white, props.theme.palette.white, ButtonLabel, props.theme.palette["grey-600"], props.theme.palette["grey-600"], props.theme.palette["grey-600"], props.theme.palette["grey-600"], ButtonLabel, props.theme.palette["grey-050"], props.theme.palette["grey-050"]), (props) => props.loading && css(["> *:not(.btn-focus){opacity:0;visibility:hidden;}", "{opacity:1;visibility:visible;}"], Spinner), (props) => buttonTypes.includes(props.type) && !props.error && css(["&.ant-btn{&:not(:disabled){svg{fill:", ";}&:hover{svg{fill:currentColor;}}}}"], props.iconColor ? props.theme.palette[`${props.iconColor}-600`] : "currentColor"), (props) => props.mode === "split" && css(["&.ant-btn{padding-right:0;transition:0s;", "{position:relative;}", " > .ds-icon{margin:0 4px 0 15px;position:relative;&:before{content:'';background-color:", ";top:", ";height:", ";width:1px;left:-4px;position:absolute;transition:all 0.3s ease;}}}"], ButtonLabel, ButtonLabel, !splitTypes.includes(props.type) ? `rgba(255, 255, 255, 0.15);` : props.theme.palette["grey-300"], props.size === "large" ? "-12px" : "-4px", props.size === "large" ? "48px" : "32px"), (props) => props.mode === "two-icons" && css(["&.ant-btn{padding:0;transition:0s;", " > ", ":first-of-type,", " > .ds-icon:first-of-type,& > ", ":first-of-type,& > .ds-icon:first-of-type{margin:", ";}", " > ", ":nth-of-type(2),", " > .ds-icon:nth-of-type(2),& > ", ":nth-of-type(2),& > .ds-icon:nth-of-type(2){margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon, ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "label-icon" && css(["&.ant-btn{padding-right:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "icon-label" && css(["&.ant-btn{padding-left:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon), (props) => props.mode === "single-icon" && css(["&.ant-btn:not(.ds-expander){display:flex;align-items:center;justify-content:center;padding:0;transition:0s;width:32px;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:0 4px 0 4px;}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer), (props) => props.mode === "single-icon" && props.size === "large" && css(["&.ant-btn{width:48px;}"]), (props) => props.groupVariant === "squared" && css(["&.ant-btn{border-radius:0;}"]), (props) => props.groupVariant === "left-rounded" && css(["&.ant-btn{border-radius:3px 0 0 3px;}"]), (props) => props.groupVariant === "right-rounded" && css(["&.ant-btn{border-radius:0 3px 3px 0;}"]), (props) => props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";", "{color:", ";}svg{fill:", ";}.btn-focus{box-shadow:none;}&&&:hover:not(:disabled):not(:focus){background-color:", ";box-shadow:inset 0 0 0 1px ", ";", "{color:", ";}svg{fill:", " !important;}}&:active{background-color:", ";box-shadow:none;", "{color:", ";}svg{fill:", ";}}&&&:focus:not(:active){border:none !important;background-color:", ";", "{color:", ";}.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}svg{fill:", ";}}", "{background-color:", ";}"], props.theme.palette[`red-100`], props.theme.palette["red-600"], ButtonLabel, props.theme.palette[`red-600`], props.theme.palette[`red-600`], props.theme.palette[`red-200`], props.theme.palette["red-600"], ButtonLabel, props.theme.palette[`red-600`], props.theme.palette[`red-600`], props.theme.palette[`red-700`], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette[`red-100`], ButtonLabel, props.theme.palette[`red-600`], props.theme.palette["blue-600"], props.theme.palette[`red-600`], RippleEffect, props.theme.palette[`red-700`]), (props) => props.error && props.type === "secondary" && css(["&&&.ant-btn{", "{color:", ";}svg{fill:", ";}.btn-focus{box-shadow:none;}&&&:hover{background-color:", ";.btn-focus{box-shadow:none;}}&&&:focus:not(:active){.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&&&:active{background-color:", ";", "{color:", ";}svg{fill:", ";}}", "{background-color:", ";}}"], ButtonLabel, props.theme.palette[`red-600`], props.theme.palette[`red-600`], props.theme.palette[`red-200`], props.theme.palette["blue-600"], props.theme.palette[`red-700`], ButtonLabel, props.theme.palette.white, props.theme.palette.white, RippleEffect, props.theme.palette[`red-700`]), (props) => props.type === "custom-color" && !props.error && css(["&.ant-btn{background-color:", ";border:0 solid transparent;color:", ";", "{color:", ";}svg{color:", ";fill:", ";}", "{box-shadow:inset 0 0 0 0px transparent;}", "{background-color:", ";}&:focus:not(.read-only){", "{box-shadow:inset 0 0 0 2px ", ";}}&:hover:not(:disabled):not(:focus){background-color:", ";", "{color:", ";}svg{color:", " !important;fill:", " !important;}}&:disabled{opacity:0.4;background-color:", ";", "{color:", ";}svg{color:", " !important;fill:", " !important;}}}"], props.theme.palette[`${props.customColor}-600`], props.theme.palette.white, ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, ButtonFocus, RippleEffect, props.theme.palette[`${props.customColor}-700`], ButtonFocus, props.theme.palette["blue-600"], props.theme.palette[props.readOnly ? `${props.customColor}-600` : `${props.customColor}-500`], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, props.theme.palette[`${props.customColor}-600`], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white), (props) => props.type === "custom-color-ghost" && !props.error && css(["&&&{color:", ";.ds-icon > svg{fill:", ";}&:disabled{opacity:0.4;color:", ";.ds-icon > svg{fill:", " !important;}}}"], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`]), (props) => props.readOnly && props.type === "custom-color-ghost" && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-ghost-primary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}", ",svg{color:", ";}svg{fill:", ";!important;}}}"], props.theme.palette.white, props.theme.palette.white, ButtonLabel, props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`]), Tag, (props) => props.theme.palette.white);
+export {
+  AntdButton,
+  ButtonFocus,
+  ButtonLabel,
+  RIPPLE_ANIMATION_TIME,
+  RippleEffect,
+  Spinner,
+  Tag
+};