carbon-react 158.49.2 → 158.50.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/tabs/__next__/tabs.style.js

@@ -1 +1 @@
-import o,{css as t}from"styled-components";import i from"../../../style/utils/add-focus-styling.js";const e={medium:{fontSize:14,iconMinWidth:84,height:40,paddingX:16,paddingY:8,width:56},large:{fontSize:16,iconMinWidth:104,height:48,paddingX:24,paddingY:0,width:76}},d=o.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-75b008c3-0"})(["padding:0 6px;"]),r=o.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-75b008c3-1"})(["display:flex;"," width:100%;padding:6px;overflow-x:hidden;"],(({$orientation:o})=>t([""," ",""],"horizontal"===o&&t(["margin-bottom:8px;"]),"vertical"===o&&t(["flex-direction:column;flex-wrap:wrap;margin-right:8px;"])))),a=o.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-75b008c3-2"})(["display:flex;z-index:6;",";"],(({$headerWidth:o})=>o&&t(["width:",";"],o))),n=o.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-75b008c3-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),p=o.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-75b008c3-4"})(["height:",";width:",";border-radius:0px;border-top-right-radius:8px;border-top-left-radius:8px;border-color:#8b8b8bff;background:white;border:none;border-bottom:2px solid #8b8b8bff;top:6px;position:relative;"],(({$size:o})=>"medium"===o?"40px":"48px"),(({$size:o})=>"medium"===o?"40px":"48px")),b=o.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-75b008c3-5"})(["height:",";width:",";border-radius:0;border-color:#8b8b8bff;border:none;border-bottom:2px solid #8b8b8bff;top:4px;position:relative;"],(({$size:o})=>"medium"===o?"40px":"48px"),(({$size:o})=>"medium"===o?"40px":"48px")),l=o.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-75b008c3-6"})(["background-color:transparent;border:none;border-bottom:2px solid #8b8b8bff;border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:8px;white-space:nowrap;height:fit-content;color:var(--colorsYin090);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{"," ","}:hover{background-color:#00000010;cursor:pointer;}",";",";"," :focus{"," z-index:1;","}"],(({$hasCustomLayout:o})=>!o&&t(["align-items:center;display:flex;gap:8px;"])),(({activeTab:o,$orientation:i,$size:e,error:d,warning:r,info:a,$hasCustomLayout:n})=>o&&t([""," "," ",""],"horizontal"===i&&(d||r||a)&&t(["position:relative;top:1px;"]),"large"===e&&t(["margin-top:-4px;"]),n&&"horizontal"===i&&t(["position:relative;top:-2px;left:1px;"]))),(({$size:o,$hasCustomLayout:i})=>t(["font-size:","px;height:","px;",""],e[o].fontSize,e[o].height,i?t(["padding:0;"]):t(["padding:","px ","px;"],e[o].paddingY,e[o].paddingX))),(({activeTab:o,error:i,info:d,$orientation:r,$size:a,warning:n,$hasCustomLayout:p})=>o&&"horizontal"===r&&t(["background-color:white;border:2px solid #8b8b8bff;border-bottom:none;",' :hover{background-color:white;}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:2px;min-width:24px;}"],!p&&t(["padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:","px;"],e[a].paddingY-4,e[a].paddingX-2,e[a].paddingY,e[a].paddingX-2),(()=>i?"#db004e":n?"#d64309":d?"#0060a7ff":"black"))),(({activeTab:o,error:i,info:d,$orientation:r,$size:a,warning:n,$hasCustomLayout:p,$headerWidth:b})=>"vertical"===r&&t(["border:none;border-right:2px solid #8b8b8bff;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:0px;max-width:",";width:",";"," ",""],null!=b?b:"200px",null!=b?b:"200px",b&&t(["white-space:normal;height:auto;"]),o&&t(["background-color:white;border:2px solid #8b8b8bff;border-right:none;"," :hover{background-color:white;}.tab-title-content-wrapper{"," ",' ::after{content:"";position:absolute;right:0;width:4px;'," height:60%;background-color:",";border-radius:2px;min-height:24px;}}"],!p&&t(["padding-top:","px;padding-right:var(--global-space-none);padding-bottom:","px;padding-left:","px;"],"medium"===a?e.medium.paddingY-2:4,"medium"===a?e.medium.paddingY-2:e.large.paddingY,e[a].paddingX-2),b&&!p&&t(["padding-right:18px;"]),p&&t(["width:100%;> *{position:relative;left:-2px;top:-2px;}"]),p&&t(["top:20%;right:0px;"]),(()=>i?"#db004e":n?"#d64309":d?"#0060a7ff":"black")))),i(),(({$orientation:o})=>t(["border-top-left-radius:8px;border-top-right-radius:",";border-bottom-left-radius:",";border-bottom-right-radius:0px;"],"horizontal"===o?"8px":"0","horizontal"===o?"0px":"8px"))),s=o.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-75b008c3-7"})(["display:flex;",""],(({$orientation:o})=>t(["flex-direction:",";"],"horizontal"===o?"column":"row"))),h=o.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-75b008c3-8"})(["",""],(({visible:o})=>t(["display:",";"],o?"block":"none")));export{n as Spacer,p as StyledScrollButton,b as StyledScrollButtonPlaceholder,l as StyledTab,r as StyledTabList,a as StyledTabListWrapper,d as StyledTabPanel,h as StyledTabProvider,s as StyledTabs};
+import a,{css as o}from"styled-components";import t from"../../../style/utils/add-focus-styling.js";const i={medium:{fontSize:14,iconMinWidth:84,height:40,paddingX:16,paddingY:8,width:56},large:{fontSize:16,iconMinWidth:104,height:48,paddingX:24,paddingY:0,width:76}},r=a.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-8b5755df-0"})(["padding:0 6px;"]),e=a.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-8b5755df-1"})(["display:flex;"," width:100%;padding:6px;overflow-x:hidden;"],(({$orientation:a})=>o([""," ",""],"horizontal"===a&&o(["margin-bottom:8px;"]),"vertical"===a&&o(["flex-direction:column;flex-wrap:wrap;margin-right:8px;"])))),d=a.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-8b5755df-2"})(["display:flex;z-index:6;",";"],(({$headerWidth:a})=>a&&o(["width:",";"],a))),n=a.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-8b5755df-3"})(["align-self:flex-end;background:var(--tab-border-active-alt);flex-grow:1;height:2px;"]),l=a.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-8b5755df-4"})(["height:",";width:",";border-radius:var(--global-radius-none);border-top-right-radius:var(--global-radius-action-m);border-top-left-radius:var(--global-radius-action-m);border-color:var(--tab-border-active-alt);background:white;border:none;border-bottom:2px solid var(--tab-border-active-alt);top:6px;position:relative;"],(({$size:a})=>"medium"===a?"40px":"48px"),(({$size:a})=>"medium"===a?"40px":"48px")),b=a.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-8b5755df-5"})(["height:",";width:",";border-radius:var(--global-radius-none);border-color:var(--tab-border-active-alt);border:none;border-bottom:2px solid var(--tab-border-active-alt);top:4px;position:relative;"],(({$size:a})=>"medium"===a?"40px":"48px"),(({$size:a})=>"medium"===a?"40px":"48px")),p=a.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-8b5755df-6"})(["background-color:transparent;border:none;border-bottom:2px solid var(--tab-border-default);border-radius:var(--global-radius-action-m) var(--global-radius-action-m) 0 0;white-space:nowrap;height:fit-content;color:var(--tab-label-default);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{"," ","}:hover{background-color:var(--tab-bg-hover);cursor:pointer;}",";",";"," :focus{"," z-index:1;","}"],(({$hasCustomLayout:a})=>!a&&o(["align-items:center;display:flex;gap:8px;"])),(({activeTab:a,$orientation:t,$size:i,error:r,warning:e,info:d,$hasCustomLayout:n})=>a&&o([""," "," ",""],"horizontal"===t&&(r||e||d)&&o(["position:relative;top:1px;"]),"large"===i&&o(["margin-top:-4px;"]),n&&"horizontal"===t&&o(["position:relative;top:-2px;left:1px;"]))),(({$size:a,$hasCustomLayout:t})=>o(["font-size:","px;height:","px;",""],i[a].fontSize,i[a].height,t?o(["padding:0;"]):o(["padding:","px ","px;"],i[a].paddingY,i[a].paddingX))),(({activeTab:a,error:t,info:r,$orientation:e,$size:d,warning:n,$hasCustomLayout:l})=>a&&"horizontal"===e&&o(["background-color:var(--tab-bg-active);border:2px solid var(--tab-border-active-alt);border-bottom:none;color:var(--tab-label-active);",' :hover{background-color:var(--tab-bg-active);}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:var(--global-radius-container-2-xs);min-width:24px;}"],!l&&o(["padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:","px;"],i[d].paddingY-4,i[d].paddingX-2,i[d].paddingY,i[d].paddingX-2),(()=>t?"var(--tab-validation-border-error)":n?"var(--tab-validation-border-warning)":r?"#0060a7ff":"black"))),(({activeTab:a,error:t,info:r,$orientation:e,$size:d,warning:n,$hasCustomLayout:l,$headerWidth:b})=>"vertical"===e&&o(["border:none;border-right:2px solid var(--tab-border-default);border-radius:var(--global-radius-action-m) 0 0 var(--global-radius-action-m);max-width:",";width:",";"," ",""],null!=b?b:"200px",null!=b?b:"200px",b&&o(["white-space:normal;height:auto;"]),a&&o(["background-color:var(--tab-bg-active);border:2px solid var(--tab-border-active-alt);border-right:none;"," :hover{background-color:var(--tab-bg-active);}.tab-title-content-wrapper{"," ",' ::after{content:"";position:absolute;right:0;width:4px;'," height:60%;background-color:",";border-radius:var(--global-radius-container-2-xs);min-height:24px;}}"],!l&&o(["padding-top:","px;padding-right:var(--global-space-none);padding-bottom:","px;padding-left:","px;"],"medium"===d?i.medium.paddingY-2:4,"medium"===d?i.medium.paddingY-2:i.large.paddingY,i[d].paddingX-2),b&&!l&&o(["padding-right:18px;"]),l&&o(["width:100%;> *{position:relative;left:-2px;top:-2px;}"]),l&&o(["top:20%;right:0px;"]),(()=>t?"var(--tab-validation-border-error)":n?"var(--tab-validation-border-warning)":r?"#0060a7ff":"black")))),t(),(({$orientation:a})=>o(["border-top-left-radius:var(--global-radius-action-m);border-top-right-radius:",";border-bottom-left-radius:",";border-bottom-right-radius:var(--global-radius-none);"],"horizontal"===a?"var(--global-radius-action-m)":"var(--global-radius-none)","horizontal"===a?"var(--global-radius-none)":"var(--global-radius-action-m)"))),s=a.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-8b5755df-7"})(["display:flex;",""],(({$orientation:a})=>o(["flex-direction:",";"],"horizontal"===a?"column":"row"))),g=a.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-8b5755df-8"})(["",""],(({visible:a})=>o(["display:",";"],a?"block":"none")));export{n as Spacer,l as StyledScrollButton,b as StyledScrollButtonPlaceholder,p as StyledTab,e as StyledTabList,d as StyledTabListWrapper,r as StyledTabPanel,g as StyledTabProvider,s as StyledTabs};

package/esm/components/tokens-wrapper/tokens-wrapper.component.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import"react";import o,{createGlobalStyle as r}from"styled-components";import n from"./__internal__/static-tokens/index.js";const a=o.div.withConfig({displayName:"tokens-wrapper.component__StyledTokensWrapper",componentId:"sc-5bf3905e-0"})(["height:",";"],(({height:t})=>t)),p=r(['[data-component="tokens-wrapper"],[class*="carbon-portal"]{',"}"],n),i=({children:o,height:r="auto"})=>t(a,{"data-component":"tokens-wrapper","data-role":"tokens-wrapper",height:r,children:[e(p,{}),o]});export{i as TokensWrapper,i as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import"react";import o,{createGlobalStyle as r}from"styled-components";import n from"./__internal__/static-tokens/index.js";const a=o.div.withConfig({displayName:"tokens-wrapper.component__StyledTokensWrapper",componentId:"sc-bb9ec08c-0"})(["height:",";"],(({$height:t})=>t)),p=r(['[data-component="tokens-wrapper"],[class*="carbon-portal"]{',"}"],n),i=({children:o,height:r="auto"})=>t(a,{"data-component":"tokens-wrapper","data-role":"tokens-wrapper",$height:r,children:[e(p,{}),o]});export{i as TokensWrapper,i as default};

package/esm/global.d.ts

@@ -1,4 +1,5 @@
 import { type ModalList } from "./__internal__/modal/modal-manager";
+import { type QueryEntry } from "./hooks/useMediaQuery/useMediaQuery";
 
 declare global {
   module "*.png";
@@ -16,6 +17,7 @@ declare global {
       originalValues: string[];
       restoreValues?: (() => void) | null;
     };
+    __CARBON_INTERNALS_MEDIA_QUERY_CACHE?: Map<string, QueryEntry>;
   }
 }
 

package/esm/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js

@@ -1 +1 @@
-import e from"../../useMediaQuery/useMediaQuery.js";function i(i){const r=e(`(min-width:${i}px)`);if(i)return r}export{i as default};
+import e from"../../useMediaQuery/useMediaQuery.js";function i(i){const r=i?`(min-width:${i}px)`:"",t=e(r);if(r)return t}export{i as default};

package/esm/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -1 +1,9 @@
-export default function useMediaQuery(queryInput: string): boolean | undefined;
+type Listener = () => void;
+export interface QueryEntry {
+    mediaQueryList: MediaQueryList;
+    listeners: Set<Listener>;
+    nativeHandler: () => void;
+    refCount: number;
+}
+declare const _default: (queryInput: string) => boolean | undefined;
+export default _default;

package/esm/hooks/useMediaQuery/useMediaQuery.js

@@ -1 +1 @@
-import{useState as e,useLayoutEffect as t}from"react";import{getWindow as r}from"../../__internal__/dom/globals.js";function n(n){const a=n.replace(/^@media( ?)/m,""),[o,c]=e(void 0);return t((()=>{const e=r();if(!e)return;const t=e.matchMedia(a),n=()=>c(t.matches);return n(),t.addEventListener("change",n),()=>{t.removeEventListener("change",n)}}),[a]),o}export{n as default};
+import{useState as e,useCallback as t,useLayoutEffect as r,useEffect as n}from"react";import{getWindow as a}from"../../__internal__/dom/globals.js";const s=a(),i=s?r:n,c="__CARBON_INTERNALS_MEDIA_QUERY_CACHE",o=e=>(e[c]||(e[c]=new Map),e[c]);var u=r=>{const n=null==r?void 0:r.replace(/^@media( ?)/m,""),[a,c]=e(void 0),u=t((()=>{if(!s)return;const e=o(s).get(n);e&&c(e.mediaQueryList.matches)}),[n]);return i((()=>{if(!s||!n)return;const{matches:e,unsubscribe:t}=((e,t,r)=>{const{entry:n,cache:a}=((e,t)=>{const r=o(t),n=r.get(e);if(n)return{entry:n,cache:r};const a=t.matchMedia(e),s={mediaQueryList:a,listeners:new Set,nativeHandler:()=>{s.listeners.forEach((e=>e()))},refCount:0};return a.addEventListener("change",s.nativeHandler),r.set(e,s),{entry:s,cache:r}})(e,r);return n.refCount+=1,n.listeners.add(t),{matches:n.mediaQueryList.matches,unsubscribe:()=>{n.listeners.delete(t),n.refCount-=1,n.refCount||(n.mediaQueryList.removeEventListener("change",n.nativeHandler),a.delete(e))}}})(n,u,s);return c(e),t}),[n,u]),a};export{u as default};

package/lib/__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/lib/__spec_helper__/mock-match-media.js

@@ -1 +1 @@
-"use strict";let e=!1,t=!1;const n=jest.fn();exports.mockMatchMedia=o=>{if(!e)throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");return t=o,{removeEventListener:n}},exports.setupMatchMediaMock=()=>{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};
+"use strict";let e=!1,t=!1;const n=jest.fn();let a=new Set;exports.mockMatchMedia=r=>{if(!e)throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");return t=r,a=new Set,{removeEventListener:n}},exports.setupMatchMediaMock=()=>{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)=>{a.add(t)},removeEventListener:(e,t)=>{a.delete(t),n()},dispatchEvent:r})}),e=!0},exports.simulateMediaQueryChange=e=>{t=e,a.forEach((e=>e()))};

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

@@ -1 +1 @@
-"use strict";var t=require("styled-components"),o=require("../../../style/utils/add-focus-styling.js");function e(t){return t&&t.__esModule?t:{default:t}}var i=e(t);const d={medium:{fontSize:14,iconMinWidth:84,height:40,paddingX:16,paddingY:8,width:56},large:{fontSize:16,iconMinWidth:104,height:48,paddingX:24,paddingY:0,width:76}},r=i.default.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-75b008c3-0"})(["padding:0 6px;"]),a=i.default.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-75b008c3-1"})(["display:flex;"," width:100%;padding:6px;overflow-x:hidden;"],(({$orientation:o})=>t.css([""," ",""],"horizontal"===o&&t.css(["margin-bottom:8px;"]),"vertical"===o&&t.css(["flex-direction:column;flex-wrap:wrap;margin-right:8px;"])))),s=i.default.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-75b008c3-2"})(["display:flex;z-index:6;",";"],(({$headerWidth:o})=>o&&t.css(["width:",";"],o))),n=i.default.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-75b008c3-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),p=i.default.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-75b008c3-4"})(["height:",";width:",";border-radius:0px;border-top-right-radius:8px;border-top-left-radius:8px;border-color:#8b8b8bff;background:white;border:none;border-bottom:2px solid #8b8b8bff;top:6px;position:relative;"],(({$size:t})=>"medium"===t?"40px":"48px"),(({$size:t})=>"medium"===t?"40px":"48px")),l=i.default.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-75b008c3-5"})(["height:",";width:",";border-radius:0;border-color:#8b8b8bff;border:none;border-bottom:2px solid #8b8b8bff;top:4px;position:relative;"],(({$size:t})=>"medium"===t?"40px":"48px"),(({$size:t})=>"medium"===t?"40px":"48px")),b=i.default.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-75b008c3-6"})(["background-color:transparent;border:none;border-bottom:2px solid #8b8b8bff;border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:8px;white-space:nowrap;height:fit-content;color:var(--colorsYin090);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{"," ","}:hover{background-color:#00000010;cursor:pointer;}",";",";"," :focus{"," z-index:1;","}"],(({$hasCustomLayout:o})=>!o&&t.css(["align-items:center;display:flex;gap:8px;"])),(({activeTab:o,$orientation:e,$size:i,error:d,warning:r,info:a,$hasCustomLayout:s})=>o&&t.css([""," "," ",""],"horizontal"===e&&(d||r||a)&&t.css(["position:relative;top:1px;"]),"large"===i&&t.css(["margin-top:-4px;"]),s&&"horizontal"===e&&t.css(["position:relative;top:-2px;left:1px;"]))),(({$size:o,$hasCustomLayout:e})=>t.css(["font-size:","px;height:","px;",""],d[o].fontSize,d[o].height,e?t.css(["padding:0;"]):t.css(["padding:","px ","px;"],d[o].paddingY,d[o].paddingX))),(({activeTab:o,error:e,info:i,$orientation:r,$size:a,warning:s,$hasCustomLayout:n})=>o&&"horizontal"===r&&t.css(["background-color:white;border:2px solid #8b8b8bff;border-bottom:none;",' :hover{background-color:white;}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:2px;min-width:24px;}"],!n&&t.css(["padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:","px;"],d[a].paddingY-4,d[a].paddingX-2,d[a].paddingY,d[a].paddingX-2),(()=>e?"#db004e":s?"#d64309":i?"#0060a7ff":"black"))),(({activeTab:o,error:e,info:i,$orientation:r,$size:a,warning:s,$hasCustomLayout:n,$headerWidth:p})=>"vertical"===r&&t.css(["border:none;border-right:2px solid #8b8b8bff;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:0px;max-width:",";width:",";"," ",""],null!=p?p:"200px",null!=p?p:"200px",p&&t.css(["white-space:normal;height:auto;"]),o&&t.css(["background-color:white;border:2px solid #8b8b8bff;border-right:none;"," :hover{background-color:white;}.tab-title-content-wrapper{"," ",' ::after{content:"";position:absolute;right:0;width:4px;'," height:60%;background-color:",";border-radius:2px;min-height:24px;}}"],!n&&t.css(["padding-top:","px;padding-right:var(--global-space-none);padding-bottom:","px;padding-left:","px;"],"medium"===a?d.medium.paddingY-2:4,"medium"===a?d.medium.paddingY-2:d.large.paddingY,d[a].paddingX-2),p&&!n&&t.css(["padding-right:18px;"]),n&&t.css(["width:100%;> *{position:relative;left:-2px;top:-2px;}"]),n&&t.css(["top:20%;right:0px;"]),(()=>e?"#db004e":s?"#d64309":i?"#0060a7ff":"black")))),o.default(),(({$orientation:o})=>t.css(["border-top-left-radius:8px;border-top-right-radius:",";border-bottom-left-radius:",";border-bottom-right-radius:0px;"],"horizontal"===o?"8px":"0","horizontal"===o?"0px":"8px"))),c=i.default.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-75b008c3-7"})(["display:flex;",""],(({$orientation:o})=>t.css(["flex-direction:",";"],"horizontal"===o?"column":"row"))),h=i.default.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-75b008c3-8"})(["",""],(({visible:o})=>t.css(["display:",";"],o?"block":"none")));exports.Spacer=n,exports.StyledScrollButton=p,exports.StyledScrollButtonPlaceholder=l,exports.StyledTab=b,exports.StyledTabList=a,exports.StyledTabListWrapper=s,exports.StyledTabPanel=r,exports.StyledTabProvider=h,exports.StyledTabs=c;
+"use strict";var a=require("styled-components"),t=require("../../../style/utils/add-focus-styling.js");function o(a){return a&&a.__esModule?a:{default:a}}var i=o(a);const r={medium:{fontSize:14,iconMinWidth:84,height:40,paddingX:16,paddingY:8,width:56},large:{fontSize:16,iconMinWidth:104,height:48,paddingX:24,paddingY:0,width:76}},e=i.default.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-8b5755df-0"})(["padding:0 6px;"]),d=i.default.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-8b5755df-1"})(["display:flex;"," width:100%;padding:6px;overflow-x:hidden;"],(({$orientation:t})=>a.css([""," ",""],"horizontal"===t&&a.css(["margin-bottom:8px;"]),"vertical"===t&&a.css(["flex-direction:column;flex-wrap:wrap;margin-right:8px;"])))),n=i.default.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-8b5755df-2"})(["display:flex;z-index:6;",";"],(({$headerWidth:t})=>t&&a.css(["width:",";"],t))),l=i.default.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-8b5755df-3"})(["align-self:flex-end;background:var(--tab-border-active-alt);flex-grow:1;height:2px;"]),s=i.default.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-8b5755df-4"})(["height:",";width:",";border-radius:var(--global-radius-none);border-top-right-radius:var(--global-radius-action-m);border-top-left-radius:var(--global-radius-action-m);border-color:var(--tab-border-active-alt);background:white;border:none;border-bottom:2px solid var(--tab-border-active-alt);top:6px;position:relative;"],(({$size:a})=>"medium"===a?"40px":"48px"),(({$size:a})=>"medium"===a?"40px":"48px")),p=i.default.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-8b5755df-5"})(["height:",";width:",";border-radius:var(--global-radius-none);border-color:var(--tab-border-active-alt);border:none;border-bottom:2px solid var(--tab-border-active-alt);top:4px;position:relative;"],(({$size:a})=>"medium"===a?"40px":"48px"),(({$size:a})=>"medium"===a?"40px":"48px")),b=i.default.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-8b5755df-6"})(["background-color:transparent;border:none;border-bottom:2px solid var(--tab-border-default);border-radius:var(--global-radius-action-m) var(--global-radius-action-m) 0 0;white-space:nowrap;height:fit-content;color:var(--tab-label-default);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{"," ","}:hover{background-color:var(--tab-bg-hover);cursor:pointer;}",";",";"," :focus{"," z-index:1;","}"],(({$hasCustomLayout:t})=>!t&&a.css(["align-items:center;display:flex;gap:8px;"])),(({activeTab:t,$orientation:o,$size:i,error:r,warning:e,info:d,$hasCustomLayout:n})=>t&&a.css([""," "," ",""],"horizontal"===o&&(r||e||d)&&a.css(["position:relative;top:1px;"]),"large"===i&&a.css(["margin-top:-4px;"]),n&&"horizontal"===o&&a.css(["position:relative;top:-2px;left:1px;"]))),(({$size:t,$hasCustomLayout:o})=>a.css(["font-size:","px;height:","px;",""],r[t].fontSize,r[t].height,o?a.css(["padding:0;"]):a.css(["padding:","px ","px;"],r[t].paddingY,r[t].paddingX))),(({activeTab:t,error:o,info:i,$orientation:e,$size:d,warning:n,$hasCustomLayout:l})=>t&&"horizontal"===e&&a.css(["background-color:var(--tab-bg-active);border:2px solid var(--tab-border-active-alt);border-bottom:none;color:var(--tab-label-active);",' :hover{background-color:var(--tab-bg-active);}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:var(--global-radius-container-2-xs);min-width:24px;}"],!l&&a.css(["padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:","px;"],r[d].paddingY-4,r[d].paddingX-2,r[d].paddingY,r[d].paddingX-2),(()=>o?"var(--tab-validation-border-error)":n?"var(--tab-validation-border-warning)":i?"#0060a7ff":"black"))),(({activeTab:t,error:o,info:i,$orientation:e,$size:d,warning:n,$hasCustomLayout:l,$headerWidth:s})=>"vertical"===e&&a.css(["border:none;border-right:2px solid var(--tab-border-default);border-radius:var(--global-radius-action-m) 0 0 var(--global-radius-action-m);max-width:",";width:",";"," ",""],null!=s?s:"200px",null!=s?s:"200px",s&&a.css(["white-space:normal;height:auto;"]),t&&a.css(["background-color:var(--tab-bg-active);border:2px solid var(--tab-border-active-alt);border-right:none;"," :hover{background-color:var(--tab-bg-active);}.tab-title-content-wrapper{"," ",' ::after{content:"";position:absolute;right:0;width:4px;'," height:60%;background-color:",";border-radius:var(--global-radius-container-2-xs);min-height:24px;}}"],!l&&a.css(["padding-top:","px;padding-right:var(--global-space-none);padding-bottom:","px;padding-left:","px;"],"medium"===d?r.medium.paddingY-2:4,"medium"===d?r.medium.paddingY-2:r.large.paddingY,r[d].paddingX-2),s&&!l&&a.css(["padding-right:18px;"]),l&&a.css(["width:100%;> *{position:relative;left:-2px;top:-2px;}"]),l&&a.css(["top:20%;right:0px;"]),(()=>o?"var(--tab-validation-border-error)":n?"var(--tab-validation-border-warning)":i?"#0060a7ff":"black")))),t.default(),(({$orientation:t})=>a.css(["border-top-left-radius:var(--global-radius-action-m);border-top-right-radius:",";border-bottom-left-radius:",";border-bottom-right-radius:var(--global-radius-none);"],"horizontal"===t?"var(--global-radius-action-m)":"var(--global-radius-none)","horizontal"===t?"var(--global-radius-none)":"var(--global-radius-action-m)"))),c=i.default.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-8b5755df-7"})(["display:flex;",""],(({$orientation:t})=>a.css(["flex-direction:",";"],"horizontal"===t?"column":"row"))),g=i.default.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-8b5755df-8"})(["",""],(({visible:t})=>a.css(["display:",";"],t?"block":"none")));exports.Spacer=l,exports.StyledScrollButton=s,exports.StyledScrollButtonPlaceholder=p,exports.StyledTab=b,exports.StyledTabList=d,exports.StyledTabListWrapper=n,exports.StyledTabPanel=e,exports.StyledTabProvider=g,exports.StyledTabs=c;

package/lib/components/tokens-wrapper/tokens-wrapper.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("styled-components"),r=require("./__internal__/static-tokens/index.js");function a(e){return e&&e.__esModule?e:{default:e}}const o=a(t).default.div.withConfig({displayName:"tokens-wrapper.component__StyledTokensWrapper",componentId:"sc-5bf3905e-0"})(["height:",";"],(({height:e})=>e)),n=t.createGlobalStyle(['[data-component="tokens-wrapper"],[class*="carbon-portal"]{',"}"],r.default),s=({children:t,height:r="auto"})=>e.jsxs(o,{"data-component":"tokens-wrapper","data-role":"tokens-wrapper",height:r,children:[e.jsx(n,{}),t]});exports.TokensWrapper=s,exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("styled-components"),r=require("./__internal__/static-tokens/index.js");function a(e){return e&&e.__esModule?e:{default:e}}const o=a(t).default.div.withConfig({displayName:"tokens-wrapper.component__StyledTokensWrapper",componentId:"sc-bb9ec08c-0"})(["height:",";"],(({$height:e})=>e)),n=t.createGlobalStyle(['[data-component="tokens-wrapper"],[class*="carbon-portal"]{',"}"],r.default),s=({children:t,height:r="auto"})=>e.jsxs(o,{"data-component":"tokens-wrapper","data-role":"tokens-wrapper",$height:r,children:[e.jsx(n,{}),t]});exports.TokensWrapper=s,exports.default=s;

package/lib/global.d.ts

@@ -1,4 +1,5 @@
 import { type ModalList } from "./__internal__/modal/modal-manager";
+import { type QueryEntry } from "./hooks/useMediaQuery/useMediaQuery";
 
 declare global {
   module "*.png";
@@ -16,6 +17,7 @@ declare global {
       originalValues: string[];
       restoreValues?: (() => void) | null;
     };
+    __CARBON_INTERNALS_MEDIA_QUERY_CACHE?: Map<string, QueryEntry>;
   }
 }
 

package/lib/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../useMediaQuery/useMediaQuery.js");exports.default=function(r){const t=e.default(`(min-width:${r}px)`);if(r)return t};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../useMediaQuery/useMediaQuery.js");exports.default=function(r){const t=r?`(min-width:${r}px)`:"",u=e.default(t);if(t)return u};

package/lib/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -1 +1,9 @@
-export default function useMediaQuery(queryInput: string): boolean | undefined;
+type Listener = () => void;
+export interface QueryEntry {
+    mediaQueryList: MediaQueryList;
+    listeners: Set<Listener>;
+    nativeHandler: () => void;
+    refCount: number;
+}
+declare const _default: (queryInput: string) => boolean | undefined;
+export default _default;

package/lib/hooks/useMediaQuery/useMediaQuery.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../__internal__/dom/globals.js");exports.default=function(r){const n=r.replace(/^@media( ?)/m,""),[a,s]=e.useState(void 0);return e.useLayoutEffect((()=>{const e=t.getWindow();if(!e)return;const r=e.matchMedia(n),a=()=>s(r.matches);return a(),r.addEventListener("change",a),()=>{r.removeEventListener("change",a)}}),[n]),a};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const t=require("../../__internal__/dom/globals.js").getWindow(),r=t?e.useLayoutEffect:e.useEffect,n="__CARBON_INTERNALS_MEDIA_QUERY_CACHE",s=e=>(e[n]||(e[n]=new Map),e[n]);exports.default=n=>{const a=null==n?void 0:n.replace(/^@media( ?)/m,""),[i,u]=e.useState(void 0),c=e.useCallback((()=>{if(!t)return;const e=s(t).get(a);e&&u(e.mediaQueryList.matches)}),[a]);return r((()=>{if(!t||!a)return;const{matches:e,unsubscribe:r}=((e,t,r)=>{const{entry:n,cache:a}=((e,t)=>{const r=s(t),n=r.get(e);if(n)return{entry:n,cache:r};const a=t.matchMedia(e),i={mediaQueryList:a,listeners:new Set,nativeHandler:()=>{i.listeners.forEach((e=>e()))},refCount:0};return a.addEventListener("change",i.nativeHandler),r.set(e,i),{entry:i,cache:r}})(e,r);return n.refCount+=1,n.listeners.add(t),{matches:n.mediaQueryList.matches,unsubscribe:()=>{n.listeners.delete(t),n.refCount-=1,n.refCount||(n.mediaQueryList.removeEventListener("change",n.nativeHandler),a.delete(e))}}})(a,c,t);return u(e),r}),[a,c]),i};

package/package.json

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