From 728d5e199b1bd7ad1ad8d746656b3fcf2384f5b3 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sat, 22 Apr 2023 12:49:01 -0700
Subject: [PATCH 01/42] test(BottomNavigation): adds test cases for
 BottomNavigation component

---
 .../BottomNavigation.test.tsx                 | 77 +++++++++++++++++++
 src/BottomNavigation/BottomNavigation.tsx     |  8 +-
 2 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/BottomNavigation/BottomNavigation.test.tsx

diff --git a/src/BottomNavigation/BottomNavigation.test.tsx b/src/BottomNavigation/BottomNavigation.test.tsx
new file mode 100644
index 00000000..58ce8208
--- /dev/null
+++ b/src/BottomNavigation/BottomNavigation.test.tsx
@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react'
+import BottomNavigation from './'
+
+describe('BottomNavigation', () => {
+  it('Should render BottomNavigation', () => {
+    render(<BottomNavigation />)
+    expect(screen.getByRole('navigation')).toBeInTheDocument()
+  })
+
+  it('Should render with custom size', () => {
+    render(<BottomNavigation size="lg" />)
+    expect(screen.getByRole('navigation')).toHaveClass('btm-nav-lg')
+  })
+
+  it('Should apply additional class names', () => {
+    render(<BottomNavigation className="my-class" />)
+    expect(screen.getByRole('navigation')).toHaveClass('btm-nav', 'my-class')
+  })
+
+  it('Should render children', () => {
+    render(
+      <BottomNavigation>
+        <button>Item 1</button>
+        <button>Item 2</button>
+        <button>Item 3</button>
+      </BottomNavigation>
+    )
+    expect(screen.getByText('Item 1')).toBeInTheDocument()
+    expect(screen.getByText('Item 2')).toBeInTheDocument()
+    expect(screen.getByText('Item 3')).toBeInTheDocument()
+  })
+
+  it('Should apply active styles to child element with active class', () => {
+    render(
+      <BottomNavigation>
+        <button className="active">Tab 1</button>
+        <button>Tab 2</button>
+        <button>Tab 3</button>
+      </BottomNavigation>
+    )
+    const tab1 = screen.getByText('Tab 1')
+    const tab2 = screen.getByText('Tab 2')
+    const tab3 = screen.getByText('Tab 3')
+
+    expect(tab1).toHaveClass('active')
+    expect(tab2).not.toHaveClass('active')
+    expect(tab3).not.toHaveClass('active')
+  })
+
+  it('Should apply disabled styles to child element with disabled class', () => {
+    render(
+      <BottomNavigation>
+        <button className="disabled">Tab 1</button>
+        <button>Tab 2</button>
+        <button>Tab 3</button>
+      </BottomNavigation>
+    )
+    const tab1 = screen.getByText('Tab 1')
+    const tab2 = screen.getByText('Tab 2')
+    const tab3 = screen.getByText('Tab 3')
+
+    expect(tab1).toHaveClass('disabled')
+    expect(tab2).not.toHaveClass('disabled')
+    expect(tab3).not.toHaveClass('disabled')
+  })
+
+  it('Should render Label with correct class name', () => {
+    render(
+      <BottomNavigation>
+        <BottomNavigation.Label className="my-class">
+          Tab 1
+        </BottomNavigation.Label>
+      </BottomNavigation>
+    )
+    expect(screen.getByText('Tab 1')).toHaveClass('btm-nav-label', 'my-class')
+  })
+})
diff --git a/src/BottomNavigation/BottomNavigation.tsx b/src/BottomNavigation/BottomNavigation.tsx
index defe219a..d889615a 100644
--- a/src/BottomNavigation/BottomNavigation.tsx
+++ b/src/BottomNavigation/BottomNavigation.tsx
@@ -27,7 +27,13 @@ const BottomNavigation = forwardRef<HTMLDivElement, BottomNavigationProps>(
     )
 
     return (
-      <div {...props} data-theme={dataTheme} className={classes} ref={ref}>
+      <div
+        {...props}
+        role="navigation"
+        data-theme={dataTheme}
+        className={classes}
+        ref={ref}
+      >
         {children}
       </div>
     )

From 16b49e165bc13834a861f43fc486ef339e05e08a Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sat, 22 Apr 2023 13:20:46 -0700
Subject: [PATCH 02/42] test(Breadcrumbs): adds test cases for Breadcrumbs
 component

---
 src/Breadcrumbs/Breadcrumbs.test.tsx | 42 ++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/Breadcrumbs/Breadcrumbs.test.tsx

diff --git a/src/Breadcrumbs/Breadcrumbs.test.tsx b/src/Breadcrumbs/Breadcrumbs.test.tsx
new file mode 100644
index 00000000..84a8545d
--- /dev/null
+++ b/src/Breadcrumbs/Breadcrumbs.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Breadcrumbs from './'
+
+describe('Breadcrumbs', () => {
+  it('Should render Breadcrumbs', () => {
+    render(<Breadcrumbs />)
+    expect(
+      screen.getByRole('navigation', { name: 'Breadcrumbs' })
+    ).toBeInTheDocument()
+  })
+
+  it('Should render its children', () => {
+    const children = [
+      <Breadcrumbs.Item key="1">First item</Breadcrumbs.Item>,
+      <Breadcrumbs.Item key="2">Second item</Breadcrumbs.Item>,
+      <Breadcrumbs.Item key="3">Third item</Breadcrumbs.Item>,
+    ]
+    render(<Breadcrumbs>{children}</Breadcrumbs>)
+    expect(screen.getByText('First item')).toBeInTheDocument()
+    expect(screen.getByText('Second item')).toBeInTheDocument()
+    expect(screen.getByText('Third item')).toBeInTheDocument()
+  })
+
+  it('Should allow setting a custom class name', () => {
+    render(<Breadcrumbs className="my-custom-class" />)
+    expect(screen.getByRole('navigation', { name: 'Breadcrumbs' })).toHaveClass(
+      'my-custom-class'
+    )
+  })
+
+  it('Should allow passing extra props', () => {
+    render(<Breadcrumbs data-testid="my-breadcrumbs" />)
+    expect(screen.getByTestId('my-breadcrumbs')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Breadcrumbs ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+})

From 4a4f466c4bf677c5f6926f2d7bbe0fade2d68496 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sat, 22 Apr 2023 14:01:47 -0700
Subject: [PATCH 03/42] test(ButtonGroup): adds test cases for ButtonGroup
 component

---
 src/ButtonGroup/ButtonGroup.test.tsx | 73 ++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/ButtonGroup/ButtonGroup.test.tsx

diff --git a/src/ButtonGroup/ButtonGroup.test.tsx b/src/ButtonGroup/ButtonGroup.test.tsx
new file mode 100644
index 00000000..91c73a88
--- /dev/null
+++ b/src/ButtonGroup/ButtonGroup.test.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import ButtonGroup from './'
+import Button from '../Button'
+
+const buttons = [
+  <Button key="1">Button 1</Button>,
+  <Button key="2">Button 2</Button>,
+  <Button key="3">Button 3</Button>,
+]
+
+describe('ButtonGroup', () => {
+  it('Should render a group of buttons', () => {
+    render(<ButtonGroup>{buttons}</ButtonGroup>)
+
+    expect(screen.getByLabelText('Group of 3 buttons')).toBeInTheDocument()
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+    expect(screen.getByText('Button 1')).toBeInTheDocument()
+    expect(screen.getByText('Button 2')).toBeInTheDocument()
+    expect(screen.getByText('Button 3')).toBeInTheDocument()
+  })
+
+  it('Should apply additional class namess', () => {
+    render(<ButtonGroup className="custom-class">{buttons}</ButtonGroup>)
+    expect(screen.getByLabelText('Group of 3 buttons')).toHaveClass(
+      'btn-group',
+      'custom-class'
+    )
+  })
+
+  it('Should apply vertical style when "vertical" prop is true', () => {
+    render(<ButtonGroup vertical>{buttons}</ButtonGroup>)
+    expect(screen.getByLabelText('Group of 3 buttons')).toHaveClass(
+      'btn-group-vertical'
+    )
+  })
+
+  it('Should allow passing extra propt', () => {
+    render(<ButtonGroup data-testid="button-group">{buttons}</ButtonGroup>)
+    expect(screen.getByTestId('button-group')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<ButtonGroup ref={ref}>{buttons}</ButtonGroup>)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('Should apply vertical style on small screens and horizontal on large screens', () => {
+    // Set the viewport width to a small size
+    window.innerWidth = 480
+    window.dispatchEvent(new Event('resize'))
+
+    const { container } = render(
+      <ButtonGroup className="btn-group-vertical lg:btn-group-horizontal">
+        <button className="btn btn-active">Button</button>
+        <button className="btn">Button</button>
+        <button className="btn">Button</button>
+      </ButtonGroup>
+    )
+
+    // Check that the component has the vertical class for small screens
+    expect(container.firstChild).toHaveClass('btn-group-vertical')
+
+    // Set the viewport width to a large size
+    window.innerWidth = 1024
+    window.dispatchEvent(new Event('resize'))
+
+    // Check that the component has the horizontal class for large screens
+    expect(container.firstChild).toHaveClass('lg:btn-group-horizontal')
+  })
+})

From d6d871c0127a255bdf43f1f2d99e9b9dfc2328e7 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 25 Apr 2023 21:15:17 -0700
Subject: [PATCH 04/42] test(Card): adds test cases for Card component

---
 src/Card/Card.test.tsx | 85 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/Card/Card.test.tsx

diff --git a/src/Card/Card.test.tsx b/src/Card/Card.test.tsx
new file mode 100644
index 00000000..84bc65bd
--- /dev/null
+++ b/src/Card/Card.test.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Card from './'
+
+describe('Card', () => {
+  it('Should render Card', () => {
+    const { getByLabelText } = render(<Card />)
+    expect(getByLabelText('Card')).toBeInTheDocument()
+  })
+
+  it('Should render children', () => {
+    const { container } = render(
+      <Card>
+        <div>Child element</div>
+      </Card>
+    )
+    expect(container.firstChild).toHaveTextContent('Child element')
+  })
+
+  it('Should apply the "bordered" prop', () => {
+    const { getByLabelText } = render(<Card bordered />)
+    expect(getByLabelText('Card')).toHaveClass('card-bordered')
+  })
+
+  it('Should apply the "imageFull" prop', () => {
+    const { getByLabelText } = render(<Card imageFull />)
+    expect(getByLabelText('Card')).toHaveClass('image-full')
+  })
+
+  it('Should apply the "normal" prop', () => {
+    const { getByLabelText } = render(<Card normal />)
+    expect(getByLabelText('Card')).toHaveClass('card-normal')
+  })
+
+  it('Should apply the "compact" prop', () => {
+    const { getByLabelText } = render(<Card compact />)
+    expect(getByLabelText('Card')).toHaveClass('card-compact')
+  })
+
+  it('Should apply the "side" prop', () => {
+    const { getByLabelText } = render(<Card side />)
+    expect(getByLabelText('Card')).toHaveClass('card-side')
+  })
+
+  it('Should apply additional class names', () => {
+    const { getByLabelText } = render(<Card className="custom-class" />)
+    expect(getByLabelText('Card')).toHaveClass('custom-class')
+  })
+
+  it('Should allow passing extra props', () => {
+    render(<Card data-testid="card" />)
+    expect(screen.getByTestId('card')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Card ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('Should render CardActions component', () => {
+    const { container } = render(<Card.Actions />)
+    expect(container.firstChild).toHaveClass('card-actions')
+  })
+
+  it('Should render CardBody component', () => {
+    const { container } = render(<Card.Body />)
+    expect(container.firstChild).toHaveClass('card-body')
+  })
+
+  it('Should render CardTitle component', () => {
+    const { container } = render(<Card.Title />)
+    expect(container.firstChild).toHaveClass('card-title')
+  })
+
+  it('Should render CardImage component', () => {
+    render(<Card.Image src="http://xyz/images/pic-1.jpg" alt="test image" />)
+    const figureElement = screen.getByRole('figure')
+    expect(figureElement).toBeInTheDocument()
+    const imgElement = screen.getByRole('img') as HTMLImageElement
+    expect(imgElement).toBeInTheDocument()
+    expect(imgElement.src).toBe('http://xyz/images/pic-1.jpg')
+    expect(imgElement.alt).toBe('test image')
+  })
+})

From 84031f6a90d41849643309b86e718bc7165812a9 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 14 May 2023 19:38:38 -0700
Subject: [PATCH 05/42] test(Carousel): adds test cases for Carousel component

---
 src/Carousel/Carousel.test.tsx | 79 ++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/Carousel/Carousel.test.tsx

diff --git a/src/Carousel/Carousel.test.tsx b/src/Carousel/Carousel.test.tsx
new file mode 100644
index 00000000..326f430b
--- /dev/null
+++ b/src/Carousel/Carousel.test.tsx
@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react'
+import Carousel from './Carousel'
+
+const children = [
+  <Carousel.Item
+    key="1"
+    id="slide1"
+    src="http://xyz/images/pic-1.jpg"
+    alt="Pic-1"
+  />,
+  <Carousel.Item
+    key="2"
+    id="slide2"
+    src="http://xyz/images/pic-2.jpg"
+    alt="Pic-2"
+  />,
+  <Carousel.Item
+    key="3"
+    id="slide3"
+    src="http://xyz/images/pic-3.jpg"
+    alt="Pic-3"
+  />,
+]
+
+describe('Carousel', () => {
+  it('Should render a carousel', () => {
+    render(<Carousel>{children}</Carousel>)
+
+    const carousel = screen.getByRole('listbox', { name: 'Image carousel' })
+    expect(carousel).toHaveClass('carousel')
+
+    const items = screen.getAllByRole('img')
+    expect(items.length).toBe(children.length)
+  })
+
+  it('Should render a numbered carousel', () => {
+    render(<Carousel display="numbered">{children}</Carousel>)
+    const carousel = screen.getByRole('listbox', { name: 'Image carousel' })
+    expect(carousel).toHaveClass('carousel')
+
+    const items = screen.getAllByRole('img')
+    expect(items.length).toBe(children.length)
+
+    expect(screen.getAllByRole('button')).toHaveLength(children.length)
+    expect(screen.getByRole('button', { name: '1' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '2' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '3' })).toBeInTheDocument()
+  })
+
+  it('Should render a sequential carousel', () => {
+    render(<Carousel display="sequential">{children}</Carousel>)
+    const carousel = screen.getByRole('listbox', { name: 'Image carousel' })
+    expect(carousel).toHaveClass('carousel')
+
+    const items = screen.getAllByRole('img')
+    expect(items.length).toBe(children.length)
+
+    const buttons = screen.queryAllByRole('button', { name: /❮|❯/ })
+    expect(buttons).toHaveLength(children.length * 2)
+  })
+
+  it('Should render a carousel that snap elements to center', () => {
+    render(<Carousel snap="center">{children}</Carousel>)
+    const carousel = screen.getByRole('listbox', { name: 'Image carousel' })
+    expect(carousel).toHaveClass('carousel-center')
+  })
+
+  it('Should render a carousel that snap elements to end', () => {
+    render(<Carousel snap="end">{children}</Carousel>)
+    const carousel = screen.getByRole('listbox', { name: 'Image carousel' })
+    expect(carousel).toHaveClass('carousel-end')
+  })
+
+  it('Should render a vertical carousel', () => {
+    render(<Carousel vertical>{children}</Carousel>)
+    const carousel = screen.getByRole('listbox', { name: 'Image carousel' })
+    expect(carousel).toHaveClass('carousel-vertical')
+  })
+})

From 3aca3cb1f20b8292c7a35b3972c30fdb9e3ecede Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Mon, 15 May 2023 19:48:12 -0700
Subject: [PATCH 06/42] test(ChatBubble): adds test cases for ChatBubble
 component

---
 src/ChatBubble/ChatBubble.test.tsx | 73 ++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/ChatBubble/ChatBubble.test.tsx

diff --git a/src/ChatBubble/ChatBubble.test.tsx b/src/ChatBubble/ChatBubble.test.tsx
new file mode 100644
index 00000000..f6847025
--- /dev/null
+++ b/src/ChatBubble/ChatBubble.test.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import ChatBubble from './'
+
+describe('ChatBubble', () => {
+  test('Should render ChatBubble', () => {
+    const { container } = render(<ChatBubble />)
+    const chatBubbleDiv = container.querySelector('.chat.chat-start')
+    expect(chatBubbleDiv).toBeInTheDocument()
+  })
+
+  test('Should render children', () => {
+    const { getByText } = render(
+      <ChatBubble>
+        <span>Test Content</span>
+      </ChatBubble>
+    )
+    expect(getByText('Test Content')).toBeInTheDocument()
+  })
+
+  test('Should apply correct className based on the "end" prop', () => {
+    const { container } = render(<ChatBubble end />)
+    expect(container.firstChild).toHaveClass('chat-end')
+  })
+
+  it('Should allow passing extra propt', () => {
+    render(<ChatBubble data-testid="chat-bubble">Test content</ChatBubble>)
+    expect(screen.getByTestId('chat-bubble')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<ChatBubble ref={ref}>Test content</ChatBubble>)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  test('Should render ChatBubbleHeader subcomponent', () => {
+    const { getByText } = render(
+      <ChatBubble.Header>Header Content</ChatBubble.Header>
+    )
+    expect(getByText('Header Content')).toBeInTheDocument()
+  })
+
+  test('Should render ChatBubbleTime subcomponent', () => {
+    const { getByText } = render(
+      <ChatBubble.Time>Time Content</ChatBubble.Time>
+    )
+    expect(getByText('Time Content')).toBeInTheDocument()
+  })
+
+  test('Should render ChatBubbleAvatar subcomponent', () => {
+    const { getByAltText } = render(
+      <ChatBubble.Avatar>
+        <img src="avatar.jpg" alt="Avatar" />
+      </ChatBubble.Avatar>
+    )
+    expect(getByAltText('Avatar')).toBeInTheDocument()
+  })
+
+  test('Should render ChatBubbleMessage subcomponent', () => {
+    const { getByText } = render(
+      <ChatBubble.Message>Message Content</ChatBubble.Message>
+    )
+    expect(getByText('Message Content')).toBeInTheDocument()
+  })
+
+  test('Should render ChatBubbleFooter subcomponent', () => {
+    const { getByText } = render(
+      <ChatBubble.Footer>Footer Content</ChatBubble.Footer>
+    )
+    expect(getByText('Footer Content')).toBeInTheDocument()
+  })
+})

From 52c2c1dc72f8823b01c1cbde0a7386db3ef7ba02 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Mon, 15 May 2023 20:32:08 -0700
Subject: [PATCH 07/42] test(Collapse): adds test cases for Collapse component

---
 src/Collapse/Collapse.test.tsx | 66 ++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/Collapse/Collapse.test.tsx

diff --git a/src/Collapse/Collapse.test.tsx b/src/Collapse/Collapse.test.tsx
new file mode 100644
index 00000000..54498f73
--- /dev/null
+++ b/src/Collapse/Collapse.test.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import { screen, render, fireEvent } from '@testing-library/react'
+import Collapse from './'
+
+describe('Collapse', () => {
+  test('Should render Collapse', () => {
+    const { container } = render(<Collapse />)
+    const collapseDiv = container.querySelector('.collapse')
+    expect(collapseDiv).toBeInTheDocument()
+  })
+
+  test('Should apply additional class names', () => {
+    const { container } = render(<Collapse className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  test('Should allow passing extra props', () => {
+    render(<Collapse data-testid="collapse" />)
+    expect(screen.getByTestId('collapse')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Collapse ref={ref}>Test</Collapse>)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  test('Should call onOpen when opened', () => {
+    const handleOpen = jest.fn()
+    const { getByTestId } = render(
+      <Collapse onOpen={handleOpen} data-testid="collapse" />
+    )
+    fireEvent.focus(getByTestId('collapse'))
+    expect(handleOpen).toHaveBeenCalled()
+  })
+
+  test('Should call onClose when closed', () => {
+    const handleClose = jest.fn()
+    const { getByTestId } = render(
+      <Collapse onClose={handleClose} data-testid="collapse" />
+    )
+    fireEvent.blur(getByTestId('collapse'))
+    expect(handleClose).toHaveBeenCalled()
+  })
+
+  test('Should call onToggle when checkbox is changed', () => {
+    const handleToggle = jest.fn()
+    render(<Collapse checkbox onToggle={handleToggle} data-testid="collapse" />)
+    const checkboxInput = screen.getByRole('checkbox')
+    fireEvent.click(checkboxInput)
+
+    expect(handleToggle).toHaveBeenCalled()
+  })
+
+  test('Should render CollapseTitle subcomponent', () => {
+    render(<Collapse.Title>Title Content</Collapse.Title>)
+    const titleElement = screen.getByText('Title Content')
+    expect(titleElement).toBeInTheDocument()
+  })
+
+  test('Should render CollapseContent subcomponent', () => {
+    render(<Collapse.Content>Test Content</Collapse.Content>)
+    const contentElement = screen.getByText('Test Content')
+    expect(contentElement).toBeInTheDocument()
+  })
+})

From bafed7d2757a5a88b7a2d41251dd43e8f71f21c5 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Mon, 15 May 2023 20:51:02 -0700
Subject: [PATCH 08/42] test(Countdown): adds test cases for Countdown
 component

---
 src/Countdown/Countdown.test.tsx | 46 ++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/Countdown/Countdown.test.tsx

diff --git a/src/Countdown/Countdown.test.tsx b/src/Countdown/Countdown.test.tsx
new file mode 100644
index 00000000..de4a4af9
--- /dev/null
+++ b/src/Countdown/Countdown.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import Countdown from './'
+
+describe('Countdown', () => {
+  test('Should render Countdown with the correct value', () => {
+    const value = 50
+    render(<Countdown value={value} />)
+    const countdownElement = screen.getByRole('timer')
+    const innerSpan = countdownElement.querySelector('span')
+    expect(countdownElement).toBeInTheDocument()
+
+    expect(innerSpan).toHaveStyle(`--value: ${value}`)
+  })
+
+  test('Should render Countdown with a default value when value is above the range', () => {
+    const value = 120
+    render(<Countdown value={value} />)
+    const countdownElement = screen.getByRole('timer')
+    const innerSpan = countdownElement.querySelector('span')
+
+    expect(countdownElement).toBeInTheDocument()
+    expect(innerSpan).toHaveStyle(`--value: 99`)
+  })
+
+  test('Should render Countdown with a default value when value is below the range', () => {
+    const value = -10
+    render(<Countdown value={value} />)
+    const countdownElement = screen.getByRole('timer')
+    const innerSpan = countdownElement.querySelector('span')
+
+    expect(countdownElement).toBeInTheDocument()
+    expect(innerSpan).toHaveStyle(`--value: 0`)
+  })
+
+  test('Should allow passing extra props', () => {
+    render(<Countdown value={10} data-testid="countdown" />)
+    expect(screen.getByTestId('countdown')).toBeInTheDocument()
+  })
+
+  test('Should apply additional class names', () => {
+    const { container } = render(
+      <Countdown value={10} className="custom-class" />
+    )
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+})

From 9dd26c5e7a508f1fc28066c074910de2e2770e48 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Mon, 15 May 2023 20:58:31 -0700
Subject: [PATCH 09/42] test(Divider): adds test cases for Divider component

---
 src/Divider/Divider.test.tsx | 41 ++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/Divider/Divider.test.tsx

diff --git a/src/Divider/Divider.test.tsx b/src/Divider/Divider.test.tsx
new file mode 100644
index 00000000..ab5b15a0
--- /dev/null
+++ b/src/Divider/Divider.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import Divider from './'
+
+describe('Divider', () => {
+  test('Should render Divider', () => {
+    render(<Divider />)
+    const dividerElement = screen.getByRole('separator')
+
+    expect(dividerElement).toBeInTheDocument()
+    expect(dividerElement).toHaveClass('divider')
+  })
+
+  test('Should render vertical Divider', () => {
+    render(<Divider vertical />)
+    const dividerElement = screen.getByRole('separator')
+
+    expect(dividerElement).toBeInTheDocument()
+    expect(dividerElement).toHaveClass('divider', 'divider-vertical')
+  })
+
+  test('Should render horizontal Divider', () => {
+    render(<Divider horizontal />)
+    const dividerElement = screen.getByRole('separator')
+
+    expect(dividerElement).toBeInTheDocument()
+    expect(dividerElement).toHaveClass('divider', 'divider-horizontal')
+  })
+
+  test('Should apply additional class names', () => {
+    render(<Divider className="custom-class" />)
+    const dividerElement = screen.getByRole('separator')
+
+    expect(dividerElement).toBeInTheDocument()
+    expect(dividerElement).toHaveClass('divider', 'custom-class')
+  })
+
+  test('Should allow passing extra props', () => {
+    render(<Divider data-testid="divider" />)
+    expect(screen.getByTestId('divider')).toBeInTheDocument()
+  })
+})

From 110b52c1078fb26653ce0343adc91b5588bedb68 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 16 May 2023 18:31:58 -0700
Subject: [PATCH 10/42] test(Drawer): adds test cases for Drawer component

---
 src/Drawer/Drawer.test.tsx | 113 +++++++++++++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 src/Drawer/Drawer.test.tsx

diff --git a/src/Drawer/Drawer.test.tsx b/src/Drawer/Drawer.test.tsx
new file mode 100644
index 00000000..491eb2e9
--- /dev/null
+++ b/src/Drawer/Drawer.test.tsx
@@ -0,0 +1,113 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import Drawer from './'
+
+describe('Drawer component', () => {
+  test('Should render Drawer', () => {
+    const { container } = render(
+      <Drawer side={<div>Side content</div>}>Content</Drawer>
+    )
+
+    expect(container).toBeInTheDocument()
+
+    expect(container.querySelector('.drawer')).toBeInTheDocument()
+    expect(container.querySelector('.drawer-toggle')).toBeInTheDocument()
+    expect(container.querySelector('.drawer-content')).toBeInTheDocument()
+    expect(container.querySelector('.drawer-side')).toBeInTheDocument()
+    expect(container.querySelector('.drawer-overlay')).toBeInTheDocument()
+  })
+
+  test('Should apply toggleClassName to the toggle element', () => {
+    render(
+      <Drawer side={<div>Side content</div>} toggleClassName="custom-toggle">
+        Content
+      </Drawer>
+    )
+
+    expect(screen.getByRole('checkbox')).toHaveClass('custom-toggle')
+  })
+
+  test('Should apply contentClassName to the drawer content element', () => {
+    const { container } = render(
+      <Drawer side={<div>Side content</div>} contentClassName="custom-content">
+        Content
+      </Drawer>
+    )
+
+    expect(container.getElementsByClassName('drawer-content')[0]).toHaveClass(
+      'custom-content'
+    )
+  })
+
+  test('Should apply sideClassName to the drawer side element', () => {
+    const { container } = render(
+      <Drawer side={<div>Side content</div>} sideClassName="custom-side">
+        Content
+      </Drawer>
+    )
+
+    expect(container.getElementsByClassName('drawer-side')[0]).toHaveClass(
+      'custom-side'
+    )
+  })
+
+  test('Should apply overlayClassName to the drawer overlay element', () => {
+    const { container } = render(
+      <Drawer side={<div>Side content</div>} overlayClassName="custom-overlay">
+        Content
+      </Drawer>
+    )
+
+    expect(container.getElementsByClassName('drawer-overlay')[0]).toHaveClass(
+      'custom-overlay'
+    )
+  })
+
+  test('Should open when the toggle is clicked', () => {
+    render(<Drawer side={<div>Side content</div>}>Content</Drawer>)
+
+    const toggle = screen.getByRole('checkbox', { name: '' })
+
+    expect(toggle).toBeInTheDocument()
+
+    fireEvent.click(toggle)
+
+    expect((toggle as HTMLInputElement).checked).toBeTruthy()
+  })
+
+  test('Should call onClickOverlay when the overlay is clicked', () => {
+    const onClickOverlay = jest.fn()
+    const { container } = render(
+      <Drawer side={<div>Side content</div>} onClickOverlay={onClickOverlay}>
+        Content
+      </Drawer>
+    )
+
+    const overlay = container.querySelector('.drawer-overlay')
+
+    expect(overlay).toBeInTheDocument()
+
+    if (overlay) {
+      fireEvent.click(overlay)
+      expect(onClickOverlay).toHaveBeenCalledTimes(1)
+    }
+  })
+
+  test('Should allow passing extra props', () => {
+    render(<Drawer side={<div>Side Content</div>} data-testid="drawer" />)
+    expect(screen.getByTestId('drawer')).toBeInTheDocument()
+  })
+
+  test('Should apply additional class names', () => {
+    render(
+      <Drawer
+        side={<div>Side Content</div>}
+        data-testid="drawer"
+        className="custom-class"
+      />
+    )
+    const drawerElement = screen.getByTestId('drawer')
+
+    expect(drawerElement).toBeInTheDocument()
+    expect(drawerElement).toHaveClass('drawer', 'custom-class')
+  })
+})

From dadf24049b13e669e29974f873dd3351ea4bc61f Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 16 May 2023 19:15:07 -0700
Subject: [PATCH 11/42] test(Dropdown): adds test cases for Dropdown component

---
 src/Dropdown/Dropdown.test.tsx | 78 ++++++++++++++++++++++++++++++++++
 src/Dropdown/DropdownItem.tsx  |  2 +-
 src/Dropdown/DropdownMenu.tsx  |  8 +++-
 3 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/Dropdown/Dropdown.test.tsx

diff --git a/src/Dropdown/Dropdown.test.tsx b/src/Dropdown/Dropdown.test.tsx
new file mode 100644
index 00000000..bce2631b
--- /dev/null
+++ b/src/Dropdown/Dropdown.test.tsx
@@ -0,0 +1,78 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Dropdown from './'
+
+const DropdownItems = [
+  <Dropdown.Item key="1">Item 1</Dropdown.Item>,
+  <Dropdown.Item key="2">Item 2</Dropdown.Item>,
+  <Dropdown.Item key="3">Item 3</Dropdown.Item>,
+]
+describe('Dropdown', () => {
+  test('Should render Dropdown', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Toggle>Toggle</Dropdown.Toggle>
+        <Dropdown.Menu>{DropdownItems}</Dropdown.Menu>
+      </Dropdown>
+    )
+
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+    expect(screen.getByText('Toggle')).toBeInTheDocument()
+    expect(screen.getByRole('menu')).toBeInTheDocument()
+    expect(screen.getAllByRole('menuitem')).toHaveLength(3)
+  })
+
+  test('Should apply additional class names', () => {
+    render(
+      <Dropdown
+        className="custom-dropdown"
+        item={<Dropdown.Item>Custom Item</Dropdown.Item>}
+      >
+        <Dropdown.Toggle className="custom-toggle">Toggle</Dropdown.Toggle>
+        <Dropdown.Menu className="custom-menu">{DropdownItems}</Dropdown.Menu>
+      </Dropdown>
+    )
+
+    expect(screen.getByRole('listbox')).toHaveClass('custom-dropdown')
+    expect(screen.getByText('Toggle').parentElement).toHaveClass(
+      'custom-toggle'
+    )
+    expect(screen.getByRole('menu')).toHaveClass('custom-menu')
+  })
+
+  it('Should allow passing extra props', () => {
+    render(<Dropdown data-testid="dropdown" />)
+    expect(screen.getByTestId('dropdown')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Dropdown ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  test('Should apply horizontal and vertical positioning classes', () => {
+    render(
+      <Dropdown horizontal="left" vertical="top">
+        <Dropdown.Toggle>Toggle</Dropdown.Toggle>
+        <Dropdown.Menu>{DropdownItems}</Dropdown.Menu>
+      </Dropdown>
+    )
+
+    expect(screen.getByRole('listbox')).toHaveClass('dropdown-left')
+    expect(screen.getByRole('listbox')).toHaveClass('dropdown-top')
+  })
+
+  test('Should apply end, hover, and open classes', () => {
+    render(
+      <Dropdown end hover open>
+        <Dropdown.Toggle>Toggle</Dropdown.Toggle>
+        <Dropdown.Menu>{DropdownItems}</Dropdown.Menu>
+      </Dropdown>
+    )
+
+    expect(screen.getByRole('listbox')).toHaveClass('dropdown-end')
+    expect(screen.getByRole('listbox')).toHaveClass('dropdown-hover')
+    expect(screen.getByRole('listbox')).toHaveClass('dropdown-open')
+  })
+})
diff --git a/src/Dropdown/DropdownItem.tsx b/src/Dropdown/DropdownItem.tsx
index ac11d323..0a905657 100644
--- a/src/Dropdown/DropdownItem.tsx
+++ b/src/Dropdown/DropdownItem.tsx
@@ -5,7 +5,7 @@ export type DropdownItemProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
 const DropdownItem = React.forwardRef<HTMLAnchorElement, DropdownItemProps>(
   ({ className, ...props }, ref) => {
     return (
-      <li className={className}>
+      <li className={className} role="menuitem">
         <a ref={ref} {...props}></a>
       </li>
     )
diff --git a/src/Dropdown/DropdownMenu.tsx b/src/Dropdown/DropdownMenu.tsx
index a866fd64..4bb0f494 100644
--- a/src/Dropdown/DropdownMenu.tsx
+++ b/src/Dropdown/DropdownMenu.tsx
@@ -16,7 +16,13 @@ const DropdownMenu = ({
   )
 
   return (
-    <ul {...props} tabIndex={0} data-theme={dataTheme} className={classes} />
+    <ul
+      {...props}
+      tabIndex={0}
+      data-theme={dataTheme}
+      className={classes}
+      role="menu"
+    />
   )
 }
 

From 79c06beb875754008b46e1f65f912466182b5fa2 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Wed, 17 May 2023 17:50:15 -0700
Subject: [PATCH 12/42]  test(FileInput): adds test cases for FileInput
 component

---
 src/FileInput/FileInput.test.tsx | 55 ++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/FileInput/FileInput.test.tsx

diff --git a/src/FileInput/FileInput.test.tsx b/src/FileInput/FileInput.test.tsx
new file mode 100644
index 00000000..022af0e8
--- /dev/null
+++ b/src/FileInput/FileInput.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import FileInput from './'
+
+describe('FileInput', () => {
+  test('Should render FileInput', () => {
+    render(<FileInput />)
+  })
+
+  test('Should apply the specified size class', () => {
+    const { container } = render(<FileInput size="lg" />)
+    expect(container.firstChild).toHaveClass('file-input-lg')
+  })
+
+  test('Should apply the specified color class', () => {
+    const { container } = render(<FileInput color="primary" />)
+    expect(container.firstChild).toHaveClass('file-input-primary')
+  })
+
+  test('Should apply the bordered class', () => {
+    const { container } = render(<FileInput bordered />)
+    expect(container.firstChild).toHaveClass('file-input-bordered')
+  })
+
+  test('Should apply additional class names', () => {
+    const { container } = render(<FileInput className="custom-class" />)
+    const FileInputElement = container.querySelector('input[type="file"]')
+
+    expect(FileInputElement).toBeInTheDocument()
+    expect(FileInputElement).toHaveClass('file-input', 'custom-class')
+  })
+
+  test('Should allow passing extra props', () => {
+    render(<FileInput data-testid="FileInput" />)
+    expect(screen.getByTestId('FileInput')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<FileInput ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  test('Should call onChange when a file is selected', () => {
+    const onChangeMock = jest.fn()
+    const { container } = render(<FileInput onChange={onChangeMock} />)
+    const input = container.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement
+    fireEvent.change(input, {
+      target: { files: [new File(['test'], 'test.png')] },
+    })
+    expect(onChangeMock).toHaveBeenCalled()
+  })
+})

From b7e741e0b12e2b736833e8f899a659b4f051a50c Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Wed, 17 May 2023 18:11:41 -0700
Subject: [PATCH 13/42] test(Form): adds test cases for Form component

---
 src/Form/Form.test.tsx | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/Form/Form.test.tsx

diff --git a/src/Form/Form.test.tsx b/src/Form/Form.test.tsx
new file mode 100644
index 00000000..7653636e
--- /dev/null
+++ b/src/Form/Form.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Form from './'
+
+describe('Form', () => {
+  test('Should render Form', () => {
+    render(<Form />)
+  })
+
+  test('Should apply additional class names', () => {
+    const { container } = render(<Form className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  test('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLFormElement>()
+    render(<Form ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  test('Should render Label', () => {
+    const { getByText } = render(<Form.Label title="Username" />)
+    expect(getByText('Username')).toBeInTheDocument()
+  })
+
+  test('Should render children elements', () => {
+    const { container } = render(
+      <Form>
+        <Form.Label title="Username">
+          <input type="text" name="username" />
+          <button type="submit">Submit</button>
+        </Form.Label>
+      </Form>
+    )
+
+    expect(
+      container.querySelector('input[name="username"]')
+    ).toBeInTheDocument()
+    expect(container.querySelector('button[type="submit"]')).toBeInTheDocument()
+  })
+})

From df667c9e571442f4a68a28b6016cc86c848949de Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Wed, 17 May 2023 18:26:18 -0700
Subject: [PATCH 14/42] test(Hero): adds test cases for Hero component

---
 src/Hero/Hero.test.tsx | 54 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/Hero/Hero.test.tsx

diff --git a/src/Hero/Hero.test.tsx b/src/Hero/Hero.test.tsx
new file mode 100644
index 00000000..c4068a47
--- /dev/null
+++ b/src/Hero/Hero.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Hero from './'
+
+describe('Hero', () => {
+  test('Should render Hero', () => {
+    render(<Hero />)
+  })
+
+  test('Should apply additional class names', () => {
+    const { container } = render(<Hero className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  test('Should allow passing extra props', () => {
+    render(<Hero data-testid="Hero" />)
+    expect(screen.getByTestId('Hero')).toBeInTheDocument()
+  })
+
+  test('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Hero ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  test('Should render children elements', () => {
+    const { container } = render(
+      <Hero>
+        <Hero.Content>
+          <h1>Hero Title</h1>
+        </Hero.Content>
+        <Hero.Overlay />
+      </Hero>
+    )
+    expect(container.querySelector('h1')).toHaveTextContent('Hero Title')
+    expect(container.querySelector('.hero-overlay')).toBeInTheDocument()
+  })
+
+  test('Should apply additional class names to Hero Content and Hero Overlay components', () => {
+    const { container } = render(
+      <Hero>
+        <Hero.Content className="custom-content">
+          <h1>Hero Title</h1>
+        </Hero.Content>
+        <Hero.Overlay className="custom-overlay" />
+      </Hero>
+    )
+    const contentElement = container.querySelector('.custom-content')
+    const overlayElement = container.querySelector('.custom-overlay')
+
+    expect(contentElement).toBeInTheDocument()
+    expect(overlayElement).toBeInTheDocument()
+  })
+})

From 43b39d2697a54c42abb94fd149cedce9fb2dc433 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Wed, 17 May 2023 18:39:18 -0700
Subject: [PATCH 15/42] test(Indicator): adds test cases for Indicator
 component

---
 src/Indicator/Indicator.test.tsx | 42 ++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/Indicator/Indicator.test.tsx

diff --git a/src/Indicator/Indicator.test.tsx b/src/Indicator/Indicator.test.tsx
new file mode 100644
index 00000000..c1c1b40b
--- /dev/null
+++ b/src/Indicator/Indicator.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Indicator from './'
+
+describe('Indicator', () => {
+  test('Should render Indicator', () => {
+    render(<Indicator />)
+  })
+
+  test('Should apply additional class names', () => {
+    render(<Indicator className="custom-class" />)
+    const indicatorElement = screen.getByLabelText('Indicator')
+    expect(indicatorElement).toHaveClass('custom-class')
+  })
+
+  test('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Indicator ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  test('Should apply the horizontal and vertical positioning classes', () => {
+    render(<Indicator horizontal="start" vertical="bottom" />)
+    const indicatorElement = screen.getByLabelText('Indicator')
+    expect(indicatorElement).toHaveClass('indicator-start')
+    expect(indicatorElement).toHaveClass('indicator-bottom')
+  })
+
+  test('Should render the provided item', () => {
+    const { getByText } = render(<Indicator item="Item Content" />)
+    expect(getByText('Item Content')).toBeInTheDocument()
+  })
+
+  test('Should render children elements', () => {
+    const { container } = render(
+      <Indicator>
+        <span>Child Element</span>
+      </Indicator>
+    )
+    expect(container.querySelector('span')).toBeInTheDocument()
+  })
+})

From e933460807a83fef860a43ed40dbb9bd402f2ac3 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 20:32:29 -0700
Subject: [PATCH 16/42] test(InputGroup): adds test cases for InputGroup
 component

---
 src/InputGroup/InputGroup.test.tsx | 47 ++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/InputGroup/InputGroup.test.tsx

diff --git a/src/InputGroup/InputGroup.test.tsx b/src/InputGroup/InputGroup.test.tsx
new file mode 100644
index 00000000..f8d1277a
--- /dev/null
+++ b/src/InputGroup/InputGroup.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import InputGroup from './'
+
+describe('InputGroup', () => {
+  it('Should render InputGroup', () => {
+    render(<InputGroup />)
+  })
+
+  it('Should render children elements', () => {
+    const { container } = render(
+      <InputGroup>
+        <span>Child Element</span>
+      </InputGroup>
+    )
+    expect(container.querySelector('span')).toBeInTheDocument()
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<InputGroup className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should apply size classes correctly', () => {
+    const { container } = render(<InputGroup size="lg" />)
+    expect(container.firstChild).toHaveClass('input-group-lg')
+  })
+
+  it('Should apply vertical class when vertical prop is true', () => {
+    const { container } = render(<InputGroup vertical />)
+    expect(container.firstChild).toHaveClass('input-group-vertical')
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLLabelElement>()
+    render(<InputGroup ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('Should call onClick handler when clicked', () => {
+    const onClick = jest.fn()
+    const { container } = render(<InputGroup onClick={onClick} />)
+    const labelElement = container.getElementsByClassName('input-group')[0]
+    fireEvent.click(labelElement)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

From a032ed87422f0f9f6f408306fed63667e4ccf0da Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 20:44:13 -0700
Subject: [PATCH 17/42] test(Kbd): adds test cases for Kbd component

---
 src/Kbd/Kbd.test.tsx | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/Kbd/Kbd.test.tsx

diff --git a/src/Kbd/Kbd.test.tsx b/src/Kbd/Kbd.test.tsx
new file mode 100644
index 00000000..f289b598
--- /dev/null
+++ b/src/Kbd/Kbd.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Kbd from './'
+
+describe('Kbd', () => {
+  it('Should render Kbd', () => {
+    render(<Kbd />)
+  })
+
+  it('Should render children elements', () => {
+    const { container } = render(
+      <Kbd>
+        <span>Child Element</span>
+      </Kbd>
+    )
+    expect(container.querySelector('span')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLElement>()
+    render(<Kbd ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Kbd className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should apply size classes correctly', () => {
+    const { container } = render(<Kbd size="lg" />)
+    expect(container.firstChild).toHaveClass('kbd-lg')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Kbd dataTheme="light" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'light')
+  })
+})

From bdc3ab70899c8a506af6601c6bee84f7ddd8dcc8 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 20:52:46 -0700
Subject: [PATCH 18/42] test(Link): adds test cases for Link component

---
 src/Link/Link.test.tsx | 57 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/Link/Link.test.tsx

diff --git a/src/Link/Link.test.tsx b/src/Link/Link.test.tsx
new file mode 100644
index 00000000..f1677395
--- /dev/null
+++ b/src/Link/Link.test.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import Link from './'
+
+describe('Link', () => {
+  it('Should render Link', () => {
+    render(<Link />)
+  })
+
+  it('Should render children elements', () => {
+    const { container } = render(
+      <Link>
+        <span>Child Element</span>
+      </Link>
+    )
+    expect(container.querySelector('span')).toBeInTheDocument()
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Link className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should apply color class correctly', () => {
+    const { container } = render(<Link color="primary" />)
+    expect(container.firstChild).toHaveClass('link-primary')
+  })
+
+  it('Should apply hover class when hover prop is true', () => {
+    const { container } = render(<Link hover />)
+    expect(container.firstChild).toHaveClass('link-hover')
+  })
+
+  it('Should not apply hover class when hover prop is false', () => {
+    const { container } = render(<Link hover={false} />)
+    expect(container.firstChild).not.toHaveClass('link-hover')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Link dataTheme="light" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'light')
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLAnchorElement>()
+    render(<Link ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('Should call onClick handler when clicked', () => {
+    const onClick = jest.fn()
+    const { container } = render(<Link onClick={onClick}>Click me</Link>)
+    const anchorElement = container.getElementsByClassName('link')[0]
+    fireEvent.click(anchorElement)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

From a50adbfdb55f843d99a3ad07e4ced1b920b441c5 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 20:57:55 -0700
Subject: [PATCH 19/42] test(Mask): adds test cases for Mask component

---
 src/Mask/Mask.test.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/Mask/Mask.test.tsx

diff --git a/src/Mask/Mask.test.tsx b/src/Mask/Mask.test.tsx
new file mode 100644
index 00000000..6c4f93a1
--- /dev/null
+++ b/src/Mask/Mask.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Mask from './'
+
+describe('Mask', () => {
+  it('Should render Mask', () => {
+    render(<Mask />)
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Mask className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should apply variant class correctly', () => {
+    const { container } = render(<Mask variant="circle" />)
+    expect(container.firstChild).toHaveClass('mask-circle')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Mask dataTheme="light" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'light')
+  })
+
+  it('Should render with src prop', () => {
+    const { container } = render(<Mask src="image.png" />)
+    expect(container.firstChild).toHaveAttribute('src', 'image.png')
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLImageElement>()
+    render(<Mask ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+})

From a7f3fbb75e7c2475916aa46d51efe42980aad678 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 21:03:43 -0700
Subject: [PATCH 20/42] test(Menu): adds test cases for Menu component

---
 src/Menu/Menu.test.tsx | 55 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/Menu/Menu.test.tsx

diff --git a/src/Menu/Menu.test.tsx b/src/Menu/Menu.test.tsx
new file mode 100644
index 00000000..5f3adf0d
--- /dev/null
+++ b/src/Menu/Menu.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Menu from './'
+
+describe('Menu', () => {
+  it('Should render Menu', () => {
+    render(<Menu />)
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Menu className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should apply normal modifier class', () => {
+    const { container } = render(<Menu normal />)
+    expect(container.firstChild).toHaveClass('menu-normal')
+  })
+
+  it('Should apply compact modifier class', () => {
+    const { container } = render(<Menu compact />)
+    expect(container.firstChild).toHaveClass('menu-compact')
+  })
+
+  it('Should apply horizontal modifier class', () => {
+    const { container } = render(<Menu horizontal />)
+    expect(container.firstChild).toHaveClass('menu-horizontal')
+  })
+
+  it('Should apply vertical modifier class', () => {
+    const { container } = render(<Menu vertical />)
+    expect(container.firstChild).toHaveClass('menu-vertical')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Menu dataTheme="light" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'light')
+  })
+
+  it('Should render with MenuTitle component', () => {
+    const { getByText } = render(<Menu.Title>Title</Menu.Title>)
+    expect(getByText('Title')).toBeInTheDocument()
+  })
+
+  it('Should render with MenuItem component', () => {
+    const { getByText } = render(<Menu.Item>Item</Menu.Item>)
+    expect(getByText('Item')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLUListElement>()
+    render(<Menu ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+})

From 4e7421ea36c51cd559dc38ce7b8891c9d3113df7 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 21:13:22 -0700
Subject: [PATCH 21/42] test(NavBar): adds test cases for NavBar component

---
 src/Navbar/NavBar.test.tsx | 40 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/Navbar/NavBar.test.tsx

diff --git a/src/Navbar/NavBar.test.tsx b/src/Navbar/NavBar.test.tsx
new file mode 100644
index 00000000..b3b102fc
--- /dev/null
+++ b/src/Navbar/NavBar.test.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Navbar from './'
+
+describe('NavBar', () => {
+  it('Should render NavBar', () => {
+    render(<Navbar />)
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Navbar className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Navbar dataTheme="light" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'light')
+  })
+
+  it('Should render NavbarStart component', () => {
+    const { getByText } = render(<Navbar.Start>Start</Navbar.Start>)
+    expect(getByText('Start')).toBeInTheDocument()
+  })
+
+  it('Should render NavbarCenter component', () => {
+    const { getByText } = render(<Navbar.Center>Center</Navbar.Center>)
+    expect(getByText('Center')).toBeInTheDocument()
+  })
+
+  it('Should render NavbarEnd component', () => {
+    const { getByText } = render(<Navbar.End>End</Navbar.End>)
+    expect(getByText('End')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Navbar ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+})

From 28405cbe50779f158d3912ce14168538341597da Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 21:36:03 -0700
Subject: [PATCH 22/42] test(Pagination): adds test cases for Pagination
 component

---
 src/Pagination/Pagination.test.tsx | 49 ++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/Pagination/Pagination.test.tsx

diff --git a/src/Pagination/Pagination.test.tsx b/src/Pagination/Pagination.test.tsx
new file mode 100644
index 00000000..71674b2c
--- /dev/null
+++ b/src/Pagination/Pagination.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import Button from '../Button'
+import Pagination from './'
+
+const buttons = [
+  <Button key="1">Button 1</Button>,
+  <Button key="2">Button 2</Button>,
+  <Button key="3">Button 3</Button>,
+]
+
+describe('Pagination', () => {
+  it('Should render a group of buttons', () => {
+    render(<Pagination>{buttons}</Pagination>)
+
+    expect(screen.getByLabelText('Group of 3 buttons')).toBeInTheDocument()
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+    expect(screen.getByText('Button 1')).toBeInTheDocument()
+    expect(screen.getByText('Button 2')).toBeInTheDocument()
+    expect(screen.getByText('Button 3')).toBeInTheDocument()
+  })
+
+  it('Should apply additional class namess', () => {
+    render(<Pagination className="custom-class">{buttons}</Pagination>)
+    expect(screen.getByLabelText('Group of 3 buttons')).toHaveClass(
+      'btn-group',
+      'custom-class'
+    )
+  })
+
+  it('Should apply vertical style when vertical prop is true', () => {
+    render(<Pagination vertical>{buttons}</Pagination>)
+    expect(screen.getByLabelText('Group of 3 buttons')).toHaveClass(
+      'btn-group-vertical'
+    )
+  })
+
+  it('Should allow passing extra props', () => {
+    render(<Pagination data-testid="button-group">{buttons}</Pagination>)
+    expect(screen.getByTestId('button-group')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Pagination ref={ref}>{buttons}</Pagination>)
+    expect(ref.current).toBeInTheDocument()
+  })
+})

From e9f2f34391d5c9f1d35ff29ec83abcd1fe5e11bf Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 21:42:23 -0700
Subject: [PATCH 23/42] test(PhoneMockup): adds test cases for PhoneMockup
 component

---
 src/PhoneMockup/PhoneMockup.test.tsx | 39 ++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/PhoneMockup/PhoneMockup.test.tsx

diff --git a/src/PhoneMockup/PhoneMockup.test.tsx b/src/PhoneMockup/PhoneMockup.test.tsx
new file mode 100644
index 00000000..4ada58fc
--- /dev/null
+++ b/src/PhoneMockup/PhoneMockup.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import PhoneMockup from './'
+
+describe('PhoneMockup', () => {
+  it('Should render PhoneMockup', () => {
+    render(<PhoneMockup />)
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<PhoneMockup className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<PhoneMockup dataTheme="light" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'light')
+  })
+
+  it('Should render children elements', () => {
+    const { getByText } = render(
+      <PhoneMockup>
+        <p>Phone content</p>
+      </PhoneMockup>
+    )
+    expect(getByText('Phone content')).toBeInTheDocument()
+  })
+
+  it('Should apply border color based on color prop', () => {
+    const { container } = render(<PhoneMockup color="primary" />)
+    expect(container.firstChild).toHaveClass('border-primary')
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<PhoneMockup ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+})

From c80a3dfd0d1c289c9fc00e6c3f2b85596a7a87cf Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 21:47:16 -0700
Subject: [PATCH 24/42] test(Progress): adds test cases for Progress component

---
 src/Progress/Progress.test.tsx | 38 ++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/Progress/Progress.test.tsx

diff --git a/src/Progress/Progress.test.tsx b/src/Progress/Progress.test.tsx
new file mode 100644
index 00000000..f0821a06
--- /dev/null
+++ b/src/Progress/Progress.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Progress from './'
+
+describe('Progress', () => {
+  it('Should render Progress', () => {
+    render(<Progress />)
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Progress className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Progress dataTheme="light" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'light')
+  })
+
+  it('Should apply color class based on color prop', () => {
+    const { container } = render(<Progress color="primary" />)
+    expect(container.firstChild).toHaveClass('progress-primary')
+  })
+
+  it('Should render progress bar with correct attributes', () => {
+    const { container } = render(<Progress value={50} max={100} />)
+    const progressElement = container.firstChild as HTMLProgressElement
+    expect(progressElement.tagName).toBe('PROGRESS')
+    expect(progressElement.value).toBe(50)
+    expect(progressElement.max).toBe(100)
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLProgressElement>()
+    render(<Progress ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+})

From 27279762265de23792e399f3e41577f03d43ab68 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Sun, 21 May 2023 21:55:40 -0700
Subject: [PATCH 25/42] test(RadialProgress): adds test cases for
 RadialProgress component

---
 src/RadialProgress/RadialProgress.test.tsx | 65 ++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/RadialProgress/RadialProgress.test.tsx

diff --git a/src/RadialProgress/RadialProgress.test.tsx b/src/RadialProgress/RadialProgress.test.tsx
new file mode 100644
index 00000000..ba2c49e4
--- /dev/null
+++ b/src/RadialProgress/RadialProgress.test.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import RadialProgress from './'
+
+describe('RadialProgress', () => {
+  it('Should render RadialProgress', () => {
+    render(<RadialProgress value={50} />)
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(
+      <RadialProgress className="custom-class" value={50} />
+    )
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(
+      <RadialProgress dataTheme="light" value={50} />
+    )
+    expect(container.firstChild).toHaveAttribute('data-theme', 'light')
+  })
+
+  it('Should apply color class based on color prop', () => {
+    const { container } = render(<RadialProgress color="primary" value={50} />)
+    expect(container.firstChild).toHaveClass('text-primary')
+  })
+
+  it('Should render with the correct value', () => {
+    const { container } = render(<RadialProgress value={75} />)
+    expect(container.firstChild).toHaveAttribute('aria-valuenow', '75')
+  })
+
+  it('Should limit the displayed value to a range between 0 and 100', () => {
+    const { container } = render(<RadialProgress value={150} />)
+    expect(container.firstChild).toHaveAttribute('aria-valuenow', '100')
+
+    const { container: container2 } = render(<RadialProgress value={-20} />)
+    expect(container2.firstChild).toHaveAttribute('aria-valuenow', '0')
+  })
+
+  it('Should apply size and thickness styles correctly', () => {
+    const { container } = render(
+      <RadialProgress size="6rem" thickness="6px" value={50} />
+    )
+    const radialProgressElement = container.firstChild as HTMLDivElement
+    expect(radialProgressElement).toHaveStyle('--size: 6rem')
+    expect(radialProgressElement).toHaveStyle('--thickness: 6px')
+  })
+
+  it('Should render children elements', () => {
+    const { container } = render(
+      <RadialProgress value={50}>
+        <span>Progress</span>
+      </RadialProgress>
+    )
+    expect(container.querySelector('span')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<RadialProgress ref={ref} value={50} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+})

From 9e4bf58184692561d77948bf1ab0e3c5f21fab76 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 23 May 2023 18:05:31 -0700
Subject: [PATCH 26/42] test(Stack): adds test cases for Stack component

---
 src/Stack/Stack.test.tsx | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/Stack/Stack.test.tsx

diff --git a/src/Stack/Stack.test.tsx b/src/Stack/Stack.test.tsx
new file mode 100644
index 00000000..03b867f1
--- /dev/null
+++ b/src/Stack/Stack.test.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Stack from './'
+
+describe('Stack', () => {
+  it('Should render Stack', () => {
+    render(<Stack />)
+  })
+
+  it('Should render children elements', () => {
+    const { container } = render(
+      <Stack>
+        <span>Child Element</span>
+      </Stack>
+    )
+    expect(container.querySelector('span')).toBeInTheDocument()
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Stack ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Stack className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Stack dataTheme="dark" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'dark')
+  })
+})

From 1c8837bb827b9517c2a6fb6eab352cae38e78638 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 23 May 2023 18:26:32 -0700
Subject: [PATCH 27/42] test(Stats): adds test cases for Stats component

---
 src/Stats/Stats.test.tsx | 47 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/Stats/Stats.test.tsx

diff --git a/src/Stats/Stats.test.tsx b/src/Stats/Stats.test.tsx
new file mode 100644
index 00000000..d988bce4
--- /dev/null
+++ b/src/Stats/Stats.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Stats from './'
+
+describe('Stats', () => {
+  it('Should render Stats', () => {
+    render(<Stats />)
+  })
+
+  it('Should render children elements', () => {
+    const { getByText } = render(
+      <Stats>
+        <Stats.Stat>Test 1</Stats.Stat>
+        <Stats.Stat>Test 2</Stats.Stat>
+      </Stats>
+    )
+
+    expect(getByText('Test 1')).toBeInTheDocument()
+    expect(getByText('Test 2')).toBeInTheDocument()
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Stats className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Stats ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Stats dataTheme="dark" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'dark')
+  })
+
+  it('Should apply horizontal modifier class', () => {
+    const { container } = render(<Stats horizontal />)
+    expect(container.firstChild).toHaveClass('stats-horizontal')
+  })
+
+  it('Should apply vertical modifier class', () => {
+    const { container } = render(<Stats vertical />)
+    expect(container.firstChild).toHaveClass('stats-vertical')
+  })
+})

From 4681538b320e223a2fdf96d797accf4f26b6bf8d Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 23 May 2023 18:56:31 -0700
Subject: [PATCH 28/42] test(Steps): adds test cases for Steps component

---
 src/Steps/Steps.test.tsx | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/Steps/Steps.test.tsx

diff --git a/src/Steps/Steps.test.tsx b/src/Steps/Steps.test.tsx
new file mode 100644
index 00000000..1f8c43d5
--- /dev/null
+++ b/src/Steps/Steps.test.tsx
@@ -0,0 +1,40 @@
+import { render } from '@testing-library/react'
+import Steps from './'
+
+describe('Steps component', () => {
+  it('Should render Steps', () => {
+    render(<Steps />)
+  })
+
+  it('Should render children elements', () => {
+    const { getByText } = render(
+      <Steps>
+        <Steps.Step>Step 1</Steps.Step>
+        <Steps.Step>Step 2</Steps.Step>
+      </Steps>
+    )
+
+    expect(getByText('Step 1')).toBeInTheDocument()
+    expect(getByText('Step 2')).toBeInTheDocument()
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Steps className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Steps dataTheme="dark" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'dark')
+  })
+
+  it('Should apply vertical modifier class', () => {
+    const { container } = render(<Steps vertical />)
+    expect(container.firstChild).toHaveClass('steps-vertical')
+  })
+
+  it('Should apply horizontal modifier class', () => {
+    const { container } = render(<Steps horizontal />)
+    expect(container.firstChild).toHaveClass('steps-horizontal')
+  })
+})

From 695adcac59cd3683d94c8524333778485e793738 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 23 May 2023 19:30:41 -0700
Subject: [PATCH 29/42] test(Swap): adds test cases for Swap component

---
 src/Swap/Swap.test.tsx | 47 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/Swap/Swap.test.tsx

diff --git a/src/Swap/Swap.test.tsx b/src/Swap/Swap.test.tsx
new file mode 100644
index 00000000..691caeae
--- /dev/null
+++ b/src/Swap/Swap.test.tsx
@@ -0,0 +1,47 @@
+import { render } from '@testing-library/react'
+import Swap from './'
+
+describe('Swap', () => {
+  it('Should render Swap', () => {
+    render(<Swap onElement="On" offElement="Off" />)
+  })
+
+  it('Should render onElement and offElement', () => {
+    const { getByText } = render(<Swap onElement="On" offElement="Off" />)
+    expect(getByText('On')).toBeInTheDocument()
+    expect(getByText('Off')).toBeInTheDocument()
+  })
+
+  it('Should apply active prop', () => {
+    const { container } = render(
+      <Swap onElement="On" offElement="Off" active />
+    )
+    expect(container.firstChild).toHaveClass('swap-active')
+  })
+
+  it('Should apply rotate prop', () => {
+    const { container } = render(
+      <Swap onElement="On" offElement="Off" rotate />
+    )
+    expect(container.firstChild).toHaveClass('swap-rotate')
+  })
+
+  it('Should apply flip prop', () => {
+    const { container } = render(<Swap onElement="On" offElement="Off" flip />)
+    expect(container.firstChild).toHaveClass('swap-flip')
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(
+      <Swap onElement="On" offElement="Off" className="custom-class" />
+    )
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(
+      <Swap onElement="On" offElement="Off" dataTheme="dark" />
+    )
+    expect(container.firstChild).toHaveAttribute('data-theme', 'dark')
+  })
+})

From 9d0a827e1df4774ce7a804747d29b30aaed1d49b Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 23 May 2023 20:25:36 -0700
Subject: [PATCH 30/42] test(Table): adds test cases for Table component

---
 src/Table/Table.test.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/Table/Table.test.tsx

diff --git a/src/Table/Table.test.tsx b/src/Table/Table.test.tsx
new file mode 100644
index 00000000..dae11e90
--- /dev/null
+++ b/src/Table/Table.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Table from './'
+
+describe('Table', () => {
+  it('Should render Table', () => {
+    render(<Table />)
+  })
+
+  it('Should apply additional class names', () => {
+    const { container } = render(<Table className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('Should forward the ref to the root element', () => {
+    const ref = React.createRef<HTMLTableElement>()
+    render(<Table ref={ref} />)
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('Should pass down data-theme prop', () => {
+    const { container } = render(<Table dataTheme="dark" />)
+    expect(container.firstChild).toHaveAttribute('data-theme', 'dark')
+  })
+
+  it('Should apply compact prop', () => {
+    const { container } = render(<Table compact />)
+    expect(container.firstChild).toHaveClass('table-compact')
+  })
+
+  it('Should apply zebra prop', () => {
+    const { container } = render(<Table zebra />)
+    expect(container.firstChild).toHaveClass('table-zebra')
+  })
+})

From 29f9153dec696597bad3d12218646142f84ed15b Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Wed, 24 May 2023 21:03:26 -0700
Subject: [PATCH 31/42] test(Theme): adds test cases for Theme component

---
 src/Theme/Theme.test.tsx | 52 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/Theme/Theme.test.tsx

diff --git a/src/Theme/Theme.test.tsx b/src/Theme/Theme.test.tsx
new file mode 100644
index 00000000..32cf6b3d
--- /dev/null
+++ b/src/Theme/Theme.test.tsx
@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react'
+import Theme from './'
+
+describe('Theme', () => {
+  it('Should render children elements', () => {
+    render(
+      <Theme>
+        <div>Child component</div>
+      </Theme>
+    )
+
+    const childComponent = screen.getByText('Child component')
+    expect(childComponent).toBeInTheDocument()
+  })
+
+  it('Should render with default theme if no dataTheme prop is provided', () => {
+    render(<Theme data-testid="theme-div" />)
+
+    const renderedDiv = screen.getByTestId('theme-div')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'light')
+  })
+
+  it('Should use closest ancestor theme if no dataTheme prop is provided', () => {
+    render(
+      <div data-theme="ancestor-theme" data-testid="ancestor-div">
+        <Theme />
+      </div>
+    )
+
+    const renderedDiv = screen.getByTestId('ancestor-div')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'ancestor-theme')
+  })
+
+  it('Should pass down data-theme prop to the rendered div', () => {
+    render(<Theme dataTheme="dark" data-testid="theme-div" />)
+
+    const renderedDiv = screen.getByTestId('theme-div')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'dark')
+  })
+
+  it('Should update theme when dataTheme prop changes', () => {
+    render(<Theme dataTheme="light" data-testid="theme-div-1" />)
+
+    let renderedDiv = screen.getByTestId('theme-div-1')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'light')
+
+    render(<Theme dataTheme="dark" data-testid="theme-div-2" />)
+
+    renderedDiv = screen.getByTestId('theme-div-2')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'dark')
+  })
+})

From bf71a6c7a19885f3fc03b3593de4bac6af1c14f4 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Wed, 24 May 2023 21:23:04 -0700
Subject: [PATCH 32/42] test(Toast): adds test cases for Toast component

---
 src/Toast/Toast.test.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/Toast/Toast.test.tsx

diff --git a/src/Toast/Toast.test.tsx b/src/Toast/Toast.test.tsx
new file mode 100644
index 00000000..403ac27c
--- /dev/null
+++ b/src/Toast/Toast.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import Toast from './'
+
+describe('Toast', () => {
+  it('Should render children elements', () => {
+    render(
+      <Toast>
+        <div>Child component</div>
+      </Toast>
+    )
+
+    const childComponent = screen.getByText('Child component')
+    expect(childComponent).toBeInTheDocument()
+  })
+
+  it('Should render with default horizontal and vertical options', () => {
+    render(<Toast data-testid="toast-div" />)
+
+    const renderedDiv = screen.getByTestId('toast-div')
+    expect(renderedDiv).toHaveClass('toast-end')
+    expect(renderedDiv).toHaveClass('toast-bottom')
+  })
+
+  it('Should render with custom horizontal and vertical options', () => {
+    render(<Toast horizontal="start" vertical="top" data-testid="toast-div" />)
+
+    const renderedDiv = screen.getByTestId('toast-div')
+    expect(renderedDiv).toHaveClass('toast-start')
+    expect(renderedDiv).toHaveClass('toast-top')
+  })
+
+  it('Should apply additional class names', () => {
+    render(<Toast className="custom-toast" data-testid="toast-div" />)
+
+    const renderedDiv = screen.getByTestId('toast-div')
+    expect(renderedDiv).toHaveClass('custom-toast')
+  })
+})

From 0e8d7b6e2f34e4a9177f1c2bc7f7305b6238e310 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Wed, 24 May 2023 21:39:50 -0700
Subject: [PATCH 33/42] test(Tooltip): adds test cases for Tooltip component

---
 src/Tooltip/Tooltip.test.tsx | 46 ++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/Tooltip/Tooltip.test.tsx

diff --git a/src/Tooltip/Tooltip.test.tsx b/src/Tooltip/Tooltip.test.tsx
new file mode 100644
index 00000000..55fd2671
--- /dev/null
+++ b/src/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import Tooltip from './'
+
+describe('Tooltip', () => {
+  it('Should render with message and children', () => {
+    render(
+      <Tooltip message="Tooltip message">
+        <button>Hover me</button>
+      </Tooltip>
+    )
+
+    const tooltipButton = screen.getByText('Hover me')
+    expect(tooltipButton).toBeInTheDocument()
+
+    const tooltipDiv = screen.getByRole('tooltip')
+    expect(tooltipDiv).toHaveAttribute('data-tip', 'Tooltip message')
+  })
+
+  it('Should render with default styles and position', () => {
+    render(<Tooltip message="Tooltip message" />)
+
+    const tooltipDiv = screen.getByRole('tooltip')
+    expect(tooltipDiv).toHaveClass('tooltip')
+    expect(tooltipDiv).not.toHaveClass('tooltip-open')
+    expect(tooltipDiv).not.toHaveClass('tooltip-primary')
+    expect(tooltipDiv).not.toHaveClass('tooltip-top')
+  })
+
+  it('Should render with custom styles and position', () => {
+    render(
+      <Tooltip message="Tooltip message" open color="primary" position="top" />
+    )
+
+    const tooltipDiv = screen.getByRole('tooltip')
+    expect(tooltipDiv).toHaveClass('tooltip-open')
+    expect(tooltipDiv).toHaveClass('tooltip-primary')
+    expect(tooltipDiv).toHaveClass('tooltip-top')
+  })
+
+  it('Should apply additional class names', () => {
+    render(<Tooltip message="Tooltip message" className="custom-class" />)
+
+    const tooltipDiv = screen.getByRole('tooltip')
+    expect(tooltipDiv).toHaveClass('custom-class')
+  })
+})

From ac5a906b821ebaeec9b075e59cd027db6df259f4 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Wed, 24 May 2023 22:11:06 -0700
Subject: [PATCH 34/42] test(WindowMockup): adds test cases for WindowMockup
 component

---
 src/WindowMockup/WindowMockup.test.tsx | 51 ++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/WindowMockup/WindowMockup.test.tsx

diff --git a/src/WindowMockup/WindowMockup.test.tsx b/src/WindowMockup/WindowMockup.test.tsx
new file mode 100644
index 00000000..07e9f068
--- /dev/null
+++ b/src/WindowMockup/WindowMockup.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react'
+import WindowMockup from './'
+
+describe('WindowMockup', () => {
+  it('Should render WindowMockup', () => {
+    render(<WindowMockup />)
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveClass('mockup-window')
+  })
+
+  it('Should render with frameColor and backgroundColor', () => {
+    render(
+      <WindowMockup frameColor="primary" backgroundColor="accent">
+        Content
+      </WindowMockup>
+    )
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveClass(
+      'mockup-window',
+      'border-primary',
+      'bg-primary'
+    )
+  })
+
+  it('Should render with border and borderColor', () => {
+    render(
+      <WindowMockup border borderColor="error">
+        Content
+      </WindowMockup>
+    )
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveClass('mockup-window', 'border', 'border-error')
+  })
+
+  it('Should apply additional class names', () => {
+    render(<WindowMockup className="custom-class">Content</WindowMockup>)
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveClass('mockup-window', 'custom-class')
+  })
+
+  it('Should render with data-theme attribute', () => {
+    render(<WindowMockup dataTheme="dark">Content</WindowMockup>)
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveAttribute('data-theme', 'dark')
+  })
+})

From 5f647920536126f771e67ad98695cf59d09bb874 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 30 May 2023 14:34:38 -0700
Subject: [PATCH 35/42] fix: image source for Carousel Storybook

---
 src/Carousel/Carousel.stories.tsx | 188 +++++++++++++++---------------
 1 file changed, 94 insertions(+), 94 deletions(-)

diff --git a/src/Carousel/Carousel.stories.tsx b/src/Carousel/Carousel.stories.tsx
index ada0dcc3..1a34f989 100644
--- a/src/Carousel/Carousel.stories.tsx
+++ b/src/Carousel/Carousel.stories.tsx
@@ -13,32 +13,32 @@ export const Default: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://api.lorem.space/image/burger?w=400&h=300&hash=8B7BCDC2"
-        alt="Burger"
+        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/burger?w=400&h=300&hash=500B67FB"
-        alt="Burger"
+        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/burger?w=400&h=300&hash=A89D0DE6"
-        alt="Burger"
+        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/burger?w=400&h=300&hash=225E6693"
-        alt="Burger"
+        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/burger?w=400&h=300&hash=9D9539E7"
-        alt="Burger"
+        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/burger?w=400&h=300&hash=BDC01094"
-        alt="Burger"
+        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/burger?w=400&h=300&hash=7F5AE56A"
-        alt="Burger"
+        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        alt="Fruits"
       />
     </Carousel>
   )
@@ -49,32 +49,32 @@ export const Snap: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://api.lorem.space/image/drink?w=400&h=300&hash=8B7BCDC2"
-        alt="Drinks"
+        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/drink?w=400&h=300&hash=500B67FB"
-        alt="Drinks"
+        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/drink?w=400&h=300&hash=A89D0DE6"
-        alt="Drinks"
+        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/drink?w=400&h=300&hash=225E6693"
-        alt="Drinks"
+        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/drink?w=400&h=300&hash=9D9539E7"
-        alt="Drinks"
+        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/drink?w=400&h=300&hash=BDC01094"
-        alt="Drinks"
+        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/drink?w=400&h=300&hash=7F5AE56A"
-        alt="Drinks"
+        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        alt="Fruits"
       />
     </Carousel>
   )
@@ -87,32 +87,32 @@ export const FullWidth: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="w-64 rounded-box">
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=8B7BCDC2"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=500B67FB"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=A89D0DE6"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=225E6693"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=9D9539E7"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=BDC01094"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=7F5AE56A"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        alt="Fruits"
       />
     </Carousel>
   )
@@ -125,32 +125,32 @@ export const HalfWidth: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="w-64 rounded-box">
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=8B7BCDC2"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=500B67FB"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=A89D0DE6"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=225E6693"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=9D9539E7"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=BDC01094"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=7F5AE56A"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        alt="Fruits"
       />
     </Carousel>
   )
@@ -163,32 +163,32 @@ export const Vertical: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="h-96 w-64 rounded-box">
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=8B7BCDC2"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=500B67FB"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=A89D0DE6"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=225E6693"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=9D9539E7"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=BDC01094"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        alt="Fruits"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/game?w=256&h=400&hash=7F5AE56A"
-        alt="Videogame Poster"
+        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        alt="Fruits"
       />
     </Carousel>
   )
@@ -202,20 +202,20 @@ export const Numbered: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=8B7BCDC2"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg"
+        alt="City"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=500B67FB"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.jpg"
+        alt="City"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=A89D0DE6"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1414694762283-acccc27bca85.jpg"
+        alt="City"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=225E6693"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.jpg"
+        alt="City"
       />
     </Carousel>
   )
@@ -228,20 +228,20 @@ export const Sequential: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=8B7BCDC2"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg"
+        alt="City"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=500B67FB"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.jpg"
+        alt="City"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=A89D0DE6"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1414694762283-acccc27bca85.jpg"
+        alt="City"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=225E6693"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.jpg"
+        alt="City"
       />
     </Carousel>
   )
@@ -260,20 +260,20 @@ export const CustomButton: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=8B7BCDC2"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg"
+        alt="City"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=500B67FB"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.jpg"
+        alt="City"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=A89D0DE6"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1414694762283-acccc27bca85.jpg"
+        alt="City"
       />
       <Carousel.Item
-        src="https://api.lorem.space/image/car?w=800&h=200&hash=225E6693"
-        alt="Car"
+        src="https://daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.jpg"
+        alt="City"
       />
     </Carousel>
   )

From c757fae730aef698be182525f2885243f2dcd0a0 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 30 May 2023 14:42:12 -0700
Subject: [PATCH 36/42] fix: image source for Hero Storybook

---
 src/Hero/Hero.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Hero/Hero.stories.tsx b/src/Hero/Hero.stories.tsx
index 84d744f7..b92cbb36 100644
--- a/src/Hero/Hero.stories.tsx
+++ b/src/Hero/Hero.stories.tsx
@@ -41,7 +41,7 @@ export const HeroWithFigure: Story<HeroProps> = (args) => {
     <Hero {...args}>
       <Hero.Content>
         <img
-          src="https://api.lorem.space/image/movie?w=260&h=400"
+          src="https://daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg"
           className="max-w-sm rounded-lg shadow-2xl"
         />
         <div>
@@ -108,7 +108,7 @@ export const HeroWithOverlayImage: Story<HeroProps> = (args) => {
     <Hero
       style={{
         backgroundImage:
-          'url(https://api.lorem.space/image/fashion?w=1000&h=800)',
+          'url(https://daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.jpg)',
       }}
     >
       <Hero.Overlay {...args} />

From 5949c121a7b52ea516778235dd4fba74e931d247 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 30 May 2023 14:44:41 -0700
Subject: [PATCH 37/42] fix: image source for Mask Storybook

---
 src/Mask/Mask.stories.tsx | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/Mask/Mask.stories.tsx b/src/Mask/Mask.stories.tsx
index 6899a1f2..9bdb0f94 100644
--- a/src/Mask/Mask.stories.tsx
+++ b/src/Mask/Mask.stories.tsx
@@ -13,7 +13,7 @@ export const Default: Story<MaskProps> = (args) => {
 }
 
 Default.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'squircle',
 }
 
@@ -21,7 +21,7 @@ export const MaskHeart: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 MaskHeart.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'heart',
 }
 
@@ -29,7 +29,7 @@ export const Hexagon: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Hexagon.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'hexagon',
 }
 
@@ -37,7 +37,7 @@ export const HexagonTwo: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 HexagonTwo.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'hexagon-2',
 }
 
@@ -45,7 +45,7 @@ export const Decagon: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Decagon.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'decagon',
 }
 
@@ -53,14 +53,14 @@ export const Pentagon: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Pentagon.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'pentagon',
 }
 export const Diamond: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Diamond.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'diamond',
 }
 
@@ -68,77 +68,77 @@ export const Square: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Square.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'square',
 }
 export const Circle: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Circle.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'circle',
 }
 export const Parallelogram: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Parallelogram.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'parallelogram',
 }
 export const ParallelogramTwo: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 ParallelogramTwo.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'parallelogram-2',
 }
 export const ParallelogramThree: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 ParallelogramThree.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'parallelogram-3',
 }
 export const ParallelogramFour: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 ParallelogramFour.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'parallelogram-4',
 }
 export const Star: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Star.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'star',
 }
 export const StarTwo: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 StarTwo.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'star-2',
 }
 export const Triangle: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Triangle.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'triangle',
 }
 export const TriangleTwo: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 TriangleTwo.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'triangle-2',
 }
 export const TriangleThree: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 TriangleThree.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'triangle-3',
 }
 
@@ -146,6 +146,6 @@ export const TriangleFour: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 TriangleFour.args = {
-  src: 'https://api.lorem.space/image/shoes?w=160&h=160',
+  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
   variant: 'triangle-4',
 }

From 98d0a2e61c15edd3e4b791b6cb4c2ee294ad0852 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 30 May 2023 14:59:10 -0700
Subject: [PATCH 38/42] fix: image source for Card Storybook

---
 src/Card/Card.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Card/Card.stories.tsx b/src/Card/Card.stories.tsx
index c73a6fe2..2ddf7ebf 100644
--- a/src/Card/Card.stories.tsx
+++ b/src/Card/Card.stories.tsx
@@ -13,7 +13,7 @@ export const Default: Story<CardProps> = (args) => {
   return (
     <Card {...args}>
       <Card.Image
-        src="https://api.lorem.space/image/shoes?w=400&h=225"
+        src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
         alt="Shoes"
       />
       <Card.Body>
@@ -35,7 +35,7 @@ export const Responsive: Story<CardProps> = (args) => {
       </div>
       <Card {...args} side="lg">
         <Card.Image
-          src="https://api.lorem.space/image/shoes?w=400&h=225"
+          src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
           alt="Shoes"
         />
         <Card.Body>
@@ -54,7 +54,7 @@ export const Centered: Story<CardProps> = (args) => {
   return (
     <Card {...args}>
       <Card.Image
-        src="https://api.lorem.space/image/shoes?w=400&h=225"
+        src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
         alt="Shoes"
       />
       <Card.Body className="items-center text-center">
@@ -72,7 +72,7 @@ export const ImageOverlay: Story<CardProps> = (args) => {
   return (
     <Card {...args} imageFull>
       <Card.Image
-        src="https://api.lorem.space/image/shoes?w=400&h=225"
+        src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
         alt="Shoes"
       />
       <Card.Body>

From 521277064aff174b0db5c0344a50b4ab4acbf1a5 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 30 May 2023 15:01:21 -0700
Subject: [PATCH 39/42] fix: image source for ChatBubble Storybook

---
 src/ChatBubble/ChatBubble.stories.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ChatBubble/ChatBubble.stories.tsx b/src/ChatBubble/ChatBubble.stories.tsx
index 6b52eb83..0d74fe56 100644
--- a/src/ChatBubble/ChatBubble.stories.tsx
+++ b/src/ChatBubble/ChatBubble.stories.tsx
@@ -40,7 +40,7 @@ export const Default: Story<DefaultControls> = ({
         </ChatBubble.Header>
       )}
       {avatar && (
-        <ChatBubble.Avatar src="https://placeimg.com/192/192/people" />
+        <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
       )}
       <ChatBubble.Message>You were my brother, Anakin.</ChatBubble.Message>
       {footer && <ChatBubble.Footer>Seen</ChatBubble.Footer>}
@@ -79,21 +79,21 @@ export const Side: Story<ChatBubbleProps> = (args) => (
 export const WithImage: Story<ChatBubbleProps> = (args) => (
   <>
     <ChatBubble>
-      <ChatBubble.Avatar src="https://placeimg.com/192/192/people" />
+      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
       <ChatBubble.Message>
         It was said that you would, destroy the Sith, not join them.
       </ChatBubble.Message>
     </ChatBubble>
 
     <ChatBubble>
-      <ChatBubble.Avatar src="https://placeimg.com/192/192/people" />
+      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
       <ChatBubble.Message>
         It was you who would bring balance to the Force
       </ChatBubble.Message>
     </ChatBubble>
 
     <ChatBubble>
-      <ChatBubble.Avatar src="https://placeimg.com/192/192/people" />
+      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
       <ChatBubble.Message>Not leave it in Darkness</ChatBubble.Message>
     </ChatBubble>
   </>
@@ -105,7 +105,7 @@ export const WithHeader: Story<ChatBubbleProps> = (args) => (
       <ChatBubble.Header>
         Obi-Wan Kenobi <ChatBubble.Time>12:45</ChatBubble.Time>
       </ChatBubble.Header>
-      <ChatBubble.Avatar src="https://placeimg.com/192/192/people" />
+      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
       <ChatBubble.Message>You were the Chosen One!</ChatBubble.Message>
     </ChatBubble>
 
@@ -113,7 +113,7 @@ export const WithHeader: Story<ChatBubbleProps> = (args) => (
       <ChatBubble.Header>
         Anakin <ChatBubble.Time>12:46</ChatBubble.Time>
       </ChatBubble.Header>
-      <ChatBubble.Avatar src="https://placeimg.com/192/192/people" />
+      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
       <ChatBubble.Message>I hate you!</ChatBubble.Message>
     </ChatBubble>
   </>
@@ -122,13 +122,13 @@ export const WithHeader: Story<ChatBubbleProps> = (args) => (
 export const WithFooter: Story<ChatBubbleProps> = (args) => (
   <>
     <ChatBubble>
-      <ChatBubble.Avatar src="https://placeimg.com/192/192/people" />
+      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
       <ChatBubble.Message>You were the Chosen One!</ChatBubble.Message>
       <ChatBubble.Footer>Delivered</ChatBubble.Footer>
     </ChatBubble>
 
     <ChatBubble end>
-      <ChatBubble.Avatar src="https://placeimg.com/192/192/people" />
+      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
       <ChatBubble.Message>I hate you!</ChatBubble.Message>
       <ChatBubble.Footer>Seen at 12:46</ChatBubble.Footer>
     </ChatBubble>

From d86671043bc96cf34efa2249af3f65409edead81 Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 30 May 2023 15:07:32 -0700
Subject: [PATCH 40/42] fix: image source for Navbar Storybook

---
 src/Navbar/Navbar.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Navbar/Navbar.stories.tsx b/src/Navbar/Navbar.stories.tsx
index 05897dcb..bfab0b9b 100644
--- a/src/Navbar/Navbar.stories.tsx
+++ b/src/Navbar/Navbar.stories.tsx
@@ -173,7 +173,7 @@ export const WithSearchInputAndDropdown: Story<NavbarProps> = (args) => {
           <Dropdown end>
             <Button color="ghost" className="avatar" shape="circle">
               <div className="w-10 rounded-full">
-                <img src="https://api.lorem.space/image/face?hash=33791" />
+                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
               </div>
             </Button>
             <Dropdown.Menu className="w-52 menu-compact">
@@ -240,7 +240,7 @@ export const WithIconIndicatorAndDropdown: Story<NavbarProps> = (args) => {
           <Dropdown end>
             <Button color="ghost" className="avatar" shape="circle">
               <div className="w-10 rounded-full">
-                <img src="https://api.lorem.space/image/face?hash=33791" />
+                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
               </div>
             </Button>
             <Dropdown.Menu className="w-52 menu-compact">

From 82d82ecc6a78d7dc9388ebd12a97ca0da7c4b38f Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 30 May 2023 15:12:18 -0700
Subject: [PATCH 41/42] fix: image source for Stack Storybook

---
 src/Stack/Stack.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Stack/Stack.stories.tsx b/src/Stack/Stack.stories.tsx
index edd66555..1e464f62 100644
--- a/src/Stack/Stack.stories.tsx
+++ b/src/Stack/Stack.stories.tsx
@@ -29,17 +29,17 @@ export const StackedImages: Story<StackProps> = (args) => {
   return (
     <Stack {...args}>
       <img
-        src="https://api.lorem.space/image/face?w=100&h=100&hash=8B7BCDC2"
+        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
         alt="Image 1"
         className="rounded"
       />
       <img
-        src="https://api.lorem.space/image/face?w=100&h=100&hash=500B67FB"
+        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
         alt="Image 2"
         className="rounded"
       />
       <img
-        src="https://api.lorem.space/image/face?w=100&h=100&hash=A89D0DE6"
+        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
         alt="Image 3"
         className="rounded"
       />

From c580cbcdda90e3c23f51882d0c670d7afa574e4f Mon Sep 17 00:00:00 2001
From: Jack <78120697+Jack-2077@users.noreply.github.com>
Date: Tue, 30 May 2023 15:13:50 -0700
Subject: [PATCH 42/42] fix: image source for Stats Storybook

---
 src/Stats/Stats.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Stats/Stats.stories.tsx b/src/Stats/Stats.stories.tsx
index 695a533f..75eacd56 100644
--- a/src/Stats/Stats.stories.tsx
+++ b/src/Stats/Stats.stories.tsx
@@ -92,7 +92,7 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
           <Avatar
             size="sm"
             online={true}
-            src="https://api.lorem.space/image/face?w=128&h=128"
+            src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
             shape="circle"
           ></Avatar>
         </Stat.Item>