@elliemae/ds-accordion 3.22.0-next.3 → 3.22.0-next.31

package/dist/cjs/DSAccordion.js

@@ -40,12 +40,12 @@ var import_AccordionContent = require("./parts/accordionContent/AccordionContent
 var import_useAccordion = require("./config/useAccordion.js");
 var import_DSAccordionCTX = require("./DSAccordionCTX.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-var import_theming = require("./exported-related/theming.js");
+var import_exported_related = require("./exported-related/index.js");
 const DSAccordion = (props) => {
   const ctx = (0, import_useAccordion.useAccordion)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSAccordionCTX.DSAccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AccordionContent.AccordionContent, {}) });
 };
-DSAccordion.displayName = import_theming.DSAccordionName;
+DSAccordion.displayName = import_exported_related.DSAccordionName;
 const DSAccordionWithSchema = (0, import_ds_props_helpers.describe)(DSAccordion);
 DSAccordionWithSchema.propTypes = import_react_desc_prop_types.accordionPropTypes;
 var DSAccordion_default = DSAccordion;

package/dist/cjs/DSAccordion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/DSAccordion.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent.js';\nimport { useAccordion } from './config/useAccordion.js';\nimport { DSAccordionContext } from './DSAccordionCTX.js';\nimport { accordionPropTypes } from './react-desc-prop-types.js';\nimport type { DSAccordionT } from './react-desc-prop-types.js';\nimport { DSAccordionName } from './exported-related/theming.js';\n\nconst DSAccordion = (props: DSAccordionT.Props): JSX.Element => {\n  const ctx = useAccordion(props);\n\n  return (\n    <DSAccordionContext.Provider value={ctx}>\n      <AccordionContent />\n    </DSAccordionContext.Provider>\n  );\n};\n\nDSAccordion.displayName = DSAccordionName;\nconst DSAccordionWithSchema = describe(DSAccordion);\nDSAccordionWithSchema.propTypes = accordionPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordion, DSAccordionWithSchema };\n\nexport default DSAccordion;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAbN,8BAAyB;AACzB,8BAAiC;AACjC,0BAA6B;AAC7B,4BAAmC;AACnC,mCAAmC;AAEnC,qBAAgC;AAEhC,MAAM,cAAc,CAAC,UAA2C;AAC9D,QAAM,UAAM,kCAAa,KAAK;AAE9B,SACE,4CAAC,yCAAmB,UAAnB,EAA4B,OAAO,KAClC,sDAAC,4CAAiB,GACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
+  "sources": ["../../src/DSAccordion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent.js';\nimport { useAccordion } from './config/useAccordion.js';\nimport { DSAccordionContext } from './DSAccordionCTX.js';\nimport { accordionPropTypes } from './react-desc-prop-types.js';\nimport type { DSAccordionT } from './react-desc-prop-types.js';\nimport { DSAccordionName } from './exported-related/index.js';\n\nconst DSAccordion = (props: DSAccordionT.Props): JSX.Element => {\n  const ctx = useAccordion(props);\n\n  return (\n    <DSAccordionContext.Provider value={ctx}>\n      <AccordionContent />\n    </DSAccordionContext.Provider>\n  );\n};\n\nDSAccordion.displayName = DSAccordionName;\nconst DSAccordionWithSchema = describe(DSAccordion);\nDSAccordionWithSchema.propTypes = accordionPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordion, DSAccordionWithSchema };\n\nexport default DSAccordion;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAbN,8BAAyB;AACzB,8BAAiC;AACjC,0BAA6B;AAC7B,4BAAmC;AACnC,mCAAmC;AAEnC,8BAAgC;AAEhC,MAAM,cAAc,CAAC,UAA2C;AAC9D,QAAM,UAAM,kCAAa,KAAK;AAE9B,SACE,4CAAC,yCAAmB,UAAnB,EAA4B,OAAO,KAClC,sDAAC,4CAAiB,GACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
   "names": []
 }

package/dist/cjs/DSAccordionCTX.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/DSAccordionCTX.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/DSAccordionCTX.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { createContext } from 'react';\nimport type { DSAccordionT } from './react-desc-prop-types.js';\nimport type { DSAccordionInternalsT } from './sharedTypes.js';\n\ninterface DSAccordionContextT {\n  props: DSAccordionT.InternalProps;\n  actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n  setActiveValues: (value: string | number, e: React.MouseEvent | React.KeyboardEvent) => void;\n  focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n  allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nconst defaultContext = {} as DSAccordionContextT;\n\nexport const DSAccordionContext = createContext<DSAccordionContextT>(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAY9B,MAAM,iBAAiB,CAAC;AAEjB,MAAM,yBAAqB,4BAAmC,cAAc;",
   "names": []

package/dist/cjs/config/useAccordion.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/config/useAccordion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/config/useAccordion.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type React from 'react';\nimport { useMemo, useState, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { useAccordionRefs } from './useAccordionRefs.js';\nimport { defaultProps } from '../defaultProps.js';\nimport type { DSAccordionT } from '../react-desc-prop-types.js';\nimport type { DSAccordionInternalsT } from '../sharedTypes.js';\n\ninterface DSAccordionUseAccordionContextT {\n  props: DSAccordionT.InternalProps;\n  actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n  setActiveValues: (value: string | number, e: React.MouseEvent | React.KeyboardEvent) => void;\n  focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n  allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nexport const useAccordion = (props: DSAccordionT.Props): DSAccordionUseAccordionContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps) as DSAccordionT.InternalProps;\n\n  const { activeValue, allowMultipleOpen, onChange } = propsWithDefaults;\n\n  const { focusableChildrenReferences, allChildrenReferences } = useAccordionRefs(propsWithDefaults);\n\n  const [internalActiveValue, setInternalActiveValue] =\n    useState<DSAccordionInternalsT.InternalActiveValue>(activeValue);\n\n  const actualActiveValue = useMemo(() => {\n    if (activeValue === undefined) return internalActiveValue;\n    return activeValue;\n  }, [activeValue, internalActiveValue]);\n\n  const setActiveValues = useCallback(\n    (value: string | number, e: React.MouseEvent | React.KeyboardEvent) => {\n      let newState: DSAccordionInternalsT.InternalActiveValue;\n      if (allowMultipleOpen && (actualActiveValue === undefined || actualActiveValue === null)) newState = [value];\n      else if (allowMultipleOpen && Array.isArray(actualActiveValue))\n        if (!actualActiveValue.some((currentValues: string | number) => currentValues === value))\n          newState = [...actualActiveValue, value];\n        else newState = actualActiveValue.filter((currentValues: string | number) => currentValues !== value);\n      else if (actualActiveValue === value) newState = null;\n      else newState = value;\n      setInternalActiveValue(newState);\n      return onChange(newState, e);\n    },\n    [actualActiveValue, allowMultipleOpen, onChange],\n  );\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefaults,\n      actualActiveValue,\n      setActiveValues,\n      focusableChildrenReferences,\n      allChildrenReferences,\n    }),\n    [actualActiveValue, allChildrenReferences, focusableChildrenReferences, propsWithDefaults, setActiveValues],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+C;AAC/C,8BAA6C;AAC7C,8BAAiC;AACjC,0BAA6B;AAYtB,MAAM,eAAe,CAAC,UAA+D;AAC1F,QAAM,wBAAoB,sDAA6B,OAAO,gCAAY;AAE1E,QAAM,EAAE,aAAa,mBAAmB,SAAS,IAAI;AAErD,QAAM,EAAE,6BAA6B,sBAAsB,QAAI,0CAAiB,iBAAiB;AAEjG,QAAM,CAAC,qBAAqB,sBAAsB,QAChD,uBAAoD,WAAW;AAEjE,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,gBAAgB;AAAW,aAAO;AACtC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,mBAAmB,CAAC;AAErC,QAAM,sBAAkB;AAAA,IACtB,CAAC,OAAwB,MAA8C;AACrE,UAAI;AACJ,UAAI,sBAAsB,sBAAsB,UAAa,sBAAsB;AAAO,mBAAW,CAAC,KAAK;AAAA,eAClG,qBAAqB,MAAM,QAAQ,iBAAiB;AAC3D,YAAI,CAAC,kBAAkB,KAAK,CAAC,kBAAmC,kBAAkB,KAAK;AACrF,qBAAW,CAAC,GAAG,mBAAmB,KAAK;AAAA;AACpC,qBAAW,kBAAkB,OAAO,CAAC,kBAAmC,kBAAkB,KAAK;AAAA,eAC7F,sBAAsB;AAAO,mBAAW;AAAA;AAC5C,mBAAW;AAChB,6BAAuB,QAAQ;AAC/B,aAAO,SAAS,UAAU,CAAC;AAAA,IAC7B;AAAA,IACA,CAAC,mBAAmB,mBAAmB,QAAQ;AAAA,EACjD;AACA,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,uBAAuB,6BAA6B,mBAAmB,eAAe;AAAA,EAC5G;AAEA,SAAO;AACT;",
   "names": []

package/dist/cjs/config/useAccordionRefs.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/config/useAccordionRefs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/config/useAccordionRefs.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useMemo } from 'react';\nimport type { DSAccordionT } from '../react-desc-prop-types.js';\nimport type { DSAccordionInternalsT } from '../sharedTypes.js';\n\ninterface UseAccordionRefsPropsT {\n  children: React.ReactElement<DSAccordionT.InternalItemProps>[];\n}\n\ninterface UseAccordionRefsReturnTypeT {\n  focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n  allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nexport const useAccordionRefs = ({ children }: UseAccordionRefsPropsT): UseAccordionRefsReturnTypeT =>\n  useMemo(() => {\n    const focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[] = [];\n    const allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences = {};\n\n    React.Children.map(children, (child: React.ReactElement<DSAccordionT.InternalItemProps>, index) => {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      const { value, disabled } = child.props;\n      const currentRef = React.createRef<HTMLButtonElement>();\n      allChildrenReferences[index] = currentRef;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      if (!disabled) focusableChildrenReferences.push({ index, value, ref: currentRef });\n    });\n    return { focusableChildrenReferences, allChildrenReferences };\n  }, [children]);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAaxB,MAAM,mBAAmB,CAAC,EAAE,SAAS,UAC1C,sBAAQ,MAAM;AACZ,QAAM,8BAAmF,CAAC;AAC1F,QAAM,wBAAqE,CAAC;AAE5E,eAAAA,QAAM,SAAS,IAAI,UAAU,CAAC,OAA2D,UAAU;AAEjG,UAAM,EAAE,OAAO,SAAS,IAAI,MAAM;AAClC,UAAM,aAAa,aAAAA,QAAM,UAA6B;AACtD,0BAAsB,KAAK,IAAI;AAE/B,QAAI,CAAC;AAAU,kCAA4B,KAAK,EAAE,OAAO,OAAO,KAAK,WAAW,CAAC;AAAA,EACnF,CAAC;AACD,SAAO,EAAE,6BAA6B,sBAAsB;AAC9D,GAAG,CAAC,QAAQ,CAAC;",
   "names": ["React"]

package/dist/cjs/defaultProps.js

@@ -57,6 +57,7 @@ const accordionItemDefaultProps = {
   title: "",
   customActions: [],
   disabled: false,
-  xStyledPropsContent: {}
+  xStyledPropsContent: {},
+  keepContentMounted: false
 };
 //# sourceMappingURL=defaultProps.js.map

package/dist/cjs/defaultProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { memo } from 'react';\nimport { ArrowheadRight, ArrowheadDown, ChevronRight, ChevronDown } from '@elliemae/ds-icons';\nimport type { DSAccordionInternalsT } from './sharedTypes.js';\nimport type { DSAccordionT } from './react-desc-prop-types.js';\n\nconst DefaultIconClosed = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n  isDSMobile ? <ChevronRight width=\"20px\" color={['brand-primary', '800']} /> : <ArrowheadRight width=\"20px\" />,\n);\n\nconst DefaultIconOpen = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n  isDSMobile ? <ChevronDown width=\"20px\" color={['brand-primary', '800']} /> : <ArrowheadDown width=\"20px\" />,\n);\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const defaultProps: DSAccordionT.DefaultProps = {\n  containerProps: {},\n  allowMultipleOpen: false,\n  onChange: noop,\n  children: [],\n  isDSMobile: false,\n};\n\nexport const accordionItemDefaultProps: DSAccordionT.ItemDefaultProps = {\n  iconClosed: DefaultIconClosed,\n  iconOpened: DefaultIconOpen,\n  title: '',\n  customActions: [],\n  disabled: false,\n  xStyledPropsContent: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMR;AANf,mBAA4B;AAC5B,sBAAyE;AAIzE,MAAM,wBAAoB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACnD,aAAa,4CAAC,gCAAa,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,4CAAC,kCAAe,OAAM,QAAO;AAC7G;AAEA,MAAM,sBAAkB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACjD,aAAa,4CAAC,+BAAY,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,4CAAC,iCAAc,OAAM,QAAO;AAC3G;AAGA,MAAM,OAAO,MAAY;AAAC;AAEnB,MAAM,eAA0C;AAAA,EACrD,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU,CAAC;AAAA,EACX,YAAY;AACd;AAEO,MAAM,4BAA2D;AAAA,EACtE,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,eAAe,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,qBAAqB,CAAC;AACxB;",
+  "sources": ["../../src/defaultProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { memo } from 'react';\nimport { ArrowheadRight, ArrowheadDown, ChevronRight, ChevronDown } from '@elliemae/ds-icons';\nimport type { DSAccordionInternalsT } from './sharedTypes.js';\nimport type { DSAccordionT } from './react-desc-prop-types.js';\n\nconst DefaultIconClosed = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n  isDSMobile ? <ChevronRight width=\"20px\" color={['brand-primary', '800']} /> : <ArrowheadRight width=\"20px\" />,\n);\n\nconst DefaultIconOpen = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n  isDSMobile ? <ChevronDown width=\"20px\" color={['brand-primary', '800']} /> : <ArrowheadDown width=\"20px\" />,\n);\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const defaultProps: DSAccordionT.DefaultProps = {\n  containerProps: {},\n  allowMultipleOpen: false,\n  onChange: noop,\n  children: [],\n  isDSMobile: false,\n};\n\nexport const accordionItemDefaultProps: DSAccordionT.ItemDefaultProps = {\n  iconClosed: DefaultIconClosed,\n  iconOpened: DefaultIconOpen,\n  title: '',\n  customActions: [],\n  disabled: false,\n  xStyledPropsContent: {},\n  keepContentMounted: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMR;AANf,mBAA4B;AAC5B,sBAAyE;AAIzE,MAAM,wBAAoB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACnD,aAAa,4CAAC,gCAAa,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,4CAAC,kCAAe,OAAM,QAAO;AAC7G;AAEA,MAAM,sBAAkB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACjD,aAAa,4CAAC,+BAAY,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,4CAAC,iCAAc,OAAM,QAAO;AAC3G;AAGA,MAAM,OAAO,MAAY;AAAC;AAEnB,MAAM,eAA0C;AAAA,EACrD,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU,CAAC;AAAA,EACX,YAAY;AACd;AAEO,MAAM,4BAA2D;AAAA,EACtE,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,eAAe,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,qBAAqB,CAAC;AAAA,EACtB,oBAAoB;AACtB;",
   "names": []
 }

package/dist/cjs/exported-related/{theming.js → DSAccordionDefinitions.js}

@@ -26,30 +26,33 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var theming_exports = {};
-__export(theming_exports, {
+var DSAccordionDefinitions_exports = {};
+__export(DSAccordionDefinitions_exports, {
+  DSAccordionDataTestid: () => DSAccordionDataTestid,
   DSAccordionName: () => DSAccordionName,
   DSAccordionSlots: () => DSAccordionSlots
 });
-module.exports = __toCommonJS(theming_exports);
+module.exports = __toCommonJS(DSAccordionDefinitions_exports);
 var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
 const DSAccordionName = "DSAccordion";
 const DSAccordionSlots = {
   CONTAINER: "root",
-  ITEM: {
-    CONTAINER: "item-container",
-    HEADER: {
-      CONTAINER: "item-header-container",
-      ADDON: "item-header-addon",
-      TITLE_CONTAINER: "item-header-titles-container",
-      PRIMARY_TITLE: "item-header-primary-title",
-      SECONDARY_TITLE: "item-header-secondary-title",
-      CUSTOM_ACTIONS_CONTAINER: "item-header-custom-actions-container",
-      TOOLTIP: "item-header-tooltip"
-    },
-    CONTENT: {
-      CONTAINER: "item-content-container"
-    }
-  }
+  ITEM_CONTAINER: "item-container",
+  ITEM_HEADER_CONTAINER: "item-header-container",
+  ITEM_HEADER_ADDON: "item-header-addon",
+  ITEM_HEADER_TITLE_CONTAINER: "item-header-titles-container",
+  ITEM_HEADER_PRIMARY_TITLE: "item-header-primary-title",
+  ITEM_HEADER_SECONDARY_TITLE: "item-header-secondary-title",
+  ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER: "item-header-custom-actions-container",
+  ITEM_HEADER_TOOLTIP: "item-header-tooltip",
+  ITEM_CONTENT_CONTAINER: "item-content-container"
+};
+const DSAccordionDataTestid = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(DSAccordionName, DSAccordionSlots),
+  ITEM_CONTENT_CONTAINER: "ds-accordion_item-content",
+  ITEM_HEADER_CONTAINER: "ds-accordion_item-header",
+  ITEM_CONTAINER: "ds-accordion_item",
+  CONTAINER: "ds-accordion_group"
 };
-//# sourceMappingURL=theming.js.map
+//# sourceMappingURL=DSAccordionDefinitions.js.map

package/dist/cjs/exported-related/DSAccordionDefinitions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/exported-related/DSAccordionDefinitions.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSAccordionName = 'DSAccordion';\n\nexport const DSAccordionSlots = {\n  CONTAINER: 'root',\n  ITEM_CONTAINER: 'item-container',\n  ITEM_HEADER_CONTAINER: 'item-header-container',\n  ITEM_HEADER_ADDON: 'item-header-addon',\n  ITEM_HEADER_TITLE_CONTAINER: 'item-header-titles-container',\n  ITEM_HEADER_PRIMARY_TITLE: 'item-header-primary-title',\n  ITEM_HEADER_SECONDARY_TITLE: 'item-header-secondary-title',\n  ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER: 'item-header-custom-actions-container',\n  ITEM_HEADER_TOOLTIP: 'item-header-tooltip',\n  ITEM_CONTENT_CONTAINER: 'item-content-container',\n};\n\nexport const DSAccordionDataTestid = {\n  ...slotObjectToDataTestIds(DSAccordionName, DSAccordionSlots),\n  ITEM_CONTENT_CONTAINER: 'ds-accordion_item-content',\n  ITEM_HEADER_CONTAINER: 'ds-accordion_item-header',\n  ITEM_CONTAINER: 'ds-accordion_item',\n  CONTAINER: 'ds-accordion_group',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,6BAA6B;AAAA,EAC7B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,sCAAsC;AAAA,EACtC,qBAAqB;AAAA,EACrB,wBAAwB;AAC1B;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAG,0CAAwB,iBAAiB,gBAAgB;AAAA,EAC5D,wBAAwB;AAAA,EACxB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB,WAAW;AACb;",
+  "names": []
+}

package/dist/cjs/exported-related/index.js

@@ -26,6 +26,5 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var exported_related_exports = {};
 module.exports = __toCommonJS(exported_related_exports);
 var React = __toESM(require("react"));
-__reExport(exported_related_exports, require("./DSAccordionDatatestid.js"), module.exports);
-__reExport(exported_related_exports, require("./theming.js"), module.exports);
+__reExport(exported_related_exports, require("./DSAccordionDefinitions.js"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/exported-related/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/exported-related/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSAccordionDatatestid.js';\nexport * from './theming.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,uCAAd;AACA,qCAAc,yBADd;",
+  "sources": ["../../../src/exported-related/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './DSAccordionDefinitions.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,wCAAd;",
   "names": []
 }

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSAccordion.js';\nexport * from './parts/accordionItem/DSAccordionItem.js';\nexport * from './exported-related/index.js';\n\nexport { default } from './DSAccordion.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,6BAAd;AACA,wBAAc,qDADd;AAEA,wBAAc,wCAFd;AAIA,yBAAwB;",
+  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import {} from '@xstyled/system';\nimport {} from '@xstyled/util';\nexport * from './DSAccordion.js';\nexport * from './parts/accordionItem/DSAccordionItem.js';\nexport * from './exported-related/index.js';\n\nexport { default } from './DSAccordion.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,wBAAc,6BAFd;AAGA,wBAAc,qDAHd;AAIA,wBAAc,wCAJd;AAMA,yBAAwB;",
   "names": []
 }

package/dist/cjs/parts/accordionContent/AccordionContent.js

@@ -36,15 +36,18 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_DSAccordionCTX = require("../../DSAccordionCTX.js");
-var import_DSAccordionDatatestid = require("../../exported-related/DSAccordionDatatestid.js");
+var import_DSAccordionDefinitions = require("../../exported-related/DSAccordionDefinitions.js");
 var import_styles = require("./styles.js");
+var import_lodash = require("lodash");
 const AccordionContent = () => {
-  const {
-    props: { containerProps, children, onChange, ...rest }
-  } = (0, import_react.useContext)(import_DSAccordionCTX.DSAccordionContext);
+  const { props } = (0, import_react.useContext)(import_DSAccordionCTX.DSAccordionContext);
+  const getOwnerProps = (0, import_react.useCallback)(() => props, [props]);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
+  const { containerProps, children, ...rest } = props;
+  const restWithoutOnChange = (0, import_lodash.omit)(rest, "onChange");
   const childrenWithIndex = [];
-  const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
-  const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
+  const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(restWithoutOnChange);
+  const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(restWithoutOnChange);
   import_react.default.Children.forEach(
     children,
     (child, index) => childrenWithIndex.push(
@@ -53,6 +56,17 @@ const AccordionContent = () => {
       })
     )
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, { "data-testid": import_DSAccordionDatatestid.DSAccordionDataTestid.GROUP, ...containerProps, ...globalAttrs, ...xstyledAttrs, children: childrenWithIndex });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledContainer,
+    {
+      "data-testid": import_DSAccordionDefinitions.DSAccordionDataTestid.CONTAINER,
+      ...containerProps,
+      ...globalAttrs,
+      ...xstyledAttrs,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: childrenWithIndex
+    }
+  );
 };
 //# sourceMappingURL=AccordionContent.js.map

package/dist/cjs/parts/accordionContent/AccordionContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/accordionContent/AccordionContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid.js';\nimport { StyledContainer } from './styles.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\n\nexport const AccordionContent = (): JSX.Element => {\n  const {\n    props: { containerProps, children, onChange, ...rest },\n  } = useContext(DSAccordionContext);\n\n  const childrenWithIndex: React.ReactElement<DSAccordionT.InternalItemProps>[] = [];\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const globalAttrs = useGetGlobalAttributes(rest);\n\n  React.Children.forEach(children, (child, index) =>\n    childrenWithIndex.push(\n      React.cloneElement(child, {\n        dsIndex: index,\n      }),\n    ),\n  );\n\n  return (\n    <StyledContainer data-testid={DSAccordionDataTestid.GROUP} {...containerProps} {...globalAttrs} {...xstyledAttrs}>\n      {childrenWithIndex}\n    </StyledContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BnB;AA3BJ,mBAAkC;AAClC,8BAA2D;AAC3D,4BAAmC;AACnC,mCAAsC;AACtC,oBAAgC;AAGzB,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,UAAU,GAAG,KAAK;AAAA,EACvD,QAAI,yBAAW,wCAAkB;AAEjC,QAAM,oBAA0E,CAAC;AAEjF,QAAM,mBAAe,4CAAmB,IAAI;AAE5C,QAAM,kBAAc,gDAAuB,IAAI;AAE/C,eAAAA,QAAM,SAAS;AAAA,IAAQ;AAAA,IAAU,CAAC,OAAO,UACvC,kBAAkB;AAAA,MAChB,aAAAA,QAAM,aAAa,OAAO;AAAA,QACxB,SAAS;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SACE,4CAAC,iCAAgB,eAAa,mDAAsB,OAAQ,GAAG,gBAAiB,GAAG,aAAc,GAAG,cACjG,6BACH;AAEJ;",
+  "sources": ["../../../../src/parts/accordionContent/AccordionContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDefinitions.js';\nimport { StyledContainer } from './styles.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\nimport { omit } from 'lodash';\n\nexport const AccordionContent = (): JSX.Element => {\n  const { props } = useContext(DSAccordionContext);\n\n  const getOwnerProps = useCallback(() => props, [props]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  const { containerProps, children, ...rest } = props;\n\n  const restWithoutOnChange = omit(rest, 'onChange');\n\n  const childrenWithIndex: React.ReactElement<DSAccordionT.InternalItemProps>[] = [];\n\n  const xstyledAttrs = useGetXstyledProps(restWithoutOnChange);\n\n  const globalAttrs = useGetGlobalAttributes(restWithoutOnChange);\n\n  React.Children.forEach(children, (child, index) =>\n    childrenWithIndex.push(\n      React.cloneElement(child, {\n        dsIndex: index,\n      }),\n    ),\n  );\n\n  return (\n    <StyledContainer\n      data-testid={DSAccordionDataTestid.CONTAINER}\n      {...containerProps}\n      {...globalAttrs}\n      {...xstyledAttrs}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {childrenWithIndex}\n    </StyledContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCnB;AAjCJ,mBAA+C;AAC/C,8BAA2D;AAC3D,4BAAmC;AACnC,oCAAsC;AACtC,oBAAgC;AAEhC,oBAAqB;AAEd,MAAM,mBAAmB,MAAmB;AACjD,QAAM,EAAE,MAAM,QAAI,yBAAW,wCAAkB;AAE/C,QAAM,oBAAgB,0BAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AACtD,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,QAAM,EAAE,gBAAgB,UAAU,GAAG,KAAK,IAAI;AAE9C,QAAM,0BAAsB,oBAAK,MAAM,UAAU;AAEjD,QAAM,oBAA0E,CAAC;AAEjF,QAAM,mBAAe,4CAAmB,mBAAmB;AAE3D,QAAM,kBAAc,gDAAuB,mBAAmB;AAE9D,eAAAA,QAAM,SAAS;AAAA,IAAQ;AAAA,IAAU,CAAC,OAAO,UACvC,kBAAkB;AAAA,MAChB,aAAAA,QAAM,aAAa,OAAO;AAAA,QACxB,SAAS;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,oDAAsB;AAAA,MAClC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/accordionContent/styles.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/accordionContent/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../src/parts/accordionContent/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related/index.js';\n\nexport const StyledContainer = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.CONTAINER,\n})`\n  min-width: 240px;\n  ${xStyledCommonProps};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,8BAAkD;AAE3C,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA;AAAA,IAEG;AAAA;",
   "names": []

package/dist/cjs/parts/accordionItem/DSAccordionItem.js

@@ -45,13 +45,15 @@ var import_defaultProps = require("../../defaultProps.js");
 var import_styles = require("./styles.js");
 var import_useAccordionItem = require("./useAccordionItem.js");
 var import_DSAccordionCTX = require("../../DSAccordionCTX.js");
-var import_DSAccordionDatatestid = require("../../exported-related/DSAccordionDatatestid.js");
+var import_DSAccordionDefinitions = require("../../exported-related/DSAccordionDefinitions.js");
 var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
 const DSAccordionItem = (props) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
     props,
     import_defaultProps.accordionItemDefaultProps
   );
+  const getOwnerProps = (0, import_react.useCallback)(() => props, [props]);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
   const {
     children,
     title,
@@ -65,6 +67,8 @@ const DSAccordionItem = (props) => {
     renderCustomActions,
     CustomActions,
     xStyledPropsContent,
+    keepContentMounted,
+    innerRef,
     ...rest
   } = propsWithDefaults;
   const { handleOnClick, handleOnKeyDown, selected } = (0, import_useAccordionItem.useAccordionItem)({ value, disabled });
@@ -76,26 +80,51 @@ const DSAccordionItem = (props) => {
     props: { isDSMobile }
   } = (0, import_react.useContext)(import_DSAccordionCTX.DSAccordionContext);
   const [showPopover, setShowPopover] = (0, import_react.useState)(false);
-  const [referenceElement, setReferenceElement] = (0, import_react.useState)();
+  const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
   const CustomActionsContent = (0, import_react.useMemo)(() => {
     if (!isDSMobile && customActions?.length > 0)
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledItemCustomActions, { isDSMobile, children: customActions?.map(({ onClick, id, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ds_button_v2.DSButtonV2,
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styles.StyledItemCustomActions,
         {
-          onClick: (e) => {
-            e.stopPropagation();
-            if (onClick)
-              onClick(e);
-          },
-          ...otherProps,
-          buttonType: import_ds_button_v2.BUTTON_TYPES.OUTLINE
-        },
-        id
-      )) });
+          isDSMobile,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: customActions?.map(({ onClick, id, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_button_v2.DSButtonV2,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                if (onClick)
+                  onClick(e);
+              },
+              ...otherProps,
+              buttonType: import_ds_button_v2.BUTTON_TYPES.OUTLINE
+            },
+            id
+          ))
+        }
+      );
     if (!isDSMobile && (renderCustomActions || CustomActions))
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledItemCustomActions, { isDSMobile, children: CustomActions !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomActions, { allRefs: allChildrenReferences, actualActiveValue }) : renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styles.StyledItemCustomActions,
+        {
+          isDSMobile,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: CustomActions !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomActions, { allRefs: allChildrenReferences, actualActiveValue }) : renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })
+        }
+      );
     return null;
-  }, [CustomActions, actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);
+  }, [
+    CustomActions,
+    actualActiveValue,
+    allChildrenReferences,
+    customActions,
+    getOwnerProps,
+    getOwnerPropsArguments,
+    isDSMobile,
+    renderCustomActions
+  ]);
   const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = (0, import_ds_utilities.useIsShowingEllipsis)();
   const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = (0, import_ds_utilities.useIsShowingEllipsis)();
   const onKeyDownWithIndex = (0, import_react.useCallback)(
@@ -131,22 +160,51 @@ const DSAccordionItem = (props) => {
         width: "100%",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["20px", "auto"], children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledItemAddon, { disabled, children: selected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconOpened, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconClosed, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledItemTitles, { withSecondaryTitle: secondaryTitle, selected, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_styles.StyledPrimaryTitle,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_styles.StyledItemAddon,
               {
-                ref: setPrimaryElement,
-                ...title ? { id: `accordion_${title || ""}id-${value}` } : void 0,
                 disabled,
-                selected,
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: selected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconOpened, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconClosed, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_styles.StyledItemTitles,
+              {
                 withSecondaryTitle: secondaryTitle,
-                children: title
+                selected,
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_styles.StyledPrimaryTitle,
+                  {
+                    ref: setPrimaryElement,
+                    ...title ? { id: `accordion_${title || ""}id-${value}` } : void 0,
+                    disabled,
+                    selected,
+                    withSecondaryTitle: Boolean(secondaryTitle),
+                    getOwnerProps,
+                    getOwnerPropsArguments,
+                    children: title
+                  }
+                )
               }
-            ) })
+            )
           ] }),
           secondaryTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["20px", "auto"], children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSecondaryTitle, { ref: setSecondaryElement, disabled, selected, children: secondaryTitle })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_styles.StyledSecondaryTitle,
+              {
+                ref: setSecondaryElement,
+                disabled,
+                selected,
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: secondaryTitle
+              }
+            )
           ] })
         ]
       }
@@ -156,6 +214,8 @@ const DSAccordionItem = (props) => {
       handleOnBlur,
       secondaryTitle,
       disabled,
+      getOwnerProps,
+      getOwnerPropsArguments,
       selected,
       IconOpened,
       IconClosed,
@@ -175,6 +235,8 @@ const DSAccordionItem = (props) => {
           isDSMobile: true,
           withSecondaryTitle: secondaryTitle,
           selected,
+          getOwnerProps,
+          getOwnerPropsArguments,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_styles.StyledPrimaryTitle,
             {
@@ -183,64 +245,112 @@ const DSAccordionItem = (props) => {
               disabled,
               isDSMobile: true,
               selected,
-              withSecondaryTitle: secondaryTitle,
+              withSecondaryTitle: Boolean(secondaryTitle),
+              getOwnerProps,
+              getOwnerPropsArguments,
               children: title
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledItemAddon, { disabled, isDSMobile: true, children: selected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconOpened, { isDSMobile: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconClosed, { isDSMobile: true }) })
-    ] }) }),
-    [handleOnFocus, handleOnBlur, secondaryTitle, selected, setPrimaryElement, title, disabled, IconOpened, IconClosed]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledItemContainer, { "data-testid": import_DSAccordionDatatestid.DSAccordionDataTestid.ITEM.CONTAINER, className, ...xstyledAttrs, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledItemHeaderContainer, { disabled, ref: setReferenceElement, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_styles.StyledItemHeader,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styles.StyledItemAddon,
         {
-          type: "button",
-          withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
-          withSecondaryTitle: secondaryTitle,
-          tabIndex: !disabled ? 0 : void 0,
           disabled,
-          "data-disabled": disabled,
-          ref: allChildrenReferences[dsIndex],
-          onKeyDown: onKeyDownWithIndex,
-          isDSMobile,
-          "data-testid": import_DSAccordionDatatestid.DSAccordionDataTestid.ITEM.HEADER,
-          id: `ds-accordion-header-${value}`,
-          "aria-expanded": selected,
-          "aria-disabled": disabled,
-          "aria-controls": `ds-accordion-content-${value}`,
-          ...handlers,
-          ...globalAttrs,
-          children: [
-            isDSMobile ? titleMobile : titleDesktop,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_popperjs.DSPopperJS, { referenceElement, showPopover: !selected && showPopover, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTooltipContent, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-                " ",
-                secondaryTitle
-              ] })
-            ] }) })
-          ]
+          isDSMobile: true,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconOpened, { isDSMobile: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconClosed, { isDSMobile: true })
         }
-      ),
-      CustomActionsContent
-    ] }),
-    selected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styles.StyledItemContent,
-      {
-        "data-testid": import_DSAccordionDatatestid.DSAccordionDataTestid.ITEM.CONTENT,
-        "aria-labelledby": `ds-accordion-header-${value}`,
-        role: "region",
-        isDSMobile,
-        id: `ds-accordion-content-${value}`,
-        ...xstyledContentAttrs,
-        children
-      }
-    )
-  ] });
+      )
+    ] }) }),
+    [
+      handleOnFocus,
+      handleOnBlur,
+      secondaryTitle,
+      selected,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      setPrimaryElement,
+      title,
+      disabled,
+      IconOpened,
+      IconClosed
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styles.StyledItemContainer,
+    {
+      "data-testid": import_DSAccordionDefinitions.DSAccordionDataTestid.ITEM_CONTAINER,
+      className,
+      ...xstyledAttrs,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_styles.StyledItemHeaderContainer,
+          {
+            disabled,
+            ref: setReferenceElement,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_styles.StyledItemHeader,
+                {
+                  withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
+                  withSecondaryTitle: secondaryTitle,
+                  tabIndex: !disabled ? 0 : void 0,
+                  disabled,
+                  "data-disabled": disabled,
+                  ref: (0, import_ds_utilities.mergeRefs)(allChildrenReferences[dsIndex], innerRef),
+                  onKeyDown: onKeyDownWithIndex,
+                  isDSMobile,
+                  "data-testid": import_DSAccordionDefinitions.DSAccordionDataTestid.ITEM_HEADER_CONTAINER,
+                  id: `ds-accordion-header-${value}`,
+                  "aria-expanded": selected,
+                  "aria-disabled": disabled,
+                  "aria-controls": `ds-accordion-content-${value}`,
+                  ...handlers,
+                  ...globalAttrs,
+                  type: "button",
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  children: [
+                    isDSMobile ? titleMobile : titleDesktop,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_popperjs.DSPopperJS, { referenceElement, showPopover: !selected && showPopover, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+                        " ",
+                        secondaryTitle
+                      ] })
+                    ] }) })
+                  ]
+                }
+              ),
+              CustomActionsContent
+            ]
+          }
+        ),
+        (selected || keepContentMounted) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styles.StyledItemContent,
+          {
+            "data-testid": import_DSAccordionDefinitions.DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
+            "aria-labelledby": `ds-accordion-header-${value}`,
+            role: "region",
+            isDSMobile,
+            id: `ds-accordion-content-${value}`,
+            ...xstyledContentAttrs,
+            selected,
+            keepContentMounted,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children
+          }
+        )
+      ]
+    }
+  );
 };
 DSAccordionItem.displayName = "DSAccordionItem";
 const DSAccordionItemWithSchema = (0, import_ds_props_helpers.describe)(DSAccordionItem);