carbon-react 159.0.1 → 159.2.0-beta.1

package/esm/__spec_helper__/mock-match-media.d.ts

@@ -2,3 +2,5 @@ export declare const setupMatchMediaMock: () => void;
 export declare const mockMatchMedia: (matches: boolean) => {
     removeEventListener: jest.Mock<any, any, any>;
 };
+/** Simulate a media query change — updates `matches` and fires captured listeners */
+export declare const simulateMediaQueryChange: (matches: boolean) => void;

package/esm/__spec_helper__/mock-match-media.js

@@ -1 +1 @@
-let e=!1,t=!1;const n=jest.fn(),o=()=>{if("undefined"==typeof window)return;const o=()=>{};Object.defineProperty(global.window,"matchMedia",{writable:!0,value:e=>({matches:t,media:e,onchange:null,addEventListener:o,removeEventListener:n,dispatchEvent:o})}),e=!0},i=o=>{if(!e)throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");return t=o,{removeEventListener:n}};export{i as mockMatchMedia,o as setupMatchMediaMock};
+let e=!1,t=!1;const n=jest.fn();let o=new Set;const r=()=>{if("undefined"==typeof window)return;const r=()=>{};Object.defineProperty(global.window,"matchMedia",{writable:!0,value:e=>({get matches(){return t},media:e,onchange:null,addEventListener:(e,t)=>{o.add(t)},removeEventListener:(e,t)=>{o.delete(t),n()},dispatchEvent:r})}),e=!0},a=r=>{if(!e)throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");return t=r,o=new Set,{removeEventListener:n}},d=e=>{t=e,o.forEach((e=>e()))};export{a as mockMatchMedia,r as setupMatchMediaMock,d as simulateMediaQueryChange};

package/esm/components/advanced-color-picker/advanced-color-picker.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as t,useEffect as l,useCallback as n}from"react";import{StyledAdvancedColorPickerWrapper as i,HiddenCurrentColorList as a,DialogStyle as c,StyledAdvancedColorPickerPreview as s}from"./advanced-color-picker.style.js";import{SimpleColorPicker as p}from"../simple-color-picker/simple-color-picker.component.js";import{SimpleColor as u}from"../simple-color-picker/simple-color/simple-color.component.js";import d from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import m from"../../style/utils/filter-styled-system-margin-props.js";import f from"../../__internal__/utils/helpers/guid/index.js";import b from"../../hooks/__internal__/useLocale/useLocale.js";import"../definition-list/dl.component.js";import y from"../definition-list/dt/dt.component.js";import v from"../definition-list/dd/dd.component.js";import O from"../../__internal__/utils/helpers/tags/tags.js";import j from"./advanced-color-picker-cell.style.js";function g(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}const h=h=>{var{"aria-describedby":k,"aria-label":C,"aria-labelledby":P,availableColors:_,name:w,onOpen:D,onClose:x,onChange:E,onBlur:S,open:K=!1,role:F,selectedColor:R,restoreFocusOnClose:B=!0}=h,I=function(e,r){if(null==e)return{};var o,t,l=function(e,r){if(null==e)return{};var o,t,l={},n=Object.keys(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||(l[o]=e[o]);return l}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(h,["aria-describedby","aria-label","aria-labelledby","availableColors","name","onOpen","onClose","onChange","onBlur","open","role","selectedColor","restoreFocusOnClose"]);const[L,T]=o(),[z,A]=o(null),q=t(f()),G=b(),H=t(null),J=_.map((({value:e,label:r},o)=>({value:e,label:r,getRef:()=>H.current?H.current.gridItemRefs[o]:null}))),M=()=>{var e;return(null===(e=_.find((e=>e.value===R)))||void 0===e?void 0:e.label)||R};l((()=>{if(L||K){const e=null==J?void 0:J.find((e=>R===e.value));e&&A(e.getRef())}}),[J,R,L,K]);const N=n(((e,r)=>{"Tab"===e.key&&(e.shiftKey?document.activeElement===r&&z&&(z.focus(),e.preventDefault()):document.activeElement===z&&(null==r||r.focus(),e.preventDefault()))}),[z]),Q=n((e=>{T(!0),D&&D(e)}),[D]),U=n((e=>{T(!1),x&&x(e)}),[x]),V=n((e=>{const r=null==J?void 0:J.find((r=>e.target.value===r.value));r&&A(r.getRef()),E&&E(e)}),[E,J]),W=n((e=>{(d.isEnterKey(e)||d.isSpaceKey(e))&&(e.preventDefault(),Q(e))}),[Q]),X=n((e=>{(d.isEnterKey(e)||d.isSpaceKey(e))&&(e.preventDefault(),U(e))}),[U]),Y=n((e=>{S&&S(e)}),[S]);return e(i,(Z=function(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){g(e,r,o[r])}))}return e}({m:"15px auto auto 15px"},m(I),O("advanced-color-picker",I)),$=null!=($={children:[r(j,{"data-element":"color-picker-cell","aria-label":G.advancedColorPicker.ariaLabel(),"aria-describedby":q.current,onClick:Q,onKeyDown:W,color:R,tabIndex:0}),e(a,{id:q.current,"data-element":"current-color-description",children:[r(y,{children:G.advancedColorPicker.currentColorDescriptionTerm(M())}),r(v,{children:G.advancedColorPicker.currentColorAssigned(M())})]}),e(c,{"aria-describedby":k,"aria-label":C,"aria-labelledby":P,open:L||K,size:"auto",onCancel:U,bespokeFocusTrap:N,focusFirstElement:z,role:F,restoreFocusOnClose:B,children:[r(s,{"data-element":"color-picker-preview",color:R}),r(p,{name:w,legend:"",onChange:V,onBlur:Y,onKeyDown:X,ref:H,value:R,children:null==J?void 0:J.map((({value:e,label:o})=>r(u,{value:e,"aria-label":o,id:e,checked:e===R},e)))})]})]})?$:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Z,Object.getOwnPropertyDescriptors($)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object($)).forEach((function(e){Object.defineProperty(Z,e,Object.getOwnPropertyDescriptor($,e))})),Z));var Z,$};export{h as AdvancedColorPicker,h as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as t,useEffect as l,useCallback as n}from"react";import{StyledAdvancedColorPickerWrapper as i,HiddenCurrentColorList as a,DialogStyle as c,StyledAdvancedColorPickerPreview as s}from"./advanced-color-picker.style.js";import{SimpleColorPicker as p}from"../simple-color-picker/simple-color-picker.component.js";import{SimpleColor as u}from"../simple-color-picker/simple-color/simple-color.component.js";import d from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import m from"../../style/utils/filter-styled-system-margin-props.js";import f from"../../__internal__/utils/helpers/guid/index.js";import b from"../../hooks/__internal__/useLocale/useLocale.js";import"../definition-list/dl.component.js";import y from"../definition-list/dt/dt.component.js";import v from"../definition-list/dd/dd.component.js";import O from"../../__internal__/utils/helpers/tags/tags.js";import j from"./advanced-color-picker-cell.style.js";function g(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}const h=h=>{var{"aria-describedby":k,"aria-label":C,"aria-labelledby":P,availableColors:_,name:w,onOpen:D,onClose:x,onChange:E,onBlur:S,open:K=!1,role:F,selectedColor:R,restoreFocusOnClose:B=!0}=h,I=function(e,r){if(null==e)return{};var o,t,l=function(e,r){if(null==e)return{};var o,t,l={},n=Object.keys(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||(l[o]=e[o]);return l}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(h,["aria-describedby","aria-label","aria-labelledby","availableColors","name","onOpen","onClose","onChange","onBlur","open","role","selectedColor","restoreFocusOnClose"]);const[L,T]=o(),[z,A]=o(null),q=t(f()),G=b(),H=t(null),J=_.map((({value:e,label:r},o)=>({value:e,label:r,getRef:()=>H.current?H.current.gridItemRefs[o]:null}))),M=()=>{var e;return(null===(e=_.find((e=>e.value===R)))||void 0===e?void 0:e.label)||R};l((()=>{if(L||K){const e=null==J?void 0:J.find((e=>R===e.value));e&&A(e.getRef())}}),[J,R,L,K]);const N=n(((e,r)=>{"Tab"===e.key&&(e.shiftKey?document.activeElement===r&&z&&(z.focus(),e.preventDefault()):document.activeElement===z&&(null==r||r.focus(),e.preventDefault()))}),[z]),Q=n((e=>{T(!0),D&&D(e)}),[D]),U=n((e=>{T(!1),x&&x(e)}),[x]),V=n((e=>{const r=null==J?void 0:J.find((r=>e.target.value===r.value));r&&A(r.getRef()),E&&E(e)}),[E,J]),W=n((e=>{(d.isEnterKey(e)||d.isSpaceKey(e))&&(e.preventDefault(),Q(e))}),[Q]),X=n((e=>{(d.isEnterKey(e)||d.isSpaceKey(e))&&(e.preventDefault(),U(e))}),[U]),Y=n((e=>{S&&S(e)}),[S]);return e(i,(Z=function(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){g(e,r,o[r])}))}return e}({m:"15px auto auto 15px"},m(I),O("advanced-color-picker",I)),$=null!=($={children:[r(j,{"data-element":"color-picker-cell","aria-label":G.advancedColorPicker.ariaLabel(),"aria-describedby":q.current,onClick:Q,onKeyDown:W,color:R,tabIndex:0}),e(a,{id:q.current,"data-element":"current-color-description",children:[r(y,{children:G.advancedColorPicker.currentColorDescriptionTerm(M())}),r(v,{children:G.advancedColorPicker.currentColorAssigned(M())})]}),e(c,{"aria-describedby":k,"aria-label":C,"aria-labelledby":P,open:L||K,size:"small",onCancel:U,bespokeFocusTrap:N,focusFirstElement:z,role:F,restoreFocusOnClose:B,children:[r(s,{"data-element":"color-picker-preview",color:R}),r(p,{name:w,legend:"",onChange:V,onBlur:Y,onKeyDown:X,ref:H,value:R,children:null==J?void 0:J.map((({value:e,label:o})=>r(u,{value:e,"aria-label":o,id:e,checked:e===R},e)))})]})]})?$:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Z,Object.getOwnPropertyDescriptors($)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object($)).forEach((function(e){Object.defineProperty(Z,e,Object.getOwnPropertyDescriptor($,e))})),Z));var Z,$};export{h as AdvancedColorPicker,h as default};

package/esm/components/advanced-color-picker/advanced-color-picker.style.js

@@ -1 +1 @@
-import o,{css as r}from"styled-components";import{margin as e}from"styled-system";export{default as StyledAdvancedColorPickerCell}from"./advanced-color-picker-cell.style.js";import{StyledColorOptions as i}from"../simple-color-picker/simple-color-picker.style.js";import{StyledSimpleColor as t}from"../simple-color-picker/simple-color/simple-color.style.js";import{StyledDialogContent as l}from"../dialog/dialog.style.js";import{Dialog as d}from"../dialog/dialog.component.js";import c from"../icon-button/icon-button.style.js";import n from"../simple-color-picker/simple-color/checker-board.svg";import s from"../../style/utils/visually-hidden.js";import a from"../definition-list/dl.component.js";import"../definition-list/dt/dt.component.js";import"../definition-list/dd/dd.component.js";import p from"../../style/themes/apply-base-theme.js";const m=o.div.attrs(p).withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerWrapper",componentId:"sc-a7cde62d-0"})([""," display:inline-block;"],e),y=o(a).withConfig({displayName:"advanced-color-picker.style__HiddenCurrentColorList",componentId:"sc-a7cde62d-1"})(["",""],s),g=o.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerPreview",componentId:"sc-a7cde62d-2"})(["width:25px;height:25px;margin-bottom:15px;border:1px solid var(--colorsUtilityYin090);border-radius:var(--borderRadius050);"," "," &:hover{cursor:initial;}"],(({color:o})=>"transparent"!==o&&r(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&r(['background-color:#eeeeee;background-image:url("','");background-size:10px 10px;'],n))),f=o(d).withConfig({displayName:"advanced-color-picker.style__DialogStyle",componentId:"sc-a7cde62d-3"})(["","{padding:var(--spacing200);}","{max-width:285px;","{border:1px solid var(--colorsUtilityYin090);margin-right:-1px;margin-bottom:-1px;transition:all 0.2s ease;&:hover{transform:scale(1.1);}}}","{border:none;}",'{top:20px;right:13px;}[data-component="icon"]{color:var(--colorsActionMinor500);}'],l,i,t,i,c);export{f as DialogStyle,y as HiddenCurrentColorList,g as StyledAdvancedColorPickerPreview,m as StyledAdvancedColorPickerWrapper};
+import o,{css as r}from"styled-components";import{margin as e}from"styled-system";export{default as StyledAdvancedColorPickerCell}from"./advanced-color-picker-cell.style.js";import{StyledColorOptions as i}from"../simple-color-picker/simple-color-picker.style.js";import{StyledSimpleColor as t}from"../simple-color-picker/simple-color/simple-color.style.js";import{StyledDialogContent as l}from"../dialog/__internal__/__next__/dialog.style.js";import{Dialog as d}from"../dialog/dialog.component.js";import n from"../simple-color-picker/simple-color/checker-board.svg";import s from"../../style/utils/visually-hidden.js";import c from"../definition-list/dl.component.js";import"../definition-list/dt/dt.component.js";import"../definition-list/dd/dd.component.js";import a from"../../style/themes/apply-base-theme.js";const p=o.div.attrs(a).withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerWrapper",componentId:"sc-62bd57d3-0"})([""," display:inline-block;"],e),m=o(c).withConfig({displayName:"advanced-color-picker.style__HiddenCurrentColorList",componentId:"sc-62bd57d3-1"})(["",""],s),y=o.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerPreview",componentId:"sc-62bd57d3-2"})(["width:25px;height:25px;margin-bottom:15px;border:1px solid var(--colorsUtilityYin090);border-radius:var(--borderRadius050);"," "," &:hover{cursor:initial;}"],(({color:o})=>"transparent"!==o&&r(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&r(['background-color:#eeeeee;background-image:url("','");background-size:10px 10px;'],n))),g=o(d).withConfig({displayName:"advanced-color-picker.style__DialogStyle",componentId:"sc-62bd57d3-3"})(["","{padding:var(--spacing200);}","{max-width:285px;","{border:1px solid var(--colorsUtilityYin090);margin-right:-1px;margin-bottom:-1px;transition:all 0.2s ease;&:hover{transform:scale(1.1);}}}",'{border:none;}[data-component="icon"]{color:var(--colorsActionMinor500);}'],l,i,t,i);export{g as DialogStyle,m as HiddenCurrentColorList,y as StyledAdvancedColorPickerPreview,p as StyledAdvancedColorPickerWrapper};

package/esm/components/confirm/confirm.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as o}from"react";import n from"../../__internal__/utils/helpers/guid/index.js";import{Dialog as r}from"../dialog/dialog.component.js";import{StyledConfirmButtons as i,StyledConfirmHeading as c}from"./confirm.style.js";import a from"../button/button.component.js";import l from"../icon/icon.component.js";import{Loader as s}from"../loader/loader.component.js";import{Typography as p}from"../typography/typography.component.js";import u from"../../hooks/__internal__/useLocale/useLocale.js";import m from"../../__internal__/utils/helpers/tags/tags.js";function b(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function d(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(t){b(e,t,o[t])}))}return e}function f(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})),e}const y=b=>{var{"aria-labelledby":y,"aria-describedby":O,"aria-label":j,open:g,children:h,cancelButtonDestructive:P=!1,confirmButtonDestructive:B=!1,cancelButtonType:v="secondary",confirmButtonType:w="primary",cancelButtonIconType:C,cancelButtonIconPosition:T,confirmButtonIconType:I,confirmButtonIconPosition:D,cancelButtonDataProps:_,confirmButtonDataProps:k,cancelLabel:L,onCancel:S,disableCancel:x,onConfirm:z,isLoadingConfirm:E,disableConfirm:M,confirmLabel:A,iconType:W,subtitle:q,title:F,size:G="extra-small",showCloseIcon:H=!1,topModalOverride:J}=b,K=function(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}(b,["aria-labelledby","aria-describedby","aria-label","open","children","cancelButtonDestructive","confirmButtonDestructive","cancelButtonType","confirmButtonType","cancelButtonIconType","cancelButtonIconPosition","confirmButtonIconType","confirmButtonIconPosition","cancelButtonDataProps","confirmButtonDataProps","cancelLabel","onCancel","disableCancel","onConfirm","isLoadingConfirm","disableConfirm","confirmLabel","iconType","subtitle","title","size","showCloseIcon","topModalOverride"]);const N=u(),{current:Q}=o(n()),{current:R}=o(n()),U={"aria-labelledby":y,"aria-describedby":O,"aria-label":j};return F&&W&&(U["aria-labelledby"]=Q),q&&W&&(U["aria-describedby"]=R),e(r,f(d({open:g,onCancel:S,disableClose:x,subtitle:q,title:W?e(c,{type:W,"data-element":W,children:[t(l,{type:W,fontSize:"medium"}),t(p,{wordWrap:"break-word",wordBreak:"normal",variant:"h1","data-element":"dialog-title",id:Q,children:F})]}):F,role:"alertdialog",size:G,showCloseIcon:H,topModalOverride:J},U,K),{"data-component":"confirm",children:[h,e(i,{children:[S?t(a,f(d({onClick:S,buttonType:v,destructive:P,disabled:x,iconType:C,iconPosition:T},m("cancel",d({"data-element":"cancel"},_))),{children:L||N.confirm.no()})):null,t(a,f(d({onClick:z,buttonType:w,destructive:B,disabled:E||M,ml:2,iconType:I,iconPosition:D},m("confirm",d({"data-element":"confirm"},k))),{children:E?t(s,{"data-role":"confirm-loader",isInsideButton:!0,isActive:!0}):A||N.confirm.yes()}))]})]}))};export{y as Confirm,y as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as o}from"react";import n from"../../__internal__/utils/helpers/guid/index.js";import{Dialog as r}from"../dialog/dialog.component.js";import{StyledConfirmButtons as i,StyledConfirmHeading as c}from"./confirm.style.js";import a from"../button/button.component.js";import l from"../icon/icon.component.js";import{Loader as s}from"../loader/loader.component.js";import{Typography as p}from"../typography/typography.component.js";import u from"../../hooks/__internal__/useLocale/useLocale.js";import m from"../../__internal__/utils/helpers/tags/tags.js";function b(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function d(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(t){b(e,t,o[t])}))}return e}function f(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})),e}const y=b=>{var{"aria-labelledby":y,"aria-describedby":O,"aria-label":j,open:g,children:h,cancelButtonDestructive:P=!1,confirmButtonDestructive:B=!1,cancelButtonType:v="secondary",confirmButtonType:w="primary",cancelButtonIconType:C,cancelButtonIconPosition:T,confirmButtonIconType:I,confirmButtonIconPosition:D,cancelButtonDataProps:_,confirmButtonDataProps:k,cancelLabel:L,onCancel:S,disableCancel:x,onConfirm:z,isLoadingConfirm:E,disableConfirm:M,confirmLabel:A,iconType:K,subtitle:W,title:q,size:F="extra-small",showCloseIcon:G=!1,topModalOverride:H}=b,J=function(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}(b,["aria-labelledby","aria-describedby","aria-label","open","children","cancelButtonDestructive","confirmButtonDestructive","cancelButtonType","confirmButtonType","cancelButtonIconType","cancelButtonIconPosition","confirmButtonIconType","confirmButtonIconPosition","cancelButtonDataProps","confirmButtonDataProps","cancelLabel","onCancel","disableCancel","onConfirm","isLoadingConfirm","disableConfirm","confirmLabel","iconType","subtitle","title","size","showCloseIcon","topModalOverride"]);const N=u(),{current:Q}=o(n()),{current:R}=o(n()),U={"aria-labelledby":y,"aria-describedby":O,"aria-label":j};return q&&K&&(U["aria-labelledby"]=Q),W&&K&&(U["aria-describedby"]=R),e(r,f(d({open:g,onCancel:S,disableEscKey:x,subtitle:W,title:K?e(c,{type:K,"data-element":K,children:[t(l,{type:K,fontSize:"medium"}),t(p,{wordWrap:"break-word",wordBreak:"normal",variant:"h1","data-element":"dialog-title",id:Q,children:q})]}):q,role:"alertdialog",size:F,showCloseIcon:G,topModalOverride:H},U,J),{"data-component":"confirm",children:[h,e(i,{children:[S?t(a,f(d({onClick:S,buttonType:v,destructive:P,disabled:x,iconType:C,iconPosition:T},m("cancel",d({"data-element":"cancel"},_))),{children:L||N.confirm.no()})):null,t(a,f(d({onClick:z,buttonType:w,destructive:B,disabled:E||M,ml:2,iconType:I,iconPosition:D},m("confirm",d({"data-element":"confirm"},k))),{children:E?t(s,{"data-role":"confirm-loader",isInsideButton:!0,isActive:!0}):A||N.confirm.yes()}))]})]}))};export{y as Confirm,y as default};

package/esm/components/dialog/__internal__/__next__/dialog-header/dialog-header.component.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { DialogProps, DialogHandle } from "../dialog.component";
+/** Allowed status variants for the dialog heading icon. */
+export type DialogHeadingStatus = "subtle" | "positive" | "negative" | "caution" | "info";
+interface WithCustomHeadingProps {
+    /** Custom heading renderer — receives the original title and subtitle */
+    renderHeading?: (title: React.ReactNode, subtitle: React.ReactNode) => React.ReactNode;
+    /** Renders a status icon to the left of the title */
+    statusIcon?: DialogHeadingStatus;
+}
+type EnhancedDialogProps = Omit<DialogProps, "title" | "subtitle"> & WithCustomHeadingProps & {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+};
+declare function withDialogHeader(WrappedDialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHandle>>): React.ForwardRefExoticComponent<Omit<DialogProps, "title" | "subtitle"> & WithCustomHeadingProps & {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+} & React.RefAttributes<DialogHandle>>;
+export default withDialogHeader;
+export type { EnhancedDialogProps };

package/esm/components/dialog/__internal__/__next__/dialog-header/dialog-header.component.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{forwardRef as t,useRef as o}from"react";import{StyledSubtitle as n}from"../dialog.style.js";import{Box as i}from"../../../../box/box.component.js";import a from"../../../../icon/icon.component.js";import{Typography as l}from"../../../../typography/typography.component.js";import c from"../../../../../__internal__/utils/helpers/guid/index.js";function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){s(e,r,t[r])}))}return e}function b(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 u={subtle:{iconType:"info",color:"var(--colorsUtilityMajor400)"},positive:{iconType:"tick_circle",color:"var(--colorsSemanticPositive500)"},negative:{iconType:"error",color:"var(--colorsSemanticNegative500)"},caution:{iconType:"warning",color:"var(--colorsSemanticCaution500)"},info:{iconType:"info",color:"var(--colorsSemanticInfo500)"}};function y(s){const y=t(((t,y)=>{var{renderHeading:f,statusIcon:d,title:m,subtitle:g,"aria-labelledby":O,"aria-describedby":j,"aria-label":v}=t,h=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(t,["renderHeading","statusIcon","title","subtitle","aria-labelledby","aria-describedby","aria-label"]);const w=o(c()).current,P=o(c()).current;let x=m,S=!0,D=O,T=j,H=v;if(f)x=f(m,g),S=!1,O||v||console.warn("Dialog withDialogHeader: When using `renderHeading`, you must provide `aria-labelledby` or `aria-label` so the dialog has an accessible name.");else if(d){const{iconType:t,color:o}=u[d];x=r(i,{"data-role":"status-heading",display:"flex",flexWrap:"wrap",alignItems:"center",children:[e(a,{type:t,color:o,fontSize:"medium","aria-hidden":!0,ml:"-4px"}),e(l,{variant:"h1",ml:"var(--global-space-comp-L, 16px)","data-element":"dialog-title",id:w,children:m}),g&&e(n,{"data-element":"subtitle","data-role":"subtitle",id:P,mb:"0",children:g})]}),S=!1,null!=D||(D=w),"string"==typeof m&&(H=null!=H?H:m),g&&(null!=T||(T=P))}return e(s,b(p(b(p({},h),{title:x}),S?{subtitle:g}:{}),{"aria-labelledby":D,"aria-describedby":T,"aria-label":H,ref:y}))}));return y.displayName=`withDialogHeader(${s.displayName||s.name||"Component"})`,y}export{y as default};

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

@@ -0,0 +1,103 @@
+import React, { RefObject } from "react";
+import { ModalProps } from "../../../../__internal__/modal";
+import { TagProps } from "../../../../__internal__/utils/helpers/tags";
+import { Size, ContentPaddingInterface } from "./dialog.config";
+export type { Size, ContentPaddingInterface };
+export interface DialogProps extends ModalProps, TagProps {
+    /** Prop to specify the aria-describedby property of the Dialog component */
+    "aria-describedby"?: string;
+    /**
+     * Prop to specify the aria-label of the Dialog component.
+     * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+     */
+    "aria-label"?: string;
+    /**
+     * Prop to specify the aria-labelledby property of the Dialog component
+     * To be used when the title prop is a custom React Node,
+     * or the component is labelled by an internal element other than the title.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Function to replace focus trap
+     * @ignore
+     * @private
+     */
+    bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
+    /** Child elements */
+    children?: React.ReactNode;
+    /**
+     * @private
+     * @ignore
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
+    /** Padding to be set on the Dialog content */
+    contentPadding?: ContentPaddingInterface;
+    /** Reference to the scrollable content element */
+    contentRef?: React.ForwardedRef<HTMLDivElement>;
+    /** @private @internal @ignore */
+    "data-component"?: string;
+    disableAutoFocus?: boolean;
+    disableFocusTrap?: boolean;
+    /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
+    focusableContainers?: RefObject<HTMLElement>[];
+    /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+    focusableSelectors?: string;
+    /** Optional reference to an element meant to be focused on open */
+    focusFirstElement?: RefObject<HTMLElement> | HTMLElement | null;
+    /** Footer content to be rendered at the bottom of the dialog */
+    footer?: React.ReactNode;
+    /** Change the background color of the content to grey */
+    greyBackground?: boolean;
+    /** Container for components to be displayed in the header */
+    headerChildren?: React.ReactNode;
+    /** Allows developers to specify a specific height for the dialog. */
+    height?: string;
+    /** Adds Help tooltip to Header */
+    help?: string;
+    /** Adds a gradient keyline to the dialog header */
+    gradientKeyLine?: boolean;
+    /** A custom close event handler */
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
+    /** The ARIA role to be applied to the Dialog container */
+    role?: string;
+    /** Determines if the close icon is shown */
+    showCloseIcon?: boolean;
+    /**
+     * Size of dialog following design system naming conventions.
+     * - small: 288px min-width, 540px max-width
+     * - medium: 540px min-width, 850px max-width (default)
+     * - large: 850px min-width, 1080px max-width
+     * - fullscreen: full viewport
+     */
+    size?: Size;
+    /** Makes the footer stick to the bottom of the dialog when content scrolls */
+    stickyFooter?: boolean;
+    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
+    subtitle?: React.ReactNode;
+    /** Title displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to title prop. */
+    title?: React.ReactNode;
+    /**
+     * When true, header and sticky footer become unstickied for accessibility on small screen devices.
+     * On small screen devices, the dialog becomes full width and has no dimmer.
+     */
+    disableStickyOnSmallScreen?: boolean;
+    disableContentPadding?: boolean;
+    /**
+     * @private
+     * @ignore
+     * @internal
+     * Applies legacy Pages component styling for fullscreen dialogs. INTERNAL USE ONLY — consumed by the migration wrapper.
+     */
+    pagesStyling?: boolean;
+}
+export type DialogHandle = {
+    /** Programmatically focus on root container of Dialog. */
+    focus: () => void;
+} | null;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHandle>>;
+export default Dialog;
+export { default as withDialogHeader } from "./dialog-header/dialog-header.component";
+export type { EnhancedDialogProps, DialogHeadingStatus, } from "./dialog-header/dialog-header.component";

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as o,useRef as a,useImperativeHandle as n}from"react";import{DialogPositioner as l,StyledDialog as i,StyledDialogContent as s,StyledDialogTitle as c,StyledDialogFooter as d,StyledSubtitle as p}from"./dialog.style.js";import{StyledHeaderHelp as u}from"../../../heading/heading.style.js";import b from"../../../icon/icon.component.js";import{Typography as m}from"../../../typography/typography.component.js";import f from"../../../../__internal__/modal/modal.component.js";import g from"../../../../__internal__/focus-trap/focus-trap.component.js";import y from"../../../../__internal__/full-screen-heading/full-screen-heading.component.js";import h from"../../../../__internal__/utils/helpers/guid/index.js";import O from"../../../../__internal__/utils/helpers/tags/tags.js";import S from"../../../../hooks/__internal__/useLocale/useLocale.js";import j from"../../../../hooks/__internal__/useModalAria/useModalAria.js";import{Button as _}from"../../../button/__next__/button.component.js";export{default as withDialogHeader}from"./dialog-header/dialog-header.component.js";function k(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){k(e,t,r[t])}))}return e}function w(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const C=o(((o,k)=>{var{className:C,"data-component":P="dialog","data-element":F="dialog","data-role":$,children:x,open:E,height:D,size:B="medium",title:z,disableEscKey:I,subtitle:K,disableAutoFocus:L=!1,disableContentPadding:M=!1,focusFirstElement:R,focusableSelectors:A,onCancel:N,showCloseIcon:T=!0,bespokeFocusTrap:H,disableClose:W,help:q,gradientKeyLine:G=!1,role:J="dialog",contentPadding:Q,greyBackground:U=!1,focusableContainers:V,topModalOverride:X,closeButtonDataProps:Y,restoreFocusOnClose:Z=!0,"aria-labelledby":ee,"aria-describedby":te,"aria-label":re,headerChildren:oe,contentRef:ae,disableStickyOnSmallScreen:ne=!1,footer:le,stickyFooter:ie=!1,pagesStyling:se}=o,ce=function(e,t){if(null==e)return{};var r,o,a=function(e,t){if(null==e)return{};var r,o,a={},n=Object.keys(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(o,["className","data-component","data-element","data-role","children","open","height","size","title","disableEscKey","subtitle","disableAutoFocus","disableContentPadding","focusFirstElement","focusableSelectors","onCancel","showCloseIcon","bespokeFocusTrap","disableClose","help","gradientKeyLine","role","contentPadding","greyBackground","focusableContainers","topModalOverride","closeButtonDataProps","restoreFocusOnClose","aria-labelledby","aria-describedby","aria-label","headerChildren","contentRef","disableStickyOnSmallScreen","footer","stickyFooter","pagesStyling"]);const de=S(),pe=a(null),ue=a(null),be=a(null),me=a(null),{current:fe}=a(h()),{current:ge}=a(h()),ye=j(pe),he="fullscreen"===B;n(k,(()=>({focus(){var e;null===(e=pe.current)||void 0===e||e.focus()}})),[]);const Oe=T&&N&&e(_,w(v({"aria-label":de.dialog.ariaLabels.close(),onClick:e=>N(e)},O("close",v({"data-element":"close"},Y))),{variantType:"subtle",children:e(b,{type:"close"})}));let Se=D;D&&D.match(/px$/)&&(Se=D.replace("px",""));const je={"aria-describedby":K&&"string"==typeof K?ge:te,"aria-label":re,"aria-labelledby":z&&"string"==typeof z?fe:ee};return e(f,w(v({className:C?`${C} carbon-dialog`:"carbon-dialog",disableClose:W,disableEscKey:I,onCancel:N,open:E,restoreFocusOnClose:Z,topModalOverride:X},O("dialog",ce),ce),{children:e(g,{additionalWrapperRefs:V,autoFocus:!L,bespokeTrap:H,focusableSelectors:A,focusFirstElement:R,isOpen:E,wrapperRef:pe,children:e(l,{$size:B,$fullscreen:he,$disableStickyOnSmallScreen:ne,children:t(i,w(v(w(v({"aria-modal":!("dialog"!==J||!ye)||void 0},je),{backgroundColor:U?"var(--container-standard-bg-alt)":"var(--container-standard-bg-default)","data-component":P,"data-element":F,"data-role":$,dialogHeight:Se,$gradientKeyLine:G,$size:B,$disableStickyOnSmallScreen:ne,pagesStyling:se,ref:pe,role:J,tabIndex:-1}),Q),{children:[z||oe?(()=>{const o=t("div",{"data-element":"dialog-title-container",children:["string"==typeof z?e(r,{children:q?t("div",{"data-element":"dialog-title-help-wrapper",children:[e(m,{wordWrap:"break-word",wordBreak:"normal",variant:"h1",marginRight:"16px","data-element":"dialog-title",id:fe,children:z}),e(u,{"data-element":"help",tooltipPosition:"right",children:q})]}):e(m,{wordWrap:"break-word",wordBreak:"normal",variant:"h1","data-element":"dialog-title",id:fe,children:z})}):z,K&&e(p,{as:"div","data-element":"subtitle","data-role":"subtitle",id:ge,children:K})]});return he?t(y,{hasContent:!!z,hasCloseButton:T,ref:ue,children:[o,oe]}):t(c,{hasSubtitle:!!K,ref:be,showCloseIcon:T,$disableStickyOnSmallScreen:ne,children:[o,oe]})})():null,Oe,e(s,w(v({},Q),{$size:B,"data-role":"dialog-content","data-element":"dialog-content",hasHeader:void 0!==z,hasFooter:void 0!==le,tabIndex:-1,ref:ae,$disableStickyOnSmallScreen:ne,disableContentPadding:M,children:x})),le?e(d,{ref:me,$size:B,$sticky:ie,$disableStickyOnSmallScreen:ne,"data-role":"dialog-footer","data-element":"dialog-footer",children:le}):null]}))})})}))}));C.displayName="Dialog";export{C as Dialog,C as default};

package/esm/components/dialog/__internal__/__next__/dialog.config.d.ts

@@ -0,0 +1,37 @@
+/** New size type following design system naming conventions */
+export type Size = "small" | "medium" | "large" | "fullscreen";
+/** @deprecated Use Size instead */
+export type DialogSizes = "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large" | "auto";
+type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export interface ContentPaddingInterface {
+    p?: PaddingValues;
+    py?: PaddingValues;
+    px?: PaddingValues;
+}
+/** Minimum width for all dialog sizes */
+export declare const DIALOG_MIN_WIDTH = "288px";
+/**
+ * Size values matching Carbon's defined max-width values.
+ * All dialogs have a min-width of 288px.
+ */
+export declare const DIALOG_SIZE_CONFIG: {
+    readonly small: {
+        readonly maxWidth: string;
+        readonly minWidth: "288px";
+    };
+    readonly medium: {
+        readonly maxWidth: string;
+        readonly minWidth: "288px";
+    };
+    readonly large: {
+        readonly maxWidth: string;
+        readonly minWidth: "288px";
+    };
+    readonly fullscreen: {
+        readonly maxWidth: "100%";
+        readonly minWidth: "100%";
+    };
+};
+/** Default size is medium unless specified */
+export declare const DEFAULT_SIZE: Size;
+export {};

package/esm/components/dialog/__internal__/__next__/dialog.config.js

@@ -0,0 +1 @@
+import{containerSizeDialogMaxwidthS as i,containerSizeDialogMaxwidthM as m,containerSizeDialogMaxwidthL as t}from"@sage/design-tokens-fusion/js/es6/components/container";const n="288px",e={small:{maxWidth:i,minWidth:n},medium:{maxWidth:m,minWidth:n},large:{maxWidth:t,minWidth:n},fullscreen:{maxWidth:"100%",minWidth:"100%"}},d="medium";export{d as DEFAULT_SIZE,n as DIALOG_MIN_WIDTH,e as DIALOG_SIZE_CONFIG};

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

@@ -0,0 +1,50 @@
+import type { DialogProps } from "./dialog.component";
+import { Size, ContentPaddingInterface } from "./dialog.config";
+declare const dialogSizes: {
+    readonly small: string;
+    readonly medium: string;
+    readonly large: string;
+};
+declare const smallScreenBreakpoint = "600px";
+/** Transient size prop shared across all styled dialog sub-components */
+type TransientSizeProps = {
+    $size?: Size;
+};
+/** Transient prop to disable sticky behaviour on small screens */
+type TransientDisableStickyProps = {
+    $disableStickyOnSmallScreen?: boolean;
+};
+/** Base transient props shared by most styled dialog sub-components */
+type SharedTransientProps = TransientSizeProps & TransientDisableStickyProps;
+type StyledDialogTitleProps = SharedTransientProps & Pick<DialogProps, "showCloseIcon"> & {
+    hasSubtitle?: boolean;
+};
+type StyledDialogFooterProps = SharedTransientProps & {
+    $sticky?: boolean;
+};
+declare const DialogPositioner: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & TransientSizeProps & TransientDisableStickyProps & {
+    $fullscreen?: boolean;
+}, "theme">;
+declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & ContentPaddingInterface & TransientSizeProps & TransientDisableStickyProps & {
+    disableContentPadding?: boolean;
+    hasHeader?: boolean;
+    hasFooter?: boolean;
+}, "theme">;
+declare const StyledDialogFooter: import("styled-components").StyledComponent<"div", any, StyledDialogFooterProps, never>;
+declare const StyledDialogTitle: import("styled-components").StyledComponent<"div", any, StyledDialogTitleProps, never>;
+declare const StyledDialog: import("styled-components").StyledComponent<"div", any, TransientSizeProps & TransientDisableStickyProps & Pick<DialogProps, "greyBackground"> & {
+    $size: Size;
+    backgroundColor: string;
+    dialogHeight?: string;
+    $gradientKeyLine?: boolean;
+    pagesStyling?: boolean;
+} & ContentPaddingInterface, never>;
+declare const StyledSubtitle: import("styled-components").StyledComponent<{
+    ({ 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 { DialogPositioner, StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogFooter, StyledSubtitle, dialogSizes, smallScreenBreakpoint, };

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

@@ -0,0 +1 @@
+import a,{css as e}from"styled-components";import{padding as i}from"styled-system";import t from"../../../../style/themes/apply-base-theme.js";import{StyledButton as o}from"../../../button/__next__/button.style.js";import{Typography as d}from"../../../typography/typography.component.js";import"react/jsx-runtime";import"react";import{DIALOG_SIZE_CONFIG as r,DIALOG_MIN_WIDTH as l}from"./dialog.config.js";import{StyledForm as n,StyledFormContent as s,StyledFormFooter as p}from"../../../form/form.style.js";import g from"../../../../__internal__/full-screen-heading/full-screen-heading.style.js";const c={small:r.small.maxWidth,medium:r.medium.maxWidth,large:r.large.maxWidth},m="600px",x=(a=!1)=>t=>a?e(["padding:0;"]):e([""," ",""],e(["padding:0 var(--global-space-layout-2-xs);@media screen and (min-width:600px){padding:0 var(--global-space-layout-xs);}@media screen and (min-width:960px){padding:0 var(--global-space-layout-s);}@media screen and (min-width:1260px){padding:0 var(--global-space-layout-m);}"]),i(t)),b=a.div.attrs(t).withConfig({displayName:"dialog.style__DialogPositioner",componentId:"sc-2536516c-0"})(["position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:",";"," ",""],(({$size:a})=>"fullscreen"===a?"var(--carbon-zindex-full-screen-modal)":"var(--carbon-zindex-modal)"),(({$size:a})=>"fullscreen"===a&&e(["justify-content:stretch;align-items:stretch;"])),(({$disableStickyOnSmallScreen:a})=>a&&e(["@media screen and (max-width:","){background-color:transparent;}"],m))),h=a.div.attrs(t).withConfig({displayName:"dialog.style__StyledDialogContent",componentId:"sc-2536516c-1"})(["box-sizing:border-box;display:block;overflow-y:auto;width:100%;"," ",""],(a=>{var{disableContentPadding:t,$size:o,hasHeader:d,hasFooter:r}=a,l=function(a,e){if(null==a)return{};var i,t,o=function(a,e){if(null==a)return{};var i,t,o={},d=Object.keys(a);for(t=0;t<d.length;t++)i=d[t],e.indexOf(i)>=0||(o[i]=a[i]);return o}(a,e);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);for(t=0;t<d.length;t++)i=d[t],e.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(a,i)&&(o[i]=a[i])}return o}(a,["disableContentPadding","$size","hasHeader","hasFooter"]);return"fullscreen"===o?e(["flex:1;"," &:has(",".sticky){display:flex;flex-direction:column;overflow-y:hidden;padding:0;",".sticky{","{","}","{border-top:1px solid #a3adb5;box-shadow:0 -2px 4px 0 rgba(0,0,0,0.1),0 -10px 60px 0 rgba(0,0,0,0.1);background:var(--container-standard-bg-default);}}}"," ",""],x(t)(l),n,n,s,x(t)(l),p,!d&&e(["padding-top:var(--global-space-layout-xs);"]),!r&&e(["padding-bottom:var(--global-space-layout-xs);"])):e(["flex-grow:1;padding:",";"," &:has(",".sticky){display:flex;flex-direction:column;padding:0;",".sticky{","{padding:var(--global-space-layout-xs) var(--global-space-layout-s);","}","{border-top:1px solid #a3adb5;box-shadow:0 -2px 4px 0 rgba(0,0,0,0.1),0 -10px 60px 0 rgba(0,0,0,0.1);border-bottom-right-radius:var(--global-radius-container-xl);border-bottom-left-radius:var(--global-radius-container-xl);}}}"],t?"0px":"var(--global-space-layout-xs) var(--global-space-layout-s)",i,n,n,s,i,p)}),(({$disableStickyOnSmallScreen:a})=>a&&e(["@media screen and (max-width:","){overflow-y:visible;flex-grow:0;","{position:static;box-shadow:none;}}"],m,p))),u=a.div.withConfig({displayName:"dialog.style__StyledDialogFooter",componentId:"sc-2536516c-2"})(["box-sizing:border-box;width:100%;height:var(--global-size-3-xl);padding-top:var(--global-space-comp-l);padding-bottom:var(--global-space-comp-l);padding-left:var(--global-space-comp-xl);padding-right:var(--global-space-comp-xl);border-bottom-right-radius:var(--global-radius-container-xl);border-bottom-left-radius:var(--global-radius-container-xl);background:var(--container-standard-bg-default);"," ",""],(({$sticky:a})=>a&&e(["position:sticky;bottom:0;background:var(--container-standard-bg-default);z-index:1;border-top:1px solid #a3adb5;box-shadow:0 -2px 4px 0 rgba(0,0,0,0.1),0 -10px 60px 0 rgba(0,0,0,0.1);"])),(({$disableStickyOnSmallScreen:a})=>a&&e(["@media screen and (max-width:","){position:static;border-radius:0;}"],m))),y=a.div.withConfig({displayName:"dialog.style__StyledDialogTitle",componentId:"sc-2536516c-3"})(["background:var(--container-standard-bg-default);padding:var(--global-space-comp-xl);gap:var(--global-space-comp-l);border-bottom:1px solid #a3adb5;border-top-right-radius:var(--global-radius-container-xl);border-top-left-radius:var(--global-radius-container-xl);",';[data-element="dialog-title-help-wrapper"]{display:inline-flex;align-items:baseline;}[data-element="dialog-title-container"]{[data-element="dialog-title"]{color:var(--container-standard-txt-default,rgba(0,0,0,0.95));display:block;',"}}",""],(({showCloseIcon:a})=>a&&"padding-right: 85px"),(({hasSubtitle:a})=>!a&&e(["padding:4px 0px;"])),(({$disableStickyOnSmallScreen:a})=>a&&e(["@media screen and (max-width:","){border-radius:0;position:static;}"],m))),f=a.div.withConfig({displayName:"dialog.style__StyledDialog",componentId:"sc-2536516c-4"})(["display:flex;flex-direction:column;position:relative;border-radius:var(--global-radius-container-xl);&:focus{outline:none;}"," > ","{margin:0;position:absolute;z-index:1;","}"," ",""],(({dialogHeight:a,$size:i,$gradientKeyLine:t,backgroundColor:o})=>"fullscreen"===i?e(["box-shadow:0 3px 4px 0 rgba(0,0,0,0.1),10px 10px 60px 0 rgba(0,0,0,0.1);background:var(--container-standard-bg-alt);border-radius:var(--global-radius-container-xl);overflow:hidden;height:100%;width:100%;"]):e(["box-shadow:0 3px 4px 0 rgba(0,0,0,0.1),10px 10px 60px 0 rgba(0,0,0,0.1);border-radius:var(--global-radius-container-xl);background:",";max-height:90vh;width:100%;"," "," "," "," @media screen and (max-width:","){max-width:calc(100% - var(--global-space-comp-2-xl));}",""],o,"small"===i&&e(["min-width:288px;max-width:var(--container-size-dialog-maxwidth-s);"]),"medium"===i&&e(["min-width:540px;max-width:var(--container-size-dialog-maxwidth-m);@media screen and (max-width:","){min-width:",";}"],r.small.maxWidth,l),"large"===i&&e(["min-width:850px;max-width:var(--container-size-dialog-maxwidth-l);@media screen and (max-width:","){min-width:",";}"],r.medium.maxWidth,l),t&&e(['&::before{content:"";position:absolute;top:-8px;height:100px;width:100%;z-index:-1;background:linear-gradient( 90deg,#00d639 0%,#00d6de 40%,#9d60ff 90% );border-radius:var(--global-radius-container-xl) var(--global-radius-container-xl) 0 0;}']),c[i],a&&e(["height:","px;"],a))),o,(({$size:a})=>e("fullscreen"===a?["right:40px;top:26px;"]:["right:33px;top:32px;"])),(({$disableStickyOnSmallScreen:a})=>a&&e(["@media screen and (max-width:","){width:100%;max-width:100%;min-width:100%;border-radius:0;max-height:100%;height:100%;overflow-y:auto;}"],m)),(({$size:a,pagesStyling:i})=>function({$size:a,pagesStyling:i}){return"fullscreen"===a&&i?e(["","{padding:0;}> ","{right:33px;top:32px;}",'{padding:32px 32px 0;}[data-element="dialog-title-container"]{width:auto;padding-top:4px;[data-element="dialog-title"]{margin:0 0 0 3px;box-sizing:content-box;width:100%;}}'],h,o,g):""}({$size:a,pagesStyling:i}))),v=a(d).withConfig({displayName:"dialog.style__StyledSubtitle",componentId:"sc-2536516c-5"})(["font:var(--global-font-static-subheading-m);flex-basis:100%;width:100%;margin-top:5px;color:var(--container-standard-txt-alt);"]);export{b as DialogPositioner,f as StyledDialog,h as StyledDialogContent,u as StyledDialogFooter,y as StyledDialogTitle,v as StyledSubtitle,c as dialogSizes,m as smallScreenBreakpoint};

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

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

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

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

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

@@ -1,93 +1,23 @@
-import React, { RefObject } from "react";
-import { DialogSizes } from "./dialog.config";
-import { ModalProps } from "../../__internal__/modal";
-import { TagProps } from "../../__internal__/utils/helpers/tags";
-type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-export interface ContentPaddingInterface {
-    p?: PaddingValues;
-    py?: PaddingValues;
-    px?: PaddingValues;
-}
-export interface DialogProps extends ModalProps, TagProps {
-    /** Prop to specify the aria-describedby property of the Dialog component */
-    "aria-describedby"?: string;
-    /**
-     * Prop to specify the aria-label of the Dialog component.
-     * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
-     */
-    "aria-label"?: string;
-    /**
-     * Prop to specify the aria-labelledby property of the Dialog component
-     * To be used when the title prop is a custom React Node,
-     * or the component is labelled by an internal element other than the title.
-     */
-    "aria-labelledby"?: string;
-    /**
-     * Function to replace focus trap
-     * @ignore
-     * @private
-     */
-    bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
-    /** Child elements */
-    children?: React.ReactNode;
-    /**
-     * @private
-     * @ignore
-     * @internal
-     * Sets className for component. INTERNAL USE ONLY. */
-    className?: string;
-    /** Data tag prop bag for close Button */
-    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
-    /** Padding to be set on the Dialog content */
-    contentPadding?: ContentPaddingInterface;
-    /** Reference to the scrollable content element */
-    contentRef?: React.ForwardedRef<HTMLDivElement>;
-    /** @private @internal @ignore */
-    "data-component"?: string;
-    disableAutoFocus?: boolean;
-    /** @deprecated Determines if the Dialog can be closed */
-    disableClose?: boolean;
-    /**
-     * [Legacy] Flag to remove padding from content.
-     * @deprecated Use `contentPadding` instead.
-     */
-    disableContentPadding?: boolean;
-    disableFocusTrap?: boolean;
-    /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-    focusableContainers?: RefObject<HTMLElement>[];
-    /** Optional selector to identify the focusable elements, if not provided a default selector is used */
-    focusableSelectors?: string;
-    /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: RefObject<HTMLElement> | HTMLElement | null;
-    /** Whether the dialog is full-screen */
+import React from "react";
+import type { DialogProps as NextDialogProps, DialogHandle, ContentPaddingInterface, Size } from "./__internal__/__next__/dialog.component";
+import type { DialogSizes } from "./dialog.config";
+export interface DialogProps extends Omit<NextDialogProps, "size"> {
+    /** @deprecated Use `size="fullscreen"` instead. */
     fullscreen?: boolean;
-    /** Change the background color of the content to grey */
-    greyBackground?: boolean;
-    /** Container for components to be displayed in the header */
-    headerChildren?: React.ReactNode;
-    /** Allows developers to specify a specific height for the dialog. */
-    height?: string;
-    /** Adds Help tooltip to Header */
-    help?: string;
+    /** @deprecated Use `gradientKeyLine` instead. */
     highlightVariant?: string;
-    /** A custom close event handler */
-    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
-    /** @deprecated For legacy styling when used with Pages component. Do not use this unless using Pages within a full-screen Dialog */
+    /** @deprecated Use `contentPadding` instead. */
+    disableContentPadding?: boolean;
+    /** @deprecated */
+    disableClose?: boolean;
+    /** @deprecated */
     pagesStyling?: boolean;
-    /** The ARIA role to be applied to the Dialog container */
-    role?: string;
-    /** Determines if the close icon is shown */
-    showCloseIcon?: boolean;
-    /** Size of dialog, default size is 750px */
-    size?: DialogSizes;
-    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
-    subtitle?: React.ReactNode;
-    /** Title displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to title prop. */
-    title?: React.ReactNode;
+    /**
+     * Size — accepts both legacy values (extra-small, medium-small, etc.)
+     * and new values (small, medium, large, fullscreen).
+     */
+    size?: DialogSizes | Size;
 }
-export type DialogHandle = {
-    /** Programmatically focus on root container of Dialog. */
-    focus: () => void;
-} | null;
 export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHandle>>;
 export default Dialog;
+export type { DialogHandle, ContentPaddingInterface };

package/esm/components/dialog/dialog.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as o,useRef as a,useImperativeHandle as l}from"react";import{DialogPositioner as n,StyledDialog as i,StyledDialogContent as s,StyledDialogTitle as c}from"./dialog.style.js";import{StyledHeaderHelp as d}from"../heading/heading.style.js";import p from"../icon/icon.component.js";import u from"../icon-button/icon-button.component.js";import{Typography as b}from"../typography/typography.component.js";import g from"../../__internal__/modal/modal.component.js";import m from"../../__internal__/focus-trap/focus-trap.component.js";import f from"../../__internal__/full-screen-heading/full-screen-heading.component.js";import h from"../../__internal__/utils/helpers/guid/index.js";import y from"../../__internal__/utils/helpers/tags/tags.js";import O from"../../__internal__/utils/logger/index.js";import j from"../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../hooks/__internal__/useModalAria/useModalAria.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function w(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){v(e,t,r[t])}))}return e}function C(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let P=!1,k=!1;const S=o(((o,v)=>{var{className:S,"data-component":x="dialog","data-element":F="dialog","data-role":E,children:B,open:D,height:I,size:M="medium",title:T,disableEscKey:R,subtitle:A,disableAutoFocus:z=!1,focusFirstElement:K,focusableSelectors:L,onCancel:N,showCloseIcon:V=!0,bespokeFocusTrap:W,disableClose:H,help:U,highlightVariant:$="default",role:Y="dialog",contentPadding:q,greyBackground:G=!1,focusableContainers:J,topModalOverride:Q,closeButtonDataProps:X,restoreFocusOnClose:Z=!0,"aria-labelledby":ee,"aria-describedby":te,"aria-label":re,pagesStyling:oe,headerChildren:ae,disableContentPadding:le,contentRef:ne,fullscreen:ie=!1}=o,se=function(e,t){if(null==e)return{};var r,o,a=function(e,t){if(null==e)return{};var r,o,a={},l=Object.keys(e);for(o=0;o<l.length;o++)r=l[o],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)r=l[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(o,["className","data-component","data-element","data-role","children","open","height","size","title","disableEscKey","subtitle","disableAutoFocus","focusFirstElement","focusableSelectors","onCancel","showCloseIcon","bespokeFocusTrap","disableClose","help","highlightVariant","role","contentPadding","greyBackground","focusableContainers","topModalOverride","closeButtonDataProps","restoreFocusOnClose","aria-labelledby","aria-describedby","aria-label","pagesStyling","headerChildren","disableContentPadding","contentRef","fullscreen"]);const ce=j(),de=a(null),pe=a(null),ue=a(null),{current:be}=a(h()),{current:ge}=a(h()),me=_(de);!P&&H&&(P=!0,O.deprecate("The disableClose prop in Dialog is deprecated and will soon be removed.")),!k&&oe&&(k=!0,O.deprecate("The pagesStyling prop in Dialog is deprecated and will soon be removed.")),l(v,(()=>({focus(){var e;null===(e=de.current)||void 0===e||e.focus()}})),[]);const fe=V&&N&&e(u,C(w({"aria-label":ce.dialog.ariaLabels.close(),disabled:H,onClick:N},y("close",w({"data-element":"close"},X))),{children:e(p,{type:"close"})}));let he=I;I&&I.match(/px$/)&&(he=I.replace("px",""));const ye={"aria-describedby":A&&"string"==typeof A?ge:te,"aria-label":re,"aria-labelledby":T&&"string"==typeof T?be:ee};return e(g,C(w({className:S?`${S} carbon-dialog`:"carbon-dialog",disableClose:H,disableEscKey:R,onCancel:N,open:D,restoreFocusOnClose:Z,topModalOverride:Q},y("dialog",se),se),{children:e(m,{additionalWrapperRefs:J,autoFocus:!z,bespokeTrap:W,focusableSelectors:L,focusFirstElement:K,isOpen:D,wrapperRef:de,children:e(n,{fullscreen:ie,children:t(i,C(w(C(w({"aria-modal":!("dialog"!==Y||!me)||void 0},ye),{backgroundColor:G?"var(--colorsUtilityMajor025)":"var(--colorsUtilityYang100)","data-component":x,"data-element":F,"data-role":E,dialogHeight:he,fullscreen:ie,highlightVariant:$,pagesStyling:oe,ref:de,role:Y,size:M,tabIndex:-1}),q),{children:[T||ae?(()=>{const o=t("div",{"data-element":"dialog-title-container",children:["string"==typeof T?e(r,{children:U?t("div",{"data-element":"dialog-title-help-wrapper",children:[e(b,{wordWrap:"break-word",wordBreak:"normal",variant:"h1",marginRight:"16px","data-element":"dialog-title",id:be,children:T}),e(d,{"data-element":"help",tooltipPosition:"right",children:U})]}):e(b,{wordWrap:"break-word",wordBreak:"normal",variant:"h1","data-element":"dialog-title",id:be,children:T})}):T,A&&e("div",{style:{marginTop:"5px",width:"100%",flexBasis:"100%"},"data-element":"subtitle","data-role":"subtitle",id:ge,children:A})]});return ie?t(f,{hasContent:!!T,hasCloseButton:V,ref:pe,children:[o,ae]}):t(c,{hasSubtitle:!!A,ref:ue,showCloseIcon:V,children:[o,ae]})})():null,fe,e(s,C(w({},q),{"data-role":"dialog-content",disableContentPadding:le,fullscreen:ie,hasHeader:void 0!==T,tabIndex:-1,ref:ne,children:B}))]}))})})}))}));export{S as Dialog,S as default};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Dialog as t}from"./__internal__/__next__/dialog.component.js";import a from"../../__internal__/utils/logger/index.js";function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}let n=!1,l=!1,o=!1,s=!1,d=!1,c=!1;const u=r(((r,u)=>{var{disableClose:g,pagesStyling:p,fullscreen:f,highlightVariant:m,disableContentPadding:b,size:y="medium",gradientKeyLine:h}=r,v=function(e,r){if(null==e)return{};var t,a,i=function(e,r){if(null==e)return{};var t,a,i={},n=Object.keys(e);for(a=0;a<n.length;a++)t=n[a],r.indexOf(t)>=0||(i[t]=e[t]);return i}(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)&&(i[t]=e[t])}return i}(r,["disableClose","pagesStyling","fullscreen","highlightVariant","disableContentPadding","size","gradientKeyLine"]);n||(a.warn("Warning: This version of the `Dialog` component is a migration wrapper..."),n=!0),l||void 0===f||(l=!0,a.deprecate('The fullscreen prop in Dialog is deprecated. Please use size="fullscreen" instead.')),o||void 0===m||(o=!0,a.deprecate("The highlightVariant prop is deprecated. Please use gradientKeyLine instead.")),s||void 0===g||(s=!0,a.deprecate("The disableClose prop in Dialog is deprecated and will soon be removed.")),d||void 0===p||(d=!0,a.deprecate("The pagesStyling prop in Dialog is deprecated and will soon be removed.")),c||"auto"!==y||(c=!0,a.deprecate('The `size="auto"` prop in Dialog is deprecated and has been defaulted to `size="large"`. Please use a specific size value instead.'));const O=((e,r)=>{if(r)return"fullscreen";switch(e){case"extra-small":case"small":return"small";case"medium-small":case"medium":default:return"medium";case"medium-large":case"large":case"extra-large":case"auto":return"large";case"fullscreen":case"maximise":return"fullscreen"}})(y,f),j=((e,r)=>void 0!==r?r:"ai"===e)(m,h);return e(t,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){i(e,r,t[r])}))}return e}({ref:u,size:O,gradientKeyLine:j,disableContentPadding:b,pagesStyling:p},v))}));u.displayName="Dialog";export{u as Dialog,u as default};

package/esm/components/icon/icon-config.js

@@ -1 +1 @@
-const e={backgroundSize:{"extra-small":"16px",small:"24px",medium:"32px",large:"40px","extra-large":"56px"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--sizing250)",medium:"var(--sizing300)",large:"var(--sizing400)","extra-large":"var(--sizing600)"}},r=["bottom","left","right","top"],a=["circle","rounded-rect","square"],t=["small","medium","large","extra-large"],i=["small","medium","large","extra-large"],_=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","close","cloud_co2","coins","collaborate","computer_clock","connect","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"];export{_ as ICONS,i as ICON_FONT_SIZES,a as ICON_SHAPES,t as ICON_SIZES,r as ICON_TOOLTIP_POSITIONS,e as default};
+const e={backgroundSize:{"extra-small":"16px",small:"24px",medium:"32px",large:"40px","extra-large":"56px"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--sizing250)",medium:"var(--sizing300)",large:"var(--sizing400)","extra-large":"var(--sizing600)"}},r=["bottom","left","right","top"],a=["circle","rounded-rect","square"],t=["small","medium","large","extra-large"],i=["small","medium","large","extra-large"],_=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_up_down","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","close","cloud_co2","coins","collaborate","computer_clock","connect","connect_circle","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_circle","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"];export{_ as ICONS,i as ICON_FONT_SIZES,a as ICON_SHAPES,t as ICON_SIZES,r as ICON_TOOLTIP_POSITIONS,e as default};

package/esm/components/icon/icon-type.d.ts

@@ -1 +1 @@
-export type IconType = "accessibility_web" | "add" | "admin" | "airplay" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_top_right_circle" | "arrow_up" | "arrows_left_right" | "at_sign" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "batch" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_bar_arrow_up" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_first" | "chevron_first_pagination" | "chevron_last" | "chevron_last_pagination" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "chromecast" | "circle_with_dots" | "circles_connection" | "clear" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "diagonal_arrows_up" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "double_tick" | "drag" | "drag_hover" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "flash" | "folder" | "form_refresh" | "framerate" | "fullscreen" | "get_quote" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "heart" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "hierarchy" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "ipad" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_card" | "link_cloud" | "link_on" | "list_view" | "locked" | "login" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "mute" | "none" | "normalscreen" | "old_warning" | "page" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "picture_in_picture" | "piggy_bank" | "placeholder" | "plane" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "replay" | "reset" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "speaker" | "split" | "split_container" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "subtitles" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "time_zone" | "true_tick" | "u_turn_left" | "u_turn_right" | "underline" | "undo" | "unlocked" | "upload" | "uploaded" | "user_groups" | "video" | "view" | "volume_high" | "volume_low" | "volume_medium" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";
+export type IconType = "accessibility_web" | "add" | "admin" | "airplay" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_top_right_circle" | "arrow_up" | "arrows_left_right" | "at_sign" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "batch" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_up_down" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_bar_arrow_up" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_first" | "chevron_first_pagination" | "chevron_last" | "chevron_last_pagination" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "chromecast" | "circle_with_dots" | "circles_connection" | "clear" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_circle" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "diagonal_arrows_up" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "double_tick" | "drag" | "drag_hover" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "flash" | "folder" | "form_refresh" | "framerate" | "fullscreen" | "get_quote" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "heart" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "hierarchy" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "ipad" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_card" | "link_cloud" | "link_on" | "list_view" | "locked" | "login" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "mute" | "none" | "normalscreen" | "old_warning" | "page" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "picture_in_picture" | "piggy_bank" | "placeholder" | "plane" | "play" | "play_circle" | "plus" | "plus_circle" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "replay" | "reset" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "speaker" | "split" | "split_container" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "subtitles" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "time_zone" | "true_tick" | "u_turn_left" | "u_turn_right" | "underline" | "undo" | "unlocked" | "upload" | "uploaded" | "user_groups" | "video" | "view" | "volume_high" | "volume_low" | "volume_medium" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";

package/esm/components/icon/icon-unicodes.d.ts

@@ -196,6 +196,9 @@ declare namespace iconUnicodes {
     export let login: string;
     export let chevron_first_pagination: string;
     export let chevron_last_pagination: string;
+    export let caret_up_down: string;
+    export let connect_circle: string;
+    export let plus_circle: string;
     export let error: string;
     export let warning: string;
     export let tick: string;