@razorpay/blade 11.17.0 → 11.17.1

package/build/lib/native/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { getComponentId } from '../isValidAllowedChildren/isValidAllowedChildren.js';
 import { throwBladeError } from '../logger/logger.js';
 
-var useVerifyAllowedChildren=function useVerifyAllowedChildren(props){var children=props.children,componentName=props.componentName,allowedComponents=props.allowedComponents;if(__DEV__){React__default.Children.forEach(children,function(child){var isValidChild=child&&allowedComponents.includes(getComponentId(child));if(!isValidChild){throwBladeError({message:`Only \`${allowedComponents.join(', ')}\` components are accepted in \`${componentName}\` children`,moduleName:componentName});}});}};
+var useVerifyAllowedChildren=function useVerifyAllowedChildren(props){var children=props.children,componentName=props.componentName,allowedComponents=props.allowedComponents;if(__DEV__){React__default.Children.forEach(children,function(child){if(!React__default.isValidElement(child))return;var isValidChild=child&&allowedComponents.includes(getComponentId(child));if(!isValidChild){throwBladeError({message:`Only \`${allowedComponents.join(', ')}\` components are accepted in \`${componentName}\` children`,moduleName:componentName});}});}};
 
 export { useVerifyAllowedChildren };
 //# sourceMappingURL=useVerifyAllowedChildren.js.map

package/build/lib/native/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVerifyAllowedChildren.js","sources":["../../../../../src/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.ts"],"sourcesContent":["import React from 'react';\nimport { getComponentId } from '../isValidAllowedChildren';\nimport { throwBladeError } from '../logger';\n\n/**\n * Verify if the passed childrens are only of allowedComponents list\n */\nconst useVerifyAllowedChildren = (props: {\n  children: React.ReactNode;\n  componentName: string;\n  allowedComponents: string[];\n}): void => {\n  const { children, componentName, allowedComponents } = props;\n  if (__DEV__) {\n    React.Children.forEach(children, (child) => {\n      const isValidChild = child && allowedComponents.includes(getComponentId(child)!);\n      if (!isValidChild) {\n        throwBladeError({\n          message: `Only \\`${allowedComponents.join(\n            ', ',\n          )}\\` components are accepted in \\`${componentName}\\` children`,\n          moduleName: componentName,\n        });\n      }\n    });\n  }\n};\n\nexport { useVerifyAllowedChildren };\n"],"names":["useVerifyAllowedChildren","props","children","componentName","allowedComponents","__DEV__","React","Children","forEach","child","isValidChild","includes","getComponentId","throwBladeError","message","join","moduleName"],"mappings":";;;;AAOM,IAAAA,wBAAwB,CAAG,SAA3BA,wBAAwBA,CAAIC,KAIjC,CAAW,CACV,IAAQC,QAAQ,CAAuCD,KAAK,CAApDC,QAAQ,CAAEC,aAAa,CAAwBF,KAAK,CAA1CE,aAAa,CAAEC,iBAAiB,CAAKH,KAAK,CAA3BG,iBAAiB,CAClD,GAAIC,OAAO,CAAE,CACXC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACN,QAAQ,CAAE,SAACO,KAAK,CAAK,CAC1C,IAAMC,YAAY,CAAGD,KAAK,EAAIL,iBAAiB,CAACO,QAAQ,CAACC,cAAc,CAACH,KAAK,CAAE,CAAC,CAChF,GAAI,CAACC,YAAY,CAAE,CACjBG,eAAe,CAAC,CACdC,OAAO,CAAG,CAAA,OAAA,EAASV,iBAAiB,CAACW,IAAI,CACvC,IACF,CAAE,CAAA,gCAAA,EAAkCZ,aAAc,CAAA,WAAA,CAAY,CAC9Da,UAAU,CAAEb,aACd,CAAC,CAAC,CACJ,CACF,CAAC,CAAC,CACJ,CACF;;;;"}
+{"version":3,"file":"useVerifyAllowedChildren.js","sources":["../../../../../src/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.ts"],"sourcesContent":["import React from 'react';\nimport { getComponentId } from '../isValidAllowedChildren';\nimport { throwBladeError } from '../logger';\n\n/**\n * Verify if the passed childrens are only of allowedComponents list\n */\nconst useVerifyAllowedChildren = (props: {\n  children: React.ReactNode;\n  componentName: string;\n  allowedComponents: string[];\n}): void => {\n  const { children, componentName, allowedComponents } = props;\n  if (__DEV__) {\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n      const isValidChild = child && allowedComponents.includes(getComponentId(child)!);\n      if (!isValidChild) {\n        throwBladeError({\n          message: `Only \\`${allowedComponents.join(\n            ', ',\n          )}\\` components are accepted in \\`${componentName}\\` children`,\n          moduleName: componentName,\n        });\n      }\n    });\n  }\n};\n\nexport { useVerifyAllowedChildren };\n"],"names":["useVerifyAllowedChildren","props","children","componentName","allowedComponents","__DEV__","React","Children","forEach","child","isValidElement","isValidChild","includes","getComponentId","throwBladeError","message","join","moduleName"],"mappings":";;;;AAOM,IAAAA,wBAAwB,CAAG,SAA3BA,wBAAwBA,CAAIC,KAIjC,CAAW,CACV,IAAQC,QAAQ,CAAuCD,KAAK,CAApDC,QAAQ,CAAEC,aAAa,CAAwBF,KAAK,CAA1CE,aAAa,CAAEC,iBAAiB,CAAKH,KAAK,CAA3BG,iBAAiB,CAClD,GAAIC,OAAO,CAAE,CACXC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACN,QAAQ,CAAE,SAACO,KAAK,CAAK,CAC1C,GAAI,CAACH,cAAK,CAACI,cAAc,CAACD,KAAK,CAAC,CAAE,OAClC,IAAME,YAAY,CAAGF,KAAK,EAAIL,iBAAiB,CAACQ,QAAQ,CAACC,cAAc,CAACJ,KAAK,CAAE,CAAC,CAChF,GAAI,CAACE,YAAY,CAAE,CACjBG,eAAe,CAAC,CACdC,OAAO,CAAG,CAAA,OAAA,EAASX,iBAAiB,CAACY,IAAI,CACvC,IACF,CAAE,CAAkCb,gCAAAA,EAAAA,aAAc,CAAY,WAAA,CAAA,CAC9Dc,UAAU,CAAEd,aACd,CAAC,CAAC,CACJ,CACF,CAAC,CAAC,CACJ,CACF;;;;"}

package/build/lib/web/development/components/Modal/Modal.web.js

@@ -9,25 +9,26 @@ export { ModalBody } from './ModalBody.web.js';
 import { ModalContext } from './ModalContext.js';
 import { ModalBackdrop } from './ModalBackdrop.js';
 import { modalMaxWidth, modalMinWidth, modalMaxHeight, modalResponsiveScreenGap, modalBorderRadius } from './modalTokens.js';
+import { componentIds } from './constants.js';
 import '../../utils/index.js';
 import '../Box/BaseBox/index.js';
 import '../BladeProvider/index.js';
 import '../Box/index.js';
-import '../../utils/isValidAllowedChildren/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/makeAccessible/index.js';
 import '../../utils/logger/index.js';
 import { componentZIndices } from '../../utils/componentZIndices.js';
+import '../../utils/useVerifyAllowedChildren/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
 import useTheme from '../BladeProvider/useTheme.js';
-import { logger, throwBladeError } from '../../utils/logger/logger.js';
-import { isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
-import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { logger } from '../../utils/logger/logger.js';
+import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
 import { Box } from '../Box/Box.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 
@@ -100,16 +101,10 @@ var Modal = function Modal(_ref2) {
   };
 
   // Only allow ModalHeader, ModalBody and ModalFooter as children
-  var validChildren = React__default.Children.map(children, function (child) {
-    if (isValidAllowedChildren(child, MetaConstants.ModalHeader) || isValidAllowedChildren(child, MetaConstants.ModalBody) || isValidAllowedChildren(child, MetaConstants.ModalFooter)) {
-      return child;
-    } else if (true) {
-      throwBladeError({
-        message: 'Modal only accepts ModalHeader, ModalBody and ModalFooter as children',
-        moduleName: 'Modal'
-      });
-    }
-    return null;
+  useVerifyAllowedChildren({
+    allowedComponents: [componentIds.ModalHeader, componentIds.ModalBody, componentIds.ModalFooter],
+    children: children,
+    componentName: 'Modal'
   });
   return /*#__PURE__*/jsx(FloatingPortal, {
     children: /*#__PURE__*/jsx(ModalContext.Provider, {
@@ -144,7 +139,7 @@ var Modal = function Modal(_ref2) {
             onKeyDown: handleKeyDown,
             isVisible: isVisible,
             ref: refs.setFloating,
-            children: validChildren
+            children: children
           }))]
         })
       }) : null

package/build/lib/web/development/components/Modal/Modal.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger, throwBladeError } from '~utils/logger';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst entry = keyframes`\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n`;\n\nconst exit = keyframes`\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n`;\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean }>(({ isVisible, theme }) => {\n  return css`\n    box-shadow: ${theme.elevation.highRaised};\n    position: fixed;\n    transform: translate(-50%, -50%);\n    opacity: ${isVisible ? 1 : 0};\n    animation: ${isVisible ? entry : exit}\n      ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}\n      ${isVisible\n        ? castWebType(theme.motion.easing.entrance.revealing)\n        : castWebType(theme.motion.easing.exit.revealing)};\n  `;\n});\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = componentZIndices.modal,\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.xmoderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, defaultInitialFocusRef, isVisible],\n  );\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press\n    if (event?.key === 'Escape' || event?.code === 'Escape') {\n      onDismiss();\n    }\n  };\n\n  // Only allow ModalHeader, ModalBody and ModalFooter as children\n  const validChildren = React.Children.map(children, (child) => {\n    if (\n      isValidAllowedChildren(child, MetaConstants.ModalHeader) ||\n      isValidAllowedChildren(child, MetaConstants.ModalBody) ||\n      isValidAllowedChildren(child, MetaConstants.ModalFooter)\n    ) {\n      return child;\n    } else if (__DEV__) {\n      throwBladeError({\n        message: 'Modal only accepts ModalHeader, ModalBody and ModalFooter as children',\n        moduleName: 'Modal',\n      });\n    }\n    return null;\n  });\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n              <ModalBackdrop />\n              <ModalContent\n                {...metaAttribute({\n                  name: MetaConstants.Modal,\n                })}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                maxWidth={makeSize(modalMaxWidth[size])}\n                minWidth={makeSize(modalMinWidth)}\n                maxHeight={modalMaxHeight}\n                width={`calc(100vw - ${makeSize(modalResponsiveScreenGap)})`}\n                borderRadius={modalBorderRadius}\n                backgroundColor=\"popup.background.subtle\"\n                position=\"absolute\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                top=\"50%\"\n                left=\"50%\"\n                onKeyDown={handleKeyDown}\n                isVisible={isVisible}\n                ref={refs.setFloating}\n              >\n                {validChildren}\n              </ModalContent>\n            </Box>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["entry","keyframes","exit","ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","xmoderate","easing","entrance","revealing","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","initialFocusRef","_ref2$size","size","accessibilityLabel","_ref2$zIndex","zIndex","componentZIndices","modal","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","validChildren","Children","map","child","isValidAllowedChildren","MetaConstants","ModalHeader","ModalBody","ModalFooter","throwBladeError","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","makeAccessible","role","label","maxWidth","makeSize","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","concat","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","display","flexDirection","top","left","onKeyDown","ref","setFloating"],"mappings":"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"}
+{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { componentIds } from './constants';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger } from '~utils/logger';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren';\n\nconst entry = keyframes`\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n`;\n\nconst exit = keyframes`\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n`;\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean }>(({ isVisible, theme }) => {\n  return css`\n    box-shadow: ${theme.elevation.highRaised};\n    position: fixed;\n    transform: translate(-50%, -50%);\n    opacity: ${isVisible ? 1 : 0};\n    animation: ${isVisible ? entry : exit}\n      ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}\n      ${isVisible\n        ? castWebType(theme.motion.easing.entrance.revealing)\n        : castWebType(theme.motion.easing.exit.revealing)};\n  `;\n});\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = componentZIndices.modal,\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.xmoderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, defaultInitialFocusRef, isVisible],\n  );\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press\n    if (event?.key === 'Escape' || event?.code === 'Escape') {\n      onDismiss();\n    }\n  };\n\n  // Only allow ModalHeader, ModalBody and ModalFooter as children\n  useVerifyAllowedChildren({\n    allowedComponents: [componentIds.ModalHeader, componentIds.ModalBody, componentIds.ModalFooter],\n    children,\n    componentName: 'Modal',\n  });\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n              <ModalBackdrop />\n              <ModalContent\n                {...metaAttribute({\n                  name: MetaConstants.Modal,\n                })}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                maxWidth={makeSize(modalMaxWidth[size])}\n                minWidth={makeSize(modalMinWidth)}\n                maxHeight={modalMaxHeight}\n                width={`calc(100vw - ${makeSize(modalResponsiveScreenGap)})`}\n                borderRadius={modalBorderRadius}\n                backgroundColor=\"popup.background.subtle\"\n                position=\"absolute\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                top=\"50%\"\n                left=\"50%\"\n                onKeyDown={handleKeyDown}\n                isVisible={isVisible}\n                ref={refs.setFloating}\n              >\n                {children}\n              </ModalContent>\n            </Box>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["entry","keyframes","exit","ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","xmoderate","easing","entrance","revealing","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","initialFocusRef","_ref2$size","size","accessibilityLabel","_ref2$zIndex","zIndex","componentZIndices","modal","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","useVerifyAllowedChildren","allowedComponents","componentIds","ModalHeader","ModalBody","ModalFooter","componentName","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","MetaConstants","makeAccessible","role","label","maxWidth","makeSize","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","concat","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","display","flexDirection","top","left","onKeyDown","ref","setFloating"],"mappings":"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"}

package/build/lib/web/development/components/Modal/ModalBody.web.js

@@ -1,5 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
+import { componentIds } from './constants.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/metaAttribute/index.js';
@@ -27,7 +28,7 @@ var _ModalBody = function _ModalBody(_ref) {
   }));
 };
 var ModalBody = /*#__PURE__*/assignWithoutSideEffects(_ModalBody, {
-  componentId: MetaConstants.ModalBody
+  componentId: componentIds.ModalBody
 });
 
 export { ModalBody };

package/build/lib/web/development/components/Modal/ModalBody.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBody.web.js","sources":["../../../../../../src/components/Modal/ModalBody.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { assignWithoutSideEffects } from '~src/utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport type { SpacingValueType } from '~components/Box/BaseBox';\n\ntype ModalBodyProps = {\n  children: React.ReactNode;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.6`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page\n   */\n  padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.6'>;\n};\n\nconst _ModalBody = ({ children, padding = 'spacing.6' }: ModalBodyProps): React.ReactElement => {\n  const contentRef = React.useRef<any>(null);\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.ModalBody })}\n      padding={padding}\n      ref={contentRef}\n      overflowY=\"auto\"\n      overflowX=\"hidden\"\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst ModalBody = assignWithoutSideEffects(_ModalBody, {\n  componentId: MetaConstants.ModalBody,\n});\n\nexport { ModalBody };\nexport type { ModalBodyProps };\n"],"names":["_ModalBody","_ref","children","_ref$padding","padding","contentRef","React","useRef","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","ModalBody","ref","overflowY","overflowX","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;AAmBA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAgF;AAAA,EAAA,IAA1EC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CAAEG,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,WAAW,GAAAA,YAAA,CAAA;AACnD,EAAA,IAAME,UAAU,GAAGC,cAAK,CAACC,MAAM,CAAM,IAAI,CAAC,CAAA;EAE1C,oBACEC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,SAAAA;AAAU,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACpDV,IAAAA,OAAO,EAAEA,OAAQ;AACjBW,IAAAA,GAAG,EAAEV,UAAW;AAChBW,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,SAAS,EAAC,QAAQ;AAAAf,IAAAA,QAAA,EAEjBA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMY,SAAS,gBAAGI,wBAAwB,CAAClB,UAAU,EAAE;EACrDmB,WAAW,EAAEN,aAAa,CAACC,SAAAA;AAC7B,CAAC;;;;"}
+{"version":3,"file":"ModalBody.web.js","sources":["../../../../../../src/components/Modal/ModalBody.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { componentIds } from './constants';\nimport { assignWithoutSideEffects } from '~src/utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport type { SpacingValueType } from '~components/Box/BaseBox';\n\ntype ModalBodyProps = {\n  children: React.ReactNode;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.6`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page\n   */\n  padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.6'>;\n};\n\nconst _ModalBody = ({ children, padding = 'spacing.6' }: ModalBodyProps): React.ReactElement => {\n  const contentRef = React.useRef<any>(null);\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.ModalBody })}\n      padding={padding}\n      ref={contentRef}\n      overflowY=\"auto\"\n      overflowX=\"hidden\"\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst ModalBody = assignWithoutSideEffects(_ModalBody, {\n  componentId: componentIds.ModalBody,\n});\n\nexport { ModalBody };\nexport type { ModalBodyProps };\n"],"names":["_ModalBody","_ref","children","_ref$padding","padding","contentRef","React","useRef","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","ModalBody","ref","overflowY","overflowX","assignWithoutSideEffects","componentId","componentIds"],"mappings":";;;;;;;;;;;;;;AAoBA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAgF;AAAA,EAAA,IAA1EC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CAAEG,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,WAAW,GAAAA,YAAA,CAAA;AACnD,EAAA,IAAME,UAAU,GAAGC,cAAK,CAACC,MAAM,CAAM,IAAI,CAAC,CAAA;EAE1C,oBACEC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,SAAAA;AAAU,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACpDV,IAAAA,OAAO,EAAEA,OAAQ;AACjBW,IAAAA,GAAG,EAAEV,UAAW;AAChBW,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,SAAS,EAAC,QAAQ;AAAAf,IAAAA,QAAA,EAEjBA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMY,SAAS,gBAAGI,wBAAwB,CAAClB,UAAU,EAAE;EACrDmB,WAAW,EAAEC,YAAY,CAACN,SAAAA;AAC5B,CAAC;;;;"}

package/build/lib/web/development/components/Modal/ModalFooter.web.js

@@ -1,4 +1,5 @@
 import React__default from 'react';
+import { componentIds } from './constants.js';
 import { BaseFooter } from '../BaseHeaderFooter/BaseFooter.js';
 import '../Box/index.js';
 import '../../utils/metaAttribute/index.js';
@@ -21,7 +22,7 @@ var _ModalFooter = function _ModalFooter(props) {
   });
 };
 var ModalFooter = /*#__PURE__*/assignWithoutSideEffects(_ModalFooter, {
-  componentId: MetaConstants.ModalFooter
+  componentId: componentIds.ModalFooter
 });
 
 export { ModalFooter };

package/build/lib/web/development/components/Modal/ModalFooter.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooter.web.js","sources":["../../../../../../src/components/Modal/ModalFooter.web.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport type { BaseFooterProps } from '~components/BaseHeaderFooter/BaseFooter';\nimport { Box } from '~components/Box';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype ModalFooterProps = Pick<BaseFooterProps, 'children'>;\n\nconst _ModalFooter = (props: ModalFooterProps): React.ReactElement => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const containerRef = React.useRef<any>(null);\n\n  return (\n    <Box ref={containerRef}>\n      <BaseFooter\n        metaComponentName={MetaConstants.ModalFooter}\n        children={props.children}\n        showDivider={true}\n      />\n    </Box>\n  );\n};\n\nconst ModalFooter = assignWithoutSideEffects(_ModalFooter, {\n  componentId: MetaConstants.ModalFooter,\n});\n\nexport { ModalFooter };\nexport type { ModalFooterProps };\n"],"names":["_ModalFooter","props","containerRef","React","useRef","_jsx","Box","ref","children","BaseFooter","metaComponentName","MetaConstants","ModalFooter","showDivider","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;AASA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAAuB,EAAyB;AACpE;AACA,EAAA,IAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,CAAM,IAAI,CAAC,CAAA;EAE5C,oBACEC,GAAA,CAACC,GAAG,EAAA;AAACC,IAAAA,GAAG,EAAEL,YAAa;IAAAM,QAAA,eACrBH,GAAA,CAACI,UAAU,EAAA;MACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;MAC7CJ,QAAQ,EAAEP,KAAK,CAACO,QAAS;AACzBK,MAAAA,WAAW,EAAE,IAAA;KACd,CAAA;AAAC,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMD,WAAW,gBAAGE,wBAAwB,CAACd,YAAY,EAAE;EACzDe,WAAW,EAAEJ,aAAa,CAACC,WAAAA;AAC7B,CAAC;;;;"}
+{"version":3,"file":"ModalFooter.web.js","sources":["../../../../../../src/components/Modal/ModalFooter.web.tsx"],"sourcesContent":["import React from 'react';\nimport { componentIds } from './constants';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport type { BaseFooterProps } from '~components/BaseHeaderFooter/BaseFooter';\nimport { Box } from '~components/Box';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype ModalFooterProps = Pick<BaseFooterProps, 'children'>;\n\nconst _ModalFooter = (props: ModalFooterProps): React.ReactElement => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const containerRef = React.useRef<any>(null);\n\n  return (\n    <Box ref={containerRef}>\n      <BaseFooter\n        metaComponentName={MetaConstants.ModalFooter}\n        children={props.children}\n        showDivider={true}\n      />\n    </Box>\n  );\n};\n\nconst ModalFooter = assignWithoutSideEffects(_ModalFooter, {\n  componentId: componentIds.ModalFooter,\n});\n\nexport { ModalFooter };\nexport type { ModalFooterProps };\n"],"names":["_ModalFooter","props","containerRef","React","useRef","_jsx","Box","ref","children","BaseFooter","metaComponentName","MetaConstants","ModalFooter","showDivider","assignWithoutSideEffects","componentId","componentIds"],"mappings":";;;;;;;;;;;AAUA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAAuB,EAAyB;AACpE;AACA,EAAA,IAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,CAAM,IAAI,CAAC,CAAA;EAE5C,oBACEC,GAAA,CAACC,GAAG,EAAA;AAACC,IAAAA,GAAG,EAAEL,YAAa;IAAAM,QAAA,eACrBH,GAAA,CAACI,UAAU,EAAA;MACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;MAC7CJ,QAAQ,EAAEP,KAAK,CAACO,QAAS;AACzBK,MAAAA,WAAW,EAAE,IAAA;KACd,CAAA;AAAC,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMD,WAAW,gBAAGE,wBAAwB,CAACd,YAAY,EAAE;EACzDe,WAAW,EAAEC,YAAY,CAACJ,WAAAA;AAC5B,CAAC;;;;"}

package/build/lib/web/development/components/Modal/ModalHeader.web.js

@@ -1,4 +1,5 @@
 import { useModalContext } from './ModalContext.js';
+import { componentIds } from './constants.js';
 import '../../utils/index.js';
 import { BaseHeader } from '../BaseHeaderFooter/BaseHeader.js';
 import '../Box/BaseBox/index.js';
@@ -61,7 +62,7 @@ var _ModalHeader = function _ModalHeader(_ref) {
   });
 };
 var ModalHeader = /*#__PURE__*/assignWithoutSideEffects(_ModalHeader, {
-  componentId: MetaConstants.ModalHeader
+  componentId: componentIds.ModalHeader
 });
 
 export { ModalHeader };

package/build/lib/web/development/components/Modal/ModalHeader.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.web.js","sources":["../../../../../../src/components/Modal/ModalHeader.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useModalContext } from './ModalContext';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { makeSize } from '~utils';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { componentZIndices } from '~utils/componentZIndices';\n\ntype ModalHeaderProps = Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix'\n>;\n\nconst _ModalHeader = ({\n  leading,\n  subtitle,\n  title,\n  titleSuffix,\n  trailing,\n}: ModalHeaderProps): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = useModalContext();\n\n  const isHeaderEmpty = !(title || subtitle || leading || trailing);\n  return isHeaderEmpty ? (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"absolute\"\n      top=\"spacing.5\"\n      right=\"spacing.5\"\n      width={makeSize(size[28])}\n      height={makeSize(size[28])}\n      flexShrink={0}\n      backgroundColor=\"popup.background.subtle\"\n      borderRadius=\"max\"\n      zIndex={componentZIndices.modal}\n    >\n      <IconButton\n        ref={defaultInitialFocusRef}\n        size=\"large\"\n        icon={CloseIcon}\n        accessibilityLabel=\"Close\"\n        onClick={close}\n      />\n    </BaseBox>\n  ) : (\n    <BaseHeader\n      metaComponentName={MetaConstants.ModalHeader}\n      title={title}\n      subtitle={subtitle}\n      leading={leading}\n      trailing={trailing}\n      titleSuffix={titleSuffix}\n      closeButtonRef={defaultInitialFocusRef}\n      showCloseButton={true}\n      onCloseButtonClick={close}\n    />\n  );\n};\nconst ModalHeader = assignWithoutSideEffects(_ModalHeader, {\n  componentId: MetaConstants.ModalHeader,\n});\n\nexport { ModalHeader };\nexport type { ModalHeaderProps };\n"],"names":["_ModalHeader","_ref","leading","subtitle","title","titleSuffix","trailing","_useModalContext","useModalContext","close","defaultInitialFocusRef","isHeaderEmpty","_jsx","BaseBox","display","alignItems","justifyContent","position","top","right","width","makeSize","size","height","flexShrink","backgroundColor","borderRadius","zIndex","componentZIndices","modal","children","IconButton","ref","icon","CloseIcon","accessibilityLabel","onClick","BaseHeader","metaComponentName","MetaConstants","ModalHeader","closeButtonRef","showCloseButton","onCloseButtonClick","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAkBA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ,CAAA;AAER,EAAA,IAAAC,gBAAA,GAA0CC,eAAe,EAAE;IAAnDC,KAAK,GAAAF,gBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,gBAAA,CAAtBG,sBAAsB,CAAA;EAErC,IAAMC,aAAa,GAAG,EAAEP,KAAK,IAAID,QAAQ,IAAID,OAAO,IAAII,QAAQ,CAAC,CAAA;AACjE,EAAA,OAAOK,aAAa,gBAClBC,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,WAAW;AACjBC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC1BC,IAAAA,MAAM,EAAEF,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC3BE,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,eAAe,EAAC,yBAAyB;AACzCC,IAAAA,YAAY,EAAC,KAAK;IAClBC,MAAM,EAAEC,iBAAiB,CAACC,KAAM;IAAAC,QAAA,eAEhClB,GAAA,CAACmB,UAAU,EAAA;AACTC,MAAAA,GAAG,EAAEtB,sBAAuB;AAC5BY,MAAAA,IAAI,EAAC,OAAO;AACZW,MAAAA,IAAI,EAAEC,SAAU;AAChBC,MAAAA,kBAAkB,EAAC,OAAO;AAC1BC,MAAAA,OAAO,EAAE3B,KAAAA;KACV,CAAA;AAAC,GACK,CAAC,gBAEVG,GAAA,CAACyB,UAAU,EAAA;IACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;AAC7CpC,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,WAAW,EAAEA,WAAY;AACzBoC,IAAAA,cAAc,EAAE/B,sBAAuB;AACvCgC,IAAAA,eAAe,EAAE,IAAK;AACtBC,IAAAA,kBAAkB,EAAElC,KAAAA;AAAM,GAC3B,CACF,CAAA;AACH,CAAC,CAAA;AACD,IAAM+B,WAAW,gBAAGI,wBAAwB,CAAC5C,YAAY,EAAE;EACzD6C,WAAW,EAAEN,aAAa,CAACC,WAAAA;AAC7B,CAAC;;;;"}
+{"version":3,"file":"ModalHeader.web.js","sources":["../../../../../../src/components/Modal/ModalHeader.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useModalContext } from './ModalContext';\nimport { componentIds } from './constants';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { makeSize } from '~utils';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { componentZIndices } from '~utils/componentZIndices';\n\ntype ModalHeaderProps = Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix'\n>;\n\nconst _ModalHeader = ({\n  leading,\n  subtitle,\n  title,\n  titleSuffix,\n  trailing,\n}: ModalHeaderProps): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = useModalContext();\n\n  const isHeaderEmpty = !(title || subtitle || leading || trailing);\n  return isHeaderEmpty ? (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"absolute\"\n      top=\"spacing.5\"\n      right=\"spacing.5\"\n      width={makeSize(size[28])}\n      height={makeSize(size[28])}\n      flexShrink={0}\n      backgroundColor=\"popup.background.subtle\"\n      borderRadius=\"max\"\n      zIndex={componentZIndices.modal}\n    >\n      <IconButton\n        ref={defaultInitialFocusRef}\n        size=\"large\"\n        icon={CloseIcon}\n        accessibilityLabel=\"Close\"\n        onClick={close}\n      />\n    </BaseBox>\n  ) : (\n    <BaseHeader\n      metaComponentName={MetaConstants.ModalHeader}\n      title={title}\n      subtitle={subtitle}\n      leading={leading}\n      trailing={trailing}\n      titleSuffix={titleSuffix}\n      closeButtonRef={defaultInitialFocusRef}\n      showCloseButton={true}\n      onCloseButtonClick={close}\n    />\n  );\n};\nconst ModalHeader = assignWithoutSideEffects(_ModalHeader, {\n  componentId: componentIds.ModalHeader,\n});\n\nexport { ModalHeader };\nexport type { ModalHeaderProps };\n"],"names":["_ModalHeader","_ref","leading","subtitle","title","titleSuffix","trailing","_useModalContext","useModalContext","close","defaultInitialFocusRef","isHeaderEmpty","_jsx","BaseBox","display","alignItems","justifyContent","position","top","right","width","makeSize","size","height","flexShrink","backgroundColor","borderRadius","zIndex","componentZIndices","modal","children","IconButton","ref","icon","CloseIcon","accessibilityLabel","onClick","BaseHeader","metaComponentName","MetaConstants","ModalHeader","closeButtonRef","showCloseButton","onCloseButtonClick","assignWithoutSideEffects","componentId","componentIds"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAmBA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ,CAAA;AAER,EAAA,IAAAC,gBAAA,GAA0CC,eAAe,EAAE;IAAnDC,KAAK,GAAAF,gBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,gBAAA,CAAtBG,sBAAsB,CAAA;EAErC,IAAMC,aAAa,GAAG,EAAEP,KAAK,IAAID,QAAQ,IAAID,OAAO,IAAII,QAAQ,CAAC,CAAA;AACjE,EAAA,OAAOK,aAAa,gBAClBC,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,WAAW;AACjBC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC1BC,IAAAA,MAAM,EAAEF,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC3BE,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,eAAe,EAAC,yBAAyB;AACzCC,IAAAA,YAAY,EAAC,KAAK;IAClBC,MAAM,EAAEC,iBAAiB,CAACC,KAAM;IAAAC,QAAA,eAEhClB,GAAA,CAACmB,UAAU,EAAA;AACTC,MAAAA,GAAG,EAAEtB,sBAAuB;AAC5BY,MAAAA,IAAI,EAAC,OAAO;AACZW,MAAAA,IAAI,EAAEC,SAAU;AAChBC,MAAAA,kBAAkB,EAAC,OAAO;AAC1BC,MAAAA,OAAO,EAAE3B,KAAAA;KACV,CAAA;AAAC,GACK,CAAC,gBAEVG,GAAA,CAACyB,UAAU,EAAA;IACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;AAC7CpC,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,WAAW,EAAEA,WAAY;AACzBoC,IAAAA,cAAc,EAAE/B,sBAAuB;AACvCgC,IAAAA,eAAe,EAAE,IAAK;AACtBC,IAAAA,kBAAkB,EAAElC,KAAAA;AAAM,GAC3B,CACF,CAAA;AACH,CAAC,CAAA;AACD,IAAM+B,WAAW,gBAAGI,wBAAwB,CAAC5C,YAAY,EAAE;EACzD6C,WAAW,EAAEC,YAAY,CAACN,WAAAA;AAC5B,CAAC;;;;"}

package/build/lib/web/development/components/Modal/constants.js

@@ -0,0 +1,8 @@
+var componentIds = {
+  ModalHeader: 'ModalHeader',
+  ModalBody: 'ModalBody',
+  ModalFooter: 'ModalFooter'
+};
+
+export { componentIds };
+//# sourceMappingURL=constants.js.map

package/build/lib/web/development/components/Modal/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/components/Modal/constants.ts"],"sourcesContent":["const componentIds = {\n  ModalHeader: 'ModalHeader',\n  ModalBody: 'ModalBody',\n  ModalFooter: 'ModalFooter',\n};\n\nexport { componentIds };\n"],"names":["componentIds","ModalHeader","ModalBody","ModalFooter"],"mappings":"AAAA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,WAAW,EAAE,aAAa;AAC1BC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,WAAW,EAAE,aAAA;AACf;;;;"}

package/build/lib/web/development/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js

@@ -13,6 +13,7 @@ var useVerifyAllowedChildren = function useVerifyAllowedChildren(props) {
     allowedComponents = props.allowedComponents;
   if (true) {
     React__default.Children.forEach(children, function (child) {
+      if (! /*#__PURE__*/React__default.isValidElement(child)) return;
       var isValidChild = child && allowedComponents.includes(getComponentId(child));
       if (!isValidChild) {
         throwBladeError({

package/build/lib/web/development/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVerifyAllowedChildren.js","sources":["../../../../../../src/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.ts"],"sourcesContent":["import React from 'react';\nimport { getComponentId } from '../isValidAllowedChildren';\nimport { throwBladeError } from '../logger';\n\n/**\n * Verify if the passed childrens are only of allowedComponents list\n */\nconst useVerifyAllowedChildren = (props: {\n  children: React.ReactNode;\n  componentName: string;\n  allowedComponents: string[];\n}): void => {\n  const { children, componentName, allowedComponents } = props;\n  if (__DEV__) {\n    React.Children.forEach(children, (child) => {\n      const isValidChild = child && allowedComponents.includes(getComponentId(child)!);\n      if (!isValidChild) {\n        throwBladeError({\n          message: `Only \\`${allowedComponents.join(\n            ', ',\n          )}\\` components are accepted in \\`${componentName}\\` children`,\n          moduleName: componentName,\n        });\n      }\n    });\n  }\n};\n\nexport { useVerifyAllowedChildren };\n"],"names":["useVerifyAllowedChildren","props","children","componentName","allowedComponents","React","Children","forEach","child","isValidChild","includes","getComponentId","throwBladeError","message","concat","join","moduleName"],"mappings":";;;;;;AAIA;AACA;AACA;AACA,IAAMA,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIC,KAIjC,EAAW;AACV,EAAA,IAAQC,QAAQ,GAAuCD,KAAK,CAApDC,QAAQ;IAAEC,aAAa,GAAwBF,KAAK,CAA1CE,aAAa;IAAEC,iBAAiB,GAAKH,KAAK,CAA3BG,iBAAiB,CAAA;AAClD,EAAA,IAAI,IAAO,EAAE;IACXC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACL,QAAQ,EAAE,UAACM,KAAK,EAAK;AAC1C,MAAA,IAAMC,YAAY,GAAGD,KAAK,IAAIJ,iBAAiB,CAACM,QAAQ,CAACC,cAAc,CAACH,KAAK,CAAE,CAAC,CAAA;MAChF,IAAI,CAACC,YAAY,EAAE;AACjBG,QAAAA,eAAe,CAAC;AACdC,UAAAA,OAAO,EAAAC,QAAAA,CAAAA,MAAA,CAAYV,iBAAiB,CAACW,IAAI,CACvC,IACF,CAAC,EAAA,gCAAA,CAAA,CAAAD,MAAA,CAAmCX,aAAa,EAAa,YAAA,CAAA;AAC9Da,UAAAA,UAAU,EAAEb,aAAAA;AACd,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAC,CAAC,CAAA;AACJ,GAAA;AACF;;;;"}
+{"version":3,"file":"useVerifyAllowedChildren.js","sources":["../../../../../../src/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.ts"],"sourcesContent":["import React from 'react';\nimport { getComponentId } from '../isValidAllowedChildren';\nimport { throwBladeError } from '../logger';\n\n/**\n * Verify if the passed childrens are only of allowedComponents list\n */\nconst useVerifyAllowedChildren = (props: {\n  children: React.ReactNode;\n  componentName: string;\n  allowedComponents: string[];\n}): void => {\n  const { children, componentName, allowedComponents } = props;\n  if (__DEV__) {\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n      const isValidChild = child && allowedComponents.includes(getComponentId(child)!);\n      if (!isValidChild) {\n        throwBladeError({\n          message: `Only \\`${allowedComponents.join(\n            ', ',\n          )}\\` components are accepted in \\`${componentName}\\` children`,\n          moduleName: componentName,\n        });\n      }\n    });\n  }\n};\n\nexport { useVerifyAllowedChildren };\n"],"names":["useVerifyAllowedChildren","props","children","componentName","allowedComponents","React","Children","forEach","child","isValidElement","isValidChild","includes","getComponentId","throwBladeError","message","concat","join","moduleName"],"mappings":";;;;;;AAIA;AACA;AACA;AACA,IAAMA,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIC,KAIjC,EAAW;AACV,EAAA,IAAQC,QAAQ,GAAuCD,KAAK,CAApDC,QAAQ;IAAEC,aAAa,GAAwBF,KAAK,CAA1CE,aAAa;IAAEC,iBAAiB,GAAKH,KAAK,CAA3BG,iBAAiB,CAAA;AAClD,EAAA,IAAI,IAAO,EAAE;IACXC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACL,QAAQ,EAAE,UAACM,KAAK,EAAK;AAC1C,MAAA,IAAI,eAACH,cAAK,CAACI,cAAc,CAACD,KAAK,CAAC,EAAE,OAAA;AAClC,MAAA,IAAME,YAAY,GAAGF,KAAK,IAAIJ,iBAAiB,CAACO,QAAQ,CAACC,cAAc,CAACJ,KAAK,CAAE,CAAC,CAAA;MAChF,IAAI,CAACE,YAAY,EAAE;AACjBG,QAAAA,eAAe,CAAC;AACdC,UAAAA,OAAO,EAAAC,QAAAA,CAAAA,MAAA,CAAYX,iBAAiB,CAACY,IAAI,CACvC,IACF,CAAC,EAAA,gCAAA,CAAA,CAAAD,MAAA,CAAmCZ,aAAa,EAAa,YAAA,CAAA;AAC9Dc,UAAAA,UAAU,EAAEd,aAAAA;AACd,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAC,CAAC,CAAA;AACJ,GAAA;AACF;;;;"}

package/build/lib/web/production/components/Modal/Modal.web.js

@@ -9,25 +9,26 @@ export { ModalBody } from './ModalBody.web.js';
 import { ModalContext } from './ModalContext.js';
 import { ModalBackdrop } from './ModalBackdrop.js';
 import { modalMaxWidth, modalMinWidth, modalMaxHeight, modalResponsiveScreenGap, modalBorderRadius } from './modalTokens.js';
+import { componentIds } from './constants.js';
 import '../../utils/index.js';
 import '../Box/BaseBox/index.js';
 import '../BladeProvider/index.js';
 import '../Box/index.js';
-import '../../utils/isValidAllowedChildren/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/makeAccessible/index.js';
 import '../../utils/logger/index.js';
 import { componentZIndices } from '../../utils/componentZIndices.js';
+import '../../utils/useVerifyAllowedChildren/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
 import useTheme from '../BladeProvider/useTheme.js';
-import { logger, throwBladeError } from '../../utils/logger/logger.js';
-import { isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
-import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { logger } from '../../utils/logger/logger.js';
+import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
 import { Box } from '../Box/Box.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 
@@ -100,16 +101,10 @@ var Modal = function Modal(_ref2) {
   };
 
   // Only allow ModalHeader, ModalBody and ModalFooter as children
-  var validChildren = React__default.Children.map(children, function (child) {
-    if (isValidAllowedChildren(child, MetaConstants.ModalHeader) || isValidAllowedChildren(child, MetaConstants.ModalBody) || isValidAllowedChildren(child, MetaConstants.ModalFooter)) {
-      return child;
-    } else if (false) {
-      throwBladeError({
-        message: 'Modal only accepts ModalHeader, ModalBody and ModalFooter as children',
-        moduleName: 'Modal'
-      });
-    }
-    return null;
+  useVerifyAllowedChildren({
+    allowedComponents: [componentIds.ModalHeader, componentIds.ModalBody, componentIds.ModalFooter],
+    children: children,
+    componentName: 'Modal'
   });
   return /*#__PURE__*/jsx(FloatingPortal, {
     children: /*#__PURE__*/jsx(ModalContext.Provider, {
@@ -144,7 +139,7 @@ var Modal = function Modal(_ref2) {
             onKeyDown: handleKeyDown,
             isVisible: isVisible,
             ref: refs.setFloating,
-            children: validChildren
+            children: children
           }))]
         })
       }) : null

package/build/lib/web/production/components/Modal/Modal.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger, throwBladeError } from '~utils/logger';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst entry = keyframes`\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n`;\n\nconst exit = keyframes`\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n`;\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean }>(({ isVisible, theme }) => {\n  return css`\n    box-shadow: ${theme.elevation.highRaised};\n    position: fixed;\n    transform: translate(-50%, -50%);\n    opacity: ${isVisible ? 1 : 0};\n    animation: ${isVisible ? entry : exit}\n      ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}\n      ${isVisible\n        ? castWebType(theme.motion.easing.entrance.revealing)\n        : castWebType(theme.motion.easing.exit.revealing)};\n  `;\n});\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = componentZIndices.modal,\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.xmoderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, defaultInitialFocusRef, isVisible],\n  );\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press\n    if (event?.key === 'Escape' || event?.code === 'Escape') {\n      onDismiss();\n    }\n  };\n\n  // Only allow ModalHeader, ModalBody and ModalFooter as children\n  const validChildren = React.Children.map(children, (child) => {\n    if (\n      isValidAllowedChildren(child, MetaConstants.ModalHeader) ||\n      isValidAllowedChildren(child, MetaConstants.ModalBody) ||\n      isValidAllowedChildren(child, MetaConstants.ModalFooter)\n    ) {\n      return child;\n    } else if (__DEV__) {\n      throwBladeError({\n        message: 'Modal only accepts ModalHeader, ModalBody and ModalFooter as children',\n        moduleName: 'Modal',\n      });\n    }\n    return null;\n  });\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n              <ModalBackdrop />\n              <ModalContent\n                {...metaAttribute({\n                  name: MetaConstants.Modal,\n                })}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                maxWidth={makeSize(modalMaxWidth[size])}\n                minWidth={makeSize(modalMinWidth)}\n                maxHeight={modalMaxHeight}\n                width={`calc(100vw - ${makeSize(modalResponsiveScreenGap)})`}\n                borderRadius={modalBorderRadius}\n                backgroundColor=\"popup.background.subtle\"\n                position=\"absolute\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                top=\"50%\"\n                left=\"50%\"\n                onKeyDown={handleKeyDown}\n                isVisible={isVisible}\n                ref={refs.setFloating}\n              >\n                {validChildren}\n              </ModalContent>\n            </Box>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["entry","keyframes","exit","ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","xmoderate","easing","entrance","revealing","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","initialFocusRef","_ref2$size","size","accessibilityLabel","_ref2$zIndex","zIndex","componentZIndices","modal","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","validChildren","Children","map","child","isValidAllowedChildren","MetaConstants","ModalHeader","ModalBody","ModalFooter","throwBladeError","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","makeAccessible","role","label","maxWidth","makeSize","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","concat","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","display","flexDirection","top","left","onKeyDown","ref","setFloating"],"mappings":"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"}
+{"version":3,"file":"Modal.web.js","sources":["../../../../../../src/components/Modal/Modal.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport usePresence from 'use-presence';\nimport { ModalHeader } from './ModalHeader';\nimport type { ModalHeaderProps } from './ModalHeader';\nimport { ModalFooter } from './ModalFooter';\nimport type { ModalFooterProps } from './ModalFooter';\nimport { ModalBody } from './ModalBody';\nimport type { ModalBodyProps } from './ModalBody';\nimport { ModalContext } from './ModalContext';\nimport { ModalBackdrop } from './ModalBackdrop';\nimport {\n  modalBorderRadius,\n  modalMaxHeight,\n  modalMaxWidth,\n  modalMinWidth,\n  modalResponsiveScreenGap,\n} from './modalTokens';\nimport type { ModalProps } from './types';\nimport { componentIds } from './constants';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { Box } from '~components/Box';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { logger } from '~utils/logger';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren';\n\nconst entry = keyframes`\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n`;\n\nconst exit = keyframes`\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1) translateY(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9) translateY(20px);\n  }\n`;\n\nconst ModalContent = styled(BaseBox)<{ isVisible: boolean }>(({ isVisible, theme }) => {\n  return css`\n    box-shadow: ${theme.elevation.highRaised};\n    position: fixed;\n    transform: translate(-50%, -50%);\n    opacity: ${isVisible ? 1 : 0};\n    animation: ${isVisible ? entry : exit}\n      ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}\n      ${isVisible\n        ? castWebType(theme.motion.easing.entrance.revealing)\n        : castWebType(theme.motion.easing.exit.revealing)};\n  `;\n});\n\nconst Modal = ({\n  isOpen = false,\n  children,\n  onDismiss,\n  initialFocusRef,\n  size = 'small',\n  accessibilityLabel,\n  zIndex = componentZIndices.modal,\n}: ModalProps): React.ReactElement => {\n  const { theme, platform } = useTheme();\n  const { isMounted, isVisible } = usePresence(isOpen, {\n    transitionDuration: theme.motion.duration.xmoderate,\n    initialEnter: true,\n  });\n\n  // Warn consumer if modal is opened on mobile\n  useEffect(() => {\n    if (__DEV__) {\n      if (platform === 'onMobile') {\n        logger({\n          message: 'Modal is not supported on mobile devices. Please use BottomSheet instead.',\n          moduleName: 'Modal',\n          type: 'warn',\n        });\n      }\n    }\n  }, [platform]);\n\n  // required by floating ui to handle focus\n  const { refs, context } = useFloating({\n    open: isMounted,\n  });\n\n  const defaultInitialFocusRef = React.useRef<any>(null);\n\n  const modalContext = React.useMemo(\n    () => ({\n      isOpen,\n      close: onDismiss,\n      defaultInitialFocusRef,\n      isVisible,\n    }),\n    [isOpen, onDismiss, defaultInitialFocusRef, isVisible],\n  );\n  const handleKeyDown = (event: React.KeyboardEvent): void => {\n    // close modal on escape key press\n    if (event?.key === 'Escape' || event?.code === 'Escape') {\n      onDismiss();\n    }\n  };\n\n  // Only allow ModalHeader, ModalBody and ModalFooter as children\n  useVerifyAllowedChildren({\n    allowedComponents: [componentIds.ModalHeader, componentIds.ModalBody, componentIds.ModalFooter],\n    children,\n    componentName: 'Modal',\n  });\n\n  return (\n    <FloatingPortal>\n      <ModalContext.Provider value={modalContext}>\n        {isMounted ? (\n          <FloatingFocusManager\n            returnFocus\n            initialFocus={initialFocusRef ?? defaultInitialFocusRef}\n            context={context}\n            modal={true}\n          >\n            <Box zIndex={zIndex} position=\"fixed\" testID=\"modal-wrapper\">\n              <ModalBackdrop />\n              <ModalContent\n                {...metaAttribute({\n                  name: MetaConstants.Modal,\n                })}\n                {...makeAccessible({\n                  role: 'dialog',\n                  modal: true,\n                  label: accessibilityLabel,\n                })}\n                maxWidth={makeSize(modalMaxWidth[size])}\n                minWidth={makeSize(modalMinWidth)}\n                maxHeight={modalMaxHeight}\n                width={`calc(100vw - ${makeSize(modalResponsiveScreenGap)})`}\n                borderRadius={modalBorderRadius}\n                backgroundColor=\"popup.background.subtle\"\n                position=\"absolute\"\n                display=\"flex\"\n                flexDirection=\"column\"\n                top=\"50%\"\n                left=\"50%\"\n                onKeyDown={handleKeyDown}\n                isVisible={isVisible}\n                ref={refs.setFloating}\n              >\n                {children}\n              </ModalContent>\n            </Box>\n          </FloatingFocusManager>\n        ) : null}\n      </ModalContext.Provider>\n    </FloatingPortal>\n  );\n};\n\nexport { Modal, ModalHeader, ModalFooter, ModalBody };\nexport type { ModalProps, ModalHeaderProps, ModalFooterProps, ModalBodyProps };\n"],"names":["entry","keyframes","exit","ModalContent","styled","BaseBox","withConfig","displayName","componentId","_ref","isVisible","theme","css","elevation","highRaised","castWebType","makeMotionTime","motion","duration","xmoderate","easing","entrance","revealing","Modal","_ref2","_ref2$isOpen","isOpen","children","onDismiss","initialFocusRef","_ref2$size","size","accessibilityLabel","_ref2$zIndex","zIndex","componentZIndices","modal","_useTheme","useTheme","platform","_usePresence","usePresence","transitionDuration","initialEnter","isMounted","useEffect","logger","message","moduleName","type","_useFloating","useFloating","open","refs","context","defaultInitialFocusRef","React","useRef","modalContext","useMemo","close","handleKeyDown","event","key","code","useVerifyAllowedChildren","allowedComponents","componentIds","ModalHeader","ModalBody","ModalFooter","componentName","_jsx","FloatingPortal","ModalContext","Provider","value","FloatingFocusManager","returnFocus","initialFocus","_jsxs","Box","position","testID","ModalBackdrop","_objectSpread","metaAttribute","name","MetaConstants","makeAccessible","role","label","maxWidth","makeSize","modalMaxWidth","minWidth","modalMinWidth","maxHeight","modalMaxHeight","width","concat","modalResponsiveScreenGap","borderRadius","modalBorderRadius","backgroundColor","display","flexDirection","top","left","onKeyDown","ref","setFloating"],"mappings":"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"}

package/build/lib/web/production/components/Modal/ModalBody.web.js

@@ -1,5 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
+import { componentIds } from './constants.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/metaAttribute/index.js';
@@ -27,7 +28,7 @@ var _ModalBody = function _ModalBody(_ref) {
   }));
 };
 var ModalBody = /*#__PURE__*/assignWithoutSideEffects(_ModalBody, {
-  componentId: MetaConstants.ModalBody
+  componentId: componentIds.ModalBody
 });
 
 export { ModalBody };

package/build/lib/web/production/components/Modal/ModalBody.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBody.web.js","sources":["../../../../../../src/components/Modal/ModalBody.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { assignWithoutSideEffects } from '~src/utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport type { SpacingValueType } from '~components/Box/BaseBox';\n\ntype ModalBodyProps = {\n  children: React.ReactNode;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.6`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page\n   */\n  padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.6'>;\n};\n\nconst _ModalBody = ({ children, padding = 'spacing.6' }: ModalBodyProps): React.ReactElement => {\n  const contentRef = React.useRef<any>(null);\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.ModalBody })}\n      padding={padding}\n      ref={contentRef}\n      overflowY=\"auto\"\n      overflowX=\"hidden\"\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst ModalBody = assignWithoutSideEffects(_ModalBody, {\n  componentId: MetaConstants.ModalBody,\n});\n\nexport { ModalBody };\nexport type { ModalBodyProps };\n"],"names":["_ModalBody","_ref","children","_ref$padding","padding","contentRef","React","useRef","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","ModalBody","ref","overflowY","overflowX","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;AAmBA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAgF;AAAA,EAAA,IAA1EC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CAAEG,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,WAAW,GAAAA,YAAA,CAAA;AACnD,EAAA,IAAME,UAAU,GAAGC,cAAK,CAACC,MAAM,CAAM,IAAI,CAAC,CAAA;EAE1C,oBACEC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,SAAAA;AAAU,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACpDV,IAAAA,OAAO,EAAEA,OAAQ;AACjBW,IAAAA,GAAG,EAAEV,UAAW;AAChBW,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,SAAS,EAAC,QAAQ;AAAAf,IAAAA,QAAA,EAEjBA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMY,SAAS,gBAAGI,wBAAwB,CAAClB,UAAU,EAAE;EACrDmB,WAAW,EAAEN,aAAa,CAACC,SAAAA;AAC7B,CAAC;;;;"}
+{"version":3,"file":"ModalBody.web.js","sources":["../../../../../../src/components/Modal/ModalBody.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { componentIds } from './constants';\nimport { assignWithoutSideEffects } from '~src/utils/assignWithoutSideEffects';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport type { SpacingValueType } from '~components/Box/BaseBox';\n\ntype ModalBodyProps = {\n  children: React.ReactNode;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.6`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page\n   */\n  padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.6'>;\n};\n\nconst _ModalBody = ({ children, padding = 'spacing.6' }: ModalBodyProps): React.ReactElement => {\n  const contentRef = React.useRef<any>(null);\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.ModalBody })}\n      padding={padding}\n      ref={contentRef}\n      overflowY=\"auto\"\n      overflowX=\"hidden\"\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst ModalBody = assignWithoutSideEffects(_ModalBody, {\n  componentId: componentIds.ModalBody,\n});\n\nexport { ModalBody };\nexport type { ModalBodyProps };\n"],"names":["_ModalBody","_ref","children","_ref$padding","padding","contentRef","React","useRef","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","ModalBody","ref","overflowY","overflowX","assignWithoutSideEffects","componentId","componentIds"],"mappings":";;;;;;;;;;;;;;AAoBA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAgF;AAAA,EAAA,IAA1EC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CAAEG,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,WAAW,GAAAA,YAAA,CAAA;AACnD,EAAA,IAAME,UAAU,GAAGC,cAAK,CAACC,MAAM,CAAM,IAAI,CAAC,CAAA;EAE1C,oBACEC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,SAAAA;AAAU,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACpDV,IAAAA,OAAO,EAAEA,OAAQ;AACjBW,IAAAA,GAAG,EAAEV,UAAW;AAChBW,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,SAAS,EAAC,QAAQ;AAAAf,IAAAA,QAAA,EAEjBA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMY,SAAS,gBAAGI,wBAAwB,CAAClB,UAAU,EAAE;EACrDmB,WAAW,EAAEC,YAAY,CAACN,SAAAA;AAC5B,CAAC;;;;"}

package/build/lib/web/production/components/Modal/ModalFooter.web.js

@@ -1,4 +1,5 @@
 import React__default from 'react';
+import { componentIds } from './constants.js';
 import { BaseFooter } from '../BaseHeaderFooter/BaseFooter.js';
 import '../Box/index.js';
 import '../../utils/metaAttribute/index.js';
@@ -21,7 +22,7 @@ var _ModalFooter = function _ModalFooter(props) {
   });
 };
 var ModalFooter = /*#__PURE__*/assignWithoutSideEffects(_ModalFooter, {
-  componentId: MetaConstants.ModalFooter
+  componentId: componentIds.ModalFooter
 });
 
 export { ModalFooter };

package/build/lib/web/production/components/Modal/ModalFooter.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooter.web.js","sources":["../../../../../../src/components/Modal/ModalFooter.web.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport type { BaseFooterProps } from '~components/BaseHeaderFooter/BaseFooter';\nimport { Box } from '~components/Box';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype ModalFooterProps = Pick<BaseFooterProps, 'children'>;\n\nconst _ModalFooter = (props: ModalFooterProps): React.ReactElement => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const containerRef = React.useRef<any>(null);\n\n  return (\n    <Box ref={containerRef}>\n      <BaseFooter\n        metaComponentName={MetaConstants.ModalFooter}\n        children={props.children}\n        showDivider={true}\n      />\n    </Box>\n  );\n};\n\nconst ModalFooter = assignWithoutSideEffects(_ModalFooter, {\n  componentId: MetaConstants.ModalFooter,\n});\n\nexport { ModalFooter };\nexport type { ModalFooterProps };\n"],"names":["_ModalFooter","props","containerRef","React","useRef","_jsx","Box","ref","children","BaseFooter","metaComponentName","MetaConstants","ModalFooter","showDivider","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;AASA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAAuB,EAAyB;AACpE;AACA,EAAA,IAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,CAAM,IAAI,CAAC,CAAA;EAE5C,oBACEC,GAAA,CAACC,GAAG,EAAA;AAACC,IAAAA,GAAG,EAAEL,YAAa;IAAAM,QAAA,eACrBH,GAAA,CAACI,UAAU,EAAA;MACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;MAC7CJ,QAAQ,EAAEP,KAAK,CAACO,QAAS;AACzBK,MAAAA,WAAW,EAAE,IAAA;KACd,CAAA;AAAC,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMD,WAAW,gBAAGE,wBAAwB,CAACd,YAAY,EAAE;EACzDe,WAAW,EAAEJ,aAAa,CAACC,WAAAA;AAC7B,CAAC;;;;"}
+{"version":3,"file":"ModalFooter.web.js","sources":["../../../../../../src/components/Modal/ModalFooter.web.tsx"],"sourcesContent":["import React from 'react';\nimport { componentIds } from './constants';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport type { BaseFooterProps } from '~components/BaseHeaderFooter/BaseFooter';\nimport { Box } from '~components/Box';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype ModalFooterProps = Pick<BaseFooterProps, 'children'>;\n\nconst _ModalFooter = (props: ModalFooterProps): React.ReactElement => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const containerRef = React.useRef<any>(null);\n\n  return (\n    <Box ref={containerRef}>\n      <BaseFooter\n        metaComponentName={MetaConstants.ModalFooter}\n        children={props.children}\n        showDivider={true}\n      />\n    </Box>\n  );\n};\n\nconst ModalFooter = assignWithoutSideEffects(_ModalFooter, {\n  componentId: componentIds.ModalFooter,\n});\n\nexport { ModalFooter };\nexport type { ModalFooterProps };\n"],"names":["_ModalFooter","props","containerRef","React","useRef","_jsx","Box","ref","children","BaseFooter","metaComponentName","MetaConstants","ModalFooter","showDivider","assignWithoutSideEffects","componentId","componentIds"],"mappings":";;;;;;;;;;;AAUA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAAuB,EAAyB;AACpE;AACA,EAAA,IAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,CAAM,IAAI,CAAC,CAAA;EAE5C,oBACEC,GAAA,CAACC,GAAG,EAAA;AAACC,IAAAA,GAAG,EAAEL,YAAa;IAAAM,QAAA,eACrBH,GAAA,CAACI,UAAU,EAAA;MACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;MAC7CJ,QAAQ,EAAEP,KAAK,CAACO,QAAS;AACzBK,MAAAA,WAAW,EAAE,IAAA;KACd,CAAA;AAAC,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMD,WAAW,gBAAGE,wBAAwB,CAACd,YAAY,EAAE;EACzDe,WAAW,EAAEC,YAAY,CAACJ,WAAAA;AAC5B,CAAC;;;;"}

package/build/lib/web/production/components/Modal/ModalHeader.web.js

@@ -1,4 +1,5 @@
 import { useModalContext } from './ModalContext.js';
+import { componentIds } from './constants.js';
 import '../../utils/index.js';
 import { BaseHeader } from '../BaseHeaderFooter/BaseHeader.js';
 import '../Box/BaseBox/index.js';
@@ -61,7 +62,7 @@ var _ModalHeader = function _ModalHeader(_ref) {
   });
 };
 var ModalHeader = /*#__PURE__*/assignWithoutSideEffects(_ModalHeader, {
-  componentId: MetaConstants.ModalHeader
+  componentId: componentIds.ModalHeader
 });
 
 export { ModalHeader };

package/build/lib/web/production/components/Modal/ModalHeader.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.web.js","sources":["../../../../../../src/components/Modal/ModalHeader.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useModalContext } from './ModalContext';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { makeSize } from '~utils';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { componentZIndices } from '~utils/componentZIndices';\n\ntype ModalHeaderProps = Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix'\n>;\n\nconst _ModalHeader = ({\n  leading,\n  subtitle,\n  title,\n  titleSuffix,\n  trailing,\n}: ModalHeaderProps): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = useModalContext();\n\n  const isHeaderEmpty = !(title || subtitle || leading || trailing);\n  return isHeaderEmpty ? (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"absolute\"\n      top=\"spacing.5\"\n      right=\"spacing.5\"\n      width={makeSize(size[28])}\n      height={makeSize(size[28])}\n      flexShrink={0}\n      backgroundColor=\"popup.background.subtle\"\n      borderRadius=\"max\"\n      zIndex={componentZIndices.modal}\n    >\n      <IconButton\n        ref={defaultInitialFocusRef}\n        size=\"large\"\n        icon={CloseIcon}\n        accessibilityLabel=\"Close\"\n        onClick={close}\n      />\n    </BaseBox>\n  ) : (\n    <BaseHeader\n      metaComponentName={MetaConstants.ModalHeader}\n      title={title}\n      subtitle={subtitle}\n      leading={leading}\n      trailing={trailing}\n      titleSuffix={titleSuffix}\n      closeButtonRef={defaultInitialFocusRef}\n      showCloseButton={true}\n      onCloseButtonClick={close}\n    />\n  );\n};\nconst ModalHeader = assignWithoutSideEffects(_ModalHeader, {\n  componentId: MetaConstants.ModalHeader,\n});\n\nexport { ModalHeader };\nexport type { ModalHeaderProps };\n"],"names":["_ModalHeader","_ref","leading","subtitle","title","titleSuffix","trailing","_useModalContext","useModalContext","close","defaultInitialFocusRef","isHeaderEmpty","_jsx","BaseBox","display","alignItems","justifyContent","position","top","right","width","makeSize","size","height","flexShrink","backgroundColor","borderRadius","zIndex","componentZIndices","modal","children","IconButton","ref","icon","CloseIcon","accessibilityLabel","onClick","BaseHeader","metaComponentName","MetaConstants","ModalHeader","closeButtonRef","showCloseButton","onCloseButtonClick","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAkBA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ,CAAA;AAER,EAAA,IAAAC,gBAAA,GAA0CC,eAAe,EAAE;IAAnDC,KAAK,GAAAF,gBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,gBAAA,CAAtBG,sBAAsB,CAAA;EAErC,IAAMC,aAAa,GAAG,EAAEP,KAAK,IAAID,QAAQ,IAAID,OAAO,IAAII,QAAQ,CAAC,CAAA;AACjE,EAAA,OAAOK,aAAa,gBAClBC,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,WAAW;AACjBC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC1BC,IAAAA,MAAM,EAAEF,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC3BE,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,eAAe,EAAC,yBAAyB;AACzCC,IAAAA,YAAY,EAAC,KAAK;IAClBC,MAAM,EAAEC,iBAAiB,CAACC,KAAM;IAAAC,QAAA,eAEhClB,GAAA,CAACmB,UAAU,EAAA;AACTC,MAAAA,GAAG,EAAEtB,sBAAuB;AAC5BY,MAAAA,IAAI,EAAC,OAAO;AACZW,MAAAA,IAAI,EAAEC,SAAU;AAChBC,MAAAA,kBAAkB,EAAC,OAAO;AAC1BC,MAAAA,OAAO,EAAE3B,KAAAA;KACV,CAAA;AAAC,GACK,CAAC,gBAEVG,GAAA,CAACyB,UAAU,EAAA;IACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;AAC7CpC,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,WAAW,EAAEA,WAAY;AACzBoC,IAAAA,cAAc,EAAE/B,sBAAuB;AACvCgC,IAAAA,eAAe,EAAE,IAAK;AACtBC,IAAAA,kBAAkB,EAAElC,KAAAA;AAAM,GAC3B,CACF,CAAA;AACH,CAAC,CAAA;AACD,IAAM+B,WAAW,gBAAGI,wBAAwB,CAAC5C,YAAY,EAAE;EACzD6C,WAAW,EAAEN,aAAa,CAACC,WAAAA;AAC7B,CAAC;;;;"}
+{"version":3,"file":"ModalHeader.web.js","sources":["../../../../../../src/components/Modal/ModalHeader.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useModalContext } from './ModalContext';\nimport { componentIds } from './constants';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { makeSize } from '~utils';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { componentZIndices } from '~utils/componentZIndices';\n\ntype ModalHeaderProps = Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix'\n>;\n\nconst _ModalHeader = ({\n  leading,\n  subtitle,\n  title,\n  titleSuffix,\n  trailing,\n}: ModalHeaderProps): React.ReactElement => {\n  const { close, defaultInitialFocusRef } = useModalContext();\n\n  const isHeaderEmpty = !(title || subtitle || leading || trailing);\n  return isHeaderEmpty ? (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      position=\"absolute\"\n      top=\"spacing.5\"\n      right=\"spacing.5\"\n      width={makeSize(size[28])}\n      height={makeSize(size[28])}\n      flexShrink={0}\n      backgroundColor=\"popup.background.subtle\"\n      borderRadius=\"max\"\n      zIndex={componentZIndices.modal}\n    >\n      <IconButton\n        ref={defaultInitialFocusRef}\n        size=\"large\"\n        icon={CloseIcon}\n        accessibilityLabel=\"Close\"\n        onClick={close}\n      />\n    </BaseBox>\n  ) : (\n    <BaseHeader\n      metaComponentName={MetaConstants.ModalHeader}\n      title={title}\n      subtitle={subtitle}\n      leading={leading}\n      trailing={trailing}\n      titleSuffix={titleSuffix}\n      closeButtonRef={defaultInitialFocusRef}\n      showCloseButton={true}\n      onCloseButtonClick={close}\n    />\n  );\n};\nconst ModalHeader = assignWithoutSideEffects(_ModalHeader, {\n  componentId: componentIds.ModalHeader,\n});\n\nexport { ModalHeader };\nexport type { ModalHeaderProps };\n"],"names":["_ModalHeader","_ref","leading","subtitle","title","titleSuffix","trailing","_useModalContext","useModalContext","close","defaultInitialFocusRef","isHeaderEmpty","_jsx","BaseBox","display","alignItems","justifyContent","position","top","right","width","makeSize","size","height","flexShrink","backgroundColor","borderRadius","zIndex","componentZIndices","modal","children","IconButton","ref","icon","CloseIcon","accessibilityLabel","onClick","BaseHeader","metaComponentName","MetaConstants","ModalHeader","closeButtonRef","showCloseButton","onCloseButtonClick","assignWithoutSideEffects","componentId","componentIds"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAmBA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAM0B;AAAA,EAAA,IAL1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ,CAAA;AAER,EAAA,IAAAC,gBAAA,GAA0CC,eAAe,EAAE;IAAnDC,KAAK,GAAAF,gBAAA,CAALE,KAAK;IAAEC,sBAAsB,GAAAH,gBAAA,CAAtBG,sBAAsB,CAAA;EAErC,IAAMC,aAAa,GAAG,EAAEP,KAAK,IAAID,QAAQ,IAAID,OAAO,IAAII,QAAQ,CAAC,CAAA;AACjE,EAAA,OAAOK,aAAa,gBAClBC,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,GAAG,EAAC,WAAW;AACfC,IAAAA,KAAK,EAAC,WAAW;AACjBC,IAAAA,KAAK,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC1BC,IAAAA,MAAM,EAAEF,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;AAC3BE,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,eAAe,EAAC,yBAAyB;AACzCC,IAAAA,YAAY,EAAC,KAAK;IAClBC,MAAM,EAAEC,iBAAiB,CAACC,KAAM;IAAAC,QAAA,eAEhClB,GAAA,CAACmB,UAAU,EAAA;AACTC,MAAAA,GAAG,EAAEtB,sBAAuB;AAC5BY,MAAAA,IAAI,EAAC,OAAO;AACZW,MAAAA,IAAI,EAAEC,SAAU;AAChBC,MAAAA,kBAAkB,EAAC,OAAO;AAC1BC,MAAAA,OAAO,EAAE3B,KAAAA;KACV,CAAA;AAAC,GACK,CAAC,gBAEVG,GAAA,CAACyB,UAAU,EAAA;IACTC,iBAAiB,EAAEC,aAAa,CAACC,WAAY;AAC7CpC,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,WAAW,EAAEA,WAAY;AACzBoC,IAAAA,cAAc,EAAE/B,sBAAuB;AACvCgC,IAAAA,eAAe,EAAE,IAAK;AACtBC,IAAAA,kBAAkB,EAAElC,KAAAA;AAAM,GAC3B,CACF,CAAA;AACH,CAAC,CAAA;AACD,IAAM+B,WAAW,gBAAGI,wBAAwB,CAAC5C,YAAY,EAAE;EACzD6C,WAAW,EAAEC,YAAY,CAACN,WAAAA;AAC5B,CAAC;;;;"}

package/build/lib/web/production/components/Modal/constants.js

@@ -0,0 +1,8 @@
+var componentIds = {
+  ModalHeader: 'ModalHeader',
+  ModalBody: 'ModalBody',
+  ModalFooter: 'ModalFooter'
+};
+
+export { componentIds };
+//# sourceMappingURL=constants.js.map

package/build/lib/web/production/components/Modal/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../src/components/Modal/constants.ts"],"sourcesContent":["const componentIds = {\n  ModalHeader: 'ModalHeader',\n  ModalBody: 'ModalBody',\n  ModalFooter: 'ModalFooter',\n};\n\nexport { componentIds };\n"],"names":["componentIds","ModalHeader","ModalBody","ModalFooter"],"mappings":"AAAA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,WAAW,EAAE,aAAa;AAC1BC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,WAAW,EAAE,aAAA;AACf;;;;"}

package/build/lib/web/production/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js

@@ -13,6 +13,7 @@ var useVerifyAllowedChildren = function useVerifyAllowedChildren(props) {
     allowedComponents = props.allowedComponents;
   if (false) {
     React__default.Children.forEach(children, function (child) {
+      if (! /*#__PURE__*/React__default.isValidElement(child)) return;
       var isValidChild = child && allowedComponents.includes(getComponentId(child));
       if (!isValidChild) {
         throwBladeError({

package/build/lib/web/production/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVerifyAllowedChildren.js","sources":["../../../../../../src/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.ts"],"sourcesContent":["import React from 'react';\nimport { getComponentId } from '../isValidAllowedChildren';\nimport { throwBladeError } from '../logger';\n\n/**\n * Verify if the passed childrens are only of allowedComponents list\n */\nconst useVerifyAllowedChildren = (props: {\n  children: React.ReactNode;\n  componentName: string;\n  allowedComponents: string[];\n}): void => {\n  const { children, componentName, allowedComponents } = props;\n  if (__DEV__) {\n    React.Children.forEach(children, (child) => {\n      const isValidChild = child && allowedComponents.includes(getComponentId(child)!);\n      if (!isValidChild) {\n        throwBladeError({\n          message: `Only \\`${allowedComponents.join(\n            ', ',\n          )}\\` components are accepted in \\`${componentName}\\` children`,\n          moduleName: componentName,\n        });\n      }\n    });\n  }\n};\n\nexport { useVerifyAllowedChildren };\n"],"names":["useVerifyAllowedChildren","props","children","componentName","allowedComponents","React","Children","forEach","child","isValidChild","includes","getComponentId","throwBladeError","message","concat","join","moduleName"],"mappings":";;;;;;AAIA;AACA;AACA;AACA,IAAMA,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIC,KAIjC,EAAW;AACV,EAAA,IAAQC,QAAQ,GAAuCD,KAAK,CAApDC,QAAQ;IAAEC,aAAa,GAAwBF,KAAK,CAA1CE,aAAa;IAAEC,iBAAiB,GAAKH,KAAK,CAA3BG,iBAAiB,CAAA;AAClD,EAAA,IAAI,KAAO,EAAE;IACXC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACL,QAAQ,EAAE,UAACM,KAAK,EAAK;AAC1C,MAAA,IAAMC,YAAY,GAAGD,KAAK,IAAIJ,iBAAiB,CAACM,QAAQ,CAACC,cAAc,CAACH,KAAK,CAAE,CAAC,CAAA;MAChF,IAAI,CAACC,YAAY,EAAE;AACjBG,QAAAA,eAAe,CAAC;AACdC,UAAAA,OAAO,EAAAC,QAAAA,CAAAA,MAAA,CAAYV,iBAAiB,CAACW,IAAI,CACvC,IACF,CAAC,EAAA,gCAAA,CAAA,CAAAD,MAAA,CAAmCX,aAAa,EAAa,YAAA,CAAA;AAC9Da,UAAAA,UAAU,EAAEb,aAAAA;AACd,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAC,CAAC,CAAA;AACJ,GAAA;AACF;;;;"}
+{"version":3,"file":"useVerifyAllowedChildren.js","sources":["../../../../../../src/utils/useVerifyAllowedChildren/useVerifyAllowedChildren.ts"],"sourcesContent":["import React from 'react';\nimport { getComponentId } from '../isValidAllowedChildren';\nimport { throwBladeError } from '../logger';\n\n/**\n * Verify if the passed childrens are only of allowedComponents list\n */\nconst useVerifyAllowedChildren = (props: {\n  children: React.ReactNode;\n  componentName: string;\n  allowedComponents: string[];\n}): void => {\n  const { children, componentName, allowedComponents } = props;\n  if (__DEV__) {\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n      const isValidChild = child && allowedComponents.includes(getComponentId(child)!);\n      if (!isValidChild) {\n        throwBladeError({\n          message: `Only \\`${allowedComponents.join(\n            ', ',\n          )}\\` components are accepted in \\`${componentName}\\` children`,\n          moduleName: componentName,\n        });\n      }\n    });\n  }\n};\n\nexport { useVerifyAllowedChildren };\n"],"names":["useVerifyAllowedChildren","props","children","componentName","allowedComponents","React","Children","forEach","child","isValidElement","isValidChild","includes","getComponentId","throwBladeError","message","concat","join","moduleName"],"mappings":";;;;;;AAIA;AACA;AACA;AACA,IAAMA,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIC,KAIjC,EAAW;AACV,EAAA,IAAQC,QAAQ,GAAuCD,KAAK,CAApDC,QAAQ;IAAEC,aAAa,GAAwBF,KAAK,CAA1CE,aAAa;IAAEC,iBAAiB,GAAKH,KAAK,CAA3BG,iBAAiB,CAAA;AAClD,EAAA,IAAI,KAAO,EAAE;IACXC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACL,QAAQ,EAAE,UAACM,KAAK,EAAK;AAC1C,MAAA,IAAI,eAACH,cAAK,CAACI,cAAc,CAACD,KAAK,CAAC,EAAE,OAAA;AAClC,MAAA,IAAME,YAAY,GAAGF,KAAK,IAAIJ,iBAAiB,CAACO,QAAQ,CAACC,cAAc,CAACJ,KAAK,CAAE,CAAC,CAAA;MAChF,IAAI,CAACE,YAAY,EAAE;AACjBG,QAAAA,eAAe,CAAC;AACdC,UAAAA,OAAO,EAAAC,QAAAA,CAAAA,MAAA,CAAYX,iBAAiB,CAACY,IAAI,CACvC,IACF,CAAC,EAAA,gCAAA,CAAA,CAAAD,MAAA,CAAmCZ,aAAa,EAAa,YAAA,CAAA;AAC9Dc,UAAAA,UAAU,EAAEd,aAAAA;AACd,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAC,CAAC,CAAA;AACJ,GAAA;AACF;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.17.0",
+  "version": "11.17.1",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"