@nmorph/nmorph-ui-kit 0.0.1

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.nmorph-text-input{--height: 38px;display:flex;align-items:flex-start;flex-direction:column}.nmorph-text-input .nmorph-text-input__main-content{display:inline-flex;align-items:center;width:100%;position:relative}.nmorph-text-input .nmorph-text-input__input-side{display:flex;align-items:center;justify-content:flex-end;width:100%;position:relative}.nmorph-text-input label{color:var(--text-01);font-weight:600;font-size:14px;line-height:22px}.nmorph-text-input input{width:100%;border:none;border-radius:var(--default-border-radius);text-indent:8px;height:var(--height);transition:ease-in-out var(--transition-01) background;background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color);color:var(--text-01);font-weight:400;font-size:14px;line-height:22px}.nmorph-text-input input:focus{outline:none;transition:ease-in-out var(--transition-01) background;color:var(--text-00);background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color);background:var(--accent-color-00)}.nmorph-text-input input:focus::placeholder{color:var(--text-00)}.nmorph-text-input input::placeholder{color:var(--text-01)}.nmorph-text-input input:disabled{cursor:not-allowed;opacity:.6}.nmorph-text-input .nmorph-text-input__password-btn{position:absolute;height:100%;right:0}.nmorph-text-input .nmorph-text-input__password-btn .nmorph-button__content{padding:8px}.nmorph-text-input--fill{width:100%}.nmorph-text-input--labeled .nmorph-text-input__main-content{margin-top:4px}.nmorph-text-input--focused .nmorph-text-input__password-btn .nmorph-icon{--color: var(--text-00)}.nmorph-text-input--focused .nmorph-text-input__password-btn .nmorph-button:not(:disabled):not([loading=true]):hover .nmorph-icon{--color: var(--text-00)}.nmorph-text-input--valid input:focus{background:var(--success-color-00)}.nmorph-text-input--invalid input:focus{background:var(--error-color-00)}.nmorph-text-input--thin{--height: 30px}.nmorph-text-input--thin label{color:var(--text-01);font-weight:600;font-size:12px;line-height:16px}.nmorph-text-input--thin .nmorph-text-input__password-btn{margin-top:0}.nmorph-text-input--thin .nmorph-text-input__password-btn .nmorph-button{--height: 30px}.nmorph-text-input--password input{padding-right:30px}.nmorph-checkbox{--size: 14px;cursor:pointer;color:var(--text-01);font-weight:400;font-size:14px;line-height:22px}.nmorph-checkbox .nmorph-checkbox__content{display:flex;align-items:center;justify-content:center;position:relative}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-checkbox .nmorph-checkbox__fake{border-radius:var(--default-border-radius);width:100%;height:100%;position:absolute;top:0;left:0;background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color)}.nmorph-checkbox .nmorph-checkbox__fake-checked{background:var(--accent-color-01);width:50%;height:50%;border-radius:var(--border-radius-20);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:4px}.nmorph-checkbox--button-style{--size: 38px}.nmorph-checkbox--button-style .nmorph-checkbox__fake{padding:8px;border-radius:var(--default-border-radius);position:relative;height:var(--size);display:flex;align-items:center;background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-checkbox--checked .nmorph-checkbox__fake{background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color)}.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}.nmorph-validation-icon .nmorph-validation-icon__content{margin-left:8px}.nmorph-validation-icon--valid .nmorph-validation-icon__content{--color: var(--success-color-00)}.nmorph-validation-icon--invalid .nmorph-validation-icon__content{--color: var(--error-color-00)}.nmorph-checkbox-group{display:inline-block}.nmorph-checkbox-group .nmorph-checkbox-group__wrapper{display:flex;align-items:center}.nmorph-checkbox-group .nmorph-checkbox-group__content{display:flex;flex-direction:row;width:100%}.nmorph-checkbox-group .nmorph-checkbox{margin-right:8px}.nmorph-checkbox-group .nmorph-error-box__error{margin-left:0}.nmorph-checkbox-group--column .nmorph-checkbox-group__content{flex-direction:column}.nmorph-checkbox-group--column .nmorph-checkbox{margin-right:0;margin-bottom:8px}.nmorph-checkbox-group--fill{width:100%}.nmorph-checkbox-group--labeled .nmorph-checkbox-group__content,.nmorph-checkbox-group--labeled .nmorph-validation-icon{margin-top:4px}.nmorph-checkbox-group--labeled legend{color:var(--text-01);font-weight:600;font-size:14px;line-height:22px}.nmorph-radio-group{display:inline-block}.nmorph-radio-group .nmorph-radio-group__wrapper{display:flex;align-items:center}.nmorph-radio-group .nmorph-radio-group__content{display:flex;flex-direction:row;width:100%}.nmorph-radio-group .nmorph-radio{margin-right:8px}.nmorph-radio-group .nmorph-error-box__error{margin-left:0}.nmorph-radio-group--column .nmorph-radio-group__content{flex-direction:column}.nmorph-radio-group--column .nmorph-radio{margin-right:0;margin-bottom:8px}.nmorph-radio-group--fill{width:100%}.nmorph-radio-group--labeled .nmorph-radio-group__content,.nmorph-radio-group--labeled .nmorph-validation-icon{margin-top:4px}.nmorph-radio-group--labeled legend{color:var(--text-01);font-weight:600;font-size:14px;line-height:22px}.nmorph-number-input{--height: 38px;display:inline-flex;flex-direction:column;align-items:flex-start}.nmorph-number-input label{color:var(--text-01);font-weight:600;font-size:14px;line-height:22px}.nmorph-number-input .nmorph-number-input__content{display:flex;align-items:center;width:100%}.nmorph-number-input .nmorph-number-input__input-content{height:var(--height);display:flex;width:100%;height:100%;border-radius:var(--default-border-radius);background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-number-input .nmorph-number-input__decrease .nmorph-button__content{border-top-right-radius:0;border-bottom-right-radius:0}.nmorph-number-input .nmorph-number-input__increase .nmorph-button__content{border-top-left-radius:0;border-bottom-left-radius:0}.nmorph-number-input input{width:auto;border:none;transition:ease-in-out var(--transition-01) background;border-top:1px solid var(--main-bg);border-bottom:1px solid var(--main-bg);text-align:center;padding:0 8px;width:100%;background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color);color:var(--text-01);font-weight:400;font-size:14px;line-height:22px}.nmorph-number-input input:focus{outline:none;transition:ease-in-out var(--transition-01) background;color:var(--text-00);background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color);background:var(--accent-color-00)}.nmorph-number-input .nmorph-number-input__action-btns{display:flex;flex-direction:column}.nmorph-number-input .nmorph-error-box__error{margin-left:0}.nmorph-number-input--fill{width:100%}.nmorph-number-input--valid input:focus{background:var(--success-color-00)}.nmorph-number-input--invalid input:focus{background:var(--error-color-00)}.nmorph-number-input--labeled .nmorph-number-input__input-content,.nmorph-number-input--labeled .nmorph-validation-icon{margin-top:4px}.nmorph-number-input--disabled{cursor:not-allowed;opacity:.6}.nmorph-number-input--disabled .nmorph-number-input__input-content{pointer-events:none}.nmorph-number-input--thin{--height: 30px}.nmorph-number-input--thin input{color:var(--text-01);font-weight:400;font-size:12px;line-height:16px}.nmorph-number-input--action-btn-position-right input{border-top-left-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius)}.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease,.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase{display:flex;justify-content:center;width:100%}.nmorph-number-input--action-btn-position-right .nmorph-number-input__decrease .nmorph-button__content{border-radius:0;border-top-right-radius:var(--default-border-radius)}.nmorph-number-input--action-btn-position-right .nmorph-number-input__increase .nmorph-button__content{border-radius:0;border-bottom-right-radius:var(--default-border-radius)}.nmorph-number-input--action-btn-position-right .nmorph-button{width:100%;--height: var(--3f6f7c34)}.nmorph-slider{--value-fixed-container-width: 18px;cursor:pointer}.nmorph-slider .nmorph-slider__content{display:flex;align-items:center}.nmorph-slider .nmorph-slider__input-wrapper{width:100%;height:var(--value-fixed-container-width);border-radius:var(--default-border-radius);display:flex;align-items:center;background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color)}.nmorph-slider .nmorph-slider__input-container{width:100%;height:24px;position:relative;display:flex;align-items:center}.nmorph-slider .nmorph-slider__thumb{position:absolute;border-radius:var(--default-border-radius);width:var(--21bb1e52);height:20px;border:0;background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-slider .nmorph-slider__value{margin-left:16px;display:flex;justify-content:center;width:var(--value-fixed-container-width);color:var(--text-01);font-weight:600;font-size:14px;line-height:22px}.nmorph-slider--fill,.nmorph-slider--fill .nmorph-slider__content{width:100%}.nmorph-slider--disabled{cursor:not-allowed;opacity:.6}.nmorph-slider--disabled .nmorph-slider__input-content{pointer-events:none}.nmorph-switch{--height: 20px;--offset: 2px;--thumb-height: 16px;border-radius:var(--border-radius-circular);cursor:pointer;width:40px;height:var(--height);overflow:hidden;color:var(--text-01);font-weight:600;font-size:14px;line-height:22px}.nmorph-switch .nmorph-switch__content{border-radius:var(--border-radius-circular);height:100%;position:relative;transition:background ease-in-out var(--transition-02),box-shadow ease-in-out var(--transition-02);background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0;visibility:hidden}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);width:var(--thumb-height);height:var(--thumb-height);border-radius:var(--border-radius-circular);transition:left ease-in-out var(--transition-02),box-shadow ease-in-out var(--transition-02);display:flex;align-items:center;justify-content:center;background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch--on .nmorph-switch__content{background:var(--accent-color-01);box-shadow:none}.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - 18px);box-shadow:none}.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-select{--height: 30px;height:var(--height);cursor:pointer;color:var(--text-01);font-weight:400;font-size:14px;line-height:22px}.nmorph-select .nmorph-select__content{height:100%;position:relative;padding:0 8px;border-radius:var(--default-border-radius);background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-select .nmorph-select__selected-values-line{display:flex;align-items:center;justify-content:space-between;height:100%}.nmorph-select select{appearance:none;visibility:hidden;position:absolute;top:0;left:0}.nmorph-select .nmorph-select__options-wrapper{position:absolute;width:100%;left:0;border-radius:var(--default-border-radius);overflow:hidden;height:0;transition:ease-in-out height var(--transition-02);background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-select .nmorph-select__options-wrapper .nmorph-select__option{padding:8px}.nmorph-select .nmorph-select__options-wrapper .nmorph-select__chevron{transition:ease-in-out transform var(--transition-02)}.nmorph-select--open .nmorph-select__content{background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color)}.nmorph-select--open .nmorph-select__chevron{transform:rotate(180deg)}.nmorph-select--selected-line-outset .nmorph-select__content{background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-select--selected-line-inset .nmorph-select__content{background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color)}.nmorph-select-option{--height: 30px;--hover-bg: var(--accent-color-01);--hover-color: var(--text-00);height:var(--height);cursor:pointer;display:flex;justify-content:space-between;padding:0 8px}.nmorph-select-option:not(.nmorph-select-option--disabled):hover{background:var(--hover-bg);color:var(--hover-color)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-option--disabled .nmorph-select-option__content{pointer-events:none}.nmorph-select-option--with-label{display:flex;align-items:center}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{margin-top:8px}.nmorph-file-upload .nmorph-file-upload__file{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border-radius:var(--default-border-radius);margin-bottom:4px;background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;align-items:center}.nmorph-file-upload .nmorph-file-upload__file-name{margin-left:4px;line-height:0}.nmorph-file-upload .nmorph-file-upload__remove-file{margin-left:8px}.nmorph-icon{--color: var(--text-01);width:var(--width);height:var(--height)}.nmorph-icon .nmorph-icon__content{display:flex;align-items:center;justify-content:center}.nmorph-icon svg{width:100%;height:100%;fill:var(--color)}.nmorph-icon .nmorph-icon__as-image img{width:var(--width);height:var(--height)}.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon--large{--width: 32px;--height: 32px}.nmorph-icon--custom-width{--width: var(--0f04eb16)}.nmorph-icon--custom-height{--height: var(--906d0452)}.nmorph-button{--height: 38px;width:var(--760712b2);display:inline-block}.nmorph-button .nmorph-button__content{width:100%;height:var(--height);border:none;cursor:pointer;border-radius:var(--default-border-radius);padding:0 14px;transition:var(--transition-02) ease-in-out background,var(--transition-02) ease-in-out color,var(--transition-02) ease-in-out box-shadow;display:flex;align-items:center;justify-content:center;color:var(--text-01);font-weight:400;font-size:14px;line-height:22px;background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-button .nmorph-button__content:disabled{cursor:not-allowed;opacity:.6}.nmorph-button .nmorph-button__content[loading=true]{cursor:default}.nmorph-button .nmorph-button__content:not(:disabled):not([loading=true]):hover{background:var(--accent-color-01);color:var(--text-00);transition:var(--transition-02) ease-in-out background,var(--transition-02) ease-in-out color,var(--transition-02) ease-in-out box-shadow;box-shadow:none}.nmorph-button .nmorph-button__content:not(:disabled):not([loading=true]):hover .nmorph-icon{--color: var(--text-00)}.nmorph-button--transparent{padding:0}.nmorph-button--transparent .nmorph-button__content{box-shadow:none;background:transparent}.nmorph-button--thin{--height: 30px}.nmorph-button--thin .nmorph-button__content{color:var(--text-01);font-weight:400;font-size:12px;line-height:16px}.nmorph-button--bg-transparent-on-hover .nmorph-button__content:not(:disabled):not([loading=true]):hover{background:inherit;box-shadow:none}.nmorph-button--bg-transparent-on-hover .nmorph-button__content:not(:disabled):not([loading=true]):hover .nmorph-icon{--color: var(--text-01)}.nmorph-button--ripple .nmorph-button__content{position:relative;overflow:hidden}.nmorph-button--ripple .nmorph-button__content:after{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background-image:radial-gradient(circle,var(--main-bg) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .3s,opacity 1s}.nmorph-button--ripple .nmorph-button__content:active:after{transform:scale(0);opacity:.3;transition:0s}.nmorph-card{--padding: 12px;width:100%;padding:var(--padding);border-radius:var(--default-border-radius);display:flex;flex-direction:column}.nmorph-card .nmorph-card__header{color:var(--text-01);font-weight:700;font-size:16px;line-height:24px}.nmorph-card .nmorph-card__content{height:100%;color:var(--text-01);font-weight:400;font-size:14px;line-height:22px}.nmorph-card .nmorph-card__footer{color:var(--text-01);font-weight:400;font-size:12px;line-height:16px;height:fit-content}.nmorph-card--inset{background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color)}.nmorph-card--outset{background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color)}.nmorph-card--combined{background:var(--main-bg);box-shadow:4px 4px 10px var(--darker-color),-4px -4px 10px var(--lighter-color),inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color)}.nmorph-link{--link-color: var(--info-color-00);--hover-color: var(--info-color-01);display:inline-block}.nmorph-link a{color:var(--link-color);font-weight:400;font-size:14px;line-height:22px;text-decoration:none;display:flex;align-items:center}.nmorph-link .nmorph-link__icon{margin-left:4px;--color: var(--link-color)}.nmorph-link :hover{color:var(--hover-color)}.nmorph-link :hover .nmorph-link__icon{--color: var(--hover-color)}.nmorph-link--underline :hover{border-bottom:1px solid var(--link-color)}.nmorph-link--disabled{cursor:not-allowed;opacity:.6}.nmorph-link--disabled a{pointer-events:none}.nmorph-link--success{--link-color: var(--success-color-00);--hover-color: var(--success-color-01)}.nmorph-link--warning{--link-color: var(--warning-color-00);--hover-color: var(--warning-color-01)}.nmorph-link--error{--link-color: var(--error-color-00);--hover-color: var(--error-color-00)}.nmorph-error-box{--height: 24px;margin-top:4px;height:var(--height);overflow:hidden;color:var(--error-color-00);font-weight:400;font-size:14px;line-height:22px}.nmorph-error-box .nmorph-error-box__error{text-align:left;margin:0 0 0 12px}.nmorph-error-box--thin{--height: 14px}.nmorph-error-box--thin .nmorph-error-box__error{color:var(--error-color-00);font-weight:400;font-size:10px;line-height:12px}.nmorph-tooltip{display:inline-block;width:var(--74917574);--max-width: 120px}.nmorph-tooltip .nmorph-tooltip__content{position:relative}.nmorph-tooltip .nmorph-tooltip__info-content{max-width:var(--max-width);position:absolute;padding:8px;border-radius:var(--default-border-radius);background:var(--main-bg);box-shadow:0 0 10px var(--darker-color)}.nmorph-tooltip .nmorph-tooltip__shadow-content{color:var(--text-01);font-weight:400;font-size:14px;line-height:22px}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0 8px;border-color:var(--main-bg) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--main-bg) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px 8px;border-color:transparent transparent var(--main-bg) transparent;transform:translate(-50%)}.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--main-bg);transform:translateY(-50%)}.nmorph-tag{--height: 30px;height:var(--height);cursor:default;display:inline-flex;padding:0 8px;border-radius:var(--default-border-radius);margin-right:4px;background:var(--main-bg);box-shadow:inset 4px 4px 10px var(--darker-color),inset -4px -4px 10px var(--lighter-color)}.nmorph-tag .nmorph-tag__content{height:100%;display:flex;align-items:center}.nmorph-tag span{color:var(--text-01);font-weight:400;font-size:14px;line-height:22px}.nmorph-tag .nmorph-tag__close-icon{margin-left:4px;cursor:pointer}.nmorph-tag--thin{--height: 22px}.nmorph-tag--thin span{color:var(--text-01);font-weight:400;font-size:12px;line-height:16px}.nmorph-tag--thick{--height: 38px}.nmorph-tag--thick span{color:var(--text-01);font-weight:400;font-size:16px;line-height:24px}.nmorph-tag--transparent{box-shadow:none;background:transparent}.nmorph-overlay{opacity:0;--overlay-background-color: var(--half-transparent-background);background-color:var(--overlay-background-color);z-index:1;overflow:hidden;pointer-events:none;transition:ease-in-out var(--transition-02) opacity;width:100%;height:100%;position:absolute;top:0;left:0}.nmorph-overlay--outside-click{cursor:pointer}.nmorph-overlay--show{opacity:1;pointer-events:auto}.nmorph-image{width:100%;height:100%;--width: auto;--height: auto;width:var(--width);height:var(--height)}.nmorph-image img{width:100%;height:100%;object-fit:var(--4be2af78)}.nmorph-image .nmorph-image__loading,.nmorph-image .nmorph-image__load-failed{color:var(--text-01);font-weight:400;font-size:14px;line-height:22px}.nmorph-image-preview{--width: 100px;--height: 100px;overflow:hidden;width:var(--width);height:var(--height)}.nmorph-image-preview .nmorph-image-preview__trigger{cursor:pointer;position:relative;width:100%;height:100%}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview .nmorph-image-preview__content{transition:var(--transition-04) opacity ease-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-image-preview .nmorph-image-preview__actions{position:absolute;transform:translate(-50%);bottom:-50px;left:50%;z-index:2;transition:ease-in-out bottom var(--transition-03);display:flex;height:0}.nmorph-image-preview .nmorph-image-preview__action-element{margin-right:8px}.nmorph-image-preview .nmorph-button__content{box-shadow:none}.nmorph-image-preview .nmorph-image-preview__left,.nmorph-image-preview .nmorph-image-preview__right{z-index:2}.nmorph-image-preview .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview--opened .nmorph-image-preview__left{left:20px}.nmorph-image-preview--opened .nmorph-image-preview__right{right:20px}.__histoire-render-story:not(.__histoire-render-custom-controls){overflow:visible;padding:12px}.htw-h-full{background:var(--main-bg)}:root{--main-bg: #ebf3fa;--darker-color: #c3cad0;--lighter-color: #ffffff;--info-color-00: #5b8ce6;--info-color-01: #2a60c2;--accent-color-00: #687b9e72;--accent-color-01: #687b9e;--accent-color-02: #687b9e34;--success-color-00: rgb(77, 186, 77);--success-color-01: rgb(44, 163, 44);--error-color-00: rgb(188, 101, 101);--error-color-01: rgb(159, 50, 50);--warning-color-00: rgb(214, 191, 90);--warning-color-01: rgb(183, 159, 51);--text-00: #ffffff;--text-01: #687b9e;--text-02: #8498bc;--half-transparent-background: rgba(0, 0, 0, 50%)}:root[data-theme=dark]{--main-bg: #383143;--darker-color: #1f1b26;--lighter-color: #514760}:root{--border-radius-none: 0px;--border-radius-20: 2px;--border-radius-40: 4px;--border-radius-60: 6px;--border-radius-80: 8px;--border-radius-120: 12px;--border-radius-circular: 99px;--default-border-radius: var(--border-radius-40)}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;scroll-behavior:smooth}*,*:before,*:after{box-sizing:border-box}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;appearance:none}body{width:auto!important}html{line-height:1.15;text-size-adjust:100%}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-size:1em;font-family:monospace}a{background:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-size:1em;font-family:monospace}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}input:disabled{cursor:not-allowed}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1.15}button,input{overflow:visible}input[type=number]{appearance:textfield}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;color:inherit;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;appearance:textfield}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{font:inherit;appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--transition-04: .4s;--transition-03: .3s;--transition-02: .2s;--transition-01: .1s}.list-enter-active,.list-leave-active{transition:all var(--transition-02) ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.opacity-enter-active,.opacity-list-leave-active{transition:all var(--transition-02) ease}.opacity-enter-from,.opacity-leave-to{opacity:0}body{font-family:Helvetica,Roboto,Arial,sans-serif}.carousel{overflow:hidden}.slides-container{display:flex;transition:transform .5s ease}.slide{min-width:100%}

package/dist/styles/base/_animation.scss

@@ -0,0 +1,19 @@
+.list-enter-active,
+.list-leave-active {
+  transition: all var(--transition-02) ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.opacity-enter-active,
+.opacity-list-leave-active {
+  transition: all var(--transition-02) ease;
+}
+
+.opacity-enter-from,
+.opacity-leave-to {
+  opacity: 0;
+}

package/dist/styles/base/_border-radius.scss

@@ -0,0 +1,10 @@
+:root {
+  --border-radius-none: 0px;
+  --border-radius-20: 2px;
+  --border-radius-40: 4px;
+  --border-radius-60: 6px;
+  --border-radius-80: 8px;
+  --border-radius-120: 12px;
+  --border-radius-circular: 99px;
+  --default-border-radius: var(--border-radius-40);
+}

package/dist/styles/base/_colors.scss

@@ -0,0 +1,35 @@
+:root {
+  --main-bg: #ebf3fa;
+
+  --darker-color: #c3cad0;
+  --lighter-color: #ffffff;
+
+  --info-color-00: #5b8ce6;
+  --info-color-01: #2a60c2;
+
+  --accent-color-00: #687b9e72;
+  --accent-color-01: #687b9e;
+  --accent-color-02: #687b9e34;
+
+  --success-color-00: rgb(77, 186, 77);
+  --success-color-01: rgb(44, 163, 44);
+
+  --error-color-00: rgb(188, 101, 101);
+  --error-color-01: rgb(159, 50, 50);
+
+  --warning-color-00: rgb(214, 191, 90);
+  --warning-color-01: rgb(183, 159, 51);
+
+  --text-00: #ffffff;
+  --text-01: #687b9e;
+  --text-02: #8498bc;
+
+  --half-transparent-background: rgba(0, 0, 0, 50%);
+
+  &[data-theme='dark'] {
+    $main-bg: #383143;
+    --main-bg: #383143;
+    --darker-color: #{darken($main-bg, 10%)};
+    --lighter-color: #{lighten($main-bg, 10%)};
+  }
+}

package/dist/styles/base/_common-mixins.scss

@@ -0,0 +1,39 @@
+@mixin disabled() {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+@mixin wh100() {
+  width: 100%;
+  height: 100%;
+}
+
+@mixin flex-full-center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin absolute-center() {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin absolute-zero() {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+@mixin overlay($zIndex: 1) {
+  --overlay-background-color: var(--half-transparent-background);
+  background-color: var(--overlay-background-color);
+  z-index: $zIndex;
+  overflow: hidden;
+  pointer-events: none;
+  transition: ease-in-out var(--transition-02) opacity;
+  @include wh100;
+  @include absolute-zero;
+}

package/dist/styles/base/_dimensions.scss

@@ -0,0 +1,10 @@
+$base-shadow-width: 4px;
+$base-shadow-blur: $base-shadow-width * 2.5;
+$nmorph-wrapper-padding: $base-shadow-width * 1.5;
+$base-input-indentation: 8px;
+
+$thick-input-height: 38px;
+$default-input-height: 30px;
+$thin-input-height: 22px;
+
+$extra-thin-input-height: 14px;

package/dist/styles/base/_histoire.scss

@@ -0,0 +1,8 @@
+.__histoire-render-story:not(.__histoire-render-custom-controls) {
+  overflow: visible;
+  padding: 12px;
+}
+
+.htw-h-full {
+  background: var(--main-bg);
+}

package/dist/styles/base/_normalize.scss

@@ -0,0 +1,388 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+:root {
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+body {
+  width: auto !important;
+}
+
+html {
+  line-height: 1.15; /* 1 */
+  text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  margin: 0.67em 0;
+  font-size: 2em;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-size: 1em; /* 2 */
+  font-family: monospace; /* 1 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+  border-bottom: none; /* 1 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-size: 1em; /* 2 */
+  font-family: monospace; /* 1 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+input:disabled {
+  cursor: not-allowed;
+}
+
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0; /* 2 */
+  font-size: 100%; /* 1 */
+  font-family: inherit; /* 1 */
+  line-height: 1.15; /* 1 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+input[type='number'] {
+  appearance: textfield;
+}
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  display: table; /* 1 */
+  box-sizing: border-box; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  color: inherit; /* 2 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  outline-offset: -2px; /* 2 */
+  appearance: textfield; /* 1 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  font: inherit; /* 2 */
+  appearance: button; /* 1 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

package/dist/styles/base/_theme-mixin.scss

@@ -0,0 +1,32 @@
+@mixin nmorph-outset() {
+  background: var(--main-bg);
+  box-shadow:
+    #{$base-shadow-width} $base-shadow-width $base-shadow-blur var(--darker-color),
+    -#{$base-shadow-width} -#{$base-shadow-width} $base-shadow-blur var(--lighter-color);
+}
+
+@mixin nmorph-inset() {
+  background: var(--main-bg);
+  box-shadow:
+    inset $base-shadow-width $base-shadow-width $base-shadow-blur var(--darker-color),
+    inset -#{$base-shadow-width} -#{$base-shadow-width} $base-shadow-blur var(--lighter-color);
+}
+
+@mixin nmorph-combined() {
+  background: var(--main-bg);
+  box-shadow:
+    $base-shadow-width $base-shadow-width $base-shadow-blur var(--darker-color),
+    -#{$base-shadow-width} -#{$base-shadow-width} $base-shadow-blur var(--lighter-color),
+    inset $base-shadow-width $base-shadow-width $base-shadow-blur var(--darker-color),
+    inset -#{$base-shadow-width} -#{$base-shadow-width} $base-shadow-blur var(--lighter-color);
+}
+
+@mixin nmorph-wrapper() {
+  padding: $nmorph-wrapper-padding;
+  box-sizing: content-box;
+}
+
+@mixin nmorph-dark-shadow() {
+  background: var(--main-bg);
+  box-shadow: 0 0 $base-shadow-blur var(--darker-color);
+}

package/dist/styles/base/_transition.scss

@@ -0,0 +1,6 @@
+:root {
+  --transition-04: 0.4s;
+  --transition-03: 0.3s;
+  --transition-02: 0.2s;
+  --transition-01: 0.1s;
+}