carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/components/popover-container/popover-container.style.js

@@ -1,110 +1 @@
-import styled, { css } from "styled-components";
-import { padding } from "styled-system";
-import { baseTheme } from "../../style/themes";
-import IconButton from "../icon-button";
-import StyledIcon from "../icon/icon.style";
-import { StyledForm, StyledFormContent, StyledFormFooter } from "../form/form.style";
-const PopoverContainerWrapperStyle = styled.div`
-  position: relative;
-  display: inline-block;
-
-  ${({
-  hasFullWidth
-}) => hasFullWidth && css`
-      width: 100%;
-    `}
-`;
-const PopoverContainerHeaderStyle = styled.div`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-  max-width: 280px;
-`;
-const PopoverContainerContentStyle = styled.div`
-  ${padding}
-
-  background: var(--colorsUtilityYang100);
-  border-radius: var(--borderRadius100);
-  box-shadow: var(--boxShadow100);
-  min-width: 300px;
-  position: absolute;
-  z-index: 2000;
-
-  ${({
-  disableAnimation
-}) => disableAnimation ? css`
-          opacity: 1;
-          transform: none;
-        ` : css`
-          &.enter {
-            opacity: 0;
-            transform: translateY(-8px);
-          }
-
-          &.enter-done {
-            opacity: 1;
-            transform: translateY(0);
-            transition-property: opacity, transform;
-            transition-duration: 0.3s;
-            transition-timing-function: cubic-bezier(0.25, 0.25, 0, 1.5);
-          }
-
-          &.exit {
-            opacity: 0;
-            transform: translateY(-8px);
-            transition-property: opacity, transform;
-            transition-duration: 0.3s;
-            transition-timing-function: cubic-bezier(0.25, 0.25, 0, 1.5);
-          }
-
-          &.exit-done {
-            opacity: 0;
-            transform: translateY(0);
-          }
-        `}
-
-  :focus {
-    outline: none;
-  }
-
-  &:has(${StyledForm}.sticky) {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-
-    ${StyledForm}.sticky {
-      ${StyledFormContent} {
-        flex-grow: 1;
-        min-height: 0;
-        overflow-y: auto;
-      }
-
-      ${StyledFormFooter} {
-        border-bottom-right-radius: var(--borderRadius200);
-        border-bottom-left-radius: var(--borderRadius200);
-      }
-    }
-  }
-`;
-const PopoverContainerOpenIcon = styled(IconButton)`
-  ${StyledIcon} {
-    color: var(--colorsActionMinor500);
-  }
-`;
-const PopoverContainerCloseIcon = styled(IconButton)`
-  position: absolute;
-  top: 16px;
-  right: 24px;
-
-  ${StyledIcon} {
-    color: var(--colorsActionMinor500);
-  }
-`;
-const PopoverContainerTitleStyle = styled.div`
-  font-size: 16px;
-  font-weight: 500;
-`;
-PopoverContainerContentStyle.defaultProps = {
-  theme: baseTheme
-};
-export { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon };
+import o,{css as t}from"styled-components";import{padding as i}from"styled-system";import"../../style/themes/sage/index.js";import e from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import n from"../icon-button/icon-button.component.js";import r from"../icon/icon.style.js";import{StyledForm as a,StyledFormContent as s,StyledFormFooter as p}from"../form/form.style.js";const c=o.div.withConfig({displayName:"popover-container.style__PopoverContainerWrapperStyle",componentId:"sc-4b145903-0"})(["position:relative;display:inline-block;",""],(({hasFullWidth:o})=>o&&t(["width:100%;"]))),l=o.div.withConfig({displayName:"popover-container.style__PopoverContainerHeaderStyle",componentId:"sc-4b145903-1"})(["display:flex;justify-content:space-between;margin-bottom:8px;max-width:280px;"]),d=o.div.withConfig({displayName:"popover-container.style__PopoverContainerContentStyle",componentId:"sc-4b145903-2"})([""," background:var(--colorsUtilityYang100);border-radius:var(--borderRadius100);box-shadow:var(--boxShadow100);min-width:300px;position:absolute;z-index:2000;"," :focus{outline:none;}&:has(",".sticky){display:flex;flex-direction:column;padding:0;",".sticky{","{flex-grow:1;min-height:0;overflow-y:auto;}","{border-bottom-right-radius:var(--borderRadius200);border-bottom-left-radius:var(--borderRadius200);}}}"],i,(({disableAnimation:o})=>t(o?["opacity:1;transform:none;"]:["&.enter{opacity:0;transform:translateY(-8px);}&.enter-done{opacity:1;transform:translateY(0);transition-property:opacity,transform;transition-duration:0.3s;transition-timing-function:cubic-bezier(0.25,0.25,0,1.5);}&.exit{opacity:0;transform:translateY(-8px);transition-property:opacity,transform;transition-duration:0.3s;transition-timing-function:cubic-bezier(0.25,0.25,0,1.5);}&.exit-done{opacity:0;transform:translateY(0);}"])),a,a,s,p),m=o(n).withConfig({displayName:"popover-container.style__PopoverContainerOpenIcon",componentId:"sc-4b145903-3"})(["","{color:var(--colorsActionMinor500);}"],r),y=o(n).withConfig({displayName:"popover-container.style__PopoverContainerCloseIcon",componentId:"sc-4b145903-4"})(["position:absolute;top:16px;right:24px;","{color:var(--colorsActionMinor500);}"],r),f=o.div.withConfig({displayName:"popover-container.style__PopoverContainerTitleStyle",componentId:"sc-4b145903-5"})(["font-size:16px;font-weight:500;"]);d.defaultProps={theme:e};export{y as PopoverContainerCloseIcon,d as PopoverContainerContentStyle,l as PopoverContainerHeaderStyle,m as PopoverContainerOpenIcon,f as PopoverContainerTitleStyle,c as PopoverContainerWrapperStyle};

package/esm/components/portal/__internal__/portal.context.js

@@ -1,2 +1 @@
-import React from "react";
-export default /*#__PURE__*/React.createContext({});
+import t from"react";var e=t.createContext({});export{e as default};

package/esm/components/portal/index.js

@@ -1 +1 @@
-export { default } from "./portal";
+export{Portal as default}from"./portal.js";

package/esm/components/portal/portal.js

@@ -1,89 +1 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
-import ReactDOM from "react-dom";
-import styled, { css } from "styled-components";
-import guid from "../../__internal__/utils/helpers/guid";
-import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
-import StyledPortalEntrance from "./portal.style";
-import PortalContext from "./__internal__/portal.context";
-const Container = styled.div`
-  ${({
-  theme
-}) => css`
-     {
-      position: relative;
-      z-index: ${theme.zIndex.aboveAll};
-    }
-  `}
-`;
-export const Portal = ({
-  children,
-  className,
-  id,
-  onReposition,
-  inertOptOut
-}) => {
-  const [portalNode, setPortalNode] = useState(null);
-  const uniqueId = useMemo(() => guid(), []);
-  const {
-    renderInRoot
-  } = useContext(PortalContext);
-  useEffect(() => {
-    if (onReposition) {
-      onReposition();
-      window.addEventListener("resize", onReposition);
-    }
-    return () => {
-      if (onReposition) {
-        window.removeEventListener("resize", onReposition);
-      }
-    };
-  }, [onReposition]);
-  useEffect(() => {
-    return () => {
-      portalNode?.remove();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const addClassNames = node => {
-    className?.split(" ").forEach(el => {
-      node?.classList.add(el);
-    });
-    return node;
-  };
-  const getPortalContainer = () => {
-    const portalClassName = "carbon-portal";
-    let node = portalNode;
-    if (!node && id !== undefined && document.getElementById(id)) {
-      node = document.getElementById(id);
-      setPortalNode(node);
-    } else if (!node || document.getElementsByClassName(portalClassName).length === 0) {
-      node = document.createElement("div");
-      node.classList.add(portalClassName);
-      node.setAttribute("data-portal-exit", uniqueId);
-      node.setAttribute("data-role", "carbon-portal-exit");
-      if (id !== undefined) {
-        node.setAttribute("id", id);
-      }
-      if (inertOptOut) {
-        node.setAttribute("data-not-inert", "true");
-      }
-      setPortalNode(node);
-      let mainNode = document.body;
-      const rootDiv = document.getElementById("root");
-      if (rootDiv && renderInRoot) {
-        mainNode = rootDiv;
-      }
-      mainNode.appendChild(node);
-    }
-    if (className) {
-      node = addClassNames(node);
-    }
-    return node;
-  };
-  const portalContent = inertOptOut ? /*#__PURE__*/React.createElement(Container, null, children) : children;
-  return /*#__PURE__*/React.createElement(StyledPortalEntrance, {
-    "data-role": "data-portal-entrance",
-    "data-portal-entrance": uniqueId
-  }, /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, portalContent), getPortalContainer()));
-};
-export default Portal;
+import{jsx as t}from"react/jsx-runtime";import{useState as e,useMemo as o,useContext as r,useEffect as n}from"react";import i from"react-dom";import d,{css as a}from"styled-components";import l from"../../__internal__/utils/helpers/guid/index.js";import s from"../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js";import m from"./portal.style.js";import c from"./__internal__/portal.context.js";const p=d.div.withConfig({displayName:"portal__Container",componentId:"sc-20d5679d-0"})(["",""],(({theme:t})=>a(["{position:relative;z-index:",";}"],t.zIndex.aboveAll))),u=({children:d,className:a,id:u,onReposition:f,inertOptOut:v})=>{const[b,h]=e(null),_=o((()=>l()),[]),{renderInRoot:y}=r(c);n((()=>(f&&(f(),window.addEventListener("resize",f)),()=>{f&&window.removeEventListener("resize",f)})),[f]),n((()=>()=>{null==b||b.remove()}),[]);const g=v?t(p,{children:d}):d;return t(m,{"data-role":"data-portal-entrance","data-portal-entrance":_,children:i.createPortal(t(s,{children:g}),(()=>{const t="carbon-portal";let e=b;if(!e&&void 0!==u&&document.getElementById(u))e=document.getElementById(u),h(e);else if(!e||0===document.getElementsByClassName(t).length){e=document.createElement("div"),e.classList.add(t),e.setAttribute("data-portal-exit",_),e.setAttribute("data-role","carbon-portal-exit"),void 0!==u&&e.setAttribute("id",u),v&&e.setAttribute("data-not-inert","true"),h(e);let o=document.body;const r=document.getElementById("root");r&&y&&(o=r),o.appendChild(e)}return a&&(e=(t=>(null==a||a.split(" ").forEach((e=>{null==t||t.classList.add(e)})),t))(e)),e})())})};export{u as Portal,u as default};

package/esm/components/portal/portal.style.js

@@ -1,7 +1 @@
-import styled from "styled-components";
-const StyledPortalEntrance = styled.span`
-  display: none;
-  height: 0;
-  width: 0;
-`;
-export default StyledPortalEntrance;
+import t from"styled-components";const o=t.span.withConfig({displayName:"portal.style__StyledPortalEntrance",componentId:"sc-9fd1b647-0"})(["display:none;height:0;width:0;"]);export{o as default};

package/esm/components/portrait/__internal__/utils.js

@@ -1,75 +1 @@
-const getContrastRatio = (luminance1, luminance2) => {
-  const [L1, L2] = luminance1 > luminance2 ? [luminance1, luminance2] : [luminance2, luminance1];
-  return (L1 + 0.05) / (L2 + 0.05);
-};
-const calculateLuminance = hexColor => {
-  const hex = hexColor.replace("#", "");
-  const r = parseInt(hex.slice(0, 2), 16);
-  const g = parseInt(hex.slice(2, 4), 16);
-  const b = parseInt(hex.slice(4, 6), 16);
-  const normalize = value => {
-    const v = value / 255;
-    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
-  };
-  const normalizedR = normalize(r);
-  const normalizedG = normalize(g);
-  const normalizedB = normalize(b);
-  const luminance = 0.2126 * normalizedR + 0.7152 * normalizedG + 0.0722 * normalizedB;
-  return luminance;
-};
-function getAccessibleForegroundColor(backgroundColor, largeText, strict) {
-  const bgLuminance = calculateLuminance(backgroundColor);
-  const whiteLuminance = calculateLuminance("#FFFFFF");
-  const blackLuminance = calculateLuminance("#000000");
-  const whiteContrast = getContrastRatio(bgLuminance, whiteLuminance);
-  const blackContrast = getContrastRatio(bgLuminance, blackLuminance);
-  const strictThreshold = largeText ? 4.5 : 7.0;
-  const nonStrictThreshold = largeText ? 3.0 : 4.5;
-  const minContrast = strict ? strictThreshold : nonStrictThreshold;
-
-  /* istanbul ignore else */
-  if (whiteContrast >= minContrast && whiteContrast > blackContrast) {
-    return "#FFFFFF";
-  }
-
-  /* istanbul ignore else */
-  if (blackContrast >= minContrast) {
-    return "var(--colorsUtilityYin090)";
-  }
-
-  // If no color meets the contrast ratio, return the color with the highest contrast
-  // In theory this is possible only if the background color is a shade of grey, but
-  // this is a fallback mechanism as finding a colour which fails both contrast ratios
-  // is highly unlikely.
-  /* istanbul ignore next */
-  return whiteContrast > blackContrast ? "#FFFFFF" : "var(--colorsUtilityYin090)";
-}
-const getColoursForPortrait = (backgroundColour,
-// Whether the portrait is on a dark background
-darkBackground = false,
-// Whether the text is large
-largeText = false,
-/**
- * Whether to use strict contrast (i.e., WCAG AAA). If this is false, it uses WCAG AA contrast
- * ratios (4.5:1 for normal text, 3:1 for large text). If true, it uses 7:1 for normal text and
- * 4.5:1 for large text.
- */
-strict = false,
-// The custom foreground colour, if any
-foregroundColor = undefined) => {
-  let fgColor = "var(--colorsUtilityYin090)";
-  let bgColor = "var(--colorsUtilityReadOnly400)";
-  if (darkBackground && !backgroundColour && !foregroundColor) {
-    bgColor = "var(--colorsUtilityYin090)";
-    fgColor = "var(--colorsUtilityReadOnly600)";
-  }
-  if (backgroundColour) {
-    bgColor = backgroundColour;
-    fgColor = getAccessibleForegroundColor(backgroundColour, largeText, strict);
-  }
-  if (foregroundColor) {
-    fgColor = foregroundColor;
-  }
-  return `background-color: ${bgColor}; color: ${fgColor};`;
-};
-export default getColoursForPortrait;
+const r=(r,t)=>{const[o,l]=r>t?[r,t]:[t,r];return(o+.05)/(l+.05)},t=r=>{const t=r.replace("#",""),o=parseInt(t.slice(0,2),16),l=parseInt(t.slice(2,4),16),n=parseInt(t.slice(4,6),16),i=r=>{const t=r/255;return t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4)};return.2126*i(o)+.7152*i(l)+.0722*i(n)},o=(o,l=!1,n=!1,i=!1,c=void 0)=>{let e="var(--colorsUtilityYin090)",s="var(--colorsUtilityReadOnly400)";return!l||o||c||(s="var(--colorsUtilityYin090)",e="var(--colorsUtilityReadOnly600)"),o&&(s=o,e=function(o,l,n){const i=t(o),c=t("#FFFFFF"),e=t("#000000"),s=r(i,c),F=r(i,e),a=n?l?4.5:7:l?3:4.5;return s>=a&&s>F?"#FFFFFF":F>=a?"var(--colorsUtilityYin090)":s>F?"#FFFFFF":"var(--colorsUtilityYin090)"}(o,n,i)),c&&(e=c),`background-color: ${s}; color: ${e};`};export{o as default};

package/esm/components/portrait/index.js

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

package/esm/components/portrait/portrait.component.js

@@ -1,88 +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, { useEffect, useState } from "react";
-import Tooltip from "../tooltip";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { StyledCustomImg, StyledIcon, StyledPortraitContainer, StyledPortraitInitials } from "./portrait.style";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-export const Portrait = ({
-  alt,
-  backgroundColor,
-  foregroundColor = undefined,
-  name,
-  darkBackground = false,
-  iconType = "individual",
-  initials,
-  shape = "circle",
-  size = "M",
-  src,
-  onClick,
-  tooltipMessage,
-  tooltipId,
-  tooltipIsVisible,
-  tooltipPosition,
-  tooltipType,
-  tooltipSize,
-  tooltipBgColor,
-  tooltipFontColor,
-  ...rest
-}) => {
-  const [externalError, setExternalError] = useState(false);
-  const hasValidImg = Boolean(src) && !externalError;
-  useEffect(() => {
-    setExternalError(false);
-  }, [src]);
-  const tagProps = tagComponent("portrait", rest);
-  const renderComponent = () => {
-    let portrait = /*#__PURE__*/React.createElement(StyledIcon, {
-      type: iconType,
-      size: size
-    });
-    if (initials) {
-      portrait = /*#__PURE__*/React.createElement(StyledPortraitInitials, {
-        size: size,
-        "data-element": "initials"
-      }, initials.slice(0, 3).toUpperCase());
-    }
-    if (src && !externalError) {
-      portrait = /*#__PURE__*/React.createElement(StyledCustomImg, {
-        src: src,
-        alt: alt || name || "",
-        "data-element": "user-image",
-        onError: () => setExternalError(true)
-      });
-    }
-    if (tooltipMessage) {
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        message: tooltipMessage,
-        id: tooltipId,
-        position: tooltipPosition,
-        type: tooltipType,
-        size: tooltipSize,
-        isVisible: tooltipIsVisible,
-        bgColor: tooltipBgColor,
-        fontColor: tooltipFontColor
-      }, /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
-        onClick: onClick
-      }, tagProps, {
-        hasValidImg: hasValidImg,
-        darkBackground: darkBackground,
-        size: size,
-        shape: shape,
-        backgroundColor: backgroundColor,
-        foregroundColor: foregroundColor
-      }), portrait));
-    }
-    return /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
-      onClick: onClick
-    }, tagProps, {
-      hasValidImg: hasValidImg,
-      darkBackground: darkBackground,
-      size: size,
-      shape: shape,
-      backgroundColor: backgroundColor,
-      foregroundColor: foregroundColor
-    }), portrait);
-  };
-  return renderComponent();
-};
-export default Portrait;
+import{jsx as o}from"react/jsx-runtime";import{useState as t,useEffect as e}from"react";import{Tooltip as r}from"../tooltip/tooltip.component.js";import i from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPortraitInitials as n,StyledPortraitContainer as l,StyledIcon as s,StyledCustomImg as p}from"./portrait.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import a from"../../style/utils/filter-styled-system-margin-props.js";function c(o,t,e){return t in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}function u(o){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{},r=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(e).filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})))),r.forEach((function(t){c(o,t,e[t])}))}return o}function f(o,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(t)):function(o){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(o);t.push.apply(t,e)}return t}(Object(t)).forEach((function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(t,e))})),o}const d=c=>{var{alt:d,backgroundColor:g,foregroundColor:y,name:b,darkBackground:m=!1,iconType:O="individual",initials:j,shape:k="circle",size:C="M",src:h,onClick:P,tooltipMessage:w,tooltipId:v,tooltipIsVisible:z,tooltipPosition:S,tooltipType:B,tooltipSize:I,tooltipBgColor:V,tooltipFontColor:x}=c,D=function(o,t){if(null==o)return{};var e,r,i=function(o,t){if(null==o)return{};var e,r,i={},n=Object.keys(o);for(r=0;r<n.length;r++)e=n[r],t.indexOf(e)>=0||(i[e]=o[e]);return i}(o,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);for(r=0;r<n.length;r++)e=n[r],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(o,e)&&(i[e]=o[e])}return i}(c,["alt","backgroundColor","foregroundColor","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor"]);const[E,T]=t(!1),_=Boolean(h)&&!E;e((()=>{T(!1)}),[h]);const M=i("portrait",D);return(()=>{let t=o(s,{type:O,size:C});return j&&(t=o(n,{size:C,"data-element":"initials",children:j.slice(0,3).toUpperCase()})),h&&!E&&(t=o(p,{src:h,alt:d||b||"","data-element":"user-image",onError:()=>T(!0)})),w?o(r,{message:w,id:v,position:S,type:B,size:I,isVisible:z,bgColor:V,fontColor:x,children:o(l,f(u(f(u({},a(D)),{onClick:P}),M),{hasValidImg:_,darkBackground:m,size:C,shape:k,backgroundColor:g,foregroundColor:y,children:t}))}):o(l,f(u(f(u({},a(D)),{onClick:P}),M),{hasValidImg:_,darkBackground:m,size:C,shape:k,backgroundColor:g,foregroundColor:y,children:t}))})()};export{d as Portrait,d as default};

package/esm/components/portrait/portrait.config.js

@@ -1,32 +1 @@
-export const PORTRAIT_SHAPES = ["circle", "square"];
-export const PORTRAIT_SIZES = ["XS", "S", "M", "ML", "L", "XL", "XXL"];
-export const PORTRAIT_SIZE_PARAMS = {
-  XS: {
-    dimensions: 24,
-    iconDimensions: 16
-  },
-  S: {
-    dimensions: 32,
-    iconDimensions: 20
-  },
-  M: {
-    dimensions: 40,
-    iconDimensions: 24
-  },
-  ML: {
-    dimensions: 56,
-    iconDimensions: 32
-  },
-  L: {
-    dimensions: 72,
-    iconDimensions: 40
-  },
-  XL: {
-    dimensions: 104,
-    iconDimensions: 56
-  },
-  XXL: {
-    dimensions: 128,
-    iconDimensions: 64
-  }
-};
+const i=["circle","square"],n=["XS","S","M","ML","L","XL","XXL"],s={XS:{dimensions:24,iconDimensions:16},S:{dimensions:32,iconDimensions:20},M:{dimensions:40,iconDimensions:24},ML:{dimensions:56,iconDimensions:32},L:{dimensions:72,iconDimensions:40},XL:{dimensions:104,iconDimensions:56},XXL:{dimensions:128,iconDimensions:64}};export{i as PORTRAIT_SHAPES,n as PORTRAIT_SIZES,s as PORTRAIT_SIZE_PARAMS};

package/esm/components/portrait/portrait.style.js

@@ -1,70 +1 @@
-import styled from "styled-components";
-import { margin } from "styled-system";
-import Icon from "../icon";
-import profileConfigSizes from "../profile/profile.config";
-import BaseTheme from "../../style/themes/base";
-import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
-import getColoursForPortrait from "./__internal__/utils";
-export const StyledPortraitInitials = styled.div`
-  font-weight: 500;
-  font-size: ${({
-  size
-}) => profileConfigSizes[size].initialSize};
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
-  justify-content: center;
-  height: inherit;
-  width: inherit;
-`;
-export const StyledCustomImg = styled.img`
-  height: inherit;
-  min-width: inherit;
-`;
-
-// && is used here to increase the specificity
-export const StyledIcon = styled(Icon)`
-  && {
-    color: inherit;
-    height: inherit;
-    min-width: inherit;
-
-    ::before {
-      font-size: ${({
-  size
-}) => PORTRAIT_SIZE_PARAMS[size].iconDimensions}px;
-    }
-  }
-`;
-export const StyledPortraitContainer = styled.div`
-  ${({
-  darkBackground,
-  backgroundColor,
-  size,
-  foregroundColor
-}) => getColoursForPortrait(backgroundColor, darkBackground, !["XS", "S"].includes(size), true, foregroundColor)};
-  ${({
-  hasValidImg,
-  size
-}) => hasValidImg && `max-width: ${PORTRAIT_SIZE_PARAMS[size].dimensions}px;`}
-  min-width: ${({
-  size
-}) => PORTRAIT_SIZE_PARAMS[size].dimensions}px;
-  height: ${({
-  size
-}) => PORTRAIT_SIZE_PARAMS[size].dimensions}px;
-  overflow: hidden;
-  border-radius: ${({
-  shape
-}) => shape === "square" ? "0px" : "var(--borderRadiusCircle)"};
-  border: 1px solid var(--colorsUtilityReadOnly600);
-  display: inline-block;
-
-  ${({
-  onClick
-}) => onClick && "cursor: pointer"}
-  ${margin}
-`;
-StyledPortraitContainer.defaultProps = {
-  theme: BaseTheme
-};
+import"react";import i from"styled-components";import{margin as e}from"styled-system";import t from"../icon/icon.component.js";import o from"../profile/profile.config.js";import r from"../../style/themes/base/index.js";import{PORTRAIT_SIZE_PARAMS as n}from"./portrait.config.js";import s from"./__internal__/utils.js";const d=i.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"sc-7962e194-0"})(["font-weight:500;font-size:",";display:flex;white-space:nowrap;align-items:center;justify-content:center;height:inherit;width:inherit;"],(({size:i})=>o[i].initialSize)),m=i.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-7962e194-1"})(["height:inherit;min-width:inherit;"]),a=i(t).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-7962e194-2"})(["&&{color:inherit;height:inherit;min-width:inherit;::before{font-size:","px;}}"],(({size:i})=>n[i].iconDimensions)),l=i.div.withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-7962e194-3"})(["",";"," min-width:","px;height:","px;overflow:hidden;border-radius:",";border:1px solid var(--colorsUtilityReadOnly600);display:inline-block;"," ",""],(({darkBackground:i,backgroundColor:e,size:t,foregroundColor:o})=>s(e,i,!["XS","S"].includes(t),!0,o)),(({hasValidImg:i,size:e})=>i&&`max-width: ${n[e].dimensions}px;`),(({size:i})=>n[i].dimensions),(({size:i})=>n[i].dimensions),(({shape:i})=>"square"===i?"0px":"var(--borderRadiusCircle)"),(({onClick:i})=>i&&"cursor: pointer"),e);l.defaultProps={theme:r};export{m as StyledCustomImg,a as StyledIcon,l as StyledPortraitContainer,d as StyledPortraitInitials};

package/esm/components/preview/index.js

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

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

@@ -1,44 +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 { StyledPreview, StyledPreviewPlaceholder } from "./preview.style";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import useMediaQuery from "../../hooks/useMediaQuery";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-export const Preview = ({
-  children,
-  loading,
-  lines = 1,
-  height,
-  width,
-  shape = "text",
-  disableAnimation,
-  ...props
-}) => {
-  const marginProps = filterStyledSystemMarginProps(props);
-  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 = 0; i < lines; i++) {
-      placeholders.push(/*#__PURE__*/React.createElement(StyledPreviewPlaceholder, _extends({
-        "data-role": "preview-placeholder",
-        key: i,
-        height: height,
-        width: width,
-        isLastLine: isLastLine(i),
-        shape: shape,
-        disableAnimation: disableAnimation || reduceMotion
-      }, props, tagComponent("preview", props))));
-    }
-    return /*#__PURE__*/React.createElement(StyledPreview, _extends({
-      "data-role": "preview-wrapper"
-    }, marginProps), placeholders);
-  }
-  return /*#__PURE__*/React.createElement(StyledPreview, _extends({
-    "data-role": "preview-wrapper"
-  }, marginProps), children);
-};
-export default Preview;
+import{jsx as e}from"react/jsx-runtime";import"react";import{StyledPreviewPlaceholder as r,StyledPreview as t}from"./preview.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import n from"../../style/utils/filter-styled-system-margin-props.js";import i from"../../hooks/useMediaQuery/useMediaQuery.js";import o from"../../__internal__/utils/helpers/tags/tags.js";function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function l(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){s(e,r,t[r])}))}return e}function p(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const a=s=>{var{children:a,loading:c,lines:u=1,height:f,width:y,shape:b="text",disableAnimation:d}=s,O=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(s,["children","loading","lines","height","width","shape","disableAnimation"]);const m=n(O),h=null!=c?c:!a,j=!i("screen and (prefers-reduced-motion: no-preference)");if(h){const n=[];for(let t=0;t<u;t++)n.push(e(r,l({"data-role":"preview-placeholder",height:f,width:y,isLastLine:(g=t,u>1&&u===g+1),shape:b,disableAnimation:d||j},O,o("preview",O)),t));return e(t,p(l({"data-role":"preview-wrapper"},m),{children:n}))}var g;return e(t,p(l({"data-role":"preview-wrapper"},m),{children:a}))};export{a as Preview,a as default};

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

@@ -1,86 +1 @@
-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
-};
-export { StyledPreview, StyledPreviewPlaceholder };
+import e,{keyframes as i,css as r}from"styled-components";import{margin as t}from"styled-system";import a from"../../style/themes/base/index.js";const n=e.div.withConfig({displayName:"preview.style__StyledPreview",componentId:"sc-29c4aa6d-0"})(["",""],t),o=i(["0%{opacity:0.1;}70%{opacity:1;}100%{opacity:0.1;}"]);function s(e){return e.includes("rectangle")?"var(--sizing400)":"circle"===e?"var(--sizing700)":"var(--sizing175)"}function c(e){return e.includes("rectangle")?"var(--sizing1500)":"100%"}const d=e.span.withConfig({displayName:"preview.style__StyledPreviewPlaceholder",componentId:"sc-29c4aa6d-1"})(["",""],(({shape:e,disableAnimation:i,isLastLine:t,height:a,width:n})=>r(["display:block;background:linear-gradient( 135deg,var(--colorsUtilityMajor100),var(--colorsUtilityMajor040) );border-radius:",";height:",";width:",";animation:"," 2s ease infinite;"," "," "," & + &{margin-top:6px;}"],function(e){switch(e){case"rectangle-round":return"var(--borderRadius400)";case"circle":return"var(--borderRadiusCircle)";default:return"var(--borderRadius100)"}}(e),a||s(e),n||c(e),o,t&&"text"===e&&r(["width:calc(","*0.8);"],n||c(e)),"circle"===e&&r(["width:",";"],a||s(e)),i&&r(["animation:none;"]))));n.defaultProps={theme:a};export{n as StyledPreview,d as StyledPreviewPlaceholder};

package/esm/components/profile/index.js

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