@ukic/canary-web-components 2.0.0-canary.20 → 2.0.0-canary.22

package/hydrate/index.js

@@ -7643,15 +7643,15 @@ const IC_DEVICE_SIZES = {
     L: 1200,
     XL: 99999,
 };
-const IC_BLOCK_COLOR_COMPONENTS = [
+const IC_BLOCK_COLOR_COMPONENTS$1 = [
     "ic-hero",
     "ic-top-navigation",
     "ic-footer",
     "ic-side-navigation",
     "ic-alert",
 ];
-const IC_FIXED_COLOR_COMPONENTS = ["ic-alert"];
-const IC_BLOCK_COLOR_EXCEPTIONS = {
+const IC_FIXED_COLOR_COMPONENTS$1 = ["ic-alert"];
+const IC_BLOCK_COLOR_EXCEPTIONS$1 = {
     "ic-alert": ["ic-link"],
 };
 /* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours
@@ -7692,10 +7692,10 @@ const debounceEvent = (event, wait) => {
     const original = event._original || event;
     return {
         _original: event,
-        emit: debounce$2(original.emit.bind(original), wait),
+        emit: debounce$3(original.emit.bind(original), wait),
     };
 };
-const debounce$2 = (func, wait = 0) => {
+const debounce$3 = (func, wait = 0) => {
     let timer;
     return (...args) => {
         clearTimeout(timer);
@@ -7797,19 +7797,19 @@ const getInputDescribedByText$1 = (inputId, helperText, validationText) => `${he
  * ""
  * @returns IcThemeForeground depending on the context
  */
-const getThemeFromContext = (el, themeFromEvent = null) => {
+const getThemeFromContext$1 = (el, themeFromEvent = null) => {
     var _a;
     const parentElement = el.parentElement || el.getRootNode().host.parentElement;
-    const blockColorParent = parentElement.closest(IC_BLOCK_COLOR_COMPONENTS.join(","));
+    const blockColorParent = parentElement.closest(IC_BLOCK_COLOR_COMPONENTS$1.join(","));
     // If within a block color component
     if (blockColorParent !== null) {
         const parentTag = blockColorParent.tagName.toLowerCase();
         const currentTag = el.tagName.toLowerCase();
-        if ((_a = IC_BLOCK_COLOR_EXCEPTIONS[parentTag]) === null || _a === void 0 ? void 0 : _a.includes(currentTag)) {
+        if ((_a = IC_BLOCK_COLOR_EXCEPTIONS$1[parentTag]) === null || _a === void 0 ? void 0 : _a.includes(currentTag)) {
             return IcThemeForegroundEnum$1.Default;
         }
         else if (themeFromEvent !== null &&
-            !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)) {
+            !IC_FIXED_COLOR_COMPONENTS$1.includes(parentTag)) {
             return themeFromEvent;
         }
         else if (blockColorParent.classList.contains(IcThemeForegroundEnum$1.Dark)) {
@@ -7844,7 +7844,7 @@ const handleHiddenFormButtonClick = (form, button) => {
 };
 const isEmptyString$1 = (value) => value ? value.trim().length === 0 : true;
 // A helper function that checks if a prop has been defined
-const isPropDefined = (prop) => prop !== undefined ? prop : null;
+const isPropDefined$1 = (prop) => prop !== undefined ? prop : null;
 /**
  * Extracts the label using the value from an object. Requires the object to have a label and value property.
  * @param value - value from object
@@ -8052,7 +8052,7 @@ const removeFormResetListener$1 = (el, callbackFn) => {
     var _a;
     (_a = el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.removeEventListener("reset", callbackFn);
 };
-const pxToRem = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
+const pxToRem$1 = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
 const removeDisabledFalse$1 = (disabled, element) => {
     if (!disabled) {
         element.removeAttribute("disabled");
@@ -8067,10 +8067,13 @@ const convertToRGBA = (color) => {
             : null;
 };
 const capitalize$1 = (text) => text.charAt(0).toUpperCase() + text.slice(1);
-const checkSlotInChildMutations = (addedNodes, removedNodes, slotName) => {
-    const hasSlot = (nodeList) => Array.from(nodeList).some((node) => node.slot === slotName);
+const checkSlotInChildMutations$1 = (addedNodes, removedNodes, slotName) => {
+    const hasSlot = (nodeList) => Array.from(nodeList).some((node) => Array.isArray(slotName)
+        ? slotName.some((name) => node.slot === name)
+        : node.slot === slotName);
     return hasSlot(addedNodes) || hasSlot(removedNodes);
 };
+const isElInAGGrid = (el) => !!el.closest(".ag-cell") && !!el.closest(".ag-root");
 
 var chevronIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>
@@ -8353,10 +8356,16 @@ class Alert {
         registerInstance(this, hostRef);
         this.dismiss = createEvent(this, "dismiss", 7);
         this.icDismiss = createEvent(this, "icDismiss", 7);
+        this.hostMutationObserver = null;
         this.dismissAction = () => {
             this.dismiss.emit();
             this.icDismiss.emit();
         };
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations$1(addedNodes, removedNodes, "action")
+                : false)) ;
+        };
         this.alertTitleWrap = false;
         this.visible = true;
         this.announced = true;
@@ -8366,8 +8375,16 @@ class Alert {
         this.titleAbove = false;
         this.variant = "neutral";
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentDidLoad() {
         this.alertTitleShouldWrap();
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
     }
     handleClick() {
         this.visible = !this.visible;
@@ -8643,7 +8660,7 @@ class Badge {
                 }
             }
         };
-        this.isAccessibleLabelDefined = () => isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
+        this.isAccessibleLabelDefined = () => isPropDefined$1(this.accessibleLabel) && this.accessibleLabel !== null;
         this.accessibleLabel = undefined;
         this.customColor = null;
         this.maxNumber = undefined;
@@ -8747,7 +8764,7 @@ class Breadcrumb {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.renderDefaultBreadcrumb = (current, pageTitle, describedById, href) => {
-            const hasPageTitle = pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== "";
+            const hasPageTitle = pageTitle !== null && isPropDefined$1(pageTitle) && pageTitle !== "";
             if (current && hasPageTitle) {
                 return (hAsync("span", { class: {
                         "current-page-container": current,
@@ -8789,8 +8806,8 @@ class Breadcrumb {
     render() {
         const { current, href, pageTitle } = this;
         const describedById = `${pageTitle && pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
-        const hasPageTitle = pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== "";
-        const hasHref = href !== null && isPropDefined(href) && href !== "";
+        const hasPageTitle = pageTitle !== null && isPropDefined$1(pageTitle) && pageTitle !== "";
+        const hasHref = href !== null && isPropDefined$1(href) && href !== "";
         return (hAsync(Host, { class: {
                 back: this.showBackIcon,
             }, "aria-current": current && "page", role: "listitem" }, hAsync("div", { class: "breadcrumb" }, hAsync("span", { innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), this.showBackIcon && describedById && (hAsync("span", { id: describedById, class: "hide" }, `Back to ${pageTitle}`)), hasPageTitle && hasHref ? (this.renderDefaultBreadcrumb(current, pageTitle, describedById, href)) : (hAsync("slot", null)))));
@@ -9029,7 +9046,7 @@ class BreadcrumbGroup {
     }; }
 }
 
-var arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+var arrowDropdown$1 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>
 </svg>`;
 
@@ -9255,7 +9272,7 @@ class Button {
         return !!this.routerSlot;
     }
     updateTheme(newTheme = null) {
-        const foregroundColor = getThemeFromContext(this.el, newTheme);
+        const foregroundColor = getThemeFromContext$1(this.el, newTheme);
         if (foregroundColor !== IcThemeForegroundEnum$1.Default) {
             this.appearance = foregroundColor;
         }
@@ -9312,7 +9329,7 @@ class Button {
                 this.variant !== "destructive" && (hAsync("span", { class: {
                     ["arrow-dropdown"]: !this.dropdownExpanded,
                     ["dropdown-expanded"]: this.dropdownExpanded,
-                }, innerHTML: arrowDropdown }))));
+                }, innerHTML: arrowDropdown$1 }))));
         };
         return (hAsync(Host, { class: {
                 ["disabled"]: this.disabled && !this.loading,
@@ -9400,9 +9417,10 @@ const icCardCss = "/*!@html*/html.sc-ic-card{line-height:1.15;-webkit-text-size-
  * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.
  * @slot badge - Badge component overlaying the top right of the card.
  */
-class Card {
+class Card$1 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.hostMutationObserver = null;
         this.parentFocussed = () => {
             this.isFocussed = true;
         };
@@ -9412,6 +9430,21 @@ class Card {
         this.toggleExpanded = () => {
             this.areaExpanded = !this.areaExpanded;
         };
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations$1(addedNodes, removedNodes, [
+                    "message",
+                    "adornment",
+                    "expanded-content",
+                    "image-top",
+                    "image-mid",
+                    "icon",
+                    "interaction-button",
+                    "badge",
+                    "interaction-controls",
+                ])
+                : false)) ;
+        };
         this.appearance = "default";
         this.areaExpanded = false;
         this.isFocussed = false;
@@ -9431,10 +9464,12 @@ class Card {
         this.target = undefined;
     }
     disconnectedCallback() {
+        var _a;
         if (this.parentIsAnchorTag) {
             this.parentEl.removeEventListener("focus", this.parentFocussed);
             this.parentEl.removeEventListener("blur", this.parentBlurred);
         }
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
         this.parentEl = this.el.parentElement;
@@ -9451,6 +9486,10 @@ class Card {
         !isSlotUsed$1(this.el, "heading") &&
             onComponentRequiredPropUndefined$1([{ prop: this.heading, propName: "heading" }], "Card");
         this.updateTheme();
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
     }
     handleHostClick(event) {
         if (this.disabled) {
@@ -9473,7 +9512,7 @@ class Card {
         }
     }
     updateTheme(newTheme = null) {
-        const foregroundColor = getThemeFromContext(this.el, newTheme || null);
+        const foregroundColor = getThemeFromContext$1(this.el, newTheme || null);
         if (foregroundColor !== IcThemeForegroundEnum$1.Default) {
             this.appearance = foregroundColor;
         }
@@ -9539,871 +9578,1085 @@ class Card {
     }; }
 }
 
-const icCheckboxCss = "/*!@html*/html.sc-ic-checkbox{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-checkbox{margin:0}/*!@main*/main.sc-ic-checkbox{display:block}/*!@h1*/h1.sc-ic-checkbox{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-checkbox{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-checkbox{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-checkbox{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-checkbox{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-checkbox,strong.sc-ic-checkbox{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-checkbox,kbd.sc-ic-checkbox,samp.sc-ic-checkbox{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-checkbox{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-checkbox,sup.sc-ic-checkbox{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-checkbox{bottom:-0.25em}/*!@sup*/sup.sc-ic-checkbox{top:-0.5em}/*!@img*/img.sc-ic-checkbox{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-checkbox,input.sc-ic-checkbox,optgroup.sc-ic-checkbox,select.sc-ic-checkbox,textarea.sc-ic-checkbox{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-checkbox,input.sc-ic-checkbox{overflow:visible}/*!@button,\nselect*/button.sc-ic-checkbox,select.sc-ic-checkbox{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-checkbox,[type=\"button\"].sc-ic-checkbox,[type=\"reset\"].sc-ic-checkbox,[type=\"submit\"].sc-ic-checkbox{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-checkbox::-moz-focus-inner,[type=\"button\"].sc-ic-checkbox::-moz-focus-inner,[type=\"reset\"].sc-ic-checkbox::-moz-focus-inner,[type=\"submit\"].sc-ic-checkbox::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-checkbox:-moz-focusring,[type=\"button\"].sc-ic-checkbox:-moz-focusring,[type=\"reset\"].sc-ic-checkbox:-moz-focusring,[type=\"submit\"].sc-ic-checkbox:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-checkbox{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-checkbox{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-checkbox{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-checkbox{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-checkbox,[type=\"radio\"].sc-ic-checkbox{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-checkbox::-webkit-inner-spin-button,[type=\"number\"].sc-ic-checkbox::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-checkbox{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-checkbox::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-checkbox::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-checkbox{display:block}/*!@summary*/summary.sc-ic-checkbox{display:list-item}/*!@template*/template.sc-ic-checkbox{display:none}/*!@[hidden]*/[hidden].sc-ic-checkbox{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-checkbox,body.sc-ic-checkbox,div.sc-ic-checkbox,span.sc-ic-checkbox,applet.sc-ic-checkbox,object.sc-ic-checkbox,iframe.sc-ic-checkbox,h1.sc-ic-checkbox,h2.sc-ic-checkbox,h3.sc-ic-checkbox,h4.sc-ic-checkbox,h5.sc-ic-checkbox,h6.sc-ic-checkbox,p.sc-ic-checkbox,blockquote.sc-ic-checkbox,pre.sc-ic-checkbox,a.sc-ic-checkbox,abbr.sc-ic-checkbox,acronym.sc-ic-checkbox,address.sc-ic-checkbox,big.sc-ic-checkbox,cite.sc-ic-checkbox,code.sc-ic-checkbox,del.sc-ic-checkbox,dfn.sc-ic-checkbox,em.sc-ic-checkbox,img.sc-ic-checkbox,ins.sc-ic-checkbox,kbd.sc-ic-checkbox,q.sc-ic-checkbox,s.sc-ic-checkbox,samp.sc-ic-checkbox,small.sc-ic-checkbox,strike.sc-ic-checkbox,strong.sc-ic-checkbox,sub.sc-ic-checkbox,sup.sc-ic-checkbox,tt.sc-ic-checkbox,var.sc-ic-checkbox,b.sc-ic-checkbox,u.sc-ic-checkbox,i.sc-ic-checkbox,center.sc-ic-checkbox,dl.sc-ic-checkbox,dt.sc-ic-checkbox,dd.sc-ic-checkbox,ol.sc-ic-checkbox,ul.sc-ic-checkbox,li.sc-ic-checkbox,fieldset.sc-ic-checkbox,form.sc-ic-checkbox,label.sc-ic-checkbox,legend.sc-ic-checkbox,table.sc-ic-checkbox,caption.sc-ic-checkbox,tbody.sc-ic-checkbox,tfoot.sc-ic-checkbox,thead.sc-ic-checkbox,tr.sc-ic-checkbox,th.sc-ic-checkbox,td.sc-ic-checkbox,article.sc-ic-checkbox,aside.sc-ic-checkbox,canvas.sc-ic-checkbox,details.sc-ic-checkbox,embed.sc-ic-checkbox,figure.sc-ic-checkbox,figcaption.sc-ic-checkbox,footer.sc-ic-checkbox,header.sc-ic-checkbox,hgroup.sc-ic-checkbox,menu.sc-ic-checkbox,nav.sc-ic-checkbox,output.sc-ic-checkbox,ruby.sc-ic-checkbox,section.sc-ic-checkbox,summary.sc-ic-checkbox,time.sc-ic-checkbox,mark.sc-ic-checkbox,audio.sc-ic-checkbox,video.sc-ic-checkbox{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.disabled)*/.disabled.sc-ic-checkbox-h{color:var(--ic-architectural-200);pointer-events:none}/*!@.container*/.container.sc-ic-checkbox{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}/*!@:host(.small) .container*/.small.sc-ic-checkbox-h .container.sc-ic-checkbox{margin-bottom:var(--ic-space-xxxs)}/*!@.checkbox*/.checkbox.sc-ic-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-architectural-white);border:var(--ic-border-width) solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}/*!@:host(.small) .checkbox,\n:host(.small) .container svg*/.small.sc-ic-checkbox-h .checkbox.sc-ic-checkbox,.small.sc-ic-checkbox-h .container.sc-ic-checkbox svg.sc-ic-checkbox{width:var(--ic-space-md);height:var(--ic-space-md)}/*!@:host(.large) .checkbox,\n:host(.large) .container svg*/.large.sc-ic-checkbox-h .checkbox.sc-ic-checkbox,.large.sc-ic-checkbox-h .container.sc-ic-checkbox svg.sc-ic-checkbox{width:var(--ic-space-xl);height:var(--ic-space-xl)}/*!@.checkbox:checked*/.checkbox.sc-ic-checkbox:checked{background-color:var(--ic-action-default);border:var(--ic-border-width) solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}/*!@.checkbox:checked:disabled*/.checkbox.sc-ic-checkbox:checked:disabled{background-color:var(--ic-architectural-200)}/*!@.checkbox:indeterminate,\n.checkbox.indeterminate:checked*/.checkbox.sc-ic-checkbox:indeterminate,.checkbox.indeterminate.sc-ic-checkbox:checked{background-color:var(--ic-architectural-white);border:0.125rem solid var(--ic-action-default)}/*!@.checkbox:checked:hover*/.checkbox.sc-ic-checkbox:checked:hover{background-color:var(--ic-action-default-hover)}/*!@.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover*/.checkbox.sc-ic-checkbox:indeterminate:hover,.checkbox.indeterminate.sc-ic-checkbox:checked:hover{background-color:var(--ic-action-default-bg-hover-no-alpha);border:0.125rem solid var(--ic-action-default-hover)}/*!@.checkbox:checked:active*/.checkbox.sc-ic-checkbox:checked:active{background-color:var(--ic-action-default-active)}/*!@.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active*/.checkbox.sc-ic-checkbox:indeterminate:active,.checkbox.indeterminate.sc-ic-checkbox:checked:active{background-color:var(--ic-action-default-bg-active-no-alpha);border:0.125rem solid var(--ic-action-default-active)}/*!@.checkbox:hover*/.checkbox.sc-ic-checkbox:hover{background-color:var(--ic-action-default-bg-hover-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-border-width) solid var(--ic-action-default-hover)}/*!@.checkbox:active*/.checkbox.sc-ic-checkbox:active{background-color:var(--ic-action-default-bg-active-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active);border:var(--ic-border-width) solid var(--ic-action-default-active)}/*!@.checkbox:focus*/.checkbox.sc-ic-checkbox:focus{box-shadow:var(--ic-border-focus)}/*!@.checkbox:disabled*/.checkbox.sc-ic-checkbox:disabled{border:var(--ic-border-width) dashed var(--ic-architectural-200)}/*!@.checkbox-label*/.checkbox-label.sc-ic-checkbox{padding-left:var(--ic-space-sm)}/*!@.checkbox-label:hover*/.checkbox-label.sc-ic-checkbox:hover{cursor:pointer}/*!@.checkmark*/.checkmark.sc-ic-checkbox{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}/*!@:host(.small) .checkmark*/.small.sc-ic-checkbox-h .checkmark.sc-ic-checkbox{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}/*!@:host(.large) .checkmark*/.large.sc-ic-checkbox-h .checkmark.sc-ic-checkbox{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}/*!@.indeterminate-symbol*/.indeterminate-symbol.sc-ic-checkbox{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-action-default);pointer-events:none;flex-shrink:0}/*!@:host(.small) .indeterminate-symbol*/.small.sc-ic-checkbox-h .indeterminate-symbol.sc-ic-checkbox{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}/*!@:host(.large) .indeterminate-symbol*/.large.sc-ic-checkbox-h .indeterminate-symbol.sc-ic-checkbox{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}/*!@.container:hover .indeterminate-symbol*/.container.sc-ic-checkbox:hover .indeterminate-symbol.sc-ic-checkbox{background-color:var(--ic-action-default-hover)}/*!@.container:active .indeterminate-symbol*/.container.sc-ic-checkbox:active .indeterminate-symbol.sc-ic-checkbox{background-color:var(--ic-action-default-active)}/*!@.additional-field-wrapper*/.additional-field-wrapper.sc-ic-checkbox{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}/*!@.branch-corner*/.branch-corner.sc-ic-checkbox{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default)}/*!@.dynamic-container*/.dynamic-container.sc-ic-checkbox{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}/*!@.dynamic-text*/.dynamic-text.sc-ic-checkbox{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){/*!@::slotted(ic-text-field)*/.sc-ic-checkbox-s>ic-text-field{--input-width:100%}}@media (forced-colors: active){/*!@.checkbox*/.checkbox.sc-ic-checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}/*!@.checkbox:checked*/.checkbox.sc-ic-checkbox:checked{transition:none}/*!@.checkbox:focus-visible*/.checkbox.sc-ic-checkbox:focus-visible{outline:0.125rem solid highlight}/*!@.checkbox:disabled:not(:checked)*/.checkbox.sc-ic-checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}/*!@.checkmark*/.checkmark.sc-ic-checkbox{fill:none}/*!@.indeterminate-symbol*/.indeterminate-symbol.sc-ic-checkbox{display:none}}";
+// Global ARIA attributes
+const IC_INHERITED_ARIA = [
+    "aria-atomic",
+    "aria-autocomplete",
+    "aria-busy",
+    "aria-controls",
+    "aria-current",
+    "aria-describedby",
+    "aria-description",
+    "aria-details",
+    "aria-disabled",
+    "aria-dropeffect",
+    "aria-errormessage",
+    "aria-expanded",
+    "aria-flowto",
+    "aria-grabbed",
+    "aria-haspopup",
+    "aria-hidden",
+    "aria-invalid",
+    "aria-keyshortcuts",
+    "aria-label",
+    "aria-labelledby",
+    "aria-live",
+    "aria-owns",
+    "aria-relevant",
+    "aria-roledescription",
+];
+const IC_BLOCK_COLOR_COMPONENTS = [
+    "ic-hero",
+    "ic-top-navigation",
+    "ic-footer",
+    "ic-side-navigation",
+    "ic-alert",
+];
+const IC_FIXED_COLOR_COMPONENTS = ["ic-alert"];
+const IC_BLOCK_COLOR_EXCEPTIONS = {
+    "ic-alert": ["ic-link"],
+};
+
+var IcInformationStatus;
+(function (IcInformationStatus) {
+    IcInformationStatus["Warning"] = "warning";
+    IcInformationStatus["Error"] = "error";
+    IcInformationStatus["Success"] = "success";
+})(IcInformationStatus || (IcInformationStatus = {}));
+var IcThemeForegroundEnum;
+(function (IcThemeForegroundEnum) {
+    IcThemeForegroundEnum["Default"] = "default";
+    IcThemeForegroundEnum["Dark"] = "dark";
+    IcThemeForegroundEnum["Light"] = "light";
+})(IcThemeForegroundEnum || (IcThemeForegroundEnum = {}));
+var IcDateInputMonths;
+(function (IcDateInputMonths) {
+    IcDateInputMonths[IcDateInputMonths["January"] = 0] = "January";
+    IcDateInputMonths[IcDateInputMonths["February"] = 1] = "February";
+    IcDateInputMonths[IcDateInputMonths["March"] = 2] = "March";
+    IcDateInputMonths[IcDateInputMonths["April"] = 3] = "April";
+    IcDateInputMonths[IcDateInputMonths["May"] = 4] = "May";
+    IcDateInputMonths[IcDateInputMonths["June"] = 5] = "June";
+    IcDateInputMonths[IcDateInputMonths["July"] = 6] = "July";
+    IcDateInputMonths[IcDateInputMonths["August"] = 7] = "August";
+    IcDateInputMonths[IcDateInputMonths["September"] = 8] = "September";
+    IcDateInputMonths[IcDateInputMonths["October"] = 9] = "October";
+    IcDateInputMonths[IcDateInputMonths["November"] = 10] = "November";
+    IcDateInputMonths[IcDateInputMonths["December"] = 11] = "December";
+})(IcDateInputMonths || (IcDateInputMonths = {}));
+var IcShortDayNames;
+(function (IcShortDayNames) {
+    IcShortDayNames[IcShortDayNames["Sun"] = 0] = "Sun";
+    IcShortDayNames[IcShortDayNames["Mon"] = 1] = "Mon";
+    IcShortDayNames[IcShortDayNames["Tue"] = 2] = "Tue";
+    IcShortDayNames[IcShortDayNames["Wed"] = 3] = "Wed";
+    IcShortDayNames[IcShortDayNames["Thu"] = 4] = "Thu";
+    IcShortDayNames[IcShortDayNames["Fri"] = 5] = "Fri";
+    IcShortDayNames[IcShortDayNames["Sat"] = 6] = "Sat";
+})(IcShortDayNames || (IcShortDayNames = {}));
+var IcDayNames;
+(function (IcDayNames) {
+    IcDayNames[IcDayNames["Sunday"] = 0] = "Sunday";
+    IcDayNames[IcDayNames["Monday"] = 1] = "Monday";
+    IcDayNames[IcDayNames["Tuesday"] = 2] = "Tuesday";
+    IcDayNames[IcDayNames["Wednesday"] = 3] = "Wednesday";
+    IcDayNames[IcDayNames["Thursday"] = 4] = "Thursday";
+    IcDayNames[IcDayNames["Friday"] = 5] = "Friday";
+    IcDayNames[IcDayNames["Saturday"] = 6] = "Saturday";
+})(IcDayNames || (IcDayNames = {}));
+var IcWeekDays;
+(function (IcWeekDays) {
+    IcWeekDays[IcWeekDays["Sunday"] = 0] = "Sunday";
+    IcWeekDays[IcWeekDays["Monday"] = 1] = "Monday";
+    IcWeekDays[IcWeekDays["Tuesday"] = 2] = "Tuesday";
+    IcWeekDays[IcWeekDays["Wednesday"] = 3] = "Wednesday";
+    IcWeekDays[IcWeekDays["Thursday"] = 4] = "Thursday";
+    IcWeekDays[IcWeekDays["Friday"] = 5] = "Friday";
+    IcWeekDays[IcWeekDays["Saturday"] = 6] = "Saturday";
+})(IcWeekDays || (IcWeekDays = {}));
 
 /**
- * @slot additional-field - Content to be displayed alongside a checkbox.
+ * converts an enum of strings into an array of strings
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-class Checkbox {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.checkboxChecked = createEvent(this, "checkboxChecked", 7);
-        this.icCheck = createEvent(this, "icCheck", 7);
-        this.handleClick = () => {
-            this.checked = !this.checked;
-            this.displayIndeterminate = this.nativeIndeterminateBehaviour
-                ? false
-                : this.indeterminate && this.checked;
-            this.icCheck.emit();
-            this.checkboxChecked.emit();
-        };
-        this.handleFormReset = () => {
-            this.checked = this.initiallyChecked;
-        };
-        this.additionalFieldDisplay = "static";
-        this.checked = false;
-        this.initiallyChecked = this.checked;
-        this.disabled = false;
-        this.dynamicText = "This selection requires additional answers";
-        this.form = undefined;
-        this.formaction = undefined;
-        this.formenctype = undefined;
-        this.formmethod = undefined;
-        this.formnovalidate = undefined;
-        this.formtarget = undefined;
-        this.groupLabel = undefined;
-        this.indeterminate = false;
-        this.displayIndeterminate = this.indeterminate;
-        this.label = undefined;
-        this.name = undefined;
-        this.nativeIndeterminateBehaviour = false;
-        this.size = undefined;
-        this.small = false;
-        this.value = undefined;
-        this.hideLabel = false;
-    }
-    watchIndeterminateHandler() {
-        this.displayIndeterminate = this.nativeIndeterminateBehaviour
-            ? this.indeterminate
-            : this.indeterminate && this.checked;
-    }
-    componentWillLoad() {
-        removeDisabledFalse$1(this.disabled, this.el);
-        addFormResetListener$1(this.el, this.handleFormReset);
-        const checkboxGroup = this.el.parentElement;
-        if (checkboxGroup) {
-            if (!this.name)
-                this.name = checkboxGroup.name;
-            this.groupLabel = checkboxGroup.label;
+const stringEnumToArray = (theEnum) => {
+    const arr = [];
+    Object.values(theEnum).forEach((val) => {
+        if (isNaN(Number(val))) {
+            const str = val;
+            arr.push(str);
         }
-    }
-    componentDidLoad() {
-        onComponentRequiredPropUndefined$1([
-            { prop: this.label, propName: "label" },
-            { prop: this.value, propName: "value" },
-        ], "Checkbox");
-    }
-    componentDidRender() {
-        if (this.additionalFieldDisplay === "static") {
-            const textfield = this.el.querySelector("ic-text-field");
-            if (!this.checked) {
-                textfield === null || textfield === void 0 ? void 0 : textfield.setAttribute("disabled", "");
-            }
-            else {
-                textfield === null || textfield === void 0 ? void 0 : textfield.removeAttribute("disabled");
+    });
+    return arr;
+};
+/**
+ * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
+ * to a variable that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+const inheritAttributes = (element, attributes = []) => {
+    const attributeObject = {};
+    attributes.forEach((attr) => {
+        if (element.hasAttribute(attr)) {
+            const value = element.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = element.getAttribute(attr);
             }
+            element.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
+};
+const debounce$2 = (func, wait = 0) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(func, wait, ...args);
+    };
+};
+/**
+ * This method is used to add a hidden input to a host element that contains
+ * a Shadow DOM. It does not add the input inside of the Shadow root which
+ * allows it to be picked up inside of forms. It should contain the same
+ * values as the host element.
+ *
+ * @param always Add a hidden input even if the container does not use Shadow
+ * @param container The element where the input will be added
+ * @param name The name of the input
+ * @param value The value of the input
+ * @param disabled If true, the input is disabled
+ */
+const renderHiddenInput = (always, container, name, value, disabled) => {
+    if (name !== undefined && (always || hasShadowDom(container))) {
+        const inputs = container.querySelectorAll("input.ic-input");
+        const inputEls = Array.from(inputs);
+        const filtered = inputEls.filter((el) => container === el.parentElement);
+        let input = filtered[0];
+        if (input === null || input === undefined) {
+            input = container.ownerDocument.createElement("input");
+            input.type = "hidden";
+            input.classList.add("ic-input");
+            container.appendChild(input);
+        }
+        input.disabled = disabled;
+        input.name = name;
+        if (value instanceof Date) {
+            input.value = value ? value.toISOString() : null;
+        }
+        else {
+            input.value = value || "";
         }
-        else if (this.additionalFieldContainer) {
-            this.additionalFieldContainer.style.display = !this.checked
-                ? "none"
-                : "flex";
-        }
-    }
-    disconnectedCallback() {
-        removeFormResetListener$1(this.el, this.handleFormReset);
-    }
-    /**
-     * Sets focus on the checkbox.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.el.shadowRoot.querySelector(".checkbox")) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    render() {
-        const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, formaction, formenctype, formmethod, formnovalidate, formtarget, displayIndeterminate, groupLabel, label, name, size, small, value, } = this;
-        const id = `ic-checkbox-${isPropDefined(label) || value}-${groupLabel}`.replace(/ /g, "-");
-        const parentElementSize = el.parentElement
-            .size;
-        checked
-            ? renderHiddenInput$1(true, el, name, checked && value, disabled)
-            : removeHiddenInput(el);
-        return (hAsync(Host, { class: {
-                disabled,
-                small,
-                [`${size || parentElementSize}`]: true,
-            } }, hAsync("div", { class: "container" }, displayIndeterminate && hAsync("div", { class: "indeterminate-symbol" }), !displayIndeterminate && checked && (hAsync("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, hAsync("title", null, "checkmark icon"), hAsync("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), hAsync("input", { role: "checkbox", class: {
-                checkbox: true,
-                checked,
-                indeterminate: displayIndeterminate,
-            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled ? true : null, checked: checked, indeterminate: displayIndeterminate, onClick: this.handleClick, form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget, "aria-label": this.hideLabel ? this.label : undefined }), !this.hideLabel && (hAsync("ic-typography", { class: "checkbox-label", variant: "body" }, hAsync("label", { htmlFor: id }, label)))), isSlotUsed$1(el, "additional-field") && (hAsync("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (hAsync("div", { class: "branch-corner" })), hAsync("div", null, additionalFieldDisplay === "dynamic" && (hAsync("ic-typography", { variant: "caption" }, hAsync("p", { class: "dynamic-text", "aria-live": "polite" }, dynamicText))), hAsync("div", { class: {
-                "additional-field-wrapper": additionalFieldDisplay === "static",
-            } }, hAsync("slot", { name: "additional-field" })))))));
     }
-    static get delegatesFocus() { return true; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "indeterminate": ["watchIndeterminateHandler"]
-    }; }
-    static get style() { return icCheckboxCss; }
-    static get cmpMeta() { return {
-        "$flags$": 25,
-        "$tagName$": "ic-checkbox",
-        "$members$": {
-            "additionalFieldDisplay": [513, "additional-field-display"],
-            "checked": [1540],
-            "disabled": [4],
-            "dynamicText": [1, "dynamic-text"],
-            "form": [1],
-            "formaction": [1],
-            "formenctype": [1],
-            "formmethod": [1],
-            "formnovalidate": [4],
-            "formtarget": [1],
-            "groupLabel": [1025, "group-label"],
-            "indeterminate": [4],
-            "label": [1],
-            "name": [1025],
-            "nativeIndeterminateBehaviour": [4, "native-indeterminate-behaviour"],
-            "size": [1],
-            "small": [4],
-            "value": [1],
-            "hideLabel": [4, "hide-label"],
-            "initiallyChecked": [32],
-            "displayIndeterminate": [32],
-            "setFocus": [64]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["additionalFieldDisplay", "additional-field-display"], ["checked", "checked"]]
-    }; }
-}
+};
+/**
+ * This method helps to understand the context in which a component exists,
+ * to assist with choosing appropriate foreground colours to use. For example,
+ * this method will help you use the 'white' version of a button if it's within
+ * a block colour element using white foreground text.
+ *
+ * This only works for components/elements passed via <slot> and not if they
+ * are part of an IC component.
+ *
+ * ""
+ * @returns IcThemeForeground depending on the context
+ */
+const getThemeFromContext = (el, themeFromEvent = null) => {
+    var _a;
+    const parentElement = el.parentElement || el.getRootNode().host.parentElement;
+    const blockColorParent = parentElement.closest(IC_BLOCK_COLOR_COMPONENTS.join(","));
+    // If within a block color component
+    if (blockColorParent !== null) {
+        const parentTag = blockColorParent.tagName.toLowerCase();
+        const currentTag = el.tagName.toLowerCase();
+        if ((_a = IC_BLOCK_COLOR_EXCEPTIONS[parentTag]) === null || _a === void 0 ? void 0 : _a.includes(currentTag)) {
+            return IcThemeForegroundEnum.Default;
+        }
+        else if (themeFromEvent !== null &&
+            !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)) {
+            return themeFromEvent;
+        }
+        else if (blockColorParent.classList.contains(IcThemeForegroundEnum.Dark)) {
+            return IcThemeForegroundEnum.Dark;
+        }
+        return IcThemeForegroundEnum.Light;
+    }
+    return IcThemeForegroundEnum.Default;
+};
+const isEmptyString = (value) => value ? value.trim().length === 0 : true;
+// A helper function that checks if a prop has been defined
+const isPropDefined = (prop) => prop !== undefined ? prop : null;
+const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
+const getSlot = (element, name) => {
+    if (element && element.querySelector) {
+        return element.querySelector(`[slot="${name}"]`);
+    }
+    return null;
+};
+const getSlotContent = (element, name) => {
+    const slot = getSlot(element, name);
+    if (slot) {
+        return getSlotElements(slot);
+    }
+    return null;
+};
+const getSlotElements = (slot) => {
+    const slotContent = slot.firstElementChild;
+    if (slotContent !== null) {
+        const elements = slotContent.assignedElements
+            ? slotContent.assignedElements()
+            : slotContent.childNodes;
+        return elements.length ? elements : slot.tagName ? [slot] : null;
+    }
+    else {
+        //check for single element
+        return slot === null ? null : [slot];
+    }
+};
+({
+    XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")),
+    S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")),
+    M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")),
+    L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")),
+    XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")),
+    UNDEFINED: 1200,
+});
+const isSlotUsed = (element, slotName) => Array.from(element.children).some((child) => child.getAttribute("slot") === slotName);
+const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
+const getInputHelperTextID = (id) => id + "-helper-text";
+const getInputValidationTextID = (id) => id + "-validation-text";
+const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
+const isMobileOrTablet = () => "maxTouchPoints" in navigator ? navigator.maxTouchPoints > 0 : false;
+/**
+ * Extracts the label using the value from an object. Requires the object to have a label and value property.
+ * @param value - value from object
+ * @param options - list of menu items
+ * @returns - label corresponding to value
+ */
+const getLabelFromValue = (value, options, valueField = "value", labelField = "label") => {
+    const ungroupedOptions = [];
+    if (options.length > 0 && options.map) {
+        options.map((option) => {
+            if (option.children) {
+                option.children.map((option) => ungroupedOptions.push(option));
+            }
+            else {
+                ungroupedOptions.push(option);
+            }
+        });
+        const matchingValue = ungroupedOptions.find((option) => option[valueField] === value);
+        if (matchingValue !== undefined)
+            return matchingValue[labelField];
+    }
+    return undefined;
+};
+/**
+ * Filters the options based on the search string.
+ * @param options - array of options
+ * @param includeDescriptions - determines whether option descriptions are included when filtering options
+ * @param searchString - string used to filter the options
+ * @param position - whether the search string matches the start of or anywhere in the options
+ * @returns filtered array of options
+ */
+const getFilteredMenuOptions = (options, includeDescriptions, searchString, position, labelField = "label") => options.filter((option) => {
+    var _a;
+    const label = option[labelField].toLowerCase();
+    const description = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const lowerSearchString = searchString.toLowerCase();
+    return position === "anywhere"
+        ? includeDescriptions
+            ? label.includes(lowerSearchString) ||
+                (description === null || description === void 0 ? void 0 : description.includes(lowerSearchString))
+            : label.includes(lowerSearchString)
+        : includeDescriptions
+            ? label.startsWith(lowerSearchString) ||
+                (description === null || description === void 0 ? void 0 : description.startsWith(lowerSearchString))
+            : label.startsWith(lowerSearchString);
+});
+/**
+ * Gets count of options where only group title "parent" options have been removed.
+ * Disabled options are included in the count.
+ * @param options - array of options
+ * @returns number of options not including group titles
+ */
+const getOptionsWithoutGroupTitlesCount = (options) => {
+    const optionsWithoutGroupTitles = [];
+    if (options.length > 0 && options.map) {
+        options.map((option) => {
+            if (option.children) {
+                option.children.map((option) => optionsWithoutGroupTitles.push(option));
+            }
+            else {
+                optionsWithoutGroupTitles.push(option);
+            }
+        });
+    }
+    return optionsWithoutGroupTitles.length;
+};
+const pxToRem = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
+const isNumeric = (value) => {
+    return /^-?\d+$/.test(value);
+};
+const hasValidationStatus = (status, disabled) => {
+    return status !== "" && !disabled;
+};
+const onComponentRequiredPropUndefined = (props, component) => {
+    for (let i = 0; i < props.length; i++) {
+        const { prop, propName } = props[i];
+        if (prop === null || prop === undefined) {
+            console.error(`No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(propName)}' (react) required`);
+        }
+    }
+};
+const kebabToCamelCase = (kebabCase) => {
+    kebabCase = kebabCase.toLowerCase();
+    const individualWords = kebabCase.split("-");
+    let camelCase = individualWords[0];
+    for (let i = 1; i < individualWords.length; i++) {
+        camelCase +=
+            individualWords[i].substring(0, 1).toUpperCase() +
+                individualWords[i].substring(1);
+    }
+    return camelCase;
+};
+const checkResizeObserver = (callbackFn) => {
+    if (typeof window !== "undefined" &&
+        typeof window.ResizeObserver !== "undefined") {
+        callbackFn();
+    }
+};
+const getForm = (el) => el.closest("FORM");
+const addFormResetListener = (el, callbackFn) => {
+    const form = getForm(el);
+    if (form !== null) {
+        form.addEventListener("reset", callbackFn);
+    }
+};
+const removeFormResetListener = (el, callbackFn) => {
+    const form = getForm(el);
+    if (form !== null) {
+        form.removeEventListener("reset", callbackFn);
+    }
+};
+const removeDisabledFalse = (disabled, element) => {
+    if (!disabled) {
+        element.removeAttribute("disabled");
+    }
+};
+const isMacDevice = () => {
+    return window.navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
+};
+const capitalize = (text) => {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+};
+const checkSlotInChildMutations = (addedNodes, removedNodes, slotName) => {
+    const hasSlot = (nodeList) => Array.from(nodeList).some((node) => node.slot === slotName);
+    return hasSlot(addedNodes) || hasSlot(removedNodes);
+};
 
-const icCheckboxGroupCss = "/*!@html*/html.sc-ic-checkbox-group{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-checkbox-group{margin:0}/*!@main*/main.sc-ic-checkbox-group{display:block}/*!@h1*/h1.sc-ic-checkbox-group{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-checkbox-group{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-checkbox-group{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-checkbox-group{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-checkbox-group{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-checkbox-group,strong.sc-ic-checkbox-group{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-checkbox-group,kbd.sc-ic-checkbox-group,samp.sc-ic-checkbox-group{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-checkbox-group{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-checkbox-group,sup.sc-ic-checkbox-group{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-checkbox-group{bottom:-0.25em}/*!@sup*/sup.sc-ic-checkbox-group{top:-0.5em}/*!@img*/img.sc-ic-checkbox-group{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-checkbox-group,input.sc-ic-checkbox-group,optgroup.sc-ic-checkbox-group,select.sc-ic-checkbox-group,textarea.sc-ic-checkbox-group{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-checkbox-group,input.sc-ic-checkbox-group{overflow:visible}/*!@button,\nselect*/button.sc-ic-checkbox-group,select.sc-ic-checkbox-group{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-checkbox-group,[type=\"button\"].sc-ic-checkbox-group,[type=\"reset\"].sc-ic-checkbox-group,[type=\"submit\"].sc-ic-checkbox-group{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-checkbox-group::-moz-focus-inner,[type=\"button\"].sc-ic-checkbox-group::-moz-focus-inner,[type=\"reset\"].sc-ic-checkbox-group::-moz-focus-inner,[type=\"submit\"].sc-ic-checkbox-group::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-checkbox-group:-moz-focusring,[type=\"button\"].sc-ic-checkbox-group:-moz-focusring,[type=\"reset\"].sc-ic-checkbox-group:-moz-focusring,[type=\"submit\"].sc-ic-checkbox-group:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-checkbox-group{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-checkbox-group{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-checkbox-group{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-checkbox-group{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-checkbox-group,[type=\"radio\"].sc-ic-checkbox-group{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-checkbox-group::-webkit-inner-spin-button,[type=\"number\"].sc-ic-checkbox-group::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-checkbox-group{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-checkbox-group::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-checkbox-group::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-checkbox-group{display:block}/*!@summary*/summary.sc-ic-checkbox-group{display:list-item}/*!@template*/template.sc-ic-checkbox-group{display:none}/*!@[hidden]*/[hidden].sc-ic-checkbox-group{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-checkbox-group,body.sc-ic-checkbox-group,div.sc-ic-checkbox-group,span.sc-ic-checkbox-group,applet.sc-ic-checkbox-group,object.sc-ic-checkbox-group,iframe.sc-ic-checkbox-group,h1.sc-ic-checkbox-group,h2.sc-ic-checkbox-group,h3.sc-ic-checkbox-group,h4.sc-ic-checkbox-group,h5.sc-ic-checkbox-group,h6.sc-ic-checkbox-group,p.sc-ic-checkbox-group,blockquote.sc-ic-checkbox-group,pre.sc-ic-checkbox-group,a.sc-ic-checkbox-group,abbr.sc-ic-checkbox-group,acronym.sc-ic-checkbox-group,address.sc-ic-checkbox-group,big.sc-ic-checkbox-group,cite.sc-ic-checkbox-group,code.sc-ic-checkbox-group,del.sc-ic-checkbox-group,dfn.sc-ic-checkbox-group,em.sc-ic-checkbox-group,img.sc-ic-checkbox-group,ins.sc-ic-checkbox-group,kbd.sc-ic-checkbox-group,q.sc-ic-checkbox-group,s.sc-ic-checkbox-group,samp.sc-ic-checkbox-group,small.sc-ic-checkbox-group,strike.sc-ic-checkbox-group,strong.sc-ic-checkbox-group,sub.sc-ic-checkbox-group,sup.sc-ic-checkbox-group,tt.sc-ic-checkbox-group,var.sc-ic-checkbox-group,b.sc-ic-checkbox-group,u.sc-ic-checkbox-group,i.sc-ic-checkbox-group,center.sc-ic-checkbox-group,dl.sc-ic-checkbox-group,dt.sc-ic-checkbox-group,dd.sc-ic-checkbox-group,ol.sc-ic-checkbox-group,ul.sc-ic-checkbox-group,li.sc-ic-checkbox-group,fieldset.sc-ic-checkbox-group,form.sc-ic-checkbox-group,label.sc-ic-checkbox-group,legend.sc-ic-checkbox-group,table.sc-ic-checkbox-group,caption.sc-ic-checkbox-group,tbody.sc-ic-checkbox-group,tfoot.sc-ic-checkbox-group,thead.sc-ic-checkbox-group,tr.sc-ic-checkbox-group,th.sc-ic-checkbox-group,td.sc-ic-checkbox-group,article.sc-ic-checkbox-group,aside.sc-ic-checkbox-group,canvas.sc-ic-checkbox-group,details.sc-ic-checkbox-group,embed.sc-ic-checkbox-group,figure.sc-ic-checkbox-group,figcaption.sc-ic-checkbox-group,footer.sc-ic-checkbox-group,header.sc-ic-checkbox-group,hgroup.sc-ic-checkbox-group,menu.sc-ic-checkbox-group,nav.sc-ic-checkbox-group,output.sc-ic-checkbox-group,ruby.sc-ic-checkbox-group,section.sc-ic-checkbox-group,summary.sc-ic-checkbox-group,time.sc-ic-checkbox-group,mark.sc-ic-checkbox-group,audio.sc-ic-checkbox-group,video.sc-ic-checkbox-group{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-checkbox-group-h{display:block}/*!@ic-input-label.error*/ic-input-label.error.sc-ic-checkbox-group{color:var(--ic-status-error)}/*!@ic-input-label ic-typography*/ic-input-label.sc-ic-checkbox-group ic-typography.sc-ic-checkbox-group{margin-bottom:var(--ic-space-sm)}/*!@:host(.small) ic-input-label ic-typography*/.small.sc-ic-checkbox-group-h ic-input-label.sc-ic-checkbox-group ic-typography.sc-ic-checkbox-group{margin-bottom:calc(var(--ic-space-sm) / 2)}/*!@ic-input-validation*/ic-input-validation.sc-ic-checkbox-group{margin-top:var(--ic-space-sm)}/*!@:host(.small) ic-input-validation*/.small.sc-ic-checkbox-group-h ic-input-validation.sc-ic-checkbox-group{margin-top:calc(var(--ic-space-sm) / 2)}/*!@.checkboxes-container*/.checkboxes-container.sc-ic-checkbox-group{margin-bottom:calc(-1 * var(--ic-space-xxs))}/*!@:host(.small) .checkboxes-container*/.small.sc-ic-checkbox-group-h .checkboxes-container.sc-ic-checkbox-group{margin-bottom:calc(-1 * var(--ic-space-xxxs))}/*!@.screen-reader-only-text*/.screen-reader-only-text.sc-ic-checkbox-group{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}";
+const icCardHorizontalCss = "/*!@html*/html.sc-ic-card-horizontal{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-card-horizontal{margin:0}/*!@main*/main.sc-ic-card-horizontal{display:block}/*!@h1*/h1.sc-ic-card-horizontal{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-card-horizontal{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-card-horizontal{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-card-horizontal{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-card-horizontal{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-card-horizontal,strong.sc-ic-card-horizontal{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-card-horizontal,kbd.sc-ic-card-horizontal,samp.sc-ic-card-horizontal{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-card-horizontal{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-card-horizontal,sup.sc-ic-card-horizontal{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-card-horizontal{bottom:-0.25em}/*!@sup*/sup.sc-ic-card-horizontal{top:-0.5em}/*!@img*/img.sc-ic-card-horizontal{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-card-horizontal,input.sc-ic-card-horizontal,optgroup.sc-ic-card-horizontal,select.sc-ic-card-horizontal,textarea.sc-ic-card-horizontal{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-card-horizontal,input.sc-ic-card-horizontal{overflow:visible}/*!@button,\nselect*/button.sc-ic-card-horizontal,select.sc-ic-card-horizontal{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-card-horizontal,[type=\"button\"].sc-ic-card-horizontal,[type=\"reset\"].sc-ic-card-horizontal,[type=\"submit\"].sc-ic-card-horizontal{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-card-horizontal::-moz-focus-inner,[type=\"button\"].sc-ic-card-horizontal::-moz-focus-inner,[type=\"reset\"].sc-ic-card-horizontal::-moz-focus-inner,[type=\"submit\"].sc-ic-card-horizontal::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-card-horizontal:-moz-focusring,[type=\"button\"].sc-ic-card-horizontal:-moz-focusring,[type=\"reset\"].sc-ic-card-horizontal:-moz-focusring,[type=\"submit\"].sc-ic-card-horizontal:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-card-horizontal{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-card-horizontal{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-card-horizontal{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-card-horizontal{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-card-horizontal,[type=\"radio\"].sc-ic-card-horizontal{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-card-horizontal::-webkit-inner-spin-button,[type=\"number\"].sc-ic-card-horizontal::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-card-horizontal{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-card-horizontal::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-card-horizontal::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-card-horizontal{display:block}/*!@summary*/summary.sc-ic-card-horizontal{display:list-item}/*!@template*/template.sc-ic-card-horizontal{display:none}/*!@[hidden]*/[hidden].sc-ic-card-horizontal{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-card-horizontal,body.sc-ic-card-horizontal,div.sc-ic-card-horizontal,span.sc-ic-card-horizontal,applet.sc-ic-card-horizontal,object.sc-ic-card-horizontal,iframe.sc-ic-card-horizontal,h1.sc-ic-card-horizontal,h2.sc-ic-card-horizontal,h3.sc-ic-card-horizontal,h4.sc-ic-card-horizontal,h5.sc-ic-card-horizontal,h6.sc-ic-card-horizontal,p.sc-ic-card-horizontal,blockquote.sc-ic-card-horizontal,pre.sc-ic-card-horizontal,a.sc-ic-card-horizontal,abbr.sc-ic-card-horizontal,acronym.sc-ic-card-horizontal,address.sc-ic-card-horizontal,big.sc-ic-card-horizontal,cite.sc-ic-card-horizontal,code.sc-ic-card-horizontal,del.sc-ic-card-horizontal,dfn.sc-ic-card-horizontal,em.sc-ic-card-horizontal,img.sc-ic-card-horizontal,ins.sc-ic-card-horizontal,kbd.sc-ic-card-horizontal,q.sc-ic-card-horizontal,s.sc-ic-card-horizontal,samp.sc-ic-card-horizontal,small.sc-ic-card-horizontal,strike.sc-ic-card-horizontal,strong.sc-ic-card-horizontal,sub.sc-ic-card-horizontal,sup.sc-ic-card-horizontal,tt.sc-ic-card-horizontal,var.sc-ic-card-horizontal,b.sc-ic-card-horizontal,u.sc-ic-card-horizontal,i.sc-ic-card-horizontal,center.sc-ic-card-horizontal,dl.sc-ic-card-horizontal,dt.sc-ic-card-horizontal,dd.sc-ic-card-horizontal,ol.sc-ic-card-horizontal,ul.sc-ic-card-horizontal,li.sc-ic-card-horizontal,fieldset.sc-ic-card-horizontal,form.sc-ic-card-horizontal,label.sc-ic-card-horizontal,legend.sc-ic-card-horizontal,table.sc-ic-card-horizontal,caption.sc-ic-card-horizontal,tbody.sc-ic-card-horizontal,tfoot.sc-ic-card-horizontal,thead.sc-ic-card-horizontal,tr.sc-ic-card-horizontal,th.sc-ic-card-horizontal,td.sc-ic-card-horizontal,article.sc-ic-card-horizontal,aside.sc-ic-card-horizontal,canvas.sc-ic-card-horizontal,details.sc-ic-card-horizontal,embed.sc-ic-card-horizontal,figure.sc-ic-card-horizontal,figcaption.sc-ic-card-horizontal,footer.sc-ic-card-horizontal,header.sc-ic-card-horizontal,hgroup.sc-ic-card-horizontal,menu.sc-ic-card-horizontal,nav.sc-ic-card-horizontal,output.sc-ic-card-horizontal,ruby.sc-ic-card-horizontal,section.sc-ic-card-horizontal,summary.sc-ic-card-horizontal,time.sc-ic-card-horizontal,mark.sc-ic-card-horizontal,audio.sc-ic-card-horizontal,video.sc-ic-card-horizontal{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-card-horizontal-h{display:flex;--card-max-width:548px;--image-size:114px;--message-max-lines:2}/*!@.card.small*/.card.small.sc-ic-card-horizontal{--card-max-width:360px}/*!@.card.large*/.card.large.sc-ic-card-horizontal{--card-max-width:720px;--image-size:142px;--message-max-lines:3}/*!@.card.extra-large*/.card.extra-large.sc-ic-card-horizontal{--card-max-width:1130px;--image-size:186px;--message-max-lines:5}/*!@a*/a.sc-ic-card-horizontal{text-decoration:none !important;color:var(--ic-architectural-black) !important}/*!@button*/button.sc-ic-card-horizontal{border:none;background-color:transparent;outline:var(--ic-hc-focus-outline);padding:0}/*!@.card,\n.card.clickable*/.card.sc-ic-card-horizontal,.card.clickable.sc-ic-card-horizontal{display:flex;flex-direction:row;border:var(--ic-border-default);border-radius:var(--ic-border-radius);box-sizing:border-box;text-align:left;color:var(--ic-architectural-black);transition:var(--ic-easing-transition-fast);position:relative;max-width:var(--card-max-width);height:-moz-fit-content;height:fit-content;width:var(--card-horizontal-width, -moz-fit-content);width:var(--card-horizontal-width, fit-content)}/*!@.dark.card,\n.dark.card.clickable*/.dark.card.sc-ic-card-horizontal,.dark.card.clickable.sc-ic-card-horizontal{border:var(--ic-border-width) solid var(--ic-architectural-700)}/*!@.card.clickable:hover*/.card.clickable.sc-ic-card-horizontal:hover{background-color:var(--ic-action-default-bg-hover);border:var(--ic-border-hover);cursor:pointer}/*!@.card.clickable:focus,\n.card.clickable.focussed*/.card.clickable.sc-ic-card-horizontal:focus,.card.clickable.focussed.sc-ic-card-horizontal{background-color:var(--ic-action-default-bg-hover);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border:var(--ic-border-pressed)}/*!@.card.clickable:active*/.card.clickable.sc-ic-card-horizontal:active{background-color:var(--ic-action-default-bg-active);box-shadow:var(--ic-border-focus)}/*!@.card.disabled*/.card.disabled.sc-ic-card-horizontal{border:var(--ic-border-disabled)}/*!@.card-header*/.card-header.sc-ic-card-horizontal{display:flex;align-items:center}/*!@.icon*/.icon.sc-ic-card-horizontal{display:flex;align-items:center;padding-right:var(--ic-space-xs)}/*!@.card.disabled ::slotted(svg)*/.card.disabled .sc-ic-card-horizontal-s>svg{fill:var(--ic-color-tertiary-text)}/*!@.card.clickable .card-title*/.card.clickable.sc-ic-card-horizontal .card-title.sc-ic-card-horizontal{color:var(--ic-hyperlink);text-decoration:underline;text-decoration-thickness:var(--ic-space-1px)}/*!@.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title*/.card.clickable.sc-ic-card-horizontal:hover .card-title.sc-ic-card-horizontal,.card.clickable.sc-ic-card-horizontal:focus .card-title.sc-ic-card-horizontal,.card.clickable.focussed.sc-ic-card-horizontal .card-title.sc-ic-card-horizontal{display:inline-block;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}/*!@.card.clickable:active .card-title*/.card.clickable.sc-ic-card-horizontal:active .card-title.sc-ic-card-horizontal{text-decoration:none}/*!@.card.disabled .card-title*/.card.disabled.sc-ic-card-horizontal .card-title.sc-ic-card-horizontal{text-decoration:underline;text-decoration-thickness:var(--ic-space-1px);text-decoration-color:var(--ic-color-tertiary-text);color:var(--ic-color-tertiary-text)}/*!@.card-message*/.card-message.sc-ic-card-horizontal{margin-top:var(--ic-space-xxxs);align-items:left}/*!@.card.disabled .card-message*/.card.disabled.sc-ic-card-horizontal .card-message.sc-ic-card-horizontal{color:var(--ic-color-tertiary-text)}/*!@.image*/.image.sc-ic-card-horizontal{display:flex;height:var(--image-size);width:var(--image-size);border-radius:var(--ic-border-radius)}/*!@.card-content*/.card-content.sc-ic-card-horizontal{display:flex;flex-direction:column;padding:var(--ic-space-md)}/*!@.card .card-title ::slotted([slot=\"heading\"]),\n.card .card-title ic-typography p*/.card .card-title .sc-ic-card-horizontal-s>[slot=\"heading\"],.card.sc-ic-card-horizontal .card-title.sc-ic-card-horizontal ic-typography.sc-ic-card-horizontal p.sc-ic-card-horizontal{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(var(--card-max-width) - var(--ic-space-xl))}/*!@.card.with-icon .card-title ::slotted([slot=\"heading\"]),\n.card.with-icon .card-title ic-typography p*/.card.with-icon .card-title .sc-ic-card-horizontal-s>[slot=\"heading\"],.card.with-icon.sc-ic-card-horizontal .card-title.sc-ic-card-horizontal ic-typography.sc-ic-card-horizontal p.sc-ic-card-horizontal{max-width:calc(var(--card-max-width) - (2 * var(--ic-space-xl)))}/*!@.card.with-image .card-title ::slotted([slot=\"heading\"]),\n.card.with-image .card-title ic-typography p*/.card.with-image .card-title .sc-ic-card-horizontal-s>[slot=\"heading\"],.card.with-image.sc-ic-card-horizontal .card-title.sc-ic-card-horizontal ic-typography.sc-ic-card-horizontal p.sc-ic-card-horizontal{max-width:calc(\n    var(--card-max-width) - var(--image-size) - var(--ic-space-xl)\n  )}/*!@.card.with-image.with-icon .card-title ::slotted([slot=\"heading\"]),\n.card.with-image.with-icon .card-title ic-typography p*/.card.with-image.with-icon .card-title .sc-ic-card-horizontal-s>[slot=\"heading\"],.card.with-image.with-icon.sc-ic-card-horizontal .card-title.sc-ic-card-horizontal ic-typography.sc-ic-card-horizontal p.sc-ic-card-horizontal{max-width:calc(\n    var(--card-max-width) - var(--image-size) - (2 * var(--ic-space-xl))\n  )}/*!@.card .card-message ::slotted([slot=\"message\"]),\n.card .card-message ic-typography*/.card .card-message .sc-ic-card-horizontal-s>[slot=\"message\"],.card.sc-ic-card-horizontal .card-message.sc-ic-card-horizontal ic-typography.sc-ic-card-horizontal{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--message-max-lines, initial);-webkit-line-clamp:var(--message-max-lines, initial);overflow:hidden}@media (forced-colors: active){/*!@.card ::slotted(svg)*/.card .sc-ic-card-horizontal-s>svg{fill:currentcolor}/*!@.card.disabled ::slotted(svg)*/.card.disabled .sc-ic-card-horizontal-s>svg{fill:GrayText !important}/*!@.card.disabled*/.card.disabled.sc-ic-card-horizontal{border-color:GrayText !important}/*!@.card.disabled .card-message,\n  .card.disabled .card-title*/.card.disabled.sc-ic-card-horizontal .card-message.sc-ic-card-horizontal,.card.disabled.sc-ic-card-horizontal .card-title.sc-ic-card-horizontal{color:GrayText}}";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-class CheckboxGroup {
+/**
+ * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.
+ * @slot message - Content will be placed in the main body of the horizontal card.
+ * @slot image - Content will be placed to the left of all other content.
+ * @slot icon - Content will be placed to the left of the horizontal card heading.
+ * @slot badge - Badge component overlaying the top right of the horizontal card.
+ */
+class Card {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.icChange = createEvent(this, "icChange", 7);
+        this.hostMutationObserver = null;
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations(addedNodes, removedNodes, "image")
+                : false)) ;
+        };
+        this.parentFocussed = () => {
+            this.isFocussed = true;
+        };
+        this.parentBlurred = () => {
+            this.isFocussed = false;
+        };
+        this.appearance = "default";
+        this.isFocussed = false;
+        this.parentEl = null;
+        this.parentIsAnchorTag = false;
+        this.clickable = false;
         this.disabled = false;
-        this.helperText = "";
-        this.hideLabel = false;
-        this.label = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.size = "default";
-        this.small = false;
-        this.validationStatus = "";
-        this.validationText = "";
-    }
-    labelNameHandler(newValue, oldValue, propName) {
-        Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
-            if (propName === "label")
-                checkbox.groupLabel = newValue;
-            else if (checkbox.name === oldValue) {
-                // If the checkbox name has been set by the parent, then override it
-                checkbox.name = newValue;
-            }
-        });
+        this.heading = undefined;
+        this.href = undefined;
+        this.hreflang = "";
+        this.message = "";
+        this.referrerpolicy = undefined;
+        this.rel = undefined;
+        this.size = "medium";
+        this.target = undefined;
     }
-    handleChange(ev) {
-        //don't pass on the event if it has come from slotted text field
-        //otherwise any icChange handler bound to the checkbox group will also run
-        if (ev.target.tagName === "IC-TEXT-FIELD") {
-            ev.stopImmediatePropagation();
+    disconnectedCallback() {
+        var _a;
+        if (this.parentIsAnchorTag) {
+            this.parentEl.removeEventListener("focus", this.parentFocussed);
+            this.parentEl.removeEventListener("blur", this.parentBlurred);
         }
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
-        removeDisabledFalse$1(this.disabled, this.el);
+        this.parentEl = this.el.parentElement;
+        if (this.parentEl.tagName === "A") {
+            this.clickable = true;
+            this.parentIsAnchorTag = true;
+            this.parentEl.classList.add("ic-card-wrapper-link");
+            this.parentEl.addEventListener("focus", this.parentFocussed);
+            this.parentEl.addEventListener("blur", this.parentBlurred);
+        }
+        removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
-        onComponentRequiredPropUndefined$1([
-            { prop: this.label, propName: "label" },
-            { prop: this.name, propName: "name" },
-        ], "Checkbox Group");
-    }
-    selectHandler({ target }) {
-        const checkedOptions = Array.from(this.el.querySelectorAll("ic-checkbox")).filter(({ checked, disabled }) => checked && !disabled);
-        this.icChange.emit({
-            value: checkedOptions.map(({ value }) => value),
-            checkedOptions: checkedOptions.map((opt) => {
-                var _a;
-                return ({
-                    checkbox: opt,
-                    textFieldValue: (_a = opt.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
-                });
-            }),
-            selectedOption: target,
+        !isSlotUsed(this.el, "heading") &&
+            onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Card");
+        this.updateTheme();
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
         });
     }
+    handleHostClick(event) {
+        if (this.disabled) {
+            event.stopImmediatePropagation();
+        }
+    }
+    themeChangeHandler(ev) {
+        const theme = ev.detail;
+        this.updateTheme(theme.mode);
+    }
+    /**
+     * Sets focus on the card.
+     */
+    async setFocus() {
+        if (this.el.shadowRoot.querySelector("a")) {
+            this.el.shadowRoot.querySelector("a").focus();
+        }
+        else if (this.el.shadowRoot.querySelector("button")) {
+            this.el.shadowRoot.querySelector("button").focus();
+        }
+    }
+    updateTheme(newTheme = null) {
+        const foregroundColor = getThemeFromContext(this.el, newTheme || null);
+        if (foregroundColor !== IcThemeForegroundEnum.Default) {
+            this.appearance = foregroundColor;
+        }
+    }
     render() {
-        const { disabled, helperText, hideLabel, label, name, required, size, small, validationStatus, validationText, } = this;
-        const describedBy = getInputDescribedByText$1(name, helperText !== "", validationStatus !== "");
-        return (hAsync(Host, { class: { ["small"]: small, [`${size}`]: true } }, (validationStatus === "error" || required || hideLabel) && (hAsync("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), hAsync("fieldset", { id: name, "aria-labelledby": `${validationStatus === "error" || required || hideLabel
-                ? "screenReaderOnlyText"
-                : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (hAsync("legend", null, hAsync("ic-input-label", { class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, for: name }))), hAsync("div", { class: "checkboxes-container" }, hAsync("slot", null))), hasValidationStatus$1(validationStatus, disabled) && (hAsync("ic-input-validation", { for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
+        const { clickable, disabled, heading, message, href, hreflang, referrerpolicy, rel, target, parentIsAnchorTag, isFocussed, size, } = this;
+        const Component = parentIsAnchorTag
+            ? "div"
+            : clickable
+                ? this.href === undefined
+                    ? "button"
+                    : "a"
+                : "div";
+        const attrs = Component == "a" && {
+            href: href,
+            hrefLang: hreflang,
+            referrerPolicy: referrerpolicy,
+            rel: rel,
+            target: target,
+        };
+        return (hAsync(Component, Object.assign({ class: {
+                ["card"]: true,
+                ["clickable"]: clickable && !disabled,
+                ["disabled"]: disabled,
+                ["focussed"]: isFocussed,
+                ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
+                [`${size}`]: true,
+                ["with-icon"]: isSlotUsed(this.el, "icon"),
+                ["with-image"]: isSlotUsed(this.el, "image"),
+            }, tabindex: clickable && !parentIsAnchorTag ? 0 : null, "aria-disabled": disabled ? "true" : null, disabled: disabled ? true : null }, attrs), isSlotUsed(this.el, "image") && (hAsync("div", { class: { ["image"]: true } }, hAsync("slot", { name: "image" }))), hAsync("div", { class: "card-content" }, hAsync("div", { class: "card-header" }, isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync("div", { class: "card-title" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h4" }, hAsync("p", null, heading))))), (message || isSlotUsed(this.el, "message")) && (hAsync("div", { class: {
+                ["card-message"]: true,
+            } }, message && (hAsync("ic-typography", { variant: "body" }, message)), isSlotUsed(this.el, "message") && hAsync("slot", { name: "message" })))), isSlotUsed(this.el, "badge") && hAsync("slot", { name: "badge" })));
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "label": ["labelNameHandler"],
-        "name": ["labelNameHandler"]
-    }; }
-    static get style() { return icCheckboxGroupCss; }
+    static get style() { return icCardHorizontalCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
-        "$tagName$": "ic-checkbox-group",
+        "$tagName$": "ic-card-horizontal",
         "$members$": {
+            "clickable": [1028],
             "disabled": [4],
-            "helperText": [1, "helper-text"],
-            "hideLabel": [4, "hide-label"],
-            "label": [1],
-            "name": [1],
-            "required": [4],
+            "heading": [1],
+            "href": [1],
+            "hreflang": [1],
+            "message": [1],
+            "referrerpolicy": [1],
+            "rel": [1],
             "size": [1],
-            "small": [4],
-            "validationStatus": [1, "validation-status"],
-            "validationText": [1, "validation-text"]
+            "target": [1],
+            "appearance": [32],
+            "isFocussed": [32],
+            "parentEl": [32],
+            "parentIsAnchorTag": [32],
+            "setFocus": [64]
         },
-        "$listeners$": [[0, "icChange", "handleChange"], [0, "icCheck", "selectHandler"]],
+        "$listeners$": [[2, "click", "handleHostClick"], [4, "themeChange", "themeChangeHandler"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
 }
 
-var dismissIcon = `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM15 13.59L13.59 15L10 11.41L6.41 15L5 13.59L8.59 10L5 6.41L6.41 5L10 8.59L13.59 5L15 6.41L11.41 10L15 13.59Z" fill="currentColor"/>
-</svg>
-`;
-
-const icChipCss = "/*!@html*/html.sc-ic-chip{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-chip{margin:0}/*!@main*/main.sc-ic-chip{display:block}/*!@h1*/h1.sc-ic-chip{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-chip{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-chip{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-chip{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-chip{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-chip,strong.sc-ic-chip{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-chip,kbd.sc-ic-chip,samp.sc-ic-chip{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-chip{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-chip,sup.sc-ic-chip{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-chip{bottom:-0.25em}/*!@sup*/sup.sc-ic-chip{top:-0.5em}/*!@img*/img.sc-ic-chip{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-chip,input.sc-ic-chip,optgroup.sc-ic-chip,select.sc-ic-chip,textarea.sc-ic-chip{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-chip,input.sc-ic-chip{overflow:visible}/*!@button,\nselect*/button.sc-ic-chip,select.sc-ic-chip{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-chip,[type=\"button\"].sc-ic-chip,[type=\"reset\"].sc-ic-chip,[type=\"submit\"].sc-ic-chip{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-chip::-moz-focus-inner,[type=\"button\"].sc-ic-chip::-moz-focus-inner,[type=\"reset\"].sc-ic-chip::-moz-focus-inner,[type=\"submit\"].sc-ic-chip::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-chip:-moz-focusring,[type=\"button\"].sc-ic-chip:-moz-focusring,[type=\"reset\"].sc-ic-chip:-moz-focusring,[type=\"submit\"].sc-ic-chip:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-chip{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-chip{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-chip{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-chip{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-chip,[type=\"radio\"].sc-ic-chip{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-chip::-webkit-inner-spin-button,[type=\"number\"].sc-ic-chip::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-chip{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-chip::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-chip::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-chip{display:block}/*!@summary*/summary.sc-ic-chip{display:list-item}/*!@template*/template.sc-ic-chip{display:none}/*!@[hidden]*/[hidden].sc-ic-chip{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-chip,body.sc-ic-chip,div.sc-ic-chip,span.sc-ic-chip,applet.sc-ic-chip,object.sc-ic-chip,iframe.sc-ic-chip,h1.sc-ic-chip,h2.sc-ic-chip,h3.sc-ic-chip,h4.sc-ic-chip,h5.sc-ic-chip,h6.sc-ic-chip,p.sc-ic-chip,blockquote.sc-ic-chip,pre.sc-ic-chip,a.sc-ic-chip,abbr.sc-ic-chip,acronym.sc-ic-chip,address.sc-ic-chip,big.sc-ic-chip,cite.sc-ic-chip,code.sc-ic-chip,del.sc-ic-chip,dfn.sc-ic-chip,em.sc-ic-chip,img.sc-ic-chip,ins.sc-ic-chip,kbd.sc-ic-chip,q.sc-ic-chip,s.sc-ic-chip,samp.sc-ic-chip,small.sc-ic-chip,strike.sc-ic-chip,strong.sc-ic-chip,sub.sc-ic-chip,sup.sc-ic-chip,tt.sc-ic-chip,var.sc-ic-chip,b.sc-ic-chip,u.sc-ic-chip,i.sc-ic-chip,center.sc-ic-chip,dl.sc-ic-chip,dt.sc-ic-chip,dd.sc-ic-chip,ol.sc-ic-chip,ul.sc-ic-chip,li.sc-ic-chip,fieldset.sc-ic-chip,form.sc-ic-chip,label.sc-ic-chip,legend.sc-ic-chip,table.sc-ic-chip,caption.sc-ic-chip,tbody.sc-ic-chip,tfoot.sc-ic-chip,thead.sc-ic-chip,tr.sc-ic-chip,th.sc-ic-chip,td.sc-ic-chip,article.sc-ic-chip,aside.sc-ic-chip,canvas.sc-ic-chip,details.sc-ic-chip,embed.sc-ic-chip,figure.sc-ic-chip,figcaption.sc-ic-chip,footer.sc-ic-chip,header.sc-ic-chip,hgroup.sc-ic-chip,menu.sc-ic-chip,nav.sc-ic-chip,output.sc-ic-chip,ruby.sc-ic-chip,section.sc-ic-chip,summary.sc-ic-chip,time.sc-ic-chip,mark.sc-ic-chip,audio.sc-ic-chip,video.sc-ic-chip{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-chip-h{display:inline-block}/*!@.chip*/.chip.sc-ic-chip{display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}/*!@.chip.small*/.chip.small.sc-ic-chip{padding:var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}/*!@.chip.large*/.chip.large.sc-ic-chip{padding:var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}/*!@.label*/.label.sc-ic-chip{padding:0 var(--ic-space-xs)}/*!@.chip.hovered:not(:focus-within)*/.chip.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-architectural-300)}/*!@.chip:focus-within*/.chip.sc-ic-chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}/*!@.chip.outline.hovered:not(:focus-within),\n.chip.outlined.hovered:not(:focus-within)*/.chip.outline.hovered.sc-ic-chip:not(:focus-within),.chip.outlined.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-action-dark-bg-hover)}/*!@ic-tooltip:focus-within*/ic-tooltip.sc-ic-chip:focus-within{z-index:1}/*!@.filled*/.filled.sc-ic-chip{background-color:var(--chip-custom-color, var(--ic-architectural-200));color:var(--chip-custom-foreground-color, black);border:none}/*!@.filled.disabled*/.filled.disabled.sc-ic-chip{background-color:var(--ic-architectural-100)}/*!@.outline,\n.outlined*/.outline.sc-ic-chip,.outlined.sc-ic-chip{color:var(--ic-architectural-900);border:var(--ic-border-width) solid\n    var(--chip-custom-color, var(--ic-architectural-900));padding:calc(var(--ic-space-xxs) - var(--ic-space-1px))}/*!@.outline.small,\n.outlined.small*/.outline.small.sc-ic-chip,.outlined.small.sc-ic-chip{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}/*!@.outline.large,\n.outlined.large*/.outline.large.sc-ic-chip,.outlined.large.sc-ic-chip{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}/*!@.outline.disabled,\n.outlined.disabled*/.outline.disabled.sc-ic-chip,.outlined.disabled.sc-ic-chip{border:var(--ic-border-disabled);background:none}/*!@.chip.disabled ic-typography*/.chip.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:var(--ic-architectural-500)}/*!@.filled.disabled ic-typography*/.filled.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:var(--ic-architectural-600)}/*!@.dismiss-icon*/.dismiss-icon.sc-ic-chip{border:none;border-radius:50%;padding:0;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}/*!@.dismiss-icon:focus*/.dismiss-icon.sc-ic-chip:focus{outline:var(--ic-hc-focus-outline)}/*!@.dismiss-icon[disabled]*/.dismiss-icon[disabled].sc-ic-chip{pointer-events:none;color:var(--ic-architectural-200)}/*!@.icon*/.icon.sc-ic-chip{padding:var(--ic-space-xxxs);box-sizing:border-box}/*!@.icon,\nic-tooltip*/.icon.sc-ic-chip,ic-tooltip.sc-ic-chip{width:var(--ic-space-lg);height:var(--ic-space-lg)}/*!@.chip.disabled path,\n.chip.disabled ::slotted(svg)*/.chip.disabled.sc-ic-chip path.sc-ic-chip,.chip.disabled.sc-ic-chip-s>svg,.chip.disabled .sc-ic-chip-s>svg{fill:var(--ic-architectural-200)}/*!@.chip.white-background*/.chip.white-background.sc-ic-chip{background-color:var(--ic-architectural-white)}/*!@.chip.white-background.hovered:not(:focus-within)*/.chip.white-background.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-action-dark-bg-hover-no-alpha) !important}@media (forced-colors: active){/*!@.chip*/.chip.sc-ic-chip{border:var(--ic-hc-border)}/*!@.filled.small*/.filled.small.sc-ic-chip{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}/*!@.filled*/.filled.sc-ic-chip{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}/*!@.filled.large*/.filled.large.sc-ic-chip{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}/*!@.chip.disabled*/.chip.disabled.sc-ic-chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}/*!@.chip.disabled ic-typography*/.chip.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:GrayText}/*!@.chip.disabled path,\n  .chip.disabled ::slotted(svg)*/.chip.disabled.sc-ic-chip path.sc-ic-chip,.chip.disabled.sc-ic-chip-s>svg,.chip.disabled .sc-ic-chip-s>svg{fill:GrayText}/*!@.chip:focus-within*/.chip.sc-ic-chip:focus-within{outline:none;border-color:Highlight}}";
+const icCheckboxCss = "/*!@html*/html.sc-ic-checkbox{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-checkbox{margin:0}/*!@main*/main.sc-ic-checkbox{display:block}/*!@h1*/h1.sc-ic-checkbox{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-checkbox{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-checkbox{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-checkbox{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-checkbox{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-checkbox,strong.sc-ic-checkbox{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-checkbox,kbd.sc-ic-checkbox,samp.sc-ic-checkbox{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-checkbox{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-checkbox,sup.sc-ic-checkbox{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-checkbox{bottom:-0.25em}/*!@sup*/sup.sc-ic-checkbox{top:-0.5em}/*!@img*/img.sc-ic-checkbox{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-checkbox,input.sc-ic-checkbox,optgroup.sc-ic-checkbox,select.sc-ic-checkbox,textarea.sc-ic-checkbox{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-checkbox,input.sc-ic-checkbox{overflow:visible}/*!@button,\nselect*/button.sc-ic-checkbox,select.sc-ic-checkbox{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-checkbox,[type=\"button\"].sc-ic-checkbox,[type=\"reset\"].sc-ic-checkbox,[type=\"submit\"].sc-ic-checkbox{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-checkbox::-moz-focus-inner,[type=\"button\"].sc-ic-checkbox::-moz-focus-inner,[type=\"reset\"].sc-ic-checkbox::-moz-focus-inner,[type=\"submit\"].sc-ic-checkbox::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-checkbox:-moz-focusring,[type=\"button\"].sc-ic-checkbox:-moz-focusring,[type=\"reset\"].sc-ic-checkbox:-moz-focusring,[type=\"submit\"].sc-ic-checkbox:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-checkbox{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-checkbox{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-checkbox{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-checkbox{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-checkbox,[type=\"radio\"].sc-ic-checkbox{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-checkbox::-webkit-inner-spin-button,[type=\"number\"].sc-ic-checkbox::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-checkbox{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-checkbox::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-checkbox::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-checkbox{display:block}/*!@summary*/summary.sc-ic-checkbox{display:list-item}/*!@template*/template.sc-ic-checkbox{display:none}/*!@[hidden]*/[hidden].sc-ic-checkbox{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-checkbox,body.sc-ic-checkbox,div.sc-ic-checkbox,span.sc-ic-checkbox,applet.sc-ic-checkbox,object.sc-ic-checkbox,iframe.sc-ic-checkbox,h1.sc-ic-checkbox,h2.sc-ic-checkbox,h3.sc-ic-checkbox,h4.sc-ic-checkbox,h5.sc-ic-checkbox,h6.sc-ic-checkbox,p.sc-ic-checkbox,blockquote.sc-ic-checkbox,pre.sc-ic-checkbox,a.sc-ic-checkbox,abbr.sc-ic-checkbox,acronym.sc-ic-checkbox,address.sc-ic-checkbox,big.sc-ic-checkbox,cite.sc-ic-checkbox,code.sc-ic-checkbox,del.sc-ic-checkbox,dfn.sc-ic-checkbox,em.sc-ic-checkbox,img.sc-ic-checkbox,ins.sc-ic-checkbox,kbd.sc-ic-checkbox,q.sc-ic-checkbox,s.sc-ic-checkbox,samp.sc-ic-checkbox,small.sc-ic-checkbox,strike.sc-ic-checkbox,strong.sc-ic-checkbox,sub.sc-ic-checkbox,sup.sc-ic-checkbox,tt.sc-ic-checkbox,var.sc-ic-checkbox,b.sc-ic-checkbox,u.sc-ic-checkbox,i.sc-ic-checkbox,center.sc-ic-checkbox,dl.sc-ic-checkbox,dt.sc-ic-checkbox,dd.sc-ic-checkbox,ol.sc-ic-checkbox,ul.sc-ic-checkbox,li.sc-ic-checkbox,fieldset.sc-ic-checkbox,form.sc-ic-checkbox,label.sc-ic-checkbox,legend.sc-ic-checkbox,table.sc-ic-checkbox,caption.sc-ic-checkbox,tbody.sc-ic-checkbox,tfoot.sc-ic-checkbox,thead.sc-ic-checkbox,tr.sc-ic-checkbox,th.sc-ic-checkbox,td.sc-ic-checkbox,article.sc-ic-checkbox,aside.sc-ic-checkbox,canvas.sc-ic-checkbox,details.sc-ic-checkbox,embed.sc-ic-checkbox,figure.sc-ic-checkbox,figcaption.sc-ic-checkbox,footer.sc-ic-checkbox,header.sc-ic-checkbox,hgroup.sc-ic-checkbox,menu.sc-ic-checkbox,nav.sc-ic-checkbox,output.sc-ic-checkbox,ruby.sc-ic-checkbox,section.sc-ic-checkbox,summary.sc-ic-checkbox,time.sc-ic-checkbox,mark.sc-ic-checkbox,audio.sc-ic-checkbox,video.sc-ic-checkbox{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.disabled)*/.disabled.sc-ic-checkbox-h{color:var(--ic-architectural-200);pointer-events:none}/*!@.container*/.container.sc-ic-checkbox{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}/*!@:host(.small) .container*/.small.sc-ic-checkbox-h .container.sc-ic-checkbox{margin-bottom:var(--ic-space-xxxs)}/*!@.checkbox*/.checkbox.sc-ic-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-architectural-white);border:var(--ic-border-width) solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}/*!@:host(.small) .checkbox,\n:host(.small) .container svg*/.small.sc-ic-checkbox-h .checkbox.sc-ic-checkbox,.small.sc-ic-checkbox-h .container.sc-ic-checkbox svg.sc-ic-checkbox{width:var(--ic-space-md);height:var(--ic-space-md)}/*!@:host(.large) .checkbox,\n:host(.large) .container svg*/.large.sc-ic-checkbox-h .checkbox.sc-ic-checkbox,.large.sc-ic-checkbox-h .container.sc-ic-checkbox svg.sc-ic-checkbox{width:var(--ic-space-xl);height:var(--ic-space-xl)}/*!@.checkbox:checked*/.checkbox.sc-ic-checkbox:checked{background-color:var(--ic-action-default);border:var(--ic-border-width) solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}/*!@.checkbox:checked:disabled*/.checkbox.sc-ic-checkbox:checked:disabled{background-color:var(--ic-architectural-200)}/*!@.checkbox:indeterminate,\n.checkbox.indeterminate:checked*/.checkbox.sc-ic-checkbox:indeterminate,.checkbox.indeterminate.sc-ic-checkbox:checked{background-color:var(--ic-architectural-white);border:0.125rem solid var(--ic-action-default)}/*!@.checkbox:checked:hover*/.checkbox.sc-ic-checkbox:checked:hover{background-color:var(--ic-action-default-hover)}/*!@.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover*/.checkbox.sc-ic-checkbox:indeterminate:hover,.checkbox.indeterminate.sc-ic-checkbox:checked:hover{background-color:var(--ic-action-default-bg-hover-no-alpha);border:0.125rem solid var(--ic-action-default-hover)}/*!@.checkbox:checked:active*/.checkbox.sc-ic-checkbox:checked:active{background-color:var(--ic-action-default-active)}/*!@.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active*/.checkbox.sc-ic-checkbox:indeterminate:active,.checkbox.indeterminate.sc-ic-checkbox:checked:active{background-color:var(--ic-action-default-bg-active-no-alpha);border:0.125rem solid var(--ic-action-default-active)}/*!@.checkbox:hover*/.checkbox.sc-ic-checkbox:hover{background-color:var(--ic-action-default-bg-hover-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-border-width) solid var(--ic-action-default-hover)}/*!@.checkbox:active*/.checkbox.sc-ic-checkbox:active{background-color:var(--ic-action-default-bg-active-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active);border:var(--ic-border-width) solid var(--ic-action-default-active)}/*!@.checkbox:focus*/.checkbox.sc-ic-checkbox:focus{box-shadow:var(--ic-border-focus)}/*!@.checkbox:disabled*/.checkbox.sc-ic-checkbox:disabled{border:var(--ic-border-width) dashed var(--ic-architectural-200)}/*!@.checkbox-label*/.checkbox-label.sc-ic-checkbox{padding-left:var(--ic-space-sm)}/*!@.checkbox-label:hover*/.checkbox-label.sc-ic-checkbox:hover{cursor:pointer}/*!@.checkmark*/.checkmark.sc-ic-checkbox{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}/*!@:host(.small) .checkmark*/.small.sc-ic-checkbox-h .checkmark.sc-ic-checkbox{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}/*!@:host(.large) .checkmark*/.large.sc-ic-checkbox-h .checkmark.sc-ic-checkbox{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}/*!@.indeterminate-symbol*/.indeterminate-symbol.sc-ic-checkbox{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-action-default);pointer-events:none;flex-shrink:0}/*!@:host(.small) .indeterminate-symbol*/.small.sc-ic-checkbox-h .indeterminate-symbol.sc-ic-checkbox{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}/*!@:host(.large) .indeterminate-symbol*/.large.sc-ic-checkbox-h .indeterminate-symbol.sc-ic-checkbox{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}/*!@.container:hover .indeterminate-symbol*/.container.sc-ic-checkbox:hover .indeterminate-symbol.sc-ic-checkbox{background-color:var(--ic-action-default-hover)}/*!@.container:active .indeterminate-symbol*/.container.sc-ic-checkbox:active .indeterminate-symbol.sc-ic-checkbox{background-color:var(--ic-action-default-active)}/*!@.additional-field-wrapper*/.additional-field-wrapper.sc-ic-checkbox{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}/*!@.branch-corner*/.branch-corner.sc-ic-checkbox{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default)}/*!@.dynamic-container*/.dynamic-container.sc-ic-checkbox{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}/*!@.dynamic-text*/.dynamic-text.sc-ic-checkbox{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){/*!@::slotted(ic-text-field)*/.sc-ic-checkbox-s>ic-text-field{--input-width:100%}}@media (forced-colors: active){/*!@.checkbox*/.checkbox.sc-ic-checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}/*!@.checkbox:checked*/.checkbox.sc-ic-checkbox:checked{transition:none}/*!@.checkbox:focus-visible*/.checkbox.sc-ic-checkbox:focus-visible{outline:0.125rem solid highlight}/*!@.checkbox:disabled:not(:checked)*/.checkbox.sc-ic-checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}/*!@.checkmark*/.checkmark.sc-ic-checkbox{fill:none}/*!@.indeterminate-symbol*/.indeterminate-symbol.sc-ic-checkbox{display:none}}";
 
 /**
- * @slot icon - Content will be rendered at the start of the chip.
- * @slot badge - Badge component overlaying the top right of the chip.
+ * @slot additional-field - Content to be displayed alongside a checkbox.
  */
-class Chip {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class Checkbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dismiss = createEvent(this, "dismiss", 7);
-        this.icDismiss = createEvent(this, "icDismiss", 7);
-        this.dismissAction = () => {
-            this.dismiss.emit();
-            this.icDismiss.emit();
-        };
-        this.mouseEnterHandler = () => {
-            this.hovered = true;
-        };
-        this.mouseLeaveHandler = () => {
-            this.hovered = false;
+        this.checkboxChecked = createEvent(this, "checkboxChecked", 7);
+        this.icCheck = createEvent(this, "icCheck", 7);
+        this.handleClick = () => {
+            this.checked = !this.checked;
+            this.displayIndeterminate = this.nativeIndeterminateBehaviour
+                ? false
+                : this.indeterminate && this.checked;
+            this.icCheck.emit();
+            this.checkboxChecked.emit();
         };
-        this.setChipColour = () => {
-            const colorRGBA = convertToRGBA(this.customColor);
-            if (colorRGBA) {
-                const { r, g, b, a } = colorRGBA;
-                const foregroundColour = (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? "black" : "white";
-                this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`);
-            }
+        this.handleFormReset = () => {
+            this.checked = this.initiallyChecked;
         };
-        this.hovered = false;
-        this.visible = true;
-        this.appearance = undefined;
-        this.customColor = null;
+        this.additionalFieldDisplay = "static";
+        this.checked = false;
+        this.initiallyChecked = this.checked;
         this.disabled = false;
-        this.dismissible = false;
+        this.dynamicText = "This selection requires additional answers";
+        this.form = undefined;
+        this.formaction = undefined;
+        this.formenctype = undefined;
+        this.formmethod = undefined;
+        this.formnovalidate = undefined;
+        this.formtarget = undefined;
+        this.groupLabel = undefined;
+        this.indeterminate = false;
+        this.displayIndeterminate = this.indeterminate;
         this.label = undefined;
-        this.size = "default";
-        this.transparentBackground = true;
-        this.variant = "filled";
+        this.name = undefined;
+        this.nativeIndeterminateBehaviour = false;
+        this.size = undefined;
+        this.small = false;
+        this.value = undefined;
+        this.hideLabel = false;
     }
-    customColorHandler() {
-        if (!this.dismissible) {
-            this.setChipColour();
-        }
+    watchIndeterminateHandler() {
+        this.displayIndeterminate = this.nativeIndeterminateBehaviour
+            ? this.indeterminate
+            : this.indeterminate && this.checked;
     }
     componentWillLoad() {
         removeDisabledFalse$1(this.disabled, this.el);
-        if (!this.dismissible) {
-            this.setChipColour();
+        addFormResetListener$1(this.el, this.handleFormReset);
+        const checkboxGroup = this.el.parentElement;
+        if (checkboxGroup) {
+            if (!this.name)
+                this.name = checkboxGroup.name;
+            this.groupLabel = checkboxGroup.label;
         }
-        if (this.appearance === "outline") {
-            this.variant = "outlined";
+    }
+    componentDidLoad() {
+        onComponentRequiredPropUndefined$1([
+            { prop: this.label, propName: "label" },
+            { prop: this.value, propName: "value" },
+        ], "Checkbox");
+    }
+    componentDidRender() {
+        if (this.additionalFieldDisplay === "static") {
+            const textfield = this.el.querySelector("ic-text-field");
+            if (!this.checked) {
+                textfield === null || textfield === void 0 ? void 0 : textfield.setAttribute("disabled", "");
+            }
+            else {
+                textfield === null || textfield === void 0 ? void 0 : textfield.removeAttribute("disabled");
+            }
+        }
+        else if (this.additionalFieldContainer) {
+            this.additionalFieldContainer.style.display = !this.checked
+                ? "none"
+                : "flex";
         }
     }
-    componentDidLoad() {
-        onComponentRequiredPropUndefined$1([{ prop: this.label, propName: "label" }], "Chip");
-    }
-    handleClick() {
-        this.visible = !this.visible;
+    disconnectedCallback() {
+        removeFormResetListener$1(this.el, this.handleFormReset);
     }
     /**
-     * Sets focus on the chip.
+     * Sets focus on the checkbox.
      */
     async setFocus() {
         var _a;
-        (_a = this.el.shadowRoot.querySelector("button")) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = this.el.shadowRoot.querySelector(".checkbox")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { label, appearance, variant, size, dismissible, visible, disabled, hovered, } = this;
-        return (visible && (hAsync("div", { class: {
-                chip: true,
-                [`${appearance}`]: appearance !== undefined,
-                [`${variant}`]: true,
-                [`${size}`]: true,
+        const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, formaction, formenctype, formmethod, formnovalidate, formtarget, displayIndeterminate, groupLabel, label, name, size, small, value, } = this;
+        const id = `ic-checkbox-${isPropDefined$1(label) || value}-${groupLabel}`.replace(/ /g, "-");
+        const parentElementSize = el.parentElement
+            .size;
+        checked
+            ? renderHiddenInput$1(true, el, name, checked && value, disabled)
+            : removeHiddenInput(el);
+        return (hAsync(Host, { class: {
                 disabled,
-                dismissible,
-                hovered,
-                "white-background": this.variant === "outlined" && !this.transparentBackground,
-            } }, isSlotUsed$1(this.el, "icon") && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "label", "apply-vertical-margins": false, class: "label" }, hAsync("span", null, label)), dismissible && (hAsync("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, hAsync("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" }))));
+                small,
+                [`${size || parentElementSize}`]: true,
+            } }, hAsync("div", { class: "container" }, displayIndeterminate && hAsync("div", { class: "indeterminate-symbol" }), !displayIndeterminate && checked && (hAsync("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, hAsync("title", null, "checkmark icon"), hAsync("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), hAsync("input", { role: "checkbox", class: {
+                checkbox: true,
+                checked,
+                indeterminate: displayIndeterminate,
+            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled ? true : null, checked: checked, indeterminate: displayIndeterminate, onClick: this.handleClick, form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget, "aria-label": this.hideLabel ? this.label : undefined }), !this.hideLabel && (hAsync("ic-typography", { class: "checkbox-label", variant: "body" }, hAsync("label", { htmlFor: id }, label)))), isSlotUsed$1(el, "additional-field") && (hAsync("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (hAsync("div", { class: "branch-corner" })), hAsync("div", null, additionalFieldDisplay === "dynamic" && (hAsync("ic-typography", { variant: "caption" }, hAsync("p", { class: "dynamic-text", "aria-live": "polite" }, dynamicText))), hAsync("div", { class: {
+                "additional-field-wrapper": additionalFieldDisplay === "static",
+            } }, hAsync("slot", { name: "additional-field" })))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "customColor": ["customColorHandler"]
+        "indeterminate": ["watchIndeterminateHandler"]
     }; }
-    static get style() { return icChipCss; }
+    static get style() { return icCheckboxCss; }
     static get cmpMeta() { return {
         "$flags$": 25,
-        "$tagName$": "ic-chip",
+        "$tagName$": "ic-checkbox",
         "$members$": {
-            "appearance": [1],
-            "customColor": [1, "custom-color"],
+            "additionalFieldDisplay": [513, "additional-field-display"],
+            "checked": [1540],
             "disabled": [4],
-            "dismissible": [4],
+            "dynamicText": [1, "dynamic-text"],
+            "form": [1],
+            "formaction": [1],
+            "formenctype": [1],
+            "formmethod": [1],
+            "formnovalidate": [4],
+            "formtarget": [1],
+            "groupLabel": [1025, "group-label"],
+            "indeterminate": [4],
             "label": [1],
+            "name": [1025],
+            "nativeIndeterminateBehaviour": [4, "native-indeterminate-behaviour"],
             "size": [1],
-            "transparentBackground": [4, "transparent-background"],
-            "variant": [1],
-            "hovered": [32],
-            "visible": [32],
+            "small": [4],
+            "value": [1],
+            "hideLabel": [4, "hide-label"],
+            "initiallyChecked": [32],
+            "displayIndeterminate": [32],
             "setFocus": [64]
         },
-        "$listeners$": [[2, "icDismiss", "handleClick"]],
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const icClassificationBannerCss = "/*!@html*/html.sc-ic-classification-banner{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-classification-banner{margin:0}/*!@main*/main.sc-ic-classification-banner{display:block}/*!@h1*/h1.sc-ic-classification-banner{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-classification-banner{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-classification-banner{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-classification-banner{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-classification-banner{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-classification-banner,strong.sc-ic-classification-banner{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-classification-banner,kbd.sc-ic-classification-banner,samp.sc-ic-classification-banner{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-classification-banner{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-classification-banner,sup.sc-ic-classification-banner{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-classification-banner{bottom:-0.25em}/*!@sup*/sup.sc-ic-classification-banner{top:-0.5em}/*!@img*/img.sc-ic-classification-banner{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-classification-banner,input.sc-ic-classification-banner,optgroup.sc-ic-classification-banner,select.sc-ic-classification-banner,textarea.sc-ic-classification-banner{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-classification-banner,input.sc-ic-classification-banner{overflow:visible}/*!@button,\nselect*/button.sc-ic-classification-banner,select.sc-ic-classification-banner{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-classification-banner,[type=\"button\"].sc-ic-classification-banner,[type=\"reset\"].sc-ic-classification-banner,[type=\"submit\"].sc-ic-classification-banner{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-classification-banner::-moz-focus-inner,[type=\"button\"].sc-ic-classification-banner::-moz-focus-inner,[type=\"reset\"].sc-ic-classification-banner::-moz-focus-inner,[type=\"submit\"].sc-ic-classification-banner::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-classification-banner:-moz-focusring,[type=\"button\"].sc-ic-classification-banner:-moz-focusring,[type=\"reset\"].sc-ic-classification-banner:-moz-focusring,[type=\"submit\"].sc-ic-classification-banner:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-classification-banner{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-classification-banner{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-classification-banner{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-classification-banner{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-classification-banner,[type=\"radio\"].sc-ic-classification-banner{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-classification-banner::-webkit-inner-spin-button,[type=\"number\"].sc-ic-classification-banner::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-classification-banner{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-classification-banner::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-classification-banner::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-classification-banner{display:block}/*!@summary*/summary.sc-ic-classification-banner{display:list-item}/*!@template*/template.sc-ic-classification-banner{display:none}/*!@[hidden]*/[hidden].sc-ic-classification-banner{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-classification-banner,body.sc-ic-classification-banner,div.sc-ic-classification-banner,span.sc-ic-classification-banner,applet.sc-ic-classification-banner,object.sc-ic-classification-banner,iframe.sc-ic-classification-banner,h1.sc-ic-classification-banner,h2.sc-ic-classification-banner,h3.sc-ic-classification-banner,h4.sc-ic-classification-banner,h5.sc-ic-classification-banner,h6.sc-ic-classification-banner,p.sc-ic-classification-banner,blockquote.sc-ic-classification-banner,pre.sc-ic-classification-banner,a.sc-ic-classification-banner,abbr.sc-ic-classification-banner,acronym.sc-ic-classification-banner,address.sc-ic-classification-banner,big.sc-ic-classification-banner,cite.sc-ic-classification-banner,code.sc-ic-classification-banner,del.sc-ic-classification-banner,dfn.sc-ic-classification-banner,em.sc-ic-classification-banner,img.sc-ic-classification-banner,ins.sc-ic-classification-banner,kbd.sc-ic-classification-banner,q.sc-ic-classification-banner,s.sc-ic-classification-banner,samp.sc-ic-classification-banner,small.sc-ic-classification-banner,strike.sc-ic-classification-banner,strong.sc-ic-classification-banner,sub.sc-ic-classification-banner,sup.sc-ic-classification-banner,tt.sc-ic-classification-banner,var.sc-ic-classification-banner,b.sc-ic-classification-banner,u.sc-ic-classification-banner,i.sc-ic-classification-banner,center.sc-ic-classification-banner,dl.sc-ic-classification-banner,dt.sc-ic-classification-banner,dd.sc-ic-classification-banner,ol.sc-ic-classification-banner,ul.sc-ic-classification-banner,li.sc-ic-classification-banner,fieldset.sc-ic-classification-banner,form.sc-ic-classification-banner,label.sc-ic-classification-banner,legend.sc-ic-classification-banner,table.sc-ic-classification-banner,caption.sc-ic-classification-banner,tbody.sc-ic-classification-banner,tfoot.sc-ic-classification-banner,thead.sc-ic-classification-banner,tr.sc-ic-classification-banner,th.sc-ic-classification-banner,td.sc-ic-classification-banner,article.sc-ic-classification-banner,aside.sc-ic-classification-banner,canvas.sc-ic-classification-banner,details.sc-ic-classification-banner,embed.sc-ic-classification-banner,figure.sc-ic-classification-banner,figcaption.sc-ic-classification-banner,footer.sc-ic-classification-banner,header.sc-ic-classification-banner,hgroup.sc-ic-classification-banner,menu.sc-ic-classification-banner,nav.sc-ic-classification-banner,output.sc-ic-classification-banner,ruby.sc-ic-classification-banner,section.sc-ic-classification-banner,summary.sc-ic-classification-banner,time.sc-ic-classification-banner,mark.sc-ic-classification-banner,audio.sc-ic-classification-banner,video.sc-ic-classification-banner{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-classification-banner-h{position:fixed;left:0;bottom:0;width:100%;height:var(--ic-space-lg);z-index:var(--ic-z-index-classification-banner)}/*!@:host(.inline)*/.inline.sc-ic-classification-banner-h{position:static;left:auto;bottom:auto}/*!@.classification-banner*/.classification-banner.sc-ic-classification-banner{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:var(--ic-space-xxxs) var(--ic-space-md)}/*!@.default*/.default.sc-ic-classification-banner{background-color:var(--ic-classification-not-set);color:var(--ic-classification-not-set-foreground)}/*!@.official,\n.official-sensitive*/.official.sc-ic-classification-banner,.official-sensitive.sc-ic-classification-banner{background-color:var(--ic-classification-official);color:var(--ic-classification-official-foreground)}/*!@.secret*/.secret.sc-ic-classification-banner{background-color:var(--ic-classification-secret);color:var(--ic-classification-secret-foreground)}/*!@.top-secret*/.top-secret.sc-ic-classification-banner{background-color:var(--ic-classification-top-secret);color:var(--ic-classification-top-secret-foreground)}/*!@.offscreen*/.offscreen.sc-ic-classification-banner{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}@media (forced-colors: active){/*!@.classification-banner*/.classification-banner.sc-ic-classification-banner{border:var(--ic-hc-border)}}";
-
-const classificationText = {
-    default: "protective marking not set",
-    official: "official",
-    "official-sensitive": "official sensitive",
-    secret: "secret",
-    "top-secret": "top secret",
-};
-class ClassificationBanner {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.additionalSelectors = "";
-        this.classification = "default";
-        this.country = "uk";
-        this.inline = false;
-        this.upTo = false;
-    }
-    render() {
-        const { classification, inline, country, upTo, additionalSelectors } = this;
-        return (hAsync(Host, { class: { ["inline"]: inline } }, hAsync("banner", { "aria-label": "Protective marking", class: {
-                ["classification-banner"]: true,
-                [`${classification}`]: classification,
-            } }, classification !== "default" ? (hAsync("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, hAsync("ic-typography", { variant: "caption-uppercase" }, classification === "default"
-            ? classificationText[classification]
-            : `${upTo ? "up to" : ""} 
-               ${country !== "" ? country : ""} 
-               ${classificationText[classification]} 
-               ${additionalSelectors !== "" ? additionalSelectors : ""}`))));
-    }
-    static get style() { return icClassificationBannerCss; }
-    static get cmpMeta() { return {
-        "$flags$": 9,
-        "$tagName$": "ic-classification-banner",
-        "$members$": {
-            "additionalSelectors": [1, "additional-selectors"],
-            "classification": [1],
-            "country": [1],
-            "inline": [4],
-            "upTo": [4, "up-to"]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const icDataEntityCss = "/*!@html*/html.sc-ic-data-entity{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-data-entity{margin:0}/*!@main*/main.sc-ic-data-entity{display:block}/*!@h1*/h1.sc-ic-data-entity{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-data-entity{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-data-entity{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-data-entity{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-data-entity{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-data-entity,strong.sc-ic-data-entity{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-data-entity,kbd.sc-ic-data-entity,samp.sc-ic-data-entity{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-data-entity{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-data-entity,sup.sc-ic-data-entity{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-data-entity{bottom:-0.25em}/*!@sup*/sup.sc-ic-data-entity{top:-0.5em}/*!@img*/img.sc-ic-data-entity{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-data-entity,input.sc-ic-data-entity,optgroup.sc-ic-data-entity,select.sc-ic-data-entity,textarea.sc-ic-data-entity{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-data-entity,input.sc-ic-data-entity{overflow:visible}/*!@button,\nselect*/button.sc-ic-data-entity,select.sc-ic-data-entity{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-data-entity,[type=\"button\"].sc-ic-data-entity,[type=\"reset\"].sc-ic-data-entity,[type=\"submit\"].sc-ic-data-entity{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-data-entity::-moz-focus-inner,[type=\"button\"].sc-ic-data-entity::-moz-focus-inner,[type=\"reset\"].sc-ic-data-entity::-moz-focus-inner,[type=\"submit\"].sc-ic-data-entity::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-data-entity:-moz-focusring,[type=\"button\"].sc-ic-data-entity:-moz-focusring,[type=\"reset\"].sc-ic-data-entity:-moz-focusring,[type=\"submit\"].sc-ic-data-entity:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-data-entity{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-data-entity{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-data-entity{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-data-entity{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-data-entity,[type=\"radio\"].sc-ic-data-entity{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-data-entity::-webkit-inner-spin-button,[type=\"number\"].sc-ic-data-entity::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-data-entity{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-data-entity::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-data-entity::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-data-entity{display:block}/*!@summary*/summary.sc-ic-data-entity{display:list-item}/*!@template*/template.sc-ic-data-entity{display:none}/*!@[hidden]*/[hidden].sc-ic-data-entity{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-data-entity,body.sc-ic-data-entity,div.sc-ic-data-entity,span.sc-ic-data-entity,applet.sc-ic-data-entity,object.sc-ic-data-entity,iframe.sc-ic-data-entity,h1.sc-ic-data-entity,h2.sc-ic-data-entity,h3.sc-ic-data-entity,h4.sc-ic-data-entity,h5.sc-ic-data-entity,h6.sc-ic-data-entity,p.sc-ic-data-entity,blockquote.sc-ic-data-entity,pre.sc-ic-data-entity,a.sc-ic-data-entity,abbr.sc-ic-data-entity,acronym.sc-ic-data-entity,address.sc-ic-data-entity,big.sc-ic-data-entity,cite.sc-ic-data-entity,code.sc-ic-data-entity,del.sc-ic-data-entity,dfn.sc-ic-data-entity,em.sc-ic-data-entity,img.sc-ic-data-entity,ins.sc-ic-data-entity,kbd.sc-ic-data-entity,q.sc-ic-data-entity,s.sc-ic-data-entity,samp.sc-ic-data-entity,small.sc-ic-data-entity,strike.sc-ic-data-entity,strong.sc-ic-data-entity,sub.sc-ic-data-entity,sup.sc-ic-data-entity,tt.sc-ic-data-entity,var.sc-ic-data-entity,b.sc-ic-data-entity,u.sc-ic-data-entity,i.sc-ic-data-entity,center.sc-ic-data-entity,dl.sc-ic-data-entity,dt.sc-ic-data-entity,dd.sc-ic-data-entity,ol.sc-ic-data-entity,ul.sc-ic-data-entity,li.sc-ic-data-entity,fieldset.sc-ic-data-entity,form.sc-ic-data-entity,label.sc-ic-data-entity,legend.sc-ic-data-entity,table.sc-ic-data-entity,caption.sc-ic-data-entity,tbody.sc-ic-data-entity,tfoot.sc-ic-data-entity,thead.sc-ic-data-entity,tr.sc-ic-data-entity,th.sc-ic-data-entity,td.sc-ic-data-entity,article.sc-ic-data-entity,aside.sc-ic-data-entity,canvas.sc-ic-data-entity,details.sc-ic-data-entity,embed.sc-ic-data-entity,figure.sc-ic-data-entity,figcaption.sc-ic-data-entity,footer.sc-ic-data-entity,header.sc-ic-data-entity,hgroup.sc-ic-data-entity,menu.sc-ic-data-entity,nav.sc-ic-data-entity,output.sc-ic-data-entity,ruby.sc-ic-data-entity,section.sc-ic-data-entity,summary.sc-ic-data-entity,time.sc-ic-data-entity,mark.sc-ic-data-entity,audio.sc-ic-data-entity,video.sc-ic-data-entity{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-data-entity-h{display:block}/*!@.rows*/.rows.sc-ic-data-entity{display:flex;flex-direction:column;gap:var(--ic-space-md)}/*!@:host(.small) .rows*/.small.sc-ic-data-entity-h .rows.sc-ic-data-entity{gap:var(--ic-space-xs)}/*!@.divider*/.divider.sc-ic-data-entity{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-architectural-300)}/*!@:host(.small) .divider*/.small.sc-ic-data-entity-h .divider.sc-ic-data-entity{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}@media (forced-colors: active){/*!@.divider*/.divider.sc-ic-data-entity{background-color:canvastext}}";
-
-/**
- * @slot heading - Content will be placed at the top of the data entity.
- */
-class DataEntity {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.heading = undefined;
-        this.size = "default";
-        this.small = false;
-    }
-    render() {
-        const { el, heading, small, size } = this;
-        if (small || size === "small") {
-            Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
-        }
-        return (hAsync(Host, { class: { small: small || size === "small" } }, hAsync("div", { class: "heading", id: "data-entity-heading" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h3" }, heading))), hAsync("div", { class: "divider" }), hAsync("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, hAsync("slot", null))));
-    }
-    get el() { return getElement(this); }
-    static get style() { return icDataEntityCss; }
-    static get cmpMeta() { return {
-        "$flags$": 9,
-        "$tagName$": "ic-data-entity",
-        "$members$": {
-            "heading": [1],
-            "size": [1],
-            "small": [4]
-        },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["additionalFieldDisplay", "additional-field-display"], ["checked", "checked"]]
     }; }
 }
 
-const icDataRowCss = "/*!@html*/html.sc-ic-data-row{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-data-row{margin:0}/*!@main*/main.sc-ic-data-row{display:block}/*!@h1*/h1.sc-ic-data-row{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-data-row{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-data-row{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-data-row{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-data-row{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-data-row,strong.sc-ic-data-row{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-data-row,kbd.sc-ic-data-row,samp.sc-ic-data-row{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-data-row{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-data-row,sup.sc-ic-data-row{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-data-row{bottom:-0.25em}/*!@sup*/sup.sc-ic-data-row{top:-0.5em}/*!@img*/img.sc-ic-data-row{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-data-row,input.sc-ic-data-row,optgroup.sc-ic-data-row,select.sc-ic-data-row,textarea.sc-ic-data-row{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-data-row,input.sc-ic-data-row{overflow:visible}/*!@button,\nselect*/button.sc-ic-data-row,select.sc-ic-data-row{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-data-row,[type=\"button\"].sc-ic-data-row,[type=\"reset\"].sc-ic-data-row,[type=\"submit\"].sc-ic-data-row{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-data-row::-moz-focus-inner,[type=\"button\"].sc-ic-data-row::-moz-focus-inner,[type=\"reset\"].sc-ic-data-row::-moz-focus-inner,[type=\"submit\"].sc-ic-data-row::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-data-row:-moz-focusring,[type=\"button\"].sc-ic-data-row:-moz-focusring,[type=\"reset\"].sc-ic-data-row:-moz-focusring,[type=\"submit\"].sc-ic-data-row:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-data-row{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-data-row{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-data-row{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-data-row{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-data-row,[type=\"radio\"].sc-ic-data-row{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-data-row::-webkit-inner-spin-button,[type=\"number\"].sc-ic-data-row::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-data-row{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-data-row::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-data-row::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-data-row{display:block}/*!@summary*/summary.sc-ic-data-row{display:list-item}/*!@template*/template.sc-ic-data-row{display:none}/*!@[hidden]*/[hidden].sc-ic-data-row{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-data-row,body.sc-ic-data-row,div.sc-ic-data-row,span.sc-ic-data-row,applet.sc-ic-data-row,object.sc-ic-data-row,iframe.sc-ic-data-row,h1.sc-ic-data-row,h2.sc-ic-data-row,h3.sc-ic-data-row,h4.sc-ic-data-row,h5.sc-ic-data-row,h6.sc-ic-data-row,p.sc-ic-data-row,blockquote.sc-ic-data-row,pre.sc-ic-data-row,a.sc-ic-data-row,abbr.sc-ic-data-row,acronym.sc-ic-data-row,address.sc-ic-data-row,big.sc-ic-data-row,cite.sc-ic-data-row,code.sc-ic-data-row,del.sc-ic-data-row,dfn.sc-ic-data-row,em.sc-ic-data-row,img.sc-ic-data-row,ins.sc-ic-data-row,kbd.sc-ic-data-row,q.sc-ic-data-row,s.sc-ic-data-row,samp.sc-ic-data-row,small.sc-ic-data-row,strike.sc-ic-data-row,strong.sc-ic-data-row,sub.sc-ic-data-row,sup.sc-ic-data-row,tt.sc-ic-data-row,var.sc-ic-data-row,b.sc-ic-data-row,u.sc-ic-data-row,i.sc-ic-data-row,center.sc-ic-data-row,dl.sc-ic-data-row,dt.sc-ic-data-row,dd.sc-ic-data-row,ol.sc-ic-data-row,ul.sc-ic-data-row,li.sc-ic-data-row,fieldset.sc-ic-data-row,form.sc-ic-data-row,label.sc-ic-data-row,legend.sc-ic-data-row,table.sc-ic-data-row,caption.sc-ic-data-row,tbody.sc-ic-data-row,tfoot.sc-ic-data-row,thead.sc-ic-data-row,tr.sc-ic-data-row,th.sc-ic-data-row,td.sc-ic-data-row,article.sc-ic-data-row,aside.sc-ic-data-row,canvas.sc-ic-data-row,details.sc-ic-data-row,embed.sc-ic-data-row,figure.sc-ic-data-row,figcaption.sc-ic-data-row,footer.sc-ic-data-row,header.sc-ic-data-row,hgroup.sc-ic-data-row,menu.sc-ic-data-row,nav.sc-ic-data-row,output.sc-ic-data-row,ruby.sc-ic-data-row,section.sc-ic-data-row,summary.sc-ic-data-row,time.sc-ic-data-row,mark.sc-ic-data-row,audio.sc-ic-data-row,video.sc-ic-data-row{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-data-row-h{position:relative;display:block}/*!@.data*/.data.sc-ic-data-row{display:flex;align-items:center}/*!@.text-cells*/.text-cells.sc-ic-data-row{display:flex;flex-grow:1;min-width:0}/*!@.label*/.label.sc-ic-data-row{width:12.5rem;min-width:12.5rem;margin-right:var(--ic-space-md);color:var(--ic-color-tertiary-text)}/*!@.value*/.value.sc-ic-data-row{flex-grow:1}/*!@slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label])*/slot[name=\"value\"].sc-ic-data-row-s>ic-text-field[readonly][hide-label]{margin-top:calc(var(--ic-space-xs) * -1)}/*!@slot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label])*/slot[name=\"value\"].sc-ic-data-row-s>ic-text-field[small][readonly][hide-label]{margin-top:calc(var(--ic-space-xxs) * -1)}/*!@slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows])*/slot[name=\"value\"].sc-ic-data-row-s>ic-text-field[readonly][hide-label][rows]{margin-top:calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs))}/*!@.end-component*/.end-component.sc-ic-data-row{width:-moz-fit-content;width:fit-content;margin-left:3.5rem}/*!@.divider*/.divider.sc-ic-data-row{margin-top:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-architectural-300)}/*!@:host(.small) .divider*/.small.sc-ic-data-row-h .divider.sc-ic-data-row{margin-top:var(--ic-space-xs)}/*!@:host(.breakpoint-medium) .label*/.breakpoint-medium.sc-ic-data-row-h .label.sc-ic-data-row{width:10rem;min-width:10rem}/*!@:host(.breakpoint-xs) .text-cells*/.breakpoint-xs.sc-ic-data-row-h .text-cells.sc-ic-data-row{flex-direction:column}/*!@:host(.breakpoint-xs) .label*/.breakpoint-xs.sc-ic-data-row-h .label.sc-ic-data-row{width:8rem;margin-bottom:var(--ic-space-xs)}/*!@:host(.breakpoint-xs) .value*/.breakpoint-xs.sc-ic-data-row-h .value.sc-ic-data-row{max-width:95%}/*!@:host(.breakpoint-xs) .end-component*/.breakpoint-xs.sc-ic-data-row-h .end-component.sc-ic-data-row{margin-left:0}@media (forced-colors: active){/*!@.divider*/.divider.sc-ic-data-row{background-color:canvastext}}";
+const icCheckboxGroupCss = "/*!@html*/html.sc-ic-checkbox-group{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-checkbox-group{margin:0}/*!@main*/main.sc-ic-checkbox-group{display:block}/*!@h1*/h1.sc-ic-checkbox-group{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-checkbox-group{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-checkbox-group{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-checkbox-group{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-checkbox-group{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-checkbox-group,strong.sc-ic-checkbox-group{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-checkbox-group,kbd.sc-ic-checkbox-group,samp.sc-ic-checkbox-group{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-checkbox-group{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-checkbox-group,sup.sc-ic-checkbox-group{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-checkbox-group{bottom:-0.25em}/*!@sup*/sup.sc-ic-checkbox-group{top:-0.5em}/*!@img*/img.sc-ic-checkbox-group{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-checkbox-group,input.sc-ic-checkbox-group,optgroup.sc-ic-checkbox-group,select.sc-ic-checkbox-group,textarea.sc-ic-checkbox-group{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-checkbox-group,input.sc-ic-checkbox-group{overflow:visible}/*!@button,\nselect*/button.sc-ic-checkbox-group,select.sc-ic-checkbox-group{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-checkbox-group,[type=\"button\"].sc-ic-checkbox-group,[type=\"reset\"].sc-ic-checkbox-group,[type=\"submit\"].sc-ic-checkbox-group{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-checkbox-group::-moz-focus-inner,[type=\"button\"].sc-ic-checkbox-group::-moz-focus-inner,[type=\"reset\"].sc-ic-checkbox-group::-moz-focus-inner,[type=\"submit\"].sc-ic-checkbox-group::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-checkbox-group:-moz-focusring,[type=\"button\"].sc-ic-checkbox-group:-moz-focusring,[type=\"reset\"].sc-ic-checkbox-group:-moz-focusring,[type=\"submit\"].sc-ic-checkbox-group:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-checkbox-group{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-checkbox-group{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-checkbox-group{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-checkbox-group{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-checkbox-group,[type=\"radio\"].sc-ic-checkbox-group{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-checkbox-group::-webkit-inner-spin-button,[type=\"number\"].sc-ic-checkbox-group::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-checkbox-group{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-checkbox-group::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-checkbox-group::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-checkbox-group{display:block}/*!@summary*/summary.sc-ic-checkbox-group{display:list-item}/*!@template*/template.sc-ic-checkbox-group{display:none}/*!@[hidden]*/[hidden].sc-ic-checkbox-group{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-checkbox-group,body.sc-ic-checkbox-group,div.sc-ic-checkbox-group,span.sc-ic-checkbox-group,applet.sc-ic-checkbox-group,object.sc-ic-checkbox-group,iframe.sc-ic-checkbox-group,h1.sc-ic-checkbox-group,h2.sc-ic-checkbox-group,h3.sc-ic-checkbox-group,h4.sc-ic-checkbox-group,h5.sc-ic-checkbox-group,h6.sc-ic-checkbox-group,p.sc-ic-checkbox-group,blockquote.sc-ic-checkbox-group,pre.sc-ic-checkbox-group,a.sc-ic-checkbox-group,abbr.sc-ic-checkbox-group,acronym.sc-ic-checkbox-group,address.sc-ic-checkbox-group,big.sc-ic-checkbox-group,cite.sc-ic-checkbox-group,code.sc-ic-checkbox-group,del.sc-ic-checkbox-group,dfn.sc-ic-checkbox-group,em.sc-ic-checkbox-group,img.sc-ic-checkbox-group,ins.sc-ic-checkbox-group,kbd.sc-ic-checkbox-group,q.sc-ic-checkbox-group,s.sc-ic-checkbox-group,samp.sc-ic-checkbox-group,small.sc-ic-checkbox-group,strike.sc-ic-checkbox-group,strong.sc-ic-checkbox-group,sub.sc-ic-checkbox-group,sup.sc-ic-checkbox-group,tt.sc-ic-checkbox-group,var.sc-ic-checkbox-group,b.sc-ic-checkbox-group,u.sc-ic-checkbox-group,i.sc-ic-checkbox-group,center.sc-ic-checkbox-group,dl.sc-ic-checkbox-group,dt.sc-ic-checkbox-group,dd.sc-ic-checkbox-group,ol.sc-ic-checkbox-group,ul.sc-ic-checkbox-group,li.sc-ic-checkbox-group,fieldset.sc-ic-checkbox-group,form.sc-ic-checkbox-group,label.sc-ic-checkbox-group,legend.sc-ic-checkbox-group,table.sc-ic-checkbox-group,caption.sc-ic-checkbox-group,tbody.sc-ic-checkbox-group,tfoot.sc-ic-checkbox-group,thead.sc-ic-checkbox-group,tr.sc-ic-checkbox-group,th.sc-ic-checkbox-group,td.sc-ic-checkbox-group,article.sc-ic-checkbox-group,aside.sc-ic-checkbox-group,canvas.sc-ic-checkbox-group,details.sc-ic-checkbox-group,embed.sc-ic-checkbox-group,figure.sc-ic-checkbox-group,figcaption.sc-ic-checkbox-group,footer.sc-ic-checkbox-group,header.sc-ic-checkbox-group,hgroup.sc-ic-checkbox-group,menu.sc-ic-checkbox-group,nav.sc-ic-checkbox-group,output.sc-ic-checkbox-group,ruby.sc-ic-checkbox-group,section.sc-ic-checkbox-group,summary.sc-ic-checkbox-group,time.sc-ic-checkbox-group,mark.sc-ic-checkbox-group,audio.sc-ic-checkbox-group,video.sc-ic-checkbox-group{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-checkbox-group-h{display:block}/*!@ic-input-label.error*/ic-input-label.error.sc-ic-checkbox-group{color:var(--ic-status-error)}/*!@ic-input-label ic-typography*/ic-input-label.sc-ic-checkbox-group ic-typography.sc-ic-checkbox-group{margin-bottom:var(--ic-space-sm)}/*!@:host(.small) ic-input-label ic-typography*/.small.sc-ic-checkbox-group-h ic-input-label.sc-ic-checkbox-group ic-typography.sc-ic-checkbox-group{margin-bottom:calc(var(--ic-space-sm) / 2)}/*!@ic-input-validation*/ic-input-validation.sc-ic-checkbox-group{margin-top:var(--ic-space-sm)}/*!@:host(.small) ic-input-validation*/.small.sc-ic-checkbox-group-h ic-input-validation.sc-ic-checkbox-group{margin-top:calc(var(--ic-space-sm) / 2)}/*!@.checkboxes-container*/.checkboxes-container.sc-ic-checkbox-group{margin-bottom:calc(-1 * var(--ic-space-xxs))}/*!@:host(.small) .checkboxes-container*/.small.sc-ic-checkbox-group-h .checkboxes-container.sc-ic-checkbox-group{margin-bottom:calc(-1 * var(--ic-space-xxxs))}/*!@.screen-reader-only-text*/.screen-reader-only-text.sc-ic-checkbox-group{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}";
 
-/**
- * @slot label - Content will be rendered in the leftmost cell.
- * @slot value - Content will be rendered to the right of the label.
- * @slot end-component - Content will be displayed in the rightmost cell.
- */
-class DataRow {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class CheckboxGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.hasEndComponent = false;
-        this.resizeObserver = null;
-        this.runResizeObserver = () => {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.checkLabelAbove();
-            });
-            this.resizeObserver.observe(this.el);
-        };
-        this.renderCellContent = (cell) => {
-            const isValue = cell === "value";
-            return (hAsync("div", { class: cell }, isSlotUsed$1(this.el, cell) ? (hAsync("slot", { name: cell })) : (hAsync("ic-typography", { variant: isValue
-                    ? "body"
-                    : this.entitySize === "xs"
-                        ? "label"
-                        : "subtitle-large" }, isValue ? this.value : this.label))));
-        };
-        this.deviceSize = DEVICE_SIZES.XL;
-        this.entitySize = undefined;
+        this.icChange = createEvent(this, "icChange", 7);
+        this.disabled = false;
+        this.helperText = "";
+        this.hideLabel = false;
         this.label = undefined;
+        this.name = undefined;
+        this.required = false;
         this.size = "default";
         this.small = false;
-        this.value = undefined;
+        this.validationStatus = "";
+        this.validationText = "";
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    labelNameHandler(newValue, oldValue, propName) {
+        Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
+            if (propName === "label")
+                checkbox.groupLabel = newValue;
+            else if (checkbox.name === oldValue) {
+                // If the checkbox name has been set by the parent, then override it
+                checkbox.name = newValue;
+            }
+        });
+    }
+    handleChange(ev) {
+        //don't pass on the event if it has come from slotted text field
+        //otherwise any icChange handler bound to the checkbox group will also run
+        if (ev.target.tagName === "IC-TEXT-FIELD") {
+            ev.stopImmediatePropagation();
+        }
     }
     componentWillLoad() {
-        this.deviceSize = getCurrentDeviceSize();
-        this.hasEndComponent = slotHasContent(this.el, "end-component");
-        this.checkLabelAbove();
+        removeDisabledFalse$1(this.disabled, this.el);
     }
     componentDidLoad() {
-        checkResizeObserver$1(this.runResizeObserver);
-        if (this.hasEndComponent)
-            this.labelEndComponent();
-    }
-    checkLabelAbove() {
-        var _a;
-        const rowSize = ((_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth) + 46;
-        if (rowSize) {
-            this.entitySize =
-                rowSize < DEVICE_SIZES.S ? "xs" : rowSize < DEVICE_SIZES.M ? "m" : "xl";
-        }
+        onComponentRequiredPropUndefined$1([
+            { prop: this.label, propName: "label" },
+            { prop: this.name, propName: "name" },
+        ], "Checkbox Group");
     }
-    labelEndComponent() {
-        this.el.shadowRoot
-            .querySelectorAll("slot[name=end-component]")
-            .forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
+    selectHandler({ target }) {
+        const checkedOptions = Array.from(this.el.querySelectorAll("ic-checkbox")).filter(({ checked, disabled }) => checked && !disabled);
+        this.icChange.emit({
+            value: checkedOptions.map(({ value }) => value),
+            checkedOptions: checkedOptions.map((opt) => {
+                var _a;
+                return ({
+                    checkbox: opt,
+                    textFieldValue: (_a = opt.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
+                });
+            }),
+            selectedOption: target,
+        });
     }
     render() {
-        const { el, entitySize, hasEndComponent, label, renderCellContent, size, small, value, } = this;
-        return (hAsync(Host, { class: {
-                ["small"]: small || size === "small",
-                ["breakpoint-medium"]: entitySize === "m",
-                ["breakpoint-xs"]: entitySize === "xs",
-            }, role: "listitem" }, hAsync("div", { class: "data" }, hAsync("div", { class: "text-cells" }, (isSlotUsed$1(el, "label") || label) && renderCellContent("label"), (isSlotUsed$1(el, "value") || value) && renderCellContent("value")), hasEndComponent && (hAsync("div", { class: "end-component" }, hAsync("slot", { name: "end-component" })))), hAsync("div", { class: "divider" })));
+        const { disabled, helperText, hideLabel, label, name, required, size, small, validationStatus, validationText, } = this;
+        const describedBy = getInputDescribedByText$1(name, helperText !== "", validationStatus !== "");
+        return (hAsync(Host, { class: { ["small"]: small, [`${size}`]: true } }, (validationStatus === "error" || required || hideLabel) && (hAsync("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), hAsync("fieldset", { id: name, "aria-labelledby": `${validationStatus === "error" || required || hideLabel
+                ? "screenReaderOnlyText"
+                : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (hAsync("legend", null, hAsync("ic-input-label", { class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, for: name }))), hAsync("div", { class: "checkboxes-container" }, hAsync("slot", null))), hasValidationStatus$1(validationStatus, disabled) && (hAsync("ic-input-validation", { for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
     }
     get el() { return getElement(this); }
-    static get style() { return icDataRowCss; }
+    static get watchers() { return {
+        "label": ["labelNameHandler"],
+        "name": ["labelNameHandler"]
+    }; }
+    static get style() { return icCheckboxGroupCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
-        "$tagName$": "ic-data-row",
+        "$tagName$": "ic-checkbox-group",
         "$members$": {
+            "disabled": [4],
+            "helperText": [1, "helper-text"],
+            "hideLabel": [4, "hide-label"],
             "label": [1],
+            "name": [1],
+            "required": [4],
             "size": [1],
             "small": [4],
-            "value": [1],
-            "deviceSize": [32],
-            "entitySize": [32]
+            "validationStatus": [1, "validation-status"],
+            "validationText": [1, "validation-text"]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "icChange", "handleChange"], [0, "icCheck", "selectHandler"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
 }
 
-var unsortedIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
-    <path d="M9 3 5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"></path>
-</svg>`;
-
-var ascendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" style="transform: rotate(-90deg);">
-    <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
-</svg>`;
-
-var descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" style="transform: rotate(90deg)">
-    <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
-</svg>`;
-
-// Global ARIA attributes
-const IC_INHERITED_ARIA = [
-    "aria-atomic",
-    "aria-autocomplete",
-    "aria-busy",
-    "aria-controls",
-    "aria-current",
-    "aria-describedby",
-    "aria-description",
-    "aria-details",
-    "aria-disabled",
-    "aria-dropeffect",
-    "aria-errormessage",
-    "aria-expanded",
-    "aria-flowto",
-    "aria-grabbed",
-    "aria-haspopup",
-    "aria-hidden",
-    "aria-invalid",
-    "aria-keyshortcuts",
-    "aria-label",
-    "aria-labelledby",
-    "aria-live",
-    "aria-owns",
-    "aria-relevant",
-    "aria-roledescription",
-];
+var dismissIcon = `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM15 13.59L13.59 15L10 11.41L6.41 15L5 13.59L8.59 10L5 6.41L6.41 5L10 8.59L13.59 5L15 6.41L11.41 10L15 13.59Z" fill="currentColor"/>
+</svg>
+`;
 
-var IcInformationStatus;
-(function (IcInformationStatus) {
-    IcInformationStatus["Warning"] = "warning";
-    IcInformationStatus["Error"] = "error";
-    IcInformationStatus["Success"] = "success";
-})(IcInformationStatus || (IcInformationStatus = {}));
-var IcThemeForegroundEnum;
-(function (IcThemeForegroundEnum) {
-    IcThemeForegroundEnum["Default"] = "default";
-    IcThemeForegroundEnum["Dark"] = "dark";
-    IcThemeForegroundEnum["Light"] = "light";
-})(IcThemeForegroundEnum || (IcThemeForegroundEnum = {}));
-var IcDateInputMonths;
-(function (IcDateInputMonths) {
-    IcDateInputMonths[IcDateInputMonths["January"] = 0] = "January";
-    IcDateInputMonths[IcDateInputMonths["February"] = 1] = "February";
-    IcDateInputMonths[IcDateInputMonths["March"] = 2] = "March";
-    IcDateInputMonths[IcDateInputMonths["April"] = 3] = "April";
-    IcDateInputMonths[IcDateInputMonths["May"] = 4] = "May";
-    IcDateInputMonths[IcDateInputMonths["June"] = 5] = "June";
-    IcDateInputMonths[IcDateInputMonths["July"] = 6] = "July";
-    IcDateInputMonths[IcDateInputMonths["August"] = 7] = "August";
-    IcDateInputMonths[IcDateInputMonths["September"] = 8] = "September";
-    IcDateInputMonths[IcDateInputMonths["October"] = 9] = "October";
-    IcDateInputMonths[IcDateInputMonths["November"] = 10] = "November";
-    IcDateInputMonths[IcDateInputMonths["December"] = 11] = "December";
-})(IcDateInputMonths || (IcDateInputMonths = {}));
-var IcShortDayNames;
-(function (IcShortDayNames) {
-    IcShortDayNames[IcShortDayNames["Sun"] = 0] = "Sun";
-    IcShortDayNames[IcShortDayNames["Mon"] = 1] = "Mon";
-    IcShortDayNames[IcShortDayNames["Tue"] = 2] = "Tue";
-    IcShortDayNames[IcShortDayNames["Wed"] = 3] = "Wed";
-    IcShortDayNames[IcShortDayNames["Thu"] = 4] = "Thu";
-    IcShortDayNames[IcShortDayNames["Fri"] = 5] = "Fri";
-    IcShortDayNames[IcShortDayNames["Sat"] = 6] = "Sat";
-})(IcShortDayNames || (IcShortDayNames = {}));
-var IcDayNames;
-(function (IcDayNames) {
-    IcDayNames[IcDayNames["Sunday"] = 0] = "Sunday";
-    IcDayNames[IcDayNames["Monday"] = 1] = "Monday";
-    IcDayNames[IcDayNames["Tuesday"] = 2] = "Tuesday";
-    IcDayNames[IcDayNames["Wednesday"] = 3] = "Wednesday";
-    IcDayNames[IcDayNames["Thursday"] = 4] = "Thursday";
-    IcDayNames[IcDayNames["Friday"] = 5] = "Friday";
-    IcDayNames[IcDayNames["Saturday"] = 6] = "Saturday";
-})(IcDayNames || (IcDayNames = {}));
-var IcWeekDays;
-(function (IcWeekDays) {
-    IcWeekDays[IcWeekDays["Sunday"] = 0] = "Sunday";
-    IcWeekDays[IcWeekDays["Monday"] = 1] = "Monday";
-    IcWeekDays[IcWeekDays["Tuesday"] = 2] = "Tuesday";
-    IcWeekDays[IcWeekDays["Wednesday"] = 3] = "Wednesday";
-    IcWeekDays[IcWeekDays["Thursday"] = 4] = "Thursday";
-    IcWeekDays[IcWeekDays["Friday"] = 5] = "Friday";
-    IcWeekDays[IcWeekDays["Saturday"] = 6] = "Saturday";
-})(IcWeekDays || (IcWeekDays = {}));
+const icChipCss = "/*!@html*/html.sc-ic-chip{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-chip{margin:0}/*!@main*/main.sc-ic-chip{display:block}/*!@h1*/h1.sc-ic-chip{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-chip{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-chip{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-chip{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-chip{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-chip,strong.sc-ic-chip{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-chip,kbd.sc-ic-chip,samp.sc-ic-chip{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-chip{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-chip,sup.sc-ic-chip{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-chip{bottom:-0.25em}/*!@sup*/sup.sc-ic-chip{top:-0.5em}/*!@img*/img.sc-ic-chip{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-chip,input.sc-ic-chip,optgroup.sc-ic-chip,select.sc-ic-chip,textarea.sc-ic-chip{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-chip,input.sc-ic-chip{overflow:visible}/*!@button,\nselect*/button.sc-ic-chip,select.sc-ic-chip{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-chip,[type=\"button\"].sc-ic-chip,[type=\"reset\"].sc-ic-chip,[type=\"submit\"].sc-ic-chip{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-chip::-moz-focus-inner,[type=\"button\"].sc-ic-chip::-moz-focus-inner,[type=\"reset\"].sc-ic-chip::-moz-focus-inner,[type=\"submit\"].sc-ic-chip::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-chip:-moz-focusring,[type=\"button\"].sc-ic-chip:-moz-focusring,[type=\"reset\"].sc-ic-chip:-moz-focusring,[type=\"submit\"].sc-ic-chip:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-chip{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-chip{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-chip{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-chip{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-chip,[type=\"radio\"].sc-ic-chip{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-chip::-webkit-inner-spin-button,[type=\"number\"].sc-ic-chip::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-chip{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-chip::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-chip::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-chip{display:block}/*!@summary*/summary.sc-ic-chip{display:list-item}/*!@template*/template.sc-ic-chip{display:none}/*!@[hidden]*/[hidden].sc-ic-chip{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-chip,body.sc-ic-chip,div.sc-ic-chip,span.sc-ic-chip,applet.sc-ic-chip,object.sc-ic-chip,iframe.sc-ic-chip,h1.sc-ic-chip,h2.sc-ic-chip,h3.sc-ic-chip,h4.sc-ic-chip,h5.sc-ic-chip,h6.sc-ic-chip,p.sc-ic-chip,blockquote.sc-ic-chip,pre.sc-ic-chip,a.sc-ic-chip,abbr.sc-ic-chip,acronym.sc-ic-chip,address.sc-ic-chip,big.sc-ic-chip,cite.sc-ic-chip,code.sc-ic-chip,del.sc-ic-chip,dfn.sc-ic-chip,em.sc-ic-chip,img.sc-ic-chip,ins.sc-ic-chip,kbd.sc-ic-chip,q.sc-ic-chip,s.sc-ic-chip,samp.sc-ic-chip,small.sc-ic-chip,strike.sc-ic-chip,strong.sc-ic-chip,sub.sc-ic-chip,sup.sc-ic-chip,tt.sc-ic-chip,var.sc-ic-chip,b.sc-ic-chip,u.sc-ic-chip,i.sc-ic-chip,center.sc-ic-chip,dl.sc-ic-chip,dt.sc-ic-chip,dd.sc-ic-chip,ol.sc-ic-chip,ul.sc-ic-chip,li.sc-ic-chip,fieldset.sc-ic-chip,form.sc-ic-chip,label.sc-ic-chip,legend.sc-ic-chip,table.sc-ic-chip,caption.sc-ic-chip,tbody.sc-ic-chip,tfoot.sc-ic-chip,thead.sc-ic-chip,tr.sc-ic-chip,th.sc-ic-chip,td.sc-ic-chip,article.sc-ic-chip,aside.sc-ic-chip,canvas.sc-ic-chip,details.sc-ic-chip,embed.sc-ic-chip,figure.sc-ic-chip,figcaption.sc-ic-chip,footer.sc-ic-chip,header.sc-ic-chip,hgroup.sc-ic-chip,menu.sc-ic-chip,nav.sc-ic-chip,output.sc-ic-chip,ruby.sc-ic-chip,section.sc-ic-chip,summary.sc-ic-chip,time.sc-ic-chip,mark.sc-ic-chip,audio.sc-ic-chip,video.sc-ic-chip{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-chip-h{display:inline-block;max-width:100%}/*!@.chip*/.chip.sc-ic-chip{display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}/*!@.chip.small*/.chip.small.sc-ic-chip{padding:var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}/*!@.chip.large*/.chip.large.sc-ic-chip{padding:var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}/*!@.label*/.label.sc-ic-chip{padding:0 var(--ic-space-xs)}/*!@.chip.hovered:not(:focus-within)*/.chip.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-architectural-300)}/*!@.chip:focus-within*/.chip.sc-ic-chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}/*!@.chip.outline.hovered:not(:focus-within),\n.chip.outlined.hovered:not(:focus-within)*/.chip.outline.hovered.sc-ic-chip:not(:focus-within),.chip.outlined.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-action-dark-bg-hover)}/*!@ic-tooltip:focus-within*/ic-tooltip.sc-ic-chip:focus-within{z-index:1}/*!@.filled*/.filled.sc-ic-chip{background-color:var(--chip-custom-color, var(--ic-architectural-200));color:var(--chip-custom-foreground-color, black);border:none}/*!@.filled.disabled*/.filled.disabled.sc-ic-chip{background-color:var(--ic-architectural-100)}/*!@.outline,\n.outlined*/.outline.sc-ic-chip,.outlined.sc-ic-chip{color:var(--ic-architectural-900);border:var(--ic-border-width) solid\n    var(--chip-custom-color, var(--ic-architectural-900));padding:calc(var(--ic-space-xxs) - var(--ic-space-1px))}/*!@.outline.small,\n.outlined.small*/.outline.small.sc-ic-chip,.outlined.small.sc-ic-chip{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}/*!@.outline.large,\n.outlined.large*/.outline.large.sc-ic-chip,.outlined.large.sc-ic-chip{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}/*!@.outline.disabled,\n.outlined.disabled*/.outline.disabled.sc-ic-chip,.outlined.disabled.sc-ic-chip{border:var(--ic-border-disabled);background:none}/*!@.chip.disabled ic-typography*/.chip.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:var(--ic-architectural-500)}/*!@.filled.disabled ic-typography*/.filled.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:var(--ic-architectural-600)}/*!@.dismiss-icon*/.dismiss-icon.sc-ic-chip{border:none;border-radius:50%;padding:0;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}/*!@.dismiss-icon:focus*/.dismiss-icon.sc-ic-chip:focus{outline:var(--ic-hc-focus-outline)}/*!@.dismiss-icon[disabled]*/.dismiss-icon[disabled].sc-ic-chip{pointer-events:none;color:var(--ic-architectural-200)}/*!@.icon*/.icon.sc-ic-chip{padding:var(--ic-space-xxxs);box-sizing:border-box}/*!@.icon,\nic-tooltip*/.icon.sc-ic-chip,ic-tooltip.sc-ic-chip{width:var(--ic-space-lg);height:var(--ic-space-lg)}/*!@.chip.disabled path,\n.chip.disabled ::slotted(svg)*/.chip.disabled.sc-ic-chip path.sc-ic-chip,.chip.disabled.sc-ic-chip-s>svg,.chip.disabled .sc-ic-chip-s>svg{fill:var(--ic-architectural-200)}/*!@.chip.white-background*/.chip.white-background.sc-ic-chip{background-color:var(--ic-architectural-white)}/*!@.chip.white-background.hovered:not(:focus-within)*/.chip.white-background.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-action-dark-bg-hover-no-alpha) !important}@media (forced-colors: active){/*!@.chip*/.chip.sc-ic-chip{border:var(--ic-hc-border)}/*!@.filled.small*/.filled.small.sc-ic-chip{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}/*!@.filled*/.filled.sc-ic-chip{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}/*!@.filled.large*/.filled.large.sc-ic-chip{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}/*!@.chip.disabled*/.chip.disabled.sc-ic-chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}/*!@.chip.disabled ic-typography*/.chip.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:GrayText}/*!@.chip.disabled path,\n  .chip.disabled ::slotted(svg)*/.chip.disabled.sc-ic-chip path.sc-ic-chip,.chip.disabled.sc-ic-chip-s>svg,.chip.disabled .sc-ic-chip-s>svg{fill:GrayText}/*!@.chip:focus-within*/.chip.sc-ic-chip:focus-within{outline:none;border-color:Highlight}}";
 
 /**
- * converts an enum of strings into an array of strings
- */
-const stringEnumToArray = (theEnum) => {
-    const arr = [];
-    Object.values(theEnum).forEach((val) => {
-        if (isNaN(Number(val))) {
-            const str = val;
-            arr.push(str);
-        }
-    });
-    return arr;
-};
-/**
- * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
- * to a variable that is later used in the render function.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
+ * @slot icon - Content will be rendered at the start of the chip.
+ * @slot badge - Badge component overlaying the top right of the chip.
  */
-const inheritAttributes = (element, attributes = []) => {
-    const attributeObject = {};
-    attributes.forEach((attr) => {
-        if (element.hasAttribute(attr)) {
-            const value = element.getAttribute(attr);
-            if (value !== null) {
-                attributeObject[attr] = element.getAttribute(attr);
+class Chip {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dismiss = createEvent(this, "dismiss", 7);
+        this.icDismiss = createEvent(this, "icDismiss", 7);
+        this.inAGGrid = false;
+        this.dismissAction = () => {
+            this.dismiss.emit();
+            this.icDismiss.emit();
+        };
+        this.mouseEnterHandler = () => {
+            this.hovered = true;
+        };
+        this.mouseLeaveHandler = () => {
+            this.hovered = false;
+        };
+        this.setChipColour = () => {
+            const colorRGBA = convertToRGBA(this.customColor);
+            if (colorRGBA) {
+                const { r, g, b, a } = colorRGBA;
+                const foregroundColour = (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? "black" : "white";
+                this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`);
             }
-            element.removeAttribute(attr);
+        };
+        this.hovered = false;
+        this.visible = true;
+        this.appearance = undefined;
+        this.customColor = null;
+        this.disabled = false;
+        this.dismissible = false;
+        this.label = undefined;
+        this.size = "default";
+        this.transparentBackground = true;
+        this.variant = "filled";
+    }
+    customColorHandler() {
+        if (!this.dismissible) {
+            this.setChipColour();
         }
-    });
-    return attributeObject;
-};
-/**
- * This method is used to add a hidden input to a host element that contains
- * a Shadow DOM. It does not add the input inside of the Shadow root which
- * allows it to be picked up inside of forms. It should contain the same
- * values as the host element.
- *
- * @param always Add a hidden input even if the container does not use Shadow
- * @param container The element where the input will be added
- * @param name The name of the input
- * @param value The value of the input
- * @param disabled If true, the input is disabled
- */
-const renderHiddenInput = (always, container, name, value, disabled) => {
-    if (name !== undefined && (always || hasShadowDom(container))) {
-        const inputs = container.querySelectorAll("input.ic-input");
-        const inputEls = Array.from(inputs);
-        const filtered = inputEls.filter((el) => container === el.parentElement);
-        let input = filtered[0];
-        if (input === null || input === undefined) {
-            input = container.ownerDocument.createElement("input");
-            input.type = "hidden";
-            input.classList.add("ic-input");
-            container.appendChild(input);
+    }
+    componentWillLoad() {
+        removeDisabledFalse$1(this.disabled, this.el);
+        if (!this.dismissible) {
+            this.setChipColour();
         }
-        input.disabled = disabled;
-        input.name = name;
-        if (value instanceof Date) {
-            input.value = value ? value.toISOString() : null;
+        if (this.appearance === "outline") {
+            this.variant = "outlined";
         }
-        else {
-            input.value = value || "";
+    }
+    componentWillRender() {
+        if (isElInAGGrid(this.el)) {
+            this.inAGGrid = true;
         }
     }
-};
-const isEmptyString = (value) => value ? value.trim().length === 0 : true;
-const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
-const getSlot = (element, name) => {
-    if (element && element.querySelector) {
-        return element.querySelector(`[slot="${name}"]`);
+    componentDidLoad() {
+        onComponentRequiredPropUndefined$1([{ prop: this.label, propName: "label" }], "Chip");
     }
-    return null;
-};
-const getSlotContent = (element, name) => {
-    const slot = getSlot(element, name);
-    if (slot) {
-        return getSlotElements(slot);
+    handleClick() {
+        this.visible = !this.visible;
+    }
+    /**
+     * Sets focus on the chip.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.el.shadowRoot.querySelector("button")) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        const { label, appearance, variant, size, dismissible, visible, disabled, hovered, } = this;
+        return (visible && (hAsync("div", { class: {
+                chip: true,
+                [`${appearance}`]: appearance !== undefined,
+                [`${variant}`]: true,
+                [`${size}`]: true,
+                disabled,
+                dismissible,
+                hovered,
+                "white-background": this.variant === "outlined" && !this.transparentBackground,
+            } }, isSlotUsed$1(this.el, "icon") && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, hAsync("span", null, label)), dismissible && (hAsync("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, hAsync("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" }))));
     }
-    return null;
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "customColor": ["customColorHandler"]
+    }; }
+    static get style() { return icChipCss; }
+    static get cmpMeta() { return {
+        "$flags$": 25,
+        "$tagName$": "ic-chip",
+        "$members$": {
+            "appearance": [1],
+            "customColor": [1, "custom-color"],
+            "disabled": [4],
+            "dismissible": [4],
+            "label": [1],
+            "size": [1],
+            "transparentBackground": [4, "transparent-background"],
+            "variant": [1],
+            "hovered": [32],
+            "visible": [32],
+            "setFocus": [64]
+        },
+        "$listeners$": [[2, "icDismiss", "handleClick"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const icClassificationBannerCss = "/*!@html*/html.sc-ic-classification-banner{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-classification-banner{margin:0}/*!@main*/main.sc-ic-classification-banner{display:block}/*!@h1*/h1.sc-ic-classification-banner{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-classification-banner{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-classification-banner{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-classification-banner{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-classification-banner{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-classification-banner,strong.sc-ic-classification-banner{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-classification-banner,kbd.sc-ic-classification-banner,samp.sc-ic-classification-banner{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-classification-banner{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-classification-banner,sup.sc-ic-classification-banner{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-classification-banner{bottom:-0.25em}/*!@sup*/sup.sc-ic-classification-banner{top:-0.5em}/*!@img*/img.sc-ic-classification-banner{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-classification-banner,input.sc-ic-classification-banner,optgroup.sc-ic-classification-banner,select.sc-ic-classification-banner,textarea.sc-ic-classification-banner{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-classification-banner,input.sc-ic-classification-banner{overflow:visible}/*!@button,\nselect*/button.sc-ic-classification-banner,select.sc-ic-classification-banner{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-classification-banner,[type=\"button\"].sc-ic-classification-banner,[type=\"reset\"].sc-ic-classification-banner,[type=\"submit\"].sc-ic-classification-banner{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-classification-banner::-moz-focus-inner,[type=\"button\"].sc-ic-classification-banner::-moz-focus-inner,[type=\"reset\"].sc-ic-classification-banner::-moz-focus-inner,[type=\"submit\"].sc-ic-classification-banner::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-classification-banner:-moz-focusring,[type=\"button\"].sc-ic-classification-banner:-moz-focusring,[type=\"reset\"].sc-ic-classification-banner:-moz-focusring,[type=\"submit\"].sc-ic-classification-banner:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-classification-banner{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-classification-banner{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-classification-banner{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-classification-banner{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-classification-banner,[type=\"radio\"].sc-ic-classification-banner{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-classification-banner::-webkit-inner-spin-button,[type=\"number\"].sc-ic-classification-banner::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-classification-banner{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-classification-banner::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-classification-banner::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-classification-banner{display:block}/*!@summary*/summary.sc-ic-classification-banner{display:list-item}/*!@template*/template.sc-ic-classification-banner{display:none}/*!@[hidden]*/[hidden].sc-ic-classification-banner{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-classification-banner,body.sc-ic-classification-banner,div.sc-ic-classification-banner,span.sc-ic-classification-banner,applet.sc-ic-classification-banner,object.sc-ic-classification-banner,iframe.sc-ic-classification-banner,h1.sc-ic-classification-banner,h2.sc-ic-classification-banner,h3.sc-ic-classification-banner,h4.sc-ic-classification-banner,h5.sc-ic-classification-banner,h6.sc-ic-classification-banner,p.sc-ic-classification-banner,blockquote.sc-ic-classification-banner,pre.sc-ic-classification-banner,a.sc-ic-classification-banner,abbr.sc-ic-classification-banner,acronym.sc-ic-classification-banner,address.sc-ic-classification-banner,big.sc-ic-classification-banner,cite.sc-ic-classification-banner,code.sc-ic-classification-banner,del.sc-ic-classification-banner,dfn.sc-ic-classification-banner,em.sc-ic-classification-banner,img.sc-ic-classification-banner,ins.sc-ic-classification-banner,kbd.sc-ic-classification-banner,q.sc-ic-classification-banner,s.sc-ic-classification-banner,samp.sc-ic-classification-banner,small.sc-ic-classification-banner,strike.sc-ic-classification-banner,strong.sc-ic-classification-banner,sub.sc-ic-classification-banner,sup.sc-ic-classification-banner,tt.sc-ic-classification-banner,var.sc-ic-classification-banner,b.sc-ic-classification-banner,u.sc-ic-classification-banner,i.sc-ic-classification-banner,center.sc-ic-classification-banner,dl.sc-ic-classification-banner,dt.sc-ic-classification-banner,dd.sc-ic-classification-banner,ol.sc-ic-classification-banner,ul.sc-ic-classification-banner,li.sc-ic-classification-banner,fieldset.sc-ic-classification-banner,form.sc-ic-classification-banner,label.sc-ic-classification-banner,legend.sc-ic-classification-banner,table.sc-ic-classification-banner,caption.sc-ic-classification-banner,tbody.sc-ic-classification-banner,tfoot.sc-ic-classification-banner,thead.sc-ic-classification-banner,tr.sc-ic-classification-banner,th.sc-ic-classification-banner,td.sc-ic-classification-banner,article.sc-ic-classification-banner,aside.sc-ic-classification-banner,canvas.sc-ic-classification-banner,details.sc-ic-classification-banner,embed.sc-ic-classification-banner,figure.sc-ic-classification-banner,figcaption.sc-ic-classification-banner,footer.sc-ic-classification-banner,header.sc-ic-classification-banner,hgroup.sc-ic-classification-banner,menu.sc-ic-classification-banner,nav.sc-ic-classification-banner,output.sc-ic-classification-banner,ruby.sc-ic-classification-banner,section.sc-ic-classification-banner,summary.sc-ic-classification-banner,time.sc-ic-classification-banner,mark.sc-ic-classification-banner,audio.sc-ic-classification-banner,video.sc-ic-classification-banner{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-classification-banner-h{position:fixed;left:0;bottom:0;width:100%;height:var(--ic-space-lg);z-index:var(--ic-z-index-classification-banner)}/*!@:host(.inline)*/.inline.sc-ic-classification-banner-h{position:static;left:auto;bottom:auto}/*!@.classification-banner*/.classification-banner.sc-ic-classification-banner{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:var(--ic-space-xxxs) var(--ic-space-md)}/*!@.default*/.default.sc-ic-classification-banner{background-color:var(--ic-classification-not-set);color:var(--ic-classification-not-set-foreground)}/*!@.official,\n.official-sensitive*/.official.sc-ic-classification-banner,.official-sensitive.sc-ic-classification-banner{background-color:var(--ic-classification-official);color:var(--ic-classification-official-foreground)}/*!@.secret*/.secret.sc-ic-classification-banner{background-color:var(--ic-classification-secret);color:var(--ic-classification-secret-foreground)}/*!@.top-secret*/.top-secret.sc-ic-classification-banner{background-color:var(--ic-classification-top-secret);color:var(--ic-classification-top-secret-foreground)}/*!@.offscreen*/.offscreen.sc-ic-classification-banner{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}@media (forced-colors: active){/*!@.classification-banner*/.classification-banner.sc-ic-classification-banner{border:var(--ic-hc-border)}}";
+
+const classificationText = {
+    default: "protective marking not set",
+    official: "official",
+    "official-sensitive": "official sensitive",
+    secret: "secret",
+    "top-secret": "top secret",
 };
-const getSlotElements = (slot) => {
-    const slotContent = slot.firstElementChild;
-    if (slotContent !== null) {
-        const elements = slotContent.assignedElements
-            ? slotContent.assignedElements()
-            : slotContent.childNodes;
-        return elements.length ? elements : slot.tagName ? [slot] : null;
+class ClassificationBanner {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.additionalSelectors = "";
+        this.classification = "default";
+        this.country = "uk";
+        this.inline = false;
+        this.upTo = false;
     }
-    else {
-        //check for single element
-        return slot === null ? null : [slot];
+    render() {
+        const { inline, upTo } = this;
+        // In case of unrecognized props, fallback to default
+        let { country, additionalSelectors, classification } = this;
+        if (!country)
+            country = "";
+        if (!additionalSelectors)
+            additionalSelectors = "";
+        if (!classification ||
+            (classification && !classificationText[classification]))
+            classification = "default";
+        return (hAsync(Host, { class: { ["inline"]: inline } }, hAsync("banner", { "aria-label": "Protective marking", class: {
+                ["classification-banner"]: true,
+                [`${classification}`]: classification,
+            } }, classification !== "default" ? (hAsync("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, hAsync("ic-typography", { variant: "caption-uppercase" }, classification === "default"
+            ? classificationText[classification]
+            : `${upTo ? "up to" : ""} 
+               ${country} 
+               ${classificationText[classification]} 
+               ${additionalSelectors}`))));
     }
-};
-({
-    XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")),
-    S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")),
-    M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")),
-    L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")),
-    XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")),
-    UNDEFINED: 1200,
-});
-const isSlotUsed = (element, slotName) => Array.from(element.children).some((child) => child.getAttribute("slot") === slotName);
-const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
-const getInputHelperTextID = (id) => id + "-helper-text";
-const getInputValidationTextID = (id) => id + "-validation-text";
-const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
-const isMobileOrTablet = () => "maxTouchPoints" in navigator ? navigator.maxTouchPoints > 0 : false;
+    static get style() { return icClassificationBannerCss; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ic-classification-banner",
+        "$members$": {
+            "additionalSelectors": [1, "additional-selectors"],
+            "classification": [1],
+            "country": [1],
+            "inline": [4],
+            "upTo": [4, "up-to"]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const icDataEntityCss = "/*!@html*/html.sc-ic-data-entity{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-data-entity{margin:0}/*!@main*/main.sc-ic-data-entity{display:block}/*!@h1*/h1.sc-ic-data-entity{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-data-entity{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-data-entity{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-data-entity{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-data-entity{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-data-entity,strong.sc-ic-data-entity{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-data-entity,kbd.sc-ic-data-entity,samp.sc-ic-data-entity{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-data-entity{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-data-entity,sup.sc-ic-data-entity{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-data-entity{bottom:-0.25em}/*!@sup*/sup.sc-ic-data-entity{top:-0.5em}/*!@img*/img.sc-ic-data-entity{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-data-entity,input.sc-ic-data-entity,optgroup.sc-ic-data-entity,select.sc-ic-data-entity,textarea.sc-ic-data-entity{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-data-entity,input.sc-ic-data-entity{overflow:visible}/*!@button,\nselect*/button.sc-ic-data-entity,select.sc-ic-data-entity{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-data-entity,[type=\"button\"].sc-ic-data-entity,[type=\"reset\"].sc-ic-data-entity,[type=\"submit\"].sc-ic-data-entity{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-data-entity::-moz-focus-inner,[type=\"button\"].sc-ic-data-entity::-moz-focus-inner,[type=\"reset\"].sc-ic-data-entity::-moz-focus-inner,[type=\"submit\"].sc-ic-data-entity::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-data-entity:-moz-focusring,[type=\"button\"].sc-ic-data-entity:-moz-focusring,[type=\"reset\"].sc-ic-data-entity:-moz-focusring,[type=\"submit\"].sc-ic-data-entity:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-data-entity{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-data-entity{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-data-entity{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-data-entity{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-data-entity,[type=\"radio\"].sc-ic-data-entity{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-data-entity::-webkit-inner-spin-button,[type=\"number\"].sc-ic-data-entity::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-data-entity{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-data-entity::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-data-entity::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-data-entity{display:block}/*!@summary*/summary.sc-ic-data-entity{display:list-item}/*!@template*/template.sc-ic-data-entity{display:none}/*!@[hidden]*/[hidden].sc-ic-data-entity{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-data-entity,body.sc-ic-data-entity,div.sc-ic-data-entity,span.sc-ic-data-entity,applet.sc-ic-data-entity,object.sc-ic-data-entity,iframe.sc-ic-data-entity,h1.sc-ic-data-entity,h2.sc-ic-data-entity,h3.sc-ic-data-entity,h4.sc-ic-data-entity,h5.sc-ic-data-entity,h6.sc-ic-data-entity,p.sc-ic-data-entity,blockquote.sc-ic-data-entity,pre.sc-ic-data-entity,a.sc-ic-data-entity,abbr.sc-ic-data-entity,acronym.sc-ic-data-entity,address.sc-ic-data-entity,big.sc-ic-data-entity,cite.sc-ic-data-entity,code.sc-ic-data-entity,del.sc-ic-data-entity,dfn.sc-ic-data-entity,em.sc-ic-data-entity,img.sc-ic-data-entity,ins.sc-ic-data-entity,kbd.sc-ic-data-entity,q.sc-ic-data-entity,s.sc-ic-data-entity,samp.sc-ic-data-entity,small.sc-ic-data-entity,strike.sc-ic-data-entity,strong.sc-ic-data-entity,sub.sc-ic-data-entity,sup.sc-ic-data-entity,tt.sc-ic-data-entity,var.sc-ic-data-entity,b.sc-ic-data-entity,u.sc-ic-data-entity,i.sc-ic-data-entity,center.sc-ic-data-entity,dl.sc-ic-data-entity,dt.sc-ic-data-entity,dd.sc-ic-data-entity,ol.sc-ic-data-entity,ul.sc-ic-data-entity,li.sc-ic-data-entity,fieldset.sc-ic-data-entity,form.sc-ic-data-entity,label.sc-ic-data-entity,legend.sc-ic-data-entity,table.sc-ic-data-entity,caption.sc-ic-data-entity,tbody.sc-ic-data-entity,tfoot.sc-ic-data-entity,thead.sc-ic-data-entity,tr.sc-ic-data-entity,th.sc-ic-data-entity,td.sc-ic-data-entity,article.sc-ic-data-entity,aside.sc-ic-data-entity,canvas.sc-ic-data-entity,details.sc-ic-data-entity,embed.sc-ic-data-entity,figure.sc-ic-data-entity,figcaption.sc-ic-data-entity,footer.sc-ic-data-entity,header.sc-ic-data-entity,hgroup.sc-ic-data-entity,menu.sc-ic-data-entity,nav.sc-ic-data-entity,output.sc-ic-data-entity,ruby.sc-ic-data-entity,section.sc-ic-data-entity,summary.sc-ic-data-entity,time.sc-ic-data-entity,mark.sc-ic-data-entity,audio.sc-ic-data-entity,video.sc-ic-data-entity{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-data-entity-h{display:block}/*!@.rows*/.rows.sc-ic-data-entity{display:flex;flex-direction:column;gap:var(--ic-space-md)}/*!@:host(.small) .rows*/.small.sc-ic-data-entity-h .rows.sc-ic-data-entity{gap:var(--ic-space-xs)}/*!@.divider*/.divider.sc-ic-data-entity{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-architectural-300)}/*!@:host(.small) .divider*/.small.sc-ic-data-entity-h .divider.sc-ic-data-entity{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}@media (forced-colors: active){/*!@.divider*/.divider.sc-ic-data-entity{background-color:canvastext}}";
+
 /**
- * Extracts the label using the value from an object. Requires the object to have a label and value property.
- * @param value - value from object
- * @param options - list of menu items
- * @returns - label corresponding to value
+ * @slot heading - Content will be placed at the top of the data entity.
  */
-const getLabelFromValue = (value, options, valueField = "value", labelField = "label") => {
-    const ungroupedOptions = [];
-    if (options.length > 0 && options.map) {
-        options.map((option) => {
-            if (option.children) {
-                option.children.map((option) => ungroupedOptions.push(option));
-            }
-            else {
-                ungroupedOptions.push(option);
-            }
-        });
-        const matchingValue = ungroupedOptions.find((option) => option[valueField] === value);
-        if (matchingValue !== undefined)
-            return matchingValue[labelField];
+class DataEntity {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.size = "default";
+        this.small = false;
     }
-    return undefined;
-};
-/**
- * Filters the options based on the search string.
- * @param options - array of options
- * @param includeDescriptions - determines whether option descriptions are included when filtering options
- * @param searchString - string used to filter the options
- * @param position - whether the search string matches the start of or anywhere in the options
- * @returns filtered array of options
- */
-const getFilteredMenuOptions = (options, includeDescriptions, searchString, position, labelField = "label") => options.filter((option) => {
-    var _a;
-    const label = option[labelField].toLowerCase();
-    const description = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    const lowerSearchString = searchString.toLowerCase();
-    return position === "anywhere"
-        ? includeDescriptions
-            ? label.includes(lowerSearchString) ||
-                (description === null || description === void 0 ? void 0 : description.includes(lowerSearchString))
-            : label.includes(lowerSearchString)
-        : includeDescriptions
-            ? label.startsWith(lowerSearchString) ||
-                (description === null || description === void 0 ? void 0 : description.startsWith(lowerSearchString))
-            : label.startsWith(lowerSearchString);
-});
+    render() {
+        const { el, heading, small, size } = this;
+        if (small || size === "small") {
+            Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
+        }
+        return (hAsync(Host, { class: { small: small || size === "small" } }, hAsync("div", { class: "heading", id: "data-entity-heading" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h3" }, heading))), hAsync("div", { class: "divider" }), hAsync("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, hAsync("slot", null))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return icDataEntityCss; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ic-data-entity",
+        "$members$": {
+            "heading": [1],
+            "size": [1],
+            "small": [4]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const icDataRowCss = "/*!@html*/html.sc-ic-data-row{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-data-row{margin:0}/*!@main*/main.sc-ic-data-row{display:block}/*!@h1*/h1.sc-ic-data-row{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-data-row{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-data-row{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-data-row{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-data-row{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-data-row,strong.sc-ic-data-row{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-data-row,kbd.sc-ic-data-row,samp.sc-ic-data-row{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-data-row{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-data-row,sup.sc-ic-data-row{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-data-row{bottom:-0.25em}/*!@sup*/sup.sc-ic-data-row{top:-0.5em}/*!@img*/img.sc-ic-data-row{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-data-row,input.sc-ic-data-row,optgroup.sc-ic-data-row,select.sc-ic-data-row,textarea.sc-ic-data-row{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-data-row,input.sc-ic-data-row{overflow:visible}/*!@button,\nselect*/button.sc-ic-data-row,select.sc-ic-data-row{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-data-row,[type=\"button\"].sc-ic-data-row,[type=\"reset\"].sc-ic-data-row,[type=\"submit\"].sc-ic-data-row{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-data-row::-moz-focus-inner,[type=\"button\"].sc-ic-data-row::-moz-focus-inner,[type=\"reset\"].sc-ic-data-row::-moz-focus-inner,[type=\"submit\"].sc-ic-data-row::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-data-row:-moz-focusring,[type=\"button\"].sc-ic-data-row:-moz-focusring,[type=\"reset\"].sc-ic-data-row:-moz-focusring,[type=\"submit\"].sc-ic-data-row:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-data-row{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-data-row{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-data-row{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-data-row{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-data-row,[type=\"radio\"].sc-ic-data-row{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-data-row::-webkit-inner-spin-button,[type=\"number\"].sc-ic-data-row::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-data-row{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-data-row::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-data-row::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-data-row{display:block}/*!@summary*/summary.sc-ic-data-row{display:list-item}/*!@template*/template.sc-ic-data-row{display:none}/*!@[hidden]*/[hidden].sc-ic-data-row{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-data-row,body.sc-ic-data-row,div.sc-ic-data-row,span.sc-ic-data-row,applet.sc-ic-data-row,object.sc-ic-data-row,iframe.sc-ic-data-row,h1.sc-ic-data-row,h2.sc-ic-data-row,h3.sc-ic-data-row,h4.sc-ic-data-row,h5.sc-ic-data-row,h6.sc-ic-data-row,p.sc-ic-data-row,blockquote.sc-ic-data-row,pre.sc-ic-data-row,a.sc-ic-data-row,abbr.sc-ic-data-row,acronym.sc-ic-data-row,address.sc-ic-data-row,big.sc-ic-data-row,cite.sc-ic-data-row,code.sc-ic-data-row,del.sc-ic-data-row,dfn.sc-ic-data-row,em.sc-ic-data-row,img.sc-ic-data-row,ins.sc-ic-data-row,kbd.sc-ic-data-row,q.sc-ic-data-row,s.sc-ic-data-row,samp.sc-ic-data-row,small.sc-ic-data-row,strike.sc-ic-data-row,strong.sc-ic-data-row,sub.sc-ic-data-row,sup.sc-ic-data-row,tt.sc-ic-data-row,var.sc-ic-data-row,b.sc-ic-data-row,u.sc-ic-data-row,i.sc-ic-data-row,center.sc-ic-data-row,dl.sc-ic-data-row,dt.sc-ic-data-row,dd.sc-ic-data-row,ol.sc-ic-data-row,ul.sc-ic-data-row,li.sc-ic-data-row,fieldset.sc-ic-data-row,form.sc-ic-data-row,label.sc-ic-data-row,legend.sc-ic-data-row,table.sc-ic-data-row,caption.sc-ic-data-row,tbody.sc-ic-data-row,tfoot.sc-ic-data-row,thead.sc-ic-data-row,tr.sc-ic-data-row,th.sc-ic-data-row,td.sc-ic-data-row,article.sc-ic-data-row,aside.sc-ic-data-row,canvas.sc-ic-data-row,details.sc-ic-data-row,embed.sc-ic-data-row,figure.sc-ic-data-row,figcaption.sc-ic-data-row,footer.sc-ic-data-row,header.sc-ic-data-row,hgroup.sc-ic-data-row,menu.sc-ic-data-row,nav.sc-ic-data-row,output.sc-ic-data-row,ruby.sc-ic-data-row,section.sc-ic-data-row,summary.sc-ic-data-row,time.sc-ic-data-row,mark.sc-ic-data-row,audio.sc-ic-data-row,video.sc-ic-data-row{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-data-row-h{position:relative;display:block}/*!@.data*/.data.sc-ic-data-row{display:flex;align-items:center}/*!@.text-cells*/.text-cells.sc-ic-data-row{display:flex;flex-grow:1;min-width:0}/*!@.label*/.label.sc-ic-data-row{width:12.5rem;min-width:12.5rem;margin-right:var(--ic-space-md);color:var(--ic-color-tertiary-text)}/*!@.value*/.value.sc-ic-data-row{flex-grow:1}/*!@slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label])*/slot[name=\"value\"].sc-ic-data-row-s>ic-text-field[readonly][hide-label]{margin-top:calc(var(--ic-space-xs) * -1)}/*!@slot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label])*/slot[name=\"value\"].sc-ic-data-row-s>ic-text-field[small][readonly][hide-label]{margin-top:calc(var(--ic-space-xxs) * -1)}/*!@slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows])*/slot[name=\"value\"].sc-ic-data-row-s>ic-text-field[readonly][hide-label][rows]{margin-top:calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs))}/*!@.end-component*/.end-component.sc-ic-data-row{width:-moz-fit-content;width:fit-content;margin-left:3.5rem}/*!@.divider*/.divider.sc-ic-data-row{margin-top:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-architectural-300)}/*!@:host(.small) .divider*/.small.sc-ic-data-row-h .divider.sc-ic-data-row{margin-top:var(--ic-space-xs)}/*!@:host(.breakpoint-medium) .label*/.breakpoint-medium.sc-ic-data-row-h .label.sc-ic-data-row{width:10rem;min-width:10rem}/*!@:host(.breakpoint-xs) .text-cells*/.breakpoint-xs.sc-ic-data-row-h .text-cells.sc-ic-data-row{flex-direction:column}/*!@:host(.breakpoint-xs) .label*/.breakpoint-xs.sc-ic-data-row-h .label.sc-ic-data-row{width:8rem;margin-bottom:var(--ic-space-xs)}/*!@:host(.breakpoint-xs) .value*/.breakpoint-xs.sc-ic-data-row-h .value.sc-ic-data-row{max-width:95%}/*!@:host(.breakpoint-xs) .end-component*/.breakpoint-xs.sc-ic-data-row-h .end-component.sc-ic-data-row{margin-left:0}@media (forced-colors: active){/*!@.divider*/.divider.sc-ic-data-row{background-color:canvastext}}";
+
 /**
- * Gets count of options where only group title "parent" options have been removed.
- * Disabled options are included in the count.
- * @param options - array of options
- * @returns number of options not including group titles
+ * @slot label - Content will be rendered in the leftmost cell.
+ * @slot value - Content will be rendered to the right of the label.
+ * @slot end-component - Content will be displayed in the rightmost cell.
  */
-const getOptionsWithoutGroupTitlesCount = (options) => {
-    const optionsWithoutGroupTitles = [];
-    if (options.length > 0 && options.map) {
-        options.map((option) => {
-            if (option.children) {
-                option.children.map((option) => optionsWithoutGroupTitles.push(option));
-            }
-            else {
-                optionsWithoutGroupTitles.push(option);
-            }
-        });
-    }
-    return optionsWithoutGroupTitles.length;
-};
-const isNumeric = (value) => {
-    return /^-?\d+$/.test(value);
-};
-const hasValidationStatus = (status, disabled) => {
-    return status !== "" && !disabled;
-};
-const onComponentRequiredPropUndefined = (props, component) => {
-    for (let i = 0; i < props.length; i++) {
-        const { prop, propName } = props[i];
-        if (prop === null || prop === undefined) {
-            console.error(`No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(propName)}' (react) required`);
-        }
+class DataRow {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hasEndComponent = false;
+        this.resizeObserver = null;
+        this.runResizeObserver = () => {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkLabelAbove();
+            });
+            this.resizeObserver.observe(this.el);
+        };
+        this.renderCellContent = (cell) => {
+            const isValue = cell === "value";
+            return (hAsync("div", { class: cell }, isSlotUsed$1(this.el, cell) ? (hAsync("slot", { name: cell })) : (hAsync("ic-typography", { variant: isValue
+                    ? "body"
+                    : this.entitySize === "xs"
+                        ? "label"
+                        : "subtitle-large" }, isValue ? this.value : this.label))));
+        };
+        this.deviceSize = DEVICE_SIZES.XL;
+        this.entitySize = undefined;
+        this.label = undefined;
+        this.size = "default";
+        this.small = false;
+        this.value = undefined;
     }
-};
-const kebabToCamelCase = (kebabCase) => {
-    kebabCase = kebabCase.toLowerCase();
-    const individualWords = kebabCase.split("-");
-    let camelCase = individualWords[0];
-    for (let i = 1; i < individualWords.length; i++) {
-        camelCase +=
-            individualWords[i].substring(0, 1).toUpperCase() +
-                individualWords[i].substring(1);
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
-    return camelCase;
-};
-const checkResizeObserver = (callbackFn) => {
-    if (typeof window !== "undefined" &&
-        typeof window.ResizeObserver !== "undefined") {
-        callbackFn();
+    componentWillLoad() {
+        this.deviceSize = getCurrentDeviceSize();
+        this.hasEndComponent = slotHasContent(this.el, "end-component");
+        this.checkLabelAbove();
     }
-};
-const getForm = (el) => el.closest("FORM");
-const addFormResetListener = (el, callbackFn) => {
-    const form = getForm(el);
-    if (form !== null) {
-        form.addEventListener("reset", callbackFn);
+    componentDidLoad() {
+        checkResizeObserver$1(this.runResizeObserver);
+        if (this.hasEndComponent)
+            this.labelEndComponent();
     }
-};
-const removeFormResetListener = (el, callbackFn) => {
-    const form = getForm(el);
-    if (form !== null) {
-        form.removeEventListener("reset", callbackFn);
+    checkLabelAbove() {
+        var _a;
+        const rowSize = ((_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth) + 46;
+        if (rowSize) {
+            this.entitySize =
+                rowSize < DEVICE_SIZES.S ? "xs" : rowSize < DEVICE_SIZES.M ? "m" : "xl";
+        }
     }
-};
-const removeDisabledFalse = (disabled, element) => {
-    if (!disabled) {
-        element.removeAttribute("disabled");
+    labelEndComponent() {
+        this.el.shadowRoot
+            .querySelectorAll("slot[name=end-component]")
+            .forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
     }
-};
-const isMacDevice = () => {
-    return window.navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
-};
-const capitalize = (text) => {
-    return text.charAt(0).toUpperCase() + text.slice(1);
-};
+    render() {
+        const { el, entitySize, hasEndComponent, label, renderCellContent, size, small, value, } = this;
+        return (hAsync(Host, { class: {
+                ["small"]: small || size === "small",
+                ["breakpoint-medium"]: entitySize === "m",
+                ["breakpoint-xs"]: entitySize === "xs",
+            }, role: "listitem" }, hAsync("div", { class: "data" }, hAsync("div", { class: "text-cells" }, (isSlotUsed$1(el, "label") || label) && renderCellContent("label"), (isSlotUsed$1(el, "value") || value) && renderCellContent("value")), hasEndComponent && (hAsync("div", { class: "end-component" }, hAsync("slot", { name: "end-component" })))), hAsync("div", { class: "divider" })));
+    }
+    get el() { return getElement(this); }
+    static get style() { return icDataRowCss; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ic-data-row",
+        "$members$": {
+            "label": [1],
+            "size": [1],
+            "small": [4],
+            "value": [1],
+            "deviceSize": [32],
+            "entitySize": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+var unsortedIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+    <path d="M9 3 5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"></path>
+</svg>`;
 
-const icDataTableCss = "/*!@:host*/.sc-ic-data-table-h{position:relative;display:block;height:100%;max-height:100%}/*!@.table-container*/.table-container.sc-ic-data-table{position:relative;height:calc(100% - var(--ic-space-xxxs))}/*!@ic-loading-indicator*/ic-loading-indicator.sc-ic-data-table{position:sticky;top:20px}/*!@.table-row-container*/.table-row-container.sc-ic-data-table{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}/*!@:host([show-pagination=\"true\"]) .table-row-container*/[show-pagination=\"true\"].sc-ic-data-table-h .table-row-container.sc-ic-data-table{height:calc(100% - 3.5625rem)}/*!@table*/table.sc-ic-data-table{table-layout:fixed;border-spacing:0;width:100%}/*!@.table-row-container:focus*/.table-row-container.sc-ic-data-table:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}/*!@:host([embedded=\"true\"]) .table-row-container*/[embedded=\"true\"].sc-ic-data-table-h .table-row-container.sc-ic-data-table{border:var(--ic-border-light)}/*!@.column-header-sticky*/.column-header-sticky.sc-ic-data-table{position:sticky;top:0;z-index:1}/*!@.column-header-overlay*/.column-header-overlay.sc-ic-data-table{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}/*!@.row-header-sticky*/.row-header-sticky.sc-ic-data-table{position:sticky;left:0}/*!@.column-header,\n.table-row*/.column-header.sc-ic-data-table,.table-row.sc-ic-data-table{box-sizing:border-box}/*!@.table-row-selected*/.table-row-selected.sc-ic-data-table{background-color:var(--ic-table-row-selected) !important}/*!@.sort-button*/.sort-button.sc-ic-data-table{margin-left:auto}/*!@.sort-button:hover*/.sort-button.sc-ic-data-table:hover{background-color:var(--ic-action-dark-bg-hover)}/*!@.sort-button:active*/.sort-button.sc-ic-data-table:active{background-color:var(--ic-action-dark-bg-active)}/*!@.sort-button svg*/.sort-button.sc-ic-data-table svg.sc-ic-data-table{color:var(--ic-architectural-black)}/*!@.sort-button-unsorted svg*/.sort-button-unsorted.sc-ic-data-table svg.sc-ic-data-table{color:var(--ic-color-tertiary-text)}/*!@.table-density-dense*/.table-density-dense.sc-ic-data-table{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}/*!@.text-dense*/.text-dense.sc-ic-data-table{font-size:var(--ic-font-size-label)}/*!@.table-density-spacious*/.table-density-spacious.sc-ic-data-table{padding:0.625rem var(--ic-space-xs) !important}/*!@.text-spacious*/.text-spacious.sc-ic-data-table{font-size:1.125rem}/*!@.column-header-text*/.column-header-text.sc-ic-data-table{font-weight:var(--ic-font-weight-bold)}/*!@.column-header,\n.row-header*/.column-header.sc-ic-data-table,.row-header.sc-ic-data-table{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}/*!@.column-header:last-child*/.column-header.sc-ic-data-table:last-child{border-right:none}/*!@.scrollable .column-header:last-child*/.scrollable.sc-ic-data-table .column-header.sc-ic-data-table:last-child{border-right:var(--ic-border-light) !important}/*!@:host([embedded=\"true\"]) tr:last-child .table-cell,\n:host([embedded=\"true\"]) tr:last-child .row-header*/[embedded=\"true\"].sc-ic-data-table-h tr.sc-ic-data-table:last-child .table-cell.sc-ic-data-table,[embedded=\"true\"].sc-ic-data-table-h tr.sc-ic-data-table:last-child .row-header.sc-ic-data-table{border-bottom:none}/*!@.column-header-alignment-left,\n.row-header-alignment-left,\n.cell-alignment-left*/.column-header-alignment-left.sc-ic-data-table,.row-header-alignment-left.sc-ic-data-table,.cell-alignment-left.sc-ic-data-table{text-align:left !important;justify-content:start !important}/*!@.column-header-alignment-right,\n.row-header-alignment-right,\n.cell-alignment-right*/.column-header-alignment-right.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table,.cell-alignment-right.sc-ic-data-table{text-align:right !important;justify-content:end !important}/*!@.column-header-alignment-center,\n.row-header-alignment-center,\n.cell-alignment-center*/.column-header-alignment-center.sc-ic-data-table,.row-header-alignment-center.sc-ic-data-table,.cell-alignment-center.sc-ic-data-table{text-align:center !important;justify-content:center !important}/*!@.table-row:nth-child(even)*/.table-row.sc-ic-data-table:nth-child(even){background-color:var(--ic-architectural-20)}/*!@.table-cell*/.table-cell.sc-ic-data-table{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px)}/*!@.data-type-string*/.data-type-string.sc-ic-data-table{text-align:left;vertical-align:top}/*!@.data-type-number,\n.data-type-date*/.data-type-number.sc-ic-data-table,.data-type-date.sc-ic-data-table{text-align:right;justify-content:end;vertical-align:top}/*!@.cell-alignment-top*/.cell-alignment-top.sc-ic-data-table{vertical-align:top}/*!@.cell-alignment-middle*/.cell-alignment-middle.sc-ic-data-table{vertical-align:middle}/*!@.cell-alignment-bottom*/.cell-alignment-bottom.sc-ic-data-table{vertical-align:bottom}/*!@.cell-emphasis-low*/.cell-emphasis-low.sc-ic-data-table{color:var(--ic-color-secondary-text)}/*!@.cell-emphasis-high*/.cell-emphasis-high.sc-ic-data-table{font-weight:var(--ic-font-weight-bold)}/*!@.pagination-container*/.pagination-container.sc-ic-data-table{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}/*!@.screen-reader-sort-text,\n.table-caption*/.screen-reader-sort-text.sc-ic-data-table,.table-caption.sc-ic-data-table{position:absolute;left:-100rem}/*!@.table-cell,\n.column-header,\n.row-header*/.table-cell.sc-ic-data-table,.column-header.sc-ic-data-table,.row-header.sc-ic-data-table{word-wrap:break-word;white-space:pre-wrap}/*!@.loading-empty*/.loading-empty.sc-ic-data-table{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}/*!@.updating-state*/.updating-state.sc-ic-data-table{padding:0;border-bottom:var(--ic-border-light)}/*!@.updating-state-headers*/.updating-state-headers.sc-ic-data-table{border-bottom:none}/*!@.loading*/.loading.sc-ic-data-table{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow)}/*!@.loading.show-background*/.loading.show-background.sc-ic-data-table{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}/*!@.loading.show*/.loading.show.sc-ic-data-table{opacity:1}/*!@.icon,\n::slotted(svg)*/.icon.sc-ic-data-table,.sc-ic-data-table-s>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}/*!@.column-header-alignment-right > .icon,\n.row-header-alignment-right > .icon,\n.cell-alignment-right > .icon,\n.column-header-alignment-right > ::slotted(svg),\n.row-header-alignment-right > ::slotted(svg),\n.cell-alignment-right > ::slotted(svg)*/.column-header-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.cell-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.column-header-alignment-right>.sc-ic-data-table-s>svg,.row-header-alignment-right>.sc-ic-data-table-s>svg,.cell-alignment-right>.sc-ic-data-table-s>svg{margin-right:auto}/*!@.column-header-alignment-center > ic-typography,\n.row-header-alignment-right > ic-typography,\n.cell-alignment-center > ic-typography*/.column-header-alignment-center.sc-ic-data-table>ic-typography.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table>ic-typography.sc-ic-data-table,.cell-alignment-center.sc-ic-data-table>ic-typography.sc-ic-data-table{flex:1}/*!@.icon > svg*/.icon.sc-ic-data-table>svg.sc-ic-data-table{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}@media screen and (min-width: 576px){/*!@.column-header-inner-container*/.column-header-inner-container.sc-ic-data-table{display:flex;align-items:center}/*!@.cell-container*/.cell-container.sc-ic-data-table{display:flex}}";
+var ascendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" style="transform: rotate(-90deg);">
+    <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
+</svg>`;
+
+var descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" style="transform: rotate(90deg)">
+    <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
+</svg>`;
+
+const icDataTableCss = "/*!@:host*/.sc-ic-data-table-h{position:relative;display:block;height:100%;max-height:100%}/*!@tbody*/tbody.sc-ic-data-table{vertical-align:top}/*!@.table-container*/.table-container.sc-ic-data-table{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column}/*!@.cell-container*/.cell-container.sc-ic-data-table{display:flex;min-height:1.5rem;overflow-y:hidden}/*!@.truncation-show-hide*/.truncation-show-hide.sc-ic-data-table{overflow:visible;display:block}/*!@.cell-icon.truncation-show-hide*/.cell-icon.truncation-show-hide.sc-ic-data-table{display:flex}/*!@.cell-container:not(.data-type-element, .truncation-show-hide)*/.cell-container.sc-ic-data-table:not(.data-type-element,.truncation-show-hide).sc-ic-data-table{overflow-x:hidden}/*!@ic-loading-indicator*/ic-loading-indicator.sc-ic-data-table{position:sticky;top:20px}/*!@.table-row-container*/.table-row-container.sc-ic-data-table{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}/*!@:host([show-pagination=\"true\"]) .table-row-container*/[show-pagination=\"true\"].sc-ic-data-table-h .table-row-container.sc-ic-data-table{height:calc(100% - 3.5625rem)}/*!@table*/table.sc-ic-data-table{table-layout:fixed;border-spacing:0;width:100%}/*!@.table-row-container:focus*/.table-row-container.sc-ic-data-table:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}/*!@:host([embedded=\"true\"]) .table-row-container*/[embedded=\"true\"].sc-ic-data-table-h .table-row-container.sc-ic-data-table{border:var(--ic-border-light)}/*!@.column-header-sticky*/.column-header-sticky.sc-ic-data-table{position:sticky;top:0;z-index:1}/*!@.column-header-overlay*/.column-header-overlay.sc-ic-data-table{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}/*!@.row-header-sticky*/.row-header-sticky.sc-ic-data-table{position:sticky;left:0}/*!@.column-header,\n.table-row*/.column-header.sc-ic-data-table,.table-row.sc-ic-data-table{box-sizing:border-box}/*!@.table-row-selected*/.table-row-selected.sc-ic-data-table{background-color:var(--ic-table-row-selected) !important}/*!@.sort-button*/.sort-button.sc-ic-data-table{margin-left:auto}/*!@.sort-button:hover*/.sort-button.sc-ic-data-table:hover{background-color:var(--ic-action-dark-bg-hover)}/*!@.sort-button:active*/.sort-button.sc-ic-data-table:active{background-color:var(--ic-action-dark-bg-active)}/*!@.sort-button svg*/.sort-button.sc-ic-data-table svg.sc-ic-data-table{color:var(--ic-architectural-black)}/*!@.sort-button-unsorted svg*/.sort-button-unsorted.sc-ic-data-table svg.sc-ic-data-table{color:var(--ic-color-tertiary-text)}/*!@.table-density-dense*/.table-density-dense.sc-ic-data-table{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}/*!@.text-dense*/.text-dense.sc-ic-data-table{font-size:var(--ic-font-size-label)}/*!@.table-density-spacious*/.table-density-spacious.sc-ic-data-table{padding:0.625rem var(--ic-space-xs) !important}/*!@.text-spacious*/.text-spacious.sc-ic-data-table{font-size:1.125rem}/*!@.column-header-text*/.column-header-text.sc-ic-data-table{font-weight:var(--ic-font-weight-bold)}/*!@.column-header,\n.row-header*/.column-header.sc-ic-data-table,.row-header.sc-ic-data-table{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}/*!@.column-header:last-child*/.column-header.sc-ic-data-table:last-child{border-right:none}/*!@.scrollable .column-header:last-child*/.scrollable.sc-ic-data-table .column-header.sc-ic-data-table:last-child{border-right:var(--ic-border-light) !important}/*!@:host([embedded=\"true\"]) tr:last-child .table-cell,\n:host([embedded=\"true\"]) tr:last-child .row-header*/[embedded=\"true\"].sc-ic-data-table-h tr.sc-ic-data-table:last-child .table-cell.sc-ic-data-table,[embedded=\"true\"].sc-ic-data-table-h tr.sc-ic-data-table:last-child .row-header.sc-ic-data-table{border-bottom:none}/*!@.column-header-alignment-left,\n.row-header-alignment-left,\n.cell-alignment-left*/.column-header-alignment-left.sc-ic-data-table,.row-header-alignment-left.sc-ic-data-table,.cell-alignment-left.sc-ic-data-table{text-align:left !important;justify-content:start !important}/*!@.column-header-alignment-right,\n.row-header-alignment-right,\n.cell-alignment-right*/.column-header-alignment-right.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table,.cell-alignment-right.sc-ic-data-table{text-align:right !important;justify-content:end !important}/*!@.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography*/.cell-alignment-right.truncation-tooltip.sc-ic-data-table ic-tooltip.sc-ic-data-table ic-typography.sc-ic-data-table{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}/*!@.cell-alignment-right.truncation-show-hide ic-typography*/.cell-alignment-right.truncation-show-hide.sc-ic-data-table ic-typography.sc-ic-data-table{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}/*!@.column-header-alignment-center,\n.row-header-alignment-center,\n.cell-alignment-center*/.column-header-alignment-center.sc-ic-data-table,.row-header-alignment-center.sc-ic-data-table,.cell-alignment-center.sc-ic-data-table{text-align:center !important;justify-content:center !important}/*!@.table-row:nth-child(even)*/.table-row.sc-ic-data-table:nth-child(even){background-color:var(--ic-architectural-20)}/*!@.table-cell*/.table-cell.sc-ic-data-table{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px);overflow:hidden}/*!@.data-type-string,\n.data-type-address*/.data-type-string.sc-ic-data-table,.data-type-address.sc-ic-data-table{text-align:left;vertical-align:top}/*!@.data-type-number,\n.data-type-date*/.data-type-number.sc-ic-data-table,.data-type-date.sc-ic-data-table{text-align:right;justify-content:end;vertical-align:top}/*!@.cell-alignment-top*/.cell-alignment-top.sc-ic-data-table{vertical-align:top;align-items:flex-start}/*!@.cell-alignment-middle*/.cell-alignment-middle.sc-ic-data-table{vertical-align:middle;align-items:center}/*!@.cell-alignment-bottom*/.cell-alignment-bottom.sc-ic-data-table{vertical-align:bottom;align-items:flex-end}/*!@.cell-emphasis-low*/.cell-emphasis-low.sc-ic-data-table{color:var(--ic-color-secondary-text)}/*!@.cell-emphasis-high*/.cell-emphasis-high.sc-ic-data-table{font-weight:var(--ic-font-weight-bold)}/*!@.pagination-container*/.pagination-container.sc-ic-data-table{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}/*!@.screen-reader-sort-text,\n.table-caption*/.screen-reader-sort-text.sc-ic-data-table,.table-caption.sc-ic-data-table{position:absolute;left:-100rem}/*!@.table-cell,\n.column-header,\n.row-header*/.table-cell.sc-ic-data-table,.column-header.sc-ic-data-table,.row-header.sc-ic-data-table{word-wrap:break-word;white-space:pre-wrap}/*!@.loading-empty*/.loading-empty.sc-ic-data-table{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}/*!@.updating-state*/.updating-state.sc-ic-data-table{padding:0;border-bottom:var(--ic-border-light)}/*!@.updating-state-headers*/.updating-state-headers.sc-ic-data-table{border-bottom:none}/*!@.loading*/.loading.sc-ic-data-table{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow)}/*!@.loading.show-background*/.loading.show-background.sc-ic-data-table{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}/*!@.loading.show*/.loading.show.sc-ic-data-table{opacity:1}/*!@.icon,\n::slotted(svg)*/.icon.sc-ic-data-table,.sc-ic-data-table-s>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}/*!@.column-header-alignment-right > .icon,\n.row-header-alignment-right > .icon,\n.cell-alignment-right > .icon,\n.column-header-alignment-right > ::slotted(svg),\n.row-header-alignment-right > ::slotted(svg),\n.cell-alignment-right > ::slotted(svg)*/.column-header-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.cell-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.column-header-alignment-right>.sc-ic-data-table-s>svg,.row-header-alignment-right>.sc-ic-data-table-s>svg,.cell-alignment-right>.sc-ic-data-table-s>svg{margin-right:auto}/*!@.column-header-alignment-center > ic-typography,\n.row-header-alignment-right > ic-typography,\n.cell-alignment-center > ic-typography*/.column-header-alignment-center.sc-ic-data-table>ic-typography.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table>ic-typography.sc-ic-data-table,.cell-alignment-center.sc-ic-data-table>ic-typography.sc-ic-data-table{flex:1}/*!@.icon > svg*/.icon.sc-ic-data-table>svg.sc-ic-data-table{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}/*!@.truncation-tooltip ic-typography*/.truncation-tooltip.sc-ic-data-table ic-typography.sc-ic-data-table{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}/*!@.truncation-tooltip ic-typography,\n.truncation-show-hide ic-typography*/.truncation-tooltip.sc-ic-data-table ic-typography.sc-ic-data-table,.truncation-show-hide.sc-ic-data-table ic-typography.sc-ic-data-table{white-space:normal}/*!@.ic-tooltip-overflow*/.ic-tooltip-overflow.sc-ic-data-table{overflow:hidden}@media screen and (min-width: 576px){/*!@.column-header-inner-container*/.column-header-inner-container.sc-ic-data-table{display:flex;align-items:center}}";
 
-const DENSITY_HEIGHT_MULTIPLIER = {
-    dense: 0.8,
-    default: 1,
-    spacious: 1.2,
-};
-const SORT_ICONS = {
-    unsorted: unsortedIcon,
-    ascending: ascendingIcon,
-    descending: descendingIcon,
-};
 /**
  * @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.
  * @slot {COLUMN_KEY}-{ROW_INDEX}[-icon] - Each cell should have its own slot, named using the column tag and the row index, allowing for custom elements to be displayed. Include `-icon` at the end for that cell's icon slot.
@@ -10415,7 +10668,155 @@ class DataTable {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.icRowHeightChange = createEvent(this, "icRowHeightChange", 7);
+        this.DENSITY_HEIGHT_MULTIPLIER = {
+            dense: 0.8,
+            default: 1,
+            spacious: 1.2,
+        };
+        this.DENSITY_PADDING_HEIGHT_DIFF = {
+            dense: 8,
+            default: 16,
+            spacious: 20,
+        };
+        this.SORT_ICONS = {
+            unsorted: unsortedIcon,
+            ascending: ascendingIcon,
+            descending: descendingIcon,
+        };
         this.hasLoadedForOneSecond = true;
+        this.resizeObserver = null;
+        this.SHOW_HIDE_STRING = "show-hide";
+        this.SHOW_HIDE_CSS_CLASS = `${this.SHOW_HIDE_STRING}-wrap`;
+        this.TOOLTIP_STRING = "tooltip";
+        this.TOOLTIP = `ic-${this.TOOLTIP_STRING}`;
+        this.TEXT_WRAP_STRING = "text-wrap";
+        this.TEXT_WRAP_CLASS = `.${this.TEXT_WRAP_STRING}`;
+        this.dataUpdated = false;
+        this.rowHeightSet = false;
+        this.initialLoad = false;
+        this.icPageChangeEvent = false;
+        this.itemsPerPageChange = false;
+        this.DATA_ROW_HEIGHT_STRING = "data-row-height";
+        this.DEFAULT_LINE_HEIGHT = 24;
+        this.densityUpdate = false;
+        this.updateSetRowHeight = (typographyEl) => {
+            const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            if (typographyEl) {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const rowHeight = fontSize *
+                    parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                if (typographyEl.scrollHeight > rowHeight) {
+                    cellContainer.style.removeProperty("height");
+                }
+            }
+            else {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    const rowHeight = fontSize *
+                        parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    if (typographyEl.scrollHeight > rowHeight) {
+                        cellContainer.style.removeProperty("height");
+                    }
+                });
+            }
+        };
+        this.debounceDataTruncation = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
+                    this.resizeObserver = new ResizeObserver(
+                    // This gets triggered twice due to updated data and see more/see less button
+                    debounce$2(() => {
+                        // console.log("resizeObserver triggered");
+                        this.dataTruncation(typographyEl);
+                    }, 200));
+                    this.resizeObserver.observe(typographyEl);
+                }
+            });
+        };
+        this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
+        this.truncate = (typographyEl, cellContainer, tooltip) => {
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                //24 is the height of a single line
+                if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                    if (this.truncationPattern === this.TOOLTIP_STRING) {
+                        this.addTooltipTruncation(typographyEl, cellContainer, tooltip);
+                    }
+                    if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                }
+            }
+            else {
+                if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
+                    typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
+                    cellContainer.appendChild(typographyEl);
+                    tooltip.remove();
+                }
+                if (this.truncationPattern === this.SHOW_HIDE_STRING &&
+                    !isEmptyString(typographyEl.getAttribute("max-lines"))) {
+                    this.resetShowHideTruncation(typographyEl);
+                }
+            }
+        };
+        this.dataTruncation = (typographyEl) => {
+            // Tooltip truncation mentioned in AC. Will need revisiting
+            const tooltip = this.getTooltip(typographyEl);
+            const cellContainer = this.getCellContainer(typographyEl);
+            if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.classList.contains("data-type-element")) ||
+                this.dataUpdated) {
+                return;
+            }
+            if (this.truncationPattern === this.SHOW_HIDE_STRING &&
+                typographyEl.shadowRoot.querySelector("button")) {
+                const showHideBtn = typographyEl.shadowRoot.querySelector("button");
+                // If the see more/see less is present and the max lines is equal to the cell container
+                // remove the see more/see less button
+                if (showHideBtn) {
+                    const truncWrapper = this.getTruncWrapper(typographyEl);
+                    if (this.getLines(truncWrapper.scrollHeight) ===
+                        +typographyEl.getAttribute("max-lines")) {
+                        this.resetShowHideTruncation(typographyEl);
+                    }
+                }
+            }
+            // Deals with setting and resetting row height and re-truncating data
+            if (this.rowHeightSet && this.truncationPattern === this.SHOW_HIDE_STRING) {
+                const truncWrapper = this.getTruncWrapper(typographyEl);
+                // cellContainer.clientHeight - 24 removes the extra line by see more/see less
+                if (truncWrapper &&
+                    cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
+                        truncWrapper.scrollHeight) {
+                    this.resetShowHideTruncation(typographyEl);
+                    return;
+                }
+                if (typographyEl.scrollHeight > cellContainer.clientHeight) {
+                    this.addShowHideTruncation(cellContainer, typographyEl);
+                    return;
+                }
+            }
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > 0 &&
+                (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > 0 &&
+                (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) === (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                if (tooltip) {
+                    this.removeTooltip(cellContainer, typographyEl, tooltip);
+                }
+                return;
+            }
+            this.truncate(typographyEl, cellContainer, tooltip);
+        };
+        this.removeTextWrap = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const tableCell = typographyEl.closest("td");
+                if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
+                    tableCell.classList.remove(this.TEXT_WRAP_STRING);
+                }
+            });
+        };
+        this.getCellContainer = (typographyEl) => {
+            return typographyEl.closest(".cell-container");
+        };
+        this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
+            array.forEach((val) => val.textWrap && delete val.textWrap);
         this.startLoadingTimer = () => {
             this.hasLoadedForOneSecond = false;
             this.timerStarted = Date.now();
@@ -10441,13 +10842,31 @@ class DataTable {
                 return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
             }
         };
+        this.getCellOptions = (cell, key) => {
+            if (!(this.isObject(cell) && Object.keys(cell).includes(key)))
+                return;
+            return this.getObjectValue(cell, key);
+        };
         this.createUpdatingIndicator = () => {
             const { appearance, description, max, min, progress } = this.updatingOptions || {};
             return (hAsync("th", { colSpan: this.columns.length, class: "updating-state" }, hAsync("ic-loading-indicator", { appearance: appearance, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
         };
+        this.setRowHeight = (height) => {
+            return pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
+                this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
+        };
+        this.setTruncationClass = () => {
+            if (this.truncationPattern) {
+                return { [`truncation-${this.truncationPattern}`]: true };
+            }
+            return {};
+        };
         this.createCells = (row, rowIndex) => {
+            var _a;
             const rowValues = Object.values(row);
             const rowKeys = Object.keys(row);
+            const index = rowIndex;
+            const rowOptions = this.getRowOptions(rowKeys, rowValues);
             let rowAlignment;
             let rowEmphasis;
             const headerIndex = rowKeys.indexOf("header");
@@ -10455,42 +10874,63 @@ class DataTable {
                 rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
                 rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
             }
+            const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index }));
+            const currentRowHeight = variableRowHeightVal
+                ? variableRowHeightVal !== "auto" && variableRowHeightVal
+                : this.globalRowHeight !== "auto" && this.globalRowHeight;
             return rowValues.map((cell, index) => {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 const columnProps = this.columns[index];
                 const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
                 const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
                 const cellValue = (key) => this.getObjectValue(cell, key);
-                return rowKeys[index] === "header" ? (hAsync("th", { scope: "row", colSpan: cellValue("colspan"), class: {
-                        ["row-header"]: true,
-                        [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
-                        ["row-header-sticky"]: this.stickyRowHeaders,
-                    } }, cellValue("title"))) : (hAsync("td", { class: {
-                        ["table-cell"]: true,
-                        [`table-density-${this.density}`]: this.notDefaultDensity(),
-                        [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
-                        [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
-                            rowAlignment ||
-                            this.getCellAlignment(cell, "vertical")}`]: !!((_b = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
-                            !!rowAlignment ||
-                            !!this.getCellAlignment(cell, "vertical"),
-                    } }, hAsync("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
-                        !isSlotUsed(this.el, cellSlotName)
-                        ? cell
-                        : null, class: {
-                        "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element",
-                        [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
-                        [`cell-alignment-${((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.horizontal) ||
-                            this.getCellAlignment(cell, "horizontal")}`]: !!((_d = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _d === void 0 ? void 0 : _d.horizontal) ||
-                            !!this.getCellAlignment(cell, "horizontal"),
-                    } }, isSlotUsed(this.el, cellSlotName) ? (hAsync("slot", { name: cellSlotName })) : (hAsync(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (hAsync("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _e === void 0 ? void 0 : _e.onAllCells)) && (hAsync("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), hAsync("ic-typography", { variant: "body", class: {
-                        [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
-                            (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                            rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
-                            !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                            !!rowEmphasis,
-                        [`text-${this.density}`]: this.notDefaultDensity(),
-                    } }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (hAsync("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))))))));
+                if (rowKeys[index] === "header") {
+                    return (hAsync("th", { scope: "row", colSpan: cellValue("colspan"), class: {
+                            ["row-header"]: true,
+                            [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
+                            ["row-header-sticky"]: this.stickyRowHeaders,
+                        } }, cellValue("title")));
+                }
+                if (rowKeys[index] !== "rowOptions") {
+                    return (hAsync("td", { class: {
+                            ["table-cell"]: true,
+                            [`table-density-${this.density}`]: this.notDefaultDensity(),
+                        } }, hAsync("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
+                            !isSlotUsed(this.el, cellSlotName)
+                            ? cell
+                            : null, class: Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
+                                ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
+                                rowAlignment ||
+                                this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
+                                !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
+                                !!rowAlignment ||
+                                !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
+                                ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
+                                this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
+                                !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
+                                !!this.getCellAlignment(cell, "horizontal"), [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true, [this.TEXT_WRAP_STRING]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) ||
+                                (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
+                                !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), style: {
+                            height: (this.truncationPattern || currentRowHeight) &&
+                                !columnProps.textWrap &&
+                                !rowOptions.textWrap &&
+                                !this.getCellOptions(cell, "textWrap") &&
+                                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element"
+                                ? this.setRowHeight(currentRowHeight)
+                                : null,
+                        }, "data-row-height": this.truncationPattern || currentRowHeight
+                            ? this.setRowHeight(currentRowHeight)
+                            : null }, isSlotUsed(this.el, cellSlotName) ? (hAsync("slot", { name: cellSlotName })) : (hAsync(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (hAsync("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_k = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _k === void 0 ? void 0 : _k.onAllCells)) && (hAsync("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
+                        !isSlotUsed(this.el, cellSlotName) && (hAsync("ic-typography", { variant: "body", class: {
+                            [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+                                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                                rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+                                !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                                !!rowEmphasis,
+                            [`text-${this.density}`]: this.notDefaultDensity(),
+                        } }, this.isObject(cell) &&
+                        (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (hAsync("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType)))))))));
+                }
             });
         };
         this.createColumnHeaders = () => {
@@ -10507,7 +10947,7 @@ class DataTable {
                     [`text-${this.density}`]: this.notDefaultDensity(),
                 } }, title), this.sortable && (hAsync("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
                 // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.sortRows(key), innerHTML: SORT_ICONS[this.sortedColumn === key
+                onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
                     ? this.sortedColumnOrder
                     : "unsorted"], class: {
                     ["sort-button"]: true,
@@ -10515,6 +10955,10 @@ class DataTable {
                         this.sortedColumnOrder === "unsorted",
                 } }))))));
         };
+        this.onRowClick = (row) => {
+            this.selectedRow =
+                this.selectedRow !== row && !this.loading && !this.updating && row;
+        };
         this.createRows = () => {
             const data = this.showPagination
                 ? this.data.slice(this.fromRow, this.toRow)
@@ -10534,24 +10978,11 @@ class DataTable {
             return data
                 .sort(!this.sortable ? undefined : this.getSortFunction())
                 .map((row, index) => {
-                var _a;
-                const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index }));
-                const findRowHeight = variableRowHeightVal
-                    ? variableRowHeightVal !== "auto" && variableRowHeightVal
-                    : this.globalRowHeight !== "auto" && this.globalRowHeight;
                 return (hAsync("tr", {
                     // eslint-disable-next-line react/jsx-no-bind
-                    onClick: () => (this.selectedRow =
-                        this.selectedRow !== row &&
-                            !this.loading &&
-                            !this.updating &&
-                            row), class: {
+                    onClick: () => this.onRowClick(row), class: {
                         ["table-row"]: true,
                         ["table-row-selected"]: this.selectedRow === row,
-                    }, style: {
-                        height: findRowHeight
-                            ? `${findRowHeight * DENSITY_HEIGHT_MULTIPLIER[this.density]}px`
-                            : null,
                     }
                 }, this.createCells(row, index)));
             });
@@ -10614,6 +11045,25 @@ class DataTable {
             }
             this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
             sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
+            this.tableSorted = true;
+        };
+        this.getTypographyElements = () => {
+            return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text)"));
+        };
+        this.getTooltip = (typographyEl) => {
+            return typographyEl.closest(this.TOOLTIP);
+        };
+        this.updateTruncationTooltip = (removeTooltipOnly = false) => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const tooltip = this.getTooltip(typographyEl);
+                const cellContainer = this.getCellContainer(typographyEl);
+                if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                    this.removeTooltip(cellContainer, typographyEl, tooltip);
+                    typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
+                    return;
+                }
+                this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
+            });
         };
         this.updateScrollOffset = () => {
             this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
@@ -10627,12 +11077,13 @@ class DataTable {
         this.sortedColumn = undefined;
         this.sortedColumnOrder = undefined;
         this.toRow = undefined;
+        this.currentRowHeight = undefined;
         this.caption = undefined;
         this.columns = undefined;
         this.data = undefined;
         this.density = "default";
         this.embedded = false;
-        this.globalRowHeight = 40;
+        this.globalRowHeight = "auto";
         this.hideColumnHeaders = false;
         this.loading = false;
         this.loadingOptions = undefined;
@@ -10661,10 +11112,15 @@ class DataTable {
         };
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
+        this.truncationPattern = undefined;
         this.updating = false;
         this.updatingOptions = undefined;
         this.variableRowHeight = undefined;
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentWillLoad() {
         var _a;
         this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
@@ -10673,10 +11129,15 @@ class DataTable {
         this.sortedColumn = this.sortOptions.defaultColumn;
         this.sortedColumnOrder = this.sortOptions.sortOrders[0];
         this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 });
+        this.initialLoad = true;
+        this.previousItemsPerPage = this.rowsPerPage;
     }
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
         const tableContainer = this.el.shadowRoot.querySelector(".table-container");
+        if (this.dataUpdated) {
+            this.dataUpdated = false;
+        }
         if ((tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientHeight) ||
             (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
             this.scrollable = true;
@@ -10685,11 +11146,144 @@ class DataTable {
             this.startLoadingTimer();
             this.showLoadingIndicator();
         }
+        if (this.truncationPattern) {
+            this.getTypographyElements().forEach((typographyEl) => {
+                if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
+                    this.dataTruncation(typographyEl);
+                }
+            });
+            this.debounceDataTruncation();
+        }
+        if (this.globalRowHeight !== "auto") {
+            this.updateSetRowHeight();
+        }
     }
-    handleItemsPerPageChange({ detail, target, }) {
-        if (target.parentElement !== this.el) {
-            this.previousRowsPerPage = this.rowsPerPage;
-            this.rowsPerPage = detail.value;
+    componentDidUpdate() {
+        this.truncateUpdatedData();
+    }
+    truncateUpdatedData() {
+        if (this.dataUpdated) {
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.resetShowHideTruncation();
+            }
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            this.dataUpdated = false;
+        }
+        if (this.tableSorted) {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            this.tableSorted = false;
+        }
+        // This function recalculates the tooltip truncation when the rowHeight has been set.
+        // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
+        if (this.rowHeightSet) {
+            const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            this.getTypographyElements().forEach((typographyEl) => {
+                var _a;
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                const rowHeight = fontSize *
+                    parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                // If the set row height is bigger than the cell container even
+                // with textWrap, set the row height
+                if (!((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
+                    rowHeight > cellContainer.clientHeight) {
+                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                }
+                if (this.truncationPattern) {
+                    // If the set row height is bigger than the typography truncation wrapper
+                    // scroll height, remove see more / see less button
+                    if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                        const truncWrapper = this.getTruncWrapper(typographyEl);
+                        const showHideBtn = typographyEl.shadowRoot.querySelector("button");
+                        if (showHideBtn &&
+                            (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) <= cellContainer.clientHeight) {
+                            this.resetShowHideTruncation(typographyEl);
+                            return;
+                        }
+                    }
+                    this.truncate(typographyEl, cellContainer, tooltipEl);
+                }
+                else {
+                    this.updateSetRowHeight(typographyEl);
+                }
+            });
+            this.rowHeightSet = false;
+        }
+        // Only run truncation on the new rows
+        // when the number of items per page has increased
+        if (this.itemsPerPageChange) {
+            const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
+            if (this.rowsPerPage > this.previousItemsPerPage) {
+                const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
+                newRows.forEach((row) => {
+                    row
+                        .querySelectorAll("ic-typography")
+                        .forEach((typographyEl) => {
+                        const cellContainer = this.getCellContainer(typographyEl);
+                        const tooltipEl = this.getTooltip(typographyEl);
+                        this.truncate(typographyEl, cellContainer, tooltipEl);
+                    });
+                });
+            }
+            this.previousItemsPerPage = this.rowsPerPage;
+            this.itemsPerPageChange = false;
+        }
+        if (!this.initialLoad && this.icPageChangeEvent) {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            // set truncation to see more if opened and next/previous page is pressed
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    const showHideBtn = typographyEl.shadowRoot.querySelector("button");
+                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
+                        !showHideBtn) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                });
+            }
+            this.icPageChangeEvent = false;
+        }
+        if (this.densityUpdate) {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                this.truncate(typographyEl, cellContainer, tooltipEl);
+            });
+            this.densityUpdate = false;
+        }
+    }
+    createShowHideTruncation(typographyEl, cellContainer) {
+        typographyEl.checkMaxLines(typographyEl.scrollHeight);
+        typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+        typographyEl.setShowHideExpanded(false);
+        cellContainer.style.height = null;
+    }
+    addTooltipTruncation(typographyEl, cellContainer, tooltip) {
+        this.addLineClampCSS(typographyEl, cellContainer);
+        if (!tooltip) {
+            this.createTruncationTooltip(typographyEl, cellContainer);
+        }
+    }
+    addShowHideTruncation(cellContainer, typographyEl) {
+        cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
+        this.createShowHideTruncation(typographyEl, cellContainer);
+    }
+    getTruncWrapper(typographyEl) {
+        return typographyEl.shadowRoot.querySelector(".trunc-wrapper");
+    }
+    // Set the height to initial if row height is set and the show / hide truncation
+    // is clicked
+    handleTypographyTruncationExpandToggle({ detail, }) {
+        const { expanded, typographyEl } = detail;
+        const cellContainer = this.getCellContainer(typographyEl);
+        if (cellContainer.style.height && expanded) {
+            cellContainer.style.height = "inherit";
         }
     }
     handlePageChange({ detail, target }) {
@@ -10708,6 +11302,19 @@ class DataTable {
                 this.previousRowsPerPage = this.rowsPerPage;
             }
         }
+        if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
+            // This is to prevent icPageChange from triggering truncation on first load
+            this.icPageChangeEvent = true;
+        }
+        this.previousPaginationPage = detail.value;
+        this.initialLoad = false;
+    }
+    handleItemsPerPageChange({ detail, target, }) {
+        if (target.parentElement !== this.el) {
+            this.previousRowsPerPage = this.rowsPerPage;
+            this.rowsPerPage = detail.value;
+        }
+        this.itemsPerPageChange = true;
     }
     handleDensityChange(ev) {
         this.density = ev.detail.value;
@@ -10725,7 +11332,23 @@ class DataTable {
             }, 500);
         }
     }
-    dataHandler(newData) {
+    truncationPatternHandler(newValue) {
+        if (newValue === this.SHOW_HIDE_STRING) {
+            this.updateTruncationTooltip(true);
+            // Not using debounceDataTruncation here due to resizeObserver not being triggered
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltip = this.getTooltip(typographyEl);
+                this.truncate(typographyEl, cellContainer, tooltip);
+            });
+        }
+        if (newValue === this.TOOLTIP_STRING) {
+            // ResizeObserver is trigger here due to the see more/see less links being removed.
+            // The resizeObserver will also apply the tooltip where relevant
+            this.resetShowHideTruncation();
+        }
+    }
+    async dataHandler(newData) {
         this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: (newData === null || newData === void 0 ? void 0 : newData.length) > 0 });
         if (this.loading) {
             !this.hasLoadedForOneSecond
@@ -10735,31 +11358,124 @@ class DataTable {
         }
         if (this.updating)
             this.updating = false;
+        this.dataUpdated = true;
+    }
+    async densityHandler() {
+        this.densityUpdate = true;
+    }
+    resetShowHideTruncation(typographyEl) {
+        if (typographyEl) {
+            const truncWrapper = this.getTruncWrapper(typographyEl);
+            const cellContainer = this.getCellContainer(typographyEl);
+            if ((truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
+                !isEmptyString(typographyEl.getAttribute("max-lines")) &&
+                Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
+                    +typographyEl.getAttribute("max-lines")) {
+                typographyEl.checkMaxLines(truncWrapper.scrollHeight);
+                typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+                typographyEl.setShowHideExpanded(false);
+                cellContainer.style.height = null;
+            }
+            else {
+                typographyEl.resetTruncation().then(() => {
+                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                });
+            }
+        }
+        else {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                typographyEl.resetTruncation().then(() => {
+                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                });
+            });
+        }
     }
-    rowHeightChangeHandler() {
-        this.icRowHeightChange.emit();
+    rowHeightChangeHandler(newValue, oldValue) {
+        if (+newValue !== +oldValue) {
+            this.deleteTextWrapDataKey(this.data);
+            this.deleteTextWrapDataKey(this.columns);
+            this.removeTextWrap();
+            this.icRowHeightChange.emit();
+            this.rowHeightSet = true;
+        }
     }
     /**
-     * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
+     * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
      */
-    async resetRowHeights() {
-        this.globalRowHeight = 40;
+    async resetRowHeights(rowHeight) {
+        this.globalRowHeight = rowHeight || "auto";
         this.variableRowHeight = null;
     }
     showLoadingIndicator() {
         this.loadingIndicator.classList.add("show");
     }
+    getRowOptions(rowKeys, rowValues) {
+        const rowOptionsIndex = rowKeys.indexOf("rowOptions");
+        return rowOptionsIndex > -1 && rowValues[rowOptionsIndex];
+    }
+    regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly) {
+        // When sorting the table, instead of regenerating the tooltip,
+        // the tooltip details are updated
+        if (tooltip) {
+            if (this.tableSorted) {
+                tooltip.setAttribute("target", typographyEl.id);
+                tooltip.setAttribute("label", typographyEl.textContent);
+            }
+            else {
+                this.removeTooltip(cellContainer, typographyEl, tooltip);
+            }
+            if (removeTooltipOnly) {
+                return;
+            }
+        }
+        // This add line clamp to data only when
+        // the data object has been updated
+        if (!typographyEl.getAttribute("style") && this.dataUpdated) {
+            this.addLineClampCSS(typographyEl, cellContainer);
+        }
+        // Adding the tableSorted boolean prevents the tooltip
+        // being regenerated and flashing
+        if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
+            !this.tableSorted) {
+            if (!typographyEl.getAttribute("style")) {
+                this.addLineClampCSS(typographyEl, cellContainer);
+            }
+            this.createTruncationTooltip(typographyEl, cellContainer);
+        }
+    }
+    removeTooltip(cellContainer, typographyEl, tooltip) {
+        cellContainer.appendChild(typographyEl);
+        if (tooltip) {
+            tooltip.remove();
+        }
+    }
+    addLineClampCSS(typographyEl, cellContainer) {
+        typographyEl.setAttribute("style", `--ic-line-clamp: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
+    }
+    createTruncationTooltip(typographyEl, cellContainer) {
+        const tooltipEl = document.createElement("ic-tooltip");
+        tooltipEl.setAttribute("target", typographyEl.id);
+        tooltipEl.setAttribute("label", typographyEl.textContent);
+        tooltipEl.classList.add("ic-tooltip-overflow");
+        tooltipEl.setExternalPopperProps({
+            // This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
+            strategy: "fixed",
+        });
+        cellContainer.appendChild(tooltipEl);
+        tooltipEl.appendChild(typographyEl);
+    }
     render() {
         const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, } = this;
         return (hAsync("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && hAsync("slot", { name: "title-bar" }), hAsync("div", { class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, hAsync("table", null, hAsync("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (hAsync("thead", { class: {
+            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, isSlotUsed(this.el, "title-bar") && hAsync("slot", { name: "title-bar" }), hAsync("table", null, hAsync("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (hAsync("thead", { class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
             } }, hAsync("tr", null, createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (hAsync("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && hAsync("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
+            (hideColumnHeaders ? (hAsync("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && !loading && hAsync("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
             !loading &&
             (isSlotUsed(this.el, "empty-state") ? (hAsync("slot", { name: "empty-state" })) : (hAsync("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" })))), loading && (hAsync("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
                 "loading-empty": loading,
@@ -10772,7 +11488,9 @@ class DataTable {
     get el() { return getElement(this); }
     static get watchers() { return {
         "loading": ["loadingHandler"],
+        "truncationPattern": ["truncationPatternHandler"],
         "data": ["dataHandler"],
+        "density": ["densityHandler"],
         "globalRowHeight": ["rowHeightChangeHandler"],
         "variableRowHeight": ["rowHeightChangeHandler"]
     }; }
@@ -10797,6 +11515,7 @@ class DataTable {
             "sortOptions": [16],
             "stickyColumnHeaders": [4, "sticky-column-headers"],
             "stickyRowHeaders": [4, "sticky-row-headers"],
+            "truncationPattern": [1, "truncation-pattern"],
             "updating": [4],
             "updatingOptions": [16],
             "variableRowHeight": [1040],
@@ -10809,9 +11528,10 @@ class DataTable {
             "sortedColumn": [32],
             "sortedColumnOrder": [32],
             "toRow": [32],
+            "currentRowHeight": [32],
             "resetRowHeights": [64]
         },
-        "$listeners$": [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]],
+        "$listeners$": [[0, "typographyTruncationExpandToggle", "handleTypographyTruncationExpandToggle"], [0, "icPageChange", "handlePageChange"], [0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -11837,6 +12557,7 @@ class DateInput {
         this.disablePast = false;
         this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
         this.helperText = undefined;
+        this.hideHelperText = false;
         this.inputId = `ic-date-input-${inputIds$5++}`;
         this.label = undefined;
         this.max = "";
@@ -12080,7 +12801,7 @@ class DateInput {
         }
     }
     render() {
-        const { inputId, label, disabled, helperText, showClearButton, showCalendarButton, size, } = this;
+        const { inputId, label, disabled, helperText, hideHelperText, showClearButton, showCalendarButton, size, } = this;
         const hasCustomValidation = !isEmptyString(this.validationStatus) &&
             !isEmptyString(this.validationText);
         const validationStatus = hasCustomValidation
@@ -12090,7 +12811,7 @@ class DateInput {
                 : "";
         const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
         renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (hAsync(Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, hAsync("ic-input-container", { disabled: disabled }, hAsync("ic-input-label", { for: inputId, label: label, helperText: helperText, disabled: disabled }), hAsync("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), `${this.defaultHelperText}.`), hAsync("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), hAsync("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, hAsync("div", { class: "input-container" }, hAsync("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), hAsync("div", { class: "action-buttons" }, showClearButton && (hAsync("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
+        return (hAsync(Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, hAsync("ic-input-container", { disabled: disabled }, hAsync("ic-input-label", { for: inputId, label: label, helperText: !hideHelperText ? helperText : null, disabled: disabled }), hAsync("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), hAsync("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), hAsync("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, hAsync("div", { class: "input-container" }, hAsync("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), hAsync("div", { class: "action-buttons" }, showClearButton && (hAsync("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
@@ -12124,6 +12845,7 @@ class DateInput {
             "disablePast": [4, "disable-past"],
             "disablePastMessage": [1, "disable-past-message"],
             "helperText": [1025, "helper-text"],
+            "hideHelperText": [4, "hide-helper-text"],
             "inputId": [1, "input-id"],
             "label": [1],
             "max": [1],
@@ -12939,6 +13661,9 @@ class DatePicker {
             if (this.helperText !== undefined) {
                 inputProps.helperText = this.helperText;
             }
+            if (this.hideHelperText !== false) {
+                inputProps.hideHelperText = this.hideHelperText;
+            }
             if (this.inputId !== undefined) {
                 inputProps.inputId = this.inputId;
             }
@@ -12989,6 +13714,7 @@ class DatePicker {
         this.disablePast = false;
         this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
         this.helperText = undefined;
+        this.hideHelperText = false;
         this.inputId = undefined;
         this.label = undefined;
         this.max = "";
@@ -13027,6 +13753,14 @@ class DatePicker {
             this.minDate = createDate(this.min, this.dateFormat);
         }
     }
+    watchStartOfWeekHandler() {
+        this.orderedDaysOfWeek = this.daysOfWeek
+            .slice(this.startOfWeek)
+            .concat(this.daysOfWeek.slice(0, this.startOfWeek));
+        if (this.calendarOpen) {
+            this.updateMonthInView();
+        }
+    }
     watchOpenHandler() {
         if (this.calendarOpen) {
             if (this.inputEl) {
@@ -13106,9 +13840,7 @@ class DatePicker {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Picker");
         this.monthNames = stringEnumToArray(IcDateInputMonths);
         this.daysOfWeek = stringEnumToArray(IcShortDayNames);
-        this.orderedDaysOfWeek = this.daysOfWeek
-            .splice(this.startOfWeek, this.daysOfWeek.length)
-            .concat(this.daysOfWeek.splice(0, this.startOfWeek));
+        this.watchStartOfWeekHandler();
         this.watchMaxHandler();
         this.watchMinHandler();
     }
@@ -13190,6 +13922,7 @@ class DatePicker {
         "disablePast": ["watchDisablePastHandler"],
         "max": ["watchMaxHandler"],
         "min": ["watchMinHandler"],
+        "startOfWeek": ["watchStartOfWeekHandler"],
         "calendarOpen": ["watchOpenHandler"],
         "focussedDate": ["watchFocussedDateHandler"],
         "monthInView": ["watchMonthInViewHandler"],
@@ -13212,6 +13945,7 @@ class DatePicker {
             "disablePast": [4, "disable-past"],
             "disablePastMessage": [1, "disable-past-message"],
             "helperText": [1, "helper-text"],
+            "hideHelperText": [4, "hide-helper-text"],
             "inputId": [1, "input-id"],
             "label": [1],
             "max": [1],
@@ -13361,7 +14095,7 @@ class Dialog {
             }
         };
         this.setAlertVariant = () => {
-            if (isPropDefined(this.status) && this.status !== null) {
+            if (isPropDefined$1(this.status) && this.status !== null) {
                 const alert = this.el.shadowRoot.querySelector("ic-alert");
                 alert.setAttribute("variant", this.status);
             }
@@ -13706,6 +14440,15 @@ const icEmptyStateCss = "/*!@:host*/.sc-ic-empty-state-h{gap:var(--ic-space-xs);
 class EmptyState {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.hostMutationObserver = null;
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations$1(addedNodes, removedNodes, [
+                    "image",
+                    "actions",
+                ])
+                : false)) ;
+        };
         this.aligned = "left";
         this.body = undefined;
         this.bodyMaxLines = undefined;
@@ -13713,9 +14456,17 @@ class EmptyState {
         this.imageSize = "default";
         this.subheading = undefined;
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentDidLoad() {
         !isSlotUsed$1(this.el, "heading") &&
             onComponentRequiredPropUndefined$1([{ prop: this.heading, propName: "heading" }], "Empty State");
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
     }
     render() {
         const { aligned, body, bodyMaxLines, heading, imageSize, subheading } = this;
@@ -14008,6 +14759,12 @@ const icHeroCss = "/*!@html*/html.sc-ic-hero{line-height:1.15;-webkit-text-size-
 class Hero {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.hostMutationObserver = null;
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations$1(addedNodes, removedNodes, "secondary")
+                : false)) ;
+        };
         this.foregroundColor = getThemeForegroundColor();
         this.rightContent = false;
         this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
@@ -14023,12 +14780,20 @@ class Hero {
         this.small = false;
         this.subheading = undefined;
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentWillLoad() {
         this.rightContent = slotHasContent(this.el, "secondary");
     }
     componentDidLoad() {
         !isSlotUsed$1(this.el, "heading") &&
             onComponentRequiredPropUndefined$1([{ prop: this.heading, propName: "heading" }], "Hero");
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
     }
     componentWillRender() {
         this.rightContent = slotHasContent(this.el, "secondary");
@@ -14049,7 +14814,7 @@ class Hero {
     render() {
         const { aligned, small, size, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
         let style = {};
-        if (isPropDefined(backgroundImage)) {
+        if (isPropDefined$1(backgroundImage)) {
             style = {
                 "background-image": "url(" + backgroundImage + ")",
                 "background-position": scrollFactor,
@@ -14065,7 +14830,7 @@ class Hero {
                 ["left-container-full-width"]: this.leftContentFullWidth,
             } }, hAsync("div", { class: "heading" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: small || size === "small" ? "h2" : "h1", class: {
                 ["heading-bottom-spacing"]: !small && size !== "small",
-            } }, heading))), hAsync("div", { class: "subheading" }, hAsync("slot", { name: "subheading" }, hAsync("ic-typography", { variant: "body" }, subheading))), hAsync("div", { class: "interaction-container" }, hAsync("slot", { name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (hAsync("div", { class: "right-container" }, hAsync("slot", { name: "secondary" }, secondaryHeading && (hAsync("div", { class: "secondary-container" }, hAsync("div", { class: "secondary-heading" }, hAsync("ic-typography", { variant: "h4" }, secondaryHeading)), hAsync("div", { class: "secondary-subheading" }, hAsync("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, heading))), hAsync("div", { class: "subheading" }, hAsync("slot", { name: "subheading" }, hAsync("ic-typography", { variant: "body" }, subheading))), hAsync("div", { class: "interaction-container" }, hAsync("slot", { name: "interaction" }))), (isPropDefined$1(secondaryHeading) || this.rightContent) && (hAsync("div", { class: "right-container" }, hAsync("slot", { name: "secondary" }, secondaryHeading && (hAsync("div", { class: "secondary-container" }, hAsync("div", { class: "secondary-heading" }, hAsync("ic-typography", { variant: "h4" }, secondaryHeading)), hAsync("div", { class: "secondary-subheading" }, hAsync("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     get el() { return getElement(this); }
     static get style() { return icHeroCss; }
@@ -14285,7 +15050,7 @@ class InputComponentContainer {
         registerInstance(this, hostRef);
         this.hostMutationCallback = (mutationList) => {
             if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
-                ? checkSlotInChildMutations(addedNodes, removedNodes, "left-icon")
+                ? checkSlotInChildMutations$1(addedNodes, removedNodes, "left-icon")
                 : false)) ;
         };
         this.appearance = "default";
@@ -14541,7 +15306,7 @@ class Link {
         (_a = this.el.shadowRoot.querySelector("a")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     updateTheme(newTheme = null) {
-        const theme = getThemeFromContext(this.el, newTheme);
+        const theme = getThemeFromContext$1(this.el, newTheme);
         if (theme !== IcThemeForegroundEnum$1.Default) {
             this.appearance = theme;
         }
@@ -14663,7 +15428,7 @@ class LoadingIndicator {
             return cls;
         };
         this.updateLabel = () => {
-            if (isPropDefined(this.label)) {
+            if (isPropDefined$1(this.label)) {
                 this.labelList = this.label.split("/");
                 const labelIndex = 0;
                 this.indicatorLabel = this.labelList[labelIndex];
@@ -20048,7 +20813,7 @@ class MenuGroup {
     }
     render() {
         const parentMenu = this.el.closest("ic-popover-menu");
-        return (hAsync(Host, { "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (hAsync("ic-typography", { variant: "subtitle-small" }, this.label)), hAsync("ul", { role: "group" }, hAsync("slot", null)), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (hAsync("hr", null))));
+        return (hAsync(Host, { "aria-label": this.label !== null ? this.label : "" }, isPropDefined$1(this.label) && (hAsync("ic-typography", { variant: "subtitle-small" }, this.label)), hAsync("ul", { role: "group" }, hAsync("slot", null)), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (hAsync("hr", null))));
     }
     get el() { return getElement(this); }
     static get style() { return icMenuGroupCss; }
@@ -20076,7 +20841,7 @@ class MenuItem {
         this.handleMenuItemClick = createEvent(this, "handleMenuItemClick", 7);
         this.triggerPopoverMenuInstance = createEvent(this, "triggerPopoverMenuInstance", 7);
         this.handleClick = (e) => {
-            if (isPropDefined(this.submenuTriggerFor)) {
+            if (isPropDefined$1(this.submenuTriggerFor)) {
                 this.triggerPopoverMenuInstance.emit();
             }
             else if (this.variant === "toggle") {
@@ -20090,16 +20855,16 @@ class MenuItem {
         };
         this.getMenuItemAriaLabel = () => {
             let ariaLabel = this.label;
-            if (isPropDefined(this.description)) {
+            if (isPropDefined$1(this.description)) {
                 ariaLabel = `${ariaLabel}, ${this.description}`;
             }
-            if (isPropDefined(this.keyboardShortcut)) {
+            if (isPropDefined$1(this.keyboardShortcut)) {
                 ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;
             }
             if (this.variant === "destructive") {
                 ariaLabel = `${ariaLabel}, destructive`;
             }
-            if (isPropDefined(this.submenuTriggerFor)) {
+            if (isPropDefined$1(this.submenuTriggerFor)) {
                 ariaLabel = `${ariaLabel}, triggers submenu`;
             }
             if (this.el.classList.contains("ic-popover-submenu-back-button")) {
@@ -20129,7 +20894,7 @@ class MenuItem {
     }
     componentWillLoad() {
         // This ensures that trigger menu items are always set to the default variant
-        if (isPropDefined(this.submenuTriggerFor) && this.variant !== "default") {
+        if (isPropDefined$1(this.submenuTriggerFor) && this.variant !== "default") {
             this.variant = "default";
         }
         removeDisabledFalse$1(this.disabled, this.el);
@@ -20149,17 +20914,17 @@ class MenuItem {
         };
         return (hAsync(Host, { class: {
                 ["disabled"]: this.disabled,
-            } }, hAsync("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle" ? this.toggleChecked : undefined }, hAsync("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined(this.href), hreflang: isPropDefined(this.hreflang), target: isPropDefined(this.target), rel: isPropDefined(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), ariaControlsId: isPropDefined(this.submenuTriggerFor)
+            } }, hAsync("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle" ? this.toggleChecked : undefined }, hAsync("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined$1(this.href), hreflang: isPropDefined$1(this.hreflang), target: isPropDefined$1(this.target), rel: isPropDefined$1(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), ariaControlsId: isPropDefined$1(this.submenuTriggerFor)
                 ? `ic-popover-submenu-${this.submenuTriggerFor}`
-                : false, "aria-haspopup": isPropDefined(this.submenuTriggerFor) ||
+                : false, "aria-haspopup": isPropDefined$1(this.submenuTriggerFor) ||
                 this.el.classList.contains("ic-popover-submenu-back-button")
                 ? "menu"
-                : false, ariaOwnsId: isPropDefined(this.submenuTriggerFor)
+                : false, ariaOwnsId: isPropDefined$1(this.submenuTriggerFor)
                 ? `ic-popover-submenu-${this.submenuTriggerFor}`
                 : false }, hAsync("div", { class: "focus-border" }, isSlotUsed$1(this.el, "icon") && (hAsync("span", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync(MenuItemInformation, null), this.variant === "toggle" && (hAsync("span", { class: {
                 ["check-icon"]: true,
                 ["hide"]: !this.toggleChecked,
-            }, "aria-hidden": "true", innerHTML: checkIcon })), isPropDefined(this.submenuTriggerFor) && (hAsync("span", { class: { ["submenu-icon"]: true }, "aria-hidden": "true", innerHTML: chevronIcon })))))));
+            }, "aria-hidden": "true", innerHTML: checkIcon })), isPropDefined$1(this.submenuTriggerFor) && (hAsync("span", { class: { ["submenu-icon"]: true }, "aria-hidden": "true", innerHTML: chevronIcon })))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -21779,7 +22544,7 @@ class PopoverMenu {
         };
         this.getMenuAriaLabel = () => {
             const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);
-            if (isPropDefined(this.submenuId)) {
+            if (isPropDefined$1(this.submenuId)) {
                 return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;
             }
             else {
@@ -21825,7 +22590,7 @@ class PopoverMenu {
                 !this.popoverMenuEls.some((menuItem) => menuItem.id)) {
                 this.popoverMenuEls.unshift(this.backButton);
             }
-            this.currentFocus = isPropDefined(this.submenuId) ? 1 : 0;
+            this.currentFocus = isPropDefined$1(this.submenuId) ? 1 : 0;
             // Needed so that anchorEl isn't always focused
             setTimeout(this.setButtonFocus, 50);
         }
@@ -21938,9 +22703,9 @@ class PopoverMenu {
             }, tabindex: open ? "0" : "-1" }, hAsync("div", { class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined(this.submenuId) && (hAsync("div", null, hAsync("ic-menu-item", { class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, hAsync("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, hAsync("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" }))), hAsync("ic-typography", { variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), hAsync("ul", { class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu", "aria-owns": isPropDefined(this.submenuId)
+            } }, isPropDefined$1(this.submenuId) && (hAsync("div", null, hAsync("ic-menu-item", { class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, hAsync("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, hAsync("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" }))), hAsync("ic-typography", { variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), hAsync("ul", { class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu", "aria-owns": isPropDefined$1(this.submenuId)
                 ? `ic-popover-submenu-back-button-${this.submenuLevel}`
-                : false, "aria-controls": isPropDefined(this.submenuId)
+                : false, "aria-controls": isPropDefined$1(this.submenuId)
                 ? `ic-popover-submenu-back-button-${this.submenuLevel}`
                 : false }, hAsync("slot", null))))));
     }
@@ -21978,6 +22743,9 @@ class RadioGroup {
         registerInstance(this, hostRef);
         this.icChange = createEvent(this, "icChange", 7);
         this.resizeObserver = null;
+        this.ADDITIONAL_FIELD = "additional-field";
+        this.RADIO_HORIZONTAL = "horizontal";
+        this.RADIO_VERTICAL = "vertical";
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
                 this.checkOrientation();
@@ -22039,14 +22807,14 @@ class RadioGroup {
                     }
                 });
                 this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);
-            }
-            if (this.initialOrientation === "horizontal" &&
-                this.radioOptions !== undefined &&
-                (this.radioOptions.length > 2 ||
-                    (this.radioOptions.length === 2 &&
-                        (isSlotUsed$1(this.radioOptions[0], "additional-field") ||
-                            isSlotUsed$1(this.radioOptions[1], "additional-field"))))) {
-                this.currentOrientation = "vertical";
+                if (this.initialOrientation === this.RADIO_HORIZONTAL &&
+                    this.radioOptions !== undefined &&
+                    (this.radioOptions.length > 2 ||
+                        (this.radioOptions.length === 2 &&
+                            (isSlotUsed$1(this.radioOptions[0], this.ADDITIONAL_FIELD) ||
+                                isSlotUsed$1(this.radioOptions[1], this.ADDITIONAL_FIELD))))) {
+                    this.currentOrientation = this.RADIO_VERTICAL;
+                }
             }
         };
         this.checkedValue = "";
@@ -22067,6 +22835,7 @@ class RadioGroup {
     }
     orientationChangeHandler() {
         this.initialOrientation = this.orientation;
+        this.checkOrientation();
     }
     disconnectedCallback() {
         var _a, _b;
@@ -22116,20 +22885,35 @@ class RadioGroup {
         }
     }
     checkOrientation() {
-        if (this.initialOrientation === "horizontal") {
+        var _a, _b;
+        if (this.initialOrientation === this.RADIO_HORIZONTAL) {
             let totalWidth = 0;
-            this.radioOptions.forEach(({ clientWidth }, i, arr) => {
-                totalWidth += clientWidth;
-                if (i < arr.length - 1)
-                    totalWidth += 40;
-            });
-            if (this.currentOrientation === "horizontal" &&
-                totalWidth > this.radioContainer.clientWidth) {
-                this.currentOrientation = "vertical";
+            if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {
+                this.radioOptions.forEach(({ clientWidth }, i, arr) => {
+                    totalWidth += clientWidth;
+                    if (i < arr.length - 1)
+                        totalWidth += 40;
+                });
+            }
+            else {
+                totalWidth = 0;
             }
-            else if (this.currentOrientation === "vertical" &&
-                totalWidth < this.radioContainer.clientWidth) {
-                this.currentOrientation = "horizontal";
+            if (this.initialOrientation == this.RADIO_HORIZONTAL) {
+                if (this.radioOptions !== undefined &&
+                    (this.radioOptions.length > 2 ||
+                        (this.radioOptions.length === 2 &&
+                            (isSlotUsed$1(this.radioOptions[0], this.ADDITIONAL_FIELD) ||
+                                isSlotUsed$1(this.radioOptions[1], this.ADDITIONAL_FIELD))))) {
+                    this.currentOrientation = this.RADIO_VERTICAL;
+                }
+                else {
+                    if (totalWidth >= ((_a = this.radioContainer) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
+                        this.currentOrientation = this.RADIO_VERTICAL;
+                    }
+                    else if (totalWidth < ((_b = this.radioContainer) === null || _b === void 0 ? void 0 : _b.clientWidth)) {
+                        this.currentOrientation = this.RADIO_HORIZONTAL;
+                    }
+                }
             }
         }
     }
@@ -22137,7 +22921,7 @@ class RadioGroup {
         renderHiddenInput$1(true, this.el, this.name, this.checkedValue, this.disabled);
         return (hAsync(Host, { onKeyDown: this.handleKeyDown, class: { small: this.small || this.size === "small" } }, hAsync("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (hAsync("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), hAsync("div", { class: {
                 "radio-buttons-container": true,
-                horizontal: this.currentOrientation === "horizontal",
+                horizontal: this.currentOrientation === this.RADIO_HORIZONTAL,
             }, ref: (el) => (this.radioContainer = el) }, hAsync("slot", null))), hasValidationStatus$1(this.validationStatus, this.disabled) && (hAsync("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
     }
     get el() { return getElement(this); }
@@ -22299,7 +23083,7 @@ class RadioOption {
     }
     render() {
         const { additionalFieldDisplay, disabled, dynamicText, form, formaction, formenctype, formmethod, formnovalidate, formtarget, groupLabel, handleClick, hasAdditionalField, label, name, selected, swallowClick, value, } = this;
-        const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;
+        const id = `ic-radio-option-${isPropDefined$1(label) || value}-${groupLabel}`;
         return (hAsync(Host, { onClick: handleClick, class: { disabled } }, hAsync("div", { class: { ["container"]: true, disabled } }, hAsync("div", null, hAsync("input", { role: "radio", tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled ? true : null, checked: selected, ref: (el) => (this.radioElement = el), form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget }), hAsync("span", { class: "checkmark" })), hAsync("ic-typography", { class: "radio-label", variant: "body" }, hAsync("label", { htmlFor: id }, label))), hasAdditionalField && (hAsync("div", { onClick: swallowClick, class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
@@ -22969,7 +23753,7 @@ class Select$1 {
                         this.el.getAttribute(attributeName);
                 }
                 else if (type === "childList") {
-                    checkSlotInChildMutations(addedNodes, removedNodes, "icon");
+                    checkSlotInChildMutations$1(addedNodes, removedNodes, "icon");
                 }
             });
         };
@@ -24869,7 +25653,7 @@ class SideNavigation {
             });
         };
         this.renderTopBar = ({ isSDevice, foregroundColor, menuOpen, href, isAppNameSubtitleVariant, }) => {
-            const hasTitle = this.appTitle !== "" && isPropDefined(this.appTitle);
+            const hasTitle = this.appTitle !== "" && isPropDefined$1(this.appTitle);
             const Component = isSlotUsed$1(this.el, "app-title") ? "div" : "a";
             const attrs = Component == "a" && {
                 href: href,
@@ -25136,7 +25920,7 @@ class Step {
         }
         // STEP STATUS
         let stepStatus;
-        if (isPropDefined(this.stepStatus)) {
+        if (isPropDefined$1(this.stepStatus)) {
             stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);
         }
         // STEP TYPE
@@ -25174,7 +25958,7 @@ class Step {
                 !!this.compactStepStyling &&
                 this.compactStepStyling !== "active") ||
             !!this.stepStatus) && (hAsync("div", { class: "step-status" }, statusIcon !== undefined && statusIcon, (this.stepSubtitle || stepType) && (hAsync("ic-typography", { variant: "caption" }, this.stepSubtitle !== null &&
-            isPropDefined(this.stepSubtitle)
+            isPropDefined$1(this.stepSubtitle)
             ? this.stepSubtitle
             : this.stepType === "disabled" ||
                 (this.variant === "compact" &&
@@ -25183,7 +25967,7 @@ class Step {
                 (this.variant === "compact" &&
                     this.compactStepStyling === "completed")
                 ? stepType
-                : this.stepStatus && stepStatus))))), this.lastStep ? (hAsync("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (isPropDefined(this.nextStepTitle) && (hAsync("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", hAsync("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepTitle))))));
+                : this.stepStatus && stepStatus))))), this.lastStep ? (hAsync("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (isPropDefined$1(this.nextStepTitle) && (hAsync("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", hAsync("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepTitle))))));
         // ICON FOR DEFAULT STEP
         let icon;
         if (this.stepType !== "completed") {
@@ -25203,7 +25987,7 @@ class Step {
         const defaultStep = (hAsync("div", { class: {
                 ["step"]: true,
                 [`${this.stepType}`]: true,
-            } }, hAsync("div", { class: "step-top" }, hAsync("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle || this.stepStatus) && (hAsync("div", { class: "step-title-area" }, this.stepTitle && (hAsync("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepTitle && (this.stepSubtitle || this.stepStatus) && (hAsync("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle !== null && isPropDefined(this.stepSubtitle)
+            } }, hAsync("div", { class: "step-top" }, hAsync("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle || this.stepStatus) && (hAsync("div", { class: "step-title-area" }, this.stepTitle && (hAsync("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepTitle && (this.stepSubtitle || this.stepStatus) && (hAsync("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle !== null && isPropDefined$1(this.stepSubtitle)
             ? this.stepSubtitle
             : stepStatus))))));
         return (hAsync(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.stepType === "current") && "step", class: {
@@ -25279,7 +26063,7 @@ class Stepper {
             lastStep.style.maxWidth = "none";
             if (this.alignedFullWidth) {
                 this.stepperWidth = this.el.offsetWidth;
-                lastStep.style.maxWidth = pxToRem(`${this.stepperWidth / this.steps.length}px`);
+                lastStep.style.maxWidth = pxToRem$1(`${this.stepperWidth / this.steps.length}px`);
                 this.lastStepWidth = lastStep.offsetWidth;
             }
         };
@@ -25350,9 +26134,9 @@ class Stepper {
                 if (this.variant === "default") {
                     if (!step.lastStep) {
                         if (this.alignedFullWidth) {
-                            step.style.width = pxToRem(`${(this.stepperWidth - this.lastStepWidth) /
+                            step.style.width = pxToRem$1(`${(this.stepperWidth - this.lastStepWidth) /
                                 (this.steps.length - 1)}px`);
-                            step.style.minWidth = pxToRem("148px");
+                            step.style.minWidth = pxToRem$1("148px");
                         }
                     }
                     else if (step.lastStep) {
@@ -25363,21 +26147,21 @@ class Stepper {
                         else {
                             step.style.maxWidth =
                                 this.connectorWidth > 100
-                                    ? pxToRem(`${this.connectorWidth + 48}px`)
-                                    : pxToRem("148px");
+                                    ? pxToRem$1(`${this.connectorWidth + 48}px`)
+                                    : pxToRem$1("148px");
                         }
                     }
                     if (this.aligned === "left") {
                         step.style.width =
                             this.connectorWidth > 100
-                                ? pxToRem(`${this.connectorWidth + 48}px`)
-                                : pxToRem("148px");
+                                ? pxToRem$1(`${this.connectorWidth + 48}px`)
+                                : pxToRem$1("148px");
                         const stepConnect = step.shadowRoot.querySelector(".step > .step-top > .step-connect");
                         if (stepConnect) {
                             stepConnect.style.width =
                                 this.connectorWidth > 100
-                                    ? pxToRem(`${this.connectorWidth}px`)
-                                    : pxToRem("100px");
+                                    ? pxToRem$1(`${this.connectorWidth}px`)
+                                    : pxToRem$1("100px");
                         }
                     }
                     if (this.hideStepInfo && stepTitleArea !== null) {
@@ -26080,7 +26864,7 @@ class TabPanel {
         const { panelId, selectedTab, appearance } = this;
         return (hAsync(Host, { class: {
                 ["ic-tab-panel-light"]: appearance === IcThemeForegroundEnum$1.Light,
-            }, role: "tabpanel", hidden: isPropDefined(panelId) && isPropDefined(selectedTab)
+            }, role: "tabpanel", hidden: isPropDefined$1(panelId) && isPropDefined$1(selectedTab)
                 ? !(panelId === selectedTab)
                 : true }, hAsync("div", null, hAsync("slot", null))));
     }
@@ -26164,7 +26948,7 @@ class TextField {
                         this.el.getAttribute(attributeName);
                 }
                 else if (type === "childList") {
-                    checkSlotInChildMutations(addedNodes, removedNodes, "icon");
+                    checkSlotInChildMutations$1(addedNodes, removedNodes, "icon");
                 }
             });
         };
@@ -26514,7 +27298,7 @@ class Toast {
                 (_b = this.neutralIconAriaLabel) !== null && _b !== void 0 ? _b : VARIANT_ICONS[this.variant].ariaLabel;
         }
         if (this.isManual) {
-            const toastMessage = isPropDefined(this.message)
+            const toastMessage = isPropDefined$1(this.message)
                 ? `. ${this.message}`
                 : "";
             this.el.setAttribute("aria-label", this.variant
@@ -27076,9 +27860,7 @@ class Tooltip {
                         .getBoundingClientRect();
                     this.getTooltipTranslate(dialogEl);
                 }
-                this.popperInstance = createPopper$1(this.el, this.toolTip, {
-                    placement: this.placement,
-                    modifiers: [
+                this.popperInstance = createPopper$1(this.el, this.toolTip, Object.assign({ placement: this.placement, modifiers: [
                         {
                             name: "offset",
                             options: {
@@ -27095,8 +27877,7 @@ class Tooltip {
                             name: "eventListeners",
                             options: { scroll: false, resize: false },
                         },
-                    ],
-                });
+                    ] }, this.popperProps));
             }
             else {
                 console.warn(`Tooltip can't display without prop 'label' set`);
@@ -27156,6 +27937,14 @@ class Tooltip {
         this.silent = false;
         this.target = undefined;
         this.label = undefined;
+        this.popperProps = {};
+    }
+    /**
+     * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip
+     * @param props object - createPopper props set externally
+     */
+    async setExternalPopperProps(props) {
+        this.popperProps = props;
     }
     disconnectedCallback() {
         this.manageEventListeners("remove");
@@ -27209,6 +27998,8 @@ class Tooltip {
             "silent": [4],
             "target": [513],
             "label": [1],
+            "popperProps": [32],
+            "setExternalPopperProps": [64],
             "displayTooltip": [64],
             "isTooltipVisible": [64]
         },
@@ -27382,7 +28173,7 @@ class TopNavigation {
         const hasVersion = version !== "";
         const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
         const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? "default" : "large";
-        const hasTitle = appTitle !== "" && isPropDefined(appTitle);
+        const hasTitle = appTitle !== "" && isPropDefined$1(appTitle);
         const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;
         const appTitleVariant = overMobileBreakpoint
             ? deviceSize <= DEVICE_SIZES.S
@@ -27439,27 +28230,492 @@ class TopNavigation {
     }; }
 }
 
-const icTypographyCss = "/*!@html*/html.sc-ic-typography{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-typography{margin:0}/*!@main*/main.sc-ic-typography{display:block}/*!@h1*/h1.sc-ic-typography{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-typography{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-typography{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-typography{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-typography{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-typography,strong.sc-ic-typography{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-typography,kbd.sc-ic-typography,samp.sc-ic-typography{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-typography{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-typography,sup.sc-ic-typography{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-typography{bottom:-0.25em}/*!@sup*/sup.sc-ic-typography{top:-0.5em}/*!@img*/img.sc-ic-typography{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-typography,input.sc-ic-typography,optgroup.sc-ic-typography,select.sc-ic-typography,textarea.sc-ic-typography{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-typography,input.sc-ic-typography{overflow:visible}/*!@button,\nselect*/button.sc-ic-typography,select.sc-ic-typography{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-typography,[type=\"button\"].sc-ic-typography,[type=\"reset\"].sc-ic-typography,[type=\"submit\"].sc-ic-typography{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-typography::-moz-focus-inner,[type=\"button\"].sc-ic-typography::-moz-focus-inner,[type=\"reset\"].sc-ic-typography::-moz-focus-inner,[type=\"submit\"].sc-ic-typography::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-typography:-moz-focusring,[type=\"button\"].sc-ic-typography:-moz-focusring,[type=\"reset\"].sc-ic-typography:-moz-focusring,[type=\"submit\"].sc-ic-typography:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-typography{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-typography{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-typography{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-typography{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-typography,[type=\"radio\"].sc-ic-typography{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-typography::-webkit-inner-spin-button,[type=\"number\"].sc-ic-typography::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-typography{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-typography::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-typography::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-typography{display:block}/*!@summary*/summary.sc-ic-typography{display:list-item}/*!@template*/template.sc-ic-typography{display:none}/*!@[hidden]*/[hidden].sc-ic-typography{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-typography,body.sc-ic-typography,div.sc-ic-typography,span.sc-ic-typography,applet.sc-ic-typography,object.sc-ic-typography,iframe.sc-ic-typography,h1.sc-ic-typography,h2.sc-ic-typography,h3.sc-ic-typography,h4.sc-ic-typography,h5.sc-ic-typography,h6.sc-ic-typography,p.sc-ic-typography,blockquote.sc-ic-typography,pre.sc-ic-typography,a.sc-ic-typography,abbr.sc-ic-typography,acronym.sc-ic-typography,address.sc-ic-typography,big.sc-ic-typography,cite.sc-ic-typography,code.sc-ic-typography,del.sc-ic-typography,dfn.sc-ic-typography,em.sc-ic-typography,img.sc-ic-typography,ins.sc-ic-typography,kbd.sc-ic-typography,q.sc-ic-typography,s.sc-ic-typography,samp.sc-ic-typography,small.sc-ic-typography,strike.sc-ic-typography,strong.sc-ic-typography,sub.sc-ic-typography,sup.sc-ic-typography,tt.sc-ic-typography,var.sc-ic-typography,b.sc-ic-typography,u.sc-ic-typography,i.sc-ic-typography,center.sc-ic-typography,dl.sc-ic-typography,dt.sc-ic-typography,dd.sc-ic-typography,ol.sc-ic-typography,ul.sc-ic-typography,li.sc-ic-typography,fieldset.sc-ic-typography,form.sc-ic-typography,label.sc-ic-typography,legend.sc-ic-typography,table.sc-ic-typography,caption.sc-ic-typography,tbody.sc-ic-typography,tfoot.sc-ic-typography,thead.sc-ic-typography,tr.sc-ic-typography,th.sc-ic-typography,td.sc-ic-typography,article.sc-ic-typography,aside.sc-ic-typography,canvas.sc-ic-typography,details.sc-ic-typography,embed.sc-ic-typography,figure.sc-ic-typography,figcaption.sc-ic-typography,footer.sc-ic-typography,header.sc-ic-typography,hgroup.sc-ic-typography,menu.sc-ic-typography,nav.sc-ic-typography,output.sc-ic-typography,ruby.sc-ic-typography,section.sc-ic-typography,summary.sc-ic-typography,time.sc-ic-typography,mark.sc-ic-typography,audio.sc-ic-typography,video.sc-ic-typography{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-typography-h{display:block;position:relative}/*!@:host(.ic-typography-vertical-margins-h1)*/.ic-typography-vertical-margins-h1.sc-ic-typography-h{margin:0 0 var(--ic-space-xl)}/*!@:host(.ic-typography-vertical-margins-h2)*/.ic-typography-vertical-margins-h2.sc-ic-typography-h{margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}/*!@:host(.ic-typography-vertical-margins-h3)*/.ic-typography-vertical-margins-h3.sc-ic-typography-h{margin:var(--ic-space-xl) 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-h4)*/.ic-typography-vertical-margins-h4.sc-ic-typography-h{margin:var(--ic-space-lg) 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body),\n:host(.ic-typography-vertical-margins-code-large),\n:host(.ic-typography-vertical-margins-code-small),\n:host(.ic-typography-vertical-margins-code-extra-small)*/.ic-typography-vertical-margins-subtitle-large.sc-ic-typography-h,.ic-typography-vertical-margins-subtitle-small.sc-ic-typography-h,.ic-typography-vertical-margins-body.sc-ic-typography-h,.ic-typography-vertical-margins-code-large.sc-ic-typography-h,.ic-typography-vertical-margins-code-small.sc-ic-typography-h,.ic-typography-vertical-margins-code-extra-small.sc-ic-typography-h{margin:0 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase)*/.ic-typography-vertical-margins-caption.sc-ic-typography-h,.ic-typography-vertical-margins-caption-uppercase.sc-ic-typography-h{margin:0 0 var(--ic-space-xs)}/*!@:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child)*/.ic-typography-vertical-margins-h2.sc-ic-typography-h:first-child,.ic-typography-vertical-margins-h3.sc-ic-typography-h:first-child,.ic-typography-vertical-margins-h4.sc-ic-typography-h:first-child{margin-top:0}/*!@:host(.ic-typography-h1)*/.ic-typography-h1.sc-ic-typography-h{font:var(--ic-font-h1) !important}/*!@:host(.ic-typography-h2)*/.ic-typography-h2.sc-ic-typography-h{font:var(--ic-font-h2);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-h3)*/.ic-typography-h3.sc-ic-typography-h{font:var(--ic-font-h3)}/*!@:host(.ic-typography-h4)*/.ic-typography-h4.sc-ic-typography-h{font:var(--ic-font-h4);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-subtitle-large)*/.ic-typography-subtitle-large.sc-ic-typography-h{font:var(--ic-font-subtitle-large);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-subtitle-small)*/.ic-typography-subtitle-small.sc-ic-typography-h{font:var(--ic-font-subtitle-small);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-body)*/.ic-typography-body.sc-ic-typography-h{font:var(--ic-font-body);letter-spacing:var(--ic-font-letter-spacing-0pt005)}/*!@:host(.ic-typography-caption)*/.ic-typography-caption.sc-ic-typography-h{font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-caption-uppercase)*/.ic-typography-caption-uppercase.sc-ic-typography-h{font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025);text-transform:uppercase}/*!@:host(.ic-typography-label)*/.ic-typography-label.sc-ic-typography-h{font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-label-uppercase)*/.ic-typography-label-uppercase.sc-ic-typography-h{font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025);text-transform:uppercase}/*!@:host(.ic-typography-code-large)*/.ic-typography-code-large.sc-ic-typography-h{font:var(--ic-font-code-large);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-code-small)*/.ic-typography-code-small.sc-ic-typography-h{font:var(--ic-font-code-small);letter-spacing:var(--ic-font-letter-spacing-0pt005)}/*!@:host(.ic-typography-code-extra-small)*/.ic-typography-code-extra-small.sc-ic-typography-h{font:var(--ic-font-code-extra-small);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-badge)*/.ic-typography-badge.sc-ic-typography-h{font:var(--ic-font-badge);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-badge-small)*/.ic-typography-badge-small.sc-ic-typography-h{font:var(--ic-font-badge-small);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-no-wrap)*/.ic-typography-no-wrap.sc-ic-typography-h{white-space:nowrap}/*!@:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label)*/.sc-ic-typography-h .sc-ic-typography-s>h1,.sc-ic-typography-h.sc-ic-typography-s>h2,.sc-ic-typography-h .sc-ic-typography-s>h2,.sc-ic-typography-h.sc-ic-typography-s>h3,.sc-ic-typography-h .sc-ic-typography-s>h3,.sc-ic-typography-h.sc-ic-typography-s>h4,.sc-ic-typography-h .sc-ic-typography-s>h4,.sc-ic-typography-h.sc-ic-typography-s>h5,.sc-ic-typography-h .sc-ic-typography-s>h5,.sc-ic-typography-h.sc-ic-typography-s>h6,.sc-ic-typography-h .sc-ic-typography-s>h6,.sc-ic-typography-h.sc-ic-typography-s>p,.sc-ic-typography-h .sc-ic-typography-s>p,.sc-ic-typography-h.sc-ic-typography-s>label,.sc-ic-typography-h .sc-ic-typography-s>label{font:inherit;letter-spacing:inherit}/*!@.trunc-wrapper*/.trunc-wrapper.sc-ic-typography{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--truncation-max-lines, initial);-webkit-line-clamp:var(--truncation-max-lines, initial);overflow:hidden}/*!@.trunc-btn*/.trunc-btn.sc-ic-typography{border:none;background:none;padding:0;color:var(--ic-color-primary-text);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}/*!@.trunc-btn:hover,\n.trunc-btn.focus*/.trunc-btn.sc-ic-typography:hover,.trunc-btn.focus.sc-ic-typography{outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none;cursor:pointer}/*!@:host(.strikethrough)*/.strikethrough.sc-ic-typography-h{text-decoration:line-through}/*!@:host(.underline)*/.underline.sc-ic-typography-h{text-decoration:underline}/*!@:host(.underline.strikethrough)*/.underline.strikethrough.sc-ic-typography-h{text-decoration:line-through underline}/*!@:host(.italic)*/.italic.sc-ic-typography-h{font-style:italic !important}/*!@:host(.bold)*/.bold.sc-ic-typography-h{font-weight:var(--ic-font-weight-bold)}@supports (text-underline-offset: 25%){/*!@.trunc-btn:hover,\n  .trunc-btn.focus*/.trunc-btn.sc-ic-typography:hover,.trunc-btn.focus.sc-ic-typography{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
+var arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>
+</svg>`;
+
+const icTreeItemCss = "/*!@:host*/.sc-ic-tree-item-h{display:block;border:none;position:relative}/*!@:host .tree-item-content*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item{display:flex;align-items:center;height:calc(var(--ic-space-xl) + var(--ic-space-xs));padding:0 var(--ic-space-xs);text-decoration:none;color:var(--ic-primary-text)}/*!@::slotted([slot=\"router-item\"])*/.sc-ic-tree-item-s>[slot=\"router-item\"]{display:flex;align-items:center;height:calc(var(--ic-space-xl) + var(--ic-space-xs));text-decoration:none;font-family:var(--ic-font-body-family);color:var(--ic-primary-text);padding:0 var(--ic-space-xs) !important}/*!@::slotted([slot=\"router-item\"].ic-tree-item-single)*/.sc-ic-tree-item-s>[slot=\"router-item\"].ic-tree-item-single{padding-left:calc(var(--ic-space-xl) + var(--ic-space-xs)) !important}/*!@:host .tree-item-content:focus,\n::slotted([slot=\"router-item\"]:focus)*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item:focus,.sc-ic-tree-item-s>[slot=\"router-item\"]:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}/*!@:host .tree-item-content:hover,\n::slotted([slot=\"router-item\"]:hover)*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item:hover,.sc-ic-tree-item-s>[slot=\"router-item\"]:hover{background-color:var(--ic-action-dark-bg-hover) !important;cursor:pointer}/*!@:host .tree-item-content:active,\n::slotted([slot=\"router-item\"]:active)*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item:active,.sc-ic-tree-item-s>[slot=\"router-item\"]:active{background-color:var(--ic-action-dark-bg-active) !important}/*!@:host(.ic-tree-item-selected) .tree-item-content,\n:host(.ic-tree-item-selected) ::slotted([slot=\"router-item\"])*/.ic-tree-item-selected.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-selected.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-selected .sc-ic-tree-item-s>[slot=\"router-item\"]{background-color:var(--ic-action-default-bg-hover) !important}/*!@:host(.ic-tree-item-small) .tree-item-content,\n:host(.ic-tree-item-small) ::slotted([slot=\"router-item\"])*/.ic-tree-item-small.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-small.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-small .sc-ic-tree-item-s>[slot=\"router-item\"]{height:var(--ic-space-xl)}/*!@:host(.ic-tree-item-large) .tree-item-content,\n:host(.ic-tree-item-large) ::slotted([slot=\"router-item\"])*/.ic-tree-item-large.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-large.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-large .sc-ic-tree-item-s>[slot=\"router-item\"]{height:var(--ic-space-xxl)}/*!@:host(.ic-tree-item-disabled)*/.ic-tree-item-disabled.sc-ic-tree-item-h{pointer-events:none}/*!@:host(.ic-tree-item-disabled) .tree-item-content,\n:host(.ic-tree-item-disabled) .arrow-dropdown,\n:host(.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),\n:host(.ic-tree-item-disabled) ::slotted([slot=\"router-item\"])*/.ic-tree-item-disabled.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.ic-tree-item-disabled.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-disabled.sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-disabled .sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-disabled.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-disabled .sc-ic-tree-item-s>[slot=\"router-item\"]{color:var(--ic-architectural-200) !important;fill:var(--ic-architectural-200);pointer-events:none}/*!@:host(.ic-tree-item-light) .tree-item-content,\n:host(.ic-tree-item-light) .arrow-dropdown,\n:host(.ic-tree-item-light) ::slotted([slot=\"icon\"]),\n:host(.ic-tree-item-light) ::slotted([slot=\"router-item\"])*/.ic-tree-item-light.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.ic-tree-item-light.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-light.sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-light .sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-light.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-light .sc-ic-tree-item-s>[slot=\"router-item\"]{color:var(--ic-architectural-white);fill:var(--ic-architectural-white)}/*!@:host .arrow-dropdown*/.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item{color:var(--ic-action-default);margin-right:var(--ic-space-xs)}/*!@:host(.ic-tree-item-small) .arrow-dropdown*/.ic-tree-item-small.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item{margin-right:var(--ic-space-xxs)}/*!@:host .tree-item-expanded*/.sc-ic-tree-item-h .tree-item-expanded.sc-ic-tree-item{transform:rotate(180deg);margin-top:calc(-1 * var(--ic-space-xxs))}/*!@:host .ic-tree-item-single*/.sc-ic-tree-item-h .ic-tree-item-single.sc-ic-tree-item{padding-left:calc(var(--ic-space-xl) + var(--ic-space-xs))}/*!@:host(.ic-tree-item-small) .ic-tree-item-single*/.ic-tree-item-small.sc-ic-tree-item-h .ic-tree-item-single.sc-ic-tree-item{padding-left:calc(var(--ic-space-xl) + var(--ic-space-xxs))}/*!@.icon-container*/.icon-container.sc-ic-tree-item{width:var(--ic-space-lg);height:var(--ic-space-lg);margin:0 var(--ic-space-xs) 0 0}/*!@:host(.ic-tree-item-small) .icon-container*/.ic-tree-item-small.sc-ic-tree-item-h .icon-container.sc-ic-tree-item{margin:0 var(--ic-space-xxs) 0 0}/*!@.ic-text-overflow*/.ic-text-overflow.sc-ic-tree-item{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}/*!@.ic-tooltip-overflow*/.ic-tooltip-overflow.sc-ic-tree-item{overflow:hidden}@media (forced-colors: active){/*!@::slotted([slot=\"icon\"])*/.sc-ic-tree-item-s>[slot=\"icon\"]{fill:currentcolor}/*!@:host(.ic-tree-item-disabled) .tree-item-content,\n  :host(.ic-tree-item-disabled) .arrow-dropdown,\n  :host(.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),\n  :host(.ic-tree-item-disabled) ::slotted([slot=\"router-item\"])*/.ic-tree-item-disabled.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.ic-tree-item-disabled.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-disabled.sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-disabled .sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-disabled.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-disabled .sc-ic-tree-item-s>[slot=\"router-item\"]{color:GrayText !important;fill:GrayText !important}/*!@:host .tree-item-content:focus,\n  ::slotted([slot=\"router-item\"]:focus)*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item:focus,.sc-ic-tree-item-s>[slot=\"router-item\"]:focus{border:var(--ic-hc-border) !important}/*!@:host(.ic-tree-item-selected) .tree-item-content,\n  :host(.ic-tree-item-selected) ::slotted([slot=\"router-item\"])*/.ic-tree-item-selected.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-selected.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-selected .sc-ic-tree-item-s>[slot=\"router-item\"]{color:Highlight !important}}";
+
+let treeItemIds = 0;
+/**
+ * @slot label - Content is set as the tree item label.
+ * @slot icon - Content is placed to the left of the label.
+ * @slot router-item - Handle routing by nesting your routes in this slot.
+ */
+class TreeItem {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icTreeItemSelected = createEvent(this, "icTreeItemSelected", 7);
+        this.treeItemId = `ic-tree-item-${treeItemIds++}`;
+        this.treeItemTag = "IC-TREE-ITEM";
+        this.hostMutationObserver = null;
+        this.TOOLTIP = "ic-tooltip";
+        this.handleTreeItemClicked = () => {
+            if (this.isParent) {
+                this.expanded = !this.expanded;
+                this.hasParentExpanded = true;
+            }
+            this.updateAriaLabel();
+            this.selected = true;
+            this.watchSelectedHandler();
+        };
+        this.setTreeItemPadding = () => {
+            let level = 1;
+            let parentElement = this.el.parentElement;
+            const treeItemContent = this.el.shadowRoot.querySelector(".tree-item-content");
+            const isSiblingOfParent = Array.from(parentElement.children)
+                .map((sibling) => {
+                if (sibling !== this.el &&
+                    !sibling.querySelector('[slot="router-item"]') &&
+                    !sibling.querySelector('[slot="label"]')) {
+                    return sibling.children.length > 0;
+                }
+                else {
+                    return false;
+                }
+            })
+                .includes(true);
+            const isChild = parentElement.tagName === this.treeItemTag;
+            const isRouterItem = this.hasRouterSlot();
+            if ((isSiblingOfParent && !this.el.isParent) ||
+                (isChild && !this.el.isParent)) {
+                if (isRouterItem) {
+                    this.routerSlot.classList.add("ic-tree-item-single");
+                }
+                else {
+                    treeItemContent.classList.add("ic-tree-item-single");
+                }
+            }
+            while (parentElement) {
+                if (parentElement.tagName === this.treeItemTag) {
+                    level++;
+                    if (!this.el.isParent && isSiblingOfParent) {
+                        treeItemContent.style.paddingLeft = `calc(var(--ic-space-xl) + ${level * 16}px)`;
+                    }
+                    else if (!this.el.isParent) {
+                        treeItemContent.style.paddingLeft = `calc(var(--ic-space-xs) + ${level * 24}px`;
+                    }
+                    else {
+                        treeItemContent.style.paddingLeft = `${level * 16}px`;
+                    }
+                }
+                parentElement = parentElement.parentElement;
+            }
+        };
+        this.truncateTreeItemLabel = (treeItem) => {
+            const typographyEl = treeItem.shadowRoot.querySelector(".tree-item-label");
+            const tooltip = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP);
+            const treeContent = treeItem.shadowRoot.querySelector(".tree-item-content");
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (treeContent === null || treeContent === void 0 ? void 0 : treeContent.clientHeight)) {
+                typographyEl.classList.add("ic-text-overflow");
+                if (!tooltip) {
+                    const tooltipEl = document.createElement("ic-tooltip");
+                    tooltipEl.setAttribute("target", this.el.id);
+                    tooltipEl.setAttribute("label", typographyEl.textContent);
+                    tooltipEl.classList.add("ic-tooltip-overflow");
+                    tooltipEl.setAttribute("placement", "right");
+                    treeContent.appendChild(tooltipEl);
+                    tooltipEl.appendChild(typographyEl);
+                }
+            }
+        };
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations(addedNodes, removedNodes, "icon")
+                : false)) ;
+        };
+        this.handleDisplayTooltip = (display) => {
+            const typographyEl = this.el.shadowRoot.querySelector(".tree-item-label");
+            const tooltip = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP);
+            tooltip === null || tooltip === void 0 ? void 0 : tooltip.displayTooltip(display);
+        };
+        this.childTreeItems = undefined;
+        this.appearance = "dark";
+        this.disabled = false;
+        this.expanded = false;
+        this.hasParentExpanded = false;
+        this.href = undefined;
+        this.hreflang = "";
+        this.isParent = false;
+        this.label = "";
+        this.referrerpolicy = undefined;
+        this.rel = undefined;
+        this.selected = false;
+        this.size = "default";
+        this.target = undefined;
+    }
+    watchSelectedHandler() {
+        if (this.selected) {
+            this.icTreeItemSelected.emit({ id: this.el.id });
+        }
+        this.updateAriaLabel();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    componentDidLoad() {
+        this.childTreeItems = Array.from(this.el.children).filter((child) => child.tagName === this.treeItemTag);
+        if (this.childTreeItems.length > 0) {
+            this.isParent = true;
+        }
+        this.setTreeItemPadding();
+        this.updateAriaLabel();
+        this.truncateTreeItemLabel(this.el);
+        !isSlotUsed(this.el, "label") &&
+            onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tree item");
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
+    }
+    componentDidUpdate() {
+        if (this.hasParentExpanded) {
+            this.childTreeItems.forEach((child) => {
+                this.truncateTreeItemLabel(child);
+            });
+            this.hasParentExpanded = false;
+        }
+    }
+    handleKeyDown(ev) {
+        if (ev.key === "Enter" || ev.key === " ") {
+            ev.stopImmediatePropagation();
+            this.handleTreeItemClicked();
+        }
+    }
+    /**
+     * Sets focus on the native `input`.
+     */
+    async setFocus() {
+        var _a, _b;
+        if (this.hasRouterSlot()) {
+            (_a = this.routerSlot) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = this.treeItemElement) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    /**
+     * @internal Updates the aria-label of the tree item.
+     */
+    async updateAriaLabel() {
+        let ariaLabel;
+        if (this.hasRouterSlot()) {
+            ariaLabel = this.routerSlot.textContent;
+        }
+        else if (isSlotUsed(this.el, "label")) {
+            ariaLabel = this.el.querySelector('[slot="label"]').textContent;
+        }
+        else {
+            ariaLabel = this.label;
+        }
+        if (this.isParent) {
+            ariaLabel = `${ariaLabel}, triggers submenu, ${this.expanded ? "expanded" : "collapsed"}`;
+        }
+        if (this.el.parentElement) {
+            const treeItems = Array.from(this.el.parentElement.children).filter((child) => child.tagName === this.treeItemTag);
+            const index = treeItems.indexOf(this.el) + 1;
+            const parentChildren = treeItems.length;
+            ariaLabel = `${ariaLabel}, ${index} of ${parentChildren}`;
+        }
+        if (this.selected) {
+            ariaLabel = `${ariaLabel}, active`;
+        }
+        if (this.disabled) {
+            ariaLabel = `${ariaLabel}, dimmed`;
+        }
+        if (this.hasRouterSlot()) {
+            this.routerSlot.ariaLabel = ariaLabel;
+        }
+        else {
+            this.treeItemElement.ariaLabel = ariaLabel;
+        }
+    }
+    hasRouterSlot() {
+        this.routerSlot = this.el.querySelector('[slot="router-item"]');
+        return !!this.routerSlot;
+    }
+    render() {
+        const { appearance, disabled, label, selected, size, expanded } = this;
+        const Component = this.href && !this.disabled ? "a" : "div";
+        const attrs = Component == "a" && {
+            href: this.href,
+            hrefLang: this.hreflang,
+            referrerPolicy: this.referrerpolicy,
+            rel: this.rel,
+            target: this.target,
+        };
+        return (hAsync(Host, { class: {
+                [`ic-tree-item-${appearance}`]: true,
+                "ic-tree-item-disabled": disabled,
+                "ic-tree-item-selected": !disabled && selected,
+                [`ic-tree-item-${size}`]: size !== "default",
+            }, id: this.treeItemId }, this.hasRouterSlot() ? (hAsync("slot", { name: "router-item" })) : (hAsync(Component, Object.assign({ class: {
+                "tree-item-content": true,
+            }, tabIndex: disabled ? -1 : 0, onClick: this.handleTreeItemClicked, ref: (el) => (this.treeItemElement = el), "aria-disabled": disabled ? "true" : "false", "aria-live": "polite" }, attrs, { onFocus: () => this.handleDisplayTooltip(true), onBlur: () => this.handleDisplayTooltip(false) }), this.isParent && (hAsync("span", { class: {
+                ["arrow-dropdown"]: true,
+                ["tree-item-expanded"]: expanded,
+            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? hAsync("slot", { name: "label" }) : label))), expanded && (hAsync("div", { "aria-hidden": `${!expanded}` }, hAsync("slot", null)))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selected": ["watchSelectedHandler"]
+    }; }
+    static get style() { return icTreeItemCss; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ic-tree-item",
+        "$members$": {
+            "appearance": [1],
+            "disabled": [4],
+            "expanded": [1028],
+            "hasParentExpanded": [1028, "has-parent-expanded"],
+            "href": [1],
+            "hreflang": [1],
+            "isParent": [1028, "is-parent"],
+            "label": [1],
+            "referrerpolicy": [1],
+            "rel": [1],
+            "selected": [1028],
+            "size": [1],
+            "target": [1],
+            "childTreeItems": [32],
+            "setFocus": [64],
+            "updateAriaLabel": [64]
+        },
+        "$listeners$": [[0, "keydown", "handleKeyDown"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const icTreeViewCss = "/*!@:host*/.sc-ic-tree-view-h{display:block;width:var(--tree-view-width, 100%)}/*!@:host .heading-area-container*/.sc-ic-tree-view-h .heading-area-container.sc-ic-tree-view{border-bottom:var(--ic-border-default);display:flex;align-items:center;height:calc(var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px));padding:0 var(--ic-space-xs)}/*!@:host(.ic-tree-view-small) .heading-area-container*/.ic-tree-view-small.sc-ic-tree-view-h .heading-area-container.sc-ic-tree-view{height:calc(var(--ic-space-xl) - var(--ic-space-1px))}/*!@:host(.ic-tree-view-large) .heading-area-container*/.ic-tree-view-large.sc-ic-tree-view-h .heading-area-container.sc-ic-tree-view{height:calc(var(--ic-space-xxl) - var(--ic-space-1px))}/*!@:host(.ic-tree-view-light) .heading-area-container*/.ic-tree-view-light.sc-ic-tree-view-h .heading-area-container.sc-ic-tree-view{color:var(--ic-architectural-white);fill:var(--ic-architectural-white)}/*!@.icon-container*/.icon-container.sc-ic-tree-view{width:var(--ic-space-lg);height:var(--ic-space-lg);margin:0 var(--ic-space-xs) 0 0}/*!@:host(.ic-tree-view-small) .icon-container*/.ic-tree-view-small.sc-ic-tree-view-h .icon-container.sc-ic-tree-view{margin:0 var(--ic-space-xxs) 0 0}/*!@.ic-text-overflow*/.ic-text-overflow.sc-ic-tree-view{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}/*!@.ic-tooltip-overflow*/.ic-tooltip-overflow.sc-ic-tree-view{overflow:hidden}@media (forced-colors: active){/*!@::slotted([slot=\"icon\"])*/.sc-ic-tree-view-s>[slot=\"icon\"]{fill:currentcolor}}";
+
+let treeViewIds = 0;
+/**
+ * @slot heading - Content is set as the tree view heading.
+ * @slot icon - Content is placed to the left of the heading.
+ */
+class TreeView {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.treeViewId = `ic-tree-view-${treeViewIds++}`;
+        this.treeItemTag = "IC-TREE-ITEM";
+        this.hostMutationObserver = null;
+        this.handleKeyDown = (event) => {
+            var _a;
+            const focussedChild = this.treeItems.indexOf(this.treeItems.filter((el) => el === document.activeElement)[0]);
+            const expanded = (_a = this.treeItems[focussedChild]) === null || _a === void 0 ? void 0 : _a.expanded;
+            switch (event.key) {
+                case "ArrowDown":
+                    this.treeItems[this.getNextItemToSelect(focussedChild, true)].setFocus();
+                    if (focussedChild !== this.treeItems.length - 1) {
+                        event.preventDefault();
+                    }
+                    break;
+                case "ArrowUp":
+                    this.treeItems[this.getNextItemToSelect(focussedChild, false)].setFocus();
+                    if (focussedChild !== 0) {
+                        event.preventDefault();
+                    }
+                    break;
+                case "ArrowRight":
+                    if (this.treeItems[focussedChild].isParent && !expanded) {
+                        this.treeItems[focussedChild].expanded = true;
+                        this.treeItems[focussedChild].hasParentExpanded = true;
+                        this.treeItems[focussedChild].updateAriaLabel();
+                    }
+                    else if (this.treeItems[focussedChild].isParent && expanded) {
+                        this.treeItems[focussedChild].children[0].setFocus();
+                    }
+                    event.preventDefault();
+                    break;
+                case "ArrowLeft":
+                    if (this.treeItems[focussedChild].isParent && expanded) {
+                        this.treeItems[focussedChild].expanded = false;
+                        this.treeItems[focussedChild].hasParentExpanded = false;
+                        this.treeItems[focussedChild].updateAriaLabel();
+                    }
+                    else if (this.treeItems[focussedChild].parentElement.tagName ===
+                        this.treeItemTag) {
+                        this.treeItems[focussedChild].parentElement.setFocus();
+                    }
+                    event.preventDefault();
+                    break;
+            }
+        };
+        this.getNextItemToSelect = (currentItem, movingDown) => {
+            const numItems = this.treeItems.length - 1;
+            if (currentItem < 1) {
+                currentItem = 0;
+            }
+            let nextItem = movingDown ? currentItem + 1 : currentItem - 1;
+            if (nextItem < 0) {
+                nextItem = 0;
+            }
+            else if (nextItem > numItems) {
+                nextItem = numItems;
+            }
+            const maxAttempts = numItems + 1;
+            let attempts = 0;
+            while (attempts < maxAttempts) {
+                if (nextItem < 0 || nextItem > numItems) {
+                    return currentItem;
+                }
+                if (!this.treeItems[nextItem].disabled &&
+                    (this.treeItems[nextItem].parentElement.tagName !== this.treeItemTag ||
+                        this.treeItems[nextItem].parentElement
+                            .expanded)) {
+                    return nextItem;
+                }
+                if (nextItem === numItems && this.treeItems[nextItem].disabled) {
+                    return currentItem;
+                }
+                nextItem = movingDown ? nextItem + 1 : nextItem - 1;
+                attempts++;
+            }
+            return currentItem;
+        };
+        this.linkTreeItems = () => {
+            this.treeItems.forEach((treeItem) => {
+                treeItem.setAttribute("context-id", this.treeViewId);
+            });
+        };
+        this.setTreeItems = () => {
+            this.treeItems = this.getAllTreeItems(this.el);
+            this.linkTreeItems();
+        };
+        this.addSlotChangeListener = () => {
+            this.el.addEventListener("slotchange", this.setTreeItems);
+        };
+        this.truncateTreeViewHeading = () => {
+            const typographyEl = this.el.shadowRoot.querySelector(".tree-view-header");
+            const tooltip = typographyEl.closest("ic-tooltip");
+            const headingContainer = this.el.shadowRoot.querySelector(".heading-area-container");
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (headingContainer === null || headingContainer === void 0 ? void 0 : headingContainer.clientHeight)) {
+                typographyEl.classList.add("ic-text-overflow");
+                if (!tooltip) {
+                    const tooltipEl = document.createElement("ic-tooltip");
+                    tooltipEl.setAttribute("target", this.el.id);
+                    tooltipEl.setAttribute("label", typographyEl.textContent);
+                    tooltipEl.classList.add("ic-tooltip-overflow");
+                    tooltipEl.setAttribute("placement", "right");
+                    headingContainer.appendChild(tooltipEl);
+                    tooltipEl.appendChild(typographyEl);
+                }
+            }
+        };
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations(addedNodes, removedNodes, "icon")
+                : false)) ;
+        };
+        this.isHeadingDefined = () => isPropDefined(this.heading) && this.heading !== null;
+        this.hasHeadingAreaContent = () => {
+            return (isSlotUsed(this.el, "heading") ||
+                this.isHeadingDefined() ||
+                isSlotUsed(this.el, "icon"));
+        };
+        this.treeItems = undefined;
+        this.appearance = "dark";
+        this.heading = "";
+        this.size = "default";
+    }
+    watchAppearanceHandler() {
+        this.treeItems.forEach((treeItem) => {
+            treeItem.appearance = this.appearance;
+        });
+    }
+    watchSizeHandler() {
+        this.treeItems.forEach((treeItem) => {
+            treeItem.size = this.size;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.removeEventListener("slotchange", this.setTreeItems);
+        (_b = this.hostMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    componentDidLoad() {
+        this.setTreeItems();
+        this.watchAppearanceHandler();
+        this.watchSizeHandler();
+        setTimeout(() => {
+            this.truncateTreeViewHeading();
+        }, 100);
+        this.addSlotChangeListener();
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
+    }
+    handleTreeItemSelected(event) {
+        this.treeItems.forEach((treeItem) => {
+            if (treeItem.selected && treeItem.id !== event.detail.id) {
+                treeItem.selected = false;
+            }
+        });
+    }
+    getAllTreeItems(element) {
+        const treeItems = [];
+        const collectTreeItems = (el) => {
+            Array.from(el.children).forEach((child) => {
+                if (child.tagName === this.treeItemTag) {
+                    treeItems.push(child);
+                }
+                collectTreeItems(child);
+            });
+        };
+        collectTreeItems(element);
+        return treeItems;
+    }
+    render() {
+        const { appearance, heading, size } = this;
+        return (hAsync(Host, { "context-id": this.treeViewId, class: {
+                [`ic-tree-view-${appearance}`]: true,
+                [`ic-tree-view-${size}`]: size !== "default",
+            }, onKeyDown: this.handleKeyDown, "aria-label": this.isHeadingDefined() ? heading : null }, this.hasHeadingAreaContent() && (hAsync("div", { class: "heading-area-container" }, isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "subtitle-large", class: "tree-view-header" }, isSlotUsed(this.el, "heading") ? (hAsync("slot", { name: "heading" })) : (heading)))), hAsync("slot", null)));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "appearance": ["watchAppearanceHandler"],
+        "size": ["watchSizeHandler"]
+    }; }
+    static get style() { return icTreeViewCss; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ic-tree-view",
+        "$members$": {
+            "appearance": [1],
+            "heading": [1],
+            "size": [1],
+            "treeItems": [32]
+        },
+        "$listeners$": [[0, "icTreeItemSelected", "handleTreeItemSelected"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const icTypographyCss = "/*!@html*/html.sc-ic-typography{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-typography{margin:0}/*!@main*/main.sc-ic-typography{display:block}/*!@h1*/h1.sc-ic-typography{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-typography{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-typography{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-typography{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-typography{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-typography,strong.sc-ic-typography{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-typography,kbd.sc-ic-typography,samp.sc-ic-typography{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-typography{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-typography,sup.sc-ic-typography{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-typography{bottom:-0.25em}/*!@sup*/sup.sc-ic-typography{top:-0.5em}/*!@img*/img.sc-ic-typography{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-typography,input.sc-ic-typography,optgroup.sc-ic-typography,select.sc-ic-typography,textarea.sc-ic-typography{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-typography,input.sc-ic-typography{overflow:visible}/*!@button,\nselect*/button.sc-ic-typography,select.sc-ic-typography{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-typography,[type=\"button\"].sc-ic-typography,[type=\"reset\"].sc-ic-typography,[type=\"submit\"].sc-ic-typography{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-typography::-moz-focus-inner,[type=\"button\"].sc-ic-typography::-moz-focus-inner,[type=\"reset\"].sc-ic-typography::-moz-focus-inner,[type=\"submit\"].sc-ic-typography::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-typography:-moz-focusring,[type=\"button\"].sc-ic-typography:-moz-focusring,[type=\"reset\"].sc-ic-typography:-moz-focusring,[type=\"submit\"].sc-ic-typography:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-typography{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-typography{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-typography{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-typography{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-typography,[type=\"radio\"].sc-ic-typography{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-typography::-webkit-inner-spin-button,[type=\"number\"].sc-ic-typography::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-typography{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-typography::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-typography::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-typography{display:block}/*!@summary*/summary.sc-ic-typography{display:list-item}/*!@template*/template.sc-ic-typography{display:none}/*!@[hidden]*/[hidden].sc-ic-typography{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-typography,body.sc-ic-typography,div.sc-ic-typography,span.sc-ic-typography,applet.sc-ic-typography,object.sc-ic-typography,iframe.sc-ic-typography,h1.sc-ic-typography,h2.sc-ic-typography,h3.sc-ic-typography,h4.sc-ic-typography,h5.sc-ic-typography,h6.sc-ic-typography,p.sc-ic-typography,blockquote.sc-ic-typography,pre.sc-ic-typography,a.sc-ic-typography,abbr.sc-ic-typography,acronym.sc-ic-typography,address.sc-ic-typography,big.sc-ic-typography,cite.sc-ic-typography,code.sc-ic-typography,del.sc-ic-typography,dfn.sc-ic-typography,em.sc-ic-typography,img.sc-ic-typography,ins.sc-ic-typography,kbd.sc-ic-typography,q.sc-ic-typography,s.sc-ic-typography,samp.sc-ic-typography,small.sc-ic-typography,strike.sc-ic-typography,strong.sc-ic-typography,sub.sc-ic-typography,sup.sc-ic-typography,tt.sc-ic-typography,var.sc-ic-typography,b.sc-ic-typography,u.sc-ic-typography,i.sc-ic-typography,center.sc-ic-typography,dl.sc-ic-typography,dt.sc-ic-typography,dd.sc-ic-typography,ol.sc-ic-typography,ul.sc-ic-typography,li.sc-ic-typography,fieldset.sc-ic-typography,form.sc-ic-typography,label.sc-ic-typography,legend.sc-ic-typography,table.sc-ic-typography,caption.sc-ic-typography,tbody.sc-ic-typography,tfoot.sc-ic-typography,thead.sc-ic-typography,tr.sc-ic-typography,th.sc-ic-typography,td.sc-ic-typography,article.sc-ic-typography,aside.sc-ic-typography,canvas.sc-ic-typography,details.sc-ic-typography,embed.sc-ic-typography,figure.sc-ic-typography,figcaption.sc-ic-typography,footer.sc-ic-typography,header.sc-ic-typography,hgroup.sc-ic-typography,menu.sc-ic-typography,nav.sc-ic-typography,output.sc-ic-typography,ruby.sc-ic-typography,section.sc-ic-typography,summary.sc-ic-typography,time.sc-ic-typography,mark.sc-ic-typography,audio.sc-ic-typography,video.sc-ic-typography{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-typography-h{display:block;position:relative}/*!@:host(.ic-typography-vertical-margins-h1)*/.ic-typography-vertical-margins-h1.sc-ic-typography-h{margin:0 0 var(--ic-space-xl)}/*!@:host(.ic-typography-vertical-margins-h2)*/.ic-typography-vertical-margins-h2.sc-ic-typography-h{margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}/*!@:host(.ic-typography-vertical-margins-h3)*/.ic-typography-vertical-margins-h3.sc-ic-typography-h{margin:var(--ic-space-xl) 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-h4)*/.ic-typography-vertical-margins-h4.sc-ic-typography-h{margin:var(--ic-space-lg) 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body),\n:host(.ic-typography-vertical-margins-code-large),\n:host(.ic-typography-vertical-margins-code-small),\n:host(.ic-typography-vertical-margins-code-extra-small)*/.ic-typography-vertical-margins-subtitle-large.sc-ic-typography-h,.ic-typography-vertical-margins-subtitle-small.sc-ic-typography-h,.ic-typography-vertical-margins-body.sc-ic-typography-h,.ic-typography-vertical-margins-code-large.sc-ic-typography-h,.ic-typography-vertical-margins-code-small.sc-ic-typography-h,.ic-typography-vertical-margins-code-extra-small.sc-ic-typography-h{margin:0 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase)*/.ic-typography-vertical-margins-caption.sc-ic-typography-h,.ic-typography-vertical-margins-caption-uppercase.sc-ic-typography-h{margin:0 0 var(--ic-space-xs)}/*!@:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child)*/.ic-typography-vertical-margins-h2.sc-ic-typography-h:first-child,.ic-typography-vertical-margins-h3.sc-ic-typography-h:first-child,.ic-typography-vertical-margins-h4.sc-ic-typography-h:first-child{margin-top:0}/*!@:host(.ic-typography-h1)*/.ic-typography-h1.sc-ic-typography-h{font:var(--ic-font-h1) !important}/*!@:host(.ic-typography-h2)*/.ic-typography-h2.sc-ic-typography-h{font:var(--ic-font-h2);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-h3)*/.ic-typography-h3.sc-ic-typography-h{font:var(--ic-font-h3)}/*!@:host(.ic-typography-h4)*/.ic-typography-h4.sc-ic-typography-h{font:var(--ic-font-h4);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-subtitle-large)*/.ic-typography-subtitle-large.sc-ic-typography-h{font:var(--ic-font-subtitle-large);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-subtitle-small)*/.ic-typography-subtitle-small.sc-ic-typography-h{font:var(--ic-font-subtitle-small);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-body)*/.ic-typography-body.sc-ic-typography-h{font:var(--ic-font-body);letter-spacing:var(--ic-font-letter-spacing-0pt005)}/*!@:host(.ic-typography-caption)*/.ic-typography-caption.sc-ic-typography-h{font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-caption-uppercase)*/.ic-typography-caption-uppercase.sc-ic-typography-h{font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025);text-transform:uppercase}/*!@:host(.ic-typography-label)*/.ic-typography-label.sc-ic-typography-h{font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-label-uppercase)*/.ic-typography-label-uppercase.sc-ic-typography-h{font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025);text-transform:uppercase}/*!@:host(.ic-typography-code-large)*/.ic-typography-code-large.sc-ic-typography-h{font:var(--ic-font-code-large);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-code-small)*/.ic-typography-code-small.sc-ic-typography-h{font:var(--ic-font-code-small);letter-spacing:var(--ic-font-letter-spacing-0pt005)}/*!@:host(.ic-typography-code-extra-small)*/.ic-typography-code-extra-small.sc-ic-typography-h{font:var(--ic-font-code-extra-small);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-badge)*/.ic-typography-badge.sc-ic-typography-h{font:var(--ic-font-badge);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-badge-small)*/.ic-typography-badge-small.sc-ic-typography-h{font:var(--ic-font-badge-small);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-no-wrap)*/.ic-typography-no-wrap.sc-ic-typography-h{white-space:nowrap}/*!@:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label)*/.sc-ic-typography-h .sc-ic-typography-s>h1,.sc-ic-typography-h.sc-ic-typography-s>h2,.sc-ic-typography-h .sc-ic-typography-s>h2,.sc-ic-typography-h.sc-ic-typography-s>h3,.sc-ic-typography-h .sc-ic-typography-s>h3,.sc-ic-typography-h.sc-ic-typography-s>h4,.sc-ic-typography-h .sc-ic-typography-s>h4,.sc-ic-typography-h.sc-ic-typography-s>h5,.sc-ic-typography-h .sc-ic-typography-s>h5,.sc-ic-typography-h.sc-ic-typography-s>h6,.sc-ic-typography-h .sc-ic-typography-s>h6,.sc-ic-typography-h.sc-ic-typography-s>p,.sc-ic-typography-h .sc-ic-typography-s>p,.sc-ic-typography-h.sc-ic-typography-s>label,.sc-ic-typography-h .sc-ic-typography-s>label{font:inherit;letter-spacing:inherit}/*!@.trunc-wrapper*/.trunc-wrapper.sc-ic-typography{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--truncation-max-lines, initial);-webkit-line-clamp:var(--truncation-max-lines, initial);overflow:hidden;padding-right:var(--ellipsis-padding-right, 0)}/*!@.trunc-btn*/.trunc-btn.sc-ic-typography{border:none;background:none;padding:0;color:var(--ic-color-primary-text);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}/*!@.trunc-btn:hover,\n.trunc-btn.focus*/.trunc-btn.sc-ic-typography:hover,.trunc-btn.focus.sc-ic-typography{outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none;cursor:pointer}/*!@:host(.strikethrough)*/.strikethrough.sc-ic-typography-h{text-decoration:line-through}/*!@:host(.underline)*/.underline.sc-ic-typography-h{text-decoration:underline}/*!@:host(.underline.strikethrough)*/.underline.strikethrough.sc-ic-typography-h{text-decoration:line-through underline}/*!@:host(.italic)*/.italic.sc-ic-typography-h{font-style:italic !important}/*!@:host(.bold)*/.bold.sc-ic-typography-h{font-weight:var(--ic-font-weight-bold)}/*!@:host(.in-ag-grid),\n:host(.in-ag-grid) ::slotted(*)*/.in-ag-grid.sc-ic-typography-h,.sc-ic-typography-h.in-ag-grid.sc-ic-typography-s>*,.sc-ic-typography-h.in-ag-grid .sc-ic-typography-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@supports (text-underline-offset: 25%){/*!@.trunc-btn:hover,\n  .trunc-btn.focus*/.trunc-btn.sc-ic-typography:hover,.trunc-btn.focus.sc-ic-typography{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
 
 class Typography {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.typographyTruncationExpandToggle = createEvent(this, "typographyTruncationExpandToggle", 7);
         this.focusBtnFromKeyboard = true;
+        this.inAGGrid = false;
         this.lastMarkerTop = 0;
         this.lastWidth = 0;
         this.resizeObserver = null;
         this.truncatedHeight = 0;
-        this.toggleExpanded = () => {
+        this.toggleExpanded = (ev) => {
+            ev.stopPropagation();
             this.expanded = !this.expanded;
-        };
-        this.checkMaxLines = (height) => {
-            //24 is the height of a single line
-            const numLines = Math.floor(height / 24);
-            if (numLines > this.maxLines) {
-                this.el.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
-                this.truncatedHeight = this.el.clientHeight;
-                this.truncated = true;
-            }
+            this.typographyTruncationExpandToggle.emit({
+                expanded: this.expanded,
+                typographyEl: this.el,
+            });
         };
         this.checkMarkerPosition = (elTop, markerTop) => {
             if (markerTop - elTop < this.truncatedHeight) {
@@ -27527,6 +28783,18 @@ class Typography {
             this.resizeObserver.disconnect();
         }
     }
+    /**
+     * @internal This is used by data table to remove all truncation in certain events
+     */
+    async resetTruncation() {
+        if (this.truncated) {
+            this.truncated = false;
+            this.maxLines = 0;
+            this.el.removeAttribute("max-lines");
+            this.expanded = false;
+            this.el.removeAttribute("style");
+        }
+    }
     componentDidLoad() {
         var _a, _b;
         if ((this.variant === "body" ||
@@ -27542,6 +28810,30 @@ class Typography {
             checkResizeObserver$1(this.runResizeObserver);
         }
     }
+    componentWillRender() {
+        if (isElInAGGrid(this.el)) {
+            this.inAGGrid = true;
+        }
+    }
+    /**
+     * @internal This checks if the number of lines of text exceeds the maxLines prop. If so, set the line clamp CSS to the max lines
+     * @param height - text container height
+     */
+    async checkMaxLines(height) {
+        //24 is the height of a single line
+        const numLines = Math.floor(height / 24);
+        if (numLines > this.maxLines) {
+            this.el.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
+            this.truncatedHeight = this.el.clientHeight;
+            this.truncated = true;
+        }
+    }
+    /**
+     * @internal This method makes it possible to set the expanded status of truncated text outside of ic-typography component
+     */
+    async setShowHideExpanded(expanded) {
+        this.expanded = expanded;
+    }
     render() {
         var _a, _b;
         const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, } = this;
@@ -27552,6 +28844,7 @@ class Typography {
                 ["italic"]: italic,
                 ["strikethrough"]: strikethrough,
                 ["underline"]: underline,
+                ["in-ag-grid"]: this.inAGGrid,
             } }, (variant === "body" ||
             ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
                 "IC-TOOLTIP") &&
@@ -27569,13 +28862,16 @@ class Typography {
             "applyVerticalMargins": [4, "apply-vertical-margins"],
             "bold": [4],
             "italic": [4],
-            "maxLines": [2, "max-lines"],
+            "maxLines": [1026, "max-lines"],
             "strikethrough": [4],
             "underline": [4],
             "variant": [1],
             "truncated": [32],
             "truncButtonFocussed": [32],
-            "expanded": [32]
+            "expanded": [32],
+            "resetTruncation": [64],
+            "checkMaxLines": [64],
+            "setShowHideExpanded": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -27592,6 +28888,7 @@ registerComponents([
   Breadcrumb,
   BreadcrumbGroup,
   Button,
+  Card$1,
   Card,
   Checkbox,
   CheckboxGroup,
@@ -27654,6 +28951,8 @@ registerComponents([
   ToggleButtonGroup,
   Tooltip,
   TopNavigation,
+  TreeItem,
+  TreeView,
   Typography,
 ]);