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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/cjs/index.js +366 -27
  2. package/dist/cjs/types/components/lists/ListItem.d.ts +2 -1
  3. package/dist/cjs/types/core/design-system.d.ts +2 -0
  4. package/dist/cjs/types/core/index.d.ts +2 -0
  5. package/dist/cjs/types/core/themes.d.ts +1 -0
  6. package/dist/cjs/types/stories/lists/ListItem.stories.d.ts +2 -0
  7. package/dist/esm/index.js +364 -28
  8. package/dist/esm/types/components/lists/ListItem.d.ts +2 -1
  9. package/dist/esm/types/core/design-system.d.ts +2 -0
  10. package/dist/esm/types/core/index.d.ts +2 -0
  11. package/dist/esm/types/core/themes.d.ts +1 -0
  12. package/dist/esm/types/stories/lists/ListItem.stories.d.ts +2 -0
  13. package/dist/index.d.ts +9 -2
  14. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -16769,7 +16769,7 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, canToggleBoostMode
16769
16769
  onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
16770
16770
  }
16771
16771
  }
16772
- 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
16772
+ 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
16773
16773
  ? 'tw-bg-grey-300'
16774
16774
  : 'tw-bg-status-positive') })] }) })));
16775
16775
  }
@@ -16884,7 +16884,7 @@ function EthereumIcon() {
16884
16884
 
16885
16885
  function FeeButton(_a) {
16886
16886
  var { feeInUsd = '0', chipLabel = 'Fee', className, tooltip } = _a, props = __rest$1(_a, ["feeInUsd", "chipLabel", "className", "tooltip"]);
16887
- 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 })] })] })) })));
16887
+ 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 })] })] })) })));
16888
16888
  }
16889
16889
 
16890
16890
  function EmojiSadIcon({ className, size = '20', }) {
@@ -17111,15 +17111,15 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
17111
17111
  }
17112
17112
 
17113
17113
  const listItemSizeMap = {
17114
- small: 'tw-h-list-item-small tw-px-squid-xs',
17115
- large: 'tw-h-list-item-large tw-px-squid-xs',
17114
+ small: 'tw-h-list-item-small',
17115
+ large: 'tw-h-list-item-large',
17116
17116
  };
17117
17117
  const collapsedListItemClassMap = {
17118
17118
  small: 'tw-w-[70px]',
17119
17119
  large: 'tw-w-[80px]',
17120
17120
  };
17121
17121
  function ListItem(_a) {
17122
- 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"]);
17122
+ 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"]);
17123
17123
  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');
17124
17124
  // 'small' variant does not have detail
17125
17125
  const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -17150,7 +17150,7 @@ function ListItem(_a) {
17150
17150
  const isInteractive = !!props.onClick;
17151
17151
  const ItemTag = isInteractive ? 'button' : 'div';
17152
17152
  const itemProps = isInteractive ? props : {};
17153
- 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
17153
+ 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
17154
17154
  ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
17155
17155
  : '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',
17156
17156
  // 'large' variant has extra padding
@@ -17522,7 +17522,7 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
17522
17522
  }, 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: {
17523
17523
  [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
17524
17524
  [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
17525
- }, 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 }) })));
17525
+ }, 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 }) })));
17526
17526
  }
17527
17527
 
17528
17528
  const borderTypeClassMap = {
@@ -17554,6 +17554,362 @@ function NavigationBar(_a) {
17554
17554
  : 'tw-flex'), children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] })));
17555
17555
  }
17556
17556
 
17557
+ const lightTheme = {
17558
+ // content
17559
+ 'content-100': '#17191C',
17560
+ 'content-200': '#292C32',
17561
+ 'content-300': '#292C32',
17562
+ 'content-400': '#676B7E',
17563
+ 'content-500': '#8A8FA8',
17564
+ 'content-600': '#A7ABBE',
17565
+ 'content-700': '#D1D6E0',
17566
+ 'content-800': '#EDEEF3',
17567
+ 'content-900': '#FBFBFD',
17568
+ // accent
17569
+ 'accent-400': '#9E79D2',
17570
+ 'accent-500': '#B893EC',
17571
+ // status
17572
+ 'status-positive': '#17CF26',
17573
+ 'status-negative': '#FF5B4D',
17574
+ 'status-warning': '#EC9213',
17575
+ };
17576
+ const darkTheme = {
17577
+ // content
17578
+ 'content-100': '#FBFBFD',
17579
+ 'content-200': '#EDEFF3',
17580
+ 'content-300': '#D1D6E0',
17581
+ 'content-400': '#A7ABBE',
17582
+ 'content-500': '#8A8FA8',
17583
+ 'content-600': '#676B7E',
17584
+ 'content-700': '#4C515D',
17585
+ 'content-800': '#292C32',
17586
+ 'content-900': '#17191C',
17587
+ // accent
17588
+ 'accent-400': '#B893EC',
17589
+ 'accent-500': '#9E79D2',
17590
+ // status
17591
+ 'status-positive': '#7AE870',
17592
+ 'status-negative': '#FF4D5B',
17593
+ 'status-warning': '#F3AF25',
17594
+ };
17595
+
17596
+ const spacing = {
17597
+ 'squid-xxs': '0.3125rem', // 5px
17598
+ 'squid-xs': '0.625rem', // 10px
17599
+ 'squid-s': '0.9375rem', // 15px
17600
+ 'squid-m': '1.25rem', // 20px
17601
+ 'squid-l': '1.875rem', // 30px
17602
+ 'squid-xl': '2.5rem', // 40px
17603
+ 'squid-xxl': '3.75rem', // 60px
17604
+ };
17605
+ const backdropBlur = {
17606
+ '/10': '10px',
17607
+ '/20': '20px',
17608
+ };
17609
+ const widths = {
17610
+ button: '9.5625rem', // 153px
17611
+ 'list-item-compact': '22.0625rem', // 353px
17612
+ 'list-item-small': '21.25rem', // 340px
17613
+ 'card-large': '480px',
17614
+ 'card-compact': '393px',
17615
+ 'modal-extra-large': '440px',
17616
+ 'modal-large': '400px',
17617
+ 'modal-compact': '373px',
17618
+ };
17619
+ const heights = {
17620
+ button: '3.75rem', // 60px
17621
+ 'list-item-large': '3.125rem', // 50px
17622
+ 'list-item-small': '2.5rem', // 40px
17623
+ 'card-large': '660px',
17624
+ 'card-compact': '640px',
17625
+ 'card-small': '580px',
17626
+ 'modal-large': '600px',
17627
+ 'modal-compact': '631px',
17628
+ };
17629
+ // tw-shadow-*
17630
+ const boxShadow = {
17631
+ 'elevation-dark-3': '0px 2px 4px 0px rgba(0, 0, 0, 0.20), 0px 5px 50px -1px rgba(0, 0, 0, 0.33)',
17632
+ 'elevation-light-3': '0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 5px 50px -1px rgba(0, 0, 0, 0.20)',
17633
+ 'elevation-dark-2': '0px 2px 5px 1px rgba(0, 0, 0, 0.20), 0px 5px 20px -1px rgba(0, 0, 0, 0.33)',
17634
+ 'elevation-light-1': '0px 1px 2px 0px #0000001A',
17635
+ 'elevation-light-2': '0px 2px 5px 1px rgba(0, 0, 0, 0.10), 0px 5px 20px -1px rgba(0, 0, 0, 0.10)',
17636
+ 'inset-royal': '0px 0px 50px 0px #876FE2 inset',
17637
+ };
17638
+ // tw-bg-*
17639
+ const backgrounds = {
17640
+ 'royal-light': 'linear-gradient(180deg, #A577D8 0%, #BF91F2 100%)',
17641
+ 'royal-dark': 'linear-gradient(180deg, #BF91F2 0%, #A577D8 100%)',
17642
+ 'dark-cover': 'linear-gradient(90deg, var(--squid-theme-material-dark-thick) 45.4%, transparent 50.85%, var(--squid-theme-material-dark-thick) 55.61%)',
17643
+ };
17644
+ const baseTailwindConfig = {
17645
+ prefix: 'tw-',
17646
+ content: ['./src/**/*.{ts,tsx,js,jsx}', '.storybook/**/*.{ts,tsx,js,jsx}'],
17647
+ theme: {
17648
+ extend: {
17649
+ screens: Object.values(MEDIA_QUERIES).reduce((acc, curr) => {
17650
+ // 'raw' means that we want to use the raw media query value
17651
+ // https://tailwindcss.com/docs/screens#custom-media-queries
17652
+ acc[curr.key] = { raw: curr.media };
17653
+ return acc;
17654
+ }, {}),
17655
+ keyframes: {
17656
+ 'move-to-right-with-spring-bounce': {
17657
+ '0%': {
17658
+ transform: 'translateX(-25%)',
17659
+ },
17660
+ '50%': {
17661
+ transform: 'translateX(27%)',
17662
+ },
17663
+ '80%': {
17664
+ transform: 'translateX(24%)',
17665
+ },
17666
+ '100%': {
17667
+ transform: 'translateX(25%)',
17668
+ },
17669
+ },
17670
+ 'move-to-left-with-spring-bounce': {
17671
+ '0%': {
17672
+ transform: 'translateX(25%)',
17673
+ },
17674
+ '50%': {
17675
+ transform: 'translateX(-27%)',
17676
+ },
17677
+ '80%': {
17678
+ transform: 'translateX(-24%)',
17679
+ },
17680
+ '100%': {
17681
+ transform: 'translateX(-25%)',
17682
+ },
17683
+ },
17684
+ 'slide-to-top': {
17685
+ '0%': {
17686
+ transform: 'translate3d(0, 650px, 0)',
17687
+ },
17688
+ '100%': {
17689
+ transform: 'translate3d(0, 0, 0)',
17690
+ },
17691
+ },
17692
+ 'slide-to-bottom': {
17693
+ '0%': {
17694
+ transform: 'translate3d(0, 0, 0)',
17695
+ },
17696
+ '100%': {
17697
+ transform: 'translate3d(0, 650px, 0)',
17698
+ },
17699
+ },
17700
+ 'expand-route': {
17701
+ '0%': {
17702
+ height: '60px',
17703
+ },
17704
+ '100%': {
17705
+ height: '100%',
17706
+ },
17707
+ },
17708
+ 'collapse-route': {
17709
+ '0%': {
17710
+ height: '100%',
17711
+ },
17712
+ '100%': {
17713
+ height: '60px',
17714
+ },
17715
+ },
17716
+ 'fade-in': {
17717
+ '0%': {
17718
+ opacity: '0',
17719
+ },
17720
+ '100%': {
17721
+ opacity: '1',
17722
+ },
17723
+ },
17724
+ 'fade-out': {
17725
+ '0%': {
17726
+ opacity: '1',
17727
+ },
17728
+ '100%': {
17729
+ opacity: '0',
17730
+ },
17731
+ },
17732
+ 'loading-gradient': {
17733
+ '0%': {
17734
+ transform: 'translateX(-70%)',
17735
+ opacity: '0',
17736
+ },
17737
+ '50%': {
17738
+ opacity: '1',
17739
+ },
17740
+ '100%': {
17741
+ opacity: '0',
17742
+ transform: 'translateX(70%)',
17743
+ },
17744
+ },
17745
+ 'translate-to-bottom': {
17746
+ '0%': {
17747
+ transform: 'translateY(0)',
17748
+ },
17749
+ '100%': {
17750
+ transform: 'translateY(100%)',
17751
+ },
17752
+ },
17753
+ 'translate-to-top': {
17754
+ '0%': {
17755
+ transform: 'translateY(0)',
17756
+ },
17757
+ '100%': {
17758
+ transform: 'translateY(-100%)',
17759
+ },
17760
+ },
17761
+ 'blur-in': {
17762
+ '0%': {
17763
+ 'backdrop-filter': 'blur(0px)',
17764
+ },
17765
+ '100%': {
17766
+ 'backdrop-filter': 'blur(20px) saturate(150%)',
17767
+ 'background-color': `var(${themeTypesKeys['material-dark-average'].cssVariable})`,
17768
+ },
17769
+ },
17770
+ 'blur-out': {
17771
+ '0%': {
17772
+ 'backdrop-filter': 'blur(20px) saturate(150%)',
17773
+ 'background-color': `var(${themeTypesKeys['material-dark-average'].cssVariable})`,
17774
+ },
17775
+ '100%': {
17776
+ 'backdrop-filter': 'blur(0px)',
17777
+ },
17778
+ },
17779
+ display: {
17780
+ '0%': {
17781
+ display: 'none',
17782
+ },
17783
+ '100%': {
17784
+ display: 'block',
17785
+ },
17786
+ },
17787
+ hide: {
17788
+ '0%': {
17789
+ display: 'block',
17790
+ },
17791
+ '100%': {
17792
+ display: 'none',
17793
+ },
17794
+ },
17795
+ 'move-loading-cover-to-right': {
17796
+ '0%': {
17797
+ transform: 'translateX(-64%)',
17798
+ },
17799
+ '100%': {
17800
+ transform: 'translateX(0%)',
17801
+ },
17802
+ },
17803
+ 'scale-and-fade-down': {
17804
+ '0%': {
17805
+ transform: 'scale(1)',
17806
+ opacity: '1',
17807
+ },
17808
+ '100%': {
17809
+ transform: 'scale(0.9)',
17810
+ opacity: '0.5',
17811
+ },
17812
+ },
17813
+ 'scale-and-fade-up': {
17814
+ '0%': {
17815
+ transform: 'scale(0.9)',
17816
+ opacity: '0.5',
17817
+ },
17818
+ '100%': {
17819
+ transform: 'scale(1)',
17820
+ opacity: '1',
17821
+ },
17822
+ },
17823
+ },
17824
+ animation: {
17825
+ 'move-to-right-with-spring-bounce': `move-to-right-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
17826
+ 'move-to-left-with-spring-bounce': `move-to-left-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
17827
+ 'slide-to-top': `slide-to-top var(${CSS_VARS.SLIDE_TO_TOP_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
17828
+ 'slide-to-bottom': `slide-to-bottom var(${CSS_VARS.SLIDE_TO_BOTTOM_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
17829
+ 'expand-route': `expand-route var(${CSS_VARS.EXPAND_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
17830
+ 'collapse-route': `collapse-route var(${CSS_VARS.COLLAPSE_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
17831
+ 'fade-in': `fade-in var(${CSS_VARS.FADE_IN_DURATION}, 0s) ease-out both`,
17832
+ 'fade-out': `fade-out var(${CSS_VARS.FADE_OUT_DURATION}, 0s) ease-out both`,
17833
+ 'scale-and-fade-down': `scale-and-fade-down var(${CSS_VARS.SCALE_AND_FADE_DOWN_DURATION}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
17834
+ 'scale-and-fade-up': `scale-and-fade-up var(${CSS_VARS.SCALE_AND_FADE_UP_DURATION}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
17835
+ 'loading-gradient': 'loading-gradient 1s ease-in-out both infinite',
17836
+ 'translate-to-bottom': `translate-to-bottom var(${CSS_VARS.TRANSLATE_TOP_OR_BOTTOM}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
17837
+ 'translate-to-top': `translate-to-top var(${CSS_VARS.TRANSLATE_TOP_OR_BOTTOM}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
17838
+ 'blur-in': `blur-in var(${CSS_VARS.BLUR_IN_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
17839
+ 'blur-out': `blur-out var(${CSS_VARS.BLUR_OUT_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
17840
+ 'display-delayed': `display 0s var(${CSS_VARS.DISPLAY_DELAYED_DURATION}, 0s) ease-out both`,
17841
+ hide: `hide 0s ease-out forwards`,
17842
+ 'move-loading-cover-to-right': 'move-loading-cover-to-right 1.4s linear infinite',
17843
+ },
17844
+ opacity: {
17845
+ 33: '0.33',
17846
+ 66: '0.66',
17847
+ },
17848
+ fontFamily: {
17849
+ geist: ['Geist', 'sans-serif'],
17850
+ },
17851
+ letterSpacing: {
17852
+ // body text
17853
+ 'body-small': '-0.366px',
17854
+ 'body-medium': '-0.675px',
17855
+ 'body-large': '-0.843px',
17856
+ // heading letter
17857
+ 'heading-small': '-1.05px',
17858
+ 'heading-medium': '-2.465px',
17859
+ 'heading-large': '-3.525px',
17860
+ },
17861
+ fontSize: {
17862
+ // caption text
17863
+ caption: '0.875rem', // 14px
17864
+ // body text
17865
+ 'body-small': '1.14375rem', // 18.5px
17866
+ 'body-medium': '1.40625rem', // 22.5px
17867
+ 'body-large': '1.75625rem', // 28.1px
17868
+ // heading
17869
+ 'heading-small': '2.1875rem', // 35px
17870
+ 'heading-medium': '3.08125rem', // 49.3px
17871
+ 'heading-large': '4.40625rem', // 70.5px
17872
+ },
17873
+ fontWeight: {
17874
+ // body text and caption text
17875
+ 'typography-regular': '400',
17876
+ 'typography-bold': '600',
17877
+ // headings
17878
+ 'heading-regular': '400',
17879
+ 'heading-bold': '600',
17880
+ },
17881
+ lineHeight: {
17882
+ // caption text
17883
+ caption: '19.6px',
17884
+ // body text
17885
+ 'body-small': '25.62px',
17886
+ 'body-medium': '31.5px',
17887
+ 'body-large': '39.34px',
17888
+ // headings
17889
+ 'heading-small': '38.5px',
17890
+ 'heading-medium': '49.3px',
17891
+ 'heading-large': '66.97px',
17892
+ },
17893
+ width: widths,
17894
+ height: heights,
17895
+ minWidth: widths,
17896
+ minHeight: heights,
17897
+ maxWidth: widths,
17898
+ maxHeight: heights,
17899
+ spacing,
17900
+ borderRadius: spacing,
17901
+ boxShadow,
17902
+ backgroundImage: backgrounds,
17903
+ backdropBlur,
17904
+ colors: Object.assign({}, Object.entries(themeTypesKeys).reduce((acc, [key, { cssVariable }]) => {
17905
+ acc[key] = `var(${cssVariable})`;
17906
+ return acc;
17907
+ }, {})),
17908
+ },
17909
+ },
17910
+ plugins: [],
17911
+ };
17912
+
17557
17913
  const createStoreImpl = (createState) => {
17558
17914
  let state;
17559
17915
  const listeners = /* @__PURE__ */ new Set();
@@ -61400,26 +61756,6 @@ function WalletsView() {
61400
61756
  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" })] }));
61401
61757
  }
61402
61758
 
61403
- const lightTheme = {
61404
- // content
61405
- 'content-100': '#17191C',
61406
- 'content-200': '#292C32',
61407
- 'content-300': '#292C32',
61408
- 'content-400': '#676B7E',
61409
- 'content-500': '#8A8FA8',
61410
- 'content-600': '#A7ABBE',
61411
- 'content-700': '#D1D6E0',
61412
- 'content-800': '#EDEEF3',
61413
- 'content-900': '#FBFBFD',
61414
- // accent
61415
- 'accent-400': '#9E79D2',
61416
- 'accent-500': '#B893EC',
61417
- // status
61418
- 'status-positive': '#17CF26',
61419
- 'status-negative': '#FF5B4D',
61420
- 'status-warning': '#EC9213',
61421
- };
61422
-
61423
61759
  // list of the theme variables that need to be replaced
61424
61760
  // from the user readable theme config
61425
61761
  // to the internal theme config
@@ -61800,6 +62136,9 @@ exports.WalletLink = WalletLink;
61800
62136
  exports.WalletsView = WalletsView;
61801
62137
  exports.WrapAction = WrapAction;
61802
62138
  exports.XSocial = XSocial;
62139
+ exports.baseTailwindConfig = baseTailwindConfig;
62140
+ exports.darkTheme = darkTheme;
62141
+ exports.lightTheme = lightTheme;
61803
62142
  exports.linkActionTimelineProps = linkActionTimelineProps;
61804
62143
  exports.statusBgClassMap = statusBgClassMap$1;
61805
62144
  exports.statusColorClassMap = statusColorClassMap;
package/dist/cjs/types/components/lists/ListItem.d.ts CHANGED
@@ -21,7 +21,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
21
21
  };
22
22
  containerProps?: React.HTMLAttributes<HTMLLIElement>;
23
23
  compactOnMobile?: boolean;
24
+ extraPadding?: boolean;
24
25
  }
25
26
  type ListItemSize = 'small' | 'large';
26
- export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
27
+ export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
27
28
  export {};
package/dist/cjs/types/core/design-system.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { Config } from 'tailwindcss';
2
+ export declare const baseTailwindConfig: Config;
package/dist/cjs/types/core/index.d.ts CHANGED
@@ -1 +1,3 @@
1
1
  export { MEDIA_QUERIES } from './constants';
2
+ export { darkTheme, lightTheme } from './themes';
3
+ export { baseTailwindConfig } from './design-system';
package/dist/cjs/types/core/themes.d.ts CHANGED
@@ -8,4 +8,5 @@ export type Theme = {
8
8
  type: ThemeType;
9
9
  };
10
10
  export declare const lightTheme: SquidTheme;
11
+ export declare const darkTheme: SquidTheme;
11
12
  export declare const themes: Theme[];
package/dist/cjs/types/stories/lists/ListItem.stories.d.ts CHANGED
@@ -28,3 +28,5 @@ export declare const SmallSelected: Story;
28
28
  export declare const SmallWithCustomIconAsImage: Story;
29
29
  export declare const LargeCompactOnMobile: Story;
30
30
  export declare const SmallCompactOnMobile: Story;
31
+ export declare const SmallWithoutExtraPadding: Story;
32
+ export declare const LargeWithoutExtraPadding: Story;
package/dist/esm/index.js CHANGED
@@ -16749,7 +16749,7 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, canToggleBoostMode
16749
16749
  onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
16750
16750
  }
16751
16751
  }
16752
- return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "mobile-lg:tw-w-[190px] tw-rounded-squid-m", childrenClassName: "tw-rounded-squid-m", children: 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: [jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, canToggleBoostMode: canToggleBoostMode }), jsx(Chip, { label: estimatedTime, className: cn('mobile-xs:tw-flex tw-hidden tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
16752
+ return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "mobile-lg:tw-w-[190px] tw-rounded-squid-m", childrenClassName: "tw-rounded-squid-m", children: 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: [jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, canToggleBoostMode: canToggleBoostMode }), jsx(Chip, { label: estimatedTime, className: cn('tw-hidden tw-text-grey-900 tw-transition-colors mobile-xs:tw-flex', boostMode === 'normal' || !canToggleBoostMode
16753
16753
  ? 'tw-bg-grey-300'
16754
16754
  : 'tw-bg-status-positive') })] }) })));
16755
16755
  }
@@ -16864,7 +16864,7 @@ function EthereumIcon() {
16864
16864
 
16865
16865
  function FeeButton(_a) {
16866
16866
  var { feeInUsd = '0', chipLabel = 'Fee', className, tooltip } = _a, props = __rest$1(_a, ["feeInUsd", "chipLabel", "className", "tooltip"]);
16867
- return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-rounded-squid-m tw-w-full", childrenClassName: "tw-rounded-squid-m", children: 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: [jsx(Chip, { label: chipLabel, className: "mobile-xs:tw-flex tw-hidden" }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: feeInUsd })] })] })) })));
16867
+ return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-rounded-squid-m tw-w-full", childrenClassName: "tw-rounded-squid-m", children: 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: [jsx(Chip, { label: chipLabel, className: "tw-hidden mobile-xs:tw-flex" }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: feeInUsd })] })] })) })));
16868
16868
  }
16869
16869
 
16870
16870
  function EmojiSadIcon({ className, size = '20', }) {
@@ -17091,15 +17091,15 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
17091
17091
  }
17092
17092
 
17093
17093
  const listItemSizeMap = {
17094
- small: 'tw-h-list-item-small tw-px-squid-xs',
17095
- large: 'tw-h-list-item-large tw-px-squid-xs',
17094
+ small: 'tw-h-list-item-small',
17095
+ large: 'tw-h-list-item-large',
17096
17096
  };
17097
17097
  const collapsedListItemClassMap = {
17098
17098
  small: 'tw-w-[70px]',
17099
17099
  large: 'tw-w-[80px]',
17100
17100
  };
17101
17101
  function ListItem(_a) {
17102
- 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"]);
17102
+ 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"]);
17103
17103
  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');
17104
17104
  // 'small' variant does not have detail
17105
17105
  const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -17130,7 +17130,7 @@ function ListItem(_a) {
17130
17130
  const isInteractive = !!props.onClick;
17131
17131
  const ItemTag = isInteractive ? 'button' : 'div';
17132
17132
  const itemProps = isInteractive ? props : {};
17133
- return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], compactOnMobile
17133
+ return (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
17134
17134
  ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
17135
17135
  : 'tw-w-full', className), children: 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' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), 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',
17136
17136
  // 'large' variant has extra padding
@@ -17502,7 +17502,7 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
17502
17502
  }, 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: jsx("div", { style: {
17503
17503
  [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
17504
17504
  [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
17505
- }, 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 }) })));
17505
+ }, 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 }) })));
17506
17506
  }
17507
17507
 
17508
17508
  const borderTypeClassMap = {
@@ -17534,6 +17534,362 @@ function NavigationBar(_a) {
17534
17534
  : 'tw-flex'), children: jsx(HeadingText, { size: "small", children: title }) })) : null] })));
17535
17535
  }
17536
17536
 
17537
+ const lightTheme = {
17538
+ // content
17539
+ 'content-100': '#17191C',
17540
+ 'content-200': '#292C32',
17541
+ 'content-300': '#292C32',
17542
+ 'content-400': '#676B7E',
17543
+ 'content-500': '#8A8FA8',
17544
+ 'content-600': '#A7ABBE',
17545
+ 'content-700': '#D1D6E0',
17546
+ 'content-800': '#EDEEF3',
17547
+ 'content-900': '#FBFBFD',
17548
+ // accent
17549
+ 'accent-400': '#9E79D2',
17550
+ 'accent-500': '#B893EC',
17551
+ // status
17552
+ 'status-positive': '#17CF26',
17553
+ 'status-negative': '#FF5B4D',
17554
+ 'status-warning': '#EC9213',
17555
+ };
17556
+ const darkTheme = {
17557
+ // content
17558
+ 'content-100': '#FBFBFD',
17559
+ 'content-200': '#EDEFF3',
17560
+ 'content-300': '#D1D6E0',
17561
+ 'content-400': '#A7ABBE',
17562
+ 'content-500': '#8A8FA8',
17563
+ 'content-600': '#676B7E',
17564
+ 'content-700': '#4C515D',
17565
+ 'content-800': '#292C32',
17566
+ 'content-900': '#17191C',
17567
+ // accent
17568
+ 'accent-400': '#B893EC',
17569
+ 'accent-500': '#9E79D2',
17570
+ // status
17571
+ 'status-positive': '#7AE870',
17572
+ 'status-negative': '#FF4D5B',
17573
+ 'status-warning': '#F3AF25',
17574
+ };
17575
+
17576
+ const spacing = {
17577
+ 'squid-xxs': '0.3125rem', // 5px
17578
+ 'squid-xs': '0.625rem', // 10px
17579
+ 'squid-s': '0.9375rem', // 15px
17580
+ 'squid-m': '1.25rem', // 20px
17581
+ 'squid-l': '1.875rem', // 30px
17582
+ 'squid-xl': '2.5rem', // 40px
17583
+ 'squid-xxl': '3.75rem', // 60px
17584
+ };
17585
+ const backdropBlur = {
17586
+ '/10': '10px',
17587
+ '/20': '20px',
17588
+ };
17589
+ const widths = {
17590
+ button: '9.5625rem', // 153px
17591
+ 'list-item-compact': '22.0625rem', // 353px
17592
+ 'list-item-small': '21.25rem', // 340px
17593
+ 'card-large': '480px',
17594
+ 'card-compact': '393px',
17595
+ 'modal-extra-large': '440px',
17596
+ 'modal-large': '400px',
17597
+ 'modal-compact': '373px',
17598
+ };
17599
+ const heights = {
17600
+ button: '3.75rem', // 60px
17601
+ 'list-item-large': '3.125rem', // 50px
17602
+ 'list-item-small': '2.5rem', // 40px
17603
+ 'card-large': '660px',
17604
+ 'card-compact': '640px',
17605
+ 'card-small': '580px',
17606
+ 'modal-large': '600px',
17607
+ 'modal-compact': '631px',
17608
+ };
17609
+ // tw-shadow-*
17610
+ const boxShadow = {
17611
+ 'elevation-dark-3': '0px 2px 4px 0px rgba(0, 0, 0, 0.20), 0px 5px 50px -1px rgba(0, 0, 0, 0.33)',
17612
+ 'elevation-light-3': '0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 5px 50px -1px rgba(0, 0, 0, 0.20)',
17613
+ 'elevation-dark-2': '0px 2px 5px 1px rgba(0, 0, 0, 0.20), 0px 5px 20px -1px rgba(0, 0, 0, 0.33)',
17614
+ 'elevation-light-1': '0px 1px 2px 0px #0000001A',
17615
+ 'elevation-light-2': '0px 2px 5px 1px rgba(0, 0, 0, 0.10), 0px 5px 20px -1px rgba(0, 0, 0, 0.10)',
17616
+ 'inset-royal': '0px 0px 50px 0px #876FE2 inset',
17617
+ };
17618
+ // tw-bg-*
17619
+ const backgrounds = {
17620
+ 'royal-light': 'linear-gradient(180deg, #A577D8 0%, #BF91F2 100%)',
17621
+ 'royal-dark': 'linear-gradient(180deg, #BF91F2 0%, #A577D8 100%)',
17622
+ 'dark-cover': 'linear-gradient(90deg, var(--squid-theme-material-dark-thick) 45.4%, transparent 50.85%, var(--squid-theme-material-dark-thick) 55.61%)',
17623
+ };
17624
+ const baseTailwindConfig = {
17625
+ prefix: 'tw-',
17626
+ content: ['./src/**/*.{ts,tsx,js,jsx}', '.storybook/**/*.{ts,tsx,js,jsx}'],
17627
+ theme: {
17628
+ extend: {
17629
+ screens: Object.values(MEDIA_QUERIES).reduce((acc, curr) => {
17630
+ // 'raw' means that we want to use the raw media query value
17631
+ // https://tailwindcss.com/docs/screens#custom-media-queries
17632
+ acc[curr.key] = { raw: curr.media };
17633
+ return acc;
17634
+ }, {}),
17635
+ keyframes: {
17636
+ 'move-to-right-with-spring-bounce': {
17637
+ '0%': {
17638
+ transform: 'translateX(-25%)',
17639
+ },
17640
+ '50%': {
17641
+ transform: 'translateX(27%)',
17642
+ },
17643
+ '80%': {
17644
+ transform: 'translateX(24%)',
17645
+ },
17646
+ '100%': {
17647
+ transform: 'translateX(25%)',
17648
+ },
17649
+ },
17650
+ 'move-to-left-with-spring-bounce': {
17651
+ '0%': {
17652
+ transform: 'translateX(25%)',
17653
+ },
17654
+ '50%': {
17655
+ transform: 'translateX(-27%)',
17656
+ },
17657
+ '80%': {
17658
+ transform: 'translateX(-24%)',
17659
+ },
17660
+ '100%': {
17661
+ transform: 'translateX(-25%)',
17662
+ },
17663
+ },
17664
+ 'slide-to-top': {
17665
+ '0%': {
17666
+ transform: 'translate3d(0, 650px, 0)',
17667
+ },
17668
+ '100%': {
17669
+ transform: 'translate3d(0, 0, 0)',
17670
+ },
17671
+ },
17672
+ 'slide-to-bottom': {
17673
+ '0%': {
17674
+ transform: 'translate3d(0, 0, 0)',
17675
+ },
17676
+ '100%': {
17677
+ transform: 'translate3d(0, 650px, 0)',
17678
+ },
17679
+ },
17680
+ 'expand-route': {
17681
+ '0%': {
17682
+ height: '60px',
17683
+ },
17684
+ '100%': {
17685
+ height: '100%',
17686
+ },
17687
+ },
17688
+ 'collapse-route': {
17689
+ '0%': {
17690
+ height: '100%',
17691
+ },
17692
+ '100%': {
17693
+ height: '60px',
17694
+ },
17695
+ },
17696
+ 'fade-in': {
17697
+ '0%': {
17698
+ opacity: '0',
17699
+ },
17700
+ '100%': {
17701
+ opacity: '1',
17702
+ },
17703
+ },
17704
+ 'fade-out': {
17705
+ '0%': {
17706
+ opacity: '1',
17707
+ },
17708
+ '100%': {
17709
+ opacity: '0',
17710
+ },
17711
+ },
17712
+ 'loading-gradient': {
17713
+ '0%': {
17714
+ transform: 'translateX(-70%)',
17715
+ opacity: '0',
17716
+ },
17717
+ '50%': {
17718
+ opacity: '1',
17719
+ },
17720
+ '100%': {
17721
+ opacity: '0',
17722
+ transform: 'translateX(70%)',
17723
+ },
17724
+ },
17725
+ 'translate-to-bottom': {
17726
+ '0%': {
17727
+ transform: 'translateY(0)',
17728
+ },
17729
+ '100%': {
17730
+ transform: 'translateY(100%)',
17731
+ },
17732
+ },
17733
+ 'translate-to-top': {
17734
+ '0%': {
17735
+ transform: 'translateY(0)',
17736
+ },
17737
+ '100%': {
17738
+ transform: 'translateY(-100%)',
17739
+ },
17740
+ },
17741
+ 'blur-in': {
17742
+ '0%': {
17743
+ 'backdrop-filter': 'blur(0px)',
17744
+ },
17745
+ '100%': {
17746
+ 'backdrop-filter': 'blur(20px) saturate(150%)',
17747
+ 'background-color': `var(${themeTypesKeys['material-dark-average'].cssVariable})`,
17748
+ },
17749
+ },
17750
+ 'blur-out': {
17751
+ '0%': {
17752
+ 'backdrop-filter': 'blur(20px) saturate(150%)',
17753
+ 'background-color': `var(${themeTypesKeys['material-dark-average'].cssVariable})`,
17754
+ },
17755
+ '100%': {
17756
+ 'backdrop-filter': 'blur(0px)',
17757
+ },
17758
+ },
17759
+ display: {
17760
+ '0%': {
17761
+ display: 'none',
17762
+ },
17763
+ '100%': {
17764
+ display: 'block',
17765
+ },
17766
+ },
17767
+ hide: {
17768
+ '0%': {
17769
+ display: 'block',
17770
+ },
17771
+ '100%': {
17772
+ display: 'none',
17773
+ },
17774
+ },
17775
+ 'move-loading-cover-to-right': {
17776
+ '0%': {
17777
+ transform: 'translateX(-64%)',
17778
+ },
17779
+ '100%': {
17780
+ transform: 'translateX(0%)',
17781
+ },
17782
+ },
17783
+ 'scale-and-fade-down': {
17784
+ '0%': {
17785
+ transform: 'scale(1)',
17786
+ opacity: '1',
17787
+ },
17788
+ '100%': {
17789
+ transform: 'scale(0.9)',
17790
+ opacity: '0.5',
17791
+ },
17792
+ },
17793
+ 'scale-and-fade-up': {
17794
+ '0%': {
17795
+ transform: 'scale(0.9)',
17796
+ opacity: '0.5',
17797
+ },
17798
+ '100%': {
17799
+ transform: 'scale(1)',
17800
+ opacity: '1',
17801
+ },
17802
+ },
17803
+ },
17804
+ animation: {
17805
+ 'move-to-right-with-spring-bounce': `move-to-right-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
17806
+ 'move-to-left-with-spring-bounce': `move-to-left-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
17807
+ 'slide-to-top': `slide-to-top var(${CSS_VARS.SLIDE_TO_TOP_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
17808
+ 'slide-to-bottom': `slide-to-bottom var(${CSS_VARS.SLIDE_TO_BOTTOM_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
17809
+ 'expand-route': `expand-route var(${CSS_VARS.EXPAND_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
17810
+ 'collapse-route': `collapse-route var(${CSS_VARS.COLLAPSE_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
17811
+ 'fade-in': `fade-in var(${CSS_VARS.FADE_IN_DURATION}, 0s) ease-out both`,
17812
+ 'fade-out': `fade-out var(${CSS_VARS.FADE_OUT_DURATION}, 0s) ease-out both`,
17813
+ 'scale-and-fade-down': `scale-and-fade-down var(${CSS_VARS.SCALE_AND_FADE_DOWN_DURATION}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
17814
+ 'scale-and-fade-up': `scale-and-fade-up var(${CSS_VARS.SCALE_AND_FADE_UP_DURATION}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
17815
+ 'loading-gradient': 'loading-gradient 1s ease-in-out both infinite',
17816
+ 'translate-to-bottom': `translate-to-bottom var(${CSS_VARS.TRANSLATE_TOP_OR_BOTTOM}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
17817
+ 'translate-to-top': `translate-to-top var(${CSS_VARS.TRANSLATE_TOP_OR_BOTTOM}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
17818
+ 'blur-in': `blur-in var(${CSS_VARS.BLUR_IN_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
17819
+ 'blur-out': `blur-out var(${CSS_VARS.BLUR_OUT_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
17820
+ 'display-delayed': `display 0s var(${CSS_VARS.DISPLAY_DELAYED_DURATION}, 0s) ease-out both`,
17821
+ hide: `hide 0s ease-out forwards`,
17822
+ 'move-loading-cover-to-right': 'move-loading-cover-to-right 1.4s linear infinite',
17823
+ },
17824
+ opacity: {
17825
+ 33: '0.33',
17826
+ 66: '0.66',
17827
+ },
17828
+ fontFamily: {
17829
+ geist: ['Geist', 'sans-serif'],
17830
+ },
17831
+ letterSpacing: {
17832
+ // body text
17833
+ 'body-small': '-0.366px',
17834
+ 'body-medium': '-0.675px',
17835
+ 'body-large': '-0.843px',
17836
+ // heading letter
17837
+ 'heading-small': '-1.05px',
17838
+ 'heading-medium': '-2.465px',
17839
+ 'heading-large': '-3.525px',
17840
+ },
17841
+ fontSize: {
17842
+ // caption text
17843
+ caption: '0.875rem', // 14px
17844
+ // body text
17845
+ 'body-small': '1.14375rem', // 18.5px
17846
+ 'body-medium': '1.40625rem', // 22.5px
17847
+ 'body-large': '1.75625rem', // 28.1px
17848
+ // heading
17849
+ 'heading-small': '2.1875rem', // 35px
17850
+ 'heading-medium': '3.08125rem', // 49.3px
17851
+ 'heading-large': '4.40625rem', // 70.5px
17852
+ },
17853
+ fontWeight: {
17854
+ // body text and caption text
17855
+ 'typography-regular': '400',
17856
+ 'typography-bold': '600',
17857
+ // headings
17858
+ 'heading-regular': '400',
17859
+ 'heading-bold': '600',
17860
+ },
17861
+ lineHeight: {
17862
+ // caption text
17863
+ caption: '19.6px',
17864
+ // body text
17865
+ 'body-small': '25.62px',
17866
+ 'body-medium': '31.5px',
17867
+ 'body-large': '39.34px',
17868
+ // headings
17869
+ 'heading-small': '38.5px',
17870
+ 'heading-medium': '49.3px',
17871
+ 'heading-large': '66.97px',
17872
+ },
17873
+ width: widths,
17874
+ height: heights,
17875
+ minWidth: widths,
17876
+ minHeight: heights,
17877
+ maxWidth: widths,
17878
+ maxHeight: heights,
17879
+ spacing,
17880
+ borderRadius: spacing,
17881
+ boxShadow,
17882
+ backgroundImage: backgrounds,
17883
+ backdropBlur,
17884
+ colors: Object.assign({}, Object.entries(themeTypesKeys).reduce((acc, [key, { cssVariable }]) => {
17885
+ acc[key] = `var(${cssVariable})`;
17886
+ return acc;
17887
+ }, {})),
17888
+ },
17889
+ },
17890
+ plugins: [],
17891
+ };
17892
+
17537
17893
  const createStoreImpl = (createState) => {
17538
17894
  let state;
17539
17895
  const listeners = /* @__PURE__ */ new Set();
@@ -61380,26 +61736,6 @@ function WalletsView() {
61380
61736
  return (jsxs(Modal, { maxHeight: true, children: [jsxs(ModalContent, { addGap: true, children: [jsx("div", { className: "tw-px-squid-xs tw-py-squid-xxs", children: jsx(Input, { placeholder: "Select your wallet" }) }), jsxs("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-py-squid-xxs", children: [jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", detail: "Installed", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", detail: "Installed", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), jsx("span", { className: "tw-text-material-light-thin", children: jsx(ModalContentDivider, {}) }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", subtitle: "Connect with an Injected Wallet", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Browser Extension" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), ' ', jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), ' ', jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), ' ', jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" })] })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel" })] }));
61381
61737
  }
61382
61738
 
61383
- const lightTheme = {
61384
- // content
61385
- 'content-100': '#17191C',
61386
- 'content-200': '#292C32',
61387
- 'content-300': '#292C32',
61388
- 'content-400': '#676B7E',
61389
- 'content-500': '#8A8FA8',
61390
- 'content-600': '#A7ABBE',
61391
- 'content-700': '#D1D6E0',
61392
- 'content-800': '#EDEEF3',
61393
- 'content-900': '#FBFBFD',
61394
- // accent
61395
- 'accent-400': '#9E79D2',
61396
- 'accent-500': '#B893EC',
61397
- // status
61398
- 'status-positive': '#17CF26',
61399
- 'status-negative': '#FF5B4D',
61400
- 'status-warning': '#EC9213',
61401
- };
61402
-
61403
61739
  // list of the theme variables that need to be replaced
61404
61740
  // from the user readable theme config
61405
61741
  // to the internal theme config
@@ -61565,4 +61901,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
61565
61901
  return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-h-screen tw-font-geist mobile-lg:tw-h-auto", children: children }));
61566
61902
  }
61567
61903
 
61568
- export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, BadgeImage, BagIcon, BankIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollectionIcon, CompassRound, Copy, DashboardFast, DescriptionBlocks, DetailsToolbar, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, HomeIcon, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SizeTransition, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
61904
+ export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, BadgeImage, BagIcon, BankIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollectionIcon, CompassRound, Copy, DashboardFast, DescriptionBlocks, DetailsToolbar, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, HomeIcon, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SizeTransition, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, darkTheme, lightTheme, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
package/dist/esm/types/components/lists/ListItem.d.ts CHANGED
@@ -21,7 +21,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
21
21
  };
22
22
  containerProps?: React.HTMLAttributes<HTMLLIElement>;
23
23
  compactOnMobile?: boolean;
24
+ extraPadding?: boolean;
24
25
  }
25
26
  type ListItemSize = 'small' | 'large';
26
- export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
27
+ export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
27
28
  export {};
package/dist/esm/types/core/design-system.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { Config } from 'tailwindcss';
2
+ export declare const baseTailwindConfig: Config;
package/dist/esm/types/core/index.d.ts CHANGED
@@ -1 +1,3 @@
1
1
  export { MEDIA_QUERIES } from './constants';
2
+ export { darkTheme, lightTheme } from './themes';
3
+ export { baseTailwindConfig } from './design-system';
package/dist/esm/types/core/themes.d.ts CHANGED
@@ -8,4 +8,5 @@ export type Theme = {
8
8
  type: ThemeType;
9
9
  };
10
10
  export declare const lightTheme: SquidTheme;
11
+ export declare const darkTheme: SquidTheme;
11
12
  export declare const themes: Theme[];
package/dist/esm/types/stories/lists/ListItem.stories.d.ts CHANGED
@@ -28,3 +28,5 @@ export declare const SmallSelected: Story;
28
28
  export declare const SmallWithCustomIconAsImage: Story;
29
29
  export declare const LargeCompactOnMobile: Story;
30
30
  export declare const SmallCompactOnMobile: Story;
31
+ export declare const SmallWithoutExtraPadding: Story;
32
+ export declare const LargeWithoutExtraPadding: Story;
package/dist/index.d.ts CHANGED
@@ -4,6 +4,7 @@ import * as react from 'react';
4
4
  import react__default, { ReactNode, ComponentProps } from 'react';
5
5
  import * as framer_motion from 'framer-motion';
6
6
  import { motion } from 'framer-motion';
7
+ import { Config } from 'tailwindcss';
7
8
 
8
9
  interface BadgeImageProps {
9
10
  imageUrl?: string;
@@ -1249,9 +1250,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
1249
1250
  };
1250
1251
  containerProps?: React.HTMLAttributes<HTMLLIElement>;
1251
1252
  compactOnMobile?: boolean;
1253
+ extraPadding?: boolean;
1252
1254
  }
1253
1255
  type ListItemSize = 'small' | 'large';
1254
- declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
1256
+ declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
1255
1257
 
1256
1258
  interface MenuItemProps {
1257
1259
  label: string;
@@ -2353,4 +2355,9 @@ declare const MEDIA_QUERIES: Record<MediaQuery, {
2353
2355
  value: number;
2354
2356
  }>;
2355
2357
 
2356
- export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BadgeImage, BagIcon, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollectionIcon, CompassRound, Copy, DashboardFast, DescriptionBlocks, DetailsToolbar, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
2358
+ declare const lightTheme: SquidTheme;
2359
+ declare const darkTheme: SquidTheme;
2360
+
2361
+ declare const baseTailwindConfig: Config;
2362
+
2363
+ export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BadgeImage, BagIcon, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollectionIcon, CompassRound, Copy, DashboardFast, DescriptionBlocks, DetailsToolbar, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, darkTheme, lightTheme, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "0.23.1",
8
+ "version": "0.23.2-beta.0",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {