carbon-react 154.3.2 → 154.3.3-beta.1

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

@@ -1,118 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PopoverContainerWrapperStyle = exports.PopoverContainerTitleStyle = exports.PopoverContainerOpenIcon = exports.PopoverContainerHeaderStyle = exports.PopoverContainerContentStyle = exports.PopoverContainerCloseIcon = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _styledSystem = require("styled-system");
-var _themes = require("../../style/themes");
-var _iconButton = _interopRequireDefault(require("../icon-button"));
-var _icon = _interopRequireDefault(require("../icon/icon.style"));
-var _form = require("../form/form.style");
-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 PopoverContainerWrapperStyle = exports.PopoverContainerWrapperStyle = _styledComponents.default.div`
-  position: relative;
-  display: inline-block;
-
-  ${({
-  hasFullWidth
-}) => hasFullWidth && (0, _styledComponents.css)`
-      width: 100%;
-    `}
-`;
-const PopoverContainerHeaderStyle = exports.PopoverContainerHeaderStyle = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-  max-width: 280px;
-`;
-const PopoverContainerContentStyle = exports.PopoverContainerContentStyle = _styledComponents.default.div`
-  ${_styledSystem.padding}
-
-  background: var(--colorsUtilityYang100);
-  border-radius: var(--borderRadius100);
-  box-shadow: var(--boxShadow100);
-  min-width: 300px;
-  position: absolute;
-  z-index: 2000;
-
-  ${({
-  disableAnimation
-}) => disableAnimation ? (0, _styledComponents.css)`
-          opacity: 1;
-          transform: none;
-        ` : (0, _styledComponents.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(${_form.StyledForm}.sticky) {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-
-    ${_form.StyledForm}.sticky {
-      ${_form.StyledFormContent} {
-        flex-grow: 1;
-        min-height: 0;
-        overflow-y: auto;
-      }
-
-      ${_form.StyledFormFooter} {
-        border-bottom-right-radius: var(--borderRadius200);
-        border-bottom-left-radius: var(--borderRadius200);
-      }
-    }
-  }
-`;
-const PopoverContainerOpenIcon = exports.PopoverContainerOpenIcon = (0, _styledComponents.default)(_iconButton.default)`
-  ${_icon.default} {
-    color: var(--colorsActionMinor500);
-  }
-`;
-const PopoverContainerCloseIcon = exports.PopoverContainerCloseIcon = (0, _styledComponents.default)(_iconButton.default)`
-  position: absolute;
-  top: 16px;
-  right: 24px;
-
-  ${_icon.default} {
-    color: var(--colorsActionMinor500);
-  }
-`;
-const PopoverContainerTitleStyle = exports.PopoverContainerTitleStyle = _styledComponents.default.div`
-  font-size: 16px;
-  font-weight: 500;
-`;
-PopoverContainerContentStyle.defaultProps = {
-  theme: _themes.baseTheme
-};
+"use strict";var e=require("styled-components"),o=require("styled-system");require("../../style/themes/sage/index.js");var t=require("../../style/themes/base/index.js");require("../../style/themes/none/index.js");var n=require("../icon-button/icon-button.component.js"),r=require("../icon/icon.style.js"),i=require("../form/form.style.js");function a(e){return e&&e.__esModule?e:{default:e}}var s=a(e);const p=s.default.div.withConfig({displayName:"popover-container.style__PopoverContainerWrapperStyle",componentId:"sc-4b145903-0"})(["position:relative;display:inline-block;",""],(({hasFullWidth:o})=>o&&e.css(["width:100%;"]))),l=s.default.div.withConfig({displayName:"popover-container.style__PopoverContainerHeaderStyle",componentId:"sc-4b145903-1"})(["display:flex;justify-content:space-between;margin-bottom:8px;max-width:280px;"]),d=s.default.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);}}}"],o.padding,(({disableAnimation:o})=>o?e.css(["opacity:1;transform:none;"]):e.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);}"])),i.StyledForm,i.StyledForm,i.StyledFormContent,i.StyledFormFooter),c=s.default(n.default).withConfig({displayName:"popover-container.style__PopoverContainerOpenIcon",componentId:"sc-4b145903-3"})(["","{color:var(--colorsActionMinor500);}"],r.default),y=s.default(n.default).withConfig({displayName:"popover-container.style__PopoverContainerCloseIcon",componentId:"sc-4b145903-4"})(["position:absolute;top:16px;right:24px;","{color:var(--colorsActionMinor500);}"],r.default),u=s.default.div.withConfig({displayName:"popover-container.style__PopoverContainerTitleStyle",componentId:"sc-4b145903-5"})(["font-size:16px;font-weight:500;"]);d.defaultProps={theme:t.default},exports.PopoverContainerCloseIcon=y,exports.PopoverContainerContentStyle=d,exports.PopoverContainerHeaderStyle=l,exports.PopoverContainerOpenIcon=c,exports.PopoverContainerTitleStyle=u,exports.PopoverContainerWrapperStyle=p;

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

@@ -1,9 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = /*#__PURE__*/_react.default.createContext({});
+"use strict";function e(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")).default.createContext({});exports.default=t;

package/lib/components/portal/index.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _portal.default;
-  }
-});
-var _portal = _interopRequireDefault(require("./portal"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./portal.js");exports.default=e.Portal;

package/lib/components/portal/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../esm/components/portal/index.js",
   "main": "./index.js",
+  "module": "../../../esm/components/portal/index.js",
   "types": "./index.d.ts"
 }

package/lib/components/portal/portal.js

@@ -1,99 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Portal = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
-var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
-var _portal = _interopRequireDefault(require("./portal.style"));
-var _portal2 = _interopRequireDefault(require("./__internal__/portal.context"));
-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 Container = _styledComponents.default.div`
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-     {
-      position: relative;
-      z-index: ${theme.zIndex.aboveAll};
-    }
-  `}
-`;
-const Portal = ({
-  children,
-  className,
-  id,
-  onReposition,
-  inertOptOut
-}) => {
-  const [portalNode, setPortalNode] = (0, _react.useState)(null);
-  const uniqueId = (0, _react.useMemo)(() => (0, _guid.default)(), []);
-  const {
-    renderInRoot
-  } = (0, _react.useContext)(_portal2.default);
-  (0, _react.useEffect)(() => {
-    if (onReposition) {
-      onReposition();
-      window.addEventListener("resize", onReposition);
-    }
-    return () => {
-      if (onReposition) {
-        window.removeEventListener("resize", onReposition);
-      }
-    };
-  }, [onReposition]);
-  (0, _react.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.default.createElement(Container, null, children) : children;
-  return /*#__PURE__*/_react.default.createElement(_portal.default, {
-    "data-role": "data-portal-entrance",
-    "data-portal-entrance": uniqueId
-  }, /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, portalContent), getPortalContainer()));
-};
-exports.Portal = Portal;
-var _default = exports.default = Portal;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),n=require("styled-components"),o=require("../../__internal__/utils/helpers/guid/index.js"),s=require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js"),a=require("./portal.style.js"),d=require("./__internal__/portal.context.js");function l(e){return e&&e.__esModule?e:{default:e}}var i=l(r);const u=l(n).default.div.withConfig({displayName:"portal__Container",componentId:"sc-20d5679d-0"})(["",""],(({theme:e})=>n.css(["{position:relative;z-index:",";}"],e.zIndex.aboveAll))),c=({children:r,className:n,id:l,onReposition:c,inertOptOut:p})=>{const[m,f]=t.useState(null),v=t.useMemo((()=>o.default()),[]),{renderInRoot:x}=t.useContext(d.default);t.useEffect((()=>(c&&(c(),window.addEventListener("resize",c)),()=>{c&&window.removeEventListener("resize",c)})),[c]),t.useEffect((()=>()=>{null==m||m.remove()}),[]);const _=p?e.jsx(u,{children:r}):r;return e.jsx(a.default,{"data-role":"data-portal-entrance","data-portal-entrance":v,children:i.default.createPortal(e.jsx(s.default,{children:_}),(()=>{const e="carbon-portal";let t=m;if(!t&&void 0!==l&&document.getElementById(l))t=document.getElementById(l),f(t);else if(!t||0===document.getElementsByClassName(e).length){t=document.createElement("div"),t.classList.add(e),t.setAttribute("data-portal-exit",v),t.setAttribute("data-role","carbon-portal-exit"),void 0!==l&&t.setAttribute("id",l),p&&t.setAttribute("data-not-inert","true"),f(t);let r=document.body;const n=document.getElementById("root");n&&x&&(r=n),r.appendChild(t)}return n&&(t=(e=>(null==n||n.split(" ").forEach((t=>{null==e||e.classList.add(t)})),e))(t)),t})())})};exports.Portal=c,exports.default=c;

package/lib/components/portal/portal.style.js

@@ -1,14 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledPortalEntrance = _styledComponents.default.span`
-  display: none;
-  height: 0;
-  width: 0;
-`;
-var _default = exports.default = StyledPortalEntrance;
+"use strict";function e(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("styled-components")).default.span.withConfig({displayName:"portal.style__StyledPortalEntrance",componentId:"sc-9fd1b647-0"})(["display:none;height:0;width:0;"]);exports.default=t;

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

@@ -1,81 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-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};`;
-};
-var _default = exports.default = getColoursForPortrait;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t=(t,r)=>{const[o,e]=t>r?[t,r]:[r,t];return(o+.05)/(e+.05)},r=t=>{const r=t.replace("#",""),o=parseInt(r.slice(0,2),16),e=parseInt(r.slice(2,4),16),l=parseInt(r.slice(4,6),16),i=t=>{const r=t/255;return r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4)};return.2126*i(o)+.7152*i(e)+.0722*i(l)};exports.default=(o,e=!1,l=!1,i=!1,n=void 0)=>{let s="var(--colorsUtilityYin090)",c="var(--colorsUtilityReadOnly400)";return!e||o||n||(c="var(--colorsUtilityYin090)",s="var(--colorsUtilityReadOnly600)"),o&&(c=o,s=function(o,e,l){const i=r(o),n=r("#FFFFFF"),s=r("#000000"),c=t(i,n),F=t(i,s),a=l?e?4.5:7:e?3:4.5;return c>=a&&c>F?"#FFFFFF":F>=a?"var(--colorsUtilityYin090)":c>F?"#FFFFFF":"var(--colorsUtilityYin090)"}(o,l,i)),n&&(s=n),`background-color: ${c}; color: ${s};`};

package/lib/components/portrait/index.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _portrait.default;
-  }
-});
-var _portrait = _interopRequireDefault(require("./portrait.component"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./portrait.component.js");exports.default=e.Portrait;

package/lib/components/portrait/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../esm/components/portrait/index.js",
   "main": "./index.js",
+  "module": "../../../esm/components/portrait/index.js",
   "types": "./index.d.ts"
 }

package/lib/components/portrait/portrait.component.js

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

package/lib/components/portrait/portrait.config.js

@@ -1,38 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PORTRAIT_SIZE_PARAMS = exports.PORTRAIT_SIZES = exports.PORTRAIT_SHAPES = void 0;
-const PORTRAIT_SHAPES = exports.PORTRAIT_SHAPES = ["circle", "square"];
-const PORTRAIT_SIZES = exports.PORTRAIT_SIZES = ["XS", "S", "M", "ML", "L", "XL", "XXL"];
-const PORTRAIT_SIZE_PARAMS = exports.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
-  }
-};
+"use strict";exports.PORTRAIT_SHAPES=["circle","square"],exports.PORTRAIT_SIZES=["XS","S","M","ML","L","XL","XXL"],exports.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}};

package/lib/components/portrait/portrait.style.js

@@ -1,77 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledPortraitInitials = exports.StyledPortraitContainer = exports.StyledIcon = exports.StyledCustomImg = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _styledSystem = require("styled-system");
-var _icon = _interopRequireDefault(require("../icon"));
-var _profile = _interopRequireDefault(require("../profile/profile.config"));
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-var _portrait = require("./portrait.config");
-var _utils = _interopRequireDefault(require("./__internal__/utils"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledPortraitInitials = exports.StyledPortraitInitials = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: ${({
-  size
-}) => _profile.default[size].initialSize};
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
-  justify-content: center;
-  height: inherit;
-  width: inherit;
-`;
-const StyledCustomImg = exports.StyledCustomImg = _styledComponents.default.img`
-  height: inherit;
-  min-width: inherit;
-`;
-
-// && is used here to increase the specificity
-const StyledIcon = exports.StyledIcon = (0, _styledComponents.default)(_icon.default)`
-  && {
-    color: inherit;
-    height: inherit;
-    min-width: inherit;
-
-    ::before {
-      font-size: ${({
-  size
-}) => _portrait.PORTRAIT_SIZE_PARAMS[size].iconDimensions}px;
-    }
-  }
-`;
-const StyledPortraitContainer = exports.StyledPortraitContainer = _styledComponents.default.div`
-  ${({
-  darkBackground,
-  backgroundColor,
-  size,
-  foregroundColor
-}) => (0, _utils.default)(backgroundColor, darkBackground, !["XS", "S"].includes(size), true, foregroundColor)};
-  ${({
-  hasValidImg,
-  size
-}) => hasValidImg && `max-width: ${_portrait.PORTRAIT_SIZE_PARAMS[size].dimensions}px;`}
-  min-width: ${({
-  size
-}) => _portrait.PORTRAIT_SIZE_PARAMS[size].dimensions}px;
-  height: ${({
-  size
-}) => _portrait.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"}
-  ${_styledSystem.margin}
-`;
-StyledPortraitContainer.defaultProps = {
-  theme: _base.default
-};
+"use strict";require("react");var e=require("styled-components"),i=require("styled-system"),t=require("../icon/icon.component.js"),r=require("../profile/profile.config.js"),o=require("../../style/themes/base/index.js"),n=require("./portrait.config.js"),s=require("./__internal__/utils.js");function d(e){return e&&e.__esModule?e:{default:e}}var a=d(e);const l=a.default.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:e})=>r.default[e].initialSize)),c=a.default.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-7962e194-1"})(["height:inherit;min-width:inherit;"]),p=a.default(t.default).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-7962e194-2"})(["&&{color:inherit;height:inherit;min-width:inherit;::before{font-size:","px;}}"],(({size:e})=>n.PORTRAIT_SIZE_PARAMS[e].iconDimensions)),u=a.default.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:e,backgroundColor:i,size:t,foregroundColor:r})=>s.default(i,e,!["XS","S"].includes(t),!0,r)),(({hasValidImg:e,size:i})=>e&&`max-width: ${n.PORTRAIT_SIZE_PARAMS[i].dimensions}px;`),(({size:e})=>n.PORTRAIT_SIZE_PARAMS[e].dimensions),(({size:e})=>n.PORTRAIT_SIZE_PARAMS[e].dimensions),(({shape:e})=>"square"===e?"0px":"var(--borderRadiusCircle)"),(({onClick:e})=>e&&"cursor: pointer"),i.margin);u.defaultProps={theme:o.default},exports.StyledCustomImg=c,exports.StyledIcon=p,exports.StyledPortraitContainer=u,exports.StyledPortraitInitials=l;

package/lib/components/preview/index.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _preview.default;
-  }
-});
-var _preview = _interopRequireDefault(require("./preview.component"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./preview.component.js");exports.default=e.Preview;

package/lib/components/preview/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../esm/components/preview/index.js",
   "main": "./index.js",
+  "module": "../../../esm/components/preview/index.js",
   "types": "./index.d.ts"
 }