@j2-health/design-system 0.3.2 → 0.4.0

package/dist/src/components/table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import { Table as AntdTable, SpinProps, TableProps, Tooltip } from 'antd'\nimport cx from 'classnames'\nimport s from './Table.module.css'\nimport { Spinner } from '../spinner'\nimport { withDesignSystemPaginationOverrides } from '../pagination/Pagination'\nimport {\n  CaretDownIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n} from '@phosphor-icons/react'\nimport { ComponentProps, ReactNode } from 'react'\nimport { AnyObject } from 'antd/es/_util/type'\n\ntype MergedProps<T> = TableProps<T> & {\n  verticalBorders?: boolean\n  alternatingRows?: boolean\n  columns?: TableProps<T>['columns']\n  paginationTextLabels?: boolean\n}\n\ntype Props<T> = Expand<MergedProps<T>>\n\nexport const defaultSortIcon = ({\n  sortOrder,\n}: {\n  sortOrder: 'ascend' | 'descend' | null\n}) => {\n  if (sortOrder == 'ascend') return <CaretUpIcon />\n  if (sortOrder == 'descend') return <CaretDownIcon />\n  return <CaretUpDownIcon />\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-constraint\nconst Table = <T extends unknown = any>({\n  verticalBorders,\n  alternatingRows,\n  paginationTextLabels = false,\n  ...props\n}: Props<T>) => {\n  const defaultLoadingProps: SpinProps = {\n    indicator: <Spinner className=\"!w-fit !h-fit !mx-0 translate-x-[-50%]\" />,\n    tip: (\n      <div className=\"mt-20\">\n        <h4>Loading this chart</h4>\n        <span className=\"text-lg\">Please wait a moment</span>\n      </div>\n    ),\n  }\n\n  const loading: SpinProps | boolean | undefined =\n    typeof props.loading == 'object'\n      ? { ...props.loading, ...defaultLoadingProps }\n      : props.loading && defaultLoadingProps\n\n  const isSimpleValue = (\n    value: unknown\n  ): value is string | number | boolean => {\n    return (\n      typeof value === 'string' ||\n      typeof value === 'number' ||\n      typeof value === 'boolean'\n    )\n  }\n\n  // Helper to extract text content from React elements\n  const extractTextContent = (node: unknown): string | null => {\n    if (isSimpleValue(node)) {\n      return String(node)\n    }\n\n    // Check if it's a React element with simple text children\n    if (\n      node &&\n      typeof node === 'object' &&\n      'props' in node &&\n      node.props &&\n      typeof node.props === 'object' &&\n      'children' in node.props\n    ) {\n      const children = node.props.children\n      if (isSimpleValue(children)) {\n        return String(children)\n      }\n    }\n\n    return null\n  }\n\n  const columns = props.columns?.map((column) => {\n    const hasEllipsis =\n      column.ellipsis === true ||\n      (typeof column.ellipsis === 'object' && column.ellipsis)\n\n    const originalRender = column.render\n\n    return {\n      ...column,\n      sortIcon: column.sortIcon ?? defaultSortIcon,\n      ellipsis: hasEllipsis\n        ? {\n            showTitle: false, // Disable default browser tooltip\n          }\n        : column.ellipsis,\n      render: (value: unknown, record: T, index: number): ReactNode => {\n        const renderedContent = originalRender\n          ? originalRender(value, record, index)\n          : value\n\n        // Render null/undefined as dashes with no tooltip\n        if (renderedContent == null) {\n          return <span className=\"text-j2-text-secondary\">--</span>\n        }\n\n        // Try to extract text content for tooltip\n        const tooltipText = extractTextContent(renderedContent)\n\n        // If we can extract text content, wrap with tooltip\n        if (tooltipText) {\n          // For simple values, wrap in a span\n          if (isSimpleValue(renderedContent)) {\n            return (\n              <Tooltip title={tooltipText} arrow={false}>\n                <span className={hasEllipsis ? 'block truncate' : undefined}>\n                  {renderedContent}\n                </span>\n              </Tooltip>\n            )\n          }\n\n          // For React elements, wrap the element itself\n          return (\n            <Tooltip title={tooltipText} arrow={false}>\n              <div>{renderedContent as ReactNode}</div>\n            </Tooltip>\n          )\n        }\n\n        // Complex components without extractable text - return as is\n        return renderedContent as ReactNode\n      },\n    }\n  })\n\n  const paginationConfig = props.pagination\n    ? withDesignSystemPaginationOverrides(\n        typeof props.pagination === 'object' ? props.pagination : {},\n        {\n          paginationTextLabels,\n          isSmall:\n            (typeof props.pagination === 'object' &&\n              props.pagination.size === 'small') ||\n            props.size === 'small',\n        }\n      )\n    : false\n\n  return (\n    <div\n      className={cx(props.className, {\n        [s.bordered]: props.bordered && !verticalBorders,\n        [s.alternatingRows]: alternatingRows,\n      })}\n    >\n      <AntdTable<T>\n        showSorterTooltip={{ target: 'sorter-icon' }}\n        {...props}\n        loading={loading}\n        columns={columns}\n        pagination={paginationConfig}\n        rowKey={(record) => JSON.stringify(record)}\n        locale={{\n          emptyText: (\n            <div\n              style={{ height: props.scroll?.y || 400, width: 'content-fit' }}\n            />\n          ),\n        }}\n      />\n    </div>\n  )\n}\n\ntype ColumnProps<T extends AnyObject> = Expand<\n  ComponentProps<typeof AntdTable.Column<T>>\n>\n\nconst TableColumn = <T extends AnyObject>(props: ColumnProps<T>) => {\n  return <AntdTable.Column<T> {...props} sortIcon={defaultSortIcon} />\n}\nTableColumn.displayName = 'Table.Column'\n\nTable.Column = TableColumn\nTable.Summary = AntdTable.Summary\n\nexport type { TableColumnType } from 'antd'\nexport { Table }\n"],"names":["jsx","CaretUpIcon","CaretDownIcon","CaretUpDownIcon","Spinner","jsxs","Tooltip","withDesignSystemPaginationOverrides","s","AntdTable"],"mappings":"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"}
+{"version":3,"file":"Table.cjs","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import { Table as AntdTable, SpinProps, TableProps, Tooltip } from 'antd'\nimport cx from 'classnames'\nimport s from './Table.module.css'\nimport { Spinner } from '../spinner'\nimport { withDesignSystemPaginationOverrides } from '../pagination/Pagination'\nimport {\n  CaretDownIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n} from '@phosphor-icons/react'\nimport { ComponentProps, ReactNode } from 'react'\nimport { AnyObject } from 'antd/es/_util/type'\n\ntype MergedProps<T> = TableProps<T> & {\n  verticalBorders?: boolean\n  alternatingRows?: boolean\n  columns?: TableProps<T>['columns']\n  paginationTextLabels?: boolean\n}\n\ntype Props<T> = Expand<MergedProps<T>>\n\nexport const defaultSortIcon = ({\n  sortOrder,\n}: {\n  sortOrder: 'ascend' | 'descend' | null\n}) => {\n  if (sortOrder == 'ascend') return <CaretUpIcon />\n  if (sortOrder == 'descend') return <CaretDownIcon />\n  return <CaretUpDownIcon />\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-constraint\nconst Table = <T extends unknown = any>({\n  verticalBorders,\n  alternatingRows,\n  paginationTextLabels = false,\n  ...props\n}: Props<T>) => {\n  const defaultLoadingProps: SpinProps = {\n    indicator: <Spinner className=\"!w-fit !h-fit !mx-0 translate-x-[-50%]\" />,\n    description: (\n      <div className=\"mt-20\">\n        <h4>Loading this chart</h4>\n        <span className=\"text-lg\">Please wait a moment</span>\n      </div>\n    ),\n  }\n\n  const loading: SpinProps | boolean | undefined =\n    typeof props.loading == 'object'\n      ? { ...props.loading, ...defaultLoadingProps }\n      : props.loading && defaultLoadingProps\n\n  const isSimpleValue = (\n    value: unknown\n  ): value is string | number | boolean => {\n    return (\n      typeof value === 'string' ||\n      typeof value === 'number' ||\n      typeof value === 'boolean'\n    )\n  }\n\n  // Helper to extract text content from React elements\n  const extractTextContent = (node: unknown): string | null => {\n    if (isSimpleValue(node)) {\n      return String(node)\n    }\n\n    // Check if it's a React element with simple text children\n    if (\n      node &&\n      typeof node === 'object' &&\n      'props' in node &&\n      node.props &&\n      typeof node.props === 'object' &&\n      'children' in node.props\n    ) {\n      const children = node.props.children\n      if (isSimpleValue(children)) {\n        return String(children)\n      }\n    }\n\n    return null\n  }\n\n  const columns = props.columns?.map((column) => {\n    const hasEllipsis =\n      column.ellipsis === true ||\n      (typeof column.ellipsis === 'object' && column.ellipsis)\n\n    const originalRender = column.render\n\n    return {\n      ...column,\n      sortIcon: column.sortIcon ?? defaultSortIcon,\n      ellipsis: hasEllipsis\n        ? {\n            showTitle: false, // Disable default browser tooltip\n          }\n        : column.ellipsis,\n      render: (value: unknown, record: T, index: number): ReactNode => {\n        const renderedContent = originalRender\n          ? originalRender(value, record, index)\n          : value\n\n        // Render null/undefined as dashes with no tooltip\n        if (renderedContent == null) {\n          return <span className=\"text-j2-text-secondary\">--</span>\n        }\n\n        // Try to extract text content for tooltip\n        const tooltipText = extractTextContent(renderedContent)\n\n        // If we can extract text content, wrap with tooltip\n        if (tooltipText) {\n          // For simple values, wrap in a span\n          if (isSimpleValue(renderedContent)) {\n            return (\n              <Tooltip title={tooltipText} arrow={false}>\n                <span className={hasEllipsis ? 'block truncate' : undefined}>\n                  {renderedContent}\n                </span>\n              </Tooltip>\n            )\n          }\n\n          // For React elements, wrap the element itself\n          return (\n            <Tooltip title={tooltipText} arrow={false}>\n              <div>{renderedContent as ReactNode}</div>\n            </Tooltip>\n          )\n        }\n\n        // Complex components without extractable text - return as is\n        return renderedContent as ReactNode\n      },\n    }\n  })\n\n  const paginationConfig = props.pagination\n    ? withDesignSystemPaginationOverrides(\n        typeof props.pagination === 'object' ? props.pagination : {},\n        {\n          paginationTextLabels,\n          isSmall:\n            (typeof props.pagination === 'object' &&\n              props.pagination.size === 'small') ||\n            props.size === 'small',\n        }\n      )\n    : false\n\n  return (\n    <div\n      className={cx(props.className, {\n        [s.bordered]: props.bordered && !verticalBorders,\n        [s.alternatingRows]: alternatingRows,\n      })}\n    >\n      <AntdTable<T>\n        showSorterTooltip={{ target: 'sorter-icon' }}\n        {...props}\n        loading={loading}\n        columns={columns}\n        pagination={paginationConfig}\n        rowKey={(record) => JSON.stringify(record)}\n        locale={{\n          emptyText: (\n            <div\n              style={{ height: props.scroll?.y || 400, width: 'content-fit' }}\n            />\n          ),\n        }}\n      />\n    </div>\n  )\n}\n\ntype ColumnProps<T extends AnyObject> = Expand<\n  ComponentProps<typeof AntdTable.Column<T>>\n>\n\nconst TableColumn = <T extends AnyObject>(props: ColumnProps<T>) => {\n  return <AntdTable.Column<T> {...props} sortIcon={defaultSortIcon} />\n}\nTableColumn.displayName = 'Table.Column'\n\nTable.Column = TableColumn\nTable.Summary = AntdTable.Summary\n\nexport type { TableColumnType } from 'antd'\nexport { Table }\n"],"names":["jsx","CaretUpIcon","CaretDownIcon","CaretUpDownIcon","Spinner","jsxs","Tooltip","withDesignSystemPaginationOverrides","s","AntdTable"],"mappings":"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"}

package/dist/src/components/table/Table.d.ts

@@ -17,7 +17,10 @@ declare const Table: {
         <T extends AnyObject>(props: ColumnProps<T>): import("react").JSX.Element;
         displayName: string;
     };
-    Summary: typeof import('rc-table/lib/Footer/Summary').default;
+    Summary: import('react').FC<import('react').PropsWithChildren<import('@rc-component/table/es/Footer/Summary').SummaryProps>> & {
+        Row: React.FC<React.PropsWithChildren<import('@rc-component/table/es/Footer/Row').FooterRowProps>>;
+        Cell: React.FC<React.PropsWithChildren<import('@rc-component/table/es/Footer/Cell').SummaryCellProps>>;
+    };
 };
 type ColumnProps<T extends AnyObject> = Expand<ComponentProps<typeof AntdTable.Column<T>>>;
 export type { TableColumnType } from 'antd';

package/dist/src/components/table/Table.js

@@ -21,7 +21,7 @@ const Table = ({
   var _a, _b;
   const defaultLoadingProps = {
     indicator: /* @__PURE__ */ jsx(Spinner, { className: "!w-fit !h-fit !mx-0 translate-x-[-50%]" }),
-    tip: /* @__PURE__ */ jsxs("div", { className: "mt-20", children: [
+    description: /* @__PURE__ */ jsxs("div", { className: "mt-20", children: [
       /* @__PURE__ */ jsx("h4", { children: "Loading this chart" }),
       /* @__PURE__ */ jsx("span", { className: "text-lg", children: "Please wait a moment" })
     ] })

package/dist/src/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import { Table as AntdTable, SpinProps, TableProps, Tooltip } from 'antd'\nimport cx from 'classnames'\nimport s from './Table.module.css'\nimport { Spinner } from '../spinner'\nimport { withDesignSystemPaginationOverrides } from '../pagination/Pagination'\nimport {\n  CaretDownIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n} from '@phosphor-icons/react'\nimport { ComponentProps, ReactNode } from 'react'\nimport { AnyObject } from 'antd/es/_util/type'\n\ntype MergedProps<T> = TableProps<T> & {\n  verticalBorders?: boolean\n  alternatingRows?: boolean\n  columns?: TableProps<T>['columns']\n  paginationTextLabels?: boolean\n}\n\ntype Props<T> = Expand<MergedProps<T>>\n\nexport const defaultSortIcon = ({\n  sortOrder,\n}: {\n  sortOrder: 'ascend' | 'descend' | null\n}) => {\n  if (sortOrder == 'ascend') return <CaretUpIcon />\n  if (sortOrder == 'descend') return <CaretDownIcon />\n  return <CaretUpDownIcon />\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-constraint\nconst Table = <T extends unknown = any>({\n  verticalBorders,\n  alternatingRows,\n  paginationTextLabels = false,\n  ...props\n}: Props<T>) => {\n  const defaultLoadingProps: SpinProps = {\n    indicator: <Spinner className=\"!w-fit !h-fit !mx-0 translate-x-[-50%]\" />,\n    tip: (\n      <div className=\"mt-20\">\n        <h4>Loading this chart</h4>\n        <span className=\"text-lg\">Please wait a moment</span>\n      </div>\n    ),\n  }\n\n  const loading: SpinProps | boolean | undefined =\n    typeof props.loading == 'object'\n      ? { ...props.loading, ...defaultLoadingProps }\n      : props.loading && defaultLoadingProps\n\n  const isSimpleValue = (\n    value: unknown\n  ): value is string | number | boolean => {\n    return (\n      typeof value === 'string' ||\n      typeof value === 'number' ||\n      typeof value === 'boolean'\n    )\n  }\n\n  // Helper to extract text content from React elements\n  const extractTextContent = (node: unknown): string | null => {\n    if (isSimpleValue(node)) {\n      return String(node)\n    }\n\n    // Check if it's a React element with simple text children\n    if (\n      node &&\n      typeof node === 'object' &&\n      'props' in node &&\n      node.props &&\n      typeof node.props === 'object' &&\n      'children' in node.props\n    ) {\n      const children = node.props.children\n      if (isSimpleValue(children)) {\n        return String(children)\n      }\n    }\n\n    return null\n  }\n\n  const columns = props.columns?.map((column) => {\n    const hasEllipsis =\n      column.ellipsis === true ||\n      (typeof column.ellipsis === 'object' && column.ellipsis)\n\n    const originalRender = column.render\n\n    return {\n      ...column,\n      sortIcon: column.sortIcon ?? defaultSortIcon,\n      ellipsis: hasEllipsis\n        ? {\n            showTitle: false, // Disable default browser tooltip\n          }\n        : column.ellipsis,\n      render: (value: unknown, record: T, index: number): ReactNode => {\n        const renderedContent = originalRender\n          ? originalRender(value, record, index)\n          : value\n\n        // Render null/undefined as dashes with no tooltip\n        if (renderedContent == null) {\n          return <span className=\"text-j2-text-secondary\">--</span>\n        }\n\n        // Try to extract text content for tooltip\n        const tooltipText = extractTextContent(renderedContent)\n\n        // If we can extract text content, wrap with tooltip\n        if (tooltipText) {\n          // For simple values, wrap in a span\n          if (isSimpleValue(renderedContent)) {\n            return (\n              <Tooltip title={tooltipText} arrow={false}>\n                <span className={hasEllipsis ? 'block truncate' : undefined}>\n                  {renderedContent}\n                </span>\n              </Tooltip>\n            )\n          }\n\n          // For React elements, wrap the element itself\n          return (\n            <Tooltip title={tooltipText} arrow={false}>\n              <div>{renderedContent as ReactNode}</div>\n            </Tooltip>\n          )\n        }\n\n        // Complex components without extractable text - return as is\n        return renderedContent as ReactNode\n      },\n    }\n  })\n\n  const paginationConfig = props.pagination\n    ? withDesignSystemPaginationOverrides(\n        typeof props.pagination === 'object' ? props.pagination : {},\n        {\n          paginationTextLabels,\n          isSmall:\n            (typeof props.pagination === 'object' &&\n              props.pagination.size === 'small') ||\n            props.size === 'small',\n        }\n      )\n    : false\n\n  return (\n    <div\n      className={cx(props.className, {\n        [s.bordered]: props.bordered && !verticalBorders,\n        [s.alternatingRows]: alternatingRows,\n      })}\n    >\n      <AntdTable<T>\n        showSorterTooltip={{ target: 'sorter-icon' }}\n        {...props}\n        loading={loading}\n        columns={columns}\n        pagination={paginationConfig}\n        rowKey={(record) => JSON.stringify(record)}\n        locale={{\n          emptyText: (\n            <div\n              style={{ height: props.scroll?.y || 400, width: 'content-fit' }}\n            />\n          ),\n        }}\n      />\n    </div>\n  )\n}\n\ntype ColumnProps<T extends AnyObject> = Expand<\n  ComponentProps<typeof AntdTable.Column<T>>\n>\n\nconst TableColumn = <T extends AnyObject>(props: ColumnProps<T>) => {\n  return <AntdTable.Column<T> {...props} sortIcon={defaultSortIcon} />\n}\nTableColumn.displayName = 'Table.Column'\n\nTable.Column = TableColumn\nTable.Summary = AntdTable.Summary\n\nexport type { TableColumnType } from 'antd'\nexport { Table }\n"],"names":["AntdTable"],"mappings":";;;;;;;AAsBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AACF,MAEM;AACJ,MAAI,aAAa,SAAU,QAAO,oBAAC,aAAA,CAAA,CAAY;AAC/C,MAAI,aAAa,UAAW,QAAO,oBAAC,eAAA,CAAA,CAAc;AAClD,6BAAQ,iBAAA,EAAgB;AAC1B;AAGA,MAAM,QAAQ,CAA0B;AAAA,EACtC;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,MAAgB;;AACd,QAAM,sBAAiC;AAAA,IACrC,WAAW,oBAAC,SAAA,EAAQ,WAAU,yCAAA,CAAyC;AAAA,IACvE,KACE,qBAAC,OAAA,EAAI,WAAU,SACb,UAAA;AAAA,MAAA,oBAAC,QAAG,UAAA,qBAAA,CAAkB;AAAA,MACtB,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,uBAAA,CAAoB;AAAA,IAAA,EAAA,CAChD;AAAA,EAAA;AAIJ,QAAM,UACJ,OAAO,MAAM,WAAW,WACpB,EAAE,GAAG,MAAM,SAAS,GAAG,oBAAA,IACvB,MAAM,WAAW;AAEvB,QAAM,gBAAgB,CACpB,UACuC;AACvC,WACE,OAAO,UAAU,YACjB,OAAO,UAAU,YACjB,OAAO,UAAU;AAAA,EAErB;AAGA,QAAM,qBAAqB,CAAC,SAAiC;AAC3D,QAAI,cAAc,IAAI,GAAG;AACvB,aAAO,OAAO,IAAI;AAAA,IACpB;AAGA,QACE,QACA,OAAO,SAAS,YAChB,WAAW,QACX,KAAK,SACL,OAAO,KAAK,UAAU,YACtB,cAAc,KAAK,OACnB;AACA,YAAM,WAAW,KAAK,MAAM;AAC5B,UAAI,cAAc,QAAQ,GAAG;AAC3B,eAAO,OAAO,QAAQ;AAAA,MACxB;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,WAAU,WAAM,YAAN,mBAAe,IAAI,CAAC,WAAW;AAC7C,UAAM,cACJ,OAAO,aAAa,QACnB,OAAO,OAAO,aAAa,YAAY,OAAO;AAEjD,UAAM,iBAAiB,OAAO;AAE9B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,UAAU,OAAO,YAAY;AAAA,MAC7B,UAAU,cACN;AAAA,QACE,WAAW;AAAA;AAAA,MAAA,IAEb,OAAO;AAAA,MACX,QAAQ,CAAC,OAAgB,QAAW,UAA6B;AAC/D,cAAM,kBAAkB,iBACpB,eAAe,OAAO,QAAQ,KAAK,IACnC;AAGJ,YAAI,mBAAmB,MAAM;AAC3B,iBAAO,oBAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,MAAE;AAAA,QACpD;AAGA,cAAM,cAAc,mBAAmB,eAAe;AAGtD,YAAI,aAAa;AAEf,cAAI,cAAc,eAAe,GAAG;AAClC,mBACE,oBAAC,SAAA,EAAQ,OAAO,aAAa,OAAO,OAClC,UAAA,oBAAC,QAAA,EAAK,WAAW,cAAc,mBAAmB,QAC/C,2BACH,GACF;AAAA,UAEJ;AAGA,iBACE,oBAAC,WAAQ,OAAO,aAAa,OAAO,OAClC,UAAA,oBAAC,OAAA,EAAK,UAAA,gBAAA,CAA6B,EAAA,CACrC;AAAA,QAEJ;AAGA,eAAO;AAAA,MACT;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,mBAAmB,MAAM,aAC3B;AAAA,IACE,OAAO,MAAM,eAAe,WAAW,MAAM,aAAa,CAAA;AAAA,IAC1D;AAAA,MACE;AAAA,MACA,SACG,OAAO,MAAM,eAAe,YAC3B,MAAM,WAAW,SAAS,WAC5B,MAAM,SAAS;AAAA,IAAA;AAAA,EACnB,IAEF;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,MAAM,WAAW;AAAA,QAC7B,CAAC,EAAE,QAAQ,GAAG,MAAM,YAAY,CAAC;AAAA,QACjC,CAAC,EAAE,eAAe,GAAG;AAAA,MAAA,CACtB;AAAA,MAED,UAAA;AAAA,QAACA;AAAAA,QAAA;AAAA,UACC,mBAAmB,EAAE,QAAQ,cAAA;AAAA,UAC5B,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ,QAAQ,CAAC,WAAW,KAAK,UAAU,MAAM;AAAA,UACzC,QAAQ;AAAA,YACN,WACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO,EAAE,UAAQ,WAAM,WAAN,mBAAc,MAAK,KAAK,OAAO,cAAA;AAAA,cAAc;AAAA,YAAA;AAAA,UAChE;AAAA,QAEJ;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAMA,MAAM,cAAc,CAAsB,UAA0B;AAClE,6BAAQA,QAAU,QAAV,EAAqB,GAAG,OAAO,UAAU,iBAAiB;AACpE;AACA,YAAY,cAAc;AAE1B,MAAM,SAAS;AACf,MAAM,UAAUA,QAAU;"}
+{"version":3,"file":"Table.js","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import { Table as AntdTable, SpinProps, TableProps, Tooltip } from 'antd'\nimport cx from 'classnames'\nimport s from './Table.module.css'\nimport { Spinner } from '../spinner'\nimport { withDesignSystemPaginationOverrides } from '../pagination/Pagination'\nimport {\n  CaretDownIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n} from '@phosphor-icons/react'\nimport { ComponentProps, ReactNode } from 'react'\nimport { AnyObject } from 'antd/es/_util/type'\n\ntype MergedProps<T> = TableProps<T> & {\n  verticalBorders?: boolean\n  alternatingRows?: boolean\n  columns?: TableProps<T>['columns']\n  paginationTextLabels?: boolean\n}\n\ntype Props<T> = Expand<MergedProps<T>>\n\nexport const defaultSortIcon = ({\n  sortOrder,\n}: {\n  sortOrder: 'ascend' | 'descend' | null\n}) => {\n  if (sortOrder == 'ascend') return <CaretUpIcon />\n  if (sortOrder == 'descend') return <CaretDownIcon />\n  return <CaretUpDownIcon />\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-constraint\nconst Table = <T extends unknown = any>({\n  verticalBorders,\n  alternatingRows,\n  paginationTextLabels = false,\n  ...props\n}: Props<T>) => {\n  const defaultLoadingProps: SpinProps = {\n    indicator: <Spinner className=\"!w-fit !h-fit !mx-0 translate-x-[-50%]\" />,\n    description: (\n      <div className=\"mt-20\">\n        <h4>Loading this chart</h4>\n        <span className=\"text-lg\">Please wait a moment</span>\n      </div>\n    ),\n  }\n\n  const loading: SpinProps | boolean | undefined =\n    typeof props.loading == 'object'\n      ? { ...props.loading, ...defaultLoadingProps }\n      : props.loading && defaultLoadingProps\n\n  const isSimpleValue = (\n    value: unknown\n  ): value is string | number | boolean => {\n    return (\n      typeof value === 'string' ||\n      typeof value === 'number' ||\n      typeof value === 'boolean'\n    )\n  }\n\n  // Helper to extract text content from React elements\n  const extractTextContent = (node: unknown): string | null => {\n    if (isSimpleValue(node)) {\n      return String(node)\n    }\n\n    // Check if it's a React element with simple text children\n    if (\n      node &&\n      typeof node === 'object' &&\n      'props' in node &&\n      node.props &&\n      typeof node.props === 'object' &&\n      'children' in node.props\n    ) {\n      const children = node.props.children\n      if (isSimpleValue(children)) {\n        return String(children)\n      }\n    }\n\n    return null\n  }\n\n  const columns = props.columns?.map((column) => {\n    const hasEllipsis =\n      column.ellipsis === true ||\n      (typeof column.ellipsis === 'object' && column.ellipsis)\n\n    const originalRender = column.render\n\n    return {\n      ...column,\n      sortIcon: column.sortIcon ?? defaultSortIcon,\n      ellipsis: hasEllipsis\n        ? {\n            showTitle: false, // Disable default browser tooltip\n          }\n        : column.ellipsis,\n      render: (value: unknown, record: T, index: number): ReactNode => {\n        const renderedContent = originalRender\n          ? originalRender(value, record, index)\n          : value\n\n        // Render null/undefined as dashes with no tooltip\n        if (renderedContent == null) {\n          return <span className=\"text-j2-text-secondary\">--</span>\n        }\n\n        // Try to extract text content for tooltip\n        const tooltipText = extractTextContent(renderedContent)\n\n        // If we can extract text content, wrap with tooltip\n        if (tooltipText) {\n          // For simple values, wrap in a span\n          if (isSimpleValue(renderedContent)) {\n            return (\n              <Tooltip title={tooltipText} arrow={false}>\n                <span className={hasEllipsis ? 'block truncate' : undefined}>\n                  {renderedContent}\n                </span>\n              </Tooltip>\n            )\n          }\n\n          // For React elements, wrap the element itself\n          return (\n            <Tooltip title={tooltipText} arrow={false}>\n              <div>{renderedContent as ReactNode}</div>\n            </Tooltip>\n          )\n        }\n\n        // Complex components without extractable text - return as is\n        return renderedContent as ReactNode\n      },\n    }\n  })\n\n  const paginationConfig = props.pagination\n    ? withDesignSystemPaginationOverrides(\n        typeof props.pagination === 'object' ? props.pagination : {},\n        {\n          paginationTextLabels,\n          isSmall:\n            (typeof props.pagination === 'object' &&\n              props.pagination.size === 'small') ||\n            props.size === 'small',\n        }\n      )\n    : false\n\n  return (\n    <div\n      className={cx(props.className, {\n        [s.bordered]: props.bordered && !verticalBorders,\n        [s.alternatingRows]: alternatingRows,\n      })}\n    >\n      <AntdTable<T>\n        showSorterTooltip={{ target: 'sorter-icon' }}\n        {...props}\n        loading={loading}\n        columns={columns}\n        pagination={paginationConfig}\n        rowKey={(record) => JSON.stringify(record)}\n        locale={{\n          emptyText: (\n            <div\n              style={{ height: props.scroll?.y || 400, width: 'content-fit' }}\n            />\n          ),\n        }}\n      />\n    </div>\n  )\n}\n\ntype ColumnProps<T extends AnyObject> = Expand<\n  ComponentProps<typeof AntdTable.Column<T>>\n>\n\nconst TableColumn = <T extends AnyObject>(props: ColumnProps<T>) => {\n  return <AntdTable.Column<T> {...props} sortIcon={defaultSortIcon} />\n}\nTableColumn.displayName = 'Table.Column'\n\nTable.Column = TableColumn\nTable.Summary = AntdTable.Summary\n\nexport type { TableColumnType } from 'antd'\nexport { Table }\n"],"names":["AntdTable"],"mappings":"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"}

package/dist/src/components/tag/Tag.cjs

@@ -42,6 +42,8 @@ const Tag = ({
   showIcon = false,
   icon,
   size = "default",
+  bordered,
+  variant,
   ...props
 }) => {
   const iconComponent = React__namespace.useMemo(() => {
@@ -60,9 +62,11 @@ const Tag = ({
     antd.Tag,
     {
       ...props,
+      variant: variant ?? (bordered === false ? "filled" : "outlined"),
       color: status,
       icon: iconComponent,
       className: cx(
+        "j2-tag",
         props.className,
         statusToClassName[status],
         size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm"

package/dist/src/components/tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n  ArrowsClockwiseIcon,\n  CheckCircleIcon,\n  GearIcon,\n  Icon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon'>> & {\n  status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n}\n\ntype DefaultSizeProps = BaseProps & {\n  size?: 'default'\n  icon?: Icon\n  showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n  size: 'small'\n  /** Icons are not supported on the small variant — omit this prop. */\n  icon?: never\n  showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n  error: XCircleIcon,\n  success: CheckCircleIcon,\n  warning: WarningCircleIcon,\n  processing: ArrowsClockwiseIcon,\n  default: GearIcon,\n}\n\nconst statusToColor = {\n  error: 'var(--j2-color-error-text)',\n  success: 'var(--j2-color-success)',\n  warning: 'var(--j2-color-warning-text)',\n  processing: 'var(--j2-color-primary)',\n  default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n  status,\n  showIcon = false,\n  icon,\n  size = 'default',\n  ...props\n}: Props) => {\n  const iconComponent = React.useMemo(() => {\n    if (!showIcon || size === 'small') return null\n\n    const baseProps = {\n      size: 12,\n    }\n\n    const iconName: Icon = icon ?? colorToIcon[status]\n    const color: string = statusToColor[status]\n\n    return (\n      <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n        {React.createElement(iconName, { color, ...baseProps })}\n      </span>\n    )\n  }, [status, showIcon, icon])\n\n  const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n    {\n      default: 'bg-[var(--j2-color-fill-quaternary)]',\n    }\n\n  return (\n    <AntdTag\n      {...props}\n      color={status}\n      icon={iconComponent}\n      className={cx(\n        props.className,\n        statusToClassName[status],\n        size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n      )}\n    />\n  )\n}\n"],"names":["XCircleIcon","CheckCircleIcon","WarningCircleIcon","ArrowsClockwiseIcon","GearIcon","React","jsx","AntdTag"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,cAAc;AAAA,EAClB,OAAOA,MAAAA;AAAAA,EACP,SAASC,MAAAA;AAAAA,EACT,SAASC,MAAAA;AAAAA,EACT,YAAYC,MAAAA;AAAAA,EACZ,SAASC,MAAAA;AACX;AAEA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AACX;AAEO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAa;AACX,QAAM,gBAAgBC,iBAAM,QAAQ,MAAM;AACxC,QAAI,CAAC,YAAY,SAAS,QAAS,QAAO;AAE1C,UAAM,YAAY;AAAA,MAChB,MAAM;AAAA,IAAA;AAGR,UAAM,WAAiB,QAAQ,YAAY,MAAM;AACjD,UAAM,QAAgB,cAAc,MAAM;AAE1C,0CACG,QAAA,EAAK,MAAK,OAAM,WAAU,WAAU,cAAY,GAAG,MAAM,SACvD,UAAAA,iBAAM,cAAc,UAAU,EAAE,OAAO,GAAG,UAAA,CAAW,GACxD;AAAA,EAEJ,GAAG,CAAC,QAAQ,UAAU,IAAI,CAAC;AAE3B,QAAM,oBACJ;AAAA,IACE,SAAS;AAAA,EAAA;AAGb,SACEC,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,QACT,MAAM;AAAA,QACN,kBAAkB,MAAM;AAAA,QACxB,SAAS,WAAW;AAAA,MAAA;AAAA,IACtB;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n  ArrowsClockwiseIcon,\n  CheckCircleIcon,\n  GearIcon,\n  Icon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon'>> & {\n  status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n}\n\ntype DefaultSizeProps = BaseProps & {\n  size?: 'default'\n  icon?: Icon\n  showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n  size: 'small'\n  /** Icons are not supported on the small variant — omit this prop. */\n  icon?: never\n  showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n  error: XCircleIcon,\n  success: CheckCircleIcon,\n  warning: WarningCircleIcon,\n  processing: ArrowsClockwiseIcon,\n  default: GearIcon,\n}\n\nconst statusToColor = {\n  error: 'var(--j2-color-error-text)',\n  success: 'var(--j2-color-success)',\n  warning: 'var(--j2-color-warning-text)',\n  processing: 'var(--j2-color-primary)',\n  default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n  status,\n  showIcon = false,\n  icon,\n  size = 'default',\n  bordered,\n  variant,\n  ...props\n}: Props) => {\n  const iconComponent = React.useMemo(() => {\n    if (!showIcon || size === 'small') return null\n\n    const baseProps = {\n      size: 12,\n    }\n\n    const iconName: Icon = icon ?? colorToIcon[status]\n    const color: string = statusToColor[status]\n\n    return (\n      <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n        {React.createElement(iconName, { color, ...baseProps })}\n      </span>\n    )\n  }, [status, showIcon, icon])\n\n  const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n    {\n      default: 'bg-[var(--j2-color-fill-quaternary)]',\n    }\n\n  return (\n    <AntdTag\n      {...props}\n      variant={variant ?? (bordered === false ? 'filled' : 'outlined')}\n      color={status}\n      icon={iconComponent}\n      className={cx(\n        'j2-tag',\n        props.className,\n        statusToClassName[status],\n        size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n      )}\n    />\n  )\n}\n"],"names":["XCircleIcon","CheckCircleIcon","WarningCircleIcon","ArrowsClockwiseIcon","GearIcon","React","jsx","AntdTag"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,cAAc;AAAA,EAClB,OAAOA,MAAAA;AAAAA,EACP,SAASC,MAAAA;AAAAA,EACT,SAASC,MAAAA;AAAAA,EACT,YAAYC,MAAAA;AAAAA,EACZ,SAASC,MAAAA;AACX;AAEA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AACX;AAEO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,QAAM,gBAAgBC,iBAAM,QAAQ,MAAM;AACxC,QAAI,CAAC,YAAY,SAAS,QAAS,QAAO;AAE1C,UAAM,YAAY;AAAA,MAChB,MAAM;AAAA,IAAA;AAGR,UAAM,WAAiB,QAAQ,YAAY,MAAM;AACjD,UAAM,QAAgB,cAAc,MAAM;AAE1C,0CACG,QAAA,EAAK,MAAK,OAAM,WAAU,WAAU,cAAY,GAAG,MAAM,SACvD,UAAAA,iBAAM,cAAc,UAAU,EAAE,OAAO,GAAG,UAAA,CAAW,GACxD;AAAA,EAEJ,GAAG,CAAC,QAAQ,UAAU,IAAI,CAAC;AAE3B,QAAM,oBACJ;AAAA,IACE,SAAS;AAAA,EAAA;AAGb,SACEC,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,SAAS,YAAY,aAAa,QAAQ,WAAW;AAAA,MACrD,OAAO;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,QACT;AAAA,QACA,MAAM;AAAA,QACN,kBAAkB,MAAM;AAAA,QACxB,SAAS,WAAW;AAAA,MAAA;AAAA,IACtB;AAAA,EAAA;AAGN;;"}

package/dist/src/components/tag/Tag.d.ts

@@ -16,5 +16,5 @@ type SmallSizeProps = BaseProps & {
     showIcon?: never;
 };
 type Props = DefaultSizeProps | SmallSizeProps;
-export declare const Tag: ({ status, showIcon, icon, size, ...props }: Props) => React.JSX.Element;
+export declare const Tag: ({ status, showIcon, icon, size, bordered, variant, ...props }: Props) => React.JSX.Element;
 export {};

package/dist/src/components/tag/Tag.js

@@ -23,6 +23,8 @@ const Tag = ({
   showIcon = false,
   icon,
   size = "default",
+  bordered,
+  variant,
   ...props
 }) => {
   const iconComponent = React.useMemo(() => {
@@ -41,9 +43,11 @@ const Tag = ({
     Tag$1,
     {
       ...props,
+      variant: variant ?? (bordered === false ? "filled" : "outlined"),
       color: status,
       icon: iconComponent,
       className: cx(
+        "j2-tag",
         props.className,
         statusToClassName[status],
         size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm"

package/dist/src/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n  ArrowsClockwiseIcon,\n  CheckCircleIcon,\n  GearIcon,\n  Icon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon'>> & {\n  status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n}\n\ntype DefaultSizeProps = BaseProps & {\n  size?: 'default'\n  icon?: Icon\n  showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n  size: 'small'\n  /** Icons are not supported on the small variant — omit this prop. */\n  icon?: never\n  showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n  error: XCircleIcon,\n  success: CheckCircleIcon,\n  warning: WarningCircleIcon,\n  processing: ArrowsClockwiseIcon,\n  default: GearIcon,\n}\n\nconst statusToColor = {\n  error: 'var(--j2-color-error-text)',\n  success: 'var(--j2-color-success)',\n  warning: 'var(--j2-color-warning-text)',\n  processing: 'var(--j2-color-primary)',\n  default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n  status,\n  showIcon = false,\n  icon,\n  size = 'default',\n  ...props\n}: Props) => {\n  const iconComponent = React.useMemo(() => {\n    if (!showIcon || size === 'small') return null\n\n    const baseProps = {\n      size: 12,\n    }\n\n    const iconName: Icon = icon ?? colorToIcon[status]\n    const color: string = statusToColor[status]\n\n    return (\n      <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n        {React.createElement(iconName, { color, ...baseProps })}\n      </span>\n    )\n  }, [status, showIcon, icon])\n\n  const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n    {\n      default: 'bg-[var(--j2-color-fill-quaternary)]',\n    }\n\n  return (\n    <AntdTag\n      {...props}\n      color={status}\n      icon={iconComponent}\n      className={cx(\n        props.className,\n        statusToClassName[status],\n        size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n      )}\n    />\n  )\n}\n"],"names":["AntdTag"],"mappings":";;;;;;AAgCA,MAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AACX;AAEA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AACX;AAEO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAa;AACX,QAAM,gBAAgB,MAAM,QAAQ,MAAM;AACxC,QAAI,CAAC,YAAY,SAAS,QAAS,QAAO;AAE1C,UAAM,YAAY;AAAA,MAChB,MAAM;AAAA,IAAA;AAGR,UAAM,WAAiB,QAAQ,YAAY,MAAM;AACjD,UAAM,QAAgB,cAAc,MAAM;AAE1C,+BACG,QAAA,EAAK,MAAK,OAAM,WAAU,WAAU,cAAY,GAAG,MAAM,SACvD,UAAA,MAAM,cAAc,UAAU,EAAE,OAAO,GAAG,UAAA,CAAW,GACxD;AAAA,EAEJ,GAAG,CAAC,QAAQ,UAAU,IAAI,CAAC;AAE3B,QAAM,oBACJ;AAAA,IACE,SAAS;AAAA,EAAA;AAGb,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,QACT,MAAM;AAAA,QACN,kBAAkB,MAAM;AAAA,QACxB,SAAS,WAAW;AAAA,MAAA;AAAA,IACtB;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n  ArrowsClockwiseIcon,\n  CheckCircleIcon,\n  GearIcon,\n  Icon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon'>> & {\n  status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n}\n\ntype DefaultSizeProps = BaseProps & {\n  size?: 'default'\n  icon?: Icon\n  showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n  size: 'small'\n  /** Icons are not supported on the small variant — omit this prop. */\n  icon?: never\n  showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n  error: XCircleIcon,\n  success: CheckCircleIcon,\n  warning: WarningCircleIcon,\n  processing: ArrowsClockwiseIcon,\n  default: GearIcon,\n}\n\nconst statusToColor = {\n  error: 'var(--j2-color-error-text)',\n  success: 'var(--j2-color-success)',\n  warning: 'var(--j2-color-warning-text)',\n  processing: 'var(--j2-color-primary)',\n  default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n  status,\n  showIcon = false,\n  icon,\n  size = 'default',\n  bordered,\n  variant,\n  ...props\n}: Props) => {\n  const iconComponent = React.useMemo(() => {\n    if (!showIcon || size === 'small') return null\n\n    const baseProps = {\n      size: 12,\n    }\n\n    const iconName: Icon = icon ?? colorToIcon[status]\n    const color: string = statusToColor[status]\n\n    return (\n      <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n        {React.createElement(iconName, { color, ...baseProps })}\n      </span>\n    )\n  }, [status, showIcon, icon])\n\n  const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n    {\n      default: 'bg-[var(--j2-color-fill-quaternary)]',\n    }\n\n  return (\n    <AntdTag\n      {...props}\n      variant={variant ?? (bordered === false ? 'filled' : 'outlined')}\n      color={status}\n      icon={iconComponent}\n      className={cx(\n        'j2-tag',\n        props.className,\n        statusToClassName[status],\n        size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n      )}\n    />\n  )\n}\n"],"names":["AntdTag"],"mappings":";;;;;;AAgCA,MAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AACX;AAEA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AACX;AAEO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,QAAM,gBAAgB,MAAM,QAAQ,MAAM;AACxC,QAAI,CAAC,YAAY,SAAS,QAAS,QAAO;AAE1C,UAAM,YAAY;AAAA,MAChB,MAAM;AAAA,IAAA;AAGR,UAAM,WAAiB,QAAQ,YAAY,MAAM;AACjD,UAAM,QAAgB,cAAc,MAAM;AAE1C,+BACG,QAAA,EAAK,MAAK,OAAM,WAAU,WAAU,cAAY,GAAG,MAAM,SACvD,UAAA,MAAM,cAAc,UAAU,EAAE,OAAO,GAAG,UAAA,CAAW,GACxD;AAAA,EAEJ,GAAG,CAAC,QAAQ,UAAU,IAAI,CAAC;AAE3B,QAAM,oBACJ;AAAA,IACE,SAAS;AAAA,EAAA;AAGb,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,SAAS,YAAY,aAAa,QAAQ,WAAW;AAAA,MACrD,OAAO;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,QACT;AAAA,QACA,MAAM;AAAA,QACN,kBAAkB,MAAM;AAAA,QACxB,SAAS,WAAW;AAAA,MAAA;AAAA,IACtB;AAAA,EAAA;AAGN;"}

package/dist/style.css

@@ -1,18 +1,18 @@
 /* Target alerts without description - align icon and text midlines */
-._alert_1yhxg_2:not(.ant-alert-with-description) {
+._alert_iflcw_2:not(.ant-alert-with-description) {
   display: flex;
   align-items: center;
   padding-bottom: 6px; /* Reduced from default 12px to balance vertical alignment with icon */
 }
 
-._alert_1yhxg_2:not(.ant-alert-with-description) .ant-alert-icon {
+._alert_iflcw_2:not(.ant-alert-with-description) .ant-alert-icon {
   display: flex;
   align-items: center;
   align-self: flex-start;
   margin-top: 2px; /* Fine-tune vertical position to match text midline (derived from sizeXXS / 2) */
 }
 
-._alert_1yhxg_2:not(.ant-alert-with-description)
+._alert_iflcw_2:not(.ant-alert-with-description)
   .ant-alert-close-icon {
   display: flex;
   align-items: center;
@@ -20,12 +20,12 @@
   margin-top: 2px; /* Match icon alignment */
 }
 
-._alert_1yhxg_2:not(.ant-alert-with-description) .ant-alert-message {
+._alert_iflcw_2:not(.ant-alert-with-description) .ant-alert-title {
   line-height: 1.5714285714285714; /* Theme line height token value */
 }
 
 /* Align close icon for alerts WITH description */
-._alert_1yhxg_2.ant-alert-with-description .ant-alert-close-icon {
+._alert_iflcw_2.ant-alert-with-description .ant-alert-close-icon {
   align-self: flex-start;
   margin-top: 4px; /* Align with larger icon */
 }
@@ -197,47 +197,47 @@
     }
   }
 }
-._default_yukjt_1 .ant-collapse-header-text,
-._warning_yukjt_2 .ant-collapse-header-text,
-._error_yukjt_3 .ant-collapse-header-text {
+._default_1t61q_1 .ant-collapse-title,
+._warning_1t61q_2 .ant-collapse-title,
+._error_1t61q_3 .ant-collapse-title {
   display: flex;
   align-items: center;
   gap: var(--j2-size-xs);
 }
 
 /* Warning state */
-._warning_yukjt_2.ant-collapse {
+._warning_1t61q_2.ant-collapse {
   border-color: var(--j2-color-warning-border);
   background-color: var(--j2-color-warning-bg);
 }
 
-._warning_yukjt_2 .ant-collapse-item {
+._warning_1t61q_2 .ant-collapse-item {
   border-bottom-color: var(--j2-color-warning-border) !important;
 }
 
-._warning_yukjt_2 .ant-collapse-content {
+._warning_1t61q_2 .ant-collapse-panel {
   border-top-color: var(--j2-color-warning-border) !important;
 }
 
-._warning_yukjt_2 .ant-collapse-header {
+._warning_1t61q_2 .ant-collapse-header {
   color: var(--j2-color-text) !important;
 }
 
 /* Error state */
-._error_yukjt_3.ant-collapse {
+._error_1t61q_3.ant-collapse {
   border-color: var(--j2-color-error-border);
   background-color: var(--j2-color-error-bg);
 }
 
-._error_yukjt_3 .ant-collapse-item {
+._error_1t61q_3 .ant-collapse-item {
   border-bottom-color: var(--j2-color-error-border) !important;
 }
 
-._error_yukjt_3 .ant-collapse-content {
+._error_1t61q_3 .ant-collapse-panel {
   border-top-color: var(--j2-color-error-border) !important;
 }
 
-._error_yukjt_3 .ant-collapse-header {
+._error_1t61q_3 .ant-collapse-header {
   color: var(--j2-color-text) !important;
 }
 .j2-drawer {
@@ -308,29 +308,29 @@
     margin-top: 6px;
   }
 }
-._j2InputNumber_1jmfn_1.ant-input-number {
+._j2InputNumber_1t2hv_1.ant-input-number {
   &:hover {
-    .ant-input-number-handler-wrap {
+    .ant-input-number-actions {
       max-width: 100%;
       width: auto;
     }
   }
 
-  .ant-input-number-handler-wrap {
+  .ant-input-number-actions {
     max-width: 0;
     transition: max-width 0.2s;
 
-    .ant-input-number-handler {
+    .ant-input-number-action {
       height: 50%;
       padding: 0 12px;
       color: var(--j2-color-primary);
     }
 
-    .ant-input-number-handler-up {
+    .ant-input-number-action-up {
       align-items: flex-end;
     }
 
-    .ant-input-number-handler-down {
+    .ant-input-number-action-down {
       border-block-start: none;
       align-items: flex-start;
     }
@@ -637,29 +637,29 @@
 ._changeClientButton_r06sp_143 {
   border: none;
 }
-._j2Popover_1egkj_1 {
-  .ant-popover-inner {
+._j2Popover_wjtre_1 {
+  .ant-popover-container {
     padding: var(--j2-padding-lg);
   }
 
-  &._smallPadding_1egkj_6,
-  &._smPadding_1egkj_7 .ant-popover-inner {
+  &._smallPadding_wjtre_6,
+  &._smPadding_wjtre_7 .ant-popover-container {
     padding: var(--j2-padding-sm);
   }
 
-  &._xxsPadding_1egkj_11 .ant-popover-inner {
+  &._xxsPadding_wjtre_11 .ant-popover-container {
     padding: var(--j2-padding-xxs);
   }
 
-  &._xsPadding_1egkj_15 .ant-popover-inner {
+  &._xsPadding_wjtre_15 .ant-popover-container {
     padding: var(--j2-padding-xs);
   }
 
-  &._mdPadding_1egkj_19 .ant-popover-inner {
+  &._mdPadding_wjtre_19 .ant-popover-container {
     padding: var(--j2-padding-md);
   }
 
-  &._xlPadding_1egkj_23 .ant-popover-inner {
+  &._xlPadding_wjtre_23 .ant-popover-container {
     padding: var(--j2-padding-xl);
   }
 
@@ -670,14 +670,14 @@
   }
 }
 
-._popoverHeader_1egkj_34 {
+._popoverHeader_wjtre_34 {
   box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
   border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;
   font-weight: bold;
 }
 
-._scrollable_1egkj_40 {
-  .ant-popover-inner {
+._scrollable_wjtre_40 {
+  .ant-popover-container {
     padding: 0;
   }
 
@@ -693,7 +693,7 @@
     border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;
   }
 
-  .ant-popover-inner-content {
+  .ant-popover-content {
     padding: var(--j2-padding-sm) var(--j2-padding-sm) var(--j2-padding-sm)
       var(--j2-padding-sm);
     overflow: auto;
@@ -732,7 +732,7 @@
   vertical-align: middle !important;
 }
 /* Modal Component Styling */
-.j2-modal .ant-modal-content {
+.j2-modal .ant-modal-container {
   background: var(--j2-color-bg-elevated);
   border-radius: var(--j2-border-radius-lg);
   padding: 0;
@@ -948,12 +948,12 @@
   color: var(--j2-gold-6);
 }
 .j2Steps {
-  .ant-steps-item-custom > .ant-steps-icon {
+  .ant-steps-item-icon {
     display: flex;
     align-items: center;
   }
 
-  .ant-steps-item-custom:has(.vertical-check-icon) > .ant-steps-item-container {
+  .ant-steps-item:has(.vertical-check-icon) > .ant-steps-item-wrapper {
     align-items: flex-start;
   }
 
@@ -973,7 +973,7 @@
   }
 
   .check-small,
-  .check-default {
+  .check-medium {
     border-radius: 50%;
   }
 
@@ -983,72 +983,83 @@
     background-color: var(--j2-blue-1);
   }
 
-  .check-default {
+  .check-medium {
     width: 32px;
     height: 32px;
     background-color: var(--j2-blue-1);
   }
 
-  .check-default svg,
+  .check-medium svg,
   .check-small svg {
     display: block;
     margin: auto;
   }
 
-  .ant-steps-item-title::after {
+  .ant-steps-item-rail {
     color: var(--j2-blue-9);
   }
 }
-._hemisphericSelect_2ivoh_1 {
-  .ant-select-selector {
-    border-radius: 9999px !important;
-  }
+._hemisphericSelect_1g8eb_1 {
+  border-radius: 9999px !important;
 
-  .ant-select-selection-placeholder {
+  .ant-select-placeholder {
     color: var(--j2-color-primary) !important;
   }
 }
 
-._summarizedSelect_2ivoh_11 {
-  .ant-select-arrow {
+._summarizedSelect_1g8eb_9 {
+  .ant-select-suffix {
     color: var(--j2-color-primary);
   }
 
   .ant-select-selection-item {
     background: none !important;
     border: none !important;
+    padding-inline-end: 0 !important;
+    margin-inline-end: 0 !important;
+  }
+
+  .ant-select-selection-item-content {
+    margin-inline-end: 0 !important;
+  }
+
+  .ant-select-content-item-rest {
+    max-width: 100%;
+  }
+
+  .ant-select-content-item-suffix {
+    position: absolute;
+    width: 1px;
   }
 }
 
-._isActive_2ivoh_22 {
-  .ant-select-selector {
-    background: var(--j2-color-primary) !important;
+._isActive_1g8eb_35 {
+  background: var(--j2-color-primary) !important;
 
-    .ant-select-selection-item-content {
-      color: white !important;
-    }
+  .ant-select-selection-item-content {
+    color: white !important;
   }
 
-  .ant-select-arrow {
+  .ant-select-suffix {
     color: white !important;
   }
 }
 
-._menuContainer_2ivoh_36 .ant-select-item-option-selected {
+._menuContainer_1g8eb_47 .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_2ivoh_36
+._menuContainer_1g8eb_47
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._menuContainerMultiple_2ivoh_46 .ant-select-item-option-selected {
+._menuContainerMultiple_1g8eb_57 .ant-select-item-option-selected {
   background: var(--j2-color-primary-bg-hover) !important;
 }
 
-._menuContainerMultiple_2ivoh_46
+._menuContainerMultiple_1g8eb_57
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: inherit;
@@ -1056,17 +1067,17 @@
 
 /*
  * Headlined variant styles
- * Ant Design 5 uses :where() with 0 specificity, so our class selectors override without !important
+ * The select root owns its border and background in Ant Design 6.
  */
 
-._headlinedSelect_2ivoh_61.ant-select.ant-select-single {
+._headlinedSelect_1g8eb_72.ant-select.ant-select-single {
   font-size: var(--j2-font-size-heading-2);
   height: 40px;
   width: -moz-fit-content !important;
   width: fit-content !important;
 }
 
-._headlinedSelect_2ivoh_61.ant-select .ant-select-selector {
+._headlinedSelect_1g8eb_72.ant-select {
   background: transparent;
   padding-left: 0;
   padding-right: 4px;
@@ -1075,53 +1086,56 @@
   border-radius: 0;
 }
 
-._headlinedSelect_2ivoh_61.ant-select .ant-select-arrow {
+._headlinedSelect_1g8eb_72.ant-select .ant-select-suffix {
   height: 16px;
   width: 16px;
   right: 0;
 }
 
-._headlinedSelect_2ivoh_61.ant-select .ant-select-selection-item {
+._headlinedSelect_1g8eb_72.ant-select .ant-select-content {
   font-weight: 600;
   line-height: 1.3;
 }
 
 /* Hover state - show underline */
-._headlinedSelect_2ivoh_61.ant-select:hover .ant-select-selector {
+._headlinedSelect_1g8eb_72.ant-select:hover {
   border-bottom-color: var(--j2-color-primary);
 }
 
 /* Open/focused state - keep underline and text color */
-._headlinedSelect_2ivoh_61.ant-select-open .ant-select-selector,
-._headlinedSelect_2ivoh_61.ant-select-focused .ant-select-selector {
+._headlinedSelect_1g8eb_72.ant-select-open,
+._headlinedSelect_1g8eb_72.ant-select-focused {
   border-bottom-color: var(--j2-color-primary);
 }
 
-._headlinedSelect_2ivoh_61.ant-select-open .ant-select-selection-item,
-._headlinedSelect_2ivoh_61.ant-select-focused
-  .ant-select-selection-item {
+._headlinedSelect_1g8eb_72.ant-select-open .ant-select-content,
+._headlinedSelect_1g8eb_72.ant-select-focused .ant-select-content {
   color: inherit;
 }
 
 /* Headline dropdown styles - needs !important to override .menuContainer */
-._menuContainer_2ivoh_36._headlinedMenuContainer_2ivoh_105
+._menuContainer_1g8eb_47._headlinedMenuContainer_1g8eb_115
   .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_2ivoh_36._headlinedMenuContainer_2ivoh_105
+._menuContainer_1g8eb_47._headlinedMenuContainer_1g8eb_115
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._clearAllButton_2ivoh_116 {
+._clearAllButton_1g8eb_126 {
   color: var(--j2-color-primary);
 }
 
-._clearAllButton_2ivoh_116:hover {
+._clearAllButton_1g8eb_126:hover {
   background-color: var(--j2-color-primary-bg-hover);
 }
+.j2-tag {
+  margin-inline-end: var(--j2-margin-xs);
+}
+
 .ant-tag .anticon + span {
   margin-inline-start: var(--j2-margin-xxs);
 }
@@ -1231,7 +1245,7 @@
 ._messageIcon_1k9xp_1 {
   margin-right: 0.5rem;
 }
-.ant-notification-notice-message {
+.ant-notification-notice-title {
   font-size: var(--j2-font-size-lg);
   font-weight: var(--j2-font-weight-strong);
   line-height: var(--j2-line-height-lg);
@@ -1244,11 +1258,11 @@
   color: var(--j2-color-text);
 }
 
-._messageOnly_1pxqk_14 {
-  .ant-notification-notice-message {
+._messageOnly_a124a_14 {
+  .ant-notification-notice-title {
     font-weight: var(--j2-font-weight-normal);
   }
-  .ant-notification-notice-message {
+  .ant-notification-notice-title {
     margin-bottom: 0 !important;
   }
 }