npm - @ukic/web-components - Versions diffs - 3.15.0 → 3.16.0 - Mend

@ukic/web-components 3.15.0 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/dist/esm/ic-footer.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-footer.entry.js","mappings":"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","names":[],"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --footer-compliance-padding: 1rem 0;\n}\n\n:host(.ic-footer-sparse) {\n --footer-links-padding: 1.5rem 0;\n --footer-logo-margin-bottom: calc(var(--ic-space-md) + var(--ic-space-xxs));\n --footer-link-inner-flex-direction: row;\n}\n\n:host(.ic-footer-small) {\n --footer-links-padding: 0 0;\n --footer-logo-margin-bottom: var(--ic-space-md);\n --footer-link-inner-flex-direction: column;\n}\n\n:host(.ic-footer-foreground-dark) {\n --ic-footer-background: var(--ic-brand-color-secondary-light);\n --ic-footer-bottom-background: var(--ic-brand-color-tertiary-light);\n --ic-footer-keyline: var(--ic-state-layer-darken-20);\n --ic-footer-text: var(--ic-color-text-primary-light);\n --ic-footer-link: var(--ic-color-text-primary-light);\n --ic-footer-icon: var(--ic-color-icon-neutral);\n --ic-footer-chevron-icon: var(--ic-color-icon-neutral);\n --ic-footer-logo: var(--ic-color-icon-neutral);\n --ic-footer-hover: var(--ic-architectural-700-state-layer-10);\n --ic-footer-pressed: var(--ic-architectural-700-state-layer-20);\n}\n\n:host(.ic-footer-small.ic-footer-ungrouped) {\n --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element /\nfooter {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/ Description /\n\n.footer-description {\n background-color: var(--ic-footer-background);\n color: var(--ic-footer-text);\n\n --ic-typography-color: var(--ic-footer-text);\n\n border-bottom: var(--ic-space-1px) solid var(--ic-footer-keyline);\n}\n\n.footer-description-inner {\n padding: 1rem 0;\n}\n\n/ Links /\n\n.footer-links {\n padding: var(--footer-links-padding);\n background-color: var(--ic-footer-background);\n color: var(--ic-footer-link);\n\n --ic-typography-color: var(--ic-footer-link);\n}\n\n.footer-links-inner {\n display: flex;\n flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/ Compliance /\n\n.footer-compliance {\n background-color: var(--ic-footer-bottom-background);\n color: var(--ic-footer-text);\n\n --ic-typography-color: var(--ic-footer-text);\n}\n\n.footer-compliance-inner {\n padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n margin-bottom: var(--footer-logo-margin-bottom);\n display: flex;\n gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n@media (forced-colors: active) {\n footer {\n border-top: var(--ic-border-hc);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n checkResizeObserver,\n hasClassificationBanner,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n IcAlignment,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/\n @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n /\n\n@Component({\n tag: \"ic-footer\",\n styleUrl: \"ic-footer.css\",\n shadow: true,\n})\nexport class Footer {\n private footerEl?: HTMLElement;\n private resizeObserver: ResizeObserver \| null = null;\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcFooterElement;\n\n @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n /\n The alignment of the section containers used within the footer.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n The screen size breakpoint at which to switch to the small layout.\n /\n @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n /\n The caption displayed at the bottom of the footer.\n /\n @Prop() caption?: string;\n\n /\n If `true`, the footer will display the crown copyright at the bottom.\n /\n @Prop() copyright?: boolean = true;\n\n /\n The description displayed at the top of the footer.\n /\n @Prop() description?: string;\n\n /\n If `true`, the footer will be set up to handle link groups instead of standalone links.\n /\n @Prop() groupLinks?: boolean = false;\n\n /\n @internal Triggers on page resize and triggers style changes in footer links and link groups\n /\n @Event() footerResized: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n\n this.hostMutationObserver = new MutationObserver((mutationList) => {\n return renderDynamicChildSlots(mutationList, \"link\", this);\n });\n\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n private isSmall() {\n const bp = this.breakpoint;\n\n return bp === \"extra small\"\n ? this.deviceSize < IC_DEVICE_SIZES.XS\n : bp === \"small\"\n ? this.deviceSize < IC_DEVICE_SIZES.S\n : bp === \"medium\"\n ? this.deviceSize < IC_DEVICE_SIZES.M\n : bp === \"large\"\n ? this.deviceSize < IC_DEVICE_SIZES.L\n : bp === \"extra large\"\n ? this.deviceSize < IC_DEVICE_SIZES.XL\n : false;\n }\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n this.footerResized.emit();\n };\n\n private runResizeObserver = () => {\n if (this.footerEl) {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.footerEl);\n }\n };\n\n render() {\n const {\n aligned,\n caption,\n copyright,\n description,\n deviceSize,\n el,\n foregroundColor,\n groupLinks,\n } = this;\n const small = this.isSmall();\n\n const showComplianceSection =\n isSlotUsed(el, \"logo\") \|\|\n isSlotUsed(el, \"caption\") \|\|\n caption \|\|\n copyright;\n\n return (\n <Host\n class={{\n [\"ic-footer\"]: true,\n [`ic-footer-${small ? \"small\" : \"sparse\"}`]: true,\n [`ic-footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n [`ic-footer-foreground-${foregroundColor}`]: true,\n // Slots will be able to infer their own color\n [`ic-footer-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-footer-${IcBrandForegroundEnum.Light}`]:\n foregroundColor === IcBrandForegroundEnum.Light,\n }}\n >\n <footer ref={(el) => (this.footerEl = el)}>\n {/ Description /}\n {(isSlotUsed(el, \"description\") \|\| description) && (\n <div class=\"footer-description\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-description-inner\">\n <ic-typography variant=\"body\">\n <slot name=\"description\">{description}</slot>\n </ic-typography>\n </div>\n </ic-section-container>\n </div>\n )}\n\n {/ Links /}\n {isSlotUsed(el, \"link\") && (\n <div class=\"footer-links\">\n {groupLinks && small ? (\n <div class=\"footer-links-inner\" role=\"list\">\n <slot name=\"link\" />\n </div>\n ) : (\n <ic-section-container fullHeight aligned={aligned}>\n <div class=\"footer-links-inner\" role=\"list\">\n <slot name=\"link\" />\n </div>\n </ic-section-container>\n )}\n </div>\n )}\n\n {/ Compliance (logo, caption, copyright) */}\n {showComplianceSection && (\n <div class=\"footer-compliance\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-compliance-inner\">\n {isSlotUsed(el, \"logo\") && (\n <div class=\"footer-logo\">\n <slot name=\"logo\" />\n </div>\n )}\n {(isSlotUsed(el, \"caption\") \|\| caption) && (\n <div class=\"footer-caption\">\n <ic-typography\n variant={\n deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n }\n >\n <slot name=\"caption\">{caption}</slot>\n </ic-typography>\n </div>\n )}\n {copyright && (\n <div\n class={{\n [\"footer-copyright\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n <ic-typography\n variant={\n deviceSize <= IC_DEVICE_SIZES.M\n ? \"caption-uppercase\"\n : \"label-uppercase\"\n }\n >\n © Crown Copyright\n </ic-typography>\n </div>\n )}\n </div>\n </ic-section-container>\n </div>\n )}\n </footer>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-footer.entry.js","mappings":"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","names":[],"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --footer-compliance-padding: 1rem 0;\n}\n\n:host(.ic-footer-sparse) {\n --footer-links-padding: 1.5rem 0;\n --footer-logo-margin-bottom: calc(var(--ic-space-md) + var(--ic-space-xxs));\n --footer-link-inner-flex-direction: row;\n}\n\n:host(.ic-footer-small) {\n --footer-links-padding: 0 0;\n --footer-logo-margin-bottom: var(--ic-space-md);\n --footer-link-inner-flex-direction: column;\n}\n\n:host(.ic-footer-foreground-dark) {\n --ic-footer-background: var(--ic-brand-color-secondary-light);\n --ic-footer-bottom-background: var(--ic-brand-color-tertiary-light);\n --ic-footer-keyline: var(--ic-state-layer-darken-20);\n --ic-footer-text: var(--ic-color-text-primary-light);\n --ic-footer-link: var(--ic-color-text-primary-light);\n --ic-footer-icon: var(--ic-color-icon-neutral);\n --ic-footer-chevron-icon: var(--ic-color-icon-neutral);\n --ic-footer-logo: var(--ic-color-icon-neutral);\n --ic-footer-hover: var(--ic-architectural-700-state-layer-10);\n --ic-footer-pressed: var(--ic-architectural-700-state-layer-20);\n}\n\n:host(.ic-footer-small.ic-footer-ungrouped) {\n --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element /\nfooter {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/ Description /\n\n.footer-description {\n background-color: var(--ic-footer-background);\n color: var(--ic-footer-text);\n\n --ic-typography-color: var(--ic-footer-text);\n\n border-bottom: var(--ic-space-1px) solid var(--ic-footer-keyline);\n}\n\n.footer-description-inner {\n padding: 1rem 0;\n}\n\n/ Links /\n\n.footer-links {\n padding: var(--footer-links-padding);\n background-color: var(--ic-footer-background);\n color: var(--ic-footer-link);\n\n --ic-typography-color: var(--ic-footer-link);\n}\n\n.footer-links-inner {\n display: flex;\n flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/ Compliance /\n\n.footer-compliance {\n background-color: var(--ic-footer-bottom-background);\n color: var(--ic-footer-text);\n\n --ic-typography-color: var(--ic-footer-text);\n}\n\n.footer-compliance-inner {\n padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n margin-bottom: var(--footer-logo-margin-bottom);\n display: flex;\n gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n@media (forced-colors: active) {\n footer {\n border-top: var(--ic-border-hc);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n checkResizeObserver,\n hasClassificationBanner,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n IcAlignment,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/\n @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n /\n\n@Component({\n tag: \"ic-footer\",\n styleUrl: \"ic-footer.css\",\n shadow: true,\n})\nexport class Footer {\n private footerEl?: HTMLElement;\n private resizeObserver: ResizeObserver \| null = null;\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcFooterElement;\n\n @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n /\n The alignment of the section containers used within the footer.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n The screen size breakpoint at which to switch to the small layout.\n /\n @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n /\n The caption displayed at the bottom of the footer.\n /\n @Prop() caption?: string;\n\n /\n If `true`, the footer will display the crown copyright at the bottom.\n /\n @Prop() copyright?: boolean = true;\n\n /\n The text displayed for the copyright notice if `copyright` is `true`.\n /\n @Prop() copyrightText?: string = \"© Crown Copyright\";\n\n /\n The description displayed at the top of the footer.\n /\n @Prop() description?: string;\n\n /\n If `true`, the footer will be set up to handle link groups instead of standalone links.\n /\n @Prop() groupLinks?: boolean = false;\n\n /\n @internal Triggers on page resize and triggers style changes in footer links and link groups\n /\n @Event() footerResized: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n\n this.hostMutationObserver = new MutationObserver((mutationList) => {\n return renderDynamicChildSlots(mutationList, \"link\", this);\n });\n\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n private isSmall() {\n const bp = this.breakpoint;\n\n return bp === \"extra small\"\n ? this.deviceSize < IC_DEVICE_SIZES.XS\n : bp === \"small\"\n ? this.deviceSize < IC_DEVICE_SIZES.S\n : bp === \"medium\"\n ? this.deviceSize < IC_DEVICE_SIZES.M\n : bp === \"large\"\n ? this.deviceSize < IC_DEVICE_SIZES.L\n : bp === \"extra large\"\n ? this.deviceSize < IC_DEVICE_SIZES.XL\n : false;\n }\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n this.footerResized.emit();\n };\n\n private runResizeObserver = () => {\n if (this.footerEl) {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.footerEl);\n }\n };\n\n render() {\n const {\n aligned,\n caption,\n copyright,\n copyrightText,\n description,\n deviceSize,\n el,\n foregroundColor,\n groupLinks,\n } = this;\n const small = this.isSmall();\n\n const showComplianceSection =\n isSlotUsed(el, \"logo\") \|\|\n isSlotUsed(el, \"caption\") \|\|\n caption \|\|\n copyright;\n\n return (\n <Host\n class={{\n [\"ic-footer\"]: true,\n [`ic-footer-${small ? \"small\" : \"sparse\"}`]: true,\n [`ic-footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n [`ic-footer-foreground-${foregroundColor}`]: true,\n // Slots will be able to infer their own color\n [`ic-footer-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-footer-${IcBrandForegroundEnum.Light}`]:\n foregroundColor === IcBrandForegroundEnum.Light,\n }}\n >\n <footer ref={(el) => (this.footerEl = el)}>\n {/ Description /}\n {(isSlotUsed(el, \"description\") \|\| description) && (\n <div class=\"footer-description\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-description-inner\">\n <ic-typography variant=\"body\">\n <slot name=\"description\">{description}</slot>\n </ic-typography>\n </div>\n </ic-section-container>\n </div>\n )}\n\n {/ Links /}\n {isSlotUsed(el, \"link\") && (\n <div class=\"footer-links\">\n {groupLinks && small ? (\n <div class=\"footer-links-inner\" role=\"list\">\n <slot name=\"link\" />\n </div>\n ) : (\n <ic-section-container fullHeight aligned={aligned}>\n <div class=\"footer-links-inner\" role=\"list\">\n <slot name=\"link\" />\n </div>\n </ic-section-container>\n )}\n </div>\n )}\n\n {/ Compliance (logo, caption, copyright) */}\n {showComplianceSection && (\n <div class=\"footer-compliance\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-compliance-inner\">\n {isSlotUsed(el, \"logo\") && (\n <div class=\"footer-logo\">\n <slot name=\"logo\" />\n </div>\n )}\n {(isSlotUsed(el, \"caption\") \|\| caption) && (\n <div class=\"footer-caption\">\n <ic-typography\n variant={\n deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n }\n >\n <slot name=\"caption\">{caption}</slot>\n </ic-typography>\n </div>\n )}\n {copyright && (\n <div\n class={{\n [\"footer-copyright\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n <ic-typography\n variant={\n deviceSize <= IC_DEVICE_SIZES.M\n ? \"caption-uppercase\"\n : \"label-uppercase\"\n }\n >\n {copyrightText}\n </ic-typography>\n </div>\n )}\n </div>\n </ic-section-container>\n </div>\n )}\n </footer>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ic-hero.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-hero.entry.js","mappings":"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","names":[],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n background-color: var(--ic-hero-background);\n\n --hero-heading-bottom-margin: var(--ic-space-md);\n --hero-keyline: var(--ic-hero-keyline);\n}\n\n:host(.ic-hero-dark) {\n background-color: var(--ic-brand-color-secondary);\n\n --ic-hero-heading: var(--ic-color-text-primary-light);\n --ic-hero-body: var(--ic-color-text-primary-light);\n --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n --hero-keyline: var(--ic-brand-text-color);\n}\n\n.heading {\n --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n --ic-typography-color: var(--ic-hero-secondary-heading);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left: var(--ic-space-xxxs) solid var(--hero-keyline);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -6.25rem;\n background-size: auto calc(100% + 6.25rem);\n box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n :host(.has-background-image) {\n background-position: right -6.25rem !important;\n }\n}\n\nic-typography.heading-bottom-spacing {\n margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n flex-basis: 50%;\n}\n\n.left-container-full-width {\n width: 100%;\n}\n\n.right-container {\n flex-basis: 50%;\n}\n\n.interaction-container {\n display: flex;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-lg);\n flex-wrap: wrap;\n\n --ic-date-input-label: var(--ic-brand-text-color);\n --ic-time-picker-label: var(--ic-brand-text-color);\n --ic-checkbox-group-label: var(--ic-brand-text-color);\n --ic-radio-button-input-field-label: var(--ic-brand-text-color);\n --ic-search-bar-label: var(--ic-brand-text-color);\n --ic-select-field-label: var(--ic-brand-text-color);\n --ic-switch-label: var(--ic-brand-text-color);\n --ic-text-field-label: var(--ic-brand-text-color);\n\n --ic-date-input-subtitle: var(--ic-brand-text-color);\n --ic-time-picker-subtitle: var(--ic-brand-text-color);\n --ic-checkbox-group-subtitle: var(--ic-brand-text-color);\n --ic-radio-button-input-field-subtitle: var(--ic-brand-text-color);\n --ic-search-bar-subtitle: var(--ic-brand-text-color);\n --ic-select-input-field-label-subtitle: var(--ic-brand-text-color);\n --ic-switch-subtitle: var(--ic-brand-text-color);\n --ic-text-field-subtitle: var(--ic-brand-text-color);\n\n --ic-checkbox-text: var(--ic-brand-text-color);\n --ic-radio-button-text-option: var(--ic-brand-text-color);\n}\n\n.secondary-subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n:host(.ic-hero-content-aligned-left) .left-container,\n:host(.ic-hero-content-aligned-left) .interaction-container {\n justify-content: flex-start;\n text-align: left;\n}\n\n:host(.ic-hero-content-aligned-center) .left-container,\n:host(.ic-hero-content-aligned-center) .interaction-container {\n justify-content: center;\n text-align: center;\n}\n\n@media (min-width: 992px) {\n .left-container-full-width {\n width: 66.6%;\n }\n}\n\n@media (min-width: 1044px) {\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n .left-container:not(.left-container-full-width) {\n flex-basis: 66.6%;\n }\n\n .left-container {\n min-height: 9rem;\n }\n\n .right-container {\n flex-basis: 33.3%;\n margin-left: 3.125rem;\n }\n\n .secondary-container {\n min-height: 9rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 3.938rem;\n }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 5.922rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host(.has-right-content) .section-container {\n flex-wrap: wrap;\n }\n\n :host(.has-right-content) .left-container {\n flex-basis: 100%;\n }\n\n :host(.has-right-content) .right-container {\n flex-basis: 100%;\n margin-bottom: 2.5rem;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 2.125rem;\n }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 17.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 2.5rem;\n }\n}\n\n@media (max-width: 480px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 12rem;\n }\n\n :host,\n .right-container {\n margin-bottom: var(--ic-space-md);\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 16.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcSizesNoLarge,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getBrandForegroundAppearance,\n onComponentRequiredPropUndefined,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/*\n @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n /\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcHeroElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() rightContent: boolean = false;\n // set by above state\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n @State() scrollFactor: string = \"right -100px\";\n\n /\n The alignment of the hero.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n The optional background image.\n /\n @Prop() backgroundImage?: string;\n\n /\n The alignment of the hero content.\n /\n @Prop() contentAligned?: IcHeroContentAlignments = \"left\";\n\n /\n If `true`, the background image (if set) will not scroll using a parallax effect.\n /\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /\n The heading of the hero. An <h2> level heading.\n /\n @Prop() heading?: string;\n\n /\n The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n /\n @Prop() secondaryHeading?: string;\n\n /\n The optional secondary subheading, replaced by slotted right content.\n /\n @Prop() secondarySubheading?: string;\n\n /\n The size of the hero component.\n /\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /\n The description for the hero.\n /\n @Prop() subheading?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"secondary\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement?.scrollTop;\n if (scrolltotop) {\n const factor = 0.4;\n const y = -100 + scrolltotop factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n }\n\n render() {\n const {\n aligned,\n size,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n contentAligned,\n theme,\n } = this;\n\n let style = {};\n\n if (isPropDefined(backgroundImage)) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"has-right-content\"]: this.rightContent,\n [\"ic-hero-small\"]: size === \"small\",\n [\"secondary-heading\"]: !!secondaryHeading,\n [`ic-hero-content-aligned-${contentAligned}`]:\n contentAligned !== undefined,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h2\" : \"h1\"}\n class={{\n [\"heading-bottom-spacing\"]: size !== \"small\",\n }}\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(isPropDefined(secondaryHeading) \|\| this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n <h3>{secondaryHeading}</h3>\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-hero.entry.js","mappings":"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","names":[],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n background-color: var(--ic-hero-background);\n\n --hero-heading-bottom-margin: var(--ic-space-md);\n --hero-keyline: var(--ic-hero-keyline);\n}\n\n:host(.ic-hero-dark) {\n background-color: var(--ic-brand-color-secondary);\n\n --ic-hero-heading: var(--ic-color-text-primary-light);\n --ic-hero-body: var(--ic-color-text-primary-light);\n --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n --hero-keyline: var(--ic-brand-text-color);\n}\n\n.heading {\n --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n --ic-typography-color: var(--ic-hero-secondary-heading);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left: var(--ic-space-xxxs) solid var(--hero-keyline);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -6.25rem;\n background-size: auto calc(100% + 6.25rem);\n box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n :host(.has-background-image) {\n background-position: right -6.25rem !important;\n }\n}\n\nic-typography.heading-bottom-spacing {\n margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n flex-basis: 50%;\n}\n\n.left-container-full-width {\n width: 100%;\n}\n\n.right-container {\n flex-basis: 50%;\n}\n\n.interaction-container {\n display: flex;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-lg);\n flex-wrap: wrap;\n\n --ic-date-input-label: var(--ic-brand-text-color);\n --ic-time-picker-label: var(--ic-brand-text-color);\n --ic-checkbox-group-label: var(--ic-brand-text-color);\n --ic-radio-button-input-field-label: var(--ic-brand-text-color);\n --ic-search-bar-label: var(--ic-brand-text-color);\n --ic-select-field-label: var(--ic-brand-text-color);\n --ic-switch-label: var(--ic-brand-text-color);\n --ic-text-field-label: var(--ic-brand-text-color);\n --ic-date-input-subtitle: var(--ic-brand-text-color);\n --ic-time-picker-subtitle: var(--ic-brand-text-color);\n --ic-checkbox-group-subtitle: var(--ic-brand-text-color);\n --ic-radio-button-input-field-subtitle: var(--ic-brand-text-color);\n --ic-search-bar-subtitle: var(--ic-brand-text-color);\n --ic-select-input-field-label-subtitle: var(--ic-brand-text-color);\n --ic-switch-subtitle: var(--ic-brand-text-color);\n --ic-text-field-subtitle: var(--ic-brand-text-color);\n --ic-checkbox-text: var(--ic-brand-text-color);\n --ic-radio-button-text-option: var(--ic-brand-text-color);\n}\n\n.secondary-subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n:host(.ic-hero-content-aligned-left) .left-container,\n:host(.ic-hero-content-aligned-left) .interaction-container {\n justify-content: flex-start;\n text-align: left;\n}\n\n:host(.ic-hero-content-aligned-center) .left-container,\n:host(.ic-hero-content-aligned-center) .interaction-container {\n justify-content: center;\n text-align: center;\n}\n\n@media (min-width: 992px) {\n .left-container-full-width {\n width: 66.6%;\n }\n}\n\n@media (min-width: 1044px) {\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n .left-container:not(.left-container-full-width) {\n flex-basis: 66.6%;\n }\n\n .left-container {\n min-height: 9rem;\n }\n\n .right-container {\n flex-basis: 33.3%;\n margin-left: 3.125rem;\n }\n\n .secondary-container {\n min-height: 9rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 3.938rem;\n }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 5.922rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host(.has-right-content) .section-container {\n flex-wrap: wrap;\n }\n\n :host(.has-right-content) .left-container {\n flex-basis: 100%;\n }\n\n :host(.has-right-content) .right-container {\n flex-basis: 100%;\n margin-bottom: 2.5rem;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 2.125rem;\n }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 17.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 2.5rem;\n }\n}\n\n@media (max-width: 480px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 12rem;\n }\n\n :host,\n .right-container {\n margin-bottom: var(--ic-space-md);\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 16.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcSizesNoLarge,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getBrandForegroundAppearance,\n onComponentRequiredPropUndefined,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/*\n @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n /\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcHeroElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() rightContent: boolean = false;\n // set by above state\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n @State() scrollFactor: string = \"right -100px\";\n\n /\n The alignment of the hero.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n The optional background image.\n /\n @Prop() backgroundImage?: string;\n\n /\n The alignment of the hero content.\n /\n @Prop() contentAligned?: IcHeroContentAlignments = \"left\";\n\n /\n If `true`, the background image (if set) will not scroll using a parallax effect.\n /\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /\n The heading of the hero. An <h2> level heading.\n /\n @Prop() heading?: string;\n\n /\n The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n /\n @Prop() secondaryHeading?: string;\n\n /\n The optional secondary subheading, replaced by slotted right content.\n /\n @Prop() secondarySubheading?: string;\n\n /\n The size of the hero component.\n /\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /\n The description for the hero.\n /\n @Prop() subheading?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"secondary\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement?.scrollTop;\n if (scrolltotop) {\n const factor = 0.4;\n const y = -100 + scrolltotop factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n }\n\n render() {\n const {\n aligned,\n size,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n contentAligned,\n theme,\n } = this;\n\n let style = {};\n\n if (isPropDefined(backgroundImage)) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"has-right-content\"]: this.rightContent,\n [\"ic-hero-small\"]: size === \"small\",\n [\"secondary-heading\"]: !!secondaryHeading,\n [`ic-hero-content-aligned-${contentAligned}`]:\n contentAligned !== undefined,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h2\" : \"h1\"}\n class={{\n [\"heading-bottom-spacing\"]: size !== \"small\",\n }}\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(isPropDefined(secondaryHeading) \|\| this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n <h3>{secondaryHeading}</h3>\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ic-input-component-container_3.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { s as successIcon, f as IC_CUSTOM_ALLOWED_COMPONENTS } from './constants
 import { C as Check } from './check-icon-4a9f8371.js';
 import { c as createPopper } from './popper-0fbeff6d.js';
-const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;min-height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--input-bg-color, var(--ic-color-background-primary));box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.ic-input-component-container-full-width{width:100%}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed\n    var(--border-color-disabled, var(--ic-color-border-neutral-disabled))}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly{height:auto;background:transparent}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-readonly:hover{border:none;padding:0}ic-input-component-container.ic-input-component-container-error{border:var(--ic-space-xxxs) solid\n    var(--border-color-error, var(--ic-color-border-error));padding:0}ic-input-component-container.ic-input-component-container-error:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-error-hover, var(--ic-color-border-error-hover))}ic-input-component-container.ic-input-component-container-error:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-error-pressed, var(--ic-color-border-error-pressed))}ic-input-component-container.ic-input-component-container-warning{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning, var(--ic-color-border-warning));padding:0}ic-input-component-container.ic-input-component-container-warning:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning-hover, var(--ic-color-border-warning-hover))}ic-input-component-container.ic-input-component-container-warning:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed))}ic-input-component-container.ic-input-component-container-success{border:var(--ic-space-xxxs) solid\n    var(--border-color-success, var(--ic-color-border-success));padding:0}ic-input-component-container.ic-input-component-container-success:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-success-hover, var(--ic-color-border-success-hover))}ic-input-component-container.ic-input-component-container-success:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-success-pressed, var(--ic-color-border-success-pressed))}ic-input-component-container.ic-input-component-container-small{height:var(--ic-space-xl);min-height:var(--ic-space-xl)}ic-input-component-container.ic-input-component-container-large{height:var(--ic-space-xxl);min-height:var(--ic-space-xxl)}ic-input-component-container.ic-input-component-container-multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.ic-input-component-container-multiline .icon-container,ic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.ic-input-component-container-readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.ic-input-component-container-disabled ::-moz-placeholder{display:none}ic-input-component-container.ic-input-component-container-disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container .inline-success>svg{fill:var(--ic-input-component-container-success-icon-inline-color);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border:var(--ic-input-component-container-hover-border);border-color:var(--border-color-hover, var(--ic-color-border-neutral-hover));color:var(--ic-action-monochrome-hover-dark)}ic-input-component-container:focus{border:var(--ic-border-pressed);border-color:var(\n    --border-color-pressed,\n    var(--ic-color-border-neutral-pressed)\n  )}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.ic-input-component-container-dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-border-width) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed GrayText}}";
+const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;min-height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--input-bg-color, var(--ic-color-background-primary));box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.ic-input-component-container-full-width{width:100%;max-width:none}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed\n    var(--border-color-disabled, var(--ic-color-border-neutral-disabled))}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly{height:auto;background:transparent}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-readonly:hover{border:none;padding:0}ic-input-component-container.ic-input-component-container-error{border:var(--ic-space-xxxs) solid\n    var(--border-color-error, var(--ic-color-border-error));padding:0}ic-input-component-container.ic-input-component-container-error:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-error-hover, var(--ic-color-border-error-hover))}ic-input-component-container.ic-input-component-container-error:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-error-pressed, var(--ic-color-border-error-pressed))}ic-input-component-container.ic-input-component-container-warning{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning, var(--ic-color-border-warning));padding:0}ic-input-component-container.ic-input-component-container-warning:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning-hover, var(--ic-color-border-warning-hover))}ic-input-component-container.ic-input-component-container-warning:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed))}ic-input-component-container.ic-input-component-container-success{border:var(--ic-space-xxxs) solid\n    var(--border-color-success, var(--ic-color-border-success));padding:0}ic-input-component-container.ic-input-component-container-success:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-success-hover, var(--ic-color-border-success-hover))}ic-input-component-container.ic-input-component-container-success:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-success-pressed, var(--ic-color-border-success-pressed))}ic-input-component-container.ic-input-component-container-small{height:var(--ic-space-xl);min-height:var(--ic-space-xl)}ic-input-component-container.ic-input-component-container-large{height:var(--ic-space-xxl);min-height:var(--ic-space-xxl)}ic-input-component-container.ic-input-component-container-multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.ic-input-component-container-multiline .icon-container,ic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.ic-input-component-container-readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.ic-input-component-container-disabled ::-moz-placeholder{display:none}ic-input-component-container.ic-input-component-container-disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container .inline-success>svg{fill:var(--ic-input-component-container-success-icon-inline-color);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border:var(--ic-input-component-container-hover-border);border-color:var(--border-color-hover, var(--ic-color-border-neutral-hover));color:var(--ic-action-monochrome-hover-dark)}ic-input-component-container:focus{border:var(--ic-border-pressed);border-color:var(\n    --border-color-pressed,\n    var(--ic-color-border-neutral-pressed)\n  )}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.ic-input-component-container-dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-border-width) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed GrayText}}@media screen AND (max-width: 22rem){ic-input-component-container{max-width:var(--input-width, 20rem);width:100%}}";
 const IcInputComponentContainerStyle0 = icInputComponentContainerCss;
 const InputComponentContainer = class {
@@ -1468,7 +1468,7 @@ const sanitizeHTMLIconString = (html) => {
     return purifier.sanitize(html, getCustomElementHandling(false));
 };
-const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{max-height:0;width:var(--menu-width, var(--input-width, 20rem));color:var(--menu-item-text-color, var(--ic-menu-list-option-text-color));--ic-typography-color:var(\n    --menu-item-text-color,\n    var(--ic-menu-list-option-text-color)\n  );background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:var(--ic-border-radius)}.ic-menu-open.sc-ic-menu-h:not(.ic-menu-no-focus):focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}.ic-select-select-all-focused.sc-ic-menu-h{box-shadow:var(--ic-elevation-overlay) !important}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-h{inset:auto !important}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border-radius:1px;background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );visibility:hidden;max-height:0;overflow-y:hidden}.menu.sc-ic-menu:has(+.option-bar).sc-ic-menu{border-radius:0 0 1px 1px}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.ic-menu-open.sc-ic-menu-h{max-height:none;display:flex;flex-direction:column-reverse;border:var(--ic-border-width) solid\n    var(--menu-border-color, var(--ic-menu-border-color));transition:box-shadow var(--ic-easing-transition-fast)}.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs))}.ic-menu-open.sc-ic-menu-h .option-bar.sc-ic-menu{visibility:visible}.ic-menu-open.sc-ic-menu-h .select-all-button.sc-ic-menu{display:block}.ic-menu-full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:var(--ic-space-xs) calc(var(--ic-space-xs) - var(--ic-space-1px));cursor:pointer;display:flex;align-items:center;gap:var(--ic-space-xs)}.loading-option.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.ic-menu-small.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px))}.ic-menu-large.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))}.option.sc-ic-menu:last-child{border-radius:0 0 1px 1px}.sc-ic-menu:not(.menu:has(+.option-bar)).sc-ic-menu .option.sc-ic-menu:first-child{border-radius:1px 1px 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-menu-list-option-hover-background-color)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-menu-list-option-pressed-background-color)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{--ic-typography-color:var(\n    --menu-item-desc-text-color,\n    var(--ic-menu-list-option-description-text-color)\n  )}.option.sc-ic-menu .option-label.sc-ic-menu{display:flex;flex-direction:row;align-items:top}.option.sc-ic-menu .option-label.sc-ic-menu ic-typography.sc-ic-menu{max-width:100%;word-wrap:break-word}.option.sc-ic-menu .option-element.sc-ic-menu{margin-top:var(--ic-space-xxs)}.option.sc-ic-menu .option-icon.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);margin-top:var(--ic-space-xxs);margin-right:var(--ic-space-xxxs)}.option-text-container.sc-ic-menu{pointer-events:none;width:100%}.option-text-container.show-check-icon.sc-ic-menu{flex-grow:1}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs));color:var(--ic-menu-loading-list-option-text-color);--ic-typography-color:var(--ic-menu-loading-list-option-text-color)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-atoms-status-icon-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);min-width:var(--ic-space-lg);width:var(--ic-space-lg);pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xs);--ic-typography-color:var(--ic-menu-option-group-label-text-color)}.ic-menu-small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xxs)}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-menu-last-recommended-option-border)}.disabled-option.sc-ic-menu{color:var(--ic-atoms-list-option-text-disabled-light);--ic-typography-color:var(--ic-atoms-list-option-text-disabled-light);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-color-focus-inner) !important;color:var(--ic-atoms-list-option-text-focused-light) !important;--ic-typography-color:var(\n    --ic-atoms-list-option-text-focused-light\n  ) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}.option-bar.sc-ic-menu{padding:var(--ic-space-xxs) var(--ic-space-xs);display:flex;align-items:center;justify-content:space-between;background-color:var(--ic-menu-option-bar-background-color);visibility:hidden;border-bottom:var(--ic-border-width) solid\n    var(--ic-menu-option-bar-divider-color);border-radius:1px 1px 0 0}.option-bar.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.ic-menu-large.sc-ic-menu-h .option-bar.sc-ic-menu{padding:var(--ic-space-xs)}.select-all-button.sc-ic-menu{display:none}.select-all-button.sc-ic-menu:focus{z-index:calc(var(--ic-z-index-menu) + 1)}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}.disabled-option.sc-ic-menu{color:GrayText;--ic-typography-color:GrayText}}";
+const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{max-height:0;width:var(--menu-width, var(--input-width, 20rem));color:var(--menu-item-text-color, var(--ic-menu-list-option-text-color));--ic-typography-color:var(\n    --menu-item-text-color,\n    var(--ic-menu-list-option-text-color)\n  );background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:var(--ic-border-radius)}.ic-menu-open.sc-ic-menu-h:not(.ic-menu-no-focus):focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}.ic-select-select-all-focused.sc-ic-menu-h{box-shadow:var(--ic-elevation-overlay) !important}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-h{inset:auto !important}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border-radius:1px;background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );visibility:hidden;max-height:0;overflow-y:hidden}.menu.sc-ic-menu:has(+.option-bar).sc-ic-menu{border-radius:0 0 1px 1px}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.ic-menu-open.sc-ic-menu-h{max-height:none;display:flex;flex-direction:column-reverse;border:var(--ic-border-width) solid\n    var(--menu-border-color, var(--ic-menu-border-color));transition:box-shadow var(--ic-easing-transition-fast)}.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs))}.ic-menu-open.sc-ic-menu-h .option-bar.sc-ic-menu{visibility:visible}.ic-menu-open.sc-ic-menu-h .select-all-button.sc-ic-menu{display:block}.ic-menu-full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:var(--ic-space-xs) calc(var(--ic-space-xs) - var(--ic-space-1px));cursor:pointer;display:flex;align-items:center;gap:var(--ic-space-xs)}.loading-option.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.ic-menu-small.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px))}.ic-menu-large.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))}.option.sc-ic-menu:last-child{border-radius:0 0 1px 1px}.sc-ic-menu:not(.menu:has(+.option-bar)).sc-ic-menu .option.sc-ic-menu:first-child{border-radius:1px 1px 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-menu-list-option-hover-background-color)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-menu-list-option-pressed-background-color)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{--ic-typography-color:var(\n    --menu-item-desc-text-color,\n    var(--ic-menu-list-option-description-text-color)\n  )}.option.sc-ic-menu .option-label.sc-ic-menu{display:flex;flex-direction:row;align-items:top}.option.sc-ic-menu .option-label.sc-ic-menu ic-typography.sc-ic-menu{max-width:100%;word-wrap:break-word}.option.sc-ic-menu .option-element.sc-ic-menu{margin-top:var(--ic-space-xxs)}.option.sc-ic-menu .option-icon.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);margin-top:var(--ic-space-xxs);margin-right:var(--ic-space-xxxs)}.option-text-container.sc-ic-menu{pointer-events:none;width:100%}.option-text-container.show-check-icon.sc-ic-menu{flex-grow:1}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs));color:var(--ic-menu-loading-list-option-text-color);--ic-typography-color:var(--ic-menu-loading-list-option-text-color)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-atoms-status-icon-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);min-width:var(--ic-space-lg);width:var(--ic-space-lg);pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xs);--ic-typography-color:var(--ic-menu-option-group-label-text-color)}.ic-menu-small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xxs)}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-menu-last-recommended-option-border)}.disabled-option.sc-ic-menu{color:var(--ic-atoms-list-option-text-disabled-light);--ic-typography-color:var(--ic-atoms-list-option-text-disabled-light);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-color-focus-inner) !important;color:var(--ic-atoms-list-option-text-focused-light) !important;--ic-typography-color:var(\n    --ic-atoms-list-option-text-focused-light\n  ) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}.option-bar.sc-ic-menu{padding:var(--ic-space-xxs) var(--ic-space-xs);display:flex;align-items:center;justify-content:space-between;background-color:var(--ic-menu-option-bar-background-color);visibility:hidden;border-bottom:var(--ic-border-width) solid\n    var(--ic-menu-option-bar-divider-color);border-radius:1px 1px 0 0}.option-bar.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.ic-menu-large.sc-ic-menu-h .option-bar.sc-ic-menu{padding:var(--ic-space-xs)}.select-all-button.sc-ic-menu{display:none}.select-all-button.sc-ic-menu:focus{z-index:calc(var(--ic-z-index-menu) + 1)}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}.disabled-option.sc-ic-menu{color:GrayText;--ic-typography-color:GrayText}}@media screen AND (max-width: 22rem){.sc-ic-menu-h{max-width:var(--menu-width, var(--input-width, 20rem));width:100%}}";
 const IcMenuStyle0 = icMenuCss;
 const Menu = class {