@db-ux/react-core-components 4.5.0 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @db-ux/react-core-components
 
+## 4.5.1
+
+### Patch Changes
+
+- fix: issue with DBButton `noText` and `width="full"` not having fixed size - [see commit bc81b40](https://github.com/db-ux-design-system/core-web/commit/bc81b402660871d706b1bf8d3fbac6713a7c9670)
+
+- fix: issue with hover state when using DBPopover/Tooltip with animation - [see commit bc4801b](https://github.com/db-ux-design-system/core-web/commit/bc4801bf0b32d5dc4fd8e29626a6122e34fb6ada)
+
+- fix: Add null guard in `floating-components.ts` to prevent errors when `element` or `parent` is `null` inside tests. - [see commit ac50f97](https://github.com/db-ux-design-system/core-web/commit/ac50f97fa503ef4f62d37f316f3b5da0f6d7742e)
+
+- fix: issue with DBCustomSelect inside DBDrawer (or other `<dialog>` based) components, which has a problem with top-layer and focus - [see commit 6547ada](https://github.com/db-ux-design-system/core-web/commit/6547ada44844cbed1b8207db742a5119edb945f6)
+
+- fix(`input type="date"`): wrong padding and color for successful and critical state - [see commit 4f3db42](https://github.com/db-ux-design-system/core-web/commit/4f3db4262a652ac8d6353bd1a0a92a4a62b6ff86)
+
 ## 4.5.0
 
 ### Minor Changes

package/dist/components/custom-select/custom-select.js

@@ -324,10 +324,14 @@ function DBCustomSelectFn(props, component) {
             else if (detailsRef.current.open && event) {
                 if (event.relatedTarget) {
                     const relatedTarget = event.relatedTarget;
-                    if (!detailsRef.current.contains(relatedTarget)) {
+                    // We close if the focus is on something like a <button> etc. which is not inside the <details> element
+                    // Inside a <dialog> there is some focus problem because of the top-layer
+                    // We do not want to focus <dialog> itself
+                    if (!detailsRef.current.contains(relatedTarget) &&
+                        relatedTarget.localName !== "dialog") {
                         // We need to use delay here because the combination of `contains`
                         // and changing the DOM element causes a race condition inside browser
-                        delay(() => (detailsRef.current.open = false), 1);
+                        void delay(() => (detailsRef.current.open = false), 1);
                     }
                 }
             }
@@ -694,7 +698,7 @@ function DBCustomSelectFn(props, component) {
                     (_selectedLabels === null || _selectedLabels === void 0 ? void 0 : _selectedLabels.length) ? (React.createElement("span", { "data-visually-hidden": getBooleanAsString(props.selectedType === "tag"), id: _selectedLabelsId },
                         props.selectedPrefix ? (React.createElement("span", { "data-visually-hidden": "true" }, props.selectedPrefix)) : null,
                         _selectedLabels)) : null,
-                    props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option, index) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(option), onRemove: (event) => handleTagRemove(option, event), key: getOptionKey(option, "tag-") }, getOptionLabel(option)))))) : null),
+                    props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(option), onRemove: (event) => handleTagRemove(option, event), key: getOptionKey(option, "tag-") }, getOptionLabel(option)))))) : null),
                 React.createElement(DBCustomSelectDropdown, { width: props.dropdownWidth },
                     searchEnabled ? (React.createElement("div", null,
                         React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_e = props.searchLabel) !== null && _e !== void 0 ? _e : DEFAULT_LABEL, placeholder: (_f = props.searchPlaceholder) !== null && _f !== void 0 ? _f : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading

package/dist/utils/floating-components.js

@@ -60,6 +60,8 @@ export const handleDataOutside = (el) => {
     return dataOutsidePair;
 };
 export const handleFixedDropdown = (element, parent, placement) => {
+    if (!element || !parent)
+        return;
     // We skip this if we are in mobile it's already fixed
     if (getComputedStyle(element).zIndex === '9999')
         return;
@@ -249,6 +251,8 @@ const getAncestorHasCorrectedPlacement = (element) => {
 };
 export const handleFixedPopover = (element, parent, placement) => {
     var _a, _b;
+    if (!element || !parent)
+        return;
     const parentComputedStyles = getComputedStyle(parent);
     const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
     const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.5.0",
-    "@db-ux/core-foundations": "4.5.0"
+    "@db-ux/core-components": "4.5.1",
+    "@db-ux/core-foundations": "4.5.1"
   }
 }

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;
-```

package/agent/CustomSelect.md

@@ -1,81 +0,0 @@
-
-
-# CustomSelect Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBCustomSelect } from "@db-ux/react-react-core-components";
-
-function CustomSelect(props: any) {
-  function getOptions() {
-    return [
-      {
-        value: "1",
-        label: "Option 1",
-        selected: false,
-      },
-      {
-        value: "2",
-        label: "Option 2",
-        disabled: true,
-      },
-      {
-        value: "3",
-        label: "Option 3",
-      },
-    ];
-  }
-
-  return (
-    <>
-      <h1>DBCustomSelect Documentation Examples</h1>
-      <h2>1. Default Custom Select</h2>
-      <DBCustomSelect label="Default Custom Select" options={getOptions()} />
-      <h2>3. Multiple Select</h2>
-      <DBCustomSelect
-        label="Multiple Custom Select"
-        multiple
-        options={getOptions()}
-      />
-      <h2>4. Disabled State</h2>
-      <DBCustomSelect
-        label="Disabled Custom Select"
-        disabled
-        options={getOptions()}
-      />
-      <h2>5. Validation States</h2>
-      <DBCustomSelect
-        validMessage="This is a valid selection"
-        validation="valid"
-        label="Valid Custom Select"
-        options={getOptions()}
-      />
-      <DBCustomSelect
-        invalidMessage="This is an invalid selection"
-        validation="invalid"
-        label="Invalid Custom Select"
-        options={getOptions()}
-      />
-      <DBCustomSelect
-        validation="no-validation"
-        label="No Validation Custom Select"
-        options={getOptions()}
-      />
-      <h2>6. Change Event Example</h2>
-      <DBCustomSelect
-        label="Change Event"
-        onChange={(event) => console.log("Change event:", event.target.value)}
-        options={getOptions()}
-      />
-      <h2>7. Placeholder Example</h2>
-      <DBCustomSelect
-        label="Custom Select with Placeholder"
-        placeholder="Select an option"
-        options={getOptions()}
-      />
-    </>
-  );
-}
-
-export default CustomSelect;
-```

package/agent/Divider.md

@@ -1,32 +0,0 @@
-
-
-# Divider Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBDivider } from "@db-ux/react-react-core-components";
-
-function Divider(props: any) {
-  return (
-    <>
-      <h1>DBDivider Documentation Examples</h1>
-      <h2>1. Default Divider</h2>
-      <DBDivider />
-      <h2>2. Margin Variants</h2>
-      <DBDivider margin="none" />
-      <DBDivider margin="_" />
-      <h2>3. Orientation Variants</h2>
-      <DBDivider variant="horizontal" />
-      <DBDivider variant="vertical" />
-      <h2>4. Emphasis Variants</h2>
-      <DBDivider emphasis="weak" />
-      <DBDivider emphasis="strong" />
-      <h2>5. Width Variants</h2>
-      <DBDivider width="full" />
-      <DBDivider width="auto" />
-    </>
-  );
-}
-
-export default Divider;
-```

package/agent/Drawer.md

@@ -1,87 +0,0 @@
-## CSS Properties
-
-| CSS Variable | Default | CSS Property | Description | Example |
-| --- | --- | --- | --- | --- |
-| `--db-drawer-max-height` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-block-size | Sets the maximum height of the drawer | — |
-| `--db-drawer-header-padding-block-end` | `#{map.get($spacing, "block")}` | padding-block-end | Controls the bottom padding inside the drawer header | — |
-| `--db-drawer-content-padding-inline` | `#{map.get($spacing, "inline")}` | padding-inline | Controls left/right padding inside the drawer content area | — |
-| `--db-drawer-max-width` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-inline-size | Sets the maximum width of the drawer and some default values for the drawer | <pre>css - Wide drawer<br>.db-drawer-wide {<br>--db-drawer-max-width: 800px;<br>}<br>&lt;div class="db-drawer db-drawer-wide"&gt;<br>&lt;!-- wide drawer --&gt;<br>&lt;/div&gt;<br></pre> |
-
-
-# Drawer Examples (react)
-
-```tsx
-"use client";
-import * as React from "react";
-import { useState } from "react";
-import { DBButton } from "@db-ux/react-react-core-components";
-import { DBDrawer } from "@db-ux/react-react-core-components";
-
-function Drawer(props: any) {
-  const [open, setOpen] = useState<boolean>(() => false);
-
-  return (
-    <>
-      <h1>DBDrawer Documentation Examples</h1>
-      <h2>1. Default Drawer</h2>
-      <div>
-        <DBButton
-          onClick={(event) => {
-            setOpen(true);
-          }}
-        >
-          Open Me
-        </DBButton>
-        <DBDrawer
-          open={open}
-          onClose={(event) => {
-            setOpen(false);
-          }}
-          drawerHeader={<header>Optional drawer header</header>}
-        >
-          My Drawer content
-        </DBDrawer>
-      </div>
-      <h2>2. Drawer Variants</h2>
-      <div>
-        <DBButton
-          onClick={(event) => {
-            setOpen(true);
-          }}
-        >
-          Open Modal Drawer
-        </DBButton>
-        <DBDrawer
-          variant="modal"
-          open={open}
-          onClose={(event) => {
-            setOpen(false);
-          }}
-        >
-          Modal Drawer content
-        </DBDrawer>
-      </div>
-      <div>
-        <DBButton
-          onClick={(event) => {
-            setOpen(true);
-          }}
-        >
-          Open Inside Drawer
-        </DBButton>
-        <DBDrawer
-          variant="inside"
-          open={open}
-          onClose={(event) => {
-            setOpen(false);
-          }}
-        >
-          Inside Drawer content
-        </DBDrawer>
-      </div>
-    </>
-  );
-}
-
-export default Drawer;
-```

package/agent/Header.md

@@ -1,45 +0,0 @@
-
-
-# Header Examples (react)
-
-```tsx
-"use client";
-import * as React from "react";
-import { useState } from "react";
-import { DBNavigation } from "@db-ux/react-react-core-components";
-import { DBNavigationItem } from "@db-ux/react-react-core-components";
-import { DBHeader } from "@db-ux/react-react-core-components";
-
-function Header(props: any) {
-  const [drawerOpen, setDrawerOpen] = useState<boolean>(() => false);
-
-  return (
-    <>
-      <h1>DBHeader Documentation Examples</h1>
-      <h2>1. Default Header</h2>
-      <DBHeader
-        drawerOpen={drawerOpen}
-        onToggle={(open) => setDrawerOpen(open)}
-       brand={<DBBrand>My Awesome App</DBBrand>}
- metaNavigation={<><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink></>}
- primaryAction={<DBButton icon="magnifying_glass" variant="ghost" noText>Search</DBButton>}
- secondaryAction={<><DBButton icon="x_placeholder" variant="ghost" noText>Profile</DBButton><DBButton icon="alert" variant="ghost" noText>Notification</DBButton><DBButton icon="help" variant="ghost" noText>Help</DBButton></>}
- >
-        <DBNavigation>
-          <DBNavigationItem>
-            <a href="#">Navi-Item 1</a>
-          </DBNavigationItem>
-          <DBNavigationItem icon="x_placeholder">
-            <a href="#">Navi-Item 2</a>
-          </DBNavigationItem>
-          <DBNavigationItem disabled>
-            <a href="#">Navi-Item 3</a>
-          </DBNavigationItem>
-        </DBNavigation>
-      </DBHeader>
-    </>
-  );
-}
-
-export default Header;
-```

package/agent/Icon.md

@@ -1,31 +0,0 @@
-
-
-# Icon Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBIcon } from "@db-ux/react-react-core-components";
-
-function Icon(props: any) {
-  return (
-    <>
-      <h1>DBIcon Documentation Examples</h1>
-      <h2>1. Default Icon</h2>
-      <DBIcon>Default Icon</DBIcon>
-      <h2>2. Icon Variants</h2>
-      <DBIcon icon="user">User Icon</DBIcon>
-      <DBIcon icon="settings">Settings Icon</DBIcon>
-      <h2>3. Icon Weights</h2>
-      <DBIcon weight="16">16px Icon</DBIcon>
-      <DBIcon weight="24">24px Icon</DBIcon>
-      <DBIcon weight="32">32px Icon</DBIcon>
-      <h2>4. Custom Class</h2>
-      <DBIcon className="my-custom-class">Custom Class Icon</DBIcon>
-      <h2>5. Text Content</h2>
-      <DBIcon text="Icon with Text">Icon with Text</DBIcon>
-    </>
-  );
-}
-
-export default Icon;
-```