@digiform/wizard 0.2.11 → 0.2.16
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.
- package/package.json +7 -1
- package/styles.css +0 -3
- package/README.md +0 -147
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digiform/wizard",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.16",
|
|
4
4
|
"description": "React component for rendering configurable multi-step forms from a JSON config",
|
|
5
5
|
"author": "VladAfanasev",
|
|
6
6
|
"license": "MIT",
|
|
@@ -21,6 +21,12 @@
|
|
|
21
21
|
"engines": {
|
|
22
22
|
"node": ">=18.0.0"
|
|
23
23
|
},
|
|
24
|
+
"files": [
|
|
25
|
+
"**/*.js",
|
|
26
|
+
"**/*.d.ts",
|
|
27
|
+
"**/*.css",
|
|
28
|
+
"README.md"
|
|
29
|
+
],
|
|
24
30
|
"type": "module",
|
|
25
31
|
"main": "./index.js",
|
|
26
32
|
"module": "./index.js",
|
package/styles.css
CHANGED
|
@@ -1,4 +1 @@
|
|
|
1
|
-
@layer formbuilder.wizard {
|
|
2
1
|
:root{font-family:var(--fb-font-family-sans);--fb-primary: #7c3aed;--fb-primary-600: #7c3aed;--fb-primary-hover: #6d28d9;--fb-primary-active: #5b21b6;--fb-primary-dark: #4c1d95;--fb-primary-border: #c4b5fd;--fb-primary-foreground: #ffffff;--fb-primary-subtle: #ede9fe;--fb-primary-subtle-50: rgba(237, 233, 254, .5);--fb-background: #ffffff;--fb-surface: #fafaf9;--fb-surface-accent: #f5f3ff;--fb-surface-emphasis: #ede9fe;--fb-surface-subtle: #f5f3ff;--fb-border: #ddd6fe;--fb-border-focus: #7c3aed;--fb-border-width: 1px;--fb-text: #0f0a1e;--fb-text-muted: #6b6480;--fb-text-on-primary: #ffffff;--fb-error: #dc2626;--fb-error-hover: #b91c1c;--fb-error-dark: #7f1d1d;--fb-error-muted: #fca5a5;--fb-error-subtle: #fecaca;--fb-error-border: #fca5a5;--fb-error-translucent: rgba(220, 38, 38, .3);--fb-error-surface: #fef2f2;--fb-success: #16a34a;--fb-success-hover: #15803d;--fb-success-bright: #22c55e;--fb-success-subtle: #bbf7d0;--fb-success-dark: #166534;--fb-success-surface: #f0fdf4;--fb-warning: #d97706;--fb-warning-surface: #fffbeb;--fb-info: #7c3aed;--fb-info-surface: #ede9fe;--fb-canvas-background: #f3f3f3;--fb-neutral-50: #f9fafb;--fb-neutral-100: #ede9fe;--fb-neutral-200: #ddd6fe;--fb-neutral-300: #a78bfa;--fb-neutral-500: #7c6b99;--fb-neutral-900: #1e1030;--fb-accent: #f5f3ff;--fb-accent-rgb: 245, 243, 255;--fb-amber-100: #fef3c7;--fb-amber-300: #fcd34d;--fb-amber-800: #92400e;--fb-violet-100: #ede9fe;--fb-violet-300: #c4b5fd;--fb-violet-700: #6d28d9;--fb-violet-800: #5b21b6;--fb-cyan-100: #cffafe;--fb-cyan-300: #67e8f9;--fb-cyan-800: #155e75;--fb-lime-100: #ecfccb;--fb-lime-300: #bef264;--fb-lime-800: #3f6212;--fb-pink-100: #fce7f3;--fb-pink-300: #f9a8d4;--fb-pink-800: #9d174d;--fb-warning-border: #fef08a;--fb-font-family-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--fb-font-family-sans: "DM Sans", system-ui, sans-serif;--fb-font-size-2xs: .625rem;--fb-font-size-xs: .75rem;--fb-font-size-sm: .875rem;--fb-font-size-md: 1rem;--fb-font-size-lg: 1.125rem;--fb-font-size-xl: 1.25rem;--fb-font-size-2xl: 1.5rem;--fb-font-weight-normal: 400;--fb-font-weight-medium: 500;--fb-font-weight-semibold: 600;--fb-font-weight-bold: 700;--fb-line-height-tight: 1.25;--fb-line-height-normal: 1.5;--fb-line-height-relaxed: 1.75;--fb-space-50: .25rem;--fb-space-100: .5rem;--fb-space-150: .75rem;--fb-space-200: 1rem;--fb-space-250: 1.25rem;--fb-space-300: 1.5rem;--fb-space-350: 1.75rem;--fb-space-400: 2rem;--fb-space-450: 2.25rem;--fb-space-500: 2.5rem;--fb-space-550: 2.75rem;--fb-space-600: 3rem;--fb-space-650: 3.25rem;--fb-space-700: 3.5rem;--fb-space-xs: var(--fb-space-50);--fb-space-sm: var(--fb-space-100);--fb-space-md: var(--fb-space-200);--fb-space-lg: var(--fb-space-300);--fb-space-xl: var(--fb-space-400);--fb-space-2xl: var(--fb-space-600);--fb-space-3xl: var(--fb-space-700);--fb-space-md-neg: calc(-1 * var(--fb-space-200));--fb-space-1: .0625rem;--fb-space-2: .125rem;--fb-space-3: .1875rem;--fb-space-6: .375rem;--fb-space-10: .625rem;--fb-space-12: var(--fb-space-150);--fb-space-14: .875rem;--fb-space-20: var(--fb-space-250);--fb-size-touch-target: var(--fb-space-500);--fb-padding-card: var(--fb-space-250);--fb-padding-card-sm: var(--fb-space-200);--fb-gap-section: var(--fb-space-200);--fb-gap-cards: var(--fb-space-150);--fb-gap-inline: var(--fb-space-sm);--fb-container-max-width: 64rem;--fb-popover-width: 18rem;--fb-radius-sm: .25rem;--fb-radius-md: .375rem;--fb-radius-lg: .5rem;--fb-radius-xl: .75rem;--fb-radius-full: 100vmax;--fb-shadow-sm: 0 1px 2px 0 rgb(124 58 237 / .08);--fb-shadow-md: 0 4px 6px -1px rgb(124 58 237 / .12), 0 2px 4px -2px rgb(124 58 237 / .08);--fb-shadow-lg: 0 10px 15px -3px rgb(124 58 237 / .15), 0 4px 6px -4px rgb(124 58 237 / .1);--fb-z-base: 0;--fb-z-raised: 1;--fb-z-dropdown: 1000;--fb-z-sticky: 1100;--fb-z-overlay: 1200;--fb-z-modal: 1300;--fb-z-toast: 1400}button,input,optgroup,select,textarea{font-family:inherit}.fb-alert_5UcaT{position:relative;inline-size:100%;border-radius:var(--fb-radius-md);border:var(--fb-border-width) solid var(--fb-border);padding:var(--fb-space-md)}.fb-alert_5UcaT>svg{position:absolute;left:var(--fb-space-md);top:var(--fb-space-md);color:var(--fb-text)}.fb-alert_5UcaT>svg~*{padding-inline-start:1.75rem}.fb-alert_5UcaT>svg+div{transform:translateY(-3px)}.fb-variant-default_yhEpY{background-color:var(--fb-background);color:var(--fb-text)}.fb-variant-destructive_rafp5{border-color:var(--fb-error);color:var(--fb-error)}.fb-variant-destructive_rafp5>svg{color:var(--fb-error)}.fb-alertTitle_-KE5o{margin-block-end:var(--fb-space-sm);font-weight:500;line-height:1;letter-spacing:-.025em}.fb-alertDescription_cg7Ke{font-size:var(--fb-font-size-sm)}.fb-alertDescription_cg7Ke p{line-height:1.625}.fb-button_MJLDl{display:inline-flex;align-items:center;justify-content:center;gap:var(--fb-space-sm);white-space:nowrap;border-radius:var(--fb-radius-md);font-size:var(--fb-font-size-md);font-weight:var(--fb-font-weight-semibold);transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:pointer;outline:none;border:1px solid transparent}.fb-button_MJLDl:focus-visible{outline:2px solid var(--fb-border-focus);outline-offset:2px}.fb-button_MJLDl:disabled{pointer-events:none;opacity:.5}.fb-button_MJLDl span{font-size:inherit;font-weight:inherit;line-height:inherit}.fb-button_MJLDl svg{pointer-events:none;inline-size:1rem;block-size:1rem;flex-shrink:0}.fb-variant-default_KLx8b{background-color:var(--fb-primary);color:var(--fb-primary-foreground);border-color:var(--fb-primary);box-shadow:var(--fb-shadow-sm)}.fb-variant-default_KLx8b:hover:not(:disabled){background-color:var(--fb-primary-hover);border-color:var(--fb-primary-hover);box-shadow:var(--fb-shadow-md)}.fb-variant-default_KLx8b:active:not(:disabled){background-color:var(--fb-primary-active);border-color:var(--fb-primary-active);box-shadow:none}.fb-variant-destructive_vQKZ2{background-color:var(--fb-error);color:var(--fb-text-on-primary);border-color:var(--fb-error);box-shadow:var(--fb-shadow-sm)}.fb-variant-destructive_vQKZ2:hover:not(:disabled){background-color:var(--fb-error-hover);border-color:var(--fb-error-hover);box-shadow:var(--fb-shadow-md)}.fb-variant-destructive_vQKZ2:active:not(:disabled){background-color:var(--fb-error-dark);box-shadow:none}.fb-variant-outline_1Mb0E{background-color:var(--fb-background);color:var(--fb-text);border-color:var(--fb-border)}.fb-variant-outline_1Mb0E:hover:not(:disabled){background-color:var(--fb-surface-accent);border-color:var(--fb-primary-border);color:var(--fb-primary)}.fb-variant-outline_1Mb0E:active:not(:disabled){background-color:var(--fb-surface-emphasis);border-color:var(--fb-primary);color:var(--fb-primary)}.fb-variant-secondary_-bohS{background-color:var(--fb-neutral-100);color:var(--fb-text);border-color:var(--fb-neutral-200)}.fb-variant-secondary_-bohS:hover:not(:disabled){background-color:var(--fb-neutral-200);border-color:var(--fb-primary-border);color:var(--fb-primary)}.fb-variant-ghost_qml-f{background-color:transparent;color:var(--fb-text);border-color:transparent}.fb-variant-ghost_qml-f:hover:not(:disabled){background-color:var(--fb-surface-accent);color:var(--fb-primary)}.fb-variant-ghost_qml-f:active:not(:disabled){background-color:var(--fb-surface-emphasis);color:var(--fb-primary)}.fb-variant-link_aNj3r{background-color:transparent;color:var(--fb-primary);text-underline-offset:.25rem;border-color:transparent}.fb-variant-link_aNj3r:hover:not(:disabled){text-decoration:underline;color:var(--fb-primary-hover)}.fb-size-default_9qKVU{block-size:var(--fb-size-touch-target);padding-inline:var(--fb-space-md);padding-block:var(--fb-space-sm)}.fb-size-sm_MvjvS{block-size:2.25rem;padding-inline:var(--fb-space-12);border-radius:var(--fb-radius-md);font-size:var(--fb-font-size-xs)}.fb-size-lg_v6n8j{block-size:2.75rem;padding-inline:var(--fb-space-20);border-radius:var(--fb-radius-md);font-size:var(--fb-font-size-md);font-weight:var(--fb-font-weight-semibold)}.fb-size-icon_MYsET{block-size:var(--fb-size-touch-target);inline-size:var(--fb-size-touch-target);padding:0}.fb-checkbox_wsic0{block-size:1rem;inline-size:1rem;flex-shrink:0;border-radius:var(--fb-radius-sm);border:var(--fb-border-width) solid var(--fb-primary);cursor:pointer}.fb-checkbox_wsic0:focus-visible{outline:none;box-shadow:0 0 0 2px var(--fb-border)}.fb-checkbox_wsic0:disabled{cursor:not-allowed;opacity:.5}.fb-checkbox_wsic0[data-state=checked]{background-color:var(--fb-primary);color:var(--fb-text-on-primary)}.fb-checkboxIndicator_31Q4N{display:flex;align-items:center;justify-content:center;color:currentColor}.fb-checkboxIndicator_31Q4N svg{block-size:1rem;inline-size:1rem}.fb-input_RJ7IM{display:flex;block-size:var(--fb-size-touch-target);inline-size:100%;border-radius:var(--fb-radius-md);border:var(--fb-border-width) solid var(--fb-border);background-color:var(--fb-background);padding-inline:var(--fb-space-12);padding-block:var(--fb-space-sm);font-size:var(--fb-font-size-sm);color:var(--fb-text)}.fb-input_RJ7IM::placeholder{color:var(--fb-text-muted)}.fb-input_RJ7IM::file-selector-button{border:0;background-color:transparent;font-size:var(--fb-font-size-sm);font-weight:500;color:var(--fb-text)}.fb-input_RJ7IM:focus-visible{outline:none;box-shadow:0 0 0 2px var(--fb-border)}.fb-input_RJ7IM:disabled{cursor:not-allowed;opacity:.5}@media(min-width:768px){.fb-input_RJ7IM{font-size:var(--fb-font-size-sm)}}.fb-radioGroup_PqpPn{display:grid;gap:var(--fb-space-sm)}.fb-radioGroupItem_r91M1{aspect-ratio:1;block-size:1rem;inline-size:1rem;border-radius:var(--fb-radius-full);border:var(--fb-border-width) solid var(--fb-primary);color:var(--fb-primary);background-color:transparent;outline:none;transition:opacity .15s ease}.fb-radioGroupItem_r91M1:focus-visible{outline:2px solid var(--fb-border-focus);outline-offset:2px}.fb-radioGroupItem_r91M1:disabled{cursor:not-allowed;opacity:.5}.fb-radioIndicator_PFyGX{display:flex;align-items:center;justify-content:center}.fb-radioIndicatorIcon_vSsbY{block-size:.625rem;inline-size:.625rem;fill:currentColor;color:currentColor}.fb-selectTrigger_dj84x{display:flex;align-items:center;justify-content:space-between;block-size:2.5rem;inline-size:100%;border-radius:var(--fb-radius-md);border:var(--fb-border-width) solid var(--fb-border);background-color:var(--fb-background);padding-inline:var(--fb-space-6);padding-block:var(--fb-space-sm);font-size:var(--fb-font-size-sm)}.fb-selectTrigger_dj84x::placeholder{color:var(--fb-text-muted)}.fb-selectTrigger_dj84x:focus{outline:none;box-shadow:0 0 0 2px var(--fb-border-focus)}.fb-selectTrigger_dj84x:disabled{cursor:not-allowed;opacity:.5}.fb-selectTrigger_dj84x>span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.fb-selectTriggerIcon_V8dav{block-size:1rem;inline-size:1rem;opacity:.5}.fb-selectScrollUpButton_c6WZR,.fb-selectScrollDownButton_kmWY4{display:flex;cursor:default;align-items:center;justify-content:center;padding-block:var(--fb-space-2)}.fb-selectScrollIcon_IZbZG{block-size:1rem;inline-size:1rem}.fb-selectContent_uJ-ZX{position:relative;z-index:50;max-block-size:24rem;min-inline-size:8rem;overflow:hidden;border-radius:var(--fb-radius-md);border:var(--fb-border-width) solid var(--fb-border);background-color:var(--fb-background);color:var(--fb-text);box-shadow:var(--fb-shadow-md)}.fb-selectContent_uJ-ZX[data-state=open]{animation:fb-selectContentIn_n9zpE .15s ease-out}.fb-selectContent_uJ-ZX[data-state=closed]{animation:fb-selectContentOut_rxdBe .15s ease-in}.fb-selectContent_uJ-ZX.fb-popper_uKkq9[data-side=bottom]{transform:translateY(.25rem)}.fb-selectContent_uJ-ZX.fb-popper_uKkq9[data-side=left]{transform:translate(-.25rem)}.fb-selectContent_uJ-ZX.fb-popper_uKkq9[data-side=right]{transform:translate(.25rem)}.fb-selectContent_uJ-ZX.fb-popper_uKkq9[data-side=top]{transform:translateY(-.25rem)}.fb-selectViewport_wcTaR{padding:var(--fb-space-2)}.fb-selectViewport_wcTaR.fb-popper_uKkq9{block-size:var(--radix-select-trigger-height);inline-size:100%;min-inline-size:var(--radix-select-trigger-width)}.fb-selectLabel_hb7ig{padding-block:var(--fb-space-3);padding-inline-start:var(--fb-space-md);padding-inline-end:var(--fb-space-sm);font-size:var(--fb-font-size-sm);font-weight:var(--fb-font-weight-semibold)}.fb-selectItem_f23oZ{position:relative;display:flex;inline-size:100%;cursor:default;-webkit-user-select:none;user-select:none;align-items:center;border-radius:var(--fb-radius-sm);padding-block:var(--fb-space-3);padding-inline-start:var(--fb-space-md);padding-inline-end:var(--fb-space-sm);font-size:var(--fb-font-size-sm);outline:none}.fb-selectItem_f23oZ:focus{background-color:var(--fb-accent);color:var(--fb-text)}.fb-selectItem_f23oZ[data-disabled]{pointer-events:none;opacity:.5}.fb-selectItemIndicator_PD-WQ{position:absolute;left:var(--fb-space-sm);display:flex;block-size:.875rem;inline-size:.875rem;align-items:center;justify-content:center}.fb-selectItemIndicatorIcon_kgB1I{block-size:1rem;inline-size:1rem}.fb-selectSeparator_DS7X2{margin-inline:calc(-1 * var(--fb-space-2));margin-block:var(--fb-space-2);block-size:1px;background-color:var(--fb-surface-accent)}@keyframes fb-selectContentIn_n9zpE{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fb-selectContentOut_rxdBe{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.fb-textarea_p4K5i{display:flex;min-block-size:5rem;inline-size:100%;border-radius:var(--fb-radius-md);border:var(--fb-border-width) solid var(--fb-border);background-color:var(--fb-background);padding-inline:var(--fb-space-12);padding-block:var(--fb-space-sm);font-size:var(--fb-font-size-sm);color:var(--fb-text)}.fb-textarea_p4K5i::placeholder{color:var(--fb-text-muted)}.fb-textarea_p4K5i:focus-visible{outline:none;box-shadow:0 0 0 2px var(--fb-border)}.fb-textarea_p4K5i:disabled{cursor:not-allowed;opacity:.5}.fb-wrapper_nDU5Q{display:flex;flex-direction:column;gap:var(--fb-space-sm)}.fb-progress_jf4Xd{appearance:none;background-color:var(--fb-primary-subtle);border:none;border-radius:8px;height:16px;overflow:hidden;width:100%}.fb-progress_jf4Xd::-webkit-progress-bar{background-color:transparent}.fb-progress_jf4Xd::-webkit-progress-value{background-color:var(--fb-primary);transition:all .4s cubic-bezier(.4,0,.2,1)}.fb-progress_jf4Xd::-moz-progress-bar{background-color:var(--fb-primary);transition:all .4s cubic-bezier(.4,0,.2,1)}label.fb-progressLabel_3nfSJ{font-size:var(--fb-font-size-sm);font-weight:var(--fb-font-weight-normal);line-height:var(--fb-line-height-normal)}.fb-completionMessage_OyQ9C{display:flex;align-items:center;gap:var(--fb-space-2);font-size:var(--fb-font-size-sm);color:var(--fb-success);animation:fb-fadeIn_iAZjj .3s ease-out}.fb-errorMessage_B8dGO{display:flex;align-items:center;justify-content:space-between;font-size:var(--fb-font-size-sm);color:var(--fb-error)}.fb-errorContent_2TAc5{display:flex;align-items:center;gap:var(--fb-space-2)}.fb-retryButton_0HfjY{display:flex;align-items:center;gap:var(--fb-space-1);font-weight:var(--fb-font-weight-medium);color:var(--fb-error);text-decoration:underline;text-underline-offset:2px;background:none;border:none;cursor:pointer}.fb-retryButton_0HfjY:hover{color:var(--fb-error-hover)}@keyframes fb-fadeIn_iAZjj{0%{opacity:0}to{opacity:1}}.fb-boxContainer_oXGAN{background-color:var(--fb-background);border-radius:var(--fb-radius-md);padding:var(--fb-space-md)}.fb-GridLayoutContainer_BZvnG{align-items:center;background-color:var(--grid-container-background-color);display:flex;flex-direction:column;justify-content:center;max-width:100vw;min-width:var(--fb-container-max-width)}.fb-GridLayoutContainerWithoutPadding_4kQ4C{padding-block:0}.fb-GridLayoutContainerFullWidth_pYcHf{min-width:100%;max-width:100%}.fb-GridLayout_A2c7k{container-type:inline-size;display:grid;gap:var(--grid-row-gap, var(--fb-space-12)) var(--grid-column-gap, var(--fb-space-md));grid-template-columns:repeat(var(--grid-column-max-columns, 12),1fr);grid-template-rows:auto;margin-left:auto;margin-right:auto;max-width:var(--fb-container-max-width);min-width:var(--fb-container-max-width);width:100%}.fb-GridLayoutFullWidth_NMi3Y{max-width:100%;min-width:100%}.fb-gridLayoutColumn_5TCzp{align-self:start;grid-column:var(--grid-column-start) / var(--grid-column-end);grid-row:var(--grid-row-start, auto) / var(--grid-row-end, auto)}.fb-stretch_n7mLP{align-self:stretch}.fb-formLayoutWrapper_w9jQ-{width:100%}.fb-titleSection_qd9UP{display:flex;flex-direction:column;align-items:flex-start;width:100%}.fb-leftColumn_zIdZO,.fb-rightColumn_P0J6U{display:flex;flex-direction:column;height:fit-content;min-height:0;position:sticky;top:0}.fb-footerSection_eW4js{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:var(--fb-space-md)}.fb-contentPadding_LMiyE{padding:var(--fb-space-12)}.fb-contentBorder_yYFFn{border:var(--fb-border-width) solid var(--fb-neutral-200);border-radius:var(--fb-radius-md);background-color:var(--fb-surface-accent)}@container (max-width: 768px){.fb-leftColumn_zIdZO,.fb-rightColumn_P0J6U{grid-column:1 / 13!important;margin-bottom:var(--fb-space-12)}.fb-mainContent_9ZW4m{grid-column:1 / 13!important}}@media print{.fb-formLayoutWrapper_w9jQ-{background:var(--fb-background)!important}.fb-contentBorder_yYFFn{border:var(--fb-border-width) solid var(--fb-border)!important;box-shadow:none!important}}.fb-dialogOverlay_GSMVm{position:fixed;inset:0;z-index:50;background-color:#000c}.fb-dialogOverlay_GSMVm[data-state=open]{animation:fb-dialogOverlayFadeIn_l-QHK .15s ease-out}.fb-dialogOverlay_GSMVm[data-state=closed]{animation:fb-dialogOverlayFadeOut_DewLt .15s ease-in}.fb-dialogContent_neUay{position:fixed;left:50%;top:50%;z-index:50;display:grid;width:100%;max-width:32rem;translate:-50% -50%;gap:var(--fb-space-sm);border:var(--fb-border-width) solid var(--fb-border);background-color:var(--fb-background);padding:var(--fb-space-12);box-shadow:var(--fb-shadow-lg);transition-duration:.2s}@media(min-width:640px){.fb-dialogContent_neUay{border-radius:var(--fb-radius-lg)}}.fb-dialogContent_neUay[data-state=open]{animation:fb-dialogContentSlideIn_oQPJG .2s ease-out}.fb-dialogContent_neUay[data-state=closed]{animation:fb-dialogContentSlideOut_nNdgq .2s ease-in}.fb-dialogClose_QbWkj{position:absolute;right:var(--fb-space-sm);top:var(--fb-space-sm);border-radius:var(--fb-radius-sm);opacity:.7;transition:opacity .15s}.fb-dialogClose_QbWkj:hover{opacity:1}.fb-dialogClose_QbWkj:focus{outline:none;box-shadow:0 0 0 2px var(--fb-border-focus);opacity:1}.fb-dialogClose_QbWkj:disabled{pointer-events:none}.fb-dialogClose_QbWkj[data-state=open]{background-color:var(--fb-accent);color:var(--fb-text-muted)}.fb-dialogCloseIcon_kK8c6{block-size:1rem;inline-size:1rem}.fb-dialogCloseIcon_kK8c6+span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fb-dialogHeader_df1-u{display:flex;flex-direction:column;gap:var(--fb-space-3);text-align:center}@media(min-width:640px){.fb-dialogHeader_df1-u{text-align:start}}.fb-dialogFooter_1vdJe{display:flex;flex-direction:column-reverse;gap:var(--fb-space-sm)}@media(min-width:640px){.fb-dialogFooter_1vdJe{flex-direction:row;justify-content:flex-end;gap:var(--fb-space-sm)}}.fb-dialogTitle_FS7k8{font-size:var(--fb-font-size-lg);font-weight:var(--fb-font-weight-semibold);line-height:1;letter-spacing:-.025em}.fb-dialogDescription_uEgTa{font-size:var(--fb-font-size-sm);color:var(--fb-text-muted)}@keyframes fb-dialogOverlayFadeIn_l-QHK{0%{opacity:0}to{opacity:1}}@keyframes fb-dialogOverlayFadeOut_DewLt{0%{opacity:1}to{opacity:0}}@keyframes fb-dialogContentSlideIn_oQPJG{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes fb-dialogContentSlideOut_nNdgq{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-48%) scale(.95)}}.fb-sheetOverlay_2nFRz{position:fixed;inset:0;z-index:50;background-color:#000c}.fb-sheetOverlay_2nFRz[data-state=open]{animation:fb-sheetOverlayFadeIn_AS-42 .15s ease-out}.fb-sheetOverlay_2nFRz[data-state=closed]{animation:fb-sheetOverlayFadeOut_Y-hE4 .15s ease-in}.fb-sheetContent_p2PyE{position:fixed;z-index:50;gap:var(--fb-space-sm);background-color:var(--fb-background);padding:var(--fb-space-12);box-shadow:var(--fb-shadow-lg);transition:transform .5s ease-in-out,opacity .5s ease-in-out}.fb-side-top_vnDBA{inset-inline:0;top:0;border-block-end:var(--fb-border-width) solid var(--fb-border)}.fb-side-top_vnDBA[data-state=open]{animation:fb-slideInFromTop_ujZFr .5s ease-in-out}.fb-side-top_vnDBA[data-state=closed]{animation:fb-slideOutToTop_sjz0S .3s ease-in-out}.fb-side-bottom_8Qo-6{inset-inline:0;bottom:0;border-block-start:var(--fb-border-width) solid var(--fb-border)}.fb-side-bottom_8Qo-6[data-state=open]{animation:fb-slideInFromBottom_5kG78 .5s ease-in-out}.fb-side-bottom_8Qo-6[data-state=closed]{animation:fb-slideOutToBottom_03WBw .3s ease-in-out}.fb-side-left_iSyK6{inset-block:0;left:0;block-size:100%;inline-size:75%;border-inline-end:var(--fb-border-width) solid var(--fb-border)}@media(min-width:640px){.fb-side-left_iSyK6{max-inline-size:24rem}}.fb-side-left_iSyK6[data-state=open]{animation:fb-slideInFromLeft_iFt5a .5s ease-in-out}.fb-side-left_iSyK6[data-state=closed]{animation:fb-slideOutToLeft_kRHa5 .3s ease-in-out}.fb-side-right_q-l6-{inset-block:0;right:0;block-size:100%;inline-size:75%;border-inline-start:var(--fb-border-width) solid var(--fb-border)}@media(min-width:640px){.fb-side-right_q-l6-{max-inline-size:24rem}}.fb-side-right_q-l6-[data-state=open]{animation:fb-slideInFromRight_elDbR .5s ease-in-out}.fb-side-right_q-l6-[data-state=closed]{animation:fb-slideOutToRight_HPV1P .3s ease-in-out}.fb-sheetClose_sq3cW{position:absolute;right:var(--fb-space-sm);top:var(--fb-space-sm);border-radius:var(--fb-radius-sm);opacity:.7;transition:opacity .15s}.fb-sheetClose_sq3cW:hover{opacity:1}.fb-sheetClose_sq3cW:focus{outline:none;box-shadow:0 0 0 2px var(--fb-border-focus);opacity:1}.fb-sheetClose_sq3cW:disabled{pointer-events:none}.fb-sheetClose_sq3cW[data-state=open]{background-color:var(--fb-surface)}.fb-sheetCloseIcon_2Z7S1{block-size:1rem;inline-size:1rem}.fb-sheetCloseIcon_2Z7S1+span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fb-sheetHeader_w9TtP{display:flex;flex-direction:column;gap:var(--fb-space-sm);text-align:center}@media(min-width:640px){.fb-sheetHeader_w9TtP{text-align:start}}.fb-sheetFooter_XN1p0{display:flex;flex-direction:column-reverse;gap:var(--fb-space-sm)}@media(min-width:640px){.fb-sheetFooter_XN1p0{flex-direction:row;justify-content:flex-end;gap:var(--fb-space-sm)}}.fb-sheetTitle_F6nNH{font-size:var(--fb-font-size-lg);font-weight:var(--fb-font-weight-semibold);color:var(--fb-text)}.fb-sheetDescription_AzWJb{font-size:var(--fb-font-size-sm);color:var(--fb-text-muted)}@keyframes fb-sheetOverlayFadeIn_AS-42{0%{opacity:0}to{opacity:1}}@keyframes fb-sheetOverlayFadeOut_Y-hE4{0%{opacity:1}to{opacity:0}}@keyframes fb-slideInFromTop_ujZFr{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes fb-slideOutToTop_sjz0S{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes fb-slideInFromBottom_5kG78{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fb-slideOutToBottom_03WBw{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes fb-slideInFromLeft_iFt5a{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes fb-slideOutToLeft_kRHa5{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes fb-slideInFromRight_elDbR{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes fb-slideOutToRight_HPV1P{0%{transform:translate(0)}to{transform:translate(100%)}}.fb-dialogContent_MQjVY{max-inline-size:28rem}.fb-iconRow_zoQXV{display:flex;align-items:center;gap:var(--fb-space-12)}.fb-iconCircle_UvpAZ{border-radius:var(--fb-radius-full);background-color:var(--fb-surface);padding:var(--fb-space-sm)}.fb-descriptionSpaced_AmH9W{margin-block-start:var(--fb-space-2)}.fb-buttonRow_lfgxL{display:flex;justify-content:flex-end;gap:var(--fb-space-sm);padding-block-start:var(--fb-space-md)}.fb-minWidthButton_maffF{min-inline-size:6rem}.fb-iconWarning_OcS7O{width:1.25rem;height:1.25rem;color:var(--fb-warning)}.fb-iconInfo_xQhjd{width:1.25rem;height:1.25rem;color:var(--fb-info)}.fb-vcContainer_oHl8H{cursor:text;display:flex;gap:16px;pointer-events:none;position:relative}.fb-vcInput_Nb8NL{inset:0;pointer-events:none;position:absolute}.fb-vcInput_Nb8NL input{background:transparent;block-size:100%;border-color:transparent;caret-color:transparent;color:transparent;font-family:inherit;font-size:18px;font-weight:400;inline-size:100%;letter-spacing:80px;line-height:28px;outline:transparent solid 2px;pointer-events:all;text-align:left;-webkit-user-select:none;user-select:none}.fb-vcInput_Nb8NL input::selection{background-color:transparent}.fb-vcGroup_5z3tY{align-items:center;display:flex;gap:16px;inline-size:100%}.fb-vcDash_R8D18{align-items:center;block-size:48px;display:flex;font-family:inherit;font-size:18px;font-style:normal;font-weight:400;justify-content:center;line-height:1.4}.fb-vcSlot_AZfrj{align-items:center;background:#fff;block-size:48px;border:var(--fb-border-width) solid var(--fb-border);border-radius:8px;color:var(--fb-text);display:flex;flex-basis:12px;flex-grow:1;font-family:inherit;font-size:16px;font-style:normal;font-weight:400;justify-content:center;line-height:1.4;outline:transparent solid 2px}.fb-vcSlotActive_1Zqta{border-color:var(--fb-border-focus);outline-color:var(--fb-border-focus)}.fb-vcCaret_pQ-uD{align-items:center;animation-duration:1.2s;animation-iteration-count:infinite;animation-name:fb-caret-blink_jfhv0;animation-timing-function:ease-out;display:flex;pointer-events:none}.fb-vcCaret_pQ-uD>div{background-color:var(--fb-text);height:18px;width:1px}@keyframes fb-caret-blink_jfhv0{0%,70%,to{opacity:1}20%,50%{opacity:0}}.fb-dialogContent_hdJb3{max-inline-size:28rem}.fb-headerRow_dowgv{display:flex;align-items:center;gap:var(--fb-space-sm)}.fb-iconSuccess_787to{color:var(--fb-success)}.fb-iconMail_yICFX{color:var(--fb-info)}.fb-successButtonRow_LilmE{display:flex;justify-content:center;padding-block-start:var(--fb-space-md)}.fb-minWidthButton_Y-HfD{min-inline-size:8rem}.fb-formContent_DRlgi{display:flex;flex-direction:column;gap:var(--fb-space-md)}.fb-codeSection_vJqzI{display:flex;flex-direction:column;gap:var(--fb-space-sm)}.fb-codeLabel_PvgkB{font-size:var(--fb-font-size-sm);font-weight:500}.fb-codeCenter_j2TST{display:flex;justify-content:center}.fb-resendText_fsAeq,.fb-blockedText_ZGaBs{text-align:center;font-size:var(--fb-font-size-sm);color:var(--fb-text-muted)}.fb-resendLink_dRMub{padding:0;block-size:auto;color:var(--fb-info)}.fb-resendLinkDefault_sVy7D{padding:0;block-size:auto}.fb-footerButtonRow_dFkH0{display:flex;justify-content:flex-end;gap:var(--fb-space-sm);padding-block-start:var(--fb-space-md)}.fb-iconSm_JkMbO{width:1rem;height:1rem}.fb-iconMd_y--1E{width:1.25rem;height:1.25rem}.fb-buttonRow_IpMPI{display:flex;flex-wrap:wrap;gap:var(--fb-space-sm);justify-content:flex-end}.fb-minWidthButton_Ggq-E{min-inline-size:4rem}.fb-toastContainer_iL55M{position:fixed;inset-block-start:var(--fb-space-md);inset-inline-end:var(--fb-space-md);z-index:50;max-inline-size:24rem}.fb-toastCard_EslQ-{background-color:var(--fb-background);border:var(--fb-border-width) solid var(--fb-border);border-radius:var(--fb-radius-lg);box-shadow:var(--fb-shadow-lg);padding:var(--fb-space-md);display:flex;flex-direction:column;gap:var(--fb-space-12)}.fb-toastTitle_W3izr{font-weight:var(--fb-font-weight-semibold)}.fb-toastContent_h6A9y{font-size:var(--fb-font-size-sm);color:var(--fb-text-muted);margin-block-start:var(--fb-space-2)}.fb-sheetContent_Ccs86{inline-size:400px}@media(min-width:640px){.fb-sheetContent_Ccs86{inline-size:540px}}.fb-sheetBody_XqkvA{flex:1;padding-block-end:var(--fb-space-md);display:flex;flex-direction:column;gap:var(--fb-space-md);margin-block-start:var(--fb-space-md)}.fb-sheetText_yRGd-{font-size:var(--fb-font-size-sm)}.fb-size-small_YcmVE{max-inline-size:24rem}.fb-size-medium_auCiA{max-inline-size:28rem}.fb-size-large_8EHM7{max-inline-size:42rem}.fb-modalButtonRow_c7V4P{display:flex;justify-content:flex-end;gap:var(--fb-space-sm);padding-block-start:var(--fb-space-md)}.fb-errorState_khSRW{padding:var(--fb-space-md);border:var(--fb-border-width) solid var(--fb-error-translucent);background-color:var(--fb-error-surface);color:var(--fb-error);border-radius:var(--fb-radius-md)}.fb-errorHeading_dGdN2{font-weight:500;margin-block-end:var(--fb-space-sm)}.fb-loadingState_Pdhds{padding:var(--fb-space-md);text-align:center;color:var(--fb-text-muted)}.fb-loadingPulse_QIw08{animation:fb-pulse_7Ml6n 2s ease-in-out infinite}@keyframes fb-pulse_7Ml6n{0%,to{opacity:1}50%{opacity:.5}}.fb-formLayout_JzC8E{margin-block:var(--fb-space-xl)}.fb-stepContent_EU1uV{display:flex;flex-direction:column;gap:var(--fb-space-lg)}.fb-loaderWrapper_00phH{margin-block-end:var(--fb-space-md)}.fb-footer_r0kdp{margin-block-start:var(--fb-space-lg)}.fb-container_p6qC4{margin-block-end:var(--fb-space-sm);padding-block-end:var(--fb-space-md);border-block-end:var(--fb-border-width) solid var(--fb-border)}.fb-disabled_EuvTp{opacity:.5}.fb-prevButtonDisabled_Wj2Qp{opacity:.5;cursor:default}.fb-additionalContent_0tppE{margin-block-start:var(--fb-space-md)}.fb-section_5kbZU{margin-block-end:var(--fb-space-lg)}.fb-sectionHeader_aVzgk{display:flex;justify-content:space-between;align-items:center;margin-block-end:var(--fb-space-md)}.fb-cancelButton_PyIZH{font-size:var(--fb-font-size-sm);color:var(--fb-text-muted);display:flex;align-items:center;gap:var(--fb-space-2);background:none;border:none;cursor:pointer}.fb-editButton_dbSFX{font-size:var(--fb-font-size-sm);color:var(--fb-info);display:flex;align-items:center;gap:var(--fb-space-2);background:none;border:none;cursor:pointer}.fb-sectionContent_wTlW-{display:flex;flex-direction:column;gap:var(--fb-space-md)}.fb-saveButtonsWrapper_VGuwW{display:flex;padding-block-start:var(--fb-space-md)}.fb-iconSm_yLpHW{width:1rem;height:1rem}.fb-alertList_d0DxG{display:flex;flex-direction:column;gap:var(--fb-space-sm)}.fb-errorFallback_CNx1M{padding:var(--fb-space-sm);border:var(--fb-border-width) solid var(--fb-error-translucent);background-color:var(--fb-error-surface);color:var(--fb-error);border-radius:var(--fb-radius-md)}.fb-errorDetail_Nvh9V{font-size:var(--fb-font-size-xs);margin-block-start:var(--fb-space-2)}.fb-displayWrapper_VYcQC{display:flex;flex-direction:column;gap:var(--fb-space-md)}.fb-emptyValue_baQFk{color:var(--fb-text-muted);font-style:italic}.fb-valueText_JCRsN{color:var(--fb-text)}.fb-fieldWrapper_rnKUQ{display:flex;flex-direction:column;gap:var(--fb-space-2)}.fb-card_Ry9d9{border-radius:var(--fb-radius-lg);border:var(--fb-border-width) solid var(--fb-border);background-color:var(--fb-background);color:var(--fb-text);box-shadow:var(--fb-shadow-md);overflow:hidden}.fb-cardCompact_wGBoD{border-radius:var(--fb-radius-md);box-shadow:var(--fb-shadow-sm)}.fb-cardHeader_exSCY{display:flex;flex-direction:column;gap:var(--fb-space-6);padding:var(--fb-padding-card)}.fb-cardHeaderStructured_UBow4{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fb-space-200);padding:var(--fb-space-200) var(--fb-space-250);border-bottom:1px solid var(--fb-border);background:var(--fb-surface)}.fb-cardHeaderStructuredCompact_jH94z{padding:var(--fb-space-150) var(--fb-space-200)}.fb-cardHeaderLeft_PnQMU{flex:1;min-width:0}.fb-cardTitleRow_XU5Go{display:flex;align-items:center;gap:var(--fb-space-100);flex-wrap:wrap}.fb-cardTitleText_imcqj{font-size:var(--fb-font-size-sm);font-weight:var(--fb-font-weight-semibold);color:var(--fb-text);line-height:var(--fb-line-height-tight)}.fb-cardDescriptionText_oCoiA{font-size:var(--fb-font-size-xs);color:var(--fb-text-muted);margin-top:var(--fb-space-50);line-height:var(--fb-line-height-normal)}.fb-cardMeta_Ch80f{display:flex;gap:var(--fb-space-200);margin-top:var(--fb-space-100);flex-wrap:wrap}.fb-cardMetaItem_ggGU8{font-size:11px;color:var(--fb-text-muted);display:flex;align-items:center;gap:4px}.fb-cardHeaderRight_rEXk0{display:flex;align-items:center;gap:var(--fb-space-100);flex-shrink:0}.fb-cardBody_lIAav{padding:var(--fb-space-200) var(--fb-space-250)}.fb-cardBodyFlush_tfGIm{padding:0}.fb-cardFooter_BAcjS{display:flex;align-items:center;justify-content:flex-end;gap:var(--fb-space-100);padding:var(--fb-space-150) var(--fb-space-250);border-top:1px solid var(--fb-border);background:var(--fb-surface-accent)}.fb-cardDivider_-i-Kq{height:1px;background:var(--fb-border);margin:0 var(--fb-space-250)}.fb-cardTitle_mLAib{font-size:var(--fb-font-size-md);font-weight:var(--fb-font-weight-semibold);line-height:1;letter-spacing:-.025em;color:var(--fb-text)}.fb-cardDescription_iLv2K{font-size:var(--fb-font-size-xs);color:var(--fb-text-muted)}.fb-cardContent_HJ92K{padding:var(--fb-padding-card);padding-block-start:0}.fb-stepListWrapper_RTLUk{display:flex;flex-direction:column;font-family:inherit;gap:var(--fb-space-12)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4{color:var(--fb-text-muted);display:flex;flex-direction:row;gap:var(--fb-space-6);padding-bottom:var(--fb-space-2)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-leftContainer_o-gBE{align-items:center;display:flex;flex-direction:column;gap:var(--fb-space-xs);padding-top:var(--fb-space-2)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-leftContainer_o-gBE .fb-circle_3oinV{align-items:center;background-color:transparent;border:var(--fb-border-width) solid var(--fb-border);border-radius:var(--fb-radius-full);color:var(--fb-background);display:flex;justify-content:center;min-block-size:calc(1.25rem - 2 * var(--fb-border-width));min-inline-size:calc(1.25rem - 2 * var(--fb-border-width))}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-leftContainer_o-gBE .fb-circle_3oinV .fb-currentDot_0e9gN{background-color:var(--fb-primary);border-radius:var(--fb-radius-full);height:14px;width:14px}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-leftContainer_o-gBE .fb-connector_bDvRA{background-color:var(--fb-text-muted);block-size:100%;inline-size:1.5px;min-block-size:36px}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-content_u43H4{align-items:start;border-radius:var(--fb-radius-md);color:var(--fb-text-muted);display:flex;flex-direction:row;inline-size:100%;margin-block-end:var(--fb-space-6);padding:var(--fb-space-2) var(--fb-space-6);text-wrap:balance}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-content_u43H4 .fb-stepNumber_c2YRs{color:var(--fb-text-muted);font-size:var(--fb-font-size-sm);font-weight:var(--fb-font-weight-semibold);line-height:var(--fb-line-height-tight)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-content_u43H4 .fb-stepTitle_w5Be8{font-size:var(--fb-font-size-sm);line-height:var(--fb-line-height-normal)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-content_u43H4 .fb-stepLink_sqt2-{color:var(--fb-primary);cursor:pointer;font-weight:var(--fb-font-weight-normal);line-height:var(--fb-line-height-normal);text-decoration:underline}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-content_u43H4 .fb-stepLink_sqt2-:hover{color:var(--fb-primary-hover);text-decoration:underline}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-content_u43H4 .fb-stepLink_sqt2-:focus{outline-offset:2px;outline-style:solid;outline-width:2px;text-decoration:underline}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4 .fb-iconRightContainer_DCjrS{align-self:center;block-size:1.25rem;color:var(--fb-primary);display:flex;inline-size:1.25rem;margin-inline-start:auto}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4.fb-completed_F-mOG .fb-leftContainer_o-gBE .fb-circle_3oinV{background-color:var(--fb-primary);border-color:var(--fb-primary);border-style:solid;border-width:var(--fb-border-width)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4.fb-completed_F-mOG .fb-leftContainer_o-gBE .fb-connector_bDvRA{background-color:var(--fb-primary)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4.fb-completed_F-mOG .fb-content_u43H4,.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4.fb-completed_F-mOG .fb-content_u43H4 .fb-stepNumber_c2YRs{color:var(--fb-text)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4.fb-current_QAO1e .fb-leftContainer_o-gBE .fb-circle_3oinV{border-color:var(--fb-primary);border-style:solid;border-width:var(--fb-border-width)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4.fb-current_QAO1e .fb-content_u43H4{background-color:var(--fb-background);color:var(--fb-text)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4.fb-current_QAO1e .fb-content_u43H4 .fb-stepNumber_c2YRs{color:var(--fb-text)}.fb-stepList_b7ucJ .fb-stepListItem_G8Nh4.fb-inactive_tYqvV .fb-content_u43H4{color:var(--fb-text-muted)}.fb-badge_Q1h-y{display:inline-flex;align-items:center;border-radius:var(--fb-radius-full);border:var(--fb-border-width) solid transparent;padding-inline:var(--fb-space-10);padding-block:var(--fb-space-3);font-size:var(--fb-font-size-xs);font-weight:600;transition:background-color .2s,color .2s;outline:none}.fb-badge_Q1h-y:focus{outline:2px solid var(--fb-primary);outline-offset:2px}.fb-variant-default_7HL-r{background-color:var(--fb-primary);color:var(--fb-text-on-primary)}.fb-variant-default_7HL-r:hover{background-color:var(--fb-primary-hover)}.fb-variant-secondary_knrZF{background-color:var(--fb-neutral-100);color:var(--fb-text)}.fb-variant-secondary_knrZF:hover{background-color:var(--fb-neutral-200)}.fb-variant-destructive_YUruN{background-color:var(--fb-error);color:var(--fb-text-on-primary)}.fb-variant-destructive_YUruN:hover{background-color:var(--fb-error-hover)}.fb-variant-outline_EHC5j{border-color:var(--fb-border);background-color:transparent;color:var(--fb-text)}.fb-variant-outline_EHC5j:hover{background-color:var(--fb-surface-accent)}@keyframes fb-spin_aHSB3{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fb-pulse_FcPkd{0%,to{opacity:1}50%{opacity:.5}}.fb-card_jvOrv{border-color:color-mix(in srgb,var(--fb-primary) 20%,transparent);background-color:color-mix(in srgb,var(--fb-primary) 5%,transparent)}.fb-cardContent_Cnf5t{padding:var(--fb-space-md)}.fb-contentRow_-lops{display:flex;align-items:center;gap:var(--fb-space-12)}.fb-spinner_SkwMR{inline-size:1rem;block-size:1rem;animation:fb-spin_aHSB3 1s linear infinite;color:var(--fb-primary)}.fb-textContent_t3X2X{flex:1}.fb-title_-fTQX{font-size:var(--fb-font-size-sm);font-weight:500;color:var(--fb-primary)}.fb-subtitle_wyptE{font-size:var(--fb-font-size-xs);color:var(--fb-text-muted);margin-block-start:var(--fb-space-2)}.fb-badgeList_xtoNn{display:flex;flex-wrap:wrap;gap:var(--fb-space-2)}.fb-badgeText_TZRdG{font-size:var(--fb-font-size-xs)}.fb-progressSection_XcPgJ{margin-block-start:var(--fb-space-12)}.fb-progressTrack_BUoRx{inline-size:100%;background-color:var(--fb-surface);border-radius:var(--fb-radius-full);block-size:.25rem}.fb-progressBar_5MELx{background-color:var(--fb-primary);block-size:.25rem;border-radius:var(--fb-radius-full);transition:width .3s;animation:fb-pulse_FcPkd 2s ease-in-out infinite}
|
|
3
|
-
|
|
4
|
-
}
|
package/README.md
DELETED
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
# @digiform/wizard
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@digiform/wizard)
|
|
4
|
-
[](https://opensource.org/licenses/MIT)
|
|
5
|
-
|
|
6
|
-
React component for rendering configurable multi-step forms from a JSON config. Zero database dependencies.
|
|
7
|
-
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
npm install @digiform/wizard
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
> Requires React 18+, XState 5+, TanStack Form 1+, Zod 3+, and Radix UI components as peer dependencies. See `peerDependencies` in package.json for exact versions.
|
|
17
|
-
|
|
18
|
-
---
|
|
19
|
-
|
|
20
|
-
## CSS Import
|
|
21
|
-
|
|
22
|
-
> **Required:** You must import the wizard stylesheet before rendering any wizard component.
|
|
23
|
-
|
|
24
|
-
```ts
|
|
25
|
-
import '@digiform/wizard/styles';
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
Add this import once at your app entry point before rendering any wizard.
|
|
29
|
-
|
|
30
|
-
---
|
|
31
|
-
|
|
32
|
-
## Quick Start
|
|
33
|
-
|
|
34
|
-
```tsx
|
|
35
|
-
import { FormWizard } from '@digiform/wizard';
|
|
36
|
-
import '@digiform/wizard/styles';
|
|
37
|
-
|
|
38
|
-
const config = { /* your FormWizardConfig */ };
|
|
39
|
-
|
|
40
|
-
export function MyForm() {
|
|
41
|
-
return (
|
|
42
|
-
<FormWizard
|
|
43
|
-
config={config}
|
|
44
|
-
onSubmit={(data) => console.log(data)}
|
|
45
|
-
/>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
## Framework Setup
|
|
53
|
-
|
|
54
|
-
### Vite
|
|
55
|
-
|
|
56
|
-
1. **Install** the package (see [Installation](#installation) above).
|
|
57
|
-
|
|
58
|
-
2. **Import styles** in `src/main.tsx` (or `src/index.tsx`) before `ReactDOM.createRoot`:
|
|
59
|
-
|
|
60
|
-
```tsx
|
|
61
|
-
// src/main.tsx
|
|
62
|
-
import React from 'react';
|
|
63
|
-
import ReactDOM from 'react-dom/client';
|
|
64
|
-
import '@digiform/wizard/styles'; // must come before App
|
|
65
|
-
import App from './App';
|
|
66
|
-
|
|
67
|
-
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
68
|
-
<React.StrictMode>
|
|
69
|
-
<App />
|
|
70
|
-
</React.StrictMode>
|
|
71
|
-
);
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
3. **Use `<FormWizard>`** in any component — no `vite.config.ts` changes required.
|
|
75
|
-
|
|
76
|
-
```tsx
|
|
77
|
-
// src/components/MyForm.tsx
|
|
78
|
-
import { FormWizard } from '@digiform/wizard';
|
|
79
|
-
import type { FormWizardConfig } from '@digiform/wizard';
|
|
80
|
-
|
|
81
|
-
const config: FormWizardConfig = {
|
|
82
|
-
// your form configuration
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
export function MyForm() {
|
|
86
|
-
return <FormWizard config={config} onSubmit={(data) => console.log(data)} />;
|
|
87
|
-
}
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
---
|
|
91
|
-
|
|
92
|
-
### Next.js
|
|
93
|
-
|
|
94
|
-
1. **Install** the package (see [Installation](#installation) above).
|
|
95
|
-
|
|
96
|
-
2. **Import styles** in `app/layout.tsx` (App Router) or `pages/_app.tsx` (Pages Router):
|
|
97
|
-
|
|
98
|
-
```tsx
|
|
99
|
-
// app/layout.tsx — App Router
|
|
100
|
-
import '@digiform/wizard/styles';
|
|
101
|
-
|
|
102
|
-
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
103
|
-
return (
|
|
104
|
-
<html lang="en">
|
|
105
|
-
<body>{children}</body>
|
|
106
|
-
</html>
|
|
107
|
-
);
|
|
108
|
-
}
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
```tsx
|
|
112
|
-
// pages/_app.tsx — Pages Router
|
|
113
|
-
import '@digiform/wizard/styles';
|
|
114
|
-
import type { AppProps } from 'next/app';
|
|
115
|
-
|
|
116
|
-
export default function App({ Component, pageProps }: AppProps) {
|
|
117
|
-
return <Component {...pageProps} />;
|
|
118
|
-
}
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
3. **Mark the wrapping component with `'use client'`** — FormWizard is a client component.
|
|
122
|
-
|
|
123
|
-
4. Create a form page with the `'use client'` directive:
|
|
124
|
-
|
|
125
|
-
```tsx
|
|
126
|
-
// app/forms/page.tsx
|
|
127
|
-
'use client';
|
|
128
|
-
|
|
129
|
-
import { FormWizard } from '@digiform/wizard';
|
|
130
|
-
import type { FormWizardConfig } from '@digiform/wizard';
|
|
131
|
-
|
|
132
|
-
const config: FormWizardConfig = {
|
|
133
|
-
// your form configuration
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
export default function FormsPage() {
|
|
137
|
-
return <FormWizard config={config} onSubmit={(data) => console.log(data)} />;
|
|
138
|
-
}
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
5. No `next.config.js` changes are required for CSS.
|
|
142
|
-
|
|
143
|
-
---
|
|
144
|
-
|
|
145
|
-
## Related
|
|
146
|
-
|
|
147
|
-
Use [@digiform/builder](https://www.npmjs.com/package/@digiform/builder) to visually create and edit form configs.
|