@razorpay/blade 11.31.2 → 11.33.0

package/build/lib/native/components/Button/IconButton/IconButton.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import StyledIconButton from './StyledIconButton.native.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _IconButton=function _IconButton(_ref,ref){var icon=_ref.icon,onClick=_ref.onClick,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'intense':_ref$emphasis,accessibilityLabel=_ref.accessibilityLabel,isDisabled=_ref.isDisabled,onBlur=_ref.onBlur,onFocus=_ref.onFocus,onMouseLeave=_ref.onMouseLeave,onMouseMove=_ref.onMouseMove,onPointerDown=_ref.onPointerDown,onPointerEnter=_ref.onPointerEnter,onTouchEnd=_ref.onTouchEnd,onTouchStart=_ref.onTouchStart,_tabIndex=_ref._tabIndex;return jsx(StyledIconButton,{ref:ref,onClick:onClick,emphasis:emphasis,size:size,icon:icon,tabIndex:_tabIndex,accessibilityLabel:accessibilityLabel,isDisabled:isDisabled,onBlur:onBlur,onFocus:onFocus,onMouseLeave:onMouseLeave,onMouseMove:onMouseMove,onPointerDown:onPointerDown,onPointerEnter:onPointerEnter,onTouchEnd:onTouchEnd,onTouchStart:onTouchStart});};var IconButton=React__default.forwardRef(_IconButton);
+var _IconButton=function _IconButton(_ref,ref){var icon=_ref.icon,onClick=_ref.onClick,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'intense':_ref$emphasis,accessibilityLabel=_ref.accessibilityLabel,isDisabled=_ref.isDisabled,onBlur=_ref.onBlur,onFocus=_ref.onFocus,onMouseLeave=_ref.onMouseLeave,onMouseMove=_ref.onMouseMove,onPointerDown=_ref.onPointerDown,onPointerEnter=_ref.onPointerEnter,onTouchEnd=_ref.onTouchEnd,onTouchStart=_ref.onTouchStart,isHighlighted=_ref.isHighlighted,_tabIndex=_ref._tabIndex;return jsx(StyledIconButton,{ref:ref,onClick:onClick,emphasis:emphasis,size:size,icon:icon,tabIndex:_tabIndex,accessibilityLabel:accessibilityLabel,isDisabled:isDisabled,isHighlighted:isHighlighted,onBlur:onBlur,onFocus:onFocus,onMouseLeave:onMouseLeave,onMouseMove:onMouseMove,onPointerDown:onPointerDown,onPointerEnter:onPointerEnter,onTouchEnd:onTouchEnd,onTouchStart:onTouchStart});};var IconButton=React__default.forwardRef(_IconButton);
 
 export { IconButton };
 //# sourceMappingURL=IconButton.js.map

package/build/lib/native/components/Button/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable react/display-name */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport StyledIconButton from './StyledIconButton';\nimport type { IconComponent } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { Platform } from '~utils';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\n\ntype IconButtonProps = {\n  /**\n   * Icon component to be rendered, eg. `CloseIcon`\n   */\n  icon: IconComponent;\n\n  /**\n   * Icon size\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Icon contrast\n   *\n   * @default 'intense'\n   */\n  emphasis?: SubtleOrIntense;\n\n  /**\n   * Sets aria-label to help users know what the action does, eg 'Dismiss alert'\n   */\n  accessibilityLabel: string;\n\n  /**\n   * Disabled state for IconButton\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Sets tabindex property on button element\n   */\n  _tabIndex?: number;\n} & BladeCommonEvents &\n  Platform.Select<{\n    web: {\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    };\n    native: {\n      onClick: (event: GestureResponderEvent) => void;\n    };\n  }>;\n\n/**\n * Component for making clickable icons with transparent background.\n * For other cases please use `Button` component with `icon` prop.\n */\nconst _IconButton: React.ForwardRefRenderFunction<BladeElementRef, IconButtonProps> = (\n  {\n    icon,\n    onClick,\n    size = 'medium',\n    emphasis = 'intense',\n    accessibilityLabel,\n    isDisabled,\n    onBlur,\n    onFocus,\n    onMouseLeave,\n    onMouseMove,\n    onPointerDown,\n    onPointerEnter,\n    onTouchEnd,\n    onTouchStart,\n    _tabIndex,\n  },\n  ref,\n) => {\n  return (\n    <StyledIconButton\n      ref={ref as any}\n      onClick={onClick}\n      emphasis={emphasis}\n      size={size}\n      icon={icon}\n      tabIndex={_tabIndex}\n      accessibilityLabel={accessibilityLabel}\n      isDisabled={isDisabled}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n    />\n  );\n};\n\nconst IconButton = React.forwardRef(_IconButton);\n\nexport type { IconButtonProps };\nexport { IconButton };\n"],"names":["_IconButton","_ref","ref","icon","onClick","_ref$size","size","_ref$emphasis","emphasis","accessibilityLabel","isDisabled","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","_tabIndex","_jsx","StyledIconButton","tabIndex","IconButton","React","forwardRef"],"mappings":";;;;AA2DA,IAAMA,WAA6E,CAAG,SAAhFA,WAA6EA,CAAAC,IAAA,CAkBjFC,GAAG,CACA,KAjBDC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CACJC,OAAO,CAAAH,IAAA,CAAPG,OAAO,CAAAC,SAAA,CAAAJ,IAAA,CACPK,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAA,KAAA,CAAA,CAAG,QAAQ,CAAAA,SAAA,CAAAE,aAAA,CAAAN,IAAA,CACfO,QAAQ,CAARA,QAAQ,CAAAD,aAAA,GAAA,KAAA,CAAA,CAAG,SAAS,CAAAA,aAAA,CACpBE,kBAAkB,CAAAR,IAAA,CAAlBQ,kBAAkB,CAClBC,UAAU,CAAAT,IAAA,CAAVS,UAAU,CACVC,MAAM,CAAAV,IAAA,CAANU,MAAM,CACNC,OAAO,CAAAX,IAAA,CAAPW,OAAO,CACPC,YAAY,CAAAZ,IAAA,CAAZY,YAAY,CACZC,WAAW,CAAAb,IAAA,CAAXa,WAAW,CACXC,aAAa,CAAAd,IAAA,CAAbc,aAAa,CACbC,cAAc,CAAAf,IAAA,CAAde,cAAc,CACdC,UAAU,CAAAhB,IAAA,CAAVgB,UAAU,CACVC,YAAY,CAAAjB,IAAA,CAAZiB,YAAY,CACZC,SAAS,CAAAlB,IAAA,CAATkB,SAAS,CAIX,OACEC,GAAA,CAACC,gBAAgB,CACfnB,CAAAA,GAAG,CAAEA,GAAW,CAChBE,OAAO,CAAEA,OAAQ,CACjBI,QAAQ,CAAEA,QAAS,CACnBF,IAAI,CAAEA,IAAK,CACXH,IAAI,CAAEA,IAAK,CACXmB,QAAQ,CAAEH,SAAU,CACpBV,kBAAkB,CAAEA,kBAAmB,CACvCC,UAAU,CAAEA,UAAW,CACvBC,MAAM,CAAEA,MAAO,CACfC,OAAO,CAAEA,OAAQ,CACjBC,YAAY,CAAEA,YAAa,CAC3BC,WAAW,CAAEA,WAAY,CACzBC,aAAa,CAAEA,aAAc,CAC7BC,cAAc,CAAEA,cAAe,CAC/BC,UAAU,CAAEA,UAAW,CACvBC,YAAY,CAAEA,YAAa,CAC5B,CAAC,CAEN,CAAC,CAEK,IAAAK,UAAU,CAAGC,cAAK,CAACC,UAAU,CAACzB,WAAW;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable react/display-name */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport StyledIconButton from './StyledIconButton';\nimport type { IconComponent } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { Platform } from '~utils';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\n\ntype IconButtonProps = {\n  /**\n   * Icon component to be rendered, eg. `CloseIcon`\n   */\n  icon: IconComponent;\n\n  /**\n   * Icon size\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Icon contrast\n   *\n   * @default 'intense'\n   */\n  emphasis?: SubtleOrIntense;\n\n  /**\n   * Sets aria-label to help users know what the action does, eg 'Dismiss alert'\n   */\n  accessibilityLabel: string;\n\n  /**\n   * Disabled state for IconButton\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Sets tabindex property on button element\n   */\n  _tabIndex?: number;\n} & BladeCommonEvents &\n  Platform.Select<{\n    web: {\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n      /**\n       * This changes the hover interaction to highlight icon more\n       *\n       * **Only available on web currently**\n       */\n      isHighlighted?: boolean;\n    };\n    native: {\n      onClick: (event: GestureResponderEvent) => void;\n      isHighlighted?: undefined;\n    };\n  }>;\n\n/**\n * Component for making clickable icons with transparent background.\n * For other cases please use `Button` component with `icon` prop.\n */\nconst _IconButton: React.ForwardRefRenderFunction<BladeElementRef, IconButtonProps> = (\n  {\n    icon,\n    onClick,\n    size = 'medium',\n    emphasis = 'intense',\n    accessibilityLabel,\n    isDisabled,\n    onBlur,\n    onFocus,\n    onMouseLeave,\n    onMouseMove,\n    onPointerDown,\n    onPointerEnter,\n    onTouchEnd,\n    onTouchStart,\n    isHighlighted,\n    _tabIndex,\n  },\n  ref,\n) => {\n  return (\n    <StyledIconButton\n      ref={ref as any}\n      onClick={onClick}\n      emphasis={emphasis}\n      size={size}\n      icon={icon}\n      tabIndex={_tabIndex}\n      accessibilityLabel={accessibilityLabel}\n      isDisabled={isDisabled}\n      isHighlighted={isHighlighted}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n    />\n  );\n};\n\nconst IconButton = React.forwardRef(_IconButton);\n\nexport type { IconButtonProps };\nexport { IconButton };\n"],"names":["_IconButton","_ref","ref","icon","onClick","_ref$size","size","_ref$emphasis","emphasis","accessibilityLabel","isDisabled","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","isHighlighted","_tabIndex","_jsx","StyledIconButton","tabIndex","IconButton","React","forwardRef"],"mappings":";;;;AAkEA,IAAMA,WAA6E,CAAG,SAAhFA,WAA6EA,CAAAC,IAAA,CAmBjFC,GAAG,CACA,CAAA,IAlBDC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CACJC,OAAO,CAAAH,IAAA,CAAPG,OAAO,CAAAC,SAAA,CAAAJ,IAAA,CACPK,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAA,KAAA,CAAA,CAAG,QAAQ,CAAAA,SAAA,CAAAE,aAAA,CAAAN,IAAA,CACfO,QAAQ,CAARA,QAAQ,CAAAD,aAAA,UAAG,SAAS,CAAAA,aAAA,CACpBE,kBAAkB,CAAAR,IAAA,CAAlBQ,kBAAkB,CAClBC,UAAU,CAAAT,IAAA,CAAVS,UAAU,CACVC,MAAM,CAAAV,IAAA,CAANU,MAAM,CACNC,OAAO,CAAAX,IAAA,CAAPW,OAAO,CACPC,YAAY,CAAAZ,IAAA,CAAZY,YAAY,CACZC,WAAW,CAAAb,IAAA,CAAXa,WAAW,CACXC,aAAa,CAAAd,IAAA,CAAbc,aAAa,CACbC,cAAc,CAAAf,IAAA,CAAde,cAAc,CACdC,UAAU,CAAAhB,IAAA,CAAVgB,UAAU,CACVC,YAAY,CAAAjB,IAAA,CAAZiB,YAAY,CACZC,aAAa,CAAAlB,IAAA,CAAbkB,aAAa,CACbC,SAAS,CAAAnB,IAAA,CAATmB,SAAS,CAIX,OACEC,GAAA,CAACC,gBAAgB,CACfpB,CAAAA,GAAG,CAAEA,GAAW,CAChBE,OAAO,CAAEA,OAAQ,CACjBI,QAAQ,CAAEA,QAAS,CACnBF,IAAI,CAAEA,IAAK,CACXH,IAAI,CAAEA,IAAK,CACXoB,QAAQ,CAAEH,SAAU,CACpBX,kBAAkB,CAAEA,kBAAmB,CACvCC,UAAU,CAAEA,UAAW,CACvBS,aAAa,CAAEA,aAAc,CAC7BR,MAAM,CAAEA,MAAO,CACfC,OAAO,CAAEA,OAAQ,CACjBC,YAAY,CAAEA,YAAa,CAC3BC,WAAW,CAAEA,WAAY,CACzBC,aAAa,CAAEA,aAAc,CAC7BC,cAAc,CAAEA,cAAe,CAC/BC,UAAU,CAAEA,UAAW,CACvBC,YAAY,CAAEA,YAAa,CAC5B,CAAC,CAEN,CAAC,CAEK,IAAAM,UAAU,CAAGC,cAAK,CAACC,UAAU,CAAC1B,WAAW;;;;"}

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

@@ -1,6 +1,6 @@
 import React__default from 'react';
 
-var TableContext=React__default.createContext({selectionType:'none',selectedRows:undefined,totalItems:0,toggleRowSelectionById:function toggleRowSelectionById(){},toggleAllRowsSelection:function toggleAllRowsSelection(){},deselectAllRows:function deselectAllRows(){},rowDensity:'normal',toggleSort:function toggleSort(){},currentSortedState:{sortKey:'',isSortReversed:false},setPaginationPage:function setPaginationPage(){},setPaginationRowSize:function setPaginationRowSize(){},disabledRows:[],setDisabledRows:function setDisabledRows(){},paginationType:'client',setPaginationType:function setPaginationType(){},backgroundColor:'surface.background.gray.intense',setHeaderRowDensity:function setHeaderRowDensity(){},showBorderedCells:false});var useTableContext=function useTableContext(){var context=React__default.useContext(TableContext);return context;};
+var TableContext=React__default.createContext({selectionType:'none',selectedRows:undefined,totalItems:0,toggleRowSelectionById:function toggleRowSelectionById(){},toggleAllRowsSelection:function toggleAllRowsSelection(){},deselectAllRows:function deselectAllRows(){},rowDensity:'normal',toggleSort:function toggleSort(){},currentSortedState:{sortKey:'',isSortReversed:false},setPaginationPage:function setPaginationPage(){},setPaginationRowSize:function setPaginationRowSize(){},disabledRows:[],setDisabledRows:function setDisabledRows(){},paginationType:'client',setPaginationType:function setPaginationType(){},backgroundColor:'surface.background.gray.intense',setHeaderRowDensity:function setHeaderRowDensity(){},showBorderedCells:false,hasHoverActions:false,setHasHoverActions:function setHasHoverActions(){}});var useTableContext=function useTableContext(){var context=React__default.useContext(TableContext);return context;};
 
 export { TableContext, useTableContext };
 //# sourceMappingURL=TableContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableContext.js","sources":["../../../../../src/components/Table/TableContext.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nimport React from 'react';\nimport type { TableNode } from '@table-library/react-table-library/table';\nimport type {\n  TableBackgroundColors,\n  TableProps,\n  TablePaginationType,\n  TableHeaderRowProps,\n} from './types';\n\nexport type TableContextType = {\n  selectionType?: TableProps<unknown>['selectionType'];\n  selectedRows?: TableNode['id'][];\n  totalItems: number;\n  toggleRowSelectionById: (id: TableNode['id']) => void;\n  toggleAllRowsSelection: () => void;\n  deselectAllRows: () => void;\n  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n  toggleSort: (sortKey: string) => void;\n  currentSortedState: {\n    sortKey: string;\n    isSortReversed: boolean;\n    sortableColumns?: string[];\n  };\n  setPaginationPage: (page: number) => void;\n  setPaginationRowSize: (size: number) => void;\n  currentPaginationState?: {\n    page: number;\n    size: number;\n  };\n  showStripedRows?: boolean;\n  disabledRows: TableNode['id'][];\n  setDisabledRows: React.Dispatch<React.SetStateAction<TableNode['id'][]>>;\n  paginationType: NonNullable<TablePaginationType>;\n  setPaginationType: React.Dispatch<React.SetStateAction<NonNullable<TablePaginationType>>>;\n  backgroundColor: TableBackgroundColors;\n  headerRowDensity?: TableHeaderRowProps['rowDensity'];\n  setHeaderRowDensity: React.Dispatch<React.SetStateAction<TableHeaderRowProps['rowDensity']>>;\n  showBorderedCells: NonNullable<TableProps<unknown>['showBorderedCells']>;\n};\n\nconst TableContext = React.createContext<TableContextType>({\n  selectionType: 'none',\n  selectedRows: undefined,\n  totalItems: 0,\n  toggleRowSelectionById: () => {},\n  toggleAllRowsSelection: () => {},\n  deselectAllRows: () => {},\n  rowDensity: 'normal',\n  toggleSort: () => {},\n  currentSortedState: {\n    sortKey: '',\n    isSortReversed: false,\n  },\n  setPaginationPage: () => {},\n  setPaginationRowSize: () => {},\n  disabledRows: [],\n  setDisabledRows: () => {},\n  paginationType: 'client',\n  setPaginationType: () => {},\n  backgroundColor: 'surface.background.gray.intense',\n  setHeaderRowDensity: () => {},\n  showBorderedCells: false,\n});\n\nconst useTableContext = (): TableContextType => {\n  const context = React.useContext(TableContext);\n  return context;\n};\n\nexport { useTableContext, TableContext };\n"],"names":["TableContext","React","createContext","selectionType","selectedRows","undefined","totalItems","toggleRowSelectionById","toggleAllRowsSelection","deselectAllRows","rowDensity","toggleSort","currentSortedState","sortKey","isSortReversed","setPaginationPage","setPaginationRowSize","disabledRows","setDisabledRows","paginationType","setPaginationType","backgroundColor","setHeaderRowDensity","showBorderedCells","useTableContext","context","useContext"],"mappings":";;AA0CM,IAAAA,YAAY,CAAGC,cAAK,CAACC,aAAa,CAAmB,CACzDC,aAAa,CAAE,MAAM,CACrBC,YAAY,CAAEC,SAAS,CACvBC,UAAU,CAAE,CAAC,CACbC,sBAAsB,CAAE,SAAAA,sBAAAA,EAAM,EAAE,CAChCC,sBAAsB,CAAE,SAAAA,sBAAA,EAAM,EAAE,CAChCC,eAAe,CAAE,SAAAA,eAAAA,EAAM,EAAE,CACzBC,UAAU,CAAE,QAAQ,CACpBC,UAAU,CAAE,SAAAA,YAAM,EAAE,CACpBC,kBAAkB,CAAE,CAClBC,OAAO,CAAE,EAAE,CACXC,cAAc,CAAE,KAClB,CAAC,CACDC,iBAAiB,CAAE,SAAAA,iBAAAA,EAAM,EAAE,CAC3BC,oBAAoB,CAAE,SAAAA,oBAAAA,EAAM,EAAE,CAC9BC,YAAY,CAAE,EAAE,CAChBC,eAAe,CAAE,SAAAA,eAAAA,EAAM,EAAE,CACzBC,cAAc,CAAE,QAAQ,CACxBC,iBAAiB,CAAE,SAAAA,iBAAA,EAAM,EAAE,CAC3BC,eAAe,CAAE,iCAAiC,CAClDC,mBAAmB,CAAE,SAAAA,mBAAAA,EAAM,EAAE,CAC7BC,iBAAiB,CAAE,KACrB,CAAC,EAEK,IAAAC,eAAe,CAAG,SAAlBA,eAAeA,EAA2B,CAC9C,IAAMC,OAAO,CAAGxB,cAAK,CAACyB,UAAU,CAAC1B,YAAY,CAAC,CAC9C,OAAOyB,OAAO,CAChB;;;;"}
+{"version":3,"file":"TableContext.js","sources":["../../../../../src/components/Table/TableContext.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nimport React from 'react';\nimport type { TableNode } from '@table-library/react-table-library/table';\nimport type {\n  TableBackgroundColors,\n  TableProps,\n  TablePaginationType,\n  TableHeaderRowProps,\n} from './types';\n\nexport type TableContextType = {\n  selectionType?: TableProps<unknown>['selectionType'];\n  selectedRows?: TableNode['id'][];\n  totalItems: number;\n  toggleRowSelectionById: (id: TableNode['id']) => void;\n  toggleAllRowsSelection: () => void;\n  deselectAllRows: () => void;\n  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n  toggleSort: (sortKey: string) => void;\n  currentSortedState: {\n    sortKey: string;\n    isSortReversed: boolean;\n    sortableColumns?: string[];\n  };\n  setPaginationPage: (page: number) => void;\n  setPaginationRowSize: (size: number) => void;\n  currentPaginationState?: {\n    page: number;\n    size: number;\n  };\n  showStripedRows?: boolean;\n  disabledRows: TableNode['id'][];\n  setDisabledRows: React.Dispatch<React.SetStateAction<TableNode['id'][]>>;\n  paginationType: NonNullable<TablePaginationType>;\n  setPaginationType: React.Dispatch<React.SetStateAction<NonNullable<TablePaginationType>>>;\n  backgroundColor: TableBackgroundColors;\n  headerRowDensity?: TableHeaderRowProps['rowDensity'];\n  setHeaderRowDensity: React.Dispatch<React.SetStateAction<TableHeaderRowProps['rowDensity']>>;\n  showBorderedCells: NonNullable<TableProps<unknown>['showBorderedCells']>;\n  hasHoverActions: boolean;\n  setHasHoverActions: (hasHoverActions: boolean) => void;\n};\n\nconst TableContext = React.createContext<TableContextType>({\n  selectionType: 'none',\n  selectedRows: undefined,\n  totalItems: 0,\n  toggleRowSelectionById: () => {},\n  toggleAllRowsSelection: () => {},\n  deselectAllRows: () => {},\n  rowDensity: 'normal',\n  toggleSort: () => {},\n  currentSortedState: {\n    sortKey: '',\n    isSortReversed: false,\n  },\n  setPaginationPage: () => {},\n  setPaginationRowSize: () => {},\n  disabledRows: [],\n  setDisabledRows: () => {},\n  paginationType: 'client',\n  setPaginationType: () => {},\n  backgroundColor: 'surface.background.gray.intense',\n  setHeaderRowDensity: () => {},\n  showBorderedCells: false,\n  hasHoverActions: false,\n  setHasHoverActions: () => {},\n});\n\nconst useTableContext = (): TableContextType => {\n  const context = React.useContext(TableContext);\n  return context;\n};\n\nexport { useTableContext, TableContext };\n"],"names":["TableContext","React","createContext","selectionType","selectedRows","undefined","totalItems","toggleRowSelectionById","toggleAllRowsSelection","deselectAllRows","rowDensity","toggleSort","currentSortedState","sortKey","isSortReversed","setPaginationPage","setPaginationRowSize","disabledRows","setDisabledRows","paginationType","setPaginationType","backgroundColor","setHeaderRowDensity","showBorderedCells","hasHoverActions","setHasHoverActions","useTableContext","context","useContext"],"mappings":";;AA4CM,IAAAA,YAAY,CAAGC,cAAK,CAACC,aAAa,CAAmB,CACzDC,aAAa,CAAE,MAAM,CACrBC,YAAY,CAAEC,SAAS,CACvBC,UAAU,CAAE,CAAC,CACbC,sBAAsB,CAAE,SAAAA,sBAAA,EAAM,EAAE,CAChCC,sBAAsB,CAAE,SAAAA,sBAAA,EAAM,EAAE,CAChCC,eAAe,CAAE,SAAAA,eAAA,EAAM,EAAE,CACzBC,UAAU,CAAE,QAAQ,CACpBC,UAAU,CAAE,SAAAA,UAAAA,EAAM,EAAE,CACpBC,kBAAkB,CAAE,CAClBC,OAAO,CAAE,EAAE,CACXC,cAAc,CAAE,KAClB,CAAC,CACDC,iBAAiB,CAAE,SAAAA,iBAAAA,EAAM,EAAE,CAC3BC,oBAAoB,CAAE,SAAAA,oBAAA,EAAM,EAAE,CAC9BC,YAAY,CAAE,EAAE,CAChBC,eAAe,CAAE,SAAAA,eAAAA,EAAM,EAAE,CACzBC,cAAc,CAAE,QAAQ,CACxBC,iBAAiB,CAAE,SAAAA,iBAAA,EAAM,EAAE,CAC3BC,eAAe,CAAE,iCAAiC,CAClDC,mBAAmB,CAAE,SAAAA,mBAAAA,EAAM,EAAE,CAC7BC,iBAAiB,CAAE,KAAK,CACxBC,eAAe,CAAE,KAAK,CACtBC,kBAAkB,CAAE,SAAAA,kBAAA,EAAM,EAC5B,CAAC,EAEK,IAAAC,eAAe,CAAG,SAAlBA,eAAeA,EAA2B,CAC9C,IAAMC,OAAO,CAAG1B,cAAK,CAAC2B,UAAU,CAAC5B,YAAY,CAAC,CAC9C,OAAO2B,OAAO,CAChB;;;;"}

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\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};\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.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;;;;"}

package/build/lib/native/tokens/global/size.js

@@ -1,4 +1,4 @@
-var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,10:10,12:12,14:14,15:15,16:16,18:18,20:20,24:24,28:28,30:30,32:32,33:33,36:36,40:40,44:44,48:48,52:52,56:56,60:60,64:64,72:72,80:80,100:100,120:120,140:140,160:160,176:176,200:200,240:240,245:245,256:256,264:264,300:300,314:314,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
+var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,10:10,12:12,14:14,15:15,16:16,18:18,20:20,24:24,28:28,30:30,32:32,33:33,36:36,40:40,44:44,48:48,52:52,56:56,60:60,64:64,72:72,80:80,100:100,120:120,140:140,160:160,176:176,200:200,208:208,240:240,245:245,256:256,264:264,300:300,314:314,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
 
 export { size };
 //# sourceMappingURL=size.js.map

package/build/lib/native/tokens/global/size.js.map

@@ -1 +1 @@
-{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  30: 30,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 80 px */\n  80: 80,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 245 px */\n  245: 245,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}
+{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  30: 30,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 80 px */\n  80: 80,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 208 px */\n  208: 208,\n  /** 240 px */\n  240: 240,\n  /** 245 px */\n  245: 245,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}

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

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

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

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

package/build/lib/web/development/components/Button/IconButton/IconButton.js

@@ -25,6 +25,7 @@ var _IconButton = function _IconButton(_ref, ref) {
     onPointerEnter = _ref.onPointerEnter,
     onTouchEnd = _ref.onTouchEnd,
     onTouchStart = _ref.onTouchStart,
+    isHighlighted = _ref.isHighlighted,
     _tabIndex = _ref._tabIndex;
   return /*#__PURE__*/jsx(StyledIconButton, {
     ref: ref,
@@ -35,6 +36,7 @@ var _IconButton = function _IconButton(_ref, ref) {
     tabIndex: _tabIndex,
     accessibilityLabel: accessibilityLabel,
     isDisabled: isDisabled,
+    isHighlighted: isHighlighted,
     onBlur: onBlur,
     onFocus: onFocus,
     onMouseLeave: onMouseLeave,

package/build/lib/web/development/components/Button/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable react/display-name */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport StyledIconButton from './StyledIconButton';\nimport type { IconComponent } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { Platform } from '~utils';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\n\ntype IconButtonProps = {\n  /**\n   * Icon component to be rendered, eg. `CloseIcon`\n   */\n  icon: IconComponent;\n\n  /**\n   * Icon size\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Icon contrast\n   *\n   * @default 'intense'\n   */\n  emphasis?: SubtleOrIntense;\n\n  /**\n   * Sets aria-label to help users know what the action does, eg 'Dismiss alert'\n   */\n  accessibilityLabel: string;\n\n  /**\n   * Disabled state for IconButton\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Sets tabindex property on button element\n   */\n  _tabIndex?: number;\n} & BladeCommonEvents &\n  Platform.Select<{\n    web: {\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    };\n    native: {\n      onClick: (event: GestureResponderEvent) => void;\n    };\n  }>;\n\n/**\n * Component for making clickable icons with transparent background.\n * For other cases please use `Button` component with `icon` prop.\n */\nconst _IconButton: React.ForwardRefRenderFunction<BladeElementRef, IconButtonProps> = (\n  {\n    icon,\n    onClick,\n    size = 'medium',\n    emphasis = 'intense',\n    accessibilityLabel,\n    isDisabled,\n    onBlur,\n    onFocus,\n    onMouseLeave,\n    onMouseMove,\n    onPointerDown,\n    onPointerEnter,\n    onTouchEnd,\n    onTouchStart,\n    _tabIndex,\n  },\n  ref,\n) => {\n  return (\n    <StyledIconButton\n      ref={ref as any}\n      onClick={onClick}\n      emphasis={emphasis}\n      size={size}\n      icon={icon}\n      tabIndex={_tabIndex}\n      accessibilityLabel={accessibilityLabel}\n      isDisabled={isDisabled}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n    />\n  );\n};\n\nconst IconButton = React.forwardRef(_IconButton);\n\nexport type { IconButtonProps };\nexport { IconButton };\n"],"names":["_IconButton","_ref","ref","icon","onClick","_ref$size","size","_ref$emphasis","emphasis","accessibilityLabel","isDisabled","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","_tabIndex","_jsx","StyledIconButton","tabIndex","IconButton","React","forwardRef"],"mappings":";;;;AAAA;AACA;AAsDA;AACA;AACA;AACA;AACA,IAAMA,WAA6E,GAAG,SAAhFA,WAA6EA,CAAAC,IAAA,EAkBjFC,GAAG,EACA;AAAA,EAAA,IAjBDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAAC,SAAA,GAAAJ,IAAA,CACPK,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,aAAA,GAAAN,IAAA,CACfO,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,aAAA;IACpBE,kBAAkB,GAAAR,IAAA,CAAlBQ,kBAAkB;IAClBC,UAAU,GAAAT,IAAA,CAAVS,UAAU;IACVC,MAAM,GAAAV,IAAA,CAANU,MAAM;IACNC,OAAO,GAAAX,IAAA,CAAPW,OAAO;IACPC,YAAY,GAAAZ,IAAA,CAAZY,YAAY;IACZC,WAAW,GAAAb,IAAA,CAAXa,WAAW;IACXC,aAAa,GAAAd,IAAA,CAAbc,aAAa;IACbC,cAAc,GAAAf,IAAA,CAAde,cAAc;IACdC,UAAU,GAAAhB,IAAA,CAAVgB,UAAU;IACVC,YAAY,GAAAjB,IAAA,CAAZiB,YAAY;IACZC,SAAS,GAAAlB,IAAA,CAATkB,SAAS,CAAA;EAIX,oBACEC,GAAA,CAACC,gBAAgB,EAAA;AACfnB,IAAAA,GAAG,EAAEA,GAAW;AAChBE,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBF,IAAAA,IAAI,EAAEA,IAAK;AACXH,IAAAA,IAAI,EAAEA,IAAK;AACXmB,IAAAA,QAAQ,EAAEH,SAAU;AACpBV,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,YAAY,EAAEA,YAAAA;AAAa,GAC5B,CAAC,CAAA;AAEN,CAAC,CAAA;AAED,IAAMK,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAACzB,WAAW;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable react/display-name */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport StyledIconButton from './StyledIconButton';\nimport type { IconComponent } from '~components/Icons';\nimport type { BladeElementRef } from '~utils/types';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { Platform } from '~utils';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\n\ntype IconButtonProps = {\n  /**\n   * Icon component to be rendered, eg. `CloseIcon`\n   */\n  icon: IconComponent;\n\n  /**\n   * Icon size\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Icon contrast\n   *\n   * @default 'intense'\n   */\n  emphasis?: SubtleOrIntense;\n\n  /**\n   * Sets aria-label to help users know what the action does, eg 'Dismiss alert'\n   */\n  accessibilityLabel: string;\n\n  /**\n   * Disabled state for IconButton\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Sets tabindex property on button element\n   */\n  _tabIndex?: number;\n} & BladeCommonEvents &\n  Platform.Select<{\n    web: {\n      onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n      /**\n       * This changes the hover interaction to highlight icon more\n       *\n       * **Only available on web currently**\n       */\n      isHighlighted?: boolean;\n    };\n    native: {\n      onClick: (event: GestureResponderEvent) => void;\n      isHighlighted?: undefined;\n    };\n  }>;\n\n/**\n * Component for making clickable icons with transparent background.\n * For other cases please use `Button` component with `icon` prop.\n */\nconst _IconButton: React.ForwardRefRenderFunction<BladeElementRef, IconButtonProps> = (\n  {\n    icon,\n    onClick,\n    size = 'medium',\n    emphasis = 'intense',\n    accessibilityLabel,\n    isDisabled,\n    onBlur,\n    onFocus,\n    onMouseLeave,\n    onMouseMove,\n    onPointerDown,\n    onPointerEnter,\n    onTouchEnd,\n    onTouchStart,\n    isHighlighted,\n    _tabIndex,\n  },\n  ref,\n) => {\n  return (\n    <StyledIconButton\n      ref={ref as any}\n      onClick={onClick}\n      emphasis={emphasis}\n      size={size}\n      icon={icon}\n      tabIndex={_tabIndex}\n      accessibilityLabel={accessibilityLabel}\n      isDisabled={isDisabled}\n      isHighlighted={isHighlighted}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n    />\n  );\n};\n\nconst IconButton = React.forwardRef(_IconButton);\n\nexport type { IconButtonProps };\nexport { IconButton };\n"],"names":["_IconButton","_ref","ref","icon","onClick","_ref$size","size","_ref$emphasis","emphasis","accessibilityLabel","isDisabled","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","isHighlighted","_tabIndex","_jsx","StyledIconButton","tabIndex","IconButton","React","forwardRef"],"mappings":";;;;AAAA;AACA;AA6DA;AACA;AACA;AACA;AACA,IAAMA,WAA6E,GAAG,SAAhFA,WAA6EA,CAAAC,IAAA,EAmBjFC,GAAG,EACA;AAAA,EAAA,IAlBDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAAC,SAAA,GAAAJ,IAAA,CACPK,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAE,aAAA,GAAAN,IAAA,CACfO,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,aAAA;IACpBE,kBAAkB,GAAAR,IAAA,CAAlBQ,kBAAkB;IAClBC,UAAU,GAAAT,IAAA,CAAVS,UAAU;IACVC,MAAM,GAAAV,IAAA,CAANU,MAAM;IACNC,OAAO,GAAAX,IAAA,CAAPW,OAAO;IACPC,YAAY,GAAAZ,IAAA,CAAZY,YAAY;IACZC,WAAW,GAAAb,IAAA,CAAXa,WAAW;IACXC,aAAa,GAAAd,IAAA,CAAbc,aAAa;IACbC,cAAc,GAAAf,IAAA,CAAde,cAAc;IACdC,UAAU,GAAAhB,IAAA,CAAVgB,UAAU;IACVC,YAAY,GAAAjB,IAAA,CAAZiB,YAAY;IACZC,aAAa,GAAAlB,IAAA,CAAbkB,aAAa;IACbC,SAAS,GAAAnB,IAAA,CAATmB,SAAS,CAAA;EAIX,oBACEC,GAAA,CAACC,gBAAgB,EAAA;AACfpB,IAAAA,GAAG,EAAEA,GAAW;AAChBE,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,QAAQ,EAAEA,QAAS;AACnBF,IAAAA,IAAI,EAAEA,IAAK;AACXH,IAAAA,IAAI,EAAEA,IAAK;AACXoB,IAAAA,QAAQ,EAAEH,SAAU;AACpBX,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCC,IAAAA,UAAU,EAAEA,UAAW;AACvBS,IAAAA,aAAa,EAAEA,aAAc;AAC7BR,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,YAAY,EAAEA,YAAAA;AAAa,GAC5B,CAAC,CAAA;AAEN,CAAC,CAAA;AAED,IAAMM,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAC1B,WAAW;;;;"}

package/build/lib/web/development/components/Button/IconButton/StyledIconButton.web.js

@@ -1,12 +1,17 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import styled from 'styled-components';
 import React__default from 'react';
+import { highlightedButtonSizeMap, highlightedHoverColorMap } from './tokens.js';
 import '../../../utils/index.js';
 import '../../../utils/metaAttribute/index.js';
 import '../../../utils/makeAccessible/index.js';
 import '../../../utils/makeMotionTime/index.web.js';
 import '../../../utils/getFocusRingStyles/index.js';
+import '../../../utils/logger/index.js';
+import getIn from '../../../utils/lodashButBetter/get.js';
 import { jsx } from 'react/jsx-runtime';
+import { throwBladeError } from '../../../utils/logger/logger.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import { castWebType } from '../../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
 import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
@@ -24,11 +29,24 @@ var StyledButton = /*#__PURE__*/styled.button.withConfig({
     emphasis = props.emphasis;
   var motionToken = theme.motion;
   var emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';
+  if (true) {
+    if (props.$size === 'large' && props.$isHighlighted) {
+      throwBladeError({
+        moduleName: 'IconButton',
+        message: 'size large is not allowed with isHighlighted true'
+      });
+      return null;
+    }
+  }
   return {
     border: 'none',
     cursor: props.disabled ? 'not-allowed' : 'pointer',
     padding: 0,
-    borderRadius: theme.border.radius.small,
+    height: props.$isHighlighted ?
+    // We throw error for size large on top
+    makeSize(highlightedButtonSizeMap[props.$size]) : undefined,
+    width: props.$isHighlighted ? makeSize(highlightedButtonSizeMap[props.$size]) : undefined,
+    borderRadius: props.$isHighlighted ? theme.border.radius.round : theme.border.radius.small,
     background: 'transparent',
     display: 'flex',
     alignItems: 'center',
@@ -37,8 +55,9 @@ var StyledButton = /*#__PURE__*/styled.button.withConfig({
     transitionProperty: 'color, box-shadow',
     transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),
     transitionTimingFunction: motionToken.easing.standard.effective,
-    '&:hover': {
-      color: theme.colors.interactive.icon[emphasisColor].subtle
+    '&:hover:not([disabled])': {
+      color: theme.colors.interactive.icon[emphasisColor].subtle,
+      backgroundColor: props.$isHighlighted ? getIn(theme.colors, highlightedHoverColorMap[emphasis]) : 'transparent'
     },
     '&:focus-visible': _objectSpread(_objectSpread({}, getFocusRingStyles({
       theme: theme
@@ -57,6 +76,7 @@ var StyledIconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     emphasis = _ref.emphasis,
     accessibilityLabel = _ref.accessibilityLabel,
     isDisabled = _ref.isDisabled,
+    isHighlighted = _ref.isHighlighted,
     testID = _ref.testID,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -81,6 +101,8 @@ var StyledIconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     onTouchEnd: onTouchEnd,
     onTouchStart: onTouchStart,
     disabled: isDisabled,
+    $isHighlighted: isHighlighted,
+    $size: size,
     tabIndex: tabIndex
   }, makeAccessible({
     label: accessibilityLabel

package/build/lib/web/development/components/Button/IconButton/StyledIconButton.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledIconButton.web.js","sources":["../../../../../../../src/components/Button/IconButton/StyledIconButton.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport styled from 'styled-components';\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport type { StyledIconButtonProps } from './types';\nimport { castWebType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\ntype StyledButtonProps = {\n  emphasis: SubtleOrIntense;\n};\n\nconst StyledButton = styled.button<StyledButtonProps>((props) => {\n  const { theme, emphasis } = props;\n  const motionToken = theme.motion;\n\n  const emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';\n\n  return {\n    border: 'none',\n    cursor: props.disabled ? 'not-allowed' : 'pointer',\n    padding: 0,\n    borderRadius: theme.border.radius.small,\n    background: 'transparent',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: props.disabled\n      ? theme.colors.interactive.icon[emphasisColor].disabled\n      : theme.colors.interactive.icon[emphasisColor].muted,\n    transitionProperty: 'color, box-shadow',\n    transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),\n    transitionTimingFunction: motionToken.easing.standard.effective as string,\n\n    '&:hover': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n\n    '&:active': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n  };\n});\n\nconst StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonProps>(\n  (\n    {\n      icon: Icon,\n      onClick,\n      size,\n      emphasis,\n      accessibilityLabel,\n      isDisabled,\n      testID,\n      onBlur,\n      onFocus,\n      onMouseLeave,\n      onMouseMove,\n      onPointerDown,\n      onPointerEnter,\n      onTouchEnd,\n      onTouchStart,\n      tabIndex,\n    },\n    ref,\n  ): ReactElement => (\n    <StyledButton\n      ref={ref}\n      onClick={castWebType(onClick)}\n      emphasis={emphasis}\n      type=\"button\"\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n      disabled={isDisabled}\n      tabIndex={tabIndex}\n      {...makeAccessible({ label: accessibilityLabel })}\n      {...metaAttribute({ name: MetaConstants.IconButton, testID })}\n    >\n      <Icon size={size} color={isDisabled ? 'interactive.icon.gray.disabled' : 'currentColor'} />\n    </StyledButton>\n  ),\n);\n\nexport default StyledIconButton;\n"],"names":["StyledButton","styled","button","withConfig","displayName","componentId","props","theme","emphasis","motionToken","motion","emphasisColor","border","cursor","disabled","padding","borderRadius","radius","small","background","display","alignItems","justifyContent","color","colors","interactive","icon","muted","transitionProperty","transitionDuration","castWebType","makeMotionTime","duration","xquick","transitionTimingFunction","easing","standard","effective","subtle","_objectSpread","getFocusRingStyles","StyledIconButton","React","forwardRef","_ref","ref","Icon","onClick","size","accessibilityLabel","isDisabled","testID","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","tabIndex","_jsx","type","makeAccessible","label","metaAttribute","name","MetaConstants","IconButton","children"],"mappings":"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"}
+{"version":3,"file":"StyledIconButton.web.js","sources":["../../../../../../../src/components/Button/IconButton/StyledIconButton.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport styled from 'styled-components';\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport type { StyledIconButtonProps } from './types';\nimport { highlightedButtonSizeMap, highlightedHoverColorMap } from './tokens';\nimport { castWebType, makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { SubtleOrIntense } from '~tokens/theme/theme';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { throwBladeError } from '~utils/logger';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype StyledButtonProps = {\n  emphasis: SubtleOrIntense;\n  $isHighlighted: StyledIconButtonProps['isHighlighted'];\n  $size: StyledIconButtonProps['size'];\n};\n\nconst StyledButton = styled.button<StyledButtonProps>((props) => {\n  const { theme, emphasis } = props;\n  const motionToken = theme.motion;\n\n  const emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';\n\n  if (__DEV__) {\n    if (props.$size === 'large' && props.$isHighlighted) {\n      throwBladeError({\n        moduleName: 'IconButton',\n        message: 'size large is not allowed with isHighlighted true',\n      });\n      return null;\n    }\n  }\n\n  return {\n    border: 'none',\n    cursor: props.disabled ? 'not-allowed' : 'pointer',\n    padding: 0,\n    height: props.$isHighlighted\n      ? // We throw error for size large on top\n        makeSize(highlightedButtonSizeMap[props.$size as 'small' | 'medium'])\n      : undefined,\n    width: props.$isHighlighted\n      ? makeSize(highlightedButtonSizeMap[props.$size as 'small' | 'medium'])\n      : undefined,\n    borderRadius: props.$isHighlighted ? theme.border.radius.round : theme.border.radius.small,\n    background: 'transparent',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: props.disabled\n      ? theme.colors.interactive.icon[emphasisColor].disabled\n      : theme.colors.interactive.icon[emphasisColor].muted,\n    transitionProperty: 'color, box-shadow',\n    transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),\n    transitionTimingFunction: motionToken.easing.standard.effective as string,\n\n    '&:hover:not([disabled])': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n      backgroundColor: props.$isHighlighted\n        ? getIn(theme.colors, highlightedHoverColorMap[emphasis])\n        : 'transparent',\n    },\n\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n\n    '&:active': {\n      color: theme.colors.interactive.icon[emphasisColor].subtle,\n    },\n  };\n});\n\nconst StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonProps>(\n  (\n    {\n      icon: Icon,\n      onClick,\n      size,\n      emphasis,\n      accessibilityLabel,\n      isDisabled,\n      isHighlighted,\n      testID,\n      onBlur,\n      onFocus,\n      onMouseLeave,\n      onMouseMove,\n      onPointerDown,\n      onPointerEnter,\n      onTouchEnd,\n      onTouchStart,\n      tabIndex,\n    },\n    ref,\n  ): ReactElement => (\n    <StyledButton\n      ref={ref}\n      onClick={castWebType(onClick)}\n      emphasis={emphasis}\n      type=\"button\"\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchEnd={onTouchEnd}\n      onTouchStart={onTouchStart}\n      disabled={isDisabled}\n      $isHighlighted={isHighlighted}\n      $size={size}\n      tabIndex={tabIndex}\n      {...makeAccessible({ label: accessibilityLabel })}\n      {...metaAttribute({ name: MetaConstants.IconButton, testID })}\n    >\n      <Icon size={size} color={isDisabled ? 'interactive.icon.gray.disabled' : 'currentColor'} />\n    </StyledButton>\n  ),\n);\n\nexport default StyledIconButton;\n"],"names":["StyledButton","styled","button","withConfig","displayName","componentId","props","theme","emphasis","motionToken","motion","emphasisColor","$size","$isHighlighted","throwBladeError","moduleName","message","border","cursor","disabled","padding","height","makeSize","highlightedButtonSizeMap","undefined","width","borderRadius","radius","round","small","background","display","alignItems","justifyContent","color","colors","interactive","icon","muted","transitionProperty","transitionDuration","castWebType","makeMotionTime","duration","xquick","transitionTimingFunction","easing","standard","effective","subtle","backgroundColor","getIn","highlightedHoverColorMap","_objectSpread","getFocusRingStyles","StyledIconButton","React","forwardRef","_ref","ref","Icon","onClick","size","accessibilityLabel","isDisabled","isHighlighted","testID","onBlur","onFocus","onMouseLeave","onMouseMove","onPointerDown","onPointerEnter","onTouchEnd","onTouchStart","tabIndex","_jsx","type","makeAccessible","label","metaAttribute","name","MetaConstants","IconButton","children"],"mappings":"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"}

package/build/lib/web/development/components/Button/IconButton/tokens.js

@@ -0,0 +1,14 @@
+import '../../../tokens/global/index.js';
+import { size } from '../../../tokens/global/size.js';
+
+var highlightedButtonSizeMap = {
+  small: size['24'],
+  medium: size['32']
+};
+var highlightedHoverColorMap = {
+  intense: 'interactive.background.gray.fadedHighlighted',
+  subtle: 'interactive.background.staticWhite.faded'
+};
+
+export { highlightedButtonSizeMap, highlightedHoverColorMap };
+//# sourceMappingURL=tokens.js.map

package/build/lib/web/development/components/Button/IconButton/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../../../../../../src/components/Button/IconButton/tokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nconst highlightedButtonSizeMap = {\n  small: size['24'],\n  medium: size['32'],\n} as const;\n\nconst highlightedHoverColorMap = {\n  intense: 'interactive.background.gray.fadedHighlighted',\n  subtle: 'interactive.background.staticWhite.faded',\n} as const;\n\nexport { highlightedButtonSizeMap, highlightedHoverColorMap };\n"],"names":["highlightedButtonSizeMap","small","size","medium","highlightedHoverColorMap","intense","subtle"],"mappings":";;;AAEA,IAAMA,wBAAwB,GAAG;AAC/BC,EAAAA,KAAK,EAAEC,IAAI,CAAC,IAAI,CAAC;EACjBC,MAAM,EAAED,IAAI,CAAC,IAAI,CAAA;AACnB,EAAU;AAEV,IAAME,wBAAwB,GAAG;AAC/BC,EAAAA,OAAO,EAAE,8CAA8C;AACvDC,EAAAA,MAAM,EAAE,0CAAA;AACV;;;;"}

package/build/lib/web/development/components/Menu/VisualSubComponents/MenuHeaderFooter.web.js

@@ -6,9 +6,9 @@ import { BaseHeader } from '../../BaseHeaderFooter/BaseHeader.js';
 import '../../../utils/assignWithoutSideEffects/index.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import '../../Box/index.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Box } from '../../Box/Box.js';
+import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 var _MenuHeader = function _MenuHeader(_ref) {
@@ -18,7 +18,8 @@ var _MenuHeader = function _MenuHeader(_ref) {
     titleSuffix = _ref.titleSuffix,
     trailing = _ref.trailing,
     testID = _ref.testID;
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Box, {
+    marginBottom: "spacing.3",
     children: [/*#__PURE__*/jsx(BaseHeader, {
       title: title,
       subtitle: subtitle,
@@ -47,7 +48,7 @@ var _MenuFooter = function _MenuFooter(_ref2) {
   var children = _ref2.children,
     testID = _ref2.testID;
   return /*#__PURE__*/jsxs(Box, {
-    marginTop: "spacing.2",
+    marginTop: "spacing.3",
     children: [/*#__PURE__*/jsx(MenuDivider, {}), /*#__PURE__*/jsx(BaseFooter, {
       metaComponentName: MetaConstants.MenuFooter,
       showDivider: false,

package/build/lib/web/development/components/Menu/VisualSubComponents/MenuHeaderFooter.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuHeaderFooter.web.js","sources":["../../../../../../../src/components/Menu/VisualSubComponents/MenuHeaderFooter.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\nimport { footerPaddingTop, headerMarginBottom, overlayPaddingX } from '../tokens';\nimport type { MenuFooterProps, MenuHeaderProps } from '../types';\nimport { MenuDivider } from './MenuDivider';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { MetaConstants } from '~utils/metaAttribute/metaConstants';\nimport { Box } from '~components/Box';\n\nconst _MenuHeader = ({\n  title,\n  subtitle,\n  leading,\n  titleSuffix,\n  trailing,\n  testID,\n}: MenuHeaderProps): React.ReactElement => {\n  return (\n    <>\n      <BaseHeader\n        title={title}\n        subtitle={subtitle}\n        leading={leading}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        metaComponentName={MetaConstants.MenuHeader}\n        testID={testID}\n        // back button\n        showBackButton={false}\n        // close button\n        showCloseButton={false}\n        paddingX={overlayPaddingX}\n        marginTop=\"spacing.0\"\n        marginBottom={headerMarginBottom}\n        showDivider={false}\n      />\n      <MenuDivider />\n    </>\n  );\n};\n\nconst MenuHeader = assignWithoutSideEffects(_MenuHeader, {\n  componentId: 'MenuHeader',\n});\n\nconst _MenuFooter = ({ children, testID }: MenuFooterProps): React.ReactElement => {\n  return (\n    <Box marginTop=\"spacing.2\">\n      <MenuDivider />\n      <BaseFooter\n        metaComponentName={MetaConstants.MenuFooter}\n        showDivider={false}\n        padding={[footerPaddingTop, overlayPaddingX, 'spacing.0', overlayPaddingX]}\n        testID={testID}\n      >\n        {children}\n      </BaseFooter>\n    </Box>\n  );\n};\n\nconst MenuFooter = assignWithoutSideEffects(_MenuFooter, {\n  componentId: 'MenuFooter',\n});\n\nexport { MenuHeader, MenuFooter };\n"],"names":["_MenuHeader","_ref","title","subtitle","leading","titleSuffix","trailing","testID","_jsxs","_Fragment","children","_jsx","BaseHeader","metaComponentName","MetaConstants","MenuHeader","showBackButton","showCloseButton","paddingX","overlayPaddingX","marginTop","marginBottom","headerMarginBottom","showDivider","MenuDivider","assignWithoutSideEffects","componentId","_MenuFooter","_ref2","Box","BaseFooter","MenuFooter","padding","footerPaddingTop"],"mappings":";;;;;;;;;;;;AAAA;AAWA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO0B;AAAA,EAAA,IANzCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,MAAM,GAAAN,IAAA,CAANM,MAAM,CAAA;EAEN,oBACEC,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,cACEC,GAAA,CAACC,UAAU,EAAA;AACTV,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,QAAQ,EAAEA,QAAS;AACnBD,MAAAA,WAAW,EAAEA,WAAY;MACzBQ,iBAAiB,EAAEC,aAAa,CAACC,UAAW;AAC5CR,MAAAA,MAAM,EAAEA,MAAAA;AACR;AAAA;AACAS,MAAAA,cAAc,EAAE,KAAA;AAChB;AAAA;AACAC,MAAAA,eAAe,EAAE,KAAM;AACvBC,MAAAA,QAAQ,EAAEC,eAAgB;AAC1BC,MAAAA,SAAS,EAAC,WAAW;AACrBC,MAAAA,YAAY,EAAEC,kBAAmB;AACjCC,MAAAA,WAAW,EAAE,KAAA;AAAM,KACpB,CAAC,eACFZ,GAAA,CAACa,WAAW,IAAE,CAAC,CAAA;AAAA,GACf,CAAC,CAAA;AAEP,CAAC,CAAA;AAED,IAAMT,UAAU,gBAAGU,wBAAwB,CAACzB,WAAW,EAAE;AACvD0B,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC,EAAC;AAEF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAAkE;AAAA,EAAA,IAA5DlB,QAAQ,GAAAkB,KAAA,CAARlB,QAAQ;IAAEH,MAAM,GAAAqB,KAAA,CAANrB,MAAM,CAAA;EACrC,oBACEC,IAAA,CAACqB,GAAG,EAAA;AAACT,IAAAA,SAAS,EAAC,WAAW;IAAAV,QAAA,EAAA,cACxBC,GAAA,CAACa,WAAW,IAAE,CAAC,eACfb,GAAA,CAACmB,UAAU,EAAA;MACTjB,iBAAiB,EAAEC,aAAa,CAACiB,UAAW;AAC5CR,MAAAA,WAAW,EAAE,KAAM;MACnBS,OAAO,EAAE,CAACC,gBAAgB,EAAEd,eAAe,EAAE,WAAW,EAAEA,eAAe,CAAE;AAC3EZ,MAAAA,MAAM,EAAEA,MAAO;AAAAG,MAAAA,QAAA,EAEdA,QAAAA;AAAQ,KACC,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMqB,UAAU,gBAAGN,wBAAwB,CAACE,WAAW,EAAE;AACvDD,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC;;;;"}
+{"version":3,"file":"MenuHeaderFooter.web.js","sources":["../../../../../../../src/components/Menu/VisualSubComponents/MenuHeaderFooter.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\nimport { footerPaddingTop, headerMarginBottom, overlayPaddingX } from '../tokens';\nimport type { MenuFooterProps, MenuHeaderProps } from '../types';\nimport { MenuDivider } from './MenuDivider';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { MetaConstants } from '~utils/metaAttribute/metaConstants';\nimport { Box } from '~components/Box';\n\nconst _MenuHeader = ({\n  title,\n  subtitle,\n  leading,\n  titleSuffix,\n  trailing,\n  testID,\n}: MenuHeaderProps): React.ReactElement => {\n  return (\n    <Box marginBottom=\"spacing.3\">\n      <BaseHeader\n        title={title}\n        subtitle={subtitle}\n        leading={leading}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        metaComponentName={MetaConstants.MenuHeader}\n        testID={testID}\n        // back button\n        showBackButton={false}\n        // close button\n        showCloseButton={false}\n        paddingX={overlayPaddingX}\n        marginTop=\"spacing.0\"\n        marginBottom={headerMarginBottom}\n        showDivider={false}\n      />\n      <MenuDivider />\n    </Box>\n  );\n};\n\nconst MenuHeader = assignWithoutSideEffects(_MenuHeader, {\n  componentId: 'MenuHeader',\n});\n\nconst _MenuFooter = ({ children, testID }: MenuFooterProps): React.ReactElement => {\n  return (\n    <Box marginTop=\"spacing.3\">\n      <MenuDivider />\n      <BaseFooter\n        metaComponentName={MetaConstants.MenuFooter}\n        showDivider={false}\n        padding={[footerPaddingTop, overlayPaddingX, 'spacing.0', overlayPaddingX]}\n        testID={testID}\n      >\n        {children}\n      </BaseFooter>\n    </Box>\n  );\n};\n\nconst MenuFooter = assignWithoutSideEffects(_MenuFooter, {\n  componentId: 'MenuFooter',\n});\n\nexport { MenuHeader, MenuFooter };\n"],"names":["_MenuHeader","_ref","title","subtitle","leading","titleSuffix","trailing","testID","_jsxs","Box","marginBottom","children","_jsx","BaseHeader","metaComponentName","MetaConstants","MenuHeader","showBackButton","showCloseButton","paddingX","overlayPaddingX","marginTop","headerMarginBottom","showDivider","MenuDivider","assignWithoutSideEffects","componentId","_MenuFooter","_ref2","BaseFooter","MenuFooter","padding","footerPaddingTop"],"mappings":";;;;;;;;;;;;AAAA;AAWA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO0B;AAAA,EAAA,IANzCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,MAAM,GAAAN,IAAA,CAANM,MAAM,CAAA;EAEN,oBACEC,IAAA,CAACC,GAAG,EAAA;AAACC,IAAAA,YAAY,EAAC,WAAW;IAAAC,QAAA,EAAA,cAC3BC,GAAA,CAACC,UAAU,EAAA;AACTX,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,QAAQ,EAAEA,QAAS;AACnBD,MAAAA,WAAW,EAAEA,WAAY;MACzBS,iBAAiB,EAAEC,aAAa,CAACC,UAAW;AAC5CT,MAAAA,MAAM,EAAEA,MAAAA;AACR;AAAA;AACAU,MAAAA,cAAc,EAAE,KAAA;AAChB;AAAA;AACAC,MAAAA,eAAe,EAAE,KAAM;AACvBC,MAAAA,QAAQ,EAAEC,eAAgB;AAC1BC,MAAAA,SAAS,EAAC,WAAW;AACrBX,MAAAA,YAAY,EAAEY,kBAAmB;AACjCC,MAAAA,WAAW,EAAE,KAAA;AAAM,KACpB,CAAC,eACFX,GAAA,CAACY,WAAW,IAAE,CAAC,CAAA;AAAA,GACZ,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMR,UAAU,gBAAGS,wBAAwB,CAACzB,WAAW,EAAE;AACvD0B,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC,EAAC;AAEF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAAkE;AAAA,EAAA,IAA5DjB,QAAQ,GAAAiB,KAAA,CAARjB,QAAQ;IAAEJ,MAAM,GAAAqB,KAAA,CAANrB,MAAM,CAAA;EACrC,oBACEC,IAAA,CAACC,GAAG,EAAA;AAACY,IAAAA,SAAS,EAAC,WAAW;IAAAV,QAAA,EAAA,cACxBC,GAAA,CAACY,WAAW,IAAE,CAAC,eACfZ,GAAA,CAACiB,UAAU,EAAA;MACTf,iBAAiB,EAAEC,aAAa,CAACe,UAAW;AAC5CP,MAAAA,WAAW,EAAE,KAAM;MACnBQ,OAAO,EAAE,CAACC,gBAAgB,EAAEZ,eAAe,EAAE,WAAW,EAAEA,eAAe,CAAE;AAC3Eb,MAAAA,MAAM,EAAEA,MAAO;AAAAI,MAAAA,QAAA,EAEdA,QAAAA;AAAQ,KACC,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMmB,UAAU,gBAAGL,wBAAwB,CAACE,WAAW,EAAE;AACvDD,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC;;;;"}

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

@@ -24,6 +24,7 @@ import '../../utils/assignWithoutSideEffects/index.js';
 import '../BladeProvider/index.js';
 import getIn from '../../utils/lodashButBetter/get.js';
 import '../../utils/makeAccessible/index.js';
+import { useIsMobile } from '../../utils/useIsMobile.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getComponentId, isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import useTheme from '../BladeProvider/useTheme.js';
@@ -152,9 +153,15 @@ var _Table = function _Table(_ref3) {
     _React$useState10 = _slicedToArray(_React$useState9, 2),
     headerRowDensity = _React$useState10[0],
     setHeaderRowDensity = _React$useState10[1];
+  var _React$useState11 = React__default.useState(false),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    hasHoverActions = _React$useState12[0],
+    setHasHoverActions = _React$useState12[1];
   // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky
   var shouldHeaderBeSticky = isHeaderSticky !== null && isHeaderSticky !== void 0 ? isHeaderSticky : isFirstColumnSticky;
   var backgroundColor = tableBackgroundColor;
+  var isMobile = useIsMobile();
+  var lastHoverActionsColWidth = isMobile ? '1fr' : '0px';
   var _usePresence = usePresence(isRefreshing, {
       transitionDuration: theme.motion.duration.quick
     }),
@@ -169,7 +176,7 @@ var _Table = function _Table(_ref3) {
   var firstColumnStickyFooterCellCSS = isFirstColumnSticky ? "\n  &:nth-of-type(1) {\n    left: 0 !important;\n    position: sticky !important;\n    z-index: ".concat(firstColumnStickyZIndex, " !important;\n  }\n  ").concat(selectionType === 'multiple' && "&:nth-of-type(2) {\n    left: ".concat(checkboxCellWidth, "px !important;\n    position: sticky !important;\n    z-index: ").concat(firstColumnStickyZIndex, " !important;\n  }\n  ")) : '';
   var firstColumnStickyBodyCellCSS = isFirstColumnSticky ? "\n  &:nth-of-type(1) {\n    left: 0 !important;\n    position: sticky !important;\n    z-index: ".concat(firstColumnStickyZIndex, " !important;\n  }\n  ").concat(selectionType === 'multiple' && "&:nth-of-type(2) {\n    left: ".concat(checkboxCellWidth, "px !important;\n    position: sticky !important;\n    z-index: ").concat(firstColumnStickyZIndex, " !important;\n  }\n  ")) : '';
   var tableTheme = useTheme$1({
-    Table: "\n    height:".concat(isFooterSticky ? "100%" : undefined, ";\n    border: ").concat(makeBorderSize(theme.border.width.thin), " solid ").concat(theme.colors.surface.border.gray.muted, ";\n    --data-table-library_grid-template-columns: ").concat(gridTemplateColumns !== null && gridTemplateColumns !== void 0 ? gridTemplateColumns : " ".concat(selectionType === 'multiple' ? 'min-content' : '', " repeat(").concat(columnCount, ",minmax(100px, 1fr)) !important;"), " !important;\n    background-color: ").concat(getIn(theme.colors, backgroundColor), ";\n    "),
+    Table: "\n    height:".concat(isFooterSticky ? "100%" : undefined, ";\n    border: ").concat(makeBorderSize(theme.border.width.thin), " solid ").concat(theme.colors.surface.border.gray.muted, ";\n    --data-table-library_grid-template-columns: ").concat(gridTemplateColumns ? "".concat(gridTemplateColumns, " ").concat(hasHoverActions ? lastHoverActionsColWidth : '') : " ".concat(selectionType === 'multiple' ? 'min-content' : '', " repeat(").concat(columnCount, ",minmax(100px, 1fr)) ").concat(hasHoverActions ? lastHoverActionsColWidth : '', " !important;"), " !important;\n    background-color: ").concat(getIn(theme.colors, backgroundColor), ";\n    "),
     HeaderCell: "\n    position: ".concat(shouldHeaderBeSticky ? 'sticky' : 'relative', ";\n    \n    top: ").concat(shouldHeaderBeSticky ? '0' : undefined, ";\n    ").concat(firstColumnStickyHeaderCellCSS, "\n    "),
     Cell: "\n    ".concat(firstColumnStickyBodyCellCSS, "\n    "),
     FooterCell: "\n    position: ".concat(isFooterSticky ? 'sticky' : 'relative', ";\n    bottom: ").concat(isFooterSticky ? '0' : undefined, ";\n    ").concat(firstColumnStickyFooterCellCSS, "\n    ")
@@ -308,9 +315,11 @@ var _Table = function _Table(_ref3) {
       backgroundColor: backgroundColor,
       headerRowDensity: headerRowDensity,
       setHeaderRowDensity: setHeaderRowDensity,
-      showBorderedCells: showBorderedCells
+      showBorderedCells: showBorderedCells,
+      hasHoverActions: hasHoverActions,
+      setHasHoverActions: setHasHoverActions
     };
-  }, [selectionType, selectedRows, totalItems, toggleRowSelectionById, toggleAllRowsSelection, deselectAllRows, rowDensity, toggleSort, currentSortedState, setPaginationPage, setPaginationRowSize, currentPaginationState, showStripedRows, disabledRows, setDisabledRows, paginationType, setPaginationType, backgroundColor, headerRowDensity, setHeaderRowDensity, showBorderedCells]);
+  }, [selectionType, selectedRows, totalItems, toggleRowSelectionById, toggleAllRowsSelection, deselectAllRows, rowDensity, toggleSort, currentSortedState, setPaginationPage, setPaginationRowSize, currentPaginationState, showStripedRows, disabledRows, setDisabledRows, paginationType, setPaginationType, backgroundColor, headerRowDensity, setHeaderRowDensity, showBorderedCells, hasHoverActions, setHasHoverActions]);
   return /*#__PURE__*/jsx(TableContext.Provider, {
     value: tableContext,
     children: isLoading ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({