From 842e17df8bc6720d4bb0424e1fc22148feb56c3f Mon Sep 17 00:00:00 2001
From: gnxcode <genixxavier@gmail.com>
Date: Fri, 19 Jan 2024 18:53:32 -0500
Subject: [PATCH 1/3] Feat: Add phase documentation

---
 docs/components/phase.mdx                   | 346 ++++++++++++++++++++
 package-lock.json                           |  12 +-
 package.json                                |   2 +-
 src/components/Layout/SideBarDocs.tsx       |   5 +
 src/hooks/useGetComponents.tsx              |   4 +-
 src/modules/docs/components/PhaseCustom.tsx |  29 ++
 src/modules/docs/components/index.ts        |   1 +
 src/theme/global.css                        |  15 +
 8 files changed, 406 insertions(+), 8 deletions(-)
 create mode 100644 docs/components/phase.mdx
 create mode 100644 src/modules/docs/components/PhaseCustom.tsx

diff --git a/docs/components/phase.mdx b/docs/components/phase.mdx
new file mode 100644
index 0000000..b0c3d98
--- /dev/null
+++ b/docs/components/phase.mdx
@@ -0,0 +1,346 @@
+---
+product: dd360-ds
+title: React Phase component
+components: Phase
+---
+
+<br id='top' />
+<br />
+
+<Label>Components</Label>
+
+# <HeaderDocCustom title="Phase" pathUrl="components-phase--phase" />
+
+The Phase component is a user interface component that is used to display the status of a process. This component has three variants: <TagDocs text='phases' />, <TagDocs text='status' /> and <TagDocs text='quarters' />
+
+<br />
+<br />
+##### <span name="floating-nav">Imports</span>
+
+The first alternative is recommended since they can reduce the application bundle
+
+<WindowEditor codeString="import Phase from 'dd360-ds/Phase'" />
+<WindowEditor codeString="import { Phase } from 'dd360-ds'" />
+
+<br />
+##### <span name="floating-nav">Usage</span>
+
+Use the Phase component as shown below:
+
+<Playground className="gap-y-2">
+    <PhaseCustom icon="check" className="w-44 h-40" status="completed" numberPhase={1} textTag="Completed" />
+</Playground>
+
+The code snippet below shows how to use the Phase component:
+
+<WindowEditor
+codeString={`import { Phase } from 'dd360-ds'
+
+<Phase
+    className="w-44 h-40"
+    icon={CheckIcon}
+    status="completed"
+    textTag="Completed"
+    numberPhase={1}
+/>`}
+/>
+
+<br />
+##### <span name="floating-nav">Variant Phases</span>
+
+This variant <TagDocs text='phases' />, you can customize it with the following props:
+<CustomTheme>
+  <List>
+    <List.Item>icon: Specifies the icon of the Phase.</List.Item>
+    <List.Item>numberPhase: Specifies the number of the Phase.</List.Item>
+    <List.Item>title: Specifies the title of the Phase. The default value is Title.</List.Item>
+    <List.Item>textTag: Specifies the phase status text. The default value is Pending.</List.Item>
+    <List.Item>status: Specifies the state of the phase.The values they can receive are: completed, active and default. The default value is default.</List.Item>
+    <List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
+  </List>
+</CustomTheme>
+
+<Playground className="gap-y-2">
+    <Flex className="flex" gap="4">
+        <PhaseCustom title="Title" icon="check" className="w-44 h-40" status="completed" numberPhase={1} textTag="Completed" />
+        <PhaseCustom title="Title" icon="search" className="w-44 h-40" status="active" numberPhase={2} textTag="In progress" />
+        <PhaseCustom title="Title" icon="balance" className="w-44 h-40" status="default" numberPhase={3} textTag="Pendding" />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Phase } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <Phase
+              title="Title"
+              className="w-44 h-40"
+              icon={CheckIcon}
+              status="completed"
+              textTag="Completed"
+              numberPhase={1}
+            />
+            <Phase
+              title="Title"
+              className="w-44 h-40"
+              icon={DocumentMagnifyingGlassIcon}
+              status="active"
+              textTag="In progress"
+              numberPhase={2}
+            />
+            <Phase
+              title="Title"
+              className="w-44 h-40"
+              icon={ScaleIcon}
+              status="default"
+              textTag="Pendiente"
+              numberPhase={3}
+            />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">Variant Status</span>
+
+This variant <TagDocs text='status' />, you can customize it with the following props:
+<CustomTheme>
+  <List>
+    <List.Item>title: Specifies the title of the Phase. The default value is Title.</List.Item>
+    <List.Item>subtitle: Specifies the subtitle of the Status.</List.Item>
+    <List.Item>textTag: Specifies the status text. The default value is Pending.</List.Item>
+    <List.Item>status: Specifies the status of the state. The values they can receive are: success, active and selected. The default value is selected.</List.Item>
+    <List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
+  </List>
+</CustomTheme>
+
+<Playground className="gap-y-2">
+    <Flex gap="4">
+        <Phase
+            className="w-44"
+            title="Title"
+            subtitle="Subtitle"
+            variant="status"
+            status="success"
+            textTag="Completed"
+        />
+        <Phase
+            className="w-44"
+            title="Title"
+            subtitle="Subtitle"
+            variant="status"
+            status="active"
+            textTag="Pendiente"
+        />
+        <Phase
+            className="w-44"
+            title="Title"
+            subtitle="Subtitle"
+            variant="status"
+            status="selected"
+            textTag="Neutral"
+        />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Phase } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <Phase
+              className="w-44"
+              title="Title"
+              subtitle="Subtitle"
+              variant="status"
+              status="success"
+              textTag="Completed"
+            />
+            <Phase
+              className="w-44"
+              title="Title"
+              subtitle="Subtitle"
+              variant="status"
+              status="active"
+              textTag="Pendiente"
+            />
+            <Phase
+              className="w-44"
+              title="Title"
+              subtitle="Subtitle"
+              variant="status"
+              status="selected"
+              textTag="Neutral"
+            />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">Variant Quarters</span>
+
+This variant <TagDocs text='quarters' />, you can customize it with the following props:
+<CustomTheme>
+  <List>
+    <List.Item>icon: Specifies the icon of the Quarters.</List.Item>
+    <List.Item>title: Specifies the title of the Quarter. The default value is Title.</List.Item>
+    <List.Item>status: Specifies the status of the state. The values they can receive are: success, active and selected. The default value is selected.</List.Item>
+    <List.Item>listData: Specifies the data of the Quarters.</List.Item>
+    <List.Item>className: Specifies the classes necessary to use the phase component, for example in width and height of the component.</List.Item>
+  </List>
+</CustomTheme>
+
+<Playground className="gap-y-2">
+    <Flex className="flex" gap="4">
+        <PhaseCustom 
+            title="2022" 
+            icon="calendar" 
+            className="w-44" 
+            status="active" 
+            variant="quarters" 
+            listData={[
+                {
+                  completed: true,
+                  label: "Anuales",
+                },
+                {
+                  completed: true,
+                  label: "4° Trimestre",
+                },
+                {
+                  completed: true,
+                  label: "3° Trimestre",
+                },
+                {
+                  completed: true,
+                  label: "2° Trimestre",
+                },
+                {
+                  completed: false,
+                  label: "1° Trimestre",
+                },
+            ]} />
+        <PhaseCustom 
+            title="2022" 
+            icon="calendar" 
+            className="w-44" 
+            status="selected" 
+            variant="quarters" 
+            listData={[
+                {
+                  completed: true,
+                  label: "Anuales",
+                },
+                {
+                  completed: true,
+                  label: "4° Trimestre",
+                },
+                {
+                  completed: true,
+                  label: "3° Trimestre",
+                },
+                {
+                  completed: true,
+                  label: "2° Trimestre",
+                },
+                {
+                  completed: false,
+                  label: "1° Trimestre",
+                },
+            ]} />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Phase } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <Phase
+              className="w-44"
+              variant="quarters"
+              status="active"
+              icon={CalendarIcon}
+              listData={[
+                {
+                  completed: true,
+                  label: "Anuales",
+                },
+                {
+                  completed: true,
+                  label: "4° Trimestre",
+                },
+                {
+                  completed: true,
+                  label: "3° Trimestre",
+                },
+                {
+                  completed: true,
+                  label: "2° Trimestre",
+                },
+                {
+                  completed: false,
+                  label: "1° Trimestre",
+                },
+              ]}
+            />
+            <Phase
+              className="w-44"
+              variant="quarters"
+              status="selected"
+              icon={CalendarIcon}
+              listData={[
+                {
+                  completed: true,
+                  label: "Anuales",
+                },
+                {
+                  completed: true,
+                  label: "4° Trimestre",
+                },
+                {
+                  completed: true,
+                  label: "3° Trimestre",
+                },
+                {
+                  completed: true,
+                  label: "2° Trimestre",
+                },
+                {
+                  completed: false,
+                  label: "1° Trimestre",
+                },
+              ]}
+            />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+    dataTable={[
+        { title: 'title', default: 'Title', types: ['string'], required: true },
+        { title: 'subtitle', default: '-', types: ['string']},
+        { title: 'icon', types: ['React.ElementType'] },
+        { title: 'variant', default: 'phases', types: ['phases', 'status', 'quarters'] },
+        { title: 'status', default: 'default', types: ['default', 'active', 'success', 'selected', 'completed'] },
+        { title: 'textTag', default: 'Pending', types: ['string'] },
+        { title: 'numberPhase', default: '-', types: ['number'] },
+        { title: 'listData', default: '-', types: ['array'] },
+        { title: 'className', default: '-', types: ['string'] }
+    ]}
+
+/>
+
+<AlertReactKnowledge />
+
+<BackAndForwardController />
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9e6eade..4f550d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@algolia/autocomplete-core": "^1.8.3",
         "@docsearch/react": "^3.5.1",
         "@vercel/analytics": "^1.0.1",
-        "dd360-ds": "6.20.1",
+        "dd360-ds": "https://pkg.csb.dev/dd3tech/bui/commit/a46e1955/dd360-ds",
         "dd360-utils": "18.1.0",
         "gray-matter": "^4.0.3",
         "i18next": "^22.4.9",
@@ -1526,8 +1526,9 @@
     },
     "node_modules/dd360-ds": {
       "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz",
-      "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==",
+      "resolved": "https://pkg.csb.dev/dd3tech/bui/commit/a46e1955/dd360-ds",
+      "integrity": "sha512-+Gr4qh4WkywlEBr3Gqc9xyc4j26yoLV+2rNDNBSibhS4Kt8GVd3fAMt/XaNONvRvUZYKmTYUhJhyYDRbc8n9kw==",
+      "license": "MIT",
       "dependencies": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
@@ -8005,9 +8006,8 @@
       "dev": true
     },
     "dd360-ds": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz",
-      "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==",
+      "version": "https://pkg.csb.dev/dd3tech/bui/commit/a46e1955/dd360-ds",
+      "integrity": "sha512-+Gr4qh4WkywlEBr3Gqc9xyc4j26yoLV+2rNDNBSibhS4Kt8GVd3fAMt/XaNONvRvUZYKmTYUhJhyYDRbc8n9kw==",
       "requires": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
diff --git a/package.json b/package.json
index c6cb680..500e7ff 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "6.20.1",
+    "dd360-ds": "https://pkg.csb.dev/dd3tech/bui/commit/a46e1955/dd360-ds",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",
diff --git a/src/components/Layout/SideBarDocs.tsx b/src/components/Layout/SideBarDocs.tsx
index 2d23a54..4730c6f 100644
--- a/src/components/Layout/SideBarDocs.tsx
+++ b/src/components/Layout/SideBarDocs.tsx
@@ -356,6 +356,11 @@ export const components: ComponentObjectProps = {
         label: 'Portal',
         pathname: 'portal'
       },
+      {
+        label: 'Phase',
+        pathname: 'phase',
+        badge: BADGE_TYPES.new
+      },
       {
         label: 'Progress',
         pathname: 'progress',
diff --git a/src/hooks/useGetComponents.tsx b/src/hooks/useGetComponents.tsx
index b9a3e50..4768113 100644
--- a/src/hooks/useGetComponents.tsx
+++ b/src/hooks/useGetComponents.tsx
@@ -29,7 +29,8 @@ import {
   SwitchCustom,
   AlertReactKnowledge,
   HeaderDocCustom,
-  TagCustom
+  TagCustom,
+  PhaseCustom
 } from '@/modules/docs'
 import { TransitionCustom } from '@/components/Layout'
 import { useTheme } from '@/store/theme-store'
@@ -153,6 +154,7 @@ export function useGetComponents() {
     AlertReactKnowledge,
     HeaderDocCustom,
     TagCustom,
+    PhaseCustom,
     ...Components,
     SideBar
     // Add other custom components here as needed ---| Here |---
diff --git a/src/modules/docs/components/PhaseCustom.tsx b/src/modules/docs/components/PhaseCustom.tsx
new file mode 100644
index 0000000..bd12eae
--- /dev/null
+++ b/src/modules/docs/components/PhaseCustom.tsx
@@ -0,0 +1,29 @@
+import { Phase, IPhaseProps } from 'dd360-ds'
+import { InformationCircleIcon } from '@heroicons/react/solid'
+import {
+  CalendarIcon,
+  ScaleIcon,
+  DocumentAddIcon,
+  CheckIcon
+} from '@heroicons/react/outline'
+
+interface CustomTagProps {
+  icon?: 'check' | 'search' | 'balance' | 'calendar'
+  variant?: IPhaseProps['variant']
+  status: 'default' | 'active' | 'success' | 'selected' | 'completed'
+}
+
+const availableIcons = {
+  check: CheckIcon,
+  search: DocumentAddIcon,
+  balance: ScaleIcon,
+  calendar: CalendarIcon
+}
+
+const PhaseCustom = ({ icon, variant, ...otherProps }: CustomTagProps) => {
+  const customIcon = icon ? availableIcons[icon] : undefined
+
+  return <Phase {...otherProps} icon={customIcon} variant={variant} />
+}
+
+export default PhaseCustom
diff --git a/src/modules/docs/components/index.ts b/src/modules/docs/components/index.ts
index 41abd74..dace953 100644
--- a/src/modules/docs/components/index.ts
+++ b/src/modules/docs/components/index.ts
@@ -10,3 +10,4 @@ export { default as DropdownCustom } from './DropdownCustom'
 export { default as AlertReactKnowledge } from './AlertReactKnowledge'
 export { default as HeaderDocCustom } from './HeaderDocCustom'
 export { default as TagCustom } from './TagCustom'
+export { default as PhaseCustom } from './PhaseCustom'
diff --git a/src/theme/global.css b/src/theme/global.css
index cf22c64..28edfb1 100644
--- a/src/theme/global.css
+++ b/src/theme/global.css
@@ -327,3 +327,18 @@ div ::-webkit-scrollbar-corner {
 .container-cmpnt-doc span.success-filled-tag-class {
   color: #ecfdf5 !important;
 }
+div[role="container-phase"] .text-blue-50 {
+  color: #eff6ff !important;
+}
+div[role="container-phase"] .text-gray-600 {
+  color: #4b5563 !important;
+}
+div[role="container-phase"] .bg-green-500 {
+  color: #ecfdf5 !important;
+}
+div[role="container-phase"] .text-blue-700 {
+  color: #1d4ed8 !important;
+}
+div[role="container-phase"] hr {
+  border-color: #d1d5db !important;
+}

From b53357d3d9932bb9aa3dd5d55b2bf10d8630dffd Mon Sep 17 00:00:00 2001
From: gnxcode <genixxavier@gmail.com>
Date: Mon, 22 Jan 2024 11:14:29 -0500
Subject: [PATCH 2/3] fix: update label in English

---
 docs/components/phase.mdx | 48 +++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/docs/components/phase.mdx b/docs/components/phase.mdx
index b0c3d98..4efaddb 100644
--- a/docs/components/phase.mdx
+++ b/docs/components/phase.mdx
@@ -64,7 +64,7 @@ This variant <TagDocs text='phases' />, you can customize it with the following
     <Flex className="flex" gap="4">
         <PhaseCustom title="Title" icon="check" className="w-44 h-40" status="completed" numberPhase={1} textTag="Completed" />
         <PhaseCustom title="Title" icon="search" className="w-44 h-40" status="active" numberPhase={2} textTag="In progress" />
-        <PhaseCustom title="Title" icon="balance" className="w-44 h-40" status="default" numberPhase={3} textTag="Pendding" />
+        <PhaseCustom title="Title" icon="balance" className="w-44 h-40" status="default" numberPhase={3} textTag="Pending" />
     </Flex>
 </Playground>
 
@@ -95,7 +95,7 @@ export default function App() {
               className="w-44 h-40"
               icon={ScaleIcon}
               status="default"
-              textTag="Pendiente"
+              textTag="Pending"
               numberPhase={3}
             />
         </Flex>
@@ -133,7 +133,7 @@ This variant <TagDocs text='status' />, you can customize it with the following
             subtitle="Subtitle"
             variant="status"
             status="active"
-            textTag="Pendiente"
+            textTag="Pending"
         />
         <Phase
             className="w-44"
@@ -166,7 +166,7 @@ export default function App() {
               subtitle="Subtitle"
               variant="status"
               status="active"
-              textTag="Pendiente"
+              textTag="Pending"
             />
             <Phase
               className="w-44"
@@ -206,23 +206,23 @@ This variant <TagDocs text='quarters' />, you can customize it with the followin
             listData={[
                 {
                   completed: true,
-                  label: "Anuales",
+                  label: "Annual",
                 },
                 {
                   completed: true,
-                  label: "4° Trimestre",
+                  label: "4° Quarter",
                 },
                 {
                   completed: true,
-                  label: "3° Trimestre",
+                  label: "3° Quarter",
                 },
                 {
                   completed: true,
-                  label: "2° Trimestre",
+                  label: "2° Quarter",
                 },
                 {
                   completed: false,
-                  label: "1° Trimestre",
+                  label: "1° Quarter",
                 },
             ]} />
         <PhaseCustom 
@@ -234,23 +234,23 @@ This variant <TagDocs text='quarters' />, you can customize it with the followin
             listData={[
                 {
                   completed: true,
-                  label: "Anuales",
+                  label: "Annual",
                 },
                 {
                   completed: true,
-                  label: "4° Trimestre",
+                  label: "4° Quarter",
                 },
                 {
                   completed: true,
-                  label: "3° Trimestre",
+                  label: "3° Quarter",
                 },
                 {
                   completed: true,
-                  label: "2° Trimestre",
+                  label: "2° Quarter",
                 },
                 {
                   completed: false,
-                  label: "1° Trimestre",
+                  label: "1° Quarter",
                 },
             ]} />
     </Flex>
@@ -270,23 +270,23 @@ export default function App() {
               listData={[
                 {
                   completed: true,
-                  label: "Anuales",
+                  label: "Annual",
                 },
                 {
                   completed: true,
-                  label: "4° Trimestre",
+                  label: "4° Quarter",
                 },
                 {
                   completed: true,
-                  label: "3° Trimestre",
+                  label: "3° Quarter",
                 },
                 {
                   completed: true,
-                  label: "2° Trimestre",
+                  label: "2° Quarter",
                 },
                 {
                   completed: false,
-                  label: "1° Trimestre",
+                  label: "1° Quarter",
                 },
               ]}
             />
@@ -298,23 +298,23 @@ export default function App() {
               listData={[
                 {
                   completed: true,
-                  label: "Anuales",
+                  label: "Annual",
                 },
                 {
                   completed: true,
-                  label: "4° Trimestre",
+                  label: "4° Quarter",
                 },
                 {
                   completed: true,
-                  label: "3° Trimestre",
+                  label: "3° Quarter",
                 },
                 {
                   completed: true,
-                  label: "2° Trimestre",
+                  label: "2° Quarter",
                 },
                 {
                   completed: false,
-                  label: "1° Trimestre",
+                  label: "1° Quarter",
                 },
               ]}
             />

From 967f8be5490de0cf0c515cb14cca968c7ec072f5 Mon Sep 17 00:00:00 2001
From: gnxcode <genixxavier@gmail.com>
Date: Tue, 30 Jan 2024 15:34:44 -0500
Subject: [PATCH 3/3] feat: update version bui

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f550d6..ddfdc6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@algolia/autocomplete-core": "^1.8.3",
         "@docsearch/react": "^3.5.1",
         "@vercel/analytics": "^1.0.1",
-        "dd360-ds": "https://pkg.csb.dev/dd3tech/bui/commit/a46e1955/dd360-ds",
+        "dd360-ds": "6.22.0",
         "dd360-utils": "18.1.0",
         "gray-matter": "^4.0.3",
         "i18next": "^22.4.9",
@@ -1525,10 +1525,9 @@
       "dev": true
     },
     "node_modules/dd360-ds": {
-      "version": "6.20.1",
-      "resolved": "https://pkg.csb.dev/dd3tech/bui/commit/a46e1955/dd360-ds",
-      "integrity": "sha512-+Gr4qh4WkywlEBr3Gqc9xyc4j26yoLV+2rNDNBSibhS4Kt8GVd3fAMt/XaNONvRvUZYKmTYUhJhyYDRbc8n9kw==",
-      "license": "MIT",
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.22.0.tgz",
+      "integrity": "sha512-KgQIlsLZyx90iYT73rY8c+y+73EC4X8JCeMaWOCMMkREvX7Wd3HMsNf0yQ/oo0K0lmV8Kg77DpGM3vzmvEPmlQ==",
       "dependencies": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
@@ -8006,8 +8005,9 @@
       "dev": true
     },
     "dd360-ds": {
-      "version": "https://pkg.csb.dev/dd3tech/bui/commit/a46e1955/dd360-ds",
-      "integrity": "sha512-+Gr4qh4WkywlEBr3Gqc9xyc4j26yoLV+2rNDNBSibhS4Kt8GVd3fAMt/XaNONvRvUZYKmTYUhJhyYDRbc8n9kw==",
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.22.0.tgz",
+      "integrity": "sha512-KgQIlsLZyx90iYT73rY8c+y+73EC4X8JCeMaWOCMMkREvX7Wd3HMsNf0yQ/oo0K0lmV8Kg77DpGM3vzmvEPmlQ==",
       "requires": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
diff --git a/package.json b/package.json
index 500e7ff..7d57312 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "https://pkg.csb.dev/dd3tech/bui/commit/a46e1955/dd360-ds",
+    "dd360-ds": "6.22.0",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",