carbon-react 162.12.0-beta.1 → 162.13.0

package/esm/components/tokens-wrapper/__internal__/utils/generate-tokens-from-overrides.js

@@ -0,0 +1 @@
+import o from"../../../../__internal__/utils/logger/index.js";import{normaliseHex as t,rgbToHex as e,hslToHex as a,namedColorToHex as s}from"../../../../style/utils/get-hex-value.js";const i=/^#([A-Fa-f0-9]{8})$/;function l(l,r){const n=l.trim();let u="";if(n.startsWith("#"))u=t(n);else if(n.startsWith("rgb"))u=e(n);else if(n.startsWith("hsl"))u=a(n);else{const o=s(n);o&&(u=o)}return u.length?`${9===u.length&&i.test(u)?u.slice(0,7):u}${Math.round(255*r).toString(16).padStart(2,"0")}`:(o.warn(`Unable to parse color value "${n}". Please provide a valid hex, rgb(a), hsl(a), or named color.`),n)}function r(o,t){const e=[],a=`--mode-color-action-main-${t}`,{primaryBrand:s,primaryBrandHover:i,primaryBrandActive:r,onPrimaryBrand:n,onPrimaryBrandHover:u,onPrimaryBrandActive:h}=o;return e.push(`${a}default: ${s};`),e.push(`${a}default-alt: ${l(s,.8)};`),e.push(`${a}default-alt3: ${l(s,.03)};`),i&&(e.push(`${a}hover: ${i};`),e.push(`${a}hover-alt: ${l(i,.15)};`),e.push(`${a}default-alt2: ${i};`)),r&&(e.push(`${a}active: ${r};`),e.push(`${a}active-alt: ${l(r,.3)};`),e.push(`${a}hover-alt2: ${r};`)),n?(e.push(`${a}with-default: ${n};`),e.push(`${a}with-hover: ${null!=u?u:n};`),e.push(`${a}with-active: ${null!=h?h:n};`)):(u&&e.push(`${a}with-hover: ${u};`),h&&e.push(`${a}with-active: ${h};`)),e}const n=o=>{const t=[],e=[],{light:a,dark:s,focus:i,font:l,borderRadiusScale:n}=o;if(a){const{inverse:o}=a;t.push(...r(a,"")),o&&t.push(...r(o,"inverse-"))}if(s){const{inverse:o}=s;e.push(...r(s,"")),o&&e.push(...r(o,"inverse-"))}if(i){const{ring:o,contrast:a,alt:s,inverse:l}=i;if(o&&(t.push(`--mode-color-action-focus-default: ${o};`),e.push(`--mode-color-action-focus-with-default: ${o};`)),a&&(t.push(`--mode-color-action-focus-with-default: ${a};`),e.push(`--mode-color-action-focus-default: ${a};`)),s&&(t.push(`--mode-color-action-focus-with-default-alt: ${s};`),e.push(`--mode-color-action-focus-with-default-alt: ${s};`)),l){const{ring:o,contrast:a,alt:s}=l;o&&(t.push(`--mode-color-action-focus-inverse-default: ${o};`),e.push(`--mode-color-action-focus-inverse-with-default: ${o};`)),a&&(t.push(`--mode-color-action-focus-inverse-with-default: ${a};`),e.push(`--mode-color-action-focus-inverse-default: ${a};`)),s&&(t.push(`--mode-color-action-focus-inverse-with-default-alt: ${s};`),e.push(`--mode-color-action-focus-inverse-with-default-alt: ${s};`))}}if(l){const{family:o}=l,{component:e,heading:a,subheading:s,body:i,other:r}=null!=o?o:{};a&&t.push(`--global-font-families-heading: ${a};`),s&&t.push(`--global-font-families-subheading: ${s};`),i&&t.push(`--global-font-families-body: ${i};`),e&&t.push(`--global-font-families-component: ${e};`),r&&t.push(`--global-font-families-other: ${r};`)}void 0!==n&&t.push(`--global-radius-scale: ${n};`);const u=e.length?`&.carbon-dark-mode, &[data-carbon-theme="dark"] { ${e.join(" ")} }`:"";return[...t,u].join("\n  ")};export{n as overrideTokens};

package/esm/components/tokens-wrapper/index.d.ts

@@ -0,0 +1,3 @@
+export type { TokenWrapperProps } from "./tokens-wrapper.component";
+export { default } from "./tokens-wrapper.component";
+export { type BrandOverrides, type Colors, type FocusColors, } from "./__internal__/utils/generate-tokens-from-overrides";

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

@@ -0,0 +1 @@
+export{TokensWrapper as default}from"./tokens-wrapper.component.js";

package/esm/components/tokens-wrapper/tokens-wrapper.component.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { type BrandOverrides } from "./__internal__/utils/generate-tokens-from-overrides";
+export interface TokenWrapperProps {
+    children: React.ReactNode;
+    height?: string;
+    modeSupportOptIn?: boolean;
+    modeOverride?: "light" | "dark" | "auto";
+    overrides?: BrandOverrides;
+}
+export declare const TokensWrapper: ({ children, height, modeSupportOptIn, modeOverride, overrides, }: TokenWrapperProps) => React.JSX.Element;
+export default TokensWrapper;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t}from"react";import o,{createGlobalStyle as n}from"styled-components";import a from"../../__internal__/utils/helpers/guid/index.js";import p from"./__internal__/context/tokens-wrapper.context.js";import i from"./__internal__/static-tokens/index.js";import c from"./__internal__/hooks/useModeSwitcher.js";import{overrideTokens as s}from"./__internal__/utils/generate-tokens-from-overrides.js";function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function l(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){d(e,r,t[r])}))}return e}const m=o.div.withConfig({displayName:"tokens-wrapper.component__StyledTokensWrapper",componentId:"carbon_v162_12_0__sc-aaecd17e-0"})(["height:",";"],(({$height:e})=>e)),u=n(['[data-component="tokens-wrapper"],[data-role="carbon-portal-scoped-tokens-provider"],.carbon-portal-scoped-tokens-provider{',"}"],i),b=n(["",""],(({$wrapperId:e,$overrides:r})=>`\n    [data-component="tokens-wrapper"][data-tokens-wrapper-id="${e}"],\n    [data-role="carbon-portal-scoped-tokens-provider"][data-tokens-wrapper-id="${e}"] {\n      ${s(r)}\n    }\n  `)),f=({children:o,height:n="auto",modeSupportOptIn:i=!1,modeOverride:s,overrides:d})=>{const f=t(a()),_=c(s),{current:O}=f,w=i?{className:`carbon-${_}-mode`,"data-carbon-theme":"dark"===_?"dark":"light"}:{};return e(p.Provider,{value:{wrapperId:d?O:void 0},children:r(m,(h=l({"data-component":"tokens-wrapper","data-role":"tokens-wrapper","data-tokens-wrapper-id":d?O:void 0,$height:n},w),k={children:[e(u,{"data-role":"carbon-fusion-tokens"}),d&&e(b,{"data-role":"carbon-fusion-overrides",$wrapperId:O,$overrides:d}),o]},k=null!=k?k:{},Object.getOwnPropertyDescriptors?Object.defineProperties(h,Object.getOwnPropertyDescriptors(k)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(k)).forEach((function(e){Object.defineProperty(h,e,Object.getOwnPropertyDescriptor(k,e))})),h))});var h,k};export{f as TokensWrapper,f as default};

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

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

package/esm/components/tooltip/index.js

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

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

@@ -0,0 +1,5 @@
+import { TooltipProps } from "./tooltip.component";
+declare const StyledTooltipPointer: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & Pick<TooltipProps, "type" | "bgColor">, "theme">;
+export default StyledTooltipPointer;

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

@@ -0,0 +1 @@
+import o,{css as t}from"styled-components";import e from"../../style/themes/apply-base-theme.js";import{toColor as r}from"../../style/utils/color.js";const i=o.div.attrs(e).withConfig({displayName:"tooltip-pointer.style__StyledTooltipPointer",componentId:"carbon_v162_12_0__sc-55209bbd-0"})(["",""],(({theme:o,type:e,bgColor:i})=>t(["z-index:",";background:",";position:absolute;width:12px;height:12px;transform:rotate(45deg);"],o.zIndex.popover,((o,t,e)=>t?r(o,t):"error"===e?"var(--colorsSemanticNegative500)":"var(--colorsSemanticNeutral500)")(o,i,e))));export{i as default};

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { TooltipPositions } from "./tooltip.config";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+/**
+ * @deprecated `Tooltip` has been deprecated. See the Carbon documentation for migration details.
+ */
+export type InputSizes = "small" | "medium" | "large";
+/**
+ * @deprecated `Tooltip` has been deprecated. See the Carbon documentation for migration details.
+ */
+export interface TooltipProps extends TagProps {
+    /** The message to be displayed within the tooltip */
+    message: React.ReactNode;
+    /** The id attribute to use for the tooltip */
+    id?: string;
+    /** Whether to to show the Tooltip */
+    isVisible?: boolean;
+    /** Sets position of the tooltip */
+    position?: TooltipPositions;
+    /** Defines the message type */
+    type?: string;
+    /** Children elements */
+    children: React.ReactElement;
+    /** Defines the size of the tooltip content */
+    size?: "medium" | "large";
+    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    bgColor?: string;
+    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    fontColor?: string;
+    /**
+     * Overrides the default flip behaviour of the Tooltip,
+     * must be an array containing some or all of ["top", "bottom", "left", "right"]
+     * (see <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements" target="_blank">Popper.js documentation</a>)
+     */
+    flipOverrides?: TooltipPositions[];
+    /** @ignore @private */
+    target?: HTMLElement;
+    /** @ignore @private */
+    isPartOfInput?: boolean;
+    /** @ignore @private */
+    inputSize?: InputSizes;
+}
+/**
+ * @deprecated `Tooltip` has been deprecated. See the Carbon documentation for migration details.
+ */
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement | null>>;
+export default Tooltip;

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

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useEffect as l,useCallback as c,useMemo as p}from"react";import s from"invariant";import{offset as a,flip as u,shift as f,limitShift as m,arrow as b,useFloating as d,autoUpdate as y}from"@floating-ui/react-dom";import O from"./tooltip.style.js";import g from"./tooltip-pointer.style.js";import{TOOLTIP_POSITIONS as j}from"./tooltip.config.js";import h from"../../__internal__/utils/helpers/tags/tags.js";import{Portal as v}from"../portal/portal.js";function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){w(e,t,r[t])}))}return e}function x(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function E(e,t){e&&("function"==typeof e&&e(t),"object"==typeof e&&"current"in e&&(e.current=t))}const S=o.forwardRef(((w,S)=>{var{children:C,isVisible:T,position:z="top",message:D,type:k,size:A="medium",isPartOfInput:I,inputSize:_="medium",id:L,bgColor:V,fontColor:M,flipOverrides:N,target:R}=w,q=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(w,["children","isVisible","position","message","type","size","isPartOfInput","inputSize","id","bgColor","fontColor","flipOverrides","target"]);const B=n(null),F=void 0!==T,[G,H]=i(!1);let J=G;F&&(J=T);const K=n(void 0),Q=n(void 0);l((()=>()=>{clearTimeout(K.current),clearTimeout(Q.current)}),[]);const U=c((()=>H(!0)),[]),W=c((()=>H(!1)),[]),X=c((()=>{K.current=window.setTimeout(U,100)}),[U]),Y=c((()=>{Q.current=window.setTimeout(W,100)}),[W]);l((()=>{const e={mouseenter:X,mouseleave:Y,focus:U,blur:W},t=R||B.current;return F||Object.entries(e).forEach((([e,r])=>{null==t||t.addEventListener(e,r)})),()=>{F||Object.entries(e).forEach((([e,r])=>{null==t||t.removeEventListener(e,r)}))}}),[C,U,X,W,Y,F,R]);const Z=n(N);Z.current=N;const $=n(null),ee=c((e=>{let t=9;return I&&(t={small:5,medium:["top","bottom"].includes(e)?6:8,large:["top","bottom"].includes(e)?10:12}[_]),t}),[_,I]),te=p((()=>[a((({placement:e})=>({mainAxis:ee(e)}))),u({fallbackPlacements:Z.current}),f({padding:5,limiter:m({offset:({rects:e})=>({mainAxis:e.reference.height})})}),b({element:$})]),[ee,$]),{x:re,y:oe,reference:ne,floating:ie,strategy:le,placement:ce,middlewareData:pe}=d({placement:z,middleware:te,whileElementsMounted:y}),se={position:le,top:null!=oe?oe:0,left:null!=re?re:0},ae=c((e=>{ne(R||e),B.current=e,E(C.ref,e)}),[ne,C,R]),ue=c((e=>{ie(e),E(S,e)}),[ie,S]),fe={top:"bottom",right:"left",bottom:"top",left:"right"}[ce.split("-")[0]],{x:me,y:be}=pe.arrow||{},de={left:me,top:be,[fe]:"-6px"},ye=!N||Array.isArray(N)&&N.every((e=>j.includes(e)));return s(ye,'The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].'),e(t,{children:[o.cloneElement(C,{ref:ae}),J?r(v,{children:e(O,x(P({"data-element":"tooltip","data-role":"tooltip",role:"tooltip",tabIndex:-1,type:k,size:A,id:L},h("tooltip",q)),{ref:ue,bgColor:V,fontColor:M,style:se,"data-placement":ce,children:[r(g,{type:k,ref:$,"data-element":"tooltip-pointer","data-role":"tooltip-pointer",bgColor:V,style:de}),D]}))}):null]})}));S.displayName="Tooltip";export{S as Tooltip,S as default};

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

@@ -0,0 +1,2 @@
+export declare const TOOLTIP_POSITIONS: string[];
+export type TooltipPositions = "top" | "bottom" | "left" | "right";

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

@@ -0,0 +1 @@
+const t=["bottom","left","right","top"];export{t as TOOLTIP_POSITIONS};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+export { default } from "./typography.component";
+export { List, ListItem } from "./list.component";
+export type { TypographyProps, VariantTypes } from "./typography.component";
+export type { ListProps, ListItemProps } from "./list.component";

package/esm/components/typography/index.js

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { VariantTypes } from "./typography.component";
+export interface ListContextProps {
+    variant?: VariantTypes;
+}
+export declare const ListContext: React.Context<ListContextProps>;
+export default ListContext;

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

@@ -0,0 +1 @@
+import t from"react";const e=t.createContext({});export{e as ListContext,e as default};

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

@@ -0,0 +1,116 @@
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import type { TypographyProps as NextTypographyProps } from "./__internal__/__next__/";
+export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "section-heading", "segment-header-small", "segment-subheader", "section-subheading", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+export type VariantTypes = (typeof VARIANT_TYPES)[number];
+type DeprecatedColorAliases = "default" | "alt";
+export interface TypographyProps extends SpaceProps, TagProps, Pick<NextTypographyProps, "weight" | "size" | "fluid" | "inverse" | "overflow"> {
+    /** Override the variant component */
+    as?: React.ElementType;
+    /** Set the ID attribute of the Typography component */
+    id?: string;
+    /** Content to be rendered inside the Typography component */
+    children?: React.ReactNode;
+    /**
+     * The visual style to apply to the component. Supported variants include:
+     * h1, h2, h3, h4, h5, section-heading, section-subheading, p (default),
+     * sup, sub, strong, b, ul, ol
+     *
+     * The following variant values are deprecated with recommended alternatives:
+     * - "h1-large" -> use "h1" instead
+     * - "segment-header" -> use "section-heading" instead
+     * - "segment-header-small" -> use "section-subheading" instead
+     * - "segment-subheader" / "segment-subheader-alt" -> use "h5" instead
+     * - "span" -> use "p" instead
+     * - "small" -> use "p" with the `size` prop set to "M"
+     * - "big" -> use "h5" or "h4" depending on context, or "p" with `size` prop set to "L"
+     * - "em" -> use "strong" or "b" for semantic emphasis
+     */
+    variant?: VariantTypes;
+    /**
+     * @deprecated Use the new `size` prop for paragraphs or choose the appropriate variant for other variants. This prop will eventually be removed.
+     * Override the variant font-size */
+    fontSize?: string;
+    /**
+     * @deprecated Use the new `weight` prop for paragraphs or choose the appropriate variant for other variants. This prop will eventually be removed.
+     * Override the variant font-weight */
+    fontWeight?: string;
+    /**
+     * @deprecated Choose the appropriate variant for your use case, as each variant has its own line-height. This prop will eventually be removed.
+     * Override the variant line-height */
+    lineHeight?: string;
+    /** Override the variant text-transform */
+    textTransform?: string;
+    /** Override the variant text-decoration */
+    textDecoration?: string;
+    /** Override the variant display */
+    display?: string;
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the list-style-type */
+    listStyleType?: string;
+    /** Override the white-space */
+    whiteSpace?: string;
+    /** Override the word-break */
+    wordBreak?: string;
+    /** Override the word-wrap */
+    wordWrap?: string;
+    /** Override the text-align */
+    textAlign?: string;
+    /** Override the text-overflow */
+    textOverflow?: string;
+    /**
+     * @deprecated Use `textOverflow` and `whiteSpace` props instead. This prop will eventually be removed.
+     * Apply truncation */
+    truncate?: boolean;
+    /**
+     * Override the text color using typography token options.
+     * Supported values are: `neutral`, `subtle`, `caution`, `info`, `negative`, and `positive`.
+     * Legacy aliases `"default"` and `"alt"` map to `"neutral"` and `"subtle"` respectively.
+     */
+    color?: NextTypographyProps["color"] | DeprecatedColorAliases | string;
+    /** @deprecated Use `color` instead. */
+    tint?: NextTypographyProps["tint"];
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the backgroundColor style */
+    backgroundColor?: string;
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the bg value shorthand for backgroundColor */
+    bg?: string;
+    /**
+     * @deprecated This prop no longer has any effect. This prop will eventually be removed.
+     * Override the opacity value */
+    opacity?: string | number;
+    /** Set whether it will be visually hidden
+     * NOTE: This is for screen readers only and will make a lot of the other props redundant */
+    screenReaderOnly?: boolean;
+    /**
+     * @deprecated
+     * @private
+     * @ignore
+     * Override the default color of the rendered element to match disabled styling
+     * */
+    isDisabled?: boolean;
+    /** Make the element an aria-live region */
+    "aria-live"?: "off" | "assertive" | "polite";
+    /** Set the role of the element when it is a live region */
+    role?: "status" | "alert";
+    /** @private @ignore Set whether the component should be recognised by assistive technologies */
+    "aria-hidden"?: "true" | "false";
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Sets className for component. INTERNAL USE ONLY. */
+    className?: string;
+    /** @private @internal @ignore */
+    "data-component"?: string;
+}
+export declare const Typography: {
+    ({ variant, as, id, fluid, inverse, size, color, tint, weight, truncate, children, screenReaderOnly, "aria-live": ariaLive, "aria-hidden": ariaHidden, ...rest }: TypographyProps): React.JSX.Element;
+    displayName: string;
+};
+export default Typography;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import r from"../../__internal__/filter-object-properties/filter-object-properties.js";import{ALLOWED_CSS_TEXT_OVERRIDE_KEYS as t,TYPOGRAPHY_COLOR_TYPES as n}from"./__internal__/__next__/typography.component.js";import a from"./typography.style.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}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){i(e,r,t[r])}))}return e}function o(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const l=["h1-large","h1","h2","h3","h4","h5","segment-header","section-heading","segment-header-small","segment-subheader","section-subheading","segment-subheader-alt","p","span","small","big","sup","sub","strong","b","em","ul","ol"],c=new Set(["white","#fff","#ffffff","rgb(255,255,255)","rgb(255, 255, 255)"]),u=n,h={"h1-large":"h1",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5","segment-header":"h2","segment-header-small":"h3","segment-subheader":"h5","segment-subheader-alt":"h5","section-heading":"h2","section-subheading":"h3",p:"p",span:"span",small:"small",big:"big",sup:"sup",sub:"sub",strong:"strong",em:"em",b:"b",ul:"ul",ol:"ol"},p=e=>{var r;return null!==(r=e&&h[e])&&void 0!==r?r:"p"},d=n=>{var{variant:i="p",as:l,id:h,fluid:d=!1,inverse:f=!1,size:b="M",color:g,tint:m="default",weight:y="regular",truncate:O=!1,children:j,screenReaderOnly:v=!1,"aria-live":w,"aria-hidden":P}=n,_=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(n,["variant","as","id","fluid","inverse","size","color","tint","weight","truncate","children","screenReaderOnly","aria-live","aria-hidden"]);const S=(e=>{switch(e){case"h1-large":return"h1";case"segment-header":return"section-heading";case"segment-header-small":return"section-subheading";case"segment-subheader":case"segment-subheader-alt":return"h5";default:return e}})(i),x=(e=>"string"==typeof e?e.trim().toLowerCase():e)(g),D=(e=>"default"===e?"neutral":"alt"===e?"subtle":e&&u.includes(e)?e:void 0)(x),k=f||((e,r)=>!r&&!!e&&c.has(e))(x,D),z=r(_,t);return O&&(z.overflow="hidden",z.whiteSpace="nowrap",z.textOverflow="ellipsis"),e(a,o(s(o(s({variant:S,forwardedAs:l||p(i),id:h},z),{fluid:d,inverse:k,screenReaderOnly:v,"aria-live":w,"aria-hidden":P,size:b,color:D,tint:m,weight:y}),_),{children:j}))};d.displayName="Typography";export{d as Typography,l as VARIANT_TYPES,d as default};

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

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

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

@@ -0,0 +1 @@
+import e,{css as t}from"styled-components";import{space as o}from"styled-system";import p from"../../style/themes/apply-base-theme.js";import{Typography as s}from"./__internal__/__next__/typography.component.js";import a from"../../style/utils/visually-hidden.js";const i=e(s).attrs(p).withConfig({displayName:"typography.style__StyledTypography",componentId:"carbon_v162_12_0__sc-bec9c5e6-0"})([""," ",""],(({fontSize:e,fontWeight:o,lineHeight:p,variant:s,screenReaderOnly:i})=>t([""," "," "," margin:",";",""],e&&`font-size: ${e};`,o&&`font-weight: ${o};`,p&&`line-height: ${p};`,"p"===s?"0 0 var(--global-space-comp-l)":"0",i&&a)),o);i.displayName="Typography";export{i as default};

package/esm/components/vertical-divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./vertical-divider.component";
+export type { VerticalDividerProps } from "./vertical-divider.component";

package/esm/components/vertical-divider/index.js

@@ -0,0 +1 @@
+export{VerticalDivider as default}from"./vertical-divider.component.js";

package/esm/components/vertical-divider/vertical-divider.component.d.ts

@@ -0,0 +1,35 @@
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+/**
+ * @deprecated `VerticalDivider` has been deprecated. See the Carbon documentation for migration details.
+ */
+type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
+/**
+ * @deprecated `VerticalDivider` has been deprecated. See the Carbon documentation for migration details.
+ */
+export interface VerticalDividerProps extends SpaceProps, TagProps {
+    /** Shorthand for the height attribute */
+    h?: number | string;
+    /** Height attribute of the component */
+    height?: number | string;
+    /**
+     * Sets the display: inline css attribute on the component
+     * To be used in non-flex containers.
+     */
+    displayInline?: boolean;
+    /** Custom tint of the divider, the supported rage is 1-100 */
+    tint?: TintRange;
+    /**
+     * Set the divider to be hidden from screen readers.
+     * Please note that this cannot be overridden when inside a Menu.
+     * */
+    "aria-hidden"?: boolean;
+}
+/**
+ * @deprecated `VerticalDivider` has been deprecated. See the Carbon documentation for migration details.
+ */
+export declare const VerticalDivider: {
+    ({ h, height, displayInline, tint, "aria-hidden": ariaHidden, ...props }: VerticalDividerProps): JSX.Element;
+    displayName: string;
+};
+export default VerticalDivider;

package/esm/components/vertical-divider/vertical-divider.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useContext as r}from"react";import t from"../menu/__internal__/menu.context.js";import{StyledVerticalWrapper as n,StyledDivider as i}from"./vertical-divider.style.js";import o from"../../__internal__/utils/helpers/tags/tags.js";import l from"../../__internal__/utils/logger/index.js";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){a(e,r,t[r])}))}return e}function s(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}let p=!1;const d=a=>{var{h:d,height:u,displayInline:f=!1,tint:b=80,"aria-hidden":y}=a,O=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(a,["h","height","displayInline","tint","aria-hidden"]);p||(p=!0,l.deprecate("`VerticalDivider` is deprecated and will soon be removed. Please use `Divider` instead."));const{inMenu:m}=r(t);return e(n,s(c(s(c({"data-role":"vertical-divider",p:O.p||3,height:d||u,displayInline:f},O),{as:m?"li":"div","aria-hidden":m||y}),o("vertical-divider",O)),{children:e(i,{"data-role":"divider",tint:b})}))};d.displayName="VerticalDivider";export{d as VerticalDivider,d as default};

package/esm/components/vertical-divider/vertical-divider.style.d.ts

@@ -0,0 +1,8 @@
+import { VerticalDividerProps } from "./vertical-divider.component";
+declare const StyledVerticalWrapper: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & VerticalDividerProps, "theme">;
+declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & Pick<VerticalDividerProps, "tint">, "theme">;
+export { StyledVerticalWrapper, StyledDivider };

package/esm/components/vertical-divider/vertical-divider.style.js

@@ -0,0 +1 @@
+import t,{css as e}from"styled-components";import{space as i}from"styled-system";import s from"../../style/themes/apply-base-theme.js";const r=t.div.attrs(s).withConfig({displayName:"vertical-divider.style__StyledVerticalWrapper",componentId:"carbon_v162_12_0__sc-b3cc6d7-0"})([""," "," ",""],i,(({height:t})=>t&&e(["height:",";"],"string"==typeof t?`${t}`:`${t}px`)),(({displayInline:t})=>t?"display: inline;":"")),d=t.div.attrs(s).withConfig({displayName:"vertical-divider.style__StyledDivider",componentId:"carbon_v162_12_0__sc-b3cc6d7-1"})(["height:100%;border-left:1px solid ",";display:inherit;"],(({theme:t,tint:e})=>t.palette.slateTint(e)));export{d as StyledDivider,r as StyledVerticalWrapper};

package/esm/components/vertical-menu/__internal__/vertical-menu.context.d.ts

@@ -0,0 +1,5 @@
+interface VerticalMenuContextType {
+    isFullScreen: boolean;
+}
+declare const VerticalMenuProvider: import("react").Provider<VerticalMenuContextType | null>, useVerticalMenuContext: () => VerticalMenuContextType;
+export { VerticalMenuProvider, useVerticalMenuContext };

package/esm/components/vertical-menu/__internal__/vertical-menu.context.js

@@ -0,0 +1 @@
+import e from"../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,r]=e({name:"VerticalMenuContext",errorMessage:"Carbon VerticalMenu: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{isFullScreen:!1}});export{t as VerticalMenuProvider,r as useVerticalMenuContext};

package/esm/components/vertical-menu/index.d.ts

@@ -0,0 +1,9 @@
+export { default as VerticalMenu } from "./vertical-menu.component";
+export type { VerticalMenuProps } from "./vertical-menu.component";
+export { default as VerticalMenuItem } from "./vertical-menu-item/vertical-menu-item.component";
+export type { VerticalMenuItemClickEvent, VerticalMenuItemProps, } from "./vertical-menu-item/vertical-menu-item.component";
+export { default as VerticalMenuFullScreen } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
+export type { VerticalMenuFullScreenProps } from "./vertical-menu-full-screen/vertical-menu-full-screen.component";
+export { default as VerticalMenuTrigger } from "./vertical-menu-trigger/vertical-menu-trigger.component";
+export type { VerticalMenuTriggerProps } from "./vertical-menu-trigger/vertical-menu-trigger.component";
+export { ResponsiveVerticalMenu, ResponsiveVerticalMenuDivider, ResponsiveVerticalMenuItem, ResponsiveVerticalMenuProvider, } from "./responsive-vertical-menu";

package/esm/components/vertical-menu/index.js

@@ -0,0 +1 @@
+export{VerticalMenu}from"./vertical-menu.component.js";export{VerticalMenuItem}from"./vertical-menu-item/vertical-menu-item.component.js";export{VerticalMenuFullScreen}from"./vertical-menu-full-screen/vertical-menu-full-screen.component.js";export{VerticalMenuTrigger}from"./vertical-menu-trigger/vertical-menu-trigger.component.js";export{ResponsiveVerticalMenuProvider}from"./responsive-vertical-menu/responsive-vertical-menu.context.js";export{ResponsiveVerticalMenu}from"./responsive-vertical-menu/responsive-vertical-menu.component.js";export{ResponsiveVerticalMenuItem}from"./responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js";export{ResponsiveVerticalMenuDivider}from"./responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.js";

package/esm/components/vertical-menu/responsive-vertical-menu/__internal__/depth.context.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Provides context which can be used to dynamcally track the depth of a component
+ * in the component tree. This is useful for components that need to know their depth
+ * in the tree for styling or layout purposes.
+ */
+import React, { ReactNode } from "react";
+declare const DepthContext: React.Context<number>;
+export declare const useDepth: () => number;
+export declare const DepthProvider: ({ children, value, }: {
+    children: ReactNode;
+    value?: number;
+}) => React.JSX.Element;
+export declare const IncreaseDepth: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export default DepthContext;

package/esm/components/vertical-menu/responsive-vertical-menu/__internal__/depth.context.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{createContext as r,useContext as t}from"react";import o from"../../../../__internal__/utils/logger/index.js";const i=r(0),n=()=>{const e=t(i);return void 0===e?(o.error("useDepth must be used within a DepthProvider. Please ensure you are using the correct context."),-1):e},u=({children:r,value:t=0})=>e(i.Provider,{value:t,children:r}),s=({children:r})=>{const t=n();return e(i.Provider,{value:t+1,children:r})};export{u as DepthProvider,s as IncreaseDepth,i as default,n as useDepth};

package/esm/components/vertical-menu/responsive-vertical-menu/index.d.ts

@@ -0,0 +1,7 @@
+export { ResponsiveVerticalMenuProvider } from "./responsive-vertical-menu.context";
+export { ResponsiveVerticalMenu } from "./responsive-vertical-menu.component";
+export type { ResponsiveVerticalMenuProps, ResponsiveVerticalMenuHandle, } from "./responsive-vertical-menu.component";
+export { ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item";
+export type { ResponsiveVerticalMenuItemProps, ResponsiveVerticalMenuItemClickEvent, } from "./responsive-vertical-menu-item";
+export { ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider";
+export type { ResponsiveVerticalMenuDividerProps } from "./responsive-vertical-menu-divider";

package/esm/components/vertical-menu/responsive-vertical-menu/index.js

@@ -0,0 +1 @@
+export{ResponsiveVerticalMenuProvider}from"./responsive-vertical-menu.context.js";export{ResponsiveVerticalMenu}from"./responsive-vertical-menu.component.js";export{ResponsiveVerticalMenuItem}from"./responsive-vertical-menu-item/responsive-vertical-menu-item.component.js";export{ResponsiveVerticalMenuDivider}from"./responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.js";

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/index.d.ts

@@ -0,0 +1,3 @@
+import { MarginProps } from "styled-system";
+export { default as ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider.component";
+export type { MarginProps as ResponsiveVerticalMenuDividerProps };

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/index.js

@@ -0,0 +1 @@
+export{ResponsiveVerticalMenuDivider}from"./responsive-vertical-menu-divider.component.js";

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export declare const ResponsiveVerticalMenuDivider: (props: MarginProps) => React.JSX.Element;
+export default ResponsiveVerticalMenuDivider;

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import"react";import{StyledResponsiveVerticalMenuDivider as t,StyledHr as r}from"./responsive-vertical-menu-divider.style.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import n from"../../../../style/utils/filter-styled-system-margin-props.js";import{useDepth as o}from"../__internal__/depth.context.js";import{useResponsiveVerticalMenu as i}from"../responsive-vertical-menu.context.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=c=>{const p=o(),{responsiveMode:l}=i();return e(t,(a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){s(e,t,r[t])}))}return e}({"data-component":"responsive-vertical-menu-divider","data-element":"responsive-vertical-menu-divider","data-role":"responsive-vertical-menu-divider",depth:p,responsive:l,"aria-hidden":"true"},n(c)),m=null!=(m={children:e(r,{})})?m:{},Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(m)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(m)).forEach((function(e){Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(m,e))})),a));var a,m};export{c as ResponsiveVerticalMenuDivider,c as default};