@0xsquid/ui 0.23.1 → 0.23.2-beta.1

package/dist/cjs/index.js

@@ -3042,78 +3042,112 @@ function ArrowButton(_a) {
                 'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsxRuntime.jsx(ArrowRightIcon, {}) })] })));
 }
 
+const INTERNAL_SQUID_THEME_KEYS = [
+    'grey-100',
+    'grey-200',
+    'grey-300',
+    'grey-400',
+    'grey-500',
+    'grey-600',
+    'grey-700',
+    'grey-800',
+    'grey-900',
+    'royal-300',
+    'royal-400',
+    'royal-500',
+    'royal-700',
+    'status-positive',
+    'status-negative',
+    'status-partial',
+    'material-light-thin',
+    'material-light-average',
+    'material-light-thick',
+    'material-dark-thin',
+    'material-dark-average',
+    'material-dark-thick',
+    // grey-100 with 0.05 opacity
+    'grey-100-005',
+    // material-light and grey-900 blended color
+    'material-light-blend-grey-900',
+];
 const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
-const themeTypesKeys = {
-    'grey-100': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
-    },
-    'grey-200': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
-    },
-    'grey-300': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
-    },
-    'grey-400': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
-    },
-    'grey-500': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
-    },
-    'grey-600': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
-    },
-    'grey-700': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
-    },
-    'grey-800': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
-    },
-    'grey-900': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
-    },
-    'material-dark-average': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
-    },
-    'material-dark-thick': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
-    },
-    'material-dark-thin': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
-    },
-    'material-light-average': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
-    },
-    'material-light-thick': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
-    },
-    'material-light-thin': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
-    },
-    'royal-400': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
-    },
-    'royal-500': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
-    },
-    'status-negative': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
-    },
-    'status-positive': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
-    },
-    'status-partial': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
-    },
-    'grey-100-005': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
-    },
-    'material-light-blend-grey-900': {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
+const themeTypesKeys = Object.fromEntries(INTERNAL_SQUID_THEME_KEYS.map((key) => [
+    key,
+    {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}${key}`,
     },
-};
+]));
+// {
+//   'grey-100': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
+//   },
+//   'grey-200': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
+//   },
+//   'grey-300': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
+//   },
+//   'grey-400': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
+//   },
+//   'grey-500': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
+//   },
+//   'grey-600': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
+//   },
+//   'grey-700': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
+//   },
+//   'grey-800': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
+//   },
+//   'grey-900': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
+//   },
+//   'material-dark-average': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
+//   },
+//   'material-dark-thick': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
+//   },
+//   'material-dark-thin': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
+//   },
+//   'material-light-average': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
+//   },
+//   'material-light-thick': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
+//   },
+//   'material-light-thin': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
+//   },
+//   'royal-400': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
+//   },
+//   'royal-500': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
+//   },
+//   'status-negative': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
+//   },
+//   'status-positive': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
+//   },
+//   'status-partial': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
+//   },
+//   'grey-100-005': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
+//   },
+//   'material-light-blend-grey-900': {
+//     cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
+//   },
+// }
 
 function SearchIcon() {
     return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
@@ -16769,7 +16803,7 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, canToggleBoostMode
             onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
         }
     }
-    return (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "mobile-lg:tw-w-[190px] tw-rounded-squid-m", childrenClassName: "tw-rounded-squid-m", children: jsxRuntime.jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: cn('tw-group/boost-toggle tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-rounded-squid-m tw-bg-grey-900 tw-pr-squid-xs', canToggleBoostMode && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, canToggleBoostMode: canToggleBoostMode }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('mobile-xs:tw-flex tw-hidden tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
+    return (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "mobile-lg:tw-w-[190px] tw-rounded-squid-m", childrenClassName: "tw-rounded-squid-m", children: jsxRuntime.jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: cn('tw-group/boost-toggle tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-rounded-squid-m tw-bg-grey-900 tw-pr-squid-xs', canToggleBoostMode && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, canToggleBoostMode: canToggleBoostMode }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-hidden tw-text-grey-900 tw-transition-colors mobile-xs:tw-flex', boostMode === 'normal' || !canToggleBoostMode
                         ? 'tw-bg-grey-300'
                         : 'tw-bg-status-positive') })] }) })));
 }
@@ -16884,7 +16918,7 @@ function EthereumIcon() {
 
 function FeeButton(_a) {
     var { feeInUsd = '0', chipLabel = 'Fee', className, tooltip } = _a, props = __rest$1(_a, ["feeInUsd", "chipLabel", "className", "tooltip"]);
-    return (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-rounded-squid-m tw-w-full", childrenClassName: "tw-rounded-squid-m", children: jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsxRuntime.jsx(Chip, { label: chipLabel, className: "mobile-xs:tw-flex tw-hidden" }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: feeInUsd })] })] })) })));
+    return (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-rounded-squid-m tw-w-full", childrenClassName: "tw-rounded-squid-m", children: jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-hidden mobile-xs:tw-flex" }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: feeInUsd })] })] })) })));
 }
 
 function EmojiSadIcon({ className, size = '20', }) {
@@ -17111,15 +17145,15 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
 }
 
 const listItemSizeMap = {
-    small: 'tw-h-list-item-small tw-px-squid-xs',
-    large: 'tw-h-list-item-large tw-px-squid-xs',
+    small: 'tw-h-list-item-small',
+    large: 'tw-h-list-item-large',
 };
 const collapsedListItemClassMap = {
     small: 'tw-w-[70px]',
     large: 'tw-w-[80px]',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding"]);
     const subtitleClassName = cn('tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block');
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -17150,7 +17184,7 @@ function ListItem(_a) {
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? 'button' : 'div';
     const itemProps = isInteractive ? props : {};
-    return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], compactOnMobile
+    return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], extraPadding && 'tw-px-squid-xs', compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
             : 'tw-w-full', className), children: jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
                     // 'large' variant has extra padding
@@ -17522,7 +17556,7 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
         }, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { style: {
                 [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
                 [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
-            }, className: cn('tw-relative tw-flex tw-max-h-modal-compact tw-max-w-full tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end mobile-lg:tw-max-h-modal-large mobile-xs:tw-w-modal-compact', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full', modalWidthClassMap[width]), children: children }) })));
+            }, className: cn('tw-relative tw-flex tw-max-h-modal-compact tw-max-w-full tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end mobile-xs:tw-w-modal-compact mobile-lg:tw-max-h-modal-large', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full', modalWidthClassMap[width]), children: children }) })));
 }
 
 const borderTypeClassMap = {
@@ -17554,6 +17588,366 @@ function NavigationBar(_a) {
                     : 'tw-flex'), children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
+const lightTheme = {
+    // content
+    'content-100': '#17191C',
+    'content-200': '#292C32',
+    'content-300': '#292C32',
+    'content-400': '#676B7E',
+    'content-500': '#8A8FA8',
+    'content-600': '#A7ABBE',
+    'content-700': '#D1D6E0',
+    'content-800': '#EDEEF3',
+    'content-900': '#FBFBFD',
+    // accent
+    'accent-300': '#8C53C5',
+    'accent-400': '#9E79D2',
+    'accent-500': '#B893EC',
+    'accent-700': '#E3D0FD',
+    // status
+    'status-positive': '#17CF26',
+    'status-negative': '#FF5B4D',
+    'status-warning': '#EC9213',
+};
+const darkTheme = {
+    // content
+    'content-100': '#FBFBFD',
+    'content-200': '#EDEFF3',
+    'content-300': '#D1D6E0',
+    'content-400': '#A7ABBE',
+    'content-500': '#8A8FA8',
+    'content-600': '#676B7E',
+    'content-700': '#4C515D',
+    'content-800': '#292C32',
+    'content-900': '#17191C',
+    // accent
+    'accent-300': '#D9BEF4',
+    'accent-400': '#B893EC',
+    'accent-500': '#9E79D2',
+    'accent-700': '#6B45A1',
+    // status
+    'status-positive': '#7AE870',
+    'status-negative': '#FF4D5B',
+    'status-warning': '#F3AF25',
+};
+
+const spacing = {
+    'squid-xxs': '0.3125rem', // 5px
+    'squid-xs': '0.625rem', // 10px
+    'squid-s': '0.9375rem', // 15px
+    'squid-m': '1.25rem', // 20px
+    'squid-l': '1.875rem', // 30px
+    'squid-xl': '2.5rem', // 40px
+    'squid-xxl': '3.75rem', // 60px
+};
+const backdropBlur = {
+    '/10': '10px',
+    '/20': '20px',
+};
+const widths = {
+    button: '9.5625rem', // 153px
+    'list-item-compact': '22.0625rem', // 353px
+    'list-item-small': '21.25rem', // 340px
+    'card-large': '480px',
+    'card-compact': '393px',
+    'modal-extra-large': '440px',
+    'modal-large': '400px',
+    'modal-compact': '373px',
+};
+const heights = {
+    button: '3.75rem', // 60px
+    'list-item-large': '3.125rem', // 50px
+    'list-item-small': '2.5rem', // 40px
+    'card-large': '660px',
+    'card-compact': '640px',
+    'card-small': '580px',
+    'modal-large': '600px',
+    'modal-compact': '631px',
+};
+// tw-shadow-*
+const boxShadow = {
+    'elevation-dark-3': '0px 2px 4px 0px rgba(0, 0, 0, 0.20), 0px 5px 50px -1px rgba(0, 0, 0, 0.33)',
+    'elevation-light-3': '0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 5px 50px -1px rgba(0, 0, 0, 0.20)',
+    'elevation-dark-2': '0px 2px 5px 1px rgba(0, 0, 0, 0.20), 0px 5px 20px -1px rgba(0, 0, 0, 0.33)',
+    'elevation-light-1': '0px 1px 2px 0px #0000001A',
+    'elevation-light-2': '0px 2px 5px 1px rgba(0, 0, 0, 0.10), 0px 5px 20px -1px rgba(0, 0, 0, 0.10)',
+    'inset-royal': '0px 0px 50px 0px #876FE2 inset',
+};
+// tw-bg-*
+const backgrounds = {
+    'royal-light': 'linear-gradient(180deg, #A577D8 0%, #BF91F2 100%)',
+    'royal-dark': 'linear-gradient(180deg, #BF91F2 0%, #A577D8 100%)',
+    'dark-cover': 'linear-gradient(90deg, var(--squid-theme-material-dark-thick) 45.4%, transparent 50.85%, var(--squid-theme-material-dark-thick) 55.61%)',
+};
+const baseTailwindConfig = {
+    prefix: 'tw-',
+    content: ['./src/**/*.{ts,tsx,js,jsx}', '.storybook/**/*.{ts,tsx,js,jsx}'],
+    theme: {
+        extend: {
+            screens: Object.values(MEDIA_QUERIES).reduce((acc, curr) => {
+                // 'raw' means that we want to use the raw media query value
+                // https://tailwindcss.com/docs/screens#custom-media-queries
+                acc[curr.key] = { raw: curr.media };
+                return acc;
+            }, {}),
+            keyframes: {
+                'move-to-right-with-spring-bounce': {
+                    '0%': {
+                        transform: 'translateX(-25%)',
+                    },
+                    '50%': {
+                        transform: 'translateX(27%)',
+                    },
+                    '80%': {
+                        transform: 'translateX(24%)',
+                    },
+                    '100%': {
+                        transform: 'translateX(25%)',
+                    },
+                },
+                'move-to-left-with-spring-bounce': {
+                    '0%': {
+                        transform: 'translateX(25%)',
+                    },
+                    '50%': {
+                        transform: 'translateX(-27%)',
+                    },
+                    '80%': {
+                        transform: 'translateX(-24%)',
+                    },
+                    '100%': {
+                        transform: 'translateX(-25%)',
+                    },
+                },
+                'slide-to-top': {
+                    '0%': {
+                        transform: 'translate3d(0, 650px, 0)',
+                    },
+                    '100%': {
+                        transform: 'translate3d(0, 0, 0)',
+                    },
+                },
+                'slide-to-bottom': {
+                    '0%': {
+                        transform: 'translate3d(0, 0, 0)',
+                    },
+                    '100%': {
+                        transform: 'translate3d(0, 650px, 0)',
+                    },
+                },
+                'expand-route': {
+                    '0%': {
+                        height: '60px',
+                    },
+                    '100%': {
+                        height: '100%',
+                    },
+                },
+                'collapse-route': {
+                    '0%': {
+                        height: '100%',
+                    },
+                    '100%': {
+                        height: '60px',
+                    },
+                },
+                'fade-in': {
+                    '0%': {
+                        opacity: '0',
+                    },
+                    '100%': {
+                        opacity: '1',
+                    },
+                },
+                'fade-out': {
+                    '0%': {
+                        opacity: '1',
+                    },
+                    '100%': {
+                        opacity: '0',
+                    },
+                },
+                'loading-gradient': {
+                    '0%': {
+                        transform: 'translateX(-70%)',
+                        opacity: '0',
+                    },
+                    '50%': {
+                        opacity: '1',
+                    },
+                    '100%': {
+                        opacity: '0',
+                        transform: 'translateX(70%)',
+                    },
+                },
+                'translate-to-bottom': {
+                    '0%': {
+                        transform: 'translateY(0)',
+                    },
+                    '100%': {
+                        transform: 'translateY(100%)',
+                    },
+                },
+                'translate-to-top': {
+                    '0%': {
+                        transform: 'translateY(0)',
+                    },
+                    '100%': {
+                        transform: 'translateY(-100%)',
+                    },
+                },
+                'blur-in': {
+                    '0%': {
+                        'backdrop-filter': 'blur(0px)',
+                    },
+                    '100%': {
+                        'backdrop-filter': 'blur(20px) saturate(150%)',
+                        'background-color': `var(${themeTypesKeys['material-dark-average'].cssVariable})`,
+                    },
+                },
+                'blur-out': {
+                    '0%': {
+                        'backdrop-filter': 'blur(20px) saturate(150%)',
+                        'background-color': `var(${themeTypesKeys['material-dark-average'].cssVariable})`,
+                    },
+                    '100%': {
+                        'backdrop-filter': 'blur(0px)',
+                    },
+                },
+                display: {
+                    '0%': {
+                        display: 'none',
+                    },
+                    '100%': {
+                        display: 'block',
+                    },
+                },
+                hide: {
+                    '0%': {
+                        display: 'block',
+                    },
+                    '100%': {
+                        display: 'none',
+                    },
+                },
+                'move-loading-cover-to-right': {
+                    '0%': {
+                        transform: 'translateX(-64%)',
+                    },
+                    '100%': {
+                        transform: 'translateX(0%)',
+                    },
+                },
+                'scale-and-fade-down': {
+                    '0%': {
+                        transform: 'scale(1)',
+                        opacity: '1',
+                    },
+                    '100%': {
+                        transform: 'scale(0.9)',
+                        opacity: '0.5',
+                    },
+                },
+                'scale-and-fade-up': {
+                    '0%': {
+                        transform: 'scale(0.9)',
+                        opacity: '0.5',
+                    },
+                    '100%': {
+                        transform: 'scale(1)',
+                        opacity: '1',
+                    },
+                },
+            },
+            animation: {
+                'move-to-right-with-spring-bounce': `move-to-right-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
+                'move-to-left-with-spring-bounce': `move-to-left-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
+                'slide-to-top': `slide-to-top var(${CSS_VARS.SLIDE_TO_TOP_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
+                'slide-to-bottom': `slide-to-bottom var(${CSS_VARS.SLIDE_TO_BOTTOM_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
+                'expand-route': `expand-route var(${CSS_VARS.EXPAND_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
+                'collapse-route': `collapse-route var(${CSS_VARS.COLLAPSE_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
+                'fade-in': `fade-in var(${CSS_VARS.FADE_IN_DURATION}, 0s) ease-out both`,
+                'fade-out': `fade-out var(${CSS_VARS.FADE_OUT_DURATION}, 0s) ease-out both`,
+                'scale-and-fade-down': `scale-and-fade-down var(${CSS_VARS.SCALE_AND_FADE_DOWN_DURATION}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
+                'scale-and-fade-up': `scale-and-fade-up var(${CSS_VARS.SCALE_AND_FADE_UP_DURATION}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
+                'loading-gradient': 'loading-gradient 1s ease-in-out both infinite',
+                'translate-to-bottom': `translate-to-bottom var(${CSS_VARS.TRANSLATE_TOP_OR_BOTTOM}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
+                'translate-to-top': `translate-to-top var(${CSS_VARS.TRANSLATE_TOP_OR_BOTTOM}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
+                'blur-in': `blur-in var(${CSS_VARS.BLUR_IN_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
+                'blur-out': `blur-out var(${CSS_VARS.BLUR_OUT_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
+                'display-delayed': `display 0s var(${CSS_VARS.DISPLAY_DELAYED_DURATION}, 0s) ease-out both`,
+                hide: `hide 0s ease-out forwards`,
+                'move-loading-cover-to-right': 'move-loading-cover-to-right 1.4s linear infinite',
+            },
+            opacity: {
+                33: '0.33',
+                66: '0.66',
+            },
+            fontFamily: {
+                geist: ['Geist', 'sans-serif'],
+            },
+            letterSpacing: {
+                // body text
+                'body-small': '-0.366px',
+                'body-medium': '-0.675px',
+                'body-large': '-0.843px',
+                // heading letter
+                'heading-small': '-1.05px',
+                'heading-medium': '-2.465px',
+                'heading-large': '-3.525px',
+            },
+            fontSize: {
+                // caption text
+                caption: '0.875rem', // 14px
+                // body text
+                'body-small': '1.14375rem', // 18.5px
+                'body-medium': '1.40625rem', // 22.5px
+                'body-large': '1.75625rem', // 28.1px
+                // heading
+                'heading-small': '2.1875rem', // 35px
+                'heading-medium': '3.08125rem', // 49.3px
+                'heading-large': '4.40625rem', // 70.5px
+            },
+            fontWeight: {
+                // body text and caption text
+                'typography-regular': '400',
+                'typography-bold': '600',
+                // headings
+                'heading-regular': '400',
+                'heading-bold': '600',
+            },
+            lineHeight: {
+                // caption text
+                caption: '19.6px',
+                // body text
+                'body-small': '25.62px',
+                'body-medium': '31.5px',
+                'body-large': '39.34px',
+                // headings
+                'heading-small': '38.5px',
+                'heading-medium': '49.3px',
+                'heading-large': '66.97px',
+            },
+            width: widths,
+            height: heights,
+            minWidth: widths,
+            minHeight: heights,
+            maxWidth: widths,
+            maxHeight: heights,
+            spacing,
+            borderRadius: spacing,
+            boxShadow,
+            backgroundImage: backgrounds,
+            backdropBlur,
+            colors: Object.assign({}, Object.entries(themeTypesKeys).reduce((acc, [key, { cssVariable }]) => {
+                acc[key] = `var(${cssVariable})`;
+                return acc;
+            }, {})),
+        },
+    },
+    plugins: [],
+};
+
 const createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -61400,26 +61794,6 @@ function WalletsView() {
     return (jsxRuntime.jsxs(Modal, { maxHeight: true, children: [jsxRuntime.jsxs(ModalContent, { addGap: true, children: [jsxRuntime.jsx("div", { className: "tw-px-squid-xs tw-py-squid-xxs", children: jsxRuntime.jsx(Input, { placeholder: "Select your wallet" }) }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-py-squid-xxs", children: [jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", detail: "Installed", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", detail: "Installed", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), jsxRuntime.jsx("span", { className: "tw-text-material-light-thin", children: jsxRuntime.jsx(ModalContentDivider, {}) }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", subtitle: "Connect with an Injected Wallet", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Browser Extension" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), ' ', jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), ' ', jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), ' ', jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsxRuntime.jsx(ListItem, { icon: jsxRuntime.jsx("span", { className: "tw-text-material-light-average", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" })] })] }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel" })] }));
 }
 
-const lightTheme = {
-    // content
-    'content-100': '#17191C',
-    'content-200': '#292C32',
-    'content-300': '#292C32',
-    'content-400': '#676B7E',
-    'content-500': '#8A8FA8',
-    'content-600': '#A7ABBE',
-    'content-700': '#D1D6E0',
-    'content-800': '#EDEEF3',
-    'content-900': '#FBFBFD',
-    // accent
-    'accent-400': '#9E79D2',
-    'accent-500': '#B893EC',
-    // status
-    'status-positive': '#17CF26',
-    'status-negative': '#FF5B4D',
-    'status-warning': '#EC9213',
-};
-
 // list of the theme variables that need to be replaced
 // from the user readable theme config
 // to the internal theme config
@@ -61481,23 +61855,30 @@ const parseSquidTheme = (userTheme) => {
     // material-dark-thin -> grey-900 + 10% opacity
     // material-dark-average -> grey-900 + 33% opacity
     // material-dark-thick -> grey-900 + 66% opacity
-    const materialVariants = {
-        'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
-        'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
-        'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
-        'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
-        'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
-        'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
-    };
+    let materialVariants = {};
+    if (squidTheme['grey-100'] && squidTheme['grey-900']) {
+        materialVariants = {
+            'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
+            'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
+            'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
+            'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
+            'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
+            'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
+        };
+    }
     squidTheme = Object.assign(Object.assign({}, squidTheme), materialVariants);
     const styleKeys = Object.keys(themeTypesKeys);
-    const parsed = styleKeys.map((sk) => {
+    const parsed = styleKeys
+        .map((sk) => {
         const themeItem = themeTypesKeys[sk];
+        if (!themeItem)
+            return {};
         let userValue = squidTheme[sk];
         return {
             [themeItem.cssVariable]: userValue,
         };
-    });
+    })
+        .filter((obj) => Object.keys(obj).length > 0);
     // adds a variant with 0.05 opacity for each color
     // will result in variables like this:
     // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
@@ -61512,13 +61893,19 @@ const parseSquidTheme = (userTheme) => {
     //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
     //   })
     // })
-    parsed.push({
-        [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
-    });
-    // color representing the blend of material-light and grey-900
-    parsed.push({
-        [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
-    });
+    if (themeTypesKeys['grey-100-005'] && squidTheme['grey-100']) {
+        parsed.push({
+            [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+        });
+    }
+    if (themeTypesKeys['material-light-blend-grey-900'] &&
+        squidTheme['material-light-thin'] &&
+        squidTheme['grey-900']) {
+        // color representing the blend of material-light and grey-900
+        parsed.push({
+            [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
+        });
+    }
     return parsed.reduce((a, v) => {
         const key = Object.keys(v)[0];
         return Object.assign(Object.assign({}, a), { [key]: v[key] });
@@ -61800,6 +62187,9 @@ exports.WalletLink = WalletLink;
 exports.WalletsView = WalletsView;
 exports.WrapAction = WrapAction;
 exports.XSocial = XSocial;
+exports.baseTailwindConfig = baseTailwindConfig;
+exports.darkTheme = darkTheme;
+exports.lightTheme = lightTheme;
 exports.linkActionTimelineProps = linkActionTimelineProps;
 exports.statusBgClassMap = statusBgClassMap$1;
 exports.statusColorClassMap = statusColorClassMap;