carbon-react 142.9.0 → 142.10.0

package/esm/__internal__/character-count/character-count.component.js

@@ -19,11 +19,13 @@ const CharacterCount = ({
   const getFormatNumber = (rawValue, locale) => new Intl.NumberFormat(locale).format(rawValue);
   return /*#__PURE__*/React.createElement(StyledCharacterCountWrapper, null, /*#__PURE__*/React.createElement(VisuallyHiddenHint, {
     "data-element": "visually-hidden-hint",
+    "data-role": "visually-hidden-hint",
     id: visuallyHiddenHintId
   }, l.characterCount.visuallyHiddenHint(getFormatNumber(limit, l.locale()))), /*#__PURE__*/React.createElement(StyledCharacterCount, {
     "aria-hidden": "true",
     isOverLimit: isOverLimit,
-    "data-element": "character-count"
+    "data-element": "character-count",
+    "data-role": "character-count"
   }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/React.createElement(VisuallyHiddenCharacterCount, {
     "data-element": "visually-hidden-character-count",
     "data-role": "visually-hidden-character-count",

package/esm/__internal__/label/label.style.js

@@ -21,7 +21,6 @@ const StyledLabel = styled.label`
       color: var(--colorsUtilityYin030);
     `}
 `;
-const DEFAULT_CONTAINER_WIDTH = 30;
 export const StyledLabelContainer = styled.div`
   display: flex;
   align-items: center;
@@ -43,7 +42,7 @@ export const StyledLabelContainer = styled.div`
         padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-      width: ${width || DEFAULT_CONTAINER_WIDTH}%;
+      width: ${width}%;
     `}
 
   ${({

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -106,6 +106,7 @@ export const DialogFullScreen = ({
   }), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledContent, {
     hasHeader: title !== undefined,
     "data-element": "content",
+    "data-role": "dialog-full-screen-content",
     ref: contentRef,
     disableContentPadding: disableContentPadding
   }, children))));

package/esm/components/duelling-picklist/duelling-picklist.component.js

@@ -40,7 +40,8 @@ export const DuellingPicklist = ({
   });
   return /*#__PURE__*/React.createElement(StyledDuellingPicklistOverlay, _extends({
     disabled: disabled,
-    "data-component": "duelling-picklist"
+    "data-component": "duelling-picklist",
+    "data-role": "duelling-picklist-overlay"
   }, filterStyledSystemMarginProps(rest)), shouldDisplayLabels && /*#__PURE__*/React.createElement(StyledLabelContainer, null, /*#__PURE__*/React.createElement(StyledLabel, {
     "data-element": "picklist-left-label"
   }, leftLabel), /*#__PURE__*/React.createElement(StyledLabel, {
@@ -48,7 +49,7 @@ export const DuellingPicklist = ({
   }, rightLabel)), shouldDisplayControls && /*#__PURE__*/React.createElement(StyledControlsContainer, null, /*#__PURE__*/React.createElement(StyledControl, {
     "data-element": "picklist-left-control"
   }, leftControls), /*#__PURE__*/React.createElement(StyledControl, {
-    "data-element": "picklist-right-label"
+    "data-element": "picklist-right-control"
   }, rightControls)), /*#__PURE__*/React.createElement(FocusContext.Provider, {
     value: {
       setElementToFocus: addElementToFocus,

package/esm/components/duelling-picklist/picklist/picklist.component.js

@@ -57,6 +57,7 @@ export const Picklist = ({
   }, [elementToFocus, index, refs, setElementToFocus]);
   return /*#__PURE__*/React.createElement(StyledPicklist, {
     "data-element": "picklist",
+    "data-role": "picklist",
     scrollVariant: "light",
     onKeyDown: handleKeyDown
   }, isEmpty && /*#__PURE__*/React.createElement(StyledEmptyContainer, null, placeholder), /*#__PURE__*/React.createElement(TransitionGroup, {

package/esm/components/duelling-picklist/picklist-group/picklist-group.component.js

@@ -71,6 +71,7 @@ const PicklistGroup = /*#__PURE__*/React.forwardRef(({
     onKeyDown: handleKeydown,
     "data-element": "picklist-group"
   }, title, /*#__PURE__*/React.createElement(StyledGroupButton, {
+    "data-role": "picklist-group-button",
     buttonType: "secondary",
     destructive: type === "remove",
     iconType: type,

package/esm/components/duelling-picklist/picklist-item/picklist-item.component.js

@@ -75,6 +75,7 @@ const PicklistItem = /*#__PURE__*/React.forwardRef(({
     locked: locked,
     ref: picklistItemNodeRef
   }, children, !locked && /*#__PURE__*/React.createElement(StyledButton, {
+    "data-role": "picklist-item-button",
     buttonType: "primary",
     destructive: type === "remove",
     iconType: type,

package/esm/components/form/__internal__/form-summary.component.js

@@ -18,7 +18,8 @@ export const Summary = ({
   if (messages[`${type}Count`]) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMessagePrefix, null, message?.[0]), /*#__PURE__*/React.createElement(StyledInternalSummary, {
       type: type,
-      "data-element": `${type}s`
+      "data-element": `${type}s`,
+      "data-role": "internal-summary"
     }, /*#__PURE__*/React.createElement(Icon, {
       type: type
     }), /*#__PURE__*/React.createElement("span", null, message?.[1])));
@@ -32,6 +33,7 @@ const FormSummary = ({
   return /*#__PURE__*/React.createElement(StyledFormSummary, {
     showSummary: !!(props.errorCount || props.warningCount),
     "data-element": "form-summary",
+    "data-role": "form-summary",
     fullWidth: fullWidth
   }, /*#__PURE__*/React.createElement(Summary, _extends({
     type: "error"

package/esm/components/form/form.component.js

@@ -47,6 +47,7 @@ export const Form = ({
     isInModal: isInModal
   }, rest), /*#__PURE__*/React.createElement(StyledFormContent, {
     "data-element": "form-content",
+    "data-role": "form-content",
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
@@ -54,20 +55,24 @@ export const Form = ({
     marginBottom: formSpacing[fieldSpacing]
   }, children)), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
+    "data-role": "form-footer",
     className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     isInModal: isInModal
   }, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
+    "data-role": "form-left-buttons",
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/React.createElement(FormSummary, {
     errorCount: errorCount,
     warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
+    "data-role": "form-right-buttons",
     buttonAlignment: buttonAlignment
   }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
+    "data-role": "form-footer",
     className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -16,7 +16,7 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     labelAlign?: "left" | "right";
     /**
      * Custom label id, could be used in combination with aria-labelledby prop of each input,
-     * to make them accesible for screen readers.
+     * to make them accessible for screen readers.
      */
     labelId?: string;
     /** Flag to configure component as mandatory. */

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -57,6 +57,7 @@ const InlineInputs = ({
   return /*#__PURE__*/React.createElement(StyledInlineInputs, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
+    "data-role": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
     labelInline: inlineLabel,
@@ -64,6 +65,7 @@ const InlineInputs = ({
   }, marginProps), renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
+    "data-role": "inline-inputs-container",
     inputWidth: inputWidth
   }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: undefined

package/esm/components/link-preview/link-preview.style.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
-import { StyledPreview } from "../preview/preview.style";
-import { StyledPreviewPlaceholder } from "../preview/__internal__/preview-placeholder.style";
+import { StyledPreview, StyledPreviewPlaceholder } from "../preview/preview.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 import baseTheme from "../../style/themes/base";
 const oldFocusStyling = `

package/esm/components/pager/__internal__/pager-navigation.component.js

@@ -88,6 +88,7 @@ const PagerNavigation = ({
     onKeyUp: ev => Events.isEnterKey(ev) ? handlePageInputChange(ev) : false
   }), /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.ofY(pageCount))) : /*#__PURE__*/React.createElement(StyledPagerNavLabel, {
     "data-element": "current-page-label",
+    "data-role": "current-page-label",
     id: currentPageId,
     "aria-live": "polite"
   }, navLabelString)), !hasOnePage && renderButtonsAfterCount());

package/esm/components/pager/pager.component.js

@@ -125,6 +125,7 @@ export const Pager = ({
   const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
   return /*#__PURE__*/React.createElement(StyledPagerContainer, _extends({
     "data-component": "pager",
+    "data-role": "pager",
     variant: variant
   }, rest), /*#__PURE__*/React.createElement(StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/React.createElement(PagerNavigation, {
     pageSize: currentPageSize,

package/esm/components/pages/pages.component.js

@@ -31,6 +31,7 @@ const Pages = ({
       transitionName,
       timeout: TRANSITION_TIME,
       "data-element": "visible-page",
+      "data-role": "visible-page",
       className: visiblePage.props.className
     };
     return /*#__PURE__*/React.cloneElement(visiblePage, additionalProps);

package/esm/components/preview/preview.component.d.ts

@@ -1,11 +1,21 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { PreviewPlaceholderProps } from "./__internal__/preview-placeholder.component";
-export interface PreviewProps extends Partial<Omit<PreviewPlaceholderProps, "index">>, MarginProps {
+export declare type Shapes = "text" | "rectangle" | "rectangle-round" | "circle";
+export interface PreviewProps extends MarginProps {
     /** Children content to render in the component. */
     children?: React.ReactNode;
-    /** Provides more control over when in a loading state. */
+    /** Sets loading state. */
     loading?: boolean;
+    /** Sets the height of the Preview. */
+    height?: string;
+    /** Sets the width of the Preview. */
+    width?: string;
+    /** The number of placeholder shapes to render. */
+    lines?: number;
+    /** Sets the preview's shape. */
+    shape?: Shapes;
+    /** Removes Preview's animation, is true when prefer reduce-motion is on. */
+    disableAnimation?: boolean;
 }
-export declare const Preview: ({ children, loading, lines, ...props }: PreviewProps) => React.JSX.Element;
+export declare const Preview: ({ children, loading, lines, height, width, shape, disableAnimation, ...props }: PreviewProps) => React.JSX.Element;
 export default Preview;

package/esm/components/preview/preview.component.js

@@ -1,25 +1,37 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from "react";
 import PropTypes from "prop-types";
-import PreviewPlaceholder from "./__internal__/preview-placeholder.component";
-import { StyledPreview } from "./preview.style";
+import { StyledPreview, StyledPreviewPlaceholder } from "./preview.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import useMediaQuery from "../../hooks/useMediaQuery";
 export const Preview = ({
   children,
   loading,
   lines = 1,
+  height,
+  width,
+  shape = "text",
+  disableAnimation,
   ...props
 }) => {
   const marginProps = filterStyledSystemMarginProps(props);
-  const hasPlaceholder = loading === undefined ? !children : loading;
+  const hasPlaceholder = loading ?? !children;
+  const isLastLine = index => {
+    return lines > 1 && lines === index + 1;
+  };
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   if (hasPlaceholder) {
     const placeholders = [];
-    for (let i = 1; i <= lines; i++) {
-      placeholders.push( /*#__PURE__*/React.createElement(PreviewPlaceholder, _extends({
+    for (let i = 0; i < lines; i++) {
+      placeholders.push( /*#__PURE__*/React.createElement(StyledPreviewPlaceholder, _extends({
+        "data-component": "preview",
         "data-role": "preview-placeholder",
         key: i,
-        index: i,
-        lines: lines
+        height: height,
+        width: width,
+        isLastLine: isLastLine(i),
+        shape: shape,
+        disableAnimation: disableAnimation || reduceMotion
       }, props)));
     }
     return /*#__PURE__*/React.createElement(StyledPreview, marginProps, placeholders);

package/esm/components/preview/preview.style.d.ts

@@ -1,2 +1,11 @@
+import { Shapes } from "./preview.component";
 declare const StyledPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledPreview };
+interface StyledPreviewPlaceholderProps {
+    height?: string;
+    width?: string;
+    shape: Shapes;
+    disableAnimation?: boolean;
+    isLastLine: boolean;
+}
+declare const StyledPreviewPlaceholder: import("styled-components").StyledComponent<"span", any, StyledPreviewPlaceholderProps, never>;
+export { StyledPreview, StyledPreviewPlaceholder };

package/esm/components/preview/preview.style.js

@@ -1,12 +1,86 @@
-import styled from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 const StyledPreview = styled.div`
   ${margin}
 `;
+const shimmer = keyframes`
+  0% { 
+    opacity: 0.1 
+  }
+  70% { 
+    opacity: 1
+  }
+  100% { 
+    opacity: 0.1 
+  }
+`;
+function getBorderRadius(shape) {
+  switch (shape) {
+    case "rectangle-round":
+      return "var(--borderRadius400)";
+    case "circle":
+      return "var(--borderRadiusCircle)";
+    default:
+      return "var(--borderRadius100)";
+  }
+}
+function getHeight(shape) {
+  if (shape.includes("rectangle")) {
+    return "var(--sizing400)";
+  }
+  switch (shape) {
+    case "circle":
+      return "var(--sizing700)";
+    default:
+      return "var(--sizing175)";
+  }
+}
+function getWidth(shape) {
+  if (shape.includes("rectangle")) {
+    return "var(--sizing1500)";
+  }
+  return "100%";
+}
+const StyledPreviewPlaceholder = styled.span`
+  ${({
+  shape,
+  disableAnimation,
+  isLastLine,
+  height,
+  width
+}) => {
+  return css`
+      display: block;
+      background: linear-gradient(
+        135deg,
+        var(--colorsUtilityMajor100),
+        var(--colorsUtilityMajor040)
+      );
+      border-radius: ${getBorderRadius(shape)};
+      height: ${height || getHeight(shape)};
+      width: ${width || getWidth(shape)};
+      animation: ${shimmer} 2s ease infinite;
+
+      ${isLastLine && shape === "text" && css`
+        width: calc(${width || getWidth(shape)}*0.8);
+      `}
+
+      ${shape === "circle" && css`
+        width: ${height || getHeight(shape)};
+      `}
+
+      ${disableAnimation && css`
+        animation: none;
+      `}
+
+      & + & {
+        margin-top: 6px;
+      }
+    `;
+}}
+`;
 StyledPreview.defaultProps = {
   theme: baseTheme
 };
-
-// eslint-disable-next-line import/prefer-default-export
-export { StyledPreview };
+export { StyledPreview, StyledPreviewPlaceholder };

package/esm/components/search/search.component.js

@@ -3,7 +3,6 @@ import React, { useState, useRef, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledSearch from "./search.style";
 import StyledSearchButton from "./search-button.style";
 import Icon from "../icon";
@@ -141,7 +140,9 @@ const Search = /*#__PURE__*/React.forwardRef(({
     showSearchButton: !!searchButton,
     variant: variant,
     mb: 0
-  }, filterStyledSystemMarginProps(rest), tagComponent("search", rest), {
+  }, filterStyledSystemMarginProps(rest), {
+    "data-component": "search",
+    "data-role": "search",
     id: id,
     name: name
   }, rest), /*#__PURE__*/React.createElement(Textbox, {

package/esm/components/tile-select/__internal__/accordion/accordion.component.js

@@ -19,10 +19,12 @@ const Accordion = ({
   return /*#__PURE__*/React.createElement(StyledContentContainer, {
     "aria-expanded": expanded,
     isExpanded: expanded,
-    maxHeight: contentHeight
+    maxHeight: contentHeight,
+    "data-role": "tile-select-accordion-content-container"
   }, /*#__PURE__*/React.createElement(StyledContent, {
     role: "region",
     "data-element": "tile-select-accordion-content",
+    "data-role": "tile-select-accordion-content",
     ref: contentRef,
     id: contentId,
     "aria-labelledby": controlId

package/esm/components/tile-select/tile-select-group/tile-select-group.component.js

@@ -24,7 +24,8 @@ export const TileSelectGroup = ({
       name: name,
       onBlur: onBlur,
       onChange: onChange,
-      value: value
+      value: value,
+      "data-role": "tile-select-group-radio-button-mapper"
     }, React.Children.map(children, child => {
       if ( /*#__PURE__*/React.isValidElement(child)) {
         return /*#__PURE__*/React.cloneElement(child, {

package/esm/components/tile-select/tile-select.component.js

@@ -50,6 +50,7 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
     }
   });
   const renderActionButton = () => /*#__PURE__*/React.createElement(StyledDeselectWrapper, {
+    "data-role": "deselect-wrapper",
     hasActionAdornment: !!actionButtonAdornment
   }, customActionButton && customActionButton(handleDeselect), !customActionButton && checked && /*#__PURE__*/React.createElement(Button, {
     buttonType: "tertiary",
@@ -70,6 +71,7 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
     className: className,
     disabled: disabled
   }, tagComponent("tile-select", rest), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledFocusWrapper, {
+    "data-role": "focus-wrapper",
     hasFocus: hasFocus,
     checked: checked
   }, /*#__PURE__*/React.createElement(StyledTileSelectInput, _extends({
@@ -104,13 +106,18 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
   }, title), subtitle && /*#__PURE__*/React.createElement(StyledSubtitle, {
     as: checkPropTypeIsNode(subtitle) ? "div" : undefined
   }, subtitle), titleAdornment && /*#__PURE__*/React.createElement(StyledAdornment, {
-    hasAdditionalInformation: !!additionalInformation
+    hasAdditionalInformation: !!additionalInformation,
+    "data-role": "title-adornment"
   }, titleAdornment && /*#__PURE__*/React.createElement("div", null, titleAdornment))), additionalInformation && /*#__PURE__*/React.createElement("div", null, additionalInformation), /*#__PURE__*/React.createElement(StyledDescription, {
     as: checkPropTypeIsNode(description) ? "div" : undefined
-  }, description), footer && /*#__PURE__*/React.createElement(StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/React.createElement(StyledAccordionFooterWrapper, {
-    accordionExpanded: accordionExpanded
+  }, description), footer && /*#__PURE__*/React.createElement(StyledFooterWrapper, {
+    "data-role": "tile-select-footer"
+  }, footer), accordionContent && accordionControl && /*#__PURE__*/React.createElement(StyledAccordionFooterWrapper, {
+    accordionExpanded: accordionExpanded,
+    "data-role": "accordion-footer"
   }, accordionControl(controlId, contentId))), prefixAdornment && /*#__PURE__*/React.createElement(Box, {
     "data-element": "prefix-adornment",
+    "data-role": "prefix-adornment",
     mr: 3,
     opacity: disabled ? "0.3" : undefined
   }, prefixAdornment))), accordionContent && /*#__PURE__*/React.createElement(Accordion, {

package/lib/__internal__/character-count/character-count.component.js

@@ -26,11 +26,13 @@ const CharacterCount = ({
   const getFormatNumber = (rawValue, locale) => new Intl.NumberFormat(locale).format(rawValue);
   return /*#__PURE__*/_react.default.createElement(_characterCount.StyledCharacterCountWrapper, null, /*#__PURE__*/_react.default.createElement(_characterCount.VisuallyHiddenHint, {
     "data-element": "visually-hidden-hint",
+    "data-role": "visually-hidden-hint",
     id: visuallyHiddenHintId
   }, l.characterCount.visuallyHiddenHint(getFormatNumber(limit, l.locale()))), /*#__PURE__*/_react.default.createElement(_characterCount.StyledCharacterCount, {
     "aria-hidden": "true",
     isOverLimit: isOverLimit,
-    "data-element": "character-count"
+    "data-element": "character-count",
+    "data-role": "character-count"
   }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/_react.default.createElement(_characterCount.VisuallyHiddenCharacterCount, {
     "data-element": "visually-hidden-character-count",
     "data-role": "visually-hidden-character-count",

package/lib/__internal__/label/label.style.js

@@ -29,7 +29,6 @@ const StyledLabel = _styledComponents.default.label`
       color: var(--colorsUtilityYin030);
     `}
 `;
-const DEFAULT_CONTAINER_WIDTH = 30;
 const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.default.div`
   display: flex;
   align-items: center;
@@ -51,7 +50,7 @@ const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.de
         padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-      width: ${width || DEFAULT_CONTAINER_WIDTH}%;
+      width: ${width}%;
     `}
 
   ${({

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -115,6 +115,7 @@ const DialogFullScreen = ({
   }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_content.default, {
     hasHeader: title !== undefined,
     "data-element": "content",
+    "data-role": "dialog-full-screen-content",
     ref: contentRef,
     disableContentPadding: disableContentPadding
   }, children))));

package/lib/components/duelling-picklist/duelling-picklist.component.js

@@ -49,7 +49,8 @@ const DuellingPicklist = ({
   });
   return /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledDuellingPicklistOverlay, _extends({
     disabled: disabled,
-    "data-component": "duelling-picklist"
+    "data-component": "duelling-picklist",
+    "data-role": "duelling-picklist-overlay"
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), shouldDisplayLabels && /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledLabelContainer, null, /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledLabel, {
     "data-element": "picklist-left-label"
   }, leftLabel), /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledLabel, {
@@ -57,7 +58,7 @@ const DuellingPicklist = ({
   }, rightLabel)), shouldDisplayControls && /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledControlsContainer, null, /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledControl, {
     "data-element": "picklist-left-control"
   }, leftControls), /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledControl, {
-    "data-element": "picklist-right-label"
+    "data-element": "picklist-right-control"
   }, rightControls)), /*#__PURE__*/_react.default.createElement(_duellingPicklist2.default.Provider, {
     value: {
       setElementToFocus: addElementToFocus,

package/lib/components/duelling-picklist/picklist/picklist.component.js

@@ -66,6 +66,7 @@ const Picklist = ({
   }, [elementToFocus, index, refs, setElementToFocus]);
   return /*#__PURE__*/_react.default.createElement(_picklist.StyledPicklist, {
     "data-element": "picklist",
+    "data-role": "picklist",
     scrollVariant: "light",
     onKeyDown: handleKeyDown
   }, isEmpty && /*#__PURE__*/_react.default.createElement(_picklist.StyledEmptyContainer, null, placeholder), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {

package/lib/components/duelling-picklist/picklist-group/picklist-group.component.js

@@ -80,6 +80,7 @@ const PicklistGroup = exports.PicklistGroup = /*#__PURE__*/_react.default.forwar
     onKeyDown: handleKeydown,
     "data-element": "picklist-group"
   }, title, /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledGroupButton, {
+    "data-role": "picklist-group-button",
     buttonType: "secondary",
     destructive: type === "remove",
     iconType: type,

package/lib/components/duelling-picklist/picklist-item/picklist-item.component.js

@@ -84,6 +84,7 @@ const PicklistItem = exports.PicklistItem = /*#__PURE__*/_react.default.forwardR
     locked: locked,
     ref: picklistItemNodeRef
   }, children, !locked && /*#__PURE__*/_react.default.createElement(_picklistItem.StyledButton, {
+    "data-role": "picklist-item-button",
     buttonType: "primary",
     destructive: type === "remove",
     iconType: type,

package/lib/components/form/__internal__/form-summary.component.js

@@ -27,7 +27,8 @@ const Summary = ({
   if (messages[`${type}Count`]) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_formSummary.StyledMessagePrefix, null, message?.[0]), /*#__PURE__*/_react.default.createElement(_formSummary.StyledInternalSummary, {
       type: type,
-      "data-element": `${type}s`
+      "data-element": `${type}s`,
+      "data-role": "internal-summary"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: type
     }), /*#__PURE__*/_react.default.createElement("span", null, message?.[1])));
@@ -42,6 +43,7 @@ const FormSummary = ({
   return /*#__PURE__*/_react.default.createElement(_formSummary.StyledFormSummary, {
     showSummary: !!(props.errorCount || props.warningCount),
     "data-element": "form-summary",
+    "data-role": "form-summary",
     fullWidth: fullWidth
   }, /*#__PURE__*/_react.default.createElement(Summary, _extends({
     type: "error"

package/lib/components/form/form.component.js

@@ -56,6 +56,7 @@ const Form = ({
     isInModal: isInModal
   }, rest), /*#__PURE__*/_react.default.createElement(_form.StyledFormContent, {
     "data-element": "form-content",
+    "data-role": "form-content",
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
@@ -63,20 +64,24 @@ const Form = ({
     marginBottom: _form2.formSpacing[fieldSpacing]
   }, children)), !fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
+    "data-role": "form-footer",
     className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     isInModal: isInModal
   }, footerPadding), leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
+    "data-role": "form-left-buttons",
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/_react.default.createElement(_formSummary.default, {
     errorCount: errorCount,
     warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledRightButtons, {
+    "data-role": "form-right-buttons",
     buttonAlignment: buttonAlignment
   }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
+    "data-role": "form-footer",
     className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,

package/lib/components/inline-inputs/inline-inputs.component.d.ts

@@ -16,7 +16,7 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     labelAlign?: "left" | "right";
     /**
      * Custom label id, could be used in combination with aria-labelledby prop of each input,
-     * to make them accesible for screen readers.
+     * to make them accessible for screen readers.
      */
     labelId?: string;
     /** Flag to configure component as mandatory. */

package/lib/components/inline-inputs/inline-inputs.component.js

@@ -66,6 +66,7 @@ const InlineInputs = ({
   return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
+    "data-role": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
     labelInline: inlineLabel,
@@ -73,6 +74,7 @@ const InlineInputs = ({
   }, marginProps), renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
+    "data-role": "inline-inputs-container",
     inputWidth: inputWidth
   }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
     marginBottom: undefined

package/lib/components/link-preview/link-preview.style.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledUrl = exports.StyledTitle = exports.StyledPreviewWrapper = exports.StyledLinkPreview = exports.StyledDescription = exports.StyledCloseIconWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _preview = require("../preview/preview.style");
-var _previewPlaceholder = require("../preview/__internal__/preview-placeholder.style");
 var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -64,11 +63,11 @@ const StyledPreviewWrapper = exports.StyledPreviewWrapper = _styledComponents.de
       }
     `}
 
-  ${_previewPlaceholder.StyledPreviewPlaceholder}:first-of-type {
+  ${_preview.StyledPreviewPlaceholder}:first-of-type {
     margin-top: 8px;
   }
 
-  ${_previewPlaceholder.StyledPreviewPlaceholder}:not(:first-of-type) {
+  ${_preview.StyledPreviewPlaceholder}:not(:first-of-type) {
     margin-top: 16px;
   }
 `;

package/lib/components/pager/__internal__/pager-navigation.component.js

@@ -97,6 +97,7 @@ const PagerNavigation = ({
     onKeyUp: ev => _events.default.isEnterKey(ev) ? handlePageInputChange(ev) : false
   }), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.ofY(pageCount))) : /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavLabel, {
     "data-element": "current-page-label",
+    "data-role": "current-page-label",
     id: currentPageId,
     "aria-live": "polite"
   }, navLabelString)), !hasOnePage && renderButtonsAfterCount());

package/lib/components/pager/pager.component.js

@@ -134,6 +134,7 @@ const Pager = ({
   const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
   return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerContainer, _extends({
     "data-component": "pager",
+    "data-role": "pager",
     variant: variant
   }, rest), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/_react.default.createElement(_pagerNavigation.default, {
     pageSize: currentPageSize,

package/lib/components/pages/pages.component.js

@@ -46,6 +46,7 @@ const Pages = ({
       transitionName,
       timeout: TRANSITION_TIME,
       "data-element": "visible-page",
+      "data-role": "visible-page",
       className: visiblePage.props.className
     };
     return /*#__PURE__*/_react.default.cloneElement(visiblePage, additionalProps);

package/lib/components/preview/preview.component.d.ts

@@ -1,11 +1,21 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { PreviewPlaceholderProps } from "./__internal__/preview-placeholder.component";
-export interface PreviewProps extends Partial<Omit<PreviewPlaceholderProps, "index">>, MarginProps {
+export declare type Shapes = "text" | "rectangle" | "rectangle-round" | "circle";
+export interface PreviewProps extends MarginProps {
     /** Children content to render in the component. */
     children?: React.ReactNode;
-    /** Provides more control over when in a loading state. */
+    /** Sets loading state. */
     loading?: boolean;
+    /** Sets the height of the Preview. */
+    height?: string;
+    /** Sets the width of the Preview. */
+    width?: string;
+    /** The number of placeholder shapes to render. */
+    lines?: number;
+    /** Sets the preview's shape. */
+    shape?: Shapes;
+    /** Removes Preview's animation, is true when prefer reduce-motion is on. */
+    disableAnimation?: boolean;
 }
-export declare const Preview: ({ children, loading, lines, ...props }: PreviewProps) => React.JSX.Element;
+export declare const Preview: ({ children, loading, lines, height, width, shape, disableAnimation, ...props }: PreviewProps) => React.JSX.Element;
 export default Preview;

package/lib/components/preview/preview.component.js

@@ -6,27 +6,39 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Preview = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _previewPlaceholder = _interopRequireDefault(require("./__internal__/preview-placeholder.component"));
 var _preview = require("./preview.style");
 var _utils = require("../../style/utils");
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Preview = ({
   children,
   loading,
   lines = 1,
+  height,
+  width,
+  shape = "text",
+  disableAnimation,
   ...props
 }) => {
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
-  const hasPlaceholder = loading === undefined ? !children : loading;
+  const hasPlaceholder = loading ?? !children;
+  const isLastLine = index => {
+    return lines > 1 && lines === index + 1;
+  };
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   if (hasPlaceholder) {
     const placeholders = [];
-    for (let i = 1; i <= lines; i++) {
-      placeholders.push( /*#__PURE__*/_react.default.createElement(_previewPlaceholder.default, _extends({
+    for (let i = 0; i < lines; i++) {
+      placeholders.push( /*#__PURE__*/_react.default.createElement(_preview.StyledPreviewPlaceholder, _extends({
+        "data-component": "preview",
         "data-role": "preview-placeholder",
         key: i,
-        index: i,
-        lines: lines
+        height: height,
+        width: width,
+        isLastLine: isLastLine(i),
+        shape: shape,
+        disableAnimation: disableAnimation || reduceMotion
       }, props)));
     }
     return /*#__PURE__*/_react.default.createElement(_preview.StyledPreview, marginProps, placeholders);

package/lib/components/preview/preview.style.d.ts

@@ -1,2 +1,11 @@
+import { Shapes } from "./preview.component";
 declare const StyledPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledPreview };
+interface StyledPreviewPlaceholderProps {
+    height?: string;
+    width?: string;
+    shape: Shapes;
+    disableAnimation?: boolean;
+    isLastLine: boolean;
+}
+declare const StyledPreviewPlaceholder: import("styled-components").StyledComponent<"span", any, StyledPreviewPlaceholderProps, never>;
+export { StyledPreview, StyledPreviewPlaceholder };

package/lib/components/preview/preview.style.js

@@ -3,16 +3,92 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledPreview = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+exports.StyledPreviewPlaceholder = exports.StyledPreview = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledPreview = exports.StyledPreview = _styledComponents.default.div`
   ${_styledSystem.margin}
 `;
+const shimmer = (0, _styledComponents.keyframes)`
+  0% { 
+    opacity: 0.1 
+  }
+  70% { 
+    opacity: 1
+  }
+  100% { 
+    opacity: 0.1 
+  }
+`;
+function getBorderRadius(shape) {
+  switch (shape) {
+    case "rectangle-round":
+      return "var(--borderRadius400)";
+    case "circle":
+      return "var(--borderRadiusCircle)";
+    default:
+      return "var(--borderRadius100)";
+  }
+}
+function getHeight(shape) {
+  if (shape.includes("rectangle")) {
+    return "var(--sizing400)";
+  }
+  switch (shape) {
+    case "circle":
+      return "var(--sizing700)";
+    default:
+      return "var(--sizing175)";
+  }
+}
+function getWidth(shape) {
+  if (shape.includes("rectangle")) {
+    return "var(--sizing1500)";
+  }
+  return "100%";
+}
+const StyledPreviewPlaceholder = exports.StyledPreviewPlaceholder = _styledComponents.default.span`
+  ${({
+  shape,
+  disableAnimation,
+  isLastLine,
+  height,
+  width
+}) => {
+  return (0, _styledComponents.css)`
+      display: block;
+      background: linear-gradient(
+        135deg,
+        var(--colorsUtilityMajor100),
+        var(--colorsUtilityMajor040)
+      );
+      border-radius: ${getBorderRadius(shape)};
+      height: ${height || getHeight(shape)};
+      width: ${width || getWidth(shape)};
+      animation: ${shimmer} 2s ease infinite;
+
+      ${isLastLine && shape === "text" && (0, _styledComponents.css)`
+        width: calc(${width || getWidth(shape)}*0.8);
+      `}
+
+      ${shape === "circle" && (0, _styledComponents.css)`
+        width: ${height || getHeight(shape)};
+      `}
+
+      ${disableAnimation && (0, _styledComponents.css)`
+        animation: none;
+      `}
+
+      & + & {
+        margin-top: 6px;
+      }
+    `;
+}}
+`;
 StyledPreview.defaultProps = {
   theme: _base.default
-};
-
-// eslint-disable-next-line import/prefer-default-export
+};

package/lib/components/search/search.component.js

@@ -8,7 +8,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _utils = require("../../style/utils");
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _search = _interopRequireDefault(require("./search.style"));
 var _searchButton = _interopRequireDefault(require("./search-button.style"));
 var _icon = _interopRequireDefault(require("../icon"));
@@ -150,7 +149,9 @@ const Search = exports.Search = /*#__PURE__*/_react.default.forwardRef(({
     showSearchButton: !!searchButton,
     variant: variant,
     mb: 0
-  }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _tags.default)("search", rest), {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest), {
+    "data-component": "search",
+    "data-role": "search",
     id: id,
     name: name
   }, rest), /*#__PURE__*/_react.default.createElement(_textbox.default, {

package/lib/components/tile-select/__internal__/accordion/accordion.component.js

@@ -28,10 +28,12 @@ const Accordion = ({
   return /*#__PURE__*/_react.default.createElement(_accordion.StyledContentContainer, {
     "aria-expanded": expanded,
     isExpanded: expanded,
-    maxHeight: contentHeight
+    maxHeight: contentHeight,
+    "data-role": "tile-select-accordion-content-container"
   }, /*#__PURE__*/_react.default.createElement(_accordion.StyledContent, {
     role: "region",
     "data-element": "tile-select-accordion-content",
+    "data-role": "tile-select-accordion-content",
     ref: contentRef,
     id: contentId,
     "aria-labelledby": controlId

package/lib/components/tile-select/tile-select-group/tile-select-group.component.js

@@ -31,7 +31,8 @@ const TileSelectGroup = ({
       name: name,
       onBlur: onBlur,
       onChange: onChange,
-      value: value
+      value: value,
+      "data-role": "tile-select-group-radio-button-mapper"
     }, _react.default.Children.map(children, child => {
       if ( /*#__PURE__*/_react.default.isValidElement(child)) {
         return /*#__PURE__*/_react.default.cloneElement(child, {

package/lib/components/tile-select/tile-select.component.js

@@ -59,6 +59,7 @@ const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
     }
   });
   const renderActionButton = () => /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDeselectWrapper, {
+    "data-role": "deselect-wrapper",
     hasActionAdornment: !!actionButtonAdornment
   }, customActionButton && customActionButton(handleDeselect), !customActionButton && checked && /*#__PURE__*/_react.default.createElement(_button.default, {
     buttonType: "tertiary",
@@ -79,6 +80,7 @@ const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
     className: className,
     disabled: disabled
   }, (0, _tags.default)("tile-select", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFocusWrapper, {
+    "data-role": "focus-wrapper",
     hasFocus: hasFocus,
     checked: checked
   }, /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTileSelectInput, _extends({
@@ -113,13 +115,18 @@ const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, title), subtitle && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledSubtitle, {
     as: checkPropTypeIsNode(subtitle) ? "div" : undefined
   }, subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, {
-    hasAdditionalInformation: !!additionalInformation
+    hasAdditionalInformation: !!additionalInformation,
+    "data-role": "title-adornment"
   }, titleAdornment && /*#__PURE__*/_react.default.createElement("div", null, titleAdornment))), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, {
     as: checkPropTypeIsNode(description) ? "div" : undefined
-  }, description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAccordionFooterWrapper, {
-    accordionExpanded: accordionExpanded
+  }, description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, {
+    "data-role": "tile-select-footer"
+  }, footer), accordionContent && accordionControl && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAccordionFooterWrapper, {
+    accordionExpanded: accordionExpanded,
+    "data-role": "accordion-footer"
   }, accordionControl(controlId, contentId))), prefixAdornment && /*#__PURE__*/_react.default.createElement(_box.default, {
     "data-element": "prefix-adornment",
+    "data-role": "prefix-adornment",
     mr: 3,
     opacity: disabled ? "0.3" : undefined
   }, prefixAdornment))), accordionContent && /*#__PURE__*/_react.default.createElement(_accordion.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.9.0",
+  "version": "142.10.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -56,7 +56,7 @@
     "styled-components": "^4.4.1"
   },
   "devDependencies": {
-    "@axe-core/playwright": "~4.9.0",
+    "@axe-core/playwright": "~4.10.0",
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.3",
     "@babel/eslint-parser": "^7.23.3",
@@ -69,8 +69,8 @@
     "@babel/types": "^7.23.4",
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
-    "@playwright/experimental-ct-react17": "~1.43.0",
-    "@playwright/test": "~1.43.0",
+    "@playwright/experimental-ct-react17": "~1.47.0",
+    "@playwright/test": "~1.47.0",
     "@sage/design-tokens": "~4.29.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",

package/esm/components/preview/__internal__/preview-placeholder.component.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { StyledPreviewPlaceholderProps } from "./preview-placeholder.style";
-export interface PreviewPlaceholderProps extends StyledPreviewPlaceholderProps {
-    index: number;
-    /** The number of lines to render. */
-    lines: number;
-    loading?: boolean;
-}
-declare const PreviewPlaceholder: ({ height, index, lines, width, ...props }: PreviewPlaceholderProps) => React.JSX.Element;
-export default PreviewPlaceholder;

package/esm/components/preview/__internal__/preview-placeholder.component.js

@@ -1,19 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from "react";
-import PropTypes from "prop-types";
-import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import { StyledPreviewPlaceholder } from "./preview-placeholder.style";
-const PreviewPlaceholder = ({
-  height,
-  index,
-  lines,
-  width,
-  ...props
-}) => {
-  const isLastLine = lines > 1 && lines === index;
-  return /*#__PURE__*/React.createElement(StyledPreviewPlaceholder, _extends({
-    height: height,
-    width: !width && isLastLine ? "80%" : width
-  }, tagComponent("preview", props)));
-};
-export default PreviewPlaceholder;

package/esm/components/preview/__internal__/preview-placeholder.style.d.ts

@@ -1,7 +0,0 @@
-export interface StyledPreviewPlaceholderProps {
-    /** A custom height to be applied to the component. */
-    height?: string;
-    /** A custom width */
-    width?: string;
-}
-export declare const StyledPreviewPlaceholder: import("styled-components").StyledComponent<"span", any, StyledPreviewPlaceholderProps, never>;

package/esm/components/preview/__internal__/preview-placeholder.style.js

@@ -1,23 +0,0 @@
-import styled, { keyframes } from "styled-components";
-const shimmer = keyframes`
-  0% { opacity:0.1 }
-  70% { opacity:0.6 }
-  100% { opacity:0.1 }
-`;
-export const StyledPreviewPlaceholder = styled.span`
-  animation: ${shimmer} 2s ease infinite;
-  background: var(--colorsUtilityMajor150);
-  display: block;
-  height: ${({
-  height
-}) => height || "15px"};
-  opacity: 0.6;
-  width: ${({
-  width
-}) => width || "100%"};
-  border-radius: var(--borderRadius050);
-
-  & + & {
-    margin-top: 3px;
-  }
-`;

package/lib/components/preview/__internal__/preview-placeholder.component.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { StyledPreviewPlaceholderProps } from "./preview-placeholder.style";
-export interface PreviewPlaceholderProps extends StyledPreviewPlaceholderProps {
-    index: number;
-    /** The number of lines to render. */
-    lines: number;
-    loading?: boolean;
-}
-declare const PreviewPlaceholder: ({ height, index, lines, width, ...props }: PreviewPlaceholderProps) => React.JSX.Element;
-export default PreviewPlaceholder;

package/lib/components/preview/__internal__/preview-placeholder.component.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
-var _previewPlaceholder = require("./preview-placeholder.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const PreviewPlaceholder = ({
-  height,
-  index,
-  lines,
-  width,
-  ...props
-}) => {
-  const isLastLine = lines > 1 && lines === index;
-  return /*#__PURE__*/_react.default.createElement(_previewPlaceholder.StyledPreviewPlaceholder, _extends({
-    height: height,
-    width: !width && isLastLine ? "80%" : width
-  }, (0, _tags.default)("preview", props)));
-};
-var _default = exports.default = PreviewPlaceholder;

package/lib/components/preview/__internal__/preview-placeholder.style.d.ts

@@ -1,7 +0,0 @@
-export interface StyledPreviewPlaceholderProps {
-    /** A custom height to be applied to the component. */
-    height?: string;
-    /** A custom width */
-    width?: string;
-}
-export declare const StyledPreviewPlaceholder: import("styled-components").StyledComponent<"span", any, StyledPreviewPlaceholderProps, never>;

package/lib/components/preview/__internal__/preview-placeholder.style.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledPreviewPlaceholder = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const shimmer = (0, _styledComponents.keyframes)`
-  0% { opacity:0.1 }
-  70% { opacity:0.6 }
-  100% { opacity:0.1 }
-`;
-const StyledPreviewPlaceholder = exports.StyledPreviewPlaceholder = _styledComponents.default.span`
-  animation: ${shimmer} 2s ease infinite;
-  background: var(--colorsUtilityMajor150);
-  display: block;
-  height: ${({
-  height
-}) => height || "15px"};
-  opacity: 0.6;
-  width: ${({
-  width
-}) => width || "100%"};
-  border-radius: var(--borderRadius050);
-
-  & + & {
-    margin-top: 3px;
-  }
-`;