@sparrowengg/integrations-templates-frontend 1.9.63 → 1.9.65

package/dist/es/node_modules/@sparrowengg/twigs-react/dist/es/button/button.js

@@ -3,8 +3,7 @@ import React__default from 'react';
 import { clsx } from '../packages/react-components/node_modules/clsx/dist/clsx.js';
 import { keyframes, styled } from '../stitches.config.js';
 import { ButtonSideElement } from './side-element.js';
-import { getLoaderIconSizeFromButtonProps, getLoaderVariantFromButtonVariant } from './utils.js';
-import { prefixClassName } from '../utils/prefix-class-name.js';
+import { BUTTON_CLASSNAMES, getLoaderIconSizeFromButtonProps, getLoaderVariantFromButtonVariant } from './utils.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -62,30 +61,25 @@ const StyledButton = styled("button", {
     opacity: 0.4,
     cursor: "not-allowed"
   },
-  "&:active:hover": {
-    opacity: "0.8"
-  },
   "&:focus, &:active": {
     outline: "none"
   },
   "&:focus-visible": {
-    $$shadowColor: "$colors$primary300",
+    $$shadowColor: "$colors$primary200",
     boxShadow: "rgb(255, 255, 255) 0px 0px 0px 2px, $$shadowColor 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
   },
-  [`&.${prefixClassName("button--loading")} .${prefixClassName(
-    "button__content"
-  )}`]: {
+  [`&.${BUTTON_CLASSNAMES.loading} .${BUTTON_CLASSNAMES.content}`]: {
     animation: `${loadingBlink} 1.5s cubic-bezier(0.51, 0, 0, 1) infinite`
   },
   variants: {
     size: {
       "2xl": {
-        padding: "$9 $12",
+        padding: "$9 $14",
         borderRadius: "$2xl",
         fontSize: "$lg",
         lineHeight: "$lg",
         height: "$16",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$6",
           height: "$6"
         }
@@ -96,29 +90,29 @@ const StyledButton = styled("button", {
         fontSize: "$lg",
         lineHeight: "$lg",
         height: "$12",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$6",
           height: "$6"
         }
       },
       lg: {
         padding: "$4 $8",
-        borderRadius: "$xl",
+        borderRadius: "$lg",
         fontSize: "$md",
         lineHeight: "$md",
         height: "$10",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$5",
           height: "$5"
         }
       },
       md: {
-        padding: "$3 $5",
+        padding: "$3 $6",
         borderRadius: "$lg",
         fontSize: "$sm",
         lineHeight: "$md",
         height: "$8",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$5",
           height: "$5"
         }
@@ -127,9 +121,10 @@ const StyledButton = styled("button", {
         padding: "$1 $4",
         borderRadius: "$sm",
         fontSize: "$sm",
+        fontWeight: "$5",
         lineHeight: "$sm",
         height: "$6",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$4",
           height: "$4"
         }
@@ -138,11 +133,12 @@ const StyledButton = styled("button", {
         padding: "$1 $3",
         borderRadius: "$sm",
         fontSize: "$xs",
+        fontWeight: "$5",
         lineHeight: "$xs",
         height: "$5",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
-          width: "$2",
-          height: "$2"
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
+          width: "14px",
+          height: "14px"
         }
       },
       xxs: {
@@ -151,31 +147,36 @@ const StyledButton = styled("button", {
         fontSize: "$xxs",
         lineHeight: "$xxs",
         height: "$4",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
-          width: "$2",
-          height: "$2"
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
+          width: "14px",
+          height: "14px"
         }
       }
     },
     color: {
       default: {
         backgroundColorOpacity: ["$secondary500", 0.08],
-        color: "$secondary500",
-        [`&:hover:not(:disabled), &:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
-          color: "$secondary600",
-          backgroundColorOpacity: ["$secondary500", 0.08]
+        color: "$secondary600",
+        [`&:hover:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
+          color: "$secondary700",
+          backgroundColorOpacity: ["$secondary500", 0.15]
+        },
+        "&:active:not(:disabled)": {
+          color: "$secondary800",
+          backgroundColorOpacity: ["$secondary500", 0.2]
         },
         "&:focus": {
-          color: "$secondary600"
+          color: "$secondary600",
+          backgroundColorOpacity: ["$secondary500", 0.15]
         }
       },
       primary: {
-        background: "$primary400",
+        background: "$primary500",
         color: "$white900",
         "&:hover:not(:disabled), &:focus": {
-          background: "$primary500"
+          background: "$primary600"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
           background: "$primary700"
         }
       },
@@ -185,7 +186,7 @@ const StyledButton = styled("button", {
         "&:hover:not(:disabled), &:focus": {
           background: "$secondary600"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
           background: "$secondary800"
         }
       },
@@ -194,11 +195,11 @@ const StyledButton = styled("button", {
         color: "$secondary500",
         "&:hover:not(:disabled), &:focus": {
           color: "$secondary600",
-          background: "$neutral50"
+          background: "$black50"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
-          color: "$secondary600",
-          background: "$neutral100"
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
+          color: "$secondary700",
+          background: "$black100"
         }
       },
       light: {
@@ -207,18 +208,19 @@ const StyledButton = styled("button", {
         "&:hover:not(:disabled), &:focus": {
           background: "$white300"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
           background: "$white400"
         }
       },
       error: {
         background: "$negative100",
-        color: "$negative600",
-        "&:hover:not(:disabled)": {
+        color: "$negative800",
+        "&:hover:not(:disabled), &:focus": {
           background: "$negative200"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
-          background: "$negative300"
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
+          background: "$negative200",
+          color: "$negative900"
         }
       }
     },
@@ -321,10 +323,10 @@ const StyledButton = styled("button", {
           backgroundColorOpacity: ["$primary500", 0.08]
         },
         "&:hover:not(:disabled), &:focus": {
-          color: "$primary700"
+          color: "$primary600"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
-          color: "$primary800",
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
+          color: "$primary700",
           backgroundColorOpacity: ["$primary500", 0.15]
         }
       }
@@ -334,15 +336,16 @@ const StyledButton = styled("button", {
       variant: "outline",
       css: {
         color: "$primary500",
+        background: "$white900",
         borderColorOpacity: ["$primary500", 0.4],
         borderStyle: "solid",
         "&:hover:not(:disabled), &:focus": {
-          borderColorOpacity: ["$primary500", 0.8],
+          borderColorOpacity: ["$primary500", 0.6],
           color: "$primary600",
           background: "$white900"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
-          borderColorOpacity: ["$primary500", 0.9],
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
+          borderColorOpacity: ["$primary500", 0.8],
           color: "$primary700",
           background: "$white900"
         }
@@ -353,12 +356,12 @@ const StyledButton = styled("button", {
       variant: "ghost",
       css: {
         background: "transparent",
-        color: "$secondary500",
+        color: "$secondary600",
         "&:hover:not(:disabled), &:focus": {
           color: "$secondary600",
           backgroundColorOpacity: ["$secondary500", 0.08]
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
           color: "$secondary700",
           backgroundColorOpacity: ["$secondary500", 0.15]
         }
@@ -370,15 +373,15 @@ const StyledButton = styled("button", {
       css: {
         color: "$secondary500",
         background: "$white900",
-        borderColorOpacity: ["$secondary400", 0.2],
+        borderColorOpacity: ["$secondary500", 0.2],
         borderStyle: "solid",
         "&:hover:not(:disabled), &:focus": {
-          borderColorOpacity: ["$secondary600", 0.4],
+          borderColorOpacity: ["$secondary500", 0.4],
           color: "$secondary600",
           background: "$white900"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
-          borderColorOpacity: ["$secondary800", 0.8],
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
+          borderColorOpacity: ["$secondary500", 0.8],
           color: "$secondary800",
           background: "$white900"
         }
@@ -396,7 +399,7 @@ const StyledButton = styled("button", {
           background: "transparent",
           borderColorOpacity: ["$white500", 0.3]
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
           background: "transparent",
           borderColorOpacity: ["$white700", 0.7]
         }
@@ -411,7 +414,7 @@ const StyledButton = styled("button", {
         "&:hover:not(:disabled), &:focus, &:active:not(:disabled)": {
           color: "$neutral900"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
           backgroundColorOpacity: ["$black500", 0.08]
         },
         "&:hover:not(:disabled), &:focus": {
@@ -425,11 +428,11 @@ const StyledButton = styled("button", {
       css: {
         background: "transparent",
         color: "$white900",
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
-          backgroundColorOpacity: ["$white400", 0.2]
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
+          backgroundColorOpacity: ["$white300", 0.2]
         },
         "&:hover:not(:disabled), &:focus": {
-          backgroundColorOpacity: ["$white300", 0.15]
+          backgroundColorOpacity: ["$white200", 0.15]
         }
       }
     },
@@ -437,12 +440,12 @@ const StyledButton = styled("button", {
       color: "error",
       variant: "ghost",
       css: {
-        color: "$negative600",
+        color: "$negative800",
         background: "transparent",
         "&:hover:not(:disabled), &:focus": {
           background: "$negative100"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
           background: "$negative200"
         }
       }
@@ -451,18 +454,18 @@ const StyledButton = styled("button", {
       color: "error",
       variant: "outline",
       css: {
-        color: "$negative600",
+        color: "$negative800",
         background: "$white900",
         borderColor: "$negative200",
         borderStyle: "solid",
         "&:hover:not(:disabled), &:focus": {
           borderColor: "$negative300",
-          color: "$negative700",
+          color: "$negative800",
           background: "$white900"
         },
-        [`&:active:not(:disabled), &.${prefixClassName("button--loading")}`]: {
-          borderColor: "$negative600",
-          color: "$negative800",
+        [`&:active:not(:disabled), &.${BUTTON_CLASSNAMES.loading}`]: {
+          borderColor: "$negative400",
+          color: "$negative900",
           background: "$white900"
         }
       }
@@ -473,7 +476,7 @@ const StyledButton = styled("button", {
       css: {
         width: "$16",
         height: "$16",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$8",
           height: "$8"
         }
@@ -485,7 +488,7 @@ const StyledButton = styled("button", {
       css: {
         width: "$12",
         height: "$12",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$8",
           height: "$8"
         }
@@ -497,7 +500,7 @@ const StyledButton = styled("button", {
       css: {
         width: "$10",
         height: "$10",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$6",
           height: "$6"
         }
@@ -509,7 +512,7 @@ const StyledButton = styled("button", {
       css: {
         width: "$8",
         height: "$8",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$5",
           height: "$5"
         }
@@ -521,7 +524,7 @@ const StyledButton = styled("button", {
       css: {
         width: "$6",
         height: "$6",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$4",
           height: "$4"
         }
@@ -533,7 +536,7 @@ const StyledButton = styled("button", {
       css: {
         width: "$5",
         height: "$5",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$3",
           height: "$3"
         }
@@ -545,9 +548,9 @@ const StyledButton = styled("button", {
       css: {
         width: "$4",
         height: "$4",
-        [`& .${prefixClassName("button__icon-container > *")}`]: {
-          width: "$2",
-          height: "$2"
+        [`& .${BUTTON_CLASSNAMES.iconBox}`]: {
+          width: "14px",
+          height: "14px"
         }
       }
     },
@@ -555,98 +558,98 @@ const StyledButton = styled("button", {
       isLeftIcon: true,
       size: "2xl",
       css: {
-        padding: "$9 $12 $9 $10"
+        paddingLeft: "$10"
       }
     },
     {
       isLeftIcon: true,
       size: "xl",
       css: {
-        padding: "$5 $10 $5 $8"
+        paddingLeft: "$8"
       }
     },
     {
       isLeftIcon: true,
       size: "lg",
       css: {
-        padding: "$4 $8 $4 $6"
+        paddingLeft: "$6"
       }
     },
     {
       isLeftIcon: true,
       size: "md",
       css: {
-        padding: "$3 $5 $3 $4"
+        paddingLeft: "$4"
       }
     },
     {
       isLeftIcon: true,
       size: "sm",
       css: {
-        padding: "$1 $4 $1 $3"
+        paddingLeft: "$3"
       }
     },
     {
       isLeftIcon: true,
       size: "xs",
       css: {
-        padding: "$1 $3 $1 $2"
+        paddingLeft: "$2"
       }
     },
     {
       isLeftIcon: true,
       size: "xxs",
       css: {
-        padding: "1px $2 1px $1"
+        paddingLeft: "$1"
       }
     },
     {
       isRightIcon: true,
       size: "2xl",
       css: {
-        padding: "$9 $10 $9 $12"
+        paddingRight: "$10"
       }
     },
     {
       isRightIcon: true,
       size: "xl",
       css: {
-        padding: "$5 $8 $5 $10"
+        paddingRight: "$8"
       }
     },
     {
       isRightIcon: true,
       size: "lg",
       css: {
-        padding: "$4 $6 $4 $8"
+        paddingRight: "$6"
       }
     },
     {
       isRightIcon: true,
       size: "md",
       css: {
-        padding: "$3 $4 $3 $5"
+        paddingRight: "$4"
       }
     },
     {
       isRightIcon: true,
       size: "sm",
       css: {
-        padding: "$1 $3 $1 $4"
+        paddingRight: "$3"
       }
     },
     {
       isRightIcon: true,
       size: "xs",
       css: {
-        padding: "$1 $2 $1 $3"
+        paddingRight: "$2"
       }
     },
     {
       isRightIcon: true,
       size: "xxs",
       css: {
-        padding: "1px $1 1px $2"
+        paddingRight: "$1"
       }
     }
   ],
@@ -683,16 +686,20 @@ const Button = React__default.forwardRef(
     ]);
     var _b2;
     const hasNoIcon = !(leftIcon || rightIcon || icon);
-    let buttonLoaderMargin = "$4";
-    if (["lg", "xl"].includes(rest.size)) {
-      buttonLoaderMargin = "$5";
-    } else if (["xxs", "xs", "sm", "md"].includes(rest.size)) {
+    let buttonLoaderMargin = "$2";
+    if (rest.size === "2xl") {
+      buttonLoaderMargin = "$4";
+    } else if (["xxs", "xs", "sm"].includes(
+      rest.size
+    )) {
       buttonLoaderMargin = "$1";
     }
-    const _a2 = getLoaderIconSizeFromButtonProps({
-      buttonSize: rest.size,
-      loaderType: loader
-    }), { size: loaderSize } = _a2, loaderCSS = __objRest(_a2, ["size"]);
+    const _a2 = getLoaderIconSizeFromButtonProps(
+      {
+        buttonSize: rest.size,
+        loaderType: loader
+      }
+    ), { size: loaderSize } = _a2, loaderCSS = __objRest(_a2, ["size"]);
     const loaderColor = getLoaderVariantFromButtonVariant({
       variant: (_b2 = rest.variant) != null ? _b2 : "solid",
       color
@@ -709,9 +716,9 @@ const Button = React__default.forwardRef(
         disabled,
         "data-testid": "button",
         onClick,
-        className: clsx(className, {
-          [`${prefixClassName("button--loading")}`]: !!loading,
-          [`${prefixClassName("button--disabled")}`]: disabled
+        className: clsx(className, BUTTON_CLASSNAMES.button, {
+          [`${BUTTON_CLASSNAMES.loading}`]: !!loading,
+          [`${BUTTON_CLASSNAMES.disabled}`]: disabled
         })
       }, rest), {
         children: [
@@ -740,7 +747,7 @@ const Button = React__default.forwardRef(
               }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: `${prefixClassName("button__content")}`, children }),
+          /* @__PURE__ */ jsx("span", { className: BUTTON_CLASSNAMES.content, children }),
           rightIcon && /* @__PURE__ */ jsx(
             ButtonSideElement,
             {