@sparrowengg/integrations-templates-frontend 1.9.63 → 1.9.65

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

@@ -6,7 +6,6 @@ var clsx = require('../packages/react-components/node_modules/clsx/dist/clsx.js'
 var stitches_config = require('../stitches.config.js');
 var sideElement = require('./side-element.js');
 var utils = require('./utils.js');
-var prefixClassName = require('../utils/prefix-class-name.js');
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -64,30 +63,25 @@ const StyledButton = stitches_config.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.prefixClassName("button--loading")} .${prefixClassName.prefixClassName(
-    "button__content"
-  )}`]: {
+  [`&.${utils.BUTTON_CLASSNAMES.loading} .${utils.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.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$6",
           height: "$6"
         }
@@ -98,29 +92,29 @@ const StyledButton = stitches_config.styled("button", {
         fontSize: "$lg",
         lineHeight: "$lg",
         height: "$12",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$6",
           height: "$6"
         }
       },
       lg: {
         padding: "$4 $8",
-        borderRadius: "$xl",
+        borderRadius: "$lg",
         fontSize: "$md",
         lineHeight: "$md",
         height: "$10",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$5",
           height: "$5"
         }
       },
       md: {
-        padding: "$3 $5",
+        padding: "$3 $6",
         borderRadius: "$lg",
         fontSize: "$sm",
         lineHeight: "$md",
         height: "$8",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$5",
           height: "$5"
         }
@@ -129,9 +123,10 @@ const StyledButton = stitches_config.styled("button", {
         padding: "$1 $4",
         borderRadius: "$sm",
         fontSize: "$sm",
+        fontWeight: "$5",
         lineHeight: "$sm",
         height: "$6",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$4",
           height: "$4"
         }
@@ -140,11 +135,12 @@ const StyledButton = stitches_config.styled("button", {
         padding: "$1 $3",
         borderRadius: "$sm",
         fontSize: "$xs",
+        fontWeight: "$5",
         lineHeight: "$xs",
         height: "$5",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
-          width: "$2",
-          height: "$2"
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
+          width: "14px",
+          height: "14px"
         }
       },
       xxs: {
@@ -153,31 +149,36 @@ const StyledButton = stitches_config.styled("button", {
         fontSize: "$xxs",
         lineHeight: "$xxs",
         height: "$4",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
-          width: "$2",
-          height: "$2"
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
+          width: "14px",
+          height: "14px"
         }
       }
     },
     color: {
       default: {
         backgroundColorOpacity: ["$secondary500", 0.08],
-        color: "$secondary500",
-        [`&:hover:not(:disabled), &:active:not(:disabled), &.${prefixClassName.prefixClassName("button--loading")}`]: {
-          color: "$secondary600",
-          backgroundColorOpacity: ["$secondary500", 0.08]
+        color: "$secondary600",
+        [`&:hover:not(:disabled), &.${utils.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.prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
           background: "$primary700"
         }
       },
@@ -187,7 +188,7 @@ const StyledButton = stitches_config.styled("button", {
         "&:hover:not(:disabled), &:focus": {
           background: "$secondary600"
         },
-        [`&:active:not(:disabled), &.${prefixClassName.prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
           background: "$secondary800"
         }
       },
@@ -196,11 +197,11 @@ const StyledButton = stitches_config.styled("button", {
         color: "$secondary500",
         "&:hover:not(:disabled), &:focus": {
           color: "$secondary600",
-          background: "$neutral50"
+          background: "$black50"
         },
-        [`&:active:not(:disabled), &.${prefixClassName.prefixClassName("button--loading")}`]: {
-          color: "$secondary600",
-          background: "$neutral100"
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
+          color: "$secondary700",
+          background: "$black100"
         }
       },
       light: {
@@ -209,18 +210,19 @@ const StyledButton = stitches_config.styled("button", {
         "&:hover:not(:disabled), &:focus": {
           background: "$white300"
         },
-        [`&:active:not(:disabled), &.${prefixClassName.prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${utils.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.prefixClassName("button--loading")}`]: {
-          background: "$negative300"
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
+          background: "$negative200",
+          color: "$negative900"
         }
       }
     },
@@ -323,10 +325,10 @@ const StyledButton = stitches_config.styled("button", {
           backgroundColorOpacity: ["$primary500", 0.08]
         },
         "&:hover:not(:disabled), &:focus": {
-          color: "$primary700"
+          color: "$primary600"
         },
-        [`&:active:not(:disabled), &.${prefixClassName.prefixClassName("button--loading")}`]: {
-          color: "$primary800",
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
+          color: "$primary700",
           backgroundColorOpacity: ["$primary500", 0.15]
         }
       }
@@ -336,15 +338,16 @@ const StyledButton = stitches_config.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.prefixClassName("button--loading")}`]: {
-          borderColorOpacity: ["$primary500", 0.9],
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
+          borderColorOpacity: ["$primary500", 0.8],
           color: "$primary700",
           background: "$white900"
         }
@@ -355,12 +358,12 @@ const StyledButton = stitches_config.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.prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
           color: "$secondary700",
           backgroundColorOpacity: ["$secondary500", 0.15]
         }
@@ -372,15 +375,15 @@ const StyledButton = stitches_config.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.prefixClassName("button--loading")}`]: {
-          borderColorOpacity: ["$secondary800", 0.8],
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
+          borderColorOpacity: ["$secondary500", 0.8],
           color: "$secondary800",
           background: "$white900"
         }
@@ -398,7 +401,7 @@ const StyledButton = stitches_config.styled("button", {
           background: "transparent",
           borderColorOpacity: ["$white500", 0.3]
         },
-        [`&:active:not(:disabled), &.${prefixClassName.prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
           background: "transparent",
           borderColorOpacity: ["$white700", 0.7]
         }
@@ -413,7 +416,7 @@ const StyledButton = stitches_config.styled("button", {
         "&:hover:not(:disabled), &:focus, &:active:not(:disabled)": {
           color: "$neutral900"
         },
-        [`&:active:not(:disabled), &.${prefixClassName.prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
           backgroundColorOpacity: ["$black500", 0.08]
         },
         "&:hover:not(:disabled), &:focus": {
@@ -427,11 +430,11 @@ const StyledButton = stitches_config.styled("button", {
       css: {
         background: "transparent",
         color: "$white900",
-        [`&:active:not(:disabled), &.${prefixClassName.prefixClassName("button--loading")}`]: {
-          backgroundColorOpacity: ["$white400", 0.2]
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
+          backgroundColorOpacity: ["$white300", 0.2]
         },
         "&:hover:not(:disabled), &:focus": {
-          backgroundColorOpacity: ["$white300", 0.15]
+          backgroundColorOpacity: ["$white200", 0.15]
         }
       }
     },
@@ -439,12 +442,12 @@ const StyledButton = stitches_config.styled("button", {
       color: "error",
       variant: "ghost",
       css: {
-        color: "$negative600",
+        color: "$negative800",
         background: "transparent",
         "&:hover:not(:disabled), &:focus": {
           background: "$negative100"
         },
-        [`&:active:not(:disabled), &.${prefixClassName.prefixClassName("button--loading")}`]: {
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
           background: "$negative200"
         }
       }
@@ -453,18 +456,18 @@ const StyledButton = stitches_config.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.prefixClassName("button--loading")}`]: {
-          borderColor: "$negative600",
-          color: "$negative800",
+        [`&:active:not(:disabled), &.${utils.BUTTON_CLASSNAMES.loading}`]: {
+          borderColor: "$negative400",
+          color: "$negative900",
           background: "$white900"
         }
       }
@@ -475,7 +478,7 @@ const StyledButton = stitches_config.styled("button", {
       css: {
         width: "$16",
         height: "$16",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$8",
           height: "$8"
         }
@@ -487,7 +490,7 @@ const StyledButton = stitches_config.styled("button", {
       css: {
         width: "$12",
         height: "$12",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$8",
           height: "$8"
         }
@@ -499,7 +502,7 @@ const StyledButton = stitches_config.styled("button", {
       css: {
         width: "$10",
         height: "$10",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$6",
           height: "$6"
         }
@@ -511,7 +514,7 @@ const StyledButton = stitches_config.styled("button", {
       css: {
         width: "$8",
         height: "$8",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$5",
           height: "$5"
         }
@@ -523,7 +526,7 @@ const StyledButton = stitches_config.styled("button", {
       css: {
         width: "$6",
         height: "$6",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$4",
           height: "$4"
         }
@@ -535,7 +538,7 @@ const StyledButton = stitches_config.styled("button", {
       css: {
         width: "$5",
         height: "$5",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
           width: "$3",
           height: "$3"
         }
@@ -547,9 +550,9 @@ const StyledButton = stitches_config.styled("button", {
       css: {
         width: "$4",
         height: "$4",
-        [`& .${prefixClassName.prefixClassName("button__icon-container > *")}`]: {
-          width: "$2",
-          height: "$2"
+        [`& .${utils.BUTTON_CLASSNAMES.iconBox}`]: {
+          width: "14px",
+          height: "14px"
         }
       }
     },
@@ -557,98 +560,98 @@ const StyledButton = stitches_config.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"
       }
     }
   ],
@@ -685,16 +688,20 @@ const Button = React.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 = utils.getLoaderIconSizeFromButtonProps({
-      buttonSize: rest.size,
-      loaderType: loader
-    }), { size: loaderSize } = _a2, loaderCSS = __objRest(_a2, ["size"]);
+    const _a2 = utils.getLoaderIconSizeFromButtonProps(
+      {
+        buttonSize: rest.size,
+        loaderType: loader
+      }
+    ), { size: loaderSize } = _a2, loaderCSS = __objRest(_a2, ["size"]);
     const loaderColor = utils.getLoaderVariantFromButtonVariant({
       variant: (_b2 = rest.variant) != null ? _b2 : "solid",
       color
@@ -711,9 +718,9 @@ const Button = React.forwardRef(
         disabled,
         "data-testid": "button",
         onClick,
-        className: clsx.clsx(className, {
-          [`${prefixClassName.prefixClassName("button--loading")}`]: !!loading,
-          [`${prefixClassName.prefixClassName("button--disabled")}`]: disabled
+        className: clsx.clsx(className, utils.BUTTON_CLASSNAMES.button, {
+          [`${utils.BUTTON_CLASSNAMES.loading}`]: !!loading,
+          [`${utils.BUTTON_CLASSNAMES.disabled}`]: disabled
         })
       }, rest), {
         children: [
@@ -742,7 +749,7 @@ const Button = React.forwardRef(
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${prefixClassName.prefixClassName("button__content")}`, children }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.BUTTON_CLASSNAMES.content, children }),
           rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
             sideElement.ButtonSideElement,
             {