@tempoxyz/ds 0.2.5 → 0.3.0

package/dist/web/components/OtpField.css

@@ -1 +1 @@
-.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-appearance-0{appearance:none}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-bg-1{background-color:var(--z-tds_2f_web-color-grayAlpha-100,light-dark(#0000000d,#ffffff12))}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-border-2{border:none}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-box-sizing-3{box-sizing:border-box}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-caret-color-4{caret-color:var(--z-tds_2f_web-color-blue-700,#4471ed)}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-text-5{color:var(--z-tds_2f_web-color-foreground,light-dark(#171717,#fff))}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-color-6{outline-color:#0000}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-7{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-style-8{outline-style:solid}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-width-9{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-p-10{padding:var(--z-tds_2f_web-spacing-0,0rem)}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-text-align-11{text-align:center}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-transition-duration-12{transition-duration:var(--z-tds_2f_web-transitionDuration-200,.2s)}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-transition-property-13{transition-property:background-color,color,opacity,outline-color,outline-offset,scale}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-transition-timing-function-14{transition-timing-function:var(--z-tds_2f_web-ease-overshoot,cubic-bezier(.34, 1.36, .64, 1))}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-opacity-15{&:disabled{opacity:var(--z-tds_2f_web-opacity-disabled,.4)}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-scale-16{&:focus{scale:1.06}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-color-17{&:focus-visible{outline-color:var(--z-tds_2f_web-color-blue-700,#4471ed)}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-18{&:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-bg-19{&:hover:not(:disabled){background-color:var(--z-tds_2f_web-color-grayAlpha-200,light-dark(#00000014,#ffffff1a))}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-caret-color-20{&[data-invalid],[data-invalid] &{caret-color:var(--z-tds_2f_web-color-red-900,light-dark(#cf2203,#f55c45))}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-text-21{&[data-invalid],[data-invalid] &{color:var(--z-tds_2f_web-color-red-900,light-dark(#cf2203,#f55c45))}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-color-22{&[data-invalid],[data-invalid] &{outline-color:var(--z-tds_2f_web-color-red-800,light-dark(#e02401,#d8351f))}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-23{&[data-invalid],[data-invalid] &{outline-offset:-2px}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-24{[data-success] &{animation:z-kid-tds_2f_web_2f_otp_2d_field_2f_pop .32s var(--z-tds_2f_web-ease-overshoot,cubic-bezier(.34, 1.36, .64, 1)) both}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-bg-25{[data-success] &{background-color:light-dark(#13a9631f,#13a96329)}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-caret-color-26{[data-success] &{caret-color:var(--z-tds_2f_web-color-green-900,light-dark(#037c46,#59e5a4))}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-text-27{[data-success] &{color:var(--z-tds_2f_web-color-green-900,light-dark(#037c46,#59e5a4))}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-color-28{[data-success] &{outline-color:var(--z-tds_2f_web-color-green-700,#13a963)}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-29{[data-success] &{outline-offset:-2px}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-bg-30{[data-success] &:hover:not(:disabled){background-color:light-dark(#13a9632e,#13a9633d)}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-31{&[data-invalid]:focus-visible,[data-invalid] &:focus-visible,[data-success] &:focus-visible{outline-offset:2px}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-32{[data-success] &:nth-child(2){animation-delay:40ms}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-33{[data-success] &:nth-child(3){animation-delay:80ms}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-34{[data-success] &:nth-child(4){animation-delay:.12s}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-35{[data-success] &:nth-child(5){animation-delay:.16s}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-36{[data-success] &:nth-child(6){animation-delay:.2s}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-37{[data-success] &:nth-child(7){animation-delay:.24s}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-38{[data-success] &:nth-child(8){animation-delay:.28s}}@media (prefers-reduced-motion:reduce){.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-transition-property-39{transition-property:background-color,color,opacity,outline-color}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-scale-40{&:focus{scale:none}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-41{[data-success] &{animation:none}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-align-items-0{align-items:center}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-display-1{display:inline-flex}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-flex-wrap-2{flex-wrap:nowrap}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-max-width-3{max-width:100%}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-min-width-4{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-animation-5{&[data-invalid]{animation:z-kid-tds_2f_web_2f_otp_2d_field_2f_nudge .36s var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}@media (prefers-reduced-motion:reduce){.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-animation-6{&[data-invalid]{animation:none}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-column-gap-7{&:where([data-size=large]){column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-aspect-ratio-8{&:where([data-size=large]){&>input{aspect-ratio:6/7}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-border-radius-9{&:where([data-size=large]){&>input{border-radius:var(--z-tds_2f_web-radius-16,1rem)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-flex-10{&:where([data-size=large]){&>input{flex:0 3rem}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-min-width-11{&:where([data-size=large]){&>input{min-width:var(--z-tds_2f_web-spacing-0,0rem)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-family-12{&:where([data-size=large]){&>input{font-family:var(--z-tds_2f_web-typography-copy-24-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-size-13{&:where([data-size=large]){&>input{font-size:var(--z-tds_2f_web-typography-copy-24-fontSize,24px)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-weight-14{&:where([data-size=large]){&>input{font-weight:var(--z-tds_2f_web-typography-copy-24-fontWeight,450)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-letter-spacing-15{&:where([data-size=large]){&>input{letter-spacing:var(--z-tds_2f_web-typography-copy-24-letterSpacing,-.47px)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-line-height-16{&:where([data-size=large]){&>input{line-height:var(--z-tds_2f_web-typography-copy-24-lineHeight,36px)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-column-gap-17{&:where([data-size=medium]){column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-aspect-ratio-18{&:where([data-size=medium]){&>input{aspect-ratio:9/10}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-border-radius-19{&:where([data-size=medium]){&>input{border-radius:var(--z-tds_2f_web-radius-12,.75rem)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-flex-20{&:where([data-size=medium]){&>input{flex:0 2.25rem}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-min-width-21{&:where([data-size=medium]){&>input{min-width:var(--z-tds_2f_web-spacing-0,0rem)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-family-22{&:where([data-size=medium]){&>input{font-family:var(--z-tds_2f_web-typography-copy-18-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-size-23{&:where([data-size=medium]){&>input{font-size:var(--z-tds_2f_web-typography-copy-18-fontSize,18px)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-weight-24{&:where([data-size=medium]){&>input{font-weight:var(--z-tds_2f_web-typography-copy-18-fontWeight,450)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-letter-spacing-25{&:where([data-size=medium]){&>input{letter-spacing:var(--z-tds_2f_web-typography-copy-18-letterSpacing,-.26px)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-line-height-26{&:where([data-size=medium]){&>input{line-height:var(--z-tds_2f_web-typography-copy-18-lineHeight,28px)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-column-gap-27{&:where([data-size=small]){column-gap:var(--z-tds_2f_web-spacing-4,.25rem)}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-aspect-ratio-28{&:where([data-size=small]){&>input{aspect-ratio:7/8}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-border-radius-29{&:where([data-size=small]){&>input{border-radius:var(--z-tds_2f_web-radius-8,.5rem)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-flex-30{&:where([data-size=small]){&>input{flex:0 1.75rem}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-min-width-31{&:where([data-size=small]){&>input{min-width:var(--z-tds_2f_web-spacing-0,0rem)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-family-32{&:where([data-size=small]){&>input{font-family:var(--z-tds_2f_web-typography-copy-14-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-size-33{&:where([data-size=small]){&>input{font-size:var(--z-tds_2f_web-typography-copy-14-fontSize,14px)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-weight-34{&:where([data-size=small]){&>input{font-weight:var(--z-tds_2f_web-typography-copy-14-fontWeight,450)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-letter-spacing-35{&:where([data-size=small]){&>input{letter-spacing:var(--z-tds_2f_web-typography-copy-14-letterSpacing,-.09px)}}}.z-tds_2f_web-tds_2f_web_2f_otp_2d_field-line-height-36{&:where([data-size=small]){&>input{line-height:var(--z-tds_2f_web-typography-copy-14-lineHeight,20px)}}}
+.z_tds_2f_web-iELgRU0{appearance:none}.z_tds_2f_web-iELgRU1{background-color:var(--z-tds_2f_web-color-container-regular,light-dark(var(--z-tds_2f_web-color-neutral-shade-004,#0000000a),var(--z-tds_2f_web-color-neutral-tint-012,#ffffff1f)))}.z_tds_2f_web-iELgRU2{border:none}.z_tds_2f_web-iELgRU3{box-sizing:border-box}.z_tds_2f_web-iELgRU4{caret-color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-iELgRU5{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-iELgRU6{outline-color:#0000}.z_tds_2f_web-iELgRU7{outline-offset:-1.5px}.z_tds_2f_web-iELgRU8{outline-style:solid}.z_tds_2f_web-iELgRU9{outline-width:1.5px}.z_tds_2f_web-iELgRUa{padding:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-iELgRUb{text-align:center}.z_tds_2f_web-iELgRUc{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-iELgRUd{transition-property:background-color,opacity,outline-color}.z_tds_2f_web-iELgRUe{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-iELgRUf{&:disabled{opacity:var(--z-tds_2f_web-opacity-disabled,.4)}}.z_tds_2f_web-iELgRUg{&:where(:hover:not(:disabled)){background-color:var(--z-tds_2f_web-color-container-strong,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-016,#ffffff29)))}}.z_tds_2f_web-iELgRUh{&:focus-visible{background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}}.z_tds_2f_web-iELgRUi{&:focus-visible{outline-color:var(--z-tds_2f_web-color-border-focus,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-052,#ffffff85)))}}.z_tds_2f_web-iELgRUj{&[data-invalid],[data-invalid] &{background-color:var(--z-tds_2f_web-color-container-negative,light-dark(var(--z-tds_2f_web-color-accent-alpha-regular-red-100,#eb341714),var(--z-tds_2f_web-color-accent-alpha-regular-red-200,#f55c4529)))}}.z_tds_2f_web-iELgRUk{[data-success] &{animation:z-kid-tds_2f_web_2f_otp_2d_field_2f_pop .32s var(--z-tds_2f_web-ease-overshoot,cubic-bezier(.34, 1.36, .64, 1)) both}}.z_tds_2f_web-iELgRUl{[data-success] &{background-color:var(--z-tds_2f_web-color-container-positive,light-dark(var(--z-tds_2f_web-color-accent-alpha-regular-green-100,#13a96314),var(--z-tds_2f_web-color-accent-alpha-regular-green-200,#59e5a429)))}}.z_tds_2f_web-iELgRUm{[data-success] &:nth-child(2){animation-delay:40ms}}.z_tds_2f_web-iELgRUn{[data-success] &:nth-child(3){animation-delay:80ms}}.z_tds_2f_web-iELgRUo{[data-success] &:nth-child(4){animation-delay:.12s}}.z_tds_2f_web-iELgRUp{[data-success] &:nth-child(5){animation-delay:.16s}}.z_tds_2f_web-iELgRUq{[data-success] &:nth-child(6){animation-delay:.2s}}.z_tds_2f_web-iELgRUr{[data-success] &:nth-child(7){animation-delay:.24s}}.z_tds_2f_web-iELgRUs{[data-success] &:nth-child(8){animation-delay:.28s}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-iELgRUt{[data-success] &{animation:none}}}.z_tds_2f_web-iELgRUu{align-items:center}.z_tds_2f_web-iELgRUv{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-iELgRUw{display:flex}.z_tds_2f_web-iELgRUx{flex-wrap:nowrap}.z_tds_2f_web-iELgRUy{max-width:100%}.z_tds_2f_web-iELgRUz{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-iELgRU10{&>input{border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-iELgRU11{&>input{flex:auto}}.z_tds_2f_web-iELgRU12{&>input{height:var(--z-tds_2f_web-spacing-56,3.5rem)}}.z_tds_2f_web-iELgRU13{&>input{min-width:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-iELgRU14{&>input{font-family:var(--z-tds_2f_web-typography-body-b1Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}}.z_tds_2f_web-iELgRU15{&>input{font-size:var(--z-tds_2f_web-typography-body-b1Strong-fontSize,16px)}}.z_tds_2f_web-iELgRU16{&>input{font-weight:var(--z-tds_2f_web-typography-body-b1Strong-fontWeight,500)}}.z_tds_2f_web-iELgRU17{&>input{letter-spacing:var(--z-tds_2f_web-typography-body-b1Strong-letterSpacing,.12px)}}.z_tds_2f_web-iELgRU18{&>input{line-height:var(--z-tds_2f_web-typography-body-b1Strong-lineHeight,22px)}}.z_tds_2f_web-iELgRU19{&>input{width:var(--z-tds_2f_web-spacing-44,2.75rem)}}.z_tds_2f_web-iELgRU1a{&>input:focus-visible{width:calc(2.75rem + 3px)}}.z_tds_2f_web-iELgRU1b{&[data-invalid]{animation:z-kid-tds_2f_web_2f_otp_2d_field_2f_nudge .36s var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-iELgRU1c{&[data-invalid]{animation:none}}}

package/dist/web/components/OtpField.d.ts

@@ -3,7 +3,8 @@ import { type ComponentPropsWithRef } from 'react';
 import type * as zyzz from 'zyzz';
 /**
  * One-time passcode entry with a slot per character. Slots render by default from `length`.
- * Setting `invalid` nudges the slots sideways and setting `success` pops them in sequence.
+ * Setting `invalid` fills the slots red and nudges them sideways. Setting `success` fills them
+ * green and pops them in sequence.
  *
  * Base UI renders a `role="group"` of text inputs that accepts digits by default. Pasting a code
  * into a slot fills it and the slots after it. The first slot carries
@@ -25,9 +26,11 @@ import type * as zyzz from 'zyzz';
  */
 export declare namespace OtpField {
     /**
-     * Owns the code and renders the slot group. `length` is required. `validationType` accepts
-     * `'numeric'`, `'alpha'`, `'alphanumeric'` and `'none'`. `size` sets slots to 32, 40 or 56px
-     * tall. Pass `children` to place `Input` slots yourself.
+     * Owns the code and renders the slot group, which fills its container. `length` is required.
+     * `validationType` accepts `'numeric'`, `'alpha'`, `'alphanumeric'` and `'none'`. Slots are 56px
+     * tall and at least 44px wide unless the container is narrower, and the focused slot is 3px wider
+     * than the others. Inside `Field.Root`, its message sits 8px below the slots. Pass `children` to
+     * place `Input` slots yourself.
      */
     function Root(props: Root.Props): import("react").JSX.Element;
     namespace Root {
@@ -47,70 +50,7 @@ export declare namespace OtpField {
 }
 declare namespace styles {
     const input: zyzz.style.ReturnType<"react">;
-    const root: zyzz.variants.ReturnType<{
-        readonly base: {
-            readonly alignItems: "center";
-            readonly display: "inline-flex";
-            readonly flexWrap: "nowrap";
-            readonly maxWidth: "100% !custom";
-            readonly minWidth: "0";
-            readonly selectors: {
-                readonly '&[data-invalid]': {
-                    readonly animation: `${string} 360ms ${string} !custom`;
-                };
-            };
-            readonly '@media (prefers-reduced-motion: reduce)': {
-                readonly selectors: {
-                    readonly '&[data-invalid]': {
-                        readonly animation: "none !custom";
-                    };
-                };
-            };
-        };
-        readonly defaultVariants: {
-            readonly size: "medium";
-        };
-        readonly variants: {
-            readonly size: {
-                readonly large: {
-                    readonly columnGap: "8";
-                    readonly selectors: {
-                        readonly '& > input': {
-                            readonly aspectRatio: "6 / 7 !custom";
-                            readonly borderRadius: "16";
-                            readonly flex: "0 1 3rem !custom";
-                            readonly minWidth: "0";
-                            readonly typography: "copy.24";
-                        };
-                    };
-                };
-                readonly medium: {
-                    readonly columnGap: "8";
-                    readonly selectors: {
-                        readonly '& > input': {
-                            readonly aspectRatio: "9 / 10 !custom";
-                            readonly borderRadius: "12";
-                            readonly flex: "0 1 2.25rem !custom";
-                            readonly minWidth: "0";
-                            readonly typography: "copy.18";
-                        };
-                    };
-                };
-                readonly small: {
-                    readonly columnGap: "4";
-                    readonly selectors: {
-                        readonly '& > input': {
-                            readonly aspectRatio: "7 / 8 !custom";
-                            readonly borderRadius: "8";
-                            readonly flex: "0 1 1.75rem !custom";
-                            readonly minWidth: "0";
-                            readonly typography: "copy.14";
-                        };
-                    };
-                };
-            };
-        };
-    }, "react">;
+    const root: zyzz.style.ReturnType<"react">;
 }
 export {};
 //# sourceMappingURL=OtpField.d.ts.map

package/dist/web/components/OtpField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OtpField.d.ts","sourceRoot":"","sources":["../../../src/web/components/OtpField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,KAAK,qBAAqB,EAA6B,MAAM,OAAO,CAAA;AAC7E,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAMjC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,yBAAiB,QAAQ,CAAC;IACxB;;;;OAIG;IACH,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAyBrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC,GACjF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,GACvC,IAAI,CACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EACxB,cAAc,GACd,YAAY,GACZ,cAAc,GACd,UAAU,GACV,MAAM,GACN,WAAW,GACX,QAAQ,GACR,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,UAAU,GACV,QAAQ,GACR,UAAU,GACV,gBAAgB,GAChB,OAAO,CACV,GAAG;YAAE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;YAAC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;SAAE,CAAA;KACvE;IAED;;;OAGG;IACH,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAYvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;KAC9F;CACF;AAqBD,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCAiEjB,CAAA;IAEM,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA+DhB,CAAA;CACF"}
+{"version":3,"file":"OtpField.d.ts","sourceRoot":"","sources":["../../../src/web/components/OtpField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,KAAK,qBAAqB,EAA6B,MAAM,OAAO,CAAA;AAC7E,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAMjC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,yBAAiB,QAAQ,CAAC;IACxB;;;;;;OAMG;IACH,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAyBrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC,GACjF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,GACvC,IAAI,CACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EACxB,cAAc,GACd,YAAY,GACZ,cAAc,GACd,UAAU,GACV,MAAM,GACN,WAAW,GACX,QAAQ,GACR,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,UAAU,GACV,QAAQ,GACR,UAAU,GACV,gBAAgB,GAChB,OAAO,CACV,GAAG;YAAE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;YAAC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;SAAE,CAAA;KACvE;IAED;;;OAGG;IACH,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAYvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;KAC9F;CACF;AAqBD,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCA2CjB,CAAA;IAEM,MAAM,IAAI,gCA+BhB,CAAA;CACF"}

package/dist/web/components/OtpField.js

@@ -1,14 +1,15 @@
 
-import { Props as __zyzzProps, Recipe as __zyzzRecipe } from 'zyzz/runtime';
+import { Props as __zyzzProps } from 'zyzz/runtime';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as BaseUi from '@base-ui/react/otp-field';
 import { createContext, useContext } from 'react';
 
-import { style, variants, vars } from '../zyzz.config.js';
+import { style, vars } from '../zyzz.config.js';
 const InvalidContext = createContext(false);
 /**
  * One-time passcode entry with a slot per character. Slots render by default from `length`.
- * Setting `invalid` nudges the slots sideways and setting `success` pops them in sequence.
+ * Setting `invalid` fills the slots red and nudges them sideways. Setting `success` fills them
+ * green and pops them in sequence.
  *
  * Base UI renders a `role="group"` of text inputs that accepts digits by default. Pasting a code
  * into a slot fills it and the slots after it. The first slot carries
@@ -31,13 +32,15 @@ const InvalidContext = createContext(false);
 export var OtpField;
 (function (OtpField) {
     /**
-     * Owns the code and renders the slot group. `length` is required. `validationType` accepts
-     * `'numeric'`, `'alpha'`, `'alphanumeric'` and `'none'`. `size` sets slots to 32, 40 or 56px
-     * tall. Pass `children` to place `Input` slots yourself.
+     * Owns the code and renders the slot group, which fills its container. `length` is required.
+     * `validationType` accepts `'numeric'`, `'alpha'`, `'alphanumeric'` and `'none'`. Slots are 56px
+     * tall and at least 44px wide unless the container is narrower, and the focused slot is 3px wider
+     * than the others. Inside `Field.Root`, its message sits 8px below the slots. Pass `children` to
+     * place `Input` slots yourself.
      */
     function Root(props) {
-        const { children, className, invalid = false, length, size, success = false, vars, ...attributes } = props;
-        return (_jsx(InvalidContext.Provider, { value: invalid, children: _jsx(BaseUi.OTPField.Root, { ...attributes, ...styles.root({ className, size, style: props.style, vars }), "data-invalid": invalid || undefined, "data-success": success || undefined, length: length, children: children ?? Array.from({ length }, (_, index) => _jsx(Input, {}, index)) }) }));
+        const { children, className, invalid = false, length, success = false, vars, ...attributes } = props;
+        return (_jsx(InvalidContext.Provider, { value: invalid, children: _jsx(BaseUi.OTPField.Root, { ...attributes, ...styles.root({ className, style: props.style, vars }), "data-invalid": invalid || undefined, "data-otp-field": "", "data-success": success || undefined, length: length, children: children ?? Array.from({ length }, (_, index) => _jsx(Input, {}, index)) }) }));
     }
     OtpField.Root = Root;
     /**
@@ -55,8 +58,8 @@ const nudge = "z-kid-tds_2f_web_2f_otp_2d_field_2f_nudge";
 const pop = "z-kid-tds_2f_web_2f_otp_2d_field_2f_pop";
 var styles;
 (function (styles) {
-    styles.input = __zyzzProps.create({className:"z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-appearance-0 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-bg-1 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-border-2 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-box-sizing-3 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-caret-color-4 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-text-5 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-color-6 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-7 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-style-8 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-width-9 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-p-10 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-text-align-11 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-transition-duration-12 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-transition-property-13 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-transition-timing-function-14 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-opacity-15 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-scale-16 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-color-17 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-18 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-bg-19 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-caret-color-20 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-text-21 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-color-22 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-23 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-24 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-bg-25 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-caret-color-26 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-text-27 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-color-28 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-29 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-bg-30 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-outline-offset-31 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-32 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-33 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-34 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-35 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-36 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-37 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-delay-38 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-transition-property-39 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-scale-40 z-tds_2f_web-tds_2f_web_2f_otp_2d_field_2f_input-animation-41"});
-    styles.root = __zyzzRecipe.create({"axes":{"size":["large","medium","small"]},"defaults":{"size":"medium"},"className":"z-tds_2f_web-tds_2f_web_2f_otp_2d_field-align-items-0 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-display-1 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-flex-wrap-2 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-max-width-3 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-min-width-4 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-animation-5 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-animation-6 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-column-gap-7 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-aspect-ratio-8 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-border-radius-9 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-flex-10 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-min-width-11 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-family-12 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-size-13 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-weight-14 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-letter-spacing-15 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-line-height-16 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-column-gap-17 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-aspect-ratio-18 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-border-radius-19 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-flex-20 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-min-width-21 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-family-22 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-size-23 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-weight-24 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-letter-spacing-25 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-line-height-26 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-column-gap-27 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-aspect-ratio-28 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-border-radius-29 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-flex-30 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-min-width-31 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-family-32 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-size-33 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-font-weight-34 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-letter-spacing-35 z-tds_2f_web-tds_2f_web_2f_otp_2d_field-line-height-36"});
+    styles.input = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iELgRU0 z_tds_2f_web-iELgRU1 z_tds_2f_web-iELgRU2 z_tds_2f_web-iELgRU3 z_tds_2f_web-iELgRU4 z_tds_2f_web-iELgRU5 z_tds_2f_web-iELgRU6 z_tds_2f_web-iELgRU7 z_tds_2f_web-iELgRU8 z_tds_2f_web-iELgRU9 z_tds_2f_web-iELgRUa z_tds_2f_web-iELgRUb z_tds_2f_web-iELgRUc z_tds_2f_web-iELgRUd z_tds_2f_web-iELgRUe z_tds_2f_web-iELgRUf z_tds_2f_web-iELgRUg z_tds_2f_web-iELgRUh z_tds_2f_web-iELgRUi z_tds_2f_web-iELgRUj z_tds_2f_web-iELgRUk z_tds_2f_web-iELgRUl z_tds_2f_web-iELgRUm z_tds_2f_web-iELgRUn z_tds_2f_web-iELgRUo z_tds_2f_web-iELgRUp z_tds_2f_web-iELgRUq z_tds_2f_web-iELgRUr z_tds_2f_web-iELgRUs z_tds_2f_web-iELgRUt"});
+    styles.root = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iELgRUu z_tds_2f_web-iELgRUv z_tds_2f_web-iELgRUw z_tds_2f_web-iELgRUx z_tds_2f_web-iELgRUy z_tds_2f_web-iELgRUz z_tds_2f_web-iELgRU10 z_tds_2f_web-iELgRU11 z_tds_2f_web-iELgRU12 z_tds_2f_web-iELgRU13 z_tds_2f_web-iELgRU14 z_tds_2f_web-iELgRU15 z_tds_2f_web-iELgRU16 z_tds_2f_web-iELgRU17 z_tds_2f_web-iELgRU18 z_tds_2f_web-iELgRU19 z_tds_2f_web-iELgRU1a z_tds_2f_web-iELgRU1b z_tds_2f_web-iELgRU1c"});
 })(styles || (styles = {}));
 //# sourceMappingURL=OtpField.js.map
 import './OtpField.css';

package/dist/web/components/OtpField.js.map

@@ -1 +1 @@
-{"version":3,"file":"OtpField.js","sourceRoot":"","sources":["../../../src/web/components/OtpField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OtpField.js","sourceRoot":"","sources":["../../../src/web/components/OtpField.tsx"],"names":[],"mappings":"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"}