@metamask-previews/design-system-react 0.20.0-preview.f515a62 → 0.23.1-preview.047f96c

package/dist/components/BannerAlert/BannerAlert.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}
+{"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}

package/dist/components/BannerBase/BannerBase.cjs

@@ -35,8 +35,8 @@ const isTextContent = (content) => typeof content === 'string' || typeof content
 const hasContent = (content) => content !== null && content !== undefined;
 exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnClick, actionButtonProps, startAccessory, onClose, closeButtonProps, className, ...props }, ref) => {
     const resolvedActionButtonProps = actionButtonProps ?? {};
-    const { ariaLabel: closeButtonAriaLabel = 'Close banner', onClick: closeButtonPropsOnClick, className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
-    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);
+    const { ariaLabel: closeButtonAriaLabel = 'Close banner', className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
+    const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnClick);
     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: 2, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundDefault, padding: 3, className: (0, tw_merge_1.twMerge)('rounded-sm', className), ...props },
         startAccessory,
@@ -48,7 +48,7 @@ exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description,
                 (isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
             shouldShowActionButton && (react_1.default.createElement(Box_1.Box, { className: "mt-4" },
                 react_1.default.createElement(Button_1.Button, { size: design_system_shared_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
-        shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName: design_system_shared_1.IconName.Close, size: design_system_shared_1.ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose ?? closeButtonPropsOnClick, ...resolvedCloseButtonProps }))));
+        shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName: design_system_shared_1.IconName.Close, size: design_system_shared_1.ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
 });
 exports.BannerBase.displayName = 'BannerBase';
 //# sourceMappingURL=BannerBase.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFASiD;AACjD,+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,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,OAAO,EAAE,uBAAuB,EAChC,SAAS,EAAE,oBAAoB,EAC/B,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,IAAI,gBAAgB,CAAC,CAAC;IACnE,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE5D,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,OAAO,EAAE,CAAC,EACV,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,IAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnD,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,CACzB,8BAAC,SAAG,IAAC,SAAS,EAAC,MAAM;gBACnB,8BAAC,eAAM,IACL,IAAI,EAAE,iCAAU,CAAC,EAAE,EACnB,OAAO,EAAE,mBAAmB,KACxB,yBAAyB,IAE5B,iBAAiB,CACX,CACL,CACP,CACG;QAEL,qBAAqB,IAAI,CACxB,8BAAC,uBAAU,IACT,SAAS,EAAE,IAAA,kBAAO,EAAC,iBAAiB,EAAE,oBAAoB,CAAC,EAC3D,QAAQ,EAAE,+BAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,qCAAc,CAAC,EAAE,EACvB,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAO,IAAI,uBAAuB,KACvC,wBAAwB,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  IconName,\n  TextVariant,\n} from '@metamask-previews/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      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      onClick: closeButtonPropsOnClick,\n      className: closeButtonClassName,\n      ...resolvedCloseButtonProps\n    } = closeButtonProps ?? {};\n\n    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n    const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Start}\n        gap={2}\n        backgroundColor={BoxBackgroundColor.BackgroundDefault}\n        padding={3}\n        className={twMerge('rounded-sm', 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-1' : 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          {shouldShowActionButton && (\n            <Box className=\"mt-4\">\n              <Button\n                size={ButtonSize.Md}\n                onClick={actionButtonOnClick}\n                {...resolvedActionButtonProps}\n              >\n                {actionButtonLabel}\n              </Button>\n            </Box>\n          )}\n        </Box>\n\n        {shouldShowCloseButton && (\n          <ButtonIcon\n            className={twMerge('ml-3 self-start', closeButtonClassName)}\n            iconName={IconName.Close}\n            size={ButtonIconSize.Sm}\n            ariaLabel={closeButtonAriaLabel}\n            onClick={onClose ?? closeButtonPropsOnClick}\n            {...resolvedCloseButtonProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
+{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  IconName,\n  TextVariant,\n} from '@metamask-previews/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      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\n    return (\n      <Box\n        ref={ref}\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Start}\n        gap={2}\n        backgroundColor={BoxBackgroundColor.BackgroundDefault}\n        padding={3}\n        className={twMerge('rounded-sm', 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-1' : 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          {shouldShowActionButton && (\n            <Box className=\"mt-4\">\n              <Button\n                size={ButtonSize.Md}\n                onClick={actionButtonOnClick}\n                {...resolvedActionButtonProps}\n              >\n                {actionButtonLabel}\n              </Button>\n            </Box>\n          )}\n        </Box>\n\n        {shouldShowCloseButton && (\n          <ButtonIcon\n            className={twMerge('ml-3 self-start', closeButtonClassName)}\n            iconName={IconName.Close}\n            size={ButtonIconSize.Sm}\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

@@ -7,7 +7,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../ButtonIcon/index.cjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -30,8 +29,11 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         rel?: string | undefined;
         accessKey?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        inert?: boolean | undefined;
         lang?: string | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         className?: string | undefined;
+        part?: string | undefined;
         prefix?: string | undefined;
         role?: React.AriaRole | undefined;
         contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
@@ -41,7 +43,7 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         tabIndex?: number | undefined;
         disabled?: boolean | undefined;
         size?: import("@metamask-previews/design-system-shared").ButtonBaseSize | undefined;
-        formAction?: string | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
@@ -73,7 +75,10 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
+        popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
+        popoverTarget?: string | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "inline" | "both" | "none" | "list" | undefined;
@@ -146,18 +151,18 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -198,8 +203,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -279,6 +282,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLButtonElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLButtonElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLButtonElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
@@ -287,13 +292,21 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         startIconName?: IconName | undefined;
@@ -313,7 +326,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../ButtonIcon/index.cjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick?: undefined;
@@ -336,8 +348,11 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         rel?: string | undefined;
         accessKey?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        inert?: boolean | undefined;
         lang?: string | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         className?: string | undefined;
+        part?: string | undefined;
         prefix?: string | undefined;
         role?: React.AriaRole | undefined;
         contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
@@ -347,7 +362,7 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         tabIndex?: number | undefined;
         disabled?: boolean | undefined;
         size?: import("@metamask-previews/design-system-shared").ButtonBaseSize | undefined;
-        formAction?: string | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
@@ -379,7 +394,10 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
+        popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
+        popoverTarget?: string | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "inline" | "both" | "none" | "list" | undefined;
@@ -452,18 +470,18 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -504,8 +522,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -585,6 +601,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLButtonElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLButtonElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLButtonElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
@@ -593,13 +611,21 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
         startIconName?: IconName | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAET,gDAAgD;AACjD,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
+{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAET,gDAAgD;AACjD,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAyGtB,CAAC"}

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

@@ -7,7 +7,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../ButtonIcon/index.mjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -30,8 +29,11 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         rel?: string | undefined;
         accessKey?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        inert?: boolean | undefined;
         lang?: string | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         className?: string | undefined;
+        part?: string | undefined;
         prefix?: string | undefined;
         role?: React.AriaRole | undefined;
         contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
@@ -41,7 +43,7 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         tabIndex?: number | undefined;
         disabled?: boolean | undefined;
         size?: import("@metamask-previews/design-system-shared").ButtonBaseSize | undefined;
-        formAction?: string | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
@@ -73,7 +75,10 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
+        popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
+        popoverTarget?: string | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "inline" | "both" | "none" | "list" | undefined;
@@ -146,18 +151,18 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -198,8 +203,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -279,6 +282,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLButtonElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLButtonElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLButtonElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
@@ -287,13 +292,21 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         startIconName?: IconName | undefined;
@@ -313,7 +326,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
     onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     closeButtonProps?: (Omit<Partial<import("../ButtonIcon/index.mjs").ButtonIconProps>, "onClick" | "iconName"> & {
         'data-testid'?: string | undefined;
-        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     }) | undefined;
 } & {
     actionButtonOnClick?: undefined;
@@ -336,8 +348,11 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         rel?: string | undefined;
         accessKey?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        inert?: boolean | undefined;
         lang?: string | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         className?: string | undefined;
+        part?: string | undefined;
         prefix?: string | undefined;
         role?: React.AriaRole | undefined;
         contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
@@ -347,7 +362,7 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         tabIndex?: number | undefined;
         disabled?: boolean | undefined;
         size?: import("@metamask-previews/design-system-shared").ButtonBaseSize | undefined;
-        formAction?: string | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
@@ -379,7 +394,10 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
+        popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
+        popoverTarget?: string | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "inline" | "both" | "none" | "list" | undefined;
@@ -452,18 +470,18 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -504,8 +522,6 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -585,6 +601,8 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLButtonElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLButtonElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLButtonElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
@@ -593,13 +611,21 @@ export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<HTMLButtonElement> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        isDisabled?: boolean | undefined;
         asChild?: boolean | undefined;
         textProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
-        isDisabled?: boolean | undefined;
         isFullWidth?: boolean | undefined;
         loadingTextProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
         startIconName?: IconName | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAET,gDAAgD;AACjD,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
+{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAET,gDAAgD;AACjD,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAyGtB,CAAC"}

package/dist/components/BannerBase/BannerBase.mjs

@@ -16,8 +16,8 @@ const isTextContent = (content) => typeof content === 'string' || typeof content
 const hasContent = (content) => content !== null && content !== undefined;
 export const BannerBase = forwardRef(({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnClick, actionButtonProps, startAccessory, onClose, closeButtonProps, className, ...props }, ref) => {
     const resolvedActionButtonProps = actionButtonProps ?? {};
-    const { ariaLabel: closeButtonAriaLabel = 'Close banner', onClick: closeButtonPropsOnClick, className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
-    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);
+    const { ariaLabel: closeButtonAriaLabel = 'Close banner', className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
+    const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnClick);
     return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Start, gap: 2, backgroundColor: BoxBackgroundColor.BackgroundDefault, padding: 3, className: twMerge('rounded-sm', className), ...props },
         startAccessory,
@@ -29,7 +29,7 @@ export const BannerBase = forwardRef(({ title, titleProps, description, descript
                 (isTextContent(children) ? (React.createElement(Text, { variant: TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
             shouldShowActionButton && (React.createElement(Box, { className: "mt-4" },
                 React.createElement(Button, { size: ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
-        shouldShowCloseButton && (React.createElement(ButtonIcon, { className: twMerge('ml-3 self-start', closeButtonClassName), iconName: IconName.Close, size: ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose ?? closeButtonPropsOnClick, ...resolvedCloseButtonProps }))));
+        shouldShowCloseButton && (React.createElement(ButtonIcon, { className: twMerge('ml-3 self-start', closeButtonClassName), iconName: IconName.Close, size: ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
 });
 BannerBase.displayName = 'BannerBase';
 //# sourceMappingURL=BannerBase.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  IconName,\n  TextVariant,\n} from '@metamask-previews/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      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      onClick: closeButtonPropsOnClick,\n      className: closeButtonClassName,\n      ...resolvedCloseButtonProps\n    } = closeButtonProps ?? {};\n\n    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n    const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Start}\n        gap={2}\n        backgroundColor={BoxBackgroundColor.BackgroundDefault}\n        padding={3}\n        className={twMerge('rounded-sm', 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-1' : 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          {shouldShowActionButton && (\n            <Box className=\"mt-4\">\n              <Button\n                size={ButtonSize.Md}\n                onClick={actionButtonOnClick}\n                {...resolvedActionButtonProps}\n              >\n                {actionButtonLabel}\n              </Button>\n            </Box>\n          )}\n        </Box>\n\n        {shouldShowCloseButton && (\n          <ButtonIcon\n            className={twMerge('ml-3 self-start', closeButtonClassName)}\n            iconName={IconName.Close}\n            size={ButtonIconSize.Sm}\n            ariaLabel={closeButtonAriaLabel}\n            onClick={onClose ?? closeButtonPropsOnClick}\n            {...resolvedCloseButtonProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
+{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  IconName,\n  TextVariant,\n} from '@metamask-previews/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      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\n    return (\n      <Box\n        ref={ref}\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Start}\n        gap={2}\n        backgroundColor={BoxBackgroundColor.BackgroundDefault}\n        padding={3}\n        className={twMerge('rounded-sm', 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-1' : 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          {shouldShowActionButton && (\n            <Box className=\"mt-4\">\n              <Button\n                size={ButtonSize.Md}\n                onClick={actionButtonOnClick}\n                {...resolvedActionButtonProps}\n              >\n                {actionButtonLabel}\n              </Button>\n            </Box>\n          )}\n        </Box>\n\n        {shouldShowCloseButton && (\n          <ButtonIcon\n            className={twMerge('ml-3 self-start', closeButtonClassName)}\n            iconName={IconName.Close}\n            size={ButtonIconSize.Sm}\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.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.types.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerBasePropsShared } from '@metamask-previews/design-system-shared';\nimport type { MouseEventHandler } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\ntype BannerBaseActionButtonProps = Omit<\n  Partial<ButtonProps>,\n  'children' | 'onClick' | 'variant'\n>;\n\ntype BannerBaseCloseButtonProps = Omit<\n  Partial<ButtonIconProps>,\n  'iconName' | 'onClick'\n> & {\n  /**\n   * Optional test id for the close button element.\n   */\n  'data-testid'?: string;\n  /**\n   * Optional click handler for the close button.\n   */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n};\n\ntype BannerBasePropsBase = BannerBasePropsShared &\n  Omit<BoxProps, 'children'> & {\n    /**\n     * Optional props for the title `Text` when the title is a string.\n     */\n    titleProps?: Partial<TextProps>;\n    /**\n     * Optional props for the description `Text` when description is a string.\n     */\n    descriptionProps?: Partial<TextProps>;\n    /**\n     * Optional props for the children wrapper `Text` when children is a string.\n     */\n    childrenWrapperProps?: Partial<TextProps>;\n    /**\n     * Optional click handler for the close button.\n     * If provided, a close button is shown.\n     */\n    onClose?: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Optional props for the close `ButtonIcon`.\n     * Providing this also shows a close button.\n     */\n    closeButtonProps?: BannerBaseCloseButtonProps;\n  };\n\ntype BannerBaseActionPropsWithHandler = {\n  actionButtonOnClick: MouseEventHandler<HTMLButtonElement>;\n  actionButtonLabel: string;\n  actionButtonProps?: BannerBaseActionButtonProps;\n};\n\ntype BannerBaseActionPropsWithoutHandler = {\n  actionButtonOnClick?: undefined;\n  actionButtonLabel?: string;\n  actionButtonProps?: BannerBaseActionButtonProps;\n};\n\nexport type BannerBaseProps = BannerBasePropsBase &\n  (BannerBaseActionPropsWithHandler | BannerBaseActionPropsWithoutHandler);\n"]}
+{"version":3,"file":"BannerBase.types.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerBasePropsShared } from '@metamask-previews/design-system-shared';\nimport type { MouseEventHandler } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\ntype BannerBaseActionButtonProps = Omit<\n  Partial<ButtonProps>,\n  'children' | 'onClick' | 'variant'\n>;\n\ntype BannerBaseCloseButtonProps = Omit<\n  Partial<ButtonIconProps>,\n  'iconName' | 'onClick'\n> & {\n  /**\n   * Optional test id for the close button element.\n   */\n  'data-testid'?: string;\n};\n\ntype BannerBasePropsBase = BannerBasePropsShared &\n  Omit<BoxProps, 'children'> & {\n    /**\n     * Optional props for the title `Text` when the title is a string.\n     */\n    titleProps?: Partial<TextProps>;\n    /**\n     * Optional props for the description `Text` when description is a string.\n     */\n    descriptionProps?: Partial<TextProps>;\n    /**\n     * Optional props for the children wrapper `Text` when children is a string.\n     */\n    childrenWrapperProps?: Partial<TextProps>;\n    /**\n     * Optional click handler for the close button.\n     * If provided, a close button is shown.\n     */\n    onClose?: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Optional props for the close `ButtonIcon`.\n     * Only used when `onClose` is provided.\n     */\n    closeButtonProps?: BannerBaseCloseButtonProps;\n  };\n\ntype BannerBaseActionPropsWithHandler = {\n  actionButtonOnClick: MouseEventHandler<HTMLButtonElement>;\n  actionButtonLabel: string;\n  actionButtonProps?: BannerBaseActionButtonProps;\n};\n\ntype BannerBaseActionPropsWithoutHandler = {\n  actionButtonOnClick?: undefined;\n  actionButtonLabel?: string;\n  actionButtonProps?: BannerBaseActionButtonProps;\n};\n\nexport type BannerBaseProps = BannerBasePropsBase &\n  (BannerBaseActionPropsWithHandler | BannerBaseActionPropsWithoutHandler);\n"]}