@cimplify/sdk 0.47.0 → 0.48.0

package/dist/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-1\/2{top:50%}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[200\]{z-index:200}.z-\[9999\]{z-index:9999}.container{width:100%}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.-mt-px{margin-top:-1px}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[5\/2\]{aspect-ratio:5/2}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-square{aspect-ratio:1}.h-\[6px\]{height:6px}.h-\[7px\]{height:7px}.h-\[11px\]{height:11px}.h-\[18px\]{height:18px}.h-\[72px\]{height:72px}.h-\[min\(600px\,calc\(100vh-6rem\)\)\]{height:min(600px,100vh - 6rem)}.h-fit{height:fit-content}.h-full{height:100%}.max-h-\[85vh\]{max-height:85vh}.max-h-\[100px\]{max-height:100px}.min-h-\[20px\]{min-height:20px}.w-1\/2{width:50%}.w-2\/5{width:40%}.w-3\/4{width:75%}.w-3\/5{width:60%}.w-4\/5{width:80%}.w-\[6px\]{width:6px}.w-\[7px\]{width:7px}.w-\[11px\]{width:11px}.w-\[18px\]{width:18px}.w-\[72px\]{width:72px}.w-\[400px\]{width:400px}.w-full{width:100%}.max-w-\[85\%\]{max-width:85%}.max-w-\[260px\]{max-width:260px}.max-w-\[280px\]{max-width:280px}.max-w-\[300px\]{max-width:300px}.max-w-\[calc\(100vw-3rem\)\]{max-width:calc(100vw - 3rem)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.origin-bottom-left{transform-origin:0 100%}.origin-bottom-right{transform-origin:100% 100%}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize-none{resize:none}.list-none{list-style-type:none}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--color-border,oklch(90% 0 0))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--radius,.5rem)}.rounded-\[10px\]{border-radius:10px}.rounded-\[14px\]{border-radius:14px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-tl{border-top-left-radius:var(--radius,.5rem)}.rounded-tr{border-top-right-radius:var(--radius,.5rem)}.rounded-br{border-bottom-right-radius:var(--radius,.5rem)}.rounded-bl{border-bottom-left-radius:var(--radius,.5rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--color-border,oklch(90% 0 0))}.border-foreground{border-color:var(--color-foreground,oklch(15% 0 0))}.border-input{border-color:var(--color-input,oklch(90% 0 0))}.border-muted-foreground\/30{border-color:#6363634d}@supports (color:color-mix(in lab, red, red)){.border-muted-foreground\/30{border-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.border-primary{border-color:var(--color-primary,oklch(50% .1 35))}.border-transparent{border-color:#0000}.border-t-foreground{border-top-color:var(--color-foreground,oklch(15% 0 0))}.bg-background{background-color:var(--color-background,oklch(99% 0 0))}.bg-background\/50{background-color:#fcfcfc80}@supports (color:color-mix(in lab, red, red)){.bg-background\/50{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 50%, transparent)}}.bg-background\/90{background-color:#fcfcfce6}@supports (color:color-mix(in lab, red, red)){.bg-background\/90{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 90%, transparent)}}.bg-background\/92{background-color:#fcfcfceb}@supports (color:color-mix(in lab, red, red)){.bg-background\/92{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 92%, transparent)}}.bg-border{background-color:var(--color-border,oklch(90% 0 0))}.bg-destructive{background-color:var(--color-destructive,oklch(50% .2 25))}.bg-destructive\/10{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.bg-foreground{background-color:var(--color-foreground,oklch(15% 0 0))}.bg-foreground\/40{background-color:#0b0b0b66}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/40{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 40%, transparent)}}.bg-muted{background-color:var(--color-muted,oklch(95% 0 0))}.bg-muted-foreground\/40{background-color:#63636366}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/40{background-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 40%, transparent)}}.bg-muted\/40{background-color:#eee6}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 40%, transparent)}}.bg-muted\/50{background-color:#eeeeee80}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 50%, transparent)}}.bg-primary{background-color:var(--color-primary,oklch(50% .1 35))}.bg-primary\/5{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.bg-primary\/10{background-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-\[inherit\]{font-family:inherit}.text-\[9px\]{font-size:9px}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14\.5px\]{font-size:14.5px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.tracking-\[0\.16em\]{--tw-tracking:.16em;letter-spacing:.16em}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[inherit\]{color:inherit}.text-background{color:var(--color-background,oklch(99% 0 0))}.text-border{color:var(--color-border,oklch(90% 0 0))}.text-destructive{color:var(--color-destructive,oklch(50% .2 25))}.text-destructive-foreground{color:var(--color-destructive-foreground,oklch(99% 0 0))}.text-foreground{color:var(--color-foreground,oklch(15% 0 0))}.text-foreground\/80{color:#0b0b0bcc}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 80%, transparent)}}.text-muted-foreground{color:var(--color-muted-foreground,oklch(50% 0 0))}.text-muted-foreground\/30{color:#6363634d}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/30{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.text-muted-foreground\/40{color:#63636366}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/40{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 40%, transparent)}}.text-muted-foreground\/60{color:#63636399}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/60{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 60%, transparent)}}.text-muted-foreground\/70{color:#636363b3}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/70{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 70%, transparent)}}.text-primary{color:var(--color-primary,oklch(50% .1 35))}.text-primary-foreground{color:var(--color-primary-foreground,oklch(99% 0 0))}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.accent-foreground{accent-color:var(--color-foreground,oklch(15% 0 0))}.accent-primary{accent-color:var(--color-primary,oklch(50% .1 35))}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow-\[0_1px_3px_rgba\(0\,0\,0\,0\.04\)\,0_6px_24px_rgba\(0\,0\,0\,0\.06\)\]{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0000000a), 0 6px 24px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.10\)\,0_4px_12px_rgba\(0\,0\,0\,0\.08\)\]{--tw-shadow:0 1px 4px var(--tw-shadow-color,#0000001a), 0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-background{--tw-ring-color:var(--color-background,oklch(99% 0 0))}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[1px\]{--tw-backdrop-blur:blur(1px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-\[cubic-bezier\(0\.19\,1\,0\.22\,1\)\]{--tw-ease:cubic-bezier(.19,1,.22,1);transition-timing-function:cubic-bezier(.19,1,.22,1)}.\[transition-timing-function\:cubic-bezier\(0\.16\,1\,0\.3\,1\)\]{transition-timing-function:cubic-bezier(.16,1,.3,1)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[cimplify\:checkout\]{cimplify:checkout}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:scale-\[1\.04\]:is(:where(.group):hover *){scale:1.04}.group-hover\:text-foreground:is(:where(.group):hover *){color:var(--color-foreground,oklch(15% 0 0))}.group-hover\:text-primary:is(:where(.group):hover *){color:var(--color-primary,oklch(50% .1 35))}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground,oklch(50% 0 0))}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.focus-within\:border-foreground:focus-within{border-color:var(--color-foreground,oklch(15% 0 0))}.focus-within\:bg-background:focus-within{background-color:var(--color-background,oklch(99% 0 0))}@media (hover:hover){.hover\:-translate-y-\[1px\]:hover{--tw-translate-y:calc(1px * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-px:hover{--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:\!scale-110:hover{--tw-scale-x:110%!important;--tw-scale-y:110%!important;--tw-scale-z:110%!important;scale:var(--tw-scale-x) var(--tw-scale-y)!important}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-\[1\.04\]:hover{scale:1.04}.hover\:scale-\[1\.08\]:hover{scale:1.08}.hover\:border-foreground:hover{border-color:var(--color-foreground,oklch(15% 0 0))}.hover\:border-primary\/20:hover{border-color:#934c3a33}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/20:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 20%, transparent)}}.hover\:border-primary\/40:hover{border-color:#934c3a66}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/40:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 40%, transparent)}}.hover\:border-primary\/50:hover{border-color:#934c3a80}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 50%, transparent)}}.hover\:\!bg-foreground:hover{background-color:var(--color-foreground,oklch(15% 0 0))!important}.hover\:bg-background:hover{background-color:var(--color-background,oklch(99% 0 0))}.hover\:bg-destructive\/10:hover{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/10:hover{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.hover\:bg-foreground\/90:hover{background-color:#0b0b0be6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-foreground\/90:hover{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 90%, transparent)}}.hover\:bg-muted:hover{background-color:var(--color-muted,oklch(95% 0 0))}.hover\:bg-muted\/70:hover{background-color:#eeeeeeb3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/70:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 70%, transparent)}}.hover\:bg-muted\/80:hover{background-color:#eeec}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/80:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 80%, transparent)}}.hover\:bg-primary\/90:hover{background-color:#934c3ae6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 90%, transparent)}}.hover\:\!text-background:hover{color:var(--color-background,oklch(99% 0 0))!important}.hover\:text-destructive:hover{color:var(--color-destructive,oklch(50% .2 25))}.hover\:text-foreground:hover{color:var(--color-foreground,oklch(15% 0 0))}.hover\:text-primary:hover{color:var(--color-primary,oklch(50% .1 35))}.hover\:text-primary\/80:hover{color:#934c3acc}@supports (color:color-mix(in lab, red, red)){.hover\:text-primary\/80:hover{color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 80%, transparent)}}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-\[0_2px_6px_rgba\(0\,0\,0\,0\.04\)\,0_12px_40px_rgba\(0\,0\,0\,0\.10\)\]:hover{--tw-shadow:0 2px 6px var(--tw-shadow-color,#0000000a), 0 12px 40px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-primary:focus{border-color:var(--color-primary,oklch(50% .1 35))}.focus\:border-primary\/30:focus{border-color:#934c3a4d}@supports (color:color-mix(in lab, red, red)){.focus\:border-primary\/30:focus{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 30%, transparent)}}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-primary\/10:focus{--tw-ring-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/10:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.focus\:ring-primary\/20:focus{--tw-ring-color:#934c3a33}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/20:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 20%, transparent)}}.focus\:ring-ring:focus{--tw-ring-color:var(--color-ring,oklch(50% .1 35))}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-\[0\.99\]:active{scale:.99}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.data-\[checked\]\:border-primary[data-checked]{border-color:var(--color-primary,oklch(50% .1 35))}.data-\[checked\]\:bg-primary\/5[data-checked]{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.data-\[checked\]\:bg-primary\/5[data-checked]{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}[open]>.\[\[open\]\>\&\]\:rotate-180{rotate:180deg}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-1\/2{top:50%}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[200\]{z-index:200}.z-\[9999\]{z-index:9999}.container{width:100%}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.-mt-px{margin-top:-1px}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[5\/2\]{aspect-ratio:5/2}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-square{aspect-ratio:1}.h-\[6px\]{height:6px}.h-\[7px\]{height:7px}.h-\[11px\]{height:11px}.h-\[18px\]{height:18px}.h-\[72px\]{height:72px}.h-\[min\(600px\,calc\(100vh-6rem\)\)\]{height:min(600px,100vh - 6rem)}.h-fit{height:fit-content}.h-full{height:100%}.max-h-\[85vh\]{max-height:85vh}.max-h-\[100px\]{max-height:100px}.min-h-\[20px\]{min-height:20px}.w-1\/2{width:50%}.w-2\/5{width:40%}.w-3\/4{width:75%}.w-3\/5{width:60%}.w-4\/5{width:80%}.w-\[6px\]{width:6px}.w-\[7px\]{width:7px}.w-\[11px\]{width:11px}.w-\[18px\]{width:18px}.w-\[72px\]{width:72px}.w-\[400px\]{width:400px}.w-full{width:100%}.max-w-\[85\%\]{max-width:85%}.max-w-\[260px\]{max-width:260px}.max-w-\[280px\]{max-width:280px}.max-w-\[300px\]{max-width:300px}.max-w-\[calc\(100vw-3rem\)\]{max-width:calc(100vw - 3rem)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-bottom-left{transform-origin:0 100%}.origin-bottom-right{transform-origin:100% 100%}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize-none{resize:none}.list-none{list-style-type:none}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--color-border,oklch(90% 0 0))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--radius,.5rem)}.rounded-\[10px\]{border-radius:10px}.rounded-\[14px\]{border-radius:14px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-tl{border-top-left-radius:var(--radius,.5rem)}.rounded-tr{border-top-right-radius:var(--radius,.5rem)}.rounded-br{border-bottom-right-radius:var(--radius,.5rem)}.rounded-bl{border-bottom-left-radius:var(--radius,.5rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--color-border,oklch(90% 0 0))}.border-foreground{border-color:var(--color-foreground,oklch(15% 0 0))}.border-input{border-color:var(--color-input,oklch(90% 0 0))}.border-muted-foreground\/30{border-color:#6363634d}@supports (color:color-mix(in lab, red, red)){.border-muted-foreground\/30{border-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.border-primary{border-color:var(--color-primary,oklch(50% .1 35))}.border-transparent{border-color:#0000}.border-t-foreground{border-top-color:var(--color-foreground,oklch(15% 0 0))}.bg-background{background-color:var(--color-background,oklch(99% 0 0))}.bg-background\/50{background-color:#fcfcfc80}@supports (color:color-mix(in lab, red, red)){.bg-background\/50{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 50%, transparent)}}.bg-background\/90{background-color:#fcfcfce6}@supports (color:color-mix(in lab, red, red)){.bg-background\/90{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 90%, transparent)}}.bg-background\/92{background-color:#fcfcfceb}@supports (color:color-mix(in lab, red, red)){.bg-background\/92{background-color:color-mix(in oklab, var(--color-background,oklch(99% 0 0)) 92%, transparent)}}.bg-border{background-color:var(--color-border,oklch(90% 0 0))}.bg-destructive{background-color:var(--color-destructive,oklch(50% .2 25))}.bg-destructive\/10{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.bg-foreground{background-color:var(--color-foreground,oklch(15% 0 0))}.bg-foreground\/40{background-color:#0b0b0b66}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/40{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 40%, transparent)}}.bg-muted{background-color:var(--color-muted,oklch(95% 0 0))}.bg-muted-foreground\/40{background-color:#63636366}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/40{background-color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 40%, transparent)}}.bg-muted\/40{background-color:#eee6}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 40%, transparent)}}.bg-muted\/50{background-color:#eeeeee80}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 50%, transparent)}}.bg-primary{background-color:var(--color-primary,oklch(50% .1 35))}.bg-primary\/5{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.bg-primary\/10{background-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-\[inherit\]{font-family:inherit}.text-\[9px\]{font-size:9px}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14\.5px\]{font-size:14.5px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.tracking-\[0\.16em\]{--tw-tracking:.16em;letter-spacing:.16em}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[inherit\]{color:inherit}.text-background{color:var(--color-background,oklch(99% 0 0))}.text-border{color:var(--color-border,oklch(90% 0 0))}.text-destructive{color:var(--color-destructive,oklch(50% .2 25))}.text-destructive-foreground{color:var(--color-destructive-foreground,oklch(99% 0 0))}.text-foreground{color:var(--color-foreground,oklch(15% 0 0))}.text-foreground\/80{color:#0b0b0bcc}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 80%, transparent)}}.text-muted-foreground{color:var(--color-muted-foreground,oklch(50% 0 0))}.text-muted-foreground\/30{color:#6363634d}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/30{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 30%, transparent)}}.text-muted-foreground\/40{color:#63636366}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/40{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 40%, transparent)}}.text-muted-foreground\/50{color:#63636380}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/50{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 50%, transparent)}}.text-muted-foreground\/60{color:#63636399}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/60{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 60%, transparent)}}.text-muted-foreground\/70{color:#636363b3}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/70{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 70%, transparent)}}.text-primary{color:var(--color-primary,oklch(50% .1 35))}.text-primary-foreground{color:var(--color-primary-foreground,oklch(99% 0 0))}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.accent-foreground{accent-color:var(--color-foreground,oklch(15% 0 0))}.accent-primary{accent-color:var(--color-primary,oklch(50% .1 35))}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow-\[0_1px_3px_rgba\(0\,0\,0\,0\.04\)\,0_6px_24px_rgba\(0\,0\,0\,0\.06\)\]{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0000000a), 0 6px 24px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.10\)\,0_4px_12px_rgba\(0\,0\,0\,0\.08\)\]{--tw-shadow:0 1px 4px var(--tw-shadow-color,#0000001a), 0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-background{--tw-ring-color:var(--color-background,oklch(99% 0 0))}.ring-primary\/40{--tw-ring-color:#934c3a66}@supports (color:color-mix(in lab, red, red)){.ring-primary\/40{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 40%, transparent)}}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[1px\]{--tw-backdrop-blur:blur(1px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-\[cubic-bezier\(0\.19\,1\,0\.22\,1\)\]{--tw-ease:cubic-bezier(.19,1,.22,1);transition-timing-function:cubic-bezier(.19,1,.22,1)}.\[transition-timing-function\:cubic-bezier\(0\.16\,1\,0\.3\,1\)\]{transition-timing-function:cubic-bezier(.16,1,.3,1)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[cimplify\:checkout\]{cimplify:checkout}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:scale-\[1\.04\]:is(:where(.group):hover *){scale:1.04}.group-hover\:text-foreground:is(:where(.group):hover *){color:var(--color-foreground,oklch(15% 0 0))}.group-hover\:text-primary:is(:where(.group):hover *){color:var(--color-primary,oklch(50% .1 35))}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground,oklch(50% 0 0))}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.focus-within\:border-foreground:focus-within{border-color:var(--color-foreground,oklch(15% 0 0))}.focus-within\:bg-background:focus-within{background-color:var(--color-background,oklch(99% 0 0))}@media (hover:hover){.hover\:-translate-y-\[1px\]:hover{--tw-translate-y:calc(1px * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-px:hover{--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:\!scale-110:hover{--tw-scale-x:110%!important;--tw-scale-y:110%!important;--tw-scale-z:110%!important;scale:var(--tw-scale-x) var(--tw-scale-y)!important}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-\[1\.04\]:hover{scale:1.04}.hover\:scale-\[1\.08\]:hover{scale:1.08}.hover\:border-foreground:hover{border-color:var(--color-foreground,oklch(15% 0 0))}.hover\:border-primary\/20:hover{border-color:#934c3a33}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/20:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 20%, transparent)}}.hover\:border-primary\/40:hover{border-color:#934c3a66}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/40:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 40%, transparent)}}.hover\:border-primary\/50:hover{border-color:#934c3a80}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 50%, transparent)}}.hover\:\!bg-foreground:hover{background-color:var(--color-foreground,oklch(15% 0 0))!important}.hover\:bg-background:hover{background-color:var(--color-background,oklch(99% 0 0))}.hover\:bg-destructive\/10:hover{background-color:#bb061e1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/10:hover{background-color:color-mix(in oklab, var(--color-destructive,oklch(50% .2 25)) 10%, transparent)}}.hover\:bg-foreground\/90:hover{background-color:#0b0b0be6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-foreground\/90:hover{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 90%, transparent)}}.hover\:bg-muted:hover{background-color:var(--color-muted,oklch(95% 0 0))}.hover\:bg-muted\/40:hover{background-color:#eee6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/40:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 40%, transparent)}}.hover\:bg-muted\/70:hover{background-color:#eeeeeeb3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/70:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 70%, transparent)}}.hover\:bg-muted\/80:hover{background-color:#eeec}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/80:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 80%, transparent)}}.hover\:bg-primary\/90:hover{background-color:#934c3ae6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 90%, transparent)}}.hover\:\!text-background:hover{color:var(--color-background,oklch(99% 0 0))!important}.hover\:text-destructive:hover{color:var(--color-destructive,oklch(50% .2 25))}.hover\:text-foreground:hover{color:var(--color-foreground,oklch(15% 0 0))}.hover\:text-primary:hover{color:var(--color-primary,oklch(50% .1 35))}.hover\:text-primary\/80:hover{color:#934c3acc}@supports (color:color-mix(in lab, red, red)){.hover\:text-primary\/80:hover{color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 80%, transparent)}}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-\[0_2px_6px_rgba\(0\,0\,0\,0\.04\)\,0_12px_40px_rgba\(0\,0\,0\,0\.10\)\]:hover{--tw-shadow:0 2px 6px var(--tw-shadow-color,#0000000a), 0 12px 40px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-primary:focus{border-color:var(--color-primary,oklch(50% .1 35))}.focus\:border-primary\/30:focus{border-color:#934c3a4d}@supports (color:color-mix(in lab, red, red)){.focus\:border-primary\/30:focus{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 30%, transparent)}}.focus\:bg-foreground:focus{background-color:var(--color-foreground,oklch(15% 0 0))}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-primary\/10:focus{--tw-ring-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/10:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.focus\:ring-primary\/20:focus{--tw-ring-color:#934c3a33}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/20:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 20%, transparent)}}.focus\:ring-ring:focus{--tw-ring-color:var(--color-ring,oklch(50% .1 35))}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-\[0\.99\]:active{scale:.99}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.aria-selected\:bg-foreground[aria-selected=true]{background-color:var(--color-foreground,oklch(15% 0 0))}.aria-selected\:text-background[aria-selected=true]{color:var(--color-background,oklch(99% 0 0))}@media (hover:hover){.aria-selected\:hover\:bg-foreground\/90[aria-selected=true]:hover{background-color:#0b0b0be6}@supports (color:color-mix(in lab, red, red)){.aria-selected\:hover\:bg-foreground\/90[aria-selected=true]:hover{background-color:color-mix(in oklab, var(--color-foreground,oklch(15% 0 0)) 90%, transparent)}}}.data-\[checked\]\:border-primary[data-checked]{border-color:var(--color-primary,oklch(50% .1 35))}.data-\[checked\]\:bg-primary\/5[data-checked]{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.data-\[checked\]\:bg-primary\/5[data-checked]{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}[open]>.\[\[open\]\>\&\]\:rotate-180{rotate:180deg}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -138,7 +138,9 @@
   "dependencies": {
     "@base-ui/react": "^1.4.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "libphonenumber-js": "1.12.41",
+    "react-day-picker": "^9.14.0",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.4.3"
   }

package/registry/customer-input-fields.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "customer-input-fields.tsx",
-      "content": "\"use client\";\n\nimport React, { useCallback } from \"react\";\nimport { INPUT_FIELD_TYPE, type AddressValue, type DateRangeValue, type LocationValue, type PhoneValue, type ProductInputField, type SignatureValue } from \"@cimplify/sdk\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CustomerInputFieldsClassNames {\n  root?: string;\n  field?: string;\n  label?: string;\n  required?: string;\n  helpText?: string;\n  input?: string;\n  select?: string;\n  textarea?: string;\n  fileInput?: string;\n  colorInput?: string;\n  radioGroup?: string;\n  radioOption?: string;\n  checkboxLabel?: string;\n  priceAdjustment?: string;\n  addressInput?: string;\n  phoneInput?: string;\n  signatureCanvas?: string;\n  multiSelectGroup?: string;\n  multiSelectOption?: string;\n  dateRangeInput?: string;\n  locationInput?: string;\n}\n\nexport interface CustomerInputFieldsProps {\n  fields: ProductInputField[];\n  values: Record<string, unknown>;\n  onChange: (values: Record<string, unknown>) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  className?: string;\n  classNames?: CustomerInputFieldsClassNames;\n}\n\nexport function CustomerInputFields({\n  fields,\n  values,\n  onChange,\n  onFileUpload,\n  className,\n  classNames,\n}: CustomerInputFieldsProps): React.ReactElement | null {\n  const clientContext = useOptionalCimplifyClient();\n\n  if (fields.length === 0) return null;\n\n  const sorted = [...fields].sort((a, b) => a.display_order - b.display_order);\n\n  const setValue = useCallback(\n    (fieldId: string, value: unknown) => {\n      onChange({ ...values, [fieldId]: value });\n    },\n    [values, onChange],\n  );\n\n  const defaultFileUpload = useCallback(\n    async (file: File): Promise<string> => {\n      if (onFileUpload) return onFileUpload(file, {} as ProductInputField);\n      if (!clientContext?.client) throw new Error(\"No upload provider available\");\n      const result = await clientContext.client.uploads.upload(file);\n      if (!result.ok) throw new Error(result.error.message);\n      return result.value.url;\n    },\n    [onFileUpload, clientContext],\n  );\n\n  return (\n    <div data-cimplify-customer-inputs className={cn(\"space-y-4\", className, classNames?.root)}>\n      {sorted.map((field) => (\n        <InputField\n          key={field.id}\n          field={field}\n          value={values[field.id]}\n          onValueChange={(value) => setValue(field.id, value)}\n          onFileUpload={onFileUpload ?? (clientContext?.client ? (_file, _field) => defaultFileUpload(_file) : undefined)}\n          classNames={classNames}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction InputField({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const hasPriceAdjustment = field.price_adjustment != null && parsePrice(field.price_adjustment) > 0;\n\n  return (\n    <div data-cimplify-customer-input data-field-type={field.field_type} className={classNames?.field}>\n      <div className=\"flex items-center gap-2 mb-1.5\">\n        <label className={cn(\"text-sm font-semibold\", classNames?.label)}>\n          {field.name}\n        </label>\n        {field.is_required && (\n          <span className={cn(\"text-xs text-destructive\", classNames?.required)}>Required</span>\n        )}\n        {hasPriceAdjustment && (\n          <span className={cn(\"text-xs text-muted-foreground\", classNames?.priceAdjustment)}>\n            +<Price amount={field.price_adjustment!} />\n          </span>\n        )}\n      </div>\n\n      {field.help_text && (\n        <p className={cn(\"text-xs text-muted-foreground mb-1.5\", classNames?.helpText)}>\n          {field.help_text}\n        </p>\n      )}\n\n      <FieldInput\n        field={field}\n        value={value}\n        onValueChange={onValueChange}\n        onFileUpload={onFileUpload}\n        classNames={classNames}\n      />\n    </div>\n  );\n}\n\nfunction FieldInput({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const inputClass = cn(\n    \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring\",\n    classNames?.input,\n  );\n\n  switch (field.field_type) {\n    case INPUT_FIELD_TYPE.Text:\n    case INPUT_FIELD_TYPE.Url:\n      return (\n        <input\n          type={field.field_type === INPUT_FIELD_TYPE.Url ? \"url\" : \"text\"}\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          maxLength={field.validation?.max_length ?? undefined}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Textarea:\n      return (\n        <textarea\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          maxLength={field.validation?.max_length ?? undefined}\n          rows={3}\n          className={cn(inputClass, \"resize-none\", classNames?.textarea)}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Number:\n      return (\n        <input\n          type=\"number\"\n          value={typeof value === \"number\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value ? parseFloat(e.target.value) : undefined)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          min={field.validation?.min_value ?? undefined}\n          max={field.validation?.max_value ?? undefined}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Select:\n      return (\n        <select\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value || undefined)}\n          required={field.is_required}\n          className={cn(inputClass, classNames?.select)}\n        >\n          <option value=\"\">{field.placeholder || \"Select...\"}</option>\n          {(field.options || []).map((opt) => (\n            <option key={opt} value={opt}>{opt}</option>\n          ))}\n        </select>\n      );\n\n    case INPUT_FIELD_TYPE.Radio:\n      return (\n        <div className={cn(\"space-y-2\", classNames?.radioGroup)}>\n          {(field.options || []).map((opt) => (\n            <label\n              key={opt}\n              className={cn(\n                \"flex items-center gap-2 text-sm cursor-pointer\",\n                classNames?.radioOption,\n              )}\n            >\n              <input\n                type=\"radio\"\n                name={field.id}\n                value={opt}\n                checked={value === opt}\n                onChange={() => onValueChange(opt)}\n                className=\"accent-primary\"\n              />\n              {opt}\n            </label>\n          ))}\n        </div>\n      );\n\n    case INPUT_FIELD_TYPE.Checkbox:\n      return (\n        <label className={cn(\"flex items-center gap-2 text-sm cursor-pointer\", classNames?.checkboxLabel)}>\n          <input\n            type=\"checkbox\"\n            checked={value === true}\n            onChange={(e) => onValueChange(e.target.checked)}\n            className=\"accent-primary w-4 h-4\"\n          />\n          {field.placeholder || field.name}\n        </label>\n      );\n\n    case INPUT_FIELD_TYPE.Color:\n      return (\n        <input\n          type=\"color\"\n          value={typeof value === \"string\" ? value : \"#000000\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          className={cn(\"w-12 h-10 rounded-md border border-input cursor-pointer\", classNames?.colorInput)}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Date:\n      return (\n        <input\n          type=\"date\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value || undefined)}\n          required={field.is_required}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.File:\n    case INPUT_FIELD_TYPE.Image:\n      return (\n        <FileUploadInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          onFileUpload={onFileUpload}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Email:\n      return (\n        <input\n          type=\"email\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder || \"email@example.com\"}\n          required={field.is_required}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.DateTime: {\n      const dtLocalValue = typeof value === \"string\" && value.includes(\"T\")\n        ? value.slice(0, 16)\n        : typeof value === \"string\" ? value : \"\";\n      return (\n        <input\n          type=\"datetime-local\"\n          value={dtLocalValue}\n          onChange={(e) => {\n            if (!e.target.value) { onValueChange(undefined); return; }\n            const date = new Date(e.target.value);\n            onValueChange(Number.isNaN(date.getTime()) ? e.target.value : date.toISOString());\n          }}\n          required={field.is_required}\n          className={inputClass}\n        />\n      );\n    }\n\n    case INPUT_FIELD_TYPE.Time:\n      return (\n        <input\n          type=\"time\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value || undefined)}\n          required={field.is_required}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.MultiSelect:\n      return (\n        <MultiSelectInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.DateRange:\n      return (\n        <DateRangeInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Address:\n      return (\n        <AddressInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Location:\n      return (\n        <LocationInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Phone:\n      return (\n        <PhoneInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Signature:\n      return (\n        <SignatureInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    default:\n      return (\n        <input\n          type=\"text\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          className={inputClass}\n        />\n      );\n  }\n}\n\nfunction FileUploadInput({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const [isUploading, setIsUploading] = React.useState(false);\n  const fileUrl = typeof value === \"string\" ? value : undefined;\n  const acceptedFormats = field.validation?.accepted_formats;\n  const accept = acceptedFormats\n    ? acceptedFormats.map((f) => `.${f}`).join(\",\")\n    : field.field_type === INPUT_FIELD_TYPE.Image\n      ? \"image/*\"\n      : undefined;\n\n  const handleFile = async (file: File) => {\n    if (!onFileUpload) return;\n\n    if (field.validation?.max_size_mb) {\n      const maxBytes = field.validation.max_size_mb * 1024 * 1024;\n      if (file.size > maxBytes) {\n        return;\n      }\n    }\n\n    setIsUploading(true);\n    try {\n      const url = await onFileUpload(file, field);\n      onValueChange(url);\n    } finally {\n      setIsUploading(false);\n    }\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.fileInput)}>\n      {fileUrl ? (\n        <div className=\"flex items-center gap-3\">\n          {field.field_type === INPUT_FIELD_TYPE.Image && (\n            <img src={fileUrl} alt=\"Uploaded\" className=\"w-16 h-16 object-cover rounded-md border border-border\" />\n          )}\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-sm text-foreground truncate\">{fileUrl.split(\"/\").pop()}</p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onValueChange(undefined)}\n            className=\"text-xs text-muted-foreground hover:text-destructive transition-colors\"\n          >\n            Remove\n          </button>\n        </div>\n      ) : (\n        <label className=\"flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-border rounded-lg cursor-pointer hover:border-primary/40 transition-colors\">\n          <input\n            type=\"file\"\n            accept={accept}\n            onChange={(e) => {\n              const file = e.target.files?.[0];\n              if (file) void handleFile(file);\n            }}\n            className=\"hidden\"\n            disabled={isUploading}\n          />\n          {isUploading ? (\n            <span className=\"text-sm text-muted-foreground\">Uploading...</span>\n          ) : (\n            <>\n              <span className=\"text-sm text-muted-foreground\">\n                {field.placeholder || `Upload ${field.field_type === INPUT_FIELD_TYPE.Image ? \"image\" : \"file\"}`}\n              </span>\n              {acceptedFormats && (\n                <span className=\"text-xs text-muted-foreground/60 mt-1\">\n                  {acceptedFormats.map((f) => f.toUpperCase()).join(\", \")}\n                  {field.validation?.max_size_mb && ` · Max ${field.validation.max_size_mb}MB`}\n                </span>\n              )}\n            </>\n          )}\n        </label>\n      )}\n    </div>\n  );\n}\n\nfunction MultiSelectInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const selected = Array.isArray(value) ? (value as string[]) : [];\n  const options = field.options || [];\n  const maxSelections = field.validation?.max_selections;\n\n  const toggle = (opt: string) => {\n    const next = selected.includes(opt)\n      ? selected.filter((s) => s !== opt)\n      : maxSelections && selected.length >= maxSelections\n        ? selected\n        : [...selected, opt];\n    onValueChange(next.length > 0 ? next : undefined);\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.multiSelectGroup)}>\n      {options.map((opt) => (\n        <label\n          key={opt}\n          className={cn(\n            \"flex items-center gap-2 text-sm cursor-pointer\",\n            classNames?.multiSelectOption,\n          )}\n        >\n          <input\n            type=\"checkbox\"\n            checked={selected.includes(opt)}\n            onChange={() => toggle(opt)}\n            className=\"accent-primary w-4 h-4\"\n          />\n          {opt}\n        </label>\n      ))}\n      {maxSelections && (\n        <p className=\"text-xs text-muted-foreground\">\n          {selected.length}/{maxSelections} selected\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction DateRangeInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const range = (value && typeof value === \"object\" ? value : {}) as DateRangeValue;\n\n  const update = (key: \"start\" | \"end\", v: string) => {\n    const next = { ...range, [key]: v };\n    onValueChange(next.start || next.end ? next : undefined);\n  };\n\n  return (\n    <div className={cn(\"grid grid-cols-2 gap-3\", classNames?.dateRangeInput)}>\n      <div>\n        <label className=\"text-xs text-muted-foreground mb-1 block\">Start</label>\n        <input\n          type=\"date\"\n          value={range.start || \"\"}\n          onChange={(e) => update(\"start\", e.target.value)}\n          required={field.is_required}\n          className={inputClass}\n        />\n      </div>\n      <div>\n        <label className=\"text-xs text-muted-foreground mb-1 block\">End</label>\n        <input\n          type=\"date\"\n          value={range.end || \"\"}\n          onChange={(e) => update(\"end\", e.target.value)}\n          required={field.is_required}\n          className={inputClass}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction AddressInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const clientContext = useOptionalCimplifyClient();\n  const addr = (value && typeof value === \"object\" ? value : null) as AddressValue | null;\n  const [inputText, setInputText] = React.useState(addr?.formatted_address ?? \"\");\n  const [suggestions, setSuggestions] = React.useState<Array<{ description: string; place_id: string }>>([]);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const seqRef = React.useRef(0);\n  const sessionTokenRef = React.useRef(createSessionToken());\n  const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n      seqRef.current += 1;\n    };\n  }, []);\n\n  const fetchSuggestions = React.useCallback(async (query: string) => {\n    const client = clientContext?.client;\n    if (!client || query.length < 3) {\n      setSuggestions([]);\n      setIsOpen(false);\n      return;\n    }\n\n    const seq = ++seqRef.current;\n    const result = await client.places.autocomplete(query, sessionTokenRef.current);\n    if (seqRef.current !== seq) return;\n\n    if (result.ok && result.value.predictions.length > 0) {\n      setSuggestions(result.value.predictions);\n      setHighlightedIndex(0);\n      setIsOpen(true);\n    } else {\n      setSuggestions([]);\n      setIsOpen(false);\n    }\n  }, [clientContext]);\n\n  const handleInputChange = (nextValue: string) => {\n    setInputText(nextValue);\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);\n  };\n\n  const selectSuggestion = React.useCallback(async (suggestion: { description: string; place_id: string }) => {\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n\n    const fallback = suggestion.description.split(\",\")[0]?.trim() || suggestion.description;\n    setInputText(fallback);\n    setSuggestions([]);\n    setIsOpen(false);\n\n    const client = clientContext?.client;\n    if (!client) return;\n\n    const result = await client.places.details(suggestion.place_id, sessionTokenRef.current);\n    sessionTokenRef.current = createSessionToken();\n\n    if (result.ok) {\n      const d = result.value;\n      const addressValue: AddressValue = {\n        formatted_address: d.formatted_address || fallback,\n        street_address: d.street_address,\n        apartment: d.apartment,\n        city: d.city,\n        region: d.region,\n        postal_code: d.postal_code,\n        country: d.country,\n        latitude: d.latitude,\n        longitude: d.longitude,\n        place_id: d.place_id,\n      };\n      setInputText(addressValue.formatted_address);\n      onValueChange(addressValue);\n    }\n  }, [clientContext, onValueChange]);\n\n  return (\n    <div className={cn(\"space-y-2 relative\", classNames?.addressInput)}>\n      <input\n        type=\"text\"\n        value={inputText}\n        onChange={(e) => handleInputChange(e.target.value)}\n        onFocus={() => { if (suggestions.length > 0) setIsOpen(true); }}\n        onBlur={() => { blurTimeoutRef.current = setTimeout(() => setIsOpen(false), 120); }}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") { setIsOpen(false); return; }\n          if (!isOpen || suggestions.length === 0) return;\n          if (e.key === \"ArrowDown\") { e.preventDefault(); setHighlightedIndex((i) => i < suggestions.length - 1 ? i + 1 : 0); }\n          else if (e.key === \"ArrowUp\") { e.preventDefault(); setHighlightedIndex((i) => i > 0 ? i - 1 : suggestions.length - 1); }\n          else if (e.key === \"Enter\" && highlightedIndex >= 0) { e.preventDefault(); void selectSuggestion(suggestions[highlightedIndex]); }\n        }}\n        placeholder={field.placeholder || \"Search for an address...\"}\n        required={field.is_required}\n        autoComplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-expanded={isOpen && suggestions.length > 0}\n        className={inputClass}\n      />\n      {isOpen && suggestions.length > 0 && (\n        <div role=\"listbox\" className=\"absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-border bg-background shadow-lg\">\n          {suggestions.map((s, i) => (\n            <button\n              key={s.place_id}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={i === highlightedIndex}\n              onMouseDown={(e) => { e.preventDefault(); void selectSuggestion(s); }}\n              className={cn(\"block w-full px-3 py-2.5 text-left text-sm transition-colors\", i === highlightedIndex ? \"bg-muted text-foreground\" : \"text-foreground hover:bg-muted/70\")}\n            >\n              {s.description}\n            </button>\n          ))}\n        </div>\n      )}\n      {addr && (\n        <input\n          type=\"text\"\n          value={addr.apartment || \"\"}\n          onChange={(e) => onValueChange({ ...addr, apartment: e.target.value || undefined })}\n          placeholder=\"Apt, suite, unit (optional)\"\n          className={inputClass}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction LocationInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const clientContext = useOptionalCimplifyClient();\n  const loc = (value && typeof value === \"object\" ? value : null) as LocationValue | null;\n  const [inputText, setInputText] = React.useState(loc?.label ?? \"\");\n  const [suggestions, setSuggestions] = React.useState<Array<{ description: string; place_id: string }>>([]);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const seqRef = React.useRef(0);\n  const sessionTokenRef = React.useRef(createSessionToken());\n  const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n      seqRef.current += 1;\n    };\n  }, []);\n\n  const fetchSuggestions = React.useCallback(async (query: string) => {\n    const client = clientContext?.client;\n    if (!client || query.length < 3) {\n      setSuggestions([]);\n      setIsOpen(false);\n      return;\n    }\n\n    const seq = ++seqRef.current;\n    const result = await client.places.autocomplete(query, sessionTokenRef.current);\n    if (seqRef.current !== seq) return;\n\n    if (result.ok && result.value.predictions.length > 0) {\n      setSuggestions(result.value.predictions);\n      setHighlightedIndex(0);\n      setIsOpen(true);\n    } else {\n      setSuggestions([]);\n      setIsOpen(false);\n    }\n  }, [clientContext]);\n\n  const handleInputChange = (nextValue: string) => {\n    setInputText(nextValue);\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);\n  };\n\n  const selectSuggestion = React.useCallback(async (suggestion: { description: string; place_id: string }) => {\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n\n    const label = suggestion.description.split(\",\")[0]?.trim() || suggestion.description;\n    setInputText(label);\n    setSuggestions([]);\n    setIsOpen(false);\n\n    const client = clientContext?.client;\n    if (!client) return;\n\n    const result = await client.places.details(suggestion.place_id, sessionTokenRef.current);\n    sessionTokenRef.current = createSessionToken();\n\n    if (result.ok) {\n      const d = result.value;\n      onValueChange({\n        latitude: d.latitude,\n        longitude: d.longitude,\n        label: d.formatted_address || label,\n      } satisfies LocationValue);\n      setInputText(d.formatted_address || label);\n    }\n  }, [clientContext, onValueChange]);\n\n  return (\n    <div className={cn(\"relative\", classNames?.locationInput)}>\n      <input\n        type=\"text\"\n        value={inputText}\n        onChange={(e) => handleInputChange(e.target.value)}\n        onFocus={() => { if (suggestions.length > 0) setIsOpen(true); }}\n        onBlur={() => { blurTimeoutRef.current = setTimeout(() => setIsOpen(false), 120); }}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") { setIsOpen(false); return; }\n          if (!isOpen || suggestions.length === 0) return;\n          if (e.key === \"ArrowDown\") { e.preventDefault(); setHighlightedIndex((i) => i < suggestions.length - 1 ? i + 1 : 0); }\n          else if (e.key === \"ArrowUp\") { e.preventDefault(); setHighlightedIndex((i) => i > 0 ? i - 1 : suggestions.length - 1); }\n          else if (e.key === \"Enter\" && highlightedIndex >= 0) { e.preventDefault(); void selectSuggestion(suggestions[highlightedIndex]); }\n        }}\n        placeholder={field.placeholder || \"Search for a location...\"}\n        required={field.is_required}\n        autoComplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-expanded={isOpen && suggestions.length > 0}\n        className={inputClass}\n      />\n      {isOpen && suggestions.length > 0 && (\n        <div role=\"listbox\" className=\"absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-border bg-background shadow-lg\">\n          {suggestions.map((s, i) => (\n            <button\n              key={s.place_id}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={i === highlightedIndex}\n              onMouseDown={(e) => { e.preventDefault(); void selectSuggestion(s); }}\n              className={cn(\"block w-full px-3 py-2.5 text-left text-sm transition-colors\", i === highlightedIndex ? \"bg-muted text-foreground\" : \"text-foreground hover:bg-muted/70\")}\n            >\n              {s.description}\n            </button>\n          ))}\n        </div>\n      )}\n      {loc && (\n        <p className=\"text-xs text-muted-foreground mt-1\">\n          {loc.latitude.toFixed(4)}, {loc.longitude.toFixed(4)}\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction PhoneInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const phone = (value && typeof value === \"object\" ? value : null) as PhoneValue | null;\n  const [code, setCode] = React.useState(phone?.country_code ?? \"+1\");\n  const [number, setNumber] = React.useState(phone?.number ?? \"\");\n\n  const update = (nextCode: string, nextNumber: string) => {\n    setCode(nextCode);\n    setNumber(nextNumber);\n    if (nextNumber) {\n      onValueChange({\n        country_code: nextCode,\n        number: nextNumber,\n        formatted: `${nextCode} ${nextNumber}`,\n      } satisfies PhoneValue);\n    } else {\n      onValueChange(undefined);\n    }\n  };\n\n  return (\n    <div className={cn(\"flex gap-2\", classNames?.phoneInput)}>\n      <input\n        type=\"text\"\n        value={code}\n        onChange={(e) => update(e.target.value, number)}\n        placeholder=\"+1\"\n        className={cn(inputClass, \"w-20 shrink-0\")}\n      />\n      <input\n        type=\"tel\"\n        value={number}\n        onChange={(e) => update(code, e.target.value)}\n        placeholder={field.placeholder || \"Phone number\"}\n        required={field.is_required}\n        className={inputClass}\n      />\n    </div>\n  );\n}\n\nfunction SignatureInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const sig = (value && typeof value === \"object\" ? value : null) as SignatureValue | null;\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n  const isDrawing = React.useRef(false);\n\n  const getCtx = () => canvasRef.current?.getContext(\"2d\") ?? null;\n\n  const startDraw = (e: React.PointerEvent) => {\n    const ctx = getCtx();\n    if (!ctx) return;\n    isDrawing.current = true;\n    const rect = canvasRef.current!.getBoundingClientRect();\n    ctx.beginPath();\n    ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);\n    canvasRef.current!.setPointerCapture(e.pointerId);\n  };\n\n  const draw = (e: React.PointerEvent) => {\n    if (!isDrawing.current) return;\n    const ctx = getCtx();\n    if (!ctx) return;\n    const rect = canvasRef.current!.getBoundingClientRect();\n    ctx.lineWidth = 2;\n    ctx.lineCap = \"round\";\n    const style = getComputedStyle(canvasRef.current!);\n    ctx.strokeStyle = style.color || \"#000\";\n    ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);\n    ctx.stroke();\n  };\n\n  const endDraw = () => {\n    if (!isDrawing.current) return;\n    isDrawing.current = false;\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    onValueChange({\n      data_url: canvas.toDataURL(\"image/png\"),\n      signer_name: sig?.signer_name,\n    } satisfies SignatureValue);\n  };\n\n  const clear = () => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext(\"2d\");\n    if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);\n    onValueChange(undefined);\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.signatureCanvas)}>\n      <div className=\"relative rounded-md border border-input overflow-hidden\">\n        <canvas\n          ref={canvasRef}\n          width={400}\n          height={150}\n          className=\"w-full touch-none cursor-crosshair bg-background text-foreground\"\n          onPointerDown={startDraw}\n          onPointerMove={draw}\n          onPointerUp={endDraw}\n          onPointerLeave={endDraw}\n        />\n        {sig?.data_url && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            className=\"absolute top-1.5 right-1.5 text-xs text-muted-foreground hover:text-destructive transition-colors\"\n          >\n            Clear\n          </button>\n        )}\n      </div>\n      {!sig?.data_url && (\n        <p className=\"text-xs text-muted-foreground\">\n          {field.placeholder || \"Draw your signature above\"}\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction createSessionToken(): string {\n  if (typeof crypto !== \"undefined\" && crypto.randomUUID) {\n    return crypto.randomUUID();\n  }\n  return `places_${Date.now()}_${Math.random().toString(16).slice(2)}`;\n}\n"
+      "content": "\"use client\";\n\nimport React, { useCallback } from \"react\";\nimport { INPUT_FIELD_TYPE, type AddressValue, type DateRangeValue, type LocationValue, type PhoneValue, type ProductInputField, type SignatureValue } from \"@cimplify/sdk\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { DatePicker } from \"./date-picker\";\nimport { TimePicker } from \"./time-picker\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CustomerInputFieldsClassNames {\n  root?: string;\n  field?: string;\n  label?: string;\n  required?: string;\n  helpText?: string;\n  input?: string;\n  select?: string;\n  textarea?: string;\n  fileInput?: string;\n  colorInput?: string;\n  radioGroup?: string;\n  radioOption?: string;\n  checkboxLabel?: string;\n  priceAdjustment?: string;\n  addressInput?: string;\n  phoneInput?: string;\n  signatureCanvas?: string;\n  multiSelectGroup?: string;\n  multiSelectOption?: string;\n  dateRangeInput?: string;\n  locationInput?: string;\n}\n\nexport interface CustomerInputFieldsProps {\n  fields: ProductInputField[];\n  values: Record<string, unknown>;\n  onChange: (values: Record<string, unknown>) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  className?: string;\n  classNames?: CustomerInputFieldsClassNames;\n}\n\nexport function CustomerInputFields({\n  fields,\n  values,\n  onChange,\n  onFileUpload,\n  className,\n  classNames,\n}: CustomerInputFieldsProps): React.ReactElement | null {\n  const clientContext = useOptionalCimplifyClient();\n\n  if (fields.length === 0) return null;\n\n  const sorted = [...fields].sort((a, b) => a.display_order - b.display_order);\n\n  const setValue = useCallback(\n    (fieldId: string, value: unknown) => {\n      onChange({ ...values, [fieldId]: value });\n    },\n    [values, onChange],\n  );\n\n  const defaultFileUpload = useCallback(\n    async (file: File): Promise<string> => {\n      if (onFileUpload) return onFileUpload(file, {} as ProductInputField);\n      if (!clientContext?.client) throw new Error(\"No upload provider available\");\n      const result = await clientContext.client.uploads.upload(file);\n      if (!result.ok) throw new Error(result.error.message);\n      return result.value.url;\n    },\n    [onFileUpload, clientContext],\n  );\n\n  return (\n    <div data-cimplify-customer-inputs className={cn(\"space-y-4\", className, classNames?.root)}>\n      {sorted.map((field) => (\n        <InputField\n          key={field.id}\n          field={field}\n          value={values[field.id]}\n          onValueChange={(value) => setValue(field.id, value)}\n          onFileUpload={onFileUpload ?? (clientContext?.client ? (_file, _field) => defaultFileUpload(_file) : undefined)}\n          classNames={classNames}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction InputField({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const hasPriceAdjustment = field.price_adjustment != null && parsePrice(field.price_adjustment) > 0;\n\n  return (\n    <div data-cimplify-customer-input data-field-type={field.field_type} className={classNames?.field}>\n      <div className=\"flex items-center gap-2 mb-1.5\">\n        <label className={cn(\"text-sm font-semibold\", classNames?.label)}>\n          {field.name}\n        </label>\n        {field.is_required && (\n          <span className={cn(\"text-xs text-destructive\", classNames?.required)}>Required</span>\n        )}\n        {hasPriceAdjustment && (\n          <span className={cn(\"text-xs text-muted-foreground\", classNames?.priceAdjustment)}>\n            +<Price amount={field.price_adjustment!} />\n          </span>\n        )}\n      </div>\n\n      {field.help_text && (\n        <p className={cn(\"text-xs text-muted-foreground mb-1.5\", classNames?.helpText)}>\n          {field.help_text}\n        </p>\n      )}\n\n      <FieldInput\n        field={field}\n        value={value}\n        onValueChange={onValueChange}\n        onFileUpload={onFileUpload}\n        classNames={classNames}\n      />\n    </div>\n  );\n}\n\nfunction FieldInput({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const inputClass = cn(\n    \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring\",\n    classNames?.input,\n  );\n\n  switch (field.field_type) {\n    case INPUT_FIELD_TYPE.Text:\n    case INPUT_FIELD_TYPE.Url:\n      return (\n        <input\n          type={field.field_type === INPUT_FIELD_TYPE.Url ? \"url\" : \"text\"}\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          maxLength={field.validation?.max_length ?? undefined}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Textarea:\n      return (\n        <textarea\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          maxLength={field.validation?.max_length ?? undefined}\n          rows={3}\n          className={cn(inputClass, \"resize-none\", classNames?.textarea)}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Number:\n      return (\n        <input\n          type=\"number\"\n          value={typeof value === \"number\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value ? parseFloat(e.target.value) : undefined)}\n          placeholder={field.placeholder}\n          required={field.is_required}\n          min={field.validation?.min_value ?? undefined}\n          max={field.validation?.max_value ?? undefined}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Select:\n      return (\n        <select\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value || undefined)}\n          required={field.is_required}\n          className={cn(inputClass, classNames?.select)}\n        >\n          <option value=\"\">{field.placeholder || \"Select...\"}</option>\n          {(field.options || []).map((opt) => (\n            <option key={opt} value={opt}>{opt}</option>\n          ))}\n        </select>\n      );\n\n    case INPUT_FIELD_TYPE.Radio:\n      return (\n        <div className={cn(\"space-y-2\", classNames?.radioGroup)}>\n          {(field.options || []).map((opt) => (\n            <label\n              key={opt}\n              className={cn(\n                \"flex items-center gap-2 text-sm cursor-pointer\",\n                classNames?.radioOption,\n              )}\n            >\n              <input\n                type=\"radio\"\n                name={field.id}\n                value={opt}\n                checked={value === opt}\n                onChange={() => onValueChange(opt)}\n                className=\"accent-primary\"\n              />\n              {opt}\n            </label>\n          ))}\n        </div>\n      );\n\n    case INPUT_FIELD_TYPE.Checkbox:\n      return (\n        <label className={cn(\"flex items-center gap-2 text-sm cursor-pointer\", classNames?.checkboxLabel)}>\n          <input\n            type=\"checkbox\"\n            checked={value === true}\n            onChange={(e) => onValueChange(e.target.checked)}\n            className=\"accent-primary w-4 h-4\"\n          />\n          {field.placeholder || field.name}\n        </label>\n      );\n\n    case INPUT_FIELD_TYPE.Color:\n      return (\n        <input\n          type=\"color\"\n          value={typeof value === \"string\" ? value : \"#000000\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          className={cn(\"w-12 h-10 rounded-md border border-input cursor-pointer\", classNames?.colorInput)}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Date:\n      return (\n        <DatePicker\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(next) => onValueChange(next || undefined)}\n          required={field.is_required}\n          placeholder={field.placeholder ?? \"Select a date\"}\n          aria-label={field.name}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.File:\n    case INPUT_FIELD_TYPE.Image:\n      return (\n        <FileUploadInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          onFileUpload={onFileUpload}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Email:\n      return (\n        <input\n          type=\"email\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder || \"email@example.com\"}\n          required={field.is_required}\n          className={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.DateTime: {\n      const stringValue = typeof value === \"string\" ? value : \"\";\n      const [datePart, timePartRaw] = stringValue.includes(\"T\")\n        ? stringValue.split(\"T\", 2)\n        : [stringValue, \"\"];\n      const timePart = (timePartRaw ?? \"\").slice(0, 5);\n      const commit = (nextDate: string, nextTime: string): void => {\n        if (!nextDate && !nextTime) {\n          onValueChange(undefined);\n          return;\n        }\n        if (!nextDate) {\n          onValueChange(`${nextTime}`);\n          return;\n        }\n        const combined = `${nextDate}T${nextTime || \"00:00\"}`;\n        const parsed = new Date(combined);\n        onValueChange(Number.isNaN(parsed.getTime()) ? combined : parsed.toISOString());\n      };\n      return (\n        <div className=\"grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-2\">\n          <DatePicker\n            value={datePart ?? \"\"}\n            onChange={(next) => commit(next, timePart)}\n            placeholder={field.placeholder ?? \"Select a date\"}\n            aria-label={`${field.name} date`}\n            required={field.is_required}\n          />\n          <TimePicker\n            value={timePart}\n            onChange={(next) => commit(datePart ?? \"\", next)}\n            placeholder=\"Time\"\n            aria-label={`${field.name} time`}\n          />\n        </div>\n      );\n    }\n\n    case INPUT_FIELD_TYPE.Time:\n      return (\n        <TimePicker\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(next) => onValueChange(next || undefined)}\n          required={field.is_required}\n          placeholder={field.placeholder ?? \"Select a time\"}\n          aria-label={field.name}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.MultiSelect:\n      return (\n        <MultiSelectInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.DateRange:\n      return (\n        <DateRangeInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Address:\n      return (\n        <AddressInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Location:\n      return (\n        <LocationInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Phone:\n      return (\n        <PhoneInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n          inputClass={inputClass}\n        />\n      );\n\n    case INPUT_FIELD_TYPE.Signature:\n      return (\n        <SignatureInput\n          field={field}\n          value={value}\n          onValueChange={onValueChange}\n          classNames={classNames}\n        />\n      );\n\n    default:\n      return (\n        <input\n          type=\"text\"\n          value={typeof value === \"string\" ? value : \"\"}\n          onChange={(e) => onValueChange(e.target.value)}\n          placeholder={field.placeholder}\n          className={inputClass}\n        />\n      );\n  }\n}\n\nfunction FileUploadInput({\n  field,\n  value,\n  onValueChange,\n  onFileUpload,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const [isUploading, setIsUploading] = React.useState(false);\n  const fileUrl = typeof value === \"string\" ? value : undefined;\n  const acceptedFormats = field.validation?.accepted_formats;\n  const accept = acceptedFormats\n    ? acceptedFormats.map((f) => `.${f}`).join(\",\")\n    : field.field_type === INPUT_FIELD_TYPE.Image\n      ? \"image/*\"\n      : undefined;\n\n  const handleFile = async (file: File) => {\n    if (!onFileUpload) return;\n\n    if (field.validation?.max_size_mb) {\n      const maxBytes = field.validation.max_size_mb * 1024 * 1024;\n      if (file.size > maxBytes) {\n        return;\n      }\n    }\n\n    setIsUploading(true);\n    try {\n      const url = await onFileUpload(file, field);\n      onValueChange(url);\n    } finally {\n      setIsUploading(false);\n    }\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.fileInput)}>\n      {fileUrl ? (\n        <div className=\"flex items-center gap-3\">\n          {field.field_type === INPUT_FIELD_TYPE.Image && (\n            <img src={fileUrl} alt=\"Uploaded\" className=\"w-16 h-16 object-cover rounded-md border border-border\" />\n          )}\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-sm text-foreground truncate\">{fileUrl.split(\"/\").pop()}</p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onValueChange(undefined)}\n            className=\"text-xs text-muted-foreground hover:text-destructive transition-colors\"\n          >\n            Remove\n          </button>\n        </div>\n      ) : (\n        <label className=\"flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-border rounded-lg cursor-pointer hover:border-primary/40 transition-colors\">\n          <input\n            type=\"file\"\n            accept={accept}\n            onChange={(e) => {\n              const file = e.target.files?.[0];\n              if (file) void handleFile(file);\n            }}\n            className=\"hidden\"\n            disabled={isUploading}\n          />\n          {isUploading ? (\n            <span className=\"text-sm text-muted-foreground\">Uploading...</span>\n          ) : (\n            <>\n              <span className=\"text-sm text-muted-foreground\">\n                {field.placeholder || `Upload ${field.field_type === INPUT_FIELD_TYPE.Image ? \"image\" : \"file\"}`}\n              </span>\n              {acceptedFormats && (\n                <span className=\"text-xs text-muted-foreground/60 mt-1\">\n                  {acceptedFormats.map((f) => f.toUpperCase()).join(\", \")}\n                  {field.validation?.max_size_mb && ` · Max ${field.validation.max_size_mb}MB`}\n                </span>\n              )}\n            </>\n          )}\n        </label>\n      )}\n    </div>\n  );\n}\n\nfunction MultiSelectInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const selected = Array.isArray(value) ? (value as string[]) : [];\n  const options = field.options || [];\n  const maxSelections = field.validation?.max_selections;\n\n  const toggle = (opt: string) => {\n    const next = selected.includes(opt)\n      ? selected.filter((s) => s !== opt)\n      : maxSelections && selected.length >= maxSelections\n        ? selected\n        : [...selected, opt];\n    onValueChange(next.length > 0 ? next : undefined);\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.multiSelectGroup)}>\n      {options.map((opt) => (\n        <label\n          key={opt}\n          className={cn(\n            \"flex items-center gap-2 text-sm cursor-pointer\",\n            classNames?.multiSelectOption,\n          )}\n        >\n          <input\n            type=\"checkbox\"\n            checked={selected.includes(opt)}\n            onChange={() => toggle(opt)}\n            className=\"accent-primary w-4 h-4\"\n          />\n          {opt}\n        </label>\n      ))}\n      {maxSelections && (\n        <p className=\"text-xs text-muted-foreground\">\n          {selected.length}/{maxSelections} selected\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction DateRangeInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const range = (value && typeof value === \"object\" ? value : {}) as DateRangeValue;\n\n  const update = (key: \"start\" | \"end\", v: string) => {\n    const next = { ...range, [key]: v };\n    onValueChange(next.start || next.end ? next : undefined);\n  };\n\n  return (\n    <div className={cn(\"grid grid-cols-1 sm:grid-cols-2 gap-3\", classNames?.dateRangeInput)}>\n      <div>\n        <label className=\"text-xs text-muted-foreground mb-1 block\">Start</label>\n        <DatePicker\n          value={range.start || \"\"}\n          onChange={(next) => update(\"start\", next)}\n          required={field.is_required}\n          placeholder=\"Start date\"\n          aria-label={`${field.name} start date`}\n          maxDate={range.end ? new Date(`${range.end}T00:00`) : undefined}\n        />\n      </div>\n      <div>\n        <label className=\"text-xs text-muted-foreground mb-1 block\">End</label>\n        <DatePicker\n          value={range.end || \"\"}\n          onChange={(next) => update(\"end\", next)}\n          required={field.is_required}\n          placeholder=\"End date\"\n          aria-label={`${field.name} end date`}\n          minDate={range.start ? new Date(`${range.start}T00:00`) : undefined}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction AddressInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const clientContext = useOptionalCimplifyClient();\n  const addr = (value && typeof value === \"object\" ? value : null) as AddressValue | null;\n  const [inputText, setInputText] = React.useState(addr?.formatted_address ?? \"\");\n  const [suggestions, setSuggestions] = React.useState<Array<{ description: string; place_id: string }>>([]);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const seqRef = React.useRef(0);\n  const sessionTokenRef = React.useRef(createSessionToken());\n  const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n      seqRef.current += 1;\n    };\n  }, []);\n\n  const fetchSuggestions = React.useCallback(async (query: string) => {\n    const client = clientContext?.client;\n    if (!client || query.length < 3) {\n      setSuggestions([]);\n      setIsOpen(false);\n      return;\n    }\n\n    const seq = ++seqRef.current;\n    const result = await client.places.autocomplete(query, sessionTokenRef.current);\n    if (seqRef.current !== seq) return;\n\n    if (result.ok && result.value.predictions.length > 0) {\n      setSuggestions(result.value.predictions);\n      setHighlightedIndex(0);\n      setIsOpen(true);\n    } else {\n      setSuggestions([]);\n      setIsOpen(false);\n    }\n  }, [clientContext]);\n\n  const handleInputChange = (nextValue: string) => {\n    setInputText(nextValue);\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);\n  };\n\n  const selectSuggestion = React.useCallback(async (suggestion: { description: string; place_id: string }) => {\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n\n    const fallback = suggestion.description.split(\",\")[0]?.trim() || suggestion.description;\n    setInputText(fallback);\n    setSuggestions([]);\n    setIsOpen(false);\n\n    const client = clientContext?.client;\n    if (!client) return;\n\n    const result = await client.places.details(suggestion.place_id, sessionTokenRef.current);\n    sessionTokenRef.current = createSessionToken();\n\n    if (result.ok) {\n      const d = result.value;\n      const addressValue: AddressValue = {\n        formatted_address: d.formatted_address || fallback,\n        street_address: d.street_address,\n        apartment: d.apartment,\n        city: d.city,\n        region: d.region,\n        postal_code: d.postal_code,\n        country: d.country,\n        latitude: d.latitude,\n        longitude: d.longitude,\n        place_id: d.place_id,\n      };\n      setInputText(addressValue.formatted_address);\n      onValueChange(addressValue);\n    }\n  }, [clientContext, onValueChange]);\n\n  return (\n    <div className={cn(\"space-y-2 relative\", classNames?.addressInput)}>\n      <input\n        type=\"text\"\n        value={inputText}\n        onChange={(e) => handleInputChange(e.target.value)}\n        onFocus={() => { if (suggestions.length > 0) setIsOpen(true); }}\n        onBlur={() => { blurTimeoutRef.current = setTimeout(() => setIsOpen(false), 120); }}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") { setIsOpen(false); return; }\n          if (!isOpen || suggestions.length === 0) return;\n          if (e.key === \"ArrowDown\") { e.preventDefault(); setHighlightedIndex((i) => i < suggestions.length - 1 ? i + 1 : 0); }\n          else if (e.key === \"ArrowUp\") { e.preventDefault(); setHighlightedIndex((i) => i > 0 ? i - 1 : suggestions.length - 1); }\n          else if (e.key === \"Enter\" && highlightedIndex >= 0) { e.preventDefault(); void selectSuggestion(suggestions[highlightedIndex]); }\n        }}\n        placeholder={field.placeholder || \"Search for an address...\"}\n        required={field.is_required}\n        autoComplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-expanded={isOpen && suggestions.length > 0}\n        className={inputClass}\n      />\n      {isOpen && suggestions.length > 0 && (\n        <div role=\"listbox\" className=\"absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-border bg-background shadow-lg\">\n          {suggestions.map((s, i) => (\n            <button\n              key={s.place_id}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={i === highlightedIndex}\n              onMouseDown={(e) => { e.preventDefault(); void selectSuggestion(s); }}\n              className={cn(\"block w-full px-3 py-2.5 text-left text-sm transition-colors\", i === highlightedIndex ? \"bg-muted text-foreground\" : \"text-foreground hover:bg-muted/70\")}\n            >\n              {s.description}\n            </button>\n          ))}\n        </div>\n      )}\n      {addr && (\n        <input\n          type=\"text\"\n          value={addr.apartment || \"\"}\n          onChange={(e) => onValueChange({ ...addr, apartment: e.target.value || undefined })}\n          placeholder=\"Apt, suite, unit (optional)\"\n          className={inputClass}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction LocationInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const clientContext = useOptionalCimplifyClient();\n  const loc = (value && typeof value === \"object\" ? value : null) as LocationValue | null;\n  const [inputText, setInputText] = React.useState(loc?.label ?? \"\");\n  const [suggestions, setSuggestions] = React.useState<Array<{ description: string; place_id: string }>>([]);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const seqRef = React.useRef(0);\n  const sessionTokenRef = React.useRef(createSessionToken());\n  const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n      seqRef.current += 1;\n    };\n  }, []);\n\n  const fetchSuggestions = React.useCallback(async (query: string) => {\n    const client = clientContext?.client;\n    if (!client || query.length < 3) {\n      setSuggestions([]);\n      setIsOpen(false);\n      return;\n    }\n\n    const seq = ++seqRef.current;\n    const result = await client.places.autocomplete(query, sessionTokenRef.current);\n    if (seqRef.current !== seq) return;\n\n    if (result.ok && result.value.predictions.length > 0) {\n      setSuggestions(result.value.predictions);\n      setHighlightedIndex(0);\n      setIsOpen(true);\n    } else {\n      setSuggestions([]);\n      setIsOpen(false);\n    }\n  }, [clientContext]);\n\n  const handleInputChange = (nextValue: string) => {\n    setInputText(nextValue);\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);\n  };\n\n  const selectSuggestion = React.useCallback(async (suggestion: { description: string; place_id: string }) => {\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);\n\n    const label = suggestion.description.split(\",\")[0]?.trim() || suggestion.description;\n    setInputText(label);\n    setSuggestions([]);\n    setIsOpen(false);\n\n    const client = clientContext?.client;\n    if (!client) return;\n\n    const result = await client.places.details(suggestion.place_id, sessionTokenRef.current);\n    sessionTokenRef.current = createSessionToken();\n\n    if (result.ok) {\n      const d = result.value;\n      onValueChange({\n        latitude: d.latitude,\n        longitude: d.longitude,\n        label: d.formatted_address || label,\n      } satisfies LocationValue);\n      setInputText(d.formatted_address || label);\n    }\n  }, [clientContext, onValueChange]);\n\n  return (\n    <div className={cn(\"relative\", classNames?.locationInput)}>\n      <input\n        type=\"text\"\n        value={inputText}\n        onChange={(e) => handleInputChange(e.target.value)}\n        onFocus={() => { if (suggestions.length > 0) setIsOpen(true); }}\n        onBlur={() => { blurTimeoutRef.current = setTimeout(() => setIsOpen(false), 120); }}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\") { setIsOpen(false); return; }\n          if (!isOpen || suggestions.length === 0) return;\n          if (e.key === \"ArrowDown\") { e.preventDefault(); setHighlightedIndex((i) => i < suggestions.length - 1 ? i + 1 : 0); }\n          else if (e.key === \"ArrowUp\") { e.preventDefault(); setHighlightedIndex((i) => i > 0 ? i - 1 : suggestions.length - 1); }\n          else if (e.key === \"Enter\" && highlightedIndex >= 0) { e.preventDefault(); void selectSuggestion(suggestions[highlightedIndex]); }\n        }}\n        placeholder={field.placeholder || \"Search for a location...\"}\n        required={field.is_required}\n        autoComplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-expanded={isOpen && suggestions.length > 0}\n        className={inputClass}\n      />\n      {isOpen && suggestions.length > 0 && (\n        <div role=\"listbox\" className=\"absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-border bg-background shadow-lg\">\n          {suggestions.map((s, i) => (\n            <button\n              key={s.place_id}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={i === highlightedIndex}\n              onMouseDown={(e) => { e.preventDefault(); void selectSuggestion(s); }}\n              className={cn(\"block w-full px-3 py-2.5 text-left text-sm transition-colors\", i === highlightedIndex ? \"bg-muted text-foreground\" : \"text-foreground hover:bg-muted/70\")}\n            >\n              {s.description}\n            </button>\n          ))}\n        </div>\n      )}\n      {loc && (\n        <p className=\"text-xs text-muted-foreground mt-1\">\n          {loc.latitude.toFixed(4)}, {loc.longitude.toFixed(4)}\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction PhoneInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n  inputClass,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n  inputClass: string;\n}): React.ReactElement {\n  const phone = (value && typeof value === \"object\" ? value : null) as PhoneValue | null;\n  const [code, setCode] = React.useState(phone?.country_code ?? \"+1\");\n  const [number, setNumber] = React.useState(phone?.number ?? \"\");\n\n  const update = (nextCode: string, nextNumber: string) => {\n    setCode(nextCode);\n    setNumber(nextNumber);\n    if (nextNumber) {\n      onValueChange({\n        country_code: nextCode,\n        number: nextNumber,\n        formatted: `${nextCode} ${nextNumber}`,\n      } satisfies PhoneValue);\n    } else {\n      onValueChange(undefined);\n    }\n  };\n\n  return (\n    <div className={cn(\"flex gap-2\", classNames?.phoneInput)}>\n      <input\n        type=\"text\"\n        value={code}\n        onChange={(e) => update(e.target.value, number)}\n        placeholder=\"+1\"\n        className={cn(inputClass, \"w-20 shrink-0\")}\n      />\n      <input\n        type=\"tel\"\n        value={number}\n        onChange={(e) => update(code, e.target.value)}\n        placeholder={field.placeholder || \"Phone number\"}\n        required={field.is_required}\n        className={inputClass}\n      />\n    </div>\n  );\n}\n\nfunction SignatureInput({\n  field,\n  value,\n  onValueChange,\n  classNames,\n}: {\n  field: ProductInputField;\n  value: unknown;\n  onValueChange: (value: unknown) => void;\n  classNames?: CustomerInputFieldsClassNames;\n}): React.ReactElement {\n  const sig = (value && typeof value === \"object\" ? value : null) as SignatureValue | null;\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n  const isDrawing = React.useRef(false);\n\n  const getCtx = () => canvasRef.current?.getContext(\"2d\") ?? null;\n\n  const startDraw = (e: React.PointerEvent) => {\n    const ctx = getCtx();\n    if (!ctx) return;\n    isDrawing.current = true;\n    const rect = canvasRef.current!.getBoundingClientRect();\n    ctx.beginPath();\n    ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);\n    canvasRef.current!.setPointerCapture(e.pointerId);\n  };\n\n  const draw = (e: React.PointerEvent) => {\n    if (!isDrawing.current) return;\n    const ctx = getCtx();\n    if (!ctx) return;\n    const rect = canvasRef.current!.getBoundingClientRect();\n    ctx.lineWidth = 2;\n    ctx.lineCap = \"round\";\n    const style = getComputedStyle(canvasRef.current!);\n    ctx.strokeStyle = style.color || \"#000\";\n    ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);\n    ctx.stroke();\n  };\n\n  const endDraw = () => {\n    if (!isDrawing.current) return;\n    isDrawing.current = false;\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    onValueChange({\n      data_url: canvas.toDataURL(\"image/png\"),\n      signer_name: sig?.signer_name,\n    } satisfies SignatureValue);\n  };\n\n  const clear = () => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext(\"2d\");\n    if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);\n    onValueChange(undefined);\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", classNames?.signatureCanvas)}>\n      <div className=\"relative rounded-md border border-input overflow-hidden\">\n        <canvas\n          ref={canvasRef}\n          width={400}\n          height={150}\n          className=\"w-full touch-none cursor-crosshair bg-background text-foreground\"\n          onPointerDown={startDraw}\n          onPointerMove={draw}\n          onPointerUp={endDraw}\n          onPointerLeave={endDraw}\n        />\n        {sig?.data_url && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            className=\"absolute top-1.5 right-1.5 text-xs text-muted-foreground hover:text-destructive transition-colors\"\n          >\n            Clear\n          </button>\n        )}\n      </div>\n      {!sig?.data_url && (\n        <p className=\"text-xs text-muted-foreground\">\n          {field.placeholder || \"Draw your signature above\"}\n        </p>\n      )}\n    </div>\n  );\n}\n\nfunction createSessionToken(): string {\n  if (typeof crypto !== \"undefined\" && crypto.randomUUID) {\n    return crypto.randomUUID();\n  }\n  return `places_${Date.now()}_${Math.random().toString(16).slice(2)}`;\n}\n"
     }
   ]
 }

package/registry/date-slot-picker.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "date-slot-picker.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { AvailableSlot, DayAvailability } from \"@cimplify/sdk\";\nimport { useServiceAvailability } from \"@cimplify/sdk/react\";\nimport { SlotPicker } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DateSlotPickerClassNames {\n  root?: string;\n  dateStrip?: string;\n  dateButton?: string;\n  nav?: string;\n  navButton?: string;\n  slots?: string;\n  loading?: string;\n}\n\nexport interface DateSlotPickerProps {\n  /** Service ID to fetch availability and slots for. */\n  serviceId: string;\n  /** Number of days to show in the date strip. Default: 7. */\n  daysToShow?: number;\n  /** Number of participants. */\n  participantCount?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot, date: string) => void;\n  /** Pre-fetched availability data (skips fetch). */\n  availability?: DayAvailability[];\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  className?: string;\n  classNames?: DateSlotPickerClassNames;\n}\n\nfunction formatDate(dateStr: string): string {\n  const date = new Date(dateStr + \"T00:00:00\");\n  return date.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\n}\n\nfunction toDateString(date: Date): string {\n  return date.toISOString().split(\"T\")[0];\n}\n\nfunction addDays(date: Date, days: number): Date {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n}\n\nexport function DateSlotPicker({\n  serviceId,\n  daysToShow = 7,\n  participantCount,\n  selectedSlot,\n  onSlotSelect,\n  availability: availabilityProp,\n  showPrice = true,\n  className,\n  classNames,\n}: DateSlotPickerProps): React.ReactElement {\n  const [offset, setOffset] = useState(0);\n  const [selectedDate, setSelectedDate] = useState<string>(toDateString(new Date()));\n\n  const dateRange = useMemo(() => {\n    const today = new Date();\n    const start = addDays(today, offset);\n    const dates: string[] = [];\n    for (let i = 0; i < daysToShow; i++) {\n      dates.push(toDateString(addDays(start, i)));\n    }\n    return {\n      dates,\n      startDate: dates[0],\n      endDate: dates[dates.length - 1],\n    };\n  }, [offset, daysToShow]);\n\n  const { days: fetchedDays, isLoading: availabilityLoading } = useServiceAvailability(\n    serviceId,\n    dateRange.startDate,\n    dateRange.endDate,\n    {\n      participantCount,\n      enabled: availabilityProp === undefined,\n    },\n  );\n\n  const days = availabilityProp ?? fetchedDays;\n\n  const availabilityMap = useMemo(() => {\n    const map = new Map<string, DayAvailability>();\n    for (const day of days) {\n      map.set(day.date, day);\n    }\n    return map;\n  }, [days]);\n\n  const handlePrev = useCallback(() => {\n    setOffset((prev) => Math.max(0, prev - daysToShow));\n  }, [daysToShow]);\n\n  const handleNext = useCallback(() => {\n    setOffset((prev) => prev + daysToShow);\n  }, [daysToShow]);\n\n  const handleDateChange = useCallback((value: string | number | null) => {\n    if (typeof value === \"string\") {\n      setSelectedDate(value);\n    }\n  }, []);\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot) => {\n      onSlotSelect?.(slot, selectedDate);\n    },\n    [onSlotSelect, selectedDate],\n  );\n\n  return (\n    <Tabs.Root\n      value={selectedDate}\n      onValueChange={handleDateChange}\n      data-cimplify-date-slot-picker\n      className={cn(className, classNames?.root)}\n    >\n      <div data-cimplify-date-nav className={classNames?.nav}>\n        <button\n          type=\"button\"\n          onClick={handlePrev}\n          disabled={offset === 0}\n          data-cimplify-date-nav-prev\n          className={classNames?.navButton}\n        >\n          &larr;\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleNext}\n          data-cimplify-date-nav-next\n          className={classNames?.navButton}\n        >\n          &rarr;\n        </button>\n      </div>\n\n      <Tabs.List data-cimplify-date-strip className={classNames?.dateStrip}>\n        {dateRange.dates.map((date) => {\n          const dayInfo = availabilityMap.get(date);\n          const hasAvailability = dayInfo?.has_availability !== false;\n          const isSelected = selectedDate === date;\n          return (\n            <Tabs.Tab\n              key={date}\n              value={date}\n              data-cimplify-date-button\n              data-selected={isSelected || undefined}\n              data-available={hasAvailability || undefined}\n              data-fully-booked={(!hasAvailability) || undefined}\n              className={classNames?.dateButton}\n            >\n              {formatDate(date)}\n            </Tabs.Tab>\n          );\n        })}\n      </Tabs.List>\n\n      {availabilityLoading && (\n        <div\n          data-cimplify-date-slot-loading\n          aria-busy=\"true\"\n          className={classNames?.loading}\n        />\n      )}\n\n      <div data-cimplify-date-slots className={classNames?.slots}>\n        <SlotPicker\n          serviceId={serviceId}\n          date={selectedDate}\n          participantCount={participantCount}\n          selectedSlot={selectedSlot}\n          onSlotSelect={handleSlotSelect}\n          showPrice={showPrice}\n        />\n      </div>\n    </Tabs.Root>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { AvailableSlot, DayAvailability } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport { useServiceAvailability } from \"@cimplify/sdk/react\";\nimport { SlotPicker } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DateSlotPickerClassNames {\n  root?: string;\n  dateStrip?: string;\n  dateButton?: string;\n  nav?: string;\n  navButton?: string;\n  slots?: string;\n  loading?: string;\n}\n\nexport interface DateSlotPickerProps {\n  /** Service ID to fetch availability and slots for. */\n  serviceId: string;\n  /** Number of days to show in the date strip. Default: 7. */\n  daysToShow?: number;\n  /** Number of participants. */\n  participantCount?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot, date: string) => void;\n  /** Pre-fetched availability data (skips fetch). */\n  availability?: DayAvailability[];\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  /** Forwarded to `<SlotPicker>` to render multi-day stay labels. */\n  schedulingMode?: SchedulingMode;\n  /** Forwarded to `<SlotPicker>` — unit for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Forwarded to `<SlotPicker>` — value for the stay summary in multi-day mode. */\n  durationValue?: number;\n  className?: string;\n  classNames?: DateSlotPickerClassNames;\n}\n\nfunction formatDate(dateStr: string): string {\n  const date = new Date(dateStr + \"T00:00:00\");\n  return date.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\n}\n\nfunction toDateString(date: Date): string {\n  return date.toISOString().split(\"T\")[0];\n}\n\nfunction addDays(date: Date, days: number): Date {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n}\n\nexport function DateSlotPicker({\n  serviceId,\n  daysToShow = 7,\n  participantCount,\n  selectedSlot,\n  onSlotSelect,\n  availability: availabilityProp,\n  showPrice = true,\n  schedulingMode,\n  durationUnit,\n  durationValue,\n  className,\n  classNames,\n}: DateSlotPickerProps): React.ReactElement {\n  const [offset, setOffset] = useState(0);\n  const [selectedDate, setSelectedDate] = useState<string>(toDateString(new Date()));\n\n  const dateRange = useMemo(() => {\n    const today = new Date();\n    const start = addDays(today, offset);\n    const dates: string[] = [];\n    for (let i = 0; i < daysToShow; i++) {\n      dates.push(toDateString(addDays(start, i)));\n    }\n    return {\n      dates,\n      startDate: dates[0],\n      endDate: dates[dates.length - 1],\n    };\n  }, [offset, daysToShow]);\n\n  const { days: fetchedDays, isLoading: availabilityLoading } = useServiceAvailability(\n    serviceId,\n    dateRange.startDate,\n    dateRange.endDate,\n    {\n      participantCount,\n      enabled: availabilityProp === undefined,\n    },\n  );\n\n  const days = availabilityProp ?? fetchedDays;\n\n  const availabilityMap = useMemo(() => {\n    const map = new Map<string, DayAvailability>();\n    for (const day of days) {\n      map.set(day.date, day);\n    }\n    return map;\n  }, [days]);\n\n  const handlePrev = useCallback(() => {\n    setOffset((prev) => Math.max(0, prev - daysToShow));\n  }, [daysToShow]);\n\n  const handleNext = useCallback(() => {\n    setOffset((prev) => prev + daysToShow);\n  }, [daysToShow]);\n\n  const handleDateChange = useCallback((value: string | number | null) => {\n    if (typeof value === \"string\") {\n      setSelectedDate(value);\n    }\n  }, []);\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot) => {\n      onSlotSelect?.(slot, selectedDate);\n    },\n    [onSlotSelect, selectedDate],\n  );\n\n  return (\n    <Tabs.Root\n      value={selectedDate}\n      onValueChange={handleDateChange}\n      data-cimplify-date-slot-picker\n      className={cn(className, classNames?.root)}\n    >\n      <div data-cimplify-date-nav className={classNames?.nav}>\n        <button\n          type=\"button\"\n          onClick={handlePrev}\n          disabled={offset === 0}\n          data-cimplify-date-nav-prev\n          className={classNames?.navButton}\n        >\n          &larr;\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleNext}\n          data-cimplify-date-nav-next\n          className={classNames?.navButton}\n        >\n          &rarr;\n        </button>\n      </div>\n\n      <Tabs.List data-cimplify-date-strip className={classNames?.dateStrip}>\n        {dateRange.dates.map((date) => {\n          const dayInfo = availabilityMap.get(date);\n          const hasAvailability = dayInfo?.has_availability !== false;\n          const isSelected = selectedDate === date;\n          return (\n            <Tabs.Tab\n              key={date}\n              value={date}\n              data-cimplify-date-button\n              data-selected={isSelected || undefined}\n              data-available={hasAvailability || undefined}\n              data-fully-booked={(!hasAvailability) || undefined}\n              className={classNames?.dateButton}\n            >\n              {formatDate(date)}\n            </Tabs.Tab>\n          );\n        })}\n      </Tabs.List>\n\n      {availabilityLoading && (\n        <div\n          data-cimplify-date-slot-loading\n          aria-busy=\"true\"\n          className={classNames?.loading}\n        />\n      )}\n\n      <div data-cimplify-date-slots className={classNames?.slots}>\n        <SlotPicker\n          serviceId={serviceId}\n          date={selectedDate}\n          participantCount={participantCount}\n          selectedSlot={selectedSlot}\n          onSlotSelect={handleSlotSelect}\n          showPrice={showPrice}\n          schedulingMode={schedulingMode}\n          durationUnit={durationUnit}\n          durationValue={durationValue}\n        />\n      </div>\n    </Tabs.Root>\n  );\n}\n"
     }
   ]
 }

package/registry/slot-picker.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "slot-picker.tsx",
-      "content": "\"use client\";\n\nimport { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport React from \"react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport { useAvailableSlots } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface SlotPickerClassNames {\n  root?: string;\n  group?: string;\n  groupLabel?: string;\n  slot?: string;\n  slotTime?: string;\n  slotPrice?: string;\n  loading?: string;\n  empty?: string;\n}\n\nexport interface SlotPickerProps {\n  /** Pre-fetched slots (skips fetch). */\n  slots?: AvailableSlot[];\n  /** Service ID — used to fetch slots when `slots` prop is not provided. */\n  serviceId?: string;\n  /** Date string (YYYY-MM-DD) — used to fetch slots when `slots` prop is not provided. */\n  date?: string;\n  /** Number of participants for capacity-based availability. */\n  participantCount?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot) => void;\n  /** Whether to group slots by time of day. Default: true. */\n  groupByTimeOfDay?: boolean;\n  /** Show price on each slot. Default: true. */\n  showPrice?: boolean;\n  /** Text shown when no slots available. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: SlotPickerClassNames;\n}\n\ninterface SlotGroup {\n  label: string;\n  slots: AvailableSlot[];\n}\n\nfunction getTimeOfDay(timeStr: string): \"morning\" | \"afternoon\" | \"evening\" {\n  const hour = parseInt(timeStr.split(\"T\").pop()?.split(\":\")[0] ?? timeStr.split(\":\")[0], 10);\n  if (hour < 12) return \"morning\";\n  if (hour < 17) return \"afternoon\";\n  return \"evening\";\n}\n\nconst TIME_OF_DAY_LABELS: Record<string, string> = {\n  morning: \"Morning\",\n  afternoon: \"Afternoon\",\n  evening: \"Evening\",\n};\n\nfunction groupSlots(slots: AvailableSlot[]): SlotGroup[] {\n  const groups: Record<string, AvailableSlot[]> = {};\n  for (const slot of slots) {\n    const tod = getTimeOfDay(slot.start_time);\n    if (!groups[tod]) groups[tod] = [];\n    groups[tod].push(slot);\n  }\n  return ([\"morning\", \"afternoon\", \"evening\"] as const)\n    .filter((tod) => groups[tod]?.length)\n    .map((tod) => ({ label: TIME_OF_DAY_LABELS[tod], slots: groups[tod] }));\n}\n\nfunction formatTime(timeStr: string): string {\n  try {\n    const date = new Date(timeStr);\n    if (!isNaN(date.getTime())) {\n      return date.toLocaleTimeString(undefined, { hour: \"numeric\", minute: \"2-digit\" });\n    }\n  } catch {\n    // noop\n  }\n\n  const parts = timeStr.split(\":\");\n  if (parts.length >= 2) {\n    const hour = parseInt(parts[0], 10);\n    const minute = parts[1];\n    const ampm = hour >= 12 ? \"PM\" : \"AM\";\n    const displayHour = hour % 12 || 12;\n    return `${displayHour}:${minute} ${ampm}`;\n  }\n  return timeStr;\n}\n\nfunction slotToValue(slot: AvailableSlot): string {\n  return `${slot.start_time}|${slot.end_time}`;\n}\n\nexport function SlotPicker({\n  slots: slotsProp,\n  serviceId,\n  date,\n  participantCount,\n  selectedSlot,\n  onSlotSelect,\n  groupByTimeOfDay = true,\n  showPrice = true,\n  emptyMessage = \"No available slots\",\n  className,\n  classNames,\n}: SlotPickerProps): React.ReactElement {\n  const { slots: fetched, isLoading } = useAvailableSlots(\n    serviceId ?? null,\n    date ?? null,\n    {\n      participantCount,\n      enabled: slotsProp === undefined && !!serviceId && !!date,\n    },\n  );\n\n  const slots = slotsProp ?? fetched;\n\n  if (isLoading && slots.length === 0) {\n    return (\n      <div\n        data-cimplify-slot-picker\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (slots.length === 0) {\n    return (\n      <div\n        data-cimplify-slot-picker\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n      </div>\n    );\n  }\n\n  const groups = groupByTimeOfDay ? groupSlots(slots) : [{ label: \"\", slots }];\n\n  const slotsByValue = new Map<string, AvailableSlot>();\n  for (const slot of slots) {\n    slotsByValue.set(slotToValue(slot), slot);\n  }\n\n  const selectedValue = selectedSlot ? slotToValue(selectedSlot) : \"\";\n\n  return (\n    <RadioGroup\n      data-cimplify-slot-picker\n      className={cn(className, classNames?.root)}\n      value={selectedValue}\n      onValueChange={(value: string) => {\n        const slot = slotsByValue.get(value);\n        if (slot?.is_available) {\n          onSlotSelect?.(slot);\n        }\n      }}\n    >\n      {groups.map((group) => (\n        <div key={group.label || \"all\"} data-cimplify-slot-group className={classNames?.group}>\n          {group.label && (\n            <div data-cimplify-slot-group-label className={classNames?.groupLabel}>\n              {group.label}\n            </div>\n          )}\n          {group.slots.map((slot) => {\n            const value = slotToValue(slot);\n            const isSelected =\n              selectedSlot?.start_time === slot.start_time &&\n              selectedSlot?.end_time === slot.end_time;\n            return (\n              <Radio.Root\n                key={value}\n                value={value}\n                disabled={!slot.is_available}\n                                data-cimplify-slot\n                data-selected={isSelected || undefined}\n                data-unavailable={!slot.is_available || undefined}\n                className={classNames?.slot}\n              >\n                <span data-cimplify-slot-time className={classNames?.slotTime}>\n                  {formatTime(slot.start_time)}\n                </span>\n                {showPrice && slot.price && (\n                  <span data-cimplify-slot-price className={classNames?.slotPrice}>\n                    <Price amount={slot.price} />\n                  </span>\n                )}\n              </Radio.Root>\n            );\n          })}\n        </div>\n      ))}\n    </RadioGroup>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport React from \"react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport { useAvailableSlots } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface SlotPickerClassNames {\n  root?: string;\n  group?: string;\n  groupLabel?: string;\n  slot?: string;\n  slotTime?: string;\n  slotPrice?: string;\n  loading?: string;\n  empty?: string;\n}\n\nexport interface SlotPickerProps {\n  /** Pre-fetched slots (skips fetch). */\n  slots?: AvailableSlot[];\n  /** Service ID — used to fetch slots when `slots` prop is not provided. */\n  serviceId?: string;\n  /** Date string (YYYY-MM-DD) — used to fetch slots when `slots` prop is not provided. */\n  date?: string;\n  /** Number of participants for capacity-based availability. */\n  participantCount?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot) => void;\n  /** Whether to group slots by time of day. Default: true. Ignored when `schedulingMode` is `\"multi_day\"`. */\n  groupByTimeOfDay?: boolean;\n  /** Show price on each slot. Default: true. */\n  showPrice?: boolean;\n  /**\n   * Service scheduling mode. When `\"multi_day\"`, each slot renders as a\n   * stay summary (`\"3 nights: Fri Apr 5, 3:00 PM → Mon Apr 8, 11:00 AM\"`)\n   * instead of the time-of-day label. Defaults to `\"intraday\"`.\n   */\n  schedulingMode?: SchedulingMode;\n  /** Service duration unit — used for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Service duration value — used for the stay summary in multi-day mode. */\n  durationValue?: number;\n  /** Text shown when no slots available. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: SlotPickerClassNames;\n}\n\ninterface SlotGroup {\n  label: string;\n  slots: AvailableSlot[];\n}\n\nfunction getTimeOfDay(timeStr: string): \"morning\" | \"afternoon\" | \"evening\" {\n  const hour = parseInt(timeStr.split(\"T\").pop()?.split(\":\")[0] ?? timeStr.split(\":\")[0], 10);\n  if (hour < 12) return \"morning\";\n  if (hour < 17) return \"afternoon\";\n  return \"evening\";\n}\n\nconst TIME_OF_DAY_LABELS: Record<string, string> = {\n  morning: \"Morning\",\n  afternoon: \"Afternoon\",\n  evening: \"Evening\",\n};\n\nfunction groupSlots(slots: AvailableSlot[]): SlotGroup[] {\n  const groups: Record<string, AvailableSlot[]> = {};\n  for (const slot of slots) {\n    const tod = getTimeOfDay(slot.start_time);\n    if (!groups[tod]) groups[tod] = [];\n    groups[tod].push(slot);\n  }\n  return ([\"morning\", \"afternoon\", \"evening\"] as const)\n    .filter((tod) => groups[tod]?.length)\n    .map((tod) => ({ label: TIME_OF_DAY_LABELS[tod], slots: groups[tod] }));\n}\n\nfunction formatTime(timeStr: string): string {\n  try {\n    const date = new Date(timeStr);\n    if (!isNaN(date.getTime())) {\n      return date.toLocaleTimeString(undefined, { hour: \"numeric\", minute: \"2-digit\" });\n    }\n  } catch {\n    // noop\n  }\n\n  const parts = timeStr.split(\":\");\n  if (parts.length >= 2) {\n    const hour = parseInt(parts[0], 10);\n    const minute = parts[1];\n    const ampm = hour >= 12 ? \"PM\" : \"AM\";\n    const displayHour = hour % 12 || 12;\n    return `${displayHour}:${minute} ${ampm}`;\n  }\n  return timeStr;\n}\n\nfunction pluralizeUnit(unit: DurationUnit | undefined, value: number | undefined): string {\n  if (!unit) return value === 1 ? \"day\" : \"days\";\n  const v = value ?? 1;\n  if (unit === \"minutes\") return v === 1 ? \"minute\" : \"minutes\";\n  if (unit === \"hours\") return v === 1 ? \"hour\" : \"hours\";\n  if (unit === \"days\") return v === 1 ? \"day\" : \"days\";\n  if (unit === \"weeks\") return v === 1 ? \"week\" : \"weeks\";\n  if (unit === \"months\") return v === 1 ? \"month\" : \"months\";\n  return unit;\n}\n\nfunction formatStaySummary(\n  slot: AvailableSlot,\n  durationUnit: DurationUnit | undefined,\n  durationValue: number | undefined,\n): string {\n  const start = new Date(slot.start_time);\n  const end = new Date(slot.end_time);\n  const startLabel = start.toLocaleString(undefined, {\n    weekday: \"short\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\",\n  });\n  const endLabel = end.toLocaleString(undefined, {\n    weekday: \"short\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\",\n  });\n  const unitLabel = pluralizeUnit(durationUnit, durationValue);\n  if (durationValue !== undefined) {\n    return `${durationValue} ${unitLabel}: ${startLabel} → ${endLabel}`;\n  }\n  return `${startLabel} → ${endLabel}`;\n}\n\nfunction slotToValue(slot: AvailableSlot): string {\n  return `${slot.start_time}|${slot.end_time}`;\n}\n\nexport function SlotPicker({\n  slots: slotsProp,\n  serviceId,\n  date,\n  participantCount,\n  selectedSlot,\n  onSlotSelect,\n  groupByTimeOfDay = true,\n  showPrice = true,\n  schedulingMode = \"intraday\",\n  durationUnit,\n  durationValue,\n  emptyMessage = \"No available slots\",\n  className,\n  classNames,\n}: SlotPickerProps): React.ReactElement {\n  const isMultiDay = schedulingMode === \"multi_day\";\n  const { slots: fetched, isLoading } = useAvailableSlots(\n    serviceId ?? null,\n    date ?? null,\n    {\n      participantCount,\n      enabled: slotsProp === undefined && !!serviceId && !!date,\n    },\n  );\n\n  const slots = slotsProp ?? fetched;\n\n  if (isLoading && slots.length === 0) {\n    return (\n      <div\n        data-cimplify-slot-picker\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (slots.length === 0) {\n    return (\n      <div\n        data-cimplify-slot-picker\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n      </div>\n    );\n  }\n\n  const groups = groupByTimeOfDay && !isMultiDay\n    ? groupSlots(slots)\n    : [{ label: \"\", slots }];\n\n  const slotsByValue = new Map<string, AvailableSlot>();\n  for (const slot of slots) {\n    slotsByValue.set(slotToValue(slot), slot);\n  }\n\n  const selectedValue = selectedSlot ? slotToValue(selectedSlot) : \"\";\n\n  return (\n    <RadioGroup\n      data-cimplify-slot-picker\n      className={cn(className, classNames?.root)}\n      value={selectedValue}\n      onValueChange={(value: string) => {\n        const slot = slotsByValue.get(value);\n        if (slot?.is_available) {\n          onSlotSelect?.(slot);\n        }\n      }}\n    >\n      {groups.map((group) => (\n        <div key={group.label || \"all\"} data-cimplify-slot-group className={classNames?.group}>\n          {group.label && (\n            <div data-cimplify-slot-group-label className={classNames?.groupLabel}>\n              {group.label}\n            </div>\n          )}\n          {group.slots.map((slot) => {\n            const value = slotToValue(slot);\n            const isSelected =\n              selectedSlot?.start_time === slot.start_time &&\n              selectedSlot?.end_time === slot.end_time;\n            return (\n              <Radio.Root\n                key={value}\n                value={value}\n                disabled={!slot.is_available}\n                                data-cimplify-slot\n                data-selected={isSelected || undefined}\n                data-unavailable={!slot.is_available || undefined}\n                className={classNames?.slot}\n              >\n                <span data-cimplify-slot-time className={classNames?.slotTime}>\n                  {isMultiDay\n                    ? formatStaySummary(slot, durationUnit, durationValue)\n                    : formatTime(slot.start_time)}\n                </span>\n                {showPrice && slot.price && (\n                  <span data-cimplify-slot-price className={classNames?.slotPrice}>\n                    <Price amount={slot.price} />\n                  </span>\n                )}\n              </Radio.Root>\n            );\n          })}\n        </div>\n      ))}\n    </RadioGroup>\n  );\n}\n"
     }
   ]
 }