@synerise/ds-button 1.5.17 → 1.5.18

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
+};

package/dist/Button.types.d.ts

@@ -1,10 +1,10 @@
-import type { ButtonProps as AntdButtonProps } from 'antd/lib/button';
-import type { JustifyContentProperty } from 'csstype';
-import type { ForwardRefExoticComponent, MouseEvent, RefAttributes } from 'react';
-import { type StyledComponent } from 'styled-components';
-import type { TagProps } from '@synerise/ds-tag';
-import type { TooltipProps } from '@synerise/ds-tooltip';
-import type { LiteralStringUnion } from '@synerise/ds-utils';
+import { ButtonProps as AntdButtonProps } from 'antd/lib/button';
+import { JustifyContentProperty } from 'csstype';
+import { ForwardRefExoticComponent, MouseEvent, RefAttributes } from 'react';
+import { StyledComponent } from 'styled-components';
+import { TagProps } from '@synerise/ds-tag';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { LiteralStringUnion } from '@synerise/ds-utils';
 export declare enum ButtonMode {
     SINGLE_ICON = "single-icon",
     SPLIT = "split",

package/dist/Button.types.js

@@ -1,10 +1,11 @@
-export var ButtonMode = /*#__PURE__*/function (ButtonMode) {
-  ButtonMode["SINGLE_ICON"] = "single-icon";
-  ButtonMode["SPLIT"] = "split";
-  ButtonMode["TWO_ICONS"] = "two-icons";
-  ButtonMode["LABEL_ICON"] = "label-icon";
-  ButtonMode["ICON_LABEL"] = "icon-label";
-  return ButtonMode;
-}({});
-
-/** @deprecated - use ButtonProps instead */
+var ButtonMode = /* @__PURE__ */ ((ButtonMode2) => {
+  ButtonMode2["SINGLE_ICON"] = "single-icon";
+  ButtonMode2["SPLIT"] = "split";
+  ButtonMode2["TWO_ICONS"] = "two-icons";
+  ButtonMode2["LABEL_ICON"] = "label-icon";
+  ButtonMode2["ICON_LABEL"] = "icon-label";
+  return ButtonMode2;
+})(ButtonMode || {});
+export {
+  ButtonMode
+};

package/dist/ButtonToggle/ButtonToggle.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { ButtonToggleProps } from './ButtonToggle.types';
+import { default as React } from 'react';
+import { ButtonToggleProps } from './ButtonToggle.types';
 declare const ButtonToggle: ({ activated, type, ...buttonProps }: ButtonToggleProps) => React.JSX.Element;
 export default ButtonToggle;

package/dist/ButtonToggle/ButtonToggle.js

@@ -1,33 +1,29 @@
-var _excluded = ["activated", "type"];
-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, { useMemo } from 'react';
-import * as S from './ButtonToggle.styles';
-var ButtonToggle = function ButtonToggle(_ref) {
-  var activated = _ref.activated,
-    type = _ref.type,
-    buttonProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var mappedButtonType = useMemo(function () {
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ButtonToggle as ButtonToggle$1 } from "./ButtonToggle.styles.js";
+const ButtonToggle = ({
+  activated,
+  type,
+  ...buttonProps
+}) => {
+  const mappedButtonType = useMemo(() => {
     switch (type) {
-      case 'ghost':
-        return activated ? 'ghost' : 'ghost';
-      case 'solid':
+      case "ghost":
+        return activated ? "ghost" : "ghost";
+      case "solid":
       default:
-        return activated ? 'primary' : 'secondary';
+        return activated ? "primary" : "secondary";
     }
   }, [activated, type]);
-  var handlePointerUp = function handlePointerUp(event) {
-    var button = event.currentTarget;
-    buttonProps.onPointerUp == null || buttonProps.onPointerUp(event);
-    setTimeout(function () {
+  const handlePointerUp = (event) => {
+    const button = event.currentTarget;
+    buttonProps.onPointerUp?.(event);
+    setTimeout(() => {
       button && button.blur();
     }, 200);
   };
-  return /*#__PURE__*/React.createElement(S.ButtonToggle, _extends({}, buttonProps, {
-    toggleType: type,
-    activated: activated,
-    onPointerUp: handlePointerUp,
-    type: mappedButtonType
-  }));
+  return /* @__PURE__ */ jsx(ButtonToggle$1, { ...buttonProps, toggleType: type, activated, onPointerUp: handlePointerUp, type: mappedButtonType });
+};
+export {
+  ButtonToggle as default
 };
-export default ButtonToggle;

package/dist/ButtonToggle/ButtonToggle.styles.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const ButtonToggle: import("styled-components").StyledComponent<({ toggleType, activated, ...rest }: any) => React.JSX.Element, any, {}, never>;
+import { default as React } from 'react';
+export declare const ButtonToggle: import('styled-components').StyledComponent<({ toggleType, activated, ...rest }: any) => React.JSX.Element, any, {}, never>;

package/dist/ButtonToggle/ButtonToggle.styles.js

@@ -1,17 +1,17 @@
-var _excluded = ["toggleType", "activated"];
-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 from 'react';
-import styled, { css } from 'styled-components';
-import Button from '../Button';
-import { ButtonFocus } from '../Button.styles';
-export var ButtonToggle = styled(function (_ref) {
-  var toggleType = _ref.toggleType,
-    activated = _ref.activated,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Button, rest);
+import { jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import Button from "../Button.js";
+import { ButtonFocus } from "../Button.styles.js";
+const ButtonToggle = /* @__PURE__ */ styled(({
+  toggleType,
+  activated,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(Button, { ...rest });
 }).withConfig({
   displayName: "ButtonTogglestyles__ButtonToggle",
   componentId: "sc-1m60zt6-0"
-})(["", ""], function (props) {
-  return props.toggleType === 'ghost' && css(["&:hover:not(:disabled):not(:focus){color:", ";}", ""], props.theme.palette['grey-600'], !props.activated ? css(["&:hover:not(:disabled):not(:focus){color:", ";svg{fill:currentColor;}}"], props.theme.palette['grey-600']) : css(["", ""], !props.disabled && css(["&&{background:", ";color:", ";svg{fill:currentColor;}", "{box-shadow:none;}}}"], props.theme.palette['blue-050'], props.theme.palette['blue-600'], ButtonFocus)));
-});
+})(["", ""], (props) => props.toggleType === "ghost" && css(["&:hover:not(:disabled):not(:focus){color:", ";}", ""], props.theme.palette["grey-600"], !props.activated ? css(["&:hover:not(:disabled):not(:focus){color:", ";svg{fill:currentColor;}}"], props.theme.palette["grey-600"]) : css(["", ""], !props.disabled && css(["&&{background:", ";color:", ";svg{fill:currentColor;}", "{box-shadow:none;}}}"], props.theme.palette["blue-050"], props.theme.palette["blue-600"], ButtonFocus))));
+export {
+  ButtonToggle
+};

package/dist/ButtonToggle/ButtonToggle.types.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '../Button.types';
+import { ButtonProps } from '../Button.types';
 export type ButtonToggleProps = Omit<ButtonProps, 'type' | 'danger' | 'ghost' | 'color'> & {
     type?: 'solid' | 'ghost';
     activated?: boolean;

package/dist/ButtonToggle/ButtonToggle.types.js

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

package/dist/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type CheckboxButtonProps } from './Checkbox.types';
+import { default as React } from 'react';
+import { CheckboxButtonProps } from './Checkbox.types';
 declare const CheckboxButton: (props: CheckboxButtonProps) => React.ReactElement;
 export default CheckboxButton;

package/dist/Checkbox/Checkbox.js

@@ -1,75 +1,63 @@
-var _excluded = ["checked", "defaultChecked", "hasError", "indeterminate", "onChange", "onClick"];
-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 from 'react';
-import Icon, { CheckboxIndeterminateM, CheckboxSelectedFillM } from '@synerise/ds-icon';
-import Button from '../Button';
-import * as S from './Checkbox.styles';
-var CheckboxButtonIcon = function CheckboxButtonIcon(_ref) {
-  var checked = _ref.checked,
-    indeterminate = _ref.indeterminate;
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import Icon, { CheckboxIndeterminateM, CheckboxSelectedFillM } from "@synerise/ds-icon";
+import Button from "../Button.js";
+import { IconWrapper, DefaultIcon, HoverIcon } from "./Checkbox.styles.js";
+const CheckboxButtonIcon = ({
+  checked,
+  indeterminate
+}) => {
   if (indeterminate) {
-    return /*#__PURE__*/React.createElement(CheckboxIndeterminateM, null);
+    return /* @__PURE__ */ jsx(CheckboxIndeterminateM, {});
   }
   if (checked) {
-    return /*#__PURE__*/React.createElement(CheckboxSelectedFillM, null);
+    return /* @__PURE__ */ jsx(CheckboxSelectedFillM, {});
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.DefaultIcon, null), /*#__PURE__*/React.createElement(S.HoverIcon, null));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DefaultIcon, {}),
+    /* @__PURE__ */ jsx(HoverIcon, {})
+  ] });
 };
-var getNextCheckedState = function getNextCheckedState(prevState, _ref2) {
-  var checked = _ref2.checked,
-    indeterminate = _ref2.indeterminate;
+const getNextCheckedState = (prevState, {
+  checked,
+  indeterminate
+}) => {
   if (indeterminate === true) {
     return true;
   }
-  if (checked === undefined) {
+  if (checked === void 0) {
     return !prevState;
   }
   return !checked;
 };
-var CheckboxButton = function CheckboxButton(props) {
-  var checked = props.checked,
-    _props$defaultChecked = props.defaultChecked,
-    defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
-    hasError = props.hasError,
-    indeterminate = props.indeterminate,
-    onChange = props.onChange,
-    onClick = props.onClick,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded);
-  var _React$useState = React.useState(defaultChecked),
-    isCheckedState = _React$useState[0],
-    setIsCheckedState = _React$useState[1];
-  var handleButtonClick = function handleButtonClick(e) {
-    if (typeof onClick === 'function') {
+const CheckboxButton = (props) => {
+  const {
+    checked,
+    defaultChecked = false,
+    hasError,
+    indeterminate,
+    onChange,
+    onClick,
+    ...restProps
+  } = props;
+  const [isCheckedState, setIsCheckedState] = React.useState(defaultChecked);
+  const handleButtonClick = (e) => {
+    if (typeof onClick === "function") {
       onClick(e);
     }
-    setIsCheckedState(function (prevState) {
-      var nextState = getNextCheckedState(prevState, props);
-      if (typeof onChange === 'function') {
+    setIsCheckedState((prevState) => {
+      const nextState = getNextCheckedState(prevState, props);
+      if (typeof onChange === "function") {
         onChange(nextState);
       }
       return nextState;
     });
   };
-  var isChecked = checked !== undefined ? checked : isCheckedState;
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    "aria-checked": indeterminate ? 'mixed' : isChecked,
-    mode: "single-icon",
-    role: "checkbox",
-    style: {
-      transition: 'none'
-    },
-    tabIndex: 0,
-    type: "ghost-primary",
-    onClick: handleButtonClick
-  }, restProps), /*#__PURE__*/React.createElement(S.IconWrapper, {
-    active: indeterminate || isChecked,
-    error: hasError
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CheckboxButtonIcon, {
-      checked: isChecked,
-      indeterminate: indeterminate
-    })
-  })));
+  const isChecked = checked !== void 0 ? checked : isCheckedState;
+  return /* @__PURE__ */ jsx(Button, { "aria-checked": indeterminate ? "mixed" : isChecked, mode: "single-icon", role: "checkbox", style: {
+    transition: "none"
+  }, tabIndex: 0, type: "ghost-primary", onClick: handleButtonClick, ...restProps, children: /* @__PURE__ */ jsx(IconWrapper, { active: indeterminate || isChecked, error: hasError, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CheckboxButtonIcon, { checked: isChecked, indeterminate }) }) }) });
+};
+export {
+  CheckboxButton as default
 };
-export default CheckboxButton;

package/dist/Checkbox/Checkbox.styles.d.ts

@@ -1,11 +1,11 @@
-export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {
+export declare const IconWrapper: import('styled-components').StyledComponent<"span", any, {
     active?: boolean;
     error?: boolean;
 }, never>;
-export declare const DefaultIcon: import("styled-components").StyledComponent<(props: React.SVGProps<SVGSVGElement>) => JSX.Element, any, {}, never>;
-export declare const HoverIcon: import("styled-components").StyledComponent<(props: React.SVGProps<SVGSVGElement>) => JSX.Element, any, {}, never>;
+export declare const DefaultIcon: import('styled-components').StyledComponent<(props: React.SVGProps<SVGSVGElement>) => JSX.Element, any, {}, never>;
+export declare const HoverIcon: import('styled-components').StyledComponent<(props: React.SVGProps<SVGSVGElement>) => JSX.Element, any, {}, never>;
 declare const _default: {
-    IconWrapper: import("styled-components").StyledComponent<"span", any, {
+    IconWrapper: import('styled-components').StyledComponent<"span", any, {
         active?: boolean;
         error?: boolean;
     }, never>;