@metamask/design-system-react 0.34.0 → 0.35.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ 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
@@ -437,7 +449,8 @@ 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.34.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

package/dist/components/ModalContent/ModalContent.cjs

@@ -70,7 +70,7 @@ exports.ModalContent = (0, react_1.forwardRef)(({ className, children, size = Mo
         react_1.default.createElement("div", { ref: ref, className: (0, tw_merge_1.twMerge)('fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12', '[@media(max-height:475px)]:p-2', className), ...props },
             react_1.default.createElement(Box_1.Box, { ref: modalDialogRef, asChild: true, backgroundColor: isPureBlack
                     ? Box_1.BoxBackgroundColor.BackgroundAlternative
-                    : Box_1.BoxBackgroundColor.BackgroundDefault, justifyContent: Box_1.BoxJustifyContent.Start, alignItems: Box_1.BoxAlignItems.Stretch, flexDirection: Box_1.BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: (0, tw_merge_1.twMerge)('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', ModalContent_constants_1.TWCLASSMAP_MODAL_CONTENT_SIZE[size], modalDialogProps?.className) },
+                    : Box_1.BoxBackgroundColor.BackgroundDefault, justifyContent: Box_1.BoxJustifyContent.Start, alignItems: Box_1.BoxAlignItems.Stretch, flexDirection: Box_1.BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: (0, tw_merge_1.twMerge)('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', ModalContent_constants_1.TWCLASSMAP_MODAL_CONTENT_SIZE[size], isPureBlack && 'border border-muted', modalDialogProps?.className) },
                 react_1.default.createElement("section", { role: "dialog", "aria-modal": "true" }, children)))));
 });
 exports.ModalContent.displayName = 'ModalContent';

package/dist/components/ModalContent/ModalContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.cjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n  Box,\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\nimport { usePureBlack } from '../PureBlackProvider';\n\nimport {\n  MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n  TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  (\n    {\n      className,\n      children,\n      size = ModalContentSize.Sm,\n      modalDialogProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const {\n      onClose,\n      isClosedOnEscapeKey,\n      isClosedOnOutsideClick,\n      initialFocusRef,\n      finalFocusRef,\n      restoreFocus,\n      autoFocus,\n    } = useModalContext();\n    const isPureBlack = usePureBlack();\n    const modalDialogRef = useRef<HTMLElement>(null);\n\n    useEffect(() => {\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (isClosedOnEscapeKey && event.key === 'Escape') {\n          onClose();\n        }\n      };\n      const handleClickOutside = (event: MouseEvent) => {\n        if (!isClosedOnOutsideClick) {\n          return;\n        }\n        const target = event.target as HTMLElement | null;\n        // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n        // that portal alongside the Modal but are part of the modal\n        // interaction can opt out of the outside-click handler by setting\n        // `data-mm-modal-ignore-outside-click` on their root element.\n        if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n          return;\n        }\n        if (\n          modalDialogRef.current &&\n          !modalDialogRef.current.contains(target as Node)\n        ) {\n          onClose();\n        }\n      };\n\n      document.addEventListener('keydown', handleEscKey);\n      document.addEventListener('mousedown', handleClickOutside);\n\n      return () => {\n        document.removeEventListener('keydown', handleEscKey);\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n    return (\n      <ModalFocus\n        initialFocusRef={initialFocusRef}\n        finalFocusRef={finalFocusRef}\n        restoreFocus={restoreFocus}\n        autoFocus={autoFocus}\n      >\n        <div\n          ref={ref}\n          className={twMerge(\n            'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n            '[@media(max-height:475px)]:p-2',\n            className,\n          )}\n          {...props}\n        >\n          <Box\n            ref={modalDialogRef as React.Ref<HTMLDivElement>}\n            asChild\n            backgroundColor={\n              isPureBlack\n                ? BoxBackgroundColor.BackgroundAlternative\n                : BoxBackgroundColor.BackgroundDefault\n            }\n            justifyContent={BoxJustifyContent.Start}\n            alignItems={BoxAlignItems.Stretch}\n            flexDirection={BoxFlexDirection.Column}\n            paddingTop={4}\n            paddingBottom={4}\n            {...modalDialogProps}\n            className={twMerge(\n              'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n              TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n              modalDialogProps?.className,\n            )}\n          >\n            <section role=\"dialog\" aria-modal=\"true\">\n              {children}\n            </section>\n          </Box>\n        </div>\n      </ModalFocus>\n    );\n  },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}
+{"version":3,"file":"ModalContent.cjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6D;AAE7D,uDAA+C;AAC/C,0CAMgB;AAChB,8CAA2C;AAC3C,wDAA2C;AAC3C,sEAAoD;AAEpD,yEAGkC;AAElC,iEAAwD;AAE3C,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,CACE,EACE,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,qCAAgB,CAAC,EAAE,EAC1B,gBAAgB,EAChB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EACJ,OAAO,EACP,mBAAmB,EACnB,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,GACV,GAAG,IAAA,uBAAe,GAAE,CAAC;IACtB,MAAM,WAAW,GAAG,IAAA,gCAAY,GAAE,CAAC;IACnC,MAAM,cAAc,GAAG,IAAA,cAAM,EAAc,IAAI,CAAC,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC5C,IAAI,mBAAmB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACjD,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QACF,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IAAI,CAAC,sBAAsB,EAAE;gBAC3B,OAAO;aACR;YACD,MAAM,MAAM,GAAG,KAAK,CAAC,MAA4B,CAAC;YAClD,mEAAmE;YACnE,4DAA4D;YAC5D,kEAAkE;YAClE,8DAA8D;YAC9D,IAAI,MAAM,EAAE,OAAO,CAAC,IAAI,gEAAuC,GAAG,CAAC,EAAE;gBACnE,OAAO;aACR;YACD,IACE,cAAc,CAAC,OAAO;gBACtB,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAc,CAAC,EAChD;gBACA,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAE3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACtD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,8BAAC,uBAAU,IACT,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS;QAEpB,uCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,kBAAO,EAChB,6EAA6E,EAC7E,gCAAgC,EAChC,SAAS,CACV,KACG,KAAK;YAET,8BAAC,SAAG,IACF,GAAG,EAAE,cAA2C,EAChD,OAAO,QACP,eAAe,EACb,WAAW;oBACT,CAAC,CAAC,wBAAkB,CAAC,qBAAqB;oBAC1C,CAAC,CAAC,wBAAkB,CAAC,iBAAiB,EAE1C,cAAc,EAAE,uBAAiB,CAAC,KAAK,EACvC,UAAU,EAAE,mBAAa,CAAC,OAAO,EACjC,aAAa,EAAE,sBAAgB,CAAC,MAAM,EACtC,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,CAAC,KACZ,gBAAgB,EACpB,SAAS,EAAE,IAAA,kBAAO,EAChB,0EAA0E,EAC1E,sDAA6B,CAAC,IAAI,CAAC,EACnC,WAAW,IAAI,qBAAqB,EACpC,gBAAgB,EAAE,SAAS,CAC5B;gBAED,2CAAS,IAAI,EAAC,QAAQ,gBAAY,MAAM,IACrC,QAAQ,CACD,CACN,CACF,CACK,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n  Box,\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\nimport { usePureBlack } from '../PureBlackProvider';\n\nimport {\n  MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n  TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  (\n    {\n      className,\n      children,\n      size = ModalContentSize.Sm,\n      modalDialogProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const {\n      onClose,\n      isClosedOnEscapeKey,\n      isClosedOnOutsideClick,\n      initialFocusRef,\n      finalFocusRef,\n      restoreFocus,\n      autoFocus,\n    } = useModalContext();\n    const isPureBlack = usePureBlack();\n    const modalDialogRef = useRef<HTMLElement>(null);\n\n    useEffect(() => {\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (isClosedOnEscapeKey && event.key === 'Escape') {\n          onClose();\n        }\n      };\n      const handleClickOutside = (event: MouseEvent) => {\n        if (!isClosedOnOutsideClick) {\n          return;\n        }\n        const target = event.target as HTMLElement | null;\n        // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n        // that portal alongside the Modal but are part of the modal\n        // interaction can opt out of the outside-click handler by setting\n        // `data-mm-modal-ignore-outside-click` on their root element.\n        if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n          return;\n        }\n        if (\n          modalDialogRef.current &&\n          !modalDialogRef.current.contains(target as Node)\n        ) {\n          onClose();\n        }\n      };\n\n      document.addEventListener('keydown', handleEscKey);\n      document.addEventListener('mousedown', handleClickOutside);\n\n      return () => {\n        document.removeEventListener('keydown', handleEscKey);\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n    return (\n      <ModalFocus\n        initialFocusRef={initialFocusRef}\n        finalFocusRef={finalFocusRef}\n        restoreFocus={restoreFocus}\n        autoFocus={autoFocus}\n      >\n        <div\n          ref={ref}\n          className={twMerge(\n            'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n            '[@media(max-height:475px)]:p-2',\n            className,\n          )}\n          {...props}\n        >\n          <Box\n            ref={modalDialogRef as React.Ref<HTMLDivElement>}\n            asChild\n            backgroundColor={\n              isPureBlack\n                ? BoxBackgroundColor.BackgroundAlternative\n                : BoxBackgroundColor.BackgroundDefault\n            }\n            justifyContent={BoxJustifyContent.Start}\n            alignItems={BoxAlignItems.Stretch}\n            flexDirection={BoxFlexDirection.Column}\n            paddingTop={4}\n            paddingBottom={4}\n            {...modalDialogProps}\n            className={twMerge(\n              'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n              TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n              isPureBlack && 'border border-muted',\n              modalDialogProps?.className,\n            )}\n          >\n            <section role=\"dialog\" aria-modal=\"true\">\n              {children}\n            </section>\n          </Box>\n        </div>\n      </ModalFocus>\n    );\n  },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.d.cts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAsGxB,CAAC"}
+{"version":3,"file":"ModalContent.d.cts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAuGxB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.d.mts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAsGxB,CAAC"}
+{"version":3,"file":"ModalContent.d.mts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAuGxB,CAAC"}

package/dist/components/ModalContent/ModalContent.mjs

@@ -51,7 +51,7 @@ export const ModalContent = forwardRef(({ className, children, size = ModalConte
         React.createElement("div", { ref: ref, className: twMerge('fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12', '[@media(max-height:475px)]:p-2', className), ...props },
             React.createElement(Box, { ref: modalDialogRef, asChild: true, backgroundColor: isPureBlack
                     ? BoxBackgroundColor.BackgroundAlternative
-                    : BoxBackgroundColor.BackgroundDefault, justifyContent: BoxJustifyContent.Start, alignItems: BoxAlignItems.Stretch, flexDirection: BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: twMerge('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', TWCLASSMAP_MODAL_CONTENT_SIZE[size], modalDialogProps?.className) },
+                    : BoxBackgroundColor.BackgroundDefault, justifyContent: BoxJustifyContent.Start, alignItems: BoxAlignItems.Stretch, flexDirection: BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: twMerge('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', TWCLASSMAP_MODAL_CONTENT_SIZE[size], isPureBlack && 'border border-muted', modalDialogProps?.className) },
                 React.createElement("section", { role: "dialog", "aria-modal": "true" }, children)))));
 });
 ModalContent.displayName = 'ModalContent';

package/dist/components/ModalContent/ModalContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.mjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n  Box,\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\nimport { usePureBlack } from '../PureBlackProvider';\n\nimport {\n  MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n  TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  (\n    {\n      className,\n      children,\n      size = ModalContentSize.Sm,\n      modalDialogProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const {\n      onClose,\n      isClosedOnEscapeKey,\n      isClosedOnOutsideClick,\n      initialFocusRef,\n      finalFocusRef,\n      restoreFocus,\n      autoFocus,\n    } = useModalContext();\n    const isPureBlack = usePureBlack();\n    const modalDialogRef = useRef<HTMLElement>(null);\n\n    useEffect(() => {\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (isClosedOnEscapeKey && event.key === 'Escape') {\n          onClose();\n        }\n      };\n      const handleClickOutside = (event: MouseEvent) => {\n        if (!isClosedOnOutsideClick) {\n          return;\n        }\n        const target = event.target as HTMLElement | null;\n        // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n        // that portal alongside the Modal but are part of the modal\n        // interaction can opt out of the outside-click handler by setting\n        // `data-mm-modal-ignore-outside-click` on their root element.\n        if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n          return;\n        }\n        if (\n          modalDialogRef.current &&\n          !modalDialogRef.current.contains(target as Node)\n        ) {\n          onClose();\n        }\n      };\n\n      document.addEventListener('keydown', handleEscKey);\n      document.addEventListener('mousedown', handleClickOutside);\n\n      return () => {\n        document.removeEventListener('keydown', handleEscKey);\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n    return (\n      <ModalFocus\n        initialFocusRef={initialFocusRef}\n        finalFocusRef={finalFocusRef}\n        restoreFocus={restoreFocus}\n        autoFocus={autoFocus}\n      >\n        <div\n          ref={ref}\n          className={twMerge(\n            'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n            '[@media(max-height:475px)]:p-2',\n            className,\n          )}\n          {...props}\n        >\n          <Box\n            ref={modalDialogRef as React.Ref<HTMLDivElement>}\n            asChild\n            backgroundColor={\n              isPureBlack\n                ? BoxBackgroundColor.BackgroundAlternative\n                : BoxBackgroundColor.BackgroundDefault\n            }\n            justifyContent={BoxJustifyContent.Start}\n            alignItems={BoxAlignItems.Stretch}\n            flexDirection={BoxFlexDirection.Column}\n            paddingTop={4}\n            paddingBottom={4}\n            {...modalDialogProps}\n            className={twMerge(\n              'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n              TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n              modalDialogProps?.className,\n            )}\n          >\n            <section role=\"dialog\" aria-modal=\"true\">\n              {children}\n            </section>\n          </Box>\n        </div>\n      </ModalFocus>\n    );\n  },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}
+{"version":3,"file":"ModalContent.mjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n  Box,\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\nimport { usePureBlack } from '../PureBlackProvider';\n\nimport {\n  MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n  TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  (\n    {\n      className,\n      children,\n      size = ModalContentSize.Sm,\n      modalDialogProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const {\n      onClose,\n      isClosedOnEscapeKey,\n      isClosedOnOutsideClick,\n      initialFocusRef,\n      finalFocusRef,\n      restoreFocus,\n      autoFocus,\n    } = useModalContext();\n    const isPureBlack = usePureBlack();\n    const modalDialogRef = useRef<HTMLElement>(null);\n\n    useEffect(() => {\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (isClosedOnEscapeKey && event.key === 'Escape') {\n          onClose();\n        }\n      };\n      const handleClickOutside = (event: MouseEvent) => {\n        if (!isClosedOnOutsideClick) {\n          return;\n        }\n        const target = event.target as HTMLElement | null;\n        // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n        // that portal alongside the Modal but are part of the modal\n        // interaction can opt out of the outside-click handler by setting\n        // `data-mm-modal-ignore-outside-click` on their root element.\n        if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n          return;\n        }\n        if (\n          modalDialogRef.current &&\n          !modalDialogRef.current.contains(target as Node)\n        ) {\n          onClose();\n        }\n      };\n\n      document.addEventListener('keydown', handleEscKey);\n      document.addEventListener('mousedown', handleClickOutside);\n\n      return () => {\n        document.removeEventListener('keydown', handleEscKey);\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n    return (\n      <ModalFocus\n        initialFocusRef={initialFocusRef}\n        finalFocusRef={finalFocusRef}\n        restoreFocus={restoreFocus}\n        autoFocus={autoFocus}\n      >\n        <div\n          ref={ref}\n          className={twMerge(\n            'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n            '[@media(max-height:475px)]:p-2',\n            className,\n          )}\n          {...props}\n        >\n          <Box\n            ref={modalDialogRef as React.Ref<HTMLDivElement>}\n            asChild\n            backgroundColor={\n              isPureBlack\n                ? BoxBackgroundColor.BackgroundAlternative\n                : BoxBackgroundColor.BackgroundDefault\n            }\n            justifyContent={BoxJustifyContent.Start}\n            alignItems={BoxAlignItems.Stretch}\n            flexDirection={BoxFlexDirection.Column}\n            paddingTop={4}\n            paddingBottom={4}\n            {...modalDialogProps}\n            className={twMerge(\n              'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n              TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n              isPureBlack && 'border border-muted',\n              modalDialogProps?.className,\n            )}\n          >\n            <section role=\"dialog\" aria-modal=\"true\">\n              {children}\n            </section>\n          </Box>\n        </div>\n      </ModalFocus>\n    );\n  },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}

package/dist/components/TextFieldSearch/TextFieldSearch.cjs

@@ -29,12 +29,15 @@ const tw_merge_1 = require("../../utils/tw-merge.cjs");
 const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const TextField_1 = require("../TextField/index.cjs");
-exports.TextFieldSearch = (0, react_1.forwardRef)(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, ...props }, ref) => {
-    const clearButton = value ? (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: Icon_1.IconName.CircleX, size: ButtonIcon_1.ButtonIconSize.Md, iconProps: { color: Icon_1.IconColor.IconAlternative }, ...clearButtonProps, isDisabled: isDisabled || clearButtonProps?.isDisabled, onClick: clearButtonOnClick })) : null;
+exports.TextFieldSearch = (0, react_1.forwardRef)(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, inputProps, ...props }, ref) => {
+    const clearButton = value ? (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: Icon_1.IconName.CircleX, size: ButtonIcon_1.ButtonIconSize.Md, iconProps: { color: Icon_1.IconColor.IconDefault }, ...clearButtonProps, isDisabled: isDisabled || clearButtonProps?.isDisabled, onClick: clearButtonOnClick })) : null;
     const resolvedEndAccessory = clearButton || endAccessory ? (react_1.default.createElement(react_1.default.Fragment, null,
         clearButton,
         endAccessory)) : undefined;
-    return (react_1.default.createElement(TextField_1.TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextField_1.TextFieldType.Search, className: (0, tw_merge_1.twMerge)('rounded-full', className), startAccessory: startAccessory ?? (react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Search, size: Icon_1.IconSize.Md, color: Icon_1.IconColor.IconAlternative })), endAccessory: resolvedEndAccessory, ...props }));
+    return (react_1.default.createElement(TextField_1.TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextField_1.TextFieldType.Search, size: TextField_1.TextFieldSize.Lg, className: (0, tw_merge_1.twMerge)('rounded-full bg-muted', !isDisabled && !props.isError && 'hover:bg-muted-hover', className), inputProps: {
+            ...inputProps,
+            className: (0, tw_merge_1.twMerge)('[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden', inputProps?.className),
+        }, startAccessory: startAccessory ?? (react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Search, size: Icon_1.IconSize.Md, color: Icon_1.IconColor.IconAlternative })), endAccessory: resolvedEndAccessory, ...props }));
 });
 exports.TextFieldSearch.displayName = 'TextFieldSearch';
 //# sourceMappingURL=TextFieldSearch.cjs.map

package/dist/components/TextFieldSearch/TextFieldSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldSearch.cjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2D;AAC3D,4CAA8D;AAC9D,sDAAwD;AAI3C,QAAA,eAAe,GAAG,IAAA,kBAAU,EACvC,CACE,EACE,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAC1B,8BAAC,uBAAU,mBACG,gCAAgC,EAC5C,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,eAAQ,CAAC,OAAO,EAC1B,IAAI,EAAE,2BAAc,CAAC,EAAE,EACvB,SAAS,EAAE,EAAE,KAAK,EAAE,gBAAS,CAAC,eAAe,EAAE,KAC3C,gBAAgB,EACpB,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,UAAU,EACtD,OAAO,EAAE,kBAAkB,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,oBAAoB,GACxB,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC5B;QACG,WAAW;QACX,YAAY,CACZ,CACJ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,8BAAC,qBAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,yBAAa,CAAC,MAAM,EAC1B,SAAS,EAAE,IAAA,kBAAO,EAAC,cAAc,EAAE,SAAS,CAAC,EAC7C,cAAc,EACZ,cAAc,IAAI,CAChB,8BAAC,WAAI,IACH,IAAI,EAAE,eAAQ,CAAC,MAAM,EACrB,IAAI,EAAE,eAAQ,CAAC,EAAE,EACjB,KAAK,EAAE,gBAAS,CAAC,eAAe,GAChC,CACH,EAEH,YAAY,EAAE,oBAAoB,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { TextField, TextFieldType } from '../TextField';\n\nimport type { TextFieldSearchProps } from './TextFieldSearch.types';\n\nexport const TextFieldSearch = forwardRef<HTMLDivElement, TextFieldSearchProps>(\n  (\n    {\n      clearButtonOnClick,\n      clearButtonProps,\n      endAccessory,\n      value,\n      startAccessory,\n      isDisabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clearButton = value ? (\n      <ButtonIcon\n        data-testid=\"text-field-search-clear-button\"\n        ariaLabel=\"Clear\"\n        iconName={IconName.CircleX}\n        size={ButtonIconSize.Md}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...clearButtonProps}\n        isDisabled={isDisabled || clearButtonProps?.isDisabled}\n        onClick={clearButtonOnClick}\n      />\n    ) : null;\n\n    const resolvedEndAccessory =\n      clearButton || endAccessory ? (\n        <>\n          {clearButton}\n          {endAccessory}\n        </>\n      ) : undefined;\n\n    return (\n      <TextField\n        ref={ref}\n        value={value}\n        isDisabled={isDisabled}\n        type={TextFieldType.Search}\n        className={twMerge('rounded-full', className)}\n        startAccessory={\n          startAccessory ?? (\n            <Icon\n              name={IconName.Search}\n              size={IconSize.Md}\n              color={IconColor.IconAlternative}\n            />\n          )\n        }\n        endAccessory={resolvedEndAccessory}\n        {...props}\n      />\n    );\n  },\n);\n\nTextFieldSearch.displayName = 'TextFieldSearch';\n"]}
+{"version":3,"file":"TextFieldSearch.cjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2D;AAC3D,4CAA8D;AAC9D,sDAAuE;AAI1D,QAAA,eAAe,GAAG,IAAA,kBAAU,EACvC,CACE,EACE,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAC1B,8BAAC,uBAAU,mBACG,gCAAgC,EAC5C,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,eAAQ,CAAC,OAAO,EAC1B,IAAI,EAAE,2BAAc,CAAC,EAAE,EACvB,SAAS,EAAE,EAAE,KAAK,EAAE,gBAAS,CAAC,WAAW,EAAE,KACvC,gBAAgB,EACpB,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,UAAU,EACtD,OAAO,EAAE,kBAAkB,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,oBAAoB,GACxB,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC5B;QACG,WAAW;QACX,YAAY,CACZ,CACJ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,8BAAC,qBAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,yBAAa,CAAC,MAAM,EAC1B,IAAI,EAAE,yBAAa,CAAC,EAAE,EACtB,SAAS,EAAE,IAAA,kBAAO,EAChB,uBAAuB,EACvB,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvD,SAAS,CACV,EACD,UAAU,EAAE;YACV,GAAG,UAAU;YACb,SAAS,EAAE,IAAA,kBAAO,EAChB,wKAAwK,EACxK,UAAU,EAAE,SAAS,CACtB;SACF,EACD,cAAc,EACZ,cAAc,IAAI,CAChB,8BAAC,WAAI,IACH,IAAI,EAAE,eAAQ,CAAC,MAAM,EACrB,IAAI,EAAE,eAAQ,CAAC,EAAE,EACjB,KAAK,EAAE,gBAAS,CAAC,eAAe,GAChC,CACH,EAEH,YAAY,EAAE,oBAAoB,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { TextField, TextFieldSize, TextFieldType } from '../TextField';\n\nimport type { TextFieldSearchProps } from './TextFieldSearch.types';\n\nexport const TextFieldSearch = forwardRef<HTMLDivElement, TextFieldSearchProps>(\n  (\n    {\n      clearButtonOnClick,\n      clearButtonProps,\n      endAccessory,\n      value,\n      startAccessory,\n      isDisabled = false,\n      className,\n      inputProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const clearButton = value ? (\n      <ButtonIcon\n        data-testid=\"text-field-search-clear-button\"\n        ariaLabel=\"Clear\"\n        iconName={IconName.CircleX}\n        size={ButtonIconSize.Md}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...clearButtonProps}\n        isDisabled={isDisabled || clearButtonProps?.isDisabled}\n        onClick={clearButtonOnClick}\n      />\n    ) : null;\n\n    const resolvedEndAccessory =\n      clearButton || endAccessory ? (\n        <>\n          {clearButton}\n          {endAccessory}\n        </>\n      ) : undefined;\n\n    return (\n      <TextField\n        ref={ref}\n        value={value}\n        isDisabled={isDisabled}\n        type={TextFieldType.Search}\n        size={TextFieldSize.Lg}\n        className={twMerge(\n          'rounded-full bg-muted',\n          !isDisabled && !props.isError && 'hover:bg-muted-hover',\n          className,\n        )}\n        inputProps={{\n          ...inputProps,\n          className: twMerge(\n            '[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',\n            inputProps?.className,\n          ),\n        }}\n        startAccessory={\n          startAccessory ?? (\n            <Icon\n              name={IconName.Search}\n              size={IconSize.Md}\n              color={IconColor.IconAlternative}\n            />\n          )\n        }\n        endAccessory={resolvedEndAccessory}\n        {...props}\n      />\n    );\n  },\n);\n\nTextFieldSearch.displayName = 'TextFieldSearch';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TextFieldSearch.d.cts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;wCAwD3B,CAAC"}
+{"version":3,"file":"TextFieldSearch.d.cts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;wCAqE3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextFieldSearch.d.mts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;wCAwD3B,CAAC"}
+{"version":3,"file":"TextFieldSearch.d.mts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;wCAqE3B,CAAC"}

package/dist/components/TextFieldSearch/TextFieldSearch.mjs

@@ -9,13 +9,16 @@ const React = $importDefault($React);
 import { twMerge } from "../../utils/tw-merge.mjs";
 import { ButtonIcon, ButtonIconSize } from "../ButtonIcon/index.mjs";
 import { Icon, IconColor, IconName, IconSize } from "../Icon/index.mjs";
-import { TextField, TextFieldType } from "../TextField/index.mjs";
-export const TextFieldSearch = forwardRef(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, ...props }, ref) => {
-    const clearButton = value ? (React.createElement(ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: IconName.CircleX, size: ButtonIconSize.Md, iconProps: { color: IconColor.IconAlternative }, ...clearButtonProps, isDisabled: isDisabled || clearButtonProps?.isDisabled, onClick: clearButtonOnClick })) : null;
+import { TextField, TextFieldSize, TextFieldType } from "../TextField/index.mjs";
+export const TextFieldSearch = forwardRef(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, inputProps, ...props }, ref) => {
+    const clearButton = value ? (React.createElement(ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: IconName.CircleX, size: ButtonIconSize.Md, iconProps: { color: IconColor.IconDefault }, ...clearButtonProps, isDisabled: isDisabled || clearButtonProps?.isDisabled, onClick: clearButtonOnClick })) : null;
     const resolvedEndAccessory = clearButton || endAccessory ? (React.createElement(React.Fragment, null,
         clearButton,
         endAccessory)) : undefined;
-    return (React.createElement(TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextFieldType.Search, className: twMerge('rounded-full', className), startAccessory: startAccessory ?? (React.createElement(Icon, { name: IconName.Search, size: IconSize.Md, color: IconColor.IconAlternative })), endAccessory: resolvedEndAccessory, ...props }));
+    return (React.createElement(TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextFieldType.Search, size: TextFieldSize.Lg, className: twMerge('rounded-full bg-muted', !isDisabled && !props.isError && 'hover:bg-muted-hover', className), inputProps: {
+            ...inputProps,
+            className: twMerge('[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden', inputProps?.className),
+        }, startAccessory: startAccessory ?? (React.createElement(Icon, { name: IconName.Search, size: IconSize.Md, color: IconColor.IconAlternative })), endAccessory: resolvedEndAccessory, ...props }));
 });
 TextFieldSearch.displayName = 'TextFieldSearch';
 //# sourceMappingURL=TextFieldSearch.mjs.map

package/dist/components/TextFieldSearch/TextFieldSearch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldSearch.mjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,+BAAqB;AAIxD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,CACE,EACE,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAC1B,oBAAC,UAAU,mBACG,gCAAgC,EAC5C,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,QAAQ,CAAC,OAAO,EAC1B,IAAI,EAAE,cAAc,CAAC,EAAE,EACvB,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE,KAC3C,gBAAgB,EACpB,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,UAAU,EACtD,OAAO,EAAE,kBAAkB,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,oBAAoB,GACxB,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC5B;QACG,WAAW;QACX,YAAY,CACZ,CACJ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,aAAa,CAAC,MAAM,EAC1B,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,SAAS,CAAC,EAC7C,cAAc,EACZ,cAAc,IAAI,CAChB,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,MAAM,EACrB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,KAAK,EAAE,SAAS,CAAC,eAAe,GAChC,CACH,EAEH,YAAY,EAAE,oBAAoB,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { TextField, TextFieldType } from '../TextField';\n\nimport type { TextFieldSearchProps } from './TextFieldSearch.types';\n\nexport const TextFieldSearch = forwardRef<HTMLDivElement, TextFieldSearchProps>(\n  (\n    {\n      clearButtonOnClick,\n      clearButtonProps,\n      endAccessory,\n      value,\n      startAccessory,\n      isDisabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clearButton = value ? (\n      <ButtonIcon\n        data-testid=\"text-field-search-clear-button\"\n        ariaLabel=\"Clear\"\n        iconName={IconName.CircleX}\n        size={ButtonIconSize.Md}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...clearButtonProps}\n        isDisabled={isDisabled || clearButtonProps?.isDisabled}\n        onClick={clearButtonOnClick}\n      />\n    ) : null;\n\n    const resolvedEndAccessory =\n      clearButton || endAccessory ? (\n        <>\n          {clearButton}\n          {endAccessory}\n        </>\n      ) : undefined;\n\n    return (\n      <TextField\n        ref={ref}\n        value={value}\n        isDisabled={isDisabled}\n        type={TextFieldType.Search}\n        className={twMerge('rounded-full', className)}\n        startAccessory={\n          startAccessory ?? (\n            <Icon\n              name={IconName.Search}\n              size={IconSize.Md}\n              color={IconColor.IconAlternative}\n            />\n          )\n        }\n        endAccessory={resolvedEndAccessory}\n        {...props}\n      />\n    );\n  },\n);\n\nTextFieldSearch.displayName = 'TextFieldSearch';\n"]}
+{"version":3,"file":"TextFieldSearch.mjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,+BAAqB;AAIvE,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,CACE,EACE,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAC1B,oBAAC,UAAU,mBACG,gCAAgC,EAC5C,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,QAAQ,CAAC,OAAO,EAC1B,IAAI,EAAE,cAAc,CAAC,EAAE,EACvB,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,WAAW,EAAE,KACvC,gBAAgB,EACpB,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,UAAU,EACtD,OAAO,EAAE,kBAAkB,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,oBAAoB,GACxB,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC5B;QACG,WAAW;QACX,YAAY,CACZ,CACJ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,aAAa,CAAC,MAAM,EAC1B,IAAI,EAAE,aAAa,CAAC,EAAE,EACtB,SAAS,EAAE,OAAO,CAChB,uBAAuB,EACvB,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvD,SAAS,CACV,EACD,UAAU,EAAE;YACV,GAAG,UAAU;YACb,SAAS,EAAE,OAAO,CAChB,wKAAwK,EACxK,UAAU,EAAE,SAAS,CACtB;SACF,EACD,cAAc,EACZ,cAAc,IAAI,CAChB,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,MAAM,EACrB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,KAAK,EAAE,SAAS,CAAC,eAAe,GAChC,CACH,EAEH,YAAY,EAAE,oBAAoB,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { TextField, TextFieldSize, TextFieldType } from '../TextField';\n\nimport type { TextFieldSearchProps } from './TextFieldSearch.types';\n\nexport const TextFieldSearch = forwardRef<HTMLDivElement, TextFieldSearchProps>(\n  (\n    {\n      clearButtonOnClick,\n      clearButtonProps,\n      endAccessory,\n      value,\n      startAccessory,\n      isDisabled = false,\n      className,\n      inputProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const clearButton = value ? (\n      <ButtonIcon\n        data-testid=\"text-field-search-clear-button\"\n        ariaLabel=\"Clear\"\n        iconName={IconName.CircleX}\n        size={ButtonIconSize.Md}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...clearButtonProps}\n        isDisabled={isDisabled || clearButtonProps?.isDisabled}\n        onClick={clearButtonOnClick}\n      />\n    ) : null;\n\n    const resolvedEndAccessory =\n      clearButton || endAccessory ? (\n        <>\n          {clearButton}\n          {endAccessory}\n        </>\n      ) : undefined;\n\n    return (\n      <TextField\n        ref={ref}\n        value={value}\n        isDisabled={isDisabled}\n        type={TextFieldType.Search}\n        size={TextFieldSize.Lg}\n        className={twMerge(\n          'rounded-full bg-muted',\n          !isDisabled && !props.isError && 'hover:bg-muted-hover',\n          className,\n        )}\n        inputProps={{\n          ...inputProps,\n          className: twMerge(\n            '[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',\n            inputProps?.className,\n          ),\n        }}\n        startAccessory={\n          startAccessory ?? (\n            <Icon\n              name={IconName.Search}\n              size={IconSize.Md}\n              color={IconColor.IconAlternative}\n            />\n          )\n        }\n        endAccessory={resolvedEndAccessory}\n        {...props}\n      />\n    );\n  },\n);\n\nTextFieldSearch.displayName = 'TextFieldSearch';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-react",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Design system react ui components",
   "keywords": [
     "MetaMask",