@tcn/ui 0.0.2 → 0.0.4

package/src/stacks/h_stack.stories.tsx

@@ -1,22 +1,26 @@
 import React from 'react';
 import { Meta } from '@storybook/react-vite';
 import { Circle } from './story_components/circle.js';
-import { HStack, HStackProps } from './h_stack.js';
-import { HorizontalBorder } from './story_components/horizontal_border.js';
+import { HStack as HStackComponent, type HStackProps } from './h_stack.js';
 import { Spacer } from './spacer.js';
 import { Rect } from './story_components/rect.js';
-import { ZStack } from './z_stack.js';
+import { StyleBox } from './story_components/style_box.js';
 
 const meta: Meta<HStackProps> = {
-  title: 'HStack',
-  component: HStack,
+  title: 'Stacks/HStack',
+  component: HStackComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A horizontal stack component that can be used to arrange elements horizontally.',
+      },
+    },
+  },
   args: {
-    minWidth: '400px',
     width: '400px',
-    maxWidth: '400px',
-    minHeight: '150px',
     height: '150px',
-    maxHeight: '150px',
   },
   argTypes: {
     as: { table: { disable: true } },
@@ -26,12 +30,12 @@ const meta: Meta<HStackProps> = {
     inline: { table: { disable: true } },
     style: { table: { disable: true } },
     overflowX: {
-      options: ['auto', 'hidden', 'visible'],
-      control: { type: 'radio' },
+      options: [undefined, 'auto', 'scroll', 'hidden', 'visible'],
+      control: { type: 'select' },
     },
     overflowY: {
-      options: ['auto', 'hidden', 'visible'],
-      control: { type: 'radio' },
+      options: [undefined, 'hidden', 'visible'],
+      control: { type: 'select' },
     },
     vAlign: {
       options: ['start', 'center', 'end'],
@@ -41,67 +45,108 @@ const meta: Meta<HStackProps> = {
       options: ['start', 'center', 'end'],
       control: { type: 'radio' },
     },
+    width: {
+      control: { type: 'text' },
+    },
+    minWidth: {
+      control: { type: 'text' },
+    },
+    maxWidth: {
+      control: { type: 'text' },
+    },
+    height: {
+      control: { type: 'text' },
+    },
+    minHeight: {
+      control: { type: 'text' },
+    },
+    maxHeight: {
+      control: { type: 'text' },
+    },
+    allowFlow: {
+      control: { type: 'boolean' },
+    },
+    gap: {
+      control: { type: 'text' },
+    },
+    growWeight: {
+      control: { type: 'number' },
+    },
+    shrinkWeight: {
+      control: { type: 'number' },
+    },
   },
 };
 
 export default meta;
 
-export function Default(props: HStackProps) {
+export function HStack(props: HStackProps) {
   return (
-    <ZStack>
-      <HorizontalBorder>
-        <HStack {...props}>
-          <Rect
-            width="75px"
-            height="75px"
-            onClick={() => {
-              // biome-ignore lint/suspicious/noConsole: Storybook
-              console.log('hello');
-            }}
-          />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-        </HStack>
-      </HorizontalBorder>
-    </ZStack>
+    <StyleBox border="1px dashed #ccc" backgroundColor="white">
+      <HStackComponent {...props}>
+        <Rect
+          width="75px"
+          height="75px"
+          onClick={() => {
+            // biome-ignore lint/suspicious/noConsole: Storybook
+            console.log('hello');
+          }}
+        />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+      </HStackComponent>
+    </StyleBox>
   );
 }
 
+HStack.storyName = 'HStack';
+
 export function ManyChildren(props: HStackProps) {
   return (
-    <ZStack>
-      <HorizontalBorder>
-        <HStack {...props} height="auto">
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-          <Spacer width="25px" />
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-          <Spacer width="25px" />
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-          <Spacer width="25px" />
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-          <Spacer width="25px" />
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-        </HStack>
-      </HorizontalBorder>
-    </ZStack>
+    <StyleBox
+      border="1px dashed #ccc"
+      backgroundColor="white"
+      width="100%"
+      overflowX="auto"
+    >
+      <HStackComponent height="auto" {...props}>
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+        <Spacer width="25px" />
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+        <Spacer width="25px" />
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+        <Spacer width="25px" />
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+        <Spacer width="25px" />
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+      </HStackComponent>
+    </StyleBox>
   );
 }
 
 export function Padding() {
   return (
-    <HStack height="auto" style={{ border: '1px dashed #ccc' }} padding="30px">
-      <Circle></Circle>
-      <Circle></Circle>
-    </HStack>
+    <StyleBox
+      border="1px dashed #ccc"
+      backgroundColor="white"
+      width="100%"
+      overflowX="auto"
+    >
+      {' '}
+      <HStackComponent height="auto" padding="30px">
+        <Circle></Circle>
+        <Circle></Circle>
+      </HStackComponent>
+    </StyleBox>
   );
 }

package/src/stacks/h_stack.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import { removeUndefinedProperties } from './utils/remove_undefined_properties.js';
 import { CommonProps } from './types/common.js';
@@ -96,7 +96,7 @@ export const HStack = React.forwardRef(function HStack<T extends HTMLElement>(
   return (
     <As
       ref={ref}
-      className={classNames(styles['h-stack'], className, 'h-stack', 'stack')}
+      className={clsx(styles['h-stack'], className, 'h-stack', 'stack')}
       style={finalStyles}
       data-inline={Boolean(inline)}
       data-allow-flow={Boolean(allowFlow)}

package/src/stacks/spacer.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 
 export interface SpacerProps {
@@ -41,7 +41,7 @@ export const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(function Spa
         zIndex: 1,
         flex,
       }}
-      className={classNames('spacer', className)}
+      className={clsx('spacer', className)}
     ></div>
   );
 });

package/src/stacks/stack.module.css

@@ -20,7 +20,8 @@ HStack CSS
   display: inline-grid;
 }
 
-.box[data-height="flex"] {
+.box[data-height="flex"],
+.box[data-height="fill"] {
   height: auto;
 }
 
@@ -127,13 +128,30 @@ HStack CSS
 :where(.h-stack > .h-stack[data-width="flex"]),
 :where(.h-stack > .z-stack[data-width="flex"]),
 :where(.h-stack > .v-stack[data-width="flex"]),
-:where(.h-stack > .stack-flex[data-width="flex"]) {
+:where(.h-stack > .stack-flex[data-width="flex"]),
+:where(.h-stack > .h-stack[data-width="fill"]),
+:where(.h-stack > .z-stack[data-width="fill"]),
+:where(.h-stack > .v-stack[data-width="fill"]),
+:where(.h-stack > .stack-flex[data-width="fill"]),
+:where(.h-stack > .box[data-width="fill"]) {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0%;
   width: auto;
 }
 
+:where(.h-stack > .h-stack[data-height="flex"]),
+:where(.h-stack > .z-stack[data-height="flex"]),
+:where(.h-stack > .v-stack[data-height="flex"]),
+:where(.h-stack > .stack-flex[data-height="flex"]),
+:where(.h-stack > .h-stack[data-height="fill"]),
+:where(.h-stack > .z-stack[data-height="fill"]),
+:where(.h-stack > .v-stack[data-height="fill"]),
+:where(.h-stack > .stack-flex[data-height="fill"]),
+:where(.h-stack > .box[data-height="fill"]) {
+  height: 100%;
+}
+
 :where(.reveal-layout .h-stack:after),
 :where(.reveal-h-stack .h-stack:after) {
   content: "";
@@ -189,17 +207,38 @@ HStack CSS
 :where(.v-stack > .h-stack[data-height="flex"]),
 :where(.v-stack > .z-stack[data-height="flex"]),
 :where(.v-stack > .v-stack[data-height="flex"]),
-:where(.v-stack > .stack-flex[data-height="flex"]) {
+:where(.v-stack > .stack-flex[data-height="flex"]),
+:where(.v-stack > .h-stack[data-height="fill"]),
+:where(.v-stack > .z-stack[data-height="fill"]),
+:where(.v-stack > .v-stack[data-height="fill"]),
+:where(.v-stack > .stack-flex[data-height="fill"]),
+:where(.v-stack > .box[data-height="fill"]) {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0%;
   height: auto;
 }
 
+:where(.v-stack > .h-stack[data-width="flex"]),
+:where(.v-stack > .z-stack[data-width="flex"]),
+:where(.v-stack > .v-stack[data-width="flex"]),
+:where(.v-stack > .stack-flex[data-width="flex"]),
+:where(.v-stack > .h-stack[data-width="fill"]),
+:where(.v-stack > .z-stack[data-width="fill"]),
+:where(.v-stack > .v-stack[data-width="fill"]),
+:where(.v-stack > .stack-flex[data-width="fill"]),
+:where(.v-stack > .box[data-width="fill"]) {
+  width: 100%;
+}
+
 :where(.v-stack[data-height="auto"] > .h-stack[data-height="flex"]),
 :where(.v-stack[data-height="auto"] > .z-stack[data-height="flex"]),
 :where(.v-stack[data-height="auto"] > .v-stack[data-height="flex"]),
-:where(.v-stack[data-height="auto"] > .stack-flex[data-height="flex"]) {
+:where(.v-stack[data-height="auto"] > .stack-flex[data-height="flex"]),
+:where(.v-stack[data-height="auto"] > .h-stack[data-height="fill"]),
+:where(.v-stack[data-height="auto"] > .z-stack[data-height="fill"]),
+:where(.v-stack[data-height="auto"] > .v-stack[data-height="fill"]),
+:where(.v-stack[data-height="auto"] > .stack-flex[data-height="fill"]) {
   flex-basis: auto;
 }
 
@@ -259,12 +298,18 @@ ZStack CSS
 
 :where(.z-stack > .h-stack[data-height="flex"]),
 :where(.z-stack > .v-stack[data-height="flex"]),
+:where(.z-stack > .h-stack[data-height="fill"]),
+:where(.z-stack > .v-stack[data-height="fill"]),
+:where(.z-stack > .stack-flex[data-height="fill"]),
 :where(.z-stack > .stack-flex[data-height="default"]) {
   height: 100%;
 }
 
 :where(.z-stack > .h-stack[data-width="flex"]),
 :where(.z-stack > .v-stack[data-width="flex"]),
+:where(.z-stack > .h-stack[data-width="fill"]),
+:where(.z-stack > .v-stack[data-width="fill"]),
+:where(.z-stack > .stack-flex[data-width="fill"]),
 :where(.z-stack > .stack-flex[data-width="default"]) {
   width: 100%;
 }
@@ -311,7 +356,11 @@ Defaults CSS
 :where(.h-stack[data-width="auto"] > .h-stack[data-width="flex"]),
 :where(.h-stack[data-width="auto"] > .z-stack[data-width="flex"]),
 :where(.h-stack[data-width="auto"] > .v-stack[data-width="flex"]),
-:where(.h-stack[data-width="auto"] > .stack-flex[data-width="flex"]) {
+:where(.h-stack[data-width="auto"] > .stack-flex[data-width="flex"]),
+:where(.h-stack[data-width="auto"] > .h-stack[data-width="fill"]),
+:where(.h-stack[data-width="auto"] > .z-stack[data-width="fill"]),
+:where(.h-stack[data-width="auto"] > .v-stack[data-width="fill"]),
+:where(.h-stack[data-width="auto"] > .stack-flex[data-width="fill"]) {
   flex-basis: auto;
 }
 

package/src/stacks/stacks.mdx

@@ -34,14 +34,14 @@ Here is the list of components that you will use with stacks:
 ### HStack
 
 This example uses `HStack` to arrange elements horizontally. It places a `Box` on either
-side and a `Box` with width set to `flex` in the middle, creating a simple, evenly spaced layout. The `Box`
-components are set to occupy 25% of the width each, while the `Box` with width set to `flex` automatically
+side and a `Box` with width set to `fill` in the middle, creating a simple, evenly spaced layout. The `Box`
+components are set to occupy 25% of the width each, while the `Box` with width set to `fill` automatically
 takes up the remaining space.
 
 <StyleBox height="auto" padding="10px" border="1px solid #ccc">
   <HStack height="100px">
     <Rect color="#abdef0" width="25%">25%</Rect>
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Rect color="#abdef0" width="25%">25%</Rect>
   </HStack>
 </StyleBox>
@@ -49,22 +49,22 @@ takes up the remaining space.
 ```tsx
 <HStack height="100px">
   <Box width="25%">25%</Box>
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Box width="25%">25%</Box>
 </HStack>
 ```
 
 ---
 
-Here, two `Box` components with width set to `flex` are placed between `Box` elements. Each `Box` will
-evenly share the available space between them, making it ideal for creating flexible
+Here, two `Box` components with width set to `fill` are placed between `Box` elements. Each `Box` will
+evenly share the available space between them, making it ideal for creating fillible
 layouts where multiple components need equal space.
 
 <StyleBox height="auto" padding="10px" border="1px solid #ccc">
   <HStack height="100px">
     <Rect color="#abdef0" width="25%">25%</Rect>
-    <Rect color="#89d9c8" width="flex">flex</Rect>
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Rect color="#abdef0" width="25%">25%</Rect>
   </HStack>
 </StyleBox>
@@ -72,15 +72,15 @@ layouts where multiple components need equal space.
 ```tsx
 <HStack height="100px">
   <Box width="25%">25%</Box>
-  <Box width="flex">flex</Box>
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
+  <Box width="fill">fill</Box>
   <Box width="25%">25%</Box>
 </HStack>
 ```
 
 ---
 
-Using `Spacer` components between the `Box` components with width set to `flex` evenly distributes space
+Using `Spacer` components between the `Box` components with width set to `fill` evenly distributes space
 between the elements. This is useful when you want to create consistent gaps between
 components without needing to specify exact widths.
 
@@ -88,9 +88,9 @@ components without needing to specify exact widths.
   <HStack height="100px">
     <Rect color="#abdef0" width="25%">25%</Rect>
     <Spacer />
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Spacer />
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Spacer />
     <Rect color="#abdef0" width="25%">25%</Rect>
   </HStack>
@@ -100,9 +100,9 @@ components without needing to specify exact widths.
 <HStack height="100px">
   <Box width="25%">25%</Box>
   <Spacer />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer />
   <Box width="25%">25%</Box>
 </HStack>
@@ -118,9 +118,9 @@ automatically fill the available space.
   <HStack height="100px">
     <Rect width="25%" color="#abdef0">25%</Rect>
     <Spacer width="10px" />
-    <Rect width="flex" color="#89d9c8">flex</Rect>
+    <Rect width="fill" color="#89d9c8">fill</Rect>
     <Spacer width="10px" />
-    <Rect width="flex" color="#89d9c8">flex</Rect>
+    <Rect width="fill" color="#89d9c8">fill</Rect>
     <Spacer width="10px" />
     <Rect width="25%" color="#abdef0">25%</Rect>
   </HStack>
@@ -130,9 +130,9 @@ automatically fill the available space.
 <HStack height="100px">
   <Box width="25%">25%</Box>
   <Spacer width="10px" />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer width="10px" />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer width="10px" />
   <Box width="25%">25%</Box>
 </HStack>
@@ -143,13 +143,13 @@ automatically fill the available space.
 ### VStack
 
 This example uses `VStack` to arrange elements vertically. The `Box` components at the top
-and bottom occupy 25% of the height each, while the `Box` with height set to `flex` fills the remaining space,
+and bottom occupy 25% of the height each, while the `Box` with height set to `fill` fills the remaining space,
 making it ideal for creating header-body-footer layouts.
 
 <StyleBox height="400px" padding="10px" border="1px solid #ccc">
   <VStack height="100%">
     <Rect height="25%" color="#abdef0">25%</Rect>
-    <Rect height="flex" color="#89d9c8">flex</Rect>
+    <Rect height="fill" color="#89d9c8">fill</Rect>
     <Rect height="25%" color="#abdef0">25%</Rect>
   </VStack>
 </StyleBox>
@@ -157,7 +157,7 @@ making it ideal for creating header-body-footer layouts.
 ```tsx
 <VStack height="100%">
   <Box height="25%">25%</Box>
-  <Box height="flex">flex</Box>
+  <Box height="fill">fill</Box>
   <Box height="25%">25%</Box>
 </VStack>
 ```
@@ -170,7 +170,7 @@ prop to create consistent gaps between the header, body, and footer sections.
 <StyleBox height="400px" width="100%" padding="10px" border="1px solid #ccc">
   <VStack height="100%" gap="10px">
     <Rect height="40px" color="#abdef0">Header</Rect>
-    <Rect height="flex" color="#ededed">Body</Rect>
+    <Rect height="fill" color="#ededed">Body</Rect>
     <Rect height="40px" color="#abdef0">Footer</Rect>
   </VStack>
 </StyleBox>
@@ -178,7 +178,7 @@ prop to create consistent gaps between the header, body, and footer sections.
 ```tsx
 <VStack height="100%" gap="10px">
   <Box height="40px">Header</Box>
-  <Box height="flex">Body</Box>
+  <Box height="fill">Body</Box>
   <Box height="40px">Footer</Box>
 </VStack>
 ```
@@ -192,9 +192,9 @@ between the header, sidebar, and footer sections.
 <StyleBox height="400px" width="100%" padding="10px" border="1px solid #ccc">
   <VStack height="100%" gap="10px">
     <Rect height="40px" color="#abdef0">Header</Rect>
-    <HStack height="flex" gap="10px">
+    <HStack height="fill" gap="10px">
       <Rect width="200px" minWidth="200px" height="100%" zIndex="1" enableResizeOnEnd color="#ededed">Sidebar</Rect>
-      <Rect width="flex" height="100%" color="#ededed">
+      <Rect width="fill" height="100%" color="#ededed">
         <VStack width="100%" height="100%" overflowY="auto">
           <Grid itemHeight={100} itemWidth={100} columnAmount={4} gap="10px" padding="10px">
             <Rect width="100%" height="100%" color="#abdef0">1</Rect>
@@ -218,9 +218,9 @@ between the header, sidebar, and footer sections.
 ```tsx
 <VStack height="100%" gap="10px">
     <Box height="40px">Header</Box>
-    <HStack height="flex" gap="10px">
+    <HStack height="fill" gap="10px">
       <Box width="200px" minWidth="200px" height="100%" zIndex="1" enableResizeOnEnd>Sidebar</Box>
-      <VStack width="flex" height="100%" overflowY="auto">
+      <VStack width="fill" height="100%" overflowY="auto">
         <Grid itemHeight={100} itemWidth={100} columnAmount={4} gap="10px" padding="10px">
           <Box width="100%" height="100%">1</Box>
           <Box width="100%" height="100%">2</Box>

package/src/stacks/story_components/circle.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ZStack, ZStackProps } from '../z_stack.js';
 import styles from './circle.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface CircleProps extends ZStackProps {
   color?: string;
@@ -23,7 +23,7 @@ export const Circle = React.forwardRef(function Circle(
       style={finalStyle}
       width={size}
       height={size}
-      className={classNames(className, styles['circle'])}
+      className={clsx(className, styles['circle'])}
       {...props}
     />
   );

package/src/stacks/story_components/picture_placeholder.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 import styles from './picture_placeholder.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface PicturePlaceholderProps extends HTMLAttributes<SVGSVGElement> {
   color?: string;
@@ -29,7 +29,7 @@ export const PicturePlaceholder = React.forwardRef(function PicturePlaceholder(
       height={size}
       viewBox="0 0 16 16"
       xmlns="http://www.w3.org/2000/svg"
-      className={classNames(className, styles['picture-placeholder'])}
+      className={clsx(className, styles['picture-placeholder'])}
       style={finalStyle}
       {...props}
     >

package/src/stacks/story_components/rect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, BoxProps } from '../box/box.js';
 import styles from './rect.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface RectProps extends BoxProps {
   color?: string;
@@ -27,7 +27,7 @@ export const Rect = React.forwardRef(function Rect(
     <Box
       ref={ref}
       style={finalStyle}
-      className={classNames(className, styles['rect'])}
+      className={clsx(className, styles['rect'])}
       width={width}
       height={height}
       {...props}

package/src/stacks/types/styles.ts

@@ -3,10 +3,10 @@ import { Alignment } from './alignment.js';
 export interface StackStyleProps {
   hAlign?: Alignment;
   vAlign?: Alignment;
-  width?: 'default' | 'flex' | 'auto' | string | number;
+  width?: 'default' | 'flex' | 'auto' | 'fill' | string | number;
   minWidth?: string | number;
   maxWidth?: string | number;
-  height?: 'default' | 'flex' | 'auto' | string | number;
+  height?: 'default' | 'flex' | 'auto' | 'fill' | string | number;
   minHeight?: string | number;
   maxHeight?: string | number;
   growWeight?: number;

package/src/stacks/v_collapsible_box.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect } from 'react';
 import { useForkRef } from '../utils/index.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Box, BoxProps } from './box/box.js';
 import styles from './collapsible_box.module.css';
 import { useIsCollapsed } from './utils/use_is_collapsed.js';
@@ -41,7 +41,7 @@ export const VCollapsibleBox = React.forwardRef(function CollapsibleBox(
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);
         props.onHeightResizeEnd?.(height);
       }}
-      className={classNames(props.className, styles['collapsible-box'])}
+      className={clsx(props.className, styles['collapsible-box'])}
       children={children}
     />
   );