npm - @knocklabs/react - Versions diffs - 0.7.10 → 0.7.12 - Mend

@knocklabs/react 0.7.10 → 0.7.12

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

Files changed (28) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,18 @@
 # Changelog
+## 0.7.12
+### Patch Changes
+- Updated dependencies [dbbbaf7]
+  - @knocklabs/react-core@0.6.11
+## 0.7.11
+### Patch Changes
+- ca3cf14: Support an optional image field in Modal and Card components
 ## 0.7.10
 ### Patch Changes

package/dist/cjs/index.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--knock-border-style-solid: solid;--knock-border-style-dashed: dashed;--knock-transparent: transparent;--knock-white: #fff;--knock-black: #000;--knock-alpha-white-1: #ffffff0d;--knock-alpha-white-2: #ffffff1a;--knock-alpha-white-3: #ffffff26;--knock-alpha-white-4: #fff3;--knock-alpha-white-5: #ffffff4d;--knock-alpha-white-6: #fff6;--knock-alpha-white-7: #ffffff80;--knock-alpha-white-8: #fff9;--knock-alpha-white-9: #ffffffb3;--knock-alpha-white-10: #fffc;--knock-alpha-white-11: #ffffffe6;--knock-alpha-white-12: #fffffff2;--knock-alpha-black-1: #0000000d;--knock-alpha-black-2: #0000001a;--knock-alpha-black-3: #00000026;--knock-alpha-black-4: #0003;--knock-alpha-black-5: #0000004d;--knock-alpha-black-6: #0006;--knock-alpha-black-7: #00000080;--knock-alpha-black-8: #0009;--knock-alpha-black-9: #000000b3;--knock-alpha-black-10: #000c;--knock-alpha-black-11: #000000e6;--knock-alpha-black-12: #000000f2;--knock-rounded-0: 0px;--knock-rounded-1: .125rem;--knock-rounded-2: .25rem;--knock-rounded-3: .375rem;--knock-rounded-4: .5rem;--knock-rounded-5: .75rem;--knock-rounded-6: 1rem;--knock-rounded-full: 9999px;--knock-shadow-0: 0px 0px 0px 0px #0000;--knock-shadow-1: 0px 5px 2px 0px #1c202403, 0px 3px 2px 0px #1c202408, 0px 1px 1px 0px #1c20240d, 0px 0px 1px 0px #1c20240f;--knock-shadow-2: 0px 16px 7px 0px #1c202403, 0px 9px 6px 0px #1c202408, 0px 4px 4px 0px #1c20240d, 0px 1px 2px 0px #1c20240f;--knock-shadow-3: 0px 29px 12px 0px #1c202403, 0px 16px 10px 0px #1c202408, 0px 7px 7px 0px #1c20240d, 0px 2px 4px 0px #1c20240f;--knock-shadow-inner: 0px 5px 2px 0px #1c202403 inset, 0px 3px 2px 0px #1c202408 inset, 0px 1px 1px 0px #1c20240d inset, 0px 0px 1px 0px #1c20240f inset;--knock-spacing-0: 0px;--knock-spacing-1: .25rem;--knock-spacing-2: .5rem;--knock-spacing-3: .75rem;--knock-spacing-4: 1rem;--knock-spacing-5: 1.25rem;--knock-spacing-6: 1.5rem;--knock-spacing-7: 1.75rem;--knock-spacing-8: 2rem;--knock-spacing-9: 2.25rem;--knock-spacing-10: 2.5rem;--knock-spacing-11: 2.75rem;--knock-spacing-12: 3rem;--knock-spacing-14: 3.5rem;--knock-spacing-16: 4rem;--knock-spacing-20: 5rem;--knock-spacing-24: 6rem;--knock-spacing-28: 7rem;--knock-spacing-32: 8rem;--knock-spacing-36: 9rem;--knock-spacing-40: 10rem;--knock-spacing-44: 11rem;--knock-spacing-48: 12rem;--knock-spacing-52: 13rem;--knock-spacing-56: 14rem;--knock-spacing-60: 15rem;--knock-spacing-64: 16rem;--knock-spacing-72: 18rem;--knock-spacing-80: 20rem;--knock-spacing-96: 24rem;--knock-spacing-140: 35rem;--knock-spacing-160: 40rem;--knock-spacing-px: 1px;--knock-spacing-full: 100%;--knock-spacing-auto: auto;--knock-family-sans: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;--knock-family-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;--knock-leading-0: 1rem;--knock-leading-1: 1rem;--knock-leading-2: 1.25rem;--knock-leading-3: 1.5rem;--knock-leading-4: 1.75rem;--knock-leading-5: 1.75rem;--knock-leading-6: 2rem;--knock-leading-7: 2.25rem;--knock-leading-8: 2.5rem;--knock-leading-9: 3.5rem;--knock-leading-code-0: 1rem;--knock-leading-code-1: 1rem;--knock-leading-code-2: 1.25rem;--knock-leading-code-3: 1.5rem;--knock-leading-code-4: 1.75rem;--knock-leading-code-5: 1.75rem;--knock-leading-code-6: 2rem;--knock-leading-code-7: 2.25rem;--knock-leading-code-8: 2.5rem;--knock-leading-code-9: 3rem;--knock-tracking-0: .25%;--knock-tracking-1: .25%;--knock-tracking-2: 0;--knock-tracking-3: 0;--knock-tracking-4: -.25%;--knock-tracking-5: -.5%;--knock-tracking-6: -.625%;--knock-tracking-7: -.75%;--knock-tracking-8: -1%;--knock-tracking-9: -2.5%;--knock-text-0: .6875rem;--knock-text-1: .75rem;--knock-text-2: .875rem;--knock-text-3: 1rem;--knock-text-4: 1.125rem;--knock-text-5: 1.25rem;--knock-text-6: 1.5rem;--knock-text-7: 1.875rem;--knock-text-8: 2.25rem;--knock-text-9: 3rem;--knock-text-code-0: .625rem;--knock-text-code-1: .688rem;--knock-text-code-2: .812rem;--knock-text-code-4: 1.062rem;--knock-text-code-5: 1.188rem;--knock-text-code-6: 1.438rem;--knock-text-code-7: 1.75rem;--knock-text-code-8: 2.125rem;--knock-text-code-9: 2.875rem;--knock-weight-regular: 400;--knock-weight-medium: 500;--knock-weight-semi-bold: 600;--knock-breakpoint-sm: 640px;--knock-breakpoint-md: 768px;--knock-breakpoint-lg: 1024px;--knock-breakpoint-xl: 1280px;--knock-breakpoint-2xl: 1536px;--knock-zIndex-hidden: -1;--knock-zIndex-base: 0;--knock-zIndex-auto: auto;--knock-zIndex-dropdown: 1000;--knock-zIndex-sticky: 1100;--knock-zIndex-banner: 1200;--knock-zIndex-overlay: 1300;--knock-zIndex-modal: 1400;--knock-zIndex-popover: 1500;--knock-zIndex-skipLink: 1600;--knock-zIndex-toast: 1700;--knock-zIndex-tooltip: 1800}[data-knock-color-mode=light]{--knock-surface-1: #fff;--knock-surface-2: #f9f9f8;--knock-gray-1: #fcfcfd;--knock-gray-2: #f9f9fb;--knock-gray-3: #f0f0f3;--knock-gray-4: #e8e8ec;--knock-gray-5: #e0e1e6;--knock-gray-6: #d9d9e0;--knock-gray-7: #cdced6;--knock-gray-8: #b9bbc6;--knock-gray-9: #8b8d98;--knock-gray-10: #80838d;--knock-gray-11: #60646c;--knock-gray-12: #1c2024;--knock-beige-1: #fdfdfc;--knock-beige-2: #f9f9f8;--knock-beige-3: #f1f0ef;--knock-beige-4: #e9e8e6;--knock-beige-5: #e2e1de;--knock-beige-6: #dad9d6;--knock-beige-7: #cfceca;--knock-beige-8: #bcbbb5;--knock-beige-9: #8d8d86;--knock-beige-10: #82827c;--knock-beige-11: #63635e;--knock-beige-12: #21201c;--knock-orange-1: #fffcfc;--knock-orange-2: #fff8f7;--knock-orange-3: #feebe7;--knock-orange-4: #ffdcd3;--knock-orange-5: #ffcdc2;--knock-orange-6: #fdbdaf;--knock-orange-7: #f5a898;--knock-orange-8: #ec8e7b;--knock-orange-9: #e54d2e;--knock-orange-10: #dd4425;--knock-orange-11: #d13415;--knock-orange-12: #5c271f;--knock-green-1: #fbfefd;--knock-green-2: #f4fbf7;--knock-green-3: #e6f7ed;--knock-green-4: #d6f1e3;--knock-green-5: #c3e9d7;--knock-green-6: #acdec8;--knock-green-7: #8bceb6;--knock-green-8: #56ba9f;--knock-green-9: #29a383;--knock-green-10: #26997b;--knock-green-11: #208368;--knock-green-12: #1d3b31;--knock-yellow-1: #fefdfb;--knock-yellow-2: #fefbe9;--knock-yellow-3: #fff7c2;--knock-yellow-4: #ffee9c;--knock-yellow-5: #fbe577;--knock-yellow-6: #f3d673;--knock-yellow-7: #e9c162;--knock-yellow-8: #f3d673;--knock-yellow-9: #ffc53d;--knock-yellow-10: #ffba18;--knock-yellow-11: #ab6400;--knock-yellow-12: #4f3422;--knock-blue-1: #fdfdfe;--knock-blue-2: #f7f9ff;--knock-blue-3: #edf2fe;--knock-blue-4: #e1e9ff;--knock-blue-5: #d2deff;--knock-blue-6: #c1d0ff;--knock-blue-7: #abbdf9;--knock-blue-8: #8da4ef;--knock-blue-9: #3e63dd;--knock-blue-10: #3358d4;--knock-blue-11: #3a5bc7;--knock-blue-12: #1f2d5c;--knock-red-1: #fffcfd;--knock-red-2: #fff7f8;--knock-red-3: #feeaed;--knock-red-4: #ffdce1;--knock-red-5: #ffced6;--knock-red-6: #f8bfc8;--knock-red-7: #efacb8;--knock-red-8: #e592a3;--knock-red-9: #e54666;--knock-red-10: #dc3b5d;--knock-red-11: #ca244d;--knock-red-12: #64172b;--knock-purple-1: #fdfcfe;--knock-purple-2: #faf8ff;--knock-purple-3: #f4f0fe;--knock-purple-4: #ebe4ff;--knock-purple-5: #e1d9ff;--knock-purple-6: #d4cafe;--knock-purple-7: #c2b5f5;--knock-purple-8: #aa99ec;--knock-purple-9: #654dc4;--knock-purple-10: #654dc4;--knock-purple-11: #6550b9;--knock-purple-12: #2f265f}[data-knock-color-mode=dark]{--knock-surface-1: #18191b;--knock-surface-2: #111110;--knock-gray-1: #111113;--knock-gray-2: #18191b;--knock-gray-3: #212225;--knock-gray-4: #272a2d;--knock-gray-5: #2e3135;--knock-gray-6: #363a3f;--knock-gray-7: #43484e;--knock-gray-8: #5a6169;--knock-gray-9: #696e77;--knock-gray-10: #777b84;--knock-gray-11: #b0b4ba;--knock-gray-12: #edeef0;--knock-beige-1: #111110;--knock-beige-2: #191918;--knock-beige-3: #222221;--knock-beige-4: #2a2a28;--knock-beige-5: #31312e;--knock-beige-6: #3b3a37;--knock-beige-7: #494844;--knock-beige-8: #62605b;--knock-beige-9: #6f6d66;--knock-beige-10: #7c7b74;--knock-beige-11: #b5b3ad;--knock-beige-12: #eeeeec;--knock-orange-1: #181111;--knock-orange-2: #1f1513;--knock-orange-3: #391714;--knock-orange-4: #4e1511;--knock-orange-5: #5e1c16;--knock-orange-6: #6e2920;--knock-orange-7: #853a2d;--knock-orange-8: #ac4d39;--knock-orange-9: #e54d2e;--knock-orange-10: #ec6142;--knock-orange-11: #ff977d;--knock-orange-12: #fbd3cb;--knock-green-1: #0d1512;--knock-green-2: #121c18;--knock-green-3: #0f2e22;--knock-green-4: #0b3b2c;--knock-green-5: #114837;--knock-green-6: #1b5745;--knock-green-7: #246854;--knock-green-8: #2a7e68;--knock-green-9: #29a383;--knock-green-10: #27b08b;--knock-green-11: #1fd8a4;--knock-green-12: #adf0d4;--knock-yellow-1: #16120c;--knock-yellow-2: #1d180f;--knock-yellow-3: #302008;--knock-yellow-4: #3f2700;--knock-yellow-5: #4d3000;--knock-yellow-6: #5c3d05;--knock-yellow-7: #714f19;--knock-yellow-8: #8f6424;--knock-yellow-9: #ffc53d;--knock-yellow-10: #ffd60a;--knock-yellow-11: #ffca16;--knock-yellow-12: #ffe7b3;--knock-blue-1: #11131f;--knock-blue-2: #141726;--knock-blue-3: #182449;--knock-blue-4: #1d2e62;--knock-blue-5: #253974;--knock-blue-6: #304384;--knock-blue-7: #3a4f97;--knock-blue-8: #435db1;--knock-blue-9: #3e63dd;--knock-blue-10: #5472e4;--knock-blue-11: #9eb1ff;--knock-blue-12: #d6e1ff;--knock-red-1: #191113;--knock-red-2: #1e1517;--knock-red-3: #3a141e;--knock-red-4: #4e1325;--knock-red-5: #5e1a2e;--knock-red-6: #6f2539;--knock-red-7: #883447;--knock-red-8: #b3445a;--knock-red-9: #e54666;--knock-red-10: #ec5a72;--knock-red-11: #ff949d;--knock-red-12: #fed2e1;--knock-purple-1: #14121f;--knock-purple-2: #1b1525;--knock-purple-3: #291f43;--knock-purple-4: #33255b;--knock-purple-5: #3c2e69;--knock-purple-6: #473876;--knock-purple-7: #56468b;--knock-purple-8: #6958ad;--knock-purple-9: #6e56cf;--knock-purple-10: #7d66d9;--knock-purple-11: #baa7ff;--knock-purple-12: #e2ddfe}[data-knock-color-mode=light]{--knock-guide-accent: var(--knock-gray-12);--knock-guide-accent-light: var(--knock-gray-4);--knock-guide-accent-dark: var(--knock-gray-12);--knock-guide-secondary: var(--knock-gray-9);--knock-guide-secondary-light: var(--knock-gray-3);--knock-guide-secondary-dark: var(--knock-gray-11);--knock-guide-content: var(--knock-gray-12);--knock-guide-content-light: var(--knock-gray-11);--knock-guide-content-disabled: var(--knock-gray-9);--knock-guide-content-contrast: var(--knock-white);--knock-guide-border: var(--knock-gray-5);--knock-guide-border-light: var(--knock-gray-4);--knock-guide-border-dark: var(--knock-gray-7);--knock-guide-surface: var(--knock-white);--knock-guide-surface-2: var(--knock-gray-2)}[data-knock-color-mode=dark]{--knock-guide-surface: var(--knock-white);--knock-guide-surface-2: var(--knock-gray-2);--knock-guide-accent: var(--knock-white);--knock-guide-accent-light: var(--knock-gray-4);--knock-guide-accent-dark: var(--knock-gray-12);--knock-guide-secondary: var(--knock-gray-9);--knock-guide-secondary-light: var(--knock-gray-3);--knock-guide-secondary-dark: var(--knock-gray-11);--knock-guide-content: var(--knock-gray-12);--knock-guide-content-light: var(--knock-gray-11);--knock-guide-content-disabled: var(--knock-gray-9);--knock-guide-content-contrast: var(--knock-gray-1);--knock-guide-border: var(--knock-gray-5);--knock-guide-border-light: var(--knock-gray-4);--knock-guide-border-dark: var(--knock-gray-7);--knock-guide-surface: var(--knock-gray-2);--knock-guide-surface-2: var(--knock-gray-1)}:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:break-word;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.rnf-notification-cell__button-group{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}.knock-guide-banner{display:flex;align-items:center;justify-content:space-between;background:var(--knock-guide-surface);padding:var(--knock-spacing-4) var(--knock-spacing-6);border-radius:var(--knock-rounded-4);border:.5px solid var(--knock-guide-border);box-shadow:var(--knock-shadow-2);gap:var(--knock-spacing-4)}.knock-guide-banner__message{min-width:var(--knock-spacing-96)}.knock-guide-banner__title{color:var(--knock-guide-content);font-size:var(--knock-text-4);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-4)}.knock-guide-banner__body{color:var(--knock-guide-content-light);font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3)}.knock-guide-banner__body>:first-child{margin-top:0}.knock-guide-banner__body>:last-child{margin-bottom:0}.knock-guide-banner__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--knock-spacing-3)}.knock-guide-banner__action{text-decoration:none;font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3);border-radius:var(--knock-rounded-3);padding:0 var(--knock-spacing-4);box-sizing:border-box;height:var(--knock-spacing-10);display:flex;align-items:center;justify-content:center;border:.5px solid var(--knock-guide-accent);background:var(--knock-guide-accent);color:var(--knock-guide-content-contrast);cursor:pointer}.knock-guide-banner__action--secondary{border-color:var(--knock-guide-border-dark);background:var(--knock-guide-surface);color:var(--knock-guide-content)}.knock-guide-banner__close{padding:var(--knock-spacing-3);border:none;background:none;line-height:0;cursor:pointer}.knock-guide-card{background:var(--knock-guide-surface);padding:var(--knock-spacing-4);border-radius:var(--knock-rounded-2);border:.5px solid var(--knock-guide-border);display:flex;flex-direction:column;gap:var(--knock-spacing-4);max-width:var(--knock-spacing-96)}.knock-guide-card__header{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:var(--knock-spacing-2)}.knock-guide-card__headline{color:var(--knock-guide-accent-dark);font-size:var(--knock-text-1);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-1);letter-spacing:var(--knock-tracking-1)}.knock-guide-card__message{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.knock-guide-card__title{color:var(--knock-guide-content);font-size:var(--knock-text-4);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-4)}.knock-guide-card__body{color:var(--knock-guide-content-light);font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3)}.knock-guide-card__body>:first-child{margin-top:0}.knock-guide-card__body>:last-child{margin-bottom:0}.knock-guide-card__actions{display:flex;align-items:center;gap:var(--knock-spacing-3)}.knock-guide-card__action{text-decoration:none;font-size:var(--knock-text-3);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-3);border-radius:var(--knock-rounded-3);padding:0 var(--knock-spacing-4);box-sizing:border-box;height:var(--knock-spacing-10);display:flex;align-items:center;justify-content:center;border:.5px solid var(--knock-guide-accent);background:var(--knock-guide-accent);color:var(--knock-guide-content-contrast);cursor:pointer}.knock-guide-card__action--secondary{border-color:var(--knock-guide-border-dark);background:var(--knock-guide-surface);color:var(--knock-guide-content)}.knock-guide-card__close{padding:var(--knock-spacing-3);border:none;background:none;line-height:0;cursor:pointer}.knock-guide-modal{font-family:var(--knock-family-sans);background:var(--knock-guide-surface);padding:var(--knock-spacing-4) var(--knock-spacing-6) var(--knock-spacing-6);border-radius:var(--knock-rounded-4);border:.5px solid var(--knock-guide-border);box-shadow:var(--knock-shadow-3);max-width:var(--knock-spacing-96);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-height:calc(100vh - var(--knock-spacing-32));max-width:min(100vw - var(--knock-spacing-8),var(--knock-spacing-140))}.knock-guide-modal__overlay{background-color:var(--knock-alpha-black-6);position:fixed;top:0;right:0;bottom:0;left:0}.knock-guide-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--knock-spacing-2);padding-bottom:var(--knock-spacing-1)}.knock-guide-modal__title{color:var(--knock-guide-content);font-size:var(--knock-text-4);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-4);margin:0}.knock-guide-modal__body{color:var(--knock-guide-content-light);font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3);margin:0}.knock-guide-modal__body>:first-child{margin-top:0}.knock-guide-modal__body>:last-child{margin-bottom:0}.knock-guide-modal__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--knock-spacing-3);margin-top:var(--knock-spacing-4)}.knock-guide-modal__action{text-decoration:none;text-align:center;font-size:var(--knock-text-3);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-3);border-radius:var(--knock-rounded-3);padding:0 var(--knock-spacing-4);box-sizing:border-box;height:var(--knock-spacing-10);display:flex;align-items:center;justify-content:center;border:.5px solid var(--knock-guide-accent);background:var(--knock-guide-accent);color:var(--knock-guide-content-contrast);width:100%;cursor:pointer}.knock-guide-modal__action--secondary{border-color:var(--knock-guide-border-dark);background:var(--knock-guide-surface);color:var(--knock-guide-content)}.knock-guide-modal__close{padding:var(--knock-spacing-3);border:none;background:none;line-height:0;cursor:pointer}:root{--tgph-surface-1:#fff;--tgph-surface-2:#f9f9f8;--tgph-gray-1:#fcfcfd;--tgph-gray-2:#f9f9fb;--tgph-gray-3:#f0f0f3;--tgph-gray-4:#e8e8ec;--tgph-gray-5:#e0e1e6;--tgph-gray-6:#d9d9e0;--tgph-gray-7:#cdced6;--tgph-gray-8:#b9bbc6;--tgph-gray-9:#8b8d98;--tgph-gray-10:#80838d;--tgph-gray-11:#60646c;--tgph-gray-12:#1c2024;--tgph-beige-1:#fdfdfc;--tgph-beige-2:#f9f9f8;--tgph-beige-3:#f1f0ef;--tgph-beige-4:#e9e8e6;--tgph-beige-5:#e2e1de;--tgph-beige-6:#dad9d6;--tgph-beige-7:#cfceca;--tgph-beige-8:#bcbbb5;--tgph-beige-9:#8d8d86;--tgph-beige-10:#82827c;--tgph-beige-11:#63635e;--tgph-beige-12:#21201c;--tgph-accent-1:#fffcfc;--tgph-accent-2:#fff8f7;--tgph-accent-3:#feebe7;--tgph-accent-4:#ffdcd3;--tgph-accent-5:#ffcdc2;--tgph-accent-6:#fdbdaf;--tgph-accent-7:#f5a898;--tgph-accent-8:#ec8e7b;--tgph-accent-9:#e54d2e;--tgph-accent-10:#dd4425;--tgph-accent-11:#d13415;--tgph-accent-12:#5c271f;--tgph-green-1:#fbfefd;--tgph-green-2:#f4fbf7;--tgph-green-3:#e6f7ed;--tgph-green-4:#d6f1e3;--tgph-green-5:#c3e9d7;--tgph-green-6:#acdec8;--tgph-green-7:#8bceb6;--tgph-green-8:#56ba9f;--tgph-green-9:#29a383;--tgph-green-10:#26997b;--tgph-green-11:#208368;--tgph-green-12:#1d3b31;--tgph-yellow-1:#fefdfb;--tgph-yellow-2:#fefbe9;--tgph-yellow-3:#fff7c2;--tgph-yellow-4:#ffee9c;--tgph-yellow-5:#fbe577;--tgph-yellow-6:#f3d673;--tgph-yellow-7:#e9c162;--tgph-yellow-8:#f3d673;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffba18;--tgph-yellow-11:#ab6400;--tgph-yellow-12:#4f3422;--tgph-blue-1:#fdfdfe;--tgph-blue-2:#f7f9ff;--tgph-blue-3:#edf2fe;--tgph-blue-4:#e1e9ff;--tgph-blue-5:#d2deff;--tgph-blue-6:#c1d0ff;--tgph-blue-7:#abbdf9;--tgph-blue-8:#8da4ef;--tgph-blue-9:#3e63dd;--tgph-blue-10:#3358d4;--tgph-blue-11:#3a5bc7;--tgph-blue-12:#1f2d5c;--tgph-red-1:#fffcfd;--tgph-red-2:#fff7f8;--tgph-red-3:#feeaed;--tgph-red-4:#ffdce1;--tgph-red-5:#ffced6;--tgph-red-6:#f8bfc8;--tgph-red-7:#efacb8;--tgph-red-8:#e592a3;--tgph-red-9:#e54666;--tgph-red-10:#dc3b5d;--tgph-red-11:#ca244d;--tgph-red-12:#64172b;--tgph-purple-1:#fdfcfe;--tgph-purple-2:#faf8ff;--tgph-purple-3:#f4f0fe;--tgph-purple-4:#ebe4ff;--tgph-purple-5:#e1d9ff;--tgph-purple-6:#d4cafe;--tgph-purple-7:#c2b5f5;--tgph-purple-8:#aa99ec;--tgph-purple-9:#654dc4;--tgph-purple-10:#654dc4;--tgph-purple-11:#6550b9;--tgph-purple-12:#2f265f;--tgph-border-style-solid:solid;--tgph-border-style-dashed:dashed;--tgph-transparent:transparent;--tgph-white:#fff;--tgph-black:#000;--tgph-alpha-white-1:#ffffff0d;--tgph-alpha-white-2:#ffffff1a;--tgph-alpha-white-3:#ffffff26;--tgph-alpha-white-4:#fff3;--tgph-alpha-white-5:#ffffff4d;--tgph-alpha-white-6:#fff6;--tgph-alpha-white-7:#ffffff80;--tgph-alpha-white-8:#fff9;--tgph-alpha-white-9:#ffffffb3;--tgph-alpha-white-10:#fffc;--tgph-alpha-white-11:#ffffffe6;--tgph-alpha-white-12:#fffffff2;--tgph-alpha-black-1:#0000000d;--tgph-alpha-black-2:#0000001a;--tgph-alpha-black-3:#00000026;--tgph-alpha-black-4:#0003;--tgph-alpha-black-5:#0000004d;--tgph-alpha-black-6:#0006;--tgph-alpha-black-7:#00000080;--tgph-alpha-black-8:#0009;--tgph-alpha-black-9:#000000b3;--tgph-alpha-black-10:#000c;--tgph-alpha-black-11:#000000e6;--tgph-alpha-black-12:#000000f2;--tgph-rounded-0:0px;--tgph-rounded-1:.125rem;--tgph-rounded-2:.25rem;--tgph-rounded-3:.375rem;--tgph-rounded-4:.5rem;--tgph-rounded-5:.75rem;--tgph-rounded-6:1rem;--tgph-rounded-full:9999px;--tgph-shadow-0:0px 0px 0px 0px #0000;--tgph-shadow-1:0px 5px 2px 0px #1c202403,0px 3px 2px 0px #1c202408,0px 1px 1px 0px #1c20240d,0px 0px 1px 0px #1c20240f;--tgph-shadow-2:0px 16px 7px 0px #1c202403,0px 9px 6px 0px #1c202408,0px 4px 4px 0px #1c20240d,0px 1px 2px 0px #1c20240f;--tgph-shadow-3:0px 29px 12px 0px #1c202403,0px 16px 10px 0px #1c202408,0px 7px 7px 0px #1c20240d,0px 2px 4px 0px #1c20240f;--tgph-shadow-inner:0px 5px 2px 0px #1c202403 inset,0px 3px 2px 0px #1c202408 inset,0px 1px 1px 0px #1c20240d inset,0px 0px 1px 0px #1c20240f inset;--tgph-spacing-0:0px;--tgph-spacing-1:.25rem;--tgph-spacing-2:.5rem;--tgph-spacing-3:.75rem;--tgph-spacing-4:1rem;--tgph-spacing-5:1.25rem;--tgph-spacing-6:1.5rem;--tgph-spacing-7:1.75rem;--tgph-spacing-8:2rem;--tgph-spacing-9:2.25rem;--tgph-spacing-10:2.5rem;--tgph-spacing-11:2.75rem;--tgph-spacing-12:3rem;--tgph-spacing-14:3.5rem;--tgph-spacing-16:4rem;--tgph-spacing-20:5rem;--tgph-spacing-24:6rem;--tgph-spacing-28:7rem;--tgph-spacing-32:8rem;--tgph-spacing-36:9rem;--tgph-spacing-40:10rem;--tgph-spacing-44:11rem;--tgph-spacing-48:12rem;--tgph-spacing-52:13rem;--tgph-spacing-56:14rem;--tgph-spacing-60:15rem;--tgph-spacing-64:16rem;--tgph-spacing-72:18rem;--tgph-spacing-80:20rem;--tgph-spacing-96:24rem;--tgph-spacing-140:35rem;--tgph-spacing-160:40rem;--tgph-spacing-px:1px;--tgph-spacing-full:100%;--tgph-spacing-auto:auto;--tgph-family-sans:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--tgph-family-mono:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--tgph-leading-0:1rem;--tgph-leading-1:1rem;--tgph-leading-2:1.25rem;--tgph-leading-3:1.5rem;--tgph-leading-4:1.75rem;--tgph-leading-5:1.75rem;--tgph-leading-6:2rem;--tgph-leading-7:2.25rem;--tgph-leading-8:2.5rem;--tgph-leading-9:3.5rem;--tgph-leading-code-0:1rem;--tgph-leading-code-1:1rem;--tgph-leading-code-2:1.25rem;--tgph-leading-code-3:1.5rem;--tgph-leading-code-4:1.75rem;--tgph-leading-code-5:1.75rem;--tgph-leading-code-6:2rem;--tgph-leading-code-7:2.25rem;--tgph-leading-code-8:2.5rem;--tgph-leading-code-9:3rem;--tgph-tracking-0:.25%;--tgph-tracking-1:.25%;--tgph-tracking-2:0;--tgph-tracking-3:0;--tgph-tracking-4:-.25%;--tgph-tracking-5:-.5%;--tgph-tracking-6:-.625%;--tgph-tracking-7:-.75%;--tgph-tracking-8:-1%;--tgph-tracking-9:-2.5%;--tgph-text-0:.6875rem;--tgph-text-1:.75rem;--tgph-text-2:.875rem;--tgph-text-3:1rem;--tgph-text-4:1.125rem;--tgph-text-5:1.25rem;--tgph-text-6:1.5rem;--tgph-text-7:1.875rem;--tgph-text-8:2.25rem;--tgph-text-9:3rem;--tgph-text-code-0:.625rem;--tgph-text-code-1:.688rem;--tgph-text-code-2:.812rem;--tgph-text-code-4:1.062rem;--tgph-text-code-5:1.188rem;--tgph-text-code-6:1.438rem;--tgph-text-code-7:1.75rem;--tgph-text-code-8:2.125rem;--tgph-text-code-9:2.875rem;--tgph-weight-regular:400;--tgph-weight-medium:500;--tgph-weight-semi-bold:600;--tgph-breakpoint-sm:640px;--tgph-breakpoint-md:768px;--tgph-breakpoint-lg:1024px;--tgph-breakpoint-xl:1280px;--tgph-breakpoint-2xl:1536px;--tgph-zIndex-hidden:-1;--tgph-zIndex-base:0;--tgph-zIndex-auto:auto;--tgph-zIndex-dropdown:1000;--tgph-zIndex-sticky:1100;--tgph-zIndex-banner:1200;--tgph-zIndex-overlay:1300;--tgph-zIndex-modal:1400;--tgph-zIndex-popover:1500;--tgph-zIndex-skipLink:1600;--tgph-zIndex-toast:1700;--tgph-zIndex-tooltip:1800}.tgph-text,.tgph-heading,.tgph-code{--color: var(--tgph-gray-12);--font-size: var(--tgph-text-2);--weight: var(--tgph-weight-regular);--leading: var(--tgph-leading-2);--tracking: var(--tgph-tracking-2);--text-align: left;--font-family: var(--tgph-family-sans);--text-overflow: clip;color:var(--color);font-size:var(--font-size);font-weight:var(--weight);line-height:var(--leading);letter-spacing:var(--tracking);text-align:var(--text-align);box-sizing:border-box;font-family:var(--font-family);text-overflow:var(--text-overflow)}.tgph-button{--tgph-button-hover-shadow: none;--tgph-button-focus-shadow: none;--tgph-button-active-shadow: none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;box-sizing:border-box;font-family:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out;text-decoration:none}.tgph-button:hover{box-shadow:var(--tgph-button-hover-shadow)}.tgph-button:focus{box-shadow:var(--tgph-button-focus-shadow)}.tgph-button[data-tgph-button-state=active]{box-shadow:var(--tgph-button-active-shadow);background-color:var(--active_backgroundColor)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=solid],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=soft],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=outline]{background-color:var(--tgph-gray-3)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=ghost]{background-color:var(--tgph-transparent)}.tgph-button:disabled{cursor:not-allowed}.tgph-button[data-tgph-button-state=disabled]:hover{background-color:revert}[data-tgph-button-loading-icon]{animation:button-loading-icon 1s infinite linear}@keyframes button-loading-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tgph-icon{display:inline-block}.tgph-box{--background-color: none;--border-color: var(--tgph-gray-6);--box-shadow: none;--border-style: solid;--border-width: 0;--padding: 0;--margin: 0;--border-radius: 0;--width: auto;--max-width: auto;--min-width: auto;--height: auto;--max-height: auto;--min-height: auto;--z-index: auto;--position: static;--top: auto;--left: auto;--right: auto;--bottom: auto;--overflow: visible;background-color:var(--background-color);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--box-shadow);padding:var(--padding);margin:var(--margin);border-radius:var(--border-radius);width:var(--width);max-width:var(--max-width);min-width:var(--min-width);height:var(--height);max-height:var(--max-height);min-height:var(--min-height);z-index:var(--z-index);position:var(--position);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom);overflow:var(--overflow)}.tgph-box--interactive{--hover_backgroundColor: none;--focus_backgroundColor: none;--active_backgroundColor: none}.tgph-box--interactive:hover{background-color:var(--hover_backgroundColor)}.tgph-box--interactive:focus{background-color:var(--focus_backgroundColor)}.tgph-box--interactive:active{background-color:var(--active_backgroundColor)}.tgph-stack{--display: flex;--direction: row;--wrap: nowrap;--justify: flex-start;--align: stretch;--gap: 0;display:var(--display);flex-direction:var(--direction);flex-wrap:var(--wrap);justify-content:var(--justify);align-items:var(--align);gap:var(--gap)}.tgph .order-1{order:1}.tgph .order-2{order:2}.tgph .order-3{order:3}.tgph .box-border{box-sizing:border-box}.tgph .flex{display:flex}.tgph .aspect-square{aspect-ratio:1 / 1}.tgph .h-10{height:var(--tgph-spacing-10)}.tgph .h-6{height:var(--tgph-spacing-6)}.tgph .h-8{height:var(--tgph-spacing-8)}.tgph .h-full{height:var(--tgph-spacing-full)}.tgph .w-full{width:var(--tgph-spacing-full)}.tgph .cursor-not-allowed{cursor:not-allowed}.tgph .appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.tgph .items-center{align-items:center}.tgph .justify-center{justify-content:center}.tgph .rounded-2{border-radius:var(--tgph-rounded-2)}.tgph .rounded-3{border-radius:var(--tgph-rounded-3)}.tgph .border,.tgph .border-\[1px\]{border-width:1px}.tgph .border-solid{border-style:solid}.tgph .border-none{border-style:none}.tgph .border-gray-2{border-color:var(--tgph-gray-2)}.tgph .border-gray-6{border-color:var(--tgph-gray-6)}.tgph .border-red-6{border-color:var(--tgph-red-6)}.tgph .border-transparent{border-color:var(--tgph-transparent)}.tgph .bg-gray-2{background-color:var(--tgph-gray-2)}.tgph .bg-surface-1{background-color:var(--tgph-surface-1)}.tgph .bg-transparent{background-color:var(--tgph-transparent)}.tgph .\!p-1{padding:var(--tgph-spacing-1)!important}.tgph .px-1{padding-left:var(--tgph-spacing-1);padding-right:var(--tgph-spacing-1)}.tgph .px-2{padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph .px-3{padding-left:var(--tgph-spacing-3);padding-right:var(--tgph-spacing-3)}.tgph .pl-0{padding-left:var(--tgph-spacing-0)}.tgph .pl-1{padding-left:var(--tgph-spacing-1)}.tgph .pl-2{padding-left:var(--tgph-spacing-2)}.tgph .pl-3{padding-left:var(--tgph-spacing-3)}.tgph .pr-1{padding-right:var(--tgph-spacing-1)}.tgph .pr-2{padding-right:var(--tgph-spacing-2)}.tgph .pr-3{padding-right:var(--tgph-spacing-3)}.tgph .text-gray-12{color:var(--tgph-gray-12)}.tgph .shadow-0{--tw-shadow: var(--tgph-shadow-0);--tw-shadow-colored: var(--tgph-shadow-0);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph .outline{outline-style:solid}.tgph .outline-0{outline-width:0px}.tgph .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tgph .\[font-family\:inherit\]{font-family:inherit}.tgph .placeholder\:text-gray-10::-moz-placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-10::placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-9::-moz-placeholder{color:var(--tgph-gray-9)}.tgph .placeholder\:text-gray-9::placeholder{color:var(--tgph-gray-9)}.tgph .focus-within\:\!border-blue-8:focus-within{border-color:var(--tgph-blue-8)!important}.tgph .focus-within\:\!bg-gray-4:focus-within{background-color:var(--tgph-gray-4)!important}.tgph .hover\:border-gray-7:hover{border-color:var(--tgph-gray-7)}.tgph .hover\:bg-gray-3:hover{background-color:var(--tgph-gray-3)}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:aspect-square:has([data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:\!p-1:has([data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-1)!important}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'default\'\]\]\:px-2>[data-tgph-button-layout=default]){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:aspect-square>[data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:p-0>[data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-0)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:h-auto>[data-tgph-button]){height:var(--tgph-spacing-auto)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:w-full>[data-tgph-button]){width:var(--tgph-spacing-full)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-1>[data-tgph-button]){border-radius:var(--tgph-rounded-1)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-2>[data-tgph-button]){border-radius:var(--tgph-rounded-2)}.tgph :is(.\[\&\>input\]\:text-gray-9>input){color:var(--tgph-gray-9)}.tgph :is(.\[\&_\[data-tgph-icon\]\]\:text-gray-8 [data-tgph-icon]){color:var(--tgph-gray-8)}.tgph-motion{--motion-opacity: 1;--motion-scale: 1;--motion-x: 0;--motion-y: 0;--motion-transition-duration: .2s;--motion-transition-type: ease-in-out;--motion-rotate: 0deg;opacity:var(--motion-opacity);transform:scale(var(--motion-scale)) translate(var(--motion-x),var(--motion-y)) rotate(var(--motion-rotate));transition:all var(--motion-transition-duration) var(--motion-transition-type)}:root{--rtk-font-size-xs: .75rem;--rtk-font-size-sm: .875rem;--rtk-font-size-md: 1rem;--rtk-font-size-lg: 1.125rem;--rtk-font-size-xl: 1.266rem;--rtk-font-size-2xl: 1.5rem;--rtk-font-size-3xl: 1.75rem;--rtk-spacing-0: 0rem;--rtk-spacing-1: .25rem;--rtk-spacing-2: .5rem;--rtk-spacing-3: .75rem;--rtk-spacing-4: 1rem;--rtk-spacing-5: 1.25rem;--rtk-spacing-6: 1.5rem;--rtk-spacing-7: 2rem;--rtk-font-weight-normal: 400;--rtk-font-weight-medium: 500;--rtk-font-weight-semibold: 600;--rtk-font-weight-bold: 700;--rtk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rtk-border-radius-sm: 2px;--rtk-border-radius-md: 4px;--rtk-border-radius-lg: 8px;--rtk-button-border-radius: 6px;--rtk-color-white: #fff;--rtk-color-white-a-75: rgba(255, 255, 255, .75);--rtk-color-black: #000;--rtk-color-gray-900: #1a1f36;--rtk-color-gray-800: #3c4257;--rtk-color-gray-700: #3c4257;--rtk-color-gray-600: #515669;--rtk-color-gray-500: #697386;--rtk-color-gray-400: #9ea0aa;--rtk-color-gray-300: #a5acb8;--rtk-color-gray-200: #dddee1;--rtk-color-gray-100: #e4e8ee;--rtk-color-brand-500: #e95744;--rtk-color-brand-700: #e4321b;--rtk-color-brand-900: #891e10;--rtk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rtk-connected-color: rgba(51, 163, 102, 1);--rtk-disconnect-border-color: rgba(230, 71, 51, 1);--rtk-disconnect-background-color: rgba(255, 245, 245, 1);--rtk-error-red: rgba(205, 123, 46, 1)}.rtk-connect__button{background-color:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-200);border-radius:var(--rtk-button-border-radius);box-sizing:border-box;color:var(--rtk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);gap:var(--rtk-spacing-2);padding:var(--rtk-spacing-1) var(--rtk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rtk-connect__button--connected{border-color:var(--rtk-connected-color);color:var(--rtk-connected-color);width:120px}.rtk-connect__button--error{border-color:var(--rtk-error-red);color:var(--rtk-error-red)}.rtk-connect__button--loading{border-color:var(--rtk-color-gray-100);color:var(--rtk-color-gray-400);pointer-events:none}.rtk-connect__button--disconnected:hover{background-color:var(--rtk-button-hover-color)}.rtk-connect__button--connected:hover,.rtk-connect__button__text--connected:hover{background-color:var(--rtk-disconnect-background-color);border-color:var(--rtk-disconnect-border-color);color:var(--rtk-disconnect-border-color)}.rtk-connect__button--error:hover,.rtk-connect__button__text--error:hover{border-color:var(--rtk-color-black);color:var(--rtk-color-black)}.rtk-connect__button:active{transform:translate(1px,1px)}.rtk-auth{background:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-lg);font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);padding:var(--rtk-spacing-5)}.rtk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rtk-auth__title{color:#1a1f36;font-size:var(--rtk-font-size-md);line-height:var(--rtk-spacing-5);margin-top:var(--rtk-spacing-4)}.rtk-auth__description{color:#515669;font-size:var(--rtk-font-size-sm);line-height:var(--rtk-spacing-5)}.rtk-combobox__grid{width:352px;display:grid;grid-template-columns:min-content 1fr;align-items:center;font-size:var(--rtk-font-size-sm);font-family:var(--rtk-font-family-sanserif)}.rtk-combobox__search{font-family:var(--rtk-font-family-sanserif)!important}.rtk-combobox__error{grid-column:span 2;align-items:flex-start;background-color:var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-md);display:flex;gap:var(--rtk-spacing-1);padding:var(--rtk-spacing-2)}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}.rsk-combobox__grid{width:352px;display:grid;grid-template-columns:min-content 1fr;align-items:center;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif)}.rsk-combobox__label{align-self:start;display:flex;align-items:center}.rsk-combobox__search{font-family:var(--rsk-font-family-sanserif)!important}.rsk-combobox__error{grid-column:span 2;align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}
1	+ :root{--knock-border-style-solid: solid;--knock-border-style-dashed: dashed;--knock-transparent: transparent;--knock-white: #fff;--knock-black: #000;--knock-alpha-white-1: #ffffff0d;--knock-alpha-white-2: #ffffff1a;--knock-alpha-white-3: #ffffff26;--knock-alpha-white-4: #fff3;--knock-alpha-white-5: #ffffff4d;--knock-alpha-white-6: #fff6;--knock-alpha-white-7: #ffffff80;--knock-alpha-white-8: #fff9;--knock-alpha-white-9: #ffffffb3;--knock-alpha-white-10: #fffc;--knock-alpha-white-11: #ffffffe6;--knock-alpha-white-12: #fffffff2;--knock-alpha-black-1: #0000000d;--knock-alpha-black-2: #0000001a;--knock-alpha-black-3: #00000026;--knock-alpha-black-4: #0003;--knock-alpha-black-5: #0000004d;--knock-alpha-black-6: #0006;--knock-alpha-black-7: #00000080;--knock-alpha-black-8: #0009;--knock-alpha-black-9: #000000b3;--knock-alpha-black-10: #000c;--knock-alpha-black-11: #000000e6;--knock-alpha-black-12: #000000f2;--knock-rounded-0: 0px;--knock-rounded-1: .125rem;--knock-rounded-2: .25rem;--knock-rounded-3: .375rem;--knock-rounded-4: .5rem;--knock-rounded-5: .75rem;--knock-rounded-6: 1rem;--knock-rounded-full: 9999px;--knock-shadow-0: 0px 0px 0px 0px #0000;--knock-shadow-1: 0px 5px 2px 0px #1c202403, 0px 3px 2px 0px #1c202408, 0px 1px 1px 0px #1c20240d, 0px 0px 1px 0px #1c20240f;--knock-shadow-2: 0px 16px 7px 0px #1c202403, 0px 9px 6px 0px #1c202408, 0px 4px 4px 0px #1c20240d, 0px 1px 2px 0px #1c20240f;--knock-shadow-3: 0px 29px 12px 0px #1c202403, 0px 16px 10px 0px #1c202408, 0px 7px 7px 0px #1c20240d, 0px 2px 4px 0px #1c20240f;--knock-shadow-inner: 0px 5px 2px 0px #1c202403 inset, 0px 3px 2px 0px #1c202408 inset, 0px 1px 1px 0px #1c20240d inset, 0px 0px 1px 0px #1c20240f inset;--knock-spacing-0: 0px;--knock-spacing-1: .25rem;--knock-spacing-2: .5rem;--knock-spacing-3: .75rem;--knock-spacing-4: 1rem;--knock-spacing-5: 1.25rem;--knock-spacing-6: 1.5rem;--knock-spacing-7: 1.75rem;--knock-spacing-8: 2rem;--knock-spacing-9: 2.25rem;--knock-spacing-10: 2.5rem;--knock-spacing-11: 2.75rem;--knock-spacing-12: 3rem;--knock-spacing-14: 3.5rem;--knock-spacing-16: 4rem;--knock-spacing-20: 5rem;--knock-spacing-24: 6rem;--knock-spacing-28: 7rem;--knock-spacing-32: 8rem;--knock-spacing-36: 9rem;--knock-spacing-40: 10rem;--knock-spacing-44: 11rem;--knock-spacing-48: 12rem;--knock-spacing-52: 13rem;--knock-spacing-56: 14rem;--knock-spacing-60: 15rem;--knock-spacing-64: 16rem;--knock-spacing-72: 18rem;--knock-spacing-80: 20rem;--knock-spacing-96: 24rem;--knock-spacing-140: 35rem;--knock-spacing-160: 40rem;--knock-spacing-px: 1px;--knock-spacing-full: 100%;--knock-spacing-auto: auto;--knock-family-sans: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;--knock-family-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;--knock-leading-0: 1rem;--knock-leading-1: 1rem;--knock-leading-2: 1.25rem;--knock-leading-3: 1.5rem;--knock-leading-4: 1.75rem;--knock-leading-5: 1.75rem;--knock-leading-6: 2rem;--knock-leading-7: 2.25rem;--knock-leading-8: 2.5rem;--knock-leading-9: 3.5rem;--knock-leading-code-0: 1rem;--knock-leading-code-1: 1rem;--knock-leading-code-2: 1.25rem;--knock-leading-code-3: 1.5rem;--knock-leading-code-4: 1.75rem;--knock-leading-code-5: 1.75rem;--knock-leading-code-6: 2rem;--knock-leading-code-7: 2.25rem;--knock-leading-code-8: 2.5rem;--knock-leading-code-9: 3rem;--knock-tracking-0: .25%;--knock-tracking-1: .25%;--knock-tracking-2: 0;--knock-tracking-3: 0;--knock-tracking-4: -.25%;--knock-tracking-5: -.5%;--knock-tracking-6: -.625%;--knock-tracking-7: -.75%;--knock-tracking-8: -1%;--knock-tracking-9: -2.5%;--knock-text-0: .6875rem;--knock-text-1: .75rem;--knock-text-2: .875rem;--knock-text-3: 1rem;--knock-text-4: 1.125rem;--knock-text-5: 1.25rem;--knock-text-6: 1.5rem;--knock-text-7: 1.875rem;--knock-text-8: 2.25rem;--knock-text-9: 3rem;--knock-text-code-0: .625rem;--knock-text-code-1: .688rem;--knock-text-code-2: .812rem;--knock-text-code-4: 1.062rem;--knock-text-code-5: 1.188rem;--knock-text-code-6: 1.438rem;--knock-text-code-7: 1.75rem;--knock-text-code-8: 2.125rem;--knock-text-code-9: 2.875rem;--knock-weight-regular: 400;--knock-weight-medium: 500;--knock-weight-semi-bold: 600;--knock-breakpoint-sm: 640px;--knock-breakpoint-md: 768px;--knock-breakpoint-lg: 1024px;--knock-breakpoint-xl: 1280px;--knock-breakpoint-2xl: 1536px;--knock-zIndex-hidden: -1;--knock-zIndex-base: 0;--knock-zIndex-auto: auto;--knock-zIndex-dropdown: 1000;--knock-zIndex-sticky: 1100;--knock-zIndex-banner: 1200;--knock-zIndex-overlay: 1300;--knock-zIndex-modal: 1400;--knock-zIndex-popover: 1500;--knock-zIndex-skipLink: 1600;--knock-zIndex-toast: 1700;--knock-zIndex-tooltip: 1800}[data-knock-color-mode=light]{--knock-surface-1: #fff;--knock-surface-2: #f9f9f8;--knock-gray-1: #fcfcfd;--knock-gray-2: #f9f9fb;--knock-gray-3: #f0f0f3;--knock-gray-4: #e8e8ec;--knock-gray-5: #e0e1e6;--knock-gray-6: #d9d9e0;--knock-gray-7: #cdced6;--knock-gray-8: #b9bbc6;--knock-gray-9: #8b8d98;--knock-gray-10: #80838d;--knock-gray-11: #60646c;--knock-gray-12: #1c2024;--knock-beige-1: #fdfdfc;--knock-beige-2: #f9f9f8;--knock-beige-3: #f1f0ef;--knock-beige-4: #e9e8e6;--knock-beige-5: #e2e1de;--knock-beige-6: #dad9d6;--knock-beige-7: #cfceca;--knock-beige-8: #bcbbb5;--knock-beige-9: #8d8d86;--knock-beige-10: #82827c;--knock-beige-11: #63635e;--knock-beige-12: #21201c;--knock-orange-1: #fffcfc;--knock-orange-2: #fff8f7;--knock-orange-3: #feebe7;--knock-orange-4: #ffdcd3;--knock-orange-5: #ffcdc2;--knock-orange-6: #fdbdaf;--knock-orange-7: #f5a898;--knock-orange-8: #ec8e7b;--knock-orange-9: #e54d2e;--knock-orange-10: #dd4425;--knock-orange-11: #d13415;--knock-orange-12: #5c271f;--knock-green-1: #fbfefd;--knock-green-2: #f4fbf7;--knock-green-3: #e6f7ed;--knock-green-4: #d6f1e3;--knock-green-5: #c3e9d7;--knock-green-6: #acdec8;--knock-green-7: #8bceb6;--knock-green-8: #56ba9f;--knock-green-9: #29a383;--knock-green-10: #26997b;--knock-green-11: #208368;--knock-green-12: #1d3b31;--knock-yellow-1: #fefdfb;--knock-yellow-2: #fefbe9;--knock-yellow-3: #fff7c2;--knock-yellow-4: #ffee9c;--knock-yellow-5: #fbe577;--knock-yellow-6: #f3d673;--knock-yellow-7: #e9c162;--knock-yellow-8: #f3d673;--knock-yellow-9: #ffc53d;--knock-yellow-10: #ffba18;--knock-yellow-11: #ab6400;--knock-yellow-12: #4f3422;--knock-blue-1: #fdfdfe;--knock-blue-2: #f7f9ff;--knock-blue-3: #edf2fe;--knock-blue-4: #e1e9ff;--knock-blue-5: #d2deff;--knock-blue-6: #c1d0ff;--knock-blue-7: #abbdf9;--knock-blue-8: #8da4ef;--knock-blue-9: #3e63dd;--knock-blue-10: #3358d4;--knock-blue-11: #3a5bc7;--knock-blue-12: #1f2d5c;--knock-red-1: #fffcfd;--knock-red-2: #fff7f8;--knock-red-3: #feeaed;--knock-red-4: #ffdce1;--knock-red-5: #ffced6;--knock-red-6: #f8bfc8;--knock-red-7: #efacb8;--knock-red-8: #e592a3;--knock-red-9: #e54666;--knock-red-10: #dc3b5d;--knock-red-11: #ca244d;--knock-red-12: #64172b;--knock-purple-1: #fdfcfe;--knock-purple-2: #faf8ff;--knock-purple-3: #f4f0fe;--knock-purple-4: #ebe4ff;--knock-purple-5: #e1d9ff;--knock-purple-6: #d4cafe;--knock-purple-7: #c2b5f5;--knock-purple-8: #aa99ec;--knock-purple-9: #654dc4;--knock-purple-10: #654dc4;--knock-purple-11: #6550b9;--knock-purple-12: #2f265f}[data-knock-color-mode=dark]{--knock-surface-1: #18191b;--knock-surface-2: #111110;--knock-gray-1: #111113;--knock-gray-2: #18191b;--knock-gray-3: #212225;--knock-gray-4: #272a2d;--knock-gray-5: #2e3135;--knock-gray-6: #363a3f;--knock-gray-7: #43484e;--knock-gray-8: #5a6169;--knock-gray-9: #696e77;--knock-gray-10: #777b84;--knock-gray-11: #b0b4ba;--knock-gray-12: #edeef0;--knock-beige-1: #111110;--knock-beige-2: #191918;--knock-beige-3: #222221;--knock-beige-4: #2a2a28;--knock-beige-5: #31312e;--knock-beige-6: #3b3a37;--knock-beige-7: #494844;--knock-beige-8: #62605b;--knock-beige-9: #6f6d66;--knock-beige-10: #7c7b74;--knock-beige-11: #b5b3ad;--knock-beige-12: #eeeeec;--knock-orange-1: #181111;--knock-orange-2: #1f1513;--knock-orange-3: #391714;--knock-orange-4: #4e1511;--knock-orange-5: #5e1c16;--knock-orange-6: #6e2920;--knock-orange-7: #853a2d;--knock-orange-8: #ac4d39;--knock-orange-9: #e54d2e;--knock-orange-10: #ec6142;--knock-orange-11: #ff977d;--knock-orange-12: #fbd3cb;--knock-green-1: #0d1512;--knock-green-2: #121c18;--knock-green-3: #0f2e22;--knock-green-4: #0b3b2c;--knock-green-5: #114837;--knock-green-6: #1b5745;--knock-green-7: #246854;--knock-green-8: #2a7e68;--knock-green-9: #29a383;--knock-green-10: #27b08b;--knock-green-11: #1fd8a4;--knock-green-12: #adf0d4;--knock-yellow-1: #16120c;--knock-yellow-2: #1d180f;--knock-yellow-3: #302008;--knock-yellow-4: #3f2700;--knock-yellow-5: #4d3000;--knock-yellow-6: #5c3d05;--knock-yellow-7: #714f19;--knock-yellow-8: #8f6424;--knock-yellow-9: #ffc53d;--knock-yellow-10: #ffd60a;--knock-yellow-11: #ffca16;--knock-yellow-12: #ffe7b3;--knock-blue-1: #11131f;--knock-blue-2: #141726;--knock-blue-3: #182449;--knock-blue-4: #1d2e62;--knock-blue-5: #253974;--knock-blue-6: #304384;--knock-blue-7: #3a4f97;--knock-blue-8: #435db1;--knock-blue-9: #3e63dd;--knock-blue-10: #5472e4;--knock-blue-11: #9eb1ff;--knock-blue-12: #d6e1ff;--knock-red-1: #191113;--knock-red-2: #1e1517;--knock-red-3: #3a141e;--knock-red-4: #4e1325;--knock-red-5: #5e1a2e;--knock-red-6: #6f2539;--knock-red-7: #883447;--knock-red-8: #b3445a;--knock-red-9: #e54666;--knock-red-10: #ec5a72;--knock-red-11: #ff949d;--knock-red-12: #fed2e1;--knock-purple-1: #14121f;--knock-purple-2: #1b1525;--knock-purple-3: #291f43;--knock-purple-4: #33255b;--knock-purple-5: #3c2e69;--knock-purple-6: #473876;--knock-purple-7: #56468b;--knock-purple-8: #6958ad;--knock-purple-9: #6e56cf;--knock-purple-10: #7d66d9;--knock-purple-11: #baa7ff;--knock-purple-12: #e2ddfe}[data-knock-color-mode=light]{--knock-guide-accent: var(--knock-gray-12);--knock-guide-accent-light: var(--knock-gray-4);--knock-guide-accent-dark: var(--knock-gray-12);--knock-guide-secondary: var(--knock-gray-9);--knock-guide-secondary-light: var(--knock-gray-3);--knock-guide-secondary-dark: var(--knock-gray-11);--knock-guide-content: var(--knock-gray-12);--knock-guide-content-light: var(--knock-gray-11);--knock-guide-content-disabled: var(--knock-gray-9);--knock-guide-content-contrast: var(--knock-white);--knock-guide-border: var(--knock-gray-5);--knock-guide-border-light: var(--knock-gray-4);--knock-guide-border-dark: var(--knock-gray-7);--knock-guide-surface: var(--knock-white);--knock-guide-surface-2: var(--knock-gray-2)}[data-knock-color-mode=dark]{--knock-guide-surface: var(--knock-white);--knock-guide-surface-2: var(--knock-gray-2);--knock-guide-accent: var(--knock-white);--knock-guide-accent-light: var(--knock-gray-4);--knock-guide-accent-dark: var(--knock-gray-12);--knock-guide-secondary: var(--knock-gray-9);--knock-guide-secondary-light: var(--knock-gray-3);--knock-guide-secondary-dark: var(--knock-gray-11);--knock-guide-content: var(--knock-gray-12);--knock-guide-content-light: var(--knock-gray-11);--knock-guide-content-disabled: var(--knock-gray-9);--knock-guide-content-contrast: var(--knock-gray-1);--knock-guide-border: var(--knock-gray-5);--knock-guide-border-light: var(--knock-gray-4);--knock-guide-border-dark: var(--knock-gray-7);--knock-guide-surface: var(--knock-gray-2);--knock-guide-surface-2: var(--knock-gray-1)}:root{--rnf-font-size-xs: .75rem;--rnf-font-size-sm: .875rem;--rnf-font-size-md: 1rem;--rnf-font-size-lg: 1.125rem;--rnf-font-size-xl: 1.266rem;--rnf-font-size-2xl: 1.5rem;--rnf-font-size-3xl: 1.75rem;--rnf-spacing-0: 0;--rnf-spacing-1: 4px;--rnf-spacing-2: 8px;--rnf-spacing-3: 12px;--rnf-spacing-4: 16px;--rnf-spacing-5: 20px;--rnf-spacing-6: 24px;--rnf-spacing-7: 32px;--rnf-spacing-8: 42px;--rnf-font-weight-normal: 400;--rnf-font-weight-medium: 500;--rnf-font-weight-semibold: 600;--rnf-font-weight-bold: 700;--rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rnf-border-radius-sm: 2px;--rnf-border-radius-md: 4px;--rnf-border-radius-lg: 8px;--rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, .12);--rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, .24);--rnf-color-white: #fff;--rnf-color-white-a-75: rgba(255, 255, 255, .75);--rnf-color-black: #000;--rnf-color-gray-900: #1a1f36;--rnf-color-gray-800: #3c4257;--rnf-color-gray-700: #3c4257;--rnf-color-gray-600: #515669;--rnf-color-gray-500: #697386;--rnf-color-gray-400: #9ea0aa;--rnf-color-gray-300: #a5acb8;--rnf-color-gray-200: #dddee1;--rnf-color-gray-100: #e4e8ee;--rnf-color-brand-500: #e95744;--rnf-color-brand-700: #e4321b;--rnf-color-brand-900: #891e10;--rnf-unread-badge-bg-color: #dd514c;--rnf-avatar-bg-color: #ef8476;--rnf-message-cell-unread-dot-bg-color: #f4ada4;--rnf-message-cell-hover-bg-color: #f1f6fc}:root{--rnf-button-padding-x: 8px;--rnf-button-padding-y: 4px;--rnf-button-border-radius: 4px;--rnf-button-font-weight: var(--rnf-font-weight-medium);--rnf-button-font-size: var(--rnf-font-size-sm);--rnf-button-primary-bg-color: var(--rnf-color-brand-500);--rnf-button-primary-hover-bg-color: var(--rnf-color-brand-700);--rnf-button-primary-border-color: transparent;--rnf-button-primary-text-color: var(--rnf-color-white);--rnf-button-secondary-bg-color: var(--rnf-color-white);--rnf-button-secondary-hover-bg-color: #dddee1;--rnf-button-secondary-border-color: #dddee1;--rnf-button-secondary-text-color: var(--rnf-color-gray-700)}.rnf-button{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;width:auto;padding:var(--rnf-button-padding-y) var(--rnf-button-padding-x);border-radius:var(--rnf-button-border-radius);font-size:var(--rnf-button-font-size);line-height:var(--rnf-font-size-lg);font-weight:var(--rnf-button-font-weight);border:1px solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:all .1s ease-in-out}.rnf-button--full-width{width:100%}.rnf-button--primary{background-color:var(--rnf-button-primary-bg-color);color:var(--rnf-button-primary-text-color);border-color:var(--rnf-button-primary-border-color)}.rnf-button--primary:hover:not(:disabled),.rnf-button--primary:active:not(:disabled){background-color:var(--rnf-button-primary-hover-bg-color)}.rnf-button:disabled{opacity:.4;cursor:not-allowed}.rnf-button--secondary{background-color:var(--rnf-button-secondary-bg-color);color:var(--rnf-button-secondary-text-color);border-color:var(--rnf-button-secondary-border-color)}.rnf-button--secondary:hover:not(:disabled),.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-button-secondary-hover-bg-color)}.rnf-button--dark.rnf-button--secondary{border-color:#43464c;background-color:#43464c;color:var(--rnf-color-white-a-75)}.rnf-button__button-text-hidden{opacity:0}.rnf-button--dark.rnf-button--secondary:hover:not(:disabled),.rnf-button--dark.rnf-button--secondary:active:not(:disabled){background-color:var(--rnf-color-gray-600)}.rnf-button-spinner{display:flex;align-items:center;font-size:1rem;line-height:"normal"}.rnf-button-spinner--without-label{position:absolute}.rnf-button-spinner--with-label{margin-right:6px}.rnf-button--primary .rnf-button-spinner circle{stroke:#fff}.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-button-secondary-text-color)}.rnf-button--dark.rnf-button--secondary .rnf-button-spinner circle{stroke:var(--rnf-color-white-a-75)}.rnf-button-group>.rnf-button+.rnf-button{margin-left:8px}:root{--rnf-empty-feed-max-w: 240px;--rnf-empty-feed-header-font-size: var(--rnf-font-size-md);--rnf-empty-feed-body-font-size: var(--rnf-font-size-sm)}.rnf-empty-feed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.rnf-empty-feed__inner{max-width:var(--rnf-empty-feed-max-w);margin:-20px auto 0;text-align:center}.rnf-empty-feed__header{font-size:var(--rnf-empty-feed-header-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin:0 0 var(--rnf-spacing-1)}.rnf-empty-feed__body{font-size:var(--rnf-empty-feed-body-font-size);color:var(--rnf-color-gray-300);margin:0}.rnf-empty-feed--dark .rnf-empty-feed__header{color:var(--rnf-color-white-a-75)}.rnf-empty-feed--dark .rnf-empty-feed__body{color:var(--rnf-color-gray-400)}:root{--rnf-avatar-bg-color: #ef8476;--rnf-avatar-size: 32px;--rnf-avatar-initials-font-size: var(--rnf-font-size-md);--rnf-avatar-initials-line-height: var(--rnf-font-size-lg);--rnf-avatar-initials-color: #fff;--rnf-notification-cell-border-bottom-color: #e4e8ee;--rnf-notification-cell-padding: var(--rnf-spacing-3);--rnf-notification-cell-active-bg-color: #f1f6fc;--rnf-notification-cell-unread-dot-size: 6px;--rnf-notification-cell-unread-dot-bg-color: #80c7f5;--rnf-notification-cell-unread-dot-border-color: #3192e3;--rnf-notification-cell-content-color: var(--rnf-color-gray-900);--rnf-notification-cell-content-font-size: var(--rnf-font-size-sm);--rnf-notification-cell-content-line-height: var(--rnf-font-size-lg);--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-400);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-500)}.rnf-avatar{background-color:var(--rnf-avatar-bg-color);border-radius:var(--rnf-avatar-size);width:var(--rnf-avatar-size);height:var(--rnf-avatar-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.rnf-avatar__initials{font-size:var(--rnf-avatar-initials-font-size);line-height:var(--rnf-avatar-initials-line-height);color:var(--rnf-avatar-initials-color)}.rnf-avatar__image{object-fit:cover;width:var(--rnf-avatar-size);height:var(--rnf-avatar-size)}.rnf-notification-cell{background-color:transparent;position:relative;border-bottom:1px solid var(--rnf-notification-cell-border-bottom-color)}.rnf-notification-cell:last-child{border-bottom-color:transparent}.rnf-notification-cell:hover,.rnf-notification-cell:focus,.rnf-notification-cell:active{background-color:var(--rnf-notification-cell-active-bg-color);outline:none}.rnf-notification-cell__inner{border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;text-decoration:none;display:flex;padding:var(--rnf-notification-cell-padding);cursor:pointer;text-align:left;justify-content:flex-start}.rnf-notification-cell__unread-dot{position:absolute;top:var(--rnf-notification-cell-unread-dot-size);left:var(--rnf-notification-cell-unread-dot-size);width:var(--rnf-notification-cell-unread-dot-size);height:var(--rnf-notification-cell-unread-dot-size);border-radius:var(--rnf-notification-cell-unread-dot-size);background-color:var(--rnf-notification-cell-unread-dot-bg-color);border:1px solid var(--rnf-notification-cell-unread-dot-border-color)}.rnf-notification-cell__content-outer{margin-left:var(--rnf-spacing-3)}.rnf-notification-cell__content{color:var(--rnf-notification-cell-content-color);display:block;font-weight:var(--rnf-font-weight-normal);font-size:var(--rnf-notification-cell-content-font-size);line-height:var(--rnf-notification-cell-content-line-height);margin-bottom:var(--rnf-spacing-1);word-break:break-word;word-wrap:break-word}.rnf-notification-cell__content h1,.rnf-notification-cell__content h2,.rnf-notification-cell__content h3,.rnf-notification-cell__content h4{font-weight:var(--rnf-font-weight-semibold);margin-bottom:.5em}.rnf-notification-cell__content h1{font-size:var(--rnf-font-size-2xl)}.rnf-notification-cell__content h2{font-size:var(--rnf-font-size-xl)}.rnf-notification-cell__content h3{font-size:var(--rnf-font-size-lg)}.rnf-notification-cell__content h4{font-size:var(--rnf-font-size-md)}.rnf-notification-cell__content p{margin:0 0 .75em}.rnf-notification-cell__content p:last-child{margin-bottom:0}.rnf-notification-cell__content blockquote{border-left:3px solid var(--rnf-color-gray-300);padding-left:var(--rnf-spacing-3);line-height:var(--rnf-font-size-xl);margin:0}.rnf-notification-cell__content strong{font-weight:var(--rnf-font-weight-semibold)}.rnf-notification-cell__timestamp{display:block;color:var(--rnf-color-gray-300);font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-normal);line-height:var(--rnf-font-size-lg)}.rnf-notification-cell__child-content,.rnf-notification-cell__button-group{margin:.75em 0 .5em}.rnf-archive-notification-btn{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;opacity:0;width:24px;height:24px;cursor:pointer;margin-left:auto;color:var(--rnf-archive-notification-btn-bg-color);padding:var(--rnf-spacing-1) var(--rnf-spacing-2);transition:color .1s ease-in-out,opacity .2s ease-in-out}.rnf-notification-cell:focus .rnf-archive-notification-btn,.rnf-notification-cell:hover .rnf-archive-notification-btn,.rnf-notification-cell:active .rnf-archive-notification-btn{opacity:1}.rnf-archive-notification-btn:focus,.rnf-archive-notification-btn:hover,.rnf-archive-notification-btn:active{outline:none;opacity:1;color:var(--rnf-archive-notification-btn-bg-color-active)}.rnf-tooltip{background-color:var(--rnf-color-gray-700);border-radius:4px;box-shadow:0 2px 4px #0000002e;color:#fff;display:flex;flex-direction:column;padding:var(--rnf-spacing-1) var(--rnf-spacing-2);font-size:var(--rnf-font-size-xs);line-height:var(--rnf-font-size-s);font-weight:var(--rnf-font-weight-medium);transition:opacity .3s;z-index:9999}.rnf-notification-cell--dark{--rnf-notification-cell-border-bottom-color: rgba(105, 115, 134, .65);--rnf-notification-cell-active-bg-color: #393b40;--rnf-notification-cell-content-color: var(--rnf-color-white-a-75)}.rnf-notification-cell--dark:last-child{border-bottom-color:transparent}.rnf-notification-cell--dark .rnf-notification-cell__timestamp{color:var(--rnf-color-gray-500)}.rnf-archive-notification-btn--dark{--rnf-archive-notification-btn-bg-color: var(--rnf-color-gray-500);--rnf-archive-notification-btn-bg-color-active: var(--rnf-color-gray-400)}.rnf-tooltip--dark{background-color:#565a61}@media screen and (hover: none){.rnf-archive-notification-btn{opacity:1}}:root{--rnf-notification-feed-header-height: 45px}.rnf-notification-feed{background-color:var(--rnf-color-white);height:100%;display:flex;flex-direction:column}.rnf-dropdown{font-size:var(--rnf-font-size-md);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-400);position:relative}.rnf-dropdown select{padding-right:var(--rnf-spacing-3);color:currentColor;border:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--rnf-font-size-sm);position:relative;text-align:right;z-index:2}.rnf-dropdown svg{position:absolute;top:50%;margin-top:-2px;right:0;z-index:1}.rnf-mark-all-as-read{border:none;background:transparent;margin-left:auto;display:flex;align-items:center;padding:0;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-400);cursor:pointer}.rnf-mark-all-as-read:disabled{color:var(--rnf-color-gray-200);cursor:not-allowed}.rnf-mark-all-as-read svg{margin-top:1px;margin-left:var(--rnf-spacing-1)}.rnf-notification-feed__header{padding:var(--rnf-spacing-3) var(--rnf-spacing-4);height:var(--rnf-notification-feed-header-height);display:flex;align-items:center}.rnf-notification-feed__selector{display:flex;align-items:center}.rnf-notification-feed__type{font-size:var(--rnf-font-size-sm);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-gray-900);margin-right:var(--rnf-spacing-2)}.rnf-notification-feed__container{overflow-y:auto;flex:1}.rnf-notification-feed__spinner-container{padding:var(--rnf-spacing-3) var(--rnf-spacing-4)}.rnf-notification-feed__spinner-container svg{margin:0 auto;display:block}.rnf-notification-feed__knock-branding{text-align:center}.rnf-notification-feed__knock-branding a{display:block;font-size:var(--rnf-font-size-sm);color:var(--rnf-color-gray-500);padding:6px;border-top:1px solid var(--rnf-color-gray-100)}.rnf-notification-feed__knock-branding a:hover{background-color:#f1f6fc}.rnf-notification-feed--dark{background-color:#2e2f34}.rnf-notification-feed--dark .rnf-notification-feed__type{color:var(--rnf-color-white-a-75)}.rnf-dropdown--dark{color:var(--rnf-color-gray-400)}.rnf-mark-all-as-read--dark:disabled{color:var(--rnf-color-gray-500)}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a{color:var(--rnf-color-gray-400);border-top-color:#697386a6}.rnf-notification-feed--dark .rnf-notification-feed__knock-branding a:hover{background-color:#393b40}.rnf-feed-provider{font-family:var(--rnf-font-family-sanserif)!important;margin:0!important;padding:0!important}.rnf-feed-provider [class^=rnf-]{font-family:var(--rnf-font-family-sanserif)!important;box-sizing:border-box}:root{--rnf-notification-feed-popover-max-w: 400px;--rnf-notification-feed-popover-min-w: 280px;--rnf-notification-feed-popover-height: 400px;--rnf-notification-feed-popover-shadow: drop-shadow( 0px 5px 15px rgba(0, 0, 0, .2) );--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2);--rnf-notification-feed-popover-bg-color: #fff;--rnf-notification-feed-popover-z-index: 999;--rnf-notification-feed-popover-arrow-size: 10px;--rnf-notification-feed-popover-border-radius: 4px}.rnf-notification-feed-popover{width:100%;max-width:var(--rnf-notification-feed-popover-max-w);min-width:var(--rnf-notification-feed-popover-min-w);height:var(--rnf-notification-feed-popover-height);z-index:var(--rnf-notification-feed-popover-z-index)}.rnf-notification-feed-popover__inner{overflow:hidden;background-color:var(--rnf-notification-feed-popover-bg-color);border-radius:var(--rnf-notification-feed-popover-border-radius);filter:var(--rnf-notification-feed-popover-shadow);height:100%}.rnf-notification-feed-popover__arrow{position:absolute;width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover__arrow:after{content:" ";display:block;background-color:var(--rnf-notification-feed-popover-bg-color);box-shadow:-1px -1px 1px var(--rnf-notification-feed-popover-shadow-color);position:absolute;top:-5px;left:0;transform:rotate(45deg);width:var(--rnf-notification-feed-popover-arrow-size);height:var(--rnf-notification-feed-popover-arrow-size)}.rnf-notification-feed-popover--dark{--rnf-notification-feed-popover-shadow-color: rgba(0, 0, 0, .2)}:root{--rnf-unseen-badge-bg-color: #eb5757;--rnf-unseen-badge-size: 16px;--rnf-unseed-badge-font-size: 9px}.rnf-unseen-badge{background-color:var(--rnf-unseen-badge-bg-color);width:var(--rnf-unseen-badge-size);height:var(--rnf-unseen-badge-size);border-radius:var(--rnf-unseen-badge-size);position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0}.rnf-unseen-badge__count{font-size:var(--rnf-unseed-badge-font-size);font-weight:var(--rnf-font-weight-medium);color:var(--rnf-color-white);margin-top:-1px}.rnf-unseen-badge--dark{--rnf-unseen-badge-bg-color: #ef3434}:root{--rnf-notification-icon-button-size: 32px;--rnf-notification-icon-button-bg-color: transparent}.rnf-notification-icon-button{background-color:var(--rnf-notification-icon-button-bg-color);border:none;position:relative;display:block;margin:0;padding:0;cursor:pointer;width:var(--rnf-notification-icon-button-size);height:var(--rnf-notification-icon-button-size);color:inherit}.rnf-notification-icon-button svg{display:block;margin:0 auto}.rnf-notification-icon-button--dark{color:#fff}.knock-guide-banner{display:flex;align-items:center;justify-content:space-between;background:var(--knock-guide-surface);padding:var(--knock-spacing-4) var(--knock-spacing-6);border-radius:var(--knock-rounded-4);border:.5px solid var(--knock-guide-border);box-shadow:var(--knock-shadow-2);gap:var(--knock-spacing-4)}.knock-guide-banner__message{min-width:var(--knock-spacing-96)}.knock-guide-banner__title{color:var(--knock-guide-content);font-size:var(--knock-text-4);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-4)}.knock-guide-banner__body{color:var(--knock-guide-content-light);font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3)}.knock-guide-banner__body>:first-child{margin-top:0}.knock-guide-banner__body>:last-child{margin-bottom:0}.knock-guide-banner__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--knock-spacing-3)}.knock-guide-banner__action{text-decoration:none;font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3);border-radius:var(--knock-rounded-3);padding:0 var(--knock-spacing-4);box-sizing:border-box;height:var(--knock-spacing-10);display:flex;align-items:center;justify-content:center;border:.5px solid var(--knock-guide-accent);background:var(--knock-guide-accent);color:var(--knock-guide-content-contrast);cursor:pointer}.knock-guide-banner__action--secondary{border-color:var(--knock-guide-border-dark);background:var(--knock-guide-surface);color:var(--knock-guide-content)}.knock-guide-banner__close{padding:var(--knock-spacing-3);border:none;background:none;line-height:0;cursor:pointer}.knock-guide-card{background:var(--knock-guide-surface);padding:var(--knock-spacing-4);border-radius:var(--knock-rounded-2);border:.5px solid var(--knock-guide-border);display:flex;flex-direction:column;gap:var(--knock-spacing-4);max-width:var(--knock-spacing-96)}.knock-guide-card__header{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:var(--knock-spacing-2)}.knock-guide-card__headline{color:var(--knock-guide-accent-dark);font-size:var(--knock-text-1);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-1);letter-spacing:var(--knock-tracking-1)}.knock-guide-card__message{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.knock-guide-card__title{color:var(--knock-guide-content);font-size:var(--knock-text-4);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-4)}.knock-guide-card__body{color:var(--knock-guide-content-light);font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3)}.knock-guide-card__body>:first-child{margin-top:0}.knock-guide-card__body>:last-child{margin-bottom:0}.knock-guide-card__img{display:block;max-width:100%;height:auto}.knock-guide-card__actions{display:flex;align-items:center;gap:var(--knock-spacing-3)}.knock-guide-card__action{text-decoration:none;font-size:var(--knock-text-3);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-3);border-radius:var(--knock-rounded-3);padding:0 var(--knock-spacing-4);box-sizing:border-box;height:var(--knock-spacing-10);display:flex;align-items:center;justify-content:center;border:.5px solid var(--knock-guide-accent);background:var(--knock-guide-accent);color:var(--knock-guide-content-contrast);cursor:pointer}.knock-guide-card__action--secondary{border-color:var(--knock-guide-border-dark);background:var(--knock-guide-surface);color:var(--knock-guide-content)}.knock-guide-card__close{padding:var(--knock-spacing-3);border:none;background:none;line-height:0;cursor:pointer}.knock-guide-modal{font-family:var(--knock-family-sans);background:var(--knock-guide-surface);padding:var(--knock-spacing-4) var(--knock-spacing-6) var(--knock-spacing-6);border-radius:var(--knock-rounded-4);border:.5px solid var(--knock-guide-border);box-shadow:var(--knock-shadow-3);max-width:var(--knock-spacing-96);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-height:calc(100vh - var(--knock-spacing-32));max-width:min(100vw - var(--knock-spacing-8),var(--knock-spacing-140))}.knock-guide-modal__overlay{background-color:var(--knock-alpha-black-6);position:fixed;top:0;right:0;bottom:0;left:0}.knock-guide-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--knock-spacing-2);padding-bottom:var(--knock-spacing-1)}.knock-guide-modal__title{color:var(--knock-guide-content);font-size:var(--knock-text-4);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-4);margin:0}.knock-guide-modal__body{color:var(--knock-guide-content-light);font-size:var(--knock-text-3);font-weight:var(--knock-weight-regular);line-height:var(--knock-leading-3);margin:0}.knock-guide-modal__body>:first-child{margin-top:0}.knock-guide-modal__body>:last-child{margin-bottom:0}.knock-guide-modal__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--knock-spacing-3);margin-top:var(--knock-spacing-4)}.knock-guide-modal__img{display:block;margin-top:var(--knock-spacing-4);max-width:100%;height:auto}.knock-guide-modal__action{text-decoration:none;text-align:center;font-size:var(--knock-text-3);font-weight:var(--knock-weight-medium);line-height:var(--knock-leading-3);border-radius:var(--knock-rounded-3);padding:0 var(--knock-spacing-4);box-sizing:border-box;height:var(--knock-spacing-10);display:flex;align-items:center;justify-content:center;border:.5px solid var(--knock-guide-accent);background:var(--knock-guide-accent);color:var(--knock-guide-content-contrast);width:100%;cursor:pointer}.knock-guide-modal__action--secondary{border-color:var(--knock-guide-border-dark);background:var(--knock-guide-surface);color:var(--knock-guide-content)}.knock-guide-modal__close{padding:var(--knock-spacing-3);border:none;background:none;line-height:0;cursor:pointer}:root{--tgph-surface-1:#fff;--tgph-surface-2:#f9f9f8;--tgph-gray-1:#fcfcfd;--tgph-gray-2:#f9f9fb;--tgph-gray-3:#f0f0f3;--tgph-gray-4:#e8e8ec;--tgph-gray-5:#e0e1e6;--tgph-gray-6:#d9d9e0;--tgph-gray-7:#cdced6;--tgph-gray-8:#b9bbc6;--tgph-gray-9:#8b8d98;--tgph-gray-10:#80838d;--tgph-gray-11:#60646c;--tgph-gray-12:#1c2024;--tgph-beige-1:#fdfdfc;--tgph-beige-2:#f9f9f8;--tgph-beige-3:#f1f0ef;--tgph-beige-4:#e9e8e6;--tgph-beige-5:#e2e1de;--tgph-beige-6:#dad9d6;--tgph-beige-7:#cfceca;--tgph-beige-8:#bcbbb5;--tgph-beige-9:#8d8d86;--tgph-beige-10:#82827c;--tgph-beige-11:#63635e;--tgph-beige-12:#21201c;--tgph-accent-1:#fffcfc;--tgph-accent-2:#fff8f7;--tgph-accent-3:#feebe7;--tgph-accent-4:#ffdcd3;--tgph-accent-5:#ffcdc2;--tgph-accent-6:#fdbdaf;--tgph-accent-7:#f5a898;--tgph-accent-8:#ec8e7b;--tgph-accent-9:#e54d2e;--tgph-accent-10:#dd4425;--tgph-accent-11:#d13415;--tgph-accent-12:#5c271f;--tgph-green-1:#fbfefd;--tgph-green-2:#f4fbf7;--tgph-green-3:#e6f7ed;--tgph-green-4:#d6f1e3;--tgph-green-5:#c3e9d7;--tgph-green-6:#acdec8;--tgph-green-7:#8bceb6;--tgph-green-8:#56ba9f;--tgph-green-9:#29a383;--tgph-green-10:#26997b;--tgph-green-11:#208368;--tgph-green-12:#1d3b31;--tgph-yellow-1:#fefdfb;--tgph-yellow-2:#fefbe9;--tgph-yellow-3:#fff7c2;--tgph-yellow-4:#ffee9c;--tgph-yellow-5:#fbe577;--tgph-yellow-6:#f3d673;--tgph-yellow-7:#e9c162;--tgph-yellow-8:#f3d673;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffba18;--tgph-yellow-11:#ab6400;--tgph-yellow-12:#4f3422;--tgph-blue-1:#fdfdfe;--tgph-blue-2:#f7f9ff;--tgph-blue-3:#edf2fe;--tgph-blue-4:#e1e9ff;--tgph-blue-5:#d2deff;--tgph-blue-6:#c1d0ff;--tgph-blue-7:#abbdf9;--tgph-blue-8:#8da4ef;--tgph-blue-9:#3e63dd;--tgph-blue-10:#3358d4;--tgph-blue-11:#3a5bc7;--tgph-blue-12:#1f2d5c;--tgph-red-1:#fffcfd;--tgph-red-2:#fff7f8;--tgph-red-3:#feeaed;--tgph-red-4:#ffdce1;--tgph-red-5:#ffced6;--tgph-red-6:#f8bfc8;--tgph-red-7:#efacb8;--tgph-red-8:#e592a3;--tgph-red-9:#e54666;--tgph-red-10:#dc3b5d;--tgph-red-11:#ca244d;--tgph-red-12:#64172b;--tgph-purple-1:#fdfcfe;--tgph-purple-2:#faf8ff;--tgph-purple-3:#f4f0fe;--tgph-purple-4:#ebe4ff;--tgph-purple-5:#e1d9ff;--tgph-purple-6:#d4cafe;--tgph-purple-7:#c2b5f5;--tgph-purple-8:#aa99ec;--tgph-purple-9:#654dc4;--tgph-purple-10:#654dc4;--tgph-purple-11:#6550b9;--tgph-purple-12:#2f265f;--tgph-border-style-solid:solid;--tgph-border-style-dashed:dashed;--tgph-transparent:transparent;--tgph-white:#fff;--tgph-black:#000;--tgph-alpha-white-1:#ffffff0d;--tgph-alpha-white-2:#ffffff1a;--tgph-alpha-white-3:#ffffff26;--tgph-alpha-white-4:#fff3;--tgph-alpha-white-5:#ffffff4d;--tgph-alpha-white-6:#fff6;--tgph-alpha-white-7:#ffffff80;--tgph-alpha-white-8:#fff9;--tgph-alpha-white-9:#ffffffb3;--tgph-alpha-white-10:#fffc;--tgph-alpha-white-11:#ffffffe6;--tgph-alpha-white-12:#fffffff2;--tgph-alpha-black-1:#0000000d;--tgph-alpha-black-2:#0000001a;--tgph-alpha-black-3:#00000026;--tgph-alpha-black-4:#0003;--tgph-alpha-black-5:#0000004d;--tgph-alpha-black-6:#0006;--tgph-alpha-black-7:#00000080;--tgph-alpha-black-8:#0009;--tgph-alpha-black-9:#000000b3;--tgph-alpha-black-10:#000c;--tgph-alpha-black-11:#000000e6;--tgph-alpha-black-12:#000000f2;--tgph-rounded-0:0px;--tgph-rounded-1:.125rem;--tgph-rounded-2:.25rem;--tgph-rounded-3:.375rem;--tgph-rounded-4:.5rem;--tgph-rounded-5:.75rem;--tgph-rounded-6:1rem;--tgph-rounded-full:9999px;--tgph-shadow-0:0px 0px 0px 0px #0000;--tgph-shadow-1:0px 5px 2px 0px #1c202403,0px 3px 2px 0px #1c202408,0px 1px 1px 0px #1c20240d,0px 0px 1px 0px #1c20240f;--tgph-shadow-2:0px 16px 7px 0px #1c202403,0px 9px 6px 0px #1c202408,0px 4px 4px 0px #1c20240d,0px 1px 2px 0px #1c20240f;--tgph-shadow-3:0px 29px 12px 0px #1c202403,0px 16px 10px 0px #1c202408,0px 7px 7px 0px #1c20240d,0px 2px 4px 0px #1c20240f;--tgph-shadow-inner:0px 5px 2px 0px #1c202403 inset,0px 3px 2px 0px #1c202408 inset,0px 1px 1px 0px #1c20240d inset,0px 0px 1px 0px #1c20240f inset;--tgph-spacing-0:0px;--tgph-spacing-1:.25rem;--tgph-spacing-2:.5rem;--tgph-spacing-3:.75rem;--tgph-spacing-4:1rem;--tgph-spacing-5:1.25rem;--tgph-spacing-6:1.5rem;--tgph-spacing-7:1.75rem;--tgph-spacing-8:2rem;--tgph-spacing-9:2.25rem;--tgph-spacing-10:2.5rem;--tgph-spacing-11:2.75rem;--tgph-spacing-12:3rem;--tgph-spacing-14:3.5rem;--tgph-spacing-16:4rem;--tgph-spacing-20:5rem;--tgph-spacing-24:6rem;--tgph-spacing-28:7rem;--tgph-spacing-32:8rem;--tgph-spacing-36:9rem;--tgph-spacing-40:10rem;--tgph-spacing-44:11rem;--tgph-spacing-48:12rem;--tgph-spacing-52:13rem;--tgph-spacing-56:14rem;--tgph-spacing-60:15rem;--tgph-spacing-64:16rem;--tgph-spacing-72:18rem;--tgph-spacing-80:20rem;--tgph-spacing-96:24rem;--tgph-spacing-140:35rem;--tgph-spacing-160:40rem;--tgph-spacing-px:1px;--tgph-spacing-full:100%;--tgph-spacing-auto:auto;--tgph-family-sans:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--tgph-family-mono:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--tgph-leading-0:1rem;--tgph-leading-1:1rem;--tgph-leading-2:1.25rem;--tgph-leading-3:1.5rem;--tgph-leading-4:1.75rem;--tgph-leading-5:1.75rem;--tgph-leading-6:2rem;--tgph-leading-7:2.25rem;--tgph-leading-8:2.5rem;--tgph-leading-9:3.5rem;--tgph-leading-code-0:1rem;--tgph-leading-code-1:1rem;--tgph-leading-code-2:1.25rem;--tgph-leading-code-3:1.5rem;--tgph-leading-code-4:1.75rem;--tgph-leading-code-5:1.75rem;--tgph-leading-code-6:2rem;--tgph-leading-code-7:2.25rem;--tgph-leading-code-8:2.5rem;--tgph-leading-code-9:3rem;--tgph-tracking-0:.25%;--tgph-tracking-1:.25%;--tgph-tracking-2:0;--tgph-tracking-3:0;--tgph-tracking-4:-.25%;--tgph-tracking-5:-.5%;--tgph-tracking-6:-.625%;--tgph-tracking-7:-.75%;--tgph-tracking-8:-1%;--tgph-tracking-9:-2.5%;--tgph-text-0:.6875rem;--tgph-text-1:.75rem;--tgph-text-2:.875rem;--tgph-text-3:1rem;--tgph-text-4:1.125rem;--tgph-text-5:1.25rem;--tgph-text-6:1.5rem;--tgph-text-7:1.875rem;--tgph-text-8:2.25rem;--tgph-text-9:3rem;--tgph-text-code-0:.625rem;--tgph-text-code-1:.688rem;--tgph-text-code-2:.812rem;--tgph-text-code-4:1.062rem;--tgph-text-code-5:1.188rem;--tgph-text-code-6:1.438rem;--tgph-text-code-7:1.75rem;--tgph-text-code-8:2.125rem;--tgph-text-code-9:2.875rem;--tgph-weight-regular:400;--tgph-weight-medium:500;--tgph-weight-semi-bold:600;--tgph-breakpoint-sm:640px;--tgph-breakpoint-md:768px;--tgph-breakpoint-lg:1024px;--tgph-breakpoint-xl:1280px;--tgph-breakpoint-2xl:1536px;--tgph-zIndex-hidden:-1;--tgph-zIndex-base:0;--tgph-zIndex-auto:auto;--tgph-zIndex-dropdown:1000;--tgph-zIndex-sticky:1100;--tgph-zIndex-banner:1200;--tgph-zIndex-overlay:1300;--tgph-zIndex-modal:1400;--tgph-zIndex-popover:1500;--tgph-zIndex-skipLink:1600;--tgph-zIndex-toast:1700;--tgph-zIndex-tooltip:1800}.tgph-text,.tgph-heading,.tgph-code{--color: var(--tgph-gray-12);--font-size: var(--tgph-text-2);--weight: var(--tgph-weight-regular);--leading: var(--tgph-leading-2);--tracking: var(--tgph-tracking-2);--text-align: left;--font-family: var(--tgph-family-sans);--text-overflow: clip;color:var(--color);font-size:var(--font-size);font-weight:var(--weight);line-height:var(--leading);letter-spacing:var(--tracking);text-align:var(--text-align);box-sizing:border-box;font-family:var(--font-family);text-overflow:var(--text-overflow)}.tgph-button{--tgph-button-hover-shadow: none;--tgph-button-focus-shadow: none;--tgph-button-active-shadow: none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;box-sizing:border-box;font-family:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out;text-decoration:none}.tgph-button:hover{box-shadow:var(--tgph-button-hover-shadow)}.tgph-button:focus{box-shadow:var(--tgph-button-focus-shadow)}.tgph-button[data-tgph-button-state=active]{box-shadow:var(--tgph-button-active-shadow);background-color:var(--active_backgroundColor)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=solid],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=soft],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=outline]{background-color:var(--tgph-gray-3)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=ghost]{background-color:var(--tgph-transparent)}.tgph-button:disabled{cursor:not-allowed}.tgph-button[data-tgph-button-state=disabled]:hover{background-color:revert}[data-tgph-button-loading-icon]{animation:button-loading-icon 1s infinite linear}@keyframes button-loading-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tgph-icon{display:inline-block}.tgph-box{--background-color: none;--border-color: var(--tgph-gray-6);--box-shadow: none;--border-style: solid;--border-width: 0;--padding: 0;--margin: 0;--border-radius: 0;--width: auto;--max-width: auto;--min-width: auto;--height: auto;--max-height: auto;--min-height: auto;--z-index: auto;--position: static;--top: auto;--left: auto;--right: auto;--bottom: auto;--overflow: visible;background-color:var(--background-color);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--box-shadow);padding:var(--padding);margin:var(--margin);border-radius:var(--border-radius);width:var(--width);max-width:var(--max-width);min-width:var(--min-width);height:var(--height);max-height:var(--max-height);min-height:var(--min-height);z-index:var(--z-index);position:var(--position);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom);overflow:var(--overflow)}.tgph-box--interactive{--hover_backgroundColor: none;--focus_backgroundColor: none;--active_backgroundColor: none}.tgph-box--interactive:hover{background-color:var(--hover_backgroundColor)}.tgph-box--interactive:focus{background-color:var(--focus_backgroundColor)}.tgph-box--interactive:active{background-color:var(--active_backgroundColor)}.tgph-stack{--display: flex;--direction: row;--wrap: nowrap;--justify: flex-start;--align: stretch;--gap: 0;display:var(--display);flex-direction:var(--direction);flex-wrap:var(--wrap);justify-content:var(--justify);align-items:var(--align);gap:var(--gap)}.tgph .order-1{order:1}.tgph .order-2{order:2}.tgph .order-3{order:3}.tgph .box-border{box-sizing:border-box}.tgph .flex{display:flex}.tgph .aspect-square{aspect-ratio:1 / 1}.tgph .h-10{height:var(--tgph-spacing-10)}.tgph .h-6{height:var(--tgph-spacing-6)}.tgph .h-8{height:var(--tgph-spacing-8)}.tgph .h-full{height:var(--tgph-spacing-full)}.tgph .w-full{width:var(--tgph-spacing-full)}.tgph .cursor-not-allowed{cursor:not-allowed}.tgph .appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.tgph .items-center{align-items:center}.tgph .justify-center{justify-content:center}.tgph .rounded-2{border-radius:var(--tgph-rounded-2)}.tgph .rounded-3{border-radius:var(--tgph-rounded-3)}.tgph .border,.tgph .border-\[1px\]{border-width:1px}.tgph .border-solid{border-style:solid}.tgph .border-none{border-style:none}.tgph .border-gray-2{border-color:var(--tgph-gray-2)}.tgph .border-gray-6{border-color:var(--tgph-gray-6)}.tgph .border-red-6{border-color:var(--tgph-red-6)}.tgph .border-transparent{border-color:var(--tgph-transparent)}.tgph .bg-gray-2{background-color:var(--tgph-gray-2)}.tgph .bg-surface-1{background-color:var(--tgph-surface-1)}.tgph .bg-transparent{background-color:var(--tgph-transparent)}.tgph .\!p-1{padding:var(--tgph-spacing-1)!important}.tgph .px-1{padding-left:var(--tgph-spacing-1);padding-right:var(--tgph-spacing-1)}.tgph .px-2{padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph .px-3{padding-left:var(--tgph-spacing-3);padding-right:var(--tgph-spacing-3)}.tgph .pl-0{padding-left:var(--tgph-spacing-0)}.tgph .pl-1{padding-left:var(--tgph-spacing-1)}.tgph .pl-2{padding-left:var(--tgph-spacing-2)}.tgph .pl-3{padding-left:var(--tgph-spacing-3)}.tgph .pr-1{padding-right:var(--tgph-spacing-1)}.tgph .pr-2{padding-right:var(--tgph-spacing-2)}.tgph .pr-3{padding-right:var(--tgph-spacing-3)}.tgph .text-gray-12{color:var(--tgph-gray-12)}.tgph .shadow-0{--tw-shadow: var(--tgph-shadow-0);--tw-shadow-colored: var(--tgph-shadow-0);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph .outline{outline-style:solid}.tgph .outline-0{outline-width:0px}.tgph .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tgph .\[font-family\:inherit\]{font-family:inherit}.tgph .placeholder\:text-gray-10::-moz-placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-10::placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-9::-moz-placeholder{color:var(--tgph-gray-9)}.tgph .placeholder\:text-gray-9::placeholder{color:var(--tgph-gray-9)}.tgph .focus-within\:\!border-blue-8:focus-within{border-color:var(--tgph-blue-8)!important}.tgph .focus-within\:\!bg-gray-4:focus-within{background-color:var(--tgph-gray-4)!important}.tgph .hover\:border-gray-7:hover{border-color:var(--tgph-gray-7)}.tgph .hover\:bg-gray-3:hover{background-color:var(--tgph-gray-3)}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:aspect-square:has([data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:\!p-1:has([data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-1)!important}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'default\'\]\]\:px-2>[data-tgph-button-layout=default]){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:aspect-square>[data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:p-0>[data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-0)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:h-auto>[data-tgph-button]){height:var(--tgph-spacing-auto)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:w-full>[data-tgph-button]){width:var(--tgph-spacing-full)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-1>[data-tgph-button]){border-radius:var(--tgph-rounded-1)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-2>[data-tgph-button]){border-radius:var(--tgph-rounded-2)}.tgph :is(.\[\&\>input\]\:text-gray-9>input){color:var(--tgph-gray-9)}.tgph :is(.\[\&_\[data-tgph-icon\]\]\:text-gray-8 [data-tgph-icon]){color:var(--tgph-gray-8)}.tgph-motion{--motion-opacity: 1;--motion-scale: 1;--motion-x: 0;--motion-y: 0;--motion-transition-duration: .2s;--motion-transition-type: ease-in-out;--motion-rotate: 0deg;opacity:var(--motion-opacity);transform:scale(var(--motion-scale)) translate(var(--motion-x),var(--motion-y)) rotate(var(--motion-rotate));transition:all var(--motion-transition-duration) var(--motion-transition-type)}:root{--rtk-font-size-xs: .75rem;--rtk-font-size-sm: .875rem;--rtk-font-size-md: 1rem;--rtk-font-size-lg: 1.125rem;--rtk-font-size-xl: 1.266rem;--rtk-font-size-2xl: 1.5rem;--rtk-font-size-3xl: 1.75rem;--rtk-spacing-0: 0rem;--rtk-spacing-1: .25rem;--rtk-spacing-2: .5rem;--rtk-spacing-3: .75rem;--rtk-spacing-4: 1rem;--rtk-spacing-5: 1.25rem;--rtk-spacing-6: 1.5rem;--rtk-spacing-7: 2rem;--rtk-font-weight-normal: 400;--rtk-font-weight-medium: 500;--rtk-font-weight-semibold: 600;--rtk-font-weight-bold: 700;--rtk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rtk-border-radius-sm: 2px;--rtk-border-radius-md: 4px;--rtk-border-radius-lg: 8px;--rtk-button-border-radius: 6px;--rtk-color-white: #fff;--rtk-color-white-a-75: rgba(255, 255, 255, .75);--rtk-color-black: #000;--rtk-color-gray-900: #1a1f36;--rtk-color-gray-800: #3c4257;--rtk-color-gray-700: #3c4257;--rtk-color-gray-600: #515669;--rtk-color-gray-500: #697386;--rtk-color-gray-400: #9ea0aa;--rtk-color-gray-300: #a5acb8;--rtk-color-gray-200: #dddee1;--rtk-color-gray-100: #e4e8ee;--rtk-color-brand-500: #e95744;--rtk-color-brand-700: #e4321b;--rtk-color-brand-900: #891e10;--rtk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rtk-connected-color: rgba(51, 163, 102, 1);--rtk-disconnect-border-color: rgba(230, 71, 51, 1);--rtk-disconnect-background-color: rgba(255, 245, 245, 1);--rtk-error-red: rgba(205, 123, 46, 1)}.rtk-connect__button{background-color:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-200);border-radius:var(--rtk-button-border-radius);box-sizing:border-box;color:var(--rtk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);gap:var(--rtk-spacing-2);padding:var(--rtk-spacing-1) var(--rtk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rtk-connect__button--connected{border-color:var(--rtk-connected-color);color:var(--rtk-connected-color);width:120px}.rtk-connect__button--error{border-color:var(--rtk-error-red);color:var(--rtk-error-red)}.rtk-connect__button--loading{border-color:var(--rtk-color-gray-100);color:var(--rtk-color-gray-400);pointer-events:none}.rtk-connect__button--disconnected:hover{background-color:var(--rtk-button-hover-color)}.rtk-connect__button--connected:hover,.rtk-connect__button__text--connected:hover{background-color:var(--rtk-disconnect-background-color);border-color:var(--rtk-disconnect-border-color);color:var(--rtk-disconnect-border-color)}.rtk-connect__button--error:hover,.rtk-connect__button__text--error:hover{border-color:var(--rtk-color-black);color:var(--rtk-color-black)}.rtk-connect__button:active{transform:translate(1px,1px)}.rtk-auth{background:var(--rtk-color-white);border:1px solid var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-lg);font-family:var(--rtk-font-family-sanserif);font-size:var(--rtk-font-size-sm);font-weight:var(--rtk-font-weight-normal);padding:var(--rtk-spacing-5)}.rtk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rtk-auth__title{color:#1a1f36;font-size:var(--rtk-font-size-md);line-height:var(--rtk-spacing-5);margin-top:var(--rtk-spacing-4)}.rtk-auth__description{color:#515669;font-size:var(--rtk-font-size-sm);line-height:var(--rtk-spacing-5)}.rtk-combobox__grid{width:352px;display:grid;grid-template-columns:min-content 1fr;align-items:center;font-size:var(--rtk-font-size-sm);font-family:var(--rtk-font-family-sanserif)}.rtk-combobox__search{font-family:var(--rtk-font-family-sanserif)!important}.rtk-combobox__error{grid-column:span 2;align-items:flex-start;background-color:var(--rtk-color-gray-100);border-radius:var(--rtk-border-radius-md);display:flex;gap:var(--rtk-spacing-1);padding:var(--rtk-spacing-2)}:root{--rsk-font-size-xs: .75rem;--rsk-font-size-sm: .875rem;--rsk-font-size-md: 1rem;--rsk-font-size-lg: 1.125rem;--rsk-font-size-xl: 1.266rem;--rsk-font-size-2xl: 1.5rem;--rsk-font-size-3xl: 1.75rem;--rsk-spacing-0: 0rem;--rsk-spacing-1: .25rem;--rsk-spacing-2: .5rem;--rsk-spacing-3: .75rem;--rsk-spacing-4: 1rem;--rsk-spacing-5: 1.25rem;--rsk-spacing-6: 1.5rem;--rsk-spacing-7: 2rem;--rsk-font-weight-normal: 400;--rsk-font-weight-medium: 500;--rsk-font-weight-semibold: 600;--rsk-font-weight-bold: 700;--rsk-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--rsk-border-radius-sm: 2px;--rsk-border-radius-md: 4px;--rsk-border-radius-lg: 8px;--rsk-button-border-radius: 6px;--rsk-color-white: #fff;--rsk-color-white-a-75: rgba(255, 255, 255, .75);--rsk-color-black: #000;--rsk-color-gray-900: #1a1f36;--rsk-color-gray-800: #3c4257;--rsk-color-gray-700: #3c4257;--rsk-color-gray-600: #515669;--rsk-color-gray-500: #697386;--rsk-color-gray-400: #9ea0aa;--rsk-color-gray-300: #a5acb8;--rsk-color-gray-200: #dddee1;--rsk-color-gray-100: #e4e8ee;--rsk-color-brand-500: #e95744;--rsk-color-brand-700: #e4321b;--rsk-color-brand-900: #891e10;--rsk-button-hover-color: rgba(247, 247, 248, 1)}:root{--rsk-connected-color: rgba(51, 163, 102, 1);--rsk-disconnect-border-color: rgba(230, 71, 51, 1);--rsk-disconnect-background-color: rgba(255, 245, 245, 1);--rsk-error-red: rgba(205, 123, 46, 1)}.rsk-connect__button{background-color:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);box-sizing:border-box;color:var(--rsk-color-black);cursor:pointer;display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);padding:var(--rsk-spacing-1) var(--rsk-spacing-2);text-decoration:none;text-overflow:ellipsis;text-wrap:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.rsk-connect__button--connected{border-color:var(--rsk-connected-color);color:var(--rsk-connected-color);width:120px}.rsk-connect__button--error{border-color:var(--rsk-error-red);color:var(--rsk-error-red)}.rsk-connect__button--loading{border-color:var(--rsk-color-gray-100);color:var(--rsk-color-gray-400);pointer-events:none}.rsk-connect__button--disconnected:hover{background-color:var(--rsk-button-hover-color)}.rsk-connect__button--connected:hover,.rsk-connect__button__text--connected:hover{background-color:var(--rsk-disconnect-background-color);border-color:var(--rsk-disconnect-border-color);color:var(--rsk-disconnect-border-color)}.rsk-connect__button--error:hover,.rsk-connect__button__text--error:hover{border-color:var(--rsk-color-black);color:var(--rsk-color-black)}.rsk-connect__button:active{transform:translate(1px,1px)}.rsk-auth{background:var(--rsk-color-white);border:1px solid var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-lg);font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);padding:var(--rsk-spacing-5)}.rsk-auth__header{display:flex;flex-direction:row;justify-content:space-between}.rsk-auth__title{color:#1a1f36;font-size:var(--rsk-font-size-md);line-height:var(--rsk-spacing-5);margin-top:var(--rsk-spacing-4)}.rsk-auth__description{color:#515669;font-size:var(--rsk-font-size-sm);line-height:var(--rsk-spacing-5)}.rsk-connect-channel{align-items:center;display:flex;gap:var(--rsk-spacing-1)}.rsk-connect-channel__input{border:1px solid var(--rsk-color-gray-200);border-radius:var(--rsk-border-radius-md);height:32px;padding-left:var(--rsk-spacing-2);width:270px}.rsk-connect-channel__button{background-color:var(--rsk-color-white);border-color:var(--rsk-color-gray-200);border-radius:var(--rsk-button-border-radius);color:var(--rsk-color-black);display:inline-flex;font-family:var(--rsk-font-family-sanserif);font-size:var(--rsk-font-size-sm);font-weight:var(--rsk-font-weight-normal);gap:var(--rsk-spacing-2);height:24px;padding:var(--rsk-spacing-2);text-decoration:none}.rsk-connect-channel__button:hover{background-color:var(--rsk-button-hover-color)}.rsk-combobox__grid{width:352px;display:grid;grid-template-columns:min-content 1fr;align-items:center;font-size:var(--rsk-font-size-sm);font-family:var(--rsk-font-family-sanserif)}.rsk-combobox__label{align-self:start;display:flex;align-items:center}.rsk-combobox__search{font-family:var(--rsk-font-family-sanserif)!important}.rsk-combobox__error{grid-column:span 2;align-items:flex-start;background-color:var(--rsk-color-gray-100);border-radius:var(--rsk-border-radius-md);display:flex;gap:var(--rsk-spacing-1);padding:var(--rsk-spacing-2)}

package/dist/cjs/modules/guide/components/Banner/Banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.js","sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n ButtonContent,\n TargetButton,\n TargetButtonWithGuideContext,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner\", className)} {...props}>\n {children}\n </div>\n );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner__message\", className)} {...props}>\n {children}\n </div>\n );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner__title\", className)} {...props}>\n {title}\n </div>\n );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\"knock-guide-banner__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\"knock-guide-banner__action\", className)}\n {...props}\n >\n {text}\n </button>\n );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\n \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </button>\n );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n className,\n ...props\n}) => {\n return (\n <button className={clsx(\"knock-guide-banner__close\", className)} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </button>\n );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n title: string;\n body: string;\n primary_button?: ButtonContent;\n secondary_button?: ButtonContent;\n dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n content: BannerContent;\n colorMode?: ColorMode;\n onDismiss?: () => void;\n onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n return (\n <Root data-knock-color-mode={colorMode}>\n <Content>\n <Title title={content.title} />\n <Body body={content.body} />\n </Content>\n <Actions>\n {content.secondary_button && (\n <SecondaryButton\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.secondary_button!;\n onButtonClick(e, { name: \"secondary_button\", text, action });\n }\n }}\n />\n )}\n\n {content.primary_button && (\n <PrimaryButton\n text={content.primary_button.text}\n action={content.primary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.primary_button!;\n onButtonClick(e, { name: \"primary_button\", text, action });\n }\n }}\n />\n )}\n\n {content.dismissible && <DismissButton onClick={onDismiss} />}\n </Actions>\n </Root>\n );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n guideKey?: string;\n onButtonClick?: (\n e: React.MouseEvent,\n target: TargetButtonWithGuideContext,\n ) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n const { guide, step, colorMode } = useGuide({\n key: guideKey,\n type: MESSAGE_TYPE,\n });\n\n React.useEffect(() => {\n if (step) step.markAsSeen();\n }, [step]);\n\n if (!guide \|\| !step) return null;\n\n return (\n <DefaultView\n content={step.content as BannerContent}\n colorMode={colorMode}\n onDismiss={() => step.markAsArchived()}\n onButtonClick={(e, button) => {\n const metadata = { ...button, type: \"button_click\" };\n step.markAsInteracted({ metadata });\n\n return onButtonClick\n ? onButtonClick(e, { button, step, guide })\n : maybeNavigateToUrlWithDelay(button.action);\n }}\n />\n );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Content: typeof Content;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n Default: DefaultView,\n Root,\n Content,\n Title,\n Body,\n Actions,\n PrimaryButton,\n SecondaryButton,\n DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","secondary_button","e","name","primary_button","dismissible","Banner","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","BannerView","Object","assign","Default"],"mappings":"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"}
1	+ {"version":3,"file":"Banner.js","sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport { ButtonContent, TargetButton, TargetButtonWithGuide } from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner\", className)} {...props}>\n {children}\n </div>\n );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner__message\", className)} {...props}>\n {children}\n </div>\n );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner__title\", className)} {...props}>\n {title}\n </div>\n );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\"knock-guide-banner__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\"knock-guide-banner__action\", className)}\n {...props}\n >\n {text}\n </button>\n );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\n \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </button>\n );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n className,\n ...props\n}) => {\n return (\n <button className={clsx(\"knock-guide-banner__close\", className)} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </button>\n );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n title: string;\n body: string;\n primary_button?: ButtonContent;\n secondary_button?: ButtonContent;\n dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n content: BannerContent;\n colorMode?: ColorMode;\n onDismiss?: () => void;\n onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n return (\n <Root data-knock-color-mode={colorMode}>\n <Content>\n <Title title={content.title} />\n <Body body={content.body} />\n </Content>\n <Actions>\n {content.secondary_button && (\n <SecondaryButton\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.secondary_button!;\n onButtonClick(e, { name: \"secondary_button\", text, action });\n }\n }}\n />\n )}\n\n {content.primary_button && (\n <PrimaryButton\n text={content.primary_button.text}\n action={content.primary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.primary_button!;\n onButtonClick(e, { name: \"primary_button\", text, action });\n }\n }}\n />\n )}\n\n {content.dismissible && <DismissButton onClick={onDismiss} />}\n </Actions>\n </Root>\n );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n guideKey?: string;\n onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n const { guide, step, colorMode } = useGuide({\n key: guideKey,\n type: MESSAGE_TYPE,\n });\n\n React.useEffect(() => {\n if (step) step.markAsSeen();\n }, [step]);\n\n if (!guide \|\| !step) return null;\n\n return (\n <DefaultView\n content={step.content as BannerContent}\n colorMode={colorMode}\n onDismiss={() => step.markAsArchived()}\n onButtonClick={(e, button) => {\n const metadata = { ...button, type: \"button_click\" };\n step.markAsInteracted({ metadata });\n\n return onButtonClick\n ? onButtonClick(e, { button, step, guide })\n : maybeNavigateToUrlWithDelay(button.action);\n }}\n />\n );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Content: typeof Content;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n Default: DefaultView,\n Root,\n Content,\n Title,\n Body,\n Actions,\n PrimaryButton,\n SecondaryButton,\n DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","secondary_button","e","name","primary_button","dismissible","Banner","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","BannerView","Object","assign","Default"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Card/Card.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("@knocklabs/react-core"),v=require("clsx"),V=require("react"),x=require("../helpers.js");;/* empty css            */const E=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=E(v),t=E(V),D="card",u=({children:e,className:a,...l})=>t.default.createElement("div",{className:r.default("knock-guide-card",a),...l},e);u.displayName="CardView.Root";const o=({children:e,className:a,...l})=>t.default.createElement("div",{className:r.default("knock-guide-card__message",a),...l},e);o.displayName="CardView.Content";const g=({children:e,className:a,...l})=>t.default.createElement("div",{className:r.default("knock-guide-card__header",a),...l},e);g.displayName="CardView.Header";const N=({headline:e,className:a,...l})=>t.default.createElement("div",{className:r.default("knock-guide-card__headline",a),...l},e);N.displayName="CardView.Headline";const s=({title:e,className:a,...l})=>t.default.createElement("div",{className:r.default("knock-guide-card__title",a),...l},e);s.displayName="CardView.Title";const m=({body:e,className:a,...l})=>t.default.createElement("div",{className:r.default("knock-guide-card__body",a),dangerouslySetInnerHTML:{__html:e},...l});m.displayName="CardView.Body";const f=({children:e,className:a,...l})=>t.default.createElement("div",{className:r.default("knock-guide-card__actions",a),...l},e);f.displayName="CardView.Actions";const y=({text:e,action:a,className:l,...d})=>t.default.createElement("button",{className:r.default("knock-guide-card__action",l),...d},e);y.displayName="CardView.PrimaryButton";const _=({text:e,action:a,className:l,...d})=>t.default.createElement("button",{className:r.default("knock-guide-card__action knock-guide-card__action--secondary",l),...d},e);_.displayName="CardView.SecondaryButton";const k=({className:e,...a})=>t.default.createElement("button",{className:r.default("knock-guide-card__close",e),...a},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));k.displayName="CardView.DismissButton";const p=({content:e,colorMode:a="light",onDismiss:l,onButtonClick:d})=>t.default.createElement(u,{"data-knock-color-mode":a},t.default.createElement(o,null,t.default.createElement(g,null,t.default.createElement(N,{headline:e.headline}),e.dismissible&&t.default.createElement(k,{onClick:l})),t.default.createElement(s,{title:e.title}),t.default.createElement(m,{body:e.body})),t.default.createElement(f,null,e.primary_button&&t.default.createElement(y,{text:e.primary_button.text,action:e.primary_button.action,onClick:c=>{if(d){const{text:i,action:n}=e.primary_button;d(c,{name:"primary_button",text:i,action:n})}}}),e.secondary_button&&t.default.createElement(_,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:c=>{if(d){const{text:i,action:n}=e.secondary_button;d(c,{name:"secondary_button",text:i,action:n})}}})));p.displayName="CardView.Default";const b=({guideKey:e,onButtonClick:a})=>{const{guide:l,step:d,colorMode:c}=h.useGuide({key:e,type:D});return t.default.useEffect(()=>{d&&d.markAsSeen()},[d]),!l||!d?null:t.default.createElement(p,{content:d.content,colorMode:c,onDismiss:()=>d.markAsArchived(),onButtonClick:(i,n)=>{const w={...n,type:"button_click"};return d.markAsInteracted({metadata:w}),a?a(i,{button:n,step:d,guide:l}):x.maybeNavigateToUrlWithDelay(n.action)}})};b.displayName="Card";const C={};Object.assign(C,{Default:p,Root:u,Content:o,Title:s,Body:m,Actions:f,PrimaryButton:y,SecondaryButton:_,DismissButton:k});exports.Card=b;exports.CardView=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("@knocklabs/react-core"),A=require("clsx"),D=require("react"),b=require("../helpers.js");;/* empty css            */const C=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=C(A),a=C(D),S="card",o=({children:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card",t),...l},e);o.displayName="CardView.Root";const m=({children:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__message",t),...l},e);m.displayName="CardView.Content";const w=({children:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__header",t),...l},e);w.displayName="CardView.Header";const h=({headline:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__headline",t),...l},e);h.displayName="CardView.Headline";const f=({title:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__title",t),...l},e);f.displayName="CardView.Title";const y=({body:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__body",t),dangerouslySetInnerHTML:{__html:e},...l});y.displayName="CardView.Body";const _=({children:e,className:t,alt:l,...r})=>a.default.createElement("img",{className:i.default("knock-guide-card__img",t),alt:l||"",...r},e);_.displayName="CardView.Img";const g=({children:e,className:t,...l})=>a.default.createElement("div",{className:i.default("knock-guide-card__actions",t),...l},e);g.displayName="CardView.Actions";const k=({text:e,action:t,className:l,...r})=>a.default.createElement("button",{className:i.default("knock-guide-card__action",l),...r},e);k.displayName="CardView.PrimaryButton";const p=({text:e,action:t,className:l,...r})=>a.default.createElement("button",{className:i.default("knock-guide-card__action knock-guide-card__action--secondary",l),...r},e);p.displayName="CardView.SecondaryButton";const E=({className:e,...t})=>a.default.createElement("button",{className:i.default("knock-guide-card__close",e),...t},a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},a.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},a.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),a.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));E.displayName="CardView.DismissButton";const N=({content:e,colorMode:t="light",onDismiss:l,onButtonClick:r,onImageClick:d})=>a.default.createElement(o,{"data-knock-color-mode":t},a.default.createElement(m,null,a.default.createElement(w,null,a.default.createElement(h,{headline:e.headline}),e.dismissible&&a.default.createElement(E,{onClick:l})),a.default.createElement(f,{title:e.title}),a.default.createElement(y,{body:e.body})),e.image&&a.default.createElement("a",{href:b.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:"_blank"},a.default.createElement(_,{src:e.image.url,alt:e.image.alt,onClick:c=>{d&&d(c,e.image)}})),(e.primary_button||e.secondary_button)&&a.default.createElement(g,null,e.primary_button&&a.default.createElement(k,{text:e.primary_button.text,action:e.primary_button.action,onClick:c=>{if(r){const{text:u,action:n}=e.primary_button;r(c,{name:"primary_button",text:u,action:n})}}}),e.secondary_button&&a.default.createElement(p,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:c=>{if(r){const{text:u,action:n}=e.secondary_button;r(c,{name:"secondary_button",text:u,action:n})}}})));N.displayName="CardView.Default";const V=({guideKey:e,onButtonClick:t,onImageClick:l})=>{const{guide:r,step:d,colorMode:c}=x.useGuide({key:e,type:S});return a.default.useEffect(()=>{d&&d.markAsSeen()},[d]),!r||!d?null:a.default.createElement(N,{content:d.content,colorMode:c,onDismiss:()=>d.markAsArchived(),onButtonClick:(u,n)=>{const s={...n,type:"button_click"};return d.markAsInteracted({metadata:s}),t?t(u,{button:n,step:d,guide:r}):b.maybeNavigateToUrlWithDelay(n.action)},onImageClick:(u,n)=>{const s={...n,type:"image_click"};if(d.markAsInteracted({metadata:s}),l)return l(u,{image:n,step:d,guide:r})}})};V.displayName="Card";const v={};Object.assign(v,{Default:N,Root:o,Content:m,Title:f,Body:y,Img:_,Actions:g,PrimaryButton:k,SecondaryButton:p,DismissButton:E});exports.Card=V;exports.CardView=v;
 //# sourceMappingURL=Card.js.map

package/dist/cjs/modules/guide/components/Card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n ButtonContent,\n TargetButton,\n TargetButtonWithGuideContext,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card\", className)} {...props}>\n {children}\n </div>\n );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__message\", className)} {...props}>\n {children}\n </div>\n );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__header\", className)} {...props}>\n {children}\n </div>\n );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__headline\", className)} {...props}>\n {headline}\n </div>\n );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__title\", className)} {...props}>\n {title}\n </div>\n );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\"knock-guide-card__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button className={clsx(\"knock-guide-card__action\", className)} {...props}>\n {text}\n </button>\n );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\n \"knock-guide-card__action knock-guide-card__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </button>\n );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n className,\n ...props\n}) => {\n return (\n <button className={clsx(\"knock-guide-card__close\", className)} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </button>\n );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n headline: string;\n title: string;\n body: string;\n primary_button?: ButtonContent;\n secondary_button?: ButtonContent;\n dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n content: CardContent;\n colorMode?: ColorMode;\n onDismiss?: () => void;\n onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n return (\n <Root data-knock-color-mode={colorMode}>\n <Content>\n <Header>\n <Headline headline={content.headline} />\n {content.dismissible && <DismissButton onClick={onDismiss} />}\n </Header>\n\n <Title title={content.title} />\n <Body body={content.body} />\n </Content>\n <Actions>\n {content.primary_button && (\n <PrimaryButton\n text={content.primary_button.text}\n action={content.primary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.primary_button!;\n onButtonClick(e, { name: \"primary_button\", text, action });\n }\n }}\n />\n )}\n\n {content.secondary_button && (\n <SecondaryButton\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.secondary_button!;\n onButtonClick(e, { name: \"secondary_button\", text, action });\n }\n }}\n />\n )}\n </Actions>\n </Root>\n );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n guideKey?: string;\n onButtonClick?: (\n e: React.MouseEvent,\n target: TargetButtonWithGuideContext,\n ) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({ guideKey, onButtonClick }) => {\n const { guide, step, colorMode } = useGuide({\n key: guideKey,\n type: MESSAGE_TYPE,\n });\n\n React.useEffect(() => {\n if (step) step.markAsSeen();\n }, [step]);\n\n if (!guide \|\| !step) return null;\n\n return (\n <DefaultView\n content={step.content as CardContent}\n colorMode={colorMode}\n onDismiss={() => step.markAsArchived()}\n onButtonClick={(e, button) => {\n const metadata = { ...button, type: \"button_click\" };\n step.markAsInteracted({ metadata });\n\n return onButtonClick\n ? onButtonClick(e, { button, step, guide })\n : maybeNavigateToUrlWithDelay(button.action);\n }}\n />\n );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Content: typeof Content;\n Headline: typeof Headline;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n Default: DefaultView,\n Root,\n Content,\n Title,\n Body,\n Actions,\n PrimaryButton,\n SecondaryButton,\n DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","dismissible","primary_button","e","name","secondary_button","Card","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","CardView","Object","assign","Default"],"mappings":"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"}
1	+ {"version":3,"file":"Card.js","sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n ButtonContent,\n ImageContent,\n TargetButton,\n TargetButtonWithGuide,\n TargetImage,\n TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card\", className)} {...props}>\n {children}\n </div>\n );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__message\", className)} {...props}>\n {children}\n </div>\n );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__header\", className)} {...props}>\n {children}\n </div>\n );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__headline\", className)} {...props}>\n {headline}\n </div>\n );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__title\", className)} {...props}>\n {title}\n </div>\n );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\"knock-guide-card__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Img: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n return (\n <img\n className={clsx(\"knock-guide-card__img\", className)}\n alt={alt \|\| \"\"}\n {...props}\n >\n {children}\n </img>\n );\n};\nImg.displayName = \"CardView.Img\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button className={clsx(\"knock-guide-card__action\", className)} {...props}>\n {text}\n </button>\n );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\n \"knock-guide-card__action knock-guide-card__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </button>\n );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n className,\n ...props\n}) => {\n return (\n <button className={clsx(\"knock-guide-card__close\", className)} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </button>\n );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n headline: string;\n title: string;\n body: string;\n image?: ImageContent;\n primary_button?: ButtonContent;\n secondary_button?: ButtonContent;\n dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n content: CardContent;\n colorMode?: ColorMode;\n onDismiss?: () => void;\n onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n content,\n colorMode = \"light\",\n onDismiss,\n onButtonClick,\n onImageClick,\n}) => {\n return (\n <Root data-knock-color-mode={colorMode}>\n <Content>\n <Header>\n <Headline headline={content.headline} />\n {content.dismissible && <DismissButton onClick={onDismiss} />}\n </Header>\n\n <Title title={content.title} />\n <Body body={content.body} />\n </Content>\n {content.image && (\n <a\n href={\n isValidHttpUrl(content.image.action)\n ? content.image.action\n : undefined\n }\n target=\"_blank\"\n >\n <Img\n src={content.image.url}\n alt={content.image.alt}\n onClick={(e) => {\n if (onImageClick) {\n onImageClick(e, content.image!);\n }\n }}\n />\n </a>\n )}\n {(content.primary_button \|\| content.secondary_button) && (\n <Actions>\n {content.primary_button && (\n <PrimaryButton\n text={content.primary_button.text}\n action={content.primary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.primary_button!;\n onButtonClick(e, { name: \"primary_button\", text, action });\n }\n }}\n />\n )}\n {content.secondary_button && (\n <SecondaryButton\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.secondary_button!;\n onButtonClick(e, { name: \"secondary_button\", text, action });\n }\n }}\n />\n )}\n </Actions>\n )}\n </Root>\n );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n guideKey?: string;\n onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({\n guideKey,\n onButtonClick,\n onImageClick,\n}) => {\n const { guide, step, colorMode } = useGuide({\n key: guideKey,\n type: MESSAGE_TYPE,\n });\n\n React.useEffect(() => {\n if (step) step.markAsSeen();\n }, [step]);\n\n if (!guide \|\| !step) return null;\n\n return (\n <DefaultView\n content={step.content as CardContent}\n colorMode={colorMode}\n onDismiss={() => step.markAsArchived()}\n onButtonClick={(e, button) => {\n const metadata = { ...button, type: \"button_click\" };\n step.markAsInteracted({ metadata });\n\n return onButtonClick\n ? onButtonClick(e, { button, step, guide })\n : maybeNavigateToUrlWithDelay(button.action);\n }}\n onImageClick={(e, image) => {\n const metadata = { ...image, type: \"image_click\" };\n step.markAsInteracted({ metadata });\n\n if (onImageClick) {\n return onImageClick(e, { image, step, guide });\n }\n }}\n />\n );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Content: typeof Content;\n Headline: typeof Headline;\n Title: typeof Title;\n Body: typeof Body;\n Img: typeof Img;\n Actions: typeof Actions;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n Default: DefaultView,\n Root,\n Content,\n Title,\n Body,\n Img,\n Actions,\n PrimaryButton,\n SecondaryButton,\n DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Card","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","CardView","Object","assign","Default"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Modal/Modal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("@knocklabs/react-core"),h=require("@radix-ui/react-dialog"),O=require("clsx"),C=require("react"),D=require("../helpers.js");;/* empty css            */const w=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function S(e){if(e&&typeof e=="object"&&"default"in e)return e;const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return l.default=e,Object.freeze(l)}const d=S(h),n=w(O),t=w(C),x="modal",s=({children:e,onOpenChange:l,...a})=>t.default.createElement(d.Root,{defaultOpen:!0,onOpenChange:l,...a},t.default.createElement(d.Portal,null,e));s.displayName="ModalView.Root";const m=t.default.forwardRef(({className:e,...l},a)=>t.default.createElement(d.Overlay,{className:n.default("knock-guide-modal__overlay",e),ref:a,...l}));m.displayName="ModalView.Overlay";const f=t.default.forwardRef(({children:e,className:l,...a},o)=>t.default.createElement(d.Content,{className:n.default("knock-guide-modal",l),ref:o,...a},e));f.displayName="ModalView.Content";const M=({children:e,className:l,...a})=>t.default.createElement("div",{className:n.default("knock-guide-modal__header",l),...a},e);M.displayName="ModalView.Header";const y=({title:e,className:l,...a})=>t.default.createElement(d.Title,{className:n.default("knock-guide-modal__title",l),...a},e);y.displayName="ModalView.Title";const _=({body:e,className:l,...a})=>t.default.createElement(d.Description,{className:n.default("knock-guide-modal__body",l),dangerouslySetInnerHTML:{__html:e},...a});_.displayName="ModalView.Body";const p=({children:e,className:l,...a})=>t.default.createElement("div",{className:n.default("knock-guide-modal__actions",l),...a},e);p.displayName="ModalView.Actions";const E=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:n.default("knock-guide-modal__action",a),...o},e);E.displayName="ModalView.PrimaryButton";const g=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:n.default("knock-guide-modal__action knock-guide-modal__action--secondary",a),...o},e);g.displayName="ModalView.SecondaryButton";const k=({className:e,...l})=>t.default.createElement(d.Close,{className:n.default("knock-guide-modal__close",e),...l},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));k.displayName="ModalView.Close";const b=({content:e,colorMode:l="light",onOpenChange:a,onDismiss:o,onButtonClick:c})=>t.default.createElement(s,{onOpenChange:a},t.default.createElement(m,null),t.default.createElement(f,{"data-knock-color-mode":l,onPointerDownOutside:o},t.default.createElement(M,null,t.default.createElement(y,{title:e.title}),e.dismissible&&t.default.createElement(k,{onClick:o})),t.default.createElement(_,{body:e.body}),t.default.createElement(p,null,e.secondary_button&&t.default.createElement(g,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:u=>{if(c){const{text:r,action:i}=e.secondary_button;c(u,{name:"secondary_button",text:r,action:i})}}}),e.primary_button&&t.default.createElement(E,{text:e.primary_button.text,action:e.primary_button.action,onClick:u=>{if(c){const{text:r,action:i}=e.primary_button;c(u,{name:"primary_button",text:r,action:i})}}}))));b.displayName="ModalView.Default";const N=({guideKey:e,onButtonClick:l})=>{const{guide:a,step:o,colorMode:c}=V.useGuide({key:e,type:x});return t.default.useEffect(()=>{o&&o.markAsSeen()},[o]),!a||!o?null:t.default.createElement(b,{content:o.content,colorMode:c,onDismiss:()=>o.markAsArchived(),onButtonClick:(u,r)=>{const i={...r,type:"button_click"};return o.markAsInteracted({metadata:i}),l?l(u,{button:r,step:o,guide:a}):D.maybeNavigateToUrlWithDelay(r.action)}})};N.displayName="Modal";const v={};Object.assign(v,{Default:b,Root:s,Overlay:m,Content:f,Title:y,Body:_,Actions:p,PrimaryButton:E,SecondaryButton:g,Close:k});exports.Modal=N;exports.ModalView=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("@knocklabs/react-core"),D=require("@radix-ui/react-dialog"),S=require("clsx"),x=require("react"),M=require("../helpers.js");;/* empty css            */const V=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function R(e){if(e&&typeof e=="object"&&"default"in e)return e;const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return l.default=e,Object.freeze(l)}const c=R(D),n=V(S),t=V(x),j="modal",m=({children:e,onOpenChange:l,...a})=>t.default.createElement(c.Root,{defaultOpen:!0,onOpenChange:l,...a},t.default.createElement(c.Portal,null,e));m.displayName="ModalView.Root";const f=t.default.forwardRef(({className:e,...l},a)=>t.default.createElement(c.Overlay,{className:n.default("knock-guide-modal__overlay",e),ref:a,...l}));f.displayName="ModalView.Overlay";const y=t.default.forwardRef(({children:e,className:l,...a},o)=>t.default.createElement(c.Content,{className:n.default("knock-guide-modal",l),ref:o,...a},e));y.displayName="ModalView.Content";const v=({children:e,className:l,...a})=>t.default.createElement("div",{className:n.default("knock-guide-modal__header",l),...a},e);v.displayName="ModalView.Header";const _=({title:e,className:l,...a})=>t.default.createElement(c.Title,{className:n.default("knock-guide-modal__title",l),...a},e);_.displayName="ModalView.Title";const p=({body:e,className:l,...a})=>t.default.createElement(c.Description,{className:n.default("knock-guide-modal__body",l),dangerouslySetInnerHTML:{__html:e},...a});p.displayName="ModalView.Body";const g=({children:e,className:l,alt:a,...o})=>t.default.createElement("img",{className:n.default("knock-guide-modal__img",l),alt:a||"",...o},e);g.displayName="ModalView.Img";const k=({children:e,className:l,...a})=>t.default.createElement("div",{className:n.default("knock-guide-modal__actions",l),...a},e);k.displayName="ModalView.Actions";const E=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:n.default("knock-guide-modal__action",a),...o},e);E.displayName="ModalView.PrimaryButton";const b=({text:e,action:l,className:a,...o})=>t.default.createElement("button",{className:n.default("knock-guide-modal__action knock-guide-modal__action--secondary",a),...o},e);b.displayName="ModalView.SecondaryButton";const N=({className:e,...l})=>t.default.createElement(c.Close,{className:n.default("knock-guide-modal__close",e),...l},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none"},t.default.createElement("g",{fill:"#60646C",fillRule:"evenodd",clipRule:"evenodd"},t.default.createElement("path",{d:"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z"}),t.default.createElement("path",{d:"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z"}))));N.displayName="ModalView.Close";const w=({content:e,colorMode:l="light",onOpenChange:a,onDismiss:o,onButtonClick:r,onImageClick:s})=>t.default.createElement(m,{onOpenChange:a},t.default.createElement(f,null),t.default.createElement(y,{"data-knock-color-mode":l,onPointerDownOutside:o},t.default.createElement(v,null,t.default.createElement(_,{title:e.title}),e.dismissible&&t.default.createElement(N,{onClick:o})),t.default.createElement(p,{body:e.body}),e.image&&t.default.createElement("a",{href:M.isValidHttpUrl(e.image.action)?e.image.action:void 0,target:"_blank"},t.default.createElement(g,{src:e.image.url,alt:e.image.alt,onClick:i=>{s&&s(i,e.image)}})),(e.primary_button||e.secondary_button)&&t.default.createElement(k,null,e.secondary_button&&t.default.createElement(b,{text:e.secondary_button.text,action:e.secondary_button.action,onClick:i=>{if(r){const{text:d,action:u}=e.secondary_button;r(i,{name:"secondary_button",text:d,action:u})}}}),e.primary_button&&t.default.createElement(E,{text:e.primary_button.text,action:e.primary_button.action,onClick:i=>{if(r){const{text:d,action:u}=e.primary_button;r(i,{name:"primary_button",text:d,action:u})}}}))));w.displayName="ModalView.Default";const h=({guideKey:e,onButtonClick:l,onImageClick:a})=>{const{guide:o,step:r,colorMode:s}=C.useGuide({key:e,type:j});return t.default.useEffect(()=>{r&&r.markAsSeen()},[r]),!o||!r?null:t.default.createElement(w,{content:r.content,colorMode:s,onDismiss:()=>r.markAsArchived(),onButtonClick:(i,d)=>{const u={...d,type:"button_click"};return r.markAsInteracted({metadata:u}),l?l(i,{button:d,step:r,guide:o}):M.maybeNavigateToUrlWithDelay(d.action)},onImageClick:(i,d)=>{const u={...d,type:"image_click"};if(r.markAsInteracted({metadata:u}),a)return a(i,{image:d,step:r,guide:o})}})};h.displayName="Modal";const O={};Object.assign(O,{Default:w,Root:m,Overlay:f,Content:y,Title:_,Body:p,Img:g,Actions:k,PrimaryButton:E,SecondaryButton:b,Close:N});exports.Modal=h;exports.ModalView=O;
 //# sourceMappingURL=Modal.js.map

package/dist/cjs/modules/guide/components/Modal/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","sources":["../../../../../../src/modules/guide/components/Modal/Modal.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n ButtonContent,\n TargetButton,\n TargetButtonWithGuideContext,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\ntype RootProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n \"modal\"\n> &\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>;\n\nconst Root = ({ children, onOpenChange, ...props }: RootProps) => {\n return (\n <Dialog.Root defaultOpen onOpenChange={onOpenChange} {...props}>\n <Dialog.Portal>{children}</Dialog.Portal>\n </Dialog.Root>\n );\n};\nRoot.displayName = \"ModalView.Root\";\n\ntype OverlayProps = React.ComponentPropsWithoutRef<typeof Dialog.Overlay> &\n React.ComponentPropsWithRef<\"div\">;\ntype OverlayRef = React.ElementRef<\"div\">;\n\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n ({ className, ...props }, forwardedRef) => {\n return (\n <Dialog.Overlay\n className={clsx(\"knock-guide-modal__overlay\", className)}\n ref={forwardedRef}\n {...props}\n />\n );\n },\n);\nOverlay.displayName = \"ModalView.Overlay\";\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> &\n React.ComponentPropsWithRef<\"div\">;\ntype ContentRef = React.ElementRef<\"div\">;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n ({ children, className, ...props }, forwardedRef) => {\n return (\n <Dialog.Content\n className={clsx(\"knock-guide-modal\", className)}\n ref={forwardedRef}\n {...props}\n >\n {children}\n </Dialog.Content>\n );\n },\n);\nContent.displayName = \"ModalView.Content\";\n\nconst Header: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-modal__header\", className)} {...props}>\n {children}\n </div>\n );\n};\nHeader.displayName = \"ModalView.Header\";\n\ntype TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &\n React.ComponentPropsWithRef<\"div\"> & {\n title: string;\n };\n\nconst Title = ({ title, className, ...props }: TitleProps) => {\n return (\n <Dialog.Title\n className={clsx(\"knock-guide-modal__title\", className)}\n {...props}\n >\n {title}\n </Dialog.Title>\n );\n};\nTitle.displayName = \"ModalView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <Dialog.Description\n className={clsx(\"knock-guide-modal__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-modal__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button className={clsx(\"knock-guide-modal__action\", className)} {...props}>\n {text}\n </button>\n );\n};\nPrimaryButton.displayName = \"ModalView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\n \"knock-guide-modal__action knock-guide-modal__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </button>\n );\n};\nSecondaryButton.displayName = \"ModalView.SecondaryButton\";\n\ntype CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &\n React.ComponentPropsWithRef<\"button\">;\n\nconst Close = ({ className, ...props }: CloseProps) => {\n return (\n <Dialog.Close\n className={clsx(\"knock-guide-modal__close\", className)}\n {...props}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </Dialog.Close>\n );\n};\nClose.displayName = \"ModalView.Close\";\n\ntype ModalContent = {\n title: string;\n body: string;\n primary_button?: ButtonContent;\n secondary_button?: ButtonContent;\n dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n content: ModalContent;\n colorMode?: ColorMode;\n onOpenChange?: (open: boolean) => void;\n onDismiss?: () => void;\n onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({\n content,\n colorMode = \"light\",\n onOpenChange,\n onDismiss,\n onButtonClick,\n}) => {\n return (\n <Root onOpenChange={onOpenChange}>\n <Overlay />\n {/* Must pass color mode to content for css variables to be set properly */}\n <Content\n data-knock-color-mode={colorMode}\n onPointerDownOutside={onDismiss}\n >\n <Header>\n <Title title={content.title} />\n {content.dismissible && <Close onClick={onDismiss} />}\n </Header>\n\n <Body body={content.body} />\n\n <Actions>\n {content.secondary_button && (\n <SecondaryButton\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.secondary_button!;\n onButtonClick(e, { name: \"secondary_button\", text, action });\n }\n }}\n />\n )}\n {content.primary_button && (\n <PrimaryButton\n text={content.primary_button.text}\n action={content.primary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.primary_button!;\n onButtonClick(e, { name: \"primary_button\", text, action });\n }\n }}\n />\n )}\n </Actions>\n </Content>\n </Root>\n );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\ntype ModalProps = {\n guideKey?: string;\n onButtonClick?: (\n e: React.MouseEvent,\n target: TargetButtonWithGuideContext,\n ) => void;\n};\n\nexport const Modal: React.FC<ModalProps> = ({ guideKey, onButtonClick }) => {\n const { guide, step, colorMode } = useGuide({\n key: guideKey,\n type: MESSAGE_TYPE,\n });\n\n React.useEffect(() => {\n if (step) step.markAsSeen();\n }, [step]);\n\n if (!guide \|\| !step) return null;\n\n return (\n <DefaultView\n content={step.content as ModalContent}\n colorMode={colorMode}\n onDismiss={() => step.markAsArchived()}\n onButtonClick={(e, button) => {\n const metadata = { ...button, type: \"button_click\" };\n step.markAsInteracted({ metadata });\n\n return onButtonClick\n ? onButtonClick(e, { button, step, guide })\n : maybeNavigateToUrlWithDelay(button.action);\n }}\n />\n );\n};\nModal.displayName = \"Modal\";\n\nexport const ModalView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Overlay: typeof Overlay;\n Content: typeof Content;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n Default: DefaultView,\n Root,\n Overlay,\n Content,\n Title,\n Body,\n Actions,\n PrimaryButton,\n SecondaryButton,\n Close,\n});\n"],"names":["MESSAGE_TYPE","Root","children","onOpenChange","props","React","Dialog","displayName","Overlay","forwardRef","className","forwardedRef","clsx","Content","Header","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","Close","DefaultView","content","colorMode","onDismiss","onButtonClick","dismissible","secondary_button","e","name","primary_button","Modal","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","ModalView","Object","assign","Default"],"mappings":"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"}
1	+ {"version":3,"file":"Modal.js","sources":["../../../../../../src/modules/guide/components/Modal/Modal.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isValidHttpUrl, maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n ButtonContent,\n ImageContent,\n TargetButton,\n TargetButtonWithGuide,\n TargetImage,\n TargetImageWithGuide,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\ntype RootProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n \"modal\"\n> &\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>;\n\nconst Root = ({ children, onOpenChange, ...props }: RootProps) => {\n return (\n <Dialog.Root defaultOpen onOpenChange={onOpenChange} {...props}>\n <Dialog.Portal>{children}</Dialog.Portal>\n </Dialog.Root>\n );\n};\nRoot.displayName = \"ModalView.Root\";\n\ntype OverlayProps = React.ComponentPropsWithoutRef<typeof Dialog.Overlay> &\n React.ComponentPropsWithRef<\"div\">;\ntype OverlayRef = React.ElementRef<\"div\">;\n\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n ({ className, ...props }, forwardedRef) => {\n return (\n <Dialog.Overlay\n className={clsx(\"knock-guide-modal__overlay\", className)}\n ref={forwardedRef}\n {...props}\n />\n );\n },\n);\nOverlay.displayName = \"ModalView.Overlay\";\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> &\n React.ComponentPropsWithRef<\"div\">;\ntype ContentRef = React.ElementRef<\"div\">;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n ({ children, className, ...props }, forwardedRef) => {\n return (\n <Dialog.Content\n className={clsx(\"knock-guide-modal\", className)}\n ref={forwardedRef}\n {...props}\n >\n {children}\n </Dialog.Content>\n );\n },\n);\nContent.displayName = \"ModalView.Content\";\n\nconst Header: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-modal__header\", className)} {...props}>\n {children}\n </div>\n );\n};\nHeader.displayName = \"ModalView.Header\";\n\ntype TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &\n React.ComponentPropsWithRef<\"div\"> & {\n title: string;\n };\n\nconst Title = ({ title, className, ...props }: TitleProps) => {\n return (\n <Dialog.Title\n className={clsx(\"knock-guide-modal__title\", className)}\n {...props}\n >\n {title}\n </Dialog.Title>\n );\n};\nTitle.displayName = \"ModalView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <Dialog.Description\n className={clsx(\"knock-guide-modal__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Img: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"img\">>\n> = ({ children, className, alt, ...props }) => {\n return (\n <img\n className={clsx(\"knock-guide-modal__img\", className)}\n alt={alt \|\| \"\"}\n {...props}\n >\n {children}\n </img>\n );\n};\nImg.displayName = \"ModalView.Img\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-modal__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button className={clsx(\"knock-guide-modal__action\", className)} {...props}>\n {text}\n </button>\n );\n};\nPrimaryButton.displayName = \"ModalView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\n \"knock-guide-modal__action knock-guide-modal__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </button>\n );\n};\nSecondaryButton.displayName = \"ModalView.SecondaryButton\";\n\ntype CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &\n React.ComponentPropsWithRef<\"button\">;\n\nconst Close = ({ className, ...props }: CloseProps) => {\n return (\n <Dialog.Close\n className={clsx(\"knock-guide-modal__close\", className)}\n {...props}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </Dialog.Close>\n );\n};\nClose.displayName = \"ModalView.Close\";\n\ntype ModalContent = {\n title: string;\n body: string;\n image?: ImageContent;\n primary_button?: ButtonContent;\n secondary_button?: ButtonContent;\n dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n content: ModalContent;\n colorMode?: ColorMode;\n onOpenChange?: (open: boolean) => void;\n onDismiss?: () => void;\n onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n onImageClick?: (e: React.MouseEvent, image: TargetImage) => void;\n}> = ({\n content,\n colorMode = \"light\",\n onOpenChange,\n onDismiss,\n onButtonClick,\n onImageClick,\n}) => {\n return (\n <Root onOpenChange={onOpenChange}>\n <Overlay />\n {/* Must pass color mode to content for css variables to be set properly */}\n <Content\n data-knock-color-mode={colorMode}\n onPointerDownOutside={onDismiss}\n >\n <Header>\n <Title title={content.title} />\n {content.dismissible && <Close onClick={onDismiss} />}\n </Header>\n\n <Body body={content.body} />\n\n {content.image && (\n <a\n href={\n isValidHttpUrl(content.image.action)\n ? content.image.action\n : undefined\n }\n target=\"_blank\"\n >\n <Img\n src={content.image.url}\n alt={content.image.alt}\n onClick={(e) => {\n if (onImageClick) {\n onImageClick(e, content.image!);\n }\n }}\n />\n </a>\n )}\n\n {(content.primary_button \|\| content.secondary_button) && (\n <Actions>\n {content.secondary_button && (\n <SecondaryButton\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.secondary_button!;\n onButtonClick(e, {\n name: \"secondary_button\",\n text,\n action,\n });\n }\n }}\n />\n )}\n {content.primary_button && (\n <PrimaryButton\n text={content.primary_button.text}\n action={content.primary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.primary_button!;\n onButtonClick(e, { name: \"primary_button\", text, action });\n }\n }}\n />\n )}\n </Actions>\n )}\n </Content>\n </Root>\n );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\ntype ModalProps = {\n guideKey?: string;\n onButtonClick?: (e: React.MouseEvent, target: TargetButtonWithGuide) => void;\n onImageClick?: (e: React.MouseEvent, target: TargetImageWithGuide) => void;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n guideKey,\n onButtonClick,\n onImageClick,\n}) => {\n const { guide, step, colorMode } = useGuide({\n key: guideKey,\n type: MESSAGE_TYPE,\n });\n\n React.useEffect(() => {\n if (step) step.markAsSeen();\n }, [step]);\n\n if (!guide \|\| !step) return null;\n\n return (\n <DefaultView\n content={step.content as ModalContent}\n colorMode={colorMode}\n onDismiss={() => step.markAsArchived()}\n onButtonClick={(e, button) => {\n const metadata = { ...button, type: \"button_click\" };\n step.markAsInteracted({ metadata });\n\n return onButtonClick\n ? onButtonClick(e, { button, step, guide })\n : maybeNavigateToUrlWithDelay(button.action);\n }}\n onImageClick={(e, image) => {\n const metadata = { ...image, type: \"image_click\" };\n step.markAsInteracted({ metadata });\n\n if (onImageClick) {\n return onImageClick(e, { image, step, guide });\n }\n }}\n />\n );\n};\nModal.displayName = \"Modal\";\n\nexport const ModalView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Overlay: typeof Overlay;\n Content: typeof Content;\n Title: typeof Title;\n Body: typeof Body;\n Img: typeof Img;\n Actions: typeof Actions;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n Default: DefaultView,\n Root,\n Overlay,\n Content,\n Title,\n Body,\n Img,\n Actions,\n PrimaryButton,\n SecondaryButton,\n Close,\n});\n"],"names":["MESSAGE_TYPE","Root","children","onOpenChange","props","React","Dialog","displayName","Overlay","forwardRef","className","forwardedRef","clsx","Content","Header","Title","title","Body","body","__html","Img","alt","Actions","PrimaryButton","text","action","SecondaryButton","Close","DefaultView","content","colorMode","onDismiss","onButtonClick","onImageClick","dismissible","image","isValidHttpUrl","undefined","url","e","primary_button","secondary_button","name","Modal","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","ModalView","Object","assign","Default"],"mappings":"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"}

package/dist/cjs/modules/guide/components/helpers.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=e=>{let t;try{t=new URL(e)}catch{return!1}return t.protocol==="http:"||t.protocol==="https:"},r=(e,t=200)=>{window!=null&&window.location&&o(e)&&setTimeout(()=>window.location.assign(e),t)};exports.maybeNavigateToUrlWithDelay=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=e=>{let t;try{t=new URL(e)}catch{return!1}return t.protocol==="http:"||t.protocol==="https:"},i=(e,t=200)=>{window!=null&&window.location&&o(e)&&setTimeout(()=>window.location.assign(e),t)};exports.isValidHttpUrl=o;exports.maybeNavigateToUrlWithDelay=i;
 //# sourceMappingURL=helpers.js.map

package/dist/cjs/modules/guide/components/helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.js","sources":["../../../../../src/modules/guide/components/helpers.ts"],"sourcesContent":["const isValidHttpUrl = (input: string) => {\n let url;\n\n try {\n url = new URL(input);\n } catch (_) {\n return false;\n }\n\n return url.protocol === \"http:\" \|\| url.protocol === \"https:\";\n};\n\nexport const maybeNavigateToUrlWithDelay = (\n url: string,\n delay: number = 200,\n) => {\n if (!window?.location) return;\n if (!isValidHttpUrl(url)) return;\n\n setTimeout(() => window.location.assign(url), delay);\n};\n"],"names":["isValidHttpUrl","input","url","URL","protocol","maybeNavigateToUrlWithDelay","delay","window","location","setTimeout","assign"],"mappings":"~~gFAAA~~,~~MAAMA~~,EAAkBC,GAAkB,~~CACpCC~~,IAAAA,EAEA,GAAA,CACIA,EAAA,IAAIC,IAAIF,CAAK,OACT,CACH,MAAA,EAAA,CAGT,OAAOC,EAAIE,WAAa,SAAWF,EAAIE,WAAa,QACtD,EAEaC,EAA8BA,CACzCH,EACAI,EAAgB,MACb,CACEC,qBAAQC,UACRR,EAAeE,CAAG,GAEvBO,WAAW,IAAMF,OAAOC,SAASE,OAAOR,CAAG,EAAGI,CAAK,CACrD"}
1	+ {"version":3,"file":"helpers.js","sources":["../../../../../src/modules/guide/components/helpers.ts"],"sourcesContent":["export const isValidHttpUrl = (input: string) => {\n let url;\n\n try {\n url = new URL(input);\n } catch (_) {\n return false;\n }\n\n return url.protocol === \"http:\" \|\| url.protocol === \"https:\";\n};\n\nexport const maybeNavigateToUrlWithDelay = (\n url: string,\n delay: number = 200,\n) => {\n if (!window?.location) return;\n if (!isValidHttpUrl(url)) return;\n\n setTimeout(() => window.location.assign(url), delay);\n};\n"],"names":["isValidHttpUrl","input","url","URL","protocol","maybeNavigateToUrlWithDelay","delay","window","location","setTimeout","assign"],"mappings":"gFAAaA,MAAAA,EAAkBC,GAAkB,CAC3CC,IAAAA,EAEA,GAAA,CACIA,EAAA,IAAIC,IAAIF,CAAK,OACT,CACH,MAAA,EAAA,CAGT,OAAOC,EAAIE,WAAa,SAAWF,EAAIE,WAAa,QACtD,EAEaC,EAA8BA,CACzCH,EACAI,EAAgB,MACb,CACEC,qBAAQC,UACRR,EAAeE,CAAG,GAEvBO,WAAW,IAAMF,OAAOC,SAASE,OAAOR,CAAG,EAAGI,CAAK,CACrD"}