@orfium/ictinus 5.43.2 → 5.43.4

package/dist/src/components/Typography/Typography.d.ts

@@ -24,5 +24,10 @@ export type TypographyProps = {
     id?: string;
 };
 export declare const detectComponentBasedOnType: (variant: TypographyVariant) => TypographyComponent;
+/**
+ *
+ * @deprecated {@link Typography} has been deprecated; use vanilla Text instead.
+ *
+ */
 declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Typography;

package/dist/src/data-table/DataTable.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/data-table/DataTableBulkActions.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from '../vanilla/Box';
+export type DataTableBulkActionsProps = BoxProps<'div'>;
+export declare function DataTableBulkActions({ children, ...props }: DataTableBulkActionsProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/data-table/DataTableCounter.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from '../vanilla/Box';
+export type DataTableCounterProps = BoxProps<'div', {
+    count?: number;
+    singular?: string;
+    plural?: string;
+}>;
+export declare function DataTableCounter({ count: countProp, singular, plural, ...props }: DataTableCounterProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/data-table/index.d.ts

@@ -1,5 +1,7 @@
 export * from './DataTable';
 export * from './DataTableBody';
+export * from './DataTableBulkActions';
 export * from './DataTableCheckbox';
+export * from './DataTableCounter';
 export * from './DataTableEditColumns';
 export * from './DataTableHeader';

package/dist/src/index.d.ts

@@ -19,6 +19,7 @@ export type { BorderRadiusKey, BorderWidthKey, Colors, ColorsKey, FontFamilyKey,
 export { semanticVariablesBoxShadow, semanticVariablesColors, semanticVariablesTypography, } from '@orfium/tokens';
 export type { SemanticBoxShadow, SemanticBoxShadowKey, SemanticColors, SemanticColorsKey, SemanticDisabledState, SemanticState, SemanticTypography, SemanticTypographyKey, TypographyKeys, TypographyObject, } from '@orfium/tokens';
 export type { DotKeys, Token, TokensObject } from '@orfium/tokens';
+export { vars } from '@orfium/tokens';
 export type { OnCheckHandler } from './hooks/useCheck';
 export type { ClickEvent, ClickHandler } from './hooks/useLoading';
 export type { ModalContentProps } from './components/Modal/ModalContent/ModalContent';

package/dist/vanilla/index.d.ts

@@ -1706,6 +1706,9 @@ declare const DataTableBody: react.ForwardRefExoticComponent<{
     className?: string;
 }>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
+type DataTableBulkActionsProps = BoxProps<'div'>;
+declare function DataTableBulkActions({ children, ...props }: DataTableBulkActionsProps): _emotion_react_jsx_runtime.JSX.Element;
+
 declare const CheckBox: react__default.ForwardRefExoticComponent<any>;
 
 type DataTableCheckboxProps = ComponentPropsWithoutRef<typeof CheckBox>;
@@ -1714,6 +1717,13 @@ type DataTableCheckboxProps = ComponentPropsWithoutRef<typeof CheckBox>;
  */
 declare const DataTableCheckbox: react.ForwardRefExoticComponent<any>;
 
+type DataTableCounterProps = BoxProps<'div', {
+    count?: number;
+    singular?: string;
+    plural?: string;
+}>;
+declare function DataTableCounter({ count: countProp, singular, plural, ...props }: DataTableCounterProps): _emotion_react_jsx_runtime.JSX.Element;
+
 declare function DataTableEditColumns(): _emotion_react_jsx_runtime.JSX.Element;
 
 type DataTableHeaderProps = BoxProps;
@@ -6164,5 +6174,5 @@ declare namespace TooltipTrigger {
     var displayName: string;
 }
 
-export { AccountIcon, AlbumIcon, AnalyticsIcon, AppsIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArtistIcon, AssetIcon, AudioIcon, AudioOffIcon, BookmarkIcon, BookmarkOffIcon, Box, BroadcastIcon, CalendarIcon, CatalogIcon, ChannelIcon, ChatIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CinemaIcon, ClaimIcon, CloseIcon, ColumnChooserIcon, CompositionIcon, ConcertIcon, ConflictIcon, ConvertIcon, CopyIcon, CueSheetIcon, DashboardIcon, DataTable, DataTableBody, DataTableCheckbox, DataTableEditColumns, DataTableHeader, DatasetIcon, DeleteIcon, DeliveryIcon, DetailsIcon, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DigitalIcon, DistributionIcon, DownloadIcon, EarningsIcon, EditIcon, EntitiesIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FavoriteIcon, FavoriteOffIcon, FileIcon, FilterIcon, FlagIcon, FlagOffIcon, ForwardIcon, FreezeIcon, HelpIcon, ICONS, Icon, ImageIcon, ImageOffIcon, IncomeIcon, InformationalIcon, InsightIcon, InvoiceIcon, IssueIcon, KeywordIcon, LanguageIcon, LegalIcon, LicenseIcon, LinkIcon, LocationIcon, LockIcon, LoginIcon, LogoutIcon, MailIcon, ManualIcon, MediaFileIcon, Menu, MenuContent, MenuDescription, MenuHeader, MenuIcon, MenuItem, MenuLabel, MenuSection, MenuSeparator, MenuSubmenu, MenuTrigger, MinusIcon, MoreOptionsIcon, NextIcon, NotificationIcon, OrganizationIcon, PageFirstIcon, PageLastIcon, PairIcon, PauseIcon, PendingIcon, PlayIcon, PlaycountIcon, PlusIcon, PolicyIcon, Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger, PreviousIcon, PublicPerformanceIcon, PublisherIcon, RadioIcon, RecordLabelIcon, RecordingIcon, RedoIcon, RefreshIcon, ReportIcon, RestoreIcon, ResumeIcon, ReviewIcon, RewindIcon, RoleIcon, SearchFilledIcon, SearchIcon, SettingsIcon, ShareIcon, SortAscendingIcon, SortDescendingIcon, SortIcon, StatusIndicatorIcon, StopIcon, SuccessIcon, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, TagIcon, TelevisionIcon, Text, ThemeProvider, ThumbsDownIcon, ThumbsUpIcon, Tooltip, TooltipContent, TooltipTrigger, TrendingDownIcon, TrendingUpIcon, TriangleDownIcon, TriangleLeftIcon, TriangleRightIcon, TriangleUpIcon, UndoIcon, UnfreezeIcon, UnlinkIcon, UnlockIcon, UnpairIcon, UnverifiedIcon, UpdateIcon, UploadIcon, UsageIcon, UserIcon, UsersIcon, VerifiedIcon, VideoIcon, VideoOffIcon, WarningIcon, WorkIcon, WriterIcon, YouTubeIcon, extractBoxProps, useTheme };
-export type { BoxProps, DataTableBodyProps, DataTableCheckboxProps, DataTableHeaderProps, DataTableProps, DialogBodyProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogTitleProps, IconProps, MenuContentProps, MenuHeaderProps, MenuItemProps, MenuSectionProps, MenuTriggerProps, PopoverContentProps, PopoverProps, TableBodyProps, TableCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableProps, TableRowProps, TextProps, TooltipContentProps, TooltipProps };
+export { AccountIcon, AlbumIcon, AnalyticsIcon, AppsIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArtistIcon, AssetIcon, AudioIcon, AudioOffIcon, BookmarkIcon, BookmarkOffIcon, Box, BroadcastIcon, CalendarIcon, CatalogIcon, ChannelIcon, ChatIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CinemaIcon, ClaimIcon, CloseIcon, ColumnChooserIcon, CompositionIcon, ConcertIcon, ConflictIcon, ConvertIcon, CopyIcon, CueSheetIcon, DashboardIcon, DataTable, DataTableBody, DataTableBulkActions, DataTableCheckbox, DataTableCounter, DataTableEditColumns, DataTableHeader, DatasetIcon, DeleteIcon, DeliveryIcon, DetailsIcon, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DigitalIcon, DistributionIcon, DownloadIcon, EarningsIcon, EditIcon, EntitiesIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FavoriteIcon, FavoriteOffIcon, FileIcon, FilterIcon, FlagIcon, FlagOffIcon, ForwardIcon, FreezeIcon, HelpIcon, ICONS, Icon, ImageIcon, ImageOffIcon, IncomeIcon, InformationalIcon, InsightIcon, InvoiceIcon, IssueIcon, KeywordIcon, LanguageIcon, LegalIcon, LicenseIcon, LinkIcon, LocationIcon, LockIcon, LoginIcon, LogoutIcon, MailIcon, ManualIcon, MediaFileIcon, Menu, MenuContent, MenuDescription, MenuHeader, MenuIcon, MenuItem, MenuLabel, MenuSection, MenuSeparator, MenuSubmenu, MenuTrigger, MinusIcon, MoreOptionsIcon, NextIcon, NotificationIcon, OrganizationIcon, PageFirstIcon, PageLastIcon, PairIcon, PauseIcon, PendingIcon, PlayIcon, PlaycountIcon, PlusIcon, PolicyIcon, Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger, PreviousIcon, PublicPerformanceIcon, PublisherIcon, RadioIcon, RecordLabelIcon, RecordingIcon, RedoIcon, RefreshIcon, ReportIcon, RestoreIcon, ResumeIcon, ReviewIcon, RewindIcon, RoleIcon, SearchFilledIcon, SearchIcon, SettingsIcon, ShareIcon, SortAscendingIcon, SortDescendingIcon, SortIcon, StatusIndicatorIcon, StopIcon, SuccessIcon, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, TagIcon, TelevisionIcon, Text, ThemeProvider, ThumbsDownIcon, ThumbsUpIcon, Tooltip, TooltipContent, TooltipTrigger, TrendingDownIcon, TrendingUpIcon, TriangleDownIcon, TriangleLeftIcon, TriangleRightIcon, TriangleUpIcon, UndoIcon, UnfreezeIcon, UnlinkIcon, UnlockIcon, UnpairIcon, UnverifiedIcon, UpdateIcon, UploadIcon, UsageIcon, UserIcon, UsersIcon, VerifiedIcon, VideoIcon, VideoOffIcon, WarningIcon, WorkIcon, WriterIcon, YouTubeIcon, extractBoxProps, useTheme };
+export type { BoxProps, DataTableBodyProps, DataTableBulkActionsProps, DataTableCheckboxProps, DataTableCounterProps, DataTableHeaderProps, DataTableProps, DialogBodyProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogTitleProps, IconProps, MenuContentProps, MenuHeaderProps, MenuItemProps, MenuSectionProps, MenuTriggerProps, PopoverContentProps, PopoverProps, TableBodyProps, TableCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableProps, TableRowProps, TextProps, TooltipContentProps, TooltipProps };

package/dist/vanilla/index.js

@@ -1,6 +1,8 @@
 export { DataTable } from './src/data-table/DataTable.js';
 export { DataTableBody } from './src/data-table/DataTableBody.js';
+export { DataTableBulkActions } from './src/data-table/DataTableBulkActions.js';
 export { DataTableCheckbox } from './src/data-table/DataTableCheckbox.js';
+export { DataTableCounter } from './src/data-table/DataTableCounter.js';
 export { DataTableEditColumns } from './src/data-table/DataTableEditColumns.js';
 export { DataTableHeader } from './src/data-table/DataTableHeader.js';
 export { ICONS, Icon } from './src/icon/Icon.js';

package/dist/vanilla/package.json.js

@@ -1,3 +1,3 @@
-var version = "5.43.2";
+var version = "5.43.4";
 
 export { version };

package/dist/vanilla/src/components/IconButton/IconButton.js

@@ -4,27 +4,36 @@ import ButtonBase from '../ButtonBase/ButtonBase.js';
 import { BUTTON_ICON_COLOR } from '../ButtonBase/constants.js';
 import { Icon } from '../../icon/Icon.js';
 
-const IconButton = React__default.forwardRef((props, ref) => {
-  const { iconName, size = "normal", type = "primary", shape = "circle", dataTestPrefixId } = props;
-  return /* @__PURE__ */ jsx(
+const IconButton = React__default.forwardRef(
+  ({
+    size = "normal",
+    type = "primary",
+    shape = "circle",
+    iconName,
+    iconColor,
+    dataTestPrefixId,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
     ButtonBase,
     {
       ...props,
       ref,
       isIconButton: true,
       shape,
+      size,
+      type,
       dataTestPrefixId: dataTestPrefixId ? `${dataTestPrefixId}-icon-` : "icon-",
       children: /* @__PURE__ */ jsx(
         Icon,
         {
           size: size === "compact" ? "sm" : "md",
           name: iconName,
-          color: BUTTON_ICON_COLOR[type]
+          color: iconColor ?? BUTTON_ICON_COLOR[type]
         }
       )
     }
-  );
-});
+  )
+);
 IconButton.displayName = "IconButton";
 
 export { IconButton as default };

package/dist/vanilla/src/data-table/DataTableBulkActions.js

@@ -0,0 +1,13 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { useDataTableContext } from './DataTableContext.js';
+
+function DataTableBulkActions({ children, ...props }) {
+  const { table } = useDataTableContext();
+  const hasSelection = table.getSelectedRowModel().rows.length > 0;
+  if (!hasSelection) return null;
+  return /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", gap: "sm", ...props, children });
+}
+
+export { DataTableBulkActions };

package/dist/vanilla/src/data-table/DataTableCounter.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { Text } from '../../Text/Text.js';
+import { useDataTableContext } from './DataTableContext.js';
+
+function DataTableCounter({
+  count: countProp,
+  singular = "item",
+  plural = "items",
+  ...props
+}) {
+  const { table } = useDataTableContext();
+  const selectedCount = table.getSelectedRowModel().rows.length;
+  const totalCount = countProp ?? table.getRowCount();
+  const hasSelection = selectedCount > 0;
+  const count = hasSelection ? selectedCount : totalCount;
+  const label = count === 1 ? singular : plural;
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", ...props, children: [
+    /* @__PURE__ */ jsx(Text, { typography: "label02", color: "active", children: count.toLocaleString() }),
+    /* @__PURE__ */ jsx(Text, { typography: "label02", children: hasSelection ? `${label} selected` : label })
+  ] });
+}
+
+export { DataTableCounter };

package/dist/vanilla/src/data-table/DataTableEditColumns.js

@@ -49,7 +49,7 @@ function DataTableEditColumns() {
         children: allColumns.map((column) => {
           const canHide = column.getCanHide();
           const isSelected = canHide ? selectedColumns.has(column.id) : true;
-          const label = column.columnDef.meta?.label;
+          const label = column.columnDef.meta?.label ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : void 0);
           if (!label) {
             return null;
           }

package/dist/vanilla/src/data-table/DataTableHeaderCell.js

@@ -36,7 +36,7 @@ const DataTableHeaderCell = forwardRef(
         ref,
         "data-test": true,
         ...props,
-        children: typeof children !== "string" || !header.column.getCanSort() ? children : /* @__PURE__ */ jsxs(
+        children: typeof children === "string" ? /* @__PURE__ */ jsxs(
           Box,
           {
             display: "flex",
@@ -84,7 +84,7 @@ const DataTableHeaderCell = forwardRef(
                   /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", size: "3", children: /* @__PURE__ */ jsx(Icon, { name: "informational", size: "xs", color: "secondary" }) }) }),
                   /* @__PURE__ */ jsx(TooltipContent, { maxW: "22", children: header.column.columnDef.meta.tooltip })
                 ] }),
-                /* @__PURE__ */ jsxs(
+                header.column.getCanSort() && /* @__PURE__ */ jsxs(
                   ActionsContent,
                   {
                     display: "grid",
@@ -117,19 +117,21 @@ const DataTableHeaderCell = forwardRef(
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx(ActionsContent, { visible: sortDir ? "always" : "if-needed", children: /* @__PURE__ */ jsxs(Menu, { children: [
+              (header.column.getCanSort() || header.column.getCanPin()) && /* @__PURE__ */ jsx(ActionsContent, { visible: sortDir ? "always" : "if-needed", children: /* @__PURE__ */ jsxs(Menu, { children: [
                 /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(IconButton, { type: "tertiary", size: "compact", iconName: "moreOptions" }) }),
                 /* @__PURE__ */ jsxs(MenuContent, { style: { minWidth: "220px" }, children: [
-                  /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(true), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
-                    /* @__PURE__ */ jsx(Icon, { name: "sortDescending" }),
-                    /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort descending (z-a)" })
-                  ] }) }),
-                  /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(false), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
-                    /* @__PURE__ */ jsx(Icon, { name: "sortAscending" }),
-                    /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort ascending (a-z)" })
-                  ] }) }),
+                  header.column.getCanSort() && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(true), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
+                      /* @__PURE__ */ jsx(Icon, { name: "sortDescending" }),
+                      /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort descending (z-a)" })
+                    ] }) }),
+                    /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(false), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
+                      /* @__PURE__ */ jsx(Icon, { name: "sortAscending" }),
+                      /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort ascending (a-z)" })
+                    ] }) })
+                  ] }),
                   header.column.getCanPin() && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(MenuSeparator, {}),
+                    header.column.getCanSort() && /* @__PURE__ */ jsx(MenuSeparator, {}),
                     /* @__PURE__ */ jsx(
                       MenuItem,
                       {
@@ -177,7 +179,7 @@ const DataTableHeaderCell = forwardRef(
               ] }) })
             ]
           }
-        )
+        ) : children
       }
     ) });
   }

package/eslint.config.mjs

@@ -111,7 +111,7 @@ export default defineConfig([
       ],
 
       'react/prop-types': 'off',
-      'react/button-has-type': 'warn',
+      'react/button-has-type': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       'react/no-array-index-key': 'warn',
       'react/no-render-return-value': 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.43.2",
+  "version": "5.43.4",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",

package/src/components/Box/Box.tsx

@@ -10,6 +10,11 @@ import { cssResolver, omitedCSSprops, pickCSSProperties, pickNonCSSProps } from
 
 export type BoxProps = StyledBoxProps & React.HTMLAttributes<HTMLDivElement>;
 
+/**
+ *
+ * @deprecated {@link Box} has been deprecated; use vanilla Box instead.
+ *
+ */
 const Box = forwardRef<HTMLDivElement, BoxProps>(({ children, ...rest }, ref) => {
   const theme = useTheme();
   const cssPropsOnly = pickCSSProperties(rest);

package/src/components/Icon/Icon.tsx

@@ -24,6 +24,11 @@ export type IconProps = {
 } & DivProps &
   TestProps;
 
+/**
+ *
+ * @deprecated {@link Icon} has been deprecated; use vanilla Icon instead.
+ *
+ */
 const Icon = React.forwardRef<HTMLDivElement, IconProps>((props, ref) => {
   props = useSlotProps(props, 'icon');
   const {

package/src/components/IconButton/IconButton.tsx

@@ -5,6 +5,7 @@ import type { ButtonBaseProps } from 'components/ButtonBase/ButtonBase';
 import ButtonBase from 'components/ButtonBase/ButtonBase';
 import { BUTTON_ICON_COLOR } from 'components/ButtonBase/constants';
 import { Icon, type IconProps } from '../../icon';
+import { type BoxProps } from '../../vanilla/Box';
 
 export type IconButtonShape = 'circle' | 'square';
 
@@ -14,31 +15,44 @@ export type IconButtonProps = Omit<
 > & {
   /** This property defines the type of the IconButton */
   type?: PrimitiveButtonTypes;
-  /** This property defines witch icon to use */
-  iconName: IconProps['name'];
   /** This property defines the shape of the IconButton */
   shape?: IconButtonShape;
+  /** This property defines witch icon to use */
+  iconName: IconProps['name'];
+  /** Custom icon color */
+  iconColor?: BoxProps['color'];
 };
 
-const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
-  const { iconName, size = 'normal', type = 'primary', shape = 'circle', dataTestPrefixId } = props;
-
-  return (
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      size = 'normal',
+      type = 'primary',
+      shape = 'circle',
+      iconName,
+      iconColor,
+      dataTestPrefixId,
+      ...props
+    },
+    ref
+  ) => (
     <ButtonBase
       {...props}
       ref={ref}
       isIconButton
       shape={shape}
+      size={size}
+      type={type}
       dataTestPrefixId={dataTestPrefixId ? `${dataTestPrefixId}-icon-` : 'icon-'}
     >
       <Icon
         size={size === 'compact' ? 'sm' : 'md'}
         name={iconName}
-        color={BUTTON_ICON_COLOR[type]}
+        color={iconColor ?? BUTTON_ICON_COLOR[type]}
       />
     </ButtonBase>
-  );
-});
+  )
+);
 
 IconButton.displayName = 'IconButton';
 

package/src/components/Menu/Menu.tsx

@@ -30,6 +30,11 @@ export type MenuProps = {
   sx?: { listProps?: { maxHeight?: number; width?: number } };
 } & TestProps;
 
+/**
+ *
+ * @deprecated {@link Menu} has been deprecated; use vanilla Menu instead.
+ *
+ */
 const Menu: React.FC<MenuProps> = ({
   selectionMode = 'single',
   rowSize = 'normal',

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,3 @@
-import { vars } from '@orfium/tokens';
 import Card from 'components/Card';
 import IconButton from 'components/IconButton';
 import useEscape from 'hooks/useEscape';
@@ -72,7 +71,7 @@ const Modal: React.FCC<ModalProps> = ({
               type="tertiary"
               iconName="close"
               onClick={onClose}
-              color={vars.color.text.default.secondary}
+              iconColor="secondary"
               dataTestId="modal-close"
             />
           </div>

package/src/components/Table/Table.tsx

@@ -13,6 +13,11 @@ import useTable from './hooks/useTable';
 import { tableContainer, tableStyles } from './Table.style';
 import type { TableProps } from './types';
 
+/**
+ *
+ * @deprecated {@link Table} has been deprecated; use DataTable instead.
+ *
+ */
 const Table = <TData extends NoUndefined<TData>>({
   type = 'read-only',
   rowsConfig,

package/src/components/Table/components/TPagination/TPagination.tsx

@@ -1,4 +1,3 @@
-import { vars } from '@orfium/tokens';
 import IconButton from 'components/IconButton';
 import Select from 'components/Select';
 import type { TableProps } from 'components/Table/types';
@@ -64,7 +63,6 @@ const TPagination: React.FC<TPaginationProps> = ({ pagination, isSticky, dataTes
         <div css={buttonsContainer()}>
           {isEnhancedPaginationVisible && (
             <IconButton
-              color={vars.color.text.default.secondary}
               iconName="pageFirst"
               size="compact"
               type="tertiary"
@@ -74,7 +72,6 @@ const TPagination: React.FC<TPaginationProps> = ({ pagination, isSticky, dataTes
             />
           )}
           <IconButton
-            color={vars.color.text.default.secondary}
             iconName="chevronLeft"
             size="compact"
             type="tertiary"
@@ -83,7 +80,6 @@ const TPagination: React.FC<TPaginationProps> = ({ pagination, isSticky, dataTes
             dataTestPrefixId={`${dataTestPrefixId}_table_go_to_prev_page`}
           />
           <IconButton
-            color={vars.color.text.default.secondary}
             iconName="chevronRight"
             size="compact"
             type="tertiary"
@@ -93,7 +89,6 @@ const TPagination: React.FC<TPaginationProps> = ({ pagination, isSticky, dataTes
           />
           {isEnhancedPaginationVisible && (
             <IconButton
-              color={vars.color.text.default.secondary}
               iconName="pageLast"
               size="compact"
               type="tertiary"

package/src/components/Typography/Typography.tsx

@@ -59,6 +59,11 @@ export const detectComponentBasedOnType = (variant: TypographyVariant): Typograp
   return 'p';
 };
 
+/**
+ *
+ * @deprecated {@link Typography} has been deprecated; use vanilla Text instead.
+ *
+ */
 // display name breaks storybook props
 // https://github.com/storybookjs/storybook/issues/13304
 // eslint-disable-next-line react/display-name