@db-ux/react-core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/dist/utils/floating-components.js

@@ -60,9 +60,11 @@ export const handleDataOutside = (el) => {
     return dataOutsidePair;
 };
 export const handleFixedDropdown = (element, parent, placement) => {
-    // We skip this if we are in mobile it's already fixed
-    if (getComputedStyle(element).zIndex === '9999')
+    // We skip this if we are in mobile it's already fixed or if we don't have a floating dropdown
+    const computedStyle = getComputedStyle(element);
+    if (computedStyle.zIndex === '9999' || computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
         return;
+    }
     const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
     const fullWidth = element.dataset['width'] === 'full';
     if (fullWidth) {
@@ -104,27 +106,29 @@ export const getFloatingProps = (element, parent, placement) => {
     let childHeight = childRect.height;
     let childWidth = childRect.width;
     if (placement === 'bottom' || placement === 'top') {
-        childWidth = childWidth / 2;
+        childWidth = width > childWidth ? 0 : childWidth / 2;
     }
     if (placement === 'left' || placement === 'right') {
-        childHeight = childHeight / 2;
+        childHeight = height > childHeight ? 0 : childHeight / 2;
     }
-    const outsideBottom = bottom + childHeight > innerHeight;
-    const outsideTop = top - childHeight < 0;
-    const outsideLeft = left - childWidth < 0;
-    const outsideRight = right + childWidth > innerWidth;
+    const outsideBottom = Math.floor(bottom + childHeight) > innerHeight;
+    const outsideTop = Math.ceil(top - childHeight) < 0;
+    const outsideLeft = Math.ceil(left - childWidth) < 0;
+    const outsideRight = Math.floor(right + childWidth) > innerWidth;
     let correctedPlacement = placement;
     if (placement.startsWith('bottom')) {
         if (outsideBottom) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
-            if (outsideLeft && outsideRight) {
-                correctedPlacement = 'top';
-            }
-            else if (outsideLeft) {
-                correctedPlacement = 'top-start';
-            }
-            else if (outsideRight) {
-                correctedPlacement = 'top-end';
+            if (!outsideTop) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
+                if (outsideLeft && outsideRight) {
+                    correctedPlacement = 'top';
+                }
+                else if (outsideLeft) {
+                    correctedPlacement = 'top-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'top-end';
+                }
             }
         }
         else {
@@ -141,15 +145,17 @@ export const getFloatingProps = (element, parent, placement) => {
     }
     else if (placement.startsWith('top')) {
         if (outsideTop) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
-            if (outsideLeft && outsideRight) {
-                correctedPlacement = 'bottom';
-            }
-            else if (outsideLeft) {
-                correctedPlacement = 'bottom-start';
-            }
-            else if (outsideRight) {
-                correctedPlacement = 'bottom-end';
+            if (!outsideBottom) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
+                if (outsideLeft && outsideRight) {
+                    correctedPlacement = 'bottom';
+                }
+                else if (outsideLeft) {
+                    correctedPlacement = 'bottom-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'bottom-end';
+                }
             }
         }
         else {
@@ -166,15 +172,17 @@ export const getFloatingProps = (element, parent, placement) => {
     }
     else if (placement.startsWith('left')) {
         if (outsideLeft) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
-            if (outsideBottom && outsideTop) {
-                correctedPlacement = 'right';
-            }
-            else if (outsideBottom) {
-                correctedPlacement = 'right-end';
-            }
-            else if (outsideTop) {
-                correctedPlacement = 'right-start';
+            if (outsideRight) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
+                if (outsideBottom && outsideTop) {
+                    correctedPlacement = 'right';
+                }
+                else if (outsideBottom) {
+                    correctedPlacement = 'right-end';
+                }
+                else if (outsideTop) {
+                    correctedPlacement = 'right-start';
+                }
             }
         }
         else {
@@ -191,15 +199,17 @@ export const getFloatingProps = (element, parent, placement) => {
     }
     else if (correctedPlacement.startsWith('right')) {
         if (outsideRight) {
-            correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
-            if (outsideBottom && outsideTop) {
-                correctedPlacement = 'left';
-            }
-            else if (outsideBottom) {
-                correctedPlacement = 'left-end';
-            }
-            else if (outsideTop) {
-                correctedPlacement = 'left-start';
+            if (!outsideLeft) {
+                correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
+                if (outsideBottom && outsideTop) {
+                    correctedPlacement = 'left';
+                }
+                else if (outsideBottom) {
+                    correctedPlacement = 'left-end';
+                }
+                else if (outsideTop) {
+                    correctedPlacement = 'left-start';
+                }
             }
         }
         else {
@@ -225,13 +235,24 @@ export const getFloatingProps = (element, parent, placement) => {
         childWidth: childRect.width,
         correctedPlacement,
         innerWidth,
-        innerHeight
+        innerHeight,
+        outsideYBoth: outsideTop && outsideBottom,
+        outsideXBoth: outsideRight && outsideLeft
     };
 };
 export const handleFixedPopover = (element, parent, placement) => {
-    var _a;
-    const distance = (_a = getComputedStyle(element).getPropertyValue('--db-popover-distance')) !== null && _a !== void 0 ? _a : '0px';
-    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    var _a, _b, _c;
+    const computedStyle = getComputedStyle(element);
+    // We skip if we don't have a floating popover
+    if (computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
+        return;
+    }
+    let distance = computedStyle.getPropertyValue('--db-popover-distance');
+    if (!distance.length) {
+        distance = '0px';
+    }
+    const elementPlacement = (_c = (_b = (_a = element === null || element === void 0 ? void 0 : element.dataset) === null || _a === void 0 ? void 0 : _a['placement']) !== null && _b !== void 0 ? _b : placement) !== null && _c !== void 0 ? _c : 'bottom';
+    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight, outsideYBoth } = getFloatingProps(element, parent, elementPlacement);
     // Tooltip arrow position
     if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
         const diff = width / 2 / childWidth * 100;
@@ -300,6 +321,13 @@ export const handleFixedPopover = (element, parent, placement) => {
         element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
         element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
+    // In this case we are outside of top and bottom so we need to scroll
+    // We use the full height in this case
+    if (outsideYBoth) {
+        element.style.overflow = 'hidden auto';
+        element.style.insetBlock = distance;
+        element.style.maxBlockSize = `calc(${innerHeight}px - 2 * ${distance})`;
+    }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;
 };

package/dist/utils/navigation.d.ts

@@ -23,10 +23,6 @@ export declare class NavigationItemSafeTriangle {
     private getTriangleTipY;
     private hasMouseEnteredSubNavigation;
     private getTriangleCoordinates;
-    followByMouseEvent(event: MouseEvent): void;
+    followByMouseEvent(event: any): void;
 }
-declare const _default: {
-    isEventTargetNavigationItem: (event: unknown) => boolean;
-    NavigationItemSafeTriangle: typeof NavigationItemSafeTriangle;
-};
-export default _default;
+export declare const handleSubNavigationPosition: (element: HTMLElement, level?: number) => void;

package/dist/utils/navigation.js

@@ -1,12 +1,12 @@
-import { handleDataOutside } from './floating-components';
+import { handleDataOutside, handleFixedPopover } from './floating-components';
 export const isEventTargetNavigationItem = (event) => {
-    var _a, _b;
+    var _a;
     const { target } = event;
-    return Boolean(!((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('db-navigation-item-expand-button')) && ((_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('db-navigation-item')));
+    return Boolean((_a = target === null || target === void 0 ? void 0 : target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('db-navigation-item'));
 };
 export class NavigationItemSafeTriangle {
     constructor(element, subNavigation) {
-        var _a;
+        var _a, _b;
         this.parentSubNavigation = null;
         this.initialized = false;
         this.mouseX = 0;
@@ -16,13 +16,12 @@ export class NavigationItemSafeTriangle {
         if (!this.element || !this.subNavigation) {
             return;
         }
-        this.parentSubNavigation = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-sub-navigation');
+        this.parentSubNavigation = (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-navigation-item-group-menu')) !== null && _b !== void 0 ? _b : this.element;
         /*
          * only initiate if:
-         * 1. item is not at root navigation level
          * 2. item is not in the mobile navigation / within db-drawer
          */
-        if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
+        if (!this.element.closest('.db-drawer')) {
             this.init();
         }
     }
@@ -88,20 +87,10 @@ export class NavigationItemSafeTriangle {
         }
         return false;
     }
-    getTriangleCoordinates(variant) {
+    getTriangleCoordinates() {
         if (!this.triangleData) {
             return;
         }
-        if (variant === 'fill-gap') {
-            const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
-            const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
-            return {
-                lb: `${xStart} ${itemHeight}`,
-                lt: `${xStart} 0`,
-                rt: '100% 0',
-                rb: `100% ${itemHeight}`
-            };
-        }
         const tipX = this.getTriangleTipX();
         const tipY = this.getTriangleTipY();
         const lb = `${tipX}px ${tipY}px`;
@@ -120,7 +109,7 @@ export class NavigationItemSafeTriangle {
         this.mouseX = event.clientX - this.triangleData.itemRect.left;
         this.mouseY = event.clientY - this.triangleData.itemRect.top;
         const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
-        const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
+        const coordinates = this.getTriangleCoordinates();
         if (!coordinates) {
             return;
         }
@@ -130,7 +119,30 @@ export class NavigationItemSafeTriangle {
         }
     }
 }
-export default {
-    isEventTargetNavigationItem,
-    NavigationItemSafeTriangle
+export const handleSubNavigationPosition = (element, level = 0) => {
+    for (const navItem of Array.from(element.querySelectorAll('.db-navigation-item-group'))) {
+        const subNavigation = navItem.querySelector('.db-navigation-item-group-menu');
+        const button = navItem.querySelector('.db-navigation-item-group-expand-button');
+        if (subNavigation && button) {
+            /*
+             * This is set via css inside:
+             * `packages/components/src/components/navigation-item-group/navigation-item-group-menu-popover.scss`.
+             * We don't need to calculate the position of the menu as a popover.
+             */
+            const isMobile = getComputedStyle(subNavigation).getPropertyValue('--db-navigation-item-group-menu-mobile');
+            if (isMobile)
+                return;
+            if (level > 0 || subNavigation.dataset['open'] === 'horizontal') {
+                // Sub-Navigation should be opened horizontal
+                handleFixedPopover(subNavigation, button, 'right-start');
+                subNavigation.dataset['open'] = 'horizontal';
+            }
+            else {
+                // Sub-Navigation should be opened vertical
+                handleFixedPopover(subNavigation, button, 'bottom-start');
+                subNavigation.dataset['open'] = 'vertical';
+            }
+            handleSubNavigationPosition(subNavigation, level + 1);
+        }
+    }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "3.0.2-copilot2-e7bf98b",
+  "version": "3.0.2-shell2-badc28f",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -11,13 +11,11 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/",
-    "agent"
+    "dist/"
   ],
   "scripts": {
     "build": "npm-run-all tsc",
     "mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
-    "mv:agent": "cpr agent ../../build-outputs/react/agent -o",
     "mv:package.json": "cpr package.json ../../build-outputs/react/package.json --overwrite",
     "mv:readme": "cpr README.md ../../build-outputs/react/README.md --overwrite",
     "open:report": "npx playwright show-report",
@@ -40,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "3.0.2-copilot2-e7bf98b",
-    "@db-ux/core-foundations": "3.0.2-copilot2-e7bf98b"
+    "@db-ux/core-components": "3.0.2-shell2-badc28f",
+    "@db-ux/core-foundations": "3.0.2-shell2-badc28f"
   }
 }

package/agent/Accordion.md

@@ -1,47 +0,0 @@
-
-
-# Accordion Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBAccordion } from "@db-ux/react-react-core-components";
-
-function Accordion(props: any) {
-  function getItems() {
-    return [
-      {
-        text: "Item 1 Content",
-        headlinePlain: "Item 1",
-        disabled: false,
-      },
-      {
-        text: "Item 2 Content",
-        headlinePlain: "Item 2",
-        disabled: true,
-      },
-    ];
-  }
-
-  return (
-    <>
-      <h1>DBAccordion Documentation Examples</h1>
-      <h2>1. Default Accordion</h2>
-      <DBAccordion>Default Accordion</DBAccordion>
-      <h2>2. Behavior Variants</h2>
-      <DBAccordion behavior="multiple">Multiple Behavior</DBAccordion>
-      <DBAccordion behavior="single">Single Behavior</DBAccordion>
-      <h2>3. Initial Open Index</h2>
-      <DBAccordion initOpenIndex={[0, 1]}>Initial Open Index</DBAccordion>
-      <h2>4. Items</h2>
-      <DBAccordion items={getItems()}>Accordion with Items</DBAccordion>
-      <h2>5. Name Attribute</h2>
-      <DBAccordion name="accordion-name">With Name</DBAccordion>
-      <h2>6. Variant Types</h2>
-      <DBAccordion variant="divider">Divider Variant</DBAccordion>
-      <DBAccordion variant="card">Card Variant</DBAccordion>
-    </>
-  );
-}
-
-export default Accordion;
-```

package/agent/AccordionItem.md

@@ -1,36 +0,0 @@
-
-
-# AccordionItem Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBAccordionItem } from "@db-ux/react-react-core-components";
-
-function AccordionItem(props: any) {
-  return (
-    <>
-      <h1>DBAccordionItem Documentation Examples</h1>
-      <h2>1. Default Accordion Item</h2>
-      <DBAccordionItem>Default Accordion Item</DBAccordionItem>
-      <h2>2. Initial State</h2>
-      <DBAccordionItem defaultOpen>Initially Open</DBAccordionItem>
-      <DBAccordionItem defaultOpen={false}>Initially Closed</DBAccordionItem>
-      <h2>3. Disabled State</h2>
-      <DBAccordionItem disabled>Disabled Accordion Item</DBAccordionItem>
-      <h2>4. Headline Variants</h2>
-      <DBAccordionItem headline={<strong>Custom Headline</strong>}>
-        With Custom Headline
-      </DBAccordionItem>
-      <DBAccordionItem headlinePlain="Plain Headline">
-        With Plain Headline
-      </DBAccordionItem>
-      <h2>5. Toggle Event</h2>
-      <DBAccordionItem onToggle={(open) => console.log("Toggled:", open)}>
-        With Toggle Event
-      </DBAccordionItem>
-    </>
-  );
-}
-
-export default AccordionItem;
-```

package/agent/Badge.md

@@ -1,43 +0,0 @@
-
-
-# Badge Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBBadge } from "@db-ux/react-react-core-components";
-
-function Badge(props: any) {
-  return (
-    <>
-      <h1>DBBadge Documentation Examples</h1>
-      <h2>1. Default Badge</h2>
-      <DBBadge>Default Badge</DBBadge>
-      <h2>2. Semantic Variants</h2>
-      <DBBadge semantic="adaptive">Adaptive</DBBadge>
-      <DBBadge semantic="neutral">Neutral</DBBadge>
-      <DBBadge semantic="critical">Critical</DBBadge>
-      <DBBadge semantic="informational">Informational</DBBadge>
-      <DBBadge semantic="warning">Warning</DBBadge>
-      <DBBadge semantic="successful">Successful</DBBadge>
-      <h2>3. Sizes</h2>
-      <DBBadge size="small">Small</DBBadge>
-      <DBBadge size="medium">Medium</DBBadge>
-      <h2>4. Emphasis Variants</h2>
-      <DBBadge emphasis="weak">Weak Emphasis</DBBadge>
-      <DBBadge emphasis="strong">Strong Emphasis</DBBadge>
-      <h2>5. Placement Variants</h2>
-      <DBBadge placement="inline">Inline</DBBadge>
-      <DBBadge placement="corner-top-left">Corner Top Left</DBBadge>
-      <DBBadge placement="corner-top-right">Corner Top Right</DBBadge>
-      <DBBadge placement="corner-center-left">Corner Center Left</DBBadge>
-      <DBBadge placement="corner-center-right">Corner Center Right</DBBadge>
-      <DBBadge placement="corner-bottom-left">Corner Bottom Left</DBBadge>
-      <DBBadge placement="corner-bottom-right">Corner Bottom Right</DBBadge>
-      <h2>6. Custom Label</h2>
-      <DBBadge label="Custom Label">With Custom Label</DBBadge>
-    </>
-  );
-}
-
-export default Badge;
-```

package/agent/Brand.md

@@ -1,24 +0,0 @@
-
-
-# Brand Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBBrand } from "@db-ux/react-react-core-components";
-
-function Brand(props: any) {
-  return (
-    <>
-      <h1>DBBrand Documentation Examples</h1>
-      <h2>1. Default Brand</h2>
-      <DBBrand>Default Brand</DBBrand>
-      <h2>2. Icon Visibility</h2>
-      <DBBrand showIcon={false}>Icon Hidden</DBBrand>
-      <h2>3. Custom Text</h2>
-      <DBBrand text="Custom Brand Text">With Custom Text</DBBrand>
-    </>
-  );
-}
-
-export default Brand;
-```

package/agent/Button.md

@@ -1,60 +0,0 @@
-
-
-# Button Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBButton } from "@db-ux/react-react-core-components";
-
-function Button(props: any) {
-  return (
-    <>
-      <h1>DBButton Documentation Examples</h1>
-      <h2>1. Default Button</h2>
-      <DBButton>Button</DBButton>
-      <h2>2. Variants</h2>
-      <DBButton variant="filled">Filled</DBButton>
-      <DBButton variant="outlined">Outlined</DBButton>
-      <DBButton variant="ghost">Ghost</DBButton>
-      <DBButton variant="brand">Brand</DBButton>
-      <h2>3. Sizes</h2>
-      <DBButton size="small">Small</DBButton>
-      <DBButton size="medium">Medium</DBButton>
-      <h2>4. Icon Only</h2>
-      <DBButton icon="check" noText />
-      <h2>5. Disabled</h2>
-      <DBButton disabled>Disabled</DBButton>
-      <h2>6. Button Types</h2>
-      <DBButton type="button">Type=button</DBButton>
-      <DBButton type="submit">Type=submit</DBButton>
-      <DBButton type="reset">Type=reset</DBButton>
-      <h2>7. Form Association</h2>
-      <form id="example-form">
-        <input name="exampleInput" placeholder="Example input" />
-      </form>
-      <DBButton form="example-form" type="submit">
-        Submit Form
-      </DBButton>
-      <h2>8. Name &amp; Value</h2>
-      <DBButton name="testName" value="testValue">
-        Name/Value
-      </DBButton>
-      <h2>9. Width</h2>
-      <DBButton width="full">Full width</DBButton>
-      <DBButton width="auto">Auto width</DBButton>
-      <h2>10. Icon Visibility</h2>
-      <DBButton icon="check" showIcon={false}>
-        Icon Hidden
-      </DBButton>
-      <h2>11. Custom Class</h2>
-      <DBButton className="my-custom-class">Custom Class</DBButton>
-      <h2>12. Click Event</h2>
-      <DBButton onClick={(event) => alert("Button clicked!")}>
-        Click Me
-      </DBButton>
-    </>
-  );
-}
-
-export default Button;
-```

package/agent/Card.md

@@ -1,34 +0,0 @@
-
-
-# Card Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBCard } from "@db-ux/react-react-core-components";
-
-function Card(props: any) {
-  return (
-    <>
-      <h1>DBCard Documentation Examples</h1>
-      <h2>1. Default Card</h2>
-      <DBCard>Default Card</DBCard>
-      <h2>2. Behaviors</h2>
-      <DBCard behavior="static">Static</DBCard>
-      <DBCard behavior="interactive">Interactive</DBCard>
-      <h2>3. Elevation Levels</h2>
-      <DBCard elevationLevel="1">Elevation Level 1</DBCard>
-      <DBCard elevationLevel="2">Elevation Level 2</DBCard>
-      <DBCard elevationLevel="3">Elevation Level 3</DBCard>
-      <h2>4. Custom Class</h2>
-      <DBCard className="my-custom-class">Custom Class</DBCard>
-      <h2>5. Spacing</h2>
-      <DBCard spacing="medium">Medium Spacing</DBCard>
-      <DBCard spacing="small">Small Spacing</DBCard>
-      <DBCard spacing="large">Large Spacing</DBCard>
-      <DBCard spacing="none">No Spacing</DBCard>
-    </>
-  );
-}
-
-export default Card;
-```

package/agent/Checkbox.md

@@ -1,41 +0,0 @@
-
-
-# Checkbox Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBCheckbox } from "@db-ux/react-react-core-components";
-
-function Checkbox(props: any) {
-  return (
-    <>
-      <h1>DBCheckbox Documentation Examples</h1>
-      <h2>1. Default Checkbox</h2>
-      <DBCheckbox label="Default Checkbox" />
-      <h2>2. Indeterminate State</h2>
-      <DBCheckbox label="Indeterminate Checkbox" indeterminate />
-      <h2>3. Sizes</h2>
-      <DBCheckbox size="small" label="Small Checkbox" />
-      <DBCheckbox size="medium" label="Medium Checkbox" />
-      <h2>4. Validation States</h2>
-      <DBCheckbox validation="valid" label="Valid Checkbox" />
-      <DBCheckbox validation="invalid" label="Invalid Checkbox" />
-      <DBCheckbox validation="no-validation" label="No Validation Checkbox" />
-      <h2>5. Disabled State</h2>
-      <DBCheckbox label="Disabled Checkbox" disabled />
-      <h2>6. Message Property Example</h2>
-      <DBCheckbox
-        label="Checkbox with Message"
-        message="This is a helper message."
-      />
-      <h2>7. Change Event Example</h2>
-      <DBCheckbox
-        label="Change Event"
-        onChange={(event) => console.log("Change event:", event.target.checked)}
-      />
-    </>
-  );
-}
-
-export default Checkbox;
-```