motile-ui 0.9.0

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.
Files changed (44) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +216 -0
  3. package/dist/components/Accordion/Accordion.d.ts +36 -0
  4. package/dist/components/Accordion/index.d.ts +2 -0
  5. package/dist/components/Badge/Badge.d.ts +25 -0
  6. package/dist/components/Badge/index.d.ts +2 -0
  7. package/dist/components/Button/Button.d.ts +47 -0
  8. package/dist/components/Button/index.d.ts +2 -0
  9. package/dist/components/Checkbox/Checkbox.d.ts +31 -0
  10. package/dist/components/Checkbox/index.d.ts +2 -0
  11. package/dist/components/Dock/Dock.d.ts +63 -0
  12. package/dist/components/Dock/index.d.ts +2 -0
  13. package/dist/components/Drawer/Drawer.d.ts +97 -0
  14. package/dist/components/Drawer/index.d.ts +2 -0
  15. package/dist/components/Input/Input.d.ts +53 -0
  16. package/dist/components/Input/index.d.ts +2 -0
  17. package/dist/components/Modal/Modal.d.ts +150 -0
  18. package/dist/components/Modal/index.d.ts +2 -0
  19. package/dist/components/Popover/Popover.d.ts +38 -0
  20. package/dist/components/Popover/index.d.ts +2 -0
  21. package/dist/components/Sheet/Sheet.d.ts +76 -0
  22. package/dist/components/Sheet/index.d.ts +2 -0
  23. package/dist/components/Skeleton/Skeleton.d.ts +22 -0
  24. package/dist/components/Skeleton/index.d.ts +2 -0
  25. package/dist/components/SpeedDial/SpeedDial.d.ts +89 -0
  26. package/dist/components/SpeedDial/index.d.ts +2 -0
  27. package/dist/components/Switch/Switch.d.ts +16 -0
  28. package/dist/components/Switch/index.d.ts +2 -0
  29. package/dist/components/Textarea/Textarea.d.ts +57 -0
  30. package/dist/components/Textarea/index.d.ts +2 -0
  31. package/dist/components/Toast/Toast.d.ts +25 -0
  32. package/dist/components/Toast/index.d.ts +4 -0
  33. package/dist/components/Toast/useToast.d.ts +28 -0
  34. package/dist/components/Tooltip/Tooltip.d.ts +66 -0
  35. package/dist/components/Tooltip/index.d.ts +2 -0
  36. package/dist/hooks/useClickOutside.d.ts +74 -0
  37. package/dist/hooks/useEscapeKey.d.ts +29 -0
  38. package/dist/hooks/useHistoryClose.d.ts +50 -0
  39. package/dist/hooks/useScrollLock.d.ts +19 -0
  40. package/dist/index.d.ts +37 -0
  41. package/dist/motile-ui.es.js +2356 -0
  42. package/dist/motile-ui.umd.js +2 -0
  43. package/dist/utils/Slot.d.ts +4 -0
  44. package/package.json +81 -0
@@ -0,0 +1,2 @@
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
+ (function(S,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react"),require("react/jsx-runtime"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime","react-dom"],n):(S=typeof globalThis<"u"?globalThis:S||self,n(S.MotileUI={},S.React,S.jsxRuntime,S.ReactDOM))})(this,function(S,n,i,X){"use strict";const O=n.forwardRef(({children:e,...r},o)=>{if(!n.isValidElement(e))return null;const t=Ge(e);return n.cloneElement(e,{...Je(r,e.props),ref:o?Qe(o,t):t})});O.displayName="Slot";function Ge(e){var t;let r=(t=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:t.get;return r&&"isReactWarning"in r&&r.isReactWarning?e.ref:e.props.ref||e.ref}function Je(e,r){const o={...r};e.className&&r.className?o.className=`${r.className} ${e.className}`:e.className&&(o.className=e.className),(e.style||r.style)&&(o.style={...r.style,...e.style});for(const t in r){const s=e[t],l=r[t];/^on[A-Z]/.test(t)?typeof s=="function"&&typeof l=="function"?o[t]=(...a)=>{l(...a),s(...a)}:typeof s=="function"&&(o[t]=s):t!=="className"&&t!=="style"&&(o[t]=s??l)}for(const t in e)t in o||(o[t]=e[t]);return o}function Qe(...e){return r=>{e.forEach(o=>{typeof o=="function"?o(r):o!=null&&typeof o=="object"&&(o.current=r)})}}const re=n.forwardRef(({variant:e="primary",size:r="large",fullWidth:o,color:t,hoverOnTouch:s=!1,isLoading:l=!1,asChild:c=!1,children:a,className:d,disabled:h,style:u,...f},p)=>{const m="motile-btn",y=o??r==="large",v=[m,`${m}--${e}`,`${m}--${r}`,y&&`${m}--full-width`,(h||l)&&`${m}--disabled`,l&&`${m}--loading`,s&&`${m}--hover-on-touch`,d].filter(Boolean).join(" "),g={...u,...t&&{"--motile-btn-color":t}};return c?i.jsx(O,{ref:p,className:v,style:g,...f,children:a}):i.jsx("button",{ref:p,type:"button",className:v,disabled:h||l,"aria-busy":l||void 0,style:g,...f,children:i.jsxs("span",{className:`${m}__wrapper`,children:[i.jsx("span",{className:`${m}__content`,style:{opacity:l?0:1},children:a}),l&&i.jsx("span",{className:`${m}__loading`,role:"status","aria-label":"Loading",children:i.jsxs("span",{className:`${m}__dots`,children:[i.jsx("span",{className:`${m}__dot`}),i.jsx("span",{className:`${m}__dot`}),i.jsx("span",{className:`${m}__dot`})]})})]})})});re.displayName="Button";const se=n.forwardRef(({id:e,autoFocus:r=!1,autoSelect:o=!1,variant:t="default",isError:s,errorMessage:l,onClear:c,leftIcon:a,rightIcon:d,className:h,value:u,color:f,style:p,maxLength:m,label:y,placeholder:v,...g},w)=>{const C=n.useId().replace(/:/g,""),x=e??`motile-input-${C}`,k=n.useRef(null),$=w||k,_=s??!!l;n.useEffect(()=>{if(r&&$.current){const D=setTimeout(()=>{$.current&&($.current.focus(),o&&$.current.select())},50);return()=>clearTimeout(D)}},[r,o]);const b="motile-input",B=c&&u,N=!!a,L=B||d,V=[b,`${b}--${t}`,_&&`${b}--error`,_&&`${b}--shake`,N&&`${b}--with-left-icon`,L&&`${b}--with-right-content`,y&&`${b}--with-label`,h].filter(Boolean).join(" "),H=[`${b}-wrapper`,y&&`${b}-wrapper--with-label`].filter(Boolean).join(" "),E=[`${b}__label`,_&&`${b}__label--error`].filter(Boolean).join(" "),M=f?{"--motile-input-color":f}:void 0,I={...p},F=u?String(u).length:0,A=m!==void 0,T=[g["aria-describedby"],l?`${x}-error`:void 0,A?`${x}-counter`:void 0].filter(Boolean).join(" ")||void 0;return i.jsxs(i.Fragment,{children:[i.jsxs("div",{className:H,style:M,children:[y&&i.jsx("label",{className:E,htmlFor:x,children:y}),a&&i.jsx("div",{className:`${b}__left-icon`,children:a}),i.jsx("input",{id:x,...g,"aria-describedby":T,"aria-invalid":_||void 0,ref:$,className:V,value:u,maxLength:m,style:I,placeholder:y?v||" ":v}),d&&!B&&i.jsx("div",{className:`${b}__right-icon`,children:d}),B&&i.jsx("button",{type:"button",onClick:c,className:`${b}__clear-button`,"aria-label":"지우기",children:i.jsx("svg",{className:`${b}__clear-icon`,viewBox:"0 0 20 20",fill:"currentColor",children:i.jsx("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"})})})]}),(l||A)&&i.jsxs("div",{className:`${b}__helper-text ${l&&A?`${b}__helper-text--both`:l?`${b}__helper-text--error-only`:`${b}__helper-text--counter-only`}`,children:[l&&i.jsx("span",{id:`${x}-error`,className:`${b}__error-message`,role:"alert",children:l}),A&&i.jsxs("span",{id:`${x}-counter`,className:`${b}__counter`,children:[F,"/",m]})]})]})});se.displayName="Input";const le=n.forwardRef(({autoFocus:e=!1,autoSelect:r=!1,isError:o,errorMessage:t,className:s,value:l,color:c,style:a,maxLength:d,label:h,placeholder:u,rows:f=4,resize:p="none",autoSize:m=!1,...y},v)=>{const g=n.useRef(null),w=v||g,[C,x]=n.useState({height:void 0,isMaxHeight:!1}),k=o??!!t,$=n.useMemo(()=>typeof m=="boolean"?m?{minRows:f,maxRows:void 0}:void 0:m?{minRows:m.minRows??f,maxRows:m.maxRows}:void 0,[m,f]);n.useEffect(()=>{if(e&&w.current){const I=setTimeout(()=>{w.current&&(w.current.focus(),r&&w.current.select())},50);return()=>clearTimeout(I)}},[e,r]),n.useLayoutEffect(()=>{if(!$||!w.current)return;const I=w.current;I.style.height="auto";const F=I.scrollHeight,A=window.getComputedStyle(I),T=parseInt(A.lineHeight,10),D=parseInt(A.paddingTop,10),j=parseInt(A.paddingBottom,10),Q=parseInt(A.borderTopWidth,10),R=parseInt(A.borderBottomWidth,10),Ze=D+j+Q+R,ee=$.minRows?T*$.minRows+Ze:void 0,te=$.maxRows?T*$.maxRows+Ze:void 0;let z=F,oe=!1;ee!==void 0&&z<ee&&(z=ee),te!==void 0&&z>te&&(z=te,oe=!0),I.style.height=`${z}px`,x(ne=>z!==ne.height||oe!==ne.isMaxHeight?{height:z,isMaxHeight:oe}:ne)},[l,$]);const _="motile-textarea",b=[_,k&&`${_}--error`,k&&`${_}--shake`,h&&`${_}--with-label`,s].filter(Boolean).join(" "),B=[`${_}-wrapper`,h&&`${_}-wrapper--with-label`].filter(Boolean).join(" "),N=[`${_}__label`,k&&`${_}__label--error`].filter(Boolean).join(" "),L=c?{"--motile-textarea-color":c}:void 0,V={...a,resize:$?"none":p,...$?{height:C.height!==void 0?C.height:"auto",minHeight:"auto",overflowY:C.isMaxHeight?"auto":"hidden"}:{}},H=l?String(l).length:0,E=d!==void 0,M=[y["aria-describedby"],t?`${_}-error`:void 0].filter(Boolean).join(" ")||void 0;return i.jsxs(i.Fragment,{children:[i.jsxs("div",{className:B,style:L,children:[h&&i.jsx("label",{className:N,children:h}),i.jsx("textarea",{...y,"aria-describedby":M,ref:w,className:b,value:l,maxLength:d,rows:f,style:V,placeholder:h?u||" ":u})]}),(t||E)&&i.jsxs("div",{className:`${_}__helper-text ${t&&E?`${_}__helper-text--both`:t?`${_}__helper-text--error-only`:`${_}__helper-text--counter-only`}`,children:[t&&i.jsx("span",{id:`${_}-error`,className:`${_}__error-message`,role:"alert",children:t}),E&&i.jsxs("span",{className:`${_}__counter`,children:[H,"/",d]})]})]})});le.displayName="Textarea";const ae=n.forwardRef(({variant:e="default",size:r="medium",label:o,color:t,filled:s=!1,className:l,disabled:c,style:a,...d},h)=>{const u="motile-checkbox",f=[`${u}-container`,`${u}-container--${e}`,`${u}-container--${r}`,c&&`${u}-container--disabled`,s&&`${u}-container--filled`].filter(Boolean).join(" "),p=[u,`${u}--${e}`,`${u}--${r}`,s&&`${u}--filled`,l].filter(Boolean).join(" "),m=[`${u}__label`,c&&`${u}__label--disabled`].filter(Boolean).join(" "),y=t?{"--motile-checkbox-color":t}:void 0;return i.jsx("div",{className:f,style:y,children:i.jsxs("label",{className:`${u}-wrapper`,children:[i.jsx("input",{...d,ref:h,type:"checkbox",className:p,disabled:c,style:a}),i.jsx("span",{className:`${u}__mark`,children:i.jsx("svg",{className:`${u}__check-icon`,viewBox:"0 0 16 16",fill:"none",children:i.jsx("path",{d:"M13.5 4L6 11.5L2.5 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),o&&i.jsx("span",{className:m,children:o})]})})});ae.displayName="Checkbox";const ie=n.forwardRef(({variant:e="default",color:r,className:o,disabled:t,style:s,...l},c)=>{const a="motile-switch",d=[`${a}-container`,`${a}-container--${e}`,t&&`${a}-container--disabled`].filter(Boolean).join(" "),h=[a,`${a}--${e}`,o].filter(Boolean).join(" "),u=r?{"--motile-switch-color":r}:void 0;return i.jsx("div",{className:d,style:u,children:i.jsxs("label",{className:`${a}-wrapper`,children:[i.jsx("input",{...l,ref:c,type:"checkbox",className:h,disabled:t,style:s,role:"switch"}),i.jsx("span",{className:`${a}__track`,children:i.jsx("span",{className:`${a}__thumb`})})]})})});ie.displayName="Switch";const W="motile-accordion",ce=n.createContext(null),de=()=>{const e=n.useContext(ce);if(!e)throw new Error("AccordionHeader/Content must be used within <Accordion>");return e},ue=n.forwardRef(({variant:e="default",defaultExpanded:r=!1,expanded:o,onChange:t,disabled:s=!1,className:l,children:c,asChild:a=!1,...d},h)=>{const[u,f]=n.useState(r),p=o!==void 0,m=p?o:u,v=`accordion-panel-${n.useId()}`,g=n.useRef(null),w=n.useCallback(()=>{if(s)return;const k=!m;p||f(k),t==null||t(k)},[s,m,p,t]),C={...d,"data-state":m?"open":"closed","data-disabled":s?"":void 0,"data-variant":e},x=[W,`${W}--${e}`,m&&`${W}--expanded`,s&&`${W}--disabled`,l].filter(Boolean).join(" ");return i.jsx(ce.Provider,{value:{isOpen:m,toggle:w,disabled:s,variant:e,panelId:v,panelRef:g},children:a?i.jsx(O,{ref:h,...C,className:l,children:c}):i.jsx("div",{...C,ref:h,className:x,children:c})})});ue.displayName="Accordion";const fe=n.forwardRef(({className:e,children:r,asChild:o=!1,...t},s)=>{const{isOpen:l,toggle:c,disabled:a,panelId:d}=de(),h={...t,onClick:f=>{var p;(p=t.onClick)==null||p.call(t,f),c()},"aria-expanded":l,"aria-controls":d,"aria-disabled":a,type:"button",disabled:a,"data-state":l?"open":"closed","data-disabled":a?"":void 0};if(o)return i.jsx(O,{ref:s,...h,className:e,children:r});const u=[`${W}__header`,e].filter(Boolean).join(" ");return i.jsx("button",{...h,ref:s,className:u,children:r})});fe.displayName="Accordion.Header";const he=n.forwardRef(({className:e,children:r,asChild:o=!1,...t},s)=>{const{isOpen:l,panelId:c,panelRef:a}=de(),d=n.useCallback(()=>{const f=a.current;if(!f)return;if(typeof window<"u"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches){f.style.height=l?"auto":"0px";return}if(l){(f.style.height===""||f.style.height==="auto")&&(f.style.height="0px"),f.getBoundingClientRect(),f.style.height=`${f.scrollHeight}px`;const m=()=>{l&&(f.style.height="auto"),f.removeEventListener("transitionend",m)};f.addEventListener("transitionend",m)}else(f.style.height===""||f.style.height==="auto")&&(f.style.height=`${f.scrollHeight}px`),f.getBoundingClientRect(),f.style.height="0px"},[l,a]);n.useEffect(()=>{const f=a.current;if(f)return f.style.willChange="height",d(),()=>{f.style.willChange=""}},[d,a]);const h={...t,"aria-hidden":!l,"data-state":l?"open":"closed"},u=[`${W}__content`,e].filter(Boolean).join(" ");return i.jsx("div",{id:c,ref:a,className:`${W}__panel`,"aria-hidden":!l,"data-state":l?"open":"closed",children:o?i.jsx(O,{ref:s,...h,className:e,children:r}):i.jsx("div",{...h,ref:s,className:u,children:r})})});he.displayName="Accordion.Content";const Re=Object.assign(ue,{Header:fe,Content:he}),et=({width:e="100%",height:r="1rem",borderRadius:o="4px",className:t,style:s,...l})=>{const a=["motile-skeleton",t].filter(Boolean).join(" "),d=(u,f)=>u===void 0?f:typeof u=="number"?`${u}px`:u,h={...s,width:d(e,"100%"),height:d(r,"1rem"),borderRadius:d(o,"4px")};return i.jsx("div",{className:a,style:h,"aria-busy":"true","aria-live":"polite",...l})},pe=n.forwardRef(({variant:e,size:r="medium",color:o,className:t,children:s,style:l,...c},a)=>{const d="motile-badge",h=[d,`${d}--${r}`,e&&`${d}--${e}`,t].filter(Boolean).join(" "),u={...l,...o&&{"--motile-badge-color":o}};return e==="dot"?i.jsxs("span",{ref:a,className:h,style:u,...c,children:[i.jsx("span",{className:`${d}__dot`}),i.jsx("span",{className:`${d}__text`,children:s})]}):i.jsx("span",{ref:a,className:h,style:u,...c,children:s})});pe.displayName="Badge";const me=n.createContext(null);function ye(){const e=n.useContext(me);if(!e)throw new Error("Tooltip components must be used within Tooltip.Root");return e}const P=8;function tt({children:e,position:r="top",align:o="center",variant:t="default",color:s,showArrow:l=!1,keepOpen:c=!1,offset:a}){const d=a===void 0?{top:7,bottom:6,left:12,right:6}:typeof a=="number"?{top:a,bottom:a,left:a,right:a}:{top:a.top??7,bottom:a.bottom??6,left:a.left??12,right:a.right??6},h=n.useId().replace(/:/g,""),u=n.useRef(null),f=n.useRef(null),p=n.useRef(),[m,y]=n.useState(!1),[v,g]=n.useState(r),[w,C]=n.useState({}),x=n.useRef(null),k=n.useCallback((_,b=0)=>{p.current&&(clearTimeout(p.current),p.current=void 0),!_&&b>0?p.current=window.setTimeout(()=>y(!1),b):y(_)},[]);n.useLayoutEffect(()=>{if(!m||!u.current||!f.current)return;const _=()=>{if(!u.current||!f.current)return;const N=u.current.getBoundingClientRect(),L=f.current;L.classList.add("measuring");const V=L.getBoundingClientRect();L.classList.remove("measuring");const H=window.innerWidth,E=window.innerHeight;let M=V.width,I=V.height;const F=H-P*2,A=E-P*2;M>F&&(M=F),I>A&&(I=A);let T=r;r==="top"&&N.top-d.top-I<P?T="bottom":r==="bottom"&&N.bottom+d.bottom+I>E-P?T="top":r==="left"&&N.left-d.left-M<P?T="right":r==="right"&&N.right+d.right+M>H-P&&(T="left");let D=0,j=0;if(T==="top"||T==="bottom"){switch(o){case"start":D=N.left;break;case"center":D=N.left+N.width/2-M/2;break;case"end":D=N.right-M;break}D=Math.max(P,Math.min(D,H-P-M)),j=T==="top"?N.top-d.top-I:N.bottom+d.bottom,j=Math.max(P,Math.min(j,E-P-I))}else{switch(o){case"start":j=N.top;break;case"center":j=N.top+N.height/2-I/2;break;case"end":j=N.bottom-I;break}j=Math.max(P,Math.min(j,E-P-I)),T==="left"?(D=N.left-d.left-M,D<P&&(M=N.left-d.left-P,D=P)):(D=N.right+d.right,D+M>H-P&&(M=H-P-D))}const Q=T==="top"||T==="bottom"?N.left+N.width/2-D:void 0,R=T==="left"||T==="right"?N.top+N.height/2-j:void 0;g(T),C({left:Math.round(D),top:Math.round(j),...M!==V.width&&{maxWidth:M},...I!==V.height&&{maxHeight:A},...s&&{"--motile-tooltip-color":s},...Q!==void 0&&{"--arrow-left":`${Q}px`},...R!==void 0&&{"--arrow-top":`${R}px`}})},b=()=>{x.current===null&&(x.current=requestAnimationFrame(()=>{_(),x.current=null}))};_(),window.addEventListener("scroll",b,{passive:!0,capture:!0}),window.addEventListener("resize",b,{passive:!0});const B=new ResizeObserver(b);return u.current&&B.observe(u.current),()=>{x.current!==null&&(cancelAnimationFrame(x.current),x.current=null),window.removeEventListener("scroll",b,{capture:!0}),window.removeEventListener("resize",b),B.disconnect()}},[m,r,o,s,a]),n.useEffect(()=>{if(!m)return;const _=()=>{k(!1,0)};return window.addEventListener("scroll",_,{capture:!0}),()=>{window.removeEventListener("scroll",_,{capture:!0})}},[m,k]),n.useEffect(()=>()=>{p.current&&clearTimeout(p.current)},[]);const $={open:m,setOpen:k,position:r,align:o,variant:t,showArrow:l,color:s,keepOpen:c,tooltipId:`${h}-tooltip`,triggerRef:u,contentRef:f,style:w,placement:v};return i.jsx(me.Provider,{value:$,children:e})}function ot({children:e,asChild:r=!1}){const{open:o,setOpen:t,tooltipId:s,triggerRef:l,keepOpen:c}=ye(),a=n.useCallback(()=>{t(!0,0)},[t]),d=n.useCallback(()=>{c?t(!1,100):t(!1,0)},[t,c]),h=n.useCallback(()=>{t(!0,0)},[t]),u=n.useCallback(()=>{t(!1,0)},[t]),f=n.useCallback(()=>{t(!o,0)},[t,o]);return r?i.jsx(O,{ref:p=>{l.current=p},className:"motile-tooltip-trigger","aria-describedby":o?s:void 0,tabIndex:0,onMouseEnter:a,onMouseLeave:d,onFocus:h,onBlur:u,onClick:f,children:e}):n.cloneElement(e,{ref:p=>{l.current=p;const m=e.props.ref||e.ref;m&&(typeof m=="function"?m(p):typeof m=="object"&&m!==null&&(m.current=p))},className:`motile-tooltip-trigger ${e.props.className||""}`.trim(),"aria-describedby":o?s:void 0,tabIndex:e.props.tabIndex??0,onMouseEnter:a,onMouseLeave:d,onFocus:h,onBlur:u,onClick:f})}function nt({children:e}){const{open:r,setOpen:o,tooltipId:t,contentRef:s,variant:l,showArrow:c,keepOpen:a,align:d,style:h,placement:u}=ye(),[f,p]=n.useState(!1),[m,y]=n.useState(!1);n.useEffect(()=>p(!0),[]),n.useEffect(()=>{r?requestAnimationFrame(()=>{y(!0)}):y(!1)},[r]);const v=n.useCallback(()=>{a&&o(!0,0)},[a,o]),g=n.useCallback(()=>{a&&o(!1,0)},[a,o]);return!f||!r?null:X.createPortal(i.jsx("div",{ref:s,id:t,role:"tooltip",className:`motile-tooltip-bubble motile-tooltip-bubble--${l}`,"data-open":m||void 0,"data-placement":u,"data-align":d,"data-show-arrow":c||void 0,"data-keep-open":a||void 0,style:h,"aria-hidden":!r,onMouseEnter:v,onMouseLeave:g,children:e}),document.body)}const K={Root:tt,Trigger:ot,Content:nt};function q({refs:e,handler:r,enabled:o=!0}){n.useEffect(()=>{if(!o)return;const t=s=>{const l=s.target;if(!e.every(d=>d.current))return;e.every(d=>{var h;return!((h=d.current)!=null&&h.contains(l))})&&r(s)};return document.addEventListener("mousedown",t),document.addEventListener("touchstart",t),()=>{document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}},[e,r,o])}function U({handler:e,enabled:r=!0}){n.useEffect(()=>{if(!r)return;const o=t=>{t.key==="Escape"&&e(t)};return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o)}},[e,r])}const we=n.createContext(null);function ve(){const e=n.useContext(we);if(!e)throw new Error("Popover components must be used within Popover.Root");return e}function rt(e,r){let o=null,t=0;return function(...s){const l=Date.now(),c=r-(l-t);c<=0?(o&&(clearTimeout(o),o=null),t=l,e.apply(this,s)):o||(o=setTimeout(()=>{t=Date.now(),o=null,e.apply(this,s)},c))}}function st({value:e,defaultValue:r=!1,onChange:o}){const t=e!==void 0,[s,l]=n.useState(r),c=t?e:s,a=n.useCallback(d=>{const h=typeof d=="function"?d(c):d;t||l(h),o==null||o(h)},[t,o,c]);return[c,a]}function lt({children:e,position:r="top",align:o="center",variant:t="outlined",showArrow:s=!1,zIndex:l=10,color:c,bounceCount:a=0,open:d,defaultOpen:h=!1,onOpenChange:u,onClickOutside:f,onDismiss:p,autoClose:m=!0}){const y=n.useId().replace(/:/g,""),v=n.useRef(null),g=n.useRef(null),w=n.useRef(null),[C,x]=st({value:d,defaultValue:h,onChange:u}),k=n.useMemo(()=>({open:C,setOpen:x,position:r,align:o,variant:t,showArrow:s,zIndex:l,color:c,autoClose:m,bounceCount:a,onOpenChange:u,onClickOutside:f,onDismiss:p,triggerId:`${y}-trigger`,contentId:`${y}-content`,triggerRef:v,contentRef:g,wrapperRef:w,isPositioned:!1,popoverStyle:{}}),[C,x,r,o,t,s,l,c,m,a,u,f,p,y,v,g,w]);return i.jsx(we.Provider,{value:k,children:i.jsx("div",{ref:w,className:"motile-popover-wrapper",children:e})})}function at({children:e,asChild:r=!1}){const{open:o,setOpen:t,triggerId:s,contentId:l,triggerRef:c}=ve(),a=n.useCallback(()=>{t(d=>!d)},[t]);return r?i.jsx(O,{ref:d=>{c.current=d},id:s,"aria-expanded":o,"aria-controls":l,onClick:a,children:e}):i.jsx("button",{ref:c,id:s,type:"button","aria-expanded":o,"aria-controls":l,onClick:a,children:e})}function it({children:e,className:r="",style:o}){const{open:t,setOpen:s,position:l,align:c,variant:a,showArrow:d,zIndex:h,color:u,autoClose:f,bounceCount:p,onClickOutside:m,onDismiss:y,contentId:v,triggerRef:g,contentRef:w,wrapperRef:C}=ve(),[x,k]=n.useState(!1),[$,_]=n.useState({}),b=n.useCallback(()=>{!g.current||!w.current||!C.current||requestAnimationFrame(()=>{if(!g.current||!w.current||!C.current)return;const L=w.current.offsetWidth,V=w.current.offsetHeight,H=g.current.offsetWidth,E=g.current.offsetHeight,M=g.current.getBoundingClientRect(),I=C.current.getBoundingClientRect(),F=M.left-I.left,A=M.top-I.top;let T=0,D=0;const j=8;if(l==="top"||l==="bottom"){switch(c){case"start":T=F;break;case"center":T=F+H/2;break;case"end":T=F+H-L;break}l==="top"?D=A-V-j:D=A+E+j}else{switch(c){case"start":D=A;break;case"center":D=A+E/2;break;case"end":D=A+E-V;break}l==="left"?T=F-L-j:T=F+H+j}_({left:`${Math.round(T)}px`,top:`${Math.round(D)}px`}),k(!0)})},[l,c,g,w,C]),B=n.useMemo(()=>rt(b,100),[b]);if(n.useEffect(()=>{t||k(!1)},[t]),U({handler:n.useCallback(L=>{f&&(y==null||y(L),L.defaultPrevented||s(!1))},[f,y,s]),enabled:t}),q({refs:[C],handler:n.useCallback(L=>{f&&(m==null||m(L),y==null||y(L),L.defaultPrevented||s(!1))},[f,m,y,s]),enabled:t}),n.useEffect(()=>{if(!(!t||!g.current||!w.current||!C.current))return b(),window.addEventListener("resize",B),()=>{window.removeEventListener("resize",B)}},[t,b,B]),!t)return null;const N=p!==0;return i.jsxs("div",{ref:w,id:v,role:"dialog","aria-modal":"false",className:`motile-popover-content motile-popover-content--${a} ${r}`,"data-placement":l,"data-align":c,"data-positioned":x,"data-bounce":N?"true":"false",style:{...$,zIndex:h,...u&&{"--motile-popover-color":u},"--bounce-count":p,...o},children:[d&&i.jsx("div",{className:"motile-popover-arrow","data-placement":l,"data-align":c}),e]})}const ct={Root:lt,Trigger:at,Content:it};function J({enabled:e=!0,allowedSelectors:r=["[data-scroll-allowed]",".sheet-content",".modal-body"]}={}){return n.useEffect(()=>{if(!e)return;const o=document.body.style.overflow,t=document.documentElement.style.overflow,s=document.body.style.height,l=document.body.style.paddingRight,c=document.body.style.touchAction,a=document.documentElement.style.touchAction,d=document.body.style.overscrollBehavior,h=document.documentElement.style.overscrollBehavior,u=window.innerWidth-document.documentElement.clientWidth;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",u>0&&(document.body.style.paddingRight=`${u}px`);const f=y=>{const v=y.target;if(!v||!(v instanceof HTMLElement)||!r.some(w=>{try{return v.closest(w)}catch{return!1}}))return y.preventDefault(),y.stopPropagation(),!1},p={passive:!1};document.addEventListener("wheel",f,p),document.addEventListener("touchmove",f,p),document.addEventListener("scroll",f,p);const m=y=>{const v=y.target;if(!v||!(v instanceof HTMLElement))return["Space","PageUp","PageDown","End","Home","ArrowLeft","ArrowUp","ArrowRight","ArrowDown"].includes(y.code)?(y.preventDefault(),y.stopPropagation(),!1):void 0;if(!r.some(w=>{try{return v.closest(w)}catch{return!1}})&&["Space","PageUp","PageDown","End","Home","ArrowLeft","ArrowUp","ArrowRight","ArrowDown"].includes(y.code))return y.preventDefault(),y.stopPropagation(),!1};return document.addEventListener("keydown",m,p),()=>{document.body.style.overflow=o,document.documentElement.style.overflow=t,document.body.style.height=s,document.body.style.paddingRight=l,document.body.style.touchAction=c,document.documentElement.style.touchAction=a,document.body.style.overscrollBehavior=d,document.documentElement.style.overscrollBehavior=h,document.removeEventListener("wheel",f),document.removeEventListener("touchmove",f),document.removeEventListener("scroll",f),document.removeEventListener("keydown",m)}},[e,r]),{isLocked:e}}const be=n.createContext(null),Y=()=>{const e=n.useContext(be);if(!e)throw new Error("Drawer components must be used within Drawer.Root");return e},ge=({children:e,open:r,defaultOpen:o=!1,onOpenChange:t,closeOnBackdrop:s=!0,closeOnDrag:l=!0,maxHeight:c="70dvh",width:a="480px",maxWidth:d,zIndex:h=9999})=>{const u=n.useRef(null),f=n.useRef(null),p=n.useRef(null),m=n.useRef(0),y=n.useRef(!1),[v,g]=n.useState(!1),[w,C]=n.useState(o),[x,k]=n.useState(o),$=r!==void 0?r:x,_=E=>{r===void 0&&k(E),t==null||t(E)},b=typeof s=="boolean"?{escapeKey:s,clickOutside:s}:{escapeKey:(s==null?void 0:s.escapeKey)??!1,clickOutside:(s==null?void 0:s.clickOutside)??!1};J({enabled:$,allowedSelectors:["[data-scroll-allowed]",".motile-drawer__body"]});const B=()=>{if(!u.current){g(!1),setTimeout(()=>{C(!1),_(!1)},300);return}u.current.style.transition="transform 0.3s ease",u.current.style.transform="translateY(100%)",g(!1),setTimeout(()=>{C(!1),_(!1)},300)};n.useEffect(()=>{$?C(!0):w&&B()},[$]),n.useEffect(()=>{if(!w||!u.current)return;const E=u.current;E.style.transition="none",E.style.transform="translateY(100%)",requestAnimationFrame(()=>{requestAnimationFrame(()=>{E.style.transition="transform 0.3s ease",E.style.transform="translateY(0)",g(!0)})})},[w]),q({refs:[u],handler:B,enabled:$&&b.clickOutside}),U({handler:B,enabled:$&&b.escapeKey});const H={open:w,setOpen:_,closeOnBackdrop:s,closeOnDrag:l,maxHeight:c,width:a,maxWidth:d,zIndex:h,drawerRef:u,bodyRef:f,isVisible:v,handleClose:B,handleDragStart:E=>{l&&(p.current=E,y.current=!1)},handleDragMove:E=>{if(!l||!u.current||p.current===null||!f.current)return;const M=E-p.current;f.current.scrollTop<=0&&M>0&&(y.current=!0,m.current=M,u.current.style.transition="none",u.current.style.transform=`translateY(${M}px)`)},handleDragEnd:()=>{if(!l||!u.current)return;const E=window.innerHeight*.2;u.current.style.transition="transform 0.3s ease",y.current&&m.current>E?B():(u.current.style.transform="translateY(0)",m.current=0),y.current=!1,p.current=null}};return i.jsx(be.Provider,{value:H,children:e})};ge.displayName="Drawer.Root";const _e=n.forwardRef(({children:e,asChild:r,onClick:o,...t},s)=>{const{setOpen:l}=Y(),c=a=>{o==null||o(a),l(!0)};return r?i.jsx(O,{...t,onClick:c,ref:s,children:e}):i.jsx("button",{type:"button",onClick:c,ref:s,...t,children:e})});_e.displayName="Drawer.Trigger";const $e=({children:e,container:r})=>{const{open:o}=Y();return o?X.createPortal(e,r||document.body):null};$e.displayName="Drawer.Portal";const xe=n.forwardRef(({className:e,...r},o)=>{const{isVisible:t,zIndex:s}=Y();return i.jsx("div",{ref:o,className:`motile-drawer__overlay ${t?"motile-drawer__overlay--visible":""} ${e||""}`,style:{zIndex:s},role:"presentation",...r})});xe.displayName="Drawer.Overlay";const Ce=n.forwardRef(({className:e,style:r,children:o,...t},s)=>{const{drawerRef:l,isVisible:c,maxHeight:a,width:d,maxWidth:h,zIndex:u}=Y(),f={...a!=="70dvh"&&{"--drawer-max-height":a},...d!=="480px"&&{"--drawer-width":d},...h&&{"--drawer-max-width":h},zIndex:u+1,...r};return i.jsx("div",{ref:p=>{typeof s=="function"?s(p):s&&(s.current=p),l.current=p},className:`motile-drawer__content ${c?"motile-drawer__content--visible":""} ${e||""}`,style:f,onClick:p=>p.stopPropagation(),role:"dialog","aria-modal":"true",...t,children:o})});Ce.displayName="Drawer.Content";const Ne=n.forwardRef(({className:e,...r},o)=>{const{handleDragStart:t,handleDragMove:s,handleDragEnd:l}=Y(),c=u=>{t(u.touches[0].clientY)},a=u=>{s(u.touches[0].clientY)},d=()=>{l()},h=u=>{t(u.clientY);const f=m=>{s(m.clientY)},p=()=>{l(),window.removeEventListener("mousemove",f),window.removeEventListener("mouseup",p)};window.addEventListener("mousemove",f),window.addEventListener("mouseup",p)};return i.jsx("div",{ref:o,className:`motile-drawer__header ${e||""}`,onTouchStart:c,onTouchMove:a,onTouchEnd:d,onMouseDown:h,...r,children:i.jsx("div",{className:"motile-drawer__handle","aria-hidden":"true"})})});Ne.displayName="Drawer.Handle";const ke=n.forwardRef(({children:e,asChild:r,className:o,...t},s)=>r&&n.isValidElement(e)?i.jsx(O,{...t,className:`motile-drawer__title ${o||""}`,ref:s,children:e}):i.jsx("div",{className:"motile-drawer__title-wrapper",children:i.jsx("h2",{ref:s,id:"motile-drawer-title",className:`motile-drawer__title ${o||""}`,...t,children:e})}));ke.displayName="Drawer.Title";const Se=n.forwardRef(({className:e,children:r,...o},t)=>{const{bodyRef:s}=Y();return i.jsx("div",{ref:l=>{typeof t=="function"?t(l):t&&(t.current=l),s.current=l},className:`motile-drawer__body ${e||""}`,"data-scroll-allowed":!0,...o,children:r})});Se.displayName="Drawer.Body";const Ee=n.forwardRef(({children:e,asChild:r,onClick:o,...t},s)=>{const{handleClose:l}=Y(),c=a=>{o==null||o(a),l()};return r?i.jsx(O,{...t,onClick:c,ref:s,children:e}):i.jsx("button",{type:"button",onClick:c,ref:s,...t,children:e})});Ee.displayName="Drawer.Close";const dt={Root:ge,Trigger:_e,Portal:$e,Overlay:xe,Content:Ce,Handle:Ne,Title:ke,Body:Se,Close:Ee};function ut({onClose:e,isOpen:r}){const o=n.useRef(e),t=n.useRef(!1),[s,l]=n.useState(!1);return n.useEffect(()=>{o.current=e},[e]),n.useEffect(()=>{if(r&&!t.current){const c=a=>{l(!0),o.current()};return window.history.pushState({modal:!0},""),t.current=!0,window.addEventListener("popstate",c),()=>{window.removeEventListener("popstate",c)}}!r&&t.current&&(s||window.history.back(),t.current=!1,l(!1))},[r,s]),s}const Te=n.createContext(null);function Z(){const e=n.useContext(Te);if(!e)throw new Error("Sheet components must be used within Sheet.Root");return e}function ft({value:e,defaultValue:r=!1,onChange:o}){const t=e!==void 0,[s,l]=n.useState(r),c=t?e:s,a=n.useCallback(d=>{const h=typeof d=="function"?d(c):d;t||l(h),o==null||o(h)},[t,o,c]);return[c,a]}function ht({children:e,position:r="right",closeOnBackdrop:o=!0,maxWidth:t="600px",zIndex:s=1e3,open:l,defaultOpen:c=!1,onOpenChange:a}){const d=n.useId().replace(/:/g,""),h=n.useRef(null),u=n.useRef(null),[f,p]=ft({value:l,defaultValue:c,onChange:a}),m=ut({isOpen:f,onClose:()=>p(!1)}),y=n.useMemo(()=>({open:f,setOpen:p,position:r,closeOnBackdrop:o,maxWidth:t,zIndex:s,onOpenChange:a,triggerId:`${d}-trigger`,contentId:`${d}-content`,overlayRef:h,sheetRef:u,isClosingFromHistory:m}),[f,p,r,o,t,s,a,d,h,u,m]);return i.jsx(Te.Provider,{value:y,children:e})}function pt({children:e,asChild:r=!1}){const{open:o,setOpen:t,triggerId:s,contentId:l}=Z(),c=n.useCallback(()=>{t(a=>!a)},[t]);return r?i.jsx(O,{id:s,"aria-expanded":o,"aria-controls":l,onClick:c,children:e}):i.jsx("button",{id:s,type:"button","aria-expanded":o,"aria-controls":l,onClick:c,children:e})}function mt({children:e,container:r}){const{open:o}=Z(),[t,s]=n.useState(!1);return n.useEffect(()=>{s(!0)},[]),!t||!o?null:X.createPortal(e,r||document.body)}function yt({className:e="",style:r}){const{open:o,setOpen:t,position:s,closeOnBackdrop:l,zIndex:c,overlayRef:a}=Z(),[d,h]=n.useState(!1),[u,f]=n.useState(!1),p=typeof l=="boolean"?{clickOutside:l}:{escapeKey:l.escapeKey??!1,clickOutside:l.clickOutside??!1};n.useEffect(()=>{if(o)h(!0);else if(d){f(!1);const v=setTimeout(()=>{h(!1)},300);return()=>clearTimeout(v)}},[o,d]),n.useEffect(()=>{if(!d||!o)return;const v=requestAnimationFrame(()=>{const g=requestAnimationFrame(()=>{f(!0)});return()=>cancelAnimationFrame(g)});return()=>cancelAnimationFrame(v)},[d,o]);const m=n.useCallback(v=>{p.clickOutside&&v.target===a.current&&t(!1)},[p.clickOutside,t,a]);if(!d)return null;const y={zIndex:c,...r};return i.jsx("div",{ref:a,className:`motile-sheet__overlay ${u?"motile-sheet__overlay--visible":""} motile-sheet__overlay--${s} ${e}`,style:y,onClick:m,role:"presentation"})}function wt({children:e,className:r="",style:o}){const{open:t,setOpen:s,position:l,closeOnBackdrop:c,maxWidth:a,zIndex:d,contentId:h,sheetRef:u,isClosingFromHistory:f}=Z(),[p,m]=n.useState(!1),[y,v]=n.useState(!1),g=typeof c=="boolean"?{escapeKey:c,clickOutside:c}:{escapeKey:c.escapeKey??!1,clickOutside:c.clickOutside??!1};if(J({enabled:t,allowedSelectors:[".motile-sheet__body"]}),q({refs:[u],handler:()=>s(!1),enabled:t&&g.clickOutside}),U({handler:()=>s(!1),enabled:t&&g.escapeKey}),n.useEffect(()=>{if(t)m(!0);else if(p){v(!1);const x=setTimeout(()=>{m(!1)},f?0:300);return()=>clearTimeout(x)}},[t,p,f]),n.useEffect(()=>{if(!p||!t||f)return;const C=requestAnimationFrame(()=>{const x=requestAnimationFrame(()=>{v(!0)});return()=>cancelAnimationFrame(x)});return()=>cancelAnimationFrame(C)},[p,t,f]),!p)return null;const w={...a!=="600px"&&{"--sheet-max-width":a},zIndex:d+1,...o};return i.jsx("div",{ref:u,id:h,className:`motile-sheet__content motile-sheet__content--${l} ${y?"motile-sheet__content--visible":""} ${r}`,style:w,role:"dialog","aria-modal":"true",children:e})}function vt({children:e,className:r=""}){return i.jsx("div",{className:`motile-sheet__header ${r}`,children:e})}function bt({children:e,className:r=""}){return i.jsx("h2",{id:"sheet-title",className:`motile-sheet__title ${r}`,children:e})}function gt({children:e,className:r=""}){return i.jsx("div",{className:`motile-sheet__body ${r}`,children:e})}function _t({children:e,asChild:r=!1}){const{setOpen:o}=Z(),t=n.useCallback(()=>{o(!1)},[o]);return r?i.jsx(O,{onClick:t,"aria-label":"닫기",children:e}):i.jsx("button",{onClick:t,"aria-label":"닫기",type:"button",children:e})}const $t={Root:ht,Trigger:pt,Portal:mt,Overlay:yt,Content:wt,Header:vt,Title:bt,Body:gt,Close:_t},Me=n.createContext(null),G=()=>{const e=n.useContext(Me);if(!e)throw new Error("Modal compound components must be used within Modal.Root");return e},xt=({open:e,onOpenChange:r,children:o})=>{const t=n.useId(),s=n.useId(),l=n.useMemo(()=>({open:e,onOpenChange:r,titleId:t,descriptionId:s}),[e,r,t,s]);return i.jsx(Me.Provider,{value:l,children:o})},De=n.forwardRef(({container:e,variant:r="scale",closeOnBackdrop:o=!0,disableScrollLock:t=!1,width:s,maxWidth:l,zIndex:c=1e3,className:a,onClick:d,style:h,...u},f)=>{const{open:p,onOpenChange:m}=G(),y=n.useRef(null),v=typeof o=="boolean"?o:o.clickOutside??!1,g=typeof o=="boolean"?o:o.escapeKey??!1;J({enabled:p&&!t,allowedSelectors:[".motile-modal__content"]}),q({refs:[y],handler:()=>{v&&m(!1)},enabled:p}),U({handler:()=>{g&&m(!1)},enabled:p});const w=$=>{d==null||d($),$.target===$.currentTarget&&v&&m(!1)};if(!p)return null;const C={zIndex:c,...h},x={...s&&{"--modal-width":s},...l&&{"--modal-max-width":l},zIndex:c+1},k=i.jsx("div",{ref:f,className:`motile-modal__backdrop ${a||""}`,"data-state":p?"open":"closed","data-variant":r,onClick:w,style:C,...u,children:i.jsx("div",{ref:y,className:"motile-modal","data-variant":r,style:x,children:u.children})});return X.createPortal(k,e||document.body)});De.displayName="Modal.Overlay";const Ie=n.forwardRef(({className:e,forceMount:r,...o},t)=>{const{open:s,titleId:l,descriptionId:c}=G();return!s&&!r?null:i.jsx("div",{ref:t,className:`motile-modal__content ${e||""}`,role:"dialog","aria-modal":"true","aria-labelledby":l,"aria-describedby":c,"data-state":s?"open":"closed",...o})});Ie.displayName="Modal.Content";const Le=n.forwardRef(({className:e,...r},o)=>{const{titleId:t}=G();return i.jsx("h2",{ref:o,id:t,className:`motile-modal__title ${e||""}`,...r})});Le.displayName="Modal.Title";const Ae=n.forwardRef(({className:e,...r},o)=>{const{descriptionId:t}=G();return i.jsx("div",{ref:o,id:t,className:`motile-modal__body ${e||""}`,...r})});Ae.displayName="Modal.Description";const Be=n.forwardRef(({asChild:e,className:r,onClick:o,children:t,...s},l)=>{const{onOpenChange:c}=G(),a=d=>{o==null||o(d),c(!1)};return e?i.jsx(O,{...s,onClick:a,ref:l,children:t}):i.jsx("button",{ref:l,type:"button",className:`motile-modal__close ${r||""}`,onClick:a,"aria-label":"닫기",...s,children:t||i.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),i.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})});Be.displayName="Modal.Close";const He=n.forwardRef(({className:e,...r},o)=>i.jsx("div",{ref:o,className:`motile-modal__footer ${e||""}`,...r}));He.displayName="Modal.Footer";const Pe=n.forwardRef(({className:e,...r},o)=>i.jsx("div",{ref:o,className:`motile-modal__header ${e||""}`,...r}));Pe.displayName="Modal.Header";const Ct={Root:xt,Overlay:De,Content:Ie,Title:Le,Description:Ae,Close:Be,Footer:He,Header:Pe},je=n.createContext(null);function Nt(){const e=n.useContext(je);if(!e)throw new Error("useToastContext must be used within ToastProvider");return e}function kt({toast:e,onRemove:r}){const[o,t]=n.useState(!1),s=n.useCallback(()=>{t(!0),setTimeout(()=>{r(e.id)},250)},[e.id,r]);n.useEffect(()=>{const d=setTimeout(s,e.duration);return()=>{clearTimeout(d)}},[s,e.duration]);const l=n.useMemo(()=>e.variant==="success"?i.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsx("circle",{cx:"10",cy:"10",r:"9",fill:"currentColor",opacity:"0.2"}),i.jsx("path",{d:"M6 10L8.5 12.5L14 7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}):e.variant==="error"?i.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsx("circle",{cx:"10",cy:"10",r:"9",fill:"currentColor",opacity:"0.2"}),i.jsx("path",{d:"M7 7L13 13M13 7L7 13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}):e.variant==="warning"?i.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsx("path",{d:"M10 2L2 17H18L10 2Z",fill:"currentColor",opacity:"0.2"}),i.jsx("path",{d:"M10 7V11M10 14V14.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}):e.variant==="info"?i.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsx("circle",{cx:"10",cy:"10",r:"9",fill:"currentColor",opacity:"0.2"}),i.jsx("path",{d:"M10 7V7.5M10 10V14",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}):null,[e.variant]),c="motile-toast",a=[c,`${c}--${e.variant}`,o&&`${c}--exiting`].filter(Boolean).join(" ");return i.jsxs("div",{className:a,role:"status","aria-live":"polite","aria-atomic":"true","data-toast-id":e.id,children:[l&&i.jsx("div",{className:`${c}__icon`,children:l}),i.jsx("div",{className:`${c}__message`,children:e.message})]})}function St({children:e,zIndex:r=9999}){const[o,t]=n.useState([]),s=n.useCallback((h,u="default",f)=>{const p=`toast-${Date.now()}-${Math.random()}`,m={id:p,message:h,variant:u,duration:(f==null?void 0:f.duration)??4e3,zIndex:f==null?void 0:f.zIndex,createdAt:Date.now()};return t(y=>[m,...y]),p},[]),l=n.useCallback(h=>{t(u=>u.filter(f=>f.id!==h))},[]),c=n.useMemo(()=>({toasts:o,addToast:s}),[o,s]),a=o.filter(h=>h.zIndex!==void 0),d=a.length>0?Math.max(...a.map(h=>h.zIndex)):r;return i.jsxs(je.Provider,{value:c,children:[e,typeof window<"u"&&X.createPortal(i.jsx("div",{className:"motile-toast-container","aria-live":"polite","aria-label":"Notifications",style:{zIndex:d},children:o.map(h=>i.jsx(kt,{toast:h,onRemove:l},h.id))}),document.body)]})}function Et(){const{addToast:e}=Nt(),r=n.useCallback((c,a)=>e(c,"default",a),[e]),o=n.useCallback((c,a)=>e(c,"success",a),[e]),t=n.useCallback((c,a)=>e(c,"error",a),[e]),s=n.useCallback((c,a)=>e(c,"warning",a),[e]),l=n.useCallback((c,a)=>e(c,"info",a),[e]);return{show:r,success:o,error:t,warning:s,info:l}}const Oe=n.createContext(null),Ve=()=>{const e=n.useContext(Oe);if(!e)throw new Error("Dock compound components must be used within Dock.Root");return e},Fe=n.forwardRef(({position:e="bottom",zIndex:r=1e3,color:o,className:t,children:s,style:l,...c},a)=>{const[d,h]=n.useState(null),[u,f]=n.useState(null),p=n.useRef(null),m=1.7,y=w=>{h(w.clientX),f(w.clientY)},v=()=>{h(null),f(null)},g=n.useMemo(()=>({magnification:m,mouseX:d,mouseY:u,position:e,color:o}),[m,d,u,e,o]);return i.jsx(Oe.Provider,{value:g,children:i.jsx("div",{ref:w=>{typeof a=="function"?a(w):a&&(a.current=w),p.current=w},className:`motile-dock ${t||""}`,"data-position":e,style:{...l,zIndex:r},onMouseMove:y,onMouseLeave:v,...c,children:s})})});Fe.displayName="Dock.Root";const We=n.forwardRef(({icon:e,label:r,asChild:o,color:t,className:s,children:l,style:c,...a},d)=>{const{magnification:h,mouseX:u,mouseY:f,position:p,color:m}=Ve(),y=n.useRef(null),v=n.useRef(),g=t||m;n.useEffect(()=>{if(!y.current||window.matchMedia("(hover: none) and (pointer: coarse)").matches)return;const $=()=>{if(y.current)if(u!==null&&f!==null){const _=y.current.getBoundingClientRect();let b;if(p==="top"||p==="bottom"){const H=_.left+_.width/2;b=Math.abs(u-H)}else{const H=_.top+_.height/2;b=Math.abs(f-H)}const N=Math.max(0,1-b/100),L=N*N,V=1+(h-1)*L;y.current.style.transform=`scale(${V})`}else y.current.style.transform="scale(1)"};return v.current=requestAnimationFrame($),()=>{v.current&&cancelAnimationFrame(v.current)}},[u,f,h,p]);const w=p==="top"?"bottom":p==="bottom"?"top":p==="left"?"right":"left",C={...c,...g&&{"--motile-dock-color":g}};if(o&&n.isValidElement(l)){const k=n.cloneElement(l,{ref:$=>{typeof d=="function"?d($):d&&(d.current=$),y.current=$},className:`motile-dock__item ${s||""}`,style:C,"aria-label":r});return r?i.jsxs(K.Root,{position:w,showArrow:!0,children:[i.jsx(K.Trigger,{children:k}),i.jsx(K.Content,{children:r})]}):k}const x=i.jsx("button",{ref:k=>{typeof d=="function"?d(k):d&&(d.current=k),y.current=k},type:"button",className:`motile-dock__item ${s||""}`,style:C,"aria-label":r,...a,children:e||l});return r?i.jsxs(K.Root,{position:w,showArrow:!0,children:[i.jsx(K.Trigger,{children:x}),i.jsx(K.Content,{children:r})]}):x});We.displayName="Dock.Item";const Ke=n.forwardRef(({className:e,...r},o)=>{const{position:t}=Ve();return i.jsx("div",{ref:o,className:`motile-dock__separator ${e||""}`,"data-position":t,"aria-hidden":"true",...r})});Ke.displayName="Dock.Separator";const Tt={Root:Fe,Item:We,Separator:Ke},Ye=n.createContext(null),ze=()=>{const e=n.useContext(Ye);if(!e)throw new Error("SpeedDial compound components must be used within SpeedDial.Root");return e},Mt=({open:e,onOpenChange:r,direction:o="up",color:t,closeOnClickOutside:s=!0,closeOnEscapeKey:l=!0,children:c})=>{const a=n.useRef(null),d=n.useId();q({refs:[a],handler:()=>{s&&r(!1)},enabled:e}),U({handler:()=>{l&&r(!1)},enabled:e});const h=n.useMemo(()=>({open:e,onOpenChange:r,direction:o,triggerId:d}),[e,r,o,d]),u=t?{"--motile-speeddial-color":t}:void 0;return i.jsx(Ye.Provider,{value:h,children:i.jsx("div",{ref:a,className:"motile-speed-dial",style:u,children:c})})},qe=n.forwardRef(({className:e,onClick:r,children:o,asChild:t=!1,...s},l)=>{const{open:c,onOpenChange:a,triggerId:d}=ze(),h=u=>{r==null||r(u),u.defaultPrevented||a(!c)};return t?i.jsx(O,{ref:l,id:d,className:e?`motile-speed-dial__trigger ${e}`:"motile-speed-dial__trigger","aria-expanded":c,"aria-haspopup":"menu",onClick:h,...s,children:o}):i.jsx("button",{ref:l,type:"button",id:d,className:e?`motile-speed-dial__trigger ${e}`:"motile-speed-dial__trigger","aria-expanded":c,"aria-haspopup":"menu",onClick:h,...s,children:o})});qe.displayName="SpeedDial.Trigger";const Ue=n.forwardRef(({className:e,children:r,...o},t)=>{const{open:s,direction:l,triggerId:c}=ze();if(!s)return null;const a=n.Children.map(r,(d,h)=>n.isValidElement(d)?n.cloneElement(d,{style:{"--action-index":h,...d.props.style||{}}}):d);return i.jsx("div",{ref:t,role:"menu","aria-labelledby":c,className:e?`motile-speed-dial__actions ${e}`:"motile-speed-dial__actions","data-direction":l,...o,children:a})});Ue.displayName="SpeedDial.Actions";const Xe=n.forwardRef(({className:e,onClick:r,children:o,asChild:t=!1,...s},l)=>{const c=a=>{r==null||r(a)};return t?i.jsx(O,{ref:l,role:"menuitem",className:e?`motile-speed-dial__action ${e}`:"motile-speed-dial__action",onClick:c,...s,children:o}):i.jsx("button",{ref:l,type:"button",role:"menuitem",className:e?`motile-speed-dial__action ${e}`:"motile-speed-dial__action",onClick:c,...s,children:o})});Xe.displayName="SpeedDial.Action";const Dt={Root:Mt,Trigger:qe,Actions:Ue,Action:Xe};S.Accordion=Re,S.Badge=pe,S.Button=re,S.Checkbox=ae,S.Dock=Tt,S.Drawer=dt,S.Input=se,S.Modal=Ct,S.Popover=ct,S.Sheet=$t,S.Skeleton=et,S.SpeedDial=Dt,S.Switch=ie,S.Textarea=le,S.ToastProvider=St,S.Tooltip=K,S.useClickOutside=q,S.useEscapeKey=U,S.useScrollLock=J,S.useToast=Et,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});
@@ -0,0 +1,4 @@
1
+ import { default as React } from 'react';
2
+ export declare const Slot: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
3
+ children?: React.ReactNode;
4
+ } & React.RefAttributes<HTMLElement>>;
package/package.json ADDED
@@ -0,0 +1,81 @@
1
+ {
2
+ "name": "motile-ui",
3
+ "version": "0.9.0",
4
+ "type": "module",
5
+ "description": "A modern React component library for webview applications",
6
+ "main": "./dist/motile-ui.umd.js",
7
+ "module": "./dist/motile-ui.es.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/motile-ui.es.js",
13
+ "require": "./dist/motile-ui.umd.js"
14
+ }
15
+ },
16
+ "files": [
17
+ "dist",
18
+ "README.md",
19
+ "LICENSE"
20
+ ],
21
+ "scripts": {
22
+ "dev": "vite",
23
+ "build": "tsc && vite build",
24
+ "preview": "vite preview",
25
+ "storybook": "storybook dev -p 6006",
26
+ "build-storybook": "storybook build",
27
+ "prepublishOnly": "npm run build"
28
+ },
29
+ "peerDependencies": {
30
+ "react": "^18.0.0",
31
+ "react-dom": "^18.0.0"
32
+ },
33
+ "devDependencies": {
34
+ "@storybook/addon-essentials": "^8.4.7",
35
+ "@storybook/addon-interactions": "^8.4.7",
36
+ "@storybook/addon-links": "^8.4.7",
37
+ "@storybook/blocks": "^8.4.7",
38
+ "@storybook/react": "^8.4.7",
39
+ "@storybook/react-vite": "^8.4.7",
40
+ "@storybook/test": "^8.4.7",
41
+ "@types/node": "^24.9.1",
42
+ "@types/react": "^18.3.12",
43
+ "@types/react-dom": "^18.3.1",
44
+ "@vitejs/plugin-react": "^4.3.3",
45
+ "react": "^18.3.1",
46
+ "react-dom": "^18.3.1",
47
+ "storybook": "^8.4.7",
48
+ "typescript": "^5.6.3",
49
+ "vite": "^5.4.11",
50
+ "vite-plugin-css-injected-by-js": "^3.5.2",
51
+ "vite-plugin-dts": "^4.3.0"
52
+ },
53
+ "keywords": [
54
+ "react",
55
+ "react-component",
56
+ "component-library",
57
+ "ui-library",
58
+ "webview",
59
+ "mobile",
60
+ "typescript",
61
+ "vite",
62
+ "accessible",
63
+ "ui",
64
+ "design-system",
65
+ "button",
66
+ "input",
67
+ "modal",
68
+ "drawer"
69
+ ],
70
+ "author": "jtnoh300@gmail.com",
71
+ "repository": {
72
+ "type": "git",
73
+ "url": "https://github.com/Innopers/motile-ui.git"
74
+ },
75
+ "homepage": "https://github.com/Innopers/motile-ui#readme",
76
+ "bugs": {
77
+ "url": "https://github.com/Innopers/motile-ui/issues"
78
+ },
79
+ "license": "MIT",
80
+ "sideEffects": false
81
+ }