npm_ui_monster/dist/index.mjs

Copy paste in root file (index.js): import "npm_ui_monster/dist/index.css"

// src/components/Buttons.tsx
import { jsx, jsxs } from "react/jsx-runtime";
function Button(buttonProps) {
  const style = {
    "--width": `${buttonProps?.width ? buttonProps.width === "XS" ? "312px" : buttonProps.width === "SM" ? "312px" : buttonProps.width === "MD" ? "312px" : buttonProps.width === "LG" ? "312px" : buttonProps.width === "XL" ? "312px" : buttonProps.width ? buttonProps.width : "312px" : "312px"}`,
    "--height": `${buttonProps?.height ? buttonProps.height === "XS" ? "28px" : buttonProps.height === "SM" ? "32px" : buttonProps.height === "MD" ? "40px" : buttonProps.height === "LG" ? "48px" : buttonProps.height === "XL" ? "60px" : buttonProps.height ? buttonProps.height : "28px" : "28px"}`,
    "--border": `${buttonProps?.disabled ? buttonProps.disabledBorder ? buttonProps.disabledBorder : "none" : buttonProps?.border ? buttonProps?.border : buttonProps?.mainStyle ? buttonProps.mainStyle === "outline" ? buttonProps.theme === "brand" ? "1px solid rgba(151, 71, 255, 1)" : buttonProps.theme === "neutral" ? "1px solid rgba(208, 213, 221, 1)" : "1px solid rgba(217, 45, 32, 1)" : "none" : "none"}`,
    "--fsize": `${buttonProps?.fontSize ? buttonProps.fontSize : buttonProps?.height ? buttonProps.height === "XS" ? "12px" : buttonProps.height === "SM" ? "14px" : buttonProps.height === "MD" ? "14px" : buttonProps.height === "LG" ? "16px" : buttonProps.height === "XL" ? "18px" : "12px" : "12px"}`,
    "--lineHeight": `${buttonProps?.lineHeight ? buttonProps.lineHeight : buttonProps?.height ? buttonProps.height === "XS" ? "12px" : buttonProps.height === "SM" ? "14px" : buttonProps.height === "MD" ? "14px" : buttonProps.height === "LG" ? "16px" : buttonProps.height === "XL" ? "18px" : "12px" : "12px"}`,
    "--fontWeight": `${buttonProps?.fontWeight ? buttonProps.fontWeight : buttonProps?.height ? buttonProps.height === "XS" ? "500px" : buttonProps.height === "SM" ? "600px" : buttonProps.height === "MD" ? "600pxpx" : buttonProps.height === "LG" ? "600pxpx" : buttonProps.height === "XL" ? "600pxpx" : "500px" : "500px"}`,
    "--gap": `${buttonProps?.gap ? buttonProps.gap : buttonProps?.height ? buttonProps.height === "XS" ? "4px" : buttonProps.height === "SM" ? "6px" : buttonProps.height === "MD" ? "8px" : buttonProps.height === "LG" ? "8px" : buttonProps.height === "XL" ? "10px" : "4px" : "4px"}`,
    "--padding": `${buttonProps?.padding ? buttonProps.padding : buttonProps?.height ? buttonProps.height === "XS" ? "6px 12px" : buttonProps.height === "SM" ? "6px 12px" : buttonProps.height === "MD" ? "10px 16px" : buttonProps.height === "LG" ? "12px 24px" : buttonProps.height === "XL" ? "16px 28px" : "6px 12px" : "6px 12px"}`,
    "--borderRadius": `${buttonProps?.radius ? buttonProps.radius : buttonProps?.height ? buttonProps.height === "XS" ? "4px" : buttonProps.height === "SM" ? "6px" : buttonProps.height === "MD" ? "8px" : buttonProps.height === "LG" ? "10px" : buttonProps.height === "XL" ? "12px" : "4px" : "4px"}`,
    "--tcolor": `${buttonProps?.disabled ? buttonProps.disabledFontColor ? buttonProps.disabledFontColor : "rgba(152, 162, 179, 1)" : buttonProps?.fontColor ? buttonProps.fontColor : buttonProps?.theme ? buttonProps.theme === "brand" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(255, 255, 255, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(151, 71, 255, 1)" : buttonProps.mainStyle === "outline" ? "rgba(151, 71, 255, 1)" : "rgba(151, 71, 255, 1)" : "rgba(255, 255, 255, 1)" : buttonProps.theme === "neutral" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(255, 255, 255, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(71, 84, 103, 1)" : buttonProps.mainStyle === "outline" ? "rgba(71, 84, 103, 1)" : "rgba(71, 84, 103, 1)" : "rgba(255, 255, 255, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(255, 255, 255, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(217, 45, 32, 1)" : buttonProps.mainStyle === "outline" ? "rgba(217, 45, 32, 1)" : "rgba(217, 45, 32, 1)" : "rgba(255, 255, 255, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(255, 255, 255, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(151, 71, 255, 1)" : buttonProps.mainStyle === "outline" ? "rgba(151, 71, 255, 1)" : "rgba(151, 71, 255, 1)" : "rgba(255, 255, 255, 1)"}`,
    "--main-bg-color": `${buttonProps?.disabled ? buttonProps.disabledBackground ? buttonProps.disabledBackground : "rgba(242, 244, 247, 1)" : buttonProps?.backgroundColor ? buttonProps.backgroundColor : buttonProps?.theme ? buttonProps.theme === "brand" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(151, 71, 255, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : buttonProps.mainStyle === "outline" ? "rgba(255, 255, 255, 1)" : "transparent" : "rgba(151, 71, 255, 1)" : buttonProps.theme === "neutral" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(29, 41, 57, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(242, 244, 247, 1)" : buttonProps.mainStyle === "outline" ? "rgba(255, 255, 255, 1)" : "transparent" : "rgba(29, 41, 57, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(217, 45, 32, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(254, 228, 226, 1)" : buttonProps.mainStyle === "outline" ? "rgba(255, 255, 255, 1)" : "transparent" : "rgba(217, 45, 32, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(151, 71, 255, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : buttonProps.mainStyle === "outline" ? "rgba(255, 255, 255, 1)" : "transparent" : "rgba(151, 71, 255, 1)"}`,
    "--hover-bg-color": `${buttonProps?.disabled ? buttonProps.disabledBackground ? buttonProps.disabledBackground : "rgba(242, 244, 247, 1)" : buttonProps?.hoverBackgroundColor ? buttonProps.hoverBackgroundColor : buttonProps?.theme ? buttonProps.theme === "brand" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(147, 48, 247, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : buttonProps.mainStyle === "outline" ? "rgba(239, 232, 255, 1)" : "rgba(239, 232, 255, 1)" : "rgba(147, 48, 247, 1)" : buttonProps.theme === "neutral" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(12, 17, 29, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(242, 244, 247, 1)" : buttonProps.mainStyle === "outline" ? "rgba(242, 244, 247, 1)" : "rgba(242, 244, 247, 1)" : "rgba(12, 17, 29, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(180, 35, 24, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(254, 228, 226, 1)" : buttonProps.mainStyle === "outline" ? "rgba(254, 228, 226, 1)" : "rgba(254, 228, 226, 1)" : "rgba(180, 35, 24, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(147, 48, 247, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : buttonProps.mainStyle === "outline" ? "rgba(239, 232, 255, 1)" : "rgba(239, 232, 255, 1)" : "rgba(147, 48, 247, 1)"}`,
    "--active-bg-color": `${buttonProps?.disabled ? buttonProps.disabledBackground ? buttonProps.disabledBackground : "rgba(242, 244, 247, 1)" : buttonProps?.activeBackgroundColor ? buttonProps.activeBackgroundColor : buttonProps?.theme ? buttonProps.theme === "brand" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(133, 30, 227, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(225, 212, 255, 1)" : buttonProps.mainStyle === "outline" ? "rgba(225, 212, 255, 1)" : "rgba(225, 212, 255, 1)" : "rgba(133, 30, 227, 1)" : buttonProps.theme === "neutral" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(16, 24, 40, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(228, 231, 236, 1)" : buttonProps.mainStyle === "outline" ? "rgba(228, 231, 236, 1)" : "rgba(228, 231, 236, 1)" : "rgba(16, 24, 40, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(145, 32, 24, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(255, 205, 201, 1)" : buttonProps.mainStyle === "outline" ? "rgba(255, 205, 201, 1)" : "rgba(255, 205, 201, 1)" : "rgba(145, 32, 24, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(133, 30, 227, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(225, 212, 255, 1)" : buttonProps.mainStyle === "outline" ? "rgba(225, 212, 255, 1)" : "rgba(225, 212, 255, 1)" : "rgba(133, 30, 227, 1)"}`,
    "--focus-bg-color": `${buttonProps?.disabled ? buttonProps.disabledBackground ? buttonProps.disabledBackground : "rgba(242, 244, 247, 1)" : buttonProps?.focusBackgroundColor ? buttonProps.focusBackgroundColor : buttonProps?.theme ? buttonProps.theme === "brand" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(151, 71, 255, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : buttonProps.mainStyle === "outline" ? "transparent" : "transparent" : "rgba(151, 71, 255, 1)" : buttonProps.theme === "neutral" ? buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(29, 41, 57, 1)" : buttonProps.mainStyle === "secondary" ? "transparent" : buttonProps.mainStyle === "outline" ? "transparent" : "transparent" : "rgba(29, 41, 57, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(217, 45, 32, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(254, 228, 226, 1)" : buttonProps.mainStyle === "outline" ? "transparent" : "transparent" : "rgba(217, 45, 32, 1)" : buttonProps?.mainStyle ? buttonProps.mainStyle === "primary" ? "rgba(151, 71, 255, 1)" : buttonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : buttonProps.mainStyle === "outline" ? "transparent" : "transparent" : "rgba(151, 71, 255, 1)"}`
  };
  return /* @__PURE__ */ jsxs(
    "button",
    {
      onClick: (event) => {
        if (buttonProps?.onClick) {
          ;
          (buttonProps?.onClick)(event);
        }
        if (buttonProps?.unfocusAfterClick) {
          ;
          document.activeElement.blur();
        }
      },
      className: "vertexButton",
      style,
      children: [
        buttonProps?.leftIconPath ? /* @__PURE__ */ jsx(
          "img",
          {
            className: "vertexButtonLeftImg",
            src: `${buttonProps.leftIconPath}`,
            alt: "+"
          }
        ) : void 0,
        /* @__PURE__ */ jsx("p", { children: buttonProps?.text !== void 0 ? buttonProps.text : "Button" }),
        buttonProps?.rigthIconPath ? /* @__PURE__ */ jsx(
          "img",
          {
            className: "vertexButtonRightImg",
            src: `${buttonProps.rigthIconPath}`,
            alt: "+"
          }
        ) : void 0
      ]
    }
  );
}
function TextButton(textButtonProps) {
  const style = {
    "--width": `${textButtonProps?.width ? textButtonProps.width === "XS" ? "150px" : textButtonProps.width === "SM" ? "150px" : textButtonProps.width ? textButtonProps.width : "150px" : "150px"}`,
    "--height": `${textButtonProps?.height ? textButtonProps.height === "XS" ? "20px" : textButtonProps.height === "SM" ? "24px" : textButtonProps.height ? textButtonProps.height : "20px" : "20px"}`,
    "--border": `${textButtonProps?.disabled ? textButtonProps.disabledBorder ? textButtonProps.disabledBorder : "none" : textButtonProps?.border ? textButtonProps?.border : "none"}`,
    "--fsize": `${textButtonProps?.fontSize ? textButtonProps.fontSize : textButtonProps?.height ? textButtonProps.height === "XS" ? "14px" : textButtonProps.height === "SM" ? "16px" : "14px" : "14px"}`,
    "--lineHeight": `${textButtonProps?.lineHeight ? textButtonProps.lineHeight : textButtonProps?.height ? textButtonProps.height === "XS" ? "20px" : textButtonProps.height === "SM" ? "24px" : "20px" : "20px"}`,
    "--fontWeight": `${textButtonProps?.fontWeight ? textButtonProps.fontWeight : textButtonProps?.height ? textButtonProps.height === "XS" ? "600px" : textButtonProps.height === "SM" ? "600px" : "600px" : "600px"}`,
    "--gap": `${textButtonProps?.gap ? textButtonProps.gap : textButtonProps?.height ? textButtonProps.height === "XS" ? "4px" : textButtonProps.height === "SM" ? "4px" : "4px" : "4px"}`,
    "--padding": `${textButtonProps?.padding ? textButtonProps.padding : textButtonProps?.height ? textButtonProps.height === "XS" ? "0px 4px" : textButtonProps.height === "SM" ? "0px 4px" : "0px 4px" : "0px 4px"}`,
    "--borderRadius": `${textButtonProps?.radius ? textButtonProps.radius : textButtonProps?.height ? textButtonProps.height === "XS" ? "4px" : textButtonProps.height === "SM" ? "6px" : "4px" : "4px"}`,
    "--hover-tcolor": `${textButtonProps?.disabled ? textButtonProps.disabledFontColor ? textButtonProps.disabledFontColor : "rgba(152, 162, 179, 1)" : textButtonProps?.hoverFontColor ? textButtonProps.hoverFontColor : textButtonProps?.theme ? textButtonProps.theme === "brand" ? "rgba(147, 48, 247, 1)" : textButtonProps.theme === "neutral" ? "rgba(52, 64, 84, 1)" : "rgba(180, 35, 24, 1)" : "rgba(147, 48, 247, 1)"}`,
    "--pressed-tcolor": `${textButtonProps?.disabled ? textButtonProps.disabledFontColor ? textButtonProps.disabledFontColor : "rgba(152, 162, 179, 1)" : textButtonProps?.pressedFontColor ? textButtonProps.pressedFontColor : textButtonProps?.theme ? textButtonProps.theme === "brand" ? "rgba(133, 30, 227, 1)" : textButtonProps.theme === "neutral" ? "rgba(16, 24, 40, 1)" : "rgba(145, 32, 24, 1)" : "rgba(147, 48, 247, 1)"}`,
    "--tcolor": `${textButtonProps?.disabled ? textButtonProps.disabledFontColor ? textButtonProps.disabledFontColor : "rgba(152, 162, 179, 1)" : textButtonProps?.fontColor ? textButtonProps.fontColor : textButtonProps?.theme ? textButtonProps.theme === "brand" ? "rgba(151, 71, 255, 1)" : textButtonProps.theme === "neutral" ? "rgba(71, 84, 103, 1)" : "rgba(217, 45, 32, 1)" : "rgba(151, 71, 255, 1)"}`
    // "--main-bg-color": `${
    //   textButtonProps?.disabled
    //     ? textButtonProps.disabledBackground
    //       ? textButtonProps.disabledBackground
    //       : "rgba(242, 244, 247, 1)"
    //     : textButtonProps?.backgroundColor
    //     ? textButtonProps.backgroundColor
    //     : textButtonProps?.theme
    //     ? textButtonProps.theme === "brand"
    //       ?  "rgba(151, 71, 255, 1)"
    //       : textButtonProps.theme === "neutral"
    //       ?  "rgba(29, 41, 57, 1)"
    //       :  "rgba(217, 45, 32, 1)"
    //     :  "rgba(151, 71, 255, 1)"
    // }`,
    // "--hover-bg-color": `${
    //   textButtonProps?.disabled
    //     ? textButtonProps.disabledBackground
    //       ? textButtonProps.disabledBackground
    //       : "rgba(242, 244, 247, 1)"
    //     : textButtonProps?.hoverBackgroundColor
    //     ? textButtonProps.hoverBackgroundColor
    //     : textButtonProps?.theme
    //     ? textButtonProps.theme === "brand"
    //       ? textButtonProps?.mainStyle
    //         ? textButtonProps.mainStyle === "primary"
    //           ? "rgba(147, 48, 247, 1)"
    //           : textButtonProps.mainStyle === "secondary"
    //           ? "rgba(239, 232, 255, 1)"
    //           : textButtonProps.mainStyle === "outline"
    //           ? "rgba(239, 232, 255, 1)"
    //           : "rgba(239, 232, 255, 1)"
    //         : "rgba(147, 48, 247, 1)"
    //       : textButtonProps.theme === "neutral"
    //       ? textButtonProps?.mainStyle
    //         ? textButtonProps.mainStyle === "primary"
    //           ? "rgba(12, 17, 29, 1)"
    //           : textButtonProps.mainStyle === "secondary"
    //           ? "rgba(242, 244, 247, 1)"
    //           : textButtonProps.mainStyle === "outline"
    //           ? "rgba(242, 244, 247, 1)"
    //           : "rgba(242, 244, 247, 1)"
    //         : "rgba(12, 17, 29, 1)"
    //       : textButtonProps?.mainStyle
    //       ? textButtonProps.mainStyle === "primary"
    //         ? "rgba(180, 35, 24, 1)"
    //         : textButtonProps.mainStyle === "secondary"
    //         ? "rgba(254, 228, 226, 1)"
    //         : textButtonProps.mainStyle === "outline"
    //         ? "rgba(254, 228, 226, 1)"
    //         : "rgba(254, 228, 226, 1)"
    //       : "rgba(180, 35, 24, 1)"
    //     : textButtonProps?.mainStyle
    //     ? textButtonProps.mainStyle === "primary"
    //       ? "rgba(147, 48, 247, 1)"
    //       : textButtonProps.mainStyle === "secondary"
    //       ? "rgba(239, 232, 255, 1)"
    //       : textButtonProps.mainStyle === "outline"
    //       ? "rgba(239, 232, 255, 1)"
    //       : "rgba(239, 232, 255, 1)"
    //     : "rgba(147, 48, 247, 1)"
    // }`,
    // "--active-bg-color": `${
    //   textButtonProps?.disabled
    //     ? textButtonProps.disabledBackground
    //       ? textButtonProps.disabledBackground
    //       : "rgba(242, 244, 247, 1)"
    //     : textButtonProps?.activeBackgroundColor
    //     ? textButtonProps.activeBackgroundColor
    //     : textButtonProps?.theme
    //     ? textButtonProps.theme === "brand"
    //       ? textButtonProps?.mainStyle
    //         ? textButtonProps.mainStyle === "primary"
    //           ? "rgba(133, 30, 227, 1)"
    //           : textButtonProps.mainStyle === "secondary"
    //           ? "rgba(225, 212, 255, 1)"
    //           : textButtonProps.mainStyle === "outline"
    //           ? "rgba(225, 212, 255, 1)"
    //           : "rgba(225, 212, 255, 1)"
    //         : "rgba(133, 30, 227, 1)"
    //       : textButtonProps.theme === "neutral"
    //       ? textButtonProps?.mainStyle
    //         ? textButtonProps.mainStyle === "primary"
    //           ? "rgba(16, 24, 40, 1)"
    //           : textButtonProps.mainStyle === "secondary"
    //           ? "rgba(228, 231, 236, 1)"
    //           : textButtonProps.mainStyle === "outline"
    //           ? "rgba(228, 231, 236, 1)"
    //           : "rgba(228, 231, 236, 1)"
    //         : "rgba(16, 24, 40, 1)"
    //       : textButtonProps?.mainStyle
    //       ? textButtonProps.mainStyle === "primary"
    //         ? "rgba(145, 32, 24, 1)"
    //         : textButtonProps.mainStyle === "secondary"
    //         ? "rgba(255, 205, 201, 1)"
    //         : textButtonProps.mainStyle === "outline"
    //         ? "rgba(255, 205, 201, 1)"
    //         : "rgba(255, 205, 201, 1)"
    //       : "rgba(145, 32, 24, 1)"
    //     : textButtonProps?.mainStyle
    //     ? textButtonProps.mainStyle === "primary"
    //       ? "rgba(133, 30, 227, 1)"
    //       : textButtonProps.mainStyle === "secondary"
    //       ? "rgba(225, 212, 255, 1)"
    //       : textButtonProps.mainStyle === "outline"
    //       ? "rgba(225, 212, 255, 1)"
    //       : "rgba(225, 212, 255, 1)"
    //     : "rgba(133, 30, 227, 1)"
    // }`,
    // "--focus-bg-color": `${
    //   textButtonProps?.disabled
    //     ? textButtonProps.disabledBackground
    //       ? textButtonProps.disabledBackground
    //       : "rgba(242, 244, 247, 1)"
    //     : textButtonProps?.focusBackgroundColor
    //     ? textButtonProps.focusBackgroundColor
    //     : textButtonProps?.theme
    //     ? textButtonProps.theme === "brand"
    //       ? textButtonProps?.mainStyle
    //         ? textButtonProps.mainStyle === "primary"
    //           ? "rgba(151, 71, 255, 1)"
    //           : textButtonProps.mainStyle === "secondary"
    //           ? "rgba(239, 232, 255, 1)"
    //           : textButtonProps.mainStyle === "outline"
    //           ? "transparent"
    //           : "transparent"
    //         : "rgba(151, 71, 255, 1)"
    //       : textButtonProps.theme === "neutral"
    //       ? textButtonProps?.mainStyle
    //         ? textButtonProps.mainStyle === "primary"
    //           ? "rgba(29, 41, 57, 1)"
    //           : textButtonProps.mainStyle === "secondary"
    //           ? "transparent"
    //           : textButtonProps.mainStyle === "outline"
    //           ? "transparent"
    //           : "transparent"
    //         : "rgba(29, 41, 57, 1)"
    //       : textButtonProps?.mainStyle
    //       ? textButtonProps.mainStyle === "primary"
    //         ? "rgba(217, 45, 32, 1)"
    //         : textButtonProps.mainStyle === "secondary"
    //         ? "rgba(254, 228, 226, 1)"
    //         : textButtonProps.mainStyle === "outline"
    //         ? "transparent"
    //         : "transparent"
    //       : "rgba(217, 45, 32, 1)"
    //     : textButtonProps?.mainStyle
    //     ? textButtonProps.mainStyle === "primary"
    //       ? "rgba(151, 71, 255, 1)"
    //       : textButtonProps.mainStyle === "secondary"
    //       ? "rgba(239, 232, 255, 1)"
    //       : textButtonProps.mainStyle === "outline"
    //       ? "transparent"
    //       : "transparent"
    //     : "rgba(151, 71, 255, 1)"
    // }`,
  };
  return /* @__PURE__ */ jsxs(
    "button",
    {
      onClick: (event) => {
        if (textButtonProps?.onClick) {
          ;
          (textButtonProps?.onClick)(event);
        }
        if (textButtonProps?.unfocusAfterClick) {
          ;
          document.activeElement.blur();
        }
      },
      className: "vertexTextButton",
      style,
      children: [
        textButtonProps?.leftIconPath ? /* @__PURE__ */ jsx(
          "img",
          {
            className: "vertexTextButtonLeftImg",
            src: `${textButtonProps.leftIconPath}`,
            alt: "+"
          }
        ) : void 0,
        /* @__PURE__ */ jsx("p", { children: textButtonProps?.text !== void 0 ? textButtonProps.text : "Button" }),
        textButtonProps?.rigthIconPath ? /* @__PURE__ */ jsx(
          "img",
          {
            className: "vertexTextButtonRightImg",
            src: `${textButtonProps.rigthIconPath}`,
            alt: "+"
          }
        ) : void 0
      ]
    }
  );
}
function IconButton(iconButtonProps) {
  const style = {
    "--width": `${iconButtonProps?.width ? iconButtonProps.width === "XS" ? "20px" : iconButtonProps.width === "SM" ? "20px" : iconButtonProps.width === "MD" ? "20px" : iconButtonProps.width === "LG" ? "20px" : iconButtonProps.width === "XL" ? "20px" : iconButtonProps.width ? iconButtonProps.width : "20px" : "20px"}`,
    "--height": `${iconButtonProps?.height ? iconButtonProps.height === "XS" ? "20px" : iconButtonProps.height === "SM" ? "24px" : iconButtonProps.height === "MD" ? "28px" : iconButtonProps.height === "LG" ? "32px" : iconButtonProps.height === "XL" ? "40px" : iconButtonProps.height ? iconButtonProps.height : "20px" : "20px"}`,
    "--border": `${iconButtonProps?.disabled ? iconButtonProps.disabledBorder ? iconButtonProps.disabledBorder : "none" : iconButtonProps?.border ? iconButtonProps?.border : iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "outline" ? iconButtonProps.theme === "brand" ? "1px solid rgba(151, 71, 255, 1)" : iconButtonProps.theme === "neutral" ? "1px solid rgba(208, 213, 221, 1)" : "1px solid rgba(217, 45, 32, 1)" : "none" : "none"}`,
    // "--padding": `${
    //   iconButtonProps?.padding
    //     ? iconButtonProps.padding
    //     : iconButtonProps?.height
    //     ? iconButtonProps.height === "XS"
    //       ? "6px 12px"
    //       : iconButtonProps.height === "SM"
    //       ? "6px 12px"
    //       : iconButtonProps.height === "MD"
    //       ? "10px 16px"
    //       : iconButtonProps.height === "LG"
    //       ? "12px 24px"
    //       : iconButtonProps.height === "XL"
    //       ? "16px 28px"
    //       : "6px 12px"
    //     : "6px 12px"
    // }`,
    "--borderRadius": `${iconButtonProps?.radius ? iconButtonProps.radius : iconButtonProps?.height ? iconButtonProps.height === "XS" ? "4px" : iconButtonProps.height === "SM" ? "6px" : iconButtonProps.height === "MD" ? "8px" : iconButtonProps.height === "LG" ? "10px" : iconButtonProps.height === "XL" ? "12px" : "4px" : "4px"}`,
    "--main-bg-color": `${iconButtonProps?.disabled ? iconButtonProps.disabledBackground ? iconButtonProps.disabledBackground : "rgba(242, 244, 247, 1)" : iconButtonProps?.backgroundColor ? iconButtonProps.backgroundColor : iconButtonProps?.theme ? iconButtonProps.theme === "brand" ? iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(151, 71, 255, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(255, 255, 255, 1)" : "transparent" : "rgba(151, 71, 255, 1)" : iconButtonProps.theme === "neutral" ? iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(29, 41, 57, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(242, 244, 247, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(255, 255, 255, 1)" : "transparent" : "rgba(29, 41, 57, 1)" : iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(217, 45, 32, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(254, 228, 226, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(255, 255, 255, 1)" : "transparent" : "rgba(217, 45, 32, 1)" : iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(151, 71, 255, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(255, 255, 255, 1)" : "transparent" : "rgba(151, 71, 255, 1)"}`,
    "--hover-bg-color": `${iconButtonProps?.disabled ? iconButtonProps.disabledBackground ? iconButtonProps.disabledBackground : "rgba(242, 244, 247, 1)" : iconButtonProps?.hoverBackgroundColor ? iconButtonProps.hoverBackgroundColor : iconButtonProps?.theme ? iconButtonProps.theme === "brand" ? iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(147, 48, 247, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(239, 232, 255, 1)" : "rgba(239, 232, 255, 1)" : "rgba(147, 48, 247, 1)" : iconButtonProps.theme === "neutral" ? iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(12, 17, 29, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(242, 244, 247, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(242, 244, 247, 1)" : "rgba(242, 244, 247, 1)" : "rgba(12, 17, 29, 1)" : iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(180, 35, 24, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(254, 228, 226, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(254, 228, 226, 1)" : "rgba(254, 228, 226, 1)" : "rgba(180, 35, 24, 1)" : iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(147, 48, 247, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(239, 232, 255, 1)" : "rgba(239, 232, 255, 1)" : "rgba(147, 48, 247, 1)"}`,
    "--active-bg-color": `${iconButtonProps?.disabled ? iconButtonProps.disabledBackground ? iconButtonProps.disabledBackground : "rgba(242, 244, 247, 1)" : iconButtonProps?.activeBackgroundColor ? iconButtonProps.activeBackgroundColor : iconButtonProps?.theme ? iconButtonProps.theme === "brand" ? iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(133, 30, 227, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(225, 212, 255, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(225, 212, 255, 1)" : "rgba(225, 212, 255, 1)" : "rgba(133, 30, 227, 1)" : iconButtonProps.theme === "neutral" ? iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(16, 24, 40, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(228, 231, 236, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(228, 231, 236, 1)" : "rgba(228, 231, 236, 1)" : "rgba(16, 24, 40, 1)" : iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(145, 32, 24, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(255, 205, 201, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(255, 205, 201, 1)" : "rgba(255, 205, 201, 1)" : "rgba(145, 32, 24, 1)" : iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(133, 30, 227, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(225, 212, 255, 1)" : iconButtonProps.mainStyle === "outline" ? "rgba(225, 212, 255, 1)" : "rgba(225, 212, 255, 1)" : "rgba(133, 30, 227, 1)"}`,
    "--focus-bg-color": `${iconButtonProps?.disabled ? iconButtonProps.disabledBackground ? iconButtonProps.disabledBackground : "rgba(242, 244, 247, 1)" : iconButtonProps?.focusBackgroundColor ? iconButtonProps.focusBackgroundColor : iconButtonProps?.theme ? iconButtonProps.theme === "brand" ? iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(151, 71, 255, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : iconButtonProps.mainStyle === "outline" ? "transparent" : "transparent" : "rgba(151, 71, 255, 1)" : iconButtonProps.theme === "neutral" ? iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(29, 41, 57, 1)" : iconButtonProps.mainStyle === "secondary" ? "transparent" : iconButtonProps.mainStyle === "outline" ? "transparent" : "transparent" : "rgba(29, 41, 57, 1)" : iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(217, 45, 32, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(254, 228, 226, 1)" : iconButtonProps.mainStyle === "outline" ? "transparent" : "transparent" : "rgba(217, 45, 32, 1)" : iconButtonProps?.mainStyle ? iconButtonProps.mainStyle === "primary" ? "rgba(151, 71, 255, 1)" : iconButtonProps.mainStyle === "secondary" ? "rgba(239, 232, 255, 1)" : iconButtonProps.mainStyle === "outline" ? "transparent" : "transparent" : "rgba(151, 71, 255, 1)"}`
  };
  return /* @__PURE__ */ jsx(
    "button",
    {
      onClick: (event) => {
        if (iconButtonProps?.onClick) {
          ;
          (iconButtonProps?.onClick)(event);
        }
        if (iconButtonProps?.unfocusAfterClick) {
          ;
          document.activeElement.blur();
        }
      },
      className: "vertexIcon",
      style,
      children: iconButtonProps?.iconPath ? /* @__PURE__ */ jsx(
        "img",
        {
          className: "vertexIconImg",
          src: `${iconButtonProps.iconPath}`,
          alt: "+"
        }
      ) : void 0
    }
  );
}
export {
  Button,
  IconButton,
  TextButton
};