@backstage/ui 0.12.0 → 0.13.0-next.1

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

@@ -1,52 +1,41 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect, useState, useRef } from 'react';
 import { SearchField as SearchField$1, Input, Button } from 'react-aria-components';
-import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../FieldLabel/FieldLabel.module.css.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
+import '../FieldError/FieldError.module.css.esm.js';
 import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
-import { useStyles } from '../../hooks/useStyles.esm.js';
 import { SearchFieldDefinition } from './definition.esm.js';
-import styles from './SearchField.module.css.esm.js';
 
 const SearchField = forwardRef(
   (props, ref) => {
-    const {
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy
-    } = props;
-    useEffect(() => {
-      if (!label && !ariaLabel && !ariaLabelledBy) {
-        console.warn(
-          "SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility"
-        );
-      }
-    }, [label, ariaLabel, ariaLabelledBy]);
-    const { classNames, dataAttributes, style, cleanedProps } = useStyles(
+    const { ownProps, restProps, dataAttributes } = useDefinition(
       SearchFieldDefinition,
-      {
-        size: "small",
-        placeholder: "Search",
-        startCollapsed: false,
-        ...props
-      }
+      props
     );
     const {
-      className,
-      description,
+      classes,
+      label,
       icon,
-      isRequired,
       secondaryLabel,
       placeholder,
       startCollapsed,
-      ...rest
-    } = cleanedProps;
+      description
+    } = ownProps;
+    useEffect(() => {
+      if (!label && !restProps["aria-label"] && !restProps["aria-labelledby"]) {
+        console.warn(
+          "SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        );
+      }
+    }, [label, restProps["aria-label"], restProps["aria-labelledby"]]);
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
-    const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+    const secondaryLabelText = secondaryLabel || (restProps.isRequired ? "Required" : null);
     const handleFocusChange = (isFocused2) => {
-      props.onFocusChange?.(isFocused2);
+      restProps.onFocusChange?.(isFocused2);
       setIsFocused(isFocused2);
     };
     const handleContainerClick = () => {
@@ -54,17 +43,14 @@ const SearchField = forwardRef(
     };
     const hasInputRef = !!inputRef.current;
     const hasValue = !!inputRef.current?.value;
-    const isCollapsed = hasInputRef ? startCollapsed && !hasValue && !isFocused : startCollapsed && !rest.value && !rest.defaultValue && !isFocused;
+    const isCollapsed = hasInputRef ? startCollapsed && !hasValue && !isFocused : startCollapsed && !restProps.value && !restProps.defaultValue && !isFocused;
     return /* @__PURE__ */ jsxs(
       SearchField$1,
       {
-        className: clsx(classNames.root, styles[classNames.root], className),
+        className: classes.root,
         ...dataAttributes,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
         "data-collapsed": isCollapsed,
-        style,
-        ...rest,
+        ...restProps,
         onFocusChange: handleFocusChange,
         ref,
         children: [
@@ -79,20 +65,14 @@ const SearchField = forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: clsx(
-                classNames.inputWrapper,
-                styles[classNames.inputWrapper]
-              ),
+              className: classes.inputWrapper,
               "data-size": dataAttributes["data-size"],
               onClick: handleContainerClick,
               children: [
                 icon !== false && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: clsx(
-                      classNames.inputIcon,
-                      styles[classNames.inputIcon]
-                    ),
+                    className: classes.inputIcon,
                     "data-size": dataAttributes["data-size"],
                     "aria-hidden": "true",
                     children: icon || /* @__PURE__ */ jsx(RiSearch2Line, {})
@@ -102,7 +82,7 @@ const SearchField = forwardRef(
                   Input,
                   {
                     ref: inputRef,
-                    className: clsx(classNames.input, styles[classNames.input]),
+                    className: classes.input,
                     ...icon !== false && { "data-icon": true },
                     placeholder
                   }
@@ -110,7 +90,7 @@ const SearchField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Button,
                   {
-                    className: clsx(classNames.clear, styles[classNames.clear]),
+                    className: classes.clear,
                     "data-size": dataAttributes["data-size"],
                     children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
                   }

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect, useState, useRef } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport { SearchFieldDefinition } from './definition';\nimport styles from './SearchField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames, dataAttributes, style, cleanedProps } = useStyles(\n      SearchFieldDefinition,\n      {\n        size: 'small',\n        placeholder: 'Search',\n        startCollapsed: false,\n        ...props,\n      },\n    );\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      ...rest\n    } = cleanedProps;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleFocusChange = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      setIsFocused(isFocused);\n    };\n\n    const handleContainerClick = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasInputRef = !!inputRef.current;\n    const hasValue = !!inputRef.current?.value;\n\n    const isCollapsed = hasInputRef\n      ? startCollapsed && !hasValue && !isFocused\n      : startCollapsed && !rest.value && !rest.defaultValue && !isFocused;\n\n    return (\n      <AriaSearchField\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-collapsed={isCollapsed}\n        style={style}\n        {...rest}\n        onFocusChange={handleFocusChange}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            classNames.inputWrapper,\n            styles[classNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n          onClick={handleContainerClick}\n        >\n          {icon !== false && (\n            <div\n              className={clsx(\n                classNames.inputIcon,\n                styles[classNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            ref={inputRef}\n            className={clsx(classNames.input, styles[classNames.input])}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={clsx(classNames.clear, styles[classNames.clear])}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["isFocused","AriaSearchField"],"mappings":"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"}
+{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect, useState, useRef } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SearchFieldDefinition } from './definition';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      SearchFieldDefinition,\n      props,\n    );\n    const {\n      classes,\n      label,\n      icon,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      description,\n    } = ownProps;\n\n    useEffect(() => {\n      if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n    const [isFocused, setIsFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (restProps.isRequired ? 'Required' : null);\n\n    const handleFocusChange = (isFocused: boolean) => {\n      restProps.onFocusChange?.(isFocused);\n      setIsFocused(isFocused);\n    };\n\n    const handleContainerClick = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasInputRef = !!inputRef.current;\n    const hasValue = !!inputRef.current?.value;\n\n    const isCollapsed = hasInputRef\n      ? startCollapsed && !hasValue && !isFocused\n      : startCollapsed &&\n        !restProps.value &&\n        !restProps.defaultValue &&\n        !isFocused;\n\n    return (\n      <AriaSearchField\n        className={classes.root}\n        {...dataAttributes}\n        data-collapsed={isCollapsed}\n        {...restProps}\n        onFocusChange={handleFocusChange}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={classes.inputWrapper}\n          data-size={dataAttributes['data-size']}\n          onClick={handleContainerClick}\n        >\n          {icon !== false && (\n            <div\n              className={classes.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            ref={inputRef}\n            className={classes.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={classes.clear}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["isFocused","AriaSearchField"],"mappings":"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"}

package/dist/components/SearchField/SearchField.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  .SearchField_bui-SearchField__c8942d320f {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --search-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --search-field-item-height: 2.5rem;\n    }\n\n    &[data-empty] {\n      .SearchField_bui-SearchFieldClear__c8942d320f {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out, width 0.3s ease-in-out,\n        max-width 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          width: 2.5rem;\n          max-width: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          width: 2rem;\n          max-width: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField_bui-SearchFieldInput__c8942d320f {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField_bui-SearchFieldInput__c8942d320f {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField_bui-SearchFieldInputWrapper__c8942d320f {\n          .SearchField_bui-SearchFieldInput__c8942d320f[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n\n      &[data-collapsed='false'] {\n        flex-basis: 200px;\n        width: 200px;\n        max-width: 200px;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldInputWrapper__c8942d320f {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border-2);\n    background-color: var(--bui-bg-neutral-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .SearchField_bui-SearchFieldInputIcon__c8942d320f {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n    /* To animate the icon when the input is collapsed */\n    transition: opacity 0.2s ease-in-out;\n\n    & svg {\n      .SearchField_bui-SearchField__c8942d320f[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .SearchField_bui-SearchField__c8942d320f[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldInput__c8942d320f {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: padding 0.3s ease-in-out;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .SearchField_bui-SearchField__c8942d320f[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .SearchField_bui-SearchField__c8942d320f[data-size='medium'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldClear__c8942d320f {\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(--search-field-item-height);\n    height: var(--search-field-item-height);\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
-var styles = {"bui-SearchField":"SearchField_bui-SearchField__c8942d320f","bui-SearchFieldClear":"SearchField_bui-SearchFieldClear__c8942d320f","bui-SearchFieldInput":"SearchField_bui-SearchFieldInput__c8942d320f","bui-SearchFieldInputWrapper":"SearchField_bui-SearchFieldInputWrapper__c8942d320f","bui-SearchFieldInputIcon":"SearchField_bui-SearchFieldInputIcon__c8942d320f"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .SearchField_bui-SearchField__77fdbf40c8 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --search-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --search-field-item-height: 2.5rem;\n    }\n\n    &[data-empty] {\n      .SearchField_bui-SearchFieldClear__77fdbf40c8 {\n        display: none;\n      }\n    }\n\n    &[data-startcollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out, width 0.3s ease-in-out,\n        max-width 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          width: 2.5rem;\n          max-width: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          width: 2rem;\n          max-width: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField_bui-SearchFieldInput__77fdbf40c8 {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField_bui-SearchFieldInput__77fdbf40c8 {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField_bui-SearchFieldInputWrapper__77fdbf40c8 {\n          .SearchField_bui-SearchFieldInput__77fdbf40c8[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n\n      &[data-collapsed='false'] {\n        flex-basis: 200px;\n        width: 200px;\n        max-width: 200px;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldInputWrapper__77fdbf40c8 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border-2);\n    background-color: var(--bui-bg-neutral-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .SearchField_bui-SearchFieldInputIcon__77fdbf40c8 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n    /* To animate the icon when the input is collapsed */\n    transition: opacity 0.2s ease-in-out;\n\n    & svg {\n      .SearchField_bui-SearchField__77fdbf40c8[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .SearchField_bui-SearchField__77fdbf40c8[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldInput__77fdbf40c8 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: padding 0.3s ease-in-out;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .SearchField_bui-SearchField__77fdbf40c8[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .SearchField_bui-SearchField__77fdbf40c8[data-size='medium'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldClear__77fdbf40c8 {\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(--search-field-item-height);\n    height: var(--search-field-item-height);\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
+var styles = {"bui-SearchField":"SearchField_bui-SearchField__77fdbf40c8","bui-SearchFieldClear":"SearchField_bui-SearchFieldClear__77fdbf40c8","bui-SearchFieldInput":"SearchField_bui-SearchFieldInput__77fdbf40c8","bui-SearchFieldInputWrapper":"SearchField_bui-SearchFieldInputWrapper__77fdbf40c8","bui-SearchFieldInputIcon":"SearchField_bui-SearchFieldInputIcon__77fdbf40c8"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,4 +1,13 @@
-const SearchFieldDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './SearchField.module.css.esm.js';
+
+const SearchFieldDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-SearchField",
     clear: "bui-SearchFieldClear",
@@ -6,11 +15,17 @@ const SearchFieldDefinition = {
     input: "bui-SearchFieldInput",
     inputIcon: "bui-SearchFieldInputIcon"
   },
-  dataAttributes: {
-    startCollapsed: [true, false],
-    size: ["small", "medium"]
+  propDefs: {
+    startCollapsed: { dataAttribute: true, default: false },
+    size: { dataAttribute: true, default: "small" },
+    className: {},
+    icon: {},
+    placeholder: { default: "Search" },
+    label: {},
+    description: {},
+    secondaryLabel: {}
   }
-};
+});
 
 export { SearchFieldDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/SearchField/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 SearchField\n * @public\n */\nexport const SearchFieldDefinition = {\n  classNames: {\n    root: 'bui-SearchField',\n    clear: 'bui-SearchFieldClear',\n    inputWrapper: 'bui-SearchFieldInputWrapper',\n    input: 'bui-SearchFieldInput',\n    inputIcon: 'bui-SearchFieldInputIcon',\n  },\n  dataAttributes: {\n    startCollapsed: [true, false] as const,\n    size: ['small', 'medium'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,qBAAA,GAAwB;AAAA,EACnC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,iBAAA;AAAA,IACN,KAAA,EAAO,sBAAA;AAAA,IACP,YAAA,EAAc,6BAAA;AAAA,IACd,KAAA,EAAO,sBAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,cAAA,EAAgB,CAAC,IAAA,EAAM,KAAK,CAAA;AAAA,IAC5B,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/SearchField/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 { defineComponent } from '../../hooks/useDefinition';\nimport type { SearchFieldOwnProps } from './types';\nimport styles from './SearchField.module.css';\n\n/**\n * Component definition for SearchField\n * @public\n */\nexport const SearchFieldDefinition = defineComponent<SearchFieldOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-SearchField',\n    clear: 'bui-SearchFieldClear',\n    inputWrapper: 'bui-SearchFieldInputWrapper',\n    input: 'bui-SearchFieldInput',\n    inputIcon: 'bui-SearchFieldInputIcon',\n  },\n  propDefs: {\n    startCollapsed: { dataAttribute: true, default: false },\n    size: { dataAttribute: true, default: 'small' },\n    className: {},\n    icon: {},\n    placeholder: { default: 'Search' },\n    label: {},\n    description: {},\n    secondaryLabel: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,qBAAA,GAAwB,iBAAqC,CAAE;AAAA,EAC1E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,iBAAA;AAAA,IACN,KAAA,EAAO,sBAAA;AAAA,IACP,YAAA,EAAc,6BAAA;AAAA,IACd,KAAA,EAAO,sBAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,QAAA,EAAU;AAAA,IACR,cAAA,EAAgB,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,KAAA,EAAM;AAAA,IACtD,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,WAAW,EAAC;AAAA,IACZ,MAAM,EAAC;AAAA,IACP,WAAA,EAAa,EAAE,OAAA,EAAS,QAAA,EAAS;AAAA,IACjC,OAAO,EAAC;AAAA,IACR,aAAa,EAAC;AAAA,IACd,gBAAgB;AAAC;AAErB,CAAC;;;;"}

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

@@ -1,41 +1,39 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect } from 'react';
 import { Select as Select$1, Popover } from 'react-aria-components';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { SelectDefinition } from './definition.esm.js';
 import { PopoverDefinition } from '../Popover/definition.esm.js';
+import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import '../FieldLabel/FieldLabel.module.css.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
-import styles$1 from './Select.module.css.esm.js';
-import styles from '../Popover/Popover.module.css.esm.js';
+import '../FieldError/FieldError.module.css.esm.js';
 import { SelectTrigger } from './SelectTrigger.esm.js';
 import { SelectContent } from './SelectContent.esm.js';
 
 const Select = forwardRef((props, ref) => {
-  const { classNames: popoverClassNames } = useStyles(PopoverDefinition);
-  const { classNames, dataAttributes, cleanedProps } = useStyles(
+  const { ownProps, restProps, dataAttributes } = useDefinition(
     SelectDefinition,
     {
-      size: "small",
       placeholder: "Select an option",
       ...props
     }
   );
+  const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});
   const {
-    className,
+    classes,
     label,
     description,
     options,
     icon,
     searchable,
     searchPlaceholder,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
     isRequired,
-    secondaryLabel,
-    ...rest
-  } = cleanedProps;
+    secondaryLabel
+  } = ownProps;
+  const ariaLabel = restProps["aria-label"];
+  const ariaLabelledBy = restProps["aria-labelledby"];
   useEffect(() => {
     if (!label && !ariaLabel && !ariaLabelledBy) {
       console.warn(
@@ -47,12 +45,10 @@ const Select = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxs(
     Select$1,
     {
-      className: clsx(classNames.root, styles$1[classNames.root], className),
+      className: classes.root,
       ...dataAttributes,
       ref,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      ...rest,
+      ...restProps,
       children: [
         /* @__PURE__ */ jsx(
           FieldLabel,
@@ -67,12 +63,7 @@ const Select = forwardRef((props, ref) => {
         /* @__PURE__ */ jsx(
           Popover,
           {
-            className: clsx(
-              popoverClassNames.root,
-              styles[popoverClassNames.root],
-              classNames.popover,
-              styles$1[classNames.popover]
-            ),
+            className: clsx(popoverOwnProps.classes.root, classes.popover),
             ...dataAttributes,
             children: /* @__PURE__ */ jsx(
               SelectContent,

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 { 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","styles","stylesPopover"],"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,EAAMC,SAAO,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,cAClBC,MAAA,CAAc,kBAAkB,IAAI,CAAA;AAAA,cACpC,UAAA,CAAW,OAAA;AAAA,cACXD,QAAA,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;;;;"}
+{"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 { SelectProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectDefinition } from './definition';\nimport { PopoverDefinition } from '../Popover/definition';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\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 { ownProps, restProps, dataAttributes } = useDefinition(\n    SelectDefinition,\n    {\n      placeholder: 'Select an option',\n      ...props,\n    },\n  );\n  const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});\n\n  const {\n    classes,\n    label,\n    description,\n    options,\n    icon,\n    searchable,\n    searchPlaceholder,\n    isRequired,\n    secondaryLabel,\n  } = ownProps;\n\n  const ariaLabel = restProps['aria-label'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\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={classes.root}\n      {...dataAttributes}\n      ref={ref}\n      {...restProps}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <SelectTrigger icon={icon} />\n      <FieldError />\n      <Popover\n        className={clsx(popoverOwnProps.classes.root, classes.popover)}\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,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,gBAAA;AAAA,IACA;AAAA,MACE,WAAA,EAAa,kBAAA;AAAA,MACb,GAAG;AAAA;AACL,GACF;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,KAAoB,aAAA,CAAc,iBAAA,EAAmB,EAAE,CAAA;AAEzE,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,QAAA;AAEJ,EAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,EAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,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,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACJ,GAAA;AAAA,MACC,GAAG,SAAA;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,WAAW,IAAA,CAAK,eAAA,CAAgB,OAAA,CAAQ,IAAA,EAAM,QAAQ,OAAO,CAAA;AAAA,YAC5D,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_bui-Select__c75960c577,\n  .Select_bui-SelectPopover__c75960c577 {\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_bui-SelectPopover__c75960c577 {\n    min-width: var(--trigger-width);\n  }\n\n  .Select_bui-SelectTrigger__c75960c577 {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: 1px solid var(--bui-border-2);\n    background-color: var(--bui-bg-neutral-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_bui-Select__c75960c577[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Select_bui-Select__c75960c577[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_bui-Select__c75960c577[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Select_bui-Select__c75960c577[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    .Select_bui-Select__c75960c577[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      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectTriggerChevron__c75960c577 {\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_bui-SelectValue__c75960c577 {\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_bui-SelectItemIndicator__c75960c577 {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectList__c75960c577: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_bui-SelectItem__c75960c577 {\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-neutral-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_bui-SelectItemIndicator__c75960c577 {\n      opacity: 1;\n    }\n  }\n\n  .Select_bui-SelectItemIndicator__c75960c577 {\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_bui-SelectItemLabel__c75960c577 {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Select_bui-SelectSearchWrapper__c75960c577 {\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-2);\n  }\n\n  .Select_bui-SelectSearch__c75960c577 {\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_bui-SelectSearchClear__c75960c577 {\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_bui-SelectNoResults__c75960c577 {\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_bui-Select__c75960c577","bui-SelectPopover":"Select_bui-SelectPopover__c75960c577","bui-SelectTrigger":"Select_bui-SelectTrigger__c75960c577","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__c75960c577","bui-SelectValue":"Select_bui-SelectValue__c75960c577","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__c75960c577","bui-SelectList":"Select_bui-SelectList__c75960c577","bui-SelectItem":"Select_bui-SelectItem__c75960c577","bui-SelectItemLabel":"Select_bui-SelectItemLabel__c75960c577","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__c75960c577","bui-SelectSearch":"Select_bui-SelectSearch__c75960c577","bui-SelectSearchClear":"Select_bui-SelectSearchClear__c75960c577","bui-SelectNoResults":"Select_bui-SelectNoResults__c75960c577"};
+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_bui-Select__3583c852a4,\n  .Select_bui-SelectPopover__3583c852a4 {\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_bui-SelectPopover__3583c852a4 {\n    min-width: var(--trigger-width);\n  }\n\n  .Select_bui-SelectTrigger__3583c852a4 {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: 1px solid var(--bui-border-2);\n    background-color: var(--bui-bg-neutral-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_bui-Select__3583c852a4[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Select_bui-Select__3583c852a4[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_bui-Select__3583c852a4[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Select_bui-Select__3583c852a4[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    .Select_bui-Select__3583c852a4[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      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectTriggerChevron__3583c852a4 {\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_bui-SelectValue__3583c852a4 {\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_bui-SelectItemIndicator__3583c852a4 {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectList__3583c852a4 {\n    overflow: auto;\n    min-height: 0;\n\n    &: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\n  .Select_bui-SelectItem__3583c852a4 {\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-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\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-neutral-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_bui-SelectItemIndicator__3583c852a4 {\n      opacity: 1;\n    }\n  }\n\n  .Select_bui-SelectItemIndicator__3583c852a4 {\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_bui-SelectItemLabel__3583c852a4 {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Select_bui-SelectSearchWrapper__3583c852a4 {\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-2);\n  }\n\n  .Select_bui-SelectSearch__3583c852a4 {\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_bui-SelectSearchClear__3583c852a4 {\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_bui-SelectNoResults__3583c852a4 {\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_bui-Select__3583c852a4","bui-SelectPopover":"Select_bui-SelectPopover__3583c852a4","bui-SelectTrigger":"Select_bui-SelectTrigger__3583c852a4","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__3583c852a4","bui-SelectValue":"Select_bui-SelectValue__3583c852a4","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__3583c852a4","bui-SelectList":"Select_bui-SelectList__3583c852a4","bui-SelectItem":"Select_bui-SelectItem__3583c852a4","bui-SelectItemLabel":"Select_bui-SelectItemLabel__3583c852a4","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__3583c852a4","bui-SelectSearch":"Select_bui-SelectSearch__3583c852a4","bui-SelectSearchClear":"Select_bui-SelectSearchClear__3583c852a4","bui-SelectNoResults":"Select_bui-SelectNoResults__3583c852a4"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -2,19 +2,14 @@ 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 { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { SelectContentDefinition } from './definition.esm.js';
 import { SelectListBox } from './SelectListBox.esm.js';
-import styles from './Select.module.css.esm.js';
 
-function SelectContent({
-  searchable,
-  searchPlaceholder = "Search...",
-  options
-}) {
+function SelectContent(props) {
   const { contains } = useFilter({ sensitivity: "base" });
-  const { classNames } = useStyles(SelectDefinition);
+  const { ownProps } = useDefinition(SelectContentDefinition, props);
+  const { classes, searchable, searchPlaceholder, options } = ownProps;
   if (!searchable) {
     return /* @__PURE__ */ jsx(SelectListBox, { options });
   }
@@ -23,29 +18,11 @@ function SelectContent({
       SearchField,
       {
         autoFocus: true,
-        className: clsx(
-          classNames.searchWrapper,
-          styles[classNames.searchWrapper]
-        ),
+        className: classes.root,
         "aria-label": searchPlaceholder,
         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(Input, { placeholder: searchPlaceholder, className: classes.search }),
+          /* @__PURE__ */ jsx(Button, { className: classes.searchClear, children: /* @__PURE__ */ jsx(RiCloseCircleLine, {}) })
         ]
       }
     ),

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

@@ -1 +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        aria-label={searchPlaceholder}\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,QACA,YAAA,EAAY,iBAAA;AAAA,QAEZ,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;;;;"}
+{"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 { useDefinition } from '../../hooks/useDefinition';\nimport { SelectContentDefinition } from './definition';\nimport { SelectListBox } from './SelectListBox';\nimport type { Option } from './types';\n\ninterface SelectContentProps {\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  options?: Array<Option>;\n}\n\nexport function SelectContent(props: SelectContentProps) {\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { ownProps } = useDefinition(SelectContentDefinition, props);\n  const { classes, searchable, searchPlaceholder, options } = ownProps;\n\n  if (!searchable) {\n    return <SelectListBox options={options} />;\n  }\n\n  return (\n    <Autocomplete filter={contains}>\n      <SearchField\n        autoFocus\n        className={classes.root}\n        aria-label={searchPlaceholder}\n      >\n        <Input placeholder={searchPlaceholder} className={classes.search} />\n        <Button className={classes.searchClear}>\n          <RiCloseCircleLine />\n        </Button>\n      </SearchField>\n      <SelectListBox options={options} />\n    </Autocomplete>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAmCO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,OAAA,EAAS,UAAA,EAAY,iBAAA,EAAmB,SAAQ,GAAI,QAAA;AAE5D,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,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,YAAA,EAAY,iBAAA;AAAA,QAEZ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,WAAA,EAAa,iBAAA,EAAmB,SAAA,EAAW,QAAQ,MAAA,EAAQ,CAAA;AAAA,8BACjE,MAAA,EAAA,EAAO,SAAA,EAAW,QAAQ,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB;AAAA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,iBAAc,OAAA,EAAkB;AAAA,GAAA,EACnC,CAAA;AAEJ;;;;"}

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

@@ -1,54 +1,31 @@
 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';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { SelectListBoxDefinition } from './definition.esm.js';
 
 const NoResults = () => {
-  const { classNames } = useStyles(SelectDefinition);
-  return /* @__PURE__ */ jsx("div", { className: clsx(classNames.noResults, styles[classNames.noResults]), children: "No results found." });
+  const { ownProps } = useDefinition(SelectListBoxDefinition, {});
+  const { classes } = ownProps;
+  return /* @__PURE__ */ jsx("div", { className: classes.noResults, children: "No results found." });
 };
-function SelectListBox({ options, ...props }) {
-  const { classNames } = useStyles(SelectDefinition, props);
-  return /* @__PURE__ */ jsx(
-    ListBox,
+function SelectListBox(props) {
+  const { ownProps } = useDefinition(SelectListBoxDefinition, props);
+  const { classes, options } = ownProps;
+  return /* @__PURE__ */ jsx(ListBox, { className: classes.root, renderEmptyState: () => /* @__PURE__ */ jsx(NoResults, {}), children: options?.map((option) => /* @__PURE__ */ jsxs(
+    ListBoxItem,
     {
-      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
-      ))
-    }
-  );
+      id: option.value,
+      textValue: option.label,
+      className: classes.item,
+      isDisabled: option.disabled,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classes.itemIndicator, children: /* @__PURE__ */ jsx(RiCheckLine, {}) }),
+        /* @__PURE__ */ jsx(Text, { slot: "label", className: classes.itemLabel, children: option.label })
+      ]
+    },
+    option.value
+  )) });
 }
 
 export { SelectListBox };

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

@@ -1 +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;;;;"}
+{"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 { useDefinition } from '../../hooks/useDefinition';\nimport { SelectListBoxDefinition } from './definition';\nimport type { Option } from './types';\n\ninterface SelectListBoxProps {\n  options?: Array<Option>;\n}\n\nconst NoResults = () => {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, {});\n  const { classes } = ownProps;\n\n  return <div className={classes.noResults}>No results found.</div>;\n};\n\nexport function SelectListBox(props: SelectListBoxProps) {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, props);\n  const { classes, options } = ownProps;\n\n  return (\n    <ListBox className={classes.root} renderEmptyState={() => <NoResults />}>\n      {options?.map(option => (\n        <ListBoxItem\n          key={option.value}\n          id={option.value}\n          textValue={option.label}\n          className={classes.item}\n          isDisabled={option.disabled}\n        >\n          <div className={classes.itemIndicator}>\n            <RiCheckLine />\n          </div>\n          <Text slot=\"label\" className={classes.itemLabel}>\n            {option.label}\n          </Text>\n        </ListBoxItem>\n      ))}\n    </ListBox>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA0BA,MAAM,YAAY,MAAM;AACtB,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,uBAAA,EAAyB,EAAE,CAAA;AAC9D,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,WAAW,QAAA,EAAA,mBAAA,EAAiB,CAAA;AAC7D,CAAA;AAEO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,QAAA;AAE7B,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAM,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EAClE,QAAA,EAAA,OAAA,EAAS,GAAA,CAAI,CAAA,MAAA,qBACZ,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MAEC,IAAI,MAAA,CAAO,KAAA;AAAA,MACX,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,YAAY,MAAA,CAAO,QAAA;AAAA,MAEnB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,aAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,eAAY,CAAA,EACf,CAAA;AAAA,wBACA,GAAA,CAAC,QAAK,IAAA,EAAK,OAAA,EAAQ,WAAW,OAAA,CAAQ,SAAA,EACnC,iBAAO,KAAA,EACV;AAAA;AAAA,KAAA;AAAA,IAXK,MAAA,CAAO;AAAA,GAaf,CAAA,EACH,CAAA;AAEJ;;;;"}