@backstage/ui 0.9.0-next.2 → 0.9.0

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

@@ -1,34 +1,39 @@
 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 { Select as Select$1, Popover } from 'react-aria-components';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { SelectDefinition } from './definition.esm.js';
+import { PopoverDefinition } from '../Popover/definition.esm.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
 import styles from './Select.module.css.esm.js';
 import stylesPopover from '../Popover/Popover.module.css.esm.js';
-import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react';
+import { SelectTrigger } from './SelectTrigger.esm.js';
+import { SelectContent } from './SelectContent.esm.js';
 
 const Select = forwardRef((props, ref) => {
-  const { classNames: popoverClassNames } = useStyles("Popover");
-  const { classNames, dataAttributes, cleanedProps } = useStyles("Select", {
-    size: "small",
-    placeholder: "Select an option",
-    ...props
-  });
+  const { classNames: popoverClassNames } = useStyles(PopoverDefinition);
+  const { classNames, dataAttributes, cleanedProps } = useStyles(
+    SelectDefinition,
+    {
+      size: "small",
+      placeholder: "Select an option",
+      ...props
+    }
+  );
   const {
     className,
     label,
     description,
     options,
-    placeholder,
-    size,
     icon,
+    searchable,
+    searchPlaceholder,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     isRequired,
     secondaryLabel,
-    style,
     ...rest
   } = cleanedProps;
   useEffect(() => {
@@ -57,62 +62,26 @@ const Select = forwardRef((props, ref) => {
             description
           }
         ),
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            className: clsx(classNames.trigger, styles[classNames.trigger]),
-            "data-size": dataAttributes["data-size"],
-            children: [
-              icon,
-              /* @__PURE__ */ jsx(
-                SelectValue,
-                {
-                  className: clsx(classNames.value, styles[classNames.value])
-                }
-              ),
-              /* @__PURE__ */ jsx(RiArrowDownSLine, { "aria-hidden": "true" })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsx(SelectTrigger, { icon }),
         /* @__PURE__ */ jsx(FieldError, {}),
         /* @__PURE__ */ jsx(
           Popover,
           {
             className: clsx(
               popoverClassNames.root,
-              stylesPopover[popoverClassNames.root]
+              stylesPopover[popoverClassNames.root],
+              classNames.popover,
+              styles[classNames.popover]
             ),
-            children: /* @__PURE__ */ jsx(ListBox, { className: clsx(classNames.list, styles[classNames.list]), children: options?.map((option) => /* @__PURE__ */ jsxs(
-              ListBoxItem,
+            ...dataAttributes,
+            children: /* @__PURE__ */ jsx(
+              SelectContent,
               {
-                id: option.value,
-                className: clsx(classNames.item, styles[classNames.item]),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(
-                        classNames.itemIndicator,
-                        styles[classNames.itemIndicator]
-                      ),
-                      children: /* @__PURE__ */ jsx(RiCheckLine, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      slot: "label",
-                      className: clsx(
-                        classNames.itemLabel,
-                        styles[classNames.itemLabel]
-                      ),
-                      children: option.label
-                    }
-                  )
-                ]
-              },
-              option.value
-            )) })
+                searchable,
+                searchPlaceholder,
+                options
+              }
+            )
           }
         )
       ]

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

@@ -1 +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 { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport styles from './Select.module.css';\nimport stylesPopover from '../Popover/Popover.module.css';\nimport { RiArrowDownSLine, RiCheckLine } from '@remixicon/react';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  const { classNames: popoverClassNames } = useStyles('Popover');\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Select', {\n    size: 'small',\n    placeholder: 'Select an option',\n    ...props,\n  });\n\n  const {\n    className,\n    label,\n    description,\n    options,\n    placeholder,\n    size,\n    icon,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    style,\n    ...rest\n  } = cleanedProps;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'Select 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, styles[classNames.root], className)}\n      {...dataAttributes}\n      ref={ref}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <Button\n        className={clsx(classNames.trigger, styles[classNames.trigger])}\n        data-size={dataAttributes['data-size']}\n      >\n        {icon}\n        <SelectValue\n          className={clsx(classNames.value, styles[classNames.value])}\n        />\n        <RiArrowDownSLine aria-hidden=\"true\" />\n      </Button>\n      <FieldError />\n      <Popover\n        className={clsx(\n          popoverClassNames.root,\n          stylesPopover[popoverClassNames.root],\n        )}\n      >\n        <ListBox className={clsx(classNames.list, styles[classNames.list])}>\n          {options?.map(option => (\n            <ListBoxItem\n              key={option.value}\n              id={option.value}\n              className={clsx(classNames.item, styles[classNames.item])}\n            >\n              <div\n                className={clsx(\n                  classNames.itemIndicator,\n                  styles[classNames.itemIndicator],\n                )}\n              >\n                <RiCheckLine />\n              </div>\n              <Text\n                slot=\"label\"\n                className={clsx(\n                  classNames.itemLabel,\n                  styles[classNames.itemLabel],\n                )}\n              >\n                {option.label}\n              </Text>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":";;;;;;;;;;;AAoCO,MAAM,MAAA,GAAS,UAAA,CAAwC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAA,EAAkB,GAAI,UAAU,SAAS,CAAA;AAC7D,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,IACvE,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,kBAAA;AAAA,IACb,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,iBAAA,EAAmB,cAAA;AAAA,IACnB,UAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN;AAAA,OACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAGrC,EAAA,MAAM,kBAAA,GAAqB,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAExE,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACJ,GAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,cAAA;AAAA,MAChB,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,cAAA,EAAgB,kBAAA;AAAA,YAChB;AAAA;AAAA,SACF;AAAA,wBACA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,YAC9D,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,YAEpC,QAAA,EAAA;AAAA,cAAA,IAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,WAAA;AAAA,gBAAA;AAAA,kBACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC;AAAA;AAAA,eAC5D;AAAA,8BACA,GAAA,CAAC,gBAAA,EAAA,EAAiB,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AAAA,SACvC;AAAA,4BACC,UAAA,EAAA,EAAW,CAAA;AAAA,wBACZ,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,iBAAA,CAAkB,IAAA;AAAA,cAClB,aAAA,CAAc,kBAAkB,IAAI;AAAA,aACtC;AAAA,YAEA,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA,EAC9D,QAAA,EAAA,OAAA,EAAS,IAAI,CAAA,MAAA,qBACZ,IAAA;AAAA,cAAC,WAAA;AAAA,cAAA;AAAA,gBAEC,IAAI,MAAA,CAAO,KAAA;AAAA,gBACX,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,gBAExD,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAW,IAAA;AAAA,wBACT,UAAA,CAAW,aAAA;AAAA,wBACX,MAAA,CAAO,WAAW,aAAa;AAAA,uBACjC;AAAA,sBAEA,8BAAC,WAAA,EAAA,EAAY;AAAA;AAAA,mBACf;AAAA,kCACA,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,EAAK,OAAA;AAAA,sBACL,SAAA,EAAW,IAAA;AAAA,wBACT,UAAA,CAAW,SAAA;AAAA,wBACX,MAAA,CAAO,WAAW,SAAS;AAAA,uBAC7B;AAAA,sBAEC,QAAA,EAAA,MAAA,CAAO;AAAA;AAAA;AACV;AAAA,eAAA;AAAA,cApBK,MAAA,CAAO;AAAA,aAsBf,CAAA,EACH;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
+{"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 { Select as AriaSelect, Popover } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { SelectDefinition } from './definition';\nimport { PopoverDefinition } from '../Popover/definition';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport styles from './Select.module.css';\nimport stylesPopover from '../Popover/Popover.module.css';\nimport { SelectTrigger } from './SelectTrigger';\nimport { SelectContent } from './SelectContent';\n\n/** @public */\nexport const Select = forwardRef<\n  HTMLDivElement,\n  SelectProps<'single' | 'multiple'>\n>((props, ref) => {\n  const { classNames: popoverClassNames } = useStyles(PopoverDefinition);\n  const { classNames, dataAttributes, cleanedProps } = useStyles(\n    SelectDefinition,\n    {\n      size: 'small',\n      placeholder: 'Select an option',\n      ...props,\n    },\n  );\n\n  const {\n    className,\n    label,\n    description,\n    options,\n    icon,\n    searchable,\n    searchPlaceholder,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    ...rest\n  } = cleanedProps;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'Select requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      ref={ref}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <SelectTrigger icon={icon} />\n      <FieldError />\n      <Popover\n        className={clsx(\n          popoverClassNames.root,\n          stylesPopover[popoverClassNames.root],\n          classNames.popover,\n          styles[classNames.popover],\n        )}\n        {...dataAttributes}\n      >\n        <SelectContent\n          searchable={searchable}\n          searchPlaceholder={searchPlaceholder}\n          options={options}\n        />\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":";;;;;;;;;;;;;;AA+BO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAA,EAAkB,GAAI,UAAU,iBAAiB,CAAA;AACrE,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,gBAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAa,kBAAA;AAAA,MACb,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,iBAAA,EAAmB,cAAA;AAAA,IACnB,UAAA;AAAA,IACA,cAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN;AAAA,OACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,EAAA,MAAM,kBAAA,GAAqB,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAExE,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACJ,GAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,cAAA;AAAA,MAChB,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,cAAA,EAAgB,kBAAA;AAAA,YAChB;AAAA;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,iBAAc,IAAA,EAAY,CAAA;AAAA,4BAC1B,UAAA,EAAA,EAAW,CAAA;AAAA,wBACZ,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,iBAAA,CAAkB,IAAA;AAAA,cAClB,aAAA,CAAc,kBAAkB,IAAI,CAAA;AAAA,cACpC,UAAA,CAAW,OAAA;AAAA,cACX,MAAA,CAAO,WAAW,OAAO;AAAA,aAC3B;AAAA,YACC,GAAG,cAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,UAAA;AAAA,gBACA,iBAAA;AAAA,gBACA;AAAA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

package/dist/components/Select/Select.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  .Select-module_bui-Select__LDZ15[data-invalid] {\n    & .Select-module_bui-SelectTrigger__3kJBt {\n      border-color: var(--bui-fg-danger);\n    }\n  }\n\n  .Select-module_bui-SelectTrigger__3kJBt {\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    cursor: pointer;\n    gap: var(--bui-space-2);\n    width: 100%;\n\n    & svg {\n      flex-shrink: 0;\n      color: var(--bui-fg-secondary);\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      transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\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] .Select-module_bui-SelectValue__jdoc- {\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-popup-open] .Select-module_bui-SelectIcon__e97yW {\n      transform: rotate(180deg);\n    }\n  }\n\n  .Select-module_bui-SelectValue__jdoc- {\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    text-align: left;\n\n    & .Select-module_bui-SelectItemIndicator__1y7zW {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select-module_bui-SelectItem__145pz {\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-left: var(--bui-space-3);\n    padding-right: 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-1);\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] .Select-module_bui-SelectItemIndicator__1y7zW {\n      opacity: 1;\n    }\n  }\n\n  .Select-module_bui-SelectItemIndicator__1y7zW {\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  .Select-module_bui-SelectItemLabel__1N_y- {\n    flex: 1;\n    grid-area: text;\n  }\n}\n";
-var styles = {"bui-Select":"Select-module_bui-Select__LDZ15","bui-SelectTrigger":"Select-module_bui-SelectTrigger__3kJBt","bui-SelectValue":"Select-module_bui-SelectValue__jdoc-","bui-SelectIcon":"Select-module_bui-SelectIcon__e97yW","bui-SelectItemIndicator":"Select-module_bui-SelectItemIndicator__1y7zW","bui-SelectItem":"Select-module_bui-SelectItem__145pz","bui-SelectItemLabel":"Select-module_bui-SelectItemLabel__1N_y-"};
+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  .Select-module_bui-Select__LDZ15,\n  .Select-module_bui-SelectPopover__1vFLn {\n    &[data-size='small'] {\n      --select-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --select-item-height: 2.5rem;\n    }\n  }\n\n  .Select-module_bui-SelectPopover__1vFLn {\n    min-width: var(--trigger-width);\n  }\n\n  .Select-module_bui-SelectTrigger__3kJBt {\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    cursor: pointer;\n    gap: var(--bui-space-2);\n    width: 100%;\n    height: var(--select-item-height);\n\n    .Select-module_bui-Select__LDZ15[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Select-module_bui-Select__LDZ15[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    & svg {\n      flex-shrink: 0;\n      color: var(--bui-fg-secondary);\n\n      .Select-module_bui-Select__LDZ15[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Select-module_bui-Select__LDZ15[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &:hover {\n      transition: border-color 0.2s ease-in-out;\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    .Select-module_bui-Select__LDZ15[data-invalid] & {\n      border-color: var(--bui-fg-danger);\n\n      &:focus-visible,\n      &:hover {\n        outline: 1px solid var(--bui-fg-danger);\n      }\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      border-color: var(--bui-border-disabled);\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select-module_bui-SelectTriggerChevron__1xwt4 {\n    display: grid;\n    place-content: center;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  .Select-module_bui-SelectValue__jdoc- {\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    text-align: left;\n\n    & .Select-module_bui-SelectItemIndicator__1y7zW {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select-module_bui-SelectList__2Cgmr:focus-visible {\n    /* Remove default focus-visible outline because React Aria\n     * triggers it on mouse click open of the list for some reason.\n     * On keyboard use, the top item receives the focus style,\n     * so it's not needed anyway. */\n    outline: none;\n  }\n\n  .Select-module_bui-SelectItem__145pz {\n    box-sizing: border-box;\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    min-height: var(--select-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\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]::before {\n      content: '';\n      position: absolute;\n      inset-block: 0;\n      inset-inline: var(--bui-space-1);\n      border-radius: var(--bui-radius-2);\n      background: var(--bui-bg-surface-2);\n      z-index: -1;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Select-module_bui-SelectItemIndicator__1y7zW {\n      opacity: 1;\n    }\n  }\n\n  .Select-module_bui-SelectItemIndicator__1y7zW {\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  .Select-module_bui-SelectItemLabel__1N_y- {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Select-module_bui-SelectSearchWrapper__O_TMJ {\n    flex-shrink: 0;\n    margin-bottom: var(--bui-space-1);\n    display: flex;\n    align-items: center;\n    padding-inline: var(--bui-space-3) 0;\n    border-bottom: 1px solid var(--bui-border);\n  }\n\n  .Select-module_bui-SelectSearch__2xqJK {\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    flex: 1;\n    outline: none;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    height: var(--select-item-height);\n    line-height: var(--select-item-height);\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    /* Hide native browser clear button */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Select-module_bui-SelectSearchClear__F3_5y {\n    flex: 0 0 auto;\n    display: grid;\n    place-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    width: var(--select-item-height);\n    height: var(--select-item-height);\n\n    input:placeholder-shown + & {\n      display: none;\n    }\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Select-module_bui-SelectNoResults__1fMBM {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
+var styles = {"bui-Select":"Select-module_bui-Select__LDZ15","bui-SelectPopover":"Select-module_bui-SelectPopover__1vFLn","bui-SelectTrigger":"Select-module_bui-SelectTrigger__3kJBt","bui-SelectTriggerChevron":"Select-module_bui-SelectTriggerChevron__1xwt4","bui-SelectValue":"Select-module_bui-SelectValue__jdoc-","bui-SelectItemIndicator":"Select-module_bui-SelectItemIndicator__1y7zW","bui-SelectList":"Select-module_bui-SelectList__2Cgmr","bui-SelectItem":"Select-module_bui-SelectItem__145pz","bui-SelectItemLabel":"Select-module_bui-SelectItemLabel__1N_y-","bui-SelectSearchWrapper":"Select-module_bui-SelectSearchWrapper__O_TMJ","bui-SelectSearch":"Select-module_bui-SelectSearch__2xqJK","bui-SelectSearchClear":"Select-module_bui-SelectSearchClear__F3_5y","bui-SelectNoResults":"Select-module_bui-SelectNoResults__1fMBM"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Autocomplete, SearchField, Input, Button } from 'react-aria-components';
+import { useFilter } from 'react-aria';
+import { RiCloseCircleLine } from '@remixicon/react';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { SelectDefinition } from './definition.esm.js';
+import { SelectListBox } from './SelectListBox.esm.js';
+import styles from './Select.module.css.esm.js';
+
+function SelectContent({
+  searchable,
+  searchPlaceholder = "Search...",
+  options
+}) {
+  const { contains } = useFilter({ sensitivity: "base" });
+  const { classNames } = useStyles(SelectDefinition);
+  if (!searchable) {
+    return /* @__PURE__ */ jsx(SelectListBox, { options });
+  }
+  return /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
+    /* @__PURE__ */ jsxs(
+      SearchField,
+      {
+        autoFocus: true,
+        className: clsx(
+          classNames.searchWrapper,
+          styles[classNames.searchWrapper]
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: searchPlaceholder,
+              className: clsx(classNames.search, styles[classNames.search])
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: clsx(
+                classNames.searchClear,
+                styles[classNames.searchClear]
+              ),
+              children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectListBox, { options })
+  ] });
+}
+
+export { SelectContent };
+//# sourceMappingURL=SelectContent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContent.esm.js","sources":["../../../src/components/Select/SelectContent.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Input,\n  SearchField,\n  Autocomplete,\n  Button,\n} from 'react-aria-components';\nimport { useFilter } from 'react-aria';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { SelectDefinition } from './definition';\nimport { SelectListBox } from './SelectListBox';\nimport styles from './Select.module.css';\nimport type { Option } from './types';\n\ninterface SelectContentProps {\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  options?: Array<Option>;\n}\n\nexport function SelectContent({\n  searchable,\n  searchPlaceholder = 'Search...',\n  options,\n}: SelectContentProps) {\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { classNames } = useStyles(SelectDefinition);\n\n  if (!searchable) {\n    return <SelectListBox options={options} />;\n  }\n\n  return (\n    <Autocomplete filter={contains}>\n      <SearchField\n        autoFocus\n        className={clsx(\n          classNames.searchWrapper,\n          styles[classNames.searchWrapper],\n        )}\n      >\n        <Input\n          placeholder={searchPlaceholder}\n          className={clsx(classNames.search, styles[classNames.search])}\n        />\n        <Button\n          className={clsx(\n            classNames.searchClear,\n            styles[classNames.searchClear],\n          )}\n        >\n          <RiCloseCircleLine />\n        </Button>\n      </SearchField>\n      <SelectListBox options={options} />\n    </Autocomplete>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAqCO,SAAS,aAAA,CAAc;AAAA,EAC5B,UAAA;AAAA,EACA,iBAAA,GAAoB,WAAA;AAAA,EACpB;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,gBAAgB,CAAA;AAEjD,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,uBAAO,GAAA,CAAC,iBAAc,OAAA,EAAkB,CAAA;AAAA,EAC1C;AAEA,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,QAAA,EACpB,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAS,IAAA;AAAA,QACT,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,aAAA;AAAA,UACX,MAAA,CAAO,WAAW,aAAa;AAAA,SACjC;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAa,iBAAA;AAAA,cACb,WAAW,IAAA,CAAK,UAAA,CAAW,QAAQ,MAAA,CAAO,UAAA,CAAW,MAAM,CAAC;AAAA;AAAA,WAC9D;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEA,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,iBAAc,OAAA,EAAkB;AAAA,GAAA,EACnC,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ListBox, ListBoxItem, Text } from 'react-aria-components';
+import { RiCheckLine } from '@remixicon/react';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { SelectDefinition } from './definition.esm.js';
+import styles from './Select.module.css.esm.js';
+
+const NoResults = () => {
+  const { classNames } = useStyles(SelectDefinition);
+  return /* @__PURE__ */ jsx("div", { className: clsx(classNames.noResults, styles[classNames.noResults]), children: "No results found." });
+};
+function SelectListBox({ options, ...props }) {
+  const { classNames } = useStyles(SelectDefinition, props);
+  return /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      className: clsx(classNames.list, styles[classNames.list]),
+      renderEmptyState: () => /* @__PURE__ */ jsx(NoResults, {}),
+      children: options?.map((option) => /* @__PURE__ */ jsxs(
+        ListBoxItem,
+        {
+          id: option.value,
+          textValue: option.label,
+          className: clsx(classNames.item, styles[classNames.item]),
+          isDisabled: option.disabled,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  classNames.itemIndicator,
+                  styles[classNames.itemIndicator]
+                ),
+                children: /* @__PURE__ */ jsx(RiCheckLine, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                slot: "label",
+                className: clsx(classNames.itemLabel, styles[classNames.itemLabel]),
+                children: option.label
+              }
+            )
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+}
+
+export { SelectListBox };
+//# sourceMappingURL=SelectListBox.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectListBox.esm.js","sources":["../../../src/components/Select/SelectListBox.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 { ListBox, ListBoxItem, Text } from 'react-aria-components';\nimport { RiCheckLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { SelectDefinition } from './definition';\nimport styles from './Select.module.css';\nimport type { Option } from './types';\n\ninterface SelectListBoxProps {\n  options?: Array<Option>;\n}\n\nconst NoResults = () => {\n  const { classNames } = useStyles(SelectDefinition);\n\n  return (\n    <div className={clsx(classNames.noResults, styles[classNames.noResults])}>\n      No results found.\n    </div>\n  );\n};\n\nexport function SelectListBox({ options, ...props }: SelectListBoxProps) {\n  const { classNames } = useStyles(SelectDefinition, props);\n  return (\n    <ListBox\n      className={clsx(classNames.list, styles[classNames.list])}\n      renderEmptyState={() => <NoResults />}\n    >\n      {options?.map(option => (\n        <ListBoxItem\n          key={option.value}\n          id={option.value}\n          textValue={option.label}\n          className={clsx(classNames.item, styles[classNames.item])}\n          isDisabled={option.disabled}\n        >\n          <div\n            className={clsx(\n              classNames.itemIndicator,\n              styles[classNames.itemIndicator],\n            )}\n          >\n            <RiCheckLine />\n          </div>\n          <Text\n            slot=\"label\"\n            className={clsx(classNames.itemLabel, styles[classNames.itemLabel])}\n          >\n            {option.label}\n          </Text>\n        </ListBoxItem>\n      ))}\n    </ListBox>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA4BA,MAAM,YAAY,MAAM;AACtB,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,gBAAgB,CAAA;AAEjD,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA,EAAG,QAAA,EAAA,mBAAA,EAE1E,CAAA;AAEJ,CAAA;AAEO,SAAS,aAAA,CAAc,EAAE,OAAA,EAAS,GAAG,OAAM,EAAuB;AACvE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,kBAAkB,KAAK,CAAA;AACxD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,MACxD,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA;AAAA,MAElC,QAAA,EAAA,OAAA,EAAS,IAAI,CAAA,MAAA,qBACZ,IAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UAEC,IAAI,MAAA,CAAO,KAAA;AAAA,UACX,WAAW,MAAA,CAAO,KAAA;AAAA,UAClB,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,UACxD,YAAY,MAAA,CAAO,QAAA;AAAA,UAEnB,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,aAAA;AAAA,kBACX,MAAA,CAAO,WAAW,aAAa;AAAA,iBACjC;AAAA,gBAEA,8BAAC,WAAA,EAAA,EAAY;AAAA;AAAA,aACf;AAAA,4BACA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,OAAA;AAAA,gBACL,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA;AAAA,gBAEjE,QAAA,EAAA,MAAA,CAAO;AAAA;AAAA;AACV;AAAA,SAAA;AAAA,QAnBK,MAAA,CAAO;AAAA,OAqBf;AAAA;AAAA,GACH;AAEJ;;;;"}

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button, SelectValue } from 'react-aria-components';
+import { RiArrowDownSLine } from '@remixicon/react';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { SelectDefinition } from './definition.esm.js';
+import styles from './Select.module.css.esm.js';
+
+function SelectTrigger({ icon }) {
+  const { classNames } = useStyles(SelectDefinition);
+  return /* @__PURE__ */ jsxs(Button, { className: clsx(classNames.trigger, styles[classNames.trigger]), children: [
+    icon,
+    /* @__PURE__ */ jsx(
+      SelectValue,
+      {
+        className: clsx(classNames.value, styles[classNames.value])
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: clsx(classNames.chevron, styles[classNames.chevron]), children: /* @__PURE__ */ jsx(RiArrowDownSLine, { "aria-hidden": "true" }) })
+  ] });
+}
+
+export { SelectTrigger };
+//# sourceMappingURL=SelectTrigger.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.esm.js","sources":["../../../src/components/Select/SelectTrigger.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 { ReactNode } from 'react';\nimport { Button, SelectValue } from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { SelectDefinition } from './definition';\nimport styles from './Select.module.css';\n\ninterface SelectTriggerProps {\n  icon?: ReactNode;\n}\n\nexport function SelectTrigger({ icon }: SelectTriggerProps) {\n  const { classNames } = useStyles(SelectDefinition);\n\n  return (\n    <Button className={clsx(classNames.trigger, styles[classNames.trigger])}>\n      {icon}\n      <SelectValue\n        className={clsx(classNames.value, styles[classNames.value])}\n      />\n      <div className={clsx(classNames.chevron, styles[classNames.chevron])}>\n        <RiArrowDownSLine aria-hidden=\"true\" />\n      </div>\n    </Button>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA4BO,SAAS,aAAA,CAAc,EAAE,IAAA,EAAK,EAAuB;AAC1D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,gBAAgB,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EACnE,QAAA,EAAA;AAAA,IAAA,IAAA;AAAA,oBACD,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC;AAAA;AAAA,KAC5D;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,WAAW,OAAA,EAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EACjE,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,aAAA,EAAY,QAAO,CAAA,EACvC;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,23 @@
+const SelectDefinition = {
+  classNames: {
+    root: "bui-Select",
+    popover: "bui-SelectPopover",
+    trigger: "bui-SelectTrigger",
+    chevron: "bui-SelectTriggerChevron",
+    value: "bui-SelectValue",
+    list: "bui-SelectList",
+    item: "bui-SelectItem",
+    itemIndicator: "bui-SelectItemIndicator",
+    itemLabel: "bui-SelectItemLabel",
+    searchWrapper: "bui-SelectSearchWrapper",
+    search: "bui-SelectSearch",
+    searchClear: "bui-SelectSearchClear",
+    noResults: "bui-SelectNoResults"
+  },
+  dataAttributes: {
+    size: ["small", "medium"]
+  }
+};
+
+export { SelectDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Select/definition.ts"],"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 type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Select\n * @public\n */\nexport const SelectDefinition = {\n  classNames: {\n    root: 'bui-Select',\n    popover: 'bui-SelectPopover',\n    trigger: 'bui-SelectTrigger',\n    chevron: 'bui-SelectTriggerChevron',\n    value: 'bui-SelectValue',\n    list: 'bui-SelectList',\n    item: 'bui-SelectItem',\n    itemIndicator: 'bui-SelectItemIndicator',\n    itemLabel: 'bui-SelectItemLabel',\n    searchWrapper: 'bui-SelectSearchWrapper',\n    search: 'bui-SelectSearch',\n    searchClear: 'bui-SelectSearchClear',\n    noResults: 'bui-SelectNoResults',\n  },\n  dataAttributes: {\n    size: ['small', 'medium'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS,0BAAA;AAAA,IACT,KAAA,EAAO,iBAAA;AAAA,IACP,IAAA,EAAM,gBAAA;AAAA,IACN,IAAA,EAAM,gBAAA;AAAA,IACN,aAAA,EAAe,yBAAA;AAAA,IACf,SAAA,EAAW,qBAAA;AAAA,IACX,aAAA,EAAe,yBAAA;AAAA,IACf,MAAA,EAAQ,kBAAA;AAAA,IACR,WAAA,EAAa,uBAAA;AAAA,IACb,SAAA,EAAW;AAAA,GACb;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}

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

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { SkeletonDefinition } from './definition.esm.js';
 import styles from './Skeleton.module.css.esm.js';
 import clsx from 'clsx';
 
 const Skeleton = (props) => {
-  const { classNames, cleanedProps } = useStyles("Skeleton", {
+  const { classNames, cleanedProps } = useStyles(SkeletonDefinition, {
     width: 80,
     height: 24,
     rounded: false,

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 { 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;;;;"}
+{"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 { SkeletonDefinition } from './definition';\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(SkeletonDefinition, {\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":";;;;;;AAuBO,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,kBAAA,EAAoB;AAAA,IACjE,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/Skeleton/definition.esm.js

@@ -0,0 +1,8 @@
+const SkeletonDefinition = {
+  classNames: {
+    root: "bui-Skeleton"
+  }
+};
+
+export { SkeletonDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Skeleton/definition.ts"],"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 type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Skeleton\n * @public\n */\nexport const SkeletonDefinition = {\n  classNames: {\n    root: 'bui-Skeleton',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA;AAEV;;;;"}

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

@@ -2,12 +2,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Switch as Switch$1 } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { SwitchDefinition } from './definition.esm.js';
 import styles from './Switch.module.css.esm.js';
 import clsx from 'clsx';
 
 const Switch = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles("Switch", props);
+    const { classNames, cleanedProps } = useStyles(SwitchDefinition, props);
     const { className, label, ...rest } = cleanedProps;
     return /* @__PURE__ */ jsxs(
       Switch$1,

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 { 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;;;;"}
+{"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 { SwitchDefinition } from './definition';\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(SwitchDefinition, 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":";;;;;;;;AAyBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,kBAAkB,KAAK,CAAA;AACtE,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/Switch/definition.esm.js

@@ -0,0 +1,9 @@
+const SwitchDefinition = {
+  classNames: {
+    root: "bui-Switch",
+    indicator: "bui-SwitchIndicator"
+  }
+};
+
+export { SwitchDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Switch/definition.ts"],"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 type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Switch\n * @public\n */\nexport const SwitchDefinition = {\n  classNames: {\n    root: 'bui-Switch',\n    indicator: 'bui-SwitchIndicator',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,SAAA,EAAW;AAAA;AAEf;;;;"}

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

@@ -4,10 +4,11 @@ import { Text } from '../../Text/Text.esm.js';
 import { Link } from '../../Link/Link.esm.js';
 import { Cell as Cell$1 } from 'react-aria-components';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
+import { TableDefinition } from '../definition.esm.js';
 import styles from '../Table.module.css.esm.js';
 
 const Cell = (props) => {
-  const { classNames, cleanedProps } = useStyles("Table", {
+  const { classNames, cleanedProps } = useStyles(TableDefinition, {
     color: "primary",
     ...props
   });

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

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

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

@@ -4,17 +4,15 @@ import { Text } from '../../Text/Text.esm.js';
 import { Link } from '../../Link/Link.esm.js';
 import { Avatar } from '../../Avatar/Avatar.esm.js';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
+import { TableDefinition } from '../definition.esm.js';
 import { Cell } from 'react-aria-components';
 import styles from '../Table.module.css.esm.js';
 
 const CellProfile = (props) => {
-  const { classNames, cleanedProps } = useStyles(
-    "Table",
-    {
-      color: "primary",
-      ...props
-    }
-  );
+  const { classNames, cleanedProps } = useStyles(TableDefinition, {
+    color: "primary",
+    ...props
+  });
   const { className, src, name, href, description, color, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsx(
     Cell,

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 '../../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;;;;"}
+{"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 { TableDefinition } from '../definition';\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(TableDefinition, {\n    color: 'primary' as const,\n    ...props,\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":";;;;;;;;;;AA2BO,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AACtD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,eAAA,EAAiB;AAAA,IAC9D,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,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/Table/components/Column.esm.js

@@ -1,15 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Column as Column$1 } from 'react-aria-components';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
+import { TableDefinition } from '../definition.esm.js';
 import styles from '../Table.module.css.esm.js';
 import clsx from 'clsx';
 import { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';
 
 const Column = (props) => {
-  const { classNames, cleanedProps } = useStyles(
-    "Table",
-    props
-  );
+  const { classNames, cleanedProps } = useStyles(TableDefinition, props);
   const { children, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsx(
     Column$1,

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

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