@synerise/ds-button 1.5.26 → 1.5.27

package/dist/Button.variants.js

@@ -0,0 +1,48 @@
+import { css } from "styled-components";
+const buttonColor = (color, background, border) => css(["color:", ";background:", ";border-color:", ";"], color, background, border);
+const buttonDisabled = (color, background, border) => css(["&.disabled,&[disabled]{&,&:hover,&:focus-visible,&:active,&.active{", " box-shadow:none;}}"], buttonColor(color, background, border));
+const buttonHover = (color, background, border) => css(["box-shadow:none;&:not(:disabled):not(:focus-visible):not(.pressed){", " span{color:", ";}}"], buttonColor(color, background, border), color);
+const variantPrimary = (p) => css(["", " .btn-focus{box-shadow:inset 0 0 0 0px ", ";}&:hover{", "}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", "}.btn-ripple{background-color:", ";}", ""], buttonColor(p.white, p["blue-600"], p["blue-600"]), p["grey-300"], buttonHover(p.white, p["blue-500"], p["blue-500"]), buttonColor(p.white, p["blue-600"], p["blue-700"]), p["blue-700"], buttonColor(p.white, p["blue-700"], p["blue-700"]), p["blue-700"], buttonDisabled(p.white, `rgba(${hexToRgbValues(p["blue-600"])}, 0.4)`, "transparent"));
+const variantDefault = (p) => css(["", " .btn-focus{box-shadow:inset 0 0 0 1px ", ";}&:hover{", "}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", " border-color:", ";}.btn-ripple{background-color:", ";}", ""], buttonColor(p["grey-600"], p["grey-050"], p["grey-300"]), p["grey-300"], buttonHover(p["blue-600"], p.white, p["grey-300"]), buttonColor(p["grey-600"], p["grey-050"], p["grey-300"]), p["blue-600"], buttonColor(p["grey-600"], p["grey-100"], p["grey-100"]), p["grey-300"], p["grey-100"], buttonDisabled(`rgba(${hexToRgbValues(p["grey-700"])}, 0.4)`, `rgba(${hexToRgbValues(p["grey-050"])}, 0.4)`, p["grey-200"]));
+const variantTertiary = (p) => css(["", " .btn-focus{box-shadow:inset 0 0 0 0px ", ";}&:hover{", "}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", "}.btn-ripple{background-color:rgba( ", ",", " );}", ""], buttonColor(p["grey-700"], `rgba(${hexToRgbValues(p["grey-400"])}, 0.15)`, "transparent"), p["grey-300"], buttonHover(p["grey-700"], `rgba(${hexToRgbValues(p["grey-400"])}, 0.25)`, "transparent"), buttonColor(p["grey-700"], `rgba(${hexToRgbValues(p["grey-400"])}, 0.15)`, `rgba(${hexToRgbValues(p["grey-400"])}, 0.15)`), p["blue-600"], buttonColor(p["grey-700"], `rgba(${hexToRgbValues(p["grey-400"])}, 0.35)`, `rgba(${hexToRgbValues(p["grey-400"])}, 0.35)`), hexToRgbValues(p["grey-400"]), rippleAlpha(0.25, 0.35), buttonDisabled(`rgba(${hexToRgbValues(p["grey-700"])}, 0.4)`, `rgba(${hexToRgbValues(p["grey-400"])}, 0.15)`, "transparent"));
+const variantTertiaryWhite = (p) => css(["", " .btn-focus{box-shadow:inset 0 0 0 0px ", ";}&:hover{", "}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", "}.btn-ripple{background-color:rgba( ", ",", " );}", ""], buttonColor(p.white, `rgba(${hexToRgbValues(p["grey-300"])}, 0.15)`, "transparent"), p["blue-600"], buttonHover(p.white, `rgba(${hexToRgbValues(p["grey-300"])}, 0.25)`, "transparent"), buttonColor(p.white, `rgba(${hexToRgbValues(p["grey-300"])}, 0.15)`, `rgba(${hexToRgbValues(p["grey-300"])}, 0.15)`), p["blue-600"], buttonColor(p.white, `rgba(${hexToRgbValues(p["grey-300"])}, 0.1)`, `rgba(${hexToRgbValues(p["grey-300"])}, 0.1)`), hexToRgbValues(p["grey-300"]), rippleAlpha(0.25, 0.1), buttonDisabled(`rgba(255, 255, 255, 0.4)`, `rgba(${hexToRgbValues(p["grey-300"])}, 0.15)`, "transparent"));
+const variantGhost = (p) => css(["", " box-shadow:none;border-color:transparent;.btn-focus{box-shadow:inset 0 0 0 0px transparent;}&:hover{", "}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", "}.btn-ripple{background-color:rgba( ", ",", " );}", ""], buttonColor(p["grey-600"], "transparent", "transparent"), buttonHover(p["blue-600"], `rgba(${hexToRgbValues(p["grey-400"])}, 0.25)`, "transparent"), buttonColor(p["grey-600"], "transparent", "transparent"), p["blue-600"], buttonColor(p["grey-600"], `rgba(${hexToRgbValues(p["grey-400"])}, 0.35)`, `rgba(${hexToRgbValues(p["grey-400"])}, 0.35)`), hexToRgbValues(p["grey-400"]), rippleAlpha(0.25, 0.35), buttonDisabled(`rgba(${hexToRgbValues(p["grey-700"])}, 0.4)`, "transparent", "transparent"));
+const variantGhostPrimary = (p) => css(["", " .btn-focus{box-shadow:inset 0 0 0 0px transparent;}&:hover{", "}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", "}.btn-ripple{background-color:rgba( ", ",", " );}", ""], buttonColor(p["blue-600"], "transparent", "transparent"), buttonHover(p["blue-600"], `rgba(${hexToRgbValues(p["grey-400"])}, 0.25)`, "transparent"), buttonColor(p["blue-600"], "transparent", "transparent"), p["blue-600"], buttonColor(p["blue-600"], `rgba(${hexToRgbValues(p["grey-400"])}, 0.35)`, `rgba(${hexToRgbValues(p["grey-400"])}, 0.35)`), hexToRgbValues(p["grey-400"]), rippleAlpha(0.25, 0.35), buttonDisabled(`rgba(${hexToRgbValues(p["blue-600"])}, 0.4)`, "transparent", "transparent"));
+const variantGhostWhite = (p) => css(["", " .btn-focus{box-shadow:inset 0 0 0 0 transparent;}&:hover{", "}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", "}.btn-ripple{background-color:rgba( ", ",", " );}", ""], buttonColor(p.white, "transparent", "transparent"), buttonHover(p.white, `rgba(${hexToRgbValues(p["grey-500"])}, 0.25)`, "transparent"), buttonColor(p.white, "transparent", "transparent"), p["blue-600"], buttonColor(p.white, `rgba(${hexToRgbValues(p["grey-500"])}, 0.1)`, `rgba(${hexToRgbValues(p["grey-500"])}, 0.1)`), hexToRgbValues(p["grey-500"]), rippleAlpha(0.25, 0.1), buttonDisabled("rgba(255, 255, 255, 0.4)", "transparent", "transparent"));
+const variantDanger = (p) => css(["", " .btn-focus{box-shadow:inset 0 0 0 0 transparent;}&:hover{", " box-shadow:0 2px 4px 0 rgba(255,90,77,0.2);}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", "}.btn-ripple{background-color:", ";}", ""], buttonColor(p.white, p["red-600"], p["red-600"]), buttonHover(p.white, p["red-500"], p["red-500"]), buttonColor(p.white, p["red-600"], p["red-600"]), p["blue-600"], buttonColor(p.white, p["red-700"], p["red-700"]), p["red-700"], buttonDisabled(p.white, `rgba(${hexToRgbValues(p["red-600"])}, 0.4)`, "transparent"));
+const variantSuccess = (p) => css(["", " .btn-focus{box-shadow:inset 0 0 0 0 transparent;}&:hover{", "}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", "}.btn-ripple{background-color:", ";}", ""], buttonColor(p.white, p["green-600"], p["green-600"]), buttonHover(p.white, p["green-500"], p["green-500"]), buttonColor(p.white, p["green-600"], p["green-500"]), p["blue-700"], buttonColor(p.white, p["green-700"], p["green-700"]), p["green-700"], buttonDisabled(p.white, `rgba(${hexToRgbValues(p["green-600"])}, 0.4)`, "transparent"));
+const variantWarning = (p) => css(["", " .btn-focus{box-shadow:inset 0 0 0 0 transparent;}&:hover{", "}&:focus-visible{", " .btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&.pressed,&.active{", "}.btn-ripple{background-color:", ";}", ""], buttonColor(p.white, p["yellow-600"], p["yellow-600"]), buttonHover(p.white, p["yellow-500"], p["yellow-500"]), buttonColor(p.white, p["yellow-600"], p["yellow-500"]), p["blue-600"], buttonColor(p.white, p["yellow-700"], p["yellow-700"]), p["yellow-700"], buttonDisabled(p.white, `rgba(${hexToRgbValues(p["yellow-600"])}, 0.4)`, "transparent"));
+const variantMap = {
+  primary: variantPrimary,
+  default: variantDefault,
+  secondary: variantDefault,
+  tertiary: variantTertiary,
+  "tertiary-white": variantTertiaryWhite,
+  ghost: variantGhost,
+  "ghost-primary": variantGhostPrimary,
+  "custom-color-ghost": variantGhostPrimary,
+  "ghost-white": variantGhostWhite,
+  danger: variantDanger,
+  success: variantSuccess,
+  warning: variantWarning
+};
+const getVariantStyles = (type, palette) => {
+  const variantFn = variantMap[type || "default"] || variantMap.default;
+  return variantFn(palette);
+};
+function hexToRgbValues(hex) {
+  const cleaned = hex.replace("#", "");
+  const r = parseInt(cleaned.substring(0, 2), 16);
+  const g = parseInt(cleaned.substring(2, 4), 16);
+  const b = parseInt(cleaned.substring(4, 6), 16);
+  return `${r}, ${g}, ${b}`;
+}
+function rippleAlpha(hoverAlpha, pressedAlpha) {
+  if (pressedAlpha <= hoverAlpha) {
+    return pressedAlpha;
+  }
+  return (pressedAlpha - hoverAlpha) / (1 - hoverAlpha);
+}
+export {
+  getVariantStyles
+};

package/dist/ButtonToggle/ButtonToggle.styles.js

@@ -11,7 +11,7 @@ const ButtonToggle = /* @__PURE__ */ styled(({
 }).withConfig({
   displayName: "ButtonTogglestyles__ButtonToggle",
   componentId: "sc-1m60zt6-0"
-})(["", ""], (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))));
+})(["", ""], (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/Checkbox/Checkbox.styles.js

@@ -3,7 +3,7 @@ import { CheckboxDeafultM, CheckboxM } from "@synerise/ds-icon";
 const IconWrapper = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Checkboxstyles__IconWrapper",
   componentId: "sc-ssgaoj-0"
-})(["&&&&{color:", ";svg{fill:", ";}}.ant-btn[disabled] & .ds-icon svg{fill:", " !important;}.ant-btn:hover & .ds-icon svg,.ant-btn:focus:hover & .ds-icon svg{fill:", ";}.ds-button.ant-btn &::before{content:'';display:'block';position:absolute;bottom:0;left:0;right:0;top:0;margin:5px;z-index:-1;}.ds-button.ant-btn &::before,.ds-button.ant-btn:hover &::before,.ds-button.ant-btn:focus:hover &::before{background:", ";}.ds-button.ant-btn[disabled] &::before,.ds-button.ant-btn[disabled]:hover &::before{background:", ";}"], ({
+})(["&&{color:", ";svg{fill:", ";}}.ant-btn[disabled] & .ds-icon svg{fill:", " !important;}.ant-btn:hover & .ds-icon svg,.ant-btn:focus:hover & .ds-icon svg{fill:", ";}.ds-button.ant-btn &::before{content:'';display:'block';position:absolute;bottom:0;left:0;right:0;top:0;margin:5px;z-index:-1;}.ds-button.ant-btn &::before,.ds-button.ant-btn:hover &::before,.ds-button.ant-btn:focus:hover &::before{background:", ";}.ds-button.ant-btn[disabled] &::before,.ds-button.ant-btn[disabled]:hover &::before{background:", ";}"], ({
   theme,
   active,
   error

package/dist/Creator/Creator.styles.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 export declare const CreatorLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
 type StyledCreatorProps = {
     withLabel: boolean;
@@ -6,27 +5,20 @@ type StyledCreatorProps = {
     status?: string;
     labelAlign: 'left' | 'center';
 };
-export declare const Creator: 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;
-    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;
+export declare const Creator: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> & {
+    onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
+    type?: string;
+    size?: import('../BaseButton.types').ButtonSize;
     loading?: boolean | {
         delay?: number;
     };
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    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;
-} & StyledCreatorProps & React.RefAttributes<HTMLButtonElement>>, any, StyledCreatorProps, never>;
+    block?: boolean;
+    htmlType?: import('../BaseButton.types').ButtonHTMLType;
+    href?: string;
+    target?: string;
+    download?: string | boolean;
+    children?: import('react').ReactNode;
+} & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, {
+    type: "ghost";
+} & StyledCreatorProps, "type">;
 export {};

package/dist/Creator/Creator.styles.js

@@ -1,30 +1,24 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import styled, { css } from "styled-components";
 import { IconContainer } from "@synerise/ds-icon";
 import { hexToRgba } from "@synerise/ds-utils";
-import Button from "../Button.js";
-import { RippleEffect, ButtonFocus } from "../Button.styles.js";
+import BaseButton from "../BaseButton.js";
 import { CreatorStatus } from "./Creator.types.js";
 const CreatorLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Creatorstyles__CreatorLabel",
   componentId: "sc-1w96u6h-0"
-})(["&&{margin:0 12px 0 0;transition:all 0.3s ease;color:", ";}"], (props) => props.theme.palette["grey-500"]);
+})(["margin:0 12px 0 0;transition:all 0.3s ease;color:inherit;"]);
 const errorStyles = ({
   theme
-}) => css(["border:1px dashed ", ";background:", ";&:focus{background:", ";}&:hover:not(:disabled):not(:focus){border:1px dashed ", ";background:", ";}"], theme.palette["red-600"], theme.palette["red-050"], theme.palette.white, theme.palette["grey-400"], theme.palette.white);
+}) => css(["border:1px dashed ", ";background:", ";&:focus-visible{background:", ";}&:hover:not(:disabled):not(:focus-visible){border:1px dashed ", ";background:", ";}"], theme.palette["red-600"], theme.palette["red-050"], theme.palette.white, theme.palette["grey-400"], theme.palette.white);
 const uploadStyles = ({
   theme
-}) => css(["&{border:1px dashed ", ";background-color:", ";", "{svg{transition:all 0.3s ease;fill:", ";}}&:hover:not(:disabled){", "{svg{fill:", " !important;}}", "{color:", ";}}", "{color:", ";}&:hover:not(:disabled):not(:focus){border:1px dashed ", ";background-color:", ";}&:focus:active{border:1px dashed ", ";background-color:", ";box-shadow:none;}&:focus{border:1px dashed ", ";box-shadow:none;}&:disabled{", "{margin:12px;svg{transition:all 0.3s ease;color:", ";fill:", ";}}", "{color:", ";}}}"], theme.palette["blue-300"], theme.palette["blue-050"], IconContainer, theme.palette["blue-500"], IconContainer, theme.palette["blue-500"], CreatorLabel, theme.palette["blue-500"], CreatorLabel, theme.palette["blue-500"], theme.palette["blue-300"], theme.palette["blue-050"], theme.palette["blue-600"], theme.palette["blue-050"], theme.palette["blue-600"], IconContainer, theme.palette["grey-500"], theme.palette["grey-500"], CreatorLabel, theme.palette["grey-500"]);
-const Creator = /* @__PURE__ */ styled(forwardRef(({
-  status,
-  pressed,
-  withLabel,
-  ...rest
-}, ref) => /* @__PURE__ */ jsx(Button, { ref, ...rest }))).withConfig({
+}) => css(["&{border:1px dashed ", ";background-color:", ";color:", ";&:hover:not(:disabled):not(:focus-visible){border:1px dashed ", ";background-color:", ";color:", ";}&:focus-visible:active{border:1px dashed ", ";background-color:", ";box-shadow:none;}&:focus-visible{border:1px dashed ", ";box-shadow:none;}&:disabled{color:", ";", "{margin:12px;}}}"], theme.palette["blue-300"], theme.palette["blue-050"], theme.palette["grey-600"], theme.palette["blue-300"], theme.palette["blue-050"], theme.palette["blue-500"], theme.palette["blue-600"], theme.palette["blue-050"], theme.palette["blue-600"], theme.palette["grey-500"], IconContainer);
+const Creator = /* @__PURE__ */ styled(BaseButton).attrs({
+  type: "ghost"
+}).withConfig({
   displayName: "Creatorstyles__Creator",
   componentId: "sc-1w96u6h-1"
-})(["&&&{width:", ";opacity:", ";height:48px;padding:", ";border-radius:3px;border:1px dashed ", ";background:transparent;transition:all 0.3s ease;justify-content:", ";align-items:center;&.ant-btn{& .ds-button-label{justify-content:", ";}}&.ant-btn > span{display:flex;align-items:center;}", "{margin:auto 12px;svg{transition:all 0.3s ease;color:", ";fill:", ";}}", "{background-color:", ";}", "{display:none;}&:hover:not(:disabled){", "{svg{color:", " !important;fill:", " !important;}}", "{color:", ";}}&:hover:not(:disabled):not(:focus){border:1px dashed ", ";background-color:", ";}", " &:focus:active{border:1px dashed ", " !important;box-shadow:none;background-color:", ";}&:focus{border:1px dashed ", ";box-shadow:none;}&:disabled{border-color:", ";background-color:", ";}", " ", "}"], (props) => {
+})(["&&{display:inline-flex;width:", ";opacity:", ";height:48px;padding:", ";border-radius:3px;border:1px dashed ", ";background:transparent;color:", ";transition:all 0.3s ease;justify-content:", ";align-items:center;> span{display:flex;align-items:center;justify-content:", ";}", "{margin:auto 12px;}&:hover:not(:disabled):not(:focus-visible){border:1px dashed ", ";background-color:", ";}", " &:focus-visible:active{border:1px dashed ", " !important;box-shadow:none;background-color:", ";}&:focus-visible{border:1px dashed ", ";box-shadow:none;}&:disabled{border-color:", ";background-color:", ";}", " ", "}"], (props) => {
   if (!props.withLabel) {
     return "48px";
   }
@@ -34,7 +28,9 @@ const Creator = /* @__PURE__ */ styled(forwardRef(({
   return "auto";
 }, (props) => props.disabled ? `0.4` : "1", (props) => props.withLabel ? `0 12px 0 0` : "0", ({
   theme
-}) => theme.palette["grey-300"], (props) => props.withLabel && !props.block ? `flex-start` : "center", (props) => props.labelAlign === "center" ? "center" : "flex-start", IconContainer, (props) => props.theme.palette["grey-500"], (props) => props.theme.palette["grey-500"], RippleEffect, (props) => props.theme.palette["grey-050"], ButtonFocus, IconContainer, (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-600"], CreatorLabel, (props) => props.theme.palette["grey-600"], ({
+}) => theme.palette["grey-300"], ({
+  theme
+}) => theme.palette["grey-600"], (props) => props.withLabel && !props.block ? `flex-start` : "center", (props) => props.labelAlign === "center" ? "center" : "flex-start", IconContainer, ({
   theme
 }) => theme.palette["grey-400"], ({
   theme

package/dist/Expander/Expander.js

@@ -10,7 +10,7 @@ const Expander = ({
   onClick,
   className
 }) => {
-  return /* @__PURE__ */ jsx(Expander$1, { onClick, size: ExpanderSize[size], className: classnames([className, "ds-expander"]), expanded, disabled, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}) }) });
+  return /* @__PURE__ */ jsx(Expander$1, { onClick, expanderSize: ExpanderSize[size], className: classnames([className, "ds-expander"]), expanded, disabled, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}) }) });
 };
 export {
   Expander as default

package/dist/Expander/Expander.styles.d.ts

@@ -1,11 +1,24 @@
-import { default as React } from 'react';
 import { Keyframes } from 'styled-components';
 import { ThemeProps } from '@synerise/ds-core';
 export type ExpanderProps = {
-    onClick: () => void;
-    size: number;
-    disabled: boolean;
-    expanded: boolean;
+    expanderSize?: number;
+    disabled?: boolean;
+    expanded?: boolean;
 };
 export declare const focusAnimation: ({ theme }: ThemeProps) => Keyframes;
-export declare const Expander: import('styled-components').StyledComponent<({ children, expanded, size, ...rest }: any) => React.JSX.Element, any, {}, never>;
+export declare const Expander: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> & {
+    onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
+    type?: string;
+    size?: import('../BaseButton.types').ButtonSize;
+    loading?: boolean | {
+        delay?: number;
+    };
+    block?: boolean;
+    htmlType?: import('../BaseButton.types').ButtonHTMLType;
+    href?: string;
+    target?: string;
+    download?: string | boolean;
+    children?: import('react').ReactNode;
+} & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, {
+    type: "ghost";
+} & ExpanderProps, "type">;

package/dist/Expander/Expander.styles.js

@@ -1,20 +1,16 @@
-import { jsx } from "react/jsx-runtime";
 import styled, { css, keyframes } from "styled-components";
 import { IconContainer } from "@synerise/ds-icon";
-import Button from "../Button.js";
+import BaseButton from "../BaseButton.js";
 const focusAnimation = ({
   theme
 }) => keyframes(["0%{box-shadow:inset 0 0 0 1px inherit;}50%{box-shadow:inset 0 0 0 1px ", ";}100%{box-shadow:inset 0 0 0 1px inherit;}"], theme.palette["blue-600"]);
 const SIZE_DEFAULT = 24;
-const Expander = /* @__PURE__ */ styled(({
-  children,
-  expanded,
-  size,
-  ...rest
-}) => /* @__PURE__ */ jsx(Button, { mode: "single-icon", ...rest, children })).withConfig({
+const Expander = /* @__PURE__ */ styled(BaseButton).attrs({
+  type: "ghost"
+}).withConfig({
   displayName: "Expanderstyles__Expander",
   componentId: "sc-1a3xe1e-0"
-})(["&&&{width:", "px;height:", "px;border-radius:50%;background-color:", ";", "{svg{opacity:", ";fill:", " !important;transition:transform 0.1s linear;transform:rotate( ", " );}}.btn-focus{box-shadow:inset 0 0 0 1px ", ";}", "}"], (props) => props.size || SIZE_DEFAULT, (props) => props.size || SIZE_DEFAULT, (props) => props.theme.palette["grey-050"], IconContainer, (props) => props.disabled ? `0.4` : `1`, (props) => props.theme.palette["grey-600"], (props) => props.expanded ? "180deg" : "0deg", (props) => props.disabled ? props.theme.palette["grey-200"] : props.theme.palette["grey-300"], (props) => !props.disabled && css(["&:hover{.btn-focus{box-shadow:inset 0 0 0 1px ", ";}background-color:", ";}&:focus:not(:active){.btn-focus{animation:", " 1s ease-in-out 0s 1;}}"], props.theme.palette["grey-400"], props.theme.palette["grey-050"], focusAnimation(props)));
+})(["&&{display:flex;align-items:center;justify-content:center;padding:0;width:", "px;height:", "px;border-radius:50%;background-color:", ";box-shadow:inset 0 0 0 1px ", ";", "{svg{opacity:", ";fill:", " !important;transition:transform 0.1s linear;transform:rotate( ", " );}}", "}"], (props) => props.expanderSize || SIZE_DEFAULT, (props) => props.expanderSize || SIZE_DEFAULT, (props) => props.theme.palette["grey-050"], (props) => props.disabled ? props.theme.palette["grey-200"] : props.theme.palette["grey-300"], IconContainer, (props) => props.disabled ? `0.4` : `1`, (props) => props.theme.palette["grey-600"], (props) => props.expanded ? "180deg" : "0deg", (props) => !props.disabled && css(["&:hover{box-shadow:inset 0 0 0 1px ", ";background-color:", ";}&:focus-visible:not(:active){animation:", " 1s ease-in-out 0s 1;}"], props.theme.palette["grey-400"], props.theme.palette["grey-050"], focusAnimation(props)));
 export {
   Expander,
   focusAnimation

package/dist/Expander/Expander.types.d.ts

@@ -1,9 +1,7 @@
-export declare enum ExpanderSize {
-    'S' = 24,
-    'M' = 32
-}
+import { MouseEvent } from 'react';
+export declare const ExpanderSize: Record<'S' | 'M', number>;
 export type ExpanderProps = {
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     size?: 'S' | 'M';
     disabled?: boolean;
     expanded?: boolean;

package/dist/Expander/Expander.types.js

@@ -1,8 +1,7 @@
-var ExpanderSize = /* @__PURE__ */ ((ExpanderSize2) => {
-  ExpanderSize2[ExpanderSize2["S"] = 24] = "S";
-  ExpanderSize2[ExpanderSize2["M"] = 32] = "M";
-  return ExpanderSize2;
-})(ExpanderSize || {});
+const ExpanderSize = {
+  S: 24,
+  M: 32
+};
 export {
   ExpanderSize
 };

package/dist/Star/Star.styles.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 const IconWrapper = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Starstyles__IconWrapper",
   componentId: "sc-k1qcv4-0"
-})(["&&&& svg{fill:", ";}.ant-btn-ghost[disabled] & .ds-icon svg{fill:", " !important;}.ant-btn-ghost:hover & .ds-icon svg,.ant-btn-ghost:focus:hover & .ds-icon svg{fill:", ";}.ant-btn-ghost &::before{clip-path:path( 'M 19.606 9.598 l -4.794 -0.686 l -2.141 -4.276 a 0.781 0.781 0 0 0 -1.342 0 L 9.187 8.912 l -4.793 0.686 a 0.75 0.75 0 0 0 -0.414 1.284 l 3.462 3.325 l -0.817 4.691 a 0.751 0.751 0 0 0 0.74 0.88 a 0.742 0.742 0 0 0 0.344 -0.085 L 12 17.472 l 4.29 2.221 a 0.75 0.75 0 0 0 1.084 -0.795 l -0.816 -4.691 l 3.462 -3.325 a 0.75 0.75 0 0 0 -0.414 -1.284 z z' );content:'';position:absolute;bottom:0;left:0;right:0;top:0;margin:0;z-index:-1;}.ant-btn-ghost[disabled] &:before{background:", ";}.ant-btn-ghost &::before,.ant-btn-ghost:hover &:before,.ant-btn-ghost:focus:hover &:before{background:", ";}"], ({
+})(["&& svg{fill:", ";}.ant-btn-ghost[disabled] & .ds-icon svg{fill:", " !important;}.ant-btn-ghost:hover & .ds-icon svg,.ant-btn-ghost:focus:hover & .ds-icon svg{fill:", ";}.ant-btn-ghost &::before{clip-path:path( 'M 19.606 9.598 l -4.794 -0.686 l -2.141 -4.276 a 0.781 0.781 0 0 0 -1.342 0 L 9.187 8.912 l -4.793 0.686 a 0.75 0.75 0 0 0 -0.414 1.284 l 3.462 3.325 l -0.817 4.691 a 0.751 0.751 0 0 0 0.74 0.88 a 0.742 0.742 0 0 0 0.344 -0.085 L 12 17.472 l 4.29 2.221 a 0.75 0.75 0 0 0 1.084 -0.795 l -0.816 -4.691 l 3.462 -3.325 a 0.75 0.75 0 0 0 -0.414 -1.284 z z' );content:'';position:absolute;bottom:0;left:0;right:0;top:0;margin:0;z-index:-1;}.ant-btn-ghost[disabled] &:before{background:", ";}.ant-btn-ghost &::before,.ant-btn-ghost:hover &:before,.ant-btn-ghost:focus:hover &:before{background:", ";}"], ({
   theme,
   active,
   error

package/dist/Star/Star.types.d.ts

@@ -1,9 +1,9 @@
-import { Props as ButtonProps } from '../Button.types';
+import { Props as ButtonProps, ButtonType } from '../Button.types';
 type ButtonPropsOmitted = Omit<ButtonProps, 'type' | 'block' | 'color' | 'groupVariant' | 'icon' | 'iconColor' | 'mode' | 'size' | 'onChange'>;
 export type StarButtonProps = ButtonPropsOmitted & {
     active?: boolean;
     hasError?: boolean;
     className?: string;
-    type?: string;
+    type?: ButtonType;
 };
 export {};

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { type CreatorProps, CreatorStatus } from './Creator/Creator.types';
 export type { StarButtonProps } from './Star/Star.types';
 export type { CheckboxButtonProps } from './Checkbox/Checkbox.types';
 export { ExpanderSize, type ExpanderProps } from './Expander/Expander.types';
-export type { ButtonProps, StyledButton } from './Button.types';
+export type { ButtonProps, ButtonType, StyledButton } from './Button.types';
 export declare const ButtonStyles: {
     Button: typeof MainButtonStyles;
     Creator: typeof CreatorStyles;
@@ -22,22 +22,15 @@ export declare const ButtonStyles: {
     Expander: typeof ExpanderStyles;
     Star: typeof StarStyles;
 };
-declare const _default: import('react').ForwardRefExoticComponent<Omit<Partial<{
-    href: string;
-    target?: string;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-} & import('antd/lib/button/button').BaseButtonProps & Omit<import('react').AnchorHTMLAttributes<any>, "type" | "onClick"> & {
-    htmlType?: import('antd/lib/button/button').ButtonHTMLType;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-} & Omit<import('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">;
+declare const _default: import('react').ForwardRefExoticComponent<Omit<import('./BaseButton.types').BaseButtonProps, "type"> & {
+    type?: import('./Button.types').ButtonType;
+    mode?: import('@synerise/ds-utils').LiteralStringUnion<import('./Button.types').ButtonMode>;
     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;
     };
+    icon?: import('react').ReactNode;
     onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
     iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
     error?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-button",
-  "version": "1.5.26",
+  "version": "1.5.27",
   "description": "Button UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -35,10 +35,7 @@
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
-  "sideEffects": [
-    "dist/style/*",
-    "*.less"
-  ],
+  "sideEffects": false,
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-icon": "^1.17.3",
@@ -50,10 +47,9 @@
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "c5eee882509cbeb4544cb45939620881b829d4d9"
+  "gitHead": "0418fb6d3b67c35d3c8bacfe53ce01528c6b6153"
 }