mimir-ui-kit 1.19.2 → 1.20.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/Button.css +1 -1
- package/dist/assets/Chip.css +1 -0
- package/dist/assets/TextArea.css +1 -1
- package/dist/assets/index.css +1 -1
- package/dist/components/Button/Button.js +28 -28
- package/dist/components/Chip/Chip.d.ts +30 -0
- package/dist/components/Chip/Chip.js +56 -0
- package/dist/components/Chip/constants.d.ts +13 -0
- package/dist/components/Chip/constants.js +19 -0
- package/dist/components/Chip/index.d.ts +2 -0
- package/dist/components/Chip/index.js +7 -0
- package/dist/components/RadioGroup/RadioGroup.js +1 -1
- package/dist/components/SelectSearch/SelectSearch.js +1 -1
- package/dist/components/Steps/constants.d.ts +5 -0
- package/dist/components/Steps/constants.js +5 -0
- package/dist/components/Switch/Switch.js +18 -11
- package/dist/components/TextArea/TextArea.js +27 -20
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +5 -0
- package/dist/index.js +5 -0
- package/dist/{label-C_5Syaoj.js → label-BTEGh6O_.js} +21 -8
- package/package.json +1 -1
package/dist/assets/Button.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
._button_1ezof_2{--button-cursor: pointer;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:100%;height:var(--button-height);padding:0 var(--button-space);overflow:hidden;color:var(--button-color);font-weight:var(--font-weight-text-semibold);font-size:var(--button-font-size);font-family:var(--font-inter);line-height:var(--line-height-text-s1);white-space:nowrap;text-transform:uppercase;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;-moz-column-gap:var(--button-gap);column-gap:var(--button-gap);background:var(--button-bg-color);border:none;border-color:var(--border-color);cursor:pointer;cursor:var(--button-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._button_1ezof_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover);border-color:var(--border-color-hover)}._button_1ezof_2:active{color:var(--button-color-active);background:var(--button-bg-color-active);border-color:var(--border-color-active)}._button_1ezof_2:focus-visible{box-shadow:0 0 2px var(--sapphire-normal)}._button_1ezof_2._clear_1ezof_42:focus{box-shadow:none}._button_1ezof_2 svg{color:currentcolor;fill:currentcolor}._button_1ezof_2 svg path{color:currentcolor;fill:currentcolor}._default-button_1ezof_54._primary-sapphire_1ezof_54{--button-bg-color: var(--sapphire-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--sapphire-active);--button-bg-color-hover: var(--sapphire-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1ezof_54._primary-citrine_1ezof_63{--button-bg-color: var(--citrine-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--citrine-active);--button-bg-color-hover: var(--citrine-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1ezof_54._secondary-asphalt_1ezof_72{--button-bg-color: var(--asphalt-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--asphalt-active);--button-bg-color-hover: var(--asphalt-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1ezof_54._secondary-gray_1ezof_81{--button-bg-color: var(--gray-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--gray-active);--button-bg-color-hover: var(--gray-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_1ezof_54._secondary-white_1ezof_90{--button-bg-color: var(--white-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--white-active);--button-bg-color-hover: var(--white);--button-color: var(--dark-text);--button-border: transparent}._default-button_1ezof_54._secondary-red_1ezof_99{--button-bg-color: var(--red-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--red-active);--button-bg-color-hover: var(--red-hover);--button-color: var(--light-text);--button-border: transparent}._round-button_1ezof_109{--button-border-radius-l: 24px;--button-border-radius-m: 20px;--button-border-radius-s: 16px;--button-border-radius-xs: 12px;--button-space-l: var(--space-s);--button-space-m: var(--space-xs);--button-space-s: var(--space-xs);--button-space-xs: var(--space-2xs);border-radius:var(--button-border-radius)}._round-button_1ezof_109._black_1ezof_120{--button-bg-color: var(--asphalt-normal);--button-bg-color-hover: var(--asphalt-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--light-text);--button-color-active: var(--light-text)}._round-button_1ezof_109._gray_1ezof_129{--button-bg-color: var(--gray-normal);--button-bg-color-hover: var(--gray-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._round-button_1ezof_109._white_1ezof_138{--button-bg-color: var(--white-normal);--button-bg-color-hover: var(--white-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._outline-button_1ezof_148{--button-bg-color: transparent;--button-bg-color-hover: transparent;--button-bg-color-active: transparent;--button-bg-color-focus: transparent;border:1px solid var(--border-color)}._outline-button_1ezof_148._outline-asphalt_1ezof_155{--border-color: var(--disabled-color);--button-color: var(--black-80);--border-color-hover: var(--black-80);--button-color-hover: var(--black-80);--border-color-active: var(--black-100);--button-color-active: var(--black-100)}._outline-button_1ezof_148._outline-gray_1ezof_163{--border-color: var(--black-5);--button-color: var(--black-5);--border-color-hover: var(--black-5);--button-color-hover: var(--counter-text);--border-color-active: var(--black-80);--button-color-active: var(--white);--button-bg-color-active: var(--black-80)}._outline-button_1ezof_148._outline-white_1ezof_172{--border-color: var(--white);--button-color: var(--white);--border-color-hover: var(--white);--button-color-hover: var(--counter-text);--border-color-active: var(--black-80);--button-color-active: var(--white);--button-bg-color-active: var(--black-80)}._outline-button_1ezof_148._outline-red_1ezof_181{--border-color: var(--error-normal);--button-color: var(--error-normal);--border-color-hover: var(--red-hover);--button-color-hover: var(--red-hover);--border-color-active: var(--red-active);--button-color-active: var(--white);--button-bg-color-active: var(--red-active)}._default-button_1ezof_54,._outline-button_1ezof_148{--button-space-xxl: var(--control-space-xxl);--button-space-xl: var(--control-space-l);--button-space-l: var(--space-m);--button-space-m: var(--space-m);--button-space-s: var(--space-xs);--button-space-xs: var(--space-2xs);--button-border-radius-xxl: var(--control-radius-s);--button-border-radius-xl: var(--control-radius-s);--button-border-radius-l: var(--control-radius);--button-border-radius-m: var(--control-radius);--button-border-radius-s: var(--control-radius-xs);--button-border-radius-xs: var(--control-radius-xs);border-radius:var(--button-border-radius)}._xs_1ezof_208{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--button-space-xs);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m-s_1ezof_216{--button-height: var(--button-height-ms);--button-border-radius: var(--button-border-radius-s);font-weight:var(--font-weight-text-regular);--button-gap: var(--space-2xs);--button-font-size: var(--size-text-s)}._s_1ezof_72{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--button-space-s);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m_1ezof_216{--button-height: var(--button-height-m);--button-font-size: var(--size-text-m);--button-space: var(--button-space-m);--button-gap: 8px;--button-border-radius: var(--button-border-radius-m)}._l_1ezof_240{--button-height: var(--button-height-l);--button-font-size: var(--size-text-m);--button-space: var(--button-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l)}._xl_1ezof_248{--button-height: var(--button-height-xl);--button-space: var(--button-space-xl);--button-gap: 8px;--button-border-radius: var(--button-border-radius-xl);--button-font-size: var(--size-text-m);font-weight:var(--font-weight-text-medium)}._xxl_1ezof_257{--button-height: var(--button-height-xxl);--button-space: var(--button-space-xxl);--button-border-radius: var(--button-border-radius-xxl);--button-gap: 8px;font-weight:var(--font-weight-text-medium);--button-font-size: var(--size-text-m)}._full_1ezof_266{display:flex;justify-content:center;width:100%}._disabled_1ezof_272{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_1ezof_272:hover,._disabled_1ezof_272:active,._disabled_1ezof_272:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._disabled_1ezof_272._outline-button_1ezof_148{color:var(--disabled);background-color:transparent;border:1px solid var(--disabled)}._icon-button_1ezof_288{justify-content:center;min-width:var(--button-height);padding:0}
|
@@ -0,0 +1 @@
|
|
1
|
+
._chip_1ckvf_2{--chip-cursor: default;display:inline-flex;align-items:center;height:var(--chip-height);color:var(--chip-color);font-size:var(--chip-font-size);line-height:var(--chip-line-height);-moz-column-gap:var(--space-2xs);column-gap:var(--space-2xs);background-color:var(--chip-bg-color);border-radius:var(--chip-border-radius);cursor:default;cursor:var(--chip-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-left:var(--chip-space);padding-right:var(--chip-space)}._chip_1ckvf_2._with-action_1ckvf_18{--chip-cursor: pointer}._chip_1ckvf_2._with-action_1ckvf_18:hover{color:var(--chip-color-hover);background-color:var(--chip-bg-color-hover)}._chip_1ckvf_2._with-action_1ckvf_18:active{color:var(--chip-color-active);background-color:var(--chip-bg-color-active)}._chip_1ckvf_2._with-action_1ckvf_18:focus-visible{box-shadow:0 0 2px var(--sapphire-normal)}._chip_1ckvf_2._with-action_1ckvf_18 svg{color:currentcolor;fill:currentcolor}._chip_1ckvf_2._with-action_1ckvf_18 svg path{color:currentcolor;fill:currentcolor}._chip_1ckvf_2._disabled_1ckvf_40{--chip-color: var(--light-text);--chip-bg-color: var(--disabled);--chip-bg-color-hover: var(--disabled-color);--chip-bg-color-active: var(--disabled-color);--chip-cursor: not-allowed}._chip_1ckvf_2._disabled_1ckvf_40:focus-visible{box-shadow:none}._xs_1ckvf_51{--chip-font-size: var(--size-text-s);--chip-line-height: var(--line-height-text-xs);--chip-border-radius: var(--control-radius-m-s);--chip-height: 24px;--chip-space: var(--space-xs)}._s_1ckvf_59{--chip-font-size: var(--size-text-l);--chip-line-height: var(--line-height-text-xs);--chip-border-radius: var(--control-radius-m-s);--chip-height: 28px;--chip-space: var(--space-s)}._m_1ckvf_67{--chip-font-size: var(--size-text-m);--chip-line-height: var(--line-height-text-xs);--chip-border-radius: var(--control-radius-m);--chip-height: 40px;--chip-space: var(--space-m)}._sapphire_1ckvf_75{--chip-color: var(--light-text);--chip-color-hover: var(--light-text);--chip-color-active: var(--light-text);--chip-bg-color: var(--sapphire-normal);--chip-bg-color-hover: var(--sapphire-hover);--chip-bg-color-active: var(--sapphire-active)}._citrine_1ckvf_84{--chip-color: var(--light-text);--chip-color-hover: var(--light-text);--chip-color-active: var(--light-text);--chip-bg-color: var(--citrine-normal);--chip-bg-color-hover: var(--citrine-hover);--chip-bg-color-active: var(--citrine-active)}._asphalt_1ckvf_93{--chip-color: var(--light-text);--chip-color-hover: var(--light-text);--chip-color-active: var(--light-text);--chip-bg-color: var(--asphalt-normal);--chip-bg-color-hover: var(--asphalt-hover);--chip-bg-color-active: var(--asphalt-active)}._gray_1ckvf_102{--chip-color: var(--dark-text);--chip-color-hover: var(--sapphire-normal);--chip-color-active: var(--light-text);--chip-bg-color: var(--gray-normal);--chip-bg-color-hover: var(--gray-normal);--chip-bg-color-active: var(--gray-active)}._white_1ckvf_111{--chip-color: var(--dark-text);--chip-color-hover: var(--sapphire-normal);--chip-color-active: var(--light-text);--chip-bg-color: var(--white-normal);--chip-bg-color-hover: var(--white-normal);--chip-bg-color-active: var(--white-active)}._green_1ckvf_120{--chip-color: var(--light-text);--chip-color-hover: var(--light-text);--chip-color-active: var(--light-text);--chip-bg-color: var(--green-normal);--chip-bg-color-hover: var(--green-hover);--chip-bg-color-active: var(--green-active)}
|
package/dist/assets/TextArea.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
._textarea-wrapper_1hbfy_2 ._textarea_1hbfy_2{min-height:var(--textarea-height);padding-top:var(--textarea-space)!important;padding-bottom:var(--textarea-space);resize:none}._textarea-wrapper_1hbfy_2 ._textarea_1hbfy_2._has-label_1hbfy_8{padding-top:var(--textarea-top-space)!important}._textarea-wrapper_1hbfy_2 ._label_1hbfy_11{position:absolute;top:calc(var(--input-space) / 2 - var(--input-space) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;pointer-events:none}._textarea-wrapper_1hbfy_2 ._label_1hbfy_11._has-left-slot_1hbfy_24{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._textarea-wrapper_1hbfy_2 ._label_1hbfy_11._active-label_1hbfy_27{transform:scale(var(--label-scaled)) translateY(calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_1hbfy_2 ._label_1hbfy_11._active-label_1hbfy_27._has-left-slot_1hbfy_24{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--textarea-transform-label) * -1))}._s_1hbfy_35{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-xss);--textarea-height: 76px;--textarea-padding: var(--space-xs) var(--space-s)}._m_1hbfy_43{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-s);--textarea-height: 88px;--textarea-padding: var(--space-xs) var(--space-s)}._l_1hbfy_11{--textarea-space: var(--space-2m);--textarea-top-space: 25px;--textarea-transform-label: var(--space-m);--textarea-height: 120px;--textarea-padding: var(--space-2m)}
|
package/dist/assets/index.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
@font-face{font-weight:400;font-family:Montserrat;font-style:normal;src:url(./fonts/585d10920d676fcd.woff2) format("woff2"),url(./fonts/3b9f59412b17ff93.woff) format("woff")}@font-face{font-weight:700;font-family:Montserrat;font-style:normal;src:url(./fonts/f4d681a788c6d497.woff2) format("woff2"),url(./fonts/43b748f250df0f08.woff) format("woff")}@font-face{font-weight:300;font-family:Montserrat;font-style:normal;src:url(./fonts/ee3db32f0aadef5d.woff2) format("woff2"),url(./fonts/1a738bfdbc1e4d9d.woff) format("woff")}@font-face{font-weight:500;font-family:Montserrat;font-style:normal;src:url(./fonts/e51d2feb30084bc2.woff2) format("woff2"),url(./fonts/badaa6d1837432de.woff) format("woff")}@font-face{font-weight:600;font-family:Montserrat;font-style:normal;src:url(./fonts/63611593e008a77c.woff2) format("woff2"),url(./fonts/3cdd7fabbe89d2b9.woff) format("woff")}@font-face{font-weight:400;font-family:Inter;font-style:normal;src:url(./fonts/d080ae18fd04e52c.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:700;font-family:Inter;font-style:normal;src:url(./fonts/11d5bc9f0cad36d1.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:500;font-family:Inter;font-style:normal;src:url(./fonts/242d04bef81519ae.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:600;font-family:Inter;font-style:normal;src:url(./fonts/cac2ba46e8c8adc9.woff2) format("woff2");font-variant-numeric:slashed-zero}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}:root{font-feature-settings:"zero"}*{margin:0;padding:0;border:0;outline:none}*,:after,:before{box-sizing:border-box}:active,:focus{outline:0}a,a:visited,a:hover{-webkit-text-decoration:none;text-decoration:none}a:active,a:focus{outline:0}aside,footer,header,nav{display:block}body,html{width:100%;height:100%;font-size:100%;line-height:1}button,input,textarea,select{font-family:inherit}input::-ms-clear{display:none}button{background-color:transparent;cursor:pointer}button::-moz-focus-inner{padding:0;border:0}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--color-typo-brand);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}:root{--sapphire-100: #2355d7;--sapphire-90: #3564df;--sapphire-80: #4b75e2;--sapphire-70: #6186e6;--sapphire-60: #7797e9;--sapphire-50: #8da7ed;--sapphire-40: #9fb7f4;--sapphire-30: #b9caf4;--sapphire-20: #cfdaf7;--sapphire-10: #e5ebfb;--citrine-100: #ff7900;--citrine-90: #ff861a;--citrine-80: #ff9433;--citrine-70: #ffa14d;--citrine-60: #ffaf66;--citrine-50: #ffbc80;--citrine-40: #ffc999;--citrine-30: #ffd7b2;--citrine-20: #ffe4cc;--citrine-10: #fff2e5;--magenta-100: #bc2251;--magenta-90: #d8275d;--magenta-80: #dc3d6d;--magenta-70: #e15781;--magenta-60: #e46c91;--magenta-50: #e986a4;--magenta-40: #ed9cb4;--magenta-30: #f2b6c8;--magenta-20: #f6cbd8;--magenta-10: #fae5ec;--black-100: #000;--black-95: #0d0d0d;--black-90: #1a1a1a;--black-85: #262626;--black-80: #333;--black-75: #404040;--black-70: #4d4d4d;--black-65: #595959;--black-60: #666;--black-55: #737373;--black-50: #808080;--black-45: #8c8c8c;--black-40: #999;--black-35: #a6a6a6;--black-30: #b3b3b3;--black-25: #bfbfbf;--black-20: #ccc;--black-15: #d9d9d9;--black-10: #e6e6e6;--black-5: #f2f2f2;--white: #fff;--dark-blue: #0a38af;--blue-40: #a7bbef;--blue-20: #d3ddf7;--green: #1b770c;--red-tag: #f01406;--success-normal: #23b413;--success-bg-hover: #d5fbe2;--success-bg-active: #ebfdf1;--alarm-normal: #fdc023;--alarm-bg-hover: #fff0c7;--alarm-bg-active: #fff6de;--error-normal: #e64646;--error-bg-hover: #fadbdb;--error-bg-active: #fbe3e3;--disabled: #b3b3b3;--disabled-color: #b2b2b2;--light-text: var(--white);--dark-text: var(--black-100);--sapphire-normal: var(--sapphire-100);--sapphire-hover: #1b41a3;--sapphire-active: #122c70;--citrine-normal: var(--citrine-100);--citrine-hover: #e56d00;--citrine-active: #cc6100;--asphalt-border: var(--black-30);--asphalt-normal: var(--black-80);--asphalt-hover: var(--black-90);--asphalt-active: var(--black-100);--gray-normal: var(--black-5);--gray-hover: var(--black-10);--gray-active: var(--black-80);--white-normal: var(--white);--white-hover: var(--black-5);--white-transparent: rgba(255, 255, 255, .4);--white-active: var(--black-80);--red-normal: var(--error-normal);--red-hover: #e33030;--red-active: #dc1e1e;--green-normal: var(--green);--green-hover: #16610a;--green-active: #114a08;--counter-text: #ffa066;--button-height-ms: 16px;--button-height-xs: 24px;--button-height-s: 32px;--button-height-m: 40px;--button-height-l: 48px;--button-height-xl: 56px;--button-height-xxl: 64px;--select-search-height-l: 48px;--select-search-height-xxl: 64px;--select-search-options-height-desktop: 320px;--select-search-options-height-mobile: 264px;--control-default: var(--sapphire-20);--control-hover: var(--sapphire-40);--control-selected: var(--sapphire-100);--control-disabled: var(--black-10);--font-inter: "Inter", sans-serif;--font-montserrat: "Montserrat", sans-serif;--font-weight-text-regular: 400;--font-weight-text-medium: 500;--font-weight-text-semibold: 600;--font-weight-text-bold: 700;--font-weight-text-extrabold: 800;--font-weight-text-black: 900;--size-text-xs2: 8px;--size-text-xs: 10px;--size-text-s: 12px;--size-text-m: 14px;--size-text-l: 16px;--size-text-l2: 18px;--size-text-xl: 20px;--size-text-xl2: 24px;--size-text-3xl: 26px;--size-text-2xl: 28px;--size-text-xl3: 32px;--size-text-xl4: 48px;--size-text-4xl: 52px;--size-text-xl5: 72px;--size-text-xl6: 96px;--line-height-text-2xs: 1em;--line-height-text-xxs: 1.125em;--line-height-text-xs: 1.1em;--line-height-text-s: 1.2em;--line-height-text-s1: 1.25em;--line-height-text-m: 1.3em;--line-height-text-m1: 1.35em;--line-height-text-l: 1.4em;--line-height-text-l1: 1.45em;--line-height-text-xl: 1.5em;--line-height-text-xl1: 1.5em;--control-radius-xs: 4px;--control-radius: 6px;--control-radius-s: 8px;--control-radius-m: 20px;--control-radius-l: 24px;--control-radius-xl: 32px;--control-radius-xxl: 40px;--control-input-radius: 12px;--control-border-width: 1px;--control-height-xl: 60px;--control-height-xxl: 60px;--control-height-l: var(--space-4xl);--control-height-m: var(--space-3xl);--control-height-s: var(--space-2xl);--control-height-xs: var(--space-xl);--control-box-size-s: var(--space-s);--control-box-size-m: var(--space-m);--control-box-size-l: var(--space-l);--control-space-xxl: var(--space-xl);--control-space-l: var(--space-xl);--control-space-m: var(--space-l);--control-space-s: var(--space-m);--control-space-xs: var(--space-s);--control-text-size-2xl: var(--size-text-xl);--control-text-size-xl: var(--size-text-xl3);--control-text-size-l: var(--size-text-l);--control-text-size-m: var(--size-text-m);--control-text-size-s: var(--size-text-s);--control-text-size-xs: var(--size-text-xs);--space-3xs: 2px;--space-2xs: 4px;--space-1xs: 6px;--space-xs: 8px;--space-xss: 10px;--space-s: 12px;--space-2s: 14px;--space-m: 16px;--space-2m: 18px;--space-l: 20px;--space-2l: 22px;--space-xl: 24px;--space-1xl: 28px;--space-2xl: 32px;--space-2xxl: 36px;--space-xxl: 40px;--space-3xl: 44px;--space-4xl: 48px;--space-5xl: 56px;--space-4xxl: 64px;--space-5xxl: 72px;--space-6xl: 96px;--box-shadow-active: 0 0 2px var(--sapphire-normal);--box-shadow-focus: 0px 0px 10px 2px #1389cc;--box-shadow-select-search: 0 3px 15px 0 rgba(31, 32, 35, .15);--select-search-input-top-l: -15%;--select-search-input-top-xxl: -35%;--container-width-xs: 375px;--container-width-s: 767px;--container-width-m: 960px;--container-width-l: 1280px;--container-width-xl: 1440px;--container-width-xxl: 1920px;--zindex-fixed: 1030;--sidebar-width-collapsed: 64px;--sidebar-width-expanded: 256px;--header-height: 64px;--sidebar-form-width-tablet: 369px;--sidebar-form-width-mobile: 309px;--tab-trail-height-m: 58px;--tab-trail-height-s: 36px;--accordion-icon-circle-size-m: 48px;--accordion-icon-circle-size-s: 36px;--accordion-icon-square-size-m: 40px;--accordion-icon-square-size-s: 32px}@supports (font-variation-settings: normal){:root{font-family:Inter,sans-serif}}:root{font-feature-settings:"zero";font-variant-numeric:slashed-zero}body{font-family:Inter,sans-serif;font-feature-settings:"zero";font-variant-numeric:slashed-zero;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
1
|
+
@font-face{font-weight:400;font-family:Montserrat;font-style:normal;src:url(./fonts/585d10920d676fcd.woff2) format("woff2"),url(./fonts/3b9f59412b17ff93.woff) format("woff")}@font-face{font-weight:700;font-family:Montserrat;font-style:normal;src:url(./fonts/f4d681a788c6d497.woff2) format("woff2"),url(./fonts/43b748f250df0f08.woff) format("woff")}@font-face{font-weight:300;font-family:Montserrat;font-style:normal;src:url(./fonts/ee3db32f0aadef5d.woff2) format("woff2"),url(./fonts/1a738bfdbc1e4d9d.woff) format("woff")}@font-face{font-weight:500;font-family:Montserrat;font-style:normal;src:url(./fonts/e51d2feb30084bc2.woff2) format("woff2"),url(./fonts/badaa6d1837432de.woff) format("woff")}@font-face{font-weight:600;font-family:Montserrat;font-style:normal;src:url(./fonts/63611593e008a77c.woff2) format("woff2"),url(./fonts/3cdd7fabbe89d2b9.woff) format("woff")}@font-face{font-weight:400;font-family:Inter;font-style:normal;src:url(./fonts/d080ae18fd04e52c.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:700;font-family:Inter;font-style:normal;src:url(./fonts/11d5bc9f0cad36d1.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:500;font-family:Inter;font-style:normal;src:url(./fonts/242d04bef81519ae.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:600;font-family:Inter;font-style:normal;src:url(./fonts/cac2ba46e8c8adc9.woff2) format("woff2");font-variant-numeric:slashed-zero}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}:root{font-feature-settings:"zero"}*{margin:0;padding:0;border:0;outline:none}*,:after,:before{box-sizing:border-box}:active,:focus{outline:0}a,a:visited,a:hover{-webkit-text-decoration:none;text-decoration:none}a:active,a:focus{outline:0}aside,footer,header,nav{display:block}body,html{width:100%;height:100%;font-size:100%;line-height:1}button,input,textarea,select{font-family:inherit}input::-ms-clear{display:none}button{background-color:transparent;cursor:pointer}button::-moz-focus-inner{padding:0;border:0}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--color-typo-brand);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}:root{--sapphire-100: #2355d7;--sapphire-90: #3564df;--sapphire-80: #4b75e2;--sapphire-70: #6186e6;--sapphire-60: #7797e9;--sapphire-50: #8da7ed;--sapphire-40: #9fb7f4;--sapphire-30: #b9caf4;--sapphire-20: #cfdaf7;--sapphire-10: #e5ebfb;--citrine-100: #ff7900;--citrine-90: #ff861a;--citrine-80: #ff9433;--citrine-70: #ffa14d;--citrine-60: #ffaf66;--citrine-50: #ffbc80;--citrine-40: #ffc999;--citrine-30: #ffd7b2;--citrine-20: #ffe4cc;--citrine-10: #fff2e5;--magenta-100: #bc2251;--magenta-90: #d8275d;--magenta-80: #dc3d6d;--magenta-70: #e15781;--magenta-60: #e46c91;--magenta-50: #e986a4;--magenta-40: #ed9cb4;--magenta-30: #f2b6c8;--magenta-20: #f6cbd8;--magenta-10: #fae5ec;--black-100: #000;--black-95: #0d0d0d;--black-90: #1a1a1a;--black-85: #262626;--black-80: #333;--black-75: #404040;--black-70: #4d4d4d;--black-65: #595959;--black-60: #666;--black-55: #737373;--black-50: #808080;--black-45: #8c8c8c;--black-40: #999;--black-35: #a6a6a6;--black-30: #b3b3b3;--black-25: #bfbfbf;--black-20: #ccc;--black-15: #d9d9d9;--black-10: #e6e6e6;--black-5: #f2f2f2;--white: #fff;--dark-blue: #0a38af;--blue-40: #a7bbef;--blue-20: #d3ddf7;--green: #1b770c;--red-tag: #f01406;--success-normal: #23b413;--success-bg-hover: #d5fbe2;--success-bg-active: #ebfdf1;--alarm-normal: #fdc023;--alarm-bg-hover: #fff0c7;--alarm-bg-active: #fff6de;--error-normal: #e64646;--error-bg-hover: #fadbdb;--error-bg-active: #fbe3e3;--disabled: #b3b3b3;--disabled-color: #b2b2b2;--light-text: var(--white);--dark-text: var(--black-100);--sapphire-normal: var(--sapphire-100);--sapphire-hover: #1b41a3;--sapphire-active: #122c70;--citrine-normal: var(--citrine-100);--citrine-hover: #e56d00;--citrine-active: #cc6100;--asphalt-border: var(--black-30);--asphalt-normal: var(--black-80);--asphalt-hover: var(--black-90);--asphalt-active: var(--black-100);--gray-normal: var(--black-5);--gray-hover: var(--black-10);--gray-active: var(--black-80);--white-normal: var(--white);--white-hover: var(--black-5);--white-transparent: rgba(255, 255, 255, .4);--white-active: var(--black-80);--red-normal: var(--error-normal);--red-hover: #e33030;--red-active: #dc1e1e;--green-normal: var(--green);--green-hover: #16610a;--green-active: #114a08;--counter-text: #ffa066;--button-height-ms: 16px;--button-height-xs: 24px;--button-height-s: 32px;--button-height-m: 40px;--button-height-l: 48px;--button-height-xl: 56px;--button-height-xxl: 64px;--select-search-height-l: 48px;--select-search-height-xxl: 64px;--select-search-options-height-desktop: 320px;--select-search-options-height-mobile: 264px;--control-default: var(--sapphire-20);--control-hover: var(--sapphire-40);--control-selected: var(--sapphire-100);--control-disabled: var(--black-10);--font-inter: "Inter", sans-serif;--font-montserrat: "Montserrat", sans-serif;--font-weight-text-regular: 400;--font-weight-text-medium: 500;--font-weight-text-semibold: 600;--font-weight-text-bold: 700;--font-weight-text-extrabold: 800;--font-weight-text-black: 900;--size-text-xs2: 8px;--size-text-xs: 10px;--size-text-s: 12px;--size-text-m: 14px;--size-text-l: 16px;--size-text-l2: 18px;--size-text-xl: 20px;--size-text-xl2: 24px;--size-text-3xl: 26px;--size-text-2xl: 28px;--size-text-xl3: 32px;--size-text-xl4: 48px;--size-text-4xl: 52px;--size-text-xl5: 72px;--size-text-xl6: 96px;--line-height-text-2xs: 1em;--line-height-text-xxs: 1.125em;--line-height-text-xs: 1.1em;--line-height-text-s: 1.2em;--line-height-text-s1: 1.25em;--line-height-text-m: 1.3em;--line-height-text-m1: 1.35em;--line-height-text-l: 1.4em;--line-height-text-l1: 1.45em;--line-height-text-xl: 1.5em;--line-height-text-xl1: 1.5em;--control-radius-xs: 4px;--control-radius: 6px;--control-radius-s: 8px;--control-radius-m-s: 16px;--control-radius-m: 20px;--control-radius-l: 24px;--control-radius-xl: 32px;--control-radius-xxl: 40px;--control-input-radius: 12px;--control-border-width: 1px;--control-height-xl: 60px;--control-height-xxl: 60px;--control-height-l: var(--space-4xl);--control-height-m: var(--space-3xl);--control-height-s: var(--space-2xl);--control-height-xs: var(--space-xl);--control-box-size-s: var(--space-s);--control-box-size-m: var(--space-m);--control-box-size-l: var(--space-l);--control-space-xxl: var(--space-xl);--control-space-l: var(--space-xl);--control-space-m: var(--space-l);--control-space-s: var(--space-m);--control-space-xs: var(--space-s);--control-text-size-2xl: var(--size-text-xl);--control-text-size-xl: var(--size-text-xl3);--control-text-size-l: var(--size-text-l);--control-text-size-m: var(--size-text-m);--control-text-size-s: var(--size-text-s);--control-text-size-xs: var(--size-text-xs);--space-3xs: 2px;--space-2xs: 4px;--space-1xs: 6px;--space-xs: 8px;--space-xss: 10px;--space-s: 12px;--space-2s: 14px;--space-m: 16px;--space-2m: 18px;--space-l: 20px;--space-2l: 22px;--space-xl: 24px;--space-1xl: 28px;--space-2xl: 32px;--space-2xxl: 36px;--space-xxl: 40px;--space-3xl: 44px;--space-4xl: 48px;--space-5xl: 56px;--space-4xxl: 64px;--space-5xxl: 72px;--space-6xl: 96px;--box-shadow-active: 0 0 2px var(--sapphire-normal);--box-shadow-focus: 0px 0px 10px 2px #1389cc;--box-shadow-select-search: 0 3px 15px 0 rgba(31, 32, 35, .15);--select-search-input-top-l: -15%;--select-search-input-top-xxl: -35%;--container-width-xs: 375px;--container-width-s: 767px;--container-width-m: 960px;--container-width-l: 1280px;--container-width-xl: 1440px;--container-width-xxl: 1920px;--zindex-fixed: 1030;--sidebar-width-collapsed: 64px;--sidebar-width-expanded: 256px;--header-height: 64px;--sidebar-form-width-tablet: 369px;--sidebar-form-width-mobile: 309px;--tab-trail-height-m: 58px;--tab-trail-height-s: 36px;--accordion-icon-circle-size-m: 48px;--accordion-icon-circle-size-s: 36px;--accordion-icon-square-size-m: 40px;--accordion-icon-square-size-s: 32px}@supports (font-variation-settings: normal){:root{font-family:Inter,sans-serif}}:root{font-feature-settings:"zero";font-variant-numeric:slashed-zero}body{font-family:Inter,sans-serif;font-feature-settings:"zero";font-variant-numeric:slashed-zero;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
@@ -3,40 +3,40 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { forwardRef } from "react";
|
4
4
|
import { EButtonVariantDefault, EButtonForm } from "./constants.js";
|
5
5
|
import { Icon } from "../../icons/Icon.js";
|
6
|
-
import '../../assets/Button.css';const button = "
|
7
|
-
const clear = "
|
8
|
-
const black = "
|
9
|
-
const gray = "
|
10
|
-
const white = "
|
11
|
-
const xs = "
|
12
|
-
const s = "
|
13
|
-
const m = "
|
14
|
-
const l = "
|
15
|
-
const xl = "
|
16
|
-
const xxl = "
|
17
|
-
const full = "
|
18
|
-
const disabled = "
|
6
|
+
import '../../assets/Button.css';const button = "_button_1ezof_2";
|
7
|
+
const clear = "_clear_1ezof_42";
|
8
|
+
const black = "_black_1ezof_120";
|
9
|
+
const gray = "_gray_1ezof_129";
|
10
|
+
const white = "_white_1ezof_138";
|
11
|
+
const xs = "_xs_1ezof_208";
|
12
|
+
const s = "_s_1ezof_72";
|
13
|
+
const m = "_m_1ezof_216";
|
14
|
+
const l = "_l_1ezof_240";
|
15
|
+
const xl = "_xl_1ezof_248";
|
16
|
+
const xxl = "_xxl_1ezof_257";
|
17
|
+
const full = "_full_1ezof_266";
|
18
|
+
const disabled = "_disabled_1ezof_272";
|
19
19
|
const cls = {
|
20
20
|
button,
|
21
21
|
clear,
|
22
|
-
"default-button": "_default-
|
23
|
-
"primary-sapphire": "_primary-
|
24
|
-
"primary-citrine": "_primary-
|
25
|
-
"secondary-asphalt": "_secondary-
|
26
|
-
"secondary-gray": "_secondary-
|
27
|
-
"secondary-white": "_secondary-
|
28
|
-
"secondary-red": "_secondary-
|
29
|
-
"round-button": "_round-
|
22
|
+
"default-button": "_default-button_1ezof_54",
|
23
|
+
"primary-sapphire": "_primary-sapphire_1ezof_54",
|
24
|
+
"primary-citrine": "_primary-citrine_1ezof_63",
|
25
|
+
"secondary-asphalt": "_secondary-asphalt_1ezof_72",
|
26
|
+
"secondary-gray": "_secondary-gray_1ezof_81",
|
27
|
+
"secondary-white": "_secondary-white_1ezof_90",
|
28
|
+
"secondary-red": "_secondary-red_1ezof_99",
|
29
|
+
"round-button": "_round-button_1ezof_109",
|
30
30
|
black,
|
31
31
|
gray,
|
32
32
|
white,
|
33
|
-
"outline-button": "_outline-
|
34
|
-
"outline-asphalt": "_outline-
|
35
|
-
"outline-gray": "_outline-
|
36
|
-
"outline-white": "_outline-
|
37
|
-
"outline-red": "_outline-
|
33
|
+
"outline-button": "_outline-button_1ezof_148",
|
34
|
+
"outline-asphalt": "_outline-asphalt_1ezof_155",
|
35
|
+
"outline-gray": "_outline-gray_1ezof_163",
|
36
|
+
"outline-white": "_outline-white_1ezof_172",
|
37
|
+
"outline-red": "_outline-red_1ezof_181",
|
38
38
|
xs,
|
39
|
-
"m-s": "_m-
|
39
|
+
"m-s": "_m-s_1ezof_216",
|
40
40
|
s,
|
41
41
|
m,
|
42
42
|
l,
|
@@ -44,7 +44,7 @@ const cls = {
|
|
44
44
|
xxl,
|
45
45
|
full,
|
46
46
|
disabled,
|
47
|
-
"icon-button": "_icon-
|
47
|
+
"icon-button": "_icon-button_1ezof_288"
|
48
48
|
};
|
49
49
|
const Button = forwardRef(
|
50
50
|
(props, ref) => {
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
2
|
+
import { EChipSize, EChipVariant } from './constants';
|
3
|
+
|
4
|
+
export type TProps = {
|
5
|
+
/**
|
6
|
+
* Дополнительный класс для компонента.
|
7
|
+
*/
|
8
|
+
className?: string;
|
9
|
+
/**
|
10
|
+
* Вариант чипа. Возможные значения определены в перечислении `EChipVariant`.
|
11
|
+
*/
|
12
|
+
variant?: `${EChipVariant}` | EChipVariant;
|
13
|
+
/**
|
14
|
+
* Размер чипа. Возможные значения определены в перечислении `EChipSize`.
|
15
|
+
*/
|
16
|
+
size?: `${EChipSize}` | EChipSize;
|
17
|
+
/**
|
18
|
+
* Функция, которая будет вызвана при нажатии на чип.
|
19
|
+
*/
|
20
|
+
onClick?: VoidFunction;
|
21
|
+
/**
|
22
|
+
* Отключено ли чип.
|
23
|
+
*/
|
24
|
+
disabled?: boolean;
|
25
|
+
/**
|
26
|
+
* Имеет ли чип действие (например, кнопку закрытия).
|
27
|
+
*/
|
28
|
+
withAction?: boolean;
|
29
|
+
};
|
30
|
+
export declare const Chip: ({ size, variant, className, onClick, disabled, withAction, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element;
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
3
|
+
import { EChipSize, EChipVariant } from "./constants.js";
|
4
|
+
import { Icon } from "../../icons/Icon.js";
|
5
|
+
import '../../assets/Chip.css';const chip = "_chip_1ckvf_2";
|
6
|
+
const disabled = "_disabled_1ckvf_40";
|
7
|
+
const xs = "_xs_1ckvf_51";
|
8
|
+
const s = "_s_1ckvf_59";
|
9
|
+
const m = "_m_1ckvf_67";
|
10
|
+
const sapphire = "_sapphire_1ckvf_75";
|
11
|
+
const citrine = "_citrine_1ckvf_84";
|
12
|
+
const asphalt = "_asphalt_1ckvf_93";
|
13
|
+
const gray = "_gray_1ckvf_102";
|
14
|
+
const white = "_white_1ckvf_111";
|
15
|
+
const green = "_green_1ckvf_120";
|
16
|
+
const cls = {
|
17
|
+
chip,
|
18
|
+
"with-action": "_with-action_1ckvf_18",
|
19
|
+
disabled,
|
20
|
+
xs,
|
21
|
+
s,
|
22
|
+
m,
|
23
|
+
sapphire,
|
24
|
+
citrine,
|
25
|
+
asphalt,
|
26
|
+
gray,
|
27
|
+
white,
|
28
|
+
green
|
29
|
+
};
|
30
|
+
const Chip = ({
|
31
|
+
size = EChipSize.M,
|
32
|
+
variant = EChipVariant.Sapphire,
|
33
|
+
className,
|
34
|
+
onClick,
|
35
|
+
disabled: disabled2,
|
36
|
+
withAction,
|
37
|
+
children
|
38
|
+
}) => {
|
39
|
+
const classes = classNames(
|
40
|
+
cls.chip,
|
41
|
+
className,
|
42
|
+
{
|
43
|
+
[cls["with-action"]]: withAction,
|
44
|
+
[cls.disabled]: disabled2
|
45
|
+
},
|
46
|
+
cls[variant],
|
47
|
+
cls[size]
|
48
|
+
);
|
49
|
+
return /* @__PURE__ */ jsxs("button", { type: "button", onClick, className: classes, children: [
|
50
|
+
children,
|
51
|
+
withAction && /* @__PURE__ */ jsx(Icon, { iconName: "Close16px" })
|
52
|
+
] });
|
53
|
+
};
|
54
|
+
export {
|
55
|
+
Chip
|
56
|
+
};
|
@@ -0,0 +1,19 @@
|
|
1
|
+
var EChipSize = /* @__PURE__ */ ((EChipSize2) => {
|
2
|
+
EChipSize2["XS"] = "xs";
|
3
|
+
EChipSize2["S"] = "s";
|
4
|
+
EChipSize2["M"] = "m";
|
5
|
+
return EChipSize2;
|
6
|
+
})(EChipSize || {});
|
7
|
+
var EChipVariant = /* @__PURE__ */ ((EChipVariant2) => {
|
8
|
+
EChipVariant2["Sapphire"] = "sapphire";
|
9
|
+
EChipVariant2["Citrine"] = "citrine";
|
10
|
+
EChipVariant2["Asphalt"] = "asphalt";
|
11
|
+
EChipVariant2["Gray"] = "gray";
|
12
|
+
EChipVariant2["White"] = "white";
|
13
|
+
EChipVariant2["Green"] = "green";
|
14
|
+
return EChipVariant2;
|
15
|
+
})(EChipVariant || {});
|
16
|
+
export {
|
17
|
+
EChipSize,
|
18
|
+
EChipVariant
|
19
|
+
};
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
2
|
-
import { K, w, a, z as z$1, U, l, T, j as j$1, u as u$1, I, G, p } from "../../label-
|
2
|
+
import { K, w, a, z as z$1, U, l, T, j as j$1, u as u$1, I, G, p } from "../../label-BTEGh6O_.js";
|
3
3
|
import { W, y, o, H, s, n, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D, a as u$2, u as u$3, c as o$1 } from "../../keyboard-B256ZoM-.js";
|
4
4
|
import React__default, { createContext, useId, useReducer, useRef, useMemo, useCallback, useContext, forwardRef } from "react";
|
5
5
|
import { u } from "../../use-by-comparator-BUO78DGe.js";
|
@@ -11,7 +11,7 @@ import * as ReactDOM from "react-dom";
|
|
11
11
|
import { flushSync, createPortal } from "react-dom";
|
12
12
|
import { w } from "../../use-active-press-B6yeSopF.js";
|
13
13
|
import { u as u$4 } from "../../use-by-comparator-BUO78DGe.js";
|
14
|
-
import { K, a as a$5, l as l$3, T as T$1, z, j as j$1, u as u$6, I as I$1, G } from "../../label-
|
14
|
+
import { K, a as a$5, l as l$3, T as T$1, z, j as j$1, u as u$6, I as I$1, G } from "../../label-BTEGh6O_.js";
|
15
15
|
import { A, h as h$1, f as f$6, _ } from "../../focus-management-1rQPII7Z.js";
|
16
16
|
import { T as T$2 } from "../../use-resolve-button-type-B6LE6gU3.js";
|
17
17
|
import { c as c$2, i as i$2, u as u$7, V, A as A$1 } from "../../open-closed-CbXq00et.js";
|
@@ -3,6 +3,7 @@ export declare const DIFF_BETWEEN_STEP_AND_INDEX = 1;
|
|
3
3
|
export declare const ID_SEPARATOR = "-//-";
|
4
4
|
export declare enum EStepsSize {
|
5
5
|
XS = "XS",
|
6
|
+
XS1 = "XS1",
|
6
7
|
S = "S",
|
7
8
|
M = "M",
|
8
9
|
L = "L"
|
@@ -12,6 +13,10 @@ export declare const StepSize: {
|
|
12
13
|
width: number;
|
13
14
|
height: number;
|
14
15
|
};
|
16
|
+
XS1: {
|
17
|
+
width: number;
|
18
|
+
height: number;
|
19
|
+
};
|
15
20
|
S: {
|
16
21
|
width: number;
|
17
22
|
height: number;
|
@@ -3,6 +3,7 @@ const DIFF_BETWEEN_STEP_AND_INDEX = 1;
|
|
3
3
|
const ID_SEPARATOR = "-//-";
|
4
4
|
var EStepsSize = /* @__PURE__ */ ((EStepsSize2) => {
|
5
5
|
EStepsSize2["XS"] = "XS";
|
6
|
+
EStepsSize2["XS1"] = "XS1";
|
6
7
|
EStepsSize2["S"] = "S";
|
7
8
|
EStepsSize2["M"] = "M";
|
8
9
|
EStepsSize2["L"] = "L";
|
@@ -13,6 +14,10 @@ const StepSize = {
|
|
13
14
|
width: 19,
|
14
15
|
height: 8
|
15
16
|
},
|
17
|
+
XS1: {
|
18
|
+
width: 32,
|
19
|
+
height: 12
|
20
|
+
},
|
16
21
|
S: {
|
17
22
|
width: 36,
|
18
23
|
height: 12
|
@@ -1,28 +1,34 @@
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
2
|
-
import { c as
|
2
|
+
import { W, p, o, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D, H as H$1, c as o$1 } from "../../keyboard-B256ZoM-.js";
|
3
3
|
import React__default, { useId, useState, useMemo, useCallback, forwardRef, useEffect } from "react";
|
4
|
-
import { Icon } from "../../icons/Icon.js";
|
5
|
-
import { W, p, o, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D, H, c as o$1 } from "../../keyboard-B256ZoM-.js";
|
6
4
|
import { w } from "../../use-active-press-B6yeSopF.js";
|
7
|
-
import { u, a, l, T, I, G, j, p as p$1 } from "../../label-
|
5
|
+
import { u, a, l, T, I, G, j, p as p$1, z, U, b as l$1, f, W as W$1, K } from "../../label-BTEGh6O_.js";
|
8
6
|
import { r } from "../../bugs-CSBdWk0R.js";
|
7
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
8
|
+
import { Icon } from "../../icons/Icon.js";
|
9
9
|
import '../../assets/Switch.css';let se = "span";
|
10
10
|
function ie(T$1, h) {
|
11
|
-
let C = useId(), k = u(), x = a(), { id: g = k || `headlessui-checkbox-${C}`, disabled: e = x || false, autoFocus: s = false, checked: E, defaultChecked: v, onChange: P, name: d, value: D$1, form: R, indeterminate: n = false, ...
|
11
|
+
let C = useId(), k = u(), x = a(), { id: g = k || `headlessui-checkbox-${C}`, disabled: e = x || false, autoFocus: s = false, checked: E, defaultChecked: v, onChange: P, name: d, value: D$1, form: R, indeterminate: n = false, ...A2 } = T$1, r$1 = l(v), [a$1, t] = T(E, P, r$1 != null ? r$1 : false), F = I(), K2 = G(), _ = p(), [p$2, c] = useState(false), u$1 = o(() => {
|
12
12
|
c(true), t == null || t(!a$1), _.nextFrame(() => {
|
13
13
|
c(false);
|
14
14
|
});
|
15
|
-
}),
|
15
|
+
}), H2 = o((o2) => {
|
16
16
|
if (r(o2.currentTarget)) return o2.preventDefault();
|
17
17
|
o2.preventDefault(), u$1();
|
18
18
|
}), B = o((o2) => {
|
19
19
|
o2.key === o$1.Space ? (o2.preventDefault(), u$1()) : o2.key === o$1.Enter && p$1(o2.currentTarget);
|
20
|
-
}),
|
20
|
+
}), L2 = o((o2) => o2.preventDefault()), { isFocusVisible: m, focusProps: I$1 } = $f7dceffc5ad7768b$export$4e328f61c538687f({ autoFocus: s }), { isHovered: f2, hoverProps: M } = $6179b936705e76d3$export$ae780daf29e6d456({ isDisabled: e }), { pressed: b, pressProps: U2 } = w({ disabled: e }), O = D({ ref: h, id: g, role: "checkbox", "aria-checked": n ? "mixed" : a$1 ? "true" : "false", "aria-labelledby": F, "aria-describedby": K2, "aria-disabled": e ? true : void 0, indeterminate: n ? "true" : void 0, tabIndex: e ? void 0 : 0, onKeyUp: e ? void 0 : B, onKeyPress: e ? void 0 : L2, onClick: e ? void 0 : H2 }, I$1, M, U2), X = useMemo(() => ({ checked: a$1, disabled: e, hover: f2, focus: m, active: b, indeterminate: n, changing: p$2, autofocus: s }), [a$1, n, e, f2, m, b, p$2, s]), G$1 = useCallback(() => {
|
21
21
|
if (r$1 !== void 0) return t == null ? void 0 : t(r$1);
|
22
22
|
}, [t, r$1]);
|
23
|
-
return React__default.createElement(React__default.Fragment, null, d != null && React__default.createElement(j, { disabled: e, data: { [d]: D$1 || "on" }, overrides: { type: "checkbox", checked: a$1 }, form: R, onReset: G$1 }), H({ ourProps: O, theirProps:
|
23
|
+
return React__default.createElement(React__default.Fragment, null, d != null && React__default.createElement(j, { disabled: e, data: { [d]: D$1 || "on" }, overrides: { type: "checkbox", checked: a$1 }, form: R, onReset: G$1 }), H$1({ ourProps: O, theirProps: A2, slot: X, defaultTag: se, name: "Checkbox" }));
|
24
24
|
}
|
25
25
|
let Re = W(ie);
|
26
|
+
let A = "div";
|
27
|
+
function L(d, l2) {
|
28
|
+
let t = `headlessui-control-${useId()}`, [s, p2] = z(), [n, a$1] = U(), m = a(), { disabled: e = m || false, ...o2 } = d, i = useMemo(() => ({ disabled: e }), [e]);
|
29
|
+
return React__default.createElement(l$1, { value: e }, React__default.createElement(p2, { value: s }, React__default.createElement(a$1, { value: n }, React__default.createElement(f, { id: t }, H$1({ ourProps: { ref: l2, disabled: e || void 0, "aria-disabled": e || void 0 }, theirProps: { ...o2, children: React__default.createElement(W$1, null, typeof o2.children == "function" ? o2.children(i) : o2.children) }, slot: i, defaultTag: A, name: "Field" })))));
|
30
|
+
}
|
31
|
+
let H = W(L);
|
26
32
|
const container = "_container_18cvn_2";
|
27
33
|
const label = "_label_18cvn_27";
|
28
34
|
const enabled = "_enabled_18cvn_31";
|
@@ -34,7 +40,7 @@ const cls = {
|
|
34
40
|
};
|
35
41
|
const Switch = forwardRef(
|
36
42
|
(props, ref) => {
|
37
|
-
const { checked, onChange, children, ...restProps } = props;
|
43
|
+
const { checked, onChange, children, id, ...restProps } = props;
|
38
44
|
const [enabled2, setEnabled] = useState(checked);
|
39
45
|
const handleChange = (value) => {
|
40
46
|
setEnabled(value);
|
@@ -43,10 +49,11 @@ const Switch = forwardRef(
|
|
43
49
|
useEffect(() => {
|
44
50
|
setEnabled(!!checked);
|
45
51
|
}, [checked]);
|
46
|
-
return /* @__PURE__ */ jsxs(
|
52
|
+
return /* @__PURE__ */ jsxs(H, { className: cls.container, children: [
|
47
53
|
/* @__PURE__ */ jsx(
|
48
54
|
Re,
|
49
55
|
{
|
56
|
+
id,
|
50
57
|
ref,
|
51
58
|
checked: enabled2,
|
52
59
|
onChange: handleChange,
|
@@ -57,7 +64,7 @@ const Switch = forwardRef(
|
|
57
64
|
children: /* @__PURE__ */ jsx(Icon, { iconName: "Done16px" })
|
58
65
|
}
|
59
66
|
),
|
60
|
-
children && /* @__PURE__ */ jsx(
|
67
|
+
children && /* @__PURE__ */ jsx(K, { htmlFor: id, className: cls.label, children })
|
61
68
|
] });
|
62
69
|
}
|
63
70
|
);
|
@@ -7,16 +7,21 @@ import { Icon } from "../../icons/Icon.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
8
8
|
import { c as cls } from "../../Input-DdKAiGfJ.js";
|
9
9
|
import { EInputVariant } from "../Input/constants.js";
|
10
|
-
import '../../assets/TextArea.css';const textarea = "
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
10
|
+
import '../../assets/TextArea.css';const textarea = "_textarea_1hbfy_2";
|
11
|
+
const label = "_label_1hbfy_11";
|
12
|
+
const s = "_s_1hbfy_35";
|
13
|
+
const m = "_m_1hbfy_43";
|
14
|
+
const l = "_l_1hbfy_11";
|
14
15
|
const textareaCls = {
|
16
|
+
"textarea-wrapper": "_textarea-wrapper_1hbfy_2",
|
15
17
|
textarea,
|
18
|
+
"has-label": "_has-label_1hbfy_8",
|
19
|
+
label,
|
20
|
+
"has-left-slot": "_has-left-slot_1hbfy_24",
|
21
|
+
"active-label": "_active-label_1hbfy_27",
|
16
22
|
s,
|
17
23
|
m,
|
18
|
-
l
|
19
|
-
"has-label": "_has-label_46c4k_21"
|
24
|
+
l
|
20
25
|
};
|
21
26
|
const renderAddon = (addon) => {
|
22
27
|
var _a, _b;
|
@@ -62,7 +67,7 @@ const TextArea = memo(
|
|
62
67
|
id,
|
63
68
|
onFocus,
|
64
69
|
onBlur,
|
65
|
-
label,
|
70
|
+
label: label2,
|
66
71
|
onChange,
|
67
72
|
withClearButton,
|
68
73
|
disabled,
|
@@ -73,14 +78,14 @@ const TextArea = memo(
|
|
73
78
|
} = props;
|
74
79
|
const [isFocused, setIsFocused] = useState(autofocus);
|
75
80
|
const [withValue, setWithValue] = useState(!!value);
|
76
|
-
const
|
77
|
-
const
|
81
|
+
const textareaRef = useRef(null);
|
82
|
+
const mergedTextareaRef = useMergeRefs(textareaRef, ref);
|
78
83
|
useEffect(() => {
|
79
84
|
if (autofocus) {
|
80
85
|
setIsFocused(true);
|
81
86
|
}
|
82
87
|
}, [autofocus]);
|
83
|
-
const handleResize = useAutoResizeTextArea(
|
88
|
+
const handleResize = useAutoResizeTextArea(textareaRef.current);
|
84
89
|
const handleBlur = (event) => {
|
85
90
|
const currentValue = event.currentTarget.value;
|
86
91
|
onBlur == null ? void 0 : onBlur(event);
|
@@ -97,9 +102,9 @@ const TextArea = memo(
|
|
97
102
|
onFocus == null ? void 0 : onFocus(event);
|
98
103
|
};
|
99
104
|
const handleClear = () => {
|
100
|
-
if (
|
101
|
-
|
102
|
-
|
105
|
+
if (textareaRef == null ? void 0 : textareaRef.current) {
|
106
|
+
textareaRef.current.value = "";
|
107
|
+
textareaRef.current.focus();
|
103
108
|
setWithValue(false);
|
104
109
|
handleResize();
|
105
110
|
onChange == null ? void 0 : onChange({
|
@@ -121,14 +126,15 @@ const TextArea = memo(
|
|
121
126
|
[cls.disabled]: disabled || readonly,
|
122
127
|
[cls["has-left-slot"]]: !!currentLeftAddon,
|
123
128
|
[cls["has-right-slot"]]: !!currentRightAddon,
|
124
|
-
[textareaCls["has-label"]]: !!
|
129
|
+
[textareaCls["has-label"]]: !!label2
|
125
130
|
};
|
126
131
|
const labelClassNames = classNames(
|
127
132
|
cls.label,
|
133
|
+
textareaCls.label,
|
128
134
|
{
|
129
|
-
[
|
135
|
+
[textareaCls["active-label"]]: isFocused || value,
|
130
136
|
[cls.disabled]: disabled || readonly,
|
131
|
-
[
|
137
|
+
[textareaCls["has-left-slot"]]: !!currentLeftAddon
|
132
138
|
},
|
133
139
|
className,
|
134
140
|
cls[size]
|
@@ -145,6 +151,7 @@ const TextArea = memo(
|
|
145
151
|
{
|
146
152
|
className: classNames(
|
147
153
|
cls["input-wrapper"],
|
154
|
+
textareaCls["textarea-wrapper"],
|
148
155
|
cls[variant],
|
149
156
|
textareaCls[size],
|
150
157
|
cls[size],
|
@@ -155,13 +162,13 @@ const TextArea = memo(
|
|
155
162
|
wrapperClassName
|
156
163
|
),
|
157
164
|
children: [
|
158
|
-
|
165
|
+
label2 && /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelClassNames, children: label2 }),
|
159
166
|
currentLeftAddon && /* @__PURE__ */ jsx(
|
160
167
|
"span",
|
161
168
|
{
|
162
169
|
className: classNames(cls["left-slot"], {
|
163
170
|
[cls.focused]: isFocused,
|
164
|
-
[cls["has-label"]]: !!
|
171
|
+
[cls["has-label"]]: !!label2
|
165
172
|
}),
|
166
173
|
children: currentLeftAddon
|
167
174
|
}
|
@@ -169,7 +176,7 @@ const TextArea = memo(
|
|
169
176
|
/* @__PURE__ */ jsx(
|
170
177
|
"textarea",
|
171
178
|
{
|
172
|
-
ref:
|
179
|
+
ref: mergedTextareaRef,
|
173
180
|
id,
|
174
181
|
className: inputClassNames,
|
175
182
|
onFocus: handleFocus,
|
@@ -185,7 +192,7 @@ const TextArea = memo(
|
|
185
192
|
{
|
186
193
|
className: classNames(cls["right-slot"], {
|
187
194
|
[cls.focused]: isFocused,
|
188
|
-
[cls["has-label"]]: !!
|
195
|
+
[cls["has-label"]]: !!label2
|
189
196
|
}),
|
190
197
|
children: currentRightAddon
|
191
198
|
}
|
@@ -41,3 +41,4 @@ export { ELinkSize, ELinkVariant, Link } from './AnchorLink';
|
|
41
41
|
export { NotificationBadge } from './NotificationBadge';
|
42
42
|
export type { TNotificationBadgeProps } from './NotificationBadge';
|
43
43
|
export { ENotificationBadgeSize } from './NotificationBadge';
|
44
|
+
export { Chip, EChipSize, EChipVariant } from './Chip';
|
package/dist/components/index.js
CHANGED
@@ -41,10 +41,13 @@ import { Link } from "./AnchorLink/Link.js";
|
|
41
41
|
import { ELinkSize, ELinkVariant } from "./AnchorLink/constants.js";
|
42
42
|
import { NotificationBadge } from "./NotificationBadge/NotificationBadge.js";
|
43
43
|
import { ENotificationBadgeSize } from "./NotificationBadge/constants.js";
|
44
|
+
import { Chip } from "./Chip/Chip.js";
|
45
|
+
import { EChipSize, EChipVariant } from "./Chip/constants.js";
|
44
46
|
export {
|
45
47
|
Accordion,
|
46
48
|
AccordionItem,
|
47
49
|
Button,
|
50
|
+
Chip,
|
48
51
|
DatePicker,
|
49
52
|
Drawer,
|
50
53
|
EAccordionSize,
|
@@ -53,6 +56,8 @@ export {
|
|
53
56
|
EButtonVariantDefault,
|
54
57
|
EButtonVariantOutline,
|
55
58
|
EButtonVariantRound,
|
59
|
+
EChipSize,
|
60
|
+
EChipVariant,
|
56
61
|
EDrawerPosition,
|
57
62
|
EInputSize,
|
58
63
|
EInputVariant,
|
package/dist/index.js
CHANGED
@@ -41,6 +41,8 @@ import { Link } from "./components/AnchorLink/Link.js";
|
|
41
41
|
import { ELinkSize, ELinkVariant } from "./components/AnchorLink/constants.js";
|
42
42
|
import { NotificationBadge } from "./components/NotificationBadge/NotificationBadge.js";
|
43
43
|
import { ENotificationBadgeSize } from "./components/NotificationBadge/constants.js";
|
44
|
+
import { Chip } from "./components/Chip/Chip.js";
|
45
|
+
import { EChipSize, EChipVariant } from "./components/Chip/constants.js";
|
44
46
|
import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
|
45
47
|
import { EMediaQuery, EMinMediaQuery } from "./hooks/useMediaQuery/constants.js";
|
46
48
|
import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
|
@@ -54,6 +56,7 @@ import './assets/index.css';export {
|
|
54
56
|
Accordion,
|
55
57
|
AccordionItem,
|
56
58
|
Button,
|
59
|
+
Chip,
|
57
60
|
DatePicker,
|
58
61
|
Drawer,
|
59
62
|
EAccordionSize,
|
@@ -62,6 +65,8 @@ import './assets/index.css';export {
|
|
62
65
|
EButtonVariantDefault,
|
63
66
|
EButtonVariantOutline,
|
64
67
|
EButtonVariantRound,
|
68
|
+
EChipSize,
|
69
|
+
EChipVariant,
|
65
70
|
EDrawerPosition,
|
66
71
|
EInputSize,
|
67
72
|
EInputVariant,
|
@@ -1,11 +1,14 @@
|
|
1
1
|
import React__default, { createContext, useContext, useState, useRef, useEffect, useMemo, useId } from "react";
|
2
|
-
import { o as o$1, p as p$1, m, W, y, n, H } from "./keyboard-B256ZoM-.js";
|
2
|
+
import { o as o$1, p as p$1, m, W as W$1, y, n, H } from "./keyboard-B256ZoM-.js";
|
3
3
|
import { createPortal } from "react-dom";
|
4
4
|
import { T as T$1, s } from "./hidden-BuVoeHNy.js";
|
5
5
|
let e$2 = createContext(void 0);
|
6
6
|
function a$1() {
|
7
7
|
return useContext(e$2);
|
8
8
|
}
|
9
|
+
function l$1({ value: t, children: o2 }) {
|
10
|
+
return React__default.createElement(e$2.Provider, { value: t }, o2);
|
11
|
+
}
|
9
12
|
function T(l2, r, c2) {
|
10
13
|
let [i, s2] = useState(c2), e2 = l2 !== void 0, t = useRef(e2), u2 = useRef(false), d = useRef(false);
|
11
14
|
return e2 && !t.current && !u2.current ? (u2.current = true, t.current = e2, console.error("A component is changing from uncontrolled to controlled. This may be caused by the value changing from undefined to a defined value, which should not happen.")) : !e2 && t.current && !d.current && (d.current = true, t.current = e2, console.error("A component is changing from controlled to uncontrolled. This may be caused by the value changing from a defined value to undefined, which should not happen.")), [e2 ? l2 : i, o$1((n2) => (e2 || s2(n2), r == null ? void 0 : r(n2)))];
|
@@ -15,14 +18,14 @@ function l(e2) {
|
|
15
18
|
return t;
|
16
19
|
}
|
17
20
|
function e$1(i = {}, s2 = null, t = []) {
|
18
|
-
for (let [r, n2] of Object.entries(i)) o(t, f$
|
21
|
+
for (let [r, n2] of Object.entries(i)) o(t, f$3(s2, r), n2);
|
19
22
|
return t;
|
20
23
|
}
|
21
|
-
function f$
|
24
|
+
function f$3(i, s2) {
|
22
25
|
return i ? i + "[" + s2 + "]" : s2;
|
23
26
|
}
|
24
27
|
function o(i, s2, t) {
|
25
|
-
if (Array.isArray(t)) for (let [r, n2] of t.entries()) o(i, f$
|
28
|
+
if (Array.isArray(t)) for (let [r, n2] of t.entries()) o(i, f$3(s2, r.toString()), n2);
|
26
29
|
else t instanceof Date ? i.push([s2, t.toISOString()]) : typeof t == "boolean" ? i.push([s2, t ? "1" : "0"]) : typeof t == "string" ? i.push([s2, t]) : typeof t == "number" ? i.push([s2, `${t}`]) : t == null ? i.push([s2, ""]) : e$1(t, s2, i);
|
27
30
|
}
|
28
31
|
function p(i) {
|
@@ -36,9 +39,13 @@ function p(i) {
|
|
36
39
|
(r = s2.requestSubmit) == null || r.call(s2);
|
37
40
|
}
|
38
41
|
}
|
39
|
-
let f$
|
42
|
+
let f$2 = createContext(null);
|
43
|
+
function W(t) {
|
44
|
+
let [e2, r] = useState(null);
|
45
|
+
return React__default.createElement(f$2.Provider, { value: { target: e2 } }, t.children, React__default.createElement(T$1, { features: s.Hidden, ref: r }));
|
46
|
+
}
|
40
47
|
function c$1({ children: t }) {
|
41
|
-
let e2 = useContext(f$
|
48
|
+
let e2 = useContext(f$2);
|
42
49
|
if (!e2) return React__default.createElement(React__default.Fragment, null, t);
|
43
50
|
let { target: r } = e2;
|
44
51
|
return r ? createPortal(React__default.createElement(React__default.Fragment, null, t), r) : null;
|
@@ -65,6 +72,9 @@ let e = createContext(void 0);
|
|
65
72
|
function u() {
|
66
73
|
return useContext(e);
|
67
74
|
}
|
75
|
+
function f$1({ id: t, children: r }) {
|
76
|
+
return React__default.createElement(e.Provider, { value: t }, r);
|
77
|
+
}
|
68
78
|
let a = createContext(null);
|
69
79
|
a.displayName = "DescriptionContext";
|
70
80
|
function f() {
|
@@ -96,7 +106,7 @@ function C(r, e2) {
|
|
96
106
|
let o2 = t || false, p2 = useMemo(() => ({ ...n$1.slot, disabled: o2 }), [n$1.slot, o2]), D = { ref: s2, ...n$1.props, id: i };
|
97
107
|
return H({ ourProps: D, theirProps: l2, slot: p2, defaultTag: S, name: n$1.name || "Description" });
|
98
108
|
}
|
99
|
-
let _ = W(C), w = Object.assign(_, {});
|
109
|
+
let _ = W$1(C), w = Object.assign(_, {});
|
100
110
|
let c = createContext(null);
|
101
111
|
c.displayName = "LabelContext";
|
102
112
|
function P() {
|
@@ -142,14 +152,17 @@ function G(r, l2) {
|
|
142
152
|
}), d = g || false, C2 = useMemo(() => ({ ...e2.slot, disabled: d }), [e2.slot, d]), f2 = { ref: p2, ...e2.props, id: t, htmlFor: s2, onClick: u$1 };
|
143
153
|
return m2 && ("onClick" in f2 && (delete f2.htmlFor, delete f2.onClick), "onClick" in i && delete i.onClick), H({ ourProps: f2, theirProps: i, slot: C2, defaultTag: s2 ? N : "div", name: e2.name || "Label" });
|
144
154
|
}
|
145
|
-
let U = W(G), K = Object.assign(U, {});
|
155
|
+
let U = W$1(G), K = Object.assign(U, {});
|
146
156
|
export {
|
147
157
|
G$1 as G,
|
148
158
|
I,
|
149
159
|
K,
|
150
160
|
T,
|
151
161
|
U$1 as U,
|
162
|
+
W,
|
152
163
|
a$1 as a,
|
164
|
+
l$1 as b,
|
165
|
+
f$1 as f,
|
153
166
|
j,
|
154
167
|
l,
|
155
168
|
p,
|