@razorpay/blade 11.38.1 → 12.0.0

package/build/lib/native/components/Table/TableHeader.native.js

@@ -1,14 +1,9 @@
 import 'react';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../Typography/BaseText/BaseText.native.js';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react-native';
-import '../../tokens/global/typography.js';
-import '../../tokens/global/motion.js';
-import '../BladeProvider/useTheme.js';
-import { jsx } from 'react/jsx-runtime';
+import '../Typography/Heading/Heading.js';
 import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
+import { jsx } from 'react/jsx-runtime';
 
 var TableHeader=function TableHeader(props){return jsx(Text,{children:"Table Component is not available for Native mobile apps."});};var TableHeaderRow=function TableHeaderRow(props){return jsx(Text,{children:"Table Component is not available for Native mobile apps."});};var TableHeaderCell=function TableHeaderCell(props){return jsx(Text,{children:"Table Component is not available for Native mobile apps."});};
 

package/build/lib/native/components/Table/TableHeader.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.native.js","sources":["../../../../../src/components/Table/TableHeader.native.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport type { TableHeaderCellProps, TableHeaderProps, TableHeaderRowProps } from './types';\nimport { Text } from '~components/Typography';\n\nconst TableHeader = (props: TableHeaderProps): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nconst TableHeaderRow = (props: TableHeaderRowProps): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nconst TableHeaderCell = (props: TableHeaderCellProps): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TableHeader, TableHeaderRow, TableHeaderCell };\n"],"names":["TableHeader","props","_jsx","Text","children","TableHeaderRow","TableHeaderCell"],"mappings":";;;;;;;;;;;;AAMM,IAAAA,WAAW,CAAG,SAAdA,WAAWA,CAAIC,KAAuB,CAAyB,CACnE,OAAOC,GAAA,CAACC,IAAI,CAAAC,CAAAA,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E,EAEM,IAAAC,cAAc,CAAG,SAAjBA,cAAcA,CAAIJ,KAA0B,CAAyB,CACzE,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E,EAEM,IAAAE,eAAe,CAAG,SAAlBA,eAAeA,CAAIL,KAA2B,CAAyB,CAC3E,OAAOC,GAAA,CAACC,IAAI,EAAAC,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E;;;;"}
+{"version":3,"file":"TableHeader.native.js","sources":["../../../../../src/components/Table/TableHeader.native.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport type { TableHeaderCellProps, TableHeaderProps, TableHeaderRowProps } from './types';\nimport { Text } from '~components/Typography';\n\nconst TableHeader = (props: TableHeaderProps): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nconst TableHeaderRow = (props: TableHeaderRowProps): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nconst TableHeaderCell = (props: TableHeaderCellProps): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TableHeader, TableHeaderRow, TableHeaderCell };\n"],"names":["TableHeader","props","_jsx","Text","children","TableHeaderRow","TableHeaderCell"],"mappings":";;;;;;;AAMM,IAAAA,WAAW,CAAG,SAAdA,WAAWA,CAAIC,KAAuB,CAAyB,CACnE,OAAOC,GAAA,CAACC,IAAI,CAAAC,CAAAA,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E,EAEM,IAAAC,cAAc,CAAG,SAAjBA,cAAcA,CAAIJ,KAA0B,CAAyB,CACzE,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E,EAEM,IAAAE,eAAe,CAAG,SAAlBA,eAAeA,CAAIL,KAA2B,CAAyB,CAC3E,OAAOC,GAAA,CAACC,IAAI,EAAAC,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E;;;;"}

package/build/lib/native/components/Table/TablePagination.native.js

@@ -1,14 +1,9 @@
 import 'react';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../Typography/BaseText/BaseText.native.js';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react-native';
-import '../../tokens/global/typography.js';
-import '../../tokens/global/motion.js';
-import '../BladeProvider/useTheme.js';
-import { jsx } from 'react/jsx-runtime';
+import '../Typography/Heading/Heading.js';
 import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
+import { jsx } from 'react/jsx-runtime';
 
 var TablePagination=function TablePagination(props){return jsx(Text,{children:"Table Component is not available for Native mobile apps."});};
 

package/build/lib/native/components/Table/TablePagination.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.native.js","sources":["../../../../../src/components/Table/TablePagination.native.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { Text } from '~components/Typography';\n\ntype TablePaginationProps = unknown;\n\nconst TablePagination = (props: TablePaginationProps): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TablePagination };\n"],"names":["TablePagination","props","_jsx","Text","children"],"mappings":";;;;;;;;;;;;AAOM,IAAAA,eAAe,CAAG,SAAlBA,eAAeA,CAAIC,KAA2B,CAAyB,CAC3E,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E;;;;"}
+{"version":3,"file":"TablePagination.native.js","sources":["../../../../../src/components/Table/TablePagination.native.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { Text } from '~components/Typography';\n\ntype TablePaginationProps = unknown;\n\nconst TablePagination = (props: TablePaginationProps): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TablePagination };\n"],"names":["TablePagination","props","_jsx","Text","children"],"mappings":";;;;;;;AAOM,IAAAA,eAAe,CAAG,SAAlBA,eAAeA,CAAIC,KAA2B,CAAyB,CAC3E,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E;;;;"}

package/build/lib/native/components/Table/TableToolbar.native.js

@@ -1,14 +1,9 @@
 import 'react';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../Typography/BaseText/BaseText.native.js';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react-native';
-import '../../tokens/global/typography.js';
-import '../../tokens/global/motion.js';
-import '../BladeProvider/useTheme.js';
-import { jsx } from 'react/jsx-runtime';
+import '../Typography/Heading/Heading.js';
 import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
+import { jsx } from 'react/jsx-runtime';
 
 var TableToolbar=function TableToolbar(props){return jsx(Text,{children:"Table Component is not available for Native mobile apps."});};var TableToolbarActions=function TableToolbarActions(props){return jsx(Text,{children:"Table Component is not available for Native mobile apps."});};
 

package/build/lib/native/components/Table/TableToolbar.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbar.native.js","sources":["../../../../../src/components/Table/TableToolbar.native.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { Text } from '~components/Typography';\n\nconst TableToolbar = (props: unknown): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nconst TableToolbarActions = (props: unknown): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TableToolbar, TableToolbarActions };\n"],"names":["TableToolbar","props","_jsx","Text","children","TableToolbarActions"],"mappings":";;;;;;;;;;;;AAKM,IAAAA,YAAY,CAAG,SAAfA,YAAYA,CAAIC,KAAc,CAAyB,CAC3D,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E,EAEM,IAAAC,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAIJ,KAAc,CAAyB,CAClE,OAAOC,GAAA,CAACC,IAAI,CAAAC,CAAAA,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E;;;;"}
+{"version":3,"file":"TableToolbar.native.js","sources":["../../../../../src/components/Table/TableToolbar.native.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport { Text } from '~components/Typography';\n\nconst TableToolbar = (props: unknown): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nconst TableToolbarActions = (props: unknown): React.ReactElement => {\n  return <Text>Table Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TableToolbar, TableToolbarActions };\n"],"names":["TableToolbar","props","_jsx","Text","children","TableToolbarActions"],"mappings":";;;;;;;AAKM,IAAAA,YAAY,CAAG,SAAfA,YAAYA,CAAIC,KAAc,CAAyB,CAC3D,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E,EAEM,IAAAC,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAIJ,KAAc,CAAyB,CAClE,OAAOC,GAAA,CAACC,IAAI,CAAAC,CAAAA,QAAA,CAAC,0DAAwD,CAAM,CAAC,CAC9E;;;;"}

package/build/lib/native/components/Table/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../../../src/components/Table/tokens.ts"],"sourcesContent":["import { AlertCircleIcon, CheckIcon } from '~components/Icons';\nimport { size } from '~tokens/global';\n\nconst firstColumnStickyZIndex = 2;\n\nconst refreshWrapperZIndex = 3;\n\nconst checkboxCellWidth = size['44'];\n\nconst tableBackgroundColor = 'surface.background.gray.intense';\nconst tableHeader = {\n  paddingTop: 'spacing.5',\n  paddingBottom: 'spacing.5',\n  paddingLeft: 'spacing.4',\n  paddingRight: 'spacing.4',\n  backgroundColor: 'interactive.background.gray.default',\n  borderBottomAndTopWidth: 'thin',\n  borderBottomAndTopColor: 'surface.border.gray.muted',\n} as const;\n\nconst tableFooter = {\n  paddingTop: 'spacing.5',\n  paddingBottom: 'spacing.5',\n  paddingLeft: 'spacing.4',\n  paddingRight: 'spacing.4',\n  borderBottomAndTopWidth: 'thin',\n  borderBottomAndTopColor: 'surface.border.gray.muted',\n  backgroundColor: 'interactive.background.gray.default',\n} as const;\n\nconst tableRow = {\n  paddingLeft: {\n    compact: 'spacing.4',\n    normal: 'spacing.4',\n    comfortable: 'spacing.4',\n  },\n  paddingRight: {\n    compact: 'spacing.4',\n    normal: 'spacing.4',\n    comfortable: 'spacing.4',\n  },\n  minHeight: {\n    compact: '36',\n    normal: '48',\n    comfortable: '60',\n  },\n  nonStripe: {\n    backgroundColor: 'transparent',\n    backgroundColorHover: 'interactive.background.gray.default',\n    backgroundColorFocus: 'transparent',\n    // TODO: Rebranding - on design side: explore pressed state color change, right now both hover & active are same\n    backgroundColorActive: 'interactive.background.gray.default',\n    backgroundColorSelected: 'interactive.background.primary.faded',\n    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n    backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n  },\n  nonStripeWrapper: {\n    // not used anywhere\n    backgroundColor: 'transparent',\n    backgroundColorHover: 'transparent',\n    backgroundColorFocus: 'transparent',\n    backgroundColorActive: 'interactive.background.gray.default',\n    backgroundColorSelected: 'transparent',\n    backgroundColorSelectedHover: 'transparent',\n    backgroundColorSelectedFocus: 'transparent',\n    backgroundColorSelectedActive: 'transparent',\n  },\n  stripe: {\n    backgroundColor: 'transparent',\n    backgroundColorHover: 'interactive.background.gray.default',\n    backgroundColorFocus: 'transparent',\n    backgroundColorActive: 'interactive.background.gray.default',\n    backgroundColorSelected: 'interactive.background.primary.faded',\n    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n    backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n  },\n  stripeWrapper: {\n    backgroundColor: 'interactive.background.gray.default',\n    backgroundColorHover: 'interactive.background.gray.default',\n    backgroundColorFocus: 'interactive.background.gray.default',\n    backgroundColorActive: 'interactive.background.gray.default',\n    backgroundColorSelected: 'interactive.background.primary.faded',\n    backgroundColorSelectedHover: 'interactive.background.primary.faded',\n    backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n    backgroundColorSelectedActive: 'interactive.background.primary.faded',\n  },\n  borderBottomWidth: 'thin',\n  borderColor: 'surface.border.gray.muted',\n  backgroundColorMotionEasing: 'easing.standard.effective',\n  backgroundColorMotionDuration: 'duration.xquick',\n} as const;\n\nconst tableToolbar = {\n  backgroundColor: 'transparent',\n  backgroundColorSelected: 'interactive.background.primary.faded',\n  backgroundColorMotionEasing: 'easing.standard.effective',\n  backgroundColorMotionDuration: 'duration.xquick',\n} as const;\n\nconst tablePagination = {\n  padding: 'spacing.4',\n  pageSelectionButton: {\n    backgroundColor: 'transparent',\n    backgroundColorHover: 'interactive.background.gray.default',\n    backgroundColorActive: 'interactive.background.gray.highlighted',\n    backgroundColorSelected: 'interactive.background.primary.faded',\n    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n    padding: 'spacing.2',\n    borderRadius: 'small',\n    focusRingColor: 'surface.border.primary.muted',\n    textColor: 'surface.text.gray.subtle',\n    textColorSelected: 'surface.text.primary.normal',\n    height: size['32'],\n    width: size['32'],\n  },\n  defaultPageSize: 10,\n} as const;\n\nconst tableEditableCellRowDensityToInputSizeMap = {\n  compact: 'medium',\n  normal: 'large',\n  comfortable: 'medium',\n} as const;\n\nconst validationStateToInputTrailingIconMap = {\n  none: undefined,\n  success: CheckIcon,\n  error: AlertCircleIcon,\n};\n\nconst rowDensityToIsTableInputCellMapping = {\n  comfortable: false,\n  normal: true,\n  compact: true,\n};\n\nconst classes = {\n  HOVER_ACTIONS: 'hover-actions',\n  HOVER_ACTIONS_LAYER2: 'hover-actions-layer-2',\n  HOVER_ACTIONS_LAYER3: 'hover-actions-layer-3',\n};\n\nexport {\n  tableHeader,\n  tableFooter,\n  tableRow,\n  tableToolbar,\n  tablePagination,\n  refreshWrapperZIndex,\n  tableBackgroundColor,\n  firstColumnStickyZIndex,\n  checkboxCellWidth,\n  tableEditableCellRowDensityToInputSizeMap,\n  validationStateToInputTrailingIconMap,\n  rowDensityToIsTableInputCellMapping,\n  classes,\n};\n"],"names":["tableEditableCellRowDensityToInputSizeMap","compact","normal","comfortable","validationStateToInputTrailingIconMap","none","undefined","success","CheckIcon","error","AlertCircleIcon","rowDensityToIsTableInputCellMapping"],"mappings":";;;;;;;;;;;;;;;;;;AAyHM,IAAAA,yCAAyC,CAAG,CAChDC,OAAO,CAAE,QAAQ,CACjBC,MAAM,CAAE,OAAO,CACfC,WAAW,CAAE,QACf,EAEM,IAAAC,qCAAqC,CAAG,CAC5CC,IAAI,CAAEC,SAAS,CACfC,OAAO,CAAEC,SAAS,CAClBC,KAAK,CAAEC,eACT,EAEM,IAAAC,mCAAmC,CAAG,CAC1CR,WAAW,CAAE,KAAK,CAClBD,MAAM,CAAE,IAAI,CACZD,OAAO,CAAE,IACX;;;;"}
+{"version":3,"file":"tokens.js","sources":["../../../../../src/components/Table/tokens.ts"],"sourcesContent":["import { AlertCircleIcon, CheckIcon } from '~components/Icons';\nimport { size } from '~tokens/global';\n\nconst firstColumnStickyZIndex = 2;\n\nconst refreshWrapperZIndex = 3;\n\nconst checkboxCellWidth = size['44'];\n\nconst tableBackgroundColor = 'surface.background.gray.intense';\nconst tableHeader = {\n  paddingTop: 'spacing.5',\n  paddingBottom: 'spacing.5',\n  paddingLeft: 'spacing.4',\n  paddingRight: 'spacing.4',\n  backgroundColor: 'interactive.background.gray.default',\n  borderBottomAndTopWidth: 'thin',\n  borderBottomAndTopColor: 'surface.border.gray.muted',\n} as const;\n\nconst tableFooter = {\n  paddingTop: 'spacing.5',\n  paddingBottom: 'spacing.5',\n  paddingLeft: 'spacing.4',\n  paddingRight: 'spacing.4',\n  borderBottomAndTopWidth: 'thin',\n  borderBottomAndTopColor: 'surface.border.gray.muted',\n  backgroundColor: 'interactive.background.gray.default',\n} as const;\n\nconst tableRow = {\n  paddingLeft: {\n    compact: 'spacing.4',\n    normal: 'spacing.4',\n    comfortable: 'spacing.4',\n  },\n  paddingRight: {\n    compact: 'spacing.4',\n    normal: 'spacing.4',\n    comfortable: 'spacing.4',\n  },\n  minHeight: {\n    compact: '36',\n    normal: '48',\n    comfortable: '60',\n  },\n  nonStripe: {\n    backgroundColor: 'transparent',\n    backgroundColorHover: 'interactive.background.gray.default',\n    backgroundColorFocus: 'transparent',\n    // TODO: Rebranding - on design side: explore pressed state color change, right now both hover & active are same\n    backgroundColorActive: 'interactive.background.gray.default',\n    backgroundColorSelected: 'interactive.background.primary.faded',\n    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n    backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n  },\n  nonStripeWrapper: {\n    // not used anywhere\n    backgroundColor: 'transparent',\n    backgroundColorHover: 'transparent',\n    backgroundColorFocus: 'transparent',\n    backgroundColorActive: 'interactive.background.gray.default',\n    backgroundColorSelected: 'transparent',\n    backgroundColorSelectedHover: 'transparent',\n    backgroundColorSelectedFocus: 'transparent',\n    backgroundColorSelectedActive: 'transparent',\n  },\n  stripe: {\n    backgroundColor: 'transparent',\n    backgroundColorHover: 'interactive.background.gray.default',\n    backgroundColorFocus: 'transparent',\n    backgroundColorActive: 'interactive.background.gray.default',\n    backgroundColorSelected: 'interactive.background.primary.faded',\n    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n    backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n  },\n  stripeWrapper: {\n    backgroundColor: 'interactive.background.gray.default',\n    backgroundColorHover: 'interactive.background.gray.default',\n    backgroundColorFocus: 'interactive.background.gray.default',\n    backgroundColorActive: 'interactive.background.gray.default',\n    backgroundColorSelected: 'interactive.background.primary.faded',\n    backgroundColorSelectedHover: 'interactive.background.primary.faded',\n    backgroundColorSelectedFocus: 'interactive.background.primary.faded',\n    backgroundColorSelectedActive: 'interactive.background.primary.faded',\n  },\n  borderBottomWidth: 'thin',\n  borderColor: 'surface.border.gray.muted',\n  backgroundColorMotionEasing: 'easing.standard',\n  backgroundColorMotionDuration: 'duration.xquick',\n} as const;\n\nconst tableToolbar = {\n  backgroundColor: 'transparent',\n  backgroundColorSelected: 'interactive.background.primary.faded',\n  backgroundColorMotionEasing: 'easing.standard',\n  backgroundColorMotionDuration: 'duration.xquick',\n} as const;\n\nconst tablePagination = {\n  padding: 'spacing.4',\n  pageSelectionButton: {\n    backgroundColor: 'transparent',\n    backgroundColorHover: 'interactive.background.gray.default',\n    backgroundColorActive: 'interactive.background.gray.highlighted',\n    backgroundColorSelected: 'interactive.background.primary.faded',\n    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',\n    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',\n    padding: 'spacing.2',\n    borderRadius: 'small',\n    focusRingColor: 'surface.border.primary.muted',\n    textColor: 'surface.text.gray.subtle',\n    textColorSelected: 'surface.text.primary.normal',\n    height: size['32'],\n    width: size['32'],\n  },\n  defaultPageSize: 10,\n} as const;\n\nconst tableEditableCellRowDensityToInputSizeMap = {\n  compact: 'medium',\n  normal: 'large',\n  comfortable: 'medium',\n} as const;\n\nconst validationStateToInputTrailingIconMap = {\n  none: undefined,\n  success: CheckIcon,\n  error: AlertCircleIcon,\n};\n\nconst rowDensityToIsTableInputCellMapping = {\n  comfortable: false,\n  normal: true,\n  compact: true,\n};\n\nconst classes = {\n  HOVER_ACTIONS: 'hover-actions',\n  HOVER_ACTIONS_LAYER2: 'hover-actions-layer-2',\n  HOVER_ACTIONS_LAYER3: 'hover-actions-layer-3',\n};\n\nexport {\n  tableHeader,\n  tableFooter,\n  tableRow,\n  tableToolbar,\n  tablePagination,\n  refreshWrapperZIndex,\n  tableBackgroundColor,\n  firstColumnStickyZIndex,\n  checkboxCellWidth,\n  tableEditableCellRowDensityToInputSizeMap,\n  validationStateToInputTrailingIconMap,\n  rowDensityToIsTableInputCellMapping,\n  classes,\n};\n"],"names":["tableEditableCellRowDensityToInputSizeMap","compact","normal","comfortable","validationStateToInputTrailingIconMap","none","undefined","success","CheckIcon","error","AlertCircleIcon","rowDensityToIsTableInputCellMapping"],"mappings":";;;;;;;;;;;;;;;;;;AAyHM,IAAAA,yCAAyC,CAAG,CAChDC,OAAO,CAAE,QAAQ,CACjBC,MAAM,CAAE,OAAO,CACfC,WAAW,CAAE,QACf,EAEM,IAAAC,qCAAqC,CAAG,CAC5CC,IAAI,CAAEC,SAAS,CACfC,OAAO,CAAEC,SAAS,CAClBC,KAAK,CAAEC,eACT,EAEM,IAAAC,mCAAmC,CAAG,CAC1CR,WAAW,CAAE,KAAK,CAClBD,MAAM,CAAE,IAAI,CACZD,OAAO,CAAE,IACX;;;;"}

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

@@ -10,26 +10,24 @@ import { useTabsItemPropRestriction, iconSizeMap } from './utils.js';
 import { TabIndicator } from './TabIndicator.native.js';
 import { SafeSceneMap } from './SafeSceneMap.native.js';
 import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../Typography/BaseText/BaseText.native.js';
-import getIn from '../../utils/lodashButBetter/get.js';
-import '../../tokens/global/typography.js';
-import '../../tokens/global/motion.js';
-import useTheme from '../BladeProvider/useTheme.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import '../Typography/Heading/Heading.js';
 import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
 import { Box } from '../Box/Box.js';
 import 'styled-components/native';
 import '@gorhom/portal';
 import 'react-native-gesture-handler';
+import useTheme from '../BladeProvider/useTheme.js';
 import '../BottomSheet/BottomSheetStack.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useControllableState } from '../../utils/useControllable.js';
 import { Divider } from '../Divider/Divider.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import getIn from '../../utils/lodashButBetter/get.js';
 
-var initialLayout={height:0,width:Dimensions.get('window').width};var getTabs=function getTabs(node){var children=React__default.Children.toArray(node);var tabList=children.find(function(child){return getComponentId(child)==='TabList';});if(!tabList||!React__default.isValidElement(tabList)){throw new Error('TabList is required');}return tabList.props.children;};var getTabPanels=function getTabPanels(node){var children=React__default.Children.toArray(node);return children.filter(function(child){return getComponentId(child)==='TabPanel';}).reduce(function(prev,curr){return Object.assign({},prev,_defineProperty({},curr.props.value,function(){return curr.props.children;}));},{});};var getRoutes=function getRoutes(tabs){return tabs.map(function(TabComponent,index){return {index:index,title:TabComponent.props.children,key:TabComponent.props.value,value:TabComponent.props.value,leading:TabComponent.props.leading,trailing:TabComponent.props.trailing};});};var getRouteIndexFromValue=function getRouteIndexFromValue(_ref){var value=_ref.value,routes=_ref.routes;return routes.findIndex(function(route){return route.value===value;});};var getRouteValueFromIndex=function getRouteValueFromIndex(_ref2){var _routes$find;var index=_ref2.index,routes=_ref2.routes;return (_routes$find=routes.find(function(route){return route.index===index;}))==null?void 0:_routes$find.value;};var Tabs=function Tabs(_ref3){var children=_ref3.children,defaultValue=_ref3.defaultValue,value=_ref3.value,_onChange=_ref3.onChange,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size,_ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'bordered':_ref3$variant,_ref3$isFullWidthTabI=_ref3.isFullWidthTabItem,isFullWidthTabItem=_ref3$isFullWidthTabI===void 0?false:_ref3$isFullWidthTabI,_ref3$isLazy=_ref3.isLazy,isLazy=_ref3$isLazy===void 0?false:_ref3$isLazy;var _useTheme=useTheme(),theme=_useTheme.theme;var tabs=getTabs(children);var panels=getTabPanels(children);var routes=getRoutes(tabs);var isFilled=variant==='filled';var _useControllableState=useControllableState({defaultValue:defaultValue,value:value,onChange:function onChange(value){_onChange==null?void 0:_onChange(value);}}),_useControllableState2=_slicedToArray(_useControllableState,2),selectedValue=_useControllableState2[0],setSelectedValue=_useControllableState2[1];var routeIndex=getRouteIndexFromValue({value:selectedValue,routes:routes});var setIndex=React__default.useCallback(function(index){var skipUpdate=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var value=getRouteValueFromIndex({index:index,routes:routes});setSelectedValue(function(){return value;},skipUpdate);},[routes,setSelectedValue]);var isVertical=false;var contextValue={baseId:'',selectedValue:selectedValue,isVertical:isVertical,size:size,variant:variant,isFullWidthTabItem:isFullWidthTabItem};React__default.useLayoutEffect(function(){if(selectedValue)return;setIndex(0,true);},[selectedValue,setIndex]);var renderTabLabel=React__default.useCallback(function(_ref4){var route=_ref4.route,focused=_ref4.focused;var title=route.title,Leading=route.leading,trailing=route.trailing;var selectedState=focused?'selected':'unselected';var validatedTrailingComponent=useTabsItemPropRestriction(trailing,size);return jsx(StyledTabButton,Object.assign({size:size,variant:variant,isFullWidthTabItem:!isFullWidthTabItem&&!isFilled},metaAttribute({name:MetaConstants.TabItem}),{children:jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",gap:"spacing.3",children:[Leading?jsx(Leading,{size:iconSizeMap[size],color:iconColor[selectedState].default}):null,jsx(Text,{color:textColor[selectedState].default,size:size==='medium'?'medium':'large',weight:"semibold",children:title}),validatedTrailingComponent]})}));},[isFullWidthTabItem,isFilled,size,variant]);var renderTabBar=React__default.useCallback(function(props){return jsx(TabBar,Object.assign({},props,metaAttribute({name:MetaConstants.TabList}),{gap:0,android_ripple:{borderless:true,color:'transparent'},scrollEnabled:!isFullWidthTabItem&&!isFilled,tabStyle:{padding:0,margin:0,minHeight:0},style:Object.assign({},isFilled?{shadowOpacity:0,shadowColor:'transparent',borderRadius:theme.border.radius.small,borderWidth:theme.border.width.thick,borderColor:theme.colors.interactive.border.gray.faded,backgroundColor:theme.colors.surface.background.gray.intense,padding:theme.spacing[2]}:Object.assign({shadowOpacity:0,shadowColor:'transparent',backgroundColor:'transparent'},variant!=='borderless'&&{borderBottomColor:getIn(theme.colors,trackColor),borderBottomWidth:theme.border.width.thin})),renderIndicator:TabIndicator,renderLabel:renderTabLabel,renderBadge:function renderBadge(){if(!isFilled)return null;if(routeIndex===0){return null;}return jsx(Divider,{left:"1px",height:"20px",variant:"normal",orientation:"vertical",top:size==='large'?'6px':'4px'});}}));},[isFullWidthTabItem,isFilled,renderTabLabel]);return jsx(TabsContext.Provider,{value:contextValue,children:jsx(TabView,{navigationState:{index:routeIndex,routes:routes},renderScene:SafeSceneMap(panels),renderTabBar:renderTabBar,onIndexChange:function onIndexChange(idx){setIndex(idx);},initialLayout:initialLayout,lazy:isLazy})});};
+var initialLayout={height:0,width:Dimensions.get('window').width};var getTabs=function getTabs(node){var children=React__default.Children.toArray(node);var tabList=children.find(function(child){return getComponentId(child)==='TabList';});if(!tabList||!React__default.isValidElement(tabList)){throw new Error('TabList is required');}return tabList.props.children;};var getTabPanels=function getTabPanels(node){var children=React__default.Children.toArray(node);return children.filter(function(child){return getComponentId(child)==='TabPanel';}).reduce(function(prev,curr){return Object.assign({},prev,_defineProperty({},curr.props.value,function(){return curr.props.children;}));},{});};var getRoutes=function getRoutes(tabs){return tabs.map(function(TabComponent,index){return {index:index,title:TabComponent.props.children,key:TabComponent.props.value,value:TabComponent.props.value,leading:TabComponent.props.leading,trailing:TabComponent.props.trailing};});};var getRouteIndexFromValue=function getRouteIndexFromValue(_ref){var value=_ref.value,routes=_ref.routes;return routes.findIndex(function(route){return route.value===value;});};var getRouteValueFromIndex=function getRouteValueFromIndex(_ref2){var _routes$find;var index=_ref2.index,routes=_ref2.routes;return (_routes$find=routes.find(function(route){return route.index===index;}))==null?void 0:_routes$find.value;};var _Tabs=function _Tabs(_ref3){var children=_ref3.children,defaultValue=_ref3.defaultValue,value=_ref3.value,_onChange=_ref3.onChange,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size,_ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'bordered':_ref3$variant,_ref3$isFullWidthTabI=_ref3.isFullWidthTabItem,isFullWidthTabItem=_ref3$isFullWidthTabI===void 0?false:_ref3$isFullWidthTabI,_ref3$isLazy=_ref3.isLazy,isLazy=_ref3$isLazy===void 0?false:_ref3$isLazy;var _useTheme=useTheme(),theme=_useTheme.theme;var tabs=getTabs(children);var panels=getTabPanels(children);var routes=getRoutes(tabs);var isFilled=variant==='filled';var _useControllableState=useControllableState({defaultValue:defaultValue,value:value,onChange:function onChange(value){_onChange==null?void 0:_onChange(value);}}),_useControllableState2=_slicedToArray(_useControllableState,2),selectedValue=_useControllableState2[0],setSelectedValue=_useControllableState2[1];var routeIndex=getRouteIndexFromValue({value:selectedValue,routes:routes});var setIndex=React__default.useCallback(function(index){var skipUpdate=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var value=getRouteValueFromIndex({index:index,routes:routes});setSelectedValue(function(){return value;},skipUpdate);},[routes,setSelectedValue]);var isVertical=false;var contextValue={baseId:'',selectedValue:selectedValue,isVertical:isVertical,size:size,variant:variant,isFullWidthTabItem:isFullWidthTabItem};React__default.useLayoutEffect(function(){if(selectedValue)return;setIndex(0,true);},[selectedValue,setIndex]);var renderTabLabel=React__default.useCallback(function(_ref4){var route=_ref4.route,focused=_ref4.focused;var title=route.title,Leading=route.leading,trailing=route.trailing;var selectedState=focused?'selected':'unselected';var validatedTrailingComponent=useTabsItemPropRestriction(trailing,size);return jsx(StyledTabButton,Object.assign({size:size,variant:variant,isFullWidthTabItem:!isFullWidthTabItem&&!isFilled},metaAttribute({name:MetaConstants.TabItem}),{children:jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",gap:"spacing.3",children:[Leading?jsx(Leading,{size:iconSizeMap[size],color:iconColor[selectedState].default}):null,jsx(Text,{color:textColor[selectedState].default,size:size==='medium'?'medium':'large',weight:"semibold",children:title}),validatedTrailingComponent]})}));},[isFullWidthTabItem,isFilled,size,variant]);var renderTabBar=React__default.useCallback(function(props){return jsx(TabBar,Object.assign({},props,metaAttribute({name:MetaConstants.TabList}),{gap:0,android_ripple:{borderless:true,color:'transparent'},scrollEnabled:!isFullWidthTabItem&&!isFilled,tabStyle:{padding:0,margin:0,minHeight:0},style:Object.assign({},isFilled?{shadowOpacity:0,shadowColor:'transparent',borderRadius:theme.border.radius.small,borderWidth:theme.border.width.thick,borderColor:theme.colors.interactive.border.gray.faded,backgroundColor:theme.colors.surface.background.gray.intense,padding:theme.spacing[2]}:Object.assign({shadowOpacity:0,shadowColor:'transparent',backgroundColor:'transparent'},variant!=='borderless'&&{borderBottomColor:getIn(theme.colors,trackColor),borderBottomWidth:theme.border.width.thin})),renderIndicator:TabIndicator,renderLabel:renderTabLabel,renderBadge:function renderBadge(){if(!isFilled)return null;if(routeIndex===0){return null;}return jsx(Divider,{left:"1px",height:"20px",variant:"normal",orientation:"vertical",top:size==='large'?'6px':'4px'});}}));},[isFullWidthTabItem,isFilled,renderTabLabel]);return jsx(TabsContext.Provider,{value:contextValue,children:jsx(TabView,{navigationState:{index:routeIndex,routes:routes},renderScene:SafeSceneMap(panels),renderTabBar:renderTabBar,onIndexChange:function onIndexChange(idx){setIndex(idx);},initialLayout:initialLayout,lazy:isLazy})});};var Tabs=React__default.forwardRef(_Tabs);
 
 export { Tabs };
 //# sourceMappingURL=Tabs.native.js.map

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 { 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    ({\n      route,\n      focused,\n    }: {\n      route: { title: string; leading?: React.ComponentType<any>; trailing?: React.ReactNode };\n      focused: boolean;\n    }) => {\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: any) => (\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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"}
+{"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    ({\n      route,\n      focused,\n    }: {\n      route: { title: string; leading?: React.ComponentType<any>; trailing?: React.ReactNode };\n      focused: boolean;\n    }) => {\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: any) => (\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\nconst Tabs = React.forwardRef(_Tabs);\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","Tabs","forwardRef"],"mappings":"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"}

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

@@ -13,7 +13,7 @@ import 'react-native-gesture-handler';
 import '../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 
-var useAnimatedTag=function useAnimatedTag(onAnimationEndCallback){var maxWidth=useSharedValue(TAG_MAX_WIDTH_START);var opacity=useSharedValue(TAG_OPACITY_START);var _useTheme=useTheme(),theme=_useTheme.theme;var entering=new Keyframe({0:{opacity:TAG_OPACITY_END},100:{opacity:TAG_OPACITY_START,easing:theme.motion.easing.exit.effective}}).duration(makeMotionTime(theme.motion.duration.xquick));var animate=function animate(){maxWidth.value=withTiming(TAG_MAX_WIDTH_END,{duration:makeMotionTime(theme.motion.duration.xquick),easing:castNativeType(theme.motion.easing.exit.effective)},function(isComplete){if(isComplete){runOnJS(onAnimationEndCallback)();}});opacity.value=withTiming(TAG_OPACITY_END,{duration:makeMotionTime(theme.motion.duration.xquick),easing:Easing.out(Easing.exp)});};var animatedStyle=useAnimatedStyle(function(){return {maxWidth:maxWidth.value,opacity:opacity.value};});return {animate:animate,animatedStyle:animatedStyle,entering:entering};};var AnimatedTag=function AnimatedTag(_ref){var children=_ref.children,currentTagIndex=_ref.currentTagIndex,activeTagIndex=_ref.activeTagIndex,onDismiss=_ref.onDismiss,tagsLength=_ref.tagsLength,isDisabled=_ref.isDisabled;var onAnimationEnd=function onAnimationEnd(){onDismiss({tagIndex:currentTagIndex,tagName:children});};var prevSelectionsLength=React__default.useRef();var _useAnimatedTag=useAnimatedTag(onAnimationEnd),animate=_useAnimatedTag.animate,animatedStyle=_useAnimatedTag.animatedStyle,entering=_useAnimatedTag.entering;var isTagRemoved=prevSelectionsLength.current?prevSelectionsLength.current>tagsLength:false;return jsx(Animated.View,{style:animatedStyle,entering:isTagRemoved?undefined:entering,children:jsx(Tag,{_isVirtuallyFocused:currentTagIndex===activeTagIndex,_isTagInsideInput:true,onDismiss:function onDismiss(){animate();},marginRight:"spacing.3",marginY:"spacing.2",isDisabled:isDisabled,children:children})});};
+var useAnimatedTag=function useAnimatedTag(onAnimationEndCallback){var maxWidth=useSharedValue(TAG_MAX_WIDTH_START);var opacity=useSharedValue(TAG_OPACITY_START);var _useTheme=useTheme(),theme=_useTheme.theme;var entering=new Keyframe({0:{opacity:TAG_OPACITY_END},100:{opacity:TAG_OPACITY_START,easing:theme.motion.easing.exit}}).duration(makeMotionTime(theme.motion.duration.xquick));var animate=function animate(){maxWidth.value=withTiming(TAG_MAX_WIDTH_END,{duration:makeMotionTime(theme.motion.duration.xquick),easing:castNativeType(theme.motion.easing.exit)},function(isComplete){if(isComplete){runOnJS(onAnimationEndCallback)();}});opacity.value=withTiming(TAG_OPACITY_END,{duration:makeMotionTime(theme.motion.duration.xquick),easing:Easing.out(Easing.exp)});};var animatedStyle=useAnimatedStyle(function(){return {maxWidth:maxWidth.value,opacity:opacity.value};});return {animate:animate,animatedStyle:animatedStyle,entering:entering};};var AnimatedTag=function AnimatedTag(_ref){var children=_ref.children,currentTagIndex=_ref.currentTagIndex,activeTagIndex=_ref.activeTagIndex,onDismiss=_ref.onDismiss,tagsLength=_ref.tagsLength,isDisabled=_ref.isDisabled;var onAnimationEnd=function onAnimationEnd(){onDismiss({tagIndex:currentTagIndex,tagName:children});};var prevSelectionsLength=React__default.useRef();var _useAnimatedTag=useAnimatedTag(onAnimationEnd),animate=_useAnimatedTag.animate,animatedStyle=_useAnimatedTag.animatedStyle,entering=_useAnimatedTag.entering;var isTagRemoved=prevSelectionsLength.current?prevSelectionsLength.current>tagsLength:false;return jsx(Animated.View,{style:animatedStyle,entering:isTagRemoved?undefined:entering,children:jsx(Tag,{_isVirtuallyFocused:currentTagIndex===activeTagIndex,_isTagInsideInput:true,onDismiss:function onDismiss(){animate();},marginRight:"spacing.3",marginY:"spacing.2",isDisabled:isDisabled,children:children})});};
 
 export { AnimatedTag };
 //# sourceMappingURL=AnimatedTag.native.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedTag.native.js","sources":["../../../../../src/components/Tag/AnimatedTag.native.tsx"],"sourcesContent":["import React from 'react';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, {\n  Easing,\n  useSharedValue,\n  withTiming,\n  useAnimatedStyle,\n  runOnJS,\n  Keyframe,\n} from 'react-native-reanimated';\nimport type { ReanimatedKeyframe } from 'react-native-reanimated/lib/typescript/reanimated2/layoutReanimation/animationBuilder/Keyframe';\nimport { Tag } from './Tag';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport type { AnimatedTagProps } from './types';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\n\nconst useAnimatedTag = (\n  onAnimationEndCallback: () => void,\n): {\n  entering: ReanimatedKeyframe;\n  animate: () => void;\n  animatedStyle: {\n    maxWidth: `${number}%`;\n    opacity: number;\n  };\n} => {\n  const maxWidth = useSharedValue(TAG_MAX_WIDTH_START); // Initial max-width value\n  const opacity = useSharedValue(TAG_OPACITY_START); // Initial opacity value\n  const { theme } = useTheme();\n\n  const entering = new Keyframe({\n    0: {\n      opacity: TAG_OPACITY_END,\n    },\n    100: {\n      opacity: TAG_OPACITY_START,\n      easing: (theme.motion.easing.exit.effective as unknown) as EasingFn,\n    },\n  }).duration(makeMotionTime(theme.motion.duration.xquick));\n\n  const animate = (): void => {\n    maxWidth.value = withTiming(\n      TAG_MAX_WIDTH_END,\n      {\n        duration: makeMotionTime(theme.motion.duration.xquick),\n        easing: castNativeType(theme.motion.easing.exit.effective),\n      },\n      (isComplete) => {\n        if (isComplete) {\n          runOnJS(onAnimationEndCallback)();\n        }\n      },\n    );\n    opacity.value = withTiming(TAG_OPACITY_END, {\n      duration: makeMotionTime(theme.motion.duration.xquick),\n      easing: Easing.out(Easing.exp),\n    });\n  };\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      maxWidth: maxWidth.value,\n      opacity: opacity.value,\n    };\n  });\n\n  return { animate, animatedStyle, entering };\n};\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  activeTagIndex,\n  onDismiss,\n  tagsLength,\n  isDisabled,\n}: AnimatedTagProps): React.ReactElement => {\n  const onAnimationEnd = (): void => {\n    onDismiss({ tagIndex: currentTagIndex, tagName: children });\n  };\n\n  const prevSelectionsLength = React.useRef<number>();\n  const { animate, animatedStyle, entering } = useAnimatedTag(onAnimationEnd);\n\n  const isTagRemoved = prevSelectionsLength.current\n    ? prevSelectionsLength.current > tagsLength\n    : false;\n\n  return (\n    <Animated.View style={animatedStyle} entering={isTagRemoved ? undefined : entering}>\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          animate();\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n      >\n        {children}\n      </Tag>\n    </Animated.View>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["useAnimatedTag","onAnimationEndCallback","maxWidth","useSharedValue","TAG_MAX_WIDTH_START","opacity","TAG_OPACITY_START","_useTheme","useTheme","theme","entering","Keyframe","TAG_OPACITY_END","easing","motion","exit","effective","duration","makeMotionTime","xquick","animate","value","withTiming","TAG_MAX_WIDTH_END","castNativeType","isComplete","runOnJS","Easing","out","exp","animatedStyle","useAnimatedStyle","AnimatedTag","_ref","children","currentTagIndex","activeTagIndex","onDismiss","tagsLength","isDisabled","onAnimationEnd","tagIndex","tagName","prevSelectionsLength","React","useRef","_useAnimatedTag","isTagRemoved","current","_jsx","Animated","View","style","undefined","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}
+{"version":3,"file":"AnimatedTag.native.js","sources":["../../../../../src/components/Tag/AnimatedTag.native.tsx"],"sourcesContent":["import React from 'react';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, {\n  Easing,\n  useSharedValue,\n  withTiming,\n  useAnimatedStyle,\n  runOnJS,\n  Keyframe,\n} from 'react-native-reanimated';\nimport type { ReanimatedKeyframe } from 'react-native-reanimated/lib/typescript/reanimated2/layoutReanimation/animationBuilder/Keyframe';\nimport { Tag } from './Tag';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport type { AnimatedTagProps } from './types';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\n\nconst useAnimatedTag = (\n  onAnimationEndCallback: () => void,\n): {\n  entering: ReanimatedKeyframe;\n  animate: () => void;\n  animatedStyle: {\n    maxWidth: `${number}%`;\n    opacity: number;\n  };\n} => {\n  const maxWidth = useSharedValue(TAG_MAX_WIDTH_START); // Initial max-width value\n  const opacity = useSharedValue(TAG_OPACITY_START); // Initial opacity value\n  const { theme } = useTheme();\n\n  const entering = new Keyframe({\n    0: {\n      opacity: TAG_OPACITY_END,\n    },\n    100: {\n      opacity: TAG_OPACITY_START,\n      easing: (theme.motion.easing.exit as unknown) as EasingFn,\n    },\n  }).duration(makeMotionTime(theme.motion.duration.xquick));\n\n  const animate = (): void => {\n    maxWidth.value = withTiming(\n      TAG_MAX_WIDTH_END,\n      {\n        duration: makeMotionTime(theme.motion.duration.xquick),\n        easing: castNativeType(theme.motion.easing.exit),\n      },\n      (isComplete) => {\n        if (isComplete) {\n          runOnJS(onAnimationEndCallback)();\n        }\n      },\n    );\n    opacity.value = withTiming(TAG_OPACITY_END, {\n      duration: makeMotionTime(theme.motion.duration.xquick),\n      easing: Easing.out(Easing.exp),\n    });\n  };\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      maxWidth: maxWidth.value,\n      opacity: opacity.value,\n    };\n  });\n\n  return { animate, animatedStyle, entering };\n};\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  activeTagIndex,\n  onDismiss,\n  tagsLength,\n  isDisabled,\n}: AnimatedTagProps): React.ReactElement => {\n  const onAnimationEnd = (): void => {\n    onDismiss({ tagIndex: currentTagIndex, tagName: children });\n  };\n\n  const prevSelectionsLength = React.useRef<number>();\n  const { animate, animatedStyle, entering } = useAnimatedTag(onAnimationEnd);\n\n  const isTagRemoved = prevSelectionsLength.current\n    ? prevSelectionsLength.current > tagsLength\n    : false;\n\n  return (\n    <Animated.View style={animatedStyle} entering={isTagRemoved ? undefined : entering}>\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          animate();\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n      >\n        {children}\n      </Tag>\n    </Animated.View>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["useAnimatedTag","onAnimationEndCallback","maxWidth","useSharedValue","TAG_MAX_WIDTH_START","opacity","TAG_OPACITY_START","_useTheme","useTheme","theme","entering","Keyframe","TAG_OPACITY_END","easing","motion","exit","duration","makeMotionTime","xquick","animate","value","withTiming","TAG_MAX_WIDTH_END","castNativeType","isComplete","runOnJS","Easing","out","exp","animatedStyle","useAnimatedStyle","AnimatedTag","_ref","children","currentTagIndex","activeTagIndex","onDismiss","tagsLength","isDisabled","onAnimationEnd","tagIndex","tagName","prevSelectionsLength","React","useRef","_useAnimatedTag","isTagRemoved","current","_jsx","Animated","View","style","undefined","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}

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

@@ -21,14 +21,15 @@ import '@gorhom/portal';
 import 'react-native-gesture-handler';
 import '../BottomSheet/BottomSheetStack.js';
 import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
-import '../Typography/BaseText/BaseText.native.js';
+import '../Typography/Heading/Heading.js';
 import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded=["size","icon","onDismiss","children","isDisabled","testID","_isVirtuallyFocused","_isTagInsideInput"];var FocussableTag=styled(BaseBox)(function(props){if(props._isVirtuallyFocused&&!isReactNative()){return {outline:`${makeSize(size['1'])} solid ${props.theme.colors.surface.background.gray.subtle}`,boxShadow:`0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`};}return {};});var Tag=function Tag(_ref){var _ref$size=_ref.size,size=_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,rest=_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==='large'){return 'medium';}return 'small';},[isMobile,size]);return jsx(BaseBox,Object.assign({display:isReactNative()?'flex':'inline-flex'},getStyledProps(rest),metaAttribute({name:MetaConstants.Tag,testID:testID}),makeAnalyticsAttribute(rest),{children:jsxs(FocussableTag,{display:isReactNative()?'flex':'inline-flex',alignSelf:isReactNative()?'center':undefined,flexDirection:"row",flexWrap:"nowrap",flexShrink:0,backgroundColor:backgroundColor,borderRadius:"max",padding:size==='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",children:jsx(Text,{textAlign:"center",truncateAfterLines:1,marginRight:"spacing.2",color:textColor,size:"small",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,ref){var _ref$size=_ref.size,size=_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,rest=_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==='large'){return 'medium';}return 'small';},[isMobile,size]);return jsx(BaseBox,Object.assign({ref:ref,display:isReactNative()?'flex':'inline-flex'},getStyledProps(rest),metaAttribute({name:MetaConstants.Tag,testID:testID}),makeAnalyticsAttribute(rest),{children:jsxs(FocussableTag,{display:isReactNative()?'flex':'inline-flex',alignSelf:isReactNative()?'center':undefined,flexDirection:"row",flexWrap:"nowrap",flexShrink:0,backgroundColor:backgroundColor,borderRadius:"max",padding:size==='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",children:jsx(Text,{textAlign:"center",truncateAfterLines:1,marginRight:"spacing.2",color:textColor,size:"small",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 Tag=React__default.forwardRef(_Tag);
 
 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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  ...rest\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(rest)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\">\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\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","rest","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","Object","assign","display","getStyledProps","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","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';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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\nconst _Tag = (\n  {\n    size = 'medium',\n    icon: Icon,\n    onDismiss,\n    children,\n    isDisabled,\n    testID,\n    _isVirtuallyFocused,\n    _isTagInsideInput,\n    ...rest\n  }: TagProps,\n  ref: React.Ref<BladeElementRef>,\n): 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      ref={ref as never}\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(rest)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\">\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\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\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 = React.forwardRef(_Tag);\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","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","rest","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","Object","assign","display","getStyledProps","metaAttribute","name","MetaConstants","Tag","makeAnalyticsAttribute","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation","forwardRef"],"mappings":"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"}

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

@@ -1,18 +1,18 @@
 import React__default from 'react';
 import { TooltipContentWrapper } from './TooltipContentWrapper.native.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../Typography/BaseText/BaseText.native.js';
-import '@babel/runtime/helpers/slicedToArray';
+import '../Typography/Heading/Heading.js';
+import { Text } from '../Typography/Text/Text.js';
+import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
 import 'react-native';
-import '../../tokens/global/typography.js';
-import '../../tokens/global/motion.js';
-import { size } from '../../tokens/global/size.js';
+import '@babel/runtime/helpers/slicedToArray';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import '../BladeProvider/useTheme.js';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import { size } from '../../tokens/global/size.js';
 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,{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]});});
 

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

@@ -17,7 +17,7 @@ import '../../tokens/global/typography.js';
 import '../../tokens/global/motion.js';
 import { size } from '../../tokens/global/size.js';
 
-var _excluded=["children","styles","side","isVisible"];var StyledTooltipContentWrapper=styled(BaseBox)(function(_ref){var theme=_ref.theme,styles=_ref.styles;return getTooltipContentWrapperStyles({theme:theme,styles:styles});});var TooltipContentWrapper=React__default.forwardRef(function(_ref2,ref){var children=_ref2.children,styles=_ref2.styles,side=_ref2.side,isVisible=_ref2.isVisible,props=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var isOppositeAxis=side==='right'||side==='bottom';var isHorizontal=side==='left'||side==='right';var offset=isOppositeAxis?-size[4]:size[4];var translate=useSharedValue(offset);var opacity=useSharedValue(0);var easing=theme.motion.easing.entrance.effective;var duration=theme.motion.duration.quick;React__default.useEffect(function(){var timings={easing:easing,duration:duration};opacity.value=withDelay(duration,withTiming(isVisible?1:0,timings));translate.value=withDelay(duration,withTiming(isVisible?0:offset,timings));},[isVisible]);var animatedStyles=useAnimatedStyle(function(){var transform=isHorizontal?'translateX':'translateY';return {opacity:opacity.value,transform:[_defineProperty({},transform,translate.value)]};},[isVisible]);return jsx(Animated.View,{style:animatedStyles,children:jsx(StyledTooltipContentWrapper,Object.assign({styles:styles,style:castNativeType(theme.elevation.lowRaised),elevation:20,ref:ref,collapse:false},props,{children:children}))});});
+var _excluded=["children","styles","side","isVisible"];var StyledTooltipContentWrapper=styled(BaseBox)(function(_ref){var theme=_ref.theme,styles=_ref.styles;return getTooltipContentWrapperStyles({theme:theme,styles:styles});});var TooltipContentWrapper=React__default.forwardRef(function(_ref2,ref){var children=_ref2.children,styles=_ref2.styles,side=_ref2.side,isVisible=_ref2.isVisible,props=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var isOppositeAxis=side==='right'||side==='bottom';var isHorizontal=side==='left'||side==='right';var offset=isOppositeAxis?-size[4]:size[4];var translate=useSharedValue(offset);var opacity=useSharedValue(0);var easing=theme.motion.easing.entrance;var duration=theme.motion.duration.quick;React__default.useEffect(function(){var timings={easing:easing,duration:duration};opacity.value=withDelay(duration,withTiming(isVisible?1:0,timings));translate.value=withDelay(duration,withTiming(isVisible?0:offset,timings));},[isVisible]);var animatedStyles=useAnimatedStyle(function(){var transform=isHorizontal?'translateX':'translateY';return {opacity:opacity.value,transform:[_defineProperty({},transform,translate.value)]};},[isVisible]);return jsx(Animated.View,{style:animatedStyles,children:jsx(StyledTooltipContentWrapper,Object.assign({styles:styles,style:castNativeType(theme.elevation.lowRaised),elevation:20,ref:ref,collapse:false},props,{children:children}))});});
 
 export { TooltipContentWrapper };
 //# sourceMappingURL=TooltipContentWrapper.native.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContentWrapper.native.js","sources":["../../../../../src/components/Tooltip/TooltipContentWrapper.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components/native';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated';\nimport React from 'react';\nimport type { View } from 'react-native';\nimport { getTooltipContentWrapperStyles } from './getTooltipContentWrapperStyles';\nimport type { TooltipContentWrapperProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\nimport { castNativeType } from '~utils';\n\nconst StyledTooltipContentWrapper = styled(BaseBox)<{ collapse?: boolean; styles: CSSProperties }>(\n  ({ theme, styles }) => {\n    return getTooltipContentWrapperStyles({ theme, styles });\n  },\n);\n\nconst TooltipContentWrapper = React.forwardRef<View, TooltipContentWrapperProps>(\n  ({ children, styles, side, isVisible, ...props }, ref) => {\n    const { theme } = useTheme();\n\n    const isOppositeAxis = side === 'right' || side === 'bottom';\n    const isHorizontal = side === 'left' || side === 'right';\n    const offset = isOppositeAxis ? -size[4] : size[4];\n\n    const translate = useSharedValue(offset);\n    const opacity = useSharedValue(0);\n\n    const easing = (theme.motion.easing.entrance.effective as unknown) as EasingFn;\n    const duration = theme.motion.duration.quick;\n\n    React.useEffect(() => {\n      const timings = { easing, duration };\n      opacity.value = withDelay(duration, withTiming(isVisible ? 1 : 0, timings));\n      translate.value = withDelay(duration, withTiming(isVisible ? 0 : offset, timings));\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isVisible]);\n\n    // @ts-expect-error types aren't liking the dynamic object prop `[transform]`\n    const animatedStyles = useAnimatedStyle(() => {\n      const transform = isHorizontal ? 'translateX' : 'translateY';\n      return {\n        opacity: opacity.value,\n        transform: [{ [transform]: translate.value }],\n      };\n    }, [isVisible]);\n\n    return (\n      <Animated.View style={animatedStyles}>\n        <StyledTooltipContentWrapper\n          styles={styles}\n          // Shadow styles need to be passed directly through native style prop\n          // Cannot be done via styled components\n          style={castNativeType(theme.elevation.lowRaised)}\n          elevation={20}\n          ref={ref as never}\n          collapse={false}\n          // if I don't assert this TS throws error\n          // I think because of the intersection type in TooltipContentWrapperProps\n          {...(props as any)}\n        >\n          {children}\n        </StyledTooltipContentWrapper>\n      </Animated.View>\n    );\n  },\n);\n\nexport { TooltipContentWrapper };\n"],"names":["StyledTooltipContentWrapper","styled","BaseBox","_ref","theme","styles","getTooltipContentWrapperStyles","TooltipContentWrapper","React","forwardRef","_ref2","ref","children","side","isVisible","props","_objectWithoutProperties","_excluded","_useTheme","useTheme","isOppositeAxis","isHorizontal","offset","size","translate","useSharedValue","opacity","easing","motion","entrance","effective","duration","quick","useEffect","timings","value","withDelay","withTiming","animatedStyles","useAnimatedStyle","transform","_defineProperty","_jsx","Animated","View","style","Object","assign","castNativeType","elevation","lowRaised","collapse"],"mappings":"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"}
+{"version":3,"file":"TooltipContentWrapper.native.js","sources":["../../../../../src/components/Tooltip/TooltipContentWrapper.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components/native';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated';\nimport React from 'react';\nimport type { View } from 'react-native';\nimport { getTooltipContentWrapperStyles } from './getTooltipContentWrapperStyles';\nimport type { TooltipContentWrapperProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\nimport { castNativeType } from '~utils';\n\nconst StyledTooltipContentWrapper = styled(BaseBox)<{ collapse?: boolean; styles: CSSProperties }>(\n  ({ theme, styles }) => {\n    return getTooltipContentWrapperStyles({ theme, styles });\n  },\n);\n\nconst TooltipContentWrapper = React.forwardRef<View, TooltipContentWrapperProps>(\n  ({ children, styles, side, isVisible, ...props }, ref) => {\n    const { theme } = useTheme();\n\n    const isOppositeAxis = side === 'right' || side === 'bottom';\n    const isHorizontal = side === 'left' || side === 'right';\n    const offset = isOppositeAxis ? -size[4] : size[4];\n\n    const translate = useSharedValue(offset);\n    const opacity = useSharedValue(0);\n\n    const easing = (theme.motion.easing.entrance as unknown) as EasingFn;\n    const duration = theme.motion.duration.quick;\n\n    React.useEffect(() => {\n      const timings = { easing, duration };\n      opacity.value = withDelay(duration, withTiming(isVisible ? 1 : 0, timings));\n      translate.value = withDelay(duration, withTiming(isVisible ? 0 : offset, timings));\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isVisible]);\n\n    // @ts-expect-error types aren't liking the dynamic object prop `[transform]`\n    const animatedStyles = useAnimatedStyle(() => {\n      const transform = isHorizontal ? 'translateX' : 'translateY';\n      return {\n        opacity: opacity.value,\n        transform: [{ [transform]: translate.value }],\n      };\n    }, [isVisible]);\n\n    return (\n      <Animated.View style={animatedStyles}>\n        <StyledTooltipContentWrapper\n          styles={styles}\n          // Shadow styles need to be passed directly through native style prop\n          // Cannot be done via styled components\n          style={castNativeType(theme.elevation.lowRaised)}\n          elevation={20}\n          ref={ref as never}\n          collapse={false}\n          // if I don't assert this TS throws error\n          // I think because of the intersection type in TooltipContentWrapperProps\n          {...(props as any)}\n        >\n          {children}\n        </StyledTooltipContentWrapper>\n      </Animated.View>\n    );\n  },\n);\n\nexport { TooltipContentWrapper };\n"],"names":["StyledTooltipContentWrapper","styled","BaseBox","_ref","theme","styles","getTooltipContentWrapperStyles","TooltipContentWrapper","React","forwardRef","_ref2","ref","children","side","isVisible","props","_objectWithoutProperties","_excluded","_useTheme","useTheme","isOppositeAxis","isHorizontal","offset","size","translate","useSharedValue","opacity","easing","motion","entrance","duration","quick","useEffect","timings","value","withDelay","withTiming","animatedStyles","useAnimatedStyle","transform","_defineProperty","_jsx","Animated","View","style","Object","assign","castNativeType","elevation","lowRaised","collapse"],"mappings":";;;;;;;;;;;;;;;;;;;uDAoBA,IAAMA,2BAA2B,CAAGC,MAAM,CAACC,OAAO,CAAC,CACjD,SAAAC,IAAA,CAAuB,CAApB,IAAAC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAEC,MAAM,CAAAF,IAAA,CAANE,MAAM,CACd,OAAOC,8BAA8B,CAAC,CAAEF,KAAK,CAALA,KAAK,CAAEC,MAAM,CAANA,MAAO,CAAC,CAAC,CAC1D,CACF,CAAC,CAEK,IAAAE,qBAAqB,CAAGC,cAAK,CAACC,UAAU,CAC5C,SAAAC,KAAA,CAAkDC,GAAG,CAAK,CAAA,IAAvDC,QAAQ,CAAAF,KAAA,CAARE,QAAQ,CAAEP,MAAM,CAAAK,KAAA,CAANL,MAAM,CAAEQ,IAAI,CAAAH,KAAA,CAAJG,IAAI,CAAEC,SAAS,CAAAJ,KAAA,CAATI,SAAS,CAAKC,KAAK,CAAAC,wBAAA,CAAAN,KAAA,CAAAO,SAAA,CAAA,CAC5C,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBf,KAAK,CAAAc,SAAA,CAALd,KAAK,CAEb,IAAMgB,cAAc,CAAGP,IAAI,GAAK,OAAO,EAAIA,IAAI,GAAK,QAAQ,CAC5D,IAAMQ,YAAY,CAAGR,IAAI,GAAK,MAAM,EAAIA,IAAI,GAAK,OAAO,CACxD,IAAMS,MAAM,CAAGF,cAAc,CAAG,CAACG,IAAI,CAAC,CAAC,CAAC,CAAGA,IAAI,CAAC,CAAC,CAAC,CAElD,IAAMC,SAAS,CAAGC,cAAc,CAACH,MAAM,CAAC,CACxC,IAAMI,OAAO,CAAGD,cAAc,CAAC,CAAC,CAAC,CAEjC,IAAME,MAAM,CAAIvB,KAAK,CAACwB,MAAM,CAACD,MAAM,CAACE,QAAgC,CACpE,IAAMC,QAAQ,CAAG1B,KAAK,CAACwB,MAAM,CAACE,QAAQ,CAACC,KAAK,CAE5CvB,cAAK,CAACwB,SAAS,CAAC,UAAM,CACpB,IAAMC,OAAO,CAAG,CAAEN,MAAM,CAANA,MAAM,CAAEG,QAAQ,CAARA,QAAS,CAAC,CACpCJ,OAAO,CAACQ,KAAK,CAAGC,SAAS,CAACL,QAAQ,CAAEM,UAAU,CAACtB,SAAS,CAAG,CAAC,CAAG,CAAC,CAAEmB,OAAO,CAAC,CAAC,CAC3ET,SAAS,CAACU,KAAK,CAAGC,SAAS,CAACL,QAAQ,CAAEM,UAAU,CAACtB,SAAS,CAAG,CAAC,CAAGQ,MAAM,CAAEW,OAAO,CAAC,CAAC,CAEpF,CAAC,CAAE,CAACnB,SAAS,CAAC,CAAC,CAGf,IAAMuB,cAAc,CAAGC,gBAAgB,CAAC,UAAM,CAC5C,IAAMC,SAAS,CAAGlB,YAAY,CAAG,YAAY,CAAG,YAAY,CAC5D,OAAO,CACLK,OAAO,CAAEA,OAAO,CAACQ,KAAK,CACtBK,SAAS,CAAE,CAAAC,eAAA,CAAA,EAAA,CAAID,SAAS,CAAGf,SAAS,CAACU,KAAK,EAC5C,CAAC,CACH,CAAC,CAAE,CAACpB,SAAS,CAAC,CAAC,CAEf,OACE2B,GAAA,CAACC,QAAQ,CAACC,IAAI,CAACC,CAAAA,KAAK,CAAEP,cAAe,CAAAzB,QAAA,CACnC6B,GAAA,CAACzC,2BAA2B,CAAA6C,MAAA,CAAAC,MAAA,CAAA,CAC1BzC,MAAM,CAAEA,MAAO,CAGfuC,KAAK,CAAEG,cAAc,CAAC3C,KAAK,CAAC4C,SAAS,CAACC,SAAS,CAAE,CACjDD,SAAS,CAAE,EAAG,CACdrC,GAAG,CAAEA,GAAa,CAClBuC,QAAQ,CAAE,KAAM,CAGXnC,CAAAA,KAAK,CAAAH,CAAAA,QAAA,CAETA,QAAQ,CAAA,CACkB,CAAC,CACjB,CAAC,CAEpB,CACF;;;;"}

package/build/lib/native/components/TopNav/TabNav/TabNav.native.js

@@ -1,15 +1,9 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../Typography/BaseText/BaseText.native.js';
-import 'react';
-import { throwBladeError } from '../../../utils/logger/logger.js';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react-native';
-import '../../../tokens/global/typography.js';
-import '../../../tokens/global/motion.js';
-import '../../BladeProvider/useTheme.js';
-import { jsx } from 'react/jsx-runtime';
+import '../../Typography/Heading/Heading.js';
 import { Text } from '../../Typography/Text/Text.js';
 import '../../Typography/Code/Code.js';
+import '../../Typography/Display/Display.js';
+import { throwBladeError } from '../../../utils/logger/logger.js';
+import { jsx } from 'react/jsx-runtime';
 
 var TabNav=function TabNav(_props){throwBladeError({message:'TabNav is not yet implemented for native',moduleName:'TabNav'});return jsx(Text,{children:"TabNav Component is not available for Native mobile apps."});};
 

package/build/lib/native/components/TopNav/TabNav/TabNav.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNav.native.js","sources":["../../../../../../src/components/TopNav/TabNav/TabNav.native.tsx"],"sourcesContent":["import { Text } from '~components/Typography';\nimport { throwBladeError } from '~utils/logger';\n\nconst TabNav = (_props: never): React.ReactElement => {\n  throwBladeError({\n    message: 'TabNav is not yet implemented for native',\n    moduleName: 'TabNav',\n  });\n\n  return <Text>TabNav Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TabNav };\n"],"names":["TabNav","_props","throwBladeError","message","moduleName","_jsx","Text","children"],"mappings":";;;;;;;;;;;;;AAGM,IAAAA,MAAM,CAAG,SAATA,MAAMA,CAAIC,MAAa,CAAyB,CACpDC,eAAe,CAAC,CACdC,OAAO,CAAE,0CAA0C,CACnDC,UAAU,CAAE,QACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,2DAAyD,CAAM,CAAC,CAC/E;;;;"}
+{"version":3,"file":"TabNav.native.js","sources":["../../../../../../src/components/TopNav/TabNav/TabNav.native.tsx"],"sourcesContent":["import { Text } from '~components/Typography';\nimport { throwBladeError } from '~utils/logger';\n\nconst TabNav = (_props: never): React.ReactElement => {\n  throwBladeError({\n    message: 'TabNav is not yet implemented for native',\n    moduleName: 'TabNav',\n  });\n\n  return <Text>TabNav Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TabNav };\n"],"names":["TabNav","_props","throwBladeError","message","moduleName","_jsx","Text","children"],"mappings":";;;;;;;AAGM,IAAAA,MAAM,CAAG,SAATA,MAAMA,CAAIC,MAAa,CAAyB,CACpDC,eAAe,CAAC,CACdC,OAAO,CAAE,0CAA0C,CACnDC,UAAU,CAAE,QACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,2DAAyD,CAAM,CAAC,CAC/E;;;;"}

package/build/lib/native/components/TopNav/TabNav/TabNavItem.native.js

@@ -1,15 +1,9 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../Typography/BaseText/BaseText.native.js';
-import 'react';
-import { throwBladeError } from '../../../utils/logger/logger.js';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react-native';
-import '../../../tokens/global/typography.js';
-import '../../../tokens/global/motion.js';
-import '../../BladeProvider/useTheme.js';
-import { jsx } from 'react/jsx-runtime';
+import '../../Typography/Heading/Heading.js';
 import { Text } from '../../Typography/Text/Text.js';
 import '../../Typography/Code/Code.js';
+import '../../Typography/Display/Display.js';
+import { throwBladeError } from '../../../utils/logger/logger.js';
+import { jsx } from 'react/jsx-runtime';
 
 var TabNavItem=function TabNavItem(_props){throwBladeError({message:'TabNavItem is not yet implemented for native',moduleName:'TabNavItem'});return jsx(Text,{children:"TabNavItem Component is not available for Native mobile apps."});};
 

package/build/lib/native/components/TopNav/TabNav/TabNavItem.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNavItem.native.js","sources":["../../../../../../src/components/TopNav/TabNav/TabNavItem.native.tsx"],"sourcesContent":["import { Text } from '~components/Typography';\nimport { throwBladeError } from '~utils/logger';\n\nconst TabNavItem = (_props: never): React.ReactElement => {\n  throwBladeError({\n    message: 'TabNavItem is not yet implemented for native',\n    moduleName: 'TabNavItem',\n  });\n\n  return <Text>TabNavItem Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TabNavItem };\n"],"names":["TabNavItem","_props","throwBladeError","message","moduleName","_jsx","Text","children"],"mappings":";;;;;;;;;;;;;AAGM,IAAAA,UAAU,CAAG,SAAbA,UAAUA,CAAIC,MAAa,CAAyB,CACxDC,eAAe,CAAC,CACdC,OAAO,CAAE,8CAA8C,CACvDC,UAAU,CAAE,YACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,+DAA6D,CAAM,CAAC,CACnF;;;;"}
+{"version":3,"file":"TabNavItem.native.js","sources":["../../../../../../src/components/TopNav/TabNav/TabNavItem.native.tsx"],"sourcesContent":["import { Text } from '~components/Typography';\nimport { throwBladeError } from '~utils/logger';\n\nconst TabNavItem = (_props: never): React.ReactElement => {\n  throwBladeError({\n    message: 'TabNavItem is not yet implemented for native',\n    moduleName: 'TabNavItem',\n  });\n\n  return <Text>TabNavItem Component is not available for Native mobile apps.</Text>;\n};\n\nexport { TabNavItem };\n"],"names":["TabNavItem","_props","throwBladeError","message","moduleName","_jsx","Text","children"],"mappings":";;;;;;;AAGM,IAAAA,UAAU,CAAG,SAAbA,UAAUA,CAAIC,MAAa,CAAyB,CACxDC,eAAe,CAAC,CACdC,OAAO,CAAE,8CAA8C,CACvDC,UAAU,CAAE,YACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,+DAA6D,CAAM,CAAC,CACnF;;;;"}

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

@@ -1,15 +1,9 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../Typography/BaseText/BaseText.native.js';
-import 'react';
-import { throwBladeError } from '../../utils/logger/logger.js';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react-native';
-import '../../tokens/global/typography.js';
-import '../../tokens/global/motion.js';
-import '../BladeProvider/useTheme.js';
-import { jsx } from 'react/jsx-runtime';
+import '../Typography/Heading/Heading.js';
 import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
+import { jsx } from 'react/jsx-runtime';
 
 var TopNav=function TopNav(_props){throwBladeError({message:'TopNav is not yet implemented for native',moduleName:'TopNav'});return jsx(Text,{children:"TopNav Component is not available for Native mobile apps."});};