@redsift/design-system 11.6.0-muiv5-alpha.9 → 11.6.0-muiv5-alpha.11

package/packages/design-system/src/components/checkbox-group/_internal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/checkbox-group/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, Theme } from '../../types';\n\n/**\n * Context props.\n */\nexport type CheckboxGroupState = {\n  /** Adds a value to the set of selected values. */\n  addValue(value: string): void;\n  /** Whether the checkbox group is disabled or not. */\n  readonly isDisabled: boolean;\n  /** Whether the checkbox group is read only or not. */\n  readonly isReadOnly: boolean;\n  /** Removes a value from the set of selected values. */\n  removeValue(value: string): void;\n  /** Sets the selected values. */\n  setValue(value: string[]): void;\n  /** Current selected values. */\n  readonly value: readonly string[];\n};\n\n/**\n * Component orientation.\n */\nexport const CheckboxGroupOrientation = {\n  vertical: 'vertical',\n  horizontal: 'horizontal',\n} as const;\nexport type CheckboxGroupOrientation = ValueOf<typeof CheckboxGroupOrientation>;\n\n/**\n * Component props.\n */\nexport interface CheckboxGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /**\n   * Default selected values.\n   * Used for uncontrolled version.\n   */\n  defaultValues?: string[];\n  /** Description of the checkbox group. */\n  description?: string;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label of the checkbox group. */\n  label?: string;\n  /** Method to handle component change. */\n  onChange?(values: string[]): void;\n  /** Method to handle component change. */\n  orientation?: CheckboxGroupOrientation;\n  /** Theme. */\n  theme?: Theme;\n  /**\n   * Currently selected values.\n   * Used for controlled version.\n   */\n  value?: string[];\n}\n\nexport type StyledCheckboxGroupProps = Omit<\n  CheckboxGroupProps,\n  'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'isRequired'\n> & {\n  $isDisabled: CheckboxGroupProps['isDisabled'];\n  $isInvalid: CheckboxGroupProps['isInvalid'];\n  $isReadOnly: CheckboxGroupProps['isReadOnly'];\n  $orientation: CheckboxGroupProps['orientation'];\n  $theme: CheckboxGroupProps['theme'];\n};\n"],"names":["CheckboxGroupOrientation","vertical","horizontal"],"mappings":"AAGA;AACA;AACA;;AAgBA;AACA;AACA;AACO,MAAMA,wBAAwB,GAAG;AACtCC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,UAAU,EAAE,YAAA;AACd,EAAU;;AAGV;AACA;AACA;;;;"}

package/packages/design-system/src/components/conditional-wrapper/_internal/ConditionalWrapper.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+
+const ConditionalWrapper = _ref => {
+  let {
+    children,
+    condition,
+    wrapper
+  } = _ref;
+  return condition ? wrapper(children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+};
+
+export { ConditionalWrapper };
+//# sourceMappingURL=ConditionalWrapper.js.map

package/packages/design-system/src/components/conditional-wrapper/_internal/ConditionalWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalWrapper.js","sources":["../../../../../../../src/components/conditional-wrapper/ConditionalWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { ConditionalWrapperProps } from './types';\n\nexport const ConditionalWrapper: React.FC<ConditionalWrapperProps> = ({\n  children,\n  condition,\n  wrapper,\n}) => (condition ? wrapper(children) : <>{children}</>);\n"],"names":["ConditionalWrapper","_ref","children","condition","wrapper","React","createElement","Fragment"],"mappings":";;AAGO,MAAMA,kBAAqD,GAAGC,IAAA,IAAA;EAAA,IAAC;IACpEC,QAAQ;IACRC,SAAS;AACTC,IAAAA,OAAAA;AACF,GAAC,GAAAH,IAAA,CAAA;AAAA,EAAA,OAAME,SAAS,GAAGC,OAAO,CAACF,QAAQ,CAAC,gBAAGG,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAE,QAAA,EAAA,IAAA,EAAGL,QAAW,CAAC,CAAA;AAAA;;;;"}

package/packages/design-system/src/components/conditional-wrapper/_internal/conditional-wrapper.js

@@ -0,0 +1,2 @@
+export { ConditionalWrapper } from './ConditionalWrapper.js';
+//# sourceMappingURL=conditional-wrapper.js.map

package/packages/design-system/src/components/detailed-card/_internal/DetailedCard.js

@@ -0,0 +1,170 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import intlMessages from '../intl/index.js';
+import { mdiPageLast, mdiKeyboardCaps } from '@redsift/icons';
+import { StyledDetailedCard } from './styles.js';
+import { DetailedCardHeader } from '../../detailed-card-header/_internal/DetailedCardHeader.js';
+import { DetailedCardSection } from '../../detailed-card-section/_internal/DetailedCardSection.js';
+import { DetailedCardSectionItem } from '../../detailed-card-section-item/_internal/DetailedCardSectionItem.js';
+import { useMessageFormatter } from '../../../react-aria/react-aria/i18n/_internal/useMessageFormatter.js';
+import { Tooltip } from '../../../../../popovers/src/components/tooltip/_internal/Tooltip.js';
+import { DetailedCardCollapsibleSectionItems } from '../../detailed-card-collapsible-section-items/_internal/DetailedCardCollapsibleSectionItems.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { partitionComponents } from '../../../utils/_internal/partitionComponents.js';
+import { isComponent } from '../../../utils/_internal/isComponent.js';
+import { ThemeProvider } from '../../theme/_internal/context.js';
+import { Skeleton } from '../../skeleton/_internal/Skeleton2.js';
+import { Flexbox } from '../../flexbox/_internal/Flexbox2.js';
+import { Shield } from '../../shield/_internal/Shield2.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+import { IconButton } from '../../icon-button/_internal/IconButton.js';
+
+const _excluded = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield", "theme", "width"];
+const COMPONENT_NAME = 'DetailedCard';
+const CLASSNAME = 'redsift-detailed-card';
+const hasMultipleCollapsibleChildren = children => {
+  const collapsibleChildren = [];
+  const childrenArray = React__default.Children.toArray(children);
+  for (const child of childrenArray) {
+    if (isComponent(DetailedCardSection)(child)) {
+      let hasCollapsibleItems = Boolean(child.isCollapsible);
+      React__default.Children.forEach(child.props.children, sectionChild => {
+        if (isComponent(DetailedCardCollapsibleSectionItems)(sectionChild)) {
+          hasCollapsibleItems = true;
+        }
+      });
+      if (hasCollapsibleItems) {
+        collapsibleChildren.push(child);
+      }
+    }
+  }
+  return collapsibleChildren.length > 1;
+};
+
+/**
+ * The DetailedCard component.
+ */
+const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      areAllCollapsed: propsAreAllCollapsed,
+      bannerVariant,
+      children,
+      className,
+      color,
+      defaultAllCollapsed,
+      icon,
+      isCollapsible: propsIsCollapsible = true,
+      isLoading,
+      onCollapseAll,
+      shield,
+      theme: propsTheme,
+      width = '400px'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const format = useMessageFormatter(intlMessages);
+  const isCollapsible = propsIsCollapsible && hasMultipleCollapsibleChildren(children);
+  const [allCollapsed, setAllCollapsed] = useState({
+    state: propsAreAllCollapsed !== null && propsAreAllCollapsed !== void 0 ? propsAreAllCollapsed : defaultAllCollapsed
+  });
+  useEffect(() => {
+    setAllCollapsed({
+      state: propsAreAllCollapsed !== null && propsAreAllCollapsed !== void 0 ? propsAreAllCollapsed : defaultAllCollapsed
+    });
+  }, [propsAreAllCollapsed, defaultAllCollapsed]);
+  const handleCollapse = useCallback(allCollapsed => {
+    if (onCollapseAll) {
+      onCollapseAll(allCollapsed);
+    }
+    if (propsAreAllCollapsed === undefined || propsAreAllCollapsed === null) {
+      setAllCollapsed({
+        state: allCollapsed
+      });
+    }
+  }, [onCollapseAll]);
+  const [[header], content] = partitionComponents(React__default.Children.toArray(children), [isComponent('DetailedCardHeader')]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledDetailedCard, _extends({
+    width: width
+  }, forwardedProps, {
+    className: classNames(BaseDetailedCard.className, className),
+    ref: ref,
+    $color: color,
+    $theme: theme
+  }), color ? isLoading ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    theme: theme,
+    height: bannerVariant === 'condensed' ? '8px' : '80px',
+    width: "calc(100% + 32px)",
+    margin: "-16px -16px 16px -16px"
+  }) : /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${BaseDetailedCard.className}__banner`,
+    alignItems: "center",
+    height: bannerVariant === 'condensed' ? '8px' : '80px',
+    justifyContent: "center",
+    margin: "-16px -16px 16px -16px",
+    width: "calc(100% + 32px)"
+  }, bannerVariant === 'condensed' ? null : shield ? /*#__PURE__*/React__default.createElement(Shield, {
+    variant: shield,
+    isOutlined: true,
+    isReversed: true,
+    svgProps: {
+      width: '40px',
+      height: '40px'
+    },
+    style: {
+      width: '40px',
+      height: '40px'
+    }
+  }) : icon ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: icon,
+    color: "white",
+    size: "xlarge"
+  }) : null) : null, header && isComponent('DetailedCardHeader')(header) ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${BaseDetailedCard.className}__header`
+  }, header) : null, isCollapsible ? /*#__PURE__*/React__default.createElement(Flexbox, {
+    justifyContent: "flex-end",
+    className: `${BaseDetailedCard.className}__collapse-buttons`
+  }, /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": format('collapse-all'),
+    "aria-describedby": undefined,
+    icon: mdiPageLast,
+    onClick: () => handleCollapse(true),
+    style: {
+      transform: 'rotate(-90deg)'
+    },
+    color: "grey"
+  })), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, format('collapse-all'))), /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": format('expand-all'),
+    "aria-describedby": undefined,
+    icon: mdiKeyboardCaps,
+    onClick: () => handleCollapse(false),
+    style: {
+      transform: 'rotate(180deg)'
+    },
+    color: "grey"
+  })), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, format('expand-all')))) : null, React__default.Children.map(content, child => {
+    if (isComponent(DetailedCardSection)(child)) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        theme,
+        isCollapsed: allCollapsed.state,
+        key: Math.random()
+      });
+    }
+    return child;
+  })));
+});
+BaseDetailedCard.className = CLASSNAME;
+BaseDetailedCard.displayName = COMPONENT_NAME;
+const DetailedCard = Object.assign(BaseDetailedCard, {
+  Header: DetailedCardHeader,
+  Section: DetailedCardSection,
+  CollapsibleSectionItems: DetailedCardCollapsibleSectionItems,
+  SectionItem: DetailedCardSectionItem
+});
+
+export { DetailedCard };
+//# sourceMappingURL=DetailedCard.js.map

package/packages/design-system/src/components/detailed-card/_internal/DetailedCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCard.js","sources":["../../../../../../../src/components/detailed-card/DetailedCard.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, ReactNode, RefObject, useCallback, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { mdiKeyboardCaps, mdiPageLast } from '@redsift/icons';\nimport { Comp } from '../../types';\nimport { Icon } from '../icon';\nimport { Flexbox } from '../flexbox';\nimport { IconButton } from '../icon-button';\nimport { Shield } from '../shield';\nimport { DetailedCardSection, DetailedCardSectionProps } from '../detailed-card-section';\nimport { StyledDetailedCard } from './styles';\nimport { DetailedCardProps } from './types';\nimport { partitionComponents, isComponent } from '../../utils';\nimport { DetailedCardCollapsibleSectionItems } from '../detailed-card-collapsible-section-items';\nimport { DetailedCardHeader } from '../detailed-card-header';\nimport { DetailedCardSectionItem } from '../detailed-card-section-item';\nimport { Tooltip } from '@redsift/popovers';\nimport { Skeleton } from '../skeleton';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'DetailedCard';\nconst CLASSNAME = 'redsift-detailed-card';\n\nconst hasMultipleCollapsibleChildren = (children: ReactNode): boolean => {\n  const collapsibleChildren: ReactNode[] = [];\n\n  const childrenArray = React.Children.toArray(children);\n  for (const child of childrenArray) {\n    if (isComponent(DetailedCardSection)(child)) {\n      let hasCollapsibleItems = Boolean((child as DetailedCardSectionProps).isCollapsible);\n      React.Children.forEach(child.props.children, (sectionChild) => {\n        if (isComponent(DetailedCardCollapsibleSectionItems)(sectionChild)) {\n          hasCollapsibleItems = true;\n        }\n      });\n\n      if (hasCollapsibleItems) {\n        collapsibleChildren.push(child);\n      }\n    }\n  }\n\n  return collapsibleChildren.length > 1;\n};\n\n/**\n * The DetailedCard component.\n */\nconst BaseDetailedCard: Comp<DetailedCardProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    areAllCollapsed: propsAreAllCollapsed,\n    bannerVariant,\n    children,\n    className,\n    color,\n    defaultAllCollapsed,\n    icon,\n    isCollapsible: propsIsCollapsible = true,\n    isLoading,\n    onCollapseAll,\n    shield,\n    theme: propsTheme,\n    width = '400px',\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  const isCollapsible = propsIsCollapsible && hasMultipleCollapsibleChildren(children);\n\n  const [allCollapsed, setAllCollapsed] = useState({\n    state: propsAreAllCollapsed ?? defaultAllCollapsed,\n  });\n\n  useEffect(() => {\n    setAllCollapsed({\n      state: propsAreAllCollapsed ?? defaultAllCollapsed,\n    });\n  }, [propsAreAllCollapsed, defaultAllCollapsed]);\n\n  const handleCollapse = useCallback(\n    (allCollapsed: boolean) => {\n      if (onCollapseAll) {\n        onCollapseAll(allCollapsed);\n      }\n      if (propsAreAllCollapsed === undefined || propsAreAllCollapsed === null) {\n        setAllCollapsed({\n          state: allCollapsed,\n        });\n      }\n    },\n    [onCollapseAll]\n  );\n\n  const [[header], content] = partitionComponents(React.Children.toArray(children), [\n    isComponent('DetailedCardHeader'),\n  ]);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledDetailedCard\n        width={width}\n        {...forwardedProps}\n        className={classNames(BaseDetailedCard.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        $color={color}\n        $theme={theme}\n      >\n        {color ? (\n          isLoading ? (\n            <Skeleton\n              theme={theme}\n              height={bannerVariant === 'condensed' ? '8px' : '80px'}\n              width=\"calc(100% + 32px)\"\n              margin=\"-16px -16px 16px -16px\"\n            />\n          ) : (\n            <Flexbox\n              className={`${BaseDetailedCard.className}__banner`}\n              alignItems=\"center\"\n              height={bannerVariant === 'condensed' ? '8px' : '80px'}\n              justifyContent=\"center\"\n              margin=\"-16px -16px 16px -16px\"\n              width=\"calc(100% + 32px)\"\n            >\n              {bannerVariant === 'condensed' ? null : shield ? (\n                <Shield\n                  variant={shield}\n                  isOutlined\n                  isReversed\n                  svgProps={{ width: '40px', height: '40px' }}\n                  style={{ width: '40px', height: '40px' }}\n                />\n              ) : icon ? (\n                <Icon icon={icon} color=\"white\" size=\"xlarge\" />\n              ) : null}\n            </Flexbox>\n          )\n        ) : null}\n        {header && isComponent('DetailedCardHeader')(header) ? (\n          <div className={`${BaseDetailedCard.className}__header`}>{header}</div>\n        ) : null}\n        {isCollapsible ? (\n          <Flexbox justifyContent=\"flex-end\" className={`${BaseDetailedCard.className}__collapse-buttons`}>\n            <Tooltip>\n              <Tooltip.Trigger>\n                <IconButton\n                  aria-label={format('collapse-all')}\n                  aria-describedby={undefined}\n                  icon={mdiPageLast}\n                  onClick={() => handleCollapse(true)}\n                  style={{ transform: 'rotate(-90deg)' }}\n                  color=\"grey\"\n                />\n              </Tooltip.Trigger>\n              <Tooltip.Content>{format('collapse-all')}</Tooltip.Content>\n            </Tooltip>\n            <Tooltip>\n              <Tooltip.Trigger>\n                <IconButton\n                  aria-label={format('expand-all')}\n                  aria-describedby={undefined}\n                  icon={mdiKeyboardCaps}\n                  onClick={() => handleCollapse(false)}\n                  style={{ transform: 'rotate(180deg)' }}\n                  color=\"grey\"\n                />\n              </Tooltip.Trigger>\n              <Tooltip.Content>{format('expand-all')}</Tooltip.Content>\n            </Tooltip>\n          </Flexbox>\n        ) : null}\n\n        {React.Children.map(content, (child) => {\n          if (isComponent(DetailedCardSection)(child)) {\n            return React.cloneElement(child as ReactElement, {\n              theme,\n              isCollapsed: allCollapsed.state,\n              key: Math.random(),\n            });\n          }\n          return child;\n        })}\n      </StyledDetailedCard>\n    </ThemeProvider>\n  );\n});\nBaseDetailedCard.className = CLASSNAME;\nBaseDetailedCard.displayName = COMPONENT_NAME;\n\nexport const DetailedCard = Object.assign(BaseDetailedCard, {\n  Header: DetailedCardHeader,\n  Section: DetailedCardSection,\n  CollapsibleSectionItems: DetailedCardCollapsibleSectionItems,\n  SectionItem: DetailedCardSectionItem,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","hasMultipleCollapsibleChildren","children","collapsibleChildren","childrenArray","React","Children","toArray","child","isComponent","DetailedCardSection","hasCollapsibleItems","Boolean","isCollapsible","forEach","props","sectionChild","DetailedCardCollapsibleSectionItems","push","length","BaseDetailedCard","forwardRef","ref","areAllCollapsed","propsAreAllCollapsed","bannerVariant","className","color","defaultAllCollapsed","icon","propsIsCollapsible","isLoading","onCollapseAll","shield","theme","propsTheme","width","forwardedProps","_objectWithoutProperties","_excluded","useTheme","format","useMessageFormatter","intlMessages","allCollapsed","setAllCollapsed","useState","state","useEffect","handleCollapse","useCallback","undefined","header","content","partitionComponents","createElement","ThemeProvider","value","StyledDetailedCard","_extends","classNames","$color","$theme","Skeleton","height","margin","Flexbox","alignItems","justifyContent","Shield","variant","isOutlined","isReversed","svgProps","style","Icon","size","Tooltip","Trigger","IconButton","mdiPageLast","onClick","transform","Content","mdiKeyboardCaps","map","cloneElement","isCollapsed","key","Math","random","displayName","DetailedCard","Object","assign","Header","DetailedCardHeader","Section","CollapsibleSectionItems","SectionItem","DetailedCardSectionItem"],"mappings":"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"}

package/packages/design-system/src/components/detailed-card/_internal/detailed-card.js

@@ -0,0 +1,2 @@
+export { DetailedCard } from './DetailedCard.js';
+//# sourceMappingURL=detailed-card.js.map

package/packages/design-system/src/components/detailed-card/_internal/styles.js

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '../../shared/_internal/styles.js';
+import { Theme } from '../../../types/_internal/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledDetailedCard = styled.div`
+  ${baseStyling}
+
+  color: var(--redsift-color-neutral-${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme === Theme.light ? 'x-dark-grey' : 'white';
+}});
+  background-color: var(--redsift-color-neutral-${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return $theme === Theme.light ? 'white' : 'x-dark-grey';
+}});
+  border-radius: 4px;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, ${_ref3 => {
+  let {
+    $theme
+  } = _ref3;
+  return $theme === Theme.light ? '0.5' : '1';
+}});
+  box-sizing: content-box;
+  padding: 16px;
+
+  .redsift-detailed-card__banner {
+    background-color: ${_ref4 => {
+  let {
+    $color
+  } = _ref4;
+  return css`var(--redsift-color-notifications-${$color}-primary)`;
+}};
+    color: var(--redsift-color-neutral-white);
+  }
+
+  .redsift-detailed-card__collapse-buttons {
+    width: 100%;
+  }
+`;
+
+export { StyledDetailedCard };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/detailed-card/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/detailed-card/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledDetailedCardProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCard = styled.div<StyledDetailedCardProps>`\n  ${baseStyling}\n\n  color: var(--redsift-color-neutral-${({ $theme }) => ($theme === Theme.light ? 'x-dark-grey' : 'white')});\n  background-color: var(--redsift-color-neutral-${({ $theme }) => ($theme === Theme.light ? 'white' : 'x-dark-grey')});\n  border-radius: 4px;\n  box-shadow: 0px 1px 2px rgba(0, 0, 0, ${({ $theme }) => ($theme === Theme.light ? '0.5' : '1')});\n  box-sizing: content-box;\n  padding: 16px;\n\n  .redsift-detailed-card__banner {\n    background-color: ${({ $color }) => css`var(--redsift-color-notifications-${$color}-primary)`};\n    color: var(--redsift-color-neutral-white);\n  }\n\n  .redsift-detailed-card__collapse-buttons {\n    width: 100%;\n  }\n`;\n"],"names":["StyledDetailedCard","styled","div","baseStyling","_ref","$theme","Theme","light","_ref2","_ref3","_ref4","$color","css"],"mappings":";;;;AAKA;AACA;AACA;AACaA,MAAAA,kBAAkB,GAAGC,MAAM,CAACC,GAA6B,CAAA;AACtE,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA,qCAAA,EAAuCC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAMC,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAG,aAAa,GAAG,OAAO,CAAA;AAAA,CAAE,CAAA;AAC1G,gDAAA,EAAkDC,KAAA,IAAA;EAAA,IAAC;AAAEH,IAAAA,MAAAA;AAAO,GAAC,GAAAG,KAAA,CAAA;EAAA,OAAMH,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAG,OAAO,GAAG,aAAa,CAAA;AAAA,CAAE,CAAA;AACrH;AACA,wCAAA,EAA0CE,KAAA,IAAA;EAAA,IAAC;AAAEJ,IAAAA,MAAAA;AAAO,GAAC,GAAAI,KAAA,CAAA;EAAA,OAAMJ,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAG,KAAK,GAAG,GAAG,CAAA;AAAA,CAAE,CAAA;AACjG;AACA;AACA;AACA;AACA,sBAAA,EAAwBG,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,KAAA,CAAA;EAAA,OAAKE,GAAI,CAAoCD,kCAAAA,EAAAA,MAAO,CAAU,SAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/packages/design-system/src/components/detailed-card/intl/_internal/en-US.js

@@ -0,0 +1,7 @@
+var enUS = {
+	"collapse-all": "Collapse all details",
+	"expand-all": "Expand all details"
+};
+
+export { enUS as default };
+//# sourceMappingURL=en-US.js.map

package/packages/design-system/src/components/detailed-card/intl/_internal/en-US.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/packages/design-system/src/components/detailed-card/intl/_internal/fr-FR.js

@@ -0,0 +1,7 @@
+var frFR = {
+	"collapse-all": "Réduire tous les détails",
+	"expand-all": "Développer tous les détails"
+};
+
+export { frFR as default };
+//# sourceMappingURL=fr-FR.js.map

package/packages/design-system/src/components/detailed-card/intl/_internal/fr-FR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr-FR.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/packages/design-system/src/components/detailed-card/intl/index.js

@@ -0,0 +1,10 @@
+import enUS from './_internal/en-US.js';
+import frFR from './_internal/fr-FR.js';
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/packages/design-system/src/components/detailed-card/intl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/detailed-card/intl/index.ts"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n"],"names":["enUS","frFR"],"mappings":";;;AAGA,mBAAe;AACb,EAAA,OAAO,EAAEA,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;;;"}

package/packages/design-system/src/components/detailed-card-collapsible-section-items/_internal/DetailedCardCollapsibleSectionItems.js

@@ -0,0 +1,33 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledDetailedCardCollapsibleSectionItems } from './styles.js';
+
+const _excluded = ["caption", "children", "className", "hideBackground"];
+const COMPONENT_NAME = 'DetailedCardCollapsibleSectionItems';
+const CLASSNAME = 'redsift-detailed-card-collapsible-section-items';
+
+/**
+ * The DetailedCardCollapsibleSectionItems Section component.
+ */
+const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      caption,
+      children,
+      className,
+      hideBackground
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledDetailedCardCollapsibleSectionItems, _extends({}, forwardedProps, {
+    className: classNames(DetailedCardCollapsibleSectionItems.className, className),
+    ref: ref,
+    $hideBackground: hideBackground
+  }), children, caption ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardCollapsibleSectionItems.className}__caption`
+  }, caption) : null);
+});
+DetailedCardCollapsibleSectionItems.className = CLASSNAME;
+DetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME;
+
+export { DetailedCardCollapsibleSectionItems };
+//# sourceMappingURL=DetailedCardCollapsibleSectionItems.js.map

package/packages/design-system/src/components/detailed-card-collapsible-section-items/_internal/DetailedCardCollapsibleSectionItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCardCollapsibleSectionItems.js","sources":["../../../../../../../src/components/detailed-card-collapsible-section-items/DetailedCardCollapsibleSectionItems.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { DetailedCardCollapsibleSectionItemsProps } from './types';\nimport { StyledDetailedCardCollapsibleSectionItems } from './styles';\n\nconst COMPONENT_NAME = 'DetailedCardCollapsibleSectionItems';\nconst CLASSNAME = 'redsift-detailed-card-collapsible-section-items';\n\n/**\n * The DetailedCardCollapsibleSectionItems Section component.\n */\nexport const DetailedCardCollapsibleSectionItems: Comp<DetailedCardCollapsibleSectionItemsProps, HTMLDivElement> =\n  forwardRef((props, ref) => {\n    const { caption, children, className, hideBackground, ...forwardedProps } = props;\n\n    return (\n      <StyledDetailedCardCollapsibleSectionItems\n        {...forwardedProps}\n        className={classNames(DetailedCardCollapsibleSectionItems.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        $hideBackground={hideBackground}\n      >\n        {children}\n        {caption ? <div className={`${DetailedCardCollapsibleSectionItems.className}__caption`}>{caption}</div> : null}\n      </StyledDetailedCardCollapsibleSectionItems>\n    );\n  });\nDetailedCardCollapsibleSectionItems.className = CLASSNAME;\nDetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DetailedCardCollapsibleSectionItems","forwardRef","props","ref","caption","children","className","hideBackground","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","StyledDetailedCardCollapsibleSectionItems","_extends","classNames","$hideBackground","displayName"],"mappings":";;;;;;AAOA,MAAMA,cAAc,GAAG,qCAAqC,CAAA;AAC5D,MAAMC,SAAS,GAAG,iDAAiD,CAAA;;AAEnE;AACA;AACA;AACO,MAAMC,mCAAmG,gBAC9GC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzB,MAAM;MAAEC,OAAO;MAAEC,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,cAAAA;AAAkC,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;EAEjF,oBACEC,cAAA,CAAAC,aAAA,CAACC,yCAAyC,EAAAC,QAAA,KACpCN,cAAc,EAAA;IAClBF,SAAS,EAAES,UAAU,CAACf,mCAAmC,CAACM,SAAS,EAAEA,SAAS,CAAE;AAChFH,IAAAA,GAAG,EAAEA,GAAiC;AACtCa,IAAAA,eAAe,EAAET,cAAAA;AAAe,GAAA,CAAA,EAE/BF,QAAQ,EACRD,OAAO,gBAAGO,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAG,CAAA,EAAEN,mCAAmC,CAACM,SAAU,CAAA,SAAA,CAAA;AAAW,GAAA,EAAEF,OAAa,CAAC,GAAG,IACjE,CAAC,CAAA;AAEhD,CAAC,EAAC;AACJJ,mCAAmC,CAACM,SAAS,GAAGP,SAAS,CAAA;AACzDC,mCAAmC,CAACiB,WAAW,GAAGnB,cAAc;;;;"}

package/packages/design-system/src/components/detailed-card-collapsible-section-items/_internal/detailed-card-collapsible-section-items.js

@@ -0,0 +1,2 @@
+export { DetailedCardCollapsibleSectionItems } from './DetailedCardCollapsibleSectionItems.js';
+//# sourceMappingURL=detailed-card-collapsible-section-items.js.map

package/packages/design-system/src/components/detailed-card-collapsible-section-items/_internal/styles.js

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components';
+
+/**
+ * Component style.
+ */
+const StyledDetailedCardCollapsibleSectionItems = styled.div`
+  ${_ref => {
+  let {
+    $hideBackground
+  } = _ref;
+  return $hideBackground ? css`
+          background: none;
+        ` : css`
+          background-color: var(--redsift-color-neutral-x-light-grey);
+          margin: 8px -16px;
+          padding: 8px 16px;
+        `;
+}}
+
+  .redsift-detailed-card-collapsible-section-items__caption {
+    color: var(--redsift-color-neutral-x-dark-grey);
+    display: flex;
+    font-family: var(--redsift-typography-font-family-poppins);
+    font-size: 12px;
+    font-weight: 300;
+    justify-content: flex-end;
+    line-height: 14px;
+    margin: 8px 0px;
+    padding-top: 8px;
+    border-top: 1px solid var(--redsift-color-neutral-mid-grey);
+  }
+`;
+
+export { StyledDetailedCardCollapsibleSectionItems };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/detailed-card-collapsible-section-items/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/detailed-card-collapsible-section-items/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledDetailedCardCollapsibleSectionItemsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardCollapsibleSectionItems = styled.div<StyledDetailedCardCollapsibleSectionItemsProps>`\n  ${({ $hideBackground }) =>\n    $hideBackground\n      ? css`\n          background: none;\n        `\n      : css`\n          background-color: var(--redsift-color-neutral-x-light-grey);\n          margin: 8px -16px;\n          padding: 8px 16px;\n        `}\n\n  .redsift-detailed-card-collapsible-section-items__caption {\n    color: var(--redsift-color-neutral-x-dark-grey);\n    display: flex;\n    font-family: var(--redsift-typography-font-family-poppins);\n    font-size: 12px;\n    font-weight: 300;\n    justify-content: flex-end;\n    line-height: 14px;\n    margin: 8px 0px;\n    padding-top: 8px;\n    border-top: 1px solid var(--redsift-color-neutral-mid-grey);\n  }\n`;\n"],"names":["StyledDetailedCardCollapsibleSectionItems","styled","div","_ref","$hideBackground","css"],"mappings":";;AAGA;AACA;AACA;AACaA,MAAAA,yCAAyC,GAAGC,MAAM,CAACC,GAAoD,CAAA;AACpH,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,eAAAA;AAAgB,GAAC,GAAAD,IAAA,CAAA;EAAA,OACpBC,eAAe,GACXC,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/packages/design-system/src/components/detailed-card-header/_internal/DetailedCardHeader.js

@@ -0,0 +1,45 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledDetailedCardHeader } from './styles.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { Skeleton } from '../../skeleton/_internal/Skeleton2.js';
+import { Heading } from '../../heading/_internal/Heading2.js';
+
+const _excluded = ["children", "className", "header", "headingProps", "isLoading"];
+const COMPONENT_NAME = 'DetailedCardHeader';
+const CLASSNAME = 'redsift-detailed-card-header';
+
+/**
+ * The DetailedCardHeader component.
+ */
+const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      header,
+      headingProps,
+      isLoading
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme();
+  return /*#__PURE__*/React__default.createElement(StyledDetailedCardHeader, _extends({}, forwardedProps, {
+    className: classNames(DetailedCardHeader.className, className),
+    ref: ref,
+    $theme: theme
+  }), header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "h2",
+    isLoaded: !isLoading,
+    height: "32px",
+    marginBottom: "16px"
+  }, /*#__PURE__*/React__default.createElement(Heading, _extends({
+    as: "h2",
+    className: `${DetailedCardHeader.className}__header`,
+    variant: "h2"
+  }, headingProps), header)) : null, children);
+});
+DetailedCardHeader.className = CLASSNAME;
+DetailedCardHeader.displayName = COMPONENT_NAME;
+
+export { DetailedCardHeader };
+//# sourceMappingURL=DetailedCardHeader.js.map

package/packages/design-system/src/components/detailed-card-header/_internal/DetailedCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedCardHeader.js","sources":["../../../../../../../src/components/detailed-card-header/DetailedCardHeader.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { Heading } from '../heading';\nimport { Skeleton } from '../skeleton';\nimport { StyledDetailedCardHeader } from './styles';\nimport { DetailedCardHeaderProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'DetailedCardHeader';\nconst CLASSNAME = 'redsift-detailed-card-header';\n\n/**\n * The DetailedCardHeader component.\n */\nexport const DetailedCardHeader: Comp<DetailedCardHeaderProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, header, headingProps, isLoading, ...forwardedProps } = props;\n  const theme = useTheme();\n\n  return (\n    <StyledDetailedCardHeader\n      {...forwardedProps}\n      className={classNames(DetailedCardHeader.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $theme={theme}\n    >\n      {header ? (\n        <Skeleton.Text variant=\"h2\" isLoaded={!isLoading} height=\"32px\" marginBottom=\"16px\">\n          <Heading as=\"h2\" className={`${DetailedCardHeader.className}__header`} variant=\"h2\" {...headingProps}>\n            {header}\n          </Heading>\n        </Skeleton.Text>\n      ) : null}\n\n      {children}\n    </StyledDetailedCardHeader>\n  );\n});\nDetailedCardHeader.className = CLASSNAME;\nDetailedCardHeader.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DetailedCardHeader","forwardRef","props","ref","children","className","header","headingProps","isLoading","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","React","createElement","StyledDetailedCardHeader","_extends","classNames","$theme","Skeleton","Text","variant","isLoaded","height","marginBottom","Heading","as","displayName"],"mappings":";;;;;;;;;AAUA,MAAMA,cAAc,GAAG,oBAAoB,CAAA;AAC3C,MAAMC,SAAS,GAAG,8BAA8B,CAAA;;AAEhD;AACA;AACA;AACO,MAAMC,kBAAiE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1G,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,MAAM;MAAEC,YAAY;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGN,KAAK;AAAxBO,IAAAA,cAAc,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA,CAAA,CAAA;AACzF,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;EAExB,oBACEC,cAAA,CAAAC,aAAA,CAACC,wBAAwB,EAAAC,QAAA,KACnBR,cAAc,EAAA;IAClBJ,SAAS,EAAEa,UAAU,CAAClB,kBAAkB,CAACK,SAAS,EAAEA,SAAS,CAAE;AAC/DF,IAAAA,GAAG,EAAEA,GAAiC;AACtCgB,IAAAA,MAAM,EAAEP,KAAAA;GAEPN,CAAAA,EAAAA,MAAM,gBACLQ,cAAA,CAAAC,aAAA,CAACK,QAAQ,CAACC,IAAI,EAAA;AAACC,IAAAA,OAAO,EAAC,IAAI;IAACC,QAAQ,EAAE,CAACf,SAAU;AAACgB,IAAAA,MAAM,EAAC,MAAM;AAACC,IAAAA,YAAY,EAAC,MAAA;AAAM,GAAA,eACjFX,cAAA,CAAAC,aAAA,CAACW,OAAO,EAAAT,QAAA,CAAA;AAACU,IAAAA,EAAE,EAAC,IAAI;AAACtB,IAAAA,SAAS,EAAG,CAAA,EAAEL,kBAAkB,CAACK,SAAU,CAAU,QAAA,CAAA;AAACiB,IAAAA,OAAO,EAAC,IAAA;GAASf,EAAAA,YAAY,GACjGD,MACM,CACI,CAAC,GACd,IAAI,EAEPF,QACuB,CAAC,CAAA;AAE/B,CAAC,EAAC;AACFJ,kBAAkB,CAACK,SAAS,GAAGN,SAAS,CAAA;AACxCC,kBAAkB,CAAC4B,WAAW,GAAG9B,cAAc;;;;"}

package/packages/design-system/src/components/detailed-card-header/_internal/detailed-card-header.js

@@ -0,0 +1,2 @@
+export { DetailedCardHeader } from './DetailedCardHeader.js';
+//# sourceMappingURL=detailed-card-header.js.map

package/packages/design-system/src/components/detailed-card-header/_internal/styles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Theme } from '../../../types/_internal/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledDetailedCardHeader = styled.div`
+  margin: 8px 0;
+
+  .redsift-detailed-card-header__header {
+    color: var(--redsift-color-neutral-${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme === Theme.light ? 'x-dark-grey' : 'white';
+}});
+    font-family: var(--redsift-typography-font-family-poppins);
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 32px;
+    margin-bottom: 16px;
+  }
+`;
+
+export { StyledDetailedCardHeader };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/detailed-card-header/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/detailed-card-header/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledDetailedCardHeaderProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardHeader = styled.div<StyledDetailedCardHeaderProps>`\n  margin: 8px 0;\n\n  .redsift-detailed-card-header__header {\n    color: var(--redsift-color-neutral-${({ $theme }) => ($theme === Theme.light ? 'x-dark-grey' : 'white')});\n    font-family: var(--redsift-typography-font-family-poppins);\n    font-size: 32px;\n    font-weight: 500;\n    line-height: 32px;\n    margin-bottom: 16px;\n  }\n`;\n"],"names":["StyledDetailedCardHeader","styled","div","_ref","$theme","Theme","light"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,wBAAwB,GAAGC,MAAM,CAACC,GAAmC,CAAA;AAClF;AACA;AACA;AACA,uCAAA,EAAyCC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAMC,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAG,aAAa,GAAG,OAAO,CAAA;AAAA,CAAE,CAAA;AAC5G;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/packages/design-system/src/components/detailed-card-section/_internal/DetailedCardSection.js

@@ -0,0 +1,90 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState } from 'react';
+import classNames from 'classnames';
+import intlMessages from '../intl/index.js';
+import { mdiChevronDown, mdiChevronUp } from '@redsift/icons';
+import { isComponent } from '../../../utils/_internal/isComponent.js';
+import { StyledDetailedCardSection } from './styles.js';
+import { useMessageFormatter } from '../../../react-aria/react-aria/i18n/_internal/useMessageFormatter.js';
+import { DetailedCardCollapsibleSectionItems } from '../../detailed-card-collapsible-section-items/_internal/DetailedCardCollapsibleSectionItems.js';
+import { Flexbox } from '../../flexbox/_internal/Flexbox2.js';
+import { Skeleton } from '../../skeleton/_internal/Skeleton2.js';
+import { Text } from '../../text/_internal/Text2.js';
+import { Badge } from '../../badge/_internal/Badge2.js';
+import { BadgeVariant } from '../../badge/_internal/types.js';
+import { IconButton } from '../../icon-button/_internal/IconButton.js';
+
+const _excluded = ["badge", "color", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
+const COMPONENT_NAME = 'DetailedCardSection';
+const CLASSNAME = 'redsift-detailed-card-section';
+const hasCollapsibleChildren = children => {
+  let hasCollapsible = false;
+  React__default.Children.map(children, child => {
+    if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {
+      hasCollapsible = true;
+    }
+  });
+  return hasCollapsible;
+};
+
+/**
+ * The DetailedCardSection component.
+ */
+const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      badge,
+      color,
+      children,
+      className,
+      header,
+      isCollapsed: propsIsCollapsed,
+      isCollapsible: propsIsCollapsible = true,
+      isLoading
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const format = useMessageFormatter(intlMessages);
+  const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);
+  const [isCollapsed, setIsCollapsed] = useState(Boolean(propsIsCollapsed));
+  return /*#__PURE__*/React__default.createElement(StyledDetailedCardSection, _extends({}, forwardedProps, {
+    className: classNames(DetailedCardSection.className, className),
+    ref: ref,
+    $color: color,
+    $isCollapsed: isCollapsed
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    justifyContent: "space-between",
+    className: `${DetailedCardSection.className}__header`
+  }, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "body",
+    isLoaded: !isLoading,
+    fontSize: "18px",
+    lineHeight: "22px",
+    marginTop: "6px",
+    marginBottom: "12px"
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+    alignItems: "center",
+    gap: "8px"
+  }, typeof header === 'string' ? /*#__PURE__*/React__default.createElement(Text, {
+    className: `${DetailedCardSection.className}-header__title`,
+    color: "black",
+    fontSize: "18px",
+    lineHeight: "22px"
+  }, header) : /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardSection.className}-header__title`
+  }, header), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends({
+    variant: BadgeVariant.standard
+  }, badge)) : null)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {
+    marginLeft: "auto",
+    "aria-label": format(isCollapsed ? 'expand' : 'collapse'),
+    className: `${DetailedCardSection.className}-header__collapse-button`,
+    color: "grey",
+    icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
+    onClick: () => {
+      setIsCollapsed(isCollapsed => !isCollapsed);
+    }
+  }) : null), children);
+});
+DetailedCardSection.className = CLASSNAME;
+DetailedCardSection.displayName = COMPONENT_NAME;
+
+export { DetailedCardSection };
+//# sourceMappingURL=DetailedCardSection.js.map