@redsift/design-system 11.9.4 → 12.0.0-muiv5

package/_internal/DetailedCard.js

@@ -1,10 +1,10 @@
-import { c as _extends, _ as _objectSpread2, b as _objectWithoutProperties } from './_rollupPluginBabelHelpers.js';
+import { c as _extends, a as _objectSpread2, b as _objectWithoutProperties } from './_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import React__default, { useLayoutEffect, useEffect, useRef, forwardRef, useContext, useState, useCallback } from 'react';
 import classNames from 'classnames';
 import { mdiPageLast, mdiKeyboardCaps } from '@redsift/icons';
 import styled, { css } from 'styled-components';
-import { i as baseStyling, j as baseContainer } from './styles4.js';
+import { i as baseStyling, j as baseContainer } from './styles5.js';
 import { T as Theme } from './colors.js';
 import { D as DetailedCardHeader } from './DetailedCardHeader.js';
 import { D as DetailedCardSection } from './DetailedCardSection.js';
@@ -13,6 +13,7 @@ import { u as useMessageFormatter } from './useMessageFormatter.js';
 import * as ReactDOM from 'react-dom';
 import { u as useId$1 } from './useId.js';
 import { u as useTheme, a as ThemeProvider } from './useTheme.js';
+import { i as getContainerStylingTransientProps, f as getStylingTransientProps } from './styles.js';
 import { A as AppContainerContext } from './context2.js';
 import { p as partitionComponents } from './partitionComponents.js';
 import { i as isComponent } from './isComponent.js';
@@ -6511,12 +6512,16 @@ const CLASSNAME$3 = 'redsift-tooltip-content';
  * The TooltipContent component.
  */
 const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(props);
   const {
     children,
     className,
     style,
     theme: propsTheme
-  } = props;
+  } = otherProps;
   const appContainerState = useContext(AppContainerContext);
   const {
     getFloatingProps,
@@ -6550,7 +6555,7 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(TooltipContent.className, className),
     ref: popoverRef,
     $theme: theme
-  }, getFloatingProps(props), {
+  }, getFloatingProps(otherProps), transientProps, {
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,
@@ -6766,7 +6771,8 @@ const useTooltipContext = () => {
   return context;
 };
 
-const _excluded = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield", "theme", "width"];
+const _excluded = ["width"],
+  _excluded2 = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield", "theme"];
 const COMPONENT_NAME = 'DetailedCard';
 const CLASSNAME = 'redsift-detailed-card';
 const hasMultipleCollapsibleChildren = children => {
@@ -6792,6 +6798,14 @@ const hasMultipleCollapsibleChildren = children => {
  * The DetailedCard component.
  */
 const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      width = '400px'
+    } = props,
+    propsWithoutWidth = _objectWithoutProperties(props, _excluded);
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(propsWithoutWidth);
   const {
       areAllCollapsed: propsAreAllCollapsed,
       bannerVariant,
@@ -6804,10 +6818,9 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       onCollapseAll,
       shield,
-      theme: propsTheme,
-      width = '400px'
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+      theme: propsTheme
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded2);
   const theme = useTheme(propsTheme);
   const format = useMessageFormatter(intlMessages);
   const isCollapsible = propsIsCollapsible && hasMultipleCollapsibleChildren(children);
@@ -6834,9 +6847,8 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     value: {
       theme
     }
-  }, /*#__PURE__*/React__default.createElement(StyledDetailedCard, _extends({
-    width: width
-  }, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(StyledDetailedCard, _extends({}, forwardedProps, transientProps, {
+    $width: width,
     className: classNames(BaseDetailedCard.className, className),
     ref: ref,
     $color: color,