@elliemae/ds-accordion 3.15.0 → 3.16.0-next.10

package/dist/cjs/DSAccordion.js

@@ -31,18 +31,18 @@ __export(DSAccordion_exports, {
 module.exports = __toCommonJS(DSAccordion_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_AccordionContent = require("./parts/accordionContent/AccordionContent");
-var import_useAccordion = require("./config/useAccordion");
-var import_DSAccordionCTX = require("./DSAccordionCTX");
-var import_react_desc_prop_types = require("./react-desc-prop-types");
-var import_theming = require("./exported-related/theming");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_AccordionContent = require("./parts/accordionContent/AccordionContent.js");
+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");
 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;
-const DSAccordionWithSchema = (0, import_ds_utilities.describe)(DSAccordion);
+const DSAccordionWithSchema = (0, import_ds_props_helpers.describe)(DSAccordion);
 DSAccordionWithSchema.propTypes = import_react_desc_prop_types.accordionPropTypes;
 var DSAccordion_default = DSAccordion;
 //# sourceMappingURL=DSAccordion.js.map

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-utilities';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent';\nimport { useAccordion } from './config/useAccordion';\nimport { DSAccordionContext } from './DSAccordionCTX';\nimport { accordionPropTypes } from './react-desc-prop-types';\nimport type { DSAccordionT } from './react-desc-prop-types';\nimport { DSAccordionName } from './exported-related/theming';\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,0BAAyB;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,8BAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
+  "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;",
   "names": []
 }

package/dist/cjs/DSAccordionCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSAccordionCTX.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext } from 'react';\nimport type { DSAccordionT } from './react-desc-prop-types';\nimport type { DSAccordionInternalsT } from './sharedTypes';\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"],
+  "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

@@ -29,11 +29,11 @@ __export(useAccordion_exports, {
 module.exports = __toCommonJS(useAccordion_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_useAccordionRefs = require("./useAccordionRefs");
-var import_defaultProps = require("../defaultProps");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_useAccordionRefs = require("./useAccordionRefs.js");
+var import_defaultProps = require("../defaultProps.js");
 const useAccordion = (props) => {
-  const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps);
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps);
   const { activeValue, allowMultipleOpen, onChange } = propsWithDefaults;
   const { focusableChildrenReferences, allChildrenReferences } = (0, import_useAccordionRefs.useAccordionRefs)(propsWithDefaults);
   const [internalActiveValue, setInternalActiveValue] = (0, import_react.useState)(activeValue);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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-utilities';\nimport { useAccordionRefs } from './useAccordionRefs';\nimport { defaultProps } from '../defaultProps';\nimport type { DSAccordionT } from '../react-desc-prop-types';\nimport type { DSAccordionInternalsT } from '../sharedTypes';\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,0BAA6C;AAC7C,8BAAiC;AACjC,0BAA6B;AAYtB,MAAM,eAAe,CAAC,UAA+D;AAC1F,QAAM,wBAAoB,kDAA6B,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;",
+  "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,7 +1,7 @@
 {
   "version": 3,
   "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';\nimport type { DSAccordionInternalsT } from '../sharedTypes';\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"],
+  "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,SAAS;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.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';\nimport type { DSAccordionT } from './react-desc-prop-types';\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"],
+  "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;",
   "names": []
 }

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

@@ -22,6 +22,6 @@ 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"), module.exports);
-__reExport(exported_related_exports, require("./theming"), module.exports);
+__reExport(exported_related_exports, require("./DSAccordionDatatestid.js"), module.exports);
+__reExport(exported_related_exports, require("./theming.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';\nexport * from './theming';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,oCAAd;AACA,qCAAc,sBADd;",
+  "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;",
   "names": []
 }

package/dist/cjs/index.js

@@ -29,8 +29,8 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./DSAccordion"), module.exports);
-__reExport(src_exports, require("./parts/accordionItem/DSAccordionItem"), module.exports);
-__reExport(src_exports, require("./exported-related"), module.exports);
-var import_DSAccordion = __toESM(require("./DSAccordion"));
+__reExport(src_exports, require("./DSAccordion.js"), module.exports);
+__reExport(src_exports, require("./parts/accordionItem/DSAccordionItem.js"), module.exports);
+__reExport(src_exports, require("./exported-related/index.js"), module.exports);
+var import_DSAccordion = __toESM(require("./DSAccordion.js"));
 //# sourceMappingURL=index.js.map

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';\nexport * from './parts/accordionItem/DSAccordionItem';\nexport * from './exported-related';\n\nexport { default } from './DSAccordion';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,0BAAd;AACA,wBAAc,kDADd;AAEA,wBAAc,+BAFd;AAIA,yBAAwB;",
+  "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;",
   "names": []
 }

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

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

@@ -30,17 +30,17 @@ module.exports = __toCommonJS(AccordionContent_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_DSAccordionCTX = require("../../DSAccordionCTX");
-var import_DSAccordionDatatestid = require("../../exported-related/DSAccordionDatatestid");
-var import_styles = require("./styles");
+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_styles = require("./styles.js");
 const AccordionContent = () => {
   const {
     props: { containerProps, children, onChange, ...rest }
   } = (0, import_react.useContext)(import_DSAccordionCTX.DSAccordionContext);
   const childrenWithIndex = [];
-  const xstyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(rest);
-  const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(rest);
+  const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
+  const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
   import_react.default.Children.forEach(
     children,
     (child, index) => childrenWithIndex.push(

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-utilities';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid';\nimport { StyledContainer } from './styles';\nimport type { DSAccordionT } from '../../react-desc-prop-types';\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,0BAA2D;AAC3D,4BAAmC;AACnC,mCAAsC;AACtC,oBAAgC;AAGzB,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,aAAa,KAAK;AAAA,EACvD,QAAI,yBAAW,wCAAkB;AAEjC,QAAM,oBAA0E,CAAC;AAEjF,QAAM,mBAAe,wCAAmB,IAAI;AAE5C,QAAM,kBAAc,4CAAuB,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;",
+  "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,aAAa,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;",
   "names": ["React"]
 }

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

@@ -29,7 +29,7 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_exported_related = require("../../exported-related");
+var import_exported_related = require("../../exported-related/index.js");
 const StyledContainer = (0, import_ds_system.styled)("div", {
   name: import_exported_related.DSAccordionName,
   slot: import_exported_related.DSAccordionSlots.CONTAINER

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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';\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"],
+  "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

@@ -32,17 +32,19 @@ module.exports = __toCommonJS(DSAccordionItem_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_button = require("@elliemae/ds-button");
 var import_ds_popperjs = require("@elliemae/ds-popperjs");
-var import_defaultProps = require("../../defaultProps");
-var import_styles = require("./styles");
-var import_useAccordionItem = require("./useAccordionItem");
-var import_DSAccordionCTX = require("../../DSAccordionCTX");
-var import_DSAccordionDatatestid = require("../../exported-related/DSAccordionDatatestid");
-var import_react_desc_prop_types = require("../../react-desc-prop-types");
+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_react_desc_prop_types = require("../../react-desc-prop-types.js");
 const DSAccordionItem = (props) => {
-  const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
     props,
     import_defaultProps.accordionItemDefaultProps
   );
@@ -62,8 +64,8 @@ const DSAccordionItem = (props) => {
     ...rest
   } = propsWithDefaults;
   const { handleOnClick, handleOnKeyDown, selected } = (0, import_useAccordionItem.useAccordionItem)({ value, disabled });
-  const xstyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(rest);
-  const xstyledContentAttrs = (0, import_ds_utilities.useGetXstyledProps)(xStyledPropsContent);
+  const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
+  const xstyledContentAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(xStyledPropsContent);
   const {
     allChildrenReferences,
     actualActiveValue,
@@ -92,58 +94,6 @@ const DSAccordionItem = (props) => {
   }, [CustomActions, actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);
   const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = (0, import_ds_utilities.useIsShowingEllipsis)();
   const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = (0, import_ds_utilities.useIsShowingEllipsis)();
-  const Titles = (0, import_react.useMemo)(() => {
-    if ((isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) && !isDSMobile)
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_styles.StyledPrimaryTitle,
-          {
-            ref: setPrimaryElement,
-            ...title ? { id: `accordion_${title || ""}id` } : void 0,
-            disabled,
-            isDSMobile,
-            selected,
-            withSecondaryTitle: secondaryTitle,
-            children: title
-          }
-        ),
-        !isDSMobile && secondaryTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSecondaryTitle, { ref: setSecondaryElement, disabled, selected, children: secondaryTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_popperjs.DSPopperJS, { referenceElement, 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
-          ] })
-        ] }) })
-      ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styles.StyledPrimaryTitle,
-        {
-          ref: setPrimaryElement,
-          ...title ? { id: `accordion_${title || ""}id` } : void 0,
-          disabled,
-          isDSMobile,
-          selected,
-          withSecondaryTitle: secondaryTitle,
-          children: title
-        }
-      ),
-      !isDSMobile && secondaryTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSecondaryTitle, { ref: setSecondaryElement, disabled, selected, children: secondaryTitle })
-    ] });
-  }, [
-    disabled,
-    isDSMobile,
-    isPrimaryShowingEllipsis,
-    isSecondaryShowingEllipsis,
-    referenceElement,
-    secondaryTitle,
-    setPrimaryElement,
-    setSecondaryElement,
-    showPopover,
-    selected,
-    title
-  ]);
   const onKeyDownWithIndex = (0, import_react.useCallback)(
     (e) => {
       handleOnKeyDown(e, dsIndex);
@@ -155,7 +105,7 @@ const DSAccordionItem = (props) => {
     [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis]
   );
   const handleOnBlur = (0, import_react.useCallback)(() => setShowPopover(false), []);
-  const { className, ...globalAttrs } = (0, import_ds_utilities.useGetGlobalAttributes)(rest, {
+  const { className, ...globalAttrs } = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest, {
     onClick: handleOnClick,
     onFocus: handleOnFocus,
     onBlur: handleOnBlur
@@ -165,6 +115,84 @@ const DSAccordionItem = (props) => {
     onFocus: handleOnFocus,
     onBlur: handleOnBlur
   };
+  const titleDesktop = (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ds_grid.Grid,
+      {
+        onMouseEnter: handleOnFocus,
+        onMouseLeave: handleOnBlur,
+        rows: ["auto", "auto"],
+        rowGap: secondaryTitle ? "3px" : "0px",
+        padding: "6px 0px",
+        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,
+              {
+                ref: setPrimaryElement,
+                ...title ? { id: `accordion_${title || ""}id` } : void 0,
+                disabled,
+                selected,
+                withSecondaryTitle: secondaryTitle,
+                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 })
+          ] })
+        ]
+      }
+    ),
+    [
+      setPrimaryElement,
+      IconOpened,
+      IconClosed,
+      setSecondaryElement,
+      handleOnBlur,
+      handleOnFocus,
+      handleOnBlur,
+      secondaryTitle,
+      disabled,
+      selected,
+      IconOpened,
+      IconClosed,
+      setPrimaryElement,
+      title,
+      disabled
+    ]
+  );
+  const titleMobile = (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["auto", "20px"], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styles.StyledItemTitles,
+        {
+          onMouseEnter: handleOnFocus,
+          onMouseLeave: handleOnBlur,
+          isDSMobile: true,
+          withSecondaryTitle: secondaryTitle,
+          selected,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_styles.StyledPrimaryTitle,
+            {
+              ref: setPrimaryElement,
+              ...title ? { id: `accordion_${title || ""}id` } : void 0,
+              disabled,
+              isDSMobile: true,
+              selected,
+              withSecondaryTitle: secondaryTitle,
+              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)(
@@ -187,18 +215,14 @@ const DSAccordionItem = (props) => {
           ...handlers,
           ...globalAttrs,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledItemAddon, { disabled, isDSMobile, children: selected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconOpened, { isDSMobile }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconClosed, { isDSMobile }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_styles.StyledItemTitles,
-              {
-                onMouseEnter: handleOnFocus,
-                onMouseLeave: handleOnBlur,
-                isDSMobile,
-                withSecondaryTitle: secondaryTitle,
-                selected,
-                children: Titles
-              }
-            )
+            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
+              ] })
+            ] }) })
           ]
         }
       ),
@@ -219,7 +243,7 @@ const DSAccordionItem = (props) => {
   ] });
 };
 DSAccordionItem.displayName = "DSAccordionItem";
-const DSAccordionItemWithSchema = (0, import_ds_utilities.describe)(DSAccordionItem);
+const DSAccordionItemWithSchema = (0, import_ds_props_helpers.describe)(DSAccordionItem);
 DSAccordionItemWithSchema.propTypes = import_react_desc_prop_types.accordionItemPropTypes;
 var DSAccordionItem_default = DSAccordionItem;
 //# sourceMappingURL=DSAccordionItem.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/accordionItem/DSAccordionItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  describe,\n  useIsShowingEllipsis,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n  StyledItemAddon,\n  StyledItemContainer,\n  StyledItemContent,\n  StyledItemCustomActions,\n  StyledItemHeader,\n  StyledItemHeaderContainer,\n  StyledItemTitles,\n  StyledPrimaryTitle,\n  StyledSecondaryTitle,\n  StyledTooltipContent,\n} from './styles';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types';\nimport type { DSAccordionT } from '../../react-desc-prop-types';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(\n    props,\n    accordionItemDefaultProps,\n  ) as DSAccordionT.InternalItemProps;\n\n  const {\n    children,\n    title,\n    secondaryTitle,\n    customActions,\n    iconOpened: IconOpened,\n    iconClosed: IconClosed,\n    value,\n    disabled,\n    dsIndex,\n    renderCustomActions,\n    CustomActions,\n    xStyledPropsContent,\n    ...rest\n  } = propsWithDefaults;\n\n  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n  const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);\n\n  const {\n    allChildrenReferences,\n    actualActiveValue,\n    props: { isDSMobile },\n  } = useContext(DSAccordionContext);\n\n  const [showPopover, setShowPopover] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>();\n\n  const CustomActionsContent = useMemo(() => {\n    if (!isDSMobile && customActions?.length > 0)\n      return (\n        <StyledItemCustomActions isDSMobile={isDSMobile}>\n          {customActions?.map(({ onClick, id, ...otherProps }) => (\n            <DSButton\n              key={id}\n              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n                e.stopPropagation();\n                if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\n              }}\n              {...otherProps}\n              buttonType={BUTTON_TYPE.SECONDARY}\n            />\n          ))}\n        </StyledItemCustomActions>\n      );\n\n    if (!isDSMobile && (renderCustomActions || CustomActions))\n      return (\n        <StyledItemCustomActions isDSMobile={isDSMobile}>\n          {CustomActions !== undefined ? (\n            <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n          ) : (\n            renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n          )}\n        </StyledItemCustomActions>\n      );\n    return null;\n  }, [CustomActions, actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n  const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n  const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n  // eslint-disable-next-line complexity\n  const Titles = useMemo(() => {\n    if ((isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) && !isDSMobile)\n      return (\n        <>\n          <StyledPrimaryTitle\n            ref={setPrimaryElement}\n            {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n            disabled={disabled}\n            isDSMobile={isDSMobile}\n            selected={selected}\n            withSecondaryTitle={secondaryTitle}\n          >\n            {title}\n          </StyledPrimaryTitle>\n          {!isDSMobile && secondaryTitle && (\n            <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n              {secondaryTitle}\n            </StyledSecondaryTitle>\n          )}\n          <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n            <StyledTooltipContent>\n              <p>{title}</p>\n              <p> {secondaryTitle}</p>\n            </StyledTooltipContent>\n          </DSPopperJS>\n        </>\n      );\n\n    return (\n      <>\n        <StyledPrimaryTitle\n          ref={setPrimaryElement}\n          {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n          disabled={disabled}\n          isDSMobile={isDSMobile}\n          selected={selected}\n          withSecondaryTitle={secondaryTitle}\n        >\n          {title}\n        </StyledPrimaryTitle>\n        {!isDSMobile && secondaryTitle && (\n          <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n            {secondaryTitle}\n          </StyledSecondaryTitle>\n        )}\n      </>\n    );\n  }, [\n    disabled,\n    isDSMobile,\n    isPrimaryShowingEllipsis,\n    isSecondaryShowingEllipsis,\n    referenceElement,\n    secondaryTitle,\n    setPrimaryElement,\n    setSecondaryElement,\n    showPopover,\n    selected,\n    title,\n  ]);\n\n  const onKeyDownWithIndex = useCallback(\n    (e: React.KeyboardEvent) => {\n      handleOnKeyDown(e, dsIndex);\n    },\n    [dsIndex, handleOnKeyDown],\n  );\n  const handleOnFocus = useCallback(\n    () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n    [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n  );\n\n  const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n  const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {\n    onClick: handleOnClick,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const handlers = {\n    onClick: handleOnClick,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  };\n\n  return (\n    <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER} className={className} {...xstyledAttrs}>\n      <StyledItemHeaderContainer disabled={disabled} ref={setReferenceElement}>\n        <StyledItemHeader\n          type=\"button\"\n          withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n          withSecondaryTitle={secondaryTitle}\n          tabIndex={!disabled ? 0 : undefined}\n          disabled={disabled}\n          data-disabled={disabled}\n          ref={allChildrenReferences[dsIndex]}\n          onKeyDown={onKeyDownWithIndex}\n          isDSMobile={isDSMobile}\n          data-testid={DSAccordionDataTestid.ITEM.HEADER}\n          id={`ds-accordion-header-${value}`}\n          aria-expanded={selected}\n          aria-disabled={disabled}\n          aria-controls={`ds-accordion-content-${value}`}\n          {...handlers}\n          {...globalAttrs}\n        >\n          <StyledItemAddon disabled={disabled} isDSMobile={isDSMobile}>\n            {selected ? <IconOpened isDSMobile={isDSMobile} /> : <IconClosed isDSMobile={isDSMobile} />}\n          </StyledItemAddon>\n          <StyledItemTitles\n            onMouseEnter={handleOnFocus}\n            onMouseLeave={handleOnBlur}\n            isDSMobile={isDSMobile}\n            withSecondaryTitle={secondaryTitle}\n            selected={selected}\n          >\n            {Titles}\n          </StyledItemTitles>\n        </StyledItemHeader>\n        {CustomActionsContent}\n      </StyledItemHeaderContainer>\n      {selected && (\n        <StyledItemContent\n          data-testid={DSAccordionDataTestid.ITEM.CONTENT}\n          aria-labelledby={`ds-accordion-header-${value}`}\n          role=\"region\"\n          isDSMobile={isDSMobile}\n          id={`ds-accordion-content-${value}`}\n          {...xstyledContentAttrs}\n        >\n          {children}\n        </StyledItemContent>\n      )}\n    </StyledItemContainer>\n  );\n};\n\nDSAccordionItem.displayName = 'DSAccordionItem';\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps.js';\nimport {\n  StyledItemAddon,\n  StyledItemContainer,\n  StyledItemContent,\n  StyledItemCustomActions,\n  StyledItemHeader,\n  StyledItemHeaderContainer,\n  StyledItemTitles,\n  StyledPrimaryTitle,\n  StyledSecondaryTitle,\n  StyledTooltipContent,\n} from './styles.js';\nimport { useAccordionItem } from './useAccordionItem.js';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid.js';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(\n    props,\n    accordionItemDefaultProps,\n  ) as DSAccordionT.InternalItemProps;\n\n  const {\n    children,\n    title,\n    secondaryTitle,\n    customActions,\n    iconOpened: IconOpened,\n    iconClosed: IconClosed,\n    value,\n    disabled,\n    dsIndex,\n    renderCustomActions,\n    CustomActions,\n    xStyledPropsContent,\n    ...rest\n  } = propsWithDefaults;\n\n  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n  const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);\n\n  const {\n    allChildrenReferences,\n    actualActiveValue,\n    props: { isDSMobile },\n  } = useContext(DSAccordionContext);\n\n  const [showPopover, setShowPopover] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>();\n\n  const CustomActionsContent = useMemo(() => {\n    if (!isDSMobile && customActions?.length > 0)\n      return (\n        <StyledItemCustomActions isDSMobile={isDSMobile}>\n          {customActions?.map(({ onClick, id, ...otherProps }) => (\n            <DSButton\n              key={id}\n              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n                e.stopPropagation();\n                if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\n              }}\n              {...otherProps}\n              buttonType={BUTTON_TYPE.SECONDARY}\n            />\n          ))}\n        </StyledItemCustomActions>\n      );\n\n    if (!isDSMobile && (renderCustomActions || CustomActions))\n      return (\n        <StyledItemCustomActions isDSMobile={isDSMobile}>\n          {CustomActions !== undefined ? (\n            <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n          ) : (\n            renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n          )}\n        </StyledItemCustomActions>\n      );\n    return null;\n  }, [CustomActions, actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n  const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n  const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n  const onKeyDownWithIndex = useCallback(\n    (e: React.KeyboardEvent) => {\n      handleOnKeyDown(e, dsIndex);\n    },\n    [dsIndex, handleOnKeyDown],\n  );\n  const handleOnFocus = useCallback(\n    () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n    [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n  );\n\n  const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n  const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {\n    onClick: handleOnClick,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const handlers = {\n    onClick: handleOnClick,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  };\n\n  const titleDesktop = useMemo(\n    () => (\n      <Grid\n        onMouseEnter={handleOnFocus}\n        onMouseLeave={handleOnBlur}\n        rows={['auto', 'auto']}\n        rowGap={secondaryTitle ? '3px' : '0px'}\n        padding=\"6px 0px\"\n        width=\"100%\"\n      >\n        <Grid cols={['20px', 'auto']}>\n          <StyledItemAddon disabled={disabled}>{selected ? <IconOpened /> : <IconClosed />}</StyledItemAddon>\n          <StyledItemTitles withSecondaryTitle={secondaryTitle} selected={selected}>\n            <StyledPrimaryTitle\n              ref={setPrimaryElement}\n              {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n              disabled={disabled}\n              selected={selected}\n              withSecondaryTitle={secondaryTitle}\n            >\n              {title}\n            </StyledPrimaryTitle>\n          </StyledItemTitles>\n        </Grid>\n        {secondaryTitle && (\n          <Grid cols={['20px', 'auto']}>\n            <div></div>\n            <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n              {secondaryTitle}\n            </StyledSecondaryTitle>\n          </Grid>\n        )}\n      </Grid>\n    ),\n    [\n      setPrimaryElement,\n      IconOpened,\n      IconClosed,\n      setSecondaryElement,\n      handleOnBlur,\n      handleOnFocus,\n      handleOnBlur,\n      secondaryTitle,\n      disabled,\n      selected,\n      IconOpened,\n      IconClosed,\n      setPrimaryElement,\n      title,\n      disabled,\n    ],\n  );\n\n  const titleMobile = useMemo(\n    () => (\n      <Grid width=\"100%\">\n        <Grid cols={['auto', '20px']}>\n          <StyledItemTitles\n            onMouseEnter={handleOnFocus}\n            onMouseLeave={handleOnBlur}\n            isDSMobile\n            withSecondaryTitle={secondaryTitle}\n            selected={selected}\n          >\n            <StyledPrimaryTitle\n              ref={setPrimaryElement}\n              {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n              disabled={disabled}\n              isDSMobile\n              selected={selected}\n              withSecondaryTitle={secondaryTitle}\n            >\n              {title}\n            </StyledPrimaryTitle>\n          </StyledItemTitles>\n          <StyledItemAddon disabled={disabled} isDSMobile>\n            {selected ? <IconOpened isDSMobile /> : <IconClosed isDSMobile />}\n          </StyledItemAddon>\n        </Grid>\n      </Grid>\n    ),\n    [handleOnFocus, handleOnBlur, secondaryTitle, selected, setPrimaryElement, title, disabled, IconOpened, IconClosed],\n  );\n  return (\n    <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER} className={className} {...xstyledAttrs}>\n      <StyledItemHeaderContainer disabled={disabled} ref={setReferenceElement}>\n        <StyledItemHeader\n          type=\"button\"\n          withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n          withSecondaryTitle={secondaryTitle}\n          tabIndex={!disabled ? 0 : undefined}\n          disabled={disabled}\n          data-disabled={disabled}\n          ref={allChildrenReferences[dsIndex]}\n          onKeyDown={onKeyDownWithIndex}\n          isDSMobile={isDSMobile}\n          data-testid={DSAccordionDataTestid.ITEM.HEADER}\n          id={`ds-accordion-header-${value}`}\n          aria-expanded={selected}\n          aria-disabled={disabled}\n          aria-controls={`ds-accordion-content-${value}`}\n          {...handlers}\n          {...globalAttrs}\n        >\n          {isDSMobile ? titleMobile : titleDesktop}\n          <DSPopperJS referenceElement={referenceElement} showPopover={!selected && showPopover}>\n            <StyledTooltipContent>\n              <p>{title}</p>\n              <p> {secondaryTitle}</p>\n            </StyledTooltipContent>\n          </DSPopperJS>\n        </StyledItemHeader>\n        {CustomActionsContent}\n      </StyledItemHeaderContainer>\n      {selected && (\n        <StyledItemContent\n          data-testid={DSAccordionDataTestid.ITEM.CONTENT}\n          aria-labelledby={`ds-accordion-header-${value}`}\n          role=\"region\"\n          isDSMobile={isDSMobile}\n          id={`ds-accordion-content-${value}`}\n          {...xstyledContentAttrs}\n        >\n          {children}\n        </StyledItemContent>\n      )}\n    </StyledItemContainer>\n  );\n};\n\nDSAccordionItem.displayName = 'DSAccordionItem';\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -38,20 +38,7 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_exported_related = require("../../exported-related");
-const paddingSetter = ({ isDSMobile, withSecondaryTitle }) => {
-  if (isDSMobile)
-    return import_ds_system.css`
-      padding: 13px 0;
-    `;
-  if (withSecondaryTitle)
-    return import_ds_system.css`
-      padding: 6px 0;
-    `;
-  return import_ds_system.css`
-    padding: 7px 0;
-  `;
-};
+var import_exported_related = require("../../exported-related/index.js");
 const StyledItemContainer = (0, import_ds_system.styled)("div", {
   name: import_exported_related.DSAccordionName,
   slot: import_exported_related.DSAccordionSlots.ITEM.CONTAINER
@@ -79,7 +66,6 @@ const StyledItemHeader = (0, import_ds_system.styled)("button", {
     cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
   }
   padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
-  ${({ isDSMobile }) => isDSMobile ? `flex-direction: row-reverse;` : ``}
   &:focus {
     &:after {
       position: absolute;
@@ -108,7 +94,6 @@ const StyledItemAddon = (0, import_ds_system.styled)("div", {
   height: 100%;
   display: grid;
   place-items: center;
-
   & .em-ds-icon svg {
     fill: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.brand[800]};
   }
@@ -119,7 +104,6 @@ const StyledItemTitles = (0, import_ds_system.styled)("div", {
 })`
   display: grid;
   grid-gap: ${({ theme }) => theme.space.xxxs};
-  ${paddingSetter}
   grid-template-columns: 100%;
   width: 100%;
   align-content: center;