carbon-react 158.44.0 → 158.45.0

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

@@ -13,7 +13,7 @@ type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -38,5 +38,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
     backgroundPosition: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
     backgroundRepeat: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundRepeat, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
     backgroundSize: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundSize<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
-} & StyledImageProps, "theme" | "children" | "hidden" | "src" | "as" | "left" | "right" | "position" | "bottom" | "top" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat">;
+} & StyledImageProps, "theme" | "children" | "hidden" | "src" | "as" | "left" | "right" | "position" | "bottom" | "top" | "backgroundRepeat" | "backgroundSize" | "backgroundPosition">;
 export { StyledImage };

package/esm/components/loader/__next__/internal/ring-loader.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import{StyledRingLoaderWrapper as a,StyledRingCircleSvg as i,StyledLoaderLabel as o}from"../loader.style.js";import l from"../../../../hooks/__internal__/useLocale/useLocale.js";const n=e=>e||.8,s=({inverse:s,size:t,variant:c,hasMotion:d,isTracked:m,animationTime:u,loaderLabel:p,showLabel:v,isSuccess:h,isError:k})=>{const T=l(),f=c&&["stacked","inline"].includes(c)?c:"stacked",g=t&&["extra-small","small","large"].includes(t)?t:"medium";return e(a,{loaderVariant:c,"data-role":"ring-loader-container",children:[e(i,{inverse:s,role:"presentation",size:g,variant:f,hasMotion:d,isTracked:m,animationTime:n(u),viewBox:"0 0 24 24",isSuccess:h,isError:k,children:[r("circle",{"data-role":"outer-arc"}),r("circle",{"data-role":"inner-arc"})]}),v&&r(o,{inverse:s,"data-role":"loader-label",variant:"span",loaderVariant:f,loaderType:"ring",size:g,children:p||(null==T?void 0:T.loader.loading())})]})};export{s as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import{StyledRingLoaderWrapper as a,StyledRingCircleSvg as i,StyledLoaderLabel as o}from"../loader.style.js";import l from"../../../../hooks/__internal__/useLocale/useLocale.js";const n=e=>e||.8,s=({inverse:s,size:t,variant:c,hasMotion:d,isTracked:m,animationTime:u,loaderLabel:p,showLabel:v,isSuccess:h,isError:k})=>{const T=l(),f=c&&["stacked","inline"].includes(c)?c:"stacked",g=t&&["extra-small","small","large"].includes(t)?t:"medium";return e(a,{loaderVariant:c,"data-role":"ring-loader-container",children:[e(i,{inverse:s,role:"presentation",size:g,variant:f,hasMotion:d,isTracked:m,animationTime:n(u),viewBox:"0 0 24 24",isSuccess:h,isError:k,children:[r("circle",{"data-role":"outer-arc"}),r("circle",{"data-role":"inner-arc"})]}),v&&r(o,{inverse:s,"data-role":"loader-label",variant:"span",loaderVariant:f,loaderType:"ring",$size:g,children:p||(null==T?void 0:T.loader.loading())})]})};export{s as default};

package/esm/components/loader/__next__/internal/standalone-loader.component.js

@@ -1 +1 @@
-import{jsxs as a,Fragment as e,jsx as r}from"react/jsx-runtime";import"react";import{OuterBar as i,InnerBar as o,StyledLoaderLabel as n}from"../loader.style.js";import l from"../../../../hooks/__internal__/useLocale/useLocale.js";const t=({size:t,variant:s,inverse:d,loaderLabel:m,showLabel:c,animationTime:p,hasMotion:v})=>{const u=l(),h="typical"===s||"ai"===s?s:"typical",b="small"===t||"large"===t?t:"medium";return a(e,{children:[r(i,{"data-role":"outer-bar",size:b,variant:h,inverse:!!d,children:r(o,{"data-role":"inner-bar",size:b,variant:h,inverse:!!d,animationTime:(a=>a||2)(p),hasMotion:v})}),c&&r(n,{inverse:d,"data-role":"loader-label",variant:"span",loaderVariant:s,loaderType:"standalone",size:t,children:m||(null==u?void 0:u.loader.loading())})]})};export{t as default};
+import{jsxs as a,Fragment as e,jsx as r}from"react/jsx-runtime";import"react";import{OuterBar as i,InnerBar as o,StyledLoaderLabel as n}from"../loader.style.js";import l from"../../../../hooks/__internal__/useLocale/useLocale.js";const t=({size:t,variant:s,inverse:d,loaderLabel:m,showLabel:c,animationTime:p,hasMotion:v})=>{const u=l(),h="typical"===s||"ai"===s?s:"typical",b="small"===t||"large"===t?t:"medium";return a(e,{children:[r(i,{"data-role":"outer-bar",size:b,variant:h,inverse:!!d,children:r(o,{"data-role":"inner-bar",size:b,variant:h,inverse:!!d,animationTime:(a=>a||2)(p),hasMotion:v})}),c&&r(n,{inverse:d,"data-role":"loader-label",variant:"span",loaderVariant:s,loaderType:"standalone",$size:t,children:m||(null==u?void 0:u.loader.loading())})]})};export{t as default};

package/esm/components/loader/__next__/loader.style.d.ts

@@ -28,14 +28,14 @@ interface RingSvgProps {
 export declare const StyledRingCircleSvg: import("styled-components").StyledComponent<"svg", any, RingSvgProps, never>;
 export declare const StyledStars: import("styled-components").StyledComponent<"div", any, {}, never>;
 type LabelProps = {
-    size?: string;
+    $size?: string;
     loaderVariant?: string;
     inverse?: boolean;
     loaderType: string;
 };
 export declare const StyledStarLoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledLoaderLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../../typography").TypographyProps): import("react").JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: import("../../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, LabelProps, never>;
 type RingLoaderWrapperProps = {

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

@@ -1 +1 @@
-import e,{keyframes as a,css as t}from"styled-components";import{margin as r}from"styled-system";import i from"../../../style/themes/apply-base-theme.js";import{Typography as o}from"../../typography/typography.component.js";import"react/jsx-runtime";import"react";import n from"../../button/button.style.js";import{StyledButton as s}from"../../button/__next__/button.style.js";const l={"extra-small":20,small:32,medium:64,large:80},d={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},m={small:"4px",medium:"8px",large:"16px"},p={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},c=a(["0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}"]),g=a(["0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}"]),f=a(["from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}"]),x=a(["0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}"]),h=(e,a)=>{const t=a?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:t,innerBarBackground:a?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:t,innerBarBackground:a?"#FFFFFF":"#000000"}},u=t(["display:flex;justify-content:center;text-align:center;"]),y=e.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-478aa3aa-0"})(["display:inline-block;min-width:var(--sizing800);"]),v=e.div.attrs(i).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-478aa3aa-1"})([""," text-align:center;white-space:nowrap;"],r),w=e.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-478aa3aa-2"})(["",""],(({size:e,variant:a,inverse:r})=>t(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],m[e],h(a,r).outerBarBackground))),b=e.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-478aa3aa-3"})(["",""],(({size:e,variant:a,inverse:r,animationTime:i,hasMotion:o})=>t(["position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:",",",";"," animation-iteration-count:",";"],h(a,r).innerBarBackground,m[e],c,g,o&&`animation-duration: ${i}s, ${i}s;`,o?"infinite, infinite":"none, none"))),k=e.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-478aa3aa-4"})([""," ",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:e,size:a,hasMotion:r,isTracked:i,isError:o,isSuccess:n,animationTime:s})=>{const m=`${l[a]}px`,p=d[a];return t(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],m,m,p,e?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",p,(({inverse:e,isSuccess:a,isError:t})=>t?"#DB004E;":a?"#00811F;":e?"#FFF;":"#000000")({inverse:e,isSuccess:n,isError:o}),i?f:x,r&&`animation-duration: ${s}s;`,r?"infinite":"none")}),s,n),_="40px",B=e.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-478aa3aa-5"})(["position:relative;width:",";height:",";"],_,_),C={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},S=e.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-478aa3aa-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),F=e(o).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-478aa3aa-7"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],u,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),s,n,(({size:e="medium",loaderType:a,loaderVariant:r})=>"star"===a?t(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===a?t(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===e?"16px":"14px",C[a][e]):t(["font-size:",";font-weight:500;width:",";",";"],"large"===e?"16px":"extra-small"===e?"13px":"14px","inline"===r?"auto":"100%","inline"===r?`margin-left: ${p[e]}`:`margin-top: ${C[a][e]}`))),z=e.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-478aa3aa-8"})(["",""],(({loaderVariant:e})=>t(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===e?"row":"column","inline"===e?"auto":"100%"))),I=e.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-478aa3aa-9"})(["",";"],(({inverse:e})=>t(["color:",";"," &,"," &{color:currentColor;}"],e?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",s,n)));export{b as InnerBar,w as OuterBar,I as StyledLabel,v as StyledLoader,F as StyledLoaderLabel,y as StyledLoaderPlaceholder,k as StyledRingCircleSvg,z as StyledRingLoaderWrapper,S as StyledStarLoaderWrapper,B as StyledStars};
+import e,{keyframes as t,css as r}from"styled-components";import{margin as a}from"styled-system";import i from"../../../style/themes/apply-base-theme.js";import{Typography as o}from"../../typography/typography.component.js";import"react/jsx-runtime";import"react";import n from"../../button/button.style.js";import{StyledButton as s}from"../../button/__next__/button.style.js";const l={"extra-small":20,small:32,medium:64,large:80},d={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},m={small:"4px",medium:"8px",large:"16px"},p={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},c=t(["0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}"]),g=t(["0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}"]),f=t(["from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}"]),u=t(["0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}"]),x=(e,t)=>{const r=t?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:r,innerBarBackground:t?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:r,innerBarBackground:t?"#FFFFFF":"#000000"}},h=r(["display:flex;justify-content:center;text-align:center;"]),y=e.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-23905a4e-0"})(["display:inline-block;min-width:var(--sizing800);"]),v=e.div.attrs(i).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-23905a4e-1"})([""," text-align:center;white-space:nowrap;"],a),w=e.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-23905a4e-2"})(["",""],(({size:e,variant:t,inverse:a})=>r(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],m[e],x(t,a).outerBarBackground))),b=e.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-23905a4e-3"})(["",""],(({size:e,variant:t,inverse:a,animationTime:i,hasMotion:o})=>r(["position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:",",",";"," animation-iteration-count:",";"],x(t,a).innerBarBackground,m[e],c,g,o&&`animation-duration: ${i}s, ${i}s;`,o?"infinite, infinite":"none, none"))),k=e.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-23905a4e-4"})([""," ",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:e,size:t,hasMotion:a,isTracked:i,isError:o,isSuccess:n,animationTime:s})=>{const m=`${l[t]}px`,p=d[t];return r(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],m,m,p,e?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",p,(({inverse:e,isSuccess:t,isError:r})=>r?"#DB004E;":t?"#00811F;":e?"#FFF;":"#000000")({inverse:e,isSuccess:n,isError:o}),i?f:u,a&&`animation-duration: ${s}s;`,a?"infinite":"none")}),s,n),_="40px",B=e.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-23905a4e-5"})(["position:relative;width:",";height:",";"],_,_),C={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},S=e.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-23905a4e-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),F=e(o).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-23905a4e-7"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],h,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),s,n,(({$size:e="medium",loaderType:t,loaderVariant:a})=>{const i=e;return"star"===t?r(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===t?r(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===i?"16px":"14px",C[t][i]):r(["font-size:",";font-weight:500;width:",";",";"],"large"===i?"16px":"extra-small"===i?"13px":"14px","inline"===a?"auto":"100%","inline"===a?`margin-left: ${p[i]}`:`margin-top: ${C[t][i]}`)})),z=e.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-23905a4e-8"})(["",""],(({loaderVariant:e})=>r(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===e?"row":"column","inline"===e?"auto":"100%"))),I=e.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-23905a4e-9"})(["",";"],(({inverse:e})=>r(["color:",";"," &,"," &{color:currentColor;}"],e?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",s,n)));export{b as InnerBar,w as OuterBar,I as StyledLabel,v as StyledLoader,F as StyledLoaderLabel,y as StyledLoaderPlaceholder,k as StyledRingCircleSvg,z as StyledRingLoaderWrapper,S as StyledStarLoaderWrapper,B as StyledStars};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import"react";import n from"../../__internal__/utils/helpers/tags/tags.js";import{StyledLabel as i,StyledSpinnerWrapper as o,StyledSpinnerCircleSvg as a}from"./loader-spinner.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import l from"../../hooks/__internal__/useLocale/useLocale.js";import c from"../../hooks/useMediaQuery/useMediaQuery.js";import{Typography as p}from"../typography/typography.component.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const d=d=>{var{spinnerLabel:f,size:y="medium",showSpinnerLabel:m=!0,variant:b="action",isTracked:g=!1,hasMotion:O=!0,animationTime:j}=d,h=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}(d,["spinnerLabel","size","showSpinnerLabel","variant","isTracked","hasMotion","animationTime"]);const v=l(),w=c("screen and (prefers-reduced-motion: no-preference)");if(void 0===w)return null;const P=e(i,{"data-role":"visible-label",variant:"span",fontWeight:"400",size:y,color:"inverse"!==b&&"gradient-white"!==b?"var(--colorsUtilityYin090);":"var(--colorsActionMajorYang100);",fontSize:"extra-large"===y?"var(--sizing200)":"var(--sizing175)",lineHeight:"extra-large"===y?"var(--sizing300)":"var(--sizing250)",children:f||v.loaderSpinner.loading()}),S="gradient-white"===b||"gradient-grey"===b;return e(o,(z=function(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){u(e,r,t[r])}))}return e}({size:y,role:"status"},n("loader-spinner",h),s(h)),k=null!=(k={children:w?r(t,{children:[r(a,{role:"presentation",size:y,variant:b,hasMotion:O,isTracked:g,isGradientVariant:S,animationTime:j||(S?2:1),viewBox:"0 0 24 24",children:[e("circle",{"data-role":"outer-arc"}),e("circle",{"data-role":"inner-arc"})]}),m?P:e(p,{"data-role":"hidden-label",variant:"span",screenReaderOnly:!0,children:f||v.loaderSpinner.loading()})]}):P})?k:{},Object.getOwnPropertyDescriptors?Object.defineProperties(z,Object.getOwnPropertyDescriptors(k)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(k)).forEach((function(e){Object.defineProperty(z,e,Object.getOwnPropertyDescriptor(k,e))})),z));var z,k};export{d as LoaderSpinner,d as default};
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import"react";import n from"../../__internal__/utils/helpers/tags/tags.js";import{StyledLabel as i,StyledSpinnerWrapper as o,StyledSpinnerCircleSvg as a}from"./loader-spinner.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import l from"../../hooks/__internal__/useLocale/useLocale.js";import c from"../../hooks/useMediaQuery/useMediaQuery.js";import{Typography as p}from"../typography/typography.component.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const d=d=>{var{spinnerLabel:f,size:y="medium",showSpinnerLabel:m=!0,variant:b="action",isTracked:g=!1,hasMotion:O=!0,animationTime:h}=d,j=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}(d,["spinnerLabel","size","showSpinnerLabel","variant","isTracked","hasMotion","animationTime"]);const v=l(),w=c("screen and (prefers-reduced-motion: no-preference)");if(void 0===w)return null;const P=e(i,{"data-role":"visible-label",variant:"span",fontWeight:"400",$size:y,inverse:!("inverse"!==b&&"gradient-white"!==b),fontSize:"extra-large"===y?"var(--sizing200)":"var(--sizing175)",lineHeight:"extra-large"===y?"var(--sizing300)":"var(--sizing250)",children:f||v.loaderSpinner.loading()}),S="gradient-white"===b||"gradient-grey"===b;return e(o,(z=function(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){u(e,r,t[r])}))}return e}({size:y,role:"status"},n("loader-spinner",j),s(j)),k=null!=(k={children:w?r(t,{children:[r(a,{role:"presentation",size:y,variant:b,hasMotion:O,isTracked:g,isGradientVariant:S,animationTime:h||(S?2:1),viewBox:"0 0 24 24",children:[e("circle",{"data-role":"outer-arc"}),e("circle",{"data-role":"inner-arc"})]}),m?P:e(p,{"data-role":"hidden-label",variant:"span",screenReaderOnly:!0,children:f||v.loaderSpinner.loading()})]}):P})?k:{},Object.getOwnPropertyDescriptors?Object.defineProperties(z,Object.getOwnPropertyDescriptors(k)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(k)).forEach((function(e){Object.defineProperty(z,e,Object.getOwnPropertyDescriptor(k,e))})),z));var z,k};export{d as LoaderSpinner,d as default};

package/esm/components/loader-spinner/loader-spinner.style.d.ts

@@ -1,9 +1,11 @@
 import { LoaderSpinnerProps } from "./loader-spinner.component";
 export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
-}, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
+}, any, Required<{
+    $size: NonNullable<LoaderSpinnerProps["size"]>;
+}>, never>;
 interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {
     isGradientVariant?: boolean;
     size: Required<LoaderSpinnerProps>["size"];

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

@@ -1 +1 @@
-import r,{css as e}from"styled-components";import{margin as t}from"styled-system";import{LOADER_SPINNER_SIZE_PARAMS as a}from"./loader-spinner.config.js";import{Typography as n}from"../typography/typography.component.js";import"react/jsx-runtime";import"react";const o=(r,e)=>{switch(e){case"neutral":return r?"var(--colorsSemanticNeutral500)":"var(--colorsSemanticNeutral200)";case"gradient-grey":return r?"#00D639":"#0000001A";case"gradient-white":return r?"#00D639":"var(--colorsActionMajorYang100)";case"inverse":return"var(--colorsActionMajorYang100)";default:return r?"var(--colorsActionMajor500)":"var(--colorsActionMajor150)"}},i=r.div.withConfig({displayName:"loader-spinner.style__StyledSpinnerWrapper",componentId:"sc-3cab43b4-0"})([""," display:flex;flex-direction:",";"],t,(({size:r})=>"extra-small"===r?"row":"column")),s=r(n).withConfig({displayName:"loader-spinner.style__StyledLabel",componentId:"sc-3cab43b4-1"})(["",""],(({size:r})=>e(["display:flex;justify-content:center;text-align:center;",";"],"extra-small"===r?"margin-left: var(--spacing100)":`margin-top: ${a[r].labelMarginTop}px`))),c=r.svg.withConfig({displayName:"loader-spinner.style__StyledSpinnerCircleSvg",componentId:"sc-3cab43b4-2"})(["",";"],(({size:r,isTracked:t,hasMotion:n,isGradientVariant:i,animationTime:s,variant:c})=>{const d=`${a[r].wrapperDimensions}px`;return r&&e(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",";",' cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:80px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(270deg);@keyframes gradientAnimation{0%{stroke:#00d639;}33%{stroke:#11afff;}66%{stroke:#8f49fe;}}@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(0deg);stroke-dasharray:100;}40%{stroke-dasharray:80;}80%{stroke-dasharray:100;}100%{transform:rotate(360deg);}}animation-name:",",",";",";animation-timing-function:cubic-bezier(0.2,0.1,0.8,1);animation-iteration-count:",";"],d,d,a[r].strokeWidth,o(!1,c),"inverse"===c&&"stroke-opacity: 0.3;",a[r].strokeWidth,o(!0,c),t&&!i?"trackedAnimation":"untrackedAnimation","gradient-grey"===c||"gradient-white"===c?"gradientAnimation":"none",n&&`animation-duration: ${s}s`,n?"infinite":"none")}));export{s as StyledLabel,c as StyledSpinnerCircleSvg,i as StyledSpinnerWrapper};
+import r,{css as e}from"styled-components";import{margin as t}from"styled-system";import{LOADER_SPINNER_SIZE_PARAMS as a}from"./loader-spinner.config.js";import{Typography as n}from"../typography/typography.component.js";import"react/jsx-runtime";import"react";const o=(r,e)=>{switch(e){case"neutral":return r?"var(--colorsSemanticNeutral500)":"var(--colorsSemanticNeutral200)";case"gradient-grey":return r?"#00D639":"#0000001A";case"gradient-white":return r?"#00D639":"var(--colorsActionMajorYang100)";case"inverse":return"var(--colorsActionMajorYang100)";default:return r?"var(--colorsActionMajor500)":"var(--colorsActionMajor150)"}},i=r.div.withConfig({displayName:"loader-spinner.style__StyledSpinnerWrapper",componentId:"sc-fe9a4dc0-0"})([""," display:flex;flex-direction:",";"],t,(({size:r})=>"extra-small"===r?"row":"column")),s=r(n).withConfig({displayName:"loader-spinner.style__StyledLabel",componentId:"sc-fe9a4dc0-1"})(["",""],(({$size:r})=>e(["display:flex;justify-content:center;text-align:center;",";"],"extra-small"===r?"margin-left: var(--spacing100)":`margin-top: ${a[r].labelMarginTop}px`))),c=r.svg.withConfig({displayName:"loader-spinner.style__StyledSpinnerCircleSvg",componentId:"sc-fe9a4dc0-2"})(["",";"],(({size:r,isTracked:t,hasMotion:n,isGradientVariant:i,animationTime:s,variant:c})=>{const d=`${a[r].wrapperDimensions}px`;return r&&e(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",";",' cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:80px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(270deg);@keyframes gradientAnimation{0%{stroke:#00d639;}33%{stroke:#11afff;}66%{stroke:#8f49fe;}}@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(0deg);stroke-dasharray:100;}40%{stroke-dasharray:80;}80%{stroke-dasharray:100;}100%{transform:rotate(360deg);}}animation-name:",",",";",";animation-timing-function:cubic-bezier(0.2,0.1,0.8,1);animation-iteration-count:",";"],d,d,a[r].strokeWidth,o(!1,c),"inverse"===c&&"stroke-opacity: 0.3;",a[r].strokeWidth,o(!0,c),t&&!i?"trackedAnimation":"untrackedAnimation","gradient-grey"===c||"gradient-white"===c?"gradientAnimation":"none",n&&`animation-duration: ${s}s`,n?"infinite":"none")}));export{s as StyledLabel,c as StyledSpinnerCircleSvg,i as StyledSpinnerWrapper};

package/esm/components/loader-star/loader-star.style.d.ts

@@ -1,7 +1,7 @@
 import { LoaderStarProps } from "./loader-star.component";
 export declare const StyledLoaderStarWrapper: import("styled-components").StyledComponent<"div", any, LoaderStarProps, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, {}, never>;
 export declare const StyledStars: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -2,7 +2,7 @@ import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
 declare const StyledTile: import("styled-components").StyledComponent<"div", any, {
     theme: object;
-} & Pick<TileProps, "height" | "width" | "variant" | "highlightVariant" | "roundness" | "borderWidth" | "borderVariant"> & {
+} & Pick<TileProps, "height" | "width" | "variant" | "borderWidth" | "highlightVariant" | "roundness" | "borderVariant"> & {
     isHorizontal?: boolean;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "theme">;
 export default StyledTile;

package/esm/components/typography/__internal__/__next__/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./typography.component";
+export type { TypographyProps } from "./typography.component";

package/esm/components/typography/__internal__/__next__/index.js

@@ -0,0 +1 @@
+export{Typography as default}from"./typography.component.js";

package/esm/components/typography/__internal__/__next__/typography.component.d.ts

@@ -0,0 +1,37 @@
+import React, { HTMLAttributes, AriaAttributes, CSSProperties } from "react";
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../../../__internal__/utils/helpers/tags";
+export declare const VARIANT_TYPES: readonly ["h1", "h2", "h3", "h4", "h5", "section-heading", "section-subheading", "ul", "ol", "sup", "sub", "strong", "b", "p"];
+type VariantTypes = (typeof VARIANT_TYPES)[number];
+export declare const ALLOWED_CSS_TEXT_OVERRIDE_KEYS: ["textTransform", "textDecoration", "display", "whiteSpace", "wordBreak", "wordWrap", "textAlign", "textOverflow", "overflow"];
+export type AllowedCSSTextOverrides = Pick<CSSProperties, (typeof ALLOWED_CSS_TEXT_OVERRIDE_KEYS)[number]>;
+export interface TypographyProps extends SpaceProps, TagProps, Pick<HTMLAttributes<HTMLElement>, "role">, Pick<AriaAttributes, "aria-hidden" | "aria-live">, AllowedCSSTextOverrides {
+    /** Adds element and creates a visual style associated with said element. */
+    variant?: VariantTypes;
+    /** Override the underlying HTML element rendered by the component. */
+    as?: React.ElementType;
+    /** Content to be rendered inside the Typography component. */
+    children?: React.ReactNode;
+    /** Set the ID attribute of the Typography component. */
+    id?: string;
+    /** When set to `true`, uses fluid typography with CSS clamp() values for responsive sizing. */
+    fluid?: boolean;
+    /** When set to `true`, inverts the font color for use on darker backgrounds. */
+    inverse?: boolean;
+    /** When set to `true`, the component will apply visually hidden styling, hiding the component visually but ensuring the component is still in the accessibility tree. */
+    screenReaderOnly?: boolean;
+    /** The size to apply to text. Only available for non-heading variants. */
+    size?: "M" | "L";
+    /** The color tint to apply to text. Accepts "default" for standard text color or "alt" for alternative text color. Only available for non-heading variants. */
+    tint?: "default" | "alt";
+    /** The font weight to apply to text. Only available for non-heading variants. Note: Has no effect on "strong" or "b" variants as they have fixed medium weight. */
+    weight?: "regular" | "medium";
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
+}
+export declare const Typography: ({ variant, as, children, id, fluid, inverse, screenReaderOnly, size, tint, weight, role, "aria-hidden": ariaHidden, "aria-live": ariaLive, className, ...rest }: TypographyProps) => React.JSX.Element;
+export default Typography;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import r from"../../../../__internal__/utils/helpers/tags/tags.js";import t from"../../../../style/utils/filter-styled-system-padding-props.js";import i from"../../../../style/utils/filter-styled-system-margin-props.js";import n from"../../../../__internal__/filter-object-properties/filter-object-properties.js";import o from"./typography.style.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}const a=["h1","h2","h3","h4","h5","section-heading","section-subheading","ul","ol","sup","sub","strong","b","p"],l=["textTransform","textDecoration","display","whiteSpace","wordBreak","wordWrap","textAlign","textOverflow","overflow"],c=c=>{var p,f,{variant:u="p",as:y,children:b,id:d,fluid:O=!1,inverse:m=!1,screenReaderOnly:g=!1,size:h="M",tint:j="default",weight:v="regular",role:w,"aria-hidden":P,"aria-live":$,className:x}=c,_=function(e,r){if(null==e)return{};var t,i,n=function(e,r){if(null==e)return{};var t,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(c,["variant","as","children","id","fluid","inverse","screenReaderOnly","size","tint","weight","role","aria-hidden","aria-live","className"]);return e(o,(p=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){s(e,r,t[r])}))}return e}({id:d,as:y||("section-heading"===u?"h2":"section-subheading"===u?"h3":a.includes(u)?u:"p"),$variant:u,$fluid:O,$inverse:m,$screenReaderOnly:g,$size:h,$tint:j,$weight:v,role:w,"aria-hidden":P,"aria-live":$,className:x},r("typography",_),i(_),t(_),Object.fromEntries(Object.entries(n(_,l)).map((([e,r])=>[`$${e}`,r])))),f=null!=(f={children:b})?f:{},Object.getOwnPropertyDescriptors?Object.defineProperties(p,Object.getOwnPropertyDescriptors(f)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(f)).forEach((function(e){Object.defineProperty(p,e,Object.getOwnPropertyDescriptor(f,e))})),p))};export{l as ALLOWED_CSS_TEXT_OVERRIDE_KEYS,c as Typography,a as VARIANT_TYPES,c as default};

package/esm/components/typography/__internal__/__next__/typography.style.d.ts

@@ -0,0 +1,25 @@
+import { SpaceProps } from "styled-system";
+import { AllowedCSSTextOverrides } from "./typography.component";
+import { TypographyProps } from "./typography.component";
+export interface StyledTypographyProps extends SpaceProps {
+    $variant?: TypographyProps["variant"];
+    $fluid?: TypographyProps["fluid"];
+    $inverse?: TypographyProps["inverse"];
+    $screenReaderOnly?: TypographyProps["screenReaderOnly"];
+    $size?: TypographyProps["size"];
+    $tint?: TypographyProps["tint"];
+    $weight?: TypographyProps["weight"];
+    $display?: AllowedCSSTextOverrides["display"];
+    $whiteSpace?: AllowedCSSTextOverrides["whiteSpace"];
+    $wordBreak?: AllowedCSSTextOverrides["wordBreak"];
+    $wordWrap?: AllowedCSSTextOverrides["wordWrap"];
+    $textAlign?: AllowedCSSTextOverrides["textAlign"];
+    $textDecoration?: AllowedCSSTextOverrides["textDecoration"];
+    $textOverflow?: AllowedCSSTextOverrides["textOverflow"];
+    $textTransform?: AllowedCSSTextOverrides["textTransform"];
+    $overflow?: AllowedCSSTextOverrides["overflow"];
+}
+declare const StyledTypography: import("styled-components").StyledComponent<"span", any, {
+    theme: object;
+} & StyledTypographyProps, "theme">;
+export default StyledTypography;

package/esm/components/typography/__internal__/__next__/typography.style.js

@@ -0,0 +1 @@
+import t,{css as e}from"styled-components";import{space as o}from"styled-system";import i from"../../../../style/themes/apply-base-theme.js";import a from"../../../../style/utils/visually-hidden.js";const r={h1:"heading-l",h2:"heading-m",h3:"heading-s",h4:"subheading-l",h5:"subheading-m","section-heading":"section-heading-m","section-subheading":"section-heading-s"},n=t.span.attrs(i).withConfig({displayName:"typography.style__StyledTypography",componentId:"sc-6c185d6b-0"})(["",""],(({$display:t,$variant:i,$fluid:n,$inverse:s,$size:d,$tint:l,$weight:$,$whiteSpace:v,$wordBreak:c,$wordWrap:f,$textAlign:m,$textDecoration:p,$textOverflow:h,$textTransform:g,$overflow:y,$screenReaderOnly:u})=>{const b=n?"fluid":"static",w="M"===d?"m":"l",x=`var(--container-standard${s?"-inverse":""}-txt-${l})`,z=i&&i in r,j="strong"===i||"b"===i,k="sup"===i||"sub"===i,O=`--global-font-${b}-body-medium-${w}`,S=`--global-font-${b}-body-${$}-${w}`;return e([""," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],!u&&"margin: unset;",o,u&&a,void 0!==t&&`display: ${t};`,void 0!==v&&`white-space: ${v};`,void 0!==c&&`word-break: ${c};`,void 0!==f&&`word-wrap: ${f};`,void 0!==m&&`text-align: ${m};`,void 0!==p&&`text-decoration: ${p};`,void 0!==h&&`text-overflow: ${h};`,void 0!==g&&`text-transform: ${g};`,void 0!==y&&`overflow: ${y};`,z&&e(["font:var(",");color:",";"],`--global-font-${b}-${z?r[i]:""}`,`var(--container-standard${s?"-inverse":""}-txt-default)`),j&&e(["font:var(",");color:",";"],O,x),"sup"===i&&e(["font:var(",");font-size:0.75em;color:",";vertical-align:super;"],S,x),"sub"===i&&e(["font:var(",");font-size:0.75em;color:",";vertical-align:sub;"],S,x),!z&&!j&&!k&&e(["font:var(",");color:",";"],S,x))}));export{n as default};

package/esm/components/typography/list.component.d.ts

@@ -6,6 +6,36 @@ export interface ListProps extends TypographyProps {
 export interface ListItemProps extends Omit<ListProps, "variant"> {
     children?: React.ReactNode;
 }
+/**
+ * @deprecated The List component is part of the legacy Typography system and will be removed in a future release.
+ * Use the Typography component with `variant="ul"` or `variant="ol"` instead, or use proper semantic HTML list elements (ul, ol, li) with Typography components inside.
+ *
+ * Example migration:
+ * ```tsx
+ * // Before
+ * <List>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </List>
+ *
+ * // After (using Typography list variants)
+ * <Typography variant="ul">
+ *   <Typography as="li">Item 1</Typography>
+ *   <Typography as="li">Item 2</Typography>
+ * </Typography>
+ *
+ * // After (using native HTML with Typography)
+ * <ul>
+ *   <li><Typography>Item 1</Typography></li>
+ *   <li><Typography>Item 2</Typography></li>
+ * </ul>
+ * ```
+ */
 declare const List: ({ children, as, variant, ...props }: ListProps) => React.JSX.Element;
+/**
+ * @deprecated The ListItem component is part of the legacy Typography system and will be removed in a future release.
+ * Use Typography with `as="li"` instead, or use semantic HTML li elements with Typography components inside.
+ * You can use the `as` prop on Typography to inherit list styling while using Typography's text styling capabilities.
+ */
 declare const ListItem: ({ children, ...props }: ListItemProps) => React.JSX.Element;
 export { List, ListItem };

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

@@ -1,22 +1,43 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export declare const VARIANT_TYPES: readonly ["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"];
+import type { TypographyProps as NextTypographyProps } from "./__internal__/__next__/";
+export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "section-heading", "segment-header-small", "segment-subheader", "section-subheading", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export type VariantTypes = (typeof VARIANT_TYPES)[number];
-export interface TypographyProps extends SpaceProps, TagProps {
+export interface TypographyProps extends SpaceProps, TagProps, Pick<NextTypographyProps, "weight" | "tint" | "size" | "fluid" | "inverse" | "overflow"> {
     /** Override the variant component */
     as?: React.ElementType;
     /** Set the ID attribute of the Typography component */
     id?: string;
     /** Content to be rendered inside the Typography component */
     children?: React.ReactNode;
-    /** The visual style to apply to the component */
+    /**
+     * The visual style to apply to the component. Supported variants include:
+     * h1, h2, h3, h4, h5, section-heading, section-subheading, p (default),
+     * sup, sub, strong, b, ul, ol
+     *
+     * The following variant values are deprecated with recommended alternatives:
+     * - "h1-large" -> use "h1" instead
+     * - "segment-header" -> use "section-heading" instead
+     * - "segment-header-small" -> use "section-subheading" instead
+     * - "segment-subheader" / "segment-subheader-alt" -> use "h5" instead
+     * - "span" -> use "p" instead
+     * - "small" -> use "p" with the `size` prop set to "M"
+     * - "big" -> use "h5" or "h4" depending on context, or "p" with `size` prop set to "L"
+     * - "em" -> use "strong" or "b" for semantic emphasis
+     */
     variant?: VariantTypes;
-    /** Override the variant font-size */
+    /**
+     * @deprecated Use the new `size` prop for paragraphs or choose the appropriate variant for other variants. This prop will eventually be removed.
+     * Override the variant font-size */
     fontSize?: string;
-    /** Override the variant font-weight */
+    /**
+     * @deprecated Use the new `weight` prop for paragraphs or choose the appropriate variant for other variants. This prop will eventually be removed.
+     * Override the variant font-weight */
     fontWeight?: string;
-    /** Override the variant line-height */
+    /**
+     * @deprecated Choose the appropriate variant for your use case, as each variant has its own line-height. This prop will eventually be removed.
+     * Override the variant line-height */
     lineHeight?: string;
     /** Override the variant text-transform */
     textTransform?: string;
@@ -24,7 +45,9 @@ export interface TypographyProps extends SpaceProps, TagProps {
     textDecoration?: string;
     /** Override the variant display */
     display?: string;
-    /** Override the list-style-type */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the list-style-type */
     listStyleType?: string;
     /** Override the white-space */
     whiteSpace?: string;
@@ -36,20 +59,31 @@ export interface TypographyProps extends SpaceProps, TagProps {
     textAlign?: string;
     /** Override the text-overflow */
     textOverflow?: string;
-    /** Apply truncation */
+    /**
+     * @deprecated Use `textOverflow` and `whiteSpace` props instead. This prop will eventually be removed.
+     * Apply truncation */
     truncate?: boolean;
-    /** Override the color style */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the color style. If a white colour is needed, use the `inverse` prop instead. */
     color?: string;
-    /** Override the backgroundColor style */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the backgroundColor style */
     backgroundColor?: string;
-    /** Override the bg value shorthand for backgroundColor */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the bg value shorthand for backgroundColor */
     bg?: string;
-    /** Override the opacity value */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the opacity value */
     opacity?: string | number;
     /** Set whether it will be visually hidden
      * NOTE: This is for screen readers only and will make a lot of the other props redundant */
     screenReaderOnly?: boolean;
     /**
+     * @deprecated
      * @private
      * @ignore
      * Override the default color of the rendered element to match disabled styling
@@ -71,7 +105,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
     "data-component"?: string;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: TypographyProps): React.JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

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

@@ -1 +1 @@
-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 a from"../../style/utils/filter-styled-system-margin-props.js";import n 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"],l=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}},s=i=>{var s,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:v,wordWrap:x,textAlign:S,textOverflow:P,truncate:k,color:D="blackOpacity90",backgroundColor:T,bg:W,opacity:N,children:_,screenReaderOnly:z,isDisabled:A,"aria-live":B,role:C,"aria-hidden":E,className:H}=i,R=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(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-live","role","aria-hidden","className"]);return e(n,(s=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){o(e,t,r[t])}))}return e}({variant:y,as:d||l(y),id:u,fontSize:g,fontWeight:b,textTransform:f,lineHeight:m,textDecoration:h,display:O,listStyleType:w,whiteSpace:j,wordWrap:x,wordBreak:v,textAlign:S,textOverflow:P,truncate:k,color:D,backgroundColor:T,bg:W,opacity:N,screenReaderOnly:z,isDisabled:A,"aria-hidden":E,className:H,role:C,"aria-live":B},t(p,R),a(R),r(R)),c=null!=(c={children:_})?c:{},Object.getOwnPropertyDescriptors?Object.defineProperties(s,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(s,e,Object.getOwnPropertyDescriptor(c,e))})),s))};s.displayName="Typography";export{s as Typography,i as VARIANT_TYPES,s as default};
+import{jsx as e}from"react/jsx-runtime";import"react";import r from"../../__internal__/filter-object-properties/filter-object-properties.js";import{ALLOWED_CSS_TEXT_OVERRIDE_KEYS as t}from"./__internal__/__next__/typography.component.js";import n from"./typography.style.js";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(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){a(e,r,t[r])}))}return e}function s(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 o=["h1-large","h1","h2","h3","h4","h5","segment-header","section-heading","segment-header-small","segment-subheader","section-subheading","segment-subheader-alt","p","span","small","big","sup","sub","strong","b","em","ul","ol"],l={"h1-large":"h1",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5","segment-header":"h2","segment-header-small":"h3","segment-subheader":"h5","segment-subheader-alt":"h5","section-heading":"h2","section-subheading":"h3",p:"p",span:"span",small:"small",big:"big",sup:"sup",sub:"sub",strong:"strong",em:"em",b:"b",ul:"ul",ol:"ol"},c=e=>{var r;return null!==(r=e&&l[e])&&void 0!==r?r:"p"},h=a=>{var{variant:o="p",as:l,id:h,fluid:u=!1,inverse:p=!1,size:b="M",tint:f="default",weight:d="regular",truncate:g=!1,color:m,children:y,screenReaderOnly:O=!1,"aria-live":j,"aria-hidden":v}=a,w=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(a,["variant","as","id","fluid","inverse","size","tint","weight","truncate","color","children","screenReaderOnly","aria-live","aria-hidden"]);const P=(e=>{switch(e){case"h1-large":return"h1";case"segment-header":return"section-heading";case"segment-header-small":return"section-subheading";case"segment-subheader":case"segment-subheader-alt":return"h5";default:return e}})(o),_=r(w,t);g&&(_.overflow="hidden",_.whiteSpace="nowrap",_.textOverflow="ellipsis");const S=new Set(["white","#fff","#ffffff","rgb(255,255,255)","rgb(255, 255, 255)"]),x=p||m&&S.has(m);return e(n,s(i(s(i({variant:P,forwardedAs:l||c(o),id:h},_),{fluid:u,inverse:x,screenReaderOnly:O,"aria-live":j,"aria-hidden":v,size:b,tint:f,weight:d}),w),{children:y}))};h.displayName="Typography";export{h as Typography,o as VARIANT_TYPES,h as default};

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

@@ -1,5 +1,5 @@
 import { TypographyProps } from "./typography.component";
-declare const StyledTypography: import("styled-components").StyledComponent<"span", any, {
+declare const StyledTypography: import("styled-components").StyledComponent<({ variant, as, children, id, fluid, inverse, screenReaderOnly, size, tint, weight, role, "aria-hidden": ariaHidden, "aria-live": ariaLive, className, ...rest }: import("./__internal__/__next__").TypographyProps) => import("react").JSX.Element, any, {
     theme: object;
 } & TypographyProps, "theme">;
 export default StyledTypography;

package/esm/components/typography/typography.style.js

@@ -1 +1 @@
-import e,{css as r}from"styled-components";import{space as t}from"styled-system";import a from"../../style/utils/color.js";import s from"../../style/themes/apply-base-theme.js";import n from"../../style/utils/visually-hidden.js";function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const l=e.span.attrs(s).withConfig({displayName:"typography.style__StyledTypography",componentId:"sc-f80efd85-0"})([""," "," "," ",""],(({fontSize:e,fontWeight:t,display:a,variant:s,lineHeight:o,listStyleType:l,whiteSpace:c,wordBreak:i,wordWrap:u,textAlign:p,textDecoration:h,textOverflow:g,textTransform:m,truncate:d,screenReaderOnly:f})=>{const y=e||(e=>{switch(e){case"h1-large":return"40px";case"h1":return"30px";case"h2":return"24px";case"h3":case"segment-header":return"21px";case"h4":case"segment-header-small":return"18px";case"h5":case"segment-subheader":case"big":return"16px";case"small":case"sub":case"sup":return"13px";default:return"14px"}})(s),b=t||(e=>{switch(e){case"h1-large":case"h1":case"h2":case"segment-header":case"segment-header-small":return"700";case"h3":case"segment-subheader":case"segment-subheader-alt":case"b":case"em":case"strong":return"500";default:return"400"}})(s),x=m||(e=>"segment-subheader-alt"===e?"uppercase":"none")(s),w=h||(e=>"em"===e?"underline":"none")(s),O=o||(e=>{switch(e){case"h1-large":return"50px";case"h1":return"37.5px";case"h2":return"30px";case"h3":case"segment-header":return"26.25px";case"h4":case"segment-header-small":return"22.5px";case"h5":case"small":case"sub":case"sup":return"20px";case"segment-subheader":case"big":return"24px";default:return"21px"}})(s);return r(["font-style:normal;font-size:",";font-weight:",";text-transform:",";text-decoration:",";line-height:",";margin:",";padding:0;white-space:",";word-break:",";word-wrap:",";text-align:",";text-overflow:",";",";"," "," "," "," ",""],y,b,x,w,O,"p"===s?"0 0 16px":"0",d?"nowrap":c,i,u,p,g||d&&"ellipsis",d&&"\n        overflow: hidden;\n      ",f&&n,"sup"===s&&"vertical-align: super;","sub"===s&&"vertical-align: sub;",a&&`display: ${a};`,l&&`list-style-type: ${l};`)}),t,(e=>{var{color:r,bg:t,backgroundColor:s}=e,n=function(e,r){if(null==e)return{};var t,a,s=function(e,r){if(null==e)return{};var t,a,s={},n=Object.keys(e);for(a=0;a<n.length;a++)t=n[a],r.indexOf(t)>=0||(s[t]=e[t]);return s}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a<n.length;a++)t=n[a],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}(e,["color","bg","backgroundColor"]);return a(function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){o(e,r,t[r])}))}return e}({color:r,bg:t,backgroundColor:s},n))}),(({isDisabled:e})=>e&&r(["color:var(--colorsUtilityYin030);"])));l.displayName="Typography";export{l as default};
+import e,{css as t}from"styled-components";import{space as o}from"styled-system";import p from"../../style/themes/apply-base-theme.js";import{Typography as s}from"./__internal__/__next__/typography.component.js";import i from"../../style/utils/visually-hidden.js";const a=e(s).attrs(p).withConfig({displayName:"typography.style__StyledTypography",componentId:"sc-bec9c5e6-0"})([""," ",""],(({fontSize:e,fontWeight:o,lineHeight:p,variant:s,screenReaderOnly:a})=>t([""," "," "," margin:",";",""],e&&`font-size: ${e};`,o&&`font-weight: ${o};`,p&&`line-height: ${p};`,"p"===s?"0 0 var(--global-space-comp-l)":"0",a&&i)),o);a.displayName="Typography";export{a as default};

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

@@ -13,7 +13,7 @@ type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -38,5 +38,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
     backgroundPosition: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
     backgroundRepeat: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundRepeat, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
     backgroundSize: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundSize<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
-} & StyledImageProps, "theme" | "children" | "hidden" | "src" | "as" | "left" | "right" | "position" | "bottom" | "top" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat">;
+} & StyledImageProps, "theme" | "children" | "hidden" | "src" | "as" | "left" | "right" | "position" | "bottom" | "top" | "backgroundRepeat" | "backgroundSize" | "backgroundPosition">;
 export { StyledImage };

package/lib/components/loader/__next__/internal/ring-loader.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../loader.style.js"),a=require("../../../../hooks/__internal__/useLocale/useLocale.js");const i=e=>e||.8;exports.default=({inverse:s,size:l,variant:n,hasMotion:o,isTracked:t,animationTime:d,loaderLabel:c,showLabel:u,isSuccess:v,isError:x})=>{const j=a.default(),m=n&&["stacked","inline"].includes(n)?n:"stacked",p=l&&["extra-small","small","large"].includes(l)?l:"medium";return e.jsxs(r.StyledRingLoaderWrapper,{loaderVariant:n,"data-role":"ring-loader-container",children:[e.jsxs(r.StyledRingCircleSvg,{inverse:s,role:"presentation",size:p,variant:m,hasMotion:o,isTracked:t,animationTime:i(d),viewBox:"0 0 24 24",isSuccess:v,isError:x,children:[e.jsx("circle",{"data-role":"outer-arc"}),e.jsx("circle",{"data-role":"inner-arc"})]}),u&&e.jsx(r.StyledLoaderLabel,{inverse:s,"data-role":"loader-label",variant:"span",loaderVariant:m,loaderType:"ring",size:p,children:c||(null==j?void 0:j.loader.loading())})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../loader.style.js"),a=require("../../../../hooks/__internal__/useLocale/useLocale.js");const i=e=>e||.8;exports.default=({inverse:s,size:l,variant:n,hasMotion:o,isTracked:t,animationTime:d,loaderLabel:c,showLabel:u,isSuccess:v,isError:x})=>{const j=a.default(),m=n&&["stacked","inline"].includes(n)?n:"stacked",p=l&&["extra-small","small","large"].includes(l)?l:"medium";return e.jsxs(r.StyledRingLoaderWrapper,{loaderVariant:n,"data-role":"ring-loader-container",children:[e.jsxs(r.StyledRingCircleSvg,{inverse:s,role:"presentation",size:p,variant:m,hasMotion:o,isTracked:t,animationTime:i(d),viewBox:"0 0 24 24",isSuccess:v,isError:x,children:[e.jsx("circle",{"data-role":"outer-arc"}),e.jsx("circle",{"data-role":"inner-arc"})]}),u&&e.jsx(r.StyledLoaderLabel,{inverse:s,"data-role":"loader-label",variant:"span",loaderVariant:m,loaderType:"ring",$size:p,children:c||(null==j?void 0:j.loader.loading())})]})};

package/lib/components/loader/__next__/internal/standalone-loader.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var a=require("../loader.style.js"),r=require("../../../../hooks/__internal__/useLocale/useLocale.js");exports.default=({size:i,variant:l,inverse:n,loaderLabel:t,showLabel:s,animationTime:o,hasMotion:d})=>{const u=r.default(),c="typical"===l||"ai"===l?l:"typical",v="small"===i||"large"===i?i:"medium";return e.jsxs(e.Fragment,{children:[e.jsx(a.OuterBar,{"data-role":"outer-bar",size:v,variant:c,inverse:!!n,children:e.jsx(a.InnerBar,{"data-role":"inner-bar",size:v,variant:c,inverse:!!n,animationTime:(e=>e||2)(o),hasMotion:d})}),s&&e.jsx(a.StyledLoaderLabel,{inverse:n,"data-role":"loader-label",variant:"span",loaderVariant:l,loaderType:"standalone",size:i,children:t||(null==u?void 0:u.loader.loading())})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var a=require("../loader.style.js"),r=require("../../../../hooks/__internal__/useLocale/useLocale.js");exports.default=({size:i,variant:l,inverse:n,loaderLabel:t,showLabel:s,animationTime:o,hasMotion:d})=>{const u=r.default(),c="typical"===l||"ai"===l?l:"typical",v="small"===i||"large"===i?i:"medium";return e.jsxs(e.Fragment,{children:[e.jsx(a.OuterBar,{"data-role":"outer-bar",size:v,variant:c,inverse:!!n,children:e.jsx(a.InnerBar,{"data-role":"inner-bar",size:v,variant:c,inverse:!!n,animationTime:(e=>e||2)(o),hasMotion:d})}),s&&e.jsx(a.StyledLoaderLabel,{inverse:n,"data-role":"loader-label",variant:"span",loaderVariant:l,loaderType:"standalone",$size:i,children:t||(null==u?void 0:u.loader.loading())})]})};

package/lib/components/loader/__next__/loader.style.d.ts

@@ -28,14 +28,14 @@ interface RingSvgProps {
 export declare const StyledRingCircleSvg: import("styled-components").StyledComponent<"svg", any, RingSvgProps, never>;
 export declare const StyledStars: import("styled-components").StyledComponent<"div", any, {}, never>;
 type LabelProps = {
-    size?: string;
+    $size?: string;
     loaderVariant?: string;
     inverse?: boolean;
     loaderType: string;
 };
 export declare const StyledStarLoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledLoaderLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../../typography").TypographyProps): import("react").JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: import("../../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, LabelProps, never>;
 type RingLoaderWrapperProps = {

package/lib/components/loader/__next__/loader.style.js

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),a=require("styled-system"),t=require("../../../style/themes/apply-base-theme.js"),r=require("../../typography/typography.component.js");require("react/jsx-runtime"),require("react");var i=require("../../button/button.style.js"),o=require("../../button/__next__/button.style.js");function n(e){return e&&e.__esModule?e:{default:e}}var s=n(e);const l={"extra-small":20,small:32,medium:64,large:80},d={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},c={small:"4px",medium:"8px",large:"16px"},p={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},m=e.keyframes(["0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}"]),u=e.keyframes(["0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}"]),g=e.keyframes(["from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}"]),f=e.keyframes(["0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}"]),y=(e,a)=>{const t=a?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:t,innerBarBackground:a?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:t,innerBarBackground:a?"#FFFFFF":"#000000"}},x=e.css(["display:flex;justify-content:center;text-align:center;"]),h=s.default.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-478aa3aa-0"})(["display:inline-block;min-width:var(--sizing800);"]),v=s.default.div.attrs(t.default).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-478aa3aa-1"})([""," text-align:center;white-space:nowrap;"],a.margin),b=s.default.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-478aa3aa-2"})(["",""],(({size:a,variant:t,inverse:r})=>e.css(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],c[a],y(t,r).outerBarBackground))),w=s.default.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-478aa3aa-3"})(["",""],(({size:a,variant:t,inverse:r,animationTime:i,hasMotion:o})=>e.css(["position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:",",",";"," animation-iteration-count:",";"],y(t,r).innerBarBackground,c[a],m,u,o&&`animation-duration: ${i}s, ${i}s;`,o?"infinite, infinite":"none, none"))),k=s.default.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-478aa3aa-4"})([""," ",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:a,size:t,hasMotion:r,isTracked:i,isError:o,isSuccess:n,animationTime:s})=>{const c=`${l[t]}px`,p=d[t];return e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],c,c,p,a?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",p,(({inverse:e,isSuccess:a,isError:t})=>t?"#DB004E;":a?"#00811F;":e?"#FFF;":"#000000")({inverse:a,isSuccess:n,isError:o}),i?g:f,r&&`animation-duration: ${s}s;`,r?"infinite":"none")}),o.StyledButton,i.default),S="40px",_=s.default.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-478aa3aa-5"})(["position:relative;width:",";height:",";"],S,S),B={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},C=s.default.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-478aa3aa-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),L=s.default(r.Typography).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-478aa3aa-7"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],x,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),o.StyledButton,i.default,(({size:a="medium",loaderType:t,loaderVariant:r})=>"star"===t?e.css(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===t?e.css(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===a?"16px":"14px",B[t][a]):e.css(["font-size:",";font-weight:500;width:",";",";"],"large"===a?"16px":"extra-small"===a?"13px":"14px","inline"===r?"auto":"100%","inline"===r?`margin-left: ${p[a]}`:`margin-top: ${B[t][a]}`))),F=s.default.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-478aa3aa-8"})(["",""],(({loaderVariant:a})=>e.css(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===a?"row":"column","inline"===a?"auto":"100%"))),I=s.default.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-478aa3aa-9"})(["",";"],(({inverse:a})=>e.css(["color:",";"," &,"," &{color:currentColor;}"],a?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",o.StyledButton,i.default)));exports.InnerBar=w,exports.OuterBar=b,exports.StyledLabel=I,exports.StyledLoader=v,exports.StyledLoaderLabel=L,exports.StyledLoaderPlaceholder=h,exports.StyledRingCircleSvg=k,exports.StyledRingLoaderWrapper=F,exports.StyledStarLoaderWrapper=C,exports.StyledStars=_;
+"use strict";var e=require("styled-components"),t=require("styled-system"),r=require("../../../style/themes/apply-base-theme.js"),a=require("../../typography/typography.component.js");require("react/jsx-runtime"),require("react");var i=require("../../button/button.style.js"),o=require("../../button/__next__/button.style.js");function n(e){return e&&e.__esModule?e:{default:e}}var s=n(e);const l={"extra-small":20,small:32,medium:64,large:80},d={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},c={small:"4px",medium:"8px",large:"16px"},p={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},m=e.keyframes(["0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}"]),u=e.keyframes(["0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}"]),g=e.keyframes(["from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}"]),f=e.keyframes(["0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}"]),y=(e,t)=>{const r=t?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:r,innerBarBackground:t?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:r,innerBarBackground:t?"#FFFFFF":"#000000"}},x=e.css(["display:flex;justify-content:center;text-align:center;"]),h=s.default.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-23905a4e-0"})(["display:inline-block;min-width:var(--sizing800);"]),v=s.default.div.attrs(r.default).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-23905a4e-1"})([""," text-align:center;white-space:nowrap;"],t.margin),b=s.default.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-23905a4e-2"})(["",""],(({size:t,variant:r,inverse:a})=>e.css(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],c[t],y(r,a).outerBarBackground))),w=s.default.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-23905a4e-3"})(["",""],(({size:t,variant:r,inverse:a,animationTime:i,hasMotion:o})=>e.css(["position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:",",",";"," animation-iteration-count:",";"],y(r,a).innerBarBackground,c[t],m,u,o&&`animation-duration: ${i}s, ${i}s;`,o?"infinite, infinite":"none, none"))),k=s.default.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-23905a4e-4"})([""," ",' & circle[data-role="inner-arc"],',' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:t,size:r,hasMotion:a,isTracked:i,isError:o,isSuccess:n,animationTime:s})=>{const c=`${l[r]}px`,p=d[r];return e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],c,c,p,t?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",p,(({inverse:e,isSuccess:t,isError:r})=>r?"#DB004E;":t?"#00811F;":e?"#FFF;":"#000000")({inverse:t,isSuccess:n,isError:o}),i?g:f,a&&`animation-duration: ${s}s;`,a?"infinite":"none")}),o.StyledButton,i.default),S="40px",_=s.default.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-23905a4e-5"})(["position:relative;width:",";height:",";"],S,S),B={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},C=s.default.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-23905a4e-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),L=s.default(a.Typography).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-23905a4e-7"})([""," line-height:150%;color:",";"," &,"," &{color:currentColor;}",""],x,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),o.StyledButton,i.default,(({$size:t="medium",loaderType:r,loaderVariant:a})=>{const i=t;return"star"===r?e.css(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===r?e.css(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===i?"16px":"14px",B[r][i]):e.css(["font-size:",";font-weight:500;width:",";",";"],"large"===i?"16px":"extra-small"===i?"13px":"14px","inline"===a?"auto":"100%","inline"===a?`margin-left: ${p[i]}`:`margin-top: ${B[r][i]}`)})),F=s.default.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-23905a4e-8"})(["",""],(({loaderVariant:t})=>e.css(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===t?"row":"column","inline"===t?"auto":"100%"))),I=s.default.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-23905a4e-9"})(["",";"],(({inverse:t})=>e.css(["color:",";"," &,"," &{color:currentColor;}"],t?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",o.StyledButton,i.default)));exports.InnerBar=w,exports.OuterBar=b,exports.StyledLabel=I,exports.StyledLoader=v,exports.StyledLoaderLabel=L,exports.StyledLoaderPlaceholder=h,exports.StyledRingCircleSvg=k,exports.StyledRingLoaderWrapper=F,exports.StyledStarLoaderWrapper=C,exports.StyledStars=_;

package/lib/components/loader-spinner/loader-spinner.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../../__internal__/utils/helpers/tags/tags.js"),t=require("./loader-spinner.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var n=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("../../hooks/__internal__/useLocale/useLocale.js"),a=require("../../hooks/useMediaQuery/useMediaQuery.js"),o=require("../typography/typography.component.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}const l=l=>{var{spinnerLabel:c,size:u="medium",showSpinnerLabel:p=!0,variant:d="action",isTracked:y=!1,hasMotion:f=!0,animationTime:b}=l,g=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(l,["spinnerLabel","size","showSpinnerLabel","variant","isTracked","hasMotion","animationTime"]);const j=i.default(),O=a.default("screen and (prefers-reduced-motion: no-preference)");if(void 0===O)return null;const v="inverse"!==d&&"gradient-white"!==d,h=e.jsx(t.StyledLabel,{"data-role":"visible-label",variant:"span",fontWeight:"400",size:u,color:v?"var(--colorsUtilityYin090);":"var(--colorsActionMajorYang100);",fontSize:"extra-large"===u?"var(--sizing200)":"var(--sizing175)",lineHeight:"extra-large"===u?"var(--sizing300)":"var(--sizing250)",children:c||j.loaderSpinner.loading()}),m="gradient-white"===d||"gradient-grey"===d;return e.jsx(t.StyledSpinnerWrapper,(S=function(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}({size:u,role:"status"},r.default("loader-spinner",g),n.default(g)),w=null!=(w={children:O?e.jsxs(e.Fragment,{children:[e.jsxs(t.StyledSpinnerCircleSvg,{role:"presentation",size:u,variant:d,hasMotion:f,isTracked:y,isGradientVariant:m,animationTime:b||(m?2:1),viewBox:"0 0 24 24",children:[e.jsx("circle",{"data-role":"outer-arc"}),e.jsx("circle",{"data-role":"inner-arc"})]}),p?h:e.jsx(o.Typography,{"data-role":"hidden-label",variant:"span",screenReaderOnly:!0,children:c||j.loaderSpinner.loading()})]}):h})?w:{},Object.getOwnPropertyDescriptors?Object.defineProperties(S,Object.getOwnPropertyDescriptors(w)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(w)).forEach((function(e){Object.defineProperty(S,e,Object.getOwnPropertyDescriptor(w,e))})),S));var S,w};exports.LoaderSpinner=l,exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../../__internal__/utils/helpers/tags/tags.js"),t=require("./loader-spinner.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var n=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("../../hooks/__internal__/useLocale/useLocale.js"),a=require("../../hooks/useMediaQuery/useMediaQuery.js"),s=require("../typography/typography.component.js");function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const l=l=>{var{spinnerLabel:c,size:u="medium",showSpinnerLabel:p=!0,variant:d="action",isTracked:y=!1,hasMotion:f=!0,animationTime:b}=l,g=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(l,["spinnerLabel","size","showSpinnerLabel","variant","isTracked","hasMotion","animationTime"]);const j=i.default(),O=a.default("screen and (prefers-reduced-motion: no-preference)");if(void 0===O)return null;const v="inverse"!==d&&"gradient-white"!==d,h=e.jsx(t.StyledLabel,{"data-role":"visible-label",variant:"span",fontWeight:"400",$size:u,inverse:!v,fontSize:"extra-large"===u?"var(--sizing200)":"var(--sizing175)",lineHeight:"extra-large"===u?"var(--sizing300)":"var(--sizing250)",children:c||j.loaderSpinner.loading()}),m="gradient-white"===d||"gradient-grey"===d;return e.jsx(t.StyledSpinnerWrapper,(S=function(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){o(e,r,t[r])}))}return e}({size:u,role:"status"},r.default("loader-spinner",g),n.default(g)),w=null!=(w={children:O?e.jsxs(e.Fragment,{children:[e.jsxs(t.StyledSpinnerCircleSvg,{role:"presentation",size:u,variant:d,hasMotion:f,isTracked:y,isGradientVariant:m,animationTime:b||(m?2:1),viewBox:"0 0 24 24",children:[e.jsx("circle",{"data-role":"outer-arc"}),e.jsx("circle",{"data-role":"inner-arc"})]}),p?h:e.jsx(s.Typography,{"data-role":"hidden-label",variant:"span",screenReaderOnly:!0,children:c||j.loaderSpinner.loading()})]}):h})?w:{},Object.getOwnPropertyDescriptors?Object.defineProperties(S,Object.getOwnPropertyDescriptors(w)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(w)).forEach((function(e){Object.defineProperty(S,e,Object.getOwnPropertyDescriptor(w,e))})),S));var S,w};exports.LoaderSpinner=l,exports.default=l;

package/lib/components/loader-spinner/loader-spinner.style.d.ts

@@ -1,9 +1,11 @@
 import { LoaderSpinnerProps } from "./loader-spinner.component";
 export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
-}, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
+}, any, Required<{
+    $size: NonNullable<LoaderSpinnerProps["size"]>;
+}>, never>;
 interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {
     isGradientVariant?: boolean;
     size: Required<LoaderSpinnerProps>["size"];

package/lib/components/loader-spinner/loader-spinner.style.js

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),r=require("styled-system"),t=require("./loader-spinner.config.js"),a=require("../typography/typography.component.js");function n(e){return e&&e.__esModule?e:{default:e}}require("react/jsx-runtime"),require("react");var i=n(e);const o=(e,r)=>{switch(r){case"neutral":return e?"var(--colorsSemanticNeutral500)":"var(--colorsSemanticNeutral200)";case"gradient-grey":return e?"#00D639":"#0000001A";case"gradient-white":return e?"#00D639":"var(--colorsActionMajorYang100)";case"inverse":return"var(--colorsActionMajorYang100)";default:return e?"var(--colorsActionMajor500)":"var(--colorsActionMajor150)"}},s=i.default.div.withConfig({displayName:"loader-spinner.style__StyledSpinnerWrapper",componentId:"sc-3cab43b4-0"})([""," display:flex;flex-direction:",";"],r.margin,(({size:e})=>"extra-small"===e?"row":"column")),c=i.default(a.Typography).withConfig({displayName:"loader-spinner.style__StyledLabel",componentId:"sc-3cab43b4-1"})(["",""],(({size:r})=>e.css(["display:flex;justify-content:center;text-align:center;",";"],"extra-small"===r?"margin-left: var(--spacing100)":`margin-top: ${t.LOADER_SPINNER_SIZE_PARAMS[r].labelMarginTop}px`))),d=i.default.svg.withConfig({displayName:"loader-spinner.style__StyledSpinnerCircleSvg",componentId:"sc-3cab43b4-2"})(["",";"],(({size:r,isTracked:a,hasMotion:n,isGradientVariant:i,animationTime:s,variant:c})=>{const d=`${t.LOADER_SPINNER_SIZE_PARAMS[r].wrapperDimensions}px`;return r&&e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",";",' cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:80px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(270deg);@keyframes gradientAnimation{0%{stroke:#00d639;}33%{stroke:#11afff;}66%{stroke:#8f49fe;}}@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(0deg);stroke-dasharray:100;}40%{stroke-dasharray:80;}80%{stroke-dasharray:100;}100%{transform:rotate(360deg);}}animation-name:",",",";",";animation-timing-function:cubic-bezier(0.2,0.1,0.8,1);animation-iteration-count:",";"],d,d,t.LOADER_SPINNER_SIZE_PARAMS[r].strokeWidth,o(!1,c),"inverse"===c&&"stroke-opacity: 0.3;",t.LOADER_SPINNER_SIZE_PARAMS[r].strokeWidth,o(!0,c),a&&!i?"trackedAnimation":"untrackedAnimation","gradient-grey"===c||"gradient-white"===c?"gradientAnimation":"none",n&&`animation-duration: ${s}s`,n?"infinite":"none")}));exports.StyledLabel=c,exports.StyledSpinnerCircleSvg=d,exports.StyledSpinnerWrapper=s;
+"use strict";var e=require("styled-components"),r=require("styled-system"),t=require("./loader-spinner.config.js"),a=require("../typography/typography.component.js");function n(e){return e&&e.__esModule?e:{default:e}}require("react/jsx-runtime"),require("react");var i=n(e);const o=(e,r)=>{switch(r){case"neutral":return e?"var(--colorsSemanticNeutral500)":"var(--colorsSemanticNeutral200)";case"gradient-grey":return e?"#00D639":"#0000001A";case"gradient-white":return e?"#00D639":"var(--colorsActionMajorYang100)";case"inverse":return"var(--colorsActionMajorYang100)";default:return e?"var(--colorsActionMajor500)":"var(--colorsActionMajor150)"}},s=i.default.div.withConfig({displayName:"loader-spinner.style__StyledSpinnerWrapper",componentId:"sc-fe9a4dc0-0"})([""," display:flex;flex-direction:",";"],r.margin,(({size:e})=>"extra-small"===e?"row":"column")),c=i.default(a.Typography).withConfig({displayName:"loader-spinner.style__StyledLabel",componentId:"sc-fe9a4dc0-1"})(["",""],(({$size:r})=>e.css(["display:flex;justify-content:center;text-align:center;",";"],"extra-small"===r?"margin-left: var(--spacing100)":`margin-top: ${t.LOADER_SPINNER_SIZE_PARAMS[r].labelMarginTop}px`))),d=i.default.svg.withConfig({displayName:"loader-spinner.style__StyledSpinnerCircleSvg",componentId:"sc-fe9a4dc0-2"})(["",";"],(({size:r,isTracked:a,hasMotion:n,isGradientVariant:i,animationTime:s,variant:c})=>{const d=`${t.LOADER_SPINNER_SIZE_PARAMS[r].wrapperDimensions}px`;return r&&e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",";",' cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:80px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(270deg);@keyframes gradientAnimation{0%{stroke:#00d639;}33%{stroke:#11afff;}66%{stroke:#8f49fe;}}@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(0deg);stroke-dasharray:100;}40%{stroke-dasharray:80;}80%{stroke-dasharray:100;}100%{transform:rotate(360deg);}}animation-name:",",",";",";animation-timing-function:cubic-bezier(0.2,0.1,0.8,1);animation-iteration-count:",";"],d,d,t.LOADER_SPINNER_SIZE_PARAMS[r].strokeWidth,o(!1,c),"inverse"===c&&"stroke-opacity: 0.3;",t.LOADER_SPINNER_SIZE_PARAMS[r].strokeWidth,o(!0,c),a&&!i?"trackedAnimation":"untrackedAnimation","gradient-grey"===c||"gradient-white"===c?"gradientAnimation":"none",n&&`animation-duration: ${s}s`,n?"infinite":"none")}));exports.StyledLabel=c,exports.StyledSpinnerCircleSvg=d,exports.StyledSpinnerWrapper=s;

package/lib/components/loader-star/loader-star.style.d.ts

@@ -1,7 +1,7 @@
 import { LoaderStarProps } from "./loader-star.component";
 export declare const StyledLoaderStarWrapper: import("styled-components").StyledComponent<"div", any, LoaderStarProps, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, {}, never>;
 export declare const StyledStars: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -2,7 +2,7 @@ import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
 declare const StyledTile: import("styled-components").StyledComponent<"div", any, {
     theme: object;
-} & Pick<TileProps, "height" | "width" | "variant" | "highlightVariant" | "roundness" | "borderWidth" | "borderVariant"> & {
+} & Pick<TileProps, "height" | "width" | "variant" | "borderWidth" | "highlightVariant" | "roundness" | "borderVariant"> & {
     isHorizontal?: boolean;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "theme">;
 export default StyledTile;

package/lib/components/typography/__internal__/__next__/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./typography.component";
+export type { TypographyProps } from "./typography.component";

package/lib/components/typography/__internal__/__next__/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./typography.component.js");exports.default=e.Typography;

package/lib/components/typography/__internal__/__next__/package.json

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

package/lib/components/typography/__internal__/__next__/typography.component.d.ts

@@ -0,0 +1,37 @@
+import React, { HTMLAttributes, AriaAttributes, CSSProperties } from "react";
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../../../__internal__/utils/helpers/tags";
+export declare const VARIANT_TYPES: readonly ["h1", "h2", "h3", "h4", "h5", "section-heading", "section-subheading", "ul", "ol", "sup", "sub", "strong", "b", "p"];
+type VariantTypes = (typeof VARIANT_TYPES)[number];
+export declare const ALLOWED_CSS_TEXT_OVERRIDE_KEYS: ["textTransform", "textDecoration", "display", "whiteSpace", "wordBreak", "wordWrap", "textAlign", "textOverflow", "overflow"];
+export type AllowedCSSTextOverrides = Pick<CSSProperties, (typeof ALLOWED_CSS_TEXT_OVERRIDE_KEYS)[number]>;
+export interface TypographyProps extends SpaceProps, TagProps, Pick<HTMLAttributes<HTMLElement>, "role">, Pick<AriaAttributes, "aria-hidden" | "aria-live">, AllowedCSSTextOverrides {
+    /** Adds element and creates a visual style associated with said element. */
+    variant?: VariantTypes;
+    /** Override the underlying HTML element rendered by the component. */
+    as?: React.ElementType;
+    /** Content to be rendered inside the Typography component. */
+    children?: React.ReactNode;
+    /** Set the ID attribute of the Typography component. */
+    id?: string;
+    /** When set to `true`, uses fluid typography with CSS clamp() values for responsive sizing. */
+    fluid?: boolean;
+    /** When set to `true`, inverts the font color for use on darker backgrounds. */
+    inverse?: boolean;
+    /** When set to `true`, the component will apply visually hidden styling, hiding the component visually but ensuring the component is still in the accessibility tree. */
+    screenReaderOnly?: boolean;
+    /** The size to apply to text. Only available for non-heading variants. */
+    size?: "M" | "L";
+    /** The color tint to apply to text. Accepts "default" for standard text color or "alt" for alternative text color. Only available for non-heading variants. */
+    tint?: "default" | "alt";
+    /** The font weight to apply to text. Only available for non-heading variants. Note: Has no effect on "strong" or "b" variants as they have fixed medium weight. */
+    weight?: "regular" | "medium";
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
+}
+export declare const Typography: ({ variant, as, children, id, fluid, inverse, screenReaderOnly, size, tint, weight, role, "aria-hidden": ariaHidden, "aria-live": ariaLive, className, ...rest }: TypographyProps) => React.JSX.Element;
+export default Typography;

package/lib/components/typography/__internal__/__next__/typography.component.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../../../../__internal__/utils/helpers/tags/tags.js"),t=require("../../../../style/utils/filter-styled-system-padding-props.js"),i=require("../../../../style/utils/filter-styled-system-margin-props.js"),n=require("../../../../__internal__/filter-object-properties/filter-object-properties.js"),s=require("./typography.style.js");function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const o=["h1","h2","h3","h4","h5","section-heading","section-subheading","ul","ol","sup","sub","strong","b","p"],l=["textTransform","textDecoration","display","whiteSpace","wordBreak","wordWrap","textAlign","textOverflow","overflow"],c=c=>{var u,p,{variant:f="p",as:d,children:y,id:O,fluid:b=!1,inverse:g=!1,screenReaderOnly:h=!1,size:j="M",tint:v="default",weight:m="regular",role:w,"aria-hidden":P,"aria-live":_,className:x}=c,S=function(e,r){if(null==e)return{};var t,i,n=function(e,r){if(null==e)return{};var t,i,n={},s=Object.keys(e);for(i=0;i<s.length;i++)t=s[i],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i<s.length;i++)t=s[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(c,["variant","as","children","id","fluid","inverse","screenReaderOnly","size","tint","weight","role","aria-hidden","aria-live","className"]);return e.jsx(s.default,(u=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){a(e,r,t[r])}))}return e}({id:O,as:d||("section-heading"===f?"h2":"section-subheading"===f?"h3":o.includes(f)?f:"p"),$variant:f,$fluid:b,$inverse:g,$screenReaderOnly:h,$size:j,$tint:v,$weight:m,role:w,"aria-hidden":P,"aria-live":_,className:x},r.default("typography",S),i.default(S),t.default(S),Object.fromEntries(Object.entries(n.default(S,l)).map((([e,r])=>[`$${e}`,r])))),p=null!=(p={children:y})?p:{},Object.getOwnPropertyDescriptors?Object.defineProperties(u,Object.getOwnPropertyDescriptors(p)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(p)).forEach((function(e){Object.defineProperty(u,e,Object.getOwnPropertyDescriptor(p,e))})),u))};exports.ALLOWED_CSS_TEXT_OVERRIDE_KEYS=l,exports.Typography=c,exports.VARIANT_TYPES=o,exports.default=c;

package/lib/components/typography/__internal__/__next__/typography.style.d.ts

@@ -0,0 +1,25 @@
+import { SpaceProps } from "styled-system";
+import { AllowedCSSTextOverrides } from "./typography.component";
+import { TypographyProps } from "./typography.component";
+export interface StyledTypographyProps extends SpaceProps {
+    $variant?: TypographyProps["variant"];
+    $fluid?: TypographyProps["fluid"];
+    $inverse?: TypographyProps["inverse"];
+    $screenReaderOnly?: TypographyProps["screenReaderOnly"];
+    $size?: TypographyProps["size"];
+    $tint?: TypographyProps["tint"];
+    $weight?: TypographyProps["weight"];
+    $display?: AllowedCSSTextOverrides["display"];
+    $whiteSpace?: AllowedCSSTextOverrides["whiteSpace"];
+    $wordBreak?: AllowedCSSTextOverrides["wordBreak"];
+    $wordWrap?: AllowedCSSTextOverrides["wordWrap"];
+    $textAlign?: AllowedCSSTextOverrides["textAlign"];
+    $textDecoration?: AllowedCSSTextOverrides["textDecoration"];
+    $textOverflow?: AllowedCSSTextOverrides["textOverflow"];
+    $textTransform?: AllowedCSSTextOverrides["textTransform"];
+    $overflow?: AllowedCSSTextOverrides["overflow"];
+}
+declare const StyledTypography: import("styled-components").StyledComponent<"span", any, {
+    theme: object;
+} & StyledTypographyProps, "theme">;
+export default StyledTypography;

package/lib/components/typography/__internal__/__next__/typography.style.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../../../style/themes/apply-base-theme.js"),s=require("../../../../style/utils/visually-hidden.js");function r(e){return e&&e.__esModule?e:{default:e}}const a={h1:"heading-l",h2:"heading-m",h3:"heading-s",h4:"subheading-l",h5:"subheading-m","section-heading":"section-heading-m","section-subheading":"section-heading-s"},i=r(e).default.span.attrs(o.default).withConfig({displayName:"typography.style__StyledTypography",componentId:"sc-6c185d6b-0"})(["",""],(({$display:o,$variant:r,$fluid:i,$inverse:n,$size:d,$tint:l,$weight:c,$whiteSpace:$,$wordBreak:u,$wordWrap:v,$textAlign:f,$textDecoration:h,$textOverflow:p,$textTransform:g,$overflow:y,$screenReaderOnly:m})=>{const b=i?"fluid":"static",w="M"===d?"m":"l",x=`var(--container-standard${n?"-inverse":""}-txt-default)`,_=`var(--container-standard${n?"-inverse":""}-txt-${l})`,q=r&&r in a,j="strong"===r||"b"===r,z="sup"===r||"sub"===r,M=`--global-font-${b}-${q?a[r]:""}`,O=`--global-font-${b}-body-medium-${w}`,k=`--global-font-${b}-body-${c}-${w}`;return e.css([""," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],!m&&"margin: unset;",t.space,m&&s.default,void 0!==o&&`display: ${o};`,void 0!==$&&`white-space: ${$};`,void 0!==u&&`word-break: ${u};`,void 0!==v&&`word-wrap: ${v};`,void 0!==f&&`text-align: ${f};`,void 0!==h&&`text-decoration: ${h};`,void 0!==p&&`text-overflow: ${p};`,void 0!==g&&`text-transform: ${g};`,void 0!==y&&`overflow: ${y};`,q&&e.css(["font:var(",");color:",";"],M,x),j&&e.css(["font:var(",");color:",";"],O,_),"sup"===r&&e.css(["font:var(",");font-size:0.75em;color:",";vertical-align:super;"],k,_),"sub"===r&&e.css(["font:var(",");font-size:0.75em;color:",";vertical-align:sub;"],k,_),!q&&!j&&!z&&e.css(["font:var(",");color:",";"],k,_))}));exports.default=i;

package/lib/components/typography/list.component.d.ts

@@ -6,6 +6,36 @@ export interface ListProps extends TypographyProps {
 export interface ListItemProps extends Omit<ListProps, "variant"> {
     children?: React.ReactNode;
 }
+/**
+ * @deprecated The List component is part of the legacy Typography system and will be removed in a future release.
+ * Use the Typography component with `variant="ul"` or `variant="ol"` instead, or use proper semantic HTML list elements (ul, ol, li) with Typography components inside.
+ *
+ * Example migration:
+ * ```tsx
+ * // Before
+ * <List>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </List>
+ *
+ * // After (using Typography list variants)
+ * <Typography variant="ul">
+ *   <Typography as="li">Item 1</Typography>
+ *   <Typography as="li">Item 2</Typography>
+ * </Typography>
+ *
+ * // After (using native HTML with Typography)
+ * <ul>
+ *   <li><Typography>Item 1</Typography></li>
+ *   <li><Typography>Item 2</Typography></li>
+ * </ul>
+ * ```
+ */
 declare const List: ({ children, as, variant, ...props }: ListProps) => React.JSX.Element;
+/**
+ * @deprecated The ListItem component is part of the legacy Typography system and will be removed in a future release.
+ * Use Typography with `as="li"` instead, or use semantic HTML li elements with Typography components inside.
+ * You can use the `as` prop on Typography to inherit list styling while using Typography's text styling capabilities.
+ */
 declare const ListItem: ({ children, ...props }: ListItemProps) => React.JSX.Element;
 export { List, ListItem };

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

@@ -1,22 +1,43 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export declare const VARIANT_TYPES: readonly ["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"];
+import type { TypographyProps as NextTypographyProps } from "./__internal__/__next__/";
+export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "section-heading", "segment-header-small", "segment-subheader", "section-subheading", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export type VariantTypes = (typeof VARIANT_TYPES)[number];
-export interface TypographyProps extends SpaceProps, TagProps {
+export interface TypographyProps extends SpaceProps, TagProps, Pick<NextTypographyProps, "weight" | "tint" | "size" | "fluid" | "inverse" | "overflow"> {
     /** Override the variant component */
     as?: React.ElementType;
     /** Set the ID attribute of the Typography component */
     id?: string;
     /** Content to be rendered inside the Typography component */
     children?: React.ReactNode;
-    /** The visual style to apply to the component */
+    /**
+     * The visual style to apply to the component. Supported variants include:
+     * h1, h2, h3, h4, h5, section-heading, section-subheading, p (default),
+     * sup, sub, strong, b, ul, ol
+     *
+     * The following variant values are deprecated with recommended alternatives:
+     * - "h1-large" -> use "h1" instead
+     * - "segment-header" -> use "section-heading" instead
+     * - "segment-header-small" -> use "section-subheading" instead
+     * - "segment-subheader" / "segment-subheader-alt" -> use "h5" instead
+     * - "span" -> use "p" instead
+     * - "small" -> use "p" with the `size` prop set to "M"
+     * - "big" -> use "h5" or "h4" depending on context, or "p" with `size` prop set to "L"
+     * - "em" -> use "strong" or "b" for semantic emphasis
+     */
     variant?: VariantTypes;
-    /** Override the variant font-size */
+    /**
+     * @deprecated Use the new `size` prop for paragraphs or choose the appropriate variant for other variants. This prop will eventually be removed.
+     * Override the variant font-size */
     fontSize?: string;
-    /** Override the variant font-weight */
+    /**
+     * @deprecated Use the new `weight` prop for paragraphs or choose the appropriate variant for other variants. This prop will eventually be removed.
+     * Override the variant font-weight */
     fontWeight?: string;
-    /** Override the variant line-height */
+    /**
+     * @deprecated Choose the appropriate variant for your use case, as each variant has its own line-height. This prop will eventually be removed.
+     * Override the variant line-height */
     lineHeight?: string;
     /** Override the variant text-transform */
     textTransform?: string;
@@ -24,7 +45,9 @@ export interface TypographyProps extends SpaceProps, TagProps {
     textDecoration?: string;
     /** Override the variant display */
     display?: string;
-    /** Override the list-style-type */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the list-style-type */
     listStyleType?: string;
     /** Override the white-space */
     whiteSpace?: string;
@@ -36,20 +59,31 @@ export interface TypographyProps extends SpaceProps, TagProps {
     textAlign?: string;
     /** Override the text-overflow */
     textOverflow?: string;
-    /** Apply truncation */
+    /**
+     * @deprecated Use `textOverflow` and `whiteSpace` props instead. This prop will eventually be removed.
+     * Apply truncation */
     truncate?: boolean;
-    /** Override the color style */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the color style. If a white colour is needed, use the `inverse` prop instead. */
     color?: string;
-    /** Override the backgroundColor style */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the backgroundColor style */
     backgroundColor?: string;
-    /** Override the bg value shorthand for backgroundColor */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the bg value shorthand for backgroundColor */
     bg?: string;
-    /** Override the opacity value */
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the opacity value */
     opacity?: string | number;
     /** Set whether it will be visually hidden
      * NOTE: This is for screen readers only and will make a lot of the other props redundant */
     screenReaderOnly?: boolean;
     /**
+     * @deprecated
      * @private
      * @ignore
      * Override the default color of the rendered element to match disabled styling
@@ -71,7 +105,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
     "data-component"?: string;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: TypographyProps): React.JSX.Element;
+    ({ variant, as, id, fluid, inverse, size, tint, weight, truncate, color, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/lib/components/typography/typography.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("../../__internal__/utils/helpers/tags/tags.js"),r=require("../../style/utils/filter-styled-system-padding-props.js"),a=require("../../style/utils/filter-styled-system-margin-props.js"),n=require("./typography.style.js");function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=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=l=>{var s,c,{"data-component":p,variant:u="p",as:d,id:y,fontSize:g,fontWeight:b,textTransform:f,lineHeight:h,textDecoration:O,display:m,listStyleType:j,whiteSpace:w,wordBreak:v,wordWrap:x,textAlign:S,textOverflow:P,truncate:k,color:D="blackOpacity90",backgroundColor:T,bg:_,opacity:q,children:W,screenReaderOnly:A,isDisabled:N,"aria-live":E,role:R,"aria-hidden":z,className:B}=l,C=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},i=Object.keys(e);for(a=0;a<i.length;a++)r=i[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)r=i[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(l,["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-live","role","aria-hidden","className"]);return e.jsx(n.default,(s=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){i(e,t,r[t])}))}return e}({variant:u,as:d||o(u),id:y,fontSize:g,fontWeight:b,textTransform:f,lineHeight:h,textDecoration:O,display:m,listStyleType:j,whiteSpace:w,wordWrap:x,wordBreak:v,textAlign:S,textOverflow:P,truncate:k,color:D,backgroundColor:T,bg:_,opacity:q,screenReaderOnly:A,isDisabled:N,"aria-hidden":z,className:B,role:R,"aria-live":E},t.default(p,C),a.default(C),r.default(C)),c=null!=(c={children:W})?c:{},Object.getOwnPropertyDescriptors?Object.defineProperties(s,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(s,e,Object.getOwnPropertyDescriptor(c,e))})),s))};l.displayName="Typography",exports.Typography=l,exports.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"],exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../../__internal__/filter-object-properties/filter-object-properties.js"),t=require("./__internal__/__next__/typography.component.js"),n=require("./typography.style.js");function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(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){a(e,r,t[r])}))}return e}function i(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 l={"h1-large":"h1",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5","segment-header":"h2","segment-header-small":"h3","segment-subheader":"h5","segment-subheader-alt":"h5","section-heading":"h2","section-subheading":"h3",p:"p",span:"span",small:"small",big:"big",sup:"sup",sub:"sub",strong:"strong",em:"em",b:"b",ul:"ul",ol:"ol"},o=e=>{var r;return null!==(r=e&&l[e])&&void 0!==r?r:"p"},u=a=>{var{variant:l="p",as:u,id:c,fluid:h=!1,inverse:p=!1,size:d="M",tint:b="default",weight:g="regular",truncate:f=!1,color:y,children:O,screenReaderOnly:m=!1,"aria-live":j,"aria-hidden":v}=a,w=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},s=Object.keys(e);for(n=0;n<s.length;n++)t=s[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)t=s[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(a,["variant","as","id","fluid","inverse","size","tint","weight","truncate","color","children","screenReaderOnly","aria-live","aria-hidden"]);const _=(e=>{switch(e){case"h1-large":return"h1";case"segment-header":return"section-heading";case"segment-header-small":return"section-subheading";case"segment-subheader":case"segment-subheader-alt":return"h5";default:return e}})(l),P=r.default(w,t.ALLOWED_CSS_TEXT_OVERRIDE_KEYS);f&&(P.overflow="hidden",P.whiteSpace="nowrap",P.textOverflow="ellipsis");const S=new Set(["white","#fff","#ffffff","rgb(255,255,255)","rgb(255, 255, 255)"]),x=p||y&&S.has(y);return e.jsx(n.default,i(s(i(s({variant:_,forwardedAs:u||o(l),id:c},P),{fluid:h,inverse:x,screenReaderOnly:m,"aria-live":j,"aria-hidden":v,size:d,tint:b,weight:g}),w),{children:O}))};u.displayName="Typography",exports.Typography=u,exports.VARIANT_TYPES=["h1-large","h1","h2","h3","h4","h5","segment-header","section-heading","segment-header-small","segment-subheader","section-subheading","segment-subheader-alt","p","span","small","big","sup","sub","strong","b","em","ul","ol"],exports.default=u;

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

@@ -1,5 +1,5 @@
 import { TypographyProps } from "./typography.component";
-declare const StyledTypography: import("styled-components").StyledComponent<"span", any, {
+declare const StyledTypography: import("styled-components").StyledComponent<({ variant, as, children, id, fluid, inverse, screenReaderOnly, size, tint, weight, role, "aria-hidden": ariaHidden, "aria-live": ariaLive, className, ...rest }: import("./__internal__/__next__").TypographyProps) => import("react").JSX.Element, any, {
     theme: object;
 } & TypographyProps, "theme">;
 export default StyledTypography;

package/lib/components/typography/typography.style.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("styled-system"),t=require("../../style/utils/color.js"),s=require("../../style/themes/apply-base-theme.js"),a=require("../../style/utils/visually-hidden.js");function n(e){return e&&e.__esModule?e:{default:e}}function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const c=n(e).default.span.attrs(s.default).withConfig({displayName:"typography.style__StyledTypography",componentId:"sc-f80efd85-0"})([""," "," "," ",""],(({fontSize:r,fontWeight:t,display:s,variant:n,lineHeight:l,listStyleType:c,whiteSpace:o,wordBreak:u,wordWrap:i,textAlign:p,textDecoration:d,textOverflow:h,textTransform:g,truncate:f,screenReaderOnly:y})=>{const b=r||(e=>{switch(e){case"h1-large":return"40px";case"h1":return"30px";case"h2":return"24px";case"h3":case"segment-header":return"21px";case"h4":case"segment-header-small":return"18px";case"h5":case"segment-subheader":case"big":return"16px";case"small":case"sub":case"sup":return"13px";default:return"14px"}})(n),m=t||(e=>{switch(e){case"h1-large":case"h1":case"h2":case"segment-header":case"segment-header-small":return"700";case"h3":case"segment-subheader":case"segment-subheader-alt":case"b":case"em":case"strong":return"500";default:return"400"}})(n),x=g||(e=>"segment-subheader-alt"===e?"uppercase":"none")(n),w=d||(e=>"em"===e?"underline":"none")(n),O=l||(e=>{switch(e){case"h1-large":return"50px";case"h1":return"37.5px";case"h2":return"30px";case"h3":case"segment-header":return"26.25px";case"h4":case"segment-header-small":return"22.5px";case"h5":case"small":case"sub":case"sup":return"20px";case"segment-subheader":case"big":return"24px";default:return"21px"}})(n),v="p"===n?"0 0 16px":"0";return e.css(["font-style:normal;font-size:",";font-weight:",";text-transform:",";text-decoration:",";line-height:",";margin:",";padding:0;white-space:",";word-break:",";word-wrap:",";text-align:",";text-overflow:",";",";"," "," "," "," ",""],b,m,x,w,O,v,f?"nowrap":o,u,i,p,h||f&&"ellipsis",f&&"\n        overflow: hidden;\n      ",y&&a.default,"sup"===n&&"vertical-align: super;","sub"===n&&"vertical-align: sub;",s&&`display: ${s};`,c&&`list-style-type: ${c};`)}),r.space,(e=>{var{color:r,bg:s,backgroundColor:a}=e,n=function(e,r){if(null==e)return{};var t,s,a=function(e,r){if(null==e)return{};var t,s,a={},n=Object.keys(e);for(s=0;s<n.length;s++)t=n[s],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(s=0;s<n.length;s++)t=n[s],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(e,["color","bg","backgroundColor"]);return t.default(function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},s=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),s.forEach((function(r){l(e,r,t[r])}))}return e}({color:r,bg:s,backgroundColor:a},n))}),(({isDisabled:r})=>r&&e.css(["color:var(--colorsUtilityYin030);"])));c.displayName="Typography",exports.default=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),s=require("../../style/themes/apply-base-theme.js"),r=require("./__internal__/__next__/typography.component.js"),a=require("../../style/utils/visually-hidden.js");function n(e){return e&&e.__esModule?e:{default:e}}const l=n(e).default(r.Typography).attrs(s.default).withConfig({displayName:"typography.style__StyledTypography",componentId:"sc-bec9c5e6-0"})([""," ",""],(({fontSize:t,fontWeight:s,lineHeight:r,variant:n,screenReaderOnly:l})=>{const i="p"===n?"0 0 var(--global-space-comp-l)":"0";return e.css([""," "," "," margin:",";",""],t&&`font-size: ${t};`,s&&`font-weight: ${s};`,r&&`line-height: ${r};`,i,l&&a.default)}),t.space);l.displayName="Typography",exports.default=l;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "158.44.0",
+  "version": "158.45.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",