@0xsquid/ui 0.23.1 → 0.23.2

package/dist/cjs/index.js

@@ -16769,7 +16769,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 +16884,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 +17111,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 +17150,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 +17522,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 +17554,45 @@ 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-400': '#9E79D2',
+    'accent-500': '#B893EC',
+    // 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-400': '#B893EC',
+    'accent-500': '#9E79D2',
+    // status
+    'status-positive': '#7AE870',
+    'status-negative': '#FF4D5B',
+    'status-warning': '#F3AF25',
+};
+
 const createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -61400,26 +61439,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
@@ -61800,6 +61819,8 @@ exports.WalletLink = WalletLink;
 exports.WalletsView = WalletsView;
 exports.WrapAction = WrapAction;
 exports.XSocial = XSocial;
+exports.darkTheme = darkTheme;
+exports.lightTheme = lightTheme;
 exports.linkActionTimelineProps = linkActionTimelineProps;
 exports.statusBgClassMap = statusBgClassMap$1;
 exports.statusColorClassMap = statusColorClassMap;

package/dist/cjs/types/components/lists/ListItem.d.ts

@@ -21,7 +21,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     };
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
     compactOnMobile?: boolean;
+    extraPadding?: boolean;
 }
 type ListItemSize = 'small' | 'large';
-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;
+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;
 export {};

package/dist/cjs/types/core/index.d.ts

@@ -1 +1,2 @@
 export { MEDIA_QUERIES } from './constants';
+export { darkTheme, lightTheme } from './themes';

package/dist/cjs/types/core/themes.d.ts

@@ -8,4 +8,5 @@ export type Theme = {
     type: ThemeType;
 };
 export declare const lightTheme: SquidTheme;
+export declare const darkTheme: SquidTheme;
 export declare const themes: Theme[];

package/dist/cjs/types/stories/lists/ListItem.stories.d.ts

@@ -28,3 +28,5 @@ export declare const SmallSelected: Story;
 export declare const SmallWithCustomIconAsImage: Story;
 export declare const LargeCompactOnMobile: Story;
 export declare const SmallCompactOnMobile: Story;
+export declare const SmallWithoutExtraPadding: Story;
+export declare const LargeWithoutExtraPadding: Story;

package/dist/esm/index.js

@@ -16749,7 +16749,7 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, canToggleBoostMode
             onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
         }
     }
-    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
+    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
                         ? 'tw-bg-grey-300'
                         : 'tw-bg-status-positive') })] }) })));
 }
@@ -16864,7 +16864,7 @@ function EthereumIcon() {
 
 function FeeButton(_a) {
     var { feeInUsd = '0', chipLabel = 'Fee', className, tooltip } = _a, props = __rest$1(_a, ["feeInUsd", "chipLabel", "className", "tooltip"]);
-    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 })] })] })) })));
+    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 })] })] })) })));
 }
 
 function EmojiSadIcon({ className, size = '20', }) {
@@ -17091,15 +17091,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);
@@ -17130,7 +17130,7 @@ function ListItem(_a) {
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? 'button' : 'div';
     const itemProps = isInteractive ? props : {};
-    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
+    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
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
             : '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', 
                     // 'large' variant has extra padding
@@ -17502,7 +17502,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: 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 = {
@@ -17534,6 +17534,45 @@ function NavigationBar(_a) {
                     : 'tw-flex'), children: 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-400': '#9E79D2',
+    'accent-500': '#B893EC',
+    // 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-400': '#B893EC',
+    'accent-500': '#9E79D2',
+    // status
+    'status-positive': '#7AE870',
+    'status-negative': '#FF4D5B',
+    'status-warning': '#F3AF25',
+};
+
 const createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -61380,26 +61419,6 @@ function WalletsView() {
     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" })] }));
 }
 
-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
@@ -61565,4 +61584,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
     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 }));
 }
 
-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 };
+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, darkTheme, lightTheme, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };

package/dist/esm/types/components/lists/ListItem.d.ts

@@ -21,7 +21,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     };
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
     compactOnMobile?: boolean;
+    extraPadding?: boolean;
 }
 type ListItemSize = 'small' | 'large';
-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;
+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;
 export {};

package/dist/esm/types/core/index.d.ts

@@ -1 +1,2 @@
 export { MEDIA_QUERIES } from './constants';
+export { darkTheme, lightTheme } from './themes';

package/dist/esm/types/core/themes.d.ts

@@ -8,4 +8,5 @@ export type Theme = {
     type: ThemeType;
 };
 export declare const lightTheme: SquidTheme;
+export declare const darkTheme: SquidTheme;
 export declare const themes: Theme[];

package/dist/esm/types/stories/lists/ListItem.stories.d.ts

@@ -28,3 +28,5 @@ export declare const SmallSelected: Story;
 export declare const SmallWithCustomIconAsImage: Story;
 export declare const LargeCompactOnMobile: Story;
 export declare const SmallCompactOnMobile: Story;
+export declare const SmallWithoutExtraPadding: Story;
+export declare const LargeWithoutExtraPadding: Story;

package/dist/index.d.ts

@@ -1249,9 +1249,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     };
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
     compactOnMobile?: boolean;
+    extraPadding?: boolean;
 }
 type ListItemSize = 'small' | 'large';
-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;
+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;
 
 interface MenuItemProps {
     label: string;
@@ -2353,4 +2354,7 @@ declare const MEDIA_QUERIES: Record<MediaQuery, {
     value: number;
 }>;
 
-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 };
+declare const lightTheme: SquidTheme;
+declare const darkTheme: SquidTheme;
+
+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, darkTheme, lightTheme, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "author": "",
   "license": "MIT",
   "resolutions": {