diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx index 1046857b4d..eef9620207 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx +++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx @@ -13,9 +13,10 @@ export const CompactTableMobile: FC = ({ data, fields, isLoading = false, + variant, }) => { return data.map((item, idx) => ( -
+
{fields.map((field, idx) => (
{field.label} diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts index 47337910e5..ff4866e014 100644 --- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts +++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts @@ -1,12 +1,31 @@ -import { atoms, style, tokens } from './../../../styles'; +import { atoms, recipe, style, tokens } from './../../../styles'; -export const sectionClass = style([ - atoms({ - padding: 'n6', - backgroundColor: 'base.default', - marginBlockEnd: 'md', - }), -]); +export const sectionClass = recipe({ + base: [ + atoms({ + marginBlockEnd: 'n2', + }), + ], + variants: { + variant: { + default: [ + atoms({ + padding: 'n6', + backgroundColor: 'base.default', + }), + ], + open: [ + atoms({ + paddingBlock: 'n3', + paddingInline: 'n4', + border: 'hairline', + borderRadius: 'sm', + backgroundColor: 'layer.default', + }), + ], + }, + }, +}); export const headerClass = style([ atoms({