@razorpay/blade 10.23.5 → 11.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.native.js","sources":["../../../../../src/components/Tabs/Tabs.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */\n/* eslint-disable babel/new-cap */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React from 'react';\nimport { TabBar, TabView } from 'react-native-tab-view';\nimport { Dimensions } from 'react-native';\nimport type { TabsProps } from './types';\nimport { TabsContext } from './TabsContext';\nimport { StyledTabButton } from './TabItem.native';\nimport { textColor } from './tabTokens';\nimport { iconSizeMap, useTabsItemPropRestriction } from './utils';\nimport { TabIndicator } from './TabIndicator';\nimport { SafeSceneMap } from './SafeSceneMap.native';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { Text } from '~components/Typography';\nimport { Box } from '~components/Box';\nimport { useTheme } from '~components/BladeProvider';\nimport { useControllableState } from '~utils/useControllable';\nimport { Divider } from '~components/Divider';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst initialLayout = {\n  height: 0,\n  width: Dimensions.get('window').width,\n};\n\nconst getTabs = (node: React.ReactNode): React.ReactElement[] => {\n  const children = React.Children.toArray(node);\n  const tabList = children.find((child) => getComponentId(child) === 'TabList');\n  if (!tabList || !React.isValidElement(tabList)) {\n    throw new Error('TabList is required');\n  }\n\n  return tabList.props.children;\n};\n\nconst getTabPanels = (node: React.ReactNode): Record<string, () => React.ReactElement> => {\n  const children = React.Children.toArray(node) as React.ReactElement[];\n  return children\n    .filter((child) => getComponentId(child) === 'TabPanel')\n    .reduce((prev, curr) => {\n      return { ...prev, [curr.props.value]: () => curr.props.children };\n    }, {});\n};\n\nconst getRoutes = (tabs: React.ReactElement[]) => {\n  return tabs.map((TabComponent, index) => ({\n    index,\n    title: TabComponent.props.children,\n    key: TabComponent.props.value,\n    value: TabComponent.props.value,\n    leading: TabComponent.props.leading,\n    trailing: TabComponent.props.trailing,\n  }));\n};\n\ntype Route = {\n  value?: string;\n  index?: number;\n};\n\nconst getRouteIndexFromValue = ({ value, routes }: { value?: string; routes: Route[] }) =>\n  routes.findIndex((route) => route.value === value);\n\nconst getRouteValueFromIndex = ({ index, routes }: { index?: number; routes: Route[] }) =>\n  routes.find((route) => route.index === index)?.value!;\n\nconst Tabs = ({\n  children,\n  defaultValue,\n  value,\n  onChange,\n  size = 'medium',\n  variant = 'bordered',\n  isFullWidthTabItem = false,\n  isLazy = false,\n}: TabsProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const tabs = getTabs(children);\n  const panels = getTabPanels(children);\n  const routes = getRoutes(tabs);\n  const isFilled = variant === 'filled';\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange: (value) => {\n      onChange?.(value);\n    },\n  });\n\n  const routeIndex = getRouteIndexFromValue({\n    value: selectedValue,\n    routes,\n  });\n\n  const setIndex = React.useCallback(\n    (index: number, skipUpdate = false) => {\n      const value = getRouteValueFromIndex({ index, routes });\n      // If skipUpdate is true, useControlledState will not call the onChange callback\n      // This is useful when we want to set the initial value\n      setSelectedValue(() => value, skipUpdate);\n    },\n    [routes, setSelectedValue],\n  );\n\n  // In mobile we can't have vertical tabs because of the lack of screen space\n  // So we always set it to false\n  const isVertical = false;\n  const contextValue = {\n    baseId: '',\n    selectedValue,\n    isVertical,\n    size,\n    variant,\n    isFullWidthTabItem,\n  };\n\n  // Set initial value\n  React.useLayoutEffect(() => {\n    if (selectedValue) return;\n    setIndex(0, true);\n  }, [selectedValue, setIndex]);\n\n  const renderTabLabel = React.useCallback(\n    ({ route, focused }) => {\n      const { title, leading: Leading, trailing } = route;\n      const selectedState = focused ? 'selected' : 'unselected';\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const validatedTrailingComponent = useTabsItemPropRestriction(trailing, size);\n\n      return (\n        <StyledTabButton\n          size={size}\n          variant={variant}\n          isFullWidthTabItem={!isFullWidthTabItem && !isFilled}\n          {...metaAttribute({ name: MetaConstants.TabItem })}\n        >\n          <Box display=\"flex\" alignItems=\"center\" flexDirection=\"row\" gap=\"spacing.3\">\n            {Leading ? (\n              <Leading\n                size={iconSizeMap[size]}\n                color={\n                  selectedState === 'selected'\n                    ? 'brand.primary.500'\n                    : 'surface.action.icon.default.lowContrast'\n                }\n              />\n            ) : null}\n            <Text\n              color={textColor[selectedState].default}\n              size={size === 'medium' ? 'medium' : 'large'}\n              weight=\"bold\"\n            >\n              {title}\n            </Text>\n            {validatedTrailingComponent}\n          </Box>\n        </StyledTabButton>\n      );\n    },\n    [isFullWidthTabItem, isFilled, size, variant],\n  );\n\n  const renderTabBar = React.useCallback(\n    (props) => (\n      <TabBar\n        {...props}\n        {...metaAttribute({ name: MetaConstants.TabList })}\n        gap={0}\n        android_ripple={{ borderless: true, color: 'transparent' }}\n        scrollEnabled={!isFullWidthTabItem && !isFilled}\n        tabStyle={{\n          padding: 0,\n          margin: 0,\n          minHeight: 0,\n        }}\n        style={{\n          ...(isFilled\n            ? {\n                shadowOpacity: 0,\n                shadowColor: 'transparent',\n                borderRadius: theme.border.radius.small,\n                borderWidth: theme.border.width.thick,\n                borderColor: theme.colors.surface.border.normal.lowContrast,\n                backgroundColor: theme.colors.surface.background.level2.lowContrast,\n                padding: theme.spacing[2],\n              }\n            : {\n                shadowOpacity: 0,\n                shadowColor: 'transparent',\n                backgroundColor: 'transparent',\n                ...(variant !== 'borderless' && {\n                  borderBottomColor: theme.colors.surface.border.normal.lowContrast,\n                  borderBottomWidth: theme.border.width.thin,\n                }),\n              }),\n        }}\n        renderIndicator={TabIndicator}\n        renderLabel={renderTabLabel}\n        // This is a bit hacky, but this is the only way to put a divider between tabs\n        // Since there is no way to use tablist.map() to render the tabs\n        renderBadge={() => {\n          if (!isFilled) return null;\n          if (routeIndex === 0) {\n            return null;\n          }\n          return (\n            <Divider\n              left=\"1px\"\n              height=\"20px\"\n              variant=\"normal\"\n              orientation=\"vertical\"\n              // again, hacky but no way to get exact height of the tabbar\n              // Since we already know the height of large,medium size tabs, I just hardcode it here.\n              top={size === 'large' ? '6px' : '4px'}\n            />\n          );\n        }}\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isFullWidthTabItem, isFilled, renderTabLabel],\n  );\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <TabView\n        navigationState={{\n          index: routeIndex,\n          routes,\n        }}\n        renderScene={SafeSceneMap(panels)}\n        renderTabBar={renderTabBar}\n        onIndexChange={(idx) => {\n          setIndex(idx);\n        }}\n        initialLayout={initialLayout}\n        lazy={isLazy}\n      />\n    </TabsContext.Provider>\n  );\n};\n\nexport { Tabs };\n"],"names":["initialLayout","height","width","Dimensions","get","getTabs","node","children","React","Children","toArray","tabList","find","child","getComponentId","isValidElement","Error","props","getTabPanels","filter","reduce","prev","curr","Object","assign","_defineProperty","value","getRoutes","tabs","map","TabComponent","index","title","key","leading","trailing","getRouteIndexFromValue","_ref","routes","findIndex","route","getRouteValueFromIndex","_ref2","_routes$find","Tabs","_ref3","defaultValue","onChange","_ref3$size","size","_ref3$variant","variant","_ref3$isFullWidthTabI","isFullWidthTabItem","_ref3$isLazy","isLazy","_useTheme","useTheme","theme","panels","isFilled","_useControllableState","useControllableState","_useControllableState2","_slicedToArray","selectedValue","setSelectedValue","routeIndex","setIndex","useCallback","skipUpdate","arguments","length","undefined","isVertical","contextValue","baseId","useLayoutEffect","renderTabLabel","_ref4","focused","Leading","selectedState","validatedTrailingComponent","useTabsItemPropRestriction","_jsx","StyledTabButton","metaAttribute","name","MetaConstants","TabItem","_jsxs","Box","display","alignItems","flexDirection","gap","iconSizeMap","color","Text","textColor","default","weight","renderTabBar","TabBar","TabList","android_ripple","borderless","scrollEnabled","tabStyle","padding","margin","minHeight","style","shadowOpacity","shadowColor","borderRadius","border","radius","small","borderWidth","thick","borderColor","colors","surface","normal","lowContrast","backgroundColor","background","level2","spacing","borderBottomColor","borderBottomWidth","thin","renderIndicator","TabIndicator","renderLabel","renderBadge","Divider","left","orientation","top","TabsContext","Provider","TabView","navigationState","renderScene","SafeSceneMap","onIndexChange","idx","lazy"],"mappings":"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"}
+{"version":3,"file":"Tabs.native.js","sources":["../../../../../src/components/Tabs/Tabs.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */\n/* eslint-disable babel/new-cap */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React from 'react';\nimport { TabBar, TabView } from 'react-native-tab-view';\nimport { Dimensions } from 'react-native';\nimport type { TabsProps } from './types';\nimport { TabsContext } from './TabsContext';\nimport { StyledTabButton } from './TabItem.native';\nimport { iconColor, textColor, trackColor } from './tabTokens';\nimport { iconSizeMap, useTabsItemPropRestriction } from './utils';\nimport { TabIndicator } from './TabIndicator';\nimport { SafeSceneMap } from './SafeSceneMap.native';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { Text } from '~components/Typography';\nimport { Box } from '~components/Box';\nimport { useTheme } from '~components/BladeProvider';\nimport { useControllableState } from '~utils/useControllable';\nimport { Divider } from '~components/Divider';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst initialLayout = {\n  height: 0,\n  width: Dimensions.get('window').width,\n};\n\nconst getTabs = (node: React.ReactNode): React.ReactElement[] => {\n  const children = React.Children.toArray(node);\n  const tabList = children.find((child) => getComponentId(child) === 'TabList');\n  if (!tabList || !React.isValidElement(tabList)) {\n    throw new Error('TabList is required');\n  }\n\n  return tabList.props.children;\n};\n\nconst getTabPanels = (node: React.ReactNode): Record<string, () => React.ReactElement> => {\n  const children = React.Children.toArray(node) as React.ReactElement[];\n  return children\n    .filter((child) => getComponentId(child) === 'TabPanel')\n    .reduce((prev, curr) => {\n      return { ...prev, [curr.props.value]: () => curr.props.children };\n    }, {});\n};\n\nconst getRoutes = (tabs: React.ReactElement[]) => {\n  return tabs.map((TabComponent, index) => ({\n    index,\n    title: TabComponent.props.children,\n    key: TabComponent.props.value,\n    value: TabComponent.props.value,\n    leading: TabComponent.props.leading,\n    trailing: TabComponent.props.trailing,\n  }));\n};\n\ntype Route = {\n  value?: string;\n  index?: number;\n};\n\nconst getRouteIndexFromValue = ({ value, routes }: { value?: string; routes: Route[] }) =>\n  routes.findIndex((route) => route.value === value);\n\nconst getRouteValueFromIndex = ({ index, routes }: { index?: number; routes: Route[] }) =>\n  routes.find((route) => route.index === index)?.value!;\n\nconst Tabs = ({\n  children,\n  defaultValue,\n  value,\n  onChange,\n  size = 'medium',\n  variant = 'bordered',\n  isFullWidthTabItem = false,\n  isLazy = false,\n}: TabsProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const tabs = getTabs(children);\n  const panels = getTabPanels(children);\n  const routes = getRoutes(tabs);\n  const isFilled = variant === 'filled';\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange: (value) => {\n      onChange?.(value);\n    },\n  });\n\n  const routeIndex = getRouteIndexFromValue({\n    value: selectedValue,\n    routes,\n  });\n\n  const setIndex = React.useCallback(\n    (index: number, skipUpdate = false) => {\n      const value = getRouteValueFromIndex({ index, routes });\n      // If skipUpdate is true, useControlledState will not call the onChange callback\n      // This is useful when we want to set the initial value\n      setSelectedValue(() => value, skipUpdate);\n    },\n    [routes, setSelectedValue],\n  );\n\n  // In mobile we can't have vertical tabs because of the lack of screen space\n  // So we always set it to false\n  const isVertical = false;\n  const contextValue = {\n    baseId: '',\n    selectedValue,\n    isVertical,\n    size,\n    variant,\n    isFullWidthTabItem,\n  };\n\n  // Set initial value\n  React.useLayoutEffect(() => {\n    if (selectedValue) return;\n    setIndex(0, true);\n  }, [selectedValue, setIndex]);\n\n  const renderTabLabel = React.useCallback(\n    ({ route, focused }) => {\n      const { title, leading: Leading, trailing } = route;\n      const selectedState = focused ? 'selected' : 'unselected';\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const validatedTrailingComponent = useTabsItemPropRestriction(trailing, size);\n\n      return (\n        <StyledTabButton\n          size={size}\n          variant={variant}\n          isFullWidthTabItem={!isFullWidthTabItem && !isFilled}\n          {...metaAttribute({ name: MetaConstants.TabItem })}\n        >\n          <Box display=\"flex\" alignItems=\"center\" flexDirection=\"row\" gap=\"spacing.3\">\n            {Leading ? (\n              <Leading size={iconSizeMap[size]} color={iconColor[selectedState].default} />\n            ) : null}\n            <Text\n              color={textColor[selectedState].default}\n              size={size === 'medium' ? 'medium' : 'large'}\n              weight=\"semibold\"\n            >\n              {title}\n            </Text>\n            {validatedTrailingComponent}\n          </Box>\n        </StyledTabButton>\n      );\n    },\n    [isFullWidthTabItem, isFilled, size, variant],\n  );\n\n  const renderTabBar = React.useCallback(\n    (props) => (\n      <TabBar\n        {...props}\n        {...metaAttribute({ name: MetaConstants.TabList })}\n        gap={0}\n        android_ripple={{ borderless: true, color: 'transparent' }}\n        scrollEnabled={!isFullWidthTabItem && !isFilled}\n        tabStyle={{\n          padding: 0,\n          margin: 0,\n          minHeight: 0,\n        }}\n        style={{\n          ...(isFilled\n            ? {\n                shadowOpacity: 0,\n                shadowColor: 'transparent',\n                borderRadius: theme.border.radius.small,\n                borderWidth: theme.border.width.thick,\n                borderColor: theme.colors.interactive.border.gray.faded,\n                backgroundColor: theme.colors.surface.background.gray.intense,\n                padding: theme.spacing[2],\n              }\n            : {\n                shadowOpacity: 0,\n                shadowColor: 'transparent',\n                backgroundColor: 'transparent',\n                ...(variant !== 'borderless' && {\n                  borderBottomColor: getIn(theme.colors, trackColor),\n                  borderBottomWidth: theme.border.width.thin,\n                }),\n              }),\n        }}\n        renderIndicator={TabIndicator}\n        renderLabel={renderTabLabel}\n        // This is a bit hacky, but this is the only way to put a divider between tabs\n        // Since there is no way to use tablist.map() to render the tabs\n        renderBadge={() => {\n          if (!isFilled) return null;\n          if (routeIndex === 0) {\n            return null;\n          }\n          return (\n            <Divider\n              left=\"1px\"\n              height=\"20px\"\n              variant=\"normal\"\n              orientation=\"vertical\"\n              // again, hacky but no way to get exact height of the tabbar\n              // Since we already know the height of large,medium size tabs, I just hardcode it here.\n              top={size === 'large' ? '6px' : '4px'}\n            />\n          );\n        }}\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isFullWidthTabItem, isFilled, renderTabLabel],\n  );\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <TabView\n        navigationState={{\n          index: routeIndex,\n          routes,\n        }}\n        renderScene={SafeSceneMap(panels)}\n        renderTabBar={renderTabBar}\n        onIndexChange={(idx) => {\n          setIndex(idx);\n        }}\n        initialLayout={initialLayout}\n        lazy={isLazy}\n      />\n    </TabsContext.Provider>\n  );\n};\n\nexport { Tabs };\n"],"names":["initialLayout","height","width","Dimensions","get","getTabs","node","children","React","Children","toArray","tabList","find","child","getComponentId","isValidElement","Error","props","getTabPanels","filter","reduce","prev","curr","Object","assign","_defineProperty","value","getRoutes","tabs","map","TabComponent","index","title","key","leading","trailing","getRouteIndexFromValue","_ref","routes","findIndex","route","getRouteValueFromIndex","_ref2","_routes$find","Tabs","_ref3","defaultValue","onChange","_ref3$size","size","_ref3$variant","variant","_ref3$isFullWidthTabI","isFullWidthTabItem","_ref3$isLazy","isLazy","_useTheme","useTheme","theme","panels","isFilled","_useControllableState","useControllableState","_useControllableState2","_slicedToArray","selectedValue","setSelectedValue","routeIndex","setIndex","useCallback","skipUpdate","arguments","length","undefined","isVertical","contextValue","baseId","useLayoutEffect","renderTabLabel","_ref4","focused","Leading","selectedState","validatedTrailingComponent","useTabsItemPropRestriction","_jsx","StyledTabButton","metaAttribute","name","MetaConstants","TabItem","_jsxs","Box","display","alignItems","flexDirection","gap","iconSizeMap","color","iconColor","default","Text","textColor","weight","renderTabBar","TabBar","TabList","android_ripple","borderless","scrollEnabled","tabStyle","padding","margin","minHeight","style","shadowOpacity","shadowColor","borderRadius","border","radius","small","borderWidth","thick","borderColor","colors","interactive","gray","faded","backgroundColor","surface","background","intense","spacing","borderBottomColor","getIn","trackColor","borderBottomWidth","thin","renderIndicator","TabIndicator","renderLabel","renderBadge","Divider","left","orientation","top","TabsContext","Provider","TabView","navigationState","renderScene","SafeSceneMap","onIndexChange","idx","lazy"],"mappings":"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"}

package/build/lib/native/components/Tabs/tabTokens.js

@@ -1,4 +1,4 @@
-var paddingY={bordered:{horizontal:{desktop:{medium:'spacing.5',large:'spacing.4'},mobile:{medium:'spacing.3',large:'spacing.3'}},vertical:{desktop:{medium:'spacing.2',large:'spacing.2'},mobile:{medium:'spacing.2',large:'spacing.2'}}},filled:{horizontal:{desktop:{medium:'spacing.3',large:'spacing.3'},mobile:{medium:'spacing.2',large:'spacing.2'}},vertical:{desktop:{medium:'spacing.4',large:'spacing.4'},mobile:{medium:'spacing.3',large:'spacing.3'}}}};var paddingX={bordered:{horizontal:{desktop:{medium:'spacing.0',large:'spacing.0'},mobile:{medium:'spacing.0',large:'spacing.0'}},vertical:{desktop:{medium:'spacing.4',large:'spacing.4'},mobile:{medium:'spacing.4',large:'spacing.4'}}},filled:{horizontal:{desktop:{medium:'spacing.3',large:'spacing.3'},mobile:{medium:'spacing.2',large:'spacing.2'}},vertical:{desktop:{medium:'spacing.4',large:'spacing.4'},mobile:{medium:'spacing.3',large:'spacing.3'}}}};var textColor={selected:{default:'brand.primary.500',hover:'brand.primary.600',focus:'brand.primary.600',active:'brand.primary.600',disabled:'surface.text.placeholder.lowContrast'},unselected:{default:'surface.text.muted.lowContrast',hover:'surface.text.subdued.lowContrast',focus:'surface.text.subdued.lowContrast',active:'surface.text.subdued.lowContrast',disabled:'surface.text.placeholder.lowContrast'}};
+var paddingY={bordered:{horizontal:{desktop:{medium:'spacing.5',large:'spacing.4'},mobile:{medium:'spacing.3',large:'spacing.3'}},vertical:{desktop:{medium:'spacing.2',large:'spacing.2'},mobile:{medium:'spacing.2',large:'spacing.2'}}},filled:{horizontal:{desktop:{medium:'spacing.3',large:'spacing.3'},mobile:{medium:'spacing.2',large:'spacing.2'}},vertical:{desktop:{medium:'spacing.4',large:'spacing.4'},mobile:{medium:'spacing.3',large:'spacing.3'}}}};var paddingX={bordered:{horizontal:{desktop:{medium:'spacing.0',large:'spacing.0'},mobile:{medium:'spacing.0',large:'spacing.0'}},vertical:{desktop:{medium:'spacing.4',large:'spacing.4'},mobile:{medium:'spacing.4',large:'spacing.4'}}},filled:{horizontal:{desktop:{medium:'spacing.3',large:'spacing.3'},mobile:{medium:'spacing.2',large:'spacing.2'}},vertical:{desktop:{medium:'spacing.4',large:'spacing.4'},mobile:{medium:'spacing.3',large:'spacing.3'}}}};var trackColor='surface.border.gray.muted';var textColor={selected:{default:'interactive.text.primary.subtle',highlighted:'interactive.text.primary.normal',disabled:'interactive.text.primary.normal'},unselected:{default:'interactive.text.gray.muted',highlighted:'interactive.text.gray.subtle',disabled:'interactive.text.gray.disabled'}};var iconColor={unselected:{default:'interactive.icon.gray.muted',highlighted:'interactive.icon.gray.subtle',disabled:'interactive.icon.gray.disabled'},selected:{default:'interactive.icon.primary.subtle',highlighted:'interactive.icon.primary.normal',disabled:'interactive.icon.primary.disabled'}};
 
-export { paddingX, paddingY, textColor };
+export { iconColor, paddingX, paddingY, textColor, trackColor };
 //# sourceMappingURL=tabTokens.js.map

package/build/lib/native/components/Tabs/tabTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabTokens.js","sources":["../../../../../src/components/Tabs/tabTokens.ts"],"sourcesContent":["import type { TabsProps } from './types';\nimport type { DotNotationSpacingStringToken } from '~utils/types';\nimport type { DeviceType } from '~utils';\n\ntype TabSizes = NonNullable<TabsProps['size']>;\ntype TabVariants = Exclude<NonNullable<TabsProps['variant']>, 'borderless'>;\ntype TabOrientation = 'horizontal' | 'vertical';\n\ntype TabItemPadding = Record<\n  TabVariants,\n  Record<TabOrientation, Record<DeviceType, Record<TabSizes, DotNotationSpacingStringToken>>>\n>;\n\nconst paddingY: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.5',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n  },\n  filled: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n  },\n};\n\nconst paddingX: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.0',\n        large: 'spacing.0',\n      },\n      mobile: {\n        medium: 'spacing.0',\n        large: 'spacing.0',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n    },\n  },\n  filled: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n  },\n};\n\nconst textColor = {\n  selected: {\n    default: 'brand.primary.500',\n    hover: 'brand.primary.600',\n    focus: 'brand.primary.600',\n    active: 'brand.primary.600',\n    disabled: 'surface.text.placeholder.lowContrast',\n  },\n  unselected: {\n    default: 'surface.text.muted.lowContrast',\n    hover: 'surface.text.subdued.lowContrast',\n    focus: 'surface.text.subdued.lowContrast',\n    active: 'surface.text.subdued.lowContrast',\n    disabled: 'surface.text.placeholder.lowContrast',\n  },\n} as const;\n\nconst backgroundColor = {\n  unselected: {\n    bordered: {\n      default: 'transparent',\n      hover: 'transparent',\n      focus: 'transparent',\n      active: 'transparent',\n      disabled: 'transparent',\n    },\n    borderless: {\n      default: 'transparent',\n      hover: 'transparent',\n      focus: 'transparent',\n      active: 'transparent',\n      disabled: 'transparent',\n    },\n    filled: {\n      default: 'transparent',\n      hover: 'colors.brand.gray.a50.lowContrast',\n      focus: 'colors.brand.gray.a50.lowContrast',\n      active: 'colors.brand.gray.a50.lowContrast',\n      disabled: 'transparent',\n    },\n  },\n  selected: {\n    bordered: {\n      default: 'transparent',\n      hover: 'transparent',\n      focus: 'transparent',\n      active: 'transparent',\n      disabled: 'transparent',\n    },\n    borderless: {\n      default: 'transparent',\n      hover: 'transparent',\n      focus: 'transparent',\n      active: 'transparent',\n      disabled: 'transparent',\n    },\n    filled: {\n      default: 'colors.brand.primary.300',\n      hover: 'colors.brand.primary.400',\n      focus: 'colors.brand.primary.400',\n      active: 'colors.brand.primary.400',\n      disabled: 'transparent',\n    },\n  },\n} as const;\n\nexport { backgroundColor, textColor, paddingY, paddingX };\n"],"names":["paddingY","bordered","horizontal","desktop","medium","large","mobile","vertical","filled","paddingX","textColor","selected","default","hover","focus","active","disabled","unselected"],"mappings":"AAaM,IAAAA,QAAwB,CAAG,CAC/BC,QAAQ,CAAE,CACRC,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CACF,CAAC,CACDG,MAAM,CAAE,CACNN,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CACF,CACF,EAEM,IAAAI,QAAwB,CAAG,CAC/BR,QAAQ,CAAE,CACRC,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CACF,CAAC,CACDG,MAAM,CAAE,CACNN,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CACF,CACF,EAEM,IAAAK,SAAS,CAAG,CAChBC,QAAQ,CAAE,CACRC,OAAO,CAAE,mBAAmB,CAC5BC,KAAK,CAAE,mBAAmB,CAC1BC,KAAK,CAAE,mBAAmB,CAC1BC,MAAM,CAAE,mBAAmB,CAC3BC,QAAQ,CAAE,sCACZ,CAAC,CACDC,UAAU,CAAE,CACVL,OAAO,CAAE,gCAAgC,CACzCC,KAAK,CAAE,kCAAkC,CACzCC,KAAK,CAAE,kCAAkC,CACzCC,MAAM,CAAE,kCAAkC,CAC1CC,QAAQ,CAAE,sCACZ,CACF;;;;"}
+{"version":3,"file":"tabTokens.js","sources":["../../../../../src/components/Tabs/tabTokens.ts"],"sourcesContent":["import type { TabsProps } from './types';\nimport type { DotNotationSpacingStringToken } from '~utils/types';\nimport type { DeviceType } from '~utils';\n\ntype TabSizes = NonNullable<TabsProps['size']>;\ntype TabVariants = Exclude<NonNullable<TabsProps['variant']>, 'borderless'>;\ntype TabOrientation = 'horizontal' | 'vertical';\n\ntype TabItemPadding = Record<\n  TabVariants,\n  Record<TabOrientation, Record<DeviceType, Record<TabSizes, DotNotationSpacingStringToken>>>\n>;\n\nconst paddingY: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.5',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n  },\n  filled: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n  },\n};\n\nconst paddingX: TabItemPadding = {\n  bordered: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.0',\n        large: 'spacing.0',\n      },\n      mobile: {\n        medium: 'spacing.0',\n        large: 'spacing.0',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n    },\n  },\n  filled: {\n    horizontal: {\n      desktop: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n      mobile: {\n        medium: 'spacing.2',\n        large: 'spacing.2',\n      },\n    },\n    vertical: {\n      desktop: {\n        medium: 'spacing.4',\n        large: 'spacing.4',\n      },\n      mobile: {\n        medium: 'spacing.3',\n        large: 'spacing.3',\n      },\n    },\n  },\n};\n\nconst trackColor = 'surface.border.gray.muted';\nconst textColor = {\n  selected: {\n    default: 'interactive.text.primary.subtle',\n    highlighted: 'interactive.text.primary.normal',\n    disabled: 'interactive.text.primary.normal',\n  },\n  unselected: {\n    default: 'interactive.text.gray.muted',\n    highlighted: 'interactive.text.gray.subtle',\n    disabled: 'interactive.text.gray.disabled',\n  },\n} as const;\n\nconst backgroundColor = {\n  unselected: {\n    bordered: {\n      default: 'colors.transparent',\n      highlighted: 'colors.transparent',\n      disabled: 'colors.transparent',\n    },\n    borderless: {\n      default: 'colors.transparent',\n      highlighted: 'colors.transparent',\n      disabled: 'colors.transparent',\n    },\n    filled: {\n      default: 'colors.transparent',\n      highlighted: 'colors.interactive.background.gray.default',\n      disabled: 'colors.transparent',\n    },\n  },\n  selected: {\n    bordered: {\n      default: 'colors.transparent',\n      highlighted: 'colors.transparent',\n      disabled: 'colors.transparent',\n    },\n    borderless: {\n      default: 'colors.transparent',\n      highlighted: 'colors.transparent',\n      disabled: 'colors.transparent',\n    },\n    filled: {\n      default: 'colors.interactive.background.primary.faded',\n      highlighted: 'colors.interactive.background.primary.faded',\n      disabled: 'colors.transparent',\n    },\n  },\n} as const;\n\nconst iconColor = {\n  unselected: {\n    default: 'interactive.icon.gray.muted',\n    highlighted: 'interactive.icon.gray.subtle',\n    disabled: 'interactive.icon.gray.disabled',\n  },\n  selected: {\n    default: 'interactive.icon.primary.subtle',\n    highlighted: 'interactive.icon.primary.normal',\n    disabled: 'interactive.icon.primary.disabled',\n  },\n} as const;\n\nexport { backgroundColor, textColor, iconColor, trackColor, paddingY, paddingX };\n"],"names":["paddingY","bordered","horizontal","desktop","medium","large","mobile","vertical","filled","paddingX","trackColor","textColor","selected","default","highlighted","disabled","unselected","iconColor"],"mappings":"AAaM,IAAAA,QAAwB,CAAG,CAC/BC,QAAQ,CAAE,CACRC,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CACF,CAAC,CACDG,MAAM,CAAE,CACNN,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CACF,CACF,EAEM,IAAAI,QAAwB,CAAG,CAC/BR,QAAQ,CAAE,CACRC,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CACF,CAAC,CACDG,MAAM,CAAE,CACNN,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,OAAO,CAAE,CACPC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,CACF,CACF,CACF,EAEM,IAAAK,UAAU,CAAG,4BACb,IAAAC,SAAS,CAAG,CAChBC,QAAQ,CAAE,CACRC,OAAO,CAAE,iCAAiC,CAC1CC,WAAW,CAAE,iCAAiC,CAC9CC,QAAQ,CAAE,iCACZ,CAAC,CACDC,UAAU,CAAE,CACVH,OAAO,CAAE,6BAA6B,CACtCC,WAAW,CAAE,8BAA8B,CAC3CC,QAAQ,CAAE,gCACZ,CACF,EAuCM,IAAAE,SAAS,CAAG,CAChBD,UAAU,CAAE,CACVH,OAAO,CAAE,6BAA6B,CACtCC,WAAW,CAAE,8BAA8B,CAC3CC,QAAQ,CAAE,gCACZ,CAAC,CACDH,QAAQ,CAAE,CACRC,OAAO,CAAE,iCAAiC,CAC1CC,WAAW,CAAE,iCAAiC,CAC9CC,QAAQ,CAAE,mCACZ,CACF;;;;"}

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.level1.lowContrast}`,boxShadow:`0px 0px 0px 4px ${props.theme.colors.brand.primary[400]}`};}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?'surface.text.placeholder.lowContrast':'surface.text.subtle.lowContrast';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:"brand.gray.a100.lowContrast",borderRadius:"max",padding:size$1==='medium'?mediumPadding:largePadding,_isVirtuallyFocused:_isVirtuallyFocused,children:[Icon?jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",children:jsx(Icon,{color:textColor,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",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.level1.lowContrast\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.brand.primary[400]}`,\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\n    ? 'surface.text.placeholder.lowContrast'\n    : 'surface.text.subtle.lowContrast';\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=\"brand.gray.a100.lowContrast\"\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={textColor} 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","level1","lowContrast","boxShadow","brand","primary","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","Object","assign","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","backgroundColor","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        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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"}

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

@@ -17,7 +17,7 @@ import { mergeProps } from '../../utils/mergeProps.js';
 import { PopupArrow } from '../PopupArrow/PopupArrow.native.js';
 import { getFloatingPlacementParts } from '../../utils/getFloatingPlacementParts.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.brand.gray[200].highContrast,strokeColor:theme.colors.brand.gray[300].highContrast}),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?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})}))})]});};
 
 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.brand.gray[200].highContrast}\n                strokeColor={theme.colors.brand.gray[300].highContrast}\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","brand","gray","highContrast","strokeColor"],"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, 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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"}

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

@@ -14,7 +14,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
 
-var TooltipContent=React__default.forwardRef(function(_ref,ref){var children=_ref.children,title=_ref.title,arrow=_ref.arrow,side=_ref.side,style=_ref.style,isVisible=_ref.isVisible;return jsxs(TooltipContentWrapper,{position:isReactNative()?'absolute':'relative',paddingTop:"spacing.3",paddingBottom:"spacing.3",paddingLeft:"spacing.4",paddingRight:"spacing.4",maxWidth:makeSize(size[200]),ref:ref,styles:style,side:side,isVisible:isVisible,children:[title?jsx(Text,{contrast:"high",weight:"bold",size:"medium",children:title}):null,jsx(Text,{variant:"body",size:"small",weight:"regular",contrast:"high",color:"feedback.text.neutral.highContrast",wordBreak:"break-word",children:children}),arrow]});});
+var TooltipContent=React__default.forwardRef(function(_ref,ref){var children=_ref.children,title=_ref.title,arrow=_ref.arrow,side=_ref.side,style=_ref.style,isVisible=_ref.isVisible;return jsxs(TooltipContentWrapper,{position:isReactNative()?'absolute':'relative',paddingTop:"spacing.3",paddingBottom:"spacing.3",paddingLeft:"spacing.4",paddingRight:"spacing.4",maxWidth:makeSize(size[200]),ref:ref,styles:style,side:side,isVisible:isVisible,children:[title?jsx(Text,{weight:"semibold",size:"medium",color:"surface.text.staticWhite.normal",children:title}):null,jsx(Text,{variant:"body",size:"small",weight:"regular",color:"surface.text.staticWhite.subtle",wordBreak:"break-word",children:children}),arrow]});});
 
 export { TooltipContent };
 //# sourceMappingURL=TooltipContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.js","sources":["../../../../../src/components/Tooltip/TooltipContent.tsx"],"sourcesContent":["import React from 'react';\nimport { TooltipContentWrapper } from './TooltipContentWrapper';\nimport type { TooltipContentProps } from './types';\nimport { Text } from '~components/Typography';\nimport { isReactNative, makeSize } from '~utils';\nimport { size } from '~tokens/global';\n\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n  ({ children, title, arrow, side, style, isVisible }, ref) => {\n    return (\n      <TooltipContentWrapper\n        position={isReactNative() ? 'absolute' : 'relative'}\n        paddingTop=\"spacing.3\"\n        paddingBottom=\"spacing.3\"\n        paddingLeft=\"spacing.4\"\n        paddingRight=\"spacing.4\"\n        maxWidth={makeSize(size[200])}\n        ref={ref as never}\n        styles={style}\n        side={side}\n        isVisible={isVisible}\n      >\n        {title ? (\n          <Text contrast=\"high\" weight=\"bold\" size=\"medium\">\n            {title}\n          </Text>\n        ) : null}\n        <Text\n          variant=\"body\"\n          size=\"small\"\n          weight=\"regular\"\n          contrast=\"high\"\n          color=\"feedback.text.neutral.highContrast\"\n          wordBreak=\"break-word\"\n        >\n          {children}\n        </Text>\n        {arrow}\n      </TooltipContentWrapper>\n    );\n  },\n);\n\nexport { TooltipContent };\n"],"names":["TooltipContent","React","forwardRef","_ref","ref","children","title","arrow","side","style","isVisible","_jsxs","TooltipContentWrapper","position","isReactNative","paddingTop","paddingBottom","paddingLeft","paddingRight","maxWidth","makeSize","size","styles","_jsx","Text","contrast","weight","variant","color","wordBreak"],"mappings":";;;;;;;;;;;;;;;;AAOM,IAAAA,cAAc,CAAGC,cAAK,CAACC,UAAU,CACrC,SAAAC,IAAA,CAAqDC,GAAG,CAAK,CAA1D,IAAAC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CAAEC,KAAK,CAAAH,IAAA,CAALG,KAAK,CAAEC,KAAK,CAAAJ,IAAA,CAALI,KAAK,CAAEC,IAAI,CAAAL,IAAA,CAAJK,IAAI,CAAEC,KAAK,CAAAN,IAAA,CAALM,KAAK,CAAEC,SAAS,CAAAP,IAAA,CAATO,SAAS,CAC/C,OACEC,IAAA,CAACC,qBAAqB,CAAA,CACpBC,QAAQ,CAAEC,aAAa,EAAE,CAAG,UAAU,CAAG,UAAW,CACpDC,UAAU,CAAC,WAAW,CACtBC,aAAa,CAAC,WAAW,CACzBC,WAAW,CAAC,WAAW,CACvBC,YAAY,CAAC,WAAW,CACxBC,QAAQ,CAAEC,QAAQ,CAACC,IAAI,CAAC,GAAG,CAAC,CAAE,CAC9BjB,GAAG,CAAEA,GAAa,CAClBkB,MAAM,CAAEb,KAAM,CACdD,IAAI,CAAEA,IAAK,CACXE,SAAS,CAAEA,SAAU,CAAAL,QAAA,CAEpBC,CAAAA,KAAK,CACJiB,GAAA,CAACC,IAAI,CAAA,CAACC,QAAQ,CAAC,MAAM,CAACC,MAAM,CAAC,MAAM,CAACL,IAAI,CAAC,QAAQ,CAAAhB,QAAA,CAC9CC,KAAK,CACF,CAAC,CACL,IAAI,CACRiB,GAAA,CAACC,IAAI,CAAA,CACHG,OAAO,CAAC,MAAM,CACdN,IAAI,CAAC,OAAO,CACZK,MAAM,CAAC,SAAS,CAChBD,QAAQ,CAAC,MAAM,CACfG,KAAK,CAAC,oCAAoC,CAC1CC,SAAS,CAAC,YAAY,CAAAxB,QAAA,CAErBA,QAAQ,CACL,CAAC,CACNE,KAAK,CACe,CAAA,CAAC,CAE5B,CACF;;;;"}
+{"version":3,"file":"TooltipContent.js","sources":["../../../../../src/components/Tooltip/TooltipContent.tsx"],"sourcesContent":["import React from 'react';\nimport { TooltipContentWrapper } from './TooltipContentWrapper';\nimport type { TooltipContentProps } from './types';\nimport { Text } from '~components/Typography';\nimport { isReactNative, makeSize } from '~utils';\nimport { size } from '~tokens/global';\n\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n  ({ children, title, arrow, side, style, isVisible }, ref) => {\n    return (\n      <TooltipContentWrapper\n        position={isReactNative() ? 'absolute' : 'relative'}\n        paddingTop=\"spacing.3\"\n        paddingBottom=\"spacing.3\"\n        paddingLeft=\"spacing.4\"\n        paddingRight=\"spacing.4\"\n        maxWidth={makeSize(size[200])}\n        ref={ref as never}\n        styles={style}\n        side={side}\n        isVisible={isVisible}\n      >\n        {title ? (\n          <Text weight=\"semibold\" size=\"medium\" color=\"surface.text.staticWhite.normal\">\n            {title}\n          </Text>\n        ) : null}\n        <Text\n          variant=\"body\"\n          size=\"small\"\n          weight=\"regular\"\n          color=\"surface.text.staticWhite.subtle\"\n          wordBreak=\"break-word\"\n        >\n          {children}\n        </Text>\n        {arrow}\n      </TooltipContentWrapper>\n    );\n  },\n);\n\nexport { TooltipContent };\n"],"names":["TooltipContent","React","forwardRef","_ref","ref","children","title","arrow","side","style","isVisible","_jsxs","TooltipContentWrapper","position","isReactNative","paddingTop","paddingBottom","paddingLeft","paddingRight","maxWidth","makeSize","size","styles","_jsx","Text","weight","color","variant","wordBreak"],"mappings":";;;;;;;;;;;;;;;;AAOM,IAAAA,cAAc,CAAGC,cAAK,CAACC,UAAU,CACrC,SAAAC,IAAA,CAAqDC,GAAG,CAAK,CAAA,IAA1DC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CAAEC,KAAK,CAAAH,IAAA,CAALG,KAAK,CAAEC,KAAK,CAAAJ,IAAA,CAALI,KAAK,CAAEC,IAAI,CAAAL,IAAA,CAAJK,IAAI,CAAEC,KAAK,CAAAN,IAAA,CAALM,KAAK,CAAEC,SAAS,CAAAP,IAAA,CAATO,SAAS,CAC/C,OACEC,IAAA,CAACC,qBAAqB,CACpBC,CAAAA,QAAQ,CAAEC,aAAa,EAAE,CAAG,UAAU,CAAG,UAAW,CACpDC,UAAU,CAAC,WAAW,CACtBC,aAAa,CAAC,WAAW,CACzBC,WAAW,CAAC,WAAW,CACvBC,YAAY,CAAC,WAAW,CACxBC,QAAQ,CAAEC,QAAQ,CAACC,IAAI,CAAC,GAAG,CAAC,CAAE,CAC9BjB,GAAG,CAAEA,GAAa,CAClBkB,MAAM,CAAEb,KAAM,CACdD,IAAI,CAAEA,IAAK,CACXE,SAAS,CAAEA,SAAU,CAAAL,QAAA,CAEpBC,CAAAA,KAAK,CACJiB,GAAA,CAACC,IAAI,CAACC,CAAAA,MAAM,CAAC,UAAU,CAACJ,IAAI,CAAC,QAAQ,CAACK,KAAK,CAAC,iCAAiC,CAAArB,QAAA,CAC1EC,KAAK,CACF,CAAC,CACL,IAAI,CACRiB,GAAA,CAACC,IAAI,CAAA,CACHG,OAAO,CAAC,MAAM,CACdN,IAAI,CAAC,OAAO,CACZI,MAAM,CAAC,SAAS,CAChBC,KAAK,CAAC,iCAAiC,CACvCE,SAAS,CAAC,YAAY,CAAAvB,QAAA,CAErBA,QAAQ,CACL,CAAC,CACNE,KAAK,CACe,CAAA,CAAC,CAE5B,CACF;;;;"}

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

@@ -6,7 +6,7 @@ import { castWebType } from '../../utils/platform/castUtils.js';
 import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
 import '../BladeProvider/useTheme.js';
 
-var getTooltipContentWrapperStyles=function getTooltipContentWrapperStyles(_ref){var theme=_ref.theme,styles=_ref.styles;return Object.assign({backgroundColor:theme.colors.brand.gray[200].highContrast,borderWidth:makeBorderSize(theme.border.width.thin),borderRadius:makeBorderSize(theme.border.radius.medium),borderColor:theme.colors.brand.gray[300].highContrast,borderStyle:'solid',boxShadow:isReactNative()?undefined:castWebType(theme.elevation.lowRaised)},styles);};
+var getTooltipContentWrapperStyles=function getTooltipContentWrapperStyles(_ref){var theme=_ref.theme,styles=_ref.styles;return Object.assign({backgroundColor:theme.colors.popup.background.intense,borderWidth:makeBorderSize(theme.border.width.thin),borderRadius:makeBorderSize(theme.border.radius.medium),borderColor:theme.colors.popup.border.intense,borderStyle:'solid',boxShadow:isReactNative()?undefined:castWebType(theme.elevation.lowRaised)},styles);};
 
 export { getTooltipContentWrapperStyles };
 //# sourceMappingURL=getTooltipContentWrapperStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"getTooltipContentWrapperStyles.js","sources":["../../../../../src/components/Tooltip/getTooltipContentWrapperStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeBorderSize, castWebType, isReactNative } from '~utils';\n\nconst getTooltipContentWrapperStyles = ({\n  theme,\n  styles,\n}: {\n  theme: Theme;\n  styles: React.CSSProperties;\n}): CSSObject => {\n  return {\n    backgroundColor: theme.colors.brand.gray[200].highContrast,\n    borderWidth: makeBorderSize(theme.border.width.thin),\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    borderColor: theme.colors.brand.gray[300].highContrast,\n    borderStyle: 'solid',\n    boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.lowRaised),\n    ...styles,\n  };\n};\n\nexport { getTooltipContentWrapperStyles };\n"],"names":["getTooltipContentWrapperStyles","_ref","theme","styles","Object","assign","backgroundColor","colors","brand","gray","highContrast","borderWidth","makeBorderSize","border","width","thin","borderRadius","radius","medium","borderColor","borderStyle","boxShadow","isReactNative","undefined","castWebType","elevation","lowRaised"],"mappings":";;;;;;;;AAKM,IAAAA,8BAA8B,CAAG,SAAjCA,8BAA8BA,CAAAC,IAAA,CAMnB,CALf,IAAAC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,MAAM,CAAAF,IAAA,CAANE,MAAM,CAKN,OAAAC,MAAA,CAAAC,MAAA,CAAA,CACEC,eAAe,CAAEJ,KAAK,CAACK,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC,GAAG,CAAC,CAACC,YAAY,CAC1DC,WAAW,CAAEC,cAAc,CAACV,KAAK,CAACW,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC,CACpDC,YAAY,CAAEJ,cAAc,CAACV,KAAK,CAACW,MAAM,CAACI,MAAM,CAACC,MAAM,CAAC,CACxDC,WAAW,CAAEjB,KAAK,CAACK,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC,GAAG,CAAC,CAACC,YAAY,CACtDU,WAAW,CAAE,OAAO,CACpBC,SAAS,CAAEC,aAAa,EAAE,CAAGC,SAAS,CAAGC,WAAW,CAACtB,KAAK,CAACuB,SAAS,CAACC,SAAS,CAAC,CAC5EvB,CAAAA,MAAM,CAEb,CAAA;;;;"}
+{"version":3,"file":"getTooltipContentWrapperStyles.js","sources":["../../../../../src/components/Tooltip/getTooltipContentWrapperStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeBorderSize, castWebType, isReactNative } from '~utils';\n\nconst getTooltipContentWrapperStyles = ({\n  theme,\n  styles,\n}: {\n  theme: Theme;\n  styles: React.CSSProperties;\n}): CSSObject => {\n  return {\n    backgroundColor: theme.colors.popup.background.intense,\n    borderWidth: makeBorderSize(theme.border.width.thin),\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    borderColor: theme.colors.popup.border.intense,\n    borderStyle: 'solid',\n    boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.lowRaised),\n    ...styles,\n  };\n};\n\nexport { getTooltipContentWrapperStyles };\n"],"names":["getTooltipContentWrapperStyles","_ref","theme","styles","Object","assign","backgroundColor","colors","popup","background","intense","borderWidth","makeBorderSize","border","width","thin","borderRadius","radius","medium","borderColor","borderStyle","boxShadow","isReactNative","undefined","castWebType","elevation","lowRaised"],"mappings":";;;;;;;;AAKM,IAAAA,8BAA8B,CAAG,SAAjCA,8BAA8BA,CAAAC,IAAA,CAMnB,CAAA,IALfC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,MAAM,CAAAF,IAAA,CAANE,MAAM,CAKN,OAAAC,MAAA,CAAAC,MAAA,CACEC,CAAAA,eAAe,CAAEJ,KAAK,CAACK,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,OAAO,CACtDC,WAAW,CAAEC,cAAc,CAACV,KAAK,CAACW,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC,CACpDC,YAAY,CAAEJ,cAAc,CAACV,KAAK,CAACW,MAAM,CAACI,MAAM,CAACC,MAAM,CAAC,CACxDC,WAAW,CAAEjB,KAAK,CAACK,MAAM,CAACC,KAAK,CAACK,MAAM,CAACH,OAAO,CAC9CU,WAAW,CAAE,OAAO,CACpBC,SAAS,CAAEC,aAAa,EAAE,CAAGC,SAAS,CAAGC,WAAW,CAACtB,KAAK,CAACuB,SAAS,CAACC,SAAS,CAAC,CAC5EvB,CAAAA,MAAM,CAEb,CAAA;;;;"}

package/build/lib/native/components/Typography/BaseText/BaseText.native.js

@@ -8,7 +8,7 @@ import { useStyledProps } from '../../Box/styledProps/useStyledProps.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.native.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","numberOfLines","lineHeight","textAlign","as"],_excluded2=["id","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","children","truncateAfterLines","className","style","accessibilityProps","componentName","testID"];var StyledBaseText=styled.Text(function(_ref){var color=_ref.color,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,fontWeight=_ref.fontWeight,fontStyle=_ref.fontStyle,textDecorationLine=_ref.textDecorationLine,numberOfLines=_ref.numberOfLines,lineHeight=_ref.lineHeight,textAlign=_ref.textAlign;_ref.as;var props=_objectWithoutProperties(_ref,_excluded);var styledPropsCSSObject=useStyledProps(props);return Object.assign({},getBaseTextStyles({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,numberOfLines:numberOfLines,lineHeight:lineHeight,textAlign:textAlign,theme:props.theme}),styledPropsCSSObject);});var BaseText=function BaseText(_ref2){var id=_ref2.id,color=_ref2.color,fontFamily=_ref2.fontFamily,fontSize=_ref2.fontSize,fontWeight=_ref2.fontWeight,fontStyle=_ref2.fontStyle,textDecorationLine=_ref2.textDecorationLine,lineHeight=_ref2.lineHeight,textAlign=_ref2.textAlign,children=_ref2.children,truncateAfterLines=_ref2.truncateAfterLines,className=_ref2.className,style=_ref2.style,_ref2$accessibilityPr=_ref2.accessibilityProps,accessibilityProps=_ref2$accessibilityPr===void 0?{}:_ref2$accessibilityPr,_ref2$componentName=_ref2.componentName,componentName=_ref2$componentName===void 0?MetaConstants.BaseText:_ref2$componentName,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded2);return jsx(StyledBaseText,Object.assign({},getStyledProps(styledProps),{color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,as:undefined,textAlign:textAlign,numberOfLines:truncateAfterLines,className:className,style:style,id:id},makeAccessible(accessibilityProps),metaAttribute({name:componentName,testID:testID}),{children:children}));};
+var _excluded=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","numberOfLines","lineHeight","letterSpacing","textAlign","as","opacity"],_excluded2=["id","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","children","truncateAfterLines","opacity","className","style","accessibilityProps","componentName","testID"];var StyledBaseText=styled.Text(function(_ref){var color=_ref.color,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,fontWeight=_ref.fontWeight,fontStyle=_ref.fontStyle,textDecorationLine=_ref.textDecorationLine,numberOfLines=_ref.numberOfLines,lineHeight=_ref.lineHeight,letterSpacing=_ref.letterSpacing,textAlign=_ref.textAlign;_ref.as;var opacity=_ref.opacity,props=_objectWithoutProperties(_ref,_excluded);var styledPropsCSSObject=useStyledProps(props);return Object.assign({},getBaseTextStyles({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,numberOfLines:numberOfLines,lineHeight:lineHeight,letterSpacing:letterSpacing,textAlign:textAlign,opacity:opacity,theme:props.theme}),styledPropsCSSObject);});var BaseText=function BaseText(_ref2){var id=_ref2.id,color=_ref2.color,fontFamily=_ref2.fontFamily,fontSize=_ref2.fontSize,fontWeight=_ref2.fontWeight,fontStyle=_ref2.fontStyle,textDecorationLine=_ref2.textDecorationLine,lineHeight=_ref2.lineHeight,textAlign=_ref2.textAlign,children=_ref2.children,truncateAfterLines=_ref2.truncateAfterLines,opacity=_ref2.opacity,className=_ref2.className,style=_ref2.style,_ref2$accessibilityPr=_ref2.accessibilityProps,accessibilityProps=_ref2$accessibilityPr===void 0?{}:_ref2$accessibilityPr,_ref2$componentName=_ref2.componentName,componentName=_ref2$componentName===void 0?MetaConstants.BaseText:_ref2$componentName,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded2);return jsx(StyledBaseText,Object.assign({},getStyledProps(styledProps),{color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,as:undefined,textAlign:textAlign,numberOfLines:truncateAfterLines,opacity:opacity,className:className,style:style,id:id},makeAccessible(accessibilityProps),metaAttribute({name:componentName,testID:testID}),{children:children}));};
 
 export { BaseText };
 //# sourceMappingURL=BaseText.native.js.map

package/build/lib/native/components/Typography/BaseText/BaseText.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseText.native.js","sources":["../../../../../../src/components/Typography/BaseText/BaseText.native.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport styled from 'styled-components/native';\nimport getBaseTextStyles from './getBaseTextStyles';\nimport type { BaseTextProps, StyledBaseTextProps } from './types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps, useStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\nconst StyledBaseText = styled.Text<StyledBaseTextProps>(\n  ({\n    color,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    fontStyle,\n    textDecorationLine,\n    numberOfLines,\n    lineHeight,\n    textAlign,\n    as,\n    ...props\n  }) => {\n    const styledPropsCSSObject = useStyledProps(props);\n\n    return {\n      ...getBaseTextStyles({\n        color,\n        fontFamily,\n        fontSize,\n        fontWeight,\n        fontStyle,\n        textDecorationLine,\n        numberOfLines,\n        lineHeight,\n        textAlign,\n        theme: props.theme,\n      }),\n      ...styledPropsCSSObject,\n    };\n  },\n);\n\nexport const BaseText = ({\n  id,\n  color,\n  fontFamily,\n  fontSize,\n  fontWeight,\n  fontStyle,\n  textDecorationLine,\n  lineHeight,\n  textAlign,\n  children,\n  truncateAfterLines,\n  className,\n  style,\n  accessibilityProps = {},\n  componentName = MetaConstants.BaseText,\n  testID,\n  ...styledProps\n}: BaseTextProps): ReactElement => {\n  return (\n    <StyledBaseText\n      {...getStyledProps(styledProps)}\n      color={color}\n      fontFamily={fontFamily}\n      fontSize={fontSize}\n      fontWeight={fontWeight}\n      fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      lineHeight={lineHeight}\n      as={undefined}\n      textAlign={textAlign}\n      numberOfLines={truncateAfterLines}\n      className={className}\n      style={style}\n      id={id}\n      {...makeAccessible(accessibilityProps)}\n      {...metaAttribute({ name: componentName, testID })}\n    >\n      {children}\n    </StyledBaseText>\n  );\n};\n"],"names":["StyledBaseText","styled","Text","_ref","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","numberOfLines","lineHeight","textAlign","as","props","_objectWithoutProperties","_excluded","styledPropsCSSObject","useStyledProps","Object","assign","getBaseTextStyles","theme","BaseText","_ref2","id","children","truncateAfterLines","className","style","_ref2$accessibilityPr","accessibilityProps","_ref2$componentName","componentName","MetaConstants","testID","styledProps","_excluded2","_jsx","getStyledProps","undefined","makeAccessible","metaAttribute","name"],"mappings":"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"}
+{"version":3,"file":"BaseText.native.js","sources":["../../../../../../src/components/Typography/BaseText/BaseText.native.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport styled from 'styled-components/native';\nimport getBaseTextStyles from './getBaseTextStyles';\nimport type { BaseTextProps, StyledBaseTextProps } from './types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps, useStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\nconst StyledBaseText = styled.Text<StyledBaseTextProps>(\n  ({\n    color,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    fontStyle,\n    textDecorationLine,\n    numberOfLines,\n    lineHeight,\n    letterSpacing,\n    textAlign,\n    as,\n    opacity,\n    ...props\n  }) => {\n    const styledPropsCSSObject = useStyledProps(props);\n\n    return {\n      ...getBaseTextStyles({\n        color,\n        fontFamily,\n        fontSize,\n        fontWeight,\n        fontStyle,\n        textDecorationLine,\n        numberOfLines,\n        lineHeight,\n        letterSpacing,\n        textAlign,\n        opacity,\n        theme: props.theme,\n      }),\n      ...styledPropsCSSObject,\n    };\n  },\n);\n\nexport const BaseText = ({\n  id,\n  color,\n  fontFamily,\n  fontSize,\n  fontWeight,\n  fontStyle,\n  textDecorationLine,\n  lineHeight,\n  textAlign,\n  children,\n  truncateAfterLines,\n  opacity,\n  className,\n  style,\n  accessibilityProps = {},\n  componentName = MetaConstants.BaseText,\n  testID,\n  ...styledProps\n}: BaseTextProps): ReactElement => {\n  return (\n    <StyledBaseText\n      {...getStyledProps(styledProps)}\n      color={color}\n      fontFamily={fontFamily}\n      fontSize={fontSize}\n      fontWeight={fontWeight}\n      fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      lineHeight={lineHeight}\n      as={undefined}\n      textAlign={textAlign}\n      numberOfLines={truncateAfterLines}\n      opacity={opacity}\n      className={className}\n      style={style}\n      id={id}\n      {...makeAccessible(accessibilityProps)}\n      {...metaAttribute({ name: componentName, testID })}\n    >\n      {children}\n    </StyledBaseText>\n  );\n};\n"],"names":["StyledBaseText","styled","Text","_ref","color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","numberOfLines","lineHeight","letterSpacing","textAlign","as","opacity","props","_objectWithoutProperties","_excluded","styledPropsCSSObject","useStyledProps","Object","assign","getBaseTextStyles","theme","BaseText","_ref2","id","children","truncateAfterLines","className","style","_ref2$accessibilityPr","accessibilityProps","_ref2$componentName","componentName","MetaConstants","testID","styledProps","_excluded2","_jsx","getStyledProps","undefined","makeAccessible","metaAttribute","name"],"mappings":"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"}

package/build/lib/native/components/Typography/BaseText/getBaseTextStyles.js

@@ -5,8 +5,9 @@ import '@babel/runtime/helpers/slicedToArray';
 import 'react';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
 import '../../BladeProvider/useTheme.js';
+import { makeLetterSpacing } from '../../../utils/makeLetterSpacing/makeLetterSpacing.js';
 
-var getBaseTextStyles=function getBaseTextStyles(_ref){var _ref$color=_ref.color,color=_ref$color===void 0?'surface.text.normal.lowContrast':_ref$color,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?'text':_ref$fontFamily,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?200:_ref$fontSize,_ref$fontWeight=_ref.fontWeight,fontWeight=_ref$fontWeight===void 0?'regular':_ref$fontWeight,_ref$fontStyle=_ref.fontStyle,fontStyle=_ref$fontStyle===void 0?'normal':_ref$fontStyle,_ref$textDecorationLi=_ref.textDecorationLine,textDecorationLine=_ref$textDecorationLi===void 0?'none':_ref$textDecorationLi,numberOfLines=_ref.numberOfLines,wordBreak=_ref.wordBreak,_ref$lineHeight=_ref.lineHeight,lineHeight=_ref$lineHeight===void 0?100:_ref$lineHeight,textAlign=_ref.textAlign,theme=_ref.theme;var textColor=getIn(theme.colors,color);var themeFontFamily=theme.typography.fonts.family[fontFamily];var themeFontSize=makeTypographySize(theme.typography.fonts.size[fontSize]);var themeFontWeight=theme.typography.fonts.weight[fontWeight];var themeLineHeight=makeTypographySize(theme.typography.lineHeights[lineHeight]);var truncateStyles={};var wordBreakStyles={};if(numberOfLines!==undefined){if(isReactNative()){truncateStyles={};}else {truncateStyles={overflow:'hidden',display:'-webkit-box','line-clamp':`${numberOfLines}`,'-webkit-line-clamp':`${numberOfLines}`,'-webkit-box-orient':'vertical'};}}if(wordBreak!==undefined){if(isReactNative()){wordBreakStyles={};}else {wordBreakStyles={wordBreak:wordBreak};}}return Object.assign({color:textColor,fontFamily:themeFontFamily,fontSize:themeFontSize,fontWeight:themeFontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine},textDecorationLine!=='none'&&{textDecorationColor:textColor},{lineHeight:themeLineHeight,textAlign:textAlign,margin:0,padding:0},truncateStyles,wordBreakStyles);};
+var getBaseTextStyles=function getBaseTextStyles(_ref){var _ref$color=_ref.color,color=_ref$color===void 0?'surface.text.gray.normal':_ref$color,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?'text':_ref$fontFamily,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?200:_ref$fontSize,_ref$fontWeight=_ref.fontWeight,fontWeight=_ref$fontWeight===void 0?'regular':_ref$fontWeight,_ref$fontStyle=_ref.fontStyle,fontStyle=_ref$fontStyle===void 0?'normal':_ref$fontStyle,_ref$textDecorationLi=_ref.textDecorationLine,textDecorationLine=_ref$textDecorationLi===void 0?'none':_ref$textDecorationLi,numberOfLines=_ref.numberOfLines,wordBreak=_ref.wordBreak,_ref$lineHeight=_ref.lineHeight,lineHeight=_ref$lineHeight===void 0?100:_ref$lineHeight,_ref$letterSpacing=_ref.letterSpacing,letterSpacing=_ref$letterSpacing===void 0?100:_ref$letterSpacing,textAlign=_ref.textAlign,opacity=_ref.opacity,theme=_ref.theme;var textColor=getIn(theme.colors,color);var themeFontFamily=theme.typography.fonts.family[fontFamily];var themeFontSize=makeTypographySize(theme.typography.fonts.size[fontSize]);var themeFontWeight=theme.typography.fonts.weight[fontWeight];var themeLineHeight=makeTypographySize(theme.typography.lineHeights[lineHeight]);var themeLetterSpacing=makeLetterSpacing(theme.typography.letterSpacings[letterSpacing],theme.typography.fonts.size[fontSize]);var truncateStyles={};var wordBreakStyles={};if(numberOfLines!==undefined){if(isReactNative()){truncateStyles={};}else {truncateStyles={overflow:'hidden',display:'-webkit-box','line-clamp':`${numberOfLines}`,'-webkit-line-clamp':`${numberOfLines}`,'-webkit-box-orient':'vertical'};}}if(wordBreak!==undefined){if(isReactNative()){wordBreakStyles={};}else {wordBreakStyles={wordBreak:wordBreak};}}return Object.assign({color:textColor,fontFamily:themeFontFamily,fontSize:themeFontSize,fontWeight:themeFontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine},textDecorationLine!=='none'&&{textDecorationColor:textColor},{lineHeight:themeLineHeight,letterSpacing:themeLetterSpacing,textAlign:textAlign,margin:0,padding:0,opacity:opacity},truncateStyles,wordBreakStyles);};
 
 export { getBaseTextStyles as default };
 //# sourceMappingURL=getBaseTextStyles.js.map

package/build/lib/native/components/Typography/BaseText/getBaseTextStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBaseTextStyles.js","sources":["../../../../../../src/components/Typography/BaseText/getBaseTextStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { StyledBaseTextProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { isReactNative } from '~utils';\n\nconst getBaseTextStyles = ({\n  color = 'surface.text.normal.lowContrast',\n  fontFamily = 'text',\n  fontSize = 200,\n  fontWeight = 'regular',\n  fontStyle = 'normal',\n  textDecorationLine = 'none',\n  numberOfLines,\n  wordBreak,\n  lineHeight = 100,\n  textAlign,\n  theme,\n}: StyledBaseTextProps): CSSObject => {\n  const textColor = getIn(theme.colors, color);\n  const themeFontFamily = theme.typography.fonts.family[fontFamily];\n  const themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);\n  const themeFontWeight = theme.typography.fonts.weight[fontWeight];\n  const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);\n  let truncateStyles: CSSObject = {};\n  let wordBreakStyles: CSSObject = {};\n  if (numberOfLines !== undefined) {\n    if (isReactNative()) {\n      truncateStyles = {};\n    } else {\n      truncateStyles = {\n        overflow: 'hidden',\n        display: '-webkit-box',\n        'line-clamp': `${numberOfLines}`,\n        '-webkit-line-clamp': `${numberOfLines}`,\n        '-webkit-box-orient': 'vertical',\n      };\n    }\n  }\n  if (wordBreak !== undefined) {\n    if (isReactNative()) {\n      wordBreakStyles = {};\n    } else {\n      wordBreakStyles = {\n        wordBreak,\n      };\n    }\n  }\n\n  return {\n    color: textColor,\n    fontFamily: themeFontFamily,\n    fontSize: themeFontSize,\n    fontWeight: themeFontWeight,\n    fontStyle,\n    textDecorationLine,\n    ...(textDecorationLine !== 'none' && {\n      textDecorationColor: textColor,\n    }),\n    lineHeight: themeLineHeight,\n    textAlign,\n    margin: 0,\n    padding: 0,\n    ...truncateStyles,\n    ...wordBreakStyles,\n  };\n};\n\nexport default getBaseTextStyles;\n"],"names":["getBaseTextStyles","_ref","_ref$color","color","_ref$fontFamily","fontFamily","_ref$fontSize","fontSize","_ref$fontWeight","fontWeight","_ref$fontStyle","fontStyle","_ref$textDecorationLi","textDecorationLine","numberOfLines","wordBreak","_ref$lineHeight","lineHeight","textAlign","theme","textColor","getIn","colors","themeFontFamily","typography","fonts","family","themeFontSize","makeTypographySize","size","themeFontWeight","weight","themeLineHeight","lineHeights","truncateStyles","wordBreakStyles","undefined","isReactNative","overflow","display","Object","assign","textDecorationColor","margin","padding"],"mappings":"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"}
+{"version":3,"file":"getBaseTextStyles.js","sources":["../../../../../../src/components/Typography/BaseText/getBaseTextStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { StyledBaseTextProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { isReactNative } from '~utils';\nimport { makeLetterSpacing } from '~utils/makeLetterSpacing';\n\nconst getBaseTextStyles = ({\n  color = 'surface.text.gray.normal',\n  fontFamily = 'text',\n  fontSize = 200,\n  fontWeight = 'regular',\n  fontStyle = 'normal',\n  textDecorationLine = 'none',\n  numberOfLines,\n  wordBreak,\n  lineHeight = 100,\n  letterSpacing = 100,\n  textAlign,\n  opacity,\n  theme,\n}: StyledBaseTextProps): CSSObject => {\n  const textColor = getIn(theme.colors, color);\n  const themeFontFamily = theme.typography.fonts.family[fontFamily];\n  const themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);\n  const themeFontWeight = theme.typography.fonts.weight[fontWeight];\n  const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);\n  const themeLetterSpacing = makeLetterSpacing(\n    theme.typography.letterSpacings[letterSpacing],\n    theme.typography.fonts.size[fontSize],\n  );\n  let truncateStyles: CSSObject = {};\n  let wordBreakStyles: CSSObject = {};\n  if (numberOfLines !== undefined) {\n    if (isReactNative()) {\n      truncateStyles = {};\n    } else {\n      truncateStyles = {\n        overflow: 'hidden',\n        display: '-webkit-box',\n        'line-clamp': `${numberOfLines}`,\n        '-webkit-line-clamp': `${numberOfLines}`,\n        '-webkit-box-orient': 'vertical',\n      };\n    }\n  }\n  if (wordBreak !== undefined) {\n    if (isReactNative()) {\n      wordBreakStyles = {};\n    } else {\n      wordBreakStyles = {\n        wordBreak,\n      };\n    }\n  }\n\n  return {\n    color: textColor,\n    fontFamily: themeFontFamily,\n    fontSize: themeFontSize,\n    fontWeight: themeFontWeight,\n    fontStyle,\n    textDecorationLine,\n    ...(textDecorationLine !== 'none' && {\n      textDecorationColor: textColor,\n    }),\n    lineHeight: themeLineHeight,\n    letterSpacing: themeLetterSpacing,\n    textAlign,\n    margin: 0,\n    padding: 0,\n    opacity,\n    ...truncateStyles,\n    ...wordBreakStyles,\n  };\n};\n\nexport default getBaseTextStyles;\n"],"names":["getBaseTextStyles","_ref","_ref$color","color","_ref$fontFamily","fontFamily","_ref$fontSize","fontSize","_ref$fontWeight","fontWeight","_ref$fontStyle","fontStyle","_ref$textDecorationLi","textDecorationLine","numberOfLines","wordBreak","_ref$lineHeight","lineHeight","_ref$letterSpacing","letterSpacing","textAlign","opacity","theme","textColor","getIn","colors","themeFontFamily","typography","fonts","family","themeFontSize","makeTypographySize","size","themeFontWeight","weight","themeLineHeight","lineHeights","themeLetterSpacing","makeLetterSpacing","letterSpacings","truncateStyles","wordBreakStyles","undefined","isReactNative","overflow","display","Object","assign","textDecorationColor","margin","padding"],"mappings":"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"}

package/build/lib/native/components/Typography/Code/Code.js

@@ -17,7 +17,7 @@ import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.native
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded=["children","size","weight","isHighlighted","color","testID"];var platformType=getPlatformType();var isPlatformWeb=platformType==='browser'||platformType==='node';var getCodeFontSizeAndLineHeight=function getCodeFontSizeAndLineHeight(size){switch(size){case'medium':return {fontSize:75,lineHeight:75};case'small':return {fontSize:25,lineHeight:25};default:if(__DEV__){throwBladeError({moduleName:'Code',message:`Unexpected size: ${size}`});}return undefined;}};var CodeContainer=styled(BaseBox)(function(props){var padding=`${makeSpace(props.theme.spacing[0])} ${makeSpace(props.theme.spacing[2])}`;return {padding:padding,backgroundColor:props.isHighlighted?props.theme.colors.brand.gray.a100.lowContrast:undefined,borderRadius:props.theme.border.radius.medium,display:isPlatformWeb?'inline-block':'flex',alignSelf:isPlatformWeb?undefined:'center',verticalAlign:'middle',lineHeight:makeTypographySize(props.theme.typography.lineHeights[0])};});var getCodeColor=function getCodeColor(_ref){var isHighlighted=_ref.isHighlighted,color=_ref.color;if(isHighlighted){if(__DEV__){if(color){throwBladeError({moduleName:'Code',message:'`color` prop cannot be used without `isHighlighted={false}`'});}}return 'surface.text.subtle.lowContrast';}if(color){return color;}return 'surface.text.normal.lowContrast';};var Code=function Code(_ref2){var children=_ref2.children,_ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,_ref2$weight=_ref2.weight,weight=_ref2$weight===void 0?'regular':_ref2$weight,_ref2$isHighlighted=_ref2.isHighlighted,isHighlighted=_ref2$isHighlighted===void 0?true:_ref2$isHighlighted,color=_ref2.color,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded);var _ref3=getCodeFontSizeAndLineHeight(size),fontSize=_ref3.fontSize,lineHeight=_ref3.lineHeight;var codeTextColor=React__default.useMemo(function(){return getCodeColor({isHighlighted:isHighlighted,color:color});},[isHighlighted,color]);return jsx(CodeContainer,Object.assign({size:size,isHighlighted:isHighlighted,as:isPlatformWeb?'span':undefined},metaAttribute({name:MetaConstants.Code,testID:testID}),getStyledProps(styledProps),{children:jsx(BaseText,{color:codeTextColor,fontFamily:"code",fontSize:fontSize,fontWeight:weight,as:isPlatformWeb?'code':undefined,lineHeight:lineHeight,children:children})}));};
+var _excluded=["children","size","weight","isHighlighted","color","testID"];var platformType=getPlatformType();var isPlatformWeb=platformType==='browser'||platformType==='node';var getCodeFontSizeAndLineHeight=function getCodeFontSizeAndLineHeight(size){switch(size){case'medium':return {fontSize:75,lineHeight:75};case'small':return {fontSize:25,lineHeight:25};default:if(__DEV__){throwBladeError({moduleName:'Code',message:`Unexpected size: ${size}`});}return undefined;}};var CodeContainer=styled(BaseBox)(function(props){var padding=`${makeSpace(props.theme.spacing[0])} ${makeSpace(props.theme.spacing[2])}`;return {padding:padding,backgroundColor:props.isHighlighted?props.theme.colors.feedback.background.neutral.subtle:undefined,borderRadius:props.theme.border.radius.medium,display:isPlatformWeb?'inline-block':'flex',alignSelf:isPlatformWeb?undefined:'center',verticalAlign:'middle',lineHeight:makeTypographySize(props.theme.typography.lineHeights[0])};});var getCodeColor=function getCodeColor(_ref){var isHighlighted=_ref.isHighlighted,color=_ref.color;if(isHighlighted){if(__DEV__){if(color){throwBladeError({moduleName:'Code',message:'`color` prop cannot be used without `isHighlighted={false}`'});}}return 'surface.text.gray.subtle';}if(color){return color;}return 'surface.text.gray.normal';};var Code=function Code(_ref2){var children=_ref2.children,_ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,_ref2$weight=_ref2.weight,weight=_ref2$weight===void 0?'regular':_ref2$weight,_ref2$isHighlighted=_ref2.isHighlighted,isHighlighted=_ref2$isHighlighted===void 0?true:_ref2$isHighlighted,color=_ref2.color,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded);var _ref3=getCodeFontSizeAndLineHeight(size),fontSize=_ref3.fontSize,lineHeight=_ref3.lineHeight;var codeTextColor=React__default.useMemo(function(){return getCodeColor({isHighlighted:isHighlighted,color:color});},[isHighlighted,color]);return jsx(CodeContainer,Object.assign({size:size,isHighlighted:isHighlighted,as:isPlatformWeb?'span':undefined},metaAttribute({name:MetaConstants.Code,testID:testID}),getStyledProps(styledProps),{children:jsx(BaseText,{color:codeTextColor,fontFamily:"code",fontSize:fontSize,fontWeight:weight,as:isPlatformWeb?'code':undefined,lineHeight:lineHeight,children:children})}));};
 
 export { Code };
 //# sourceMappingURL=Code.js.map

package/build/lib/native/components/Typography/Code/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sources":["../../../../../../src/components/Typography/Code/Code.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FontSize, Typography } from '~tokens/global';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { throwBladeError } from '~utils/logger';\n\ntype CodeCommonProps = {\n  /**\n   * Sets the color of the Heading component.\n   */\n  children: StringChildrenType;\n  /**\n   * Decides the fontSize and padding of Code\n   *\n   * @default small\n   */\n  size?: Extract<BaseTextSizes, 'small' | 'medium'>;\n  weight?: 'regular' | 'bold';\n  isHighlighted?: boolean;\n  color?: BaseTextProps['color'];\n} & TestID &\n  StyledPropsBlade;\n\ntype CodeHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted?: true;\n  /**\n   * color prop can only be added when `isHighlighted` is set to `false`\n   */\n  color?: undefined;\n};\n\ntype CodeNonHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted: false;\n  /**\n   * color prop to set color of text when `isHighlighted` is set to false\n   */\n  color?: BaseTextProps['color'];\n};\n\nexport type CodeProps = CodeHighlightedProps | CodeNonHighlightedProps;\n\ntype CodeContainerProps = {\n  size: CodeProps['size'];\n  isHighlighted: CodeProps['isHighlighted'];\n};\n\nconst platformType = getPlatformType();\nconst isPlatformWeb = platformType === 'browser' || platformType === 'node';\n\nconst getCodeFontSizeAndLineHeight = (\n  size: CodeProps['size'],\n): { fontSize: keyof FontSize; lineHeight: keyof Typography['lineHeights'] } | undefined => {\n  switch (size) {\n    case 'medium':\n      return { fontSize: 75, lineHeight: 75 };\n    case 'small':\n      return { fontSize: 25, lineHeight: 25 };\n    default:\n      if (__DEV__) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: `Unexpected size: ${size}`,\n        });\n      }\n      return undefined;\n  }\n};\n\nconst CodeContainer = styled(BaseBox)<CodeContainerProps>((props) => {\n  const padding = `${makeSpace(props.theme.spacing[0])} ${makeSpace(props.theme.spacing[2])}`;\n  return {\n    padding,\n    backgroundColor: props.isHighlighted\n      ? props.theme.colors.brand.gray.a100.lowContrast\n      : undefined,\n    borderRadius: props.theme.border.radius.medium,\n    display: isPlatformWeb ? 'inline-block' : 'flex',\n    alignSelf: isPlatformWeb ? undefined : 'center',\n    verticalAlign: 'middle',\n    lineHeight: makeTypographySize(props.theme.typography.lineHeights[0]),\n  };\n});\n\nconst getCodeColor = ({\n  isHighlighted,\n  color,\n}: Pick<CodeProps, 'isHighlighted' | 'color'>): CodeProps['color'] => {\n  if (isHighlighted) {\n    if (__DEV__) {\n      if (color) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: '`color` prop cannot be used without `isHighlighted={false}`',\n        });\n      }\n    }\n\n    return 'surface.text.subtle.lowContrast';\n  }\n\n  if (color) {\n    return color;\n  }\n\n  return 'surface.text.normal.lowContrast';\n};\n/**\n * Code component can be used for displaying token, variable names, or inlined code snippets.\n *\n * ## Usage\n *\n * ### In Web\n * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`\n *\n * ```tsx\n * <Text>\n *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text\n * </Text>\n * ```\n *\n * ### In React Native\n *\n * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned\n *\n * ```tsx\n *  <Box flexWrap=\"wrap\" flexDirection=\"row\" alignItems=\"flex-start\">\n *   <Text>Lorem ipsum </Text>\n *   <Code>SENTRY_TOKEN</Code>\n *   <Text> normal text</Text>\n * </Box>\n * ```\n */\nconst Code = ({\n  children,\n  size = 'small',\n  weight = 'regular',\n  isHighlighted = true,\n  color,\n  testID,\n  ...styledProps\n}: CodeProps): React.ReactElement => {\n  const { fontSize, lineHeight } = getCodeFontSizeAndLineHeight(size)!;\n  const codeTextColor = React.useMemo<CodeProps['color']>(\n    () => getCodeColor({ isHighlighted, color }),\n    [isHighlighted, color],\n  );\n\n  return (\n    <CodeContainer\n      size={size}\n      isHighlighted={isHighlighted}\n      as={isPlatformWeb ? 'span' : undefined}\n      {...metaAttribute({ name: MetaConstants.Code, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseText\n        color={codeTextColor}\n        fontFamily=\"code\"\n        fontSize={fontSize}\n        fontWeight={weight}\n        as={isPlatformWeb ? 'code' : undefined}\n        lineHeight={lineHeight}\n      >\n        {children}\n      </BaseText>\n    </CodeContainer>\n  );\n};\n\nexport { Code };\n"],"names":["platformType","getPlatformType","isPlatformWeb","getCodeFontSizeAndLineHeight","size","fontSize","lineHeight","__DEV__","throwBladeError","moduleName","message","undefined","CodeContainer","styled","BaseBox","props","padding","makeSpace","theme","spacing","backgroundColor","isHighlighted","colors","brand","gray","a100","lowContrast","borderRadius","border","radius","medium","display","alignSelf","verticalAlign","makeTypographySize","typography","lineHeights","getCodeColor","_ref","color","Code","_ref2","children","_ref2$size","_ref2$weight","weight","_ref2$isHighlighted","testID","styledProps","_objectWithoutProperties","_excluded","_ref3","codeTextColor","React","useMemo","_jsx","Object","assign","as","metaAttribute","name","MetaConstants","getStyledProps","BaseText","fontFamily","fontWeight"],"mappings":"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"}
+{"version":3,"file":"Code.js","sources":["../../../../../../src/components/Typography/Code/Code.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FontSize, Typography } from '~tokens/global';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeTypographySize } from '~utils/makeTypographySize';\nimport { throwBladeError } from '~utils/logger';\n\ntype CodeCommonProps = {\n  /**\n   * Sets the color of the Heading component.\n   */\n  children: StringChildrenType;\n  /**\n   * Decides the fontSize and padding of Code\n   *\n   * @default small\n   */\n  size?: Extract<BaseTextSizes, 'small' | 'medium'>;\n  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'bold'>;\n  isHighlighted?: boolean;\n  color?: BaseTextProps['color'];\n} & TestID &\n  StyledPropsBlade;\n\ntype CodeHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted?: true;\n  /**\n   * color prop can only be added when `isHighlighted` is set to `false`\n   */\n  color?: undefined;\n};\n\ntype CodeNonHighlightedProps = CodeCommonProps & {\n  /**\n   * Adds background color to highlight the text\n   *\n   * @default true\n   */\n  isHighlighted: false;\n  /**\n   * color prop to set color of text when `isHighlighted` is set to false\n   */\n  color?: BaseTextProps['color'];\n};\n\nexport type CodeProps = CodeHighlightedProps | CodeNonHighlightedProps;\n\ntype CodeContainerProps = {\n  size: CodeProps['size'];\n  isHighlighted: CodeProps['isHighlighted'];\n};\n\nconst platformType = getPlatformType();\nconst isPlatformWeb = platformType === 'browser' || platformType === 'node';\n\nconst getCodeFontSizeAndLineHeight = (\n  size: CodeProps['size'],\n): { fontSize: keyof FontSize; lineHeight: keyof Typography['lineHeights'] } | undefined => {\n  switch (size) {\n    case 'medium':\n      return { fontSize: 75, lineHeight: 75 };\n    case 'small':\n      return { fontSize: 25, lineHeight: 25 };\n    default:\n      if (__DEV__) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: `Unexpected size: ${size}`,\n        });\n      }\n      return undefined;\n  }\n};\n\nconst CodeContainer = styled(BaseBox)<CodeContainerProps>((props) => {\n  const padding = `${makeSpace(props.theme.spacing[0])} ${makeSpace(props.theme.spacing[2])}`;\n  return {\n    padding,\n    backgroundColor: props.isHighlighted\n      ? props.theme.colors.feedback.background.neutral.subtle\n      : undefined,\n    borderRadius: props.theme.border.radius.medium,\n    display: isPlatformWeb ? 'inline-block' : 'flex',\n    alignSelf: isPlatformWeb ? undefined : 'center',\n    verticalAlign: 'middle',\n    lineHeight: makeTypographySize(props.theme.typography.lineHeights[0]),\n  };\n});\n\nconst getCodeColor = ({\n  isHighlighted,\n  color,\n}: Pick<CodeProps, 'isHighlighted' | 'color'>): CodeProps['color'] => {\n  if (isHighlighted) {\n    if (__DEV__) {\n      if (color) {\n        throwBladeError({\n          moduleName: 'Code',\n          message: '`color` prop cannot be used without `isHighlighted={false}`',\n        });\n      }\n    }\n\n    return 'surface.text.gray.subtle';\n  }\n\n  if (color) {\n    return color;\n  }\n\n  return 'surface.text.gray.normal';\n};\n/**\n * Code component can be used for displaying token, variable names, or inlined code snippets.\n *\n * ## Usage\n *\n * ### In Web\n * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`\n *\n * ```tsx\n * <Text>\n *  Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text\n * </Text>\n * ```\n *\n * ### In React Native\n *\n * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned\n *\n * ```tsx\n *  <Box flexWrap=\"wrap\" flexDirection=\"row\" alignItems=\"flex-start\">\n *   <Text>Lorem ipsum </Text>\n *   <Code>SENTRY_TOKEN</Code>\n *   <Text> normal text</Text>\n * </Box>\n * ```\n */\nconst Code = ({\n  children,\n  size = 'small',\n  weight = 'regular',\n  isHighlighted = true,\n  color,\n  testID,\n  ...styledProps\n}: CodeProps): React.ReactElement => {\n  const { fontSize, lineHeight } = getCodeFontSizeAndLineHeight(size)!;\n  const codeTextColor = React.useMemo<CodeProps['color']>(\n    () => getCodeColor({ isHighlighted, color }),\n    [isHighlighted, color],\n  );\n\n  return (\n    <CodeContainer\n      size={size}\n      isHighlighted={isHighlighted}\n      as={isPlatformWeb ? 'span' : undefined}\n      {...metaAttribute({ name: MetaConstants.Code, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseText\n        color={codeTextColor}\n        fontFamily=\"code\"\n        fontSize={fontSize}\n        fontWeight={weight}\n        as={isPlatformWeb ? 'code' : undefined}\n        lineHeight={lineHeight}\n      >\n        {children}\n      </BaseText>\n    </CodeContainer>\n  );\n};\n\nexport { Code };\n"],"names":["platformType","getPlatformType","isPlatformWeb","getCodeFontSizeAndLineHeight","size","fontSize","lineHeight","__DEV__","throwBladeError","moduleName","message","undefined","CodeContainer","styled","BaseBox","props","padding","makeSpace","theme","spacing","backgroundColor","isHighlighted","colors","feedback","background","neutral","subtle","borderRadius","border","radius","medium","display","alignSelf","verticalAlign","makeTypographySize","typography","lineHeights","getCodeColor","_ref","color","Code","_ref2","children","_ref2$size","_ref2$weight","weight","_ref2$isHighlighted","testID","styledProps","_objectWithoutProperties","_excluded","_ref3","codeTextColor","React","useMemo","_jsx","Object","assign","as","metaAttribute","name","MetaConstants","getStyledProps","BaseText","fontFamily","fontWeight"],"mappings":"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"}

package/build/lib/native/components/Typography/Display/Display.js

@@ -11,7 +11,7 @@ import 'react';
 import '../../BladeProvider/useTheme.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded=["as","size","type","contrast","color","children","testID","textAlign","textDecorationLine"];var validAsValues=['span','h1','h2','h3','h4','h5','h6'];var getProps=function getProps(_ref){var as=_ref.as,size=_ref.size,type=_ref.type,contrast=_ref.contrast,color=_ref.color,testID=_ref.testID;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?`${contrast}Contrast`:'lowContrast';var props={color:color!=null?color:`surface.text.${type!=null?type:'normal'}.${colorContrast}`,fontSize:1100,fontWeight:'bold',fontStyle:'normal',lineHeight:900,fontFamily:'text',accessibilityProps:isPlatformWeb?{}:{role:'heading'},componentName:'display',testID:testID};if(size==='small'){props.fontSize=1100;props.lineHeight=900;}else if(size==='medium'){props.fontSize=1200;props.lineHeight=1000;}else if(size==='large'){props.fontSize=1300;props.lineHeight=1100;}else if(size==='xlarge'){props.fontSize=1600;props.lineHeight=1500;}props.as=isPlatformWeb?'h1':undefined;props.as=as||props.as;return props;};var Display=function Display(_ref2){var as=_ref2.as,_ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,_ref2$type=_ref2.type,type=_ref2$type===void 0?'normal':_ref2$type,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,color=_ref2.color,children=_ref2.children,testID=_ref2.testID,textAlign=_ref2.textAlign,textDecorationLine=_ref2.textDecorationLine,styledProps=_objectWithoutProperties(_ref2,_excluded);useValidateAsProp({componentName:'Display',as:as,validAsValues:validAsValues});var props=getProps({as:as,size:size,type:type,contrast:contrast,color:color,testID:testID});return jsx(BaseText,Object.assign({},props,{textAlign:textAlign,textDecorationLine:textDecorationLine},getStyledProps(styledProps),{children:children}));};
+var _excluded=["as","size","weight","color","children","testID","textAlign","textDecorationLine"];var validAsValues=['span','h1','h2','h3','h4','h5','h6'];var getProps=function getProps(_ref){var as=_ref.as,size=_ref.size,weight=_ref.weight,color=_ref.color,testID=_ref.testID;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var letterSpacing=weight==='medium'||weight==='regular'?50:100;var props={color:color,fontSize:800,fontWeight:weight,fontStyle:'normal',lineHeight:800,fontFamily:'heading',accessibilityProps:isPlatformWeb?{}:{role:'heading'},componentName:'display',testID:testID,letterSpacing:letterSpacing};if(size==='small'){props.fontSize=800;props.lineHeight=800;}else if(size==='medium'){props.fontSize=900;props.lineHeight=900;}else if(size==='large'){props.fontSize=1000;props.lineHeight=1000;}else if(size==='xlarge'){props.fontSize=1100;props.lineHeight=1100;}props.as=isPlatformWeb?'h1':undefined;props.as=as||props.as;return props;};var Display=function Display(_ref2){var as=_ref2.as,_ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,_ref2$weight=_ref2.weight,weight=_ref2$weight===void 0?'semibold':_ref2$weight,_ref2$color=_ref2.color,color=_ref2$color===void 0?'surface.text.gray.normal':_ref2$color,children=_ref2.children,testID=_ref2.testID,textAlign=_ref2.textAlign,textDecorationLine=_ref2.textDecorationLine,styledProps=_objectWithoutProperties(_ref2,_excluded);useValidateAsProp({componentName:'Display',as:as,validAsValues:validAsValues});var props=getProps({as:as,size:size,color:color,weight:weight,testID:testID});return jsx(BaseText,Object.assign({},props,{textAlign:textAlign,textDecorationLine:textDecorationLine},getStyledProps(styledProps),{children:children}));};
 
 export { Display };
 //# sourceMappingURL=Display.js.map