@backstage/ui 0.8.2 → 0.9.0-next.2

package/dist/components/SearchField/SearchField.esm.js

@@ -6,8 +6,7 @@ import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
 import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import stylesSearchField from './SearchField.module.css.esm.js';
-import stylesTextField from '../TextField/TextField.module.css.esm.js';
+import styles from './SearchField.module.css.esm.js';
 
 const SearchField = forwardRef(
   (props, ref) => {
@@ -25,18 +24,15 @@ const SearchField = forwardRef(
         );
       }
     }, [label, ariaLabel, ariaLabelledBy]);
-    const { classNames: textFieldClassNames } = useStyles("TextField");
-    const {
-      classNames: searchFieldClassNames,
-      dataAttributes,
-      style,
-      cleanedProps
-    } = useStyles("SearchField", {
-      size: "small",
-      placeholder: "Search",
-      startCollapsed: false,
-      ...props
-    });
+    const { classNames, dataAttributes, style, cleanedProps } = useStyles(
+      "SearchField",
+      {
+        size: "small",
+        placeholder: "Search",
+        startCollapsed: false,
+        ...props
+      }
+    );
     const {
       className,
       description,
@@ -69,13 +65,7 @@ const SearchField = forwardRef(
     return /* @__PURE__ */ jsxs(
       SearchField$1,
       {
-        className: clsx(
-          textFieldClassNames.root,
-          searchFieldClassNames.root,
-          stylesTextField[textFieldClassNames.root],
-          stylesSearchField[searchFieldClassNames.root],
-          className
-        ),
+        className: clsx(classNames.root, styles[classNames.root], className),
         ...dataAttributes,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
@@ -98,8 +88,8 @@ const SearchField = forwardRef(
             "div",
             {
               className: clsx(
-                textFieldClassNames.inputWrapper,
-                stylesTextField[textFieldClassNames.inputWrapper]
+                classNames.inputWrapper,
+                styles[classNames.inputWrapper]
               ),
               "data-size": dataAttributes["data-size"],
               children: [
@@ -107,8 +97,8 @@ const SearchField = forwardRef(
                   "div",
                   {
                     className: clsx(
-                      textFieldClassNames.inputIcon,
-                      stylesTextField[textFieldClassNames.inputIcon]
+                      classNames.inputIcon,
+                      styles[classNames.inputIcon]
                     ),
                     "data-size": dataAttributes["data-size"],
                     "aria-hidden": "true",
@@ -118,10 +108,7 @@ const SearchField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Input,
                   {
-                    className: clsx(
-                      textFieldClassNames.input,
-                      stylesTextField[textFieldClassNames.input]
-                    ),
+                    className: clsx(classNames.input, styles[classNames.input]),
                     ...icon !== false && { "data-icon": true },
                     placeholder
                   }
@@ -129,10 +116,7 @@ const SearchField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Button,
                   {
-                    className: clsx(
-                      searchFieldClassNames.clear,
-                      stylesSearchField[searchFieldClassNames.clear]
-                    ),
+                    className: clsx(classNames.clear, styles[classNames.clear]),
                     "data-size": dataAttributes["data-size"],
                     children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
                   }

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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 { forwardRef, useEffect, useState } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport stylesSearchField from './SearchField.module.css';\nimport stylesTextField from '../TextField/TextField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames: textFieldClassNames } = useStyles('TextField');\n\n    const {\n      classNames: searchFieldClassNames,\n      dataAttributes,\n      style,\n      cleanedProps,\n    } = useStyles('SearchField', {\n      size: 'small',\n      placeholder: 'Search',\n      startCollapsed: false,\n      ...props,\n    });\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      ...rest\n    } = cleanedProps;\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          stylesTextField[textFieldClassNames.root],\n          stylesSearchField[searchFieldClassNames.root],\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        style={style}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            textFieldClassNames.inputWrapper,\n            stylesTextField[textFieldClassNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={clsx(\n                textFieldClassNames.inputIcon,\n                stylesTextField[textFieldClassNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={clsx(\n              textFieldClassNames.input,\n              stylesTextField[textFieldClassNames.input],\n            )}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={clsx(\n              searchFieldClassNames.clear,\n              stylesSearchField[searchFieldClassNames.clear],\n            )}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}
+{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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 { forwardRef, useEffect, useState } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './SearchField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames, dataAttributes, style, cleanedProps } = useStyles(\n      'SearchField',\n      {\n        size: 'small',\n        placeholder: 'Search',\n        startCollapsed: false,\n        ...props,\n      },\n    );\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      ...rest\n    } = cleanedProps;\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        style={style}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            classNames.inputWrapper,\n            styles[classNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={clsx(\n                classNames.inputIcon,\n                styles[classNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={clsx(classNames.input, styles[classNames.input])}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={clsx(classNames.clear, styles[classNames.clear])}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}

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

@@ -1,8 +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 tokens, base, components, utilities;\n\n@layer components {\n  .SearchField-module_bui-SearchField__2TyT_ {\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-empty] {\n      .SearchField-module_bui-InputClear__JCu80 {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        flex-basis: 200px;\n      }\n\n      &[data-collapsed='false'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField-module_bui-Input__FcOCK {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField-module_bui-Input__FcOCK {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField-module_bui-InputWrapper__2WERV {\n          .SearchField-module_bui-Input__FcOCK[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchField__2TyT_ .SearchField-module_bui-Input__FcOCK {\n    transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out,\n      outline-color 0.2s ease-in-out;\n\n    &[data-hovered] {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-focused] {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n  }\n\n  .SearchField-module_bui-SearchField__2TyT_ .SearchField-module_bui-InputWrapper__2WERV {\n    .SearchField-module_bui-Input__FcOCK[data-icon] {\n      padding-right: var(--bui-space-6);\n    }\n  }\n\n  .SearchField-module_bui-SearchField__2TyT_ .SearchField-module_bui-InputIcon__37FbR {\n    left: 0;\n    display: flex;\n    justify-content: center;\n\n    &[data-size='small'] {\n      width: var(--bui-space-8);\n    }\n\n    &[data-size='medium'] {\n      width: var(--bui-space-10);\n    }\n  }\n\n  .SearchField-module_bui-InputClear__JCu80 {\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n  }\n\n  .SearchField-module_bui-InputClear__JCu80:hover {\n    color: var(--bui-fg-primary);\n  }\n\n  .SearchField-module_bui-InputClear__JCu80[data-size='small'] {\n    width: 2rem;\n    height: 2rem;\n  }\n\n  .SearchField-module_bui-InputClear__JCu80[data-size='medium'] {\n    width: 2.5rem;\n    height: 2.5rem;\n  }\n\n  .SearchField-module_bui-InputClear__JCu80 svg {\n    width: 1rem;\n    height: 1rem;\n  }\n}\n";
-var stylesSearchField = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-InputClear":"SearchField-module_bui-InputClear__JCu80","bui-Input":"SearchField-module_bui-Input__FcOCK","bui-InputWrapper":"SearchField-module_bui-InputWrapper__2WERV","bui-InputIcon":"SearchField-module_bui-InputIcon__37FbR"};
+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 tokens, base, components, utilities;\n\n@layer components {\n  .SearchField-module_bui-SearchField__2TyT_ {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-empty] {\n      .SearchField-module_bui-SearchFieldClear__1gJQc {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        flex-basis: 200px;\n      }\n\n      &[data-collapsed='false'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField-module_bui-SearchFieldWrapper__37bMg {\n          .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldWrapper__37bMg {\n    position: relative;\n\n    .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n      padding-right: var(--bui-space-6);\n    }\n\n    &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n      height: 2.5rem;\n    }\n\n    &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n      padding-left: var(--bui-space-8);\n    }\n\n    &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n      padding-left: var(--bui-space-9);\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    margin-right: var(--bui-space-1);\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    /* To animate the icon when the input is collapsed */\n    transition: left 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      width: 2rem;\n    }\n\n    &[data-size='medium'] {\n      width: 2.5rem;\n    }\n\n    &[data-size='small'] svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    &[data-size='medium'] svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInput__3Opoj {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--bui-space-3);\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out,\n      outline-color 0.2s ease-in-out;\n    width: 100%;\n    height: 100%;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-focused] {\n      outline-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &[data-hovered] {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-focused] {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldClear__1gJQc {\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-size='small'] {\n      width: 2rem;\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      width: 2.5rem;\n      height: 2.5rem;\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
+var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-SearchFieldWrapper":"SearchField-module_bui-SearchFieldWrapper__37bMg","bui-SearchFieldInputIcon":"SearchField-module_bui-SearchFieldInputIcon__EA0t9"};
 styleInject(css_248z);
 
-export { stylesSearchField as default };
+export { styles as default };
 //# sourceMappingURL=SearchField.module.css.esm.js.map

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

@@ -10,11 +10,11 @@ const Skeleton = (props) => {
     rounded: false,
     ...props
   });
-  const { width, height, rounded, style, ...rest } = cleanedProps;
+  const { className, width, height, rounded, style, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(classNames.root, styles[classNames.root]),
+      className: clsx(classNames.root, styles[classNames.root], className),
       "data-rounded": rounded,
       style: {
         width,

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';\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;;;;"}
+{"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 { className, width, height, rounded, style, ...rest } = cleanedProps;\n\n  return (\n    <div\n      className={clsx(classNames.root, styles[classNames.root], className)}\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,WAAW,KAAA,EAAO,MAAA,EAAQ,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,YAAA;AAE9D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MACnE,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/Switch/Switch.esm.js

@@ -8,11 +8,11 @@ import clsx from 'clsx';
 const Switch = forwardRef(
   (props, ref) => {
     const { classNames, cleanedProps } = useStyles("Switch", props);
-    const { label, ...rest } = cleanedProps;
+    const { className, label, ...rest } = cleanedProps;
     return /* @__PURE__ */ jsxs(
       Switch$1,
       {
-        className: clsx(classNames.root, styles[classNames.root]),
+        className: clsx(classNames.root, styles[classNames.root], className),
         ref,
         ...rest,
         children: [

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';\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;;;;"}
+{"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 { className, label, ...rest } = cleanedProps;\n\n    return (\n      <AriaSwitch\n        className={clsx(classNames.root, styles[classNames.root], className)}\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,SAAA,EAAW,KAAA,EAAO,GAAG,MAAK,GAAI,YAAA;AAEtC,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,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/Table/Table.module.css.esm.js

@@ -1,7 +1,7 @@
 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 tokens, base, components, utilities;\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"};
+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 tokens, base, components, utilities;\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";
+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"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { Text } from '../../Text/Text.esm.js';
 import { Link } from '../../Link/Link.esm.js';
-import { Avatar } from '@base-ui-components/react/avatar';
+import { Avatar } from '../../Avatar/Avatar.esm.js';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
 import { Cell } from 'react-aria-components';
 import styles from '../Table.module.css.esm.js';
@@ -29,39 +29,7 @@ const CellProfile = (props) => {
             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)
-                    }
-                  )
-                ]
-              }
-            ) }),
+            src && name && /* @__PURE__ */ jsx(Avatar, { src, name, size: "x-small", purpose: "decoration" }),
             /* @__PURE__ */ jsxs(
               "div",
               {

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';\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;;;;"}
+{"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 '../../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        {src && name && (\n          <Avatar src={src} name={name} size=\"x-small\" purpose=\"decoration\" />\n        )}\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,UAEC,QAAA,EAAA;AAAA,YAAA,GAAA,IAAO,IAAA,wBACL,MAAA,EAAA,EAAO,GAAA,EAAU,MAAY,IAAA,EAAK,SAAA,EAAU,SAAQ,YAAA,EAAa,CAAA;AAAA,4BAEpE,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/TablePagination/TablePagination.esm.js

@@ -1,41 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import '../Box/Box.esm.js';
-import '../Grid/Grid.esm.js';
-import '../Flex/Flex.esm.js';
-import '../Container/Container.esm.js';
-import '../Avatar/Avatar.esm.js';
-import '../Button/Button.esm.js';
-import '../Card/Card.esm.js';
-import '../Collapsible/Collapsible.esm.js';
-import '../Dialog/Dialog.esm.js';
-import '../FieldLabel/FieldLabel.esm.js';
-import 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import 'react';
-import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
-import { Text } from '../Text/Text.esm.js';
-import 'react-router-dom';
-import '../Header/Header.module.css.esm.js';
-import '../Tabs/Tabs.esm.js';
-import '../Link/Link.esm.js';
-import '../HeaderPage/HeaderPage.module.css.esm.js';
-import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
-import '../ButtonLink/ButtonLink.esm.js';
-import '../Checkbox/Checkbox.esm.js';
-import '../RadioGroup/RadioGroup.esm.js';
-import '../Table/Table.module.css.esm.js';
-import '../Table/components/Cell.esm.js';
-import '@base-ui-components/react/avatar';
 import styles from './TablePagination.module.css.esm.js';
-import '../TagGroup/TagGroup.module.css.esm.js';
-import '../TextField/TextField.esm.js';
-import '../Tooltip/Tooltip.esm.js';
-import '../Menu/Menu.module.css.esm.js';
-import '../SearchField/SearchField.esm.js';
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
 import { Select } from '../Select/Select.esm.js';
-import '../Skeleton/Skeleton.module.css.esm.js';
-import '../Switch/Switch.esm.js';
+import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
+import { Text } from '../Text/Text.esm.js';
 
 function TablePagination(props) {
   const { classNames, cleanedProps } = useStyles("TablePagination", {

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

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.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 clsx from 'clsx';\nimport { Text, ButtonIcon, Select } from '../..';\nimport type { TablePaginationProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n  const { classNames, cleanedProps } = useStyles('TablePagination', {\n    showPageSizeOptions: true,\n    ...props,\n  });\n  const {\n    className,\n    offset,\n    pageSize,\n    rowCount,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    setOffset,\n    setPageSize,\n    showPageSizeOptions,\n    ...rest\n  } = cleanedProps;\n\n  const currentOffset = offset ?? 0;\n  const currentPageSize = pageSize ?? 10;\n\n  const fromCount = currentOffset + 1;\n  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n  const nextPage = () => {\n    const totalRows = rowCount ?? 0;\n    const nextOffset = currentOffset + currentPageSize;\n\n    // Check if there are more items to navigate to\n    if (nextOffset < totalRows) {\n      onNextPage?.(); // Analytics tracking\n      setOffset?.(nextOffset); // Navigate to next page\n    }\n  };\n\n  const previousPage = () => {\n    // Check if we can go to previous page\n    if (currentOffset > 0) {\n      onPreviousPage?.(); // Analytics tracking\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset?.(prevOffset); // Navigate to previous page\n    }\n  };\n\n  return (\n    <div\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...rest}\n    >\n      <div className={clsx(classNames.left, styles[classNames.left])}>\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            placeholder=\"Show 10 results\"\n            options={[\n              { label: 'Show 5 results', value: '5' },\n              { label: 'Show 10 results', value: '10' },\n              { label: 'Show 20 results', value: '20' },\n              { label: 'Show 30 results', value: '30' },\n              { label: 'Show 40 results', value: '40' },\n              { label: 'Show 50 results', value: '50' },\n            ]}\n            selectedKey={pageSize?.toString()}\n            onSelectionChange={value => {\n              const newPageSize = Number(value);\n              setPageSize?.(newPageSize);\n              onPageSizeChange?.(newPageSize);\n            }}\n            className={clsx(classNames.select, styles[classNames.select])}\n          />\n        )}\n      </div>\n      <div className={clsx(classNames.right, styles[classNames.right])}>\n        <Text\n          as=\"p\"\n          variant=\"body-medium\"\n        >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={previousPage}\n          isDisabled={currentOffset === 0}\n          icon={<RiArrowLeftSLine />}\n          aria-label=\"Previous\"\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={nextPage}\n          isDisabled={\n            rowCount !== undefined &&\n            currentOffset + currentPageSize >= rowCount\n          }\n          icon={<RiArrowRightSLine />}\n          aria-label=\"Next\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.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 clsx from 'clsx';\nimport { Text, ButtonIcon, Select } from '../..';\nimport type { TablePaginationProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n  const { classNames, cleanedProps } = useStyles('TablePagination', {\n    showPageSizeOptions: true,\n    ...props,\n  });\n  const {\n    className,\n    offset,\n    pageSize,\n    rowCount,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    setOffset,\n    setPageSize,\n    showPageSizeOptions,\n    ...rest\n  } = cleanedProps;\n\n  const currentOffset = offset ?? 0;\n  const currentPageSize = pageSize ?? 10;\n\n  const fromCount = currentOffset + 1;\n  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n  const nextPage = () => {\n    const totalRows = rowCount ?? 0;\n    const nextOffset = currentOffset + currentPageSize;\n\n    // Check if there are more items to navigate to\n    if (nextOffset < totalRows) {\n      onNextPage?.(); // Analytics tracking\n      setOffset?.(nextOffset); // Navigate to next page\n    }\n  };\n\n  const previousPage = () => {\n    // Check if we can go to previous page\n    if (currentOffset > 0) {\n      onPreviousPage?.(); // Analytics tracking\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset?.(prevOffset); // Navigate to previous page\n    }\n  };\n\n  return (\n    <div\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...rest}\n    >\n      <div className={clsx(classNames.left, styles[classNames.left])}>\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            placeholder=\"Show 10 results\"\n            options={[\n              { label: 'Show 5 results', value: '5' },\n              { label: 'Show 10 results', value: '10' },\n              { label: 'Show 20 results', value: '20' },\n              { label: 'Show 30 results', value: '30' },\n              { label: 'Show 40 results', value: '40' },\n              { label: 'Show 50 results', value: '50' },\n            ]}\n            selectedKey={pageSize?.toString()}\n            onSelectionChange={value => {\n              const newPageSize = Number(value);\n              setPageSize?.(newPageSize);\n              onPageSizeChange?.(newPageSize);\n            }}\n            className={clsx(classNames.select, styles[classNames.select])}\n          />\n        )}\n      </div>\n      <div className={clsx(classNames.right, styles[classNames.right])}>\n        <Text\n          as=\"p\"\n          variant=\"body-medium\"\n        >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={previousPage}\n          isDisabled={currentOffset === 0}\n          icon={<RiArrowLeftSLine />}\n          aria-label=\"Previous\"\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={nextPage}\n          isDisabled={\n            rowCount !== undefined &&\n            currentOffset + currentPageSize >= rowCount\n          }\n          icon={<RiArrowRightSLine />}\n          aria-label=\"Next\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Tabs/Tabs.esm.js

@@ -26,7 +26,7 @@ const isTabActive = (tabHref, currentPathname, matchStrategy) => {
 };
 const Tabs = (props) => {
   const { classNames, cleanedProps } = useStyles("Tabs", props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   const tabsRef = useRef(null);
   const tabRefs = useRef(/* @__PURE__ */ new Map());
   const [hoveredKey, setHoveredKey] = useState(null);
@@ -77,7 +77,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
     Tabs$1,
     {
-      className: clsx(classNames.tabs, styles[classNames.tabs]),
+      className: clsx(classNames.tabs, styles[classNames.tabs], className),
       keyboardActivation: "manual",
       selectedKey: computedSelectedKey,
       ref: tabsRef,
@@ -88,7 +88,7 @@ const Tabs = (props) => {
 };
 const TabList = (props) => {
   const { classNames, cleanedProps } = useStyles("Tabs", props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = useTabsContext();
   const handleHover = (key) => {
     setHoveredKey(key);
@@ -107,7 +107,8 @@ const TabList = (props) => {
     {
       className: clsx(
         classNames.tabListWrapper,
-        styles[classNames.tabListWrapper]
+        styles[classNames.tabListWrapper],
+        className
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -135,6 +136,7 @@ const TabList = (props) => {
 const Tab = (props) => {
   const { classNames, cleanedProps } = useStyles("Tabs", props);
   const {
+    className,
     href,
     children,
     id,
@@ -146,7 +148,7 @@ const Tab = (props) => {
     Tab$1,
     {
       id,
-      className: clsx(classNames.tab, styles[classNames.tab]),
+      className: clsx(classNames.tab, styles[classNames.tab], className),
       ref: (el) => setTabRef(id, el),
       href,
       ...rest,
@@ -156,11 +158,11 @@ const Tab = (props) => {
 };
 const TabPanel = (props) => {
   const { classNames, cleanedProps } = useStyles("Tabs", props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsx(
     TabPanel$1,
     {
-      className: clsx(classNames.panel, styles[classNames.panel]),
+      className: clsx(classNames.panel, styles[classNames.panel], className),
       ...rest,
       children
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n  tabHref: string,\n  currentPathname: string,\n  matchStrategy: 'exact' | 'prefix',\n): boolean => {\n  if (matchStrategy === 'exact') {\n    return tabHref === currentPathname;\n  }\n\n  // Prefix matching - similar to WorkaroundNavLink behavior\n  if (tabHref === currentPathname) {\n    return true;\n  }\n\n  // Check if current path starts with tab href followed by a slash\n  // This prevents /foo matching /foobar\n  return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const { children, ...rest } = cleanedProps;\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (isValidElement(tabChild) && tabChild.props.href) {\n            // Use tab-specific strategy, defaulting to 'exact'\n            const strategy = tabChild.props.matchStrategy || 'exact';\n            if (isTabActive(tabChild.props.href, location.pathname, strategy)) {\n              return tabChild.props.id;\n            }\n          }\n        }\n\n        //No route matches - check if all tabs have hrefs (pure navigation)\n        const allTabsHaveHref = tabListChildren.every(\n          child => isValidElement(child) && child.props.href,\n        );\n\n        if (allTabsHaveHref) {\n          // Pure navigation tabs, no route match\n          return null;\n        } else {\n          // Mixed tabs or pure local state\n          return undefined;\n        }\n      }\n    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={clsx(classNames.tabs, styles[classNames.tabs])}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const { children, ...rest } = cleanedProps;\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div\n      className={clsx(\n        classNames.tabListWrapper,\n        styles[classNames.tabListWrapper],\n      )}\n    >\n      <AriaTabList\n        className={clsx(classNames.tabList, styles[classNames.tabList])}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const {\n    href,\n    children,\n    id,\n    matchStrategy: _matchStrategy,\n    ...rest\n  } = cleanedProps;\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={clsx(classNames.tab, styles[classNames.tab])}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const { children, ...rest } = cleanedProps;\n\n  return (\n    <AriaTabPanel\n      className={clsx(classNames.panel, styles[classNames.panel])}\n      {...rest}\n    >\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["child","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}
+{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n  tabHref: string,\n  currentPathname: string,\n  matchStrategy: 'exact' | 'prefix',\n): boolean => {\n  if (matchStrategy === 'exact') {\n    return tabHref === currentPathname;\n  }\n\n  // Prefix matching - similar to WorkaroundNavLink behavior\n  if (tabHref === currentPathname) {\n    return true;\n  }\n\n  // Check if current path starts with tab href followed by a slash\n  // This prevents /foo matching /foobar\n  return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const { className, children, ...rest } = cleanedProps;\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (isValidElement(tabChild) && tabChild.props.href) {\n            // Use tab-specific strategy, defaulting to 'exact'\n            const strategy = tabChild.props.matchStrategy || 'exact';\n            if (isTabActive(tabChild.props.href, location.pathname, strategy)) {\n              return tabChild.props.id;\n            }\n          }\n        }\n\n        //No route matches - check if all tabs have hrefs (pure navigation)\n        const allTabsHaveHref = tabListChildren.every(\n          child => isValidElement(child) && child.props.href,\n        );\n\n        if (allTabsHaveHref) {\n          // Pure navigation tabs, no route match\n          return null;\n        } else {\n          // Mixed tabs or pure local state\n          return undefined;\n        }\n      }\n    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={clsx(classNames.tabs, styles[classNames.tabs], className)}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const { className, children, ...rest } = cleanedProps;\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div\n      className={clsx(\n        classNames.tabListWrapper,\n        styles[classNames.tabListWrapper],\n        className,\n      )}\n    >\n      <AriaTabList\n        className={clsx(classNames.tabList, styles[classNames.tabList])}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const {\n    className,\n    href,\n    children,\n    id,\n    matchStrategy: _matchStrategy,\n    ...rest\n  } = cleanedProps;\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={clsx(classNames.tab, styles[classNames.tab], className)}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const { className, children, ...rest } = cleanedProps;\n\n  return (\n    <AriaTabPanel\n      className={clsx(classNames.panel, styles[classNames.panel], className)}\n      {...rest}\n    >\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["child","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

package/dist/components/Text/Text.esm.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import stylesText from './Text.module.css.esm.js';
+import styles from './Text.module.css.esm.js';
 
 function TextComponent(props, ref) {
   const Component = props.as || "span";
@@ -12,12 +12,12 @@ function TextComponent(props, ref) {
     color: "primary",
     ...props
   });
-  const { className, ...restProps } = cleanedProps;
+  const { className, truncate, ...restProps } = cleanedProps;
   return /* @__PURE__ */ jsx(
     Component,
     {
       ref,
-      className: clsx(classNames.root, stylesText[classNames.root], className),
+      className: clsx(classNames.root, styles[classNames.root], className),
       ...dataAttributes,
       ...restProps
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.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 { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Text.module.css';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  props: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = props.as || 'span';\n\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Text', {\n    variant: 'body-medium',\n    weight: 'regular',\n    color: 'primary',\n    ...props,\n  });\n\n  const { className, ...restProps } = cleanedProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":["styles"],"mappings":";;;;;;AAuBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,MAAM,EAAA,IAAM,MAAA;AAE9B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,MAAA,EAAQ;AAAA,IACrE,OAAA,EAAS,aAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,SAAA,EAAU,GAAI,YAAA;AAEpC,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMA,WAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.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 { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Text.module.css';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  props: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = props.as || 'span';\n\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Text', {\n    variant: 'body-medium',\n    weight: 'regular',\n    color: 'primary',\n    ...props,\n  });\n\n  const { className, truncate, ...restProps } = cleanedProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;;AAuBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,MAAM,EAAA,IAAM,MAAA;AAE9B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,MAAA,EAAQ;AAAA,IACrE,OAAA,EAAS,aAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,WAAU,GAAI,YAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}