@bioturing/components 0.15.5 → 0.16.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { componentMetadata as r, getComponentsByCategory as t } from "./metadata.js";
-import { Affix as p, Alert as m, Anchor as s, App as f, AutoComplete as n, Avatar as x, BackTop as l, Calendar as i, Card as c, Carousel as u, Cascader as d, Col as C, ColorPicker as T, ConfigProvider as h, DatePicker as k, Descriptions as g, Divider as S, Drawer as P, Dropdown as A, Flex as y, FloatButton as b, Grid as B, InputNumber as D, Layout as R, List as M, Mentions as v, Menu as F, Pagination as w, Popconfirm as E, Progress as I, QRCode as U, Rate as K, Result as L, Row as W, Skeleton as q, Space as G, Statistic as N, Steps as V, Tabs as O, TimePicker as Q, Timeline as j, Transfer as z, TreeSelect as H, Typography as J, Watermark as X, message as Y, notification as Z, theme as _, unstableSetRender as $, version as oo } from "antd";
+import { Affix as p, Alert as m, Anchor as s, App as f, AutoComplete as n, Avatar as x, BackTop as l, Calendar as i, Card as c, Carousel as u, Cascader as d, Col as C, ColorPicker as T, ConfigProvider as g, DatePicker as h, Descriptions as k, Divider as S, Drawer as P, Dropdown as y, Flex as A, FloatButton as B, Grid as D, InputNumber as R, Layout as b, List as v, Mentions as M, Menu as F, Pagination as w, Popconfirm as E, Progress as I, QRCode as U, Rate as K, Result as L, Row as W, Skeleton as q, Space as G, Statistic as N, Steps as V, Tabs as O, TimePicker as Q, Timeline as j, Transfer as z, TreeSelect as H, Typography as J, Watermark as X, message as Y, notification as Z, theme as _, unstableSetRender as $, version as oo } from "antd";
 import { Select as ro } from "./components/Select/component.js";
 import { Modal as ao } from "./components/Modal/index.js";
 import { IconButton as mo } from "./components/IconButton/component.js";
@@ -8,11 +8,11 @@ import { Checkbox as xo } from "./components/Checkbox/component.js";
 import { Segmented as io } from "./components/Segmented/component.js";
 import { Table as uo } from "./components/Table/component.js";
 import { Tag as To } from "./components/Tag/component.js";
-import { ThemeProvider as ko } from "./components/ThemeProvider/component.js";
+import { ThemeProvider as ho } from "./components/ThemeProvider/component.js";
 import { Split as So, Splitter as Po } from "./components/Splitter/component.js";
-import { Truncate as yo } from "./components/Truncate/component.js";
-import { DropdownMenu as Bo } from "./components/DropdownMenu/component.js";
-import { clsx as Ro, cn as Mo, cx as vo } from "./components/utils/cn.js";
+import { Truncate as Ao } from "./components/Truncate/component.js";
+import { DropdownMenu as Do } from "./components/DropdownMenu/component.js";
+import { clsx as bo, cn as vo, cx as Mo } from "./components/utils/cn.js";
 import { reactNodeToString as wo } from "./components/utils/reactToString.js";
 import { isTracebackError as Io } from "./components/utils/isTracebackError.js";
 import { parseAntdPlacement as Ko, useAntdCssVarClassname as Lo, useCls as Wo, useGetPrefixCls as qo } from "./components/utils/antdUtils.js";
@@ -30,31 +30,33 @@ import { getUniqueKeysFromOriginals as fe, processTreeData as ne } from "./compo
 import { Tree as le } from "./components/Tree/components.js";
 import { Spin as ce } from "./components/Spin/component.js";
 import { Empty as de, EmptyIcon as Ce } from "./components/Empty/component.js";
-import { Form as he } from "./components/Form/component.js";
-import { Field as ge } from "./components/Field/component.js";
+import { Form as ge } from "./components/Form/component.js";
+import { Field as ke } from "./components/Field/component.js";
 import { Tour as Pe } from "./components/Tour/component.js";
-import { Toast as ye } from "./components/Toast/component.js";
-import { toast as Be, toastManager as De } from "./components/Toast/function.js";
-import { VerticalCollapsiblePanel as Me } from "./components/VerticalCollapsiblePanel/component.js";
+import { Toast as Ae } from "./components/Toast/component.js";
+import { toast as De, toastManager as Re } from "./components/Toast/function.js";
+import { VerticalCollapsiblePanel as ve } from "./components/VerticalCollapsiblePanel/component.js";
 import { PopupPanel as Fe } from "./components/PopupPanel/component.js";
 import { CodeBlock as Ee } from "./components/CodeBlock/component.js";
 import { StackChild as Ue } from "./components/Stack/StackChild.js";
 import { Stack as Le } from "./components/Stack/index.js";
 import { Collapse as qe } from "./components/Collapse/component.js";
 import { Input as Ne } from "./components/Input/component.js";
-import { Badge as Oe } from "./components/Badge/component.js";
-import { Radio as je } from "./components/Radio/component.js";
-import { Button as He } from "./components/Button/component.js";
-import { DSRoot as Xe } from "./components/DSRoot/component.js";
-import { useForm as Ze, useWatch as _e } from "antd/es/form/Form";
-import { useBreakpoint as or, useMessage as er, useModal as rr, useToken as tr } from "./components/hooks/antd.js";
-import { default as pr } from "antd/es/app/useApp";
-import { useAnimationsFinished as sr, useEnhancedEffect as fr, useEventCallback as nr, useLatestRef as xr } from "./components/hooks/base-ui.js";
-import { useControlledState as ir } from "./components/hooks/useControlledState.js";
-import { useCharts as ur } from "./components/hooks/useCharts.js";
-import { antdColorTokens as Cr, darkTheme as Tr, lightTheme as hr } from "./tokens/and-theme/tokens.js";
-import { categoricalChartColorKeys as gr, categoricalChartColorTokens as Sr, categoricalChartsColors as Pr } from "./tokens/charts/index.js";
-import { chartColorTokens as yr, rawChartColorTokens as br } from "./tokens/charts/tokens.js";
+import { Badge as Oe, InternalBadge as Qe } from "./components/Badge/component.js";
+import { Radio as ze } from "./components/Radio/component.js";
+import { Button as Je } from "./components/Button/component.js";
+import { DSRoot as Ye } from "./components/DSRoot/component.js";
+import { DSRootContextProvider as _e, useDS as $e } from "./components/DSRoot/context.js";
+import { useForm as er, useWatch as rr } from "antd/es/form/Form";
+import { useBreakpoint as ar, useMessage as pr, useModal as mr, useToken as sr } from "./components/hooks/antd.js";
+import { default as nr } from "antd/es/app/useApp";
+import { useAnimationsFinished as lr, useEnhancedEffect as ir, useEventCallback as cr, useLatestRef as ur } from "./components/hooks/base-ui.js";
+import { useControlledState as Cr } from "./components/hooks/useControlledState.js";
+import { useCharts as gr } from "./components/hooks/useCharts.js";
+import { antdColorTokens as kr, darkTheme as Sr, lightTheme as Pr } from "./tokens/and-theme/tokens.js";
+import { categoricalChartColorKeys as Ar, categoricalChartColorTokens as Br, categoricalChartsColors as Dr } from "./tokens/charts/index.js";
+import { chartColorTokens as br, rawChartColorTokens as vr } from "./tokens/charts/tokens.js";
+import { getColorsByTheme as Fr, getTokensByTheme as wr, resolveColorTokens as Er } from "./tokens/utils.js";
 export {
   p as Affix,
   m as Alert,
@@ -65,7 +67,7 @@ export {
   l as BackTop,
   Oe as Badge,
   ae as Breadcrumb,
-  He as Button,
+  Je as Button,
   i as Calendar,
   c as Card,
   u as Carousel,
@@ -75,28 +77,30 @@ export {
   C as Col,
   qe as Collapse,
   T as ColorPicker,
-  h as ConfigProvider,
-  Xe as DSRoot,
-  k as DatePicker,
+  g as ConfigProvider,
+  Ye as DSRoot,
+  _e as DSRootContextProvider,
+  h as DatePicker,
   jo as DefaultUpload,
-  g as Descriptions,
+  k as Descriptions,
   S as Divider,
   P as Drawer,
-  A as Dropdown,
-  Bo as DropdownMenu,
+  y as Dropdown,
+  Do as DropdownMenu,
   de as Empty,
   Ce as EmptyIcon,
-  ge as Field,
-  y as Flex,
-  b as FloatButton,
-  he as Form,
-  B as Grid,
+  ke as Field,
+  A as Flex,
+  B as FloatButton,
+  ge as Form,
+  D as Grid,
   mo as IconButton,
   Ne as Input,
-  D as InputNumber,
-  R as Layout,
-  M as List,
-  v as Mentions,
+  R as InputNumber,
+  Qe as InternalBadge,
+  b as Layout,
+  v as List,
+  M as Mentions,
   F as Menu,
   ao as Modal,
   w as Pagination,
@@ -105,7 +109,7 @@ export {
   Fe as PopupPanel,
   I as Progress,
   U as QRCode,
-  je as Radio,
+  ze as Radio,
   K as Rate,
   L as Result,
   W as Row,
@@ -126,64 +130,68 @@ export {
   uo as Table,
   O as Tabs,
   To as Tag,
-  ko as ThemeProvider,
+  ho as ThemeProvider,
   Q as TimePicker,
   j as Timeline,
-  ye as Toast,
+  Ae as Toast,
   re as Tooltip,
   Pe as Tour,
   z as Transfer,
   Oo as Transition,
   le as Tree,
   H as TreeSelect,
-  yo as Truncate,
+  Ao as Truncate,
   J as Typography,
   zo as Upload,
-  Me as VerticalCollapsiblePanel,
+  ve as VerticalCollapsiblePanel,
   X as Watermark,
   No as WithAntdTokens,
-  Cr as antdColorTokens,
-  gr as categoricalChartColorKeys,
-  Sr as categoricalChartColorTokens,
-  Pr as categoricalChartsColors,
-  yr as chartColorTokens,
-  Ro as clsx,
-  Mo as cn,
+  kr as antdColorTokens,
+  Ar as categoricalChartColorKeys,
+  Br as categoricalChartColorTokens,
+  Dr as categoricalChartsColors,
+  br as chartColorTokens,
+  bo as clsx,
+  vo as cn,
   r as componentMetadata,
-  vo as cx,
-  Tr as darkTheme,
+  Mo as cx,
+  Sr as darkTheme,
+  Fr as getColorsByTheme,
   t as getComponentsByCategory,
+  wr as getTokensByTheme,
   fe as getUniqueKeysFromOriginals,
   Io as isTracebackError,
-  hr as lightTheme,
+  Pr as lightTheme,
   Y as message,
   Z as notification,
   Ko as parseAntdPlacement,
   ne as processTreeData,
-  br as rawChartColorTokens,
+  vr as rawChartColorTokens,
   wo as reactNodeToString,
+  Er as resolveColorTokens,
   _ as theme,
-  Be as toast,
-  De as toastManager,
+  De as toast,
+  Re as toastManager,
   $ as unstableSetRender,
-  sr as useAnimationsFinished,
+  lr as useAnimationsFinished,
   Lo as useAntdCssVarClassname,
-  pr as useApp,
-  or as useBreakpoint,
-  ur as useCharts,
+  nr as useApp,
+  ar as useBreakpoint,
+  gr as useCharts,
   Wo as useCls,
-  ir as useControlledState,
-  fr as useEnhancedEffect,
-  nr as useEventCallback,
-  Ze as useForm,
+  Cr as useControlledState,
+  $e as useDS,
+  ir as useEnhancedEffect,
+  cr as useEventCallback,
+  er as useForm,
   qo as useGetPrefixCls,
-  xr as useLatestRef,
-  er as useMessage,
-  rr as useModal,
-  tr as useToken,
+  ur as useLatestRef,
+  pr as useMessage,
+  mr as useModal,
+  sr as useToken,
   me as useUniqueKeysTree,
   Jo as useUploadItemRender,
-  _e as useWatch,
+  rr as useWatch,
   oo as version
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/metadata.js

@@ -4,9 +4,9 @@ const i = {
     link: "/badge",
     base: "antd",
     refinements: [
-      "Applies a BioTuring Design System specific CSS class 'ds-badge'.",
+      "Applies a BioTuring Design System specific CSS class `ds-badge`.",
       "Applies Ant Design's CSS variable class name to ensure proper theming context.",
-      "Sets 'display: inline-flex;' on the 'ds-badge' class via './style.css' for consistent layout."
+      "Sets `display: inline-flex;` on the `ds-badge` class via `./style.css` for consistent layout."
     ],
     category: "Data Display",
     originalDocUrl: "https://ant.design/components/badge",
@@ -17,10 +17,10 @@ const i = {
     link: "/breadcrumb",
     base: "antd",
     refinements: [
-      "Employs a custom 'useItemRender' hook to allow icons (from 'item.icon') to be rendered alongside the title within each breadcrumb link.",
-      "Introduces a 'noWrap' boolean prop for responsive behavior: when true, breadcrumb items attempt to stay on a single line, with text overflow and ellipsis applied to truncatable items.",
-      "Applies BioTuring Design System specific styling via './style.css' for layout (flexbox-based), item spacing, icon integration, and responsive truncation.",
-      "Exports styled 'Breadcrumb.Item' and 'Breadcrumb.Separator' sub-components."
+      "Employs a custom `useItemRender` hook to allow icons (from `item.icon`) to be rendered alongside the title within each breadcrumb link.",
+      "Introduces a `noWrap` boolean prop for responsive behavior: when true, breadcrumb items attempt to stay on a single line, with text overflow and ellipsis applied to truncatable items.",
+      "Applies BioTuring Design System specific styling via `./style.css` for layout (flexbox-based), item spacing, icon integration, and responsive truncation.",
+      "Exports styled `Breadcrumb.Item` and `Breadcrumb.Separator` sub-components."
     ],
     category: "Navigation",
     originalDocUrl: "https://ant.design/components/breadcrumb",
@@ -49,7 +49,7 @@ const i = {
     link: "/code-block",
     base: "custom",
     refinements: [
-      "Custom implementation for syntax highlighting using prism-react-renderer"
+      "Custom implementation for syntax highlighting using `prism-react-renderer`"
     ],
     category: "Data Display",
     packages: ["prism-react-renderer"],
@@ -85,16 +85,16 @@ const i = {
     link: "/empty",
     base: "antd",
     refinements: [
-      "Replaces the default Ant Design illustration with a custom SVG icon ('EmptyIcon') defined within the component.",
-      "Introduces a 'size' prop ('small', 'medium', 'large', default 'medium') that controls the font-size of the custom 'EmptyIcon'.",
-      "Applies specific font-sizes for the icon based on the 'size' prop (small: 2rem, medium: 3rem, large: 4rem) via 'style.css'.",
-      "The 'small' size icon also has its color set to 'var(--ds-color-base-solid)'.",
-      "Adjusts the Ant Design Empty image container height to 'auto' via 'style.css'.",
-      "Applies BioTuring Design System specific styling and CSS classes (e.g., 'ds-empty', 'ds-empty-icon')."
+      "Replaces the default Ant Design illustration with a custom SVG icon (`EmptyIcon`) defined within the component.",
+      "Introduces a `size` prop (`small`, `medium`, `large`, default `medium`) that controls the font-size of the custom `EmptyIcon`.",
+      "Applies specific font-sizes for the icon based on the `size` prop (small: 2rem, medium: 3rem, large: 4rem) via `style.css`.",
+      "The `small` size icon also has its color set to `var(--ds-color-base-solid)`.",
+      "Adjusts the Ant Design Empty image container height to `auto` via `style.css`.",
+      "Applies BioTuring Design System specific styling and CSS classes (e.g., `ds-empty`, `ds-empty-icon`)."
     ],
     category: "Data Display",
     originalDocUrl: "https://ant.design/components/empty",
-    description: "A placeholder for when there is no data to display."
+    description: "Displays a placeholder when content is empty or unavailable."
   },
   Field: {
     name: "Field",
@@ -149,21 +149,21 @@ const i = {
     link: "/modal",
     base: "antd",
     refinements: [
-      "Added predefined sizes: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'fullscreen'",
-      "Introduced a general 'loading' state prop for the modal content",
-      "Added 'hideOkButton' and 'hideCancelButton' props for straightforward visibility control of footer buttons",
-      "Added 'contentPadding' prop for direct control over modal body padding",
-      "Enhanced header customization with 'afterTitle', 'beforeCloseButton', and 'afterCloseButton' slots for additional elements or actions",
-      "Implemented 'defaultFixedHeaderFooter' behavior: header and footer become fixed when content overflows (controlled by internal overflow detection)",
-      "Changed 'centered' prop to default to 'true'",
-      "Introduced 'type' prop ('default', 'info', 'success', 'error', 'warning') influencing default behaviors like size",
-      "Added 'background' prop ('elevated', 'container') for explicit control over modal background style, with size-dependent defaults",
-      "Uses a custom 'X' icon from '@bioturing/assets' as the default close button icon",
-      "Provides 'bodyScrollable' prop (defaults to true) to manage content scroll behavior within the modal body"
+      "Added predefined sizes: `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `fullscreen`",
+      "Introduced a general `loading` state prop for the modal content",
+      "Added `hideOkButton` and `hideCancelButton` props for straightforward visibility control of footer buttons",
+      "Added `contentPadding` prop for direct control over modal body padding",
+      "Enhanced header customization with `afterTitle`, `beforeCloseButton`, and `afterCloseButton` slots for additional elements or actions",
+      "Implemented `defaultFixedHeaderFooter` behavior: header and footer become fixed when content overflows (controlled by internal overflow detection)",
+      "Changed `centered` prop to default to `true`",
+      "Introduced `type` prop (`default`, `info`, `success`, `error`, `warning`) influencing default behaviors like size",
+      "Added `background` prop (`elevated`, `container`) for explicit control over modal background style, with size-dependent defaults",
+      "Uses a custom `X` icon from `@bioturing/assets` as the default close button icon",
+      "Provides `bodyScrollable` prop (defaults to true) to manage content scroll behavior within the modal body"
     ],
     category: "Overlay",
     originalDocUrl: "https://ant.design/components/modal",
-    description: "A dialog box/popup window that is displayed on top of the current page."
+    description: "A modal dialog that appears in front of the app content to provide critical information or ask for a decision."
   },
   Popover: {
     name: "Popover",
@@ -171,7 +171,7 @@ const i = {
     base: "antd",
     // Retains AntD as 'base' because it aims for API compatibility
     refinements: [
-      "Refactored to use @base-ui-components/react/popover internally",
+      "Refactored to use `@base-ui-components/react/popover` internally",
       "Maintains Ant Design API compatibility",
       "Custom prop mapping for placement and trigger to align with Base UI Popover",
       "Combined title and content props into a single node for Base UI Popover's content area"
@@ -179,7 +179,7 @@ const i = {
     category: "Overlay",
     originalDocUrl: "https://ant.design/components/popover",
     // Original AntD doc for API reference
-    description: "A small overlay that appears when a user interacts with an element, displaying additional information or actions."
+    description: "A floating card popped by clicking or hovering that displays additional information."
   },
   PopupPanel: {
     name: "PopupPanel",
@@ -209,23 +209,23 @@ const i = {
     link: "/scroll-area",
     base: "base-ui",
     refinements: [
-      "Wraps '@base-ui-components/react/ScrollArea' to integrate with the BioTuring Design System.",
-      "Provides consistent 'classNames' prop pattern for styling different parts (viewport, scrollbar, thumb).",
-      "Applies specific BioTuring Design System CSS classes (e.g., 'ds-scroll-area', 'ds-scroll-area-viewport', 'ds-scroll-area-scrollbar', 'ds-scroll-area-thumb') to Base UI component parts.",
-      "Provides extensive custom styling via './style.css' for the root, viewport (including 'focus-visible' styles), scrollbar (opacity transitions on hover/scroll, orientation-based dimensions), and thumb (custom border-radius, background, and border colors using design tokens)."
+      "Wraps `@base-ui-components/react/ScrollArea` to integrate with the BioTuring Design System.",
+      "Provides consistent `classNames` prop pattern for styling different parts (viewport, scrollbar, thumb).",
+      "Applies specific BioTuring Design System CSS classes (e.g., `ds-scroll-area`, `ds-scroll-area-viewport`, `ds-scroll-area-scrollbar`, `ds-scroll-area-thumb`) to Base UI component parts.",
+      "Provides extensive custom styling via `./style.css` for the root, viewport (including `focus-visible` styles), scrollbar (opacity transitions on hover/scroll, orientation-based dimensions), and thumb (custom border-radius, background, and border colors using design tokens)."
     ],
     category: "Layout",
     packages: ["@base-ui-components/react"],
     originalDocUrl: "https://base-ui.com/react/components/scroll-area",
-    description: "Provides a customizable scrollable container for content that exceeds its bounds."
+    description: "A scrollable container with custom scrollbars that blend with the design system."
   },
   Segmented: {
     name: "Segmented",
     link: "/segmented",
     base: "antd",
     refinements: [
-      "Structured as a typed 'forwardRef' wrapper around the Ant Design Segmented component for type safety and consistency.",
-      "Applies custom styles via './style.css' to ensure proper alignment and sizing of item labels and icons within the segmented control (e.g., flex centering for labels and icons, default icon size)."
+      "Structured as a typed `forwardRef` wrapper around the Ant Design Segmented component for type safety and consistency.",
+      "Applies custom styles via `./style.css` to ensure proper alignment and sizing of item labels and icons within the segmented control (e.g., flex centering for labels and icons, default icon size)."
     ],
     category: "Data Entry",
     originalDocUrl: "https://ant.design/components/segmented",
@@ -236,24 +236,24 @@ const i = {
     link: "/select",
     base: "antd",
     refinements: [
-      "Introduced 'enhancePositioner' prop: Utilizes '@floating-ui/react' for robust dropdown positioning, allowing it to break out of overflow containers and intelligently place itself.",
-      "Added 'popupSize' prop (works with 'enhancePositioner'): Controls the dropdown width with predefined sizes (e.g., 'small', 'medium', 'large'), pixel values, or 'fit-content'.",
-      "Replaced default suffix icon with a custom 'CaretDown' icon from '@bioturing/assets'.",
-      "Customized multiple selection mode: Uses Ant Design 'Checkbox' components for indicating selected items in the dropdown.",
-      "Applied specific BioTuring Design System styling and CSS classes, including enhanced popup styles when 'enhancePositioner' is active."
+      "Introduced `enhancePositioner` prop: Utilizes `@floating-ui/react` for robust dropdown positioning, allowing it to break out of overflow containers and intelligently place itself.",
+      "Added `popupSize` prop (works with `enhancePositioner`): Controls the dropdown width with predefined sizes (e.g., `small`, `medium`, `large`), pixel values, or `fit-content`.",
+      "Replaced default suffix icon with a custom `CaretDown` icon from `@bioturing/assets`.",
+      "Customized multiple selection mode: Uses Ant Design `Checkbox` components for indicating selected items in the dropdown.",
+      "Applied specific BioTuring Design System styling and CSS classes, including enhanced popup styles when `enhancePositioner` is active."
     ],
     category: "Data Entry",
     packages: ["@floating-ui/react", "rc-select"],
     originalDocUrl: "https://ant.design/components/select",
-    description: "Allows users to select one or more options from a dropdown list."
+    description: "A dropdown selection component for selecting values from a list of options."
   },
   Slider: {
     name: "Slider",
     link: "/slider",
     base: "antd",
     refinements: [
-      "Applies a BioTuring Design System specific CSS class 'ds-slider'.",
-      "Modifies the default behavior of the slider's tooltip by setting 'tooltip.arrow' to 'false' by default (Ant Design's default is true)."
+      "Applies a BioTuring Design System specific CSS class `ds-slider`.",
+      "Modifies the default behavior of the slider's tooltip by setting `tooltip.arrow` to `false` by default (Ant Design's default is true)."
     ],
     category: "Data Entry",
     originalDocUrl: "https://ant.design/components/slider",
@@ -297,44 +297,38 @@ const i = {
     link: "/switch",
     base: "antd",
     refinements: [
-      "Structured as a typed 'forwardRef' wrapper around Ant Design's Switch component.",
-      "Applies custom CSS to ensure 'checkedChildren' and 'unCheckedChildren' (e.g., icons, text) are properly centered within the switch handle."
+      "Structured as a typed `forwardRef` wrapper around Ant Design's Switch component.",
+      "Applies custom CSS to ensure `checkedChildren` and `unCheckedChildren` (e.g., icons, text) are properly centered within the switch handle."
     ],
     category: "Data Entry",
     originalDocUrl: "https://ant.design/components/switch",
-    description: "A toggle control that allows users to switch between two states, typically on or off."
+    description: "A toggle switch for changing between two states, typically on or off."
   },
   Table: {
     name: "Table",
     link: "/table",
     base: "antd",
     refinements: [
-      "Replaces default sort icons with custom 'CaretUp' and 'CaretDown' icons from '@bioturing/assets'. Displays both when inactive, and a filled version of the active one.",
-      "Replaces default filter icon with a custom 'Funnel' icon (filled) from '@bioturing/assets'.",
-      "Overrides 'locale.emptyText' to use the BioTuring 'Empty' component.",
-      "Adds an 'emptyDescription' prop to customize the message displayed by the 'Empty' component when the table is empty.",
-      "Uses a custom CSS-based loading indicator ('spin-loader') when the 'loading' prop is active.",
-      "Defaults 'scroll.x' to 'fit-content' to optimize horizontal scrolling behavior.",
-      "Applies BioTuring Design System specific styling via './style.css' for overall table appearance, including headers, rows, borders, and hover effects."
+      "Applies BioTuring Design System specific styling via `./style.css`.",
+      "Enhances the default Ant Design Table with additional features."
     ],
     category: "Data Display",
-    packages: ["rc-table"],
     originalDocUrl: "https://ant.design/components/table",
-    description: "Displays data in a structured, tabular format."
+    description: "A table displays rows of data, supporting features like sorting, filtering, and pagination."
   },
   Tag: {
     name: "Tag",
     link: "/tag",
     base: "antd",
     refinements: [
-      "Defaults to using the 'X' icon (bold) from '@bioturing/assets' as the 'closeIcon' if the tag is 'closable' and no custom icon is provided.",
-      "Introduces an 'active' boolean prop (defaults to false).",
-      "When 'active={true}', applies specific styling (background, border, text color using '--ds-color-primary' tokens) via a 'data-active' attribute and 'style.css'.",
-      "Applies BioTuring Design System specific styling via './style.css', including base styles for alignment and consistent close icon coloring ('--ds-color-icon')."
+      "Defaults to using the `X` icon (bold) from `@bioturing/assets` as the `closeIcon` if the tag is `closable` and no custom icon is provided.",
+      "Introduces an `active` boolean prop (defaults to false).",
+      "When `active={true}`, applies specific styling (background, border, text color using `--ds-color-primary` tokens) via a `data-active` attribute and `style.css`.",
+      "Applies BioTuring Design System specific styling via `./style.css`, including base styles for alignment and consistent close icon coloring (`--ds-color-icon`)."
     ],
     category: "Data Display",
     originalDocUrl: "https://ant.design/components/tag",
-    description: "Used for marking or categorizing items with small labels."
+    description: "Small UI elements for categorization, filtering, or highlighting items."
   },
   ThemeProvider: {
     name: "ThemeProvider",
@@ -365,38 +359,38 @@ const i = {
     link: "/tooltip",
     base: "antd",
     refinements: [
-      "Defaults the 'arrow' prop to 'false', hiding the tooltip arrow by default (Ant Design's default shows an arrow).",
-      "Applies a BioTuring Design System specific CSS class 'ds-tooltip'.",
-      "Custom CSS sets 'min-height: auto;' for the inner content, allowing tooltips to be shorter than Ant Design's default minimum height."
+      "Defaults the `arrow` prop to `false`, hiding the tooltip arrow by default (Ant Design's default shows an arrow).",
+      "Applies a BioTuring Design System specific CSS class `ds-tooltip`.",
+      "Custom CSS sets `min-height: auto;` for the inner content, allowing tooltips to be shorter than Ant Design's default minimum height."
     ],
     category: "Overlay",
     originalDocUrl: "https://ant.design/components/tooltip",
-    description: "A small pop-up that displays information when a user hovers over or focuses on an element."
+    description: "A simple text popup tip that appears when a user hovers over an element."
   },
   Tour: {
     name: "Tour",
     link: "/tour",
     base: "antd",
     refinements: [
-      "Provides a custom default rendering for step indicators ('indicatorsRender') if none is supplied. This includes a 'current / total' text and visual dots for steps.",
-      "Applies BioTuring Design System specific CSS classes (e.g., 'ds-tour') for extensive styling.",
+      "Provides a custom default rendering for step indicators (`indicatorsRender`) if none is supplied. This includes a `current / total` text and visual dots for steps.",
+      "Applies BioTuring Design System specific CSS classes (e.g., `ds-tour`) for extensive styling.",
       "Customizes typography for title, description, and indicator text using design system tokens.",
       "Adjusts layout and spacing for header, footer, and content within the tour description (paragraphs, lists, icons).",
       "Includes specific styling for the appearance of the custom default indicators (wrapper, summary text, active/inactive dots)."
     ],
     category: "Feedback",
     originalDocUrl: "https://ant.design/components/tour",
-    description: "Guides users through new features or UI elements in a step-by-step manner."
+    description: "A guided tour interface that leads users through specific features of an application."
   },
   Transition: {
     name: "Transition",
     link: "/transition",
     base: "base-ui",
     refinements: [
-      "Wraps Base UI utilities (e.g., 'useTransitionStatus', 'useRender') and custom hooks (e.g., 'useAnimationsFinished') to manage element enter/leave transitions.",
-      "Accepts 'starting' and 'ending' props, which can be CSS class strings (for Tailwind) or style objects, to define transition states.",
-      "Dynamically applies 'starting'/'ending' styles and sets 'data-starting'/'data-ending' attributes on the child element based on transition phase.",
-      "Manages mounting/unmounting of children post-animation, with a 'keepMounted' option, using a custom 'useAnimationsFinished' hook.",
+      "Wraps Base UI utilities (e.g., `useTransitionStatus`, `useRender`) and custom hooks (e.g., `useAnimationsFinished`) to manage element enter/leave transitions.",
+      "Accepts `starting` and `ending` props, which can be CSS class strings (for Tailwind) or style objects, to define transition states.",
+      "Dynamically applies `starting`/`ending` styles and sets `data-starting`/`data-ending` attributes on the child element based on transition phase.",
+      "Manages mounting/unmounting of children post-animation, with a `keepMounted` option, using a custom `useAnimationsFinished` hook.",
       "Provides a declarative API for CSS-based transitions."
     ],
     category: "Utility",
@@ -452,13 +446,13 @@ const i = {
     link: "/upload",
     base: "antd",
     refinements: [
-      "Defaults to a custom 'itemRender' function that utilizes a bespoke 'UploadItem' component for the file list.",
-      "'UploadItem' component features: file type icon, middle-truncated file name (using Truncate component), progress bar with status mapping, and a remove button.",
-      "Added 'showRemoveButton' prop (defaults to true) on the 'Upload' component to control visibility of the remove action in 'UploadItem'.",
-      "'UploadItem' includes a slot for 'extraActions' allowing additional custom controls per file.",
-      "Provides a default 'Button' with 'CloudArrowUp' icon and 'Upload Files' text if no children are passed to 'Upload'.",
-      "Includes 'Upload.Dragger' for drag-and-drop functionality, styled for the design system.",
-      "Exports 'Upload.Item' (the UploadItem component) for potential direct use.",
+      "Defaults to a custom `itemRender` function that utilizes a bespoke `UploadItem` component for the file list.",
+      "`UploadItem` component features: file type icon, middle-truncated file name (using Truncate component), progress bar with status mapping, and a remove button.",
+      "Added `showRemoveButton` prop (defaults to true) on the `Upload` component to control visibility of the remove action in `UploadItem`.",
+      "`UploadItem` includes a slot for `extraActions` allowing additional custom controls per file.",
+      "Provides a default `Button` with `CloudArrowUp` icon and 'Upload Files' text if no children are passed to `Upload`.",
+      "Includes `Upload.Dragger` for drag-and-drop functionality, styled for the design system.",
+      "Exports `Upload.Item` (the UploadItem component) for potential direct use.",
       "Applies BioTuring Design System specific styling and CSS classes."
     ],
     category: "Data Entry",
@@ -470,15 +464,15 @@ const i = {
     link: "/vertical-collapsible-panel",
     base: "base-ui",
     refinements: [
-      "Built upon '@base-ui-components/react' Collapsible components ('Collapsible.Root', 'Collapsible.Panel').",
-      "Manages open/closed state with a custom 'useControlledState' hook for controlled/uncontrolled behavior.",
-      "Features custom expand/collapse trigger icons ('MinusCircle', 'PlusCircle' from '@bioturing/assets') via IconButton.",
-      "Automatically truncates string titles using the 'Truncate' component.",
-      "Provides 'afterTitle' and 'actions' slots in the header for additional UI elements, visible when open.",
-      "Integrates the BioTuring 'Transition' component for smooth open/close animations of the panel body, managed with 'useAnimationsFinished' hook.",
-      "Offers a 'contentPadding' prop (default '16px') for customizable body padding via CSS variable '--ds-content-padding'.",
-      "Extensive custom CSS for layout, typography, and a unique feature: header text displays vertically ('writing-mode: vertical-rl') when collapsed.",
-      "Supports 'keepMounted' prop and applies Ant Design CSS variables for theming."
+      "Built upon `@base-ui-components/react` Collapsible components (`Collapsible.Root`, `Collapsible.Panel`).",
+      "Manages open/closed state with a custom `useControlledState` hook for controlled/uncontrolled behavior.",
+      "Features custom expand/collapse trigger icons (`MinusCircle`, `PlusCircle` from `@bioturing/assets`) via IconButton.",
+      "Automatically truncates string titles using the `Truncate` component.",
+      "Provides `afterTitle` and `actions` slots in the header for additional UI elements, visible when open.",
+      "Integrates the BioTuring `Transition` component for smooth open/close animations of the panel body, managed with `useAnimationsFinished` hook.",
+      "Offers a `contentPadding` prop (default `16px`) for customizable body padding via CSS variable `--ds-content-padding`.",
+      "Extensive custom CSS for layout, typography, and a unique feature: header text displays vertically (`writing-mode: vertical-rl`) when collapsed.",
+      "Supports `keepMounted` prop and applies Ant Design CSS variables for theming."
     ],
     category: "Layout",
     packages: ["@base-ui-components/react"],