@fiscozen/checkbox 3.0.1 → 3.0.2

package/dist/src/FzCheckboxCard.vue.d.ts

@@ -1,240 +1,2 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    variant: {
-        type: import('vue').PropType<"horizontal">;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<string>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    subtitle: {
-        type: import('vue').PropType<string>;
-    };
-    imageAlt: {
-        type: import('vue').PropType<string>;
-    };
-    tooltipStatus: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipStatus>;
-    };
-    hasCheckbox: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    imageUrl: {
-        type: import('vue').PropType<string>;
-    };
-} | {
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    variant: {
-        type: import('vue').PropType<"vertical">;
-        required: true;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<string>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    subtitle: {
-        type: import('vue').PropType<string>;
-    };
-    imageAlt: {
-        type: import('vue').PropType<string>;
-    };
-    tooltipStatus: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipStatus>;
-    };
-    hasCheckbox: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    imageUrl: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    variant: {
-        type: import('vue').PropType<"horizontal">;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<string>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    subtitle: {
-        type: import('vue').PropType<string>;
-    };
-    imageAlt: {
-        type: import('vue').PropType<string>;
-    };
-    tooltipStatus: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipStatus>;
-    };
-    hasCheckbox: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    imageUrl: {
-        type: import('vue').PropType<string>;
-    };
-} | {
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    title: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-    };
-    variant: {
-        type: import('vue').PropType<"vertical">;
-        required: true;
-        default: string;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<string>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    subtitle: {
-        type: import('vue').PropType<string>;
-    };
-    imageAlt: {
-        type: import('vue').PropType<string>;
-    };
-    tooltipStatus: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipStatus>;
-    };
-    hasCheckbox: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    imageUrl: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-}>> & Readonly<{}>, {
-    variant: "horizontal";
-    hasCheckbox: boolean;
-} | {
-    variant: "vertical";
-    hasCheckbox: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
 export default _default;

package/dist/src/FzCheckboxGroup.vue.d.ts

@@ -1,75 +1,32 @@
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    options: {
-        type: import('vue').PropType<import('./types').ParentCheckbox[]>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    horizontal: {
-        type: import('vue').PropType<boolean>;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    size: {
-        type: import('vue').PropType<"sm" | "md">;
-    };
-    options: {
-        type: import('vue').PropType<import('./types').ParentCheckbox[]>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    horizontal: {
-        type: import('vue').PropType<boolean>;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
-    help?(_: {}): any;
-    default?(_: {
-        checkboxGroupProps: {
-            disabled: boolean;
-            error: boolean;
-            emphasis: boolean;
-            required: boolean;
-        };
-    }): any;
-    error?(_: {}): any;
-}>;
+import { FzCheckboxGroupProps } from './types';
+type __VLS_Props = FzCheckboxGroupProps;
+type __VLS_PublicProps = {
+    modelValue: (string | number | boolean)[];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        help?(_: {}): any;
+        default?(_: {
+            checkboxGroupProps: {
+                disabled: boolean;
+                error: boolean;
+                emphasis: boolean;
+                required: boolean;
+            };
+        }): any;
+        error?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: (string | number | boolean)[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: (string | number | boolean)[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/src/common.d.ts

@@ -1,5 +1,4 @@
 import { ComputedRef, InjectionKey, Ref } from 'vue';
-
 /**
  * Maps checkbox size variants to corresponding Tailwind CSS text size classes.
  *

package/dist/src/components/ErrorAlert.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+type __VLS_Props = {
     /**
      * Unique ID for the error alert element.
      * Used for aria-describedby relationships.
@@ -6,27 +6,19 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
      * @example "checkbox-123-error"
      */
     id: string;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    /**
-     * Unique ID for the error alert element.
-     * Used for aria-describedby relationships.
-     *
-     * @example "checkbox-123-error"
-     */
-    id: string;
-}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
     };
+    refs: {};
+    rootEl: any;
 };
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/src/components/FzCheckboxGroupOption.vue.d.ts

@@ -1,86 +1,11 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number | boolean>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipProps>;
-    };
-    indeterminate: {
-        type: import('vue').PropType<boolean>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    standalone: {
-        type: import('vue').PropType<boolean>;
-    };
-    ariaOwns: {
-        type: import('vue').PropType<string>;
-    };
-    checkboxId: {
-        type: import('vue').PropType<string>;
-    };
-    children: {
-        type: import('vue').PropType<import('../types').ChildCheckbox[]>;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<(string | number | boolean)[]>;
-    };
-    label: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import('vue').PropType<string | number | boolean>;
-    };
-    error: {
-        type: import('vue').PropType<boolean>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-    };
-    required: {
-        type: import('vue').PropType<boolean>;
-    };
-    tooltip: {
-        type: import('vue').PropType<import('@fiscozen/tooltip').FzTooltipProps>;
-    };
-    indeterminate: {
-        type: import('vue').PropType<boolean>;
-    };
-    emphasis: {
-        type: import('vue').PropType<boolean>;
-    };
-    standalone: {
-        type: import('vue').PropType<boolean>;
-    };
-    ariaOwns: {
-        type: import('vue').PropType<string>;
-    };
-    checkboxId: {
-        type: import('vue').PropType<string>;
-    };
-    children: {
-        type: import('vue').PropType<import('../types').ChildCheckbox[]>;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+import { ParentCheckbox } from '../types';
+type __VLS_Props = ParentCheckbox;
+type __VLS_PublicProps = {
+    modelValue: (string | number | boolean)[];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: (string | number | boolean)[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: (string | number | boolean)[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/src/types.d.ts

@@ -1,5 +1,4 @@
 import { FzTooltipProps, FzTooltipStatus } from '@fiscozen/tooltip';
-
 /**
  * Props for the FzCheckbox component.
  *

package/package.json

@@ -1,41 +1,41 @@
 {
   "name": "@fiscozen/checkbox",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Design System Checkbox and Checkbox Group component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/composables": "1.0.3",
     "@fiscozen/alert": "3.0.0",
+    "@fiscozen/composables": "1.0.3",
     "@fiscozen/badge": "3.0.0",
     "@fiscozen/tooltip": "3.0.1"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/icons": "^1.0.0"
+    "@fiscozen/icons": "^1.0.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^18.19.3",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vitest/coverage-v8": "^1.2.1",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/coverage-v8": "^4.1.1",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.0",
     "eslint": "^8.49.0",
     "jsdom": "^23.0.1",
     "prettier": "^3.0.3",
-    "typescript": "~5.3.0",
-    "vite": "^5.0.10",
-    "vite-plugin-dts": "^3.8.3",
-    "vitest": "^1.2.0",
-    "vue-tsc": "^1.8.25",
+    "typescript": "~5.7.0",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.1.1",
+    "vue-tsc": "^2.2.12",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCheckboxCard.vue

@@ -69,7 +69,7 @@ const computedIconColor = computed<string>(() => {
 
 const showImage = computed(() => props.variant === "vertical" || !!props.imageUrl);
 
-const staticInputClass: string = "w-0 h-0 peer fz-hidden-input";
+const staticInputClass: string = "peer h-0 w-0 absolute fz-hidden-input";
 
 const labelClass = computed(() => ({
   "flex-col": props.variant === "vertical",

package/src/FzCheckboxGroup.vue

@@ -91,7 +91,7 @@ const staticLabeldClass: string = "flex flex-col";
 const staticContainerClass: string = "flex flex-col gap-10";
 
 /** Base layout for the checkboxes container */
-const staticSlotContainerClass: string = "flex items-start";
+const staticSlotContainerClass: string = "flex self-stretch";
 
 /** Dynamic label classes based on spacing and disabled state */
 const computedLabelClass = computed<string[]>(() => [

package/src/__tests__/FzCheckboxCard.spec.ts

@@ -19,13 +19,11 @@ const createWrapper = (
 
 describe("FzCheckboxCard", () => {
   beforeEach(() => {
-    const mockIntersectionObserver = vi.fn();
-    mockIntersectionObserver.mockReturnValue({
-      observe: () => null,
-      unobserve: () => null,
-      disconnect: () => null,
+    window.IntersectionObserver = vi.fn().mockImplementation(function (this: any) {
+      this.observe = vi.fn();
+      this.unobserve = vi.fn();
+      this.disconnect = vi.fn();
     });
-    window.IntersectionObserver = mockIntersectionObserver;
 
     window.matchMedia = vi.fn().mockImplementation((query: string) => ({
       matches: false,

package/src/__tests__/FzCheckboxGroup.spec.ts

@@ -524,7 +524,7 @@ describe("FzCheckboxGroup", () => {
       await wrapper.vm.$nextTick();
       const container = wrapper.find("[role='group']");
       expect(container.classes()).toContain("flex");
-      expect(container.classes()).toContain("items-start");
+      expect(container.classes()).toContain("self-stretch");
     });
 
     it("should apply horizontal layout classes when horizontal is true", async () => {

package/src/__tests__/__snapshots__/FzCheckboxCard.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FzCheckboxCard > Rendering > should render correctly 1`] = `
-"<div data-v-7eaaa48f=""><input data-v-7eaaa48f="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="w-0 h-0 peer fz-hidden-input" tabindex="0" aria-checked="false" aria-required="false" aria-invalid="false" value="Checkbox"><label data-v-7eaaa48f="" class="relative flex block rounded-lg border-solid pt-12 px-12 cursor-pointer w-full flex-row pb-12 gap-12 border-1 border-grey-300 hover:bg-[#f9faff] peer-focus:outline peer-focus:bg-[#f9faff] peer-focus:outline-blue-200 peer-focus:outline-2 peer-checked:bg-[#f9faff]" for="fz-checkbox-100000000001-2a84k"><span data-v-7eaaa48f="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] shrink-0 text-grey-400 self-start" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span>
+"<div data-v-7eaaa48f=""><input data-v-7eaaa48f="" type="checkbox" id="fz-checkbox-100000000001-2a84k" class="peer h-0 w-0 absolute fz-hidden-input" tabindex="0" aria-checked="false" aria-required="false" aria-invalid="false" value="Checkbox"><label data-v-7eaaa48f="" class="relative flex block rounded-lg border-solid pt-12 px-12 cursor-pointer w-full flex-row pb-12 gap-12 border-1 border-grey-300 hover:bg-[#f9faff] peer-focus:outline peer-focus:bg-[#f9faff] peer-focus:outline-blue-200 peer-focus:outline-2 peer-checked:bg-[#f9faff]" for="fz-checkbox-100000000001-2a84k"><span data-v-7eaaa48f="" role="presentation" class="flex items-center justify-center w-[20px] h-[20px] shrink-0 text-grey-400 self-start" aria-hidden="true"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"></path></svg></span>
     <!--v-if-->
     <div data-v-7eaaa48f="" class="flex flex-row w-full justify-between min-w-0">
       <div data-v-7eaaa48f="" class="justify-center flex flex-col w-full grow-0 min-w-0 gap-4">