npm - @metamask-previews/design-system-react-native - Versions diffs - 0.27.0-preview.f5c2542 → 0.30.0-preview.0a4d6f8 - Mend

@metamask-previews/design-system-react-native 0.27.0-preview.f5c2542 → 0.30.0-preview.0a4d6f8

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 (471) hide show

package/dist/components/ButtonBase/ButtonBase.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonBaseSize,\n FontWeight,\n TextColor,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n MAP_BUTTONBASE_SIZE_ICONSIZE,\n MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n getButtonBaseBorderRadiusTwClass,\n getButtonBaseHorizontalPaddingTwClasses,\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n children,\n textProps,\n size = ButtonBaseSize.Lg,\n isLoading,\n loadingText,\n spinnerProps,\n loadingWrapperProps,\n contentWrapperProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n isDisabled,\n isFullWidth,\n twClassName,\n textClassName,\n iconClassName,\n style,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n accessibilityActions,\n onAccessibilityAction,\n ...props\n}: ButtonBaseProps) => {\n const tw = useTailwind();\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n const hasStart = Boolean(finalStartIconName \|\| startAccessory);\n const hasEnd = Boolean(finalEndIconName \|\| endAccessory);\n const hasAccessories = hasStart \|\| hasEnd;\n\n const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n // Generate accessibility label if not provided\n const finalAccessibilityLabel = useMemo(() => {\n if (accessibilityLabel) {\n return accessibilityLabel;\n }\n\n // For loading state with loadingText, prioritize loadingText\n if (isLoading && loadingText) {\n return loadingText;\n }\n\n // If children is a string, use it as the label\n if (typeof children === 'string') {\n return children;\n }\n\n return undefined;\n }, [accessibilityLabel, children, isLoading, loadingText]);\n\n // Generate accessibility hint for loading state if not provided\n const finalAccessibilityHint = useMemo(() => {\n if (accessibilityHint) {\n return accessibilityHint;\n }\n\n if (isLoading) {\n return 'Button is currently loading, please wait';\n }\n\n return undefined;\n }, [accessibilityHint, isLoading]);\n\n // Create accessibilityState object with only truthy values\n const accessibilityState = useMemo(() => {\n const state: { disabled?: boolean; busy?: boolean } = {};\n\n if (isDisabled \|\| isLoading) {\n state.disabled = true;\n }\n\n if (isLoading) {\n state.busy = true;\n }\n\n return state;\n }, [isDisabled, isLoading]);\n\n return (\n <ButtonAnimated\n disabled={isDisabled \|\| isLoading}\n accessibilityRole={accessibilityRole}\n accessibilityLabel={finalAccessibilityLabel}\n accessibilityHint={finalAccessibilityHint}\n accessibilityActions={accessibilityActions}\n onAccessibilityAction={onAccessibilityAction}\n accessibilityState={accessibilityState}\n accessible\n style={({ pressed }) => {\n // Evaluate custom className if it's a function\n const customClassName =\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName;\n\n // Build button container styles\n const buttonStyles = tw.style(\n // Base layout - flex container for button content\n 'flex-row items-center justify-center',\n // Visual styling\n 'bg-muted overflow-hidden',\n // Conditional Border Radius and Horizontal Spacing based on requirements\n getButtonBaseBorderRadiusTwClass(size),\n getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // State-based opacity\n isDisabled ? 'opacity-50' : 'opacity-100',\n // Width - use self-start to prevent stretching when not full width\n isFullWidth ? 'w-full' : 'self-start',\n // Custom classes\n customClassName,\n );\n\n // Merge with additional styles if provided\n const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n if (additionalStyle) {\n computedStyle.push(additionalStyle);\n }\n\n return computedStyle;\n }}\n {...props}\n >\n {({ pressed }) => {\n const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n loadingWrapperProps ?? {};\n const { twClassName: contentWrapperTw, ...restContentWrapper } =\n contentWrapperProps ?? {};\n\n return (\n <>\n {/* Loading spinner overlay */}\n {isLoading && (\n <Box\n {...restLoadingWrapper}\n twClassName={`absolute inset-0 flex items-center justify-center ${loadingWrapperTw ?? ''}`}\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n {...spinnerProps}\n spinnerIconProps={{\n size: iconSize,\n ...spinnerProps?.spinnerIconProps,\n }}\n loadingTextProps={{\n numberOfLines: 1,\n variant: labelTextVariant,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n />\n </Box>\n )}\n\n <BoxRow\n {...restContentWrapper}\n twClassName={`${contentWrapperTw ?? ''} ${isLoading ? 'opacity-0' : ''}`}\n gap={hasAccessories ? 1 : 0}\n startAccessory={\n finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={iconSize}\n twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n {...startIconProps}\n />\n ) : (\n startAccessory\n )\n }\n endAccessory={\n finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={iconSize}\n twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n {...endIconProps}\n />\n ) : (\n endAccessory\n )\n }\n textProps={{\n variant: labelTextVariant,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`,\n }}\n >\n {children}\n </BoxRow>\n </>\n );\n }}\n </ButtonAnimated>\n );\n};\n"]}
1	+ {"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonBaseSize,\n FontWeight,\n mergeTwClassName,\n TextColor,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n MAP_BUTTONBASE_SIZE_ICONSIZE,\n MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n getButtonBaseBorderRadiusTwClass,\n getButtonBaseHorizontalPaddingTwClasses,\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n children,\n textProps,\n size = ButtonBaseSize.Lg,\n isLoading,\n loadingText,\n spinnerProps,\n loadingWrapperProps,\n contentWrapperProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n isDisabled,\n isFullWidth,\n twClassName,\n textClassName,\n iconClassName,\n style,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n accessibilityActions,\n onAccessibilityAction,\n ...props\n}: ButtonBaseProps) => {\n const tw = useTailwind();\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n const hasStart = Boolean(finalStartIconName \|\| startAccessory);\n const hasEnd = Boolean(finalEndIconName \|\| endAccessory);\n const hasAccessories = hasStart \|\| hasEnd;\n\n const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n // Generate accessibility label if not provided\n const finalAccessibilityLabel = useMemo(() => {\n if (accessibilityLabel) {\n return accessibilityLabel;\n }\n\n // For loading state with loadingText, prioritize loadingText\n if (isLoading && loadingText) {\n return loadingText;\n }\n\n // If children is a string, use it as the label\n if (typeof children === 'string') {\n return children;\n }\n\n return undefined;\n }, [accessibilityLabel, children, isLoading, loadingText]);\n\n // Generate accessibility hint for loading state if not provided\n const finalAccessibilityHint = useMemo(() => {\n if (accessibilityHint) {\n return accessibilityHint;\n }\n\n if (isLoading) {\n return 'Button is currently loading, please wait';\n }\n\n return undefined;\n }, [accessibilityHint, isLoading]);\n\n // Create accessibilityState object with only truthy values\n const accessibilityState = useMemo(() => {\n const state: { disabled?: boolean; busy?: boolean } = {};\n\n if (isDisabled \|\| isLoading) {\n state.disabled = true;\n }\n\n if (isLoading) {\n state.busy = true;\n }\n\n return state;\n }, [isDisabled, isLoading]);\n\n return (\n <ButtonAnimated\n disabled={isDisabled \|\| isLoading}\n accessibilityRole={accessibilityRole}\n accessibilityLabel={finalAccessibilityLabel}\n accessibilityHint={finalAccessibilityHint}\n accessibilityActions={accessibilityActions}\n onAccessibilityAction={onAccessibilityAction}\n accessibilityState={accessibilityState}\n accessible\n style={({ pressed }) => {\n // Evaluate custom className if it's a function\n const customClassName =\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName;\n\n // Build button container styles\n const buttonStyles = tw.style(\n // Base layout - flex container for button content\n 'flex-row items-center justify-center',\n // Visual styling\n 'bg-muted overflow-hidden',\n // Conditional Border Radius and Horizontal Spacing based on requirements\n getButtonBaseBorderRadiusTwClass(size),\n getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // State-based opacity\n isDisabled ? 'opacity-50' : 'opacity-100',\n // Width - use self-start to prevent stretching when not full width\n isFullWidth ? 'w-full' : 'self-start',\n // Custom classes\n customClassName,\n );\n\n // Merge with additional styles if provided\n const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n if (additionalStyle) {\n computedStyle.push(additionalStyle);\n }\n\n return computedStyle;\n }}\n {...props}\n >\n {({ pressed }) => {\n const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n loadingWrapperProps ?? {};\n const { twClassName: contentWrapperTw, ...restContentWrapper } =\n contentWrapperProps ?? {};\n\n return (\n <>\n {/* Loading spinner overlay */}\n {isLoading && (\n <Box\n {...restLoadingWrapper}\n twClassName={mergeTwClassName(\n 'absolute inset-0 flex items-center justify-center',\n loadingWrapperTw,\n )}\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n {...spinnerProps}\n spinnerIconProps={{\n size: iconSize,\n ...spinnerProps?.spinnerIconProps,\n }}\n loadingTextProps={{\n numberOfLines: 1,\n variant: labelTextVariant,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n />\n </Box>\n )}\n\n <BoxRow\n {...restContentWrapper}\n twClassName={\n isLoading\n ? mergeTwClassName('opacity-0', contentWrapperTw)\n : contentWrapperTw\n }\n gap={hasAccessories ? 1 : 0}\n startAccessory={\n finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={iconSize}\n twClassName={mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n )}\n {...startIconProps}\n />\n ) : (\n startAccessory\n )\n }\n endAccessory={\n finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={iconSize}\n twClassName={mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n )}\n {...endIconProps}\n />\n ) : (\n endAccessory\n )\n }\n textProps={{\n variant: labelTextVariant,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: mergeTwClassName(\n mergeTwClassName(\n 'shrink grow-0 flex-wrap text-center',\n textClassName ? textClassName(pressed) : undefined,\n ),\n textProps?.twClassName,\n ),\n }}\n >\n {children}\n </BoxRow>\n </>\n );\n }}\n </ButtonAnimated>\n );\n};\n"]}

package/dist/components/Content/Content.cjs CHANGED Viewed

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = void 0;
 const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importDefault(require("react"));
+const Box_1 = require("../Box/index.cjs");
 const BoxColumn_1 = require("../BoxColumn/index.cjs");
 const BoxRow_1 = require("../BoxRow/index.cjs");
 const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
 const Content_constants_1 = require("./Content.constants.cjs");
-const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory, verticalAlignment = design_system_shared_1.ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
-    const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);
-    const contentRow = (<BoxRow_1.BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()} {...(hasColumnShell ? {} : props)}>
+const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={(0, design_system_shared_1.mergeTwClassName)('min-h-[46px]', twClassName)} {...props}>
       {avatar}
       {/* Title and description Column */}
       <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
@@ -58,13 +58,7 @@ const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory,
               </TextOrChildren_1.TextOrChildren>
             </BoxRow_1.BoxRow>) : null}
         </BoxColumn_1.BoxColumn>) : null}
-    </BoxRow_1.BoxRow>);
-    if (hasColumnShell) {
-        return (<BoxColumn_1.BoxColumn gap={1} topAccessory={topAccessory} bottomAccessory={bottomAccessory} twClassName={twClassName} {...props}>
-        {contentRow}
-      </BoxColumn_1.BoxColumn>);
-    }
-    return contentRow;
+    </Box_1.Box>);
 };
 exports.Content = Content;
 exports.Content.displayName = 'Content';

package/dist/components/Content/Content.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,~~kFAKiD~~;AACjD,kDAA0B;AAE1B,sDAAyC;AACzC,gDAAmC;AACnC,gFAAmE;AAEnE,+DAA6D;AAGtD,MAAM,OAAO,GAA2B,CAAC,EAC9C,~~cAAc,EACd,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,~~iBAAiB,GAAG,+CAAwB,CAAC,MAAM,EACnD,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,~~MAAM,cAAc,GAAG,~~OAAO,~~CAAC~~,~~YAAY,~~CAAC,~~IAAI~~,~~OAAO~~,~~CAAC~~,~~eAAe,~~CAAC,CAAC~~;IAEzE~~,~~MAAM~~,~~UAAU~~,GAAG,~~CACjB,~~CAAC,~~eAAM~~,~~CACL,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,~~UAAU,CAAC,CAAC,0CAAsB,CAAC,iBAAiB,CAAC,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,~~gBAAgB~~,~~cAAc~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~SAAS,CAAC,CAAC,CAAC,CAAC,~~WAAW,~~IAAI,EAAE,~~CAAC,~~EAAE,~~CAAC,~~IAAI~~,~~EAAE,CAAC,CACvF,~~IAAI,~~CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,~~KAAK,CAAC,~~CAAC,CAElC~~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~~eAAM~~,CAAC,~~CACV,CAAC;IAEF,IAAI,cAAc,EAAE;QAClB,OAAO,CACL,CAAC,qBAAS,CACR,GAAG,CAAC,CAAC,CAAC,CAAC,~~CACP,~~YAAY,~~CAAC~~,CAAC,YAAY,CAAC,CAC3B,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV~~;~~QAAA~~,CAAC,~~UAAU,CACb;MAAA,EAAE,qBAAS,~~CAAC~~,CACb,CAAC~~;~~KACH;IAED~~,~~OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AApJW,~~QAAA,OAAO,~~WAoJlB~~;AAEF,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import {\n ContentVerticalAlignment,\n FontWeight,\n TextColor,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n ~~startAccessory,\n endAccessory,\n topAccessory,\n bottomAccessory,\n~~ verticalAlignment = ContentVerticalAlignment.Center,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n ~~const~~ ~~hasColumnShell = Boolean~~(~~topAccessory) \|\| Boolean(bottomAccessory);\n~~\n ~~const contentRow = (\n~~ <~~BoxRow~~\n ~~startAccessory~~={~~startAccessory~~}\n ~~endAccessory={endAccessory}\n~~ alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n gap={4}\n twClassName={`min-h-[46px] ~~${hasColumnShell ?~~ '~~min-w-0'~~ ~~: (~~twClassName ~~?? ''~~)}~~`.trim()}~~\n {...~~(hasColumnShell ? {} :~~ props)}\n >\n {avatar}\n {/* Title and description Column /}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n description ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {/ Value and subvalue Column */}\n {value \|\| subvalue ? (\n <BoxColumn\n twClassName=\"min-w-0\"\n bottomAccessory={\n subvalue ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </~~BoxRow~~>\n );\n~~\n if (hasColumnShell) {\n return (\n <BoxColumn\n gap={1~~}~~\n topAccessory={topAccessory}\n bottomAccessory={bottomAccessory}\n twClassName={twClassName}\n {...props}\n >\n {contentRow}\n </BoxColumn>\n )~~;\n }\~~n\n return contentRow;\n};\n\~~nContent.displayName = 'Content';\n"]}
1	+ {"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BoxFlexDirection,\n ContentVerticalAlignment,\n FontWeight,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n verticalAlignment = ContentVerticalAlignment.Center,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n gap={4}\n twClassName={mergeTwClassName('min-h-[46px]', twClassName)}\n {...props}\n >\n {avatar}\n {/* Title and description Column /}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n description ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {/ Value and subvalue Column */}\n {value \|\| subvalue ? (\n <BoxColumn\n twClassName=\"min-w-0\"\n bottomAccessory={\n subvalue ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}

package/dist/components/Content/Content.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"~~AAMA~~,OAAO,KAAK,cAAc;~~AAO1B~~,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,~~CAoJ1C~~,CAAC"}
1	+ {"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6H1C,CAAC"}

package/dist/components/Content/Content.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"~~AAMA~~,OAAO,KAAK,cAAc;~~AAO1B~~,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,~~CAoJ1C~~,CAAC"}
1	+ {"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6H1C,CAAC"}

package/dist/components/Content/Content.mjs CHANGED Viewed

@@ -4,16 +4,16 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ContentVerticalAlignment, FontWeight, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
+import { BoxFlexDirection, ContentVerticalAlignment, FontWeight, mergeTwClassName, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
+import { Box } from "../Box/index.mjs";
 import { BoxColumn } from "../BoxColumn/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
 import { VERTICAL_ALIGNMENT_MAP } from "./Content.constants.mjs";
-export const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory, verticalAlignment = ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
-    const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);
-    const contentRow = (<BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()} {...(hasColumnShell ? {} : props)}>
+export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={mergeTwClassName('min-h-[46px]', twClassName)} {...props}>
       {avatar}
       {/* Title and description Column */}
       <BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
@@ -59,13 +59,7 @@ export const Content = ({ startAccessory, endAccessory, topAccessory, bottomAcce
               </TextOrChildren>
             </BoxRow>) : null}
         </BoxColumn>) : null}
-    </BoxRow>);
-    if (hasColumnShell) {
-        return (<BoxColumn gap={1} topAccessory={topAccessory} bottomAccessory={bottomAccessory} twClassName={twClassName} {...props}>
-        {contentRow}
-      </BoxColumn>);
-    }
-    return contentRow;
+    </Box>);
 };
 Content.displayName = 'Content';
 //# sourceMappingURL=Content.mjs.map

package/dist/components/Content/Content.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,wBAAwB,EACxB,UAAU,EACV,SAAS,EACT,WAAW,EACZ,gDAAgD;AACjD,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAEnE,OAAO,EAAE,sBAAsB,EAAE,gCAA4B;AAG7D,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,~~cAAc,EACd,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,~~iBAAiB,GAAG,wBAAwB,CAAC,MAAM,EACnD,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,~~MAAM,cAAc,GAAG,~~OAAO,~~CAAC~~,~~YAAY,~~CAAC,~~IAAI,OAAO,CAAC,eAAe,CAAC,CAAC;IAEzE,MAAM,UAAU,~~GAAG,~~CACjB~~,~~CAAC~~,~~MAAM,CACL,cAAc,~~CAAC,CAAC,~~cAAc~~,CAAC,~~CAC/B~~,~~YAAY,~~CAAC,~~CAAC~~,~~YAAY,CAAC,CAC3B,~~UAAU,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,gBAAgB,~~cAAc,~~CAAC,~~CAAC~~,~~CAAC~~,~~SAAS,CAAC,CAAC,CAAC,CAAC,~~WAAW,~~IAAI,EAAE,~~CAAC,~~EAAE,~~CAAC,~~IAAI~~,~~EAAE,CAAC,CACvF,~~IAAI,~~CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,~~KAAK,CAAC,~~CAAC,CAElC~~;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,kCAAkC,CACnC;MAAA,CAAC,SAAS,CACR,WAAW,CAAC,gBAAgB,CAC5B,eAAe,CAAC,CACd,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,yBAAyB,CAAC,CAC1C,YAAY,CAAC,CAAC,uBAAuB,CAAC,CACtC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;gBAChC,GAAG,gBAAgB;aACpB,CAAC,CAEF;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,cAAc,CAClB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;YAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,cAAc,CAClB;UAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,+BAA+B,CAChC;MAAA,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CACnB,CAAC,SAAS,CACR,WAAW,CAAC,SAAS,CACrB,eAAe,CAAC,CACd,QAAQ,CAAC,CAAC,CAAC,CACT,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CACnC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;gBAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,WAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;oBAChC,GAAG,aAAa;iBACjB,CAAC,CAEF;kBAAA,CAAC,QAAQ,CACX;gBAAA,EAAE,cAAc,CAClB;cAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;UAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,WAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;oBAC5B,GAAG,UAAU;iBACd,CAAC,CAEF;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,cAAc,CAClB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,SAAS,CAAC,CACb,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,~~MAAM,CAAC,CACV,CAAC;IAEF,IAAI,cAAc,EAAE;QAClB,OAAO,CACL,CAAC,SAAS,CACR,~~GAAG,CAAC,~~CAAC,CAAC,CAAC,~~CACP,~~YAAY,~~CAAC~~,CAAC,YAAY,CAAC,CAC3B,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV~~;~~QAAA~~,CAAC,~~UAAU,CACb;MAAA,EAAE,SAAS,~~CAAC~~,CACb,CAAC~~;~~KACH;IAED,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;~~AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import {\n ContentVerticalAlignment,\n FontWeight,\n TextColor,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n ~~startAccessory,\n endAccessory,\n topAccessory,\n bottomAccessory,\n~~ verticalAlignment = ContentVerticalAlignment.Center,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n ~~const~~ ~~hasColumnShell = Boolean~~(~~topAccessory) \|\| Boolean(bottomAccessory);\n~~\n ~~const contentRow = (\n~~ <~~BoxRow~~\n ~~startAccessory~~={~~startAccessory~~}\n ~~endAccessory={endAccessory}\n~~ alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n gap={4}\n twClassName={`min-h-[46px] ~~${hasColumnShell ?~~ '~~min-w-0'~~ ~~: (~~twClassName ~~?? ''~~)}~~`.trim()}~~\n {...~~(hasColumnShell ? {} :~~ props)}\n >\n {avatar}\n {/* Title and description Column /}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n description ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {/ Value and subvalue Column */}\n {value \|\| subvalue ? (\n <BoxColumn\n twClassName=\"min-w-0\"\n bottomAccessory={\n subvalue ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </~~BoxRow~~>\n );\n~~\n if (hasColumnShell) {\n return (\n <BoxColumn\n gap={1~~}~~\n topAccessory={topAccessory}\n bottomAccessory={bottomAccessory}\n twClassName={twClassName}\n {...props}\n >\n {contentRow}\n </BoxColumn>\n )~~;\n }\~~n\n return contentRow;\n};\n\~~nContent.displayName = 'Content';\n"]}
1	+ {"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BoxFlexDirection,\n ContentVerticalAlignment,\n FontWeight,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n verticalAlignment = ContentVerticalAlignment.Center,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n gap={4}\n twClassName={mergeTwClassName('min-h-[46px]', twClassName)}\n {...props}\n >\n {avatar}\n {/* Title and description Column /}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n description ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {/ Value and subvalue Column */}\n {value \|\| subvalue ? (\n <BoxColumn\n twClassName=\"min-w-0\"\n bottomAccessory={\n subvalue ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}

package/dist/components/Content/Content.types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.types.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text/Text.types';\n\n/*\n Content component props.\n \n Props-only layout for list ~~rows~~ (`title`, `avatar`, accessories, etc.).\n /\nexport type ContentProps = Omit<BoxProps, 'children'> &\n ContentPropsShared & {\n /\n Optional props for the title Text when `title` is a string.\n * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n /\n titleProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the description Text when `description` is a string.\n * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n /\n descriptionProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the value Text when `value` is a string.\n * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n /\n valueProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the subvalue Text when `subvalue` is a string.\n * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n */\n subvalueProps?: Partial<Omit<TextProps, 'children'>>;\n };\n"]}
1	+ {"version":3,"file":"Content.types.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text/Text.types';\n\n/*\n Content component props.\n \n Props-only layout for the inner list row (`title`, `avatar`, inline row accessories, etc.).\n /\nexport type ContentProps = Omit<BoxProps, 'children'> &\n ContentPropsShared & {\n /\n Optional props for the title Text when `title` is a string.\n * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n /\n titleProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the description Text when `description` is a string.\n * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n /\n descriptionProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the value Text when `value` is a string.\n * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n /\n valueProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the subvalue Text when `subvalue` is a string.\n * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n */\n subvalueProps?: Partial<Omit<TextProps, 'children'>>;\n };\n"]}

package/dist/components/Content/Content.types.d.cts CHANGED Viewed

@@ -4,7 +4,7 @@ import type { TextProps } from "../Text/Text.types.cjs";
 /**
  * Content component props.
  *
- * Props-only layout for list rows (`title`, `avatar`, accessories, etc.).
+ * Props-only layout for the inner list row (`title`, `avatar`, inline row accessories, etc.).
  */
 export type ContentProps = Omit<BoxProps, 'children'> & ContentPropsShared & {
     /**

package/dist/components/Content/Content.types.d.mts CHANGED Viewed

@@ -4,7 +4,7 @@ import type { TextProps } from "../Text/Text.types.mjs";
 /**
  * Content component props.
  *
- * Props-only layout for list rows (`title`, `avatar`, accessories, etc.).
+ * Props-only layout for the inner list row (`title`, `avatar`, inline row accessories, etc.).
  */
 export type ContentProps = Omit<BoxProps, 'children'> & ContentPropsShared & {
     /**

package/dist/components/Content/Content.types.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.types.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text/Text.types';\n\n/*\n Content component props.\n \n Props-only layout for list ~~rows~~ (`title`, `avatar`, accessories, etc.).\n /\nexport type ContentProps = Omit<BoxProps, 'children'> &\n ContentPropsShared & {\n /\n Optional props for the title Text when `title` is a string.\n * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n /\n titleProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the description Text when `description` is a string.\n * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n /\n descriptionProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the value Text when `value` is a string.\n * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n /\n valueProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the subvalue Text when `subvalue` is a string.\n * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n */\n subvalueProps?: Partial<Omit<TextProps, 'children'>>;\n };\n"]}
1	+ {"version":3,"file":"Content.types.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text/Text.types';\n\n/*\n Content component props.\n \n Props-only layout for the inner list row (`title`, `avatar`, inline row accessories, etc.).\n /\nexport type ContentProps = Omit<BoxProps, 'children'> &\n ContentPropsShared & {\n /\n Optional props for the title Text when `title` is a string.\n * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n /\n titleProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the description Text when `description` is a string.\n * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n /\n descriptionProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the value Text when `value` is a string.\n * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n /\n valueProps?: Partial<Omit<TextProps, 'children'>>;\n /\n Optional props for the subvalue Text when `subvalue` is a string.\n * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n */\n subvalueProps?: Partial<Omit<TextProps, 'children'>>;\n };\n"]}

package/dist/components/{SegmentButton/SegmentButton.cjs → FilterButton/FilterButton.cjs} RENAMED Viewed

@@ -23,25 +23,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SegmentButton = void 0;
+exports.FilterButton = void 0;
 const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importStar(require("react"));
 const ButtonBase_1 = require("../ButtonBase/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const Text_1 = require("../Text/index.cjs");
-const SegmentButton = ({ children, textProps, startIconProps, endIconProps, value, isSelected = false, variant, isLoading = false, size = design_system_shared_1.ButtonBaseSize.Sm, twClassName = '', style, onPress, ...buttonBaseRest }) => {
-    const segmentGroup = (0, react_1.useContext)(design_system_shared_1.SegmentGroupContext);
-    const usesGroupSelection = segmentGroup !== null && value !== undefined;
-    const effectiveVariant = variant ?? segmentGroup?.variant ?? design_system_shared_1.SegmentButtonVariant.Primary;
+const FilterButton = ({ children, textProps, startIconProps, endIconProps, value, isSelected = false, variant, isLoading = false, size, isFullWidth, twClassName = '', style, onPress, ...buttonBaseRest }) => {
+    const filterButtonGroup = (0, react_1.useContext)(design_system_shared_1.FilterButtonGroupContext);
+    const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
+    const effectiveVariant = variant ?? filterButtonGroup?.variant ?? design_system_shared_1.FilterButtonVariant.Primary;
+    const effectiveSize = size ?? filterButtonGroup?.size ?? design_system_shared_1.ButtonBaseSize.Sm;
+    const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
     const effectiveIsSelected = usesGroupSelection
-        ? segmentGroup.value === value
+        ? filterButtonGroup.value === value
         : isSelected;
     const getTextAndIconClassName = () => {
-        if (effectiveVariant === design_system_shared_1.SegmentButtonVariant.Primary &&
+        if (effectiveVariant === design_system_shared_1.FilterButtonVariant.Primary &&
             effectiveIsSelected) {
             return 'text-primary-inverse';
         }
-        if (effectiveVariant === design_system_shared_1.SegmentButtonVariant.Secondary &&
+        if (effectiveVariant === design_system_shared_1.FilterButtonVariant.Secondary &&
             effectiveIsSelected) {
             return 'text-default';
         }
@@ -49,14 +51,14 @@ const SegmentButton = ({ children, textProps, startIconProps, endIconProps, valu
     };
     const handlePress = (event) => {
         if (usesGroupSelection &&
-            segmentGroup !== null &&
+            filterButtonGroup !== null &&
             value !== undefined &&
-            segmentGroup.value !== value) {
-            segmentGroup.onChange(value);
+            filterButtonGroup.value !== value) {
+            filterButtonGroup.onChange(value);
         }
         onPress?.(event);
     };
-    return (<ButtonBase_1.ButtonBase {...buttonBaseRest} size={size} isLoading={isLoading} children={children} onPress={handlePress} textProps={{
+    return (<ButtonBase_1.ButtonBase {...buttonBaseRest} size={effectiveSize} isFullWidth={effectiveIsFullWidth} isLoading={isLoading} children={children} onPress={handlePress} textProps={{
             ...(!effectiveIsSelected ? { color: Text_1.TextColor.TextAlternative } : {}),
             ...textProps,
         }} startIconProps={{
@@ -66,13 +68,13 @@ const SegmentButton = ({ children, textProps, startIconProps, endIconProps, valu
             ...(!effectiveIsSelected ? { color: Icon_1.IconColor.IconAlternative } : {}),
             ...endIconProps,
         }} twClassName={(pressed) => {
-            if (effectiveVariant === design_system_shared_1.SegmentButtonVariant.Primary &&
+            if (effectiveVariant === design_system_shared_1.FilterButtonVariant.Primary &&
                 effectiveIsSelected) {
                 return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${typeof twClassName === 'function'
                     ? twClassName(pressed)
                     : twClassName}`;
             }
-            if (effectiveVariant === design_system_shared_1.SegmentButtonVariant.Secondary &&
+            if (effectiveVariant === design_system_shared_1.FilterButtonVariant.Secondary &&
                 effectiveIsSelected) {
                 return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${typeof twClassName === 'function'
                     ? twClassName(pressed)
@@ -81,6 +83,6 @@ const SegmentButton = ({ children, textProps, startIconProps, endIconProps, valu
             return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${typeof twClassName === 'function' ? twClassName(pressed) : twClassName}`;
         }} textClassName={getTextAndIconClassName} iconClassName={getTextAndIconClassName} style={style}/>);
 };
-exports.SegmentButton = SegmentButton;
-exports.SegmentButton.displayName = 'SegmentButton';
-//# sourceMappingURL=SegmentButton.cjs.map
+exports.FilterButton = FilterButton;
+exports.FilterButton.displayName = 'FilterButton';
+//# sourceMappingURL=FilterButton.cjs.map

package/dist/components/FilterButton/FilterButton.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterButton.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonBaseSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask-previews/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? ButtonBaseSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}

package/dist/components/FilterButton/FilterButton.d.cts ADDED Viewed

@@ -0,0 +1,7 @@
+import React from "react";
+import type { FilterButtonProps } from "./FilterButton.types.cjs";
+export declare const FilterButton: {
+    ({ children, textProps, startIconProps, endIconProps, value, isSelected, variant, isLoading, size, isFullWidth, twClassName, style, onPress, ...buttonBaseRest }: FilterButtonProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=FilterButton.d.cts.map

package/dist/components/FilterButton/FilterButton.d.cts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"FilterButton.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY;sKAetB,iBAAiB;;CAgGnB,CAAC"}

package/dist/components/FilterButton/FilterButton.d.mts ADDED Viewed

@@ -0,0 +1,7 @@
+import React from "react";
+import type { FilterButtonProps } from "./FilterButton.types.mjs";
+export declare const FilterButton: {
+    ({ children, textProps, startIconProps, endIconProps, value, isSelected, variant, isLoading, size, isFullWidth, twClassName, style, onPress, ...buttonBaseRest }: FilterButtonProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=FilterButton.d.mts.map

package/dist/components/FilterButton/FilterButton.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"FilterButton.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY;sKAetB,iBAAiB;;CAgGnB,CAAC"}

package/dist/components/{SegmentButton/SegmentButton.mjs → FilterButton/FilterButton.mjs} RENAMED Viewed

@@ -4,25 +4,27 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ButtonBaseSize, SegmentButtonVariant, SegmentGroupContext } from "@metamask-previews/design-system-shared";
+import { ButtonBaseSize, FilterButtonVariant, FilterButtonGroupContext } from "@metamask-previews/design-system-shared";
 import $React, { useContext } from "react";
 const React = $importDefault($React);
 import { ButtonBase } from "../ButtonBase/index.mjs";
 import { IconColor } from "../Icon/index.mjs";
 import { TextColor } from "../Text/index.mjs";
-export const SegmentButton = ({ children, textProps, startIconProps, endIconProps, value, isSelected = false, variant, isLoading = false, size = ButtonBaseSize.Sm, twClassName = '', style, onPress, ...buttonBaseRest }) => {
-    const segmentGroup = useContext(SegmentGroupContext);
-    const usesGroupSelection = segmentGroup !== null && value !== undefined;
-    const effectiveVariant = variant ?? segmentGroup?.variant ?? SegmentButtonVariant.Primary;
+export const FilterButton = ({ children, textProps, startIconProps, endIconProps, value, isSelected = false, variant, isLoading = false, size, isFullWidth, twClassName = '', style, onPress, ...buttonBaseRest }) => {
+    const filterButtonGroup = useContext(FilterButtonGroupContext);
+    const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
+    const effectiveVariant = variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;
+    const effectiveSize = size ?? filterButtonGroup?.size ?? ButtonBaseSize.Sm;
+    const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
     const effectiveIsSelected = usesGroupSelection
-        ? segmentGroup.value === value
+        ? filterButtonGroup.value === value
         : isSelected;
     const getTextAndIconClassName = () => {
-        if (effectiveVariant === SegmentButtonVariant.Primary &&
+        if (effectiveVariant === FilterButtonVariant.Primary &&
             effectiveIsSelected) {
             return 'text-primary-inverse';
         }
-        if (effectiveVariant === SegmentButtonVariant.Secondary &&
+        if (effectiveVariant === FilterButtonVariant.Secondary &&
             effectiveIsSelected) {
             return 'text-default';
         }
@@ -30,14 +32,14 @@ export const SegmentButton = ({ children, textProps, startIconProps, endIconProp
     };
     const handlePress = (event) => {
         if (usesGroupSelection &&
-            segmentGroup !== null &&
+            filterButtonGroup !== null &&
             value !== undefined &&
-            segmentGroup.value !== value) {
-            segmentGroup.onChange(value);
+            filterButtonGroup.value !== value) {
+            filterButtonGroup.onChange(value);
         }
         onPress?.(event);
     };
-    return (<ButtonBase {...buttonBaseRest} size={size} isLoading={isLoading} children={children} onPress={handlePress} textProps={{
+    return (<ButtonBase {...buttonBaseRest} size={effectiveSize} isFullWidth={effectiveIsFullWidth} isLoading={isLoading} children={children} onPress={handlePress} textProps={{
             ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),
             ...textProps,
         }} startIconProps={{
@@ -47,13 +49,13 @@ export const SegmentButton = ({ children, textProps, startIconProps, endIconProp
             ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),
             ...endIconProps,
         }} twClassName={(pressed) => {
-            if (effectiveVariant === SegmentButtonVariant.Primary &&
+            if (effectiveVariant === FilterButtonVariant.Primary &&
                 effectiveIsSelected) {
                 return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${typeof twClassName === 'function'
                     ? twClassName(pressed)
                     : twClassName}`;
             }
-            if (effectiveVariant === SegmentButtonVariant.Secondary &&
+            if (effectiveVariant === FilterButtonVariant.Secondary &&
                 effectiveIsSelected) {
                 return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${typeof twClassName === 'function'
                     ? twClassName(pressed)
@@ -62,5 +64,5 @@ export const SegmentButton = ({ children, textProps, startIconProps, endIconProp
             return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${typeof twClassName === 'function' ? twClassName(pressed) : twClassName}`;
         }} textClassName={getTextAndIconClassName} iconClassName={getTextAndIconClassName} style={style}/>);
 };
-SegmentButton.displayName = 'SegmentButton';
-//# sourceMappingURL=SegmentButton.mjs.map
+FilterButton.displayName = 'FilterButton';
+//# sourceMappingURL=FilterButton.mjs.map

package/dist/components/FilterButton/FilterButton.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonBaseSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask-previews/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? ButtonBaseSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}

package/dist/components/{SegmentGroup/SegmentGroup.types.cjs → FilterButton/FilterButton.types.cjs} RENAMED Viewed

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=SegmentGroup.types.cjs.map
+//# sourceMappingURL=FilterButton.types.cjs.map

package/dist/components/FilterButton/FilterButton.types.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterButton.types.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { FilterButtonPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { ButtonBaseProps } from '../ButtonBase/ButtonBase.types';\n\n/**\n * FilterButton component props.\n */\nexport type FilterButtonProps = FilterButtonPropsShared &\n Omit<ButtonBaseProps, 'onPress'> & {\n onPress?: ButtonBaseProps['onPress'];\n };\n"]}

package/dist/components/FilterButton/FilterButton.types.d.cts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { FilterButtonPropsShared } from "@metamask-previews/design-system-shared";
+import type { ButtonBaseProps } from "../ButtonBase/ButtonBase.types.cjs";
+/**
+ * FilterButton component props.
+ */
+export type FilterButtonProps = FilterButtonPropsShared & Omit<ButtonBaseProps, 'onPress'> & {
+    onPress?: ButtonBaseProps['onPress'];
+};
+//# sourceMappingURL=FilterButton.types.d.cts.map

package/dist/components/FilterButton/FilterButton.types.d.cts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"FilterButton.types.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,gDAAgD;AAEvF,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AAEtE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GACrD,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,GAAG;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC"}

package/dist/components/FilterButton/FilterButton.types.d.mts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { FilterButtonPropsShared } from "@metamask-previews/design-system-shared";
+import type { ButtonBaseProps } from "../ButtonBase/ButtonBase.types.mjs";
+/**
+ * FilterButton component props.
+ */
+export type FilterButtonProps = FilterButtonPropsShared & Omit<ButtonBaseProps, 'onPress'> & {
+    onPress?: ButtonBaseProps['onPress'];
+};
+//# sourceMappingURL=FilterButton.types.d.mts.map

package/dist/components/FilterButton/FilterButton.types.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"FilterButton.types.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,gDAAgD;AAEvF,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AAEtE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GACrD,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,GAAG;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC"}

package/dist/components/FilterButton/FilterButton.types.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=FilterButton.types.mjs.map

package/dist/components/FilterButton/FilterButton.types.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterButton.types.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { FilterButtonPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { ButtonBaseProps } from '../ButtonBase/ButtonBase.types';\n\n/**\n * FilterButton component props.\n */\nexport type FilterButtonProps = FilterButtonPropsShared &\n Omit<ButtonBaseProps, 'onPress'> & {\n onPress?: ButtonBaseProps['onPress'];\n };\n"]}

package/dist/components/FilterButton/index.cjs ADDED Viewed

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterButton = exports.FilterButtonVariant = void 0;
+var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "FilterButtonVariant", { enumerable: true, get: function () { return design_system_shared_1.FilterButtonVariant; } });
+var FilterButton_1 = require("./FilterButton.cjs");
+Object.defineProperty(exports, "FilterButton", { enumerable: true, get: function () { return FilterButton_1.FilterButton; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/FilterButton/index.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;AAAA,gFAA8E;AAArE,2HAAA,mBAAmB,OAAA;AAC5B,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export { FilterButtonVariant } from '@metamask-previews/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}

package/dist/components/FilterButton/index.d.cts ADDED Viewed

@@ -0,0 +1,4 @@
+export { FilterButtonVariant } from "@metamask-previews/design-system-shared";
+export { FilterButton } from "./FilterButton.cjs";
+export type { FilterButtonProps } from "./FilterButton.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/FilterButton/index.d.cts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/FilterButton/index.d.mts ADDED Viewed

@@ -0,0 +1,4 @@
+export { FilterButtonVariant } from "@metamask-previews/design-system-shared";
+export { FilterButton } from "./FilterButton.mjs";
+export type { FilterButtonProps } from "./FilterButton.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/FilterButton/index.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/FilterButton/index.mjs ADDED Viewed

@@ -0,0 +1,3 @@
+export { FilterButtonVariant } from "@metamask-previews/design-system-shared";
+export { FilterButton } from "./FilterButton.mjs";
+//# sourceMappingURL=index.mjs.map