carbon-react 154.3.2 → 154.3.3-beta.1

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

@@ -1,202 +1 @@
-import styled, { css } from "styled-components";
-import baseTheme from "../../style/themes/base";
-import StyledIcon from "../icon/icon.style";
-import StyledButton from "../button/button.style";
-const colorMap = {
-  light: variant => {
-    let color = "var(--colorsActionMajor500)";
-    let hoverColor = "var(--colorsActionMajor600)";
-    if (variant === "negative") {
-      color = "var(--colorsSemanticNegative500)";
-      hoverColor = "var(--colorsSemanticNegative600)";
-    } else if (variant === "neutral") {
-      color = "var(--colorsActionMajorYin090)";
-    }
-    return {
-      color,
-      hoverColor,
-      disabledColor: "var(--colorsActionMajorYin030)"
-    };
-  },
-  dark: variant => {
-    let color = "var(--colorsActionMajor350)";
-    let hoverColor = "var(--colorsActionMajor450)";
-    if (variant === "negative") {
-      color = "var(--colorsSemanticNegative350)";
-      hoverColor = "var(--colorsSemanticNegative450)";
-    } else if (variant === "neutral") {
-      color = "var(--colorsActionMinor100)";
-    }
-    return {
-      color,
-      hoverColor,
-      disabledColor: "var(--colorsActionMajorYang030)"
-    };
-  }
-};
-const StyledLink = styled.span`
-  ${({
-  isSkipLink,
-  theme,
-  iconAlign,
-  hasContent,
-  disabled,
-  variant,
-  isDarkBackground,
-  isMenuItem,
-  hasFocus
-}) => {
-  const colorMapKey = isDarkBackground ? "dark" : "light";
-  const {
-    color,
-    hoverColor,
-    disabledColor
-  } = colorMap[colorMapKey](variant);
-  return css`
-      ${isSkipLink && css`
-        a {
-          position: absolute;
-          padding-left: var(--spacing300);
-          padding-right: var(--spacing300);
-          line-height: var(--sizing600);
-          left: -999em;
-          z-index: ${theme.zIndex.aboveAll};
-          border: 3px solid var(--colorsUtilityYin100);
-          box-shadow: var(--boxShadow300);
-          border-radius: var(--spacing000) var(--spacing100) var(--spacing100)
-            var(--spacing000);
-          font-size: var(--fontSizes100);
-          color: var(--colorsUtilityYin090);
-
-          &:hover {
-            cursor: pointer;
-            color: var(--colorsUtilityYin090);
-
-            ${StyledIcon} {
-              color: var(--colorsActionMajor600);
-            }
-          }
-
-          &:focus {
-            background-color: var(--colorsSemanticFocus500);
-            text-decoration: underline var(--colorsUtilityYin100);
-            text-decoration-thickness: 4px;
-            text-underline-offset: 3px;
-            -webkit-text-decoration: underline var(--colorsUtilityYin100);
-            -webkit-text-decoration-thickness: 4px;
-            -webkit-text-underline-offset: 3px;
-          }
-        }
-
-        a:focus {
-          top: var(--spacing100);
-          left: var(--spacing000);
-        }
-      `}
-
-      ${!isSkipLink && css`
-        > a,
-        > button {
-          font-size: var(--fontSizes100);
-
-          ${!disabled && css`
-            color: ${color};
-            ${StyledIcon} {
-              color: ${color};
-            }
-
-            &:hover {
-              color: ${hoverColor};
-
-              > ${StyledIcon} {
-                color: ${hoverColor};
-              }
-            }
-
-            &:focus {
-              background-color: var(--colorsSemanticFocus250);
-              border-radius: var(--borderRadius025);
-            }
-          `}
-
-          ${disabled && css`
-            color: ${disabledColor};
-            &:hover,
-            &:focus {
-              color: ${disabledColor};
-            }
-          `}
-        }
-      `}
-
-      ${!disabled && css`
-        > a:any-link:hover,
-        > button:hover {
-          cursor: pointer;
-        }
-      `}
-
-      > a,
-      > button {
-        text-decoration: ${hasContent ? "underline" : "none"};
-        ${isMenuItem && "display: inline-block;"}
-
-        > ${StyledIcon} {
-          display: ${hasContent ? "inline-block" : "inline"};
-          position: relative;
-          vertical-align: middle;
-          ${iconAlign === "left" && css`
-            margin-right: ${hasContent ? "var(--spacing050)" : 0};
-          `}
-          ${iconAlign === "right" && css`
-            margin-right: 0;
-            margin-left: ${hasContent ? "var(--spacing100)" : 0};
-          `}
-        }
-
-        &:focus {
-          color: var(--colorsActionMajorYin090);
-          outline: none;
-
-          ${StyledIcon} {
-            color: var(--colorsActionMajorYin090);
-          }
-        }
-
-        ${disabled && css`
-          &:hover,
-          &:focus {
-            cursor: not-allowed;
-          }
-        `}
-      }
-
-      ${!isSkipLink && !disabled && hasFocus && css`
-        > a,
-        > button {
-          outline: none;
-          text-decoration: none;
-          border-bottom-left-radius: var(--borderRadius000);
-          border-bottom-right-radius: var(--borderRadius000);
-        }
-        max-width: fit-content;
-        box-shadow: 0 var(--spacing050) 0 0 var(--colorsUtilityYin090);
-        border-bottom-left-radius: var(--borderRadius025);
-        border-bottom-right-radius: var(--borderRadius025);
-      `}
-
-      > button, ${StyledButton}:not(.search-button) {
-        background-color: transparent;
-        border: none;
-        padding: 0;
-      }
-    `;
-}}
-`;
-StyledLink.defaultProps = {
-  theme: baseTheme,
-  disabled: false,
-  hasContent: true
-};
-const StyledContent = styled.span``;
-export { StyledLink, StyledContent };
+import o,{css as r}from"styled-components";import t from"../../style/themes/base/index.js";import i from"../icon/icon.style.js";import n from"../button/button.style.js";const a={light:o=>{let r="var(--colorsActionMajor500)",t="var(--colorsActionMajor600)";return"negative"===o?(r="var(--colorsSemanticNegative500)",t="var(--colorsSemanticNegative600)"):"neutral"===o&&(r="var(--colorsActionMajorYin090)"),{color:r,hoverColor:t,disabledColor:"var(--colorsActionMajorYin030)"}},dark:o=>{let r="var(--colorsActionMajor350)",t="var(--colorsActionMajor450)";return"negative"===o?(r="var(--colorsSemanticNegative350)",t="var(--colorsSemanticNegative450)"):"neutral"===o&&(r="var(--colorsActionMinor100)"),{color:r,hoverColor:t,disabledColor:"var(--colorsActionMajorYang030)"}}},e=o.span.withConfig({displayName:"link.style__StyledLink",componentId:"sc-2d34dd4a-0"})(["",""],(({isSkipLink:o,theme:t,iconAlign:e,hasContent:l,disabled:s,variant:c,isDarkBackground:d,isMenuItem:v,hasFocus:u})=>{const b=d?"dark":"light",{color:g,hoverColor:p,disabledColor:h}=a[b](c);return r([""," "," "," > a,> button{text-decoration:",";"," > ","{display:",";position:relative;vertical-align:middle;"," ","}&:focus{color:var(--colorsActionMajorYin090);outline:none;","{color:var(--colorsActionMajorYin090);}}","}"," > button,",":not(.search-button){background-color:transparent;border:none;padding:0;}"],o&&r(["a{position:absolute;padding-left:var(--spacing300);padding-right:var(--spacing300);line-height:var(--sizing600);left:-999em;z-index:",";border:3px solid var(--colorsUtilityYin100);box-shadow:var(--boxShadow300);border-radius:var(--spacing000) var(--spacing100) var(--spacing100) var(--spacing000);font-size:var(--fontSizes100);color:var(--colorsUtilityYin090);&:hover{cursor:pointer;color:var(--colorsUtilityYin090);","{color:var(--colorsActionMajor600);}}&:focus{background-color:var(--colorsSemanticFocus500);text-decoration:underline var(--colorsUtilityYin100);text-decoration-thickness:4px;text-underline-offset:3px;-webkit-text-decoration:underline var(--colorsUtilityYin100);-webkit-text-decoration-thickness:4px;-webkit-text-underline-offset:3px;}}a:focus{top:var(--spacing100);left:var(--spacing000);}"],t.zIndex.aboveAll,i),!o&&r(["> a,> button{font-size:var(--fontSizes100);"," ","}"],!s&&r(["color:",";","{color:",";}&:hover{color:",";> ","{color:",";}}&:focus{background-color:var(--colorsSemanticFocus250);border-radius:var(--borderRadius025);}"],g,i,g,p,i,p),s&&r(["color:",";&:hover,&:focus{color:",";}"],h,h)),!s&&r(["> a:any-link:hover,> button:hover{cursor:pointer;}"]),l?"underline":"none",v&&"display: inline-block;",i,l?"inline-block":"inline","left"===e&&r(["margin-right:",";"],l?"var(--spacing050)":0),"right"===e&&r(["margin-right:0;margin-left:",";"],l?"var(--spacing100)":0),i,s&&r(["cursor:not-allowed;"]),!o&&!s&&u&&r(["> a,> button{outline:none;text-decoration:none;border-bottom-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);}max-width:fit-content;box-shadow:0 var(--spacing050) 0 0 var(--colorsUtilityYin090);border-bottom-left-radius:var(--borderRadius025);border-bottom-right-radius:var(--borderRadius025);"]),n)}));e.defaultProps={theme:t,disabled:!1,hasContent:!0};const l=o.span.withConfig({displayName:"link.style__StyledContent",componentId:"sc-2d34dd4a-1"})([""]);export{l as StyledContent,e as StyledLink};

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

@@ -1,49 +1 @@
-import React from "react";
-import styled from "styled-components";
-export const StyledPlaceHolder = styled.div`
-  overflow: hidden;
-  position: relative;
-  height: 152px;
-  min-width: 152px;
-  background-color: var(--colorsUtilityMajor025);
-  border-bottom-left-radius: var(--borderRadius100);
-  border-top-left-radius: var(--borderRadius100);
-`;
-const Circle = styled.div`
-  height: 22px;
-  width: 22px;
-  border-radius: 50%;
-  background-color: var(--colorsUtilityMajor100);
-  position: absolute;
-  left: 22px;
-  top: 30px;
-`;
-const Square = styled.div`
-  height: 200px;
-  width: 200px;
-  transform: rotate(45deg);
-  background-color: ${({
-  color
-}) => color};
-  position: absolute;
-  border-radius: 2%;
-  top: ${({
-  top
-}) => top};
-  left: ${({
-  left
-}) => left};
-`;
-const Placeholder = () => /*#__PURE__*/React.createElement(StyledPlaceHolder, {
-  "data-component": "link preview image placeholder",
-  "data-role": "link preview image placeholder"
-}, /*#__PURE__*/React.createElement(Circle, null), /*#__PURE__*/React.createElement(Square, {
-  color: "var(--colorsUtilityMajor050)",
-  top: "120px",
-  left: "-64px"
-}), /*#__PURE__*/React.createElement(Square, {
-  color: "var(--colorsUtilityMajor150)",
-  top: "96px",
-  left: "16px"
-}));
-export default Placeholder;
+import{jsxs as o,jsx as e}from"react/jsx-runtime";import"react";import r from"styled-components";const t=r.div.withConfig({displayName:"placeholder.component__StyledPlaceHolder",componentId:"sc-9e7fe579-0"})(["overflow:hidden;position:relative;height:152px;min-width:152px;background-color:var(--colorsUtilityMajor025);border-bottom-left-radius:var(--borderRadius100);border-top-left-radius:var(--borderRadius100);"]),i=r.div.withConfig({displayName:"placeholder.component__Circle",componentId:"sc-9e7fe579-1"})(["height:22px;width:22px;border-radius:50%;background-color:var(--colorsUtilityMajor100);position:absolute;left:22px;top:30px;"]),l=r.div.withConfig({displayName:"placeholder.component__Square",componentId:"sc-9e7fe579-2"})(["height:200px;width:200px;transform:rotate(45deg);background-color:",";position:absolute;border-radius:2%;top:",";left:",";"],(({color:o})=>o),(({top:o})=>o),(({left:o})=>o)),a=()=>o(t,{"data-component":"link preview image placeholder","data-role":"link preview image placeholder",children:[e(i,{}),e(l,{color:"var(--colorsUtilityMajor050)",top:"120px",left:"-64px"}),e(l,{color:"var(--colorsUtilityMajor150)",top:"96px",left:"16px"})]});export{t as StyledPlaceHolder,a as default};

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

@@ -1 +1 @@
-export { default } from "./link-preview.component";
+export{LinkPreview as default}from"./link-preview.component.js";

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

@@ -1,58 +1 @@
-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 { StyledLinkPreview, StyledPreviewWrapper, StyledCloseIconWrapper, StyledTitle, StyledDescription, StyledUrl } from "./link-preview.style";
-import Image from "../image";
-import Preview from "../preview";
-import IconButton from "../icon-button";
-import Icon from "../icon";
-import Placeholder from "./__internal__/placeholder.component";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-const SCHEME_SEPARATOR = "://";
-export const LinkPreview = ({
-  as,
-  description,
-  image,
-  isLoading,
-  onClose,
-  title,
-  url,
-  ...rest
-}) => {
-  const loadingState = isLoading || !url;
-  const canRenderAsLink = !loadingState && as !== "div";
-  const imageProps = () => {
-    return {
-      src: image?.url,
-      alt: image?.alt || "Link preview image",
-      height: "152px"
-    };
-  };
-  const displayUrl = () => {
-    if (url?.includes(SCHEME_SEPARATOR)) {
-      const startIndex = url.indexOf(SCHEME_SEPARATOR) + SCHEME_SEPARATOR.length;
-      return url.substring(startIndex);
-    }
-    return url;
-  };
-  const linkProps = canRenderAsLink ? {
-    href: url,
-    target: "_blank",
-    rel: "noopener noreferrer"
-  } : {};
-  return /*#__PURE__*/React.createElement(StyledLinkPreview, _extends({
-    as: loadingState ? "div" : as,
-    tabIndex: loadingState || as === "div" ? -1 : 0
-  }, linkProps, rest, tagComponent("link-preview", rest)), imageProps().src ? /*#__PURE__*/React.createElement(Image, imageProps()) : /*#__PURE__*/React.createElement(Placeholder, null), /*#__PURE__*/React.createElement(StyledPreviewWrapper, {
-    isLoading: loadingState
-  }, /*#__PURE__*/React.createElement(Preview, {
-    loading: loadingState,
-    lines: 4
-  }, /*#__PURE__*/React.createElement(StyledTitle, null, title), /*#__PURE__*/React.createElement(StyledDescription, null, /*#__PURE__*/React.createElement("div", null, description)), /*#__PURE__*/React.createElement(StyledUrl, null, displayUrl()))), onClose && as === "div" && /*#__PURE__*/React.createElement(StyledCloseIconWrapper, null, /*#__PURE__*/React.createElement(IconButton, {
-    "aria-label": "link preview close button",
-    onClick: () => onClose(url)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "close"
-  }))));
-};
-LinkPreview.displayName = "LinkPreview";
-export default LinkPreview;
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import{StyledLinkPreview as t,StyledPreviewWrapper as n,StyledTitle as o,StyledDescription as i,StyledUrl as l,StyledCloseIconWrapper as c}from"./link-preview.style.js";import{Image as p}from"../image/image.component.js";import{Preview as s}from"../preview/preview.component.js";import a from"../icon-button/icon-button.component.js";import u from"../icon/icon.component.js";import f from"./__internal__/placeholder.component.js";import m from"../../__internal__/utils/helpers/tags/tags.js";function b(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){b(e,r,t[r])}))}return e}const O=b=>{var{as:O,description:g,image:y,isLoading:j,onClose:v,title:h,url:w}=b,P=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(b,["as","description","image","isLoading","onClose","title","url"]);const k=j||!w,_=()=>({src:null==y?void 0:y.url,alt:(null==y?void 0:y.alt)||"Link preview image",height:"152px"});return e(t,(x=d({as:k?"div":O,tabIndex:k||"div"===O?-1:0},k||"div"===O?{}:{href:w,target:"_blank",rel:"noopener noreferrer"},P,m("link-preview",P)),S=null!=(S={children:[_().src?r(p,d({},_())):r(f,{}),r(n,{isLoading:k,children:e(s,{loading:k,lines:4,children:[r(o,{children:h}),r(i,{children:r("div",{children:g})}),r(l,{children:(()=>{if(null==w?void 0:w.includes("://")){const e=w.indexOf("://")+3;return w.substring(e)}return w})()})]})}),v&&"div"===O&&r(c,{children:r(a,{"aria-label":"link preview close button",onClick:()=>v(w),children:r(u,{type:"close"})})})]})?S:{},Object.getOwnPropertyDescriptors?Object.defineProperties(x,Object.getOwnPropertyDescriptors(S)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(S)).forEach((function(e){Object.defineProperty(x,e,Object.getOwnPropertyDescriptor(S,e))})),x));var x,S};O.displayName="LinkPreview";export{O as LinkPreview,O as default};

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

@@ -1,89 +1 @@
-import styled, { css } from "styled-components";
-import { StyledPreview, StyledPreviewPlaceholder } from "../preview/preview.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-import baseTheme from "../../style/themes/base";
-const StyledLinkPreview = styled.a`
-  display: flex;
-  margin: 8px;
-  text-decoration: none;
-  outline: none;
-
-  ${({
-  as
-}) => css`
-    border: 1px solid var(--colorsUtilityMajor050);
-    border-radius: var(--borderRadius100);
-    background-color: var(--colorsUtilityMajor025);
-    color: var(--colorsUtilityYin090);
-
-    ${as !== "div" && css`
-      :focus {
-        ${addFocusStyling()}
-      }
-
-      :hover {
-        cursor: pointer;
-        background-color: var(--colorsUtilityMajor100);
-      }
-    `}
-  `}
-`;
-StyledLinkPreview.defaultProps = {
-  theme: baseTheme
-};
-const StyledCloseIconWrapper = styled.div`
-  padding: 16px;
-`;
-const StyledPreviewWrapper = styled.div`
-  flex-grow: 1;
-  padding: 16px;
-
-  ${({
-  isLoading
-}) => !isLoading && css`
-      ${StyledPreview} {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-    `}
-
-  ${StyledPreviewPlaceholder}:first-of-type {
-    margin-top: 8px;
-  }
-
-  ${StyledPreviewPlaceholder}:not(:first-of-type) {
-    margin-top: 16px;
-  }
-`;
-const StyledTitle = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 21px;
-`;
-const StyledDescription = styled.div`
-  > div {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 21px;
-    padding-top: 4px;
-  }
-
-  flex-grow: 1;
-`;
-const StyledUrl = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 21px;
-  color: var(--colorsUtilityMajor400);
-`;
-export { StyledLinkPreview, StyledCloseIconWrapper, StyledPreviewWrapper, StyledTitle, StyledDescription, StyledUrl };
+import e,{css as i}from"styled-components";import{StyledPreview as o,StyledPreviewPlaceholder as t}from"../preview/preview.style.js";import l from"../../style/utils/add-focus-styling.js";import r from"../../style/themes/base/index.js";const n=e.a.withConfig({displayName:"link-preview.style__StyledLinkPreview",componentId:"sc-91c0f66b-0"})(["display:flex;margin:8px;text-decoration:none;outline:none;",""],(({as:e})=>i(["border:1px solid var(--colorsUtilityMajor050);border-radius:var(--borderRadius100);background-color:var(--colorsUtilityMajor025);color:var(--colorsUtilityYin090);",""],"div"!==e&&i([":focus{","}:hover{cursor:pointer;background-color:var(--colorsUtilityMajor100);}"],l()))));n.defaultProps={theme:r};const p=e.div.withConfig({displayName:"link-preview.style__StyledCloseIconWrapper",componentId:"sc-91c0f66b-1"})(["padding:16px;"]),s=e.div.withConfig({displayName:"link-preview.style__StyledPreviewWrapper",componentId:"sc-91c0f66b-2"})(["flex-grow:1;padding:16px;"," ",":first-of-type{margin-top:8px;}",":not(:first-of-type){margin-top:16px;}"],(({isLoading:e})=>!e&&i(["","{display:flex;flex-direction:column;height:100%;}"],o)),t,t),d=e.div.withConfig({displayName:"link-preview.style__StyledTitle",componentId:"sc-91c0f66b-3"})(["white-space:nowrap;text-overflow:ellipsis;font-weight:500;font-size:14px;line-height:21px;"]),a=e.div.withConfig({displayName:"link-preview.style__StyledDescription",componentId:"sc-91c0f66b-4"})(["> div{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-weight:400;font-size:14px;line-height:21px;padding-top:4px;}flex-grow:1;"]),c=e.div.withConfig({displayName:"link-preview.style__StyledUrl",componentId:"sc-91c0f66b-5"})(["white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:14px;line-height:21px;color:var(--colorsUtilityMajor400);"]);export{p as StyledCloseIconWrapper,a as StyledDescription,n as StyledLinkPreview,s as StyledPreviewWrapper,d as StyledTitle,c as StyledUrl};

package/esm/components/loader/index.js

@@ -1 +1 @@
-export { default } from "./loader.component";
+export{Loader as default}from"./loader.component.js";

package/esm/components/loader/loader-square.style.js

@@ -1,71 +1 @@
-import styled, { css, keyframes } from "styled-components";
-import baseTheme from "../../style/themes/base";
-const loaderAnimation = keyframes`
-  0%, 80%, 100% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  40% {
-    opacity: 1;
-    transform: scale(1);
-  }
-`;
-const getDimensions = size => {
-  let width;
-  let marginRight;
-  switch (size) {
-    case "medium":
-      width = "16px";
-      marginRight = "8px";
-      break;
-    case "large":
-      width = "20px";
-      marginRight = "8px";
-      break;
-    default:
-      width = "12px";
-      marginRight = "6px";
-  }
-  return css`
-    width: ${width};
-    height: ${width};
-    margin-right: ${marginRight};
-  `;
-};
-export const StyledLoaderPlaceholder = styled.div`
-  display: inline-block;
-  min-width: var(--sizing800);
-`;
-const StyledLoaderSquare = styled.div`
-  ${({
-  size,
-  isInsideButton,
-  isActive,
-  backgroundColor
-}) => css`
-    animation: ${loaderAnimation} 1s infinite ease-in-out both;
-    background-color: ${backgroundColor};
-    display: inline-block;
-    ${getDimensions(size)}
-    border-radius: var(--borderRadiusCircle);
-    ${isInsideButton && css`
-      background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};
-    `}
-    &:nth-of-type(1) {
-      animation-delay: 0s;
-    }
-    &:nth-of-type(2) {
-      animation-delay: 0.2s;
-    }
-    &:nth-of-type(3) {
-      animation-delay: 0.4s;
-      margin-right: 0px;
-    }
-  `}
-`;
-StyledLoaderSquare.defaultProps = {
-  isInsideButton: false,
-  isActive: true,
-  theme: baseTheme
-};
-export default StyledLoaderSquare;
+import e,{keyframes as i,css as a}from"styled-components";import t from"../../style/themes/base/index.js";const o=i(["0%,80%,100%{opacity:0;transform:scale(0);}40%{opacity:1;transform:scale(1);}"]),r=e.div.withConfig({displayName:"loader-square.style__StyledLoaderPlaceholder",componentId:"sc-3db119f0-0"})(["display:inline-block;min-width:var(--sizing800);"]),n=e.div.withConfig({displayName:"loader-square.style__StyledLoaderSquare",componentId:"sc-3db119f0-1"})(["",""],(({size:e,isInsideButton:i,isActive:t,backgroundColor:r})=>a(["animation:"," 1s infinite ease-in-out both;background-color:",";display:inline-block;"," border-radius:var(--borderRadiusCircle);"," &:nth-of-type(1){animation-delay:0s;}&:nth-of-type(2){animation-delay:0.2s;}&:nth-of-type(3){animation-delay:0.4s;margin-right:0px;}"],o,r,(e=>{let i,t;switch(e){case"medium":i="16px",t="8px";break;case"large":i="20px",t="8px";break;default:i="12px",t="6px"}return a(["width:",";height:",";margin-right:",";"],i,i,t)})(e),i&&a(["background-color:",";"],t?"var(--colorsUtilityYang100)":"var(--colorsSemanticNeutral500)"))));n.defaultProps={isInsideButton:!1,isActive:!0,theme:t};export{r as StyledLoaderPlaceholder,n as default};

package/esm/components/loader/loader.component.js

@@ -1,48 +1 @@
-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 { filterStyledSystemMarginProps } from "../../style/utils";
-import useMediaQuery from "../../hooks/useMediaQuery";
-import useLocale from "../../hooks/__internal__/useLocale";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import StyledLoader from "./loader.style";
-import StyledLoaderSquare, { StyledLoaderPlaceholder } from "./loader-square.style";
-import Typography from "../typography";
-import Logger from "../../__internal__/utils/logger";
-let deprecateAriaLabelWarnTriggered = false;
-export const Loader = ({
-  variant = "default",
-  "aria-label": ariaLabel,
-  size = "medium",
-  isInsideButton,
-  isActive = true,
-  loaderLabel,
-  ...rest
-}) => {
-  if (!deprecateAriaLabelWarnTriggered && ariaLabel) {
-    deprecateAriaLabelWarnTriggered = true;
-    Logger.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label.");
-  }
-  const l = useLocale();
-  const allowMotion = useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
-  if (allowMotion === undefined) {
-    return /*#__PURE__*/React.createElement(StyledLoaderPlaceholder, null);
-  }
-  const loaderSquareProps = {
-    isInsideButton,
-    isActive,
-    size,
-    variant
-  };
-
-  // FE-6368 has been raised for the below, changed hex values for design tokens (when added)
-  return /*#__PURE__*/React.createElement(StyledLoader, _extends({}, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), allowMotion ? /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
-    "data-role": "loader-square",
-    key: color,
-    backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
-  }, loaderSquareProps))), /*#__PURE__*/React.createElement(Typography, {
-    "data-role": "hidden-label",
-    variant: "span",
-    screenReaderOnly: true
-  }, loaderLabel || ariaLabel || l.loader.loading())) : loaderLabel || ariaLabel || l.loader.loading());
-};
-export default Loader;
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import"react";import"../../style/utils/filter-styled-system-padding-props.js";import o from"../../style/utils/filter-styled-system-margin-props.js";import n from"../../hooks/useMediaQuery/useMediaQuery.js";import a from"../../hooks/__internal__/useLocale/useLocale.js";import i from"../../__internal__/utils/helpers/tags/tags.js";import l from"./loader.style.js";import s,{StyledLoaderPlaceholder as c}from"./loader-square.style.js";import{Typography as p}from"../typography/typography.component.js";import d from"../../__internal__/utils/logger/index.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function f(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){u(e,r,t[r])}))}return e}let b=!1;const y=u=>{var{variant:y="default","aria-label":m,size:O="medium",isInsideButton:j,isActive:g=!0,loaderLabel:v}=u,h=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(u,["variant","aria-label","size","isInsideButton","isActive","loaderLabel"]);!b&&m&&(b=!0,d.deprecate("The aria-label prop in Loader is deprecated and will soon be removed, please use the `loaderLabel` prop instead to provide an accessible label."));const P=a(),w=n("screen and (prefers-reduced-motion: no-preference)");if(void 0===w)return e(c,{});const _={isInsideButton:j,isActive:g,size:O,variant:y};return e(l,(k=f({},i("loader",h),o(h)),L=null!=(L={children:w?r(t,{children:[["#13A038","#0092DB","#8F49FE"].map((r=>e(s,f({"data-role":"loader-square",backgroundColor:"gradient"===y?r:"var(--colorsActionMajor500)"},_),r))),e(p,{"data-role":"hidden-label",variant:"span",screenReaderOnly:!0,children:v||m||P.loader.loading()})]}):v||m||P.loader.loading()})?L:{},Object.getOwnPropertyDescriptors?Object.defineProperties(k,Object.getOwnPropertyDescriptors(L)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(L)).forEach((function(e){Object.defineProperty(k,e,Object.getOwnPropertyDescriptor(L,e))})),k));var k,L};export{y as Loader,y as default};

package/esm/components/loader/loader.config.js

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
-export const LOADER_SIZES = ["small", "medium", "large"];
+const e=["small","medium","large"];export{e as LOADER_SIZES};

package/esm/components/loader/loader.style.js

@@ -1,12 +1 @@
-import styled from "styled-components";
-import { margin } from "styled-system";
-import { baseTheme } from "../../style/themes";
-const StyledLoader = styled.div`
-  ${margin}
-  text-align: center;
-  white-space: nowrap;
-`;
-StyledLoader.defaultProps = {
-  theme: baseTheme
-};
-export default StyledLoader;
+import e from"styled-components";import{margin as t}from"styled-system";import"../../style/themes/sage/index.js";import s from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";const o=e.div.withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-f4e09972-0"})([""," text-align:center;white-space:nowrap;"],t);o.defaultProps={theme:s};export{o as default};

package/esm/components/loader-bar/index.js

@@ -1 +1 @@
-export { default } from "./loader-bar.component";
+export{LoaderBar as default}from"./loader-bar.component.js";

package/esm/components/loader-bar/loader-bar.component.js

@@ -1,29 +1 @@
-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 { filterStyledSystemMarginProps } from "../../style/utils";
-import useMediaQuery from "../../hooks/useMediaQuery";
-import useLocale from "../../hooks/__internal__/useLocale";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import StyledLoaderBar, { InnerBar, StyledLoader } from "./loader-bar.style";
-export const LoaderBar = ({
-  size = "medium",
-  ...rest
-}) => {
-  const l = useLocale();
-  const allowMotion = useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
-  if (allowMotion === undefined) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(StyledLoader, _extends({
-    "aria-label": l.loader.loading(),
-    role: "progressbar"
-  }, tagComponent("loader-bar", rest), filterStyledSystemMarginProps(rest)), allowMotion ? /*#__PURE__*/React.createElement(StyledLoaderBar, {
-    "data-role": "outer-bar",
-    size: size
-  }, /*#__PURE__*/React.createElement(InnerBar, {
-    "data-role": "inner-bar",
-    size: size
-  })) : l.loader.loading());
-};
-LoaderBar.DisplayName = "Loader Bar";
-export default LoaderBar;
+import{jsx as e}from"react/jsx-runtime";import"react";import"../../style/utils/filter-styled-system-padding-props.js";import r from"../../style/utils/filter-styled-system-margin-props.js";import t from"../../hooks/useMediaQuery/useMediaQuery.js";import o from"../../hooks/__internal__/useLocale/useLocale.js";import n from"../../__internal__/utils/helpers/tags/tags.js";import i,{StyledLoader as s,InnerBar as l}from"./loader-bar.style.js";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const c=c=>{var{size:p="medium"}=c,u=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(c,["size"]);const f=o(),b=t("screen and (prefers-reduced-motion: no-preference)");return void 0===b?null:e(s,(y=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){a(e,r,t[r])}))}return e}({"aria-label":f.loader.loading(),role:"progressbar"},n("loader-bar",u),r(u)),m=null!=(m={children:b?e(i,{"data-role":"outer-bar",size:p,children:e(l,{"data-role":"inner-bar",size:p})}):f.loader.loading()})?m:{},Object.getOwnPropertyDescriptors?Object.defineProperties(y,Object.getOwnPropertyDescriptors(m)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(m)).forEach((function(e){Object.defineProperty(y,e,Object.getOwnPropertyDescriptor(m,e))})),y));var y,m};c.DisplayName="Loader Bar";export{c as LoaderBar,c as default};

package/esm/components/loader-bar/loader-bar.config.js

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
-export const LOADER_BAR_SIZES = ["small", "medium", "large"];
+const e=["small","medium","large"];export{e as LOADER_BAR_SIZES};