carbon-react 154.4.1 → 154.4.3

package/esm/components/toast/toast.style.js

@@ -1,226 +1 @@
-import styled, { css } from "styled-components";
-import StyledIconButton from "../icon-button/icon-button.style";
-import Portal from "../portal/portal";
-import baseTheme from "../../style/themes/base";
-import StyledIcon from "../icon/icon.style";
-const StyledPortal = styled(Portal)`
-  ${({
-  theme,
-  isNotice,
-  align,
-  alignY
-}) => css`
-    position: fixed;
-    top: 0;
-    z-index: ${theme.zIndex.notification};
-
-    ${align === "left" && css`
-      left: 0;
-      transform: translateX(50%);
-    `}
-
-    ${align === "center" && css`
-      margin-left: 50%;
-      transform: translateX(-50%);
-    `}
-
-    ${align === "right" && css`
-      right: 0;
-      transform: translateX(-50%);
-    `}
-
-    ${isNotice && css`
-      bottom: 0;
-      top: auto;
-      width: 100%;
-    `}
-
-    ${alignY === "top" && css`
-      top: 0;
-      bottom: auto;
-    `}
-
-    ${alignY === "center" && css`
-      top: 50%;
-      transform: translate(${align === "left" ? "50%" : "-50%"}, -50%);
-    `}
-
-    ${alignY === "bottom" && css`
-      bottom: 0;
-      top: auto;
-      display: flex;
-      flex-direction: column-reverse;
-    `}
-  `}
-`;
-StyledPortal.defaultProps = {
-  theme: baseTheme
-};
-const animationName = ".toast";
-const alternativeAnimationName = ".toast-alternative";
-const ToastColourVariants = {
-  error: "var(--colorsSemanticNegative500)",
-  info: "var(--colorsSemanticInfo500)",
-  success: "var(--colorsSemanticPositive500)",
-  warning: "var(--colorsSemanticCaution500)",
-  neutral: "var(--colorsSemanticNeutral500)"
-};
-const boxShadow = "0 10px 30px 0 rgba(0, 20, 29, 0.1), 0 30px 60px 0 rgba(0, 20, 29, 0.1)";
-const iconPositionStyles = css`
-  position: absolute;
-  right: 15px;
-  top: 50%;
-  transform: translateY(-50%);
-`;
-const StyledToast = styled.div`
-  ${({
-  maxWidth,
-  align,
-  isNotification,
-  alignY,
-  isNotice,
-  variant
-}) => css`
-    position: relative;
-    display: flex;
-    justify-content: flex-start;
-    align-content: center;
-    border-radius: var(--borderRadius100);
-    overflow: hidden;
-    border: 1px solid ${ToastColourVariants[variant]};
-    background-color: var(--colorsUtilityYang100);
-    min-height: 38px;
-
-    :focus {
-      outline: none;
-    }
-
-    ${StyledIconButton} {
-      ${iconPositionStyles}
-    }
-
-    box-shadow: ${boxShadow};
-    line-height: 22px;
-    margin-top: ${isNotice || alignY === "center" || alignY === "bottom" ? "0" : "30px"};
-    margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};
-    max-width: ${!maxWidth ? "300px" : maxWidth};
-    position: relative;
-    margin-right: ${align === "center" || align === "right" ? "auto" : "30px"};
-    margin-left: ${align === "center" || align === "left" ? "auto" : "30px"};
-
-    ${isNotification && css`
-      border: 1px solid var(--colorsSemanticInfo500);
-    `}
-  `}
-
-  :focus {
-    outline: none;
-  }
-
-  &${animationName}-appear, &${animationName}-enter {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-
-  &${animationName}-appear${animationName}-appear-active,
-    &${animationName}-enter${animationName}-enter-active {
-    opacity: 1;
-    transform: ${({
-  align
-}) => align === "center" ? " scale(1) translateY(0)" : "scale(1)"};
-    transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
-  }
-
-  &${animationName}-exit${animationName}-exit-active {
-    opacity: 0;
-
-    ${({
-  alignY
-}) => alignY === "bottom" ? "margin-bottom: -40px" : "margin-top: -40px"};
-    transition: all 150ms ease-out;
-  }
-
-  ${StyledIconButton} {
-    ${iconPositionStyles}
-  }
-
-  ${({
-  isNotice,
-  alignY
-}) => isNotice && css`
-      background-color: var(--colorsUtilityMajor400);
-      border: none;
-      color: var(--colorsSemanticNeutralYang100);
-      margin-right: 0;
-      max-width: 100%;
-
-      ${StyledIconButton} {
-        right: 55px;
-      }
-
-      ${StyledIconButton} ${StyledIcon} {
-        color: var(--colorsSemanticNeutralYang100);
-      }
-
-      &${alternativeAnimationName}-appear, &${alternativeAnimationName}-enter {
-        ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
-        opacity: 0;
-      }
-
-      &${alternativeAnimationName}-exit {
-        ${alignY === "top" ? "top: 0" : "bottom: 0"};
-        opacity: 1;
-      }
-
-      &${alternativeAnimationName}-appear${alternativeAnimationName}-appear-active,
-        &${alternativeAnimationName}-enter${alternativeAnimationName}-enter-active {
-        ${alignY === "top" ? "top: 0" : "bottom: 0"};
-        opacity: 1;
-        transition: all 400ms ease;
-      }
-
-      &${alternativeAnimationName}-exit${alternativeAnimationName}-exit-active {
-        ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
-        opacity: 0;
-        transition: all 200ms ease;
-      }
-    `}
-`;
-const StyledToastContent = styled.div`
-  padding: 8px 16px 8px 16px;
-  white-space: pre-wrap;
-  flex: 1;
-
-  ${({
-  isNotice
-}) => isNotice && css`
-      display: flex;
-      align-items: center;
-      padding: 11px 40px;
-    `}
-
-  ${({
-  isDismiss,
-  isNotice
-}) => isDismiss && css`
-      padding-right: ${isNotice ? "88px" : "48px"};
-    `}
-`;
-const ToastWrapper = styled.div`
-  ${({
-  align
-}) => align && css`
-      position: relative;
-      width: auto;
-      height: auto;
-      justify-content: ${align};
-      display: flex;
-    `}
-
-  ${({
-  isNotice
-}) => isNotice && css`
-      display: block;
-    `}
-`;
-export { StyledPortal, StyledToast, StyledToastContent, ToastWrapper };
+import t,{css as o}from"styled-components";import e from"../icon-button/icon-button.style.js";import{Portal as a}from"../portal/portal.js";import i from"../../style/themes/base/index.js";import r from"../icon/icon.style.js";const n=t(a).withConfig({displayName:"toast.style__StyledPortal",componentId:"sc-45e811f8-0"})(["",""],(({theme:t,isNotice:e,align:a,alignY:i})=>o(["position:fixed;top:0;z-index:",";"," "," "," "," "," "," ",""],t.zIndex.notification,"left"===a&&o(["left:0;transform:translateX(50%);"]),"center"===a&&o(["margin-left:50%;transform:translateX(-50%);"]),"right"===a&&o(["right:0;transform:translateX(-50%);"]),e&&o(["bottom:0;top:auto;width:100%;"]),"top"===i&&o(["top:0;bottom:auto;"]),"center"===i&&o(["top:50%;transform:translate(",",-50%);"],"left"===a?"50%":"-50%"),"bottom"===i&&o(["bottom:0;top:auto;display:flex;flex-direction:column-reverse;"]))));n.defaultProps={theme:i};const s=".toast",p=".toast-alternative",l={error:"var(--colorsSemanticNegative500)",info:"var(--colorsSemanticInfo500)",success:"var(--colorsSemanticPositive500)",warning:"var(--colorsSemanticCaution500)",neutral:"var(--colorsSemanticNeutral500)"},c=o(["position:absolute;right:15px;top:50%;transform:translateY(-50%);"]),m=t.div.withConfig({displayName:"toast.style__StyledToast",componentId:"sc-45e811f8-1"})([""," :focus{outline:none;}&","-appear,&","-enter{opacity:0;transform:scale(0.5);}&","-appear","-appear-active,&","-enter","-enter-active{opacity:1;transform:",";transition:all 300ms cubic-bezier(0.25,0.25,0,1.5);}&","-exit","-exit-active{opacity:0;",";transition:all 150ms ease-out;}","{","}",""],(({maxWidth:t,align:a,isNotification:i,alignY:r,isNotice:n,variant:s})=>o(["position:relative;display:flex;justify-content:flex-start;align-content:center;border-radius:var(--borderRadius100);overflow:hidden;border:1px solid ",";background-color:var(--colorsUtilityYang100);min-height:38px;:focus{outline:none;}","{","}box-shadow:",";line-height:22px;margin-top:",";margin-bottom:",";max-width:",";position:relative;margin-right:",";margin-left:",";",""],l[s],e,c,"0 10px 30px 0 rgba(0, 20, 29, 0.1), 0 30px 60px 0 rgba(0, 20, 29, 0.1)",n||"center"===r||"bottom"===r?"0":"30px","bottom"!==r||n?"0":"30px",t||"300px","center"===a||"right"===a?"auto":"30px","center"===a||"left"===a?"auto":"30px",i&&o(["border:1px solid var(--colorsSemanticInfo500);"]))),s,s,s,s,s,s,(({align:t})=>"center"===t?" scale(1) translateY(0)":"scale(1)"),s,s,(({alignY:t})=>"bottom"===t?"margin-bottom: -40px":"margin-top: -40px"),e,c,(({isNotice:t,alignY:a})=>t&&o(["background-color:var(--colorsUtilityMajor400);border:none;color:var(--colorsSemanticNeutralYang100);margin-right:0;max-width:100%;","{right:55px;}"," ","{color:var(--colorsSemanticNeutralYang100);}&","-appear,&","-enter{",";opacity:0;}&","-exit{",";opacity:1;}&","-appear","-appear-active,&","-enter","-enter-active{",";opacity:1;transition:all 400ms ease;}&","-exit","-exit-active{",";opacity:0;transition:all 200ms ease;}"],e,e,r,p,p,"top"===a?"top: -40px":"bottom: -40px",p,"top"===a?"top: 0":"bottom: 0",p,p,p,p,"top"===a?"top: 0":"bottom: 0",p,p,"top"===a?"top: -40px":"bottom: -40px"))),d=t.div.withConfig({displayName:"toast.style__StyledToastContent",componentId:"sc-45e811f8-2"})(["padding:8px 16px 8px 16px;white-space:pre-wrap;flex:1;"," ",""],(({isNotice:t})=>t&&o(["display:flex;align-items:center;padding:11px 40px;"])),(({isDismiss:t,isNotice:e})=>t&&o(["padding-right:",";"],e?"88px":"48px"))),x=t.div.withConfig({displayName:"toast.style__ToastWrapper",componentId:"sc-45e811f8-3"})([""," ",""],(({align:t})=>t&&o(["position:relative;width:auto;height:auto;justify-content:",";display:flex;"],t)),(({isNotice:t})=>t&&o(["display:block;"])));export{n as StyledPortal,m as StyledToast,d as StyledToastContent,x as ToastWrapper};

package/esm/components/tooltip/index.js

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

package/esm/components/tooltip/tooltip-pointer.style.js

@@ -1,25 +1 @@
-import styled, { css } from "styled-components";
-import baseTheme from "../../style/themes/base";
-import { toColor } from "../../style/utils/color";
-const pointerColor = (theme, bgColor, type) => {
-  if (bgColor) return toColor(theme, bgColor);
-  return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
-};
-const StyledTooltipPointer = styled.div`
-  ${({
-  theme,
-  type,
-  bgColor
-}) => css`
-    z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437
-    background: ${pointerColor(theme, bgColor, type)};
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    transform: rotate(45deg);
-  `}
-`;
-StyledTooltipPointer.defaultProps = {
-  theme: baseTheme
-};
-export default StyledTooltipPointer;
+import o,{css as t}from"styled-components";import e from"../../style/themes/base/index.js";import{toColor as r}from"../../style/utils/color.js";const i=o.div.withConfig({displayName:"tooltip-pointer.style__StyledTooltipPointer",componentId:"sc-d8a129c7-0"})(["",""],(({theme:o,type:e,bgColor:i})=>t(["z-index:",";background:",";position:absolute;width:12px;height:12px;transform:rotate(45deg);"],o.zIndex.popover,((o,t,e)=>t?r(o,t):"error"===e?"var(--colorsSemanticNegative500)":"var(--colorsSemanticNeutral500)")(o,i,e))));i.defaultProps={theme:e};export{i as default};

package/esm/components/tooltip/tooltip.component.js

@@ -1,185 +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, { useRef, useMemo, useCallback, useState, useEffect } from "react";
-import invariant from "invariant";
-import { offset, flip, shift, arrow, limitShift, autoUpdate, useFloating } from "@floating-ui/react-dom";
-import StyledTooltip from "./tooltip.style";
-import StyledPointer from "./tooltip-pointer.style";
-import { TOOLTIP_POSITIONS } from "./tooltip.config";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import Portal from "../portal";
-function preserveRef(ref, node) {
-  if (!ref) return;
-  if (typeof ref === "function") {
-    ref(node);
-  }
-  if (typeof ref === "object" && "current" in ref) {
-    ref.current = node;
-  }
-}
-const TOOLTIP_DELAY = 100;
-export const Tooltip = /*#__PURE__*/React.forwardRef(({
-  children,
-  isVisible,
-  position = "top",
-  message,
-  type,
-  size = "medium",
-  isPartOfInput,
-  inputSize = "medium",
-  id,
-  bgColor,
-  fontColor,
-  flipOverrides,
-  target,
-  ...rest
-}, ref) => {
-  const targetInternalRef = useRef(null);
-  const isControlled = isVisible !== undefined;
-  const [isOpen, setIsOpen] = useState(false);
-  let showTooltip = isOpen;
-  if (isControlled) {
-    showTooltip = isVisible;
-  }
-  const showDelayedTimeout = useRef(undefined);
-  const hideDelayedTimeout = useRef(undefined);
-  useEffect(() => {
-    return () => {
-      clearTimeout(showDelayedTimeout.current);
-      clearTimeout(hideDelayedTimeout.current);
-    };
-  }, []);
-  const show = useCallback(() => setIsOpen(true), []);
-  const hide = useCallback(() => setIsOpen(false), []);
-  const showDelayed = useCallback(() => {
-    showDelayedTimeout.current = window.setTimeout(show, TOOLTIP_DELAY);
-  }, [show]);
-  const hideDelayed = useCallback(() => {
-    hideDelayedTimeout.current = window.setTimeout(hide, TOOLTIP_DELAY);
-  }, [hide]);
-  useEffect(() => {
-    const events = {
-      mouseenter: showDelayed,
-      mouseleave: hideDelayed,
-      focus: show,
-      blur: hide
-    };
-    const targetElement = target || targetInternalRef.current;
-    if (!isControlled) {
-      Object.entries(events).forEach(([event, handler]) => {
-        targetElement?.addEventListener(event, handler);
-      });
-    }
-    return () => {
-      if (!isControlled) {
-        Object.entries(events).forEach(([event, handler]) => {
-          targetElement?.removeEventListener(event, handler);
-        });
-      }
-    };
-  }, [children, show, showDelayed, hide, hideDelayed, isControlled, target]);
-  const flipOverridesRef = useRef(flipOverrides);
-  flipOverridesRef.current = flipOverrides;
-  const arrowReference = useRef(null);
-  const calculateOffset = useCallback(placement => {
-    let mainAxisOffset = 9;
-    if (isPartOfInput) {
-      const offsets = {
-        small: 5,
-        medium: ["top", "bottom"].includes(placement) ? 6 : 8,
-        large: ["top", "bottom"].includes(placement) ? 10 : 12
-      };
-      mainAxisOffset = offsets[inputSize];
-    }
-    return mainAxisOffset;
-  }, [inputSize, isPartOfInput]);
-  const defaultMiddleware = useMemo(() => [offset(({
-    placement
-  }) => ({
-    mainAxis: calculateOffset(placement)
-  })), flip({
-    fallbackPlacements: flipOverridesRef.current
-  }), shift({
-    padding: 5,
-    limiter: limitShift({
-      offset: ({
-        rects
-      }) => ({
-        mainAxis: rects.reference.height
-      })
-    })
-  }), arrow({
-    element: arrowReference
-  })], [calculateOffset, arrowReference]);
-  const {
-    x,
-    y,
-    reference,
-    floating,
-    strategy,
-    placement: currentPlacement,
-    middlewareData
-  } = useFloating({
-    placement: position,
-    middleware: defaultMiddleware,
-    whileElementsMounted: autoUpdate
-  });
-  const tooltipStyle = {
-    position: strategy,
-    top: y ?? 0,
-    left: x ?? 0
-  };
-  const handleTargetRef = useCallback(node => {
-    reference(target || node);
-    targetInternalRef.current = node;
-    preserveRef(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    children.ref, node);
-  }, [reference, children, target]);
-  const handleFloatingRef = useCallback(node => {
-    floating(node);
-    preserveRef(ref, node);
-  }, [floating, ref]);
-  const staticSide = {
-    top: "bottom",
-    right: "left",
-    bottom: "top",
-    left: "right"
-  }[currentPlacement.split("-")[0]];
-  const {
-    x: arrowX,
-    y: arrowY
-  } = middlewareData.arrow || {};
-  const arrowStyle = {
-    left: arrowX,
-    top: arrowY,
-    [staticSide]: "-6px"
-  };
-  const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => TOOLTIP_POSITIONS.includes(placement));
-  !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? invariant(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, {
-    ref: handleTargetRef
-  }), showTooltip ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
-    "data-element": "tooltip",
-    "data-role": "tooltip",
-    role: "tooltip",
-    tabIndex: -1,
-    type: type,
-    size: size,
-    id: id
-  }, tagComponent("tooltip", rest), {
-    ref: handleFloatingRef,
-    bgColor: bgColor,
-    fontColor: fontColor,
-    style: tooltipStyle,
-    "data-placement": currentPlacement
-  }), /*#__PURE__*/React.createElement(StyledPointer, {
-    type: type,
-    ref: arrowReference,
-    "data-element": "tooltip-pointer",
-    "data-role": "tooltip-pointer",
-    bgColor: bgColor,
-    style: arrowStyle
-  }), message)) : null);
-});
-Tooltip.displayName = "Tooltip";
-export default Tooltip;
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useEffect as l,useCallback as c,useMemo as p}from"react";import s from"invariant";import{offset as a,flip as u,shift as f,limitShift as m,arrow as b,useFloating as d,autoUpdate as y}from"@floating-ui/react-dom";import O from"./tooltip.style.js";import g from"./tooltip-pointer.style.js";import{TOOLTIP_POSITIONS as j}from"./tooltip.config.js";import h from"../../__internal__/utils/helpers/tags/tags.js";import{Portal as v}from"../portal/portal.js";function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(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){w(e,t,r[t])}))}return e}function x(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}function E(e,t){e&&("function"==typeof e&&e(t),"object"==typeof e&&"current"in e&&(e.current=t))}const S=o.forwardRef(((w,S)=>{var{children:C,isVisible:T,position:z="top",message:D,type:k,size:A="medium",isPartOfInput:I,inputSize:_="medium",id:L,bgColor:V,fontColor:M,flipOverrides:N,target:R}=w,q=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(w,["children","isVisible","position","message","type","size","isPartOfInput","inputSize","id","bgColor","fontColor","flipOverrides","target"]);const B=n(null),F=void 0!==T,[G,H]=i(!1);let J=G;F&&(J=T);const K=n(void 0),Q=n(void 0);l((()=>()=>{clearTimeout(K.current),clearTimeout(Q.current)}),[]);const U=c((()=>H(!0)),[]),W=c((()=>H(!1)),[]),X=c((()=>{K.current=window.setTimeout(U,100)}),[U]),Y=c((()=>{Q.current=window.setTimeout(W,100)}),[W]);l((()=>{const e={mouseenter:X,mouseleave:Y,focus:U,blur:W},t=R||B.current;return F||Object.entries(e).forEach((([e,r])=>{null==t||t.addEventListener(e,r)})),()=>{F||Object.entries(e).forEach((([e,r])=>{null==t||t.removeEventListener(e,r)}))}}),[C,U,X,W,Y,F,R]);const Z=n(N);Z.current=N;const $=n(null),ee=c((e=>{let t=9;return I&&(t={small:5,medium:["top","bottom"].includes(e)?6:8,large:["top","bottom"].includes(e)?10:12}[_]),t}),[_,I]),te=p((()=>[a((({placement:e})=>({mainAxis:ee(e)}))),u({fallbackPlacements:Z.current}),f({padding:5,limiter:m({offset:({rects:e})=>({mainAxis:e.reference.height})})}),b({element:$})]),[ee,$]),{x:re,y:oe,reference:ne,floating:ie,strategy:le,placement:ce,middlewareData:pe}=d({placement:z,middleware:te,whileElementsMounted:y}),se={position:le,top:null!=oe?oe:0,left:null!=re?re:0},ae=c((e=>{ne(R||e),B.current=e,E(C.ref,e)}),[ne,C,R]),ue=c((e=>{ie(e),E(S,e)}),[ie,S]),fe={top:"bottom",right:"left",bottom:"top",left:"right"}[ce.split("-")[0]],{x:me,y:be}=pe.arrow||{},de={left:me,top:be,[fe]:"-6px"},ye=!N||Array.isArray(N)&&N.every((e=>j.includes(e)));return s(ye,'The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].'),e(t,{children:[o.cloneElement(C,{ref:ae}),J?r(v,{children:e(O,x(P({"data-element":"tooltip","data-role":"tooltip",role:"tooltip",tabIndex:-1,type:k,size:A,id:L},h("tooltip",q)),{ref:ue,bgColor:V,fontColor:M,style:se,"data-placement":ce,children:[r(g,{type:k,ref:$,"data-element":"tooltip-pointer","data-role":"tooltip-pointer",bgColor:V,style:de}),D]}))}):null]})}));S.displayName="Tooltip";export{S as Tooltip,S as default};

package/esm/components/tooltip/tooltip.config.js

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
-export const TOOLTIP_POSITIONS = ["bottom", "left", "right", "top"];
+const t=["bottom","left","right","top"];export{t as TOOLTIP_POSITIONS};

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

@@ -1,3 +1,3 @@
 import { TooltipProps } from "./tooltip.component";
-declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, Pick<TooltipProps, "type" | "size" | "bgColor" | "fontColor">, never>;
+declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, Pick<TooltipProps, "size" | "type" | "bgColor" | "fontColor">, never>;
 export default StyledTooltip;

package/esm/components/tooltip/tooltip.style.js

@@ -1,48 +1 @@
-import styled, { css, keyframes } from "styled-components";
-import baseTheme from "../../style/themes/base";
-import { toColor } from "../../style/utils/color";
-const fadeIn = keyframes`
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-`;
-const tooltipColor = (theme, bgColor, type) => {
-  if (bgColor) return toColor(theme, bgColor);
-  return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
-};
-const StyledTooltip = styled.div`
-  ${({
-  size,
-  theme,
-  type,
-  bgColor,
-  fontColor
-}) => css`
-    bottom: auto;
-    right: auto;
-    max-width: 300px;
-    width: max-content;
-    border-radius: var(--borderRadius050);
-    position: absolute;
-    animation: ${fadeIn} 0.2s linear;
-    z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437
-    text-align: left;
-    color: ${fontColor ? toColor(theme, fontColor) : "var(--colorsSemanticNeutralYang100)"};
-    display: inline-block;
-    padding: 8px 12px;
-    word-break: break-word;
-    white-space: pre-wrap;
-    font-size: ${size === "medium" ? "14px" : "16px"};
-    line-height: 1.5rem;
-    font-weight: 400;
-    background-color: ${tooltipColor(theme, bgColor, type)};
-  `}
-`;
-StyledTooltip.defaultProps = {
-  theme: baseTheme
-};
-export default StyledTooltip;
+import o,{keyframes as e,css as t}from"styled-components";import r from"../../style/themes/base/index.js";import{toColor as i}from"../../style/utils/color.js";const a=e(["0%{opacity:0;}100%{opacity:1;}"]),l=o.div.withConfig({displayName:"tooltip.style__StyledTooltip",componentId:"sc-8ae44e8c-0"})(["",""],(({size:o,theme:e,type:r,bgColor:l,fontColor:n})=>t(["bottom:auto;right:auto;max-width:300px;width:max-content;border-radius:var(--borderRadius050);position:absolute;animation:"," 0.2s linear;z-index:",";text-align:left;color:",";display:inline-block;padding:8px 12px;word-break:break-word;white-space:pre-wrap;font-size:",";line-height:1.5rem;font-weight:400;background-color:",";"],a,e.zIndex.popover,n?i(e,n):"var(--colorsSemanticNeutralYang100)","medium"===o?"14px":"16px",((o,e,t)=>e?i(o,e):"error"===t?"var(--colorsSemanticNegative500)":"var(--colorsSemanticNeutral500)")(e,l,r))));l.defaultProps={theme:r};export{l as default};

package/esm/components/typography/index.js

@@ -1,2 +1 @@
-export { default } from "./typography.component";
-export { List, ListItem } from "./list.component";
+export{Typography as default}from"./typography.component.js";export{List,ListItem}from"./list.component.js";

package/esm/components/typography/list.component.js

@@ -1,39 +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, { useContext } from "react";
-import Typography from "./typography.component";
-import ListContext from "./list.context";
-const getListStyleType = as => {
-  if (as === "ul") {
-    return "square";
-  }
-  return "decimal";
-};
-const List = ({
-  children,
-  as = "ul",
-  variant = "p",
-  ...props
-}) => /*#__PURE__*/React.createElement(Typography, _extends({
-  variant: variant,
-  as: as,
-  listStyleType: getListStyleType(as)
-}, props), /*#__PURE__*/React.createElement(ListContext.Provider, {
-  value: {
-    variant
-  }
-}, children));
-const ListItem = ({
-  children,
-  ...props
-}) => {
-  const {
-    variant: parentListVariant
-  } = useContext(ListContext);
-  return /*#__PURE__*/React.createElement(Typography, _extends({
-    as: "li",
-    m: "0 0 8px 16px"
-  }, props, {
-    variant: parentListVariant
-  }), children);
-};
-export { List, ListItem };
+import{jsx as r}from"react/jsx-runtime";import{useContext as e}from"react";import{Typography as t}from"./typography.component.js";import{ListContext as n}from"./list.context.js";function o(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function c(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),n.forEach((function(e){o(r,e,t[e])}))}return r}function i(r,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(e)).forEach((function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})),r}function a(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t,n,o={},c=Object.keys(r);for(n=0;n<c.length;n++)t=c[n],e.indexOf(t)>=0||(o[t]=r[t]);return o}(r,e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(r);for(n=0;n<c.length;n++)t=c[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}const l=r=>"ul"===r?"square":"decimal",p=e=>{var{children:o,as:p="ul",variant:u="p"}=e,f=a(e,["children","as","variant"]);return r(t,i(c({variant:u,as:p,listStyleType:l(p)},f),{children:r(n.Provider,{value:{variant:u},children:o})}))},u=o=>{var{children:l}=o,p=a(o,["children"]);const{variant:u}=e(n);return r(t,i(c({as:"li",m:"0 0 8px 16px"},p),{variant:u,children:l}))};export{p as List,u as ListItem};

package/esm/components/typography/list.context.js

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

package/esm/components/typography/typography.component.js

@@ -1,79 +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 tagComponent from "../../__internal__/utils/helpers/tags";
-import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
-import StyledTypography from "./typography.style";
-export const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
-const getAs = variant => {
-  switch (variant) {
-    case "h1-large":
-      return "h1";
-    case "segment-header":
-    case "segment-header-small":
-    case "segment-subheader":
-    case "segment-subheader-alt":
-      return "h5";
-    case "big":
-      return "p";
-    default:
-      return variant;
-  }
-};
-export const Typography = ({
-  "data-component": dataComponent,
-  variant = "p",
-  as,
-  id,
-  fontSize,
-  fontWeight,
-  textTransform,
-  lineHeight,
-  textDecoration,
-  display,
-  listStyleType,
-  whiteSpace,
-  wordBreak,
-  wordWrap,
-  textAlign,
-  textOverflow,
-  truncate,
-  color = "blackOpacity90",
-  backgroundColor,
-  bg,
-  opacity,
-  children,
-  screenReaderOnly,
-  isDisabled,
-  "aria-hidden": ariaHidden,
-  className,
-  ...rest
-}) => {
-  return /*#__PURE__*/React.createElement(StyledTypography, _extends({
-    variant: variant,
-    as: as || getAs(variant),
-    id: id,
-    fontSize: fontSize,
-    fontWeight: fontWeight,
-    textTransform: textTransform,
-    lineHeight: lineHeight,
-    textDecoration: textDecoration,
-    display: display,
-    listStyleType: listStyleType,
-    whiteSpace: whiteSpace,
-    wordWrap: wordWrap,
-    wordBreak: wordBreak,
-    textAlign: textAlign,
-    textOverflow: textOverflow,
-    truncate: truncate,
-    color: color,
-    backgroundColor: backgroundColor,
-    bg: bg,
-    opacity: opacity,
-    screenReaderOnly: screenReaderOnly,
-    isDisabled: isDisabled,
-    "aria-hidden": ariaHidden,
-    className: className
-  }, tagComponent(dataComponent, rest), filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest)), children);
-};
-Typography.displayName = "Typography";
-export default Typography;
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"../../__internal__/utils/helpers/tags/tags.js";import r from"../../style/utils/filter-styled-system-padding-props.js";import n from"../../style/utils/filter-styled-system-margin-props.js";import a from"./typography.style.js";function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const i=["h1-large","h1","h2","h3","h4","h5","segment-header","segment-header-small","segment-subheader","segment-subheader-alt","p","span","small","big","sup","sub","strong","b","em","ul","ol"],s=e=>{switch(e){case"h1-large":return"h1";case"segment-header":case"segment-header-small":case"segment-subheader":case"segment-subheader-alt":return"h5";case"big":return"p";default:return e}},l=i=>{var l,c,{"data-component":p,variant:y="p",as:d,id:u,fontSize:g,fontWeight:b,textTransform:f,lineHeight:m,textDecoration:h,display:O,listStyleType:w,whiteSpace:j,wordBreak:x,wordWrap:v,textAlign:S,textOverflow:P,truncate:k,color:D="blackOpacity90",backgroundColor:T,bg:W,opacity:N,children:_,screenReaderOnly:z,isDisabled:A,"aria-hidden":B,className:C}=i,E=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(i,["data-component","variant","as","id","fontSize","fontWeight","textTransform","lineHeight","textDecoration","display","listStyleType","whiteSpace","wordBreak","wordWrap","textAlign","textOverflow","truncate","color","backgroundColor","bg","opacity","children","screenReaderOnly","isDisabled","aria-hidden","className"]);return e(a,(l=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){o(e,t,r[t])}))}return e}({variant:y,as:d||s(y),id:u,fontSize:g,fontWeight:b,textTransform:f,lineHeight:m,textDecoration:h,display:O,listStyleType:w,whiteSpace:j,wordWrap:v,wordBreak:x,textAlign:S,textOverflow:P,truncate:k,color:D,backgroundColor:T,bg:W,opacity:N,screenReaderOnly:z,isDisabled:A,"aria-hidden":B,className:C},t(p,E),n(E),r(E)),c=null!=(c={children:_})?c:{},Object.getOwnPropertyDescriptors?Object.defineProperties(l,Object.getOwnPropertyDescriptors(c)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(c)).forEach((function(e){Object.defineProperty(l,e,Object.getOwnPropertyDescriptor(c,e))})),l))};l.displayName="Typography";export{l as Typography,i as VARIANT_TYPES,l as default};