From 456a3666bcda8f7e940899d043dfea7439d3a1f9 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Tue, 24 Feb 2026 14:56:19 +0100
Subject: [PATCH] Migrate Container component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .../ui/src/components/Container/Container.tsx | 24 +++++++------------
 .../ui/src/components/Container/definition.ts | 14 ++++++++---
 .../ui/src/components/Container/index.tsx     |  2 +-
 packages/ui/src/components/Container/types.ts | 10 +++++---
 4 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/packages/ui/src/components/Container/Container.tsx b/packages/ui/src/components/Container/Container.tsx
index 7e3627f0b9..91c4870f54 100644
--- a/packages/ui/src/components/Container/Container.tsx
+++ b/packages/ui/src/components/Container/Container.tsx
@@ -15,34 +15,28 @@
  */
 
 import { forwardRef } from 'react';
-import { ContainerProps } from './types';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles';
+import type { ContainerProps } from './types';
+import { useDefinition } from '../../hooks/useDefinition';
 import { ContainerDefinition } from './definition';
-import styles from './Container.module.css';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   (props, ref) => {
-    const { classNames, utilityClasses, style, cleanedProps } = useStyles(
+    const { ownProps, restProps, utilityStyle } = useDefinition(
       ContainerDefinition,
       props,
     );
-
-    const { className, ...rest } = cleanedProps;
+    const { classes, style } = ownProps;
 
     return (
       <div
         ref={ref}
-        className={clsx(
-          classNames.root,
-          utilityClasses,
-          styles[classNames.root],
-          className,
-        )}
-        style={style}
-        {...rest}
+        className={classes.root}
+        style={{ ...utilityStyle, ...style }}
+        {...restProps}
       />
     );
   },
 );
+
+Container.displayName = 'Container';
diff --git a/packages/ui/src/components/Container/definition.ts b/packages/ui/src/components/Container/definition.ts
index 330e6adf2f..e9d7ce3238 100644
--- a/packages/ui/src/components/Container/definition.ts
+++ b/packages/ui/src/components/Container/definition.ts
@@ -14,15 +14,23 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { ContainerOwnProps } from './types';
+import styles from './Container.module.css';
 
 /**
  * Component definition for Container
  * @public
  */
-export const ContainerDefinition = {
+export const ContainerDefinition = defineComponent<ContainerOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Container',
   },
+  propDefs: {
+    children: {},
+    className: {},
+    style: {},
+  },
   utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],
-} as const satisfies ComponentDefinition;
+});
diff --git a/packages/ui/src/components/Container/index.tsx b/packages/ui/src/components/Container/index.tsx
index 73d1a0ab6e..d7e8eed01e 100644
--- a/packages/ui/src/components/Container/index.tsx
+++ b/packages/ui/src/components/Container/index.tsx
@@ -15,4 +15,4 @@
  */
 export { Container } from './Container';
 export { ContainerDefinition } from './definition';
-export type { ContainerProps } from './types';
+export type { ContainerOwnProps, ContainerProps } from './types';
diff --git a/packages/ui/src/components/Container/types.ts b/packages/ui/src/components/Container/types.ts
index 41de725b32..c6f9758fd2 100644
--- a/packages/ui/src/components/Container/types.ts
+++ b/packages/ui/src/components/Container/types.ts
@@ -13,17 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SpaceProps } from '../../types';
+import type { SpaceProps } from '../../types';
 
 /** @public */
-export interface ContainerProps {
+export type ContainerOwnProps = {
   children?: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
+};
+
+/** @public */
+export interface ContainerProps extends ContainerOwnProps {
   my?: SpaceProps['my'];
   mb?: SpaceProps['mb'];
   mt?: SpaceProps['mt'];
   py?: SpaceProps['py'];
   pb?: SpaceProps['pb'];
   pt?: SpaceProps['pt'];
-  style?: React.CSSProperties;
 }