@elliemae/ds-accordion 3.14.0-rc.0 → 3.14.0-rc.2

package/dist/cjs/defaultProps.js

@@ -52,6 +52,7 @@ const accordionItemDefaultProps = {
   iconOpened: DefaultIconOpen,
   title: "",
   customActions: [],
-  disabled: false
+  disabled: false,
+  xStyledPropsContent: {}
 };
 //# 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';\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};\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;AACZ;",
+  "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"],
+  "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/parts/accordionItem/DSAccordionItem.js

@@ -58,10 +58,12 @@ const DSAccordionItem = (props) => {
     dsIndex,
     renderCustomActions,
     CustomActions,
+    xStyledPropsContent,
     ...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 {
     allChildrenReferences,
     actualActiveValue,
@@ -210,6 +212,7 @@ const DSAccordionItem = (props) => {
         role: "region",
         isDSMobile,
         id: `ds-accordion-content-${value}`,
+        ...xstyledContentAttrs,
         children
       }
     )

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    ...rest\n  } = propsWithDefaults;\n\n  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n\n  const xstyledAttrs = useGetXstyledProps(rest);\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        >\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  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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEX;AAtEZ,mBAAkE;AAClE,0BAMO;AACP,uBAAsC;AACtC,yBAA2B;AAC3B,0BAA0C;AAC1C,oBAWO;AACP,8BAAiC;AACjC,4BAAmC;AACnC,mCAAsC;AACtC,mCAAuC;AAGvC,MAAM,kBAAkB,CAAC,UAA+C;AACtE,QAAM,wBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,eAAe,iBAAiB,SAAS,QAAI,0CAAiB,EAAE,OAAO,SAAS,CAAC;AAEzF,QAAM,mBAAe,wCAAmB,IAAI;AAC5C,QAAM,0BAAsB,wCAAmB,mBAAmB;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,WAAW;AAAA,EACtB,QAAI,yBAAW,wCAAkB;AAEjC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAA6B;AAE7E,QAAM,2BAAuB,sBAAQ,MAAM;AACzC,QAAI,CAAC,cAAc,eAAe,SAAS;AACzC,aACE,4CAAC,yCAAwB,YACtB,yBAAe,IAAI,CAAC,EAAE,SAAS,OAAO,WAAW,MAChD;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,CAAC,MAA0F;AAClG,cAAE,gBAAgB;AAClB,gBAAI;AAAS,sBAAQ,CAA8C;AAAA,UACrE;AAAA,UACC,GAAG;AAAA,UACJ,YAAY,6BAAY;AAAA;AAAA,QANnB;AAAA,MAOP,CACD,GACH;AAGJ,QAAI,CAAC,eAAe,uBAAuB;AACzC,aACE,4CAAC,yCAAwB,YACtB,4BAAkB,SACjB,4CAAC,iBAAc,SAAS,uBAAuB,mBAAsC,IAErF,sBAAsB,EAAE,SAAS,uBAAuB,kBAAkB,CAAC,GAE/E;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,mBAAmB,uBAAuB,eAAe,YAAY,mBAAmB,CAAC;AAE5G,QAAM,EAAE,mBAAmB,0BAA0B,YAAY,kBAAkB,QAAI,0CAAqB;AAE5G,QAAM,EAAE,mBAAmB,4BAA4B,YAAY,oBAAoB,QAAI,0CAAqB;AAGhH,QAAM,aAAS,sBAAQ,MAAM;AAC3B,SAAK,4BAA4B,+BAA+B,CAAC;AAC/D,aACE,4EACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACJ,GAAI,QAAQ,EAAE,IAAI,aAAa,SAAS,OAAO,IAAI;AAAA,YACpD;AAAA,YACA;AAAA,YACA;AAAA,YACA,oBAAoB;AAAA,YAEnB;AAAA;AAAA,QACH;AAAA,QACC,CAAC,cAAc,kBACd,4CAAC,sCAAqB,KAAK,qBAAqB,UAAoB,UACjE,0BACH;AAAA,QAEF,4CAAC,iCAAW,kBAAoC,aAC9C,uDAAC,sCACC;AAAA,sDAAC,OAAG,iBAAM;AAAA,UACV,6CAAC,OAAE;AAAA;AAAA,YAAE;AAAA,aAAe;AAAA,WACtB,GACF;AAAA,SACF;AAGJ,WACE,4EACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACJ,GAAI,QAAQ,EAAE,IAAI,aAAa,SAAS,OAAO,IAAI;AAAA,UACpD;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAoB;AAAA,UAEnB;AAAA;AAAA,MACH;AAAA,MACC,CAAC,cAAc,kBACd,4CAAC,sCAAqB,KAAK,qBAAqB,UAAoB,UACjE,0BACH;AAAA,OAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA2B;AAC1B,sBAAgB,GAAG,OAAO;AAAA,IAC5B;AAAA,IACA,CAAC,SAAS,eAAe;AAAA,EAC3B;AACA,QAAM,oBAAgB;AAAA,IACpB,MAAM,eAAe,4BAA4B,0BAA0B;AAAA,IAC3E,CAAC,0BAA0B,0BAA0B;AAAA,EACvD;AAEA,QAAM,mBAAe,0BAAY,MAAM,eAAe,KAAK,GAAG,CAAC,CAAC;AAEhE,QAAM,EAAE,cAAc,YAAY,QAAI,4CAAuB,MAAM;AAAA,IACjE,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,WAAW;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAEA,SACE,6CAAC,qCAAoB,eAAa,mDAAsB,KAAK,WAAW,WAAuB,GAAG,cAChG;AAAA,iDAAC,2CAA0B,UAAoB,KAAK,qBAClD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,oBAAoB,eAAe,SAAS,KAAK,wBAAwB,WAAc,CAAC;AAAA,UACxF,oBAAoB;AAAA,UACpB,UAAU,CAAC,WAAW,IAAI;AAAA,UAC1B;AAAA,UACA,iBAAe;AAAA,UACf,KAAK,sBAAsB;AAAA,UAC3B,WAAW;AAAA,UACX;AAAA,UACA,eAAa,mDAAsB,KAAK;AAAA,UACxC,IAAI,uBAAuB;AAAA,UAC3B,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,iBAAe,wBAAwB;AAAA,UACtC,GAAG;AAAA,UACH,GAAG;AAAA,UAEJ;AAAA,wDAAC,iCAAgB,UAAoB,YAClC,qBAAW,4CAAC,cAAW,YAAwB,IAAK,4CAAC,cAAW,YAAwB,GAC3F;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,cAAc;AAAA,gBACd,cAAc;AAAA,gBACd;AAAA,gBACA,oBAAoB;AAAA,gBACpB;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,mDAAsB,KAAK;AAAA,QACxC,mBAAiB,uBAAuB;AAAA,QACxC,MAAK;AAAA,QACL;AAAA,QACA,IAAI,wBAAwB;AAAA,QAC3B,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAEA,gBAAgB,cAAc;AAC9B,MAAM,gCAA4B,8BAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,0BAAQ;",
   "names": []
 }

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

@@ -99,6 +99,7 @@ const StyledItemContent = (0, import_ds_system.styled)("div", {
   slot: import_exported_related.DSAccordionSlots.ITEM.CONTENT.CONTAINER
 })`
   padding: ${({ isDSMobile }) => isDSMobile ? `3px 16px 24px 16px` : "16px 20px"};
+  ${import_ds_system.xStyledCommonProps};
 `;
 const StyledItemAddon = (0, import_ds_system.styled)("div", {
   name: import_exported_related.DSAccordionName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/accordionItem/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related';\ninterface StyledItemHeaderPropsT {\n  withCustomActions: boolean;\n  withSecondaryTitle?: string;\n  isDSMobile: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n  withSecondaryTitle?: string;\n  isDSMobile: boolean;\n  selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n  disabled: boolean;\n  isDSMobile: boolean;\n  selected: boolean;\n  withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n  isDSMobile: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n  disabled: boolean;\n  selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n  disabled: boolean;\n  isDSMobile: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n  disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n  isDSMobile: boolean;\n}\n\ninterface PaddingSetterT {\n  isDSMobile: boolean;\n  withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n  if (isDSMobile)\n    return css`\n      padding: 13px 0;\n    `;\n  if (withSecondaryTitle)\n    return css`\n      padding: 6px 0;\n    `;\n  return css`\n    padding: 7px 0;\n  `;\n};\n\nexport const StyledItemContainer = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.CONTAINER,\n})`\n  display: grid;\n  grid-template-rows: auto auto;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  align-items: center;\n  min-width: 240px;\n  grid-template-columns: 100%;\n  ${xStyledCommonProps};\n`;\n\nexport const StyledItemHeader = styled('button', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderPropsT>`\n  display: flex;\n  min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n    isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n  width: 100%;\n  align-items: center;\n  border: none;\n  outline: none;\n  background: none;\n  &:hover {\n    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  }\n  padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n  ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledItemContent = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.CONTENT.CONTAINER,\n})<StyledItemContentPropsT>`\n  padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n`;\n\nexport const StyledItemAddon = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.ADDON,\n})<StyledItemAddonPropsT>`\n  height: 100%;\n  display: grid;\n  place-items: center;\n\n  & .em-ds-icon svg {\n    fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.brand[800])};\n  }\n`;\n\nexport const StyledItemTitles = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n  display: grid;\n  grid-gap: ${({ theme }) => theme.space.xxxs};\n  ${paddingSetter}\n  grid-template-columns: 100%;\n  width: 100%;\n  align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n  margin: 0;\n  font-size: 16px;\n  line-height: 1.125;\n  text-align: left;\n  text-overflow: ellipsis;\n  min-height: ${({ theme }) => theme.space.xs};\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n  font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n  ${({ selected }) =>\n    selected\n      ? `word-break: break-word;`\n      : `\n   overflow: hidden;\n   white-space: nowrap;\n   `};\n  width: 100%;\n  display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n  margin: 0;\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  line-height: 1.273;\n  text-align: left;\n  min-height: 12px;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n  text-overflow: ellipsis;\n  ${({ selected }) =>\n    selected\n      ? `word-break: break-word;`\n      : `\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\n  display: block;`}\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n  display: grid;\n  grid-auto-flow: column;\n  place-items: center;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : '0 20px 0 16px')};\n  justify-content: flex-end;\n  height: 28px;\n`;\n\nexport const StyledItemHeaderContainer = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderContainerPropsT>`\n  display: grid;\n  grid-template-columns: auto max-content;\n  place-items: center;\n  position: relative;\n  border-radius: 2px;\n  &:hover {\n    ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n  }\n`;\n\nexport const StyledTooltipContent = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.TOOLTIP,\n})`\n  padding: 8px;\n  width: 250px;\n  background: white;\n  display: grid;\n  gap: ${({ theme }) => theme.space.xxs};\n\n  p {\n    margin: 0;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,8BAAkD;AA+ClD,MAAM,gBAAgB,CAAC,EAAE,YAAY,mBAAmB,MAA8B;AACpF,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,SAAO;AAAA;AAAA;AAGT;AAEO,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK;AAC9B,CAAC;AAAA;AAAA;AAAA,6BAG4B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI7D;AAAA;AAGG,MAAM,uBAAmB,yBAAO,UAAU;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,oBAAoB,WAAW,MACrD,aAAa,SAAS,GAAG,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOhE,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAAA,aAE/C,CAAC,EAAE,WAAW,MAAO,aAAa,WAAW;AAAA,IACtD,CAAC,EAAE,WAAW,MAAO,aAAa,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAU7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,QAAQ;AACtC,CAAC;AAAA,aACY,CAAC,EAAE,WAAW,MAAO,aAAa,uBAAuB;AAAA;AAG/D,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMW,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzF,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA,cAEa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACrC;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMe,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAChC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA,iBAChF,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,MAAM,YAAY,WAAW,MAAM,YAAY;AAAA,IACrG,CAAC,EAAE,SAAS,MACZ,WACI,4BACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQD,MAAM,2BAAuB,yBAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA,WAIzC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7F,CAAC,EAAE,SAAS,MACZ,WACI,4BACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA,cAIa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,YAC7B,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,KAAK,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA;AAKtE,MAAM,gCAA4B,yBAAO,OAAO;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOK,CAAC,EAAE,UAAU,MAAM,MAAO,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,UAAU;AAAA;AAAA;AAIjF,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,SAKQ,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related';\ninterface StyledItemHeaderPropsT {\n  withCustomActions: boolean;\n  withSecondaryTitle?: string;\n  isDSMobile: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n  withSecondaryTitle?: string;\n  isDSMobile: boolean;\n  selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n  disabled: boolean;\n  isDSMobile: boolean;\n  selected: boolean;\n  withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n  isDSMobile: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n  disabled: boolean;\n  selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n  disabled: boolean;\n  isDSMobile: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n  disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n  isDSMobile: boolean;\n}\n\ninterface PaddingSetterT {\n  isDSMobile: boolean;\n  withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n  if (isDSMobile)\n    return css`\n      padding: 13px 0;\n    `;\n  if (withSecondaryTitle)\n    return css`\n      padding: 6px 0;\n    `;\n  return css`\n    padding: 7px 0;\n  `;\n};\n\nexport const StyledItemContainer = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.CONTAINER,\n})`\n  display: grid;\n  grid-template-rows: auto auto;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  align-items: center;\n  min-width: 240px;\n  grid-template-columns: 100%;\n  ${xStyledCommonProps};\n`;\n\nexport const StyledItemHeader = styled('button', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderPropsT>`\n  display: flex;\n  min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n    isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n  width: 100%;\n  align-items: center;\n  border: none;\n  outline: none;\n  background: none;\n  &:hover {\n    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  }\n  padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n  ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledItemContent = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.CONTENT.CONTAINER,\n})<StyledItemContentPropsT>`\n  padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n  ${xStyledCommonProps};\n`;\n\nexport const StyledItemAddon = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.ADDON,\n})<StyledItemAddonPropsT>`\n  height: 100%;\n  display: grid;\n  place-items: center;\n\n  & .em-ds-icon svg {\n    fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.brand[800])};\n  }\n`;\n\nexport const StyledItemTitles = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n  display: grid;\n  grid-gap: ${({ theme }) => theme.space.xxxs};\n  ${paddingSetter}\n  grid-template-columns: 100%;\n  width: 100%;\n  align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n  margin: 0;\n  font-size: 16px;\n  line-height: 1.125;\n  text-align: left;\n  text-overflow: ellipsis;\n  min-height: ${({ theme }) => theme.space.xs};\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n  font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n  ${({ selected }) =>\n    selected\n      ? `word-break: break-word;`\n      : `\n   overflow: hidden;\n   white-space: nowrap;\n   `};\n  width: 100%;\n  display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n  margin: 0;\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  line-height: 1.273;\n  text-align: left;\n  min-height: 12px;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n  text-overflow: ellipsis;\n  ${({ selected }) =>\n    selected\n      ? `word-break: break-word;`\n      : `\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\n  display: block;`}\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n  display: grid;\n  grid-auto-flow: column;\n  place-items: center;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : '0 20px 0 16px')};\n  justify-content: flex-end;\n  height: 28px;\n`;\n\nexport const StyledItemHeaderContainer = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderContainerPropsT>`\n  display: grid;\n  grid-template-columns: auto max-content;\n  place-items: center;\n  position: relative;\n  border-radius: 2px;\n  &:hover {\n    ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n  }\n`;\n\nexport const StyledTooltipContent = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.TOOLTIP,\n})`\n  padding: 8px;\n  width: 250px;\n  background: white;\n  display: grid;\n  gap: ${({ theme }) => theme.space.xxs};\n\n  p {\n    margin: 0;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -41,6 +41,9 @@ const accordionItemPropTypes = {
   iconClosed: import_ds_utilities.PropTypes.node.description("Custom Dimsum Icon when it is closed.").deprecated({ version: "3.x" }),
   iconOpened: import_ds_utilities.PropTypes.node.description("Custom Dimsum Icon when it is open.").deprecated({ version: "3.x" }),
   secondaryTitle: import_ds_utilities.PropTypes.string.description("Set a secondary title"),
+  xStyledPropsContent: import_ds_utilities.PropTypes.object.description(
+    "This property is xStyledProps object to apply in the content wrapper"
+  ),
   customActions: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.object).description("Set Dimsum AccordionItem custom actions.").deprecated({ version: "3.x" }),
   renderCustomActions: import_ds_utilities.PropTypes.func.description(
     "This property will render any JSX in the header controls area. You can access to all references and active values within the props. Rendered as a function which does not allow hook calls inside."

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { DSAccordionInternalsT } from './sharedTypes';\n\nexport declare namespace DSAccordionT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    allowMultipleOpen: boolean;\n    onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n    children: React.ReactElement<InternalItemProps>[];\n    isDSMobile: boolean;\n  }\n\n  export interface OptionalProps {\n    activeValue?: DSAccordionInternalsT.InternalActiveValue;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement<ItemProps>[];\n  }\n\n  export interface Props extends OptionalProps, Partial<Omit<DefaultProps, 'children'>>, RequiredProps {}\n\n  export interface ItemDefaultProps {\n    iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    title: string;\n    customActions: DSAccordionInternalsT.CustomActions[];\n    disabled: boolean;\n  }\n\n  export interface ItemOptionalProps {\n    secondaryTitle?: string;\n    renderCustomActions?: (props: {\n      allRefs: DSAccordionInternalsT.AllChildrenReferences;\n      actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n    }) => JSX.Element;\n    CustomActions?: React.ComponentType<{\n      allRefs: DSAccordionInternalsT.AllChildrenReferences;\n      actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n    }>;\n  }\n\n  export interface ItemRequiredProps {\n    children: React.ReactNode;\n    value: string | number;\n  }\n\n  export interface ItemProps extends ItemRequiredProps, ItemOptionalProps, Partial<ItemDefaultProps> {}\n\n  export interface InternalItemProps\n    extends ItemRequiredProps,\n      ItemOptionalProps,\n      Omit<ItemDefaultProps, 'disabled' | 'customActions' | 'iconClosed' | 'iconOpened'> {\n    dsIndex: number;\n    disabled: boolean;\n    customActions: DSAccordionInternalsT.CustomActions[];\n    iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n  }\n\n  export interface InternalProps\n    extends OptionalProps,\n      Partial<Omit<DefaultProps, 'children' | 'isDSMobile' | 'onChange'>> {\n    children: React.ReactElement<InternalItemProps>[];\n    isDSMobile: boolean;\n    onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n  }\n}\n\nexport const accordionItemPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n  title: PropTypes.string.description('Set a primary title.'),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Dimsum AccordionItem value, this value should be unique.',\n  ).isRequired,\n  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.').deprecated({ version: '3.x' }),\n  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.').deprecated({ version: '3.x' }),\n  secondaryTitle: PropTypes.string.description('Set a secondary title'),\n  customActions: PropTypes.arrayOf(PropTypes.object)\n    .description('Set Dimsum AccordionItem custom actions.')\n    .deprecated({ version: '3.x' }),\n  renderCustomActions: PropTypes.func\n    .description(\n      'This property will render any JSX in the header controls area. You can access to all references and active values within the props. Rendered as a function which does not allow hook calls inside.',\n    )\n    .deprecated({ version: '4.x' }),\n  CustomActions: PropTypes.func.description(\n    'This property will render any JSX in the header controls area. You can access to all references and active values within the props.',\n  ),\n};\n\nexport const accordionPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Adds props to the container.'),\n  activeValue: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('Selected active value. This property makes the component a controlled one.'),\n  children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAuE;AAqEhE,MAAM,yBAAyB;AAAA,EACpC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,8BAAU,KAAK,YAAY,+BAA+B,EAAE;AAAA,EACtE,OAAO,8BAAU,OAAO,YAAY,sBAAsB;AAAA,EAC1D,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF,EAAE;AAAA,EACF,YAAY,8BAAU,KAAK,YAAY,uCAAuC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC7G,YAAY,8BAAU,KAAK,YAAY,qCAAqC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3G,gBAAgB,8BAAU,OAAO,YAAY,uBAAuB;AAAA,EACpE,eAAe,8BAAU,QAAQ,8BAAU,MAAM,EAC9C,YAAY,0CAA0C,EACtD,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,qBAAqB,8BAAU,KAC5B;AAAA,IACC;AAAA,EACF,EACC,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,eAAe,8BAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;AAEO,MAAM,qBAAqB;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EAC3E,aAAa,8BAAU,UAAU;AAAA,IAC/B,8BAAU,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC;AAAA,IAC3E,8BAAU;AAAA,IACV,8BAAU;AAAA,EACZ,CAAC,EAAE,YAAY,4EAA4E;AAAA,EAC3F,UAAU,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,mBAAmB,8BAAU,KAAK,YAAY,oEAAoE;AAAA,EAClH,UAAU,8BAAU,KAAK,YAAY,sDAAsD;AAC7F;",
+  "sourcesContent": ["import type React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-utilities';\n\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { DSAccordionInternalsT } from './sharedTypes';\n\nexport declare namespace DSAccordionT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    allowMultipleOpen: boolean;\n    onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n    children: React.ReactElement<InternalItemProps>[];\n    isDSMobile: boolean;\n  }\n\n  export interface OptionalProps {\n    activeValue?: DSAccordionInternalsT.InternalActiveValue;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement<ItemProps>[];\n  }\n\n  export interface Props extends OptionalProps, Partial<Omit<DefaultProps, 'children'>>, RequiredProps {}\n\n  export interface ItemDefaultProps {\n    iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    title: string;\n    customActions: DSAccordionInternalsT.CustomActions[];\n    disabled: boolean;\n    xStyledPropsContent: XstyledProps;\n  }\n\n  export interface ItemOptionalProps {\n    secondaryTitle?: string;\n    renderCustomActions?: (props: {\n      allRefs: DSAccordionInternalsT.AllChildrenReferences;\n      actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n    }) => JSX.Element;\n    CustomActions?: React.ComponentType<{\n      allRefs: DSAccordionInternalsT.AllChildrenReferences;\n      actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n    }>;\n  }\n\n  export interface ItemRequiredProps {\n    children: React.ReactNode;\n    value: string | number;\n  }\n\n  export interface ItemProps extends ItemRequiredProps, ItemOptionalProps, Partial<ItemDefaultProps> {}\n\n  export interface InternalItemProps\n    extends ItemRequiredProps,\n      ItemOptionalProps,\n      Omit<ItemDefaultProps, 'disabled' | 'customActions' | 'iconClosed' | 'iconOpened'> {\n    dsIndex: number;\n    disabled: boolean;\n    customActions: DSAccordionInternalsT.CustomActions[];\n    iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n  }\n\n  export interface InternalProps\n    extends OptionalProps,\n      Partial<Omit<DefaultProps, 'children' | 'isDSMobile' | 'onChange'>> {\n    children: React.ReactElement<InternalItemProps>[];\n    isDSMobile: boolean;\n    onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n  }\n}\n\nexport const accordionItemPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n  title: PropTypes.string.description('Set a primary title.'),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Dimsum AccordionItem value, this value should be unique.',\n  ).isRequired,\n  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.').deprecated({ version: '3.x' }),\n  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.').deprecated({ version: '3.x' }),\n  secondaryTitle: PropTypes.string.description('Set a secondary title'),\n  xStyledPropsContent: PropTypes.object.description(\n    'This property is xStyledProps object to apply in the content wrapper',\n  ),\n  customActions: PropTypes.arrayOf(PropTypes.object)\n    .description('Set Dimsum AccordionItem custom actions.')\n    .deprecated({ version: '3.x' }),\n  renderCustomActions: PropTypes.func\n    .description(\n      'This property will render any JSX in the header controls area. You can access to all references and active values within the props. Rendered as a function which does not allow hook calls inside.',\n    )\n    .deprecated({ version: '4.x' }),\n  CustomActions: PropTypes.func.description(\n    'This property will render any JSX in the header controls area. You can access to all references and active values within the props.',\n  ),\n};\n\nexport const accordionPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Adds props to the container.'),\n  activeValue: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('Selected active value. This property makes the component a controlled one.'),\n  children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAAuE;AAsEhE,MAAM,yBAAyB;AAAA,EACpC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,8BAAU,KAAK,YAAY,+BAA+B,EAAE;AAAA,EACtE,OAAO,8BAAU,OAAO,YAAY,sBAAsB;AAAA,EAC1D,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF,EAAE;AAAA,EACF,YAAY,8BAAU,KAAK,YAAY,uCAAuC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC7G,YAAY,8BAAU,KAAK,YAAY,qCAAqC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3G,gBAAgB,8BAAU,OAAO,YAAY,uBAAuB;AAAA,EACpE,qBAAqB,8BAAU,OAAO;AAAA,IACpC;AAAA,EACF;AAAA,EACA,eAAe,8BAAU,QAAQ,8BAAU,MAAM,EAC9C,YAAY,0CAA0C,EACtD,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,qBAAqB,8BAAU,KAC5B;AAAA,IACC;AAAA,EACF,EACC,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,eAAe,8BAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;AAEO,MAAM,qBAAqB;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EAC3E,aAAa,8BAAU,UAAU;AAAA,IAC/B,8BAAU,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC;AAAA,IAC3E,8BAAU;AAAA,IACV,8BAAU;AAAA,EACZ,CAAC,EAAE,YAAY,4EAA4E;AAAA,EAC3F,UAAU,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,mBAAmB,8BAAU,KAAK,YAAY,oEAAoE;AAAA,EAClH,UAAU,8BAAU,KAAK,YAAY,sDAAsD;AAC7F;",
   "names": []
 }

package/dist/esm/defaultProps.js

@@ -22,7 +22,8 @@ const accordionItemDefaultProps = {
   iconOpened: DefaultIconOpen,
   title: "",
   customActions: [],
-  disabled: false
+  disabled: false,
+  xStyledPropsContent: {}
 };
 export {
   accordionItemDefaultProps,

package/dist/esm/defaultProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACMR;AANf,SAAgB,YAAY;AAC5B,SAAS,gBAAgB,eAAe,cAAc,mBAAmB;AAIzE,MAAM,oBAAoB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACnD,aAAa,oBAAC,gBAAa,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,kBAAe,OAAM,QAAO;AAC7G;AAEA,MAAM,kBAAkB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACjD,aAAa,oBAAC,eAAY,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,iBAAc,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;AACZ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACMR;AANf,SAAgB,YAAY;AAC5B,SAAS,gBAAgB,eAAe,cAAc,mBAAmB;AAIzE,MAAM,oBAAoB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACnD,aAAa,oBAAC,gBAAa,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,kBAAe,OAAM,QAAO;AAC7G;AAEA,MAAM,kBAAkB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACjD,aAAa,oBAAC,eAAY,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,iBAAc,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/esm/parts/accordionItem/DSAccordionItem.js

@@ -44,10 +44,12 @@ const DSAccordionItem = (props) => {
     dsIndex,
     renderCustomActions,
     CustomActions,
+    xStyledPropsContent,
     ...rest
   } = propsWithDefaults;
   const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });
   const xstyledAttrs = useGetXstyledProps(rest);
+  const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);
   const {
     allChildrenReferences,
     actualActiveValue,
@@ -196,6 +198,7 @@ const DSAccordionItem = (props) => {
         role: "region",
         isDSMobile,
         id: `ds-accordion-content-${value}`,
+        ...xstyledContentAttrs,
         children
       }
     )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/DSAccordionItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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    ...rest\n  } = propsWithDefaults;\n\n  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n\n  const xstyledAttrs = useGetXstyledProps(rest);\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        >\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -61,6 +61,7 @@ const StyledItemContent = styled("div", {
   slot: DSAccordionSlots.ITEM.CONTENT.CONTAINER
 })`
   padding: ${({ isDSMobile }) => isDSMobile ? `3px 16px 24px 16px` : "16px 20px"};
+  ${xStyledCommonProps};
 `;
 const StyledItemAddon = styled("div", {
   name: DSAccordionName,

package/dist/esm/parts/accordionItem/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related';\ninterface StyledItemHeaderPropsT {\n  withCustomActions: boolean;\n  withSecondaryTitle?: string;\n  isDSMobile: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n  withSecondaryTitle?: string;\n  isDSMobile: boolean;\n  selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n  disabled: boolean;\n  isDSMobile: boolean;\n  selected: boolean;\n  withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n  isDSMobile: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n  disabled: boolean;\n  selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n  disabled: boolean;\n  isDSMobile: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n  disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n  isDSMobile: boolean;\n}\n\ninterface PaddingSetterT {\n  isDSMobile: boolean;\n  withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n  if (isDSMobile)\n    return css`\n      padding: 13px 0;\n    `;\n  if (withSecondaryTitle)\n    return css`\n      padding: 6px 0;\n    `;\n  return css`\n    padding: 7px 0;\n  `;\n};\n\nexport const StyledItemContainer = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.CONTAINER,\n})`\n  display: grid;\n  grid-template-rows: auto auto;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  align-items: center;\n  min-width: 240px;\n  grid-template-columns: 100%;\n  ${xStyledCommonProps};\n`;\n\nexport const StyledItemHeader = styled('button', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderPropsT>`\n  display: flex;\n  min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n    isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n  width: 100%;\n  align-items: center;\n  border: none;\n  outline: none;\n  background: none;\n  &:hover {\n    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  }\n  padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n  ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledItemContent = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.CONTENT.CONTAINER,\n})<StyledItemContentPropsT>`\n  padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n`;\n\nexport const StyledItemAddon = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.ADDON,\n})<StyledItemAddonPropsT>`\n  height: 100%;\n  display: grid;\n  place-items: center;\n\n  & .em-ds-icon svg {\n    fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.brand[800])};\n  }\n`;\n\nexport const StyledItemTitles = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n  display: grid;\n  grid-gap: ${({ theme }) => theme.space.xxxs};\n  ${paddingSetter}\n  grid-template-columns: 100%;\n  width: 100%;\n  align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n  margin: 0;\n  font-size: 16px;\n  line-height: 1.125;\n  text-align: left;\n  text-overflow: ellipsis;\n  min-height: ${({ theme }) => theme.space.xs};\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n  font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n  ${({ selected }) =>\n    selected\n      ? `word-break: break-word;`\n      : `\n   overflow: hidden;\n   white-space: nowrap;\n   `};\n  width: 100%;\n  display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n  margin: 0;\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  line-height: 1.273;\n  text-align: left;\n  min-height: 12px;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n  text-overflow: ellipsis;\n  ${({ selected }) =>\n    selected\n      ? `word-break: break-word;`\n      : `\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\n  display: block;`}\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n  display: grid;\n  grid-auto-flow: column;\n  place-items: center;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : '0 20px 0 16px')};\n  justify-content: flex-end;\n  height: 28px;\n`;\n\nexport const StyledItemHeaderContainer = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderContainerPropsT>`\n  display: grid;\n  grid-template-columns: auto max-content;\n  place-items: center;\n  position: relative;\n  border-radius: 2px;\n  &:hover {\n    ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n  }\n`;\n\nexport const StyledTooltipContent = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.TOOLTIP,\n})`\n  padding: 8px;\n  width: 250px;\n  background: white;\n  display: grid;\n  gap: ${({ theme }) => theme.space.xxs};\n\n  p {\n    margin: 0;\n  }\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related';\ninterface StyledItemHeaderPropsT {\n  withCustomActions: boolean;\n  withSecondaryTitle?: string;\n  isDSMobile: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n  withSecondaryTitle?: string;\n  isDSMobile: boolean;\n  selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n  disabled: boolean;\n  isDSMobile: boolean;\n  selected: boolean;\n  withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n  isDSMobile: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n  disabled: boolean;\n  selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n  disabled: boolean;\n  isDSMobile: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n  disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n  isDSMobile: boolean;\n}\n\ninterface PaddingSetterT {\n  isDSMobile: boolean;\n  withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n  if (isDSMobile)\n    return css`\n      padding: 13px 0;\n    `;\n  if (withSecondaryTitle)\n    return css`\n      padding: 6px 0;\n    `;\n  return css`\n    padding: 7px 0;\n  `;\n};\n\nexport const StyledItemContainer = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.CONTAINER,\n})`\n  display: grid;\n  grid-template-rows: auto auto;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  align-items: center;\n  min-width: 240px;\n  grid-template-columns: 100%;\n  ${xStyledCommonProps};\n`;\n\nexport const StyledItemHeader = styled('button', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderPropsT>`\n  display: flex;\n  min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n    isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n  width: 100%;\n  align-items: center;\n  border: none;\n  outline: none;\n  background: none;\n  &:hover {\n    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  }\n  padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n  ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledItemContent = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.CONTENT.CONTAINER,\n})<StyledItemContentPropsT>`\n  padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n  ${xStyledCommonProps};\n`;\n\nexport const StyledItemAddon = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.ADDON,\n})<StyledItemAddonPropsT>`\n  height: 100%;\n  display: grid;\n  place-items: center;\n\n  & .em-ds-icon svg {\n    fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.brand[800])};\n  }\n`;\n\nexport const StyledItemTitles = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n  display: grid;\n  grid-gap: ${({ theme }) => theme.space.xxxs};\n  ${paddingSetter}\n  grid-template-columns: 100%;\n  width: 100%;\n  align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n  margin: 0;\n  font-size: 16px;\n  line-height: 1.125;\n  text-align: left;\n  text-overflow: ellipsis;\n  min-height: ${({ theme }) => theme.space.xs};\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n  font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n  ${({ selected }) =>\n    selected\n      ? `word-break: break-word;`\n      : `\n   overflow: hidden;\n   white-space: nowrap;\n   `};\n  width: 100%;\n  display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n  margin: 0;\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  line-height: 1.273;\n  text-align: left;\n  min-height: 12px;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n  text-overflow: ellipsis;\n  ${({ selected }) =>\n    selected\n      ? `word-break: break-word;`\n      : `\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\n  display: block;`}\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n  display: grid;\n  grid-auto-flow: column;\n  place-items: center;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : '0 20px 0 16px')};\n  justify-content: flex-end;\n  height: 28px;\n`;\n\nexport const StyledItemHeaderContainer = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderContainerPropsT>`\n  display: grid;\n  grid-template-columns: auto max-content;\n  place-items: center;\n  position: relative;\n  border-radius: 2px;\n  &:hover {\n    ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n  }\n`;\n\nexport const StyledTooltipContent = styled('div', {\n  name: DSAccordionName,\n  slot: DSAccordionSlots.ITEM.HEADER.TOOLTIP,\n})`\n  padding: 8px;\n  width: 250px;\n  background: white;\n  display: grid;\n  gap: ${({ theme }) => theme.space.xxs};\n\n  p {\n    margin: 0;\n  }\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -11,6 +11,9 @@ const accordionItemPropTypes = {
   iconClosed: PropTypes.node.description("Custom Dimsum Icon when it is closed.").deprecated({ version: "3.x" }),
   iconOpened: PropTypes.node.description("Custom Dimsum Icon when it is open.").deprecated({ version: "3.x" }),
   secondaryTitle: PropTypes.string.description("Set a secondary title"),
+  xStyledPropsContent: PropTypes.object.description(
+    "This property is xStyledProps object to apply in the content wrapper"
+  ),
   customActions: PropTypes.arrayOf(PropTypes.object).description("Set Dimsum AccordionItem custom actions.").deprecated({ version: "3.x" }),
   renderCustomActions: PropTypes.func.description(
     "This property will render any JSX in the header controls area. You can access to all references and active values within the props. Rendered as a function which does not allow hook calls inside."

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { DSAccordionInternalsT } from './sharedTypes';\n\nexport declare namespace DSAccordionT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    allowMultipleOpen: boolean;\n    onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n    children: React.ReactElement<InternalItemProps>[];\n    isDSMobile: boolean;\n  }\n\n  export interface OptionalProps {\n    activeValue?: DSAccordionInternalsT.InternalActiveValue;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement<ItemProps>[];\n  }\n\n  export interface Props extends OptionalProps, Partial<Omit<DefaultProps, 'children'>>, RequiredProps {}\n\n  export interface ItemDefaultProps {\n    iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    title: string;\n    customActions: DSAccordionInternalsT.CustomActions[];\n    disabled: boolean;\n  }\n\n  export interface ItemOptionalProps {\n    secondaryTitle?: string;\n    renderCustomActions?: (props: {\n      allRefs: DSAccordionInternalsT.AllChildrenReferences;\n      actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n    }) => JSX.Element;\n    CustomActions?: React.ComponentType<{\n      allRefs: DSAccordionInternalsT.AllChildrenReferences;\n      actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n    }>;\n  }\n\n  export interface ItemRequiredProps {\n    children: React.ReactNode;\n    value: string | number;\n  }\n\n  export interface ItemProps extends ItemRequiredProps, ItemOptionalProps, Partial<ItemDefaultProps> {}\n\n  export interface InternalItemProps\n    extends ItemRequiredProps,\n      ItemOptionalProps,\n      Omit<ItemDefaultProps, 'disabled' | 'customActions' | 'iconClosed' | 'iconOpened'> {\n    dsIndex: number;\n    disabled: boolean;\n    customActions: DSAccordionInternalsT.CustomActions[];\n    iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n  }\n\n  export interface InternalProps\n    extends OptionalProps,\n      Partial<Omit<DefaultProps, 'children' | 'isDSMobile' | 'onChange'>> {\n    children: React.ReactElement<InternalItemProps>[];\n    isDSMobile: boolean;\n    onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n  }\n}\n\nexport const accordionItemPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n  title: PropTypes.string.description('Set a primary title.'),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Dimsum AccordionItem value, this value should be unique.',\n  ).isRequired,\n  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.').deprecated({ version: '3.x' }),\n  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.').deprecated({ version: '3.x' }),\n  secondaryTitle: PropTypes.string.description('Set a secondary title'),\n  customActions: PropTypes.arrayOf(PropTypes.object)\n    .description('Set Dimsum AccordionItem custom actions.')\n    .deprecated({ version: '3.x' }),\n  renderCustomActions: PropTypes.func\n    .description(\n      'This property will render any JSX in the header controls area. You can access to all references and active values within the props. Rendered as a function which does not allow hook calls inside.',\n    )\n    .deprecated({ version: '4.x' }),\n  CustomActions: PropTypes.func.description(\n    'This property will render any JSX in the header controls area. You can access to all references and active values within the props.',\n  ),\n};\n\nexport const accordionPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Adds props to the container.'),\n  activeValue: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('Selected active value. This property makes the component a controlled one.'),\n  children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAqEhE,MAAM,yBAAyB;AAAA,EACpC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE;AAAA,EACtE,OAAO,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAC1D,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,KAAK,YAAY,uCAAuC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC7G,YAAY,UAAU,KAAK,YAAY,qCAAqC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3G,gBAAgB,UAAU,OAAO,YAAY,uBAAuB;AAAA,EACpE,eAAe,UAAU,QAAQ,UAAU,MAAM,EAC9C,YAAY,0CAA0C,EACtD,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,qBAAqB,UAAU,KAC5B;AAAA,IACC;AAAA,EACF,EACC,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,eAAe,UAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;AAEO,MAAM,qBAAqB;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,8BAA8B;AAAA,EAC3E,aAAa,UAAU,UAAU;AAAA,IAC/B,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AAAA,IAC3E,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,CAAC,EAAE,YAAY,4EAA4E;AAAA,EAC3F,UAAU,UAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,mBAAmB,UAAU,KAAK,YAAY,oEAAoE;AAAA,EAClH,UAAU,UAAU,KAAK,YAAY,sDAAsD;AAC7F;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-utilities';\n\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { DSAccordionInternalsT } from './sharedTypes';\n\nexport declare namespace DSAccordionT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    allowMultipleOpen: boolean;\n    onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n    children: React.ReactElement<InternalItemProps>[];\n    isDSMobile: boolean;\n  }\n\n  export interface OptionalProps {\n    activeValue?: DSAccordionInternalsT.InternalActiveValue;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement<ItemProps>[];\n  }\n\n  export interface Props extends OptionalProps, Partial<Omit<DefaultProps, 'children'>>, RequiredProps {}\n\n  export interface ItemDefaultProps {\n    iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    title: string;\n    customActions: DSAccordionInternalsT.CustomActions[];\n    disabled: boolean;\n    xStyledPropsContent: XstyledProps;\n  }\n\n  export interface ItemOptionalProps {\n    secondaryTitle?: string;\n    renderCustomActions?: (props: {\n      allRefs: DSAccordionInternalsT.AllChildrenReferences;\n      actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n    }) => JSX.Element;\n    CustomActions?: React.ComponentType<{\n      allRefs: DSAccordionInternalsT.AllChildrenReferences;\n      actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n    }>;\n  }\n\n  export interface ItemRequiredProps {\n    children: React.ReactNode;\n    value: string | number;\n  }\n\n  export interface ItemProps extends ItemRequiredProps, ItemOptionalProps, Partial<ItemDefaultProps> {}\n\n  export interface InternalItemProps\n    extends ItemRequiredProps,\n      ItemOptionalProps,\n      Omit<ItemDefaultProps, 'disabled' | 'customActions' | 'iconClosed' | 'iconOpened'> {\n    dsIndex: number;\n    disabled: boolean;\n    customActions: DSAccordionInternalsT.CustomActions[];\n    iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n    iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n  }\n\n  export interface InternalProps\n    extends OptionalProps,\n      Partial<Omit<DefaultProps, 'children' | 'isDSMobile' | 'onChange'>> {\n    children: React.ReactElement<InternalItemProps>[];\n    isDSMobile: boolean;\n    onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n  }\n}\n\nexport const accordionItemPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n  title: PropTypes.string.description('Set a primary title.'),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Dimsum AccordionItem value, this value should be unique.',\n  ).isRequired,\n  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.').deprecated({ version: '3.x' }),\n  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.').deprecated({ version: '3.x' }),\n  secondaryTitle: PropTypes.string.description('Set a secondary title'),\n  xStyledPropsContent: PropTypes.object.description(\n    'This property is xStyledProps object to apply in the content wrapper',\n  ),\n  customActions: PropTypes.arrayOf(PropTypes.object)\n    .description('Set Dimsum AccordionItem custom actions.')\n    .deprecated({ version: '3.x' }),\n  renderCustomActions: PropTypes.func\n    .description(\n      'This property will render any JSX in the header controls area. You can access to all references and active values within the props. Rendered as a function which does not allow hook calls inside.',\n    )\n    .deprecated({ version: '4.x' }),\n  CustomActions: PropTypes.func.description(\n    'This property will render any JSX in the header controls area. You can access to all references and active values within the props.',\n  ),\n};\n\nexport const accordionPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('Adds props to the container.'),\n  activeValue: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('Selected active value. This property makes the component a controlled one.'),\n  children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AAsEhE,MAAM,yBAAyB;AAAA,EACpC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE;AAAA,EACtE,OAAO,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAC1D,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,KAAK,YAAY,uCAAuC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC7G,YAAY,UAAU,KAAK,YAAY,qCAAqC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3G,gBAAgB,UAAU,OAAO,YAAY,uBAAuB;AAAA,EACpE,qBAAqB,UAAU,OAAO;AAAA,IACpC;AAAA,EACF;AAAA,EACA,eAAe,UAAU,QAAQ,UAAU,MAAM,EAC9C,YAAY,0CAA0C,EACtD,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,qBAAqB,UAAU,KAC5B;AAAA,IACC;AAAA,EACF,EACC,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,eAAe,UAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;AAEO,MAAM,qBAAqB;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,8BAA8B;AAAA,EAC3E,aAAa,UAAU,UAAU;AAAA,IAC/B,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AAAA,IAC3E,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,CAAC,EAAE,YAAY,4EAA4E;AAAA,EAC3F,UAAU,UAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,mBAAmB,UAAU,KAAK,YAAY,oEAAoE;AAAA,EAClH,UAAU,UAAU,KAAK,YAAY,sDAAsD;AAC7F;",
   "names": []
 }

package/dist/types/react-desc-prop-types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { XstyledProps } from '@elliemae/ds-utilities';
 import type { DSAccordionInternalsT } from './sharedTypes';
 export declare namespace DSAccordionT {
     interface DefaultProps {
@@ -22,6 +23,7 @@ export declare namespace DSAccordionT {
         title: string;
         customActions: DSAccordionInternalsT.CustomActions[];
         disabled: boolean;
+        xStyledPropsContent: XstyledProps;
     }
     interface ItemOptionalProps {
         secondaryTitle?: string;
@@ -60,6 +62,7 @@ export declare const accordionItemPropTypes: {
     iconClosed: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     iconOpened: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     secondaryTitle: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    xStyledPropsContent: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     customActions: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     renderCustomActions: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     CustomActions: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
@@ -417,6 +420,8 @@ export declare const accordionItemPropTypes: {
     onRateChangeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onReset: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onResetCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onResize: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onResizeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onScroll: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onScrollCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onSeeked: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
@@ -861,6 +866,8 @@ export declare const accordionPropTypes: {
     onRateChangeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onReset: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onResetCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onResize: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onResizeCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onScroll: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onScrollCapture: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
     onSeeked: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-accordion",
-  "version": "3.14.0-rc.0",
+  "version": "3.14.0-rc.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Accordion",
   "files": [
@@ -83,11 +83,11 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.14.0-rc.0",
-    "@elliemae/ds-icons": "3.14.0-rc.0",
-    "@elliemae/ds-popperjs": "3.14.0-rc.0",
-    "@elliemae/ds-system": "3.14.0-rc.0",
-    "@elliemae/ds-utilities": "3.14.0-rc.0"
+    "@elliemae/ds-popperjs": "3.14.0-rc.2",
+    "@elliemae/ds-button": "3.14.0-rc.2",
+    "@elliemae/ds-icons": "3.14.0-rc.2",
+    "@elliemae/ds-system": "3.14.0-rc.2",
+    "@elliemae/ds-utilities": "3.14.0-rc.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "~5.16.4",

package/dist/cjs/propTypes.js

@@ -1,58 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var propTypes_exports = {};
-__export(propTypes_exports, {
-  accordionItemPropTypes: () => accordionItemPropTypes,
-  accordionPropTypes: () => accordionPropTypes
-});
-module.exports = __toCommonJS(propTypes_exports);
-var React = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
-const accordionItemPropTypes = {
-  children: import_ds_utilities.PropTypes.node.description("Dimsum AccordionItem content.").isRequired,
-  title: import_ds_utilities.PropTypes.string.description("Set a primary title."),
-  value: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description(
-    "Dimsum AccordionItem value, this value should be unique."
-  ).isRequired,
-  iconClosed: import_ds_utilities.PropTypes.node.description("Custom Dimsum Icon when it is closed."),
-  iconOpened: import_ds_utilities.PropTypes.node.description("Custom Dimsum Icon when it is open."),
-  secondaryTitle: import_ds_utilities.PropTypes.string.description("Set a secondary title"),
-  customActions: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.object).description("Set Dimsum AccordionItem custom actions.").deprecated({ version: "3.x" }),
-  renderCustomActions: import_ds_utilities.PropTypes.func.description(
-    "This property will render any JSX in the custom actions area. You can access to all references and active values within the props."
-  ).deprecated({ version: "3.x" })
-};
-const accordionPropTypes = {
-  containerProps: import_ds_utilities.PropTypes.object.description("Adds props to the container."),
-  activeValue: import_ds_utilities.PropTypes.oneOfType([
-    import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number])),
-    import_ds_utilities.PropTypes.string,
-    import_ds_utilities.PropTypes.number
-  ]).description("Selected active value. This property makes the component a controlled one."),
-  children: import_ds_utilities.PropTypes.node.description("Dimsum AccordionItems to show."),
-  allowMultipleOpen: import_ds_utilities.PropTypes.bool.description("Allows multiple Dimsum AccordionItems to be open at the same time."),
-  onChange: import_ds_utilities.PropTypes.func.description("Callback function once the Dimsum Accordion changes.")
-};
-//# sourceMappingURL=propTypes.js.map

package/dist/cjs/propTypes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/propTypes.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const accordionItemPropTypes = {\n  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n  title: PropTypes.string.description('Set a primary title.'),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Dimsum AccordionItem value, this value should be unique.',\n  ).isRequired,\n  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.'),\n  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.'),\n  secondaryTitle: PropTypes.string.description('Set a secondary title'),\n  customActions: PropTypes.arrayOf(PropTypes.object)\n    .description('Set Dimsum AccordionItem custom actions.')\n    .deprecated({ version: '3.x' }),\n  renderCustomActions: PropTypes.func\n    .description(\n      'This property will render any JSX in the custom actions area. You can access to all references and active values within the props.',\n    )\n    .deprecated({ version: '3.x' }),\n};\n\nexport const accordionPropTypes = {\n  containerProps: PropTypes.object.description('Adds props to the container.'),\n  activeValue: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('Selected active value. This property makes the component a controlled one.'),\n  children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAEnB,MAAM,yBAAyB;AAAA,EACpC,UAAU,8BAAU,KAAK,YAAY,+BAA+B,EAAE;AAAA,EACtE,OAAO,8BAAU,OAAO,YAAY,sBAAsB;AAAA,EAC1D,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF,EAAE;AAAA,EACF,YAAY,8BAAU,KAAK,YAAY,uCAAuC;AAAA,EAC9E,YAAY,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,gBAAgB,8BAAU,OAAO,YAAY,uBAAuB;AAAA,EACpE,eAAe,8BAAU,QAAQ,8BAAU,MAAM,EAC9C,YAAY,0CAA0C,EACtD,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,qBAAqB,8BAAU,KAC5B;AAAA,IACC;AAAA,EACF,EACC,WAAW,EAAE,SAAS,MAAM,CAAC;AAClC;AAEO,MAAM,qBAAqB;AAAA,EAChC,gBAAgB,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EAC3E,aAAa,8BAAU,UAAU;AAAA,IAC/B,8BAAU,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,CAAC;AAAA,IAC3E,8BAAU;AAAA,IACV,8BAAU;AAAA,EACZ,CAAC,EAAE,YAAY,4EAA4E;AAAA,EAC3F,UAAU,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,mBAAmB,8BAAU,KAAK,YAAY,oEAAoE;AAAA,EAClH,UAAU,8BAAU,KAAK,YAAY,sDAAsD;AAC7F;",
-  "names": []
-}

package/dist/esm/propTypes.js

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { PropTypes } from "@elliemae/ds-utilities";
-const accordionItemPropTypes = {
-  children: PropTypes.node.description("Dimsum AccordionItem content.").isRequired,
-  title: PropTypes.string.description("Set a primary title."),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(
-    "Dimsum AccordionItem value, this value should be unique."
-  ).isRequired,
-  iconClosed: PropTypes.node.description("Custom Dimsum Icon when it is closed."),
-  iconOpened: PropTypes.node.description("Custom Dimsum Icon when it is open."),
-  secondaryTitle: PropTypes.string.description("Set a secondary title"),
-  customActions: PropTypes.arrayOf(PropTypes.object).description("Set Dimsum AccordionItem custom actions.").deprecated({ version: "3.x" }),
-  renderCustomActions: PropTypes.func.description(
-    "This property will render any JSX in the custom actions area. You can access to all references and active values within the props."
-  ).deprecated({ version: "3.x" })
-};
-const accordionPropTypes = {
-  containerProps: PropTypes.object.description("Adds props to the container."),
-  activeValue: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-    PropTypes.string,
-    PropTypes.number
-  ]).description("Selected active value. This property makes the component a controlled one."),
-  children: PropTypes.node.description("Dimsum AccordionItems to show."),
-  allowMultipleOpen: PropTypes.bool.description("Allows multiple Dimsum AccordionItems to be open at the same time."),
-  onChange: PropTypes.func.description("Callback function once the Dimsum Accordion changes.")
-};
-export {
-  accordionItemPropTypes,
-  accordionPropTypes
-};
-//# sourceMappingURL=propTypes.js.map

package/dist/esm/propTypes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const accordionItemPropTypes = {\n  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n  title: PropTypes.string.description('Set a primary title.'),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Dimsum AccordionItem value, this value should be unique.',\n  ).isRequired,\n  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.'),\n  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.'),\n  secondaryTitle: PropTypes.string.description('Set a secondary title'),\n  customActions: PropTypes.arrayOf(PropTypes.object)\n    .description('Set Dimsum AccordionItem custom actions.')\n    .deprecated({ version: '3.x' }),\n  renderCustomActions: PropTypes.func\n    .description(\n      'This property will render any JSX in the custom actions area. You can access to all references and active values within the props.',\n    )\n    .deprecated({ version: '3.x' }),\n};\n\nexport const accordionPropTypes = {\n  containerProps: PropTypes.object.description('Adds props to the container.'),\n  activeValue: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('Selected active value. This property makes the component a controlled one.'),\n  children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAEnB,MAAM,yBAAyB;AAAA,EACpC,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE;AAAA,EACtE,OAAO,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAC1D,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC9E,YAAY,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,gBAAgB,UAAU,OAAO,YAAY,uBAAuB;AAAA,EACpE,eAAe,UAAU,QAAQ,UAAU,MAAM,EAC9C,YAAY,0CAA0C,EACtD,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,qBAAqB,UAAU,KAC5B;AAAA,IACC;AAAA,EACF,EACC,WAAW,EAAE,SAAS,MAAM,CAAC;AAClC;AAEO,MAAM,qBAAqB;AAAA,EAChC,gBAAgB,UAAU,OAAO,YAAY,8BAA8B;AAAA,EAC3E,aAAa,UAAU,UAAU;AAAA,IAC/B,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AAAA,IAC3E,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,CAAC,EAAE,YAAY,4EAA4E;AAAA,EAC3F,UAAU,UAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,mBAAmB,UAAU,KAAK,YAAY,oEAAoE;AAAA,EAClH,UAAU,UAAU,KAAK,YAAY,sDAAsD;AAC7F;",
-  "names": []
-}

package/dist/types/propTypes.d.ts

@@ -1,17 +0,0 @@
-export declare const accordionItemPropTypes: {
-    children: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    title: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    value: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    iconClosed: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    iconOpened: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    secondaryTitle: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    customActions: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    renderCustomActions: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-};
-export declare const accordionPropTypes: {
-    containerProps: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    activeValue: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    children: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    allowMultipleOpen: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    onChange: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-};