npm - @metamask/design-system-react - Versions diffs - 0.33.0 → 0.35.0 - Mend

@metamask/design-system-react 0.33.0 → 0.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
+## [0.35.0]
+### Changed
+- **BREAKING:** `TextFieldSearch` default `size` changed from `TextFieldSize.Md` to `TextFieldSize.Lg` to match Figma designs ([#1418](https://github.com/MetaMask/metamask-design-system/pull/1418))
+  - Consumers relying on the implicit `Md` height will now render a taller field; pass `size={TextFieldSize.Md}` to preserve the prior height
+  - See [Migration Guide](./MIGRATION.md#from-version-0340-to-0350)
+### Fixed
+- Fixed `ModalContent` to apply `border-muted` correctly in pure-black mode ([#1419](https://github.com/MetaMask/metamask-design-system/pull/1419))
+## [0.34.0]
+### Added
+- Added `IconAlert` for severity-mapped icon glyphs aligned with the React Native primitive ([#1409](https://github.com/MetaMask/metamask-design-system/pull/1409))
+- Added `showIcon` to `HelpText` (default `false`) to render a leading `IconAlert` when `severity` is set ([#1409](https://github.com/MetaMask/metamask-design-system/pull/1409))
+### Changed
+- Updated `BannerBase` spacing (padding, title/description gap, action button margin, and close button offset) to match Figma; inherited by `BannerAlert` and `Toast` ([#1394](https://github.com/MetaMask/metamask-design-system/pull/1394))
 ## [0.33.0]
 ### Added
@@ -426,7 +449,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - Tailwind CSS integration with design token support
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.33.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.0...HEAD
+[0.35.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.34.0...@metamask/design-system-react@0.35.0
+[0.34.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.33.0...@metamask/design-system-react@0.34.0
 [0.33.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.32.0...@metamask/design-system-react@0.33.0
 [0.32.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.31.0...@metamask/design-system-react@0.32.0
 [0.31.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.30.0...@metamask/design-system-react@0.31.0

package/dist/components/BannerAlert/BannerAlert.d.cts CHANGED Viewed

@@ -304,6 +304,8 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        startAccessory?: React.ReactNode;
+        endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../index.cjs").TextProps> | undefined;
@@ -313,10 +315,8 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         loadingTextProps?: Partial<import("../index.cjs").TextProps> | undefined;
         startIconName?: import("@metamask/design-system-shared").IconName | undefined;
         startIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
-        startAccessory?: React.ReactNode;
         endIconName?: import("@metamask/design-system-shared").IconName | undefined;
         endIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
-        endAccessory?: React.ReactNode;
         loadingIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
         isDanger?: boolean | undefined;
         isInverse?: boolean | undefined;
@@ -627,6 +627,8 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        startAccessory?: React.ReactNode;
+        endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../index.cjs").TextProps> | undefined;
@@ -636,10 +638,8 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         loadingTextProps?: Partial<import("../index.cjs").TextProps> | undefined;
         startIconName?: import("@metamask/design-system-shared").IconName | undefined;
         startIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
-        startAccessory?: React.ReactNode;
         endIconName?: import("@metamask/design-system-shared").IconName | undefined;
         endIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
-        endAccessory?: React.ReactNode;
         loadingIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
         isDanger?: boolean | undefined;
         isInverse?: boolean | undefined;

package/dist/components/BannerAlert/BannerAlert.d.mts CHANGED Viewed

@@ -304,6 +304,8 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        startAccessory?: React.ReactNode;
+        endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../index.mjs").TextProps> | undefined;
@@ -313,10 +315,8 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         loadingTextProps?: Partial<import("../index.mjs").TextProps> | undefined;
         startIconName?: import("@metamask/design-system-shared").IconName | undefined;
         startIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
-        startAccessory?: React.ReactNode;
         endIconName?: import("@metamask/design-system-shared").IconName | undefined;
         endIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
-        endAccessory?: React.ReactNode;
         loadingIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
         isDanger?: boolean | undefined;
         isInverse?: boolean | undefined;
@@ -627,6 +627,8 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        startAccessory?: React.ReactNode;
+        endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../index.mjs").TextProps> | undefined;
@@ -636,10 +638,8 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         loadingTextProps?: Partial<import("../index.mjs").TextProps> | undefined;
         startIconName?: import("@metamask/design-system-shared").IconName | undefined;
         startIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
-        startAccessory?: React.ReactNode;
         endIconName?: import("@metamask/design-system-shared").IconName | undefined;
         endIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
-        endAccessory?: React.ReactNode;
         loadingIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
         isDanger?: boolean | undefined;
         isInverse?: boolean | undefined;

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

@@ -39,16 +39,17 @@ exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description,
     const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnClick);
     const isActionButtonLayoutEnd = actionButtonLayout === design_system_shared_1.BannerBaseActionButtonLayout.End;
+    const hasActionButtonBelow = shouldShowActionButton && !isActionButtonLayoutEnd;
     const actionButton = shouldShowActionButton ? (react_1.default.createElement(Button_1.Button, { size: design_system_shared_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps, variant: design_system_shared_1.ButtonVariant.Secondary }, actionButtonLabel)) : null;
-    return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Start, gap: 4, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundDefault, paddingVertical: 3, paddingHorizontal: 4, className: (0, tw_merge_1.twMerge)('rounded-xl', className), ...props },
+    return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Start, gap: 4, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundDefault, paddingTop: 3, paddingBottom: hasActionButtonBelow ? 4 : 3, paddingLeft: 4, paddingRight: shouldShowCloseButton ? 2 : 4, className: (0, tw_merge_1.twMerge)('rounded-xl', className), ...props },
         startAccessory,
         react_1.default.createElement(Box_1.Box, { className: "min-w-0 flex-1" },
             hasContent(title) &&
                 (isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, fontWeight: design_system_shared_1.FontWeight.Medium, ...titleProps }, title)) : (title)),
-            hasContent(description) && (react_1.default.createElement(Box_1.Box, null, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
+            hasContent(description) && (react_1.default.createElement(Box_1.Box, { className: hasContent(title) ? 'mt-0.5' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
             hasContent(children) &&
                 (isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
-            shouldShowActionButton && !isActionButtonLayoutEnd && (react_1.default.createElement(Box_1.Box, { className: "mt-2" }, actionButton))),
+            hasActionButtonBelow && react_1.default.createElement(Box_1.Box, { className: "mt-2" }, actionButton)),
         shouldShowActionButton && isActionButtonLayoutEnd && actionButton,
         shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('-mt-1', closeButtonClassName), iconName: design_system_shared_1.IconName.Close, size: design_system_shared_1.ButtonIconSize.Md, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAWwC;AACxC,+CAA0C;AAE1C,uDAA+C;AAC/C,0CAA6B;AAC7B,gDAAmC;AACnC,wDAA2C;AAC3C,4CAA+B;AAI/B,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,UAAU,GAAG,CAAC,OAAwB,EAAE,EAAE,CAC9C,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC;AAE/B,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,GAAG,mDAA4B,CAAC,KAAK,EACvD,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,yBAAyB,GAAG,iBAAiB,IAAI,EAAE,CAAC;IAE1D,MAAM,EACJ,SAAS,EAAE,oBAAoB,GAAG,cAAc,EAChD,SAAS,EAAE,oBAAoB,EAC/B,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,uBAAuB,GAC3B,kBAAkB,KAAK,mDAA4B,CAAC,GAAG,CAAC;~~IAE1D~~,MAAM,YAAY,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAC5C,8BAAC,eAAM,IACL,IAAI,EAAE,iCAAU,CAAC,EAAE,EACnB,OAAO,EAAE,mBAAmB,KACxB,yBAAyB,EAC7B,OAAO,EAAE,oCAAa,CAAC,SAAS,IAE/B,iBAAiB,CACX,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,8BAAC,SAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,uCAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,oCAAa,CAAC,KAAK,EAC/B,GAAG,EAAE,CAAC,EACN,eAAe,EAAE,yCAAkB,CAAC,iBAAiB,EACrD,~~eAAe~~,EAAE,CAAC,~~EAClB~~,~~iBAAiB~~,EAAE,CAAC,~~EACpB~~,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC,KACvC,KAAK;QAER,cAAc;QAEf,8BAAC,SAAG,IAAC,SAAS,EAAC,gBAAgB;YAC5B,UAAU,CAAC,KAAK,CAAC;gBAChB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,8BAAC,WAAI,IACH,OAAO,EAAE,kCAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM,KACzB,UAAU,IAEb,KAAK,CACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC;YAEH,UAAU,CAAC,WAAW,CAAC,IAAI,CAC1B,8BAAC,SAAG,~~QACD~~,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC5B,8BAAC,WAAI,IAAC,OAAO,EAAE,kCAAW,CAAC,MAAM,KAAM,gBAAgB,IACpD,WAAW,CACP,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CACG,CACP;YAEA,UAAU,CAAC,QAAQ,CAAC;gBACnB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzB,8BAAC,WAAI,IAAC,OAAO,EAAE,kCAAW,CAAC,MAAM,KAAM,oBAAoB,IACxD,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;YAEH,~~sBAAsB~~,IAAI,~~CAAC,uBAAuB,IAAI,CACrD,~~8BAAC,SAAG,IAAC,SAAS,EAAC,MAAM,IAAE,YAAY,CAAO,~~CAC3C,CACG~~;QAEL,sBAAsB,IAAI,uBAAuB,IAAI,YAAY;QAEjE,qBAAqB,IAAI,CACxB,8BAAC,uBAAU,IACT,SAAS,EAAE,IAAA,kBAAO,EAAC,OAAO,EAAE,oBAAoB,CAAC,EACjD,QAAQ,EAAE,+BAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,qCAAc,CAAC,EAAE,EACvB,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAO,KACZ,wBAAwB,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string \| number =>\n typeof content === 'string' \|\| typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n actionButtonLayout = BannerBaseActionButtonLayout.Below,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n ~~paddingVertical~~={3}\n ~~paddingHorizontal~~={4}\n className={twMerge('rounded-xl', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {~~shouldShowActionButton~~ && ~~!isActionButtonLayoutEnd && (\n~~ <Box className=\"mt-2\">{actionButton}</Box~~>\n )~~}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('-mt-1', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
1	+ {"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string \| number =>\n typeof content === 'string' \|\| typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n actionButtonLayout = BannerBaseActionButtonLayout.Below,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n const hasActionButtonBelow =\n shouldShowActionButton && !isActionButtonLayoutEnd;\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n paddingTop={3}\n paddingBottom={hasActionButtonBelow ? 4 : 3}\n paddingLeft={4}\n paddingRight={shouldShowCloseButton ? 2 : 4}\n className={twMerge('rounded-xl', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-0.5' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {hasActionButtonBelow && <Box className=\"mt-2\">{actionButton}</Box>}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('-mt-1', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}

package/dist/components/BannerBase/BannerBase.d.cts CHANGED Viewed

@@ -302,6 +302,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        startAccessory?: React.ReactNode;
+        endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
@@ -311,10 +313,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         loadingTextProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         startIconName?: IconName | undefined;
         startIconProps?: Partial<import("../index.cjs").IconProps> | undefined;
-        startAccessory?: React.ReactNode;
         endIconName?: IconName | undefined;
         endIconProps?: Partial<import("../index.cjs").IconProps> | undefined;
-        endAccessory?: React.ReactNode;
         loadingIconProps?: Partial<import("../index.cjs").IconProps> | undefined;
         isDanger?: boolean | undefined;
         isInverse?: boolean | undefined;
@@ -621,6 +621,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        startAccessory?: React.ReactNode;
+        endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
@@ -630,10 +632,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         loadingTextProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         startIconName?: IconName | undefined;
         startIconProps?: Partial<import("../index.cjs").IconProps> | undefined;
-        startAccessory?: React.ReactNode;
         endIconName?: IconName | undefined;
         endIconProps?: Partial<import("../index.cjs").IconProps> | undefined;
-        endAccessory?: React.ReactNode;
         loadingIconProps?: Partial<import("../index.cjs").IconProps> | undefined;
         isDanger?: boolean | undefined;
         isInverse?: boolean | undefined;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~iDAkHtB~~,CAAC"}
1	+ {"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAoHtB,CAAC"}

package/dist/components/BannerBase/BannerBase.d.mts CHANGED Viewed

@@ -302,6 +302,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        startAccessory?: React.ReactNode;
+        endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
@@ -311,10 +313,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         loadingTextProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         startIconName?: IconName | undefined;
         startIconProps?: Partial<import("../index.mjs").IconProps> | undefined;
-        startAccessory?: React.ReactNode;
         endIconName?: IconName | undefined;
         endIconProps?: Partial<import("../index.mjs").IconProps> | undefined;
-        endAccessory?: React.ReactNode;
         loadingIconProps?: Partial<import("../index.mjs").IconProps> | undefined;
         isDanger?: boolean | undefined;
         isInverse?: boolean | undefined;
@@ -621,6 +621,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        startAccessory?: React.ReactNode;
+        endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
@@ -630,10 +632,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         loadingTextProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         startIconName?: IconName | undefined;
         startIconProps?: Partial<import("../index.mjs").IconProps> | undefined;
-        startAccessory?: React.ReactNode;
         endIconName?: IconName | undefined;
         endIconProps?: Partial<import("../index.mjs").IconProps> | undefined;
-        endAccessory?: React.ReactNode;
         loadingIconProps?: Partial<import("../index.mjs").IconProps> | undefined;
         isDanger?: boolean | undefined;
         isInverse?: boolean | undefined;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~iDAkHtB~~,CAAC"}
1	+ {"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAET,uCAAuC;AACxC,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAoHtB,CAAC"}

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

@@ -20,16 +20,17 @@ export const BannerBase = forwardRef(({ title, titleProps, description, descript
     const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnClick);
     const isActionButtonLayoutEnd = actionButtonLayout === BannerBaseActionButtonLayout.End;
+    const hasActionButtonBelow = shouldShowActionButton && !isActionButtonLayoutEnd;
     const actionButton = shouldShowActionButton ? (React.createElement(Button, { size: ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps, variant: ButtonVariant.Secondary }, actionButtonLabel)) : null;
-    return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Start, gap: 4, backgroundColor: BoxBackgroundColor.BackgroundDefault, paddingVertical: 3, paddingHorizontal: 4, className: twMerge('rounded-xl', className), ...props },
+    return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Start, gap: 4, backgroundColor: BoxBackgroundColor.BackgroundDefault, paddingTop: 3, paddingBottom: hasActionButtonBelow ? 4 : 3, paddingLeft: 4, paddingRight: shouldShowCloseButton ? 2 : 4, className: twMerge('rounded-xl', className), ...props },
         startAccessory,
         React.createElement(Box, { className: "min-w-0 flex-1" },
             hasContent(title) &&
                 (isTextContent(title) ? (React.createElement(Text, { variant: TextVariant.BodyMd, fontWeight: FontWeight.Medium, ...titleProps }, title)) : (title)),
-            hasContent(description) && (React.createElement(Box, null, isTextContent(description) ? (React.createElement(Text, { variant: TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
+            hasContent(description) && (React.createElement(Box, { className: hasContent(title) ? 'mt-0.5' : undefined }, isTextContent(description) ? (React.createElement(Text, { variant: TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
             hasContent(children) &&
                 (isTextContent(children) ? (React.createElement(Text, { variant: TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
-            shouldShowActionButton && !isActionButtonLayoutEnd && (React.createElement(Box, { className: "mt-2" }, actionButton))),
+            hasActionButtonBelow && React.createElement(Box, { className: "mt-2" }, actionButton)),
         shouldShowActionButton && isActionButtonLayoutEnd && actionButton,
         shouldShowCloseButton && (React.createElement(ButtonIcon, { className: twMerge('-mt-1', closeButtonClassName), iconName: IconName.Close, size: ButtonIconSize.Md, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,4BAA4B,EAC5B,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,aAAa,EACb,UAAU,EACV,QAAQ,EACR,WAAW,EACZ,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,UAAU,GAAG,CAAC,OAAwB,EAAE,EAAE,CAC9C,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,GAAG,4BAA4B,CAAC,KAAK,EACvD,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,yBAAyB,GAAG,iBAAiB,IAAI,EAAE,CAAC;IAE1D,MAAM,EACJ,SAAS,EAAE,oBAAoB,GAAG,cAAc,EAChD,SAAS,EAAE,oBAAoB,EAC/B,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,uBAAuB,GAC3B,kBAAkB,KAAK,4BAA4B,CAAC,GAAG,CAAC;~~IAE1D~~,MAAM,YAAY,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAC5C,oBAAC,MAAM,IACL,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,OAAO,EAAE,mBAAmB,KACxB,yBAAyB,EAC7B,OAAO,EAAE,aAAa,CAAC,SAAS,IAE/B,iBAAiB,CACX,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,gBAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,aAAa,CAAC,KAAK,EAC/B,GAAG,EAAE,CAAC,EACN,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,~~eAAe~~,EAAE,CAAC,~~EAClB~~,~~iBAAiB~~,EAAE,CAAC,~~EACpB~~,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,KACvC,KAAK;QAER,cAAc;QAEf,oBAAC,GAAG,IAAC,SAAS,EAAC,gBAAgB;YAC5B,UAAU,CAAC,KAAK,CAAC;gBAChB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,KACzB,UAAU,IAEb,KAAK,CACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC;YAEH,UAAU,CAAC,WAAW,CAAC,IAAI,CAC1B,oBAAC,GAAG,~~QACD~~,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC5B,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,KAAM,gBAAgB,IACpD,WAAW,CACP,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CACG,CACP;YAEA,UAAU,CAAC,QAAQ,CAAC;gBACnB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzB,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,KAAM,oBAAoB,IACxD,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;YAEH,~~sBAAsB~~,IAAI,~~CAAC,uBAAuB,IAAI,CACrD,~~oBAAC,GAAG,IAAC,SAAS,EAAC,MAAM,IAAE,YAAY,CAAO,~~CAC3C,CACG~~;QAEL,sBAAsB,IAAI,uBAAuB,IAAI,YAAY;QAEjE,qBAAqB,IAAI,CACxB,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,oBAAoB,CAAC,EACjD,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,cAAc,CAAC,EAAE,EACvB,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAO,KACZ,wBAAwB,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string \| number =>\n typeof content === 'string' \|\| typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n actionButtonLayout = BannerBaseActionButtonLayout.Below,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n ~~paddingVertical~~={3}\n ~~paddingHorizontal~~={4}\n className={twMerge('rounded-xl', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {~~shouldShowActionButton~~ && ~~!isActionButtonLayoutEnd && (\n~~ <Box className=\"mt-2\">{actionButton}</Box~~>\n )~~}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('-mt-1', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
1	+ {"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BannerBaseActionButtonLayout,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string \| number =>\n typeof content === 'string' \|\| typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n actionButtonLayout = BannerBaseActionButtonLayout.Below,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n const isActionButtonLayoutEnd =\n actionButtonLayout === BannerBaseActionButtonLayout.End;\n const hasActionButtonBelow =\n shouldShowActionButton && !isActionButtonLayoutEnd;\n\n const actionButton = shouldShowActionButton ? (\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n ) : null;\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n paddingTop={3}\n paddingBottom={hasActionButtonBelow ? 4 : 3}\n paddingLeft={4}\n paddingRight={shouldShowCloseButton ? 2 : 4}\n className={twMerge('rounded-xl', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-0.5' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {hasActionButtonBelow && <Box className=\"mt-2\">{actionButton}</Box>}\n </Box>\n\n {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('-mt-1', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}

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

@@ -6,8 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpText = void 0;
 const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importDefault(require("react"));
+const Box_1 = require("../Box/index.cjs");
+const IconAlert_1 = require("../IconAlert/index.cjs");
 const Text_1 = require("../Text/index.cjs");
 const HelpText_constants_1 = require("./HelpText.constants.cjs");
-const HelpText = ({ severity, color = design_system_shared_1.TextColor.TextDefault, className, children, ...props }) => (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, color: severity ? HelpText_constants_1.MAP_HELPTEXT_SEVERITY_COLOR[severity] : color, className: className, ...props }, children));
+const HelpText = ({ severity, showIcon = false, color = design_system_shared_1.TextColor.TextDefault, className, children, ...props }) => {
+    const textColor = severity ? HelpText_constants_1.MAP_HELPTEXT_SEVERITY_COLOR[severity] : color;
+    if (!(showIcon && severity)) {
+        return (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, color: textColor, className: className, ...props }, children));
+    }
+    return (react_1.default.createElement(Box_1.Box, { flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Center, gap: 1, className: className },
+        react_1.default.createElement(IconAlert_1.IconAlert, { severity: severity, size: design_system_shared_1.IconSize.Sm, "data-testid": "help-text-icon" }),
+        react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, color: textColor, ...props }, children)));
+};
 exports.HelpText = HelpText;
 //# sourceMappingURL=HelpText.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HelpText.cjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":";;;;;;AAAA,~~yEAAwE~~;~~AACxE~~,kDAA0B;AAE1B,4CAA+B;AAE/B,iEAAmE;AAG5D,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,KAAK,GAAG,gCAAS,CAAC,WAAW,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,~~CACJ~~,8BAAC,WAAI,IACH,OAAO,EAAE,kCAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,~~gDAA2B~~,CAAC,QAAQ,~~CAAC~~,~~CAAC~~,CAAC,CAAC,~~KAAK~~,~~EAC/D~~,~~SAAS~~,EAAE,SAAS,~~KAChB~~,KAAK,~~IAER~~,QAAQ,CACJ,~~CACR~~,CAAC;~~AAfW~~,QAAA,QAAQ,~~YAenB~~","sourcesContent":["import { TextColor, TextVariant } from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Text } from '../Text';\n\nimport { MAP_HELPTEXT_SEVERITY_COLOR } from './HelpText.constants';\nimport type { HelpTextProps } from './HelpText.types';\n\nexport const HelpText: React.FC<HelpTextProps> = ({\n severity,\n color = TextColor.TextDefault,\n className,\n children,\n ...props\n}) => (\n <Text\n variant={TextVariant.BodySm}\n color={~~severity ? MAP_HELPTEXT_SEVERITY_COLOR[severity] : color~~}\n className={className}\n {...props}\n >\n {children}\n </Text>\n);\n"]}
1	+ {"version":3,"file":"HelpText.cjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAMwC;AACxC,kDAA0B;AAE1B,0CAA6B;AAC7B,sDAAyC;AACzC,4CAA+B;AAE/B,iEAAmE;AAG5D,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,gCAAS,CAAC,WAAW,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,gDAA2B,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3E,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,EAAE;QAC3B,OAAO,CACL,8BAAC,WAAI,IACH,OAAO,EAAE,kCAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,SAAS,KAChB,KAAK,IAER,QAAQ,CACJ,CACR,CAAC;KACH;IAED,OAAO,CACL,8BAAC,SAAG,IACF,aAAa,EAAE,uCAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,oCAAa,CAAC,MAAM,EAChC,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,SAAS;QAEpB,8BAAC,qBAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,+BAAQ,CAAC,EAAE,iBACL,gBAAgB,GAC5B;QACF,8BAAC,WAAI,IAAC,OAAO,EAAE,kCAAW,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,KAAM,KAAK,IAC3D,QAAQ,CACJ,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,QAAQ,YAwCnB","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n IconSize,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { IconAlert } from '../IconAlert';\nimport { Text } from '../Text';\n\nimport { MAP_HELPTEXT_SEVERITY_COLOR } from './HelpText.constants';\nimport type { HelpTextProps } from './HelpText.types';\n\nexport const HelpText: React.FC<HelpTextProps> = ({\n severity,\n showIcon = false,\n color = TextColor.TextDefault,\n className,\n children,\n ...props\n}) => {\n const textColor = severity ? MAP_HELPTEXT_SEVERITY_COLOR[severity] : color;\n\n if (!(showIcon && severity)) {\n return (\n <Text\n variant={TextVariant.BodySm}\n color={textColor}\n className={className}\n {...props}\n >\n {children}\n </Text>\n );\n }\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n gap={1}\n className={className}\n >\n <IconAlert\n severity={severity}\n size={IconSize.Sm}\n data-testid=\"help-text-icon\"\n />\n <Text variant={TextVariant.BodySm} color={textColor} {...props}>\n {children}\n </Text>\n </Box>\n );\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HelpText.d.cts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,cAAc;~~AAK1B~~,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,~~CAe5C~~,CAAC"}
1	+ {"version":3,"file":"HelpText.d.cts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwC5C,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HelpText.d.mts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,cAAc;~~AAK1B~~,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,~~CAe5C~~,CAAC"}
1	+ {"version":3,"file":"HelpText.d.mts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwC5C,CAAC"}

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

@@ -4,10 +4,20 @@ function $importDefault(module) {
     }
     return module;
 }
-import { TextColor, TextVariant } from "@metamask/design-system-shared";
+import { BoxAlignItems, BoxFlexDirection, IconSize, TextColor, TextVariant } from "@metamask/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
+import { Box } from "../Box/index.mjs";
+import { IconAlert } from "../IconAlert/index.mjs";
 import { Text } from "../Text/index.mjs";
 import { MAP_HELPTEXT_SEVERITY_COLOR } from "./HelpText.constants.mjs";
-export const HelpText = ({ severity, color = TextColor.TextDefault, className, children, ...props }) => (React.createElement(Text, { variant: TextVariant.BodySm, color: severity ? MAP_HELPTEXT_SEVERITY_COLOR[severity] : color, className: className, ...props }, children));
+export const HelpText = ({ severity, showIcon = false, color = TextColor.TextDefault, className, children, ...props }) => {
+    const textColor = severity ? MAP_HELPTEXT_SEVERITY_COLOR[severity] : color;
+    if (!(showIcon && severity)) {
+        return (React.createElement(Text, { variant: TextVariant.BodySm, color: textColor, className: className, ...props }, children));
+    }
+    return (React.createElement(Box, { flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Center, gap: 1, className: className },
+        React.createElement(IconAlert, { severity: severity, size: IconSize.Sm, "data-testid": "help-text-icon" }),
+        React.createElement(Text, { variant: TextVariant.BodySm, color: textColor, ...props }, children)));
+};
 //# sourceMappingURL=HelpText.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HelpText.mjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,~~EAAE~~,SAAS,~~EAAE~~,WAAW,~~EAAE~~,uCAAuC;~~AACxE~~,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,2BAA2B,EAAE,iCAA6B;AAGnE,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,~~CACJ~~,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,~~2BAA2B~~,CAAC,QAAQ,~~CAAC~~,~~CAAC~~,CAAC,CAAC,~~KAAK~~,~~EAC/D~~,~~SAAS~~,EAAE,SAAS,~~KAChB~~,KAAK,~~IAER~~,QAAQ,CACJ,~~CACR~~,CAAC","sourcesContent":["import { TextColor, TextVariant } from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Text } from '../Text';\n\nimport { MAP_HELPTEXT_SEVERITY_COLOR } from './HelpText.constants';\nimport type { HelpTextProps } from './HelpText.types';\n\nexport const HelpText: React.FC<HelpTextProps> = ({\n severity,\n color = TextColor.TextDefault,\n className,\n children,\n ...props\n}) => (\n <Text\n variant={TextVariant.BodySm}\n color={~~severity ? MAP_HELPTEXT_SEVERITY_COLOR[severity] : color~~}\n className={className}\n {...props}\n >\n {children}\n </Text>\n);\n"]}
1	+ {"version":3,"file":"HelpText.mjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,2BAA2B,EAAE,iCAA6B;AAGnE,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3E,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,EAAE;QAC3B,OAAO,CACL,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,SAAS,KAChB,KAAK,IAER,QAAQ,CACJ,CACR,CAAC;KACH;IAED,OAAO,CACL,oBAAC,GAAG,IACF,aAAa,EAAE,gBAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,aAAa,CAAC,MAAM,EAChC,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,SAAS;QAEpB,oBAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,QAAQ,CAAC,EAAE,iBACL,gBAAgB,GAC5B;QACF,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,KAAM,KAAK,IAC3D,QAAQ,CACJ,CACH,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n IconSize,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { IconAlert } from '../IconAlert';\nimport { Text } from '../Text';\n\nimport { MAP_HELPTEXT_SEVERITY_COLOR } from './HelpText.constants';\nimport type { HelpTextProps } from './HelpText.types';\n\nexport const HelpText: React.FC<HelpTextProps> = ({\n severity,\n showIcon = false,\n color = TextColor.TextDefault,\n className,\n children,\n ...props\n}) => {\n const textColor = severity ? MAP_HELPTEXT_SEVERITY_COLOR[severity] : color;\n\n if (!(showIcon && severity)) {\n return (\n <Text\n variant={TextVariant.BodySm}\n color={textColor}\n className={className}\n {...props}\n >\n {children}\n </Text>\n );\n }\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n gap={1}\n className={className}\n >\n <IconAlert\n severity={severity}\n size={IconSize.Sm}\n data-testid=\"help-text-icon\"\n />\n <Text variant={TextVariant.BodySm} color={textColor} {...props}>\n {children}\n </Text>\n </Box>\n );\n};\n"]}

package/dist/components/IconAlert/IconAlert.cjs ADDED Viewed

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconAlert = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../Icon/index.cjs");
+const IconAlert_constants_1 = require("./IconAlert.constants.cjs");
+const IconAlert = ({ severity, ...props }) => {
+    const { name, color } = IconAlert_constants_1.ICON_ALERT_SEVERITY_MAP[severity];
+    return react_1.default.createElement(Icon_1.Icon, { ...props, color: color, name: name });
+};
+exports.IconAlert = IconAlert;
+exports.IconAlert.displayName = 'IconAlert';
+//# sourceMappingURL=IconAlert.cjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"IconAlert.cjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4CAA+B;AAE/B,mEAAgE;AAGzD,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE;IAClE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,6CAAuB,CAAC,QAAQ,CAAC,CAAC;IAC1D,OAAO,8BAAC,WAAI,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AACvD,CAAC,CAAC;AAHW,QAAA,SAAS,aAGpB;AAEF,iBAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import React from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { ICON_ALERT_SEVERITY_MAP } from './IconAlert.constants';\nimport type { IconAlertProps } from './IconAlert.types';\n\nexport const IconAlert = ({ severity, ...props }: IconAlertProps) => {\n const { name, color } = ICON_ALERT_SEVERITY_MAP[severity];\n return <Icon {...props} color={color} name={name} />;\n};\n\nIconAlert.displayName = 'IconAlert';\n"]}

package/dist/components/IconAlert/IconAlert.constants.cjs ADDED Viewed

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_ALERT_SEVERITY_MAP = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+exports.ICON_ALERT_SEVERITY_MAP = {
+    [design_system_shared_1.IconAlertSeverity.Info]: {
+        name: design_system_shared_1.IconName.Info,
+        color: design_system_shared_1.IconColor.PrimaryDefault,
+    },
+    [design_system_shared_1.IconAlertSeverity.Success]: {
+        name: design_system_shared_1.IconName.Confirmation,
+        color: design_system_shared_1.IconColor.SuccessDefault,
+    },
+    [design_system_shared_1.IconAlertSeverity.Warning]: {
+        name: design_system_shared_1.IconName.Danger,
+        color: design_system_shared_1.IconColor.WarningDefault,
+    },
+    [design_system_shared_1.IconAlertSeverity.Danger]: {
+        name: design_system_shared_1.IconName.Error,
+        color: design_system_shared_1.IconColor.ErrorDefault,
+    },
+};
+//# sourceMappingURL=IconAlert.constants.cjs.map

package/dist/components/IconAlert/IconAlert.constants.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"IconAlert.constants.cjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.constants.ts"],"names":[],"mappings":";;;AAAA,yEAIwC;AAE3B,QAAA,uBAAuB,GAGhC;IACF,CAAC,wCAAiB,CAAC,IAAI,CAAC,EAAE;QACxB,IAAI,EAAE,+BAAQ,CAAC,IAAI;QACnB,KAAK,EAAE,gCAAS,CAAC,cAAc;KAChC;IACD,CAAC,wCAAiB,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,EAAE,+BAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,gCAAS,CAAC,cAAc;KAChC;IACD,CAAC,wCAAiB,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,EAAE,+BAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,gCAAS,CAAC,cAAc;KAChC;IACD,CAAC,wCAAiB,CAAC,MAAM,CAAC,EAAE;QAC1B,IAAI,EAAE,+BAAQ,CAAC,KAAK;QACpB,KAAK,EAAE,gCAAS,CAAC,YAAY;KAC9B;CACF,CAAC","sourcesContent":["import {\n IconAlertSeverity,\n IconColor,\n IconName,\n} from '@metamask/design-system-shared';\n\nexport const ICON_ALERT_SEVERITY_MAP: Record<\n IconAlertSeverity,\n { name: IconName; color: IconColor }\n> = {\n [IconAlertSeverity.Info]: {\n name: IconName.Info,\n color: IconColor.PrimaryDefault,\n },\n [IconAlertSeverity.Success]: {\n name: IconName.Confirmation,\n color: IconColor.SuccessDefault,\n },\n [IconAlertSeverity.Warning]: {\n name: IconName.Danger,\n color: IconColor.WarningDefault,\n },\n [IconAlertSeverity.Danger]: {\n name: IconName.Error,\n color: IconColor.ErrorDefault,\n },\n};\n"]}

package/dist/components/IconAlert/IconAlert.constants.d.cts ADDED Viewed

@@ -0,0 +1,6 @@
+import { IconAlertSeverity, IconColor, IconName } from "@metamask/design-system-shared";
+export declare const ICON_ALERT_SEVERITY_MAP: Record<IconAlertSeverity, {
+    name: IconName;
+    color: IconColor;
+}>;
+//# sourceMappingURL=IconAlert.constants.d.cts.map

package/dist/components/IconAlert/IconAlert.constants.d.cts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"IconAlert.constants.d.cts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACT,uCAAuC;AAExC,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,iBAAiB,EACjB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAkBrC,CAAC"}

package/dist/components/IconAlert/IconAlert.constants.d.mts ADDED Viewed

@@ -0,0 +1,6 @@
+import { IconAlertSeverity, IconColor, IconName } from "@metamask/design-system-shared";
+export declare const ICON_ALERT_SEVERITY_MAP: Record<IconAlertSeverity, {
+    name: IconName;
+    color: IconColor;
+}>;
+//# sourceMappingURL=IconAlert.constants.d.mts.map

package/dist/components/IconAlert/IconAlert.constants.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"IconAlert.constants.d.mts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACT,uCAAuC;AAExC,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,iBAAiB,EACjB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAkBrC,CAAC"}

package/dist/components/IconAlert/IconAlert.constants.mjs ADDED Viewed

@@ -0,0 +1,20 @@
+import { IconAlertSeverity, IconColor, IconName } from "@metamask/design-system-shared";
+export const ICON_ALERT_SEVERITY_MAP = {
+    [IconAlertSeverity.Info]: {
+        name: IconName.Info,
+        color: IconColor.PrimaryDefault,
+    },
+    [IconAlertSeverity.Success]: {
+        name: IconName.Confirmation,
+        color: IconColor.SuccessDefault,
+    },
+    [IconAlertSeverity.Warning]: {
+        name: IconName.Danger,
+        color: IconColor.WarningDefault,
+    },
+    [IconAlertSeverity.Danger]: {
+        name: IconName.Error,
+        color: IconColor.ErrorDefault,
+    },
+};
+//# sourceMappingURL=IconAlert.constants.mjs.map

package/dist/components/IconAlert/IconAlert.constants.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"IconAlert.constants.mjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACT,uCAAuC;AAExC,MAAM,CAAC,MAAM,uBAAuB,GAGhC;IACF,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE;QACxB,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,EAAE,QAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,EAAE,QAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE;QAC1B,IAAI,EAAE,QAAQ,CAAC,KAAK;QACpB,KAAK,EAAE,SAAS,CAAC,YAAY;KAC9B;CACF,CAAC","sourcesContent":["import {\n IconAlertSeverity,\n IconColor,\n IconName,\n} from '@metamask/design-system-shared';\n\nexport const ICON_ALERT_SEVERITY_MAP: Record<\n IconAlertSeverity,\n { name: IconName; color: IconColor }\n> = {\n [IconAlertSeverity.Info]: {\n name: IconName.Info,\n color: IconColor.PrimaryDefault,\n },\n [IconAlertSeverity.Success]: {\n name: IconName.Confirmation,\n color: IconColor.SuccessDefault,\n },\n [IconAlertSeverity.Warning]: {\n name: IconName.Danger,\n color: IconColor.WarningDefault,\n },\n [IconAlertSeverity.Danger]: {\n name: IconName.Error,\n color: IconColor.ErrorDefault,\n },\n};\n"]}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { IconAlertProps } from "./IconAlert.types.cjs";
+export declare const IconAlert: {
+    ({ severity, ...props }: IconAlertProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=IconAlert.d.cts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"IconAlert.d.cts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS;6BAA4B,cAAc;;CAG/D,CAAC"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { IconAlertProps } from "./IconAlert.types.mjs";
+export declare const IconAlert: {
+    ({ severity, ...props }: IconAlertProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=IconAlert.d.mts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"IconAlert.d.mts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS;6BAA4B,cAAc;;CAG/D,CAAC"}

package/dist/components/IconAlert/IconAlert.mjs ADDED Viewed

@@ -0,0 +1,16 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { Icon } from "../Icon/index.mjs";
+import { ICON_ALERT_SEVERITY_MAP } from "./IconAlert.constants.mjs";
+export const IconAlert = ({ severity, ...props }) => {
+    const { name, color } = ICON_ALERT_SEVERITY_MAP[severity];
+    return React.createElement(Icon, { ...props, color: color, name: name });
+};
+IconAlert.displayName = 'IconAlert';
+//# sourceMappingURL=IconAlert.mjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"IconAlert.mjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,kCAA8B;AAGhE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE;IAClE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC1D,OAAO,oBAAC,IAAI,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AACvD,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import React from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { ICON_ALERT_SEVERITY_MAP } from './IconAlert.constants';\nimport type { IconAlertProps } from './IconAlert.types';\n\nexport const IconAlert = ({ severity, ...props }: IconAlertProps) => {\n const { name, color } = ICON_ALERT_SEVERITY_MAP[severity];\n return <Icon {...props} color={color} name={name} />;\n};\n\nIconAlert.displayName = 'IconAlert';\n"]}

package/dist/components/IconAlert/IconAlert.types.cjs ADDED Viewed

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"IconAlert.types.cjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { IconAlertPropsShared } from '@metamask/design-system-shared';\n\nimport type { IconProps } from '../Icon';\n\nexport type IconAlertProps = IconAlertPropsShared &\n Omit<IconProps, 'name' | 'color' | keyof IconAlertPropsShared>;\n"]}

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

@@ -0,0 +1,4 @@
+import type { IconAlertPropsShared } from "@metamask/design-system-shared";
+import type { IconProps } from "../Icon/index.cjs";
+export type IconAlertProps = IconAlertPropsShared & Omit<IconProps, 'name' | 'color' | keyof IconAlertPropsShared>;
+//# sourceMappingURL=IconAlert.types.d.cts.map