@veeqo/ui 11.3.1 → 11.4.0

package/dist/components/DataGrid/components/Body/Row/Row.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.module.scss"],"sourcesContent":[".row {\n  &:not(.selected) {\n    // Striping styles\n    &.striped:nth-of-type(odd) {\n      td, th {\n        background-color: var(--colors-neutral-grey-lightest);\n      }\n    }\n\n    // Hover styles\n    &:hover, &:hover.striped {\n      td, th {\n        background-color: #f2f8fc;\n      }\n    }\n  }\n\n  // Selected row cell styles\n  &.selected {\n    td, th {\n      background-color: var(--colors-brand-blue-lightest);\n    }\n  }\n\n  // Row borders\n  & + .row {\n    td, th {\n      border-top: 1px solid var(--colors-neutral-grey-base);\n    }\n  }\n}\n\n.accentColor {\n  & > td:first-of-type,\n  & > th:first-of-type {\n    &::before {\n      content: '';\n\n      position: absolute;\n      top: var(--sizes-none);\n      bottom: var(--sizes-none);\n      left: var(--sizes-none);\n      width: var(--sizes-1);\n\n      background-color: var(--accent-color);\n    }\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAKQA,WAAA,CAAA,mhCAAA;;;;;"}

package/dist/components/DataGrid/components/Body/Row/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useRowTheme } from './useRowTheme';

package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var buildClassnames = require('../../../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../../../../utils/assignCssVars.cjs');
+var Row_module = require('../Row.module.scss.cjs');
+
+/**
+ * Hook to generate theming variables and classes for a given row theme.
+ */
+const useRowTheme = ({ rowTheme }) => {
+    if (!(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor)) {
+        return {
+            themeVars: {},
+            themeClasses: undefined,
+        };
+    }
+    const themeClasses = buildClassnames.buildClassnames([(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor) ? Row_module.accentColor : undefined]);
+    return {
+        themeVars: assignCssVars.assignCssVars(rowTheme || {}),
+        themeClasses,
+    };
+};
+
+exports.useRowTheme = useRowTheme;
+//# sourceMappingURL=useRowTheme.cjs.map

package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowTheme.cjs","sources":["../../../../../../../src/components/DataGrid/components/Body/Row/hooks/useRowTheme.ts"],"sourcesContent":["import { RowTheme } from '../../../../types';\nimport { buildClassnames, assignCssVars } from '../../../../../../utils';\n\nimport styles from '../Row.module.scss';\n\ntype UseRowThemeProps = {\n  rowTheme?: RowTheme;\n};\n\n/**\n * Hook to generate theming variables and classes for a given row theme.\n */\nexport const useRowTheme = ({ rowTheme }: UseRowThemeProps) => {\n  if (!rowTheme?.accentColor) {\n    return {\n      themeVars: {},\n      themeClasses: undefined,\n    };\n  }\n\n  const themeClasses = buildClassnames([rowTheme?.accentColor ? styles.accentColor : undefined]);\n  return {\n    themeVars: assignCssVars(rowTheme || {}),\n    themeClasses,\n  };\n};\n"],"names":["buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;AASA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAoB,KAAI;IAC5D,IAAI,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,WAAW,CAAA,EAAE;QAC1B,OAAO;AACL,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,YAAY,EAAE,SAAS;SACxB;AACF;IAED,MAAM,YAAY,GAAGA,+BAAe,CAAC,CAAC,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,WAAW,IAAGC,UAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAC9F,OAAO;AACL,QAAA,SAAS,EAAEC,2BAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACxC,YAAY;KACb;AACH;;;;"}

package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { RowTheme } from '../../../../types';
+type UseRowThemeProps = {
+    rowTheme?: RowTheme;
+};
+/**
+ * Hook to generate theming variables and classes for a given row theme.
+ */
+export declare const useRowTheme: ({ rowTheme }: UseRowThemeProps) => {
+    themeVars: {};
+    themeClasses: undefined;
+} | {
+    themeVars: import("react").CSSProperties;
+    themeClasses: string;
+};
+export {};

package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.js

@@ -0,0 +1,24 @@
+import { buildClassnames } from '../../../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../../../../utils/assignCssVars.js';
+import styles from '../Row.module.scss.js';
+
+/**
+ * Hook to generate theming variables and classes for a given row theme.
+ */
+const useRowTheme = ({ rowTheme }) => {
+    if (!(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor)) {
+        return {
+            themeVars: {},
+            themeClasses: undefined,
+        };
+    }
+    const themeClasses = buildClassnames([(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor) ? styles.accentColor : undefined]);
+    return {
+        themeVars: assignCssVars(rowTheme || {}),
+        themeClasses,
+    };
+};
+
+export { useRowTheme };
+//# sourceMappingURL=useRowTheme.js.map

package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowTheme.js","sources":["../../../../../../../src/components/DataGrid/components/Body/Row/hooks/useRowTheme.ts"],"sourcesContent":["import { RowTheme } from '../../../../types';\nimport { buildClassnames, assignCssVars } from '../../../../../../utils';\n\nimport styles from '../Row.module.scss';\n\ntype UseRowThemeProps = {\n  rowTheme?: RowTheme;\n};\n\n/**\n * Hook to generate theming variables and classes for a given row theme.\n */\nexport const useRowTheme = ({ rowTheme }: UseRowThemeProps) => {\n  if (!rowTheme?.accentColor) {\n    return {\n      themeVars: {},\n      themeClasses: undefined,\n    };\n  }\n\n  const themeClasses = buildClassnames([rowTheme?.accentColor ? styles.accentColor : undefined]);\n  return {\n    themeVars: assignCssVars(rowTheme || {}),\n    themeClasses,\n  };\n};\n"],"names":[],"mappings":";;;;;AASA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAoB,KAAI;IAC5D,IAAI,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,WAAW,CAAA,EAAE;QAC1B,OAAO;AACL,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,YAAY,EAAE,SAAS;SACxB;AACF;IAED,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,WAAW,IAAG,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAC9F,OAAO;AACL,QAAA,SAAS,EAAE,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACxC,YAAY;KACb;AACH;;;;"}

package/dist/components/DataGrid/types/ColumnDefinition.d.ts

@@ -5,7 +5,7 @@ export type ColumnAccessor<T> = (row: T) => any;
 /**
  * Basic column definition.
  */
-export type BaseColumnDefinition = {
+export type BaseColumnDefinition<T> = {
     /**
      * Column ID, this must be a string.
      */
@@ -60,18 +60,24 @@ export type BaseColumnDefinition = {
      * Optional render method used to render a custom column header in place of the column title.
      */
     renderHeader?: () => ReactElement;
+    /**
+     * Optional function to generate a `data-testid` for cells in this column.
+     * @param row The row data for which the test ID should be generated.
+     * @returns The generated test ID string.
+     */
+    generateDataTestId?: (row: T) => string;
 };
 /**
  * Column which has an underlying value in the model, can be sorted.
  */
-export type DataColumnDefinition<T> = BaseColumnDefinition & {
+export type DataColumnDefinition<T> = BaseColumnDefinition<T> & {
     field: DeepKeys<T> | ColumnAccessor<T>;
     renderCell?: (fieldValue: any, row: T) => ReactElement | null | string;
 };
 /**
  * Column which is purely for display, not part of the model, cannot be sorted.
  */
-export type DisplayColumnDefinition<T> = BaseColumnDefinition & {
+export type DisplayColumnDefinition<T> = BaseColumnDefinition<T> & {
     renderCell: (row: T) => ReactElement | null | string;
 };
 export type ColumnDefinition<T> = DataColumnDefinition<T> | DisplayColumnDefinition<T>;

package/dist/components/DataGrid/types/DataGridProps.d.ts

@@ -1,4 +1,4 @@
-import React, { AriaAttributes, ReactElement } from 'react';
+import React, { AriaAttributes } from 'react';
 import { SizeScale } from 'Theme/modules/sizes';
 import { BorderMode, ResizeMode, SelectionMode } from './enums';
 import { ColumnDefinition } from './ColumnDefinition';
@@ -7,11 +7,7 @@ import { PinnedColumnState } from './PinnedColumnState';
 import { RowGroupingConfiguration } from './RowGroupingConfiguration';
 import { ColumnWidths } from './ColumnWidths';
 import { EmptyState } from './EmptyState';
-export type CustomState = {
-    iconSlot: ReactElement;
-    heading: string;
-    subHeading?: string;
-};
+import { RowThemeMap } from './RowTheme';
 export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
     /** General config */
     /**
@@ -81,6 +77,10 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Getter which returns the ID to use for a row (a string). If one isn't provided, the row index will be used instead.
      */
     getRowId?: (row: any, index: number, parent?: any) => string;
+    /**
+     * A map of row ID's to custom theming properties.
+     */
+    rowThemes?: RowThemeMap;
     /** Sorting */
     /**
      * The current sort state, including the selected column ID and sort direction.

package/dist/components/DataGrid/types/RowTheme.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Theming properties for a row within the DataGrid.
+ */
+export type RowTheme = {
+    /**
+     * The accent color for the row.
+     */
+    accentColor?: string;
+};
+/**
+ * A map of row ID's to custom theming properties.
+ */
+export type RowThemeMap = Record<string, RowTheme>;

package/dist/components/DataGrid/types/declarations.d.ts

@@ -5,5 +5,6 @@ declare module '@tanstack/react-table' {
         textAlign: string;
         justifyContent: string;
         getAriaLabel?: () => string;
+        generateDataTestId?: (row: TData) => string;
     }
 }

package/dist/components/DataGrid/types/index.d.ts

@@ -6,3 +6,4 @@ export { SortState } from './SortState';
 export { PinnedColumnState } from './PinnedColumnState';
 export { RowGroupingConfiguration, ExpandedRows } from './RowGroupingConfiguration';
 export { EmptyState } from './EmptyState';
+export { RowTheme, RowThemeMap } from './RowTheme';

package/dist/components/DataGrid/utils/ColumnMapper.cjs

@@ -73,6 +73,7 @@ class ColumnMapper {
                 justifyContent: alignmentToFlex((_e = definition.align) !== null && _e !== undefined ? _e : constants.DEFAULT_CELL_ALIGN),
                 textAlign: (_f = definition.align) !== null && _f !== undefined ? _f : constants.DEFAULT_CELL_ALIGN,
                 getAriaLabel: definition.getAriaLabel,
+                generateDataTestId: definition.generateDataTestId,
             },
         };
         validateColumnDefinition(definition);

package/dist/components/DataGrid/utils/ColumnMapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}
+{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n        generateDataTestId: definition.generateDataTestId,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}

package/dist/components/DataGrid/utils/ColumnMapper.js

@@ -71,6 +71,7 @@ class ColumnMapper {
                 justifyContent: alignmentToFlex((_e = definition.align) !== null && _e !== undefined ? _e : DEFAULT_CELL_ALIGN),
                 textAlign: (_f = definition.align) !== null && _f !== undefined ? _f : DEFAULT_CELL_ALIGN,
                 getAriaLabel: definition.getAriaLabel,
+                generateDataTestId: definition.generateDataTestId,
             },
         };
         validateColumnDefinition(definition);

package/dist/components/DataGrid/utils/ColumnMapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":[],"mappings":";;;AASA;;;;AAIG;AACH,MAAM,YAAY,GAAG,CAAI,MAA2B,KAAuC;AACzF,IAAA,OAAQ,MAAkC,CAAC,KAAK,KAAK,SAAS;AAChE,CAAC;AAED;;;;AAIG;AACH,SAAS,eAAe,CAAC,KAAsB,EAAA;AAC7C,IAAA,QAAQ,KAAK;AACX,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,YAAY;AACrB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,QAAQ;AACjB,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,UAAU;AACnB,QAAA;AACE,YAAA,OAAO,YAAY;AACtB;AACH;AAEA;;;;AAIG;AACH,MAAM,wBAAwB,GAAG,CAAC,UAAiC,KAAI;AACrE,IAAA,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE;AAClB,QAAA,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC;AACjF;AAED,IAAA,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE;YAC1B,MAAM,IAAI,KAAK,CACb,CAAA,uBAAA,EAA0B,UAAU,CAAC,EAAE,CAA+D,6DAAA,CAAA,CACvG;AACF;AACF;AAED,IAAA,IAAI,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE;AACrF,QAAA,MAAM,IAAI,KAAK,CACb,CAA0B,uBAAA,EAAA,UAAU,CAAC,EAAE,CAAA,gBAAA,EAAmB,UAAU,CAAC,KAAK,CAA8C,2CAAA,EAAA,UAAU,CAAC,QAAQ,CAAA,CAAA,CAAG,CAC/I;AACF;AAED,IAAA,IAAI,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE;AACrF,QAAA,MAAM,IAAI,KAAK,CACb,CAA0B,uBAAA,EAAA,UAAU,CAAC,EAAE,CAAA,gBAAA,EAAmB,UAAU,CAAC,KAAK,CAA6C,0CAAA,EAAA,UAAU,CAAC,QAAQ,CAAA,CAAA,CAAG,CAC9I;AACF;AACH,CAAC;AAED;;AAEG;MACU,YAAY,CAAA;AAGvB,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,YAAY,GAAG,kBAAkB,EAAO;;AAG/C,IAAA,mBAAmB,CAAC,UAAiC,EAAA;;AACnD,QAAA,MAAM,iBAAiB,GAAG;YACxB,EAAE,EAAE,UAAU,CAAC,EAAE;AACjB,YAAA,cAAc,EAAE,CAAC,CAAC,UAAU,CAAC,UAAU;AACvC,YAAA,aAAa,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;YAEpC,MAAM,EAAE,MAAA,UAAU,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,UAAU,CAAC,KAAK;YACnD,MAAM,EAAE,UAAU,CAAC,YAAY;AAE/B,YAAA,IAAI,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,sCAAI,oBAAoB;AAC9C,YAAA,OAAO,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,QAAQ,sCAAI,4BAA4B;AAC5D,YAAA,OAAO,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,QAAQ,sCAAI,4BAA4B;AAE5D,YAAA,IAAI,EAAE;AACJ,gBAAA,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,SAAS;;gBAEjC,cAAc,EAAE,eAAe,CAAC,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,kBAAkB,CAAC;AACvE,gBAAA,SAAS,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,sCAAI,kBAAkB;gBACjD,YAAY,EAAE,UAAU,CAAC,YAAY;AACtC,aAAA;SACF;QAED,wBAAwB,CAAC,UAAU,CAAC;AAEpC,QAAA,IAAI,YAAY,CAAC,UAAU,CAAC,EAAE;YAC5B,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,EAAE;AAClD,gBAAA,GAAG,iBAAiB;;gBAEpB,IAAI,EAAE,UAAU,CAAC;sBACb,CAAC,OAAO,KAAK,UAAU,CAAC,UAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ;sBAC5E,CAAC,OAAO,KAAK,OAAO,CAAC,QAAQ,EAAE;AACpC,aAAA,CAAC;AACH;AAED,QAAA,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;AAC/B,YAAA,GAAG,iBAAiB;AACpB,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC/D,SAAA,CAAC;;AAEL;;;;"}
+{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n        generateDataTestId: definition.generateDataTestId,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/SelectDropdown/ListItem/ListItem.cjs

@@ -1,19 +1,22 @@
 'use strict';
 
 var React = require('react');
+var reactAriaComponents = require('react-aria-components');
 require('../../../hooks/useFocusVisible.cjs');
 var useId = require('../../../hooks/useId.cjs');
 require('lodash.throttle');
-var styled = require('./styled.cjs');
 var ListItemContent = require('./components/ListItemContent.cjs');
+var ListItem_module = require('./ListItem.module.scss.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ListItem = ({ id, label, href, ...props }) => {
+const ListItem = ({ id, label, href, appearance = 'primary', ...props }) => {
     const idComputed = useId.useId({ id, prefix: 'list-item' });
-    return (React__default.default.createElement(styled.StyledListItem, { id: idComputed, textValue: label, href: href, ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ListItemContent.ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), ...props }))));
+    return (React__default.default.createElement(reactAriaComponents.ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([ListItem_module.listItem, ListItem_module[`appearance-${appearance}`]]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ListItemContent.ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
 };
 
 exports.ListItem = ListItem;

package/dist/components/SelectDropdown/ListItem/ListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["useId","React","StyledListItem","ListItemContent"],"mappings":";;;;;;;;;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,qBAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrED,sBAAC,CAAA,aAAA,CAAAE,+BAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}
+{"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({ id, label, href, appearance = 'primary', ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.listItem, styles[`appearance-${appearance}`]])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["useId","React","ListBoxItem","buildClassnames","styles","ListItemContent"],"mappings":";;;;;;;;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,GAAG,KAAK,EAAiB,KAAI;AAC/F,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,+BAAW,EACV,EAAA,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAEA,eAAM,CAAC,cAAc,UAAU,CAAA,CAAE,CAAC,CAAC,CAAC,EAC7E,GAAA,KAAK,IAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEH,sBAAA,CAAA,aAAA,CAACI,+BAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

package/dist/components/SelectDropdown/ListItem/ListItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ListItemProps } from './types';
-export declare const ListItem: ({ id, label, href, ...props }: ListItemProps) => React.JSX.Element;
+export declare const ListItem: ({ id, label, href, appearance, ...props }: ListItemProps) => React.JSX.Element;

package/dist/components/SelectDropdown/ListItem/ListItem.js

@@ -1,13 +1,16 @@
 import React__default from 'react';
+import { ListBoxItem } from 'react-aria-components';
 import '../../../hooks/useFocusVisible.js';
 import { useId } from '../../../hooks/useId.js';
 import 'lodash.throttle';
-import { StyledListItem } from './styled.js';
 import { ListItemContent } from './components/ListItemContent.js';
+import styles from './ListItem.module.scss.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
 
-const ListItem = ({ id, label, href, ...props }) => {
+const ListItem = ({ id, label, href, appearance = 'primary', ...props }) => {
     const idComputed = useId({ id, prefix: 'list-item' });
-    return (React__default.createElement(StyledListItem, { id: idComputed, textValue: label, href: href, ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), ...props }))));
+    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([styles.listItem, styles[`appearance-${appearance}`]]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
 };
 
 export { ListItem };

package/dist/components/SelectDropdown/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,cAAC,CAAA,aAAA,CAAA,eAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({ id, label, href, appearance = 'primary', ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n\n  return (\n    <ListBoxItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([styles.listItem, styles[`appearance-${appearance}`]])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          appearance={appearance}\n          {...props}\n        />\n      )}\n    </ListBoxItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,GAAG,KAAK,EAAiB,KAAI;AAC/F,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,cAAc,UAAU,CAAA,CAAE,CAAC,CAAC,CAAC,EAC7E,GAAA,KAAK,IAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,cAAA,CAAA,aAAA,CAAC,eAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

package/dist/components/SelectDropdown/ListItem/ListItem.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._listItem_y5fce_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._listItem_y5fce_1._appearance-secondary_y5fce_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._listItem_y5fce_1[data-hovered] > div {\n  background-color: #f0f7fc;\n}\n._listItem_y5fce_1[data-pressed] > div {\n  background-color: #e3f0fa;\n}\n._listItem_y5fce_1[data-focused] {\n  outline: 0;\n}\n._listItem_y5fce_1[data-focus-visible] > div {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._listItem_y5fce_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._listItem_y5fce_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._listItem_y5fce_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._listItem_y5fce_1 > div {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}\n\n._linkIcon_y5fce_42 {\n  color: var(--colors-neutral-ink-base);\n}\n\n._infoContainer_y5fce_46 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_y5fce_46._hasItemInfoAndEndInfo_y5fce_54 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_y5fce_46._hasItemInfoOnly_y5fce_57, ._infoContainer_y5fce_46._hasEndInfoOnly_y5fce_57 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyEnd_y5fce_60 {\n  justify-self: end;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyStart_y5fce_63 {\n  justify-self: start;\n}");
+var styles = {"listItem":"_listItem_y5fce_1","appearance-secondary":"_appearance-secondary_y5fce_7","linkIcon":"_linkIcon_y5fce_42","infoContainer":"_infoContainer_y5fce_46","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_y5fce_54","hasItemInfoOnly":"_hasItemInfoOnly_y5fce_57","hasEndInfoOnly":"_hasEndInfoOnly_y5fce_57","justifyEnd":"_justifyEnd_y5fce_60","justifyStart":"_justifyStart_y5fce_63"};
+
+module.exports = styles;
+//# sourceMappingURL=ListItem.module.scss.cjs.map

package/dist/components/SelectDropdown/ListItem/ListItem.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.module.scss"],"sourcesContent":[".listItem {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n\n.infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,gwDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,sBAAA,CAAA,+BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

package/dist/components/SelectDropdown/ListItem/ListItem.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._listItem_y5fce_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._listItem_y5fce_1._appearance-secondary_y5fce_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._listItem_y5fce_1[data-hovered] > div {\n  background-color: #f0f7fc;\n}\n._listItem_y5fce_1[data-pressed] > div {\n  background-color: #e3f0fa;\n}\n._listItem_y5fce_1[data-focused] {\n  outline: 0;\n}\n._listItem_y5fce_1[data-focus-visible] > div {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._listItem_y5fce_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._listItem_y5fce_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._listItem_y5fce_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._listItem_y5fce_1 > div {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}\n\n._linkIcon_y5fce_42 {\n  color: var(--colors-neutral-ink-base);\n}\n\n._infoContainer_y5fce_46 {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n}\n._infoContainer_y5fce_46._hasItemInfoAndEndInfo_y5fce_54 {\n  grid-template-columns: auto 1fr 1fr;\n}\n._infoContainer_y5fce_46._hasItemInfoOnly_y5fce_57, ._infoContainer_y5fce_46._hasEndInfoOnly_y5fce_57 {\n  grid-template-columns: auto 1fr;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyEnd_y5fce_60 {\n  justify-self: end;\n}\n._infoContainer_y5fce_46 > *:last-child._justifyStart_y5fce_63 {\n  justify-self: start;\n}");
+var styles = {"listItem":"_listItem_y5fce_1","appearance-secondary":"_appearance-secondary_y5fce_7","linkIcon":"_linkIcon_y5fce_42","infoContainer":"_infoContainer_y5fce_46","hasItemInfoAndEndInfo":"_hasItemInfoAndEndInfo_y5fce_54","hasItemInfoOnly":"_hasItemInfoOnly_y5fce_57","hasEndInfoOnly":"_hasEndInfoOnly_y5fce_57","justifyEnd":"_justifyEnd_y5fce_60","justifyStart":"_justifyStart_y5fce_63"};
+
+export { styles as default };
+//# sourceMappingURL=ListItem.module.scss.js.map

package/dist/components/SelectDropdown/ListItem/ListItem.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.module.scss.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.module.scss"],"sourcesContent":[".listItem {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n\n.linkIcon {\n  color: var(--colors-neutral-ink-base);\n}\n\n.infoContainer {\n  display: grid;\n  gap: var(--sizes-sm);\n  width: 100%;\n  align-items: center;\n  min-width: 0;\n  flex: 1;\n\n  &.hasItemInfoAndEndInfo {\n    grid-template-columns: auto 1fr 1fr;\n  }\n\n  &.hasItemInfoOnly,\n  &.hasEndInfoOnly {\n    grid-template-columns: auto 1fr;\n  }\n\n  > *:last-child {\n    &.justifyEnd {\n      justify-self: end;\n    }\n\n    &.justifyStart {\n      justify-self: start;\n    }\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,gwDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,sBAAA,CAAA,+BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.cjs

@@ -2,33 +2,51 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var FlexCol = require('../../../Flex/FlexCol/FlexCol.cjs');
+var ArrowRightIcon = require('../../../../icons/design-system/components/ArrowRightIcon.cjs');
 var DragIndicatorIcon = require('../../../../icons/design-system/components/DragIndicatorIcon.cjs');
-var styled = require('../styled.cjs');
 var Text = require('../../../Text/Text.cjs');
-var Stack = require('../../../Stack/Stack.cjs');
-require('../../../Stack/types.cjs');
 var MiniAlert = require('../../../Alerts/MiniAlert/MiniAlert.cjs');
 var SelectionType = require('./SelectionType.cjs');
+var ListItem_module = require('../ListItem.module.scss.cjs');
+var FlexRow = require('../../../Flex/FlexRow/FlexRow.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", alignX: "between" },
-    React__default.default.createElement(styled.HorizontalContainer, null,
-        allowsDragging && React__default.default.createElement(DragIndicatorIcon.ReactComponent, { "data-testid": "drag-icon" }),
-        React__default.default.createElement(SelectionType.SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
-        mediaSlot,
-        React__default.default.createElement(styled.VerticalContainer, null,
-            React__default.default.createElement(styled.InfoContainer, { hasItemInfoSlot: Boolean(itemInfoSlot), hasEndInfoSlot: Boolean(endInfoSlot), "data-testid": "info-container" },
-                React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
-                    React__default.default.createElement(Text.Text, { variant: "body" }, label)),
-                itemInfoSlot,
-                endInfoSlot),
-            hint && (React__default.default.createElement(reactAriaComponents.Text, { slot: "description" },
-                React__default.default.createElement(Text.Text, { variant: "hintText" }, hint))),
-            alert && React__default.default.createElement(MiniAlert.MiniAlert, { title: alert.title, variant: alert.variant }))),
-    isLink && React__default.default.createElement(styled.LinkIcon, { "data-testid": "link-icon" })));
+const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => {
+    const getInfoContainerClassNames = React.useMemo(() => {
+        const base = ListItem_module.infoContainer;
+        if (itemInfoSlot && endInfoSlot) {
+            return buildClassnames.buildClassnames([base, ListItem_module.hasItemInfoAndEndInfo]);
+        }
+        if (itemInfoSlot) {
+            return buildClassnames.buildClassnames([base, ListItem_module.hasItemInfoOnly]);
+        }
+        if (endInfoSlot) {
+            return buildClassnames.buildClassnames([base, ListItem_module.hasEndInfoOnly]);
+        }
+        return buildClassnames.buildClassnames([base]);
+    }, [endInfoSlot, itemInfoSlot]);
+    return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base" },
+        React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "base", style: { flexGrow: 1 } },
+            allowsDragging && React__default.default.createElement(DragIndicatorIcon.ReactComponent, { "data-testid": "drag-icon" }),
+            React__default.default.createElement(SelectionType.SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
+            mediaSlot,
+            React__default.default.createElement(FlexCol.FlexCol, { gap: "xs", style: { flexGrow: 1 } },
+                React__default.default.createElement("div", { className: getInfoContainerClassNames, "data-testid": "info-container" },
+                    React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
+                        React__default.default.createElement(Text.Text, { variant: "body" }, label)),
+                    itemInfoSlot,
+                    endInfoSlot && (React__default.default.createElement("div", { className: endInfoSlot ? ListItem_module.justifyEnd : ListItem_module.justifyStart }, endInfoSlot))),
+                hint && (React__default.default.createElement(reactAriaComponents.Text, { slot: "description" },
+                    React__default.default.createElement(Text.Text, { variant: "hintText" }, hint))),
+                alert && React__default.default.createElement(MiniAlert.MiniAlert, { title: alert.title, variant: alert.variant }))),
+        isLink && React__default.default.createElement(ArrowRightIcon.ReactComponent, { className: ListItem_module.linkIcon, "data-testid": "link-icon" })));
+};
 
 exports.ListItemContent = ListItemContent;
 //# sourceMappingURL=ListItemContent.cjs.map

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-aria-components';\nimport { DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { HorizontalContainer, InfoContainer, LinkIcon, VerticalContainer } from '../styled';\nimport { Text as VeeqoText } from '../../../Text';\nimport { Stack } from '../../../Stack';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => (\n  <Stack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n    <HorizontalContainer>\n      {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n      <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n      {mediaSlot}\n      <VerticalContainer>\n        <InfoContainer\n          hasItemInfoSlot={Boolean(itemInfoSlot)}\n          hasEndInfoSlot={Boolean(endInfoSlot)}\n          data-testid=\"info-container\"\n        >\n          <Text slot=\"label\">\n            <VeeqoText variant=\"body\">{label}</VeeqoText>\n          </Text>\n          {itemInfoSlot}\n          {endInfoSlot}\n        </InfoContainer>\n\n        {hint && (\n          <Text slot=\"description\">\n            <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n          </Text>\n        )}\n        {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n      </VerticalContainer>\n    </HorizontalContainer>\n    {isLink && <LinkIcon data-testid=\"link-icon\" />}\n  </Stack>\n);\n"],"names":["React","Stack","HorizontalContainer","DragIndicatorIcon","SelectionType","VerticalContainer","InfoContainer","Text","VeeqoText","MiniAlert","LinkIcon"],"mappings":";;;;;;;;;;;;;;;;MAUa,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,QAAQ,EACxB,MAAM,EACN,UAAU,GAAG,KAAK,GACG,MACrBA,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAC,EAAA,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;AAC5D,IAAAD,sBAAA,CAAA,aAAA,CAACE,0BAAmB,EAAA,IAAA;AACjB,QAAA,cAAc,IAAIF,sBAAA,CAAA,aAAA,CAACG,gCAAiB,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA;AAChE,QAAAH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;QACtF,SAAS;AACV,QAAAJ,sBAAA,CAAA,aAAA,CAACK,wBAAiB,EAAA,IAAA;AAChB,YAAAL,sBAAA,CAAA,aAAA,CAACM,oBAAa,EACZ,EAAA,eAAe,EAAE,OAAO,CAAC,YAAY,CAAC,EACtC,cAAc,EAAE,OAAO,CAAC,WAAW,CAAC,iBACxB,gBAAgB,EAAA;AAE5B,gBAAAN,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA;oBAChBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAa,CACxC;gBACN,YAAY;AACZ,gBAAA,WAAW,CACE;AAEf,YAAA,IAAI,KACHR,sBAAA,CAAA,aAAA,CAACO,wBAAI,EAAC,EAAA,IAAI,EAAC,aAAa,EAAA;gBACtBP,sBAAC,CAAA,aAAA,CAAAQ,SAAS,IAAC,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CAC3C,CACR;AACA,YAAA,KAAK,IAAIR,sBAAC,CAAA,aAAA,CAAAS,mBAAS,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,CACjD,CACA;IACrB,MAAM,IAAIT,qCAACU,eAAQ,EAAA,EAAA,aAAA,EAAa,WAAW,EAAG,CAAA,CACzC;;;;"}
+{"version":3,"file":"ListItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/ListItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ListItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from '../ListItem.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ListItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n}: ListItemContentProps) => {\n  const getInfoContainerClassNames = useMemo(() => {\n    const base = styles.infoContainer;\n\n    if (itemInfoSlot && endInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n    }\n\n    if (itemInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoOnly]);\n    }\n\n    if (endInfoSlot) {\n      return buildClassnames([base, styles.hasEndInfoOnly]);\n    }\n\n    return buildClassnames([base]);\n  }, [endInfoSlot, itemInfoSlot]);\n\n  return (\n    <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\" alignItems=\"center\" gap=\"base\">\n      <FlexRow flexWrap=\"nowrap\" gap=\"base\" style={{ flexGrow: 1 }}>\n        {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n        <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n        {mediaSlot}\n        <FlexCol gap=\"xs\" style={{ flexGrow: 1 }}>\n          <div className={getInfoContainerClassNames} data-testid=\"info-container\">\n            <Text slot=\"label\">\n              <VeeqoText variant=\"body\">{label}</VeeqoText>\n            </Text>\n            {itemInfoSlot}\n            {endInfoSlot && (\n              <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n                {endInfoSlot}\n              </div>\n            )}\n          </div>\n\n          {hint && (\n            <Text slot=\"description\">\n              <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n            </Text>\n          )}\n          {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n        </FlexCol>\n      </FlexRow>\n      {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n    </FlexRow>\n  );\n};\n"],"names":["useMemo","styles","buildClassnames","React","FlexRow","DragIndicatorIcon","SelectionType","FlexCol","Text","VeeqoText","MiniAlert","ArrowRightIcon"],"mappings":"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"}

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.js

@@ -1,28 +1,46 @@
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 import { Text } from 'react-aria-components';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { FlexCol } from '../../../Flex/FlexCol/FlexCol.js';
+import { ReactComponent as ArrowRightIcon } from '../../../../icons/design-system/components/ArrowRightIcon.js';
 import { ReactComponent as DragIndicatorIcon } from '../../../../icons/design-system/components/DragIndicatorIcon.js';
-import { HorizontalContainer, VerticalContainer, InfoContainer, LinkIcon } from '../styled.js';
 import { Text as Text$1 } from '../../../Text/Text.js';
-import { Stack } from '../../../Stack/Stack.js';
-import '../../../Stack/types.js';
 import { MiniAlert } from '../../../Alerts/MiniAlert/MiniAlert.js';
 import { SelectionType } from './SelectionType.js';
+import styles from '../ListItem.module.scss.js';
+import { FlexRow } from '../../../Flex/FlexRow/FlexRow.js';
 
-const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", alignX: "between" },
-    React__default.createElement(HorizontalContainer, null,
-        allowsDragging && React__default.createElement(DragIndicatorIcon, { "data-testid": "drag-icon" }),
-        React__default.createElement(SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
-        mediaSlot,
-        React__default.createElement(VerticalContainer, null,
-            React__default.createElement(InfoContainer, { hasItemInfoSlot: Boolean(itemInfoSlot), hasEndInfoSlot: Boolean(endInfoSlot), "data-testid": "info-container" },
-                React__default.createElement(Text, { slot: "label" },
-                    React__default.createElement(Text$1, { variant: "body" }, label)),
-                itemInfoSlot,
-                endInfoSlot),
-            hint && (React__default.createElement(Text, { slot: "description" },
-                React__default.createElement(Text$1, { variant: "hintText" }, hint))),
-            alert && React__default.createElement(MiniAlert, { title: alert.title, variant: alert.variant }))),
-    isLink && React__default.createElement(LinkIcon, { "data-testid": "link-icon" })));
+const ListItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, }) => {
+    const getInfoContainerClassNames = useMemo(() => {
+        const base = styles.infoContainer;
+        if (itemInfoSlot && endInfoSlot) {
+            return buildClassnames([base, styles.hasItemInfoAndEndInfo]);
+        }
+        if (itemInfoSlot) {
+            return buildClassnames([base, styles.hasItemInfoOnly]);
+        }
+        if (endInfoSlot) {
+            return buildClassnames([base, styles.hasEndInfoOnly]);
+        }
+        return buildClassnames([base]);
+    }, [endInfoSlot, itemInfoSlot]);
+    return (React__default.createElement(FlexRow, { flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", gap: "base" },
+        React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "base", style: { flexGrow: 1 } },
+            allowsDragging && React__default.createElement(DragIndicatorIcon, { "data-testid": "drag-icon" }),
+            React__default.createElement(SelectionType, { selectionMode: selectionMode, isSelected: isSelected, isLink: isLink }),
+            mediaSlot,
+            React__default.createElement(FlexCol, { gap: "xs", style: { flexGrow: 1 } },
+                React__default.createElement("div", { className: getInfoContainerClassNames, "data-testid": "info-container" },
+                    React__default.createElement(Text, { slot: "label" },
+                        React__default.createElement(Text$1, { variant: "body" }, label)),
+                    itemInfoSlot,
+                    endInfoSlot && (React__default.createElement("div", { className: endInfoSlot ? styles.justifyEnd : styles.justifyStart }, endInfoSlot))),
+                hint && (React__default.createElement(Text, { slot: "description" },
+                    React__default.createElement(Text$1, { variant: "hintText" }, hint))),
+                alert && React__default.createElement(MiniAlert, { title: alert.title, variant: alert.variant }))),
+        isLink && React__default.createElement(ArrowRightIcon, { className: styles.linkIcon, "data-testid": "link-icon" })));
+};
 
 export { ListItemContent };
 //# sourceMappingURL=ListItemContent.js.map