@pantoken/pendo 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +75 -0
  2. package/dist/global.css +1 -0
  3. package/dist/index.d.mts +100 -0
  4. package/dist/index.mjs +268 -0
  5. package/package.json +45 -0
package/README.md ADDED
@@ -0,0 +1,75 @@
1
+ # @pantoken/pendo
2
+
3
+ An Instructure-styled global stylesheet for Pendo guides, built on pantoken tokens.
4
+
5
+ Pendo injects guide HTML into a host page. This renders that guide DOM (`._pendo-*`) to match Instructure UI: buttons, cards, popovers, alerts, selects, text areas, radios, NPS and number-scale polls, dividers, images, and video. The component CSS is ported from `@instructure/pendo-global-css`; pantoken supplies the `--instui-*` token layer and assembles the result.
6
+
7
+ ## Install
8
+
9
+ ```sh
10
+ npm i @pantoken/pendo
11
+ ```
12
+
13
+ Also available as `pantoken/pendo`.
14
+
15
+ ## Use
16
+
17
+ Import the ready-made stylesheet, or the static file:
18
+
19
+ ```ts
20
+ import { pendoCss } from "@pantoken/pendo";
21
+ ```
22
+
23
+ ```css
24
+ @import "@pantoken/pendo/global.css";
25
+ ```
26
+
27
+ Or build a variant:
28
+
29
+ ```ts
30
+ import { buildPendoCss } from "@pantoken/pendo";
31
+
32
+ const css = buildPendoCss({
33
+ theme: "canvas", // token theme (default "rebrand")
34
+ scope: true, // wrap in @scope for containment (default true)
35
+ important: true, // add !important so guide styles beat Pendo's (default true)
36
+ prune: true, // tree-shake unused --instui-* tokens (default true)
37
+ });
38
+ ```
39
+
40
+ ### CLI
41
+
42
+ ```sh
43
+ pantoken generate pendo --out ./pendo
44
+ pantoken generate pendo --out ./pendo --theme canvas --no-scope --no-important
45
+ ```
46
+
47
+ Writes `global.css`.
48
+
49
+ ## How it fits together
50
+
51
+ - **Token layer** — pantoken's `@pantoken/css` emits the `--instui-*` custom properties, scoped to the guide container `[class*="instui"]`. This is the drop-in replacement for pendo-styles' generated `vendor/tokens.css`.
52
+ - **Component layers** — the ported `._pendo-*` rules, assembled in a fixed `@layer` cascade order. Layered `!important` is what keeps guide styles above Pendo's own unlayered `!important`.
53
+ - **Package-local transforms** (`src/plugins/`, PostCSS, scoped to this package — Pendo deployment behavior, not general pantoken plugins):
54
+ - `add-important` — adds `!important` to component declarations.
55
+ - `add-scope` — wraps everything in `@scope (._pendo-step-container)` for DOM containment.
56
+ - **Token pruning** — [`@pantoken/plugin-prune-custom-props`](../../plugins/postcss/prune-custom-props), a shared plugin (any renderer built on the full token layer wants it). It tree-shakes the token set to only what the guide references, dropping ≈1,800 unused icon data-URIs — the full build is ~95 KB instead of ~1.7 MB.
57
+ - **Focus ring** — `focusOutlineDeclarations()` + `focusOutlineRules()` from [`@pantoken/components`](../../formats/components) build the animated ring for the plain focusables (`._pendo-button`, `._pendo-close-guide`, `._pendo-text-link`) in a last-declared `instui.focusOutline` layer. (The ring used to be a standalone plugin; it now ships in `@pantoken/components`, which also bakes it into `base.css`.) Components with custom focus behavior (select/textarea background resets, the radio and number-scale sibling outlines, the card's `:focus-visible` reset) keep their own rules, referencing the `--instui-focus-outline-*` tokens.
58
+
59
+ Every `var(--instui-*)` the ported CSS references resolves against pantoken's token layer — a test asserts full coverage.
60
+
61
+ ## Not included yet
62
+
63
+ These are deployment concerns handled downstream in pendo-styles and are left to the consumer:
64
+
65
+ - Per-app guide-prefix rewriting (`guide-<theme>` → `guide-<app>-<theme>`).
66
+ - Dark-mode format conversion (this ships `light-dark()` as-is).
67
+ - Per-app `overrides.css`.
68
+
69
+ ## Credits
70
+
71
+ Component CSS ported from [`@instructure/pendo-global-css`](https://github.com/instructure) (MIT).
72
+
73
+ ## License
74
+
75
+ MIT
package/dist/global.css ADDED
@@ -0,0 +1 @@
1
+ @layer instui.tokens,instui.elevation,instui.icons,instui.popover,instui.alert,instui.text,instui.closeButton,instui.img,instui.inputs,instui.button,instui.pagination,instui.mask,instui.view,instui.card,instui.manual,instui.focusOutline;@scope(._pendo-step-container){@layer instui.tokens{@property --instui-primitive-color-white{syntax:"<color>";inherits:true;initial-value:#fff}@property --instui-primitive-color-transparent{syntax:"<color>";inherits:true;initial-value:#0000}@property --instui-primitive-color-green-green100{syntax:"<color>";inherits:true;initial-value:#03893d}@property --instui-primitive-color-green-green110{syntax:"<color>";inherits:true;initial-value:#037d37}@property --instui-primitive-color-grey-grey10{syntax:"<color>";inherits:true;initial-value:#f2f4f5}@property --instui-primitive-color-grey-grey30{syntax:"<color>";inherits:true;initial-value:#dfe1e3}@property --instui-primitive-color-grey-grey40{syntax:"<color>";inherits:true;initial-value:#c7cacd}@property --instui-primitive-color-grey-grey50{syntax:"<color>";inherits:true;initial-value:#aab0b5}@property --instui-primitive-color-grey-grey60{syntax:"<color>";inherits:true;initial-value:#9ea6ad}@property --instui-primitive-color-grey-grey70{syntax:"<color>";inherits:true;initial-value:#8d959f}@property --instui-primitive-color-grey-grey80{syntax:"<color>";inherits:true;initial-value:#7e8792}@property --instui-primitive-color-grey-grey100{syntax:"<color>";inherits:true;initial-value:#6a7883}@property --instui-primitive-color-grey-grey110{syntax:"<color>";inherits:true;initial-value:#5f6e7a}@property --instui-primitive-color-grey-grey120{syntax:"<color>";inherits:true;initial-value:#576773}@property --instui-primitive-color-grey-grey130{syntax:"<color>";inherits:true;initial-value:#4a5b68}@property --instui-primitive-color-grey-grey150{syntax:"<color>";inherits:true;initial-value:#334450}@property --instui-primitive-color-grey-grey170{syntax:"<color>";inherits:true;initial-value:#273540}@property --instui-primitive-color-grey-grey180{syntax:"<color>";inherits:true;initial-value:#1c222b}@property --instui-primitive-color-grey-grey190{syntax:"<color>";inherits:true;initial-value:#171b21}@property --instui-primitive-color-blue-blue40{syntax:"<color>";inherits:true;initial-value:#accdf7}@property --instui-primitive-color-blue-blue50{syntax:"<color>";inherits:true;initial-value:#7fb4f1}@property --instui-primitive-color-blue-blue70{syntax:"<color>";inherits:true;initial-value:#4798e3}@property --instui-primitive-color-blue-blue100{syntax:"<color>";inherits:true;initial-value:#2b7abc}@property --instui-primitive-color-blue-blue120{syntax:"<color>";inherits:true;initial-value:#2369a4}@property --instui-primitive-color-blue-blue140{syntax:"<color>";inherits:true;initial-value:#1a5281}@property --instui-primitive-color-red-red100{syntax:"<color>";inherits:true;initial-value:#e62429}@property --instui-primitive-color-red-red110{syntax:"<color>";inherits:true;initial-value:#cf1f24}@property --instui-primitive-color-orange-orange100{syntax:"<color>";inherits:true;initial-value:#cf4a00}@property --instui-primitive-color-navy-navy10{syntax:"<color>";inherits:true;initial-value:#eef4fd}@property --instui-primitive-color-navy-navy20{syntax:"<color>";inherits:true;initial-value:#e2eaf7}@property --instui-primitive-color-navy-navy60{syntax:"<color>";inherits:true;initial-value:#86a8d5}@property --instui-primitive-color-navy-navy70{syntax:"<color>";inherits:true;initial-value:#7097c7}@property --instui-primitive-color-navy-navy110{syntax:"<color>";inherits:true;initial-value:#44709f}@property --instui-primitive-color-navy-navy140{syntax:"<color>";inherits:true;initial-value:#2e5177}@property --instui-primitive-color-navy-navy150{syntax:"<color>";inherits:true;initial-value:#234465}@property --instui-primitive-color-navy-navy170{syntax:"<color>";inherits:true;initial-value:#1d354f}@property --instui-primitive-color-white-opacity75{syntax:"<color>";inherits:true;initial-value:#ffffffbf}@property --instui-primitive-color-grey-opacity75{syntax:"<color>";inherits:true;initial-value:#1c222bbf}@property --instui-primitive-size-size1{syntax:"*";inherits:true;initial-value:.0625rem}@property --instui-primitive-size-size2{syntax:"*";inherits:true;initial-value:.125rem}@property --instui-primitive-size-size4{syntax:"*";inherits:true;initial-value:.25rem}@property --instui-primitive-size-size8{syntax:"*";inherits:true;initial-value:.5rem}@property --instui-primitive-size-size12{syntax:"*";inherits:true;initial-value:.75rem}@property --instui-primitive-size-size14{syntax:"*";inherits:true;initial-value:.875rem}@property --instui-primitive-size-size16{syntax:"*";inherits:true;initial-value:1rem}@property --instui-primitive-size-size20{syntax:"*";inherits:true;initial-value:1.25rem}@property --instui-primitive-size-size24{syntax:"*";inherits:true;initial-value:1.5rem}@property --instui-primitive-size-size32{syntax:"*";inherits:true;initial-value:2rem}@property --instui-primitive-font-family-inclusive-sans{syntax:"*";inherits:true;initial-value:Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif}@property --instui-primitive-font-family-atkinson{syntax:"*";inherits:true;initial-value:Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif}@property --instui-primitive-font-weight-regular{syntax:"<integer>";inherits:true;initial-value:400}@property --instui-primitive-font-weight-medium{syntax:"<integer>";inherits:true;initial-value:500}@property --instui-primitive-font-weight-semi-bold{syntax:"<integer>";inherits:true;initial-value:600}@property --instui-primitive-font-weight-bold{syntax:"<integer>";inherits:true;initial-value:700}@property --instui-line-height-paragraph-base{syntax:"<percentage>";inherits:true;initial-value:150%}@property --instui-line-height-standalone-base{syntax:"<percentage>";inherits:true;initial-value:125%}@property --instui-line-height-heading-base{syntax:"<percentage>";inherits:true;initial-value:125%}@property --instui-line-height-label-base{syntax:"*";inherits:true;initial-value:1.125rem}@property --instui-component-view-border-style{syntax:"*";inherits:true;initial-value:solid}@property --instui-component-text-letter-spacing-normal{syntax:"*";inherits:true;initial-value:0rem}@property --instui-component-shared-tokens-border-radius-full{syntax:"*";inherits:true;initial-value:999rem}@property --instui-component-shared-tokens-spacing-general-space-none{syntax:"*";inherits:true;initial-value:0rem}@property --instui-component-shared-tokens-focus-outline-style{syntax:"*";inherits:true;initial-value:solid}@property --instui-component-radio-input-checked-inset-sm{syntax:"*";inherits:true;initial-value:.375rem}@property --instui-component-link-text-decoration-within-text{syntax:"*";inherits:true;initial-value:underline}@property --instui-component-icon-size-sm{syntax:"*";inherits:true;initial-value:1rem}@property --instui-component-icon-size-md{syntax:"*";inherits:true;initial-value:1.25rem}@property --instui-component-heading-title-card-large-font-size{syntax:"*";inherits:true;initial-value:1.5rem}@property --instui-component-base-button-letter-spacing{syntax:"*";inherits:true;initial-value:normal}@property --instui-component-base-button-border-style{syntax:"*";inherits:true;initial-value:solid}@property --instui-component-base-button-padding-vertical{syntax:"*";inherits:true;initial-value:.25rem}@property --instui-component-alert-border-style{syntax:"*";inherits:true;initial-value:solid}@property --instui-component-alert-close-button-margin-right{syntax:"*";inherits:true;initial-value:.5rem}@property --instui-component-alert-close-button-margin-top{syntax:"*";inherits:true;initial-value:.5rem}@property --instui-icon-check{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-chevron-down{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-chevron-up{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-circle-check{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-circle-x{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-info{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-triangle-alert{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E)}[class*=instui]{--instui-size-interactive-height-sm:var(--instui-primitive-size-size32);--instui-spacing-space2xs:var(--instui-primitive-size-size2);--instui-spacing-space-xs:var(--instui-primitive-size-size4);--instui-spacing-space-sm:var(--instui-primitive-size-size8);--instui-spacing-space-md:var(--instui-primitive-size-size12);--instui-spacing-space-lg:var(--instui-primitive-size-size16);--instui-spacing-space-xl:var(--instui-primitive-size-size24);--instui-spacing-gap-cards-sm:var(--instui-primitive-size-size12);--instui-spacing-gap-cards-md:var(--instui-primitive-size-size16);--instui-spacing-gap-input-elements:var(--instui-primitive-size-size8);--instui-spacing-padding-container-xxs:var(--instui-primitive-size-size8);--instui-spacing-padding-container-sm:var(--instui-primitive-size-size16);--instui-spacing-padding-interactive-horizontal-sm:var(--instui-primitive-size-size8);--instui-spacing-padding-interactive-horizontal-md:var(--instui-primitive-size-size12);--instui-border-radius-sm:var(--instui-primitive-size-size4);--instui-border-radius-md:var(--instui-primitive-size-size8);--instui-border-radius-lg:var(--instui-primitive-size-size12);--instui-border-radius-interactive-base:var(--instui-primitive-size-size12);--instui-border-width-sm:var(--instui-primitive-size-size1);--instui-border-width-md:var(--instui-primitive-size-size2);--instui-border-width-interactive-base:var(--instui-primitive-size-size1);--instui-font-family-heading:var(--instui-primitive-font-family-inclusive-sans);--instui-font-family-base:var(--instui-primitive-font-family-atkinson);--instui-font-weight-body-base:var(--instui-primitive-font-weight-regular);--instui-font-weight-body-strong:var(--instui-primitive-font-weight-semi-bold);--instui-font-weight-heading-strong:var(--instui-primitive-font-weight-bold);--instui-font-weight-interactive:var(--instui-primitive-font-weight-medium);--instui-line-height-paragraph-text-sm:var(--instui-primitive-size-size20);--instui-line-height-standalone-text-xs:var(--instui-primitive-size-size12);--instui-line-height-standalone-text-base:var(--instui-primitive-size-size16);--instui-font-size-text-xs:var(--instui-primitive-size-size12);--instui-font-size-text-sm:var(--instui-primitive-size-size14);--instui-font-size-text-base:var(--instui-primitive-size-size16);--instui-font-size-text-lg:var(--instui-primitive-size-size20);--instui-color-background-interactive-input-base:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-grey-grey190));--instui-color-background-interactive-input-hover:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-grey-grey190));--instui-color-background-interactive-action-primary-base:light-dark(var(--instui-primitive-color-navy-navy170),var(--instui-primitive-color-navy-navy10));--instui-color-background-interactive-action-primary-hover:light-dark(var(--instui-primitive-color-navy-navy150),var(--instui-primitive-color-white));--instui-color-background-interactive-action-primary-disabled:light-dark(var(--instui-primitive-color-grey-grey30),var(--instui-primitive-color-grey-grey150));--instui-color-background-interactive-action-secondary-disabled:light-dark(var(--instui-primitive-color-grey-grey30),var(--instui-primitive-color-grey-grey150));--instui-color-background-interactive-action-tertiary-hover:light-dark(var(--instui-primitive-color-navy-navy10),var(--instui-primitive-color-navy-navy140));--instui-color-background-interactive-action-tertiary-active:light-dark(var(--instui-primitive-color-navy-navy20),var(--instui-primitive-color-navy-navy150));--instui-color-background-elevated-surface-base:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-grey-grey190));--instui-color-background-overlay-base:light-dark(var(--instui-primitive-color-white-opacity75),var(--instui-primitive-color-grey-opacity75));--instui-color-stroke-base:light-dark(var(--instui-primitive-color-grey-grey70),var(--instui-primitive-color-grey-grey100));--instui-color-stroke-success:var(--instui-primitive-color-green-green100);--instui-color-stroke-error:var(--instui-primitive-color-red-red100);--instui-color-stroke-warning:var(--instui-primitive-color-orange-orange100);--instui-color-stroke-info:var(--instui-primitive-color-blue-blue100);--instui-color-stroke-interactive-focus-ring-base:light-dark(var(--instui-primitive-color-blue-blue100),var(--instui-primitive-color-blue-blue70));--instui-color-stroke-interactive-focus-ring-on-color:var(--instui-primitive-color-white);--instui-color-stroke-interactive-input-base:light-dark(var(--instui-primitive-color-grey-grey80),var(--instui-primitive-color-grey-grey110));--instui-color-stroke-interactive-input-hover:light-dark(var(--instui-primitive-color-grey-grey150),var(--instui-primitive-color-grey-grey80));--instui-color-stroke-interactive-input-readonly:var(--instui-primitive-color-grey-grey70);--instui-color-stroke-interactive-input-selected:light-dark(var(--instui-primitive-color-grey-grey180),var(--instui-primitive-color-white));--instui-color-stroke-interactive-action-primary-disabled:light-dark(var(--instui-primitive-color-grey-grey30),var(--instui-primitive-color-grey-grey150));--instui-color-stroke-interactive-action-secondary-disabled:light-dark(var(--instui-primitive-color-grey-grey30),var(--instui-primitive-color-grey-grey150));--instui-color-stroke-interactive-action-destructive-base:var(--instui-primitive-color-red-red110);--instui-color-stroke-interactive-action-success-base:var(--instui-primitive-color-green-green110);--instui-color-stroke-interactive-action-tertiary-base:light-dark(var(--instui-primitive-color-navy-navy60),var(--instui-primitive-color-navy-navy70));--instui-color-stroke-interactive-action-tertiary-disabled:light-dark(var(--instui-primitive-color-grey-grey40),var(--instui-primitive-color-grey-grey130));--instui-color-text-base:light-dark(var(--instui-primitive-color-grey-grey170),var(--instui-primitive-color-grey-grey10));--instui-color-text-muted:light-dark(var(--instui-primitive-color-grey-grey120),var(--instui-primitive-color-grey-grey50));--instui-color-text-interactive-disabled-base:light-dark(var(--instui-primitive-color-grey-grey70),var(--instui-primitive-color-grey-grey120));--instui-color-text-interactive-input-hover:light-dark(var(--instui-primitive-color-grey-grey150),var(--instui-primitive-color-grey-grey60));--instui-color-text-interactive-input-placeholder:light-dark(var(--instui-primitive-color-grey-grey110),var(--instui-primitive-color-grey-grey80));--instui-color-text-interactive-navigation-primary-hover:light-dark(var(--instui-primitive-color-blue-blue140),var(--instui-primitive-color-blue-blue40));--instui-color-text-interactive-action-secondary-disabled:light-dark(var(--instui-primitive-color-grey-grey60),var(--instui-primitive-color-grey-grey100));--instui-color-text-interactive-action-primary-base:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-navy-navy170));--instui-color-text-interactive-action-primary-disabled:light-dark(var(--instui-primitive-color-grey-grey60),var(--instui-primitive-color-grey-grey100));--instui-color-text-interactive-action-tertiary-base:light-dark(var(--instui-primitive-color-navy-navy170),var(--instui-primitive-color-navy-navy10));--instui-color-text-interactive-action-tertiary-disabled:light-dark(var(--instui-primitive-color-grey-grey50),var(--instui-primitive-color-grey-grey130));--instui-color-icon-on-color:var(--instui-primitive-color-white);--instui-color-drop-shadow-shadow-color1:light-dark(#23446526,#0000004d);--instui-color-drop-shadow-shadow-color2:light-dark(#2344651a,#00000026);--instui-color-transparent-color:var(--instui-primitive-color-transparent);--instui-color-institutional-brand-font-color-dark:light-dark(var(--instui-primitive-color-grey-grey170),var(--instui-primitive-color-white));--instui-color-institutional-link-color:light-dark(var(--instui-primitive-color-blue-blue120),var(--instui-primitive-color-blue-blue50));--instui-color-institutional-brand-button-primary-bgd:light-dark(var(--instui-primitive-color-navy-navy170),var(--instui-primitive-color-navy-navy10));--instui-color-institutional-brand-button-primary-text:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-navy-navy170));--instui-color-institutional-brand-button-secondary-bgd:light-dark(var(--instui-primitive-color-navy-navy110),var(--instui-primitive-color-navy-navy60));--instui-color-institutional-brand-button-secondary-text:light-dark(var(--instui-primitive-color-navy-navy170),var(--instui-primitive-color-white));--instui-component-view-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-view-background-primary:var(--instui-color-background-elevated-surface-base);--instui-component-text-input-background-color:var(--instui-color-background-interactive-input-base);--instui-component-text-input-background-hover-color:var(--instui-color-background-interactive-input-hover);--instui-component-text-input-border-color:var(--instui-color-stroke-interactive-input-base);--instui-component-text-input-border-hover-color:var(--instui-color-stroke-interactive-input-hover);--instui-component-text-input-border-radius:var(--instui-border-radius-interactive-base);--instui-component-text-input-border-width:var(--instui-border-width-interactive-base);--instui-component-text-input-text-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-text-input-font-family:var(--instui-font-family-base);--instui-component-text-input-font-weight:var(--instui-font-weight-interactive);--instui-component-text-input-font-size-sm:var(--instui-font-size-text-sm);--instui-component-text-input-height-sm:var(--instui-size-interactive-height-sm);--instui-component-text-input-padding-horizontal-sm:var(--instui-spacing-space-sm);--instui-component-text-area-background-color:var(--instui-color-background-interactive-input-base);--instui-component-text-area-background-hover-color:var(--instui-color-background-interactive-input-hover);--instui-component-text-area-border-color:var(--instui-color-stroke-interactive-input-base);--instui-component-text-area-border-hover-color:var(--instui-color-stroke-interactive-input-hover);--instui-component-text-area-border-radius:var(--instui-border-radius-interactive-base);--instui-component-text-area-border-width:var(--instui-border-width-interactive-base);--instui-component-text-area-text-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-text-area-placeholder-color:var(--instui-color-text-interactive-input-placeholder);--instui-component-text-area-placeholder-hover-color:var(--instui-color-text-interactive-input-hover);--instui-component-text-area-font-family:var(--instui-font-family-base);--instui-component-text-area-font-weight:var(--instui-font-weight-body-base);--instui-component-text-area-font-size-sm:var(--instui-font-size-text-sm);--instui-component-text-area-gap-content:var(--instui-spacing-space-md);--instui-component-text-area-padding:var(--instui-spacing-space-md);--instui-component-text-content-important-font-family:var(--instui-font-family-base);--instui-component-text-content-important-font-weight:var(--instui-font-weight-body-strong);--instui-component-text-content-important-line-height:var(--instui-line-height-paragraph-base);--instui-component-text-content-small-font-family:var(--instui-font-family-base);--instui-component-text-content-small-font-weight:var(--instui-font-weight-body-base);--instui-component-text-content-small-font-size:var(--instui-font-size-text-sm);--instui-component-text-content-small-line-height:var(--instui-line-height-paragraph-base);--instui-component-text-base-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-text-muted-color:var(--instui-color-text-muted);--instui-component-tabs-panel-border-color:var(--instui-color-stroke-base);--instui-component-shared-tokens-border-radius-sm:var(--instui-border-radius-sm);--instui-component-shared-tokens-spacing-general-space2xs:var(--instui-spacing-space2xs);--instui-component-shared-tokens-spacing-general-space-xs:var(--instui-spacing-space-xs);--instui-component-shared-tokens-spacing-general-space-sm:var(--instui-spacing-space-sm);--instui-component-shared-tokens-spacing-general-space-md:var(--instui-spacing-space-md);--instui-component-shared-tokens-spacing-general-space-lg:var(--instui-spacing-space-lg);--instui-component-shared-tokens-spacing-gap-cards-sm:var(--instui-spacing-gap-cards-sm);--instui-component-shared-tokens-spacing-gap-cards-md:var(--instui-spacing-gap-cards-md);--instui-component-shared-tokens-spacing-padding-card-sm:var(--instui-spacing-padding-container-xxs);--instui-component-shared-tokens-spacing-padding-card-lg:var(--instui-spacing-padding-container-sm);--instui-component-shared-tokens-focus-outline-offset:var(--instui-spacing-space2xs);--instui-component-shared-tokens-focus-outline-width:var(--instui-border-width-md);--instui-component-shared-tokens-focus-outline-info-color:var(--instui-color-stroke-interactive-focus-ring-base);--instui-component-shared-tokens-focus-outline-on-color:var(--instui-color-stroke-interactive-focus-ring-on-color);--instui-component-shared-tokens-focus-outline-success-color:var(--instui-color-stroke-interactive-action-success-base);--instui-component-shared-tokens-focus-outline-danger-color:var(--instui-color-stroke-interactive-action-destructive-base);--instui-component-shared-tokens-stroke-width-sm:var(--instui-border-width-sm);--instui-component-radio-input-background-color:var(--instui-color-background-interactive-input-base);--instui-component-radio-input-background-hover-color:var(--instui-color-background-interactive-input-hover);--instui-component-radio-input-border-color:var(--instui-color-stroke-interactive-input-base);--instui-component-radio-input-border-readonly-color:var(--instui-color-stroke-interactive-input-readonly);--instui-component-radio-input-border-selected-color:var(--instui-color-stroke-interactive-input-selected);--instui-component-radio-input-font-size-sm:var(--instui-font-size-text-sm);--instui-component-radio-input-line-height-sm:var(--instui-line-height-paragraph-text-sm);--instui-component-radio-input-font-family:var(--instui-font-family-base);--instui-component-radio-input-font-weight:var(--instui-font-weight-body-base);--instui-component-radio-input-gap:var(--instui-spacing-space-sm);--instui-component-radio-input-border-width:var(--instui-border-width-interactive-base);--instui-component-radio-input-label-base-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-radio-input-label-hover-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-popover-border-color:var(--instui-color-stroke-base);--instui-component-popover-border-radius:var(--instui-border-radius-lg);--instui-component-options-item-background:var(--instui-color-background-elevated-surface-base);--instui-component-options-item-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-options-item-font-family:var(--instui-font-family-base);--instui-component-options-item-font-weight:var(--instui-font-weight-body-base);--instui-component-options-item-font-weight-selected:var(--instui-font-weight-body-base);--instui-component-options-item-highlighted-background:var(--instui-color-background-interactive-action-tertiary-hover);--instui-component-options-item-highlighted-label-color:var(--instui-color-text-base);--instui-component-options-item-line-height:var(--instui-line-height-standalone-base);--instui-component-options-item-padding-horizontal:var(--instui-spacing-space-md);--instui-component-options-item-selected-background:var(--instui-color-background-interactive-action-primary-base);--instui-component-options-item-selected-label-color:var(--instui-color-text-interactive-action-primary-base);--instui-component-metric-label-font-size:var(--instui-font-size-text-xs);--instui-component-metric-label-font-weight:var(--instui-font-weight-body-base);--instui-component-menu-item-selected-highlighted-background:var(--instui-color-background-interactive-action-primary-hover);--instui-component-mask-background-color:var(--instui-color-background-overlay-base);--instui-component-link-text-color:var(--instui-color-institutional-link-color);--instui-component-link-text-hover-color:var(--instui-color-text-interactive-navigation-primary-hover);--instui-component-link-text-disabled-color:var(--instui-color-text-interactive-disabled-base);--instui-component-link-font-weight:var(--instui-font-weight-interactive);--instui-component-heading-title-card-large-font-family:var(--instui-font-family-heading);--instui-component-heading-title-card-large-font-weight:var(--instui-font-weight-heading-strong);--instui-component-heading-title-card-large-line-height:var(--instui-line-height-heading-base);--instui-component-heading-title-card-regular-font-family:var(--instui-font-family-heading);--instui-component-heading-title-card-regular-font-weight:var(--instui-font-weight-heading-strong);--instui-component-heading-title-card-regular-font-size:var(--instui-font-size-text-lg);--instui-component-heading-title-card-regular-line-height:var(--instui-line-height-heading-base);--instui-component-heading-title-card-mini-font-family:var(--instui-font-family-heading);--instui-component-heading-title-card-mini-font-weight:var(--instui-font-weight-heading-strong);--instui-component-heading-title-card-mini-font-size:var(--instui-font-size-text-base);--instui-component-heading-title-card-mini-line-height:var(--instui-line-height-heading-base);--instui-component-form-field-layout-text-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-form-field-layout-font-family:var(--instui-font-family-base);--instui-component-form-field-layout-font-weight:var(--instui-font-weight-body-base);--instui-component-form-field-layout-font-size:var(--instui-font-size-text-base);--instui-component-form-field-layout-line-height:var(--instui-line-height-label-base);--instui-component-form-field-layout-gap-primitives:var(--instui-spacing-gap-input-elements);--instui-component-base-button-primary-active-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-active-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-active-text-color:var(--instui-color-institutional-brand-button-primary-text);--instui-component-base-button-primary-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-color:var(--instui-color-institutional-brand-button-primary-text);--instui-component-base-button-primary-disabled-background-color:var(--instui-color-background-interactive-action-primary-disabled);--instui-component-base-button-primary-disabled-border-color:var(--instui-color-stroke-interactive-action-primary-disabled);--instui-component-base-button-primary-disabled-text-color:var(--instui-color-text-interactive-action-primary-disabled);--instui-component-base-button-primary-ghost-active-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-ghost-hover-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-hover-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-hover-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-hover-text-color:var(--instui-color-institutional-brand-button-primary-text);--instui-component-base-button-secondary-active-background:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-active-border-color:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-active-text-color:var(--instui-color-institutional-brand-button-secondary-text);--instui-component-base-button-secondary-background:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-border-color:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-color:var(--instui-color-institutional-brand-button-secondary-text);--instui-component-base-button-secondary-disabled-background-color:var(--instui-color-background-interactive-action-secondary-disabled);--instui-component-base-button-secondary-disabled-border-color:var(--instui-color-stroke-interactive-action-secondary-disabled);--instui-component-base-button-secondary-disabled-text-color:var(--instui-color-text-interactive-action-secondary-disabled);--instui-component-base-button-secondary-hover-background:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-hover-border-color:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-hover-text-color:var(--instui-color-institutional-brand-button-secondary-text);--instui-component-base-button-small-font-size:var(--instui-font-size-text-sm);--instui-component-base-button-small-height:var(--instui-size-interactive-height-sm);--instui-component-base-button-small-padding-horizontal:var(--instui-spacing-padding-interactive-horizontal-md);--instui-component-base-button-border-radius:var(--instui-border-radius-interactive-base);--instui-component-base-button-border-width:var(--instui-border-width-interactive-base);--instui-component-base-button-font-family:var(--instui-font-family-base);--instui-component-base-button-font-weight:var(--instui-font-weight-interactive);--instui-component-base-button-gap-button-content-md:var(--instui-spacing-space-sm);--instui-component-base-button-gap-button-content-sm:var(--instui-spacing-space-xs);--instui-component-base-button-tertiary-active-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-tertiary-active-text-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-tertiary-disabled-border-color:var(--instui-color-stroke-interactive-action-tertiary-disabled);--instui-component-base-button-tertiary-disabled-text-color:var(--instui-color-text-interactive-action-tertiary-disabled);--instui-component-base-button-tertiary-hover-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-tertiary-hover-text-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-line-height:var(--instui-line-height-standalone-base);--instui-component-alert-border-radius:var(--instui-border-radius-lg);--instui-component-alert-border-width:var(--instui-border-width-md);--instui-component-alert-danger-border-color:var(--instui-color-stroke-error);--instui-component-alert-icon-color:var(--instui-color-icon-on-color);--instui-component-alert-info-border-color:var(--instui-color-stroke-info);--instui-component-alert-success-border-color:var(--instui-color-stroke-success);--instui-component-alert-warning-border-color:var(--instui-color-stroke-warning);--instui-component-alert-content-padding-vertical:var(--instui-spacing-space-md);--instui-component-alert-content-padding-horizontal:var(--instui-spacing-space-xl);--manual-light-pendo-embedded-pendo-step-container-styles-width:59.25rem;--manual-light-new-theme-components-alert-padding-left:2.5rem;--manual-light-pendo-overlay-pendo-step-container-styles-width:22.5rem;--instui-component-text-area-min-height:4rem;--instui-component-text-area-max-height:6rem}}@layer instui.elevation{[class*=instui]{--instui-elevation-above:0 .1875rem .375rem var(--instui-color-drop-shadow-shadow-color2), 0 .1875rem .375rem var(--instui-color-drop-shadow-shadow-color1)}}@layer instui.icons{[class*=instui]{& [class*=pendo-video-wrapper]{aspect-ratio:16/9!important;height:auto!important;padding-bottom:0!important;position:relative!important;overflow:visible!important}& ._pendo-video{width:100%!important;height:100%!important;display:block!important}& .pendo-mock-flexbox-element:has([class*=pendo-video-wrapper]){width:100%!important}}}@layer instui.popover{[class*=instui]:is([data-layout=tooltipBlank],._pendo-guide-walkthrough_){& ._pendo-step-container-size{height:auto!important}& ._pendo-step-container-styles{border-radius:var(--instui-component-popover-border-radius)!important;border-color:var(--instui-component-popover-border-color)!important;min-height:2.75rem!important;box-shadow:var(--instui-elevation-above)!important;margin-bottom:calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md))!important;margin-left:var(--instui-component-shared-tokens-spacing-general-space-md)!important;margin-right:var(--instui-component-shared-tokens-spacing-general-space-md)!important;margin-top:var(--instui-component-shared-tokens-spacing-general-space-xs)!important}& .pendo-tooltip-caret{--caret-color:var(--instui-component-view-background-primary);&.pendo-tooltip-caret--top{border-top-color:var(--caret-color)!important;bottom:calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 15px)!important;&+.pendo-tooltip-caret-border{bottom:calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 16px)!important}}&.pendo-tooltip-caret--right{border-right-color:var(--caret-color)!important;left:-3px!important;&+.pendo-tooltip-caret-border{left:-4px!important}}&.pendo-tooltip-caret--bottom{border-bottom-color:var(--caret-color)!important;top:calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 15px)!important;&+.pendo-tooltip-caret-border{top:calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 16px)!important}}&.pendo-tooltip-caret--left{border-left-color:var(--caret-color)!important;right:-3px!important;&+.pendo-tooltip-caret-border{right:-4px!important}}}&[data-layout=tooltipBlank]{& ._pendo-step-container-styles{width:var(--manual-light-pendo-overlay-pendo-step-container-styles-width)!important;padding:var(--instui-component-shared-tokens-spacing-padding-card-sm) var(--instui-component-shared-tokens-spacing-padding-card-sm) var(--instui-component-shared-tokens-spacing-general-space-none)!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles{width:auto!important;padding:var(--instui-component-shared-tokens-spacing-padding-card-lg) var(--instui-component-shared-tokens-spacing-padding-card-lg) var(--instui-component-shared-tokens-spacing-general-space-sm)!important;margin-bottom:var(--instui-component-shared-tokens-spacing-general-space-md)!important}&:not(:has(._pendo-row)){& ._pendo-step-container-styles{padding-bottom:var(--instui-component-shared-tokens-spacing-padding-card-sm)!important}}}}}@layer instui.alert{[class*=instui][data-layout=lightboxBlank]{&,&[class*=instui-info]{--_alert-color:var(--instui-component-alert-info-border-color);--_alert-icon:var(--instui-icon-info)}&[class*=instui-danger]{--_alert-color:var(--instui-component-alert-danger-border-color);--_alert-icon:var(--instui-icon-circle-x)}&[class*=instui-success]{--_alert-color:var(--instui-component-alert-success-border-color);--_alert-icon:var(--instui-icon-circle-check)}&[class*=instui-warning]{--_alert-color:var(--instui-component-alert-warning-border-color);--_alert-icon:var(--instui-icon-triangle-alert)}&,& ._pendo-step-container-size{margin-right:var(--instui-spacing-space2xs)!important;margin-left:var(--instui-spacing-space2xs)!important;max-width:var(--manual-light-pendo-embedded-pendo-step-container-styles-width)!important}& ._pendo-step-container-size{z-index:300000!important;padding-bottom:calc(var(--instui-spacing-space-md))!important;padding-top:var(--instui-spacing-space-sm)!important}& ._pendo-step-container-styles{border-color:var(--_alert-color)!important;border-width:var(--instui-component-alert-border-width)!important;border-style:var(--instui-component-alert-border-style)!important;border-radius:var(--instui-component-alert-border-radius)!important;height:auto!important;padding:var(--instui-component-alert-content-padding-vertical) var(--instui-component-alert-content-padding-horizontal) var(--instui-component-alert-content-padding-vertical) calc(var(--manual-light-new-theme-components-alert-padding-left) + var(--instui-component-alert-content-padding-horizontal))!important;box-shadow:var(--instui-elevation-above)!important;margin-bottom:var(--instui-spacing-space-md)!important;margin-left:var(--instui-spacing-space-lg)!important;margin-right:var(--instui-spacing-space-lg)!important;margin-top:var(--instui-spacing-space-xs)!important;position:relative!important;overflow:hidden!important;&:before{content:""!important;width:var(--manual-light-new-theme-components-alert-padding-left)!important;background-color:var(--_alert-color)!important;inset-block:0!important;display:block!important;position:absolute!important;left:0!important;overflow:hidden!important}&:after{content:""!important;top:50%!important;left:calc((var(--manual-light-new-theme-components-alert-padding-left) - var(--instui-component-icon-size-md)) / 2)!important;width:var(--instui-component-icon-size-md)!important;height:var(--instui-component-icon-size-md)!important;mask-image:var(--_alert-icon)!important;background-color:var(--instui-component-alert-icon-color)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}}}@layer instui.text{[class*=instui]{& ._pendo-simple-text,& [class*=_pendo-text-]{font-family:var(--instui-component-text-content-small-font-family)!important;font-weight:var(--instui-component-text-content-small-font-weight)!important;font-size:var(--instui-component-text-content-small-font-size)!important;line-height:var(--instui-component-text-content-small-line-height)!important;letter-spacing:var(--instui-component-text-letter-spacing-normal)!important;color:var(--instui-component-text-base-color)!important;max-width:100%!important}& ._pendo-text-bold{font-weight:var(--instui-component-text-content-important-font-weight)!important}& ._pendo-text-italic{font-family:var(--instui-component-text-content-important-font-family)!important;font-weight:var(--instui-component-text-content-important-font-weight)!important;line-height:var(--instui-component-text-content-important-line-height)!important}& ._pendo-text-strike{text-decoration:line-through!important}& h2:is(._pendo-simple-text,._pendo-text-title){font-weight:var(--instui-component-heading-title-card-regular-font-weight)!important;font-family:var(--instui-component-heading-title-card-regular-font-family)!important;line-height:var(--instui-component-heading-title-card-regular-line-height)!important;font-size:var(--instui-component-heading-title-card-large-font-size)!important}& h3._pendo-simple-text{font-weight:var(--instui-component-heading-title-card-large-font-weight)!important;font-size:var(--instui-component-heading-title-card-regular-font-size)!important;font-family:var(--instui-component-heading-title-card-large-font-family)!important;line-height:var(--instui-component-heading-title-card-large-line-height)!important}&[data-layout=tooltipBlank]{& h2._pendo-simple-text{font-size:var(--instui-component-heading-title-card-regular-font-size)!important;line-height:var(--instui-component-heading-title-card-mini-line-height)!important}& h3._pendo-simple-text{font-size:var(--instui-component-heading-title-card-mini-font-size)!important;line-height:var(--instui-component-heading-title-card-regular-line-height)!important}}& ._pendo-text-link{text-decoration:var(--instui-component-link-text-decoration-within-text)!important;font-weight:var(--instui-component-link-font-weight)!important;border-radius:var(--instui-component-shared-tokens-border-radius-sm)!important;color:var(--instui-component-link-text-color)!important;&:is(:hover,:active,:focus){color:var(--instui-component-link-text-hover-color)!important}&:disabled{color:var(--instui-component-link-text-disabled-color)!important}}& ._pendo-simple-text ol,& ._pendo-simple-text ul{padding-left:var(--instui-component-shared-tokens-spacing-general-space-none)!important}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& :not(._pendo-close-guide){font-size:var(--instui-component-heading-title-card-mini-font-size)!important}&,& ._pendo-row:has(+._pendo-row>._pendo-button-primaryButton) ._pendo-simple-text:has(>span:not([class])),& .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),& h2._pendo-simple-text,& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{font-weight:var(--instui-component-heading-title-card-mini-font-weight)!important;font-family:var(--instui-component-heading-title-card-mini-font-family)!important;font-size:var(--instui-component-heading-title-card-mini-font-size)!important;line-height:var(--instui-component-heading-title-card-mini-line-height)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-sm)!important}& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{text-align:left!important}& h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text{text-align:center!important}& ._pendo-nps-poll-lowerbound-label,& ._pendo-nps-poll-upperbound-label{font-style:normal!important;font-size:var(--instui-component-metric-label-font-size)!important;font-weight:var(--instui-component-metric-label-font-weight)!important;line-height:var(--instui-line-height-standalone-text-xs)!important;text-align:center!important;color:var(--instui-component-text-muted-color)!important}& .pendo-survey-wrapper label+div{font-size:var(--instui-component-metric-label-font-size)!important;padding-top:var(--instui-component-shared-tokens-spacing-general-space-xs)!important;text-align:left!important}}}}@layer instui.closeButton{[class*=instui]{& ._pendo-close-guide{padding-bottom:var(--instui-component-shared-tokens-spacing-general-space-xs)!important;height:var(--instui-component-base-button-small-height)!important;aspect-ratio:1!important;border-radius:var(--instui-component-base-button-border-radius)!important;border-width:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background-color:#0000!important;background-position:50%!important;background-repeat:no-repeat!important;background-size:var(--instui-component-icon-size-sm)!important;inset-inline:auto var(--instui-component-shared-tokens-spacing-general-space-xs)!important;font-size:var(--instui-font-size-text-lg)!important;font-family:var(--instui-component-base-button-font-family)!important;font-weight:var(--instui-primitive-font-weight-medium)!important;color:var(--instui-component-text-base-color)!important;background-color:#0000!important;position:absolute!important;inset-block-start:var(--instui-component-shared-tokens-spacing-general-space-xs)!important;&:hover{background-color:var(--instui-component-base-button-primary-ghost-hover-background)!important}&:active{background-color:var(--instui-component-base-button-primary-ghost-active-background)!important}}&[data-layout=lightboxBlank] ._pendo-close-guide{inset-block-start:var(--instui-component-alert-close-button-margin-top)!important;inset-inline-end:var(--instui-component-alert-close-button-margin-right)!important}}}@layer instui.img{[class*=instui]{& ._pendo-image{max-width:100%!important;height:auto!important}}}@layer instui.inputs{[class*=instui]{& ._pendo-row:has(._pendo-open-text-poll-input){height:auto!important}& ._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row{height:auto!important;min-height:unset!important}& ._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element{width:100%!important;position:static!important}& ._pendo-open-text-poll-input{border-radius:var(--instui-component-text-area-border-radius)!important;border-width:var(--instui-component-text-area-border-width)!important;padding:var(--instui-component-text-area-padding)!important;gap:var(--instui-component-text-area-gap-content)!important;min-height:var(--instui-component-text-area-min-height)!important;height:auto!important;max-height:var(--instui-component-text-area-max-height)!important;width:100%!important;font-family:var(--instui-component-text-area-font-family)!important;font-weight:var(--instui-component-text-area-font-weight)!important;font-size:var(--instui-component-text-area-font-size-sm)!important;line-height:var(--instui-line-height-standalone-text-base)!important;letter-spacing:normal!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background-color:var(--instui-component-text-area-background-color)!important;color:var(--instui-component-text-area-text-color)!important;border-style:solid!important;border-color:var(--instui-component-text-area-border-color)!important;transition:var(--instui-focus-outline-transition)!important;font-style:normal!important;&:hover{background:var(--instui-component-text-area-background-hover-color)!important;border-color:var(--instui-component-text-area-border-hover-color)!important}&:focus{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:var(--instui-component-shared-tokens-focus-outline-info-color)!important;background-color:var(--instui-component-text-area-background-color)!important;border-color:var(--instui-component-text-area-border-color)!important}&::placeholder{color:var(--instui-component-text-area-placeholder-color)!important}&:hover::placeholder{color:var(--instui-component-text-area-placeholder-hover-color)!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-open-text-poll-input{min-height:100px!important}}}[class*=instui]{& ._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select){padding:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background:0 0!important;border:0!important;position:relative!important;&:after{content:""!important;right:var(--instui-component-text-input-padding-horizontal-sm)!important;top:var(--instui-component-shared-tokens-spacing-general-space-lg)!important;width:var(--instui-component-icon-size-sm)!important;height:var(--instui-component-icon-size-sm)!important;mask-image:var(--instui-icon-chevron-down)!important;pointer-events:none!important;background-color:var(--instui-component-text-input-text-color)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}& select._pendo-multi-choice-poll-select{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;height:var(--instui-component-text-input-height-sm)!important;border-radius:var(--instui-component-text-input-border-radius)!important;border-width:var(--instui-component-text-input-border-width)!important;padding:var(--instui-component-shared-tokens-spacing-general-space-none) calc(var(--instui-component-text-input-padding-horizontal-sm) + 24px) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-text-input-padding-horizontal-sm)!important;font-family:var(--instui-component-text-input-font-family)!important;font-weight:var(--instui-component-text-input-font-weight)!important;font-size:var(--instui-component-text-input-font-size-sm)!important;line-height:calc(var(--instui-line-height-standalone-text-base) * 2)!important;letter-spacing:normal!important;background-color:var(--instui-component-text-input-background-color)!important;color:var(--instui-component-text-input-text-color)!important;border-style:solid!important;border-color:var(--instui-component-text-input-border-color)!important;transition:var(--instui-focus-outline-transition)!important;font-style:normal!important;&:hover{background-color:var(--instui-component-text-input-background-hover-color)!important;border-color:var(--instui-component-text-input-border-hover-color)!important}&:focus{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:var(--instui-component-shared-tokens-focus-outline-info-color)!important;background-color:var(--instui-component-text-input-background-color)!important}}& select._pendo-multi-choice-poll-select option{font-family:var(--instui-component-text-input-font-family)!important;font-weight:var(--instui-component-text-input-font-weight)!important;font-size:var(--instui-component-text-input-font-size-sm)!important;background-color:var(--instui-component-view-background-primary)!important;color:var(--instui-component-text-base-color)!important}@supports (appearance:base-select){& ._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select:open):after{mask-image:var(--instui-icon-chevron-up)!important}& select._pendo-multi-choice-poll-select,& select._pendo-multi-choice-poll-select::picker(select){appearance:base-select!important}& select._pendo-multi-choice-poll-select::picker-icon{display:none!important}& select._pendo-multi-choice-poll-select::picker(select){border-radius:var(--instui-component-popover-border-radius)!important;border-width:var(--instui-component-shared-tokens-stroke-width-sm)!important;padding:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background-color:var(--instui-component-options-item-background)!important;border-style:solid!important;border-color:var(--instui-component-popover-border-color)!important;box-shadow:var(--instui-elevation-above)!important;overflow:hidden!important}& select._pendo-multi-choice-poll-select option{margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;font-family:var(--instui-component-options-item-font-family)!important;font-weight:var(--instui-component-options-item-font-weight)!important;font-size:var(--instui-font-size-text-sm)!important;letter-spacing:var(--instui-component-text-letter-spacing-normal)!important;cursor:pointer!important;line-height:var(--instui-component-options-item-line-height)!important;height:var(--instui-size-interactive-height-sm)!important;background-color:var(--instui-component-options-item-background)!important;color:var(--instui-component-options-item-color)!important;border-radius:0!important;&::checkmark{display:none!important}&:hover,&:focus{background-color:var(--instui-component-options-item-highlighted-background)!important;color:var(--instui-component-options-item-highlighted-label-color)!important}&:focus{outline:none!important}&:checked{font-weight:var(--instui-component-options-item-font-weight-selected)!important;padding-right:calc(var(--instui-component-options-item-padding-horizontal) + var(--instui-spacing-padding-interactive-horizontal-sm))!important;background-color:var(--instui-component-options-item-selected-background)!important;color:var(--instui-component-options-item-selected-label-color)!important;border-radius:0!important;position:relative!important;&:after{content:""!important;right:var(--instui-component-options-item-padding-horizontal)!important;width:var(--instui-component-icon-size-sm)!important;height:var(--instui-component-icon-size-sm)!important;mask-image:var(--instui-icon-check)!important;pointer-events:none!important;background-color:var(--instui-component-options-item-selected-label-color)!important;display:block!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}&:hover{background-color:var(--instui-component-menu-item-selected-highlighted-background)!important}}}}}[class*=instui]{& ._pendo-multi-choice-poll-select-border label.pendo-radio,&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) label.pendo-radio{font-family:var(--instui-component-radio-input-font-family)!important;font-weight:var(--instui-component-radio-input-font-weight)!important;font-size:var(--instui-component-radio-input-font-size-sm)!important;line-height:var(--instui-component-radio-input-line-height-sm)!important;letter-spacing:normal!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background-color:var(--instui-color-transparent-color)!important;color:var(--instui-component-radio-input-label-base-color)!important;font-style:normal!important;&:hover{color:var(--instui-component-radio-input-label-hover-color)!important}}& ._pendo-multi-choice-poll-select-border input.pendo-radio,&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) input.pendo-radio{width:var(--instui-component-shared-tokens-spacing-general-space-lg)!important;height:var(--instui-component-shared-tokens-spacing-general-space-lg)!important;border-radius:var(--instui-component-shared-tokens-border-radius-full)!important;border-width:var(--instui-component-radio-input-border-width)!important;margin:var(--instui-component-shared-tokens-spacing-general-space2xs) var(--instui-component-radio-input-gap) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-none)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-style:solid!important;border-color:var(--instui-component-radio-input-border-color)!important;background-color:var(--instui-component-radio-input-background-color)!important;transition:var(--instui-focus-outline-transition)!important;&:hover{background-color:var(--instui-component-radio-input-background-hover-color)!important;border-color:var(--instui-component-radio-input-border-readonly-color)!important}&:checked{box-shadow:var(--instui-component-radio-input-border-selected-color) inset 0 0 0 calc(var(--instui-component-radio-input-checked-inset-sm) / 2)!important;border-color:var(--instui-component-radio-input-border-selected-color)!important;&+label{background:var(--instui-color-transparent-color)!important;color:var(--instui-component-radio-input-label-base-color)!important}}&:focus{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:var(--instui-component-shared-tokens-focus-outline-info-color)!important;&+label{outline:none!important}}}& [class$=-poll-question]>._pendo-simple-text>._pendo-text-plain{font-family:var(--instui-component-form-field-layout-font-family)!important;font-weight:var(--instui-component-form-field-layout-font-weight)!important;font-size:var(--instui-component-form-field-layout-font-size)!important;line-height:var(--instui-component-form-field-layout-line-height)!important;letter-spacing:normal!important;margin:var(--instui-component-form-field-layout-gap-primitives) var(--instui-component-shared-tokens-spacing-general-space-none)!important;color:var(--instui-component-form-field-layout-text-color)!important;font-style:normal!important}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& :is([id*=survey-pmf-answers],[id*=survey-single-choice]){flex-direction:column!important;display:flex!important}& :is([id*=survey-pmf-answers],[id*=survey-single-choice]) span:has(.pendo-radio){text-align:left!important;flex-direction:row!important;justify-content:start!important;align-items:center!important;display:flex!important}}}}@layer instui.button{[class*=instui]{& ._pendo-button{height:var(--instui-component-base-button-small-height)!important;min-height:var(--instui-component-base-button-small-height)!important;padding:var(--instui-component-base-button-padding-vertical) var(--instui-component-base-button-small-padding-horizontal)!important;border-width:var(--instui-component-base-button-border-width)!important;border-radius:var(--instui-component-base-button-border-radius)!important;border-style:var(--instui-component-base-button-border-style)!important;font-family:var(--instui-component-base-button-font-family)!important;font-size:var(--instui-component-base-button-small-font-size)!important;font-weight:var(--instui-component-base-button-font-weight)!important;line-height:var(--instui-component-base-button-line-height)!important;letter-spacing:var(--instui-component-base-button-letter-spacing)!important;cursor:pointer!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-base-button-gap-button-content-md) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-none)!important;.pendo-mock-flexbox-element:last-child>&{margin-right:var(--instui-component-shared-tokens-spacing-general-space-none)!important}}& ._pendo-button-primaryButton,& ._pendo-button-custom{background:var(--instui-component-base-button-primary-background)!important;border-color:var(--instui-component-base-button-primary-border-color)!important;color:var(--instui-component-base-button-primary-color)!important;&:hover{background:var(--instui-component-base-button-primary-hover-background)!important;border-color:var(--instui-component-base-button-primary-hover-border-color)!important;color:var(--instui-component-base-button-primary-hover-text-color)!important}&:active{background:var(--instui-component-base-button-primary-active-background)!important;border-color:var(--instui-component-base-button-primary-active-border-color)!important;color:var(--instui-component-base-button-primary-active-text-color)!important}&:disabled{background:var(--instui-component-base-button-primary-disabled-background-color)!important;border-color:var(--instui-component-base-button-primary-disabled-border-color)!important;color:var(--instui-component-base-button-primary-disabled-text-color)!important;cursor:not-allowed!important}}& ._pendo-button-secondaryButton{background:var(--instui-component-base-button-secondary-background)!important;border-color:var(--instui-component-base-button-secondary-border-color)!important;color:var(--instui-component-base-button-secondary-color)!important;&:hover{background:var(--instui-component-base-button-secondary-hover-background)!important;border-color:var(--instui-component-base-button-secondary-hover-border-color)!important;color:var(--instui-component-base-button-secondary-hover-text-color)!important}&:active{background:var(--instui-component-base-button-secondary-active-background)!important;border-color:var(--instui-component-base-button-secondary-active-border-color)!important;color:var(--instui-component-base-button-secondary-active-text-color)!important}&:disabled{background:var(--instui-component-base-button-secondary-disabled-background-color)!important;border-color:var(--instui-component-base-button-secondary-disabled-border-color)!important;color:var(--instui-component-base-button-secondary-disabled-text-color)!important;cursor:not-allowed!important}}& ._pendo-button-tertiaryButton{border-color:var(--instui-color-stroke-interactive-action-tertiary-base)!important;color:var(--instui-color-text-interactive-action-tertiary-base)!important;background:0 0!important;&:hover{background:var(--instui-color-background-interactive-action-tertiary-hover)!important;border-color:var(--instui-component-base-button-tertiary-hover-border-color)!important;color:var(--instui-component-base-button-tertiary-hover-text-color)!important}&:active{background:var(--instui-color-background-interactive-action-tertiary-active)!important;border-color:var(--instui-component-base-button-tertiary-active-border-color)!important;color:var(--instui-component-base-button-tertiary-active-text-color)!important}&:disabled{border-color:var(--instui-component-base-button-tertiary-disabled-border-color)!important;color:var(--instui-component-base-button-tertiary-disabled-text-color)!important;cursor:not-allowed!important;background:0 0!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& div:has(>._pendo-button-primaryButton):not(:has(>:not(._pendo-button-primaryButton))){justify-content:center!important;display:flex!important}}}}@layer instui.pagination{[class*=instui]{& ._pendo-number-scale-poll-wrapper{padding:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& .pendo-survey-wrapper>div:has(input[type=radio]),& ._pendo-nps-poll-wrapper,& [id*=survey-pmf-answers],& [id*=survey-single-choice]{padding:var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-lg)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& ._pendo-number-scale-poll-wrapper>div[role*=radiogroup],& ._pendo-nps-poll-wrapper>div[role*=radiogroup],& .pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio]){gap:var(--instui-component-shared-tokens-spacing-general-space-md)!important;flex-direction:row!important;width:fit-content!important;display:flex!important}& .pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span{position:relative!important}& .pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span>input[type=radio]{cursor:pointer!important;width:100%!important;height:100%!important;inset:0!important}& ._pendo-nps-poll-wrapper>div[role*=radiogroup]{justify-content:center!important;align-items:center!important;margin:0 auto!important}& label.pendo-radio[class*=_pendo-number-scale-poll-],& label.pendo-radio[class*=_pendo-nps-poll-],& .pendo-survey-wrapper>:not([id*=survey-single-choice]) label{height:var(--instui-component-base-button-small-height)!important;min-height:var(--instui-component-base-button-small-height)!important;width:var(--instui-component-base-button-small-height)!important;aspect-ratio:1!important;border-width:var(--instui-component-base-button-border-width)!important;border-radius:var(--instui-component-base-button-border-radius)!important;border-style:var(--instui-component-base-button-border-style)!important;font-size:var(--instui-component-base-button-small-font-size)!important;line-height:var(--instui-component-base-button-small-height)!important;letter-spacing:var(--instui-component-base-button-letter-spacing)!important;font-family:var(--instui-component-base-button-font-family)!important;font-weight:var(--instui-component-base-button-font-weight)!important;text-align:center!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background:var(--instui-component-base-button-secondary-background)!important;border-color:var(--instui-component-base-button-secondary-border-color)!important;color:var(--instui-component-base-button-secondary-color)!important;transition:var(--instui-focus-outline-transition)!important;&:hover{background:var(--instui-component-base-button-secondary-hover-background)!important;border-color:var(--instui-component-base-button-secondary-hover-border-color)!important;color:var(--instui-component-base-button-secondary-hover-text-color)!important}&:active{background:var(--instui-component-base-button-secondary-active-background)!important;border-color:var(--instui-component-base-button-secondary-active-border-color)!important;color:var(--instui-component-base-button-secondary-active-text-color)!important}}& label.pendo-radio[class*=_pendo-number-scale-poll-]+[class$=-description],& .pendo-survey-wrapper>:not([id*=survey-single-choice]) label+div{width:var(--instui-component-base-button-small-height)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;font-weight:var(--instui-component-metric-label-font-weight)!important;line-height:var(--instui-line-height-standalone-text-xs)!important;font-size:var(--instui-component-metric-label-font-size)!important;color:var(--instui-component-text-muted-color)!important}& [class*=-wrapper]:last-child,& .pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(>span)>span:last-child{position:relative!important}& [class*=-wrapper]:last-child>[class$=-description],& .pendo-survey-wrapper div:not([id*=survey-single-choice]):has(>span):last-child>span:last-child>div{text-align:right!important;width:auto!important;position:absolute!important;right:0!important}& ._pendo-nps-poll-lowerbound-label,& ._pendo-nps-poll-upperbound-label{margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& input.pendo-radio:focus+label.pendo-radio[class*=_pendo-number-scale-poll-],& input.pendo-radio:focus+label.pendo-radio[class*=_pendo-nps-poll-],& .pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:focus+label.pendo-radio,& .pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:focus+label{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:light-dark(var(--instui-component-shared-tokens-focus-outline-info-color),var(--instui-component-shared-tokens-focus-outline-on-color))!important}& input.pendo-radio:checked+label.pendo-radio[class*=_pendo-number-scale-poll-],& input.pendo-radio:checked+label.pendo-radio[class*=_pendo-nps-poll-],& .pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:checked+label.pendo-radio,& .pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:checked+label{background:var(--instui-component-base-button-primary-background)!important;border-color:var(--instui-component-base-button-primary-border-color)!important;color:var(--instui-component-base-button-primary-color)!important;&:hover{background:var(--instui-component-base-button-primary-hover-background)!important;border-color:var(--instui-component-base-button-primary-hover-border-color)!important;color:var(--instui-component-base-button-primary-hover-text-color)!important}&:active{background:var(--instui-component-base-button-primary-active-background)!important;border-color:var(--instui-component-base-button-primary-active-border-color)!important;color:var(--instui-component-base-button-primary-active-text-color)!important}}& [class$=-poll-question]+._pendo-row [class$=-description]{padding-top:var(--instui-component-shared-tokens-spacing-general-space-xs)!important;color:var(--instui-component-text-muted-color)!important}}}@layer instui.mask{[class*=instui]{& ._pendo-backdrop{background-color:var(--instui-component-mask-background-color)!important}}}@layer instui.view{[class*=instui]{& .pendo-mock-flexbox-element:has(._pendo-divider){width:100%!important}& hr{border-width:var(--instui-component-shared-tokens-stroke-width-sm)!important;border-style:var(--instui-component-view-border-style)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-xs) var(--instui-component-shared-tokens-spacing-general-space-none)!important;border-radius:var(--instui-component-shared-tokens-border-radius-full)!important;border-color:var(--instui-component-tabs-panel-border-color)!important}}}@layer instui.card{[class*=instui]{& ._pendo-row{margin-top:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin-right:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin-bottom:var(--instui-component-shared-tokens-spacing-general-space-sm)!important;margin-left:var(--instui-component-shared-tokens-spacing-general-space-none)!important;line-height:var(--instui-component-shared-tokens-spacing-general-space-none)!important}&[data-layout=lightboxBlank] ._pendo-row{margin-top:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin-right:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin-bottom:var(--instui-component-shared-tokens-spacing-gap-cards-sm)!important;margin-left:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& [id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--instui-component-base-button-gap-button-content-sm) + var(--instui-component-base-button-small-height))!important}&[data-layout=lightboxBlank] [id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--instui-component-base-button-gap-button-content-sm) + var(--instui-component-base-button-small-height) / 2)!important}& .pendo-block-wrapper{margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& ._pendo-text-paragraph._pendo-multi-choice-poll-question+._pendo-row .pendo-mock-flexbox-element,& ._pendo-multi-choice-poll-select-border,& ._pendo-multi-choice-poll-select{width:100%!important}& [data-pendo-justify-content] .pendo-mock-flexbox-row{flex-wrap:wrap!important;align-items:center!important;min-height:0!important;display:flex!important}& [data-pendo-justify-content=flex-start] .pendo-mock-flexbox-row{justify-content:flex-start!important}& [data-pendo-justify-content=center] .pendo-mock-flexbox-row{justify-content:center!important}& [data-pendo-justify-content=flex-end] .pendo-mock-flexbox-row{justify-content:flex-end!important}& [data-pendo-justify-content=space-between] .pendo-mock-flexbox-row{justify-content:space-between!important}& [data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element{position:static!important}& ._pendo-step-container-styles{background-color:var(--instui-component-view-background-primary)!important;color:var(--instui-component-view-color)!important;transition:var(--instui-focus-outline-transition)!important;&:focus-visible{outline:none!important}&:focus{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:light-dark(var(--instui-component-shared-tokens-focus-outline-info-color),var(--instui-component-shared-tokens-focus-outline-on-color))!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles>:is(div,form,textarea,h2):not(._pendo-row){margin:var(--instui-component-shared-tokens-spacing-general-space-none) auto var(--instui-component-shared-tokens-spacing-general-space-sm) auto!important;width:100%!important;max-width:var(--manual-light-pendo-embedded-pendo-step-container-styles-width)!important}& ._pendo-step-container-styles>._pendo-row{max-width:var(--manual-light-pendo-embedded-pendo-step-container-styles-width)!important;margin-left:auto!important;margin-right:auto!important}}}}@layer instui.focusOutline{[class*=instui]{--instui-focus-outline-color:var(--instui-component-shared-tokens-focus-outline-info-color);--instui-focus-outline-color-start:transparent;--instui-focus-outline-width:var(--instui-component-shared-tokens-focus-outline-width);--instui-focus-outline-offset:var(--instui-component-shared-tokens-focus-outline-offset);--instui-focus-outline-radius:var(--instui-border-radius-md);--instui-focus-outline-style:solid;--instui-focus-outline-transition:outline-color .2s, outline-offset .25s;--instui-focus-outline-color-success:var(--instui-component-shared-tokens-focus-outline-success-color);--instui-focus-outline-color-danger:var(--instui-component-shared-tokens-focus-outline-danger-color);--instui-focus-outline-color-inverse:var(--instui-component-shared-tokens-focus-outline-on-color);--instui-focus-outline-inset:0rem}:where(._pendo-button,._pendo-close-guide,._pendo-text-link){outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color-start)!important;outline-offset:0!important;transition:var(--instui-focus-outline-transition)!important}:where(._pendo-button,._pendo-close-guide,._pendo-text-link):where(:focus-visible){outline-color:var(--instui-focus-outline-color)!important;outline-offset:var(--instui-focus-outline-offset)!important;border-radius:var(--instui-focus-outline-radius)!important}:where(.-focus-color-success):where(:focus-visible){outline-color:var(--instui-focus-outline-color-success)!important}:where(.-focus-color-danger):where(:focus-visible){outline-color:var(--instui-focus-outline-color-danger)!important}:where(.-focus-color-inverse):where(:focus-visible){outline-color:var(--instui-focus-outline-color-inverse)!important}:where(.-focus-position-inset):where(:focus-visible){outline-offset:var(--instui-focus-outline-inset)!important}:where(.-focus-within):where(:focus-within){outline-color:var(--instui-focus-outline-color)!important;outline-offset:var(--instui-focus-outline-offset)!important;border-radius:var(--instui-focus-outline-radius)!important}:where(.-without-focus-animation){transition:none!important}}}
package/dist/index.d.mts ADDED
@@ -0,0 +1,100 @@
1
+ import { Plugin } from "postcss";
2
+ import { Theme } from "@pantoken/model";
3
+
4
+ //#region src/build.d.ts
5
+ /** Options for {@link buildPendoCss}. */
6
+ interface BuildPendoCssOptions {
7
+ /** Theme to source the `--instui-*` layer from (default `"rebrand"`). */
8
+ theme?: Theme;
9
+ /** The `@scope` root selector (default `._pendo-step-container`). */
10
+ scopeSelector?: string;
11
+ /** Wrap component rules in `@scope` for DOM containment (default `true`). */
12
+ scope?: boolean;
13
+ /** Add `!important` to component declarations so they beat Pendo's styles (default `true`). */
14
+ important?: boolean;
15
+ /** Tree-shake unused `--instui-*` tokens (default `true`; off ships the full token set). */
16
+ prune?: boolean;
17
+ }
18
+ /**
19
+ * Build the Pendo guide stylesheet.
20
+ *
21
+ * @param options - {@link BuildPendoCssOptions}.
22
+ * @returns The composed CSS.
23
+ *
24
+ * @example Default rebrand build (scoped, !important, pruned)
25
+ * ```ts
26
+ * import { buildPendoCss } from "@pantoken/pendo";
27
+ *
28
+ * const css = buildPendoCss();
29
+ * ```
30
+ *
31
+ * @example Canvas theme, unscoped, keep the full token set
32
+ * ```ts
33
+ * import { buildPendoCss } from "@pantoken/pendo";
34
+ *
35
+ * const css = buildPendoCss({ theme: "canvas", scope: false, prune: false });
36
+ * ```
37
+ */
38
+ declare function buildPendoCss(options?: BuildPendoCssOptions): string;
39
+ //#endregion
40
+ //#region src/plugins/add-important.d.ts
41
+ /**
42
+ * Create the add-`!important` plugin.
43
+ *
44
+ * @example
45
+ * ```ts
46
+ * import postcss from "postcss";
47
+ * import { addImportant } from "@pantoken/pendo";
48
+ *
49
+ * const { css } = postcss([addImportant()]).process(".x{color:red}", { from: undefined });
50
+ * // ".x{color:red !important}"
51
+ * ```
52
+ */
53
+ declare function addImportant(): Plugin;
54
+ declare namespace addImportant {
55
+ var postcss: boolean;
56
+ }
57
+ //#endregion
58
+ //#region src/plugins/add-scope.d.ts
59
+ /** Options for {@link addScope}. */
60
+ interface AddScopeOptions {
61
+ /** The scope root selector (default `._pendo-step-container`). */
62
+ selector?: string;
63
+ }
64
+ /**
65
+ * Create the `@scope` wrapping plugin.
66
+ *
67
+ * @example
68
+ * ```ts
69
+ * import postcss from "postcss";
70
+ * import { addScope } from "@pantoken/pendo";
71
+ *
72
+ * const { css } = postcss([addScope({ selector: "._pendo-step-container" })])
73
+ * .process(".x{color:red}", { from: undefined });
74
+ * // "@scope (._pendo-step-container) { .x{color:red} }"
75
+ * ```
76
+ */
77
+ declare function addScope(options?: AddScopeOptions): Plugin;
78
+ declare namespace addScope {
79
+ var postcss: boolean;
80
+ }
81
+ //#endregion
82
+ //#region src/layers.d.ts
83
+ /**
84
+ * Cascade order (lowest → highest), from the source `layers.css`. Layered `!important` beats Pendo's
85
+ * own unlayered `!important`, so guide styles stay on top.
86
+ */
87
+ declare const LAYER_ORDER: readonly ["tokens", "elevation", "icons", "popover", "alert", "text", "closeButton", "img", "inputs", "button", "pagination", "mask", "view", "card", "manual", "focusOutline"];
88
+ /** A component's authored CSS and the cascade layer it belongs in. */
89
+ interface ComponentLayer {
90
+ layer: (typeof LAYER_ORDER)[number];
91
+ css: string;
92
+ }
93
+ /** The component CSS in cascade order (the `tokens` and `manual` layers are handled separately). */
94
+ declare const COMPONENTS: readonly ComponentLayer[];
95
+ //#endregion
96
+ //#region src/index.d.ts
97
+ /** The ready-made `rebrand` Pendo guide stylesheet (scoped, `!important`). */
98
+ declare const pendoCss: string;
99
+ //#endregion
100
+ export { type AddScopeOptions, type BuildPendoCssOptions, COMPONENTS, LAYER_ORDER, addImportant, addScope, buildPendoCss, pendoCss as default, pendoCss };
package/dist/index.mjs ADDED
@@ -0,0 +1,268 @@
1
+ import postcss from "postcss";
2
+ import { toCss } from "@pantoken/css";
3
+ import { elevationCss, focusOutlineDeclarations, focusOutlineRules } from "@pantoken/components";
4
+ import { byTheme } from "@pantoken/tokens";
5
+ import { pruneCustomProps } from "@pantoken/plugin-prune-custom-props";
6
+ //#region generated/embedded.ts
7
+ const alertCss = "/* Alert container (Embedded guides) */\n\n[class*=\"instui\"][data-layout=\"lightboxBlank\"] {\n /* Variant tokens — set on the container, inherited by all children */\n &,\n &[class*=\"instui-info\"] {\n --_alert-color: var(--instui-component-alert-info-border-color);\n --_alert-icon: var(--instui-icon-info);\n }\n\n &[class*=\"instui-danger\"] {\n --_alert-color: var(--instui-component-alert-danger-border-color);\n --_alert-icon: var(--instui-icon-circle-x);\n }\n\n &[class*=\"instui-success\"] {\n --_alert-color: var(--instui-component-alert-success-border-color);\n --_alert-icon: var(--instui-icon-circle-check);\n }\n\n &[class*=\"instui-warning\"] {\n --_alert-color: var(--instui-component-alert-warning-border-color);\n --_alert-icon: var(--instui-icon-triangle-alert);\n }\n\n &,\n ._pendo-step-container-size {\n margin-right: var(--instui-spacing-space2xs);\n margin-left: var(--instui-spacing-space2xs);\n max-width: var(--manual-light-pendo-embedded-pendo-step-container-styles-width);\n }\n\n ._pendo-step-container-size {\n /* Stack above the fixed backdrop (z-index: 200000) the same way the overlay guide does */\n z-index: 300000;\n /* prevent margin collapse from sibling content to preserve drop shadow */\n padding-bottom: calc(var(--instui-spacing-space-md));\n padding-top: var(--instui-spacing-space-sm);\n }\n\n ._pendo-step-container-styles {\n height: auto;\n border-color: var(--_alert-color);\n border-width: var(--instui-component-alert-border-width);\n border-style: var(--instui-component-alert-border-style);\n border-radius: var(--instui-component-alert-border-radius);\n overflow: hidden;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal)\n var(--instui-component-alert-content-padding-vertical)\n calc(\n var(--manual-light-new-theme-components-alert-padding-left) +\n var(--instui-component-alert-content-padding-horizontal)\n );\n box-shadow: var(--instui-elevation-above);\n position: relative;\n /* gap-cards-md + box-shadow y + box-shadow spread */\n margin-bottom: var(--instui-spacing-space-md);\n margin-left: var(--instui-spacing-space-lg);\n margin-right: var(--instui-spacing-space-lg);\n margin-top: var(--instui-spacing-space-xs);\n\n /* Colored sidebar strip — clipped to border-radius by overflow: hidden */\n &::before {\n content: \"\";\n display: block;\n position: absolute;\n overflow: hidden;\n inset-block: 0;\n left: 0;\n width: var(--manual-light-new-theme-components-alert-padding-left);\n background-color: var(--_alert-color);\n }\n\n /* Icon centered in the sidebar strip */\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(\n (var(--manual-light-new-theme-components-alert-padding-left) -\n var(--instui-component-icon-size-md)) /\n 2\n );\n width: var(--instui-component-icon-size-md);\n height: var(--instui-component-icon-size-md);\n mask-image: var(--_alert-icon);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--instui-component-alert-icon-color);\n }\n }\n}\n";
8
+ const buttonCss = "/* Shared button base styles */\n[class*=\"instui\"] {\n ._pendo-button {\n height: var(--instui-component-base-button-small-height);\n min-height: var(--instui-component-base-button-small-height);\n padding: var(--instui-component-base-button-padding-vertical)\n var(--instui-component-base-button-small-padding-horizontal);\n border-width: var(--instui-component-base-button-border-width);\n border-radius: var(--instui-component-base-button-border-radius);\n border-style: var(--instui-component-base-button-border-style);\n font-family: var(--instui-component-base-button-font-family);\n font-size: var(--instui-component-base-button-small-font-size);\n font-weight: var(--instui-component-base-button-font-weight);\n line-height: var(--instui-component-base-button-line-height);\n letter-spacing: var(--instui-component-base-button-letter-spacing);\n cursor: pointer;\n margin: var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-base-button-gap-button-content-md)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n\n .pendo-mock-flexbox-element:last-child > & {\n margin-right: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n }\n\n /* Primary/Custom button variant */\n ._pendo-button-primaryButton,\n ._pendo-button-custom {\n background: var(--instui-component-base-button-primary-background);\n border-color: var(--instui-component-base-button-primary-border-color);\n color: var(--instui-component-base-button-primary-color);\n\n &:hover {\n background: var(--instui-component-base-button-primary-hover-background);\n border-color: var(--instui-component-base-button-primary-hover-border-color);\n color: var(--instui-component-base-button-primary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-primary-active-background);\n border-color: var(--instui-component-base-button-primary-active-border-color);\n color: var(--instui-component-base-button-primary-active-text-color);\n }\n\n &:disabled {\n background: var(--instui-component-base-button-primary-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-disabled-border-color);\n color: var(--instui-component-base-button-primary-disabled-text-color);\n cursor: not-allowed;\n }\n }\n\n /* Secondary button variant */\n ._pendo-button-secondaryButton {\n background: var(--instui-component-base-button-secondary-background);\n border-color: var(--instui-component-base-button-secondary-border-color);\n color: var(--instui-component-base-button-secondary-color);\n\n &:hover {\n background: var(--instui-component-base-button-secondary-hover-background);\n border-color: var(--instui-component-base-button-secondary-hover-border-color);\n color: var(--instui-component-base-button-secondary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-secondary-active-background);\n border-color: var(--instui-component-base-button-secondary-active-border-color);\n color: var(--instui-component-base-button-secondary-active-text-color);\n }\n\n &:disabled {\n background: var(--instui-component-base-button-secondary-disabled-background-color);\n border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n color: var(--instui-component-base-button-secondary-disabled-text-color);\n cursor: not-allowed;\n }\n }\n\n /* Tertiary button variant */\n ._pendo-button-tertiaryButton {\n background: transparent;\n border-color: var(--instui-color-stroke-interactive-action-tertiary-base);\n color: var(--instui-color-text-interactive-action-tertiary-base);\n\n &:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n color: var(--instui-component-base-button-tertiary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n border-color: var(--instui-component-base-button-tertiary-active-border-color);\n color: var(--instui-component-base-button-tertiary-active-text-color);\n }\n\n &:disabled {\n background: transparent;\n border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n color: var(--instui-component-base-button-tertiary-disabled-text-color);\n cursor: not-allowed;\n }\n }\n\n /* Surveys: Submit / Finish buttons */\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n /* Submit / Finish buttons: Center only if they're the only button in the container */\n div:has(> ._pendo-button-primaryButton):not(:has(> :not(._pendo-button-primaryButton))) {\n display: flex;\n justify-content: center;\n }\n }\n}\n";
9
+ const cardCss = "[class*=\"instui\"] {\n /* ─── Row spacing ─── */\n\n /* Row spacing in Popover layout */\n ._pendo-row {\n margin-top: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin-right: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-sm);\n margin-left: var(--instui-component-shared-tokens-spacing-general-space-none);\n line-height: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n /* Row spacing in Alert layout */\n &[data-layout=\"lightboxBlank\"] ._pendo-row {\n margin-top: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin-right: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-sm);\n margin-left: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n /* Close button spacing in Popover layout */\n [id*=\"guide-components\"] > :first-child ._pendo-row {\n margin-right: calc(\n var(--instui-component-base-button-gap-button-content-sm) +\n var(--instui-component-base-button-small-height)\n );\n }\n\n /* Close button spacing in Alert layout */\n &[data-layout=\"lightboxBlank\"] [id*=\"guide-components\"] > :first-child ._pendo-row {\n margin-right: calc(\n var(--instui-component-base-button-gap-button-content-sm) +\n var(--instui-component-base-button-small-height) / 2\n );\n }\n\n /* @TODO: Close button spacing in surveys */\n\n /* Content spacing */\n .pendo-block-wrapper {\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n ._pendo-text-paragraph._pendo-multi-choice-poll-question\n + ._pendo-row\n .pendo-mock-flexbox-element,\n ._pendo-multi-choice-poll-select-border,\n ._pendo-multi-choice-poll-select {\n width: 100%;\n }\n\n /* Flexbox\n * Pendo simulates flexbox with position:absolute on children, which collapses\n * the row height. Replace it with real flexbox derived from the\n * data-pendo-justify-content attribute so the row sizes to its content.\n */\n [data-pendo-justify-content] .pendo-mock-flexbox-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n min-height: 0;\n }\n\n [data-pendo-justify-content=\"flex-start\"] .pendo-mock-flexbox-row {\n justify-content: flex-start;\n }\n\n [data-pendo-justify-content=\"center\"] .pendo-mock-flexbox-row {\n justify-content: center;\n }\n\n [data-pendo-justify-content=\"flex-end\"] .pendo-mock-flexbox-row {\n justify-content: flex-end;\n }\n\n [data-pendo-justify-content=\"space-between\"] .pendo-mock-flexbox-row {\n justify-content: space-between;\n }\n\n /* Reset the absolute positioning Pendo inlines on each child element */\n [data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element {\n position: static;\n }\n\n /* Card container */\n ._pendo-step-container-styles {\n background-color: var(--instui-component-view-background-primary);\n color: var(--instui-component-view-color);\n transition: var(--instui-focus-outline-transition);\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: light-dark(\n var(--instui-component-shared-tokens-focus-outline-info-color),\n var(--instui-component-shared-tokens-focus-outline-on-color)\n );\n }\n }\n\n /* Surveys */\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n /* Some surveys don't use `._pendo-row` for spacing, so add margin to direct children that aren't rows. */\n ._pendo-step-container-styles > :is(div, form, textarea, h2):not(._pendo-row) {\n margin: var(--instui-component-shared-tokens-spacing-general-space-none) auto\n var(--instui-component-shared-tokens-spacing-general-space-sm) auto;\n width: 100%;\n max-width: var(--manual-light-pendo-embedded-pendo-step-container-styles-width);\n }\n\n ._pendo-step-container-styles > ._pendo-row {\n max-width: var(--manual-light-pendo-embedded-pendo-step-container-styles-width);\n margin-left: auto;\n margin-right: auto;\n }\n }\n}\n";
10
+ const closeButtonCss = "[class*=\"instui\"] {\n ._pendo-close-guide {\n padding-bottom: var(--instui-component-shared-tokens-spacing-general-space-xs);\n height: var(--instui-component-base-button-small-height);\n aspect-ratio: 1;\n border-radius: var(--instui-component-base-button-border-radius);\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center;\n border-width: var(--instui-component-shared-tokens-spacing-general-space-none);\n background-size: var(--instui-component-icon-size-sm);\n position: absolute;\n inset-inline: auto var(--instui-component-shared-tokens-spacing-general-space-xs);\n inset-block-start: var(--instui-component-shared-tokens-spacing-general-space-xs);\n font-size: var(--instui-font-size-text-lg);\n font-family: var(--instui-component-base-button-font-family);\n font-weight: var(--instui-primitive-font-weight-medium);\n color: var(--instui-component-text-base-color);\n\n background-color: transparent;\n\n &:hover {\n background-color: var(--instui-component-base-button-primary-ghost-hover-background);\n }\n\n &:active {\n background-color: var(--instui-component-base-button-primary-ghost-active-background);\n }\n }\n\n &[data-layout=\"lightboxBlank\"] ._pendo-close-guide {\n inset-block-start: var(--instui-component-alert-close-button-margin-top);\n inset-inline-end: var(--instui-component-alert-close-button-margin-right);\n }\n}\n";
11
+ const imgCss = "[class*=\"instui\"] {\n ._pendo-image {\n max-width: 100%;\n height: auto;\n }\n}\n";
12
+ const manualCss = "[class*=\"instui\"] {\n /* Focus outline is provided by @pantoken/components (the instui.focusOutline layer). */\n\n /* Components: Alert */\n --manual-light-pendo-embedded-pendo-step-container-styles-width: 59.25rem;\n --manual-light-new-theme-components-alert-padding-left: 2.5rem;\n\n /* Components: Popover */\n --manual-light-pendo-overlay-pendo-step-container-styles-width: 22.5rem;\n\n /* Components: TextArea */\n --instui-component-text-area-min-height: 4rem;\n --instui-component-text-area-max-height: 6rem;\n --instui-component-text-area-max-width: 20rem;\n\n /* Components; SVGIcon */\n --manual-icon-instui-line-parchment-logo: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTMuMDEgMTkyLjYiIGZpbGw9ImN1cnJlbnRDb2xvciI+PHBhdGggZD0iTTIyNi4zMiAxNTQuNDhjMCA3LjM2LTUuOTcgMTMuMzYtMTMuMzYgMTMuMzZIMzguMTJjLTcuMzYgMC0xMy4zNi01Ljk3LTEzLjM2LTEzLjM2VjQwLjAxYzAtNy4zNiA1Ljk3LTEzLjM2IDEzLjM2LTEzLjM2aDEyNy42MVYxLjg5SDMzLjA1QzE0Ljc5IDEuODkgMCAxNi42OCAwIDM0Ljl2MTI0LjY1YzAgMTguMjYgMTQuNzkgMzMuMDUgMzMuMDUgMzMuMDVoMTg1LjA2YzE4LjI2IDAgMzMuMDUtMTQuNzkgMzMuMDUtMzMuMDV2LTcyLjMxaC0yNC43NnY2Ny4ybC0uMDcuMDRaIi8+PHBhdGggZD0iTTIzOC43MiAyOC41OGM3LjkgMCAxNC4yOS02LjM5IDE0LjI5LTE0LjI5UzI0Ni42MiAwIDIzOC43MiAwcz0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5IDYuMzkgMTQuMjkgMTQuMjkgMTQuMjlaIi8+PHBhdGggZD0iTTE5Ni42NCAyOC41OGM3LjkgMCAxNC4yOS02LjM5IDE0LjI5LTE0LjI5UzIwNC41NCAwIDE5Ni42NCAwcz0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5IDYuMzkgMTQuMjkgMTQuMjkgMTQuMjlaIi8+PHBhdGggZD0iTTIzOC43MiA0Mi4wOWMtNy45IDAtMTQuMjkgNi4zOS0xNC4yOSAxNC4yOXM2LjM5IDE0LjI5IDE0LjI5IDE0LjI5IDE0LjI5LTYuMzkgMTQuMjktMTQuMjktNi4zOS0xNC4yOS0xNC4yOS0xNC4yOVoiLz48Y2lyY2xlIGN4PSI3NC42IiBjeT0iMTE4LjE4IiByPSIyOS42MiIvPjwvc3ZnPg==\");\n --manual-icon-instui-line-learn-platform-logo: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjQgMTU1Ij48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9ImEiIGN4PSItNjAwNS44OCIgY3k9IjI2NDYuMjEiIHI9IjEuMzMiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg3MzQxLjMyIDY1NTQ4OC42MSkgcm90YXRlKDEyMS40KSBzY2FsZSgxMDAuNzYgMTAwLjgxKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9ImN1cnJlbnRDb2xvciIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iY3VycmVudENvbG9yIiBzdG9wLW9wYWNpdHk9Ii41Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTMyMC4yNCAxMzEuMjdjLTIzLjI1IDE3LjE3LTU0Ljk0IDE3LjMzLTc4LjM3LjQxbDMuNDItNC43MmMtMjEuNTYtMTUuNDUtMzAuNjYtNDMuMDQtMjIuNTItNjguMjdsNS41NSAxLjA1YzcuNjUtMjIuNiAyOC45LTM3Ljc3IDUyLjc4LTM3LjY5VjBjLTMzLjYuMDQtNjMuMzUgMjEuNjktNzMuNyA1My42My0xMC4zNSAzMS45NCAxLjA2IDY2LjkxIDI4LjI2IDg2LjYxIDI3LjIgMTkuNzEgNjQgMTkuNjcgOTEuMTctLjA4IDI3LjE2LTE5Ljc2IDM4LjUxLTU0Ljc0IDI4LjEtODYuNjZsLTUuMTEgMS42NmM5Ljg5IDI5LjgtLjYxIDYyLjU2LTI1Ljk5IDgxLjA3Ii8+PC9zdmc+\");\n}\n";
13
+ const maskCss = "[class*=\"instui\"] {\n ._pendo-backdrop {\n background-color: var(--instui-component-mask-background-color);\n }\n}\n";
14
+ const paginationCss = "/*\n * Pendo Number Scale Poll is an HTML radio input with labels styled like buttons,\n * so we implement it like a Pagination component with colors set to\n * secondary / tertiary instead of primary / secondary.\n */\n\n[class*=\"instui\"] {\n ._pendo-number-scale-poll-wrapper {\n padding: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n .pendo-survey-wrapper > div:has(input[type=\"radio\"]),\n ._pendo-nps-poll-wrapper,\n [id*=\"survey-pmf-answers\"],\n [id*=\"survey-single-choice\"] {\n padding: var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-lg);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n ._pendo-number-scale-poll-wrapper > div[role*=\"radiogroup\"],\n ._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"],\n .pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) {\n gap: var(--instui-component-shared-tokens-spacing-general-space-md);\n display: flex;\n flex-direction: row;\n width: fit-content;\n }\n\n /*\n * UX-Lite (and similar) surveys emit radio inputs without id/for linkage\n * between input and label. Expand the hidden input to cover its container\n * so clicking the visible label area actually activates the radio.\n */\n .pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) > span {\n position: relative;\n }\n\n .pendo-survey-wrapper\n > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"])\n > span\n > input[type=\"radio\"] {\n inset: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n }\n\n ._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"] {\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n }\n\n label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\n label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n .pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label {\n height: var(--instui-component-base-button-small-height);\n min-height: var(--instui-component-base-button-small-height);\n width: var(--instui-component-base-button-small-height);\n aspect-ratio: 1 / 1;\n border-width: var(--instui-component-base-button-border-width);\n border-radius: var(--instui-component-base-button-border-radius);\n border-style: var(--instui-component-base-button-border-style);\n font-size: var(--instui-component-base-button-small-font-size);\n /* Line height is set to the button height to center the text vertically, and because the text will always be one line. */\n line-height: var(--instui-component-base-button-small-height);\n letter-spacing: var(--instui-component-base-button-letter-spacing);\n font-family: var(--instui-component-base-button-font-family);\n font-weight: var(--instui-component-base-button-font-weight);\n text-align: center;\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n background: var(--instui-component-base-button-secondary-background);\n border-color: var(--instui-component-base-button-secondary-border-color);\n color: var(--instui-component-base-button-secondary-color);\n transition: var(--instui-focus-outline-transition);\n\n &:hover {\n background: var(--instui-component-base-button-secondary-hover-background);\n border-color: var(--instui-component-base-button-secondary-hover-border-color);\n color: var(--instui-component-base-button-secondary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-secondary-active-background);\n border-color: var(--instui-component-base-button-secondary-active-border-color);\n color: var(--instui-component-base-button-secondary-active-text-color);\n }\n }\n\n /* Number scale description */\n label.pendo-radio[class*=\"_pendo-number-scale-poll-\"] + [class$=\"-description\"],\n .pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label + div {\n width: var(--instui-component-base-button-small-height);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-line-height-standalone-text-xs);\n font-size: var(--instui-component-metric-label-font-size);\n color: var(--instui-component-text-muted-color);\n }\n\n /* Right-align the last description so it anchors to the last button's right edge */\n [class*=\"-wrapper\"]:last-child,\n .pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(> span) > span:last-child {\n position: relative;\n }\n\n [class*=\"-wrapper\"]:last-child > [class$=\"-description\"],\n .pendo-survey-wrapper\n div:not([id*=\"survey-single-choice\"]):has(> span):last-child\n > span:last-child\n > div {\n position: absolute;\n width: auto;\n text-align: right;\n right: 0;\n }\n\n /* NPS label sits left/right of scale, not below */\n ._pendo-nps-poll-lowerbound-label,\n ._pendo-nps-poll-upperbound-label {\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n input.pendo-radio:focus + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\n input.pendo-radio:focus + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n .pendo-survey-wrapper\n > :not([id*=\"survey-single-choice\"])\n input.pendo-radio:focus\n + label.pendo-radio,\n .pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) input[type=\"radio\"]:focus + label {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: light-dark(\n var(--instui-component-shared-tokens-focus-outline-info-color),\n var(--instui-component-shared-tokens-focus-outline-on-color)\n );\n }\n\n input.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\n input.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n .pendo-survey-wrapper\n > :not([id*=\"survey-single-choice\"])\n input.pendo-radio:checked\n + label.pendo-radio,\n .pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) input[type=\"radio\"]:checked + label {\n background: var(--instui-component-base-button-primary-background);\n border-color: var(--instui-component-base-button-primary-border-color);\n color: var(--instui-component-base-button-primary-color);\n\n &:hover {\n background: var(--instui-component-base-button-primary-hover-background);\n border-color: var(--instui-component-base-button-primary-hover-border-color);\n color: var(--instui-component-base-button-primary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-primary-active-background);\n border-color: var(--instui-component-base-button-primary-active-border-color);\n color: var(--instui-component-base-button-primary-active-text-color);\n }\n }\n\n [class$=\"-poll-question\"] + ._pendo-row [class$=\"-description\"] {\n padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n color: var(--instui-component-text-muted-color);\n }\n}\n";
15
+ const popoverCss = "/* Popover container (Overlay guides + surveys) */\n[class*=\"instui\"]:is([data-layout=\"tooltipBlank\"], ._pendo-guide-walkthrough_) {\n ._pendo-step-container-size {\n height: auto;\n }\n\n ._pendo-step-container-styles {\n min-height: 2.75rem;\n /* @TODO: overflow-y causes scrollbar to break border-radius */\n /* 2x border radius + 2x caret size */\n border-radius: var(--instui-component-popover-border-radius);\n border-color: var(--instui-component-popover-border-color);\n box-shadow: var(--instui-elevation-above);\n /* gap-cards-md + box-shadow y + box-shadow spread */\n margin-bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md));\n margin-left: var(--instui-component-shared-tokens-spacing-general-space-md);\n margin-right: var(--instui-component-shared-tokens-spacing-general-space-md);\n margin-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n }\n\n .pendo-tooltip-caret {\n --caret-color: var(--instui-component-view-background-primary);\n\n /* Pendo positions carets against _pendo-step-container-size, but our box\n * carries margins (for box-shadow room + spacing), so the caret lands at the\n * margin edge instead of touching the box. Pull each caret back toward the\n * box by its margin so it sits flush (1px overlap under the border). The\n * build adds !important, which overrides Pendo's dynamic inline offsets. */\n &.pendo-tooltip-caret--top {\n border-top-color: var(--caret-color);\n /* sits below the box: shift up by margin-bottom */\n bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 15px);\n\n & + .pendo-tooltip-caret-border {\n bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 16px);\n }\n }\n\n &.pendo-tooltip-caret--right {\n border-right-color: var(--caret-color);\n left: -3px;\n\n & + .pendo-tooltip-caret-border {\n left: -4px;\n }\n }\n\n &.pendo-tooltip-caret--bottom {\n border-bottom-color: var(--caret-color);\n /* sits above the box: shift down by margin-top */\n top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 15px);\n\n & + .pendo-tooltip-caret-border {\n top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 16px);\n }\n }\n\n &.pendo-tooltip-caret--left {\n border-left-color: var(--caret-color);\n right: -3px;\n\n & + .pendo-tooltip-caret-border {\n right: -4px;\n }\n }\n }\n\n /* Overlay Guides */\n &[data-layout=\"tooltipBlank\"] {\n ._pendo-step-container-styles {\n width: var(--manual-light-pendo-overlay-pendo-step-container-styles-width);\n padding: var(--instui-component-shared-tokens-spacing-padding-card-sm)\n var(--instui-component-shared-tokens-spacing-padding-card-sm)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n }\n\n /* Surveys */\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n ._pendo-step-container-styles {\n width: auto;\n padding: var(--instui-component-shared-tokens-spacing-padding-card-lg)\n var(--instui-component-shared-tokens-spacing-padding-card-lg)\n var(--instui-component-shared-tokens-spacing-general-space-sm);\n /* Cuts off box-shadow, but Surveys are anchored to bottom of viewport */\n margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-md);\n }\n\n &:not(:has(._pendo-row)) {\n ._pendo-step-container-styles {\n padding-bottom: var(--instui-component-shared-tokens-spacing-padding-card-sm);\n }\n }\n }\n}\n";
16
+ const radioGroupCss = "[class*=\"instui\"] {\n /* Radio label */\n ._pendo-multi-choice-poll-select-border label.pendo-radio,\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"])\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n label.pendo-radio {\n font-family: var(--instui-component-radio-input-font-family);\n font-weight: var(--instui-component-radio-input-font-weight);\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n letter-spacing: normal;\n font-style: normal;\n /* @TODO: --instui-component-radio-input-control-size-sm should not scale, remove override. */\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n background-color: var(--instui-color-transparent-color);\n color: var(--instui-component-radio-input-label-base-color);\n\n &:hover {\n color: var(--instui-component-radio-input-label-hover-color);\n }\n }\n\n /* Radio input */\n ._pendo-multi-choice-poll-select-border input.pendo-radio,\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"])\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n input.pendo-radio {\n /* @TODO: --instui-component-radio-input-control-size-sm should not scale, remove override. */\n width: var(--instui-component-shared-tokens-spacing-general-space-lg);\n height: var(--instui-component-shared-tokens-spacing-general-space-lg);\n border-radius: var(--instui-component-shared-tokens-border-radius-full);\n border-width: var(--instui-component-radio-input-border-width);\n border-style: solid;\n margin: var(--instui-component-shared-tokens-spacing-general-space2xs)\n var(--instui-component-radio-input-gap)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border-color: var(--instui-component-radio-input-border-color);\n background-color: var(--instui-component-radio-input-background-color);\n transition: var(--instui-focus-outline-transition);\n\n &:hover {\n background-color: var(--instui-component-radio-input-background-hover-color);\n border-color: var(--instui-component-radio-input-border-readonly-color);\n }\n\n &:checked {\n /* @TODO: --instui-component-radio-input-control-size-sm should not scale, remove override. */\n box-shadow: var(--instui-component-radio-input-border-selected-color) inset 0 0 0\n calc(var(--instui-component-radio-input-checked-inset-sm) / 2);\n border-color: var(--instui-component-radio-input-border-selected-color);\n\n + label {\n background: var(--instui-color-transparent-color);\n color: var(--instui-component-radio-input-label-base-color);\n }\n }\n\n &:focus {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: var(--instui-component-shared-tokens-focus-outline-info-color);\n\n + label {\n outline: none;\n }\n }\n }\n\n /* Form field label */\n [class$=\"-poll-question\"] > ._pendo-simple-text > ._pendo-text-plain {\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n letter-spacing: normal;\n font-style: normal;\n margin: var(--instui-component-form-field-layout-gap-primitives)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n color: var(--instui-component-form-field-layout-text-color);\n }\n\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) {\n display: flex;\n flex-direction: column;\n }\n\n /* PMF survey inputs are inline-block by default, override to stack vertically. */\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) span:has(.pendo-radio) {\n display: flex;\n flex-direction: row;\n justify-content: start;\n align-items: center;\n text-align: left;\n }\n }\n}\n";
17
+ const selectCss = "[class*=\"instui\"] {\n ._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(> select) {\n border: 0 none;\n background: none;\n padding: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n position: relative;\n\n /* Chevron icon — mask-image approach for automatic light/dark theming */\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n right: var(--instui-component-text-input-padding-horizontal-sm);\n top: var(--instui-component-shared-tokens-spacing-general-space-lg);\n transform: translateY(-50%);\n width: var(--instui-component-icon-size-sm);\n height: var(--instui-component-icon-size-sm);\n mask-image: var(--instui-icon-chevron-down);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n pointer-events: none;\n background-color: var(--instui-component-text-input-text-color);\n }\n }\n\n /* Select input */\n select._pendo-multi-choice-poll-select {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n height: var(--instui-component-text-input-height-sm);\n border-radius: var(--instui-component-text-input-border-radius);\n border-width: var(--instui-component-text-input-border-width);\n /* @TODO: Text input border style token missing upstream */\n border-style: solid;\n padding: var(--instui-component-shared-tokens-spacing-general-space-none)\n calc(var(--instui-component-text-input-padding-horizontal-sm) + 24px)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-text-input-padding-horizontal-sm);\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n font-size: var(--instui-component-text-input-font-size-sm);\n /* Chromium needs larger line-height to visually center vertically */\n line-height: calc(var(--instui-line-height-standalone-text-base) * 2);\n letter-spacing: normal;\n font-style: normal;\n background-color: var(--instui-component-text-input-background-color);\n color: var(--instui-component-text-input-text-color);\n border-color: var(--instui-component-text-input-border-color);\n transition: var(--instui-focus-outline-transition);\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n &:focus {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: var(--instui-component-shared-tokens-focus-outline-info-color);\n background-color: var(--instui-component-text-input-background-color);\n }\n }\n\n /* ─── Select Option | Light/Dark (fallback) ─── */\n /* <option> elements are OS-rendered; light-dark() provides the fallback before @supports base-select */\n select._pendo-multi-choice-poll-select option {\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n font-size: var(--instui-component-text-input-font-size-sm);\n background-color: var(--instui-component-view-background-primary);\n color: var(--instui-component-text-base-color);\n }\n\n /* ─── Select Option | Chromium: customizable select (appearance: base-select) ─── */\n @supports (appearance: base-select) {\n /* Rotate chevron when open */\n ._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(\n > select:open\n )::after {\n mask-image: var(--instui-icon-chevron-up);\n }\n\n /* Opt the <select> into the new model */\n select._pendo-multi-choice-poll-select,\n select._pendo-multi-choice-poll-select::picker(select) {\n appearance: base-select;\n }\n\n /* Hide the browser-generated picker icon — we supply our own via mask-image on the container */\n select._pendo-multi-choice-poll-select::picker-icon {\n display: none;\n }\n\n /* ─── Picker panel ─── */\n select._pendo-multi-choice-poll-select::picker(select) {\n border-radius: var(--instui-component-popover-border-radius);\n border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n border-style: solid;\n overflow: hidden;\n padding: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n background-color: var(--instui-component-options-item-background);\n border-color: var(--instui-component-popover-border-color);\n box-shadow: var(--instui-elevation-above);\n }\n\n /* ─── Options ─── */\n select._pendo-multi-choice-poll-select option {\n border-radius: 0;\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-font-size-text-sm);\n letter-spacing: var(--instui-component-text-letter-spacing-normal);\n cursor: pointer;\n line-height: var(--instui-component-options-item-line-height);\n height: var(--instui-size-interactive-height-sm);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n\n /* Hide default browser checkmark — custom icon applied via mask-image on :checked::after */\n &::checkmark {\n display: none;\n }\n\n &:hover,\n &:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n }\n\n &:focus {\n outline: none;\n }\n\n &:checked {\n font-weight: var(--instui-component-options-item-font-weight-selected);\n border-radius: 0;\n padding-right: calc(\n var(--instui-component-options-item-padding-horizontal) +\n var(--instui-spacing-padding-interactive-horizontal-sm)\n );\n position: relative;\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n\n /* Check icon — mask-image approach for automatic light/dark theming */\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n right: var(--instui-component-options-item-padding-horizontal);\n top: 50%;\n transform: translateY(-50%);\n width: var(--instui-component-icon-size-sm);\n height: var(--instui-component-icon-size-sm);\n mask-image: var(--instui-icon-check);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n pointer-events: none;\n background-color: var(--instui-component-options-item-selected-label-color);\n }\n\n &:hover {\n background-color: var(--instui-component-menu-item-selected-highlighted-background);\n }\n }\n }\n }\n}\n";
18
+ const textCss = "[class*=\"instui\"] {\n /* Shared base text styles */\n ._pendo-simple-text,\n [class*=\"_pendo-text-\"] {\n font-family: var(--instui-component-text-content-small-font-family);\n font-weight: var(--instui-component-text-content-small-font-weight);\n font-size: var(--instui-component-text-content-small-font-size);\n line-height: var(--instui-component-text-content-small-line-height);\n letter-spacing: var(--instui-component-text-letter-spacing-normal);\n color: var(--instui-component-text-base-color);\n max-width: 100%;\n }\n\n ._pendo-text-bold {\n font-weight: var(--instui-component-text-content-important-font-weight);\n }\n\n ._pendo-text-italic {\n font-family: var(--instui-component-text-content-important-font-family);\n font-weight: var(--instui-component-text-content-important-font-weight);\n line-height: var(--instui-component-text-content-important-line-height);\n }\n\n ._pendo-text-strike {\n text-decoration: line-through;\n }\n\n /* Heading h2 styles */\n h2:is(._pendo-simple-text, ._pendo-text-title) {\n font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n font-family: var(--instui-component-heading-title-card-regular-font-family);\n line-height: var(--instui-component-heading-title-card-regular-line-height);\n font-size: var(--instui-component-heading-title-card-large-font-size);\n }\n\n /* Subheading h3 styles */\n h3._pendo-simple-text {\n font-weight: var(--instui-component-heading-title-card-large-font-weight);\n font-size: var(--instui-component-heading-title-card-regular-font-size);\n font-family: var(--instui-component-heading-title-card-large-font-family);\n line-height: var(--instui-component-heading-title-card-large-line-height);\n }\n\n /* Tooltip (popover) heading overrides */\n &[data-layout=\"tooltipBlank\"] {\n h2._pendo-simple-text {\n font-size: var(--instui-component-heading-title-card-regular-font-size);\n line-height: var(--instui-component-heading-title-card-mini-line-height);\n }\n\n h3._pendo-simple-text {\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n line-height: var(--instui-component-heading-title-card-regular-line-height);\n }\n }\n\n /* Link styles */\n ._pendo-text-link {\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n font-weight: var(--instui-component-link-font-weight);\n /* border-radius added to ensure focus outline has rounded corners, matching the shape of the link text */\n border-radius: var(--instui-component-shared-tokens-border-radius-sm);\n color: var(--instui-component-link-text-color);\n\n &:is(:hover, :active, :focus) {\n color: var(--instui-component-link-text-hover-color);\n }\n\n &:disabled {\n color: var(--instui-component-link-text-disabled-color);\n }\n }\n\n /* List styles */\n ._pendo-simple-text ol,\n ._pendo-simple-text ul {\n padding-left: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n /* Surveys*/\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n /* @TODO: Surveys are terrible, clean this up. */\n\n & *:not(._pendo-close-guide) {\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n }\n\n &,\n /* PMF Thank You text\n * @TODO: validate selector, ._pendo-simple-text does not have span nested\n */\n ._pendo-row:has(+ ._pendo-row > ._pendo-button-primaryButton) ._pendo-simple-text:has(> span:not([class])),\n /* UX Lite question labels (exclude form control wrappers with inputs) */\n .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),\n h2._pendo-simple-text,\n h2._pendo-text-title ._pendo-simple-text,\n ._pendo-simple-text._pendo-nps-open-text-poll-question {\n font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n font-family: var(--instui-component-heading-title-card-mini-font-family);\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n line-height: var(--instui-component-heading-title-card-mini-line-height);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-sm);\n }\n\n /* NPS question labels */\n h2._pendo-text-title ._pendo-simple-text,\n ._pendo-simple-text._pendo-nps-open-text-poll-question {\n text-align: left;\n }\n\n /* NPS/survey completion messages */\n h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text {\n text-align: center;\n }\n\n /* NPS label sits left/right of scale, not below */\n ._pendo-nps-poll-lowerbound-label,\n ._pendo-nps-poll-upperbound-label {\n font-style: normal;\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-line-height-standalone-text-xs);\n text-align: center;\n color: var(--instui-component-text-muted-color);\n }\n\n /* UX Lite & CSAT scale labels */\n .pendo-survey-wrapper label + div {\n font-size: var(--instui-component-metric-label-font-size);\n padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n text-align: left;\n }\n }\n}\n";
19
+ const textareaCss = "[class*=\"instui\"] {\n ._pendo-row:has(._pendo-open-text-poll-input) {\n height: auto;\n }\n\n ._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row {\n height: auto;\n min-height: unset;\n }\n\n ._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element {\n position: static;\n width: 100%;\n }\n\n /* TextArea */\n ._pendo-open-text-poll-input {\n border-radius: var(--instui-component-text-area-border-radius);\n border-width: var(--instui-component-text-area-border-width);\n border-style: solid;\n padding: var(--instui-component-text-area-padding);\n gap: var(--instui-component-text-area-gap-content);\n min-height: var(--instui-component-text-area-min-height);\n height: auto;\n max-height: var(--instui-component-text-area-max-height);\n width: 100%;\n font-family: var(--instui-component-text-area-font-family);\n font-weight: var(--instui-component-text-area-font-weight);\n font-size: var(--instui-component-text-area-font-size-sm);\n line-height: var(--instui-line-height-standalone-text-base);\n letter-spacing: normal;\n font-style: normal;\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n background-color: var(--instui-component-text-area-background-color);\n color: var(--instui-component-text-area-text-color);\n border-color: var(--instui-component-text-area-border-color);\n transition: var(--instui-focus-outline-transition);\n\n &:hover {\n background: var(--instui-component-text-area-background-hover-color);\n border-color: var(--instui-component-text-area-border-hover-color);\n }\n\n &:focus {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: var(--instui-component-shared-tokens-focus-outline-info-color);\n background-color: var(--instui-component-text-area-background-color);\n border-color: var(--instui-component-text-area-border-color);\n }\n\n &::placeholder {\n color: var(--instui-component-text-area-placeholder-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-area-placeholder-hover-color);\n }\n }\n\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n ._pendo-open-text-poll-input {\n /* PMF Survey does not have `rows` attribute, so manually set to match other surveys */\n min-height: 100px;\n }\n }\n}\n";
20
+ const videoCss = "[class*=\"instui\"] {\n [class*=\"pendo-video-wrapper\"] {\n aspect-ratio: 16 / 9;\n height: auto;\n overflow: visible;\n padding-bottom: 0;\n position: relative;\n }\n\n ._pendo-video {\n display: block;\n height: 100%;\n width: 100%;\n }\n\n .pendo-mock-flexbox-element:has([class*=\"pendo-video-wrapper\"]) {\n width: 100%;\n }\n}\n";
21
+ const viewCss = "/* Divider */\n[class*=\"instui\"] {\n .pendo-mock-flexbox-element:has(._pendo-divider) {\n width: 100%;\n }\n\n hr {\n border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n border-style: var(--instui-component-view-border-style);\n margin: var(--instui-component-shared-tokens-spacing-general-space-xs)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n border-radius: var(--instui-component-shared-tokens-border-radius-full);\n border-color: var(--instui-component-tabs-panel-border-color);\n }\n}\n";
22
+ //#endregion
23
+ //#region src/layers.ts
24
+ /**
25
+ * The Instructure Pendo-guide component CSS, ported verbatim from
26
+ * `@instructure/pendo-global-css` (`src/themes/instui/`, MIT, same org). Each component keeps its
27
+ * original authored rules targeting Pendo's guide DOM (`._pendo-*`); only the assembly (cascade
28
+ * `@layer` order + token source) is pantoken's. The CSS is inlined into `generated/embedded.ts` by
29
+ * `scripts/embed.ts` — the published package carries no runtime file reads.
30
+ *
31
+ * @module
32
+ */
33
+ /** The `--manual-*` extras + tokens InstUI doesn't ship (focus transitions, logos, TextArea dims). */
34
+ const MANUAL_CSS = manualCss;
35
+ /**
36
+ * Cascade order (lowest → highest), from the source `layers.css`. Layered `!important` beats Pendo's
37
+ * own unlayered `!important`, so guide styles stay on top.
38
+ */
39
+ const LAYER_ORDER = [
40
+ "tokens",
41
+ "elevation",
42
+ "icons",
43
+ "popover",
44
+ "alert",
45
+ "text",
46
+ "closeButton",
47
+ "img",
48
+ "inputs",
49
+ "button",
50
+ "pagination",
51
+ "mask",
52
+ "view",
53
+ "card",
54
+ "manual",
55
+ "focusOutline"
56
+ ];
57
+ /** The component CSS in cascade order (the `tokens` and `manual` layers are handled separately). */
58
+ const COMPONENTS = [
59
+ {
60
+ layer: "icons",
61
+ css: videoCss
62
+ },
63
+ {
64
+ layer: "popover",
65
+ css: popoverCss
66
+ },
67
+ {
68
+ layer: "alert",
69
+ css: alertCss
70
+ },
71
+ {
72
+ layer: "text",
73
+ css: textCss
74
+ },
75
+ {
76
+ layer: "closeButton",
77
+ css: closeButtonCss
78
+ },
79
+ {
80
+ layer: "img",
81
+ css: imgCss
82
+ },
83
+ {
84
+ layer: "inputs",
85
+ css: [
86
+ textareaCss,
87
+ selectCss,
88
+ radioGroupCss
89
+ ].join("\n")
90
+ },
91
+ {
92
+ layer: "button",
93
+ css: buttonCss
94
+ },
95
+ {
96
+ layer: "pagination",
97
+ css: paginationCss
98
+ },
99
+ {
100
+ layer: "mask",
101
+ css: maskCss
102
+ },
103
+ {
104
+ layer: "view",
105
+ css: viewCss
106
+ },
107
+ {
108
+ layer: "card",
109
+ css: cardCss
110
+ }
111
+ ];
112
+ //#endregion
113
+ //#region src/plugins/add-important.ts
114
+ /**
115
+ * Create the add-`!important` plugin.
116
+ *
117
+ * @example
118
+ * ```ts
119
+ * import postcss from "postcss";
120
+ * import { addImportant } from "@pantoken/pendo";
121
+ *
122
+ * const { css } = postcss([addImportant()]).process(".x{color:red}", { from: undefined });
123
+ * // ".x{color:red !important}"
124
+ * ```
125
+ */
126
+ function addImportant() {
127
+ return {
128
+ postcssPlugin: "pendo-add-important",
129
+ Declaration(decl) {
130
+ if (decl.prop.startsWith("--")) return;
131
+ if (decl.parent?.type !== "rule") return;
132
+ decl.important = true;
133
+ }
134
+ };
135
+ }
136
+ addImportant.postcss = true;
137
+ //#endregion
138
+ //#region src/plugins/add-scope.ts
139
+ /**
140
+ * Create the `@scope` wrapping plugin.
141
+ *
142
+ * @example
143
+ * ```ts
144
+ * import postcss from "postcss";
145
+ * import { addScope } from "@pantoken/pendo";
146
+ *
147
+ * const { css } = postcss([addScope({ selector: "._pendo-step-container" })])
148
+ * .process(".x{color:red}", { from: undefined });
149
+ * // "@scope (._pendo-step-container) { .x{color:red} }"
150
+ * ```
151
+ */
152
+ function addScope(options = {}) {
153
+ const selector = options.selector ?? "._pendo-step-container";
154
+ return {
155
+ postcssPlugin: "pendo-add-scope",
156
+ OnceExit(root, { AtRule }) {
157
+ const scope = new AtRule({
158
+ name: "scope",
159
+ params: `(${selector})`,
160
+ raws: {
161
+ afterName: " ",
162
+ between: " "
163
+ }
164
+ });
165
+ const hoisted = [];
166
+ const moved = [];
167
+ for (const node of root.nodes) {
168
+ const bareLayer = node.type === "atrule" && node.name === "layer" && !node.nodes;
169
+ (node.type === "atrule" && node.name === "property" || bareLayer ? hoisted : moved).push(node.clone());
170
+ }
171
+ root.removeAll();
172
+ for (const node of hoisted) root.append(node);
173
+ for (const node of moved) scope.append(node);
174
+ root.append(scope);
175
+ }
176
+ };
177
+ }
178
+ addScope.postcss = true;
179
+ //#endregion
180
+ //#region src/build.ts
181
+ /**
182
+ * Compose the Instructure-styled Pendo guide stylesheet.
183
+ *
184
+ * The `--instui-*` custom-property layer comes from pantoken (`@pantoken/css` → `toCss`), scoped to
185
+ * the guide container `[class*="instui"]` — the drop-in replacement for pendo-styles' generated
186
+ * `vendor/tokens.css`. On top sit the ported component layers (see {@link COMPONENTS}), assembled in
187
+ * `@layer` cascade order, then run through the package-local `add-important` and `add-scope`
188
+ * transforms so the result is a deployable guide stylesheet.
189
+ *
190
+ * @module
191
+ */
192
+ /** The guide container selector the token layer and component rules are scoped under. */
193
+ const GUIDE_SELECTOR = "[class*=\"instui\"]";
194
+ /**
195
+ * The pure-outline focusables whose ring is delegated to the focus-outline rules from
196
+ * `@pantoken/components`. Elements
197
+ * with custom focus behaviour (select/textarea background resets, radio and number-scale sibling
198
+ * outlines, the card's `:focus-visible` reset) keep their own rules and are left off this list.
199
+ */
200
+ const FOCUSABLES = "._pendo-button, ._pendo-close-guide, ._pendo-text-link";
201
+ /** Build the `instui.elevation` layer: the named `--instui-elevation-*` box-shadow custom props. */
202
+ function elevationLayer() {
203
+ return `@layer instui.elevation {\n${elevationCss({ selector: GUIDE_SELECTOR })}}`;
204
+ }
205
+ /** Build the `instui.focusOutline` layer: the `--instui-focus-outline-*` token defs + the ring rules
206
+ * (from @pantoken/components), scoped to Pendo's focusables. */
207
+ function focusLayer() {
208
+ const decls = focusOutlineDeclarations().map(([n, v]) => ` ${n}: ${v};`).join("\n");
209
+ return `@layer instui.focusOutline {\n${GUIDE_SELECTOR} {\n${decls}\n}\n\n${focusOutlineRules(FOCUSABLES)}\n}`;
210
+ }
211
+ /**
212
+ * Build the Pendo guide stylesheet.
213
+ *
214
+ * @param options - {@link BuildPendoCssOptions}.
215
+ * @returns The composed CSS.
216
+ *
217
+ * @example Default rebrand build (scoped, !important, pruned)
218
+ * ```ts
219
+ * import { buildPendoCss } from "@pantoken/pendo";
220
+ *
221
+ * const css = buildPendoCss();
222
+ * ```
223
+ *
224
+ * @example Canvas theme, unscoped, keep the full token set
225
+ * ```ts
226
+ * import { buildPendoCss } from "@pantoken/pendo";
227
+ *
228
+ * const css = buildPendoCss({ theme: "canvas", scope: false, prune: false });
229
+ * ```
230
+ */
231
+ function buildPendoCss(options = {}) {
232
+ const { theme = "rebrand", scopeSelector = "._pendo-step-container", scope = true, important = true, prune = true } = options;
233
+ const tokenCss = toCss(byTheme(theme), { scope: GUIDE_SELECTOR });
234
+ const order = `@layer ${LAYER_ORDER.map((l) => `instui.${l}`).join(", ")};`;
235
+ const tokenLayer = `@layer instui.tokens {\n${tokenCss}\n\n${MANUAL_CSS}\n}`;
236
+ const components = COMPONENTS.map((c) => `@layer instui.${c.layer} {\n${c.css}\n}`).join("\n\n");
237
+ const full = `${order}\n\n${tokenLayer}\n\n${elevationLayer()}\n\n${components}\n\n${focusLayer()}`;
238
+ const plugins = [];
239
+ if (important) plugins.push(addImportant());
240
+ if (prune) plugins.push(pruneCustomProps());
241
+ if (scope) plugins.push(addScope({ selector: scopeSelector }));
242
+ return `${plugins.length ? postcss(plugins).process(full, { from: void 0 }).css : full}\n`;
243
+ }
244
+ //#endregion
245
+ //#region src/index.ts
246
+ /**
247
+ * `@pantoken/pendo` — an Instructure-styled global stylesheet for Pendo guides.
248
+ *
249
+ * Pendo injects guide HTML into a host page; this renders that guide DOM (`._pendo-*`) to match
250
+ * Instructure UI, using pantoken's `--instui-*` token layer for alignment. The component CSS is
251
+ * ported from `@instructure/pendo-global-css`; pantoken supplies the tokens and the assembly.
252
+ *
253
+ * {@link buildPendoCss} composes the stylesheet; {@link pendoCss} is the ready-made `rebrand` build
254
+ * (scoped, `!important`). A static file is published at `@pantoken/pendo/global.css`.
255
+ *
256
+ * @example
257
+ * ```ts
258
+ * import { pendoCss } from "@pantoken/pendo";
259
+ * // or a variant: buildPendoCss({ theme: "canvas", scope: false })
260
+ * ```
261
+ *
262
+ * @module
263
+ * @beta
264
+ */
265
+ /** The ready-made `rebrand` Pendo guide stylesheet (scoped, `!important`). */
266
+ const pendoCss = buildPendoCss();
267
+ //#endregion
268
+ export { COMPONENTS, LAYER_ORDER, addImportant, addScope, buildPendoCss, pendoCss as default, pendoCss };
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@pantoken/pendo",
3
+ "version": "0.1.0",
4
+ "description": "Instructure-styled global CSS for Pendo guides, built on pantoken tokens (ported from @instructure/pendo-global-css).",
5
+ "license": "MIT",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "type": "module",
10
+ "exports": {
11
+ ".": "./dist/index.mjs",
12
+ "./global.css": "./dist/global.css",
13
+ "./package.json": "./package.json"
14
+ },
15
+ "publishConfig": {
16
+ "access": "public"
17
+ },
18
+ "dependencies": {
19
+ "postcss": "^8.5.19",
20
+ "@pantoken/components": "0.1.0",
21
+ "@pantoken/css": "0.1.0",
22
+ "@pantoken/model": "0.1.0",
23
+ "@pantoken/tokens": "0.1.0",
24
+ "@pantoken/plugin-prune-custom-props": "0.1.0"
25
+ },
26
+ "devDependencies": {
27
+ "@types/node": "^24.13.3",
28
+ "typescript": "^6.0.3",
29
+ "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
30
+ "vite-plus": "0.2.4",
31
+ "@pantoken/utils": "0.1.0"
32
+ },
33
+ "pantoken": {
34
+ "key": "pendo",
35
+ "kind": "subpath"
36
+ },
37
+ "scripts": {
38
+ "embed": "node scripts/embed.ts",
39
+ "generate": "node scripts/generate.ts",
40
+ "build": "vp run embed && vp run generate && vp pack",
41
+ "dev": "vp run embed && vp run generate && vp pack --watch",
42
+ "test": "vp run embed && vp test",
43
+ "check": "vp check"
44
+ }
45
+ }