@redsift/design-system 10.0.0-muiv5-alpha.0 → 10.0.0-muiv5-alpha.2

package/index.d.ts

@@ -2438,12 +2438,85 @@ type StyledPillProps = Omit<PillProps, 'color' | 'autoBreak'> & {
  */
 declare const Pill: Comp<PillProps, HTMLDivElement>;
 
+/**
+ * Component variant.
+ */
+declare const TextVariant: {
+    readonly body: "body";
+    readonly button: "button";
+    readonly caption: "caption";
+    readonly helper: "helper";
+    readonly inherit: "inherit";
+};
+type TextVariant = ValueOf<typeof TextVariant>;
+declare const TextComponent: {
+    readonly p: "p";
+    readonly b: "b";
+    readonly i: "i";
+    readonly u: "u";
+    readonly abbr: "abbr";
+    readonly cite: "cite";
+    readonly del: "del";
+    readonly em: "em";
+    readonly ins: "ins";
+    readonly kbd: "kbd";
+    readonly mark: "mark";
+    readonly s: "s";
+    readonly samp: "samp";
+    readonly sub: "sub";
+    readonly sup: "sup";
+};
+type TextComponent = ValueOf<typeof TextComponent>;
+/**
+ * Component props.
+ */
+interface TextProps extends ComponentProps<'span'>, StylingProps {
+    /** Override component. */
+    as?: TextComponent;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: NotificationsColorPalette | NeutralColorPalette | (string & {});
+    /** Font family. */
+    fontFamily?: FontFamily;
+    /** Font size. */
+    fontSize?: string;
+    /** Font weight. */
+    fontWeight?: string;
+    /** Line height. */
+    lineHeight?: string;
+    /** Whether the text will truncate with a text overflow ellipsis or wrap. */
+    noWrap?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** Variant. */
+    variant?: TextVariant;
+    /** Word break CSS properties */
+    wordBreak?: string;
+}
+type StyledTextProps = Omit<TextProps, 'as' | 'color' | 'fontFamily' | 'fontSize' | 'lineHeight' | 'noWrap' | 'variant'> & {
+    $as: TextProps['as'];
+    $color: TextProps['color'];
+    $fontFamily?: TextProps['fontFamily'];
+    $fontSize: TextProps['fontSize'];
+    $fontWeight: TextProps['fontWeight'];
+    $lineHeight: TextProps['lineHeight'];
+    $noWrap: TextProps['noWrap'];
+    $variant: TextProps['variant'];
+    $theme: TextProps['theme'];
+};
+
+/**
+ * The Text component.
+ */
+declare const Text: Comp<TextProps, HTMLDivElement>;
+
 /**
  * Component props.
  */
 interface DetailedCardSectionItemProps extends ComponentProps<'div'> {
     /** Description */
     description?: string | ReactElement;
+    /** TextProps to forward to the description. */
+    descriptionProps?: Omit<TextProps, 'ref'>;
     /**
      * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
      * Can also be a ReactElement.
@@ -2498,7 +2571,9 @@ interface DetailedCardHeaderProps extends ComponentProps<'div'> {
     /** Whether the card is loading or not. */
     isLoading?: boolean;
 }
-type StyledDetailedCardHeaderProps = DetailedCardHeaderProps & {};
+type StyledDetailedCardHeaderProps = DetailedCardHeaderProps & {
+    $theme: Theme;
+};
 
 /**
  * The DetailedCardHeader component.
@@ -2983,75 +3058,6 @@ type StyledLinkButtonProps = Omit<LinkButtonProps, 'isDisabled'> & {
  */
 declare const LinkButton: Comp<LinkButtonProps, HTMLButtonElement>;
 
-/**
- * Component variant.
- */
-declare const TextVariant: {
-    readonly body: "body";
-    readonly button: "button";
-    readonly caption: "caption";
-    readonly helper: "helper";
-    readonly inherit: "inherit";
-};
-type TextVariant = ValueOf<typeof TextVariant>;
-declare const TextComponent: {
-    readonly p: "p";
-    readonly b: "b";
-    readonly i: "i";
-    readonly u: "u";
-    readonly abbr: "abbr";
-    readonly cite: "cite";
-    readonly del: "del";
-    readonly em: "em";
-    readonly ins: "ins";
-    readonly kbd: "kbd";
-    readonly mark: "mark";
-    readonly s: "s";
-    readonly samp: "samp";
-    readonly sub: "sub";
-    readonly sup: "sup";
-};
-type TextComponent = ValueOf<typeof TextComponent>;
-/**
- * Component props.
- */
-interface TextProps extends ComponentProps<'span'>, StylingProps {
-    /** Override component. */
-    as?: TextComponent;
-    /** Color variant. Either from color palette or hex or rgb strings. */
-    color?: NotificationsColorPalette | NeutralColorPalette | (string & {});
-    /** Font family. */
-    fontFamily?: FontFamily;
-    /** Font size. */
-    fontSize?: string;
-    /** Font weight. */
-    fontWeight?: string;
-    /** Line height. */
-    lineHeight?: string;
-    /** Whether the text will truncate with a text overflow ellipsis or wrap. */
-    noWrap?: boolean;
-    /** Theme. */
-    theme?: Theme;
-    /** Variant. */
-    variant?: TextVariant;
-}
-type StyledTextProps = Omit<TextProps, 'as' | 'color' | 'fontFamily' | 'fontSize' | 'lineHeight' | 'noWrap' | 'variant'> & {
-    $as: TextProps['as'];
-    $color: TextProps['color'];
-    $fontFamily?: TextProps['fontFamily'];
-    $fontSize: TextProps['fontSize'];
-    $fontWeight: TextProps['fontWeight'];
-    $lineHeight: TextProps['lineHeight'];
-    $noWrap: TextProps['noWrap'];
-    $variant: TextProps['variant'];
-    $theme: TextProps['theme'];
-};
-
-/**
- * The Text component.
- */
-declare const Text: Comp<TextProps, HTMLDivElement>;
-
 interface NumberFormatOptions {
 }
 /**

package/index.js

@@ -2479,6 +2479,15 @@ const StyledText = styled.span`
           white-space: nowrap;
         ` : '';
 }}
+
+  ${_ref5 => {
+  let {
+    wordBreak
+  } = _ref5;
+  return wordBreak ? css`
+          word-break: ${wordBreak};
+        ` : '';
+}}
 `;
 
 const _excluded$L = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "theme", "variant"];
@@ -2903,37 +2912,37 @@ const StyledHeading = styled.span`
     $theme
   } = _ref;
   return $variant === 'h1' ? css`
-          color: var(--redsift-${$theme}-color-components-text-primary);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h1-font-family);
           font-size: var(--redsift-typography-h1-font-size);
           font-weight: var(--redsift-typography-h1-font-weight);
           line-height: var(--redsift-typography-h1-line-height);
         ` : $variant === 'h2' ? css`
-          color: var(--redsift-${$theme}-color-components-text-primary);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h2-font-family);
           font-size: var(--redsift-typography-h2-font-size);
           font-weight: var(--redsift-typography-h2-font-weight);
           line-height: var(--redsift-typography-h2-line-height);
         ` : $variant === 'h3' ? css`
-          color: var(--redsift-${$theme}-color-components-text-primary);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h3-font-family);
           font-size: var(--redsift-typography-h3-font-size);
           font-weight: var(--redsift-typography-h3-font-weight);
           line-height: var(--redsift-typography-h3-line-height);
         ` : $variant === 'h4' ? css`
-          color: var(--redsift-${$theme}-color-components-text-primary);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h4-font-family);
           font-size: var(--redsift-typography-h4-font-size);
           font-weight: var(--redsift-typography-h4-font-weight);
           line-height: var(--redsift-typography-h4-line-height);
         ` : $variant === 'h5' ? css`
-          color: var(--redsift-${$theme}-color-components-text-primary);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-h5-font-family);
           font-size: var(--redsift-typography-h5-font-size);
           font-weight: var(--redsift-typography-h5-font-weight);
           line-height: var(--redsift-typography-h5-line-height);
         ` : css`
-          color: var(--redsift-${$theme}-color-components-text-primary);
+          color: var(--redsift-color-${$theme}-components-text-primary);
           font-family: var(--redsift-typography-body-font-family);
           font-size: var(--redsift-typography-body-font-size);
           font-weight: var(--redsift-typography-body-font-weight);
@@ -3937,7 +3946,12 @@ const StyledAppContainer = styled.div`
   } = _ref2;
   return `var(--redsift-color-${$theme}-components-text-secondary);`;
 }};
-  color: var(--redsift-color-text-primary);
+  color: ${_ref3 => {
+  let {
+    $theme
+  } = _ref3;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
 `;
 
 const _excluded$E = ["children", "className", "locale", "product", "theme"];
@@ -4808,12 +4822,13 @@ const StyledBreadcrumbs = styled.nav`
 
     ${_ref => {
   let {
-    $isDisabled
+    $isDisabled,
+    $theme
   } = _ref;
   return $isDisabled ? css`
             color: var(--redsift-color-neutral-mid-grey);
           ` : css`
-            color: var(--redsift-color-text-primary);
+            color: var(--redsift-color-${$theme}-components-text-primary);
           `;
 }}
   }
@@ -6716,7 +6731,12 @@ const StyledDetailedCardHeader = styled.div`
   margin: 8px 0;
 
   .redsift-detailed-card-header__header {
-    color: var(--redsift-color-neutral-x-dark-grey);
+    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;
@@ -6742,9 +6762,11 @@ const DetailedCardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$i);
+  const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardHeader, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardHeader.className, className),
-    ref: ref
+    ref: ref,
+    $theme: theme
   }), header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
     variant: "h2",
     isLoaded: !isLoading,
@@ -6995,7 +7017,7 @@ const StyledDetailedCardSectionItem = styled.div`
   }
 `;
 
-const _excluded$g = ["children", "className", "description", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
+const _excluded$g = ["children", "className", "description", "descriptionProps", "icon", "iconProps", "isLoading", "pill", "pillProps", "shield"];
 const COMPONENT_NAME$h = 'DetailedCardSectionItem';
 const CLASSNAME$h = 'redsift-detailed-card-section-item';
 const DEFAULT_PROPS$h = {};
@@ -7008,6 +7030,7 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       description,
+      descriptionProps,
       icon,
       iconProps,
       isLoading,
@@ -7041,7 +7064,7 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
     isLoaded: !isLoading
   }, pill && /*#__PURE__*/React__default.createElement(Pill, _extends$1({
     className: `${DetailedCardSectionItem.className}-header__pill`
-  }, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(Text, null, description) : description)) : null), children);
+  }, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(Text, descriptionProps, description) : description)) : null), children);
 });
 DetailedCardSectionItem.className = CLASSNAME$h;
 DetailedCardSectionItem.defaultProps = DEFAULT_PROPS$h;
@@ -11056,7 +11079,7 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
   const [[header], content] = partitionComponents(React__default.Children.toArray(children), [isComponent('DetailedCardHeader')]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     value: {
-      theme: Theme.light
+      theme
     }
   }, /*#__PURE__*/React__default.createElement(StyledDetailedCard, _extends$1({}, forwardedProps, {
     className: classNames(BaseDetailedCard.className, className),