diff --git a/examples/next/package-lock.json b/examples/next/package-lock.json
index 19e6cb5e..980d8adc 100644
--- a/examples/next/package-lock.json
+++ b/examples/next/package-lock.json
@@ -3524,7 +3524,7 @@
     "node_modules/@trilogy-ds/react": {
       "version": "0.0.1-beta.78",
       "resolved": "file:trilogy-ds.tgz",
-      "integrity": "sha512-eoAMjjC945XL1ftgIkAQmjOsF+FlMpqsOnb/iz6BJ9i+ch98tFlOKeFoI3LlCZIZAi0F3d1ws2MnIlc8RZhFPg==",
+      "integrity": "sha512-TGiTUjSvXOpc/yZpR7aF9vqPhRsGYLFMKLjor5xpYIKjpzXan3CGlLJLZdSB6KjV1wKIB5cPPLe+7Z1/8yJmKA==",
       "dev": true,
       "dependencies": {
         "@ptomasroos/react-native-multi-slider": "^2.2.2",
diff --git a/examples/next/src/app/autocomplete/page.tsx b/examples/next/src/app/autocomplete/page.tsx
new file mode 100644
index 00000000..1d144021
--- /dev/null
+++ b/examples/next/src/app/autocomplete/page.tsx
@@ -0,0 +1,44 @@
+import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from '@trilogy-ds/react/lib/components/accordion'
+import '@trilogy-ds/styles/dist/default/trilogy.css'
+export default function Home() {
+  return (
+    <div>
+      <main>
+        <Accordion id='accordion-1'>
+          <AccordionItem id='ONE'>
+            <AccordionHeader>
+              <p>Hello World 1</p>
+            </AccordionHeader>
+            <AccordionBody data-id='totooooo-test-id'>
+              <p>Lorem ipsum dolor sit amet lorem</p>
+            </AccordionBody>
+          </AccordionItem>
+          <AccordionItem id='TWO'>
+            <AccordionHeader>
+              <p>Hello World 2</p>
+            </AccordionHeader>
+            <AccordionBody>
+              <p>Lorem ipsum dolor sit amet</p>
+            </AccordionBody>
+          </AccordionItem>
+          <AccordionItem id='THREE'>
+            <AccordionHeader>
+              <p>Hello World 2</p>
+            </AccordionHeader>
+            <AccordionBody>
+              <p>Collpased by default</p>
+            </AccordionBody>
+          </AccordionItem>
+          <AccordionItem disabled id='FOUR'>
+            <AccordionHeader>
+              <p>Hello World 3</p>
+            </AccordionHeader>
+            <AccordionBody>
+              <p>Lorem ipsum dolor sit amet</p>
+            </AccordionBody>
+          </AccordionItem>
+        </Accordion>
+      </main>
+    </div>
+  )
+}
diff --git a/examples/next/trilogy-ds.tgz b/examples/next/trilogy-ds.tgz
index a70ce83d..4b3afc9d 100644
Binary files a/examples/next/trilogy-ds.tgz and b/examples/next/trilogy-ds.tgz differ
diff --git a/packages/react/components/accordion/Accordion.native.tsx b/packages/react/components/accordion/Accordion.native.tsx
index 796d9d1d..32234754 100644
--- a/packages/react/components/accordion/Accordion.native.tsx
+++ b/packages/react/components/accordion/Accordion.native.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { StyleSheet, View } from "react-native"
-import { AccordionProps } from "./AccordionProps"
-import { ComponentName } from "@/components/enumsComponentsName"
+import { AccordionProps } from '@/components/accordion/AccordionProps'
+import { ComponentName } from '@/components/enumsComponentsName'
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
 
 /**
  * Accordion Component
@@ -10,7 +10,7 @@ import { ComponentName } from "@/components/enumsComponentsName"
 const Accordion = ({ ...others }: AccordionProps): JSX.Element => {
   const styles = StyleSheet.create({
     accordion: {
-      width: "100%",
+      width: '100%',
       minHeight: 10,
       borderRadius: 6,
     },
diff --git a/packages/react/components/accordion/Accordion.tsx b/packages/react/components/accordion/Accordion.tsx
index 7b0ab68f..a8064cde 100644
--- a/packages/react/components/accordion/Accordion.tsx
+++ b/packages/react/components/accordion/Accordion.tsx
@@ -1,7 +1,7 @@
+import { AccordionProps } from '@/components/accordion/AccordionProps'
 import { hashClass } from '@/helpers/hashClassesHelpers'
 import clsx from 'clsx'
-import * as React from 'react'
-import { AccordionProps } from './AccordionProps'
+import React from 'react'
 
 /**
  * Accordion Component
diff --git a/packages/react/components/accordion/AccordionProps.ts b/packages/react/components/accordion/AccordionProps.ts
index f2cabaf9..01446eee 100644
--- a/packages/react/components/accordion/AccordionProps.ts
+++ b/packages/react/components/accordion/AccordionProps.ts
@@ -1,7 +1,4 @@
-/**
- * Accordion Interface
- */
-import { CommonProps } from '../../objects/facets/CommonProps'
+import { CommonProps } from '@/objects/facets/CommonProps'
 
 export interface AccordionProps extends CommonProps {
   children: React.ReactNode
diff --git a/packages/react/components/accordion/index.ts b/packages/react/components/accordion/index.ts
index 365ec97b..423a8c88 100644
--- a/packages/react/components/accordion/index.ts
+++ b/packages/react/components/accordion/index.ts
@@ -1,6 +1,6 @@
-import Accordion from './Accordion'
-import AccordionItem from './item'
-import AccordionHeader from './item/header'
-import AccordionBody from './item/body'
+import Accordion from '@/components/accordion/Accordion'
+import AccordionItem from '@/components/accordion/item'
+import AccordionBody from '@/components/accordion/item/body'
+import AccordionHeader from '@/components/accordion/item/header'
 
-export { Accordion, AccordionItem, AccordionHeader, AccordionBody }
+export { Accordion, AccordionBody, AccordionHeader, AccordionItem }
diff --git a/packages/react/components/accordion/item/AccordionItem.tsx b/packages/react/components/accordion/item/AccordionItem.tsx
index 77324d4d..2ca7e84e 100644
--- a/packages/react/components/accordion/item/AccordionItem.tsx
+++ b/packages/react/components/accordion/item/AccordionItem.tsx
@@ -1,8 +1,7 @@
-import { hashClass } from '@/helpers'
+import { AccordionItemProps } from '@/components/accordion/item/AccordionItemProps'
+import { hashClass } from '@/helpers/hashClassesHelpers'
 import clsx from 'clsx'
-import React, { useRef } from 'react'
-import shortid from 'shortid'
-import { AccordionItemProps, OnClickEvent } from './AccordionItemProps'
+import React from 'react'
 
 /**
  * Accordion Item Component
@@ -17,15 +16,12 @@ const AccordionItem = ({
   open,
   className,
   children,
-  id = shortid.generate(),
+  id = React.useId(),
   onClick,
   disabled,
   ...others
 }: AccordionItemProps): JSX.Element => {
-  const ref = useRef<HTMLDetailsElement>(null)
-
   const classes = hashClass(clsx('accordion-item', className))
-
   const ariaProps: { 'aria-disabled'?: boolean; tabIndex?: number } = {}
 
   if (disabled) {
@@ -34,16 +30,7 @@ const AccordionItem = ({
   }
 
   return (
-    <details
-      open={open}
-      {...ariaProps}
-      data-testid={id}
-      className={classes}
-      ref={ref}
-      id={id}
-      {...others}
-      onClick={(e: OnClickEvent) => (onClick ? onClick(e) : null)}
-    >
+    <details open={open} data-testid={id} className={classes} id={id} onClick={onClick} {...ariaProps} {...others}>
       {children}
     </details>
   )
diff --git a/packages/react/components/accordion/item/AccordionItemProps.ts b/packages/react/components/accordion/item/AccordionItemProps.ts
index 806dc080..f7a77c60 100644
--- a/packages/react/components/accordion/item/AccordionItemProps.ts
+++ b/packages/react/components/accordion/item/AccordionItemProps.ts
@@ -1,4 +1,4 @@
-import { CommonProps } from '../../../objects/facets/CommonProps'
+import { CommonProps } from '@/objects/facets/CommonProps'
 
 export type TargetElement = HTMLElement & {
   active?: boolean
diff --git a/packages/react/components/accordion/item/body/AccordionBody.native.tsx b/packages/react/components/accordion/item/body/AccordionBody.native.tsx
index c22e647f..860da1ba 100644
--- a/packages/react/components/accordion/item/body/AccordionBody.native.tsx
+++ b/packages/react/components/accordion/item/body/AccordionBody.native.tsx
@@ -1,16 +1,13 @@
-import * as React from "react"
-import { StyleSheet, View } from "react-native"
-import { AccordionBodyProps } from "./AccordionBodyProps"
-import { ComponentName } from "@/components/enumsComponentsName"
+import { AccordionBodyProps } from '@/components/accordion/item/body/AccordionBodyProps'
+import { ComponentName } from '@/components/enumsComponentsName'
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
 
 /**
  * Accordion Body Component
  * @param children {React.ReactNode} Children for Accordion body
  */
-const AccordionBody = ({
-  children,
-  ...others
-}: AccordionBodyProps): JSX.Element => {
+const AccordionBody = ({ children, ...others }: AccordionBodyProps): JSX.Element => {
   const styles = StyleSheet.create({
     accordionBody: {},
   })
diff --git a/packages/react/components/accordion/item/body/AccordionBody.tsx b/packages/react/components/accordion/item/body/AccordionBody.tsx
index 3ddf384e..7872c06d 100644
--- a/packages/react/components/accordion/item/body/AccordionBody.tsx
+++ b/packages/react/components/accordion/item/body/AccordionBody.tsx
@@ -1,7 +1,7 @@
-import { hashClass } from '@/helpers'
+import { AccordionBodyProps } from '@/components/accordion/item/body/AccordionBodyProps'
+import { hashClass } from '@/helpers/hashClassesHelpers'
 import clsx from 'clsx'
-import * as React from 'react'
-import { AccordionBodyProps } from './AccordionBodyProps'
+import React from 'react'
 
 /**
  * Accordion Body Component
diff --git a/packages/react/components/accordion/item/body/AccordionBodyProps.ts b/packages/react/components/accordion/item/body/AccordionBodyProps.ts
index 64b52c2e..dae579bb 100644
--- a/packages/react/components/accordion/item/body/AccordionBodyProps.ts
+++ b/packages/react/components/accordion/item/body/AccordionBodyProps.ts
@@ -1,5 +1,5 @@
-import { CommonProps } from '../../../../objects/facets/CommonProps'
-import { Dev } from '@/objects'
+import { CommonProps } from '@/objects/facets/CommonProps'
+import { Dev } from '@/objects/facets/Dev'
 
 /**
  * Accordion Body Interface
diff --git a/packages/react/components/accordion/item/body/index.ts b/packages/react/components/accordion/item/body/index.ts
index d82f2418..6137c219 100644
--- a/packages/react/components/accordion/item/body/index.ts
+++ b/packages/react/components/accordion/item/body/index.ts
@@ -1,3 +1,3 @@
-import AccordionBody from './AccordionBody'
+import AccordionBody from '@/components/accordion/item/body/AccordionBody'
 
 export default AccordionBody
diff --git a/packages/react/components/accordion/item/header/AccordionHeader.native.tsx b/packages/react/components/accordion/item/header/AccordionHeader.native.tsx
index f2df2ae1..47332c87 100644
--- a/packages/react/components/accordion/item/header/AccordionHeader.native.tsx
+++ b/packages/react/components/accordion/item/header/AccordionHeader.native.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { StyleSheet, View } from "react-native"
-import { AccordionHeaderProps } from "./AccordionHeaderProps"
-import { ComponentName } from "@/components/enumsComponentsName"
+import { AccordionHeaderProps } from '@/components/accordion/item/header/AccordionHeaderProps'
+import { ComponentName } from '@/components/enumsComponentsName'
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
 
 /**
  * Accordion Header
@@ -10,9 +10,9 @@ import { ComponentName } from "@/components/enumsComponentsName"
 const AccordionHeader = ({ children }: AccordionHeaderProps): JSX.Element => {
   const styles = StyleSheet.create({
     header: {
-      maxWidth: "95%",
-      minWidth: "95%",
-      width: "95%"
+      maxWidth: '95%',
+      minWidth: '95%',
+      width: '95%',
     },
   })
 
diff --git a/packages/react/components/accordion/item/header/AccordionHeader.tsx b/packages/react/components/accordion/item/header/AccordionHeader.tsx
index d5071450..cc57f3bc 100644
--- a/packages/react/components/accordion/item/header/AccordionHeader.tsx
+++ b/packages/react/components/accordion/item/header/AccordionHeader.tsx
@@ -1,7 +1,7 @@
-import { hashClass } from '@/helpers'
+import { AccordionHeaderProps } from '@/components/accordion/item/header/AccordionHeaderProps'
+import { hashClass } from '@/helpers/hashClassesHelpers'
 import clsx from 'clsx'
-import * as React from 'react'
-import { AccordionHeaderProps } from './AccordionHeaderProps'
+import React from 'react'
 
 /**
  * Accordion Header
diff --git a/packages/react/components/accordion/item/header/AccordionHeaderProps.ts b/packages/react/components/accordion/item/header/AccordionHeaderProps.ts
index 999a377c..ee703eab 100644
--- a/packages/react/components/accordion/item/header/AccordionHeaderProps.ts
+++ b/packages/react/components/accordion/item/header/AccordionHeaderProps.ts
@@ -1,4 +1,4 @@
-import { CommonProps } from '../../../../objects/facets/CommonProps'
+import { CommonProps } from '@/objects/facets/CommonProps'
 
 /**
  * AccordionHeader Interface
diff --git a/packages/react/components/accordion/item/header/index.ts b/packages/react/components/accordion/item/header/index.ts
index 39319429..0a572ad1 100644
--- a/packages/react/components/accordion/item/header/index.ts
+++ b/packages/react/components/accordion/item/header/index.ts
@@ -1,3 +1,3 @@
-import AccordionHeader from './AccordionHeader'
+import AccordionHeader from '@/components/accordion/item/header/AccordionHeader'
 
 export default AccordionHeader
diff --git a/packages/react/components/accordion/item/index.ts b/packages/react/components/accordion/item/index.ts
index 0234ca18..fd3d28d0 100644
--- a/packages/react/components/accordion/item/index.ts
+++ b/packages/react/components/accordion/item/index.ts
@@ -1,3 +1,3 @@
-import AccordionItem from './AccordionItem'
+import AccordionItem from '@/components/accordion/item/AccordionItem'
 
 export default AccordionItem