@epam/ai-dial-ui-kit 0.14.0-dev.5 → 0.14.0-dev.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/CHANGELOG.md +2 -0
- package/dist/{JsonEditor-DrC6i27F.js → JsonEditor-CQmVvyc3.js} +1 -1
- package/dist/{JsonEditor-dP4yDdgN.cjs → JsonEditor-DpV8EJsP.cjs} +1 -1
- package/dist/{MarkdownEditor-BeNDQecT.js → MarkdownEditor-ByqdCRg9.js} +1 -1
- package/dist/{MarkdownEditor-CO-k9xZo.js → MarkdownEditor-CCsi7d4R.js} +1 -1
- package/dist/{MarkdownEditor-fskBDR5e.cjs → MarkdownEditor-CIH1ew3u.cjs} +1 -1
- package/dist/{MarkdownEditor-CSgVi6EZ.cjs → MarkdownEditor-Dk2ErWQK.cjs} +1 -1
- package/dist/components-manifest.json +5 -12
- package/dist/dial-ui-kit.cjs.js +1 -1
- package/dist/dial-ui-kit.es.js +1 -1
- package/dist/{index-jMP1W9V6.js → index-CdkIstBB.js} +2945 -2964
- package/dist/{index-DmEajFx0.cjs → index-DQfKTiXa.cjs} +17 -17
- package/dist/index.css +1 -1
- package/dist/migration-guides/0.14.0/tag-single-size.md +121 -0
- package/dist/migration-guides/README.md +1 -0
- package/dist/src/components/New/Tag/Tag.d.ts +17 -10
- package/dist/src/components/New/Tag/constants.d.ts +23 -0
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
--bg-control-neutral-active,var(--bg-layer-4,#d1dbea)
|
|
4
4
|
)}::-webkit-scrollbar{height:4px;width:4px}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:var(
|
|
5
5
|
--bg-control-neutral-active,var(--bg-layer-4,#d1dbea)
|
|
6
|
-
) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:769px){.container{max-width:769px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-bottom-0\.5{bottom:-.125rem}.-left-0\.5{left:-.125rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.top-0{top:0}.top-1\/2{top:50%}.top-8{top:2rem}.top-\[-2px\]{top:-2px}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[-1\]{z-index:-1}.z-\[52\]{z-index:52}.z-\[53\]{z-index:53}.z-\[55\]{z-index:55}.-m-px{margin:-1px}.m-0{margin:0}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-ml-6{margin-left:-1.5rem}.-mr-2{margin-right:-.5rem}.-mr-px{margin-right:-1px}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-\[2px\]{margin-bottom:2px}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-6{margin-left:1.5rem}.ml-\[26px\]{margin-left:26px}.ml-\[28px\]{margin-left:28px}.ml-\[44px\]{margin-left:44px}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-3{-webkit-line-clamp:3}.line-clamp-4{-webkit-line-clamp:4}.line-clamp-4,.line-clamp-5{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-5{-webkit-line-clamp:5}.line-clamp-6{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.inline-grid{display:inline-grid}.contents{display:contents}.hidden{display:none}.size-0{width:0;height:0}.size-10{width:2.5rem;height:2.5rem}.size-12{width:3rem;height:3rem}.size-2{width:.5rem;height:.5rem}.size-3{width:.75rem;height:.75rem}.size-3\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.size-7{width:1.75rem;height:1.75rem}.size-9{width:2.25rem;height:2.25rem}.size-\[16px\]{width:16px;height:16px}.size-\[18px\]{width:18px;height:18px}.size-\[20px\]{width:20px;height:20px}.size-\[24px\]{width:24px;height:24px}.size-\[28px\]{width:28px;height:28px}.size-\[38px\]{width:38px;height:38px}.size-\[400px\]{width:400px;height:400px}.size-\[40px\]{width:40px;height:40px}.size-\[48px\]{width:48px;height:48px}.size-\[4px\]{width:4px;height:4px}.size-\[8px\]{width:8px;height:8px}.size-auto{width:auto;height:auto}.size-full{width:100%;height:100%}.size-px{width:1px;height:1px}.\!h-10{height:2.5rem!important}.\!h-6{height:1.5rem!important}.\!h-9{height:2.25rem!important}.\!h-\[600px\]{height:600px!important}.\!h-auto{height:auto!important}.h-0{height:0}.h-1{height:.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[100px\]{height:100px}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[180px\]{height:180px}.h-\[18px\]{height:18px}.h-\[20px\]{height:20px}.h-\[22px\]{height:22px}.h-\[232px\]{height:232px}.h-\[24px\]{height:24px}.h-\[250px\]{height:250px}.h-\[26px\]{height:26px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[34px\]{height:34px}.h-\[38px\]{height:38px}.h-\[40px\]{height:40px}.h-\[420px\]{height:420px}.h-\[48px\]{height:48px}.h-\[4px\]{height:4px}.h-\[500px\]{height:500px}.h-\[60px\]{height:60px}.h-\[640px\]{height:640px}.h-\[740px\]{height:740px}.h-\[8px\]{height:8px}.h-auto{height:auto}.h-full{height:100%}.max-h-\[352px\]{max-height:352px}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-2{min-height:.5rem}.min-h-4{min-height:1rem}.min-h-\[120px\]{min-height:120px}.min-h-\[180px\]{min-height:180px}.min-h-\[220px\]{min-height:220px}.min-h-\[248px\]{min-height:248px}.min-h-\[24px\]{min-height:24px}.min-h-\[25px\]{min-height:25px}.min-h-\[38px\]{min-height:38px}.min-h-\[40px\]{min-height:40px}.min-h-\[42px\]{min-height:42px}.min-h-\[44px\]{min-height:44px}.min-h-\[48px\]{min-height:48px}.min-h-screen{min-height:100vh}.\!w-\[280px\]{width:280px!important}.w-0{width:0}.w-0\.5{width:.125rem}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-14{width:3.5rem}.w-2{width:.5rem}.w-2\/5{width:40%}.w-28{width:7rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-\[1000px\]{width:1000px}.w-\[10px\]{width:10px}.w-\[120px\]{width:120px}.w-\[140px\]{width:140px}.w-\[150px\]{width:150px}.w-\[160px\]{width:160px}.w-\[18px\]{width:18px}.w-\[200px\]{width:200px}.w-\[22px\]{width:22px}.w-\[240px\]{width:240px}.w-\[248px\]{width:248px}.w-\[24px\]{width:24px}.w-\[250px\]{width:250px}.w-\[260px\]{width:260px}.w-\[280px\]{width:280px}.w-\[300px\]{width:300px}.w-\[320px\]{width:320px}.w-\[32px\]{width:32px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[400px\]{width:400px}.w-\[40px\]{width:40px}.w-\[420px\]{width:420px}.w-\[422px\]{width:422px}.w-\[44px\]{width:44px}.w-\[450px\]{width:450px}.w-\[480px\]{width:480px}.w-\[4px\]{width:4px}.w-\[500px\]{width:500px}.w-\[520px\]{width:520px}.w-\[560px\]{width:560px}.w-\[600px\]{width:600px}.w-\[64px\]{width:64px}.w-\[720px\]{width:720px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-8{min-width:2rem}.min-w-\[100px\]{min-width:100px}.min-w-\[160px\]{min-width:160px}.min-w-\[180px\]{min-width:180px}.min-w-\[200px\]{min-width:200px}.min-w-\[24px\]{min-width:24px}.min-w-\[260px\]{min-width:260px}.min-w-\[280px\]{min-width:280px}.min-w-\[320px\]{min-width:320px}.min-w-\[400px\]{min-width:400px}.min-w-\[420px\]{min-width:420px}.min-w-\[44px\]{min-width:44px}.min-w-\[480px\]{min-width:480px}.min-w-\[520px\]{min-width:520px}.min-w-\[5ch\]{min-width:5ch}.min-w-\[600px\]{min-width:600px}.min-w-\[640px\]{min-width:640px}.min-w-\[760px\]{min-width:760px}.min-w-\[800px\]{min-width:800px}.\!max-w-\[500px\]{max-width:500px!important}.\!max-w-\[var\(--reference-width\)\]{max-width:var(--reference-width)!important}.max-w-80{max-width:20rem}.max-w-\[1200px\]{max-width:1200px}.max-w-\[160px\]{max-width:160px}.max-w-\[180px\]{max-width:180px}.max-w-\[200px\]{max-width:200px}.max-w-\[220px\]{max-width:220px}.max-w-\[280px\]{max-width:280px}.max-w-\[30\%\]{max-width:30%}.max-w-\[300px\]{max-width:300px}.max-w-\[376px\]{max-width:376px}.max-w-\[428px\]{max-width:428px}.max-w-\[51\%\]{max-width:51%}.max-w-\[600px\]{max-width:600px}.max-w-\[80px\]{max-width:80px}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-0{flex-basis:0px}.basis-auto{flex-basis:auto}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.\!cursor-default{cursor:default!important}.\!cursor-not-allowed{cursor:not-allowed!important}.cursor-col-resize{cursor:col-resize}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-\[220px_1fr\]{grid-template-columns:220px 1fr}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.grid-cols-\[auto_1fr_1fr\]{grid-template-columns:auto 1fr 1fr}.grid-cols-\[auto_1fr_1fr_1fr\]{grid-template-columns:auto 1fr 1fr 1fr}.grid-cols-\[auto_minmax\(0\2c 1fr\)\]{grid-template-columns:auto minmax(0,1fr)}.grid-cols-\[minmax\(280px\2c 1fr\)_minmax\(220px\2c 1fr\)_minmax\(220px\2c 1fr\)\]{grid-template-columns:minmax(280px,1fr) minmax(220px,1fr) minmax(220px,1fr)}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[2px\]{gap:2px}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.gap-y-6{row-gap:1.5rem}.gap-y-8{row-gap:2rem}.gap-y-\[80px\]{row-gap:80px}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#e0e6f0)}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.\!truncate{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\!whitespace-normal{white-space:normal!important}.whitespace-normal{white-space:normal}.\!whitespace-nowrap{white-space:nowrap!important}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.\!rounded{border-radius:4px!important}.\!rounded-\[2px\]{border-radius:2px!important}.rounded{border-radius:4px}.rounded-\[10px\]{border-radius:10px}.rounded-\[120px\]{border-radius:120px}.rounded-\[20px\]{border-radius:20px}.rounded-\[4px\]{border-radius:4px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.\!rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.rounded-l{border-top-left-radius:4px;border-bottom-left-radius:4px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r{border-top-right-radius:4px;border-bottom-right-radius:4px}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-t{border-top-left-radius:4px;border-top-right-radius:4px}.\!border{border-width:1px!important}.\!border-0{border-width:0!important}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-0{border-left-width:0}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-r{border-right-width:1px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.\!border-solid{border-style:solid!important}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.\!border-none{border-style:none!important}.border-none{border-style:none}.\!border-error{border-color:var(--stroke-error,#ae2f2f)!important}.\!border-primary{border-color:var(--stroke-primary,#57647a)!important}.\!border-transparent{border-color:transparent!important}.border-\[\#F4CE46\]{--tw-border-opacity:1;border-color:rgb(244 206 70/var(--tw-border-opacity,1))}.border-accent{border-color:var(--stroke-accent,#1d4ed8)}.border-accent-alpha{border-color:var(--stroke-accent-alpha,#2764d933)}.border-accent-primary{border-color:var(--stroke-accent-primary,#124ace)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#007274)}.border-control-disable-primary{border-color:var(--stroke-control-disable-primary,var(--text-control-disable-primary,var(--text-control-disable-alpha,#848e9c)))}.border-default{border-color:var(--stroke-default,#b2c2dd)}.border-error{border-color:var(--stroke-error,#ae2f2f)}.border-hover{border-color:var(--stroke-hover,#eef1f7)}.border-info{border-color:var(--stroke-info,#1d4ed8)}.border-primary{border-color:var(--stroke-primary,#57647a)}.border-red-900{border-color:var(--red-900,#402027)}.border-secondary{border-color:var(--stroke-secondary,#d1dbea)}.border-success{border-color:var(--stroke-success,#007274)}.border-tertiary{border-color:var(--stroke-tertiary,#e0e6f0)}.border-transparent{border-color:transparent}.border-warning{border-color:var(--stroke-warning,#eec840)}.border-b-accent-primary{border-bottom-color:var(--stroke-accent-primary,#124ace)}.border-l-accent-primary{border-left-color:var(--stroke-accent-primary,#124ace)}.border-l-transparent{border-left-color:transparent}.border-t-info{border-top-color:var(--stroke-info,#1d4ed8)}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.\!bg-layer-2{background-color:var(--bg-layer-2,#eef1f7)!important}.\!bg-layer-4{background-color:var(--bg-layer-4,#d1dbea)!important}.\!bg-success{background-color:var(--bg-success,#d9f0f1)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-accent-secondary-alpha{background-color:var(--bg-accent-secondary-alpha,#37babc2e)}.bg-accent-tertiary-alpha{background-color:var(--bg-accent-tertiary-alpha,#a972ff2e)}.bg-backdrop{background-color:var(--bg-backdrop,#161b2d4d)}.bg-blackout{background-color:var(--bg-blackout,#0c101d4d)}.bg-control-accent{background-color:var(--bg-control-accent,#1d4ed8)}.bg-control-accent-alpha{background-color:var(--bg-control-accent-alpha,#2764d90f)}.bg-control-accent-alpha-hover{background-color:var(--bg-control-accent-alpha-hover,#2764d924)}.bg-control-disable-primary{background-color:var(--bg-control-disable-primary,var(--bg-control-disable,#dce0e8))}.bg-control-disable-secondary{background-color:var(--bg-control-disable-secondary,#acb3c3)}.bg-control-error{background-color:var(--bg-control-error,#ae2f2f)}.bg-control-inverted{background-color:var(--bg-control-inverted,#57647a)}.bg-control-neutral{background-color:var(--bg-control-neutral,#fcfcfc)}.bg-control-neutral-active{background-color:var(--bg-control-neutral-active,#d1dbea)}.bg-control-neutral-default{background-color:var(--bg-control-neutral-default,#acb3c3)}.bg-controls-accent-primary{background-color:var(--controls-bg-accent-primary,#124ace)}.bg-controls-accent-primary-alpha-active{background-color:var(--controls-bg-accent-primary-alpha-active,#7da4ff5c)}.bg-controls-disable{background-color:var(--controls-bg-disable,#d1dbea)}.bg-controls-disable-accent{background-color:var(--controls-bg-disable-accent,#7c8293)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-controls-error{background-color:var(--controls-bg-error,#ae2f2f)}.bg-error{background-color:var(--bg-error,#f3d6d8)}.bg-info{background-color:var(--bg-info,#d6e2f9)}.bg-layer-0{background-color:var(--bg-layer-0,#fcfcfc)}.bg-layer-1{background-color:var(--bg-layer-1,#e0e6f0)}.bg-layer-2{background-color:var(--bg-layer-2,#eef1f7)}.bg-layer-3{background-color:var(--bg-layer-3,#fcfcfc)}.bg-layer-4{background-color:var(--bg-layer-4,#d1dbea)}.bg-layer-base{background-color:var(--bg-layer-base,#f5f7fa)}.bg-layer-raised{background-color:var(--bg-layer-raised,#fcfcfc)}.bg-layer-sunken{background-color:var(--bg-layer-sunken,#eef1f7)}.bg-neutral{background-color:var(--bg-neutral,#fcfcfc)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#d9f0f1)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#faf0cf)}.bg-none{background-image:none}.fill-control-inverted{fill:var(--bg-control-inverted,#57647a)}.stroke-primary{stroke:var(--stroke-primary,#57647a)}.\!p-0{padding:0!important}.\!p-1{padding:.25rem!important}.\!p-\[9px\]{padding:9px!important}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-16{padding:4rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-9{padding:2.25rem}.p-\[6px\]{padding:6px}.px-0{padding-left:0;padding-right:0}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pl-\[7px\]{padding-left:7px}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-7{padding-right:1.75rem}.pr-\[7px\]{padding-right:7px}.ps-5{padding-inline-start:1.25rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-start{text-align:start}.text-end{text-align:end}.align-middle{vertical-align:middle}.font{font-family:var(--theme-font,var(--font-inter))}.font-mono{font-family:var(--theme-font-mono,var(--font-fira-code,"Fira Code")),ui-monospace,SFMono-Regular,Menlo,monospace}.\!text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-\[10px\]\/\[12px\]{font-size:10px;line-height:12px}.text-\[12px\]\/\[16px\]{font-size:12px;line-height:16px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.tracking-\[0\.03em\]{letter-spacing:.03em}.tracking-\[0\.06em\]{letter-spacing:.06em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.\!text-accent{color:var(--text-accent,#1d4ed8)!important}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent{color:var(--text-accent,#1d4ed8)}.text-accent-primary{color:var(--text-accent-primary,#7da4ff)}.text-accent-secondary{color:var(--text-accent-secondary,#37babc)}.text-accent-tertiary{color:var(--text-accent-tertiary,#a972ff)}.text-control-disable-primary{color:var(--text-control-disable-primary,var(--text-control-disable-alpha,#848e9c))}.text-control-inverted{color:var(--text-control-inverted,#fcfcfc)}.text-control-permanent{color:var(--text-control-permanent,#fcfcfc)}.text-controls-accent-disable{color:var(--controls-text-accent-disable,#d1dbea)}.text-controls-primary-disable{color:var(--controls-text-primary-disable,#696e7c)}.text-controls-secondary-disable{color:var(--controls-text-secondary-disable,#9fa6bd)}.text-error{color:var(--text-error,#ae2f2f)}.text-info{color:var(--text-info,#1d4ed8)}.text-primary{color:var(--text-primary,#161b2d)}.text-secondary{color:var(--text-secondary,#57647a)}.text-success{color:var(--text-success,#007274)}.text-transparent{color:transparent}.text-warning{color:var(--text-warning,#7f6300)}.text-warning-icon{color:var(--text-warning-icon,#eec840)}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 8px 44px 0 var(--shadow-blue-500-alpha-8,#2764d914);--tw-shadow-colored:0 8px 44px 0 var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 8px 24px 0 var(--shadow-blue-500-alpha-4,#2764d90a);--tw-shadow-colored:0 8px 24px 0 var(--tw-shadow-color)}.shadow-md,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.shadow-sm{--tw-shadow:0 2px 12px 0 var(--shadow-grey-1000,#161b2d08),0 2px 6px 0 var(--shadow-blue-500-alpha-20,var(--shadow-blue-500,#2764d933));--tw-shadow-colored:0 2px 12px 0 var(--tw-shadow-color),0 2px 6px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xs{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 4px 0 var(--shadow-grey-1000,#161b2d08),0 1px 2px 0 var(--shadow-blue-500-alpha-20,var(--shadow-blue-500,#2764d933));--tw-shadow-colored:0 1px 4px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid;outline-width:1px}.outline-offset-0{outline-offset:0}.outline-accent-focus{outline-color:var(--stroke-focus-blue,#6785fb)}.outline-focus{outline-color:var(--stroke-focus-black,var(--stroke-focus,#161b2d))}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[transform\2c box-shadow\]{transition-property:transform,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.placeholder\:text-secondary::-moz-placeholder{color:var(--text-secondary,#57647a)}.placeholder\:text-secondary::placeholder{color:var(--text-secondary,#57647a)}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:4px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#eef1f7)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#d1dbea)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.last\:mb-0:last-child{margin-bottom:0}.last\:border-0:last-child{border-width:0}.focus-within\:border-accent-focus:focus-within{border-color:var(--stroke-focus-blue,#6785fb)}.hover\:-translate-y-\[3px\]:hover{--tw-translate-y:-3px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:\!border-transparent:hover{border-color:transparent!important}.hover\:border-accent:hover{border-color:var(--stroke-accent,#1d4ed8)}.hover\:border-accent-alpha:hover{border-color:var(--stroke-accent-alpha,#2764d933)}.hover\:border-error:hover{border-color:var(--stroke-error,#ae2f2f)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#eef1f7)}.hover\:border-info:hover{border-color:var(--stroke-info,#1d4ed8)}.hover\:bg-accent-primary-alpha:hover{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.hover\:bg-control-accent-alpha-hover:hover{background-color:var(--bg-control-accent-alpha-hover,#2764d924)}.hover\:bg-control-accent-hover:hover{background-color:var(--bg-control-accent-hover,#5976e9)}.hover\:bg-control-neutral-hover-strong:hover{background-color:var(--bg-control-neutral-hover-strong,#848e9c)}.hover\:bg-controls-accent-primary-alpha-active:hover{background-color:var(--controls-bg-accent-primary-alpha-active,#7da4ff5c)}.hover\:bg-layer-3:hover{background-color:var(--bg-layer-3,#fcfcfc)}.hover\:bg-layer-4:hover{background-color:var(--bg-layer-4,#d1dbea)}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-accent:hover{color:var(--text-accent,#1d4ed8)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#7da4ff)}.hover\:text-accent-tertiary:hover{color:var(--text-accent-tertiary,#a972ff)}.hover\:text-control-accent-hover:hover{color:var(--text-control-accent-hover,var(--text-control-blue-hover,#5976e9))}.hover\:text-controls-accent-primary-hover:hover{color:var(--controls-text-accent-primary-hover,#3664e2)}.hover\:text-error:hover{color:var(--text-error,#ae2f2f)}.hover\:text-primary:hover{color:var(--text-primary,#161b2d)}.hover\:shadow-lg:hover{--tw-shadow:0 8px 44px 0 var(--shadow-blue-500-alpha-8,#2764d914);--tw-shadow-colored:0 8px 44px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:bg-accent-primary-alpha:focus{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:relative:focus-visible{position:relative}.focus-visible\:z-10:focus-visible{z-index:10}.focus-visible\:border-none:focus-visible{border-style:none}.focus-visible\:border-focus:focus-visible{border-color:var(--stroke-focus-black,var(--stroke-focus,#161b2d))}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:outline:focus-visible{outline-style:solid;outline-width:1px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-focus:focus-visible{outline-color:var(--stroke-focus-black,var(--stroke-focus,#161b2d))}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:bg-control-accent-alpha-active:active{background-color:var(--bg-control-accent-alpha-active,#2764d933)}.active\:text-control-accent-active:active{color:var(--text-control-accent-active,var(--text-control-blue-active,#6785fb))}.active\:text-controls-accent-primary-active:active{color:var(--controls-text-accent-primary-active,#7da4ff)}.enabled\:text-secondary:enabled{color:var(--text-secondary,#57647a)}.enabled\:hover\:bg-accent-primary-alpha:hover:enabled{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.enabled\:hover\:bg-control-accent-alpha-hover:hover:enabled{background-color:var(--bg-control-accent-alpha-hover,#2764d924)}.enabled\:hover\:text-accent-primary:hover:enabled{color:var(--text-accent-primary,#7da4ff)}.enabled\:hover\:text-control-accent-hover:hover:enabled{color:var(--text-control-accent-hover,var(--text-control-blue-hover,#5976e9))}.enabled\:active\:bg-control-accent-alpha-active:active:enabled{background-color:var(--bg-control-accent-alpha-active,#2764d933)}.enabled\:active\:bg-controls-accent-primary-alpha-active:active:enabled{background-color:var(--controls-bg-accent-primary-alpha-active,#7da4ff5c)}.enabled\:active\:text-accent-primary:active:enabled{color:var(--text-accent-primary,#7da4ff)}.enabled\:active\:text-control-accent-active:active:enabled{color:var(--text-control-accent-active,var(--text-control-blue-active,#6785fb))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:text-control-disable-primary:disabled{color:var(--text-control-disable-primary,var(--text-control-disable-alpha,#848e9c))}.disabled\:text-controls-secondary-disable:disabled{color:var(--controls-text-secondary-disable,#9fa6bd)}.disabled\:opacity-75:disabled{opacity:.75}.disabled\:hover\:cursor-default:hover:disabled{cursor:default}.group\/grid-row:hover .group-hover\/grid-row\:pointer-events-auto{pointer-events:auto}.group:hover .group-hover\:visible,.group\/item:hover .group-hover\/item\:visible{visibility:visible}.group\/grid-row:hover .group-hover\/grid-row\:bg-accent-primary-alpha,.group\/item:hover .group-hover\/item\:bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.group:hover .group-hover\:text-primary{color:var(--text-primary,#161b2d)}.group\/grid-row:hover .group-hover\/grid-row\:opacity-100{opacity:1}.group:disabled .group-disabled\:text-controls-secondary-disable{color:var(--controls-text-secondary-disable,#9fa6bd)}.peer:focus-visible~.peer-focus-visible\:outline{outline-style:solid;outline-width:1px}.peer:focus-visible~.peer-focus-visible\:outline-offset-2{outline-offset:2px}.peer:focus-visible~.peer-focus-visible\:outline-focus{outline-color:var(--stroke-focus-black,var(--stroke-focus,#161b2d))}@media (prefers-reduced-motion:reduce){.motion-reduce\:transition-none{transition-property:none}.motion-reduce\:hover\:translate-y-0:hover{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.md\:\!h-\[800px\]{height:800px!important}.md\:h-auto{height:auto}.md\:min-h-\[266px\]{min-height:266px}.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-4{padding:1rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}.rtl\:scale-x-\[-1\]:where([dir=rtl],[dir=rtl] *){--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&\>div\]\:\!border-0>div{border-width:0!important}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}
|
|
6
|
+
) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:769px){.container{max-width:769px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-bottom-0\.5{bottom:-.125rem}.-left-0\.5{left:-.125rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.top-0{top:0}.top-1\/2{top:50%}.top-8{top:2rem}.top-\[-2px\]{top:-2px}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[-1\]{z-index:-1}.z-\[52\]{z-index:52}.z-\[53\]{z-index:53}.z-\[55\]{z-index:55}.-m-px{margin:-1px}.m-0{margin:0}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-ml-6{margin-left:-1.5rem}.-mr-2{margin-right:-.5rem}.-mr-px{margin-right:-1px}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-\[2px\]{margin-bottom:2px}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-6{margin-left:1.5rem}.ml-\[26px\]{margin-left:26px}.ml-\[28px\]{margin-left:28px}.ml-\[44px\]{margin-left:44px}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-3{-webkit-line-clamp:3}.line-clamp-4{-webkit-line-clamp:4}.line-clamp-4,.line-clamp-5{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-5{-webkit-line-clamp:5}.line-clamp-6{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.inline-grid{display:inline-grid}.contents{display:contents}.hidden{display:none}.size-0{width:0;height:0}.size-10{width:2.5rem;height:2.5rem}.size-12{width:3rem;height:3rem}.size-2{width:.5rem;height:.5rem}.size-3{width:.75rem;height:.75rem}.size-3\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.size-7{width:1.75rem;height:1.75rem}.size-9{width:2.25rem;height:2.25rem}.size-\[16px\]{width:16px;height:16px}.size-\[18px\]{width:18px;height:18px}.size-\[20px\]{width:20px;height:20px}.size-\[24px\]{width:24px;height:24px}.size-\[28px\]{width:28px;height:28px}.size-\[38px\]{width:38px;height:38px}.size-\[400px\]{width:400px;height:400px}.size-\[40px\]{width:40px;height:40px}.size-\[48px\]{width:48px;height:48px}.size-\[4px\]{width:4px;height:4px}.size-\[8px\]{width:8px;height:8px}.size-auto{width:auto;height:auto}.size-full{width:100%;height:100%}.size-px{width:1px;height:1px}.\!h-10{height:2.5rem!important}.\!h-6{height:1.5rem!important}.\!h-9{height:2.25rem!important}.\!h-\[600px\]{height:600px!important}.\!h-auto{height:auto!important}.h-0{height:0}.h-1{height:.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[100px\]{height:100px}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[180px\]{height:180px}.h-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[232px\]{height:232px}.h-\[24px\]{height:24px}.h-\[250px\]{height:250px}.h-\[26px\]{height:26px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[34px\]{height:34px}.h-\[38px\]{height:38px}.h-\[40px\]{height:40px}.h-\[420px\]{height:420px}.h-\[48px\]{height:48px}.h-\[4px\]{height:4px}.h-\[500px\]{height:500px}.h-\[60px\]{height:60px}.h-\[640px\]{height:640px}.h-\[740px\]{height:740px}.h-\[8px\]{height:8px}.h-auto{height:auto}.h-full{height:100%}.max-h-\[352px\]{max-height:352px}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-2{min-height:.5rem}.min-h-4{min-height:1rem}.min-h-\[120px\]{min-height:120px}.min-h-\[180px\]{min-height:180px}.min-h-\[220px\]{min-height:220px}.min-h-\[248px\]{min-height:248px}.min-h-\[24px\]{min-height:24px}.min-h-\[25px\]{min-height:25px}.min-h-\[38px\]{min-height:38px}.min-h-\[40px\]{min-height:40px}.min-h-\[42px\]{min-height:42px}.min-h-\[44px\]{min-height:44px}.min-h-\[48px\]{min-height:48px}.min-h-screen{min-height:100vh}.\!w-\[280px\]{width:280px!important}.w-0{width:0}.w-0\.5{width:.125rem}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-14{width:3.5rem}.w-2{width:.5rem}.w-2\/5{width:40%}.w-28{width:7rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-\[1000px\]{width:1000px}.w-\[10px\]{width:10px}.w-\[120px\]{width:120px}.w-\[140px\]{width:140px}.w-\[150px\]{width:150px}.w-\[160px\]{width:160px}.w-\[18px\]{width:18px}.w-\[200px\]{width:200px}.w-\[22px\]{width:22px}.w-\[240px\]{width:240px}.w-\[248px\]{width:248px}.w-\[24px\]{width:24px}.w-\[250px\]{width:250px}.w-\[260px\]{width:260px}.w-\[280px\]{width:280px}.w-\[300px\]{width:300px}.w-\[320px\]{width:320px}.w-\[32px\]{width:32px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[400px\]{width:400px}.w-\[40px\]{width:40px}.w-\[420px\]{width:420px}.w-\[422px\]{width:422px}.w-\[44px\]{width:44px}.w-\[450px\]{width:450px}.w-\[480px\]{width:480px}.w-\[4px\]{width:4px}.w-\[500px\]{width:500px}.w-\[520px\]{width:520px}.w-\[560px\]{width:560px}.w-\[600px\]{width:600px}.w-\[64px\]{width:64px}.w-\[720px\]{width:720px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-8{min-width:2rem}.min-w-\[100px\]{min-width:100px}.min-w-\[160px\]{min-width:160px}.min-w-\[180px\]{min-width:180px}.min-w-\[200px\]{min-width:200px}.min-w-\[24px\]{min-width:24px}.min-w-\[260px\]{min-width:260px}.min-w-\[280px\]{min-width:280px}.min-w-\[320px\]{min-width:320px}.min-w-\[400px\]{min-width:400px}.min-w-\[420px\]{min-width:420px}.min-w-\[44px\]{min-width:44px}.min-w-\[480px\]{min-width:480px}.min-w-\[520px\]{min-width:520px}.min-w-\[5ch\]{min-width:5ch}.min-w-\[600px\]{min-width:600px}.min-w-\[640px\]{min-width:640px}.min-w-\[760px\]{min-width:760px}.min-w-\[800px\]{min-width:800px}.\!max-w-\[500px\]{max-width:500px!important}.\!max-w-\[var\(--reference-width\)\]{max-width:var(--reference-width)!important}.max-w-80{max-width:20rem}.max-w-\[1200px\]{max-width:1200px}.max-w-\[160px\]{max-width:160px}.max-w-\[180px\]{max-width:180px}.max-w-\[200px\]{max-width:200px}.max-w-\[220px\]{max-width:220px}.max-w-\[280px\]{max-width:280px}.max-w-\[30\%\]{max-width:30%}.max-w-\[300px\]{max-width:300px}.max-w-\[376px\]{max-width:376px}.max-w-\[428px\]{max-width:428px}.max-w-\[51\%\]{max-width:51%}.max-w-\[600px\]{max-width:600px}.max-w-\[80px\]{max-width:80px}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-0{flex-basis:0px}.basis-auto{flex-basis:auto}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.\!cursor-default{cursor:default!important}.\!cursor-not-allowed{cursor:not-allowed!important}.cursor-col-resize{cursor:col-resize}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-\[220px_1fr\]{grid-template-columns:220px 1fr}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.grid-cols-\[auto_1fr_1fr\]{grid-template-columns:auto 1fr 1fr}.grid-cols-\[auto_1fr_1fr_1fr\]{grid-template-columns:auto 1fr 1fr 1fr}.grid-cols-\[auto_minmax\(0\2c 1fr\)\]{grid-template-columns:auto minmax(0,1fr)}.grid-cols-\[minmax\(280px\2c 1fr\)_minmax\(220px\2c 1fr\)_minmax\(220px\2c 1fr\)\]{grid-template-columns:minmax(280px,1fr) minmax(220px,1fr) minmax(220px,1fr)}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[2px\]{gap:2px}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.gap-y-6{row-gap:1.5rem}.gap-y-8{row-gap:2rem}.gap-y-\[80px\]{row-gap:80px}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#e0e6f0)}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.\!truncate{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\!whitespace-normal{white-space:normal!important}.whitespace-normal{white-space:normal}.\!whitespace-nowrap{white-space:nowrap!important}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.\!rounded{border-radius:4px!important}.\!rounded-\[2px\]{border-radius:2px!important}.rounded{border-radius:4px}.rounded-\[10px\]{border-radius:10px}.rounded-\[120px\]{border-radius:120px}.rounded-\[20px\]{border-radius:20px}.rounded-\[4px\]{border-radius:4px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.\!rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.rounded-l{border-top-left-radius:4px;border-bottom-left-radius:4px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r{border-top-right-radius:4px;border-bottom-right-radius:4px}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-t{border-top-left-radius:4px;border-top-right-radius:4px}.\!border{border-width:1px!important}.\!border-0{border-width:0!important}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-0{border-left-width:0}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-r{border-right-width:1px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.\!border-solid{border-style:solid!important}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.\!border-none{border-style:none!important}.border-none{border-style:none}.\!border-error{border-color:var(--stroke-error,#ae2f2f)!important}.\!border-primary{border-color:var(--stroke-primary,#57647a)!important}.\!border-transparent{border-color:transparent!important}.border-\[\#F4CE46\]{--tw-border-opacity:1;border-color:rgb(244 206 70/var(--tw-border-opacity,1))}.border-accent{border-color:var(--stroke-accent,#1d4ed8)}.border-accent-primary{border-color:var(--stroke-accent-primary,#124ace)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#007274)}.border-control-disable-primary{border-color:var(--stroke-control-disable-primary,var(--text-control-disable-primary,var(--text-control-disable-alpha,#848e9c)))}.border-default{border-color:var(--stroke-default,#b2c2dd)}.border-error{border-color:var(--stroke-error,#ae2f2f)}.border-hover{border-color:var(--stroke-hover,#eef1f7)}.border-info{border-color:var(--stroke-info,#1d4ed8)}.border-primary{border-color:var(--stroke-primary,#57647a)}.border-red-900{border-color:var(--red-900,#402027)}.border-secondary{border-color:var(--stroke-secondary,#d1dbea)}.border-success{border-color:var(--stroke-success,#007274)}.border-tertiary{border-color:var(--stroke-tertiary,#e0e6f0)}.border-transparent{border-color:transparent}.border-warning{border-color:var(--stroke-warning,#eec840)}.border-b-accent-primary{border-bottom-color:var(--stroke-accent-primary,#124ace)}.border-l-accent-primary{border-left-color:var(--stroke-accent-primary,#124ace)}.border-l-transparent{border-left-color:transparent}.border-t-info{border-top-color:var(--stroke-info,#1d4ed8)}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.\!bg-layer-2{background-color:var(--bg-layer-2,#eef1f7)!important}.\!bg-layer-4{background-color:var(--bg-layer-4,#d1dbea)!important}.\!bg-success{background-color:var(--bg-success,#d9f0f1)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-accent-secondary-alpha{background-color:var(--bg-accent-secondary-alpha,#37babc2e)}.bg-accent-tertiary-alpha{background-color:var(--bg-accent-tertiary-alpha,#a972ff2e)}.bg-backdrop{background-color:var(--bg-backdrop,#161b2d4d)}.bg-blackout{background-color:var(--bg-blackout,#0c101d4d)}.bg-control-accent{background-color:var(--bg-control-accent,#1d4ed8)}.bg-control-accent-alpha{background-color:var(--bg-control-accent-alpha,#2764d90f)}.bg-control-accent-alpha-hover{background-color:var(--bg-control-accent-alpha-hover,#2764d924)}.bg-control-disable-primary{background-color:var(--bg-control-disable-primary,var(--bg-control-disable,#dce0e8))}.bg-control-disable-secondary{background-color:var(--bg-control-disable-secondary,#acb3c3)}.bg-control-error{background-color:var(--bg-control-error,#ae2f2f)}.bg-control-inverted{background-color:var(--bg-control-inverted,#57647a)}.bg-control-neutral{background-color:var(--bg-control-neutral,#fcfcfc)}.bg-control-neutral-active{background-color:var(--bg-control-neutral-active,#d1dbea)}.bg-control-neutral-default{background-color:var(--bg-control-neutral-default,#acb3c3)}.bg-controls-accent-primary{background-color:var(--controls-bg-accent-primary,#124ace)}.bg-controls-accent-primary-alpha-active{background-color:var(--controls-bg-accent-primary-alpha-active,#7da4ff5c)}.bg-controls-disable{background-color:var(--controls-bg-disable,#d1dbea)}.bg-controls-disable-accent{background-color:var(--controls-bg-disable-accent,#7c8293)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-controls-error{background-color:var(--controls-bg-error,#ae2f2f)}.bg-error{background-color:var(--bg-error,#f3d6d8)}.bg-info{background-color:var(--bg-info,#d6e2f9)}.bg-layer-0{background-color:var(--bg-layer-0,#fcfcfc)}.bg-layer-1{background-color:var(--bg-layer-1,#e0e6f0)}.bg-layer-2{background-color:var(--bg-layer-2,#eef1f7)}.bg-layer-3{background-color:var(--bg-layer-3,#fcfcfc)}.bg-layer-4{background-color:var(--bg-layer-4,#d1dbea)}.bg-layer-base{background-color:var(--bg-layer-base,#f5f7fa)}.bg-layer-raised{background-color:var(--bg-layer-raised,#fcfcfc)}.bg-layer-sunken{background-color:var(--bg-layer-sunken,#eef1f7)}.bg-neutral{background-color:var(--bg-neutral,#fcfcfc)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#d9f0f1)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#faf0cf)}.bg-none{background-image:none}.fill-control-inverted{fill:var(--bg-control-inverted,#57647a)}.stroke-primary{stroke:var(--stroke-primary,#57647a)}.\!p-0{padding:0!important}.\!p-1{padding:.25rem!important}.\!p-\[9px\]{padding:9px!important}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-16{padding:4rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-9{padding:2.25rem}.p-\[6px\]{padding:6px}.px-0{padding-left:0;padding-right:0}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pl-\[7px\]{padding-left:7px}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-7{padding-right:1.75rem}.pr-\[7px\]{padding-right:7px}.ps-5{padding-inline-start:1.25rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-start{text-align:start}.text-end{text-align:end}.align-middle{vertical-align:middle}.font{font-family:var(--theme-font,var(--font-inter))}.font-mono{font-family:var(--theme-font-mono,var(--font-fira-code,"Fira Code")),ui-monospace,SFMono-Regular,Menlo,monospace}.\!text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-\[10px\]\/\[12px\]{font-size:10px;line-height:12px}.text-\[12px\]\/\[16px\]{font-size:12px;line-height:16px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.tracking-\[0\.03em\]{letter-spacing:.03em}.tracking-\[0\.06em\]{letter-spacing:.06em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.\!text-accent{color:var(--text-accent,#1d4ed8)!important}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent{color:var(--text-accent,#1d4ed8)}.text-accent-primary{color:var(--text-accent-primary,#7da4ff)}.text-accent-secondary{color:var(--text-accent-secondary,#37babc)}.text-accent-tertiary{color:var(--text-accent-tertiary,#a972ff)}.text-control-disable-primary{color:var(--text-control-disable-primary,var(--text-control-disable-alpha,#848e9c))}.text-control-inverted{color:var(--text-control-inverted,#fcfcfc)}.text-control-permanent{color:var(--text-control-permanent,#fcfcfc)}.text-controls-accent-disable{color:var(--controls-text-accent-disable,#d1dbea)}.text-controls-primary-disable{color:var(--controls-text-primary-disable,#696e7c)}.text-controls-secondary-disable{color:var(--controls-text-secondary-disable,#9fa6bd)}.text-error{color:var(--text-error,#ae2f2f)}.text-info{color:var(--text-info,#1d4ed8)}.text-primary{color:var(--text-primary,#161b2d)}.text-secondary{color:var(--text-secondary,#57647a)}.text-success{color:var(--text-success,#007274)}.text-transparent{color:transparent}.text-warning{color:var(--text-warning,#7f6300)}.text-warning-icon{color:var(--text-warning-icon,#eec840)}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 8px 44px 0 var(--shadow-blue-500-alpha-8,#2764d914);--tw-shadow-colored:0 8px 44px 0 var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 8px 24px 0 var(--shadow-blue-500-alpha-4,#2764d90a);--tw-shadow-colored:0 8px 24px 0 var(--tw-shadow-color)}.shadow-md,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.shadow-sm{--tw-shadow:0 2px 12px 0 var(--shadow-grey-1000,#161b2d08),0 2px 6px 0 var(--shadow-blue-500-alpha-20,var(--shadow-blue-500,#2764d933));--tw-shadow-colored:0 2px 12px 0 var(--tw-shadow-color),0 2px 6px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xs{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 4px 0 var(--shadow-grey-1000,#161b2d08),0 1px 2px 0 var(--shadow-blue-500-alpha-20,var(--shadow-blue-500,#2764d933));--tw-shadow-colored:0 1px 4px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid;outline-width:1px}.outline-offset-0{outline-offset:0}.outline-accent-focus{outline-color:var(--stroke-focus-blue,#6785fb)}.outline-focus{outline-color:var(--stroke-focus-black,var(--stroke-focus,#161b2d))}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[transform\2c box-shadow\]{transition-property:transform,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.placeholder\:text-secondary::-moz-placeholder{color:var(--text-secondary,#57647a)}.placeholder\:text-secondary::placeholder{color:var(--text-secondary,#57647a)}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:4px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#eef1f7)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#d1dbea)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.last\:mb-0:last-child{margin-bottom:0}.last\:border-0:last-child{border-width:0}.focus-within\:border-accent-focus:focus-within{border-color:var(--stroke-focus-blue,#6785fb)}.hover\:-translate-y-\[3px\]:hover{--tw-translate-y:-3px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:\!border-transparent:hover{border-color:transparent!important}.hover\:border-accent:hover{border-color:var(--stroke-accent,#1d4ed8)}.hover\:border-accent-alpha:hover{border-color:var(--stroke-accent-alpha,#2764d933)}.hover\:border-error:hover{border-color:var(--stroke-error,#ae2f2f)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#eef1f7)}.hover\:border-info:hover{border-color:var(--stroke-info,#1d4ed8)}.hover\:bg-accent-primary-alpha:hover{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.hover\:bg-control-accent-alpha-hover:hover{background-color:var(--bg-control-accent-alpha-hover,#2764d924)}.hover\:bg-control-accent-hover:hover{background-color:var(--bg-control-accent-hover,#5976e9)}.hover\:bg-control-neutral-hover-strong:hover{background-color:var(--bg-control-neutral-hover-strong,#848e9c)}.hover\:bg-controls-accent-primary-alpha-active:hover{background-color:var(--controls-bg-accent-primary-alpha-active,#7da4ff5c)}.hover\:bg-layer-3:hover{background-color:var(--bg-layer-3,#fcfcfc)}.hover\:bg-layer-4:hover{background-color:var(--bg-layer-4,#d1dbea)}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-accent:hover{color:var(--text-accent,#1d4ed8)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#7da4ff)}.hover\:text-accent-tertiary:hover{color:var(--text-accent-tertiary,#a972ff)}.hover\:text-control-accent-hover:hover{color:var(--text-control-accent-hover,var(--text-control-blue-hover,#5976e9))}.hover\:text-controls-accent-primary-hover:hover{color:var(--controls-text-accent-primary-hover,#3664e2)}.hover\:text-error:hover{color:var(--text-error,#ae2f2f)}.hover\:text-primary:hover{color:var(--text-primary,#161b2d)}.hover\:shadow-lg:hover{--tw-shadow:0 8px 44px 0 var(--shadow-blue-500-alpha-8,#2764d914);--tw-shadow-colored:0 8px 44px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:bg-accent-primary-alpha:focus{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:relative:focus-visible{position:relative}.focus-visible\:z-10:focus-visible{z-index:10}.focus-visible\:border-none:focus-visible{border-style:none}.focus-visible\:border-focus:focus-visible{border-color:var(--stroke-focus-black,var(--stroke-focus,#161b2d))}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:outline:focus-visible{outline-style:solid;outline-width:1px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-focus:focus-visible{outline-color:var(--stroke-focus-black,var(--stroke-focus,#161b2d))}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:bg-control-accent-alpha-active:active{background-color:var(--bg-control-accent-alpha-active,#2764d933)}.active\:text-control-accent-active:active{color:var(--text-control-accent-active,var(--text-control-blue-active,#6785fb))}.active\:text-controls-accent-primary-active:active{color:var(--controls-text-accent-primary-active,#7da4ff)}.enabled\:text-secondary:enabled{color:var(--text-secondary,#57647a)}.enabled\:hover\:bg-accent-primary-alpha:hover:enabled{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.enabled\:hover\:bg-control-accent-alpha-hover:hover:enabled{background-color:var(--bg-control-accent-alpha-hover,#2764d924)}.enabled\:hover\:text-accent-primary:hover:enabled{color:var(--text-accent-primary,#7da4ff)}.enabled\:hover\:text-control-accent-hover:hover:enabled{color:var(--text-control-accent-hover,var(--text-control-blue-hover,#5976e9))}.enabled\:active\:bg-control-accent-alpha-active:active:enabled{background-color:var(--bg-control-accent-alpha-active,#2764d933)}.enabled\:active\:bg-controls-accent-primary-alpha-active:active:enabled{background-color:var(--controls-bg-accent-primary-alpha-active,#7da4ff5c)}.enabled\:active\:text-accent-primary:active:enabled{color:var(--text-accent-primary,#7da4ff)}.enabled\:active\:text-control-accent-active:active:enabled{color:var(--text-control-accent-active,var(--text-control-blue-active,#6785fb))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:text-control-disable-primary:disabled{color:var(--text-control-disable-primary,var(--text-control-disable-alpha,#848e9c))}.disabled\:text-controls-secondary-disable:disabled{color:var(--controls-text-secondary-disable,#9fa6bd)}.disabled\:opacity-75:disabled{opacity:.75}.disabled\:hover\:cursor-default:hover:disabled{cursor:default}.group\/grid-row:hover .group-hover\/grid-row\:pointer-events-auto{pointer-events:auto}.group:hover .group-hover\:visible,.group\/item:hover .group-hover\/item\:visible{visibility:visible}.group\/grid-row:hover .group-hover\/grid-row\:bg-accent-primary-alpha,.group\/item:hover .group-hover\/item\:bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.group:hover .group-hover\:text-primary{color:var(--text-primary,#161b2d)}.group\/grid-row:hover .group-hover\/grid-row\:opacity-100{opacity:1}.group:disabled .group-disabled\:text-controls-secondary-disable{color:var(--controls-text-secondary-disable,#9fa6bd)}.peer:focus-visible~.peer-focus-visible\:outline{outline-style:solid;outline-width:1px}.peer:focus-visible~.peer-focus-visible\:outline-offset-2{outline-offset:2px}.peer:focus-visible~.peer-focus-visible\:outline-focus{outline-color:var(--stroke-focus-black,var(--stroke-focus,#161b2d))}@media (prefers-reduced-motion:reduce){.motion-reduce\:transition-none{transition-property:none}.motion-reduce\:hover\:translate-y-0:hover{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.md\:\!h-\[800px\]{height:800px!important}.md\:h-auto{height:auto}.md\:min-h-\[266px\]{min-height:266px}.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-4{padding:1rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}.rtl\:scale-x-\[-1\]:where([dir=rtl],[dir=rtl] *){--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&\>div\]\:\!border-0>div{border-width:0!important}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# Migrating `Tag` — one size, no rim — v`0.13.x` → v`0.14.0`
|
|
2
|
+
|
|
3
|
+
## Why this changed
|
|
4
|
+
|
|
5
|
+
The 2.0 tag is one shape: a 32px pill. The old `size` prop offered two heights
|
|
6
|
+
(24px standard, 20px small) that the design system no longer draws, and a tag is
|
|
7
|
+
not a control a caller sizes — it labels content, so it takes the size the
|
|
8
|
+
design gives it. Dropping the prop also removes the branch that had to keep two
|
|
9
|
+
geometries, two pointer-target rules and two radii in step.
|
|
10
|
+
|
|
11
|
+
The rim went with it. No tag draws a border any more: the outlined chip is told
|
|
12
|
+
apart by its fill on the raised layer, and the accent tint carries hover and
|
|
13
|
+
selection. A 1px rim on a 32px pill was doing no work the fill was not already
|
|
14
|
+
doing, and it was the last thing keeping a border box on the borderless
|
|
15
|
+
selectable chip.
|
|
16
|
+
|
|
17
|
+
Alongside it, the selectable chip picks up the rest of its spec: a semibold
|
|
18
|
+
label once selected, and hover carried by the accent tint alone instead of also
|
|
19
|
+
darkening the label.
|
|
20
|
+
|
|
21
|
+
## What changed
|
|
22
|
+
|
|
23
|
+
| Before | After |
|
|
24
|
+
| -------------------------------------------------- | --------------------------------------------------- |
|
|
25
|
+
| `<Tag size={ElementSize.Standard} />` | `<Tag />` |
|
|
26
|
+
| `<Tag size={ElementSize.Small} />` | `<Tag />` — there is no 20px tag |
|
|
27
|
+
| `TagProps['size']` | removed from the type |
|
|
28
|
+
| 24px tall, `rounded-lg`, 8px side padding | 32px tall, `rounded-full`, 12px side padding |
|
|
29
|
+
| 1px rim (`border-tertiary`, `border-accent-alpha`) | no border on any tag |
|
|
30
|
+
| Outlined hover: rim → `border-accent-alpha` | Hover: `bg-control-accent-alpha-hover` on every tag |
|
|
31
|
+
| Selected selectable chip: regular label | Selected selectable chip: semibold label |
|
|
32
|
+
| Selectable chip hover: label → `text-primary` | Label colour unchanged on hover |
|
|
33
|
+
| `disabled` dimmed the tag and sank its fill | `disabled` only stops it responding |
|
|
34
|
+
| `transition-colors duration-200` | no transition — the design switches the fill at 0ms |
|
|
35
|
+
| `TagInput size="sm"` rendered 20px tags | Renders the one 32px tag; the field grows to fit |
|
|
36
|
+
|
|
37
|
+
`Tag` is the only component with a changed public API. `TagInput`, `Select` and
|
|
38
|
+
`MultiSelectTags` compose it and need no changes at the call site, but their
|
|
39
|
+
tags are visibly taller.
|
|
40
|
+
|
|
41
|
+
## Step-by-step migration
|
|
42
|
+
|
|
43
|
+
### 1. Find all usages
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
# Tags that pass a size
|
|
47
|
+
grep -rn "<Tag" -A 6 src/ | grep -n "size="
|
|
48
|
+
|
|
49
|
+
# Layouts that assumed the old 24px/20px tag height
|
|
50
|
+
grep -rn "h-\[24px\]\|h-\[20px\]" src/
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 2. Drop the prop
|
|
54
|
+
|
|
55
|
+
**Before:**
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
<Tag label="TypeScript" size={ElementSize.Small} />
|
|
59
|
+
<Tag label="Drafts" size={ElementSize.Standard} selected onClick={toggle} />
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
**After:**
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
<Tag label="TypeScript" />
|
|
66
|
+
<Tag label="Drafts" selected onClick={toggle} />
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### 3. Re-check the containers around your tags
|
|
70
|
+
|
|
71
|
+
A tag is 8px taller than the 0.13.x standard one and 12px taller than the small
|
|
72
|
+
one, so any row with a fixed height needs another look:
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
// Before: a row sized to the old tag
|
|
76
|
+
<div className="flex h-[24px] items-center gap-1">{tags}</div>
|
|
77
|
+
|
|
78
|
+
// After: let the row take the tag's height
|
|
79
|
+
<div className="flex items-center gap-1">{tags}</div>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
The same applies to a small `TagInput`: its field is `min-h-[24px]` over
|
|
83
|
+
`h-auto`, so it grows around the tags rather than clipping them — but a wrapper
|
|
84
|
+
you gave a fixed height will clip.
|
|
85
|
+
|
|
86
|
+
### 4. Update tests that asserted the old geometry
|
|
87
|
+
|
|
88
|
+
```diff
|
|
89
|
+
-expect(tag).toHaveClass('h-[20px]');
|
|
90
|
+
+expect(tag).toHaveClass('h-[32px]');
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### 5. Verify
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
npm run typecheck && npm run test
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
`typecheck` finds every remaining `size` on a `Tag` for you — the prop is gone
|
|
100
|
+
from `TagProps`, so each one is a type error rather than a silent no-op.
|
|
101
|
+
|
|
102
|
+
## Notes
|
|
103
|
+
|
|
104
|
+
- A disabled tag is no longer dimmed — the design defines no disabled tag, so
|
|
105
|
+
`disabled` keeps the colours and only removes the click handling, the remove
|
|
106
|
+
control and the pointer. If your UI relies on a disabled tag being visibly
|
|
107
|
+
inert, say so with the surrounding copy or pass your own `className`.
|
|
108
|
+
- `TagAppearance.Outlined` keeps its name even though it no longer outlines
|
|
109
|
+
anything — renaming it would be a second breaking change in the same release.
|
|
110
|
+
Read it as "the default filled chip".
|
|
111
|
+
- The selected selectable chip is set in `dial-tiny-semi-text`, so selecting one
|
|
112
|
+
changes its width by the difference between the regular and semibold label. In
|
|
113
|
+
a wrapping filter row that is the intended behaviour; give the chip a width if
|
|
114
|
+
a stable layout matters more.
|
|
115
|
+
- `dial-kit-minimum-target` is gone from the tag itself. At 32px the rendered
|
|
116
|
+
size clears the WCAG 2.5.8 minimum of 24×24 on its own, so the pseudo-element
|
|
117
|
+
is no longer needed — and with it goes the target that used to sit over a
|
|
118
|
+
nested remove button. The remove button keeps its own.
|
|
119
|
+
- The class matrix now lives in `src/components/New/Tag/constants.ts`
|
|
120
|
+
(`tagBaseClassName`, `tagStateClassNames`, `tagHoverClassName`). These are
|
|
121
|
+
internal — they are not exported from the package.
|
|
@@ -26,6 +26,7 @@ migration-guides/
|
|
|
26
26
|
| 0.14.0 | [focus-border-token-role-naming](0.14.0/focus-border-token-role-naming.md) | Border tokens `focus-black` → `focus` and `focus-blue` → `accent-focus`, reversing the 0.13.0 value-based naming |
|
|
27
27
|
| 0.14.0 | [select-multiselect-option-row](0.14.0/select-multiselect-option-row.md) | A multi-select `Select` option is one `option` with `aria-selected` and a decorative box, instead of an option wrapping a real `role="checkbox"` |
|
|
28
28
|
| 0.14.0 | [button-tooltip-2-0](0.14.0/button-tooltip-2-0.md) | `Button` and `IconButton` wrap the 2.0 `Tooltip` with `asChild`: `placement` takes `TooltipPlacement`, and the trigger `<span>` is gone |
|
|
29
|
+
| 0.14.0 | [tag-single-size](0.14.0/tag-single-size.md) | `Tag` drops `size` for one 32px pill; the selectable chip gets a semibold selected label |
|
|
29
30
|
|
|
30
31
|
---
|
|
31
32
|
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { FC, HTMLAttributes, MouseEvent, ReactNode } from 'react';
|
|
2
|
-
import { ElementSize } from '../../../types/size';
|
|
3
2
|
import { TagAppearance } from '../../../types/tag';
|
|
4
3
|
type NativeTagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
|
|
5
4
|
export interface TagProps extends NativeTagProps {
|
|
6
5
|
label: string;
|
|
7
6
|
icon?: ReactNode;
|
|
8
|
-
size?: ElementSize;
|
|
9
7
|
appearance?: TagAppearance;
|
|
10
8
|
selected?: boolean;
|
|
11
9
|
disabled?: boolean;
|
|
@@ -18,6 +16,10 @@ export interface TagProps extends NativeTagProps {
|
|
|
18
16
|
* aliases: Chip|Pill
|
|
19
17
|
* Design system 2.0
|
|
20
18
|
*
|
|
19
|
+
* The tag has one height — the 32px pill of the 2.0 design. There is no `size`
|
|
20
|
+
* prop: a tag sizes itself, and a caller that needs a different height is
|
|
21
|
+
* usually reaching for a button.
|
|
22
|
+
*
|
|
21
23
|
* The label truncates rather than wrapping, and carries a native `title` so the
|
|
22
24
|
* full text stays reachable when it does.
|
|
23
25
|
*
|
|
@@ -26,10 +28,16 @@ export interface TagProps extends NativeTagProps {
|
|
|
26
28
|
* the caller: a clickable tag that is also closable gives a screen reader two
|
|
27
29
|
* actions with no way to tell which one it landed on.
|
|
28
30
|
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
31
|
+
* No tag draws a rim; the two appearances are told apart by their fill.
|
|
32
|
+
* `TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill
|
|
33
|
+
* at all until it is selected, one hover tint shared by both states, a semibold
|
|
34
|
+
* label once selected, and the state carried on `aria-pressed` rather than by
|
|
35
|
+
* the tint alone. Give it an `onClick` — a selectable tag that cannot be
|
|
36
|
+
* activated is a colour and nothing else.
|
|
37
|
+
*
|
|
38
|
+
* Selecting one therefore changes its width by the difference between the
|
|
39
|
+
* regular and semibold label. In a wrapping filter row that is what the design
|
|
40
|
+
* asks for; if a fixed width matters, give the chip one.
|
|
33
41
|
*
|
|
34
42
|
* @example
|
|
35
43
|
* ```tsx
|
|
@@ -46,11 +54,10 @@ export interface TagProps extends NativeTagProps {
|
|
|
46
54
|
*
|
|
47
55
|
* @param label - Text content displayed inside the tag.
|
|
48
56
|
* @param [icon] - Icon rendered before the label.
|
|
49
|
-
* @param [
|
|
50
|
-
*
|
|
51
|
-
* is the borderless filter chip that tints when selected.
|
|
57
|
+
* @param [appearance=TagAppearance.Outlined] - `outlined` is the filled chip on the raised
|
|
58
|
+
* layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected.
|
|
52
59
|
* @param [selected=false] - Applies the accent-tinted selected styling.
|
|
53
|
-
* @param [disabled=false] -
|
|
60
|
+
* @param [disabled=false] - Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put.
|
|
54
61
|
* @param [closable=false] - Renders the remove button. Needs `onRemove` to appear.
|
|
55
62
|
* @param [removeLabel] - Accessible name of the remove button; defaults to `Remove <label>`.
|
|
56
63
|
* @param [onRemove] - Called when the remove button is clicked. The click does not bubble to `onClick`.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { TagAppearance } from '../../../types/tag';
|
|
2
|
+
/**
|
|
3
|
+
* Geometry and layout shared by every tag. No transition: the design animates
|
|
4
|
+
* the hover and selected steps instantly (0ms), so the fill switches on the
|
|
5
|
+
* same frame as the pointer.
|
|
6
|
+
*/
|
|
7
|
+
export declare const tagBaseClassName = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3";
|
|
8
|
+
/**
|
|
9
|
+
* Fill and text colour per appearance and selection. No tag draws a rim: the
|
|
10
|
+
* two appearances are told apart by their fill — `outlined` sits on the raised
|
|
11
|
+
* layer, `selectable` on nothing until it is selected, where it also steps its
|
|
12
|
+
* label up from secondary to primary.
|
|
13
|
+
*/
|
|
14
|
+
export declare const tagStateClassNames: Record<TagAppearance, Record<'default' | 'selected', string>>;
|
|
15
|
+
/** Cursor and focus ring of a tag that can be activated. */
|
|
16
|
+
export declare const tagInteractiveClassName = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus";
|
|
17
|
+
/**
|
|
18
|
+
* Hover and active step of a clickable tag — one accent tint for every
|
|
19
|
+
* appearance and both selections, as the 2.0 overlay rows do. A selected tag
|
|
20
|
+
* must not read as hovered at rest, and the label is left alone, so an
|
|
21
|
+
* unselected one never darkens into looking selected.
|
|
22
|
+
*/
|
|
23
|
+
export declare const tagHoverClassName = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
|