@sarunyu/system-one 1.4.0 → 2.0.1

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 (3) hide show
  1. package/dist/style.css +1 -1
  2. package/llms.txt +202 -311
  3. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -1,4 +1,4 @@
1
1
  @layer system-one {
2
2
  /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
3
- @import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600&display=swap";@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}@keyframes caret-blink{0%,to{opacity:1}50%{opacity:0}}:root,:host{--font-sans:var(--font-sans);--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--spacing:.25rem;--container-sm:24rem;--text-xs:12px;--text-xs--line-height:calc(1 / .75);--text-sm--line-height:calc(1.25 / .875);--text-base:16px;--text-base--line-height:calc(1.5 / 1);--text-lg:18px;--text-xl:20px;--text-2xl:24px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--text-xxs:9px;--leading-3:14px;--leading-4:16px}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}body{background-color:var(--background);color:var(--foreground);font-family:var(--font-sans)}html{font-size:var(--font-size)}h1{font-size:var(--text-2xl);font-weight:var(--font-weight-medium);line-height:1.5}h2{font-size:var(--text-xl);font-weight:var(--font-weight-medium);line-height:1.5}h3{font-size:var(--text-lg);font-weight:var(--font-weight-medium);line-height:1.5}h4{font-size:var(--text-base);font-weight:var(--font-weight-medium);line-height:1.5}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-1\/2{top:50%}.top-\[8px\]{top:8px}.right-0{right:0}.right-1,.right-\[4px\]{right:4px}.left-0{left:0}.left-1{left:4px}.left-\[8px\]{left:8px}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:0}.mx-auto{margin-inline:auto}.mt-1{margin-top:4px}.mt-4{margin-top:16px}.mt-auto{margin-top:auto}.mb-2{margin-bottom:8px}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.size-\[8px\]{width:8px;height:8px}.size-\[24px\]{width:24px;height:24px}.size-full{width:100%;height:100%}.h-2{height:8px}.h-3\.5{height:14px}.h-4{height:16px}.h-4\.5{height:calc(var(--spacing) * 4.5)}.h-5{height:20px}.h-6{height:24px}.h-7{height:28px}.h-8{height:32px}.h-9{height:36px}.h-10{height:40px}.h-\[14px\]{height:14px}.h-\[16px\]{height:16px}.h-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[25px\]{height:25px}.h-\[28px\]{height:28px}.h-\[32px\]{height:32px}.h-\[36px\]{height:36px}.h-\[38px\]{height:38px}.h-\[40px\]{height:40px}.h-\[44px\]{height:44px}.h-\[116px\]{height:116px}.h-\[173px\]{height:173px}.h-auto{height:auto}.h-full{height:100%}.min-h-0{min-height:0}.min-h-12{min-height:48px}.min-h-\[1px\]{min-height:1px}.min-h-\[120px\]{min-height:120px}.min-h-px{min-height:1px}.w-3\.5{width:14px}.w-4{width:16px}.w-4\.5{width:calc(var(--spacing) * 4.5)}.w-5{width:20px}.w-6{width:24px}.w-7{width:28px}.w-8{width:32px}.w-9{width:36px}.w-10{width:40px}.w-\[7px\]{width:7px}.w-\[16px\]{width:16px}.w-\[18px\]{width:18px}.w-\[28px\]{width:28px}.w-\[36px\]{width:36px}.w-\[100px\]{width:100px}.w-\[163px\]{width:163px}.w-\[224px\]{width:224px}.w-\[308px\]{width:308px}.w-full{width:100%}.w-px{width:1px}.max-w-\[340px\]{max-width:340px}.max-w-\[343px\]{max-width:343px}.max-w-\[640px\]{max-width:640px}.max-w-\[720px\]{max-width:720px}.max-w-\[960px\]{max-width:960px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1440px\]{max-width:1440px}.max-w-none{max-width:none}.min-w-0{min-width:0}.min-w-\[14px\]{min-width:14px}.min-w-\[16px\]{min-width:16px}.min-w-\[40px\]{min-width:40px}.min-w-\[80px\]{min-width:80px}.min-w-\[340px\]{min-width:340px}.min-w-px{min-width:1px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-stretch{align-content:stretch}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0\.5{gap:2px}.gap-1{gap:4px}.gap-1\.5{gap:6px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-10{gap:40px}.gap-12{gap:48px}.gap-\[2px\]{gap:2px}.gap-\[4px\]{gap:4px}.gap-\[8px\]{gap:8px}.gap-\[12px\]{gap:12px}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(8px * var(--tw-space-y-reverse));margin-block-end:calc(8px * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[20px\]{column-gap:20px}.gap-y-\[32px\]{row-gap:32px}.self-center{align-self:center}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.overflow-auto{overflow:auto}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.\!rounded-none{border-radius:0!important}.rounded{border-radius:4px}.rounded-\[2px\]{border-radius:2px}.rounded-\[3px\]{border-radius:3px}.rounded-\[4px\]{border-radius:4px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-\[60px\]{border-radius:60px}.rounded-full{border-radius:999px}.rounded-lg{border-radius:8px}.rounded-md{border-radius:6px}.\!rounded-l-\[6px\]{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important}.\!rounded-l-none{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.\!rounded-r-\[6px\]{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important}.\!rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-b-\[1\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--border)}.border-border-disabled{border-color:var(--border-disabled)}.border-primary-action{border-color:var(--primary-action)}.border-transparent{border-color:#0000}.\!bg-primary-action{background-color:var(--primary-action)!important}.\!bg-range-bg{background-color:var(--range-bg)!important}.bg-\[var\(--fill-blue-50\)\]{background-color:var(--fill-blue-50)}.bg-\[var\(--fill-gray-100\)\]{background-color:var(--fill-gray-100)}.bg-\[var\(--fill-green-100\)\]{background-color:var(--fill-green-100)}.bg-\[var\(--fill-lime-100\)\]{background-color:var(--fill-lime-100)}.bg-\[var\(--fill-red-100\)\]{background-color:var(--fill-red-100)}.bg-\[var\(--fill-yellow-100\)\]{background-color:var(--fill-yellow-100)}.bg-background{background-color:var(--background)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-border{background-color:var(--border)}.bg-card{background-color:var(--card)}.bg-disabled-bg{background-color:var(--disabled-bg)}.bg-hover-bg{background-color:var(--hover-bg)}.bg-muted{background-color:var(--muted)}.bg-popover{background-color:var(--popover)}.bg-primary-action{background-color:var(--primary-action)}.bg-primary-action-light{background-color:var(--primary-action-light)}.bg-primary-action-muted{background-color:var(--primary-action-muted)}.bg-selected-bg{background-color:var(--selected-bg)}.bg-selected-light-bg{background-color:var(--selected-light-bg)}.bg-surface-chip-disabled{background-color:var(--surface-chip-disabled)}.bg-surface-clear-hover{background-color:var(--surface-clear-hover)}.bg-transparent{background-color:#0000}.bg-visual-red-default{background-color:var(--visual-red-default)}.object-cover{object-fit:cover}.p-0{padding:0}.p-2{padding:8px}.p-2\.5{padding:10px}.p-3{padding:12px}.p-3\.5{padding:14px}.p-4{padding:16px}.p-\[1px\]{padding:1px}.p-\[8px\]{padding:8px}.p-\[14px\]{padding:14px}.px-1{padding-inline:4px}.px-2{padding-inline:8px}.px-2\.5{padding-inline:10px}.px-3{padding-inline:12px}.px-3\.5{padding-inline:14px}.px-4{padding-inline:16px}.px-6{padding-inline:24px}.px-\[3px\]{padding-inline:3px}.px-\[4px\]{padding-inline:4px}.px-\[6px\]{padding-inline:6px}.px-\[8px\]{padding-inline:8px}.px-\[14px\]{padding-inline:14px}.py-0\.5{padding-block:2px}.py-1{padding-block:4px}.py-1\.5{padding-block:6px}.py-2{padding-block:8px}.py-2\.5{padding-block:10px}.py-3{padding-block:12px}.py-10{padding-block:40px}.py-\[4px\]{padding-block:4px}.py-\[6px\]{padding-block:6px}.py-\[7px\]{padding-block:7px}.py-\[10px\]{padding-block:10px}.py-\[14px\]{padding-block:14px}.pt-1{padding-top:4px}.pt-2{padding-top:8px}.pt-3{padding-top:12px}.pt-3\.5{padding-top:14px}.pt-\[12px\]{padding-top:12px}.pr-1\.5{padding-right:6px}.pr-2{padding-right:8px}.pr-2\.5{padding-right:10px}.pr-3{padding-right:12px}.pr-3\.5{padding-right:14px}.pr-4{padding-right:16px}.pr-\[4px\]{padding-right:4px}.pr-\[8px\]{padding-right:8px}.pr-\[10px\]{padding-right:10px}.pr-\[12px\]{padding-right:12px}.pb-1\.5{padding-bottom:6px}.pb-8{padding-bottom:32px}.pl-1\.5{padding-left:6px}.pl-2{padding-left:8px}.pl-2\.5{padding-left:10px}.pl-3{padding-left:12px}.pl-3\.5{padding-left:14px}.pl-4{padding-left:16px}.pl-\[6px\]{padding-left:6px}.pl-\[8px\]{padding-left:8px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-base{font-size:16px;line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:14px;line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:12px;line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.text-\[length\:var\(--text-xs\)\]{font-size:var(--text-xs)}.text-\[length\:var\(--text-xxs\)\]{font-size:var(--text-xxs)}.leading-4{--tw-leading:16px;line-height:16px}.leading-5{--tw-leading:20px;line-height:20px}.leading-\[1\.5\]{--tw-leading:1.5;line-height:1.5}.leading-\[16px\]{--tw-leading:16px;line-height:16px}.leading-\[18px\]{--tw-leading:18px;line-height:18px}.leading-\[20px\]{--tw-leading:20px;line-height:20px}.leading-\[22px\]{--tw-leading:22px;line-height:22px}.leading-\[var\(--leading-3\)\]{--tw-leading:var(--leading-3);line-height:var(--leading-3)}.leading-\[var\(--leading-4\)\]{--tw-leading:var(--leading-4);line-height:var(--leading-4)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.\!text-on-primary-action{color:var(--on-primary-action)!important}.\!text-range-text{color:var(--range-text)!important}.text-\[var\(--fill-blue-700\)\]{color:var(--fill-blue-700)}.text-\[var\(--fill-green-600\)\]{color:var(--fill-green-600)}.text-\[var\(--fill-lime-600\)\]{color:var(--fill-lime-600)}.text-\[var\(--fill-red-600\)\]{color:var(--fill-red-600)}.text-\[var\(--fill-yellow-600\)\]{color:var(--fill-yellow-600)}.text-accent-orange{color:var(--accent-orange)}.text-disabled{color:var(--disabled)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-on-primary-action{color:var(--on-primary-action)}.text-on-visual-red{color:var(--on-visual-red)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary-action,.text-primary-action\/40{color:var(--primary-action)}@supports (color:color-mix(in lab, red, red)){.text-primary-action\/40{color:color-mix(in oklab, var(--primary-action) 40%, transparent)}}.text-subtle-text{color:var(--subtle-text)}.not-italic{font-style:normal}.opacity-0{opacity:0}.opacity-50{opacity:.5}.shadow-card{--tw-shadow:var(--elevation-card);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-black{outline-color:var(--color-black)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=bottom] *){display:block}.placeholder\:text-disabled::placeholder{color:var(--disabled)}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.focus-within\:relative:focus-within{position:relative}.focus-within\:z-20:focus-within{z-index:20}@media (hover:hover){.hover\:\!bg-primary-action:hover{background-color:var(--primary-action)!important}.hover\:bg-black\/10:hover{background-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-black\/10:hover{background-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.hover\:bg-disabled-bg:hover{background-color:var(--disabled-bg)}.hover\:bg-hover-bg:hover{background-color:var(--hover-bg)}.hover\:bg-primary-action-hover:hover{background-color:var(--primary-action-hover)}.hover\:bg-primary-action-light:hover{background-color:var(--primary-action-light)}.hover\:bg-selected-bg:hover{background-color:var(--selected-bg)}.hover\:text-primary-action:hover{color:var(--primary-action)}}.focus\:\!bg-primary-action:focus{background-color:var(--primary-action)!important}.active\:bg-disabled-bg:active{background-color:var(--disabled-bg)}.active\:bg-primary-action-active:active{background-color:var(--primary-action-active)}.disabled\:cursor-default:disabled{cursor:default}.aria-selected\:bg-transparent[aria-selected=true]{background-color:#0000}.aria-selected\:opacity-30[aria-selected=true]{opacity:.3}.aria-selected\:opacity-100[aria-selected=true]{opacity:1}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction=bottom]{inset-inline:0}.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction=bottom]{bottom:0}.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction=bottom]{margin-top:calc(var(--spacing) * 24)}.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction=bottom]{max-height:80vh}.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction=bottom]{border-top-left-radius:8px;border-top-right-radius:8px}.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction=bottom]{border-top-style:var(--tw-border-style);border-top-width:1px}.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction=left]{inset-block:0}.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction=left]{left:0}.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction=left]{width:75%}.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction=left]{border-right-style:var(--tw-border-style);border-right-width:1px}.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction=right]{inset-block:0}.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction=right]{right:0}.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction=right]{width:75%}.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction=right]{border-left-style:var(--tw-border-style);border-left-width:1px}.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction=top]{inset-inline:0}.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction=top]{top:0}.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction=top]{margin-bottom:calc(var(--spacing) * 24)}.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction=top]{max-height:80vh}.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction=top]{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction=top]{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:gap-6{gap:24px}.data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction=left],.data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction=right]{max-width:var(--container-sm)}}@media (min-width:48rem){.md\:px-8{padding-inline:32px}}@media (min-width:64rem){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:80rem){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{display:none}.\[\&\:first-child\:has\(\.day-range-end\)\]\:rounded-l-\[6px\]:first-child:has(.day-range-end){border-top-left-radius:6px;border-bottom-left-radius:6px}.\[\&\:first-child\:has\(\.day-range-end\)\]\:rounded-l-\[8px\]:first-child:has(.day-range-end){border-top-left-radius:8px;border-bottom-left-radius:8px}.\[\&\:first-child\:has\(\.day-range-middle\)\]\:rounded-l-\[6px\]:first-child:has(.day-range-middle){border-top-left-radius:6px;border-bottom-left-radius:6px}.\[\&\:first-child\:has\(\.day-range-middle\)\]\:rounded-l-\[8px\]:first-child:has(.day-range-middle){border-top-left-radius:8px;border-bottom-left-radius:8px}.\[\&\:has\(\.day-range-end\)\]\:rounded-r-\[6px\]:has(.day-range-end){border-top-right-radius:6px;border-bottom-right-radius:6px}.\[\&\:has\(\.day-range-end\)\]\:rounded-r-\[8px\]:has(.day-range-end){border-top-right-radius:8px;border-bottom-right-radius:8px}.\[\&\:has\(\.day-range-end\)\]\:bg-range-bg:has(.day-range-end),.\[\&\:has\(\.day-range-middle\)\]\:bg-range-bg:has(.day-range-middle){background-color:var(--range-bg)}.\[\&\:has\(\.day-range-start\)\]\:rounded-l-\[6px\]:has(.day-range-start){border-top-left-radius:6px;border-bottom-left-radius:6px}.\[\&\:has\(\.day-range-start\)\]\:rounded-l-\[8px\]:has(.day-range-start){border-top-left-radius:8px;border-bottom-left-radius:8px}.\[\&\:has\(\.day-range-start\)\]\:bg-range-bg:has(.day-range-start){background-color:var(--range-bg)}.\[\&\:last-child\:has\(\.day-range-middle\)\]\:rounded-r-\[6px\]:last-child:has(.day-range-middle){border-top-right-radius:6px;border-bottom-right-radius:6px}.\[\&\:last-child\:has\(\.day-range-middle\)\]\:rounded-r-\[8px\]:last-child:has(.day-range-middle){border-top-right-radius:8px;border-bottom-right-radius:8px}.\[\&\:last-child\:has\(\.day-range-start\)\]\:rounded-r-\[6px\]:last-child:has(.day-range-start){border-top-right-radius:6px;border-bottom-right-radius:6px}.\[\&\:last-child\:has\(\.day-range-start\)\]\:rounded-r-\[8px\]:last-child:has(.day-range-start){border-top-right-radius:8px;border-bottom-right-radius:8px}.\[\&\:not\(\[aria-selected\=true\]\)\]\:\!bg-primary-action-light:not([aria-selected=true]){background-color:var(--primary-action-light)!important}.\[\&\:not\(\[aria-selected\=true\]\)\]\:text-foreground:not([aria-selected=true]){color:var(--foreground)}.icon-sm{width:14px;height:14px}.icon-md{width:16px;height:16px}.icon-lg{width:20px;height:20px}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--fill-p1-100:#f3f8fe;--fill-p1-200:#dae9fb;--fill-p1-300:#b5d3f8;--fill-p1-400:#91bef4;--fill-p1-500:#4792ed;--fill-p1-600:#0a6ee7;--fill-p1-700:#095ec4;--fill-p1-800:#074ea4;--fill-p1-900:#063f84;--fill-p1-950:#0a2f61;--fill-s1-100:#fdefe6;--fill-s1-200:#fbdfcc;--fill-s1-300:#f7c099;--fill-s1-400:#f3a067;--fill-s1-500:#ef8134;--fill-s1-600:#eb6101;--fill-s1-700:#bc4e01;--fill-s1-800:#8d3a01;--fill-s1-900:#5e2700;--fill-red-50:#fef2f2;--fill-red-100:#ffe2e2;--fill-red-200:#ffc9c9;--fill-red-300:#ffa2a2;--fill-red-400:#ff6467;--fill-red-500:#fb2c36;--fill-red-600:#e7000b;--fill-red-700:#c10007;--fill-red-800:#9f0712;--fill-red-900:#82181a;--fill-red-950:#460809;--fill-orange-50:#fff7ed;--fill-orange-100:#ffedd4;--fill-orange-200:#ffd7a8;--fill-orange-300:#ffb86a;--fill-orange-400:#ff8904;--fill-orange-500:#ff6900;--fill-orange-600:#f54a00;--fill-orange-700:#ca3500;--fill-orange-800:#9f2d00;--fill-orange-900:#7e2a0c;--fill-orange-950:#441306;--fill-amber-50:#fffbeb;--fill-amber-100:#fef3c6;--fill-amber-200:#fee685;--fill-amber-300:#ffd230;--fill-amber-400:#ffb900;--fill-amber-500:#fe9a00;--fill-amber-600:#e17100;--fill-amber-700:#bb4d00;--fill-amber-800:#973c00;--fill-amber-900:#7b3306;--fill-amber-950:#461901;--fill-yellow-50:#fefce8;--fill-yellow-100:#fef9c2;--fill-yellow-200:#fff085;--fill-yellow-300:#ffdf20;--fill-yellow-400:#fdc700;--fill-yellow-500:#f0b100;--fill-yellow-600:#d08700;--fill-yellow-700:#a65f00;--fill-yellow-800:#894b00;--fill-yellow-900:#733e0a;--fill-yellow-950:#432004;--fill-lime-50:#f7fee7;--fill-lime-100:#ecfcca;--fill-lime-200:#d8f999;--fill-lime-300:#bbf451;--fill-lime-400:#9ae600;--fill-lime-500:#7ccf00;--fill-lime-600:#5ea500;--fill-lime-700:#497d00;--fill-lime-800:#3c6300;--fill-lime-900:#35530e;--fill-lime-950:#192e03;--fill-green-50:#f0fdf4;--fill-green-100:#dbfce7;--fill-green-200:#b9f8cf;--fill-green-300:#7bf1a8;--fill-green-400:#05df72;--fill-green-500:#00c951;--fill-green-600:#00a63e;--fill-green-700:#008236;--fill-green-800:#016630;--fill-green-900:#0d542b;--fill-green-950:#032e15;--fill-emerald-50:#ecfdf5;--fill-emerald-100:#d0fae5;--fill-emerald-200:#a4f4cf;--fill-emerald-300:#5ee9b5;--fill-emerald-400:#00d492;--fill-emerald-500:#00bc7d;--fill-emerald-600:#096;--fill-emerald-700:#007a55;--fill-emerald-800:#006045;--fill-emerald-900:#004f3b;--fill-emerald-950:#002c22;--fill-teal-50:#f0fdfa;--fill-teal-100:#cbfbf1;--fill-teal-200:#96f7e4;--fill-teal-300:#46edd5;--fill-teal-400:#00d5be;--fill-teal-500:#00bba7;--fill-teal-600:#009689;--fill-teal-700:#00786f;--fill-teal-800:#005f5a;--fill-teal-900:#0b4f4a;--fill-teal-950:#022f2e;--fill-cyan-50:#ecfeff;--fill-cyan-100:#cefafe;--fill-cyan-200:#a2f4fd;--fill-cyan-300:#53eafd;--fill-cyan-400:#00d3f3;--fill-cyan-500:#00b8db;--fill-cyan-600:#0092b8;--fill-cyan-700:#007595;--fill-cyan-800:#005f78;--fill-cyan-900:#104e64;--fill-cyan-950:#053345;--fill-sky-50:#f0f9ff;--fill-sky-100:#dff2fe;--fill-sky-200:#b8e6fe;--fill-sky-300:#74d4ff;--fill-sky-400:#00bcff;--fill-sky-500:#00a6f4;--fill-sky-600:#0084d1;--fill-sky-700:#0069a8;--fill-sky-800:#00598a;--fill-sky-900:#024a71;--fill-sky-950:#052f4a;--fill-blue-50:#eff6ff;--fill-blue-100:#dbeafe;--fill-blue-200:#bedbff;--fill-blue-300:#8ec5ff;--fill-blue-400:#51a2ff;--fill-blue-500:#2b7fff;--fill-blue-600:#155dfc;--fill-blue-700:#1447e6;--fill-blue-800:#193cb8;--fill-blue-900:#1c398e;--fill-blue-950:#162556;--fill-indigo-50:#eef2ff;--fill-indigo-100:#e0e7ff;--fill-indigo-200:#c6d2ff;--fill-indigo-300:#a3b3ff;--fill-indigo-400:#7c86ff;--fill-indigo-500:#615fff;--fill-indigo-600:#4f39f6;--fill-indigo-700:#432dd7;--fill-indigo-800:#372aac;--fill-indigo-900:#312c85;--fill-indigo-950:#1e1a4d;--fill-violet-50:#f5f3ff;--fill-violet-100:#ede9fe;--fill-violet-200:#ddd6ff;--fill-violet-300:#c4b4ff;--fill-violet-400:#a684ff;--fill-violet-500:#8e51ff;--fill-violet-600:#7f22fe;--fill-violet-700:#7008e7;--fill-violet-800:#5d0ec0;--fill-violet-900:#4d179a;--fill-violet-950:#2f0d68;--fill-purple-50:#faf5ff;--fill-purple-100:#f3e8ff;--fill-purple-200:#e9d4ff;--fill-purple-300:#dab2ff;--fill-purple-400:#c27aff;--fill-purple-500:#ad46ff;--fill-purple-600:#9810fa;--fill-purple-700:#8200db;--fill-purple-800:#6e11b0;--fill-purple-900:#59168b;--fill-purple-950:#3c0366;--fill-fuchsia-50:#fdf4ff;--fill-fuchsia-100:#fae8ff;--fill-fuchsia-200:#f6cfff;--fill-fuchsia-300:#f4a8ff;--fill-fuchsia-400:#ed6bff;--fill-fuchsia-500:#e12afb;--fill-fuchsia-600:#c800de;--fill-fuchsia-700:#a800b7;--fill-fuchsia-800:#8a0194;--fill-fuchsia-900:#721378;--fill-fuchsia-950:#4b004f;--fill-rose-50:#fff1f2;--fill-rose-100:#ffe4e6;--fill-rose-200:#ffccd3;--fill-rose-300:#ffa1ad;--fill-rose-400:#ff637e;--fill-rose-500:#ff2056;--fill-rose-600:#ec003f;--fill-rose-700:#c70036;--fill-rose-800:#a50036;--fill-rose-900:#8b0836;--fill-rose-950:#4d0218;--fill-slate-50:#f8fafc;--fill-slate-100:#f1f5f9;--fill-slate-200:#e2e8f0;--fill-slate-300:#cad5e2;--fill-slate-400:#90a1b9;--fill-slate-500:#62748e;--fill-slate-600:#45556c;--fill-slate-700:#314158;--fill-slate-800:#1d293d;--fill-slate-900:#0f172b;--fill-slate-950:#020618;--fill-pink-50:#fdf2f8;--fill-pink-100:#fce7f3;--fill-pink-200:#fccee8;--fill-pink-300:#fda5d5;--fill-pink-400:#fb64b6;--fill-pink-500:#f6339a;--fill-pink-600:#e60076;--fill-pink-700:#c6005c;--fill-pink-800:#a3004c;--fill-pink-900:#861043;--fill-pink-950:#510424;--fill-gray-50:#f9fafb;--fill-gray-100:#f3f4f6;--fill-gray-200:#e5e7eb;--fill-gray-300:#d1d5dc;--fill-gray-400:#99a1af;--fill-gray-500:#6a7282;--fill-gray-600:#4a5565;--fill-gray-700:#364153;--fill-gray-800:#1e2939;--fill-gray-900:#101828;--fill-gray-950:#030712;--fill-zinc-50:#fafafa;--fill-zinc-100:#f4f4f5;--fill-zinc-200:#e4e4e7;--fill-zinc-300:#d4d4d8;--fill-zinc-400:#9f9fa9;--fill-zinc-500:#71717b;--fill-zinc-600:#52525c;--fill-zinc-700:#3f3f47;--fill-zinc-800:#27272a;--fill-zinc-900:#18181b;--fill-zinc-950:#09090b;--fill-neutral-50:#fafafa;--fill-neutral-100:#f5f5f5;--fill-neutral-200:#e5e5e5;--fill-neutral-300:#d4d4d4;--fill-neutral-400:#a1a1a1;--fill-neutral-500:#737373;--fill-neutral-600:#525252;--fill-neutral-700:#404040;--fill-neutral-800:#262626;--fill-neutral-900:#171717;--fill-neutral-950:#0a0a0a;--fill-stone-50:#fafaf9;--fill-stone-100:#f5f5f4;--fill-stone-200:#e7e5e4;--fill-stone-300:#d6d3d1;--fill-stone-400:#a6a09b;--fill-stone-500:#79716b;--fill-stone-600:#57534d;--fill-stone-700:#44403b;--fill-stone-800:#292524;--fill-stone-900:#1c1917;--fill-stone-950:#0c0a09;--fill-white-100:#ffffff0d;--fill-white-200:#ffffff1a;--fill-white-300:#fff3;--fill-white-400:#fff6;--fill-white-500:#ffffffb3;--fill-white-600:#fffc;--fill-white-700:#ffffffd9;--fill-white-800:#ffffffe6;--fill-white-900:#fffffff2;--fill-white-1000:#fff;--fill-black-100:#0000000d;--fill-black-200:#0000001a;--fill-black-300:#0003;--fill-black-400:#0006;--fill-black-500:#000000b3;--fill-black-600:#000c;--fill-black-700:#000000d9;--fill-black-800:#000000e6;--fill-black-900:#000000f2;--fill-black-1000:#000;--fill-midnight-blue-50:#e7e9ed;--fill-midnight-blue-100:#b4bbc7;--fill-midnight-blue-200:#8f9aac;--fill-midnight-blue-300:#5c6c86;--fill-midnight-blue-400:#3d506e;--fill-midnight-blue-500:#0c244a;--fill-midnight-blue-600:#0b2143;--fill-midnight-blue-700:#091a35;--fill-midnight-blue-800:#071429;--fill-midnight-blue-900:#050f1f;--fill-burnt-sienna-50:#f6efec;--fill-burnt-sienna-100:#e2cec3;--fill-burnt-sienna-200:#d4b6a5;--fill-burnt-sienna-300:#c1947c;--fill-burnt-sienna-400:#b58063;--fill-burnt-sienna-500:#a2603c;--fill-burnt-sienna-600:#935737;--fill-burnt-sienna-700:#73442b;--fill-burnt-sienna-800:#593521;--fill-burnt-sienna-900:#442819;--fill-camel-50:#faf6f2;--fill-camel-100:#eee4d6;--fill-camel-200:#e6d7c3;--fill-camel-300:#dbc5a7;--fill-camel-400:#d4b996;--fill-camel-500:#c9a87c;--fill-camel-600:#b79971;--fill-camel-700:#8f7758;--fill-camel-800:#6f5c44;--fill-camel-900:#544734;--fill-ivory-50:#fefdfd;--fill-ivory-100:#fbf9f8;--fill-ivory-200:#f9f7f4;--fill-ivory-300:#f6f3ef;--fill-ivory-400:#f5f1ec;--fill-ivory-500:#f2ede7;--fill-ivory-600:#dcd8d2;--fill-ivory-700:#aca8a4;--fill-ivory-800:#85827f;--fill-ivory-900:#666461;--font-size:16px;--font-sans:"Noto Sans Thai", sans-serif;--background:var(--fill-white-1000);--foreground:var(--fill-gray-900);--card:var(--fill-white-1000);--card-foreground:var(--fill-gray-900);--popover:var(--fill-white-1000);--popover-foreground:var(--fill-gray-900);--primary:var(--fill-gray-950);--primary-foreground:var(--fill-white-1000);--primary-action:var(--fill-p1-600);--primary-action-hover:var(--fill-p1-700);--primary-action-active:var(--fill-p1-800);--primary-action-light:var(--fill-p1-600)}@supports (color:color-mix(in lab, red, red)){:root{--primary-action-light:color-mix(in srgb, var(--fill-p1-600) 6%, transparent)}}:root{--primary-action-muted:var(--fill-p1-600)}@supports (color:color-mix(in lab, red, red)){:root{--primary-action-muted:color-mix(in srgb, var(--fill-p1-600) 10%, transparent)}}:root{--secondary:oklch(95% .0058 264.53);--secondary-foreground:var(--fill-gray-950);--muted:var(--fill-gray-100);--muted-foreground:var(--fill-gray-500);--accent:var(--fill-gray-100);--accent-foreground:var(--fill-gray-950);--accent-orange:var(--fill-s1-600);--destructive:var(--fill-red-600);--destructive-foreground:var(--fill-white-1000);--visual-red-default:var(--fill-red-500);--on-visual-red:var(--fill-white-1000);--error-dark:var(--fill-red-700);--success:var(--fill-emerald-600);--success-bg:var(--fill-emerald-50);--error-bg:var(--fill-rose-50);--border:var(--fill-black-200);--border-disabled:var(--fill-black-100);--border-muted:var(--fill-gray-300);--divider:var(--fill-gray-200);--caption:var(--fill-gray-400);--input:transparent;--input-background:var(--fill-gray-100);--disabled:var(--fill-gray-400);--disabled-bg:var(--fill-gray-100);--hover-bg:var(--fill-gray-50);--subtle-text:var(--fill-gray-600);--caret-color:var(--fill-blue-700);--selected-bg:var(--fill-blue-50);--selected-light-bg:var(--fill-p1-100);--range-bg:var(--fill-p1-200);--range-text:var(--fill-sky-500);--overlay-primary-4:var(--primary-action)}@supports (color:color-mix(in lab, red, red)){:root{--overlay-primary-4:color-mix(in srgb, var(--primary-action) 4%, transparent)}}:root{--overlay-primary-6:var(--primary-action)}@supports (color:color-mix(in lab, red, red)){:root{--overlay-primary-6:color-mix(in srgb, var(--primary-action) 6%, transparent)}}:root{--overlay-primary-8:var(--primary-action)}@supports (color:color-mix(in lab, red, red)){:root{--overlay-primary-8:color-mix(in srgb, var(--primary-action) 8%, transparent)}}:root{--nav-link:var(--fill-gray-700);--nav-link-active:var(--primary-action);--icon-muted:var(--fill-gray-700);--on-primary-action:var(--fill-white-1000);--elevation-popover:0px 20px 25px -5px #0000001a, 0px 8px 10px -6px #0000001a;--elevation-card:0px 0px 2px 0px #66666629, 0px 4px 8px 0px #6666661f;--surface-clear-hover:var(--fill-gray-200);--surface-chip-disabled:var(--fill-zinc-50);--switch-background:var(--fill-slate-300);--font-weight-medium:500;--font-weight-normal:400;--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--radius:4px;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:#101828;--sidebar-primary:#030213;--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(14.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(14.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(98.5% 0 0);--primary-foreground:oklch(20.5% 0 0);--primary-action:#3b8ef5;--primary-action-hover:#5ba3f7;--primary-action-active:#2178e4;--primary-action-light:#3b8ef51a;--primary-action-muted:#3b8ef526;--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(39.6% .141 25.723);--destructive-foreground:oklch(63.7% .237 25.331);--border:oklch(26.9% 0 0);--border-disabled:oklch(20% 0 0);--input:oklch(26.9% 0 0);--input-background:oklch(22% 0 0);--disabled:oklch(50% 0 0);--disabled-bg:oklch(22% 0 0);--hover-bg:oklch(24% 0 0);--subtle-text:oklch(65% 0 0);--caret-color:#5ba3f7;--selected-bg:#3b8ef51f;--selected-light-bg:#3b8ef514;--ring:oklch(43.9% 0 0);--font-weight-medium:500;--font-weight-normal:400;--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(26.9% 0 0);--sidebar-ring:oklch(43.9% 0 0)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}
3
+ @import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600&display=swap";@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}@keyframes caret-blink{0%,to{opacity:1}50%{opacity:0}}:root,:host{--font-sans:var(--font-sans);--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--spacing:.25rem;--container-sm:24rem;--text-xs:12px;--text-xs--line-height:calc(1 / .75);--text-sm--line-height:calc(1.25 / .875);--text-base--line-height:calc(1.5 / 1);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--text-xxs:9px;--leading-3:14px;--leading-4:16px}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}body{font-family:var(--font-sans)}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-1\/2{top:50%}.top-\[8px\]{top:8px}.right-0{right:0}.right-1,.right-\[4px\]{right:4px}.left-0{left:0}.left-1{left:4px}.left-\[8px\]{left:8px}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:0}.mx-auto{margin-inline:auto}.mt-1{margin-top:4px}.mt-4{margin-top:16px}.mt-auto{margin-top:auto}.mb-2{margin-bottom:8px}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.size-\[8px\]{width:8px;height:8px}.size-\[24px\]{width:24px;height:24px}.size-full{width:100%;height:100%}.h-2{height:8px}.h-3\.5{height:14px}.h-4{height:16px}.h-4\.5{height:calc(var(--spacing) * 4.5)}.h-5{height:20px}.h-6{height:24px}.h-7{height:28px}.h-8{height:32px}.h-9{height:36px}.h-10{height:40px}.h-\[14px\]{height:14px}.h-\[16px\]{height:16px}.h-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[25px\]{height:25px}.h-\[28px\]{height:28px}.h-\[32px\]{height:32px}.h-\[36px\]{height:36px}.h-\[38px\]{height:38px}.h-\[40px\]{height:40px}.h-\[44px\]{height:44px}.h-\[116px\]{height:116px}.h-\[173px\]{height:173px}.h-auto{height:auto}.h-full{height:100%}.min-h-0{min-height:0}.min-h-12{min-height:48px}.min-h-\[1px\]{min-height:1px}.min-h-\[120px\]{min-height:120px}.min-h-px{min-height:1px}.w-3\.5{width:14px}.w-4{width:16px}.w-4\.5{width:calc(var(--spacing) * 4.5)}.w-5{width:20px}.w-6{width:24px}.w-7{width:28px}.w-8{width:32px}.w-9{width:36px}.w-10{width:40px}.w-\[7px\]{width:7px}.w-\[16px\]{width:16px}.w-\[18px\]{width:18px}.w-\[28px\]{width:28px}.w-\[36px\]{width:36px}.w-\[100px\]{width:100px}.w-\[163px\]{width:163px}.w-\[224px\]{width:224px}.w-\[308px\]{width:308px}.w-full{width:100%}.w-px{width:1px}.max-w-\[340px\]{max-width:340px}.max-w-\[343px\]{max-width:343px}.max-w-\[640px\]{max-width:640px}.max-w-\[720px\]{max-width:720px}.max-w-\[960px\]{max-width:960px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1440px\]{max-width:1440px}.max-w-none{max-width:none}.min-w-0{min-width:0}.min-w-\[14px\]{min-width:14px}.min-w-\[16px\]{min-width:16px}.min-w-\[40px\]{min-width:40px}.min-w-\[80px\]{min-width:80px}.min-w-\[340px\]{min-width:340px}.min-w-px{min-width:1px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-stretch{align-content:stretch}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0\.5{gap:2px}.gap-1{gap:4px}.gap-1\.5{gap:6px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-10{gap:40px}.gap-12{gap:48px}.gap-\[2px\]{gap:2px}.gap-\[4px\]{gap:4px}.gap-\[8px\]{gap:8px}.gap-\[12px\]{gap:12px}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(8px * var(--tw-space-y-reverse));margin-block-end:calc(8px * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[20px\]{column-gap:20px}.gap-y-\[32px\]{row-gap:32px}.self-center{align-self:center}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.overflow-auto{overflow:auto}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.\!rounded-none{border-radius:0!important}.rounded{border-radius:4px}.rounded-\[2px\]{border-radius:2px}.rounded-\[3px\]{border-radius:3px}.rounded-\[4px\]{border-radius:4px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-\[60px\]{border-radius:60px}.rounded-full{border-radius:999px}.rounded-lg{border-radius:8px}.rounded-md{border-radius:6px}.\!rounded-l-\[6px\]{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important}.\!rounded-l-none{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.\!rounded-r-\[6px\]{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important}.\!rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-b-\[1\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--border)}.border-border-disabled{border-color:var(--border-disabled)}.border-primary-action{border-color:var(--primary-action)}.border-transparent{border-color:#0000}.\!bg-primary-action{background-color:var(--primary-action)!important}.\!bg-range-bg{background-color:var(--range-bg)!important}.bg-\[var\(--fill-blue-50\)\]{background-color:var(--fill-blue-50)}.bg-\[var\(--fill-gray-100\)\]{background-color:var(--fill-gray-100)}.bg-\[var\(--fill-green-100\)\]{background-color:var(--fill-green-100)}.bg-\[var\(--fill-lime-100\)\]{background-color:var(--fill-lime-100)}.bg-\[var\(--fill-red-100\)\]{background-color:var(--fill-red-100)}.bg-\[var\(--fill-yellow-100\)\]{background-color:var(--fill-yellow-100)}.bg-background{background-color:var(--background)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-border{background-color:var(--border)}.bg-card{background-color:var(--card)}.bg-disabled-bg{background-color:var(--disabled-bg)}.bg-hover-bg{background-color:var(--hover-bg)}.bg-muted{background-color:var(--muted)}.bg-popover{background-color:var(--popover)}.bg-primary-action{background-color:var(--primary-action)}.bg-primary-action-light{background-color:var(--primary-action-light)}.bg-primary-action-muted{background-color:var(--primary-action-muted)}.bg-selected-bg{background-color:var(--selected-bg)}.bg-selected-light-bg{background-color:var(--selected-light-bg)}.bg-surface-chip-disabled{background-color:var(--surface-chip-disabled)}.bg-surface-clear-hover{background-color:var(--surface-clear-hover)}.bg-transparent{background-color:#0000}.bg-visual-red-default{background-color:var(--visual-red-default)}.object-cover{object-fit:cover}.p-0{padding:0}.p-2{padding:8px}.p-2\.5{padding:10px}.p-3{padding:12px}.p-3\.5{padding:14px}.p-4{padding:16px}.p-\[1px\]{padding:1px}.p-\[8px\]{padding:8px}.p-\[14px\]{padding:14px}.px-1{padding-inline:4px}.px-2{padding-inline:8px}.px-2\.5{padding-inline:10px}.px-3{padding-inline:12px}.px-3\.5{padding-inline:14px}.px-4{padding-inline:16px}.px-6{padding-inline:24px}.px-\[3px\]{padding-inline:3px}.px-\[4px\]{padding-inline:4px}.px-\[6px\]{padding-inline:6px}.px-\[8px\]{padding-inline:8px}.px-\[14px\]{padding-inline:14px}.py-0\.5{padding-block:2px}.py-1{padding-block:4px}.py-1\.5{padding-block:6px}.py-2{padding-block:8px}.py-2\.5{padding-block:10px}.py-3{padding-block:12px}.py-10{padding-block:40px}.py-\[4px\]{padding-block:4px}.py-\[6px\]{padding-block:6px}.py-\[7px\]{padding-block:7px}.py-\[10px\]{padding-block:10px}.py-\[14px\]{padding-block:14px}.pt-1{padding-top:4px}.pt-2{padding-top:8px}.pt-3{padding-top:12px}.pt-3\.5{padding-top:14px}.pt-\[12px\]{padding-top:12px}.pr-1\.5{padding-right:6px}.pr-2{padding-right:8px}.pr-2\.5{padding-right:10px}.pr-3{padding-right:12px}.pr-3\.5{padding-right:14px}.pr-4{padding-right:16px}.pr-\[4px\]{padding-right:4px}.pr-\[8px\]{padding-right:8px}.pr-\[10px\]{padding-right:10px}.pr-\[12px\]{padding-right:12px}.pb-1\.5{padding-bottom:6px}.pb-8{padding-bottom:32px}.pl-1\.5{padding-left:6px}.pl-2{padding-left:8px}.pl-2\.5{padding-left:10px}.pl-3{padding-left:12px}.pl-3\.5{padding-left:14px}.pl-4{padding-left:16px}.pl-\[6px\]{padding-left:6px}.pl-\[8px\]{padding-left:8px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-base{font-size:16px;line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:14px;line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:12px;line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.text-\[length\:var\(--text-xs\)\]{font-size:var(--text-xs)}.text-\[length\:var\(--text-xxs\)\]{font-size:var(--text-xxs)}.leading-4{--tw-leading:16px;line-height:16px}.leading-5{--tw-leading:20px;line-height:20px}.leading-\[1\.5\]{--tw-leading:1.5;line-height:1.5}.leading-\[16px\]{--tw-leading:16px;line-height:16px}.leading-\[18px\]{--tw-leading:18px;line-height:18px}.leading-\[20px\]{--tw-leading:20px;line-height:20px}.leading-\[22px\]{--tw-leading:22px;line-height:22px}.leading-\[var\(--leading-3\)\]{--tw-leading:var(--leading-3);line-height:var(--leading-3)}.leading-\[var\(--leading-4\)\]{--tw-leading:var(--leading-4);line-height:var(--leading-4)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.\!text-on-primary-action{color:var(--on-primary-action)!important}.\!text-range-text{color:var(--range-text)!important}.text-\[var\(--fill-blue-700\)\]{color:var(--fill-blue-700)}.text-\[var\(--fill-green-600\)\]{color:var(--fill-green-600)}.text-\[var\(--fill-lime-600\)\]{color:var(--fill-lime-600)}.text-\[var\(--fill-red-600\)\]{color:var(--fill-red-600)}.text-\[var\(--fill-yellow-600\)\]{color:var(--fill-yellow-600)}.text-accent-orange{color:var(--accent-orange)}.text-disabled{color:var(--disabled)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-on-primary-action{color:var(--on-primary-action)}.text-on-visual-red{color:var(--on-visual-red)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary-action,.text-primary-action\/40{color:var(--primary-action)}@supports (color:color-mix(in lab, red, red)){.text-primary-action\/40{color:color-mix(in oklab, var(--primary-action) 40%, transparent)}}.text-subtle-text{color:var(--subtle-text)}.not-italic{font-style:normal}.opacity-0{opacity:0}.opacity-50{opacity:.5}.shadow-card{--tw-shadow:var(--elevation-card);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-black{outline-color:var(--color-black)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=bottom] *){display:block}.placeholder\:text-disabled::placeholder{color:var(--disabled)}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.focus-within\:relative:focus-within{position:relative}.focus-within\:z-20:focus-within{z-index:20}@media (hover:hover){.hover\:\!bg-primary-action:hover{background-color:var(--primary-action)!important}.hover\:bg-black\/10:hover{background-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-black\/10:hover{background-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.hover\:bg-disabled-bg:hover{background-color:var(--disabled-bg)}.hover\:bg-hover-bg:hover{background-color:var(--hover-bg)}.hover\:bg-primary-action-hover:hover{background-color:var(--primary-action-hover)}.hover\:bg-primary-action-light:hover{background-color:var(--primary-action-light)}.hover\:bg-selected-bg:hover{background-color:var(--selected-bg)}.hover\:text-primary-action:hover{color:var(--primary-action)}}.focus\:\!bg-primary-action:focus{background-color:var(--primary-action)!important}.active\:bg-disabled-bg:active{background-color:var(--disabled-bg)}.active\:bg-primary-action-active:active{background-color:var(--primary-action-active)}.disabled\:cursor-default:disabled{cursor:default}.aria-selected\:bg-transparent[aria-selected=true]{background-color:#0000}.aria-selected\:opacity-30[aria-selected=true]{opacity:.3}.aria-selected\:opacity-100[aria-selected=true]{opacity:1}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction=bottom]{inset-inline:0}.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction=bottom]{bottom:0}.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction=bottom]{margin-top:calc(var(--spacing) * 24)}.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction=bottom]{max-height:80vh}.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction=bottom]{border-top-left-radius:8px;border-top-right-radius:8px}.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction=bottom]{border-top-style:var(--tw-border-style);border-top-width:1px}.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction=left]{inset-block:0}.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction=left]{left:0}.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction=left]{width:75%}.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction=left]{border-right-style:var(--tw-border-style);border-right-width:1px}.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction=right]{inset-block:0}.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction=right]{right:0}.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction=right]{width:75%}.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction=right]{border-left-style:var(--tw-border-style);border-left-width:1px}.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction=top]{inset-inline:0}.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction=top]{top:0}.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction=top]{margin-bottom:calc(var(--spacing) * 24)}.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction=top]{max-height:80vh}.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction=top]{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction=top]{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:gap-6{gap:24px}.data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction=left],.data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction=right]{max-width:var(--container-sm)}}@media (min-width:48rem){.md\:px-8{padding-inline:32px}}@media (min-width:64rem){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:80rem){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{display:none}.\[\&\:first-child\:has\(\.day-range-end\)\]\:rounded-l-\[6px\]:first-child:has(.day-range-end){border-top-left-radius:6px;border-bottom-left-radius:6px}.\[\&\:first-child\:has\(\.day-range-end\)\]\:rounded-l-\[8px\]:first-child:has(.day-range-end){border-top-left-radius:8px;border-bottom-left-radius:8px}.\[\&\:first-child\:has\(\.day-range-middle\)\]\:rounded-l-\[6px\]:first-child:has(.day-range-middle){border-top-left-radius:6px;border-bottom-left-radius:6px}.\[\&\:first-child\:has\(\.day-range-middle\)\]\:rounded-l-\[8px\]:first-child:has(.day-range-middle){border-top-left-radius:8px;border-bottom-left-radius:8px}.\[\&\:has\(\.day-range-end\)\]\:rounded-r-\[6px\]:has(.day-range-end){border-top-right-radius:6px;border-bottom-right-radius:6px}.\[\&\:has\(\.day-range-end\)\]\:rounded-r-\[8px\]:has(.day-range-end){border-top-right-radius:8px;border-bottom-right-radius:8px}.\[\&\:has\(\.day-range-end\)\]\:bg-range-bg:has(.day-range-end),.\[\&\:has\(\.day-range-middle\)\]\:bg-range-bg:has(.day-range-middle){background-color:var(--range-bg)}.\[\&\:has\(\.day-range-start\)\]\:rounded-l-\[6px\]:has(.day-range-start){border-top-left-radius:6px;border-bottom-left-radius:6px}.\[\&\:has\(\.day-range-start\)\]\:rounded-l-\[8px\]:has(.day-range-start){border-top-left-radius:8px;border-bottom-left-radius:8px}.\[\&\:has\(\.day-range-start\)\]\:bg-range-bg:has(.day-range-start){background-color:var(--range-bg)}.\[\&\:last-child\:has\(\.day-range-middle\)\]\:rounded-r-\[6px\]:last-child:has(.day-range-middle){border-top-right-radius:6px;border-bottom-right-radius:6px}.\[\&\:last-child\:has\(\.day-range-middle\)\]\:rounded-r-\[8px\]:last-child:has(.day-range-middle){border-top-right-radius:8px;border-bottom-right-radius:8px}.\[\&\:last-child\:has\(\.day-range-start\)\]\:rounded-r-\[6px\]:last-child:has(.day-range-start){border-top-right-radius:6px;border-bottom-right-radius:6px}.\[\&\:last-child\:has\(\.day-range-start\)\]\:rounded-r-\[8px\]:last-child:has(.day-range-start){border-top-right-radius:8px;border-bottom-right-radius:8px}.\[\&\:not\(\[aria-selected\=true\]\)\]\:\!bg-primary-action-light:not([aria-selected=true]){background-color:var(--primary-action-light)!important}.\[\&\:not\(\[aria-selected\=true\]\)\]\:text-foreground:not([aria-selected=true]){color:var(--foreground)}.icon-sm{width:14px;height:14px}.icon-md{width:16px;height:16px}.icon-lg{width:20px;height:20px}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--fill-p1-100:#f3f8fe;--fill-p1-200:#dae9fb;--fill-p1-300:#b5d3f8;--fill-p1-400:#91bef4;--fill-p1-500:#4792ed;--fill-p1-600:#0a6ee7;--fill-p1-700:#095ec4;--fill-p1-800:#074ea4;--fill-p1-900:#063f84;--fill-p1-950:#0a2f61;--fill-s1-100:#fdefe6;--fill-s1-200:#fbdfcc;--fill-s1-300:#f7c099;--fill-s1-400:#f3a067;--fill-s1-500:#ef8134;--fill-s1-600:#eb6101;--fill-s1-700:#bc4e01;--fill-s1-800:#8d3a01;--fill-s1-900:#5e2700;--fill-red-50:#fef2f2;--fill-red-100:#ffe2e2;--fill-red-200:#ffc9c9;--fill-red-300:#ffa2a2;--fill-red-400:#ff6467;--fill-red-500:#fb2c36;--fill-red-600:#e7000b;--fill-red-700:#c10007;--fill-red-800:#9f0712;--fill-red-900:#82181a;--fill-red-950:#460809;--fill-orange-50:#fff7ed;--fill-orange-100:#ffedd4;--fill-orange-200:#ffd7a8;--fill-orange-300:#ffb86a;--fill-orange-400:#ff8904;--fill-orange-500:#ff6900;--fill-orange-600:#f54a00;--fill-orange-700:#ca3500;--fill-orange-800:#9f2d00;--fill-orange-900:#7e2a0c;--fill-orange-950:#441306;--fill-amber-50:#fffbeb;--fill-amber-100:#fef3c6;--fill-amber-200:#fee685;--fill-amber-300:#ffd230;--fill-amber-400:#ffb900;--fill-amber-500:#fe9a00;--fill-amber-600:#e17100;--fill-amber-700:#bb4d00;--fill-amber-800:#973c00;--fill-amber-900:#7b3306;--fill-amber-950:#461901;--fill-yellow-50:#fefce8;--fill-yellow-100:#fef9c2;--fill-yellow-200:#fff085;--fill-yellow-300:#ffdf20;--fill-yellow-400:#fdc700;--fill-yellow-500:#f0b100;--fill-yellow-600:#d08700;--fill-yellow-700:#a65f00;--fill-yellow-800:#894b00;--fill-yellow-900:#733e0a;--fill-yellow-950:#432004;--fill-lime-50:#f7fee7;--fill-lime-100:#ecfcca;--fill-lime-200:#d8f999;--fill-lime-300:#bbf451;--fill-lime-400:#9ae600;--fill-lime-500:#7ccf00;--fill-lime-600:#5ea500;--fill-lime-700:#497d00;--fill-lime-800:#3c6300;--fill-lime-900:#35530e;--fill-lime-950:#192e03;--fill-green-50:#f0fdf4;--fill-green-100:#dbfce7;--fill-green-200:#b9f8cf;--fill-green-300:#7bf1a8;--fill-green-400:#05df72;--fill-green-500:#00c951;--fill-green-600:#00a63e;--fill-green-700:#008236;--fill-green-800:#016630;--fill-green-900:#0d542b;--fill-green-950:#032e15;--fill-emerald-50:#ecfdf5;--fill-emerald-100:#d0fae5;--fill-emerald-200:#a4f4cf;--fill-emerald-300:#5ee9b5;--fill-emerald-400:#00d492;--fill-emerald-500:#00bc7d;--fill-emerald-600:#096;--fill-emerald-700:#007a55;--fill-emerald-800:#006045;--fill-emerald-900:#004f3b;--fill-emerald-950:#002c22;--fill-teal-50:#f0fdfa;--fill-teal-100:#cbfbf1;--fill-teal-200:#96f7e4;--fill-teal-300:#46edd5;--fill-teal-400:#00d5be;--fill-teal-500:#00bba7;--fill-teal-600:#009689;--fill-teal-700:#00786f;--fill-teal-800:#005f5a;--fill-teal-900:#0b4f4a;--fill-teal-950:#022f2e;--fill-cyan-50:#ecfeff;--fill-cyan-100:#cefafe;--fill-cyan-200:#a2f4fd;--fill-cyan-300:#53eafd;--fill-cyan-400:#00d3f3;--fill-cyan-500:#00b8db;--fill-cyan-600:#0092b8;--fill-cyan-700:#007595;--fill-cyan-800:#005f78;--fill-cyan-900:#104e64;--fill-cyan-950:#053345;--fill-sky-50:#f0f9ff;--fill-sky-100:#dff2fe;--fill-sky-200:#b8e6fe;--fill-sky-300:#74d4ff;--fill-sky-400:#00bcff;--fill-sky-500:#00a6f4;--fill-sky-600:#0084d1;--fill-sky-700:#0069a8;--fill-sky-800:#00598a;--fill-sky-900:#024a71;--fill-sky-950:#052f4a;--fill-blue-50:#eff6ff;--fill-blue-100:#dbeafe;--fill-blue-200:#bedbff;--fill-blue-300:#8ec5ff;--fill-blue-400:#51a2ff;--fill-blue-500:#2b7fff;--fill-blue-600:#155dfc;--fill-blue-700:#1447e6;--fill-blue-800:#193cb8;--fill-blue-900:#1c398e;--fill-blue-950:#162556;--fill-indigo-50:#eef2ff;--fill-indigo-100:#e0e7ff;--fill-indigo-200:#c6d2ff;--fill-indigo-300:#a3b3ff;--fill-indigo-400:#7c86ff;--fill-indigo-500:#615fff;--fill-indigo-600:#4f39f6;--fill-indigo-700:#432dd7;--fill-indigo-800:#372aac;--fill-indigo-900:#312c85;--fill-indigo-950:#1e1a4d;--fill-violet-50:#f5f3ff;--fill-violet-100:#ede9fe;--fill-violet-200:#ddd6ff;--fill-violet-300:#c4b4ff;--fill-violet-400:#a684ff;--fill-violet-500:#8e51ff;--fill-violet-600:#7f22fe;--fill-violet-700:#7008e7;--fill-violet-800:#5d0ec0;--fill-violet-900:#4d179a;--fill-violet-950:#2f0d68;--fill-purple-50:#faf5ff;--fill-purple-100:#f3e8ff;--fill-purple-200:#e9d4ff;--fill-purple-300:#dab2ff;--fill-purple-400:#c27aff;--fill-purple-500:#ad46ff;--fill-purple-600:#9810fa;--fill-purple-700:#8200db;--fill-purple-800:#6e11b0;--fill-purple-900:#59168b;--fill-purple-950:#3c0366;--fill-fuchsia-50:#fdf4ff;--fill-fuchsia-100:#fae8ff;--fill-fuchsia-200:#f6cfff;--fill-fuchsia-300:#f4a8ff;--fill-fuchsia-400:#ed6bff;--fill-fuchsia-500:#e12afb;--fill-fuchsia-600:#c800de;--fill-fuchsia-700:#a800b7;--fill-fuchsia-800:#8a0194;--fill-fuchsia-900:#721378;--fill-fuchsia-950:#4b004f;--fill-rose-50:#fff1f2;--fill-rose-100:#ffe4e6;--fill-rose-200:#ffccd3;--fill-rose-300:#ffa1ad;--fill-rose-400:#ff637e;--fill-rose-500:#ff2056;--fill-rose-600:#ec003f;--fill-rose-700:#c70036;--fill-rose-800:#a50036;--fill-rose-900:#8b0836;--fill-rose-950:#4d0218;--fill-slate-50:#f8fafc;--fill-slate-100:#f1f5f9;--fill-slate-200:#e2e8f0;--fill-slate-300:#cad5e2;--fill-slate-400:#90a1b9;--fill-slate-500:#62748e;--fill-slate-600:#45556c;--fill-slate-700:#314158;--fill-slate-800:#1d293d;--fill-slate-900:#0f172b;--fill-slate-950:#020618;--fill-pink-50:#fdf2f8;--fill-pink-100:#fce7f3;--fill-pink-200:#fccee8;--fill-pink-300:#fda5d5;--fill-pink-400:#fb64b6;--fill-pink-500:#f6339a;--fill-pink-600:#e60076;--fill-pink-700:#c6005c;--fill-pink-800:#a3004c;--fill-pink-900:#861043;--fill-pink-950:#510424;--fill-gray-50:#f9fafb;--fill-gray-100:#f3f4f6;--fill-gray-200:#e5e7eb;--fill-gray-300:#d1d5dc;--fill-gray-400:#99a1af;--fill-gray-500:#6a7282;--fill-gray-600:#4a5565;--fill-gray-700:#364153;--fill-gray-800:#1e2939;--fill-gray-900:#101828;--fill-gray-950:#030712;--fill-zinc-50:#fafafa;--fill-zinc-100:#f4f4f5;--fill-zinc-200:#e4e4e7;--fill-zinc-300:#d4d4d8;--fill-zinc-400:#9f9fa9;--fill-zinc-500:#71717b;--fill-zinc-600:#52525c;--fill-zinc-700:#3f3f47;--fill-zinc-800:#27272a;--fill-zinc-900:#18181b;--fill-zinc-950:#09090b;--fill-neutral-50:#fafafa;--fill-neutral-100:#f5f5f5;--fill-neutral-200:#e5e5e5;--fill-neutral-300:#d4d4d4;--fill-neutral-400:#a1a1a1;--fill-neutral-500:#737373;--fill-neutral-600:#525252;--fill-neutral-700:#404040;--fill-neutral-800:#262626;--fill-neutral-900:#171717;--fill-neutral-950:#0a0a0a;--fill-stone-50:#fafaf9;--fill-stone-100:#f5f5f4;--fill-stone-200:#e7e5e4;--fill-stone-300:#d6d3d1;--fill-stone-400:#a6a09b;--fill-stone-500:#79716b;--fill-stone-600:#57534d;--fill-stone-700:#44403b;--fill-stone-800:#292524;--fill-stone-900:#1c1917;--fill-stone-950:#0c0a09;--fill-white-100:#ffffff0d;--fill-white-200:#ffffff1a;--fill-white-300:#fff3;--fill-white-400:#fff6;--fill-white-500:#ffffffb3;--fill-white-600:#fffc;--fill-white-700:#ffffffd9;--fill-white-800:#ffffffe6;--fill-white-900:#fffffff2;--fill-white-1000:#fff;--fill-black-100:#0000000d;--fill-black-200:#0000001a;--fill-black-300:#0003;--fill-black-400:#0006;--fill-black-500:#000000b3;--fill-black-600:#000c;--fill-black-700:#000000d9;--fill-black-800:#000000e6;--fill-black-900:#000000f2;--fill-black-1000:#000;--fill-midnight-blue-50:#e7e9ed;--fill-midnight-blue-100:#b4bbc7;--fill-midnight-blue-200:#8f9aac;--fill-midnight-blue-300:#5c6c86;--fill-midnight-blue-400:#3d506e;--fill-midnight-blue-500:#0c244a;--fill-midnight-blue-600:#0b2143;--fill-midnight-blue-700:#091a35;--fill-midnight-blue-800:#071429;--fill-midnight-blue-900:#050f1f;--fill-burnt-sienna-50:#f6efec;--fill-burnt-sienna-100:#e2cec3;--fill-burnt-sienna-200:#d4b6a5;--fill-burnt-sienna-300:#c1947c;--fill-burnt-sienna-400:#b58063;--fill-burnt-sienna-500:#a2603c;--fill-burnt-sienna-600:#935737;--fill-burnt-sienna-700:#73442b;--fill-burnt-sienna-800:#593521;--fill-burnt-sienna-900:#442819;--fill-camel-50:#faf6f2;--fill-camel-100:#eee4d6;--fill-camel-200:#e6d7c3;--fill-camel-300:#dbc5a7;--fill-camel-400:#d4b996;--fill-camel-500:#c9a87c;--fill-camel-600:#b79971;--fill-camel-700:#8f7758;--fill-camel-800:#6f5c44;--fill-camel-900:#544734;--fill-ivory-50:#fefdfd;--fill-ivory-100:#fbf9f8;--fill-ivory-200:#f9f7f4;--fill-ivory-300:#f6f3ef;--fill-ivory-400:#f5f1ec;--fill-ivory-500:#f2ede7;--fill-ivory-600:#dcd8d2;--fill-ivory-700:#aca8a4;--fill-ivory-800:#85827f;--fill-ivory-900:#666461;--font-size:16px;--font-sans:"Noto Sans Thai", sans-serif;--background:var(--fill-white-1000);--foreground:var(--fill-gray-900);--card:var(--fill-white-1000);--card-foreground:var(--fill-gray-900);--popover:var(--fill-white-1000);--popover-foreground:var(--fill-gray-900);--primary:var(--fill-gray-950);--primary-foreground:var(--fill-white-1000);--primary-action:var(--fill-p1-600);--primary-action-hover:var(--fill-p1-700);--primary-action-active:var(--fill-p1-800);--primary-action-light:var(--fill-p1-600)}@supports (color:color-mix(in lab, red, red)){:root{--primary-action-light:color-mix(in srgb, var(--fill-p1-600) 6%, transparent)}}:root{--primary-action-muted:var(--fill-p1-600)}@supports (color:color-mix(in lab, red, red)){:root{--primary-action-muted:color-mix(in srgb, var(--fill-p1-600) 10%, transparent)}}:root{--secondary:oklch(95% .0058 264.53);--secondary-foreground:var(--fill-gray-950);--muted:var(--fill-gray-100);--muted-foreground:var(--fill-gray-500);--accent:var(--fill-gray-100);--accent-foreground:var(--fill-gray-950);--accent-orange:var(--fill-s1-600);--destructive:var(--fill-red-600);--destructive-foreground:var(--fill-white-1000);--visual-red-default:var(--fill-red-500);--on-visual-red:var(--fill-white-1000);--error-dark:var(--fill-red-700);--success:var(--fill-emerald-600);--success-bg:var(--fill-emerald-50);--error-bg:var(--fill-rose-50);--border:var(--fill-black-200);--border-disabled:var(--fill-black-100);--border-muted:var(--fill-gray-300);--divider:var(--fill-gray-200);--caption:var(--fill-gray-400);--input:transparent;--input-background:var(--fill-gray-100);--disabled:var(--fill-gray-400);--disabled-bg:var(--fill-gray-100);--hover-bg:var(--fill-gray-50);--subtle-text:var(--fill-gray-600);--caret-color:var(--fill-blue-700);--selected-bg:var(--fill-blue-50);--selected-light-bg:var(--fill-p1-100);--range-bg:var(--fill-p1-200);--range-text:var(--fill-sky-500);--overlay-primary-4:var(--primary-action)}@supports (color:color-mix(in lab, red, red)){:root{--overlay-primary-4:color-mix(in srgb, var(--primary-action) 4%, transparent)}}:root{--overlay-primary-6:var(--primary-action)}@supports (color:color-mix(in lab, red, red)){:root{--overlay-primary-6:color-mix(in srgb, var(--primary-action) 6%, transparent)}}:root{--overlay-primary-8:var(--primary-action)}@supports (color:color-mix(in lab, red, red)){:root{--overlay-primary-8:color-mix(in srgb, var(--primary-action) 8%, transparent)}}:root{--nav-link:var(--fill-gray-700);--nav-link-active:var(--primary-action);--icon-muted:var(--fill-gray-700);--on-primary-action:var(--fill-white-1000);--elevation-popover:0px 20px 25px -5px #0000001a, 0px 8px 10px -6px #0000001a;--elevation-card:0px 0px 2px 0px #66666629, 0px 4px 8px 0px #6666661f;--surface-clear-hover:var(--fill-gray-200);--surface-chip-disabled:var(--fill-zinc-50);--switch-background:var(--fill-slate-300);--font-weight-medium:500;--font-weight-normal:400;--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--radius:4px;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:#101828;--sidebar-primary:#030213;--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(14.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(14.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(98.5% 0 0);--primary-foreground:oklch(20.5% 0 0);--primary-action:#3b8ef5;--primary-action-hover:#5ba3f7;--primary-action-active:#2178e4;--primary-action-light:#3b8ef51a;--primary-action-muted:#3b8ef526;--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(39.6% .141 25.723);--destructive-foreground:oklch(63.7% .237 25.331);--border:oklch(26.9% 0 0);--border-disabled:oklch(20% 0 0);--input:oklch(26.9% 0 0);--input-background:oklch(22% 0 0);--disabled:oklch(50% 0 0);--disabled-bg:oklch(22% 0 0);--hover-bg:oklch(24% 0 0);--subtle-text:oklch(65% 0 0);--caret-color:#5ba3f7;--selected-bg:#3b8ef51f;--selected-light-bg:#3b8ef514;--ring:oklch(43.9% 0 0);--font-weight-medium:500;--font-weight-normal:400;--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(26.9% 0 0);--sidebar-ring:oklch(43.9% 0 0)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}
4
4
  }
package/llms.txt CHANGED
@@ -1,6 +1,8 @@
1
1
  # @sarunyu/system-one
2
2
 
3
- React UI component library for AI-powered generation tools (v0, Lovable, Figma Make). Provides production-ready interactive components — you design the layouts freely, the library handles the UI primitives. Tailwind CSS v4 + CSS custom properties.
3
+ React UI component library for AI generation tools (Figma Make, v0, Lovable). You compose layouts; the library supplies styled primitives. Tailwind CSS v4 + CSS custom properties.
4
+
5
+ ---
4
6
 
5
7
  ## Install
6
8
 
@@ -8,32 +10,30 @@ React UI component library for AI-powered generation tools (v0, Lovable, Figma M
8
10
  npm install @sarunyu/system-one
9
11
  ```
10
12
 
11
- ## Setup by Platform
12
-
13
- ### v0 / Next.js (App Router)
14
-
15
- ```tsx
16
- // app/layout.tsx
17
- import "@sarunyu/system-one/styles.css"
18
- ```
13
+ ## Setup — REQUIRED FIRST STEP
19
14
 
20
- Components are pre-annotated with `"use client"`. Safe to import anywhere — Server Components, Client Components, pages.
15
+ **You MUST import the stylesheet once at the app root. Without this, components render unstyled and layout will break.**
21
16
 
22
- ### Next.js (Pages Router)
17
+ Pick the entry file that already exists in the project. In order of preference:
23
18
 
24
19
  ```tsx
25
- // pages/_app.tsx
20
+ // Figma Make / Vite / CRA — top of /App.tsx (or /src/App.tsx)
26
21
  import "@sarunyu/system-one/styles.css"
27
- ```
28
22
 
29
- ### Figma Make / Lovable / Vite
23
+ // Next.js App Router — top of /app/layout.tsx
24
+ import "@sarunyu/system-one/styles.css"
30
25
 
31
- ```tsx
32
- // src/main.tsx
26
+ // Next.js Pages Router — top of /pages/_app.tsx
33
27
  import "@sarunyu/system-one/styles.css"
34
28
  ```
35
29
 
36
- ## Import
30
+ Rules:
31
+ - Import the stylesheet **exactly once**, as the first import in the entry file.
32
+ - Do **not** re-import it inside individual components.
33
+ - Do **not** add a Tailwind config — the library ships pre-built CSS.
34
+ - If Figma Make complains about a missing import path, place the line at the very top of `App.tsx`.
35
+
36
+ ## Import components
37
37
 
38
38
  ```tsx
39
39
  import {
@@ -49,6 +49,129 @@ import {
49
49
 
50
50
  ---
51
51
 
52
+ ## Layout Anchors — read before composing any page
53
+
54
+ The library is unopinionated about page chrome, but AI tools produce ugly layouts without anchors. Use these defaults unless the user explicitly asks for something else:
55
+
56
+ ### Container
57
+
58
+ - Page wrapper: `max-w-[1200px] mx-auto px-6` (desktop). On mobile (`<640px`) reduce to `px-4`.
59
+ - Form wrapper: `max-w-[480px] mx-auto`.
60
+ - Centered auth/onboarding card: `max-w-[400px] mx-auto`.
61
+ - Never let content stretch edge-to-edge on desktop.
62
+
63
+ ### Vertical rhythm
64
+
65
+ - Page top padding: `py-10` to `py-16`.
66
+ - Between major sections: `space-y-12` or `mt-12`.
67
+ - Between related blocks inside a section: `space-y-6`.
68
+ - Between form fields: `space-y-4` (tight) or `space-y-5` (comfortable).
69
+ - Card grid gap: `gap-6`.
70
+
71
+ ### Typography scale (library does NOT preset h1–h6 — set them yourself)
72
+
73
+ Use Tailwind utilities with these target sizes. Pair with `--foreground` for body, `--muted-foreground` for secondary text.
74
+
75
+ - Page title (h1): `text-3xl md:text-4xl font-semibold tracking-tight`
76
+ - Section title (h2): `text-2xl font-semibold`
77
+ - Subsection (h3): `text-lg font-semibold`
78
+ - Body: `text-base` (default) — never smaller than `text-sm` for reading content
79
+ - Caption / meta: `text-sm text-[var(--muted-foreground)]`
80
+
81
+ ### Color rules (prevent theme drift)
82
+
83
+ Use design tokens for anything brand/semantic. **Never** use Tailwind's literal color utilities (`bg-blue-500`, `text-orange-400`, `border-gray-200`) for these roles.
84
+
85
+ - Brand / CTA → `var(--primary-action)` (hover `--primary-action-hover`, active `--primary-action-active`)
86
+ - Body text → `var(--foreground)` · muted → `var(--muted-foreground)`
87
+ - Page surface → `var(--background)` · card surface → `var(--card)` · subtle → `var(--muted)`
88
+ - Success → `var(--success)` · error/danger → `var(--destructive)` · warning → `var(--accent-orange)`
89
+ - Border → `var(--border)` · subtle divider → `var(--divider)`
90
+
91
+ Usage: `className="bg-[var(--card)] text-[var(--foreground)] border-[var(--border)]"` or `style={{ color: "var(--primary-action)" }}`.
92
+
93
+ ### Radius
94
+
95
+ - Inputs, buttons, small elements: `rounded-md` (6px)
96
+ - Cards, panels: `rounded-xl` (12px) or `rounded-2xl` (16px)
97
+ - Pills / avatars: `rounded-full`
98
+
99
+ ---
100
+
101
+ ## Starter Page Template — copy, then adapt
102
+
103
+ This scaffold produces a well-proportioned page every time. Replace contents but keep the container/spacing shape.
104
+
105
+ ```tsx
106
+ import { Button, Input, Tag, TabGroup } from "@sarunyu/system-one"
107
+
108
+ export default function Page() {
109
+ return (
110
+ <main className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
111
+ {/* Top bar — optional */}
112
+ <header className="border-b border-[var(--border)]">
113
+ <div className="max-w-[1200px] mx-auto px-6 h-16 flex items-center justify-between">
114
+ <span className="text-lg font-semibold">Brand</span>
115
+ <Button variant="primary" size="md">Sign in</Button>
116
+ </div>
117
+ </header>
118
+
119
+ {/* Page body */}
120
+ <div className="max-w-[1200px] mx-auto px-6 py-12 space-y-12">
121
+ {/* Page header */}
122
+ <section className="space-y-3">
123
+ <h1 className="text-3xl md:text-4xl font-semibold tracking-tight">
124
+ Page title
125
+ </h1>
126
+ <p className="text-base text-[var(--muted-foreground)] max-w-[640px]">
127
+ One-line supporting description that sets context for the page.
128
+ </p>
129
+ </section>
130
+
131
+ {/* Filters */}
132
+ <section className="flex flex-wrap items-center gap-3">
133
+ <TabGroup
134
+ items={[{ id: "all", title: "All" }, { id: "mine", title: "Mine" }]}
135
+ activeId="all"
136
+ onChange={() => {}}
137
+ size="md"
138
+ />
139
+ </section>
140
+
141
+ {/* Card grid */}
142
+ <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
143
+ {/* use <Card /> here */}
144
+ </section>
145
+ </div>
146
+ </main>
147
+ )
148
+ }
149
+ ```
150
+
151
+ Form page variant: swap the grid for `<div className="max-w-[480px] mx-auto space-y-5">` and stack `<Input />` fields followed by a single full-width primary `<Button />`.
152
+
153
+ ---
154
+
155
+ ## The One Rule: use library components, never recreate them
156
+
157
+ If a UI element matches a component in the list below → import it. Do not rebuild it with raw HTML + Tailwind. Do not add classes that restyle its internal look (colors, border, padding, radius, focus ring). The component already owns those.
158
+
159
+ ```tsx
160
+ // ✅ CORRECT
161
+ <Input placeholder="Email" value={email} onChange={setEmail} />
162
+ <Button variant="primary" size="md">Sign in</Button>
163
+ <Tag text="Active" variant="green" />
164
+
165
+ // ❌ WRONG — never build your own
166
+ <input className="border rounded-xl px-4 py-3 w-full" placeholder="Email" />
167
+ <button className="bg-blue-600 text-white px-6 py-2 rounded-lg">Sign in</button>
168
+ <span className="text-green-500 bg-green-500/10 px-2 py-1 rounded">Active</span>
169
+ ```
170
+
171
+ **If the element is NOT in the list → build it yourself** with Tailwind and tokens. The library does NOT provide: modal/dialog, sidebar, table, accordion, tooltip, progress bar, avatar, breadcrumb, slider, toggle/switch, file upload, chart, carousel, skeleton, pagination, toast/banner, stepper, menu. Build these with plain HTML + Tailwind + the design tokens above.
172
+
173
+ ---
174
+
52
175
  ## Components
53
176
 
54
177
  ### Button
@@ -62,17 +185,19 @@ Icon-only sizes: `icon-xs` | `icon-sm` | `icon-md` | `icon-lg` | `icon-xl`
62
185
  <Button variant="outline" size="md" onClick={fn}>Cancel</Button>
63
186
  <Button variant="plain" size="sm">Learn more</Button>
64
187
  <Button variant="primary" size="md" leftIcon={<Icon />}>Add item</Button>
65
- <Button variant="outline" size="md" rightIcon={<Icon />}>Continue</Button>
66
188
  <Button size="icon-md" aria-label="Settings"><GearIcon /></Button>
67
189
  ```
68
190
 
69
191
  Props: `variant`, `size`, `leftIcon`, `rightIcon`, `disabled`, `onClick`, `className`, `children`
70
192
 
71
- ---
193
+ Rules:
194
+ - One `primary` per context. Supporting actions use `outline` or `plain`.
195
+ - For mobile full-width CTAs use `className="w-full"`. Default hug width fits short labels.
196
+ - Do not add classes that change background, border, padding, or radius.
72
197
 
73
198
  ### Input
74
199
 
75
- Floating-label text input with validation states.
200
+ Floating-label text input.
76
201
 
77
202
  ```tsx
78
203
  <Input placeholder="Email" value={email} onChange={setEmail} />
@@ -85,7 +210,10 @@ Floating-label text input with validation states.
85
210
 
86
211
  Props: `placeholder`, `value`, `onChange`, `type`, `unit`, `showCount`, `maxCount`, `forceState` (`"default"` | `"focus"` | `"error"` | `"disabled"`), `errorMessage`, `required`, `className`
87
212
 
88
- ---
213
+ Rules:
214
+ - Keep `placeholder` short — long text breaks the floating label.
215
+ - Never show helper text and `errorMessage` at the same time.
216
+ - Do not override border or background — use `forceState` instead.
89
217
 
90
218
  ### TextArea
91
219
 
@@ -99,12 +227,8 @@ Multi-line input. API mirrors Input.
99
227
 
100
228
  Props: `placeholder`, `value`, `onChange`, `showCount`, `maxCount`, `forceState`, `errorMessage`, `required`, `className`
101
229
 
102
- ---
103
-
104
230
  ### SearchInput
105
231
 
106
- Search field with icon and clear button.
107
-
108
232
  ```tsx
109
233
  <SearchInput placeholder="Search events..." value={q} onChange={setQ} />
110
234
  <SearchInput size="sm" placeholder="Filter by name..." />
@@ -112,11 +236,7 @@ Search field with icon and clear button.
112
236
 
113
237
  Props: `placeholder`, `value`, `onChange`, `size` (`"lg"` | `"sm"`), `className`
114
238
 
115
- ---
116
-
117
- ### Dropdown
118
-
119
- Single-select dropdown.
239
+ ### Dropdown / DropdownMultiple
120
240
 
121
241
  ```tsx
122
242
  <Dropdown
@@ -129,17 +249,7 @@ Single-select dropdown.
129
249
  value={selected}
130
250
  onChange={setSelected}
131
251
  />
132
- ```
133
-
134
- Props: `placeholder`, `options` (`Array<{ label: string, value: string, disabled?: boolean }>`), `value`, `onChange`, `disabled`, `className`
135
-
136
- ---
137
-
138
- ### DropdownMultiple
139
-
140
- Multi-select dropdown with checkboxes.
141
252
 
142
- ```tsx
143
253
  <DropdownMultiple
144
254
  placeholder="Select tags"
145
255
  options={options}
@@ -148,18 +258,32 @@ Multi-select dropdown with checkboxes.
148
258
  />
149
259
  ```
150
260
 
151
- Props: `placeholder`, `options`, `values`, `onChange`, `disabled`, `className`
261
+ Props (single): `placeholder`, `options`, `value`, `onChange`, `disabled`, `className`
262
+ Props (multi): `placeholder`, `options`, `values`, `onChange`, `disabled`, `className`
152
263
 
153
- ---
264
+ Use `Dropdown` for single-select, `DropdownMultiple` for multi-select.
265
+
266
+ ### OptionList
267
+
268
+ Scrollable option list for custom popups.
269
+
270
+ ```tsx
271
+ <OptionList
272
+ options={[{ label: "Item A", value: "a" }, { label: "Item B", value: "b" }]}
273
+ selectedValue={value}
274
+ onSelect={setValue}
275
+ />
276
+
277
+ <OptionList options={options} selectedValues={values} onToggle={toggleValue} />
278
+ ```
154
279
 
155
280
  ### Tag
156
281
 
157
- Compact colored label. Use for categories, statuses, filters.
282
+ Compact colored label for categories/filters.
158
283
 
159
284
  Variants: `blue` | `green` | `yellow` | `red` | `gray` | `lime`
160
285
  Sizes: `large` (default) | `small`
161
-
162
- Color semantics: `green` → positive/active, `red` → error/danger, `yellow` → warning/pending, `blue` → informational, `gray` → neutral/inactive
286
+ Semantics: `green` = positive, `red` = error, `yellow` = warning/pending, `blue` = informational, `gray` = neutral
163
287
 
164
288
  ```tsx
165
289
  <Tag text="Active" variant="green" />
@@ -170,11 +294,11 @@ Color semantics: `green` → positive/active, `red` → error/danger, `yellow`
170
294
 
171
295
  Props: `text`, `variant`, `size`, `close`, `onClose`, `className`
172
296
 
173
- ---
297
+ Rules: all tags in the same group use the same size. Do not override padding/radius.
174
298
 
175
299
  ### StatusTag
176
300
 
177
- Process-flow state indicator with colored dot.
301
+ Workflow state indicator with a colored dot.
178
302
 
179
303
  Types: `stop` | `success` | `hold` | `processing` | `error`
180
304
 
@@ -182,41 +306,36 @@ Types: `stop` | `success` | `hold` | `processing` | `error`
182
306
  <StatusTag type="success" />
183
307
  <StatusTag type="processing" text="In progress" />
184
308
  <StatusTag type="hold" />
185
- <StatusTag type="error" />
186
309
  ```
187
310
 
188
311
  Props: `type`, `text`, `className`
189
312
 
190
- Use `StatusTag` for workflow states. Use `Tag` for categorical labels.
191
-
192
- ---
313
+ Use `StatusTag` for process state; use `Tag` for categorical labels.
193
314
 
194
315
  ### Chip
195
316
 
196
- Toggleable filter/selection chip. Always use in groups of 2+.
317
+ Toggleable filter chip. Always use in groups of 2+.
197
318
 
198
319
  Types: `single` (default) | `multiple`
199
320
  Sizes: `large` | `medium` | `small`
200
321
 
201
322
  ```tsx
202
- {/* Single-select group */}
203
- <div className="flex gap-2">
204
- <Chip label="All" selected={filter === "all"} onClick={() => setFilter("all")} />
205
- <Chip label="Active" selected={filter === "active"} onClick={() => setFilter("active")} />
206
- <Chip label="Archived" selected={filter === "archived"} onClick={() => setFilter("archived")} />
323
+ <div className="flex flex-wrap gap-2">
324
+ <Chip label="All" selected={f === "all"} onClick={() => setF("all")} />
325
+ <Chip label="Active" selected={f === "active"} onClick={() => setF("active")} />
326
+ <Chip label="Archived" selected={f === "archived"} onClick={() => setF("archived")} />
207
327
  </div>
208
328
 
209
- {/* Multi-select */}
210
329
  <Chip label="Design" type="multiple" selected={tags.includes("design")} onClick={() => toggle("design")} />
211
330
  ```
212
331
 
213
332
  Props: `label`, `selected`, `onClick`, `type`, `size`, `disabled`, `className`
214
333
 
215
- ---
334
+ Rules: one size per group. For a single on/off control use a toggle, not a chip.
216
335
 
217
336
  ### TabGroup
218
337
 
219
- Tabbed navigation. Always use `TabGroup`, not bare `Tab`.
338
+ Tabbed navigation. Always use `TabGroup`; never render `Tab` directly.
220
339
 
221
340
  Sizes: `lg` | `md` (default) | `sm`
222
341
 
@@ -234,15 +353,13 @@ Sizes: `lg` | `md` (default) | `sm`
234
353
  />
235
354
  ```
236
355
 
237
- Props: `items` (`Array<{ id: string, title: string, icon?: boolean, notification?: number, disabled?: boolean }>`), `activeId`, `onChange`, `size`, `className`
238
-
239
- ---
356
+ Props: `items` (`{ id, title, icon?, notification?, disabled? }[]`), `activeId`, `onChange`, `size`, `className`
240
357
 
241
358
  ### Card
242
359
 
243
- Responsive event/content card.
360
+ Event/content card with image + metadata.
244
361
 
245
- Variants: `desktop` (308px wide) | `tablet` (224px wide) | `mobile` (163px wide)
362
+ Variants: `desktop` (308px) | `tablet` (224px) | `mobile` (163px)
246
363
  tagStatus: `not-registered` | `registered` | `full`
247
364
 
248
365
  ```tsx
@@ -260,9 +377,7 @@ tagStatus: `not-registered` | `registered` | `full`
260
377
 
261
378
  Props: `variant`, `title`, `date`, `time`, `location`, `count`, `tagStatus`, `image`, `className`
262
379
 
263
- Match variant to viewport: `desktop` on wide layouts, `tablet` / `mobile` on narrow.
264
-
265
- ---
380
+ Match the variant to the viewport — `desktop` in wide grids, `tablet`/`mobile` in narrow layouts.
266
381
 
267
382
  ### DateInput
268
383
 
@@ -279,90 +394,46 @@ Variants: `popover` (default) | `modal`
279
394
 
280
395
  Props: `placeholder`, `mode`, `value`, `onChange`, `variant`, `disabled`, `className`
281
396
 
282
- ---
397
+ Format is `DD MMM YYYY` — do not override.
283
398
 
284
399
  ### TimeInput
285
400
 
286
401
  24-hour time picker.
287
402
 
288
- Modes: `single` | `range`
289
-
290
403
  ```tsx
291
404
  <TimeInput placeholder="Start time" value={time} onChange={setTime} />
292
405
  <TimeInput mode="range" value={timeRange} onChange={setTimeRange} />
293
406
  ```
294
407
 
295
- Props: `placeholder`, `mode`, `value`, `onChange`, `disabled`, `className`
408
+ Props: `placeholder`, `mode` (`single` | `range`), `value`, `onChange`, `disabled`, `className`
296
409
 
297
410
  ---
298
411
 
299
- ### OptionList
300
-
301
- Scrollable option list for custom dropdowns.
302
-
303
- ```tsx
304
- {/* Single-select */}
305
- <OptionList
306
- options={[{ label: "Item A", value: "a" }, { label: "Item B", value: "b" }]}
307
- selectedValue={value}
308
- onSelect={setValue}
309
- />
310
-
311
- {/* Multi-select */}
312
- <OptionList
313
- options={options}
314
- selectedValues={values}
315
- onToggle={toggleValue}
316
- />
317
- ```
318
-
319
- Props: `options` (`Array<{ label: string, value: string, disabled?: boolean }>`), `selectedValue`, `onSelect`, `selectedValues`, `onToggle`, `className`
320
-
321
- ---
322
-
323
- ## Design Tokens
412
+ ## Theming
324
413
 
325
414
  All tokens are CSS custom properties. Override after the stylesheet import:
326
415
 
327
416
  ```css
328
417
  :root {
329
- --primary-action: #7c3aed; /* brand color */
418
+ --primary-action: #7c3aed; /* brand color */
330
419
  --primary-action-hover: #6d28d9;
331
420
  --primary-action-active: #5b21b6;
332
- --font-sans: "Inter", sans-serif; /* override library default (Noto Sans Thai) */
333
- --radius: 8px; /* border radius base */
421
+ --font-sans: "Inter", sans-serif; /* default: Noto Sans Thai */
422
+ --radius: 8px;
334
423
  }
335
424
  ```
336
425
 
337
- Key tokens:
338
- - `--primary-action` — brand color (primary buttons, links, active states)
339
- - `--background` / `--foreground` — page surface and text
340
- - `--border` — default border color
341
- - `--muted-foreground` — placeholder and secondary text
342
- - `--destructive` — error/danger red
343
- - `--success` — success green
344
- - `--font-sans` — font family (default: Noto Sans Thai)
345
- - `--radius` — base border radius (default: 4px)
346
-
347
- ---
426
+ Key tokens: `--primary-action`, `--background`, `--foreground`, `--card`, `--muted`, `--muted-foreground`, `--border`, `--divider`, `--destructive`, `--success`, `--accent-orange`, `--font-sans`, `--radius`.
348
427
 
349
- ## Dark Mode
428
+ ### Dark mode
350
429
 
351
- Add `.dark` to `<html>` or any ancestor:
430
+ Add `.dark` to `<html>` (or any ancestor). All components adapt automatically.
352
431
 
353
432
  ```tsx
354
- // Next.js
355
- <html className={isDark ? "dark" : ""}>
356
-
357
- // Vite
358
433
  document.documentElement.classList.toggle("dark", isDark)
359
434
  ```
360
435
 
361
- All components adapt automatically.
362
-
363
- ---
364
-
365
- ## TypeScript
436
+ ### TypeScript
366
437
 
367
438
  ```ts
368
439
  import type { ButtonVariant, ButtonSize, TagVariant, ChipSize } from "@sarunyu/system-one"
@@ -370,194 +441,14 @@ import type { ButtonVariant, ButtonSize, TagVariant, ChipSize } from "@sarunyu/s
370
441
 
371
442
  ---
372
443
 
373
- ## Design Guidance
374
-
375
- **You own the layout. The library only provides UI components.** Design page structure, layout, and composition entirely on your own — use your best aesthetic judgment to create beautiful, polished pages. The library has no opinions about layout. It only asks that you use its components (listed below) when the UI element matches one the library provides.
376
-
377
- ### CRITICAL — do NOT recreate library components
378
-
379
- The library's components have their own built-in styles (colors, borders, backgrounds, padding, radius, focus states, hover states). You MUST import and use them as-is. **Never** build your own version of a component that exists in the library. Never add Tailwind classes to override their internal appearance.
380
-
381
- Common mistakes to avoid:
382
-
383
- ```tsx
384
- // ✅ CORRECT — use the library's <Input> component (has floating label, built-in border, focus ring, error state)
385
- import { Input } from "@sarunyu/system-one"
386
- <Input placeholder="Email" value={email} onChange={setEmail} />
387
- <Input placeholder="Password" type="password" value={pw} onChange={setPw} />
388
-
389
- // ❌ WRONG — never build your own input with raw HTML + Tailwind
390
- <input className="border rounded-xl px-4 py-3 w-full" placeholder="Email" />
391
- <input className="border rounded-xl px-4 py-3 w-full" type="password" placeholder="Password" />
392
- ```
393
-
394
- ```tsx
395
- // ✅ CORRECT — use the library's <Tag> component (has built-in colors, padding, border-radius)
396
- import { Tag } from "@sarunyu/system-one"
397
- <Tag text="Popular" variant="green" />
398
- <Tag text="Best Value" variant="blue" />
399
- <Tag text="Error" variant="red" size="small" />
400
-
401
- // ❌ WRONG — never style your own span/div to look like a tag
402
- <span className="text-green-500 bg-green-500/10 px-2 py-1 rounded">Popular</span>
403
- <span className="text-blue-500 border border-blue-500 px-2 py-1 rounded">Best Value</span>
404
- ```
405
-
406
- ```tsx
407
- // ✅ CORRECT — use the library's <Button> component
408
- import { Button } from "@sarunyu/system-one"
409
- <Button variant="primary" size="md">Sign In</Button>
410
- <Button variant="outline" size="md">Cancel</Button>
411
-
412
- // ❌ WRONG — never create buttons with raw HTML + Tailwind
413
- <button className="bg-blue-600 text-white px-6 py-2 rounded-lg">Sign In</button>
414
- ```
415
-
416
- This rule applies to ALL components listed in this document. The components handle their own styling — you only pass props.
417
-
418
- ### Layout — full creative freedom
419
-
420
- Design the layout yourself. Use any technique that produces the best result:
421
-
422
- - Flex, grid, CSS columns, absolute positioning, sticky headers, split panes, sidebars, hero sections, masonry grids, full-bleed backgrounds, overlapping elements — anything goes.
423
- - Choose spacing, padding, max-widths, breakpoints, and visual hierarchy based on what looks best for the specific page. There is no prescribed spacing rhythm or container width.
424
- - Prioritize aesthetics: generous whitespace, clear visual hierarchy, balanced proportions, elegant transitions and micro-interactions.
425
- - Do **not** use the library's layout helper components (`Page`, `PageHeader`, `Section`, `Toolbar`, `CardGrid`, `Stack`). They exist for internal use only. Build your own layouts — they will look better.
426
-
427
- ### Component usage — use ours when we have it, build your own when we don't
428
-
429
- The library provides a specific set of UI components. The rule is simple:
430
-
431
- **If the UI element matches a component below → import it from `@sarunyu/system-one` and use it.** Do not recreate it with raw HTML or Tailwind. Do not add Tailwind classes to restyle it. The component already has all the styling it needs.
432
-
433
- - Buttons → `<Button>` — has built-in variant colors, hover/press states, sizes, icon slots
434
- - Text inputs → `<Input>` — has built-in floating label, border, focus ring, error state
435
- - Textareas → `<TextArea>` — has built-in floating label, border, focus ring, error state
436
- - Search fields → `<SearchInput>` — has built-in search icon, clear button
437
- - Single select → `<Dropdown>` — has built-in dropdown panel, selection state
438
- - Multi select → `<DropdownMultiple>` — has built-in checkboxes, multi-selection
439
- - Option list → `<OptionList>` — has built-in selection highlighting
440
- - Date picker → `<DateInput>` — has built-in calendar popup
441
- - Time picker → `<TimeInput>` — has built-in time selection
442
- - Labels / badges → `<Tag>` — has built-in color variants (blue, green, yellow, red, gray, lime)
443
- - Status indicators → `<StatusTag>` — has built-in colored dot and status colors
444
- - Filter chips → `<Chip>` — has built-in toggle state, active styling
445
- - Tab navigation → `<TabGroup>` — has built-in active tab indicator, sizing
446
- - Event/content cards → `<Card>` — has built-in image, metadata layout
447
-
448
- **If the UI element does NOT match any component above → build it yourself.** Use Tailwind, custom components, or any other approach. Examples of things the library does NOT provide (build these yourself): modals/dialogs, sidebars/navigation, tables, accordions, tooltips, progress bars, avatars, breadcrumbs, sliders, toggles/switches, file uploads, charts, carousels, skeletons/loaders, pagination, alert/notification banners, steppers, menus, etc.
449
-
450
- Pick the correct variant / prop for the semantic role (e.g. `StatusTag type="success"` for success, `Button variant="primary"` once per context). See "Design Rules" below for per-component constraints.
451
-
452
- ### Visual anchors from the library
453
-
454
- Use these tokens so custom-built elements stay visually coherent with the design system:
455
-
456
- - **Typography** — `<h1>`–`<h4>` are pre-styled. Use them as-is.
457
- - **Text color** — body text: `--foreground`. Secondary: `text-muted-foreground`. Don't hard-code hex colors.
458
- - **Surfaces** — `bg-background` / `bg-card` / `bg-muted` (dark mode compatible).
459
- - **Brand color** — `--primary-action`, or Tailwind `text-primary-action` / `bg-primary-action`.
460
- - **Radius** — `rounded-md` (6px), `rounded-lg` (8px), `rounded-xl` (12px), `rounded-full`.
461
- - **Border** — `border-border` for default borders.
462
-
463
- ---
464
-
465
- ## Notes
466
-
467
- - No provider or wrapper needed — just import the stylesheet and use components
468
- - The library ships pre-built CSS — no Tailwind config required in the consuming project
469
- - If the project already uses Tailwind and you see font differences, override `--font-sans` in your CSS
470
- - CSS custom properties can be referenced in Tailwind classes: `bg-[var(--primary-action)]`
471
-
472
- ---
473
-
474
- ## Component Usage Guide
475
-
476
- ### Button
477
-
478
- Buttons are interactive elements that allow users to click or tap to perform actions — such as submitting a form, saving data, navigating to another page, or opening a popup.
479
-
480
- Types: `primary` — main CTA, use once per context. `outline` — secondary action, supports primary without affecting main flow. `plain` — no background or border, low-priority actions. `secondary` (outline-black) — same as outline but black, use when blue is not appropriate.
481
-
482
- Sizes: `base` recommended for Desktop. `xl` recommended for Mobile.
483
-
484
- States: Default, Hover, Press, Disabled.
485
-
486
- ### Input
487
-
488
- Floating Label Input is a single-line or multi-line field with a label that floats inside.
489
-
490
- Types: `Input` — single-line, general text/numeric. `TextArea` — multi-line, for comments or addresses. `Dropdown` — predefined list selection, displays as OptionList.
491
-
492
- States: Default, Focus, Error, Disabled.
493
-
494
- ### Tab
495
-
496
- Tabs allow users to switch between different content sections within the same page.
497
-
498
- Types: Default (text only), Icon (with icon), Notification (with badge).
499
-
500
- States: Default, Active (selected), Disabled.
501
-
502
- Sizes: `lg` (default), `md`, `sm`. Always use the same size within one tab group.
503
-
504
- ### Tag
505
-
506
- Tags display categories, types, or short metadata. Status Tags communicate process state.
507
-
508
- Tag types: Default (text only), Icon (with icon), Remove (dismissible).
509
- Tag states: Default, Hover/Press, Disabled.
510
- Tag sizes: Large, Small.
511
-
512
- Status Tag variants: `success` — process completed. `processing` — in progress. `hold` — temporarily paused. `stop` — stopped. `error` — failed.
513
-
514
- ### Chip
515
-
516
- Chips are toggleable filter/selection elements. Always use in groups of 2+.
517
-
518
- Types: `single` — one selection at a time. `multiple` — multiple selections simultaneously.
519
-
520
- States: Default, Active, Disabled (Default), Disabled (Active).
521
-
522
- Sizes: `large`, `medium`, `small`.
523
-
524
- ---
525
-
526
- ## Design Rules
527
-
528
- ### Button Rules
529
-
530
- - Maximum width is 343px (`max-w-[343px]`). Never remove or override. Do not detach the component.
531
- - Do not manually recreate or modify padding (`py-[10px] px-[16px]`) or border-radius (`rounded-[8px]`).
532
- - Use Primary only once per context. Never place two Primary buttons side-by-side. Use Outline/Secondary for supporting actions.
533
- - Hug width is correct for short labels only. For long labels, use Fill width or set explicit max-w-[343px].
534
-
535
- ### Input Rules
536
-
537
- - Never override input border or background colors manually — use built-in state variants (Default, Focus, Error, Disabled).
538
- - Do not recreate input styles manually or adjust gap/height outside the component's tokens.
539
- - Use Dropdown Tags only for multi-select. For single-select, use standard Dropdown.
540
- - Keep labelText short enough to fit on one line. Long labels break the floating label layout.
541
- - Do not show Helper Text and Error Message simultaneously. Error state replaces helper text.
542
- - Use Option List only when there are multiple selectable values.
543
- - Always follow the system date format (DD MMM YYYY). Do not mix Thai month names with C.E. year or reorder day/month/year.
544
-
545
- ### Tab Rules
546
-
547
- - Do not override padding, gap, border-radius, element order, or colors inside the tab bar.
548
- - All tabs in one group must use the same size prop. Never mix sizes.
549
- - Do not add extra gap or margin between tabs — use built-in spacing tokens only.
550
-
551
- ### Tag Rules
552
-
553
- - Do not override height, padding, or layout of Tag or StatusTag.
554
- - All tags in the same context must use the same size.
555
- - Do not reorder internal elements (icon, label, badge) inside Tag or StatusTag.
556
- - Always use the correct StatusTag variant for its semantic meaning. Never override the color.
444
+ ## Checklist before you render
557
445
 
558
- ### Chip Rules
446
+ 1. Stylesheet imported in the app root entry file? (see Setup)
447
+ 2. Every UI element that matches a library component uses that component, not raw HTML + Tailwind?
448
+ 3. Page wrapped in `max-w-[1200px] mx-auto px-6` (or form variant)?
449
+ 4. Section rhythm uses `space-y-12` / `space-y-6` / `space-y-4`?
450
+ 5. h1 / h2 / h3 sized from the typography scale above?
451
+ 6. All brand + semantic colors use `var(--...)` tokens, not `bg-blue-500` etc.?
452
+ 7. Only one `Button variant="primary"` per context?
559
453
 
560
- - Keep chip labels short and single-purpose. Long labels cause overflow.
561
- - Do not override padding, gap, radius, height, element order, or colors.
562
- - All chips in the same group must share the same size and spacing.
563
- - Use Chip only for groups with 2+ options. For single options, use a toggle or checkbox instead.
454
+ If any answer is "no", fix it before shipping.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sarunyu/system-one",
3
- "version": "1.4.0",
3
+ "version": "2.0.1",
4
4
  "type": "module",
5
5
  "description": "A production-ready React design system built for AI-powered web generation tools (Figma Make, Lovable, V0). Tailwind CSS v4 + CSS custom properties for full theming support.",
6
6
  "keywords": [