@salutejs/plasma-new-hope 0.336.0-canary.2219.17586567115.0 → 0.336.0-canary.2219.17680564117.0

package/es/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.css

@@ -0,0 +1,58 @@
+.IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
+
+.base_sp7461_b13tc97x__6c2a9135{color:var(--plasma-chip-color);background-color:var(--plasma-chip-background);}.base_sp7461_b13tc97x__6c2a9135:hover{color:var(--plasma-chip-color-hover);background-color:var(--plasma-chip-background-hover);}.base_sp7461_b13tc97x__6c2a9135:active{color:var(--plasma-chip-color-active);background-color:var(--plasma-chip-background-active);}
+
+.base_1o8ygxu_b1pde8v1__ca0b05f4{font-family:var(--plasma-chip-font-family);font-size:var(--plasma-chip-font-size);font-style:var(--plasma-chip-font-style);font-weight:var(--plasma-chip-font-weight);-webkit-letter-spacing:var(--plasma-chip-letter-spacing);-moz-letter-spacing:var(--plasma-chip-letter-spacing);-ms-letter-spacing:var(--plasma-chip-letter-spacing);letter-spacing:var(--plasma-chip-letter-spacing);line-height:var(--plasma-chip-lineheight);border-radius:var(--plasma-chip-border-radius);width:var(--plasma-chip-width);height:var(--plasma-chip-height);padding:var(--plasma-chip-padding);}
+
+.base_rmcs0j_b16ulzzx__f8cae226[disabled]{opacity:var(--plasma-chip-disabled-opacity);cursor:not-allowed;}.base_rmcs0j_b16ulzzx__f8cae226[disabled]:hover,.base_rmcs0j_b16ulzzx__f8cae226[disabled]:active{scale:none;color:var(--plasma-chip-color);background-color:var(--plasma-chip-background);}
+
+.base_1nfit77_b10y1phq__6aaec899[readonly]{color:var(--plasma-chip-color-readonly);background-color:var(--plasma-chip-background-readonly);}.base_1nfit77_b10y1phq__6aaec899[readonly]:hover,.base_1nfit77_b10y1phq__6aaec899[readonly]:active{scale:none;cursor:default;color:var(--plasma-chip-color-readonly-hover);background-color:var(--plasma-chip-background-readonly-hover);}
+
+.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
+
+.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
+
+.Chip_styles_fnd4j5_bol5daj__7a13f27c{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+.Chip_styles_fnd4j5_sj20on5__7a13f27c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);color:var(--plasma-chip-left-content-color);}
+.Chip_styles_fnd4j5_s1ror4o9__7a13f27c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.Chip_styles_fnd4j5_swddmyi__7a13f27c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-right-content-margin-left);margin-right:var(--swddmyi-0);}
+.Chip_styles_fnd4j5_s1pcflhj__7a13f27c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-clear-content-margin-left);margin-right:var(--plasma-chip-clear-content-margin-right);color:var(--plasma-chip-close-icon-color);}
+
+.TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd{--plasma-chip-color:var(--plasma-textfield__chip-color);--plasma-chip-background:var(--plasma-textfield__chip-background);--plasma-chip-color-hover:var(--plasma-textfield__chip-color-hover);--plasma-chip-background-hover:var(--plasma-textfield__chip-background-hover);--plasma-chip-color-active:var(--plasma-textfield__chip-color-active);--plasma-chip-background-active:var(--plasma-textfield__chip-background-active);--plasma-chip-background-readonly:var(--plasma-textfield__chip-background-readonly);--plasma-chip-color-readonly:var(--plasma-textfield__chip-color-readonly);--plasma-chip-background-readonly-hover:var(--plasma-textfield__chip-background-readonly-hover);--plasma-chip-color-readonly-hover:var(--plasma-textfield__chip-color-readonly-hover);--plasma-chip-border-radius:var(--plasma-textfield__chip-border-radius);--plasma-chip-width:var(--plasma-textfield__chip-width);--plasma-chip-height:var(--plasma-textfield__chip-height);--plasma-chip-padding:var(--plasma-textfield__chip-padding);--plasma-chip-font-family:var(--plasma-textfield__chip-font-family);--plasma-chip-font-size:var(--plasma-textfield__chip-font-size);--plasma-chip-font-style:var(--plasma-textfield__chip-font-style);--plasma-chip-font-weight:var(--plasma-textfield__chip-font-weight);--plasma-chip-letter-spacing:var(--plasma-textfield__chip-letter-spacing);--plasma-chip-lineheight:var(--plasma-textfield__chip-line-height);--plasma-chip-clear-content-margin-left:var(--plasma-textfield__chip-clear-content-margin-left);--plasma-chip-clear-content-margin-right:var(--plasma-textfield__chip-clear-content-margin-right);--plasma-chip-close-icon-size:var(--plasma-textfield__chip-close-icon-size);--plasma-chip-close-icon-color:var(--plasma-textfield__chip-close-icon-color);--plasma-chip-focus-color:var(--plasma-textfield-focus-color);-webkit-scroll-snap-align:center;-moz-scroll-snap-align:center;-ms-scroll-snap-align:center;scroll-snap-align:center;-webkit-scroll-snap-stop:normal;-moz-scroll-snap-stop:normal;-ms-scroll-snap-stop:normal;scroll-snap-stop:normal;position:relative;}.TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd.TextFieldChip_styles_14q069b_focusVisible__9f1b34fd:focus::before,.TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd[readonly]{opacity:var(--plasma-textfield__chip-opacity-readonly);}
+.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd{display:block;-webkit-flex:none;-ms-flex:none;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);color:var(--plasma-textfield-color);position:relative;}.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd.TextFieldChip_styles_14q069b_focusVisible__9f1b34fd:focus::before,.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd:after{content:',';}.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd:last-child:after{content:'';}
+
+.Popover_styles_ji8em4_s1g1xbt5__439b9cc0{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;position:relative;}
+.Popover_styles_ji8em4_s12xwbyh__439b9cc0{display:inline-block;}.Popover_styles_ji8em4_s12xwbyh__439b9cc0.Popover_styles_ji8em4_popoverTargetAsRef__439b9cc0{position:absolute;top:0;left:0;width:100%;height:100%;}.Popover_styles_ji8em4_s12xwbyh__439b9cc0.Popover_styles_ji8em4_popoverTargetAsRef__439b9cc0 .Popover_styles_ji8em4_s1g1xbt5__439b9cc0{width:100%;height:100%;display:block;}
+.Popover_styles_ji8em4_s1pd4d8a__439b9cc0{width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);}.Popover_styles_ji8em4_s1pd4d8a__439b9cc0::before{position:absolute;width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);-webkit-mask-image:var(--plasma-popover-arrow-mask-image);mask-image:var(--plasma-popover-arrow-mask-image);background:var(--plasma-popover-arrow-background);content:'';-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.Popover_styles_ji8em4_s16xlixz__439b9cc0{position:absolute;z-index:var(--s16xlixz-0);opacity:0;visibility:hidden;box-shadow:var(--plasma-popover-box-shadow);}.Popover_styles_ji8em4_s16xlixz__439b9cc0.Popover_styles_ji8em4_popoverAnimate__439b9cc0{-webkit-transition:opacity 0.2s ease-in-out,-webkit-transform 0s ease-in-out,visibility 0.2s;-webkit-transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}.Popover_styles_ji8em4_s16xlixz__439b9cc0.Popover_styles_ji8em4_popoverOpen__439b9cc0{opacity:1;visibility:visible;}.Popover_styles_ji8em4_s16xlixz__439b9cc0:before{content:'';display:block;position:absolute;background:transparent;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{bottom:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{right:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{left:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{bottom:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{bottom:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:unset !important;bottom:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-end']:before{top:unset;left:0;right:0;height:var(--plasma-popover-arrow-height);bottom:calc(-1 * var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-end']:before{top:calc(-1 * var(--plasma-popover-arrow-height));left:0;right:0;bottom:var(--plasma-popover-arrow-height);height:var(--plasma-popover-arrow-height);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;right:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;left:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}
+
+.Tooltip_styles_1bh0sd0_teczcv4__e6cc0309{padding:var(--plasma-tooltip-padding-top) var(--plasma-tooltip-padding-right) var(--plasma-tooltip-padding-bottom) var(--plasma-tooltip-padding-left);min-height:var(--plasma-tooltip-min-height);box-sizing:border-box;background-color:var(--plasma-tooltip-background-color);border-radius:var(--plasma-tooltip-border-radius);box-shadow:var(--plasma-tooltip-box-shadow);color:var(--plasma-tooltip-color);font-family:var(--plasma-tooltip-text-font-family);font-size:var(--plasma-tooltip-text-font-size);font-style:var(--plasma-tooltip-text-font-style);font-weight:var(--plasma-tooltip-text-font-weight);-webkit-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-moz-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);-ms-letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);letter-spacing:var(--plasma-tooltip-text-font-letter-spacing);line-height:var(--plasma-tooltip-text-font-line-height);max-width:var(--teczcv4-0);min-width:var(--teczcv4-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word;pointer-events:none;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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
+.Tooltip_styles_1bh0sd0_s1j361h1__e6cc0309{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;margin-right:var(--plasma-tooltip-content-left-margin);height:var(--plasma-tooltip-text-font-line-height);}
+
+.Tooltip_1qsg6ij_s1cz8cv8__da7f9e0a{--plasma-popover-arrow-mask-width:var(--plasma-tooltip-arrow-mask-width);--plasma-popover-arrow-mask-height:var(--plasma-tooltip-arrow-mask-height);--plasma-popover-arrow-mask-image:var(--plasma-tooltip-arrow-mask-image);--plasma-popover-arrow-background:var(--plasma-tooltip-arrow-background);--plasma-popover-arrow-height:var(--plasma-tooltip-arrow-height);--plasma-popover-arrow-edge-margin:var(--plasma-tooltip-arrow-edge-margin);}
+
+.TextField_styles_xvs3tf_iq39zt5__6229ab57{position:relative;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;box-sizing:border-box;}
+.TextField_styles_xvs3tf_i1j28rg8__6229ab57{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_xvs3tf_i1j28rg8__6229ab57::-webkit-scrollbar{display:none;}.TextField_styles_xvs3tf_i1j28rg8__6229ab57.TextField_styles_xvs3tf_hasChips__6229ab57{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
+.TextField_styles_xvs3tf_s13zudoe__6229ab57{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-margin-right,var(--plasma-textfield__chip-gap));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+.TextField_styles_xvs3tf_io4bpie__6229ab57{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;}.TextField_styles_xvs3tf_io4bpie__6229ab57.TextField_styles_xvs3tf_textfieldInputTextEllipsis__6229ab57{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.TextField_styles_xvs3tf_io4bpie__6229ab57::-webkit-input-placeholder{opacity:0;}.TextField_styles_xvs3tf_io4bpie__6229ab57::-moz-placeholder{opacity:0;}.TextField_styles_xvs3tf_io4bpie__6229ab57:-ms-input-placeholder{opacity:0;}.TextField_styles_xvs3tf_io4bpie__6229ab57::placeholder{opacity:0;}
+.TextField_styles_xvs3tf_i13qvwoy__6229ab57{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;min-width:var(--i13qvwoy-0);}.TextField_styles_xvs3tf_i13qvwoy__6229ab57 .TextField_styles_xvs3tf_io4bpie__6229ab57{max-width:var(--i13qvwoy-1);}
+.TextField_styles_xvs3tf_i19ry60d__6229ab57{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;line-height:inherit;color:var(--plasma-textfield__placeholder-color);padding:var(--i19ry60d-0);}
+.TextField_styles_xvs3tf_obt1ohz__6229ab57{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;white-space:var(--obt1ohz-0);margin-bottom:var(--obt1ohz-1);}
+.TextField_styles_xvs3tf_tlv9av6__6229ab57{display:inline-block;margin-left:auto;}
+.TextField_styles_xvs3tf_s600610__6229ab57{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.TextField_styles_xvs3tf_luk2zst__6229ab57{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
+.TextField_styles_xvs3tf_s1gjsnfi__6229ab57{margin:var(--plasma-textfield__left-content-margin);color:var(--s1gjsnfi-0);line-height:0;}
+.TextField_styles_xvs3tf_ssv2kwg__6229ab57{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;}
+.TextField_styles_xvs3tf_s190z894__6229ab57{line-height:0;margin:var(--plasma-textfield__right-content-margin);color:var(--plasma-textfield-content-right-slot-color,var(--plasma-textfield-content-slot-color));}.TextField_styles_xvs3tf_s190z894__6229ab57:hover{color:var(--plasma-textfield-content-right-slot-color-hover,var(--plasma-textfield-content-slot-color-hover));cursor:pointer;}.TextField_styles_xvs3tf_s190z894__6229ab57:active{color:var(--plasma-textfield-content-right-slot-color-active,var(--plasma-textfield-content-slot-color-active));}
+
+.TextField_styles_xvs3tf_s7hnwwb__6229ab57{visibility:var(--s7hnwwb-0);}
+
+.TextField_styles_xvs3tf_s14qvple__6229ab57{color:var(--plasma-textfield__optional-color);}
+.TextField_styles_xvs3tf_s16itze4__6229ab57{display:inline-block;line-height:0;}.TextField_styles_xvs3tf_s16itze4__6229ab57.TextField_styles_xvs3tf_labelPlacementInner__6229ab57{position:absolute;margin:0;inset:var(--plasma-textfield__hint-inner-label-placement-offset);}
+.TextField_styles_xvs3tf_h1skqnhr__6229ab57{color:var(--plasma-textfield__hint-icon-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.TextField_styles_xvs3tf_hgy0im1__6229ab57 .TextField_styles_xvs3tf_h1skqnhr__6229ab57 .TextField_styles_xvs3tf_popoverRoot__6229ab57{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+.TextField_styles_xvs3tf_h8yezh4__6229ab57{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.TextField_styles_xvs3tf_szsveq4__6229ab57{position:absolute;border-radius:50%;background-color:var(--plasma-textfield__indicator-color);}.TextField_styles_xvs3tf_szsveq4__6229ab57.TextField_styles_xvs3tf_labelPlacementOuter__6229ab57{width:var(--plasma-textfield__indicator-size-outer);height:var(--plasma-textfield__indicator-size-outer);inset:var(--plasma-textfield__indicator-placement-outer);}.TextField_styles_xvs3tf_szsveq4__6229ab57.TextField_styles_xvs3tf_labelPlacementOuter__6229ab57.TextField_styles_xvs3tf_requiredAlignRight__6229ab57{inset:var(--plasma-textfield__indicator-placement-outer-right);}.TextField_styles_xvs3tf_szsveq4__6229ab57.TextField_styles_xvs3tf_labelPlacementOuter__6229ab57.TextField_styles_xvs3tf_requiredAlignRight__6229ab57.TextField_styles_xvs3tf_textfieldHasHint__6229ab57{right:calc( -1 * var(--plasma-textfield__indicator-size-outer) + var(--plasma-textfield__indicator-hint-placement-outer-right,0px) );}.TextField_styles_xvs3tf_szsveq4__6229ab57.TextField_styles_xvs3tf_labelPlacementInner__6229ab57{width:var(--plasma-textfield__indicator-size-inner);height:var(--plasma-textfield__indicator-size-inner);inset:var(--plasma-textfield__indicator-placement-inner);}.TextField_styles_xvs3tf_szsveq4__6229ab57.TextField_styles_xvs3tf_labelPlacementInner__6229ab57.TextField_styles_xvs3tf_requiredAlignRight__6229ab57{inset:var(--plasma-textfield__indicator-placement-inner-right);}
+
+.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7{--plasma-chip-color:var(--plasma-textfield__chip-color);--plasma-chip-background:var(--plasma-textfield__chip-background);--plasma-chip-color-hover:var(--plasma-textfield__chip-color-hover);--plasma-chip-background-hover:var(--plasma-textfield__chip-background-hover);--plasma-chip-color-active:var(--plasma-textfield__chip-color-active);--plasma-chip-background-active:var(--plasma-textfield__chip-background-active);--plasma-chip-background-readonly:var(--plasma-textfield__chip-background-readonly);--plasma-chip-color-readonly:var(--plasma-textfield__chip-color-readonly);--plasma-chip-background-readonly-hover:var(--plasma-textfield__chip-background-readonly-hover);--plasma-chip-color-readonly-hover:var(--plasma-textfield__chip-color-readonly-hover);--plasma-chip-border-radius:var(--plasma-textfield__chip-border-radius);--plasma-chip-width:var(--plasma-textfield__chip-width);--plasma-chip-height:var(--plasma-textfield__chip-height);--plasma-chip-padding:var(--plasma-textfield__chip-padding);--plasma-chip-font-family:var(--plasma-textfield__chip-font-family);--plasma-chip-font-size:var(--plasma-textfield__chip-font-size);--plasma-chip-font-style:var(--plasma-textfield__chip-font-style);--plasma-chip-font-weight:var(--plasma-textfield__chip-font-weight);--plasma-chip-letter-spacing:var(--plasma-textfield__chip-letter-spacing);--plasma-chip-lineheight:var(--plasma-textfield__chip-line-height);--plasma-chip-clear-content-margin-left:var(--plasma-textfield__chip-clear-content-margin-left);--plasma-chip-clear-content-margin-right:var(--plasma-textfield__chip-clear-content-margin-right);--plasma-chip-close-icon-size:var(--plasma-textfield__chip-close-icon-size);--plasma-chip-close-icon-color:var(--plasma-textfield__chip-close-icon-color);--plasma-chip-focus-color:var(--plasma-textfield-focus-color);--plasma-chip-disabled-opacity:0.4;position:relative;}.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7.TextFieldChipNew_styles_y9tozi_focusVisible__d1734be7:focus::before,.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7[readonly]{opacity:var(--plasma-textfield__chip-opacity-readonly);}
+.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7{display:block;-webkit-flex:none;-ms-flex:none;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);color:var(--plasma-textfield-color);position:relative;}.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7.TextFieldChipNew_styles_y9tozi_focusVisible__d1734be7:focus::before,.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7:after{content:',';}.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7:last-child:after{content:'';}

package/es/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { TextChip } from '../TextFieldChip/TextFieldChip.styles.js';
+import { StyledChips } from '../../TextField.styles.js';
+import { classes } from '../../TextField.tokens.js';
+import { StyledChip } from './TextFieldChipNew.styles.js';
+
+var TextFieldChipNew = function TextFieldChipNew(_ref) {
+  var chips = _ref.chips,
+    onChipClick = _ref.onChipClick,
+    getRef = _ref.getRef,
+    handleChipKeyDown = _ref.handleChipKeyDown,
+    onChipClear = _ref.onChipClear,
+    readOnly = _ref.readOnly,
+    chipType = _ref.chipType,
+    view = _ref.view,
+    _forceChipManipulationWithReadonly = _ref._forceChipManipulationWithReadonly;
+  return /*#__PURE__*/React.createElement(StyledChips, {
+    className: classes.chipsWrapper
+  }, chips.map(function (_ref2, index) {
+    var value = _ref2.value,
+      label = _ref2.label,
+      disabled = _ref2.disabled;
+    var chipId = "".concat(index, "_").concat(value);
+    var onKeyDownHandle = function onKeyDownHandle(event) {
+      if (handleChipKeyDown) {
+        handleChipKeyDown(event, chipId, index);
+      }
+      if (event.key === 'Enter' || event.key === 'Backspace') {
+        if (onChipClick) {
+          onChipClick({
+            value: value,
+            label: label,
+            disabled: disabled
+          });
+        }
+      }
+    };
+    var handleClick = function handleClick(event) {
+      event.stopPropagation();
+      if (onChipClick) {
+        onChipClick({
+          value: value,
+          label: label,
+          disabled: disabled
+        });
+      }
+      if (onChipClear) {
+        onChipClear(chipId, index);
+      }
+    };
+    return chipType === 'default' ? /*#__PURE__*/React.createElement(StyledChip, {
+      key: chipId,
+      ref: function ref(element) {
+        return getRef(element, index);
+      },
+      tabIndex: -1,
+      disabled: disabled,
+      hasClear: !disabled,
+      readOnly: readOnly,
+      onClick: handleClick,
+      onKeyDown: onKeyDownHandle,
+      text: label,
+      view: view
+      // TODO: #1547
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ,
+      _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
+    }) : /*#__PURE__*/React.createElement(TextChip, {
+      tabIndex: -1,
+      onClick: handleClick,
+      onKeyDown: onKeyDownHandle
+    }, label);
+  }));
+};
+
+export { TextFieldChipNew };
+//# sourceMappingURL=TextFieldChipNew.js.map

package/es/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldChipNew.js","sources":["../../../../../src/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.tsx"],"sourcesContent":["import React, { FC, KeyboardEvent } from 'react';\nimport { TextChip } from 'src/components/TextField/ui/TextFieldChip/TextFieldChip.styles';\n\nimport { StyledChips } from '../../TextField.styles';\nimport { classes } from '../../TextField.tokens';\n\nimport { StyledChip } from './TextFieldChipNew.styles';\n\nexport const TextFieldChipNew: FC<{\n    chips: { value: string; label: string; disabled: boolean }[];\n    onChipClick: (chip: { value: string; label: string; disabled: boolean }) => void;\n    getRef: (...e: any) => void;\n    handleChipKeyDown: (event: KeyboardEvent<HTMLButtonElement>, chipId: string, chipIndex: number) => void;\n    onChipClear: (clearId: string, index: number) => void;\n    readOnly: boolean;\n    chipType?: string;\n    view?: string;\n    _forceChipManipulationWithReadonly?: any;\n}> = ({\n    chips,\n    onChipClick,\n    getRef,\n    handleChipKeyDown,\n    onChipClear,\n    readOnly,\n    chipType,\n    view,\n    _forceChipManipulationWithReadonly,\n}) => {\n    return (\n        <StyledChips className={classes.chipsWrapper}>\n            {chips.map(({ value, label, disabled }, index) => {\n                const chipId = `${index}_${value}`;\n\n                const onKeyDownHandle = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n                    if (handleChipKeyDown) {\n                        handleChipKeyDown(event, chipId, index);\n                    }\n\n                    if (event.key === 'Enter' || event.key === 'Backspace') {\n                        if (onChipClick) {\n                            onChipClick({ value, label, disabled });\n                        }\n                    }\n                };\n\n                const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n                    event.stopPropagation();\n\n                    if (onChipClick) {\n                        onChipClick({ value, label, disabled });\n                    }\n\n                    if (onChipClear) {\n                        onChipClear(chipId, index);\n                    }\n                };\n\n                return chipType === 'default' ? (\n                    <StyledChip\n                        key={chipId}\n                        ref={(element) => getRef(element, index)}\n                        tabIndex={-1}\n                        disabled={disabled}\n                        hasClear={!disabled}\n                        readOnly={readOnly}\n                        onClick={handleClick}\n                        onKeyDown={onKeyDownHandle}\n                        text={label}\n                        view={view}\n                        // TODO: #1547\n                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                        // @ts-ignore\n                        _forceChipManipulationWithReadonly={_forceChipManipulationWithReadonly}\n                    />\n                ) : (\n                    <TextChip tabIndex={-1} onClick={handleClick} onKeyDown={onKeyDownHandle}>\n                        {label}\n                    </TextChip>\n                );\n            })}\n        </StyledChips>\n    );\n};\n"],"names":["TextFieldChipNew","_ref","chips","onChipClick","getRef","handleChipKeyDown","onChipClear","readOnly","chipType","view","_forceChipManipulationWithReadonly","React","createElement","StyledChips","className","classes","chipsWrapper","map","_ref2","index","value","label","disabled","chipId","concat","onKeyDownHandle","event","key","handleClick","stopPropagation","StyledChip","ref","element","tabIndex","hasClear","onClick","onKeyDown","text","TextChip"],"mappings":"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"}

package/es/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.styles.js

@@ -0,0 +1,21 @@
+import './TextFieldChipNew.styles_y9tozi.css';
+import { styled } from '@linaria/react';
+import { component, mergeConfig } from '../../../../engines/common.js';
+import { chipConfig } from '../../../Chip/Chip.js';
+
+// issue #823
+var mergedConfig = /*#__PURE__*/mergeConfig(chipConfig);
+var Chip = /*#__PURE__*/component(mergedConfig);
+
+// NOTE: Необходимое переопределение токенов из компонента Chip т.к. используются его части
+var _exp = function _exp() {
+  return Chip;
+};
+var StyledChip = /*#__PURE__*/styled(_exp())({
+  name: "StyledChip",
+  "class": "s11qqqhl",
+  propsAsIs: true
+});
+
+export { StyledChip };
+//# sourceMappingURL=TextFieldChipNew.styles.js.map

package/es/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldChipNew.styles.js","sources":["../../../../../src/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { component, mergeConfig } from 'src/engines';\nimport { addFocus } from 'src/mixins';\nimport { chipConfig, chipTokens } from 'src/components/Chip';\n\nimport { tokens } from '../../TextField.tokens';\n\n// issue #823\nconst mergedConfig = mergeConfig(chipConfig);\nconst Chip = component(mergedConfig);\n\n// NOTE: Необходимое переопределение токенов из компонента Chip т.к. используются его части\nexport const StyledChip = styled(Chip)`\n    ${chipTokens.color}: var(${tokens.chipColor});\n    ${chipTokens.background}: var(${tokens.chipBackground});\n    ${chipTokens.colorHover}: var(${tokens.chipColorHover});\n    ${chipTokens.backgroundHover}: var(${tokens.chipBackgroundHover});\n    ${chipTokens.colorActive}: var(${tokens.chipColorActive});\n    ${chipTokens.backgroundActive}: var(${tokens.chipBackgroundActive});\n    ${chipTokens.backgroundReadOnly}: var(${tokens.chipBackgroundReadOnly});\n    ${chipTokens.colorReadOnly}: var(${tokens.chipColorReadOnly});\n    ${chipTokens.backgroundReadOnlyHover}: var(${tokens.chipBackgroundReadOnlyHover});\n    ${chipTokens.colorReadOnlyHover}: var(${tokens.chipColorReadOnlyHover});\n    ${chipTokens.borderRadius}: var(${tokens.chipBorderRadius});\n    ${chipTokens.width}: var(${tokens.chipWidth});\n    ${chipTokens.height}: var(${tokens.chipHeight});\n    ${chipTokens.padding}: var(${tokens.chipPadding});\n    ${chipTokens.fontFamily}: var(${tokens.chipFontFamily});\n    ${chipTokens.fontSize}: var(${tokens.chipFontSize});\n    ${chipTokens.fontStyle}: var(${tokens.chipFontStyle});\n    ${chipTokens.fontWeight}: var(${tokens.chipFontWeight});\n    ${chipTokens.letterSpacing}: var(${tokens.chipLetterSpacing});\n    ${chipTokens.lineHeight}: var(${tokens.chipLineHeight});\n    ${chipTokens.clearContentMarginLeft}: var(${tokens.chipClearContentMarginLeft});\n    ${chipTokens.clearContentMarginRight}: var(${tokens.chipClearContentMarginRight});\n    ${chipTokens.closeIconSize}: var(${tokens.chipCloseIconSize});\n    ${chipTokens.closeIconColor}: var(${tokens.chipCloseIconColor});\n    ${chipTokens.focusColor}: var(${tokens.focusColor});\n    ${chipTokens.disabledOpacity}: 0.4;\n\n    ${addFocus({\n        outlineOffset: '0.0625rem',\n        outlineSize: '0.0625rem',\n        outlineRadius: `calc(var(${tokens.chipBorderRadius}) - 0.1rem)`,\n        outlineColor: `var(${tokens.focusColor})`,\n    })}\n\n    &[readonly] {\n        opacity: var(${tokens.chipOpacityReadonly});\n    }\n`;\n\nexport const TextChip = styled.button`\n    display: block;\n    flex: none;\n    background: none;\n    border: none;\n    outline: none;\n    padding: 0;\n    white-space: nowrap;\n    cursor: pointer;\n\n    font-family: var(${tokens.fontFamily});\n    font-size: var(${tokens.fontSize});\n    font-style: var(${tokens.fontStyle});\n    font-weight: var(${tokens.fontWeight});\n    letter-spacing: var(${tokens.letterSpacing});\n    line-height: var(${tokens.lineHeight});\n    color: var(${tokens.color});\n\n    ${addFocus({\n        outlineOffset: '0.0625rem',\n        outlineSize: '0.0625rem',\n        outlineRadius: `calc(var(${tokens.chipBorderRadius}) - 0.1rem)`,\n        outlineColor: `var(${tokens.focusColor})`,\n    })}\n\n    &:after {\n        content: ',';\n    }\n\n    &:last-child {\n        &:after {\n            content: '';\n        }\n    }\n`;\n"],"names":["mergedConfig","mergeConfig","chipConfig","Chip","component","_exp","StyledChip","styled","name","class","propsAsIs"],"mappings":";;;;AAOA;AACA,IAAMA,YAAY,gBAAGC,WAAW,CAACC,UAAU,CAAC,CAAA;AAC5C,IAAMC,IAAI,gBAAGC,SAAS,CAACJ,YAAY,CAAC,CAAA;;AAEpC;AAAA,IAAAK,IAAA,GAVkBA,SAUlBA,IAAAA,GAAA;AAAA,EAAA,OACiCF,IAAI,CAAA;AAAA,CAAA,CAAA;AAA9B,IAAMG,UAAU,gBAAGC,MAAM,CAAAF,IAAA,EAAA,CAAA,CAAA;AAAAG,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAsC/B;;;;"}

package/es/components/TextField/ui/TextFieldChipNew/TextFieldChipNew.styles_y9tozi.css

@@ -0,0 +1,2 @@
+.s11qqqhl{--plasma-chip-color:var(--plasma-textfield__chip-color);--plasma-chip-background:var(--plasma-textfield__chip-background);--plasma-chip-color-hover:var(--plasma-textfield__chip-color-hover);--plasma-chip-background-hover:var(--plasma-textfield__chip-background-hover);--plasma-chip-color-active:var(--plasma-textfield__chip-color-active);--plasma-chip-background-active:var(--plasma-textfield__chip-background-active);--plasma-chip-background-readonly:var(--plasma-textfield__chip-background-readonly);--plasma-chip-color-readonly:var(--plasma-textfield__chip-color-readonly);--plasma-chip-background-readonly-hover:var(--plasma-textfield__chip-background-readonly-hover);--plasma-chip-color-readonly-hover:var(--plasma-textfield__chip-color-readonly-hover);--plasma-chip-border-radius:var(--plasma-textfield__chip-border-radius);--plasma-chip-width:var(--plasma-textfield__chip-width);--plasma-chip-height:var(--plasma-textfield__chip-height);--plasma-chip-padding:var(--plasma-textfield__chip-padding);--plasma-chip-font-family:var(--plasma-textfield__chip-font-family);--plasma-chip-font-size:var(--plasma-textfield__chip-font-size);--plasma-chip-font-style:var(--plasma-textfield__chip-font-style);--plasma-chip-font-weight:var(--plasma-textfield__chip-font-weight);--plasma-chip-letter-spacing:var(--plasma-textfield__chip-letter-spacing);--plasma-chip-lineheight:var(--plasma-textfield__chip-line-height);--plasma-chip-clear-content-margin-left:var(--plasma-textfield__chip-clear-content-margin-left);--plasma-chip-clear-content-margin-right:var(--plasma-textfield__chip-clear-content-margin-right);--plasma-chip-close-icon-size:var(--plasma-textfield__chip-close-icon-size);--plasma-chip-close-icon-color:var(--plasma-textfield__chip-close-icon-color);--plasma-chip-focus-color:var(--plasma-textfield-focus-color);--plasma-chip-disabled-opacity:0.4;position:relative;}.s11qqqhl::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.s11qqqhl.focus-visible:focus::before,.s11qqqhl[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.s11qqqhl[readonly]{opacity:var(--plasma-textfield__chip-opacity-readonly);}
+.t10z5awc{display:block;-webkit-flex:none;-ms-flex:none;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);color:var(--plasma-textfield-color);position:relative;}.t10z5awc::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.t10z5awc.focus-visible:focus::before,.t10z5awc[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.t10z5awc:after{content:',';}.t10z5awc:last-child:after{content:'';}

package/es/engines/common.js

@@ -1,4 +1,4 @@
-import { objectSpread2 as _objectSpread2, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { _component } from './linaria.js';
 
@@ -29,10 +29,20 @@ var mergeConfig = function mergeConfig(baseConfig, userConfig) {
   }
   return res;
 };
+
+// INFO: Метод, который проводит слияние двух объектов
+// INFO: если значение явно указанно как undefined/null/пустая строка, то будет взято значение указанное в default
+function mergeWithoutNullable(defaults, componentProps) {
+  var props = Object.keys(defaults).reduce(function (acc, key) {
+    return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, key, [null, undefined, ''].includes(componentProps[key]) ? defaults[key] : componentProps[key]));
+  }, {});
+  return _objectSpread2(_objectSpread2({}, componentProps), props);
+}
 function component(config) {
   var Comp = config.layout(_component(config));
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(Comp, _extends({}, config === null || config === void 0 ? void 0 : config.defaults, props, {
+    var mergedProps = mergeWithoutNullable(config === null || config === void 0 ? void 0 : config.defaults, props);
+    return /*#__PURE__*/React.createElement(Comp, _extends({}, mergedProps, {
       ref: ref
     }));
   });

package/es/engines/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sources":["../../src/engines/common.tsx"],"sourcesContent":["import React from 'react';\n\nimport { _component } from './linaria';\nimport type {\n    ComponentConfig,\n    HTMLTagList,\n    PropsType,\n    Variants,\n    HTMLAttributesWithoutOnChange,\n    HTMLAttributesWithoutOnChangeAndDefaultValue,\n} from './types';\n\nexport const mergeConfig = <\n    Tag extends HTMLTagList,\n    VariantList extends Variants,\n    VariantsProps extends PropsType<VariantList>,\n    LayoutPropsBase extends\n        | React.HTMLAttributes<HTMLElement>\n        | HTMLAttributesWithoutOnChange<HTMLElement>\n        | HTMLAttributesWithoutOnChangeAndDefaultValue<HTMLElement>,\n    LayoutPropsUser extends\n        | React.HTMLAttributes<HTMLElement>\n        | HTMLAttributesWithoutOnChange<HTMLElement>\n        | HTMLAttributesWithoutOnChangeAndDefaultValue<HTMLElement>\n        | undefined = undefined\n>(\n    baseConfig: ComponentConfig<Tag, Variants, PropsType & LayoutPropsBase, LayoutPropsBase>,\n    userConfig?: Partial<ComponentConfig<Tag, VariantList, VariantsProps, LayoutPropsUser>>,\n) => {\n    const res = { ...baseConfig, ...userConfig };\n\n    if (res.variations) {\n        // copy variations base css\n        // eslint-disable-next-line guard-for-in\n        for (const key in res.variations) {\n            const variant = baseConfig.variations[key];\n\n            res.variations[key].css = variant?.css;\n            /* start of bad decision */\n            if (!res.variations[key].true && variant?.true) {\n                res.variations[key].true = variant.true;\n            }\n            /* end of bad decision */\n            if (variant?.attrs) {\n                res.variations[key].attrs = variant.attrs;\n            }\n        }\n    }\n\n    // eslint-disable-next-line guard-for-in\n    for (const key in baseConfig.defaults || {}) {\n        if (!(key in res.defaults)) {\n            res.defaults[key] = baseConfig.defaults[key];\n        }\n    }\n\n    return res as ComponentConfig<\n        Tag,\n        VariantList,\n        PropsType<VariantList>,\n        LayoutPropsUser extends undefined ? LayoutPropsBase : LayoutPropsUser\n    >;\n};\n\nexport function component<\n    Tag extends HTMLTagList,\n    VariantList extends Variants,\n    VariantsProps extends PropsType<VariantList>,\n    LayoutProps extends\n        | React.HTMLAttributes<HTMLElement>\n        | HTMLAttributesWithoutOnChange<HTMLElement>\n        | HTMLAttributesWithoutOnChangeAndDefaultValue<HTMLElement>\n>(\n    config: ComponentConfig<Tag, VariantList, VariantsProps, LayoutProps>,\n): React.FunctionComponent<VariantsProps & LayoutProps> {\n    const Comp = config.layout(_component((config as unknown) as ComponentConfig));\n\n    return React.forwardRef<VariantsProps & LayoutProps, any>((props, ref) => (\n        <Comp {...config?.defaults} {...props} ref={ref} />\n    ));\n}\n"],"names":["mergeConfig","baseConfig","userConfig","res","_objectSpread","variations","key","variant","css","attrs","defaults","component","config","Comp","layout","_component","React","forwardRef","props","ref","createElement","_extends"],"mappings":";;;;AAYO,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAcpBC,UAAwF,EACxFC,UAAuF,EACtF;EACD,IAAMC,GAAG,GAAAC,cAAA,CAAAA,cAAA,CAAQH,EAAAA,EAAAA,UAAU,CAAKC,EAAAA,UAAU,CAAE,CAAA;EAE5C,IAAIC,GAAG,CAACE,UAAU,EAAE;AAChB;AACA;AACA,IAAA,KAAK,IAAMC,GAAG,IAAIH,GAAG,CAACE,UAAU,EAAE;AAC9B,MAAA,IAAME,OAAO,GAAGN,UAAU,CAACI,UAAU,CAACC,GAAG,CAAC,CAAA;AAE1CH,MAAAA,GAAG,CAACE,UAAU,CAACC,GAAG,CAAC,CAACE,GAAG,GAAGD,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,CAAEC,GAAG,CAAA;AACtC;AACA,MAAA,IAAI,CAACL,GAAG,CAACE,UAAU,CAACC,GAAG,CAAC,CAAK,MAAA,CAAA,IAAIC,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,IAAAA,OAAO,QAAM,EAAE;QAC5CJ,GAAG,CAACE,UAAU,CAACC,GAAG,CAAC,CAAK,MAAA,CAAA,GAAGC,OAAO,CAAK,MAAA,CAAA,CAAA;AAC3C,OAAA;AACA;AACA,MAAA,IAAIA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,eAAPA,OAAO,CAAEE,KAAK,EAAE;QAChBN,GAAG,CAACE,UAAU,CAACC,GAAG,CAAC,CAACG,KAAK,GAAGF,OAAO,CAACE,KAAK,CAAA;AAC7C,OAAA;AACJ,KAAA;AACJ,GAAA;;AAEA;EACA,KAAK,IAAMH,IAAG,IAAIL,UAAU,CAACS,QAAQ,IAAI,EAAE,EAAE;AACzC,IAAA,IAAI,EAAEJ,IAAG,IAAIH,GAAG,CAACO,QAAQ,CAAC,EAAE;MACxBP,GAAG,CAACO,QAAQ,CAACJ,IAAG,CAAC,GAAGL,UAAU,CAACS,QAAQ,CAACJ,IAAG,CAAC,CAAA;AAChD,KAAA;AACJ,GAAA;AAEA,EAAA,OAAOH,GAAG,CAAA;AAMd,EAAC;AAEM,SAASQ,SAASA,CASrBC,MAAqE,EACjB;EACpD,IAAMC,IAAI,GAAGD,MAAM,CAACE,MAAM,CAACC,UAAU,CAAEH,MAAqC,CAAC,CAAC,CAAA;AAE9E,EAAA,oBAAOI,KAAK,CAACC,UAAU,CAAmC,UAACC,KAAK,EAAEC,GAAG,EAAA;AAAA,IAAA,oBACjEH,KAAA,CAAAI,aAAA,CAACP,IAAI,EAAAQ,QAAA,CAAA,EAAA,EAAKT,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEF,QAAQ,EAAMQ,KAAK,EAAA;AAAEC,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAE,CAAC,CAAA;AAAA,GACtD,CAAC,CAAA;AACN;;;;"}
+{"version":3,"file":"common.js","sources":["../../src/engines/common.tsx"],"sourcesContent":["import React from 'react';\n\nimport { _component } from './linaria';\nimport type {\n    ComponentConfig,\n    HTMLTagList,\n    PropsType,\n    Variants,\n    HTMLAttributesWithoutOnChange,\n    HTMLAttributesWithoutOnChangeAndDefaultValue,\n} from './types';\n\nexport const mergeConfig = <\n    Tag extends HTMLTagList,\n    VariantList extends Variants,\n    VariantsProps extends PropsType<VariantList>,\n    LayoutPropsBase extends\n        | React.HTMLAttributes<HTMLElement>\n        | HTMLAttributesWithoutOnChange<HTMLElement>\n        | HTMLAttributesWithoutOnChangeAndDefaultValue<HTMLElement>,\n    LayoutPropsUser extends\n        | React.HTMLAttributes<HTMLElement>\n        | HTMLAttributesWithoutOnChange<HTMLElement>\n        | HTMLAttributesWithoutOnChangeAndDefaultValue<HTMLElement>\n        | undefined = undefined\n>(\n    baseConfig: ComponentConfig<Tag, Variants, PropsType & LayoutPropsBase, LayoutPropsBase>,\n    userConfig?: Partial<ComponentConfig<Tag, VariantList, VariantsProps, LayoutPropsUser>>,\n) => {\n    const res = { ...baseConfig, ...userConfig };\n\n    if (res.variations) {\n        // copy variations base css\n        // eslint-disable-next-line guard-for-in\n        for (const key in res.variations) {\n            const variant = baseConfig.variations[key];\n\n            res.variations[key].css = variant?.css;\n            /* start of bad decision */\n            if (!res.variations[key].true && variant?.true) {\n                res.variations[key].true = variant.true;\n            }\n            /* end of bad decision */\n            if (variant?.attrs) {\n                res.variations[key].attrs = variant.attrs;\n            }\n        }\n    }\n\n    // eslint-disable-next-line guard-for-in\n    for (const key in baseConfig.defaults || {}) {\n        if (!(key in res.defaults)) {\n            res.defaults[key] = baseConfig.defaults[key];\n        }\n    }\n\n    return res as ComponentConfig<\n        Tag,\n        VariantList,\n        PropsType<VariantList>,\n        LayoutPropsUser extends undefined ? LayoutPropsBase : LayoutPropsUser\n    >;\n};\n\n// INFO: Метод, который проводит слияние двух объектов\n// INFO: если значение явно указанно как undefined/null/пустая строка, то будет взято значение указанное в default\nfunction mergeWithoutNullable(defaults: any, componentProps: any) {\n    const props = Object.keys(defaults).reduce((acc, key) => {\n        return {\n            ...acc,\n            [key]: [null, undefined, ''].includes(componentProps[key]) ? defaults[key] : componentProps[key],\n        };\n    }, {});\n\n    return { ...componentProps, ...props };\n}\n\nexport function component<\n    Tag extends HTMLTagList,\n    VariantList extends Variants,\n    VariantsProps extends PropsType<VariantList>,\n    LayoutProps extends\n        | React.HTMLAttributes<HTMLElement>\n        | HTMLAttributesWithoutOnChange<HTMLElement>\n        | HTMLAttributesWithoutOnChangeAndDefaultValue<HTMLElement>\n>(\n    config: ComponentConfig<Tag, VariantList, VariantsProps, LayoutProps>,\n): React.FunctionComponent<VariantsProps & LayoutProps> {\n    const Comp = config.layout(_component((config as unknown) as ComponentConfig));\n\n    return React.forwardRef<VariantsProps & LayoutProps, any>((props, ref) => {\n        const mergedProps = mergeWithoutNullable(config?.defaults, props);\n\n        return <Comp {...mergedProps} ref={ref} />;\n    });\n}\n"],"names":["mergeConfig","baseConfig","userConfig","res","_objectSpread","variations","key","variant","css","attrs","defaults","mergeWithoutNullable","componentProps","props","Object","keys","reduce","acc","_defineProperty","undefined","includes","component","config","Comp","layout","_component","React","forwardRef","ref","mergedProps","createElement","_extends"],"mappings":"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"}

package/es/index.css

@@ -222,6 +222,9 @@
 .TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd{--plasma-chip-color:var(--plasma-textfield__chip-color);--plasma-chip-background:var(--plasma-textfield__chip-background);--plasma-chip-color-hover:var(--plasma-textfield__chip-color-hover);--plasma-chip-background-hover:var(--plasma-textfield__chip-background-hover);--plasma-chip-color-active:var(--plasma-textfield__chip-color-active);--plasma-chip-background-active:var(--plasma-textfield__chip-background-active);--plasma-chip-background-readonly:var(--plasma-textfield__chip-background-readonly);--plasma-chip-color-readonly:var(--plasma-textfield__chip-color-readonly);--plasma-chip-background-readonly-hover:var(--plasma-textfield__chip-background-readonly-hover);--plasma-chip-color-readonly-hover:var(--plasma-textfield__chip-color-readonly-hover);--plasma-chip-border-radius:var(--plasma-textfield__chip-border-radius);--plasma-chip-width:var(--plasma-textfield__chip-width);--plasma-chip-height:var(--plasma-textfield__chip-height);--plasma-chip-padding:var(--plasma-textfield__chip-padding);--plasma-chip-font-family:var(--plasma-textfield__chip-font-family);--plasma-chip-font-size:var(--plasma-textfield__chip-font-size);--plasma-chip-font-style:var(--plasma-textfield__chip-font-style);--plasma-chip-font-weight:var(--plasma-textfield__chip-font-weight);--plasma-chip-letter-spacing:var(--plasma-textfield__chip-letter-spacing);--plasma-chip-lineheight:var(--plasma-textfield__chip-line-height);--plasma-chip-clear-content-margin-left:var(--plasma-textfield__chip-clear-content-margin-left);--plasma-chip-clear-content-margin-right:var(--plasma-textfield__chip-clear-content-margin-right);--plasma-chip-close-icon-size:var(--plasma-textfield__chip-close-icon-size);--plasma-chip-close-icon-color:var(--plasma-textfield__chip-close-icon-color);--plasma-chip-focus-color:var(--plasma-textfield-focus-color);-webkit-scroll-snap-align:center;-moz-scroll-snap-align:center;-ms-scroll-snap-align:center;scroll-snap-align:center;-webkit-scroll-snap-stop:normal;-moz-scroll-snap-stop:normal;-ms-scroll-snap-stop:normal;scroll-snap-stop:normal;position:relative;}.TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd.TextFieldChip_styles_14q069b_focusVisible__9f1b34fd:focus::before,.TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChip_styles_14q069b_s32p7ut__9f1b34fd[readonly]{opacity:var(--plasma-textfield__chip-opacity-readonly);}
 .TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd{display:block;-webkit-flex:none;-ms-flex:none;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);color:var(--plasma-textfield-color);position:relative;}.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd.TextFieldChip_styles_14q069b_focusVisible__9f1b34fd:focus::before,.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd:after{content:',';}.TextFieldChip_styles_14q069b_t4nir3h__9f1b34fd:last-child:after{content:'';}
 
+.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7{--plasma-chip-color:var(--plasma-textfield__chip-color);--plasma-chip-background:var(--plasma-textfield__chip-background);--plasma-chip-color-hover:var(--plasma-textfield__chip-color-hover);--plasma-chip-background-hover:var(--plasma-textfield__chip-background-hover);--plasma-chip-color-active:var(--plasma-textfield__chip-color-active);--plasma-chip-background-active:var(--plasma-textfield__chip-background-active);--plasma-chip-background-readonly:var(--plasma-textfield__chip-background-readonly);--plasma-chip-color-readonly:var(--plasma-textfield__chip-color-readonly);--plasma-chip-background-readonly-hover:var(--plasma-textfield__chip-background-readonly-hover);--plasma-chip-color-readonly-hover:var(--plasma-textfield__chip-color-readonly-hover);--plasma-chip-border-radius:var(--plasma-textfield__chip-border-radius);--plasma-chip-width:var(--plasma-textfield__chip-width);--plasma-chip-height:var(--plasma-textfield__chip-height);--plasma-chip-padding:var(--plasma-textfield__chip-padding);--plasma-chip-font-family:var(--plasma-textfield__chip-font-family);--plasma-chip-font-size:var(--plasma-textfield__chip-font-size);--plasma-chip-font-style:var(--plasma-textfield__chip-font-style);--plasma-chip-font-weight:var(--plasma-textfield__chip-font-weight);--plasma-chip-letter-spacing:var(--plasma-textfield__chip-letter-spacing);--plasma-chip-lineheight:var(--plasma-textfield__chip-line-height);--plasma-chip-clear-content-margin-left:var(--plasma-textfield__chip-clear-content-margin-left);--plasma-chip-clear-content-margin-right:var(--plasma-textfield__chip-clear-content-margin-right);--plasma-chip-close-icon-size:var(--plasma-textfield__chip-close-icon-size);--plasma-chip-close-icon-color:var(--plasma-textfield__chip-close-icon-color);--plasma-chip-focus-color:var(--plasma-textfield-focus-color);--plasma-chip-disabled-opacity:0.4;position:relative;}.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7.TextFieldChipNew_styles_y9tozi_focusVisible__d1734be7:focus::before,.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChipNew_styles_y9tozi_s11qqqhl__d1734be7[readonly]{opacity:var(--plasma-textfield__chip-opacity-readonly);}
+.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7{display:block;-webkit-flex:none;-ms-flex:none;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);color:var(--plasma-textfield-color);position:relative;}.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7.TextFieldChipNew_styles_y9tozi_focusVisible__d1734be7:focus::before,.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7:after{content:',';}.TextFieldChipNew_styles_y9tozi_t10z5awc__d1734be7:last-child:after{content:'';}
+
 .TextField_1lzb2r1_bpunezx__7d079491{display:block;}
 
 .base_1rutqnb_boymyss__807e6413.base_1rutqnb_textFieldGroupOverrideStyles__807e6413 .base_1rutqnb_textFieldGroupItem__807e6413{--plasma-textfield-height:var(--plasma-text-field-group-item-height);--plasma-textfield-padding:var(--plasma-text-field-group-item-padding);--plasma-textfield-padding-with-chips:var(--plasma-text-field-group-item-padding-with-chips);--plasma-textfield__left-content-margin:var(--plasma-text-field-group-item__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-text-field-group-item__right-content-margin);--plasma-textfield__before-text-margin:var(--plasma-text-field-group-item__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-text-field-group-item__after-text-margin);--plasma-textfield-font-family:var(--plasma-text-field-group-item-font-family);--plasma-textfield-font-size:var(--plasma-text-field-group-item-font-size);--plasma-textfield-font-style:var(--plasma-text-field-group-item-font-style);--plasma-textfield-font-weight:var(--plasma-text-field-group-item-font-weight);--plasma-textfield-letter-spacing:var(--plasma-text-field-group-item-letter-spacing);--plasma-textfield-line-height:var(--plasma-text-field-group-item-line-height);--plasma-textfield__label-offset:var(--plasma-text-field-group-item__label-offset);--plasma-textfield__label-font-family:var(--plasma-text-field-group-item__label-font-family);--plasma-textfield__label-font-size:var(--plasma-text-field-group-item__label-font-size);--plasma-textfield__label-font-style:var(--plasma-text-field-group-item__label-font-style);--plasma-textfield__label-font-weight:var(--plasma-text-field-group-item__label-font-weight);--plasma-textfield__label-letter-spacing:var(--plasma-text-field-group-item__label-letter-spacing);--plasma-textfield__label-line-height:var(--plasma-text-field-group-item__label-line-height);--plasma-textfield__left-helper-offset:var(--plasma-text-field-group-item__left-helper-offset);--plasma-textfield__left-helper-font-family:var(--plasma-text-field-group-item__left-helper-font-family);--plasma-textfield__left-helper-font-size:var(--plasma-text-field-group-item__left-helper-font-size);--plasma-textfield__left-helper-font-style:var(--plasma-text-field-group-item__left-helper-font-style);--plasma-textfield__left-helper-font-weight:var(--plasma-text-field-group-item__left-helper-font-weight);--plasma-textfield__left-helper-letter-spacing:var(--plasma-text-field-group-item__left-helper-letter-spacing);--plasma-textfield__left-helper-line-height:var(--plasma-text-field-group-item__left-helper-line-height);--plasma-textfield-placement_inner__label-padding:var(--plasma-text-field-group-item-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-text-field-group-item-placement_inner__content-padding);--plasma-textfield__chip-gap:var(--plasma-text-field-group-item__chip-gap);--plasma-textfield__chip-border-radius:var(--plasma-text-field-group-item__chip-border-radius);--plasma-textfield__chip-width:var(--plasma-text-field-group-item__chip-width);--plasma-textfield__chip-height:var(--plasma-text-field-group-item__chip-height);--plasma-textfield__chip-padding:var(--plasma-text-field-group-item__chip-padding);--plasma-textfield__chip-clear-content-margin-left:var(--plasma-text-field-group-item__chip-clear-content-margin-left);--plasma-textfield__chip-clear-content-margin-right:var(--plasma-text-field-group-item__chip-clear-content-margin-right);--plasma-textfield__chip-close-icon-size:var(--plasma-text-field-group-item__chip-close-icon-size);--plasma-textfield__chip-font-family:var(--plasma-text-field-group-item__chip-font-family);--plasma-textfield__chip-font-size:var(--plasma-text-field-group-item__chip-font-size);--plasma-textfield__chip-font-style:var(--plasma-text-field-group-item__chip-font-style);--plasma-textfield__chip-font-weight:var(--plasma-text-field-group-item__chip-font-weight);--plasma-textfield__chip-letter-spacing:var(--plasma-text-field-group-item__chip-letter-spacing);--plasma-textfield__chip-line-height:var(--plasma-text-field-group-item__chip-line-height);}
@@ -1056,12 +1059,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.336.0-canary.2219.17586567115.0",
+  "version": "0.336.0-canary.2219.17680564117.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "992eb55c1d566caad62008c1f6607cbc2318f41c"
+  "gitHead": "fa872ce86a1a245ae1a57c5c24b9448a618c581d"
 }

package/styled-components/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,15 +213,19 @@ 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 _autocompleteRef_current;
+        var _useState = _sliced_to_array((0, _react.useState)((0, _utils1.getCodeValue)(codeLength, '')), 2), innerValue = _useState[0], setInnerValue = _useState[1];
+        var code = typeof outerValue === 'string' ? (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);
         var captionRef = (0, _react.useRef)(null);
+        var autocompleteRef = (0, _react.useRef)(null);
         var fieldPattern = (0, _utils1.getFieldPattern)(allowedSymbols);
         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 +235,22 @@ var codeFieldRoot = function(Root) {
             });
             return lastEmptyIndex >= 0 ? lastEmptyIndex : codeLength - 1;
         };
+        var codeSetter = function(newCode) {
+            var originalCode = newCode.join('');
+            setInnerValue((0, _utils1.getCodeValue)(codeLength, originalCode));
+            setOriginalValue(originalCode);
+            if (onChange) {
+                onChange(originalCode);
+            }
+        };
+        (0, _useWebOTP.useWebOTP)({
+            codeString: originalValue,
+            enableSMSAutoRead: autoComplete === 'one-time-code',
+            disabled: Boolean(disabled),
+            codeLength: codeLength,
+            codeSetter: codeSetter,
+            onFullCodeEnter: onFullCodeEnter
+        });
         var handleClick = function() {
             if (disabled) {
                 return;
@@ -249,19 +270,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) {
@@ -282,6 +308,9 @@ var codeFieldRoot = function(Root) {
                     setIsError(false);
                 }
             }
+            if (!symbol) {
+                return;
+            }
             if (!fieldPattern) {
                 newCode[index] = symbol;
                 codeSetter(newCode);
@@ -291,11 +320,6 @@ var codeFieldRoot = function(Root) {
                 }
                 return;
             }
-            if (!symbol) {
-                newCode[index] = '';
-                codeSetter(newCode);
-                return;
-            }
             if (fieldPattern.test(symbol)) {
                 newCode[index] = symbol.charAt(symbol.length - 1);
                 codeSetter(newCode);
@@ -311,8 +335,9 @@ var codeFieldRoot = function(Root) {
                     index: index,
                     newCode: newCode,
                     inputRefs: inputRefs,
-                    setCode: setCode,
-                    codeSetter: codeSetter
+                    setInnerValue: setInnerValue,
+                    codeSetter: codeSetter,
+                    onChange: onChange
                 });
             }
         };
@@ -358,14 +383,24 @@ var codeFieldRoot = function(Root) {
                     inputRefs: inputRefs,
                     inputContainerRef: inputContainerRef,
                     captionRef: captionRef,
-                    setCode: setCode,
+                    setInnerValue: setInnerValue,
                     codeSetter: codeSetter
                 });
             }
         }, [
             isError
         ]);
-        return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
+        (0, _react.useEffect)(function() {
+            if (disabled || !autocompleteRef.current) {
+                return;
+            }
+            var autocompleteCode = autocompleteRef.current.value.split('');
+            codeSetter(autocompleteCode);
+        }, [
+            (_autocompleteRef_current = autocompleteRef.current) === null || _autocompleteRef_current === void 0 ? void 0 : _autocompleteRef_current.value,
+            disabled
+        ]);
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             ref: ref,
             view: view,
             size: size,
@@ -373,7 +408,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 +425,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 +441,11 @@ var codeFieldRoot = function(Root) {
             ref: captionRef,
             captionAlign: captionAlign,
             widthValue: widthValue
-        }, caption));
+        }, caption), isWebOTPEnabled && /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.HiddenInput, _object_spread({
+            ref: autocompleteRef,
+            autoComplete: autoComplete,
+            tabIndex: -1
+        }, rest))));
     });
 };
 var codeFieldConfig = {