@ukic/web-components 3.11.0 → 3.13.0

package/dist/cjs/ic-alert.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-alert.entry.cjs.js","mappings":"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","names":["renderDynamicChildSlots","pxToRem","isSlotUsed","h","VARIANT_ICONS","Host","closeIcon"],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\n:host ::slotted(ic-typography) {\n  --ic-typography-color: var(--ic-alert-description);\n}\n\n.container {\n  min-height: var(--ic-alert-min-height);\n  border-radius: var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n    var(--ic-space-xxs);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.container-neutral {\n  background-color: var(--ic-alert-background-neutral);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-neutral);\n}\n\n.container-info {\n  background-color: var(--ic-alert-background-info);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-info);\n}\n\n.container-warning {\n  background-color: var(--ic-alert-background-warning);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-warning);\n}\n\n.container-error {\n  background-color: var(--ic-alert-background-error);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-error);\n}\n\n.container-success {\n  background-color: var(--ic-alert-background-success);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-success);\n}\n\n.container-ai {\n  background-color: var(--ic-alert-background-ai);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-ai);\n}\n\n.alert-icon-container {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.divider {\n  height: 100%;\n  width: var(--ic-space-xs);\n  border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n  position: absolute;\n}\n\n.divider-neutral {\n  background-color: var(--ic-alert-status-type-neutral);\n}\n\n.divider-info {\n  background-color: var(--ic-alert-status-type-info);\n}\n\n.divider-warning {\n  background-color: var(--ic-alert-status-type-warning);\n}\n\n.divider-error {\n  background-color: var(--ic-alert-status-type-error);\n}\n\n.divider-success {\n  background-color: var(--ic-alert-status-type-success);\n}\n\n.divider-ai {\n  background-color: var(--ic-alert-status-type-ai);\n}\n\n.alert-icon {\n  height: var(--ic-space-lg);\n  width: 1.375rem;\n  margin-left: 1.125rem;\n}\n\n.icon-placeholder {\n  margin-left: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  display: inline-block;\n}\n\n/* required for Gatsby as prop does not seem to work when set to false */\n:host([showdefaulticon=\"false\"]) .icon-neutral {\n  visibility: hidden;\n  width: 0;\n  margin-left: 0.625rem;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  display: inline-block;\n  fill: var(--ic-alert-icon-neutral);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-success);\n}\n\n:host([variant=\"ai\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-ai);\n}\n\n.alert-content {\n  display: flex;\n  align-items: center;\n  margin-left: 0.625rem;\n  width: 100%;\n}\n\n.alert-message {\n  display: flex;\n  align-items: center;\n  padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n  flex: 1;\n\n  --ic-typography-color: var(--ic-alert-description);\n}\n\n.alert-message-title-above {\n  display: inline;\n}\n\n.alert-title {\n  margin-right: var(--ic-space-xs);\n\n  --ic-typography-color: var(--ic-alert-title);\n}\n\n.alert-title-above {\n  white-space: normal;\n}\n\n.alert-action-container {\n  margin-right: var(--ic-space-xs);\n  display: flex;\n  align-items: center;\n}\n\n.dismiss-icon {\n  margin-right: var(--ic-space-xxxs);\n  margin-left: -0.375rem;\n  padding: 0.375rem;\n  border: none;\n  border-radius: 50%;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dismiss-icon > svg {\n  color: var(--ic-alert-icon-dismissible);\n}\n\n.dismiss-icon:hover {\n  cursor: pointer;\n}\n\n@media (max-width: 628px) {\n  .alert-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .alert-message {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .alert-title {\n    white-space: normal;\n  }\n\n  .alert-action-container {\n    margin-bottom: var(--ic-space-xs);\n  }\n}\n\n@media (forced-colors: active) {\n  .container {\n    border: var(--ic-border-hc);\n  }\n\n  .dismiss-icon > svg {\n    color: var(--ic-architectural-white);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  State,\n  Listen,\n  Prop,\n  h,\n  Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n  isSlotUsed,\n  pxToRem,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n  IcStatusVariants,\n  IcThemeMode,\n  IcThemeSettings,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/**\n * @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n */\n@Component({\n  tag: \"ic-alert\",\n  styleUrl: \"ic-alert.css\",\n  shadow: true,\n})\nexport class Alert {\n  private hostMutationObserver: MutationObserver | null = null;\n  private systemThemeObserver: MediaQueryList | null = null;\n  private darkMode: boolean = false;\n  private messageEl?: HTMLDivElement;\n  private titleEl?: HTMLIcTypographyElement;\n\n  @Element() el: HTMLIcAlertElement;\n\n  @State() alertTitleWrap: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n   */\n  @Prop() announced: boolean = true;\n\n  /**\n   * If `true`, the alert will have a close icon at the end to dismiss it.\n   */\n  @Prop() dismissible: boolean = false;\n\n  /**\n   * The optional title to display at the start of the alert.\n   */\n  @Prop() heading: string = \"\";\n\n  /**\n   * The main body message of the alert.\n   */\n  @Prop() message?: string;\n\n  /**\n   * If `true`, the default icon for the neutral variant will appear on the left of the alert.\n   */\n  @Prop() showDefaultIcon: boolean = true;\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  @Watch(\"theme\")\n  themeChangeHandler(): void {\n    if (this.theme !== \"inherit\") this.darkMode = this.theme === \"dark\";\n  }\n\n  /**\n   * If `true`, the title and message will appear above and below instead of inline.\n   */\n  @Prop() titleAbove: boolean = false;\n\n  /**\n   * The variant of the alert which will be rendered.\n   */\n  @Prop() variant: IcStatusVariants = \"neutral\";\n\n  /**\n   * Is emitted when the user dismisses the alert.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n    this.systemThemeObserver?.removeEventListener(\n      \"change\",\n      this.darkModeChangeHandler\n    );\n  }\n\n  componentWillLoad(): void {\n    if (!this.el.closest(\"ic-theme\")) {\n      this.systemThemeObserver = window.matchMedia(\n        \"(prefers-color-scheme: dark)\"\n      );\n      this.systemThemeObserver.addEventListener(\n        \"change\",\n        this.darkModeChangeHandler\n      );\n      this.darkMode = this.systemThemeObserver.matches;\n    }\n\n    this.themeChangeHandler();\n  }\n\n  componentDidLoad(): void {\n    if (Number(this.titleEl?.clientHeight) > 24) this.alertTitleWrap = true;\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, \"action\", this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n\n    this.calculateMinHeight();\n  }\n\n  componentDidUpdate(): void {\n    this.calculateMinHeight();\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  @Listen(\"icThemeChange\", { target: \"document\", capture: true })\n  darkModeChangeHandler(\n    ev: CustomEvent<IcThemeSettings> | MediaQueryListEvent\n  ): void {\n    this.darkMode = \"detail\" in ev ? ev.detail === \"dark\" : ev.matches;\n\n    this.calculateMinHeight();\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private calculateMinHeight(): void {\n    const contentHeight = Number(this.messageEl?.clientHeight);\n\n    const minHeight = pxToRem(\n      `${(contentHeight > 40 ? contentHeight : 52) + (this.darkMode ? 0 : 4)}`\n    );\n\n    if (this.el.style.getPropertyValue(\"--ic-alert-min-height\") !== minHeight)\n      this.el.style.setProperty(\"--ic-alert-min-height\", minHeight);\n  }\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      titleAbove,\n      dismissible,\n      announced,\n      visible,\n      showDefaultIcon,\n      theme,\n      alertTitleWrap,\n      dismissAction,\n    } = this;\n\n    const Icon = () => {\n      const iconClass = {\n        \"alert-icon\": true,\n        \"svg-container\": true,\n        [`icon-${variant}`]: true,\n      };\n\n      if (variant === \"neutral\") {\n        if (isSlotUsed(this.el, \"neutral-icon\")) {\n          return (\n            <div class={iconClass}>\n              <slot name=\"neutral-icon\"></slot>\n            </div>\n          );\n        } else if (!showDefaultIcon) {\n          return <div class=\"icon-placeholder\"></div>;\n        }\n      }\n\n      return (\n        <span class={iconClass} innerHTML={VARIANT_ICONS[variant].icon}></span>\n      );\n    };\n\n    return (\n      visible && (\n        <Host\n          role={announced ? \"alert\" : null}\n          class={{\n            [`ic-theme-${theme}`]: theme !== \"inherit\",\n          }}\n        >\n          <div class={{ container: true, [`container-${variant}`]: true }}>\n            <div class=\"alert-icon-container\">\n              <div\n                class={{ divider: true, [`divider-${variant}`]: true }}\n              ></div>\n              <Icon />\n            </div>\n            <div class=\"alert-content\">\n              <div\n                class={{\n                  \"alert-message\": true,\n                  \"alert-message-title-above\": titleAbove || alertTitleWrap,\n                }}\n                ref={(el) => (this.messageEl = el)}\n              >\n                {heading && (\n                  <ic-typography\n                    class={{\n                      \"alert-title\": true,\n                      \"alert-title-above\": titleAbove || alertTitleWrap,\n                    }}\n                    variant=\"subtitle-large\"\n                    ref={(el) => (this.titleEl = el)}\n                  >\n                    <p>{heading}</p>\n                  </ic-typography>\n                )}\n                <slot name=\"message\">\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, \"action\") && (\n                <div class=\"alert-action-container\">\n                  <slot name=\"action\" />\n                </div>\n              )}\n            </div>\n            <div class=\"dismiss-icon-container\">\n              {dismissible && (\n                <ic-button\n                  class={{ \"svg-container\": true, \"dismiss-icon\": true }}\n                  innerHTML={closeIcon}\n                  onClick={dismissAction}\n                  variant=\"icon-tertiary\"\n                  theme=\"dark\"\n                  title=\"Dismiss\"\n                ></ic-button>\n              )}\n            </div>\n          </div>\n        </Host>\n      )\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-alert.entry.cjs.js","mappings":"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","names":["renderDynamicChildSlots","pxToRem","isSlotUsed","h","VARIANT_ICONS","Host","closeIcon"],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\n:host ::slotted(ic-typography) {\n  --ic-typography-color: var(--ic-alert-description);\n}\n\n.container {\n  min-height: var(--ic-alert-min-height);\n  border-radius: var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n    var(--ic-space-xxs);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.container-neutral {\n  background-color: var(--ic-alert-background-neutral);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-neutral);\n}\n\n.container-info {\n  background-color: var(--ic-alert-background-info);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-info);\n}\n\n.container-warning {\n  background-color: var(--ic-alert-background-warning);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-warning);\n}\n\n.container-error {\n  background-color: var(--ic-alert-background-error);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-error);\n}\n\n.container-success {\n  background-color: var(--ic-alert-background-success);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-success);\n}\n\n.container-ai {\n  background-color: var(--ic-alert-background-ai);\n  border: var(--ic-space-xxxs) solid var(--ic-alert-border-ai);\n}\n\n.divider {\n  height: 100%;\n  width: var(--ic-space-xs);\n  border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n  position: absolute;\n}\n\n.divider-neutral {\n  background-color: var(--ic-alert-status-type-neutral);\n}\n\n.divider-info {\n  background-color: var(--ic-alert-status-type-info);\n}\n\n.divider-warning {\n  background-color: var(--ic-alert-status-type-warning);\n}\n\n.divider-error {\n  background-color: var(--ic-alert-status-type-error);\n}\n\n.divider-success {\n  background-color: var(--ic-alert-status-type-success);\n}\n\n.divider-ai {\n  background-color: var(--ic-alert-status-type-ai);\n}\n\n.alert-icon {\n  align-self: flex-start;\n  margin-top: var(--ic-space-xs);\n  margin-right: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  display: inline-block;\n}\n\n/* required for Gatsby as prop does not seem to work when set to false */\n:host([showdefaulticon=\"false\"]) .icon-neutral {\n  visibility: hidden;\n  width: 0;\n  margin-left: 0.625rem;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  display: inline-block;\n  fill: var(--ic-alert-icon-neutral);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-success);\n}\n\n:host([variant=\"ai\"]) .alert-icon svg {\n  fill: var(--ic-alert-icon-ai);\n}\n\n.alert-content {\n  display: flex;\n  align-items: center;\n  margin-left: 1.125rem;\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.alert-message {\n  display: flex;\n  align-items: center;\n  padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n  flex: 1;\n\n  --ic-typography-color: var(--ic-alert-description);\n}\n\n.alert-message-title-above {\n  display: inline;\n}\n\n.alert-title {\n  margin-right: var(--ic-space-xs);\n  margin-top: 0;\n  margin-bottom: auto;\n\n  --ic-typography-color: var(--ic-alert-title);\n}\n\n.alert-title-above {\n  white-space: normal;\n}\n\n.alert-action-container {\n  margin-right: var(--ic-space-xs);\n  display: flex;\n  align-items: center;\n}\n\n.dismiss-icon {\n  margin-right: var(--ic-space-xxxs);\n  margin-left: -0.375rem;\n  padding: 0.375rem;\n  border: none;\n  border-radius: 50%;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dismiss-icon > svg {\n  color: var(--ic-alert-icon-dismissible);\n}\n\n.dismiss-icon:hover {\n  cursor: pointer;\n}\n\n@media (max-width: 628px) {\n  .alert-message {\n    display: inline;\n  }\n\n  .alert-title {\n    white-space: normal;\n  }\n\n  .alert-action-container {\n    margin-bottom: var(--ic-space-xs);\n    flex-basis: 100%;\n  }\n\n  .alert-icon ~ .alert-action-container {\n    margin-left: 2rem;\n  }\n}\n\n@media (forced-colors: active) {\n  .container {\n    border: var(--ic-border-hc);\n  }\n\n  .dismiss-icon > svg {\n    color: var(--ic-architectural-white);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  State,\n  Listen,\n  Prop,\n  h,\n  Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n  isSlotUsed,\n  pxToRem,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n  IcStatusVariants,\n  IcThemeMode,\n  IcThemeSettings,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/**\n * @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n */\n@Component({\n  tag: \"ic-alert\",\n  styleUrl: \"ic-alert.css\",\n  shadow: true,\n})\nexport class Alert {\n  private hostMutationObserver: MutationObserver | null = null;\n  private systemThemeObserver: MediaQueryList | null = null;\n  private darkMode: boolean = false;\n  private messageEl?: HTMLDivElement;\n  private titleEl?: HTMLIcTypographyElement;\n\n  @Element() el: HTMLIcAlertElement;\n\n  @State() alertTitleWrap: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n   */\n  @Prop() announced: boolean = true;\n\n  /**\n   * If `true`, the alert will have a close icon at the end to dismiss it.\n   */\n  @Prop() dismissible: boolean = false;\n\n  /**\n   * The optional title to display at the start of the alert.\n   */\n  @Prop() heading: string = \"\";\n\n  /**\n   * The main body message of the alert.\n   */\n  @Prop() message?: string;\n\n  /**\n   * If `true`, the default icon for the neutral variant will appear on the left of the alert.\n   */\n  @Prop() showDefaultIcon: boolean = true;\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  @Watch(\"theme\")\n  themeChangeHandler(): void {\n    if (this.theme !== \"inherit\") this.darkMode = this.theme === \"dark\";\n  }\n\n  /**\n   * If `true`, the title and message will appear above and below instead of inline.\n   */\n  @Prop() titleAbove: boolean = false;\n\n  /**\n   * The variant of the alert which will be rendered.\n   */\n  @Prop() variant: IcStatusVariants = \"neutral\";\n\n  /**\n   * Is emitted when the user dismisses the alert.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n    this.systemThemeObserver?.removeEventListener(\n      \"change\",\n      this.darkModeChangeHandler\n    );\n  }\n\n  componentWillLoad(): void {\n    if (!this.el.closest(\"ic-theme\")) {\n      this.systemThemeObserver = window.matchMedia(\n        \"(prefers-color-scheme: dark)\"\n      );\n      this.systemThemeObserver.addEventListener(\n        \"change\",\n        this.darkModeChangeHandler\n      );\n      this.darkMode = this.systemThemeObserver.matches;\n    }\n\n    this.themeChangeHandler();\n  }\n\n  componentDidLoad(): void {\n    if (Number(this.titleEl?.clientHeight) > 24) this.alertTitleWrap = true;\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, \"action\", this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n\n    this.calculateMinHeight();\n  }\n\n  componentDidUpdate(): void {\n    this.calculateMinHeight();\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  @Listen(\"icThemeChange\", { target: \"document\", capture: true })\n  darkModeChangeHandler(\n    ev: CustomEvent<IcThemeSettings> | MediaQueryListEvent\n  ): void {\n    this.darkMode = \"detail\" in ev ? ev.detail === \"dark\" : ev.matches;\n\n    this.calculateMinHeight();\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private calculateMinHeight(): void {\n    const contentHeight = Number(this.messageEl?.clientHeight);\n\n    const minHeight = pxToRem(\n      `${(contentHeight > 40 ? contentHeight : 52) + (this.darkMode ? 0 : 4)}`\n    );\n\n    if (this.el.style.getPropertyValue(\"--ic-alert-min-height\") !== minHeight)\n      this.el.style.setProperty(\"--ic-alert-min-height\", minHeight);\n  }\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      titleAbove,\n      dismissible,\n      announced,\n      visible,\n      showDefaultIcon,\n      theme,\n      alertTitleWrap,\n      dismissAction,\n    } = this;\n\n    const Icon = () => {\n      const iconClass = {\n        \"alert-icon\": true,\n        \"svg-container\": true,\n        [`icon-${variant}`]: true,\n      };\n\n      if (variant === \"neutral\") {\n        if (isSlotUsed(this.el, \"neutral-icon\")) {\n          return (\n            <div class={iconClass}>\n              <slot name=\"neutral-icon\"></slot>\n            </div>\n          );\n        } else if (!showDefaultIcon) {\n          return <div></div>;\n        }\n      }\n\n      return (\n        <span class={iconClass} innerHTML={VARIANT_ICONS[variant].icon}></span>\n      );\n    };\n\n    return (\n      visible && (\n        <Host\n          role={announced ? \"alert\" : null}\n          class={{\n            [`ic-theme-${theme}`]: theme !== \"inherit\",\n          }}\n        >\n          <div class={{ container: true, [`container-${variant}`]: true }}>\n            <div class={{ divider: true, [`divider-${variant}`]: true }}></div>\n            <div class=\"alert-content\">\n              <Icon />\n              <div\n                class={{\n                  \"alert-message\": true,\n                  \"alert-message-title-above\": titleAbove || alertTitleWrap,\n                }}\n                ref={(el) => (this.messageEl = el)}\n              >\n                {heading && (\n                  <ic-typography\n                    class={{\n                      \"alert-title\": true,\n                      \"alert-title-above\": titleAbove || alertTitleWrap,\n                    }}\n                    variant=\"subtitle-large\"\n                    ref={(el) => (this.titleEl = el)}\n                  >\n                    <p>{heading}</p>\n                  </ic-typography>\n                )}\n                <slot name=\"message\">\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, \"action\") && (\n                <div class=\"alert-action-container\">\n                  <slot name=\"action\" />\n                </div>\n              )}\n            </div>\n            <div class=\"dismiss-icon-container\">\n              {dismissible && (\n                <ic-button\n                  class={{ \"svg-container\": true, \"dismiss-icon\": true }}\n                  innerHTML={closeIcon}\n                  onClick={dismissAction}\n                  variant=\"icon-tertiary\"\n                  theme=\"dark\"\n                  title=\"Dismiss\"\n                ></ic-button>\n              )}\n            </div>\n          </div>\n        </Host>\n      )\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-back-to-top.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-ffe1c2d9.js');
-require('./constants-8354f6e6.js');
+const helpers = require('./helpers-478d1107.js');
+require('./constants-3a9ba64a.js');
 
 const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
     <path d="M0 8L1.41 9.41L7 3.83V16H9V3.83L14.58 9.42L16 8L8 0L0 8Z"/>

package/dist/cjs/ic-badge.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-ffe1c2d9.js');
-require('./constants-8354f6e6.js');
+const helpers = require('./helpers-478d1107.js');
+require('./constants-3a9ba64a.js');
 
 const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.ic-badge-show){animation:expand var(--ic-transition-duration-slow)}:host(.ic-badge-hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host ic-typography{--ic-typography-color:var(--ic-badge-text)}:host(.ic-badge-neutral){background-color:var(--ic-badge-dark) !important}:host(.ic-badge-light) ic-typography{--ic-typography-color:var(--ic-badge-text-monochrome)}:host(.ic-badge-light) ::slotted(*){fill:var(--ic-badge-icon-monochrome)}:host(.ic-badge-info){background-color:var(--ic-badge-info) !important}:host(.ic-badge-light){background-color:var(--ic-badge-light) !important}:host(.ic-badge-warning){background-color:var(--ic-badge-warning) !important}:host(.ic-badge-warning) ic-typography{--ic-typography-color:var(--ic-badge-warning-text)}:host(.ic-badge-warning) ::slotted(*){fill:var(--ic-badge-warning-icon)}:host(.ic-badge-error){background-color:var(--ic-badge-error) !important}:host(.ic-badge-success){background-color:var(--ic-badge-success) !important}:host(.ic-badge-ai){background-color:var(--ic-badge-ai) !important}:host(.ic-badge-small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.ic-badge-large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-medium){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.ic-badge-dot.ic-badge-small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.ic-badge-dot.ic-badge-large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host ::slotted(*){fill:var(--ic-badge-icon)}:host(.ic-badge-foreground-dark) ::slotted(*){fill:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ::slotted(*){fill:white}:host(.ic-badge-foreground-dark) ic-typography{--ic-typography-color:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ic-typography{--ic-typography-color:var(--ic-color-text-primary-dark)}:host(.ic-badge-text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-text.ic-badge-small) ic-typography{padding:0 0.2132rem}:host(.ic-badge-text.ic-badge-large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.ic-badge-icon.ic-badge-small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.ic-badge-icon.ic-badge-large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.ic-badge-far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.ic-badge-far.ic-badge-small),:host(.ic-badge-dot.ic-badge-far.ic-badge-large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-far),:host(.ic-badge-dot.ic-badge-far.ic-badge-small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.ic-badge-near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.ic-badge-dot.ic-badge-near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.ic-badge-inline){position:static}:host(.ic-badge-hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
 const IcBadgeStyle0 = icBadgeCss;

package/dist/cjs/ic-breadcrumb-group.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-ffe1c2d9.js');
-require('./constants-8354f6e6.js');
+const helpers = require('./helpers-478d1107.js');
+require('./constants-3a9ba64a.js');
 
 const icBreadcrumbGroupCss = ":host{display:block}:host ol{display:flex;list-style-type:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb){display:none}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";
 const IcBreadcrumbGroupStyle0 = icBreadcrumbGroupCss;

package/dist/cjs/ic-breadcrumb.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
 const chevronIcon = require('./chevron-icon-3bf07531.js');
-const helpers = require('./helpers-ffe1c2d9.js');
-require('./constants-8354f6e6.js');
+const helpers = require('./helpers-478d1107.js');
+require('./constants-3a9ba64a.js');
 
 const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>

package/dist/cjs/ic-button_3.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-ffe1c2d9.js');
-const constants = require('./constants-8354f6e6.js');
+const helpers = require('./helpers-478d1107.js');
+const constants = require('./constants-3a9ba64a.js');
 const popper = require('./popper-31badbf8.js');
 
 const arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">