(
>
{icon && (
diff --git a/packages/canon/src/css/components.css b/packages/canon/src/css/components.css
index 407723fcc9..7feb065226 100644
--- a/packages/canon/src/css/components.css
+++ b/packages/canon/src/css/components.css
@@ -40,6 +40,7 @@
@import '../components/Tabs/Tabs.styles.css';
@import '../components/Text/styles.css';
@import '../components/TextField/TextField.styles.css';
+@import '../components/SearchField/SearchField.styles.css';
@import '../components/Tooltip/Tooltip.styles.css';
@import '../components/ScrollArea/ScrollArea.styles.css';
@import '../components/Select/Select.styles.css';
diff --git a/packages/canon/src/hooks/useResponsiveValue.ts b/packages/canon/src/hooks/useResponsiveValue.ts
deleted file mode 100644
index 206306566f..0000000000
--- a/packages/canon/src/hooks/useResponsiveValue.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Breakpoint } from '../types';
-import { useBreakpoint, breakpoints } from './useBreakpoint';
-
-type ResponsiveValue = string | Partial>;
-
-export const useResponsiveValue = (value: ResponsiveValue) => {
- const { breakpoint } = useBreakpoint();
-
- if (typeof value === 'object') {
- const index = breakpoints.findIndex(b => b.id === breakpoint);
-
- for (let i = index; i >= 0; i--) {
- if (value[breakpoints[i].id]) {
- return value[breakpoints[i].id] as string;
- }
- }
-
- // If no value is found for the current or smaller breakpoints, check from the smallest
- for (let i = 0; i < breakpoints.length; i++) {
- if (value[breakpoints[i].id]) {
- return value[breakpoints[i].id] as string;
- }
- }
- }
-
- return value;
-};
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index 3ad2181d6f..88063eab3c 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -48,6 +48,7 @@ export * from './components/TextField';
export * from './components/Tooltip';
export * from './components/Menu';
export * from './components/ScrollArea';
+export * from './components/SearchField';
export * from './components/Link';
export * from './components/Select';
export * from './components/Switch';
diff --git a/packages/canon/src/utils/componentDefinitions.ts b/packages/canon/src/utils/componentDefinitions.ts
index 581c8b66b4..aa941d303c 100644
--- a/packages/canon/src/utils/componentDefinitions.ts
+++ b/packages/canon/src/utils/componentDefinitions.ts
@@ -79,10 +79,10 @@ export const componentDefinitions = {
},
FieldLabel: {
classNames: {
- root: 'canon-FieldLabel',
- label: 'canon-FieldLabelLabel',
- secondaryLabel: 'canon-FieldLabelSecondaryLabel',
- description: 'canon-FieldLabelDescription',
+ root: 'canon-FieldLabelWrapper',
+ label: 'canon-FieldLabel',
+ secondaryLabel: 'canon-FieldSecondaryLabel',
+ description: 'canon-FieldDescription',
},
},
Flex: {
@@ -154,6 +154,12 @@ export const componentDefinitions = {
thumb: 'canon-ScrollAreaThumb',
},
},
+ SearchField: {
+ classNames: {
+ root: 'canon-SearchField',
+ clear: 'canon-InputClear',
+ },
+ },
Select: {
classNames: {
root: 'canon-Select',
@@ -220,9 +226,9 @@ export const componentDefinitions = {
TextField: {
classNames: {
root: 'canon-TextField',
- inputWrapper: 'canon-TextFieldInputWrapper',
- icon: 'canon-TextFieldIcon',
- input: 'canon-TextFieldInput',
+ inputWrapper: 'canon-InputWrapper',
+ input: 'canon-Input',
+ inputIcon: 'canon-InputIcon',
},
dataAttributes: {
invalid: [true, false] as const,