@backstage/ui 0.7.2-next.2 → 0.8.1

package/dist/components/Select/Select.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Skeleton/Skeleton.esm.js

@@ -1,17 +1,25 @@
 import { jsx } from 'react/jsx-runtime';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import styles from './Skeleton.module.css.esm.js';
+import clsx from 'clsx';
 
 const Skeleton = (props) => {
-  const { width = 80, height = 24, rounded = false, ...rest } = props;
-  const { classNames } = useStyles("Skeleton");
+  const { classNames, cleanedProps } = useStyles("Skeleton", {
+    width: 80,
+    height: 24,
+    rounded: false,
+    ...props
+  });
+  const { width, height, rounded, style, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames.root,
+      className: clsx(classNames.root, styles[classNames.root]),
       "data-rounded": rounded,
       style: {
         width,
-        height
+        height,
+        ...style
       },
       ...rest
     }

package/dist/components/Skeleton/Skeleton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.esm.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useStyles } from '../../hooks/useStyles';\nimport { SkeletonProps } from './types';\n\n/** @public */\nexport const Skeleton = (props: SkeletonProps) => {\n  const { width = 80, height = 24, rounded = false, ...rest } = props;\n  const { classNames } = useStyles('Skeleton');\n\n  return (\n    <div\n      className={classNames.root}\n      data-rounded={rounded}\n      style={{\n        width,\n        height,\n      }}\n      {...rest}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AAoBO,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,MAAM,EAAE,QAAQ,EAAA,EAAI,MAAA,GAAS,IAAI,OAAA,GAAU,KAAA,EAAO,GAAG,IAAA,EAAK,GAAI,KAAA;AAC9D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,CAAA;AAE3C,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,UAAA,CAAW,IAAA;AAAA,MACtB,cAAA,EAAc,OAAA;AAAA,MACd,KAAA,EAAO;AAAA,QACL,KAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"Skeleton.esm.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useStyles } from '../../hooks/useStyles';\nimport { SkeletonProps } from './types';\nimport styles from './Skeleton.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Skeleton = (props: SkeletonProps) => {\n  const { classNames, cleanedProps } = useStyles('Skeleton', {\n    width: 80,\n    height: 24,\n    rounded: false,\n    ...props,\n  });\n  const { width, height, rounded, style, ...rest } = cleanedProps;\n\n  return (\n    <div\n      className={clsx(classNames.root, styles[classNames.root])}\n      data-rounded={rounded}\n      style={{\n        width,\n        height,\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,UAAA,EAAY;AAAA,IACzD,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,OAAA,EAAS,KAAA;AAAA,IACT,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,KAAA,EAAO,MAAA,EAAQ,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,YAAA;AAEnD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,MACxD,cAAA,EAAc,OAAA;AAAA,MACd,KAAA,EAAO;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/components/Skeleton/Skeleton.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .Skeleton-module_bui-Skeleton__10yWY {\n    animation: var(--bui-animate-pulse);\n    background-color: var(--bui-bg-surface-2);\n    border-radius: var(--bui-radius-2);\n  }\n\n  .Skeleton-module_bui-Skeleton__10yWY[data-rounded='true'] {\n    border-radius: var(--bui-radius-full);\n  }\n}\n";
+var styles = {"bui-Skeleton":"Skeleton-module_bui-Skeleton__10yWY"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Skeleton.module.css.esm.js.map

package/dist/components/Skeleton/Skeleton.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Switch/Switch.esm.js

@@ -2,14 +2,30 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Switch as Switch$1 } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import styles from './Switch.module.css.esm.js';
+import clsx from 'clsx';
 
 const Switch = forwardRef(
-  ({ label, ...props }, ref) => {
-    const { classNames } = useStyles("Switch");
-    return /* @__PURE__ */ jsxs(Switch$1, { className: classNames.root, ref, ...props, children: [
-      /* @__PURE__ */ jsx("div", { className: classNames.indicator }),
-      label
-    ] });
+  (props, ref) => {
+    const { classNames, cleanedProps } = useStyles("Switch", props);
+    const { label, ...rest } = cleanedProps;
+    return /* @__PURE__ */ jsxs(
+      Switch$1,
+      {
+        className: clsx(classNames.root, styles[classNames.root]),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(classNames.indicator, styles[classNames.indicator])
+            }
+          ),
+          label
+        ]
+      }
+    );
   }
 );
 Switch.displayName = "Switch";

package/dist/components/Switch/Switch.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.esm.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Switch as AriaSwitch } from 'react-aria-components';\nimport type { SwitchProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n  ({ label, ...props }, ref) => {\n    const { classNames } = useStyles('Switch');\n\n    return (\n      <AriaSwitch className={classNames.root} ref={ref} {...props}>\n        <div className={classNames.indicator} />\n        {label}\n      </AriaSwitch>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["AriaSwitch"],"mappings":";;;;;AAsBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,EAAE,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC5B,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AAEzC,IAAA,4BACGA,QAAA,EAAA,EAAW,SAAA,EAAW,WAAW,IAAA,EAAM,GAAA,EAAW,GAAG,KAAA,EACpD,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAW,CAAA;AAAA,MACrC;AAAA,KAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"Switch.esm.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Switch as AriaSwitch } from 'react-aria-components';\nimport type { SwitchProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Switch.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles('Switch', props);\n    const { label, ...rest } = cleanedProps;\n\n    return (\n      <AriaSwitch\n        className={clsx(classNames.root, styles[classNames.root])}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={clsx(classNames.indicator, styles[classNames.indicator])}\n        />\n        {label}\n      </AriaSwitch>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["AriaSwitch"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAC9D,IAAA,MAAM,EAAE,KAAA,EAAO,GAAG,IAAA,EAAK,GAAI,YAAA;AAE3B,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,QACxD,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC;AAAA;AAAA,WACpE;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

package/dist/components/Switch/Switch.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .Switch-module_bui-Switch__vLLw3 {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    color: var(--bui-fg-primary);\n    cursor: pointer;\n\n    &[data-pressed] .Switch-module_bui-SwitchIndicator__2cgXu {\n      &:before {\n        background: var(--bui-fg-solid);\n      }\n    }\n\n    &[data-selected] {\n      .Switch-module_bui-SwitchIndicator__2cgXu {\n        background: var(--bui-bg-solid);\n\n        &:before {\n          background: var(--bui-fg-solid);\n          transform: translateX(100%);\n        }\n      }\n\n      &[data-pressed] {\n        .Switch-module_indicator__2RkTp {\n          background: var(--bui-gray-3);\n        }\n      }\n    }\n\n    &[data-focus-visible] .Switch-module_bui-SwitchIndicator__2cgXu {\n      outline: 2px solid;\n      outline-offset: 2px;\n    }\n  }\n\n  .Switch-module_bui-SwitchIndicator__2cgXu {\n    width: 2rem;\n    height: 1.143rem;\n    border: 2px;\n    background: var(--bui-gray-3);\n    border-radius: 1.143rem;\n    transition: all 200ms;\n\n    &:before {\n      content: '';\n      display: block;\n      margin: 0.143rem;\n      width: 0.857rem;\n      height: 0.857rem;\n      background: var(--bui-fg-solid);\n      border-radius: 16px;\n      transition: all 200ms;\n    }\n  }\n}\n";
+var styles = {"bui-Switch":"Switch-module_bui-Switch__vLLw3","bui-SwitchIndicator":"Switch-module_bui-SwitchIndicator__2cgXu","indicator":"Switch-module_indicator__2RkTp"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Switch.module.css.esm.js.map

package/dist/components/Switch/Switch.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Table/Table.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .Table-module_bui-Table__BkcBL {\n    width: 100%;\n    caption-side: bottom;\n    border-collapse: collapse;\n  }\n\n  .Table-module_bui-TableHeader__3Lh_9 {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n  }\n\n  .Table-module_bui-TableHead__y-Yzm {\n    text-align: left;\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    color: var(--bui-fg-primary);\n\n    &:hover {\n      .Table-module_bui-TableHeadSortButton__Slxp- {\n        opacity: 1;\n      }\n    }\n  }\n\n  .Table-module_bui-TableHeadContent__1Buiu {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-1);\n  }\n\n  .Table-module_bui-TableHeadSortButton__Slxp- {\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bui-space-1);\n    opacity: 0;\n    transition: opacity 0.1s ease-in-out;\n    color: var(--bui-fg-secondary);\n\n    & svg {\n      transition: transform 0.1s ease-in-out;\n    }\n\n    &[data-sort-order='asc'] svg {\n      opacity: 1;\n      transform: rotate(0);\n    }\n\n    &[data-sort-order='desc'] svg {\n      opacity: 1;\n      transform: rotate(180deg);\n    }\n  }\n\n  .Table-module_bui-TableBody__2hcz_ {\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableRow__3S2EQ {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n\n    &[data-react-aria-pressable='true'] {\n      cursor: pointer;\n    }\n  }\n\n  .Table-module_bui-TableBody__2hcz_ .Table-module_bui-TableRow__3S2EQ:hover {\n    background-color: var(--bui-gray-2);\n  }\n\n  .Table-module_bui-TableCell__1C-Gr {\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n  }\n\n  .Table-module_bui-TableCell__1C-Gr {\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n  }\n\n  .Table-module_bui-TableCellContentWrapper__2zDK3 {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Table-module_bui-TableCellIcon__118Vd,\n  .Table-module_bui-TableCellIcon__118Vd svg {\n    display: inline-flex;\n    align-items: center;\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableCellContent__35knW {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-0_5);\n  }\n\n  .Table-module_bui-TableCellProfile__34xxd {\n    display: flex;\n    flex-direction: row;\n    gap: var(--bui-space-2);\n    align-items: center;\n  }\n\n  .Table-module_bui-TableCellProfileAvatar__1MTar {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    border-radius: 100%;\n    user-select: none;\n    font-weight: 500;\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-bg-surface-2);\n    font-size: 1rem;\n    line-height: 1;\n    overflow: hidden;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n\n  .Table-module_bui-TableCellProfileAvatarImage__9Rl1B {\n    object-fit: cover;\n    height: 100%;\n    width: 100%;\n  }\n\n  .Table-module_bui-TableCellProfileAvatarFallback__wGun6 {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    font-size: var(--bui-font-size-2);\n    font-weight: var(--bui-font-weight-regular);\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    border-radius: var(--bui-radius-full);\n  }\n}\n";
+var styles = {"bui-Table":"Table-module_bui-Table__BkcBL","bui-TableHeader":"Table-module_bui-TableHeader__3Lh_9","bui-TableHead":"Table-module_bui-TableHead__y-Yzm","bui-TableHeadSortButton":"Table-module_bui-TableHeadSortButton__Slxp-","bui-TableHeadContent":"Table-module_bui-TableHeadContent__1Buiu","bui-TableBody":"Table-module_bui-TableBody__2hcz_","bui-TableRow":"Table-module_bui-TableRow__3S2EQ","bui-TableCell":"Table-module_bui-TableCell__1C-Gr","bui-TableCellContentWrapper":"Table-module_bui-TableCellContentWrapper__2zDK3","bui-TableCellIcon":"Table-module_bui-TableCellIcon__118Vd","bui-TableCellContent":"Table-module_bui-TableCellContent__35knW","bui-TableCellProfile":"Table-module_bui-TableCellProfile__34xxd","bui-TableCellProfileAvatar":"Table-module_bui-TableCellProfileAvatar__1MTar","bui-TableCellProfileAvatarImage":"Table-module_bui-TableCellProfileAvatarImage__9Rl1B","bui-TableCellProfileAvatarFallback":"Table-module_bui-TableCellProfileAvatarFallback__wGun6"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Table.module.css.esm.js.map

package/dist/components/Table/Table.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Table/components/Cell.esm.js

@@ -4,25 +4,52 @@ import { Text } from '../../Text/Text.esm.js';
 import { Link } from '../../Link/Link.esm.js';
 import { Cell as Cell$1 } from 'react-aria-components';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
+import styles from '../Table.module.css.esm.js';
 
 const Cell = (props) => {
-  const {
-    className,
-    title,
-    description,
-    color = "primary",
-    leadingIcon,
-    href,
-    ...rest
-  } = props;
-  const { classNames } = useStyles("Table");
-  return /* @__PURE__ */ jsx(Cell$1, { className: clsx(classNames.cell, className), ...rest, children: /* @__PURE__ */ jsxs("div", { className: classNames.cellContentWrapper, children: [
-    leadingIcon && /* @__PURE__ */ jsx("div", { className: classNames.cellIcon, children: leadingIcon }),
-    /* @__PURE__ */ jsxs("div", { className: classNames.cellContent, children: [
-      href ? /* @__PURE__ */ jsx(Link, { href, variant: "body-medium", color, children: title }) : /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", color, children: title }),
-      description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
-    ] })
-  ] }) });
+  const { classNames, cleanedProps } = useStyles("Table", {
+    color: "primary",
+    ...props
+  });
+  const { className, title, description, color, leadingIcon, href, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    Cell$1,
+    {
+      className: clsx(classNames.cell, styles[classNames.cell], className),
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            classNames.cellContentWrapper,
+            styles[classNames.cellContentWrapper]
+          ),
+          children: [
+            leadingIcon && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(classNames.cellIcon, styles[classNames.cellIcon]),
+                children: leadingIcon
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clsx(
+                  classNames.cellContent,
+                  styles[classNames.cellContent]
+                ),
+                children: [
+                  href ? /* @__PURE__ */ jsx(Link, { href, variant: "body-medium", color, children: title }) : /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", color, children: title }),
+                  description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 };
 Cell.displayName = "Cell";
 

package/dist/components/Table/components/Cell.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.esm.js","sources":["../../../../src/components/Table/components/Cell.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Text } from '../../Text';\nimport { Link } from '../../Link';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport type { CellProps } from '../types';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst Cell = (props: CellProps) => {\n  const {\n    className,\n    title,\n    description,\n    color = 'primary',\n    leadingIcon,\n    href,\n    ...rest\n  } = props;\n\n  const { classNames } = useStyles('Table');\n\n  return (\n    <ReactAriaCell className={clsx(classNames.cell, className)} {...rest}>\n      <div className={classNames.cellContentWrapper}>\n        {leadingIcon && (\n          <div className={classNames.cellIcon}>{leadingIcon}</div>\n        )}\n        <div className={classNames.cellContent}>\n          {href ? (\n            <Link href={href} variant=\"body-medium\" color={color}>\n              {title}\n            </Link>\n          ) : (\n            <Text as=\"p\" variant=\"body-medium\" color={color}>\n              {title}\n            </Text>\n          )}\n          {description && (\n            <Text variant=\"body-medium\" color=\"secondary\">\n              {description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </ReactAriaCell>\n  );\n};\n\nCell.displayName = 'Cell';\n\nexport { Cell };\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;AAwBA,MAAM,IAAA,GAAO,CAAC,KAAA,KAAqB;AACjC,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,WAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,OAAO,CAAA;AAExC,EAAA,uBACE,GAAA,CAACA,MAAA,EAAA,EAAc,SAAA,EAAW,IAAA,CAAK,WAAW,IAAA,EAAM,SAAS,CAAA,EAAI,GAAG,IAAA,EAC9D,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAW,kBAAA,EACxB,QAAA,EAAA;AAAA,IAAA,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,UAAW,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAEpD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EACxB,QAAA,EAAA;AAAA,MAAA,IAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAY,OAAA,EAAQ,eAAc,KAAA,EACrC,QAAA,EAAA,KAAA,EACH,CAAA,mBAEA,GAAA,CAAC,QAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,aAAA,EAAc,OAChC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MAED,+BACC,GAAA,CAAC,IAAA,EAAA,EAAK,SAAQ,aAAA,EAAc,KAAA,EAAM,aAC/B,QAAA,EAAA,WAAA,EACH;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Cell.esm.js","sources":["../../../../src/components/Table/components/Cell.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Text } from '../../Text';\nimport { Link } from '../../Link';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport type { CellProps } from '../types';\nimport { useStyles } from '../../../hooks/useStyles';\nimport styles from '../Table.module.css';\n\n/** @public */\nconst Cell = (props: CellProps) => {\n  const { classNames, cleanedProps } = useStyles<'Table', CellProps>('Table', {\n    color: 'primary',\n    ...props,\n  });\n  const { className, title, description, color, leadingIcon, href, ...rest } =\n    cleanedProps;\n\n  return (\n    <ReactAriaCell\n      className={clsx(classNames.cell, styles[classNames.cell], className)}\n      {...rest}\n    >\n      <div\n        className={clsx(\n          classNames.cellContentWrapper,\n          styles[classNames.cellContentWrapper],\n        )}\n      >\n        {leadingIcon && (\n          <div\n            className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}\n          >\n            {leadingIcon}\n          </div>\n        )}\n        <div\n          className={clsx(\n            classNames.cellContent,\n            styles[classNames.cellContent],\n          )}\n        >\n          {href ? (\n            <Link href={href} variant=\"body-medium\" color={color}>\n              {title}\n            </Link>\n          ) : (\n            <Text as=\"p\" variant=\"body-medium\" color={color}>\n              {title}\n            </Text>\n          )}\n          {description && (\n            <Text variant=\"body-medium\" color=\"secondary\">\n              {description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </ReactAriaCell>\n  );\n};\n\nCell.displayName = 'Cell';\n\nexport { Cell };\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;;AAyBA,MAAM,IAAA,GAAO,CAAC,KAAA,KAAqB;AACjC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAA8B,OAAA,EAAS;AAAA,IAC1E,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,WAAW,KAAA,EAAO,WAAA,EAAa,OAAO,WAAA,EAAa,IAAA,EAAM,GAAG,IAAA,EAAK,GACvE,YAAA;AAEF,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,kBAAA;AAAA,YACX,MAAA,CAAO,WAAW,kBAAkB;AAAA,WACtC;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,WAAA,oBACC,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,gBAE/D,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BAEF,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,WAAA;AAAA,kBACX,MAAA,CAAO,WAAW,WAAW;AAAA,iBAC/B;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,IAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAY,OAAA,EAAQ,eAAc,KAAA,EACrC,QAAA,EAAA,KAAA,EACH,CAAA,mBAEA,GAAA,CAAC,QAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,aAAA,EAAc,OAChC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,kBAED,+BACC,GAAA,CAAC,IAAA,EAAA,EAAK,SAAQ,aAAA,EAAc,KAAA,EAAM,aAC/B,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/dist/components/Table/components/CellProfile.esm.js

@@ -5,36 +5,81 @@ import { Link } from '../../Link/Link.esm.js';
 import { Avatar } from '@base-ui-components/react/avatar';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
 import { Cell } from 'react-aria-components';
+import styles from '../Table.module.css.esm.js';
 
 const CellProfile = (props) => {
-  const {
-    className,
-    src,
-    name,
-    href,
-    description,
-    color = "primary",
-    ...rest
-  } = props;
-  const { classNames } = useStyles("Table");
-  return /* @__PURE__ */ jsx(Cell, { className: clsx(classNames.cell, className), ...rest, children: /* @__PURE__ */ jsxs("div", { className: classNames.cellContentWrapper, children: [
-    /* @__PURE__ */ jsx("div", { className: classNames.cellIcon, children: src && /* @__PURE__ */ jsxs(Avatar.Root, { className: classNames.cellProfileAvatar, children: [
-      /* @__PURE__ */ jsx(
-        Avatar.Image,
+  const { classNames, cleanedProps } = useStyles(
+    "Table",
+    {
+      color: "primary",
+      ...props
+    }
+  );
+  const { className, src, name, href, description, color, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    Cell,
+    {
+      className: clsx(classNames.cell, styles[classNames.cell], className),
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        "div",
         {
-          src,
-          width: "20",
-          height: "20",
-          className: classNames.cellProfileAvatarImage
+          className: clsx(
+            classNames.cellContentWrapper,
+            styles[classNames.cellContentWrapper]
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: clsx(classNames.cellIcon, styles[classNames.cellIcon]), children: src && /* @__PURE__ */ jsxs(
+              Avatar.Root,
+              {
+                className: clsx(
+                  classNames.cellProfileAvatar,
+                  styles[classNames.cellProfileAvatar]
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Avatar.Image,
+                    {
+                      src,
+                      width: "20",
+                      height: "20",
+                      className: clsx(
+                        classNames.cellProfileAvatarImage,
+                        styles[classNames.cellProfileAvatarImage]
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Avatar.Fallback,
+                    {
+                      className: clsx(
+                        classNames.cellProfileAvatarFallback,
+                        styles[classNames.cellProfileAvatarFallback]
+                      ),
+                      children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 1)
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clsx(
+                  classNames.cellContent,
+                  styles[classNames.cellContent]
+                ),
+                children: [
+                  name && href ? /* @__PURE__ */ jsx(Link, { href, children: name }) : /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", color, children: name }),
+                  description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
+                ]
+              }
+            )
+          ]
         }
-      ),
-      /* @__PURE__ */ jsx(Avatar.Fallback, { className: classNames.cellProfileAvatarFallback, children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 1) })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: classNames.cellContent, children: [
-      name && href ? /* @__PURE__ */ jsx(Link, { href, children: name }) : /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", color, children: name }),
-      description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
-    ] })
-  ] }) });
+      )
+    }
+  );
 };
 
 export { CellProfile };

package/dist/components/Table/components/CellProfile.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellProfile.esm.js","sources":["../../../../src/components/Table/components/CellProfile.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { CellProfileProps } from '../types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '@base-ui-components/react/avatar';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\n\n/** @public */\nexport const CellProfile = (props: CellProfileProps) => {\n  const {\n    className,\n    src,\n    name,\n    href,\n    description,\n    color = 'primary',\n    ...rest\n  } = props;\n  const { classNames } = useStyles('Table');\n\n  return (\n    <ReactAriaCell className={clsx(classNames.cell, className)} {...rest}>\n      <div className={classNames.cellContentWrapper}>\n        <div className={classNames.cellIcon}>\n          {src && (\n            <Avatar.Root className={classNames.cellProfileAvatar}>\n              <Avatar.Image\n                src={src}\n                width=\"20\"\n                height=\"20\"\n                className={classNames.cellProfileAvatarImage}\n              />\n              <Avatar.Fallback className={classNames.cellProfileAvatarFallback}>\n                {(name || '')\n                  .split(' ')\n                  .map(word => word[0])\n                  .join('')\n                  .toLocaleUpperCase('en-US')\n                  .slice(0, 1)}\n              </Avatar.Fallback>\n            </Avatar.Root>\n          )}\n        </div>\n        <div className={classNames.cellContent}>\n          {name && href ? (\n            <Link href={href}>{name}</Link>\n          ) : (\n            <Text as=\"p\" variant=\"body-medium\" color={color}>\n              {name}\n            </Text>\n          )}\n          {description && (\n            <Text variant=\"body-medium\" color=\"secondary\">\n              {description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </ReactAriaCell>\n  );\n};\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;;AAyBO,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AACtD,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,OAAO,CAAA;AAExC,EAAA,uBACE,GAAA,CAACA,IAAA,EAAA,EAAc,SAAA,EAAW,IAAA,CAAK,WAAW,IAAA,EAAM,SAAS,CAAA,EAAI,GAAG,IAAA,EAC9D,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAW,kBAAA,EACzB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,QAAA,EACxB,QAAA,EAAA,GAAA,oBACC,IAAA,CAAC,MAAA,CAAO,IAAA,EAAP,EAAY,SAAA,EAAW,UAAA,CAAW,iBAAA,EACjC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,MAAA,CAAO,KAAA;AAAA,QAAP;AAAA,UACC,GAAA;AAAA,UACA,KAAA,EAAM,IAAA;AAAA,UACN,MAAA,EAAO,IAAA;AAAA,UACP,WAAW,UAAA,CAAW;AAAA;AAAA,OACxB;AAAA,sBACA,GAAA,CAAC,MAAA,CAAO,QAAA,EAAP,EAAgB,SAAA,EAAW,UAAA,CAAW,yBAAA,EACnC,QAAA,EAAA,CAAA,IAAA,IAAQ,EAAA,EACP,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,EACf;AAAA,KAAA,EACF,CAAA,EAEJ,CAAA;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EACxB,QAAA,EAAA;AAAA,MAAA,IAAA,IAAQ,IAAA,mBACP,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAa,QAAA,EAAA,IAAA,EAAK,CAAA,mBAExB,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,aAAA,EAAc,OAChC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,MAED,+BACC,GAAA,CAAC,IAAA,EAAA,EAAK,SAAQ,aAAA,EAAc,KAAA,EAAM,aAC/B,QAAA,EAAA,WAAA,EACH;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CellProfile.esm.js","sources":["../../../../src/components/Table/components/CellProfile.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { CellProfileProps } from '../types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '@base-ui-components/react/avatar';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport styles from '../Table.module.css';\n\n/** @public */\nexport const CellProfile = (props: CellProfileProps) => {\n  const { classNames, cleanedProps } = useStyles<'Table', CellProfileProps>(\n    'Table',\n    {\n      color: 'primary',\n      ...props,\n    },\n  );\n  const { className, src, name, href, description, color, ...rest } =\n    cleanedProps;\n\n  return (\n    <ReactAriaCell\n      className={clsx(classNames.cell, styles[classNames.cell], className)}\n      {...rest}\n    >\n      <div\n        className={clsx(\n          classNames.cellContentWrapper,\n          styles[classNames.cellContentWrapper],\n        )}\n      >\n        <div className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}>\n          {src && (\n            <Avatar.Root\n              className={clsx(\n                classNames.cellProfileAvatar,\n                styles[classNames.cellProfileAvatar],\n              )}\n            >\n              <Avatar.Image\n                src={src}\n                width=\"20\"\n                height=\"20\"\n                className={clsx(\n                  classNames.cellProfileAvatarImage,\n                  styles[classNames.cellProfileAvatarImage],\n                )}\n              />\n              <Avatar.Fallback\n                className={clsx(\n                  classNames.cellProfileAvatarFallback,\n                  styles[classNames.cellProfileAvatarFallback],\n                )}\n              >\n                {(name || '')\n                  .split(' ')\n                  .map(word => word[0])\n                  .join('')\n                  .toLocaleUpperCase('en-US')\n                  .slice(0, 1)}\n              </Avatar.Fallback>\n            </Avatar.Root>\n          )}\n        </div>\n        <div\n          className={clsx(\n            classNames.cellContent,\n            styles[classNames.cellContent],\n          )}\n        >\n          {name && href ? (\n            <Link href={href}>{name}</Link>\n          ) : (\n            <Text as=\"p\" variant=\"body-medium\" color={color}>\n              {name}\n            </Text>\n          )}\n          {description && (\n            <Text variant=\"body-medium\" color=\"secondary\">\n              {description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </ReactAriaCell>\n  );\n};\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;;;AA0BO,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AACtD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA;AAAA,IACnC,OAAA;AAAA,IACA;AAAA,MACE,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AACA,EAAA,MAAM,EAAE,WAAW,GAAA,EAAK,IAAA,EAAM,MAAM,WAAA,EAAa,KAAA,EAAO,GAAG,IAAA,EAAK,GAC9D,YAAA;AAEF,EAAA,uBACE,GAAA;AAAA,IAACA,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,kBAAA;AAAA,YACX,MAAA,CAAO,WAAW,kBAAkB;AAAA,WACtC;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,QAAA,EAAU,OAAO,UAAA,CAAW,QAAQ,CAAC,CAAA,EAClE,QAAA,EAAA,GAAA,oBACC,IAAA;AAAA,cAAC,MAAA,CAAO,IAAA;AAAA,cAAP;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,iBAAA;AAAA,kBACX,MAAA,CAAO,WAAW,iBAAiB;AAAA,iBACrC;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,MAAA,CAAO,KAAA;AAAA,oBAAP;AAAA,sBACC,GAAA;AAAA,sBACA,KAAA,EAAM,IAAA;AAAA,sBACN,MAAA,EAAO,IAAA;AAAA,sBACP,SAAA,EAAW,IAAA;AAAA,wBACT,UAAA,CAAW,sBAAA;AAAA,wBACX,MAAA,CAAO,WAAW,sBAAsB;AAAA;AAC1C;AAAA,mBACF;AAAA,kCACA,GAAA;AAAA,oBAAC,MAAA,CAAO,QAAA;AAAA,oBAAP;AAAA,sBACC,SAAA,EAAW,IAAA;AAAA,wBACT,UAAA,CAAW,yBAAA;AAAA,wBACX,MAAA,CAAO,WAAW,yBAAyB;AAAA,uBAC7C;AAAA,sBAEE,mBAAQ,EAAA,EACP,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,UAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,GAAG,CAAC;AAAA;AAAA;AACf;AAAA;AAAA,aACF,EAEJ,CAAA;AAAA,4BACA,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,WAAA;AAAA,kBACX,MAAA,CAAO,WAAW,WAAW;AAAA,iBAC/B;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,IAAA,IAAQ,IAAA,mBACP,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAa,QAAA,EAAA,IAAA,EAAK,CAAA,mBAExB,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,aAAA,EAAc,OAChC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,kBAED,+BACC,GAAA,CAAC,IAAA,EAAA,EAAK,SAAQ,aAAA,EAAc,KAAA,EAAM,aAC/B,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

package/dist/components/Table/components/Column.esm.js

@@ -1,16 +1,46 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Column as Column$1 } from 'react-aria-components';
-import '@remixicon/react';
-import { Icon } from '../../Icon/Icon.esm.js';
-import '../../Icon/context.esm.js';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
+import styles from '../Table.module.css.esm.js';
+import clsx from 'clsx';
+import { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';
 
 const Column = (props) => {
-  const { classNames } = useStyles("Table");
-  return /* @__PURE__ */ jsx(Column$1, { className: classNames.head, ...props, children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    props.children,
-    allowsSorting && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: classNames.headSortButton, children: sortDirection === "ascending" ? /* @__PURE__ */ jsx(Icon, { name: "arrow-up", size: 16 }) : /* @__PURE__ */ jsx(Icon, { name: "arrow-down", size: 16 }) })
-  ] }) });
+  const { classNames, cleanedProps } = useStyles(
+    "Table",
+    props
+  );
+  const { children, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    Column$1,
+    {
+      className: clsx(classNames.head, styles[classNames.head]),
+      ...rest,
+      children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            classNames.headContent,
+            styles[classNames.headContent]
+          ),
+          children: [
+            children,
+            allowsSorting && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: clsx(
+                  classNames.headSortButton,
+                  styles[classNames.headSortButton]
+                ),
+                children: sortDirection === "ascending" ? /* @__PURE__ */ jsx(RiArrowUpLine, { size: 16 }) : /* @__PURE__ */ jsx(RiArrowDownLine, { size: 16 })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 };
 
 export { Column };

package/dist/components/Table/components/Column.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Column.esm.js","sources":["../../../../src/components/Table/components/Column.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Column as ReactAriaColumn,\n  type ColumnProps,\n} from 'react-aria-components';\nimport { Icon } from '../../Icon';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nexport const Column = (\n  props: Omit<ColumnProps, 'children'> & { children?: React.ReactNode },\n) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <ReactAriaColumn className={classNames.head} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <>\n          {props.children}\n          {allowsSorting && (\n            <span aria-hidden=\"true\" className={classNames.headSortButton}>\n              {sortDirection === 'ascending' ? (\n                <Icon name=\"arrow-up\" size={16} />\n              ) : (\n                <Icon name=\"arrow-down\" size={16} />\n              )}\n            </span>\n          )}\n        </>\n      )}\n    </ReactAriaColumn>\n  );\n};\n"],"names":["ReactAriaColumn"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,CACpB,KAAA,KACG;AACH,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,OAAO,CAAA;AAExC,EAAA,uBACE,GAAA,CAACA,QAAA,EAAA,EAAgB,SAAA,EAAW,UAAA,CAAW,IAAA,EAAO,GAAG,KAAA,EAC9C,QAAA,EAAA,CAAC,EAAE,aAAA,EAAe,aAAA,EAAc,qBAC/B,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA,CAAM,QAAA;AAAA,IACN,aAAA,wBACE,MAAA,EAAA,EAAK,aAAA,EAAY,QAAO,SAAA,EAAW,UAAA,CAAW,cAAA,EAC5C,QAAA,EAAA,aAAA,KAAkB,WAAA,mBACjB,GAAA,CAAC,QAAK,IAAA,EAAK,UAAA,EAAW,IAAA,EAAM,EAAA,EAAI,CAAA,mBAEhC,GAAA,CAAC,QAAK,IAAA,EAAK,YAAA,EAAa,IAAA,EAAM,EAAA,EAAI,CAAA,EAEtC;AAAA,GAAA,EAEJ,CAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Column.esm.js","sources":["../../../../src/components/Table/components/Column.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Column as ReactAriaColumn } from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { ColumnProps } from '../types';\nimport { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';\n\n/** @public */\nexport const Column = (props: ColumnProps) => {\n  const { classNames, cleanedProps } = useStyles<'Table', ColumnProps>(\n    'Table',\n    props,\n  );\n  const { children, ...rest } = cleanedProps;\n\n  return (\n    <ReactAriaColumn\n      className={clsx(classNames.head, styles[classNames.head])}\n      {...rest}\n    >\n      {({ allowsSorting, sortDirection }) => (\n        <div\n          className={clsx(\n            classNames.headContent,\n            styles[classNames.headContent],\n          )}\n        >\n          {children}\n          {allowsSorting && (\n            <span\n              aria-hidden=\"true\"\n              className={clsx(\n                classNames.headSortButton,\n                styles[classNames.headSortButton],\n              )}\n            >\n              {sortDirection === 'ascending' ? (\n                <RiArrowUpLine size={16} />\n              ) : (\n                <RiArrowDownLine size={16} />\n              )}\n            </span>\n          )}\n        </div>\n      )}\n    </ReactAriaColumn>\n  );\n};\n"],"names":["ReactAriaColumn"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA;AAAA,IACnC,OAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,GAAI,YAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,MACvD,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,aAAA,EAAe,aAAA,EAAc,qBAC/B,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,WAAA;AAAA,YACX,MAAA,CAAO,WAAW,WAAW;AAAA,WAC/B;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,YACA,aAAA,oBACC,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAY,MAAA;AAAA,gBACZ,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,cAAA;AAAA,kBACX,MAAA,CAAO,WAAW,cAAc;AAAA,iBAClC;AAAA,gBAEC,QAAA,EAAA,aAAA,KAAkB,WAAA,mBACjB,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAM,IAAI,CAAA,mBAEzB,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAE/B;AAAA;AAAA;AAEJ;AAAA,GAEJ;AAEJ;;;;"}

package/dist/components/Table/components/Row.esm.js

@@ -3,15 +3,15 @@ import { useTableOptions, Row as Row$1, RouterProvider, Cell, Checkbox, Collecti
 import { useStyles } from '../../../hooks/useStyles.esm.js';
 import { useNavigate, useHref } from 'react-router-dom';
 import { isExternalLink } from '../../../utils/isExternalLink.esm.js';
+import styles from '../Table.module.css.esm.js';
+import clsx from 'clsx';
 
-function Row({
-  id,
-  columns,
-  children,
-  href,
-  ...otherProps
-}) {
-  const { classNames } = useStyles("Table");
+function Row(props) {
+  const { classNames, cleanedProps } = useStyles(
+    "Table",
+    props
+  );
+  const { id, columns, children, href, ...rest } = cleanedProps;
   const navigate = useNavigate();
   const isExternal = isExternalLink(href);
   let { selectionBehavior } = useTableOptions();
@@ -20,15 +20,23 @@ function Row({
     /* @__PURE__ */ jsx(Collection, { items: columns, children })
   ] });
   if (isExternal) {
-    return /* @__PURE__ */ jsx(Row$1, { id, className: classNames.row, ...otherProps, children: content });
+    return /* @__PURE__ */ jsx(
+      Row$1,
+      {
+        id,
+        className: clsx(classNames.row, styles[classNames.row]),
+        ...rest,
+        children: content
+      }
+    );
   }
   return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
     Row$1,
     {
       id,
-      className: classNames.row,
+      className: clsx(classNames.row, styles[classNames.row]),
       "data-react-aria-pressable": "true",
-      ...otherProps,
+      ...rest,
       children: content
     }
   ) });

package/dist/components/Table/components/Row.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.esm.js","sources":["../../../../src/components/Table/components/Row.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Row as ReactAriaRow,\n  RowProps,\n  useTableOptions,\n  Cell,\n  Collection,\n  Checkbox,\n  RouterProvider,\n} from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { useNavigate } from 'react-router-dom';\nimport { useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../../utils/isExternalLink';\n\n/** @public */\nexport function Row<T extends object>({\n  id,\n  columns,\n  children,\n  href,\n  ...otherProps\n}: RowProps<T>) {\n  const { classNames } = useStyles('Table');\n  const navigate = useNavigate();\n  const isExternal = isExternalLink(href);\n\n  let { selectionBehavior } = useTableOptions();\n\n  const content = (\n    <>\n      {selectionBehavior === 'toggle' && (\n        <Cell>\n          <Checkbox slot=\"selection\" />\n        </Cell>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </>\n  );\n\n  if (isExternal) {\n    return (\n      <ReactAriaRow id={id} className={classNames.row} {...otherProps}>\n        {content}\n      </ReactAriaRow>\n    );\n  }\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <ReactAriaRow\n        id={id}\n        className={classNames.row}\n        data-react-aria-pressable=\"true\"\n        {...otherProps}\n      >\n        {content}\n      </ReactAriaRow>\n    </RouterProvider>\n  );\n}\n"],"names":["ReactAriaRow"],"mappings":";;;;;;AA+BO,SAAS,GAAA,CAAsB;AAAA,EACpC,EAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,OAAO,CAAA;AACxC,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,IAAI,EAAE,iBAAA,EAAkB,GAAI,eAAA,EAAgB;AAE5C,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,4BACrB,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,QAAA,EAAA,EAAS,IAAA,EAAK,aAAY,CAAA,EAC7B,CAAA;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAGF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,GAAA,CAACA,SAAa,EAAA,EAAQ,SAAA,EAAW,WAAW,GAAA,EAAM,GAAG,YAClD,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAW,UAAA,CAAW,GAAA;AAAA,MACtB,2BAAA,EAA0B,MAAA;AAAA,MACzB,GAAG,UAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Row.esm.js","sources":["../../../../src/components/Table/components/Row.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Row as ReactAriaRow,\n  RowProps,\n  useTableOptions,\n  Cell,\n  Collection,\n  Checkbox,\n  RouterProvider,\n} from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { useNavigate } from 'react-router-dom';\nimport { useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../../utils/isExternalLink';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport function Row<T extends object>(props: RowProps<T>) {\n  const { classNames, cleanedProps } = useStyles<'Table', RowProps<T>>(\n    'Table',\n    props,\n  );\n  const { id, columns, children, href, ...rest } = cleanedProps;\n  const navigate = useNavigate();\n  const isExternal = isExternalLink(href);\n\n  let { selectionBehavior } = useTableOptions();\n\n  const content = (\n    <>\n      {selectionBehavior === 'toggle' && (\n        <Cell>\n          <Checkbox slot=\"selection\" />\n        </Cell>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </>\n  );\n\n  if (isExternal) {\n    return (\n      <ReactAriaRow\n        id={id}\n        className={clsx(classNames.row, styles[classNames.row])}\n        {...rest}\n      >\n        {content}\n      </ReactAriaRow>\n    );\n  }\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <ReactAriaRow\n        id={id}\n        className={clsx(classNames.row, styles[classNames.row])}\n        data-react-aria-pressable=\"true\"\n        {...rest}\n      >\n        {content}\n      </ReactAriaRow>\n    </RouterProvider>\n  );\n}\n"],"names":["ReactAriaRow"],"mappings":";;;;;;;;AAiCO,SAAS,IAAsB,KAAA,EAAoB;AACxD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA;AAAA,IACnC,OAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,EAAA,EAAI,OAAA,EAAS,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AACjD,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,IAAI,EAAE,iBAAA,EAAkB,GAAI,eAAA,EAAgB;AAE5C,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,4BACrB,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,QAAA,EAAA,EAAS,IAAA,EAAK,aAAY,CAAA,EAC7B,CAAA;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAGF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,GAAA;AAAA,MAACA,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,QACrD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,MACtD,2BAAA,EAA0B,MAAA;AAAA,MACzB,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Table/components/Table.esm.js

@@ -1,15 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
 import { Table as Table$1 } from 'react-aria-components';
+import styles from '../Table.module.css.esm.js';
+import clsx from 'clsx';
 
 const Table = (props) => {
-  const { classNames } = useStyles("Table");
+  const { classNames, cleanedProps } = useStyles(
+    "Table",
+    props
+  );
   return /* @__PURE__ */ jsx(
     Table$1,
     {
-      className: classNames.table,
+      className: clsx(classNames.table, styles[classNames.table]),
       "aria-label": "Data table",
-      ...props
+      ...cleanedProps
     }
   );
 };

package/dist/components/Table/components/Table.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useStyles } from '../../../hooks/useStyles';\nimport {\n  Table as ReactAriaTable,\n  type TableProps,\n} from 'react-aria-components';\n\n/** @public */\nexport const Table = (props: TableProps) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <ReactAriaTable\n      className={classNames.table}\n      aria-label=\"Data table\"\n      {...props}\n    />\n  );\n};\n"],"names":["ReactAriaTable"],"mappings":";;;;AAuBO,MAAM,KAAA,GAAQ,CAAC,KAAA,KAAsB;AAC1C,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,OAAO,CAAA;AAExC,EAAA,uBACE,GAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,UAAA,CAAW,KAAA;AAAA,MACtB,YAAA,EAAW,YAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useStyles } from '../../../hooks/useStyles';\nimport {\n  Table as ReactAriaTable,\n  type TableProps,\n} from 'react-aria-components';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Table = (props: TableProps) => {\n  const { classNames, cleanedProps } = useStyles<'Table', TableProps>(\n    'Table',\n    props,\n  );\n\n  return (\n    <ReactAriaTable\n      className={clsx(classNames.table, styles[classNames.table])}\n      aria-label=\"Data table\"\n      {...cleanedProps}\n    />\n  );\n};\n"],"names":["ReactAriaTable"],"mappings":";;;;;;AAyBO,MAAM,KAAA,GAAQ,CAAC,KAAA,KAAsB;AAC1C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA;AAAA,IACnC,OAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,MAC1D,YAAA,EAAW,YAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/components/Table/components/TableBody.esm.js

@@ -1,10 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { TableBody as TableBody$1 } from 'react-aria-components';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
+import styles from '../Table.module.css.esm.js';
+import clsx from 'clsx';
 
 const TableBody = (props) => {
-  const { classNames } = useStyles("Table");
-  return /* @__PURE__ */ jsx(TableBody$1, { className: classNames.body, ...props });
+  const { classNames, cleanedProps } = useStyles(
+    "Table",
+    props
+  );
+  return /* @__PURE__ */ jsx(
+    TableBody$1,
+    {
+      className: clsx(classNames.body, styles[classNames.body]),
+      ...cleanedProps
+    }
+  );
 };
 
 export { TableBody };

package/dist/components/Table/components/TableBody.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.esm.js","sources":["../../../../src/components/Table/components/TableBody.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  TableBody as ReactAriaTableBody,\n  type TableBodyProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nexport const TableBody = <T extends object>(props: TableBodyProps<T>) => {\n  const { classNames } = useStyles('Table');\n\n  return <ReactAriaTableBody className={classNames.body} {...props} />;\n};\n"],"names":["ReactAriaTableBody"],"mappings":";;;;AAuBO,MAAM,SAAA,GAAY,CAAmB,KAAA,KAA6B;AACvE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,OAAO,CAAA;AAExC,EAAA,2BAAQA,WAAA,EAAA,EAAmB,SAAA,EAAW,UAAA,CAAW,IAAA,EAAO,GAAG,KAAA,EAAO,CAAA;AACpE;;;;"}
+{"version":3,"file":"TableBody.esm.js","sources":["../../../../src/components/Table/components/TableBody.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  TableBody as ReactAriaTableBody,\n  type TableBodyProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const TableBody = <T extends object>(props: TableBodyProps<T>) => {\n  const { classNames, cleanedProps } = useStyles<'Table', TableBodyProps<T>>(\n    'Table',\n    props,\n  );\n\n  return (\n    <ReactAriaTableBody\n      className={clsx(classNames.body, styles[classNames.body])}\n      {...cleanedProps}\n    />\n  );\n};\n"],"names":["ReactAriaTableBody"],"mappings":";;;;;;AAyBO,MAAM,SAAA,GAAY,CAAmB,KAAA,KAA6B;AACvE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA;AAAA,IACnC,OAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAACA,WAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,MACvD,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}