@backstage/ui 0.9.0-next.2 → 0.9.0-next.3

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

@@ -1,13 +1,14 @@
 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 { 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");
@@ -21,14 +22,13 @@ const Select = forwardRef((props, ref) => {
     label,
     description,
     options,
-    placeholder,
-    size,
     icon,
+    searchable,
+    searchPlaceholder,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     isRequired,
     secondaryLabel,
-    style,
     ...rest
   } = cleanedProps;
   useEffect(() => {
@@ -57,62 +57,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 { 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('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    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":";;;;;;;;;;;;AA6BO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,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,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,55 @@
+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 { 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("Select");
+  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 { 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('Select');\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":";;;;;;;;;AAoCO,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,QAAQ,CAAA;AAEzC,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,54 @@
+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 styles from './Select.module.css.esm.js';
+
+const NoResults = () => {
+  const { classNames } = useStyles("Select");
+  return /* @__PURE__ */ jsx("div", { className: clsx(classNames.noResults, styles[classNames.noResults]), children: "No results found." });
+};
+function SelectListBox({ options, ...props }) {
+  const { classNames } = useStyles("Select", 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 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('Select');\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('Select', 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":";;;;;;;AA2BA,MAAM,YAAY,MAAM;AACtB,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AAEzC,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,UAAU,KAAK,CAAA;AAChD,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,23 @@
+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 styles from './Select.module.css.esm.js';
+
+function SelectTrigger({ icon }) {
+  const { classNames } = useStyles("Select");
+  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 styles from './Select.module.css';\n\ninterface SelectTriggerProps {\n  icon?: ReactNode;\n}\n\nexport function SelectTrigger({ icon }: SelectTriggerProps) {\n  const { classNames } = useStyles('Select');\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":";;;;;;;AA2BO,SAAS,aAAA,CAAc,EAAE,IAAA,EAAK,EAAuB;AAC1D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AAEzC,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/Table/components/Row.esm.js

@@ -24,6 +24,7 @@ function Row(props) {
       Row$1,
       {
         id,
+        href,
         className: clsx(classNames.row, styles[classNames.row]),
         ...rest,
         children: content
@@ -34,6 +35,7 @@ function Row(props) {
     Row$1,
     {
       id,
+      href,
       className: clsx(classNames.row, styles[classNames.row]),
       "data-react-aria-pressable": "true",
       ...rest,

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

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

package/dist/index.d.ts

@@ -1,9 +1,8 @@
 import * as react from 'react';
 import { ReactElement, ReactNode, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
-import { ButtonProps as ButtonProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, HeadingProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps as ColumnProps$1, CellProps as CellProps$1, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, DisclosureProps, HeadingProps, DisclosurePanelProps, DisclosureGroupProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps as ColumnProps$1, CellProps as CellProps$1, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NavigateOptions } from 'react-router-dom';
-import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
 
 /**
  * Component definitions for the Backstage UI library
@@ -29,15 +28,20 @@ declare const componentDefinitions: {
     readonly Button: {
         readonly classNames: {
             readonly root: "bui-Button";
+            readonly content: "bui-ButtonContent";
+            readonly spinner: "bui-ButtonSpinner";
         };
         readonly dataAttributes: {
             readonly size: readonly ["small", "medium", "large"];
             readonly variant: readonly ["primary", "secondary", "tertiary"];
+            readonly loading: readonly [true, false];
         };
     };
     readonly ButtonIcon: {
         readonly classNames: {
             readonly root: "bui-ButtonIcon";
+            readonly content: "bui-ButtonIconContent";
+            readonly spinner: "bui-ButtonIconSpinner";
         };
     };
     readonly ButtonLink: {
@@ -62,13 +66,6 @@ declare const componentDefinitions: {
             readonly selected: readonly [true, false];
         };
     };
-    readonly Collapsible: {
-        readonly classNames: {
-            readonly root: "bui-CollapsibleRoot";
-            readonly trigger: "bui-CollapsibleTrigger";
-            readonly panel: "bui-CollapsiblePanel";
-        };
-    };
     readonly Container: {
         readonly classNames: {
             readonly root: "bui-Container";
@@ -85,6 +82,18 @@ declare const componentDefinitions: {
             readonly footer: "bui-DialogFooter";
         };
     };
+    readonly Accordion: {
+        readonly classNames: {
+            readonly root: "bui-Accordion";
+            readonly trigger: "bui-AccordionTrigger";
+            readonly triggerButton: "bui-AccordionTriggerButton";
+            readonly triggerTitle: "bui-AccordionTriggerTitle";
+            readonly triggerSubtitle: "bui-AccordionTriggerSubtitle";
+            readonly triggerIcon: "bui-AccordionTriggerIcon";
+            readonly panel: "bui-AccordionPanel";
+            readonly group: "bui-AccordionGroup";
+        };
+    };
     readonly FieldError: {
         readonly classNames: {
             readonly root: "bui-FieldError";
@@ -192,7 +201,10 @@ declare const componentDefinitions: {
     readonly PasswordField: {
         readonly classNames: {
             readonly root: "bui-PasswordField";
-            readonly inputVisibility: "bui-InputVisibility";
+            readonly inputWrapper: "bui-PasswordFieldInputWrapper";
+            readonly input: "bui-PasswordFieldInput";
+            readonly inputIcon: "bui-PasswordFieldIcon";
+            readonly inputVisibility: "bui-PasswordFieldVisibility";
         };
         readonly dataAttributes: {
             readonly size: readonly ["small", "medium"];
@@ -214,7 +226,7 @@ declare const componentDefinitions: {
         readonly classNames: {
             readonly root: "bui-SearchField";
             readonly clear: "bui-SearchFieldClear";
-            readonly inputWrapper: "bui-SearchFieldWrapper";
+            readonly inputWrapper: "bui-SearchFieldInputWrapper";
             readonly input: "bui-SearchFieldInput";
             readonly inputIcon: "bui-SearchFieldInputIcon";
         };
@@ -226,13 +238,18 @@ declare const componentDefinitions: {
     readonly Select: {
         readonly classNames: {
             readonly root: "bui-Select";
+            readonly popover: "bui-SelectPopover";
             readonly trigger: "bui-SelectTrigger";
+            readonly chevron: "bui-SelectTriggerChevron";
             readonly value: "bui-SelectValue";
-            readonly icon: "bui-SelectIcon";
             readonly list: "bui-SelectList";
             readonly item: "bui-SelectItem";
             readonly itemIndicator: "bui-SelectItemIndicator";
             readonly itemLabel: "bui-SelectItemLabel";
+            readonly searchWrapper: "bui-SelectSearchWrapper";
+            readonly search: "bui-SelectSearch";
+            readonly searchClear: "bui-SelectSearchClear";
+            readonly noResults: "bui-SelectNoResults";
         };
         readonly dataAttributes: {
             readonly size: readonly ["small", "medium"];
@@ -546,6 +563,7 @@ interface ButtonProps extends ButtonProps$1 {
     iconStart?: ReactElement;
     iconEnd?: ReactElement;
     children?: ReactNode;
+    loading?: boolean;
 }
 
 /** @public */
@@ -610,16 +628,50 @@ declare const CardBody: react.ForwardRefExoticComponent<CardBodyProps & react.Re
 declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
- * Collapsible is a component that allows you to collapse and expand content.
- * It is a wrapper around the CollapsiblePrimitive component from base-ui-components.
- *
+ * Props for the Accordion component.
  * @public
  */
-declare const Collapsible: {
-    Root: react.ForwardRefExoticComponent<Omit<Collapsible$1.Root.Props & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    Trigger: react.ForwardRefExoticComponent<Omit<Collapsible$1.Trigger.Props & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-    Panel: react.ForwardRefExoticComponent<Omit<Collapsible$1.Panel.Props & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-};
+interface AccordionProps extends DisclosureProps {
+    className?: string;
+}
+/**
+ * Props for the AccordionTrigger component.
+ * @public
+ */
+interface AccordionTriggerProps extends HeadingProps {
+    className?: string;
+    title?: string;
+    subtitle?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Props for the AccordionPanel component.
+ * @public
+ */
+interface AccordionPanelProps extends DisclosurePanelProps {
+    className?: string;
+}
+/**
+ * Props for the AccordionGroup component.
+ * @public
+ */
+interface AccordionGroupProps extends DisclosureGroupProps {
+    className?: string;
+    /**
+     * Whether multiple accordions can be expanded at the same time.
+     * @defaultValue false
+     */
+    allowsMultiple?: boolean;
+}
+
+/** @public */
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+/** @public */
+declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLHeadingElement>>;
+/** @public */
+declare const AccordionPanel: react.ForwardRefExoticComponent<AccordionPanelProps & react.RefAttributes<HTMLDivElement>>;
+/** @public */
+declare const AccordionGroup: react.ForwardRefExoticComponent<AccordionGroupProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * Props for the DialogTrigger component.
@@ -839,6 +891,7 @@ interface ButtonIconProps extends ButtonProps$1 {
     size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
     variant?: 'primary' | 'secondary' | 'tertiary' | Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
     icon?: ReactElement;
+    loading?: boolean;
 }
 
 /** @public */
@@ -1218,31 +1271,46 @@ interface LinkProps extends LinkProps$1 {
 declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
 /** @public */
-interface SelectProps extends SelectProps$1<{
-    name: string;
+type Option = {
     value: string;
-}>, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
+    label: string;
+    disabled?: boolean;
+};
+/** @public */
+interface SelectProps<T extends 'single' | 'multiple'> extends SelectProps$1<Option, T>, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
     /**
      * An icon to render before the input
      */
     icon?: ReactNode;
     /**
      * The size of the select field
-     * @defaultValue 'medium'
+     * @defaultValue 'small'
      */
     size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
     /**
      * The options of the select field
      */
-    options?: Array<{
-        value: string;
-        label: string;
-        disabled?: boolean;
-    }>;
+    options?: Array<Option>;
+    /**
+     * Enable search/filter functionality in the dropdown
+     * @defaultValue false
+     */
+    searchable?: boolean;
+    /**
+     * placeholder text for the search input
+     * only used when searchable is true
+     * @defaultvalue 'search...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Selection mode, single or multiple
+     * @defaultvalue 'single'
+     */
+    selectionMode?: T;
 }
 
 /** @public */
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLDivElement>>;
+declare const Select: react.ForwardRefExoticComponent<SelectProps<"multiple" | "single"> & react.RefAttributes<HTMLDivElement>>;
 
 /** @public */
 interface SkeletonProps extends ComponentProps<'div'> {
@@ -1292,4 +1360,4 @@ declare const useBreakpoint: () => {
     down: (key: Breakpoint) => boolean;
 };
 
-export { type AlignItems, Avatar, type AvatarProps, type Border, type BorderRadius, Box, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Collapsible, Column, type ColumnProps, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexProps, type FlexWrap, Grid, type GridItemProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, type VisuallyHiddenProps, componentDefinitions, useBreakpoint, useTable };
+export { Accordion, AccordionGroup, type AccordionGroupProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AlignItems, Avatar, type AvatarProps, type Border, type BorderRadius, Box, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Column, type ColumnProps, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexProps, type FlexWrap, Grid, type GridItemProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, type Option, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, type VisuallyHiddenProps, componentDefinitions, useBreakpoint, useTable };