@layerswap/widget 0.1.20 → 1.0.0-alpha0.1

package/dist/Models/Theme.js

@@ -1,29 +1,25 @@
 export const THEME_COLORS = {
-    "default": {
-        backdrop: "62, 18, 64",
-        placeholderText: '140, 152, 192',
-        actionButtonText: '254, 255, 254',
-        buttonTextColor: '228, 229, 240',
-        logo: '255, 0, 147',
-        borderRadius: 'small',
+    "imxMarketplace": {
+        backdrop: "0, 121, 133",
+        buttonTextColor: '255, 255, 255',
+        tertiary: '140, 152, 192',
+        logo: '255, 255, 255',
+        footerLogo: 'none',
         primary: {
-            DEFAULT: '228, 37, 117',
-            '50': '248, 200, 220',
-            '100': '246, 182, 209',
-            '200': '241, 146, 186',
-            '300': '237, 110, 163',
-            '400': '232, 73, 140',
-            '500': '228, 37, 117',
-            '600': '166, 51, 94',
-            '700': '136, 17, 67',
-            '800': '147, 8, 99',
-            '900': '110, 0, 64',
-            'text': '254, 255, 254',
-            'textMuted': '86, 97, 123',
+            DEFAULT: '46, 236, 255',
+            '100': '209, 251, 255',
+            '200': '168, 247, 255',
+            '300': '128, 243, 255',
+            '400': '87, 240, 255',
+            '500': '46, 236, 255',
+            '600': '0, 232, 255',
+            '700': '0, 172, 189',
+            '800': '0, 121, 133',
+            '900': '0, 70, 77',
+            'text': '255, 255, 255',
         },
         secondary: {
             DEFAULT: '17, 29, 54',
-            '50': '49, 60, 155',
             '100': '46, 59, 147',
             '200': '35, 42, 112',
             '300': '32, 41, 101',
@@ -33,19 +29,16 @@ export const THEME_COLORS = {
             '700': '17, 29, 54',
             '800': '15, 25, 47',
             '900': '12, 21, 39',
-            '950': '11, 17, 35',
-            'text': '171, 181, 209',
+            'text': '209, 251, 255',
         },
     },
     "light": {
-        placeholderText: '134, 134, 134',
-        actionButtonText: '255, 255, 255',
+        tertiary: '134, 134, 134',
         buttonTextColor: '17, 17, 17',
         logo: '255, 0, 147',
-        borderRadius: 'small',
+        footerLogo: 'none',
         primary: {
             DEFAULT: '228, 37, 117',
-            '50': '248, 200, 220',
             '100': '246, 182, 209',
             '200': '241, 146, 186',
             '300': '237, 110, 163',
@@ -56,11 +49,9 @@ export const THEME_COLORS = {
             '800': '147, 8, 99',
             '900': '196, 153, 175',
             'text': '17, 17, 17',
-            'textMuted': '86, 97, 123',
         },
         secondary: {
             DEFAULT: '240, 240, 240',
-            '50': '49, 60, 155',
             '100': '46, 59, 147',
             '200': '134, 134, 134',
             '300': '139, 139, 139',
@@ -70,133 +61,62 @@ export const THEME_COLORS = {
             '700': '240, 240, 240',
             '800': '243, 244, 246',
             '900': '250, 248, 248',
-            '950': '255, 255, 255',
             'text': '108, 108, 108',
         },
     },
-    "imxMarketplace": {
-        backdrop: "0, 121, 133",
-        actionButtonText: '0, 0, 0',
-        buttonTextColor: '255, 255, 255',
-        placeholderText: '140, 152, 192',
-        logo: '255, 255, 255',
+    "default": {
+        backdrop: "62, 18, 64",
+        tertiary: '118, 128, 147',
+        buttonTextColor: '228, 229, 240',
+        logo: '255, 0, 147',
+        footerLogo: 'none',
         borderRadius: 'small',
-        primary: {
-            DEFAULT: '46, 236, 255',
-            '50': '230, 253, 255',
-            '100': '209, 251, 255',
-            '200': '168, 247, 255',
-            '300': '128, 243, 255',
-            '400': '87, 240, 255',
-            '500': '46, 236, 255',
-            '600': '0, 232, 255',
-            '700': '0, 172, 189',
-            '800': '0, 121, 133',
-            '900': '0, 70, 77',
-            'text': '255, 255, 255',
-            'textMuted': '86, 97, 123',
+        warning: {
+            Foreground: '255, 201, 74',
+            Background: '47, 43, 29',
         },
-        secondary: {
-            DEFAULT: '17, 29, 54',
-            '50': '49, 60, 155',
-            '100': '46, 59, 147',
-            '200': '35, 42, 112',
-            '300': '32, 41, 101',
-            '400': '28, 39, 89',
-            '500': '22, 37, 70',
-            '600': '20, 33, 62',
-            '700': '17, 29, 54',
-            '800': '15, 25, 47',
-            '900': '12, 21, 39',
-            '950': '11, 17, 35',
-            'text': '209, 251, 255',
+        error: {
+            Foreground: '255, 97, 97',
+            Background: '46, 27, 27',
         },
-    },
-    "ea7df14a1597407f9f755f05e25bab42": {
-        backdrop: "0, 121, 133",
-        placeholderText: '198, 242, 246',
-        actionButtonText: '0, 0, 0',
-        buttonTextColor: '255, 255, 255',
-        logo: '255, 255, 255',
-        borderRadius: 'small',
-        primary: {
-            DEFAULT: '128, 226, 235',
-            '50': '255, 255, 255',
-            '100': '255, 255, 255',
-            '200': '234, 250, 252',
-            '300': '198, 242, 246',
-            '400': '163, 234, 241',
-            '500': '128, 226, 235',
-            '600': '80, 215, 227',
-            '700': '34, 201, 217',
-            '800': '26, 156, 168',
-            '900': '19, 111, 120',
-            '950': '15, 89, 96',
-            'text': '255, 255, 255',
-            'textMuted': '86, 97, 123',
+        success: {
+            Foreground: '89, 224, 125',
+            Background: '14, 43, 22',
         },
-        secondary: {
-            DEFAULT: '46, 89, 112',
-            '50': '193, 217, 230',
-            '100': '179, 208, 224',
-            '200': '150, 191, 212',
-            '300': '121, 173, 200',
-            '400': '92, 155, 188',
-            '500': '34, 66, 83',
-            '600': '16, 35, 49',
-            '700': '15, 29, 39',
-            '800': '34, 66, 83',
-            '900': '22, 43, 54',
-            '950': '14, 27, 34',
-            'text': '209, 251, 255',
-        }
-    },
-    "evmos": {
-        placeholderText: '128, 110, 107',
-        actionButtonText: '254, 255, 254',
-        buttonTextColor: '74, 61, 59',
-        logo: '226, 49, 115',
-        borderRadius: 'small',
         primary: {
-            DEFAULT: '237, 78, 51',
-            '50': '248, 200, 220',
-            '100': '246, 182, 209',
-            '200': '241, 146, 186',
-            '300': '237, 110, 163',
-            '400': '232, 73, 140',
-            '500': '219, 211, 209',
-            '600': '166, 51, 94',
-            '700': '136, 17, 67',
-            '800': '147, 8, 99',
-            '900': '237, 78, 51',
-            'text': '74, 61, 59',
-            'textMuted': '86, 97, 123',
+            DEFAULT: '204, 45, 93',
+            '100': '255, 148, 176',
+            '200': '245, 103, 141',
+            '300': '235, 84, 129',
+            '400': '229, 64, 114',
+            '500': '204, 45, 93',
+            '600': '178, 29, 74',
+            '700': ' 143, 23, 59',
+            '800': '89, 14, 37',
+            '900': '46, 7, 19',
+            'text': '225, 227, 230',
         },
         secondary: {
-            DEFAULT: '239, 239, 239',
-            '50': '49, 60, 155',
-            '100': '46, 59, 147',
-            '200': '134, 134, 134',
-            '300': '139, 139, 139',
-            '400': '177, 177, 177',
-            '500': '227, 227, 227',
-            '600': '223, 223, 223',
-            '700': '244, 243, 242',
-            '800': '248, 247, 247',
-            '900': '250, 248, 248',
-            '950': '255, 255, 255',
-            'text': '122, 91, 91',
+            DEFAULT: '17, 29, 54',
+            '100': '60, 72, 97',
+            '200': '52, 63, 87',
+            '300': '40, 50, 71',
+            '400': '31, 40, 61',
+            '500': '23, 31, 49',
+            '600': '18, 25, 41',
+            '700': '14, 21, 36',
+            '800': '11, 17, 31',
+            '900': '7, 12, 23',
+            'text': '163, 173, 194',
         },
     },
     "ton": {
-        placeholderText: '134, 134, 134',
-        actionButtonText: '255, 255, 255',
+        tertiary: '134, 134, 134',
         buttonTextColor: '15, 15, 15',
         logo: '15, 15, 15',
-        borderRadius: 'small',
+        footerLogo: 'none',
         primary: {
             DEFAULT: '51, 144, 236',
-            '50': '248, 200, 220',
             '100': '246, 182, 209',
             '200': '241, 146, 186',
             '300': '237, 110, 163',
@@ -207,11 +127,9 @@ export const THEME_COLORS = {
             '800': '45, 148, 229',
             '900': '51, 144, 236',
             'text': '15, 15, 15',
-            'textMuted': '86, 97, 123',
         },
         secondary: {
             DEFAULT: '240, 240, 240',
-            '50': '190, 195, 200',
             '100': '199, 201, 206',
             '200': '208, 210, 211',
             '300': '212, 214, 219',
@@ -221,47 +139,41 @@ export const THEME_COLORS = {
             '700': '241, 243, 245',
             '800': '243, 244, 246',
             '900': '250, 248, 248',
-            '950': '255, 255, 255',
             'text': '106, 119, 133',
         },
     },
     "immutable": {
-        placeholderText: '182, 182, 182',
-        actionButtonText: '19, 19, 19',
-        buttonTextColor: '243, 243, 243',
-        logo: '15, 15, 15',
+        tertiary: '182, 182, 182',
+        buttonTextColor: '19, 19, 19',
+        logo: '187, 187, 187',
         headerLogo: 'none',
+        footerLogo: 'block',
         footerLogoHeight: '20px',
-        borderRadius: 'small',
         primary: {
             DEFAULT: '243, 243, 243',
-            '50': '248, 200, 220',
-            '100': '246, 182, 209',
-            '200': '241, 146, 186',
-            '300': '237, 110, 163',
-            '400': '232, 73, 140',
-            '500': '45, 148, 229',
-            '600': '166, 51, 94',
-            '700': '136, 17, 67',
-            '800': '45, 148, 229',
-            '900': '243, 243, 243',
+            '100': '255, 255, 255',
+            '200': '255, 255, 255',
+            '300': '255, 255, 255',
+            '400': '255, 255, 255',
+            '500': '243, 243, 243',
+            '600': '215, 215, 215',
+            '700': '187, 187, 187',
+            '800': '159, 159, 159',
+            '900': '131, 131, 131',
             'text': '243, 243, 243',
-            'textMuted': '86, 97, 123',
         },
         secondary: {
-            DEFAULT: '240, 240, 240',
-            '50': '190, 195, 200',
-            '100': '199, 201, 206',
-            '200': '208, 210, 211',
-            '300': '212, 214, 219',
-            '400': '243, 243, 243, 0.08',
-            '500': '45, 45, 45',
-            '600': '26, 26, 26',
-            '700': '37, 37, 37',
+            DEFAULT: '37, 37, 37',
+            '100': '119, 119, 119',
+            '200': '98, 98, 98',
+            '300': '78, 78, 78',
+            '400': '57, 57, 57',
+            '500': '37, 37, 37',
+            '600': '13, 13, 13',
+            '700': '13, 13, 13',
             '800': '13, 13, 13',
-            '900': '13, 13, 13',
-            '950': '255, 255, 255',
-            'text': '200, 200, 200',
+            '900': '0, 0, 0',
+            'text': '182, 182, 182',
         },
     }
 };

package/dist/Models/WalletProvider.d.ts

@@ -1,3 +1,5 @@
+import { AccountInterface } from 'starknet';
+import { StarknetWindowObject } from 'starknetkit';
 export type InternalConnector = {
     name: string;
     id: string;
@@ -11,6 +13,7 @@ export type InternalConnector = {
 };
 export type Wallet = {
     id: string;
+    internalId?: string;
     displayName?: string;
     isActive: boolean;
     address: string | `0x${string}`;
@@ -18,12 +21,14 @@ export type Wallet = {
     providerName: string;
     icon: (props: any) => React.JSX.Element;
     metadata?: {
+        starknetAccount?: AccountInterface;
+        wallet?: StarknetWindowObject;
         l1Address?: string;
         deepLink?: string;
     };
     chainId?: string | number;
     isLoading?: boolean;
-    disconnect: () => Promise<void> | undefined | void;
+    disconnect?: () => Promise<void> | undefined | void;
     connect?: () => Promise<Wallet | undefined>;
     isNotAvailable?: boolean;
     withdrawalSupportedNetworks?: string[];
@@ -33,12 +38,15 @@ export type Wallet = {
 };
 export type WalletProvider = {
     hideFromList?: boolean;
-    connectWallet: () => Promise<Wallet | undefined>;
-    connectConnector?: (props?: {
-        connector: InternalConnector;
+    connectWallet: (props?: {
+        connector?: InternalConnector;
     }) => Promise<Wallet | undefined> | undefined;
-    switchAccount?: (connector: Wallet, address: string) => Promise<void>;
+    disconnectWallets?: () => Promise<void> | undefined | void;
+    switchAccount: (connector: Wallet, address: string) => Promise<void>;
+    switchChain?: (connector: Wallet, chainId: string | number) => Promise<void>;
+    isNotAvailableCondition?: (connector: string, network: string) => boolean;
     availableWalletsForConnect?: InternalConnector[];
+    availableHiddenWalletsForConnect?: InternalConnector[];
     connectedWallets: Wallet[] | undefined;
     activeWallet: Wallet | undefined;
     autofillSupportedNetworks?: string[];
@@ -47,4 +55,10 @@ export type WalletProvider = {
     name: string;
     id: string;
     providerIcon?: string;
+    unsupportedPlatforms?: string[];
+};
+export type SelectAccountProps = {
+    walletId: string;
+    address: string;
+    providerName: string;
 };

package/dist/Models/WalletProvider.js

@@ -1,3 +1 @@
-// import { AccountInterface } from 'starknet';
-// import { StarknetWindowObject } from 'starknetkit';
 export {};

package/dist/Models/Wizard.d.ts

@@ -1,7 +1,6 @@
 import { FC } from "react";
-export type FormSteps = "SwapForm" | "Email" | "Code" | "OffRampExchangeOAuth" | "ExchangeOAuth" | "ExchangeApiCredentials" | "SwapConfirmation";
-export type SwapSteps = "Email" | "Code" | "Overview" | "Withdrawal" | "OffRampWithdrawal" | "Processing" | "Success" | "Failed" | "ExternalPayment";
-export type LoginSteps = "Email" | "Code";
+export type FormSteps = "SwapForm" | "OffRampExchangeOAuth" | "ExchangeOAuth" | "ExchangeApiCredentials" | "SwapConfirmation";
+export type SwapSteps = "Overview" | "Withdrawal" | "OffRampWithdrawal" | "Processing" | "Success" | "Failed" | "ExternalPayment";
 export type BaseWizard = {
     [key: string]: SwapCreateStep;
 };
@@ -11,18 +10,12 @@ export type FormWizardSteps = {
 export type SwapWizardSteps = {
     [Property in SwapSteps]: SwapCreateStep;
 };
-export type LoginWizardSteps = {
-    [Property in LoginSteps]: SwapCreateStep;
-};
 export declare enum SwapCreateStep {
     MainForm = "MainForm",
-    Email = "Email",
-    Code = "Code",
     PendingSwaps = "PendingSwaps",
     AuthorizeCoinbaseWithdrawal = "AuthorizeCoinbaseWithdrawal",
     OffRampOAuth = "OffRampOAuth",
     ApiKey = "ApiKey",
-    TwoFactor = "TwoFactor",
     ActiveSwapLimit = "ActiveSwapLimit",
     Error = "Error"
 }
@@ -41,11 +34,6 @@ export declare enum SwapWithdrawalStep {
     SelectWithdrawalType = "SelectWithdrawalType",
     CoinbaseInternalWithdrawal = "CoinbaseInternalWithdrawal"
 }
-export declare enum AuthStep {
-    Email = "Email",
-    Code = "Code",
-    PendingSwaps = "PendingSwaps"
-}
 export declare enum MenuStep {
     Menu = "Menu",
     Transactions = "Transactions",
@@ -53,7 +41,7 @@ export declare enum MenuStep {
     Campaigns = "Campaigns",
     CampaignDetails = "Campaign Details"
 }
-export type Steps = AuthStep | SwapWithdrawalStep | SwapCreateStep | MenuStep;
+export type Steps = SwapWithdrawalStep | SwapCreateStep | MenuStep;
 export declare const ExchangeAuthorizationSteps: {
     [key: string]: SwapCreateStep;
 };

package/dist/Models/Wizard.js

@@ -1,13 +1,10 @@
 export var SwapCreateStep;
 (function (SwapCreateStep) {
     SwapCreateStep["MainForm"] = "MainForm";
-    SwapCreateStep["Email"] = "Email";
-    SwapCreateStep["Code"] = "Code";
     SwapCreateStep["PendingSwaps"] = "PendingSwaps";
     SwapCreateStep["AuthorizeCoinbaseWithdrawal"] = "AuthorizeCoinbaseWithdrawal";
     SwapCreateStep["OffRampOAuth"] = "OffRampOAuth";
     SwapCreateStep["ApiKey"] = "ApiKey";
-    SwapCreateStep["TwoFactor"] = "TwoFactor";
     SwapCreateStep["ActiveSwapLimit"] = "ActiveSwapLimit";
     SwapCreateStep["Error"] = "Error";
 })(SwapCreateStep || (SwapCreateStep = {}));
@@ -27,12 +24,6 @@ export var SwapWithdrawalStep;
     SwapWithdrawalStep["SelectWithdrawalType"] = "SelectWithdrawalType";
     SwapWithdrawalStep["CoinbaseInternalWithdrawal"] = "CoinbaseInternalWithdrawal";
 })(SwapWithdrawalStep || (SwapWithdrawalStep = {}));
-export var AuthStep;
-(function (AuthStep) {
-    AuthStep["Email"] = "Email";
-    AuthStep["Code"] = "Code";
-    AuthStep["PendingSwaps"] = "PendingSwaps";
-})(AuthStep || (AuthStep = {}));
 export var MenuStep;
 (function (MenuStep) {
     MenuStep["Menu"] = "Menu";

package/dist/components/Buttons/connectButton.js

@@ -5,6 +5,6 @@ const ConnectButton = ({ children, className, }) => {
     const { providers } = useWallet();
     const filteredProviders = providers.filter(p => !!p.autofillSupportedNetworks);
     const { connect } = useConnectModal();
-    return (_jsx("button", { onClick: async () => { await connect(); }, type: "button", "aria-label": "Connect wallet", disabled: filteredProviders.length == 0, className: `${className} disabled:opacity-50 disabled:cursor-not-allowed `, children: children }));
+    return (_jsx("button", { onClick: async () => { await connect(); }, type: "button", "aria-label": "Connect wallet", disabled: filteredProviders.length == 0, className: `${className} disabled:opacity-50 disabled:cursor-not-allowed enabled:active:animate-press-down`, children: children }));
 };
 export default ConnectButton;

package/dist/components/Buttons/copyButton.js

@@ -1,17 +1,17 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Copy } from 'lucide-react';
+import { Check } from 'lucide-react';
 import { classNames } from '../utils/classNames';
+import useCopyClipboard from '../../hooks/useCopyClipboard';
 import { useState } from 'react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../shadcn/tooltip';
-import { useCopyToClipboard } from '@uidotdev/usehooks';
+import CopyIcon from '../Icons/CopyIcon';
 const CopyButton = ({ className, toCopy, children, iconSize, iconClassName }) => {
-    const [isCopied, setCopied] = useCopyToClipboard();
+    const [isCopied, setCopied] = useCopyClipboard();
     const [isTooltipOpen, setTooltipOpen] = useState(false);
     const handleCopyClick = () => {
-        setCopied(toCopy.toString());
+        setCopied(toCopy);
         setTooltipOpen(true);
     };
-    return (_jsxs(Tooltip, { open: isTooltipOpen, onOpenChange: setTooltipOpen, children: [_jsx(TooltipTrigger, { children: _jsx("div", { className: classNames(className), onClick: handleCopyClick, children: isCopied ? (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(Check, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) : (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(Copy, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: isCopied ? "Copied" : "Copy" }) })] }));
+    return (_jsxs(Tooltip, { open: isTooltipOpen, onOpenChange: setTooltipOpen, children: [_jsx(TooltipTrigger, { children: _jsx("div", { className: classNames(className), onClick: handleCopyClick, children: isCopied ? (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(Check, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) : (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(CopyIcon, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: isCopied ? "Copied" : "Copy" }) })] }));
 };
 export default CopyButton;

package/dist/components/Buttons/iconButton.js

@@ -3,6 +3,6 @@ import { forwardRef } from 'react';
 import { classNames } from '../utils/classNames';
 const IconButton = forwardRef(function IconButton({ className, icon, ...props }, ref) {
     const theirProps = props;
-    return (_jsxs("button", { ...theirProps, type: "button", className: classNames("py-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-none inline-flex rounded-lg items-center", className), children: [_jsx("div", { className: 'mx-2', children: _jsx("div", { children: icon }) }), _jsx("span", { className: "sr-only", children: "Icon description" })] }));
+    return (_jsxs("button", { ...theirProps, type: "button", className: classNames("active:animate-press-down py-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-hidden rounded-lg items-center", className), children: [_jsx("div", { className: 'mx-1.5', children: _jsx("div", { children: icon }) }), _jsx("span", { className: "sr-only", children: "Icon description" })] }));
 });
 export default IconButton;

package/dist/components/Buttons/secondaryButton.d.ts

@@ -3,6 +3,7 @@ type buttonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type SecondaryButtonProps = {
     size?: buttonSize;
     children: React.ReactNode;
+    isLoading?: boolean;
 };
 declare const SecondaryButton: FC<ButtonHTMLAttributes<HTMLButtonElement> & SecondaryButtonProps>;
 export default SecondaryButton;

package/dist/components/Buttons/secondaryButton.js

@@ -1,24 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import SpinIcon from "../Icons/spinIcon";
 const SecondaryButton = (props) => {
+    const { className, isLoading, children, ...buttonProps } = props;
     const size = props.size || 'md';
-    let defaultStyle = `rounded-md duration-200 break-keep transition bg-secondary-500 hover:bg-secondary-400 border border-secondary-400 hover:border-secondary-200 font-semibold text-primary-buttonTextColor shadow-sm cursor-pointer ${props.className} `;
-    switch (size) {
-        case 'xs':
-            defaultStyle += " px-2 py-1 text-xs";
-            break;
-        case 'sm':
-            defaultStyle += " px-2 py-1 text-sm";
-            break;
-        case 'md':
-            defaultStyle += " px-2.5 py-1.5 text-sm";
-            break;
-        case 'lg':
-            defaultStyle += " px-3 py-2 text-sm";
-            break;
-        case 'xl':
-            defaultStyle += " px-3.5 py-2.5 text-sm";
-            break;
-    }
-    return (_jsx("button", { ...props, type: "button", className: defaultStyle, children: props.children }));
+    return (_jsxs("button", { ...buttonProps, type: "button", disabled: props.disabled || isLoading, className: clsx('rounded-md duration-200 break-keep transition bg-secondary-500 hover:bg-secondary-400 border border-secondary-400 hover:border-secondary-200 font-semibold text-primary-buttonTextColor shadow-xs cursor-pointer disabled:bg-secondary-300 disabled:text-secondary-text/50 disabled:cursor-not-allowed relative flex items-center justify-center space-x-2', className, {
+            'px-2 py-1 text-xs': size === 'xs',
+            'px-2 py-1 text-sm': size === 'sm',
+            'px-2.5 py-1.5 text-sm': size === 'md',
+            'px-3 py-2 text-sm': size === 'lg',
+            'px-3.5 py-2.5 text-sm rounded-xl': size === 'xl',
+        }), children: [isLoading && _jsx(SpinIcon, { className: "animate-spin h-4 w-4" }), _jsx("span", { children: children })] }));
 };
 export default SecondaryButton;

package/dist/components/Buttons/submitButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SpinIcon from "../Icons/spinIcon";
+import clsx from "clsx";
 export class SubmitButtonProps {
     constructor() {
         this.buttonStyle = 'filled';
@@ -8,30 +9,20 @@ export class SubmitButtonProps {
         this.button_align = 'left';
     }
 }
-function constructClassNames(size, buttonStyle) {
-    let defaultStyle = ' border border-primary disabled:border-primary-900 items-center space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md transform hover:brightness-125 transition duration-200 ease-in-out';
-    defaultStyle += buttonStyle == 'filled' ? " bg-primary text-primary-actionButtonText" : " text-primary";
-    switch (size) {
-        case 'large':
-            defaultStyle += " py-4 px-4";
-            break;
-        case 'medium':
-            defaultStyle += " py-3 px-2 md:px-3";
-            break;
-        case 'small':
-            defaultStyle += " py-1.5 px-1.5";
-            break;
-    }
-    return defaultStyle;
-}
 const SubmitButton = ({ isDisabled, isSubmitting, icon, children, type, onClick, buttonStyle = 'filled', size = 'medium', text_align = 'center', button_align = 'left', className }) => {
-    return (_jsxs("button", { disabled: isDisabled || isSubmitting, type: type, onClick: onClick, className: `${constructClassNames(size, buttonStyle)} ${className}`, children: [_jsxs("span", { className: `${button_align === "right" ? 'order-last' : 'order-first'} ${text_align === 'center' ? "absolute left-0 inset-y-0 flex items-center pl-3" : "relative"}`, children: [(!isDisabled && !isSubmitting) && icon, isSubmitting ?
+    return (_jsxs("button", { disabled: isDisabled || isSubmitting, type: type, onClick: onClick, className: clsx('enabled:active:animate-press-down text-primary focus:outline-none focus:ring-0 items-center space-x-1 disabled:bg-secondary-300 disabled:text-secondary-text/50 disabled:cursor-not-allowed relative w-full flex justify-center font-medium rounded-xl transform hover:brightness-125 transition duration-200 ease-in-out', {
+            className,
+            'text-primary-buttonTextColor bg-primary-500': buttonStyle === 'filled',
+            'py-4 px-4': size === 'large',
+            'py-3 px-2 md:px-3': size === 'medium',
+            'py-1.5 px-1.5': size === 'small',
+        }), children: [_jsxs("span", { className: `${button_align === "right" ? 'order-last' : 'order-first'} ${text_align === 'center' ? "absolute left-0 inset-y-0 flex items-center pl-3" : "relative"}`, children: [(!isDisabled && !isSubmitting) && icon, isSubmitting ?
                         _jsx(SpinIcon, { className: "animate-spin h-5 w-5" })
                         : null] }), _jsx("span", { className: `grow ${text_align === 'left' ? 'text-left' : 'text-center'}`, children: children })] }));
 };
 const text_styles = {
     'mltln-text-light': {
-        primary: 'text-primary-actionButtonText',
+        primary: 'text-primary',
         secondary: 'text-primary-100'
     },
     'mltln-text-dark': {