@razorpay/blade 11.3.1 → 11.4.0

package/build/lib/native/components/Tag/Tag.js

@@ -27,7 +27,7 @@ import '../Typography/Code/Code.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
 
-var _excluded=["size","icon","onDismiss","children","isDisabled","testID","_isVirtuallyFocused","_isTagInsideInput"];var FocussableTag=styled(BaseBox)(function(props){if(props._isVirtuallyFocused&&!isReactNative()){return {outline:`${makeSize(size['1'])} solid ${props.theme.colors.surface.background.gray.subtle}`,boxShadow:`0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`};}return {};});var Tag=function Tag(_ref){var _ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,Icon=_ref.icon,onDismiss=_ref.onDismiss,children=_ref.children,isDisabled=_ref.isDisabled,testID=_ref.testID,_isVirtuallyFocused=_ref._isVirtuallyFocused,_isTagInsideInput=_ref._isTagInsideInput,styledProps=_objectWithoutProperties(_ref,_excluded);var isMobile=useIsMobile();var textColor=isDisabled?'interactive.text.gray.disabled':'interactive.text.gray.subtle';var iconColor=isDisabled?'interactive.icon.gray.disabled':'interactive.icon.gray.muted';var backgroundColor=isDisabled?'interactive.background.gray.disabled':'interactive.background.gray.default';var mediumPadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.1','spacing.2','spacing.1','spacing.3']};var largePadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.2','spacing.3','spacing.2','spacing.4']};var assetSize=React__default.useMemo(function(){if(isMobile&&size$1==='large'){return 'medium';}return 'small';},[isMobile,size$1]);return jsx(BaseBox,Object.assign({display:isReactNative()?'flex':'inline-flex'},getStyledProps(styledProps),metaAttribute({name:MetaConstants.Tag,testID:testID}),{children:jsxs(FocussableTag,{display:isReactNative()?'flex':'inline-flex',alignSelf:isReactNative()?'center':undefined,flexDirection:"row",flexWrap:"nowrap",backgroundColor:backgroundColor,borderRadius:"max",padding:size$1==='medium'?mediumPadding:largePadding,_isVirtuallyFocused:_isVirtuallyFocused,children:[Icon?jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",children:jsx(Icon,{color:iconColor,size:assetSize,marginRight:"spacing.2"})}):null,jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",maxWidth:makeSize(size['100']),children:jsx(Text,{truncateAfterLines:1,marginRight:"spacing.2",color:textColor,size:assetSize,children:children})}),jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",children:jsx(IconButton,{size:assetSize,icon:CloseIcon,accessibilityLabel:`Close ${children} tag`,isDisabled:isDisabled,_tabIndex:_isTagInsideInput?-1:undefined,onClick:function onClick(e){if(_isTagInsideInput){e.stopPropagation();}onDismiss();}})})]})}));};
+var _excluded=["size","icon","onDismiss","children","isDisabled","testID","_isVirtuallyFocused","_isTagInsideInput"];var FocussableTag=styled(BaseBox)(function(props){if(props._isVirtuallyFocused&&!isReactNative()){return {outline:`${makeSize(size['1'])} solid ${props.theme.colors.surface.background.gray.subtle}`,boxShadow:`0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`};}return {};});var Tag=function Tag(_ref){var _ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,Icon=_ref.icon,onDismiss=_ref.onDismiss,children=_ref.children,isDisabled=_ref.isDisabled,testID=_ref.testID,_isVirtuallyFocused=_ref._isVirtuallyFocused,_isTagInsideInput=_ref._isTagInsideInput,styledProps=_objectWithoutProperties(_ref,_excluded);var isMobile=useIsMobile();var textColor=isDisabled?'interactive.text.gray.disabled':'interactive.text.gray.subtle';var iconColor=isDisabled?'interactive.icon.gray.disabled':'interactive.icon.gray.muted';var backgroundColor=isDisabled?'interactive.background.gray.disabled':'interactive.background.gray.default';var mediumPadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.1','spacing.2','spacing.1','spacing.3']};var largePadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.2','spacing.3','spacing.2','spacing.4']};var assetSize=React__default.useMemo(function(){if(isMobile&&size$1==='large'){return 'medium';}return 'small';},[isMobile,size$1]);return jsx(BaseBox,Object.assign({display:isReactNative()?'flex':'inline-flex'},getStyledProps(styledProps),metaAttribute({name:MetaConstants.Tag,testID:testID}),{children:jsxs(FocussableTag,{display:isReactNative()?'flex':'inline-flex',alignSelf:isReactNative()?'center':undefined,flexDirection:"row",flexWrap:"nowrap",flexShrink:0,backgroundColor:backgroundColor,borderRadius:"max",padding:size$1==='medium'?mediumPadding:largePadding,_isVirtuallyFocused:_isVirtuallyFocused,children:[Icon?jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",children:jsx(Icon,{color:iconColor,size:assetSize,marginRight:"spacing.2"})}):null,jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",maxWidth:makeSize(size['100']),children:jsx(Text,{truncateAfterLines:1,marginRight:"spacing.2",color:textColor,size:assetSize,children:children})}),jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",children:jsx(IconButton,{size:assetSize,icon:CloseIcon,accessibilityLabel:`Close ${children} tag`,isDisabled:isDisabled,_tabIndex:_isTagInsideInput?-1:undefined,onClick:function onClick(e){if(_isTagInsideInput){e.stopPropagation();}onDismiss();}})})]})}));};
 
 export { Tag };
 //# sourceMappingURL=Tag.js.map

package/build/lib/native/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box\n          display=\"flex\"\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          maxWidth={makeSize(globalSizeTokens['100'])}\n        >\n          <Text truncateAfterLines={1} marginRight=\"spacing.2\" color={textColor} size={assetSize}>\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","props","_isVirtuallyFocused","isReactNative","outline","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","Object","assign","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","borderRadius","padding","Box","alignItems","color","marginRight","maxWidth","Text","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box\n          display=\"flex\"\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          maxWidth={makeSize(globalSizeTokens['100'])}\n        >\n          <Text truncateAfterLines={1} marginRight=\"spacing.2\" color={textColor} size={assetSize}>\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","props","_isVirtuallyFocused","isReactNative","outline","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","Object","assign","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","maxWidth","Text","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}

package/build/lib/native/components/Tooltip/Tooltip.native.js

@@ -3,7 +3,7 @@ import { useFloating, shift, flip, offset, arrow } from '@floating-ui/react-nati
 import React__default from 'react';
 import { Modal, TouchableOpacity } from 'react-native';
 import { TooltipContent } from './TooltipContent.js';
-import { ARROW_HEIGHT, ARROW_WIDTH, tooltipZIndex } from './constants.js';
+import { ARROW_HEIGHT, ARROW_WIDTH } from './constants.js';
 import { TooltipContext } from './TooltipContext.js';
 import 'styled-components/native';
 import '@gorhom/portal';
@@ -16,8 +16,9 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { mergeProps } from '../../utils/mergeProps.js';
 import { PopupArrow } from '../PopupArrow/PopupArrow.native.js';
 import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
 
-var Tooltip=function Tooltip(_ref){var title=_ref.title,content=_ref.content,children=_ref.children,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'left':_ref$placement,onOpenChange=_ref.onOpenChange,_ref$zIndex=_ref.zIndex,zIndex=_ref$zIndex===void 0?tooltipZIndex:_ref$zIndex;var _useTheme=useTheme(),theme=_useTheme.theme;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isOpen=_React$useState2[0],setIsOpen=_React$useState2[1];var gap=theme.spacing[2];var _getFloatingPlacement=getFloatingPlacementParts(placement),_getFloatingPlacement2=_slicedToArray(_getFloatingPlacement,1),side=_getFloatingPlacement2[0];var isHorizontal=side==='left'||side==='right';var arrowRef=React__default.useRef();var context=useFloating({sameScrollView:false,placement:placement,middleware:[shift({crossAxis:false,padding:gap}),flip({padding:gap}),offset(gap+ARROW_HEIGHT),arrow({element:arrowRef,padding:isHorizontal?0:ARROW_WIDTH})]});var refs=context.refs,floatingStyles=context.floatingStyles;var handleOpen=React__default.useCallback(function(){setIsOpen(true);onOpenChange==null?void 0:onOpenChange({isOpen:true});},[onOpenChange]);var handleClose=React__default.useCallback(function(){setIsOpen(false);onOpenChange==null?void 0:onOpenChange({isOpen:false});},[onOpenChange]);var _React$useState3=React__default.useState(function(){return isOpen;}),_React$useState4=_slicedToArray(_React$useState3,2),isVisible=_React$useState4[0],setIsVisible=_React$useState4[1];React__default.useEffect(function(){var id=setTimeout(function(){if(!isOpen){setIsVisible(false);}},theme.motion.duration.gentle);if(isOpen){setIsVisible(true);}return function(){return clearTimeout(id);};},[isOpen]);return jsxs(TooltipContext.Provider,{value:true,children:[React__default.cloneElement(children,Object.assign({},mergeProps({onTouchEnd:children.props.onTouchEnd},{onTouchEnd:handleOpen}),{ref:refs.setReference})),jsx(Modal,{accessibilityLabel:content,collapsable:false,transparent:true,visible:isVisible,children:jsx(TouchableOpacity,Object.assign({style:{flexShrink:0,flex:1},onPress:handleClose,activeOpacity:1,testID:"tooltip-modal-backdrop"},metaAttribute({name:MetaConstants.Tooltip}),{children:jsx(TooltipContent,{title:title,isVisible:isOpen,ref:refs.setFloating,side:side,style:Object.assign({},floatingStyles,{left:floatingStyles.left||-200,top:floatingStyles.top||-200,zIndex:zIndex}),arrow:jsx(PopupArrow,{ref:arrowRef,context:context,width:ARROW_WIDTH,height:ARROW_HEIGHT,fillColor:theme.colors.popup.background.intense,strokeColor:theme.colors.popup.border.intense}),children:content})}))})]});};
+var Tooltip=function Tooltip(_ref){var title=_ref.title,content=_ref.content,children=_ref.children,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'left':_ref$placement,onOpenChange=_ref.onOpenChange,_ref$zIndex=_ref.zIndex,zIndex=_ref$zIndex===void 0?componentZIndices.tooltip:_ref$zIndex;var _useTheme=useTheme(),theme=_useTheme.theme;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isOpen=_React$useState2[0],setIsOpen=_React$useState2[1];var gap=theme.spacing[2];var _getFloatingPlacement=getFloatingPlacementParts(placement),_getFloatingPlacement2=_slicedToArray(_getFloatingPlacement,1),side=_getFloatingPlacement2[0];var isHorizontal=side==='left'||side==='right';var arrowRef=React__default.useRef();var context=useFloating({sameScrollView:false,placement:placement,middleware:[shift({crossAxis:false,padding:gap}),flip({padding:gap}),offset(gap+ARROW_HEIGHT),arrow({element:arrowRef,padding:isHorizontal?0:ARROW_WIDTH})]});var refs=context.refs,floatingStyles=context.floatingStyles;var handleOpen=React__default.useCallback(function(){setIsOpen(true);onOpenChange==null?void 0:onOpenChange({isOpen:true});},[onOpenChange]);var handleClose=React__default.useCallback(function(){setIsOpen(false);onOpenChange==null?void 0:onOpenChange({isOpen:false});},[onOpenChange]);var _React$useState3=React__default.useState(function(){return isOpen;}),_React$useState4=_slicedToArray(_React$useState3,2),isVisible=_React$useState4[0],setIsVisible=_React$useState4[1];React__default.useEffect(function(){var id=setTimeout(function(){if(!isOpen){setIsVisible(false);}},theme.motion.duration.gentle);if(isOpen){setIsVisible(true);}return function(){return clearTimeout(id);};},[isOpen]);return jsxs(TooltipContext.Provider,{value:true,children:[React__default.cloneElement(children,Object.assign({},mergeProps({onTouchEnd:children.props.onTouchEnd},{onTouchEnd:handleOpen}),{ref:refs.setReference})),jsx(Modal,{accessibilityLabel:content,collapsable:false,transparent:true,visible:isVisible,children:jsx(TouchableOpacity,Object.assign({style:{flexShrink:0,flex:1},onPress:handleClose,activeOpacity:1,testID:"tooltip-modal-backdrop"},metaAttribute({name:MetaConstants.Tooltip}),{children:jsx(TooltipContent,{title:title,isVisible:isOpen,ref:refs.setFloating,side:side,style:Object.assign({},floatingStyles,{left:floatingStyles.left||-200,top:floatingStyles.top||-200,zIndex:zIndex}),arrow:jsx(PopupArrow,{ref:arrowRef,context:context,width:ARROW_WIDTH,height:ARROW_HEIGHT,fillColor:theme.colors.popup.background.intense,strokeColor:theme.colors.popup.border.intense}),children:content})}))})]});};
 
 export { Tooltip };
 //# sourceMappingURL=Tooltip.native.js.map

package/build/lib/native/components/Tooltip/Tooltip.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.native.js","sources":["../../../../../src/components/Tooltip/Tooltip.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport { arrow, shift, useFloating, flip, offset } from '@floating-ui/react-native';\nimport React from 'react';\nimport { Modal, TouchableOpacity } from 'react-native';\nimport { TooltipContent } from './TooltipContent';\nimport type { TooltipProps } from './types';\nimport { ARROW_HEIGHT, ARROW_WIDTH, tooltipZIndex } from './constants';\nimport { TooltipContext } from './TooltipContext';\nimport { useTheme } from '~components/BladeProvider';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\n\nconst Tooltip = ({\n  title,\n  content,\n  children,\n  placement = 'left',\n  onOpenChange,\n  zIndex = tooltipZIndex,\n}: TooltipProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const gap = theme.spacing[2];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const arrowRef = React.useRef();\n  const context = useFloating({\n    sameScrollView: false,\n    placement,\n    middleware: [\n      shift({ crossAxis: false, padding: gap }),\n      flip({ padding: gap }),\n      offset(gap + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? 0 : ARROW_WIDTH,\n      }),\n    ],\n  });\n\n  const { refs, floatingStyles } = context;\n\n  const handleOpen = React.useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.({ isOpen: true });\n  }, [onOpenChange]);\n\n  const handleClose = React.useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.({ isOpen: false });\n  }, [onOpenChange]);\n\n  // wait for animation to finish before unmounting modal\n  const [isVisible, setIsVisible] = React.useState(() => isOpen);\n  React.useEffect(() => {\n    const id = setTimeout(() => {\n      if (!isOpen) {\n        setIsVisible(false);\n      }\n    }, theme.motion.duration.gentle);\n\n    if (isOpen) {\n      setIsVisible(true);\n    }\n    return () => clearTimeout(id);\n  }, [isOpen]);\n\n  return (\n    <TooltipContext.Provider value={true}>\n      {/* Cloning the trigger children to enhance it with ref and event handler */}\n      {React.cloneElement(children, {\n        ...mergeProps(\n          {\n            onTouchEnd: children.props.onTouchEnd,\n          },\n          { onTouchEnd: handleOpen },\n        ),\n        ref: refs.setReference,\n      })}\n      <Modal accessibilityLabel={content} collapsable={false} transparent visible={isVisible}>\n        <TouchableOpacity\n          style={{\n            flexShrink: 0,\n            flex: 1,\n          }}\n          onPress={handleClose}\n          activeOpacity={1}\n          testID=\"tooltip-modal-backdrop\"\n          {...metaAttribute({ name: MetaConstants.Tooltip })}\n        >\n          <TooltipContent\n            title={title}\n            isVisible={isOpen}\n            ref={refs.setFloating}\n            side={side}\n            style={{\n              ...floatingStyles,\n              // To avoid flash of floating ui content at top, this only happens in RN <70\n              // if the position is zero move the floating element outside of the viewport\n              // this happens because measure is async and it takes few miliseconds to calculate the positions.\n              left: floatingStyles.left || -200,\n              top: floatingStyles.top || -200,\n              // TODO: Tokenize zIndex values\n              zIndex,\n            }}\n            arrow={\n              <PopupArrow\n                ref={arrowRef as never}\n                context={context}\n                width={ARROW_WIDTH}\n                height={ARROW_HEIGHT}\n                fillColor={theme.colors.popup.background.intense}\n                strokeColor={theme.colors.popup.border.intense}\n              />\n            }\n          >\n            {content}\n          </TooltipContent>\n        </TouchableOpacity>\n      </Modal>\n    </TooltipContext.Provider>\n  );\n};\n\nexport { Tooltip };\n"],"names":["Tooltip","_ref","title","content","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","tooltipZIndex","_useTheme","useTheme","theme","_React$useState","React","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","gap","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","side","isHorizontal","arrowRef","useRef","context","useFloating","sameScrollView","middleware","shift","crossAxis","padding","flip","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","refs","floatingStyles","handleOpen","useCallback","handleClose","_React$useState3","_React$useState4","isVisible","setIsVisible","useEffect","id","setTimeout","motion","duration","gentle","clearTimeout","_jsxs","TooltipContext","Provider","value","cloneElement","Object","assign","mergeProps","onTouchEnd","props","ref","setReference","_jsx","Modal","accessibilityLabel","collapsable","transparent","visible","TouchableOpacity","style","flexShrink","flex","onPress","activeOpacity","testID","metaAttribute","name","MetaConstants","TooltipContent","setFloating","left","top","PopupArrow","width","height","fillColor","colors","popup","background","intense","strokeColor","border"],"mappings":"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"}
+{"version":3,"file":"Tooltip.native.js","sources":["../../../../../src/components/Tooltip/Tooltip.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport { arrow, shift, useFloating, flip, offset } from '@floating-ui/react-native';\nimport React from 'react';\nimport { Modal, TouchableOpacity } from 'react-native';\nimport { TooltipContent } from './TooltipContent';\nimport type { TooltipProps } from './types';\nimport { ARROW_HEIGHT, ARROW_WIDTH } from './constants';\nimport { TooltipContext } from './TooltipContext';\nimport { useTheme } from '~components/BladeProvider';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { mergeProps } from '~utils/mergeProps';\nimport { PopupArrow } from '~components/PopupArrow';\nimport { getFloatingPlacementParts } from '~utils/getFloatingPlacementParts';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst Tooltip = ({\n  title,\n  content,\n  children,\n  placement = 'left',\n  onOpenChange,\n  zIndex = componentZIndices.tooltip,\n}: TooltipProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const gap = theme.spacing[2];\n  const [side] = getFloatingPlacementParts(placement);\n  const isHorizontal = side === 'left' || side === 'right';\n  const arrowRef = React.useRef();\n  const context = useFloating({\n    sameScrollView: false,\n    placement,\n    middleware: [\n      shift({ crossAxis: false, padding: gap }),\n      flip({ padding: gap }),\n      offset(gap + ARROW_HEIGHT),\n      arrow({\n        element: arrowRef,\n        padding: isHorizontal ? 0 : ARROW_WIDTH,\n      }),\n    ],\n  });\n\n  const { refs, floatingStyles } = context;\n\n  const handleOpen = React.useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.({ isOpen: true });\n  }, [onOpenChange]);\n\n  const handleClose = React.useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.({ isOpen: false });\n  }, [onOpenChange]);\n\n  // wait for animation to finish before unmounting modal\n  const [isVisible, setIsVisible] = React.useState(() => isOpen);\n  React.useEffect(() => {\n    const id = setTimeout(() => {\n      if (!isOpen) {\n        setIsVisible(false);\n      }\n    }, theme.motion.duration.gentle);\n\n    if (isOpen) {\n      setIsVisible(true);\n    }\n    return () => clearTimeout(id);\n  }, [isOpen]);\n\n  return (\n    <TooltipContext.Provider value={true}>\n      {/* Cloning the trigger children to enhance it with ref and event handler */}\n      {React.cloneElement(children, {\n        ...mergeProps(\n          {\n            onTouchEnd: children.props.onTouchEnd,\n          },\n          { onTouchEnd: handleOpen },\n        ),\n        ref: refs.setReference,\n      })}\n      <Modal accessibilityLabel={content} collapsable={false} transparent visible={isVisible}>\n        <TouchableOpacity\n          style={{\n            flexShrink: 0,\n            flex: 1,\n          }}\n          onPress={handleClose}\n          activeOpacity={1}\n          testID=\"tooltip-modal-backdrop\"\n          {...metaAttribute({ name: MetaConstants.Tooltip })}\n        >\n          <TooltipContent\n            title={title}\n            isVisible={isOpen}\n            ref={refs.setFloating}\n            side={side}\n            style={{\n              ...floatingStyles,\n              // To avoid flash of floating ui content at top, this only happens in RN <70\n              // if the position is zero move the floating element outside of the viewport\n              // this happens because measure is async and it takes few miliseconds to calculate the positions.\n              left: floatingStyles.left || -200,\n              top: floatingStyles.top || -200,\n              // TODO: Tokenize zIndex values\n              zIndex,\n            }}\n            arrow={\n              <PopupArrow\n                ref={arrowRef as never}\n                context={context}\n                width={ARROW_WIDTH}\n                height={ARROW_HEIGHT}\n                fillColor={theme.colors.popup.background.intense}\n                strokeColor={theme.colors.popup.border.intense}\n              />\n            }\n          >\n            {content}\n          </TooltipContent>\n        </TouchableOpacity>\n      </Modal>\n    </TooltipContext.Provider>\n  );\n};\n\nexport { Tooltip };\n"],"names":["Tooltip","_ref","title","content","children","_ref$placement","placement","onOpenChange","_ref$zIndex","zIndex","componentZIndices","tooltip","_useTheme","useTheme","theme","_React$useState","React","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","gap","spacing","_getFloatingPlacement","getFloatingPlacementParts","_getFloatingPlacement2","side","isHorizontal","arrowRef","useRef","context","useFloating","sameScrollView","middleware","shift","crossAxis","padding","flip","offset","ARROW_HEIGHT","arrow","element","ARROW_WIDTH","refs","floatingStyles","handleOpen","useCallback","handleClose","_React$useState3","_React$useState4","isVisible","setIsVisible","useEffect","id","setTimeout","motion","duration","gentle","clearTimeout","_jsxs","TooltipContext","Provider","value","cloneElement","Object","assign","mergeProps","onTouchEnd","props","ref","setReference","_jsx","Modal","accessibilityLabel","collapsable","transparent","visible","TouchableOpacity","style","flexShrink","flex","onPress","activeOpacity","testID","metaAttribute","name","MetaConstants","TooltipContent","setFloating","left","top","PopupArrow","width","height","fillColor","colors","popup","background","intense","strokeColor","border"],"mappings":"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"}

package/build/lib/native/components/Tooltip/constants.js

@@ -1,4 +1,4 @@
-var ARROW_WIDTH=14;var ARROW_HEIGHT=7;var tooltipZIndex=1100;
+var ARROW_WIDTH=14;var ARROW_HEIGHT=7;
 
-export { ARROW_HEIGHT, ARROW_WIDTH, tooltipZIndex };
+export { ARROW_HEIGHT, ARROW_WIDTH };
 //# sourceMappingURL=constants.js.map

package/build/lib/native/components/Tooltip/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../src/components/Tooltip/constants.ts"],"sourcesContent":["export const ARROW_WIDTH = 14;\nexport const ARROW_HEIGHT = 7;\nexport const tooltipZIndex = 1100;\n"],"names":["ARROW_WIDTH","ARROW_HEIGHT","tooltipZIndex"],"mappings":"AAAa,IAAAA,WAAW,CAAG,GACd,IAAAC,YAAY,CAAG,EACf,IAAAC,aAAa,CAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../../src/components/Tooltip/constants.ts"],"sourcesContent":["export const ARROW_WIDTH = 14;\nexport const ARROW_HEIGHT = 7;\n"],"names":["ARROW_WIDTH","ARROW_HEIGHT"],"mappings":"AAAa,IAAAA,WAAW,CAAG,GACd,IAAAC,YAAY,CAAG;;;;"}

package/build/lib/native/components/index.js

@@ -27,6 +27,8 @@ export { CollapsibleButton } from './Collapsible/CollapsibleButton.js';
 export { CollapsibleBody } from './Collapsible/CollapsibleBody.js';
 export { Counter } from './Counter/Counter.js';
 export { Divider } from './Divider/Divider.js';
+export { Drawer } from './Drawer/Drawer.native.js';
+export { DrawerBody, DrawerHeader } from './Drawer/DrawerSubcomponents.native.js';
 export { Dropdown } from './Dropdown/Dropdown.js';
 export { DropdownOverlay } from './Dropdown/DropdownOverlay.native.js';
 export { DropdownButton } from './Dropdown/DropdownButton.js';

package/build/lib/native/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,4 @@
+var componentZIndices={bottomSheet:100,modal:1000,drawer:1001,dropdownOverlay:1002,tourMask:1100,popover:1100,tooltip:1100};
+
+export { componentZIndices };
+//# sourceMappingURL=componentZIndices.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"componentZIndices.js","sources":["../../../../src/utils/componentZIndices.ts"],"sourcesContent":["// TODO: Move these properly to tokens at some point\nexport const componentZIndices = {\n  bottomSheet: 100,\n  modal: 1000,\n  drawer: 1001,\n  dropdownOverlay: 1002,\n  tourMask: 1100,\n  popover: 1100,\n  tooltip: 1100,\n};\n"],"names":["componentZIndices","bottomSheet","modal","drawer","dropdownOverlay","tourMask","popover","tooltip"],"mappings":"AACa,IAAAA,iBAAiB,CAAG,CAC/BC,WAAW,CAAE,GAAG,CAChBC,KAAK,CAAE,IAAI,CACXC,MAAM,CAAE,IAAI,CACZC,eAAe,CAAE,IAAI,CACrBC,QAAQ,CAAE,IAAI,CACdC,OAAO,CAAE,IAAI,CACbC,OAAO,CAAE,IACX;;;;"}

package/build/lib/native/utils/lodashButBetter/get.js.map

@@ -1 +1 @@
-{"version":3,"file":"get.js","sources":["../../../../../src/utils/lodashButBetter/get.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */\nimport type { ElevationStyles } from '~tokens/global/elevation';\nimport type { EasingType } from '~tokens/global/motion';\n\n/**\n * @template TokenType token type generic\n * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`\n */\nexport type DotNotationToken<_TokenType, TokenType = Omit<_TokenType, 'name'>> = {\n  [K in keyof TokenType]: TokenType[K] extends string | number | ElevationStyles\n    ? `${Extract<K, number | string>}`\n    : `${Extract<K, number | string>}.${TokenType[K] extends Record<\n        string,\n        string | number | boolean | EasingType<string>\n      >\n        ? Extract<keyof TokenType[K], number | string>\n        : DotNotationToken<TokenType[K]>}`;\n}[keyof TokenType];\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nfunction getIn<\n  T extends Record<string, any>,\n  K extends DotNotationToken<T>,\n  Default extends any = any\n>(obj: T, path: K, defaultValue?: Default): any {\n  if (!path) {\n    return defaultValue;\n  }\n\n  const keys = path.split('.');\n  let result = obj;\n\n  for (const key of keys) {\n    result = result?.[key];\n    if (result === undefined) {\n      return defaultValue;\n    }\n  }\n\n  return result !== undefined ? result : defaultValue;\n}\n\nexport default getIn;\n"],"names":["getIn","obj","path","defaultValue","keys","split","result","key","_result","undefined"],"mappings":"AAqBA,SAASA,KAAKA,CAIZC,GAAM,CAAEC,IAAO,CAAEC,YAAsB,CAAO,CAC9C,GAAI,CAACD,IAAI,CAAE,CACT,OAAOC,YAAY,CACrB,CAEA,IAAMC,IAAI,CAAGF,IAAI,CAACG,KAAK,CAAC,GAAG,CAAC,CAC5B,IAAIC,MAAM,CAAGL,GAAG,CAEhB,IAAK,IAAMM,GAAG,IAAIH,IAAI,CAAE,CAAAI,IAAAA,OAAA,CACtBF,MAAM,CAAA,CAAAE,OAAA,CAAGF,MAAM,GAANE,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,OAAA,CAASD,GAAG,CAAC,CACtB,GAAID,MAAM,GAAKG,SAAS,CAAE,CACxB,OAAON,YAAY,CACrB,CACF,CAEA,OAAOG,MAAM,GAAKG,SAAS,CAAGH,MAAM,CAAGH,YAAY,CACrD;;;;"}
+{"version":3,"file":"get.js","sources":["../../../../../src/utils/lodashButBetter/get.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */\nimport type { ElevationStyles } from '~tokens/global/elevation';\nimport type { EasingType } from '~tokens/global/motion';\n\n/**\n * @template TokenType token type generic\n * @description Tokenises objects to dot notation strings, eg: `surface.text.gray.normal`\n */\nexport type DotNotationToken<_TokenType, TokenType = Omit<_TokenType, 'name'>> = {\n  [K in keyof TokenType]: TokenType[K] extends string | number | ElevationStyles\n    ? `${Extract<K, number | string>}`\n    : `${Extract<K, number | string>}.${TokenType[K] extends Record<\n        string,\n        string | number | boolean | EasingType<string>\n      >\n        ? Extract<keyof TokenType[K], number | string>\n        : DotNotationToken<TokenType[K]>}`;\n}[keyof TokenType];\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nfunction getIn<\n  T extends Record<string, any>,\n  K extends DotNotationToken<T>,\n  Default extends any = any\n>(obj: T, path: K, defaultValue?: Default): any {\n  if (!path) {\n    return defaultValue;\n  }\n\n  const keys = path.split('.');\n  let result = obj;\n\n  for (const key of keys) {\n    result = result?.[key];\n    if (result === undefined) {\n      return defaultValue;\n    }\n  }\n\n  return result !== undefined ? result : defaultValue;\n}\n\nexport default getIn;\n"],"names":["getIn","obj","path","defaultValue","keys","split","result","key","_result","undefined"],"mappings":"AAqBA,SAASA,KAAKA,CAIZC,GAAM,CAAEC,IAAO,CAAEC,YAAsB,CAAO,CAC9C,GAAI,CAACD,IAAI,CAAE,CACT,OAAOC,YAAY,CACrB,CAEA,IAAMC,IAAI,CAAGF,IAAI,CAACG,KAAK,CAAC,GAAG,CAAC,CAC5B,IAAIC,MAAM,CAAGL,GAAG,CAEhB,IAAK,IAAMM,GAAG,IAAIH,IAAI,CAAE,CAAAI,IAAAA,OAAA,CACtBF,MAAM,CAAA,CAAAE,OAAA,CAAGF,MAAM,GAANE,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,OAAA,CAASD,GAAG,CAAC,CACtB,GAAID,MAAM,GAAKG,SAAS,CAAE,CACxB,OAAON,YAAY,CACrB,CACF,CAEA,OAAOG,MAAM,GAAKG,SAAS,CAAGH,MAAM,CAAGH,YAAY,CACrD;;;;"}

package/build/lib/native/utils/metaAttribute/metaConstants.js

@@ -1,4 +1,4 @@
-var MetaConstants={Accordion:'accordion',AccordionButton:'accordion-button',AccordionItem:'accordion-item',ActionList:'action-list',ActionListItem:'action-list-item',ActionListSection:'action-list-section',Alert:'alert',Amount:'amount',AutoComplete:'autocomplete',Badge:'badge',Box:'box',BaseBox:'base-box',BaseText:'base-text',Button:'button',Carousel:'carousel',Checkbox:'checkbox',CheckboxGroup:'checkbox-group',CheckboxLabel:'checkbox-label',Chip:'chip',ChipGroup:'chip-group',ChipLabel:'chip-label',Code:'code',Component:'blade-component',Counter:'counter',Display:'display',Divider:'divider',Dropdown:'dropdown',DropdownOverlay:'dropdown-overlay',DropdownFooter:'dropdown-footer',DropdownHeader:'dropdown-header',Icon:'icon',IconButton:'icon-button',Indicator:'indicator',Link:'link',List:'list',ListItem:'list-item',ListItemCode:'list-item-code',ListItemLink:'list-item-link',ListItemText:'list-item-text',OTPInput:'otp-input',PasswordInput:'password-input',TextArea:'textarea',TextInput:'textinput',Toast:'toast',ToastContainer:'toast-container',ProgressBar:'progress-bar',Radio:'radio',RadioGroup:'radio-group',RadioLabel:'radio-label',SkipNav:'skipnav',Spinner:'spinner',SelectInput:'select-input',Tag:'tag',Tooltip:'tooltip',TooltipInteractiveWrapper:'tooltip-interactive-wrapper',Tabs:'tabs',TabList:'tab-list',TabItem:'tab-item',TabPanel:'tab-panel',TabIndicator:'tab-indicator',Table:'table',TableBody:'table-body',TableRow:'table-row',TableCell:'table-cell',TableHeader:'table-header',TableHeaderRow:'table-header-row',TableHeaderCell:'table-header-cell',TableFooter:'table-footer',TableFooterRow:'table-footer-row',TableFooterCell:'table-footer-cell',TableElement:'table-element',TourPopover:'tour-popover',TourMask:'tour-mask',Popover:'popover',PopoverInteractiveWrapper:'popover-interactive-wrapper',BottomSheet:'bottom-sheet',BottomSheetBody:'bottom-sheet-body',BottomSheetHeader:'bottom-sheet-header',BottomSheetFooter:'bottom-sheet-footer',BottomSheetGrabHandle:'bottomsheet-grab-handle',Card:'card',CardBody:'card-body',CardHeader:'card-header',CardFooter:'card-footer',Collapsible:'collapsible',CollapsibleBody:'collapsible-body',CollapsibleButton:'collapsible-button',CollapsibleLink:'collapsible-link',Modal:'modal',ModalBody:'modal-body',ModalHeader:'modal-header',ModalFooter:'modal-footer',ModalBackdrop:'modal-backdrop',ModalScrollOverlay:'modal-scroll-overlay',VisuallyHidden:'visually-hidden',FormLabel:'form-label',Switch:'switch',SwitchLabel:'switch-label',StyledBaseInput:'styled-base-input',Skeleton:'skeleton'};
+var MetaConstants={Accordion:'accordion',AccordionButton:'accordion-button',AccordionItem:'accordion-item',ActionList:'action-list',ActionListItem:'action-list-item',ActionListSection:'action-list-section',Alert:'alert',Amount:'amount',AutoComplete:'autocomplete',Badge:'badge',Box:'box',BaseBox:'base-box',BaseText:'base-text',Button:'button',Carousel:'carousel',Checkbox:'checkbox',CheckboxGroup:'checkbox-group',CheckboxLabel:'checkbox-label',Chip:'chip',ChipGroup:'chip-group',ChipLabel:'chip-label',Code:'code',Component:'blade-component',Counter:'counter',Display:'display',Divider:'divider',Drawer:'drawer',Dropdown:'dropdown',DropdownOverlay:'dropdown-overlay',DropdownFooter:'dropdown-footer',DropdownHeader:'dropdown-header',Icon:'icon',IconButton:'icon-button',Indicator:'indicator',Link:'link',List:'list',ListItem:'list-item',ListItemCode:'list-item-code',ListItemLink:'list-item-link',ListItemText:'list-item-text',OTPInput:'otp-input',PasswordInput:'password-input',TextArea:'textarea',TextInput:'textinput',Toast:'toast',ToastContainer:'toast-container',ProgressBar:'progress-bar',Radio:'radio',RadioGroup:'radio-group',RadioLabel:'radio-label',SkipNav:'skipnav',Spinner:'spinner',SelectInput:'select-input',Tag:'tag',Tooltip:'tooltip',TooltipInteractiveWrapper:'tooltip-interactive-wrapper',Tabs:'tabs',TabList:'tab-list',TabItem:'tab-item',TabPanel:'tab-panel',TabIndicator:'tab-indicator',Table:'table',TableBody:'table-body',TableRow:'table-row',TableCell:'table-cell',TableHeader:'table-header',TableHeaderRow:'table-header-row',TableHeaderCell:'table-header-cell',TableFooter:'table-footer',TableFooterRow:'table-footer-row',TableFooterCell:'table-footer-cell',TableElement:'table-element',TourPopover:'tour-popover',TourMask:'tour-mask',Popover:'popover',PopoverInteractiveWrapper:'popover-interactive-wrapper',BottomSheet:'bottom-sheet',BottomSheetBody:'bottom-sheet-body',BottomSheetHeader:'bottom-sheet-header',BottomSheetFooter:'bottom-sheet-footer',BottomSheetGrabHandle:'bottomsheet-grab-handle',Card:'card',CardBody:'card-body',CardHeader:'card-header',CardFooter:'card-footer',Collapsible:'collapsible',CollapsibleBody:'collapsible-body',CollapsibleButton:'collapsible-button',CollapsibleLink:'collapsible-link',Modal:'modal',ModalBody:'modal-body',ModalHeader:'modal-header',ModalFooter:'modal-footer',ModalBackdrop:'modal-backdrop',ModalScrollOverlay:'modal-scroll-overlay',VisuallyHidden:'visually-hidden',FormLabel:'form-label',Switch:'switch',SwitchLabel:'switch-label',StyledBaseInput:'styled-base-input',Skeleton:'skeleton'};
 
 export { MetaConstants };
 //# sourceMappingURL=metaConstants.js.map

package/build/lib/native/utils/metaAttribute/metaConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"metaConstants.js","sources":["../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n  Accordion: 'accordion',\n  AccordionButton: 'accordion-button',\n  AccordionItem: 'accordion-item',\n  ActionList: 'action-list',\n  ActionListItem: 'action-list-item',\n  ActionListSection: 'action-list-section',\n  Alert: 'alert',\n  Amount: 'amount',\n  AutoComplete: 'autocomplete',\n  Badge: 'badge',\n  Box: 'box',\n  BaseBox: 'base-box',\n  BaseText: 'base-text',\n  Button: 'button',\n  Carousel: 'carousel',\n  Checkbox: 'checkbox',\n  CheckboxGroup: 'checkbox-group',\n  CheckboxLabel: 'checkbox-label',\n  Chip: 'chip',\n  ChipGroup: 'chip-group',\n  ChipLabel: 'chip-label',\n  Code: 'code',\n  Component: 'blade-component',\n  Counter: 'counter',\n  Display: 'display',\n  Divider: 'divider',\n  Dropdown: 'dropdown',\n  DropdownOverlay: 'dropdown-overlay',\n  DropdownFooter: 'dropdown-footer',\n  DropdownHeader: 'dropdown-header',\n  Icon: 'icon',\n  IconButton: 'icon-button',\n  Indicator: 'indicator',\n  Link: 'link',\n  List: 'list',\n  ListItem: 'list-item',\n  ListItemCode: 'list-item-code',\n  ListItemLink: 'list-item-link',\n  ListItemText: 'list-item-text',\n  OTPInput: 'otp-input',\n  PasswordInput: 'password-input',\n  TextArea: 'textarea',\n  TextInput: 'textinput',\n  Toast: 'toast',\n  ToastContainer: 'toast-container',\n  ProgressBar: 'progress-bar',\n  Radio: 'radio',\n  RadioGroup: 'radio-group',\n  RadioLabel: 'radio-label',\n  SkipNav: 'skipnav',\n  Spinner: 'spinner',\n  SelectInput: 'select-input',\n  Tag: 'tag',\n  Tooltip: 'tooltip',\n  TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n  Tabs: 'tabs',\n  TabList: 'tab-list',\n  TabItem: 'tab-item',\n  TabPanel: 'tab-panel',\n  TabIndicator: 'tab-indicator',\n  Table: 'table',\n  TableBody: 'table-body',\n  TableRow: 'table-row',\n  TableCell: 'table-cell',\n  TableHeader: 'table-header',\n  TableHeaderRow: 'table-header-row',\n  TableHeaderCell: 'table-header-cell',\n  TableFooter: 'table-footer',\n  TableFooterRow: 'table-footer-row',\n  TableFooterCell: 'table-footer-cell',\n  TableElement: 'table-element',\n  TourPopover: 'tour-popover',\n  TourMask: 'tour-mask',\n  Popover: 'popover',\n  PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n  BottomSheet: 'bottom-sheet',\n  BottomSheetBody: 'bottom-sheet-body',\n  BottomSheetHeader: 'bottom-sheet-header',\n  BottomSheetFooter: 'bottom-sheet-footer',\n  BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n  Card: 'card',\n  CardBody: 'card-body',\n  CardHeader: 'card-header',\n  CardFooter: 'card-footer',\n  Collapsible: 'collapsible',\n  CollapsibleBody: 'collapsible-body',\n  CollapsibleButton: 'collapsible-button',\n  CollapsibleLink: 'collapsible-link',\n  Modal: 'modal',\n  ModalBody: 'modal-body',\n  ModalHeader: 'modal-header',\n  ModalFooter: 'modal-footer',\n  ModalBackdrop: 'modal-backdrop',\n  ModalScrollOverlay: 'modal-scroll-overlay',\n  VisuallyHidden: 'visually-hidden',\n  FormLabel: 'form-label',\n  Switch: 'switch',\n  SwitchLabel: 'switch-label',\n  StyledBaseInput: 'styled-base-input',\n  Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","Toast","ToastContainer","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"AAAa,IAAAA,aAAa,CAAG,CAC3BC,SAAS,CAAE,WAAW,CACtBC,eAAe,CAAE,kBAAkB,CACnCC,aAAa,CAAE,gBAAgB,CAC/BC,UAAU,CAAE,aAAa,CACzBC,cAAc,CAAE,kBAAkB,CAClCC,iBAAiB,CAAE,qBAAqB,CACxCC,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,QAAQ,CAChBC,YAAY,CAAE,cAAc,CAC5BC,KAAK,CAAE,OAAO,CACdC,GAAG,CAAE,KAAK,CACVC,OAAO,CAAE,UAAU,CACnBC,QAAQ,CAAE,WAAW,CACrBC,MAAM,CAAE,QAAQ,CAChBC,QAAQ,CAAE,UAAU,CACpBC,QAAQ,CAAE,UAAU,CACpBC,aAAa,CAAE,gBAAgB,CAC/BC,aAAa,CAAE,gBAAgB,CAC/BC,IAAI,CAAE,MAAM,CACZC,SAAS,CAAE,YAAY,CACvBC,SAAS,CAAE,YAAY,CACvBC,IAAI,CAAE,MAAM,CACZC,SAAS,CAAE,iBAAiB,CAC5BC,OAAO,CAAE,SAAS,CAClBC,OAAO,CAAE,SAAS,CAClBC,OAAO,CAAE,SAAS,CAClBC,QAAQ,CAAE,UAAU,CACpBC,eAAe,CAAE,kBAAkB,CACnCC,cAAc,CAAE,iBAAiB,CACjCC,cAAc,CAAE,iBAAiB,CACjCC,IAAI,CAAE,MAAM,CACZC,UAAU,CAAE,aAAa,CACzBC,SAAS,CAAE,WAAW,CACtBC,IAAI,CAAE,MAAM,CACZC,IAAI,CAAE,MAAM,CACZC,QAAQ,CAAE,WAAW,CACrBC,YAAY,CAAE,gBAAgB,CAC9BC,YAAY,CAAE,gBAAgB,CAC9BC,YAAY,CAAE,gBAAgB,CAC9BC,QAAQ,CAAE,WAAW,CACrBC,aAAa,CAAE,gBAAgB,CAC/BC,QAAQ,CAAE,UAAU,CACpBC,SAAS,CAAE,WAAW,CACtBC,KAAK,CAAE,OAAO,CACdC,cAAc,CAAE,iBAAiB,CACjCC,WAAW,CAAE,cAAc,CAC3BC,KAAK,CAAE,OAAO,CACdC,UAAU,CAAE,aAAa,CACzBC,UAAU,CAAE,aAAa,CACzBC,OAAO,CAAE,SAAS,CAClBC,OAAO,CAAE,SAAS,CAClBC,WAAW,CAAE,cAAc,CAC3BC,GAAG,CAAE,KAAK,CACVC,OAAO,CAAE,SAAS,CAClBC,yBAAyB,CAAE,6BAA6B,CACxDC,IAAI,CAAE,MAAM,CACZC,OAAO,CAAE,UAAU,CACnBC,OAAO,CAAE,UAAU,CACnBC,QAAQ,CAAE,WAAW,CACrBC,YAAY,CAAE,eAAe,CAC7BC,KAAK,CAAE,OAAO,CACdC,SAAS,CAAE,YAAY,CACvBC,QAAQ,CAAE,WAAW,CACrBC,SAAS,CAAE,YAAY,CACvBC,WAAW,CAAE,cAAc,CAC3BC,cAAc,CAAE,kBAAkB,CAClCC,eAAe,CAAE,mBAAmB,CACpCC,WAAW,CAAE,cAAc,CAC3BC,cAAc,CAAE,kBAAkB,CAClCC,eAAe,CAAE,mBAAmB,CACpCC,YAAY,CAAE,eAAe,CAC7BC,WAAW,CAAE,cAAc,CAC3BC,QAAQ,CAAE,WAAW,CACrBC,OAAO,CAAE,SAAS,CAClBC,yBAAyB,CAAE,6BAA6B,CACxDC,WAAW,CAAE,cAAc,CAC3BC,eAAe,CAAE,mBAAmB,CACpCC,iBAAiB,CAAE,qBAAqB,CACxCC,iBAAiB,CAAE,qBAAqB,CACxCC,qBAAqB,CAAE,yBAAyB,CAChDC,IAAI,CAAE,MAAM,CACZC,QAAQ,CAAE,WAAW,CACrBC,UAAU,CAAE,aAAa,CACzBC,UAAU,CAAE,aAAa,CACzBC,WAAW,CAAE,aAAa,CAC1BC,eAAe,CAAE,kBAAkB,CACnCC,iBAAiB,CAAE,oBAAoB,CACvCC,eAAe,CAAE,kBAAkB,CACnCC,KAAK,CAAE,OAAO,CACdC,SAAS,CAAE,YAAY,CACvBC,WAAW,CAAE,cAAc,CAC3BC,WAAW,CAAE,cAAc,CAC3BC,aAAa,CAAE,gBAAgB,CAC/BC,kBAAkB,CAAE,sBAAsB,CAC1CC,cAAc,CAAE,iBAAiB,CACjCC,SAAS,CAAE,YAAY,CACvBC,MAAM,CAAE,QAAQ,CAChBC,WAAW,CAAE,cAAc,CAC3BC,eAAe,CAAE,mBAAmB,CACpCC,QAAQ,CAAE,UACZ;;;;"}
+{"version":3,"file":"metaConstants.js","sources":["../../../../../src/utils/metaAttribute/metaConstants.ts"],"sourcesContent":["export const MetaConstants = {\n  Accordion: 'accordion',\n  AccordionButton: 'accordion-button',\n  AccordionItem: 'accordion-item',\n  ActionList: 'action-list',\n  ActionListItem: 'action-list-item',\n  ActionListSection: 'action-list-section',\n  Alert: 'alert',\n  Amount: 'amount',\n  AutoComplete: 'autocomplete',\n  Badge: 'badge',\n  Box: 'box',\n  BaseBox: 'base-box',\n  BaseText: 'base-text',\n  Button: 'button',\n  Carousel: 'carousel',\n  Checkbox: 'checkbox',\n  CheckboxGroup: 'checkbox-group',\n  CheckboxLabel: 'checkbox-label',\n  Chip: 'chip',\n  ChipGroup: 'chip-group',\n  ChipLabel: 'chip-label',\n  Code: 'code',\n  Component: 'blade-component',\n  Counter: 'counter',\n  Display: 'display',\n  Divider: 'divider',\n  Drawer: 'drawer',\n  Dropdown: 'dropdown',\n  DropdownOverlay: 'dropdown-overlay',\n  DropdownFooter: 'dropdown-footer',\n  DropdownHeader: 'dropdown-header',\n  Icon: 'icon',\n  IconButton: 'icon-button',\n  Indicator: 'indicator',\n  Link: 'link',\n  List: 'list',\n  ListItem: 'list-item',\n  ListItemCode: 'list-item-code',\n  ListItemLink: 'list-item-link',\n  ListItemText: 'list-item-text',\n  OTPInput: 'otp-input',\n  PasswordInput: 'password-input',\n  TextArea: 'textarea',\n  TextInput: 'textinput',\n  Toast: 'toast',\n  ToastContainer: 'toast-container',\n  ProgressBar: 'progress-bar',\n  Radio: 'radio',\n  RadioGroup: 'radio-group',\n  RadioLabel: 'radio-label',\n  SkipNav: 'skipnav',\n  Spinner: 'spinner',\n  SelectInput: 'select-input',\n  Tag: 'tag',\n  Tooltip: 'tooltip',\n  TooltipInteractiveWrapper: 'tooltip-interactive-wrapper',\n  Tabs: 'tabs',\n  TabList: 'tab-list',\n  TabItem: 'tab-item',\n  TabPanel: 'tab-panel',\n  TabIndicator: 'tab-indicator',\n  Table: 'table',\n  TableBody: 'table-body',\n  TableRow: 'table-row',\n  TableCell: 'table-cell',\n  TableHeader: 'table-header',\n  TableHeaderRow: 'table-header-row',\n  TableHeaderCell: 'table-header-cell',\n  TableFooter: 'table-footer',\n  TableFooterRow: 'table-footer-row',\n  TableFooterCell: 'table-footer-cell',\n  TableElement: 'table-element',\n  TourPopover: 'tour-popover',\n  TourMask: 'tour-mask',\n  Popover: 'popover',\n  PopoverInteractiveWrapper: 'popover-interactive-wrapper',\n  BottomSheet: 'bottom-sheet',\n  BottomSheetBody: 'bottom-sheet-body',\n  BottomSheetHeader: 'bottom-sheet-header',\n  BottomSheetFooter: 'bottom-sheet-footer',\n  BottomSheetGrabHandle: 'bottomsheet-grab-handle',\n  Card: 'card',\n  CardBody: 'card-body',\n  CardHeader: 'card-header',\n  CardFooter: 'card-footer',\n  Collapsible: 'collapsible',\n  CollapsibleBody: 'collapsible-body',\n  CollapsibleButton: 'collapsible-button',\n  CollapsibleLink: 'collapsible-link',\n  Modal: 'modal',\n  ModalBody: 'modal-body',\n  ModalHeader: 'modal-header',\n  ModalFooter: 'modal-footer',\n  ModalBackdrop: 'modal-backdrop',\n  ModalScrollOverlay: 'modal-scroll-overlay',\n  VisuallyHidden: 'visually-hidden',\n  FormLabel: 'form-label',\n  Switch: 'switch',\n  SwitchLabel: 'switch-label',\n  StyledBaseInput: 'styled-base-input',\n  Skeleton: 'skeleton',\n} as const;\n"],"names":["MetaConstants","Accordion","AccordionButton","AccordionItem","ActionList","ActionListItem","ActionListSection","Alert","Amount","AutoComplete","Badge","Box","BaseBox","BaseText","Button","Carousel","Checkbox","CheckboxGroup","CheckboxLabel","Chip","ChipGroup","ChipLabel","Code","Component","Counter","Display","Divider","Drawer","Dropdown","DropdownOverlay","DropdownFooter","DropdownHeader","Icon","IconButton","Indicator","Link","List","ListItem","ListItemCode","ListItemLink","ListItemText","OTPInput","PasswordInput","TextArea","TextInput","Toast","ToastContainer","ProgressBar","Radio","RadioGroup","RadioLabel","SkipNav","Spinner","SelectInput","Tag","Tooltip","TooltipInteractiveWrapper","Tabs","TabList","TabItem","TabPanel","TabIndicator","Table","TableBody","TableRow","TableCell","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TableElement","TourPopover","TourMask","Popover","PopoverInteractiveWrapper","BottomSheet","BottomSheetBody","BottomSheetHeader","BottomSheetFooter","BottomSheetGrabHandle","Card","CardBody","CardHeader","CardFooter","Collapsible","CollapsibleBody","CollapsibleButton","CollapsibleLink","Modal","ModalBody","ModalHeader","ModalFooter","ModalBackdrop","ModalScrollOverlay","VisuallyHidden","FormLabel","Switch","SwitchLabel","StyledBaseInput","Skeleton"],"mappings":"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"}

package/build/lib/web/development/components/BaseHeaderFooter/BaseHeader.js

@@ -12,6 +12,7 @@ import '../../utils/isValidAllowedChildren/index.js';
 import '../../utils/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/logger/index.js';
+import '../../tokens/global/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { throwBladeError, logger } from '../../utils/logger/logger.js';
@@ -22,6 +23,8 @@ import { Box } from '../Box/Box.js';
 import { IconButton } from '../Button/IconButton/IconButton.js';
 import ChevronLeftIcon from '../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
 import { Text } from '../Typography/Text/Text.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { size } from '../../tokens/global/size.js';
 import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
 import { Divider } from '../Divider/Divider.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
@@ -112,6 +115,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
     onBackButtonClick = _ref.onBackButtonClick,
     onCloseButtonClick = _ref.onCloseButtonClick,
     closeButtonRef = _ref.closeButtonRef,
+    backButtonRef = _ref.backButtonRef,
     testID = _ref.testID,
     onClickCapture = _ref.onClickCapture,
     onKeyDown = _ref.onKeyDown,
@@ -159,6 +163,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
           marginRight: "spacing.5",
           children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
             children: /*#__PURE__*/jsx(IconButton, {
+              ref: backButtonRef,
               size: "large",
               icon: ChevronLeftIcon,
               onClick: function onClick() {
@@ -175,8 +180,6 @@ var _BaseHeader = function _BaseHeader(_ref) {
           flexDirection: "row",
           alignItems: "flex-start",
           children: [leading ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
-            width: "spacing.8",
-            height: "spacing.8",
             marginRight: "spacing.3"
           }, centerBoxProps), {}, {
             children: leading
@@ -193,6 +196,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
               flexDirection: "row",
               children: [title ? /*#__PURE__*/jsx(Text, {
                 size: "large",
+                marginTop: makeSize(size['1']),
                 weight: "semibold",
                 color: "surface.text.gray.normal",
                 children: title

package/build/lib/web/development/components/BaseHeaderFooter/BaseHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseHeader.js","sources":["../../../../../../src/components/BaseHeaderFooter/BaseHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport type { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ChevronLeftIcon, CloseIcon } from '~components/Icons';\nimport type { TestID } from '~utils/types';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { isReactNative } from '~utils';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { logger, throwBladeError } from '~utils/logger';\n\ntype BaseHeaderProps = {\n  title?: string;\n  subtitle?: string;\n  /**\n   * Leading part of the header placed at the left most side of the header\n   */\n  leading?: React.ReactNode;\n  /**\n   * Trailing part of the header placed at the right most side of the header\n   */\n  trailing?: React.ReactNode;\n  /**\n   * Placed adjacent to the title text\n   */\n  titleSuffix?: React.ReactNode;\n  /**\n   * @default true\n   */\n  showDivider?: boolean;\n  /**\n   * @default false\n   */\n  showBackButton?: boolean;\n  /**\n   * @default true\n   */\n  showCloseButton?: boolean;\n  onCloseButtonClick?: () => void;\n  onBackButtonClick?: () => void;\n  closeButtonRef?: React.MutableRefObject<any>;\n  metaComponentName?: string;\n  /**\n   * inner child of BottomSheetHeader. Meant to be used for AutoComplete only\n   */\n  children?: React.ReactElement;\n} & Pick<\n  ReactDOMAttributes,\n  | 'onClickCapture'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'onLostPointerCapture'\n  | 'onPointerCancel'\n  | 'onPointerDown'\n  | 'onPointerMove'\n  | 'onPointerUp'\n> &\n  TestID;\n\ntype TrailingComponents = 'Button' | 'Badge' | 'Link' | 'Text' | 'Amount';\n\nconst centerBoxProps: BoxProps = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  // We want to align title, icon, titleSuffix, trailing, closeButton to baseline\n  // But we also want to keep them center aligned to each other\n  // So we add a virtual Box around these slots with 28px and center align them to that box\n  // We have done similar thing in figma as well (which is where this 28px comes from)\n  height: '28px',\n};\n\n// prop restriction map for corresponding sub components\nconst propRestrictionMap = {\n  Button: {\n    size: 'xsmall',\n    variant: 'tertiary',\n  },\n  Badge: {\n    size: 'medium',\n  },\n  Link: {\n    size: 'medium',\n  },\n  Text: {\n    size: 'medium',\n    variant: 'body',\n  },\n  Amount: {\n    type: 'body',\n    size: 'medium',\n  },\n} as const;\n\nconst useTrailingRestriction = (trailing: React.ReactNode): React.ReactNode => {\n  const [\n    validatedTrailingComponent,\n    setValidatedTrailingComponent,\n  ] = React.useState<React.ReactElement | null>(null);\n\n  // validate and restrict sub component props in trailing prop\n  React.useEffect(() => {\n    if (React.isValidElement(trailing)) {\n      const trailingComponentType = getComponentId(trailing) as TrailingComponents;\n      const restrictedProps = propRestrictionMap[trailingComponentType];\n      const allowedComponents = Object.keys(propRestrictionMap);\n      if (__DEV__) {\n        if (!restrictedProps) {\n          throwBladeError({\n            message: `Only one of \\`${allowedComponents.join(\n              ', ',\n            )}\\` component is accepted as trailing`,\n            moduleName: 'Header',\n          });\n        }\n      }\n\n      const restrictedPropKeys = Object.keys(propRestrictionMap[trailingComponentType]);\n      for (const prop of restrictedPropKeys) {\n        if (trailing?.props?.hasOwnProperty(prop)) {\n          logger({\n            message: `Do not pass \"${prop}\" to \"${trailingComponentType}\" while inside Header trailing, because we override it.`,\n            moduleName: 'Header',\n            type: 'warn',\n          });\n        }\n      }\n      setValidatedTrailingComponent(\n        React.cloneElement(trailing as React.ReactElement, restrictedProps),\n      );\n    }\n  }, [trailing]);\n\n  return validatedTrailingComponent;\n};\n\nconst _BaseHeader = ({\n  title,\n  subtitle,\n  leading,\n  titleSuffix,\n  trailing,\n  showDivider = true,\n  showBackButton = false,\n  showCloseButton = true,\n  onBackButtonClick,\n  onCloseButtonClick,\n  closeButtonRef,\n  testID,\n  onClickCapture,\n  onKeyDown,\n  onKeyUp,\n  onLostPointerCapture,\n  onPointerCancel,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  metaComponentName,\n  children,\n}: BaseHeaderProps): React.ReactElement => {\n  const validatedTrailingComponent = useTrailingRestriction(trailing);\n  const shouldWrapTitle = titleSuffix && trailing && showBackButton && showCloseButton;\n\n  const webOnlyEventHandlers: Record<string, any> = isReactNative()\n    ? {}\n    : {\n        onClickCapture,\n        onKeyDown,\n        onKeyUp,\n        onLostPointerCapture,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n      };\n\n  return (\n    <BaseBox {...metaAttribute({ name: metaComponentName, testID })}>\n      <BaseBox\n        marginY={{ base: 'spacing.5', m: 'spacing.6' }}\n        paddingX={{ base: 'spacing.5', m: 'spacing.6' }}\n        touchAction=\"none\"\n        {...webOnlyEventHandlers}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" userSelect=\"none\">\n          {showBackButton ? (\n            <BaseBox overflow=\"visible\" marginRight=\"spacing.5\">\n              <Box {...centerBoxProps}>\n                <IconButton\n                  size=\"large\"\n                  icon={ChevronLeftIcon}\n                  onClick={() => onBackButtonClick?.()}\n                  accessibilityLabel=\"Back\"\n                />\n              </Box>\n            </BaseBox>\n          ) : null}\n          <BaseBox\n            paddingRight=\"spacing.5\"\n            marginRight=\"auto\"\n            flex=\"auto\"\n            display=\"flex\"\n            flexDirection=\"row\"\n            alignItems=\"flex-start\"\n          >\n            {leading ? (\n              <BaseBox\n                width=\"spacing.8\"\n                height=\"spacing.8\"\n                marginRight=\"spacing.3\"\n                {...centerBoxProps}\n              >\n                {leading}\n              </BaseBox>\n            ) : null}\n            <BaseBox flex=\"auto\">\n              <BaseBox\n                // Explicitly setting maxWidth in React Native because text is not being wrapped properly when multiple fix width components are rendered in header\n                // In web, flex containers seem to work a expected\n                // @todo: resolve this if we figure out some better solution later\n                maxWidth={isReactNative() && shouldWrapTitle ? '100px' : undefined}\n                flexShrink={0}\n                display=\"flex\"\n                flexDirection=\"row\"\n              >\n                {title ? (\n                  <Text size=\"large\" weight=\"semibold\" color=\"surface.text.gray.normal\">\n                    {title}\n                  </Text>\n                ) : null}\n                {titleSuffix && (\n                  <BaseBox marginLeft=\"spacing.3\">\n                    <Box {...centerBoxProps}>{titleSuffix}</Box>\n                  </BaseBox>\n                )}\n              </BaseBox>\n              {subtitle ? (\n                <Text variant=\"body\" size=\"small\" weight=\"regular\" color=\"surface.text.gray.muted\">\n                  {subtitle}\n                </Text>\n              ) : null}\n            </BaseBox>\n          </BaseBox>\n          {validatedTrailingComponent ? (\n            <BaseBox marginRight=\"spacing.5\">\n              <Box {...centerBoxProps}>{validatedTrailingComponent}</Box>\n            </BaseBox>\n          ) : null}\n          {showCloseButton ? (\n            <Box {...centerBoxProps}>\n              <IconButton\n                ref={closeButtonRef}\n                size=\"large\"\n                icon={CloseIcon}\n                accessibilityLabel=\"Close\"\n                onClick={() => onCloseButtonClick?.()}\n              />\n            </Box>\n          ) : null}\n        </BaseBox>\n        {children}\n      </BaseBox>\n      {showDivider ? <Divider /> : null}\n    </BaseBox>\n  );\n};\n\nconst BaseHeader = assignWithoutSideEffects(_BaseHeader, {\n  componentId: 'BaseHeader',\n});\n\nexport type { BaseHeaderProps };\nexport { BaseHeader };\n"],"names":["centerBoxProps","display","alignItems","justifyContent","height","propRestrictionMap","Button","size","variant","Badge","Link","Text","Amount","type","useTrailingRestriction","trailing","_React$useState","React","useState","_React$useState2","_slicedToArray","validatedTrailingComponent","setValidatedTrailingComponent","useEffect","isValidElement","trailingComponentType","getComponentId","restrictedProps","allowedComponents","Object","keys","throwBladeError","message","concat","join","moduleName","restrictedPropKeys","_i","_restrictedPropKeys","length","_trailing$props","prop","props","hasOwnProperty","logger","cloneElement","_BaseHeader","_ref","title","subtitle","leading","titleSuffix","_ref$showDivider","showDivider","_ref$showBackButton","showBackButton","_ref$showCloseButton","showCloseButton","onBackButtonClick","onCloseButtonClick","closeButtonRef","testID","onClickCapture","onKeyDown","onKeyUp","onLostPointerCapture","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","metaComponentName","children","shouldWrapTitle","webOnlyEventHandlers","isReactNative","_jsxs","BaseBox","_objectSpread","metaAttribute","name","marginY","base","m","paddingX","touchAction","flexDirection","userSelect","_jsx","overflow","marginRight","Box","IconButton","icon","ChevronLeftIcon","onClick","accessibilityLabel","paddingRight","flex","width","maxWidth","undefined","flexShrink","weight","color","marginLeft","ref","CloseIcon","Divider","BaseHeader","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"BaseHeader.js","sources":["../../../../../../src/components/BaseHeaderFooter/BaseHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport type { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ChevronLeftIcon, CloseIcon } from '~components/Icons';\nimport type { TestID } from '~utils/types';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { isReactNative, makeSize } from '~utils';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { logger, throwBladeError } from '~utils/logger';\nimport { size } from '~tokens/global';\n\ntype BaseHeaderProps = {\n  title?: string;\n  subtitle?: string;\n  /**\n   * Leading part of the header placed at the left most side of the header\n   */\n  leading?: React.ReactNode;\n  /**\n   * Trailing part of the header placed at the right most side of the header\n   */\n  trailing?: React.ReactNode;\n  /**\n   * Placed adjacent to the title text\n   */\n  titleSuffix?: React.ReactNode;\n  /**\n   * @default true\n   */\n  showDivider?: boolean;\n  /**\n   * @default false\n   */\n  showBackButton?: boolean;\n  /**\n   * @default true\n   */\n  showCloseButton?: boolean;\n  onCloseButtonClick?: () => void;\n  onBackButtonClick?: () => void;\n  closeButtonRef?: React.MutableRefObject<any>;\n  backButtonRef?: React.MutableRefObject<any>;\n  metaComponentName?: string;\n  /**\n   * inner child of BottomSheetHeader. Meant to be used for AutoComplete only\n   */\n  children?: React.ReactElement;\n} & Pick<\n  ReactDOMAttributes,\n  | 'onClickCapture'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'onLostPointerCapture'\n  | 'onPointerCancel'\n  | 'onPointerDown'\n  | 'onPointerMove'\n  | 'onPointerUp'\n> &\n  TestID;\n\ntype TrailingComponents = 'Button' | 'Badge' | 'Link' | 'Text' | 'Amount';\n\nconst centerBoxProps: BoxProps = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  // We want to align title, icon, titleSuffix, trailing, closeButton to baseline\n  // But we also want to keep them center aligned to each other\n  // So we add a virtual Box around these slots with 28px and center align them to that box\n  // We have done similar thing in figma as well (which is where this 28px comes from)\n  height: '28px',\n};\n\n// prop restriction map for corresponding sub components\nconst propRestrictionMap = {\n  Button: {\n    size: 'xsmall',\n    variant: 'tertiary',\n  },\n  Badge: {\n    size: 'medium',\n  },\n  Link: {\n    size: 'medium',\n  },\n  Text: {\n    size: 'medium',\n    variant: 'body',\n  },\n  Amount: {\n    type: 'body',\n    size: 'medium',\n  },\n} as const;\n\nconst useTrailingRestriction = (trailing: React.ReactNode): React.ReactNode => {\n  const [\n    validatedTrailingComponent,\n    setValidatedTrailingComponent,\n  ] = React.useState<React.ReactElement | null>(null);\n\n  // validate and restrict sub component props in trailing prop\n  React.useEffect(() => {\n    if (React.isValidElement(trailing)) {\n      const trailingComponentType = getComponentId(trailing) as TrailingComponents;\n      const restrictedProps = propRestrictionMap[trailingComponentType];\n      const allowedComponents = Object.keys(propRestrictionMap);\n      if (__DEV__) {\n        if (!restrictedProps) {\n          throwBladeError({\n            message: `Only one of \\`${allowedComponents.join(\n              ', ',\n            )}\\` component is accepted as trailing`,\n            moduleName: 'Header',\n          });\n        }\n      }\n\n      const restrictedPropKeys = Object.keys(propRestrictionMap[trailingComponentType]);\n      for (const prop of restrictedPropKeys) {\n        if (trailing?.props?.hasOwnProperty(prop)) {\n          logger({\n            message: `Do not pass \"${prop}\" to \"${trailingComponentType}\" while inside Header trailing, because we override it.`,\n            moduleName: 'Header',\n            type: 'warn',\n          });\n        }\n      }\n      setValidatedTrailingComponent(\n        React.cloneElement(trailing as React.ReactElement, restrictedProps),\n      );\n    }\n  }, [trailing]);\n\n  return validatedTrailingComponent;\n};\n\nconst _BaseHeader = ({\n  title,\n  subtitle,\n  leading,\n  titleSuffix,\n  trailing,\n  showDivider = true,\n  showBackButton = false,\n  showCloseButton = true,\n  onBackButtonClick,\n  onCloseButtonClick,\n  closeButtonRef,\n  backButtonRef,\n  testID,\n  onClickCapture,\n  onKeyDown,\n  onKeyUp,\n  onLostPointerCapture,\n  onPointerCancel,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  metaComponentName,\n  children,\n}: BaseHeaderProps): React.ReactElement => {\n  const validatedTrailingComponent = useTrailingRestriction(trailing);\n  const shouldWrapTitle = titleSuffix && trailing && showBackButton && showCloseButton;\n\n  const webOnlyEventHandlers: Record<string, any> = isReactNative()\n    ? {}\n    : {\n        onClickCapture,\n        onKeyDown,\n        onKeyUp,\n        onLostPointerCapture,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n      };\n\n  return (\n    <BaseBox {...metaAttribute({ name: metaComponentName, testID })}>\n      <BaseBox\n        marginY={{ base: 'spacing.5', m: 'spacing.6' }}\n        paddingX={{ base: 'spacing.5', m: 'spacing.6' }}\n        touchAction=\"none\"\n        {...webOnlyEventHandlers}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" userSelect=\"none\">\n          {showBackButton ? (\n            <BaseBox overflow=\"visible\" marginRight=\"spacing.5\">\n              <Box {...centerBoxProps}>\n                <IconButton\n                  ref={backButtonRef}\n                  size=\"large\"\n                  icon={ChevronLeftIcon}\n                  onClick={() => onBackButtonClick?.()}\n                  accessibilityLabel=\"Back\"\n                />\n              </Box>\n            </BaseBox>\n          ) : null}\n          <BaseBox\n            paddingRight=\"spacing.5\"\n            marginRight=\"auto\"\n            flex=\"auto\"\n            display=\"flex\"\n            flexDirection=\"row\"\n            alignItems=\"flex-start\"\n          >\n            {leading ? (\n              <BaseBox marginRight=\"spacing.3\" {...centerBoxProps}>\n                {leading}\n              </BaseBox>\n            ) : null}\n            <BaseBox flex=\"auto\">\n              <BaseBox\n                // Explicitly setting maxWidth in React Native because text is not being wrapped properly when multiple fix width components are rendered in header\n                // In web, flex containers seem to work a expected\n                // @todo: resolve this if we figure out some better solution later\n                maxWidth={isReactNative() && shouldWrapTitle ? '100px' : undefined}\n                flexShrink={0}\n                display=\"flex\"\n                flexDirection=\"row\"\n              >\n                {title ? (\n                  <Text\n                    size=\"large\"\n                    marginTop={makeSize(size['1'])}\n                    weight=\"semibold\"\n                    color=\"surface.text.gray.normal\"\n                  >\n                    {title}\n                  </Text>\n                ) : null}\n                {titleSuffix && (\n                  <BaseBox marginLeft=\"spacing.3\">\n                    <Box {...centerBoxProps}>{titleSuffix}</Box>\n                  </BaseBox>\n                )}\n              </BaseBox>\n              {subtitle ? (\n                <Text variant=\"body\" size=\"small\" weight=\"regular\" color=\"surface.text.gray.muted\">\n                  {subtitle}\n                </Text>\n              ) : null}\n            </BaseBox>\n          </BaseBox>\n          {validatedTrailingComponent ? (\n            <BaseBox marginRight=\"spacing.5\">\n              <Box {...centerBoxProps}>{validatedTrailingComponent}</Box>\n            </BaseBox>\n          ) : null}\n          {showCloseButton ? (\n            <Box {...centerBoxProps}>\n              <IconButton\n                ref={closeButtonRef}\n                size=\"large\"\n                icon={CloseIcon}\n                accessibilityLabel=\"Close\"\n                onClick={() => onCloseButtonClick?.()}\n              />\n            </Box>\n          ) : null}\n        </BaseBox>\n        {children}\n      </BaseBox>\n      {showDivider ? <Divider /> : null}\n    </BaseBox>\n  );\n};\n\nconst BaseHeader = assignWithoutSideEffects(_BaseHeader, {\n  componentId: 'BaseHeader',\n});\n\nexport type { BaseHeaderProps };\nexport { BaseHeader };\n"],"names":["centerBoxProps","display","alignItems","justifyContent","height","propRestrictionMap","Button","size","variant","Badge","Link","Text","Amount","type","useTrailingRestriction","trailing","_React$useState","React","useState","_React$useState2","_slicedToArray","validatedTrailingComponent","setValidatedTrailingComponent","useEffect","isValidElement","trailingComponentType","getComponentId","restrictedProps","allowedComponents","Object","keys","throwBladeError","message","concat","join","moduleName","restrictedPropKeys","_i","_restrictedPropKeys","length","_trailing$props","prop","props","hasOwnProperty","logger","cloneElement","_BaseHeader","_ref","title","subtitle","leading","titleSuffix","_ref$showDivider","showDivider","_ref$showBackButton","showBackButton","_ref$showCloseButton","showCloseButton","onBackButtonClick","onCloseButtonClick","closeButtonRef","backButtonRef","testID","onClickCapture","onKeyDown","onKeyUp","onLostPointerCapture","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","metaComponentName","children","shouldWrapTitle","webOnlyEventHandlers","isReactNative","_jsxs","BaseBox","_objectSpread","metaAttribute","name","marginY","base","m","paddingX","touchAction","flexDirection","userSelect","_jsx","overflow","marginRight","Box","IconButton","ref","icon","ChevronLeftIcon","onClick","accessibilityLabel","paddingRight","flex","maxWidth","undefined","flexShrink","marginTop","makeSize","weight","color","marginLeft","CloseIcon","Divider","BaseHeader","assignWithoutSideEffects","componentId"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ import createStylisCSSHigherSpecificityPlugin from './stylisCSSHigherSpecificity
 import { ThemeContext } from './useTheme.js';
 import { useBladeProvider } from './useBladeProvider.js';
 import { BottomSheetStackProvider } from '../BottomSheet/BottomSheetStack.js';
+import { DrawerStackProvider } from '../Drawer/StackProvider.js';
 import { jsx } from 'react/jsx-runtime';
 
 var tooltipDelays = {
@@ -28,8 +29,10 @@ var BladeProvider = function BladeProvider(_ref) {
         theme: theme,
         children: /*#__PURE__*/jsx(StyleSheetManager, {
           stylisPlugins: [createStylisCSSHigherSpecificityPlugin()],
-          children: /*#__PURE__*/jsx(BottomSheetStackProvider, {
-            children: children
+          children: /*#__PURE__*/jsx(DrawerStackProvider, {
+            children: /*#__PURE__*/jsx(BottomSheetStackProvider, {
+              children: children
+            })
           })
         })
       })

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

@@ -1 +1 @@
-{"version":3,"file":"BladeProvider.web.js","sources":["../../../../../../src/components/BladeProvider/BladeProvider.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport {\n  ThemeProvider as StyledComponentThemeProvider,\n  StyleSheetManager,\n} from 'styled-components';\nimport { FloatingDelayGroup } from '@floating-ui/react';\nimport stylisCSSHigherSpecificity from './stylisCSSHigherSpecificity';\nimport { ThemeContext } from './useTheme';\nimport { useBladeProvider } from './useBladeProvider';\nimport type { BladeProviderProps } from './types';\nimport { BottomSheetStackProvider } from '~components/BottomSheet/BottomSheetStack';\n\nconst tooltipDelays = { open: 300, close: 300 };\n\nconst BladeProvider = ({\n  themeTokens,\n  colorScheme: initialColorScheme,\n  children,\n}: BladeProviderProps): ReactElement => {\n  const { theme, themeContextValue } = useBladeProvider({ initialColorScheme, themeTokens });\n\n  return (\n    <ThemeContext.Provider value={themeContextValue}>\n      <FloatingDelayGroup delay={tooltipDelays}>\n        <StyledComponentThemeProvider theme={theme}>\n          <StyleSheetManager stylisPlugins={[stylisCSSHigherSpecificity()]}>\n            <BottomSheetStackProvider>{children}</BottomSheetStackProvider>\n          </StyleSheetManager>\n        </StyledComponentThemeProvider>\n      </FloatingDelayGroup>\n    </ThemeContext.Provider>\n  );\n};\n\nexport { BladeProvider };\n"],"names":["tooltipDelays","open","close","BladeProvider","_ref","themeTokens","initialColorScheme","colorScheme","children","_useBladeProvider","useBladeProvider","theme","themeContextValue","_jsx","ThemeContext","Provider","value","FloatingDelayGroup","delay","StyledComponentThemeProvider","StyleSheetManager","stylisPlugins","stylisCSSHigherSpecificity","BottomSheetStackProvider"],"mappings":";;;;;;;;AAYA,IAAMA,aAAa,GAAG;AAAEC,EAAAA,IAAI,EAAE,GAAG;AAAEC,EAAAA,KAAK,EAAE,GAAA;AAAI,CAAC,CAAA;AAE/C,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAIqB;AAAA,EAAA,IAHtCC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IACEC,kBAAkB,GAAAF,IAAA,CAA/BG,WAAW;IACXC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAER,IAAAC,iBAAA,GAAqCC,gBAAgB,CAAC;AAAEJ,MAAAA,kBAAkB,EAAlBA,kBAAkB;AAAED,MAAAA,WAAW,EAAXA,WAAAA;AAAY,KAAC,CAAC;IAAlFM,KAAK,GAAAF,iBAAA,CAALE,KAAK;IAAEC,iBAAiB,GAAAH,iBAAA,CAAjBG,iBAAiB,CAAA;AAEhC,EAAA,oBACEC,GAAA,CAACC,YAAY,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,iBAAkB;IAAAJ,QAAA,eAC9CK,GAAA,CAACI,kBAAkB,EAAA;AAACC,MAAAA,KAAK,EAAElB,aAAc;MAAAQ,QAAA,eACvCK,GAAA,CAACM,aAA4B,EAAA;AAACR,QAAAA,KAAK,EAAEA,KAAM;QAAAH,QAAA,eACzCK,GAAA,CAACO,iBAAiB,EAAA;AAACC,UAAAA,aAAa,EAAE,CAACC,sCAA0B,EAAE,CAAE;UAAAd,QAAA,eAC/DK,GAAA,CAACU,wBAAwB,EAAA;AAAAf,YAAAA,QAAA,EAAEA,QAAAA;WAAmC,CAAA;SAC7C,CAAA;OACS,CAAA;KACZ,CAAA;AAAC,GACA,CAAC,CAAA;AAE5B;;;;"}
+{"version":3,"file":"BladeProvider.web.js","sources":["../../../../../../src/components/BladeProvider/BladeProvider.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport {\n  ThemeProvider as StyledComponentThemeProvider,\n  StyleSheetManager,\n} from 'styled-components';\nimport { FloatingDelayGroup } from '@floating-ui/react';\nimport stylisCSSHigherSpecificity from './stylisCSSHigherSpecificity';\nimport { ThemeContext } from './useTheme';\nimport { useBladeProvider } from './useBladeProvider';\nimport type { BladeProviderProps } from './types';\nimport { BottomSheetStackProvider } from '~components/BottomSheet/BottomSheetStack';\nimport { DrawerStackProvider } from '~components/Drawer/StackProvider';\n\nconst tooltipDelays = { open: 300, close: 300 };\n\nconst BladeProvider = ({\n  themeTokens,\n  colorScheme: initialColorScheme,\n  children,\n}: BladeProviderProps): ReactElement => {\n  const { theme, themeContextValue } = useBladeProvider({ initialColorScheme, themeTokens });\n\n  return (\n    <ThemeContext.Provider value={themeContextValue}>\n      <FloatingDelayGroup delay={tooltipDelays}>\n        <StyledComponentThemeProvider theme={theme}>\n          <StyleSheetManager stylisPlugins={[stylisCSSHigherSpecificity()]}>\n            {/* \n              If you want to add a new provider for keeping track of stack in component,\n              You can move DrawerStackProvider to common utils and rename to GlobalStackProvider\n              and reuse it for your component.\n            */}\n            <DrawerStackProvider>\n              <BottomSheetStackProvider>{children}</BottomSheetStackProvider>\n            </DrawerStackProvider>\n          </StyleSheetManager>\n        </StyledComponentThemeProvider>\n      </FloatingDelayGroup>\n    </ThemeContext.Provider>\n  );\n};\n\nexport { BladeProvider };\n"],"names":["tooltipDelays","open","close","BladeProvider","_ref","themeTokens","initialColorScheme","colorScheme","children","_useBladeProvider","useBladeProvider","theme","themeContextValue","_jsx","ThemeContext","Provider","value","FloatingDelayGroup","delay","StyledComponentThemeProvider","StyleSheetManager","stylisPlugins","stylisCSSHigherSpecificity","DrawerStackProvider","BottomSheetStackProvider"],"mappings":";;;;;;;;;AAaA,IAAMA,aAAa,GAAG;AAAEC,EAAAA,IAAI,EAAE,GAAG;AAAEC,EAAAA,KAAK,EAAE,GAAA;AAAI,CAAC,CAAA;AAE/C,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAIqB;AAAA,EAAA,IAHtCC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IACEC,kBAAkB,GAAAF,IAAA,CAA/BG,WAAW;IACXC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAER,IAAAC,iBAAA,GAAqCC,gBAAgB,CAAC;AAAEJ,MAAAA,kBAAkB,EAAlBA,kBAAkB;AAAED,MAAAA,WAAW,EAAXA,WAAAA;AAAY,KAAC,CAAC;IAAlFM,KAAK,GAAAF,iBAAA,CAALE,KAAK;IAAEC,iBAAiB,GAAAH,iBAAA,CAAjBG,iBAAiB,CAAA;AAEhC,EAAA,oBACEC,GAAA,CAACC,YAAY,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,iBAAkB;IAAAJ,QAAA,eAC9CK,GAAA,CAACI,kBAAkB,EAAA;AAACC,MAAAA,KAAK,EAAElB,aAAc;MAAAQ,QAAA,eACvCK,GAAA,CAACM,aAA4B,EAAA;AAACR,QAAAA,KAAK,EAAEA,KAAM;QAAAH,QAAA,eACzCK,GAAA,CAACO,iBAAiB,EAAA;AAACC,UAAAA,aAAa,EAAE,CAACC,sCAA0B,EAAE,CAAE;UAAAd,QAAA,eAM/DK,GAAA,CAACU,mBAAmB,EAAA;YAAAf,QAAA,eAClBK,GAAA,CAACW,wBAAwB,EAAA;AAAAhB,cAAAA,QAAA,EAAEA,QAAAA;aAAmC,CAAA;WAC3C,CAAA;SACJ,CAAA;OACS,CAAA;KACZ,CAAA;AAAC,GACA,CAAC,CAAA;AAE5B;;;;"}

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

@@ -26,6 +26,7 @@ import '../../utils/makeSize/index.js';
 import '../../utils/makeAccessible/index.js';
 import '../../tokens/global/index.js';
 import '../../utils/makeMotionTime/index.web.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { size } from '../../tokens/global/size.js';
@@ -81,7 +82,7 @@ var _BottomSheet = function _BottomSheet(_ref2) {
     _ref2$snapPoints = _ref2.snapPoints,
     snapPoints = _ref2$snapPoints === void 0 ? [0.35, 0.5, 0.85] : _ref2$snapPoints,
     _ref2$zIndex = _ref2.zIndex,
-    zIndex = _ref2$zIndex === void 0 ? 100 : _ref2$zIndex;
+    zIndex = _ref2$zIndex === void 0 ? componentZIndices.bottomSheet : _ref2$zIndex;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var dimensions = useWindowSize();