triafly-ui-kit 1.0.116 → 1.0.117

package/dist/assets/src/components/Ui/DatePicker/DatePicker.css

@@ -1 +1 @@
-.datepicker{position:relative;width:160px;font-family:Arial,sans-serif}.datepicker .native-input{position:absolute;opacity:0;pointer-events:none;height:0;width:0}.datepicker-input{display:flex;align-items:center;gap:8px;height:44px;padding:8px;border:1px solid var(--color-border-primary-default);border-radius:8px;background-color:var(--color-bg-neutral-basic-default);cursor:pointer;transition:border-color .2s}.datepicker-input:hover{border-color:var(--color-bg-neutral-medium-default)}.datepicker-input .placeholder{margin:0 auto 0 0}.datepicker-input .caret *{fill:var(--color-icon-secondary-default)}.datepicker-calendar{position:absolute;top:100%;left:0;z-index:100;padding:16px;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default)}.datepicker-calendar .calendar-controls{display:flex;justify-content:space-between;margin-bottom:16px}.datepicker-calendar .month-control,.datepicker-calendar .year-control{display:flex;align-items:center;justify-content:space-between}.datepicker-calendar .month-control{width:160px}.datepicker-calendar .current-month,.datepicker-calendar .current-year{min-width:60px;text-align:center;font-weight:600}.datepicker-calendar .nav-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;cursor:pointer;transition:background-color .2s}.datepicker-calendar .calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px;text-align:center;font-size:12px}.datepicker-calendar .calendar-weekdays .weekday{font-weight:600}.datepicker-calendar .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.datepicker-calendar .calendar-days .day{display:flex;align-items:center;justify-content:center;height:40px;width:40px;cursor:pointer;font-size:14px;flex-direction:column;border-radius:4px}.datepicker-calendar .calendar-days .day:hover{background-color:var(--color-bg-neutral-light-default)}.datepicker-calendar .calendar-days .day.selected{background-color:var(--color-bg-brand-default);color:var(--color-text-primary-inversed)}.datepicker-calendar .calendar-days .day.disabled{color:var(--color-text-secondary-default);pointer-events:none}.datepicker-calendar .calendar-days .day.other-month{color:var(--color-text-secondary-default);opacity:.7}.datepicker-calendar .calendar-days .day.today{position:relative}.datepicker-calendar .calendar-days .day.today:after{content:"";display:block;position:absolute;width:5px;height:5px;border-radius:50%;background-color:var(--color-bg-brand-default);bottom:4px}.datepicker-calendar .calendar-days .day.today.selected:after{background-color:var(--color-bg-neutral-basic-default)}
+.datepicker{position:relative;min-width:160px;font-family:Arial,sans-serif}.datepicker .native-input{position:absolute;opacity:0;pointer-events:none;height:0;width:0}.datepicker-input{display:flex;align-items:center;gap:8px;height:44px;padding:8px;border:1px solid var(--color-border-primary-default);border-radius:8px;background-color:var(--color-bg-neutral-basic-default);cursor:pointer;transition:border-color .2s}.datepicker-input:hover{border-color:var(--color-bg-neutral-medium-default)}.datepicker-input .placeholder{margin:0 auto 0 0}.datepicker-input .caret *{fill:var(--color-icon-secondary-default)}.datepicker-calendar{position:absolute;top:100%;left:0;z-index:100;padding:16px;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default)}.datepicker-calendar .calendar-controls{display:flex;justify-content:space-between;margin-bottom:16px}.datepicker-calendar .month-control,.datepicker-calendar .year-control{display:flex;align-items:center;justify-content:space-between}.datepicker-calendar .month-control{width:160px}.datepicker-calendar .current-month,.datepicker-calendar .current-year{min-width:60px;text-align:center;font-weight:600}.datepicker-calendar .nav-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;cursor:pointer;transition:background-color .2s}.datepicker-calendar .calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px;text-align:center;font-size:12px}.datepicker-calendar .calendar-weekdays .weekday{font-weight:600}.datepicker-calendar .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.datepicker-calendar .calendar-days .day{display:flex;align-items:center;justify-content:center;height:40px;width:40px;cursor:pointer;font-size:14px;flex-direction:column;border-radius:4px}.datepicker-calendar .calendar-days .day:hover{background-color:var(--color-bg-neutral-light-default)}.datepicker-calendar .calendar-days .day.selected{background-color:var(--color-bg-brand-default);color:var(--color-text-primary-inversed)}.datepicker-calendar .calendar-days .day.disabled{color:var(--color-text-secondary-default);pointer-events:none}.datepicker-calendar .calendar-days .day.other-month{color:var(--color-text-secondary-default);opacity:.7}.datepicker-calendar .calendar-days .day.today{position:relative}.datepicker-calendar .calendar-days .day.today:after{content:"";display:block;position:absolute;width:5px;height:5px;border-radius:50%;background-color:var(--color-bg-brand-default);bottom:4px}.datepicker-calendar .calendar-days .day.today.selected:after{background-color:var(--color-bg-neutral-basic-default)}

package/dist/assets/src/components/Ui/DropdownSearchInput/DropdownSearchInput.css

@@ -1 +1 @@
-.dropdown-search-input-container{position:relative;width:100%;display:flex;flex-direction:column;gap:8px;min-width:200px}.dropdown-search-input{display:flex;justify-content:space-between;align-items:center;padding:0 8px;background-color:var(--color-bg-neutral-basic-default);border:1px solid var(--color-border-primary-default);border-radius:8px;cursor:pointer;min-height:40px;flex-direction:row}.dropdown-search-input:hover{box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-search-input:focus{outline:none;border-color:var(--color-text-brand-default)}.dropdown-search-input--expanded{box-shadow:inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-search-input--disabled{background-color:var(--color-bg-neutral-light-default);cursor:not-allowed;opacity:.5}.dropdown-search-input--error{border-color:var(--color-border-error-default)}.dropdown-search-input__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-search-input__indicators{display:flex;align-items:center;gap:8px}.dropdown-search-input__indicators *{fill:var(--color-icon-secondary-default)}.dropdown-search-input__indicators:hover *{fill:var(--color-icon-secondary-hover)}.dropdown-search-input__clear{background:none;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;color:var(--color-border-primary-default)}.dropdown-search-input__caret{color:var(--color-border-primary-default);width:16px;height:16px}.dropdown-search-input-suggestions-portal{border:1px solid var(--color-border-primary-default);border-radius:8px;box-shadow:0 0 10px -2px var(--effectseffect-shadow-XL);padding:8px;background-color:var(--color-bg-neutral-basic-default)}.dropdown-search-input-suggestions-portal .text-input.clearable input{padding-right:0!important}.dropdown-search-input-suggestions-portal__header{margin:0 0 8px}.dropdown-search-input-suggestions-portal__input-search{width:100%}.dropdown-search-input-suggestions-list{list-style:none;margin:0;padding:0;max-height:250px;overflow-y:auto}.dropdown-search-input-suggestions-list__item{padding:8px;cursor:pointer;border-radius:6px;display:flex;align-items:center}.dropdown-search-input-suggestions-list__item:hover{background-color:var(--color-bg-neutral-lightest-default)}.dropdown-search-input-suggestions-list__item:last-child{border-bottom:none}.dropdown-search-input-suggestions-list__item--selected,.dropdown-search-input-suggestions-list__item--selected:hover{font-weight:600;background-color:var(--color-bg-brand_lightest-default)}.dropdown-search-input-suggestions-list__empty{padding:16px;text-align:center;color:var(--color-text-secondary-default);font-style:italic;cursor:default}.dropdown-search-input-suggestions-list__empty:hover{background-color:transparent;cursor:default}.dropdown-search-input__error-message{color:var(--color-text-error-default);font-size:12px;margin-top:4px}
+.dropdown-search-input-container{position:relative;width:100%;display:flex;flex-direction:column;gap:8px;min-width:200px}.dropdown-search-input{display:flex;justify-content:space-between;align-items:center;padding:0 8px;background-color:var(--color-bg-neutral-basic-default);border:1px solid var(--color-border-primary-default);border-radius:8px;cursor:pointer;min-height:40px;flex-direction:row}.dropdown-search-input:hover{box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-search-input:focus{outline:none;border-color:var(--color-text-brand-default)}.dropdown-search-input--expanded{box-shadow:inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-search-input--disabled{background-color:var(--color-bg-neutral-light-default);cursor:not-allowed;opacity:.5}.dropdown-search-input--error{border-color:var(--color-border-error-default)}.dropdown-search-input__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-search-input__indicators{display:flex;align-items:center;gap:8px}.dropdown-search-input__indicators *{fill:var(--color-icon-secondary-default)}.dropdown-search-input__indicators:hover *{fill:var(--color-icon-secondary-hover)}.dropdown-search-input__clear{background:none;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;color:var(--color-border-primary-default)}.dropdown-search-input__caret{color:var(--color-border-primary-default);width:16px;height:16px}.dropdown-search-input-suggestions-portal{border:1px solid var(--color-border-primary-default);border-radius:8px;box-shadow:0 0 10px -2px var(--effectseffect-shadow-XL);padding:8px;background-color:var(--color-bg-neutral-basic-default)}.dropdown-search-input-suggestions-portal .text-input.clearable input{padding-right:0!important}.dropdown-search-input-suggestions-portal__header{margin:0 0 8px}.dropdown-search-input-suggestions-portal__input-search{width:100%}.dropdown-search-input-suggestions-list{list-style:none;margin:0;padding:0;max-height:250px;overflow-y:auto}.dropdown-search-input-suggestions-list__item{padding:8px;cursor:pointer;border-radius:6px;display:flex;align-items:center}.dropdown-search-input-suggestions-list__item:hover{background-color:var(--color-bg-neutral-lightest-default)}.dropdown-search-input-suggestions-list__item:last-child{border-bottom:none}.dropdown-search-input-suggestions-list__item--selected,.dropdown-search-input-suggestions-list__item--selected:hover{font-weight:600;background-color:var(--color-bg-brand_lightest-default)}.dropdown-search-input-suggestions-list__empty{padding:16px;text-align:center;color:var(--color-text-secondary-default);font-style:italic;cursor:default}.dropdown-search-input-suggestions-list__empty:hover{background-color:transparent;cursor:default}.dropdown-search-input__error-message{color:var(--color-text-error-default);font-size:12px;margin-top:4px;display:flex;align-items:center}.dropdown-search-input__error-message svg{margin:0 4px 0 0}.dropdown-search-input__error-message svg *{fill:var(--color-border-error-default)}

package/dist/assets/src/components/Ui/Radio/Radio.css

@@ -1 +1 @@
-.radio{display:flex;align-items:center}.radio:not(:last-child){margin:0 0 8px}.radio.disabled{cursor:default;opacity:40%}.radio input[type=radio]{display:none}.radio input[type=radio]:checked+.checkmark{border:5px solid var(--color-bg-brand-default)}.radio .radio-label{display:flex;align-items:center;cursor:pointer}.radio .radio-label .test{line-height:16.8px}.radio .checkmark{box-sizing:border-box;position:relative;display:block;width:20px;height:20px;border-radius:50%;border:1px solid var(--color-border-primary-default);background-color:var(--color-bg-neutral-basic-default);margin-right:8px;transition:.04s;-webkit-user-select:none;user-select:none}
+.radio{display:flex;align-items:center}.radio:not(:last-child){margin:0 0 8px}.radio.disabled{cursor:default;opacity:40%}.radio input[type=radio]{display:none}.radio input[type=radio]:checked+.checkmark{border:5px solid var(--color-bg-brand-default)}.radio .radio-label{display:flex;align-items:center;cursor:pointer;position:relative}.radio .radio-label .test{line-height:16.8px}.radio .checkmark{box-sizing:border-box;position:relative;display:block;width:20px;height:20px;border-radius:50%;border:1px solid var(--color-border-primary-default);background-color:var(--color-bg-neutral-basic-default);margin-right:8px;transition:.04s;-webkit-user-select:none;user-select:none}

package/dist/assets/src/components/Ui/Switch/Switch.css

@@ -1 +1 @@
-.switch-container:not(:last-child){margin:0 0 12px}.switch-container label{display:flex;align-items:center;justify-content:space-between}.switch input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.switch{display:inline-flex;align-items:center;line-height:16.8px;cursor:pointer;-webkit-user-select:none;user-select:none}.switch.disabled{opacity:50%;cursor:default}.switch input[type=checkbox]+.slider{display:flex;align-items:center;width:43px;height:24px;border:1px solid var(--color-bg-brand-default);border-radius:12px;transition:all .2s;margin:0 0 0 8px}.switch input[type=checkbox]+.slider:after{content:"";display:block;width:18px;height:18px;border-radius:50%;background-color:var(--color-bg-brand-default);margin:0 2px;transition:all .2s}.switch input[type=checkbox]:checked+.slider{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.switch input[type=checkbox]:checked+.slider:after{background-color:var(--light-color-static);margin:0 0 0 20px}
+.switch-container{position:relative}.switch-container:not(:last-child){margin:0 0 12px}.switch-container.has-frame{display:flex;align-items:center;box-shadow:0 0 0 1px var(--color-border-primary-default);border-radius:8px;height:44px;justify-content:space-between;padding:0 8px}.switch-container label{display:flex;align-items:center;justify-content:space-between;flex-grow:1}.switch input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.switch{display:inline-flex;align-items:center;line-height:16.8px;cursor:pointer;-webkit-user-select:none;user-select:none}.switch.disabled{opacity:50%;cursor:default}.switch input[type=checkbox]+.slider{display:flex;align-items:center;width:43px;height:24px;border:1px solid var(--color-bg-brand-default);border-radius:12px;transition:all .2s;margin:0 0 0 8px}.switch input[type=checkbox]+.slider:after{content:"";display:block;width:18px;height:18px;border-radius:50%;background-color:var(--color-bg-brand-default);margin:0 2px;transition:all .2s}.switch input[type=checkbox]:checked+.slider{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.switch input[type=checkbox]:checked+.slider:after{background-color:var(--light-color-static);margin:0 0 0 20px}

package/dist/assets/src/components/Ui/TextInput/TextInput.css

@@ -1 +1 @@
-.text-input{display:flex;flex-direction:column}.text-input.inline{flex-direction:row;justify-content:space-between}.text-input.inline>div{flex-grow:1}.text-input.inline label{padding:14px 0 0;margin:0 16px 0 0}.text-input label{margin:0 0 8px}.text-input .input-container{display:flex;position:relative;z-index:0}.text-input .input-container.has-icon input{padding:10px 8px 10px 36px}.text-input .input-container.has-icon .icon{position:absolute;left:8px;top:calc(50% - 10px);z-index:2}.text-input .input-container.has-icon .icon *{fill:var(--color-icon-secondary-default)}.text-input .input-container input{border:1px solid var(--color-border-primary-default);border-radius:8px;height:44px;padding:10px 8px;outline:none;background-color:var(--color-bg-neutral-basic-default);z-index:1;flex-grow:1;color:var(--color-text-primary-default)}.text-input .input-container input[disabled]{background-color:var(--color-bg-neutral-light-default);pointer-events:none}.text-input .input-container input::placeholder{color:var(--color-text-secondary-default)}.text-input .input-container input:active,.text-input .input-container input:focus{box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.text-input .input-container input.has-icon{padding:10px 8px 10px 36px}.text-input.sm.rounded input{border-radius:18px}.text-input.sm .input-container input{height:36px}.text-input.rounded input{border-radius:22px}.text-input.invalid input,.text-input.invalid input:active,.text-input.invalid input:focus{border-color:var(--color-border-error-default);color:var(--color-border-error-default)}.text-input.invalid input:focus{box-shadow:0 0 0 1px var(--color-border-error-default),inset 0 0 0 1px var(--color-border-error-default)}.text-input.invalid .icon *{fill:var(--color-border-error-default)!important}.text-input.invalid .helper-text{color:var(--color-border-error-default)}.text-input.success input,.text-input.success input:active,.text-input.success input:focus{border-color:var(--color-border-success-default);color:var(--color-text-success-default)}.text-input.success input:focus{box-shadow:0 0 0 1px var(--color-border-success-default),inset 0 0 0 1px var(--color-border-success-default)}.text-input.success .icon *{fill:var(--color-border-success-default)!important}.text-input.success .helper-text{color:var(--color-text-success-default)}.text-input.clearable input{padding-right:36px!important}.text-input.clearable .clear-value{position:absolute;right:8px;top:calc(50% - 10px);cursor:pointer;z-index:1;height:20px}.text-input.clearable .clear-value *{fill:var(--color-icon-secondary-default)}.text-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0}.text-input .loader{position:absolute;right:8px;top:calc(50% - 10px)}.text-input .loader *{fill:var(--color-icon-secondary-default)}
+.text-input{display:flex;flex-direction:column}.text-input.inline{flex-direction:row;justify-content:space-between}.text-input.inline>div{flex-grow:1}.text-input.inline label{padding:14px 0 0;margin:0 16px 0 0}.text-input label{margin:0 0 8px}.text-input .input-container{display:flex;position:relative;z-index:0}.text-input .input-container.has-icon input{padding:10px 8px 10px 36px}.text-input .input-container.has-icon .icon{position:absolute;left:8px;top:calc(50% - 10px);z-index:2}.text-input .input-container.has-icon .icon *{fill:var(--color-icon-secondary-default)}.text-input .input-container input{border:1px solid var(--color-border-primary-default);border-radius:8px;height:44px;padding:10px 8px;outline:none;background-color:var(--color-bg-neutral-basic-default);z-index:1;flex-grow:1;color:var(--color-text-primary-default)}.text-input .input-container input[disabled]{background-color:var(--color-bg-neutral-light-default);pointer-events:none}.text-input .input-container input::placeholder{color:var(--color-text-secondary-default)}.text-input .input-container input:active,.text-input .input-container input:focus{box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.text-input .input-container input.has-icon{padding:10px 8px 10px 36px}.text-input.sm.rounded input{border-radius:18px}.text-input.sm .input-container input{height:36px}.text-input.rounded input{border-radius:22px}.text-input.invalid input,.text-input.invalid input:active,.text-input.invalid input:focus{border-color:var(--color-border-error-default);color:var(--color-border-error-default)}.text-input.invalid input:focus{box-shadow:0 0 0 1px var(--color-border-error-default),inset 0 0 0 1px var(--color-border-error-default)}.text-input.invalid .icon *{fill:var(--color-border-error-default)!important}.text-input.invalid .helper-text{display:flex;align-items:center;color:var(--color-border-error-default)}.text-input.invalid .helper-text svg{margin:0 4px 0 0}.text-input.invalid .helper-text svg *{fill:var(--color-border-error-default)}.text-input.success input,.text-input.success input:active,.text-input.success input:focus{border-color:var(--color-border-success-default);color:var(--color-text-success-default)}.text-input.success input:focus{box-shadow:0 0 0 1px var(--color-border-success-default),inset 0 0 0 1px var(--color-border-success-default)}.text-input.success .icon *{fill:var(--color-border-success-default)!important}.text-input.success .helper-text{color:var(--color-text-success-default)}.text-input.clearable input{padding-right:36px!important}.text-input.clearable .clear-value{position:absolute;right:8px;top:calc(50% - 10px);cursor:pointer;z-index:1;height:20px}.text-input.clearable .clear-value *{fill:var(--color-icon-secondary-default)}.text-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0}.text-input .loader{position:absolute;right:8px;top:calc(50% - 10px)}.text-input .loader *{fill:var(--color-icon-secondary-default)}

package/dist/assets/src/components/Ui/TextareaInput/TextareaInput.css

@@ -1 +1 @@
-.textarea-input{display:flex;flex-direction:column;resize:none}.textarea-input.inline{flex-direction:row;justify-content:space-between}.textarea-input.inline>div{flex-grow:1}.textarea-input.inline label{padding:12px 0 0;margin:0 16px 0 0}.textarea-input label{margin:0 0 8px}.textarea-input .char-limit{text-align:right;margin-top:8px;font-size:12px;font-weight:400;color:var(--color-text-secondary-default)}.textarea-input .textarea-wrapper{position:relative}.textarea-input textarea{border:1px solid var(--color-border-primary-default);border-radius:8px;padding:10.5px 8px;color:var(--color-text-primary-default);max-width:100%;min-width:100%;min-height:64px;resize:both;background-color:var(--color-bg-neutral-basic-default);font-size:14px;font-weight:400}.textarea-input textarea[disabled]{background-color:var(--color-bg-neutral-light-default);pointer-events:none}.textarea-input textarea::placeholder{color:var(--color-text-secondary-default)}.textarea-input textarea:active,.textarea-input textarea:focus{outline:none;box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.textarea-input textarea.no-resize{resize:none}.textarea-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0}.textarea-input.invalid textarea{border-color:var(--color-border-error-default);color:var(--color-border-error-default)}.textarea-input.invalid textarea:focus,.textarea-input.invalid textarea:active{box-shadow:0 0 0 1px var(--color-border-error-default),inset 0 0 0 1px var(--color-border-error-default)}.textarea-input.invalid svg *{fill:var(--color-border-error-default)}.textarea-input.invalid .helper-text{color:var(--color-border-error-default)}.textarea-input.success textarea{border-color:var(--color-border-success-default);color:var(--color-border-success-default)}.textarea-input.success textarea:focus,.textarea-input.success textarea:active{box-shadow:0 0 0 1px var(--color-border-success-default),inset 0 0 0 1px var(--color-border-success-default)}.textarea-input.success svg *{fill:var(--color-border-success-default)}.textarea-input.success .helper-text{color:var(--color-border-success-default)}.textarea-input.clearable textarea{padding-right:36px!important}.textarea-input.clearable .clear-value{position:absolute;right:8px;top:8px;cursor:pointer;z-index:1;height:20px}.textarea-input.clearable .clear-value *{fill:var(--color-icon-secondary-default)}
+.textarea-input{display:flex;flex-direction:column;resize:none}.textarea-input.inline{flex-direction:row;justify-content:space-between}.textarea-input.inline>div{flex-grow:1}.textarea-input.inline label{padding:12px 0 0;margin:0 16px 0 0}.textarea-input label{margin:0 0 8px}.textarea-input .char-limit{text-align:right;margin-top:8px;font-size:12px;font-weight:400;color:var(--color-text-secondary-default)}.textarea-input .textarea-wrapper{position:relative}.textarea-input textarea{border:1px solid var(--color-border-primary-default);border-radius:8px;padding:10.5px 8px;color:var(--color-text-primary-default);max-width:100%;min-width:100%;min-height:64px;resize:both;background-color:var(--color-bg-neutral-basic-default);font-size:14px;font-weight:400}.textarea-input textarea[disabled]{background-color:var(--color-bg-neutral-light-default);pointer-events:none}.textarea-input textarea::placeholder{color:var(--color-text-secondary-default)}.textarea-input textarea:active,.textarea-input textarea:focus{outline:none;box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.textarea-input textarea.no-resize{resize:none}.textarea-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0}.textarea-input.invalid textarea{border-color:var(--color-border-error-default);color:var(--color-border-error-default)}.textarea-input.invalid textarea:focus,.textarea-input.invalid textarea:active{box-shadow:0 0 0 1px var(--color-border-error-default),inset 0 0 0 1px var(--color-border-error-default)}.textarea-input.invalid svg *{fill:var(--color-border-error-default)}.textarea-input.invalid .helper-text{display:flex;align-items:center;color:var(--color-border-error-default)}.textarea-input.invalid .helper-text svg{margin:0 4px 0 0}.textarea-input.invalid .helper-text svg *{fill:var(--color-border-error-default)}.textarea-input.success textarea{border-color:var(--color-border-success-default);color:var(--color-border-success-default)}.textarea-input.success textarea:focus,.textarea-input.success textarea:active{box-shadow:0 0 0 1px var(--color-border-success-default),inset 0 0 0 1px var(--color-border-success-default)}.textarea-input.success svg *{fill:var(--color-border-success-default)}.textarea-input.success .helper-text{color:var(--color-border-success-default)}.textarea-input.clearable textarea{padding-right:36px!important}.textarea-input.clearable .clear-value{position:absolute;right:8px;top:8px;cursor:pointer;z-index:1;height:20px}.textarea-input.clearable .clear-value *{fill:var(--color-icon-secondary-default)}

package/dist/components/Ui/Accordeon/Accordeon.stories.js

@@ -1,72 +1,431 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { Accordeon as r } from "./Accordeon.js";
-const s = {
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Accordeon as i } from "./Accordeon.js";
+const c = {
   title: "UIKit/Accordeon",
-  // Название группы историй
-  component: r,
-  // Компонент, для которого создаются истории
-  tags: ["autodocs"],
-  // Автоматическая генерация документации
-  argTypes: {
-    title: {
-      control: "text",
-      // Позволяет редактировать заголовок в интерфейсе Storybook
-      description: "Заголовок аккордеона"
-    },
-    content: {
-      control: "text",
-      // Позволяет редактировать контент в интерфейсе Storybook
-      description: "Контент аккордеона"
-    }
+  component: i,
+  parameters: {
+    layout: "padded"
   }
-}, c = {
-  args: {
-    title: "Заголовок аккордеона!",
-    content: "Это контент аккордеона. Он может быть текстом, компонентом или чем угодно."
+}, h = {
+  render: () => /* @__PURE__ */ d("div", { className: "documentation", children: [
+    /* @__PURE__ */ e("h2", { children: "Документация Accordeon" }),
+    /* @__PURE__ */ e("p", { children: "Компонент аккордеона для компактного отображения контента с плавной анимацией раскрытия." }),
+    /* @__PURE__ */ d("p", { children: [
+      /* @__PURE__ */ e("b", { children: "Dev.Note:" }),
+      "Данный компонент не отрисован в дизайн системе и требовался для частной задачи в проекте Meta, всвязи с чем его вёрстка находится в состоянии прототипа.",
+      /* @__PURE__ */ e("br", {}),
+      "Компонент можно удалить или довести до ума и использовать по назначению. Функционально он готов."
+    ] }),
+    /* @__PURE__ */ d("table", { children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
+        /* @__PURE__ */ e("th", { children: "Пропс" }),
+        /* @__PURE__ */ e("th", { children: "Тип" }),
+        /* @__PURE__ */ e("th", { children: "Обязательный" }),
+        /* @__PURE__ */ e("th", { children: "По умолчанию" }),
+        /* @__PURE__ */ e("th", { children: "Описание" })
+      ] }) }),
+      /* @__PURE__ */ d("tbody", { children: [
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: "title" }) }),
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: "string" }) }),
+          /* @__PURE__ */ e("td", { children: "✗" }),
+          /* @__PURE__ */ e("td", { children: "-" }),
+          /* @__PURE__ */ e("td", { children: "Основной заголовок аккордеона" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: "content" }) }),
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: "ReactNode" }) }),
+          /* @__PURE__ */ e("td", { children: "✓" }),
+          /* @__PURE__ */ e("td", { children: "-" }),
+          /* @__PURE__ */ e("td", { children: "Содержимое аккордеона (текст, компоненты, HTML)" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: "openTitle" }) }),
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: "ReactNode" }) }),
+          /* @__PURE__ */ e("td", { children: "✗" }),
+          /* @__PURE__ */ e("td", { children: "-" }),
+          /* @__PURE__ */ e("td", { children: "Дополнительный контент при открытом состоянии" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: "closeTitle" }) }),
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: "ReactNode" }) }),
+          /* @__PURE__ */ e("td", { children: "✗" }),
+          /* @__PURE__ */ e("td", { children: "-" }),
+          /* @__PURE__ */ e("td", { children: "Дополнительный контент при закрытом состоянии" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("h2", { children: "Примеры использования" }),
+    /* @__PURE__ */ d("table", { children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
+        /* @__PURE__ */ e("th", { children: "Назначение" }),
+        /* @__PURE__ */ e("th", { children: "Код" })
+      ] }) }),
+      /* @__PURE__ */ d("tbody", { children: [
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: "Базовый аккордеон" }),
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: `<Accordeon
+  title="Часто задаваемые вопросы"
+  content="Ответ на вопрос..."
+/>` }) })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: "С динамическими заголовками" }),
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: `<Accordeon
+  title="Настройки"
+  openTitle="▲ Скрыть"
+  closeTitle="▼ Показать"
+  content={<SettingsForm />}
+/>` }) })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: "С HTML контентом" }),
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: `<Accordeon
+  title="Подробности"
+  content={
+    <div>
+      <h3>Заголовок</h3>
+      <p>Текст с <strong>форматированием</strong></p>
+    </div>
   }
-}, d = {
+/>` }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("h2", { children: "Поведение компонента" }),
+    /* @__PURE__ */ d("table", { children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
+        /* @__PURE__ */ e("th", { children: "Действие" }),
+        /* @__PURE__ */ e("th", { children: "Реакция" })
+      ] }) }),
+      /* @__PURE__ */ d("tbody", { children: [
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("strong", { children: "Клик по заголовку" }) }),
+          /* @__PURE__ */ e("td", { children: "Переключение состояния (открыто/закрыто)" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("strong", { children: "Открытие" }) }),
+          /* @__PURE__ */ e("td", { children: "Плавное раскрытие с анимацией max-height" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("strong", { children: "Закрытие" }) }),
+          /* @__PURE__ */ e("td", { children: "Плавное схлопывание с анимацией" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("strong", { children: "Динамический контент" }) }),
+          /* @__PURE__ */ e("td", { children: "Автоматический расчет высоты контента" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("h2", { children: "Особенности компонента" }),
+    /* @__PURE__ */ d("table", { children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
+        /* @__PURE__ */ e("th", { children: "Функциональность" }),
+        /* @__PURE__ */ e("th", { children: "Описание" })
+      ] }) }),
+      /* @__PURE__ */ d("tbody", { children: [
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("strong", { children: "Плавная анимация" }) }),
+          /* @__PURE__ */ e("td", { children: "CSS transition для smooth раскрытия/закрытия" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("strong", { children: "Авторасчет высоты" }) }),
+          /* @__PURE__ */ e("td", { children: "Автоматическое определение высоты контента" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("strong", { children: "Гибкий контент" }) }),
+          /* @__PURE__ */ e("td", { children: "Поддержка любого React-контента" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("strong", { children: "Динамические заголовки" }) }),
+          /* @__PURE__ */ e("td", { children: "Разные состояния для открытого/закрытого вида" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("strong", { children: "Доступность" }) }),
+          /* @__PURE__ */ e("td", { children: "Клик по всей области заголовка" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("h2", { children: "Структура CSS-классов" }),
+    /* @__PURE__ */ d("table", { children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
+        /* @__PURE__ */ e("th", { children: "CSS-класс" }),
+        /* @__PURE__ */ e("th", { children: "Назначение" })
+      ] }) }),
+      /* @__PURE__ */ d("tbody", { children: [
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: ".accordeon" }) }),
+          /* @__PURE__ */ e("td", { children: "Основной контейнер компонента" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: ".content-wrapper" }) }),
+          /* @__PURE__ */ e("td", { children: "Обертка для анимированного контента" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: ".content" }) }),
+          /* @__PURE__ */ e("td", { children: "Непосредственно содержимое аккордеона" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { children: ".title" }) }),
+          /* @__PURE__ */ e("td", { children: "Кликабельный заголовок аккордеона" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("h2", { children: "Сценарии использования" }),
+    /* @__PURE__ */ d("table", { children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
+        /* @__PURE__ */ e("th", { children: "Контекст" }),
+        /* @__PURE__ */ e("th", { children: "Пример" }),
+        /* @__PURE__ */ e("th", { children: "Рекомендации" })
+      ] }) }),
+      /* @__PURE__ */ d("tbody", { children: [
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: "FAQ разделы" }),
+          /* @__PURE__ */ e("td", { children: "Вопросы и ответы" }),
+          /* @__PURE__ */ e("td", { children: "Используйте clearTitle/closeTitle для индикации состояния" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: "Настройки" }),
+          /* @__PURE__ */ e("td", { children: "Расширенные параметры" }),
+          /* @__PURE__ */ e("td", { children: "Группируйте связанные настройки" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: "Описания" }),
+          /* @__PURE__ */ e("td", { children: "Дополнительная информация" }),
+          /* @__PURE__ */ e("td", { children: "Идеально для скрытия второстепенного контента" })
+        ] }),
+        /* @__PURE__ */ d("tr", { children: [
+          /* @__PURE__ */ e("td", { children: "Мобильные интерфейсы" }),
+          /* @__PURE__ */ e("td", { children: "Компактные списки" }),
+          /* @__PURE__ */ e("td", { children: "Экономит пространство на маленьких экранах" })
+        ] })
+      ] })
+    ] })
+  ] })
+}, o = {
   args: {
-    ...c.args
-    // Используем аргументы из Default
+    title: "Заголовок аккордеона",
+    content: "Это содержимое аккордеона. Нажмите на заголовок чтобы раскрыть или скрыть контент."
   },
-  decorators: [
-    (n) => /* @__PURE__ */ t("div", { style: { width: "300px" }, children: /* @__PURE__ */ t(n, {}) })
-  ],
-  parameters: {
-    // Открываем аккордеон по умолчанию
-    docs: {
-      source: {
-        code: "<Accordeon title='Заголовок' content='Контент аккордеона' isOpen={true} />"
-      }
+  render: (n) => /* @__PURE__ */ e("div", { style: { padding: "20px", maxWidth: "500px" }, children: /* @__PURE__ */ e(i, { ...n }) })
+}, p = {
+  render: () => /* @__PURE__ */ e("div", { style: { padding: "20px", maxWidth: "500px" }, children: /* @__PURE__ */ e(
+    i,
+    {
+      title: "Часто задаваемые вопросы",
+      content: "Здесь находится ответ на часто задаваемый вопрос. Аккордеон позволяет компактно организовать информацию и раскрывать её только при необходимости."
     }
-  }
+  ) })
 }, a = {
-  args: {
-    title: "Аккордеон с HTML",
-    content: /* @__PURE__ */ e("div", { children: [
-      /* @__PURE__ */ t("h3", { children: "Заголовок внутри контента" }),
-      /* @__PURE__ */ t("p", { children: "Этот аккордеон содержит HTML-контент." }),
-      /* @__PURE__ */ e("ul", { children: [
-        /* @__PURE__ */ t("li", { children: "Пункт 1" }),
-        /* @__PURE__ */ t("li", { children: "Пункт 2" }),
-        /* @__PURE__ */ t("li", { children: "Пункт 3" })
+  render: () => /* @__PURE__ */ e("div", { style: { padding: "20px", maxWidth: "500px" }, children: /* @__PURE__ */ e(
+    i,
+    {
+      title: "Настройки профиля",
+      openTitle: " ▲ Скрыть настройки",
+      closeTitle: " ▼ Показать настройки",
+      content: /* @__PURE__ */ d("div", { style: { padding: "16px", backgroundColor: "#f8f9fa", borderRadius: "4px" }, children: [
+        /* @__PURE__ */ e("h4", { style: { margin: "0 0 12px 0" }, children: "Настройки аккаунта" }),
+        /* @__PURE__ */ d("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ d("label", { children: [
+            /* @__PURE__ */ e("input", { type: "checkbox" }),
+            " Email уведомления"
+          ] }),
+          /* @__PURE__ */ d("label", { children: [
+            /* @__PURE__ */ e("input", { type: "checkbox" }),
+            " Push-уведомления"
+          ] }),
+          /* @__PURE__ */ d("label", { children: [
+            /* @__PURE__ */ e("input", { type: "checkbox" }),
+            " СМС оповещения"
+          ] })
+        ] })
+      ] })
+    }
+  ) })
+}, s = {
+  render: () => /* @__PURE__ */ e("div", { style: { padding: "20px", maxWidth: "500px" }, children: /* @__PURE__ */ e(
+    i,
+    {
+      title: "Подробная инструкция",
+      content: /* @__PURE__ */ d("div", { children: [
+        /* @__PURE__ */ e("h3", { style: { margin: "0 0 12px 0" }, children: "Как пользоваться системой" }),
+        /* @__PURE__ */ e("p", { style: { margin: "0 0 8px 0" }, children: "Это пошаговая инструкция по использованию нашего сервиса:" }),
+        /* @__PURE__ */ d("ol", { style: { margin: "0 0 12px 0", paddingLeft: "20px" }, children: [
+          /* @__PURE__ */ e("li", { children: "Зарегистрируйтесь в системе" }),
+          /* @__PURE__ */ e("li", { children: "Подтвердите ваш email адрес" }),
+          /* @__PURE__ */ e("li", { children: "Заполните профиль пользователя" }),
+          /* @__PURE__ */ e("li", { children: "Начните использовать все возможности" })
+        ] }),
+        /* @__PURE__ */ e("p", { style: { margin: 0, fontSize: "14px", color: "#666" }, children: "Если возникнут вопросы, обратитесь в поддержку." })
       ] })
+    }
+  ) })
+}, x = {
+  render: () => /* @__PURE__ */ e("div", { style: { padding: "20px", maxWidth: "500px" }, children: /* @__PURE__ */ e(
+    i,
+    {
+      title: "Политика конфиденциальности",
+      content: /* @__PURE__ */ d("div", { style: { maxHeight: "200px", overflow: "auto" }, children: [
+        /* @__PURE__ */ e("h4", { style: { margin: "0 0 12px 0" }, children: "Наша политика конфиденциальности" }),
+        Array.from({ length: 15 }, (n, t) => /* @__PURE__ */ d("p", { style: { margin: "0 0 8px 0", fontSize: "14px" }, children: [
+          "Это пункт номер ",
+          t + 1,
+          " в политике конфиденциальности. Здесь описываются условия использования ваших персональных данных и наши обязательства по их защите."
+        ] }, t))
+      ] })
+    }
+  ) })
+}, g = {
+  render: () => /* @__PURE__ */ d("div", { style: { padding: "20px", maxWidth: "600px" }, children: [
+    /* @__PURE__ */ e("h3", { style: { margin: "0 0 20px 0" }, children: "Часто задаваемые вопросы" }),
+    /* @__PURE__ */ d("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+      /* @__PURE__ */ e(
+        i,
+        {
+          title: "Как создать аккаунт?",
+          content: "Для создания аккаунта перейдите на страницу регистрации, заполните обязательные поля и подтвердите ваш email адрес."
+        }
+      ),
+      /* @__PURE__ */ e(
+        i,
+        {
+          title: "Как восстановить пароль?",
+          content: "На странице входа нажмите 'Забыли пароль?', введите ваш email и следуйте инструкциям в письме."
+        }
+      ),
+      /* @__PURE__ */ e(
+        i,
+        {
+          title: "Какие методы оплаты принимаются?",
+          content: "Мы принимаем банковские карты Visa, MasterCard, Мир, а также электронные кошельки и переводы через СБП."
+        }
+      ),
+      /* @__PURE__ */ e(
+        i,
+        {
+          title: "Есть ли мобильное приложение?",
+          content: "Да, наше мобильное приложение доступно в App Store и Google Play. Скачайте его для удобного доступа с мобильных устройств."
+        }
+      )
     ] })
-  }
-}, h = {
-  args: {
-    title: "Аккордеон с длинным контентом",
-    content: Array.from({ length: 10 }, (n, o) => /* @__PURE__ */ e("p", { children: [
-      "Это строка номер ",
-      o + 1,
-      " в длинном контенте."
-    ] }, o))
-  }
+  ] })
+}, y = {
+  render: () => /* @__PURE__ */ e("div", { style: { padding: "20px", maxWidth: "500px" }, children: /* @__PURE__ */ d("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        title: "Форма настроек",
+        content: /* @__PURE__ */ d("div", { style: { display: "flex", flexDirection: "column", gap: "12px", padding: "12px" }, children: [
+          /* @__PURE__ */ d("div", { children: [
+            /* @__PURE__ */ e("label", { style: { display: "block", marginBottom: "4px", fontWeight: "500" }, children: "Имя пользователя:" }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "text",
+                style: {
+                  width: "100%",
+                  padding: "8px",
+                  border: "1px solid #ddd",
+                  borderRadius: "4px"
+                },
+                placeholder: "Введите имя"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ d("div", { children: [
+            /* @__PURE__ */ e("label", { style: { display: "block", marginBottom: "4px", fontWeight: "500" }, children: "Email:" }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "email",
+                style: {
+                  width: "100%",
+                  padding: "8px",
+                  border: "1px solid #ddd",
+                  borderRadius: "4px"
+                },
+                placeholder: "email@example.com"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              style: {
+                padding: "8px 16px",
+                backgroundColor: "#007bff",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer"
+              },
+              children: "Сохранить настройки"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      i,
+      {
+        title: "Список функций",
+        content: /* @__PURE__ */ d("ul", { style: { margin: 0, paddingLeft: "20px" }, children: [
+          /* @__PURE__ */ e("li", { children: "Автоматическое сохранение" }),
+          /* @__PURE__ */ e("li", { children: "Синхронизация между устройствами" }),
+          /* @__PURE__ */ e("li", { children: "Расширенные настройки приватности" }),
+          /* @__PURE__ */ e("li", { children: "Поддержка нескольких языков" }),
+          /* @__PURE__ */ e("li", { children: "Гибкая система уведомлений" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      i,
+      {
+        title: "Статистика использования",
+        content: /* @__PURE__ */ d("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }, children: [
+          /* @__PURE__ */ d(
+            "div",
+            {
+              style: {
+                textAlign: "center",
+                padding: "8px",
+                backgroundColor: "#e9ecef",
+                borderRadius: "4px"
+              },
+              children: [
+                /* @__PURE__ */ e("div", { style: { fontSize: "24px", fontWeight: "bold" }, children: "1,234" }),
+                /* @__PURE__ */ e("div", { style: { fontSize: "12px", color: "#666" }, children: "активных пользователей" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              style: {
+                textAlign: "center",
+                padding: "8px",
+                backgroundColor: "#e9ecef",
+                borderRadius: "4px"
+              },
+              children: [
+                /* @__PURE__ */ e("div", { style: { fontSize: "24px", fontWeight: "bold" }, children: "89%" }),
+                /* @__PURE__ */ e("div", { style: { fontSize: "12px", color: "#666" }, children: "удовлетворенности" })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] }) })
 };
 export {
-  c as Default,
-  d as Opened,
-  a as WithHTMLContent,
-  h as WithLongContent,
-  s as default
+  g as AccordionGroup,
+  p as BasicAccordeon,
+  h as Documentation,
+  o as Playground,
+  y as WithDifferentContentTypes,
+  a as WithDynamicTitles,
+  s as WithHTMLContent,
+  x as WithLongContent,
+  c as default
 };