@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/DetailedCardCollapsibleSectionItems.js

@@ -1,9 +1,64 @@
-import { D as DetailedCardCollapsibleSectionItemsProps } from './types9.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+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);
+  }
+`;
+
+const _excluded = ["caption", "children", "className", "hideBackground"];
+const COMPONENT_NAME = 'DetailedCardCollapsibleSectionItems';
+const CLASSNAME = 'redsift-detailed-card-collapsible-section-items';
 
 /**
  * The DetailedCardCollapsibleSectionItems Section component.
  */
-declare const DetailedCardCollapsibleSectionItems: Comp<DetailedCardCollapsibleSectionItemsProps, HTMLDivElement>;
+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 as D };
+//# sourceMappingURL=DetailedCardCollapsibleSectionItems.js.map

package/_internal/DetailedCardHeader.js

@@ -1,9 +1,67 @@
-import { D as DetailedCardHeaderProps } from './types10.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { T as Theme } from './colors.js';
+import { u as useTheme } from './useTheme.js';
+import { S as Skeleton } from './Skeleton2.js';
+import { H as Heading } from './Heading2.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;
+  }
+`;
+
+const _excluded = ["children", "className", "header", "headingProps", "isLoading"];
+const COMPONENT_NAME = 'DetailedCardHeader';
+const CLASSNAME = 'redsift-detailed-card-header';
 
 /**
  * The DetailedCardHeader component.
  */
-declare const DetailedCardHeader: Comp<DetailedCardHeaderProps, HTMLDivElement>;
+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 as D };
+//# sourceMappingURL=DetailedCardHeader.js.map

package/_internal/DetailedCardSection.js

@@ -1,9 +1,172 @@
-import { D as DetailedCardSectionProps } from './types11.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState } from 'react';
+import classNames from 'classnames';
+import { mdiChevronDown, mdiChevronUp } from '@redsift/icons';
+import { i as isComponent } from './isComponent.js';
+import styled, { css } from 'styled-components';
+import { N as NotificationsColorPalette, e as ProductColorPalette } from './colors.js';
+import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { D as DetailedCardCollapsibleSectionItems } from './DetailedCardCollapsibleSectionItems.js';
+import { F as Flexbox } from './Flexbox2.js';
+import { S as Skeleton } from './Skeleton2.js';
+import { T as Text } from './Text2.js';
+import { a as Badge, B as BadgeVariant } from './Badge2.js';
+import { I as IconButton } from './IconButton.js';
+
+var collapse$1 = "Collapse details";
+var expand$1 = "Expand details";
+var enUS = {
+	collapse: collapse$1,
+	expand: expand$1
+};
+
+var collapse = "Réduire les détails";
+var expand = "Développer les détails";
+var frFR = {
+	collapse: collapse,
+	expand: expand
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+/**
+ * Component style.
+ */
+const StyledDetailedCardSection = styled.div`
+  margin: 8px 0;
+
+  .redsift-detailed-card-section__header {
+    ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+            border-bottom: 1px solid var(--redsift-color-notifications-${$color}-primary);
+          ` : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+            border-bottom: 1px solid var(--redsift-color-product-${$color});
+          ` : css`
+            border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-mid-grey)`};
+          `;
+}}
+    margin-bottom: 8px;
+  }
+
+  .redsift-detailed-card-section-header__title {
+    font-size: 18px;
+    font-weight: 500;
+    lineheight: 22px;
+    padding: 6px 0px;
+  }
+
+  .redsift-detailed-card-section-header__collapse-button {
+    color: var(--redsift-color-neutral-x-dark-grey);
+  }
+
+  .redsift-detailed-card-collapsible-section-items {
+    visibility: ${_ref2 => {
+  let {
+    $isCollapsed
+  } = _ref2;
+  return !$isCollapsed ? 'visible' : 'hidden';
+}};
+    overflow: ${_ref3 => {
+  let {
+    $isCollapsed
+  } = _ref3;
+  return !$isCollapsed ? 'visible' : 'hidden';
+}};
+    height: ${_ref4 => {
+  let {
+    $isCollapsed
+  } = _ref4;
+  return !$isCollapsed ? 'auto' : '0px';
+}};
+    ${_ref5 => {
+  let {
+    $isCollapsed
+  } = _ref5;
+  return $isCollapsed ? css`
+            margin: unset;
+            padding: unset;
+          ` : '';
+}};
+  }
+`;
+
+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.
  */
-declare const DetailedCardSection: Comp<DetailedCardSectionProps, HTMLDivElement>;
+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 as D };
+//# sourceMappingURL=DetailedCardSection.js.map

package/_internal/DetailedCardSectionItem.js

@@ -1,9 +1,94 @@
-import { D as DetailedCardSectionItemProps } from './types12.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { S as Shield } from './Shield2.js';
+import { a as Pill } from './Pill2.js';
+import { F as Flexbox } from './Flexbox2.js';
+import { S as Skeleton } from './Skeleton2.js';
+import { a as Icon } from './Icon2.js';
+import { T as Text } from './Text2.js';
+
+/**
+ * Component style.
+ */
+const StyledDetailedCardSectionItem = styled.div`
+  padding: 8px 0;
+
+  .redsift-detailed-card-section-item-header__shield {
+    align-items: center;
+    display: flex;
+    height: 28px;
+    justify-content: center;
+    padding: 0 4px;
+  }
+
+  .redsift-detailed-card-section-item-header__icon {
+    height: 28px;
+  }
+
+  .redsift-detailed-card-section-item-header__pill {
+    display: inline-block;
+    margin-right: 8px;
+  }
+
+  .redsift-detailed-card-section-item-header__description {
+    line-height: 28px;
+    display: inline-flex;
+    align-items: center;
+  }
+`;
+
+const _excluded = ["children", "className", "description", "descriptionProps", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
+const COMPONENT_NAME = 'DetailedCardSectionItem';
+const CLASSNAME = 'redsift-detailed-card-section-item';
 
 /**
  * The DetailedCardSectionItems component.
  */
-declare const DetailedCardSectionItem: Comp<DetailedCardSectionItemProps, HTMLDivElement>;
+const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      description,
+      descriptionProps,
+      icon,
+      iconProps,
+      isLoading,
+      pill,
+      pillProps,
+      shield
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledDetailedCardSectionItem, _extends({}, forwardedProps, {
+    className: classNames(DetailedCardSectionItem.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    alignItems: "flex-start",
+    className: `${DetailedCardSectionItem.className}__header`
+  }, shield ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement(Shield, {
+    variant: shield,
+    className: `${DetailedCardSectionItem.className}-header__shield`
+  })) : icon ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardSectionItem.className}-header__icon`
+  }, /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: icon
+  }, iconProps, {
+    size: "large"
+  })))) : null, description || pill ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardSectionItem.className}-header__description`
+  }, /*#__PURE__*/React__default.createElement(Skeleton, {
+    isLoaded: !isLoading
+  }, pill && /*#__PURE__*/React__default.createElement(Pill, _extends({
+    className: `${DetailedCardSectionItem.className}-header__pill`
+  }, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(Text, descriptionProps, description) : description)) : null), children);
+});
+DetailedCardSectionItem.className = CLASSNAME;
+DetailedCardSectionItem.displayName = COMPONENT_NAME;
 
 export { DetailedCardSectionItem as D };
+//# sourceMappingURL=DetailedCardSectionItem.js.map

package/_internal/Flexbox2.js

@@ -1,30 +1,93 @@
-import { ComponentProps } from 'react';
-import { h as StylingProps, I as InternalSpacingProps, g as FlexLayoutProps, B as BorderProps } from './styles2.js';
-import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { i as baseStyling, c as baseInternalSpacing, f as baseBorder, g as baseFlexbox } from './styles4.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
 
 /**
- * Component props.
+ * Component style.
  */
-interface FlexboxProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps, FlexLayoutProps, BorderProps {
-    /** Used to use a different tag in lieu of a div. */
-    as?: any;
-    /** Whether the flexbox has internal divider or not. The number of pixels defining the gap between columns and rows is mandatory. This replaces the gap property. */
-    divider?: {
-        colGap: number;
-        rowGap: number;
-    };
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledFlexboxProps = FlexboxProps & {
-    $divider: FlexboxProps['divider'];
-    $theme: FlexboxProps['theme'];
-};
+const StyledFlexbox = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-flex' : 'flex';
+}};
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseBorder}
+  ${baseFlexbox}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          > *:not(:empty) {
+            position: relative;
+
+            ::before {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 1px;
+              block-size: 100%;
+              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
+            }
+
+            ::after {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 200vw;
+              block-size: 1px;
+              inset-inline-start: -100vw;
+              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);
+              z-index: 0;
+            }
+          }
+        ` : '';
+}}
+`;
+
+const _excluded = ["as", "children", "className", "divider", "gap", "theme"];
+const COMPONENT_NAME = 'Flexbox';
+const CLASSNAME = 'redsift-flex-box';
 
 /**
  * The Flexbox component.
  */
-declare const Flexbox: Comp<FlexboxProps, HTMLDivElement>;
+const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      divider,
+      gap = '16px',
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledFlexbox, _extends({
+    as: as
+  }, forwardedProps, {
+    gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
+    className: classNames(Flexbox.className, className),
+    ref: ref,
+    $divider: divider,
+    $theme: theme
+  }), children));
+});
+Flexbox.className = CLASSNAME;
+Flexbox.displayName = COMPONENT_NAME;
 
-export { FlexboxProps as F, StyledFlexboxProps as S, Flexbox as a };
+export { Flexbox as F };
+//# sourceMappingURL=Flexbox2.js.map

package/_internal/Grid2.js

@@ -1,32 +1,95 @@
-import { G as GridItemProps } from './types14.js';
-import { ComponentProps } from 'react';
-import { h as StylingProps, I as InternalSpacingProps, G as GridLayoutProps, B as BorderProps } from './styles2.js';
-import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { i as baseStyling, c as baseInternalSpacing, h as baseGrid, f as baseBorder } from './styles4.js';
+import { G as GridItem } from './GridItem.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
 
 /**
- * Component props.
+ * Component style.
  */
-interface GridProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps, GridLayoutProps, BorderProps {
-    /** Whether the grid has divider or not. The number of pixels defining the gap between columns and rows is mandatory. This replaces the grid gap property. */
-    divider?: {
-        colGap: number;
-        rowGap: number;
-    };
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledGridProps = GridProps & {
-    $divider: GridProps['divider'];
-    $theme: GridProps['theme'];
-};
+const StyledGrid = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-grid' : 'grid';
+}};
+  flex: 1;
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseGrid}
+  ${baseBorder}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          > .redsift-grid-item:not(:empty) {
+            position: relative;
+
+            ::before {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 1px;
+              block-size: 100%;
+              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
+            }
+
+            ::after {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 200vw;
+              block-size: 1px;
+              inset-inline-start: -100vw;
+              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);
+              z-index: 0;
+            }
+          }
+        ` : '';
+}}
+`;
+
+const _excluded = ["children", "className", "divider", "gap", "theme"];
+const COMPONENT_NAME = 'Grid';
+const CLASSNAME = 'redsift-grid';
 
 /**
  * The Grid component.
  */
-declare const BaseGrid: Comp<GridProps, HTMLDivElement>;
-declare const Grid: Comp<GridProps, HTMLDivElement> & {
-    Item: Comp<GridItemProps, HTMLDivElement>;
-};
+const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      divider,
+      gap,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledGrid, _extends({}, forwardedProps, {
+    gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
+    className: classNames(BaseGrid.className, className),
+    ref: ref,
+    $divider: divider,
+    $theme: theme
+  }), children));
+});
+BaseGrid.className = CLASSNAME;
+BaseGrid.displayName = COMPONENT_NAME;
+const Grid = Object.assign(BaseGrid, {
+  Item: GridItem
+});
 
-export { BaseGrid as B, GridProps as G, StyledGridProps as S, Grid as a };
+export { BaseGrid as B, Grid as G };
+//# sourceMappingURL=Grid2.js.map