@evolve.ui/core-components 1.1.0 → 1.2.0

package/index.cjs

@@ -28,14 +28,14 @@ const require_Badge_ItemBadge = require("./Badge/ItemBadge.cjs");
 const require_Badge_LiveStatusBadge = require("./Badge/LiveStatusBadge.cjs");
 const require_skeleton = require("./skeleton.cjs");
 const require_BannerNotification = require("./BannerNotification-D9Sfa2si.cjs");
-const require_BottomSheet = require("./BottomSheet-emWP9Fct.cjs");
+const require_BottomSheet = require("./BottomSheet-D5w0WZDl.cjs");
 const require_Breadcrumbs = require("./Breadcrumbs-7jTSZ7NM.cjs");
 const require_Callout = require("./Callout-DrWwRGi4.cjs");
 const require_card_singleCard = require("./card/singleCard.cjs");
 const require_CardGrid = require("./CardGrid-CXi9XvDo.cjs");
 const require_cardFactory = require("./cardFactory-DTU3jY-R.cjs");
 const require_card_components_createBadge = require("./card/components/createBadge.cjs");
-const require_FavoriteButton = require("./FavoriteButton-DliYzkfu.cjs");
+const require_FavoriteButton = require("./FavoriteButton-BkIaWfgD.cjs");
 const require_SaveConfetti = require("./SaveConfetti-DSJtuE3b.cjs");
 const require_card_components_createFavoriteButton = require("./card/components/createFavoriteButton.cjs");
 const require_card_components_createImage = require("./card/components/createImage.cjs");
@@ -45,13 +45,13 @@ const require_Typography_InlineButton = require("./Typography/InlineButton.cjs")
 const require_card_components_createPriceStatus = require("./card/components/createPriceStatus.cjs");
 const require_Confetti = require("./Confetti--vMcCOQ7.cjs");
 const require_Toast = require("./Toast-CPEKESLZ.cjs");
-const require_CookieConsent = require("./CookieConsent-PIglB_bb.cjs");
+const require_CookieConsent = require("./CookieConsent-BSXJHMwX.cjs");
 const require_components = require("./components-CL4KcKF0.cjs");
 const require_modal_context = require("./modal/context.cjs");
 const require_modal_useCloseModal = require("./modal/useCloseModal.cjs");
 const require_ContentPager = require("./ContentPager-BJo1L64Y.cjs");
 const require_progressSteps = require("./progressSteps.cjs");
-const require_Modal = require("./Modal-CiBqXyiK.cjs");
+const require_Modal = require("./Modal-q4HhBAQU.cjs");
 const require_toggleSwitch = require("./toggleSwitch.cjs");
 const require_Countdown = require("./Countdown-D4-QPv6V.cjs");
 const require_chips_chip = require("./chips/chip.cjs");
@@ -64,23 +64,23 @@ const require_utils = require("./utils-CvmfGpqu.cjs");
 const require_dateInput = require("./dateInput.cjs");
 const require_datePicker = require("./datePicker-DaYegd15.cjs");
 const require_timePicker = require("./timePicker-Bs25zweI.cjs");
-const require_Drawer = require("./Drawer-9HFG45OA.cjs");
+const require_Drawer = require("./Drawer-3rA9dGCl.cjs");
 const require_educationalPopover = require("./educationalPopover.cjs");
 const require_useFeatureFlags = require("./useFeatureFlags--GRuT9Qc.cjs");
 const require_FeatureFlagDevToolsUI = require("./FeatureFlagDevToolsUI-MBFES3GM.cjs");
 const require_hooks = require("./hooks-DDMD_CDN.cjs");
 const require_hooks$1 = require("./hooks-8VsDqwlb.cjs");
-const require_FileUpload = require("./FileUpload--e_UJ_ek.cjs");
+const require_FileUpload = require("./FileUpload-gjRbkgrL.cjs");
 const require_tabs = require("./tabs.cjs");
 const require_Loading = require("./Loading-BL7_u25j.cjs");
-const require_Pagination = require("./Pagination-bAtbN478.cjs");
-const require_Select = require("./Select-BXDjzyDs.cjs");
-const require_Table = require("./Table-CLlDragJ.cjs");
-const require_Menu = require("./Menu-ClUogmwE.cjs");
-const require_ProgressCircle = require("./ProgressCircle-BC81D9sU.cjs");
+const require_Pagination = require("./Pagination-Denb9_zB.cjs");
+const require_Select = require("./Select-DCCcyLT4.cjs");
+const require_Table = require("./Table-D4UYosb1.cjs");
+const require_Menu = require("./Menu-DuDhtoNP.cjs");
+const require_ProgressCircle = require("./ProgressCircle-B6R4dxoV.cjs");
 const require_CreditCardIcon = require("./CreditCardIcon-OqdAEE3e.cjs");
 const require_imageCluster = require("./imageCluster.cjs");
-const require_ImageSlider = require("./ImageSlider-BidXfnLj.cjs");
+const require_ImageSlider = require("./ImageSlider-CAgxQffP.cjs");
 const require_inlineNotification = require("./inlineNotification.cjs");
 const require_JumpMenu = require("./JumpMenu-BXYZnPIH.cjs");
 const require_notificationBadge = require("./notificationBadge.cjs");
@@ -91,12 +91,12 @@ const require_selectAsync = require("./selectAsync.cjs");
 const require_selectAsyncCreatable = require("./selectAsyncCreatable.cjs");
 const require_selectCreatable = require("./selectCreatable.cjs");
 const require_SegmentedControl = require("./SegmentedControl-B5FZ0uX8.cjs");
-const require_SplitButton = require("./SplitButton-DcmmLW8j.cjs");
+const require_SplitButton = require("./SplitButton-B_Y253RU.cjs");
 const require_StarRating = require("./StarRating-Dski54FS.cjs");
 const require_breakpoints = require("./breakpoints.cjs");
 const require_InfoIconTooltip = require("./InfoIconTooltip.cjs");
 const require_textArea = require("./textArea.cjs");
-const require_ViewMore = require("./ViewMore-BBoUvo7p.cjs");
+const require_ViewMore = require("./ViewMore-BcoSRZSl.cjs");
 const require_WebRTCPlayer = require("./WebRTCPlayer-CssffyCM.cjs");
 const require_grid = require("./grid.cjs");
 let _evolve_ui_theme_system = require("@evolve.ui/theme-system");

package/index.d.cts

@@ -47,7 +47,7 @@ import { n as getDisplayDate, t as getDisplayTime } from "./index-C1knx8x3.cjs";
 import { t as Drawer } from "./Drawer-CFZbwg0R.cjs";
 import { n as TooltipProps, r as reactTooltip, t as Tooltip } from "./Tooltip-D6_5Rsmd.cjs";
 import { t as EducationalPopover } from "./EducationalPopover-CLNgGomH.cjs";
-import { a as BaseFavoriteButtonProps, c as IconOnlyFavoriteButtonProps, i as useFeatureFlag, l as LabeledFavoriteButtonProps, n as cn, o as FavoriteButtonProps, r as useFeatureFlags, s as FavoriteButtonVariant, t as FavoriteButton } from "./FavoriteButton-BGF-3dze.cjs";
+import { a as BaseFavoriteButtonProps, c as IconOnlyFavoriteButtonProps, i as useFeatureFlag, l as LabeledFavoriteButtonProps, n as cn, o as FavoriteButtonProps, r as useFeatureFlags, s as FavoriteButtonVariant, t as FavoriteButton } from "./FavoriteButton-B8r_qtlj.cjs";
 import { t as FeatureFlagDevToolsUI } from "./FeatureFlagDevToolsUI-CutvngLI.cjs";
 import { a as UploadValidationContext, b as ValidationError, c as useValidationContext, i as useFileUploadContext, r as FileUploadProvider, s as UploadValidationProvider, t as FileUploadContext } from "./index-BAR19_eg.cjs";
 import { n as useFileValidation } from "./index-Co9X1Vty.cjs";

package/index.d.mts

@@ -47,7 +47,7 @@ import { n as getDisplayDate, t as getDisplayTime } from "./index-C1knx8x3.mjs";
 import { t as Drawer } from "./Drawer-CFZbwg0R.mjs";
 import { n as TooltipProps, r as reactTooltip, t as Tooltip } from "./Tooltip-D6_5Rsmd.mjs";
 import { t as EducationalPopover } from "./EducationalPopover-DP63Yqlm.mjs";
-import { a as BaseFavoriteButtonProps, c as IconOnlyFavoriteButtonProps, i as useFeatureFlag, l as LabeledFavoriteButtonProps, n as cn, o as FavoriteButtonProps, r as useFeatureFlags, s as FavoriteButtonVariant, t as FavoriteButton } from "./FavoriteButton-BZEGWrRo.mjs";
+import { a as BaseFavoriteButtonProps, c as IconOnlyFavoriteButtonProps, i as useFeatureFlag, l as LabeledFavoriteButtonProps, n as cn, o as FavoriteButtonProps, r as useFeatureFlags, s as FavoriteButtonVariant, t as FavoriteButton } from "./FavoriteButton-hIkGjcKH.mjs";
 import { t as FeatureFlagDevToolsUI } from "./FeatureFlagDevToolsUI-CutvngLI.mjs";
 import { a as UploadValidationContext, b as ValidationError, c as useValidationContext, i as useFileUploadContext, r as FileUploadProvider, s as UploadValidationProvider, t as FileUploadContext } from "./index-BAR19_eg.mjs";
 import { n as useFileValidation } from "./index-CQb7B4U7.mjs";

package/index.mjs

@@ -24,14 +24,14 @@ import { ItemBadge } from "./Badge/ItemBadge.mjs";
 import { LiveStatusBadge } from "./Badge/LiveStatusBadge.mjs";
 import { Skeleton } from "./skeleton.mjs";
 import { t as BannerNotification } from "./BannerNotification-DzprO7bZ.mjs";
-import { t as BottomSheet } from "./BottomSheet-ZV_eq3xt.mjs";
+import { t as BottomSheet } from "./BottomSheet-CNVLnEoD.mjs";
 import { t as Breadcrumbs } from "./Breadcrumbs-blgWG9cP.mjs";
 import { t as Callout } from "./Callout-Olv0CM82.mjs";
 import { SingleCard } from "./card/singleCard.mjs";
 import { t as CardGrid } from "./CardGrid-BpX_oOS4.mjs";
 import { t as cardFactory } from "./cardFactory-B0Ah0Qb8.mjs";
 import { createBadge } from "./card/components/createBadge.mjs";
-import { t as FavoriteButton } from "./FavoriteButton-CC3qL0lR.mjs";
+import { t as FavoriteButton } from "./FavoriteButton-7nK77lQP.mjs";
 import { t as SaveConfetti } from "./SaveConfetti-DI0MTd63.mjs";
 import { createFavoriteButton } from "./card/components/createFavoriteButton.mjs";
 import { createImage } from "./card/components/createImage.mjs";
@@ -41,13 +41,13 @@ import { InlineButton } from "./Typography/InlineButton.mjs";
 import { createPriceStatus, priceStatusPreviewOnlyIntlKey, priceStatusSeeSoldPriceIntlKey, priceStatusSoldIntlKey } from "./card/components/createPriceStatus.mjs";
 import { t as Confetti } from "./Confetti-Csdjmzfv.mjs";
 import { n as toast, t as ToastContainer } from "./Toast-CdUaFVpt.mjs";
-import { a as DEFAULT_COOKIE_CATEGORIES, i as ConsentSource, n as DEFAULT_CONSENT_STORAGE_KEY, r as useCookieConsent, t as CookieConsent } from "./CookieConsent-CIwm0bTz.mjs";
+import { a as DEFAULT_COOKIE_CATEGORIES, i as ConsentSource, n as DEFAULT_CONSENT_STORAGE_KEY, r as useCookieConsent, t as CookieConsent } from "./CookieConsent-B9dg9WdC.mjs";
 import { a as ModalContent, c as BackButton, i as ModalHeader, n as ModalSubTitle, o as ModalActions, r as ModalProgressSteps, s as CloseButton, t as ModalTitle } from "./components-BPFB_cmZ.mjs";
 import { ModalContext } from "./modal/context.mjs";
 import { useCloseModal, useForceCloseModal } from "./modal/useCloseModal.mjs";
 import { n as currentPageAtom, r as Page, t as ContentPager } from "./ContentPager-B9UIPahb.mjs";
 import { ProgressSteps } from "./progressSteps.mjs";
-import { t as Modal } from "./Modal-C6gatdtT.mjs";
+import { t as Modal } from "./Modal-DtxWd7Le.mjs";
 import { ToggleSwitch } from "./toggleSwitch.mjs";
 import { t as Countdown } from "./Countdown-Hiu5EYUI.mjs";
 import { Chip } from "./chips/chip.mjs";
@@ -60,23 +60,23 @@ import { n as getDisplayDate, t as getDisplayTime } from "./utils-C6Ngn6x9.mjs";
 import { DateInput } from "./dateInput.mjs";
 import { t as DatePicker } from "./datePicker-DQ32Z8yo.mjs";
 import { t as TimePicker } from "./timePicker-BPrJk5TQ.mjs";
-import { t as Drawer } from "./Drawer-BkCPfK6P.mjs";
+import { t as Drawer } from "./Drawer-DzKEmewj.mjs";
 import { EducationalPopover } from "./educationalPopover.mjs";
 import { t as useFeatureFlags } from "./useFeatureFlags-Dmf_37f8.mjs";
 import { t as FeatureFlagDevToolsUI } from "./FeatureFlagDevToolsUI-B13AuQ2A.mjs";
 import { t as useFeatureFlag } from "./hooks-BudbgYTF.mjs";
 import { a as useValidationContext, c as getFilePluralizationText, i as UploadValidationProvider, l as getFileExtensionsFromAcceptedTypes, n as useFileValidation, r as UploadValidationContext } from "./hooks-D4sJ62Xl.mjs";
-import { a as FileCard, c as FileDropzone, d as useFileUploadContext, i as FilePreviewList, l as FileUploadContext, n as FileDropzoneOverlay, o as ListFileCard, r as FileUpload, s as GridFileCard, t as FileUploadCanvas, u as FileUploadProvider } from "./FileUpload-p_pl9NXr.mjs";
+import { a as FileCard, c as FileDropzone, d as useFileUploadContext, i as FilePreviewList, l as FileUploadContext, n as FileDropzoneOverlay, o as ListFileCard, r as FileUpload, s as GridFileCard, t as FileUploadCanvas, u as FileUploadProvider } from "./FileUpload-BfZOMsLs.mjs";
 import { Tabs } from "./tabs.mjs";
 import { t as Loading } from "./Loading-BenQpF_w.mjs";
-import { i as usePagination, n as Pagination, r as PaginationProvider, t as AdvancedPagination } from "./Pagination-DIpGKMLz.mjs";
-import { n as selectBuiltins, t as Select } from "./Select-BkZu8OLs.mjs";
-import { t as Table } from "./Table-M-rANdMt.mjs";
-import { n as MenuDivider, r as MenuItem, t as Menu } from "./Menu-Cxu8CaX1.mjs";
-import { t as ProgressCircle } from "./ProgressCircle-ae8cvZhe.mjs";
+import { i as usePagination, n as Pagination, r as PaginationProvider, t as AdvancedPagination } from "./Pagination-Dyfeys4B.mjs";
+import { n as selectBuiltins, t as Select } from "./Select-CH_ZN88G.mjs";
+import { t as Table } from "./Table-CQGtDpvH.mjs";
+import { n as MenuDivider, r as MenuItem, t as Menu } from "./Menu-Bn4smlEe.mjs";
+import { t as ProgressCircle } from "./ProgressCircle-zSai1HTT.mjs";
 import { t as CreditCardIcon } from "./CreditCardIcon-rpcjx4S_.mjs";
 import { ImageCluster } from "./imageCluster.mjs";
-import { i as Thumbnails, r as ThumbnailDisplay, t as ImageSlider } from "./ImageSlider-CDrg_TbL.mjs";
+import { i as Thumbnails, r as ThumbnailDisplay, t as ImageSlider } from "./ImageSlider-fdrJ6lIJ.mjs";
 import { InlineNotification } from "./inlineNotification.mjs";
 import { t as JumpMenu } from "./JumpMenu-DcZjAiej.mjs";
 import { NotificationBadge } from "./notificationBadge.mjs";
@@ -87,12 +87,12 @@ import { SelectAsync } from "./selectAsync.mjs";
 import { SelectAsyncCreatable } from "./selectAsyncCreatable.mjs";
 import { SelectCreatable } from "./selectCreatable.mjs";
 import { n as SegmentedControl, t as SegmentedControlGroup } from "./SegmentedControl-DHf4SQQL.mjs";
-import { t as SplitButton } from "./SplitButton-WE5ymwCQ.mjs";
+import { t as SplitButton } from "./SplitButton-_poP9Ykq.mjs";
 import { t as StarRating } from "./StarRating-CRGx_jeU.mjs";
 import { largerScreenThan, maxMediaQuery, minMediaQuery, smallerScreenThan } from "./breakpoints.mjs";
 import { InfoIconTooltip } from "./InfoIconTooltip.mjs";
 import { TextAreaInput } from "./textArea.mjs";
-import { t as ViewMore } from "./ViewMore-BrZPuE4E.mjs";
+import { t as ViewMore } from "./ViewMore-Be0TQZ_2.mjs";
 import { n as useWebRTCStream, t as WebRTCPlayer } from "./WebRTCPlayer-C-sTtskR.mjs";
 import { EasyRestrict, PageGrid, SubGridContainer, baseGridClasses, pageGridClasses, useSubGridCSS } from "./grid.mjs";
 import { cn } from "@evolve.ui/theme-system";

package/menu.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Menu = require("./Menu-ClUogmwE.cjs");
+const require_Menu = require("./Menu-DuDhtoNP.cjs");
 exports.Menu = require_Menu.Menu;
 exports.MenuDivider = require_Menu.MenuDivider;
 exports.MenuItem = require_Menu.MenuItem;

package/menu.mjs

@@ -1,3 +1,3 @@
 'use client';
-import { n as MenuDivider, r as MenuItem, t as Menu } from "./Menu-Cxu8CaX1.mjs";
+import { n as MenuDivider, r as MenuItem, t as Menu } from "./Menu-Bn4smlEe.mjs";
 export { Menu, MenuDivider, MenuItem };

package/modal/useCloseModal.cjs

@@ -84,7 +84,8 @@ const useCloseModal = (handleCloseData) => {
 		}
 		if (!backdrop || !container) return;
 		setModalAnimation("closing");
-		container.addEventListener("animationend", () => {
+		container.addEventListener("animationend", (event) => {
+			if (event.target !== event.currentTarget) return;
 			clearTimeout(timeout);
 			forceCloseModal();
 			storedResolve();

package/modal/useCloseModal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCloseModal.cjs","names":["ModalContext","defaultModalContext","nodeEnv"],"sources":["../../src/Modal/hooks/useCloseModal.ts"],"sourcesContent":["import { useSetAtom } from 'jotai';\nimport { useResetAtom } from 'jotai/utils';\nimport { useCallback, useContext } from 'react';\n\nimport { nodeEnv } from '../../utils/nodeEnv';\nimport { defaultModalContext, ModalContext } from '../context';\n\n/**\n * Closes the modal without an animation.\n *\n * If possible, use `useCloseModal` instead.\n *\n * @param handleCloseData Data that will be passed to the `handleClose` function on the modal.\n * By default, the close button calls with `\"close\"` and the backdrop calls with `\"backdrop\"`.\n * @returns A function that closes the modal instantly.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim to handleClose\nexport const useForceCloseModal = (handleCloseData?: any) => {\n    const modalContext = useContext(ModalContext);\n\n    if (modalContext === defaultModalContext) {\n        throw new Error(\n            'useForceCloseModal must be used within a Modal. If you need to programmatically close a modal, change show to false instead.'\n        );\n    }\n\n    const {\n        handleClose,\n        modalAnimationAtom,\n        modalHasFooterAtom,\n        onModalCloseAnimationEnd,\n        scrollTopAtom,\n        showBottomScrollHintAtom,\n        showTopScrollHintAtom,\n    } = modalContext;\n    const resetShowBottomScrollHint = useResetAtom(showBottomScrollHintAtom);\n    const resetShowTopScrollHint = useResetAtom(showTopScrollHintAtom);\n    const resetScrollTop = useResetAtom(scrollTopAtom);\n    const resetModalHasFooter = useResetAtom(modalHasFooterAtom);\n    const resetIsClosingModal = useResetAtom(modalAnimationAtom);\n\n    return useCallback(() => {\n        resetShowBottomScrollHint();\n        resetShowTopScrollHint();\n        resetScrollTop();\n        resetModalHasFooter();\n        resetIsClosingModal();\n        handleClose?.(handleCloseData);\n\n        // if we are in a test environment, we want to call the onModalCloseAnimationEnd callback since it is not called by the animation end event\n        if (nodeEnv === 'test') {\n            onModalCloseAnimationEnd?.();\n        }\n    }, [\n        resetShowBottomScrollHint,\n        resetShowTopScrollHint,\n        resetScrollTop,\n        resetModalHasFooter,\n        onModalCloseAnimationEnd,\n        resetIsClosingModal,\n        handleClose,\n        handleCloseData,\n    ]);\n};\n\n/**\n * Closes the modal with an animation.\n *\n * If the animation does not finish, the modal will not be closed.\n *\n * If you want to close the modal without an animation, use `useForceCloseModal` instead.\n *\n * @param handleCloseData Data that will be passed to the `handleClose` function on the modal.\n * By default, the close button calls with `\"close\"` and the backdrop calls with `\"backdrop\"`.\n * @returns A function that closes the modal.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim to handleClose\nexport const useCloseModal = (handleCloseData?: any) => {\n    const { modalAnimationAtom } = useContext(ModalContext);\n    const forceCloseModal = useForceCloseModal(handleCloseData);\n    const setModalAnimation = useSetAtom(modalAnimationAtom);\n    const isTestEnv = nodeEnv === 'test';\n\n    /* istanbul ignore next */\n    return useCallback(async () => {\n        if (typeof document === 'undefined') {\n            return;\n        }\n\n        let storedResolve: () => void;\n        let storedReject: () => void;\n        const promiseWeAwait = new Promise<void>((resolve, reject) => {\n            storedResolve = resolve;\n            storedReject = reject;\n        });\n\n        const timeout = setTimeout(() => {\n            // eslint-disable-next-line no-console\n            console.error(\n                'Modal reached error state: Modal show was set to `false` out of order. To fix, make sure you are using useCloseModal (and waiting for the animation to finish) or useForceCloseModal'\n            );\n            storedReject();\n        }, 450);\n\n        // These are hard coded in those components. Lets us use less refs.\n        const backdrop = document.querySelector('.hui-modal-backdrop') as HTMLElement | null;\n        const container = document.querySelector('.hui-modal-container') as HTMLElement | null;\n\n        if (isTestEnv) {\n            clearTimeout(timeout);\n            forceCloseModal();\n            return;\n        }\n\n        if (!backdrop || !container) {\n            return;\n        }\n\n        // If we are in a test environment, we want to close the modal immediately.\n\n        setModalAnimation('closing');\n\n        container.addEventListener('animationend', () => {\n            clearTimeout(timeout);\n            forceCloseModal();\n            storedResolve();\n        });\n\n        // Wait for the animation to finish.\n\n        await promiseWeAwait;\n    }, [forceCloseModal, setModalAnimation, isTestEnv]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,MAAa,sBAAsB,oBAA0B;CACzD,MAAM,gBAAA,GAAA,MAAA,WAAA,CAA0BA,sBAAAA,YAAY;CAE5C,IAAI,iBAAiBC,sBAAAA,qBACjB,MAAM,IAAI,MACN,8HACJ;CAGJ,MAAM,EACF,aACA,oBACA,oBACA,0BACA,eACA,0BACA,0BACA;CACJ,MAAM,6BAAA,GAAA,YAAA,aAAA,CAAyC,wBAAwB;CACvE,MAAM,0BAAA,GAAA,YAAA,aAAA,CAAsC,qBAAqB;CACjE,MAAM,kBAAA,GAAA,YAAA,aAAA,CAA8B,aAAa;CACjD,MAAM,uBAAA,GAAA,YAAA,aAAA,CAAmC,kBAAkB;CAC3D,MAAM,uBAAA,GAAA,YAAA,aAAA,CAAmC,kBAAkB;CAE3D,QAAA,GAAA,MAAA,YAAA,OAAyB;EACrB,0BAA0B;EAC1B,uBAAuB;EACvB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,cAAc,eAAe;EAG7B,IAAIC,gBAAAA,YAAY,QACZ,2BAA2B;CAEnC,GAAG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC;AACL;;;;;;;;;;;;AAcA,MAAa,iBAAiB,oBAA0B;CACpD,MAAM,EAAE,wBAAA,GAAA,MAAA,WAAA,CAAkCF,sBAAAA,YAAY;CACtD,MAAM,kBAAkB,mBAAmB,eAAe;CAC1D,MAAM,qBAAA,GAAA,MAAA,WAAA,CAA+B,kBAAkB;CACvD,MAAM,YAAYE,gBAAAA,YAAY;;CAG9B,QAAA,GAAA,MAAA,YAAA,CAAmB,YAAY;EAC3B,IAAI,OAAO,aAAa,aACpB;EAGJ,IAAI;EACJ,IAAI;EACJ,MAAM,iBAAiB,IAAI,SAAe,SAAS,WAAW;GAC1D,gBAAgB;GAChB,eAAe;EACnB,CAAC;EAED,MAAM,UAAU,iBAAiB;GAE7B,QAAQ,MACJ,sLACJ;GACA,aAAa;EACjB,GAAG,GAAG;EAGN,MAAM,WAAW,SAAS,cAAc,qBAAqB;EAC7D,MAAM,YAAY,SAAS,cAAc,sBAAsB;EAE/D,IAAI,WAAW;GACX,aAAa,OAAO;GACpB,gBAAgB;GAChB;EACJ;EAEA,IAAI,CAAC,YAAY,CAAC,WACd;EAKJ,kBAAkB,SAAS;EAE3B,UAAU,iBAAiB,sBAAsB;GAC7C,aAAa,OAAO;GACpB,gBAAgB;GAChB,cAAc;EAClB,CAAC;EAID,MAAM;CACV,GAAG;EAAC;EAAiB;EAAmB;CAAS,CAAC;AACtD"}
+{"version":3,"file":"useCloseModal.cjs","names":["ModalContext","defaultModalContext","nodeEnv"],"sources":["../../src/Modal/hooks/useCloseModal.ts"],"sourcesContent":["import { useSetAtom } from 'jotai';\nimport { useResetAtom } from 'jotai/utils';\nimport { useCallback, useContext } from 'react';\n\nimport { nodeEnv } from '../../utils/nodeEnv';\nimport { defaultModalContext, ModalContext } from '../context';\n\n/**\n * Closes the modal without an animation.\n *\n * If possible, use `useCloseModal` instead.\n *\n * @param handleCloseData Data that will be passed to the `handleClose` function on the modal.\n * By default, the close button calls with `\"close\"` and the backdrop calls with `\"backdrop\"`.\n * @returns A function that closes the modal instantly.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim to handleClose\nexport const useForceCloseModal = (handleCloseData?: any) => {\n    const modalContext = useContext(ModalContext);\n\n    if (modalContext === defaultModalContext) {\n        throw new Error(\n            'useForceCloseModal must be used within a Modal. If you need to programmatically close a modal, change show to false instead.'\n        );\n    }\n\n    const {\n        handleClose,\n        modalAnimationAtom,\n        modalHasFooterAtom,\n        onModalCloseAnimationEnd,\n        scrollTopAtom,\n        showBottomScrollHintAtom,\n        showTopScrollHintAtom,\n    } = modalContext;\n    const resetShowBottomScrollHint = useResetAtom(showBottomScrollHintAtom);\n    const resetShowTopScrollHint = useResetAtom(showTopScrollHintAtom);\n    const resetScrollTop = useResetAtom(scrollTopAtom);\n    const resetModalHasFooter = useResetAtom(modalHasFooterAtom);\n    const resetIsClosingModal = useResetAtom(modalAnimationAtom);\n\n    return useCallback(() => {\n        resetShowBottomScrollHint();\n        resetShowTopScrollHint();\n        resetScrollTop();\n        resetModalHasFooter();\n        resetIsClosingModal();\n        handleClose?.(handleCloseData);\n\n        // if we are in a test environment, we want to call the onModalCloseAnimationEnd callback since it is not called by the animation end event\n        if (nodeEnv === 'test') {\n            onModalCloseAnimationEnd?.();\n        }\n    }, [\n        resetShowBottomScrollHint,\n        resetShowTopScrollHint,\n        resetScrollTop,\n        resetModalHasFooter,\n        onModalCloseAnimationEnd,\n        resetIsClosingModal,\n        handleClose,\n        handleCloseData,\n    ]);\n};\n\n/**\n * Closes the modal with an animation.\n *\n * If the animation does not finish, the modal will not be closed.\n *\n * If you want to close the modal without an animation, use `useForceCloseModal` instead.\n *\n * @param handleCloseData Data that will be passed to the `handleClose` function on the modal.\n * By default, the close button calls with `\"close\"` and the backdrop calls with `\"backdrop\"`.\n * @returns A function that closes the modal.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim to handleClose\nexport const useCloseModal = (handleCloseData?: any) => {\n    const { modalAnimationAtom } = useContext(ModalContext);\n    const forceCloseModal = useForceCloseModal(handleCloseData);\n    const setModalAnimation = useSetAtom(modalAnimationAtom);\n    const isTestEnv = nodeEnv === 'test';\n\n    /* istanbul ignore next */\n    return useCallback(async () => {\n        if (typeof document === 'undefined') {\n            return;\n        }\n\n        let storedResolve: () => void;\n        let storedReject: () => void;\n        const promiseWeAwait = new Promise<void>((resolve, reject) => {\n            storedResolve = resolve;\n            storedReject = reject;\n        });\n\n        const timeout = setTimeout(() => {\n            // eslint-disable-next-line no-console\n            console.error(\n                'Modal reached error state: Modal show was set to `false` out of order. To fix, make sure you are using useCloseModal (and waiting for the animation to finish) or useForceCloseModal'\n            );\n            storedReject();\n        }, 450);\n\n        // These are hard coded in those components. Lets us use less refs.\n        const backdrop = document.querySelector('.hui-modal-backdrop') as HTMLElement | null;\n        const container = document.querySelector('.hui-modal-container') as HTMLElement | null;\n\n        if (isTestEnv) {\n            clearTimeout(timeout);\n            forceCloseModal();\n            return;\n        }\n\n        if (!backdrop || !container) {\n            return;\n        }\n\n        // If we are in a test environment, we want to close the modal immediately.\n\n        setModalAnimation('closing');\n\n        container.addEventListener('animationend', (event) => {\n            // `animationend` bubbles up from descendants. Under `prefers-reduced-motion: reduce`\n            // every animation collapses to ~1ms, so a child finishing in the same tick would\n            // otherwise clear the watchdog and resolve the close before the modal has animated.\n            if (event.target !== event.currentTarget) {\n                return;\n            }\n\n            clearTimeout(timeout);\n            forceCloseModal();\n            storedResolve();\n        });\n\n        // Wait for the animation to finish.\n\n        await promiseWeAwait;\n    }, [forceCloseModal, setModalAnimation, isTestEnv]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,MAAa,sBAAsB,oBAA0B;CACzD,MAAM,gBAAA,GAAA,MAAA,WAAA,CAA0BA,sBAAAA,YAAY;CAE5C,IAAI,iBAAiBC,sBAAAA,qBACjB,MAAM,IAAI,MACN,8HACJ;CAGJ,MAAM,EACF,aACA,oBACA,oBACA,0BACA,eACA,0BACA,0BACA;CACJ,MAAM,6BAAA,GAAA,YAAA,aAAA,CAAyC,wBAAwB;CACvE,MAAM,0BAAA,GAAA,YAAA,aAAA,CAAsC,qBAAqB;CACjE,MAAM,kBAAA,GAAA,YAAA,aAAA,CAA8B,aAAa;CACjD,MAAM,uBAAA,GAAA,YAAA,aAAA,CAAmC,kBAAkB;CAC3D,MAAM,uBAAA,GAAA,YAAA,aAAA,CAAmC,kBAAkB;CAE3D,QAAA,GAAA,MAAA,YAAA,OAAyB;EACrB,0BAA0B;EAC1B,uBAAuB;EACvB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,cAAc,eAAe;EAG7B,IAAIC,gBAAAA,YAAY,QACZ,2BAA2B;CAEnC,GAAG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC;AACL;;;;;;;;;;;;AAcA,MAAa,iBAAiB,oBAA0B;CACpD,MAAM,EAAE,wBAAA,GAAA,MAAA,WAAA,CAAkCF,sBAAAA,YAAY;CACtD,MAAM,kBAAkB,mBAAmB,eAAe;CAC1D,MAAM,qBAAA,GAAA,MAAA,WAAA,CAA+B,kBAAkB;CACvD,MAAM,YAAYE,gBAAAA,YAAY;;CAG9B,QAAA,GAAA,MAAA,YAAA,CAAmB,YAAY;EAC3B,IAAI,OAAO,aAAa,aACpB;EAGJ,IAAI;EACJ,IAAI;EACJ,MAAM,iBAAiB,IAAI,SAAe,SAAS,WAAW;GAC1D,gBAAgB;GAChB,eAAe;EACnB,CAAC;EAED,MAAM,UAAU,iBAAiB;GAE7B,QAAQ,MACJ,sLACJ;GACA,aAAa;EACjB,GAAG,GAAG;EAGN,MAAM,WAAW,SAAS,cAAc,qBAAqB;EAC7D,MAAM,YAAY,SAAS,cAAc,sBAAsB;EAE/D,IAAI,WAAW;GACX,aAAa,OAAO;GACpB,gBAAgB;GAChB;EACJ;EAEA,IAAI,CAAC,YAAY,CAAC,WACd;EAKJ,kBAAkB,SAAS;EAE3B,UAAU,iBAAiB,iBAAiB,UAAU;GAIlD,IAAI,MAAM,WAAW,MAAM,eACvB;GAGJ,aAAa,OAAO;GACpB,gBAAgB;GAChB,cAAc;EAClB,CAAC;EAID,MAAM;CACV,GAAG;EAAC;EAAiB;EAAmB;CAAS,CAAC;AACtD"}

package/modal/useCloseModal.mjs

@@ -80,7 +80,8 @@ const useCloseModal = (handleCloseData) => {
 		}
 		if (!backdrop || !container) return;
 		setModalAnimation("closing");
-		container.addEventListener("animationend", () => {
+		container.addEventListener("animationend", (event) => {
+			if (event.target !== event.currentTarget) return;
 			clearTimeout(timeout);
 			forceCloseModal();
 			storedResolve();

package/modal/useCloseModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCloseModal.mjs","names":[],"sources":["../../src/Modal/hooks/useCloseModal.ts"],"sourcesContent":["import { useSetAtom } from 'jotai';\nimport { useResetAtom } from 'jotai/utils';\nimport { useCallback, useContext } from 'react';\n\nimport { nodeEnv } from '../../utils/nodeEnv';\nimport { defaultModalContext, ModalContext } from '../context';\n\n/**\n * Closes the modal without an animation.\n *\n * If possible, use `useCloseModal` instead.\n *\n * @param handleCloseData Data that will be passed to the `handleClose` function on the modal.\n * By default, the close button calls with `\"close\"` and the backdrop calls with `\"backdrop\"`.\n * @returns A function that closes the modal instantly.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim to handleClose\nexport const useForceCloseModal = (handleCloseData?: any) => {\n    const modalContext = useContext(ModalContext);\n\n    if (modalContext === defaultModalContext) {\n        throw new Error(\n            'useForceCloseModal must be used within a Modal. If you need to programmatically close a modal, change show to false instead.'\n        );\n    }\n\n    const {\n        handleClose,\n        modalAnimationAtom,\n        modalHasFooterAtom,\n        onModalCloseAnimationEnd,\n        scrollTopAtom,\n        showBottomScrollHintAtom,\n        showTopScrollHintAtom,\n    } = modalContext;\n    const resetShowBottomScrollHint = useResetAtom(showBottomScrollHintAtom);\n    const resetShowTopScrollHint = useResetAtom(showTopScrollHintAtom);\n    const resetScrollTop = useResetAtom(scrollTopAtom);\n    const resetModalHasFooter = useResetAtom(modalHasFooterAtom);\n    const resetIsClosingModal = useResetAtom(modalAnimationAtom);\n\n    return useCallback(() => {\n        resetShowBottomScrollHint();\n        resetShowTopScrollHint();\n        resetScrollTop();\n        resetModalHasFooter();\n        resetIsClosingModal();\n        handleClose?.(handleCloseData);\n\n        // if we are in a test environment, we want to call the onModalCloseAnimationEnd callback since it is not called by the animation end event\n        if (nodeEnv === 'test') {\n            onModalCloseAnimationEnd?.();\n        }\n    }, [\n        resetShowBottomScrollHint,\n        resetShowTopScrollHint,\n        resetScrollTop,\n        resetModalHasFooter,\n        onModalCloseAnimationEnd,\n        resetIsClosingModal,\n        handleClose,\n        handleCloseData,\n    ]);\n};\n\n/**\n * Closes the modal with an animation.\n *\n * If the animation does not finish, the modal will not be closed.\n *\n * If you want to close the modal without an animation, use `useForceCloseModal` instead.\n *\n * @param handleCloseData Data that will be passed to the `handleClose` function on the modal.\n * By default, the close button calls with `\"close\"` and the backdrop calls with `\"backdrop\"`.\n * @returns A function that closes the modal.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim to handleClose\nexport const useCloseModal = (handleCloseData?: any) => {\n    const { modalAnimationAtom } = useContext(ModalContext);\n    const forceCloseModal = useForceCloseModal(handleCloseData);\n    const setModalAnimation = useSetAtom(modalAnimationAtom);\n    const isTestEnv = nodeEnv === 'test';\n\n    /* istanbul ignore next */\n    return useCallback(async () => {\n        if (typeof document === 'undefined') {\n            return;\n        }\n\n        let storedResolve: () => void;\n        let storedReject: () => void;\n        const promiseWeAwait = new Promise<void>((resolve, reject) => {\n            storedResolve = resolve;\n            storedReject = reject;\n        });\n\n        const timeout = setTimeout(() => {\n            // eslint-disable-next-line no-console\n            console.error(\n                'Modal reached error state: Modal show was set to `false` out of order. To fix, make sure you are using useCloseModal (and waiting for the animation to finish) or useForceCloseModal'\n            );\n            storedReject();\n        }, 450);\n\n        // These are hard coded in those components. Lets us use less refs.\n        const backdrop = document.querySelector('.hui-modal-backdrop') as HTMLElement | null;\n        const container = document.querySelector('.hui-modal-container') as HTMLElement | null;\n\n        if (isTestEnv) {\n            clearTimeout(timeout);\n            forceCloseModal();\n            return;\n        }\n\n        if (!backdrop || !container) {\n            return;\n        }\n\n        // If we are in a test environment, we want to close the modal immediately.\n\n        setModalAnimation('closing');\n\n        container.addEventListener('animationend', () => {\n            clearTimeout(timeout);\n            forceCloseModal();\n            storedResolve();\n        });\n\n        // Wait for the animation to finish.\n\n        await promiseWeAwait;\n    }, [forceCloseModal, setModalAnimation, isTestEnv]);\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,sBAAsB,oBAA0B;CACzD,MAAM,eAAe,WAAW,YAAY;CAE5C,IAAI,iBAAiB,qBACjB,MAAM,IAAI,MACN,8HACJ;CAGJ,MAAM,EACF,aACA,oBACA,oBACA,0BACA,eACA,0BACA,0BACA;CACJ,MAAM,4BAA4B,aAAa,wBAAwB;CACvE,MAAM,yBAAyB,aAAa,qBAAqB;CACjE,MAAM,iBAAiB,aAAa,aAAa;CACjD,MAAM,sBAAsB,aAAa,kBAAkB;CAC3D,MAAM,sBAAsB,aAAa,kBAAkB;CAE3D,OAAO,kBAAkB;EACrB,0BAA0B;EAC1B,uBAAuB;EACvB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,cAAc,eAAe;EAG7B,IAAI,YAAY,QACZ,2BAA2B;CAEnC,GAAG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC;AACL;;;;;;;;;;;;AAcA,MAAa,iBAAiB,oBAA0B;CACpD,MAAM,EAAE,uBAAuB,WAAW,YAAY;CACtD,MAAM,kBAAkB,mBAAmB,eAAe;CAC1D,MAAM,oBAAoB,WAAW,kBAAkB;CACvD,MAAM,YAAY,YAAY;;CAG9B,OAAO,YAAY,YAAY;EAC3B,IAAI,OAAO,aAAa,aACpB;EAGJ,IAAI;EACJ,IAAI;EACJ,MAAM,iBAAiB,IAAI,SAAe,SAAS,WAAW;GAC1D,gBAAgB;GAChB,eAAe;EACnB,CAAC;EAED,MAAM,UAAU,iBAAiB;GAE7B,QAAQ,MACJ,sLACJ;GACA,aAAa;EACjB,GAAG,GAAG;EAGN,MAAM,WAAW,SAAS,cAAc,qBAAqB;EAC7D,MAAM,YAAY,SAAS,cAAc,sBAAsB;EAE/D,IAAI,WAAW;GACX,aAAa,OAAO;GACpB,gBAAgB;GAChB;EACJ;EAEA,IAAI,CAAC,YAAY,CAAC,WACd;EAKJ,kBAAkB,SAAS;EAE3B,UAAU,iBAAiB,sBAAsB;GAC7C,aAAa,OAAO;GACpB,gBAAgB;GAChB,cAAc;EAClB,CAAC;EAID,MAAM;CACV,GAAG;EAAC;EAAiB;EAAmB;CAAS,CAAC;AACtD"}
+{"version":3,"file":"useCloseModal.mjs","names":[],"sources":["../../src/Modal/hooks/useCloseModal.ts"],"sourcesContent":["import { useSetAtom } from 'jotai';\nimport { useResetAtom } from 'jotai/utils';\nimport { useCallback, useContext } from 'react';\n\nimport { nodeEnv } from '../../utils/nodeEnv';\nimport { defaultModalContext, ModalContext } from '../context';\n\n/**\n * Closes the modal without an animation.\n *\n * If possible, use `useCloseModal` instead.\n *\n * @param handleCloseData Data that will be passed to the `handleClose` function on the modal.\n * By default, the close button calls with `\"close\"` and the backdrop calls with `\"backdrop\"`.\n * @returns A function that closes the modal instantly.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim to handleClose\nexport const useForceCloseModal = (handleCloseData?: any) => {\n    const modalContext = useContext(ModalContext);\n\n    if (modalContext === defaultModalContext) {\n        throw new Error(\n            'useForceCloseModal must be used within a Modal. If you need to programmatically close a modal, change show to false instead.'\n        );\n    }\n\n    const {\n        handleClose,\n        modalAnimationAtom,\n        modalHasFooterAtom,\n        onModalCloseAnimationEnd,\n        scrollTopAtom,\n        showBottomScrollHintAtom,\n        showTopScrollHintAtom,\n    } = modalContext;\n    const resetShowBottomScrollHint = useResetAtom(showBottomScrollHintAtom);\n    const resetShowTopScrollHint = useResetAtom(showTopScrollHintAtom);\n    const resetScrollTop = useResetAtom(scrollTopAtom);\n    const resetModalHasFooter = useResetAtom(modalHasFooterAtom);\n    const resetIsClosingModal = useResetAtom(modalAnimationAtom);\n\n    return useCallback(() => {\n        resetShowBottomScrollHint();\n        resetShowTopScrollHint();\n        resetScrollTop();\n        resetModalHasFooter();\n        resetIsClosingModal();\n        handleClose?.(handleCloseData);\n\n        // if we are in a test environment, we want to call the onModalCloseAnimationEnd callback since it is not called by the animation end event\n        if (nodeEnv === 'test') {\n            onModalCloseAnimationEnd?.();\n        }\n    }, [\n        resetShowBottomScrollHint,\n        resetShowTopScrollHint,\n        resetScrollTop,\n        resetModalHasFooter,\n        onModalCloseAnimationEnd,\n        resetIsClosingModal,\n        handleClose,\n        handleCloseData,\n    ]);\n};\n\n/**\n * Closes the modal with an animation.\n *\n * If the animation does not finish, the modal will not be closed.\n *\n * If you want to close the modal without an animation, use `useForceCloseModal` instead.\n *\n * @param handleCloseData Data that will be passed to the `handleClose` function on the modal.\n * By default, the close button calls with `\"close\"` and the backdrop calls with `\"backdrop\"`.\n * @returns A function that closes the modal.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim to handleClose\nexport const useCloseModal = (handleCloseData?: any) => {\n    const { modalAnimationAtom } = useContext(ModalContext);\n    const forceCloseModal = useForceCloseModal(handleCloseData);\n    const setModalAnimation = useSetAtom(modalAnimationAtom);\n    const isTestEnv = nodeEnv === 'test';\n\n    /* istanbul ignore next */\n    return useCallback(async () => {\n        if (typeof document === 'undefined') {\n            return;\n        }\n\n        let storedResolve: () => void;\n        let storedReject: () => void;\n        const promiseWeAwait = new Promise<void>((resolve, reject) => {\n            storedResolve = resolve;\n            storedReject = reject;\n        });\n\n        const timeout = setTimeout(() => {\n            // eslint-disable-next-line no-console\n            console.error(\n                'Modal reached error state: Modal show was set to `false` out of order. To fix, make sure you are using useCloseModal (and waiting for the animation to finish) or useForceCloseModal'\n            );\n            storedReject();\n        }, 450);\n\n        // These are hard coded in those components. Lets us use less refs.\n        const backdrop = document.querySelector('.hui-modal-backdrop') as HTMLElement | null;\n        const container = document.querySelector('.hui-modal-container') as HTMLElement | null;\n\n        if (isTestEnv) {\n            clearTimeout(timeout);\n            forceCloseModal();\n            return;\n        }\n\n        if (!backdrop || !container) {\n            return;\n        }\n\n        // If we are in a test environment, we want to close the modal immediately.\n\n        setModalAnimation('closing');\n\n        container.addEventListener('animationend', (event) => {\n            // `animationend` bubbles up from descendants. Under `prefers-reduced-motion: reduce`\n            // every animation collapses to ~1ms, so a child finishing in the same tick would\n            // otherwise clear the watchdog and resolve the close before the modal has animated.\n            if (event.target !== event.currentTarget) {\n                return;\n            }\n\n            clearTimeout(timeout);\n            forceCloseModal();\n            storedResolve();\n        });\n\n        // Wait for the animation to finish.\n\n        await promiseWeAwait;\n    }, [forceCloseModal, setModalAnimation, isTestEnv]);\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,sBAAsB,oBAA0B;CACzD,MAAM,eAAe,WAAW,YAAY;CAE5C,IAAI,iBAAiB,qBACjB,MAAM,IAAI,MACN,8HACJ;CAGJ,MAAM,EACF,aACA,oBACA,oBACA,0BACA,eACA,0BACA,0BACA;CACJ,MAAM,4BAA4B,aAAa,wBAAwB;CACvE,MAAM,yBAAyB,aAAa,qBAAqB;CACjE,MAAM,iBAAiB,aAAa,aAAa;CACjD,MAAM,sBAAsB,aAAa,kBAAkB;CAC3D,MAAM,sBAAsB,aAAa,kBAAkB;CAE3D,OAAO,kBAAkB;EACrB,0BAA0B;EAC1B,uBAAuB;EACvB,eAAe;EACf,oBAAoB;EACpB,oBAAoB;EACpB,cAAc,eAAe;EAG7B,IAAI,YAAY,QACZ,2BAA2B;CAEnC,GAAG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC;AACL;;;;;;;;;;;;AAcA,MAAa,iBAAiB,oBAA0B;CACpD,MAAM,EAAE,uBAAuB,WAAW,YAAY;CACtD,MAAM,kBAAkB,mBAAmB,eAAe;CAC1D,MAAM,oBAAoB,WAAW,kBAAkB;CACvD,MAAM,YAAY,YAAY;;CAG9B,OAAO,YAAY,YAAY;EAC3B,IAAI,OAAO,aAAa,aACpB;EAGJ,IAAI;EACJ,IAAI;EACJ,MAAM,iBAAiB,IAAI,SAAe,SAAS,WAAW;GAC1D,gBAAgB;GAChB,eAAe;EACnB,CAAC;EAED,MAAM,UAAU,iBAAiB;GAE7B,QAAQ,MACJ,sLACJ;GACA,aAAa;EACjB,GAAG,GAAG;EAGN,MAAM,WAAW,SAAS,cAAc,qBAAqB;EAC7D,MAAM,YAAY,SAAS,cAAc,sBAAsB;EAE/D,IAAI,WAAW;GACX,aAAa,OAAO;GACpB,gBAAgB;GAChB;EACJ;EAEA,IAAI,CAAC,YAAY,CAAC,WACd;EAKJ,kBAAkB,SAAS;EAE3B,UAAU,iBAAiB,iBAAiB,UAAU;GAIlD,IAAI,MAAM,WAAW,MAAM,eACvB;GAGJ,aAAa,OAAO;GACpB,gBAAgB;GAChB,cAAc;EAClB,CAAC;EAID,MAAM;CACV,GAAG;EAAC;EAAiB;EAAmB;CAAS,CAAC;AACtD"}

package/modal.cjs

@@ -3,5 +3,5 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Modal = require("./Modal-CiBqXyiK.cjs");
+const require_Modal = require("./Modal-q4HhBAQU.cjs");
 exports.Modal = require_Modal.Modal;

package/modal.mjs

@@ -1,3 +1,3 @@
 'use client';
-import { t as Modal } from "./Modal-C6gatdtT.mjs";
+import { t as Modal } from "./Modal-DtxWd7Le.mjs";
 export { Modal };

package/package.json

@@ -1,10 +1,8 @@
 {
   "name": "@evolve.ui/core-components",
   "dependencies": {
-    "@evolve.ui/theme-system": "^1.1.0",
+    "@evolve.ui/theme-system": "^1.2.0",
     "@dnd-kit/core": "6.3.1",
-    "@dnd-kit/sortable": "10.0.0",
-    "@dnd-kit/utilities": "3.2.2",
     "@floating-ui/react": "0.26.1",
     "@formatjs/icu-messageformat-parser": "2.11.1",
     "@juggle/resize-observer": "3.4.0",
@@ -36,7 +34,7 @@
     "tailwindcss": ">=3"
   },
   "sideEffects": false,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dbarrett24/evolve-ui.git",

package/pagination.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Pagination = require("./Pagination-bAtbN478.cjs");
+const require_Pagination = require("./Pagination-Denb9_zB.cjs");
 exports.AdvancedPagination = require_Pagination.AdvancedPagination;
 exports.Pagination = require_Pagination.Pagination;
 exports.PaginationProvider = require_Pagination.PaginationProvider;

package/pagination.mjs

@@ -1,3 +1,3 @@
 'use client';
-import { i as usePagination, n as Pagination, r as PaginationProvider, t as AdvancedPagination } from "./Pagination-DIpGKMLz.mjs";
+import { i as usePagination, n as Pagination, r as PaginationProvider, t as AdvancedPagination } from "./Pagination-Dyfeys4B.mjs";
 export { AdvancedPagination, Pagination, PaginationProvider, usePagination };

package/progressCircle.cjs

@@ -3,5 +3,5 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_ProgressCircle = require("./ProgressCircle-BC81D9sU.cjs");
+const require_ProgressCircle = require("./ProgressCircle-B6R4dxoV.cjs");
 exports.ProgressCircle = require_ProgressCircle.ProgressCircle;

package/progressCircle.mjs

@@ -1,3 +1,3 @@
 'use client';
-import { t as ProgressCircle } from "./ProgressCircle-ae8cvZhe.mjs";
+import { t as ProgressCircle } from "./ProgressCircle-zSai1HTT.mjs";
 export { ProgressCircle };

package/searchInput.cjs

@@ -33,7 +33,7 @@ const SearchInput = ({ "button-aria-label": buttonAriaLabel = "Search", classNam
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, _evolve_ui_theme_system.cn)("rounded-search-input bg-background-primary", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
-			className: (0, _evolve_ui_theme_system.cn)("overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus]:border-border-selected", {
+			className: (0, _evolve_ui_theme_system.cn)("overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus-visible]:border-border-selected", {
 				"border-0": emphasis === "bold",
 				"h-[32px]": small,
 				"h-[40px]": !small,
@@ -43,9 +43,9 @@ const SearchInput = ({ "button-aria-label": buttonAriaLabel = "Search", classNam
 				"hover:outline-border-black": style === "neutral" && emphasis === "bold",
 				"hover:outline-focus-inverse": style === "inverse"
 			}, {
-				"has-[:focus]:border-border-secondary has-[:focus]:bg-background-primary has-[:focus]:outline has-[:focus]:outline-focus-inverse": emphasis === "bold",
-				"has-[:focus]:outline-2 has-[:focus]:outline-border-black": style === "neutral" && emphasis === "bold",
-				"has-[:focus]:outline-4 has-[:focus]:outline-focus-inverse": style === "inverse"
+				"has-[:focus-visible]:border-border-secondary has-[:focus-visible]:bg-background-primary has-[:focus-visible]:outline has-[:focus-visible]:outline-focus-inverse": emphasis === "bold",
+				"has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-border-black": style === "neutral" && emphasis === "bold",
+				"has-[:focus-visible]:outline-4 has-[:focus-visible]:outline-focus-inverse": style === "inverse"
 			}),
 			"data-hui-id": "SearchInput",
 			"data-testid": testId,

package/searchInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"searchInput.cjs","names":["TextInput","IconButton","MagnifyingGlass"],"sources":["../src/SearchInput/SearchInput.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { FormEventHandler, ReactNode, RefObject, useCallback, useEffect, useState } from 'react';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { MagnifyingGlass } from '../Icons';\nimport { IconWeight } from '../Icons/IconBase';\nimport { TextInput } from '../TextInput/TextInput';\n\ntype Props = {\n    /**\n     * Changes the aria label for the `<button>` element\n     *\n     * @default 'Search button'\n     */\n    'button-aria-label'?: string;\n    className?: string;\n    /**\n     * Allows you to add a data-testid to the component\n     */\n    ['data-testid']?: string;\n    /**\n     * If true, the search input will be disabled\n     */\n    disabled?: boolean;\n    /**\n     * Input emphasis. Currently supports subtle and bold. Defaults to subtle.\n     */\n    emphasis?: 'subtle' | 'bold';\n    /**\n     * Custom content rendered inside the input on the right, before the search button\n     * (e.g. an extra action icon).\n     */\n    endAdornment?: ReactNode;\n    /**\n     * Style variant for the icon. Can be either 'regular' (default), 'bold', 'fill', or 'duotone'.\n     */\n    iconStyle?: IconWeight;\n    /**\n     * Allows you to edit the input id\n     *\n     * @default 'search-input'\n     */\n    id?: string;\n    /**\n     * Set an initial value to pass through\n     *\n     * @default ''\n     */\n    initialValue?: string;\n    /**\n     * Changes the aria label for the `<input>` element\n     *\n     * @default 'Search input'\n     */\n    'input-aria-label'?: string;\n    /**\n     * Ref for the input element\n     */\n    inputRef?: RefObject<HTMLInputElement>;\n    /**\n     * Maximum number of characters allowed in the input.\n     * Uses the native HTML maxLength attribute.\n     */\n    maxLength?: number;\n    /**\n     * Callback that triggers when the input loses focus\n     */\n    onBlur?: () => void;\n    /**\n     * Callback that triggers when you press the clear button\n     */\n    onClear?: () => void;\n    /**\n     * Callback that triggers when the input gains focus\n     */\n    onFocus?: () => void;\n    /**\n     * Callback that triggers when you submit (press enter or button)\n     */\n    onSubmit?: (searchString: string) => void;\n    /**\n     * Callback that triggers when you type\n     */\n    onTextChange?: (searchString: string) => void;\n    /**\n     * Allows you to edit the placeholder text\n     *\n     * @default 'Search'\n     */\n    placeholder?: string;\n    /**\n     * Show in the small size vs the medium one\n     */\n    small?: boolean;\n    /**\n     * Style variant for the input. Can be either 'neutral' (default) or 'inverse' for dark backgrounds.\n     */\n    style?: 'neutral' | 'inverse';\n\n    /**\n     * Controlled value for the input\n     * If provided, initialValue will be ignored\n     */\n    value?: string;\n};\n\nexport const SearchInput = ({\n    'button-aria-label': buttonAriaLabel = 'Search',\n    className,\n    'data-testid': testId = 'search-input',\n    disabled = false,\n    emphasis,\n    endAdornment,\n    iconStyle,\n    id = 'search-input',\n    initialValue = '',\n    'input-aria-label': inputAriaLabel = 'Search input',\n    inputRef,\n    maxLength,\n    onBlur,\n    onClear: onClearProp,\n    onFocus,\n    onSubmit: onSubmitProp,\n    onTextChange,\n    placeholder = 'Search',\n    small = false,\n    style,\n    value,\n}: Props) => {\n    const [search, setSearch] = useState(value ?? initialValue);\n\n    // Add effect to sync with controlled value when it changes\n    useEffect(() => {\n        if (value !== undefined) {\n            setSearch(value);\n        }\n    }, [value]);\n\n    const setSearchText = useCallback(\n        (s: string) => {\n            onTextChange?.(s);\n            setSearch(s);\n        },\n        [onTextChange]\n    );\n\n    const onChange = useCallback<FormEventHandler<HTMLInputElement>>(\n        (e) => {\n            setSearchText(e.currentTarget.value);\n        },\n        [setSearchText]\n    );\n\n    const onClear = useCallback(() => {\n        onClearProp?.();\n        setSearchText('');\n    }, [setSearchText, onClearProp]);\n\n    const onSubmit = useCallback<FormEventHandler<HTMLFormElement>>(\n        (e) => {\n            onSubmitProp?.(search);\n            e.preventDefault();\n        },\n        [onSubmitProp, search]\n    );\n\n    return (\n        <div className={cn('rounded-search-input bg-background-primary', className)}>\n            <form\n                className={cn(\n                    'overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus]:border-border-selected',\n                    {\n                        'border-0': emphasis === 'bold',\n                        'h-[32px]': small, // Smaller due to box-content to prevent clipping\n                        'h-[40px]': !small, // Smaller due to box-content to prevent clipping\n                        'outline outline-1 outline-border-black': emphasis === 'bold' && style === 'neutral',\n                    },\n                    // Hover Styles\n                    {\n                        'hover:border-border-secondary hover:bg-background-hover hover:outline hover:outline-2 hover:outline-border-black':\n                            emphasis === 'bold',\n                        'hover:outline-border-black': style === 'neutral' && emphasis === 'bold',\n                        'hover:outline-focus-inverse': style === 'inverse',\n                    },\n                    // Focus Styles\n                    {\n                        'has-[:focus]:border-border-secondary has-[:focus]:bg-background-primary has-[:focus]:outline has-[:focus]:outline-focus-inverse':\n                            emphasis === 'bold',\n                        'has-[:focus]:outline-2 has-[:focus]:outline-border-black':\n                            style === 'neutral' && emphasis === 'bold',\n                        'has-[:focus]:outline-4 has-[:focus]:outline-focus-inverse': style === 'inverse',\n                    }\n                )}\n                data-hui-id=\"SearchInput\"\n                data-testid={testId}\n                onSubmit={onSubmit}\n            >\n                <TextInput\n                    aria-label={inputAriaLabel}\n                    autoComplete=\"off\"\n                    className={cn('w-full [&>div]:!border-transparent [&>div]:!bg-transparent')}\n                    clearAriaLabel=\"Clear search text\"\n                    disabled={disabled}\n                    emphasis={emphasis}\n                    id={id}\n                    maxLength={maxLength}\n                    onBlur={onBlur}\n                    onChange={onChange}\n                    onClear={onClear}\n                    onFocus={onFocus}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    value={search}\n                />\n                {endAdornment}\n                {search !== '' && emphasis === 'bold' && (\n                    <div className={cn('-ml-2xs h-[24px] border-l border-border-secondary', { 'h-[20px]': small })} />\n                )}\n                <IconButton\n                    aria-label={buttonAriaLabel}\n                    className={cn('mr-2xs self-center justify-self-end !rounded-button', {\n                        'mr-[-1px]': small,\n                    })}\n                    disabled={disabled}\n                    hideTooltip\n                    icon={MagnifyingGlass}\n                    iconStyle={iconStyle}\n                    size=\"sm\"\n                    style={search === '' || emphasis === 'bold' ? 'neutral' : 'primary'}\n                    type=\"submit\"\n                    variant={search === '' || emphasis === 'bold' ? 'transparent' : 'filled'}\n                />\n            </form>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;;;AA0GA,MAAa,eAAe,EACxB,qBAAqB,kBAAkB,UACvC,WACA,eAAe,SAAS,gBACxB,WAAW,OACX,UACA,cACA,WACA,KAAK,gBACL,eAAe,IACf,oBAAoB,iBAAiB,gBACrC,UACA,WACA,QACA,SAAS,aACT,SACA,UAAU,cACV,cACA,cAAc,UACd,QAAQ,OACR,OACA,YACS;CACT,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAsB,SAAS,YAAY;CAG1D,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,IAAI,UAAU,KAAA,GACV,UAAU,KAAK;CAEvB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,iBAAA,GAAA,MAAA,YAAA,EACD,MAAc;EACX,eAAe,CAAC;EAChB,UAAU,CAAC;CACf,GACA,CAAC,YAAY,CACjB;CAEA,MAAM,YAAA,GAAA,MAAA,YAAA,EACD,MAAM;EACH,cAAc,EAAE,cAAc,KAAK;CACvC,GACA,CAAC,aAAa,CAClB;CAEA,MAAM,WAAA,GAAA,MAAA,YAAA,OAA4B;EAC9B,cAAc;EACd,cAAc,EAAE;CACpB,GAAG,CAAC,eAAe,WAAW,CAAC;CAE/B,MAAM,YAAA,GAAA,MAAA,YAAA,EACD,MAAM;EACH,eAAe,MAAM;EACrB,EAAE,eAAe;CACrB,GACA,CAAC,cAAc,MAAM,CACzB;CAEA,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,YAAA,GAAA,wBAAA,GAAA,CAAc,8CAA8C,SAAS;YACtE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CACI,0OACA;IACI,YAAY,aAAa;IACzB,YAAY;IACZ,YAAY,CAAC;IACb,0CAA0C,aAAa,UAAU,UAAU;GAC/E,GAEA;IACI,oHACI,aAAa;IACjB,8BAA8B,UAAU,aAAa,aAAa;IAClE,+BAA+B,UAAU;GAC7C,GAEA;IACI,mIACI,aAAa;IACjB,4DACI,UAAU,aAAa,aAAa;IACxC,6DAA6D,UAAU;GAC3E,CACJ;GACA,eAAY;GACZ,eAAa;GACH;aA3Bd;IA6BI,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,WAAD;KACI,cAAY;KACZ,cAAa;KACb,YAAA,GAAA,wBAAA,GAAA,CAAc,4DAA4D;KAC1E,gBAAe;KACL;KACA;KACN;KACO;KACH;KACE;KACD;KACA;KACI;KACb,KAAK;KACL,OAAO;IACV,CAAA;IACA;IACA,WAAW,MAAM,aAAa,UAC3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,YAAA,GAAA,wBAAA,GAAA,CAAc,qDAAqD,EAAE,YAAY,MAAM,CAAC,EAAI,CAAA;IAErG,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;KACI,cAAY;KACZ,YAAA,GAAA,wBAAA,GAAA,CAAc,uDAAuD,EACjE,aAAa,MACjB,CAAC;KACS;KACV,aAAA;KACA,MAAMC,cAAAA;KACK;KACX,MAAK;KACL,OAAO,WAAW,MAAM,aAAa,SAAS,YAAY;KAC1D,MAAK;KACL,SAAS,WAAW,MAAM,aAAa,SAAS,gBAAgB;IACnE,CAAA;GACC;;CACL,CAAA;AAEb"}
+{"version":3,"file":"searchInput.cjs","names":["TextInput","IconButton","MagnifyingGlass"],"sources":["../src/SearchInput/SearchInput.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { FormEventHandler, ReactNode, RefObject, useCallback, useEffect, useState } from 'react';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { MagnifyingGlass } from '../Icons';\nimport { IconWeight } from '../Icons/IconBase';\nimport { TextInput } from '../TextInput/TextInput';\n\ntype Props = {\n    /**\n     * Changes the aria label for the `<button>` element\n     *\n     * @default 'Search button'\n     */\n    'button-aria-label'?: string;\n    className?: string;\n    /**\n     * Allows you to add a data-testid to the component\n     */\n    ['data-testid']?: string;\n    /**\n     * If true, the search input will be disabled\n     */\n    disabled?: boolean;\n    /**\n     * Input emphasis. Currently supports subtle and bold. Defaults to subtle.\n     */\n    emphasis?: 'subtle' | 'bold';\n    /**\n     * Custom content rendered inside the input on the right, before the search button\n     * (e.g. an extra action icon).\n     */\n    endAdornment?: ReactNode;\n    /**\n     * Style variant for the icon. Can be either 'regular' (default), 'bold', 'fill', or 'duotone'.\n     */\n    iconStyle?: IconWeight;\n    /**\n     * Allows you to edit the input id\n     *\n     * @default 'search-input'\n     */\n    id?: string;\n    /**\n     * Set an initial value to pass through\n     *\n     * @default ''\n     */\n    initialValue?: string;\n    /**\n     * Changes the aria label for the `<input>` element\n     *\n     * @default 'Search input'\n     */\n    'input-aria-label'?: string;\n    /**\n     * Ref for the input element\n     */\n    inputRef?: RefObject<HTMLInputElement>;\n    /**\n     * Maximum number of characters allowed in the input.\n     * Uses the native HTML maxLength attribute.\n     */\n    maxLength?: number;\n    /**\n     * Callback that triggers when the input loses focus\n     */\n    onBlur?: () => void;\n    /**\n     * Callback that triggers when you press the clear button\n     */\n    onClear?: () => void;\n    /**\n     * Callback that triggers when the input gains focus\n     */\n    onFocus?: () => void;\n    /**\n     * Callback that triggers when you submit (press enter or button)\n     */\n    onSubmit?: (searchString: string) => void;\n    /**\n     * Callback that triggers when you type\n     */\n    onTextChange?: (searchString: string) => void;\n    /**\n     * Allows you to edit the placeholder text\n     *\n     * @default 'Search'\n     */\n    placeholder?: string;\n    /**\n     * Show in the small size vs the medium one\n     */\n    small?: boolean;\n    /**\n     * Style variant for the input. Can be either 'neutral' (default) or 'inverse' for dark backgrounds.\n     */\n    style?: 'neutral' | 'inverse';\n\n    /**\n     * Controlled value for the input\n     * If provided, initialValue will be ignored\n     */\n    value?: string;\n};\n\nexport const SearchInput = ({\n    'button-aria-label': buttonAriaLabel = 'Search',\n    className,\n    'data-testid': testId = 'search-input',\n    disabled = false,\n    emphasis,\n    endAdornment,\n    iconStyle,\n    id = 'search-input',\n    initialValue = '',\n    'input-aria-label': inputAriaLabel = 'Search input',\n    inputRef,\n    maxLength,\n    onBlur,\n    onClear: onClearProp,\n    onFocus,\n    onSubmit: onSubmitProp,\n    onTextChange,\n    placeholder = 'Search',\n    small = false,\n    style,\n    value,\n}: Props) => {\n    const [search, setSearch] = useState(value ?? initialValue);\n\n    // Add effect to sync with controlled value when it changes\n    useEffect(() => {\n        if (value !== undefined) {\n            setSearch(value);\n        }\n    }, [value]);\n\n    const setSearchText = useCallback(\n        (s: string) => {\n            onTextChange?.(s);\n            setSearch(s);\n        },\n        [onTextChange]\n    );\n\n    const onChange = useCallback<FormEventHandler<HTMLInputElement>>(\n        (e) => {\n            setSearchText(e.currentTarget.value);\n        },\n        [setSearchText]\n    );\n\n    const onClear = useCallback(() => {\n        onClearProp?.();\n        setSearchText('');\n    }, [setSearchText, onClearProp]);\n\n    const onSubmit = useCallback<FormEventHandler<HTMLFormElement>>(\n        (e) => {\n            onSubmitProp?.(search);\n            e.preventDefault();\n        },\n        [onSubmitProp, search]\n    );\n\n    return (\n        <div className={cn('rounded-search-input bg-background-primary', className)}>\n            <form\n                className={cn(\n                    'overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus-visible]:border-border-selected',\n                    {\n                        'border-0': emphasis === 'bold',\n                        'h-[32px]': small, // Smaller due to box-content to prevent clipping\n                        'h-[40px]': !small, // Smaller due to box-content to prevent clipping\n                        'outline outline-1 outline-border-black': emphasis === 'bold' && style === 'neutral',\n                    },\n                    // Hover Styles\n                    {\n                        'hover:border-border-secondary hover:bg-background-hover hover:outline hover:outline-2 hover:outline-border-black':\n                            emphasis === 'bold',\n                        'hover:outline-border-black': style === 'neutral' && emphasis === 'bold',\n                        'hover:outline-focus-inverse': style === 'inverse',\n                    },\n                    // Focus Styles\n                    {\n                        'has-[:focus-visible]:border-border-secondary has-[:focus-visible]:bg-background-primary has-[:focus-visible]:outline has-[:focus-visible]:outline-focus-inverse':\n                            emphasis === 'bold',\n                        'has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-border-black':\n                            style === 'neutral' && emphasis === 'bold',\n                        'has-[:focus-visible]:outline-4 has-[:focus-visible]:outline-focus-inverse':\n                            style === 'inverse',\n                    }\n                )}\n                data-hui-id=\"SearchInput\"\n                data-testid={testId}\n                onSubmit={onSubmit}\n            >\n                <TextInput\n                    aria-label={inputAriaLabel}\n                    autoComplete=\"off\"\n                    className={cn('w-full [&>div]:!border-transparent [&>div]:!bg-transparent')}\n                    clearAriaLabel=\"Clear search text\"\n                    disabled={disabled}\n                    emphasis={emphasis}\n                    id={id}\n                    maxLength={maxLength}\n                    onBlur={onBlur}\n                    onChange={onChange}\n                    onClear={onClear}\n                    onFocus={onFocus}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    value={search}\n                />\n                {endAdornment}\n                {search !== '' && emphasis === 'bold' && (\n                    <div className={cn('-ml-2xs h-[24px] border-l border-border-secondary', { 'h-[20px]': small })} />\n                )}\n                <IconButton\n                    aria-label={buttonAriaLabel}\n                    className={cn('mr-2xs self-center justify-self-end !rounded-button', {\n                        'mr-[-1px]': small,\n                    })}\n                    disabled={disabled}\n                    hideTooltip\n                    icon={MagnifyingGlass}\n                    iconStyle={iconStyle}\n                    size=\"sm\"\n                    style={search === '' || emphasis === 'bold' ? 'neutral' : 'primary'}\n                    type=\"submit\"\n                    variant={search === '' || emphasis === 'bold' ? 'transparent' : 'filled'}\n                />\n            </form>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;;;AA0GA,MAAa,eAAe,EACxB,qBAAqB,kBAAkB,UACvC,WACA,eAAe,SAAS,gBACxB,WAAW,OACX,UACA,cACA,WACA,KAAK,gBACL,eAAe,IACf,oBAAoB,iBAAiB,gBACrC,UACA,WACA,QACA,SAAS,aACT,SACA,UAAU,cACV,cACA,cAAc,UACd,QAAQ,OACR,OACA,YACS;CACT,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAsB,SAAS,YAAY;CAG1D,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,IAAI,UAAU,KAAA,GACV,UAAU,KAAK;CAEvB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,iBAAA,GAAA,MAAA,YAAA,EACD,MAAc;EACX,eAAe,CAAC;EAChB,UAAU,CAAC;CACf,GACA,CAAC,YAAY,CACjB;CAEA,MAAM,YAAA,GAAA,MAAA,YAAA,EACD,MAAM;EACH,cAAc,EAAE,cAAc,KAAK;CACvC,GACA,CAAC,aAAa,CAClB;CAEA,MAAM,WAAA,GAAA,MAAA,YAAA,OAA4B;EAC9B,cAAc;EACd,cAAc,EAAE;CACpB,GAAG,CAAC,eAAe,WAAW,CAAC;CAE/B,MAAM,YAAA,GAAA,MAAA,YAAA,EACD,MAAM;EACH,eAAe,MAAM;EACrB,EAAE,eAAe;CACrB,GACA,CAAC,cAAc,MAAM,CACzB;CAEA,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,YAAA,GAAA,wBAAA,GAAA,CAAc,8CAA8C,SAAS;YACtE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CACI,kPACA;IACI,YAAY,aAAa;IACzB,YAAY;IACZ,YAAY,CAAC;IACb,0CAA0C,aAAa,UAAU,UAAU;GAC/E,GAEA;IACI,oHACI,aAAa;IACjB,8BAA8B,UAAU,aAAa,aAAa;IAClE,+BAA+B,UAAU;GAC7C,GAEA;IACI,mKACI,aAAa;IACjB,4EACI,UAAU,aAAa,aAAa;IACxC,6EACI,UAAU;GAClB,CACJ;GACA,eAAY;GACZ,eAAa;GACH;aA5Bd;IA8BI,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,WAAD;KACI,cAAY;KACZ,cAAa;KACb,YAAA,GAAA,wBAAA,GAAA,CAAc,4DAA4D;KAC1E,gBAAe;KACL;KACA;KACN;KACO;KACH;KACE;KACD;KACA;KACI;KACb,KAAK;KACL,OAAO;IACV,CAAA;IACA;IACA,WAAW,MAAM,aAAa,UAC3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,YAAA,GAAA,wBAAA,GAAA,CAAc,qDAAqD,EAAE,YAAY,MAAM,CAAC,EAAI,CAAA;IAErG,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;KACI,cAAY;KACZ,YAAA,GAAA,wBAAA,GAAA,CAAc,uDAAuD,EACjE,aAAa,MACjB,CAAC;KACS;KACV,aAAA;KACA,MAAMC,cAAAA;KACK;KACX,MAAK;KACL,OAAO,WAAW,MAAM,aAAa,SAAS,YAAY;KAC1D,MAAK;KACL,SAAS,WAAW,MAAM,aAAa,SAAS,gBAAgB;IACnE,CAAA;GACC;;CACL,CAAA;AAEb"}

package/searchInput.mjs

@@ -29,7 +29,7 @@ const SearchInput = ({ "button-aria-label": buttonAriaLabel = "Search", classNam
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("rounded-search-input bg-background-primary", className),
 		children: /* @__PURE__ */ jsxs("form", {
-			className: cn("overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus]:border-border-selected", {
+			className: cn("overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus-visible]:border-border-selected", {
 				"border-0": emphasis === "bold",
 				"h-[32px]": small,
 				"h-[40px]": !small,
@@ -39,9 +39,9 @@ const SearchInput = ({ "button-aria-label": buttonAriaLabel = "Search", classNam
 				"hover:outline-border-black": style === "neutral" && emphasis === "bold",
 				"hover:outline-focus-inverse": style === "inverse"
 			}, {
-				"has-[:focus]:border-border-secondary has-[:focus]:bg-background-primary has-[:focus]:outline has-[:focus]:outline-focus-inverse": emphasis === "bold",
-				"has-[:focus]:outline-2 has-[:focus]:outline-border-black": style === "neutral" && emphasis === "bold",
-				"has-[:focus]:outline-4 has-[:focus]:outline-focus-inverse": style === "inverse"
+				"has-[:focus-visible]:border-border-secondary has-[:focus-visible]:bg-background-primary has-[:focus-visible]:outline has-[:focus-visible]:outline-focus-inverse": emphasis === "bold",
+				"has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-border-black": style === "neutral" && emphasis === "bold",
+				"has-[:focus-visible]:outline-4 has-[:focus-visible]:outline-focus-inverse": style === "inverse"
 			}),
 			"data-hui-id": "SearchInput",
 			"data-testid": testId,

package/searchInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"searchInput.mjs","names":[],"sources":["../src/SearchInput/SearchInput.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { FormEventHandler, ReactNode, RefObject, useCallback, useEffect, useState } from 'react';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { MagnifyingGlass } from '../Icons';\nimport { IconWeight } from '../Icons/IconBase';\nimport { TextInput } from '../TextInput/TextInput';\n\ntype Props = {\n    /**\n     * Changes the aria label for the `<button>` element\n     *\n     * @default 'Search button'\n     */\n    'button-aria-label'?: string;\n    className?: string;\n    /**\n     * Allows you to add a data-testid to the component\n     */\n    ['data-testid']?: string;\n    /**\n     * If true, the search input will be disabled\n     */\n    disabled?: boolean;\n    /**\n     * Input emphasis. Currently supports subtle and bold. Defaults to subtle.\n     */\n    emphasis?: 'subtle' | 'bold';\n    /**\n     * Custom content rendered inside the input on the right, before the search button\n     * (e.g. an extra action icon).\n     */\n    endAdornment?: ReactNode;\n    /**\n     * Style variant for the icon. Can be either 'regular' (default), 'bold', 'fill', or 'duotone'.\n     */\n    iconStyle?: IconWeight;\n    /**\n     * Allows you to edit the input id\n     *\n     * @default 'search-input'\n     */\n    id?: string;\n    /**\n     * Set an initial value to pass through\n     *\n     * @default ''\n     */\n    initialValue?: string;\n    /**\n     * Changes the aria label for the `<input>` element\n     *\n     * @default 'Search input'\n     */\n    'input-aria-label'?: string;\n    /**\n     * Ref for the input element\n     */\n    inputRef?: RefObject<HTMLInputElement>;\n    /**\n     * Maximum number of characters allowed in the input.\n     * Uses the native HTML maxLength attribute.\n     */\n    maxLength?: number;\n    /**\n     * Callback that triggers when the input loses focus\n     */\n    onBlur?: () => void;\n    /**\n     * Callback that triggers when you press the clear button\n     */\n    onClear?: () => void;\n    /**\n     * Callback that triggers when the input gains focus\n     */\n    onFocus?: () => void;\n    /**\n     * Callback that triggers when you submit (press enter or button)\n     */\n    onSubmit?: (searchString: string) => void;\n    /**\n     * Callback that triggers when you type\n     */\n    onTextChange?: (searchString: string) => void;\n    /**\n     * Allows you to edit the placeholder text\n     *\n     * @default 'Search'\n     */\n    placeholder?: string;\n    /**\n     * Show in the small size vs the medium one\n     */\n    small?: boolean;\n    /**\n     * Style variant for the input. Can be either 'neutral' (default) or 'inverse' for dark backgrounds.\n     */\n    style?: 'neutral' | 'inverse';\n\n    /**\n     * Controlled value for the input\n     * If provided, initialValue will be ignored\n     */\n    value?: string;\n};\n\nexport const SearchInput = ({\n    'button-aria-label': buttonAriaLabel = 'Search',\n    className,\n    'data-testid': testId = 'search-input',\n    disabled = false,\n    emphasis,\n    endAdornment,\n    iconStyle,\n    id = 'search-input',\n    initialValue = '',\n    'input-aria-label': inputAriaLabel = 'Search input',\n    inputRef,\n    maxLength,\n    onBlur,\n    onClear: onClearProp,\n    onFocus,\n    onSubmit: onSubmitProp,\n    onTextChange,\n    placeholder = 'Search',\n    small = false,\n    style,\n    value,\n}: Props) => {\n    const [search, setSearch] = useState(value ?? initialValue);\n\n    // Add effect to sync with controlled value when it changes\n    useEffect(() => {\n        if (value !== undefined) {\n            setSearch(value);\n        }\n    }, [value]);\n\n    const setSearchText = useCallback(\n        (s: string) => {\n            onTextChange?.(s);\n            setSearch(s);\n        },\n        [onTextChange]\n    );\n\n    const onChange = useCallback<FormEventHandler<HTMLInputElement>>(\n        (e) => {\n            setSearchText(e.currentTarget.value);\n        },\n        [setSearchText]\n    );\n\n    const onClear = useCallback(() => {\n        onClearProp?.();\n        setSearchText('');\n    }, [setSearchText, onClearProp]);\n\n    const onSubmit = useCallback<FormEventHandler<HTMLFormElement>>(\n        (e) => {\n            onSubmitProp?.(search);\n            e.preventDefault();\n        },\n        [onSubmitProp, search]\n    );\n\n    return (\n        <div className={cn('rounded-search-input bg-background-primary', className)}>\n            <form\n                className={cn(\n                    'overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus]:border-border-selected',\n                    {\n                        'border-0': emphasis === 'bold',\n                        'h-[32px]': small, // Smaller due to box-content to prevent clipping\n                        'h-[40px]': !small, // Smaller due to box-content to prevent clipping\n                        'outline outline-1 outline-border-black': emphasis === 'bold' && style === 'neutral',\n                    },\n                    // Hover Styles\n                    {\n                        'hover:border-border-secondary hover:bg-background-hover hover:outline hover:outline-2 hover:outline-border-black':\n                            emphasis === 'bold',\n                        'hover:outline-border-black': style === 'neutral' && emphasis === 'bold',\n                        'hover:outline-focus-inverse': style === 'inverse',\n                    },\n                    // Focus Styles\n                    {\n                        'has-[:focus]:border-border-secondary has-[:focus]:bg-background-primary has-[:focus]:outline has-[:focus]:outline-focus-inverse':\n                            emphasis === 'bold',\n                        'has-[:focus]:outline-2 has-[:focus]:outline-border-black':\n                            style === 'neutral' && emphasis === 'bold',\n                        'has-[:focus]:outline-4 has-[:focus]:outline-focus-inverse': style === 'inverse',\n                    }\n                )}\n                data-hui-id=\"SearchInput\"\n                data-testid={testId}\n                onSubmit={onSubmit}\n            >\n                <TextInput\n                    aria-label={inputAriaLabel}\n                    autoComplete=\"off\"\n                    className={cn('w-full [&>div]:!border-transparent [&>div]:!bg-transparent')}\n                    clearAriaLabel=\"Clear search text\"\n                    disabled={disabled}\n                    emphasis={emphasis}\n                    id={id}\n                    maxLength={maxLength}\n                    onBlur={onBlur}\n                    onChange={onChange}\n                    onClear={onClear}\n                    onFocus={onFocus}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    value={search}\n                />\n                {endAdornment}\n                {search !== '' && emphasis === 'bold' && (\n                    <div className={cn('-ml-2xs h-[24px] border-l border-border-secondary', { 'h-[20px]': small })} />\n                )}\n                <IconButton\n                    aria-label={buttonAriaLabel}\n                    className={cn('mr-2xs self-center justify-self-end !rounded-button', {\n                        'mr-[-1px]': small,\n                    })}\n                    disabled={disabled}\n                    hideTooltip\n                    icon={MagnifyingGlass}\n                    iconStyle={iconStyle}\n                    size=\"sm\"\n                    style={search === '' || emphasis === 'bold' ? 'neutral' : 'primary'}\n                    type=\"submit\"\n                    variant={search === '' || emphasis === 'bold' ? 'transparent' : 'filled'}\n                />\n            </form>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;AA0GA,MAAa,eAAe,EACxB,qBAAqB,kBAAkB,UACvC,WACA,eAAe,SAAS,gBACxB,WAAW,OACX,UACA,cACA,WACA,KAAK,gBACL,eAAe,IACf,oBAAoB,iBAAiB,gBACrC,UACA,WACA,QACA,SAAS,aACT,SACA,UAAU,cACV,cACA,cAAc,UACd,QAAQ,OACR,OACA,YACS;CACT,MAAM,CAAC,QAAQ,aAAa,SAAS,SAAS,YAAY;CAG1D,gBAAgB;EACZ,IAAI,UAAU,KAAA,GACV,UAAU,KAAK;CAEvB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,gBAAgB,aACjB,MAAc;EACX,eAAe,CAAC;EAChB,UAAU,CAAC;CACf,GACA,CAAC,YAAY,CACjB;CAEA,MAAM,WAAW,aACZ,MAAM;EACH,cAAc,EAAE,cAAc,KAAK;CACvC,GACA,CAAC,aAAa,CAClB;CAEA,MAAM,UAAU,kBAAkB;EAC9B,cAAc;EACd,cAAc,EAAE;CACpB,GAAG,CAAC,eAAe,WAAW,CAAC;CAE/B,MAAM,WAAW,aACZ,MAAM;EACH,eAAe,MAAM;EACrB,EAAE,eAAe;CACrB,GACA,CAAC,cAAc,MAAM,CACzB;CAEA,OACI,oBAAC,OAAD;EAAK,WAAW,GAAG,8CAA8C,SAAS;YACtE,qBAAC,QAAD;GACI,WAAW,GACP,0OACA;IACI,YAAY,aAAa;IACzB,YAAY;IACZ,YAAY,CAAC;IACb,0CAA0C,aAAa,UAAU,UAAU;GAC/E,GAEA;IACI,oHACI,aAAa;IACjB,8BAA8B,UAAU,aAAa,aAAa;IAClE,+BAA+B,UAAU;GAC7C,GAEA;IACI,mIACI,aAAa;IACjB,4DACI,UAAU,aAAa,aAAa;IACxC,6DAA6D,UAAU;GAC3E,CACJ;GACA,eAAY;GACZ,eAAa;GACH;aA3Bd;IA6BI,oBAAC,WAAD;KACI,cAAY;KACZ,cAAa;KACb,WAAW,GAAG,4DAA4D;KAC1E,gBAAe;KACL;KACA;KACN;KACO;KACH;KACE;KACD;KACA;KACI;KACb,KAAK;KACL,OAAO;IACV,CAAA;IACA;IACA,WAAW,MAAM,aAAa,UAC3B,oBAAC,OAAD,EAAK,WAAW,GAAG,qDAAqD,EAAE,YAAY,MAAM,CAAC,EAAI,CAAA;IAErG,oBAAC,YAAD;KACI,cAAY;KACZ,WAAW,GAAG,uDAAuD,EACjE,aAAa,MACjB,CAAC;KACS;KACV,aAAA;KACA,MAAM;KACK;KACX,MAAK;KACL,OAAO,WAAW,MAAM,aAAa,SAAS,YAAY;KAC1D,MAAK;KACL,SAAS,WAAW,MAAM,aAAa,SAAS,gBAAgB;IACnE,CAAA;GACC;;CACL,CAAA;AAEb"}
+{"version":3,"file":"searchInput.mjs","names":[],"sources":["../src/SearchInput/SearchInput.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { FormEventHandler, ReactNode, RefObject, useCallback, useEffect, useState } from 'react';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { MagnifyingGlass } from '../Icons';\nimport { IconWeight } from '../Icons/IconBase';\nimport { TextInput } from '../TextInput/TextInput';\n\ntype Props = {\n    /**\n     * Changes the aria label for the `<button>` element\n     *\n     * @default 'Search button'\n     */\n    'button-aria-label'?: string;\n    className?: string;\n    /**\n     * Allows you to add a data-testid to the component\n     */\n    ['data-testid']?: string;\n    /**\n     * If true, the search input will be disabled\n     */\n    disabled?: boolean;\n    /**\n     * Input emphasis. Currently supports subtle and bold. Defaults to subtle.\n     */\n    emphasis?: 'subtle' | 'bold';\n    /**\n     * Custom content rendered inside the input on the right, before the search button\n     * (e.g. an extra action icon).\n     */\n    endAdornment?: ReactNode;\n    /**\n     * Style variant for the icon. Can be either 'regular' (default), 'bold', 'fill', or 'duotone'.\n     */\n    iconStyle?: IconWeight;\n    /**\n     * Allows you to edit the input id\n     *\n     * @default 'search-input'\n     */\n    id?: string;\n    /**\n     * Set an initial value to pass through\n     *\n     * @default ''\n     */\n    initialValue?: string;\n    /**\n     * Changes the aria label for the `<input>` element\n     *\n     * @default 'Search input'\n     */\n    'input-aria-label'?: string;\n    /**\n     * Ref for the input element\n     */\n    inputRef?: RefObject<HTMLInputElement>;\n    /**\n     * Maximum number of characters allowed in the input.\n     * Uses the native HTML maxLength attribute.\n     */\n    maxLength?: number;\n    /**\n     * Callback that triggers when the input loses focus\n     */\n    onBlur?: () => void;\n    /**\n     * Callback that triggers when you press the clear button\n     */\n    onClear?: () => void;\n    /**\n     * Callback that triggers when the input gains focus\n     */\n    onFocus?: () => void;\n    /**\n     * Callback that triggers when you submit (press enter or button)\n     */\n    onSubmit?: (searchString: string) => void;\n    /**\n     * Callback that triggers when you type\n     */\n    onTextChange?: (searchString: string) => void;\n    /**\n     * Allows you to edit the placeholder text\n     *\n     * @default 'Search'\n     */\n    placeholder?: string;\n    /**\n     * Show in the small size vs the medium one\n     */\n    small?: boolean;\n    /**\n     * Style variant for the input. Can be either 'neutral' (default) or 'inverse' for dark backgrounds.\n     */\n    style?: 'neutral' | 'inverse';\n\n    /**\n     * Controlled value for the input\n     * If provided, initialValue will be ignored\n     */\n    value?: string;\n};\n\nexport const SearchInput = ({\n    'button-aria-label': buttonAriaLabel = 'Search',\n    className,\n    'data-testid': testId = 'search-input',\n    disabled = false,\n    emphasis,\n    endAdornment,\n    iconStyle,\n    id = 'search-input',\n    initialValue = '',\n    'input-aria-label': inputAriaLabel = 'Search input',\n    inputRef,\n    maxLength,\n    onBlur,\n    onClear: onClearProp,\n    onFocus,\n    onSubmit: onSubmitProp,\n    onTextChange,\n    placeholder = 'Search',\n    small = false,\n    style,\n    value,\n}: Props) => {\n    const [search, setSearch] = useState(value ?? initialValue);\n\n    // Add effect to sync with controlled value when it changes\n    useEffect(() => {\n        if (value !== undefined) {\n            setSearch(value);\n        }\n    }, [value]);\n\n    const setSearchText = useCallback(\n        (s: string) => {\n            onTextChange?.(s);\n            setSearch(s);\n        },\n        [onTextChange]\n    );\n\n    const onChange = useCallback<FormEventHandler<HTMLInputElement>>(\n        (e) => {\n            setSearchText(e.currentTarget.value);\n        },\n        [setSearchText]\n    );\n\n    const onClear = useCallback(() => {\n        onClearProp?.();\n        setSearchText('');\n    }, [setSearchText, onClearProp]);\n\n    const onSubmit = useCallback<FormEventHandler<HTMLFormElement>>(\n        (e) => {\n            onSubmitProp?.(search);\n            e.preventDefault();\n        },\n        [onSubmitProp, search]\n    );\n\n    return (\n        <div className={cn('rounded-search-input bg-background-primary', className)}>\n            <form\n                className={cn(\n                    'overflow-none box-content flex items-center gap-2xs rounded-search-input border border-border-secondary bg-background-primary outline-1 outline-background-critical-dark hover:border-border-hover has-[:focus-visible]:border-border-selected',\n                    {\n                        'border-0': emphasis === 'bold',\n                        'h-[32px]': small, // Smaller due to box-content to prevent clipping\n                        'h-[40px]': !small, // Smaller due to box-content to prevent clipping\n                        'outline outline-1 outline-border-black': emphasis === 'bold' && style === 'neutral',\n                    },\n                    // Hover Styles\n                    {\n                        'hover:border-border-secondary hover:bg-background-hover hover:outline hover:outline-2 hover:outline-border-black':\n                            emphasis === 'bold',\n                        'hover:outline-border-black': style === 'neutral' && emphasis === 'bold',\n                        'hover:outline-focus-inverse': style === 'inverse',\n                    },\n                    // Focus Styles\n                    {\n                        'has-[:focus-visible]:border-border-secondary has-[:focus-visible]:bg-background-primary has-[:focus-visible]:outline has-[:focus-visible]:outline-focus-inverse':\n                            emphasis === 'bold',\n                        'has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-border-black':\n                            style === 'neutral' && emphasis === 'bold',\n                        'has-[:focus-visible]:outline-4 has-[:focus-visible]:outline-focus-inverse':\n                            style === 'inverse',\n                    }\n                )}\n                data-hui-id=\"SearchInput\"\n                data-testid={testId}\n                onSubmit={onSubmit}\n            >\n                <TextInput\n                    aria-label={inputAriaLabel}\n                    autoComplete=\"off\"\n                    className={cn('w-full [&>div]:!border-transparent [&>div]:!bg-transparent')}\n                    clearAriaLabel=\"Clear search text\"\n                    disabled={disabled}\n                    emphasis={emphasis}\n                    id={id}\n                    maxLength={maxLength}\n                    onBlur={onBlur}\n                    onChange={onChange}\n                    onClear={onClear}\n                    onFocus={onFocus}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    value={search}\n                />\n                {endAdornment}\n                {search !== '' && emphasis === 'bold' && (\n                    <div className={cn('-ml-2xs h-[24px] border-l border-border-secondary', { 'h-[20px]': small })} />\n                )}\n                <IconButton\n                    aria-label={buttonAriaLabel}\n                    className={cn('mr-2xs self-center justify-self-end !rounded-button', {\n                        'mr-[-1px]': small,\n                    })}\n                    disabled={disabled}\n                    hideTooltip\n                    icon={MagnifyingGlass}\n                    iconStyle={iconStyle}\n                    size=\"sm\"\n                    style={search === '' || emphasis === 'bold' ? 'neutral' : 'primary'}\n                    type=\"submit\"\n                    variant={search === '' || emphasis === 'bold' ? 'transparent' : 'filled'}\n                />\n            </form>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;AA0GA,MAAa,eAAe,EACxB,qBAAqB,kBAAkB,UACvC,WACA,eAAe,SAAS,gBACxB,WAAW,OACX,UACA,cACA,WACA,KAAK,gBACL,eAAe,IACf,oBAAoB,iBAAiB,gBACrC,UACA,WACA,QACA,SAAS,aACT,SACA,UAAU,cACV,cACA,cAAc,UACd,QAAQ,OACR,OACA,YACS;CACT,MAAM,CAAC,QAAQ,aAAa,SAAS,SAAS,YAAY;CAG1D,gBAAgB;EACZ,IAAI,UAAU,KAAA,GACV,UAAU,KAAK;CAEvB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,gBAAgB,aACjB,MAAc;EACX,eAAe,CAAC;EAChB,UAAU,CAAC;CACf,GACA,CAAC,YAAY,CACjB;CAEA,MAAM,WAAW,aACZ,MAAM;EACH,cAAc,EAAE,cAAc,KAAK;CACvC,GACA,CAAC,aAAa,CAClB;CAEA,MAAM,UAAU,kBAAkB;EAC9B,cAAc;EACd,cAAc,EAAE;CACpB,GAAG,CAAC,eAAe,WAAW,CAAC;CAE/B,MAAM,WAAW,aACZ,MAAM;EACH,eAAe,MAAM;EACrB,EAAE,eAAe;CACrB,GACA,CAAC,cAAc,MAAM,CACzB;CAEA,OACI,oBAAC,OAAD;EAAK,WAAW,GAAG,8CAA8C,SAAS;YACtE,qBAAC,QAAD;GACI,WAAW,GACP,kPACA;IACI,YAAY,aAAa;IACzB,YAAY;IACZ,YAAY,CAAC;IACb,0CAA0C,aAAa,UAAU,UAAU;GAC/E,GAEA;IACI,oHACI,aAAa;IACjB,8BAA8B,UAAU,aAAa,aAAa;IAClE,+BAA+B,UAAU;GAC7C,GAEA;IACI,mKACI,aAAa;IACjB,4EACI,UAAU,aAAa,aAAa;IACxC,6EACI,UAAU;GAClB,CACJ;GACA,eAAY;GACZ,eAAa;GACH;aA5Bd;IA8BI,oBAAC,WAAD;KACI,cAAY;KACZ,cAAa;KACb,WAAW,GAAG,4DAA4D;KAC1E,gBAAe;KACL;KACA;KACN;KACO;KACH;KACE;KACD;KACA;KACI;KACb,KAAK;KACL,OAAO;IACV,CAAA;IACA;IACA,WAAW,MAAM,aAAa,UAC3B,oBAAC,OAAD,EAAK,WAAW,GAAG,qDAAqD,EAAE,YAAY,MAAM,CAAC,EAAI,CAAA;IAErG,oBAAC,YAAD;KACI,cAAY;KACZ,WAAW,GAAG,uDAAuD,EACjE,aAAa,MACjB,CAAC;KACS;KACV,aAAA;KACA,MAAM;KACK;KACX,MAAK;KACL,OAAO,WAAW,MAAM,aAAa,SAAS,YAAY;KAC1D,MAAK;KACL,SAAS,WAAW,MAAM,aAAa,SAAS,gBAAgB;IACnE,CAAA;GACC;;CACL,CAAA;AAEb"}

package/select.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Select = require("./Select-BXDjzyDs.cjs");
+const require_Select = require("./Select-DCCcyLT4.cjs");
 let react_select = require("react-select");
 exports.Select = require_Select.Select;
 exports.reactSelectBuiltins = react_select.components;

package/select.mjs

@@ -1,3 +1,3 @@
 'use client';
-import { n as selectBuiltins, t as Select } from "./Select-BkZu8OLs.mjs";
+import { n as selectBuiltins, t as Select } from "./Select-CH_ZN88G.mjs";
 export { Select, selectBuiltins as reactSelectBuiltins };

package/selectAsync.cjs

@@ -4,7 +4,7 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 const require_rolldown_runtime = require("./rolldown-runtime-D6vf50IK.cjs");
-const require_Select = require("./Select-BXDjzyDs.cjs");
+const require_Select = require("./Select-DCCcyLT4.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_select_async = require("react-select/async");
 react_select_async = require_rolldown_runtime.__toESM(react_select_async);

package/selectAsync.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { t as Select } from "./Select-BkZu8OLs.mjs";
+import { t as Select } from "./Select-CH_ZN88G.mjs";
 import { jsx } from "react/jsx-runtime";
 import ReactSelectAsync from "react-select/async";
 //#region src/Select/SelectAsync.tsx

package/selectAsyncCreatable.cjs

@@ -4,7 +4,7 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 const require_rolldown_runtime = require("./rolldown-runtime-D6vf50IK.cjs");
-const require_Select = require("./Select-BXDjzyDs.cjs");
+const require_Select = require("./Select-DCCcyLT4.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_select_async_creatable = require("react-select/async-creatable");
 react_select_async_creatable = require_rolldown_runtime.__toESM(react_select_async_creatable);

package/selectAsyncCreatable.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { t as Select } from "./Select-BkZu8OLs.mjs";
+import { t as Select } from "./Select-CH_ZN88G.mjs";
 import { jsx } from "react/jsx-runtime";
 import ReactSelectAsyncCreatable from "react-select/async-creatable";
 //#region src/Select/SelectAsyncCreatable.tsx

package/selectCreatable.cjs

@@ -4,7 +4,7 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 const require_rolldown_runtime = require("./rolldown-runtime-D6vf50IK.cjs");
-const require_Select = require("./Select-BXDjzyDs.cjs");
+const require_Select = require("./Select-DCCcyLT4.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_select_creatable = require("react-select/creatable");
 react_select_creatable = require_rolldown_runtime.__toESM(react_select_creatable);

package/selectCreatable.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { t as Select } from "./Select-BkZu8OLs.mjs";
+import { t as Select } from "./Select-CH_ZN88G.mjs";
 import { jsx } from "react/jsx-runtime";
 import ReactSelectCreatable from "react-select/creatable";
 //#region src/Select/SelectCreatable.tsx