@zonos/elements 1.1.1 → 1.1.2

package/dist/cjs/zonos-hello-dialog.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"zonos-hello-dialog.entry.cjs.js","mappings":"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","names":["zonosStore","localizationStore","currencyConvertAndFormat","translate","getHasMoreSpaceOnRight","h","Host","classes"],"sources":["src/components/hello/zonos-hello-dialog/zonos-hello-dialog.scss?tag=zonos-hello-dialog&encapsulation=shadow","src/components/hello/zonos-hello-dialog/zonos-hello-dialog.tsx"],"sourcesContent":[":host {\n  .zonos--hello-country-flag {\n    @include zonos--hello-country-flag;\n  }\n\n  .zonos--hello-dialog {\n    position: absolute;\n    background: $amino-surface-color;\n    width: 100vw;\n    max-width: 430px;\n    height: fit-content;\n    max-height: 600px;\n    border-radius: $amino-radius-12;\n    outline: none;\n    box-shadow: $amino-v3-shadow-xxl;\n    overflow-y: auto;\n    top: -2px;\n    right: -2px;\n    opacity: 0;\n    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;\n    transform: scale(0);\n    transform-origin: top right;\n    text-align: center;\n    z-index: 1001;\n\n    &.zonos--hello-dialog-animate-from-left {\n      transform-origin: top left;\n      right: unset;\n      left: -2px;\n    }\n\n    &::-webkit-scrollbar {\n      width: 12px;\n      height: 12px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: #f5f5f5;\n      border-top-right-radius: $amino-radius-12;\n      border-bottom-right-radius: $amino-radius-12;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: #ccc;\n      border: 4px solid transparent;\n      background-clip: content-box;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n      background: #999;\n    }\n\n    .zonos--animate-content {\n      opacity: 0;\n      height: 0;\n      transition: all 0.3s ease-in-out;\n    }\n    .zonos--show-animate-content {\n      opacity: 1;\n      height: 100%;\n    }\n\n    &.zonos--hello-dialog-open {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    .zonos--close-button {\n      position: absolute;\n      right: $amino-space-8;\n      top: $amino-space-8;\n      width: $amino-size-md;\n      height: $amino-size-md;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 10;\n      &:hover {\n        background: $amino-hover-color;\n        border-radius: $amino-radius-6;\n      }\n    }\n\n    .zonos--hello-dialog-content {\n      padding: $amino-space-16;\n\n      .zonos--hello-country-flag {\n        border-radius: $amino-radius-4;\n        width: 32px;\n        height: 24px;\n      }\n    }\n\n    .zonos--flex-message {\n      display: flex;\n      align-items: center;\n      gap: $amino-space-8;\n    }\n\n    &.zonos--hello-dialog-mobile-override {\n      @include zonos--hello-dialog-mobile;\n    }\n    @media (max-width: 768px) {\n      @include zonos--hello-dialog-mobile;\n    }\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { translate } from 'src/components/store/translationStore';\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { currencyConvertAndFormat } from 'src/components/utils/hello/currencyConversion/currencyConvertAndFormat';\nimport { getHasMoreSpaceOnRight } from 'src/components/utils/hello/getHasMoreSpaceOnRight';\nimport type { AppearanceConfig, HelloMobileLocation } from 'src/types';\nimport type { Locale_PageName_Enum } from 'src/types/generated/graphql.frontend.types';\n\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport BagIcon from './assets/bagIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport MessageIcon from './assets/messageIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport MoneyIcon from './assets/moneyIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/removeIcon.svg';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-hello-dialog.scss',\n  tag: 'zonos-hello-dialog',\n})\nexport class ZonosHelloDialog {\n  /**\n   * Whether or not the dialog is open\n   */\n  @Prop() isOpen: boolean = false;\n\n  /**\n   * The function to set the open state\n   * @default () => {}\n   */\n  @Prop() setIsOpen: (isOpen: boolean) => void = () => {};\n\n  /**\n   * Force mobile styling instead of media query and use the passed location value\n   * @default false\n   */\n  @Prop() mobileLocationOverride?: HelloMobileLocation;\n  /**\n   * Force left animation instead of detecting which side has more space\n   * @default false\n   */\n  @Prop() animateFromLeftOverride?: boolean;\n  /**\n   * Override the appearance settings\n   */\n  @Prop() appearanceSettings?: Partial<AppearanceConfig>;\n\n  @State() welcomeMessage: string = 'Welcome to our Demo App!';\n  @State() showCountrySelect: boolean = false;\n\n  /**\n   * Close dialog button click\n   */\n  @Event() closeDialog!: EventEmitter<void>;\n\n  private dialogRef!: HTMLDivElement;\n\n  private clickOutsideDialogHandler = (e: MouseEvent) => {\n    if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {\n      this.setIsOpen(false);\n    }\n  };\n\n  private getCurrentPageEnum = (): Locale_PageName_Enum | null => {\n    switch (zonosStore.currentHelloPage) {\n      case 'home':\n        return 'hello_homepage';\n      case 'cart':\n        return 'hello_cart';\n      case 'productList':\n        return 'hello_item_list';\n      case 'productDetail':\n        return 'hello_item_details';\n\n      default:\n        return null;\n    }\n  };\n\n  private setShowCountrySelect = async (value: boolean) => {\n    this.showCountrySelect = value;\n  };\n\n  @Listen('click', { target: 'document' })\n  globalClickHandler(e: MouseEvent) {\n    this.clickOutsideDialogHandler(e);\n  }\n\n  @Watch('isOpen')\n  isOpenHandler(isOpen: boolean) {\n    if (!isOpen) {\n      void this.setShowCountrySelect(false);\n    }\n  }\n\n  render() {\n    const { countryLandedCost, selectedCountryCode } = localizationStore;\n\n    // Our Robby API spells deminimis wrong here\n    const dutyDeminimis = countryLandedCost?.dutyDeminimus\n      ? currencyConvertAndFormat(countryLandedCost.dutyDeminimus)\n      : null;\n    // If deminimis is undefined or null, assume it's $0\n    const dutyDeMinimisMessage = dutyDeminimis\n      ? `${translate('Spend')} ${dutyDeminimis} ${translate('duty free')}`\n      : translate('Duties will apply to all orders');\n\n    // Our Robby API spells deminimis wrong here\n    const taxDeminimis = countryLandedCost?.vatTaxDeminimus\n      ? currencyConvertAndFormat(countryLandedCost.vatTaxDeminimus)\n      : null;\n    const taxDeMinimisMessage = taxDeminimis\n      ? `${translate('Spend')} ${taxDeminimis} ${translate('tax free')}`\n      : translate('Taxes will apply to all orders');\n\n    const animateLeft =\n      this.animateFromLeftOverride ||\n      (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));\n\n    const { customMessages } = localizationStore;\n    const welcomeMessage = `${translate('Welcome to')} ${\n      zonosStore.organizationName\n    }!`;\n    const defaultMessage =\n      customMessages.find(x => x.pageName === 'hello_default')?.message ||\n      translate(\n        'Know about duties and taxes before you buy. Shop with confidence!',\n      );\n\n    const currentPage = this.getCurrentPageEnum();\n    const filteredMessages = customMessages.filter(\n      x => x.pageName === currentPage,\n    );\n\n    return (\n      <Host class=\"zonos--elements\">\n        <div\n          aria-hidden=\"true\"\n          class={classes([\n            'zonos--hello-dialog',\n            animateLeft && 'zonos--hello-dialog-animate-from-left',\n            !!this.mobileLocationOverride &&\n              'zonos--hello-dialog-mobile-override',\n            this.isOpen && 'zonos--hello-dialog-open',\n          ])}\n          ref={el => el && (this.dialogRef = el)}\n        >\n          <div class=\"zonos--hello-dialog-content\">\n            <zonos-button\n              class=\"zonos--close-button\"\n              icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n              noBackground\n              onClick={() => this.setIsOpen(false)}\n            ></zonos-button>\n\n            {this.showCountrySelect ? (\n              <div>\n                <zonos-country-select\n                  closeCountrySelect={() => this.setShowCountrySelect(false)}\n                ></zonos-country-select>\n              </div>\n            ) : (\n              <div>\n                <zonos-v-stack spacing={24}>\n                  <zonos-country-flag\n                    class=\"zonos--hello-country-flag\"\n                    countryCode={selectedCountryCode}\n                  ></zonos-country-flag>\n\n                  <zonos-v-stack spacing={4}>\n                    <zonos-text type=\"boldSubheader\">\n                      {welcomeMessage}\n                    </zonos-text>\n                    <zonos-text color=\"gray-800\">{defaultMessage}</zonos-text>\n                  </zonos-v-stack>\n\n                  <zonos-v-stack spacing={8}>\n                    <zonos-card spacing=\"12px\">\n                      <zonos-v-stack spacing={8}>\n                        <div class=\"zonos--flex-message\">\n                          <zonos-icon content={BagIcon}></zonos-icon>\n                          <zonos-text>{dutyDeMinimisMessage}</zonos-text>\n                        </div>\n\n                        <div class=\"zonos--flex-message\">\n                          <zonos-icon content={MoneyIcon}></zonos-icon>\n                          <zonos-text>{taxDeMinimisMessage}</zonos-text>\n                        </div>\n                      </zonos-v-stack>\n                    </zonos-card>\n\n                    {filteredMessages.map(x => (\n                      <zonos-custom-message\n                        icon={MessageIcon}\n                        message={x.message}\n                      ></zonos-custom-message>\n                    ))}\n                  </zonos-v-stack>\n                </zonos-v-stack>\n              </div>\n            )}\n          </div>\n\n          {!this.showCountrySelect && (\n            <zonos-hello-dialog-footer\n              appearanceSettings={this.appearanceSettings}\n              setShowCountrySelect={value => this.setShowCountrySelect(value)}\n            ></zonos-hello-dialog-footer>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"zonos-hello-dialog.entry.cjs.js","mappings":"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","names":["zonosStore","localizationStore","currencyConvertAndFormat","translate","getHasMoreSpaceOnRight","h","Host","classes"],"sources":["src/components/hello/zonos-hello-dialog/zonos-hello-dialog.scss?tag=zonos-hello-dialog&encapsulation=shadow","src/components/hello/zonos-hello-dialog/zonos-hello-dialog.tsx"],"sourcesContent":[":host {\n  .zonos--hello-country-flag {\n    @include zonos--hello-country-flag;\n  }\n\n  .zonos--hello-dialog {\n    position: absolute;\n    background: $amino-surface-color;\n    width: 100vw;\n    max-width: 430px;\n    height: fit-content;\n    max-height: 600px;\n    border-radius: $amino-radius-12;\n    outline: none;\n    box-shadow: $amino-v3-shadow-xxl;\n    overflow-y: auto;\n    top: -2px;\n    right: -2px;\n    opacity: 0;\n    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;\n    transform: scale(0);\n    transform-origin: top right;\n    z-index: 1001;\n\n    .zonos--hello-dialog-header {\n      text-align: center;\n    }\n\n    &.zonos--hello-dialog-animate-from-left {\n      transform-origin: top left;\n      right: unset;\n      left: -2px;\n    }\n\n    &::-webkit-scrollbar {\n      width: 12px;\n      height: 12px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: #f5f5f5;\n      border-top-right-radius: $amino-radius-12;\n      border-bottom-right-radius: $amino-radius-12;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: #ccc;\n      border: 4px solid transparent;\n      background-clip: content-box;\n    }\n\n    &::-webkit-scrollbar-thumb:hover {\n      background: #999;\n    }\n\n    .zonos--animate-content {\n      opacity: 0;\n      height: 0;\n      transition: all 0.3s ease-in-out;\n    }\n    .zonos--show-animate-content {\n      opacity: 1;\n      height: 100%;\n    }\n\n    &.zonos--hello-dialog-open {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    .zonos--close-button {\n      position: absolute;\n      right: $amino-space-8;\n      top: $amino-space-8;\n      width: $amino-size-md;\n      height: $amino-size-md;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 10;\n      &:hover {\n        background: $amino-hover-color;\n        border-radius: $amino-radius-6;\n      }\n    }\n\n    .zonos--hello-dialog-content {\n      padding: $amino-space-16;\n\n      .zonos--hello-country-flag {\n        border-radius: $amino-radius-4;\n        width: 32px;\n        height: 24px;\n      }\n    }\n\n    .zonos--flex-message {\n      display: flex;\n      align-items: center;\n      gap: $amino-space-12;\n    }\n\n    &.zonos--hello-dialog-mobile-override {\n      @include zonos--hello-dialog-mobile;\n    }\n    @media (max-width: 768px) {\n      @include zonos--hello-dialog-mobile;\n    }\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { translate } from 'src/components/store/translationStore';\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { currencyConvertAndFormat } from 'src/components/utils/hello/currencyConversion/currencyConvertAndFormat';\nimport { getHasMoreSpaceOnRight } from 'src/components/utils/hello/getHasMoreSpaceOnRight';\nimport type { AppearanceConfig, HelloMobileLocation } from 'src/types';\nimport type { Locale_PageName_Enum } from 'src/types/generated/graphql.frontend.types';\nimport type { RestrictedItem } from 'src/types/hello/RestrictedItem';\n\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport BagIcon from './assets/bagIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport MessageIcon from './assets/messageIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport MoneyIcon from './assets/moneyIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/removeIcon.svg';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-hello-dialog.scss',\n  tag: 'zonos-hello-dialog',\n})\nexport class ZonosHelloDialog {\n  /**\n   * Whether or not the dialog is open\n   */\n  @Prop() isOpen: boolean = false;\n\n  /**\n   * The function to set the open state\n   * @default () => {}\n   */\n  @Prop() setIsOpen: (isOpen: boolean) => void = () => {};\n\n  /**\n   * Force mobile styling instead of media query and use the passed location value\n   * @default false\n   */\n  @Prop() mobileLocationOverride?: HelloMobileLocation;\n  /**\n   * Force left animation instead of detecting which side has more space\n   * @default false\n   */\n  @Prop() animateFromLeftOverride?: boolean;\n  /**\n   * Override the appearance settings\n   */\n  @Prop() appearanceSettings?: Partial<AppearanceConfig>;\n\n  /**\n   * Item restrictions array if any\n   * @default []\n   */\n  @Prop() restrictedItems: RestrictedItem[] = [];\n\n  @State() welcomeMessage: string = 'Welcome to our Demo App!';\n  @State() showCountrySelect: boolean = false;\n\n  /**\n   * Close dialog button click\n   */\n  @Event() closeDialog!: EventEmitter<void>;\n\n  private dialogRef!: HTMLDivElement;\n\n  private clickOutsideDialogHandler = (e: MouseEvent) => {\n    if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {\n      this.setIsOpen(false);\n    }\n  };\n\n  private getCurrentPageEnum = (): Locale_PageName_Enum | null => {\n    switch (zonosStore.currentHelloPage) {\n      case 'home':\n        return 'hello_homepage';\n      case 'cart':\n        return 'hello_cart';\n      case 'productList':\n        return 'hello_item_list';\n      case 'productDetail':\n        return 'hello_item_details';\n\n      default:\n        return null;\n    }\n  };\n\n  private setShowCountrySelect = async (value: boolean) => {\n    this.showCountrySelect = value;\n  };\n\n  @Listen('click', { target: 'document' })\n  globalClickHandler(e: MouseEvent) {\n    this.clickOutsideDialogHandler(e);\n  }\n\n  @Watch('isOpen')\n  isOpenHandler(isOpen: boolean) {\n    if (!isOpen) {\n      void this.setShowCountrySelect(false);\n    }\n  }\n\n  render() {\n    const { countryLandedCost, selectedCountryCode } = localizationStore;\n\n    // Our Robby API spells deminimis wrong here\n    const dutyDeminimis = countryLandedCost?.dutyDeminimus\n      ? currencyConvertAndFormat(countryLandedCost.dutyDeminimus)\n      : null;\n    // If deminimis is undefined or null, assume it's $0\n    const dutyDeMinimisMessage = dutyDeminimis\n      ? `${translate('Spend')} ${dutyDeminimis} ${translate('duty free')}`\n      : translate('Duties will apply to all orders');\n\n    // Our Robby API spells deminimis wrong here\n    const taxDeminimis = countryLandedCost?.vatTaxDeminimus\n      ? currencyConvertAndFormat(countryLandedCost.vatTaxDeminimus)\n      : null;\n    const taxDeMinimisMessage = taxDeminimis\n      ? `${translate('Spend')} ${taxDeminimis} ${translate('tax free')}`\n      : translate('Taxes will apply to all orders');\n\n    const animateLeft =\n      this.animateFromLeftOverride ||\n      (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));\n\n    const { customMessages } = localizationStore;\n    const welcomeMessage = `${translate('Welcome to')} ${\n      zonosStore.organizationName\n    }!`;\n    const defaultMessage =\n      customMessages.find(x => x.pageName === 'hello_default')?.message ||\n      translate(\n        'Know about duties and taxes before you buy. Shop with confidence!',\n      );\n\n    const currentPage = this.getCurrentPageEnum();\n    const filteredMessages = customMessages.filter(\n      x => x.pageName === currentPage,\n    );\n\n    return (\n      <Host class=\"zonos--elements\">\n        <div\n          aria-hidden=\"true\"\n          class={classes([\n            'zonos--hello-dialog',\n            animateLeft && 'zonos--hello-dialog-animate-from-left',\n            !!this.mobileLocationOverride &&\n              'zonos--hello-dialog-mobile-override',\n            this.isOpen && 'zonos--hello-dialog-open',\n          ])}\n          ref={el => el && (this.dialogRef = el)}\n        >\n          <div class=\"zonos--hello-dialog-content\">\n            <zonos-button\n              class=\"zonos--close-button\"\n              icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n              noBackground\n              onClick={() => this.setIsOpen(false)}\n            ></zonos-button>\n\n            {this.showCountrySelect ? (\n              <div>\n                <zonos-country-select\n                  closeCountrySelect={() => this.setShowCountrySelect(false)}\n                ></zonos-country-select>\n              </div>\n            ) : (\n              <div>\n                <zonos-v-stack spacing={24}>\n                  <zonos-country-flag\n                    class=\"zonos--hello-country-flag\"\n                    countryCode={selectedCountryCode}\n                  ></zonos-country-flag>\n\n                  <zonos-v-stack class=\"zonos--hello-dialog-header\" spacing={4}>\n                    <zonos-text type=\"boldSubheader\">\n                      {welcomeMessage}\n                    </zonos-text>\n                    <zonos-text color=\"gray-800\">{defaultMessage}</zonos-text>\n                  </zonos-v-stack>\n\n                  <zonos-v-stack spacing={8}>\n                    {this.restrictedItems.map(\n                      item =>\n                        item && (\n                          <zonos-banner bannerTitle={item.name} intent=\"error\">\n                            {item.itemRestrictions?.map(x => (\n                              <zonos-text color=\"red-800\">{x?.note}</zonos-text>\n                            ))}\n                          </zonos-banner>\n                        ),\n                    )}\n\n                    <zonos-card spacing=\"12px\">\n                      <zonos-v-stack spacing={12}>\n                        <div class=\"zonos--flex-message\">\n                          <zonos-icon content={BagIcon}></zonos-icon>\n                          <zonos-text>{dutyDeMinimisMessage}</zonos-text>\n                        </div>\n\n                        <div class=\"zonos--flex-message\">\n                          <zonos-icon content={MoneyIcon}></zonos-icon>\n                          <zonos-text>{taxDeMinimisMessage}</zonos-text>\n                        </div>\n                      </zonos-v-stack>\n                    </zonos-card>\n\n                    {filteredMessages.map(x => (\n                      <zonos-custom-message\n                        icon={MessageIcon}\n                        message={x.message}\n                      ></zonos-custom-message>\n                    ))}\n                  </zonos-v-stack>\n                </zonos-v-stack>\n              </div>\n            )}\n          </div>\n\n          {!this.showCountrySelect && (\n            <zonos-hello-dialog-footer\n              appearanceSettings={this.appearanceSettings}\n              setShowCountrySelect={value => this.setShowCountrySelect(value)}\n            ></zonos-hello-dialog-footer>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/zonos-hello.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9542d2e7.js');
-const zonosStore = require('./zonosStore-960e5542.js');
-const localization = require('./localization-f6a1b679.js');
+const zonosStore = require('./zonosStore-d9cdaec6.js');
+const localization = require('./localization-d510574c.js');
 const classes = require('./classes-b7918f56.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-2855491b.js');
 
@@ -344,12 +344,131 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-const zonosHelloCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:inline-block}:host .zonos--hello-wrapper{position:relative}:host .zonos--hello-wrapper .zonos--hello-dialog-wrapper-mobile-override{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:0}@media (max-width: 768px){:host .zonos--hello-wrapper{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:0}}:host .zonos--hello-widget{-webkit-transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);padding:6px;border-radius:30px;background:var(--amino-page-background);font-size:var(--amino-font-size-s);border:var(--amino-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;z-index:1000}:host .zonos--hello-widget>.zonos--hello-message{-ms-flex-order:0;order:0;width:100%;max-width:0;height:100%;white-space:nowrap;-webkit-transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);overflow:hidden;color:var(--amino-text-color);position:absolute;background:var(--amino-page-background);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-top-left-radius:30px;border-bottom-left-radius:30px;left:0;-webkit-transform:translateX(calc(-100% + var(--amino-space-16)));transform:translateX(calc(-100% + var(--amino-space-16)));width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-top:var(--amino-border);border-bottom:var(--amino-border)}:host .zonos--hello-widget.zonos--hello-show-peek-message{max-width:100vw;width:100%}:host .zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{max-width:100vw;padding:0 6px;padding-right:var(--amino-space-16);border:var(--amino-border)}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:0;border-bottom-left-radius:0}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left)>.zonos--hello-message{border-right:none}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:0;border-bottom-right-radius:0}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{border-left:0}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:var(--amino-space-16);padding-right:6px;border-left:none}:host .zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-ms-flex-order:1;order:1;-webkit-transform:translateX(calc(100% - var(--amino-space-16)));transform:translateX(calc(100% - var(--amino-space-16)));right:0;left:auto;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:30px;border-bottom-right-radius:30px}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center}@media (max-width: 768px){:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:24px}}@media (max-width: 768px){:host .zonos--hello-widget{position:fixed;bottom:var(--amino-space-32);right:var(--amino-space-32);border-radius:var(--amino-radius-4);padding:var(--amino-space-4);border:1px solid transparent}:host .zonos--hello-widget.zonos--hello-widget-left{left:var(--amino-space-32);right:auto}:host .zonos--hello-widget.zonos--hello-widget-top{bottom:auto;top:var(--amino-space-32)}:host .zonos--hello-widget>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-widget.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:var(--amino-radius-4);border-bottom-left-radius:var(--amino-radius-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:var(--amino-radius-4);border-bottom-right-radius:var(--amino-radius-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:var(--amino-space-8);padding-right:var(--amino-space-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--amino-radius-4);padding-right:6px;border:none}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper{border-radius:var(--amino-radius-4)}}:host .zonos--hello-mobile-override.zonos--hello-widget{position:fixed;bottom:var(--amino-space-32);right:var(--amino-space-32);border-radius:var(--amino-radius-4);padding:var(--amino-space-4);border:1px solid transparent}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-left{left:var(--amino-space-32);right:auto}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-top{bottom:auto;top:var(--amino-space-32)}:host .zonos--hello-mobile-override.zonos--hello-widget>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:var(--amino-radius-4);border-bottom-left-radius:var(--amino-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:var(--amino-radius-4);border-bottom-right-radius:var(--amino-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:var(--amino-space-8);padding-right:var(--amino-space-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--amino-radius-4);padding-right:6px;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag-wrapper{border-radius:var(--amino-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:24px}";
+const checkItemRestrictions = async ({ items, shipFrom, shipTo, }) => {
+  var _a;
+  const url = `${"https://v1.route.js.zonos.com"}/api/check-item-restrictions`;
+  const body = {
+    items,
+    shipFrom,
+    shipTo,
+  };
+  const { errors, json } = await localization.handleFetch(url, { body, method: 'POST' });
+  if (errors.length || !json) {
+    localization.logError(`Error fetching item restrictions: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
+    return [];
+  }
+  return json.filter(Boolean);
+};
+
+const detectItemRestrictions = async (newProducts) => {
+  if (!newProducts.length) {
+    return [];
+  }
+  const { selectedCountryCode } = localization.localizationStore;
+  if (!selectedCountryCode) {
+    localization.logError('Hello Could not check item restrictions - No country code selected');
+    return [];
+  }
+  const items = newProducts.map(product => ({
+    description: product.description,
+    name: product.title,
+  }));
+  const restrictedItems = await checkItemRestrictions({
+    items: items,
+    shipFrom: 'AD',
+    shipTo: selectedCountryCode,
+  });
+  const restrictedItemsWithName = restrictedItems.map(item => {
+    var _a;
+    const name = ((_a = items.filter(x => x.description === item.itemDescription).find(Boolean)) === null || _a === void 0 ? void 0 : _a.name) || '';
+    return Object.assign(Object.assign({}, item), { name });
+  });
+  return restrictedItemsWithName;
+};
+
+const getCurrentHelloLocalePage = () => {
+  const { href } = window.location;
+  const { cartUrlPattern, homepageUrlPattern, productDetailUrlPattern, productListUrlPattern, } = zonosStore.zonosStore.helloSettings;
+  // The 'if' statements are sorted by most specific to least specific to help with regex matching
+  if (cartUrlPattern && new RegExp(cartUrlPattern).test(href)) {
+    return 'cart';
+  }
+  if (productDetailUrlPattern &&
+    new RegExp(productDetailUrlPattern).test(href)) {
+    return 'productDetail';
+  }
+  if (productListUrlPattern && new RegExp(productListUrlPattern).test(href)) {
+    return 'productList';
+  }
+  if (homepageUrlPattern && new RegExp(homepageUrlPattern).test(href)) {
+    return 'home';
+  }
+  return '';
+};
+
+const getProductsOnPage = () => {
+  var _a, _b;
+  const { productAddToCartElementSelector, productDescriptionElementSelector, productTitleElementSelector, restrictionBehavior, } = zonosStore.zonosStore.helloSettings;
+  if (!productTitleElementSelector || !productDescriptionElementSelector) {
+    localization.logError(`Hello Could not check item restrictions - must provide title and description selectors.`);
+  }
+  const titleNodes = (productTitleElementSelector &&
+    localization.isValidSelector(productTitleElementSelector) &&
+    document.querySelectorAll(productTitleElementSelector)) ||
+    [];
+  const descriptionNodes = (productDescriptionElementSelector &&
+    localization.isValidSelector(productDescriptionElementSelector) &&
+    document.querySelectorAll(productDescriptionElementSelector)) ||
+    [];
+  if (titleNodes.length !== descriptionNodes.length) {
+    // If the title and description selectors don't match, kill item restrictions altogether
+    localization.logError('Hello Could not check item restrictions - Title and description selectors do not match');
+    return [];
+  }
+  const shouldDisableCart = restrictionBehavior === 'RESTRICT_AND_BLOCK';
+  const cartButtonNodes = (shouldDisableCart &&
+    productAddToCartElementSelector &&
+    localization.isValidSelector(productAddToCartElementSelector) &&
+    document.querySelectorAll(productAddToCartElementSelector)) ||
+    [];
+  if (shouldDisableCart && cartButtonNodes.length !== descriptionNodes.length) {
+    // If the "add to cart" selectors don't match, log the error and continue
+    localization.logError('Hello could not disable "Add to cart" buttons - Title and add to cart selectors do not match');
+  }
+  const mergedElements = [];
+  for (let i = 0; i < titleNodes.length; i++) {
+    const titleNode = titleNodes[i];
+    const descriptionNode = descriptionNodes[i];
+    const cartButtonNode = cartButtonNodes[i];
+    if (titleNode && descriptionNode) {
+      const element = {
+        cartButtonNode: cartButtonNode || null,
+        description: ((_a = descriptionNode.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
+        title: ((_b = titleNode.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '',
+      };
+      mergedElements.push(element);
+    }
+  }
+  return mergedElements;
+};
 
+const zonosHelloCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:inline-block}:host .zonos--hello-wrapper{position:relative}:host .zonos--hello-wrapper .zonos--hello-dialog-wrapper-mobile-override{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}@media (max-width: 768px){:host .zonos--hello-wrapper{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}}:host .zonos--hello-widget{-webkit-transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);padding:6px;border-radius:30px;background:var(--amino-page-background);font-size:var(--amino-font-size-s);border:var(--amino-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;z-index:1000}:host .zonos--hello-widget>.zonos--hello-message{-ms-flex-order:0;order:0;width:100%;max-width:0;height:100%;white-space:nowrap;-webkit-transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);overflow:hidden;color:var(--amino-text-color);position:absolute;background:var(--amino-page-background);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-top-left-radius:30px;border-bottom-left-radius:30px;left:0;-webkit-transform:translateX(calc(-100% + var(--amino-space-16)));transform:translateX(calc(-100% + var(--amino-space-16)));width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-top:var(--amino-border);border-bottom:var(--amino-border)}:host .zonos--hello-widget.zonos--hello-has-restrictions{background:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host .zonos--hello-widget.zonos--hello-has-restrictions>.zonos--hello-message{background:var(--amino-red-100);color:var(--amino-red-800);font-weight:500}:host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:1px solid var(--amino-red-200)}:host .zonos--hello-widget.zonos--hello-show-peek-message{max-width:100vw;width:100%}:host .zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{max-width:100vw;padding:0 6px;padding-right:var(--amino-space-16);border:var(--amino-border)}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:0;border-bottom-left-radius:0}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left)>.zonos--hello-message{border-right:none}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:0;border-bottom-right-radius:0}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{border-left:0}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:var(--amino-space-16);padding-right:6px;border-left:none}:host .zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-ms-flex-order:1;order:1;-webkit-transform:translateX(calc(100% - var(--amino-space-16)));transform:translateX(calc(100% - var(--amino-space-16)));right:0;left:auto;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:30px;border-bottom-right-radius:30px}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center}@media (max-width: 768px){:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:24px}}@media (max-width: 768px){:host .zonos--hello-widget{position:fixed;bottom:var(--amino-space-32);right:var(--amino-space-32);border-radius:var(--amino-radius-4);padding:var(--amino-space-4);border:1px solid transparent}:host .zonos--hello-widget.zonos--hello-widget-left{left:var(--amino-space-32);right:auto}:host .zonos--hello-widget.zonos--hello-widget-top{bottom:auto;top:var(--amino-space-32)}:host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:none}:host .zonos--hello-widget>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-widget.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:var(--amino-radius-4);border-bottom-left-radius:var(--amino-radius-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:var(--amino-radius-4);border-bottom-right-radius:var(--amino-radius-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:var(--amino-space-8);padding-right:var(--amino-space-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--amino-radius-4);padding-right:6px;border:none}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper{border-radius:var(--amino-radius-4)}}:host .zonos--hello-mobile-override.zonos--hello-widget{position:fixed;bottom:var(--amino-space-32);right:var(--amino-space-32);border-radius:var(--amino-radius-4);padding:var(--amino-space-4);border:1px solid transparent}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-left{left:var(--amino-space-32);right:auto}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-top{bottom:auto;top:var(--amino-space-32)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:none}:host .zonos--hello-mobile-override.zonos--hello-widget>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:var(--amino-radius-4);border-bottom-left-radius:var(--amino-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:var(--amino-radius-4);border-bottom-right-radius:var(--amino-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:var(--amino-space-8);padding-right:var(--amino-space-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--amino-radius-4);padding-right:6px;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag-wrapper{border-radius:var(--amino-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:24px}";
+
+const PEEK_MESSAGE_DELAY_MS = 3000;
+const RESIZE_DEBOUNCE_DELAY_MS = 500;
 const ZonosHello = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.getHelloPeekMessage = () => {
+      const isRestrictionPage = zonosStore.zonosStore.currentHelloPage === 'productDetail' ||
+        zonosStore.zonosStore.currentHelloPage === 'productList';
+      if (isRestrictionPage && this.allRestrictedItems.length) {
+        const clickMessage = localization.translate('click to learn more');
+        const restrictMessage = zonosStore.zonosStore.currentHelloPage === 'productDetail'
+          ? localization.translate('Restricted item')
+          : localization.translate('Restricted items found');
+        return `${restrictMessage} - ${clickMessage}`;
+      }
       switch (zonosStore.zonosStore.currentHelloPage) {
         case 'cart':
           return localization.translate(`Prepay duties and taxes at checkout`);
@@ -365,16 +484,116 @@ const ZonosHello = class {
         this.showPeekMessage = true;
       }
     };
+    this.getNewItemRestrictions = async (newProducts) => {
+      const isRestrictionPage = zonosStore.zonosStore.currentHelloPage === 'productDetail' ||
+        zonosStore.zonosStore.currentHelloPage === 'productList';
+      // Only run detectItemRestrictions on product pages if the restrictionBehavior is not DISABLED
+      if (!isRestrictionPage ||
+        zonosStore.zonosStore.helloSettings.restrictionBehavior === 'DISABLED') {
+        return [];
+      }
+      const newRestrictions = await detectItemRestrictions(newProducts);
+      return newRestrictions;
+    };
+    this.triggerShowPeekMessage = () => {
+      this.peekMessage = this.getHelloPeekMessage();
+      const { peekMessageBehavior, peekMessageDelay } = zonosStore.zonosStore.helloSettings;
+      // peek message delay is passed in seconds, but setTimeout expects milliseconds
+      const peekMessageDelayToUse = peekMessageDelay * 1000;
+      if (peekMessageBehavior === 'ENABLED') {
+        setTimeout(() => {
+          this.enableShowPeekMessage();
+          setTimeout(() => {
+            this.showPeekMessage = false;
+          }, PEEK_MESSAGE_DELAY_MS);
+        }, peekMessageDelayToUse);
+      }
+    };
+    this.disableAddToCartButtons = () => {
+      // Remove disabled attribute from all "add to cart" buttons
+      if (this.productsOnPage.length) {
+        this.productsOnPage.forEach(product => {
+          var _a, _b;
+          const isRestricted = this.allRestrictedItems.some(item => item.itemDescription === product.description);
+          // if a product description matches a restrictedItems itemDescription, then disable the add to cart button. Otherwise, enable it.
+          if (isRestricted) {
+            (_a = product.cartButtonNode) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'disabled');
+          }
+          else {
+            (_b = product.cartButtonNode) === null || _b === void 0 ? void 0 : _b.removeAttribute('disabled');
+          }
+        });
+      }
+    };
+    this.handleItemRestrictions = async () => {
+      this.productsOnPage = getProductsOnPage();
+      const newProducts = this.productsOnPage.filter(product => !this.allFoundProducts.some(foundProduct => foundProduct.title === product.title));
+      const newRestrictions = await this.getNewItemRestrictions(newProducts);
+      this.allRestrictedItems.push(...newRestrictions);
+      this.allFoundProducts.push(...newProducts);
+      this.disableAddToCartButtons();
+    };
+    this.reloadHelloData = async () => {
+      await this.handleItemRestrictions();
+      this.triggerShowPeekMessage();
+      void this.displayCurrency();
+    };
+    this.handleProductCountChange = debounce_1(() => {
+      const { productTitleElementSelector } = zonosStore.zonosStore.helloSettings;
+      if (productTitleElementSelector) {
+        const allProductsOnPage = getProductsOnPage();
+        if (this.allFoundProducts.length !== allProductsOnPage.length &&
+          window.location.href === this.initialUrl) {
+          // if allFoundProducts length is 0 (first render or no products), kill item restriction process as initial restrictions are handled in updateHelloOnPageChange
+          if (!this.allFoundProducts.length) {
+            return;
+          }
+          void this.reloadHelloData();
+        }
+      }
+    }, 1000);
+    this.watchProductCountChange = () => {
+      const observer = new MutationObserver(this.handleProductCountChange);
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    };
+    this.updateHelloOnPageChange = () => {
+      // If the product count changes on the same url (loading more products), update the peek message and item restrictions
+      this.watchProductCountChange();
+      // Check url change on interval. If changed, update the peek message and item restrictions
+      setInterval(() => {
+        if (window.location.href !== this.initialUrl) {
+          const prevUrl = this.initialUrl && new URL(this.initialUrl);
+          const initialZonosCountry = prevUrl && prevUrl.searchParams.get('zonosCountry');
+          // If the zonosCountry url param changes, reset current item restriction tracking
+          if (initialZonosCountry !== localization.localizationStore.selectedCountryCode) {
+            this.allFoundProducts = [];
+            this.allRestrictedItems = [];
+            this.productsOnPage = [];
+          }
+          this.initialUrl = window.location.href;
+          zonosStore.zonosStore.currentHelloPage = getCurrentHelloLocalePage();
+          const currentUrl = new URL(window.location.href);
+          const zonosCountry = currentUrl.searchParams.get('zonosCountry');
+          if (!zonosCountry) {
+            localization.setZonosCountryUrlParam(localization.localizationStore.selectedCountryCode);
+            return;
+          }
+          void this.reloadHelloData();
+        }
+      }, 1000);
+    };
     this.changeShowDialog = (value) => {
       this.showDialog = value;
     };
     this.shouldAnimateLeftDesktop = () => {
-      // Get element position (relative = desktop, fixed = mobile)
+      // Get Hello position (relative = desktop, fixed = mobile)
       const elPosition = this.helloRef && getComputedStyle(this.helloRef).position;
       // If relative position, determine if peek message should animate left or right. Mobile is pre-determined.
       if (this.helloRef && elPosition === 'relative') {
         const hasMoreSpaceOnRight = getHasMoreSpaceOnRight.getHasMoreSpaceOnRight(this.helloRef);
-        // Determine peek message direction
         return hasMoreSpaceOnRight;
       }
     };
@@ -385,26 +604,19 @@ const ZonosHello = class {
     this.zonosStoreHelloSettings = zonosStore.zonosStore.helloSettings;
     this.showDialog = false;
     this.peekMessage = '';
+    this.initialUrl = '';
+    this.allRestrictedItems = [];
+    this.allFoundProducts = [];
+    this.productsOnPage = [];
   }
-  componentDidLoad() {
-    const initInterval = setInterval(() => {
+  componentWillLoad() {
+    const initInterval = setInterval(async () => {
       if (!this.helloRef) {
         return;
       }
       if (zonosStore.zonosStore.loadedConfig) {
         this.helloRef.setAttribute('data-zonos-hello-loaded', '');
-        this.peekMessage = this.getHelloPeekMessage();
-        const { peekMessageBehavior, peekMessageDelay } = zonosStore.zonosStore.helloSettings;
-        // peek message delay is passed in seconds, but setTimeout expects milliseconds
-        const peekMessageDelayToUse = peekMessageDelay * 1000;
-        if (peekMessageBehavior === 'ENABLED') {
-          setTimeout(() => {
-            this.enableShowPeekMessage();
-            setTimeout(() => {
-              this.showPeekMessage = false;
-            }, 3000);
-          }, peekMessageDelayToUse);
-        }
+        this.updateHelloOnPageChange();
         clearInterval(initInterval);
       }
     }, 100);
@@ -443,10 +655,10 @@ const ZonosHello = class {
     localization.currencyFormat(value);
   }
   handleResize() {
-    debounce_1(this.render.bind(this), 500);
+    debounce_1(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
   }
   render() {
-    var _a;
+    var _a, _b;
     const isExcludedUrl = (_a = zonosStore.zonosStore.helloSettings.excludedUrlPatterns) === null || _a === void 0 ? void 0 : _a.some(pattern => new RegExp(pattern).test(window.location.href));
     if (isExcludedUrl) {
       localization.log('Hello is excluded on this url', 'warn');
@@ -462,6 +674,7 @@ const ZonosHello = class {
     const isOnTop = mobileLocation.includes('TOP');
     const appearanceSettings = zonosStore.mergeConfig(zonosStore.zonosStore.appearance, this.appearanceSettingsOverride);
     const { theme } = appearanceSettings;
+    const restrictedItemsOnPage = (_b = this.allRestrictedItems) === null || _b === void 0 ? void 0 : _b.filter(product => this.productsOnPage.some(restriction => restriction.description === product.itemDescription));
     return (index.h(index.Host, { class: "zonos--hello zonos--elements", "data-theme": theme }, selectedCountryCode && (index.h("div", { class: "zonos--hello-wrapper" }, index.h("button", { class: classes.classes([
         'zonos--hello-widget',
         this.showPeekMessage && 'zonos--hello-show-peek-message',
@@ -469,13 +682,15 @@ const ZonosHello = class {
         isOnLeft &&
           'zonos--hello-widget-left zonos--hello-widget-animate-from-left',
         isOnTop && 'zonos--hello-widget-top',
+        !!this.allRestrictedItems.length &&
+          'zonos--hello-has-restrictions',
       ]), onClick: () => {
         this.changeShowDialog(!this.showDialog);
       }, onMouseEnter: () => this.enableShowPeekMessage(), onMouseLeave: () => (this.showPeekMessage = false), ref: el => el && (this.helloRef = el) }, index.h("span", { class: "zonos--hello-message" }, this.peekMessage), selectedCountryCode && (index.h("div", { class: "zonos--hello-country-flag-wrapper" }, index.h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode })))), index.h("div", { class: classes.classes([
         'zonos--hello-dialog-wrapper',
         this.mobileLocationOverride &&
           'zonos--hello-dialog-wrapper-mobile-override',
-      ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, index.h("zonos-hello-dialog", { animateFromLeftOverride: this.animateFromLeftOverride, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, setIsOpen: this.changeShowDialog }))))));
+      ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, index.h("zonos-hello-dialog", { animateFromLeftOverride: this.animateFromLeftOverride, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, restrictedItems: restrictedItemsOnPage, setIsOpen: this.changeShowDialog }))))));
   }
 };
 ZonosHello.style = zonosHelloCss;