{"version":3,"names":["scAlertCss","ScAlertStyle0","ScAlert","Infinity","show","this","open","hide","restartAutoHide","clearTimeout","autoHideTimeout","duration","setTimeout","handleMouseMove","handleCloseClick","handleOpenChange","scShow","emit","scHide","scrollOnOpen","el","scrollIntoView","behavior","componentDidLoad","iconName","type","icon","h","name","render","Host","key","style","scrollMargin","class","alert","isRtl","part","role","hidden","onMouseMove","title","closable","onClick","xmlns","viewBox","fill","d","scBlockUiCss","ScBlockUiStyle0","ScBlockUi","overlay","transparent","zIndex","toString","spinner","scButtonCss","ScButtonStyle0","ScButton","componentWillLoad","handleSlotChange","click","button","focus","options","blur","hasLabel","children","hasPrefix","querySelector","hasSuffix","handleBlur","hasFocus","scBlur","handleFocus","scFocus","handleClick","event","disabled","loading","busy","preventDefault","stopPropagation","submit","submitForm","form","_b","_a","closest","shadowRoot","document","createElement","position","width","height","clip","clipPath","overflow","whiteSpace","append","remove","Tag","href","interior","Fragment","onSlotchange","caret","stroke","points","exportparts","size","circle","pill","outline","target","download","autoFocus","autofocus","rel","undefined","tabindex","value","onBlur","onFocus","e","scDashboardModuleCss","ScDashboardModuleStyle0","wp","i18n","__","error","heading","locks","Set","lockBodyScrolling","lockingEl","add","body","classList","unlockBodyScrolling","delete","scDialogCss","ScDialogStyle0","setDefaultAnimation","scFlexCss","ScFlexStyle0","ScFlex","flex","justifyContent","alignItems","flexDirection","columnGap","flexWrap","stack","iconFiles","Map","requestIcon","url","has","get","request","fetch","then","async","response","ok","div","innerHTML","text","svg","firstElementChild","status","tagName","toLowerCase","outerHTML","set","scIconCss","ScIconStyle0","LABEL_MAPPINGS","parser","DOMParser","scSkeletonCss","ScSkeletonStyle0","ScSkeleton","skeleton","effect","scSpinnerCss","ScSpinnerStyle0","ScSpinner","renderLoading","slot","upcomingPeriod","checkout","_c","end_at_date","reactivateSubscription","color","scRequestClose","scTextCss","ScTextStyle0","ScText","CustomTag","tag","truncate"],"sources":["src/components/ui/alert/sc-alert.scss?tag=sc-alert&encapsulation=shadow","src/components/ui/alert/sc-alert.tsx","src/components/ui/block-ui/sc-block-ui.scss?tag=sc-block-ui&encapsulation=shadow","src/components/ui/block-ui/sc-block-ui.tsx","src/components/ui/button/sc-button.scss?tag=sc-button&encapsulation=shadow","src/components/ui/button/sc-button.tsx","src/components/ui/dashboard-module/sc-dashboard-module.scss?tag=sc-dashboard-module&encapsulation=shadow","src/components/ui/dashboard-module/sc-dashboard-module.tsx","src/functions/scroll.ts","src/components/ui/sc-dialog/sc-dialog.scss?tag=sc-dialog&encapsulation=shadow","src/components/ui/sc-dialog/sc-dialog.tsx","src/components/ui/flex/sc-flex.scss?tag=sc-flex&encapsulation=shadow","src/components/ui/flex/sc-flex.tsx","src/components/ui/icon/request.ts","src/components/ui/icon/sc-icon.css?tag=sc-icon&encapsulation=shadow","src/components/ui/icon/sc-icon.tsx","src/components/ui/skeleton/sc-skeleton.scss?tag=sc-skeleton&encapsulation=shadow","src/components/ui/skeleton/sc-skeleton.tsx","src/components/ui/spinner/sc-spinner.scss?tag=sc-spinner&encapsulation=shadow","src/components/ui/spinner/sc-spinner.tsx","src/components/controllers/dashboard/subscription-reactivate/sc-subscription-reactivate.tsx","src/components/ui/text/sc-text.scss?tag=sc-text&encapsulation=shadow","src/components/ui/text/sc-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n[hidden] {\n  display: none !important;\n}\n\n::slotted(*:not(:first-child)) {\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n}\n\n::slotted(ul) {\n  line-height: 1.4em;\n  list-style-type: disc;\n  margin: 0;\n  padding: 0;\n  padding-left: 20px;\n}\n\n.alert {\n  font-family: var(--sc-input-font-family);\n  font-weight: var(--sc-font-weight-normal);\n  font-size: var(--sc-button-font-size-medium);\n  line-height: var(--sc-line-height-dense);\n  border-radius: var(--sc-alert-border-radius, var(--sc-border-radius-medium));\n  padding: var(--sc-spacing-large);\n  margin-bottom: var(--sc-spacing-large);\n  display: flex;\n  align-items: flex-start;\n  border: var(--sc-alert-border, var(--sc-input-border));\n  border-top: solid var(--sc-alert-border-width, 3px);\n  color: var(--sc-alert-color, var(--sc-input-label-color));\n  background: var(--sc-alert-background-color, var(--sc-color-white));\n  box-shadow: var(--sc-shadow-small);\n\n  &__text {\n    flex: 1;\n  }\n\n  &.alert--primary {\n    border-top-color: var(--sc-alert-primary-border-color, var(--sc-color-primary-500));\n    a {\n      color: var(--sc-color-primary-900);\n    }\n    .alert__title {\n      color: var(--sc-alert-title-color, var(--sc-color-gray-800));\n    }\n    .alert__icon {\n      color: var(--sc-alert-primary-icon-color, var(--sc-color-primary-500));\n    }\n  }\n  &.alert--info {\n    border-top-color: var(--sc-alert-info-border-color, var(--sc-color-info-500));\n    a {\n      color: var(--sc-color-info-900);\n    }\n    .alert__title {\n      color: var(--sc-alert-title-color, var(--sc-color-gray-800));\n    }\n    .alert__icon {\n      color: var(--sc-alert-info-icon-color, var(--sc-color-info-500));\n    }\n  }\n  &.alert--danger {\n    border-top-color: var(--sc-alert-danger-border-color, var(--sc-color-danger-500));\n    a {\n      color: var(--sc-color-danger-900);\n    }\n    .alert__title {\n      color: var(--sc-alert-title-color, var(--sc-color-gray-800));\n    }\n    .alert__icon {\n      color: var(--sc-alert-danger-icon-color, var(--sc-color-danger-500));\n    }\n  }\n  &.alert--warning {\n    border-top-color: var(--sc-alert-warning-border-color, var(--sc-color-warning-500));\n    a {\n      color: var(--sc-color-warning-900);\n    }\n    .alert__title {\n      color: var(--sc-alert-title-color, var(--sc-color-gray-800));\n    }\n    .alert__icon {\n      color: var(--sc-alert-warning-icon-color, var(--sc-color-warning-500));\n    }\n  }\n  &.alert--success {\n    border-top-color: var(--sc-alert-success-border-color, var(--sc-color-success-500));\n    a {\n      color: var(--sc-color-success-900);\n    }\n    .alert__title {\n      color: var(--sc-alert-title-color, var(--sc-color-gray-800));\n    }\n    .alert__icon {\n      color: var(--sc-alert-success-icon-color, var(--sc-color-success-500));\n    }\n  }\n}\n\n.alert__icon {\n  flex: 1;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--sc-font-size-large);\n  padding-inline-end: var(--sc-spacing-medium);\n}\n\n.alert__title {\n  font-weight: var(--sc-font-weight-semibold);\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.alert__close {\n  transition: background-color var(--sc-transition-fast) ease;\n  display: inline-flex;\n  border-radius: var(--sc-border-radius-small);\n  padding: var(--sc-spacing-x-small);\n  margin-left: auto;\n  cursor: pointer;\n  svg {\n    width: 1em;\n    height: 1em;\n  }\n}\n\n.alert--is-rtl {\n  text-align: right;\n\n  &.alert-close {\n    margin-right: auto;\n    margin-left: unset;\n  }\n\n  ::slotted(ul) {\n    margin: 0;\n    padding: 0;\n    padding-right: 20px;\n  }\n}\n","import { Component, Prop, Method, State, Event, EventEmitter, Watch, h, Element, Host } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\n\n/**\n * @part base - The elements base wrapper.\n * @part icon - The alert icon.\n * @part text - The alert text.\n * @part title - The alert title.\n * @part message - The alert message.\n * @part close - The close icon.\n */\n@Component({\n  tag: 'sc-alert',\n  styleUrl: 'sc-alert.scss',\n  shadow: true,\n})\nexport class ScAlert {\n  @Element() el: HTMLScAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  /** The title. */\n  @Prop() title: string;\n\n  /** Makes the alert closable. */\n  @Prop({ reflect: true }) closable: boolean = false;\n\n  /** The type of alert. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.\n   */\n  @Prop() duration: number = Infinity;\n\n  /** Scroll into view. */\n  @Prop() scrollOnOpen: boolean;\n\n  /** Scroll margin */\n  @Prop() scrollMargin: string = '0px';\n\n  /** No icon */\n  @Prop() noIcon: boolean;\n\n  @State() autoHideTimeout: any;\n\n  /** When alert is hidden */\n  @Event() scHide: EventEmitter<void>;\n\n  /** When alert is shown */\n  @Event() scShow: EventEmitter<void>;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n    this.open = true;\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n  }\n\n  restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  /** Emit event when showing or hiding changes */\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.scShow.emit() : this.scHide.emit();\n    if (this.open && this.scrollOnOpen) {\n      this.el.scrollIntoView({ behavior: 'smooth' });\n    }\n  }\n\n  componentDidLoad() {\n    this.handleOpenChange();\n  }\n\n  iconName() {\n    switch (this.type) {\n      case 'danger':\n        return 'alert-circle';\n      case 'success':\n        return 'check-circle';\n      case 'warning':\n        return 'alert-triangle';\n      default:\n        return 'info';\n    }\n  }\n\n  icon() {\n    return <sc-icon name={this.iconName()} />;\n  }\n\n  render() {\n    return (\n      <Host style={{ 'scroll-margin-top': this.scrollMargin }}>\n        <div\n          class={{\n            'alert': true,\n            'alert--primary': this.type === 'primary',\n            'alert--success': this.type === 'success',\n            'alert--info': this.type === 'info',\n            'alert--warning': this.type === 'warning',\n            'alert--danger': this.type === 'danger',\n            'alert--is-rtl':isRtl()\n          }}\n          part=\"base\"\n          role=\"alert\"\n          aria-live=\"assertive\"\n          aria-atomic=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          hidden={this.open ? false : true}\n          onMouseMove={() => this.handleMouseMove()}\n        >\n          <div class=\"alert__icon\" part=\"icon\">\n            <slot name=\"icon\">{this.icon()}</slot>\n          </div>\n          <div class=\"alert__text\" part=\"text\">\n            <div class=\"alert__title\" part=\"title\">\n              <slot name=\"title\">{this.title}</slot>\n            </div>\n            <div class=\"alert__message\" part=\"message\">\n              <slot />\n            </div>\n          </div>\n          {this.closable && (\n            <span part=\"close\" class=\"alert__close\" onClick={() => this.handleCloseClick()}>\n              <span class=\"sr-only\">Dismiss</span>\n              <svg class=\"h-5 w-5\" x-description=\"Heroicon name: solid/x\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                ></path>\n              </svg>\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n  position: var(--sc-block-ui-position, absolute);\n  top: -5px;\n  left: -5px;\n  right: -5px;\n  bottom: -5px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > * {\n    z-index: 1;\n  }\n\n  &:after {\n    content: '';\n    position: var(--sc-block-ui-position, absolute);\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    cursor: var(--sc-block-ui-cursor, wait);\n    background: var(--sc-block-ui-background-color, var(--sc-color-white));\n    opacity: var(--sc-block-ui-opacity, 0.15);\n  }\n\n  &.transparent:after {\n    background: transparent;\n  }\n}\n\n.overlay__content {\n  font-size: var(--sc-font-size-large);\n  font-weight: var(--sc-font-weight-semibold);\n  display: grid;\n  gap: 0.5em;\n  text-align: center;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @part base - The elements base wrapper.\n * @part content - The content (spinner)\n */\n@Component({\n  tag: 'sc-block-ui',\n  styleUrl: 'sc-block-ui.scss',\n  shadow: true,\n})\nexport class ScBlockUi {\n  @Prop() zIndex: number = 1;\n  @Prop() transparent: boolean;\n  @Prop() spinner: boolean;\n  render() {\n    return (\n      <div part=\"base\" class={{ overlay: true, transparent: this.transparent }} style={{ 'z-index': this.zIndex.toString() }}>\n        <div class=\"overlay__content\" part=\"content\">\n          <slot name=\"spinner\">{!this.transparent && this.spinner && <sc-spinner></sc-spinner>}</slot>\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n  width: auto;\n  cursor: pointer;\n  --primary-color: var(--sc-color-primary-text);\n  --primary-background: var(--sc-color-primary-500);\n}\n:host([full]) {\n  display: block;\n}\n\n// This is necessary to make sure clicks happen on button component, not children.\n// Without this, forms may not submit.\n::slotted(*) {\n  pointer-events: none;\n}\n\n.button {\n  box-sizing: border-box;\n  z-index: 10;\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: center;\n  width: 100%;\n  border-style: solid;\n  border-width: var(--sc-input-border-width);\n  font-family: var(--sc-input-font-family);\n  font-weight: var(--sc-font-weight-semibold);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition: var(--sc-input-transition, var(--sc-transition-medium)) background-color, var(--sc-input-transition, var(--sc-transition-medium)) color,\n    var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow,\n    var(--sc-input-transition, var(--sc-transition-medium)) opacity;\n  cursor: inherit;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n  }\n\n  &.button--disabled {\n    cursor: not-allowed;\n\n    // When disabled, prevent mouse events from bubbling up\n    * {\n      pointer-events: none;\n    }\n\n    .button__label,\n    .button__suffix,\n    .button__prefix {\n      opacity: 0.5;\n    }\n  }\n\n  // Clicks on icons shouldn't prevent the button from gaining focus\n  ::slotted(.sc--icon) {\n    pointer-events: none;\n  }\n}\n\n.button__prefix,\n.button__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n.button__label {\n  display: flex;\n  align-items: center;\n\n  ::slotted(sc-icon) {\n    vertical-align: -2px;\n  }\n}\n\n.button {\n  &:not(.button--text):not(.button--link) {\n    box-shadow: var(--sc-shadow-small);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button.button--standard {\n  &.button--default {\n    background-color: var(--sc-button-default-background-color, var(--sc-color-white));\n    border-color: var(--sc-button-default-border-color, var(--sc-color-gray-300));\n    color: var(--sc-button-default-color, var(--sc-color-gray-600));\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--sc-button-default-hover-background-color, var(--sc-color-white));\n      border-color: var(--sc-button-default-focus-border-color, var(--primary-background));\n      color: var(--primary-background);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--sc-button-default-focus-background-color, var(--sc-color-white));\n      border-color: var(--sc-button-default-focus-border-color, var(--sc-color-white));\n      color: var(--primary-background);\n      box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--sc-button-default-active-background-color, var(--sc-color-white));\n      border-color: var(--sc-button-default-active-border-color, var(--sc-color-white));\n      color: var(--primary-background);\n    }\n  }\n\n  &.button--primary {\n    background-color: var(--primary-background);\n    border-color: var(--primary-background);\n    color: var(--primary-color);\n\n    &:hover:not(.button--disabled) {\n      opacity: 0.8;\n    }\n\n    &:focus:not(.button--disabled) {\n      opacity: 0.8;\n      color: var(--primary-color);\n      border-color: var(--sc-color-white);\n      box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--primary-background);\n      border-color: var(--sc-color-white);\n      color: var(--primary-color);\n    }\n  }\n\n  &.button--success {\n    background-color: var(--sc-color-success-500);\n    border-color: var(--sc-color-success-500);\n    color: var(--sc-color-success-text);\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--sc-color-success-400);\n      border-color: var(--sc-color-success-400);\n      color: var(--sc-color-success-text);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--sc-color-success-400);\n      border-color: var(--sc-color-success-400);\n      color: var(--sc-color-success-text);\n      box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-success);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--sc-color-success-500);\n      border-color: var(--sc-color-success-500);\n      color: var(--sc-color-success-text);\n    }\n  }\n\n  &.button--info {\n    background-color: var(--sc-color-info-500);\n    border-color: var(--sc-color-info-500);\n    color: var(--sc-color-info-text);\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--sc-color-info-400);\n      border-color: var(--sc-color-info-400);\n      color: var(--sc-color-info-text);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--sc-color-info-400);\n      border-color: var(--sc-color-info-400);\n      color: var(--sc-color-info-text);\n      box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-info);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--sc-color-info-500);\n      border-color: var(--sc-color-info-500);\n      color: var(--sc-color-info-text);\n    }\n  }\n\n  &.button--warning {\n    background-color: var(--sc-color-warning-500);\n    border-color: var(--sc-color-warning-500);\n    color: var(--sc-color-warning-text);\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--sc-color-warning-400);\n      border-color: var(--sc-color-warning-400);\n      color: var(--sc-color-warning-text);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--sc-color-warning-400);\n      border-color: var(--sc-color-warning-400);\n      color: var(--sc-color-warning-text);\n      box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-warning);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--sc-color-warning-500);\n      border-color: var(--sc-color-warning-500);\n      color: var(--sc-color-warning-text);\n    }\n  }\n\n  &.button--danger {\n    background-color: var(--sc-color-danger-500);\n    border-color: var(--sc-color-danger-500);\n    color: var(--sc-color-danger-text);\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--sc-color-danger-400);\n      border-color: var(--sc-color-danger-400);\n      color: var(--sc-color-danger-text);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--sc-color-danger-400);\n      border-color: var(--sc-color-danger-400);\n      color: var(--sc-color-danger-text);\n      box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-danger);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--sc-color-danger-500);\n      border-color: var(--sc-color-danger-500);\n      color: var(--sc-color-danger-text);\n    }\n  }\n}\n\n/*\n* Outline buttons\n*/\n.button--outline {\n  background: none;\n  border: solid 1px;\n}\n\n/* Default */\n.button--outline.button--default {\n  border-color: var(--sc-color-gray-300);\n  color: var(--sc-color-gray-700);\n}\n.button--outline.button--default:hover:not(.button--disabled) {\n  border-color: var(--primary-background);\n  background-color: var(--primary-background);\n  color: var(--sc-color-white);\n}\n.button--outline.button--default:focus:not(.button--disabled) {\n  border-color: var(--primary-background);\n  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--primary-background) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--default:active:not(.button--disabled) {\n  opacity: 0.8;\n  color: var(--sc-color-white);\n}\n/* Primary */\n.button--outline.button--primary {\n  border-color: var(--primary-background);\n  color: var(--primary-background);\n}\n.button--outline.button--primary:hover:not(.button--disabled) {\n  background-color: var(--primary-background);\n  opacity: 0.8;\n  color: var(--sc-color-white);\n}\n.button--outline.button--primary:focus:not(.button--disabled) {\n  border-color: var(--primary-background);\n  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--primary-background) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--primary:active:not(.button--disabled) {\n  border-color: var(--primary-background);\n  background-color: var(--primary-background);\n  opacity: 0.9;\n  color: var(--sc-color-white);\n}\n/* Success */\n.button--outline.button--success {\n  border-color: var(--sc-color-success-500);\n  color: var(--sc-color-success-500);\n}\n.button--outline.button--success:hover:not(.button--disabled) {\n  background-color: var(--sc-color-success-500);\n  color: var(--sc-color-white);\n}\n.button--outline.button--success:focus:not(.button--disabled) {\n  border-color: var(--sc-color-success-500);\n  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-success-500) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--success:active:not(.button--disabled) {\n  border-color: var(--sc-color-success-700);\n  background-color: var(--sc-color-success-700);\n  color: var(--sc-color-white);\n}\n/* Info */\n.button--outline.button--info {\n  border-color: var(--sc-color-gray-500);\n  color: var(--sc-color-gray-500);\n}\n.button--outline.button--info:hover:not(.button--disabled) {\n  background-color: var(--sc-color-gray-500);\n  color: var(--sc-color-white);\n}\n.button--outline.button--info:focus:not(.button--disabled) {\n  border-color: var(--sc-color-gray-500);\n  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-gray-500) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--info:active:not(.button--disabled) {\n  border-color: var(--sc-color-gray-700);\n  background-color: var(--sc-color-gray-700);\n  color: var(--sc-color-white);\n}\n/* Warning */\n.button--outline.button--warning {\n  border-color: var(--sc-color-warning-500);\n  color: var(--sc-color-warning-500);\n}\n.button--outline.button--warning:hover:not(.button--disabled) {\n  background-color: var(--sc-color-warning-500);\n  color: var(--sc-color-white);\n}\n.button--outline.button--warning:focus:not(.button--disabled) {\n  border-color: var(--sc-color-warning-500);\n  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-warning-500) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--warning:active:not(.button--disabled) {\n  border-color: var(--sc-color-warning-700);\n  background-color: var(--sc-color-warning-700);\n  color: var(--sc-color-white);\n}\n/* Danger */\n.button--outline.button--danger {\n  border-color: var(--sc-color-danger-500);\n  color: var(--sc-color-danger-500);\n}\n.button--outline.button--danger:hover:not(.button--disabled) {\n  background-color: var(--sc-color-danger-500);\n  color: var(--sc-color-white);\n}\n.button--outline.button--danger:focus:not(.button--disabled) {\n  border-color: var(--sc-color-danger-500);\n  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-danger-500) / var(--sc-focus-ring-alpha);\n}\n.button--outline.button--danger:active:not(.button--disabled) {\n  border-color: var(--sc-color-danger-700);\n  background-color: var(--sc-color-danger-700);\n  color: var(--sc-color-white);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Text buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--text {\n  background-color: transparent;\n  border-color: transparent;\n  color: inherit;\n\n  &:hover:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--sc-color-gray-600);\n  }\n\n  &:focus:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    box-shadow: 0; //0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n  }\n\n  &:active:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    box-shadow: 0; // 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n  }\n\n  &.button--caret.button--has-label {\n    padding-right: var(--sc-spacing-xx-small);\n    .button__label {\n      padding: 0 var(--sc-spacing-xx-small) !important;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Link buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--link {\n  background-color: transparent;\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--sc-button-link-color, var(--primary-background));\n  transition: opacity var(--sc-input-transition, var(--sc-transition-medium)) ease;\n  text-decoration: var(--sc-button-link-text-decoration, none);\n\n  &.button--has-label {\n    &.button--small,\n    &.button--medium,\n    &.button--large {\n      .button__label {\n        padding: 0;\n      }\n    }\n  }\n\n  &:hover:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    opacity: 0.75;\n  }\n\n  &:focus:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  &:active:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  &.button--has-prefix:not(.button--text) {\n    &.button--small,\n    &.button--medium,\n    &.button--large {\n      padding-left: 0;\n      .button__label {\n        padding-left: var(--sc-spacing-xx-small);\n      }\n    }\n  }\n  &.button--has-suffix:not(.button--text) {\n    &.button--small,\n    &.button--medium,\n    &.button--large {\n      padding-right: 0;\n      .button__label {\n        padding-right: var(--sc-spacing-xx-small);\n      }\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n  font-size: var(--sc-button-font-size-small);\n  height: var(--sc-input-height-small);\n  line-height: calc(var(--sc-input-height-small) - var(--sc-input-border-width) * 2);\n  border-radius: var(--button-border-radius, var(--sc-input-border-radius-small));\n}\n\n.button--medium {\n  font-size: var(--sc-button-font-size-medium);\n  height: var(--sc-input-height-medium);\n  line-height: calc(var(--sc-input-height-medium) - var(--sc-input-border-width) * 2);\n  border-radius: var(--button-border-radius, var(--sc-input-border-radius-medium));\n}\n\n.button--large {\n  font-size: var(--sc-button-font-size-large);\n  height: var(--sc-input-height-large);\n  line-height: calc(var(--sc-input-height-large) - var(--sc-input-border-width) * 2);\n  border-radius: var(--button-border-radius, var(--sc-input-border-radius-large));\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Full modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--full {\n  display: block;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n  &.button--small {\n    border-radius: var(--sc-input-height-small);\n  }\n\n  &.button--medium {\n    border-radius: var(--sc-input-height-medium);\n  }\n\n  &.button--large {\n    border-radius: var(--sc-input-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n  padding-left: 0;\n  padding-right: 0;\n\n  &.button--small {\n    width: var(--sc-input-height-small);\n    border-radius: 50%;\n  }\n\n  &.button--medium {\n    width: var(--sc-input-height-medium);\n    border-radius: 50%;\n  }\n\n  &.button--large {\n    width: var(--sc-input-height-large);\n    border-radius: 50%;\n  }\n\n  .button__prefix,\n  .button__suffix,\n  .button__caret {\n    display: none;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n  .button__suffix {\n    display: none;\n  }\n\n  .button__caret {\n    display: flex;\n    align-items: center;\n\n    svg {\n      width: 1em;\n      height: 1em;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Busy modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--busy {\n  position: relative;\n  cursor: wait;\n\n  .button__prefix,\n  .button__label,\n  .button__suffix,\n  .button__caret {\n    visibility: hidden;\n  }\n\n  // When disabled, prevent mouse events from bubbling up\n  * {\n    pointer-events: none;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--loading {\n  position: relative;\n  cursor: wait;\n\n  .button__prefix,\n  .button__label,\n  .button__suffix,\n  .button__caret {\n    visibility: hidden;\n  }\n}\n\nsc-spinner::part(base) {\n  --indicator-color: currentColor;\n  --spinner-size: 12px;\n  position: absolute;\n  top: calc(50% - var(--spinner-size) + (var(--spinner-size) / 4));\n  left: calc(50% - var(--spinner-size) + (var(--spinner-size) / 4));\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(sc-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translateY(-50%) translateX(50%);\n  pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n  &.button--small .button__label {\n    padding: 0 var(--sc-spacing-small);\n  }\n\n  &.button--medium .button__label {\n    padding: 0 var(--sc-spacing-medium);\n  }\n\n  &.button--large .button__label {\n    padding: 0 var(--sc-spacing-large);\n  }\n}\n\n.button--has-prefix:not(.button--text) {\n  &.button--small {\n    padding-left: var(--sc-spacing-x-small);\n\n    .button__label {\n      padding-left: var(--sc-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-left: var(--sc-spacing-small);\n\n    .button__label {\n      padding-left: var(--sc-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-left: var(--sc-spacing-small);\n\n    .button__label {\n      padding-left: var(--sc-spacing-small);\n    }\n  }\n}\n\n.button--has-suffix,\n.button--caret {\n  &.button--small {\n    padding-right: var(--sc-spacing-x-small);\n\n    .button__label {\n      padding-right: var(--sc-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-right: var(--sc-spacing-small);\n\n    .button__label {\n      padding-right: var(--sc-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-right: var(--sc-spacing-small);\n\n    .button__label {\n      padding-right: var(--sc-spacing-small);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).\n// This means buttons aren't always direct descendants of the button group, thus we can't target them with the ::slotted\n// selector. To work around this, the button group component does some magic to add these special classes to buttons and\n// we style them here instead.\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n:host(.sc-button-group__button--first) .button {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host(.sc-button-group__button--inner) .button {\n  border-radius: 0;\n}\n\n:host(.sc-button-group__button--last) .button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n// All except the first\n:host(.sc-button-group__button:not(.sc-button-group__button--first)) {\n  margin-left: calc(-1 * var(--sc-input-border-width));\n}\n\n// Add a visual separator between solid buttons\n:host(.sc-button-group__button:not(.sc-button-group__button--focus, .sc-button-group__button--first, [type='default']):not(:hover, :active, :focus)) .button:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  border-left: solid 1px #fff4;\n  mix-blend-mode: lighten;\n}\n\n// Bump focused buttons up so their focus ring isn't clipped\n:host(.sc-button-group__button--hover) {\n  z-index: 1;\n}\n\n:host(.sc-button-group__button--focus) {\n  z-index: 2;\n}\n\n@keyframes busy-animation {\n  0% {\n    background-position: 200px 0;\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// RTL support\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.button--is-rtl {\n  &.button--has-prefix {\n    &.button--small,\n    &.button--medium,\n    &.button--large {\n      padding-left: 0;\n      .button__label {\n        padding-left: 0;\n        padding-right: var(--sc-spacing-xx-small);\n      }\n    }\n  }\n  &.button--has-suffix {\n    &.button--small,\n    &.button--medium,\n    &.button--large {\n      padding-right: 0;\n      .button__label {\n        padding-right: 0;\n        padding-left: var(--sc-spacing-xx-small);\n      }\n    }\n  }\n}\n","import { Component, Prop, Event, EventEmitter, State, Element, Fragment, h } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\n\n/**\n * @part base - The elements base wrapper.\n * @part label - The button label.\n * @part prefix - The button prefix.\n * @part suffix - The button suffix.\n * @part caret - The button caret.\n * @part spinner - The button spinner.\n */\n@Component({\n  tag: 'sc-button',\n  styleUrl: 'sc-button.scss',\n  shadow: true,\n})\nexport class ScButton {\n  @Element() button: HTMLElement | HTMLAnchorElement;\n\n  @State() private hasFocus = false;\n  @State() private hasLabel = false;\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' | 'link' = 'default';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop({ reflect: true }) caret?: boolean = false;\n\n  /** Draws the button full-width. */\n  @Prop({ reflect: true }) full?: boolean = false;\n\n  /** Disables the button. */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** Draws the button in a loading state. */\n  @Prop({ reflect: true }) loading?: boolean = false;\n\n  /** Draws an outlined button. */\n  @Prop({ reflect: true }) outline?: boolean = false;\n\n  /** Draws the button in a busy state. */\n  @Prop({ reflect: true }) busy?: boolean = false;\n\n  /** Draws a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill?: boolean = false;\n\n  /** Draws a circle button. */\n  @Prop({ reflect: true }) circle?: boolean = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit?: boolean = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name: string;\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download: string;\n\n  /** Tells the browser to autofocus. */\n  @Prop() autofocus: boolean;\n\n  /** Emitted when the button loses focus. */\n  @Event() scBlur: EventEmitter<void>;\n\n  /** Emitted when the button gains focus. */\n  @Event() scFocus: EventEmitter<void>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Simulates a click on the button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  blur() {\n    this.button.blur();\n  }\n\n  handleSlotChange() {\n    this.hasLabel = !!this.button.children;\n    this.hasPrefix = !!this.button.querySelector('[slot=\"prefix\"]');\n    this.hasSuffix = !!this.button.querySelector('[slot=\"suffix\"]');\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.scBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.scFocus.emit();\n  }\n\n  handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading || this.busy) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (this.submit) {\n      this.submitForm();\n    }\n  }\n\n  submitForm() {\n    const form = this.button.closest('sc-form')?.shadowRoot?.querySelector('form') || this.button.closest('form');\n    // Calling form.submit() seems to bypass the submit event and constraint validation. Instead, we can inject a\n    // native submit button into the form, click it, then remove it to simulate a standard form submission.\n    const button = document.createElement('button');\n    if (form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n\n  render() {\n    const Tag = this.href ? 'a' : 'button';\n\n    const interior = (\n      <Fragment>\n        <span part=\"prefix\" class=\"button__prefix\">\n          <slot onSlotchange={() => this.handleSlotChange()} name=\"prefix\"></slot>\n        </span>\n        <span part=\"label\" class=\"button__label\">\n          <slot onSlotchange={() => this.handleSlotChange()}></slot>\n        </span>\n        <span part=\"suffix\" class=\"button__suffix\">\n          <slot onSlotchange={() => this.handleSlotChange()} name=\"suffix\"></slot>\n        </span>\n        {this.caret ? (\n          <span part=\"caret\" class=\"button__caret\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"6 9 12 15 18 9\"></polyline>\n            </svg>\n          </span>\n        ) : (\n          ''\n        )}\n        {this.loading || this.busy ? <sc-spinner exportparts=\"base:spinner\"></sc-spinner> : ''}\n      </Fragment>\n    );\n\n    return (\n      <Tag\n        part=\"base\"\n        class={{\n          'button': true,\n          [`button--${this.type}`]: !!this.type,\n          [`button--${this.size}`]: true,\n          'button--caret': this.caret,\n          'button--circle': this.circle,\n          'button--disabled': this.disabled,\n          'button--focused': this.hasFocus,\n          'button--loading': this.loading,\n          'button--busy': this.busy,\n          'button--pill': this.pill,\n          'button--standard': !this.outline,\n          'button--outline': this.outline,\n          'button--has-label': this.hasLabel,\n          'button--has-prefix': this.hasPrefix,\n          'button--has-suffix': this.hasSuffix,\n          'button--is-rtl': isRtl(),\n        }}\n        href={this.href}\n        target={this.target}\n        download={this.download}\n        autoFocus={this.autofocus}\n        rel={this.target ? 'noreferrer noopener' : undefined}\n        role=\"button\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-busy={this.busy || this.loading ? 'true' : 'false'}\n        tabindex={this.disabled ? '-1' : '0'}\n        disabled={this.disabled || this.busy}\n        type={this.submit ? 'submit' : 'button'}\n        name={this.name}\n        value={this.value}\n        onBlur={() => this.handleBlur()}\n        onFocus={() => this.handleFocus()}\n        onClick={e => this.handleClick(e)}\n      >\n        {interior}\n      </Tag>\n    );\n  }\n}\n",":host {\n  display: block;\n  position: relative;\n}\n\n.dashboard-module {\n  display: grid;\n  gap: var(--sc-dashboard-module-spacing, 1em);\n}\n\n.heading {\n  font-family: var(--sc-font-sans);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1em;\n  align-items: center;\n  justify-content: space-between;\n\n  &__text {\n    display: grid;\n    flex: 1;\n    gap: calc(var(--sc-dashboard-module-spacing, 1em) / 2);\n  }\n\n  @media screen and (min-width: 720px) {\n    gap: 2em;\n  }\n}\n\n.heading__title {\n  font-size: var(--sc-dashbaord-module-heading-size, var(--sc-font-size-x-large));\n  font-weight: var(--sc-dashbaord-module-heading-weight, var(--sc-font-weight-bold));\n  line-height: var(--sc-dashbaord-module-heading-line-height, var(--sc-line-height-dense));\n  white-space: nowrap;\n}\n\n.heading__description {\n  font-size: var(--sc-font-size-normal);\n  line-height: var(--sc-line-height-dense);\n  opacity: 0.85;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * @part base - The elements base wrapper.\n * @part heading - The heading.\n * @part heading-text - The heading text wrapper.\n * @part heading-title - The heading title.\n * @part heading-description - The heading description.\n * @part error__base - The alert base wrapper.\n * @part error__icon - The alert icon.\n * @part error__text - The alert text.\n * @part error__title - The alert title.\n * @part error__ message - The alert message.\n */\n@Component({\n  tag: 'sc-dashboard-module',\n  styleUrl: 'sc-dashboard-module.scss',\n  shadow: true,\n})\nexport class ScDashboardModule {\n  @Prop() heading: string;\n  @Prop() error: string;\n  @Prop() loading: boolean;\n\n  render() {\n    return (\n      <div class=\"dashboard-module\" part=\"base\">\n        {!!this.error && (\n          <sc-alert exportparts=\"base:error__base, icon:error__icon, text:error__text, title:error__title, message:error__message\" open={!!this.error} type=\"danger\">\n            <span slot=\"title\">{__('Error', 'surecart')}</span>\n            {this.error}\n          </sc-alert>\n        )}\n\n        <div class=\"heading\" part=\"heading\">\n          <div class=\"heading__text\" part=\"heading-text\">\n            <div class=\"heading__title\" part=\"heading-title\">\n              <slot name=\"heading\" aria-label={this.heading}>{this.heading}</slot>\n            </div>\n            <div class=\"heading__description\" part=\"heading-description\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n\n        <slot></slot>\n      </div>\n    );\n  }\n}\n","const locks = new Set();\n\n//\n// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n// without premature unlocking.\n//\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('sc-scroll-lock');\n}\n\n//\n// Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n//\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('sc-scroll-lock');\n  }\n}\n",":host {\n  --width: 31rem;\n  --header-spacing: var(--sc-spacing-large);\n  --body-spacing: var(--sc-spacing-large);\n  --footer-spacing: var(--sc-spacing-large);\n  display: contents;\n}\n[hidden] {\n  display: none !important;\n}\n.dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--sc-z-index-dialog);\n  box-sizing: border-box;\n  text-align: left;\n}\n.dialog__panel {\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  width: var(--width);\n  max-width: 100vw;\n  max-height: 100vh;\n  background-color: var(--sc-panel-background-color);\n  border-radius: var(--sc-border-radius-medium);\n  box-shadow: var(--sc-shadow-x-large);\n  position: relative;\n}\n.dialog__panel:focus {\n  outline: none;\n}\n/* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */\n@media screen and (max-width: 420px) {\n  .dialog__panel {\n    max-height: 80vh;\n  }\n}\n.dialog--open .dialog__panel {\n  display: flex;\n  opacity: 1;\n  transform: none;\n}\n.dialog__header {\n  flex: 0 0 auto;\n  display: flex;\n  border-bottom: 1px solid var(--sc-color-gray-300);\n}\n.dialog__title {\n  flex: 1 1 auto;\n  font: inherit;\n  font-size: var(--sc-font-size-large);\n  line-height: var(--sc-line-height-dense);\n  padding: var(--header-spacing);\n  margin: 0;\n}\n.dialog__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--sc-font-size-x-large);\n  padding: 0 calc(var(--header-spacing) / 2);\n  z-index: 2;\n}\n.dialog__body {\n  flex: 1 1 auto;\n  padding: var(--body-spacing);\n  overflow: var(--dialog-body-overflow, auto);\n  -webkit-overflow-scrolling: touch;\n}\n.dialog__footer {\n  flex: 0 0 auto;\n  text-align: right;\n  padding: var(--footer-spacing);\n}\n.dialog__footer ::slotted(sl-button:not(:first-of-type)) {\n  margin-left: var(--sc-spacing-x-small);\n}\n.dialog:not(.dialog--has-footer) .dialog__footer {\n  display: none;\n}\n.dialog__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--sc-overlay-background-color);\n}\n","import { Component, h, Prop, State, Element, Watch, Event, EventEmitter } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { animateTo, stopAnimations } from '../../../functions/animate';\nimport { getAnimation, setDefaultAnimation } from '../../../functions/animation-registry';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../../functions/scroll';\n\n@Component({\n  tag: 'sc-dialog',\n  styleUrl: 'sc-dialog.scss',\n  shadow: true,\n})\nexport class ScDialog {\n  @Element() el!: HTMLElement;\n\n  private dialog: HTMLElement;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n\n  private originalTrigger: HTMLElement | null;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ reflect: true }) open: boolean = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop({ reflect: true }) label = '';\n\n  /**\n   * Disables the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the dialog.\n   */\n  @Prop({ reflect: true }) noHeader: boolean = false;\n\n  /** Does this have a footer */\n  @State() hasFooter: boolean = false;\n\n  /** Request close event */\n  @Event({ cancelable: true }) scRequestClose: EventEmitter<'close-button' | 'keyboard' | 'overlay'>;\n  @Event() scShow: EventEmitter<void>;\n  @Event() scAfterShow: EventEmitter<void>;\n  @Event() scHide: EventEmitter<void>;\n  @Event() scAfterHide: EventEmitter<void>;\n  @Event({ cancelable: true }) scInitialFocus: EventEmitter<void>;\n\n  /** Shows the dialog. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n    this.open = true;\n  }\n\n  /** Hides the dialog */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n    this.open = false;\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const slRequestClose = this.scRequestClose.emit(source);\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this.el, 'dialog.denyClose');\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.requestClose('keyboard');\n    }\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.scShow.emit();\n\n      lockBodyScrolling(this.el);\n\n      // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause\n      // the dialogs's animation to jitter (if it starts offscreen), so we'll temporarily remove the attribute, call\n      // `focus({ preventScroll: true })` ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/shoelace-style/shoelace/issues/693\n      //\n      const autoFocusTarget = this.el.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.scInitialFocus.emit();\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      const panelAnimation = getAnimation(this.el, 'dialog.show');\n      const overlayAnimation = getAnimation(this.el, 'dialog.overlay.show');\n      await Promise.all([animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options), animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)]);\n\n      this.scAfterShow.emit();\n    } else {\n      // Hide\n      this.scHide.emit();\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this.el, 'dialog.hide');\n      const overlayAnimation = getAnimation(this.el, 'dialog.overlay.hide');\n      await Promise.all([animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options), animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)]);\n      this.dialog.hidden = true;\n\n      unlockBodyScrolling(this.el);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === 'function') {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.scAfterHide.emit();\n    }\n  }\n\n  componentDidLoad() {\n    this.hasFooter = !!this.el.querySelector('[slot=\"footer\"]');\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      lockBodyScrolling(this.el);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.el);\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        ref={el => (this.dialog = el as HTMLElement)}\n        class={{\n          'dialog': true,\n          'dialog--open': this.open,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={e => this.handleKeyDown(e)}\n      >\n        <div\n          part=\"overlay\"\n          class=\"dialog__overlay\"\n          onClick={e => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n            this.requestClose('overlay');\n          }}\n          ref={el => (this.overlay = el as HTMLElement)}\n          tabindex=\"-1\"\n        ></div>\n        <div\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader || this.label}\n          aria-labelledby={!this.noHeader || 'title'}\n          ref={el => (this.panel = el as HTMLElement)}\n          tabindex=\"0\"\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"dialog__header\">\n              <h2 part=\"title\" class=\"dialog__title\" id=\"title\">\n                <slot name=\"label\"> {this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>\n              </h2>\n              <sc-button\n                class=\"dialog__close\"\n                type=\"text\"\n                circle\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                onClick={e => {\n                  e.preventDefault();\n                  e.stopImmediatePropagation();\n                  this.requestClose('close-button');\n                }}\n              >\n                <sc-icon name=\"x\" label={__('Close', 'surecart')}></sc-icon>\n              </sc-button>\n            </header>\n          )}\n          <div part=\"body\" class=\"dialog__body\">\n            <slot></slot>\n          </div>\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n\nsetDefaultAnimation('dialog.show', {\n  keyframes: [\n    { opacity: 0, transform: 'scale(0.8)' },\n    { opacity: 1, transform: 'scale(1)' },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.hide', {\n  keyframes: [\n    { opacity: 1, transform: 'scale(1)' },\n    { opacity: 0, transform: 'scale(0.8)' },\n  ],\n  options: { duration: 150, easing: 'ease' },\n});\n\nsetDefaultAnimation('dialog.denyClose', {\n  keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' }],\n  options: { duration: 150 },\n});\n\nsetDefaultAnimation('dialog.overlay.show', {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 150 },\n});\n\nsetDefaultAnimation('dialog.overlay.hide', {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 150 },\n});\n",":host {\n  display: block;\n  --spacing: var(--sc-spacing-small);\n}\n\n.flex {\n  display: flex;\n  gap: var(--sc-flex-column-gap, var(--spacing) );\n  justify-content: var(--sc-flex-space-between, space-between );\n}\n\n$justify: flex-start, flex-end, center, space-between, space-around, space-evenly;\n@each $value in $justify {\n  .justify-#{$value} {\n    justify-content: $value;\n  }\n}\n\n$wrap: wrap, no-wrap;\n@each $value in $wrap {\n  .wrap-#{$value} {\n    flex-wrap: $value;\n  }\n}\n\n$align: flex-start, flex-end, center, baseline, stretch;\n@each $value in $align {\n  .align-#{$value} {\n    align-items: $value;\n  }\n}\n\n$direction: row, row-reverse, column, column-reverse;\n@each $value in $direction {\n  .direction-#{$value} {\n    flex-direction: $value;\n  }\n}\n\n@media (max-width: 480px) {\n  .stack-mobile {\n    flex-direction: column;\n  }\n}\n\n@media (max-width: 768px) {\n  .stack-tablet {\n    flex-direction: column;\n  }\n}\n\n@media (max-width: 1180px) {\n  .stack-desktop {\n    flex-direction: column;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'sc-flex',\n  styleUrl: 'sc-flex.scss',\n  shadow: true,\n})\nexport class ScFlex {\n  @Prop() alignItems: string;\n  @Prop() justifyContent: string;\n  @Prop() flexDirection: string;\n  @Prop() columnGap: string;\n  @Prop() flexWrap: string;\n  @Prop() stack: string;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          flex: true,\n          ...(this.justifyContent ? { [`justify-${this.justifyContent}`]: true } : {}),\n          ...(this.alignItems ? { [`align-${this.alignItems}`]: true } : {}),\n          ...(this.flexDirection ? { [`direction-${this.flexDirection}`]: true } : {}),\n          ...(this.columnGap ? { [`column-gap-${this.columnGap}`]: true } : {}),\n          ...(this.flexWrap ? { [`wrap-${this.flexWrap}`]: true } : {}),\n          ...(this.stack ? { [`stack-${this.stack}`]: true } : {}),\n        }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n","interface IconFile {\n  ok: boolean;\n  status: number;\n  svg: string;\n}\n\nconst iconFiles = new Map<string, Promise<IconFile>>();\n\nexport const requestIcon = (url: string) => {\n  if (iconFiles.has(url)) {\n    return iconFiles.get(url);\n  } else {\n    const request = fetch(url).then(async response => {\n      if (response.ok) {\n        const div = document.createElement('div');\n        div.innerHTML = await response.text();\n        const svg = div.firstElementChild;\n\n        return {\n          ok: response.ok,\n          status: response.status,\n          svg: svg && svg.tagName.toLowerCase() === 'svg' ? svg.outerHTML : '',\n        };\n      } else {\n        return {\n          ok: response.ok,\n          status: response.status,\n          svg: null,\n        };\n      }\n    }) as Promise<IconFile>;\n\n    iconFiles.set(url, request);\n    return request;\n  }\n};\n",":host {\n  --width: 1em;\n  --height: 1em;\n  display: inline-block;\n  width: var(--width);\n  height: var(--height);\n  contain: strict;\n  box-sizing: content-box !important;\n}\n.icon,\nsvg {\n  display: block;\n  height: 100%;\n  width: 100%;\n  stroke-width: var(--sc-icon-stroke-width, 2px);\n}\n","import { Component, Watch, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { getIconLibrary } from './library';\nimport { requestIcon } from './request';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * The icon's label used for accessibility.\n */\nconst LABEL_MAPPINGS = {\n  'chevron-down': __('Open', 'surecart'),\n  'chevron-up': __('Close', 'surecart'),\n  'chevron-right': __('Next', 'surecart'),\n  'chevron-left': __('Previous', 'surecart'),\n  'arrow-right': __('Next', 'surecart'),\n  'arrow-left': __('Previous', 'surecart'),\n  'arrow-down': __('Down', 'surecart'),\n  'arrow-up': __('Up', 'surecart'),\n  'alert-circle': __('Alert', 'surecart'),\n};\n\nconst parser = new DOMParser();\n\n@Component({\n  tag: 'sc-icon',\n  styleUrl: 'sc-icon.css',\n  assetsDirs: ['icon-assets'],\n  shadow: true,\n})\nexport class ScIcon {\n  @State() private svg = '';\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() src: string;\n\n  /** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */\n  @Prop() label: string;\n\n  /** The name of a registered custom icon library. */\n  @Prop() library = 'default';\n\n  /** Emitted when the icon has loaded. */\n  @Event() scLoad: EventEmitter<void>;\n\n  /** @internal Fetches the icon and redraws it. Used to handle library registrations. */\n  redraw() {\n    this.setIcon();\n  }\n\n  componentWillLoad() {\n    this.setIcon();\n  }\n\n  getLabel() {\n    let label = '';\n    if (this.label) {\n      label = LABEL_MAPPINGS?.[this.label] || this.label;\n    } else if (this.name) {\n      label = (LABEL_MAPPINGS?.[this.name] || this.name).replace(/-/g, ' ');\n    } else if (this.src) {\n      label = this.src.replace(/.*\\//, '').replace(/-/g, ' ').replace(/\\.svg/i, '');\n    }\n\n    return label;\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('library')\n  async setIcon() {\n    const library = getIconLibrary(this.library);\n    const url = this.getUrl();\n    if (url) {\n      try {\n        const file = await requestIcon(url)!;\n        if (url !== this.getUrl()) {\n          // If the url has changed while fetching the icon, ignore this request\n          return;\n        } else if (file.ok) {\n          const doc = parser.parseFromString(file.svg, 'text/html');\n          const svgEl = doc.body.querySelector('svg');\n\n          if (svgEl) {\n            if (library && library.mutator) {\n              library.mutator(svgEl);\n            }\n\n            this.svg = svgEl.outerHTML;\n            this.scLoad.emit();\n          } else {\n            this.svg = '';\n            console.error({ status: file?.status });\n          }\n        } else {\n          this.svg = '';\n          console.error({ status: file?.status });\n        }\n      } catch {\n        console.error({ status: -1 });\n      }\n    } else if (this.svg) {\n      // If we can't resolve a URL and an icon was previously set, remove it\n      this.svg = '';\n    }\n  }\n\n  private getUrl(): string {\n    const library = getIconLibrary(this.library);\n    if (this.name && library) {\n      return library.resolver(this.name);\n    } else {\n      return this.src;\n    }\n  }\n\n  render() {\n    return <div part=\"base\" class=\"icon\" role=\"img\" aria-label={this.getLabel()} innerHTML={this.svg}></div>;\n  }\n}\n",":host {\n  position: relative;\n  box-sizing: border-box;\n\n  & *,\n  & *:before,\n  & *:after {\n    box-sizing: inherit;\n  }\n}\n\n/**\n * @prop --border-radius: The skeleton's border radius.\n * @prop --color: The color of the skeleton.\n * @prop --sheen-color: The sheen color when the skeleton is in its loading state.\n */\n:host {\n  --border-radius: var(--sc-border-radius-pill);\n  --color: var(--sc-skeleton-color, var(--sc-color-gray-300));\n  --sheen-color: var(--sc-skeleton-sheen-color, var(--sc-color-gray-400));\n\n  display: block;\n  position: relative;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-height: 1rem;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: var(--border-radius);\n}\n\n.skeleton--sheen .skeleton__indicator {\n  background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));\n  background-size: 400% 100%;\n  background-size: 400% 100%;\n  animation: sheen 3s ease-in-out infinite;\n}\n\n.skeleton--pulse .skeleton__indicator {\n  animation: pulse 2s ease-in-out 0.5s infinite;\n}\n\n@keyframes sheen {\n  0% {\n    background-position: 200% 0;\n  }\n  to {\n    background-position: -200% 0;\n  }\n}\n\n@keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'sc-skeleton',\n  styleUrl: 'sc-skeleton.scss',\n  shadow: true,\n})\nexport class ScSkeleton {\n  /** Animation effect */\n  @Prop() effect: 'pulse' | 'sheen' | 'none' = 'sheen';\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'skeleton': true,\n          'skeleton--pulse': this.effect === 'pulse',\n          'skeleton--sheen': this.effect === 'sheen',\n        }}\n        aria-busy=\"true\"\n        aria-live=\"polite\"\n      >\n        <div part=\"indicator\" class=\"skeleton__indicator\"></div>\n      </div>\n    );\n  }\n}\n","/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: #0d131e20;\n  --indicator-color: var(--sc-color-primary-500);\n  --stroke-width: 2px;\n  --spinner-size: 1em;\n\n  display: inline-block;\n}\n\n.spinner {\n  display: inline-block;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'sc-spinner',\n  styleUrl: 'sc-spinner.scss',\n  shadow: true,\n})\nexport class ScSpinner {\n  render() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\"></span>;\n  }\n}\n","import { Component, Event, EventEmitter, Fragment, Prop, State, Watch, h } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { Checkout, Period, Subscription } from 'src/types';\nimport apiFetch from '../../../../functions/fetch';\nimport { addQueryArgs } from '@wordpress/url';\n\n@Component({\n  tag: 'sc-subscription-reactivate',\n  shadow: true,\n})\nexport class ScSubscriptionReactivate {\n  /** Whether it is open */\n  @Prop() open: boolean;\n\n  /** The subscription to reactivate */\n  @Prop() subscription: Subscription;\n\n  /** Reactivate modal closed */\n  @Event({ cancelable: true }) scRequestClose: EventEmitter<'close-button' | 'keyboard' | 'overlay'>;\n\n  /** Refresh subscriptions */\n  @Event() scRefresh: EventEmitter<void>;\n\n  @State() busy: boolean;\n  @State() error: string;\n  @State() upcomingPeriod: Period;\n  @State() loading: boolean = false;\n\n  @Watch('open')\n  openChanged() {\n    if (this.open) {\n      this.fetchUpcoming();\n    }\n  }\n\n  async fetchUpcoming() {\n    this.loading = true;\n    try {\n      this.upcomingPeriod = await apiFetch({\n        method: 'PATCH',\n        path: addQueryArgs(`surecart/v1/subscriptions/${this.subscription?.id}/upcoming_period`, {\n          skip_product_group_validation: true,\n          expand: ['period.checkout'],\n        }),\n        data: {\n          purge_pending_update: false,\n        },\n      });\n    } catch (e) {\n      this.error = e?.message || __('Something went wrong', 'surecart');\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  async reactivateSubscription() {\n    try {\n      this.error = '';\n      this.busy = true;\n      await apiFetch({\n        path: `surecart/v1/subscriptions/${this.subscription?.id}/restore`,\n        method: 'PATCH',\n      });\n      this.scRefresh.emit();\n      this.scRequestClose.emit('close-button');\n    } catch (e) {\n      this.error = e?.message || __('Something went wrong', 'surecart');\n    } finally {\n      this.busy = false;\n    }\n  }\n\n  renderLoading() {\n    return (\n      <sc-flex flexDirection=\"column\" style={{ gap: '1em' }}>\n        <sc-skeleton style={{ width: '20%', display: 'inline-block' }}></sc-skeleton>\n        <sc-skeleton style={{ width: '60%', display: 'inline-block' }}></sc-skeleton>\n        <sc-skeleton style={{ width: '40%', display: 'inline-block' }}></sc-skeleton>\n      </sc-flex>\n    );\n  }\n\n  render() {\n    return (\n      <sc-dialog noHeader open={this.open} style={{ '--width': '600px', '--body-spacing': 'var(--sc-spacing-xxx-large)' }}>\n        <sc-dashboard-module\n          loading={this.loading}\n          heading={__('Resubscribe', 'surecart')}\n          class=\"subscription-reactivate\"\n          error={this.error}\n          style={{ '--sc-dashboard-module-spacing': '1em' }}\n        >\n          {this.loading ? (\n            this.renderLoading()\n          ) : (\n            <Fragment>\n              <div slot=\"description\">\n                <sc-alert open type=\"warning\" title={__('Confirm Charge', 'surecart')}>\n                  {__('You will be charged', 'surecart')} {(this.upcomingPeriod?.checkout as Checkout)?.amount_due_display_amount}\n                  {__('immediately for your subscription.', 'surecart')}\n                </sc-alert>\n                <sc-text\n                  style={{\n                    '--font-size': 'var(--sc-font-size-medium)',\n                    '--color': 'var(--sc-input-label-color)',\n                    '--line-height': 'var(--sc-line-height-dense)',\n                    'margin-top': 'var(--sc-spacing-medium)',\n                  }}\n                >\n                  {__('Your subscription will be reactivated and will renew automatically on', 'surecart')} <strong>{this.upcomingPeriod?.end_at_date}</strong>\n                </sc-text>\n              </div>\n              <sc-flex justifyContent=\"flex-start\">\n                <sc-button type=\"primary\" loading={this.busy} disabled={this.busy} onClick={() => this.reactivateSubscription()}>\n                  {__('Yes, Reactivate', 'surecart')}\n                </sc-button>\n                <sc-button disabled={this.busy} style={{ color: 'var(--sc-color-gray-500)' }} type=\"text\" onClick={() => this.scRequestClose.emit()}>\n                  {__('No, Keep Inactive', 'surecart')}\n                </sc-button>\n              </sc-flex>\n            </Fragment>\n          )}\n          {this.busy && <sc-block-ui></sc-block-ui>}\n        </sc-dashboard-module>\n      </sc-dialog>\n    );\n  }\n}\n",":host {\n  display: block;\n  --font-size: var(--font-size, var(--sc-font-size-medium));\n  --font-weight: var(--font-size, var(--sc-font-weight-normal));\n  --line-height: var(--font-size, var(--sc-line-height-medium));\n  --text-align: left;\n  --color: var(--color, inherit);\n}\n\n.text {\n  margin: 0;\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  text-align: var(--text-align);\n  color: var(--sc-stacked-list-row-text-color, var(--color));\n\n  &.is-truncated {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.text--is-rtl {\n  .text {\n    text-align: right;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\n\n@Component({\n  tag: 'sc-text',\n  styleUrl: 'sc-text.scss',\n  shadow: true,\n})\nexport class ScText {\n  @Prop() tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' = 'p';\n  @Prop() truncate: boolean = false;\n\n  render() {\n    const CustomTag = this.tag;\n\n    return (\n      <CustomTag\n        class={{\n          'text': true,\n          'is-truncated': this.truncate,\n          'text--is-rtl':isRtl()\n        }}\n      >\n        <slot />\n      </CustomTag>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}