@iress-oss/ids-components 6.0.0-alpha.6 → 6.0.0-alpha.8

package/dist/patterns/Shadow/Shadow.js

@@ -1,7 +1,7 @@
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as b, useRef as _, useState as y, useEffect as g, useImperativeHandle as h } from "react";
 import { createPortal as f } from "react-dom";
-import { i as w, I as k } from "../../Provider-BPeo5YfI.js";
+import { i as w, I as k } from "../../Provider-CDIbqQK0.js";
 const z = `@layer reset, base, tokens, recipes, utilities;
 
 @layer reset{
@@ -869,6 +869,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     .button__root:is(:focus-visible, [data-focus-visible]) {
       outline: 2px solid transparent;
       outline-offset: 2px;
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
@@ -1027,12 +1028,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     transition: none;
 }
 
-  .button__root--inButtonGroup_true::after {
-    border-radius: var(--radii-radius\\.system\\.button);
-    transform: translateZ(-1px) scale(1);
-    transform-origin: center;
-}
-
   .button__root--loading_true {
     cursor: not-allowed;
     filter: saturate(0.25);
@@ -1443,6 +1438,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
     .layerStyle_elevation\\.focus {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
@@ -1551,38 +1547,52 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
     .group:focus-within .groupFocusWithin\\:layerStyle_elevation\\.focus {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .focusWithin\\:layerStyle_elevation\\.focus:focus-within {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .\\[\\&\\:focus-within\\]\\:layerStyle_elevation\\.focus:focus-within {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .focus\\:layerStyle_elevation\\.focus:is(:focus, [data-focus]) {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .\\[\\&\\:has\\(input\\:focus\\,_textarea\\:focus\\)\\]\\:layerStyle_elevation\\.focus:has(input:focus, textarea:focus) {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .focusVisible\\:layerStyle_elevation\\.focus:is(:focus-visible, [data-focus-visible]) {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
+      box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
+}
+
+    .\\[\\&\\:has\\(select\\:focus\\)\\]\\:layerStyle_elevation\\.focus:has(select:focus) {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .focusVisibleWebkitSliderThumb\\:layerStyle_elevation\\.focus:focus-visible::-webkit-slider-thumb {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .focusVisibleMozRangeThumb\\:layerStyle_elevation\\.focus:focus-visible::-moz-range-thumb {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .\\[\\&\\:has\\(\\[role\\=\\"switch\\"\\]\\:focus-visible\\)\\]\\:layerStyle_elevation\\.focus:has([role="switch"]:focus-visible) {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
@@ -1592,18 +1602,22 @@ const z = `@layer reset, base, tokens, recipes, utilities;
 }
 
     .\\[\\&\\:focus\\]\\:layerStyle_elevation\\.focus:focus {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .active\\:layerStyle_elevation\\.focus:is(:active, [data-active]) {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .focusVisible\\:before\\:layerStyle_elevation\\.focus:is(:focus-visible, [data-focus-visible])::before {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
     .focus\\:\\[\\&_\\+_label\\]\\:after\\:layerStyle_elevation\\.focus:is(:focus, [data-focus]) + label::after {
+      border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
       box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
 
@@ -1621,6 +1635,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
         box-shadow: var(--iress-elevation-overflow-shadow, inset 7px 0px 5px #091E4215);
 }
       .xs\\:layerStyle_elevation\\.focus {
+        border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
         box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
       .xs\\:layerStyle_elevation\\.focusCompact {
@@ -1739,6 +1754,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
         box-shadow: var(--iress-elevation-overflow-shadow, inset 7px 0px 5px #091E4215);
 }
       .sm\\:layerStyle_elevation\\.focus {
+        border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
         box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
       .sm\\:layerStyle_elevation\\.focusCompact {
@@ -1857,6 +1873,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
         box-shadow: var(--iress-elevation-overflow-shadow, inset 7px 0px 5px #091E4215);
 }
       .md\\:layerStyle_elevation\\.focus {
+        border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
         box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
       .md\\:layerStyle_elevation\\.focusCompact {
@@ -1975,6 +1992,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
         box-shadow: var(--iress-elevation-overflow-shadow, inset 7px 0px 5px #091E4215);
 }
       .lg\\:layerStyle_elevation\\.focus {
+        border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
         box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
       .lg\\:layerStyle_elevation\\.focusCompact {
@@ -2093,6 +2111,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
         box-shadow: var(--iress-elevation-overflow-shadow, inset 7px 0px 5px #091E4215);
 }
       .xl\\:layerStyle_elevation\\.focus {
+        border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
         box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
       .xl\\:layerStyle_elevation\\.focusCompact {
@@ -2211,6 +2230,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
         box-shadow: var(--iress-elevation-overflow-shadow, inset 7px 0px 5px #091E4215);
 }
       .xxl\\:layerStyle_elevation\\.focus {
+        border-color: var(--iress-elevation-focus-border-color, #0066FF) !important;
         box-shadow: var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF);
 }
       .xxl\\:layerStyle_elevation\\.focusCompact {
@@ -2412,6 +2432,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     padding: var(--spacing-spacing\\.3);
 }
 
+  .font_inherit {
+    font: inherit;
+}
+
   .bg_\\[currentColor\\] {
     background: currentColor;
 }
@@ -3847,10 +3871,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     position: relative;
 }
 
-  .bx-sh_none {
-    box-shadow: none;
-}
-
   .d_contents {
     display: contents;
 }
@@ -4370,6 +4390,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     opacity: 0.5;
 }
 
+  .bx-sh_none {
+    box-shadow: none;
+}
+
   .rg_spacing\\.1 {
     row-gap: var(--spacing-spacing\\.1);
 }
@@ -4594,8 +4618,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     background-color: var(--colors-transparent);
 }
 
-  .ms_spacing\\.1 {
-    margin-inline-start: var(--spacing-spacing\\.1);
+  .ms_\\[calc\\(\\{spacing\\.spacing\\.1\\}_\\*_0\\.5\\)\\] {
+    margin-inline-start: calc(var(--spacing-spacing\\.1) * 0.5);
 }
 
   .me_spacing\\.1 {
@@ -4606,6 +4630,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     line-height: 1.5rem;
 }
 
+  .ms_spacing\\.1 {
+    margin-inline-start: var(--spacing-spacing\\.1);
+}
+
   .mbe_spacing\\.1 {
     margin-block-end: var(--spacing-spacing\\.1);
 }
@@ -5354,16 +5382,16 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     padding-top: var(--spacing-spacing\\.3);
 }
 
-  .w_\\[calc\\(1\\.5_\\*_\\{sizes\\.typography\\.base\\}\\)\\] {
-    width: calc(1.5 * var(--sizes-typography\\.base));
+  .w_\\[1\\.4em\\] {
+    width: 1.4em;
 }
 
-  .min-w_\\[calc\\(1\\.5_\\*_\\{sizes\\.typography\\.base\\}\\)\\] {
-    min-width: calc(1.5 * var(--sizes-typography\\.base));
+  .min-w_\\[1\\.4em\\] {
+    min-width: 1.4em;
 }
 
-  .h_\\[calc\\(1\\.5_\\*_\\{sizes\\.typography\\.base\\}\\)\\] {
-    height: calc(1.5 * var(--sizes-typography\\.base));
+  .h_\\[1\\.4em\\] {
+    height: 1.4em;
 }
 
   .w_\\[calc\\(1\\.25_\\*_\\{sizes\\.typography\\.base\\}\\)\\] {
@@ -5538,6 +5566,14 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     max-height: calc(100vh - (var(--spacing-spacing\\.7) * 2));
 }
 
+  .w_overlay\\.sm {
+    width: var(--sizes-overlay\\.sm);
+}
+
+  .w_overlay\\.lg {
+    width: var(--sizes-overlay\\.lg);
+}
+
   .top_spacing\\.2 {
     top: var(--spacing-spacing\\.2);
 }
@@ -5590,14 +5626,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     width: 1px;
 }
 
-  .w_\\[calc\\(1\\.3_\\*_1rem\\)\\] {
-    width: calc(1.3 * 1rem);
-}
-
-  .h_\\[calc\\(1\\.3_\\*_1rem\\)\\] {
-    height: calc(1.3 * 1rem);
-}
-
   .min-h_input\\.height {
     min-height: var(--sizes-input\\.height);
 }
@@ -5686,10 +5714,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     margin-top: var(--spacing-spacing\\.2);
 }
 
-  .w_overlay\\.sm {
-    width: var(--sizes-overlay\\.sm);
-}
-
   .min-w_slider\\.thumb {
     min-width: var(--sizes-slider\\.thumb);
 }
@@ -6842,10 +6866,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     width: var(--sizes-container\\.xxl);
 }
 
-  .w_overlay\\.lg {
-    width: var(--sizes-overlay\\.lg);
-}
-
   .w_chevron\\.select {
     width: var(--sizes-chevron\\.select);
 }
@@ -7869,19 +7889,11 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     min-height: calc(var(--sizes-input\\.height) - var(--spacing-xs) * 2.5);
 }
 
-  .focusWithin\\:bd-c_colour\\.primary\\.fill:focus-within {
-    border-color: var(--colors-colour\\.primary\\.fill);
-}
-
   .focusWithin\\:ring_\\[none\\]:focus-within {
     outline: 2px solid transparent;
     outline-offset: 2px;
 }
 
-  .\\[\\&\\:focus-within\\]\\:bd-c_colour\\.primary\\.fill:focus-within {
-    border-color: var(--colors-colour\\.primary\\.fill);
-}
-
   .\\[\\&\\:focus-within\\]\\:ring_\\[none\\]:focus-within {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -7913,14 +7925,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     outline-offset: 2px;
 }
 
-  .\\[\\&\\:has\\(input\\:focus\\,_textarea\\:focus\\)\\]\\:bd-c_colour\\.primary\\.fill:has(input:focus, textarea:focus) {
-    border-color: var(--colors-colour\\.primary\\.fill);
-}
-
-  .\\[\\&\\:focus\\]\\:bd-c_colour\\.primary\\.fill:focus {
-    border-color: var(--colors-colour\\.primary\\.fill);
-}
-
   .\\[\\&\\:focus\\]\\:ring_\\[none\\]:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -8066,10 +8070,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     color: var(--colors-colour\\.neutral\\.80);
 }
 
-  .active\\:bd-c_colour\\.primary\\.fill:is(:active, [data-active]) {
-    border-color: var(--colors-colour\\.primary\\.fill);
-}
-
   .active\\:ring_\\[none\\]:is(:active, [data-active]) {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -21631,8 +21631,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
         if (i.current.shadowRoot)
           m(i.current.shadowRoot);
         else {
-          const n = i.current.attachShadow({ mode: "open" }), s = document.createElement("style"), r = document.querySelector("meta[name='csp-nonce']")?.getAttribute("content");
-          r && s.setAttribute("nonce", r), s.textContent = z, n.appendChild(s);
+          const n = i.current.attachShadow({ mode: "open" }), r = document.createElement("style"), s = document.querySelector("meta[name='csp-nonce']")?.getAttribute("content");
+          s && r.setAttribute("nonce", s), r.textContent = z, n.appendChild(r);
           const c = document.createElement("div");
           n.appendChild(c), l.current = c, m(n);
         }
@@ -21640,8 +21640,8 @@ const z = `@layer reset, base, tokens, recipes, utilities;
       e.forEach((n) => {
         if (document.head.querySelector(`link[href="${n}"]`))
           return;
-        const s = document.createElement("link");
-        s.href = n, s.rel = "stylesheet", document.head.appendChild(s);
+        const r = document.createElement("link");
+        r.href = n, r.rel = "stylesheet", document.head.appendChild(r);
       });
     }, [e]), g(() => {
       if (o || !a) return;
@@ -21651,15 +21651,15 @@ const z = `@layer reset, base, tokens, recipes, utilities;
       a && t.forEach((n) => {
         if (a.querySelector(`link[href="${n}"]`))
           return;
-        const s = document.createElement("link");
-        s.href = n, s.rel = "stylesheet", a.appendChild(s);
+        const r = document.createElement("link");
+        r.href = n, r.rel = "stylesheet", a.appendChild(r);
       });
     }, [a, t]), g(() => {
-      a && Object.entries(p).forEach(([n, s]) => {
+      a && Object.entries(p).forEach(([n, r]) => {
         if (a.querySelector(`style[id="${n}"]`))
           return;
-        const r = document.createElement("style"), c = document.querySelector("meta[name='csp-nonce']")?.getAttribute("content");
-        c && r.setAttribute("nonce", c), r.setAttribute("id", n), r.textContent = s, a.appendChild(r);
+        const s = document.createElement("style"), c = document.querySelector("meta[name='csp-nonce']")?.getAttribute("content");
+        c && s.setAttribute("nonce", c), s.setAttribute("id", n), s.textContent = r, a.appendChild(s);
       });
     }, [a, p]), h(
       u,

package/dist/src/components/Modal/Modal.d.ts

@@ -64,6 +64,13 @@ export interface IressModalProps extends IressStyledProps {
      * When set to `true` the modal will be visible. Use for controlled modals.
      */
     show?: boolean;
+    /**
+     * Size of the modal
+     * - `sm`: Small modals communicate the outcome of an irreversible action. They should be concise and straightforward, containing a single action and, in some cases, a single input field.
+     * - `md`: Medium modals provide optional supporting information to help users understand the context of a word or screen. They may contain a single action and, in some cases, a larger input such as a textarea.
+     * - `lg`: Large modals are used for more complex tasks that require multiple steps or a lot of information as well as media such as video and PDF documents. They can contain multiple actions, inputs, and supporting information.
+     */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * When set to `true`, the modal will act like a static element when open.
      * This means it will not lock scroll or focus within the modal.
@@ -71,4 +78,4 @@ export interface IressModalProps extends IressStyledProps {
      */
     static?: boolean;
 }
-export declare const IressModal: ({ children, className, closeText, container, "data-testid": dataTestid, defaultShow, disableBackdropClick, fixedFooter, footer, heading: headingProp, noCloseButton, onEntered, onExited, onShowChange, onStatus, onTransitionEnd, show, static: isStatic, style, ...restProps }: IressModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const IressModal: ({ children, className, closeText, container, "data-testid": dataTestid, defaultShow, disableBackdropClick, fixedFooter, footer, heading: headingProp, noCloseButton, onEntered, onExited, onShowChange, onStatus, onTransitionEnd, show, size, static: isStatic, style, ...restProps }: IressModalProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/Modal/Modal.styles.d.ts

@@ -32,6 +32,29 @@ export declare const modal: import('../../styled-system/types').SlotRecipeRuntim
             };
         };
     };
+    /**
+     * Size of the modal
+     * - `sm`: Small modals communicate the outcome of an irreversible action. They should be concise and straightforward, containing a single action and, in some cases, a single input field.
+     * - `md`: Medium modals provide optional supporting information to help users understand the context of a word or screen. They may contain a single action and, in some cases, a larger input such as a textarea.
+     * - `lg`: Large modals are used for more complex tasks that require multiple steps or a lot of information as well as media such as video and PDF documents. They can contain multiple actions, inputs, and supporting information.
+     */
+    size: {
+        sm: {
+            modal: {
+                width: "overlay.sm";
+            };
+        };
+        md: {
+            modal: {
+                width: "overlay.md";
+            };
+        };
+        lg: {
+            modal: {
+                width: "overlay.lg";
+            };
+        };
+    };
     /**
      * The state of the modal.
      */

package/dist/src/components/Radio/Radio.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const radio: import('../../styled-system/types').SlotRecipeRuntimeFn<"input" | "label" | "root" | "checkboxMark" | "radioMark" | "checkedRadioMark", {
+export declare const radio: import('../../styled-system/types').SlotRecipeRuntimeFn<"input" | "label" | "root" | "checkboxMark" | "labelContent" | "radioMark" | "checkedRadioMark", {
     hiddenControl: {
         true: {
             label: {

package/dist/src/enums.d.ts

@@ -28,6 +28,7 @@ export declare enum GlobalCSSClass {
     Input = "ids-input",
     InputCurrency = "ids-input--currency",
     InputPopover = "ids-popover--input",
+    Label = "ids-label",
     Link = "ids-link",
     Menu = "ids-menu",
     MenuHeading = "ids-text--menu-heading",
@@ -77,7 +78,7 @@ export declare enum GlobalCSSClass {
     Tooltip = "ids-tooltip",
     ValidationLink = "ids-validation-message--link",
     ValidationMessage = "ids-validation-message",
-    ValidationSummary = "ids-validation-sumary"
+    ValidationSummary = "ids-validation-summary"
 }
 /** @deprecated Breakpoint enum is now deprecated and will be removed in a future version. Please use the Breakpoints type instead. **/
 export declare enum Breakpoint {