@backstage/ui 0.6.0 → 0.7.0-next.0

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

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { SearchField as SearchField$1, Input, Button } from 'react-aria-components';
+import clsx from 'clsx';
+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';
+
+const SearchField = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      icon,
+      size = "small",
+      label,
+      secondaryLabel,
+      description,
+      isRequired,
+      placeholder = "Search",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...rest
+    } = props;
+    useEffect(() => {
+      if (!label && !ariaLabel && !ariaLabelledBy) {
+        console.warn(
+          "SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        );
+      }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    const { classNames: textFieldClassNames, dataAttributes } = useStyles(
+      "TextField",
+      {
+        size
+      }
+    );
+    const { classNames: searchFieldClassNames } = useStyles("SearchField", {
+      size
+    });
+    const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+    return /* @__PURE__ */ jsxs(
+      SearchField$1,
+      {
+        className: clsx(
+          textFieldClassNames.root,
+          searchFieldClassNames.root,
+          className
+        ),
+        ...dataAttributes,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        ...rest,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              label,
+              secondaryLabel: secondaryLabelText,
+              description
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: textFieldClassNames.inputWrapper,
+              "data-size": dataAttributes["data-size"],
+              children: [
+                icon !== false && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: textFieldClassNames.inputIcon,
+                    "data-size": dataAttributes["data-size"],
+                    "aria-hidden": "true",
+                    children: icon || /* @__PURE__ */ jsx(RiSearch2Line, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    className: textFieldClassNames.input,
+                    ...icon !== false && { "data-icon": true },
+                    placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: searchFieldClassNames.clear,
+                    "data-size": dataAttributes["data-size"],
+                    children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, {})
+        ]
+      }
+    );
+  }
+);
+SearchField.displayName = "searchField";
+
+export { SearchField };
+//# sourceMappingURL=SearchField.esm.js.map

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

@@ -0,0 +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 } 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';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      className,\n      icon,\n      size = 'small',\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      placeholder = 'Search',\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props;\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, dataAttributes } = useStyles(\n      'TextField',\n      {\n        size,\n      },\n    );\n\n    const { classNames: searchFieldClassNames } = useStyles('SearchField', {\n      size,\n    });\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    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={textFieldClassNames.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={textFieldClassNames.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={textFieldClassNames.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={searchFieldClassNames.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":";;;;;;;;;AA+BO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAO,GAAA,OAAA;AAAA,MACP,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAc,GAAA,QAAA;AAAA,MACd,YAAc,EAAA,SAAA;AAAA,MACd,iBAAmB,EAAA,cAAA;AAAA,MACnB,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAgB,EAAA;AAC3C,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF,KACC,EAAA,CAAC,KAAO,EAAA,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,mBAAqB,EAAA,cAAA,EAAmB,GAAA,SAAA;AAAA,MAC1D,WAAA;AAAA,MACA;AAAA,QACE;AAAA;AACF,KACF;AAEA,IAAA,MAAM,EAAE,UAAA,EAAY,qBAAsB,EAAA,GAAI,UAAU,aAAe,EAAA;AAAA,MACrE;AAAA,KACD,CAAA;AAGD,IAAM,MAAA,kBAAA,GACJ,cAAmB,KAAA,UAAA,GAAa,UAAa,GAAA,IAAA,CAAA;AAE/C,IACE,uBAAA,IAAA;AAAA,MAACA,aAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,mBAAoB,CAAA,IAAA;AAAA,UACpB,qBAAsB,CAAA,IAAA;AAAA,UACtB;AAAA,SACF;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAiB,EAAA,cAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAgB,EAAA,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,mBAAoB,CAAA,YAAA;AAAA,cAC/B,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,KAAS,KACR,oBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,mBAAoB,CAAA,SAAA;AAAA,oBAC/B,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAY,EAAA,MAAA;AAAA,oBAEX,QAAA,EAAA,IAAA,wBAAS,aAAc,EAAA,EAAA;AAAA;AAAA,iBAC1B;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,mBAAoB,CAAA,KAAA;AAAA,oBAC9B,GAAI,IAAA,KAAS,KAAS,IAAA,EAAE,aAAa,IAAK,EAAA;AAAA,oBAC3C;AAAA;AAAA,iBACF;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,qBAAsB,CAAA,KAAA;AAAA,oBACjC,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBAErC,8BAAC,iBAAkB,EAAA,EAAA;AAAA;AAAA;AACrB;AAAA;AAAA,WACF;AAAA,8BACC,UAAW,EAAA,EAAA;AAAA;AAAA;AAAA,KACd;AAAA;AAGN;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/dist/components/Select/Select.esm.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { Select as Select$1, Button, SelectValue, Popover, ListBox, ListBoxItem, Text } from 'react-aria-components';
+import clsx from 'clsx';
+import './Select.styles.css.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import '@remixicon/react';
+import { Icon } from '../Icon/Icon.esm.js';
+import '../Icon/context.esm.js';
+import { FieldError } from '../FieldError/FieldError.esm.js';
+
+const Select = forwardRef((props, ref) => {
+  const {
+    className,
+    label,
+    description,
+    options,
+    placeholder = "Select an option",
+    size = "small",
+    icon,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    isRequired,
+    secondaryLabel,
+    style,
+    ...rest
+  } = props;
+  const { classNames: popoverClassNames } = useStyles("Popover");
+  const { classNames, dataAttributes } = useStyles("Select", {
+    size
+  });
+  useEffect(() => {
+    if (!label && !ariaLabel && !ariaLabelledBy) {
+      console.warn(
+        "TextField requires either a visible label, aria-label, or aria-labelledby for accessibility"
+      );
+    }
+  }, [label, ariaLabel, ariaLabelledBy]);
+  const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+  return /* @__PURE__ */ jsxs(
+    Select$1,
+    {
+      className: clsx(classNames.root, className),
+      ...dataAttributes,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            label,
+            secondaryLabel: secondaryLabelText,
+            description
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: classNames.trigger,
+            "data-size": dataAttributes["data-size"],
+            children: [
+              icon,
+              /* @__PURE__ */ jsx(SelectValue, { className: classNames.value }),
+              /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", name: "chevron-down" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FieldError, {}),
+        /* @__PURE__ */ jsx(Popover, { className: popoverClassNames.root, children: /* @__PURE__ */ jsx(ListBox, { className: classNames.list, children: options?.map((option) => /* @__PURE__ */ jsxs(
+          ListBoxItem,
+          {
+            id: option.value,
+            className: classNames.item,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: classNames.itemIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }),
+              /* @__PURE__ */ jsx(Text, { slot: "label", className: classNames.itemLabel, children: option.label })
+            ]
+          },
+          option.value
+        )) }) })
+      ]
+    }
+  );
+});
+Select.displayName = "Select";
+
+export { Select };
+//# sourceMappingURL=Select.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.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 } from 'react';\nimport {\n  Select as AriaSelect,\n  SelectValue,\n  Button,\n  Popover,\n  ListBox,\n  ListBoxItem,\n  Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport './Select.styles.css';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { Icon } from '../Icon';\nimport { FieldError } from '../FieldError';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  const {\n    className,\n    label,\n    description,\n    options,\n    placeholder = 'Select an option',\n    size = 'small',\n    icon,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    style,\n    ...rest\n  } = props;\n\n  const { classNames: popoverClassNames } = useStyles('Popover');\n  const { classNames, dataAttributes } = useStyles('Select', {\n    size,\n  });\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={clsx(classNames.root, className)}\n      {...dataAttributes}\n      ref={ref}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <Button\n        className={classNames.trigger}\n        data-size={dataAttributes['data-size']}\n      >\n        {icon}\n        <SelectValue className={classNames.value} />\n        <Icon aria-hidden=\"true\" name=\"chevron-down\" />\n      </Button>\n      <FieldError />\n      <Popover className={popoverClassNames.root}>\n        <ListBox className={classNames.list}>\n          {options?.map(option => (\n            <ListBoxItem\n              key={option.value}\n              id={option.value}\n              className={classNames.item}\n            >\n              <div className={classNames.itemIndicator}>\n                <Icon name=\"check\" />\n              </div>\n              <Text slot=\"label\" className={classNames.itemLabel}>\n                {option.label}\n              </Text>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}

package/dist/components/Select/Select.styles.css.esm.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\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\n.bui-Select[data-invalid] {\n  & .bui-SelectTrigger {\n    border-color: var(--bui-fg-danger);\n  }\n}\n\n.bui-SelectTrigger {\n  box-sizing: border-box;\n  border-radius: var(--bui-radius-3);\n  border: 1px solid var(--bui-border);\n  background-color: var(--bui-bg-surface-1);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n  cursor: pointer;\n  gap: var(--bui-space-2);\n  max-width: 100%;\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  &[data-size='small'] {\n    height: 2rem;\n    padding-inline: var(--bui-space-3);\n  }\n\n  &[data-size='medium'] {\n    height: 3rem;\n    padding-inline: var(--bui-space-4);\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  &::placeholder {\n    color: var(--bui-fg-secondary);\n  }\n\n  &:hover {\n    border-color: var(--bui-border-hover);\n  }\n\n  &:focus-visible {\n    border-color: var(--bui-border-pressed);\n    outline: 0;\n  }\n\n  &[data-invalid] {\n    border-color: var(--bui-fg-danger);\n  }\n  &[data-invalid]:hover {\n    border-width: 2px;\n  }\n\n  &[data-invalid]:focus-visible {\n    border-width: 2px;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    border-color: var(--bui-border-disabled);\n    color: var(--bui-fg-disabled);\n  }\n\n  &[disabled] .bui-SelectValue {\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-popup-open] .bui-SelectIcon {\n    transform: rotate(180deg);\n  }\n}\n\n.bui-SelectValue {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\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\n  & .bui-SelectItemIndicator {\n    display: none;\n  }\n\n  &[disabled] {\n    color: var(--bui-fg-disabled);\n  }\n}\n\n.bui-SelectItem {\n  position: relative;\n  width: var(--anchor-width);\n  display: grid;\n  grid-template-areas: 'icon text';\n  grid-template-columns: 1rem 1fr;\n  align-items: center;\n  padding-block: var(--bui-space-2);\n  padding-inline: var(--bui-space-4);\n  color: var(--bui-fg-primary);\n  border-radius: var(--bui-radius-3);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--bui-font-size-3);\n  gap: var(--bui-space-2);\n  outline: none;\n\n  &[data-focused] {\n    z-index: 0;\n    position: relative;\n    color: var(--bui-fg-primary);\n  }\n\n  &[data-focused]::before {\n    content: '';\n    z-index: -1;\n    position: absolute;\n    inset-block: 0;\n    inset-inline: 0.25rem;\n    border-radius: 0.25rem;\n    background-color: var(--bui-bg-tint-hover);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-selected] .bui-SelectItemIndicator {\n    opacity: 1;\n  }\n}\n\n.bui-SelectItemIndicator {\n  grid-area: icon;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.bui-SelectItemLabel {\n  flex: 1;\n  grid-area: text;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Select.styles.css.esm.js.map

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

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

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

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const Skeleton = (props) => {
+  const { width = 80, height = 24, rounded = false, ...rest } = props;
+  const { classNames } = useStyles("Skeleton");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames.root,
+      "data-rounded": rounded,
+      style: {
+        width,
+        height
+      },
+      ...rest
+    }
+  );
+};
+
+export { Skeleton };
+//# sourceMappingURL=Skeleton.esm.js.map

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

@@ -0,0 +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":";;;AAoBa,MAAA,QAAA,GAAW,CAAC,KAAyB,KAAA;AAChD,EAAM,MAAA,EAAE,QAAQ,EAAI,EAAA,MAAA,GAAS,IAAI,OAAU,GAAA,KAAA,EAAO,GAAG,IAAA,EAAS,GAAA,KAAA;AAC9D,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,UAAU,CAAA;AAE3C,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,UAAW,CAAA,IAAA;AAAA,MACtB,cAAc,EAAA,OAAA;AAAA,MACd,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

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

@@ -0,0 +1,18 @@
+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';
+
+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
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+
+export { Switch };
+//# sourceMappingURL=Switch.esm.js.map

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

@@ -0,0 +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,MAAS,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,KAAA,EAAO,GAAG,KAAA,IAAS,GAAQ,KAAA;AAC5B,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAQ,CAAA;AAEzC,IAAA,4BACGA,QAAW,EAAA,EAAA,SAAA,EAAW,WAAW,IAAM,EAAA,GAAA,EAAW,GAAG,KACpD,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,SAAW,EAAA,CAAA;AAAA,MACrC;AAAA,KACH,EAAA,CAAA;AAAA;AAGN;AAEA,MAAA,CAAO,WAAc,GAAA,QAAA;;;;"}

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

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { TableCell } from './TableCell/TableCell.esm.js';
+import { TableCellText } from './TableCellText/TableCellText.esm.js';
+import { TableCellLink } from './TableCellLink/TableCellLink.esm.js';
+import { TableCellProfile } from './TableCellProfile/TableCellProfile.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const TableRoot = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("table", { ref, className: clsx(classNames.root, className), ...props });
+});
+TableRoot.displayName = "TableRoot";
+const TableHeader = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ref,
+      className: clsx(classNames.header, className),
+      ...props
+    }
+  );
+});
+TableHeader.displayName = "TableHeader";
+const TableBody = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("tbody", { ref, className: clsx(classNames.body, className), ...props });
+});
+TableBody.displayName = "TableBody";
+const TableRow = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("tr", { ref, className: clsx(classNames.row, className), ...props, children: props.children });
+});
+TableRow.displayName = "TableRow";
+const TableHead = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("th", { ref, className: clsx(classNames.head, className), ...props });
+});
+TableHead.displayName = "TableHead";
+const TableCaption = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      ref,
+      className: clsx(classNames.caption, className),
+      ...props
+    }
+  );
+});
+TableCaption.displayName = "TableCaption";
+const Table = {
+  Root: TableRoot,
+  Header: TableHeader,
+  Body: TableBody,
+  Head: TableHead,
+  Row: TableRow,
+  Cell: TableCell,
+  CellText: TableCellText,
+  CellLink: TableCellLink,
+  CellProfile: TableCellProfile,
+  Caption: TableCaption
+};
+
+export { Table };
+//# sourceMappingURL=Table.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.esm.js","sources":["../../../src/components/Table/Table.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 { TableCell } from './TableCell/TableCell';\nimport { TableCellText } from './TableCellText/TableCellText';\nimport { TableCellLink } from './TableCellLink/TableCellLink';\nimport { TableCellProfile } from './TableCellProfile/TableCellProfile';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TableRoot = forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <table ref={ref} className={clsx(classNames.root, className)} {...props} />\n  );\n});\nTableRoot.displayName = 'TableRoot';\n\nconst TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <thead\n      ref={ref}\n      className={clsx(classNames.header, className)}\n      {...props}\n    />\n  );\n});\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <tbody ref={ref} className={clsx(classNames.body, className)} {...props} />\n  );\n});\nTableBody.displayName = 'TableBody';\n\nconst TableRow = forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <tr ref={ref} className={clsx(classNames.row, className)} {...props}>\n      {props.children}\n    </tr>\n  );\n});\nTableRow.displayName = 'TableRow';\n\nconst TableHead = forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <th ref={ref} className={clsx(classNames.head, className)} {...props} />\n  );\n});\nTableHead.displayName = 'TableHead';\n\nconst TableCaption = forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <caption\n      ref={ref}\n      className={clsx(classNames.caption, className)}\n      {...props}\n    />\n  );\n});\nTableCaption.displayName = 'TableCaption';\n\n/**\n * Table component for displaying tabular data\n * @public\n */\nexport const Table = {\n  Root: TableRoot,\n  Header: TableHeader,\n  Body: TableBody,\n  Head: TableHead,\n  Row: TableRow,\n  Cell: TableCell,\n  CellText: TableCellText,\n  CellLink: TableCellLink,\n  CellProfile: TableCellProfile,\n  Caption: TableCaption,\n};\n"],"names":[],"mappings":";;;;;;;;;AAwBA,MAAM,SAAA,GAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EACE,uBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,IAAM,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,CAAA;AAE7E,CAAC,CAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;AAExB,MAAM,WAAA,GAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EACE,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,MAAA,EAAQ,SAAS,CAAA;AAAA,MAC3C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,WAAA,CAAY,WAAc,GAAA,aAAA;AAE1B,MAAM,SAAA,GAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EACE,uBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,IAAM,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,CAAA;AAE7E,CAAC,CAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;AAExB,MAAM,QAAA,GAAW,WAGf,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EAAG,GAAU,EAAA,SAAA,EAAW,IAAK,CAAA,UAAA,CAAW,GAAK,EAAA,SAAS,CAAI,EAAA,GAAG,KAC3D,EAAA,QAAA,EAAA,KAAA,CAAM,QACT,EAAA,CAAA;AAEJ,CAAC,CAAA;AACD,QAAA,CAAS,WAAc,GAAA,UAAA;AAEvB,MAAM,SAAA,GAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EACE,uBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,IAAM,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,CAAA;AAE1E,CAAC,CAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;AAExB,MAAM,YAAA,GAAe,WAGnB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,MAC5C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,YAAA,CAAa,WAAc,GAAA,cAAA;AAMpB,MAAM,KAAQ,GAAA;AAAA,EACnB,IAAM,EAAA,SAAA;AAAA,EACN,MAAQ,EAAA,WAAA;AAAA,EACR,IAAM,EAAA,SAAA;AAAA,EACN,IAAM,EAAA,SAAA;AAAA,EACN,GAAK,EAAA,QAAA;AAAA,EACL,IAAM,EAAA,SAAA;AAAA,EACN,QAAU,EAAA,aAAA;AAAA,EACV,QAAU,EAAA,aAAA;AAAA,EACV,WAAa,EAAA,gBAAA;AAAA,EACb,OAAS,EAAA;AACX;;;;"}

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

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableCell = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx("td", { ref, className: clsx(classNames.cell, className), ...props });
+});
+TableCell.displayName = "TableCell";
+
+export { TableCell };
+//# sourceMappingURL=TableCell.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.esm.js","sources":["../../../../src/components/Table/TableCell/TableCell.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 { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <td ref={ref} className={clsx(classNames.cell, className)} {...props} />\n  );\n});\nTableCell.displayName = 'TableCell';\n\nexport { TableCell };\n"],"names":[],"mappings":";;;;;AAqBM,MAAA,SAAA,GAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EACE,uBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,GAAA,EAAU,SAAW,EAAA,IAAA,CAAK,WAAW,IAAM,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,CAAA;AAE1E,CAAC;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}

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

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Text } from '../../Text/Text.esm.js';
+import { Link } from '../../Link/Link.esm.js';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableCellLink = forwardRef(
+  ({ className, title, description, href, render, ...props }, ref) => {
+    const { classNames } = useStyles("Table");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx(classNames.cellLink, className),
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsx(Link, { href, children: title }),
+          description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
+        ]
+      }
+    );
+  }
+);
+TableCellLink.displayName = "TableCellLink";
+
+export { TableCellLink };
+//# sourceMappingURL=TableCellLink.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellLink.esm.js","sources":["../../../../src/components/Table/TableCellLink/TableCellLink.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 { TableCellLinkProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellLink = forwardRef<HTMLDivElement, TableCellLinkProps>(\n  ({ className, title, description, href, render, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellLink, className)}\n        {...props}\n      >\n        {title && <Link href={href}>{title}</Link>}\n        {description && (\n          <Text variant=\"body-medium\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellLink.displayName = 'TableCellLink';\n\nexport { TableCellLink };\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAO,EAAA,WAAA,EAAa,MAAM,MAAQ,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAClE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAS,KAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAa,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAClC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,aAAc,EAAA,KAAA,EAAM,aAC/B,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}

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

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+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 { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableCellProfile = forwardRef(
+  ({ className, src, name, to, withImage = true, ...rest }, ref) => {
+    const { classNames } = useStyles("Table");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx(classNames.cellProfile, className),
+        ...rest,
+        children: [
+          withImage && /* @__PURE__ */ jsxs(Avatar.Root, { className: classNames.cellProfileAvatar, children: [
+            /* @__PURE__ */ jsx(
+              Avatar.Image,
+              {
+                src,
+                width: "20",
+                height: "20",
+                className: classNames.cellProfileAvatarImage
+              }
+            ),
+            /* @__PURE__ */ jsx(Avatar.Fallback, { className: classNames.cellProfileAvatarFallback, children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 1) })
+          ] }),
+          name && to ? /* @__PURE__ */ jsx(Link, { href: to, children: name }) : /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: name })
+        ]
+      }
+    );
+  }
+);
+TableCellProfile.displayName = "TableCellProfile";
+
+export { TableCellProfile };
+//# sourceMappingURL=TableCellProfile.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellProfile.esm.js","sources":["../../../../src/components/Table/TableCellProfile/TableCellProfile.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 { TableCellProfileProps } 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';\n\n/** @public */\nconst TableCellProfile = forwardRef<HTMLDivElement, TableCellProfileProps>(\n  ({ className, src, name, to, withImage = true, ...rest }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellProfile, className)}\n        {...rest}\n      >\n        {withImage && (\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        {name && to ? (\n          <Link href={to}>{name}</Link>\n        ) : (\n          <Text variant=\"body-medium\">{name}</Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellProfile.displayName = 'TableCellProfile';\n\nexport { TableCellProfile };\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,gBAAmB,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAK,EAAA,IAAA,EAAM,EAAI,EAAA,SAAA,GAAY,IAAM,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAChE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,QAChD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA,yBACE,MAAO,CAAA,IAAA,EAAP,EAAY,SAAA,EAAW,WAAW,iBACjC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAO,CAAA,KAAA;AAAA,cAAP;AAAA,gBACC,GAAA;AAAA,gBACA,KAAM,EAAA,IAAA;AAAA,gBACN,MAAO,EAAA,IAAA;AAAA,gBACP,WAAW,UAAW,CAAA;AAAA;AAAA,aACxB;AAAA,4BACA,GAAA,CAAC,MAAO,CAAA,QAAA,EAAP,EAAgB,SAAA,EAAW,UAAW,CAAA,yBAAA,EACnC,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA,WACF,EAAA,CAAA;AAAA,UAED,IAAQ,IAAA,EAAA,mBACN,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,EAAA,EAAK,QAAK,EAAA,IAAA,EAAA,CAAA,mBAErB,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,aAAA,EAAe,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAEtC;AAAA;AAGN;AACA,gBAAA,CAAiB,WAAc,GAAA,kBAAA;;;;"}

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

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Text } from '../../Text/Text.esm.js';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableCellText = forwardRef(
+  ({ className, title, description, ...props }, ref) => {
+    const { classNames } = useStyles("Table");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx(classNames.cellText, className),
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title }),
+          description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
+        ]
+      }
+    );
+  }
+);
+TableCellText.displayName = "TableCellText";
+
+export { TableCellText };
+//# sourceMappingURL=TableCellText.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellText.esm.js","sources":["../../../../src/components/Table/TableCellText/TableCellText.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 { TableCellTextProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellText = forwardRef<HTMLDivElement, TableCellTextProps>(\n  ({ className, title, description, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellText, className)}\n        {...props}\n      >\n        {title && <Text variant=\"body-medium\">{title}</Text>}\n        {description && (\n          <Text variant=\"body-medium\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellText.displayName = 'TableCellText';\n\nexport { TableCellText };\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,aAAa,GAAG,KAAA,IAAS,GAAQ,KAAA;AACpD,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAU,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,aAAA,EAAe,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAC5C,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,aAAc,EAAA,KAAA,EAAM,aAC/B,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}