@salutejs/plasma-new-hope 0.336.0-canary.2205.17476690989.0 → 0.336.0-canary.2210.17487143389.0

package/cjs/index.css

@@ -429,8 +429,8 @@
 .Drawer_styles_h5od79_s1ewnow2__f99f45af{--plasma-panel-close-color:var(--plasma-drawer-close-icon-color);}
 .Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerOverlay__f99f45af{-webkit-animation:Drawer_styles_h5od79_fadeInSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_fadeInSv7q57r__f99f45af 0.2s forwards;-webkit-scrollbar-gutter:stable;-moz-scrollbar-gutter:stable;-ms-scrollbar-gutter:stable;scrollbar-gutter:stable;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_drawerOverlay__f99f45af{-webkit-animation:Drawer_styles_h5od79_fadeOutSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_fadeOutSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_fadeInSv7q57r__f99f45af{from{opacity:0;}to{opacity:1;}}@keyframes Drawer_styles_h5od79_fadeInSv7q57r__f99f45af{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_fadeOutSv7q57r__f99f45af{from{opacity:1;}to{opacity:0;}}@keyframes Drawer_styles_h5od79_fadeOutSv7q57r__f99f45af{from{opacity:1;}to{opacity:0;}}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af,.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af > div{width:var(--sv7q57r-0);height:var(--sv7q57r-1);}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerRightPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerRightPlacement__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_rightShowAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_rightShowAnimationSv7q57r__f99f45af 0.2s forwards;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerRightPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerRightPlacement__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_rightHideAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_rightHideAnimationSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_rightShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes Drawer_styles_h5od79_rightShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_rightHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}@keyframes Drawer_styles_h5od79_rightHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerBottomPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerBottomPlacement__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_bottomShowAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_bottomShowAnimationSv7q57r__f99f45af 0.2s forwards;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerBottomPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerBottomPlacement__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_bottomHideAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_bottomHideAnimationSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_bottomShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes Drawer_styles_h5od79_bottomShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_bottomHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}@keyframes Drawer_styles_h5od79_bottomHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerLeftPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerLeftPlacement__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_leftShowAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_leftShowAnimationSv7q57r__f99f45af 0.2s forwards;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerLeftPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerLeftPlacement__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_leftHideAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_leftHideAnimationSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_leftShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes Drawer_styles_h5od79_leftShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_leftHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}@keyframes Drawer_styles_h5od79_leftHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerTopPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerTopPlacement__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_topShowAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_topShowAnimationSv7q57r__f99f45af 0.2s forwards;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerTopPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerTopPlacement__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_topHideAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_topHideAnimationSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_topShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes Drawer_styles_h5od79_topShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_topHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}@keyframes Drawer_styles_h5od79_topHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}
 
-.Dropdown_styles_kkvnr1_ln7uamp__173ef985{width:var(--ln7uamp-0);padding:calc(var(--plasma-dropdown-padding) + var(--plasma-dropdown-border-width,0rem));border-radius:var(--plasma-dropdown-border-radius);box-sizing:border-box;background:var(--surface-solid-card-brightness);box-shadow:0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04), inset 0 0 0 var(--plasma-dropdown-border-width,0) var(--plasma-dropdown-border-color,transparent);}
-.Dropdown_styles_kkvnr1_ujr7fmv__173ef985{max-height:var(--ujr7fmv-0);overflow-x:hidden;overflow-y:auto;border-radius:calc(var(--plasma-dropdown-border-radius) - 0.125rem - var(--plasma-dropdown-border-width,0rem));margin:0;padding:0;}
+.Dropdown_styles_zheit5_ln7uamp__21de70ca{width:var(--ln7uamp-0);padding:calc(var(--plasma-dropdown-padding) + var(--plasma-dropdown-border-width,0rem));border-radius:var(--plasma-dropdown-border-radius);box-sizing:border-box;background:var(--surface-solid-card-brightness);box-shadow:0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04), inset 0 0 0 var(--plasma-dropdown-border-width,0) var(--plasma-dropdown-border-color,transparent);}
+.Dropdown_styles_zheit5_ujr7fmv__21de70ca{max-height:var(--ujr7fmv-0);overflow-y:var(--ujr7fmv-1);border-radius:calc(var(--plasma-dropdown-border-radius) - 0.125rem - var(--plasma-dropdown-border-width,0rem));margin:0;padding:0;}
 
 
 .DropdownDivider_styles_v3xor1_s1brpi5d__3a791565{background:var(--plasma-dropdown-divider-color);width:var(--plasma-dropdown-divider-width);height:var(--plasma-dropdown-divider-height);margin:var(--plasma-dropdown-divider-margin-top) var(--plasma-dropdown-divider-margin-right) var(--plasma-dropdown-divider-margin-bottom) var(--plasma-dropdown-divider-margin-left);}
@@ -639,13 +639,13 @@
 .SelectAll_styles_tjme4i_d4ty997__a0f87d11{background:var(--surface-solid-card);}
 .SelectAll_styles_tjme4i_dxn0wk6__a0f87d11{height:0.0625rem;margin-top:var(--dxn0wk6-0);margin-right:var(--plasma-combobox-divider-margin-right);margin-left:var(--plasma-combobox-divider-margin-left);background:var(--plasma-combobox-divider-color);}
 
-.Combobox_styles_261unw_lxiiees__2c339479{width:var(--lxiiees-0);padding:calc(var(--plasma-combobox-padding) + var(--plasma-select-dropdown-border-width,0rem));border-radius:var(--plasma-combobox-border-radius);box-sizing:border-box;background:var(--surface-solid-card);box-shadow:0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04), inset 0 0 0 var(--plasma-select-dropdown-border-width,0rem) var(--plasma-select-dropdown-border-color,transparent);}
-.Combobox_styles_261unw_u1veo3wn__2c339479{max-height:var(--u1veo3wn-0);overflow-x:hidden;overflow-y:var(--u1veo3wn-1);border-radius:calc(var(--plasma-combobox-border-radius) - 0.125rem - var(--plasma-select-dropdown-border-width,0rem));margin:0;padding:0;}.Combobox_styles_261unw_u1veo3wn__2c339479 .Combobox_styles_261unw_comboboxEmptyStateWrapper__2c339479{box-shadow:none;}
-.Combobox_styles_261unw_i1hxiinv__2c339479{line-height:0;color:var(--plasma-combobox-disclosure-icon-color);cursor:var(--i1hxiinv-0);}.Combobox_styles_261unw_i1hxiinv__2c339479 .Combobox_styles_261unw_arrowInverse__2c339479{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg);}.Combobox_styles_261unw_i1hxiinv__2c339479:hover,.Combobox_styles_261unw_i1hxiinv__2c339479:active{color:var(--i1hxiinv-1);}
-.Combobox_styles_261unw_sr87xox__2c339479{width:var(--sr87xox-0);height:var(--sr87xox-0);}
+.Combobox_styles_isfa46_lxiiees__91df7bfb{width:var(--lxiiees-0);padding:calc(var(--plasma-combobox-padding) + var(--plasma-select-dropdown-border-width,0rem));border-radius:var(--plasma-combobox-border-radius);box-sizing:border-box;background:var(--surface-solid-card);box-shadow:0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04), inset 0 0 0 var(--plasma-select-dropdown-border-width,0rem) var(--plasma-select-dropdown-border-color,transparent);}
+.Combobox_styles_isfa46_u1veo3wn__91df7bfb{max-height:var(--u1veo3wn-0);overflow-y:var(--u1veo3wn-1);border-radius:calc(var(--plasma-combobox-border-radius) - 0.125rem - var(--plasma-select-dropdown-border-width,0rem));margin:0;padding:0;}.Combobox_styles_isfa46_u1veo3wn__91df7bfb .Combobox_styles_isfa46_comboboxEmptyStateWrapper__91df7bfb{box-shadow:none;}
+.Combobox_styles_isfa46_i1hxiinv__91df7bfb{line-height:0;color:var(--plasma-combobox-disclosure-icon-color);cursor:var(--i1hxiinv-0);}.Combobox_styles_isfa46_i1hxiinv__91df7bfb .Combobox_styles_isfa46_arrowInverse__91df7bfb{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg);}.Combobox_styles_isfa46_i1hxiinv__91df7bfb:hover,.Combobox_styles_isfa46_i1hxiinv__91df7bfb:active{color:var(--i1hxiinv-1);}
+.Combobox_styles_isfa46_sr87xox__91df7bfb{width:var(--sr87xox-0);height:var(--sr87xox-0);}
 
-.Combobox_styles_261unw_spp7ogj__2c339479{--plasma-emptystate-border-radius:var(--plasma-combobox-new-textfield-border-radius);--plasma-emptystate-padding:var(--plasma-combobox-new-empty-state-padding);--plasma-emptystate-font-family:var(--plasma-combobox-new-textfield-font-family);--plasma-emptystate-font-size:var(--plasma-combobox-new-textfield-font-size);--plasma-emptystate-font-style:var(--plasma-combobox-new-textfield-font-style);--plasma-emptystate-font-weight:var(--plasma-combobox-new-textfield-font-weight);--plasma-emptystate-font-letter-spacing:var(--plasma-combobox-new-textfield-letter-spacing);--plasma-emptystate-font-line-height:var(--plasma-combobox-new-textfield-line-height);}
-.Combobox_styles_261unw_s3gft12__2c339479{margin:0;padding:0;}
+.Combobox_styles_isfa46_spp7ogj__91df7bfb{--plasma-emptystate-border-radius:var(--plasma-combobox-new-textfield-border-radius);--plasma-emptystate-padding:var(--plasma-combobox-new-empty-state-padding);--plasma-emptystate-font-family:var(--plasma-combobox-new-textfield-font-family);--plasma-emptystate-font-size:var(--plasma-combobox-new-textfield-font-size);--plasma-emptystate-font-style:var(--plasma-combobox-new-textfield-font-style);--plasma-emptystate-font-weight:var(--plasma-combobox-new-textfield-font-weight);--plasma-emptystate-font-letter-spacing:var(--plasma-combobox-new-textfield-letter-spacing);--plasma-emptystate-font-line-height:var(--plasma-combobox-new-textfield-line-height);}
+.Combobox_styles_isfa46_s3gft12__91df7bfb{margin:0;padding:0;}
 
 .SelectNative_styles_18yw2bf_st8j5fy__14a96fe5{visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;}
 
@@ -699,8 +699,8 @@
 .SelectAll_styles_ql2mqj_d19w91z6__b71a8639{background:var(--surface-solid-card);}
 .SelectAll_styles_ql2mqj_d1nbef5q__b71a8639{height:0.0625rem;margin-top:var(--d1nbef5q-0);margin-right:var(--plasma-select-divider-margin-right);margin-left:var(--plasma-select-divider-margin-left);background:var(--plasma-select-divider-color);}
 
-.Select_styles_dta4dl_lpxbau6__559b5dde{width:var(--lpxbau6-0);padding:calc(var(--plasma-select-padding) + var(--plasma-select-dropdown-border-width,0rem));border-radius:var(--plasma-select-border-radius);box-sizing:border-box;background:var(--surface-solid-card);box-shadow:0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04), inset 0 0 0 var(--plasma-select-dropdown-border-width,0rem) var(--plasma-select-dropdown-border-color,transparent);}
-.Select_styles_dta4dl_u1yey2x3__559b5dde{max-height:var(--u1yey2x3-0);overflow-x:hidden;overflow-y:var(--u1yey2x3-1);border-radius:calc(var(--plasma-select-border-radius) - 0.125rem - var(--plasma-select-dropdown-border-width,0rem));margin:0;padding:0;}
+.Select_styles_bjoo18_lpxbau6__2367a782{width:var(--lpxbau6-0);padding:calc(var(--plasma-select-padding) + var(--plasma-select-dropdown-border-width,0rem));border-radius:var(--plasma-select-border-radius);box-sizing:border-box;background:var(--surface-solid-card);box-shadow:0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04), inset 0 0 0 var(--plasma-select-dropdown-border-width,0rem) var(--plasma-select-dropdown-border-color,transparent);}
+.Select_styles_bjoo18_u1yey2x3__2367a782{max-height:var(--u1yey2x3-0);overflow-y:var(--u1yey2x3-1);border-radius:calc(var(--plasma-select-border-radius) - 0.125rem - var(--plasma-select-dropdown-border-width,0rem));margin:0;padding:0;}
 
 
 .SelectNative_styles_1r538h6_satm3n2__407ae55b{visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;}
@@ -1056,12 +1056,13 @@
 
 .base_vkh53h_b1vzcfqx__e0f9eeea.base_vkh53h_b1vzcfqx__e0f9eeea[disabled]{opacity:var(--plasma-codeinput-disabled-opacity);cursor:not-allowed;}.base_vkh53h_b1vzcfqx__e0f9eeea.base_vkh53h_b1vzcfqx__e0f9eeea[disabled] > *{pointer-events:none;}
 
-.CodeField_styles_ebdpd0_b1xx9skx__3407b383{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-min-content;width:-moz-min-content;width:min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.CodeField_styles_ebdpd0_b1xx9skx__3407b383.CodeField_styles_ebdpd0_codefieldCaptionAlignLeft__3407b383{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-.CodeField_styles_ebdpd0_c1wzspax__3407b383{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.CodeField_styles_ebdpd0_c7swj1z__3407b383{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.CodeField_styles_ebdpd0_s13uxcg8__3407b383{width:var(--plasma-codefield-separator-width);}
-.CodeField_styles_ebdpd0_ig5h1kg__3407b383{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;}
-.CodeField_styles_ebdpd0_c1jpzjak__3407b383{text-align:var(--c1jpzjak-0);-webkit-align-self:var(--c1jpzjak-0);-ms-flex-item-align:var(--c1jpzjak-0);align-self:var(--c1jpzjak-0);width:var(--c1jpzjak-1);white-space:pre-line;}
+.CodeField_styles_14p25hi_b1xx9skx__a0f2e82d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-min-content;width:-moz-min-content;width:min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.CodeField_styles_14p25hi_b1xx9skx__a0f2e82d.CodeField_styles_14p25hi_codefieldCaptionAlignLeft__a0f2e82d{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.CodeField_styles_14p25hi_c1wzspax__a0f2e82d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.CodeField_styles_14p25hi_c7swj1z__a0f2e82d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.CodeField_styles_14p25hi_s13uxcg8__a0f2e82d{width:var(--plasma-codefield-separator-width);}
+.CodeField_styles_14p25hi_ig5h1kg__a0f2e82d{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;}
+.CodeField_styles_14p25hi_c1jpzjak__a0f2e82d{text-align:var(--c1jpzjak-0);-webkit-align-self:var(--c1jpzjak-0);-ms-flex-item-align:var(--c1jpzjak-0);align-self:var(--c1jpzjak-0);width:var(--c1jpzjak-1);white-space:pre-line;}
+.CodeField_styles_14p25hi_h1x845wl__a0f2e82d{display:none;}
 
 .base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_c1jpzjak__e66aaab8{color:var(--plasma-codefield-caption-color);}.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_c1jpzjak__e66aaab8.base_9a5yza_codefieldCaptionError__e66aaab8{color:var(--plasma-codefield-caption-color-error);}.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_ig5h1kg__e66aaab8{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.base_9a5yza_b1g41h91__e66aaab8:hover .base_9a5yza_codefieldItemHoverEnabled__e66aaab8{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.base_9a5yza_b1g41h91__e66aaab8:focus-within .base_9a5yza_ig5h1kg__e66aaab8:focus-within{background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldCodeErrorAnimation__e66aaab8{-webkit-animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards;animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards;}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldCodeError__e66aaab8 .base_9a5yza_ig5h1kg__e66aaab8{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldCodeError__e66aaab8:focus-within .base_9a5yza_ig5h1kg__e66aaab8{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldCodeError__e66aaab8.base_9a5yza_codefieldCodeErrorFade__e66aaab8 .base_9a5yza_ig5h1kg__e66aaab8{-webkit-animation:base_9a5yza_fadeErrorB1g41h91__e66aaab8 0.3s forwards;animation:base_9a5yza_fadeErrorB1g41h91__e66aaab8 0.3s forwards;}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemErrorAnimation__e66aaab8{-webkit-animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards;animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards;}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemError__e66aaab8,.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemError__e66aaab8:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemError__e66aaab8.base_9a5yza_codefieldCodeErrorFade__e66aaab8,.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemError__e66aaab8:focus-within.base_9a5yza_codefieldCodeErrorFade__e66aaab8{-webkit-animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards :local(fadeError-b1g41h91) 0.3s :local(forwards);animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards :local(fadeError-b1g41h91) 0.3s :local(forwards);}@-webkit-keyframes base_9a5yza_shakingErrorB1g41h91__e66aaab8{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes base_9a5yza_shakingErrorB1g41h91__e66aaab8{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes base_9a5yza_fadeErrorB1g41h91__e66aaab8{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes base_9a5yza_fadeErrorB1g41h91__e66aaab8{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
 

package/emotion/cjs/components/CodeField/CodeField.js

@@ -29,6 +29,7 @@ var _base = require("./variations/_view/base");
 var _base1 = require("./variations/_size/base");
 var _base2 = require("./variations/_shape/base");
 var _base3 = require("./variations/_disabled/base");
+var _useWebOTP = require("./hooks/useWebOTP");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -212,7 +213,8 @@ var codeFieldRoot = function(Root) {
             "onChange",
             "onFullCodeEnter"
         ]);
-        var _useState = _sliced_to_array((0, _react.useState)((0, _utils1.getCodeValue)(codeLength, outerValue || '')), 2), code = _useState[0], setCode = _useState[1];
+        var _useState = _sliced_to_array((0, _react.useState)((0, _utils1.getCodeValue)(codeLength, '')), 2), innerValue = _useState[0], setInnerValue = _useState[1];
+        var code = (outerValue === null || outerValue === void 0 ? void 0 : outerValue.length) ? (0, _utils1.getCodeValue)(codeLength, outerValue) : innerValue;
         var _useState1 = _sliced_to_array((0, _react.useState)(code.join('')), 2), originalValue = _useState1[0], setOriginalValue = _useState1[1];
         var inputRefs = (0, _react.useRef)([]);
         var inputContainerRef = (0, _react.useRef)(null);
@@ -221,6 +223,7 @@ var codeFieldRoot = function(Root) {
         var placeholderValue = (0, _utils1.getPlaceholderValue)(codeLength, placeholder);
         var parts = codeLength === 6 ? 2 : 1;
         var widthValue = width ? (0, _utils.getSizeValueFromProp)(width, 'rem') : undefined;
+        var isWebOTPEnabled = autoComplete === 'one-time-code' && !disabled && !(0, _utils1.isWebOTPSupported)();
         var getLastActiveIndex = function() {
             if (code.length && code.length < codeLength) {
                 return code.length;
@@ -230,6 +233,25 @@ var codeFieldRoot = function(Root) {
             });
             return lastEmptyIndex >= 0 ? lastEmptyIndex : codeLength - 1;
         };
+        var codeSetter = function(newCode) {
+            setInnerValue(newCode);
+            var originalCode = newCode.join('');
+            setOriginalValue(originalCode);
+            if (onChange) {
+                onChange(originalCode);
+            }
+            if (originalCode.length > 0) {
+                stopWebOTPListener();
+            }
+        };
+        var _useWebOTP1 = (0, _useWebOTP.useWebOTP)({
+            codeString: originalValue,
+            enableSMSAutoRead: autoComplete === 'one-time-code',
+            disabled: Boolean(disabled),
+            codeLength: codeLength,
+            codeSetter: codeSetter,
+            onFullCodeEnter: onFullCodeEnter
+        }), startWebOTPListener = _useWebOTP1.startWebOTPListener, stopWebOTPListener = _useWebOTP1.stopWebOTPListener;
         var handleClick = function() {
             if (disabled) {
                 return;
@@ -249,19 +271,24 @@ var codeFieldRoot = function(Root) {
                 return;
             }
             if (key === _constants.BACKSPACE_KEY) {
-                if (index > 0 && code[index] === '') {
-                    var _inputRefs_current_;
-                    (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+                if (index > 0) {
+                    var _inputRefs_current_index;
+                    var newCode = _to_consumable_array(code);
+                    newCode[index] = '';
+                    if (index >= codeLength - 1 && code[index]) {
+                        codeSetter(newCode);
+                        return;
+                    }
+                    if (!code[index]) {
+                        var _inputRefs_current_;
+                        newCode[index - 1] = '';
+                        (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+                    }
+                    (_inputRefs_current_index = inputRefs.current[index]) === null || _inputRefs_current_index === void 0 ? void 0 : _inputRefs_current_index.classList.remove(_CodeFieldtokens.classes.itemError);
+                    codeSetter(newCode);
                 }
             }
         };
-        var codeSetter = function(newCode) {
-            setCode(newCode);
-            setOriginalValue(newCode.join(''));
-            if (onChange) {
-                onChange(newCode.join(''));
-            }
-        };
         var handleChange = function(event, index) {
             var _inputRefs_current_index;
             if (disabled) {
@@ -292,8 +319,6 @@ var codeFieldRoot = function(Root) {
                 return;
             }
             if (!symbol) {
-                newCode[index] = '';
-                codeSetter(newCode);
                 return;
             }
             if (fieldPattern.test(symbol)) {
@@ -311,8 +336,9 @@ var codeFieldRoot = function(Root) {
                     index: index,
                     newCode: newCode,
                     inputRefs: inputRefs,
-                    setCode: setCode,
-                    codeSetter: codeSetter
+                    setInnerValue: setInnerValue,
+                    codeSetter: codeSetter,
+                    onChange: onChange
                 });
             }
         };
@@ -339,6 +365,7 @@ var codeFieldRoot = function(Root) {
             if (onFullCodeEnter) {
                 onFullCodeEnter(fullCode);
             }
+            startWebOTPListener();
         }, []);
         (0, _hooks1.useCodeHook)({
             inputRefs: inputRefs,
@@ -358,7 +385,7 @@ var codeFieldRoot = function(Root) {
                     inputRefs: inputRefs,
                     inputContainerRef: inputContainerRef,
                     captionRef: captionRef,
-                    setCode: setCode,
+                    setInnerValue: setInnerValue,
                     codeSetter: codeSetter
                 });
             }
@@ -373,7 +400,7 @@ var codeFieldRoot = function(Root) {
             disabled: disabled,
             onClick: handleClick,
             className: (0, _classnames.default)(className, _define_property({}, _CodeFieldtokens.classes.captionAlignLeft, captionAlign === 'left'))
-        }, rest), /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.CodeWrapper, {
+        }, !isWebOTPEnabled && _object_spread({}, rest)), /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.CodeWrapper, {
             ref: inputContainerRef
         }, _to_consumable_array(Array(parts)).map(function(_, partIndex) {
             return /*#__PURE__*/ _react.default.createElement(_react.Fragment, {
@@ -390,7 +417,6 @@ var codeFieldRoot = function(Root) {
                     },
                     className: (0, _classnames.default)((_obj = {}, _define_property(_obj, _CodeFieldtokens.classes.segmented, shape === 'segmented'), _define_property(_obj, _CodeFieldtokens.classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length), _obj)),
                     value: code[inputCorrectIndex] || '',
-                    autoComplete: autoComplete,
                     onChange: function(e) {
                         handleChange(e, inputCorrectIndex);
                     },
@@ -407,7 +433,9 @@ var codeFieldRoot = function(Root) {
             ref: captionRef,
             captionAlign: captionAlign,
             widthValue: widthValue
-        }, caption));
+        }, caption), isWebOTPEnabled && /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.HiddenInput, _object_spread({
+            tabIndex: -1
+        }, rest)));
     });
 };
 var codeFieldConfig = {

package/emotion/cjs/components/CodeField/CodeField.styles.js

@@ -18,6 +18,9 @@ _export(exports, {
     get CodeWrapper () {
         return CodeWrapper;
     },
+    get HiddenInput () {
+        return HiddenInput;
+    },
     get ItemInput () {
         return ItemInput;
     },
@@ -36,25 +39,25 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-var base = (0, /*#__PURE__*/ _react.css)("display:flex;flex-direction:column;justify-content:center;width:min-content;align-items:center;&.", _CodeFieldtokens.classes.captionAlignLeft, "{align-items:flex-start;}", "base", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtvQiJ9 */");
+var base = (0, /*#__PURE__*/ _react.css)("display:flex;flex-direction:column;justify-content:center;width:min-content;align-items:center;&.", _CodeFieldtokens.classes.captionAlignLeft, "{align-items:flex-start;}", "base", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgZGlzcGxheTogbm9uZTtcbmA7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS29CIn0= */");
 var CodeWrapper = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "eoyu9jx0",
+    target: "eh6ghy40",
     label: "CodeWrapper"
-})("display:flex;align-items:center;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCMkIifQ== */");
+})("display:flex;align-items:center;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgZGlzcGxheTogbm9uZTtcbmA7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUIyQiJ9 */");
 var CodeGroup = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "eoyu9jx1",
+    target: "eh6ghy41",
     label: "CodeGroup"
-})("display:flex;align-items:center;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCeUIifQ== */");
+})("display:flex;align-items:center;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgZGlzcGxheTogbm9uZTtcbmA7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0J5QiJ9 */");
 var Separator = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "eoyu9jx2",
+    target: "eh6ghy42",
     label: "Separator"
-})("width:var(", _CodeFieldtokens.tokens.separatorWidth, ");", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCeUIifQ== */");
+})("width:var(", _CodeFieldtokens.tokens.separatorWidth, ");", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgZGlzcGxheTogbm9uZTtcbmA7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkJ5QiJ9 */");
 var ItemInput = (0, /*#__PURE__*/ _styled.default)("input", {
-    target: "eoyu9jx3",
+    target: "eh6ghy43",
     label: "ItemInput"
-})("box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCeUIifQ== */");
+})("box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgZGlzcGxheTogbm9uZTtcbmA7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0J5QiJ9 */");
 var CaptionWrapper = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "eoyu9jx4",
+    target: "eh6ghy44",
     label: "CaptionWrapper"
 })("text-align:", function(param) {
     var captionAlign = param.captionAlign;
@@ -65,4 +68,8 @@ var CaptionWrapper = (0, /*#__PURE__*/ _styled.default)("div", {
 }, ";width:", function(param) {
     var widthValue = param.widthValue;
     return widthValue || 'auto';
-}, ";white-space:pre-line;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDOEIifQ== */");
+}, ";white-space:pre-line;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgZGlzcGxheTogbm9uZTtcbmA7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUM4QiJ9 */");
+var HiddenInput = (0, /*#__PURE__*/ _styled.default)("input", {
+    target: "eh6ghy45",
+    label: "HiddenInput"
+})("display:none;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Db2RlRmllbGQvQ29kZUZpZWxkLnN0eWxlcy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vQ29kZUZpZWxkLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICYuJHtjbGFzc2VzLmNhcHRpb25BbGlnbkxlZnR9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IENvZGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29kZUdyb3VwID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gc3R5bGVkLmRpdmBcbiAgICB3aWR0aDogdmFyKCR7dG9rZW5zLnNlcGFyYXRvcldpZHRofSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSXRlbUlucHV0ID0gc3R5bGVkLmlucHV0YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICBib3JkZXI6IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbmA7XG5cbmV4cG9ydCBjb25zdCBDYXB0aW9uV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBjYXB0aW9uQWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInOyB3aWR0aFZhbHVlPzogc3RyaW5nIH0+YFxuICAgIHRleHQtYWxpZ246ICR7KHsgY2FwdGlvbkFsaWduIH0pID0+IGNhcHRpb25BbGlnbn07XG4gICAgYWxpZ24tc2VsZjogJHsoeyBjYXB0aW9uQWxpZ24gfSkgPT4gY2FwdGlvbkFsaWdufTtcbiAgICB3aWR0aDogJHsoeyB3aWR0aFZhbHVlIH0pID0+IHdpZHRoVmFsdWUgfHwgJ2F1dG8nfTtcbiAgICB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGlkZGVuSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICAgZGlzcGxheTogbm9uZTtcbmA7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0QyQiJ9 */");

package/emotion/cjs/components/CodeField/hooks/useWebOTP.js

@@ -0,0 +1,254 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useWebOTP", {
+    enumerable: true,
+    get: function() {
+        return useWebOTP;
+    }
+});
+var _react = require("react");
+var _utils = require("../utils");
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+// Type guard function to check if credential is OTPCredential
+var isOTPCredential = function(credential) {
+    return credential !== null && 'code' in credential;
+};
+var useWebOTP = function(param) {
+    var codeString = param.codeString, enableSMSAutoRead = param.enableSMSAutoRead, disabled = param.disabled, codeLength = param.codeLength, codeSetter = param.codeSetter, onFullCodeEnter = param.onFullCodeEnter;
+    var abortControllerRef = (0, _react.useRef)(null);
+    var startWebOTPListener = (0, _react.useCallback)(function() {
+        return _async_to_generator(function() {
+            var otp, otpCode, newCode, err;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (!enableSMSAutoRead || disabled || !(0, _utils.isWebOTPSupported)()) {
+                            return [
+                                2
+                            ];
+                        }
+                        if (abortControllerRef.current) {
+                            abortControllerRef.current.abort();
+                        }
+                        abortControllerRef.current = new AbortController();
+                        _state.label = 1;
+                    case 1:
+                        _state.trys.push([
+                            1,
+                            3,
+                            ,
+                            4
+                        ]);
+                        return [
+                            4,
+                            navigator.credentials.get({
+                                otp: {
+                                    transport: [
+                                        'sms'
+                                    ]
+                                },
+                                signal: abortControllerRef.current.signal
+                            })
+                        ];
+                    case 2:
+                        otp = _state.sent();
+                        // Type guard to check if it's an OTP credential
+                        if (otp && isOTPCredential(otp) && otp.code) {
+                            otpCode = otp.code;
+                            // Validate the OTP code length matches our expected length
+                            if (otpCode.length === codeLength) {
+                                newCode = (0, _utils.getCodeValue)(codeLength, otpCode);
+                                codeSetter(newCode);
+                                // Trigger full code enter callback
+                                if (onFullCodeEnter) {
+                                    onFullCodeEnter(otpCode);
+                                }
+                            }
+                        }
+                        return [
+                            3,
+                            4
+                        ];
+                    case 3:
+                        err = _state.sent();
+                        if (_instanceof(err, DOMException)) {
+                            if (err.name !== 'AbortError' && err.name !== 'NotAllowedError') {
+                                console.warn('Web OTP API error:', err);
+                            }
+                        } else if (_instanceof(err, Error)) {
+                            console.warn('Web OTP API error:', err);
+                        } else {
+                            console.warn('Unknown Web OTP API error:', err);
+                        }
+                        return [
+                            3,
+                            4
+                        ];
+                    case 4:
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    }, [
+        enableSMSAutoRead,
+        disabled,
+        codeLength,
+        onFullCodeEnter
+    ]);
+    var stopWebOTPListener = (0, _react.useCallback)(function() {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+        }
+    }, []);
+    (0, _react.useEffect)(function() {
+        if ((0, _utils.isWebOTPSupported)() && codeString === '' && enableSMSAutoRead && !disabled) {
+            startWebOTPListener();
+        } else {
+            stopWebOTPListener();
+        }
+        return function() {
+            stopWebOTPListener();
+        };
+    }, [
+        codeString,
+        enableSMSAutoRead,
+        disabled,
+        startWebOTPListener,
+        stopWebOTPListener
+    ]);
+    return {
+        startWebOTPListener: startWebOTPListener,
+        stopWebOTPListener: stopWebOTPListener
+    };
+};

package/emotion/cjs/components/CodeField/utils/handleCodeError.js

@@ -37,7 +37,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var handleCodeError = function(param) {
-    var codeLength = param.codeLength, codeErrorBehavior = param.codeErrorBehavior, currentCode = param.currentCode, inputRefs = param.inputRefs, inputContainerRef = param.inputContainerRef, captionRef = param.captionRef, setCode = param.setCode, codeSetter = param.codeSetter;
+    var codeLength = param.codeLength, codeErrorBehavior = param.codeErrorBehavior, currentCode = param.currentCode, inputRefs = param.inputRefs, inputContainerRef = param.inputContainerRef, captionRef = param.captionRef, setInnerValue = param.setInnerValue, codeSetter = param.codeSetter;
     if (!inputContainerRef.current) {
         return;
     }
@@ -51,7 +51,7 @@ var handleCodeError = function(param) {
                 var newCode = _to_consumable_array(currentCode);
                 newCode.pop();
                 codeSetter(newCode);
-                setCode(currentCode);
+                setInnerValue(currentCode);
                 (_inputContainerRef_current = inputContainerRef.current) === null || _inputContainerRef_current === void 0 ? void 0 : _inputContainerRef_current.classList.remove(_CodeFieldtokens.classes.codeErrorAnimation);
                 setTimeout(function() {
                     var _inputRefs_current_, _inputRefs_current_1;