motile-ui 0.9.0 → 0.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +193 -31
- package/dist/index.css +1 -0
- package/dist/motile-ui.es.js +458 -455
- package/dist/motile-ui.umd.js +2 -2
- package/package.json +10 -7
package/dist/motile-ui.es.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.motile-btn{width:fit-content;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:fit-content}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.95);box-shadow:0 2px 4px #0000001a}.motile-btn--primary{background:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );color:#fff;box-shadow:0 1px 2px #0000000d}@media (hover: hover){.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--secondary{background:#fff;color:var( --motile-btn-color, var(--motile-ui-btn-secondary, var(--motile-theme, #3b82f6)) );border:1px solid var( --motile-btn-color, var(--motile-ui-btn-secondary, var(--motile-theme, #3b82f6)) );box-shadow:none}@media (hover: hover){.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var( --motile-btn-color, var(--motile-ui-btn-secondary, var(--motile-theme, #3b82f6)) ) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var( --motile-btn-color, var(--motile-ui-btn-secondary, var(--motile-theme, #3b82f6)) ) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--default{background:transparent;border:none;color:var( --motile-btn-color, var(--motile-ui-btn-default, var(--motile-theme, #3b82f6)) );box-shadow:none}@media (hover: hover){.motile-btn--default:hover:not(.motile-btn--disabled){opacity:.7;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--default:hover:not(.motile-btn--disabled){opacity:.7;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--large{padding:0 24px;font-size:16px;height:56px;min-height:56px;line-height:1.4}.motile-btn--medium{padding:0 20px;font-size:15px;height:48px;min-height:48px;min-width:80px;line-height:1.4}.motile-btn--small{padding:0 16px;font-size:14px;height:40px;min-height:40px;min-width:64px;line-height:1.4}.motile-btn--primary.motile-btn--disabled{opacity:.5;filter:saturate(.9);cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--secondary.motile-btn--disabled{background:#e5e7eb;color:#6b7280;border:none;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--default.motile-btn--disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--full-width{width:100%}.motile-btn svg{flex-shrink:0;margin-right:8px}.motile-btn svg:last-child{margin-right:0;margin-left:8px}.motile-btn svg:only-child{margin:0}@media (max-width: 1024px){.motile-btn--large{padding:0 20px;font-size:15px;height:52px;min-height:52px}}@media (max-width: 768px){.motile-btn--large{padding:0 18px;font-size:14px;height:48px;min-height:48px}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-btn{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}.motile-btn__wrapper{display:grid;grid-template-areas:"content";place-items:center;width:100%;height:100%}.motile-btn__content{grid-area:content;display:inline-flex;align-items:center;justify-content:center}.motile-btn__loading{grid-area:content;display:flex;align-items:center;justify-content:center}.motile-btn__dots{display:flex;gap:8px;align-items:center;height:1em}.motile-btn--large .motile-btn__dot{width:8px;height:8px}.motile-btn--medium .motile-btn__dot{width:6px;height:6px}.motile-btn--small .motile-btn__dot{width:5px;height:5px}.motile-btn__dot{border-radius:50%;background-color:#ffffffb3;animation:motile-btn-loading-bounce 1.4s ease-in-out infinite both}.motile-btn__dot:nth-child(1){animation-delay:-.32s}.motile-btn__dot:nth-child(2){animation-delay:-.16s}.motile-btn__dot:nth-child(3){animation-delay:0s}.motile-btn--primary .motile-btn__dot{background-color:#ffffffb3}.motile-btn--secondary .motile-btn__dot,.motile-btn--default .motile-btn__dot{background-color:#9ca3afb3}@keyframes motile-btn-loading-bounce{0%,80%,to{transform:scale(1);opacity:.4}40%{transform:scale(1.2);opacity:1}}.motile-input{width:100%;border:1px solid #e5e8eb;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:400;color:#111827;background:#fff;outline:none;transition:none;min-height:48px;line-height:1.4;box-sizing:border-box}.motile-input:hover:not(:disabled):not(:focus):not(.motile-input--error){border-color:#c9cdd2}.motile-input--default{border:2px solid #e5e8eb}.motile-input--default:focus{border:2px solid var(--motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)))}.motile-input--default:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;border-color:#e5e7eb}.motile-input--underline:disabled{background:transparent;color:#9ca3af;cursor:not-allowed;border-bottom-color:#e5e7eb;opacity:.5}.motile-input--default.motile-input--error{border:2px solid #ef4444;background:#fef5f5}.motile-input--default.motile-input--error:focus{border:2px solid #ef4444;background:#fef5f5}.motile-input--shake{animation:motile-input-shake .5s ease-in-out}@keyframes motile-input-shake{0%{transform:translate(0)}15%{transform:translate(-10px)}30%{transform:translate(8px)}45%{transform:translate(-6px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.motile-input::placeholder{color:#9ca3af;opacity:1}.motile-input-wrapper{position:relative;width:100%}.motile-input--underline{border:none;border-bottom:2px solid #e5e8eb;border-radius:0;background:transparent;padding:18px 4px 4px;height:48px;line-height:1.5;transition:border-color .2s ease}.motile-input--underline:hover:not(:disabled):not(:focus):not(.motile-input--error){border-bottom-color:#9ca3af}.motile-input--underline:focus{border:none;border-bottom:2px solid var(--motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)));padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input--underline.motile-input--error{border-bottom-color:#ef4444}.motile-input--underline.motile-input--error:focus{border-bottom:2px solid #ef4444;padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input--with-left-icon{padding-left:40px}.motile-input--default.motile-input--with-left-icon:focus{padding-left:40px}.motile-input--underline.motile-input--with-left-icon{padding-left:32px}.motile-input--underline.motile-input--with-left-icon:focus{padding-left:32px}.motile-input--with-right-content{padding-right:40px}.motile-input--default.motile-input--with-right-content:focus{padding-right:40px}.motile-input--underline.motile-input--with-right-content{padding-right:32px}.motile-input--underline.motile-input--with-right-content:focus{padding-right:32px}.motile-input__left-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#9ca3af;pointer-events:none}.motile-input-wrapper:has(.motile-input--underline) .motile-input__left-icon{left:4px;top:calc(50% + 7px)}.motile-input__left-icon svg{width:100%;height:100%}.motile-input__right-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#9ca3af;pointer-events:none}.motile-input-wrapper:has(.motile-input--underline) .motile-input__right-icon{right:4px;top:calc(50% + 7px)}.motile-input__right-icon svg{width:100%;height:100%}.motile-input__clear-button{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;color:#9ca3af;cursor:pointer;border-radius:4px;transition:background-color .2s ease,color .2s ease}.motile-input-wrapper:has(.motile-input--underline) .motile-input__clear-button{right:4px;top:calc(50% + 7px)}.motile-input__clear-button:hover{background:#f3f4f6;color:#6b7280}.motile-input__clear-icon{width:16px;height:16px}@media (max-width: 768px){.motile-input{font-size:16px;padding:12px;min-height:44px}.motile-input--default{border:2px solid #e5e8eb}.motile-input--default:focus{border:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input--underline{padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input--underline:focus{border-bottom:2px solid var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) );padding:18px 4px 4px;height:48px;line-height:1.5}.motile-input-wrapper:has(.motile-input--underline) .motile-input__left-icon{top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline) .motile-input__right-icon{top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline) .motile-input__clear-button{top:calc(50% + 7px);transform:translateY(-50%)}.motile-input--with-left-icon{padding-left:40px}.motile-input--default.motile-input--with-left-icon:focus{padding-left:40px}.motile-input--default.motile-input--with-label.motile-input--with-left-icon{padding-left:40px}.motile-input--default.motile-input--with-label.motile-input--with-left-icon:focus{padding-left:40px}.motile-input--underline.motile-input--with-left-icon{padding-left:32px}.motile-input--underline.motile-input--with-left-icon:focus{padding-left:32px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon{padding-left:32px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon:focus{padding-left:32px}.motile-input--with-right-content{padding-right:36px}.motile-input--default.motile-input--with-right-content:focus{padding-right:36px}.motile-input--underline.motile-input--with-right-content{padding-right:32px}.motile-input--underline.motile-input--with-right-content:focus{padding-right:32px}}@supports (-webkit-touch-callout: none){.motile-input{-webkit-tap-highlight-color:transparent}}.motile-input__helper-text{display:flex;align-items:flex-start;margin-top:4px;min-height:16px;gap:8px}.motile-input__helper-text--both{justify-content:space-between}.motile-input__helper-text--error-only{justify-content:flex-start}.motile-input__helper-text--counter-only{justify-content:flex-end}.motile-input__error-message{font-size:12px;color:#ef4444;line-height:16px;flex:1}.motile-input__counter{font-size:12px;color:#9ca3af;line-height:16px;white-space:nowrap;flex-shrink:0}.motile-input__label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;color:#9ca3af;pointer-events:none;transition:all .2s ease;background:transparent;padding:0;z-index:1}.motile-input--with-label::placeholder{opacity:0}.motile-input--with-label:focus::placeholder{opacity:1}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label{top:0;transform:translateY(-50%);font-size:12px;color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) );background:#fff;padding:0 4px}.motile-input-wrapper:has(.motile-input--underline) .motile-input__label{left:4px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label{top:14px;transform:translateY(-100%);font-size:12px;color:var( --motile-input-color, var(--motile-ui-input, var(--motile-theme, #3182f6)) )}.motile-input-wrapper:has(.motile-input:focus) .motile-input__label--error,.motile-input-wrapper:has(.motile-input:not(:placeholder-shown)) .motile-input__label--error{color:#ef4444}.motile-input--default.motile-input--with-label{padding-top:12px;padding-bottom:12px}.motile-input--default.motile-input--with-label.motile-input--with-left-icon{padding-left:40px}.motile-input--default.motile-input--with-label.motile-input--with-left-icon:focus{padding-left:40px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon{padding-left:32px}.motile-input-wrapper:has(.motile-input--underline) .motile-input--with-label.motile-input--with-left-icon:focus{padding-left:32px}.motile-input-wrapper:has(.motile-input--with-left-icon) .motile-input__label{left:44px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon) .motile-input__label{left:32px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:40px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:4px;top:14px;transform:translateY(-100%)}@media (max-width: 768px){.motile-input__label{font-size:16px;left:12px}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input:not(:placeholder-shown)) .motile-input__label{font-size:12px}.motile-input-wrapper:has(.motile-input--underline) .motile-input__label{left:4px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline):has(.motile-input:not(:placeholder-shown)) .motile-input__label{font-size:12px;top:14px;transform:translateY(-100%)}.motile-input-wrapper:has(.motile-input--with-left-icon) .motile-input__label{left:40px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon) .motile-input__label{left:32px;top:calc(50% + 7px);transform:translateY(-50%)}.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:not(:has(.motile-input--underline)):has(.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:36px}.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:focus) .motile-input__label,.motile-input-wrapper:has(.motile-input--underline.motile-input--with-left-icon):has(.motile-input:not(:placeholder-shown)) .motile-input__label{left:4px;top:14px;transform:translateY(-100%)}}.motile-textarea{width:100%;border:2px solid #e5e8eb;border-radius:12px;padding:12px 16px;font-size:16px;font-weight:400;color:#111827;background:#fff;outline:none;transition:none;min-height:120px;line-height:1.6;box-sizing:border-box;font-family:inherit;resize:none}.motile-textarea:hover:not(:disabled):not(:focus):not(.motile-textarea--error){border-color:#c9cdd2}.motile-textarea:focus{border:2px solid var( --motile-textarea-color, var(--motile-ui-textarea, var(--motile-theme, #3182f6)) )}.motile-textarea:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;border-color:#e5e7eb;resize:none}.motile-textarea.motile-textarea--error{border:2px solid #ef4444;background:#fef5f5}.motile-textarea.motile-textarea--error:focus{border:2px solid #ef4444;background:#fef5f5}.motile-textarea--shake{animation:motile-textarea-shake .5s ease-in-out}@keyframes motile-textarea-shake{0%{transform:translate(0)}15%{transform:translate(-10px)}30%{transform:translate(8px)}45%{transform:translate(-6px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.motile-textarea::placeholder{color:#9ca3af;opacity:1}.motile-textarea-wrapper{position:relative;width:100%}.motile-textarea--with-clear{padding-right:40px}.motile-textarea--with-clear:focus{padding-right:40px}.motile-textarea__clear-button{position:absolute;right:12px;top:12px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;color:#9ca3af;cursor:pointer;border-radius:4px;transition:background-color .2s ease,color .2s ease}.motile-textarea__clear-button:hover{background:#f3f4f6;color:#6b7280}.motile-textarea__clear-icon{width:16px;height:16px}@media (max-width: 768px){.motile-textarea{font-size:16px;padding:12px;min-height:100px}.motile-textarea:focus{border:2px solid var( --motile-textarea-color, var(--motile-ui-textarea, var(--motile-theme, #3182f6)) )}.motile-textarea--with-clear{padding-right:36px}.motile-textarea--with-clear:focus{padding-right:36px}}@supports (-webkit-touch-callout: none){.motile-textarea{-webkit-tap-highlight-color:transparent}}.motile-textarea__helper-text{display:flex;align-items:flex-start;margin-top:4px;min-height:16px;gap:8px}.motile-textarea__helper-text--both{justify-content:space-between}.motile-textarea__helper-text--error-only{justify-content:flex-start}.motile-textarea__helper-text--counter-only{justify-content:flex-end}.motile-textarea__error-message{font-size:12px;color:#ef4444;line-height:16px;flex:1}.motile-textarea__counter{font-size:12px;color:#9ca3af;line-height:16px;white-space:nowrap;flex-shrink:0}.motile-textarea__label{position:absolute;left:16px;top:16px;font-size:16px;color:#9ca3af;pointer-events:none;transition:all .2s ease;background:transparent;padding:0;z-index:1}.motile-textarea--with-label::placeholder{opacity:0}.motile-textarea--with-label:focus::placeholder{opacity:1}.motile-textarea-wrapper:has(.motile-textarea:focus) .motile-textarea__label,.motile-textarea-wrapper:has(.motile-textarea:not(:placeholder-shown)) .motile-textarea__label{top:0;transform:translateY(-50%);font-size:12px;color:var( --motile-textarea-color, var(--motile-ui-textarea, var(--motile-theme, #3182f6)) );background:#fff;padding:0 4px}.motile-textarea-wrapper:has(.motile-textarea:focus) .motile-textarea__label--error,.motile-textarea-wrapper:has(.motile-textarea:not(:placeholder-shown)) .motile-textarea__label--error{color:#ef4444}.motile-textarea.motile-textarea--with-label{padding-top:12px;padding-bottom:12px}@media (max-width: 768px){.motile-textarea__label{font-size:16px;left:12px;top:16px}.motile-textarea-wrapper:has(.motile-textarea:focus) .motile-textarea__label,.motile-textarea-wrapper:has(.motile-textarea:not(:placeholder-shown)) .motile-textarea__label{font-size:12px}}.motile-checkbox-container{display:inline-flex;flex-direction:column;gap:4px}.motile-checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.motile-checkbox-container--disabled .motile-checkbox-wrapper{cursor:not-allowed;opacity:.6}.motile-checkbox{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.motile-checkbox:focus{outline:none}.motile-checkbox__mark{position:relative;width:20px;height:20px;min-width:20px;min-height:20px;border:2px solid #d1d5db;border-radius:4px;background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}.motile-checkbox--rounded+.motile-checkbox__mark{border-radius:50%}.motile-checkbox--square+.motile-checkbox__mark{border-radius:0}.motile-checkbox--large+.motile-checkbox__mark{width:24px;height:24px;min-width:24px;min-height:24px}.motile-checkbox--large+.motile-checkbox__mark .motile-checkbox__check-icon{width:14px;height:14px}.motile-checkbox--medium+.motile-checkbox__mark{width:20px;height:20px;min-width:20px;min-height:20px}.motile-checkbox--medium+.motile-checkbox__mark .motile-checkbox__check-icon{width:12px;height:12px}.motile-checkbox--small+.motile-checkbox__mark{width:16px;height:16px;min-width:16px;min-height:16px}.motile-checkbox--small+.motile-checkbox__mark .motile-checkbox__check-icon{width:10px;height:10px}.motile-checkbox__check-icon{width:12px;height:12px;color:#fff;flex-shrink:0;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.motile-checkbox__check-icon path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s cubic-bezier(.65,0,.35,1) .05s}.motile-checkbox--filled+.motile-checkbox__mark{background-color:#e5e7eb;border-color:#e5e7eb}.motile-checkbox--filled+.motile-checkbox__mark .motile-checkbox__check-icon{opacity:1;transform:scale(1)}.motile-checkbox--filled+.motile-checkbox__mark .motile-checkbox__check-icon path{stroke-dashoffset:0}.motile-checkbox:checked+.motile-checkbox__mark{background-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );animation:checkboxBounce .4s cubic-bezier(.68,-.55,.265,1.55)}.motile-checkbox:checked+.motile-checkbox__mark .motile-checkbox__check-icon{opacity:1;transform:scale(1)}.motile-checkbox:checked+.motile-checkbox__mark .motile-checkbox__check-icon path{stroke-dashoffset:0}.motile-checkbox--filled:checked+.motile-checkbox__mark{background-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) );border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) )}@keyframes checkboxBounce{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.motile-checkbox-container:not(.motile-checkbox-container--filled) .motile-checkbox-wrapper:hover .motile-checkbox__mark{border-color:var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) )}.motile-checkbox-container:not(.motile-checkbox-container--filled) .motile-checkbox:checked+.motile-checkbox__mark:hover{background-color:color-mix(in srgb,var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) ) 90%,black);border-color:color-mix(in srgb,var( --motile-checkbox-color, var(--motile-ui-checkbox, var(--motile-theme, #3b82f6)) ) 90%,black)}.motile-checkbox:disabled+.motile-checkbox__mark{background-color:#f3f4f6;border-color:#d1d5db;cursor:not-allowed}.motile-checkbox:disabled:checked+.motile-checkbox__mark{background-color:#d1d5db;border-color:#d1d5db}.motile-checkbox__label{font-size:14px;color:#374151;cursor:pointer;margin:0;padding:0}.motile-checkbox-container--large .motile-checkbox__label{font-size:16px}.motile-checkbox-container--medium .motile-checkbox__label{font-size:14px}.motile-checkbox-container--small .motile-checkbox__label{font-size:12px}.motile-checkbox__label--disabled{color:#9ca3af;cursor:not-allowed}.motile-switch-container{display:inline-flex;flex-direction:column;gap:4px}.motile-switch-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.motile-switch-container--disabled .motile-switch-wrapper{cursor:not-allowed;opacity:.6}.motile-switch{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.motile-switch:focus{outline:none}.motile-switch__track{position:relative;width:44px;height:24px;background-color:#e5e7eb;border-radius:24px;transition:background-color .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}.motile-switch__thumb{position:absolute;width:18px;height:18px;background-color:#fff;border-radius:50%;left:3px;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0000001a}.motile-switch:checked+.motile-switch__track{background-color:var( --motile-switch-color, var(--motile-ui-switch, var(--motile-theme, #3b82f6)) )}.motile-switch:checked+.motile-switch__track .motile-switch__thumb{transform:translate(20px)}.motile-switch:not(:checked)+.motile-switch__track:hover{background-color:#d1d5db}.motile-switch:checked+.motile-switch__track:hover{background-color:color-mix(in srgb,var( --motile-switch-color, var(--motile-ui-switch, var(--motile-theme, #3b82f6)) ) 90%,black)}.motile-switch:disabled+.motile-switch__track{background-color:#f3f4f6;cursor:not-allowed}.motile-switch:disabled:checked+.motile-switch__track{background-color:#d1d5db}.motile-switch:disabled+.motile-switch__track .motile-switch__thumb{box-shadow:none}.motile-switch--elastic+.motile-switch__track .motile-switch__thumb{transition:none;will-change:transform}.motile-switch--elastic:checked+.motile-switch__track .motile-switch__thumb{animation:switch-slide-on .35s cubic-bezier(.25,.1,.25,1);transform:translate(20px);transform-origin:left center}.motile-switch--elastic:not(:checked)+.motile-switch__track .motile-switch__thumb{animation:switch-slide-off .35s cubic-bezier(.25,.1,.25,1);transform:translate(0);transform-origin:right center}@keyframes switch-slide-on{0%{transform:translate(0) scaleX(1)}10%{transform:translate(.5px) scaleX(1.05)}25%{transform:translate(3px) scaleX(1.25)}45%{transform:translate(8px) scaleX(1.4)}65%{transform:translate(14px) scaleX(1.3)}85%{transform:translate(18.5px) scaleX(1.08)}95%{transform:translate(19.8px) scaleX(1.02)}to{transform:translate(20px) scaleX(1)}}@keyframes switch-slide-off{0%{transform:translate(20px) scaleX(1)}10%{transform:translate(19.5px) scaleX(1.05)}25%{transform:translate(17px) scaleX(1.25)}45%{transform:translate(12px) scaleX(1.4)}65%{transform:translate(6px) scaleX(1.3)}85%{transform:translate(1.5px) scaleX(1.08)}95%{transform:translate(.2px) scaleX(1.02)}to{transform:translate(0) scaleX(1)}}.motile-switch--bounce+.motile-switch__track .motile-switch__thumb{transition:none;will-change:transform}.motile-switch--bounce:checked+.motile-switch__track .motile-switch__thumb{animation:switch-bounce-on .65s cubic-bezier(.68,-.55,.27,1.55);transform:translate(20px)}.motile-switch--bounce:not(:checked)+.motile-switch__track .motile-switch__thumb{animation:switch-bounce-off .65s cubic-bezier(.68,-.55,.27,1.55);transform:translate(0)}@keyframes switch-bounce-on{0%{transform:translate(0)}60%{transform:translate(23px)}80%{transform:translate(18px)}95%{transform:translate(20.5px)}to{transform:translate(20px)}}@keyframes switch-bounce-off{0%{transform:translate(20px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}95%{transform:translate(-.5px)}to{transform:translate(0)}}.motile-accordion{overflow:hidden}.motile-accordion__header{width:100%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background-color .2s ease;text-align:left;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;-webkit-user-select:none;user-select:none;padding:16px 20px;color:#111827;background-color:transparent;font-size:16px;font-weight:400;-webkit-text-size-adjust:100%}.motile-accordion__header:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}@media (hover: hover) and (pointer: fine){.motile-accordion__header:not(:disabled):hover{background-color:#f9fafb}}@media (hover: none) and (pointer: coarse){.motile-accordion__header:not(:disabled):active{background-color:#f3f4f6}}.motile-accordion__title{flex:1;min-width:0;text-align:left;font-size:16px;font-weight:400;color:#111827}.motile-accordion__chevron{flex-shrink:0;transition:transform .2s cubic-bezier(.4,0,.2,1);width:20px;height:20px;color:#9ca3af}.motile-accordion--expanded .motile-accordion__chevron,.motile-accordion[data-state=open] .motile-accordion__chevron{transform:rotate(180deg)}.motile-accordion__panel{overflow:hidden;height:0;transition:height .25s cubic-bezier(.4,0,.2,1)}.motile-accordion__content{line-height:1.6;opacity:0;transform:translateY(-8px);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);padding:14px 20px 20px;color:#374151;font-size:14px}.motile-accordion--expanded .motile-accordion__content,.motile-accordion[data-state=open] .motile-accordion__content{opacity:1;transform:translateY(0)}.motile-accordion--disabled,.motile-accordion[data-disabled]{cursor:not-allowed;opacity:.6}.motile-accordion--disabled .motile-accordion__header,.motile-accordion[data-disabled] .motile-accordion__header{cursor:not-allowed}.motile-accordion--outlined{border:1.5px solid #e5e7eb;border-radius:12px}.motile-accordion--outlined.motile-accordion--expanded .motile-accordion__header,.motile-accordion--outlined[data-state=open] .motile-accordion__header{border-bottom:1px solid #e5e7eb}@media (max-width: 768px){.motile-accordion__header{padding:16px 18px;font-size:16px;-webkit-text-size-adjust:100%}.motile-accordion__content{padding:14px 18px 18px;font-size:15px;-webkit-text-size-adjust:100%}.motile-accordion__title{font-size:16px}.motile-accordion__chevron{width:20px;height:20px}}@media (prefers-reduced-motion: reduce){.motile-accordion__panel,.motile-accordion__content,.motile-accordion__chevron{transition:none!important}}.motile-skeleton{display:inline-block;position:relative;overflow:hidden;background-color:#e5e7eb}.motile-skeleton:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#fff0,#fff6,#fff0);transform:translate(-100%);animation:motile-skeleton-shimmer 1.5s ease-in-out infinite}@keyframes motile-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (prefers-reduced-motion: reduce){.motile-skeleton:after{animation:none;display:none}}@media (prefers-color-scheme: dark){.motile-skeleton{background-color:#374151}.motile-skeleton:after{background:linear-gradient(90deg,#fff0,#ffffff1a,#fff0)}}.motile-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:500;line-height:1.2;border-radius:9999px;white-space:nowrap;vertical-align:middle;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--large{padding:6px 16px;font-size:1rem;min-height:32px}.motile-badge--medium{padding:5px 12px;font-size:.875rem;min-height:26px}.motile-badge--small{padding:4px 8px;font-size:.75rem;min-height:24px}.motile-badge--primary{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff}.motile-badge--secondary{background:color-mix(in srgb,var(--motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6))) 10%,transparent);color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)))}.motile-badge--secondary.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--secondary.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--secondary.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--outlined{background-color:#fff;color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)))}.motile-badge--outlined.motile-badge--large{padding:5px 15px;min-height:30px}.motile-badge--outlined.motile-badge--medium{padding:4px 11px;min-height:24px}.motile-badge--outlined.motile-badge--small{padding:3px 7px;min-height:22px}.motile-badge--dot{background-color:transparent;padding:0;gap:6px;color:inherit}.motile-badge__dot{display:inline-block;border-radius:50%;background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) )}.motile-badge__text{line-height:1.2}.motile-badge--dot.motile-badge--large .motile-badge__dot{width:12px;height:12px}.motile-badge--dot.motile-badge--medium .motile-badge__dot{width:10px;height:10px}.motile-badge--dot.motile-badge--small .motile-badge__dot{width:8px;height:8px}.motile-badge--shimmer{background-color:var( --motile-badge-color, var(--motile-ui-badge, var(--motile-theme, #3b82f6)) );color:#fff;position:relative;overflow:hidden}.motile-badge--shimmer:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@media (prefers-reduced-motion: reduce){.motile-badge--shimmer:before{animation:none}}@media (max-width: 768px){.motile-badge:active{filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-badge{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}.motile-tooltip-trigger{position:relative;display:inline-block;line-height:normal;vertical-align:middle}.motile-tooltip-bubble{position:fixed;z-index:2147483647;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;line-height:1.4;box-shadow:0 6px 20px #0003;opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1)}.motile-tooltip-bubble[data-placement=top]{transform:translateY(8px) scale(.96)}.motile-tooltip-bubble[data-placement=bottom]{transform:translateY(-8px) scale(.96)}.motile-tooltip-bubble[data-placement=left]{transform:translate(8px) scale(.96)}.motile-tooltip-bubble[data-placement=right]{transform:translate(-8px) scale(.96)}.motile-tooltip-bubble[data-open=true]{opacity:1;transform:translate(0) scale(1)}.motile-tooltip-bubble[data-keep-open]{pointer-events:auto}.motile-tooltip-bubble--default{--arrow-color: var( --motile-tooltip-color, var(--motile-ui-tooltip, rgba(0, 0, 0, .9)) );background:var(--arrow-color);color:#fff}.motile-tooltip-bubble--outlined{--arrow-color: var(--motile-tooltip-color, var(--motile-ui-tooltip, #3b82f6));background:#fff;color:var(--arrow-color);border:1px solid var(--arrow-color)}.motile-tooltip-bubble.measuring{visibility:hidden!important;opacity:1!important;max-width:none!important;max-height:none!important;left:0!important;top:0!important}.motile-tooltip-bubble[data-show-arrow]:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}.motile-tooltip-bubble--outlined[data-show-arrow]:after{content:"";position:absolute;width:0;height:0;border:5px solid transparent}.motile-tooltip-bubble[data-placement=top][data-show-arrow]:before{bottom:-5px;left:var(--arrow-left, 50%);transform:translate(-50%);border-bottom-width:0;border-top-color:var(--arrow-color)}.motile-tooltip-bubble--outlined[data-placement=top][data-show-arrow]:after{bottom:-4px;left:var(--arrow-left, 50%);transform:translate(-50%);border-bottom-width:0;border-top-color:#fff}.motile-tooltip-bubble[data-placement=bottom][data-show-arrow]:before{top:-5px;left:var(--arrow-left, 50%);transform:translate(-50%);border-top-width:0;border-bottom-color:var(--arrow-color)}.motile-tooltip-bubble--outlined[data-placement=bottom][data-show-arrow]:after{top:-4px;left:var(--arrow-left, 50%);transform:translate(-50%);border-top-width:0;border-bottom-color:#fff}.motile-tooltip-bubble[data-placement=left][data-show-arrow]:before{right:-5px;top:var(--arrow-top, 50%);transform:translateY(-50%);border-right-width:0;border-left-color:var(--arrow-color)}.motile-tooltip-bubble--outlined[data-placement=left][data-show-arrow]:after{right:-4px;top:var(--arrow-top, 50%);transform:translateY(-50%);border-right-width:0;border-left-color:#fff}.motile-tooltip-bubble[data-placement=right][data-show-arrow]:before{left:-5px;top:var(--arrow-top, 50%);transform:translateY(-50%);border-left-width:0;border-right-color:var(--arrow-color)}.motile-tooltip-bubble--outlined[data-placement=right][data-show-arrow]:after{left:-4px;top:var(--arrow-top, 50%);transform:translateY(-50%);border-left-width:0;border-right-color:#fff}.motile-popover-wrapper{position:relative}.motile-popover-content{position:absolute;z-index:10;border-radius:12px;font-size:14px;line-height:1.5;box-shadow:0 4px 12px #0000001a;pointer-events:auto;width:max-content;max-width:min(90vw,420px);box-sizing:border-box;overflow:visible;opacity:0;visibility:hidden;will-change:transform;backface-visibility:hidden;perspective:1000px}.motile-popover-content--default{background:var(--motile-popover-color, var(--motile-ui-popover, #3b82f6));color:#fff;border:1px solid var(--motile-popover-color, var(--motile-ui-popover, #3b82f6))}.motile-popover-content--outlined{background:#fff;color:#111827;border:1px solid var(--motile-popover-color, var(--motile-ui-popover, #e5e7eb))}.motile-popover-content[data-positioned=true]{opacity:1;visibility:visible}.motile-popover-content[data-placement=top][data-align=center],.motile-popover-content[data-placement=bottom][data-align=center]{transform:translate3d(-50%,0,0)}.motile-popover-content[data-placement=left][data-align=center],.motile-popover-content[data-placement=right][data-align=center]{transform:translate3d(0,-50%,0)}.motile-popover-content[data-placement=top][data-align=center][data-positioned=true][data-bounce=false]{animation:popover-fade-in-top-center .2s ease-out}.motile-popover-content[data-placement=top][data-align=start][data-positioned=true][data-bounce=false]{animation:popover-fade-in-top-start .2s ease-out}.motile-popover-content[data-placement=top][data-align=end][data-positioned=true][data-bounce=false]{animation:popover-fade-in-top-end .2s ease-out}@keyframes popover-fade-in-top-center{0%{opacity:0;transform:translate3d(-50%,8px,0)}to{opacity:1;transform:translate3d(-50%,0,0)}}@keyframes popover-fade-in-top-start{0%{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes popover-fade-in-top-end{0%{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translateZ(0)}}.motile-popover-content[data-placement=top][data-align=center][data-positioned=true][data-bounce=true]{animation:popover-bounce-top-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=top][data-align=start][data-positioned=true][data-bounce=true]{animation:popover-bounce-top-start .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=top][data-align=end][data-positioned=true][data-bounce=true]{animation:popover-bounce-top-end .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}@keyframes popover-bounce-top-center{0%{transform:translate3d(-50%,0,0)}30%{transform:translate3d(-50%,-10px,0)}50%{transform:translate3d(-50%,0,0)}65%{transform:translate3d(-50%,-3px,0)}80%{transform:translate3d(-50%,0,0)}to{transform:translate3d(-50%,0,0)}}@keyframes popover-bounce-top-start{0%{transform:translateZ(0)}30%{transform:translate3d(0,-10px,0)}50%{transform:translateZ(0)}65%{transform:translate3d(0,-3px,0)}80%{transform:translateZ(0)}to{transform:translateZ(0)}}@keyframes popover-bounce-top-end{0%{transform:translateZ(0)}30%{transform:translate3d(0,-10px,0)}50%{transform:translateZ(0)}65%{transform:translate3d(0,-3px,0)}80%{transform:translateZ(0)}to{transform:translateZ(0)}}.motile-popover-content[data-placement=bottom][data-align=center][data-positioned=true][data-bounce=false]{animation:popover-fade-in-bottom-center .2s ease-out}.motile-popover-content[data-placement=bottom][data-align=start][data-positioned=true][data-bounce=false]{animation:popover-fade-in-bottom-start .2s ease-out}.motile-popover-content[data-placement=bottom][data-align=end][data-positioned=true][data-bounce=false]{animation:popover-fade-in-bottom-end .2s ease-out}@keyframes popover-fade-in-bottom-center{0%{opacity:0;transform:translate3d(-50%,-8px,0)}to{opacity:1;transform:translate3d(-50%,0,0)}}@keyframes popover-fade-in-bottom-start{0%{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes popover-fade-in-bottom-end{0%{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translateZ(0)}}.motile-popover-content[data-placement=bottom][data-align=center][data-positioned=true][data-bounce=true]{animation:popover-bounce-bottom-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=bottom][data-align=start][data-positioned=true][data-bounce=true]{animation:popover-bounce-bottom-start .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=bottom][data-align=end][data-positioned=true][data-bounce=true]{animation:popover-bounce-bottom-end .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}@keyframes popover-bounce-bottom-center{0%{transform:translate3d(-50%,0,0)}30%{transform:translate3d(-50%,10px,0)}50%{transform:translate3d(-50%,0,0)}65%{transform:translate3d(-50%,3px,0)}80%{transform:translate3d(-50%,0,0)}to{transform:translate3d(-50%,0,0)}}@keyframes popover-bounce-bottom-start{0%{transform:translateZ(0)}30%{transform:translate3d(0,10px,0)}50%{transform:translateZ(0)}65%{transform:translate3d(0,3px,0)}80%{transform:translateZ(0)}to{transform:translateZ(0)}}@keyframes popover-bounce-bottom-end{0%{transform:translateZ(0)}30%{transform:translate3d(0,10px,0)}50%{transform:translateZ(0)}65%{transform:translate3d(0,3px,0)}80%{transform:translateZ(0)}to{transform:translateZ(0)}}.motile-popover-content[data-placement=left][data-align=center][data-positioned=true][data-bounce=false]{animation:popover-fade-in-left-center .2s ease-out}.motile-popover-content[data-placement=left][data-align=start][data-positioned=true][data-bounce=false]{animation:popover-fade-in-left-start .2s ease-out}.motile-popover-content[data-placement=left][data-align=end][data-positioned=true][data-bounce=false]{animation:popover-fade-in-left-end .2s ease-out}@keyframes popover-fade-in-left-center{0%{opacity:0;transform:translate3d(8px,-50%,0)}to{opacity:1;transform:translate3d(0,-50%,0)}}@keyframes popover-fade-in-left-start{0%{opacity:0;transform:translate3d(8px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes popover-fade-in-left-end{0%{opacity:0;transform:translate3d(8px,0,0)}to{opacity:1;transform:translateZ(0)}}.motile-popover-content[data-placement=left][data-align=center][data-positioned=true][data-bounce=true]{animation:popover-bounce-left-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=left][data-align=start][data-positioned=true][data-bounce=true]{animation:popover-bounce-left-start .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=left][data-align=end][data-positioned=true][data-bounce=true]{animation:popover-bounce-left-end .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}@keyframes popover-bounce-left-center{0%{transform:translate3d(0,-50%,0)}30%{transform:translate3d(-10px,-50%,0)}50%{transform:translate3d(0,-50%,0)}65%{transform:translate3d(-3px,-50%,0)}80%{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,-50%,0)}}@keyframes popover-bounce-left-start{0%{transform:translateZ(0)}30%{transform:translate3d(-10px,0,0)}50%{transform:translateZ(0)}65%{transform:translate3d(-3px,0,0)}80%{transform:translateZ(0)}to{transform:translateZ(0)}}@keyframes popover-bounce-left-end{0%{transform:translateZ(0)}30%{transform:translate3d(-10px,0,0)}50%{transform:translateZ(0)}65%{transform:translate3d(-3px,0,0)}80%{transform:translateZ(0)}to{transform:translateZ(0)}}.motile-popover-content[data-placement=right][data-align=center][data-positioned=true][data-bounce=false]{animation:popover-fade-in-right-center .2s ease-out}.motile-popover-content[data-placement=right][data-align=start][data-positioned=true][data-bounce=false]{animation:popover-fade-in-right-start .2s ease-out}.motile-popover-content[data-placement=right][data-align=end][data-positioned=true][data-bounce=false]{animation:popover-fade-in-right-end .2s ease-out}@keyframes popover-fade-in-right-center{0%{opacity:0;transform:translate3d(-8px,-50%,0)}to{opacity:1;transform:translate3d(0,-50%,0)}}@keyframes popover-fade-in-right-start{0%{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes popover-fade-in-right-end{0%{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:translateZ(0)}}.motile-popover-content[data-placement=right][data-align=center][data-positioned=true][data-bounce=true]{animation:popover-bounce-right-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=right][data-align=start][data-positioned=true][data-bounce=true]{animation:popover-bounce-right-start .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=right][data-align=end][data-positioned=true][data-bounce=true]{animation:popover-bounce-right-end .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}@keyframes popover-bounce-right-center{0%{transform:translate3d(0,-50%,0)}30%{transform:translate3d(10px,-50%,0)}50%{transform:translate3d(0,-50%,0)}65%{transform:translate3d(3px,-50%,0)}80%{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,-50%,0)}}@keyframes popover-bounce-right-start{0%{transform:translateZ(0)}30%{transform:translate3d(10px,0,0)}50%{transform:translateZ(0)}65%{transform:translate3d(3px,0,0)}80%{transform:translateZ(0)}to{transform:translateZ(0)}}@keyframes popover-bounce-right-end{0%{transform:translateZ(0)}30%{transform:translate3d(10px,0,0)}50%{transform:translateZ(0)}65%{transform:translate3d(3px,0,0)}80%{transform:translateZ(0)}to{transform:translateZ(0)}}.motile-popover-arrow{position:absolute;width:12px;height:12px;transform:rotate(45deg)}.motile-popover-content--default .motile-popover-arrow{background:var(--motile-popover-color, var(--motile-ui-popover, #3b82f6));border:1px solid var(--motile-popover-color, var(--motile-ui-popover, #3b82f6))}.motile-popover-content--outlined .motile-popover-arrow{background:#fff;border:1px solid var(--motile-popover-color, var(--motile-ui-popover, #e5e7eb))}.motile-popover-arrow[data-placement=top]{bottom:-7px;border-top:none;border-left:none}.motile-popover-arrow[data-placement=top][data-align=start]{left:20px}.motile-popover-arrow[data-placement=top][data-align=center]{left:50%;transform:translate(-50%) rotate(45deg)}.motile-popover-arrow[data-placement=top][data-align=end]{right:20px}.motile-popover-arrow[data-placement=bottom]{top:-7px;border-bottom:none;border-right:none}.motile-popover-arrow[data-placement=bottom][data-align=start]{left:20px}.motile-popover-arrow[data-placement=bottom][data-align=center]{left:50%;transform:translate(-50%) rotate(45deg)}.motile-popover-arrow[data-placement=bottom][data-align=end]{right:20px}.motile-popover-arrow[data-placement=left]{right:-7px;border-left:none;border-bottom:none}.motile-popover-arrow[data-placement=left][data-align=start]{top:20px}.motile-popover-arrow[data-placement=left][data-align=center]{top:50%;transform:translateY(-50%) rotate(45deg)}.motile-popover-arrow[data-placement=left][data-align=end]{bottom:20px}.motile-popover-arrow[data-placement=right]{left:-7px;border-right:none;border-top:none}.motile-popover-arrow[data-placement=right][data-align=start]{top:20px}.motile-popover-arrow[data-placement=right][data-align=center]{top:50%;transform:translateY(-50%) rotate(45deg)}.motile-popover-arrow[data-placement=right][data-align=end]{bottom:20px}.motile-drawer__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000;transition:background-color .3s ease;overscroll-behavior:contain;touch-action:pan-y}.motile-drawer__overlay--visible{background-color:#0006}.motile-drawer__content{position:fixed;bottom:0;left:0;right:0;margin:0 auto;transform:translateY(100%);width:100%;max-width:var(--drawer-max-width, var(--drawer-width, 480px));height:auto;max-height:var(--drawer-max-height, 70dvh);background-color:#fff;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px #00000026;display:flex;flex-direction:column;transition:transform .3s ease;will-change:transform;overscroll-behavior:contain;box-sizing:border-box}.motile-drawer__content--visible{transform:translateY(0)}@media (max-width: 768px){.motile-drawer__overlay{top:0;left:0;right:0;bottom:0;width:100%;height:100%}.motile-drawer__content{left:0;right:0;margin:0;width:100%;max-width:none;border-radius:20px 20px 0 0}}.motile-drawer__header{height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:grab;user-select:none;-webkit-user-select:none}.motile-drawer__header:active{cursor:grabbing}.motile-drawer__handle{width:40px;height:6px;background-color:#d1d5db;border-radius:3px;transition:background-color .2s ease}.motile-drawer__header:hover .motile-drawer__handle{background-color:#9ca3af}.motile-drawer__header:active .motile-drawer__handle{background-color:#6b7280}.motile-drawer__title-wrapper{padding:0 24px 16px;flex-shrink:0;border-bottom:1px solid #e5e7eb;width:100%;box-sizing:border-box}.motile-drawer__title{margin:0;font-size:16px;font-weight:600;color:#111827;line-height:1.4}@media (max-width: 768px){.motile-drawer__title{font-size:15px}}.motile-drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:100%;box-sizing:border-box}.motile-drawer__body::-webkit-scrollbar{width:6px}.motile-drawer__body::-webkit-scrollbar-track{background:transparent}.motile-drawer__body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.motile-drawer__body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}@media (prefers-color-scheme: dark){.motile-drawer__content{background-color:#1f2937;box-shadow:0 -8px 30px #00000080}.motile-drawer__title{color:#f9fafb}.motile-drawer__title-wrapper{border-bottom-color:#374151}.motile-drawer__handle{background-color:#4b5563}.motile-drawer__header:hover .motile-drawer__handle{background-color:#6b7280}.motile-drawer__header:active .motile-drawer__handle{background-color:#9ca3af}.motile-drawer__body::-webkit-scrollbar-thumb{background-color:#fff3}.motile-drawer__body::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}}@media (prefers-reduced-motion: reduce){.motile-drawer__content,.motile-drawer__overlay{transition:none}}@media (hover: none) and (pointer: coarse){.motile-drawer__header{height:56px}.motile-drawer__handle{width:48px;height:7px}}.motile-sheet__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000;transition:background-color .3s ease;overscroll-behavior:contain;display:flex}.motile-sheet__overlay--left{justify-content:flex-start}.motile-sheet__overlay--right{justify-content:flex-end}.motile-sheet__overlay--visible{background-color:#0006}.motile-sheet__content{position:fixed;top:0;bottom:0;margin:0;width:100%;max-width:var(--sheet-max-width, 600px);height:100vh;height:100dvh;background-color:#fff;box-shadow:0 0 30px #00000026;display:flex;flex-direction:column;transition:transform .3s ease;will-change:transform;overscroll-behavior:contain;box-sizing:border-box}.motile-sheet__content--left{left:0;border-right:1px solid #e5e7eb;transform:translate(-100%)}.motile-sheet__content--left.motile-sheet__content--visible{transform:translate(0)}.motile-sheet__content--right{right:0;border-left:1px solid #e5e7eb;transform:translate(100%)}.motile-sheet__content--right.motile-sheet__content--visible{transform:translate(0)}@media (max-width: 768px){.motile-sheet__content{max-width:none;width:100%}}.motile-sheet__header{height:56px;display:flex;align-items:center;padding:0 20px;flex-shrink:0;border-bottom:1px solid #e5e7eb;background-color:#fff;user-select:none;-webkit-user-select:none}.motile-sheet__header button{color:inherit}@media (min-width: 769px){.motile-sheet__header{height:64px;padding:0 24px}}.motile-sheet__back-button{display:flex;align-items:center;gap:12px;background:none;border:none;padding:8px 12px 8px 4px;margin-left:-4px;cursor:pointer;border-radius:8px;color:#111827;transition:all .2s ease;font-size:16px;font-weight:600}.motile-sheet__back-button:hover{background-color:#f3f4f6}.motile-sheet__back-button:active{transform:scale(.98)}.motile-sheet__chevron{width:24px;height:24px;flex-shrink:0}.motile-sheet__title{margin:0;font-size:18px;font-weight:600;color:#111827;line-height:1.4}@media (max-width: 768px){.motile-sheet__title{font-size:16px}}.motile-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:100%;box-sizing:border-box;background-color:#fff}@media (min-width: 769px){.motile-sheet__body{padding:20px 24px}}.motile-sheet__body::-webkit-scrollbar{width:6px}.motile-sheet__body::-webkit-scrollbar-track{background:transparent}.motile-sheet__body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.motile-sheet__body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}@media (prefers-color-scheme: dark){.motile-sheet__content{background-color:#1f2937;box-shadow:0 0 30px #00000080}.motile-sheet__content--left{border-right-color:#374151}.motile-sheet__content--right{border-left-color:#374151}.motile-sheet__header{background-color:#1f2937;border-bottom-color:#374151}.motile-sheet__back-button{color:#f9fafb}.motile-sheet__back-button:hover{background-color:#374151}.motile-sheet__title{color:#f9fafb}.motile-sheet__body{background-color:#1f2937}.motile-sheet__body::-webkit-scrollbar-thumb{background-color:#fff3}.motile-sheet__body::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}}@media (prefers-reduced-motion: reduce){.motile-sheet__content,.motile-sheet__overlay{transition:none}}@media (hover: none) and (pointer: coarse){.motile-sheet__header{height:60px}.motile-sheet__chevron{width:26px;height:26px}}.motile-modal__backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:0 16px;box-sizing:border-box;overscroll-behavior:contain}.motile-modal__backdrop[data-variant=scale]{animation:motile-modal-fade-in .2s ease-out}.motile-modal__backdrop[data-variant=slideDown],.motile-modal__backdrop[data-variant=slideUp]{animation:motile-modal-fade-in .3s ease-out}.motile-modal__backdrop[data-variant=bottomSheet]{animation:motile-modal-fade-in .3s ease-out;align-items:flex-end;padding:0}@media (min-width: 769px){.motile-modal__backdrop{padding:0 24px}}.motile-modal{position:relative;z-index:1001;width:var(--modal-width);max-width:var(--modal-max-width, 100%)}.motile-modal[data-variant=scale]{animation:motile-modal-scale-in .25s ease-out}.motile-modal[data-variant=slideDown]{animation:motile-modal-slide-down .55s cubic-bezier(.34,1.3,.64,1)}.motile-modal[data-variant=slideUp]{animation:motile-modal-slide-up .5s cubic-bezier(.34,1.3,.64,1)}.motile-modal[data-variant=bottomSheet]{animation:motile-modal-bottom-sheet .35s cubic-bezier(.32,.72,0,1);width:var(--modal-width, 100%);max-width:var(--modal-max-width, 100%)}@media (min-width: 769px){.motile-modal[data-variant=bottomSheet]{width:var(--modal-width, 100%);max-width:var(--modal-max-width, var(--modal-width, 480px))}}@media (max-width: 768px){.motile-modal[data-variant=bottomSheet]{width:100%;max-width:none}}.motile-modal__content{background-color:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-height:calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(90dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.motile-modal[data-variant=bottomSheet] .motile-modal__content{border-radius:20px 20px 0 0;max-height:90vh;max-height:calc(90vh - env(safe-area-inset-top));max-height:calc(90dvh - env(safe-area-inset-top));box-shadow:0 -10px 25px -5px #0000001a,0 -4px 10px -5px #0000000a}.motile-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #e5e7eb;flex-shrink:0}.motile-modal__title{font-size:1rem;font-weight:600;color:#111827;margin:0;line-height:1.4}.motile-modal__close{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;margin:-8px;border-radius:8px;color:#6b7280;transition:all .15s ease}.motile-modal__close:hover{background-color:#f3f4f6;color:#111827}.motile-modal__close:active{transform:scale(.95)}.motile-modal__close:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.motile-modal__body{padding:24px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;color:#374151;line-height:1.6;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.motile-modal__body::-webkit-scrollbar{width:6px}.motile-modal__body::-webkit-scrollbar-track{background:transparent}.motile-modal__body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.motile-modal__body::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.motile-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 16px;border-top:1px solid #e5e7eb;flex-shrink:0}@keyframes motile-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes motile-modal-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes motile-modal-slide-down{0%{opacity:0;transform:translateY(-100vh)}to{opacity:1;transform:translateY(0)}}@keyframes motile-modal-slide-up{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes motile-modal-bottom-sheet{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.motile-modal__backdrop[data-variant=scale],.motile-modal__backdrop[data-variant=slideDown],.motile-modal__backdrop[data-variant=slideUp],.motile-modal__backdrop[data-variant=bottomSheet]{animation:none}.motile-modal[data-variant=scale],.motile-modal[data-variant=slideDown],.motile-modal[data-variant=slideUp],.motile-modal[data-variant=bottomSheet]{animation:none;opacity:1;transform:none}.motile-modal__close:active{transform:none}}@media (prefers-contrast: high){.motile-modal__content{border:2px solid #000000}.motile-modal__header{border-bottom-width:2px}.motile-modal__footer{border-top-width:2px}.motile-modal__title{font-weight:700}}@media (max-width: 768px){.motile-modal__content{border-radius:16px}.motile-modal__header,.motile-modal__body,.motile-modal__footer{padding:20px}.motile-modal__title{font-size:1.125rem}.motile-modal__close:active{background-color:#e5e7eb}}@media (max-width: 390px){.motile-modal__backdrop{padding:0 12px}.motile-modal__header,.motile-modal__body,.motile-modal__footer{padding:16px}.motile-modal__title{font-size:1rem}}@media (hover: none) and (pointer: coarse){.motile-modal__close{min-width:44px;min-height:44px;padding:10px}}@supports (-webkit-touch-callout: none){.motile-modal__close{-webkit-tap-highlight-color:transparent}.motile-modal__content{margin-bottom:env(safe-area-inset-bottom)}}@media (max-height: 600px) and (orientation: landscape){.motile-modal__content{max-height:85vh;max-height:85dvh;border-radius:8px}.motile-modal__header,.motile-modal__body,.motile-modal__footer{padding:16px 24px}.motile-modal__title{font-size:1rem}}@media (prefers-color-scheme: dark){.motile-modal__backdrop{background-color:#000000bf}.motile-modal__content{background-color:#1f2937;box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0000004d}.motile-modal__header{border-bottom-color:#374151}.motile-modal__title{color:#f9fafb}.motile-modal__close{color:#9ca3af}.motile-modal__close:hover{background-color:#374151;color:#f9fafb}.motile-modal__body{color:#e5e7eb}.motile-modal__footer{border-top-color:#374151}.motile-modal__body::-webkit-scrollbar-thumb{background-color:#fff3}.motile-modal__body::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}}.motile-toast-container{position:fixed;pointer-events:none;display:flex;flex-direction:column;gap:8px}.motile-toast-container{top:0;left:0;right:0;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 16px 16px}@media (min-width: 768px){.motile-toast-container{top:0;left:auto;right:0;align-items:flex-end;padding:16px;max-width:400px}}.motile-toast{pointer-events:auto;display:inline-flex;align-items:flex-start;width:calc(100vw - 32px);min-width:200px;padding:12px 16px;background:#000000d9;border-radius:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 8px #00000026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;animation:slideDown .3s ease-out}@media (min-width: 768px){.motile-toast{width:auto;max-width:320px;animation:slideInRight .3s ease-out}}.motile-toast--exiting{animation:fadeOut .15s ease-out forwards}.motile-toast__icon{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#fff;margin-right:8px;margin-top:1px}.motile-toast--success .motile-toast__icon{color:#4ade80}.motile-toast--error .motile-toast__icon{color:#f87171}.motile-toast--warning .motile-toast__icon{color:#fbbf24}.motile-toast--info .motile-toast__icon{color:#60a5fa}.motile-toast__message{flex:1;min-width:0;font-size:14px;font-weight:500;line-height:1.4;color:#fff;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word}@keyframes slideDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOut{to{opacity:0;transform:scale(.95)}}@media (prefers-color-scheme: dark){.motile-toast{background:#fffffff2}.motile-toast__message,.motile-toast__icon{color:#18181b}.motile-toast--success .motile-toast__icon{color:#22c55e}.motile-toast--error .motile-toast__icon{color:#ef4444}.motile-toast--warning .motile-toast__icon{color:#f59e0b}.motile-toast--info .motile-toast__icon{color:#3b82f6}}@media (prefers-reduced-motion: reduce){.motile-toast{animation:none!important}}.motile-toast *{user-select:none;-webkit-user-select:none}.motile-dock{display:inline-flex;align-items:center;gap:12px;padding:8px 16px;background:#ffffff40;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:50px;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000001a,0 2px 8px #0000000d,inset 0 0 0 1px #fff3;position:relative;-webkit-user-select:none;user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.motile-dock[data-position=top],.motile-dock[data-position=bottom]{flex-direction:row}.motile-dock[data-position=left],.motile-dock[data-position=right]{flex-direction:column}.motile-dock__item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;border:none;border-radius:10px;background:transparent;color:#374151;cursor:pointer;transition:background .2s ease;outline:none;will-change:transform;transform:translateZ(0)}.motile-dock[data-position=top] .motile-dock__item{transform-origin:center top}.motile-dock[data-position=bottom] .motile-dock__item{transform-origin:center bottom}.motile-dock[data-position=left] .motile-dock__item{transform-origin:left center}.motile-dock[data-position=right] .motile-dock__item{transform-origin:right center}.motile-dock__item:hover{background:#fff6}.motile-dock__item:active{background:#fff9;filter:brightness(.9)}.motile-dock__item:focus-visible{outline:2px solid rgba(100,116,139,.6);outline-offset:2px}.motile-dock__item>*{pointer-events:none}.motile-dock__separator{position:relative;flex-shrink:0}.motile-dock__separator[data-position=top],.motile-dock__separator[data-position=bottom]{width:1px;height:40px;margin:0 6px;background:linear-gradient(to bottom,#0000,#00000026 20%,#00000026 80%,#0000)}.motile-dock__separator[data-position=left],.motile-dock__separator[data-position=right]{height:1px;width:40px;margin:6px 0;background:linear-gradient(to right,#0000,#00000026 20%,#00000026 80%,#0000)}@media (prefers-color-scheme: dark){.motile-dock{background:#1e1e1eb3;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006,0 2px 8px #0003,inset 0 0 0 1px #ffffff0d}.motile-dock__item{color:#e5e7eb}.motile-dock__item:hover{background:#ffffff1a}.motile-dock__item:active{background:#fff3;filter:brightness(.9)}.motile-dock__separator[data-position=top],.motile-dock__separator[data-position=bottom]{background:linear-gradient(to bottom,#fff0,#ffffff26 20%,#ffffff26 80%,#fff0)}.motile-dock__separator[data-position=left],.motile-dock__separator[data-position=right]{background:linear-gradient(to right,#fff0,#ffffff26 20%,#ffffff26 80%,#fff0)}}@media (prefers-contrast: high){.motile-dock{border:2px solid currentColor;background:#fffffff2}.motile-dock__item{border:1px solid currentColor}}@media (prefers-reduced-motion: reduce){.motile-dock,.motile-dock__item{transition:none}}@media (max-width: 768px){.motile-dock{gap:6px;padding:6px 12px;border-radius:40px}.motile-dock__item{width:36px;height:36px;min-width:36px;min-height:36px}}@media (hover: none) and (pointer: coarse){.motile-dock__item{min-width:44px;min-height:44px;transform:scale(1)!important}}.motile-dock:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50px;padding:1px;background:linear-gradient(135deg,#fff6,#ffffff1a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@media (prefers-color-scheme: dark){.motile-dock:before{background:linear-gradient(135deg,#fff3,#ffffff0d)}}.motile-dock__item:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:14px;background:radial-gradient(circle at center,color-mix(in srgb,var( --motile-dock-color, var(--motile-ui-dock, var(--motile-theme, #3b82f6)) ) 30%,transparent),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}.motile-dock__item:hover:before{opacity:1}@media (prefers-contrast: high){.motile-dock__item:before{display:none}.motile-dock:before{display:none}}.motile-speed-dial{position:relative;display:inline-flex;align-items:center;justify-content:center}.motile-speed-dial__trigger{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:none;border-radius:50%;background-color:var(--motile-speeddial-color, var(--motile-theme, #3b82f6));color:#fff;box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:16px;font-weight:500}.motile-speed-dial__trigger:hover{filter:brightness(.9);box-shadow:0 6px 16px #0003,0 3px 6px #00000026;transform:scale(1.05)}.motile-speed-dial__trigger:active{filter:brightness(.85);transform:scale(.95);box-shadow:0 2px 8px #00000026,0 1px 3px #0000001a}.motile-speed-dial__trigger[aria-expanded=true]{filter:brightness(.75);transform:rotate(45deg)}.motile-speed-dial__actions{position:absolute;display:flex;gap:12px;z-index:1}.motile-speed-dial__actions[data-direction=up]{flex-direction:column-reverse;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:12px}.motile-speed-dial__actions[data-direction=down]{flex-direction:column;top:100%;left:50%;transform:translate(-50%);margin-top:12px}.motile-speed-dial__actions[data-direction=left]{flex-direction:row-reverse;right:100%;top:50%;transform:translateY(-50%);margin-right:12px}.motile-speed-dial__actions[data-direction=right]{flex-direction:row;left:100%;top:50%;transform:translateY(-50%);margin-left:12px}.motile-speed-dial__action{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:none;border-radius:50%;background-color:#fff;color:#374151;box-shadow:0 2px 8px #0000001a,0 1px 3px #00000014;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:14px}.motile-speed-dial__action:hover{background-color:#f3f4f6;box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;transform:scale(1.08)}.motile-speed-dial__action:active{transform:scale(.95);box-shadow:0 1px 4px #0000001a,0 0 2px #00000014}.motile-speed-dial__actions[data-direction=up] .motile-speed-dial__action{animation:motile-speed-dial-slide-up .3s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--action-index) * .05s)}.motile-speed-dial__actions[data-direction=down] .motile-speed-dial__action{animation:motile-speed-dial-slide-down .3s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--action-index) * .05s)}.motile-speed-dial__actions[data-direction=left] .motile-speed-dial__action{animation:motile-speed-dial-slide-left .3s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--action-index) * .05s)}.motile-speed-dial__actions[data-direction=right] .motile-speed-dial__action{animation:motile-speed-dial-slide-right .3s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--action-index) * .05s)}@keyframes motile-speed-dial-slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes motile-speed-dial-slide-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes motile-speed-dial-slide-left{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes motile-speed-dial-slide-right{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion: reduce){.motile-speed-dial__actions[data-direction=up] .motile-speed-dial__action,.motile-speed-dial__actions[data-direction=down] .motile-speed-dial__action,.motile-speed-dial__actions[data-direction=left] .motile-speed-dial__action,.motile-speed-dial__actions[data-direction=right] .motile-speed-dial__action{animation:none}}.motile-speed-dial__trigger:focus-visible,.motile-speed-dial__action:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-color-scheme: dark){.motile-speed-dial__trigger{box-shadow:0 4px 12px #0000004d,0 2px 4px #0003}.motile-speed-dial__trigger:hover{box-shadow:0 6px 16px #0006,0 3px 6px #0000004d}.motile-speed-dial__action{background-color:#374151;color:#f9fafb;box-shadow:0 2px 8px #0000004d,0 1px 3px #0003}.motile-speed-dial__action:hover{background-color:#4b5563;box-shadow:0 4px 12px #0006,0 2px 4px #0000004d}}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
-
import
|
|
3
|
-
import { jsx as d, jsxs as I, Fragment as he } from "react/jsx-runtime";
|
|
1
|
+
import B, { forwardRef as j, useId as X, useRef as M, useEffect as I, useState as T, useMemo as ee, useLayoutEffect as pe, useCallback as k, createContext as q, useContext as U } from "react";
|
|
2
|
+
import { jsx as c, jsxs as L, Fragment as he } from "react/jsx-runtime";
|
|
4
3
|
import { createPortal as te } from "react-dom";
|
|
5
|
-
const K = B.forwardRef(
|
|
4
|
+
import './index.css';const K = B.forwardRef(
|
|
6
5
|
({ children: e, ...o }, n) => {
|
|
7
6
|
if (!B.isValidElement(e))
|
|
8
7
|
return null;
|
|
@@ -53,52 +52,52 @@ const rt = B.forwardRef(
|
|
|
53
52
|
asChild: a = !1,
|
|
54
53
|
children: i,
|
|
55
54
|
className: l,
|
|
56
|
-
disabled:
|
|
57
|
-
style:
|
|
55
|
+
disabled: p,
|
|
56
|
+
style: d,
|
|
58
57
|
...u
|
|
59
58
|
}, f) => {
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
`${
|
|
63
|
-
`${
|
|
64
|
-
h && `${
|
|
65
|
-
(
|
|
66
|
-
s && `${
|
|
67
|
-
r && `${
|
|
59
|
+
const m = "motile-btn", h = n ?? o === "large", w = [
|
|
60
|
+
m,
|
|
61
|
+
`${m}--${e}`,
|
|
62
|
+
`${m}--${o}`,
|
|
63
|
+
h && `${m}--full-width`,
|
|
64
|
+
(p || s) && `${m}--disabled`,
|
|
65
|
+
s && `${m}--loading`,
|
|
66
|
+
r && `${m}--hover-on-touch`,
|
|
68
67
|
l
|
|
69
|
-
].filter(Boolean).join(" "),
|
|
70
|
-
...
|
|
68
|
+
].filter(Boolean).join(" "), v = {
|
|
69
|
+
...d,
|
|
71
70
|
...t && { "--motile-btn-color": t }
|
|
72
71
|
};
|
|
73
|
-
return a ? /* @__PURE__ */
|
|
72
|
+
return a ? /* @__PURE__ */ c(K, { ref: f, className: w, style: v, ...u, children: i }) : /* @__PURE__ */ c(
|
|
74
73
|
"button",
|
|
75
74
|
{
|
|
76
75
|
ref: f,
|
|
77
76
|
type: "button",
|
|
78
77
|
className: w,
|
|
79
|
-
disabled:
|
|
78
|
+
disabled: p || s,
|
|
80
79
|
"aria-busy": s || void 0,
|
|
81
|
-
style:
|
|
80
|
+
style: v,
|
|
82
81
|
...u,
|
|
83
|
-
children: /* @__PURE__ */
|
|
84
|
-
/* @__PURE__ */
|
|
82
|
+
children: /* @__PURE__ */ L("span", { className: `${m}__wrapper`, children: [
|
|
83
|
+
/* @__PURE__ */ c(
|
|
85
84
|
"span",
|
|
86
85
|
{
|
|
87
|
-
className: `${
|
|
86
|
+
className: `${m}__content`,
|
|
88
87
|
style: { opacity: s ? 0 : 1 },
|
|
89
88
|
children: i
|
|
90
89
|
}
|
|
91
90
|
),
|
|
92
|
-
s && /* @__PURE__ */
|
|
91
|
+
s && /* @__PURE__ */ c(
|
|
93
92
|
"span",
|
|
94
93
|
{
|
|
95
|
-
className: `${
|
|
94
|
+
className: `${m}__loading`,
|
|
96
95
|
role: "status",
|
|
97
96
|
"aria-label": "Loading",
|
|
98
|
-
children: /* @__PURE__ */
|
|
99
|
-
/* @__PURE__ */
|
|
100
|
-
/* @__PURE__ */
|
|
101
|
-
/* @__PURE__ */
|
|
97
|
+
children: /* @__PURE__ */ L("span", { className: `${m}__dots`, children: [
|
|
98
|
+
/* @__PURE__ */ c("span", { className: `${m}__dot` }),
|
|
99
|
+
/* @__PURE__ */ c("span", { className: `${m}__dot` }),
|
|
100
|
+
/* @__PURE__ */ c("span", { className: `${m}__dot` })
|
|
102
101
|
] })
|
|
103
102
|
}
|
|
104
103
|
)
|
|
@@ -119,103 +118,103 @@ const st = j(
|
|
|
119
118
|
onClear: a,
|
|
120
119
|
leftIcon: i,
|
|
121
120
|
rightIcon: l,
|
|
122
|
-
className:
|
|
123
|
-
value:
|
|
121
|
+
className: p,
|
|
122
|
+
value: d,
|
|
124
123
|
color: u,
|
|
125
124
|
style: f,
|
|
126
|
-
maxLength:
|
|
125
|
+
maxLength: m,
|
|
127
126
|
label: h,
|
|
128
127
|
placeholder: w,
|
|
129
|
-
...
|
|
128
|
+
...v
|
|
130
129
|
}, y) => {
|
|
131
|
-
const x = X().replace(/:/g, ""), $ = e ?? `motile-input-${x}`, N =
|
|
132
|
-
|
|
130
|
+
const x = X().replace(/:/g, ""), $ = e ?? `motile-input-${x}`, N = M(null), _ = y || N, b = r ?? !!s;
|
|
131
|
+
I(() => {
|
|
133
132
|
if (o && _.current) {
|
|
134
|
-
const
|
|
133
|
+
const D = setTimeout(() => {
|
|
135
134
|
_.current && (_.current.focus(), n && _.current.select());
|
|
136
135
|
}, 50);
|
|
137
|
-
return () => clearTimeout(
|
|
136
|
+
return () => clearTimeout(D);
|
|
138
137
|
}
|
|
139
138
|
}, [o, n]);
|
|
140
|
-
const
|
|
141
|
-
|
|
142
|
-
`${
|
|
143
|
-
b && `${
|
|
144
|
-
b && `${
|
|
145
|
-
R && `${
|
|
146
|
-
H && `${
|
|
147
|
-
h && `${
|
|
148
|
-
|
|
139
|
+
const g = "motile-input", V = a && d, R = !!i, H = V || l, Y = [
|
|
140
|
+
g,
|
|
141
|
+
`${g}--${t}`,
|
|
142
|
+
b && `${g}--error`,
|
|
143
|
+
b && `${g}--shake`,
|
|
144
|
+
R && `${g}--with-left-icon`,
|
|
145
|
+
H && `${g}--with-right-content`,
|
|
146
|
+
h && `${g}--with-label`,
|
|
147
|
+
p
|
|
149
148
|
].filter(Boolean).join(" "), O = [
|
|
150
|
-
`${
|
|
151
|
-
h && `${
|
|
149
|
+
`${g}-wrapper`,
|
|
150
|
+
h && `${g}-wrapper--with-label`
|
|
152
151
|
].filter(Boolean).join(" "), C = [
|
|
153
|
-
`${
|
|
154
|
-
b && `${
|
|
155
|
-
].filter(Boolean).join(" "),
|
|
152
|
+
`${g}__label`,
|
|
153
|
+
b && `${g}__label--error`
|
|
154
|
+
].filter(Boolean).join(" "), E = u ? { "--motile-input-color": u } : void 0, A = {
|
|
156
155
|
...f
|
|
157
|
-
}, z =
|
|
158
|
-
|
|
156
|
+
}, z = d ? String(d).length : 0, P = m !== void 0, S = [
|
|
157
|
+
v["aria-describedby"],
|
|
159
158
|
s ? `${$}-error` : void 0,
|
|
160
159
|
P ? `${$}-counter` : void 0
|
|
161
160
|
].filter(Boolean).join(" ") || void 0;
|
|
162
|
-
return /* @__PURE__ */
|
|
163
|
-
/* @__PURE__ */
|
|
164
|
-
h && /* @__PURE__ */
|
|
165
|
-
i && /* @__PURE__ */
|
|
166
|
-
/* @__PURE__ */
|
|
161
|
+
return /* @__PURE__ */ L(he, { children: [
|
|
162
|
+
/* @__PURE__ */ L("div", { className: O, style: E, children: [
|
|
163
|
+
h && /* @__PURE__ */ c("label", { className: C, htmlFor: $, children: h }),
|
|
164
|
+
i && /* @__PURE__ */ c("div", { className: `${g}__left-icon`, children: i }),
|
|
165
|
+
/* @__PURE__ */ c(
|
|
167
166
|
"input",
|
|
168
167
|
{
|
|
169
168
|
id: $,
|
|
170
|
-
...
|
|
169
|
+
...v,
|
|
171
170
|
"aria-describedby": S,
|
|
172
171
|
"aria-invalid": b || void 0,
|
|
173
172
|
ref: _,
|
|
174
173
|
className: Y,
|
|
175
|
-
value:
|
|
176
|
-
maxLength:
|
|
174
|
+
value: d,
|
|
175
|
+
maxLength: m,
|
|
177
176
|
style: A,
|
|
178
177
|
placeholder: h ? w || " " : w
|
|
179
178
|
}
|
|
180
179
|
),
|
|
181
|
-
l && !V && /* @__PURE__ */
|
|
182
|
-
V && /* @__PURE__ */
|
|
180
|
+
l && !V && /* @__PURE__ */ c("div", { className: `${g}__right-icon`, children: l }),
|
|
181
|
+
V && /* @__PURE__ */ c(
|
|
183
182
|
"button",
|
|
184
183
|
{
|
|
185
184
|
type: "button",
|
|
186
185
|
onClick: a,
|
|
187
|
-
className: `${
|
|
186
|
+
className: `${g}__clear-button`,
|
|
188
187
|
"aria-label": "지우기",
|
|
189
|
-
children: /* @__PURE__ */
|
|
188
|
+
children: /* @__PURE__ */ c(
|
|
190
189
|
"svg",
|
|
191
190
|
{
|
|
192
|
-
className: `${
|
|
191
|
+
className: `${g}__clear-icon`,
|
|
193
192
|
viewBox: "0 0 20 20",
|
|
194
193
|
fill: "currentColor",
|
|
195
|
-
children: /* @__PURE__ */
|
|
194
|
+
children: /* @__PURE__ */ c("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
|
|
196
195
|
}
|
|
197
196
|
)
|
|
198
197
|
}
|
|
199
198
|
)
|
|
200
199
|
] }),
|
|
201
|
-
(s || P) && /* @__PURE__ */
|
|
200
|
+
(s || P) && /* @__PURE__ */ L(
|
|
202
201
|
"div",
|
|
203
202
|
{
|
|
204
|
-
className: `${
|
|
203
|
+
className: `${g}__helper-text ${s && P ? `${g}__helper-text--both` : s ? `${g}__helper-text--error-only` : `${g}__helper-text--counter-only`}`,
|
|
205
204
|
children: [
|
|
206
|
-
s && /* @__PURE__ */
|
|
205
|
+
s && /* @__PURE__ */ c(
|
|
207
206
|
"span",
|
|
208
207
|
{
|
|
209
208
|
id: `${$}-error`,
|
|
210
|
-
className: `${
|
|
209
|
+
className: `${g}__error-message`,
|
|
211
210
|
role: "alert",
|
|
212
211
|
children: s
|
|
213
212
|
}
|
|
214
213
|
),
|
|
215
|
-
P && /* @__PURE__ */
|
|
214
|
+
P && /* @__PURE__ */ L("span", { id: `${$}-counter`, className: `${g}__counter`, children: [
|
|
216
215
|
z,
|
|
217
216
|
"/",
|
|
218
|
-
|
|
217
|
+
m
|
|
219
218
|
] })
|
|
220
219
|
]
|
|
221
220
|
}
|
|
@@ -235,18 +234,18 @@ const it = j(
|
|
|
235
234
|
color: a,
|
|
236
235
|
style: i,
|
|
237
236
|
maxLength: l,
|
|
238
|
-
label:
|
|
239
|
-
placeholder:
|
|
237
|
+
label: p,
|
|
238
|
+
placeholder: d,
|
|
240
239
|
rows: u = 4,
|
|
241
240
|
resize: f = "none",
|
|
242
|
-
autoSize:
|
|
241
|
+
autoSize: m = !1,
|
|
243
242
|
...h
|
|
244
243
|
}, w) => {
|
|
245
|
-
const
|
|
246
|
-
minRows:
|
|
247
|
-
maxRows:
|
|
248
|
-
} : void 0, [
|
|
249
|
-
|
|
244
|
+
const v = M(null), y = w || v, [x, $] = T({ height: void 0, isMaxHeight: !1 }), N = n ?? !!t, _ = ee(() => typeof m == "boolean" ? m ? { minRows: u, maxRows: void 0 } : void 0 : m ? {
|
|
245
|
+
minRows: m.minRows ?? u,
|
|
246
|
+
maxRows: m.maxRows
|
|
247
|
+
} : void 0, [m, u]);
|
|
248
|
+
I(() => {
|
|
250
249
|
if (e && y.current) {
|
|
251
250
|
const A = setTimeout(() => {
|
|
252
251
|
y.current && (y.current.focus(), o && y.current.select());
|
|
@@ -257,19 +256,19 @@ const it = j(
|
|
|
257
256
|
if (!_ || !y.current) return;
|
|
258
257
|
const A = y.current;
|
|
259
258
|
A.style.height = "auto";
|
|
260
|
-
const z = A.scrollHeight, P = window.getComputedStyle(A), S = parseInt(P.lineHeight, 10),
|
|
259
|
+
const z = A.scrollHeight, P = window.getComputedStyle(A), S = parseInt(P.lineHeight, 10), D = parseInt(P.paddingTop, 10), F = parseInt(P.paddingBottom, 10), ie = parseInt(P.borderTopWidth, 10), ae = parseInt(P.borderBottomWidth, 10), fe = D + F + ie + ae, le = _.minRows ? S * _.minRows + fe : void 0, ce = _.maxRows ? S * _.maxRows + fe : void 0;
|
|
261
260
|
let Z = z, de = !1;
|
|
262
261
|
le !== void 0 && Z < le && (Z = le), ce !== void 0 && Z > ce && (Z = ce, de = !0), A.style.height = `${Z}px`, $((ue) => Z !== ue.height || de !== ue.isMaxHeight ? { height: Z, isMaxHeight: de } : ue);
|
|
263
262
|
}, [s, _]);
|
|
264
|
-
const b = "motile-textarea",
|
|
263
|
+
const b = "motile-textarea", g = [
|
|
265
264
|
b,
|
|
266
265
|
N && `${b}--error`,
|
|
267
266
|
N && `${b}--shake`,
|
|
268
|
-
|
|
267
|
+
p && `${b}--with-label`,
|
|
269
268
|
r
|
|
270
269
|
].filter(Boolean).join(" "), V = [
|
|
271
270
|
`${b}-wrapper`,
|
|
272
|
-
|
|
271
|
+
p && `${b}-wrapper--with-label`
|
|
273
272
|
].filter(Boolean).join(" "), R = [
|
|
274
273
|
`${b}__label`,
|
|
275
274
|
N && `${b}__label--error`
|
|
@@ -281,34 +280,34 @@ const it = j(
|
|
|
281
280
|
minHeight: "auto",
|
|
282
281
|
overflowY: x.isMaxHeight ? "auto" : "hidden"
|
|
283
282
|
} : {}
|
|
284
|
-
}, O = s ? String(s).length : 0, C = l !== void 0,
|
|
283
|
+
}, O = s ? String(s).length : 0, C = l !== void 0, E = [
|
|
285
284
|
h["aria-describedby"],
|
|
286
285
|
t ? `${b}-error` : void 0
|
|
287
286
|
].filter(Boolean).join(" ") || void 0;
|
|
288
|
-
return /* @__PURE__ */
|
|
289
|
-
/* @__PURE__ */
|
|
290
|
-
|
|
291
|
-
/* @__PURE__ */
|
|
287
|
+
return /* @__PURE__ */ L(he, { children: [
|
|
288
|
+
/* @__PURE__ */ L("div", { className: V, style: H, children: [
|
|
289
|
+
p && /* @__PURE__ */ c("label", { className: R, children: p }),
|
|
290
|
+
/* @__PURE__ */ c(
|
|
292
291
|
"textarea",
|
|
293
292
|
{
|
|
294
293
|
...h,
|
|
295
|
-
"aria-describedby":
|
|
294
|
+
"aria-describedby": E,
|
|
296
295
|
ref: y,
|
|
297
|
-
className:
|
|
296
|
+
className: g,
|
|
298
297
|
value: s,
|
|
299
298
|
maxLength: l,
|
|
300
299
|
rows: u,
|
|
301
300
|
style: Y,
|
|
302
|
-
placeholder:
|
|
301
|
+
placeholder: p ? d || " " : d
|
|
303
302
|
}
|
|
304
303
|
)
|
|
305
304
|
] }),
|
|
306
|
-
(t || C) && /* @__PURE__ */
|
|
305
|
+
(t || C) && /* @__PURE__ */ L(
|
|
307
306
|
"div",
|
|
308
307
|
{
|
|
309
308
|
className: `${b}__helper-text ${t && C ? `${b}__helper-text--both` : t ? `${b}__helper-text--error-only` : `${b}__helper-text--counter-only`}`,
|
|
310
309
|
children: [
|
|
311
|
-
t && /* @__PURE__ */
|
|
310
|
+
t && /* @__PURE__ */ c(
|
|
312
311
|
"span",
|
|
313
312
|
{
|
|
314
313
|
id: `${b}-error`,
|
|
@@ -317,7 +316,7 @@ const it = j(
|
|
|
317
316
|
children: t
|
|
318
317
|
}
|
|
319
318
|
),
|
|
320
|
-
C && /* @__PURE__ */
|
|
319
|
+
C && /* @__PURE__ */ L("span", { className: `${b}__counter`, children: [
|
|
321
320
|
O,
|
|
322
321
|
"/",
|
|
323
322
|
l
|
|
@@ -340,42 +339,42 @@ const at = j(
|
|
|
340
339
|
disabled: a,
|
|
341
340
|
style: i,
|
|
342
341
|
...l
|
|
343
|
-
},
|
|
344
|
-
const
|
|
345
|
-
`${
|
|
346
|
-
`${
|
|
347
|
-
`${
|
|
348
|
-
a && `${
|
|
349
|
-
r && `${
|
|
342
|
+
}, p) => {
|
|
343
|
+
const d = "motile-checkbox", u = [
|
|
344
|
+
`${d}-container`,
|
|
345
|
+
`${d}-container--${e}`,
|
|
346
|
+
`${d}-container--${o}`,
|
|
347
|
+
a && `${d}-container--disabled`,
|
|
348
|
+
r && `${d}-container--filled`
|
|
350
349
|
].filter(Boolean).join(" "), f = [
|
|
351
|
-
|
|
352
|
-
`${
|
|
353
|
-
`${
|
|
354
|
-
r && `${
|
|
350
|
+
d,
|
|
351
|
+
`${d}--${e}`,
|
|
352
|
+
`${d}--${o}`,
|
|
353
|
+
r && `${d}--filled`,
|
|
355
354
|
s
|
|
356
|
-
].filter(Boolean).join(" "),
|
|
357
|
-
`${
|
|
358
|
-
a && `${
|
|
355
|
+
].filter(Boolean).join(" "), m = [
|
|
356
|
+
`${d}__label`,
|
|
357
|
+
a && `${d}__label--disabled`
|
|
359
358
|
].filter(Boolean).join(" ");
|
|
360
|
-
return /* @__PURE__ */
|
|
361
|
-
/* @__PURE__ */
|
|
359
|
+
return /* @__PURE__ */ c("div", { className: u, style: t ? { "--motile-checkbox-color": t } : void 0, children: /* @__PURE__ */ L("label", { className: `${d}-wrapper`, children: [
|
|
360
|
+
/* @__PURE__ */ c(
|
|
362
361
|
"input",
|
|
363
362
|
{
|
|
364
363
|
...l,
|
|
365
|
-
ref:
|
|
364
|
+
ref: p,
|
|
366
365
|
type: "checkbox",
|
|
367
366
|
className: f,
|
|
368
367
|
disabled: a,
|
|
369
368
|
style: i
|
|
370
369
|
}
|
|
371
370
|
),
|
|
372
|
-
/* @__PURE__ */
|
|
371
|
+
/* @__PURE__ */ c("span", { className: `${d}__mark`, children: /* @__PURE__ */ c(
|
|
373
372
|
"svg",
|
|
374
373
|
{
|
|
375
|
-
className: `${
|
|
374
|
+
className: `${d}__check-icon`,
|
|
376
375
|
viewBox: "0 0 16 16",
|
|
377
376
|
fill: "none",
|
|
378
|
-
children: /* @__PURE__ */
|
|
377
|
+
children: /* @__PURE__ */ c(
|
|
379
378
|
"path",
|
|
380
379
|
{
|
|
381
380
|
d: "M13.5 4L6 11.5L2.5 8",
|
|
@@ -387,7 +386,7 @@ const at = j(
|
|
|
387
386
|
)
|
|
388
387
|
}
|
|
389
388
|
) }),
|
|
390
|
-
n && /* @__PURE__ */
|
|
389
|
+
n && /* @__PURE__ */ c("span", { className: m, children: n })
|
|
391
390
|
] }) });
|
|
392
391
|
}
|
|
393
392
|
);
|
|
@@ -398,21 +397,21 @@ const lt = j(
|
|
|
398
397
|
`${i}-container`,
|
|
399
398
|
`${i}-container--${e}`,
|
|
400
399
|
t && `${i}-container--disabled`
|
|
401
|
-
].filter(Boolean).join(" "),
|
|
402
|
-
return /* @__PURE__ */
|
|
403
|
-
/* @__PURE__ */
|
|
400
|
+
].filter(Boolean).join(" "), p = [i, `${i}--${e}`, n].filter(Boolean).join(" ");
|
|
401
|
+
return /* @__PURE__ */ c("div", { className: l, style: o ? { "--motile-switch-color": o } : void 0, children: /* @__PURE__ */ L("label", { className: `${i}-wrapper`, children: [
|
|
402
|
+
/* @__PURE__ */ c(
|
|
404
403
|
"input",
|
|
405
404
|
{
|
|
406
405
|
...s,
|
|
407
406
|
ref: a,
|
|
408
407
|
type: "checkbox",
|
|
409
|
-
className:
|
|
408
|
+
className: p,
|
|
410
409
|
disabled: t,
|
|
411
410
|
style: r,
|
|
412
411
|
role: "switch"
|
|
413
412
|
}
|
|
414
413
|
),
|
|
415
|
-
/* @__PURE__ */
|
|
414
|
+
/* @__PURE__ */ c("span", { className: `${i}__track`, children: /* @__PURE__ */ c("span", { className: `${i}__thumb` }) })
|
|
416
415
|
] }) });
|
|
417
416
|
}
|
|
418
417
|
);
|
|
@@ -433,28 +432,28 @@ const G = "motile-accordion", ye = q(null), we = () => {
|
|
|
433
432
|
children: a,
|
|
434
433
|
asChild: i = !1,
|
|
435
434
|
...l
|
|
436
|
-
},
|
|
437
|
-
const [
|
|
435
|
+
}, p) => {
|
|
436
|
+
const [d, u] = T(o), f = n !== void 0, m = f ? n : d, w = `accordion-panel-${X()}`, v = M(null), y = k(() => {
|
|
438
437
|
if (r) return;
|
|
439
|
-
const N = !
|
|
438
|
+
const N = !m;
|
|
440
439
|
f || u(N), t == null || t(N);
|
|
441
|
-
}, [r,
|
|
440
|
+
}, [r, m, f, t]), x = {
|
|
442
441
|
...l,
|
|
443
|
-
"data-state":
|
|
442
|
+
"data-state": m ? "open" : "closed",
|
|
444
443
|
"data-disabled": r ? "" : void 0,
|
|
445
444
|
"data-variant": e
|
|
446
445
|
}, $ = [
|
|
447
446
|
G,
|
|
448
447
|
`${G}--${e}`,
|
|
449
|
-
|
|
448
|
+
m && `${G}--expanded`,
|
|
450
449
|
r && `${G}--disabled`,
|
|
451
450
|
s
|
|
452
451
|
].filter(Boolean).join(" ");
|
|
453
|
-
return /* @__PURE__ */
|
|
452
|
+
return /* @__PURE__ */ c(
|
|
454
453
|
ye.Provider,
|
|
455
454
|
{
|
|
456
|
-
value: { isOpen:
|
|
457
|
-
children: i ? /* @__PURE__ */
|
|
455
|
+
value: { isOpen: m, toggle: y, disabled: r, variant: e, panelId: w, panelRef: v },
|
|
456
|
+
children: i ? /* @__PURE__ */ c(K, { ref: p, ...x, className: s, children: a }) : /* @__PURE__ */ c("div", { ...x, ref: p, className: $, children: a })
|
|
458
457
|
}
|
|
459
458
|
);
|
|
460
459
|
}
|
|
@@ -462,7 +461,7 @@ const G = "motile-accordion", ye = q(null), we = () => {
|
|
|
462
461
|
ve.displayName = "Accordion";
|
|
463
462
|
const ge = j(
|
|
464
463
|
({ className: e, children: o, asChild: n = !1, ...t }, r) => {
|
|
465
|
-
const { isOpen: s, toggle: a, disabled: i, panelId: l } = we(),
|
|
464
|
+
const { isOpen: s, toggle: a, disabled: i, panelId: l } = we(), p = {
|
|
466
465
|
...t,
|
|
467
466
|
onClick: (u) => {
|
|
468
467
|
var f;
|
|
@@ -477,9 +476,9 @@ const ge = j(
|
|
|
477
476
|
"data-disabled": i ? "" : void 0
|
|
478
477
|
};
|
|
479
478
|
if (n)
|
|
480
|
-
return /* @__PURE__ */
|
|
481
|
-
const
|
|
482
|
-
return /* @__PURE__ */
|
|
479
|
+
return /* @__PURE__ */ c(K, { ref: r, ...p, className: e, children: o });
|
|
480
|
+
const d = [`${G}__header`, e].filter(Boolean).join(" ");
|
|
481
|
+
return /* @__PURE__ */ c("button", { ...p, ref: r, className: d, children: o });
|
|
483
482
|
}
|
|
484
483
|
);
|
|
485
484
|
ge.displayName = "Accordion.Header";
|
|
@@ -494,26 +493,26 @@ const be = j(
|
|
|
494
493
|
}
|
|
495
494
|
if (s) {
|
|
496
495
|
(u.style.height === "" || u.style.height === "auto") && (u.style.height = "0px"), u.getBoundingClientRect(), u.style.height = `${u.scrollHeight}px`;
|
|
497
|
-
const
|
|
498
|
-
s && (u.style.height = "auto"), u.removeEventListener("transitionend",
|
|
496
|
+
const m = () => {
|
|
497
|
+
s && (u.style.height = "auto"), u.removeEventListener("transitionend", m);
|
|
499
498
|
};
|
|
500
|
-
u.addEventListener("transitionend",
|
|
499
|
+
u.addEventListener("transitionend", m);
|
|
501
500
|
} else
|
|
502
501
|
(u.style.height === "" || u.style.height === "auto") && (u.style.height = `${u.scrollHeight}px`), u.getBoundingClientRect(), u.style.height = "0px";
|
|
503
502
|
}, [s, i]);
|
|
504
|
-
|
|
503
|
+
I(() => {
|
|
505
504
|
const u = i.current;
|
|
506
505
|
if (u)
|
|
507
506
|
return u.style.willChange = "height", l(), () => {
|
|
508
507
|
u.style.willChange = "";
|
|
509
508
|
};
|
|
510
509
|
}, [l, i]);
|
|
511
|
-
const
|
|
510
|
+
const p = {
|
|
512
511
|
...t,
|
|
513
512
|
"aria-hidden": !s,
|
|
514
513
|
"data-state": s ? "open" : "closed"
|
|
515
|
-
},
|
|
516
|
-
return /* @__PURE__ */
|
|
514
|
+
}, d = [`${G}__content`, e].filter(Boolean).join(" ");
|
|
515
|
+
return /* @__PURE__ */ c(
|
|
517
516
|
"div",
|
|
518
517
|
{
|
|
519
518
|
id: a,
|
|
@@ -521,7 +520,7 @@ const be = j(
|
|
|
521
520
|
className: `${G}__panel`,
|
|
522
521
|
"aria-hidden": !s,
|
|
523
522
|
"data-state": s ? "open" : "closed",
|
|
524
|
-
children: n ? /* @__PURE__ */
|
|
523
|
+
children: n ? /* @__PURE__ */ c(K, { ref: r, ...p, className: e, children: o }) : /* @__PURE__ */ c("div", { ...p, ref: r, className: d, children: o })
|
|
525
524
|
}
|
|
526
525
|
);
|
|
527
526
|
}
|
|
@@ -538,17 +537,17 @@ const Bt = Object.assign(ve, {
|
|
|
538
537
|
style: r,
|
|
539
538
|
...s
|
|
540
539
|
}) => {
|
|
541
|
-
const i = ["motile-skeleton", t].filter(Boolean).join(" "), l = (
|
|
540
|
+
const i = ["motile-skeleton", t].filter(Boolean).join(" "), l = (d, u) => d === void 0 ? u : typeof d == "number" ? `${d}px` : d, p = {
|
|
542
541
|
...r,
|
|
543
542
|
width: l(e, "100%"),
|
|
544
543
|
height: l(o, "1rem"),
|
|
545
544
|
borderRadius: l(n, "4px")
|
|
546
545
|
};
|
|
547
|
-
return /* @__PURE__ */
|
|
546
|
+
return /* @__PURE__ */ c(
|
|
548
547
|
"div",
|
|
549
548
|
{
|
|
550
549
|
className: i,
|
|
551
|
-
style:
|
|
550
|
+
style: p,
|
|
552
551
|
"aria-busy": "true",
|
|
553
552
|
"aria-live": "polite",
|
|
554
553
|
...s
|
|
@@ -556,19 +555,19 @@ const Bt = Object.assign(ve, {
|
|
|
556
555
|
);
|
|
557
556
|
}, ct = B.forwardRef(
|
|
558
557
|
({ variant: e, size: o = "medium", color: n, className: t, children: r, style: s, ...a }, i) => {
|
|
559
|
-
const l = "motile-badge",
|
|
558
|
+
const l = "motile-badge", p = [
|
|
560
559
|
l,
|
|
561
560
|
`${l}--${o}`,
|
|
562
561
|
e && `${l}--${e}`,
|
|
563
562
|
t
|
|
564
|
-
].filter(Boolean).join(" "),
|
|
563
|
+
].filter(Boolean).join(" "), d = {
|
|
565
564
|
...s,
|
|
566
565
|
...n && { "--motile-badge-color": n }
|
|
567
566
|
};
|
|
568
|
-
return e === "dot" ? /* @__PURE__ */
|
|
569
|
-
/* @__PURE__ */
|
|
570
|
-
/* @__PURE__ */
|
|
571
|
-
] }) : /* @__PURE__ */
|
|
567
|
+
return e === "dot" ? /* @__PURE__ */ L("span", { ref: i, className: p, style: d, ...a, children: [
|
|
568
|
+
/* @__PURE__ */ c("span", { className: `${l}__dot` }),
|
|
569
|
+
/* @__PURE__ */ c("span", { className: `${l}__text`, children: r })
|
|
570
|
+
] }) : /* @__PURE__ */ c("span", { ref: i, className: p, style: d, ...a, children: r });
|
|
572
571
|
}
|
|
573
572
|
);
|
|
574
573
|
ct.displayName = "Badge";
|
|
@@ -595,40 +594,40 @@ function dt({
|
|
|
595
594
|
bottom: i.bottom ?? 6,
|
|
596
595
|
left: i.left ?? 12,
|
|
597
596
|
right: i.right ?? 6
|
|
598
|
-
},
|
|
599
|
-
f.current && (clearTimeout(f.current), f.current = void 0), !b &&
|
|
597
|
+
}, p = X().replace(/:/g, ""), d = M(null), u = M(null), f = M(), [m, h] = T(!1), [w, v] = T(o), [y, x] = T({}), $ = M(null), N = k((b, g = 0) => {
|
|
598
|
+
f.current && (clearTimeout(f.current), f.current = void 0), !b && g > 0 ? f.current = window.setTimeout(
|
|
600
599
|
() => h(!1),
|
|
601
|
-
|
|
600
|
+
g
|
|
602
601
|
) : h(b);
|
|
603
602
|
}, []);
|
|
604
603
|
pe(() => {
|
|
605
|
-
if (!
|
|
604
|
+
if (!m || !d.current || !u.current) return;
|
|
606
605
|
const b = () => {
|
|
607
|
-
if (!
|
|
608
|
-
const R =
|
|
606
|
+
if (!d.current || !u.current) return;
|
|
607
|
+
const R = d.current.getBoundingClientRect(), H = u.current;
|
|
609
608
|
H.classList.add("measuring");
|
|
610
609
|
const Y = H.getBoundingClientRect();
|
|
611
610
|
H.classList.remove("measuring");
|
|
612
611
|
const O = window.innerWidth, C = window.innerHeight;
|
|
613
|
-
let
|
|
612
|
+
let E = Y.width, A = Y.height;
|
|
614
613
|
const z = O - W * 2, P = C - W * 2;
|
|
615
|
-
|
|
614
|
+
E > z && (E = z), A > P && (A = P);
|
|
616
615
|
let S = o;
|
|
617
|
-
o === "top" && R.top - l.top - A < W ? S = "bottom" : o === "bottom" && R.bottom + l.bottom + A > C - W ? S = "top" : o === "left" && R.left - l.left -
|
|
618
|
-
let
|
|
616
|
+
o === "top" && R.top - l.top - A < W ? S = "bottom" : o === "bottom" && R.bottom + l.bottom + A > C - W ? S = "top" : o === "left" && R.left - l.left - E < W ? S = "right" : o === "right" && R.right + l.right + E > O - W && (S = "left");
|
|
617
|
+
let D = 0, F = 0;
|
|
619
618
|
if (S === "top" || S === "bottom") {
|
|
620
619
|
switch (n) {
|
|
621
620
|
case "start":
|
|
622
|
-
|
|
621
|
+
D = R.left;
|
|
623
622
|
break;
|
|
624
623
|
case "center":
|
|
625
|
-
|
|
624
|
+
D = R.left + R.width / 2 - E / 2;
|
|
626
625
|
break;
|
|
627
626
|
case "end":
|
|
628
|
-
|
|
627
|
+
D = R.right - E;
|
|
629
628
|
break;
|
|
630
629
|
}
|
|
631
|
-
|
|
630
|
+
D = Math.max(W, Math.min(D, O - W - E)), F = S === "top" ? R.top - l.top - A : R.bottom + l.bottom, F = Math.max(W, Math.min(F, C - W - A));
|
|
632
631
|
} else {
|
|
633
632
|
switch (n) {
|
|
634
633
|
case "start":
|
|
@@ -641,44 +640,44 @@ function dt({
|
|
|
641
640
|
F = R.bottom - A;
|
|
642
641
|
break;
|
|
643
642
|
}
|
|
644
|
-
F = Math.max(W, Math.min(F, C - W - A)), S === "left" ? (
|
|
643
|
+
F = Math.max(W, Math.min(F, C - W - A)), S === "left" ? (D = R.left - l.left - E, D < W && (E = R.left - l.left - W, D = W)) : (D = R.right + l.right, D + E > O - W && (E = O - W - D));
|
|
645
644
|
}
|
|
646
|
-
const ie = S === "top" || S === "bottom" ? R.left + R.width / 2 -
|
|
647
|
-
|
|
648
|
-
left: Math.round(
|
|
645
|
+
const ie = S === "top" || S === "bottom" ? R.left + R.width / 2 - D : void 0, ae = S === "left" || S === "right" ? R.top + R.height / 2 - F : void 0;
|
|
646
|
+
v(S), x({
|
|
647
|
+
left: Math.round(D),
|
|
649
648
|
top: Math.round(F),
|
|
650
|
-
...
|
|
649
|
+
...E !== Y.width && { maxWidth: E },
|
|
651
650
|
...A !== Y.height && { maxHeight: P },
|
|
652
651
|
...r && { "--motile-tooltip-color": r },
|
|
653
652
|
...ie !== void 0 && { "--arrow-left": `${ie}px` },
|
|
654
653
|
...ae !== void 0 && { "--arrow-top": `${ae}px` }
|
|
655
654
|
});
|
|
656
|
-
},
|
|
655
|
+
}, g = () => {
|
|
657
656
|
$.current === null && ($.current = requestAnimationFrame(() => {
|
|
658
657
|
b(), $.current = null;
|
|
659
658
|
}));
|
|
660
659
|
};
|
|
661
|
-
b(), window.addEventListener("scroll",
|
|
660
|
+
b(), window.addEventListener("scroll", g, {
|
|
662
661
|
passive: !0,
|
|
663
662
|
capture: !0
|
|
664
|
-
}), window.addEventListener("resize",
|
|
665
|
-
const V = new ResizeObserver(
|
|
666
|
-
return
|
|
667
|
-
$.current !== null && (cancelAnimationFrame($.current), $.current = null), window.removeEventListener("scroll",
|
|
663
|
+
}), window.addEventListener("resize", g, { passive: !0 });
|
|
664
|
+
const V = new ResizeObserver(g);
|
|
665
|
+
return d.current && V.observe(d.current), () => {
|
|
666
|
+
$.current !== null && (cancelAnimationFrame($.current), $.current = null), window.removeEventListener("scroll", g, { capture: !0 }), window.removeEventListener("resize", g), V.disconnect();
|
|
668
667
|
};
|
|
669
|
-
}, [
|
|
670
|
-
if (!
|
|
668
|
+
}, [m, o, n, r, i]), I(() => {
|
|
669
|
+
if (!m) return;
|
|
671
670
|
const b = () => {
|
|
672
671
|
N(!1, 0);
|
|
673
672
|
};
|
|
674
673
|
return window.addEventListener("scroll", b, { capture: !0 }), () => {
|
|
675
674
|
window.removeEventListener("scroll", b, { capture: !0 });
|
|
676
675
|
};
|
|
677
|
-
}, [
|
|
676
|
+
}, [m, N]), I(() => () => {
|
|
678
677
|
f.current && clearTimeout(f.current);
|
|
679
678
|
}, []);
|
|
680
679
|
const _ = {
|
|
681
|
-
open:
|
|
680
|
+
open: m,
|
|
682
681
|
setOpen: N,
|
|
683
682
|
position: o,
|
|
684
683
|
align: n,
|
|
@@ -686,27 +685,27 @@ function dt({
|
|
|
686
685
|
showArrow: s,
|
|
687
686
|
color: r,
|
|
688
687
|
keepOpen: a,
|
|
689
|
-
tooltipId: `${
|
|
690
|
-
triggerRef:
|
|
688
|
+
tooltipId: `${p}-tooltip`,
|
|
689
|
+
triggerRef: d,
|
|
691
690
|
contentRef: u,
|
|
692
691
|
style: y,
|
|
693
692
|
placement: w
|
|
694
693
|
};
|
|
695
|
-
return /* @__PURE__ */
|
|
694
|
+
return /* @__PURE__ */ c(_e.Provider, { value: _, children: e });
|
|
696
695
|
}
|
|
697
696
|
function ut({ children: e, asChild: o = !1 }) {
|
|
698
697
|
const { open: n, setOpen: t, tooltipId: r, triggerRef: s, keepOpen: a } = $e(), i = k(() => {
|
|
699
698
|
t(!0, 0);
|
|
700
699
|
}, [t]), l = k(() => {
|
|
701
700
|
a ? t(!1, 100) : t(!1, 0);
|
|
702
|
-
}, [t, a]),
|
|
701
|
+
}, [t, a]), p = k(() => {
|
|
703
702
|
t(!0, 0);
|
|
704
|
-
}, [t]),
|
|
703
|
+
}, [t]), d = k(() => {
|
|
705
704
|
t(!1, 0);
|
|
706
705
|
}, [t]), u = k(() => {
|
|
707
706
|
t(!n, 0);
|
|
708
707
|
}, [t, n]);
|
|
709
|
-
return o ? /* @__PURE__ */
|
|
708
|
+
return o ? /* @__PURE__ */ c(
|
|
710
709
|
K,
|
|
711
710
|
{
|
|
712
711
|
ref: (f) => {
|
|
@@ -717,24 +716,24 @@ function ut({ children: e, asChild: o = !1 }) {
|
|
|
717
716
|
tabIndex: 0,
|
|
718
717
|
onMouseEnter: i,
|
|
719
718
|
onMouseLeave: l,
|
|
720
|
-
onFocus:
|
|
721
|
-
onBlur:
|
|
719
|
+
onFocus: p,
|
|
720
|
+
onBlur: d,
|
|
722
721
|
onClick: u,
|
|
723
722
|
children: e
|
|
724
723
|
}
|
|
725
724
|
) : B.cloneElement(e, {
|
|
726
725
|
ref: (f) => {
|
|
727
726
|
s.current = f;
|
|
728
|
-
const
|
|
729
|
-
|
|
727
|
+
const m = e.props.ref || e.ref;
|
|
728
|
+
m && (typeof m == "function" ? m(f) : typeof m == "object" && m !== null && (m.current = f));
|
|
730
729
|
},
|
|
731
730
|
className: `motile-tooltip-trigger ${e.props.className || ""}`.trim(),
|
|
732
731
|
"aria-describedby": n ? r : void 0,
|
|
733
732
|
tabIndex: e.props.tabIndex ?? 0,
|
|
734
733
|
onMouseEnter: i,
|
|
735
734
|
onMouseLeave: l,
|
|
736
|
-
onFocus:
|
|
737
|
-
onBlur:
|
|
735
|
+
onFocus: p,
|
|
736
|
+
onBlur: d,
|
|
738
737
|
onClick: u
|
|
739
738
|
});
|
|
740
739
|
}
|
|
@@ -748,36 +747,36 @@ function mt({ children: e }) {
|
|
|
748
747
|
showArrow: a,
|
|
749
748
|
keepOpen: i,
|
|
750
749
|
align: l,
|
|
751
|
-
style:
|
|
752
|
-
placement:
|
|
753
|
-
} = $e(), [u, f] =
|
|
754
|
-
|
|
750
|
+
style: p,
|
|
751
|
+
placement: d
|
|
752
|
+
} = $e(), [u, f] = T(!1), [m, h] = T(!1);
|
|
753
|
+
I(() => f(!0), []), I(() => {
|
|
755
754
|
o ? requestAnimationFrame(() => {
|
|
756
755
|
h(!0);
|
|
757
756
|
}) : h(!1);
|
|
758
757
|
}, [o]);
|
|
759
758
|
const w = k(() => {
|
|
760
759
|
i && n(!0, 0);
|
|
761
|
-
}, [i, n]),
|
|
760
|
+
}, [i, n]), v = k(() => {
|
|
762
761
|
i && n(!1, 0);
|
|
763
762
|
}, [i, n]);
|
|
764
763
|
return !u || !o ? null : te(
|
|
765
|
-
/* @__PURE__ */
|
|
764
|
+
/* @__PURE__ */ c(
|
|
766
765
|
"div",
|
|
767
766
|
{
|
|
768
767
|
ref: r,
|
|
769
768
|
id: t,
|
|
770
769
|
role: "tooltip",
|
|
771
770
|
className: `motile-tooltip-bubble motile-tooltip-bubble--${s}`,
|
|
772
|
-
"data-open":
|
|
773
|
-
"data-placement":
|
|
771
|
+
"data-open": m || void 0,
|
|
772
|
+
"data-placement": d,
|
|
774
773
|
"data-align": l,
|
|
775
774
|
"data-show-arrow": a || void 0,
|
|
776
775
|
"data-keep-open": i || void 0,
|
|
777
|
-
style:
|
|
776
|
+
style: p,
|
|
778
777
|
"aria-hidden": !o,
|
|
779
778
|
onMouseEnter: w,
|
|
780
|
-
onMouseLeave:
|
|
779
|
+
onMouseLeave: v,
|
|
781
780
|
children: e
|
|
782
781
|
}
|
|
783
782
|
),
|
|
@@ -794,14 +793,14 @@ function ne({
|
|
|
794
793
|
handler: o,
|
|
795
794
|
enabled: n = !0
|
|
796
795
|
}) {
|
|
797
|
-
|
|
796
|
+
I(() => {
|
|
798
797
|
if (!n) return;
|
|
799
798
|
const t = (r) => {
|
|
800
799
|
const s = r.target;
|
|
801
800
|
if (!e.every((l) => l.current)) return;
|
|
802
801
|
e.every((l) => {
|
|
803
|
-
var
|
|
804
|
-
return !((
|
|
802
|
+
var p;
|
|
803
|
+
return !((p = l.current) != null && p.contains(s));
|
|
805
804
|
}) && o(r);
|
|
806
805
|
};
|
|
807
806
|
return document.addEventListener("mousedown", t), document.addEventListener("touchstart", t), () => {
|
|
@@ -813,7 +812,7 @@ function oe({
|
|
|
813
812
|
handler: e,
|
|
814
813
|
enabled: o = !0
|
|
815
814
|
}) {
|
|
816
|
-
|
|
815
|
+
I(() => {
|
|
817
816
|
if (!o) return;
|
|
818
817
|
const n = (t) => {
|
|
819
818
|
t.key === "Escape" && e(t);
|
|
@@ -844,10 +843,10 @@ function pt({
|
|
|
844
843
|
defaultValue: o = !1,
|
|
845
844
|
onChange: n
|
|
846
845
|
}) {
|
|
847
|
-
const t = e !== void 0, [r, s] =
|
|
846
|
+
const t = e !== void 0, [r, s] = T(o), a = t ? e : r, i = k(
|
|
848
847
|
(l) => {
|
|
849
|
-
const
|
|
850
|
-
t || s(
|
|
848
|
+
const p = typeof l == "function" ? l(a) : l;
|
|
849
|
+
t || s(p), n == null || n(p);
|
|
851
850
|
},
|
|
852
851
|
[t, n, a]
|
|
853
852
|
);
|
|
@@ -863,16 +862,16 @@ function ht({
|
|
|
863
862
|
color: a,
|
|
864
863
|
bounceCount: i = 0,
|
|
865
864
|
open: l,
|
|
866
|
-
defaultOpen:
|
|
867
|
-
onOpenChange:
|
|
865
|
+
defaultOpen: p = !1,
|
|
866
|
+
onOpenChange: d,
|
|
868
867
|
onClickOutside: u,
|
|
869
868
|
onDismiss: f,
|
|
870
|
-
autoClose:
|
|
869
|
+
autoClose: m = !0
|
|
871
870
|
}) {
|
|
872
|
-
const h = X().replace(/:/g, ""), w =
|
|
871
|
+
const h = X().replace(/:/g, ""), w = M(null), v = M(null), y = M(null), [x, $] = pt({
|
|
873
872
|
value: l,
|
|
874
|
-
defaultValue:
|
|
875
|
-
onChange:
|
|
873
|
+
defaultValue: p,
|
|
874
|
+
onChange: d
|
|
876
875
|
}), N = ee(
|
|
877
876
|
() => ({
|
|
878
877
|
open: x,
|
|
@@ -883,15 +882,15 @@ function ht({
|
|
|
883
882
|
showArrow: r,
|
|
884
883
|
zIndex: s,
|
|
885
884
|
color: a,
|
|
886
|
-
autoClose:
|
|
885
|
+
autoClose: m,
|
|
887
886
|
bounceCount: i,
|
|
888
|
-
onOpenChange:
|
|
887
|
+
onOpenChange: d,
|
|
889
888
|
onClickOutside: u,
|
|
890
889
|
onDismiss: f,
|
|
891
890
|
triggerId: `${h}-trigger`,
|
|
892
891
|
contentId: `${h}-content`,
|
|
893
892
|
triggerRef: w,
|
|
894
|
-
contentRef:
|
|
893
|
+
contentRef: v,
|
|
895
894
|
wrapperRef: y,
|
|
896
895
|
isPositioned: !1,
|
|
897
896
|
popoverStyle: {}
|
|
@@ -905,24 +904,24 @@ function ht({
|
|
|
905
904
|
r,
|
|
906
905
|
s,
|
|
907
906
|
a,
|
|
908
|
-
|
|
907
|
+
m,
|
|
909
908
|
i,
|
|
910
|
-
|
|
909
|
+
d,
|
|
911
910
|
u,
|
|
912
911
|
f,
|
|
913
912
|
h,
|
|
914
913
|
w,
|
|
915
|
-
|
|
914
|
+
v,
|
|
916
915
|
y
|
|
917
916
|
]
|
|
918
917
|
);
|
|
919
|
-
return /* @__PURE__ */
|
|
918
|
+
return /* @__PURE__ */ c(xe.Provider, { value: N, children: /* @__PURE__ */ c("div", { ref: y, className: "motile-popover-wrapper", children: e }) });
|
|
920
919
|
}
|
|
921
920
|
function yt({ children: e, asChild: o = !1 }) {
|
|
922
921
|
const { open: n, setOpen: t, triggerId: r, contentId: s, triggerRef: a } = Re(), i = k(() => {
|
|
923
922
|
t((l) => !l);
|
|
924
923
|
}, [t]);
|
|
925
|
-
return o ? /* @__PURE__ */
|
|
924
|
+
return o ? /* @__PURE__ */ c(
|
|
926
925
|
K,
|
|
927
926
|
{
|
|
928
927
|
ref: (l) => {
|
|
@@ -934,7 +933,7 @@ function yt({ children: e, asChild: o = !1 }) {
|
|
|
934
933
|
onClick: i,
|
|
935
934
|
children: e
|
|
936
935
|
}
|
|
937
|
-
) : /* @__PURE__ */
|
|
936
|
+
) : /* @__PURE__ */ c(
|
|
938
937
|
"button",
|
|
939
938
|
{
|
|
940
939
|
ref: a,
|
|
@@ -959,22 +958,22 @@ function wt({
|
|
|
959
958
|
align: a,
|
|
960
959
|
variant: i,
|
|
961
960
|
showArrow: l,
|
|
962
|
-
zIndex:
|
|
963
|
-
color:
|
|
961
|
+
zIndex: p,
|
|
962
|
+
color: d,
|
|
964
963
|
autoClose: u,
|
|
965
964
|
bounceCount: f,
|
|
966
|
-
onClickOutside:
|
|
965
|
+
onClickOutside: m,
|
|
967
966
|
onDismiss: h,
|
|
968
967
|
contentId: w,
|
|
969
|
-
triggerRef:
|
|
968
|
+
triggerRef: v,
|
|
970
969
|
contentRef: y,
|
|
971
970
|
wrapperRef: x
|
|
972
|
-
} = Re(), [$, N] =
|
|
973
|
-
!
|
|
974
|
-
if (!
|
|
971
|
+
} = Re(), [$, N] = T(!1), [_, b] = T({}), g = k(() => {
|
|
972
|
+
!v.current || !y.current || !x.current || requestAnimationFrame(() => {
|
|
973
|
+
if (!v.current || !y.current || !x.current)
|
|
975
974
|
return;
|
|
976
|
-
const H = y.current.offsetWidth, Y = y.current.offsetHeight, O =
|
|
977
|
-
let S = 0,
|
|
975
|
+
const H = y.current.offsetWidth, Y = y.current.offsetHeight, O = v.current.offsetWidth, C = v.current.offsetHeight, E = v.current.getBoundingClientRect(), A = x.current.getBoundingClientRect(), z = E.left - A.left, P = E.top - A.top;
|
|
976
|
+
let S = 0, D = 0;
|
|
978
977
|
const F = 8;
|
|
979
978
|
if (s === "top" || s === "bottom") {
|
|
980
979
|
switch (a) {
|
|
@@ -988,31 +987,31 @@ function wt({
|
|
|
988
987
|
S = z + O - H;
|
|
989
988
|
break;
|
|
990
989
|
}
|
|
991
|
-
s === "top" ?
|
|
990
|
+
s === "top" ? D = P - Y - F : D = P + C + F;
|
|
992
991
|
} else {
|
|
993
992
|
switch (a) {
|
|
994
993
|
case "start":
|
|
995
|
-
|
|
994
|
+
D = P;
|
|
996
995
|
break;
|
|
997
996
|
case "center":
|
|
998
|
-
|
|
997
|
+
D = P + C / 2;
|
|
999
998
|
break;
|
|
1000
999
|
case "end":
|
|
1001
|
-
|
|
1000
|
+
D = P + C - Y;
|
|
1002
1001
|
break;
|
|
1003
1002
|
}
|
|
1004
1003
|
s === "left" ? S = z - H - F : S = z + O + F;
|
|
1005
1004
|
}
|
|
1006
1005
|
b({
|
|
1007
1006
|
left: `${Math.round(S)}px`,
|
|
1008
|
-
top: `${Math.round(
|
|
1007
|
+
top: `${Math.round(D)}px`
|
|
1009
1008
|
}), N(!0);
|
|
1010
1009
|
});
|
|
1011
|
-
}, [s, a,
|
|
1012
|
-
() => ft(
|
|
1013
|
-
[
|
|
1010
|
+
}, [s, a, v, y, x]), V = ee(
|
|
1011
|
+
() => ft(g, 100),
|
|
1012
|
+
[g]
|
|
1014
1013
|
);
|
|
1015
|
-
if (
|
|
1014
|
+
if (I(() => {
|
|
1016
1015
|
t || N(!1);
|
|
1017
1016
|
}, [t]), oe({
|
|
1018
1017
|
handler: k(
|
|
@@ -1026,19 +1025,19 @@ function wt({
|
|
|
1026
1025
|
refs: [x],
|
|
1027
1026
|
handler: k(
|
|
1028
1027
|
(H) => {
|
|
1029
|
-
u && (
|
|
1028
|
+
u && (m == null || m(H), h == null || h(H), H.defaultPrevented || r(!1));
|
|
1030
1029
|
},
|
|
1031
|
-
[u,
|
|
1030
|
+
[u, m, h, r]
|
|
1032
1031
|
),
|
|
1033
1032
|
enabled: t
|
|
1034
|
-
}),
|
|
1035
|
-
if (!(!t || !
|
|
1036
|
-
return
|
|
1033
|
+
}), I(() => {
|
|
1034
|
+
if (!(!t || !v.current || !y.current || !x.current))
|
|
1035
|
+
return g(), window.addEventListener("resize", V), () => {
|
|
1037
1036
|
window.removeEventListener("resize", V);
|
|
1038
1037
|
};
|
|
1039
|
-
}, [t,
|
|
1038
|
+
}, [t, g, V]), !t) return null;
|
|
1040
1039
|
const R = f !== 0;
|
|
1041
|
-
return /* @__PURE__ */
|
|
1040
|
+
return /* @__PURE__ */ L(
|
|
1042
1041
|
"div",
|
|
1043
1042
|
{
|
|
1044
1043
|
ref: y,
|
|
@@ -1052,13 +1051,13 @@ function wt({
|
|
|
1052
1051
|
"data-bounce": R ? "true" : "false",
|
|
1053
1052
|
style: {
|
|
1054
1053
|
..._,
|
|
1055
|
-
zIndex:
|
|
1056
|
-
...
|
|
1054
|
+
zIndex: p,
|
|
1055
|
+
...d && { "--motile-popover-color": d },
|
|
1057
1056
|
"--bounce-count": f,
|
|
1058
1057
|
...n
|
|
1059
1058
|
},
|
|
1060
1059
|
children: [
|
|
1061
|
-
l && /* @__PURE__ */
|
|
1060
|
+
l && /* @__PURE__ */ c(
|
|
1062
1061
|
"div",
|
|
1063
1062
|
{
|
|
1064
1063
|
className: "motile-popover-arrow",
|
|
@@ -1080,10 +1079,10 @@ function me({
|
|
|
1080
1079
|
enabled: e = !0,
|
|
1081
1080
|
allowedSelectors: o = ["[data-scroll-allowed]", ".sheet-content", ".modal-body"]
|
|
1082
1081
|
} = {}) {
|
|
1083
|
-
return
|
|
1082
|
+
return I(() => {
|
|
1084
1083
|
if (!e) return;
|
|
1085
|
-
const n = document.body.style.overflow, t = document.documentElement.style.overflow, r = document.body.style.height, s = document.body.style.paddingRight, a = document.body.style.touchAction, i = document.documentElement.style.touchAction, l = document.body.style.overscrollBehavior,
|
|
1086
|
-
document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", document.body.style.height = "100%", document.body.style.touchAction = "none", document.documentElement.style.touchAction = "none", document.body.style.overscrollBehavior = "none", document.documentElement.style.overscrollBehavior = "none",
|
|
1084
|
+
const n = document.body.style.overflow, t = document.documentElement.style.overflow, r = document.body.style.height, s = document.body.style.paddingRight, a = document.body.style.touchAction, i = document.documentElement.style.touchAction, l = document.body.style.overscrollBehavior, p = document.documentElement.style.overscrollBehavior, d = window.innerWidth - document.documentElement.clientWidth;
|
|
1085
|
+
document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", document.body.style.height = "100%", document.body.style.touchAction = "none", document.documentElement.style.touchAction = "none", document.body.style.overscrollBehavior = "none", document.documentElement.style.overscrollBehavior = "none", d > 0 && (document.body.style.paddingRight = `${d}px`);
|
|
1087
1086
|
const u = (h) => {
|
|
1088
1087
|
const w = h.target;
|
|
1089
1088
|
if (!w || !(w instanceof HTMLElement) || !o.some((y) => {
|
|
@@ -1096,7 +1095,7 @@ function me({
|
|
|
1096
1095
|
return h.preventDefault(), h.stopPropagation(), !1;
|
|
1097
1096
|
}, f = { passive: !1 };
|
|
1098
1097
|
document.addEventListener("wheel", u, f), document.addEventListener("touchmove", u, f), document.addEventListener("scroll", u, f);
|
|
1099
|
-
const
|
|
1098
|
+
const m = (h) => {
|
|
1100
1099
|
const w = h.target;
|
|
1101
1100
|
if (!w || !(w instanceof HTMLElement))
|
|
1102
1101
|
return [
|
|
@@ -1138,8 +1137,8 @@ function me({
|
|
|
1138
1137
|
].includes(h.code))
|
|
1139
1138
|
return h.preventDefault(), h.stopPropagation(), !1;
|
|
1140
1139
|
};
|
|
1141
|
-
return document.addEventListener("keydown",
|
|
1142
|
-
document.body.style.overflow = n, document.documentElement.style.overflow = t, document.body.style.height = r, document.body.style.paddingRight = s, document.body.style.touchAction = a, document.documentElement.style.touchAction = i, document.body.style.overscrollBehavior = l, document.documentElement.style.overscrollBehavior =
|
|
1140
|
+
return document.addEventListener("keydown", m, f), () => {
|
|
1141
|
+
document.body.style.overflow = n, document.documentElement.style.overflow = t, document.body.style.height = r, document.body.style.paddingRight = s, document.body.style.touchAction = a, document.documentElement.style.touchAction = i, document.body.style.overscrollBehavior = l, document.documentElement.style.overscrollBehavior = p, document.removeEventListener("wheel", u), document.removeEventListener("touchmove", u), document.removeEventListener("scroll", u), document.removeEventListener("keydown", m);
|
|
1143
1142
|
};
|
|
1144
1143
|
}, [e, o]), {
|
|
1145
1144
|
isLocked: e
|
|
@@ -1160,11 +1159,11 @@ const Ne = q(null), J = () => {
|
|
|
1160
1159
|
maxHeight: a = "70dvh",
|
|
1161
1160
|
width: i = "480px",
|
|
1162
1161
|
maxWidth: l,
|
|
1163
|
-
zIndex:
|
|
1162
|
+
zIndex: p = 9999
|
|
1164
1163
|
}) => {
|
|
1165
|
-
const
|
|
1164
|
+
const d = M(null), u = M(null), f = M(null), m = M(0), h = M(!1), [w, v] = T(!1), [y, x] = T(n), [$, N] = T(n), _ = o !== void 0 ? o : $, b = (C) => {
|
|
1166
1165
|
o === void 0 && N(C), t == null || t(C);
|
|
1167
|
-
},
|
|
1166
|
+
}, g = typeof r == "boolean" ? { escapeKey: r, clickOutside: r } : {
|
|
1168
1167
|
escapeKey: (r == null ? void 0 : r.escapeKey) ?? !1,
|
|
1169
1168
|
clickOutside: (r == null ? void 0 : r.clickOutside) ?? !1
|
|
1170
1169
|
};
|
|
@@ -1173,33 +1172,33 @@ const Ne = q(null), J = () => {
|
|
|
1173
1172
|
allowedSelectors: ["[data-scroll-allowed]", ".motile-drawer__body"]
|
|
1174
1173
|
});
|
|
1175
1174
|
const V = () => {
|
|
1176
|
-
if (!
|
|
1177
|
-
|
|
1175
|
+
if (!d.current) {
|
|
1176
|
+
v(!1), setTimeout(() => {
|
|
1178
1177
|
x(!1), b(!1);
|
|
1179
1178
|
}, 300);
|
|
1180
1179
|
return;
|
|
1181
1180
|
}
|
|
1182
|
-
|
|
1181
|
+
d.current.style.transition = "transform 0.3s ease", d.current.style.transform = "translateY(100%)", v(!1), setTimeout(() => {
|
|
1183
1182
|
x(!1), b(!1);
|
|
1184
1183
|
}, 300);
|
|
1185
1184
|
};
|
|
1186
|
-
|
|
1185
|
+
I(() => {
|
|
1187
1186
|
_ ? x(!0) : y && V();
|
|
1188
|
-
}, [_]),
|
|
1189
|
-
if (!y || !
|
|
1190
|
-
const C =
|
|
1187
|
+
}, [_]), I(() => {
|
|
1188
|
+
if (!y || !d.current) return;
|
|
1189
|
+
const C = d.current;
|
|
1191
1190
|
C.style.transition = "none", C.style.transform = "translateY(100%)", requestAnimationFrame(() => {
|
|
1192
1191
|
requestAnimationFrame(() => {
|
|
1193
|
-
C.style.transition = "transform 0.3s ease", C.style.transform = "translateY(0)",
|
|
1192
|
+
C.style.transition = "transform 0.3s ease", C.style.transform = "translateY(0)", v(!0);
|
|
1194
1193
|
});
|
|
1195
1194
|
});
|
|
1196
1195
|
}, [y]), ne({
|
|
1197
|
-
refs: [
|
|
1196
|
+
refs: [d],
|
|
1198
1197
|
handler: V,
|
|
1199
|
-
enabled: _ &&
|
|
1198
|
+
enabled: _ && g.clickOutside
|
|
1200
1199
|
}), oe({
|
|
1201
1200
|
handler: V,
|
|
1202
|
-
enabled: _ &&
|
|
1201
|
+
enabled: _ && g.escapeKey
|
|
1203
1202
|
});
|
|
1204
1203
|
const O = {
|
|
1205
1204
|
open: y,
|
|
@@ -1209,8 +1208,8 @@ const Ne = q(null), J = () => {
|
|
|
1209
1208
|
maxHeight: a,
|
|
1210
1209
|
width: i,
|
|
1211
1210
|
maxWidth: l,
|
|
1212
|
-
zIndex:
|
|
1213
|
-
drawerRef:
|
|
1211
|
+
zIndex: p,
|
|
1212
|
+
drawerRef: d,
|
|
1214
1213
|
bodyRef: u,
|
|
1215
1214
|
isVisible: w,
|
|
1216
1215
|
handleClose: V,
|
|
@@ -1218,18 +1217,18 @@ const Ne = q(null), J = () => {
|
|
|
1218
1217
|
s && (f.current = C, h.current = !1);
|
|
1219
1218
|
},
|
|
1220
1219
|
handleDragMove: (C) => {
|
|
1221
|
-
if (!s || !
|
|
1220
|
+
if (!s || !d.current || f.current === null || !u.current)
|
|
1222
1221
|
return;
|
|
1223
|
-
const
|
|
1224
|
-
u.current.scrollTop <= 0 &&
|
|
1222
|
+
const E = C - f.current;
|
|
1223
|
+
u.current.scrollTop <= 0 && E > 0 && (h.current = !0, m.current = E, d.current.style.transition = "none", d.current.style.transform = `translateY(${E}px)`);
|
|
1225
1224
|
},
|
|
1226
1225
|
handleDragEnd: () => {
|
|
1227
|
-
if (!s || !
|
|
1226
|
+
if (!s || !d.current) return;
|
|
1228
1227
|
const C = window.innerHeight * 0.2;
|
|
1229
|
-
|
|
1228
|
+
d.current.style.transition = "transform 0.3s ease", h.current && m.current > C ? V() : (d.current.style.transform = "translateY(0)", m.current = 0), h.current = !1, f.current = null;
|
|
1230
1229
|
}
|
|
1231
1230
|
};
|
|
1232
|
-
return /* @__PURE__ */
|
|
1231
|
+
return /* @__PURE__ */ c(Ne.Provider, { value: O, children: e });
|
|
1233
1232
|
};
|
|
1234
1233
|
Ce.displayName = "Drawer.Root";
|
|
1235
1234
|
const ke = j(
|
|
@@ -1237,7 +1236,7 @@ const ke = j(
|
|
|
1237
1236
|
const { setOpen: s } = J(), a = (i) => {
|
|
1238
1237
|
n == null || n(i), s(!0);
|
|
1239
1238
|
};
|
|
1240
|
-
return o ? /* @__PURE__ */
|
|
1239
|
+
return o ? /* @__PURE__ */ c(
|
|
1241
1240
|
K,
|
|
1242
1241
|
{
|
|
1243
1242
|
...t,
|
|
@@ -1245,7 +1244,7 @@ const ke = j(
|
|
|
1245
1244
|
ref: r,
|
|
1246
1245
|
children: e
|
|
1247
1246
|
}
|
|
1248
|
-
) : /* @__PURE__ */
|
|
1247
|
+
) : /* @__PURE__ */ c("button", { type: "button", onClick: a, ref: r, ...t, children: e });
|
|
1249
1248
|
}
|
|
1250
1249
|
);
|
|
1251
1250
|
ke.displayName = "Drawer.Trigger";
|
|
@@ -1260,7 +1259,7 @@ Se.displayName = "Drawer.Portal";
|
|
|
1260
1259
|
const Te = j(
|
|
1261
1260
|
({ className: e, ...o }, n) => {
|
|
1262
1261
|
const { isVisible: t, zIndex: r } = J();
|
|
1263
|
-
return /* @__PURE__ */
|
|
1262
|
+
return /* @__PURE__ */ c(
|
|
1264
1263
|
"div",
|
|
1265
1264
|
{
|
|
1266
1265
|
ref: n,
|
|
@@ -1275,14 +1274,14 @@ const Te = j(
|
|
|
1275
1274
|
Te.displayName = "Drawer.Overlay";
|
|
1276
1275
|
const Ee = j(
|
|
1277
1276
|
({ className: e, style: o, children: n, ...t }, r) => {
|
|
1278
|
-
const { drawerRef: s, isVisible: a, maxHeight: i, width: l, maxWidth:
|
|
1277
|
+
const { drawerRef: s, isVisible: a, maxHeight: i, width: l, maxWidth: p, zIndex: d } = J(), u = {
|
|
1279
1278
|
...i !== "70dvh" && { "--drawer-max-height": i },
|
|
1280
1279
|
...l !== "480px" && { "--drawer-width": l },
|
|
1281
|
-
...
|
|
1282
|
-
zIndex:
|
|
1280
|
+
...p && { "--drawer-max-width": p },
|
|
1281
|
+
zIndex: d + 1,
|
|
1283
1282
|
...o
|
|
1284
1283
|
};
|
|
1285
|
-
return /* @__PURE__ */
|
|
1284
|
+
return /* @__PURE__ */ c(
|
|
1286
1285
|
"div",
|
|
1287
1286
|
{
|
|
1288
1287
|
ref: (f) => {
|
|
@@ -1302,22 +1301,22 @@ const Ee = j(
|
|
|
1302
1301
|
Ee.displayName = "Drawer.Content";
|
|
1303
1302
|
const De = j(
|
|
1304
1303
|
({ className: e, ...o }, n) => {
|
|
1305
|
-
const { handleDragStart: t, handleDragMove: r, handleDragEnd: s } = J(), a = (
|
|
1306
|
-
t(
|
|
1307
|
-
}, i = (
|
|
1308
|
-
r(
|
|
1304
|
+
const { handleDragStart: t, handleDragMove: r, handleDragEnd: s } = J(), a = (d) => {
|
|
1305
|
+
t(d.touches[0].clientY);
|
|
1306
|
+
}, i = (d) => {
|
|
1307
|
+
r(d.touches[0].clientY);
|
|
1309
1308
|
}, l = () => {
|
|
1310
1309
|
s();
|
|
1311
|
-
},
|
|
1312
|
-
t(
|
|
1313
|
-
const u = (
|
|
1314
|
-
r(
|
|
1310
|
+
}, p = (d) => {
|
|
1311
|
+
t(d.clientY);
|
|
1312
|
+
const u = (m) => {
|
|
1313
|
+
r(m.clientY);
|
|
1315
1314
|
}, f = () => {
|
|
1316
1315
|
s(), window.removeEventListener("mousemove", u), window.removeEventListener("mouseup", f);
|
|
1317
1316
|
};
|
|
1318
1317
|
window.addEventListener("mousemove", u), window.addEventListener("mouseup", f);
|
|
1319
1318
|
};
|
|
1320
|
-
return /* @__PURE__ */
|
|
1319
|
+
return /* @__PURE__ */ c(
|
|
1321
1320
|
"div",
|
|
1322
1321
|
{
|
|
1323
1322
|
ref: n,
|
|
@@ -1325,16 +1324,16 @@ const De = j(
|
|
|
1325
1324
|
onTouchStart: a,
|
|
1326
1325
|
onTouchMove: i,
|
|
1327
1326
|
onTouchEnd: l,
|
|
1328
|
-
onMouseDown:
|
|
1327
|
+
onMouseDown: p,
|
|
1329
1328
|
...o,
|
|
1330
|
-
children: /* @__PURE__ */
|
|
1329
|
+
children: /* @__PURE__ */ c("div", { className: "motile-drawer__handle", "aria-hidden": "true" })
|
|
1331
1330
|
}
|
|
1332
1331
|
);
|
|
1333
1332
|
}
|
|
1334
1333
|
);
|
|
1335
1334
|
De.displayName = "Drawer.Handle";
|
|
1336
1335
|
const Me = j(
|
|
1337
|
-
({ children: e, asChild: o, className: n, ...t }, r) => o && B.isValidElement(e) ? /* @__PURE__ */
|
|
1336
|
+
({ children: e, asChild: o, className: n, ...t }, r) => o && B.isValidElement(e) ? /* @__PURE__ */ c(
|
|
1338
1337
|
K,
|
|
1339
1338
|
{
|
|
1340
1339
|
...t,
|
|
@@ -1342,7 +1341,7 @@ const Me = j(
|
|
|
1342
1341
|
ref: r,
|
|
1343
1342
|
children: e
|
|
1344
1343
|
}
|
|
1345
|
-
) : /* @__PURE__ */
|
|
1344
|
+
) : /* @__PURE__ */ c("div", { className: "motile-drawer__title-wrapper", children: /* @__PURE__ */ c(
|
|
1346
1345
|
"h2",
|
|
1347
1346
|
{
|
|
1348
1347
|
ref: r,
|
|
@@ -1357,7 +1356,7 @@ Me.displayName = "Drawer.Title";
|
|
|
1357
1356
|
const Ie = j(
|
|
1358
1357
|
({ className: e, children: o, ...n }, t) => {
|
|
1359
1358
|
const { bodyRef: r } = J();
|
|
1360
|
-
return /* @__PURE__ */
|
|
1359
|
+
return /* @__PURE__ */ c(
|
|
1361
1360
|
"div",
|
|
1362
1361
|
{
|
|
1363
1362
|
ref: (s) => {
|
|
@@ -1377,7 +1376,7 @@ const Le = j(
|
|
|
1377
1376
|
const { handleClose: s } = J(), a = (i) => {
|
|
1378
1377
|
n == null || n(i), s();
|
|
1379
1378
|
};
|
|
1380
|
-
return o ? /* @__PURE__ */
|
|
1379
|
+
return o ? /* @__PURE__ */ c(
|
|
1381
1380
|
K,
|
|
1382
1381
|
{
|
|
1383
1382
|
...t,
|
|
@@ -1385,7 +1384,7 @@ const Le = j(
|
|
|
1385
1384
|
ref: r,
|
|
1386
1385
|
children: e
|
|
1387
1386
|
}
|
|
1388
|
-
) : /* @__PURE__ */
|
|
1387
|
+
) : /* @__PURE__ */ c("button", { type: "button", onClick: a, ref: r, ...t, children: e });
|
|
1389
1388
|
}
|
|
1390
1389
|
);
|
|
1391
1390
|
Le.displayName = "Drawer.Close";
|
|
@@ -1404,10 +1403,10 @@ function vt({
|
|
|
1404
1403
|
onClose: e,
|
|
1405
1404
|
isOpen: o
|
|
1406
1405
|
}) {
|
|
1407
|
-
const n =
|
|
1408
|
-
return
|
|
1406
|
+
const n = M(e), t = M(!1), [r, s] = T(!1);
|
|
1407
|
+
return I(() => {
|
|
1409
1408
|
n.current = e;
|
|
1410
|
-
}, [e]),
|
|
1409
|
+
}, [e]), I(() => {
|
|
1411
1410
|
if (o && !t.current) {
|
|
1412
1411
|
const a = (i) => {
|
|
1413
1412
|
s(!0), n.current();
|
|
@@ -1431,10 +1430,10 @@ function gt({
|
|
|
1431
1430
|
defaultValue: o = !1,
|
|
1432
1431
|
onChange: n
|
|
1433
1432
|
}) {
|
|
1434
|
-
const t = e !== void 0, [r, s] =
|
|
1433
|
+
const t = e !== void 0, [r, s] = T(o), a = t ? e : r, i = k(
|
|
1435
1434
|
(l) => {
|
|
1436
|
-
const
|
|
1437
|
-
t || s(
|
|
1435
|
+
const p = typeof l == "function" ? l(a) : l;
|
|
1436
|
+
t || s(p), n == null || n(p);
|
|
1438
1437
|
},
|
|
1439
1438
|
[t, n, a]
|
|
1440
1439
|
);
|
|
@@ -1450,11 +1449,11 @@ function bt({
|
|
|
1450
1449
|
defaultOpen: a = !1,
|
|
1451
1450
|
onOpenChange: i
|
|
1452
1451
|
}) {
|
|
1453
|
-
const l = X().replace(/:/g, ""),
|
|
1452
|
+
const l = X().replace(/:/g, ""), p = M(null), d = M(null), [u, f] = gt({
|
|
1454
1453
|
value: s,
|
|
1455
1454
|
defaultValue: a,
|
|
1456
1455
|
onChange: i
|
|
1457
|
-
}),
|
|
1456
|
+
}), m = vt({
|
|
1458
1457
|
isOpen: u,
|
|
1459
1458
|
onClose: () => f(!1)
|
|
1460
1459
|
}), h = ee(
|
|
@@ -1468,9 +1467,9 @@ function bt({
|
|
|
1468
1467
|
onOpenChange: i,
|
|
1469
1468
|
triggerId: `${l}-trigger`,
|
|
1470
1469
|
contentId: `${l}-content`,
|
|
1471
|
-
overlayRef:
|
|
1472
|
-
sheetRef:
|
|
1473
|
-
isClosingFromHistory:
|
|
1470
|
+
overlayRef: p,
|
|
1471
|
+
sheetRef: d,
|
|
1472
|
+
isClosingFromHistory: m
|
|
1474
1473
|
}),
|
|
1475
1474
|
[
|
|
1476
1475
|
u,
|
|
@@ -1481,18 +1480,18 @@ function bt({
|
|
|
1481
1480
|
r,
|
|
1482
1481
|
i,
|
|
1483
1482
|
l,
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1483
|
+
p,
|
|
1484
|
+
d,
|
|
1485
|
+
m
|
|
1487
1486
|
]
|
|
1488
1487
|
);
|
|
1489
|
-
return /* @__PURE__ */
|
|
1488
|
+
return /* @__PURE__ */ c(Ae.Provider, { value: h, children: e });
|
|
1490
1489
|
}
|
|
1491
1490
|
function _t({ children: e, asChild: o = !1 }) {
|
|
1492
1491
|
const { open: n, setOpen: t, triggerId: r, contentId: s } = re(), a = k(() => {
|
|
1493
1492
|
t((i) => !i);
|
|
1494
1493
|
}, [t]);
|
|
1495
|
-
return o ? /* @__PURE__ */
|
|
1494
|
+
return o ? /* @__PURE__ */ c(
|
|
1496
1495
|
K,
|
|
1497
1496
|
{
|
|
1498
1497
|
id: r,
|
|
@@ -1501,7 +1500,7 @@ function _t({ children: e, asChild: o = !1 }) {
|
|
|
1501
1500
|
onClick: a,
|
|
1502
1501
|
children: e
|
|
1503
1502
|
}
|
|
1504
|
-
) : /* @__PURE__ */
|
|
1503
|
+
) : /* @__PURE__ */ c(
|
|
1505
1504
|
"button",
|
|
1506
1505
|
{
|
|
1507
1506
|
id: r,
|
|
@@ -1514,37 +1513,37 @@ function _t({ children: e, asChild: o = !1 }) {
|
|
|
1514
1513
|
);
|
|
1515
1514
|
}
|
|
1516
1515
|
function $t({ children: e, container: o }) {
|
|
1517
|
-
const { open: n } = re(), [t, r] =
|
|
1518
|
-
return
|
|
1516
|
+
const { open: n } = re(), [t, r] = T(!1);
|
|
1517
|
+
return I(() => {
|
|
1519
1518
|
r(!0);
|
|
1520
1519
|
}, []), !t || !n ? null : te(e, o || document.body);
|
|
1521
1520
|
}
|
|
1522
1521
|
function xt({ className: e = "", style: o }) {
|
|
1523
|
-
const { open: n, setOpen: t, position: r, closeOnBackdrop: s, zIndex: a, overlayRef: i } = re(), [l,
|
|
1522
|
+
const { open: n, setOpen: t, position: r, closeOnBackdrop: s, zIndex: a, overlayRef: i } = re(), [l, p] = T(!1), [d, u] = T(!1), f = typeof s == "boolean" ? { clickOutside: s } : {
|
|
1524
1523
|
escapeKey: s.escapeKey ?? !1,
|
|
1525
1524
|
clickOutside: s.clickOutside ?? !1
|
|
1526
1525
|
};
|
|
1527
|
-
|
|
1526
|
+
I(() => {
|
|
1528
1527
|
if (n)
|
|
1529
|
-
|
|
1528
|
+
p(!0);
|
|
1530
1529
|
else if (l) {
|
|
1531
1530
|
u(!1);
|
|
1532
1531
|
const w = setTimeout(() => {
|
|
1533
|
-
|
|
1532
|
+
p(!1);
|
|
1534
1533
|
}, 300);
|
|
1535
1534
|
return () => clearTimeout(w);
|
|
1536
1535
|
}
|
|
1537
|
-
}, [n, l]),
|
|
1536
|
+
}, [n, l]), I(() => {
|
|
1538
1537
|
if (!l || !n) return;
|
|
1539
1538
|
const w = requestAnimationFrame(() => {
|
|
1540
|
-
const
|
|
1539
|
+
const v = requestAnimationFrame(() => {
|
|
1541
1540
|
u(!0);
|
|
1542
1541
|
});
|
|
1543
|
-
return () => cancelAnimationFrame(
|
|
1542
|
+
return () => cancelAnimationFrame(v);
|
|
1544
1543
|
});
|
|
1545
1544
|
return () => cancelAnimationFrame(w);
|
|
1546
1545
|
}, [l, n]);
|
|
1547
|
-
const
|
|
1546
|
+
const m = k(
|
|
1548
1547
|
(w) => {
|
|
1549
1548
|
f.clickOutside && w.target === i.current && t(!1);
|
|
1550
1549
|
},
|
|
@@ -1556,13 +1555,13 @@ function xt({ className: e = "", style: o }) {
|
|
|
1556
1555
|
zIndex: a,
|
|
1557
1556
|
...o
|
|
1558
1557
|
};
|
|
1559
|
-
return /* @__PURE__ */
|
|
1558
|
+
return /* @__PURE__ */ c(
|
|
1560
1559
|
"div",
|
|
1561
1560
|
{
|
|
1562
1561
|
ref: i,
|
|
1563
|
-
className: `motile-sheet__overlay ${
|
|
1562
|
+
className: `motile-sheet__overlay ${d ? "motile-sheet__overlay--visible" : ""} motile-sheet__overlay--${r} ${e}`,
|
|
1564
1563
|
style: h,
|
|
1565
|
-
onClick:
|
|
1564
|
+
onClick: m,
|
|
1566
1565
|
role: "presentation"
|
|
1567
1566
|
}
|
|
1568
1567
|
);
|
|
@@ -1575,10 +1574,10 @@ function Rt({ children: e, className: o = "", style: n }) {
|
|
|
1575
1574
|
closeOnBackdrop: a,
|
|
1576
1575
|
maxWidth: i,
|
|
1577
1576
|
zIndex: l,
|
|
1578
|
-
contentId:
|
|
1579
|
-
sheetRef:
|
|
1577
|
+
contentId: p,
|
|
1578
|
+
sheetRef: d,
|
|
1580
1579
|
isClosingFromHistory: u
|
|
1581
|
-
} = re(), [f,
|
|
1580
|
+
} = re(), [f, m] = T(!1), [h, w] = T(!1), v = typeof a == "boolean" ? { escapeKey: a, clickOutside: a } : {
|
|
1582
1581
|
escapeKey: a.escapeKey ?? !1,
|
|
1583
1582
|
clickOutside: a.clickOutside ?? !1
|
|
1584
1583
|
};
|
|
@@ -1586,23 +1585,23 @@ function Rt({ children: e, className: o = "", style: n }) {
|
|
|
1586
1585
|
enabled: t,
|
|
1587
1586
|
allowedSelectors: [".motile-sheet__body"]
|
|
1588
1587
|
}), ne({
|
|
1589
|
-
refs: [
|
|
1588
|
+
refs: [d],
|
|
1590
1589
|
handler: () => r(!1),
|
|
1591
|
-
enabled: t &&
|
|
1590
|
+
enabled: t && v.clickOutside
|
|
1592
1591
|
}), oe({
|
|
1593
1592
|
handler: () => r(!1),
|
|
1594
|
-
enabled: t &&
|
|
1595
|
-
}),
|
|
1593
|
+
enabled: t && v.escapeKey
|
|
1594
|
+
}), I(() => {
|
|
1596
1595
|
if (t)
|
|
1597
|
-
|
|
1596
|
+
m(!0);
|
|
1598
1597
|
else if (f) {
|
|
1599
1598
|
w(!1);
|
|
1600
1599
|
const $ = setTimeout(() => {
|
|
1601
|
-
|
|
1600
|
+
m(!1);
|
|
1602
1601
|
}, u ? 0 : 300);
|
|
1603
1602
|
return () => clearTimeout($);
|
|
1604
1603
|
}
|
|
1605
|
-
}, [t, f, u]),
|
|
1604
|
+
}, [t, f, u]), I(() => {
|
|
1606
1605
|
if (!f || !t || u) return;
|
|
1607
1606
|
const x = requestAnimationFrame(() => {
|
|
1608
1607
|
const $ = requestAnimationFrame(() => {
|
|
@@ -1618,11 +1617,11 @@ function Rt({ children: e, className: o = "", style: n }) {
|
|
|
1618
1617
|
zIndex: l + 1,
|
|
1619
1618
|
...n
|
|
1620
1619
|
};
|
|
1621
|
-
return /* @__PURE__ */
|
|
1620
|
+
return /* @__PURE__ */ c(
|
|
1622
1621
|
"div",
|
|
1623
1622
|
{
|
|
1624
|
-
ref:
|
|
1625
|
-
id:
|
|
1623
|
+
ref: d,
|
|
1624
|
+
id: p,
|
|
1626
1625
|
className: `motile-sheet__content motile-sheet__content--${s} ${h ? "motile-sheet__content--visible" : ""} ${o}`,
|
|
1627
1626
|
style: y,
|
|
1628
1627
|
role: "dialog",
|
|
@@ -1632,19 +1631,19 @@ function Rt({ children: e, className: o = "", style: n }) {
|
|
|
1632
1631
|
);
|
|
1633
1632
|
}
|
|
1634
1633
|
function Nt({ children: e, className: o = "" }) {
|
|
1635
|
-
return /* @__PURE__ */
|
|
1634
|
+
return /* @__PURE__ */ c("div", { className: `motile-sheet__header ${o}`, children: e });
|
|
1636
1635
|
}
|
|
1637
1636
|
function Ct({ children: e, className: o = "" }) {
|
|
1638
|
-
return /* @__PURE__ */
|
|
1637
|
+
return /* @__PURE__ */ c("h2", { id: "sheet-title", className: `motile-sheet__title ${o}`, children: e });
|
|
1639
1638
|
}
|
|
1640
1639
|
function kt({ children: e, className: o = "" }) {
|
|
1641
|
-
return /* @__PURE__ */
|
|
1640
|
+
return /* @__PURE__ */ c("div", { className: `motile-sheet__body ${o}`, children: e });
|
|
1642
1641
|
}
|
|
1643
1642
|
function St({ children: e, asChild: o = !1 }) {
|
|
1644
1643
|
const { setOpen: n } = re(), t = k(() => {
|
|
1645
1644
|
n(!1);
|
|
1646
1645
|
}, [n]);
|
|
1647
|
-
return o ? /* @__PURE__ */
|
|
1646
|
+
return o ? /* @__PURE__ */ c(K, { onClick: t, "aria-label": "닫기", children: e }) : /* @__PURE__ */ c("button", { onClick: t, "aria-label": "닫기", type: "button", children: e });
|
|
1648
1647
|
}
|
|
1649
1648
|
const Vt = {
|
|
1650
1649
|
Root: bt,
|
|
@@ -1675,7 +1674,7 @@ const Vt = {
|
|
|
1675
1674
|
}),
|
|
1676
1675
|
[e, o, t, r]
|
|
1677
1676
|
);
|
|
1678
|
-
return /* @__PURE__ */
|
|
1677
|
+
return /* @__PURE__ */ c(Be.Provider, { value: s, children: n });
|
|
1679
1678
|
}, He = B.forwardRef(
|
|
1680
1679
|
({
|
|
1681
1680
|
container: e,
|
|
@@ -1687,37 +1686,37 @@ const Vt = {
|
|
|
1687
1686
|
zIndex: a = 1e3,
|
|
1688
1687
|
className: i,
|
|
1689
1688
|
onClick: l,
|
|
1690
|
-
style:
|
|
1691
|
-
...
|
|
1689
|
+
style: p,
|
|
1690
|
+
...d
|
|
1692
1691
|
}, u) => {
|
|
1693
|
-
const { open: f, onOpenChange:
|
|
1692
|
+
const { open: f, onOpenChange: m } = se(), h = M(null), w = typeof n == "boolean" ? n : n.clickOutside ?? !1, v = typeof n == "boolean" ? n : n.escapeKey ?? !1;
|
|
1694
1693
|
me({
|
|
1695
1694
|
enabled: f && !t,
|
|
1696
1695
|
allowedSelectors: [".motile-modal__content"]
|
|
1697
1696
|
}), ne({
|
|
1698
1697
|
refs: [h],
|
|
1699
1698
|
handler: () => {
|
|
1700
|
-
w &&
|
|
1699
|
+
w && m(!1);
|
|
1701
1700
|
},
|
|
1702
1701
|
enabled: f
|
|
1703
1702
|
}), oe({
|
|
1704
1703
|
handler: () => {
|
|
1705
|
-
|
|
1704
|
+
v && m(!1);
|
|
1706
1705
|
},
|
|
1707
1706
|
enabled: f
|
|
1708
1707
|
});
|
|
1709
1708
|
const y = (_) => {
|
|
1710
|
-
l == null || l(_), _.target === _.currentTarget && w &&
|
|
1709
|
+
l == null || l(_), _.target === _.currentTarget && w && m(!1);
|
|
1711
1710
|
};
|
|
1712
1711
|
if (!f) return null;
|
|
1713
1712
|
const x = {
|
|
1714
1713
|
zIndex: a,
|
|
1715
|
-
...
|
|
1714
|
+
...p
|
|
1716
1715
|
}, $ = {
|
|
1717
1716
|
...r && { "--modal-width": r },
|
|
1718
1717
|
...s && { "--modal-max-width": s },
|
|
1719
1718
|
zIndex: a + 1
|
|
1720
|
-
}, N = /* @__PURE__ */
|
|
1719
|
+
}, N = /* @__PURE__ */ c(
|
|
1721
1720
|
"div",
|
|
1722
1721
|
{
|
|
1723
1722
|
ref: u,
|
|
@@ -1726,15 +1725,15 @@ const Vt = {
|
|
|
1726
1725
|
"data-variant": o,
|
|
1727
1726
|
onClick: y,
|
|
1728
1727
|
style: x,
|
|
1729
|
-
...
|
|
1730
|
-
children: /* @__PURE__ */
|
|
1728
|
+
...d,
|
|
1729
|
+
children: /* @__PURE__ */ c(
|
|
1731
1730
|
"div",
|
|
1732
1731
|
{
|
|
1733
1732
|
ref: h,
|
|
1734
1733
|
className: "motile-modal",
|
|
1735
1734
|
"data-variant": o,
|
|
1736
1735
|
style: $,
|
|
1737
|
-
children:
|
|
1736
|
+
children: d.children
|
|
1738
1737
|
}
|
|
1739
1738
|
)
|
|
1740
1739
|
}
|
|
@@ -1746,7 +1745,7 @@ He.displayName = "Modal.Overlay";
|
|
|
1746
1745
|
const Pe = B.forwardRef(
|
|
1747
1746
|
({ className: e, forceMount: o, ...n }, t) => {
|
|
1748
1747
|
const { open: r, titleId: s, descriptionId: a } = se();
|
|
1749
|
-
return !r && !o ? null : /* @__PURE__ */
|
|
1748
|
+
return !r && !o ? null : /* @__PURE__ */ c(
|
|
1750
1749
|
"div",
|
|
1751
1750
|
{
|
|
1752
1751
|
ref: t,
|
|
@@ -1765,7 +1764,7 @@ Pe.displayName = "Modal.Content";
|
|
|
1765
1764
|
const je = B.forwardRef(
|
|
1766
1765
|
({ className: e, ...o }, n) => {
|
|
1767
1766
|
const { titleId: t } = se();
|
|
1768
|
-
return /* @__PURE__ */
|
|
1767
|
+
return /* @__PURE__ */ c(
|
|
1769
1768
|
"h2",
|
|
1770
1769
|
{
|
|
1771
1770
|
ref: n,
|
|
@@ -1779,7 +1778,7 @@ const je = B.forwardRef(
|
|
|
1779
1778
|
je.displayName = "Modal.Title";
|
|
1780
1779
|
const Ve = B.forwardRef(({ className: e, ...o }, n) => {
|
|
1781
1780
|
const { descriptionId: t } = se();
|
|
1782
|
-
return /* @__PURE__ */
|
|
1781
|
+
return /* @__PURE__ */ c(
|
|
1783
1782
|
"div",
|
|
1784
1783
|
{
|
|
1785
1784
|
ref: n,
|
|
@@ -1795,7 +1794,7 @@ const Oe = B.forwardRef(
|
|
|
1795
1794
|
const { onOpenChange: a } = se(), i = (l) => {
|
|
1796
1795
|
n == null || n(l), a(!1);
|
|
1797
1796
|
};
|
|
1798
|
-
return e ? /* @__PURE__ */
|
|
1797
|
+
return e ? /* @__PURE__ */ c(
|
|
1799
1798
|
K,
|
|
1800
1799
|
{
|
|
1801
1800
|
...r,
|
|
@@ -1803,7 +1802,7 @@ const Oe = B.forwardRef(
|
|
|
1803
1802
|
ref: s,
|
|
1804
1803
|
children: t
|
|
1805
1804
|
}
|
|
1806
|
-
) : /* @__PURE__ */
|
|
1805
|
+
) : /* @__PURE__ */ c(
|
|
1807
1806
|
"button",
|
|
1808
1807
|
{
|
|
1809
1808
|
ref: s,
|
|
@@ -1812,7 +1811,7 @@ const Oe = B.forwardRef(
|
|
|
1812
1811
|
onClick: i,
|
|
1813
1812
|
"aria-label": "닫기",
|
|
1814
1813
|
...r,
|
|
1815
|
-
children: t || /* @__PURE__ */
|
|
1814
|
+
children: t || /* @__PURE__ */ L(
|
|
1816
1815
|
"svg",
|
|
1817
1816
|
{
|
|
1818
1817
|
width: "18",
|
|
@@ -1824,8 +1823,8 @@ const Oe = B.forwardRef(
|
|
|
1824
1823
|
strokeLinecap: "round",
|
|
1825
1824
|
strokeLinejoin: "round",
|
|
1826
1825
|
children: [
|
|
1827
|
-
/* @__PURE__ */
|
|
1828
|
-
/* @__PURE__ */
|
|
1826
|
+
/* @__PURE__ */ c("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
1827
|
+
/* @__PURE__ */ c("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
1829
1828
|
]
|
|
1830
1829
|
}
|
|
1831
1830
|
)
|
|
@@ -1835,7 +1834,7 @@ const Oe = B.forwardRef(
|
|
|
1835
1834
|
);
|
|
1836
1835
|
Oe.displayName = "Modal.Close";
|
|
1837
1836
|
const Fe = B.forwardRef(
|
|
1838
|
-
({ className: e, ...o }, n) => /* @__PURE__ */
|
|
1837
|
+
({ className: e, ...o }, n) => /* @__PURE__ */ c(
|
|
1839
1838
|
"div",
|
|
1840
1839
|
{
|
|
1841
1840
|
ref: n,
|
|
@@ -1846,7 +1845,7 @@ const Fe = B.forwardRef(
|
|
|
1846
1845
|
);
|
|
1847
1846
|
Fe.displayName = "Modal.Footer";
|
|
1848
1847
|
const We = B.forwardRef(
|
|
1849
|
-
({ className: e, ...o }, n) => /* @__PURE__ */
|
|
1848
|
+
({ className: e, ...o }, n) => /* @__PURE__ */ c(
|
|
1850
1849
|
"div",
|
|
1851
1850
|
{
|
|
1852
1851
|
ref: n,
|
|
@@ -1873,18 +1872,18 @@ function Et() {
|
|
|
1873
1872
|
return e;
|
|
1874
1873
|
}
|
|
1875
1874
|
function Dt({ toast: e, onRemove: o }) {
|
|
1876
|
-
const [n, t] =
|
|
1875
|
+
const [n, t] = T(!1), r = k(() => {
|
|
1877
1876
|
t(!0), setTimeout(() => {
|
|
1878
1877
|
o(e.id);
|
|
1879
1878
|
}, 250);
|
|
1880
1879
|
}, [e.id, o]);
|
|
1881
|
-
|
|
1880
|
+
I(() => {
|
|
1882
1881
|
const l = setTimeout(r, e.duration);
|
|
1883
1882
|
return () => {
|
|
1884
1883
|
clearTimeout(l);
|
|
1885
1884
|
};
|
|
1886
1885
|
}, [r, e.duration]);
|
|
1887
|
-
const s = ee(() => e.variant === "success" ? /* @__PURE__ */
|
|
1886
|
+
const s = ee(() => e.variant === "success" ? /* @__PURE__ */ L(
|
|
1888
1887
|
"svg",
|
|
1889
1888
|
{
|
|
1890
1889
|
width: "20",
|
|
@@ -1893,8 +1892,8 @@ function Dt({ toast: e, onRemove: o }) {
|
|
|
1893
1892
|
fill: "none",
|
|
1894
1893
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1895
1894
|
children: [
|
|
1896
|
-
/* @__PURE__ */
|
|
1897
|
-
/* @__PURE__ */
|
|
1895
|
+
/* @__PURE__ */ c("circle", { cx: "10", cy: "10", r: "9", fill: "currentColor", opacity: "0.2" }),
|
|
1896
|
+
/* @__PURE__ */ c(
|
|
1898
1897
|
"path",
|
|
1899
1898
|
{
|
|
1900
1899
|
d: "M6 10L8.5 12.5L14 7",
|
|
@@ -1906,7 +1905,7 @@ function Dt({ toast: e, onRemove: o }) {
|
|
|
1906
1905
|
)
|
|
1907
1906
|
]
|
|
1908
1907
|
}
|
|
1909
|
-
) : e.variant === "error" ? /* @__PURE__ */
|
|
1908
|
+
) : e.variant === "error" ? /* @__PURE__ */ L(
|
|
1910
1909
|
"svg",
|
|
1911
1910
|
{
|
|
1912
1911
|
width: "20",
|
|
@@ -1915,8 +1914,8 @@ function Dt({ toast: e, onRemove: o }) {
|
|
|
1915
1914
|
fill: "none",
|
|
1916
1915
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1917
1916
|
children: [
|
|
1918
|
-
/* @__PURE__ */
|
|
1919
|
-
/* @__PURE__ */
|
|
1917
|
+
/* @__PURE__ */ c("circle", { cx: "10", cy: "10", r: "9", fill: "currentColor", opacity: "0.2" }),
|
|
1918
|
+
/* @__PURE__ */ c(
|
|
1920
1919
|
"path",
|
|
1921
1920
|
{
|
|
1922
1921
|
d: "M7 7L13 13M13 7L7 13",
|
|
@@ -1927,7 +1926,7 @@ function Dt({ toast: e, onRemove: o }) {
|
|
|
1927
1926
|
)
|
|
1928
1927
|
]
|
|
1929
1928
|
}
|
|
1930
|
-
) : e.variant === "warning" ? /* @__PURE__ */
|
|
1929
|
+
) : e.variant === "warning" ? /* @__PURE__ */ L(
|
|
1931
1930
|
"svg",
|
|
1932
1931
|
{
|
|
1933
1932
|
width: "20",
|
|
@@ -1936,8 +1935,8 @@ function Dt({ toast: e, onRemove: o }) {
|
|
|
1936
1935
|
fill: "none",
|
|
1937
1936
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1938
1937
|
children: [
|
|
1939
|
-
/* @__PURE__ */
|
|
1940
|
-
/* @__PURE__ */
|
|
1938
|
+
/* @__PURE__ */ c("path", { d: "M10 2L2 17H18L10 2Z", fill: "currentColor", opacity: "0.2" }),
|
|
1939
|
+
/* @__PURE__ */ c(
|
|
1941
1940
|
"path",
|
|
1942
1941
|
{
|
|
1943
1942
|
d: "M10 7V11M10 14V14.5",
|
|
@@ -1948,7 +1947,7 @@ function Dt({ toast: e, onRemove: o }) {
|
|
|
1948
1947
|
)
|
|
1949
1948
|
]
|
|
1950
1949
|
}
|
|
1951
|
-
) : e.variant === "info" ? /* @__PURE__ */
|
|
1950
|
+
) : e.variant === "info" ? /* @__PURE__ */ L(
|
|
1952
1951
|
"svg",
|
|
1953
1952
|
{
|
|
1954
1953
|
width: "20",
|
|
@@ -1957,8 +1956,8 @@ function Dt({ toast: e, onRemove: o }) {
|
|
|
1957
1956
|
fill: "none",
|
|
1958
1957
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1959
1958
|
children: [
|
|
1960
|
-
/* @__PURE__ */
|
|
1961
|
-
/* @__PURE__ */
|
|
1959
|
+
/* @__PURE__ */ c("circle", { cx: "10", cy: "10", r: "9", fill: "currentColor", opacity: "0.2" }),
|
|
1960
|
+
/* @__PURE__ */ c(
|
|
1962
1961
|
"path",
|
|
1963
1962
|
{
|
|
1964
1963
|
d: "M10 7V7.5M10 10V14",
|
|
@@ -1974,7 +1973,7 @@ function Dt({ toast: e, onRemove: o }) {
|
|
|
1974
1973
|
`${a}--${e.variant}`,
|
|
1975
1974
|
n && `${a}--exiting`
|
|
1976
1975
|
].filter(Boolean).join(" ");
|
|
1977
|
-
return /* @__PURE__ */
|
|
1976
|
+
return /* @__PURE__ */ L(
|
|
1978
1977
|
"div",
|
|
1979
1978
|
{
|
|
1980
1979
|
className: i,
|
|
@@ -1983,48 +1982,52 @@ function Dt({ toast: e, onRemove: o }) {
|
|
|
1983
1982
|
"aria-atomic": "true",
|
|
1984
1983
|
"data-toast-id": e.id,
|
|
1985
1984
|
children: [
|
|
1986
|
-
s && /* @__PURE__ */
|
|
1987
|
-
/* @__PURE__ */
|
|
1985
|
+
s && /* @__PURE__ */ c("div", { className: `${a}__icon`, children: s }),
|
|
1986
|
+
/* @__PURE__ */ c("div", { className: `${a}__message`, children: e.message })
|
|
1988
1987
|
]
|
|
1989
1988
|
}
|
|
1990
1989
|
);
|
|
1991
1990
|
}
|
|
1992
1991
|
function Ft({ children: e, zIndex: o = 9999 }) {
|
|
1993
|
-
const [n, t] =
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
1992
|
+
const [n, t] = T([]), [r, s] = T(!1);
|
|
1993
|
+
I(() => {
|
|
1994
|
+
s(!0);
|
|
1995
|
+
}, []);
|
|
1996
|
+
const a = k(
|
|
1997
|
+
(u, f = "default", m) => {
|
|
1998
|
+
const h = `toast-${Date.now()}-${Math.random()}`, w = {
|
|
1999
|
+
id: h,
|
|
2000
|
+
message: u,
|
|
2001
|
+
variant: f,
|
|
2002
|
+
duration: (m == null ? void 0 : m.duration) ?? 4e3,
|
|
2003
|
+
zIndex: m == null ? void 0 : m.zIndex,
|
|
2001
2004
|
createdAt: Date.now()
|
|
2002
2005
|
};
|
|
2003
|
-
return t((
|
|
2006
|
+
return t((v) => [w, ...v]), h;
|
|
2004
2007
|
},
|
|
2005
2008
|
[]
|
|
2006
|
-
),
|
|
2007
|
-
t((
|
|
2008
|
-
}, []),
|
|
2009
|
+
), i = k((u) => {
|
|
2010
|
+
t((f) => f.filter((m) => m.id !== u));
|
|
2011
|
+
}, []), l = ee(
|
|
2009
2012
|
() => ({
|
|
2010
2013
|
toasts: n,
|
|
2011
|
-
addToast:
|
|
2014
|
+
addToast: a
|
|
2012
2015
|
}),
|
|
2013
|
-
[n,
|
|
2014
|
-
),
|
|
2015
|
-
(
|
|
2016
|
-
),
|
|
2017
|
-
return /* @__PURE__ */
|
|
2016
|
+
[n, a]
|
|
2017
|
+
), p = n.filter(
|
|
2018
|
+
(u) => u.zIndex !== void 0
|
|
2019
|
+
), d = p.length > 0 ? Math.max(...p.map((u) => u.zIndex)) : o;
|
|
2020
|
+
return /* @__PURE__ */ L(Ke.Provider, { value: l, children: [
|
|
2018
2021
|
e,
|
|
2019
|
-
|
|
2020
|
-
/* @__PURE__ */
|
|
2022
|
+
r && te(
|
|
2023
|
+
/* @__PURE__ */ c(
|
|
2021
2024
|
"div",
|
|
2022
2025
|
{
|
|
2023
2026
|
className: "motile-toast-container",
|
|
2024
2027
|
"aria-live": "polite",
|
|
2025
2028
|
"aria-label": "Notifications",
|
|
2026
|
-
style: { zIndex:
|
|
2027
|
-
children: n.map((
|
|
2029
|
+
style: { zIndex: d },
|
|
2030
|
+
children: n.map((u) => /* @__PURE__ */ c(Dt, { toast: u, onRemove: i }, u.id))
|
|
2028
2031
|
}
|
|
2029
2032
|
),
|
|
2030
2033
|
document.body
|
|
@@ -2071,21 +2074,21 @@ const Ye = q(null), ze = () => {
|
|
|
2071
2074
|
style: s,
|
|
2072
2075
|
...a
|
|
2073
2076
|
}, i) => {
|
|
2074
|
-
const [l,
|
|
2075
|
-
|
|
2077
|
+
const [l, p] = T(null), [d, u] = T(null), f = M(null), m = 1.7, h = (y) => {
|
|
2078
|
+
p(y.clientX), u(y.clientY);
|
|
2076
2079
|
}, w = () => {
|
|
2077
|
-
|
|
2078
|
-
},
|
|
2080
|
+
p(null), u(null);
|
|
2081
|
+
}, v = B.useMemo(
|
|
2079
2082
|
() => ({
|
|
2080
|
-
magnification:
|
|
2083
|
+
magnification: m,
|
|
2081
2084
|
mouseX: l,
|
|
2082
|
-
mouseY:
|
|
2085
|
+
mouseY: d,
|
|
2083
2086
|
position: e,
|
|
2084
2087
|
color: n
|
|
2085
2088
|
}),
|
|
2086
|
-
[
|
|
2089
|
+
[m, l, d, e, n]
|
|
2087
2090
|
);
|
|
2088
|
-
return /* @__PURE__ */
|
|
2091
|
+
return /* @__PURE__ */ c(Ye.Provider, { value: v, children: /* @__PURE__ */ c(
|
|
2089
2092
|
"div",
|
|
2090
2093
|
{
|
|
2091
2094
|
ref: (y) => {
|
|
@@ -2106,29 +2109,29 @@ qe.displayName = "Dock.Root";
|
|
|
2106
2109
|
const Ue = j(
|
|
2107
2110
|
({ icon: e, label: o, asChild: n, color: t, className: r, children: s, style: a, ...i }, l) => {
|
|
2108
2111
|
const {
|
|
2109
|
-
magnification:
|
|
2110
|
-
mouseX:
|
|
2112
|
+
magnification: p,
|
|
2113
|
+
mouseX: d,
|
|
2111
2114
|
mouseY: u,
|
|
2112
2115
|
position: f,
|
|
2113
|
-
color:
|
|
2114
|
-
} = ze(), h =
|
|
2115
|
-
|
|
2116
|
+
color: m
|
|
2117
|
+
} = ze(), h = M(null), w = M(), v = t || m;
|
|
2118
|
+
I(() => {
|
|
2116
2119
|
if (!h.current || window.matchMedia(
|
|
2117
2120
|
"(hover: none) and (pointer: coarse)"
|
|
2118
2121
|
).matches) return;
|
|
2119
2122
|
const _ = () => {
|
|
2120
2123
|
if (h.current)
|
|
2121
|
-
if (
|
|
2124
|
+
if (d !== null && u !== null) {
|
|
2122
2125
|
const b = h.current.getBoundingClientRect();
|
|
2123
|
-
let
|
|
2126
|
+
let g;
|
|
2124
2127
|
if (f === "top" || f === "bottom") {
|
|
2125
2128
|
const O = b.left + b.width / 2;
|
|
2126
|
-
|
|
2129
|
+
g = Math.abs(d - O);
|
|
2127
2130
|
} else {
|
|
2128
2131
|
const O = b.top + b.height / 2;
|
|
2129
|
-
|
|
2132
|
+
g = Math.abs(u - O);
|
|
2130
2133
|
}
|
|
2131
|
-
const R = Math.max(0, 1 -
|
|
2134
|
+
const R = Math.max(0, 1 - g / 100), H = R * R, Y = 1 + (p - 1) * H;
|
|
2132
2135
|
h.current.style.transform = `scale(${Y})`;
|
|
2133
2136
|
} else
|
|
2134
2137
|
h.current.style.transform = "scale(1)";
|
|
@@ -2136,10 +2139,10 @@ const Ue = j(
|
|
|
2136
2139
|
return w.current = requestAnimationFrame(_), () => {
|
|
2137
2140
|
w.current && cancelAnimationFrame(w.current);
|
|
2138
2141
|
};
|
|
2139
|
-
}, [
|
|
2142
|
+
}, [d, u, p, f]);
|
|
2140
2143
|
const y = f === "top" ? "bottom" : f === "bottom" ? "top" : f === "left" ? "right" : "left", x = {
|
|
2141
2144
|
...a,
|
|
2142
|
-
...
|
|
2145
|
+
...v && { "--motile-dock-color": v }
|
|
2143
2146
|
};
|
|
2144
2147
|
if (n && B.isValidElement(s)) {
|
|
2145
2148
|
const N = B.cloneElement(s, {
|
|
@@ -2150,12 +2153,12 @@ const Ue = j(
|
|
|
2150
2153
|
style: x,
|
|
2151
2154
|
"aria-label": o
|
|
2152
2155
|
});
|
|
2153
|
-
return o ? /* @__PURE__ */
|
|
2154
|
-
/* @__PURE__ */
|
|
2155
|
-
/* @__PURE__ */
|
|
2156
|
+
return o ? /* @__PURE__ */ L(Q.Root, { position: y, showArrow: !0, children: [
|
|
2157
|
+
/* @__PURE__ */ c(Q.Trigger, { children: N }),
|
|
2158
|
+
/* @__PURE__ */ c(Q.Content, { children: o })
|
|
2156
2159
|
] }) : N;
|
|
2157
2160
|
}
|
|
2158
|
-
const $ = /* @__PURE__ */
|
|
2161
|
+
const $ = /* @__PURE__ */ c(
|
|
2159
2162
|
"button",
|
|
2160
2163
|
{
|
|
2161
2164
|
ref: (N) => {
|
|
@@ -2169,9 +2172,9 @@ const Ue = j(
|
|
|
2169
2172
|
children: e || s
|
|
2170
2173
|
}
|
|
2171
2174
|
);
|
|
2172
|
-
return o ? /* @__PURE__ */
|
|
2173
|
-
/* @__PURE__ */
|
|
2174
|
-
/* @__PURE__ */
|
|
2175
|
+
return o ? /* @__PURE__ */ L(Q.Root, { position: y, showArrow: !0, children: [
|
|
2176
|
+
/* @__PURE__ */ c(Q.Trigger, { children: $ }),
|
|
2177
|
+
/* @__PURE__ */ c(Q.Content, { children: o })
|
|
2175
2178
|
] }) : $;
|
|
2176
2179
|
}
|
|
2177
2180
|
);
|
|
@@ -2179,7 +2182,7 @@ Ue.displayName = "Dock.Item";
|
|
|
2179
2182
|
const Xe = j(
|
|
2180
2183
|
({ className: e, ...o }, n) => {
|
|
2181
2184
|
const { position: t } = ze();
|
|
2182
|
-
return /* @__PURE__ */
|
|
2185
|
+
return /* @__PURE__ */ c(
|
|
2183
2186
|
"div",
|
|
2184
2187
|
{
|
|
2185
2188
|
ref: n,
|
|
@@ -2212,7 +2215,7 @@ const Kt = {
|
|
|
2212
2215
|
closeOnEscapeKey: s = !0,
|
|
2213
2216
|
children: a
|
|
2214
2217
|
}) => {
|
|
2215
|
-
const i =
|
|
2218
|
+
const i = M(null), l = X();
|
|
2216
2219
|
ne({
|
|
2217
2220
|
refs: [i],
|
|
2218
2221
|
handler: () => {
|
|
@@ -2225,7 +2228,7 @@ const Kt = {
|
|
|
2225
2228
|
},
|
|
2226
2229
|
enabled: e
|
|
2227
2230
|
});
|
|
2228
|
-
const
|
|
2231
|
+
const p = B.useMemo(
|
|
2229
2232
|
() => ({
|
|
2230
2233
|
open: e,
|
|
2231
2234
|
onOpenChange: o,
|
|
@@ -2233,21 +2236,21 @@ const Kt = {
|
|
|
2233
2236
|
triggerId: l
|
|
2234
2237
|
}),
|
|
2235
2238
|
[e, o, n, l]
|
|
2236
|
-
),
|
|
2237
|
-
return /* @__PURE__ */
|
|
2239
|
+
), d = t ? { "--motile-speeddial-color": t } : void 0;
|
|
2240
|
+
return /* @__PURE__ */ c(Ze.Provider, { value: p, children: /* @__PURE__ */ c(
|
|
2238
2241
|
"div",
|
|
2239
2242
|
{
|
|
2240
2243
|
ref: i,
|
|
2241
2244
|
className: "motile-speed-dial",
|
|
2242
|
-
style:
|
|
2245
|
+
style: d,
|
|
2243
2246
|
children: a
|
|
2244
2247
|
}
|
|
2245
2248
|
) });
|
|
2246
2249
|
}, Je = j(({ className: e, onClick: o, children: n, asChild: t = !1, ...r }, s) => {
|
|
2247
|
-
const { open: a, onOpenChange: i, triggerId: l } = Ge(),
|
|
2248
|
-
o == null || o(
|
|
2250
|
+
const { open: a, onOpenChange: i, triggerId: l } = Ge(), p = (d) => {
|
|
2251
|
+
o == null || o(d), d.defaultPrevented || i(!a);
|
|
2249
2252
|
};
|
|
2250
|
-
return t ? /* @__PURE__ */
|
|
2253
|
+
return t ? /* @__PURE__ */ c(
|
|
2251
2254
|
K,
|
|
2252
2255
|
{
|
|
2253
2256
|
ref: s,
|
|
@@ -2255,11 +2258,11 @@ const Kt = {
|
|
|
2255
2258
|
className: e ? `motile-speed-dial__trigger ${e}` : "motile-speed-dial__trigger",
|
|
2256
2259
|
"aria-expanded": a,
|
|
2257
2260
|
"aria-haspopup": "menu",
|
|
2258
|
-
onClick:
|
|
2261
|
+
onClick: p,
|
|
2259
2262
|
...r,
|
|
2260
2263
|
children: n
|
|
2261
2264
|
}
|
|
2262
|
-
) : /* @__PURE__ */
|
|
2265
|
+
) : /* @__PURE__ */ c(
|
|
2263
2266
|
"button",
|
|
2264
2267
|
{
|
|
2265
2268
|
ref: s,
|
|
@@ -2268,7 +2271,7 @@ const Kt = {
|
|
|
2268
2271
|
className: e ? `motile-speed-dial__trigger ${e}` : "motile-speed-dial__trigger",
|
|
2269
2272
|
"aria-expanded": a,
|
|
2270
2273
|
"aria-haspopup": "menu",
|
|
2271
|
-
onClick:
|
|
2274
|
+
onClick: p,
|
|
2272
2275
|
...r,
|
|
2273
2276
|
children: n
|
|
2274
2277
|
}
|
|
@@ -2278,13 +2281,13 @@ Je.displayName = "SpeedDial.Trigger";
|
|
|
2278
2281
|
const Qe = j(({ className: e, children: o, ...n }, t) => {
|
|
2279
2282
|
const { open: r, direction: s, triggerId: a } = Ge();
|
|
2280
2283
|
if (!r) return null;
|
|
2281
|
-
const i = B.Children.map(o, (l,
|
|
2284
|
+
const i = B.Children.map(o, (l, p) => B.isValidElement(l) ? B.cloneElement(l, {
|
|
2282
2285
|
style: {
|
|
2283
|
-
"--action-index":
|
|
2286
|
+
"--action-index": p,
|
|
2284
2287
|
...l.props.style || {}
|
|
2285
2288
|
}
|
|
2286
2289
|
}) : l);
|
|
2287
|
-
return /* @__PURE__ */
|
|
2290
|
+
return /* @__PURE__ */ c(
|
|
2288
2291
|
"div",
|
|
2289
2292
|
{
|
|
2290
2293
|
ref: t,
|
|
@@ -2302,7 +2305,7 @@ const et = j(({ className: e, onClick: o, children: n, asChild: t = !1, ...r },
|
|
|
2302
2305
|
const a = (i) => {
|
|
2303
2306
|
o == null || o(i);
|
|
2304
2307
|
};
|
|
2305
|
-
return t ? /* @__PURE__ */
|
|
2308
|
+
return t ? /* @__PURE__ */ c(
|
|
2306
2309
|
K,
|
|
2307
2310
|
{
|
|
2308
2311
|
ref: s,
|
|
@@ -2312,7 +2315,7 @@ const et = j(({ className: e, onClick: o, children: n, asChild: t = !1, ...r },
|
|
|
2312
2315
|
...r,
|
|
2313
2316
|
children: n
|
|
2314
2317
|
}
|
|
2315
|
-
) : /* @__PURE__ */
|
|
2318
|
+
) : /* @__PURE__ */ c(
|
|
2316
2319
|
"button",
|
|
2317
2320
|
{
|
|
2318
2321
|
ref: s,
|