diff --git a/changelog.txt b/changelog.txt
new file mode 100644
index 00000000..98f2edaa
--- /dev/null
+++ b/changelog.txt
@@ -0,0 +1,8 @@
+Version 0.0.3 - 2nd October, 2024
+- New - Breadcrumb
+- New - Grid Container
+- New - Dialog Component
+- New - Drawer Component
+- New - Menu & Menu Item Component
+- New - Sidebar
+- New - Topbar
\ No newline at end of file
diff --git a/dist/force-ui-rtl.css b/dist/force-ui-rtl.css
new file mode 100644
index 00000000..1e08e621
--- /dev/null
+++ b/dist/force-ui-rtl.css
@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-ms-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@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{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.-inset-1{inset:-.25rem}.inset-0{inset:0}.inset-x-0{right:0;left:0}.inset-y-0{bottom:0;top:0}.-bottom-px{bottom:-1px}.bottom-0{bottom:0}.left-0{right:0}.left-1{right:.25rem}.left-2\/4{right:50%}.left-\[calc\(50\%\+10px\)\]{right:calc(50% + 10px)}.left-\[calc\(50\%\+12px\)\]{right:calc(50% + 12px)}.left-\[calc\(50\%\+14px\)\]{right:calc(50% + 14px)}.right-0{left:0}.right-3{left:.75rem}.right-4{left:1rem}.right-\[calc\(-50\%\+10px\)\]{left:calc(-50% + 10px)}.right-\[calc\(-50\%\+12px\)\]{left:calc(-50% + 12px)}.right-\[calc\(-50\%\+14px\)\]{left:calc(-50% + 14px)}.top-0{top:0}.top-2\.5{top:.625rem}.top-2\/4{top:50%}.top-3{top:.75rem}.top-3\.5{top:.875rem}.top-4{top:1rem}.top-full{top:100%}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.z-999999{z-index:999999}.order-1{-ms-flex-order:1;order:1}.order-10{-ms-flex-order:10;order:10}.order-11{-ms-flex-order:11;order:11}.order-12{-ms-flex-order:12;order:12}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-9{-ms-flex-order:9;order:9}.order-first{-ms-flex-order:-9999;order:-9999}.order-last{-ms-flex-order:9999;order:9999}.order-none{-ms-flex-order:0;order:0}.col-span-1{grid-column:span 1/span 1}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-start-1{grid-column-start:1}.col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6}.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9}.m-0{margin:0}.mx-0{margin-right:0;margin-left:0}.mx-1{margin-right:.25rem;margin-left:.25rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.mx-5{margin-right:1.25rem;margin-left:1.25rem}.my-0{margin-bottom:0;margin-top:0}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.mb-0{margin-bottom:0}.ml-0{margin-right:0}.ml-1{margin-right:.25rem}.ml-10{margin-right:2.5rem}.ml-3{margin-right:.75rem}.ml-4{margin-right:1rem}.mr-1{margin-left:.25rem}.mr-10{margin-left:2.5rem}.mr-2{margin-left:.5rem}.mr-\[2px\]{margin-left:2px}.mr-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-\[2px\]{margin-top:2px}.mt-\[4px\]{margin-top:4px}.mt-auto{margin-top:auto}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:-ms-flexbox;display:flex}.inline-flex{display:-ms-inline-flexbox;display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-1\.5{height:.375rem;width:.375rem}.size-10{height:2.5rem;width:2.5rem}.size-2{height:.5rem;width:.5rem}.size-2\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-5{height:1.25rem;width:1.25rem}.size-6{height:1.5rem;width:1.5rem}.size-7{height:1.75rem;width:1.75rem}.h-0{height:0}.h-10{height:2.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[600px\]{height:600px}.h-auto{height:auto}.h-fit{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-\[10\.75rem\]{max-height:10.75rem}.max-h-\[13\.5rem\]{max-height:13.5rem}.min-h-16{min-height:4rem}.min-h-\[1\.625rem\]{min-height:1.625rem}.min-h-\[2\.25rem\]{min-height:2.25rem}.min-h-\[2\.5rem\]{min-height:2.5rem}.min-h-\[3rem\]{min-height:3rem}.min-h-full{min-height:100%}.w-0{width:0}.w-1\/10{width:10%}.w-1\/11{width:9.0909091%}.w-1\/12{width:8.3333333%}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-1\/4{width:25%}.w-1\/5{width:20%}.w-1\/6{width:16.666667%}.w-1\/7{width:14.2857143%}.w-1\/8{width:12.5%}.w-1\/9{width:11.1111111%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-120{width:30rem}.w-16{width:4rem}.w-24{width:6rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-96{width:24rem}.w-\[22\.5rem\]{width:22.5rem}.w-fit{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\[180px\]{min-width:180px}.max-w-32{max-width:8rem}.max-w-80,.max-w-xs{max-width:20rem}.flex-1{-ms-flex:1 1 0%;flex:1 1 0%}.shrink{-ms-flex-negative:1;flex-shrink:1}.shrink-0{-ms-flex-negative:0;flex-shrink:0}.grow{-ms-flex-positive:1;flex-grow:1}.grow-0{-ms-flex-positive:0;flex-grow:0}.origin-left{-webkit-transform-origin:right;transform-origin:right}.-translate-x-2\/4{--tw-translate-x:-50%}.-translate-x-2\/4,.-translate-y-2\/4{-webkit-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));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))}.-translate-y-2\/4{--tw-translate-y:-50%}.transform{-webkit-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));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))}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.animate-pulse{-webkit-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@-webkit-keyframes spin{to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes spin{to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}.animate-spin{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;appearance:none}.auto-cols-auto{grid-auto-columns:auto}.grid-flow-row{grid-auto-flow:row}.grid-flow-col{grid-auto-flow:column}.grid-flow-row-dense{grid-auto-flow:row dense}.grid-flow-col-dense{grid-auto-flow:column dense}.auto-rows-auto{grid-auto-rows:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,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))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-subgrid{grid-template-columns:subgrid}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.grid-rows-subgrid{grid-template-rows:subgrid}.flex-row{-ms-flex-direction:row;flex-direction:row}.flex-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flex-col{-ms-flex-direction:column;flex-direction:column}.flex-col-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.items-start{-ms-flex-align:start;align-items:flex-start}.items-end{-ms-flex-align:end;align-items:flex-end}.items-center{-ms-flex-align:center;align-items:center}.items-baseline{-ms-flex-align:baseline;align-items:baseline}.items-stretch{-ms-flex-align:stretch;align-items:stretch}.justify-normal{-ms-flex-pack:normal;justify-content:normal}.justify-start{-ms-flex-pack:start;justify-content:flex-start}.justify-end{-ms-flex-pack:end;justify-content:flex-end}.justify-center{-ms-flex-pack:center;justify-content:center}.justify-between{-ms-flex-pack:justify;justify-content:space-between}.justify-around{-ms-flex-pack:distribute;justify-content:space-around}.justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.justify-stretch{-ms-flex-pack:stretch;justify-content:stretch}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-2{-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-4{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-webkit-column-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.gap-y-2{row-gap:.5rem}.gap-y-4{row-gap:1rem}.gap-y-5{row-gap:1.25rem}.gap-y-6{row-gap:1.5rem}.gap-y-8{row-gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-left:calc(.25rem*var(--tw-space-x-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.divide-x-0>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(0px*(1 - var(--tw-divide-x-reverse)));border-left-width:calc(0px*var(--tw-divide-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.divide-border-subtle>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.self-start{-ms-flex-item-align:start;align-self:flex-start}.self-end{-ms-flex-item-align:end;align-self:flex-end}.self-center{-ms-flex-item-align:center;align-self:center}.self-stretch{-ms-flex-item-align:stretch;align-self:stretch}.self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.justify-self-auto{justify-self:auto}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.justify-self-stretch{justify-self:stretch}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.rounded{border-radius:.25rem}.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-bl{border-bottom-right-radius:.25rem}.rounded-br{border-bottom-left-radius:.25rem}.rounded-tl{border-top-right-radius:.25rem}.rounded-tr{border-top-left-radius:.25rem}.border{border-width:1px}.border-0{border-width:0}.border-4{border-width:4px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l-0{border-right-width:0}.border-r{border-left-width:1px}.border-r-0{border-left-width:0}.border-t{border-top-width:1px}.border-t-0{border-top-width:0}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-double{border-style:double}.border-hidden{border-style:hidden}.border-none{border-style:none}.border-alert-border-danger{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.border-alert-border-green{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity))}.border-alert-border-info{--tw-border-opacity:1;border-color:rgb(186 230 253/var(--tw-border-opacity))}.border-alert-border-neutral{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-alert-border-warning{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity))}.border-background-inverse{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity))}.border-badge-border-disabled,.border-badge-border-gray{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-badge-border-green{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity))}.border-badge-border-red{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.border-badge-border-sky{--tw-border-opacity:1;border-color:rgb(186 230 253/var(--tw-border-opacity))}.border-badge-border-yellow{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity))}.border-border-disabled{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-border-strong{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.border-border-subtle{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-border-transparent-subtle{border-color:#37415114}.border-border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-brand-primary-600{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.border-button-danger{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-button-primary{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.border-button-secondary{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity))}.border-field-border{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-field-border-disabled{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-tab-border{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-text-inverse{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-toggle-off-border{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-alert-background-danger{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-alert-background-green{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-alert-background-info{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity))}.bg-alert-background-neutral{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-alert-background-warning{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.bg-background-brand{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-background-inverse{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-background-inverse\/90{background-color:rgba(17,24,39,.9)}.bg-background-primary{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-background-secondary,.bg-badge-background-disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-badge-background-gray{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-badge-background-green{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-badge-background-red{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-badge-background-sky{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity))}.bg-badge-background-yellow{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-border-interactive{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-brand-background-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-brand-primary-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-button-danger{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-button-disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-button-primary{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-button-secondary{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-button-tertiary{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-button-tertiary-hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-current{background-color:currentColor}.bg-field-background-disabled{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-field-background-error{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-field-secondary-background{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-misc-progress-background{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-tab-background{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-text-tertiary{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-toggle-dial-background{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-toggle-off{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-toggle-off-disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-tooltip-background-dark{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-tooltip-background-light{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.fill-current{fill:currentColor}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.px-1\.5{padding-right:.375rem;padding-left:.375rem}.px-2{padding-right:.5rem;padding-left:.5rem}.px-2\.5{padding-right:.625rem;padding-left:.625rem}.px-3{padding-right:.75rem;padding-left:.75rem}.px-3\.5{padding-right:.875rem;padding-left:.875rem}.px-4{padding-right:1rem;padding-left:1rem}.px-5{padding-right:1.25rem;padding-left:1.25rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.pb-1{padding-bottom:.25rem}.pl-10{padding-right:2.5rem}.pl-2{padding-right:.5rem}.pl-2\.5{padding-right:.625rem}.pl-3{padding-right:.75rem}.pl-8{padding-right:2rem}.pl-9{padding-right:2.25rem}.pr-10{padding-left:2.5rem}.pr-12{padding-left:3rem}.pr-2{padding-left:.5rem}.pr-2\.5{padding-left:.625rem}.pr-3{padding-left:.75rem}.pr-8{padding-left:2rem}.pr-9{padding-left:2.25rem}.pt-5{padding-top:1.25rem}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.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}.text-tiny{font-size:.625rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-none{line-height:1}.text-background-primary{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-badge-color-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-badge-color-gray{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-badge-color-green{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.text-badge-color-red{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.text-badge-color-sky{--tw-text-opacity:1;color:rgb(3 105 161/var(--tw-text-opacity))}.text-badge-color-yellow{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity))}.text-border-strong{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-brand-primary-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-button-danger{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-button-primary{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-button-tertiary-color{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-field-color-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-field-helper{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-field-input,.text-field-label{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-field-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-icon-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-icon-inverse{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-icon-on-color-disabled{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-icon-primary{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-icon-secondary{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-link-primary{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-support-error{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-support-error-inverse{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity))}.text-support-info{--tw-text-opacity:1;color:rgb(2 132 199/var(--tw-text-opacity))}.text-support-info-inverse{--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity))}.text-support-success{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-support-success-inverse{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-support-warning{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity))}.text-support-warning-inverse{--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity))}.text-text-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-text-inverse,.text-text-on-color{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-text-primary{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-text-secondary{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-text-tertiary{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-tooltip-background-dark{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-tooltip-background-light,.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.placeholder-text-tertiary::-webkit-input-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-text-tertiary:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-text-tertiary::-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-text-tertiary::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.opacity-0{opacity:0}.opacity-50{opacity:.5}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.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 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px 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 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-soft-shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-soft-shadow-2xl{--tw-shadow:0px 24px 64px -12px rgba(149,160,178,.32);--tw-shadow-colored:0px 24px 64px -12px var(--tw-shadow-color)}.shadow-soft-shadow-lg{--tw-shadow:0px 12px 32px -12px rgba(149,160,178,.24);--tw-shadow-colored:0px 12px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.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-border-interactive{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.ring-border-subtle{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.ring-brand-primary-600{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.ring-offset-0{--tw-ring-offset-width:0px}.filter{-webkit-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);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)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\[box-shadow\2c color\2c background-color\]{transition-duration:.15s;transition-property:box-shadow,color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}.\[grid-area\:1\/1\/2\/3\]{grid-area:1/1/2/3}.file\:border-0::-webkit-file-upload-button{border-width:0}.file\:border-0::file-selector-button{border-width:0}.file\:bg-transparent::-webkit-file-upload-button{background-color:transparent}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-text-tertiary::-webkit-file-upload-button{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.file\:text-text-tertiary::file-selector-button{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.placeholder\:text-field-placeholder::-webkit-input-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.placeholder\:text-field-placeholder:-ms-input-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.placeholder\:text-field-placeholder::-ms-input-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.placeholder\:text-field-placeholder::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:left-2\/4:before{content:var(--tw-content);right:50%}.before\:top-2\/4:before{content:var(--tw-content);top:50%}.before\:hidden:before{content:var(--tw-content);display:none}.before\:h-10:before{content:var(--tw-content);height:2.5rem}.before\:w-10:before{content:var(--tw-content);width:2.5rem}.before\:-translate-x-2\/4:before{--tw-translate-x:-50%}.before\:-translate-x-2\/4:before,.before\:-translate-y-2\/4:before{content:var(--tw-content);-webkit-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));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))}.before\:-translate-y-2\/4:before{--tw-translate-y:-50%}.before\:rounded-full:before{border-radius:9999px;content:var(--tw-content)}.before\:opacity-0:before{content:var(--tw-content);opacity:0}.before\:transition-opacity:before{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.after\:ml-0\.5:after{content:var(--tw-content);margin-right:.125rem}.after\:text-field-required:after{content:var(--tw-content);--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.after\:content-\[\'\*\'\]:after{--tw-content:"*";content:var(--tw-content)}.first\:rounded-bl:first-child{border-bottom-right-radius:.25rem}.first\:rounded-tl:first-child{border-top-right-radius:.25rem}.first\:border-0:first-child{border-width:0}.first\:border-r:first-child{border-left-width:1px}.first\:border-border-subtle:first-child{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.last\:rounded-br:last-child{border-bottom-left-radius:.25rem}.last\:rounded-tr:last-child{border-top-left-radius:.25rem}.last\:border-0:last-child{border-width:0}.checked\:border-border-interactive:checked{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.checked\:border-toggle-on-border:checked{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.checked\:bg-toggle-on:checked{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.checked\:\[background-image\:none\]:checked{background-image:none}.checked\:before\:hidden:checked:before{content:var(--tw-content);display:none}.checked\:before\:content-\[\'\'\]:checked:before{--tw-content:"";content:var(--tw-content)}.focus-within\:z-10:focus-within{z-index:10}.focus-within\:\!border-focus-border:focus-within{--tw-border-opacity:1!important;border-color:rgb(191 219 254/var(--tw-border-opacity))!important}.focus-within\:ring-2:focus-within{--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-within\:ring-focus:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width:2px}.hover\:border-border-disabled:hover{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.hover\:border-border-interactive:hover{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.hover\:border-border-strong:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.hover\:border-border-subtle:hover{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.hover\:border-button-danger:hover{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.hover\:border-button-danger-hover:hover{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.hover\:border-button-primary:hover{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.hover\:border-button-primary-hover:hover{--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity))}.hover\:border-button-secondary-hover:hover{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}.hover\:border-field-border-disabled:hover{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.hover\:border-text-inverse:hover{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.hover\:bg-background-secondary:hover,.hover\:bg-badge-hover-disabled:hover,.hover\:bg-badge-hover-gray:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-badge-hover-green:hover{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.hover\:bg-badge-hover-red:hover{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.hover\:bg-badge-hover-sky:hover{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity))}.hover\:bg-badge-hover-yellow:hover{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.hover\:bg-button-danger-hover:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.hover\:bg-button-primary-hover:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\:bg-button-secondary-hover:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:bg-button-tertiary-hover:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-field-background-error:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.hover\:bg-toggle-off-hover:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.hover\:bg-transparent:hover{background-color:transparent}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\:text-button-danger-secondary:hover{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.hover\:text-button-primary-hover:hover,.hover\:text-link-primary-hover:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.hover\:text-text-disabled:hover{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.hover\:text-text-inverse:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:text-text-primary:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:ring-2:hover{--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)}.hover\:ring-border-interactive:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.hover\:before\:opacity-10:hover:before{content:var(--tw-content);opacity:.1}.checked\:hover\:border-toggle-on-hover:hover:checked{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.checked\:hover\:bg-toggle-on-hover:hover:checked{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.focus\:rounded-sm:focus{border-radius:.125rem}.focus\:border-border-interactive:focus{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.focus\:border-focus-border:focus{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.focus\:border-focus-error-border:focus{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.focus\:border-toggle-off-border:focus{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.focus\:shadow-none:focus{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring: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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-0: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(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1: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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.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)}.focus\:ring-border-interactive:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.focus\:ring-field-color-error:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(220 38 38/var(--tw-ring-opacity))}.focus\:ring-focus:focus,.focus\:ring-toggle-on:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.focus\:ring-offset-0:focus{--tw-ring-offset-width:0px}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-4:focus{--tw-ring-offset-width:4px}.checked\:focus\:border-toggle-on-border:focus:checked{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.active\:outline-none:active{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-border-disabled:disabled{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.disabled\:border-button-disabled:disabled,.disabled\:border-field-border-disabled:disabled{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.disabled\:border-transparent:disabled{border-color:transparent}.disabled\:bg-button-disabled:disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.disabled\:bg-button-tertiary:disabled,.disabled\:bg-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.disabled\:text-text-disabled:disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.checked\:disabled\:border-border-disabled:disabled:checked{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.checked\:disabled\:bg-white:disabled:checked{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group:hover .group-hover\:text-text-primary{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.group:disabled .group-disabled\:text-field-color-disabled,.group:disabled .group-disabled\:text-icon-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.peer:checked~.peer-checked\:translate-x-4{--tw-translate-x:1rem}.peer:checked~.peer-checked\:translate-x-4,.peer:checked~.peer-checked\:translate-x-5{-webkit-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));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))}.peer:checked~.peer-checked\:translate-x-5{--tw-translate-x:1.25rem}.peer:checked~.peer-checked\:opacity-100{opacity:1}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:text-border-disabled{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}@media (min-width:768px){.md\:order-1{-ms-flex-order:1;order:1}.md\:order-10{-ms-flex-order:10;order:10}.md\:order-11{-ms-flex-order:11;order:11}.md\:order-12{-ms-flex-order:12;order:12}.md\:order-2{-ms-flex-order:2;order:2}.md\:order-3{-ms-flex-order:3;order:3}.md\:order-4{-ms-flex-order:4;order:4}.md\:order-5{-ms-flex-order:5;order:5}.md\:order-6{-ms-flex-order:6;order:6}.md\:order-7{-ms-flex-order:7;order:7}.md\:order-8{-ms-flex-order:8;order:8}.md\:order-9{-ms-flex-order:9;order:9}.md\:order-first{-ms-flex-order:-9999;order:-9999}.md\:order-last{-ms-flex-order:9999;order:9999}.md\:order-none{-ms-flex-order:0;order:0}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-10{grid-column:span 10/span 10}.md\:col-span-11{grid-column:span 11/span 11}.md\:col-span-12{grid-column:span 12/span 12}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-6{grid-column:span 6/span 6}.md\:col-span-7{grid-column:span 7/span 7}.md\:col-span-8{grid-column:span 8/span 8}.md\:col-span-9{grid-column:span 9/span 9}.md\:col-start-1{grid-column-start:1}.md\:col-start-10{grid-column-start:10}.md\:col-start-11{grid-column-start:11}.md\:col-start-12{grid-column-start:12}.md\:col-start-2{grid-column-start:2}.md\:col-start-3{grid-column-start:3}.md\:col-start-4{grid-column-start:4}.md\:col-start-5{grid-column-start:5}.md\:col-start-6{grid-column-start:6}.md\:col-start-7{grid-column-start:7}.md\:col-start-8{grid-column-start:8}.md\:col-start-9{grid-column-start:9}.md\:w-1\/10{width:10%}.md\:w-1\/11{width:9.0909091%}.md\:w-1\/12{width:8.3333333%}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.333333%}.md\:w-1\/4{width:25%}.md\:w-1\/5{width:20%}.md\:w-1\/6{width:16.666667%}.md\:w-1\/7{width:14.2857143%}.md\:w-1\/8{width:12.5%}.md\:w-1\/9{width:11.1111111%}.md\:w-full{width:100%}.md\:shrink{-ms-flex-negative:1;flex-shrink:1}.md\:shrink-0{-ms-flex-negative:0;flex-shrink:0}.md\:grow{-ms-flex-positive:1;flex-grow:1}.md\:grow-0{-ms-flex-positive:0;flex-grow:0}.md\:grid-flow-row{grid-auto-flow:row}.md\:grid-flow-col{grid-auto-flow:column}.md\:grid-flow-row-dense{grid-auto-flow:row dense}.md\:grid-flow-col-dense{grid-auto-flow:column dense}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.md\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.md\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.md\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.md\:flex-row{-ms-flex-direction:row;flex-direction:row}.md\:flex-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.md\:flex-col{-ms-flex-direction:column;flex-direction:column}.md\:flex-col-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.md\:flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.md\:flex-wrap-reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.md\:flex-nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.md\:items-start{-ms-flex-align:start;align-items:flex-start}.md\:items-end{-ms-flex-align:end;align-items:flex-end}.md\:items-center{-ms-flex-align:center;align-items:center}.md\:items-baseline{-ms-flex-align:baseline;align-items:baseline}.md\:items-stretch{-ms-flex-align:stretch;align-items:stretch}.md\:justify-normal{-ms-flex-pack:normal;justify-content:normal}.md\:justify-start{-ms-flex-pack:start;justify-content:flex-start}.md\:justify-end{-ms-flex-pack:end;justify-content:flex-end}.md\:justify-center{-ms-flex-pack:center;justify-content:center}.md\:justify-between{-ms-flex-pack:justify;justify-content:space-between}.md\:justify-around{-ms-flex-pack:distribute;justify-content:space-around}.md\:justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.md\:justify-stretch{-ms-flex-pack:stretch;justify-content:stretch}.md\:gap-2{gap:.5rem}.md\:gap-4{gap:1rem}.md\:gap-5{gap:1.25rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:gap-x-2{-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem}.md\:gap-x-4{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.md\:gap-x-5{-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}.md\:gap-x-6{-webkit-column-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}.md\:gap-x-8{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.md\:gap-y-2{row-gap:.5rem}.md\:gap-y-4{row-gap:1rem}.md\:gap-y-5{row-gap:1.25rem}.md\:gap-y-6{row-gap:1.5rem}.md\:gap-y-8{row-gap:2rem}.md\:space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-left:calc(.25rem*var(--tw-space-x-reverse))}.md\:self-start{-ms-flex-item-align:start;align-self:flex-start}.md\:self-end{-ms-flex-item-align:end;align-self:flex-end}.md\:self-center{-ms-flex-item-align:center;align-self:center}.md\:self-stretch{-ms-flex-item-align:stretch;align-self:stretch}.md\:self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.md\:justify-self-auto{justify-self:auto}.md\:justify-self-start{justify-self:start}.md\:justify-self-end{justify-self:end}.md\:justify-self-center{justify-self:center}.md\:justify-self-stretch{justify-self:stretch}}@media (min-width:1024px){.lg\:order-1{-ms-flex-order:1;order:1}.lg\:order-10{-ms-flex-order:10;order:10}.lg\:order-11{-ms-flex-order:11;order:11}.lg\:order-12{-ms-flex-order:12;order:12}.lg\:order-2{-ms-flex-order:2;order:2}.lg\:order-3{-ms-flex-order:3;order:3}.lg\:order-4{-ms-flex-order:4;order:4}.lg\:order-5{-ms-flex-order:5;order:5}.lg\:order-6{-ms-flex-order:6;order:6}.lg\:order-7{-ms-flex-order:7;order:7}.lg\:order-8{-ms-flex-order:8;order:8}.lg\:order-9{-ms-flex-order:9;order:9}.lg\:order-first{-ms-flex-order:-9999;order:-9999}.lg\:order-last{-ms-flex-order:9999;order:9999}.lg\:order-none{-ms-flex-order:0;order:0}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-10{grid-column:span 10/span 10}.lg\:col-span-11{grid-column:span 11/span 11}.lg\:col-span-12{grid-column:span 12/span 12}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:col-span-9{grid-column:span 9/span 9}.lg\:col-start-1{grid-column-start:1}.lg\:col-start-10{grid-column-start:10}.lg\:col-start-11{grid-column-start:11}.lg\:col-start-12{grid-column-start:12}.lg\:col-start-2{grid-column-start:2}.lg\:col-start-3{grid-column-start:3}.lg\:col-start-4{grid-column-start:4}.lg\:col-start-5{grid-column-start:5}.lg\:col-start-6{grid-column-start:6}.lg\:col-start-7{grid-column-start:7}.lg\:col-start-8{grid-column-start:8}.lg\:col-start-9{grid-column-start:9}.lg\:w-1\/10{width:10%}.lg\:w-1\/11{width:9.0909091%}.lg\:w-1\/12{width:8.3333333%}.lg\:w-1\/2{width:50%}.lg\:w-1\/3{width:33.333333%}.lg\:w-1\/4{width:25%}.lg\:w-1\/5{width:20%}.lg\:w-1\/6{width:16.666667%}.lg\:w-1\/7{width:14.2857143%}.lg\:w-1\/8{width:12.5%}.lg\:w-1\/9{width:11.1111111%}.lg\:w-\[47\.5rem\]{width:47.5rem}.lg\:w-full{width:100%}.lg\:shrink{-ms-flex-negative:1;flex-shrink:1}.lg\:shrink-0{-ms-flex-negative:0;flex-shrink:0}.lg\:grow{-ms-flex-positive:1;flex-grow:1}.lg\:grow-0{-ms-flex-positive:0;flex-grow:0}.lg\:grid-flow-row{grid-auto-flow:row}.lg\:grid-flow-col{grid-auto-flow:column}.lg\:grid-flow-row-dense{grid-auto-flow:row dense}.lg\:grid-flow-col-dense{grid-auto-flow:column dense}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.lg\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.lg\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.lg\:flex-row{-ms-flex-direction:row;flex-direction:row}.lg\:flex-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.lg\:flex-col{-ms-flex-direction:column;flex-direction:column}.lg\:flex-col-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.lg\:flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.lg\:flex-wrap-reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.lg\:flex-nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.lg\:items-start{-ms-flex-align:start;align-items:flex-start}.lg\:items-end{-ms-flex-align:end;align-items:flex-end}.lg\:items-center{-ms-flex-align:center;align-items:center}.lg\:items-baseline{-ms-flex-align:baseline;align-items:baseline}.lg\:items-stretch{-ms-flex-align:stretch;align-items:stretch}.lg\:justify-normal{-ms-flex-pack:normal;justify-content:normal}.lg\:justify-start{-ms-flex-pack:start;justify-content:flex-start}.lg\:justify-end{-ms-flex-pack:end;justify-content:flex-end}.lg\:justify-center{-ms-flex-pack:center;justify-content:center}.lg\:justify-between{-ms-flex-pack:justify;justify-content:space-between}.lg\:justify-around{-ms-flex-pack:distribute;justify-content:space-around}.lg\:justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.lg\:justify-stretch{-ms-flex-pack:stretch;justify-content:stretch}.lg\:gap-2{gap:.5rem}.lg\:gap-4{gap:1rem}.lg\:gap-5{gap:1.25rem}.lg\:gap-6{gap:1.5rem}.lg\:gap-8{gap:2rem}.lg\:gap-x-2{-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem}.lg\:gap-x-4{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.lg\:gap-x-5{-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}.lg\:gap-x-6{-webkit-column-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}.lg\:gap-x-8{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.lg\:gap-y-2{row-gap:.5rem}.lg\:gap-y-4{row-gap:1rem}.lg\:gap-y-5{row-gap:1.25rem}.lg\:gap-y-6{row-gap:1.5rem}.lg\:gap-y-8{row-gap:2rem}.lg\:self-start{-ms-flex-item-align:start;align-self:flex-start}.lg\:self-end{-ms-flex-item-align:end;align-self:flex-end}.lg\:self-center{-ms-flex-item-align:center;align-self:center}.lg\:self-stretch{-ms-flex-item-align:stretch;align-self:stretch}.lg\:self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.lg\:justify-self-auto{justify-self:auto}.lg\:justify-self-start{justify-self:start}.lg\:justify-self-end{justify-self:end}.lg\:justify-self-center{justify-self:center}.lg\:justify-self-stretch{justify-self:stretch}}.\[\&\:hover\:has\(\:disabled\)\]\:border-field-border-disabled:hover:has(:disabled){--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.\[\&\:hover\:not\(\:focus\)\:not\(\:disabled\)\]\:border-border-strong:hover:not(:focus):not(:disabled){--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.\[\&\>\*\:not\(svg\)\]\:m-1>:not(svg){margin:.25rem}.\[\&\>\*\:not\(svg\)\]\:mx-1>:not(svg){margin-right:.25rem;margin-left:.25rem}.\[\&\>\*\:not\(svg\)\]\:my-0\.5>:not(svg){margin-bottom:.125rem;margin-top:.125rem}.\[\&\>\*\]\:box-border>*{box-sizing:border-box}.\[\&\>\*\]\:text-2xl>*{font-size:1.5rem;line-height:2rem}.\[\&\>\*\]\: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}.\[\&\>\*\]\:text-xl>*{font-size:1.25rem;line-height:1.75rem}.\[\&\>\*\]\:text-xs>*{font-size:.75rem;line-height:1rem}.\[\&\>\*\]\:text-field-color-disabled>*{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.\[\&\>\*\]\:text-field-helper>*{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.\[\&\>\*\]\:text-field-label>*{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.\[\&\>\*\]\:text-support-error>*{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.\[\&\>li\]\:pointer-events-auto>li{pointer-events:auto}.\[\&\>p\]\:m-0>p{margin:0}.\[\&\>p\]\:w-full>p{width:100%}.\[\&\>span\:first-child\]\:shrink-0>span:first-child{-ms-flex-negative:0;flex-shrink:0}.\[\&\>svg\]\:m-1>svg{margin:.25rem}.\[\&\>svg\]\:m-1\.5>svg{margin:.375rem}.\[\&\>svg\]\:block>svg{display:block}.\[\&\>svg\]\:size-3\.5>svg{height:.875rem;width:.875rem}.\[\&\>svg\]\:size-4>svg{height:1rem;width:1rem}.\[\&\>svg\]\:size-5>svg{height:1.25rem;width:1.25rem}.\[\&\>svg\]\:size-6>svg{height:1.5rem;width:1.5rem}.\[\&\>svg\]\:h-3>svg{height:.75rem}.\[\&\>svg\]\:h-4>svg{height:1rem}.\[\&\>svg\]\:h-5>svg{height:1.25rem}.\[\&\>svg\]\:h-6>svg{height:1.5rem}.\[\&\>svg\]\:h-8>svg{height:2rem}.\[\&\>svg\]\:w-3>svg{width:.75rem}.\[\&\>svg\]\:w-4>svg{width:1rem}.\[\&\>svg\]\:w-5>svg{width:1.25rem}.\[\&\>svg\]\:w-6>svg{width:1.5rem}.\[\&\>svg\]\:w-8>svg{width:2rem}.\[\&\>svg\]\:shrink-0>svg{-ms-flex-negative:0;flex-shrink:0}.\[\&\>svg\]\:text-icon-interactive>svg{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.\[\&_\*\]\:box-border *{box-sizing:border-box}.\[\&_\*\]\:font-sans *{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.\[\&_\*\]\:text-sm *{font-size:.875rem}.\[\&_\*\]\:leading-5 *,.\[\&_\*\]\:text-sm *{line-height:1.25rem}.\[\&_\.editor-content\>p\]\:text-sm .editor-content>p{font-size:.875rem;line-height:1.25rem}.\[\&_\.editor-content\>p\]\:font-medium .editor-content>p{font-weight:500}.\[\&_\.editor-content\>p\]\:leading-\[1\.625rem\] .editor-content>p{line-height:1.625rem}.\[\&_\.editor-content\>p\]\:leading-\[1\.6875rem\] .editor-content>p{line-height:1.6875rem}.\[\&_p\]\:m-0 p{margin:0}.\[\&_p\]\:text-badge-color-disabled p{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.\[\&_svg\]\:size-3 svg{height:.75rem;width:.75rem}.\[\&_svg\]\:size-4 svg{height:1rem;width:1rem}.\[\&_svg\]\:size-5 svg{height:1.25rem;width:1.25rem}.\[\&_svg\]\:size-6 svg{height:1.5rem;width:1.5rem}
diff --git a/dist/force-ui.asset.php b/dist/force-ui.asset.php
new file mode 100644
index 00000000..a52da886
--- /dev/null
+++ b/dist/force-ui.asset.php
@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => 'f718ae3dbb342ac9c15d');
diff --git a/dist/force-ui.css b/dist/force-ui.css
new file mode 100644
index 00000000..e43c8c74
--- /dev/null
+++ b/dist/force-ui.css
@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-ms-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@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{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.-inset-1{inset:-.25rem}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{bottom:0;top:0}.-bottom-px{bottom:-1px}.bottom-0{bottom:0}.left-0{left:0}.left-1{left:.25rem}.left-2\/4{left:50%}.left-\[calc\(50\%\+10px\)\]{left:calc(50% + 10px)}.left-\[calc\(50\%\+12px\)\]{left:calc(50% + 12px)}.left-\[calc\(50\%\+14px\)\]{left:calc(50% + 14px)}.right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.right-\[calc\(-50\%\+10px\)\]{right:calc(-50% + 10px)}.right-\[calc\(-50\%\+12px\)\]{right:calc(-50% + 12px)}.right-\[calc\(-50\%\+14px\)\]{right:calc(-50% + 14px)}.top-0{top:0}.top-2\.5{top:.625rem}.top-2\/4{top:50%}.top-3{top:.75rem}.top-3\.5{top:.875rem}.top-4{top:1rem}.top-full{top:100%}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.z-999999{z-index:999999}.order-1{-ms-flex-order:1;order:1}.order-10{-ms-flex-order:10;order:10}.order-11{-ms-flex-order:11;order:11}.order-12{-ms-flex-order:12;order:12}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-9{-ms-flex-order:9;order:9}.order-first{-ms-flex-order:-9999;order:-9999}.order-last{-ms-flex-order:9999;order:9999}.order-none{-ms-flex-order:0;order:0}.col-span-1{grid-column:span 1/span 1}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-start-1{grid-column-start:1}.col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6}.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9}.m-0{margin:0}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-0{margin-bottom:0;margin-top:0}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-10{margin-left:2.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.mr-1{margin-right:.25rem}.mr-10{margin-right:2.5rem}.mr-2{margin-right:.5rem}.mr-\[2px\]{margin-right:2px}.mr-auto{margin-right:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-\[2px\]{margin-top:2px}.mt-\[4px\]{margin-top:4px}.mt-auto{margin-top:auto}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:-ms-flexbox;display:flex}.inline-flex{display:-ms-inline-flexbox;display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-1\.5{height:.375rem;width:.375rem}.size-10{height:2.5rem;width:2.5rem}.size-2{height:.5rem;width:.5rem}.size-2\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-5{height:1.25rem;width:1.25rem}.size-6{height:1.5rem;width:1.5rem}.size-7{height:1.75rem;width:1.75rem}.h-0{height:0}.h-10{height:2.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[600px\]{height:600px}.h-auto{height:auto}.h-fit{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-\[10\.75rem\]{max-height:10.75rem}.max-h-\[13\.5rem\]{max-height:13.5rem}.min-h-16{min-height:4rem}.min-h-\[1\.625rem\]{min-height:1.625rem}.min-h-\[2\.25rem\]{min-height:2.25rem}.min-h-\[2\.5rem\]{min-height:2.5rem}.min-h-\[3rem\]{min-height:3rem}.min-h-full{min-height:100%}.w-0{width:0}.w-1\/10{width:10%}.w-1\/11{width:9.0909091%}.w-1\/12{width:8.3333333%}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-1\/4{width:25%}.w-1\/5{width:20%}.w-1\/6{width:16.666667%}.w-1\/7{width:14.2857143%}.w-1\/8{width:12.5%}.w-1\/9{width:11.1111111%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-120{width:30rem}.w-16{width:4rem}.w-24{width:6rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-96{width:24rem}.w-\[22\.5rem\]{width:22.5rem}.w-fit{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\[180px\]{min-width:180px}.max-w-32{max-width:8rem}.max-w-80,.max-w-xs{max-width:20rem}.flex-1{-ms-flex:1 1 0%;flex:1 1 0%}.shrink{-ms-flex-negative:1;flex-shrink:1}.shrink-0{-ms-flex-negative:0;flex-shrink:0}.grow{-ms-flex-positive:1;flex-grow:1}.grow-0{-ms-flex-positive:0;flex-grow:0}.origin-left{-webkit-transform-origin:left;transform-origin:left}.-translate-x-2\/4{--tw-translate-x:-50%}.-translate-x-2\/4,.-translate-y-2\/4{-webkit-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));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))}.-translate-y-2\/4{--tw-translate-y:-50%}.transform{-webkit-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));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))}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.animate-pulse{-webkit-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@-webkit-keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.animate-spin{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;appearance:none}.auto-cols-auto{grid-auto-columns:auto}.grid-flow-row{grid-auto-flow:row}.grid-flow-col{grid-auto-flow:column}.grid-flow-row-dense{grid-auto-flow:row dense}.grid-flow-col-dense{grid-auto-flow:column dense}.auto-rows-auto{grid-auto-rows:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,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))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-subgrid{grid-template-columns:subgrid}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.grid-rows-subgrid{grid-template-rows:subgrid}.flex-row{-ms-flex-direction:row;flex-direction:row}.flex-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flex-col{-ms-flex-direction:column;flex-direction:column}.flex-col-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.items-start{-ms-flex-align:start;align-items:flex-start}.items-end{-ms-flex-align:end;align-items:flex-end}.items-center{-ms-flex-align:center;align-items:center}.items-baseline{-ms-flex-align:baseline;align-items:baseline}.items-stretch{-ms-flex-align:stretch;align-items:stretch}.justify-normal{-ms-flex-pack:normal;justify-content:normal}.justify-start{-ms-flex-pack:start;justify-content:flex-start}.justify-end{-ms-flex-pack:end;justify-content:flex-end}.justify-center{-ms-flex-pack:center;justify-content:center}.justify-between{-ms-flex-pack:justify;justify-content:space-between}.justify-around{-ms-flex-pack:distribute;justify-content:space-around}.justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.justify-stretch{-ms-flex-pack:stretch;justify-content:stretch}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-2{-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-4{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-webkit-column-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.gap-y-2{row-gap:.5rem}.gap-y-4{row-gap:1rem}.gap-y-5{row-gap:1.25rem}.gap-y-6{row-gap:1.5rem}.gap-y-8{row-gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.divide-x-0>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-left-width:calc(0px*(1 - var(--tw-divide-x-reverse)));border-right-width:calc(0px*var(--tw-divide-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.divide-border-subtle>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.self-start{-ms-flex-item-align:start;align-self:flex-start}.self-end{-ms-flex-item-align:end;align-self:flex-end}.self-center{-ms-flex-item-align:center;align-self:center}.self-stretch{-ms-flex-item-align:stretch;align-self:stretch}.self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.justify-self-auto{justify-self:auto}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.justify-self-stretch{justify-self:stretch}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.rounded{border-radius:.25rem}.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-bl{border-bottom-left-radius:.25rem}.rounded-br{border-bottom-right-radius:.25rem}.rounded-tl{border-top-left-radius:.25rem}.rounded-tr{border-top-right-radius:.25rem}.border{border-width:1px}.border-0{border-width:0}.border-4{border-width:4px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l-0{border-left-width:0}.border-r{border-right-width:1px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-0{border-top-width:0}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-double{border-style:double}.border-hidden{border-style:hidden}.border-none{border-style:none}.border-alert-border-danger{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.border-alert-border-green{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity))}.border-alert-border-info{--tw-border-opacity:1;border-color:rgb(186 230 253/var(--tw-border-opacity))}.border-alert-border-neutral{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-alert-border-warning{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity))}.border-background-inverse{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity))}.border-badge-border-disabled,.border-badge-border-gray{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-badge-border-green{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity))}.border-badge-border-red{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.border-badge-border-sky{--tw-border-opacity:1;border-color:rgb(186 230 253/var(--tw-border-opacity))}.border-badge-border-yellow{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity))}.border-border-disabled{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-border-strong{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.border-border-subtle{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-border-transparent-subtle{border-color:#37415114}.border-border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-brand-primary-600{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.border-button-danger{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-button-primary{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.border-button-secondary{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity))}.border-field-border{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-field-border-disabled{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-tab-border{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-text-inverse{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-toggle-off-border{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-alert-background-danger{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-alert-background-green{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-alert-background-info{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity))}.bg-alert-background-neutral{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-alert-background-warning{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.bg-background-brand{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-background-inverse{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-background-inverse\/90{background-color:rgba(17,24,39,.9)}.bg-background-primary{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-background-secondary,.bg-badge-background-disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-badge-background-gray{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-badge-background-green{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-badge-background-red{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-badge-background-sky{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity))}.bg-badge-background-yellow{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-border-interactive{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-brand-background-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-brand-primary-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-button-danger{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-button-disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-button-primary{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-button-secondary{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-button-tertiary{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-button-tertiary-hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-current{background-color:currentColor}.bg-field-background-disabled{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-field-background-error{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-field-secondary-background{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-misc-progress-background{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-tab-background{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-text-tertiary{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-toggle-dial-background{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-toggle-off{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-toggle-off-disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-tooltip-background-dark{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-tooltip-background-light{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.fill-current{fill:currentColor}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.pb-1{padding-bottom:.25rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-3{padding-left:.75rem}.pl-8{padding-left:2rem}.pl-9{padding-left:2.25rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pr-2{padding-right:.5rem}.pr-2\.5{padding-right:.625rem}.pr-3{padding-right:.75rem}.pr-8{padding-right:2rem}.pr-9{padding-right:2.25rem}.pt-5{padding-top:1.25rem}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.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}.text-tiny{font-size:.625rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-none{line-height:1}.text-background-primary{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-badge-color-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-badge-color-gray{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-badge-color-green{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.text-badge-color-red{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.text-badge-color-sky{--tw-text-opacity:1;color:rgb(3 105 161/var(--tw-text-opacity))}.text-badge-color-yellow{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity))}.text-border-strong{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-brand-primary-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-button-danger{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-button-primary{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-button-tertiary-color{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-field-color-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-field-helper{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-field-input,.text-field-label{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-field-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-icon-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-icon-inverse{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-icon-on-color-disabled{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-icon-primary{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-icon-secondary{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-link-primary{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-support-error{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-support-error-inverse{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity))}.text-support-info{--tw-text-opacity:1;color:rgb(2 132 199/var(--tw-text-opacity))}.text-support-info-inverse{--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity))}.text-support-success{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-support-success-inverse{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-support-warning{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity))}.text-support-warning-inverse{--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity))}.text-text-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-text-inverse,.text-text-on-color{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-text-primary{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-text-secondary{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-text-tertiary{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-tooltip-background-dark{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-tooltip-background-light,.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.placeholder-text-tertiary::-webkit-input-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-text-tertiary:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-text-tertiary::-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-text-tertiary::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.opacity-0{opacity:0}.opacity-50{opacity:.5}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.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 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px 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 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-soft-shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-soft-shadow-2xl{--tw-shadow:0px 24px 64px -12px rgba(149,160,178,.32);--tw-shadow-colored:0px 24px 64px -12px var(--tw-shadow-color)}.shadow-soft-shadow-lg{--tw-shadow:0px 12px 32px -12px rgba(149,160,178,.24);--tw-shadow-colored:0px 12px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.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-border-interactive{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.ring-border-subtle{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.ring-brand-primary-600{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.ring-offset-0{--tw-ring-offset-width:0px}.filter{-webkit-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);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)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\[box-shadow\2c color\2c background-color\]{transition-duration:.15s;transition-property:box-shadow,color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-linear{transition-timing-function:linear}.\[grid-area\:1\/1\/2\/3\]{grid-area:1/1/2/3}.file\:border-0::-webkit-file-upload-button{border-width:0}.file\:border-0::file-selector-button{border-width:0}.file\:bg-transparent::-webkit-file-upload-button{background-color:transparent}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-text-tertiary::-webkit-file-upload-button{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.file\:text-text-tertiary::file-selector-button{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.placeholder\:text-field-placeholder::-webkit-input-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.placeholder\:text-field-placeholder:-ms-input-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.placeholder\:text-field-placeholder::-ms-input-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.placeholder\:text-field-placeholder::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:left-2\/4:before{content:var(--tw-content);left:50%}.before\:top-2\/4:before{content:var(--tw-content);top:50%}.before\:hidden:before{content:var(--tw-content);display:none}.before\:h-10:before{content:var(--tw-content);height:2.5rem}.before\:w-10:before{content:var(--tw-content);width:2.5rem}.before\:-translate-x-2\/4:before{--tw-translate-x:-50%}.before\:-translate-x-2\/4:before,.before\:-translate-y-2\/4:before{content:var(--tw-content);-webkit-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));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))}.before\:-translate-y-2\/4:before{--tw-translate-y:-50%}.before\:rounded-full:before{border-radius:9999px;content:var(--tw-content)}.before\:opacity-0:before{content:var(--tw-content);opacity:0}.before\:transition-opacity:before{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.after\:ml-0\.5:after{content:var(--tw-content);margin-left:.125rem}.after\:text-field-required:after{content:var(--tw-content);--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.after\:content-\[\'\*\'\]:after{--tw-content:"*";content:var(--tw-content)}.first\:rounded-bl:first-child{border-bottom-left-radius:.25rem}.first\:rounded-tl:first-child{border-top-left-radius:.25rem}.first\:border-0:first-child{border-width:0}.first\:border-r:first-child{border-right-width:1px}.first\:border-border-subtle:first-child{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.last\:rounded-br:last-child{border-bottom-right-radius:.25rem}.last\:rounded-tr:last-child{border-top-right-radius:.25rem}.last\:border-0:last-child{border-width:0}.checked\:border-border-interactive:checked{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.checked\:border-toggle-on-border:checked{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.checked\:bg-toggle-on:checked{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.checked\:\[background-image\:none\]:checked{background-image:none}.checked\:before\:hidden:checked:before{content:var(--tw-content);display:none}.checked\:before\:content-\[\'\'\]:checked:before{--tw-content:"";content:var(--tw-content)}.focus-within\:z-10:focus-within{z-index:10}.focus-within\:\!border-focus-border:focus-within{--tw-border-opacity:1!important;border-color:rgb(191 219 254/var(--tw-border-opacity))!important}.focus-within\:ring-2:focus-within{--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-within\:ring-focus:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width:2px}.hover\:border-border-disabled:hover{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.hover\:border-border-interactive:hover{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.hover\:border-border-strong:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.hover\:border-border-subtle:hover{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.hover\:border-button-danger:hover{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.hover\:border-button-danger-hover:hover{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.hover\:border-button-primary:hover{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.hover\:border-button-primary-hover:hover{--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity))}.hover\:border-button-secondary-hover:hover{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}.hover\:border-field-border-disabled:hover{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.hover\:border-text-inverse:hover{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.hover\:bg-background-secondary:hover,.hover\:bg-badge-hover-disabled:hover,.hover\:bg-badge-hover-gray:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-badge-hover-green:hover{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.hover\:bg-badge-hover-red:hover{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.hover\:bg-badge-hover-sky:hover{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity))}.hover\:bg-badge-hover-yellow:hover{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.hover\:bg-button-danger-hover:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.hover\:bg-button-primary-hover:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\:bg-button-secondary-hover:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:bg-button-tertiary-hover:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-field-background-error:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.hover\:bg-toggle-off-hover:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.hover\:bg-transparent:hover{background-color:transparent}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\:text-button-danger-secondary:hover{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.hover\:text-button-primary-hover:hover,.hover\:text-link-primary-hover:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.hover\:text-text-disabled:hover{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.hover\:text-text-inverse:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:text-text-primary:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:ring-2:hover{--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)}.hover\:ring-border-interactive:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.hover\:before\:opacity-10:hover:before{content:var(--tw-content);opacity:.1}.checked\:hover\:border-toggle-on-hover:hover:checked{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.checked\:hover\:bg-toggle-on-hover:hover:checked{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.focus\:rounded-sm:focus{border-radius:.125rem}.focus\:border-border-interactive:focus{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.focus\:border-focus-border:focus{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.focus\:border-focus-error-border:focus{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.focus\:border-toggle-off-border:focus{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.focus\:shadow-none:focus{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring: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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-0: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(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1: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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.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)}.focus\:ring-border-interactive:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.focus\:ring-field-color-error:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(220 38 38/var(--tw-ring-opacity))}.focus\:ring-focus:focus,.focus\:ring-toggle-on:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity))}.focus\:ring-offset-0:focus{--tw-ring-offset-width:0px}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-4:focus{--tw-ring-offset-width:4px}.checked\:focus\:border-toggle-on-border:focus:checked{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.active\:outline-none:active{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-border-disabled:disabled{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.disabled\:border-button-disabled:disabled,.disabled\:border-field-border-disabled:disabled{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.disabled\:border-transparent:disabled{border-color:transparent}.disabled\:bg-button-disabled:disabled{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.disabled\:bg-button-tertiary:disabled,.disabled\:bg-white:disabled{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.disabled\:text-text-disabled:disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.checked\:disabled\:border-border-disabled:disabled:checked{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.checked\:disabled\:bg-white:disabled:checked{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.group:hover .group-hover\:text-text-primary{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.group:disabled .group-disabled\:text-field-color-disabled,.group:disabled .group-disabled\:text-icon-disabled{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.peer:checked~.peer-checked\:translate-x-4{--tw-translate-x:1rem}.peer:checked~.peer-checked\:translate-x-4,.peer:checked~.peer-checked\:translate-x-5{-webkit-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));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))}.peer:checked~.peer-checked\:translate-x-5{--tw-translate-x:1.25rem}.peer:checked~.peer-checked\:opacity-100{opacity:1}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:text-border-disabled{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}@media (min-width:768px){.md\:order-1{-ms-flex-order:1;order:1}.md\:order-10{-ms-flex-order:10;order:10}.md\:order-11{-ms-flex-order:11;order:11}.md\:order-12{-ms-flex-order:12;order:12}.md\:order-2{-ms-flex-order:2;order:2}.md\:order-3{-ms-flex-order:3;order:3}.md\:order-4{-ms-flex-order:4;order:4}.md\:order-5{-ms-flex-order:5;order:5}.md\:order-6{-ms-flex-order:6;order:6}.md\:order-7{-ms-flex-order:7;order:7}.md\:order-8{-ms-flex-order:8;order:8}.md\:order-9{-ms-flex-order:9;order:9}.md\:order-first{-ms-flex-order:-9999;order:-9999}.md\:order-last{-ms-flex-order:9999;order:9999}.md\:order-none{-ms-flex-order:0;order:0}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-10{grid-column:span 10/span 10}.md\:col-span-11{grid-column:span 11/span 11}.md\:col-span-12{grid-column:span 12/span 12}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-6{grid-column:span 6/span 6}.md\:col-span-7{grid-column:span 7/span 7}.md\:col-span-8{grid-column:span 8/span 8}.md\:col-span-9{grid-column:span 9/span 9}.md\:col-start-1{grid-column-start:1}.md\:col-start-10{grid-column-start:10}.md\:col-start-11{grid-column-start:11}.md\:col-start-12{grid-column-start:12}.md\:col-start-2{grid-column-start:2}.md\:col-start-3{grid-column-start:3}.md\:col-start-4{grid-column-start:4}.md\:col-start-5{grid-column-start:5}.md\:col-start-6{grid-column-start:6}.md\:col-start-7{grid-column-start:7}.md\:col-start-8{grid-column-start:8}.md\:col-start-9{grid-column-start:9}.md\:w-1\/10{width:10%}.md\:w-1\/11{width:9.0909091%}.md\:w-1\/12{width:8.3333333%}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.333333%}.md\:w-1\/4{width:25%}.md\:w-1\/5{width:20%}.md\:w-1\/6{width:16.666667%}.md\:w-1\/7{width:14.2857143%}.md\:w-1\/8{width:12.5%}.md\:w-1\/9{width:11.1111111%}.md\:w-full{width:100%}.md\:shrink{-ms-flex-negative:1;flex-shrink:1}.md\:shrink-0{-ms-flex-negative:0;flex-shrink:0}.md\:grow{-ms-flex-positive:1;flex-grow:1}.md\:grow-0{-ms-flex-positive:0;flex-grow:0}.md\:grid-flow-row{grid-auto-flow:row}.md\:grid-flow-col{grid-auto-flow:column}.md\:grid-flow-row-dense{grid-auto-flow:row dense}.md\:grid-flow-col-dense{grid-auto-flow:column dense}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.md\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.md\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.md\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.md\:flex-row{-ms-flex-direction:row;flex-direction:row}.md\:flex-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.md\:flex-col{-ms-flex-direction:column;flex-direction:column}.md\:flex-col-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.md\:flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.md\:flex-wrap-reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.md\:flex-nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.md\:items-start{-ms-flex-align:start;align-items:flex-start}.md\:items-end{-ms-flex-align:end;align-items:flex-end}.md\:items-center{-ms-flex-align:center;align-items:center}.md\:items-baseline{-ms-flex-align:baseline;align-items:baseline}.md\:items-stretch{-ms-flex-align:stretch;align-items:stretch}.md\:justify-normal{-ms-flex-pack:normal;justify-content:normal}.md\:justify-start{-ms-flex-pack:start;justify-content:flex-start}.md\:justify-end{-ms-flex-pack:end;justify-content:flex-end}.md\:justify-center{-ms-flex-pack:center;justify-content:center}.md\:justify-between{-ms-flex-pack:justify;justify-content:space-between}.md\:justify-around{-ms-flex-pack:distribute;justify-content:space-around}.md\:justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.md\:justify-stretch{-ms-flex-pack:stretch;justify-content:stretch}.md\:gap-2{gap:.5rem}.md\:gap-4{gap:1rem}.md\:gap-5{gap:1.25rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:gap-x-2{-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem}.md\:gap-x-4{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.md\:gap-x-5{-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}.md\:gap-x-6{-webkit-column-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}.md\:gap-x-8{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.md\:gap-y-2{row-gap:.5rem}.md\:gap-y-4{row-gap:1rem}.md\:gap-y-5{row-gap:1.25rem}.md\:gap-y-6{row-gap:1.5rem}.md\:gap-y-8{row-gap:2rem}.md\:space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.md\:self-start{-ms-flex-item-align:start;align-self:flex-start}.md\:self-end{-ms-flex-item-align:end;align-self:flex-end}.md\:self-center{-ms-flex-item-align:center;align-self:center}.md\:self-stretch{-ms-flex-item-align:stretch;align-self:stretch}.md\:self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.md\:justify-self-auto{justify-self:auto}.md\:justify-self-start{justify-self:start}.md\:justify-self-end{justify-self:end}.md\:justify-self-center{justify-self:center}.md\:justify-self-stretch{justify-self:stretch}}@media (min-width:1024px){.lg\:order-1{-ms-flex-order:1;order:1}.lg\:order-10{-ms-flex-order:10;order:10}.lg\:order-11{-ms-flex-order:11;order:11}.lg\:order-12{-ms-flex-order:12;order:12}.lg\:order-2{-ms-flex-order:2;order:2}.lg\:order-3{-ms-flex-order:3;order:3}.lg\:order-4{-ms-flex-order:4;order:4}.lg\:order-5{-ms-flex-order:5;order:5}.lg\:order-6{-ms-flex-order:6;order:6}.lg\:order-7{-ms-flex-order:7;order:7}.lg\:order-8{-ms-flex-order:8;order:8}.lg\:order-9{-ms-flex-order:9;order:9}.lg\:order-first{-ms-flex-order:-9999;order:-9999}.lg\:order-last{-ms-flex-order:9999;order:9999}.lg\:order-none{-ms-flex-order:0;order:0}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-10{grid-column:span 10/span 10}.lg\:col-span-11{grid-column:span 11/span 11}.lg\:col-span-12{grid-column:span 12/span 12}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:col-span-9{grid-column:span 9/span 9}.lg\:col-start-1{grid-column-start:1}.lg\:col-start-10{grid-column-start:10}.lg\:col-start-11{grid-column-start:11}.lg\:col-start-12{grid-column-start:12}.lg\:col-start-2{grid-column-start:2}.lg\:col-start-3{grid-column-start:3}.lg\:col-start-4{grid-column-start:4}.lg\:col-start-5{grid-column-start:5}.lg\:col-start-6{grid-column-start:6}.lg\:col-start-7{grid-column-start:7}.lg\:col-start-8{grid-column-start:8}.lg\:col-start-9{grid-column-start:9}.lg\:w-1\/10{width:10%}.lg\:w-1\/11{width:9.0909091%}.lg\:w-1\/12{width:8.3333333%}.lg\:w-1\/2{width:50%}.lg\:w-1\/3{width:33.333333%}.lg\:w-1\/4{width:25%}.lg\:w-1\/5{width:20%}.lg\:w-1\/6{width:16.666667%}.lg\:w-1\/7{width:14.2857143%}.lg\:w-1\/8{width:12.5%}.lg\:w-1\/9{width:11.1111111%}.lg\:w-\[47\.5rem\]{width:47.5rem}.lg\:w-full{width:100%}.lg\:shrink{-ms-flex-negative:1;flex-shrink:1}.lg\:shrink-0{-ms-flex-negative:0;flex-shrink:0}.lg\:grow{-ms-flex-positive:1;flex-grow:1}.lg\:grow-0{-ms-flex-positive:0;flex-grow:0}.lg\:grid-flow-row{grid-auto-flow:row}.lg\:grid-flow-col{grid-auto-flow:column}.lg\:grid-flow-row-dense{grid-auto-flow:row dense}.lg\:grid-flow-col-dense{grid-auto-flow:column dense}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.lg\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.lg\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.lg\:flex-row{-ms-flex-direction:row;flex-direction:row}.lg\:flex-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.lg\:flex-col{-ms-flex-direction:column;flex-direction:column}.lg\:flex-col-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.lg\:flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.lg\:flex-wrap-reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.lg\:flex-nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.lg\:items-start{-ms-flex-align:start;align-items:flex-start}.lg\:items-end{-ms-flex-align:end;align-items:flex-end}.lg\:items-center{-ms-flex-align:center;align-items:center}.lg\:items-baseline{-ms-flex-align:baseline;align-items:baseline}.lg\:items-stretch{-ms-flex-align:stretch;align-items:stretch}.lg\:justify-normal{-ms-flex-pack:normal;justify-content:normal}.lg\:justify-start{-ms-flex-pack:start;justify-content:flex-start}.lg\:justify-end{-ms-flex-pack:end;justify-content:flex-end}.lg\:justify-center{-ms-flex-pack:center;justify-content:center}.lg\:justify-between{-ms-flex-pack:justify;justify-content:space-between}.lg\:justify-around{-ms-flex-pack:distribute;justify-content:space-around}.lg\:justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.lg\:justify-stretch{-ms-flex-pack:stretch;justify-content:stretch}.lg\:gap-2{gap:.5rem}.lg\:gap-4{gap:1rem}.lg\:gap-5{gap:1.25rem}.lg\:gap-6{gap:1.5rem}.lg\:gap-8{gap:2rem}.lg\:gap-x-2{-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem}.lg\:gap-x-4{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.lg\:gap-x-5{-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}.lg\:gap-x-6{-webkit-column-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}.lg\:gap-x-8{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.lg\:gap-y-2{row-gap:.5rem}.lg\:gap-y-4{row-gap:1rem}.lg\:gap-y-5{row-gap:1.25rem}.lg\:gap-y-6{row-gap:1.5rem}.lg\:gap-y-8{row-gap:2rem}.lg\:self-start{-ms-flex-item-align:start;align-self:flex-start}.lg\:self-end{-ms-flex-item-align:end;align-self:flex-end}.lg\:self-center{-ms-flex-item-align:center;align-self:center}.lg\:self-stretch{-ms-flex-item-align:stretch;align-self:stretch}.lg\:self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.lg\:justify-self-auto{justify-self:auto}.lg\:justify-self-start{justify-self:start}.lg\:justify-self-end{justify-self:end}.lg\:justify-self-center{justify-self:center}.lg\:justify-self-stretch{justify-self:stretch}}.\[\&\:hover\:has\(\:disabled\)\]\:border-field-border-disabled:hover:has(:disabled){--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.\[\&\:hover\:not\(\:focus\)\:not\(\:disabled\)\]\:border-border-strong:hover:not(:focus):not(:disabled){--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.\[\&\>\*\:not\(svg\)\]\:m-1>:not(svg){margin:.25rem}.\[\&\>\*\:not\(svg\)\]\:mx-1>:not(svg){margin-left:.25rem;margin-right:.25rem}.\[\&\>\*\:not\(svg\)\]\:my-0\.5>:not(svg){margin-bottom:.125rem;margin-top:.125rem}.\[\&\>\*\]\:box-border>*{box-sizing:border-box}.\[\&\>\*\]\:text-2xl>*{font-size:1.5rem;line-height:2rem}.\[\&\>\*\]\: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}.\[\&\>\*\]\:text-xl>*{font-size:1.25rem;line-height:1.75rem}.\[\&\>\*\]\:text-xs>*{font-size:.75rem;line-height:1rem}.\[\&\>\*\]\:text-field-color-disabled>*{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.\[\&\>\*\]\:text-field-helper>*{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.\[\&\>\*\]\:text-field-label>*{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.\[\&\>\*\]\:text-support-error>*{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.\[\&\>li\]\:pointer-events-auto>li{pointer-events:auto}.\[\&\>p\]\:m-0>p{margin:0}.\[\&\>p\]\:w-full>p{width:100%}.\[\&\>span\:first-child\]\:shrink-0>span:first-child{-ms-flex-negative:0;flex-shrink:0}.\[\&\>svg\]\:m-1>svg{margin:.25rem}.\[\&\>svg\]\:m-1\.5>svg{margin:.375rem}.\[\&\>svg\]\:block>svg{display:block}.\[\&\>svg\]\:size-3\.5>svg{height:.875rem;width:.875rem}.\[\&\>svg\]\:size-4>svg{height:1rem;width:1rem}.\[\&\>svg\]\:size-5>svg{height:1.25rem;width:1.25rem}.\[\&\>svg\]\:size-6>svg{height:1.5rem;width:1.5rem}.\[\&\>svg\]\:h-3>svg{height:.75rem}.\[\&\>svg\]\:h-4>svg{height:1rem}.\[\&\>svg\]\:h-5>svg{height:1.25rem}.\[\&\>svg\]\:h-6>svg{height:1.5rem}.\[\&\>svg\]\:h-8>svg{height:2rem}.\[\&\>svg\]\:w-3>svg{width:.75rem}.\[\&\>svg\]\:w-4>svg{width:1rem}.\[\&\>svg\]\:w-5>svg{width:1.25rem}.\[\&\>svg\]\:w-6>svg{width:1.5rem}.\[\&\>svg\]\:w-8>svg{width:2rem}.\[\&\>svg\]\:shrink-0>svg{-ms-flex-negative:0;flex-shrink:0}.\[\&\>svg\]\:text-icon-interactive>svg{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.\[\&_\*\]\:box-border *{box-sizing:border-box}.\[\&_\*\]\:font-sans *{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.\[\&_\*\]\:text-sm *{font-size:.875rem}.\[\&_\*\]\:leading-5 *,.\[\&_\*\]\:text-sm *{line-height:1.25rem}.\[\&_\.editor-content\>p\]\:text-sm .editor-content>p{font-size:.875rem;line-height:1.25rem}.\[\&_\.editor-content\>p\]\:font-medium .editor-content>p{font-weight:500}.\[\&_\.editor-content\>p\]\:leading-\[1\.625rem\] .editor-content>p{line-height:1.625rem}.\[\&_\.editor-content\>p\]\:leading-\[1\.6875rem\] .editor-content>p{line-height:1.6875rem}.\[\&_p\]\:m-0 p{margin:0}.\[\&_p\]\:text-badge-color-disabled p{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.\[\&_svg\]\:size-3 svg{height:.75rem;width:.75rem}.\[\&_svg\]\:size-4 svg{height:1rem;width:1rem}.\[\&_svg\]\:size-5 svg{height:1.25rem;width:1.25rem}.\[\&_svg\]\:size-6 svg{height:1.5rem;width:1.5rem}
diff --git a/dist/force-ui.js b/dist/force-ui.js
new file mode 100644
index 00000000..7accc8b1
--- /dev/null
+++ b/dist/force-ui.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["force-ui.[file].js"]=t():e["force-ui.[file].js"]=t()}("undefined"!=typeof self?self:this,(function(){return function(){"use strict";var e={316:function(e,t,n){function r(e){var t=Object.create(null);return function(n){return void 0===t[n]&&(t[n]=e(n)),t[n]}}n.d(t,{A:function(){return i}});var o=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,i=r((function(e){return o.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91}))},20:function(e,t,n){var r=n(609),o=Symbol.for("react.element"),i=Symbol.for("react.fragment"),s=Object.prototype.hasOwnProperty,a=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var r,i={},c=null,u=null;for(r in void 0!==n&&(c=""+n),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(u=t.ref),t)s.call(t,r)&&!l.hasOwnProperty(r)&&(i[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===i[r]&&(i[r]=t[r]);return{$$typeof:o,type:e,key:c,ref:u,props:i,_owner:a.current}}t.Fragment=i,t.jsx=c,t.jsxs=c},848:function(e,t,n){e.exports=n(20)},609:function(e){e.exports=window.React}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};n.r(r),n.d(r,{Alert:function(){return Lp},Avatar:function(){return nt},Badge:function(){return Ge},Breadcrumb:function(){return iS},Button:function(){return le},ButtonGroup:function(){return bi},Checkbox:function(){return Te},Container:function(){return Dp},Dialog:function(){return RS},Drawer:function(){return u_},EditorInput:function(){return vE},Input:function(){return ut},Label:function(){return pt},Loader:function(){return vt},Menu:function(){return jE},ProgressBar:function(){return yt},ProgressSteps:function(){return kE},RadioButton:function(){return Ke},Select:function(){return vh},Sidebar:function(){return KE},Skeleton:function(){return TE},Switch:function(){return ge},Tabs:function(){return Zf},TextArea:function(){return tt},Title:function(){return mt},Toaster:function(){return tp},Tooltip:function(){return fi},Topbar:function(){return MS},toast:function(){return Mh}});var o=n(609),i=n.n(o);const s=e=>{const t=u(e),{conflictingClassGroups:n,conflictingClassGroupModifiers:r}=e;return{getClassGroupId:e=>{const n=e.split("-");return""===n[0]&&1!==n.length&&n.shift(),a(n,t)||c(e)},getConflictingClassGroupIds:(e,t)=>{const o=n[e]||[];return t&&r[e]?[...o,...r[e]]:o}}},a=(e,t)=>{if(0===e.length)return t.classGroupId;const n=e[0],r=t.nextPart.get(n),o=r?a(e.slice(1),r):void 0;if(o)return o;if(0===t.validators.length)return;const i=e.join("-");return t.validators.find((({validator:e})=>e(i)))?.classGroupId},l=/^\[(.+)\]$/,c=e=>{if(l.test(e)){const t=l.exec(e)[1],n=t?.substring(0,t.indexOf(":"));if(n)return"arbitrary.."+n}},u=e=>{const{theme:t,prefix:n}=e,r={nextPart:new Map,validators:[]};return p(Object.entries(e.classGroups),n).forEach((([e,n])=>{d(n,r,e,t)})),r},d=(e,t,n,r)=>{e.forEach((e=>{if("string"!=typeof e){if("function"==typeof e)return h(e)?void d(e(r),t,n,r):void t.validators.push({validator:e,classGroupId:n});Object.entries(e).forEach((([e,o])=>{d(o,f(t,e),n,r)}))}else(""===e?t:f(t,e)).classGroupId=n}))},f=(e,t)=>{let n=e;return t.split("-").forEach((e=>{n.nextPart.has(e)||n.nextPart.set(e,{nextPart:new Map,validators:[]}),n=n.nextPart.get(e)})),n},h=e=>e.isThemeGetter,p=(e,t)=>t?e.map((([e,n])=>[e,n.map((e=>"string"==typeof e?t+e:"object"==typeof e?Object.fromEntries(Object.entries(e).map((([e,n])=>[t+e,n]))):e))])):e,m=e=>{if(e<1)return{get:()=>{},set:()=>{}};let t=0,n=new Map,r=new Map;const o=(o,i)=>{n.set(o,i),t++,t>e&&(t=0,r=n,n=new Map)};return{get(e){let t=n.get(e);return void 0!==t?t:void 0!==(t=r.get(e))?(o(e,t),t):void 0},set(e,t){n.has(e)?n.set(e,t):o(e,t)}}},g=e=>{const{separator:t,experimentalParseClassName:n}=e,r=1===t.length,o=t[0],i=t.length,s=e=>{const n=[];let s,a=0,l=0;for(let c=0;c<e.length;c++){let u=e[c];if(0===a){if(u===o&&(r||e.slice(c,c+i)===t)){n.push(e.slice(l,c)),l=c+i;continue}if("/"===u){s=c;continue}}"["===u?a++:"]"===u&&a--}const c=0===n.length?e:e.substring(l),u=c.startsWith("!");return{modifiers:n,hasImportantModifier:u,baseClassName:u?c.substring(1):c,maybePostfixModifierPosition:s&&s>l?s-l:void 0}};return n?e=>n({className:e,parseClassName:s}):s},v=e=>{if(e.length<=1)return e;const t=[];let n=[];return e.forEach((e=>{"["===e[0]?(t.push(...n.sort(),e),n=[]):n.push(e)})),t.push(...n.sort()),t},y=/\s+/;function b(){let e,t,n=0,r="";for(;n<arguments.length;)(e=arguments[n++])&&(t=x(e))&&(r&&(r+=" "),r+=t);return r}const x=e=>{if("string"==typeof e)return e;let t,n="";for(let r=0;r<e.length;r++)e[r]&&(t=x(e[r]))&&(n&&(n+=" "),n+=t);return n};function w(e,...t){let n,r,o,i=function(l){const c=t.reduce(((e,t)=>t(e)),e());return n=(e=>({cache:m(e.cacheSize),parseClassName:g(e),...s(e)}))(c),r=n.cache.get,o=n.cache.set,i=a,a(l)};function a(e){const t=r(e);if(t)return t;const i=((e,t)=>{const{parseClassName:n,getClassGroupId:r,getConflictingClassGroupIds:o}=t,i=[],s=e.trim().split(y);let a="";for(let e=s.length-1;e>=0;e-=1){const t=s[e],{modifiers:l,hasImportantModifier:c,baseClassName:u,maybePostfixModifierPosition:d}=n(t);let f=Boolean(d),h=r(f?u.substring(0,d):u);if(!h){if(!f){a=t+(a.length>0?" "+a:a);continue}if(h=r(u),!h){a=t+(a.length>0?" "+a:a);continue}f=!1}const p=v(l).join(":"),m=c?p+"!":p,g=m+h;if(i.includes(g))continue;i.push(g);const y=o(h,f);for(let e=0;e<y.length;++e){const t=y[e];i.push(m+t)}a=t+(a.length>0?" "+a:a)}return a})(e,n);return o(e,i),i}return function(){return i(b.apply(null,arguments))}}const E=e=>{const t=t=>t[e]||[];return t.isThemeGetter=!0,t},S=/^\[(?:([a-z-]+):)?(.+)\]$/i,_=/^\d+\/\d+$/,k=new Set(["px","full","screen"]),C=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,P=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,T=/^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/,O=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,R=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,N=e=>j(e)||k.has(e)||_.test(e),A=e=>H(e,"length",q),j=e=>Boolean(e)&&!Number.isNaN(Number(e)),M=e=>H(e,"number",j),I=e=>Boolean(e)&&Number.isInteger(Number(e)),D=e=>e.endsWith("%")&&j(e.slice(0,-1)),L=e=>S.test(e),F=e=>C.test(e),z=new Set(["length","size","percentage"]),B=e=>H(e,z,Y),V=e=>H(e,"position",Y),W=new Set(["image","url"]),U=e=>H(e,W,X),$=e=>H(e,"",G),K=()=>!0,H=(e,t,n)=>{const r=S.exec(e);return!!r&&(r[1]?"string"==typeof t?r[1]===t:t.has(r[1]):n(r[2]))},q=e=>P.test(e)&&!T.test(e),Y=()=>!1,G=e=>O.test(e),X=e=>R.test(e),J=(Symbol.toStringTag,()=>{const e=E("colors"),t=E("spacing"),n=E("blur"),r=E("brightness"),o=E("borderColor"),i=E("borderRadius"),s=E("borderSpacing"),a=E("borderWidth"),l=E("contrast"),c=E("grayscale"),u=E("hueRotate"),d=E("invert"),f=E("gap"),h=E("gradientColorStops"),p=E("gradientColorStopPositions"),m=E("inset"),g=E("margin"),v=E("opacity"),y=E("padding"),b=E("saturate"),x=E("scale"),w=E("sepia"),S=E("skew"),_=E("space"),k=E("translate"),C=()=>["auto",L,t],P=()=>[L,t],T=()=>["",N,A],O=()=>["auto",j,L],R=()=>["","0",L],z=()=>[j,L];return{cacheSize:500,separator:":",theme:{colors:[K],spacing:[N,A],blur:["none","",F,L],brightness:z(),borderColor:[e],borderRadius:["none","","full",F,L],borderSpacing:P(),borderWidth:T(),contrast:z(),grayscale:R(),hueRotate:z(),invert:R(),gap:P(),gradientColorStops:[e],gradientColorStopPositions:[D,A],inset:C(),margin:C(),opacity:z(),padding:P(),saturate:z(),scale:z(),sepia:R(),skew:z(),space:P(),translate:P()},classGroups:{aspect:[{aspect:["auto","square","video",L]}],container:["container"],columns:[{columns:[F]}],"break-after":[{"break-after":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-before":[{"break-before":["auto","avoid","all","avoid-page","page","left","right","column"]}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top",L]}],overflow:[{overflow:["auto","hidden","clip","visible","scroll"]}],"overflow-x":[{"overflow-x":["auto","hidden","clip","visible","scroll"]}],"overflow-y":[{"overflow-y":["auto","hidden","clip","visible","scroll"]}],overscroll:[{overscroll:["auto","contain","none"]}],"overscroll-x":[{"overscroll-x":["auto","contain","none"]}],"overscroll-y":[{"overscroll-y":["auto","contain","none"]}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[m]}],"inset-x":[{"inset-x":[m]}],"inset-y":[{"inset-y":[m]}],start:[{start:[m]}],end:[{end:[m]}],top:[{top:[m]}],right:[{right:[m]}],bottom:[{bottom:[m]}],left:[{left:[m]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",I,L]}],basis:[{basis:C()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",L]}],grow:[{grow:R()}],shrink:[{shrink:R()}],order:[{order:["first","last","none",I,L]}],"grid-cols":[{"grid-cols":[K]}],"col-start-end":[{col:["auto",{span:["full",I,L]},L]}],"col-start":[{"col-start":O()}],"col-end":[{"col-end":O()}],"grid-rows":[{"grid-rows":[K]}],"row-start-end":[{row:["auto",{span:[I,L]},L]}],"row-start":[{"row-start":O()}],"row-end":[{"row-end":O()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",L]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",L]}],gap:[{gap:[f]}],"gap-x":[{"gap-x":[f]}],"gap-y":[{"gap-y":[f]}],"justify-content":[{justify:["normal","start","end","center","between","around","evenly","stretch"]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal","start","end","center","between","around","evenly","stretch","baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":["start","end","center","between","around","evenly","stretch","baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[y]}],px:[{px:[y]}],py:[{py:[y]}],ps:[{ps:[y]}],pe:[{pe:[y]}],pt:[{pt:[y]}],pr:[{pr:[y]}],pb:[{pb:[y]}],pl:[{pl:[y]}],m:[{m:[g]}],mx:[{mx:[g]}],my:[{my:[g]}],ms:[{ms:[g]}],me:[{me:[g]}],mt:[{mt:[g]}],mr:[{mr:[g]}],mb:[{mb:[g]}],ml:[{ml:[g]}],"space-x":[{"space-x":[_]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[_]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit","svw","lvw","dvw",L,t]}],"min-w":[{"min-w":[L,t,"min","max","fit"]}],"max-w":[{"max-w":[L,t,"none","full","min","max","fit","prose",{screen:[F]},F]}],h:[{h:[L,t,"auto","min","max","fit","svh","lvh","dvh"]}],"min-h":[{"min-h":[L,t,"min","max","fit","svh","lvh","dvh"]}],"max-h":[{"max-h":[L,t,"min","max","fit","svh","lvh","dvh"]}],size:[{size:[L,t,"auto","min","max","fit"]}],"font-size":[{text:["base",F,A]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",M]}],"font-family":[{font:[K]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractons"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",L]}],"line-clamp":[{"line-clamp":["none",j,M]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",N,L]}],"list-image":[{"list-image":["none",L]}],"list-style-type":[{list:["none","disc","decimal",L]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[e]}],"placeholder-opacity":[{"placeholder-opacity":[v]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[e]}],"text-opacity":[{"text-opacity":[v]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:["solid","dashed","dotted","double","none","wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",N,A]}],"underline-offset":[{"underline-offset":["auto",N,L]}],"text-decoration-color":[{decoration:[e]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:P()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",L]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",L]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[v]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top",V]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",B]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},U]}],"bg-color":[{bg:[e]}],"gradient-from-pos":[{from:[p]}],"gradient-via-pos":[{via:[p]}],"gradient-to-pos":[{to:[p]}],"gradient-from":[{from:[h]}],"gradient-via":[{via:[h]}],"gradient-to":[{to:[h]}],rounded:[{rounded:[i]}],"rounded-s":[{"rounded-s":[i]}],"rounded-e":[{"rounded-e":[i]}],"rounded-t":[{"rounded-t":[i]}],"rounded-r":[{"rounded-r":[i]}],"rounded-b":[{"rounded-b":[i]}],"rounded-l":[{"rounded-l":[i]}],"rounded-ss":[{"rounded-ss":[i]}],"rounded-se":[{"rounded-se":[i]}],"rounded-ee":[{"rounded-ee":[i]}],"rounded-es":[{"rounded-es":[i]}],"rounded-tl":[{"rounded-tl":[i]}],"rounded-tr":[{"rounded-tr":[i]}],"rounded-br":[{"rounded-br":[i]}],"rounded-bl":[{"rounded-bl":[i]}],"border-w":[{border:[a]}],"border-w-x":[{"border-x":[a]}],"border-w-y":[{"border-y":[a]}],"border-w-s":[{"border-s":[a]}],"border-w-e":[{"border-e":[a]}],"border-w-t":[{"border-t":[a]}],"border-w-r":[{"border-r":[a]}],"border-w-b":[{"border-b":[a]}],"border-w-l":[{"border-l":[a]}],"border-opacity":[{"border-opacity":[v]}],"border-style":[{border:["solid","dashed","dotted","double","none","hidden"]}],"divide-x":[{"divide-x":[a]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[a]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[v]}],"divide-style":[{divide:["solid","dashed","dotted","double","none"]}],"border-color":[{border:[o]}],"border-color-x":[{"border-x":[o]}],"border-color-y":[{"border-y":[o]}],"border-color-t":[{"border-t":[o]}],"border-color-r":[{"border-r":[o]}],"border-color-b":[{"border-b":[o]}],"border-color-l":[{"border-l":[o]}],"divide-color":[{divide:[o]}],"outline-style":[{outline:["","solid","dashed","dotted","double","none"]}],"outline-offset":[{"outline-offset":[N,L]}],"outline-w":[{outline:[N,A]}],"outline-color":[{outline:[e]}],"ring-w":[{ring:T()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[e]}],"ring-opacity":[{"ring-opacity":[v]}],"ring-offset-w":[{"ring-offset":[N,A]}],"ring-offset-color":[{"ring-offset":[e]}],shadow:[{shadow:["","inner","none",F,$]}],"shadow-color":[{shadow:[K]}],opacity:[{opacity:[v]}],"mix-blend":[{"mix-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-lighter","plus-darker"]}],"bg-blend":[{"bg-blend":["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"]}],filter:[{filter:["","none"]}],blur:[{blur:[n]}],brightness:[{brightness:[r]}],contrast:[{contrast:[l]}],"drop-shadow":[{"drop-shadow":["","none",F,L]}],grayscale:[{grayscale:[c]}],"hue-rotate":[{"hue-rotate":[u]}],invert:[{invert:[d]}],saturate:[{saturate:[b]}],sepia:[{sepia:[w]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[n]}],"backdrop-brightness":[{"backdrop-brightness":[r]}],"backdrop-contrast":[{"backdrop-contrast":[l]}],"backdrop-grayscale":[{"backdrop-grayscale":[c]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[u]}],"backdrop-invert":[{"backdrop-invert":[d]}],"backdrop-opacity":[{"backdrop-opacity":[v]}],"backdrop-saturate":[{"backdrop-saturate":[b]}],"backdrop-sepia":[{"backdrop-sepia":[w]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[s]}],"border-spacing-x":[{"border-spacing-x":[s]}],"border-spacing-y":[{"border-spacing-y":[s]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",L]}],duration:[{duration:z()}],ease:[{ease:["linear","in","out","in-out",L]}],delay:[{delay:z()}],animate:[{animate:["none","spin","ping","pulse","bounce",L]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[x]}],"scale-x":[{"scale-x":[x]}],"scale-y":[{"scale-y":[x]}],rotate:[{rotate:[I,L]}],"translate-x":[{"translate-x":[k]}],"translate-y":[{"translate-y":[k]}],"skew-x":[{"skew-x":[S]}],"skew-y":[{"skew-y":[S]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",L]}],accent:[{accent:["auto",e]}],appearance:[{appearance:["none","auto"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",L]}],"caret-color":[{caret:[e]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":P()}],"scroll-mx":[{"scroll-mx":P()}],"scroll-my":[{"scroll-my":P()}],"scroll-ms":[{"scroll-ms":P()}],"scroll-me":[{"scroll-me":P()}],"scroll-mt":[{"scroll-mt":P()}],"scroll-mr":[{"scroll-mr":P()}],"scroll-mb":[{"scroll-mb":P()}],"scroll-ml":[{"scroll-ml":P()}],"scroll-p":[{"scroll-p":P()}],"scroll-px":[{"scroll-px":P()}],"scroll-py":[{"scroll-py":P()}],"scroll-ps":[{"scroll-ps":P()}],"scroll-pe":[{"scroll-pe":P()}],"scroll-pt":[{"scroll-pt":P()}],"scroll-pr":[{"scroll-pr":P()}],"scroll-pb":[{"scroll-pb":P()}],"scroll-pl":[{"scroll-pl":P()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",L]}],fill:[{fill:[e,"none"]}],"stroke-w":[{stroke:[N,A,M]}],stroke:[{stroke:[e,"none"]}],sr:["sr-only","not-sr-only"],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}}),Z=w(J);function Q(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(n=Q(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function ee(){for(var e,t,n=0,r="",o=arguments.length;n<o;n++)(e=arguments[n])&&(t=Q(e))&&(r&&(r+=" "),r+=t);return r}var te=function(){return Z(ee.apply(void 0,arguments))},ne=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.forEach((function(e){return null==e?void 0:e.apply(void 0,n)}))}},re=function(e){var t={0:"gap-0",xxs:"gap-1",xs:"gap-2",sm:"gap-3",md:"gap-4",lg:"gap-5",xl:"gap-6","2xl":"gap-8"};return t[e]||t.md},oe={1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5",6:"grid-cols-6",7:"grid-cols-7",8:"grid-cols-8",9:"grid-cols-9",10:"grid-cols-10",11:"grid-cols-11",12:"grid-cols-12"},ie=["variant","size","type","tag","className","children","disabled","destructive","icon","iconPosition","loading"];function se(){return se=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},se.apply(null,arguments)}var ae=(0,o.forwardRef)((function(e,t){var n,r,o,s,a=e.variant,l=void 0===a?"primary":a,c=e.size,u=void 0===c?"md":c,d=e.type,f=void 0===d?"button":d,h=e.tag,p=void 0===h?"button":h,m=e.className,g=e.children,v=e.disabled,y=void 0!==v&&v,b=e.destructive,x=void 0!==b&&b,w=e.icon,E=void 0===w?null:w,S=e.iconPosition,_=void 0===S?"left":S,k=e.loading,C=void 0!==k&&k,P=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,ie),T=C?"opacity-50 disabled:cursor-not-allowed":"",O=null===(n={primary:"text-text-on-color bg-button-primary hover:bg-button-primary-hover border-button-primary hover:border-button-primary-hover disabled:bg-button-disabled disabled:border-button-disabled",secondary:"text-text-on-color bg-button-secondary hover:bg-button-secondary-hover border-button-secondary hover:border-button-secondary-hover disabled:bg-button-disabled disabled:border-button-disabled",outline:"text-button-tertiary-color border border-border-subtle bg-button-tertiary hover:bg-button-tertiary-hover hover:border-border-subtle disabled:bg-button-tertiary disabled:border-border-disabled",ghost:"text-text-primary bg-transparent border border-transparent hover:bg-button-tertiary-hover",link:"text-link-primary bg-transparent hover:text-link-primary-hover hover:underline p-0 border-0 leading-none"})||void 0===n?void 0:n[l],R=x&&!y?null===(r={primary:"bg-button-danger hover:bg-button-danger-hover border-button-danger hover:border-button-danger-hover",outline:"text-button-danger border border-button-danger hover:border-button-danger bg-button-tertiary hover:bg-field-background-error",ghost:"text-button-danger hover:bg-field-background-error",link:"text-button-danger hover:text-button-danger-secondary"})||void 0===r?void 0:r[l]:"",N=null===(o={xs:"p-1 rounded-sm [&>svg]:h-4 [&>svg]:w-4",sm:"p-2 rounded-sm [&>svg]:h-4 [&>svg]:w-4",md:"p-2.5 rounded-md text-sm [&>svg]:h-5 [&>svg]:w-5",lg:"p-3 rounded-lg text-base [&>svg]:h-6 [&>svg]:w-6"})||void 0===o?void 0:o[u],A=null,j="";E&&(j="flex items-center justify-center gap-1","left"===_?s=E:A=E);var M=p;return i().createElement(M,se({ref:t,type:f,className:te(j,"border border-solid cursor-pointer transition-colors duration-300 ease-in-out text-xs font-semibold focus:ring-2 focus:ring-toggle-on focus:ring-offset-2 disabled:text-text-disabled",N,O,R,T,m),disabled:y},P),s,g,A)})),le=ae;let ce=(e=21)=>{let t="",n=crypto.getRandomValues(new Uint8Array(e));for(;e--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[63&n[e]];return t};var ue=["id","onChange","value","defaultValue","size","disabled","label","name","className"];function de(){return de=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},de.apply(null,arguments)}function fe(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var he=function(e){var t=e.label,n=e.switchId,r=e.disabled,i=void 0!==r&&r,s=e.children;if((0,o.isValidElement)(t))return React.createElement("div",{className:te("inline-flex items-center gap-3","items-start")},s,t);var a,l,c,u,d,f=!(null!=t&&t.heading||null!=t&&t.description),h=null!=t&&t.heading&&null!=t&&t.description?"items-start":"items-center";return f?s:React.createElement("div",{className:te("inline-flex",h,"gap-3")},s,React.createElement("label",{htmlFor:n,className:te(!i&&"cursor-pointer")},(c=void 0===(l=(a=t||{}).heading)?"":l,d=void 0===(u=a.description)?"":u,React.createElement("div",{className:"space-y-1.5"},c&&React.createElement("p",{className:"text-text-primary text-base font-medium leading-4 m-0"},c),d&&React.createElement("p",{className:"text-text-secondary text-sm font-normal leading-5 m-0"},d)))))},pe=function(e,t){var n,r,i=e.id,s=e.onChange,a=e.value,l=e.defaultValue,c=void 0!==l&&l,u=e.size,d=void 0===u?"lg":u,f=e.disabled,h=void 0!==f&&f,p=e.label,m=void 0===p?{heading:"",description:""}:p,g=e.name,v=e.className,y=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,ue),b=(0,o.useMemo)((function(){return void 0!==a}),[a]),x=(0,o.useMemo)((function(){return i||"switch-".concat(ce())}),[]),w=(n=(0,o.useState)(c),r=2,function(e){if(Array.isArray(e))return e}(n)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(n,r)||function(e,t){if(e){if("string"==typeof e)return fe(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?fe(e,t):void 0}}(n,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),E=w[0],S=w[1],_="primary",k=(0,o.useCallback)((function(){return b?a:E}),[b,a,E]),C={primary:{input:"bg-toggle-off hover:bg-toggle-off-hover checked:bg-toggle-on checked:hover:bg-toggle-on-hover focus:ring focus:ring-toggle-on focus:ring-offset-4 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-none checked:focus:border-toggle-on-border focus:border-toggle-off-border",toggleDial:"bg-toggle-dial-background shadow-toggleDial"}},P={lg:{container:"w-11 h-6",toggleDial:"size-4 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-5 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4"},sm:{container:"w-9 h-5",toggleDial:"size-3 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4"}};return React.createElement(he,{label:m,switchId:x,disabled:h},React.createElement("div",{className:te("relative inline-block cursor-pointer rounded-full shrink-0",P[d].container,v)},React.createElement("input",de({ref:t,id:x,type:"checkbox",className:te("peer appearance-none absolute bg-blue-gray-100 rounded-full cursor-pointer transition-colors duration-300 h-full w-full  before:content-[''] checked:before:content-[''] m-0 checked:[background-image:none]",C[_].input,h&&"bg-toggle-off-disabled disabled:border-transparent shadow-none disabled:cursor-not-allowed"),checked:k(),onChange:function(e){if(!h){var t=e.target.checked;b||S(t),"function"==typeof s&&s(t)}},disabled:h,name:g},y)),React.createElement("label",{htmlFor:x,className:te("bg-white border border-blue-gray-100 rounded-full absolute cursor-pointer shadow-md before:content[''] before:transition-opacity before:opacity-0 hover:before:opacity-10 before:hidden border-none transition-all duration-300",P[d].toggleDial,C[_].toggleDial,h&&"peer-disabled:cursor-not-allowed")})))},me=(0,o.forwardRef)(pe);me.displayName="Switch";var ge=me;const ve=(...e)=>e.filter(((e,t,n)=>Boolean(e)&&n.indexOf(e)===t)).join(" ");var ye={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};const be=(0,o.forwardRef)((({color:e="currentColor",size:t=24,strokeWidth:n=2,absoluteStrokeWidth:r,className:i="",children:s,iconNode:a,...l},c)=>(0,o.createElement)("svg",{ref:c,...ye,width:t,height:t,stroke:e,strokeWidth:r?24*Number(n)/Number(t):n,className:ve("lucide",i),...l},[...a.map((([e,t])=>(0,o.createElement)(e,t))),...Array.isArray(s)?s:[s]]))),xe=(e,t)=>{const n=(0,o.forwardRef)((({className:n,...r},i)=>{return(0,o.createElement)(be,{ref:i,iconNode:t,className:ve(`lucide-${s=e,s.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}`,n),...r});var s}));return n.displayName=`${e}`,n},we=xe("Minus",[["path",{d:"M5 12h14",key:"1ays0h"}]]),Ee=xe("Check",[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]]);var Se=["id","label","defaultChecked","checked","onChange","value","indeterminate","disabled","size"];function _e(){return _e=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_e.apply(null,arguments)}function ke(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var Ce=function(e,t){var n,r,i,s,a=e.id,l=e.label,c=e.defaultChecked,u=void 0!==c&&c,d=e.checked,f=e.onChange,h=(e.value,e.indeterminate),p=e.disabled,m=e.size,g=void 0===m?"md":m,v=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,Se),y=(0,o.useMemo)((function(){return a||"checkbox-".concat(ce())}),[a]),b=(0,o.useMemo)((function(){return void 0!==d}),[d]),x=(i=(0,o.useState)(u||!1),s=2,function(e){if(Array.isArray(e))return e}(i)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(i,s)||function(e,t){if(e){if("string"==typeof e)return ke(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?ke(e,t):void 0}}(i,s)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),w=x[0],E=x[1],S="primary",_={sm:{checkbox:"size-4 rounded-sm",icon:"size-3"},md:{checkbox:"size-5 rounded",icon:"size-4"}},k={primary:{checkbox:"border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-4 focus:ring-focus",icon:"text-white"}},C=(0,o.useCallback)((function(){return b?d:w}),[b,d,w]),P=(0,o.useCallback)((function(){return(0,o.isValidElement)(l)?l:l.heading||l.description?React.createElement("div",{className:"space-y-1.5"},l.heading&&React.createElement("p",{className:"text-text-primary text-base font-medium leading-4 m-0"},l.heading),l.description&&React.createElement("p",{className:"text-text-secondary text-sm font-normal leading-5 m-0"},l.description)):null}),[l]);return React.createElement("div",{className:te("inline-flex items-center",!!l&&"items-start")},React.createElement("label",{className:te("relative flex items-center rounded-full",!p&&"cursor-pointer"),htmlFor:y},React.createElement("input",_e({ref:t,id:y,type:"checkbox",className:te("peer relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden !border-1.5 border-solid",k[S].checkbox,_[g].checkbox,p&&"disabled:bg-white checked:disabled:bg-white disabled:border-border-disabled checked:disabled:border-border-disabled"),checked:C(),onChange:function(e){if(!p){var t=e.target.checked;b||E(t),"function"==typeof f&&f(t)}},disabled:p},v)),React.createElement("span",{className:te("pointer-events-none inline-flex items-center absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100",k[S].icon,p&&"peer-disabled:text-border-disabled")},h?React.createElement(we,{className:te(null===(n=_[g])||void 0===n?void 0:n.icon)}):React.createElement(Ee,{className:te(null===(r=_[g])||void 0===r?void 0:r.icon)}))),!!l&&React.createElement("label",{className:te("ml-3",!p&&"cursor-pointer"),htmlFor:y},P()))},Pe=(0,o.forwardRef)(Ce);Pe.displayName="Checkbox";var Te=Pe,Oe={primary:{checkbox:"border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-4 focus:ring-focus",icon:"text-white"}},Re={sm:{checkbox:"size-4",icon:"size-1.5"},md:{checkbox:"size-5",icon:"size-2"}},Ne={xs:"py-1 px-1 text-sm gap-0.5 [&>svg]:h-4 [&>svg]:w-4",sm:"py-2 px-2 text-base gap-1 [&>svg]:h-4 [&>svg]:w-4",md:"py-2.5 px-2.5 text-base gap-1 [&>svg]:h-5 [&>svg]:w-5"},Ae=["id","label","value","children","disabled","icon","inlineIcon","hideSelection","reversePosition","borderOn","badgeItem","useSwitch"],je=["id","children","value","disabled","size"];function Me(){return Me=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Me.apply(null,arguments)}function Ie(e){return Ie="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Ie(e)}function De(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Le(e,t){if(e){if("string"==typeof e)return Fe(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Fe(e,t):void 0}}function Fe(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var ze=(0,o.createContext)(),Be=function(){return(0,o.useContext)(ze)},Ve=function(e){var t,n=e.children,r=e.name,s=e.style,a=void 0===s?"simple":s,l=e.size,c=void 0===l?"md":l,u=e.value,d=e.defaultValue,f=e.by,h=void 0===f?"id":f,p=e.as,m=void 0===p?"div":p,g=e.onChange,v=e.className,y=e.disableGroup,b=void 0!==y&&y,x=e.vertical,w=void 0!==x&&x,E=e.columns,S=void 0===E?4:E,_=e.multiSelection,k=void 0!==_&&_,C=(0,o.useMemo)((function(){return void 0!==u}),[u]),P=(0,o.useMemo)((function(){return r||"radio-button-group-".concat(ce())}),[r]);t=C?u:k?null!=d?d:[]:d;var T,O,R=(T=(0,o.useState)(t),O=2,function(e){if(Array.isArray(e))return e}(T)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(T,O)||Le(T,O)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),N=R[0],A=R[1],j=(0,o.useCallback)((function(e){if(k)A((function(t){var n=t.includes(e)?t.filter((function(t){return t!==e})):[].concat(function(e){return function(e){if(Array.isArray(e))return Fe(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||Le(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(t),[e]);return"function"==typeof g&&g(n),n}));else{if(C||A(e),"function"!=typeof g)return;g(e)}}),[g]);v=te("grid grid-cols-4 gap-2",oe[S],"tile"===a&&"gap-0",w&&"grid-cols-1",v);var M=te("tile"===a?"border border-border-subtle border-solid rounded-md shadow-sm":"gap-6",v),I=function(){return i().createElement(ze.Provider,{value:{name:P,value:C?u:N,by:h,onChange:j,isControlled:C,disableAll:b,style:a,columns:S,multiSelection:k,size:c}},i().Children.map(n,(function(e){return(0,o.isValidElement)(e)?e:null})))};return i().createElement(i().Fragment,null,"tile"===a?i().createElement("div",{className:M},I()):i().createElement(m,m===o.Fragment?{}:{className:v},I()))};Ve.displayName="RadioButton.Group";var We=function(e,t){var n,r=e.id,s=e.label,a=e.value,l=e.children,c=e.disabled,u=e.icon,d=void 0===u?null:u,f=e.inlineIcon,h=void 0!==f&&f,p=e.hideSelection,m=void 0!==p&&p,g=e.reversePosition,v=void 0!==g&&g,y=e.borderOn,b=void 0!==y&&y,x=e.badgeItem,w=void 0===x?null:x,E=e.useSwitch,S=void 0!==E&&E,_=De(e,Ae),k=Be(),C=k.name,P=k.value,T=k.by,O=k.onChange,R=k.disableAll,N=k.checked,A=k.multiSelection,j=k.size,M="primary",I=(0,o.useMemo)((function(){return r||"radio-button-".concat(ce())}),[r]),D=(0,o.useMemo)((function(){return R||c}),[R,c]),L=(0,o.useMemo)((function(){return A?Array.isArray(P)&&P.includes(a):void 0!==N?N:Ie(P)===Ie(a)&&("string"==typeof P?P===a:Array.isArray(P)?P.includes(a):P[T]===a[T])}),[P,a,N]),F=(0,o.useCallback)((function(){return(0,o.isValidElement)(s)?s:s.heading?i().createElement("div",{className:te(!h&&"space-y-1.5 mt-[2px]",v&&(S?"ml-10":"ml-4"),h&&"flex gap-2")},d&&i().createElement("span",null,d," "),i().createElement("div",{className:te("space-y-1.5")},i().createElement("p",{className:te("text-text-primary text-sm font-medium leading-4 m-0",d&&"mt-1")},s.heading),s.description&&i().createElement("p",{className:"text-text-tertiary text-sm font-normal leading-5 m-0"},s.description))):null}),[s]);return"tile"===k.style?i().createElement($e,{id:r,label:s,value:a,disabled:c,size:j},l):i().createElement("label",{className:te("inline-flex items-center relative cursor-pointer transition-all duration-300",!!s&&"items-start justify-between min-w-[180px] ",b&&"border border-border-subtle border-solid rounded-md shadow-sm hover:ring-2 hover:ring-border-interactive",b&&L&&"ring-2 ring-border-interactive","sm"===j?"px-3 py-3":"px-4 py-4","pr-12",D&&"cursor-not-allowed"),htmlFor:I,onClick:function(){D||(A?O(a,!L):O(a))}},!!s&&i().createElement("label",{className:te("cursor-pointer",D&&"cursor-not-allowed"),htmlFor:I},F()),i().createElement("label",{className:te("absolute mr-[2px] right-3 flex items-center cursor-pointer rounded-full",v&&"left-0",D&&"cursor-not-allowed")},!!w&&w,!m&&(S?i().createElement(ge,{defaultValue:!1,size:"md"===j?"lg":"sm",onChange:function(){A?O(a,!L):O(a)},checked:L}):i().createElement("span",{className:"relative"},i().createElement("input",Me({ref:t,id:I,type:A?"checkbox":"radio",className:te("peer flex relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden !border-1.5 border-solid",!A&&"rounded-full",Oe[M].checkbox,Re[j].checkbox,D&&"disabled:bg-white checked:disabled:bg-white disabled:border-border-disabled checked:disabled:border-border-disabled cursor-not-allowed"),name:C,value:a,onChange:function(e){return O(e.target.value)},checked:L,disabled:D},_)),i().createElement("span",{className:te("inline-flex items-center absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100",Oe[M].icon,D&&"peer-disabled:text-border-disabled cursor-not-allowed")},A?i().createElement(Ee,{className:"sm"===j?"size-3":"size-4"}):i().createElement("div",{className:te("rounded-full bg-current","sm"===j&&"mt-[2px]",null===(n=Re[j])||void 0===n?void 0:n.icon)}))))))},Ue=(0,o.forwardRef)(We);Ue.displayName="RadioButton.Button";var $e=function(e){var t=e.id,n=e.children,r=e.value,s=e.disabled,a=e.size,l=void 0===a?"md":a,c=De(e,je),u=Be()||{},d=u.name,f=u.value,h=u.by,p=u.onChange,m=u.disableAll,g=u.checked,v=(0,o.useMemo)((function(){return t||"radio-button-".concat(ce())}),[t]),y=(0,o.useMemo)((function(){return m||s}),[m,s]),b=(0,o.useMemo)((function(){return void 0!==g?g:Ie(f)===Ie(r)&&("string"==typeof f?f===r:Array.isArray(f)?f.includes(r):f[h]===r[h])}),[f,r,g,h]),x=te("bg-background-primary text-primary cursor-pointer flex items-center justify-center","hover:bg-button-tertiary-hover","focus:outline-none",y?"text-text-disabled cursor-not-allowed":"",Ne[l],"border-0 border-r border-border-subtle border-solid");return i().createElement(i().Fragment,null,i().createElement("button",Me({type:"button",id:v,className:te(x,"first:rounded-tl first:rounded-bl first:border-0 first:border-r first:border-border-subtle last:rounded-tr last:rounded-br last:border-0",b&&"bg-button-disabled"),onClick:function(){p&&p(r)},disabled:y},c),i().createElement("input",{type:"hidden",value:r,name:d,checked:b,onChange:p}),n))},Ke=Object.assign(Ue,{Group:Ve,Button:Ue});const He=xe("X",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]);var qe=function(e,t){var n=e.label,r=void 0===n?"":n,o=e.size,i=void 0===o?"sm":o,s=e.className,a=void 0===s?"":s,l=e.type,c=void 0===l?"pill":l,u=e.variant,d=void 0===u?"neutral":u,f=e.icon,h=void 0===f?null:f,p=e.disabled,m=void 0!==p&&p,g=e.onClose,v=void 0===g?function(){}:g,y=e.closable,b=void 0!==y&&y,x=e.onMouseDown,w=void 0===x?function(){}:x,E={neutral:"bg-badge-background-gray hover:bg-badge-hover-gray text-badge-color-gray border-badge-border-gray",red:"bg-badge-background-red hover:bg-badge-hover-red text-badge-color-red border-badge-border-red",yellow:"bg-badge-background-yellow hover:bg-badge-hover-yellow text-badge-color-yellow border-badge-border-yellow",green:"bg-badge-background-green hover:bg-badge-hover-green text-badge-color-green border-badge-border-green",blue:"bg-badge-background-sky hover:bg-badge-hover-sky text-badge-color-sky border-badge-border-sky",inverse:"bg-background-inverse hover:bg-badge-hover-inverse text-text-inverse border-background-inverse",disabled:"bg-badge-background-disabled hover:bg-badge-hover-disabled text-badge-color-disabled border-badge-border-disabled disabled cursor-not-allowed"},S="",_="group relative justify-center flex items-center [&>svg]:h-4 [&>svg]:w-4 cursor-pointer";return m?(S=E.disabled,_+=" cursor-not-allowed disabled"):S=E[d],r?React.createElement("span",{className:te("font-medium border-badge-border-gray flex gap-1 items-center justify-center border border-solid",{xs:"py-0.5 px-1 text-xs",sm:"py-1 px-1.5 text-xs",md:"py-1 px-1.5 text-sm",lg:"py-1 px-1.5 text-base"}[i],{pill:"rounded-full",rounded:"rounded"}[c],S,a),ref:t},h?React.createElement("span",{className:"justify-center flex items-center [&>svg]:h-4 [&>svg]:w-4"},h):null,r,b&&React.createElement("span",{className:_,onClick:m?null:v,onMouseDown:w,role:"button",tabIndex:0},React.createElement("span",{className:"sr-only"},"Remove ".concat(r)),React.createElement(He,null),React.createElement("span",{className:"absolute -inset-1"}))):null},Ye=(0,o.forwardRef)(qe);Ye.displayName="Badge";var Ge=Ye,Xe=["id","defaultValue","value","size","className","disabled","onChange","error","onError"];function Je(){return Je=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Je.apply(null,arguments)}function Ze(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var Qe=function(e,t){var n,r,i=e.id,s=e.defaultValue,a=void 0===s?"":s,l=e.value,c=e.size,u=void 0===c?"sm":c,d=e.className,f=void 0===d?"":d,h=e.disabled,p=void 0!==h&&h,m=e.onChange,g=void 0===m?function(){}:m,v=e.error,y=void 0!==v&&v,b=e.onError,x=void 0===b?function(){}:b,w=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,Xe),E=(0,o.useMemo)((function(){return i||"input-textarea-".concat(ce())}),[i]),S=(0,o.useMemo)((function(){return void 0!==l}),[l]),_=(n=(0,o.useState)(a),r=2,function(e){if(Array.isArray(e))return e}(n)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(n,r)||function(e,t){if(e){if("string"==typeof e)return Ze(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Ze(e,t):void 0}}(n,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),k=_[0],C=_[1],P=(0,o.useCallback)((function(){return S?l:k}),[S,l,k]),T=p?"hover:border-border-disabled":"hover:border-border-strong",O=y?"focus:border-focus-error-border focus:ring-field-color-error bg-field-background-error":"",R=p?"border-border-disabled bg-field-background-disabled cursor-not-allowed text-text-disabled":"";return React.createElement("textarea",Je({ref:t,id:E,className:te("py-2 rounded border border-solid border-border-subtle bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary",R,{sm:"px-3 rounded text-xs",md:"px-3 rounded-md text-sm",lg:"px-4 rounded-lg text-base"}[u],"focus:border-focus-border focus:ring-2 focus:ring-toggle-on focus:ring-offset-2",T,O,f),disabled:p,onChange:function(e){if(!p){var t=e.target.value;S||C(t),"function"==typeof g&&g(t)}},onInvalid:x,value:P()},w))},et=(0,o.forwardRef)(Qe);et.displayName="TextArea";var tt=et,nt=function(e){var t,n,r,o,i=e.variant,s=void 0===i?"primary":i,a=e.size,l=void 0===a?"md":a,c=e.border,u=void 0===c?"subtle":c,d=e.url,f=void 0===d?"":d,h=e.children,p=e.className,m=null===(t={white:"text-text-primary bg-background-primary",gray:"text-text-primary bg-background-secondary",primary:"text-text-on-color bg-background-brand",primaryLight:"text-text-primary bg-brand-background-50",dark:"text-text-on-color bg-button-secondary"})||void 0===t?void 0:t[s],g=null===(n={xs:"w-5 h-5 [&>svg]:h-3 [&>svg]:w-3 text-xs",sm:"w-6 h-6 [&>svg]:h-4 [&>svg]:w-4 text-sm",md:"w-8 h-8 [&>svg]:h-5 [&>svg]:w-5 text-base",lg:"w-10 h-10 [&>svg]:h-6 [&>svg]:w-6 text-lg"})||void 0===n?void 0:n[l],v=null===(r={none:"",subtle:"border border-solid border-border-transparent-subtle",ring:"border-4 border-solid border-border-white"})||void 0===r?void 0:r[f&&"none"===u?"subtle":u],y=f?"bg-cover bg-center bg-no-repeat":"";return React.createElement("div",{className:te("rounded-full overflow-hidden flex items-center justify-center",!f&&m,g,v,y,p),style:f?{backgroundImage:"url(".concat(f,")")}:{}},h?"string"==typeof h?null==h||null===(o=h[0])||void 0===o?void 0:o.toUpperCase():h:null)};const rt=xe("Upload",[["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",key:"ih7n3h"}],["polyline",{points:"17 8 12 3 7 8",key:"t8dd8p"}],["line",{x1:"12",x2:"12",y1:"3",y2:"15",key:"widbto"}]]);var ot=["id","type","defaultValue","value","size","className","disabled","onChange","error","onError","prefix","suffix"];function it(){return it=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},it.apply(null,arguments)}function st(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return at(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?at(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function at(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var lt=function(e,t){var n=e.id,r=e.type,i=void 0===r?"text":r,s=e.defaultValue,a=void 0===s?"":s,l=e.value,c=e.size,u=void 0===c?"sm":c,d=e.className,f=void 0===d?"":d,h=e.disabled,p=void 0!==h&&h,m=e.onChange,g=void 0===m?function(){}:m,v=e.error,y=void 0!==v&&v,b=e.onError,x=void 0===b?function(){}:b,w=e.prefix,E=void 0===w?null:w,S=e.suffix,_=void 0===S?null:S,k=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,ot),C=(0,o.useMemo)((function(){return n||"input-".concat(i,"-").concat(ce())}),[n]),P=(0,o.useMemo)((function(){return void 0!==l}),[l]),T=st((0,o.useState)(a),2),O=T[0],R=T[1],N=st((0,o.useState)(null),2),A=N[0],j=N[1],M=(0,o.useCallback)((function(){return P?l:O}),[P,l,O]),I=function(e){var t;p||("file"===i?(t=e.target.files).length>0?j(t[0].name):j(null):t=e.target.value,P||"file"===i||R(t),"function"==typeof g&&g(t))},D="border border-solid border-border-subtle bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary w-full focus:outline-none",L={sm:"px-2 py-2 rounded",md:"px-2.5 py-2.5 rounded-md",lg:"px-3 py-3 rounded-lg"},F={sm:"text-xs",md:"text-base",lg:"text-base"},z={sm:E?"pl-8":"",md:E?"pl-9":"",lg:E?"pl-10":""},B={sm:_?"pr-8":"",md:_?"pr-9":"",lg:_?"pr-10":""},V=p?"hover:border-border-disabled":"hover:border-border-strong",W="focus:border-focus-border focus:ring-2 focus:ring-toggle-on focus:ring-offset-2",U=y?"focus:border-focus-error-border focus:ring-field-color-error bg-field-background-error":"",$=y?"focus:border-focus-error-border focus:ring-field-color-error":"",K=p?"border-border-disabled bg-field-background-disabled cursor-not-allowed text-text-disabled":"",H=p?"border-border-disabled cursor-not-allowed text-text-disabled file:text-text-tertiary":"",q="font-normal placeholder-text-tertiary text-text-primary pointer-events-none absolute inset-y-0 flex flex-1 items-center [&>svg]:h-4 [&>svg]:w-4",Y=p?"font-normal placeholder-text-tertiary text-icon-disabled pointer-events-none absolute inset-y-0 flex flex-1 items-center":"font-normal placeholder-text-tertiary text-field-placeholder pointer-events-none absolute inset-y-0 flex flex-1 items-center",G=A?"file:border-0 file:bg-transparent":"text-text-tertiary file:border-0 file:bg-transparent";return"file"===i?React.createElement("div",{className:te("relative flex focus-within:z-10",f)},React.createElement("input",it({ref:t,id:C,type:"file",className:te(D,H,L[u],F[u],W,V,$,G),disabled:p,onChange:I,onInvalid:x},k)),React.createElement("div",{className:te(Y,"right-0 pr-3",{sm:"[&>svg]:h-4 [&>svg]:w-4",md:"[&>svg]:h-5 [&>svg]:w-5",lg:"[&>svg]:h-6 [&>svg]:w-6"}[u])},React.createElement(rt,null))):React.createElement("div",{className:te("relative flex focus-within:z-10",f)},E?React.createElement("div",{className:te(q,"left-0 pl-3",F[u])},E):null,React.createElement("input",it({ref:t,id:C,type:i,className:te(D,K,L[u],F[u],z[u],B[u],W,V,U),disabled:p,onChange:I,onInvalid:x,value:M()},k)),_?React.createElement("div",{className:te(q,"right-0 pr-3",F[u])},_):null)},ct=(0,o.forwardRef)(lt);ct.displayName="Input";var ut=ct,dt=["children","tag","size","className","variant","required"];function ft(){return ft=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},ft.apply(null,arguments)}var ht=(0,o.forwardRef)((function(e,t){var n=e.children,r=void 0===n?null:n,o=e.tag,s=void 0===o?"label":o,a=e.size,l=void 0===a?"sm":a,c=e.className,u=void 0===c?"":c,d=e.variant,f=void 0===d?"neutral":d,h=e.required,p=void 0!==h&&h,m=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,dt);if(!r)return null;var g="";p&&(g="after:content-['*'] after:text-field-required after:ml-0.5");var v=s;return i().createElement(v,ft({ref:t,className:te("font-medium text-field-label flex items-center gap-0.5",{xs:"text-xs [&>*]:text-xs [&>svg]:h-3 [&>svg]:w-3",sm:"text-sm [&>*]:text-sm [&>svg]:h-4 [&>svg]:w-4",md:"text-base [&>*]:text-base [&>svg]:h-5 [&>svg]:w-5"}[l],{neutral:"text-field-label [&>*]:text-field-label",help:"text-field-helper [&>*]:text-field-helper",error:"text-support-error [&>*]:text-support-error",disabled:"text-field-color-disabled disabled cursor-not-allowed [&>*]:text-field-color-disabled"}[f],g,u)},m),r)})),pt=ht,mt=function(e){var t=e.title,n=void 0===t?null:t,r=e.description,o=void 0===r?null:r,i=e.icon,s=void 0===i?null:i,a=e.iconPosition,l=void 0===a?"right":a,c=e.tag,u=void 0===c?"h2":c,d=e.size,f=void 0===d?"sm":d,h=e.className,p=void 0===h?"":h,m={xs:"gap-1 [&>svg]:size-3.5",sm:"gap-1 [&>svg]:size-4",md:"gap-1.5 [&>svg]:size-5",lg:"gap-1.5 [&>svg]:size-5"};if(!n)return null;var g=function(){var e=u;return React.createElement(e,{className:te("font-semibold p-0 m-0",{xs:"text-base [&>*]:text-base gap-1",sm:"text-lg [&>*]:text-lg gap-1",md:"text-xl [&>*]:text-xl gap-1.5",lg:"text-2xl [&>*]:text-2xl gap-1.5"}[f])},n)};return o?React.createElement("div",{className:p},React.createElement("div",null,s&&"left"===l&&React.createElement("div",{className:te("flex items-center",m[f])},s,g()),s&&"right"===l&&React.createElement("div",{className:te("flex items-center",m[f])},g(),s),!s&&g()),React.createElement("span",{className:te("text-text-secondary font-normal",{xs:"text-base",sm:"text-lg",md:"text-xl",lg:"text-2xl"}[f])},o)):React.createElement("div",{className:p},s&&"left"===l&&React.createElement("div",{className:te("flex items-center",m[f])},s,g()),s&&"right"===l&&React.createElement("div",{className:te("flex items-center",m[f])},g(),s),!s&&g())};const gt=xe("LoaderCircle",[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56",key:"13zald"}]]);var vt=function(e){var t,n,r=e.variant,o=void 0===r?"primary":r,i=e.size,s=void 0===i?"md":i,a=e.icon,l=void 0===a?null:a,c=e.className,u=void 0===c?"":c,d=null===(t={primary:"text-brand-primary-600 bg-background-primary",secondary:"text-background-primary bg-brand-primary-600"})||void 0===t?void 0:t[o],f=null===(n={sm:"[&>svg]:h-4 [&>svg]:w-4",md:"[&>svg]:h-5 [&>svg]:w-5",lg:"[&>svg]:h-6 [&>svg]:w-6",xl:"[&>svg]:h-8 [&>svg]:w-8"})||void 0===n?void 0:n[s];return React.createElement("span",{className:te("flex",f,d,u)},l||React.createElement(gt,{className:"animate-spin"}))},yt=function(e){var t=e.progress,n=void 0===t?0:t,r=e.speed,o=void 0===r?200:r,i=e.className,s=void 0===i?"":i;if(!n)return null;var a=n;n<0&&(a=0),n>100&&(a=100);var l="translateX(-".concat(100-a,"%)"),c="h-2 rounded-full bg-background-brand absolute left-0 top-0 w-full bottom-0 origin-left transition-transform duration-".concat(o," ease-linear");return React.createElement("div",{className:te("h-2 rounded-full bg-misc-progress-background overflow-hidden relative",s),role:"progressbar","aria-valuenow":a,"aria-valuemin":"0","aria-valuemax":"100"},React.createElement("div",{className:c,style:{transform:l}}))};function bt(e){return Et(e)?(e.nodeName||"").toLowerCase():"#document"}function xt(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function wt(e){var t;return null==(t=(Et(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function Et(e){return e instanceof Node||e instanceof xt(e).Node}function St(e){return e instanceof Element||e instanceof xt(e).Element}function _t(e){return e instanceof HTMLElement||e instanceof xt(e).HTMLElement}function kt(e){return"undefined"!=typeof ShadowRoot&&(e instanceof ShadowRoot||e instanceof xt(e).ShadowRoot)}function Ct(e){const{overflow:t,overflowX:n,overflowY:r,display:o}=At(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&!["inline","contents"].includes(o)}function Pt(e){return["table","td","th"].includes(bt(e))}function Tt(e){return[":popover-open",":modal"].some((t=>{try{return e.matches(t)}catch(e){return!1}}))}function Ot(e){const t=Rt(),n=St(e)?At(e):e;return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!t&&!!n.backdropFilter&&"none"!==n.backdropFilter||!t&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((e=>(n.willChange||"").includes(e)))||["paint","layout","strict","content"].some((e=>(n.contain||"").includes(e)))}function Rt(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function Nt(e){return["html","body","#document"].includes(bt(e))}function At(e){return xt(e).getComputedStyle(e)}function jt(e){return St(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function Mt(e){if("html"===bt(e))return e;const t=e.assignedSlot||e.parentNode||kt(e)&&e.host||wt(e);return kt(t)?t.host:t}function It(e){const t=Mt(e);return Nt(t)?e.ownerDocument?e.ownerDocument.body:e.body:_t(t)&&Ct(t)?t:It(t)}function Dt(e,t,n){var r;void 0===t&&(t=[]),void 0===n&&(n=!0);const o=It(e),i=o===(null==(r=e.ownerDocument)?void 0:r.body),s=xt(o);if(i){const e=Lt(s);return t.concat(s,s.visualViewport||[],Ct(o)?o:[],e&&n?Dt(e):[])}return t.concat(o,Dt(o,[],n))}function Lt(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function Ft(e){let t=e.activeElement;for(;null!=(null==(n=t)||null==(n=n.shadowRoot)?void 0:n.activeElement);){var n;t=t.shadowRoot.activeElement}return t}function zt(e,t){if(!e||!t)return!1;const n=null==t.getRootNode?void 0:t.getRootNode();if(e.contains(t))return!0;if(n&&kt(n)){let n=t;for(;n;){if(e===n)return!0;n=n.parentNode||n.host}}return!1}function Bt(){const e=navigator.userAgentData;return null!=e&&e.platform?e.platform:navigator.platform}function Vt(){const e=navigator.userAgentData;return e&&Array.isArray(e.brands)?e.brands.map((e=>{let{brand:t,version:n}=e;return t+"/"+n})).join(" "):navigator.userAgent}function Wt(e){return!(0!==e.mozInputSource||!e.isTrusted)||(Kt()&&e.pointerType?"click"===e.type&&1===e.buttons:0===e.detail&&!e.pointerType)}function Ut(e){return!Vt().includes("jsdom/")&&(!Kt()&&0===e.width&&0===e.height||Kt()&&1===e.width&&1===e.height&&0===e.pressure&&0===e.detail&&"mouse"===e.pointerType||e.width<1&&e.height<1&&0===e.pressure&&0===e.detail&&"touch"===e.pointerType)}function $t(){return/apple/i.test(navigator.vendor)}function Kt(){const e=/android/i;return e.test(Bt())||e.test(Vt())}function Ht(){return Bt().toLowerCase().startsWith("mac")&&!navigator.maxTouchPoints}function qt(e,t){const n=["mouse","pen"];return t||n.push("",void 0),n.includes(e)}function Yt(e){return(null==e?void 0:e.ownerDocument)||document}function Gt(e,t){if(null==t)return!1;if("composedPath"in e)return e.composedPath().includes(t);const n=e;return null!=n.target&&t.contains(n.target)}function Xt(e){return"composedPath"in e?e.composedPath()[0]:e.target}const Jt="input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";function Zt(e){return _t(e)&&e.matches(Jt)}function Qt(e){e.preventDefault(),e.stopPropagation()}function en(e){return!!e&&"combobox"===e.getAttribute("role")&&Zt(e)}const tn=Math.min,nn=Math.max,rn=Math.round,on=Math.floor,sn=e=>({x:e,y:e}),an={left:"right",right:"left",bottom:"top",top:"bottom"},ln={start:"end",end:"start"};function cn(e,t,n){return nn(e,tn(t,n))}function un(e,t){return"function"==typeof e?e(t):e}function dn(e){return e.split("-")[0]}function fn(e){return e.split("-")[1]}function hn(e){return"x"===e?"y":"x"}function pn(e){return"y"===e?"height":"width"}function mn(e){return["top","bottom"].includes(dn(e))?"y":"x"}function gn(e){return hn(mn(e))}function vn(e){return e.replace(/start|end/g,(e=>ln[e]))}function yn(e){return e.replace(/left|right|bottom|top/g,(e=>an[e]))}function bn(e){return"number"!=typeof e?function(e){return{top:0,right:0,bottom:0,left:0,...e}}(e):{top:e,right:e,bottom:e,left:e}}function xn(e){const{x:t,y:n,width:r,height:o}=e;return{width:r,height:o,top:n,left:t,right:t+r,bottom:n+o,x:t,y:n}}var wn=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[href]:not([inert])","button:not([inert])","[tabindex]:not(slot):not([inert])","audio[controls]:not([inert])","video[controls]:not([inert])",'[contenteditable]:not([contenteditable="false"]):not([inert])',"details>summary:first-of-type:not([inert])","details:not([inert])"].join(","),En="undefined"==typeof Element,Sn=En?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,kn=!En&&Element.prototype.getRootNode?function(e){var t;return null==e||null===(t=e.getRootNode)||void 0===t?void 0:t.call(e)}:function(e){return null==e?void 0:e.ownerDocument},Cn=function e(t,n){var r;void 0===n&&(n=!0);var o=null==t||null===(r=t.getAttribute)||void 0===r?void 0:r.call(t,"inert");return""===o||"true"===o||n&&t&&e(t.parentNode)},Pn=function e(t,n,r){for(var o=[],i=Array.from(t);i.length;){var s=i.shift();if(!Cn(s,!1))if("SLOT"===s.tagName){var a=s.assignedElements(),l=e(a.length?a:s.children,!0,r);r.flatten?o.push.apply(o,l):o.push({scopeParent:s,candidates:l})}else{Sn.call(s,wn)&&r.filter(s)&&(n||!t.includes(s))&&o.push(s);var c=s.shadowRoot||"function"==typeof r.getShadowRoot&&r.getShadowRoot(s),u=!Cn(c,!1)&&(!r.shadowRootFilter||r.shadowRootFilter(s));if(c&&u){var d=e(!0===c?s.children:c.children,!0,r);r.flatten?o.push.apply(o,d):o.push({scopeParent:s,candidates:d})}else i.unshift.apply(i,s.children)}}return o},Tn=function(e){return!isNaN(parseInt(e.getAttribute("tabindex"),10))},On=function(e){if(!e)throw new Error("No node provided");return e.tabIndex<0&&(/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName)||function(e){var t,n=null==e||null===(t=e.getAttribute)||void 0===t?void 0:t.call(e,"contenteditable");return""===n||"true"===n}(e))&&!Tn(e)?0:e.tabIndex},Rn=function(e,t){return e.tabIndex===t.tabIndex?e.documentOrder-t.documentOrder:e.tabIndex-t.tabIndex},Nn=function(e){return"INPUT"===e.tagName},An=function(e){var t=e.getBoundingClientRect(),n=t.width,r=t.height;return 0===n&&0===r},jn=function(e,t){return!(t.disabled||Cn(t)||function(e){return Nn(e)&&"hidden"===e.type}(t)||function(e,t){var n=t.displayCheck,r=t.getShadowRoot;if("hidden"===getComputedStyle(e).visibility)return!0;var o=Sn.call(e,"details>summary:first-of-type")?e.parentElement:e;if(Sn.call(o,"details:not([open]) *"))return!0;if(n&&"full"!==n&&"legacy-full"!==n){if("non-zero-area"===n)return An(e)}else{if("function"==typeof r){for(var i=e;e;){var s=e.parentElement,a=kn(e);if(s&&!s.shadowRoot&&!0===r(s))return An(e);e=e.assignedSlot?e.assignedSlot:s||a===e.ownerDocument?s:a.host}e=i}if(function(e){var t,n,r,o,i=e&&kn(e),s=null===(t=i)||void 0===t?void 0:t.host,a=!1;if(i&&i!==e)for(a=!!(null!==(n=s)&&void 0!==n&&null!==(r=n.ownerDocument)&&void 0!==r&&r.contains(s)||null!=e&&null!==(o=e.ownerDocument)&&void 0!==o&&o.contains(e));!a&&s;){var l,c,u;a=!(null===(c=s=null===(l=i=kn(s))||void 0===l?void 0:l.host)||void 0===c||null===(u=c.ownerDocument)||void 0===u||!u.contains(s))}return a}(e))return!e.getClientRects().length;if("legacy-full"!==n)return!0}return!1}(t,e)||function(e){return"DETAILS"===e.tagName&&Array.prototype.slice.apply(e.children).some((function(e){return"SUMMARY"===e.tagName}))}(t)||function(e){if(/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))for(var t=e.parentElement;t;){if("FIELDSET"===t.tagName&&t.disabled){for(var n=0;n<t.children.length;n++){var r=t.children.item(n);if("LEGEND"===r.tagName)return!!Sn.call(t,"fieldset[disabled] *")||!r.contains(e)}return!0}t=t.parentElement}return!1}(t))},Mn=function(e,t){return!(function(e){return function(e){return Nn(e)&&"radio"===e.type}(e)&&!function(e){if(!e.name)return!0;var t,n=e.form||kn(e),r=function(e){return n.querySelectorAll('input[type="radio"][name="'+e+'"]')};if("undefined"!=typeof window&&void 0!==window.CSS&&"function"==typeof window.CSS.escape)t=r(window.CSS.escape(e.name));else try{t=r(e.name)}catch(e){return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s",e.message),!1}var o=function(e,t){for(var n=0;n<e.length;n++)if(e[n].checked&&e[n].form===t)return e[n]}(t,e.form);return!o||o===e}(e)}(t)||On(t)<0||!jn(e,t))},In=function(e){var t=parseInt(e.getAttribute("tabindex"),10);return!!(isNaN(t)||t>=0)},Dn=function e(t){var n=[],r=[];return t.forEach((function(t,o){var i=!!t.scopeParent,s=i?t.scopeParent:t,a=function(e,t){var n=On(e);return n<0&&t&&!Tn(e)?0:n}(s,i),l=i?e(t.candidates):s;0===a?i?n.push.apply(n,l):n.push(s):r.push({documentOrder:o,tabIndex:a,item:t,isScope:i,content:l})})),r.sort(Rn).reduce((function(e,t){return t.isScope?e.push.apply(e,t.content):e.push(t.content),e}),[]).concat(n)},Ln=function(e,t){var n;return n=(t=t||{}).getShadowRoot?Pn([e],t.includeContainer,{filter:Mn.bind(null,t),flatten:!1,getShadowRoot:t.getShadowRoot,shadowRootFilter:In}):function(e,t,n){if(Cn(e))return[];var r=Array.prototype.slice.apply(e.querySelectorAll(wn));return t&&Sn.call(e,wn)&&r.unshift(e),r.filter(n)}(e,t.includeContainer,Mn.bind(null,t)),Dn(n)},Fn=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return!1!==Sn.call(e,wn)&&Mn(t,e)},zn=window.ReactDOM;function Bn(e,t,n){let{reference:r,floating:o}=e;const i=mn(t),s=gn(t),a=pn(s),l=dn(t),c="y"===i,u=r.x+r.width/2-o.width/2,d=r.y+r.height/2-o.height/2,f=r[a]/2-o[a]/2;let h;switch(l){case"top":h={x:u,y:r.y-o.height};break;case"bottom":h={x:u,y:r.y+r.height};break;case"right":h={x:r.x+r.width,y:d};break;case"left":h={x:r.x-o.width,y:d};break;default:h={x:r.x,y:r.y}}switch(fn(t)){case"start":h[s]-=f*(n&&c?-1:1);break;case"end":h[s]+=f*(n&&c?-1:1)}return h}async function Vn(e,t){var n;void 0===t&&(t={});const{x:r,y:o,platform:i,rects:s,elements:a,strategy:l}=e,{boundary:c="clippingAncestors",rootBoundary:u="viewport",elementContext:d="floating",altBoundary:f=!1,padding:h=0}=un(t,e),p=bn(h),m=a[f?"floating"===d?"reference":"floating":d],g=xn(await i.getClippingRect({element:null==(n=await(null==i.isElement?void 0:i.isElement(m)))||n?m:m.contextElement||await(null==i.getDocumentElement?void 0:i.getDocumentElement(a.floating)),boundary:c,rootBoundary:u,strategy:l})),v="floating"===d?{x:r,y:o,width:s.floating.width,height:s.floating.height}:s.reference,y=await(null==i.getOffsetParent?void 0:i.getOffsetParent(a.floating)),b=await(null==i.isElement?void 0:i.isElement(y))&&await(null==i.getScale?void 0:i.getScale(y))||{x:1,y:1},x=xn(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({elements:a,rect:v,offsetParent:y,strategy:l}):v);return{top:(g.top-x.top+p.top)/b.y,bottom:(x.bottom-g.bottom+p.bottom)/b.y,left:(g.left-x.left+p.left)/b.x,right:(x.right-g.right+p.right)/b.x}}function Wn(e){const t=At(e);let n=parseFloat(t.width)||0,r=parseFloat(t.height)||0;const o=_t(e),i=o?e.offsetWidth:n,s=o?e.offsetHeight:r,a=rn(n)!==i||rn(r)!==s;return a&&(n=i,r=s),{width:n,height:r,$:a}}function Un(e){return St(e)?e:e.contextElement}function $n(e){const t=Un(e);if(!_t(t))return sn(1);const n=t.getBoundingClientRect(),{width:r,height:o,$:i}=Wn(t);let s=(i?rn(n.width):n.width)/r,a=(i?rn(n.height):n.height)/o;return s&&Number.isFinite(s)||(s=1),a&&Number.isFinite(a)||(a=1),{x:s,y:a}}const Kn=sn(0);function Hn(e){const t=xt(e);return Rt()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:Kn}function qn(e,t,n,r){void 0===t&&(t=!1),void 0===n&&(n=!1);const o=e.getBoundingClientRect(),i=Un(e);let s=sn(1);t&&(r?St(r)&&(s=$n(r)):s=$n(e));const a=function(e,t,n){return void 0===t&&(t=!1),!(!n||t&&n!==xt(e))&&t}(i,n,r)?Hn(i):sn(0);let l=(o.left+a.x)/s.x,c=(o.top+a.y)/s.y,u=o.width/s.x,d=o.height/s.y;if(i){const e=xt(i),t=r&&St(r)?xt(r):r;let n=e,o=Lt(n);for(;o&&r&&t!==n;){const e=$n(o),t=o.getBoundingClientRect(),r=At(o),i=t.left+(o.clientLeft+parseFloat(r.paddingLeft))*e.x,s=t.top+(o.clientTop+parseFloat(r.paddingTop))*e.y;l*=e.x,c*=e.y,u*=e.x,d*=e.y,l+=i,c+=s,n=xt(o),o=Lt(n)}}return xn({width:u,height:d,x:l,y:c})}function Yn(e){return qn(wt(e)).left+jt(e).scrollLeft}function Gn(e,t,n){let r;if("viewport"===t)r=function(e,t){const n=xt(e),r=wt(e),o=n.visualViewport;let i=r.clientWidth,s=r.clientHeight,a=0,l=0;if(o){i=o.width,s=o.height;const e=Rt();(!e||e&&"fixed"===t)&&(a=o.offsetLeft,l=o.offsetTop)}return{width:i,height:s,x:a,y:l}}(e,n);else if("document"===t)r=function(e){const t=wt(e),n=jt(e),r=e.ownerDocument.body,o=nn(t.scrollWidth,t.clientWidth,r.scrollWidth,r.clientWidth),i=nn(t.scrollHeight,t.clientHeight,r.scrollHeight,r.clientHeight);let s=-n.scrollLeft+Yn(e);const a=-n.scrollTop;return"rtl"===At(r).direction&&(s+=nn(t.clientWidth,r.clientWidth)-o),{width:o,height:i,x:s,y:a}}(wt(e));else if(St(t))r=function(e,t){const n=qn(e,!0,"fixed"===t),r=n.top+e.clientTop,o=n.left+e.clientLeft,i=_t(e)?$n(e):sn(1);return{width:e.clientWidth*i.x,height:e.clientHeight*i.y,x:o*i.x,y:r*i.y}}(t,n);else{const n=Hn(e);r={...t,x:t.x-n.x,y:t.y-n.y}}return xn(r)}function Xn(e,t){const n=Mt(e);return!(n===t||!St(n)||Nt(n))&&("fixed"===At(n).position||Xn(n,t))}function Jn(e,t,n){const r=_t(t),o=wt(t),i="fixed"===n,s=qn(e,!0,i,t);let a={scrollLeft:0,scrollTop:0};const l=sn(0);if(r||!r&&!i)if(("body"!==bt(t)||Ct(o))&&(a=jt(t)),r){const e=qn(t,!0,i,t);l.x=e.x+t.clientLeft,l.y=e.y+t.clientTop}else o&&(l.x=Yn(o));return{x:s.left+a.scrollLeft-l.x,y:s.top+a.scrollTop-l.y,width:s.width,height:s.height}}function Zn(e){return"static"===At(e).position}function Qn(e,t){return _t(e)&&"fixed"!==At(e).position?t?t(e):e.offsetParent:null}function er(e,t){const n=xt(e);if(Tt(e))return n;if(!_t(e)){let t=Mt(e);for(;t&&!Nt(t);){if(St(t)&&!Zn(t))return t;t=Mt(t)}return n}let r=Qn(e,t);for(;r&&Pt(r)&&Zn(r);)r=Qn(r,t);return r&&Nt(r)&&Zn(r)&&!Ot(r)?n:r||function(e){let t=Mt(e);for(;_t(t)&&!Nt(t);){if(Ot(t))return t;if(Tt(t))return null;t=Mt(t)}return null}(e)||n}const tr={convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{elements:t,rect:n,offsetParent:r,strategy:o}=e;const i="fixed"===o,s=wt(r),a=!!t&&Tt(t.floating);if(r===s||a&&i)return n;let l={scrollLeft:0,scrollTop:0},c=sn(1);const u=sn(0),d=_t(r);if((d||!d&&!i)&&(("body"!==bt(r)||Ct(s))&&(l=jt(r)),_t(r))){const e=qn(r);c=$n(r),u.x=e.x+r.clientLeft,u.y=e.y+r.clientTop}return{width:n.width*c.x,height:n.height*c.y,x:n.x*c.x-l.scrollLeft*c.x+u.x,y:n.y*c.y-l.scrollTop*c.y+u.y}},getDocumentElement:wt,getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:r,strategy:o}=e;const i=[..."clippingAncestors"===n?Tt(t)?[]:function(e,t){const n=t.get(e);if(n)return n;let r=Dt(e,[],!1).filter((e=>St(e)&&"body"!==bt(e))),o=null;const i="fixed"===At(e).position;let s=i?Mt(e):e;for(;St(s)&&!Nt(s);){const t=At(s),n=Ot(s);n||"fixed"!==t.position||(o=null),(i?!n&&!o:!n&&"static"===t.position&&o&&["absolute","fixed"].includes(o.position)||Ct(s)&&!n&&Xn(e,s))?r=r.filter((e=>e!==s)):o=t,s=Mt(s)}return t.set(e,r),r}(t,this._c):[].concat(n),r],s=i[0],a=i.reduce(((e,n)=>{const r=Gn(t,n,o);return e.top=nn(r.top,e.top),e.right=tn(r.right,e.right),e.bottom=tn(r.bottom,e.bottom),e.left=nn(r.left,e.left),e}),Gn(t,s,o));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}},getOffsetParent:er,getElementRects:async function(e){const t=this.getOffsetParent||er,n=this.getDimensions,r=await n(e.floating);return{reference:Jn(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:r.width,height:r.height}}},getClientRects:function(e){return Array.from(e.getClientRects())},getDimensions:function(e){const{width:t,height:n}=Wn(e);return{width:t,height:n}},getScale:$n,isElement:St,isRTL:function(e){return"rtl"===At(e).direction}};function nr(e,t,n,r){void 0===r&&(r={});const{ancestorScroll:o=!0,ancestorResize:i=!0,elementResize:s="function"==typeof ResizeObserver,layoutShift:a="function"==typeof IntersectionObserver,animationFrame:l=!1}=r,c=Un(e),u=o||i?[...c?Dt(c):[],...Dt(t)]:[];u.forEach((e=>{o&&e.addEventListener("scroll",n,{passive:!0}),i&&e.addEventListener("resize",n)}));const d=c&&a?function(e,t){let n,r=null;const o=wt(e);function i(){var e;clearTimeout(n),null==(e=r)||e.disconnect(),r=null}return function s(a,l){void 0===a&&(a=!1),void 0===l&&(l=1),i();const{left:c,top:u,width:d,height:f}=e.getBoundingClientRect();if(a||t(),!d||!f)return;const h={rootMargin:-on(u)+"px "+-on(o.clientWidth-(c+d))+"px "+-on(o.clientHeight-(u+f))+"px "+-on(c)+"px",threshold:nn(0,tn(1,l))||1};let p=!0;function m(e){const t=e[0].intersectionRatio;if(t!==l){if(!p)return s();t?s(!1,t):n=setTimeout((()=>{s(!1,1e-7)}),1e3)}p=!1}try{r=new IntersectionObserver(m,{...h,root:o.ownerDocument})}catch(e){r=new IntersectionObserver(m,h)}r.observe(e)}(!0),i}(c,n):null;let f,h=-1,p=null;s&&(p=new ResizeObserver((e=>{let[r]=e;r&&r.target===c&&p&&(p.unobserve(t),cancelAnimationFrame(h),h=requestAnimationFrame((()=>{var e;null==(e=p)||e.observe(t)}))),n()})),c&&!l&&p.observe(c),p.observe(t));let m=l?qn(e):null;return l&&function t(){const r=qn(e);!m||r.x===m.x&&r.y===m.y&&r.width===m.width&&r.height===m.height||n(),m=r,f=requestAnimationFrame(t)}(),n(),()=>{var e;u.forEach((e=>{o&&e.removeEventListener("scroll",n),i&&e.removeEventListener("resize",n)})),null==d||d(),null==(e=p)||e.disconnect(),p=null,l&&cancelAnimationFrame(f)}}const rr=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var n,r;const{x:o,y:i,placement:s,middlewareData:a}=t,l=await async function(e,t){const{placement:n,platform:r,elements:o}=e,i=await(null==r.isRTL?void 0:r.isRTL(o.floating)),s=dn(n),a=fn(n),l="y"===mn(n),c=["left","top"].includes(s)?-1:1,u=i&&l?-1:1,d=un(t,e);let{mainAxis:f,crossAxis:h,alignmentAxis:p}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...d};return a&&"number"==typeof p&&(h="end"===a?-1*p:p),l?{x:h*u,y:f*c}:{x:f*c,y:h*u}}(t,e);return s===(null==(n=a.offset)?void 0:n.placement)&&null!=(r=a.arrow)&&r.alignmentOffset?{}:{x:o+l.x,y:i+l.y,data:{...l,placement:s}}}}},or=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){const{x:n,y:r,placement:o}=t,{mainAxis:i=!0,crossAxis:s=!1,limiter:a={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...l}=un(e,t),c={x:n,y:r},u=await Vn(t,l),d=mn(dn(o)),f=hn(d);let h=c[f],p=c[d];if(i){const e="y"===f?"bottom":"right";h=cn(h+u["y"===f?"top":"left"],h,h-u[e])}if(s){const e="y"===d?"bottom":"right";p=cn(p+u["y"===d?"top":"left"],p,p-u[e])}const m=a.fn({...t,[f]:h,[d]:p});return{...m,data:{x:m.x-n,y:m.y-r}}}}},ir=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var n,r;const{placement:o,middlewareData:i,rects:s,initialPlacement:a,platform:l,elements:c}=t,{mainAxis:u=!0,crossAxis:d=!0,fallbackPlacements:f,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:p="none",flipAlignment:m=!0,...g}=un(e,t);if(null!=(n=i.arrow)&&n.alignmentOffset)return{};const v=dn(o),y=mn(a),b=dn(a)===a,x=await(null==l.isRTL?void 0:l.isRTL(c.floating)),w=f||(b||!m?[yn(a)]:function(e){const t=yn(e);return[vn(e),t,vn(t)]}(a)),E="none"!==p;!f&&E&&w.push(...function(e,t,n,r){const o=fn(e);let i=function(e,t,n){const r=["left","right"],o=["right","left"],i=["top","bottom"],s=["bottom","top"];switch(e){case"top":case"bottom":return n?t?o:r:t?r:o;case"left":case"right":return t?i:s;default:return[]}}(dn(e),"start"===n,r);return o&&(i=i.map((e=>e+"-"+o)),t&&(i=i.concat(i.map(vn)))),i}(a,m,p,x));const S=[a,...w],_=await Vn(t,g),k=[];let C=(null==(r=i.flip)?void 0:r.overflows)||[];if(u&&k.push(_[v]),d){const e=function(e,t,n){void 0===n&&(n=!1);const r=fn(e),o=gn(e),i=pn(o);let s="x"===o?r===(n?"end":"start")?"right":"left":"start"===r?"bottom":"top";return t.reference[i]>t.floating[i]&&(s=yn(s)),[s,yn(s)]}(o,s,x);k.push(_[e[0]],_[e[1]])}if(C=[...C,{placement:o,overflows:k}],!k.every((e=>e<=0))){var P,T;const e=((null==(P=i.flip)?void 0:P.index)||0)+1,t=S[e];if(t)return{data:{index:e,overflows:C},reset:{placement:t}};let n=null==(T=C.filter((e=>e.overflows[0]<=0)).sort(((e,t)=>e.overflows[1]-t.overflows[1]))[0])?void 0:T.placement;if(!n)switch(h){case"bestFit":{var O;const e=null==(O=C.filter((e=>{if(E){const t=mn(e.placement);return t===y||"y"===t}return!0})).map((e=>[e.placement,e.overflows.filter((e=>e>0)).reduce(((e,t)=>e+t),0)])).sort(((e,t)=>e[1]-t[1]))[0])?void 0:O[0];e&&(n=e);break}case"initialPlacement":n=a}if(o!==n)return{reset:{placement:n}}}return{}}}},sr=function(e){return void 0===e&&(e={}),{name:"size",options:e,async fn(t){const{placement:n,rects:r,platform:o,elements:i}=t,{apply:s=()=>{},...a}=un(e,t),l=await Vn(t,a),c=dn(n),u=fn(n),d="y"===mn(n),{width:f,height:h}=r.floating;let p,m;"top"===c||"bottom"===c?(p=c,m=u===(await(null==o.isRTL?void 0:o.isRTL(i.floating))?"start":"end")?"left":"right"):(m=c,p="end"===u?"top":"bottom");const g=h-l.top-l.bottom,v=f-l.left-l.right,y=tn(h-l[p],g),b=tn(f-l[m],v),x=!t.middlewareData.shift;let w=y,E=b;if(d?E=u||x?tn(b,v):v:w=u||x?tn(y,g):g,x&&!u){const e=nn(l.left,0),t=nn(l.right,0),n=nn(l.top,0),r=nn(l.bottom,0);d?E=f-2*(0!==e||0!==t?e+t:nn(l.left,l.right)):w=h-2*(0!==n||0!==r?n+r:nn(l.top,l.bottom))}await s({...t,availableWidth:E,availableHeight:w});const S=await o.getDimensions(i.floating);return f!==S.width||h!==S.height?{reset:{rects:!0}}:{}}}},ar=e=>({name:"arrow",options:e,async fn(t){const{x:n,y:r,placement:o,rects:i,platform:s,elements:a,middlewareData:l}=t,{element:c,padding:u=0}=un(e,t)||{};if(null==c)return{};const d=bn(u),f={x:n,y:r},h=gn(o),p=pn(h),m=await s.getDimensions(c),g="y"===h,v=g?"top":"left",y=g?"bottom":"right",b=g?"clientHeight":"clientWidth",x=i.reference[p]+i.reference[h]-f[h]-i.floating[p],w=f[h]-i.reference[h],E=await(null==s.getOffsetParent?void 0:s.getOffsetParent(c));let S=E?E[b]:0;S&&await(null==s.isElement?void 0:s.isElement(E))||(S=a.floating[b]||i.floating[p]);const _=x/2-w/2,k=S/2-m[p]/2-1,C=tn(d[v],k),P=tn(d[y],k),T=C,O=S-m[p]-P,R=S/2-m[p]/2+_,N=cn(T,R,O),A=!l.arrow&&null!=fn(o)&&R!==N&&i.reference[p]/2-(R<T?C:P)-m[p]/2<0,j=A?R<T?R-T:R-O:0;return{[h]:f[h]+j,data:{[h]:N,centerOffset:R-N-j,...A&&{alignmentOffset:j}},reset:A}}}),lr=(e,t,n)=>{const r=new Map,o={platform:tr,...n},i={...o.platform,_c:r};return(async(e,t,n)=>{const{placement:r="bottom",strategy:o="absolute",middleware:i=[],platform:s}=n,a=i.filter(Boolean),l=await(null==s.isRTL?void 0:s.isRTL(t));let c=await s.getElementRects({reference:e,floating:t,strategy:o}),{x:u,y:d}=Bn(c,r,l),f=r,h={},p=0;for(let n=0;n<a.length;n++){const{name:i,fn:m}=a[n],{x:g,y:v,data:y,reset:b}=await m({x:u,y:d,initialPlacement:r,placement:f,strategy:o,middlewareData:h,rects:c,platform:s,elements:{reference:e,floating:t}});u=null!=g?g:u,d=null!=v?v:d,h={...h,[i]:{...h[i],...y}},b&&p<=50&&(p++,"object"==typeof b&&(b.placement&&(f=b.placement),b.rects&&(c=!0===b.rects?await s.getElementRects({reference:e,floating:t,strategy:o}):b.rects),({x:u,y:d}=Bn(c,f,l))),n=-1)}return{x:u,y:d,placement:f,strategy:o,middlewareData:h}})(e,t,{...o,platform:i})};var cr="undefined"!=typeof document?o.useLayoutEffect:o.useEffect;function ur(e,t){if(e===t)return!0;if(typeof e!=typeof t)return!1;if("function"==typeof e&&e.toString()===t.toString())return!0;let n,r,o;if(e&&t&&"object"==typeof e){if(Array.isArray(e)){if(n=e.length,n!==t.length)return!1;for(r=n;0!=r--;)if(!ur(e[r],t[r]))return!1;return!0}if(o=Object.keys(e),n=o.length,n!==Object.keys(t).length)return!1;for(r=n;0!=r--;)if(!{}.hasOwnProperty.call(t,o[r]))return!1;for(r=n;0!=r--;){const n=o[r];if(!("_owner"===n&&e.$$typeof||ur(e[n],t[n])))return!1}return!0}return e!=e&&t!=t}function dr(e){return"undefined"==typeof window?1:(e.ownerDocument.defaultView||window).devicePixelRatio||1}function fr(e,t){const n=dr(e);return Math.round(t*n)/n}function hr(e){const t=o.useRef(e);return cr((()=>{t.current=e})),t}const pr=e=>({name:"arrow",options:e,fn(t){const{element:n,padding:r}="function"==typeof e?e(t):e;return n&&(o=n,{}.hasOwnProperty.call(o,"current"))?null!=n.current?ar({element:n.current,padding:r}).fn(t):{}:n?ar({element:n,padding:r}).fn(t):{};var o}}),mr=(e,t)=>({...rr(e),options:[e,t]}),gr=(e,t)=>({...ir(e),options:[e,t]}),vr=(e,t)=>({...pr(e),options:[e,t]}),yr={...o},br=yr.useInsertionEffect||(e=>e());function xr(e){const t=o.useRef((()=>{}));return br((()=>{t.current=e})),o.useCallback((function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return null==t.current?void 0:t.current(...n)}),[])}const wr="ArrowUp",Er="ArrowDown",Sr="ArrowLeft",_r="ArrowRight";function kr(e,t,n){return Math.floor(e/t)!==n}function Cr(e,t){return t<0||t>=e.current.length}function Pr(e,t){return Or(e,{disabledIndices:t})}function Tr(e,t){return Or(e,{decrement:!0,startingIndex:e.current.length,disabledIndices:t})}function Or(e,t){let{startingIndex:n=-1,decrement:r=!1,disabledIndices:o,amount:i=1}=void 0===t?{}:t;const s=e.current;let a=n;do{a+=r?-i:i}while(a>=0&&a<=s.length-1&&Ar(s,a,o));return a}function Rr(e,t,n,r,o){if(-1===e)return-1;const i=n.indexOf(e),s=t[e];switch(o){case"tl":return i;case"tr":return s?i+s.width-1:i;case"bl":return s?i+(s.height-1)*r:i;case"br":return n.lastIndexOf(e)}}function Nr(e,t){return t.flatMap(((t,n)=>e.includes(t)?[n]:[]))}function Ar(e,t,n){if(n)return n.includes(t);const r=e[t];return null==r||r.hasAttribute("disabled")||"true"===r.getAttribute("aria-disabled")}let jr=0;function Mr(e,t){void 0===t&&(t={});const{preventScroll:n=!1,cancelPrevious:r=!0,sync:o=!1}=t;r&&cancelAnimationFrame(jr);const i=()=>null==e?void 0:e.focus({preventScroll:n});o?i():jr=requestAnimationFrame(i)}var Ir="undefined"!=typeof document?o.useLayoutEffect:o.useEffect;function Dr(){return Dr=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Dr.apply(this,arguments)}let Lr=!1,Fr=0;const zr=()=>"floating-ui-"+Math.random().toString(36).slice(2,6)+Fr++,Br=yr.useId||function(){const[e,t]=o.useState((()=>Lr?zr():void 0));return Ir((()=>{null==e&&t(zr())}),[]),o.useEffect((()=>{Lr=!0}),[]),e},Vr=o.forwardRef((function(e,t){const{context:{placement:n,elements:{floating:r},middlewareData:{arrow:i,shift:s}},width:a=14,height:l=7,tipRadius:c=0,strokeWidth:u=0,staticOffset:d,stroke:f,d:h,style:{transform:p,...m}={},...g}=e,v=Br(),[y,b]=o.useState(!1);if(Ir((()=>{r&&"rtl"===At(r).direction&&b(!0)}),[r]),!r)return null;const[x,w]=n.split("-"),E="top"===x||"bottom"===x;let S=d;(E&&null!=s&&s.x||!E&&null!=s&&s.y)&&(S=null);const _=2*u,k=_/2,C=a/2*(c/-8+1),P=l/2*c/4,T=!!h,O=S&&"end"===w?"bottom":"top";let R=S&&"end"===w?"right":"left";S&&y&&(R="end"===w?"left":"right");const N=null!=(null==i?void 0:i.x)?S||i.x:"",A=null!=(null==i?void 0:i.y)?S||i.y:"",j=h||"M0,0 H"+a+" L"+(a-C)+","+(l-P)+" Q"+a/2+","+l+" "+C+","+(l-P)+" Z",M={top:T?"rotate(180deg)":"",left:T?"rotate(90deg)":"rotate(-90deg)",bottom:T?"":"rotate(180deg)",right:T?"rotate(-90deg)":"rotate(90deg)"}[x];return o.createElement("svg",Dr({},g,{"aria-hidden":!0,ref:t,width:T?a:a+_,height:a,viewBox:"0 0 "+a+" "+(l>a?l:a),style:{position:"absolute",pointerEvents:"none",[R]:N,[O]:A,[x]:E||T?"100%":"calc(100% - "+_/2+"px)",transform:""+M+(null!=p?p:""),...m}}),_>0&&o.createElement("path",{clipPath:"url(#"+v+")",fill:"none",stroke:f,strokeWidth:_+(h?0:1),d:j}),o.createElement("path",{stroke:_&&!h?g.fill:"none",d:j}),o.createElement("clipPath",{id:v},o.createElement("rect",{x:-k,y:k*(T?-1:1),width:a+_,height:a})))}));const Wr=o.createContext(null),Ur=o.createContext(null),$r=()=>{var e;return(null==(e=o.useContext(Wr))?void 0:e.id)||null},Kr=()=>o.useContext(Ur);function Hr(e){return"data-floating-ui-"+e}function qr(e){const t=(0,o.useRef)(e);return Ir((()=>{t.current=e})),t}const Yr=Hr("safe-polygon");function Gr(e,t,n){return n&&!qt(n)?0:"number"==typeof e?e:null==e?void 0:e[t]}function Xr(e,t){let n=e.filter((e=>{var n;return e.parentId===t&&(null==(n=e.context)?void 0:n.open)})),r=n;for(;r.length;)r=e.filter((e=>{var t;return null==(t=r)?void 0:t.some((t=>{var n;return e.parentId===t.id&&(null==(n=e.context)?void 0:n.open)}))})),n=n.concat(r);return n}let Jr=new WeakMap,Zr=new WeakSet,Qr={},eo=0;const to=e=>e&&(e.host||to(e.parentNode)),no=(e,t)=>t.map((t=>{if(e.contains(t))return t;const n=to(t);return e.contains(n)?n:null})).filter((e=>null!=e));function ro(e,t,n){void 0===t&&(t=!1),void 0===n&&(n=!1);const r=Yt(e[0]).body;return function(e,t,n,r){const o="data-floating-ui-inert",i=r?"inert":n?"aria-hidden":null,s=no(t,e),a=new Set,l=new Set(s),c=[];Qr[o]||(Qr[o]=new WeakMap);const u=Qr[o];return s.forEach((function e(t){t&&!a.has(t)&&(a.add(t),t.parentNode&&e(t.parentNode))})),function e(t){t&&!l.has(t)&&[].forEach.call(t.children,(t=>{if("script"!==bt(t))if(a.has(t))e(t);else{const e=i?t.getAttribute(i):null,n=null!==e&&"false"!==e,r=(Jr.get(t)||0)+1,s=(u.get(t)||0)+1;Jr.set(t,r),u.set(t,s),c.push(t),1===r&&n&&Zr.add(t),1===s&&t.setAttribute(o,""),!n&&i&&t.setAttribute(i,"true")}}))}(t),a.clear(),eo++,()=>{c.forEach((e=>{const t=(Jr.get(e)||0)-1,n=(u.get(e)||0)-1;Jr.set(e,t),u.set(e,n),t||(!Zr.has(e)&&i&&e.removeAttribute(i),Zr.delete(e)),n||e.removeAttribute(o)})),eo--,eo||(Jr=new WeakMap,Jr=new WeakMap,Zr=new WeakSet,Qr={})}}(e.concat(Array.from(r.querySelectorAll("[aria-live]"))),r,t,n)}const oo=()=>({getShadowRoot:!0,displayCheck:"function"==typeof ResizeObserver&&ResizeObserver.toString().includes("[native code]")?"full":"none"});function io(e,t){const n=Ln(e,oo());"prev"===t&&n.reverse();const r=n.indexOf(Ft(Yt(e)));return n.slice(r+1)[0]}function so(){return io(document.body,"next")}function ao(){return io(document.body,"prev")}function lo(e,t){const n=t||e.currentTarget,r=e.relatedTarget;return!r||!zt(n,r)}function co(e){Ln(e,oo()).forEach((e=>{e.dataset.tabindex=e.getAttribute("tabindex")||"",e.setAttribute("tabindex","-1")}))}function uo(e){e.querySelectorAll("[data-tabindex]").forEach((e=>{const t=e.dataset.tabindex;delete e.dataset.tabindex,t?e.setAttribute("tabindex",t):e.removeAttribute("tabindex")}))}const fo={border:0,clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"fixed",whiteSpace:"nowrap",width:"1px",top:0,left:0};function ho(e){"Tab"===e.key&&(e.target,clearTimeout(void 0))}const po=o.forwardRef((function(e,t){const[n,r]=o.useState();Ir((()=>($t()&&r("button"),document.addEventListener("keydown",ho),()=>{document.removeEventListener("keydown",ho)})),[]);const i={ref:t,tabIndex:0,role:n,"aria-hidden":!n||void 0,[Hr("focus-guard")]:"",style:fo};return o.createElement("span",Dr({},e,i))})),mo=o.createContext(null),go=Hr("portal");function vo(e){const{children:t,id:n,root:r=null,preserveTabOrder:i=!0}=e,s=function(e){void 0===e&&(e={});const{id:t,root:n}=e,r=Br(),i=yo(),[s,a]=o.useState(null),l=o.useRef(null);return Ir((()=>()=>{null==s||s.remove(),queueMicrotask((()=>{l.current=null}))}),[s]),Ir((()=>{if(!r)return;if(l.current)return;const e=t?document.getElementById(t):null;if(!e)return;const n=document.createElement("div");n.id=r,n.setAttribute(go,""),e.appendChild(n),l.current=n,a(n)}),[t,r]),Ir((()=>{if(!r)return;if(l.current)return;let e=n||(null==i?void 0:i.portalNode);e&&!St(e)&&(e=e.current),e=e||document.body;let o=null;t&&(o=document.createElement("div"),o.id=t,e.appendChild(o));const s=document.createElement("div");s.id=r,s.setAttribute(go,""),e=o||e,e.appendChild(s),l.current=s,a(s)}),[t,n,r,i]),s}({id:n,root:r}),[a,l]=o.useState(null),c=o.useRef(null),u=o.useRef(null),d=o.useRef(null),f=o.useRef(null),h=null==a?void 0:a.modal,p=null==a?void 0:a.open,m=!!a&&!a.modal&&a.open&&i&&!(!r&&!s);return o.useEffect((()=>{if(s&&i&&!h)return s.addEventListener("focusin",e,!0),s.addEventListener("focusout",e,!0),()=>{s.removeEventListener("focusin",e,!0),s.removeEventListener("focusout",e,!0)};function e(e){s&&lo(e)&&("focusin"===e.type?uo:co)(s)}}),[s,i,h]),o.useEffect((()=>{s&&(p||uo(s))}),[p,s]),o.createElement(mo.Provider,{value:o.useMemo((()=>({preserveTabOrder:i,beforeOutsideRef:c,afterOutsideRef:u,beforeInsideRef:d,afterInsideRef:f,portalNode:s,setFocusManagerState:l})),[i,s])},m&&s&&o.createElement(po,{"data-type":"outside",ref:c,onFocus:e=>{if(lo(e,s)){var t;null==(t=d.current)||t.focus()}else{const e=ao()||(null==a?void 0:a.refs.domReference.current);null==e||e.focus()}}}),m&&s&&o.createElement("span",{"aria-owns":s.id,style:fo}),s&&zn.createPortal(t,s),m&&s&&o.createElement(po,{"data-type":"outside",ref:u,onFocus:e=>{if(lo(e,s)){var t;null==(t=f.current)||t.focus()}else{const t=so()||(null==a?void 0:a.refs.domReference.current);null==t||t.focus(),(null==a?void 0:a.closeOnFocusOut)&&(null==a||a.onOpenChange(!1,e.nativeEvent,"focus-out"))}}}))}const yo=()=>o.useContext(mo),bo="data-floating-ui-focusable";function xo(e){return e?e.hasAttribute(bo)?e:e.querySelector("["+bo+"]")||e:null}const wo=20;let Eo=[];function So(e){Eo=Eo.filter((e=>e.isConnected));let t=e;if(t&&"body"!==bt(t)){if(!Fn(t,oo())){const e=Ln(t,oo())[0];e&&(t=e)}Eo.push(t),Eo.length>wo&&(Eo=Eo.slice(-wo))}}function _o(){return Eo.slice().reverse().find((e=>e.isConnected))}const ko=o.forwardRef((function(e,t){return o.createElement("button",Dr({},e,{type:"button",ref:t,tabIndex:-1,style:fo}))}));function Co(e){const{context:t,children:n,disabled:r=!1,order:i=["content"],guards:s=!0,initialFocus:a=0,returnFocus:l=!0,restoreFocus:c=!1,modal:u=!0,visuallyHiddenDismiss:d=!1,closeOnFocusOut:f=!0}=e,{open:h,refs:p,nodeId:m,onOpenChange:g,events:v,dataRef:y,floatingId:b,elements:{domReference:x,floating:w}}=t,E="number"==typeof a&&a<0,S=en(x)&&E,_=!("undefined"!=typeof HTMLElement&&"inert"in HTMLElement.prototype)||s,k=qr(i),C=qr(a),P=qr(l),T=Kr(),O=yo(),R=o.useRef(null),N=o.useRef(null),A=o.useRef(!1),j=o.useRef(!1),M=o.useRef(-1),I=null!=O,D=xo(w),L=xr((function(e){return void 0===e&&(e=D),e?Ln(e,oo()):[]})),F=xr((e=>{const t=L(e);return k.current.map((e=>x&&"reference"===e?x:D&&"floating"===e?D:t)).filter(Boolean).flat()}));function z(e){return!r&&d&&u?o.createElement(ko,{ref:"start"===e?R:N,onClick:e=>g(!1,e.nativeEvent)},"string"==typeof d?d:"Dismiss"):null}o.useEffect((()=>{A.current=!1}),[r]),o.useEffect((()=>{if(r)return;if(!u)return;function e(e){if("Tab"===e.key){zt(D,Ft(Yt(D)))&&0===L().length&&!S&&Qt(e);const t=F(),n=Xt(e);"reference"===k.current[0]&&n===x&&(Qt(e),e.shiftKey?Mr(t[t.length-1]):Mr(t[1])),"floating"===k.current[1]&&n===D&&e.shiftKey&&(Qt(e),Mr(t[0]))}}const t=Yt(D);return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[r,x,D,u,k,S,L,F]),o.useEffect((()=>{if(!r&&w)return w.addEventListener("focusin",e),()=>{w.removeEventListener("focusin",e)};function e(e){const t=Xt(e),n=L().indexOf(t);-1!==n&&(M.current=n)}}),[r,w,L]),o.useEffect((()=>{if(!r&&f)return w&&_t(x)?(x.addEventListener("focusout",t),x.addEventListener("pointerdown",e),w.addEventListener("focusout",t),()=>{x.removeEventListener("focusout",t),x.removeEventListener("pointerdown",e),w.removeEventListener("focusout",t)}):void 0;function e(){j.current=!0,setTimeout((()=>{j.current=!1}))}function t(e){const t=e.relatedTarget;queueMicrotask((()=>{const n=!(zt(x,t)||zt(w,t)||zt(t,w)||zt(null==O?void 0:O.portalNode,t)||null!=t&&t.hasAttribute(Hr("focus-guard"))||T&&(Xr(T.nodesRef.current,m).find((e=>{var n,r;return zt(null==(n=e.context)?void 0:n.elements.floating,t)||zt(null==(r=e.context)?void 0:r.elements.domReference,t)}))||function(e,t){var n;let r=[],o=null==(n=e.find((e=>e.id===t)))?void 0:n.parentId;for(;o;){const t=e.find((e=>e.id===o));o=null==t?void 0:t.parentId,t&&(r=r.concat(t))}return r}(T.nodesRef.current,m).find((e=>{var n,r;return(null==(n=e.context)?void 0:n.elements.floating)===t||(null==(r=e.context)?void 0:r.elements.domReference)===t}))));if(c&&n&&Ft(Yt(D))===Yt(D).body){_t(D)&&D.focus();const e=M.current,t=L(),n=t[e]||t[t.length-1]||D;_t(n)&&n.focus()}!S&&u||!t||!n||j.current||t===_o()||(A.current=!0,g(!1,e,"focus-out"))}))}}),[r,x,w,D,u,m,T,O,g,f,c,L,S]),o.useEffect((()=>{var e;if(r)return;const t=Array.from((null==O||null==(e=O.portalNode)?void 0:e.querySelectorAll("["+Hr("portal")+"]"))||[]);if(w){const e=[w,...t,R.current,N.current,k.current.includes("reference")||S?x:null].filter((e=>null!=e)),n=u||S?ro(e,_,!_):ro(e);return()=>{n()}}}),[r,x,w,u,k,O,S,_]),Ir((()=>{if(r||!_t(D))return;const e=Ft(Yt(D));queueMicrotask((()=>{const t=F(D),n=C.current,r=("number"==typeof n?t[n]:n.current)||D,o=zt(D,e);E||o||!h||Mr(r,{preventScroll:r===D})}))}),[r,h,D,E,F,C]),Ir((()=>{if(r||!D)return;let e=!1;const t=Yt(D),n=Ft(t);let o=y.current.openEvent;const i=p.domReference.current;function s(t){let{open:n,reason:r,event:i,nested:s}=t;n&&(o=i),"escape-key"===r&&p.domReference.current&&So(p.domReference.current),"hover"===r&&"mouseleave"===i.type&&(A.current=!0),"outside-press"===r&&(s?(A.current=!1,e=!0):A.current=!(Wt(i)||Ut(i)))}return So(n),v.on("openchange",s),()=>{v.off("openchange",s);const r=Ft(t),a=zt(w,r)||T&&Xr(T.nodesRef.current,m).some((e=>{var t;return zt(null==(t=e.context)?void 0:t.elements.floating,r)}));(a||o&&["click","mousedown"].includes(o.type))&&p.domReference.current&&So(p.domReference.current);const l=i||n,c=Ln(Yt(l).body,oo());queueMicrotask((()=>{let n=_o();!n&&_t(l)&&w&&(n=function(e,t,n){const r=e.indexOf(t);function o(t){const o=Hr("focus-guard");let i=r+(t?1:0),s=e[i];for(;s&&(!s.isConnected||s.hasAttribute(o)||zt(n,s));)t?i++:i--,s=e[i];return s}return o(!0)||o(!1)}(c,l,w)),P.current&&!A.current&&_t(n)&&(n===r||r===t.body||a)&&n.focus({preventScroll:e})}))}}),[r,w,D,P,y,p,v,T,m]),Ir((()=>{if(!r&&O)return O.setFocusManagerState({modal:u,closeOnFocusOut:f,open:h,onOpenChange:g,refs:p}),()=>{O.setFocusManagerState(null)}}),[r,O,u,h,g,p,f]),Ir((()=>{if(r)return;if(!D)return;if("function"!=typeof MutationObserver)return;if(E)return;const e=()=>{const e=D.getAttribute("tabindex"),t=L(),n=Ft(Yt(w)),r=t.indexOf(n);-1!==r&&(M.current=r),k.current.includes("floating")||n!==p.domReference.current&&0===t.length?"0"!==e&&D.setAttribute("tabindex","0"):"-1"!==e&&D.setAttribute("tabindex","-1")};e();const t=new MutationObserver(e);return t.observe(D,{childList:!0,subtree:!0,attributes:!0}),()=>{t.disconnect()}}),[r,w,D,p,k,L,E]);const B=!r&&_&&(!u||!S)&&(I||u);return o.createElement(o.Fragment,null,B&&o.createElement(po,{"data-type":"inside",ref:null==O?void 0:O.beforeInsideRef,onFocus:e=>{if(u){const e=F();Mr("reference"===i[0]?e[0]:e[e.length-1])}else if(null!=O&&O.preserveTabOrder&&O.portalNode)if(A.current=!1,lo(e,O.portalNode)){const e=so()||x;null==e||e.focus()}else{var t;null==(t=O.beforeOutsideRef.current)||t.focus()}}}),!S&&z("start"),n,z("end"),B&&o.createElement(po,{"data-type":"inside",ref:null==O?void 0:O.afterInsideRef,onFocus:e=>{if(u)Mr(F()[0]);else if(null!=O&&O.preserveTabOrder&&O.portalNode)if(f&&(A.current=!0),lo(e,O.portalNode)){const e=ao()||x;null==e||e.focus()}else{var t;null==(t=O.afterOutsideRef.current)||t.focus()}}}))}function Po(e){return _t(e.target)&&"BUTTON"===e.target.tagName}function To(e){return Zt(e)}function Oo(e,t){void 0===t&&(t={});const{open:n,onOpenChange:r,dataRef:i,elements:{domReference:s}}=e,{enabled:a=!0,event:l="click",toggle:c=!0,ignoreMouse:u=!1,keyboardHandlers:d=!0}=t,f=o.useRef(),h=o.useRef(!1),p=o.useMemo((()=>({onPointerDown(e){f.current=e.pointerType},onMouseDown(e){const t=f.current;0===e.button&&"click"!==l&&(qt(t,!0)&&u||(!n||!c||i.current.openEvent&&"mousedown"!==i.current.openEvent.type?(e.preventDefault(),r(!0,e.nativeEvent,"click")):r(!1,e.nativeEvent,"click")))},onClick(e){const t=f.current;"mousedown"===l&&f.current?f.current=void 0:qt(t,!0)&&u||(!n||!c||i.current.openEvent&&"click"!==i.current.openEvent.type?r(!0,e.nativeEvent,"click"):r(!1,e.nativeEvent,"click"))},onKeyDown(e){f.current=void 0,e.defaultPrevented||!d||Po(e)||(" "!==e.key||To(s)||(e.preventDefault(),h.current=!0),"Enter"===e.key&&r(!n||!c,e.nativeEvent,"click"))},onKeyUp(e){e.defaultPrevented||!d||Po(e)||To(s)||" "===e.key&&h.current&&(h.current=!1,r(!n||!c,e.nativeEvent,"click"))}})),[i,s,l,u,d,r,n,c]);return o.useMemo((()=>a?{reference:p}:{}),[a,p])}const Ro={pointerdown:"onPointerDown",mousedown:"onMouseDown",click:"onClick"},No={pointerdown:"onPointerDownCapture",mousedown:"onMouseDownCapture",click:"onClickCapture"},Ao=e=>{var t,n;return{escapeKey:"boolean"==typeof e?e:null!=(t=null==e?void 0:e.escapeKey)&&t,outsidePress:"boolean"==typeof e?e:null==(n=null==e?void 0:e.outsidePress)||n}};function jo(e,t){void 0===t&&(t={});const{open:n,onOpenChange:r,elements:i,dataRef:s}=e,{enabled:a=!0,escapeKey:l=!0,outsidePress:c=!0,outsidePressEvent:u="pointerdown",referencePress:d=!1,referencePressEvent:f="pointerdown",ancestorScroll:h=!1,bubbles:p,capture:m}=t,g=Kr(),v=xr("function"==typeof c?c:()=>!1),y="function"==typeof c?v:c,b=o.useRef(!1),x=o.useRef(!1),{escapeKey:w,outsidePress:E}=Ao(p),{escapeKey:S,outsidePress:_}=Ao(m),k=xr((e=>{var t;if(!n||!a||!l||"Escape"!==e.key)return;const o=null==(t=s.current.floatingContext)?void 0:t.nodeId,i=g?Xr(g.nodesRef.current,o):[];if(!w&&(e.stopPropagation(),i.length>0)){let e=!0;if(i.forEach((t=>{var n;null==(n=t.context)||!n.open||t.context.dataRef.current.__escapeKeyBubbles||(e=!1)})),!e)return}r(!1,function(e){return"nativeEvent"in e}(e)?e.nativeEvent:e,"escape-key")})),C=xr((e=>{var t;const n=()=>{var t;k(e),null==(t=Xt(e))||t.removeEventListener("keydown",n)};null==(t=Xt(e))||t.addEventListener("keydown",n)})),P=xr((e=>{var t;const n=b.current;b.current=!1;const o=x.current;if(x.current=!1,"click"===u&&o)return;if(n)return;if("function"==typeof y&&!y(e))return;const a=Xt(e),l="["+Hr("inert")+"]",c=Yt(i.floating).querySelectorAll(l);let d=St(a)?a:null;for(;d&&!Nt(d);){const e=Mt(d);if(Nt(e)||!St(e))break;d=e}if(c.length&&St(a)&&!a.matches("html,body")&&!zt(a,i.floating)&&Array.from(c).every((e=>!zt(d,e))))return;if(_t(a)&&R){const t=a.clientWidth>0&&a.scrollWidth>a.clientWidth,n=a.clientHeight>0&&a.scrollHeight>a.clientHeight;let r=n&&e.offsetX>a.clientWidth;if(n&&"rtl"===At(a).direction&&(r=e.offsetX<=a.offsetWidth-a.clientWidth),r||t&&e.offsetY>a.clientHeight)return}const f=null==(t=s.current.floatingContext)?void 0:t.nodeId,h=g&&Xr(g.nodesRef.current,f).some((t=>{var n;return Gt(e,null==(n=t.context)?void 0:n.elements.floating)}));if(Gt(e,i.floating)||Gt(e,i.domReference)||h)return;const p=g?Xr(g.nodesRef.current,f):[];if(p.length>0){let e=!0;if(p.forEach((t=>{var n;null==(n=t.context)||!n.open||t.context.dataRef.current.__outsidePressBubbles||(e=!1)})),!e)return}r(!1,e,"outside-press")})),T=xr((e=>{var t;const n=()=>{var t;P(e),null==(t=Xt(e))||t.removeEventListener(u,n)};null==(t=Xt(e))||t.addEventListener(u,n)}));o.useEffect((()=>{if(!n||!a)return;function e(e){r(!1,e,"ancestor-scroll")}s.current.__escapeKeyBubbles=w,s.current.__outsidePressBubbles=E;const t=Yt(i.floating);l&&t.addEventListener("keydown",S?C:k,S),y&&t.addEventListener(u,_?T:P,_);let o=[];return h&&(St(i.domReference)&&(o=Dt(i.domReference)),St(i.floating)&&(o=o.concat(Dt(i.floating))),!St(i.reference)&&i.reference&&i.reference.contextElement&&(o=o.concat(Dt(i.reference.contextElement)))),o=o.filter((e=>{var n;return e!==(null==(n=t.defaultView)?void 0:n.visualViewport)})),o.forEach((t=>{t.addEventListener("scroll",e,{passive:!0})})),()=>{l&&t.removeEventListener("keydown",S?C:k,S),y&&t.removeEventListener(u,_?T:P,_),o.forEach((t=>{t.removeEventListener("scroll",e)}))}}),[s,i,l,y,u,n,r,h,a,w,E,k,S,C,P,_,T]),o.useEffect((()=>{b.current=!1}),[y,u]);const O=o.useMemo((()=>({onKeyDown:k,[Ro[f]]:e=>{d&&r(!1,e.nativeEvent,"reference-press")}})),[k,r,d,f]),R=o.useMemo((()=>({onKeyDown:k,onMouseDown(){x.current=!0},onMouseUp(){x.current=!0},[No[u]]:()=>{b.current=!0}})),[k,u]);return o.useMemo((()=>a?{reference:O,floating:R}:{}),[a,O,R])}function Mo(e){void 0===e&&(e={});const{nodeId:t}=e,n=function(e){const{open:t=!1,onOpenChange:n,elements:r}=e,i=Br(),s=o.useRef({}),[a]=o.useState((()=>function(){const e=new Map;return{emit(t,n){var r;null==(r=e.get(t))||r.forEach((e=>e(n)))},on(t,n){e.set(t,[...e.get(t)||[],n])},off(t,n){var r;e.set(t,(null==(r=e.get(t))?void 0:r.filter((e=>e!==n)))||[])}}}())),l=null!=$r(),[c,u]=o.useState(r.reference),d=xr(((e,t,r)=>{s.current.openEvent=e?t:void 0,a.emit("openchange",{open:e,event:t,reason:r,nested:l}),null==n||n(e,t,r)})),f=o.useMemo((()=>({setPositionReference:u})),[]),h=o.useMemo((()=>({reference:c||r.reference||null,floating:r.floating||null,domReference:r.reference})),[c,r.reference,r.floating]);return o.useMemo((()=>({dataRef:s,open:t,onOpenChange:d,elements:h,events:a,floatingId:i,refs:f})),[t,d,h,a,i,f])}({...e,elements:{reference:null,floating:null,...e.elements}}),r=e.rootContext||n,i=r.elements,[s,a]=o.useState(null),[l,c]=o.useState(null),u=(null==i?void 0:i.reference)||s,d=o.useRef(null),f=Kr();Ir((()=>{u&&(d.current=u)}),[u]);const h=function(e){void 0===e&&(e={});const{placement:t="bottom",strategy:n="absolute",middleware:r=[],platform:i,elements:{reference:s,floating:a}={},transform:l=!0,whileElementsMounted:c,open:u}=e,[d,f]=o.useState({x:0,y:0,strategy:n,placement:t,middlewareData:{},isPositioned:!1}),[h,p]=o.useState(r);ur(h,r)||p(r);const[m,g]=o.useState(null),[v,y]=o.useState(null),b=o.useCallback((e=>{e!==S.current&&(S.current=e,g(e))}),[]),x=o.useCallback((e=>{e!==_.current&&(_.current=e,y(e))}),[]),w=s||m,E=a||v,S=o.useRef(null),_=o.useRef(null),k=o.useRef(d),C=null!=c,P=hr(c),T=hr(i),O=o.useCallback((()=>{if(!S.current||!_.current)return;const e={placement:t,strategy:n,middleware:h};T.current&&(e.platform=T.current),lr(S.current,_.current,e).then((e=>{const t={...e,isPositioned:!0};R.current&&!ur(k.current,t)&&(k.current=t,zn.flushSync((()=>{f(t)})))}))}),[h,t,n,T]);cr((()=>{!1===u&&k.current.isPositioned&&(k.current.isPositioned=!1,f((e=>({...e,isPositioned:!1}))))}),[u]);const R=o.useRef(!1);cr((()=>(R.current=!0,()=>{R.current=!1})),[]),cr((()=>{if(w&&(S.current=w),E&&(_.current=E),w&&E){if(P.current)return P.current(w,E,O);O()}}),[w,E,O,P,C]);const N=o.useMemo((()=>({reference:S,floating:_,setReference:b,setFloating:x})),[b,x]),A=o.useMemo((()=>({reference:w,floating:E})),[w,E]),j=o.useMemo((()=>{const e={position:n,left:0,top:0};if(!A.floating)return e;const t=fr(A.floating,d.x),r=fr(A.floating,d.y);return l?{...e,transform:"translate("+t+"px, "+r+"px)",...dr(A.floating)>=1.5&&{willChange:"transform"}}:{position:n,left:t,top:r}}),[n,l,A.floating,d.x,d.y]);return o.useMemo((()=>({...d,update:O,refs:N,elements:A,floatingStyles:j})),[d,O,N,A,j])}({...e,elements:{...i,...l&&{reference:l}}}),p=o.useCallback((e=>{const t=St(e)?{getBoundingClientRect:()=>e.getBoundingClientRect(),contextElement:e}:e;c(t),h.refs.setReference(t)}),[h.refs]),m=o.useCallback((e=>{(St(e)||null===e)&&(d.current=e,a(e)),(St(h.refs.reference.current)||null===h.refs.reference.current||null!==e&&!St(e))&&h.refs.setReference(e)}),[h.refs]),g=o.useMemo((()=>({...h.refs,setReference:m,setPositionReference:p,domReference:d})),[h.refs,m,p]),v=o.useMemo((()=>({...h.elements,domReference:u})),[h.elements,u]),y=o.useMemo((()=>({...h,...r,refs:g,elements:v,nodeId:t})),[h,g,v,t,r]);return Ir((()=>{r.dataRef.current.floatingContext=y;const e=null==f?void 0:f.nodesRef.current.find((e=>e.id===t));e&&(e.context=y)})),o.useMemo((()=>({...h,context:y,refs:g,elements:v})),[h,g,v,y])}const Io="active",Do="selected";function Lo(e,t,n){const r=new Map,o="item"===n;let i=e;if(o&&e){const{[Io]:t,[Do]:__,...n}=e;i=n}return{..."floating"===n&&{tabIndex:-1,[bo]:""},...i,...t.map((t=>{const r=t?t[n]:null;return"function"==typeof r?e?r(e):null:r})).concat(e).reduce(((e,t)=>t?(Object.entries(t).forEach((t=>{let[n,i]=t;var s;o&&[Io,Do].includes(n)||(0===n.indexOf("on")?(r.has(n)||r.set(n,[]),"function"==typeof i&&(null==(s=r.get(n))||s.push(i),e[n]=function(){for(var e,t=arguments.length,o=new Array(t),i=0;i<t;i++)o[i]=arguments[i];return null==(e=r.get(n))?void 0:e.map((e=>e(...o))).find((e=>void 0!==e))})):e[n]=i)})),e):e),{})}}function Fo(e){void 0===e&&(e=[]);const t=e.map((e=>null==e?void 0:e.reference)),n=e.map((e=>null==e?void 0:e.floating)),r=e.map((e=>null==e?void 0:e.item)),i=o.useCallback((t=>Lo(t,e,"reference")),t),s=o.useCallback((t=>Lo(t,e,"floating")),n),a=o.useCallback((t=>Lo(t,e,"item")),r);return o.useMemo((()=>({getReferenceProps:i,getFloatingProps:s,getItemProps:a})),[i,s,a])}let zo=!1;function Bo(e,t,n){switch(e){case"vertical":return t;case"horizontal":return n;default:return t||n}}function Vo(e,t){return Bo(t,e===wr||e===Er,e===Sr||e===_r)}function Wo(e,t,n){return Bo(t,e===Er,n?e===Sr:e===_r)||"Enter"===e||" "===e||""===e}function Uo(e,t,n){return Bo(t,n?e===_r:e===Sr,e===wr)}function $o(e,t){const{open:n,onOpenChange:r,elements:i}=e,{listRef:s,activeIndex:a,onNavigate:l=()=>{},enabled:c=!0,selectedIndex:u=null,allowEscape:d=!1,loop:f=!1,nested:h=!1,rtl:p=!1,virtual:m=!1,focusItemOnOpen:g="auto",focusItemOnHover:v=!0,openOnArrowKeyDown:y=!0,disabledIndices:b,orientation:x="vertical",cols:w=1,scrollItemIntoView:E=!0,virtualItemRef:S,itemSizes:_,dense:k=!1}=t,C=qr(xo(i.floating)),P=$r(),T=Kr(),O=xr(l),R=o.useRef(g),N=o.useRef(null!=u?u:-1),A=o.useRef(null),j=o.useRef(!0),M=o.useRef(O),I=o.useRef(!!i.floating),D=o.useRef(n),L=o.useRef(!1),F=o.useRef(!1),z=qr(b),B=qr(n),V=qr(E),W=qr(u),[U,$]=o.useState(),[K,H]=o.useState(),q=xr((function(e,t,n){function r(e){m?($(e.id),null==T||T.events.emit("virtualfocus",e),S&&(S.current=e)):Mr(e,{preventScroll:!0,sync:!(!Ht()||!$t())&&(zo||L.current)})}void 0===n&&(n=!1);const o=e.current[t.current];o&&r(o),requestAnimationFrame((()=>{const i=e.current[t.current]||o;if(!i)return;o||r(i);const s=V.current;s&&G&&(n||!j.current)&&(null==i.scrollIntoView||i.scrollIntoView("boolean"==typeof s?{block:"nearest",inline:"nearest"}:s))}))}));Ir((()=>{document.createElement("div").focus({get preventScroll(){return zo=!0,!1}})}),[]),Ir((()=>{c&&(n&&i.floating?R.current&&null!=u&&(F.current=!0,N.current=u,O(u)):I.current&&(N.current=-1,M.current(null)))}),[c,n,i.floating,u,O]),Ir((()=>{if(c&&n&&i.floating)if(null==a){if(L.current=!1,null!=W.current)return;if(I.current&&(N.current=-1,q(s,N)),(!D.current||!I.current)&&R.current&&(null!=A.current||!0===R.current&&null==A.current)){let e=0;const t=()=>{null==s.current[0]?(e<2&&(e?requestAnimationFrame:queueMicrotask)(t),e++):(N.current=null==A.current||Wo(A.current,x,p)||h?Pr(s,z.current):Tr(s,z.current),A.current=null,O(N.current))};t()}}else Cr(s,a)||(N.current=a,q(s,N,F.current),F.current=!1)}),[c,n,i.floating,a,W,h,s,x,p,O,q,z]),Ir((()=>{var e;if(!c||i.floating||!T||m||!I.current)return;const t=T.nodesRef.current,n=null==(e=t.find((e=>e.id===P)))||null==(e=e.context)?void 0:e.elements.floating,r=Ft(Yt(i.floating)),o=t.some((e=>e.context&&zt(e.context.elements.floating,r)));n&&!o&&j.current&&n.focus({preventScroll:!0})}),[c,i.floating,T,P,m]),Ir((()=>{if(c&&T&&m&&!P)return T.events.on("virtualfocus",e),()=>{T.events.off("virtualfocus",e)};function e(e){H(e.id),S&&(S.current=e)}}),[c,T,m,P,S]),Ir((()=>{M.current=O,I.current=!!i.floating})),Ir((()=>{n||(A.current=null)}),[n]),Ir((()=>{D.current=n}),[n]);const Y=null!=a,G=o.useMemo((()=>{function e(e){if(!n)return;const t=s.current.indexOf(e);-1!==t&&O(t)}return{onFocus(t){let{currentTarget:n}=t;e(n)},onClick:e=>{let{currentTarget:t}=e;return t.focus({preventScroll:!0})},...v&&{onMouseMove(t){let{currentTarget:n}=t;e(n)},onPointerLeave(e){let{pointerType:t}=e;j.current&&"touch"!==t&&(N.current=-1,q(s,N),O(null),m||Mr(C.current,{preventScroll:!0}))}}}}),[n,C,q,v,s,O,m]),X=xr((e=>{if(j.current=!1,L.current=!0,!B.current&&e.currentTarget===C.current)return;if(h&&Uo(e.key,x,p))return Qt(e),r(!1,e.nativeEvent,"list-navigation"),void(_t(i.domReference)&&!m&&i.domReference.focus());const t=N.current,o=Pr(s,b),a=Tr(s,b);if("Home"===e.key&&(Qt(e),N.current=o,O(N.current)),"End"===e.key&&(Qt(e),N.current=a,O(N.current)),w>1){const t=_||Array.from({length:s.current.length},(()=>({width:1,height:1}))),n=function(e,t,n){const r=[];let o=0;return e.forEach(((e,i)=>{let{width:s,height:a}=e,l=!1;for(n&&(o=0);!l;){const e=[];for(let n=0;n<s;n++)for(let r=0;r<a;r++)e.push(o+n+r*t);o%t+s<=t&&e.every((e=>null==r[e]))?(e.forEach((e=>{r[e]=i})),l=!0):o++}})),[...r]}(t,w,k),r=n.findIndex((e=>null!=e&&!Ar(s.current,e,b))),i=n.reduce(((e,t,n)=>null==t||Ar(s.current,t,b)?e:n),-1),l=n[function(e,t){let{event:n,orientation:r,loop:o,cols:i,disabledIndices:s,minIndex:a,maxIndex:l,prevIndex:c,stopEvent:u=!1}=t,d=c;if(n.key===wr){if(u&&Qt(n),-1===c)d=l;else if(d=Or(e,{startingIndex:d,amount:i,decrement:!0,disabledIndices:s}),o&&(c-i<a||d<0)){const e=c%i,t=l%i,n=l-(t-e);d=t===e?l:t>e?n:n-i}Cr(e,d)&&(d=c)}if(n.key===Er&&(u&&Qt(n),-1===c?d=a:(d=Or(e,{startingIndex:c,amount:i,disabledIndices:s}),o&&c+i>l&&(d=Or(e,{startingIndex:c%i-i,amount:i,disabledIndices:s}))),Cr(e,d)&&(d=c)),"both"===r){const t=on(c/i);n.key===_r&&(u&&Qt(n),c%i!=i-1?(d=Or(e,{startingIndex:c,disabledIndices:s}),o&&kr(d,i,t)&&(d=Or(e,{startingIndex:c-c%i-1,disabledIndices:s}))):o&&(d=Or(e,{startingIndex:c-c%i-1,disabledIndices:s})),kr(d,i,t)&&(d=c)),n.key===Sr&&(u&&Qt(n),c%i!=0?(d=Or(e,{startingIndex:c,decrement:!0,disabledIndices:s}),o&&kr(d,i,t)&&(d=Or(e,{startingIndex:c+(i-c%i),decrement:!0,disabledIndices:s}))):o&&(d=Or(e,{startingIndex:c+(i-c%i),decrement:!0,disabledIndices:s})),kr(d,i,t)&&(d=c));const r=on(l/i)===t;Cr(e,d)&&(d=o&&r?n.key===Sr?l:Or(e,{startingIndex:c-c%i-1,disabledIndices:s}):c)}return d}({current:n.map((e=>null!=e?s.current[e]:null))},{event:e,orientation:x,loop:f,cols:w,disabledIndices:Nr([...b||s.current.map(((e,t)=>Ar(s.current,t)?t:void 0)),void 0],n),minIndex:r,maxIndex:i,prevIndex:Rr(N.current>a?o:N.current,t,n,w,e.key===Er?"bl":e.key===_r?"tr":"tl"),stopEvent:!0})];if(null!=l&&(N.current=l,O(N.current)),"both"===x)return}if(Vo(e.key,x)){if(Qt(e),n&&!m&&Ft(e.currentTarget.ownerDocument)===e.currentTarget)return N.current=Wo(e.key,x,p)?o:a,void O(N.current);Wo(e.key,x,p)?N.current=f?t>=a?d&&t!==s.current.length?-1:o:Or(s,{startingIndex:t,disabledIndices:b}):Math.min(a,Or(s,{startingIndex:t,disabledIndices:b})):N.current=f?t<=o?d&&-1!==t?s.current.length:a:Or(s,{startingIndex:t,decrement:!0,disabledIndices:b}):Math.max(o,Or(s,{startingIndex:t,decrement:!0,disabledIndices:b})),Cr(s,N.current)?O(null):O(N.current)}})),J=o.useMemo((()=>m&&n&&Y&&{"aria-activedescendant":K||U}),[m,n,Y,K,U]),Z=o.useMemo((()=>({"aria-orientation":"both"===x?void 0:x,...!en(i.domReference)&&J,onKeyDown:X,onPointerMove(){j.current=!0}})),[J,X,i.domReference,x]),Q=o.useMemo((()=>{function e(e){"auto"===g&&Wt(e.nativeEvent)&&(R.current=!0)}return{...J,onKeyDown(e){j.current=!1;const t=0===e.key.indexOf("Arrow"),o=function(e,t,n){return Bo(t,n?e===Sr:e===_r,e===Er)}(e.key,x,p),i=Uo(e.key,x,p),a=Vo(e.key,x),l=(h?o:a)||"Enter"===e.key||""===e.key.trim();if(m&&n){const n=null==T?void 0:T.nodesRef.current.find((e=>null==e.parentId)),r=T&&n?function(e,t){let n,r=-1;return function t(o,i){i>r&&(n=o,r=i),Xr(e,o).forEach((e=>{t(e.id,i+1)}))}(t,0),e.find((e=>e.id===n))}(T.nodesRef.current,n.id):null;if(t&&r&&S){const t=new KeyboardEvent("keydown",{key:e.key,bubbles:!0});if(o||i){var c,d;const n=(null==(c=r.context)?void 0:c.elements.domReference)===e.currentTarget,a=i&&!n?null==(d=r.context)?void 0:d.elements.domReference:o?s.current.find((e=>(null==e?void 0:e.id)===U)):null;a&&(Qt(e),a.dispatchEvent(t),H(void 0))}var f;if(a&&r.context&&r.context.open&&r.parentId&&e.currentTarget!==r.context.elements.domReference)return Qt(e),void(null==(f=r.context.elements.domReference)||f.dispatchEvent(t))}return X(e)}(n||y||!t)&&(l&&(A.current=h&&a?null:e.key),h?o&&(Qt(e),n?(N.current=Pr(s,z.current),O(N.current)):r(!0,e.nativeEvent,"list-navigation")):a&&(null!=u&&(N.current=u),Qt(e),!n&&y?r(!0,e.nativeEvent,"list-navigation"):X(e),n&&O(N.current)))},onFocus(){n&&!m&&O(null)},onPointerDown:function(e){R.current=g,"auto"===g&&Ut(e.nativeEvent)&&(R.current=!0)},onMouseDown:e,onClick:e}}),[U,J,X,z,g,s,h,O,r,n,y,x,p,u,T,m,S]);return o.useMemo((()=>c?{reference:Q,floating:Z,item:G}:{}),[c,Q,Z,G])}const Ko=new Map([["select","listbox"],["combobox","listbox"],["label",!1]]);function Ho(e,t){var n;void 0===t&&(t={});const{open:r,floatingId:i}=e,{enabled:s=!0,role:a="dialog"}=t,l=null!=(n=Ko.get(a))?n:a,c=Br(),u=null!=$r(),d=o.useMemo((()=>"tooltip"===l||"label"===a?{["aria-"+("label"===a?"labelledby":"describedby")]:r?i:void 0}:{"aria-expanded":r?"true":"false","aria-haspopup":"alertdialog"===l?"dialog":l,"aria-controls":r?i:void 0,..."listbox"===l&&{role:"combobox"},..."menu"===l&&{id:c},..."menu"===l&&u&&{role:"menuitem"},..."select"===a&&{"aria-autocomplete":"none"},..."combobox"===a&&{"aria-autocomplete":"list"}}),[l,i,u,r,c,a]),f=o.useMemo((()=>{const e={id:i,...l&&{role:l}};return"tooltip"===l||"label"===a?e:{...e,..."menu"===l&&{"aria-labelledby":c}}}),[l,i,c,a]),h=o.useCallback((e=>{let{active:t,selected:n}=e;const r={role:"option",...t&&{id:i+"-option"}};switch(a){case"select":return{...r,"aria-selected":t&&n};case"combobox":return{...r,...t&&{"aria-selected":!0}}}return{}}),[i,a]);return o.useMemo((()=>s?{reference:d,floating:f,item:h}:{}),[s,d,f,h])}const qo=e=>e.replace(/[A-Z]+(?![a-z])|[A-Z]/g,((e,t)=>(t?"-":"")+e.toLowerCase()));function Yo(e,t){return"function"==typeof e?e(t):e}function Go(e,t){const[n,r]=e;let o=!1;const i=t.length;for(let e=0,s=i-1;e<i;s=e++){const[i,a]=t[e]||[0,0],[l,c]=t[s]||[0,0];a>=r!=c>=r&&n<=(l-i)*(r-a)/(c-a)+i&&(o=!o)}return o}function Xo(e){void 0===e&&(e={});const{buffer:t=.5,blockPointerEvents:n=!1,requireIntent:r=!0}=e;let o,i=!1,s=null,a=null,l=performance.now();const c=e=>{let{x:n,y:c,placement:u,elements:d,onClose:f,nodeId:h,tree:p}=e;return function(e){function m(){clearTimeout(o),f()}if(clearTimeout(o),!d.domReference||!d.floating||null==u||null==n||null==c)return;const{clientX:g,clientY:v}=e,y=[g,v],b=Xt(e),x="mouseleave"===e.type,w=zt(d.floating,b),E=zt(d.domReference,b),S=d.domReference.getBoundingClientRect(),_=d.floating.getBoundingClientRect(),k=u.split("-")[0],C=n>_.right-_.width/2,P=c>_.bottom-_.height/2,T=function(e,t){return e[0]>=t.x&&e[0]<=t.x+t.width&&e[1]>=t.y&&e[1]<=t.y+t.height}(y,S),O=_.width>S.width,R=_.height>S.height,N=(O?S:_).left,A=(O?S:_).right,j=(R?S:_).top,M=(R?S:_).bottom;if(w&&(i=!0,!x))return;if(E&&(i=!1),E&&!x)return void(i=!0);if(x&&St(e.relatedTarget)&&zt(d.floating,e.relatedTarget))return;if(p&&Xr(p.nodesRef.current,h).some((e=>{let{context:t}=e;return null==t?void 0:t.open})))return;if("top"===k&&c>=S.bottom-1||"bottom"===k&&c<=S.top+1||"left"===k&&n>=S.right-1||"right"===k&&n<=S.left+1)return m();let I=[];switch(k){case"top":I=[[N,S.top+1],[N,_.bottom-1],[A,_.bottom-1],[A,S.top+1]];break;case"bottom":I=[[N,_.top+1],[N,S.bottom-1],[A,S.bottom-1],[A,_.top+1]];break;case"left":I=[[_.right-1,M],[_.right-1,j],[S.left+1,j],[S.left+1,M]];break;case"right":I=[[S.right-1,M],[S.right-1,j],[_.left+1,j],[_.left+1,M]]}if(!Go([g,v],I)){if(i&&!T)return m();if(!x&&r){const t=function(e,t){const n=performance.now(),r=n-l;if(null===s||null===a||0===r)return s=e,a=t,l=n,null;const o=e-s,i=t-a,c=Math.sqrt(o*o+i*i);return s=e,a=t,l=n,c/r}(e.clientX,e.clientY);if(null!==t&&t<.1)return m()}Go([g,v],function(e){let[n,r]=e;switch(k){case"top":return[[O?n+t/2:C?n+4*t:n-4*t,r+t+1],[O?n-t/2:C?n+4*t:n-4*t,r+t+1],[_.left,C||O?_.bottom-t:_.top],[_.right,C?O?_.bottom-t:_.top:_.bottom-t]];case"bottom":return[[O?n+t/2:C?n+4*t:n-4*t,r-t],[O?n-t/2:C?n+4*t:n-4*t,r-t],[_.left,C||O?_.top+t:_.bottom],[_.right,C?O?_.top+t:_.bottom:_.top+t]];case"left":{const e=[n+t+1,R?r+t/2:P?r+4*t:r-4*t],o=[n+t+1,R?r-t/2:P?r+4*t:r-4*t];return[[P||R?_.right-t:_.left,_.top],[P?R?_.right-t:_.left:_.right-t,_.bottom],e,o]}case"right":return[[n-t,R?r+t/2:P?r+4*t:r-4*t],[n-t,R?r-t/2:P?r+4*t:r-4*t],[P||R?_.left+t:_.right,_.top],[P?R?_.left+t:_.right:_.left+t,_.bottom]]}}([n,c]))?!i&&r&&(o=window.setTimeout(m,40)):m()}}};return c.__options={blockPointerEvents:n},c}const Jo=xe("Info",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 16v-4",key:"1dtifu"}],["path",{d:"M12 8h.01",key:"e9boi3"}]]),Zo=xe("TriangleAlert",[["path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",key:"wmoenq"}],["path",{d:"M12 9v4",key:"juzpu7"}],["path",{d:"M12 17h.01",key:"p32p05"}]]),Qo=xe("Trash2",[["path",{d:"M3 6h18",key:"d0wm0j"}],["path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",key:"4alrt4"}],["path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",key:"v07s0e"}],["line",{x1:"10",x2:"10",y1:"11",y2:"17",key:"1uufr5"}],["line",{x1:"14",x2:"14",y1:"11",y2:"17",key:"xtxkd"}]]);var ei="light",ti=function(e){var t=e.icon,n=void 0===t?null:t,r=e.theme,i=void 0===r?ei:r,s=e.variant,a=void 0===s?"neutral":s,l="[&>svg]:h-5 [&>svg]:w-5",c="light"===i?"text-icon-secondary":"text-icon-inverse";if(n&&(0,o.isValidElement)(n))return(0,o.cloneElement)(n,{className:te(l,c,n.props.className)});switch(a){case"neutral":return React.createElement(Jo,{className:te(l,c)});case"info":var u="light"===i?"text-support-info":"text-support-info-inverse";return React.createElement(Jo,{className:te(l,u)});case"success":var d="light"===i?"text-support-success":"text-support-success-inverse";return React.createElement(Ee,{className:te(l,d)});case"warning":var f="light"===i?"text-support-warning":"text-support-warning-inverse";return React.createElement(Zo,{className:te(l,f)});case"error":var h="light"===i?"text-support-error":"text-support-error-inverse";return React.createElement(Qo,{className:te(l,h)});default:return null}},ni=function(e){var t=e.actionType,n=void 0===t?"button":t,r=e.onAction,o=void 0===r?function(){}:r,i=e.actionLabel,s=void 0===i?"":i,a=e.theme,l=void 0===a?ei:a,c="focus:ring-0 focus:ring-offset-0 ring-offset-0 focus:outline-none",u="text-button-primary border-button-primary hover:border-button-primary hover:text-button-primary-hover";switch("dark"===l&&(u="text-text-inverse border-text-inverse hover:border-text-inverse hover:text-text-inverse"),n){case"button":return React.createElement(le,{variant:"outline",size:"xs",onClick:o,className:te("rounded",c,u,"dark"===l?"bg-transparent hover:bg-transparent":"bg-white hover:bg-white")},s);case"link":return React.createElement(le,{variant:"link",size:"xs",onClick:o,className:te(c,u)},s);default:return null}},ri=function(e){var t=e.theme,n=void 0===t?ei:t,r=e.title,o=void 0===r?"":r;return!o&&isNaN(o)?null:React.createElement("span",{className:te("block",{light:"text-text-primary",dark:"text-text-inverse"}[n],"text-sm leading-5 font-semibold")},o)},oi=function(e){var t=e.theme,n=void 0===t?ei:t,r=e.content,o=void 0===r?"":r;return!o&&isNaN(o)?null:React.createElement("span",{className:te({light:"text-text-primary",dark:"text-text-inverse"}[n],"block text-sm [&_*]:text-sm leading-5 [&_*]:leading-5 font-normal")},o)},ii=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){t.forEach((function(t){"function"==typeof t?t(e):t&&(t.current=e)}))}};function si(e){return si="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},si(e)}function ai(){return ai=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},ai.apply(null,arguments)}function li(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function ci(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?li(Object(n),!0).forEach((function(t){ui(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):li(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function ui(e,t,n){return(t=function(e){var t=function(e){if("object"!=si(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=si(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==si(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function di(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var fi=function(e){var t,n,r,s,a=e.variant,l=void 0===a?"dark":a,c=e.placement,u=void 0===c?"bottom":c,d=e.title,f=void 0===d?"":d,h=e.content,p=e.arrow,m=void 0!==p&&p,g=e.open,v=e.setOpen,y=e.children,b=e.className,x=e.tooltipPortalRoot,w=void 0===x?null:x,E=e.tooltipPortalId,S=void 0===E?"":E,_=e.boundary,k=void 0===_?"clippingAncestors":_,C=e.strategy,P=void 0===C?"fixed":C,T=e.offset,O=void 0===T?8:T,R=e.triggers,N=void 0===R?["hover","focus"]:R,A=e.interactive,j=void 0!==A&&A,M=(0,o.useMemo)((function(){return"boolean"==typeof g&&"function"==typeof v}),[g,v]),I=(r=(0,o.useState)(!1),s=2,function(e){if(Array.isArray(e))return e}(r)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(r,s)||function(e,t){if(e){if("string"==typeof e)return di(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?di(e,t):void 0}}(r,s)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),D=I[0],L=I[1],F=(0,o.useRef)(null),z=Mo({open:M?g:D,onOpenChange:M?v:L,placement:u,strategy:P,middleware:[mr(O),gr({boundary:k}),(n={boundary:k},{...or(n),options:[n,undefined]}),vr({element:F})],whileElementsMounted:nr}),B=z.refs,V=z.floatingStyles,W=z.context,U=Oo(W,{enabled:!M&&N.includes("click")}),$=function(e,t){void 0===t&&(t={});const{open:n,onOpenChange:r,dataRef:i,events:s,elements:a}=e,{enabled:l=!0,delay:c=0,handleClose:u=null,mouseOnly:d=!1,restMs:f=0,move:h=!0}=t,p=Kr(),m=$r(),g=qr(u),v=qr(c),y=qr(n),b=o.useRef(),x=o.useRef(-1),w=o.useRef(),E=o.useRef(-1),S=o.useRef(!0),_=o.useRef(!1),k=o.useRef((()=>{})),C=o.useCallback((()=>{var e;const t=null==(e=i.current.openEvent)?void 0:e.type;return(null==t?void 0:t.includes("mouse"))&&"mousedown"!==t}),[i]);o.useEffect((()=>{if(l)return s.on("openchange",e),()=>{s.off("openchange",e)};function e(e){let{open:t}=e;t||(clearTimeout(x.current),clearTimeout(E.current),S.current=!0)}}),[l,s]),o.useEffect((()=>{if(!l)return;if(!g.current)return;if(!n)return;function e(e){C()&&r(!1,e,"hover")}const t=Yt(a.floating).documentElement;return t.addEventListener("mouseleave",e),()=>{t.removeEventListener("mouseleave",e)}}),[a.floating,n,r,l,g,C]);const P=o.useCallback((function(e,t,n){void 0===t&&(t=!0),void 0===n&&(n="hover");const o=Gr(v.current,"close",b.current);o&&!w.current?(clearTimeout(x.current),x.current=window.setTimeout((()=>r(!1,e,n)),o)):t&&(clearTimeout(x.current),r(!1,e,n))}),[v,r]),T=xr((()=>{k.current(),w.current=void 0})),O=xr((()=>{if(_.current){const e=Yt(a.floating).body;e.style.pointerEvents="",e.removeAttribute(Yr),_.current=!1}}));o.useEffect((()=>{if(l&&St(a.domReference)){var e;const t=a.domReference;return n&&t.addEventListener("mouseleave",c),null==(e=a.floating)||e.addEventListener("mouseleave",c),h&&t.addEventListener("mousemove",o,{once:!0}),t.addEventListener("mouseenter",o),t.addEventListener("mouseleave",s),()=>{var e;n&&t.removeEventListener("mouseleave",c),null==(e=a.floating)||e.removeEventListener("mouseleave",c),h&&t.removeEventListener("mousemove",o),t.removeEventListener("mouseenter",o),t.removeEventListener("mouseleave",s)}}function t(){return!!i.current.openEvent&&["click","mousedown"].includes(i.current.openEvent.type)}function o(e){if(clearTimeout(x.current),S.current=!1,d&&!qt(b.current)||f>0&&!Gr(v.current,"open"))return;const t=Gr(v.current,"open",b.current);t?x.current=window.setTimeout((()=>{y.current||r(!0,e,"hover")}),t):r(!0,e,"hover")}function s(e){if(t())return;k.current();const r=Yt(a.floating);if(clearTimeout(E.current),g.current&&i.current.floatingContext){n||clearTimeout(x.current),w.current=g.current({...i.current.floatingContext,tree:p,x:e.clientX,y:e.clientY,onClose(){O(),T(),P(e,!0,"safe-polygon")}});const t=w.current;return r.addEventListener("mousemove",t),void(k.current=()=>{r.removeEventListener("mousemove",t)})}("touch"!==b.current||!zt(a.floating,e.relatedTarget))&&P(e)}function c(e){t()||i.current.floatingContext&&(null==g.current||g.current({...i.current.floatingContext,tree:p,x:e.clientX,y:e.clientY,onClose(){O(),T(),P(e)}})(e))}}),[a,l,e,d,f,h,P,T,O,r,n,y,p,v,g,i]),Ir((()=>{var e;if(l&&n&&null!=(e=g.current)&&e.__options.blockPointerEvents&&C()){_.current=!0;const e=a.floating;if(St(a.domReference)&&e){var t;const n=Yt(a.floating).body;n.setAttribute(Yr,"");const r=a.domReference,o=null==p||null==(t=p.nodesRef.current.find((e=>e.id===m)))||null==(t=t.context)?void 0:t.elements.floating;return o&&(o.style.pointerEvents=""),n.style.pointerEvents="none",r.style.pointerEvents="auto",e.style.pointerEvents="auto",()=>{n.style.pointerEvents="",r.style.pointerEvents="",e.style.pointerEvents=""}}}}),[l,n,m,a,p,g,C]),Ir((()=>{n||(b.current=void 0,T(),O())}),[n,T,O]),o.useEffect((()=>()=>{T(),clearTimeout(x.current),clearTimeout(E.current),O()}),[l,a.domReference,T,O]);const R=o.useMemo((()=>{function e(e){b.current=e.pointerType}return{onPointerDown:e,onPointerEnter:e,onMouseMove(e){const{nativeEvent:t}=e;function o(){S.current||y.current||r(!0,t,"hover")}d&&!qt(b.current)||n||0===f||(clearTimeout(E.current),"touch"===b.current?o():E.current=window.setTimeout(o,f))}}}),[d,r,n,y,f]),N=o.useMemo((()=>({onMouseEnter(){clearTimeout(x.current)},onMouseLeave(e){P(e.nativeEvent,!1)}})),[P]);return o.useMemo((()=>l?{reference:R,floating:N}:{}),[l,R,N])}(W,ci({move:!1,enabled:!M&&N.includes("hover")},j&&{handleClose:Xo()})),K=function(e,t){void 0===t&&(t={});const{open:n,onOpenChange:r,events:i,dataRef:s,elements:a}=e,{enabled:l=!0,visibleOnly:c=!0}=t,u=o.useRef(!1),d=o.useRef(),f=o.useRef(!0);o.useEffect((()=>{if(!l)return;const e=xt(a.domReference);function t(){!n&&_t(a.domReference)&&a.domReference===Ft(Yt(a.domReference))&&(u.current=!0)}function r(){f.current=!0}return e.addEventListener("blur",t),e.addEventListener("keydown",r,!0),()=>{e.removeEventListener("blur",t),e.removeEventListener("keydown",r,!0)}}),[a.domReference,n,l]),o.useEffect((()=>{if(l)return i.on("openchange",e),()=>{i.off("openchange",e)};function e(e){let{reason:t}=e;"reference-press"!==t&&"escape-key"!==t||(u.current=!0)}}),[i,l]),o.useEffect((()=>()=>{clearTimeout(d.current)}),[]);const h=o.useMemo((()=>({onPointerDown(e){Ut(e.nativeEvent)||(f.current=!1)},onMouseLeave(){u.current=!1},onFocus(e){if(u.current)return;const t=Xt(e.nativeEvent);if(c&&St(t))try{if($t()&&Ht())throw Error();if(!t.matches(":focus-visible"))return}catch(e){if(!f.current&&!Zt(t))return}r(!0,e.nativeEvent,"focus")},onBlur(e){u.current=!1;const t=e.relatedTarget,n=e.nativeEvent,o=St(t)&&t.hasAttribute(Hr("focus-guard"))&&"outside"===t.getAttribute("data-type");d.current=window.setTimeout((()=>{var e;const i=Ft(a.domReference?a.domReference.ownerDocument:document);(t||i!==a.domReference)&&(zt(null==(e=s.current.floatingContext)?void 0:e.refs.floating.current,i)||zt(a.domReference,i)||o||r(!1,n,"focus"))}))}})),[s,a.domReference,r,c]);return o.useMemo((()=>l?{reference:h}:{}),[l,h])}(W,{enabled:!M&&N.includes("focus")}),H=Fo([U,$,K,jo(W),Ho(W,{role:"tooltip"})]),q=H.getReferenceProps,Y=H.getFloatingProps,G=function(e,t){void 0===t&&(t={});const{initial:n={opacity:0},open:r,close:i,common:s,duration:a=250}=t,l=e.placement,c=l.split("-")[0],u=o.useMemo((()=>({side:c,placement:l})),[c,l]),d="number"==typeof a,f=(d?a:a.open)||0,h=(d?a:a.close)||0,[p,m]=o.useState((()=>({...Yo(s,u),...Yo(n,u)}))),{isMounted:g,status:v}=function(e,t){void 0===t&&(t={});const{open:n,elements:{floating:r}}=e,{duration:i=250}=t,s=("number"==typeof i?i:i.close)||0,[a,l]=o.useState("unmounted"),c=function(e,t){const[n,r]=o.useState(e);return e&&!n&&r(!0),o.useEffect((()=>{if(!e&&n){const e=setTimeout((()=>r(!1)),t);return()=>clearTimeout(e)}}),[e,n,t]),n}(n,s);return c||"close"!==a||l("unmounted"),Ir((()=>{if(r){if(n){l("initial");const e=requestAnimationFrame((()=>{l("open")}));return()=>{cancelAnimationFrame(e)}}l("close")}}),[n,r]),{isMounted:c,status:a}}(e,{duration:a}),y=qr(n),b=qr(r),x=qr(i),w=qr(s);return Ir((()=>{const e=Yo(y.current,u),t=Yo(x.current,u),n=Yo(w.current,u),r=Yo(b.current,u)||Object.keys(e).reduce(((e,t)=>(e[t]="",e)),{});if("initial"===v&&m((t=>({transitionProperty:t.transitionProperty,...n,...e}))),"open"===v&&m({transitionProperty:Object.keys(r).map(qo).join(","),transitionDuration:f+"ms",...n,...r}),"close"===v){const r=t||e;m({transitionProperty:Object.keys(r).map(qo).join(","),transitionDuration:h+"ms",...n,...r})}}),[h,x,y,b,w,f,v,u]),{isMounted:g,styles:p}}(W,{duration:150,initial:{opacity:0},open:{opacity:1},close:{opacity:0}}),X=G.isMounted,J=G.styles,Z=null===(t={light:"bg-tooltip-background-light text-text-primary",dark:"bg-tooltip-background-dark text-text-on-color"})||void 0===t?void 0:t[l],Q="dark"===l?"text-tooltip-background-dark":"text-tooltip-background-light";return i().createElement(i().Fragment,null,(0,o.isValidElement)(y)&&(0,o.cloneElement)(y,ci(ci({},y.props),{},{ref:ii(y.ref,B.setReference),className:te(y.props.className)},q())),i().createElement(vo,{id:S,root:w},X&&i().createElement("div",ai({className:te("absolute z-20 py-2 px-3 rounded-md text-xs leading-4 shadow-soft-shadow-lg",Z,"max-w-80 w-fit",b),ref:B.setFloating,style:ci(ci({},V),J)},Y()),i().createElement("div",null,!!f&&i().createElement("span",{className:"font-semibold"},f),!!h&&i().createElement("div",{className:"font-normal"},h)),m&&i().createElement(Vr,{ref:F,context:W,placement:u,className:te("fill-current",Q)}))))},hi=["slug","text","icon","className","disabled","isFirstChild","isLastChild"];function pi(){return pi=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},pi.apply(null,arguments)}var mi=(0,o.createContext)(),gi=function(e,t){var n=(0,o.useContext)(mi),r=e.slug,s=e.text,a=e.icon,l=e.className,c=e.disabled,u=void 0!==c&&c,d=e.isFirstChild,f=e.isLastChild,h=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,hi);if(!n)throw new Error("Button should be used inside Button Group");var p=n.activeItem,m=n.onChange,g=n.size,v=n.iconPosition,y=te("bg-background-primary text-primary cursor-pointer flex items-center justify-center","hover:bg-button-tertiary-hover","focus:outline-none",u?"text-text-disabled cursor-not-allowed":"",{xs:"py-1 px-1 text-sm gap-0.5 [&>svg]:h-4 [&>svg]:w-4",sm:"py-2 px-2 text-base gap-1 [&>svg]:h-4 [&>svg]:w-4",md:"py-2.5 px-2.5 text-base gap-1 [&>svg]:h-5 [&>svg]:w-5"}[g],"border-0 border-r border-border-subtle border-solid",p===r?"bg-button-disabled":"",d?"rounded-tl rounded-bl border-0 border-r border-border-subtle":"",f?"rounded-tr rounded-br border-0":"",l);return i().createElement("button",pi({ref:t,className:y,disabled:u,onClick:function(e){m(e,{slug:r,text:s})}},h),"left"===v&&a&&i().createElement("span",{className:"mr-1"},a),s,"right"===v&&a&&i().createElement("span",{className:"ml-1"},a))},vi=(0,o.forwardRef)(gi);vi.displayName="Button";var yi={Group:function(e){var t=e.children,n=e.activeItem,r=void 0===n?null:n,s=e.onChange,a=e.className,l=e.size,c=void 0===l?"md":l,u=e.iconPosition,d=void 0===u?"left":u,f=(0,o.useCallback)((function(e,t){s&&s({event:e,value:t})}),[s]),h=te("box-border flex border border-border-subtle border-solid rounded",a);return i().createElement("div",{className:h},i().createElement(mi.Provider,{value:{activeItem:r,onChange:f,size:c,iconPosition:d}},i().Children.map(t,(function(e,n){if(!(0,o.isValidElement)(e))return null;var r=0===n,s=n===i().Children.count(t)-1;return i().cloneElement(e,{index:n,isFirstChild:r,isLastChild:s})}))))},Button:vi},bi=yi;function xi(e){if("undefined"==typeof Proxy)return e;const t=new Map;return new Proxy(e,{get:(n,r)=>(t.has(r)||t.set(r,e(r)),t.get(r))})}function wi(e){return null!==e&&"object"==typeof e&&"function"==typeof e.start}const Ei=e=>Array.isArray(e);function Si(e,t){if(!Array.isArray(t))return!1;const n=t.length;if(n!==e.length)return!1;for(let r=0;r<n;r++)if(t[r]!==e[r])return!1;return!0}function _i(e){return"string"==typeof e||Array.isArray(e)}function ki(e){const t=[{},{}];return null==e||e.values.forEach(((e,n)=>{t[0][n]=e.get(),t[1][n]=e.getVelocity()})),t}function Ci(e,t,n,r){if("function"==typeof t){const[o,i]=ki(r);t=t(void 0!==n?n:e.custom,o,i)}if("string"==typeof t&&(t=e.variants&&e.variants[t]),"function"==typeof t){const[o,i]=ki(r);t=t(void 0!==n?n:e.custom,o,i)}return t}function Pi(e,t,n){const r=e.getProps();return Ci(r,t,void 0!==n?n:r.custom,e)}const Ti=["animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"],Oi=["initial",...Ti],Ri=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"],Ni=new Set(Ri),Ai=e=>1e3*e,ji=e=>e/1e3,Mi={type:"spring",stiffness:500,damping:25,restSpeed:10},Ii={type:"keyframes",duration:.8},Di={type:"keyframes",ease:[.25,.1,.35,1],duration:.3},Li=(e,{keyframes:t})=>t.length>2?Ii:Ni.has(e)?e.startsWith("scale")?{type:"spring",stiffness:550,damping:0===t[1]?2*Math.sqrt(550):30,restSpeed:10}:Mi:Di;function Fi(e,t){return e[t]||e.default||e}const zi=e=>null!==e;function Bi(e,{repeat:t,repeatType:n="loop"},r){const o=e.filter(zi),i=t&&"loop"!==n&&t%2==1?0:o.length-1;return i&&void 0!==r?r:o[i]}const Vi=e=>e,Wi=["read","resolveKeyframes","update","preRender","render","postRender"];function Ui(e,t){let n=!1,r=!0;const o={delta:0,timestamp:0,isProcessing:!1},i=()=>n=!0,s=Wi.reduce(((e,t)=>(e[t]=function(e){let t=new Set,n=new Set,r=!1,o=!1;const i=new WeakSet;let s={delta:0,timestamp:0,isProcessing:!1};function a(t){i.has(t)&&(l.schedule(t),e()),t(s)}const l={schedule:(e,o=!1,s=!1)=>{const a=s&&r?t:n;return o&&i.add(e),a.has(e)||a.add(e),e},cancel:e=>{n.delete(e),i.delete(e)},process:e=>{s=e,r?o=!0:(r=!0,[t,n]=[n,t],n.clear(),t.forEach(a),r=!1,o&&(o=!1,l.process(e)))}};return l}(i),e)),{}),{read:a,resolveKeyframes:l,update:c,preRender:u,render:d,postRender:f}=s,h=()=>{const i=performance.now();n=!1,o.delta=r?1e3/60:Math.max(Math.min(i-o.timestamp,40),1),o.timestamp=i,o.isProcessing=!0,a.process(o),l.process(o),c.process(o),u.process(o),d.process(o),f.process(o),o.isProcessing=!1,n&&t&&(r=!1,e(h))};return{schedule:Wi.reduce(((t,i)=>{const a=s[i];return t[i]=(t,i=!1,s=!1)=>(n||(n=!0,r=!0,o.isProcessing||e(h)),a.schedule(t,i,s)),t}),{}),cancel:e=>{for(let t=0;t<Wi.length;t++)s[Wi[t]].cancel(e)},state:o,steps:s}}const{schedule:$i,cancel:Ki,state:Hi,steps:qi}=Ui("undefined"!=typeof requestAnimationFrame?requestAnimationFrame:Vi,!0),Yi=e=>/^0[^.\s]+$/u.test(e);let Gi=Vi,Xi=Vi;const Ji=e=>/^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(e),Zi=e=>t=>"string"==typeof t&&t.startsWith(e),Qi=Zi("--"),es=Zi("var(--"),ts=e=>!!es(e)&&ns.test(e.split("/*")[0].trim()),ns=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu,rs=/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;function os(e,t,n=1){Xi(n<=4,`Max CSS variable fallback depth detected in property "${e}". This may indicate a circular fallback dependency.`);const[r,o]=function(e){const t=rs.exec(e);if(!t)return[,];const[,n,r,o]=t;return[`--${null!=n?n:r}`,o]}(e);if(!r)return;const i=window.getComputedStyle(t).getPropertyValue(r);if(i){const e=i.trim();return Ji(e)?parseFloat(e):e}return ts(o)?os(o,t,n+1):o}const is=(e,t,n)=>n>t?t:n<e?e:n,ss={test:e=>"number"==typeof e,parse:parseFloat,transform:e=>e},as={...ss,transform:e=>is(0,1,e)},ls={...ss,default:1},cs=e=>Math.round(1e5*e)/1e5,us=/-?(?:\d+(?:\.\d+)?|\.\d+)/gu,ds=/(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu,fs=/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;function hs(e){return"string"==typeof e}const ps=e=>({test:t=>hs(t)&&t.endsWith(e)&&1===t.split(" ").length,parse:parseFloat,transform:t=>`${t}${e}`}),ms=ps("deg"),gs=ps("%"),vs=ps("px"),ys=ps("vh"),bs=ps("vw"),xs={...gs,parse:e=>gs.parse(e)/100,transform:e=>gs.transform(100*e)},ws=new Set(["width","height","top","left","right","bottom","x","y","translateX","translateY"]),Es=e=>e===ss||e===vs,Ss=(e,t)=>parseFloat(e.split(", ")[t]),_s=(e,t)=>(n,{transform:r})=>{if("none"===r||!r)return 0;const o=r.match(/^matrix3d\((.+)\)$/u);if(o)return Ss(o[1],t);{const t=r.match(/^matrix\((.+)\)$/u);return t?Ss(t[1],e):0}},ks=new Set(["x","y","z"]),Cs=Ri.filter((e=>!ks.has(e))),Ps={width:({x:e},{paddingLeft:t="0",paddingRight:n="0"})=>e.max-e.min-parseFloat(t)-parseFloat(n),height:({y:e},{paddingTop:t="0",paddingBottom:n="0"})=>e.max-e.min-parseFloat(t)-parseFloat(n),top:(e,{top:t})=>parseFloat(t),left:(e,{left:t})=>parseFloat(t),bottom:({y:e},{top:t})=>parseFloat(t)+(e.max-e.min),right:({x:e},{left:t})=>parseFloat(t)+(e.max-e.min),x:_s(4,13),y:_s(5,14)};Ps.translateX=Ps.x,Ps.translateY=Ps.y;const Ts=e=>t=>t.test(e),Os=[ss,vs,gs,ms,bs,ys,{test:e=>"auto"===e,parse:e=>e}],Rs=e=>Os.find(Ts(e)),Ns=new Set;let As=!1,js=!1;function Ms(){if(js){const e=Array.from(Ns).filter((e=>e.needsMeasurement)),t=new Set(e.map((e=>e.element))),n=new Map;t.forEach((e=>{const t=function(e){const t=[];return Cs.forEach((n=>{const r=e.getValue(n);void 0!==r&&(t.push([n,r.get()]),r.set(n.startsWith("scale")?1:0))})),t}(e);t.length&&(n.set(e,t),e.render())})),e.forEach((e=>e.measureInitialState())),t.forEach((e=>{e.render();const t=n.get(e);t&&t.forEach((([t,n])=>{var r;null===(r=e.getValue(t))||void 0===r||r.set(n)}))})),e.forEach((e=>e.measureEndState())),e.forEach((e=>{void 0!==e.suspendedScrollY&&window.scrollTo(0,e.suspendedScrollY)}))}js=!1,As=!1,Ns.forEach((e=>e.complete())),Ns.clear()}function Is(){Ns.forEach((e=>{e.readKeyframes(),e.needsMeasurement&&(js=!0)}))}class Ds{constructor(e,t,n,r,o,i=!1){this.isComplete=!1,this.isAsync=!1,this.needsMeasurement=!1,this.isScheduled=!1,this.unresolvedKeyframes=[...e],this.onComplete=t,this.name=n,this.motionValue=r,this.element=o,this.isAsync=i}scheduleResolve(){this.isScheduled=!0,this.isAsync?(Ns.add(this),As||(As=!0,$i.read(Is),$i.resolveKeyframes(Ms))):(this.readKeyframes(),this.complete())}readKeyframes(){const{unresolvedKeyframes:e,name:t,element:n,motionValue:r}=this;for(let o=0;o<e.length;o++)if(null===e[o])if(0===o){const o=null==r?void 0:r.get(),i=e[e.length-1];if(void 0!==o)e[0]=o;else if(n&&t){const r=n.readValue(t,i);null!=r&&(e[0]=r)}void 0===e[0]&&(e[0]=i),r&&void 0===o&&r.set(e[0])}else e[o]=e[o-1]}setFinalKeyframe(){}measureInitialState(){}renderEndStyles(){}measureEndState(){}complete(){this.isComplete=!0,this.onComplete(this.unresolvedKeyframes,this.finalKeyframe),Ns.delete(this)}cancel(){this.isComplete||(this.isScheduled=!1,Ns.delete(this))}resume(){this.isComplete||this.scheduleResolve()}}const Ls=(e,t)=>n=>Boolean(hs(n)&&fs.test(n)&&n.startsWith(e)||t&&!function(e){return null==e}(n)&&Object.prototype.hasOwnProperty.call(n,t)),Fs=(e,t,n)=>r=>{if(!hs(r))return r;const[o,i,s,a]=r.match(us);return{[e]:parseFloat(o),[t]:parseFloat(i),[n]:parseFloat(s),alpha:void 0!==a?parseFloat(a):1}},zs={...ss,transform:e=>Math.round((e=>is(0,255,e))(e))},Bs={test:Ls("rgb","red"),parse:Fs("red","green","blue"),transform:({red:e,green:t,blue:n,alpha:r=1})=>"rgba("+zs.transform(e)+", "+zs.transform(t)+", "+zs.transform(n)+", "+cs(as.transform(r))+")"},Vs={test:Ls("#"),parse:function(e){let t="",n="",r="",o="";return e.length>5?(t=e.substring(1,3),n=e.substring(3,5),r=e.substring(5,7),o=e.substring(7,9)):(t=e.substring(1,2),n=e.substring(2,3),r=e.substring(3,4),o=e.substring(4,5),t+=t,n+=n,r+=r,o+=o),{red:parseInt(t,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:o?parseInt(o,16)/255:1}},transform:Bs.transform},Ws={test:Ls("hsl","hue"),parse:Fs("hue","saturation","lightness"),transform:({hue:e,saturation:t,lightness:n,alpha:r=1})=>"hsla("+Math.round(e)+", "+gs.transform(cs(t))+", "+gs.transform(cs(n))+", "+cs(as.transform(r))+")"},Us={test:e=>Bs.test(e)||Vs.test(e)||Ws.test(e),parse:e=>Bs.test(e)?Bs.parse(e):Ws.test(e)?Ws.parse(e):Vs.parse(e),transform:e=>hs(e)?e:e.hasOwnProperty("red")?Bs.transform(e):Ws.transform(e)},$s="number",Ks="color",Hs="var",qs="var(",Ys="${}",Gs=/var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;function Xs(e){const t=e.toString(),n=[],r={color:[],number:[],var:[]},o=[];let i=0;const s=t.replace(Gs,(e=>(Us.test(e)?(r.color.push(i),o.push(Ks),n.push(Us.parse(e))):e.startsWith(qs)?(r.var.push(i),o.push(Hs),n.push(e)):(r.number.push(i),o.push($s),n.push(parseFloat(e))),++i,Ys))).split(Ys);return{values:n,split:s,indexes:r,types:o}}function Js(e){return Xs(e).values}function Zs(e){const{split:t,types:n}=Xs(e),r=t.length;return e=>{let o="";for(let i=0;i<r;i++)if(o+=t[i],void 0!==e[i]){const t=n[i];o+=t===$s?cs(e[i]):t===Ks?Us.transform(e[i]):e[i]}return o}}const Qs=e=>"number"==typeof e?0:e,ea={test:function(e){var t,n;return isNaN(e)&&hs(e)&&((null===(t=e.match(us))||void 0===t?void 0:t.length)||0)+((null===(n=e.match(ds))||void 0===n?void 0:n.length)||0)>0},parse:Js,createTransformer:Zs,getAnimatableNone:function(e){const t=Js(e);return Zs(e)(t.map(Qs))}},ta=new Set(["brightness","contrast","saturate","opacity"]);function na(e){const[t,n]=e.slice(0,-1).split("(");if("drop-shadow"===t)return e;const[r]=n.match(us)||[];if(!r)return e;const o=n.replace(r,"");let i=ta.has(t)?1:0;return r!==n&&(i*=100),t+"("+i+o+")"}const ra=/\b([a-z-]*)\(.*?\)/gu,oa={...ea,getAnimatableNone:e=>{const t=e.match(ra);return t?t.map(na).join(" "):e}},ia={...ss,transform:Math.round},sa={borderWidth:vs,borderTopWidth:vs,borderRightWidth:vs,borderBottomWidth:vs,borderLeftWidth:vs,borderRadius:vs,radius:vs,borderTopLeftRadius:vs,borderTopRightRadius:vs,borderBottomRightRadius:vs,borderBottomLeftRadius:vs,width:vs,maxWidth:vs,height:vs,maxHeight:vs,size:vs,top:vs,right:vs,bottom:vs,left:vs,padding:vs,paddingTop:vs,paddingRight:vs,paddingBottom:vs,paddingLeft:vs,margin:vs,marginTop:vs,marginRight:vs,marginBottom:vs,marginLeft:vs,rotate:ms,rotateX:ms,rotateY:ms,rotateZ:ms,scale:ls,scaleX:ls,scaleY:ls,scaleZ:ls,skew:ms,skewX:ms,skewY:ms,distance:vs,translateX:vs,translateY:vs,translateZ:vs,x:vs,y:vs,z:vs,perspective:vs,transformPerspective:vs,opacity:as,originX:xs,originY:xs,originZ:vs,zIndex:ia,backgroundPositionX:vs,backgroundPositionY:vs,fillOpacity:as,strokeOpacity:as,numOctaves:ia},aa={...sa,color:Us,backgroundColor:Us,outlineColor:Us,fill:Us,stroke:Us,borderColor:Us,borderTopColor:Us,borderRightColor:Us,borderBottomColor:Us,borderLeftColor:Us,filter:oa,WebkitFilter:oa},la=e=>aa[e];function ca(e,t){let n=la(e);return n!==oa&&(n=ea),n.getAnimatableNone?n.getAnimatableNone(t):void 0}const ua=new Set(["auto","none","0"]);class da extends Ds{constructor(e,t,n,r,o){super(e,t,n,r,o,!0)}readKeyframes(){const{unresolvedKeyframes:e,element:t,name:n}=this;if(!t||!t.current)return;super.readKeyframes();for(let n=0;n<e.length;n++){let r=e[n];if("string"==typeof r&&(r=r.trim(),ts(r))){const o=os(r,t.current);void 0!==o&&(e[n]=o),n===e.length-1&&(this.finalKeyframe=r)}}if(this.resolveNoneKeyframes(),!ws.has(n)||2!==e.length)return;const[r,o]=e,i=Rs(r),s=Rs(o);if(i!==s)if(Es(i)&&Es(s))for(let t=0;t<e.length;t++){const n=e[t];"string"==typeof n&&(e[t]=parseFloat(n))}else this.needsMeasurement=!0}resolveNoneKeyframes(){const{unresolvedKeyframes:e,name:t}=this,n=[];for(let t=0;t<e.length;t++)("number"==typeof(r=e[t])?0===r:null===r||"none"===r||"0"===r||Yi(r))&&n.push(t);var r;n.length&&function(e,t,n){let r,o=0;for(;o<e.length&&!r;){const t=e[o];"string"==typeof t&&!ua.has(t)&&Xs(t).values.length&&(r=e[o]),o++}if(r&&n)for(const o of t)e[o]=ca(n,r)}(e,n,t)}measureInitialState(){const{element:e,unresolvedKeyframes:t,name:n}=this;if(!e||!e.current)return;"height"===n&&(this.suspendedScrollY=window.pageYOffset),this.measuredOrigin=Ps[n](e.measureViewportBox(),window.getComputedStyle(e.current)),t[0]=this.measuredOrigin;const r=t[t.length-1];void 0!==r&&e.getValue(n,r).jump(r,!1)}measureEndState(){var e;const{element:t,name:n,unresolvedKeyframes:r}=this;if(!t||!t.current)return;const o=t.getValue(n);o&&o.jump(this.measuredOrigin,!1);const i=r.length-1,s=r[i];r[i]=Ps[n](t.measureViewportBox(),window.getComputedStyle(t.current)),null!==s&&void 0===this.finalKeyframe&&(this.finalKeyframe=s),(null===(e=this.removedTransforms)||void 0===e?void 0:e.length)&&this.removedTransforms.forEach((([e,n])=>{t.getValue(e).set(n)})),this.resolveNoneKeyframes()}}function fa(e){let t;return()=>(void 0===t&&(t=e()),t)}let ha;function pa(){ha=void 0}const ma={now:()=>(void 0===ha&&ma.set(Hi.isProcessing?Hi.timestamp:performance.now()),ha),set:e=>{ha=e,queueMicrotask(pa)}},ga=(e,t)=>!("zIndex"===t||"number"!=typeof e&&!Array.isArray(e)&&("string"!=typeof e||!ea.test(e)&&"0"!==e||e.startsWith("url(")));class va{constructor({autoplay:e=!0,delay:t=0,type:n="keyframes",repeat:r=0,repeatDelay:o=0,repeatType:i="loop",...s}){this.isStopped=!1,this.hasAttemptedResolve=!1,this.createdAt=ma.now(),this.options={autoplay:e,delay:t,type:n,repeat:r,repeatDelay:o,repeatType:i,...s},this.updateFinishedPromise()}calcStartTime(){return this.resolvedAt&&this.resolvedAt-this.createdAt>40?this.resolvedAt:this.createdAt}get resolved(){return this._resolved||this.hasAttemptedResolve||(Is(),Ms()),this._resolved}onKeyframesResolved(e,t){this.resolvedAt=ma.now(),this.hasAttemptedResolve=!0;const{name:n,type:r,velocity:o,delay:i,onComplete:s,onUpdate:a,isGenerator:l}=this.options;if(!l&&!function(e,t,n,r){const o=e[0];if(null===o)return!1;if("display"===t||"visibility"===t)return!0;const i=e[e.length-1],s=ga(o,t),a=ga(i,t);return Gi(s===a,`You are trying to animate ${t} from "${o}" to "${i}". ${o} is not an animatable value - to enable this animation set ${o} to a value animatable to ${i} via the \`style\` property.`),!(!s||!a)&&(function(e){const t=e[0];if(1===e.length)return!0;for(let n=0;n<e.length;n++)if(e[n]!==t)return!0}(e)||"spring"===n&&r)}(e,n,r,o)){if(!i)return null==a||a(Bi(e,this.options,t)),null==s||s(),void this.resolveFinishedPromise();this.options.duration=0}const c=this.initPlayback(e,t);!1!==c&&(this._resolved={keyframes:e,finalKeyframe:t,...c},this.onPostResolved())}onPostResolved(){}then(e,t){return this.currentFinishedPromise.then(e,t)}updateFinishedPromise(){this.currentFinishedPromise=new Promise((e=>{this.resolveFinishedPromise=e}))}}function ya(e,t){return t?e*(1e3/t):0}const ba=5;function xa(e,t,n){const r=Math.max(t-ba,0);return ya(n-e(r),t-r)}const wa=.001,Ea=.01,Sa=10,_a=.05,ka=1;const Ca=12;function Pa(e,t){return e*Math.sqrt(1-t*t)}const Ta=["duration","bounce"],Oa=["stiffness","damping","mass"];function Ra(e,t){return t.some((t=>void 0!==e[t]))}function Na({keyframes:e,restDelta:t,restSpeed:n,...r}){const o=e[0],i=e[e.length-1],s={done:!1,value:o},{stiffness:a,damping:l,mass:c,duration:u,velocity:d,isResolvedFromDuration:f}=function(e){let t={velocity:0,stiffness:100,damping:10,mass:1,isResolvedFromDuration:!1,...e};if(!Ra(e,Oa)&&Ra(e,Ta)){const n=function({duration:e=800,bounce:t=.25,velocity:n=0,mass:r=1}){let o,i;Gi(e<=Ai(Sa),"Spring duration must be 10 seconds or less");let s=1-t;s=is(_a,ka,s),e=is(Ea,Sa,ji(e)),s<1?(o=t=>{const r=t*s,o=r*e,i=r-n,a=Pa(t,s),l=Math.exp(-o);return wa-i/a*l},i=t=>{const r=t*s*e,i=r*n+n,a=Math.pow(s,2)*Math.pow(t,2)*e,l=Math.exp(-r),c=Pa(Math.pow(t,2),s);return(-o(t)+wa>0?-1:1)*((i-a)*l)/c}):(o=t=>Math.exp(-t*e)*((t-n)*e+1)-wa,i=t=>Math.exp(-t*e)*(e*e*(n-t)));const a=function(e,t,n){let r=n;for(let n=1;n<Ca;n++)r-=e(r)/t(r);return r}(o,i,5/e);if(e=Ai(e),isNaN(a))return{stiffness:100,damping:10,duration:e};{const t=Math.pow(a,2)*r;return{stiffness:t,damping:2*s*Math.sqrt(r*t),duration:e}}}(e);t={...t,...n,mass:1},t.isResolvedFromDuration=!0}return t}({...r,velocity:-ji(r.velocity||0)}),h=d||0,p=l/(2*Math.sqrt(a*c)),m=i-o,g=ji(Math.sqrt(a/c)),v=Math.abs(m)<5;let y;if(n||(n=v?.01:2),t||(t=v?.005:.5),p<1){const e=Pa(g,p);y=t=>{const n=Math.exp(-p*g*t);return i-n*((h+p*g*m)/e*Math.sin(e*t)+m*Math.cos(e*t))}}else if(1===p)y=e=>i-Math.exp(-g*e)*(m+(h+g*m)*e);else{const e=g*Math.sqrt(p*p-1);y=t=>{const n=Math.exp(-p*g*t),r=Math.min(e*t,300);return i-n*((h+p*g*m)*Math.sinh(r)+e*m*Math.cosh(r))/e}}return{calculatedDuration:f&&u||null,next:e=>{const r=y(e);if(f)s.done=e>=u;else{let o=0;p<1&&(o=0===e?Ai(h):xa(y,e,r));const a=Math.abs(o)<=n,l=Math.abs(i-r)<=t;s.done=a&&l}return s.value=s.done?i:r,s}}}function Aa({keyframes:e,velocity:t=0,power:n=.8,timeConstant:r=325,bounceDamping:o=10,bounceStiffness:i=500,modifyTarget:s,min:a,max:l,restDelta:c=.5,restSpeed:u}){const d=e[0],f={done:!1,value:d},h=e=>void 0===a?l:void 0===l||Math.abs(a-e)<Math.abs(l-e)?a:l;let p=n*t;const m=d+p,g=void 0===s?m:s(m);g!==m&&(p=g-d);const v=e=>-p*Math.exp(-e/r),y=e=>g+v(e),b=e=>{const t=v(e),n=y(e);f.done=Math.abs(t)<=c,f.value=f.done?g:n};let x,w;const E=e=>{(e=>void 0!==a&&e<a||void 0!==l&&e>l)(f.value)&&(x=e,w=Na({keyframes:[f.value,h(f.value)],velocity:xa(y,e,f.value),damping:o,stiffness:i,restDelta:c,restSpeed:u}))};return E(0),{calculatedDuration:null,next:e=>{let t=!1;return w||void 0!==x||(t=!0,b(e),E(e)),void 0!==x&&e>=x?w.next(e-x):(!t&&b(e),f)}}}const ja=(e,t,n)=>(((1-3*n+3*t)*e+(3*n-6*t))*e+3*t)*e;function Ma(e,t,n,r){if(e===t&&n===r)return Vi;return o=>0===o||1===o?o:ja(function(e,t,n,r,o){let i,s,a=0;do{s=t+(n-t)/2,i=ja(s,r,o)-e,i>0?n=s:t=s}while(Math.abs(i)>1e-7&&++a<12);return s}(o,0,1,e,n),t,r)}const Ia=Ma(.42,0,1,1),Da=Ma(0,0,.58,1),La=Ma(.42,0,.58,1),Fa=e=>t=>t<=.5?e(2*t)/2:(2-e(2*(1-t)))/2,za=e=>t=>1-e(1-t),Ba=e=>1-Math.sin(Math.acos(e)),Va=za(Ba),Wa=Fa(Ba),Ua=Ma(.33,1.53,.69,.99),$a=za(Ua),Ka=Fa($a),Ha={linear:Vi,easeIn:Ia,easeInOut:La,easeOut:Da,circIn:Ba,circInOut:Wa,circOut:Va,backIn:$a,backInOut:Ka,backOut:Ua,anticipate:e=>(e*=2)<1?.5*$a(e):.5*(2-Math.pow(2,-10*(e-1)))},qa=e=>{if(Array.isArray(e)){Xi(4===e.length,"Cubic bezier arrays must contain four numerical values.");const[t,n,r,o]=e;return Ma(t,n,r,o)}return"string"==typeof e?(Xi(void 0!==Ha[e],`Invalid easing type '${e}'`),Ha[e]):e},Ya=(e,t)=>n=>t(e(n)),Ga=(...e)=>e.reduce(Ya),Xa=(e,t,n)=>{const r=t-e;return 0===r?1:(n-e)/r},Ja=(e,t,n)=>e+(t-e)*n;function Za(e,t,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}function Qa(e,t){return n=>n>0?t:e}const el=(e,t,n)=>{const r=e*e,o=n*(t*t-r)+r;return o<0?0:Math.sqrt(o)},tl=[Vs,Bs,Ws];function nl(e){const t=(e=>tl.find((t=>t.test(e))))(e);if(Gi(Boolean(t),`'${e}' is not an animatable color. Use the equivalent color code instead.`),!Boolean(t))return!1;let n=t.parse(e);return t===Ws&&(n=function({hue:e,saturation:t,lightness:n,alpha:r}){e/=360,n/=100;let o=0,i=0,s=0;if(t/=100){const r=n<.5?n*(1+t):n+t-n*t,a=2*n-r;o=Za(a,r,e+1/3),i=Za(a,r,e),s=Za(a,r,e-1/3)}else o=i=s=n;return{red:Math.round(255*o),green:Math.round(255*i),blue:Math.round(255*s),alpha:r}}(n)),n}const rl=(e,t)=>{const n=nl(e),r=nl(t);if(!n||!r)return Qa(e,t);const o={...n};return e=>(o.red=el(n.red,r.red,e),o.green=el(n.green,r.green,e),o.blue=el(n.blue,r.blue,e),o.alpha=Ja(n.alpha,r.alpha,e),Bs.transform(o))},ol=new Set(["none","hidden"]);function il(e,t){return n=>Ja(e,t,n)}function sl(e){return"number"==typeof e?il:"string"==typeof e?ts(e)?Qa:Us.test(e)?rl:cl:Array.isArray(e)?al:"object"==typeof e?Us.test(e)?rl:ll:Qa}function al(e,t){const n=[...e],r=n.length,o=e.map(((e,n)=>sl(e)(e,t[n])));return e=>{for(let t=0;t<r;t++)n[t]=o[t](e);return n}}function ll(e,t){const n={...e,...t},r={};for(const o in n)void 0!==e[o]&&void 0!==t[o]&&(r[o]=sl(e[o])(e[o],t[o]));return e=>{for(const t in r)n[t]=r[t](e);return n}}const cl=(e,t)=>{const n=ea.createTransformer(t),r=Xs(e),o=Xs(t);return r.indexes.var.length===o.indexes.var.length&&r.indexes.color.length===o.indexes.color.length&&r.indexes.number.length>=o.indexes.number.length?ol.has(e)&&!o.values.length||ol.has(t)&&!r.values.length?function(e,t){return ol.has(e)?n=>n<=0?e:t:n=>n>=1?t:e}(e,t):Ga(al(function(e,t){var n;const r=[],o={color:0,var:0,number:0};for(let i=0;i<t.values.length;i++){const s=t.types[i],a=e.indexes[s][o[s]],l=null!==(n=e.values[a])&&void 0!==n?n:0;r[i]=l,o[s]++}return r}(r,o),o.values),n):(Gi(!0,`Complex values '${e}' and '${t}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`),Qa(e,t))};function ul(e,t,n){return"number"==typeof e&&"number"==typeof t&&"number"==typeof n?Ja(e,t,n):sl(e)(e,t)}function dl({duration:e=300,keyframes:t,times:n,ease:r="easeInOut"}){const o=(e=>Array.isArray(e)&&"number"!=typeof e[0])(r)?r.map(qa):qa(r),i={done:!1,value:t[0]},s=function(e,t){return e.map((e=>e*t))}(n&&n.length===t.length?n:function(e){const t=[0];return function(e,t){const n=e[e.length-1];for(let r=1;r<=t;r++){const o=Xa(0,t,r);e.push(Ja(n,1,o))}}(t,e.length-1),t}(t),e),a=function(e,t,{clamp:n=!0,ease:r,mixer:o}={}){const i=e.length;if(Xi(i===t.length,"Both input and output ranges must be the same length"),1===i)return()=>t[0];if(2===i&&e[0]===e[1])return()=>t[1];e[0]>e[i-1]&&(e=[...e].reverse(),t=[...t].reverse());const s=function(e,t,n){const r=[],o=n||ul,i=e.length-1;for(let n=0;n<i;n++){let i=o(e[n],e[n+1]);if(t){const e=Array.isArray(t)?t[n]||Vi:t;i=Ga(e,i)}r.push(i)}return r}(t,r,o),a=s.length,l=t=>{let n=0;if(a>1)for(;n<e.length-2&&!(t<e[n+1]);n++);const r=Xa(e[n],e[n+1],t);return s[n](r)};return n?t=>l(is(e[0],e[i-1],t)):l}(s,t,{ease:Array.isArray(o)?o:(l=t,c=o,l.map((()=>c||La)).splice(0,l.length-1))});var l,c;return{calculatedDuration:e,next:t=>(i.value=a(t),i.done=t>=e,i)}}const fl=e=>{const t=({timestamp:t})=>e(t);return{start:()=>$i.update(t,!0),stop:()=>Ki(t),now:()=>Hi.isProcessing?Hi.timestamp:ma.now()}},hl={decay:Aa,inertia:Aa,tween:dl,keyframes:dl,spring:Na},pl=e=>e/100;class ml extends va{constructor(e){super(e),this.holdTime=null,this.cancelTime=null,this.currentTime=0,this.playbackSpeed=1,this.pendingPlayState="running",this.startTime=null,this.state="idle",this.stop=()=>{if(this.resolver.cancel(),this.isStopped=!0,"idle"===this.state)return;this.teardown();const{onStop:e}=this.options;e&&e()};const{name:t,motionValue:n,element:r,keyframes:o}=this.options,i=(null==r?void 0:r.KeyframeResolver)||Ds;this.resolver=new i(o,((e,t)=>this.onKeyframesResolved(e,t)),t,n,r),this.resolver.scheduleResolve()}initPlayback(e){const{type:t="keyframes",repeat:n=0,repeatDelay:r=0,repeatType:o,velocity:i=0}=this.options,s=hl[t]||dl;let a,l;s!==dl&&"number"!=typeof e[0]&&(a=Ga(pl,ul(e[0],e[1])),e=[0,100]);const c=s({...this.options,keyframes:e});"mirror"===o&&(l=s({...this.options,keyframes:[...e].reverse(),velocity:-i})),null===c.calculatedDuration&&(c.calculatedDuration=function(e){let t=0,n=e.next(t);for(;!n.done&&t<2e4;)t+=50,n=e.next(t);return t>=2e4?1/0:t}(c));const{calculatedDuration:u}=c,d=u+r;return{generator:c,mirroredGenerator:l,mapPercentToKeyframes:a,calculatedDuration:u,resolvedDuration:d,totalDuration:d*(n+1)-r}}onPostResolved(){const{autoplay:e=!0}=this.options;this.play(),"paused"!==this.pendingPlayState&&e?this.state=this.pendingPlayState:this.pause()}tick(e,t=!1){const{resolved:n}=this;if(!n){const{keyframes:e}=this.options;return{done:!0,value:e[e.length-1]}}const{finalKeyframe:r,generator:o,mirroredGenerator:i,mapPercentToKeyframes:s,keyframes:a,calculatedDuration:l,totalDuration:c,resolvedDuration:u}=n;if(null===this.startTime)return o.next(0);const{delay:d,repeat:f,repeatType:h,repeatDelay:p,onUpdate:m}=this.options;this.speed>0?this.startTime=Math.min(this.startTime,e):this.speed<0&&(this.startTime=Math.min(e-c/this.speed,this.startTime)),t?this.currentTime=e:null!==this.holdTime?this.currentTime=this.holdTime:this.currentTime=Math.round(e-this.startTime)*this.speed;const g=this.currentTime-d*(this.speed>=0?1:-1),v=this.speed>=0?g<0:g>c;this.currentTime=Math.max(g,0),"finished"===this.state&&null===this.holdTime&&(this.currentTime=c);let y=this.currentTime,b=o;if(f){const e=Math.min(this.currentTime,c)/u;let t=Math.floor(e),n=e%1;!n&&e>=1&&(n=1),1===n&&t--,t=Math.min(t,f+1),Boolean(t%2)&&("reverse"===h?(n=1-n,p&&(n-=p/u)):"mirror"===h&&(b=i)),y=is(0,1,n)*u}const x=v?{done:!1,value:a[0]}:b.next(y);s&&(x.value=s(x.value));let{done:w}=x;v||null===l||(w=this.speed>=0?this.currentTime>=c:this.currentTime<=0);const E=null===this.holdTime&&("finished"===this.state||"running"===this.state&&w);return E&&void 0!==r&&(x.value=Bi(a,this.options,r)),m&&m(x.value),E&&this.finish(),x}get duration(){const{resolved:e}=this;return e?ji(e.calculatedDuration):0}get time(){return ji(this.currentTime)}set time(e){e=Ai(e),this.currentTime=e,null!==this.holdTime||0===this.speed?this.holdTime=e:this.driver&&(this.startTime=this.driver.now()-e/this.speed)}get speed(){return this.playbackSpeed}set speed(e){const t=this.playbackSpeed!==e;this.playbackSpeed=e,t&&(this.time=ji(this.currentTime))}play(){if(this.resolver.isScheduled||this.resolver.resume(),!this._resolved)return void(this.pendingPlayState="running");if(this.isStopped)return;const{driver:e=fl,onPlay:t,startTime:n}=this.options;this.driver||(this.driver=e((e=>this.tick(e)))),t&&t();const r=this.driver.now();null!==this.holdTime?this.startTime=r-this.holdTime:this.startTime?"finished"===this.state&&(this.startTime=r):this.startTime=null!=n?n:this.calcStartTime(),"finished"===this.state&&this.updateFinishedPromise(),this.cancelTime=this.startTime,this.holdTime=null,this.state="running",this.driver.start()}pause(){var e;this._resolved?(this.state="paused",this.holdTime=null!==(e=this.currentTime)&&void 0!==e?e:0):this.pendingPlayState="paused"}complete(){"running"!==this.state&&this.play(),this.pendingPlayState=this.state="finished",this.holdTime=null}finish(){this.teardown(),this.state="finished";const{onComplete:e}=this.options;e&&e()}cancel(){null!==this.cancelTime&&this.tick(this.cancelTime),this.teardown(),this.updateFinishedPromise()}teardown(){this.state="idle",this.stopDriver(),this.resolveFinishedPromise(),this.updateFinishedPromise(),this.startTime=this.cancelTime=null,this.resolver.cancel()}stopDriver(){this.driver&&(this.driver.stop(),this.driver=void 0)}sample(e){return this.startTime=0,this.tick(e,!0)}}const gl=new Set(["opacity","clipPath","filter","transform"]),vl=e=>Array.isArray(e)&&"number"==typeof e[0];function yl(e){return Boolean(!e||"string"==typeof e&&e in xl||vl(e)||Array.isArray(e)&&e.every(yl))}const bl=([e,t,n,r])=>`cubic-bezier(${e}, ${t}, ${n}, ${r})`,xl={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:bl([0,.65,.55,1]),circOut:bl([.55,0,1,.45]),backIn:bl([.31,.01,.66,-.59]),backOut:bl([.33,1.53,.69,.99])};function wl(e){return El(e)||xl.easeOut}function El(e){return e?vl(e)?bl(e):Array.isArray(e)?e.map(wl):xl[e]:void 0}const Sl=fa((()=>Object.hasOwnProperty.call(Element.prototype,"animate")));class _l extends va{constructor(e){super(e);const{name:t,motionValue:n,element:r,keyframes:o}=this.options;this.resolver=new da(o,((e,t)=>this.onKeyframesResolved(e,t)),t,n,r),this.resolver.scheduleResolve()}initPlayback(e,t){var n;let{duration:r=300,times:o,ease:i,type:s,motionValue:a,name:l,startTime:c}=this.options;if(!(null===(n=a.owner)||void 0===n?void 0:n.current))return!1;if("spring"===(u=this.options).type||!yl(u.ease)){const{onComplete:t,onUpdate:n,motionValue:a,element:l,...c}=this.options,u=function(e,t){const n=new ml({...t,keyframes:e,repeat:0,delay:0,isGenerator:!0});let r={done:!1,value:e[0]};const o=[];let i=0;for(;!r.done&&i<2e4;)r=n.sample(i),o.push(r.value),i+=10;return{times:void 0,keyframes:o,duration:i-10,ease:"linear"}}(e,c);1===(e=u.keyframes).length&&(e[1]=e[0]),r=u.duration,o=u.times,i=u.ease,s="keyframes"}var u;const d=function(e,t,n,{delay:r=0,duration:o=300,repeat:i=0,repeatType:s="loop",ease:a,times:l}={}){const c={[t]:n};l&&(c.offset=l);const u=El(a);return Array.isArray(u)&&(c.easing=u),e.animate(c,{delay:r,duration:o,easing:Array.isArray(u)?"linear":u,fill:"both",iterations:i+1,direction:"reverse"===s?"alternate":"normal"})}(a.owner.current,l,e,{...this.options,duration:r,times:o,ease:i});return d.startTime=null!=c?c:this.calcStartTime(),this.pendingTimeline?(d.timeline=this.pendingTimeline,this.pendingTimeline=void 0):d.onfinish=()=>{const{onComplete:n}=this.options;a.set(Bi(e,this.options,t)),n&&n(),this.cancel(),this.resolveFinishedPromise()},{animation:d,duration:r,times:o,type:s,ease:i,keyframes:e}}get duration(){const{resolved:e}=this;if(!e)return 0;const{duration:t}=e;return ji(t)}get time(){const{resolved:e}=this;if(!e)return 0;const{animation:t}=e;return ji(t.currentTime||0)}set time(e){const{resolved:t}=this;if(!t)return;const{animation:n}=t;n.currentTime=Ai(e)}get speed(){const{resolved:e}=this;if(!e)return 1;const{animation:t}=e;return t.playbackRate}set speed(e){const{resolved:t}=this;if(!t)return;const{animation:n}=t;n.playbackRate=e}get state(){const{resolved:e}=this;if(!e)return"idle";const{animation:t}=e;return t.playState}get startTime(){const{resolved:e}=this;if(!e)return null;const{animation:t}=e;return t.startTime}attachTimeline(e){if(this._resolved){const{resolved:t}=this;if(!t)return Vi;const{animation:n}=t;n.timeline=e,n.onfinish=null}else this.pendingTimeline=e;return Vi}play(){if(this.isStopped)return;const{resolved:e}=this;if(!e)return;const{animation:t}=e;"finished"===t.playState&&this.updateFinishedPromise(),t.play()}pause(){const{resolved:e}=this;if(!e)return;const{animation:t}=e;t.pause()}stop(){if(this.resolver.cancel(),this.isStopped=!0,"idle"===this.state)return;this.resolveFinishedPromise(),this.updateFinishedPromise();const{resolved:e}=this;if(!e)return;const{animation:t,keyframes:n,duration:r,type:o,ease:i,times:s}=e;if("idle"===t.playState||"finished"===t.playState)return;if(this.time){const{motionValue:e,onUpdate:t,onComplete:a,element:l,...c}=this.options,u=new ml({...c,keyframes:n,duration:r,type:o,ease:i,times:s,isGenerator:!0}),d=Ai(this.time);e.setWithVelocity(u.sample(d-10).value,u.sample(d).value,10)}const{onStop:a}=this.options;a&&a(),this.cancel()}complete(){const{resolved:e}=this;e&&e.animation.finish()}cancel(){const{resolved:e}=this;e&&e.animation.cancel()}static supports(e){const{motionValue:t,name:n,repeatDelay:r,repeatType:o,damping:i,type:s}=e;return Sl()&&n&&gl.has(n)&&t&&t.owner&&t.owner.current instanceof HTMLElement&&!t.owner.getProps().onUpdate&&!r&&"mirror"!==o&&0!==i&&"inertia"!==s}}const kl=fa((()=>void 0!==window.ScrollTimeline));class Cl{constructor(e){this.stop=()=>this.runAll("stop"),this.animations=e.filter(Boolean)}then(e,t){return Promise.all(this.animations).then(e).catch(t)}getAll(e){return this.animations[0][e]}setAll(e,t){for(let n=0;n<this.animations.length;n++)this.animations[n][e]=t}attachTimeline(e){const t=this.animations.map((t=>{if(!kl()||!t.attachTimeline)return t.pause(),function(e,n){let r;const o=()=>{const{currentTime:e}=n,o=(null===e?0:e.value)/100;r!==o&&(e=>{t.time=t.duration*e})(o),r=o};return $i.update(o,!0),()=>Ki(o)}(0,e);t.attachTimeline(e)}));return()=>{t.forEach(((e,t)=>{e&&e(),this.animations[t].stop()}))}}get time(){return this.getAll("time")}set time(e){this.setAll("time",e)}get speed(){return this.getAll("speed")}set speed(e){this.setAll("speed",e)}get startTime(){return this.getAll("startTime")}get duration(){let e=0;for(let t=0;t<this.animations.length;t++)e=Math.max(e,this.animations[t].duration);return e}runAll(e){this.animations.forEach((t=>t[e]()))}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}const Pl=(e,t,n,r={},o,i,s)=>a=>{const l=Fi(r,e)||{},c=l.delay||r.delay||0;let{elapsed:u=0}=r;u-=Ai(c);let d={keyframes:Array.isArray(n)?n:[null,n],ease:"easeOut",velocity:t.getVelocity(),...l,delay:-u,onUpdate:e=>{t.set(e),l.onUpdate&&l.onUpdate(e)},onComplete:()=>{a(),l.onComplete&&l.onComplete(),s&&s()},onStop:s,name:e,motionValue:t,element:i?void 0:o};(function({when:e,delay:t,delayChildren:n,staggerChildren:r,staggerDirection:o,repeat:i,repeatType:s,repeatDelay:a,from:l,elapsed:c,...u}){return!!Object.keys(u).length})(l)||(d={...d,...Li(e,d)}),d.duration&&(d.duration=Ai(d.duration)),d.repeatDelay&&(d.repeatDelay=Ai(d.repeatDelay)),void 0!==d.from&&(d.keyframes[0]=d.from);let f=!1;if((!1===d.type||0===d.duration&&!d.repeatDelay)&&(d.duration=0,0===d.delay&&(f=!0)),f&&!i&&void 0!==t.get()){const e=Bi(d.keyframes,l);if(void 0!==e)return $i.update((()=>{d.onUpdate(e),d.onComplete()})),new Cl([])}return!i&&_l.supports(d)?new _l(d):new ml(d)},Tl=e=>Boolean(e&&"object"==typeof e&&e.mix&&e.toValue),Ol=e=>Ei(e)?e[e.length-1]||0:e;function Rl(e,t){-1===e.indexOf(t)&&e.push(t)}function Nl(e,t){const n=e.indexOf(t);n>-1&&e.splice(n,1)}class Al{constructor(){this.subscriptions=[]}add(e){return Rl(this.subscriptions,e),()=>Nl(this.subscriptions,e)}notify(e,t,n){const r=this.subscriptions.length;if(r)if(1===r)this.subscriptions[0](e,t,n);else for(let o=0;o<r;o++){const r=this.subscriptions[o];r&&r(e,t,n)}}getSize(){return this.subscriptions.length}clear(){this.subscriptions.length=0}}const jl={current:void 0};class Ml{constructor(e,t={}){this.version="11.4.0",this.canTrackVelocity=null,this.events={},this.updateAndNotify=(e,t=!0)=>{const n=ma.now();this.updatedAt!==n&&this.setPrevFrameValue(),this.prev=this.current,this.setCurrent(e),this.current!==this.prev&&this.events.change&&this.events.change.notify(this.current),t&&this.events.renderRequest&&this.events.renderRequest.notify(this.current)},this.hasAnimated=!1,this.setCurrent(e),this.owner=t.owner}setCurrent(e){var t;this.current=e,this.updatedAt=ma.now(),null===this.canTrackVelocity&&void 0!==e&&(this.canTrackVelocity=(t=this.current,!isNaN(parseFloat(t))))}setPrevFrameValue(e=this.current){this.prevFrameValue=e,this.prevUpdatedAt=this.updatedAt}onChange(e){return this.on("change",e)}on(e,t){this.events[e]||(this.events[e]=new Al);const n=this.events[e].add(t);return"change"===e?()=>{n(),$i.read((()=>{this.events.change.getSize()||this.stop()}))}:n}clearListeners(){for(const e in this.events)this.events[e].clear()}attach(e,t){this.passiveEffect=e,this.stopPassiveEffect=t}set(e,t=!0){t&&this.passiveEffect?this.passiveEffect(e,this.updateAndNotify):this.updateAndNotify(e,t)}setWithVelocity(e,t,n){this.set(t),this.prev=void 0,this.prevFrameValue=e,this.prevUpdatedAt=this.updatedAt-n}jump(e,t=!0){this.updateAndNotify(e),this.prev=e,this.prevUpdatedAt=this.prevFrameValue=void 0,t&&this.stop(),this.stopPassiveEffect&&this.stopPassiveEffect()}get(){return jl.current&&jl.current.push(this),this.current}getPrevious(){return this.prev}getVelocity(){const e=ma.now();if(!this.canTrackVelocity||void 0===this.prevFrameValue||e-this.updatedAt>30)return 0;const t=Math.min(this.updatedAt-this.prevUpdatedAt,30);return ya(parseFloat(this.current)-parseFloat(this.prevFrameValue),t)}start(e){return this.stop(),new Promise((t=>{this.hasAnimated=!0,this.animation=e(t),this.events.animationStart&&this.events.animationStart.notify()})).then((()=>{this.events.animationComplete&&this.events.animationComplete.notify(),this.clearAnimation()}))}stop(){this.animation&&(this.animation.stop(),this.events.animationCancel&&this.events.animationCancel.notify()),this.clearAnimation()}isAnimating(){return!!this.animation}clearAnimation(){delete this.animation}destroy(){this.clearListeners(),this.stop(),this.stopPassiveEffect&&this.stopPassiveEffect()}}function Il(e,t){return new Ml(e,t)}function Dl(e,t,n){e.hasValue(t)?e.getValue(t).set(n):e.addValue(t,Il(n))}const Ll=e=>e.replace(/([a-z])([A-Z])/gu,"$1-$2").toLowerCase(),Fl="data-"+Ll("framerAppearId");function zl(e){return e.props[Fl]}function Bl(e){return Ni.has(e)?"transform":gl.has(e)?Ll(e):void 0}class Vl extends Ml{constructor(){super(...arguments),this.output=[],this.counts=new Map}add(e){const t=Bl(e);if(!t)return;const n=this.counts.get(t)||0;this.counts.set(t,n+1),0===n&&(this.output.push(t),this.update());let r=!1;return()=>{if(r)return;r=!0;const e=this.counts.get(t)-1;this.counts.set(t,e),0===e&&(Nl(this.output,t),this.update())}}update(){this.set(this.output.length?this.output.join(", "):"auto")}}const Wl=e=>Boolean(e&&e.getVelocity);function Ul(e,t){var n;if(!e.applyWillChange)return;let r=e.getValue("willChange");return r||(null===(n=e.props.style)||void 0===n?void 0:n.willChange)||(r=new Vl("auto"),e.addValue("willChange",r)),o=r,Boolean(Wl(o)&&o.add)?r.add(t):void 0;var o}function $l({protectedKeys:e,needsAnimating:t},n){const r=e.hasOwnProperty(n)&&!0!==t[n];return t[n]=!1,r}function Kl(e,t,{delay:n=0,transitionOverride:r,type:o}={}){var i;let{transition:s=e.getDefaultTransition(),transitionEnd:a,...l}=t;r&&(s=r);const c=[],u=o&&e.animationState&&e.animationState.getState()[o];for(const t in l){const r=e.getValue(t,null!==(i=e.latestValues[t])&&void 0!==i?i:null),o=l[t];if(void 0===o||u&&$l(u,t))continue;const a={delay:n,...Fi(s||{},t)};let d=!1;if(window.MotionHandoffAnimation){const n=zl(e);if(n){const e=window.MotionHandoffAnimation(n,t,$i);null!==e&&(a.startTime=e,d=!0)}}r.start(Pl(t,r,o,e.shouldReduceMotion&&Ni.has(t)?{type:!1}:a,e,d,Ul(e,t)));const f=r.animation;f&&c.push(f)}return a&&Promise.all(c).then((()=>{$i.update((()=>{a&&function(e,t){const n=Pi(e,t);let{transitionEnd:r={},transition:o={},...i}=n||{};i={...i,...r};for(const t in i)Dl(e,t,Ol(i[t]))}(e,a)}))})),c}function Hl(e,t,n={}){var r;const o=Pi(e,t,"exit"===n.type?null===(r=e.presenceContext)||void 0===r?void 0:r.custom:void 0);let{transition:i=e.getDefaultTransition()||{}}=o||{};n.transitionOverride&&(i=n.transitionOverride);const s=o?()=>Promise.all(Kl(e,o,n)):()=>Promise.resolve(),a=e.variantChildren&&e.variantChildren.size?(r=0)=>{const{delayChildren:o=0,staggerChildren:s,staggerDirection:a}=i;return function(e,t,n=0,r=0,o=1,i){const s=[],a=(e.variantChildren.size-1)*r,l=1===o?(e=0)=>e*r:(e=0)=>a-e*r;return Array.from(e.variantChildren).sort(ql).forEach(((e,r)=>{e.notify("AnimationStart",t),s.push(Hl(e,t,{...i,delay:n+l(r)}).then((()=>e.notify("AnimationComplete",t))))})),Promise.all(s)}(e,t,o+r,s,a,n)}:()=>Promise.resolve(),{when:l}=i;if(l){const[e,t]="beforeChildren"===l?[s,a]:[a,s];return e().then((()=>t()))}return Promise.all([s(),a(n.delay)])}function ql(e,t){return e.sortNodePosition(t)}const Yl=[...Ti].reverse(),Gl=Ti.length;function Xl(e=!1){return{isActive:e,protectedKeys:{},needsAnimating:{},prevResolvedValues:{}}}function Jl(){return{animate:Xl(!0),whileInView:Xl(),whileHover:Xl(),whileTap:Xl(),whileDrag:Xl(),whileFocus:Xl(),exit:Xl()}}class Zl{constructor(e){this.isMounted=!1,this.node=e}update(){}}let Ql=0;const ec={animation:{Feature:class extends Zl{constructor(e){super(e),e.animationState||(e.animationState=function(e){let t=function(e){return t=>Promise.all(t.map((({animation:t,options:n})=>function(e,t,n={}){let r;if(e.notify("AnimationStart",t),Array.isArray(t)){const o=t.map((t=>Hl(e,t,n)));r=Promise.all(o)}else if("string"==typeof t)r=Hl(e,t,n);else{const o="function"==typeof t?Pi(e,t,n.custom):t;r=Promise.all(Kl(e,o,n))}return r.then((()=>{e.notify("AnimationComplete",t)}))}(e,t,n))))}(e),n=Jl(),r=!0;const o=t=>(n,r)=>{var o;const i=Pi(e,r,"exit"===t?null===(o=e.presenceContext)||void 0===o?void 0:o.custom:void 0);if(i){const{transition:e,transitionEnd:t,...r}=i;n={...n,...r,...t}}return n};function i(i){const s=e.getProps(),a=e.getVariantContext(!0)||{},l=[],c=new Set;let u={},d=1/0;for(let t=0;t<Gl;t++){const p=Yl[t],m=n[p],g=void 0!==s[p]?s[p]:a[p],v=_i(g),y=p===i?m.isActive:null;!1===y&&(d=t);let b=g===a[p]&&g!==s[p]&&v;if(b&&r&&e.manuallyAnimateOnMount&&(b=!1),m.protectedKeys={...u},!m.isActive&&null===y||!g&&!m.prevProp||wi(g)||"boolean"==typeof g)continue;let x=(f=m.prevProp,("string"==typeof(h=g)?h!==f:!!Array.isArray(h)&&!Si(h,f))||p===i&&m.isActive&&!b&&v||t>d&&v),w=!1;const E=Array.isArray(g)?g:[g];let S=E.reduce(o(p),{});!1===y&&(S={});const{prevResolvedValues:_={}}=m,k={..._,...S},C=t=>{x=!0,c.has(t)&&(w=!0,c.delete(t)),m.needsAnimating[t]=!0;const n=e.getValue(t);n&&(n.liveStyle=!1)};for(const e in k){const t=S[e],n=_[e];if(u.hasOwnProperty(e))continue;let r=!1;r=Ei(t)&&Ei(n)?!Si(t,n):t!==n,r?null!=t?C(e):c.add(e):void 0!==t&&c.has(e)?C(e):m.protectedKeys[e]=!0}m.prevProp=g,m.prevResolvedValues=S,m.isActive&&(u={...u,...S}),r&&e.blockInitialAnimation&&(x=!1),!x||b&&!w||l.push(...E.map((e=>({animation:e,options:{type:p}}))))}var f,h;if(c.size){const t={};c.forEach((n=>{const r=e.getBaseTarget(n),o=e.getValue(n);o&&(o.liveStyle=!0),t[n]=null!=r?r:null})),l.push({animation:t})}let p=Boolean(l.length);return!r||!1!==s.initial&&s.initial!==s.animate||e.manuallyAnimateOnMount||(p=!1),r=!1,p?t(l):Promise.resolve()}return{animateChanges:i,setActive:function(t,r){var o;if(n[t].isActive===r)return Promise.resolve();null===(o=e.variantChildren)||void 0===o||o.forEach((e=>{var n;return null===(n=e.animationState)||void 0===n?void 0:n.setActive(t,r)})),n[t].isActive=r;const s=i(t);for(const e in n)n[e].protectedKeys={};return s},setAnimateFunction:function(n){t=n(e)},getState:()=>n,reset:()=>{n=Jl(),r=!0}}}(e))}updateAnimationControlsSubscription(){const{animate:e}=this.node.getProps();wi(e)&&(this.unmountControls=e.subscribe(this.node))}mount(){this.updateAnimationControlsSubscription()}update(){const{animate:e}=this.node.getProps(),{animate:t}=this.node.prevProps||{};e!==t&&this.updateAnimationControlsSubscription()}unmount(){var e;this.node.animationState.reset(),null===(e=this.unmountControls)||void 0===e||e.call(this)}}},exit:{Feature:class extends Zl{constructor(){super(...arguments),this.id=Ql++}update(){if(!this.node.presenceContext)return;const{isPresent:e,onExitComplete:t}=this.node.presenceContext,{isPresent:n}=this.node.prevPresenceContext||{};if(!this.node.animationState||e===n)return;const r=this.node.animationState.setActive("exit",!e);t&&!e&&r.then((()=>t(this.id)))}mount(){const{register:e}=this.node.presenceContext||{};e&&(this.unmount=e(this.id))}unmount(){}}}},tc=e=>"mouse"===e.pointerType?"number"!=typeof e.button||e.button<=0:!1!==e.isPrimary;function nc(e,t="page"){return{point:{x:e[`${t}X`],y:e[`${t}Y`]}}}const rc=e=>t=>tc(t)&&e(t,nc(t));function oc(e,t,n,r={passive:!0}){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n)}function ic(e,t,n,r){return oc(e,t,rc(n),r)}const sc=(e,t)=>Math.abs(e-t);class ac{constructor(e,t,{transformPagePoint:n,contextWindow:r,dragSnapToOrigin:o=!1}={}){if(this.startEvent=null,this.lastMoveEvent=null,this.lastMoveEventInfo=null,this.handlers={},this.contextWindow=window,this.updatePoint=()=>{if(!this.lastMoveEvent||!this.lastMoveEventInfo)return;const e=uc(this.lastMoveEventInfo,this.history),t=null!==this.startEvent,n=function(e,t){const n=sc(e.x,t.x),r=sc(e.y,t.y);return Math.sqrt(n**2+r**2)}(e.offset,{x:0,y:0})>=3;if(!t&&!n)return;const{point:r}=e,{timestamp:o}=Hi;this.history.push({...r,timestamp:o});const{onStart:i,onMove:s}=this.handlers;t||(i&&i(this.lastMoveEvent,e),this.startEvent=this.lastMoveEvent),s&&s(this.lastMoveEvent,e)},this.handlePointerMove=(e,t)=>{this.lastMoveEvent=e,this.lastMoveEventInfo=lc(t,this.transformPagePoint),$i.update(this.updatePoint,!0)},this.handlePointerUp=(e,t)=>{this.end();const{onEnd:n,onSessionEnd:r,resumeAnimation:o}=this.handlers;if(this.dragSnapToOrigin&&o&&o(),!this.lastMoveEvent||!this.lastMoveEventInfo)return;const i=uc("pointercancel"===e.type?this.lastMoveEventInfo:lc(t,this.transformPagePoint),this.history);this.startEvent&&n&&n(e,i),r&&r(e,i)},!tc(e))return;this.dragSnapToOrigin=o,this.handlers=t,this.transformPagePoint=n,this.contextWindow=r||window;const i=lc(nc(e),this.transformPagePoint),{point:s}=i,{timestamp:a}=Hi;this.history=[{...s,timestamp:a}];const{onSessionStart:l}=t;l&&l(e,uc(i,this.history)),this.removeListeners=Ga(ic(this.contextWindow,"pointermove",this.handlePointerMove),ic(this.contextWindow,"pointerup",this.handlePointerUp),ic(this.contextWindow,"pointercancel",this.handlePointerUp))}updateHandlers(e){this.handlers=e}end(){this.removeListeners&&this.removeListeners(),Ki(this.updatePoint)}}function lc(e,t){return t?{point:t(e.point)}:e}function cc(e,t){return{x:e.x-t.x,y:e.y-t.y}}function uc({point:e},t){return{point:e,delta:cc(e,fc(t)),offset:cc(e,dc(t)),velocity:hc(t,.1)}}function dc(e){return e[0]}function fc(e){return e[e.length-1]}function hc(e,t){if(e.length<2)return{x:0,y:0};let n=e.length-1,r=null;const o=fc(e);for(;n>=0&&(r=e[n],!(o.timestamp-r.timestamp>Ai(t)));)n--;if(!r)return{x:0,y:0};const i=ji(o.timestamp-r.timestamp);if(0===i)return{x:0,y:0};const s={x:(o.x-r.x)/i,y:(o.y-r.y)/i};return s.x===1/0&&(s.x=0),s.y===1/0&&(s.y=0),s}function pc(e){let t=null;return()=>null===t&&(t=e,()=>{t=null})}const mc=pc("dragHorizontal"),gc=pc("dragVertical");function vc(e){let t=!1;if("y"===e)t=gc();else if("x"===e)t=mc();else{const e=mc(),n=gc();e&&n?t=()=>{e(),n()}:(e&&e(),n&&n())}return t}function yc(){const e=vc(!0);return!e||(e(),!1)}function bc(e){return e&&"object"==typeof e&&Object.prototype.hasOwnProperty.call(e,"current")}const xc=.9999,wc=1.0001,Ec=-.01,Sc=.01;function _c(e){return e.max-e.min}function kc(e,t,n,r=.5){e.origin=r,e.originPoint=Ja(t.min,t.max,e.origin),e.scale=_c(n)/_c(t),e.translate=Ja(n.min,n.max,e.origin)-e.originPoint,(e.scale>=xc&&e.scale<=wc||isNaN(e.scale))&&(e.scale=1),(e.translate>=Ec&&e.translate<=Sc||isNaN(e.translate))&&(e.translate=0)}function Cc(e,t,n,r){kc(e.x,t.x,n.x,r?r.originX:void 0),kc(e.y,t.y,n.y,r?r.originY:void 0)}function Pc(e,t,n){e.min=n.min+t.min,e.max=e.min+_c(t)}function Tc(e,t,n){e.min=t.min-n.min,e.max=e.min+_c(t)}function Oc(e,t,n){Tc(e.x,t.x,n.x),Tc(e.y,t.y,n.y)}function Rc(e,t,n){return{min:void 0!==t?e.min+t:void 0,max:void 0!==n?e.max+n-(e.max-e.min):void 0}}function Nc(e,t){let n=t.min-e.min,r=t.max-e.max;return t.max-t.min<e.max-e.min&&([n,r]=[r,n]),{min:n,max:r}}const Ac=.35;function jc(e,t,n){return{min:Mc(e,t),max:Mc(e,n)}}function Mc(e,t){return"number"==typeof e?e:e[t]||0}const Ic=()=>({x:{translate:0,scale:1,origin:0,originPoint:0},y:{translate:0,scale:1,origin:0,originPoint:0}}),Dc=()=>({x:{min:0,max:0},y:{min:0,max:0}});function Lc(e){return[e("x"),e("y")]}function Fc({top:e,left:t,right:n,bottom:r}){return{x:{min:t,max:n},y:{min:e,max:r}}}function zc(e){return void 0===e||1===e}function Bc({scale:e,scaleX:t,scaleY:n}){return!zc(e)||!zc(t)||!zc(n)}function Vc(e){return Bc(e)||Wc(e)||e.z||e.rotate||e.rotateX||e.rotateY||e.skewX||e.skewY}function Wc(e){return Uc(e.x)||Uc(e.y)}function Uc(e){return e&&"0%"!==e}function $c(e,t,n){return n+t*(e-n)}function Kc(e,t,n,r,o){return void 0!==o&&(e=$c(e,o,r)),$c(e,n,r)+t}function Hc(e,t=0,n=1,r,o){e.min=Kc(e.min,t,n,r,o),e.max=Kc(e.max,t,n,r,o)}function qc(e,{x:t,y:n}){Hc(e.x,t.translate,t.scale,t.originPoint),Hc(e.y,n.translate,n.scale,n.originPoint)}const Yc=.999999999999,Gc=1.0000000000001;function Xc(e,t){e.min=e.min+t,e.max=e.max+t}function Jc(e,t,n,r,o=.5){Hc(e,t,n,Ja(e.min,e.max,o),r)}function Zc(e,t){Jc(e.x,t.x,t.scaleX,t.scale,t.originX),Jc(e.y,t.y,t.scaleY,t.scale,t.originY)}function Qc(e,t){return Fc(function(e,t){if(!t)return e;const n=t({x:e.left,y:e.top}),r=t({x:e.right,y:e.bottom});return{top:n.y,left:n.x,bottom:r.y,right:r.x}}(e.getBoundingClientRect(),t))}const eu=({current:e})=>e?e.ownerDocument.defaultView:null,tu=new WeakMap;class nu{constructor(e){this.openGlobalLock=null,this.isDragging=!1,this.currentDirection=null,this.originPoint={x:0,y:0},this.constraints=!1,this.hasMutatedConstraints=!1,this.elastic=Dc(),this.visualElement=e}start(e,{snapToCursor:t=!1}={}){const{presenceContext:n}=this.visualElement;if(n&&!1===n.isPresent)return;const{dragSnapToOrigin:r}=this.getProps();this.panSession=new ac(e,{onSessionStart:e=>{const{dragSnapToOrigin:n}=this.getProps();n?this.pauseAnimation():this.stopAnimation(),t&&this.snapToCursor(nc(e,"page").point)},onStart:(e,t)=>{var n;const{drag:r,dragPropagation:o,onDragStart:i}=this.getProps();if(r&&!o&&(this.openGlobalLock&&this.openGlobalLock(),this.openGlobalLock=vc(r),!this.openGlobalLock))return;this.isDragging=!0,this.currentDirection=null,this.resolveConstraints(),this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!0,this.visualElement.projection.target=void 0),Lc((e=>{let t=this.getAxisMotionValue(e).get()||0;if(gs.test(t)){const{projection:n}=this.visualElement;if(n&&n.layout){const r=n.layout.layoutBox[e];r&&(t=_c(r)*(parseFloat(t)/100))}}this.originPoint[e]=t})),i&&$i.postRender((()=>i(e,t))),null===(n=this.removeWillChange)||void 0===n||n.call(this),this.removeWillChange=Ul(this.visualElement,"transform");const{animationState:s}=this.visualElement;s&&s.setActive("whileDrag",!0)},onMove:(e,t)=>{const{dragPropagation:n,dragDirectionLock:r,onDirectionLock:o,onDrag:i}=this.getProps();if(!n&&!this.openGlobalLock)return;const{offset:s}=t;if(r&&null===this.currentDirection)return this.currentDirection=function(e,t=10){let n=null;return Math.abs(e.y)>t?n="y":Math.abs(e.x)>t&&(n="x"),n}(s),void(null!==this.currentDirection&&o&&o(this.currentDirection));this.updateAxis("x",t.point,s),this.updateAxis("y",t.point,s),this.visualElement.render(),i&&i(e,t)},onSessionEnd:(e,t)=>this.stop(e,t),resumeAnimation:()=>Lc((e=>{var t;return"paused"===this.getAnimationState(e)&&(null===(t=this.getAxisMotionValue(e).animation)||void 0===t?void 0:t.play())}))},{transformPagePoint:this.visualElement.getTransformPagePoint(),dragSnapToOrigin:r,contextWindow:eu(this.visualElement)})}stop(e,t){var n;null===(n=this.removeWillChange)||void 0===n||n.call(this);const r=this.isDragging;if(this.cancel(),!r)return;const{velocity:o}=t;this.startAnimation(o);const{onDragEnd:i}=this.getProps();i&&$i.postRender((()=>i(e,t)))}cancel(){this.isDragging=!1;const{projection:e,animationState:t}=this.visualElement;e&&(e.isAnimationBlocked=!1),this.panSession&&this.panSession.end(),this.panSession=void 0;const{dragPropagation:n}=this.getProps();!n&&this.openGlobalLock&&(this.openGlobalLock(),this.openGlobalLock=null),t&&t.setActive("whileDrag",!1)}updateAxis(e,t,n){const{drag:r}=this.getProps();if(!n||!ru(e,r,this.currentDirection))return;const o=this.getAxisMotionValue(e);let i=this.originPoint[e]+n[e];this.constraints&&this.constraints[e]&&(i=function(e,{min:t,max:n},r){return void 0!==t&&e<t?e=r?Ja(t,e,r.min):Math.max(e,t):void 0!==n&&e>n&&(e=r?Ja(n,e,r.max):Math.min(e,n)),e}(i,this.constraints[e],this.elastic[e])),o.set(i)}resolveConstraints(){var e;const{dragConstraints:t,dragElastic:n}=this.getProps(),r=this.visualElement.projection&&!this.visualElement.projection.layout?this.visualElement.projection.measure(!1):null===(e=this.visualElement.projection)||void 0===e?void 0:e.layout,o=this.constraints;t&&bc(t)?this.constraints||(this.constraints=this.resolveRefConstraints()):this.constraints=!(!t||!r)&&function(e,{top:t,left:n,bottom:r,right:o}){return{x:Rc(e.x,n,o),y:Rc(e.y,t,r)}}(r.layoutBox,t),this.elastic=function(e=Ac){return!1===e?e=0:!0===e&&(e=Ac),{x:jc(e,"left","right"),y:jc(e,"top","bottom")}}(n),o!==this.constraints&&r&&this.constraints&&!this.hasMutatedConstraints&&Lc((e=>{!1!==this.constraints&&this.getAxisMotionValue(e)&&(this.constraints[e]=function(e,t){const n={};return void 0!==t.min&&(n.min=t.min-e.min),void 0!==t.max&&(n.max=t.max-e.min),n}(r.layoutBox[e],this.constraints[e]))}))}resolveRefConstraints(){const{dragConstraints:e,onMeasureDragConstraints:t}=this.getProps();if(!e||!bc(e))return!1;const n=e.current;Xi(null!==n,"If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");const{projection:r}=this.visualElement;if(!r||!r.layout)return!1;const o=function(e,t,n){const r=Qc(e,n),{scroll:o}=t;return o&&(Xc(r.x,o.offset.x),Xc(r.y,o.offset.y)),r}(n,r.root,this.visualElement.getTransformPagePoint());let i=function(e,t){return{x:Nc(e.x,t.x),y:Nc(e.y,t.y)}}(r.layout.layoutBox,o);if(t){const e=t(function({x:e,y:t}){return{top:t.min,right:e.max,bottom:t.max,left:e.min}}(i));this.hasMutatedConstraints=!!e,e&&(i=Fc(e))}return i}startAnimation(e){const{drag:t,dragMomentum:n,dragElastic:r,dragTransition:o,dragSnapToOrigin:i,onDragTransitionEnd:s}=this.getProps(),a=this.constraints||{},l=Lc((s=>{if(!ru(s,t,this.currentDirection))return;let l=a&&a[s]||{};i&&(l={min:0,max:0});const c=r?200:1e6,u=r?40:1e7,d={type:"inertia",velocity:n?e[s]:0,bounceStiffness:c,bounceDamping:u,timeConstant:750,restDelta:1,restSpeed:10,...o,...l};return this.startAxisValueAnimation(s,d)}));return Promise.all(l).then(s)}startAxisValueAnimation(e,t){const n=this.getAxisMotionValue(e);return n.start(Pl(e,n,0,t,this.visualElement,!1,Ul(this.visualElement,e)))}stopAnimation(){Lc((e=>this.getAxisMotionValue(e).stop()))}pauseAnimation(){Lc((e=>{var t;return null===(t=this.getAxisMotionValue(e).animation)||void 0===t?void 0:t.pause()}))}getAnimationState(e){var t;return null===(t=this.getAxisMotionValue(e).animation)||void 0===t?void 0:t.state}getAxisMotionValue(e){const t=`_drag${e.toUpperCase()}`,n=this.visualElement.getProps();return n[t]||this.visualElement.getValue(e,(n.initial?n.initial[e]:void 0)||0)}snapToCursor(e){Lc((t=>{const{drag:n}=this.getProps();if(!ru(t,n,this.currentDirection))return;const{projection:r}=this.visualElement,o=this.getAxisMotionValue(t);if(r&&r.layout){const{min:n,max:i}=r.layout.layoutBox[t];o.set(e[t]-Ja(n,i,.5))}}))}scalePositionWithinConstraints(){if(!this.visualElement.current)return;const{drag:e,dragConstraints:t}=this.getProps(),{projection:n}=this.visualElement;if(!bc(t)||!n||!this.constraints)return;this.stopAnimation();const r={x:0,y:0};Lc((e=>{const t=this.getAxisMotionValue(e);if(t&&!1!==this.constraints){const n=t.get();r[e]=function(e,t){let n=.5;const r=_c(e),o=_c(t);return o>r?n=Xa(t.min,t.max-r,e.min):r>o&&(n=Xa(e.min,e.max-o,t.min)),is(0,1,n)}({min:n,max:n},this.constraints[e])}}));const{transformTemplate:o}=this.visualElement.getProps();this.visualElement.current.style.transform=o?o({},""):"none",n.root&&n.root.updateScroll(),n.updateLayout(),this.resolveConstraints(),Lc((t=>{if(!ru(t,e,null))return;const n=this.getAxisMotionValue(t),{min:o,max:i}=this.constraints[t];n.set(Ja(o,i,r[t]))}))}addListeners(){if(!this.visualElement.current)return;tu.set(this.visualElement,this);const e=ic(this.visualElement.current,"pointerdown",(e=>{const{drag:t,dragListener:n=!0}=this.getProps();t&&n&&this.start(e)})),t=()=>{const{dragConstraints:e}=this.getProps();bc(e)&&e.current&&(this.constraints=this.resolveRefConstraints())},{projection:n}=this.visualElement,r=n.addEventListener("measure",t);n&&!n.layout&&(n.root&&n.root.updateScroll(),n.updateLayout()),$i.read(t);const o=oc(window,"resize",(()=>this.scalePositionWithinConstraints())),i=n.addEventListener("didUpdate",(({delta:e,hasLayoutChanged:t})=>{this.isDragging&&t&&(Lc((t=>{const n=this.getAxisMotionValue(t);n&&(this.originPoint[t]+=e[t].translate,n.set(n.get()+e[t].translate))})),this.visualElement.render())}));return()=>{o(),e(),r(),i&&i()}}getProps(){const e=this.visualElement.getProps(),{drag:t=!1,dragDirectionLock:n=!1,dragPropagation:r=!1,dragConstraints:o=!1,dragElastic:i=Ac,dragMomentum:s=!0}=e;return{...e,drag:t,dragDirectionLock:n,dragPropagation:r,dragConstraints:o,dragElastic:i,dragMomentum:s}}}function ru(e,t,n){return!(!0!==t&&t!==e||null!==n&&n!==e)}const ou=e=>(t,n)=>{e&&$i.postRender((()=>e(t,n)))};var iu=n(848);const su=(0,o.createContext)(null),au=(0,o.createContext)({}),lu=(0,o.createContext)({}),cu={hasAnimatedSinceResize:!0,hasEverUpdated:!1};function uu(e,t){return t.max===t.min?0:e/(t.max-t.min)*100}const du={correct:(e,t)=>{if(!t.target)return e;if("string"==typeof e){if(!vs.test(e))return e;e=parseFloat(e)}return`${uu(e,t.target.x)}% ${uu(e,t.target.y)}%`}},fu={correct:(e,{treeScale:t,projectionDelta:n})=>{const r=e,o=ea.parse(e);if(o.length>5)return r;const i=ea.createTransformer(e),s="number"!=typeof o[0]?1:0,a=n.x.scale*t.x,l=n.y.scale*t.y;o[0+s]/=a,o[1+s]/=l;const c=Ja(a,l,.5);return"number"==typeof o[2+s]&&(o[2+s]/=c),"number"==typeof o[3+s]&&(o[3+s]/=c),i(o)}},hu={},{schedule:pu,cancel:mu}=Ui(queueMicrotask,!1);class gu extends o.Component{componentDidMount(){const{visualElement:e,layoutGroup:t,switchLayoutGroup:n,layoutId:r}=this.props,{projection:o}=e;var i;i=yu,Object.assign(hu,i),o&&(t.group&&t.group.add(o),n&&n.register&&r&&n.register(o),o.root.didUpdate(),o.addEventListener("animationComplete",(()=>{this.safeToRemove()})),o.setOptions({...o.options,onExitComplete:()=>this.safeToRemove()})),cu.hasEverUpdated=!0}getSnapshotBeforeUpdate(e){const{layoutDependency:t,visualElement:n,drag:r,isPresent:o}=this.props,i=n.projection;return i?(i.isPresent=o,r||e.layoutDependency!==t||void 0===t?i.willUpdate():this.safeToRemove(),e.isPresent!==o&&(o?i.promote():i.relegate()||$i.postRender((()=>{const e=i.getStack();e&&e.members.length||this.safeToRemove()}))),null):null}componentDidUpdate(){const{projection:e}=this.props.visualElement;e&&(e.root.didUpdate(),pu.postRender((()=>{!e.currentAnimation&&e.isLead()&&this.safeToRemove()})))}componentWillUnmount(){const{visualElement:e,layoutGroup:t,switchLayoutGroup:n}=this.props,{projection:r}=e;r&&(r.scheduleCheckAfterUnmount(),t&&t.group&&t.group.remove(r),n&&n.deregister&&n.deregister(r))}safeToRemove(){const{safeToRemove:e}=this.props;e&&e()}render(){return null}}function vu(e){const[t,n]=function(){const e=(0,o.useContext)(su);if(null===e)return[!0,null];const{isPresent:t,onExitComplete:n,register:r}=e,i=(0,o.useId)();(0,o.useEffect)((()=>r(i)),[]);const s=(0,o.useCallback)((()=>n&&n(i)),[i,n]);return!t&&n?[!1,s]:[!0]}(),r=(0,o.useContext)(au);return(0,iu.jsx)(gu,{...e,layoutGroup:r,switchLayoutGroup:(0,o.useContext)(lu),isPresent:t,safeToRemove:n})}const yu={borderRadius:{...du,applyTo:["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"]},borderTopLeftRadius:du,borderTopRightRadius:du,borderBottomLeftRadius:du,borderBottomRightRadius:du,boxShadow:fu},bu=["TopLeft","TopRight","BottomLeft","BottomRight"],xu=bu.length,wu=e=>"string"==typeof e?parseFloat(e):e,Eu=e=>"number"==typeof e||vs.test(e);function Su(e,t){return void 0!==e[t]?e[t]:e.borderRadius}const _u=Cu(0,.5,Va),ku=Cu(.5,.95,Vi);function Cu(e,t,n){return r=>r<e?0:r>t?1:n(Xa(e,t,r))}function Pu(e,t){e.min=t.min,e.max=t.max}function Tu(e,t){Pu(e.x,t.x),Pu(e.y,t.y)}function Ou(e,t){e.translate=t.translate,e.scale=t.scale,e.originPoint=t.originPoint,e.origin=t.origin}function Ru(e,t,n,r,o){return e=$c(e-=t,1/n,r),void 0!==o&&(e=$c(e,1/o,r)),e}function Nu(e,t,[n,r,o],i,s){!function(e,t=0,n=1,r=.5,o,i=e,s=e){if(gs.test(t)&&(t=parseFloat(t),t=Ja(s.min,s.max,t/100)-s.min),"number"!=typeof t)return;let a=Ja(i.min,i.max,r);e===i&&(a-=t),e.min=Ru(e.min,t,n,a,o),e.max=Ru(e.max,t,n,a,o)}(e,t[n],t[r],t[o],t.scale,i,s)}const Au=["x","scaleX","originX"],ju=["y","scaleY","originY"];function Mu(e,t,n,r){Nu(e.x,t,Au,n?n.x:void 0,r?r.x:void 0),Nu(e.y,t,ju,n?n.y:void 0,r?r.y:void 0)}function Iu(e){return 0===e.translate&&1===e.scale}function Du(e){return Iu(e.x)&&Iu(e.y)}function Lu(e,t){return e.min===t.min&&e.max===t.max}function Fu(e,t){return Math.round(e.min)===Math.round(t.min)&&Math.round(e.max)===Math.round(t.max)}function zu(e,t){return Fu(e.x,t.x)&&Fu(e.y,t.y)}function Bu(e){return _c(e.x)/_c(e.y)}function Vu(e,t){return e.translate===t.translate&&e.scale===t.scale&&e.originPoint===t.originPoint}class Wu{constructor(){this.members=[]}add(e){Rl(this.members,e),e.scheduleRender()}remove(e){if(Nl(this.members,e),e===this.prevLead&&(this.prevLead=void 0),e===this.lead){const e=this.members[this.members.length-1];e&&this.promote(e)}}relegate(e){const t=this.members.findIndex((t=>e===t));if(0===t)return!1;let n;for(let e=t;e>=0;e--){const t=this.members[e];if(!1!==t.isPresent){n=t;break}}return!!n&&(this.promote(n),!0)}promote(e,t){const n=this.lead;if(e!==n&&(this.prevLead=n,this.lead=e,e.show(),n)){n.instance&&n.scheduleRender(),e.scheduleRender(),e.resumeFrom=n,t&&(e.resumeFrom.preserveOpacity=!0),n.snapshot&&(e.snapshot=n.snapshot,e.snapshot.latestValues=n.animationValues||n.latestValues),e.root&&e.root.isUpdating&&(e.isLayoutDirty=!0);const{crossfade:r}=e.options;!1===r&&n.hide()}}exitAnimationComplete(){this.members.forEach((e=>{const{options:t,resumingFrom:n}=e;t.onExitComplete&&t.onExitComplete(),n&&n.options.onExitComplete&&n.options.onExitComplete()}))}scheduleRender(){this.members.forEach((e=>{e.instance&&e.scheduleRender(!1)}))}removeLeadSnapshot(){this.lead&&this.lead.snapshot&&(this.lead.snapshot=void 0)}}const Uu=(e,t)=>e.depth-t.depth;class $u{constructor(){this.children=[],this.isDirty=!1}add(e){Rl(this.children,e),this.isDirty=!0}remove(e){Nl(this.children,e),this.isDirty=!0}forEach(e){this.isDirty&&this.children.sort(Uu),this.isDirty=!1,this.children.forEach(e)}}function Ku(e){const t=Wl(e)?e.get():e;return Tl(t)?t.toValue():t}const Hu={type:"projectionFrame",totalNodes:0,resolvedTargetDeltas:0,recalculatedProjection:0},qu="undefined"!=typeof window&&void 0!==window.MotionDebug,Yu=["","X","Y","Z"],Gu={visibility:"hidden"};let Xu=0;function Ju(e,t,n,r){const{latestValues:o}=t;o[e]&&(n[e]=o[e],t.setStaticValue(e,0),r&&(r[e]=0))}function Zu(e){if(e.hasCheckedOptimisedAppear=!0,e.root===e)return;const{visualElement:t}=e.options;if(!t)return;const n=zl(t);if(window.MotionHasOptimisedAnimation(n,"transform")){const{layout:t,layoutId:r}=e.options;window.MotionCancelOptimisedAnimation(n,"transform",$i,!(t||r))}const{parent:r}=e;r&&!r.hasCheckedOptimisedAppear&&Zu(r)}function Qu({attachResizeListener:e,defaultParent:t,measureScroll:n,checkIsScrollRoot:r,resetTransform:o}){return class{constructor(e={},n=(null==t?void 0:t())){this.id=Xu++,this.animationId=0,this.children=new Set,this.options={},this.isTreeAnimating=!1,this.isAnimationBlocked=!1,this.isLayoutDirty=!1,this.isProjectionDirty=!1,this.isSharedProjectionDirty=!1,this.isTransformDirty=!1,this.updateManuallyBlocked=!1,this.updateBlockedByResize=!1,this.isUpdating=!1,this.isSVG=!1,this.needsReset=!1,this.shouldResetTransform=!1,this.hasCheckedOptimisedAppear=!1,this.treeScale={x:1,y:1},this.eventHandlers=new Map,this.hasTreeAnimated=!1,this.updateScheduled=!1,this.scheduleUpdate=()=>this.update(),this.projectionUpdateScheduled=!1,this.checkUpdateFailed=()=>{this.isUpdating&&(this.isUpdating=!1,this.clearAllSnapshots())},this.updateProjection=()=>{this.projectionUpdateScheduled=!1,qu&&(Hu.totalNodes=Hu.resolvedTargetDeltas=Hu.recalculatedProjection=0),this.nodes.forEach(nd),this.nodes.forEach(cd),this.nodes.forEach(ud),this.nodes.forEach(rd),qu&&window.MotionDebug.record(Hu)},this.resolvedRelativeTargetAt=0,this.hasProjected=!1,this.isVisible=!0,this.animationProgress=0,this.sharedNodes=new Map,this.latestValues=e,this.root=n?n.root||n:this,this.path=n?[...n.path,n]:[],this.parent=n,this.depth=n?n.depth+1:0;for(let e=0;e<this.path.length;e++)this.path[e].shouldResetTransform=!0;this.root===this&&(this.nodes=new $u)}addEventListener(e,t){return this.eventHandlers.has(e)||this.eventHandlers.set(e,new Al),this.eventHandlers.get(e).add(t)}notifyListeners(e,...t){const n=this.eventHandlers.get(e);n&&n.notify(...t)}hasListeners(e){return this.eventHandlers.has(e)}mount(t,n=this.root.hasTreeAnimated){if(this.instance)return;var r;this.isSVG=(r=t)instanceof SVGElement&&"svg"!==r.tagName,this.instance=t;const{layoutId:o,layout:i,visualElement:s}=this.options;if(s&&!s.current&&s.mount(t),this.root.nodes.add(this),this.parent&&this.parent.children.add(this),n&&(i||o)&&(this.isLayoutDirty=!0),e){let n;const r=()=>this.root.updateBlockedByResize=!1;e(t,(()=>{this.root.updateBlockedByResize=!0,n&&n(),n=function(e){const t=ma.now(),n=({timestamp:r})=>{const o=r-t;o>=250&&(Ki(n),e(o-250))};return $i.read(n,!0),()=>Ki(n)}(r),cu.hasAnimatedSinceResize&&(cu.hasAnimatedSinceResize=!1,this.nodes.forEach(ld))}))}o&&this.root.registerSharedNode(o,this),!1!==this.options.animate&&s&&(o||i)&&this.addEventListener("didUpdate",(({delta:e,hasLayoutChanged:t,hasRelativeTargetChanged:n,layout:r})=>{if(this.isTreeAnimationBlocked())return this.target=void 0,void(this.relativeTarget=void 0);const o=this.options.transition||s.getDefaultTransition()||gd,{onLayoutAnimationStart:i,onLayoutAnimationComplete:a}=s.getProps(),l=!this.targetLayout||!zu(this.targetLayout,r)||n,c=!t&&n;if(this.options.layoutRoot||this.resumeFrom&&this.resumeFrom.instance||c||t&&(l||!this.currentAnimation)){this.resumeFrom&&(this.resumingFrom=this.resumeFrom,this.resumingFrom.resumingFrom=void 0),this.setAnimationOrigin(e,c);const t={...Fi(o,"layout"),onPlay:i,onComplete:a};(s.shouldReduceMotion||this.options.layoutRoot)&&(t.delay=0,t.type=!1),this.startAnimation(t)}else t||ld(this),this.isLead()&&this.options.onExitComplete&&this.options.onExitComplete();this.targetLayout=r}))}unmount(){this.options.layoutId&&this.willUpdate(),this.root.nodes.remove(this);const e=this.getStack();e&&e.remove(this),this.parent&&this.parent.children.delete(this),this.instance=void 0,Ki(this.updateProjection)}blockUpdate(){this.updateManuallyBlocked=!0}unblockUpdate(){this.updateManuallyBlocked=!1}isUpdateBlocked(){return this.updateManuallyBlocked||this.updateBlockedByResize}isTreeAnimationBlocked(){return this.isAnimationBlocked||this.parent&&this.parent.isTreeAnimationBlocked()||!1}startUpdate(){this.isUpdateBlocked()||(this.isUpdating=!0,this.nodes&&this.nodes.forEach(dd),this.animationId++)}getTransformTemplate(){const{visualElement:e}=this.options;return e&&e.getProps().transformTemplate}willUpdate(e=!0){if(this.root.hasTreeAnimated=!0,this.root.isUpdateBlocked())return void(this.options.onExitComplete&&this.options.onExitComplete());if(window.MotionCancelOptimisedAnimation&&!this.hasCheckedOptimisedAppear&&Zu(this),!this.root.isUpdating&&this.root.startUpdate(),this.isLayoutDirty)return;this.isLayoutDirty=!0;for(let e=0;e<this.path.length;e++){const t=this.path[e];t.shouldResetTransform=!0,t.updateScroll("snapshot"),t.options.layoutRoot&&t.willUpdate(!1)}const{layoutId:t,layout:n}=this.options;if(void 0===t&&!n)return;const r=this.getTransformTemplate();this.prevTransformTemplateValue=r?r(this.latestValues,""):void 0,this.updateSnapshot(),e&&this.notifyListeners("willUpdate")}update(){if(this.updateScheduled=!1,this.isUpdateBlocked())return this.unblockUpdate(),this.clearAllSnapshots(),void this.nodes.forEach(id);this.isUpdating||this.nodes.forEach(sd),this.isUpdating=!1,this.nodes.forEach(ad),this.nodes.forEach(ed),this.nodes.forEach(td),this.clearAllSnapshots();const e=ma.now();Hi.delta=is(0,1e3/60,e-Hi.timestamp),Hi.timestamp=e,Hi.isProcessing=!0,qi.update.process(Hi),qi.preRender.process(Hi),qi.render.process(Hi),Hi.isProcessing=!1}didUpdate(){this.updateScheduled||(this.updateScheduled=!0,pu.read(this.scheduleUpdate))}clearAllSnapshots(){this.nodes.forEach(od),this.sharedNodes.forEach(fd)}scheduleUpdateProjection(){this.projectionUpdateScheduled||(this.projectionUpdateScheduled=!0,$i.preRender(this.updateProjection,!1,!0))}scheduleCheckAfterUnmount(){$i.postRender((()=>{this.isLayoutDirty?this.root.didUpdate():this.root.checkUpdateFailed()}))}updateSnapshot(){!this.snapshot&&this.instance&&(this.snapshot=this.measure())}updateLayout(){if(!this.instance)return;if(this.updateScroll(),!(this.options.alwaysMeasureLayout&&this.isLead()||this.isLayoutDirty))return;if(this.resumeFrom&&!this.resumeFrom.instance)for(let e=0;e<this.path.length;e++)this.path[e].updateScroll();const e=this.layout;this.layout=this.measure(!1),this.layoutCorrected=Dc(),this.isLayoutDirty=!1,this.projectionDelta=void 0,this.notifyListeners("measure",this.layout.layoutBox);const{visualElement:t}=this.options;t&&t.notify("LayoutMeasure",this.layout.layoutBox,e?e.layoutBox:void 0)}updateScroll(e="measure"){let t=Boolean(this.options.layoutScroll&&this.instance);if(this.scroll&&this.scroll.animationId===this.root.animationId&&this.scroll.phase===e&&(t=!1),t){const t=r(this.instance);this.scroll={animationId:this.root.animationId,phase:e,isRoot:t,offset:n(this.instance),wasRoot:this.scroll?this.scroll.isRoot:t}}}resetTransform(){if(!o)return;const e=this.isLayoutDirty||this.shouldResetTransform||this.options.alwaysMeasureLayout,t=this.projectionDelta&&!Du(this.projectionDelta),n=this.getTransformTemplate(),r=n?n(this.latestValues,""):void 0,i=r!==this.prevTransformTemplateValue;e&&(t||Vc(this.latestValues)||i)&&(o(this.instance,r),this.shouldResetTransform=!1,this.scheduleRender())}measure(e=!0){const t=this.measurePageBox();let n=this.removeElementScroll(t);var r;return e&&(n=this.removeTransform(n)),bd((r=n).x),bd(r.y),{animationId:this.root.animationId,measuredBox:t,layoutBox:n,latestValues:{},source:this.id}}measurePageBox(){var e;const{visualElement:t}=this.options;if(!t)return Dc();const n=t.measureViewportBox();if(!(null===(e=this.scroll)||void 0===e?void 0:e.wasRoot)&&!this.path.some(wd)){const{scroll:e}=this.root;e&&(Xc(n.x,e.offset.x),Xc(n.y,e.offset.y))}return n}removeElementScroll(e){var t;const n=Dc();if(Tu(n,e),null===(t=this.scroll)||void 0===t?void 0:t.wasRoot)return n;for(let t=0;t<this.path.length;t++){const r=this.path[t],{scroll:o,options:i}=r;r!==this.root&&o&&i.layoutScroll&&(o.wasRoot&&Tu(n,e),Xc(n.x,o.offset.x),Xc(n.y,o.offset.y))}return n}applyTransform(e,t=!1){const n=Dc();Tu(n,e);for(let e=0;e<this.path.length;e++){const r=this.path[e];!t&&r.options.layoutScroll&&r.scroll&&r!==r.root&&Zc(n,{x:-r.scroll.offset.x,y:-r.scroll.offset.y}),Vc(r.latestValues)&&Zc(n,r.latestValues)}return Vc(this.latestValues)&&Zc(n,this.latestValues),n}removeTransform(e){const t=Dc();Tu(t,e);for(let e=0;e<this.path.length;e++){const n=this.path[e];if(!n.instance)continue;if(!Vc(n.latestValues))continue;Bc(n.latestValues)&&n.updateSnapshot();const r=Dc();Tu(r,n.measurePageBox()),Mu(t,n.latestValues,n.snapshot?n.snapshot.layoutBox:void 0,r)}return Vc(this.latestValues)&&Mu(t,this.latestValues),t}setTargetDelta(e){this.targetDelta=e,this.root.scheduleUpdateProjection(),this.isProjectionDirty=!0}setOptions(e){this.options={...this.options,...e,crossfade:void 0===e.crossfade||e.crossfade}}clearMeasurements(){this.scroll=void 0,this.layout=void 0,this.snapshot=void 0,this.prevTransformTemplateValue=void 0,this.targetDelta=void 0,this.target=void 0,this.isLayoutDirty=!1}forceRelativeParentToResolveTarget(){this.relativeParent&&this.relativeParent.resolvedRelativeTargetAt!==Hi.timestamp&&this.relativeParent.resolveTargetDelta(!0)}resolveTargetDelta(e=!1){var t;const n=this.getLead();this.isProjectionDirty||(this.isProjectionDirty=n.isProjectionDirty),this.isTransformDirty||(this.isTransformDirty=n.isTransformDirty),this.isSharedProjectionDirty||(this.isSharedProjectionDirty=n.isSharedProjectionDirty);const r=Boolean(this.resumingFrom)||this!==n;if(!(e||r&&this.isSharedProjectionDirty||this.isProjectionDirty||(null===(t=this.parent)||void 0===t?void 0:t.isProjectionDirty)||this.attemptToResolveRelativeTarget||this.root.updateBlockedByResize))return;const{layout:o,layoutId:i}=this.options;if(this.layout&&(o||i)){if(this.resolvedRelativeTargetAt=Hi.timestamp,!this.targetDelta&&!this.relativeTarget){const e=this.getClosestProjectingParent();e&&e.layout&&1!==this.animationProgress?(this.relativeParent=e,this.forceRelativeParentToResolveTarget(),this.relativeTarget=Dc(),this.relativeTargetOrigin=Dc(),Oc(this.relativeTargetOrigin,this.layout.layoutBox,e.layout.layoutBox),Tu(this.relativeTarget,this.relativeTargetOrigin)):this.relativeParent=this.relativeTarget=void 0}if(this.relativeTarget||this.targetDelta){var s,a,l;if(this.target||(this.target=Dc(),this.targetWithTransforms=Dc()),this.relativeTarget&&this.relativeTargetOrigin&&this.relativeParent&&this.relativeParent.target?(this.forceRelativeParentToResolveTarget(),s=this.target,a=this.relativeTarget,l=this.relativeParent.target,Pc(s.x,a.x,l.x),Pc(s.y,a.y,l.y)):this.targetDelta?(Boolean(this.resumingFrom)?this.target=this.applyTransform(this.layout.layoutBox):Tu(this.target,this.layout.layoutBox),qc(this.target,this.targetDelta)):Tu(this.target,this.layout.layoutBox),this.attemptToResolveRelativeTarget){this.attemptToResolveRelativeTarget=!1;const e=this.getClosestProjectingParent();e&&Boolean(e.resumingFrom)===Boolean(this.resumingFrom)&&!e.options.layoutScroll&&e.target&&1!==this.animationProgress?(this.relativeParent=e,this.forceRelativeParentToResolveTarget(),this.relativeTarget=Dc(),this.relativeTargetOrigin=Dc(),Oc(this.relativeTargetOrigin,this.target,e.target),Tu(this.relativeTarget,this.relativeTargetOrigin)):this.relativeParent=this.relativeTarget=void 0}qu&&Hu.resolvedTargetDeltas++}}}getClosestProjectingParent(){if(this.parent&&!Bc(this.parent.latestValues)&&!Wc(this.parent.latestValues))return this.parent.isProjecting()?this.parent:this.parent.getClosestProjectingParent()}isProjecting(){return Boolean((this.relativeTarget||this.targetDelta||this.options.layoutRoot)&&this.layout)}calcProjection(){var e;const t=this.getLead(),n=Boolean(this.resumingFrom)||this!==t;let r=!0;if((this.isProjectionDirty||(null===(e=this.parent)||void 0===e?void 0:e.isProjectionDirty))&&(r=!1),n&&(this.isSharedProjectionDirty||this.isTransformDirty)&&(r=!1),this.resolvedRelativeTargetAt===Hi.timestamp&&(r=!1),r)return;const{layout:o,layoutId:i}=this.options;if(this.isTreeAnimating=Boolean(this.parent&&this.parent.isTreeAnimating||this.currentAnimation||this.pendingAnimation),this.isTreeAnimating||(this.targetDelta=this.relativeTarget=void 0),!this.layout||!o&&!i)return;Tu(this.layoutCorrected,this.layout.layoutBox);const s=this.treeScale.x,a=this.treeScale.y;!function(e,t,n,r=!1){const o=n.length;if(!o)return;let i,s;t.x=t.y=1;for(let a=0;a<o;a++){i=n[a],s=i.projectionDelta;const{visualElement:o}=i.options;o&&o.props.style&&"contents"===o.props.style.display||(r&&i.options.layoutScroll&&i.scroll&&i!==i.root&&Zc(e,{x:-i.scroll.offset.x,y:-i.scroll.offset.y}),s&&(t.x*=s.x.scale,t.y*=s.y.scale,qc(e,s)),r&&Vc(i.latestValues)&&Zc(e,i.latestValues))}t.x<Gc&&t.x>Yc&&(t.x=1),t.y<Gc&&t.y>Yc&&(t.y=1)}(this.layoutCorrected,this.treeScale,this.path,n),!t.layout||t.target||1===this.treeScale.x&&1===this.treeScale.y||(t.target=t.layout.layoutBox,t.targetWithTransforms=Dc());const{target:l}=t;l?(this.projectionDelta&&this.prevProjectionDelta?(Ou(this.prevProjectionDelta.x,this.projectionDelta.x),Ou(this.prevProjectionDelta.y,this.projectionDelta.y)):this.createProjectionDeltas(),Cc(this.projectionDelta,this.layoutCorrected,l,this.latestValues),this.treeScale.x===s&&this.treeScale.y===a&&Vu(this.projectionDelta.x,this.prevProjectionDelta.x)&&Vu(this.projectionDelta.y,this.prevProjectionDelta.y)||(this.hasProjected=!0,this.scheduleRender(),this.notifyListeners("projectionUpdate",l)),qu&&Hu.recalculatedProjection++):this.prevProjectionDelta&&(this.createProjectionDeltas(),this.scheduleRender())}hide(){this.isVisible=!1}show(){this.isVisible=!0}scheduleRender(e=!0){var t;if(null===(t=this.options.visualElement)||void 0===t||t.scheduleRender(),e){const e=this.getStack();e&&e.scheduleRender()}this.resumingFrom&&!this.resumingFrom.instance&&(this.resumingFrom=void 0)}createProjectionDeltas(){this.prevProjectionDelta=Ic(),this.projectionDelta=Ic(),this.projectionDeltaWithTransform=Ic()}setAnimationOrigin(e,t=!1){const n=this.snapshot,r=n?n.latestValues:{},o={...this.latestValues},i=Ic();this.relativeParent&&this.relativeParent.options.layoutRoot||(this.relativeTarget=this.relativeTargetOrigin=void 0),this.attemptToResolveRelativeTarget=!t;const s=Dc(),a=(n?n.source:void 0)!==(this.layout?this.layout.source:void 0),l=this.getStack(),c=!l||l.members.length<=1,u=Boolean(a&&!c&&!0===this.options.crossfade&&!this.path.some(md));let d;this.animationProgress=0,this.mixTargetDelta=t=>{const n=t/1e3;var l,f,h,p,m,g;hd(i.x,e.x,n),hd(i.y,e.y,n),this.setTargetDelta(i),this.relativeTarget&&this.relativeTargetOrigin&&this.layout&&this.relativeParent&&this.relativeParent.layout&&(Oc(s,this.layout.layoutBox,this.relativeParent.layout.layoutBox),h=this.relativeTarget,p=this.relativeTargetOrigin,m=s,g=n,pd(h.x,p.x,m.x,g),pd(h.y,p.y,m.y,g),d&&(l=this.relativeTarget,f=d,Lu(l.x,f.x)&&Lu(l.y,f.y))&&(this.isProjectionDirty=!1),d||(d=Dc()),Tu(d,this.relativeTarget)),a&&(this.animationValues=o,function(e,t,n,r,o,i){o?(e.opacity=Ja(0,void 0!==n.opacity?n.opacity:1,_u(r)),e.opacityExit=Ja(void 0!==t.opacity?t.opacity:1,0,ku(r))):i&&(e.opacity=Ja(void 0!==t.opacity?t.opacity:1,void 0!==n.opacity?n.opacity:1,r));for(let o=0;o<xu;o++){const i=`border${bu[o]}Radius`;let s=Su(t,i),a=Su(n,i);void 0===s&&void 0===a||(s||(s=0),a||(a=0),0===s||0===a||Eu(s)===Eu(a)?(e[i]=Math.max(Ja(wu(s),wu(a),r),0),(gs.test(a)||gs.test(s))&&(e[i]+="%")):e[i]=a)}(t.rotate||n.rotate)&&(e.rotate=Ja(t.rotate||0,n.rotate||0,r))}(o,r,this.latestValues,n,u,c)),this.root.scheduleUpdateProjection(),this.scheduleRender(),this.animationProgress=n},this.mixTargetDelta(this.options.layoutRoot?1e3:0)}startAnimation(e){this.notifyListeners("animationStart"),this.currentAnimation&&this.currentAnimation.stop(),this.resumingFrom&&this.resumingFrom.currentAnimation&&this.resumingFrom.currentAnimation.stop(),this.pendingAnimation&&(Ki(this.pendingAnimation),this.pendingAnimation=void 0),this.pendingAnimation=$i.update((()=>{cu.hasAnimatedSinceResize=!0,this.currentAnimation=function(e,t,n){const r=Wl(0)?0:Il(0);return r.start(Pl("",r,1e3,n)),r.animation}(0,0,{...e,onUpdate:t=>{this.mixTargetDelta(t),e.onUpdate&&e.onUpdate(t)},onComplete:()=>{e.onComplete&&e.onComplete(),this.completeAnimation()}}),this.resumingFrom&&(this.resumingFrom.currentAnimation=this.currentAnimation),this.pendingAnimation=void 0}))}completeAnimation(){this.resumingFrom&&(this.resumingFrom.currentAnimation=void 0,this.resumingFrom.preserveOpacity=void 0);const e=this.getStack();e&&e.exitAnimationComplete(),this.resumingFrom=this.currentAnimation=this.animationValues=void 0,this.notifyListeners("animationComplete")}finishAnimation(){this.currentAnimation&&(this.mixTargetDelta&&this.mixTargetDelta(1e3),this.currentAnimation.stop()),this.completeAnimation()}applyTransformsToTarget(){const e=this.getLead();let{targetWithTransforms:t,target:n,layout:r,latestValues:o}=e;if(t&&n&&r){if(this!==e&&this.layout&&r&&xd(this.options.animationType,this.layout.layoutBox,r.layoutBox)){n=this.target||Dc();const t=_c(this.layout.layoutBox.x);n.x.min=e.target.x.min,n.x.max=n.x.min+t;const r=_c(this.layout.layoutBox.y);n.y.min=e.target.y.min,n.y.max=n.y.min+r}Tu(t,n),Zc(t,o),Cc(this.projectionDeltaWithTransform,this.layoutCorrected,t,o)}}registerSharedNode(e,t){this.sharedNodes.has(e)||this.sharedNodes.set(e,new Wu),this.sharedNodes.get(e).add(t);const n=t.options.initialPromotionConfig;t.promote({transition:n?n.transition:void 0,preserveFollowOpacity:n&&n.shouldPreserveFollowOpacity?n.shouldPreserveFollowOpacity(t):void 0})}isLead(){const e=this.getStack();return!e||e.lead===this}getLead(){var e;const{layoutId:t}=this.options;return t&&(null===(e=this.getStack())||void 0===e?void 0:e.lead)||this}getPrevLead(){var e;const{layoutId:t}=this.options;return t?null===(e=this.getStack())||void 0===e?void 0:e.prevLead:void 0}getStack(){const{layoutId:e}=this.options;if(e)return this.root.sharedNodes.get(e)}promote({needsReset:e,transition:t,preserveFollowOpacity:n}={}){const r=this.getStack();r&&r.promote(this,n),e&&(this.projectionDelta=void 0,this.needsReset=!0),t&&this.setOptions({transition:t})}relegate(){const e=this.getStack();return!!e&&e.relegate(this)}resetSkewAndRotation(){const{visualElement:e}=this.options;if(!e)return;let t=!1;const{latestValues:n}=e;if((n.z||n.rotate||n.rotateX||n.rotateY||n.rotateZ||n.skewX||n.skewY)&&(t=!0),!t)return;const r={};n.z&&Ju("z",e,r,this.animationValues);for(let t=0;t<Yu.length;t++)Ju(`rotate${Yu[t]}`,e,r,this.animationValues),Ju(`skew${Yu[t]}`,e,r,this.animationValues);e.render();for(const t in r)e.setStaticValue(t,r[t]),this.animationValues&&(this.animationValues[t]=r[t]);e.scheduleRender()}getProjectionStyles(e){var t,n;if(!this.instance||this.isSVG)return;if(!this.isVisible)return Gu;const r={visibility:""},o=this.getTransformTemplate();if(this.needsReset)return this.needsReset=!1,r.opacity="",r.pointerEvents=Ku(null==e?void 0:e.pointerEvents)||"",r.transform=o?o(this.latestValues,""):"none",r;const i=this.getLead();if(!this.projectionDelta||!this.layout||!i.target){const t={};return this.options.layoutId&&(t.opacity=void 0!==this.latestValues.opacity?this.latestValues.opacity:1,t.pointerEvents=Ku(null==e?void 0:e.pointerEvents)||""),this.hasProjected&&!Vc(this.latestValues)&&(t.transform=o?o({},""):"none",this.hasProjected=!1),t}const s=i.animationValues||i.latestValues;this.applyTransformsToTarget(),r.transform=function(e,t,n){let r="";const o=e.x.translate/t.x,i=e.y.translate/t.y,s=(null==n?void 0:n.z)||0;if((o||i||s)&&(r=`translate3d(${o}px, ${i}px, ${s}px) `),1===t.x&&1===t.y||(r+=`scale(${1/t.x}, ${1/t.y}) `),n){const{transformPerspective:e,rotate:t,rotateX:o,rotateY:i,skewX:s,skewY:a}=n;e&&(r=`perspective(${e}px) ${r}`),t&&(r+=`rotate(${t}deg) `),o&&(r+=`rotateX(${o}deg) `),i&&(r+=`rotateY(${i}deg) `),s&&(r+=`skewX(${s}deg) `),a&&(r+=`skewY(${a}deg) `)}const a=e.x.scale*t.x,l=e.y.scale*t.y;return 1===a&&1===l||(r+=`scale(${a}, ${l})`),r||"none"}(this.projectionDeltaWithTransform,this.treeScale,s),o&&(r.transform=o(s,r.transform));const{x:a,y:l}=this.projectionDelta;r.transformOrigin=`${100*a.origin}% ${100*l.origin}% 0`,i.animationValues?r.opacity=i===this?null!==(n=null!==(t=s.opacity)&&void 0!==t?t:this.latestValues.opacity)&&void 0!==n?n:1:this.preserveOpacity?this.latestValues.opacity:s.opacityExit:r.opacity=i===this?void 0!==s.opacity?s.opacity:"":void 0!==s.opacityExit?s.opacityExit:0;for(const e in hu){if(void 0===s[e])continue;const{correct:t,applyTo:n}=hu[e],o="none"===r.transform?s[e]:t(s[e],i);if(n){const e=n.length;for(let t=0;t<e;t++)r[n[t]]=o}else r[e]=o}return this.options.layoutId&&(r.pointerEvents=i===this?Ku(null==e?void 0:e.pointerEvents)||"":"none"),r}clearSnapshot(){this.resumeFrom=this.snapshot=void 0}resetTree(){this.root.nodes.forEach((e=>{var t;return null===(t=e.currentAnimation)||void 0===t?void 0:t.stop()})),this.root.nodes.forEach(id),this.root.sharedNodes.clear()}}}function ed(e){e.updateLayout()}function td(e){var t;const n=(null===(t=e.resumeFrom)||void 0===t?void 0:t.snapshot)||e.snapshot;if(e.isLead()&&e.layout&&n&&e.hasListeners("didUpdate")){const{layoutBox:t,measuredBox:r}=e.layout,{animationType:o}=e.options,i=n.source!==e.layout.source;"size"===o?Lc((e=>{const r=i?n.measuredBox[e]:n.layoutBox[e],o=_c(r);r.min=t[e].min,r.max=r.min+o})):xd(o,n.layoutBox,t)&&Lc((r=>{const o=i?n.measuredBox[r]:n.layoutBox[r],s=_c(t[r]);o.max=o.min+s,e.relativeTarget&&!e.currentAnimation&&(e.isProjectionDirty=!0,e.relativeTarget[r].max=e.relativeTarget[r].min+s)}));const s=Ic();Cc(s,t,n.layoutBox);const a=Ic();i?Cc(a,e.applyTransform(r,!0),n.measuredBox):Cc(a,t,n.layoutBox);const l=!Du(s);let c=!1;if(!e.resumeFrom){const r=e.getClosestProjectingParent();if(r&&!r.resumeFrom){const{snapshot:o,layout:i}=r;if(o&&i){const s=Dc();Oc(s,n.layoutBox,o.layoutBox);const a=Dc();Oc(a,t,i.layoutBox),zu(s,a)||(c=!0),r.options.layoutRoot&&(e.relativeTarget=a,e.relativeTargetOrigin=s,e.relativeParent=r)}}}e.notifyListeners("didUpdate",{layout:t,snapshot:n,delta:a,layoutDelta:s,hasLayoutChanged:l,hasRelativeTargetChanged:c})}else if(e.isLead()){const{onExitComplete:t}=e.options;t&&t()}e.options.transition=void 0}function nd(e){qu&&Hu.totalNodes++,e.parent&&(e.isProjecting()||(e.isProjectionDirty=e.parent.isProjectionDirty),e.isSharedProjectionDirty||(e.isSharedProjectionDirty=Boolean(e.isProjectionDirty||e.parent.isProjectionDirty||e.parent.isSharedProjectionDirty)),e.isTransformDirty||(e.isTransformDirty=e.parent.isTransformDirty))}function rd(e){e.isProjectionDirty=e.isSharedProjectionDirty=e.isTransformDirty=!1}function od(e){e.clearSnapshot()}function id(e){e.clearMeasurements()}function sd(e){e.isLayoutDirty=!1}function ad(e){const{visualElement:t}=e.options;t&&t.getProps().onBeforeLayoutMeasure&&t.notify("BeforeLayoutMeasure"),e.resetTransform()}function ld(e){e.finishAnimation(),e.targetDelta=e.relativeTarget=e.target=void 0,e.isProjectionDirty=!0}function cd(e){e.resolveTargetDelta()}function ud(e){e.calcProjection()}function dd(e){e.resetSkewAndRotation()}function fd(e){e.removeLeadSnapshot()}function hd(e,t,n){e.translate=Ja(t.translate,0,n),e.scale=Ja(t.scale,1,n),e.origin=t.origin,e.originPoint=t.originPoint}function pd(e,t,n,r){e.min=Ja(t.min,n.min,r),e.max=Ja(t.max,n.max,r)}function md(e){return e.animationValues&&void 0!==e.animationValues.opacityExit}const gd={duration:.45,ease:[.4,0,.1,1]},vd=e=>"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().includes(e),yd=vd("applewebkit/")&&!vd("chrome/")?Math.round:Vi;function bd(e){e.min=yd(e.min),e.max=yd(e.max)}function xd(e,t,n){return"position"===e||"preserve-aspect"===e&&(r=Bu(t),o=Bu(n),!(Math.abs(r-o)<=.2));var r,o}function wd(e){var t;return e!==e.root&&(null===(t=e.scroll)||void 0===t?void 0:t.wasRoot)}const Ed=Qu({attachResizeListener:(e,t)=>oc(e,"resize",t),measureScroll:()=>({x:document.documentElement.scrollLeft||document.body.scrollLeft,y:document.documentElement.scrollTop||document.body.scrollTop}),checkIsScrollRoot:()=>!0}),Sd={current:void 0},_d=Qu({measureScroll:e=>({x:e.scrollLeft,y:e.scrollTop}),defaultParent:()=>{if(!Sd.current){const e=new Ed({});e.mount(window),e.setOptions({layoutScroll:!0}),Sd.current=e}return Sd.current},resetTransform:(e,t)=>{e.style.transform=void 0!==t?t:"none"},checkIsScrollRoot:e=>Boolean("fixed"===window.getComputedStyle(e).position)}),kd={pan:{Feature:class extends Zl{constructor(){super(...arguments),this.removePointerDownListener=Vi}onPointerDown(e){this.session=new ac(e,this.createPanHandlers(),{transformPagePoint:this.node.getTransformPagePoint(),contextWindow:eu(this.node)})}createPanHandlers(){const{onPanSessionStart:e,onPanStart:t,onPan:n,onPanEnd:r}=this.node.getProps();return{onSessionStart:ou(e),onStart:ou(t),onMove:n,onEnd:(e,t)=>{delete this.session,r&&$i.postRender((()=>r(e,t)))}}}mount(){this.removePointerDownListener=ic(this.node.current,"pointerdown",(e=>this.onPointerDown(e)))}update(){this.session&&this.session.updateHandlers(this.createPanHandlers())}unmount(){this.removePointerDownListener(),this.session&&this.session.end()}}},drag:{Feature:class extends Zl{constructor(e){super(e),this.removeGroupControls=Vi,this.removeListeners=Vi,this.controls=new nu(e)}mount(){const{dragControls:e}=this.node.getProps();e&&(this.removeGroupControls=e.subscribe(this.controls)),this.removeListeners=this.controls.addListeners()||Vi}unmount(){this.removeGroupControls(),this.removeListeners()}},ProjectionNode:_d,MeasureLayout:vu}};function Cd(e,t){const n=t?"pointerenter":"pointerleave",r=t?"onHoverStart":"onHoverEnd";return ic(e.current,n,((n,o)=>{if("touch"===n.pointerType||yc())return;const i=e.getProps();e.animationState&&i.whileHover&&e.animationState.setActive("whileHover",t);const s=i[r];s&&$i.postRender((()=>s(n,o)))}),{passive:!e.getProps()[r]})}const Pd=(e,t)=>!!t&&(e===t||Pd(e,t.parentElement));function Td(e,t){if(!t)return;const n=new PointerEvent("pointer"+e);t(n,nc(n))}const Od=new WeakMap,Rd=new WeakMap,Nd=e=>{const t=Od.get(e.target);t&&t(e)},Ad=e=>{e.forEach(Nd)};const jd={some:0,all:1},Md={inView:{Feature:class extends Zl{constructor(){super(...arguments),this.hasEnteredView=!1,this.isInView=!1}startObserver(){this.unmount();const{viewport:e={}}=this.node.getProps(),{root:t,margin:n,amount:r="some",once:o}=e,i={root:t?t.current:void 0,rootMargin:n,threshold:"number"==typeof r?r:jd[r]};return function(e,t,n){const r=function({root:e,...t}){const n=e||document;Rd.has(n)||Rd.set(n,{});const r=Rd.get(n),o=JSON.stringify(t);return r[o]||(r[o]=new IntersectionObserver(Ad,{root:e,...t})),r[o]}(t);return Od.set(e,n),r.observe(e),()=>{Od.delete(e),r.unobserve(e)}}(this.node.current,i,(e=>{const{isIntersecting:t}=e;if(this.isInView===t)return;if(this.isInView=t,o&&!t&&this.hasEnteredView)return;t&&(this.hasEnteredView=!0),this.node.animationState&&this.node.animationState.setActive("whileInView",t);const{onViewportEnter:n,onViewportLeave:r}=this.node.getProps(),i=t?n:r;i&&i(e)}))}mount(){this.startObserver()}update(){if("undefined"==typeof IntersectionObserver)return;const{props:e,prevProps:t}=this.node;["amount","margin","root"].some(function({viewport:e={}},{viewport:t={}}={}){return n=>e[n]!==t[n]}(e,t))&&this.startObserver()}unmount(){}}},tap:{Feature:class extends Zl{constructor(){super(...arguments),this.removeStartListeners=Vi,this.removeEndListeners=Vi,this.removeAccessibleListeners=Vi,this.startPointerPress=(e,t)=>{if(this.isPressing)return;this.removeEndListeners();const n=this.node.getProps(),r=ic(window,"pointerup",((e,t)=>{if(!this.checkPressEnd())return;const{onTap:n,onTapCancel:r,globalTapTarget:o}=this.node.getProps(),i=o||Pd(this.node.current,e.target)?n:r;i&&$i.update((()=>i(e,t)))}),{passive:!(n.onTap||n.onPointerUp)}),o=ic(window,"pointercancel",((e,t)=>this.cancelPress(e,t)),{passive:!(n.onTapCancel||n.onPointerCancel)});this.removeEndListeners=Ga(r,o),this.startPress(e,t)},this.startAccessiblePress=()=>{const e=oc(this.node.current,"keydown",(e=>{"Enter"!==e.key||this.isPressing||(this.removeEndListeners(),this.removeEndListeners=oc(this.node.current,"keyup",(e=>{"Enter"===e.key&&this.checkPressEnd()&&Td("up",((e,t)=>{const{onTap:n}=this.node.getProps();n&&$i.postRender((()=>n(e,t)))}))})),Td("down",((e,t)=>{this.startPress(e,t)})))})),t=oc(this.node.current,"blur",(()=>{this.isPressing&&Td("cancel",((e,t)=>this.cancelPress(e,t)))}));this.removeAccessibleListeners=Ga(e,t)}}startPress(e,t){this.isPressing=!0;const{onTapStart:n,whileTap:r}=this.node.getProps();r&&this.node.animationState&&this.node.animationState.setActive("whileTap",!0),n&&$i.postRender((()=>n(e,t)))}checkPressEnd(){return this.removeEndListeners(),this.isPressing=!1,this.node.getProps().whileTap&&this.node.animationState&&this.node.animationState.setActive("whileTap",!1),!yc()}cancelPress(e,t){if(!this.checkPressEnd())return;const{onTapCancel:n}=this.node.getProps();n&&$i.postRender((()=>n(e,t)))}mount(){const e=this.node.getProps(),t=ic(e.globalTapTarget?window:this.node.current,"pointerdown",this.startPointerPress,{passive:!(e.onTapStart||e.onPointerStart)}),n=oc(this.node.current,"focus",this.startAccessiblePress);this.removeStartListeners=Ga(t,n)}unmount(){this.removeStartListeners(),this.removeEndListeners(),this.removeAccessibleListeners()}}},focus:{Feature:class extends Zl{constructor(){super(...arguments),this.isActive=!1}onFocus(){let e=!1;try{e=this.node.current.matches(":focus-visible")}catch(t){e=!0}e&&this.node.animationState&&(this.node.animationState.setActive("whileFocus",!0),this.isActive=!0)}onBlur(){this.isActive&&this.node.animationState&&(this.node.animationState.setActive("whileFocus",!1),this.isActive=!1)}mount(){this.unmount=Ga(oc(this.node.current,"focus",(()=>this.onFocus())),oc(this.node.current,"blur",(()=>this.onBlur())))}unmount(){}}},hover:{Feature:class extends Zl{mount(){this.unmount=Ga(Cd(this.node,!0),Cd(this.node,!1))}unmount(){}}}},Id={layout:{ProjectionNode:_d,MeasureLayout:vu}},Dd=(0,o.createContext)({transformPagePoint:e=>e,isStatic:!1,reducedMotion:"never"}),Ld=(0,o.createContext)({}),Fd="undefined"!=typeof window,zd=Fd?o.useLayoutEffect:o.useEffect,Bd=(0,o.createContext)({strict:!1});let Vd=!1;function Wd(e,t,n,r,i){var s;const{visualElement:a}=(0,o.useContext)(Ld),l=(0,o.useContext)(Bd),c=(0,o.useContext)(su),u=(0,o.useContext)(Dd).reducedMotion,d=(0,o.useRef)();r=r||l.renderer,!d.current&&r&&(d.current=r(e,{visualState:t,parent:a,props:n,presenceContext:c,blockInitialAnimation:!!c&&!1===c.initial,reducedMotionConfig:u}));const f=d.current,h=(0,o.useContext)(lu);!f||f.projection||!i||"html"!==f.type&&"svg"!==f.type||function(e,t,n,r){const{layoutId:o,layout:i,drag:s,dragConstraints:a,layoutScroll:l,layoutRoot:c}=t;e.projection=new n(e.latestValues,t["data-framer-portal-id"]?void 0:$d(e.parent)),e.projection.setOptions({layoutId:o,layout:i,alwaysMeasureLayout:Boolean(s)||a&&bc(a),visualElement:e,animationType:"string"==typeof i?i:"both",initialPromotionConfig:r,layoutScroll:l,layoutRoot:c})}(d.current,n,i,h),(0,o.useInsertionEffect)((()=>{f&&f.update(n,c)}));const p=n[Fl],m=(0,o.useRef)(Boolean(p)&&!window.MotionHandoffIsComplete&&(null===(s=window.MotionHasOptimisedAnimation)||void 0===s?void 0:s.call(window,p)));return zd((()=>{f&&(f.updateFeatures(),pu.render(f.render),m.current&&f.animationState&&f.animationState.animateChanges())})),(0,o.useEffect)((()=>{f&&(!m.current&&f.animationState&&f.animationState.animateChanges(),m.current=!1,Vd||(Vd=!0,queueMicrotask(Ud)))})),f}function Ud(){window.MotionHandoffIsComplete=!0}function $d(e){if(e)return!1!==e.options.allowProjection?e.projection:$d(e.parent)}function Kd(e,t,n){return(0,o.useCallback)((r=>{r&&e.mount&&e.mount(r),t&&(r?t.mount(r):t.unmount()),n&&("function"==typeof n?n(r):bc(n)&&(n.current=r))}),[t])}function Hd(e){return wi(e.animate)||Oi.some((t=>_i(e[t])))}function qd(e){return Boolean(Hd(e)||e.variants)}function Yd(e){return Array.isArray(e)?e.join(" "):e}const Gd={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]},Xd={};for(const e in Gd)Xd[e]={isEnabled:t=>Gd[e].some((e=>!!t[e]))};const Jd=Symbol.for("motionComponentSymbol");function Zd({preloadedFeatures:e,createVisualElement:t,useRender:n,useVisualState:r,Component:i}){e&&function(e){for(const t in e)Xd[t]={...Xd[t],...e[t]}}(e);const s=(0,o.forwardRef)((function(e,s){let a;const l={...(0,o.useContext)(Dd),...e,layoutId:Qd(e)},{isStatic:c}=l,u=function(e){const{initial:t,animate:n}=function(e,t){if(Hd(e)){const{initial:t,animate:n}=e;return{initial:!1===t||_i(t)?t:void 0,animate:_i(n)?n:void 0}}return!1!==e.inherit?t:{}}(e,(0,o.useContext)(Ld));return(0,o.useMemo)((()=>({initial:t,animate:n})),[Yd(t),Yd(n)])}(e),d=r(e,c);if(!c&&Fd){(0,o.useContext)(Bd).strict;const e=function(e){const{drag:t,layout:n}=Xd;if(!t&&!n)return{};const r={...t,...n};return{MeasureLayout:(null==t?void 0:t.isEnabled(e))||(null==n?void 0:n.isEnabled(e))?r.MeasureLayout:void 0,ProjectionNode:r.ProjectionNode}}(l);a=e.MeasureLayout,u.visualElement=Wd(i,d,l,t,e.ProjectionNode)}return(0,iu.jsxs)(Ld.Provider,{value:u,children:[a&&u.visualElement?(0,iu.jsx)(a,{visualElement:u.visualElement,...l}):null,n(i,e,Kd(d,u.visualElement,s),d,c,u.visualElement)]})}));return s[Jd]=i,s}function Qd({layoutId:e}){const t=(0,o.useContext)(au).id;return t&&void 0!==e?t+"-"+e:e}const ef=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","switch","symbol","svg","text","tspan","use","view"];function tf(e){return"string"==typeof e&&!e.includes("-")&&!!(ef.indexOf(e)>-1||/[A-Z]/u.test(e))}function nf(e,{style:t,vars:n},r,o){Object.assign(e.style,t,o&&o.getProjectionStyles(r));for(const t in n)e.style.setProperty(t,n[t])}const rf=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues","viewBox","gradientTransform","pathLength","startOffset","textLength","lengthAdjust"]);function of(e,t,n,r){nf(e,t,void 0,r);for(const n in t.attrs)e.setAttribute(rf.has(n)?n:Ll(n),t.attrs[n])}function sf(e,{layout:t,layoutId:n}){return Ni.has(e)||e.startsWith("origin")||(t||void 0!==n)&&(!!hu[e]||"opacity"===e)}function af(e,t,n){var r;const{style:o}=e,i={};for(const s in o)(Wl(o[s])||t.style&&Wl(t.style[s])||sf(s,e)||void 0!==(null===(r=null==n?void 0:n.getValue(s))||void 0===r?void 0:r.liveStyle))&&(i[s]=o[s]);return n&&o&&"string"==typeof o.willChange&&(n.applyWillChange=!1),i}function lf(e,t,n){const r=af(e,t,n);for(const n in e)(Wl(e[n])||Wl(t[n]))&&(r[-1!==Ri.indexOf(n)?"attr"+n.charAt(0).toUpperCase()+n.substring(1):n]=e[n]);return r}function cf(e){const t=(0,o.useRef)(null);return null===t.current&&(t.current=e()),t.current}const uf=e=>(t,n)=>{const r=(0,o.useContext)(Ld),i=(0,o.useContext)(su),s=()=>function({applyWillChange:e=!1,scrapeMotionValuesFromProps:t,createRenderState:n,onMount:r},o,i,s,a){const l={latestValues:hf(o,i,s,!a&&e,t),renderState:n()};return r&&(l.mount=e=>r(o,e,l)),l}(e,t,r,i,n);return n?s():cf(s)};function df(e,t){const n=Bl(t);n&&Rl(e,n)}function ff(e,t,n){const r=Array.isArray(t)?t:[t];for(let t=0;t<r.length;t++){const o=Ci(e,r[t]);if(o){const{transitionEnd:e,transition:t,...r}=o;n(r,e)}}}function hf(e,t,n,r,o){var i;const s={},a=[],l=r&&void 0===(null===(i=e.style)||void 0===i?void 0:i.willChange),c=o(e,{});for(const e in c)s[e]=Ku(c[e]);let{initial:u,animate:d}=e;const f=Hd(e),h=qd(e);t&&h&&!f&&!1!==e.inherit&&(void 0===u&&(u=t.initial),void 0===d&&(d=t.animate));let p=!!n&&!1===n.initial;p=p||!1===u;const m=p?d:u;return m&&"boolean"!=typeof m&&!wi(m)&&ff(e,m,((e,t)=>{for(const t in e){let n=e[t];Array.isArray(n)&&(n=n[p?n.length-1:0]),null!==n&&(s[t]=n)}for(const e in t)s[e]=t[e]})),l&&(d&&!1!==u&&!wi(d)&&ff(e,d,(e=>{for(const t in e)df(a,t)})),a.length&&(s.willChange=a.join(","))),s}const pf=()=>({style:{},transform:{},transformOrigin:{},vars:{}}),mf=()=>({...pf(),attrs:{}}),gf=(e,t)=>t&&"number"==typeof e?t.transform(e):e,vf={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"},yf=Ri.length;function bf(e,t,n){const{style:r,vars:o,transformOrigin:i}=e;let s=!1,a=!1;for(const e in t){const n=t[e];if(Ni.has(e))s=!0;else if(Qi(e))o[e]=n;else{const t=gf(n,sa[e]);e.startsWith("origin")?(a=!0,i[e]=t):r[e]=t}}if(t.transform||(s||n?r.transform=function(e,t,n){let r="",o=!0;for(let i=0;i<yf;i++){const s=Ri[i],a=e[s];if(void 0===a)continue;let l=!0;if(l="number"==typeof a?a===(s.startsWith("scale")?1:0):0===parseFloat(a),!l||n){const e=gf(a,sa[s]);l||(o=!1,r+=`${vf[s]||s}(${e}) `),n&&(t[s]=e)}}return r=r.trim(),n?r=n(t,o?"":r):o&&(r="none"),r}(t,e.transform,n):r.transform&&(r.transform="none")),a){const{originX:e="50%",originY:t="50%",originZ:n=0}=i;r.transformOrigin=`${e} ${t} ${n}`}}function xf(e,t,n){return"string"==typeof e?e:vs.transform(t+n*e)}const wf={offset:"stroke-dashoffset",array:"stroke-dasharray"},Ef={offset:"strokeDashoffset",array:"strokeDasharray"};function Sf(e,{attrX:t,attrY:n,attrScale:r,originX:o,originY:i,pathLength:s,pathSpacing:a=1,pathOffset:l=0,...c},u,d){if(bf(e,c,d),u)return void(e.style.viewBox&&(e.attrs.viewBox=e.style.viewBox));e.attrs=e.style,e.style={};const{attrs:f,style:h,dimensions:p}=e;f.transform&&(p&&(h.transform=f.transform),delete f.transform),p&&(void 0!==o||void 0!==i||h.transform)&&(h.transformOrigin=function(e,t,n){return`${xf(t,e.x,e.width)} ${xf(n,e.y,e.height)}`}(p,void 0!==o?o:.5,void 0!==i?i:.5)),void 0!==t&&(f.x=t),void 0!==n&&(f.y=n),void 0!==r&&(f.scale=r),void 0!==s&&function(e,t,n=1,r=0,o=!0){e.pathLength=1;const i=o?wf:Ef;e[i.offset]=vs.transform(-r);const s=vs.transform(t),a=vs.transform(n);e[i.array]=`${s} ${a}`}(f,s,a,l,!1)}const _f=e=>"string"==typeof e&&"svg"===e.toLowerCase(),kf={useVisualState:uf({scrapeMotionValuesFromProps:lf,createRenderState:mf,onMount:(e,t,{renderState:n,latestValues:r})=>{$i.read((()=>{try{n.dimensions="function"==typeof t.getBBox?t.getBBox():t.getBoundingClientRect()}catch(e){n.dimensions={x:0,y:0,width:0,height:0}}})),$i.render((()=>{Sf(n,r,_f(t.tagName),e.transformTemplate),of(t,n)}))}})},Cf={useVisualState:uf({applyWillChange:!0,scrapeMotionValuesFromProps:af,createRenderState:pf})};function Pf(e,t,n){for(const r in t)Wl(t[r])||sf(r,n)||(e[r]=t[r])}function Tf(e,t){const n={},r=function(e,t){const n={};return Pf(n,e.style||{},e),Object.assign(n,function({transformTemplate:e},t){return(0,o.useMemo)((()=>{const n=pf();return bf(n,t,e),Object.assign({},n.vars,n.style)}),[t])}(e,t)),n}(e,t);return e.drag&&!1!==e.dragListener&&(n.draggable=!1,r.userSelect=r.WebkitUserSelect=r.WebkitTouchCallout="none",r.touchAction=!0===e.drag?"none":"pan-"+("x"===e.drag?"y":"x")),void 0===e.tabIndex&&(e.onTap||e.onTapStart||e.whileTap)&&(n.tabIndex=0),n.style=r,n}const Of=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","custom","inherit","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","globalTapTarget","ignoreStrict","viewport"]);function Rf(e){return e.startsWith("while")||e.startsWith("drag")&&"draggable"!==e||e.startsWith("layout")||e.startsWith("onTap")||e.startsWith("onPan")||e.startsWith("onLayout")||Of.has(e)}let Nf=e=>!Rf(e);try{(Af=n(316).A)&&(Nf=e=>e.startsWith("on")?!Rf(e):Af(e))}catch(e){}var Af;function jf(e,t,n,r){const i=(0,o.useMemo)((()=>{const n=mf();return Sf(n,t,_f(r),e.transformTemplate),{...n.attrs,style:{...n.style}}}),[t]);if(e.style){const t={};Pf(t,e.style,e),i.style={...t,...i.style}}return i}function Mf(e=!1){return(t,n,r,{latestValues:i},s)=>{const a=(tf(t)?jf:Tf)(n,i,s,t),l=function(e,t,n){const r={};for(const o in e)"values"===o&&"object"==typeof e.values||(Nf(o)||!0===n&&Rf(o)||!t&&!Rf(o)||e.draggable&&o.startsWith("onDrag"))&&(r[o]=e[o]);return r}(n,"string"==typeof t,e),c=t!==o.Fragment?{...l,...a,ref:r}:{},{children:u}=n,d=(0,o.useMemo)((()=>Wl(u)?u.get():u),[u]);return(0,o.createElement)(t,{...c,children:d})}}function If(e,t){return function(n,{forwardMotionProps:r}={forwardMotionProps:!1}){return Zd({...tf(n)?kf:Cf,preloadedFeatures:e,useRender:Mf(r),createVisualElement:t,Component:n})}}const Df={current:null},Lf={current:!1},Ff=new WeakMap,zf=[...Os,Us,ea],Bf=["AnimationStart","AnimationComplete","Update","BeforeLayoutMeasure","LayoutMeasure","LayoutAnimationStart","LayoutAnimationComplete"],Vf=Oi.length;class Wf{scrapeMotionValuesFromProps(e,t,n){return{}}constructor({parent:e,props:t,presenceContext:n,reducedMotionConfig:r,blockInitialAnimation:o,visualState:i},s={}){this.applyWillChange=!1,this.current=null,this.children=new Set,this.isVariantNode=!1,this.isControllingVariants=!1,this.shouldReduceMotion=null,this.values=new Map,this.KeyframeResolver=Ds,this.features={},this.valueSubscriptions=new Map,this.prevMotionValues={},this.events={},this.propEventSubscriptions={},this.notifyUpdate=()=>this.notify("Update",this.latestValues),this.render=()=>{this.isRenderScheduled=!1,this.current&&(this.triggerBuild(),this.renderInstance(this.current,this.renderState,this.props.style,this.projection))},this.isRenderScheduled=!1,this.scheduleRender=()=>{this.isRenderScheduled||(this.isRenderScheduled=!0,$i.render(this.render,!1,!0))};const{latestValues:a,renderState:l}=i;this.latestValues=a,this.baseTarget={...a},this.initialValues=t.initial?{...a}:{},this.renderState=l,this.parent=e,this.props=t,this.presenceContext=n,this.depth=e?e.depth+1:0,this.reducedMotionConfig=r,this.options=s,this.blockInitialAnimation=Boolean(o),this.isControllingVariants=Hd(t),this.isVariantNode=qd(t),this.isVariantNode&&(this.variantChildren=new Set),this.manuallyAnimateOnMount=Boolean(e&&e.current);const{willChange:c,...u}=this.scrapeMotionValuesFromProps(t,{},this);for(const e in u){const t=u[e];void 0!==a[e]&&Wl(t)&&t.set(a[e],!1)}}mount(e){this.current=e,Ff.set(e,this),this.projection&&!this.projection.instance&&this.projection.mount(e),this.parent&&this.isVariantNode&&!this.isControllingVariants&&(this.removeFromVariantTree=this.parent.addVariantChild(this)),this.values.forEach(((e,t)=>this.bindToMotionValue(t,e))),Lf.current||function(){if(Lf.current=!0,Fd)if(window.matchMedia){const e=window.matchMedia("(prefers-reduced-motion)"),t=()=>Df.current=e.matches;e.addListener(t),t()}else Df.current=!1}(),this.shouldReduceMotion="never"!==this.reducedMotionConfig&&("always"===this.reducedMotionConfig||Df.current),this.parent&&this.parent.children.add(this),this.update(this.props,this.presenceContext)}unmount(){Ff.delete(this.current),this.projection&&this.projection.unmount(),Ki(this.notifyUpdate),Ki(this.render),this.valueSubscriptions.forEach((e=>e())),this.valueSubscriptions.clear(),this.removeFromVariantTree&&this.removeFromVariantTree(),this.parent&&this.parent.children.delete(this);for(const e in this.events)this.events[e].clear();for(const e in this.features){const t=this.features[e];t&&(t.unmount(),t.isMounted=!1)}this.current=null}bindToMotionValue(e,t){this.valueSubscriptions.has(e)&&this.valueSubscriptions.get(e)();const n=Ni.has(e),r=t.on("change",(t=>{this.latestValues[e]=t,this.props.onUpdate&&$i.preRender(this.notifyUpdate),n&&this.projection&&(this.projection.isTransformDirty=!0)})),o=t.on("renderRequest",this.scheduleRender);let i;window.MotionCheckAppearSync&&(i=window.MotionCheckAppearSync(this,e,t)),this.valueSubscriptions.set(e,(()=>{r(),o(),i&&i(),t.owner&&t.stop()}))}sortNodePosition(e){return this.current&&this.sortInstanceNodePosition&&this.type===e.type?this.sortInstanceNodePosition(this.current,e.current):0}updateFeatures(){let e="animation";for(e in Xd){const t=Xd[e];if(!t)continue;const{isEnabled:n,Feature:r}=t;if(!this.features[e]&&r&&n(this.props)&&(this.features[e]=new r(this)),this.features[e]){const t=this.features[e];t.isMounted?t.update():(t.mount(),t.isMounted=!0)}}}triggerBuild(){this.build(this.renderState,this.latestValues,this.props)}measureViewportBox(){return this.current?this.measureInstanceViewportBox(this.current,this.props):Dc()}getStaticValue(e){return this.latestValues[e]}setStaticValue(e,t){this.latestValues[e]=t}update(e,t){(e.transformTemplate||this.props.transformTemplate)&&this.scheduleRender(),this.prevProps=this.props,this.props=e,this.prevPresenceContext=this.presenceContext,this.presenceContext=t;for(let t=0;t<Bf.length;t++){const n=Bf[t];this.propEventSubscriptions[n]&&(this.propEventSubscriptions[n](),delete this.propEventSubscriptions[n]);const r=e["on"+n];r&&(this.propEventSubscriptions[n]=this.on(n,r))}this.prevMotionValues=function(e,t,n){for(const r in t){const o=t[r],i=n[r];if(Wl(o))e.addValue(r,o);else if(Wl(i))e.addValue(r,Il(o,{owner:e}));else if(i!==o)if(e.hasValue(r)){const t=e.getValue(r);!0===t.liveStyle?t.jump(o):t.hasAnimated||t.set(o)}else{const t=e.getStaticValue(r);e.addValue(r,Il(void 0!==t?t:o,{owner:e}))}}for(const r in n)void 0===t[r]&&e.removeValue(r);return t}(this,this.scrapeMotionValuesFromProps(e,this.prevProps,this),this.prevMotionValues),this.handleChildMotionValue&&this.handleChildMotionValue()}getProps(){return this.props}getVariant(e){return this.props.variants?this.props.variants[e]:void 0}getDefaultTransition(){return this.props.transition}getTransformPagePoint(){return this.props.transformPagePoint}getClosestVariantNode(){return this.isVariantNode?this:this.parent?this.parent.getClosestVariantNode():void 0}getVariantContext(e=!1){if(e)return this.parent?this.parent.getVariantContext():void 0;if(!this.isControllingVariants){const e=this.parent&&this.parent.getVariantContext()||{};return void 0!==this.props.initial&&(e.initial=this.props.initial),e}const t={};for(let e=0;e<Vf;e++){const n=Oi[e],r=this.props[n];(_i(r)||!1===r)&&(t[n]=r)}return t}addVariantChild(e){const t=this.getClosestVariantNode();if(t)return t.variantChildren&&t.variantChildren.add(e),()=>t.variantChildren.delete(e)}addValue(e,t){const n=this.values.get(e);t!==n&&(n&&this.removeValue(e),this.bindToMotionValue(e,t),this.values.set(e,t),this.latestValues[e]=t.get())}removeValue(e){this.values.delete(e);const t=this.valueSubscriptions.get(e);t&&(t(),this.valueSubscriptions.delete(e)),delete this.latestValues[e],this.removeValueFromRenderState(e,this.renderState)}hasValue(e){return this.values.has(e)}getValue(e,t){if(this.props.values&&this.props.values[e])return this.props.values[e];let n=this.values.get(e);return void 0===n&&void 0!==t&&(n=Il(null===t?void 0:t,{owner:this}),this.addValue(e,n)),n}readValue(e,t){var n;let r=void 0===this.latestValues[e]&&this.current?null!==(n=this.getBaseTargetFromProps(this.props,e))&&void 0!==n?n:this.readValueFromInstance(this.current,e,this.options):this.latestValues[e];return null!=r&&("string"==typeof r&&(Ji(r)||Yi(r))?r=parseFloat(r):!(e=>zf.find(Ts(e)))(r)&&ea.test(t)&&(r=ca(e,t)),this.setBaseTarget(e,Wl(r)?r.get():r)),Wl(r)?r.get():r}setBaseTarget(e,t){this.baseTarget[e]=t}getBaseTarget(e){var t;const{initial:n}=this.props;let r;if("string"==typeof n||"object"==typeof n){const o=Ci(this.props,n,null===(t=this.presenceContext)||void 0===t?void 0:t.custom);o&&(r=o[e])}if(n&&void 0!==r)return r;const o=this.getBaseTargetFromProps(this.props,e);return void 0===o||Wl(o)?void 0!==this.initialValues[e]&&void 0===r?void 0:this.baseTarget[e]:o}on(e,t){return this.events[e]||(this.events[e]=new Al),this.events[e].add(t)}notify(e,...t){this.events[e]&&this.events[e].notify(...t)}}class Uf extends Wf{constructor(){super(...arguments),this.KeyframeResolver=da}sortInstanceNodePosition(e,t){return 2&e.compareDocumentPosition(t)?1:-1}getBaseTargetFromProps(e,t){return e.style?e.style[t]:void 0}removeValueFromRenderState(e,{vars:t,style:n}){delete t[e],delete n[e]}}class $f extends Uf{constructor(){super(...arguments),this.type="html",this.applyWillChange=!0,this.renderInstance=nf}readValueFromInstance(e,t){if(Ni.has(t)){const e=la(t);return e&&e.default||0}{const r=(n=e,window.getComputedStyle(n)),o=(Qi(t)?r.getPropertyValue(t):r[t])||0;return"string"==typeof o?o.trim():o}var n}measureInstanceViewportBox(e,{transformPagePoint:t}){return Qc(e,t)}build(e,t,n){bf(e,t,n.transformTemplate)}scrapeMotionValuesFromProps(e,t,n){return af(e,t,n)}handleChildMotionValue(){this.childSubscription&&(this.childSubscription(),delete this.childSubscription);const{children:e}=this.props;Wl(e)&&(this.childSubscription=e.on("change",(e=>{this.current&&(this.current.textContent=`${e}`)})))}}class Kf extends Uf{constructor(){super(...arguments),this.type="svg",this.isSVGTag=!1,this.measureInstanceViewportBox=Dc}getBaseTargetFromProps(e,t){return e[t]}readValueFromInstance(e,t){if(Ni.has(t)){const e=la(t);return e&&e.default||0}return t=rf.has(t)?t:Ll(t),e.getAttribute(t)}scrapeMotionValuesFromProps(e,t,n){return lf(e,t,n)}build(e,t,n){Sf(e,t,this.isSVGTag,n.transformTemplate)}renderInstance(e,t,n,r){of(e,t,0,r)}mount(e){this.isSVGTag=_f(e.tagName),super.mount(e)}}const Hf=xi(If({...ec,...Md,...kd,...Id},((e,t)=>tf(e)?new Kf(t):new $f(t,{allowProjection:e!==o.Fragment}))));var qf=["slug","text","icon","className","disabled","badge"];function Yf(){return Yf=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Yf.apply(null,arguments)}var Gf=(0,o.createContext)(),Xf=function(e,t){var n=(0,o.useContext)(Gf),r=e.slug,s=e.text,a=e.icon,l=e.className,c=e.disabled,u=void 0!==c&&c,d=e.badge,f=void 0===d?null:d,h=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,qf);if(!n)throw new Error("Tab should be used inside Tabs Group");var p=n.activeItem,m=n.onChange,g=n.size,v=n.variant,y=n.orientation,b=n.iconPosition,x=n.width,w={xs:"px-1.5 py-0.5 text-xs [&_svg]:size-3",sm:"underline"===v?"py-1.5 text-sm [&_svg]:size-4":"px-3 py-1.5 text-sm [&_svg]:size-4",md:"underline"===v?"py-2 text-base [&_svg]:size-5":"px-3.5 py-1.5 text-base [&_svg]:size-5",lg:"underline"===v?"p-2.5 text-lg [&_svg]:size-6":"px-3.5 py-1.5 text-lg [&_svg]:size-6"}[g],E=te("relative border-none bg-transparent text-text-secondary cursor-pointer flex items-center justify-center transition-[box-shadow,color,background-color] duration-200","full"===x?"flex-1":"","vertical"===y?"w-full justify-between":""),S="rounded-full";"rounded"===v?S="rounded-md":"underline"===v&&(S="rounded-none");var _=te(E,"border-none",S,"hover:text-text-primary group","focus:outline-none",u?"text-text-disabled cursor-not-allowed":"",w,p===r?"bg-background-primary text-text-primary shadow-sm":"",l);return i().createElement("button",Yf({ref:t,className:_,disabled:u,onClick:function(e){m(e,{slug:r,text:s})}},h),p===r&&"underline"===v&&i().createElement(Hf.span,{layoutId:"underline",className:"absolute right-0 left-0 -bottom-px h-px bg-border-interactive"}),i().createElement("span",{className:"flex items-center gap-1"},"left"===b&&a&&i().createElement("span",{className:"mr-1 contents center-center group-hover:text-text-primary"},a),s,"right"===b&&a&&i().createElement("span",{className:"ml-1 contents center-center group-hover:text-text-primary"},a)),f&&(0,o.isValidElement)(f)&&f)},Jf=(0,o.forwardRef)(Xf);Jf.displayName="Tab";var Zf={Group:function(e){var t,n=e.children,r=e.activeItem,s=void 0===r?null:r,a=e.onChange,l=e.className,c=e.size,u=void 0===c?"sm":c,d=e.orientation,f=void 0===d?"horizontal":d,h=e.variant,p=void 0===h?"pill":h,m=e.iconPosition,g=void 0===m?"left":m,v=e.width,y=void 0===v?"full":v,b=(0,o.useCallback)((function(e,t){a&&a({event:e,value:t})}),[a]),x="rounded-full",w="p-1",E="border border-tab-border border-solid";"vertical"===f?t="gap-0.5":"rounded"!==p&&"pill"!==p||("xs"===u||"sm"===u?t="gap-0.5":"md"!==u&&"lg"!==u||(t="gap-1")),"rounded"===p||"vertical"===f?x="rounded-md":"underline"===p&&(x="rounded-none",w="p-0",E="border-t-0 border-r-0 border-l-0 border-b border-solid border-tab-border","xs"===u?t="gap-0":"sm"===u?t="gap-2.5":"md"!==u&&"lg"!==u||(t="gap-3"));var S="vertical"===f?"flex-col":"",_="box-border [&>*]:box-border flex items-center ".concat("full"===y?"w-full":""," ").concat(S),k=te(_,x,w,t,E,"underline"!==p?"bg-tab-background":"",l);return i().createElement("div",{className:k},i().createElement(Gf.Provider,{value:{activeItem:s,onChange:b,size:u,variant:p,orientation:f,iconPosition:g,width:y}},i().Children.map(n,(function(e){return(0,o.isValidElement)(e)?i().cloneElement(e):null}))))},Tab:Jf};const Qf=xe("ChevronsUpDown",[["path",{d:"m7 15 5 5 5-5",key:"1hf1tw"}],["path",{d:"m7 9 5-5 5 5",key:"sgt6xg"}]]),eh=xe("ChevronDown",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]]),th=xe("Search",[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]]);var nh={sm:{icon:"[&>svg]:size-4",searchIcon:"[&>svg]:size-4",selectButton:"px-2 py-2 rounded text-xs font-medium leading-4 min-h-[2.25rem]",multiSelect:"pl-2 pr-2 py-1.5",displaySelected:"text-xs font-normal",dropdown:"rounded-md",dropdownItemsWrapper:"p-1.5",searchbarWrapper:"p-3 flex items-center gap-0.5",searchbar:"font-medium text-xs",searchbarIcon:"[&>svg]:size-4",label:"text-xs font-medium"},md:{icon:"[&>svg]:size-5",searchIcon:"[&>svg]:size-5",selectButton:"px-2.5 py-2.5 rounded-md text-xs font-medium leading-4 min-h-[2.5rem]",multiSelect:"pl-2 pr-2.5 py-2",displaySelected:"text-sm font-normal",dropdown:"rounded-lg",dropdownItemsWrapper:"p-2",searchbarWrapper:"p-2.5 flex items-center gap-1",searchbar:"font-medium text-sm",searchbarIcon:"[&>svg]:size-5",label:"text-sm font-medium"},lg:{icon:"[&>svg]:size-6",searchIcon:"[&>svg]:size-5",selectButton:"px-3 py-3 rounded-lg text-sm font-medium leading-5 min-h-[3rem]",multiSelect:"pl-2.5 pr-3 py-2.5",displaySelected:"text-sm font-normal",dropdown:"rounded-lg",dropdownItemsWrapper:"p-2",searchbarWrapper:"p-2.5 flex items-center gap-1",searchbar:"font-medium text-sm",searchbarIcon:"[&>svg]:size-5",label:"text-base font-medium"}},rh="group-disabled:text-field-color-disabled",oh=["value","selected","children"];function ih(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(e,t)||lh(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function sh(){return sh=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},sh.apply(null,arguments)}function ah(e){return function(e){if(Array.isArray(e))return ch(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||lh(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function lh(e,t){if(e){if("string"==typeof e)return ch(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?ch(e,t):void 0}}function ch(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function uh(e){return uh="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},uh(e)}function dh(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function fh(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?dh(Object(n),!0).forEach((function(t){hh(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):dh(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function hh(e,t,n){return(t=function(e){var t=function(e){if("object"!=uh(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=uh(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==uh(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var ph=(0,o.createContext)(),mh=function(){return(0,o.useContext)(ph)},gh=function(e){var t,n=e.id,r=e.size,i=void 0===r?"md":r,s=e.value,a=e.defaultValue,l=e.onChange,c=e.by,u=void 0===c?"id":c,d=e.children,f=e.multiple,h=void 0!==f&&f,p=e.combobox,m=void 0!==p&&p,g=e.disabled,v=void 0!==g&&g,y=(0,o.useMemo)((function(){return n||"select-".concat(ce())}),[n]),b=(0,o.useMemo)((function(){return void 0!==s}),[s]),x=ih((0,o.useState)(a),2),w=x[0],E=x[1],S=ih((0,o.useState)(""),2),_=S[0],k=S[1],C=(0,o.useCallback)((function(){return b?s:w}),[b,s,w]),P=ih((0,o.useState)(!1),2),T=P[0],O=P[1],R=ih((0,o.useState)(),2),N=R[0],A=R[1],j=ih((0,o.useState)(),2),M=j[0],I=j[1],D={sm:m?256:172,md:m?256:216,lg:m?256:216},L=Mo({placement:"bottom-start",open:T,onOpenChange:O,whileElementsMounted:nr,middleware:[mr(5),gr({padding:10}),(t={apply:function(e){var t=e.rects,n=e.elements,r=e.availableHeight;Object.assign(n.floating.style,{maxHeight:"min(".concat(r,"px, ").concat(D[i],"px)"),maxWidth:"".concat(t.reference.width,"px")})},padding:10},{...sr(t),options:[t,undefined]})]}),F=L.refs,z=L.floatingStyles,B=L.context,V=(0,o.useRef)([]),W=(0,o.useRef)([]),U=(0,o.useRef)(!1),$=Oo(B,{event:"mousedown"}),K=jo(B),H=Ho(B,{role:"listbox"}),q=$o(B,{listRef:V,activeIndex:N,selectedIndex:M,onNavigate:A,loop:!0}),Y=function(e,t){var n;const{open:r,dataRef:i}=e,{listRef:s,activeIndex:a,onMatch:l,onTypingChange:c,enabled:u=!0,findMatch:d=null,resetMs:f=750,ignoreKeys:h=[],selectedIndex:p=null}=t,m=o.useRef(),g=o.useRef(""),v=o.useRef(null!=(n=null!=p?p:a)?n:-1),y=o.useRef(null),b=xr(l),x=xr(c),w=qr(d),E=qr(h);Ir((()=>{r&&(clearTimeout(m.current),y.current=null,g.current="")}),[r]),Ir((()=>{var e;r&&""===g.current&&(v.current=null!=(e=null!=p?p:a)?e:-1)}),[r,p,a]);const S=xr((e=>{e?i.current.typing||(i.current.typing=e,x(e)):i.current.typing&&(i.current.typing=e,x(e))})),_=xr((e=>{function t(e,t,n){const r=w.current?w.current(t,n):t.find((e=>0===(null==e?void 0:e.toLocaleLowerCase().indexOf(n.toLocaleLowerCase()))));return r?e.indexOf(r):-1}const n=s.current;if(g.current.length>0&&" "!==g.current[0]&&(-1===t(n,n,g.current)?S(!1):" "===e.key&&Qt(e)),null==n||E.current.includes(e.key)||1!==e.key.length||e.ctrlKey||e.metaKey||e.altKey)return;r&&" "!==e.key&&(Qt(e),S(!0)),n.every((e=>{var t,n;return!e||(null==(t=e[0])?void 0:t.toLocaleLowerCase())!==(null==(n=e[1])?void 0:n.toLocaleLowerCase())}))&&g.current===e.key&&(g.current="",v.current=y.current),g.current+=e.key,clearTimeout(m.current),m.current=setTimeout((()=>{g.current="",v.current=y.current,S(!1)}),f);const o=v.current,i=t(n,[...n.slice((o||0)+1),...n.slice(0,(o||0)+1)],g.current);-1!==i?(b(i),y.current=i):" "!==e.key&&(g.current="",S(!1))})),k=o.useMemo((()=>({onKeyDown:_})),[_]),C=o.useMemo((()=>({onKeyDown:_,onKeyUp(e){" "===e.key&&S(!1)}})),[_,S]);return o.useMemo((()=>u?{reference:k,floating:C}:{}),[u,k,C])}(B,{listRef:W,activeIndex:N,selectedIndex:M,onMatch:T?A:I,onTypingChange:function(e){U.current=e}}),G=Fo([K,H,q,$].concat(ah(m?[]:[Y]))),X=G.getReferenceProps,J=G.getFloatingProps,Z=G.getItemProps,Q=function(e,t){if(h)return function(e,t){var n,r=ah(null!==(n=C())&&void 0!==n?n:[]);-1===r.findIndex((function(e){return"object"===uh(e)?e[u]===t[u]:e===t}))&&(r.push(t),b||E(r),I(e),F.reference.current.focus(),O(!1),k(""),"function"==typeof l&&l(r))}(e,t);I(e),b||E(t),F.reference.current.focus(),O(!1),k(""),"function"==typeof l&&l(t)},ee=(0,o.useCallback)((function(e,t){V.current[e]=t}),[]);return React.createElement(ph.Provider,{value:{selectedIndex:M,setSelectedIndex:I,activeIndex:N,setActiveIndex:A,selected:w,setSelected:E,handleSelect:Q,combobox:m,sizeValue:i,multiple:h,onChange:l,isTypingRef:U,getItemProps:Z,onClickItem:function(e,t){Q(e,t)},onKeyDownItem:function(e,t,n){"Enter"===e.key&&(e.preventDefault(),Q(t,n))," "!==e.key||U.current||(e.preventDefault(),Q(t,n))},getValues:C,selectId:y,getReferenceProps:X,isOpen:T,value:s,updateListRef:ee,refs:F,listContentRef:W,by:u,getFloatingProps:J,floatingStyles:z,context:B,searchKeyword:_,setSearchKeyword:k,disabled:v}},d)};gh.Button=function(e){var t,n,r,i=e.children,s=e.icon,a=void 0===s?null:s,l=e.placeholder,c=void 0===l?"Select an option":l,u=e.optionIcon,d=void 0===u?null:u,f=e.displayBy,h=void 0===f?"name":f,p=e.label,m=mh(),g=m.sizeValue,v=m.getReferenceProps,y=m.getValues,b=m.selectId,x=m.refs,w=m.isOpen,E=m.multiple,S=m.combobox,_=m.setSelected,k=m.onChange,C=m.isControlled,P=m.disabled,T=m.by,O=null===(t={sm:"xs",md:"sm",lg:"md"})||void 0===t?void 0:t[g],R=(0,o.useCallback)((function(){if(a)return a;var e="text-field-placeholder group-disabled:text-icon-disabled";return S?React.createElement(Qf,{className:e}):React.createElement(eh,{className:e})}),[a]),N=(0,o.useCallback)((function(){var e=y();if(!e)return null;if("function"==typeof i){var t=fh({value:e},E?{onClose:A}:{});return i(t)}if(E)return e.map((function(e,t){return React.createElement(Ge,{icon:d,type:"rounded",key:t,size:O,onMouseDown:A(e),label:"object"===uh(e)?e[h]:e,closable:!0,disabled:P})}));var n="object"===uh(e)?e[h]:e;return(0,o.isValidElement)(i)&&(n=i),React.createElement("span",{className:te(nh[g].displaySelected,rh)},n)}),[y]),A=function(e){return function(t){var n;null==t||t.preventDefault(),null==t||t.stopPropagation();var r=ah(null!==(n=y())&&void 0!==n?n:[]),o=r.findIndex((function(t){return"object"===uh(t)?t[T]===e[T]:t===e}));-1!==o&&(r.splice(o,1),C||_(r),"function"==typeof k&&k(r))}};return React.createElement("div",{className:"flex flex-col items-start gap-1.5 [&_*]:box-border box-border"},React.createElement("label",{className:te(null===(n=nh[g])||void 0===n?void 0:n.label,"text-field-label"),htmlFor:b},p),React.createElement("button",sh({id:b,ref:x.setReference,className:te("flex items-center justify-between border border-solid w-full box-border transition-colors duration-150 bg-white","border focus-visible:outline-none border-solid border-field-border",!w&&"focus:ring-2 focus:ring-offset-4 focus:border-focus-border focus:ring-focus [&:hover:not(:focus):not(:disabled)]:border-border-strong",nh[g].selectButton,E&&nh[g].multiSelect,"group disabled:border-field-border-disabled [&:hover:has(:disabled)]:border-field-border-disabled"),"aria-labelledby":"select-label",tabIndex:0,disabled:P},v()),React.createElement("div",{className:te("flex-1 grid items-center justify-start gap-1.5 ",y()&&"flex flex-wrap")},N(),(E?!(null!==(r=y())&&void 0!==r&&r.length):!y())&&React.createElement("div",{className:te("[grid-area:1/1/2/3] text-field-input",nh[g].displaySelected,rh)},c)),React.createElement("div",{className:te("flex items-center [&>svg]:shrink-0",nh[g].icon)},R())))},gh.Options=function(e){var t=e.children,n=e.searchBy,r=void 0===n?"id":n,i=e.searchPlaceholder,s=void 0===i?"Search...":i,a=e.dropdownPortalRoot,l=void 0===a?null:a,c=e.dropdownPortalId,u=void 0===c?"":c,d=mh(),f=d.isOpen,h=d.context,p=d.refs,m=d.combobox,g=d.floatingStyles,v=d.getFloatingProps,y=d.sizeValue,b=d.setSearchKeyword,x=d.setActiveIndex,w=d.setSelectedIndex,E=d.value,S=d.selected,_=d.getValues,k=d.searchKeyword,C=d.listContentRef,P=d.by,T=(0,o.useMemo)((function(){var e=_(),n=0;return e&&(n=o.Children.toArray(t).findIndex((function(t){return"object"===uh(t.props.value)?t.props.value[P]===e[P]:t.props.value===e}))),-1===n?0:n}),[E,S,t]);(0,o.useLayoutEffect)((function(){x(T),w(T)}),[]);var O=(0,o.useMemo)((function(){return o.Children.map(t,(function(e,t){if(!(0,o.isValidElement)(e))return null;if(k){var n=e.props.value;if("object"===uh(n)){if(-1===n[r].toLowerCase().indexOf(k.toLowerCase()))return null}else if(-1===n.toLowerCase().indexOf(k.toLowerCase()))return null}return(0,o.cloneElement)(e,fh(fh({},e.props),{},{index:t}))}))}),[k,E,S,t]),R=o.Children.count(O);return(0,o.useEffect)((function(){C.current=[],o.Children.forEach(t,(function(e){if((0,o.isValidElement)(e)&&e.props.value){if(k){var t=e.props.value;if("object"===uh(t)){if(-1===t[r].toLowerCase().indexOf(k.toLowerCase()))return}else if(-1===t.toLowerCase().indexOf(k.toLowerCase()))return}C.current.push(e.props.value)}}))}),[k]),React.createElement(React.Fragment,null,f&&React.createElement(vo,{id:u,root:l},React.createElement(Co,{context:h,modal:!1},React.createElement("div",sh({ref:p.setFloating,className:te("box-border [&_*]:box-border w-full bg-white outline-none shadow-lg border border-solid border-border-subtle overflow-hidden",m&&"grid grid-cols-1 grid-rows-[auto_1fr] divide-y divide-x-0 divide-solid divide-border-subtle",nh[y].dropdown,!m&&"h-full"),style:fh({},g)},v()),m&&React.createElement("div",{className:te(nh[y].searchbarWrapper)},React.createElement(th,{className:te("text-icon-secondary shrink-0",nh[y].searchbarIcon)}),React.createElement("input",{className:te("px-1 w-full placeholder:text-field-placeholder border-0 focus:outline-none focus:shadow-none",nh[y].searchbar),type:"search",name:"keyword",placeholder:s,onChange:function(e){return b(e.target.value)},autoComplete:"off"})),React.createElement("div",{className:te("overflow-y-auto",!m&&"w-full h-full",nh[y].dropdownItemsWrapper)},!!R&&O,!R&&React.createElement("div",{className:"p-2 text-center text-base font-medium text-field-placeholder"},"No items found"))))))},gh.Option=function(e){var t=e.value,n=e.selected,r=e.children,i=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,oh),s=mh(),a=s.sizeValue,l=s.getItemProps,c=s.onKeyDownItem,u=s.onClickItem,d=s.activeIndex,f=s.selectedIndex,h=s.updateListRef,p=s.getValues,m=s.by,g=s.multiple,v=i.index,y=(0,o.useMemo)((function(){if(!g)return!1;var e=p();return!!e&&e.some((function(e){return"object"===uh(e)?e[m]===t[m]:e===t}))}),[t,p]),b=(0,o.useMemo)((function(){return"boolean"==typeof n?n:g?y:v===f}),[y,f,n]);return React.createElement("div",sh({className:te("w-full flex items-center justify-between text-text-primary hover:bg-button-tertiary-hover rounded-md transition-all duration-150 cursor-pointer",{sm:"py-1.5 px-2 text-sm font-normal",md:"p-2 text-base font-normal",lg:"p-2 text-base font-normal"}[a],v===d&&"bg-button-tertiary-hover"),ref:function(e){h(v,e)},role:"option",tabIndex:v===d?0:-1,"aria-selected":b&&v===d},l({onClick:function(){u(v,t)},onKeyDown:function(e){c(e,v,t)}})),React.createElement("span",{className:"w-full truncate"},r),b&&React.createElement(Ee,{className:te("text-icon-on-color-disabled",{sm:"size-4",md:"size-5",lg:"size-5"}[a])}))};var vh=gh,yh=["id","message","jsx"];function bh(e){return bh="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},bh(e)}function xh(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function wh(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?xh(Object(n),!0).forEach((function(t){Eh(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):xh(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Eh(e,t,n){return(t=_h(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Sh(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,_h(r.key),r)}}function _h(e){var t=function(e){if("object"!=bh(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=bh(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==bh(t)?t:t+""}function kh(e,t,n){(function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")})(e,t),t.set(e,n)}function Ch(e,t){return e.get(Th(e,t))}function Ph(e,t,n){return e.set(Th(e,t),n),n}function Th(e,t,n){if("function"==typeof e?e===t:e.has(t))return arguments.length<3?t:n;throw new TypeError("Private element is not present on this object")}var Oh=1,Rh=new WeakMap,Nh=new WeakMap,Ah=function(){return e=function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),kh(this,Rh,void 0),kh(this,Nh,void 0),Ph(Rh,this,[]),Ph(Nh,this,[])},t=[{key:"subscribe",value:function(e){var t=this;return Ch(Nh,this).push(e),function(){Ph(Nh,t,Ch(Nh,t).filter((function(t){return t!==e})))}}},{key:"notify",value:function(){var e=this;Ch(Nh,this).forEach((function(t){return t(Ch(Rh,e))}))}},{key:"publish",value:function(e){Ch(Nh,this).forEach((function(t){return t(e)}))}},{key:"add",value:function(e){Ch(Rh,this).push(e),this.publish(e)}},{key:"remove",value:function(e){return Ph(Rh,this,Ch(Rh,this).filter((function(t){return t.id!==e}))),e}},{key:"create",value:function(e){var t=this,n=e.id,r=void 0===n?void 0:n,o=e.message,i=void 0===o?"":o,s=e.jsx,a=void 0===s?void 0:s,l=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,yh);if(i||"function"==typeof a){var c="number"==typeof r?r:Oh++,u=Ch(Rh,this).find((function(e){return e.id===c}));return u&&Ph(Rh,this,Ch(Rh,this).map((function(e){return e.id===c?(t.publish(wh(wh({},e),{},{title:i,jsx:a},l)),wh(wh({},e),{},{title:i,jsx:a},l)):e}))),this.add(wh({id:c,title:i,jsx:a},l)),c}}},{key:"update",value:function(e,t){var n=this,r=t.render,o=void 0===r?void 0:r,i=t;switch(bh(o)){case"function":i=wh({jsx:o},t);break;case"string":i=wh({title:o},t)}Ph(Rh,this,Ch(Rh,this).map((function(t){return t.id===e?(n.publish(wh(wh({},t),i)),wh(wh({},t),i)):t})))}},{key:"dismiss",value:function(e){var t=this;return e||Ch(Rh,this).forEach((function(e){return Ch(Nh,t).forEach((function(t){return t({id:e.id,dismiss:!0})}))})),Ch(Nh,this).forEach((function(t){return t({id:e,dismiss:!0})})),e}},{key:"history",value:function(){return Ch(Rh,this)}},{key:"default",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.create(wh({message:e,type:"neutral"},t))}},{key:"success",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.create(wh({message:e,type:"success"},t))}},{key:"error",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.create(wh({message:e,type:"error"},t))}},{key:"warning",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.create(wh({message:e,type:"warning"},t))}},{key:"info",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.create(wh({message:e,type:"info"},t))}},{key:"custom",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.create(wh({jsx:e,type:"custom"},t))}}],t&&Sh(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}(),jh=new Ah,Mh=Object.seal(Object.assign((function(e,t){return jh.default(e,t)}),{success:jh.success.bind(jh),error:jh.error.bind(jh),warning:jh.warning.bind(jh),info:jh.info.bind(jh),custom:jh.custom.bind(jh),dismiss:jh.dismiss.bind(jh),update:jh.update.bind(jh)},{getHistory:jh.history.bind(jh)})),Ih=!1,Dh={"top-left":"top-0 bottom-0 left-0 justify-start items-start","top-right":"top-0 bottom-0 right-0 justify-start items-end","bottom-left":"top-0 bottom-0 left-0 justify-end items-start","bottom-right":"top-0 bottom-0 right-0 justify-end items-end"},Lh={neutral:"border-alert-border-neutral bg-alert-background-neutral",custom:"border-alert-border-neutral bg-alert-background-neutral",info:"border-alert-border-info bg-alert-background-info",success:"border-alert-border-green bg-alert-background-green",warning:"border-alert-border-warning bg-alert-background-warning",error:"border-alert-border-danger bg-alert-background-danger"},Fh="bg-background-inverse border-background-inverse",zh={light:"text-icon-secondary",dark:"text-icon-inverse"};class Bh extends o.Component{getSnapshotBeforeUpdate(e){const t=this.props.childRef.current;if(t&&e.isPresent&&!this.props.isPresent){const e=this.props.sizeRef.current;e.height=t.offsetHeight||0,e.width=t.offsetWidth||0,e.top=t.offsetTop,e.left=t.offsetLeft}return null}componentDidUpdate(){}render(){return this.props.children}}function Vh({children:e,isPresent:t}){const n=(0,o.useId)(),r=(0,o.useRef)(null),i=(0,o.useRef)({width:0,height:0,top:0,left:0}),{nonce:s}=(0,o.useContext)(Dd);return(0,o.useInsertionEffect)((()=>{const{width:e,height:o,top:a,left:l}=i.current;if(t||!r.current||!e||!o)return;r.current.dataset.motionPopId=n;const c=document.createElement("style");return s&&(c.nonce=s),document.head.appendChild(c),c.sheet&&c.sheet.insertRule(`\n          [data-motion-pop-id="${n}"] {\n            position: absolute !important;\n            width: ${e}px !important;\n            height: ${o}px !important;\n            top: ${a}px !important;\n            left: ${l}px !important;\n          }\n        `),()=>{document.head.removeChild(c)}}),[t]),(0,iu.jsx)(Bh,{isPresent:t,childRef:r,sizeRef:i,children:o.cloneElement(e,{ref:r})})}const Wh=({children:e,initial:t,isPresent:n,onExitComplete:r,custom:i,presenceAffectsLayout:s,mode:a})=>{const l=cf(Uh),c=(0,o.useId)(),u=(0,o.useMemo)((()=>({id:c,initial:t,isPresent:n,custom:i,onExitComplete:e=>{l.set(e,!0);for(const e of l.values())if(!e)return;r&&r()},register:e=>(l.set(e,!1),()=>l.delete(e))})),s?[Math.random()]:[n]);return(0,o.useMemo)((()=>{l.forEach(((e,t)=>l.set(t,!1)))}),[n]),o.useEffect((()=>{!n&&!l.size&&r&&r()}),[n]),"popLayout"===a&&(e=(0,iu.jsx)(Vh,{isPresent:n,children:e})),(0,iu.jsx)(su.Provider,{value:u,children:e})};function Uh(){return new Map}const $h=e=>e.key||"";function Kh(e){const t=[];return o.Children.forEach(e,(e=>{(0,o.isValidElement)(e)&&t.push(e)})),t}const Hh=({children:e,exitBeforeEnter:t,custom:n,initial:r=!0,onExitComplete:i,presenceAffectsLayout:s=!0,mode:a="sync"})=>{Xi(!t,"Replace exitBeforeEnter with mode='wait'");const l=(0,o.useMemo)((()=>Kh(e)),[e]),c=l.map($h),u=(0,o.useRef)(!0),d=(0,o.useRef)(l),f=cf((()=>new Map)),[h,p]=(0,o.useState)(l),[m,g]=(0,o.useState)(l);zd((()=>{u.current=!1,d.current=l;for(let e=0;e<m.length;e++){const t=$h(m[e]);c.includes(t)?f.delete(t):!0!==f.get(t)&&f.set(t,!1)}}),[m,c.length,c.join("-")]);const v=[];if(l!==h){let e=[...l];for(let t=0;t<m.length;t++){const n=m[t],r=$h(n);c.includes(r)||(e.splice(t,0,n),v.push(n))}return"wait"===a&&v.length&&(e=v),g(Kh(e)),void p(l)}const{forceRender:y}=(0,o.useContext)(au);return(0,iu.jsx)(iu.Fragment,{children:m.map((e=>{const t=$h(e),o=l===m||c.includes(t);return(0,iu.jsx)(Wh,{isPresent:o,initial:!(u.current&&!r)&&void 0,custom:o?void 0:n,presenceAffectsLayout:s,mode:a,onExitComplete:o?void 0:()=>{if(!f.has(t))return;f.set(t,!0);let e=!0;f.forEach((t=>{t||(e=!1)})),e&&(null==y||y(),g(d.current),i&&i())},children:e},t)}))})};function qh(e){return qh="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},qh(e)}function Yh(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Gh(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Yh(Object(n),!0).forEach((function(t){Xh(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Yh(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Xh(e,t,n){return(t=function(e){var t=function(e){if("object"!=qh(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=qh(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==qh(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Jh(e,t){if(e){if("string"==typeof e)return Zh(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Zh(e,t):void 0}}function Zh(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var Qh,ep=function(e){var t=e.toastItem,n=e.title,r=void 0===n?null:n,i=e.content,s=void 0===i?null:i,a=e.autoDismiss,l=void 0===a||a,c=e.dismissAfter,u=void 0===c?5e3:c,d=e.theme,f=void 0===d?"light":d,h=e.design,p=void 0===h?"stack":h,m=e.icon,g=void 0===m?null:m,v=e.variant,y=void 0===v?"neutral":v,b=e.removeToast,x=(0,o.useRef)(0),w=(0,o.useRef)(0),E=(0,o.useRef)(0),S=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:u;if(l&&!(u<0))return x.current=(new Date).getTime(),setTimeout((function(){b(e.id)}),t)};(0,o.useEffect)((function(){var e=u;return E.current=S(t,e),function(){clearTimeout(E.current)}}),[]),(0,o.useEffect)((function(){null!=t&&t.dismiss&&b(t.id)}),[t]);var _,k,C,P,T,O,R,N,A,j,M=function(){var e,n;null==t||null===(e=t.action)||void 0===e||null===(n=e.onClick)||void 0===n||n.call(e,(function(){return b(t.id)}))},I=null;return"stack"===p&&(I=React.createElement("div",{className:te("flex items-center justify-start p-4 gap-2 relative border border-solid rounded-md shadow-lg","dark"===f?Fh:null===(_=Lh)||void 0===_?void 0:_[y],"w-[22.5rem]"),onMouseEnter:function(){clearTimeout(E.current),w.current=(new Date).getTime()},onMouseLeave:function(){E.current=S(t,u-(w.current-x.current))}},"custom"!==t.type?React.createElement(React.Fragment,null,React.createElement("div",{className:"self-start flex items-center justify-center [&_svg]:size-5 shrink-0"},ti({variant:y,icon:g,theme:f})),React.createElement("div",{className:"flex flex-col items-start justify-start gap-0.5"},ri({title:r,theme:f}),oi({content:s,theme:f}),(null==t||null===(k=t.action)||void 0===k?void 0:k.label)&&"function"==typeof(null==t||null===(C=t.action)||void 0===C?void 0:C.onClick)&&React.createElement("div",{className:"mt-2.5"},ni({actionLabel:null==t||null===(P=t.action)||void 0===P?void 0:P.label,actionType:null!==(T=null==t||null===(O=t.action)||void 0===O?void 0:O.type)&&void 0!==T?T:"button",onAction:M,theme:f}))),React.createElement("div",{className:"absolute right-4 top-4 [&_svg]:size-5"},React.createElement("button",{className:te("bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer",null!==(R=zh[f])&&void 0!==R?R:zh.light),onClick:function(){return b(t.id)}},React.createElement(He,null)))):null==t||null===(N=t.jsx)||void 0===N?void 0:N.call(t,{close:function(){return b(t.id)},action:null!=t&&t.action?Gh(Gh({},null==t?void 0:t.action),{},{onClick:M}):null}))),"inline"===p&&(I=React.createElement("div",{className:te("flex items-center justify-start p-3 gap-2 relative border border-solid rounded-md shadow-lg","dark"===f?Fh:null===(A=Lh)||void 0===A?void 0:A[y],"lg:w-[47.5rem] w-full")},React.createElement("div",{className:"self-start flex items-center justify-center [&_svg]:size-5 shrink-0"},ti({variant:y,icon:g,theme:f})),React.createElement("div",{className:"flex items-start justify-start gap-1 mr-10 [&>span:first-child]:shrink-0"},ri({title:r,theme:f}),oi({content:s,theme:f})),React.createElement("div",{className:"absolute right-3 top-3 [&_svg]:size-5"},React.createElement("button",{className:te("bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer",null!==(j=zh[f])&&void 0!==j?j:zh.light),onClick:function(){return b(t.id)}},React.createElement(He,null))))),I},tp=(Qh=function(e){var t,n,r,i=e.position,s=void 0===i?"top-right":i,a=e.design,l=void 0===a?"stack":a,c=e.theme,u=void 0===c?"light":c,d=e.className,f=void 0===d?"":d,h=e.autoDismiss,p=void 0===h||h,m=e.dismissAfter,g=void 0===m?5e3:m,v=(n=(0,o.useState)([]),r=2,function(e){if(Array.isArray(e))return e}(n)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(n,r)||Jh(n,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),y=v[0],b=v[1];(0,o.useEffect)((function(){jh.subscribe((function(e){null!=e&&e.dismiss?b((function(t){return t.map((function(t){return t.id===e.id?Gh(Gh({},t),{},{dismiss:!0}):t}))})):setTimeout((function(){(0,zn.flushSync)((function(){return b((function(t){return-1!==t.findIndex((function(t){return t.id===e.id}))?t.map((function(t){return t.id===e.id?Gh(Gh({},t),e):t})):[].concat(function(e){return function(e){if(Array.isArray(e))return Zh(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||Jh(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(t),[e])}))}))}))}))}),[]);var x=function(e){b((function(t){return t.filter((function(t){return t.id!==e}))}))};return React.createElement("ul",{className:te("fixed flex flex-col list-none z-20 p-10 pointer-events-none [&>li]:pointer-events-auto gap-3",null!==(t=Dh[s])&&void 0!==t?t:Dh["top-right"],f)},React.createElement(Hh,{initial:!1},y.map((function(e){var t,n,r,o,i;return React.createElement(Hf.li,{key:e.id,positionTransition:!0,initial:{opacity:0,y:50,scale:.7},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,scale:.6,transition:{duration:.15}},layoutId:"toast-".concat(e.id)},React.createElement(ep,{toastItem:e,title:e.title,content:null==e?void 0:e.description,icon:null!==(t=null==e?void 0:e.icon)&&void 0!==t?t:null,design:null!==(n=null==e?void 0:e.design)&&void 0!==n?n:l,autoDismiss:null!==(r=null==e?void 0:e.autoDismiss)&&void 0!==r?r:p,dismissAfter:null!==(o=null==e?void 0:e.dismissAfter)&&void 0!==o?o:g,removeToast:x,variant:e.type,theme:null!==(i=null==e?void 0:e.theme)&&void 0!==i?i:u}))}))))},(0,o.memo)((function(e){var t=e.singleTon;return Ih&&t?null:(Ih=!0,React.createElement(Qh,e))}))),np={sm:{1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5",6:"grid-cols-6",7:"grid-cols-7",8:"grid-cols-8",9:"grid-cols-9",10:"grid-cols-10",11:"grid-cols-11",12:"grid-cols-12"},md:{1:"md:grid-cols-1",2:"md:grid-cols-2",3:"md:grid-cols-3",4:"md:grid-cols-4",5:"md:grid-cols-5",6:"md:grid-cols-6",7:"md:grid-cols-7",8:"md:grid-cols-8",9:"md:grid-cols-9",10:"md:grid-cols-10",11:"md:grid-cols-11",12:"md:grid-cols-12"},lg:{1:"lg:grid-cols-1",2:"lg:grid-cols-2",3:"lg:grid-cols-3",4:"lg:grid-cols-4",5:"lg:grid-cols-5",6:"lg:grid-cols-6",7:"lg:grid-cols-7",8:"lg:grid-cols-8",9:"lg:grid-cols-9",10:"lg:grid-cols-10",11:"lg:grid-cols-11",12:"lg:grid-cols-12"}},rp={sm:{xs:"gap-2",sm:"gap-4",md:"gap-5",lg:"gap-6",xl:"gap-6","2xl":"gap-8"},md:{xs:"md:gap-2",sm:"md:gap-4",md:"md:gap-5",lg:"md:gap-6",xl:"md:gap-6","2xl":"md:gap-8"},lg:{xs:"lg:gap-2",sm:"lg:gap-4",md:"lg:gap-5",lg:"lg:gap-6",xl:"lg:gap-6","2xl":"lg:gap-8"}},op={sm:{xs:"gap-x-2",sm:"gap-x-4",md:"gap-x-5",lg:"gap-x-6",xl:"gap-x-6","2xl":"gap-x-8"},md:{xs:"md:gap-x-2",sm:"md:gap-x-4",md:"md:gap-x-5",lg:"md:gap-x-6",xl:"md:gap-x-6","2xl":"md:gap-x-8"},lg:{xs:"lg:gap-x-2",sm:"lg:gap-x-4",md:"lg:gap-x-5",lg:"lg:gap-x-6",xl:"lg:gap-x-6","2xl":"lg:gap-x-8"}},ip={sm:{xs:"gap-y-2",sm:"gap-y-4",md:"gap-y-5",lg:"gap-y-6",xl:"gap-y-6","2xl":"gap-y-8"},md:{xs:"md:gap-y-2",sm:"md:gap-y-4",md:"md:gap-y-5",lg:"md:gap-y-6",xl:"md:gap-y-6","2xl":"md:gap-y-8"},lg:{xs:"lg:gap-y-2",sm:"lg:gap-y-4",md:"lg:gap-y-5",lg:"lg:gap-y-6",xl:"lg:gap-y-6","2xl":"lg:gap-y-8"}},sp={sm:{1:"col-span-1",2:"col-span-2",3:"col-span-3",4:"col-span-4",5:"col-span-5",6:"col-span-6",7:"col-span-7",8:"col-span-8",9:"col-span-9",10:"col-span-10",11:"col-span-11",12:"col-span-12"},md:{1:"md:col-span-1",2:"md:col-span-2",3:"md:col-span-3",4:"md:col-span-4",5:"md:col-span-5",6:"md:col-span-6",7:"md:col-span-7",8:"md:col-span-8",9:"md:col-span-9",10:"md:col-span-10",11:"md:col-span-11",12:"md:col-span-12"},lg:{1:"lg:col-span-1",2:"lg:col-span-2",3:"lg:col-span-3",4:"lg:col-span-4",5:"lg:col-span-5",6:"lg:col-span-6",7:"lg:col-span-7",8:"lg:col-span-8",9:"lg:col-span-9",10:"lg:col-span-10",11:"lg:col-span-11",12:"lg:col-span-12"}},ap={sm:{1:"col-start-1",2:"col-start-2",3:"col-start-3",4:"col-start-4",5:"col-start-5",6:"col-start-6",7:"col-start-7",8:"col-start-8",9:"col-start-9",10:"col-start-10",11:"col-start-11",12:"col-start-12"},md:{1:"md:col-start-1",2:"md:col-start-2",3:"md:col-start-3",4:"md:col-start-4",5:"md:col-start-5",6:"md:col-start-6",7:"md:col-start-7",8:"md:col-start-8",9:"md:col-start-9",10:"md:col-start-10",11:"md:col-start-11",12:"md:col-start-12"},lg:{1:"lg:col-start-1",2:"lg:col-start-2",3:"lg:col-start-3",4:"lg:col-start-4",5:"lg:col-start-5",6:"lg:col-start-6",7:"lg:col-start-7",8:"lg:col-start-8",9:"lg:col-start-9",10:"lg:col-start-10",11:"lg:col-start-11",12:"lg:col-start-12"}},lp={sm:{row:"grid-flow-row",column:"grid-flow-col","row-dense":"grid-flow-row-dense","column-dense":"grid-flow-col-dense"},md:{row:"md:grid-flow-row",column:"md:grid-flow-col","row-dense":"md:grid-flow-row-dense","column-dense":"md:grid-flow-col-dense"},lg:{row:"lg:grid-flow-row",column:"lg:grid-flow-col","row-dense":"lg:grid-flow-row-dense","column-dense":"lg:grid-flow-col-dense"}},cp={sm:{normal:"justify-normal",start:"justify-start",end:"justify-end",center:"justify-center",between:"justify-between",around:"justify-around",evenly:"justify-evenly",stretch:"justify-stretch"},md:{normal:"md:justify-normal",start:"md:justify-start",end:"md:justify-end",center:"md:justify-center",between:"md:justify-between",around:"md:justify-around",evenly:"md:justify-evenly",stretch:"md:justify-stretch"},lg:{normal:"lg:justify-normal",start:"lg:justify-start",end:"lg:justify-end",center:"lg:justify-center",between:"lg:justify-between",around:"lg:justify-around",evenly:"lg:justify-evenly",stretch:"lg:justify-stretch"}},up={sm:{start:"items-start",end:"items-end",center:"items-center",baseline:"items-baseline",stretch:"items-stretch"},md:{start:"md:items-start",end:"md:items-end",center:"md:items-center",baseline:"md:items-baseline",stretch:"md:items-stretch"},lg:{start:"lg:items-start",end:"lg:items-end",center:"lg:items-center",baseline:"lg:items-baseline",stretch:"lg:items-stretch"}},dp={sm:{start:"self-start",end:"self-end",center:"self-center",baseline:"self-baseline",stretch:"self-stretch"},md:{start:"md:self-start",end:"md:self-end",center:"md:self-center",baseline:"md:self-baseline",stretch:"md:self-stretch"},lg:{start:"lg:self-start",end:"lg:self-end",center:"lg:self-center",baseline:"lg:self-baseline",stretch:"lg:self-stretch"}},fp={sm:{auto:"justify-self-auto",start:"justify-self-start",end:"justify-self-end",center:"justify-self-center",baseline:"justify-self-baseline",stretch:"justify-self-stretch"},md:{auto:"md:justify-self-auto",start:"md:justify-self-start",end:"md:justify-self-end",center:"md:justify-self-center",baseline:"md:justify-self-baseline",stretch:"md:justify-self-stretch"},lg:{auto:"lg:justify-self-auto",start:"lg:justify-self-start",end:"lg:justify-self-end",center:"lg:justify-self-center",baseline:"lg:justify-self-baseline",stretch:"lg:justify-self-stretch"}},hp={sm:{row:"flex-row","row-reverse":"flex-row-reverse",column:"flex-col","column-reverse":"flex-col-reverse"},md:{row:"md:flex-row","row-reverse":"md:flex-row-reverse",column:"md:flex-col","column-reverse":"md:flex-col-reverse"},lg:{row:"lg:flex-row","row-reverse":"lg:flex-row-reverse",column:"lg:flex-col","column-reverse":"lg:flex-col-reverse"}},pp={sm:{wrap:"flex-wrap","wrap-reverse":"flex-wrap-reverse",nowrap:"flex-nowrap"},md:{wrap:"md:flex-wrap","wrap-reverse":"md:flex-wrap-reverse",nowrap:"md:flex-nowrap"},lg:{wrap:"lg:flex-wrap","wrap-reverse":"lg:flex-wrap-reverse",nowrap:"lg:flex-nowrap"}},mp={sm:{1:"w-full",2:"w-1/2",3:"w-1/3",4:"w-1/4",5:"w-1/5",6:"w-1/6",7:"w-1/7",8:"w-1/8",9:"w-1/9",10:"w-1/10",11:"w-1/11",12:"w-1/12"},md:{1:"md:w-full",2:"md:w-1/2",3:"md:w-1/3",4:"md:w-1/4",5:"md:w-1/5",6:"md:w-1/6",7:"md:w-1/7",8:"md:w-1/8",9:"md:w-1/9",10:"md:w-1/10",11:"md:w-1/11",12:"md:w-1/12"},lg:{1:"lg:w-full",2:"lg:w-1/2",3:"lg:w-1/3",4:"lg:w-1/4",5:"lg:w-1/5",6:"lg:w-1/6",7:"lg:w-1/7",8:"lg:w-1/8",9:"lg:w-1/9",10:"lg:w-1/10",11:"lg:w-1/11",12:"lg:w-1/12"}},gp={sm:{1:"order-1",2:"order-2",3:"order-3",4:"order-4",5:"order-5",6:"order-6",7:"order-7",8:"order-8",9:"order-9",10:"order-10",11:"order-11",12:"order-12",first:"order-first",last:"order-last",none:"order-none"},md:{1:"md:order-1",2:"md:order-2",3:"md:order-3",4:"md:order-4",5:"md:order-5",6:"md:order-6",7:"md:order-7",8:"md:order-8",9:"md:order-9",10:"md:order-10",11:"md:order-11",12:"md:order-12",first:"md:order-first",last:"md:order-last",none:"md:order-none"},lg:{1:"lg:order-1",2:"lg:order-2",3:"lg:order-3",4:"lg:order-4",5:"lg:order-5",6:"lg:order-6",7:"lg:order-7",8:"lg:order-8",9:"lg:order-9",10:"lg:order-10",11:"lg:order-11",12:"lg:order-12",first:"lg:order-first",last:"lg:order-last",none:"lg:order-none"}},vp={sm:{0:"grow-0",1:"grow"},md:{0:"md:grow-0",1:"md:grow"},lg:{0:"lg:grow-0",1:"lg:grow"}},yp={sm:{0:"shrink-0",1:"shrink"},md:{0:"md:shrink-0",1:"md:shrink"},lg:{0:"lg:shrink-0",1:"lg:shrink"}};function bp(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function xp(e){return xp="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},xp(e)}var wp=function(e,t,n){var r,o,i,s,a,l,c,u,d=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"sm",f=[];switch(xp(e)){case"object":for(var h=0,p=Object.entries(e);h<p.length;h++){var m,g,v,y,b=(c=p[h],u=2,function(e){if(Array.isArray(e))return e}(c)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(c,u)||function(e,t){if(e){if("string"==typeof e)return bp(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?bp(e,t):void 0}}(c,u)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),x=b[0],w=b[1];t[x]&&f.push(null!==(m=null!==(g=null==t||null===(v=t[x])||void 0===v?void 0:v[w])&&void 0!==g?g:null==t||null===(y=t[x])||void 0===y?void 0:y[null==n?void 0:n[x]])&&void 0!==m?m:"")}break;case"string":case"number":var E=d;f.push(null!==(r=null!==(o=null==t||null===(i=t[E])||void 0===i?void 0:i[e])&&void 0!==o?o:null==t||null===(s=t[E])||void 0===s?void 0:s[null==n?void 0:n[E]])&&void 0!==r?r:"");break;default:f.push(null!==(a=null==t||null===(l=t[d])||void 0===l?void 0:l[n])&&void 0!==a?a:"")}return f.join(" ")},Ep=["className","cols","gap","gapX","gapY","align","justify","gridFlow","colsSubGrid","rowsSubGrid","autoRows","autoCols","children"],Sp=["className","children","colSpan","colStart","alignSelf","justifySelf"];function _p(){return _p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_p.apply(null,arguments)}function kp(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var Cp=function(e){var t=e.className,n=e.cols,r=e.gap,o=e.gapX,s=e.gapY,a=e.align,l=e.justify,c=e.gridFlow,u=void 0===c?"":c,d=e.colsSubGrid,f=void 0!==d&&d,h=e.rowsSubGrid,p=void 0!==h&&h,m=e.autoRows,g=void 0!==m&&m,v=e.autoCols,y=void 0!==v&&v,b=e.children,x=kp(e,Ep),w=wp(n,np,1),E=wp(r,rp,"sm"),S=wp(o,op,""),_=wp(s,ip,""),k=wp(a,up,""),C=wp(l,cp,""),P=wp(u,lp,"");return i().createElement("div",_p({className:te("grid",{"grid-cols-subgrid":f,"grid-rows-subgrid":p,"auto-cols-auto":y,"auto-rows-auto":g},w,E,S,_,k,C,P,t)},x),b)};Object.assign(Cp,{Item:function(e){var t=e.className,n=e.children,r=e.colSpan,o=e.colStart,s=e.alignSelf,a=e.justifySelf,l=kp(e,Sp),c=wp(r,sp,0),u=wp(o,ap,0),d=wp(s,dp,""),f=wp(a,fp,"");return i().createElement("div",_p({className:te(c,u,d,f,t)},l),n)}});var Pp=Cp,Tp=["containerType","gap","gapX","gapY","direction","justify","align","wrap","cols","className","children"],Op=["containerType"],Rp=["grow","shrink","order","alignSelf","justifySelf","className","children"];function Np(){return Np=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Np.apply(null,arguments)}function Ap(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var jp=(0,o.createContext)(),Mp=function(e){var t=e.containerType,n=void 0===t?"flex":t,r=e.gap,o=void 0===r?"sm":r,s=e.gapX,a=void 0===s?"":s,l=e.gapY,c=void 0===l?"":l,u=e.direction,d=void 0===u?"":u,f=e.justify,h=void 0===f?"":f,p=e.align,m=void 0===p?"":p,g=e.wrap,v=e.cols,y=void 0===v?"":v,b=e.className,x=e.children,w=Ap(e,Tp);if("grid"===n){var E=e.containerType,S=Ap(e,Op);return i().createElement(jp.Provider,{value:{containerType:E}},i().createElement(Pp,S))}var _=wp(g,pp,""),k=wp(o,rp,"sm"),C=wp(a,op,""),P=wp(c,ip,""),T=wp(d,hp,""),O=wp(h,cp,""),R=wp(m,up,""),N=te("flex",_,k,C,P,T,O,R,b);return i().createElement(jp.Provider,{value:{containerType:n,cols:y}},"grid"===n?i().createElement(Pp,e):i().createElement("div",Np({className:N},w),x))};Mp.Item=function(e){var t=e.grow,n=e.shrink,r=e.order,s=e.alignSelf,a=e.justifySelf,l=e.className,c=e.children,u=Ap(e,Rp),d=(0,o.useContext)(jp),f=d.containerType,h=d.cols;if("grid"===f){var p=Np({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(e),e));return i().createElement(Pp.Item,p)}var m=wp(s,dp,""),g=wp(a,fp,""),v=wp(t,vp,0),y=wp(n,yp,0),b=wp(r,gp,0),x=wp(h,mp,1);return i().createElement("div",Np({className:te("box-border",v,y,b,m,g,x,l)},u),c)},Mp.displayName="Container",Mp.Item.displayName="Container.Item";var Ip,Dp=Mp,Lp=function(e){var t,n,r,o,i,s,a=e.design,l=void 0===a?"inline":a,c=e.theme,u=void 0===c?"light":c,d=e.variant,f=void 0===d?"neutral":d,h=e.className,p=void 0===h?"":h,m=e.title,g=void 0===m?"Title":m,v=e.content,y=void 0===v?"Description":v,b=e.icon,x=void 0===b?null:b,w=e.onClose,E=void 0===w?function(){}:w,S=e.action,_=void 0===S?{label:"Action",onClick:function(){},type:"link"}:S,k=function(){E()},C="lg:w-[47.5rem] w-full",P={neutral:"border-alert-border-neutral bg-alert-background-neutral",custom:"border-alert-border-neutral bg-alert-background-neutral",info:"border-alert-border-info bg-alert-background-info",success:"border-alert-border-green bg-alert-background-green",warning:"border-alert-border-warning bg-alert-background-warning",error:"border-alert-border-danger bg-alert-background-danger"},T="bg-background-inverse border-background-inverse",O={light:"text-icon-secondary",dark:"text-icon-inverse"},R=function(){var e;null==_||null===(e=_.onClick)||void 0===e||e.call(_,(function(){return k()}))};return"stack"===l?React.createElement("div",{className:te("flex items-center justify-start p-4 gap-2 relative border border-solid rounded-md shadow-lg","dark"===u?T:null===(o=P)||void 0===o?void 0:o[f],C,p)},React.createElement(React.Fragment,null,React.createElement("div",{className:"self-start flex items-center justify-center [&_svg]:size-5 shrink-0"},ti({variant:f,icon:x,theme:u})),React.createElement("div",{className:"flex flex-col items-start justify-start gap-0.5"},ri({title:g,theme:u}),oi({content:y,theme:u}),(null==_?void 0:_.label)&&"function"==typeof(null==_?void 0:_.onClick)&&React.createElement("div",{className:"mt-2.5"},ni({actionLabel:null==_?void 0:_.label,actionType:null!==(i=null==_?void 0:_.type)&&void 0!==i?i:"button",onAction:R,theme:u}))),React.createElement("div",{className:"absolute right-4 top-4 [&_svg]:size-5"},React.createElement("button",{className:te("bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer",null!==(s=O[u])&&void 0!==s?s:O.light),onClick:function(){return k()}},React.createElement(He,null))))):React.createElement("div",{className:te("flex items-center justify-between p-3 gap-2 relative border border-solid rounded-md shadow-lg","dark"===u?T:null===(t=P)||void 0===t?void 0:t[f],C,p)},React.createElement("div",{className:"flex items-center justify-start gap-2"},React.createElement("div",{className:"self-start flex items-center justify-center [&_svg]:size-5 shrink-0"},ti({variant:f,icon:x,theme:u})),React.createElement("div",{className:"flex items-start justify-start gap-1 mr-10 [&>span:first-child]:shrink-0"},ri({title:g,theme:u}),oi({content:y,theme:u}))),React.createElement("div",{className:"flex items-center justify-start gap-4 [&_svg]:size-5"},(null==_?void 0:_.label)&&"function"==typeof(null==_?void 0:_.onClick)&&React.createElement("div",{className:"flex"},ni({actionLabel:null==_?void 0:_.label,actionType:null!==(n=null==_?void 0:_.type)&&void 0!==n?n:"button",onAction:R,theme:u})),React.createElement("button",{className:te("bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer",null!==(r=O[u])&&void 0!==r?r:O.light),onClick:function(){return k()}},React.createElement(He,null))))},Fp=(Ip=function(e){const t=new URLSearchParams;t.append("code",e);for(let e=1;e<arguments.length;e++)t.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)},Ip&&Ip.__esModule&&Object.prototype.hasOwnProperty.call(Ip,"default")?Ip.default:Ip);const zp=(0,o.createContext)(null);function Bp(){const e=(0,o.useContext)(zp);return null==e&&Fp(8),e}function Vp({defaultSelection:e}){const[t]=Bp();return(0,o.useEffect)((()=>{t.focus((()=>{const e=document.activeElement,n=t.getRootElement();null===n||null!==e&&n.contains(e)||n.focus({preventScroll:!0})}),{defaultSelection:e})}),[e,t]),null}const Wp={},Up={},$p={},Kp={},Hp={},qp={},Yp={},Gp={},Xp={},Jp={},Zp={},Qp={},em={},tm={},nm={},rm={},om={},im={},sm={},am={},lm={},cm={},um={},dm={},fm={},hm={},pm={},mm={},gm={},vm={},ym={},bm={},xm={},wm={},Em={},Sm={},_m={},km={},Cm={},Pm={},Tm="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,Om=Tm&&"documentMode"in document?document.documentMode:null,Rm=Tm&&/Mac|iPod|iPhone|iPad/.test(navigator.platform),Nm=Tm&&/^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent),Am=!(!Tm||!("InputEvent"in window)||Om)&&"getTargetRanges"in new window.InputEvent("input"),jm=Tm&&/Version\/[\d.]+.*Safari/.test(navigator.userAgent),Mm=Tm&&/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream,Im=Tm&&/Android/.test(navigator.userAgent),Dm=Tm&&/^(?=.*Chrome).*/i.test(navigator.userAgent),Lm=Tm&&Im&&Dm,Fm=Tm&&/AppleWebKit\/[\d.]+/.test(navigator.userAgent)&&!Dm,zm=1,Bm=3,Vm=0,Wm=2,Um=0,$m=1,Km=2,Hm=4,qm=8,Ym=3|Hm|qm|240,Gm=1,Xm=2,Jm=3,Zm=4,Qm=5,eg=6,tg=jm||Mm||Fm?" ":"​",ng="\n\n",rg=Nm?" ":tg,og="֑-߿יִ-﷽ﹰ-ﻼ",ig="A-Za-zÀ-ÖØ-öø-ʸ̀-֐ࠀ-῿‎Ⰰ-﬜︀-﹯﻽-￿",sg=new RegExp("^[^"+ig+"]*["+og+"]"),ag=new RegExp("^[^"+og+"]*["+ig+"]"),lg={bold:1,code:16,highlight:128,italic:2,strikethrough:Hm,subscript:32,superscript:64,underline:qm},cg={directionless:1,unmergeable:2},ug={center:Xm,end:eg,justify:Zm,left:Gm,right:Jm,start:Qm},dg={[Xm]:"center",[eg]:"end",[Zm]:"justify",[Gm]:"left",[Jm]:"right",[Qm]:"start"},fg={normal:0,segmented:2,token:1},hg={[Um]:"normal",[Km]:"segmented",[$m]:"token"};var pg,mg=(pg=function(e){const t=new URLSearchParams;t.append("code",e);for(let e=1;e<arguments.length;e++)t.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)},pg&&pg.__esModule&&Object.prototype.hasOwnProperty.call(pg,"default")?pg.default:pg);function gg(...e){const t=[];for(const n of e)if(n&&"string"==typeof n)for(const[e]of n.matchAll(/\S+/g))t.push(e);return t}const vg=100;let yg=!1,bg=0;function xg(e){bg=e.timeStamp}function wg(e,t,n){return t.__lexicalLineBreak===e||void 0!==e[`__lexicalKey_${n._key}`]}function Eg(e,t,n){const r=Rv(n._window);let o=null,i=null;null!==r&&r.anchorNode===e&&(o=r.anchorOffset,i=r.focusOffset);const s=e.nodeValue;null!==s&&av(t,s,o,i,!1)}function Sg(e,t,n){if(wb(e)){const t=e.anchor.getNode();if(t.is(n)&&e.format!==t.getFormat())return!1}return t.nodeType===Bm&&n.isAttached()}function _g(e,t,n){yg=!0;const r=performance.now()-bg>vg;try{cx(e,(()=>{const o=Mb()||function(e){return e.getEditorState().read((()=>{const e=Mb();return null!==e?e.clone():null}))}(e),i=new Map,s=e.getRootElement(),a=e._editorState,l=e._blockCursorElement;let c=!1,u="";for(let n=0;n<t.length;n++){const d=t[n],f=d.type,h=d.target;let p=Yg(h,a);if(!(null===p&&h!==s||px(p)))if("characterData"===f)r&&db(p)&&Sg(o,h,p)&&Eg(h,p,e);else if("childList"===f){c=!0;const t=d.addedNodes;for(let n=0;n<t.length;n++){const r=t[n],o=qg(r),i=r.parentNode;if(null!=i&&r!==l&&null===o&&("BR"!==r.nodeName||!wg(r,i,e))){if(Nm){const e=r.innerText||r.nodeValue;e&&(u+=e)}i.removeChild(r)}}const n=d.removedNodes,r=n.length;if(r>0){let t=0;for(let o=0;o<r;o++){const r=n[o];("BR"===r.nodeName&&wg(r,h,e)||l===r)&&(h.appendChild(r),t++)}r!==t&&(h===s&&(p=Zg(a)),i.set(h,p))}}}if(i.size>0)for(const[t,n]of i)if(dx(n)){const r=n.getChildrenKeys();let o=t.firstChild;for(let n=0;n<r.length;n++){const i=r[n],s=e.getElementByKey(i);null!==s&&(null==o?(t.appendChild(s),o=s):o!==s&&t.replaceChild(s,o),o=o.nextSibling)}}else db(n)&&n.markDirty();const d=n.takeRecords();if(d.length>0){for(let t=0;t<d.length;t++){const n=d[t],r=n.addedNodes,o=n.target;for(let t=0;t<r.length;t++){const n=r[t],i=n.parentNode;null==i||"BR"!==n.nodeName||wg(n,o,e)||i.removeChild(n)}}n.takeRecords()}null!==o&&(c&&(o.dirty=!0,Qg(o)),Nm&&bv(e)&&o.insertRawText(u))}))}finally{yg=!1}}function kg(e){const t=e._observer;null!==t&&_g(e,t.takeRecords(),t)}function Cg(e){!function(e){0===bg&&kv(e).addEventListener("textInput",xg,!0)}(e),e._observer=new MutationObserver(((t,n)=>{_g(e,t,n)}))}function Pg(e,t){const n=e.__mode,r=e.__format,o=e.__style,i=t.__mode,s=t.__format,a=t.__style;return!(null!==n&&n!==i||null!==r&&r!==s||null!==o&&o!==a)}function Tg(e,t){const n=e.mergeWithSibling(t),r=Zb()._normalizedNodes;return r.add(e.__key),r.add(t.__key),n}function Og(e){let t,n,r=e;if(""!==r.__text||!r.isSimpleText()||r.isUnmergeable()){for(;null!==(t=r.getPreviousSibling())&&db(t)&&t.isSimpleText()&&!t.isUnmergeable();){if(""!==t.__text){if(Pg(t,r)){r=Tg(t,r);break}break}t.remove()}for(;null!==(n=r.getNextSibling())&&db(n)&&n.isSimpleText()&&!n.isUnmergeable();){if(""!==n.__text){if(Pg(r,n)){r=Tg(r,n);break}break}n.remove()}}else r.remove()}function Rg(e){for(;"element"===e.type;){const t=e.getNode(),n=e.offset;let r,o;if(n===t.getChildrenSize()?(r=t.getChildAtIndex(n-1),o=!0):(r=t.getChildAtIndex(n),o=!1),db(r)){e.set(r.__key,o?r.getTextContentSize():0,"text");break}if(!dx(r))break;e.set(r.__key,o?r.getChildrenSize():0,"element")}}let Ng=1;const Ag="function"==typeof queueMicrotask?queueMicrotask:e=>{Promise.resolve().then(e)};function jg(e){const t=document.activeElement;if(null===t)return!1;const n=t.nodeName;return px(Yg(e))&&("INPUT"===n||"TEXTAREA"===n||"true"===t.contentEditable&&null==Lg(t))}function Mg(e,t,n){const r=e.getRootElement();try{return null!==r&&r.contains(t)&&r.contains(n)&&null!==t&&!jg(t)&&Dg(t)===e}catch(e){return!1}}function Ig(e){return e instanceof Tx}function Dg(e){let t=e;for(;null!=t;){const e=Lg(t);if(Ig(e))return e;t=Sv(t)}return null}function Lg(e){return e?e.__lexicalEditor:null}function Fg(e){return e.isToken()||e.isSegmented()}function zg(e){return e.nodeType===Bm}function Bg(e){let t=e;for(;null!=t;){if(zg(t))return t;t=t.firstChild}return null}function Vg(e,t,n){const r=lg[t];if(null!==n&&(e&r)==(n&r))return e;let o=e^r;return"subscript"===t?o&=~lg.superscript:"superscript"===t&&(o&=~lg.subscript),o}function Wg(e){const t=e.getParent();if(null!==t){const n=e.getWritable(),r=t.getWritable(),o=e.getPreviousSibling(),i=e.getNextSibling();if(null===o)if(null!==i){const e=i.getWritable();r.__first=i.__key,e.__prev=null}else r.__first=null;else{const e=o.getWritable();if(null!==i){const t=i.getWritable();t.__prev=e.__key,e.__next=t.__key}else e.__next=null;n.__prev=null}if(null===i)if(null!==o){const e=o.getWritable();r.__last=o.__key,e.__next=null}else r.__last=null;else{const e=i.getWritable();if(null!==o){const t=o.getWritable();t.__next=e.__key,e.__prev=t.__key}else e.__prev=null;n.__next=null}r.__size--,n.__parent=null}}function Ug(e){Xb();const t=e.getLatest(),n=t.__parent,r=Jb(),o=Zb(),i=r._nodeMap,s=o._dirtyElements;null!==n&&function(e,t,n){let r=e;for(;null!==r;){if(n.has(r))return;const e=t.get(r);if(void 0===e)break;n.set(r,!1),r=e.__parent}}(n,i,s);const a=t.__key;o._dirtyType=1,dx(e)?s.set(a,!0):o._dirtyLeaves.add(a)}function $g(e){Gb();const t=Zb(),n=t._compositionKey;if(e!==n){if(t._compositionKey=e,null!==n){const e=Hg(n);null!==e&&e.getWritable()}if(null!==e){const t=Hg(e);null!==t&&t.getWritable()}}}function Kg(){return Yb()?null:Zb()._compositionKey}function Hg(e,t){const n=(t||Jb())._nodeMap.get(e);return void 0===n?null:n}function qg(e,t){const n=e[`__lexicalKey_${Zb()._key}`];return void 0!==n?Hg(n,t):null}function Yg(e,t){let n=e;for(;null!=n;){const e=qg(n,t);if(null!==e)return e;n=Sv(n)}return null}function Gg(e){const t=e._decorators,n=Object.assign({},t);return e._pendingDecorators=n,n}function Xg(e){return e.read((()=>Jg().getTextContent()))}function Jg(){return Zg(Jb())}function Zg(e){return e._nodeMap.get("root")}function Qg(e){Gb();const t=Jb();null!==e&&(e.dirty=!0,e.setCachedNodes(null)),t._selection=e}function ev(e){const t=Zb(),n=function(e,t){let n=e;for(;null!=n;){const e=n[`__lexicalKey_${t._key}`];if(void 0!==e)return e;n=Sv(n)}return null}(e,t);return null===n?e===t.getRootElement()?Hg("root"):null:Hg(n)}function tv(e,t){return t?e.getTextContentSize():0}function nv(e){return/[\uD800-\uDBFF][\uDC00-\uDFFF]/g.test(e)}function rv(e){const t=[];let n=e;for(;null!==n;)t.push(n),n=n._parentEditor;return t}function ov(){return Math.random().toString(36).replace(/[^a-z]+/g,"").substr(0,5)}function iv(e){return e.nodeType===Bm?e.nodeValue:null}function sv(e,t,n){const r=Rv(t._window);if(null===r)return;const o=r.anchorNode;let{anchorOffset:i,focusOffset:s}=r;if(null!==o){let t=iv(o);const r=Yg(o);if(null!==t&&db(r)){if(t===tg&&n){const e=n.length;t=n,i=e,s=e}null!==t&&av(r,t,i,s,e)}}}function av(e,t,n,r,o){let i=e;if(i.isAttached()&&(o||!i.isDirty())){const s=i.isComposing();let a=t;(s||o)&&t[t.length-1]===tg&&(a=t.slice(0,-1));const l=i.getTextContent();if(o||a!==l){if(""===a){if($g(null),jm||Mm||Fm)i.remove();else{const e=Zb();setTimeout((()=>{e.update((()=>{i.isAttached()&&i.remove()}))}),20)}return}const t=i.getParent(),o=Ib(),l=i.getTextContentSize(),c=Kg(),u=i.getKey();if(i.isToken()||null!==c&&u===c&&!s||wb(o)&&(null!==t&&!t.canInsertTextBefore()&&0===o.anchor.offset||o.anchor.key===e.__key&&0===o.anchor.offset&&!i.canInsertTextBefore()&&!s||o.focus.key===e.__key&&o.focus.offset===l&&!i.canInsertTextAfter()&&!s))return void i.markDirty();const d=Mb();if(!wb(d)||null===n||null===r)return void i.setTextContent(a);if(d.setTextNodeRange(i,n,i,r),i.isSegmented()){const e=ub(i.getTextContent());i.replace(e),i=e}i.setTextContent(a)}}}function lv(e){return"ArrowLeft"===e}function cv(e){return"ArrowRight"===e}function uv(e,t){return Rm?e:t}function dv(e){return"Enter"===e}function fv(e){return"Backspace"===e}function hv(e){return"Delete"===e}function pv(e,t,n){return"a"===e.toLowerCase()&&uv(t,n)}function mv(e,t){void 0===e.__lexicalClassNameCache&&(e.__lexicalClassNameCache={});const n=e.__lexicalClassNameCache,r=n[t];if(void 0!==r)return r;const o=e[t];if("string"==typeof o){const e=gg(o);return n[t]=e,e}return o}function gv(e,t,n,r,o){if(0===n.size)return;const i=r.__type,s=r.__key,a=t.get(i);void 0===a&&mg(33,i);const l=a.klass;let c=e.get(l);void 0===c&&(c=new Map,e.set(l,c));const u=c.get(s),d="destroyed"===u&&"created"===o;(void 0===u||d)&&c.set(s,d?"updated":o)}function vv(e,t,n){const r=e.getParent();let o=n,i=e;return null!==r&&(t&&0===n?(o=i.getIndexWithinParent(),i=r):t||n!==i.getChildrenSize()||(o=i.getIndexWithinParent()+1,i=r)),i.getChildAtIndex(t?o-1:o)}function yv(e,t){const n=e.offset;if("element"===e.type)return vv(e.getNode(),t,n);{const r=e.getNode();if(t&&0===n||!t&&n===r.getTextContentSize()){const e=t?r.getPreviousSibling():r.getNextSibling();return null===e?vv(r.getParentOrThrow(),t,r.getIndexWithinParent()+(t?0:1)):e}}return null}function bv(e){const t=kv(e).event,n=t&&t.inputType;return"insertFromPaste"===n||"insertFromPasteAsQuotation"===n}function xv(e,t,n){return sx(e,t,n)}function wv(e){return!gx(e)&&!e.isLastChild()&&!e.isInline()}function Ev(e,t){const n=e._keyToDOMMap.get(t);return void 0===n&&mg(75,t),n}function Sv(e){const t=e.assignedSlot||e.parentElement;return null!==t&&11===t.nodeType?t.host:t}function _v(e,t){let n=e.getParent();for(;null!==n;){if(n.is(t))return!0;n=n.getParent()}return!1}function kv(e){const t=e._window;return null===t&&mg(78),t}function Cv(e){return gx(e)||dx(e)&&e.isShadowRoot()}function Pv(e){const t=Zb(),n=e.constructor.getType(),r=t._nodes.get(n);void 0===r&&mg(97);const o=r.replace;if(null!==o){const t=o(e);return t instanceof e.constructor||mg(98),t}return e}function Tv(e,t){!gx(e.getParent())||dx(t)||px(t)||mg(99)}function Ov(e){return(px(e)||dx(e)&&!e.canBeEmpty())&&!e.isInline()}function _n(e,t,n){n.style.removeProperty("caret-color"),t._blockCursorElement=null;const r=e.parentElement;null!==r&&r.removeChild(e)}function Rv(e){return Tm?(e||window).getSelection():null}function Nv(e){return 1===e.nodeType}function Av(e){const t=new RegExp(/^(a|abbr|acronym|b|cite|code|del|em|i|ins|kbd|label|output|q|ruby|s|samp|span|strong|sub|sup|time|u|tt|var|#text)$/,"i");return null!==e.nodeName.match(t)}function jv(e){const t=new RegExp(/^(address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|header|hr|li|main|nav|noscript|ol|p|pre|section|table|td|tfoot|ul|video)$/,"i");return null!==e.nodeName.match(t)}function Mv(e){if(gx(e)||px(e)&&!e.isInline())return!0;if(!dx(e)||Cv(e))return!1;const t=e.getFirstChild(),n=null===t||qy(t)||db(t)||t.isInline();return!e.isInline()&&!1!==e.canBeEmpty()&&n}function Iv(e,t){let n=e;for(;null!==n&&null!==n.getParent()&&!t(n);)n=n.getParentOrThrow();return t(n)?n:null}const Dv=new WeakMap,Lv=new Map;function Fv(e){const t=e.constructor.clone(e);return t.afterCloneFrom(e),t}function zv(e,t,n,r,o,i){let s=e.getFirstChild();for(;null!==s;){const e=s.__key;s.__parent===t&&(dx(s)&&zv(s,e,n,r,o,i),n.has(e)||i.delete(e),o.push(e)),s=s.getNextSibling()}}let Bv,Vv,Wv,Uv,$v,Kv,Hv,qv,Yv,Gv,Xv="",Jv="",Zv=null,Qv="",ey="",ty=!1,ny=!1,ry=null;function oy(e,t){const n=Hv.get(e);if(null!==t){const n=by(e);n.parentNode===t&&t.removeChild(n)}if(qv.has(e)||Vv._keyToDOMMap.delete(e),dx(n)){const e=my(n,Hv);iy(e,0,e.length-1,null)}void 0!==n&&gv(Gv,Wv,Uv,n,"destroyed")}function iy(e,t,n,r){let o=t;for(;o<=n;++o){const t=e[o];void 0!==t&&oy(t,r)}}function sy(e,t){e.setProperty("text-align",t)}const ay="40px";function ly(e,t){const n=Bv.theme.indent;if("string"==typeof n){const r=e.classList.contains(n);t>0&&!r?e.classList.add(n):t<1&&r&&e.classList.remove(n)}const r=getComputedStyle(e).getPropertyValue("--lexical-indent-base-value")||ay;e.style.setProperty("padding-inline-start",0===t?"":`calc(${t} * ${r})`)}function cy(e,t){const n=e.style;0===t?sy(n,""):t===Gm?sy(n,"left"):t===Xm?sy(n,"center"):t===Jm?sy(n,"right"):t===Zm?sy(n,"justify"):t===Qm?sy(n,"start"):t===eg&&sy(n,"end")}function uy(e,t,n){const r=qv.get(e);void 0===r&&mg(60);const o=r.createDOM(Bv,Vv);if(function(e,t,n){const r=n._keyToDOMMap;t["__lexicalKey_"+n._key]=e,r.set(e,t)}(e,o,Vv),db(r)?o.setAttribute("data-lexical-text","true"):px(r)&&o.setAttribute("data-lexical-decorator","true"),dx(r)){const e=r.__indent,t=r.__size;if(0!==e&&ly(o,e),0!==t){const e=t-1;!function(e,t,n,r){const o=Jv;Jv="",dy(e,n,0,t,r,null),py(n,r),Jv=o}(my(r,qv),e,r,o)}const n=r.__format;0!==n&&cy(o,n),r.isInline()||hy(null,r,o),wv(r)&&(Xv+=ng,ey+=ng)}else{const t=r.getTextContent();if(px(r)){const t=r.decorate(Vv,Bv);null!==t&&vy(e,t),o.contentEditable="false"}else db(r)&&(r.isDirectionless()||(Jv+=t));Xv+=t,ey+=t}if(null!==t)if(null!=n)t.insertBefore(o,n);else{const e=t.__lexicalLineBreak;null!=e?t.insertBefore(o,e):t.appendChild(o)}return gv(Gv,Wv,Uv,r,"created"),o}function dy(e,t,n,r,o,i){const s=Xv;Xv="";let a=n;for(;a<=r;++a){uy(e[a],o,i);const t=qv.get(e[a]);null!==t&&db(t)&&(null===Zv&&(Zv=t.getFormat()),""===Qv&&(Qv=t.getStyle()))}wv(t)&&(Xv+=ng),o.__lexicalTextContent=Xv,Xv=s+Xv}function fy(e,t){const n=t.get(e);return qy(n)||px(n)&&n.isInline()}function hy(e,t,n){const r=null!==e&&(0===e.__size||fy(e.__last,Hv)),o=0===t.__size||fy(t.__last,qv);if(r){if(!o){const e=n.__lexicalLineBreak;if(null!=e)try{n.removeChild(e)}catch(t){if("object"==typeof t&&null!=t){const r=`${t.toString()} Parent: ${n.tagName}, child: ${e.tagName}.`;throw new Error(r)}throw t}n.__lexicalLineBreak=null}}else if(o){const e=document.createElement("br");n.__lexicalLineBreak=e,n.appendChild(e)}}function py(e,t){const n=t.__lexicalDirTextContent,r=t.__lexicalDir;if(n!==Jv||r!==ry){const n=""===Jv,i=n?ry:(o=Jv,sg.test(o)?"rtl":ag.test(o)?"ltr":null);if(i!==r){const o=t.classList,s=Bv.theme;let a=null!==r?s[r]:void 0,l=null!==i?s[i]:void 0;if(void 0!==a){if("string"==typeof a){const e=gg(a);a=s[r]=e}o.remove(...a)}if(null===i||n&&"ltr"===i)t.removeAttribute("dir");else{if(void 0!==l){if("string"==typeof l){const e=gg(l);l=s[i]=e}void 0!==l&&o.add(...l)}t.dir=i}ny||(e.getWritable().__dir=i)}ry=i,t.__lexicalDirTextContent=Jv,t.__lexicalDir=i}var o}function my(e,t){const n=[];let r=e.__first;for(;null!==r;){const e=t.get(r);void 0===e&&mg(101),n.push(r),r=e.__next}return n}function gy(e,t){const n=Hv.get(e);let r=qv.get(e);void 0!==n&&void 0!==r||mg(61);const o=ty||Kv.has(e)||$v.has(e),i=Ev(Vv,e);if(n===r&&!o){if(dx(n)){const e=i.__lexicalTextContent;void 0!==e&&(Xv+=e,ey+=e);const t=i.__lexicalDirTextContent;void 0!==t&&(Jv+=t)}else{const e=n.getTextContent();db(n)&&!n.isDirectionless()&&(Jv+=e),ey+=e,Xv+=e}return i}if(n!==r&&o&&gv(Gv,Wv,Uv,r,"updated"),r.updateDOM(n,i,Bv)){const n=uy(e,null,null);return null===t&&mg(62),t.replaceChild(n,i),oy(e,null),n}if(dx(n)&&dx(r)){const e=r.__indent;e!==n.__indent&&ly(i,e);const t=r.__format;t!==n.__format&&cy(i,t),o&&(function(e,t,n){const r=Jv;var o;Jv="",Zv=null,Qv="",function(e,t,n){const r=Xv,o=e.__size,i=t.__size;if(Xv="",1===o&&1===i){const r=e.__first,o=t.__first;if(r===o)gy(r,n);else{const e=by(r),t=uy(o,null,null);try{n.replaceChild(t,e)}catch(i){if("object"==typeof i&&null!=i){const s=`${i.toString()} Parent: ${n.tagName}, new child: {tag: ${t.tagName} key: ${o}}, old child: {tag: ${e.tagName}, key: ${r}}.`;throw new Error(s)}throw i}oy(r,null)}const s=qv.get(o);db(s)&&(null===Zv&&(Zv=s.getFormat()),""===Qv&&(Qv=s.getStyle()))}else{const r=my(e,Hv),s=my(t,qv);if(0===o)0!==i&&dy(s,t,0,i-1,n,null);else if(0===i){if(0!==o){const e=null==n.__lexicalLineBreak;iy(r,0,o-1,e?null:n),e&&(n.textContent="")}}else!function(e,t,n,r,o,i){const s=r-1,a=o-1;let l,c,u=i.firstChild,d=0,f=0;for(;d<=s&&f<=a;){const e=t[d],r=n[f];if(e===r)u=yy(gy(r,i)),d++,f++;else{void 0===l&&(l=new Set(t)),void 0===c&&(c=new Set(n));const o=c.has(e),s=l.has(r);if(o)if(s){const e=Ev(Vv,r);e===u?u=yy(gy(r,i)):(null!=u?i.insertBefore(e,u):i.appendChild(e),gy(r,i)),d++,f++}else uy(r,i,u),f++;else u=yy(by(e)),oy(e,i),d++}const o=qv.get(r);null!==o&&db(o)&&(null===Zv&&(Zv=o.getFormat()),""===Qv&&(Qv=o.getStyle()))}const h=d>s,p=f>a;if(h&&!p){const t=n[a+1];dy(n,e,f,a,i,void 0===t?null:Vv.getElementByKey(t))}else p&&!h&&iy(t,d,s,i)}(t,r,s,o,i,n)}wv(t)&&(Xv+=ng),n.__lexicalTextContent=Xv,Xv=r+Xv}(e,t,n),py(t,n),kx(o=t)&&null!=Zv&&Zv!==o.__textFormat&&!ny&&(o.setTextFormat(Zv),o.setTextStyle(Qv)),function(e){kx(e)&&""!==Qv&&Qv!==e.__textStyle&&!ny&&e.setTextStyle(Qv)}(t),Jv=r}(n,r,i),gx(r)||r.isInline()||hy(n,r,i)),wv(r)&&(Xv+=ng,ey+=ng)}else{const t=r.getTextContent();if(px(r)){const t=r.decorate(Vv,Bv);null!==t&&vy(e,t)}else db(r)&&!r.isDirectionless()&&(Jv+=t);Xv+=t,ey+=t}if(!ny&&gx(r)&&r.__cachedText!==ey){const e=r.getWritable();e.__cachedText=ey,r=e}return i}function vy(e,t){let n=Vv._pendingDecorators;const r=Vv._decorators;if(null===n){if(r[e]===t)return;n=Gg(Vv)}n[e]=t}function yy(e){let t=e.nextSibling;return null!==t&&t===Vv._blockCursorElement&&(t=t.nextSibling),t}function by(e){const t=Yv.get(e);return void 0===t&&mg(75,e),t}const xy=Object.freeze({}),wy=[["keydown",function(e,t){if(Ey=e.timeStamp,Sy=e.key,t.isComposing())return;const{key:n,shiftKey:r,ctrlKey:o,metaKey:i,altKey:s}=e;xv(t,tm,e)||null!=n&&(function(e,t,n,r){return cv(e)&&!t&&!r&&!n}(n,o,s,i)?xv(t,nm,e):function(e,t,n,r,o){return cv(e)&&!r&&!n&&(t||o)}(n,o,r,s,i)?xv(t,rm,e):function(e,t,n,r){return lv(e)&&!t&&!r&&!n}(n,o,s,i)?xv(t,om,e):function(e,t,n,r,o){return lv(e)&&!r&&!n&&(t||o)}(n,o,r,s,i)?xv(t,im,e):function(e,t,n){return function(e){return"ArrowUp"===e}(e)&&!t&&!n}(n,o,i)?xv(t,sm,e):function(e,t,n){return function(e){return"ArrowDown"===e}(e)&&!t&&!n}(n,o,i)?xv(t,am,e):function(e,t){return dv(e)&&t}(n,r)?(Oy=!0,xv(t,lm,e)):function(e){return" "===e}(n)?xv(t,cm,e):function(e,t){return Rm&&t&&"o"===e.toLowerCase()}(n,o)?(e.preventDefault(),Oy=!0,xv(t,Kp,!0)):function(e,t){return dv(e)&&!t}(n,r)?(Oy=!1,xv(t,lm,e)):function(e,t,n,r){return Rm?!t&&!n&&(fv(e)||"h"===e.toLowerCase()&&r):!(r||t||n)&&fv(e)}(n,s,i,o)?fv(n)?xv(t,um,e):(e.preventDefault(),xv(t,$p,!0)):function(e){return"Escape"===e}(n)?xv(t,dm,e):function(e,t,n,r,o){return Rm?!(n||r||o)&&(hv(e)||"d"===e.toLowerCase()&&t):!(t||r||o)&&hv(e)}(n,o,r,s,i)?hv(n)?xv(t,fm,e):(e.preventDefault(),xv(t,$p,!1)):function(e,t,n){return fv(e)&&(Rm?t:n)}(n,s,o)?(e.preventDefault(),xv(t,Xp,!0)):function(e,t,n){return hv(e)&&(Rm?t:n)}(n,s,o)?(e.preventDefault(),xv(t,Xp,!1)):function(e,t){return Rm&&t&&fv(e)}(n,i)?(e.preventDefault(),xv(t,Jp,!0)):function(e,t){return Rm&&t&&hv(e)}(n,i)?(e.preventDefault(),xv(t,Jp,!1)):function(e,t,n,r){return"b"===e.toLowerCase()&&!t&&uv(n,r)}(n,s,i,o)?(e.preventDefault(),xv(t,Zp,"bold")):function(e,t,n,r){return"u"===e.toLowerCase()&&!t&&uv(n,r)}(n,s,i,o)?(e.preventDefault(),xv(t,Zp,"underline")):function(e,t,n,r){return"i"===e.toLowerCase()&&!t&&uv(n,r)}(n,s,i,o)?(e.preventDefault(),xv(t,Zp,"italic")):function(e,t,n,r){return"Tab"===e&&!t&&!n&&!r}(n,s,o,i)?xv(t,hm,e):function(e,t,n,r){return"z"===e.toLowerCase()&&!t&&uv(n,r)}(n,r,i,o)?(e.preventDefault(),xv(t,Qp,void 0)):function(e,t,n,r){return Rm?"z"===e.toLowerCase()&&n&&t:"y"===e.toLowerCase()&&r||"z"===e.toLowerCase()&&r&&t}(n,r,i,o)?(e.preventDefault(),xv(t,em,void 0)):Sb(t._editorState._selection)?function(e,t,n,r){return!t&&"c"===e.toLowerCase()&&(Rm?n:r)}(n,r,i,o)?(e.preventDefault(),xv(t,ym,e)):function(e,t,n,r){return!t&&"x"===e.toLowerCase()&&(Rm?n:r)}(n,r,i,o)?(e.preventDefault(),xv(t,bm,e)):pv(n,i,o)&&(e.preventDefault(),xv(t,xm,e)):!Nm&&pv(n,i,o)&&(e.preventDefault(),xv(t,xm,e)),function(e,t,n,r){return e||t||n||r}(o,r,s,i)&&xv(t,Pm,e))}],["pointerdown",function(e,t){const n=e.target,r=e.pointerType;n instanceof Node&&"touch"!==r&&cx(t,(()=>{px(Yg(n))||(Ty=!0)}))}],["compositionstart",function(e,t){cx(t,(()=>{const n=Mb();if(wb(n)&&!t.isComposing()){const r=n.anchor,o=n.anchor.getNode();$g(r.key),(e.timeStamp<Ey+30||"element"===r.type||!n.isCollapsed()||o.getFormat()!==n.format||db(o)&&o.getStyle()!==n.style)&&xv(t,qp,rg)}}))}],["compositionend",function(e,t){Nm?Ry=!0:cx(t,(()=>{Dy(t,e.data)}))}],["input",function(e,t){e.stopPropagation(),cx(t,(()=>{const n=Mb(),r=e.data,o=Iy(e);if(null!=r&&wb(n)&&Ay(n,o,r,e.timeStamp,!1)){Ry&&(Dy(t,r),Ry=!1);const o=n.anchor.getNode(),i=Rv(t._window);if(null===i)return;const s=n.isBackward(),a=s?n.anchor.offset:n.focus.offset,l=s?n.focus.offset:n.anchor.offset;Am&&!n.isCollapsed()&&db(o)&&null!==i.anchorNode&&o.getTextContent().slice(0,a)+r+o.getTextContent().slice(a+l)===iv(i.anchorNode)||xv(t,qp,r);const c=r.length;Nm&&c>1&&"insertCompositionText"===e.inputType&&!t.isComposing()&&(n.anchor.offset-=c),jm||Mm||Fm||!t.isComposing()||(Ey=0,$g(null))}else sv(!1,t,null!==r?r:void 0),Ry&&(Dy(t,r||void 0),Ry=!1);Gb(),kg(Zb())})),ky=null}],["click",function(e,t){cx(t,(()=>{const n=Mb(),r=Rv(t._window),o=Ib();if(r)if(wb(n)){const t=n.anchor,i=t.getNode();"element"===t.type&&0===t.offset&&n.isCollapsed()&&!gx(i)&&1===Jg().getChildrenSize()&&i.getTopLevelElementOrThrow().isEmpty()&&null!==o&&n.is(o)?(r.removeAllRanges(),n.dirty=!0):3!==e.detail||n.isCollapsed()||i!==n.focus.getNode()&&(dx(i)?i.select(0):i.getParentOrThrow().select(0))}else if("touch"===e.pointerType){const n=r.anchorNode;if(null!==n){const i=n.nodeType;i!==zm&&i!==Bm||Qg(jb(o,r,t,e))}}xv(t,Up,e)}))}],["cut",xy],["copy",xy],["dragstart",xy],["dragover",xy],["dragend",xy],["paste",xy],["focus",xy],["blur",xy],["drop",xy]];Am&&wy.push(["beforeinput",(e,t)=>function(e,t){const n=e.inputType,r=Iy(e);"deleteCompositionText"===n||Nm&&bv(t)||"insertCompositionText"!==n&&cx(t,(()=>{const o=Mb();if("deleteContentBackward"===n){if(null===o){const e=Ib();if(!wb(e))return;Qg(e.clone())}if(wb(o)){const n=o.anchor.key===o.focus.key;if(i=e.timeStamp,"MediaLast"===Sy&&i<Ey+30&&t.isComposing()&&n){if($g(null),Ey=0,setTimeout((()=>{cx(t,(()=>{$g(null)}))}),30),wb(o)){const e=o.anchor.getNode();e.markDirty(),o.format=e.getFormat(),db(e)||mg(142),o.style=e.getStyle()}}else{$g(null),e.preventDefault();const r=o.anchor.getNode().getTextContent(),i=0===o.anchor.offset&&o.focus.offset===r.length;Lm&&n&&!i||xv(t,$p,!0)}return}}var i;if(!wb(o))return;const s=e.data;null!==ky&&sv(!1,t,ky),o.dirty&&null===ky||!o.isCollapsed()||gx(o.anchor.getNode())||null===r||o.applyDOMRange(r),ky=null;const a=o.anchor,l=o.focus,c=a.getNode(),u=l.getNode();if("insertText"!==n&&"insertTranspose"!==n)switch(e.preventDefault(),n){case"insertFromYank":case"insertFromDrop":case"insertReplacementText":xv(t,qp,e);break;case"insertFromComposition":$g(null),xv(t,qp,e);break;case"insertLineBreak":$g(null),xv(t,Kp,!1);break;case"insertParagraph":$g(null),Oy&&!Mm?(Oy=!1,xv(t,Kp,!1)):xv(t,Hp,void 0);break;case"insertFromPaste":case"insertFromPasteAsQuotation":xv(t,Yp,e);break;case"deleteByComposition":(function(e,t){return e!==t||dx(e)||dx(t)||!e.isToken()||!t.isToken()})(c,u)&&xv(t,Gp,e);break;case"deleteByDrag":case"deleteByCut":xv(t,Gp,e);break;case"deleteContent":xv(t,$p,!1);break;case"deleteWordBackward":xv(t,Xp,!0);break;case"deleteWordForward":xv(t,Xp,!1);break;case"deleteHardLineBackward":case"deleteSoftLineBackward":xv(t,Jp,!0);break;case"deleteContentForward":case"deleteHardLineForward":case"deleteSoftLineForward":xv(t,Jp,!1);break;case"formatStrikeThrough":xv(t,Zp,"strikethrough");break;case"formatBold":xv(t,Zp,"bold");break;case"formatItalic":xv(t,Zp,"italic");break;case"formatUnderline":xv(t,Zp,"underline");break;case"historyUndo":xv(t,Qp,void 0);break;case"historyRedo":xv(t,em,void 0)}else{if("\n"===s)e.preventDefault(),xv(t,Kp,!1);else if(s===ng)e.preventDefault(),xv(t,Hp,void 0);else if(null==s&&e.dataTransfer){const t=e.dataTransfer.getData("text/plain");e.preventDefault(),o.insertRawText(t)}else null!=s&&Ay(o,r,s,e.timeStamp,!0)?(e.preventDefault(),xv(t,qp,s)):ky=s;_y=e.timeStamp}}))}(e,t)]);let Ey=0,Sy=null,_y=0,ky=null;const Cy=new WeakMap;let Py=!1,Ty=!1,Oy=!1,Ry=!1,Ny=[0,"",0,"root",0];function Ay(e,t,n,r,o){const i=e.anchor,s=e.focus,a=i.getNode(),l=Zb(),c=Rv(l._window),u=null!==c?c.anchorNode:null,d=i.key,f=l.getElementByKey(d),h=n.length;return d!==s.key||!db(a)||(!o&&(!Am||_y<r+50)||a.isDirty()&&h<2||nv(n))&&i.offset!==s.offset&&!a.isComposing()||Fg(a)||a.isDirty()&&h>1||(o||!Am)&&null!==f&&!a.isComposing()&&u!==Bg(f)||null!==c&&null!==t&&(!t.collapsed||t.startContainer!==c.anchorNode||t.startOffset!==c.anchorOffset)||a.getFormat()!==e.format||a.getStyle()!==e.style||function(e,t){if(t.isSegmented())return!0;if(!e.isCollapsed())return!1;const n=e.anchor.offset,r=t.getParentOrThrow(),o=t.isToken();return 0===n?!t.canInsertTextBefore()||!r.canInsertTextBefore()&&!t.isComposing()||o||function(e){const t=e.getPreviousSibling();return(db(t)||dx(t)&&t.isInline())&&!t.canInsertTextAfter()}(t):n===t.getTextContentSize()&&(!t.canInsertTextAfter()||!r.canInsertTextAfter()&&!t.isComposing()||o)}(e,a)}function jy(e,t){return null!==e&&null!==e.nodeValue&&e.nodeType===Bm&&0!==t&&t!==e.nodeValue.length}function My(e,t,n){const{anchorNode:r,anchorOffset:o,focusNode:i,focusOffset:s}=e;Py&&(Py=!1,jy(r,o)&&jy(i,s))||cx(t,(()=>{if(!n)return void Qg(null);if(!Mg(t,r,i))return;const a=Mb();if(wb(a)){const n=a.anchor,r=n.getNode();if(a.isCollapsed()){"Range"===e.type&&e.anchorNode===e.focusNode&&(a.dirty=!0);const o=kv(t).event,i=o?o.timeStamp:performance.now(),[s,l,c,u,d]=Ny,f=Jg(),h=!1===t.isComposing()&&""===f.getTextContent();if(i<d+200&&n.offset===c&&n.key===u)a.format=s,a.style=l;else if("text"===n.type)db(r)||mg(141),a.format=r.getFormat(),a.style=r.getStyle();else if("element"===n.type&&!h){const e=n.getNode();a.style="",e instanceof wx&&0===e.getChildrenSize()?(a.format=e.getTextFormat(),a.style=e.getTextStyle()):a.format=0}}else{const e=n.key,t=a.focus.key,r=a.getNodes(),i=r.length,l=a.isBackward(),c=l?s:o,u=l?o:s,d=l?t:e,f=l?e:t;let h=Ym,p=!1;for(let e=0;e<i;e++){const t=r[e],n=t.getTextContentSize();if(db(t)&&0!==n&&!(0===e&&t.__key===d&&c===n||e===i-1&&t.__key===f&&0===u)&&(p=!0,h&=t.getFormat(),0===h))break}a.format=p?h:0}}xv(t,Wp,void 0)}))}function Iy(e){if(!e.getTargetRanges)return null;const t=e.getTargetRanges();return 0===t.length?null:t[0]}function Dy(e,t){const n=e._compositionKey;if($g(null),null!==n&&null!=t){if(""===t){const t=Hg(n),r=Bg(e.getElementByKey(n));return void(null!==r&&null!==r.nodeValue&&db(t)&&av(t,r.nodeValue,null,null,!0))}if("\n"===t[t.length-1]){const t=Mb();if(wb(t)){const n=t.focus;return t.anchor.set(n.key,n.offset,n.type),void xv(e,lm,null)}}}sv(!0,e,t)}function Ly(e){let t=e.__lexicalEventHandles;return void 0===t&&(t=[],e.__lexicalEventHandles=t),t}const Fy=new Map;function zy(e){const t=e.target,n=Rv(null==t?null:9===t.nodeType?t.defaultView:t.ownerDocument.defaultView);if(null===n)return;const r=Dg(n.anchorNode);if(null===r)return;Ty&&(Ty=!1,cx(r,(()=>{const t=Ib(),o=n.anchorNode;if(null===o)return;const i=o.nodeType;i!==zm&&i!==Bm||Qg(jb(t,n,r,e))})));const o=rv(r),i=o[o.length-1],s=i._key,a=Fy.get(s),l=a||i;l!==r&&My(n,l,!1),My(n,r,!0),r!==i?Fy.set(s,r):a&&Fy.delete(s)}function By(e){e._lexicalHandled=!0}function Vy(e){return!0===e._lexicalHandled}function Wy(e,t,n){Gb();const r=e.__key,o=e.getParent();if(null===o)return;const i=function(e){const t=Mb();if(!wb(t)||!dx(e))return t;const{anchor:n,focus:r}=t,o=n.getNode(),i=r.getNode();return _v(o,e)&&n.set(e.__key,0,"element"),_v(i,e)&&r.set(e.__key,0,"element"),t}(e);let s=!1;if(wb(i)&&t){const t=i.anchor,n=i.focus;t.key===r&&(Fb(t,e,o,e.getPreviousSibling(),e.getNextSibling()),s=!0),n.key===r&&(Fb(n,e,o,e.getPreviousSibling(),e.getNextSibling()),s=!0)}else Sb(i)&&t&&e.isSelected()&&e.selectPrevious();if(wb(i)&&t&&!s){const t=e.getIndexWithinParent();Wg(e),Db(i,o,t,-1)}else Wg(e);n||Cv(o)||o.canBeEmpty()||!o.isEmpty()||Wy(o,t),t&&gx(o)&&o.isEmpty()&&o.selectEnd()}class Uy{static getType(){mg(64,this.name)}static clone(e){mg(65,this.name)}afterCloneFrom(e){this.__parent=e.__parent,this.__next=e.__next,this.__prev=e.__prev}constructor(e){this.__type=this.constructor.getType(),this.__parent=null,this.__prev=null,this.__next=null,function(e,t){if(null!=t)return void(e.__key=t);Gb(),Xb();const n=Zb(),r=Jb(),o=""+Ng++;r._nodeMap.set(o,e),dx(e)?n._dirtyElements.set(o,!0):n._dirtyLeaves.add(o),n._cloneNotNeeded.add(o),n._dirtyType=1,e.__key=o}(this,e)}getType(){return this.__type}isInline(){mg(137,this.constructor.name)}isAttached(){let e=this.__key;for(;null!==e;){if("root"===e)return!0;const t=Hg(e);if(null===t)break;e=t.__parent}return!1}isSelected(e){const t=e||Mb();if(null==t)return!1;const n=t.getNodes().some((e=>e.__key===this.__key));if(db(this))return n;if(wb(t)&&"element"===t.anchor.type&&"element"===t.focus.type){if(t.isCollapsed())return!1;const e=this.getParent();if(px(this)&&this.isInline()&&e){const n=t.isBackward()?t.focus:t.anchor,r=n.getNode();if(n.offset===r.getChildrenSize()&&r.is(e)&&r.getLastChildOrThrow().is(this))return!1}}return n}getKey(){return this.__key}getIndexWithinParent(){const e=this.getParent();if(null===e)return-1;let t=e.getFirstChild(),n=0;for(;null!==t;){if(this.is(t))return n;n++,t=t.getNextSibling()}return-1}getParent(){const e=this.getLatest().__parent;return null===e?null:Hg(e)}getParentOrThrow(){const e=this.getParent();return null===e&&mg(66,this.__key),e}getTopLevelElement(){let e=this;for(;null!==e;){const t=e.getParent();if(Cv(t))return dx(e)||e===this&&px(e)||mg(194),e;e=t}return null}getTopLevelElementOrThrow(){const e=this.getTopLevelElement();return null===e&&mg(67,this.__key),e}getParents(){const e=[];let t=this.getParent();for(;null!==t;)e.push(t),t=t.getParent();return e}getParentKeys(){const e=[];let t=this.getParent();for(;null!==t;)e.push(t.__key),t=t.getParent();return e}getPreviousSibling(){const e=this.getLatest().__prev;return null===e?null:Hg(e)}getPreviousSiblings(){const e=[],t=this.getParent();if(null===t)return e;let n=t.getFirstChild();for(;null!==n&&!n.is(this);)e.push(n),n=n.getNextSibling();return e}getNextSibling(){const e=this.getLatest().__next;return null===e?null:Hg(e)}getNextSiblings(){const e=[];let t=this.getNextSibling();for(;null!==t;)e.push(t),t=t.getNextSibling();return e}getCommonAncestor(e){const t=this.getParents(),n=e.getParents();dx(this)&&t.unshift(this),dx(e)&&n.unshift(e);const r=t.length,o=n.length;if(0===r||0===o||t[r-1]!==n[o-1])return null;const i=new Set(n);for(let e=0;e<r;e++){const n=t[e];if(i.has(n))return n}return null}is(e){return null!=e&&this.__key===e.__key}isBefore(e){if(this===e)return!1;if(e.isParentOf(this))return!0;if(this.isParentOf(e))return!1;const t=this.getCommonAncestor(e);let n=0,r=0,o=this;for(;;){const e=o.getParentOrThrow();if(e===t){n=o.getIndexWithinParent();break}o=e}for(o=e;;){const e=o.getParentOrThrow();if(e===t){r=o.getIndexWithinParent();break}o=e}return n<r}isParentOf(e){const t=this.__key;if(t===e.__key)return!1;let n=e;for(;null!==n;){if(n.__key===t)return!0;n=n.getParent()}return!1}getNodesBetween(e){const t=this.isBefore(e),n=[],r=new Set;let o=this;for(;null!==o;){const i=o.__key;if(r.has(i)||(r.add(i),n.push(o)),o===e)break;const s=dx(o)?t?o.getFirstChild():o.getLastChild():null;if(null!==s){o=s;continue}const a=t?o.getNextSibling():o.getPreviousSibling();if(null!==a){o=a;continue}const l=o.getParentOrThrow();if(r.has(l.__key)||n.push(l),l===e)break;let c=null,u=l;do{if(null===u&&mg(68),c=t?u.getNextSibling():u.getPreviousSibling(),u=u.getParent(),null===u)break;null!==c||r.has(u.__key)||n.push(u)}while(null===c);o=c}return t||n.reverse(),n}isDirty(){const e=Zb()._dirtyLeaves;return null!==e&&e.has(this.__key)}getLatest(){const e=Hg(this.__key);return null===e&&mg(113),e}getWritable(){Gb();const e=Jb(),t=Zb(),n=e._nodeMap,r=this.__key,o=this.getLatest(),i=t._cloneNotNeeded,s=Mb();if(null!==s&&s.setCachedNodes(null),i.has(r))return Ug(o),o;const a=Fv(o);return i.add(r),Ug(a),n.set(r,a),a}getTextContent(){return""}getTextContentSize(){return this.getTextContent().length}createDOM(e,t){mg(70)}updateDOM(e,t,n){mg(71)}exportDOM(e){return{element:this.createDOM(e._config,e)}}exportJSON(){mg(72)}static importJSON(e){mg(18,this.name)}static transform(){return null}remove(e){Wy(this,!0,e)}replace(e,t){Gb();let n=Mb();null!==n&&(n=n.clone()),Tv(this,e);const r=this.getLatest(),o=this.__key,i=e.__key,s=e.getWritable(),a=this.getParentOrThrow().getWritable(),l=a.__size;Wg(s);const c=r.getPreviousSibling(),u=r.getNextSibling(),d=r.__prev,f=r.__next,h=r.__parent;if(Wy(r,!1,!0),null===c?a.__first=i:c.getWritable().__next=i,s.__prev=d,null===u?a.__last=i:u.getWritable().__prev=i,s.__next=f,s.__parent=h,a.__size=l,t&&(dx(this)&&dx(s)||mg(139),this.getChildren().forEach((e=>{s.append(e)}))),wb(n)){Qg(n);const e=n.anchor,t=n.focus;e.key===o&&yb(e,s),t.key===o&&yb(t,s)}return Kg()===o&&$g(i),s}insertAfter(e,t=!0){Gb(),Tv(this,e);const n=this.getWritable(),r=e.getWritable(),o=r.getParent(),i=Mb();let s=!1,a=!1;if(null!==o){const t=e.getIndexWithinParent();if(Wg(r),wb(i)){const e=o.__key,n=i.anchor,r=i.focus;s="element"===n.type&&n.key===e&&n.offset===t+1,a="element"===r.type&&r.key===e&&r.offset===t+1}}const l=this.getNextSibling(),c=this.getParentOrThrow().getWritable(),u=r.__key,d=n.__next;if(null===l?c.__last=u:l.getWritable().__prev=u,c.__size++,n.__next=u,r.__next=d,r.__prev=n.__key,r.__parent=n.__parent,t&&wb(i)){const e=this.getIndexWithinParent();Db(i,c,e+1);const t=c.__key;s&&i.anchor.set(t,e+2,"element"),a&&i.focus.set(t,e+2,"element")}return e}insertBefore(e,t=!0){Gb(),Tv(this,e);const n=this.getWritable(),r=e.getWritable(),o=r.__key;Wg(r);const i=this.getPreviousSibling(),s=this.getParentOrThrow().getWritable(),a=n.__prev,l=this.getIndexWithinParent();null===i?s.__first=o:i.getWritable().__next=o,s.__size++,n.__prev=o,r.__prev=a,r.__next=n.__key,r.__parent=n.__parent;const c=Mb();return t&&wb(c)&&Db(c,this.getParentOrThrow(),l),e}isParentRequired(){return!1}createParentElementNode(){return Sx()}selectStart(){return this.selectPrevious()}selectEnd(){return this.selectNext(0,0)}selectPrevious(e,t){Gb();const n=this.getPreviousSibling(),r=this.getParentOrThrow();if(null===n)return r.select(0,0);if(dx(n))return n.select();if(!db(n)){const e=n.getIndexWithinParent()+1;return r.select(e,e)}return n.select(e,t)}selectNext(e,t){Gb();const n=this.getNextSibling(),r=this.getParentOrThrow();if(null===n)return r.select();if(dx(n))return n.select(0,0);if(!db(n)){const e=n.getIndexWithinParent();return r.select(e,e)}return n.select(e,t)}markDirty(){this.getWritable()}}class $y extends Uy{static getType(){return"linebreak"}static clone(e){return new $y(e.__key)}constructor(e){super(e)}getTextContent(){return"\n"}createDOM(){return document.createElement("br")}updateDOM(){return!1}static importDOM(){return{br:e=>function(e){const t=e.parentElement;if(null!==t&&jv(t)){const n=t.firstChild;if(n===e||n.nextSibling===e&&Yy(n)){const n=t.lastChild;if(n===e||n.previousSibling===e&&Yy(n))return!0}}return!1}(e)||function(e){const t=e.parentElement;if(null!==t&&jv(t)){const n=t.firstChild;if(n===e||n.nextSibling===e&&Yy(n))return!1;const r=t.lastChild;if(r===e||r.previousSibling===e&&Yy(r))return!0}return!1}(e)?null:{conversion:Ky,priority:0}}}static importJSON(e){return Hy()}exportJSON(){return{type:"linebreak",version:1}}}function Ky(e){return{node:Hy()}}function Hy(){return Pv(new $y)}function qy(e){return e instanceof $y}function Yy(e){return e.nodeType===Bm&&/^( |\t|\r?\n)+$/.test(e.textContent||"")}function Gy(e,t){return 16&t?"code":128&t?"mark":32&t?"sub":64&t?"sup":null}function Xy(e,t){return 1&t?"strong":2&t?"em":"span"}function Jy(e,t,n,r,o){const i=r.classList;let s=mv(o,"base");void 0!==s&&i.add(...s),s=mv(o,"underlineStrikethrough");let a=!1;const l=t&qm&&t&Hm;void 0!==s&&(n&qm&&n&Hm?(a=!0,l||i.add(...s)):l&&i.remove(...s));for(const e in lg){const r=lg[e];if(s=mv(o,e),void 0!==s)if(n&r){if(a&&("underline"===e||"strikethrough"===e)){t&r&&i.remove(...s);continue}t&r&&(!l||"underline"!==e)&&"strikethrough"!==e||i.add(...s)}else t&r&&i.remove(...s)}}function Zy(e,t,n){const r=t.firstChild,o=n.isComposing(),i=e+(o?tg:"");if(null==r)t.textContent=i;else{const e=r.nodeValue;if(e!==i)if(o||Nm){const[t,n,o]=function(e,t){const n=e.length,r=t.length;let o=0,i=0;for(;o<n&&o<r&&e[o]===t[o];)o++;for(;i+o<n&&i+o<r&&e[n-i-1]===t[r-i-1];)i++;return[o,n-o-i,t.slice(o,r-i)]}(e,i);0!==n&&r.deleteData(t,n),r.insertData(t,o)}else r.nodeValue=i}}function Qy(e,t,n,r,o,i){Zy(o,e,t);const s=i.theme.text;void 0!==s&&Jy(0,0,r,e,s)}function eb(e,t){const n=document.createElement(t);return n.appendChild(e),n}class tb extends Uy{static getType(){return"text"}static clone(e){return new tb(e.__text,e.__key)}afterCloneFrom(e){super.afterCloneFrom(e),this.__format=e.__format,this.__style=e.__style,this.__mode=e.__mode,this.__detail=e.__detail}constructor(e,t){super(t),this.__text=e,this.__format=0,this.__style="",this.__mode=0,this.__detail=0}getFormat(){return this.getLatest().__format}getDetail(){return this.getLatest().__detail}getMode(){const e=this.getLatest();return hg[e.__mode]}getStyle(){return this.getLatest().__style}isToken(){return 1===this.getLatest().__mode}isComposing(){return this.__key===Kg()}isSegmented(){return 2===this.getLatest().__mode}isDirectionless(){return!!(1&this.getLatest().__detail)}isUnmergeable(){return!!(2&this.getLatest().__detail)}hasFormat(e){const t=lg[e];return!!(this.getFormat()&t)}isSimpleText(){return"text"===this.__type&&0===this.__mode}getTextContent(){return this.getLatest().__text}getFormatFlags(e,t){return Vg(this.getLatest().__format,e,t)}canHaveFormat(){return!0}createDOM(e,t){const n=this.__format,r=Gy(0,n),o=Xy(0,n),i=null===r?o:r,s=document.createElement(i);let a=s;this.hasFormat("code")&&s.setAttribute("spellcheck","false"),null!==r&&(a=document.createElement(o),s.appendChild(a)),Qy(a,this,0,n,this.__text,e);const l=this.__style;return""!==l&&(s.style.cssText=l),s}updateDOM(e,t,n){const r=this.__text,o=e.__format,i=this.__format,s=Gy(0,o),a=Gy(0,i),l=Xy(0,o),c=Xy(0,i);if((null===s?l:s)!==(null===a?c:a))return!0;if(s===a&&l!==c){const e=t.firstChild;null==e&&mg(48);const o=document.createElement(c);return Qy(o,this,0,i,r,n),t.replaceChild(o,e),!1}let u=t;null!==a&&null!==s&&(u=t.firstChild,null==u&&mg(49)),Zy(r,u,this);const d=n.theme.text;void 0!==d&&o!==i&&Jy(0,o,i,u,d);const f=e.__style,h=this.__style;return f!==h&&(t.style.cssText=h),!1}static importDOM(){return{"#text":()=>({conversion:sb,priority:0}),b:()=>({conversion:rb,priority:0}),code:()=>({conversion:cb,priority:0}),em:()=>({conversion:cb,priority:0}),i:()=>({conversion:cb,priority:0}),s:()=>({conversion:cb,priority:0}),span:()=>({conversion:nb,priority:0}),strong:()=>({conversion:cb,priority:0}),sub:()=>({conversion:cb,priority:0}),sup:()=>({conversion:cb,priority:0}),u:()=>({conversion:cb,priority:0})}}static importJSON(e){const t=ub(e.text);return t.setFormat(e.format),t.setDetail(e.detail),t.setMode(e.mode),t.setStyle(e.style),t}exportDOM(e){let{element:t}=super.exportDOM(e);return null!==t&&Nv(t)||mg(132),t.style.whiteSpace="pre-wrap",this.hasFormat("bold")&&(t=eb(t,"b")),this.hasFormat("italic")&&(t=eb(t,"i")),this.hasFormat("strikethrough")&&(t=eb(t,"s")),this.hasFormat("underline")&&(t=eb(t,"u")),{element:t}}exportJSON(){return{detail:this.getDetail(),format:this.getFormat(),mode:this.getMode(),style:this.getStyle(),text:this.getTextContent(),type:"text",version:1}}selectionTransform(e,t){}setFormat(e){const t=this.getWritable();return t.__format="string"==typeof e?lg[e]:e,t}setDetail(e){const t=this.getWritable();return t.__detail="string"==typeof e?cg[e]:e,t}setStyle(e){const t=this.getWritable();return t.__style=e,t}toggleFormat(e){const t=Vg(this.getFormat(),e,null);return this.setFormat(t)}toggleDirectionless(){const e=this.getWritable();return e.__detail^=1,e}toggleUnmergeable(){const e=this.getWritable();return e.__detail^=2,e}setMode(e){const t=fg[e];if(this.__mode===t)return this;const n=this.getWritable();return n.__mode=t,n}setTextContent(e){if(this.__text===e)return this;const t=this.getWritable();return t.__text=e,t}select(e,t){Gb();let n=e,r=t;const o=Mb(),i=this.getTextContent(),s=this.__key;if("string"==typeof i){const e=i.length;void 0===n&&(n=e),void 0===r&&(r=e)}else n=0,r=0;if(!wb(o))return Nb(s,n,s,r,"text","text");{const e=Kg();e!==o.anchor.key&&e!==o.focus.key||$g(s),o.setTextNodeRange(this,n,this,r)}return o}selectStart(){return this.select(0,0)}selectEnd(){const e=this.getTextContentSize();return this.select(e,e)}spliceText(e,t,n,r){const o=this.getWritable(),i=o.__text,s=n.length;let a=e;a<0&&(a=s+a,a<0&&(a=0));const l=Mb();if(r&&wb(l)){const t=e+s;l.setTextNodeRange(o,t,o,t)}const c=i.slice(0,a)+n+i.slice(a+t);return o.__text=c,o}canInsertTextBefore(){return!0}canInsertTextAfter(){return!0}splitText(...e){Gb();const t=this.getLatest(),n=t.getTextContent(),r=t.__key,o=Kg(),i=new Set(e),s=[],a=n.length;let l="";for(let e=0;e<a;e++)""!==l&&i.has(e)&&(s.push(l),l=""),l+=n[e];""!==l&&s.push(l);const c=s.length;if(0===c)return[];if(s[0]===n)return[t];const u=s[0],d=t.getParent();let f;const h=t.getFormat(),p=t.getStyle(),m=t.__detail;let g=!1;t.isSegmented()?(f=ub(u),f.__format=h,f.__style=p,f.__detail=m,g=!0):(f=t.getWritable(),f.__text=u);const v=Mb(),y=[f];let b=u.length;for(let e=1;e<c;e++){const t=s[e],n=t.length,i=ub(t).getWritable();i.__format=h,i.__style=p,i.__detail=m;const a=i.__key,l=b+n;if(wb(v)){const e=v.anchor,t=v.focus;e.key===r&&"text"===e.type&&e.offset>b&&e.offset<=l&&(e.key=a,e.offset-=b,v.dirty=!0),t.key===r&&"text"===t.type&&t.offset>b&&t.offset<=l&&(t.key=a,t.offset-=b,v.dirty=!0)}o===r&&$g(a),b=l,y.push(i)}if(null!==d){!function(e){const t=e.getPreviousSibling(),n=e.getNextSibling();null!==t&&Ug(t),null!==n&&Ug(n)}(this);const e=d.getWritable(),t=this.getIndexWithinParent();g?(e.splice(t,0,y),this.remove()):e.splice(t,1,y),wb(v)&&Db(v,d,t,c-1)}return y}mergeWithSibling(e){const t=e===this.getPreviousSibling();t||e===this.getNextSibling()||mg(50);const n=this.__key,r=e.__key,o=this.__text,i=o.length;Kg()===r&&$g(n);const s=Mb();if(wb(s)){const o=s.anchor,a=s.focus;null!==o&&o.key===r&&(zb(o,t,n,e,i),s.dirty=!0),null!==a&&a.key===r&&(zb(a,t,n,e,i),s.dirty=!0)}const a=e.__text,l=t?a+o:o+a;this.setTextContent(l);const c=this.getWritable();return e.remove(),c}isTextEntity(){return!1}}function nb(e){return{forChild:fb(e.style),node:null}}function rb(e){const t=e,n="normal"===t.style.fontWeight;return{forChild:fb(t.style,n?void 0:"bold"),node:null}}const ob=new WeakMap;function ib(e){return"PRE"===e.nodeName||e.nodeType===zm&&void 0!==e.style&&void 0!==e.style.whiteSpace&&e.style.whiteSpace.startsWith("pre")}function sb(e){const t=e;null===e.parentElement&&mg(129);let n=t.textContent||"";if(null!==function(e){let t,n=e.parentNode;const r=[e];for(;null!==n&&void 0===(t=ob.get(n))&&!ib(n);)r.push(n),n=n.parentNode;const o=void 0===t?n:t;for(let e=0;e<r.length;e++)ob.set(r[e],o);return o}(t)){const e=n.split(/(\r?\n|\t)/),t=[],r=e.length;for(let n=0;n<r;n++){const r=e[n];"\n"===r||"\r\n"===r?t.push(Hy()):"\t"===r?t.push(pb()):""!==r&&t.push(ub(r))}return{node:t}}if(n=n.replace(/\r/g,"").replace(/[ \t\n]+/g," "),""===n)return{node:null};if(" "===n[0]){let e=t,r=!0;for(;null!==e&&null!==(e=ab(e,!1));){const t=e.textContent||"";if(t.length>0){/[ \t\n]$/.test(t)&&(n=n.slice(1)),r=!1;break}}r&&(n=n.slice(1))}if(" "===n[n.length-1]){let e=t,r=!0;for(;null!==e&&null!==(e=ab(e,!0));)if((e.textContent||"").replace(/^( |\t|\r?\n)+/,"").length>0){r=!1;break}r&&(n=n.slice(0,n.length-1))}return""===n?{node:null}:{node:ub(n)}}function ab(e,t){let n=e;for(;;){let e;for(;null===(e=t?n.nextSibling:n.previousSibling);){const e=n.parentElement;if(null===e)return null;n=e}if(n=e,n.nodeType===zm){const e=n.style.display;if(""===e&&!Av(n)||""!==e&&!e.startsWith("inline"))return null}let r=n;for(;null!==(r=t?n.firstChild:n.lastChild);)n=r;if(n.nodeType===Bm)return n;if("BR"===n.nodeName)return null}}const lb={code:"code",em:"italic",i:"italic",s:"strikethrough",strong:"bold",sub:"subscript",sup:"superscript",u:"underline"};function cb(e){const t=lb[e.nodeName.toLowerCase()];return void 0===t?{node:null}:{forChild:fb(e.style,t),node:null}}function ub(e=""){return Pv(new tb(e))}function db(e){return e instanceof tb}function fb(e,t){const n=e.fontWeight,r=e.textDecoration.split(" "),o="700"===n||"bold"===n,i=r.includes("line-through"),s="italic"===e.fontStyle,a=r.includes("underline"),l=e.verticalAlign;return e=>db(e)?(o&&!e.hasFormat("bold")&&e.toggleFormat("bold"),i&&!e.hasFormat("strikethrough")&&e.toggleFormat("strikethrough"),s&&!e.hasFormat("italic")&&e.toggleFormat("italic"),a&&!e.hasFormat("underline")&&e.toggleFormat("underline"),"sub"!==l||e.hasFormat("subscript")||e.toggleFormat("subscript"),"super"!==l||e.hasFormat("superscript")||e.toggleFormat("superscript"),t&&!e.hasFormat(t)&&e.toggleFormat(t),e):e}class hb extends tb{static getType(){return"tab"}static clone(e){return new hb(e.__key)}afterCloneFrom(e){super.afterCloneFrom(e),this.__text=e.__text}constructor(e){super("\t",e),this.__detail=2}static importDOM(){return null}static importJSON(e){const t=pb();return t.setFormat(e.format),t.setStyle(e.style),t}exportJSON(){return{...super.exportJSON(),type:"tab",version:1}}setTextContent(e){mg(126)}setDetail(e){mg(127)}setMode(e){mg(128)}canInsertTextBefore(){return!1}canInsertTextAfter(){return!1}}function pb(){return Pv(new hb)}class mb{constructor(e,t,n){this._selection=null,this.key=e,this.offset=t,this.type=n}is(e){return this.key===e.key&&this.offset===e.offset&&this.type===e.type}isBefore(e){let t=this.getNode(),n=e.getNode();const r=this.offset,o=e.offset;if(dx(t)){const e=t.getDescendantByIndex(r);t=null!=e?e:t}if(dx(n)){const e=n.getDescendantByIndex(o);n=null!=e?e:n}return t===n?r<o:t.isBefore(n)}getNode(){const e=Hg(this.key);return null===e&&mg(20),e}set(e,t,n){const r=this._selection,o=this.key;this.key=e,this.offset=t,this.type=n,Yb()||(Kg()===o&&$g(e),null!==r&&(r.setCachedNodes(null),r.dirty=!0))}}function gb(e,t,n){return new mb(e,t,n)}function vb(e,t){let n=t.__key,r=e.offset,o="element";if(db(t)){o="text";const e=t.getTextContentSize();r>e&&(r=e)}else if(!dx(t)){const e=t.getNextSibling();if(db(e))n=e.__key,r=0,o="text";else{const e=t.getParent();e&&(n=e.__key,r=t.getIndexWithinParent()+1)}}e.set(n,r,o)}function yb(e,t){if(dx(t)){const n=t.getLastDescendant();dx(n)||db(n)?vb(e,n):vb(e,t)}else vb(e,t)}function bb(e,t,n,r){e.key=t,e.offset=n,e.type=r}class xb{constructor(e){this._cachedNodes=null,this._nodes=e,this.dirty=!1}getCachedNodes(){return this._cachedNodes}setCachedNodes(e){this._cachedNodes=e}is(e){if(!Sb(e))return!1;const t=this._nodes,n=e._nodes;return t.size===n.size&&Array.from(t).every((e=>n.has(e)))}isCollapsed(){return!1}isBackward(){return!1}getStartEndPoints(){return null}add(e){this.dirty=!0,this._nodes.add(e),this._cachedNodes=null}delete(e){this.dirty=!0,this._nodes.delete(e),this._cachedNodes=null}clear(){this.dirty=!0,this._nodes.clear(),this._cachedNodes=null}has(e){return this._nodes.has(e)}clone(){return new xb(new Set(this._nodes))}extract(){return this.getNodes()}insertRawText(e){}insertText(){}insertNodes(e){const t=this.getNodes(),n=t.length,r=t[n-1];let o;if(db(r))o=r.select();else{const e=r.getIndexWithinParent()+1;o=r.getParentOrThrow().select(e,e)}o.insertNodes(e);for(let e=0;e<n;e++)t[e].remove()}getNodes(){const e=this._cachedNodes;if(null!==e)return e;const t=this._nodes,n=[];for(const e of t){const t=Hg(e);null!==t&&n.push(t)}return Yb()||(this._cachedNodes=n),n}getTextContent(){const e=this.getNodes();let t="";for(let n=0;n<e.length;n++)t+=e[n].getTextContent();return t}}function wb(e){return e instanceof Eb}class Eb{constructor(e,t,n,r){this.anchor=e,this.focus=t,e._selection=this,t._selection=this,this._cachedNodes=null,this.format=n,this.style=r,this.dirty=!1}getCachedNodes(){return this._cachedNodes}setCachedNodes(e){this._cachedNodes=e}is(e){return!!wb(e)&&this.anchor.is(e.anchor)&&this.focus.is(e.focus)&&this.format===e.format&&this.style===e.style}isCollapsed(){return this.anchor.is(this.focus)}getNodes(){const e=this._cachedNodes;if(null!==e)return e;const t=this.anchor,n=this.focus,r=t.isBefore(n),o=r?t:n,i=r?n:t;let s=o.getNode(),a=i.getNode();const l=o.offset,c=i.offset;if(dx(s)){const e=s.getDescendantByIndex(l);s=null!=e?e:s}if(dx(a)){let e=a.getDescendantByIndex(c);null!==e&&e!==s&&a.getChildAtIndex(c)===e&&(e=e.getPreviousSibling()),a=null!=e?e:a}let u;return u=s.is(a)?dx(s)&&s.getChildrenSize()>0?[]:[s]:s.getNodesBetween(a),Yb()||(this._cachedNodes=u),u}setTextNodeRange(e,t,n,r){bb(this.anchor,e.__key,t,"text"),bb(this.focus,n.__key,r,"text"),this._cachedNodes=null,this.dirty=!0}getTextContent(){const e=this.getNodes();if(0===e.length)return"";const t=e[0],n=e[e.length-1],r=this.anchor,o=this.focus,i=r.isBefore(o),[s,a]=kb(this);let l="",c=!0;for(let u=0;u<e.length;u++){const d=e[u];if(dx(d)&&!d.isInline())c||(l+="\n"),c=!d.isEmpty();else if(c=!1,db(d)){let e=d.getTextContent();d===t?d===n?"element"===r.type&&"element"===o.type&&o.offset!==r.offset||(e=s<a?e.slice(s,a):e.slice(a,s)):e=i?e.slice(s):e.slice(a):d===n&&(e=i?e.slice(0,a):e.slice(0,s)),l+=e}else!px(d)&&!qy(d)||d===n&&this.isCollapsed()||(l+=d.getTextContent())}return l}applyDOMRange(e){const t=Zb(),n=t.getEditorState()._selection,r=Rb(e.startContainer,e.startOffset,e.endContainer,e.endOffset,t,n);if(null===r)return;const[o,i]=r;bb(this.anchor,o.key,o.offset,o.type),bb(this.focus,i.key,i.offset,i.type),this._cachedNodes=null}clone(){const e=this.anchor,t=this.focus;return new Eb(gb(e.key,e.offset,e.type),gb(t.key,t.offset,t.type),this.format,this.style)}toggleFormat(e){this.format=Vg(this.format,e,null),this.dirty=!0}setStyle(e){this.style=e,this.dirty=!0}hasFormat(e){const t=lg[e];return!!(this.format&t)}insertRawText(e){const t=e.split(/(\r?\n|\t)/),n=[],r=t.length;for(let e=0;e<r;e++){const r=t[e];"\n"===r||"\r\n"===r?n.push(Hy()):"\t"===r?n.push(pb()):n.push(ub(r))}this.insertNodes(n)}insertText(e){const t=this.anchor,n=this.focus,r=this.format,o=this.style;let i=t,s=n;!this.isCollapsed()&&n.isBefore(t)&&(i=n,s=t),"element"===i.type&&function(e,t,n,r){const o=e.getNode(),i=o.getChildAtIndex(e.offset),s=ub(),a=gx(o)?Sx().append(s):s;s.setFormat(n),s.setStyle(r),null===i?o.append(a):i.insertBefore(a),e.is(t)&&t.set(s.__key,0,"text"),e.set(s.__key,0,"text")}(i,s,r,o);const a=i.offset;let l=s.offset;const c=this.getNodes(),u=c.length;let d=c[0];db(d)||mg(26);const f=d.getTextContent().length,h=d.getParentOrThrow();let p=c[u-1];if(1===u&&"element"===s.type&&(l=f,s.set(i.key,l,"text")),this.isCollapsed()&&a===f&&(d.isSegmented()||d.isToken()||!d.canInsertTextAfter()||!h.canInsertTextAfter()&&null===d.getNextSibling())){let t=d.getNextSibling();if(db(t)&&t.canInsertTextBefore()&&!Fg(t)||(t=ub(),t.setFormat(r),t.setStyle(o),h.canInsertTextAfter()?d.insertAfter(t):h.insertAfter(t)),t.select(0,0),d=t,""!==e)return void this.insertText(e)}else if(this.isCollapsed()&&0===a&&(d.isSegmented()||d.isToken()||!d.canInsertTextBefore()||!h.canInsertTextBefore()&&null===d.getPreviousSibling())){let t=d.getPreviousSibling();if(db(t)&&!Fg(t)||(t=ub(),t.setFormat(r),h.canInsertTextBefore()?d.insertBefore(t):h.insertBefore(t)),t.select(),d=t,""!==e)return void this.insertText(e)}else if(d.isSegmented()&&a!==f){const e=ub(d.getTextContent());e.setFormat(r),d.replace(e),d=e}else if(!this.isCollapsed()&&""!==e){const t=p.getParent();if(!h.canInsertTextBefore()||!h.canInsertTextAfter()||dx(t)&&(!t.canInsertTextBefore()||!t.canInsertTextAfter()))return this.insertText(""),Ob(this.anchor,this.focus,null),void this.insertText(e)}if(1===u){if(d.isToken()){const t=ub(e);return t.select(),void d.replace(t)}const t=d.getFormat(),n=d.getStyle();if(a!==l||t===r&&n===o){if(function(e){return e instanceof hb}(d)){const t=ub(e);return t.setFormat(r),t.setStyle(o),t.select(),void d.replace(t)}}else{if(""!==d.getTextContent()){const t=ub(e);if(t.setFormat(r),t.setStyle(o),t.select(),0===a)d.insertBefore(t,!1);else{const[e]=d.splitText(a);e.insertAfter(t,!1)}return void(t.isComposing()&&"text"===this.anchor.type&&(this.anchor.offset-=e.length))}d.setFormat(r),d.setStyle(o)}const i=l-a;d=d.spliceText(a,i,e,!0),""===d.getTextContent()?d.remove():"text"===this.anchor.type&&(d.isComposing()?this.anchor.offset-=e.length:(this.format=t,this.style=n))}else{const t=new Set([...d.getParentKeys(),...p.getParentKeys()]),n=dx(d)?d:d.getParentOrThrow();let r=dx(p)?p:p.getParentOrThrow(),o=p;if(!n.is(r)&&r.isInline())do{o=r,r=r.getParentOrThrow()}while(r.isInline());if("text"===s.type&&(0!==l||""===p.getTextContent())||"element"===s.type&&p.getIndexWithinParent()<l)if(db(p)&&!p.isToken()&&l!==p.getTextContentSize()){if(p.isSegmented()){const e=ub(p.getTextContent());p.replace(e),p=e}gx(s.getNode())||"text"!==s.type||(p=p.spliceText(0,l,"")),t.add(p.__key)}else{const e=p.getParentOrThrow();e.canBeEmpty()||1!==e.getChildrenSize()?p.remove():e.remove()}else t.add(p.__key);const i=r.getChildren(),h=new Set(c),m=n.is(r),g=n.isInline()&&null===d.getNextSibling()?n:d;for(let e=i.length-1;e>=0;e--){const t=i[e];if(t.is(d)||dx(t)&&t.isParentOf(d))break;t.isAttached()&&(!h.has(t)||t.is(o)?m||g.insertAfter(t,!1):t.remove())}if(!m){let e=r,n=null;for(;null!==e;){const r=e.getChildren(),o=r.length;(0===o||r[o-1].is(n))&&(t.delete(e.__key),n=e),e=e.getParent()}}if(d.isToken())if(a===f)d.select();else{const t=ub(e);t.select(),d.replace(t)}else d=d.spliceText(a,f-a,e,!0),""===d.getTextContent()?d.remove():d.isComposing()&&"text"===this.anchor.type&&(this.anchor.offset-=e.length);for(let e=1;e<u;e++){const n=c[e],r=n.__key;t.has(r)||n.remove()}}}removeText(){this.insertText("")}formatText(e){if(this.isCollapsed())return this.toggleFormat(e),void $g(null);const t=this.getNodes(),n=[];for(const e of t)db(e)&&n.push(e);const r=n.length;if(0===r)return this.toggleFormat(e),void $g(null);const o=this.anchor,i=this.focus,s=this.isBackward(),a=s?i:o,l=s?o:i;let c=0,u=n[0],d="element"===a.type?0:a.offset;if("text"===a.type&&d===u.getTextContentSize()&&(c=1,u=n[1],d=0),null==u)return;const f=u.getFormatFlags(e,null),h=r-1;let p=n[h];const m="text"===l.type?l.offset:p.getTextContentSize();if(u.is(p)){if(d===m)return;if(Fg(u)||0===d&&m===u.getTextContentSize())u.setFormat(f);else{const e=u.splitText(d,m),t=0===d?e[0]:e[1];t.setFormat(f),"text"===a.type&&a.set(t.__key,0,"text"),"text"===l.type&&l.set(t.__key,m-d,"text")}return void(this.format=f)}0===d||Fg(u)||([,u]=u.splitText(d),d=0),u.setFormat(f);const g=p.getFormatFlags(e,f);m>0&&(m===p.getTextContentSize()||Fg(p)||([p]=p.splitText(m)),p.setFormat(g));for(let t=c+1;t<h;t++){const r=n[t],o=r.getFormatFlags(e,g);r.setFormat(o)}"text"===a.type&&a.set(u.__key,d,"text"),"text"===l.type&&l.set(p.__key,m,"text"),this.format=f|g}insertNodes(e){if(0===e.length)return;if("root"===this.anchor.key){this.insertParagraph();const t=Mb();return wb(t)||mg(134),t.insertNodes(e)}const t=Iv((this.isBackward()?this.focus:this.anchor).getNode(),Mv),n=e[e.length-1];if("__language"in t&&dx(t)){if("__language"in e[0])this.insertText(e[0].getTextContent());else{const r=Bb(this);t.splice(r,0,e),n.selectEnd()}return}if(!e.some((e=>(dx(e)||px(e))&&!e.isInline()))){dx(t)||mg(135);const r=Bb(this);return t.splice(r,0,e),void n.selectEnd()}const r=function(e){const t=Sx();let n=null;for(let r=0;r<e.length;r++){const o=e[r],i=qy(o);if(i||px(o)&&o.isInline()||dx(o)&&o.isInline()||db(o)||o.isParentRequired()){if(null===n&&(n=o.createParentElementNode(),t.append(n),i))continue;null!==n&&n.append(o)}else t.append(o),n=null}return t}(e),o=r.getLastDescendant(),i=r.getChildren(),s=dx(t)&&t.isEmpty()?null:this.insertParagraph(),a=i[i.length-1];let l=i[0];var c;dx(c=l)&&Mv(c)&&!c.isEmpty()&&dx(t)&&(!t.isEmpty()||t.canMergeWhenEmpty())&&(dx(t)||mg(135),t.append(...l.getChildren()),l=i[1]),l&&function(e,t){const n=t.getParentOrThrow().getLastChild();let r=t;const o=[t];for(;r!==n;)r.getNextSibling()||mg(140),r=r.getNextSibling(),o.push(r);let i=e;for(const e of o)i=i.insertAfter(e)}(t,l);const u=Iv(o,Mv);s&&dx(u)&&(s.canMergeWhenEmpty()||Mv(a))&&(u.append(...s.getChildren()),s.remove()),dx(t)&&t.isEmpty()&&t.remove(),o.selectEnd();const d=dx(t)?t.getLastChild():null;qy(d)&&u!==t&&d.remove()}insertParagraph(){if("root"===this.anchor.key){const e=Sx();return Jg().splice(this.anchor.offset,0,[e]),e.select(),e}const e=Bb(this),t=Iv(this.anchor.getNode(),Mv);dx(t)||mg(136);const n=t.getChildAtIndex(e),r=n?[n,...n.getNextSiblings()]:[],o=t.insertNewAfter(this,!1);return o?(o.append(...r),o.selectStart(),o):null}insertLineBreak(e){const t=Hy();if(this.insertNodes([t]),e){const e=t.getParentOrThrow(),n=t.getIndexWithinParent();e.select(n,n)}}extract(){const e=this.getNodes(),t=e.length,n=t-1,r=this.anchor,o=this.focus;let i=e[0],s=e[n];const[a,l]=kb(this);if(0===t)return[];if(1===t){if(db(i)&&!this.isCollapsed()){const e=a>l?l:a,t=a>l?a:l,n=i.splitText(e,t),r=0===e?n[0]:n[1];return null!=r?[r]:[]}return[i]}const c=r.isBefore(o);if(db(i)){const t=c?a:l;t===i.getTextContentSize()?e.shift():0!==t&&([,i]=i.splitText(t),e[0]=i)}if(db(s)){const t=s.getTextContent().length,r=c?l:a;0===r?e.pop():r!==t&&([s]=s.splitText(r),e[n]=s)}return e}modify(e,t,n){const r=this.focus,o=this.anchor,i="move"===e,s=yv(r,t);if(px(s)&&!s.isIsolated()){if(i&&s.isKeyboardSelectable()){const e=Ab();return e.add(s.__key),void Qg(e)}const e=t?s.getPreviousSibling():s.getNextSibling();if(db(e)){const n=e.__key,s=t?e.getTextContent().length:0;return r.set(n,s,"text"),void(i&&o.set(n,s,"text"))}{const n=s.getParentOrThrow();let a,l;return dx(e)?(l=e.__key,a=t?e.getChildrenSize():0):(a=s.getIndexWithinParent(),l=n.__key,t||a++),r.set(l,a,"element"),void(i&&o.set(l,a,"element"))}}const a=Zb(),l=Rv(a._window);if(!l)return;const c=a._blockCursorElement,u=a._rootElement;if(null===u||null===c||!dx(s)||s.isInline()||s.canBeEmpty()||_n(c,a,u),function(e,t,n,r){e.modify(t,n,r)}(l,e,t?"backward":"forward",n),l.rangeCount>0){const e=l.getRangeAt(0),n=this.anchor.getNode(),r=gx(n)?n:function(e){let t=e.getParentOrThrow();for(;null!==t;){if(Cv(t))return t;t=t.getParentOrThrow()}return t}(n);if(this.applyDOMRange(e),this.dirty=!0,!i){const n=this.getNodes(),o=[];let i=!1;for(let e=0;e<n.length;e++){const t=n[e];_v(t,r)?o.push(t):i=!0}if(i&&o.length>0)if(t){const e=o[0];dx(e)?e.selectStart():e.getParentOrThrow().selectStart()}else{const e=o[o.length-1];dx(e)?e.selectEnd():e.getParentOrThrow().selectEnd()}l.anchorNode===e.startContainer&&l.anchorOffset===e.startOffset||function(e){const t=e.focus,n=e.anchor,r=n.key,o=n.offset,i=n.type;bb(n,t.key,t.offset,t.type),bb(t,r,o,i),e._cachedNodes=null}(this)}}}forwardDeletion(e,t,n){if(!n&&("element"===e.type&&dx(t)&&e.offset===t.getChildrenSize()||"text"===e.type&&e.offset===t.getTextContentSize())){const e=t.getParent(),n=t.getNextSibling()||(null===e?null:e.getNextSibling());if(dx(n)&&n.isShadowRoot())return!0}return!1}deleteCharacter(e){const t=this.isCollapsed();if(this.isCollapsed()){const t=this.anchor;let n=t.getNode();if(this.forwardDeletion(t,n,e))return;const r=this.focus,o=yv(r,e);if(px(o)&&!o.isIsolated()){if(o.isKeyboardSelectable()&&dx(n)&&0===n.getChildrenSize()){n.remove();const e=Ab();e.add(o.__key),Qg(e)}else o.remove(),Zb().dispatchCommand(Wp,void 0);return}if(!e&&dx(o)&&dx(n)&&n.isEmpty())return n.remove(),void o.selectStart();if(this.modify("extend",e,"character"),this.isCollapsed()){if(e&&0===t.offset&&("element"===t.type?t.getNode():t.getNode().getParentOrThrow()).collapseAtStart(this))return}else{const o="text"===r.type?r.getNode():null;if(n="text"===t.type?t.getNode():null,null!==o&&o.isSegmented()){const t=r.offset,i=o.getTextContentSize();if(o.is(n)||e&&t!==i||!e&&0!==t)return void Cb(o,e,t)}else if(null!==n&&n.isSegmented()){const r=t.offset,i=n.getTextContentSize();if(n.is(o)||e&&0!==r||!e&&r!==i)return void Cb(n,e,r)}!function(e,t){const n=e.anchor,r=e.focus,o=n.getNode();if(o===r.getNode()&&"text"===n.type&&"text"===r.type){const e=n.offset,i=r.offset,s=e<i,a=s?e:i,l=s?i:e,c=l-1;a!==c&&(nv(o.getTextContent().slice(a,l))||(t?r.offset=c:n.offset=c))}}(this,e)}}if(this.removeText(),e&&!t&&this.isCollapsed()&&"element"===this.anchor.type&&0===this.anchor.offset){const e=this.anchor.getNode();e.isEmpty()&&gx(e.getParent())&&0===e.getIndexWithinParent()&&e.collapseAtStart(this)}}deleteLine(e){if(this.isCollapsed()){const t="element"===this.anchor.type;if(t&&this.insertText(" "),this.modify("extend",e,"lineboundary"),0===(e?this.focus:this.anchor).offset&&this.modify("extend",e,"character"),t){const t=e?this.anchor:this.focus;t.set(t.key,t.offset+1,t.type)}}this.removeText()}deleteWord(e){if(this.isCollapsed()){const t=this.anchor,n=t.getNode();if(this.forwardDeletion(t,n,e))return;this.modify("extend",e,"word")}this.removeText()}isBackward(){return this.focus.isBefore(this.anchor)}getStartEndPoints(){return[this.anchor,this.focus]}}function Sb(e){return e instanceof xb}function _b(e){const t=e.offset;if("text"===e.type)return t;const n=e.getNode();return t===n.getChildrenSize()?n.getTextContent().length:0}function kb(e){const t=e.getStartEndPoints();if(null===t)return[0,0];const[n,r]=t;return"element"===n.type&&"element"===r.type&&n.key===r.key&&n.offset===r.offset?[0,0]:[_b(n),_b(r)]}function Cb(e,t,n){const r=e,o=r.getTextContent().split(/(?=\s)/g),i=o.length;let s=0,a=0;for(let e=0;e<i;e++){const r=e===i-1;if(a=s,s+=o[e].length,t&&s===n||s>n||r){o.splice(e,1),r&&(a=void 0);break}}const l=o.join("").trim();""===l?r.remove():(r.setTextContent(l),r.select(a,a))}function Pb(e,t,n,r){let o,i=t;if(e.nodeType===zm){let s=!1;const a=e.childNodes,l=a.length,c=r._blockCursorElement;i===l&&(s=!0,i=l-1);let u=a[i],d=!1;if(u===c)u=a[i+1],d=!0;else if(null!==c){const n=c.parentNode;e===n&&t>Array.prototype.indexOf.call(n.children,c)&&i--}if(o=ev(u),db(o))i=tv(o,s);else{let r=ev(e);if(null===r)return null;if(dx(r)){i=Math.min(r.getChildrenSize(),i);let e=r.getChildAtIndex(i);if(dx(e)&&function(e,t,n){const r=e.getParent();return null===n||null===r||!r.canBeEmpty()||r!==n.getNode()}(e,0,n)){const t=s?e.getLastDescendant():e.getFirstDescendant();null===t?r=e:(e=t,r=dx(e)?e:e.getParentOrThrow()),i=0}db(e)?(o=e,r=null,i=tv(e,s)):e!==r&&s&&!d&&i++}else{const n=r.getIndexWithinParent();i=0===t&&px(r)&&ev(e)===r?n:n+1,r=r.getParentOrThrow()}if(dx(r))return gb(r.__key,i,"element")}}else o=ev(e);return db(o)?gb(o.__key,i,"text"):null}function Tb(e,t,n){const r=e.offset,o=e.getNode();if(0===r){const r=o.getPreviousSibling(),i=o.getParent();if(t){if((n||!t)&&null===r&&dx(i)&&i.isInline()){const t=i.getPreviousSibling();db(t)&&(e.key=t.__key,e.offset=t.getTextContent().length)}}else dx(r)&&!n&&r.isInline()?(e.key=r.__key,e.offset=r.getChildrenSize(),e.type="element"):db(r)&&(e.key=r.__key,e.offset=r.getTextContent().length)}else if(r===o.getTextContent().length){const r=o.getNextSibling(),i=o.getParent();if(t&&dx(r)&&r.isInline())e.key=r.__key,e.offset=0,e.type="element";else if((n||t)&&null===r&&dx(i)&&i.isInline()&&!i.canInsertTextAfter()){const t=i.getNextSibling();db(t)&&(e.key=t.__key,e.offset=0)}}}function Ob(e,t,n){if("text"===e.type&&"text"===t.type){const r=e.isBefore(t),o=e.is(t);Tb(e,r,o),Tb(t,!r,o),o&&(t.key=e.key,t.offset=e.offset,t.type=e.type);const i=Zb();if(i.isComposing()&&i._compositionKey!==e.key&&wb(n)){const r=n.anchor,o=n.focus;bb(e,r.key,r.offset,r.type),bb(t,o.key,o.offset,o.type)}}}function Rb(e,t,n,r,o,i){if(null===e||null===n||!Mg(o,e,n))return null;const s=Pb(e,t,wb(i)?i.anchor:null,o);if(null===s)return null;const a=Pb(n,r,wb(i)?i.focus:null,o);if(null===a)return null;if("element"===s.type&&"element"===a.type){const t=ev(e),r=ev(n);if(px(t)&&px(r))return null}return Ob(s,a,i),[s,a]}function Nb(e,t,n,r,o,i){const s=Jb(),a=new Eb(gb(e,t,o),gb(n,r,i),0,"");return a.dirty=!0,s._selection=a,a}function Ab(){return new xb(new Set)}function jb(e,t,n,r){const o=n._window;if(null===o)return null;const i=r||o.event,s=i?i.type:void 0,a="selectionchange"===s,l=!yg&&(a||"beforeinput"===s||"compositionstart"===s||"compositionend"===s||"click"===s&&i&&3===i.detail||"drop"===s||void 0===s);let c,u,d,f;if(wb(e)&&!l)return e.clone();if(null===t)return null;if(c=t.anchorNode,u=t.focusNode,d=t.anchorOffset,f=t.focusOffset,a&&wb(e)&&!Mg(n,c,u))return e.clone();const h=Rb(c,d,u,f,n,e);if(null===h)return null;const[p,m]=h;return new Eb(p,m,wb(e)?e.format:0,wb(e)?e.style:"")}function Mb(){return Jb()._selection}function Ib(){return Zb()._editorState._selection}function Db(e,t,n,r=1){const o=e.anchor,i=e.focus,s=o.getNode(),a=i.getNode();if(!t.is(s)&&!t.is(a))return;const l=t.__key;if(e.isCollapsed()){const t=o.offset;if(n<=t&&r>0||n<t&&r<0){const n=Math.max(0,t+r);o.set(l,n,"element"),i.set(l,n,"element"),Lb(e)}}else{const s=e.isBackward(),a=s?i:o,c=a.getNode(),u=s?o:i,d=u.getNode();if(t.is(c)){const e=a.offset;(n<=e&&r>0||n<e&&r<0)&&a.set(l,Math.max(0,e+r),"element")}if(t.is(d)){const e=u.offset;(n<=e&&r>0||n<e&&r<0)&&u.set(l,Math.max(0,e+r),"element")}}Lb(e)}function Lb(e){const t=e.anchor,n=t.offset,r=e.focus,o=r.offset,i=t.getNode(),s=r.getNode();if(e.isCollapsed()){if(!dx(i))return;const e=i.getChildrenSize(),o=n>=e,s=o?i.getChildAtIndex(e-1):i.getChildAtIndex(n);if(db(s)){let e=0;o&&(e=s.getTextContentSize()),t.set(s.__key,e,"text"),r.set(s.__key,e,"text")}}else{if(dx(i)){const e=i.getChildrenSize(),r=n>=e,o=r?i.getChildAtIndex(e-1):i.getChildAtIndex(n);if(db(o)){let e=0;r&&(e=o.getTextContentSize()),t.set(o.__key,e,"text")}}if(dx(s)){const e=s.getChildrenSize(),t=o>=e,n=t?s.getChildAtIndex(e-1):s.getChildAtIndex(o);if(db(n)){let e=0;t&&(e=n.getTextContentSize()),r.set(n.__key,e,"text")}}}}function Fb(e,t,n,r,o){let i=null,s=0,a=null;null!==r?(i=r.__key,db(r)?(s=r.getTextContentSize(),a="text"):dx(r)&&(s=r.getChildrenSize(),a="element")):null!==o&&(i=o.__key,db(o)?a="text":dx(o)&&(a="element")),null!==i&&null!==a?e.set(i,s,a):(s=t.getIndexWithinParent(),-1===s&&(s=n.getChildrenSize()),e.set(n.__key,s,"element"))}function zb(e,t,n,r,o){"text"===e.type?(e.key=n,t||(e.offset+=o)):e.offset>r.getIndexWithinParent()&&(e.offset-=1)}function Bb(e){let t=e;e.isCollapsed()||t.removeText();const n=Mb();wb(n)&&(t=n),wb(t)||mg(161);const r=t.anchor;let o=r.getNode(),i=r.offset;for(;!Mv(o);)[o,i]=Vb(o,i);return i}function Vb(e,t){const n=e.getParent();if(!n){const e=Sx();return Jg().append(e),e.select(),[Jg(),0]}if(db(e)){const r=e.splitText(t);if(0===r.length)return[n,e.getIndexWithinParent()];const o=0===t?0:1;return[n,r[0].getIndexWithinParent()+o]}if(!dx(e)||0===t)return[n,e.getIndexWithinParent()];const r=e.getChildAtIndex(t);if(r){const n=new Eb(gb(e.__key,t,"element"),gb(e.__key,t,"element"),0,""),o=e.insertNewAfter(n);o&&o.append(r,...r.getNextSiblings())}return[n,e.getIndexWithinParent()+1]}let Wb=null,Ub=null,$b=!1,Kb=!1,Hb=0;const qb={characterData:!0,childList:!0,subtree:!0};function Yb(){return $b||null!==Wb&&Wb._readOnly}function Gb(){$b&&mg(13)}function Xb(){Hb>99&&mg(14)}function Jb(){return null===Wb&&mg(195,Qb()),Wb}function Zb(){return null===Ub&&mg(196,Qb()),Ub}function Qb(){let e=0;const t=new Set,n=Tx.version;if("undefined"!=typeof window)for(const r of document.querySelectorAll("[contenteditable]")){const o=Lg(r);if(Ig(o))e++;else if(o){let e=String(o.constructor.version||"<0.17.1");e===n&&(e+=" (separately built, likely a bundler configuration issue)"),t.add(e)}}let r=` Detected on the page: ${e} compatible editor(s) with version ${n}`;return t.size&&(r+=` and incompatible editors with versions ${Array.from(t).join(", ")}`),r}function ex(e,t,n){const r=t.__type,o=function(e,t){const n=e._nodes.get(t);return void 0===n&&mg(30,t),n}(e,r);let i=n.get(r);void 0===i&&(i=Array.from(o.transforms),n.set(r,i));const s=i.length;for(let e=0;e<s&&(i[e](t),t.isAttached());e++);}function tx(e,t){return void 0!==e&&e.__key!==t&&e.isAttached()}function nx(e,t){const n=e.type,r=t.get(n);void 0===r&&mg(17,n);const o=r.klass;e.type!==o.getType()&&mg(18,o.name);const i=o.importJSON(e),s=e.children;if(dx(i)&&Array.isArray(s))for(let e=0;e<s.length;e++){const n=nx(s[e],t);i.append(n)}return i}function rx(e,t,n){const r=Wb,o=$b,i=Ub;Wb=t,$b=!0,Ub=e;try{return n()}finally{Wb=r,$b=o,Ub=i}}function ox(e,t){const n=e._pendingEditorState,r=e._rootElement,o=e._headless||null===r;if(null===n)return;const i=e._editorState,s=i._selection,a=n._selection,l=e._dirtyType!==Vm,c=Wb,u=$b,d=Ub,f=e._updating,h=e._observer;let p=null;if(e._pendingEditorState=null,e._editorState=n,!o&&l&&null!==h){Ub=e,Wb=n,$b=!1,e._updating=!0;try{const t=e._dirtyType,r=e._dirtyElements,o=e._dirtyLeaves;h.disconnect(),p=function(e,t,n,r,o,i){Xv="",ey="",Jv="",ty=r===Wm,ry=null,Vv=n,Bv=n._config,Wv=n._nodes,Uv=Vv._listeners.mutation,$v=o,Kv=i,Hv=e._nodeMap,qv=t._nodeMap,ny=t._readOnly,Yv=new Map(n._keyToDOMMap);const s=new Map;return Gv=s,gy("root",null),Vv=void 0,Wv=void 0,$v=void 0,Kv=void 0,Hv=void 0,qv=void 0,Bv=void 0,Yv=void 0,Gv=void 0,s}(i,n,e,t,r,o)}catch(t){if(t instanceof Error&&e._onError(t),Kb)throw t;return Px(e,null,r,n),Cg(e),e._dirtyType=Wm,Kb=!0,ox(e,i),void(Kb=!1)}finally{h.observe(r,qb),e._updating=f,Wb=c,$b=u,Ub=d}}n._readOnly||(n._readOnly=!0);const m=e._dirtyLeaves,g=e._dirtyElements,v=e._normalizedNodes,y=e._updateTags,b=e._deferred;l&&(e._dirtyType=Vm,e._cloneNotNeeded.clear(),e._dirtyLeaves=new Set,e._dirtyElements=new Map,e._normalizedNodes=new Set,e._updateTags=new Set),function(e,t){const n=e._decorators;let r=e._pendingDecorators||n;const o=t._nodeMap;let i;for(i in r)o.has(i)||(r===n&&(r=Gg(e)),delete r[i])}(e,n);const x=o?null:Rv(e._window);if(e._editable&&null!==x&&(l||null===a||a.dirty)){Ub=e,Wb=n;try{if(null!==h&&h.disconnect(),l||null===a||a.dirty){const t=e._blockCursorElement;null!==t&&_n(t,e,r),function(e,t,n,r,o,i){const s=r.anchorNode,a=r.focusNode,l=r.anchorOffset,c=r.focusOffset,u=document.activeElement;if(o.has("collaboration")&&u!==i||null!==u&&jg(u))return;if(!wb(t))return void(null!==e&&Mg(n,s,a)&&r.removeAllRanges());const d=t.anchor,f=t.focus,h=d.key,p=f.key,m=Ev(n,h),g=Ev(n,p),v=d.offset,y=f.offset,b=t.format,x=t.style,w=t.isCollapsed();let E=m,S=g,_=!1;if("text"===d.type){E=Bg(m);const e=d.getNode();_=e.getFormat()!==b||e.getStyle()!==x}else wb(e)&&"text"===e.anchor.type&&(_=!0);var k,C,P,T,O;if("text"===f.type&&(S=Bg(g)),null!==E&&null!==S&&(w&&(null===e||_||wb(e)&&(e.format!==b||e.style!==x))&&(k=b,C=x,P=v,T=h,O=performance.now(),Ny=[k,C,P,T,O]),l!==v||c!==y||s!==E||a!==S||"Range"===r.type&&w||(null!==u&&i.contains(u)||i.focus({preventScroll:!0}),"element"===d.type))){try{r.setBaseAndExtent(E,v,S,y)}catch(e){}if(!o.has("skip-scroll-into-view")&&t.isCollapsed()&&null!==i&&i===document.activeElement){const e=t instanceof Eb&&"element"===t.anchor.type?E.childNodes[v]||null:r.rangeCount>0?r.getRangeAt(0):null;if(null!==e){let t;if(e instanceof Text){const n=document.createRange();n.selectNode(e),t=n.getBoundingClientRect()}else t=e.getBoundingClientRect();!function(e,t,n){const r=n.ownerDocument,o=r.defaultView;if(null===o)return;let{top:i,bottom:s}=t,a=0,l=0,c=n;for(;null!==c;){const t=c===r.body;if(t)a=0,l=kv(e).innerHeight;else{const e=c.getBoundingClientRect();a=e.top,l=e.bottom}let n=0;if(i<a?n=-(a-i):s>l&&(n=s-l),0!==n)if(t)o.scrollBy(0,n);else{const e=c.scrollTop;c.scrollTop+=n;const t=c.scrollTop-e;i-=t,s-=t}if(t)break;c=Sv(c)}}(n,t,i)}}Py=!0}}(s,a,e,x,y,r)}(function(e,t,n){let r=e._blockCursorElement;if(wb(n)&&n.isCollapsed()&&"element"===n.anchor.type&&t.contains(document.activeElement)){const o=n.anchor,i=o.getNode(),s=o.offset;let a=!1,l=null;if(s===i.getChildrenSize())Ov(i.getChildAtIndex(s-1))&&(a=!0);else{const t=i.getChildAtIndex(s);if(Ov(t)){const n=t.getPreviousSibling();(null===n||Ov(n))&&(a=!0,l=e.getElementByKey(t.__key))}}if(a){const n=e.getElementByKey(i.__key);return null===r&&(e._blockCursorElement=r=function(e){const t=e.theme,n=document.createElement("div");n.contentEditable="false",n.setAttribute("data-lexical-cursor","true");let r=t.blockCursor;if(void 0!==r){if("string"==typeof r){const e=gg(r);r=t.blockCursor=e}void 0!==r&&n.classList.add(...r)}return n}(e._config)),t.style.caretColor="transparent",void(null===l?n.appendChild(r):n.insertBefore(r,l))}}null!==r&&_n(r,e,t)})(e,r,a),null!==h&&h.observe(r,qb)}finally{Ub=d,Wb=c}}null!==p&&function(e,t,n,r,o){const i=Array.from(e._listeners.mutation),s=i.length;for(let e=0;e<s;e++){const[s,a]=i[e],l=t.get(a);void 0!==l&&s(l,{dirtyLeaves:r,prevEditorState:o,updateTags:n})}}(e,p,y,m,i),wb(a)||null===a||null!==s&&s.is(a)||e.dispatchCommand(Wp,void 0);const w=e._pendingDecorators;null!==w&&(e._decorators=w,e._pendingDecorators=null,ix("decorator",e,!0,w)),function(e,t,n){const r=Xg(t),o=Xg(n);r!==o&&ix("textcontent",e,!0,o)}(e,t||i,n),ix("update",e,!0,{dirtyElements:g,dirtyLeaves:m,editorState:n,normalizedNodes:v,prevEditorState:t||i,tags:y}),function(e,t){if(e._deferred=[],0!==t.length){const n=e._updating;e._updating=!0;try{for(let e=0;e<t.length;e++)t[e]()}finally{e._updating=n}}}(e,b),function(e){const t=e._updates;if(0!==t.length){const n=t.shift();if(n){const[t,r]=n;lx(e,t,r)}}}(e)}function ix(e,t,n,...r){const o=t._updating;t._updating=n;try{const n=Array.from(t._listeners[e]);for(let e=0;e<n.length;e++)n[e].apply(null,r)}finally{t._updating=o}}function sx(e,t,n){if(!1===e._updating||Ub!==e){let r=!1;return e.update((()=>{r=sx(e,t,n)})),r}const r=rv(e);for(let o=4;o>=0;o--)for(let i=0;i<r.length;i++){const s=r[i]._commands.get(t);if(void 0!==s){const t=s[o];if(void 0!==t){const r=Array.from(t),o=r.length;for(let t=0;t<o;t++)if(!0===r[t](n,e))return!0}}}return!1}function ax(e,t){const n=e._updates;let r=t||!1;for(;0!==n.length;){const t=n.shift();if(t){const[n,o]=t;let i,s;if(void 0!==o){if(i=o.onUpdate,s=o.tag,o.skipTransforms&&(r=!0),o.discrete){const t=e._pendingEditorState;null===t&&mg(191),t._flushSync=!0}i&&e._deferred.push(i),s&&e._updateTags.add(s)}n()}}return r}function lx(e,t,n){const r=e._updateTags;let o,i,s=!1,a=!1;void 0!==n&&(o=n.onUpdate,i=n.tag,null!=i&&r.add(i),s=n.skipTransforms||!1,a=n.discrete||!1),o&&e._deferred.push(o);const l=e._editorState;let c=e._pendingEditorState,u=!1;(null===c||c._readOnly)&&(c=e._pendingEditorState=new bx(new Map((c||l)._nodeMap)),u=!0),c._flushSync=a;const d=Wb,f=$b,h=Ub,p=e._updating;Wb=c,$b=!1,e._updating=!0,Ub=e;try{u&&(e._headless?null!==l._selection&&(c._selection=l._selection.clone()):c._selection=function(e){const t=e.getEditorState()._selection,n=Rv(e._window);return wb(t)||null==t?jb(t,n,e,null):t.clone()}(e));const n=e._compositionKey;t(),s=ax(e,s),function(e,t){const n=t.getEditorState()._selection,r=e._selection;if(wb(r)){const e=r.anchor,t=r.focus;let o;if("text"===e.type&&(o=e.getNode(),o.selectionTransform(n,r)),"text"===t.type){const e=t.getNode();o!==e&&e.selectionTransform(n,r)}}}(c,e),e._dirtyType!==Vm&&(s?function(e,t){const n=t._dirtyLeaves,r=e._nodeMap;for(const e of n){const t=r.get(e);db(t)&&t.isAttached()&&t.isSimpleText()&&!t.isUnmergeable()&&Og(t)}}(c,e):function(e,t){const n=t._dirtyLeaves,r=t._dirtyElements,o=e._nodeMap,i=Kg(),s=new Map;let a=n,l=a.size,c=r,u=c.size;for(;l>0||u>0;){if(l>0){t._dirtyLeaves=new Set;for(const e of a){const r=o.get(e);db(r)&&r.isAttached()&&r.isSimpleText()&&!r.isUnmergeable()&&Og(r),void 0!==r&&tx(r,i)&&ex(t,r,s),n.add(e)}if(a=t._dirtyLeaves,l=a.size,l>0){Hb++;continue}}t._dirtyLeaves=new Set,t._dirtyElements=new Map;for(const e of c){const n=e[0],a=e[1];if("root"!==n&&!a)continue;const l=o.get(n);void 0!==l&&tx(l,i)&&ex(t,l,s),r.set(n,a)}a=t._dirtyLeaves,l=a.size,c=t._dirtyElements,u=c.size,Hb++}t._dirtyLeaves=n,t._dirtyElements=r}(c,e),ax(e),function(e,t,n,r){const o=e._nodeMap,i=t._nodeMap,s=[];for(const[e]of r){const t=i.get(e);void 0!==t&&(t.isAttached()||(dx(t)&&zv(t,e,o,i,s,r),o.has(e)||r.delete(e),s.push(e)))}for(const e of s)i.delete(e);for(const e of n){const t=i.get(e);void 0===t||t.isAttached()||(o.has(e)||n.delete(e),i.delete(e))}}(l,c,e._dirtyLeaves,e._dirtyElements)),n!==e._compositionKey&&(c._flushSync=!0);const r=c._selection;if(wb(r)){const e=c._nodeMap,t=r.anchor.key,n=r.focus.key;void 0!==e.get(t)&&void 0!==e.get(n)||mg(19)}else Sb(r)&&0===r._nodes.size&&(c._selection=null)}catch(t){return t instanceof Error&&e._onError(t),e._pendingEditorState=l,e._dirtyType=Wm,e._cloneNotNeeded.clear(),e._dirtyLeaves=new Set,e._dirtyElements.clear(),void ox(e)}finally{Wb=d,$b=f,Ub=h,e._updating=p,Hb=0}const m=e._dirtyType!==Vm||function(e,t){const n=t.getEditorState()._selection,r=e._selection;if(null!==r){if(r.dirty||!r.is(n))return!0}else if(null!==n)return!0;return!1}(c,e);m?c._flushSync?(c._flushSync=!1,ox(e)):u&&Ag((()=>{ox(e)})):(c._flushSync=!1,u&&(r.clear(),e._deferred=[],e._pendingEditorState=null))}function cx(e,t,n){e._updating?e._updates.push([t,n]):lx(e,t,n)}class ux extends Uy{constructor(e){super(e),this.__first=null,this.__last=null,this.__size=0,this.__format=0,this.__style="",this.__indent=0,this.__dir=null}afterCloneFrom(e){super.afterCloneFrom(e),this.__first=e.__first,this.__last=e.__last,this.__size=e.__size,this.__indent=e.__indent,this.__format=e.__format,this.__style=e.__style,this.__dir=e.__dir}getFormat(){return this.getLatest().__format}getFormatType(){const e=this.getFormat();return dg[e]||""}getStyle(){return this.getLatest().__style}getIndent(){return this.getLatest().__indent}getChildren(){const e=[];let t=this.getFirstChild();for(;null!==t;)e.push(t),t=t.getNextSibling();return e}getChildrenKeys(){const e=[];let t=this.getFirstChild();for(;null!==t;)e.push(t.__key),t=t.getNextSibling();return e}getChildrenSize(){return this.getLatest().__size}isEmpty(){return 0===this.getChildrenSize()}isDirty(){const e=Zb()._dirtyElements;return null!==e&&e.has(this.__key)}isLastChild(){const e=this.getLatest(),t=this.getParentOrThrow().getLastChild();return null!==t&&t.is(e)}getAllTextNodes(){const e=[];let t=this.getFirstChild();for(;null!==t;){if(db(t)&&e.push(t),dx(t)){const n=t.getAllTextNodes();e.push(...n)}t=t.getNextSibling()}return e}getFirstDescendant(){let e=this.getFirstChild();for(;dx(e);){const t=e.getFirstChild();if(null===t)break;e=t}return e}getLastDescendant(){let e=this.getLastChild();for(;dx(e);){const t=e.getLastChild();if(null===t)break;e=t}return e}getDescendantByIndex(e){const t=this.getChildren(),n=t.length;if(e>=n){const e=t[n-1];return dx(e)&&e.getLastDescendant()||e||null}const r=t[e];return dx(r)&&r.getFirstDescendant()||r||null}getFirstChild(){const e=this.getLatest().__first;return null===e?null:Hg(e)}getFirstChildOrThrow(){const e=this.getFirstChild();return null===e&&mg(45,this.__key),e}getLastChild(){const e=this.getLatest().__last;return null===e?null:Hg(e)}getLastChildOrThrow(){const e=this.getLastChild();return null===e&&mg(96,this.__key),e}getChildAtIndex(e){const t=this.getChildrenSize();let n,r;if(e<t/2){for(n=this.getFirstChild(),r=0;null!==n&&r<=e;){if(r===e)return n;n=n.getNextSibling(),r++}return null}for(n=this.getLastChild(),r=t-1;null!==n&&r>=e;){if(r===e)return n;n=n.getPreviousSibling(),r--}return null}getTextContent(){let e="";const t=this.getChildren(),n=t.length;for(let r=0;r<n;r++){const o=t[r];e+=o.getTextContent(),dx(o)&&r!==n-1&&!o.isInline()&&(e+=ng)}return e}getTextContentSize(){let e=0;const t=this.getChildren(),n=t.length;for(let r=0;r<n;r++){const o=t[r];e+=o.getTextContentSize(),dx(o)&&r!==n-1&&!o.isInline()&&(e+=ng.length)}return e}getDirection(){return this.getLatest().__dir}hasFormat(e){if(""!==e){const t=ug[e];return!!(this.getFormat()&t)}return!1}select(e,t){Gb();const n=Mb();let r=e,o=t;const i=this.getChildrenSize();if(!this.canBeEmpty())if(0===e&&0===t){const e=this.getFirstChild();if(db(e)||dx(e))return e.select(0,0)}else if(!(void 0!==e&&e!==i||void 0!==t&&t!==i)){const e=this.getLastChild();if(db(e)||dx(e))return e.select()}void 0===r&&(r=i),void 0===o&&(o=i);const s=this.__key;return wb(n)?(n.anchor.set(s,r,"element"),n.focus.set(s,o,"element"),n.dirty=!0,n):Nb(s,r,s,o,"element","element")}selectStart(){const e=this.getFirstDescendant();return e?e.selectStart():this.select()}selectEnd(){const e=this.getLastDescendant();return e?e.selectEnd():this.select()}clear(){const e=this.getWritable();return this.getChildren().forEach((e=>e.remove())),e}append(...e){return this.splice(this.getChildrenSize(),0,e)}setDirection(e){const t=this.getWritable();return t.__dir=e,t}setFormat(e){return this.getWritable().__format=""!==e?ug[e]:0,this}setStyle(e){return this.getWritable().__style=e||"",this}setIndent(e){return this.getWritable().__indent=e,this}splice(e,t,n){const r=n.length,o=this.getChildrenSize(),i=this.getWritable(),s=i.__key,a=[],l=[],c=this.getChildAtIndex(e+t);let u=null,d=o-t+r;if(0!==e)if(e===o)u=this.getLastChild();else{const t=this.getChildAtIndex(e);null!==t&&(u=t.getPreviousSibling())}if(t>0){let e=null===u?this.getFirstChild():u.getNextSibling();for(let n=0;n<t;n++){null===e&&mg(100);const t=e.getNextSibling(),n=e.__key;Wg(e.getWritable()),l.push(n),e=t}}let f=u;for(let e=0;e<r;e++){const t=n[e];null!==f&&t.is(f)&&(u=f=f.getPreviousSibling());const r=t.getWritable();r.__parent===s&&d--,Wg(r);const o=t.__key;if(null===f)i.__first=o,r.__prev=null;else{const e=f.getWritable();e.__next=o,r.__prev=e.__key}t.__key===s&&mg(76),r.__parent=s,a.push(o),f=t}if(e+t===o)null!==f&&(f.getWritable().__next=null,i.__last=f.__key);else if(null!==c){const e=c.getWritable();if(null!==f){const t=f.getWritable();e.__prev=f.__key,t.__next=c.__key}else e.__prev=null}if(i.__size=d,l.length){const e=Mb();if(wb(e)){const t=new Set(l),n=new Set(a),{anchor:r,focus:o}=e;fx(r,t,n)&&Fb(r,r.getNode(),this,u,c),fx(o,t,n)&&Fb(o,o.getNode(),this,u,c),0!==d||this.canBeEmpty()||Cv(this)||this.remove()}}return i}exportJSON(){return{children:[],direction:this.getDirection(),format:this.getFormatType(),indent:this.getIndent(),type:"element",version:1}}insertNewAfter(e,t){return null}canIndent(){return!0}collapseAtStart(e){return!1}excludeFromCopy(e){return!1}canReplaceWith(e){return!0}canInsertAfter(e){return!0}canBeEmpty(){return!0}canInsertTextBefore(){return!0}canInsertTextAfter(){return!0}isInline(){return!1}isShadowRoot(){return!1}canMergeWith(e){return!1}extractWithChild(e,t,n){return!1}canMergeWhenEmpty(){return!1}}function dx(e){return e instanceof ux}function fx(e,t,n){let r=e.getNode();for(;r;){const e=r.__key;if(t.has(e)&&!n.has(e))return!0;r=r.getParent()}return!1}class hx extends Uy{constructor(e){super(e)}decorate(e,t){mg(47)}isIsolated(){return!1}isInline(){return!0}isKeyboardSelectable(){return!0}}function px(e){return e instanceof hx}class mx extends ux{static getType(){return"root"}static clone(){return new mx}constructor(){super("root"),this.__cachedText=null}getTopLevelElementOrThrow(){mg(51)}getTextContent(){const e=this.__cachedText;return!Yb()&&Zb()._dirtyType!==Vm||null===e?super.getTextContent():e}remove(){mg(52)}replace(e){mg(53)}insertBefore(e){mg(54)}insertAfter(e){mg(55)}updateDOM(e,t){return!1}append(...e){for(let t=0;t<e.length;t++){const n=e[t];dx(n)||px(n)||mg(56)}return super.append(...e)}static importJSON(e){const t=Jg();return t.setFormat(e.format),t.setIndent(e.indent),t.setDirection(e.direction),t}exportJSON(){return{children:[],direction:this.getDirection(),format:this.getFormatType(),indent:this.getIndent(),type:"root",version:1}}collapseAtStart(){return!0}}function gx(e){return e instanceof mx}function vx(){return new bx(new Map([["root",new mx]]))}function yx(e){const t=e.exportJSON(),n=e.constructor;if(t.type!==n.getType()&&mg(130,n.name),dx(e)){const r=t.children;Array.isArray(r)||mg(59,n.name);const o=e.getChildren();for(let e=0;e<o.length;e++){const t=yx(o[e]);r.push(t)}}return t}class bx{constructor(e,t){this._nodeMap=e,this._selection=t||null,this._flushSync=!1,this._readOnly=!1}isEmpty(){return 1===this._nodeMap.size&&null===this._selection}read(e,t){return rx(t&&t.editor||null,this,e)}clone(e){const t=new bx(this._nodeMap,void 0===e?this._selection:e);return t._readOnly=!0,t}toJSON(){return rx(null,this,(()=>({root:yx(Jg())})))}}class xx extends ux{static getType(){return"artificial"}createDOM(e){return document.createElement("div")}}class wx extends ux{constructor(e){super(e),this.__textFormat=0,this.__textStyle=""}static getType(){return"paragraph"}getTextFormat(){return this.getLatest().__textFormat}setTextFormat(e){const t=this.getWritable();return t.__textFormat=e,t}hasTextFormat(e){const t=lg[e];return!!(this.getTextFormat()&t)}getTextStyle(){return this.getLatest().__textStyle}setTextStyle(e){const t=this.getWritable();return t.__textStyle=e,t}static clone(e){return new wx(e.__key)}afterCloneFrom(e){super.afterCloneFrom(e),this.__textFormat=e.__textFormat,this.__textStyle=e.__textStyle}createDOM(e){const t=document.createElement("p"),n=mv(e.theme,"paragraph");return void 0!==n&&t.classList.add(...n),t}updateDOM(e,t,n){return!1}static importDOM(){return{p:e=>({conversion:Ex,priority:0})}}exportDOM(e){const{element:t}=super.exportDOM(e);if(t&&Nv(t)){this.isEmpty()&&t.append(document.createElement("br"));const e=this.getFormatType();t.style.textAlign=e;const n=this.getDirection();n&&(t.dir=n);const r=this.getIndent();r>0&&(t.style.textIndent=20*r+"px")}return{element:t}}static importJSON(e){const t=Sx();return t.setFormat(e.format),t.setIndent(e.indent),t.setDirection(e.direction),t.setTextFormat(e.textFormat),t}exportJSON(){return{...super.exportJSON(),textFormat:this.getTextFormat(),textStyle:this.getTextStyle(),type:"paragraph",version:1}}insertNewAfter(e,t){const n=Sx();n.setTextFormat(e.format),n.setTextStyle(e.style);const r=this.getDirection();return n.setDirection(r),n.setFormat(this.getFormatType()),n.setStyle(this.getTextStyle()),this.insertAfter(n,t),n}collapseAtStart(){const e=this.getChildren();if(0===e.length||db(e[0])&&""===e[0].getTextContent().trim()){if(null!==this.getNextSibling())return this.selectNext(),this.remove(),!0;if(null!==this.getPreviousSibling())return this.selectPrevious(),this.remove(),!0}return!1}}function Ex(e){const t=Sx();if(e.style){t.setFormat(e.style.textAlign);const n=parseInt(e.style.textIndent,10)/20;n>0&&t.setIndent(n)}return{node:t}}function Sx(){return Pv(new wx)}function kx(e){return e instanceof wx}const Cx=1;function Px(e,t,n,r){const o=e._keyToDOMMap;o.clear(),e._editorState=vx(),e._pendingEditorState=r,e._compositionKey=null,e._dirtyType=Vm,e._cloneNotNeeded.clear(),e._dirtyLeaves=new Set,e._dirtyElements.clear(),e._normalizedNodes=new Set,e._updateTags=new Set,e._updates=[],e._blockCursorElement=null;const i=e._observer;null!==i&&(i.disconnect(),e._observer=null),null!==t&&(t.textContent=""),null!==n&&(n.textContent="",o.set("root",n))}class Tx{constructor(e,t,n,r,o,i,s){this._parentEditor=t,this._rootElement=null,this._editorState=e,this._pendingEditorState=null,this._compositionKey=null,this._deferred=[],this._keyToDOMMap=new Map,this._updates=[],this._updating=!1,this._listeners={decorator:new Set,editable:new Set,mutation:new Map,root:new Set,textcontent:new Set,update:new Set},this._commands=new Map,this._config=r,this._nodes=n,this._decorators={},this._pendingDecorators=null,this._dirtyType=Vm,this._cloneNotNeeded=new Set,this._dirtyLeaves=new Set,this._dirtyElements=new Map,this._normalizedNodes=new Set,this._updateTags=new Set,this._observer=null,this._key=ov(),this._onError=o,this._htmlConversions=i,this._editable=s,this._headless=null!==t&&t._headless,this._window=null,this._blockCursorElement=null}isComposing(){return null!=this._compositionKey}registerUpdateListener(e){const t=this._listeners.update;return t.add(e),()=>{t.delete(e)}}registerEditableListener(e){const t=this._listeners.editable;return t.add(e),()=>{t.delete(e)}}registerDecoratorListener(e){const t=this._listeners.decorator;return t.add(e),()=>{t.delete(e)}}registerTextContentListener(e){const t=this._listeners.textcontent;return t.add(e),()=>{t.delete(e)}}registerRootListener(e){const t=this._listeners.root;return e(this._rootElement,null),t.add(e),()=>{e(null,this._rootElement),t.delete(e)}}registerCommand(e,t,n){void 0===n&&mg(35);const r=this._commands;r.has(e)||r.set(e,[new Set,new Set,new Set,new Set,new Set]);const o=r.get(e);void 0===o&&mg(36,String(e));const i=o[n];return i.add(t),()=>{i.delete(t),o.every((e=>0===e.size))&&r.delete(e)}}registerMutationListener(e,t,n){const r=this.resolveRegisteredNodeAfterReplacements(this.getRegisteredNode(e)).klass,o=this._listeners.mutation;o.set(t,r);const i=n&&n.skipInitialization;return void 0===i||i||this.initializeMutationListener(t,r),()=>{o.delete(t)}}getRegisteredNode(e){const t=this._nodes.get(e.getType());return void 0===t&&mg(37,e.name),t}resolveRegisteredNodeAfterReplacements(e){for(;e.replaceWithKlass;)e=this.getRegisteredNode(e.replaceWithKlass);return e}initializeMutationListener(e,t){const n=this._editorState,r=function(e){if(!e._readOnly&&e.isEmpty())return Lv;e._readOnly||mg(192);let t=Dv.get(e);if(!t){t=new Map,Dv.set(e,t);for(const[n,r]of e._nodeMap){const e=r.__type;let o=t.get(e);o||(o=new Map,t.set(e,o)),o.set(n,r)}}return t}(n).get(t.getType());if(!r)return;const o=new Map;for(const e of r.keys())o.set(e,"created");o.size>0&&e(o,{dirtyLeaves:new Set,prevEditorState:n,updateTags:new Set(["registerMutationListener"])})}registerNodeTransformToKlass(e,t){const n=this.getRegisteredNode(e);return n.transforms.add(t),n}registerNodeTransform(e,t){const n=this.registerNodeTransformToKlass(e,t),r=[n],o=n.replaceWithKlass;if(null!=o){const e=this.registerNodeTransformToKlass(o,t);r.push(e)}var i;return i=e.getType(),cx(this,(()=>{const e=Jb();if(e.isEmpty())return;if("root"===i)return void Jg().markDirty();const t=e._nodeMap;for(const[,e]of t)e.markDirty()}),null===this._pendingEditorState?{tag:"history-merge"}:void 0),()=>{r.forEach((e=>e.transforms.delete(t)))}}hasNode(e){return this._nodes.has(e.getType())}hasNodes(e){return e.every(this.hasNode.bind(this))}dispatchCommand(e,t){return xv(this,e,t)}getDecorators(){return this._decorators}getRootElement(){return this._rootElement}getKey(){return this._key}setRootElement(e){const t=this._rootElement;if(e!==t){const n=mv(this._config.theme,"root"),r=this._pendingEditorState||this._editorState;if(this._rootElement=e,Px(this,t,e,r),null!==t&&(this._config.disableEvents||function(e){const t=e.ownerDocument,n=Cy.get(t);void 0===n&&mg(162);const r=n-1;r>=0||mg(164),Cy.set(t,r),0===r&&t.removeEventListener("selectionchange",zy);const o=Lg(e);Ig(o)?(function(e){if(null!==e._parentEditor){const t=rv(e),n=t[t.length-1]._key;Fy.get(n)===e&&Fy.delete(n)}else Fy.delete(e._key)}(o),e.__lexicalEditor=null):o&&mg(198);const i=Ly(e);for(let e=0;e<i.length;e++)i[e]();e.__lexicalEventHandles=[]}(t),null!=n&&t.classList.remove(...n)),null!==e){const t=function(e){const t=e.ownerDocument;return t&&t.defaultView||null}(e),r=e.style;r.userSelect="text",r.whiteSpace="pre-wrap",r.wordBreak="break-word",e.setAttribute("data-lexical-editor","true"),this._window=t,this._dirtyType=Wm,Cg(this),this._updateTags.add("history-merge"),ox(this),this._config.disableEvents||function(e,t){const n=e.ownerDocument,r=Cy.get(n);(void 0===r||r<1)&&n.addEventListener("selectionchange",zy),Cy.set(n,(r||0)+1),e.__lexicalEditor=t;const o=Ly(e);for(let n=0;n<wy.length;n++){const[r,i]=wy[n],s="function"==typeof i?e=>{Vy(e)||(By(e),(t.isEditable()||"click"===r)&&i(e,t))}:e=>{if(Vy(e))return;By(e);const n=t.isEditable();switch(r){case"cut":return n&&xv(t,bm,e);case"copy":return xv(t,ym,e);case"paste":return n&&xv(t,Yp,e);case"dragstart":return n&&xv(t,mm,e);case"dragover":return n&&xv(t,gm,e);case"dragend":return n&&xv(t,vm,e);case"focus":return n&&xv(t,km,e);case"blur":return n&&xv(t,Cm,e);case"drop":return n&&xv(t,pm,e)}};e.addEventListener(r,s),o.push((()=>{e.removeEventListener(r,s)}))}}(e,this),null!=n&&e.classList.add(...n)}else this._editorState=r,this._pendingEditorState=null,this._window=null;ix("root",this,!1,e,t)}}getElementByKey(e){return this._keyToDOMMap.get(e)||null}getEditorState(){return this._editorState}setEditorState(e,t){e.isEmpty()&&mg(38),kg(this);const n=this._pendingEditorState,r=this._updateTags,o=void 0!==t?t.tag:null;null===n||n.isEmpty()||(null!=o&&r.add(o),ox(this)),this._pendingEditorState=e,this._dirtyType=Wm,this._dirtyElements.set("root",!1),this._compositionKey=null,null!=o&&r.add(o),ox(this)}parseEditorState(e,t){return function(e,t,n){const r=vx(),o=Wb,i=$b,s=Ub,a=t._dirtyElements,l=t._dirtyLeaves,c=t._cloneNotNeeded,u=t._dirtyType;t._dirtyElements=new Map,t._dirtyLeaves=new Set,t._cloneNotNeeded=new Set,t._dirtyType=0,Wb=r,$b=!1,Ub=t;try{const o=t._nodes;nx(e.root,o),n&&n(),r._readOnly=!0}catch(e){e instanceof Error&&t._onError(e)}finally{t._dirtyElements=a,t._dirtyLeaves=l,t._cloneNotNeeded=c,t._dirtyType=u,Wb=o,$b=i,Ub=s}return r}("string"==typeof e?JSON.parse(e):e,this,t)}read(e){return ox(this),this.getEditorState().read(e,{editor:this})}update(e,t){cx(this,e,t)}focus(e,t={}){const n=this._rootElement;null!==n&&(n.setAttribute("autocapitalize","off"),cx(this,(()=>{const e=Mb(),n=Jg();null!==e?e.dirty=!0:0!==n.getChildrenSize()&&("rootStart"===t.defaultSelection?n.selectStart():n.selectEnd())}),{onUpdate:()=>{n.removeAttribute("autocapitalize"),e&&e()},tag:"focus"}),null===this._pendingEditorState&&n.removeAttribute("autocapitalize"))}blur(){const e=this._rootElement;null!==e&&e.blur();const t=Rv(this._window);null!==t&&t.removeAllRanges()}isEditable(){return this._editable}setEditable(e){this._editable!==e&&(this._editable=e,ix("editable",this,!0,e))}toJSON(){return{editorState:this._editorState.toJSON()}}}Tx.version="0.17.1+prod.esm";const Ox="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,Rx=Ox?o.useLayoutEffect:o.useEffect,Nx={tag:"history-merge"};function Ax({initialConfig:e,children:t}){const n=(0,o.useMemo)((()=>{const{theme:t,namespace:n,nodes:r,onError:o,editorState:i,html:s}=e,a=function(e,t){let n=null;return{getTheme:function(){return null!=t?t:null!=n?n.getTheme():null}}}(0,t),l=function(e){const t=e||{},n=Ub,r=t.theme||{},o=void 0===e?n:t.parentEditor||null,i=t.disableEvents||!1,s=vx(),a=t.namespace||(null!==o?o._config.namespace:ov()),l=t.editorState,c=[mx,tb,$y,hb,wx,xx,...t.nodes||[]],{onError:u,html:d}=t,f=void 0===t.editable||t.editable;let h;if(void 0===e&&null!==n)h=n._nodes;else{h=new Map;for(let e=0;e<c.length;e++){let t=c[e],n=null,r=null;if("function"!=typeof t){const e=t;t=e.replace,n=e.with,r=e.withKlass||null}const o=t.getType(),i=t.transform(),s=new Set;null!==i&&s.add(i),h.set(o,{exportDOM:d&&d.export?d.export.get(t):void 0,klass:t,replace:n,replaceWithKlass:r,transforms:s})}}const p=new Tx(s,o,h,{disableEvents:i,namespace:a,theme:r},u||console.error,function(e,t){const n=new Map,r=new Set,o=e=>{Object.keys(e).forEach((t=>{let r=n.get(t);void 0===r&&(r=[],n.set(t,r)),r.push(e[t])}))};return e.forEach((e=>{const t=e.klass.importDOM;if(null==t||r.has(t))return;r.add(t);const n=t.call(e.klass);null!==n&&o(n)})),t&&o(t),n}(h,d?d.import:void 0),f);return void 0!==l&&(p._pendingEditorState=l,p._dirtyType=Wm),p}({editable:e.editable,html:s,namespace:n,nodes:r,onError:e=>o(e,l),theme:t});return function(e,t){if(null!==t)if(void 0===t)e.update((()=>{const t=Jg();if(t.isEmpty()){const n=Sx();t.append(n);const r=Ox?document.activeElement:null;(null!==Mb()||null!==r&&r===e.getRootElement())&&n.select()}}),Nx);else if(null!==t)switch(typeof t){case"string":{const n=e.parseEditorState(t);e.setEditorState(n,Nx);break}case"object":e.setEditorState(t,Nx);break;case"function":e.update((()=>{Jg().isEmpty()&&t(e)}),Nx)}}(l,i),[l,a]}),[]);return Rx((()=>{const t=e.editable,[r]=n;r.setEditable(void 0===t||t)}),[]),(0,iu.jsx)(zp.Provider,{value:n,children:t})}const jx="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?o.useLayoutEffect:o.useEffect;function Mx(e){return{initialValueFn:()=>e.isEditable(),subscribe:t=>e.registerEditableListener(t)}}function Ix(e){return()=>function(e){if(!function(e,t=!0){if(e)return!1;let n=Jg().getTextContent();return t&&(n=n.trim()),""===n}(e,!1))return!1;const t=Jg().getChildren(),n=t.length;if(n>1)return!1;for(let e=0;e<n;e++){const n=t[e];if(px(n))return!1;if(dx(n)){if(!kx(n))return!1;if(0!==n.__indent)return!1;const t=n.getChildren(),r=t.length;for(let n=0;n<r;n++)if(!db(t[e]))return!1}}return!0}(e)}!function(e){e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")}((function(e){const t=new URLSearchParams;t.append("code",e);for(let e=1;e<arguments.length;e++)t.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)})),function(e){e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")}((function(e){const t=new URLSearchParams;t.append("code",e);for(let e=1;e<arguments.length;e++)t.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}));const Dx="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,Lx=Dx&&"documentMode"in document?document.documentMode:null;Dx&&/Mac|iPod|iPhone|iPad/.test(navigator.platform),Dx&&/^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent),!(!Dx||!("InputEvent"in window)||Lx)&&new window.InputEvent("input"),Dx&&/Version\/[\d.]+.*Safari/.test(navigator.userAgent),Dx&&/iPad|iPhone|iPod/.test(navigator.userAgent)&&window.MSStream,Dx&&/Android/.test(navigator.userAgent),Dx&&/^(?=.*Chrome).*/i.test(navigator.userAgent);function Fx(...e){return()=>{for(let t=e.length-1;t>=0;t--)e[t]();e.length=0}}function zx(e,t){const n=yv(e.focus,t);return px(n)&&!n.isIsolated()||dx(n)&&!n.isInline()&&!n.canBeEmpty()}function Bx(e,t,n){const r=function(e){const t=e.anchor.getNode();return"rtl"===(gx(t)?t:t.getParentOrThrow()).getDirection()}(e);!function(e,t,n){e.modify(t?"extend":"move",n,"character")}(e,t,n?!r:r)}function Vx(e,t,n,r=null){let o=null===r||t.isSelected(r);const i=dx(t)&&t.excludeFromCopy("html");let s=t;if(null!==r){let e=Fv(t);e=db(e)&&null!==r?function(e,t){const n=e.getStartEndPoints();if(t.isSelected(e)&&!t.isSegmented()&&!t.isToken()&&null!==n){const[r,o]=n,i=e.isBackward(),s=r.getNode(),a=o.getNode(),l=t.is(s),c=t.is(a);if(l||c){const[n,r]=kb(e),o=s.is(a),l=t.is(i?a:s),c=t.is(i?s:a);let u,d=0;return o?(d=n>r?r:n,u=n>r?n:r):l?(d=i?r:n,u=void 0):c&&(d=0,u=i?n:r),t.__text=t.__text.slice(d,u),t}}return t}(r,e):e,s=e}const a=dx(s)?s.getChildren():[],l=e._nodes.get(s.getType());let c;c=l&&void 0!==l.exportDOM?l.exportDOM(e,s):s.exportDOM(e);const{element:u,after:d}=c;if(!u)return!1;const f=document.createDocumentFragment();for(let n=0;n<a.length;n++){const i=a[n],s=Vx(e,i,f,r);!o&&dx(t)&&s&&t.extractWithChild(i,r,"html")&&(o=!0)}if(o&&!i){if(Nv(u)&&u.append(f),n.append(u),d){const e=d.call(s,u);e&&u.replaceWith(e)}}else n.append(f);return o}Dx&&/AppleWebKit\/[\d.]+/.test(navigator.userAgent),function(e){e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")}((function(e){const t=new URLSearchParams;t.append("code",e);for(let e=1;e<arguments.length;e++)t.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)})),new Map,new Set(["STYLE","SCRIPT"]);var Wx=function(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}((function(e){const t=new URLSearchParams;t.append("code",e);for(let e=1;e<arguments.length;e++)t.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}));function Ux(e,t){const n=e.getData("text/plain")||e.getData("text/uri-list");null!=n&&t.insertRawText(n)}"undefined"!=typeof window&&void 0!==window.document&&window.document.createElement;const $x="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,Kx=$x&&"documentMode"in document?document.documentMode:null,Hx=!(!$x||!("InputEvent"in window)||Kx)&&"getTargetRanges"in new window.InputEvent("input"),qx=$x&&/Version\/[\d.]+.*Safari/.test(navigator.userAgent),Yx=$x&&/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream,Gx=$x&&/^(?=.*Chrome).*/i.test(navigator.userAgent),Xx=$x&&/AppleWebKit\/[\d.]+/.test(navigator.userAgent)&&!Gx;function Jx(e,t){t.update((()=>{if(null!==e){const r=function(e,t){return null!==e&&Object.getPrototypeOf(e).constructor.name===t.name}(e,KeyboardEvent)?null:e.clipboardData,o=Mb();if(null!==o&&null!=r){e.preventDefault();const i=function(e,t=Mb()){return null==t&&Wx(166),wb(t)&&t.isCollapsed()||0===t.getNodes().length?"":function(e,t){if("undefined"==typeof document||"undefined"==typeof window&&void 0===n.g.window)throw new Error("To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.");const r=document.createElement("div"),o=Jg().getChildren();for(let n=0;n<o.length;n++)Vx(e,o[n],r,t);return r.innerHTML}(e,t)}(t);null!==i&&r.setData("text/html",i),r.setData("text/plain",o.getTextContent())}}}))}const Zx="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?o.useLayoutEffect:o.useEffect;function Qx(e){return e.getEditorState().read(Ix(e.isComposing()))}function ew({contentEditable:e,placeholder:t=null,ErrorBoundary:n}){const[r]=Bp(),i=function(e,t){const[n,r]=(0,o.useState)((()=>e.getDecorators()));return Zx((()=>e.registerDecoratorListener((e=>{(0,zn.flushSync)((()=>{r(e)}))}))),[e]),(0,o.useEffect)((()=>{r(e.getDecorators())}),[e]),(0,o.useMemo)((()=>{const r=[],i=Object.keys(n);for(let s=0;s<i.length;s++){const a=i[s],l=(0,iu.jsx)(t,{onError:t=>e._onError(t),children:(0,iu.jsx)(o.Suspense,{fallback:null,children:n[a]})}),c=e.getElementByKey(a);null!==c&&r.push((0,zn.createPortal)(l,c,a))}return r}),[t,n,e])}(r,n);return function(e){Zx((()=>Fx(function(e){return Fx(e.registerCommand($p,(e=>{const t=Mb();return!!wb(t)&&(t.deleteCharacter(e),!0)}),0),e.registerCommand(Xp,(e=>{const t=Mb();return!!wb(t)&&(t.deleteWord(e),!0)}),0),e.registerCommand(Jp,(e=>{const t=Mb();return!!wb(t)&&(t.deleteLine(e),!0)}),0),e.registerCommand(qp,(e=>{const t=Mb();if(!wb(t))return!1;if("string"==typeof e)t.insertText(e);else{const n=e.dataTransfer;if(null!=n)Ux(n,t);else{const n=e.data;n&&t.insertText(n)}}return!0}),0),e.registerCommand(Gp,(()=>{const e=Mb();return!!wb(e)&&(e.removeText(),!0)}),0),e.registerCommand(Kp,(e=>{const t=Mb();return!!wb(t)&&(t.insertLineBreak(e),!0)}),0),e.registerCommand(Hp,(()=>{const e=Mb();return!!wb(e)&&(e.insertLineBreak(),!0)}),0),e.registerCommand(om,(e=>{const t=Mb();if(!wb(t))return!1;const n=e,r=n.shiftKey;return!!zx(t,!0)&&(n.preventDefault(),Bx(t,r,!0),!0)}),0),e.registerCommand(nm,(e=>{const t=Mb();if(!wb(t))return!1;const n=e,r=n.shiftKey;return!!zx(t,!1)&&(n.preventDefault(),Bx(t,r,!1),!0)}),0),e.registerCommand(um,(t=>!!wb(Mb())&&(t.preventDefault(),e.dispatchCommand($p,!0))),0),e.registerCommand(fm,(t=>!!wb(Mb())&&(t.preventDefault(),e.dispatchCommand($p,!1))),0),e.registerCommand(lm,(t=>{if(!wb(Mb()))return!1;if(null!==t){if((Yx||qx||Xx)&&Hx)return!1;t.preventDefault()}return e.dispatchCommand(Kp,!1)}),0),e.registerCommand(xm,(()=>(function(){const e=Jg();Qg(function(e){return Rg(e.anchor),Rg(e.focus),e}(e.select(0,e.getChildrenSize())))}(),!0)),0),e.registerCommand(ym,(t=>!!wb(Mb())&&(Jx(t,e),!0)),0),e.registerCommand(bm,(t=>!!wb(Mb())&&(function(e,t){Jx(e,t),t.update((()=>{const e=Mb();wb(e)&&e.removeText()}))}(t,e),!0)),0),e.registerCommand(Yp,(t=>!!wb(Mb())&&(function(e,t){e.preventDefault(),t.update((()=>{const t=Mb(),{clipboardData:n}=e;null!=n&&wb(t)&&Ux(n,t)}),{tag:"paste"})}(t,e),!0)),0),e.registerCommand(pm,(e=>!!wb(Mb())&&(e.preventDefault(),!0)),0),e.registerCommand(mm,(e=>!!wb(Mb())&&(e.preventDefault(),!0)),0))}(e),function(e){const t=window.location.origin,n=n=>{if(n.origin!==t)return;const r=e.getRootElement();if(document.activeElement!==r)return;const o=n.data;if("string"==typeof o){let t;try{t=JSON.parse(o)}catch(e){return}if(t&&"nuanria_messaging"===t.protocol&&"request"===t.type){const r=t.payload;if(r&&"makeChanges"===r.functionId){const t=r.args;if(t){const[r,o,i,s,a,l]=t;e.update((()=>{const e=Mb();if(wb(e)){const t=e.anchor;let l=t.getNode(),c=0,u=0;if(db(l)&&r>=0&&o>=0&&(c=r,u=r+o,e.setTextNodeRange(l,c,l,u)),c===u&&""===i||(e.insertRawText(i),l=t.getNode()),db(l)){c=s,u=s+a;const t=l.getTextContentSize();c=c>t?t:c,u=u>t?t:u,e.setTextNodeRange(l,c,l,u)}n.stopImmediatePropagation()}}))}}}}};return window.addEventListener("message",n,!0),()=>{window.removeEventListener("message",n,!0)}}(e))),[e])}(r),(0,iu.jsxs)(iu.Fragment,{children:[e,(0,iu.jsx)(tw,{content:t}),i]})}function tw({content:e}){const[t]=Bp(),n=function(e){const[t,n]=(0,o.useState)((()=>Qx(e)));return Zx((()=>{function t(){const t=Qx(e);n(t)}return t(),Fx(e.registerUpdateListener((()=>{t()})),e.registerEditableListener((()=>{t()})))}),[e]),t}(t),r=function(e){const[t]=Bp(),n=(0,o.useMemo)((()=>e(t)),[t,e]),r=(0,o.useRef)(n.initialValueFn()),[i,s]=(0,o.useState)(r.current);return jx((()=>{const{initialValueFn:e,subscribe:t}=n,o=e();return r.current!==o&&(r.current=o,s(o)),t((e=>{r.current=e,s(e)}))}),[n,e]),i}(Mx);return n?"function"==typeof e?e(r):e:null}const nw="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?o.useLayoutEffect:o.useEffect,rw=(0,o.forwardRef)((function({editor:e,ariaActiveDescendant:t,ariaAutoComplete:n,ariaControls:r,ariaDescribedBy:i,ariaExpanded:s,ariaLabel:a,ariaLabelledBy:l,ariaMultiline:c,ariaOwns:u,ariaRequired:d,autoCapitalize:f,className:h,id:p,role:m="textbox",spellCheck:g=!0,style:v,tabIndex:y,"data-testid":b,...x},w){const[E,S]=(0,o.useState)(e.isEditable()),_=(0,o.useCallback)((t=>{t&&t.ownerDocument&&t.ownerDocument.defaultView?e.setRootElement(t):e.setRootElement(null)}),[e]),k=(0,o.useMemo)((()=>function(...e){return t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}}(w,_)),[_,w]);return nw((()=>(S(e.isEditable()),e.registerEditableListener((e=>{S(e)})))),[e]),(0,iu.jsx)("div",{...x,"aria-activedescendant":E?t:void 0,"aria-autocomplete":E?n:"none","aria-controls":E?r:void 0,"aria-describedby":i,"aria-expanded":E&&"combobox"===m?!!s:void 0,"aria-label":a,"aria-labelledby":l,"aria-multiline":c,"aria-owns":E?u:void 0,"aria-readonly":!E||void 0,"aria-required":d,autoCapitalize:f,className:h,contentEditable:E,"data-testid":b,id:p,ref:k,role:E?m:void 0,spellCheck:g,style:v,tabIndex:y})}));function ow(e){return e.getEditorState().read(Ix(e.isComposing()))}const iw=(0,o.forwardRef)((function(e,t){const{placeholder:n,...r}=e,[o]=Bp();return(0,iu.jsxs)(iu.Fragment,{children:[(0,iu.jsx)(rw,{editor:o,...r,ref:t}),null!=n&&(0,iu.jsx)(sw,{editor:o,content:n})]})}));function sw({content:e,editor:t}){const n=function(e){const[t,n]=(0,o.useState)((()=>ow(e)));return nw((()=>{function t(){const t=ow(e);n(t)}return t(),Fx(e.registerUpdateListener((()=>{t()})),e.registerEditableListener((()=>{t()})))}),[e]),t}(t),[r,i]=(0,o.useState)(t.isEditable());if((0,o.useLayoutEffect)((()=>(i(t.isEditable()),t.registerEditableListener((e=>{i(e)})))),[t]),!n)return null;let s=null;return"function"==typeof e?s=e(r):null!==e&&(s=e),null===s?null:(0,iu.jsx)("div",{"aria-hidden":!0,children:s})}const aw=0,lw=1,cw=2,uw=0,dw=1,fw=2,hw=3,pw=4;function mw(e){e.undoStack=[],e.redoStack=[],e.current=null}function gw({delay:e,externalHistoryState:t}){const[n]=Bp();return function(e,t,n=1e3){const r=(0,o.useMemo)((()=>t||{current:null,redoStack:[],undoStack:[]}),[t]);(0,o.useEffect)((()=>function(e,t,n){const r=function(e,t){let n=Date.now(),r=uw;return(o,i,s,a,l,c)=>{const u=Date.now();if(c.has("historic"))return r=uw,n=u,cw;const d=function(e,t,n,r,o){if(null===e||0===n.size&&0===r.size&&!o)return uw;const i=t._selection,s=e._selection;if(o)return dw;if(!(wb(i)&&wb(s)&&s.isCollapsed()&&i.isCollapsed()))return uw;const a=function(e,t,n){const r=e._nodeMap,o=[];for(const e of t){const t=r.get(e);void 0!==t&&o.push(t)}for(const[e,t]of n){if(!t)continue;const n=r.get(e);void 0===n||gx(n)||o.push(n)}return o}(t,n,r);if(0===a.length)return uw;if(a.length>1){const n=t._nodeMap,r=n.get(i.anchor.key),o=n.get(s.anchor.key);return r&&o&&!e._nodeMap.has(r.__key)&&db(r)&&1===r.__text.length&&1===i.anchor.offset?fw:uw}const l=a[0],c=e._nodeMap.get(l.__key);if(!db(c)||!db(l)||c.__mode!==l.__mode)return uw;const u=c.__text,d=l.__text;if(u===d)return uw;const f=i.anchor,h=s.anchor;if(f.key!==h.key||"text"!==f.type)return uw;const p=f.offset,m=h.offset,g=d.length-u.length;return 1===g&&m===p-1?fw:-1===g&&m===p+1?hw:-1===g&&m===p?pw:uw}(o,i,a,l,e.isComposing()),f=(()=>{const f=null===s||s.editor===e,h=c.has("history-push");if(!h&&f&&c.has("history-merge"))return aw;if(null===o)return lw;const p=i._selection;return a.size>0||l.size>0?!1===h&&d!==uw&&d===r&&u<n+t&&f||1===a.size&&function(e,t,n){const r=t._nodeMap.get(e),o=n._nodeMap.get(e),i=t._selection,s=n._selection;return!(wb(i)&&wb(s)&&"element"===i.anchor.type&&"element"===i.focus.type&&"text"===s.anchor.type&&"text"===s.focus.type||!db(r)||!db(o)||r.__parent!==o.__parent)&&JSON.stringify(t.read((()=>r.exportJSON())))===JSON.stringify(n.read((()=>o.exportJSON())))}(Array.from(a)[0],o,i)?aw:lw:null!==p?aw:cw})();return n=u,r=d,f}}(e,n),o=Fx(e.registerCommand(Qp,(()=>(function(e,t){const n=t.redoStack,r=t.undoStack;if(0!==r.length){const o=t.current,i=r.pop();null!==o&&(n.push(o),e.dispatchCommand(Sm,!0)),0===r.length&&e.dispatchCommand(_m,!1),t.current=i||null,i&&i.editor.setEditorState(i.editorState,{tag:"historic"})}}(e,t),!0)),0),e.registerCommand(em,(()=>(function(e,t){const n=t.redoStack,r=t.undoStack;if(0!==n.length){const o=t.current;null!==o&&(r.push(o),e.dispatchCommand(_m,!0));const i=n.pop();0===n.length&&e.dispatchCommand(Sm,!1),t.current=i||null,i&&i.editor.setEditorState(i.editorState,{tag:"historic"})}}(e,t),!0)),0),e.registerCommand(wm,(()=>(mw(t),!1)),0),e.registerCommand(Em,(()=>(mw(t),e.dispatchCommand(Sm,!1),e.dispatchCommand(_m,!1),!0)),0),e.registerUpdateListener((({editorState:n,prevEditorState:o,dirtyLeaves:i,dirtyElements:s,tags:a})=>{const l=t.current,c=t.redoStack,u=t.undoStack,d=null===l?null:l.editorState;if(null!==l&&n===d)return;const f=r(o,n,l,i,s,a);if(f===lw)0!==c.length&&(t.redoStack=[],e.dispatchCommand(Sm,!1)),null!==l&&(u.push({...l}),e.dispatchCommand(_m,!0));else if(f===cw)return;t.current={editor:e,editorState:n}})));return o}(e,r,n)),[n,e,r])}(n,t,e),null}function vw(e,t){return vw=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},vw(e,t)}var yw={error:null},bw=function(e){var t,n;function r(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state=yw,t.resetErrorBoundary=function(){for(var e,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];null==t.props.onReset||(e=t.props).onReset.apply(e,r),t.reset()},t}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,vw(t,n),r.getDerivedStateFromError=function(e){return{error:e}};var i=r.prototype;return i.reset=function(){this.setState(yw)},i.componentDidCatch=function(e,t){var n,r;null==(n=(r=this.props).onError)||n.call(r,e,t)},i.componentDidUpdate=function(e,t){var n,r,o,i,s=this.state.error,a=this.props.resetKeys;null!==s&&null!==t.error&&(void 0===(o=e.resetKeys)&&(o=[]),void 0===(i=a)&&(i=[]),o.length!==i.length||o.some((function(e,t){return!Object.is(e,i[t])})))&&(null==(n=(r=this.props).onResetKeysChange)||n.call(r,e.resetKeys,a),this.reset())},i.render=function(){var e=this.state.error,t=this.props,n=t.fallbackRender,r=t.FallbackComponent,i=t.fallback;if(null!==e){var s={error:e,resetErrorBoundary:this.resetErrorBoundary};if(o.isValidElement(i))return i;if("function"==typeof n)return n(s);if(r)return o.createElement(r,s);throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop")}return this.props.children},r}(o.Component);function xw({children:e,onError:t}){return(0,iu.jsx)(bw,{fallback:(0,iu.jsx)("div",{style:{border:"1px solid #f00",color:"#f00",padding:"8px"},children:"An error was thrown."}),onError:t,children:e})}const ww="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?o.useLayoutEffect:o.useEffect;function Ew({ignoreHistoryMergeTagChange:e=!0,ignoreSelectionChange:t=!1,onChange:n}){const[r]=Bp();return ww((()=>{if(n)return r.registerUpdateListener((({editorState:o,dirtyElements:i,dirtyLeaves:s,prevEditorState:a,tags:l})=>{t&&0===i.size&&0===s.size||e&&l.has("history-merge")||a.isEmpty()||n(o,r,l)}))}),[r,e,t,n]),null}function Sw({editorRef:e}){const[t]=Bp();return o.useEffect((()=>{"function"==typeof e?e(t):"object"==typeof e&&(e.current=t)}),[t]),null}var _w={sm:"py-1.5 px-2 rounded [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.625rem]",md:"py-2 px-2.5 rounded-md [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.625rem]",lg:"py-2.5 px-3 rounded-md [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.6875rem]"},kw={sm:"p-1.5 rounded-md max-h-[10.75rem]",md:"p-2 rounded-lg max-h-[13.5rem]",lg:"p-2 rounded-lg max-h-[13.5rem]"},Cw={sm:"p-1.5 rounded text-sm leading-5 font-normal",md:"p-2 rounded-md text-base leading-6 font-normal",lg:"p-2 rounded-md text-base leading-6 font-normal"};const Pw="startTransition",Tw="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?o.useLayoutEffect:o.useEffect,Ow=e=>{const t=document.getElementById("typeahead-menu");if(!t)return;const n=t.getBoundingClientRect();n.top+n.height>window.innerHeight&&t.scrollIntoView({block:"center"}),n.top<0&&t.scrollIntoView({block:"center"}),e.scrollIntoView({block:"nearest"})};function Rw(e,t){const n=e.getBoundingClientRect(),r=t.getBoundingClientRect();return n.top>r.top&&n.top<r.bottom}const Nw={};function Aw({close:e,editor:t,anchorElementRef:n,resolution:r,options:i,menuRenderFn:s,onSelectOption:a,shouldSplitNodeWithQuery:l=!1,commandPriority:c=Cx}){const[u,d]=(0,o.useState)(null),f=r.match&&r.match.matchingString;(0,o.useEffect)((()=>{d(0)}),[f]);const h=(0,o.useCallback)((n=>{t.update((()=>{const t=null!=r.match&&l?function(e){const t=Mb();if(!wb(t)||!t.isCollapsed())return null;const n=t.anchor;if("text"!==n.type)return null;const r=n.getNode();if(!r.isSimpleText())return null;const o=n.offset,i=r.getTextContent().slice(0,o),s=e.replaceableString.length,a=o-function(e,t,n){let r=n;for(let n=r;n<=t.length;n++)e.substr(-n)===t.substr(0,n)&&(r=n);return r}(i,e.matchingString,s);if(a<0)return null;let l;return 0===a?[l]=r.splitText(o):[,l]=r.splitText(a,o),l}(r.match):null;a(n,t,e,r.match?r.match.matchingString:"")}))}),[t,l,r.match,a,e]),p=(0,o.useCallback)((e=>{const n=t.getRootElement();null!==n&&(n.setAttribute("aria-activedescendant","typeahead-item-"+e),d(e))}),[t]);return(0,o.useEffect)((()=>()=>{const e=t.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")}),[t]),Tw((()=>{null===i?d(null):null===u&&p(0)}),[i,u,p]),(0,o.useEffect)((()=>Fx(t.registerCommand(Nw,(({option:e})=>!(!e.ref||null==e.ref.current||(Ow(e.ref.current),0))),c))),[t,p,c]),(0,o.useEffect)((()=>Fx(t.registerCommand(am,(e=>{const n=e;if(null!==i&&i.length&&null!==u){const e=u!==i.length-1?u+1:0;p(e);const r=i[e];null!=r.ref&&r.ref.current&&t.dispatchCommand(Nw,{index:e,option:r}),n.preventDefault(),n.stopImmediatePropagation()}return!0}),c),t.registerCommand(sm,(e=>{const t=e;if(null!==i&&i.length&&null!==u){const e=0!==u?u-1:i.length-1;p(e);const n=i[e];null!=n.ref&&n.ref.current&&Ow(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0}),c),t.registerCommand(dm,(t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0}),c),t.registerCommand(hm,(e=>{const t=e;return null!==i&&null!==u&&null!=i[u]&&(t.preventDefault(),t.stopImmediatePropagation(),h(i[u]),!0)}),c),t.registerCommand(lm,(e=>null!==i&&null!==u&&null!=i[u]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),h(i[u]),!0)),c))),[h,e,t,i,u,p,c]),s(n,(0,o.useMemo)((()=>({options:i,selectOptionAndCleanUp:h,selectedIndex:u,setHighlightedIndex:d})),[h,u,i]),r.match?r.match.matchingString:"")}function jw({options:e,onQueryChange:t,onSelectOption:n,onOpen:r,onClose:s,menuRenderFn:a,triggerFn:l,anchorClassName:c,commandPriority:u=Cx,parent:d}){const[f]=Bp(),[h,p]=(0,o.useState)(null),m=function(e,t,n,r=document.body){const[i]=Bp(),s=(0,o.useRef)(document.createElement("div")),a=(0,o.useCallback)((()=>{s.current.style.top=s.current.style.bottom;const t=i.getRootElement(),o=s.current,a=o.firstChild;if(null!==t&&null!==e){const{left:i,top:l,width:c,height:u}=e.getRect(),d=s.current.offsetHeight;if(o.style.top=`${l+window.pageYOffset+d+3}px`,o.style.left=`${i+window.pageXOffset}px`,o.style.height=`${u}px`,o.style.width=`${c}px`,null!==a){a.style.top=`${l}`;const e=a.getBoundingClientRect(),n=e.height,r=e.width,s=t.getBoundingClientRect();i+r>s.right&&(o.style.left=`${s.right-r+window.pageXOffset}px`),(l+n>window.innerHeight||l+n>s.bottom)&&l-s.top>n+u&&(o.style.top=l-n+window.pageYOffset-u+"px")}o.isConnected||(null!=n&&(o.className=n),o.setAttribute("aria-label","Typeahead menu"),o.setAttribute("id","typeahead-menu"),o.setAttribute("role","listbox"),o.style.display="block",o.style.position="absolute",r.append(o)),s.current=o,t.setAttribute("aria-controls","typeahead-menu")}}),[i,e,n,r]);(0,o.useEffect)((()=>{const t=i.getRootElement();if(null!==e)return a(),()=>{null!==t&&t.removeAttribute("aria-controls");const e=s.current;null!==e&&e.isConnected&&e.remove()}}),[i,a,e]);const l=(0,o.useCallback)((n=>{null!==e&&(n||t(null))}),[e,t]);return function(e,t,n,r){const[i]=Bp();(0,o.useEffect)((()=>{if(null!=t&&null!=e){const e=i.getRootElement(),o=null!=e?function(e){let t=getComputedStyle(e);const n="absolute"===t.position,r=/(auto|scroll)/;if("fixed"===t.position)return document.body;for(let o=e;o=o.parentElement;)if(t=getComputedStyle(o),(!n||"static"!==t.position)&&r.test(t.overflow+t.overflowY+t.overflowX))return o;return document.body}(e):document.body;let s=!1,a=Rw(t,o);const l=function(){s||(window.requestAnimationFrame((function(){n(),s=!1})),s=!0);const e=Rw(t,o);e!==a&&(a=e,null!=r&&r(e))},c=new ResizeObserver(n);return window.addEventListener("resize",n),document.addEventListener("scroll",l,{capture:!0,passive:!0}),c.observe(t),()=>{c.unobserve(t),window.removeEventListener("resize",n),document.removeEventListener("scroll",l,!0)}}}),[t,i,r,n,e])}(e,s.current,a,l),s}(h,p,c,d),g=(0,o.useCallback)((()=>{p(null),null!=s&&null!==h&&s()}),[s,h]),v=(0,o.useCallback)((e=>{p(e),null!=r&&null===h&&r(e)}),[r,h]);return(0,o.useEffect)((()=>{const e=f.registerUpdateListener((()=>{f.getEditorState().read((()=>{const e=f._window||window,n=e.document.createRange(),r=Mb(),o=function(e){let t=null;return e.getEditorState().read((()=>{const e=Mb();wb(e)&&(t=function(e){const t=e.anchor;if("text"!==t.type)return null;const n=t.getNode();if(!n.isSimpleText())return null;const r=t.offset;return n.getTextContent().slice(0,r)}(e))})),t}(f);if(!wb(r)||!r.isCollapsed()||null===o||null===n)return void g();const s=l(o,f);if(t(s?s.matchingString:null),null!==s&&!function(e,t){return 0===t&&e.getEditorState().read((()=>{const e=Mb();if(wb(e)){const t=e.anchor.getNode().getPreviousSibling();return db(t)&&t.isTextEntity()}return!1}))}(f,s.leadOffset)){const t=function(e,t,n){const r=n.getSelection();if(null===r||!r.isCollapsed)return!1;const o=r.anchorNode,i=e,s=r.anchorOffset;if(null==o||null==s)return!1;try{t.setStart(o,i),t.setEnd(o,s)}catch(e){return!1}return!0}(s.leadOffset,n,e);if(null!==t)return a=()=>v({getRect:()=>n.getBoundingClientRect(),match:s}),void(Pw in i()?i()[Pw](a):a())}var a;g()}))}));return()=>{e()}}),[f,l,t,h,g,v]),null===h||null===f?null:(0,iu.jsx)(Aw,{close:g,resolution:h,editor:f,anchorElementRef:m,options:e,menuRenderFn:a,shouldSplitNodeWithQuery:!0,onSelectOption:n,commandPriority:u})}function Mw(e){return Mw="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Mw(e)}function Iw(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var Dw=function(e){switch(e){case"sm":return"xs";case"md":default:return"sm";case"lg":return"md"}},Lw=function(e){var t=e.data,n=e.by,r=e.size,o=e.nodeKey,i=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return Iw(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Iw(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(Bp(),1)[0],s=!i.isEditable(),a=t;return"object"===Mw(t)&&(a=t[n]),React.createElement(Ge,{className:"inline-flex",type:"rounded",size:Dw(r),label:a,icon:null,closable:!0,onClose:function(e){e.stopPropagation(),e.preventDefault(),s||i.update((function(){var e=Hg(o);e&&e.remove()}))},disabled:s})};function Fw(e){return Fw="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Fw(e)}function zw(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,Kw(r.key),r)}}function Bw(e,t,n){return t=Ww(t),function(e,t){if(t&&("object"==Fw(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,Vw()?Reflect.construct(t,n||[],Ww(e).constructor):t.apply(e,n))}function Vw(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(e){}return(Vw=function(){return!!e})()}function Ww(e){return Ww=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},Ww(e)}function Uw(e,t){return Uw=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},Uw(e,t)}function $w(e,t,n){return(t=Kw(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Kw(e){var t=function(e){if("object"!=Fw(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=Fw(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==Fw(t)?t:t+""}var Hw=function(e){function t(e,n,r,o){var i;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),$w(i=Bw(this,t,[o]),"__data",void 0),$w(i,"__by",void 0),$w(i,"__size",void 0),i.__data=e,i.__by=n,i.__size=r,i}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&Uw(e,t)}(t,e),function(e,t,n){return t&&zw(e.prototype,t),n&&zw(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}(t,[{key:"createDOM",value:function(){return document.createElement("span")}},{key:"updateDOM",value:function(){return!1}},{key:"exportDOM",value:function(){return{element:document.createElement("span")}}},{key:"exportJSON",value:function(){return{type:t.getType(),data:this.__data,by:this.__by,size:this.__size,version:1}}},{key:"decorate",value:function(){return React.createElement(Lw,{data:this.__data,by:this.__by,size:this.__size,nodeKey:this.__key})}}],[{key:"getType",value:function(){return"mention"}},{key:"clone",value:function(e){return new t(e.__data,e.__by,e.__size,e.__key)}},{key:"importJSON",value:function(e){return qw(e.data,e.by,e.size)}}])}(hx),qw=function(e,t,n){return new Hw(e,t,n)},Yw=Hw;function Gw(e){return Gw="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Gw(e)}function Xw(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,Qw(r.key),r)}}function Jw(e,t,n){return t&&Xw(e.prototype,t),n&&Xw(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function Zw(e,t,n){return(t=Qw(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Qw(e){var t=function(e){if("object"!=Gw(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=Gw(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==Gw(t)?t:t+""}var eE=Jw((function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),Zw(this,"data",void 0),Zw(this,"ref",{current:null}),this.data=t}));function tE(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var nE=new Map,rE=function(e,t,n,r){setTimeout((function(){var o=e.filter((function(e){var n;if("string"==typeof e)return e.toLowerCase().includes(t.toLowerCase());var o=null==e||null===(n=e[r])||void 0===n?void 0:n.toString();return!!o&&o.toLowerCase().includes(t.toLowerCase())}));n(o)}),500)},oE=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"name",r=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return tE(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?tE(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}((0,o.useState)([]),2),i=r[0],s=r[1];return(0,o.useEffect)((function(){if(null!==t){var r=nE.get(t);null!==r&&(void 0===r?(nE.set(t,null),rE(e,t,(function(e){nE.set(t,e),s(e)}),n)):s(r))}else s([])}),[t]),i},iE=["size","children","selected","className"];function sE(){return sE=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},sE.apply(null,arguments)}var aE=(0,o.forwardRef)((function(e,t){var n=e.size,r=e.children,o=e.selected,i=void 0!==o&&o,s=e.className,a=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,iE);return React.createElement("li",sE({role:"option",ref:t,className:te("m-0 text-text-primary cursor-pointer",Cw[n],i&&"bg-button-tertiary-hover",s)},a),r)}));aE.displayName="Item";var lE=Object.assign((function(e){var t=e.size,n=e.className,r=e.children;return React.createElement("ul",{role:"menu",className:te("absolute inset-x-0 top-full mt-2 mx-0 mb-0 w-full h-auto overflow-y-auto overflow-x-hidden z-10 bg-background-primary border border-solid border-border-subtle shadow-lg",kw[t],n)},r)}),{Item:aE});function cE(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return uE(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?uE(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function uE(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var dE=function(e){var t=e.optionsArray,n=e.by,r=void 0===n?"name":n,i=e.size,s=void 0===i?"md":i,a=e.trigger,l=void 0===a?"@":a,c=e.menuComponent,u=void 0===c?lE:c,d=e.menuItemComponent,f=void 0===d?lE.Item:d,h="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;",p=[l].join(""),m="[^"+p+h+"\\s]",g="(?:\\.[ |$]| |["+h+"]|)",v=new RegExp("(^|\\s|\\()([".concat(p,"]((?:").concat(m).concat(g,"){0,").concat(75,"}))$")),y=new RegExp("(^|\\s|\\()([".concat(p,"]((?:").concat(m,"){0,").concat(50,"}))$")),b=cE(Bp(),1)[0],x=cE((0,o.useState)(null),2),w=x[0],E=x[1],S=oE(t,w,r),_=(0,o.useCallback)((function(e,t,n){b.update((function(){var o=qw(e.data,r,s);t&&t.replace(o),n()}))}),[b]),k=(0,o.useMemo)((function(){return S.map((function(e){return new eE(e)}))}),[b,S]);return React.createElement(jw,{onQueryChange:E,onSelectOption:_,triggerFn:function(e){var t=v.exec(e);if(null===t&&(t=y.exec(e)),null!==t){var n=t[1],r=t[3];if(r.length>=0)return{leadOffset:t.index+n.length,matchingString:r,replaceableString:t[2]}}return null},options:k,menuRenderFn:function(e,t){var n=t.selectedIndex,o=t.selectOptionAndCleanUp,i=t.setHighlightedIndex;return e.current&&!(null==k||!k.length)&&React.createElement(u,{size:s},k.map((function(e,t){var a;return React.createElement(f,{key:t,ref:e.ref,size:s,selected:t===n,onMouseEnter:function(){i(t)},onClick:function(){return o(e)}},"string"==typeof e.data?e.data:null===(a=e.data)||void 0===a?void 0:a[r])})))}})},fE={ltr:"ltr",rtl:"rtl",paragraph:"editor-paragraph",quote:"editor-quote",heading:{h1:"editor-heading-h1",h2:"editor-heading-h2",h3:"editor-heading-h3",h4:"editor-heading-h4",h5:"editor-heading-h5",h6:"editor-heading-h6"},list:{nested:{listitem:"editor-nested-listitem"},ol:"editor-list-ol",ul:"editor-list-ul",listitem:"editor-listItem",listitemChecked:"editor-listItemChecked",listitemUnchecked:"editor-listItemUnchecked"},hashtag:"editor-hashtag",image:"editor-image",link:"editor-link",text:{bold:"editor-textBold",code:"editor-textCode",italic:"editor-textItalic",strikethrough:"editor-textStrikethrough",subscript:"editor-textSubscript",superscript:"editor-textSuperscript",underline:"editor-textUnderline",underlineStrikethrough:"editor-textUnderlineStrikethrough"},code:"editor-code",codeHighlight:{atrule:"editor-tokenAttr",attr:"editor-tokenAttr",boolean:"editor-tokenProperty",builtin:"editor-tokenSelector",cdata:"editor-tokenComment",char:"editor-tokenSelector",class:"editor-tokenFunction","class-name":"editor-tokenFunction",comment:"editor-tokenComment",constant:"editor-tokenProperty",deleted:"editor-tokenProperty",doctype:"editor-tokenComment",entity:"editor-tokenOperator",function:"editor-tokenFunction",important:"editor-tokenVariable",inserted:"editor-tokenSelector",keyword:"editor-tokenAttr",namespace:"editor-tokenVariable",number:"editor-tokenProperty",operator:"editor-tokenOperator",prolog:"editor-tokenComment",property:"editor-tokenProperty",punctuation:"editor-tokenPunctuation",regex:"editor-tokenVariable",selector:"editor-tokenSelector",string:"editor-tokenSelector",symbol:"editor-tokenProperty",tag:"editor-tokenProperty",url:"editor-tokenOperator",variable:"editor-tokenVariable"}},hE=function(e){var t=e.content;return React.createElement("div",{className:"pointer-events-none absolute inset-0 flex items-center justify-start text-field-placeholder"},t)};function pE(e){console.error(e)}var mE=function(e,t){var n,r,i=e.defaultValue,s=void 0===i?"":i,a=e.placeholder,l=void 0===a?"Press @ to view variable suggestions":a,c=e.onChange,u=e.size,d=void 0===u?"md":u,f=e.autoFocus,h=void 0!==f&&f,p=e.options,m=void 0===p?[]:p,g=e.by,v=void 0===g?"name":g,y=e.trigger,b=void 0===y?"@":y,x=e.menuComponent,w=e.menuItemComponent,E=e.className,S=e.disabled,_=void 0!==S&&S,k={namespace:"Editor",editorTheme:fE,onError:pE,nodes:[Yw],editorState:s||'{\n    "root": {\n        "children": [\n            {\n                "children": [],\n                "direction": null,\n                "format": "",\n                "indent": 0,\n                "type": "paragraph",\n                "version": 1,\n                "textFormat": 0,\n                "textStyle": ""\n            }\n        ],\n        "direction": null,\n        "format": "",\n        "indent": 0,\n        "type": "root",\n        "version": 1\n    }\n}',editable:!_};return(0,o.isValidElement)(x)&&(n=x),(0,o.isValidElement)(w)&&(r=w),React.createElement("div",{className:te("relative w-full","border border-solid focus-within:ring-2 focus-within:ring-offset-2 border-field-border hover:border-border-strong focus-within:!border-focus-border focus-within:ring-focus transition duration-150 ease-in-out",_w[d],_&&"bg-field-secondary-background border-field-border-disabled hover:border-field-border-disabled [&_p]:text-badge-color-disabled cursor-not-allowed")},React.createElement(Ax,{initialConfig:k},React.createElement("div",{className:"relative w-full [&_p]:m-0"},React.createElement(ew,{contentEditable:React.createElement(iw,{className:te("editor-content focus-visible:outline-none outline-none","w-full min-h-[1.625rem] [&>p]:w-full [&>p]:m-0",E)}),placeholder:React.createElement(hE,{content:l}),ErrorBoundary:xw})),React.createElement(gw,null),React.createElement(dE,{menuComponent:n,menuItemComponent:r,size:d,by:v,optionsArray:m,trigger:b}),React.createElement(Ew,{onChange:function(e,t){"function"==typeof c&&c(e,t)},ignoreSelectionChange:!0}),t&&React.createElement(Sw,{editorRef:t}),h&&React.createElement(Vp,null)))},gE=(0,o.forwardRef)(mE);gE.displayName="EditorInput";var vE=gE;const yE=xe("Plus",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]]);var bE=function(e,t){return te("rounded-full text-brand-primary-600 transition-colors duration-300",e[t].dot,e[t].ring)},xE=["variant","size","type","currentStep","children","className"],wE=["labelText","icon","stepClasses","isCurrent","isCompleted","className","type","variant","sizeClasses","size","isLast","index"];function EE(){return EE=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},EE.apply(null,arguments)}function SE(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var _E=function(e){var t=e.variant,n=void 0===t?"dot":t,r=e.size,o=void 0===r?"sm":r,s=e.type,a=void 0===s?"inline":s,l=e.currentStep,c=void 0===l?1:l,u=e.children,d=e.className,f=SE(e,xE),h=i().Children.count(u),p={sm:{dot:"size-2.5",ring:"size-5",numberIcon:"size-5 text-tiny",icon:"size-5",label:"text-xs"},md:{dot:"size-3",ring:"size-6",numberIcon:"size-6 text-sm",icon:"size-6",label:"text-sm"},lg:{dot:"size-3.5",ring:"size-7",numberIcon:"size-7 text-md",icon:"size-7",label:"text-sm"}},m=i().Children.map(u,(function(e,t){var r={isCompleted:t+1<c,isCurrent:t+1===c,sizeClasses:p,size:o,variant:n,type:a,isLast:t+1===h,index:t};return i().createElement(i().Fragment,{key:t},i().cloneElement(e,r))}));return i().createElement("div",EE({className:te("flex w-full",d,"inline"===a?"items-center justify-between":"")},f),m)};_E.Step=function(e){var t=e.labelText,n=e.icon,r=void 0===n?i().createElement(yE,null):n,o=(e.stepClasses,e.isCurrent),s=e.isCompleted,a=e.className,l=e.type,c=e.variant,u=e.sizeClasses,d=e.size,f=e.isLast,h=e.index,p=SE(e,wE),m=function(e,t,n,r,o,s,a){if(t)return i().createElement(Ee,{className:bE(r,o)});var l=function(e,t,n){return te("relative flex items-center rounded-full justify-center transition-colors z-10 duration-500 ring-1",e?"ring-brand-primary-600":"ring-border-subtle",t[n].ring)}(n,r,o),c=function(e,t,n,r){var o="absolute rounded-full transition-colors duration-500 ".concat(n[r].dot);return"dot"===e?te(o,n[r].dot,t?"bg-brand-primary-600":"bg-text-tertiary"):"number"===e?te(o,n[r].dot,t?"text-brand-primary-600":"text-text-tertiary","flex items-center justify-center"):"icon"===e?te(o,t?"text-brand-primary-600":"text-text-tertiary","flex items-center justify-center"):""}(e,n,r,o),u=null;return"number"===e?u=a+1:"icon"===e&&s&&(u=s),i().createElement("span",{className:l},i().createElement("span",{className:c},u))}(c,s,o,u,d,r,h),g={lg:"left-[calc(50%+14px)] right-[calc(-50%+14px)]",md:"left-[calc(50%+12px)] right-[calc(-50%+12px)]",sm:"left-[calc(50%+10px)] right-[calc(-50%+10px)]"},v={lg:"top-3.5",md:"top-3",sm:"top-2.5"},y=function(){if(t){var e=te(u[d].label,"text-text-tertiary",o?"text-brand-primary-600":"","break-word","stack"===l?"mt-2 transform max-w-xs":"mx-2 max-w-32");return i().createElement("span",{className:e},t)}return null},b=function(){if(!f){var e=te("block",s?"border-brand-primary-600":"border-border-subtle");return"stack"===l?i().createElement("div",{className:te("relative","flex","border-solid","border-y","absolute",s?"border-brand-primary-600":"border-border-subtle",v[d],g[d])},i().createElement("span",{className:"block"})):i().createElement("div",{className:"flex-1"},i().createElement("span",{className:te(e,"mr-2","border-y border-solid")}))}return null};return"stack"===l?i().createElement("div",{className:"relative flex-1 justify-center"},i().createElement("div",EE({className:te("flex items-center flex-col",a)},p),m,y()),b()):i().createElement(i().Fragment,null,i().createElement("div",EE({className:te("flex items-center",a)},p),m,y()),b())};var kE=_E,CE=["variant","className"];function PE(){return PE=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},PE.apply(null,arguments)}var TE=function(e){var t,n,r=e.variant,o=void 0===r?"rectangular":r,s=e.className,a=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,CE),l=null===(t={circular:"rounded-full bg-gray-200 ",rectangular:"rounded-md bg-gray-200"})||void 0===t?void 0:t[o],c=null===(n={circular:"size-10",rectangular:"w-96 h-3"})||void 0===n?void 0:n[o];return i().createElement("div",PE({className:te(l,"animate-pulse",c,s)},a))};function OE(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var RE=(0,o.createContext)(),NE=function(){return(0,o.useContext)(RE)},AE=function(e){var t=e.size,n=void 0===t?"md":t,r=e.children,o=e.className;return i().createElement(RE.Provider,{value:{size:n}},i().createElement("div",{className:te("w-64 flex flex-col bg-background-primary p-2",o)},r))};AE.List=function(e){var t,n,r=e.heading,s=e.arrow,a=void 0!==s&&s,l=e.open,c=void 0!==l&&l,u=e.onClick,d=e.children,f=e.className,h=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return OE(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?OE(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}((0,o.useState)(c),2),p=h[0],m=h[1],g=NE().size,v=null===(t={sm:"text-xs",md:"text-sm"})||void 0===t?void 0:t[g],y=null===(n={sm:"[&>svg]:size-4",md:"[&>svg]:size-5"})||void 0===n?void 0:n[g],b=function(){m(!p),u&&u(!p)};return i().createElement("div",null,i().createElement("div",{role:"button",tabIndex:"0",onClick:b,onKeyPress:function(e){"Enter"!==e.key&&" "!==e.key||b()},className:te("text-text-primary bg-transparent cursor-pointer flex justify-between items-center p-1 gap-1",v,f),"aria-expanded":p},i().createElement("span",{className:"text-text-tertiary"},r),a&&i().createElement(Hf.span,{variants:{open:{rotate:180},closed:{rotate:0}},animate:p?"open":"closed",transition:{duration:.15},className:te("flex items-center text-border-strong",y)},i().createElement(eh,null))),i().createElement(Hh,{initial:!1},p&&i().createElement(Hf.ul,{variants:{open:{height:"auto",opacity:1},closed:{height:0,opacity:0}},initial:"closed",animate:"open",exit:"closed",transition:{duration:.3,ease:"easeInOut"},className:"overflow-hidden flex gap-0.5 flex-col m-0 bg-white rounded-md p-0"},d)))},AE.Item=function(e){var t,n=e.disabled,r=void 0!==n&&n,o=e.active,s=e.onClick,a=e.children,l=e.className,c=NE().size,u=null===(t={sm:"[&>svg]:size-4 [&>svg]:m-1 [&>*:not(svg)]:mx-1 [&>*:not(svg)]:my-0.5 text-sm",md:"[&>svg]:size-5 [&>svg]:m-1.5 [&>*:not(svg)]:m-1 text-base"})||void 0===t?void 0:t[c],d=r?"text-text-disabled hover:text-text-disabled cursor-not-allowed hover:bg-transparent":"",f=o?"text-icon-primary [&>svg]:text-icon-interactive bg-background-secondary":"";return i().createElement("li",{role:"menuitem",tabIndex:"0",onClick:s,onKeyPress:function(e){"Enter"!==e.key&&" "!==e.key||s()},className:te("flex p-1 gap-1 items-center bg-transparent w-full border-none rounded text-text-secondary cursor-pointer m-0",u,"hover:bg-background-secondary hover:text-text-primary",d,f,"transition-colors duration-300 ease-in-out",l)},a)},AE.Separator=function(e){var t,n=e.variant,r=void 0===n?"solid":n,o=e.className,s=null===(t={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",double:"border-double",hidden:"border-hidden",none:"border-none"})||void 0===t?void 0:t[r];return i().createElement(i().Fragment,null,i().createElement("hr",{className:te("w-full border-0 border-t border-border-subtle",s,o)}))};var jE=AE;const ME=xe("PanelLeftOpen",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"m14 9 3 3-3 3",key:"8010ee"}]]),IE=xe("PanelLeftClose",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"m16 15-3-3 3-3",key:"14y99z"}]]);var DE=["children","className","onCollapseChange","collapsible","screenHeight","borderOn"];function LE(){return LE=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},LE.apply(null,arguments)}function FE(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var zE=(0,o.createContext)(),BE=function(e){var t=e.children,n=e.className,r=e.onCollapseChange,s=e.collapsible,a=void 0===s||s,l=e.screenHeight,c=void 0===l||l,u=e.borderOn,d=void 0===u||u,f=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,DE),h=(0,o.useRef)(null),p=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return FE(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?FE(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}((0,o.useState)((function(){var e=localStorage.getItem("sidebar-collapsed"),t=window.innerWidth<1280;return e?JSON.parse(e):t})),2),m=p[0],g=p[1];return(0,o.useEffect)((function(){r&&r(m)}),[m,r]),(0,o.useEffect)((function(){var e=function(){var e=window.innerWidth<1280;if(a)if(e)g(!0),localStorage.setItem("sidebar-collapsed",JSON.stringify(!0));else{var t=localStorage.getItem("sidebar-collapsed");g(!!t&&JSON.parse(t))}else g(!1),localStorage.removeItem("sidebar-collapsed");h.current&&(h.current.style.height=c?"".concat(window.innerHeight,"px"):"auto")};return window.addEventListener("resize",e),e(),function(){window.removeEventListener("resize",e)}}),[c,a]),i().createElement(zE.Provider,{value:{isCollapsed:m,setIsCollapsed:g,collapsible:a}},i().createElement("div",LE({ref:h,className:te("overflow-auto w-72 px-4 py-4 gap-4 flex flex-col bg-background-primary",d&&"border-0 border-r border-solid border-border-subtle",!!c&&"h-screen","transition-all duration-200",m&&"w-16 px-2",n)},f),t))};BE.displayName="Sidebar";var VE=function(e){var t=e.children;return i().createElement("div",{className:"space-y-2"},t)};VE.displayName="Sidebar.Header";var WE=function(e){var t=e.children;return i().createElement("div",{className:te("space-y-4 grow items-start")},t)};WE.displayName="Sidebar.Body";var UE=function(e){var t=e.children,n=(0,o.useContext)(zE),r=n.isCollapsed,s=n.setIsCollapsed,a=n.collapsible;return i().createElement("div",{className:"space-y-4"},t,a&&i().createElement("button",{className:te("bg-transparent w-full border-0 p-0 m-0 flex items-center gap-2 text-base cursor-pointer",r&&"justify-center"),onClick:function(){s(!r),localStorage.setItem("sidebar-collapsed",JSON.stringify(!r))},"aria-label":r?"Expand sidebar":"Collapse sidebar"},r?i().createElement(i().Fragment,null,i().createElement(fi,{title:"Expand",placement:"right"},i().createElement(ME,{className:"size-5"}))):i().createElement(i().Fragment,null,i().createElement(IE,{className:"size-5"})," Collapse")))};UE.displayName="Sidebar.Footer";var $E=function(e){var t=e.children,n=e.className;return i().createElement("div",{className:te("w-full",n)},t)};$E.displayName="Sidebar.Item";var KE=Object.assign(BE,{Header:VE,Body:WE,Footer:UE,Item:$E});const HE=xe("ChevronRight",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]]),qE=xe("Ellipsis",[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"19",cy:"12",r:"1",key:"1wjl8i"}],["circle",{cx:"5",cy:"12",r:"1",key:"1pcz8c"}]]);var YE=["href","children","className","as"];function GE(){return GE=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},GE.apply(null,arguments)}var XE=(0,o.createContext)(),JE={sm:{text:"text-sm",separator:"text-sm",separatorIconSize:16},md:{text:"text-base",separator:"text-base",separatorIconSize:18}},ZE=function(e){var t=e.children,n=e.size,r=JE[void 0===n?"sm":n]||JE.sm;return i().createElement(XE.Provider,{value:{sizes:r}},i().createElement("nav",{className:"flex m-0","aria-label":"Breadcrumb"},i().createElement("ul",{className:"m-0 inline-flex items-center space-x-1 md:space-x-1"},t)))};ZE.displayName="Breadcrumb";var QE=function(e){var t=e.children;return i().createElement(i().Fragment,null,t)};QE.displayName="Breadcrumb.List";var eS=function(e){var t=e.children;return i().createElement("li",{className:"m-0 inline-flex items-center gap-2"},t)};eS.displayName="Breadcrumb.Item";var tS=function(e){var t=e.href,n=e.children,r=e.className,s=e.as,a=void 0===s?"a":s,l=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,YE),c=(0,o.useContext)(XE).sizes;return i().createElement(a,GE({href:t,className:te(c.text,"px-1 font-medium no-underline text-text-tertiary hover:text-text-primary hover:underline","focus:outline-none focus:ring-1 focus:ring-border-interactive focus:border-border-interactive focus:rounded-sm","transition-all duration-200",r)},l),n)};tS.displayName="Breadcrumb.Link";var nS=function(e){var t=e.type,n=(0,o.useContext)(XE).sizes,r={slash:i().createElement("span",{className:te("mx-1",n.separator)},"/"),arrow:i().createElement(HE,{size:n.separatorIconSize})};return i().createElement("span",{className:"flex items-center text-text-tertiary mx-2"},r[t]||r.arrow)};nS.displayName="Breadcrumb.Separator";var rS=function(){var e=(0,o.useContext)(XE).sizes;return i().createElement(qE,{className:"mt-[2px] cursor-pointer text-text-tertiary hover:text-text-primary",size:e.separatorIconSize+4})};rS.displayName="Breadcrumb.Ellipsis";var oS=function(e){var t=e.children,n=(0,o.useContext)(XE).sizes;return i().createElement("span",{className:te(n.text,"font-medium text-text-primary")},t)};oS.displayName="Breadcrumb.Page";var iS=Object.assign(ZE,{List:QE,Item:eS,Link:tS,Separator:nS,Ellipsis:rS,Page:oS}),sS=["className"],aS=["children","className"],lS=["children","as","className"],cS=["children","as","className"],uS=["className"],dS=["children","as"],fS=["children","className"];function hS(){return hS=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},hS.apply(null,arguments)}function pS(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function mS(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var gS=(0,o.createContext)(),vS=function(){return(0,o.useContext)(gS)},yS={open:{opacity:1},exit:{opacity:0}},bS={duration:.2},xS=function(e){var t=e.open,n=e.setOpen,r=e.children,i=e.trigger,s=e.className,a=e.exitOnClickOutside,l=void 0!==a&&a,c=e.exitOnEsc,u=void 0===c||c,d=e.design,f=void 0===d?"simple":d,h=e.scrollLock,p=void 0===h||h,m=void 0!==t&&void 0!==n,g=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return mS(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?mS(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}((0,o.useState)(!1),2),v=g[0],y=g[1],b=(0,o.useRef)(null),x=(0,o.useRef)(null),w=(0,o.useMemo)((function(){return m?t:v}),[t,v]),E=(0,o.useMemo)((function(){return m?n:y}),[y,y]),S=function(){w||E(!0)},_=function(){w&&E(!1)},k=(0,o.useCallback)((function(){return(0,o.isValidElement)(i)?(0,o.cloneElement)(i,{onClick:ne(S,i.props.onClick)}):"function"==typeof i?i({onClick:S}):null}),[i,S,_]),C=function(e){"Escape"===e.key&&u&&_()},P=function(e){l&&b.current&&!b.current.contains(e.target)&&_()};return(0,o.useEffect)((function(){return window.addEventListener("keydown",C),document.addEventListener("mousedown",P),function(){window.removeEventListener("keydown",C),document.removeEventListener("mousedown",P)}}),[w]),(0,o.useEffect)((function(){if(p)return w&&(document.querySelector("html").style.overflow="hidden"),function(){document.querySelector("html").style.overflow=""}}),[w]),React.createElement(React.Fragment,null,k(),React.createElement(gS.Provider,{value:{open:w,setOpen:E,handleClose:_,design:f,dialogContainerRef:x,dialogRef:b}},React.createElement("div",{ref:x,className:te("fixed z-999999 w-0 h-0 overflow-visible",s)},r)))};xS.displayName="Dialog";var wS=function(e){var t=e.children,n=e.className,r=vS(),o=r.open,i=r.handleClose,s=r.dialogRef;return React.createElement(Hh,null,o&&React.createElement(Hf.div,{className:"fixed inset-0 overflow-y-auto",initial:"exit",animate:"open",exit:"exit",variants:yS,role:"dialog",transition:bS},React.createElement("div",{className:"flex items-center justify-center min-h-full"},React.createElement("div",{ref:s,className:te("flex flex-col gap-5 w-120 h-fit bg-background-primary border border-solid border-border-subtle rounded-xl shadow-soft-shadow-2xl my-5 overflow-hidden",n)},"function"==typeof t?t({close:i}):t))))};wS.displayName="Dialog.Panel";var ES=function(e){var t=e.className,n=pS(e,sS),r=vS(),o=r.open,i=r.dialogContainerRef;return i.current&&(0,zn.createPortal)(React.createElement(Hh,null,o&&React.createElement(Hf.div,hS({className:te("fixed inset-0 -z-10 bg-background-inverse/90 backdrop-blur-sm",t)},n,{initial:"exit",animate:"open",exit:"exit",variants:yS,transition:bS}))),i.current)};ES.displayName="Dialog.Backdrop";var SS=function(e){var t=e.children,n=e.className,r=pS(e,aS);return React.createElement("div",hS({className:te("space-y-2 px-5 pt-5 pb-1",n)},r),t)};SS.displayName="Dialog.Header";var _S=function(e){var t=e.children,n=e.as,r=void 0===n?"h3":n,o=e.className,i=pS(e,lS);return React.createElement(r,hS({className:te("text-base font-semibold text-text-primary m-0 p-0",o)},i),t)};_S.displayName="Dialog.Title";var kS=function(e){var t=e.children,n=e.as,r=void 0===n?"p":n,o=e.className,i=pS(e,cS);return React.createElement(r,hS({className:te("text-sm font-normal text-text-secondary my-0 ml-0 mr-1 p-0",o)},i),t)};kS.displayName="Dialog.Description";var CS=function(e){var t=e.className,n=pS(e,uS);return React.createElement("button",hS({className:te("bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-none outline-none shadow-none",t),"aria-label":"Close dialog"},n),React.createElement(He,{className:"size-4 text-text-primary shrink-0"}))},PS=function(e){var t=e.children,n=e.as,r=void 0===n?o.Fragment:n,i=pS(e,dS),s=vS().handleClose;return(0,o.isValidElement)(t)&&t?r===o.Fragment?"function"==typeof t?t({close:s}):(0,o.cloneElement)(t,{onClick:s}):React.createElement(r,hS({},i,{onClick:s}),t):React.createElement(CS,hS({onClick:s},i))};PS.displayName="Dialog.CloseButton";var TS=function(e){var t=e.children,n=e.className,r=pS(e,fS);return React.createElement("div",hS({className:te("px-5",n)},r),t)};TS.displayName="Dialog.Body";var OS=function(e){var t=e.children,n=e.className,r=vS(),o=r.design,i=r.handleClose;return React.createElement("div",{className:te("p-4 flex justify-end gap-3",{"bg-background-secondary":"footer-divided"===o},n)},t?"function"==typeof t?t({close:i}):t:null)};OS.displayName="Dialog.Footer";var RS=Object.assign(xS,{Panel:wS,Backdrop:ES,Title:_S,Description:kS,CloseButton:PS,Header:SS,Body:TS,Footer:OS}),NS=["children","gap","className"];function AS(){return AS=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},AS.apply(null,arguments)}var jS=function(e){var t=e.children,n=e.gap,r=void 0===n?"lg":n,o=e.className,s=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,NS);return i().createElement("div",AS({className:te("w-full flex items-center justify-between bg-background-primary p-5 min-h-16",re(r),o)},s),t)};jS.Left=function(e){var t=e.gap,n=void 0===t?"sm":t,r=e.children,o=e.className;return i().createElement("div",{className:te("flex items-center",re(n),o)},r)},jS.Middle=function(e){var t,n=e.gap,r=void 0===n?"md":n,o=e.children,s=e.align,a=void 0===s?"center":s,l=e.className,c=null===(t={left:"justify-start",center:"justify-center",right:"justify-end"})||void 0===t?void 0:t[a];return i().createElement("div",{className:te("flex items-center grow",re(r),c,l)},o)},jS.Right=function(e){var t=e.gap,n=void 0===t?"sm":t,r=e.children,o=e.className;return i().createElement("div",{className:te("flex items-center",re(n),o)},r)},jS.Item=function(e){var t=e.children,n=e.className;return i().createElement("div",{className:te("flex items-center [&>svg]:block h-full",n)},t)};var MS=jS;function IS(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var DS=(0,o.createContext)(),LS=function(){return(0,o.useContext)(DS)},FS=Object.assign((function(e){var t=e.open,n=e.setOpen,r=e.children,i=e.trigger,s=e.className,a=e.exitOnClickOutside,l=void 0!==a&&a,c=e.exitOnEsc,u=void 0===c||c,d=e.design,f=void 0===d?"simple":d,h=e.position,p=void 0===h?"right":h,m=e.transitionDuration,g=void 0===m?.2:m,v=e.scrollLock,y=void 0===v||v,b=void 0!==t&&void 0!==n,x=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,a=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return IS(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?IS(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}((0,o.useState)(!1),2),w=x[0],E=x[1],S=(0,o.useRef)(null),_=(0,o.useRef)(null),k=(0,o.useMemo)((function(){return b?t:w}),[t,w]),C=(0,o.useMemo)((function(){return b?n:E}),[E,E]),P=function(){k||C(!0)},T=function(){k&&C(!1)},O=(0,o.useCallback)((function(){return(0,o.isValidElement)(i)?(0,o.cloneElement)(i,{onClick:ne(P,i.props.onClick)}):"function"==typeof i?i({onClick:P}):null}),[i,P,T]),R=function(e){"Escape"===e.key&&u&&T()},N=function(e){l&&S.current&&!S.current.contains(e.target)&&T()};return(0,o.useEffect)((function(){return window.addEventListener("keydown",R),document.addEventListener("mousedown",N),function(){window.removeEventListener("keydown",R),document.removeEventListener("mousedown",N)}}),[k]),(0,o.useEffect)((function(){if(y)return k&&(document.querySelector("html").style.overflow="hidden"),function(){document.querySelector("html").style.overflow=""}}),[k]),React.createElement(React.Fragment,null,O(),React.createElement(DS.Provider,{value:{open:k,setOpen:C,handleClose:T,design:f,position:p,drawerContainerRef:_,drawerRef:S,transitionDuration:{duration:g}}},React.createElement("div",{className:te("fixed z-999999 w-0 h-0 overflow-visible",s),role:"dialog",ref:_},r)))}),{displayName:"Drawer"}),zS={left:{open:{x:0},exit:{x:"-100%"}},right:{open:{x:0},exit:{x:"100%"}}},BS=Object.assign((function(e){var t=e.children,n=e.className,r=LS(),o=r.open,i=r.position,s=r.handleClose,a=r.drawerRef,l=r.transitionDuration;return React.createElement(Hh,null,o&&React.createElement("div",{className:"fixed inset-0"},React.createElement("div",{className:te("flex items-center justify-center h-full",{"justify-start":"left"===i,"justify-end":"right"===i})},React.createElement(Hf.div,{ref:a,className:te("flex flex-col gap-5 w-120 h-full bg-background-primary shadow-2xl my-5 overflow-hidden",n),initial:"exit",animate:"open",exit:"exit",variants:zS[i],transition:l},"function"==typeof t?t({close:s}):t))))}),{displayName:"Drawer.Panel"}),VS=["children","className"];function WS(){return WS=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},WS.apply(null,arguments)}var US=Object.assign((function(e){var t=e.children,n=e.className,r=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,VS);return React.createElement("div",WS({className:te("space-y-2 px-5 pt-5 pb-1",n)},r),t)}),{displayName:"Drawer.Header"}),$S=["children","as","className"];function KS(){return KS=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},KS.apply(null,arguments)}var HS=Object.assign((function(e){var t=e.children,n=e.as,r=void 0===n?"h3":n,o=e.className,i=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,$S);return React.createElement(r,KS({className:te("text-base font-semibold text-text-primary m-0 p-0",o)},i),t)}),{displayName:"Drawer.Title"}),qS=["children","as","className"];function YS(){return YS=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},YS.apply(null,arguments)}var GS=Object.assign((function(e){var t=e.children,n=e.as,r=void 0===n?"p":n,o=e.className,i=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,qS);return React.createElement(r,YS({className:te("text-sm font-normal text-text-secondary my-0 ml-0 mr-1 p-0",o)},i),t)}),{displayName:"Drawer.Description"}),XS=["children","className"];function JS(){return JS=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},JS.apply(null,arguments)}var ZS=Object.assign((function(e){var t=e.children,n=e.className,r=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,XS);return React.createElement("div",JS({className:te("px-5 flex flex-col flex-1 overflow-y-auto overflow-x-hidden",n)},r),t)}),{displayName:"Drawer.Body"}),QS=Object.assign((function(e){var t=e.children,n=e.className,r=LS(),o=r.design,i=r.handleClose;return React.createElement("div",{className:te("p-5 flex justify-end gap-3 mt-auto",{"bg-background-secondary":"footer-divided"===o},n)},t?"function"==typeof t?t({close:i}):t:null)}),{displayName:"Drawer.Footer"}),e_=["className"],t_=["children","as"];function n_(){return n_=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},n_.apply(null,arguments)}function r_(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var o_=function(e){var t=e.className,n=r_(e,e_);return React.createElement("button",n_({className:te("bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-none outline-none shadow-none",t),"aria-label":"Close drawer"},n),React.createElement(He,{className:"size-4 text-text-primary shrink-0"}))},i_=Object.assign((function(e){var t=e.children,n=e.as,r=void 0===n?o.Fragment:n,i=r_(e,t_),s=LS().handleClose;return(0,o.isValidElement)(t)&&t?r===o.Fragment?"function"==typeof t?t({close:s}):(0,o.cloneElement)(t,{onClick:s}):React.createElement(r,n_({},i,{onClick:s}),t):React.createElement(o_,n_({onClick:s},i))}),{displayName:"Drawer.CloseButton"}),s_=["className"];function a_(){return a_=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a_.apply(null,arguments)}var l_={open:{opacity:1},exit:{opacity:0}},c_=Object.assign((function(e){var t=e.className,n=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,s_),r=LS(),o=r.open,i=r.drawerContainerRef,s=r.transitionDuration;return i.current&&(0,zn.createPortal)(React.createElement(Hh,null,o&&React.createElement(Hf.div,a_({className:te("fixed inset-0 -z-10 bg-background-inverse/90 backdrop-blur-sm",t)},n,{initial:"exit",animate:"open",exit:"exit",variants:l_,transition:s}))),i.current)}),{displayName:"Drawer.Backdrop"}),u_=Object.assign(FS,{Panel:BS,Header:US,Title:HS,Description:GS,Body:ZS,CloseButton:i_,Footer:QS,Backdrop:c_});return r}()}));
\ No newline at end of file
diff --git a/dist/utils/withTW.asset.php b/dist/utils/withTW.asset.php
new file mode 100644
index 00000000..ebc0f576
--- /dev/null
+++ b/dist/utils/withTW.asset.php
@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '67b900a0c635847c38c6');
diff --git a/dist/utils/withTW.js b/dist/utils/withTW.js
new file mode 100644
index 00000000..51d14664
--- /dev/null
+++ b/dist/utils/withTW.js
@@ -0,0 +1 @@
+!function(r,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["utils/withTW.[file].js"]=e():r["utils/withTW.[file].js"]=e()}("undefined"!=typeof self?self:this,(function(){return r={657:function(r){r.exports={content:["node_modules/@bsf/force-ui/dist/force-ui.js"],theme:{extend:{colors:{"brand-background-50":"#EFF6FF","brand-background-hover-100":"#DBEAFE","brand-200":"#BFDBFE","brand-border-300":"#93C5FD","brand-400":"#60A5FA","brand-500":"#3B82F6","brand-primary-600":"#2563EB","brand-hover-700":"#1D4ED8","brand-800":"#1E40AF","brand-900":"#1E3A8A","brand-text-950":"#172554","background-primary":"#FFFFFF","background-secondary":"#F3F4F6","background-inverse":"#111827","background-brand":"#2563EB","field-primary-background":"#F9FAFB","field-secondary-background":"#FFFFFF","field-primary-hover":"#F3F4F6","field-secondary-hover":"#F3F4F6","field-dropzone-background":"#FFFFFF","field-border":"#E5E7EB","field-dropzone-background-hover":"#F9FAFB","field-dropzone-color":"#2563EB","field-label":"#111827","field-input":"#111827","field-helper":"#9CA3AF","field-background-disabled":"#F9FAFB","field-color-disabled":"#D1D5DB","field-placeholder":"#6B7280","field-border-disabled":"#F3F4F6","field-color-error":"#DC2626","field-border-error":"#FECACA","field-background-error":"#FEF2F2","field-required":"#DC2626","border-interactive":"#2563EB","border-subtle":"#E5E7EB","border-strong":"#6B7280","border-inverse":"#374151","border-disabled":"#E5E7EB","border-muted":"#E5E7EB","border-error":"#DC2626","border-transparent-subtle":"#37415114","border-white":"#FFFFFF","text-primary":"#111827","text-secondary":"#4B5563","text-tertiary":"#9CA3AF","text-on-color":"#FFFFFF","text-error":"#DC2626","text-error-inverse":"#F87171","text-inverse":"#FFFFFF","text-disabled":"#D1D5DB","text-on-button-disabled":"#9CA3AF","link-primary":"#2563EB","link-primary-hover":"#1D4ED8","link-inverse":"#38BDF8","link-visited":"#7C3AED","link-visited-inverse":"#A78BFA","link-inverse-hover":"#7DD3FC","icon-primary":"#111827","icon-secondary":"#4B5563","icon-on-color":"#FFFFFF","icon-inverse":"#FFFFFF","icon-interactive":"#2563EB","icon-on-color-disabled":"#9CA3AF","icon-disabled":"#D1D5DB","support-error":"#DC2626","support-success":"#16A34A","support-warning":"#EAB308","support-info":"#0284C7","support-error-inverse":"#F87171","support-success-inverse":"#4ADE80","support-warning-inverse":"#FDE047","support-info-inverse":"#38BDF8","button-primary":"#2563EB","button-primary-hover":"#1D4ED8","button-secondary":"#1F2937","button-secondary-hover":"#374151","button-tertiary":"#FFFFFF","button-tertiary-hover":"#F9FAFB","button-danger":"#DC2626","button-danger-secondary":"#DC2626","button-danger-hover":"#B91C1C","button-disabled":"#F3F4F6","button-tertiary-border":"#E5E7EB","button-tertiary-color":"#111827",focus:"#2563EB","focus-inset":"#FFFFFF","focus-inverse":"#38BDF8","focus-inverse-inset":"#111827","focus-error":"#DC2626","focus-border":"#BFDBFE","focus-error-border":"#FECACA","misc-highlight":"#BFDBFE","misc-overlay":"#11182780","misc-skeleton-background":"#F3F4F6","misc-skeleton-element":"#D1D5DB","misc-popup-button-hover":"#1118270D","misc-tab-item-hover":"#E5E7EB","misc-dropdown-hover":"#F3F4F6","misc-loader-base":"#1118270D","misc-loader-color":"#2563EB","misc-progress-background":"#E5E7EB","badge-background-gray":"#F9FAFB","badge-color-gray":"#1F2937","badge-hover-gray":"#F3F4F6","badge-border-gray":"#E5E7EB","badge-background-red":"#FEF2F2","badge-color-red":"#B91C1C","badge-hover-red":"#FEE2E2","badge-border-red":"#FECACA","badge-background-yellow":"#FEFCE8","badge-color-yellow":"#A16207","badge-hover-yellow":"#FEF9C3","badge-border-yellow":"#FEF08A","badge-hover-green":"#DCFCE7","badge-border-green":"#BBF7D0","badge-background-green":"#F0FDF4","badge-color-green":"#15803D","badge-background-sky":"#F0F9FF","badge-color-sky":"#0369A1","badge-hover-sky":"#E0F2FE","badge-border-sky":"#BAE6FD","badge-background-disabled":"#F3F4F6","badge-color-disabled":"#D1D5DB","badge-hover-disabled":"#F3F4F6","badge-border-disabled":"#E5E7EB","alert-background-neutral":"#FFFFFF","alert-border-neutral":"#E5E7EB","alert-background-danger":"#FEF2F2","alert-border-danger":"#FECACA","alert-background-warning":"#FEFCE8","alert-border-warning":"#FEF08A","alert-background-green":"#F0FDF4","alert-border-green":"#BBF7D0","alert-background-info":"#F0F9FF","alert-border-info":"#BAE6FD","tab-background":"#F3F4F6","tab-border":"#E5E7EB","tooltip-background-light":"#FFFFFF","tooltip-background-dark":"#111827","toggle-off":"#E5E7EB","toggle-on":"#2563EB","toggle-dial-background":"#FFFFFF","toggle-off-hover":"#D1D5DB","toggle-off-border":"#D1D5DB","toggle-on-hover":"#3B82F6","toggle-on-border":"#60A5FA","toggle-off-disabled":"#F3F4F6"},width:{"1/7":"14.2857143%","1/8":"12.5%","1/9":"11.1111111%","1/10":"10%","1/11":"9.0909091%","1/12":"8.3333333%"},boxShadow:{"soft-shadow-sm":"0px 6px 32px -12px rgba(149, 160, 178, 0.12)","soft-shadow":"0px 8px 32px -12px rgba(149, 160, 178, 0.16)","soft-shadow-md":"0px 10px 32px -12px rgba(149, 160, 178, 0.2)","soft-shadow-lg":"0px 12px 32px -12px rgba(149, 160, 178, 0.24)","soft-shadow-xl":"0px 16px 32px -12px rgba(149, 160, 178, 0.32)","soft-shadow-2xl":"0px 24px 64px -12px rgba(149, 160, 178, 0.32)"},fontSize:{tiny:"0.625rem"},spacing:{120:"30rem",95:"23.75rem",141.5:"35.375rem",188:"47rem"},zIndex:{999999:"999999"}}},plugins:[],corePlugins:{preflight:!1}}},709:function(r,e,o){function t(r){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},t(r)}function n(r,e){var o=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),o.push.apply(o,t)}return o}function a(r,e,o){return(e=function(r){var e=function(r){if("object"!=t(r)||!r)return r;var e=r[Symbol.toPrimitive];if(void 0!==e){var o=e.call(r,"string");if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}(r);return"symbol"==t(e)?e:e+""}(e))in r?Object.defineProperty(r,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[e]=o,r}var i=o(744),F=o(657);r.exports=function(r){return i(F,function(r){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?n(Object(o),!0).forEach((function(e){a(r,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}))}return r}({},r))}},744:function(r){"use strict";var e=function(r){return function(r){return!!r&&"object"==typeof r}(r)&&!function(r){var e=Object.prototype.toString.call(r);return"[object RegExp]"===e||"[object Date]"===e||function(r){return r.$$typeof===o}(r)}(r)},o="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function t(r,e){return!1!==e.clone&&e.isMergeableObject(r)?F((o=r,Array.isArray(o)?[]:{}),r,e):r;var o}function n(r,e,o){return r.concat(e).map((function(r){return t(r,o)}))}function a(r){return Object.keys(r).concat(function(r){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(r).filter((function(e){return Object.propertyIsEnumerable.call(r,e)})):[]}(r))}function i(r,e){try{return e in r}catch(r){return!1}}function F(r,o,d){(d=d||{}).arrayMerge=d.arrayMerge||n,d.isMergeableObject=d.isMergeableObject||e,d.cloneUnlessOtherwiseSpecified=t;var b=Array.isArray(o);return b===Array.isArray(r)?b?d.arrayMerge(r,o,d):function(r,e,o){var n={};return o.isMergeableObject(r)&&a(r).forEach((function(e){n[e]=t(r[e],o)})),a(e).forEach((function(a){(function(r,e){return i(r,e)&&!(Object.hasOwnProperty.call(r,e)&&Object.propertyIsEnumerable.call(r,e))})(r,a)||(i(r,a)&&o.isMergeableObject(e[a])?n[a]=function(r,e){if(!e.customMerge)return F;var o=e.customMerge(r);return"function"==typeof o?o:F}(a,o)(r[a],e[a],o):n[a]=t(e[a],o))})),n}(r,o,d):t(o,d)}F.all=function(r,e){if(!Array.isArray(r))throw new Error("first argument should be an array");return r.reduce((function(r,o){return F(r,o,e)}),{})};var d=F;r.exports=d}},e={},function o(t){var n=e[t];if(void 0!==n)return n.exports;var a=e[t]={exports:{}};return r[t](a,a.exports,o),a.exports}(709);var r,e}));
\ No newline at end of file
diff --git a/force-ui.zip b/force-ui.zip
new file mode 100644
index 00000000..0a0e7dd9
Binary files /dev/null and b/force-ui.zip differ
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..5037e1da
--- /dev/null
+++ b/package.json
@@ -0,0 +1,104 @@
+{
+  "name": "@bsf/force-ui",
+  "version": "0.0.6",
+  "description": "Library of components for the BSF project",
+  "main": "dist/force-ui.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "cross-env NODE_ENV=production wp-scripts build",
+    "start": "cross-env NODE_ENV=development wp-scripts start",
+    "pretty-fix": "prettier --write .",
+    "pretty-lint": "prettier --check .",
+    "lint:js": "wp-scripts lint-js ./src",
+    "eslint:js-fix": "wp-scripts lint-js ./src --fix",
+    "lint:js-fix": "npm run pretty-fix && npm run eslint:js-fix",
+    "lint:css": "wp-scripts lint-style ./src/**/*.{scss,css}",
+    "lint:css-fix": "wp-scripts lint-style ./src/**/*.{scss,css} --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token CHROMATIC_PROJECT_TOKEN",
+    "package": "sh bin/build.sh",
+    "release": "npm run build && npm run package "
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rahulvarma722/bsf-admin-ui.git"
+  },
+  "volta": {
+    "node": "18.15.0"
+  },
+  "keywords": [
+    "bsf",
+    "components",
+    "library"
+  ],
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^1.3.0",
+    "@floating-ui/react": "^0.26.20",
+    "@lexical/react": "^0.17.0",
+    "@lexical/utils": "^0.17.0",
+    "clsx": "^2.1.1",
+    "deepmerge": "^4.3.1",
+    "framer-motion": "^11.3.29",
+    "lexical": "^0.17.0",
+    "lucide-react": "^0.417.0",
+    "nanoid": "^5.0.7",
+    "styled-components": "^6.1.12",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss-scoped-preflight": "^3.4.3"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/force-ui.js"
+    },
+    "./withTW": {
+      "node": "./dist/utils/withTW.js"
+    }
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^2.0.2",
+    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-interactions": "^8.3.3",
+    "@storybook/addon-links": "^8.3.3",
+    "@storybook/addon-onboarding": "^8.3.3",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.3.3",
+    "@storybook/react": "^8.3.3",
+    "@storybook/react-webpack5": "^8.3.3",
+    "@storybook/test": "^8.3.3",
+    "@wordpress/eslint-plugin": "^20.3.0",
+    "@wordpress/prettier-config": "^4.4.0",
+    "@wordpress/scripts": "^27.9.0",
+    "autoprefixer": "^10.4.19",
+    "babel-loader": "^9.1.3",
+    "chromatic": "^11.7.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "postcss": "^8.4.39",
+    "prettier": "^3.2.5",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.3.3",
+    "tailwindcss": "^3.4.10",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.7.4"
+  },
+  "browserslist": [
+    "last 1 version",
+    "> 1%",
+    "IE 10"
+  ],
+  "bugs": {
+    "url": "https://github.com/rahulvarma722/bsf-admin-ui/issues"
+  },
+  "homepage": "https://github.com/rahulvarma722/bsf-admin-ui#readme"
+}
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 00000000..33ad091d
--- /dev/null
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/components/alert/alert.jsx b/src/components/alert/alert.jsx
new file mode 100644
index 00000000..3b05e28e
--- /dev/null
+++ b/src/components/alert/alert.jsx
@@ -0,0 +1,154 @@
+import { cn } from '@/utilities/functions';
+import { getIcon, getAction, getContent, getTitle } from '../toaster/utils';
+import { X } from 'lucide-react';
+
+const Alert = ( {
+	design = 'inline', // stack/inline
+	theme = 'light', // light/dark
+	variant = 'neutral',
+	className = '',
+	title = 'Title',
+	content = 'Description',
+	icon = null,
+	onClose = () => {},
+	action = {
+		label: 'Action',
+		onClick: () => {},
+		type: 'link',
+	},
+} ) => {
+	const closeAlert = () => {
+		onClose();
+	};
+
+	const containerVariantClassNames = {
+		stack: 'w-[22.5rem]',
+		inline: 'lg:w-[47.5rem] w-full',
+	};
+
+	// Variant classes - Based on the variant prop.
+	const variantClassNames = {
+		light: {
+			neutral: 'border-alert-border-neutral bg-alert-background-neutral',
+			custom: 'border-alert-border-neutral bg-alert-background-neutral',
+			info: 'border-alert-border-info bg-alert-background-info',
+			success: 'border-alert-border-green bg-alert-background-green',
+			warning: 'border-alert-border-warning bg-alert-background-warning',
+			error: 'border-alert-border-danger bg-alert-background-danger',
+		},
+		dark: 'bg-background-inverse border-background-inverse',
+	};
+
+	// Close icon class names.
+	const closeIconClassNames = {
+		light: 'text-icon-secondary',
+		dark: 'text-icon-inverse',
+	};
+
+	const handleAction = () => {
+		action?.onClick?.( () => closeAlert() );
+	};
+
+	if ( design === 'stack' ) {
+		return (
+			<div
+				className={ cn(
+					'flex items-center justify-start p-4 gap-2 relative border border-solid rounded-md shadow-lg',
+					theme === 'dark'
+						? variantClassNames.dark
+						: variantClassNames.light?.[ variant ],
+					containerVariantClassNames.inline,
+					className
+				) }
+			>
+				<>
+					<div className="self-start flex items-center justify-center [&_svg]:size-5 shrink-0">
+						{ getIcon( { variant, icon, theme } ) }
+					</div>
+					<div className="flex flex-col items-start justify-start gap-0.5">
+						{ getTitle( { title, theme } ) }
+						{ getContent( { content, theme } ) }
+						{
+							action?.label &&
+								typeof action?.onClick === 'function' && (
+							/* eslint-disable */
+									<div className="mt-2.5">
+										{getAction({
+											actionLabel: action?.label,
+											actionType:
+												action?.type ?? 'button',
+											onAction: handleAction,
+											theme,
+										})}
+									</div>
+								)
+							/* eslint-enable */
+						}
+					</div>
+					<div className="absolute right-4 top-4 [&_svg]:size-5">
+						<button
+							className={ cn(
+								'bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer',
+								closeIconClassNames[ theme ] ??
+									closeIconClassNames.light
+							) }
+							onClick={ () => closeAlert() }
+						>
+							<X />
+						</button>
+					</div>
+				</>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className={ cn(
+				'flex items-center justify-between p-3 gap-2 relative border border-solid rounded-md shadow-lg',
+				theme === 'dark'
+					? variantClassNames.dark
+					: variantClassNames.light?.[ variant ],
+				containerVariantClassNames.inline,
+				className
+			) }
+		>
+			<div className="flex items-center justify-start gap-2">
+				<div className="self-start flex items-center justify-center [&_svg]:size-5 shrink-0">
+					{ getIcon( { variant, icon, theme } ) }
+				</div>
+				<div className="flex items-start justify-start gap-1 mr-10 [&>span:first-child]:shrink-0">
+					{ getTitle( { title, theme } ) }
+					{ getContent( { content, theme } ) }
+				</div>
+			</div>
+			<div className="flex items-center justify-start gap-4 [&_svg]:size-5">
+				{
+					action?.label && typeof action?.onClick === 'function' && (
+						/* eslint-disable */
+						<div className="flex">
+							{getAction({
+								actionLabel: action?.label,
+								actionType: action?.type ?? 'button',
+								onAction: handleAction,
+								theme,
+							})}
+						</div>
+					)
+					/* eslint-enable */
+				}
+				<button
+					className={ cn(
+						'bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer',
+						closeIconClassNames[ theme ] ?? closeIconClassNames.light
+					) }
+					onClick={ () => closeAlert() }
+				>
+					<X />
+				</button>
+			</div>
+		</div>
+	);
+};
+
+export default Alert;
diff --git a/src/components/alert/alert.stories.js b/src/components/alert/alert.stories.js
new file mode 100644
index 00000000..be35cb53
--- /dev/null
+++ b/src/components/alert/alert.stories.js
@@ -0,0 +1,189 @@
+import Alert from './alert.jsx';
+import { fn } from '@storybook/test';
+import { Plus } from 'lucide-react';
+
+// Alert component story configuration
+export default {
+	title: 'Atoms/Alert',
+	component: Alert,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the alert.',
+			control: 'select',
+			options: [
+				'neutral',
+				'info',
+				'warning',
+				'error',
+				'success',
+				'inverse',
+			],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'neutral' },
+			},
+		},
+		theme: {
+			name: 'Theme',
+			description: 'Defines the theme of the alert.',
+			control: 'select',
+			options: [ 'light', 'dark' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'light' },
+			},
+		},
+		design: {
+			name: 'Design',
+			description: 'Defines the design of the alert.',
+			control: 'select',
+			options: [ 'inline', 'stack' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'inline' },
+			},
+		},
+		title: {
+			name: 'Title',
+			description: 'Defines the title of the alert.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'Title' },
+			},
+		},
+		content: {
+			name: 'Content',
+			description: 'Defines the content of the alert.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'This is a description' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		onClose: {
+			name: 'On Close Event',
+			description: 'Callback function for close event',
+			control: 'function',
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+		},
+		icon: {
+			name: 'Icon',
+			description: 'Custom Icon for the alert.',
+			control: 'object',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: 'null' },
+			},
+		},
+		action: {
+			name: 'Action',
+			description: 'Defines the description of the alert.',
+			control: 'object',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: {
+					label: 'Action',
+					onClick: () => {},
+					type: 'link',
+				},
+			},
+		},
+	},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Neutral = {
+	args: {
+		variant: 'neutral',
+		onClose: fn(),
+	},
+};
+
+export const Info = {
+	args: {
+		variant: 'info',
+		disabled: true,
+		onClose: fn(),
+	},
+};
+
+export const Warning = {
+	args: {
+		variant: 'warning',
+		onClose: fn(),
+	},
+};
+
+export const Error = {
+	args: {
+		variant: 'error',
+		onClose: fn(),
+	},
+};
+
+export const Success = {
+	args: {
+		variant: 'success',
+		onClose: fn(),
+	},
+};
+
+export const Stack = {
+	args: {
+		variant: 'info',
+		design: 'stack',
+		onClose: fn(),
+	},
+};
+
+export const Dark = {
+	args: {
+		variant: 'error',
+		theme: 'dark',
+		onClose: fn(),
+	},
+};
+
+export const WithAction = {
+	args: {
+		onClose: fn(),
+		variant: 'info',
+		design: 'stack',
+		action: {
+			label: 'My Action',
+			onClick: () => {},
+			type: 'button',
+		},
+	},
+};
+
+export const WithCustomIcon = {
+	args: {
+		onClose: fn(),
+		variant: 'info',
+		icon: <Plus />,
+		action: {
+			label: 'My Action',
+			onClick: () => {},
+			type: 'button',
+		},
+	},
+};
diff --git a/src/components/alert/index.js b/src/components/alert/index.js
new file mode 100644
index 00000000..4259c218
--- /dev/null
+++ b/src/components/alert/index.js
@@ -0,0 +1 @@
+export { default } from './alert.jsx';
diff --git a/src/components/alert/readme.md b/src/components/alert/readme.md
new file mode 100644
index 00000000..e164d820
--- /dev/null
+++ b/src/components/alert/readme.md
@@ -0,0 +1,95 @@
+# Alert Component Documentation
+
+## Description
+
+The `Alert` component is a simple component that displays a message to the user. The message is displayed inline on the HTML page. This component can be used to show any warning, error, success message, information, etc
+
+## `Alert` Props
+
+### `design`
+- **Type:** `string`
+- **Default:** `'stack'`
+- **Description:** The design layout of the alert notification. Possible values are: 
+    - `stack` 
+    - `inline`
+
+### `theme`
+- **Type:** `string`
+- **Default:** `'light'`
+- **Description:** The theme of the alert notification. Possible values are: 
+    - `light`
+    - `dark`
+
+### `className`
+- **Type:** `string`
+- **Default:** `''`
+- **Description:** Additional CSS class names to apply to the alert notification. For example, you can use this prop to apply gaps between alert notifications and view port edges.
+
+### `variant`
+- **Type:** `string`
+- **Default:** `'neutral'`
+- **Description:** The variant of the alert Possible values are: 
+    - `neutral`
+    - `custom`
+    - `info`
+    - `success`
+    - `warning`
+    - `error`
+
+### `title`
+- **Type:** `Title`
+- **Default:** `''`
+- **Description:** Title of the alert box.
+
+### `content`
+- **Type:** `Description`
+- **Default:** `''`
+- **Description:** Description of the alert box.
+
+### `icon`
+- **Type:** `ReactNode`
+- **Description:** An icon component to be displayed inside the alert.
+
+### `onClose`
+- **Type:** `function`
+- **Description:** Callback action for closing the alert.
+
+### `action`
+- **Type:** `json`
+- **Description:** The action part of the alert. Expects below listed options
+```jsx
+	action = {
+		label: 'Action',
+		onClick: () => {},
+		type: 'link',
+	},
+```
+
+### Example
+
+```jsx
+import React from 'react';
+import { Alert } from '@bsf/force-ui';
+
+const App = () => {
+    return (
+        <div className="flex gap-3 items-center justify-start flex-wrap m-4 p-4">
+            <Alert title={"Info alert"} content={"This is a description"} variant="error" />
+            <Alert title={"Info alert"} content={"This is a description"} variant="warning" />
+            <Alert title={"Info alert"} content={"This is a description"} variant="success" />
+            <Alert title={"Info alert"} content={"This is a description"} design={"stack"} variant="info" action={
+                            {label: 'Undo',
+                            onClick: () => {},
+                            type: 'button',
+                        }} />
+            <Alert title={"Info alert"} content={"This is a description"} variant="neutral" />
+            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="error" />
+            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="warning" />
+            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="success" />
+            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="info" />
+            <Alert title={"Info alert"} content={"This is a description"} theme={"dark"} variant="neutral" />
+        </div>
+    );
+};
+
+```
diff --git a/src/components/avatar/avatar.jsx b/src/components/avatar/avatar.jsx
new file mode 100644
index 00000000..023430e9
--- /dev/null
+++ b/src/components/avatar/avatar.jsx
@@ -0,0 +1,68 @@
+import { cn } from '@/utilities/functions';
+
+const Avatar = ( props ) => {
+	const {
+		variant = 'primary',
+		size = 'md',
+		border = 'subtle',
+		url = '',
+		children,
+		className,
+	} = props;
+
+	const effectiveBorder = url && border === 'none' ? 'subtle' : border;
+
+	const baseClasses =
+		'rounded-full overflow-hidden flex items-center justify-center';
+
+	const variantClasses = {
+		white: 'text-text-primary bg-background-primary',
+		gray: 'text-text-primary bg-background-secondary',
+		primary: 'text-text-on-color bg-background-brand',
+		primaryLight: 'text-text-primary bg-brand-background-50',
+		dark: 'text-text-on-color bg-button-secondary',
+	}?.[ variant ];
+
+	const sizeClasses = {
+		xs: 'w-5 h-5 [&>svg]:h-3 [&>svg]:w-3 text-xs',
+		sm: 'w-6 h-6 [&>svg]:h-4 [&>svg]:w-4 text-sm',
+		md: 'w-8 h-8 [&>svg]:h-5 [&>svg]:w-5 text-base',
+		lg: 'w-10 h-10 [&>svg]:h-6 [&>svg]:w-6 text-lg',
+	}?.[ size ];
+
+	const borderClasses = {
+		none: '',
+		subtle: 'border border-solid border-border-transparent-subtle',
+		ring: 'border-4 border-solid border-border-white',
+	}?.[ effectiveBorder ];
+
+	const contentClasses = url ? 'bg-cover bg-center bg-no-repeat' : '';
+
+	const getChildren = () => {
+		if ( ! children ) {
+			return null;
+		}
+		if ( typeof children === 'string' ) {
+			return children?.[ 0 ]?.toUpperCase();
+		}
+		return children;
+	};
+
+	return (
+		<div
+			className={ cn(
+				baseClasses,
+				! url && variantClasses,
+				sizeClasses,
+				borderClasses,
+				contentClasses,
+				className
+			) }
+			style={ url ? { backgroundImage: `url(${ url })` } : {} }
+		>
+			{ getChildren() }
+		</div>
+	);
+};
+
+export default Avatar;
diff --git a/src/components/avatar/avatar.stories.jsx b/src/components/avatar/avatar.stories.jsx
new file mode 100644
index 00000000..0bcb9bfc
--- /dev/null
+++ b/src/components/avatar/avatar.stories.jsx
@@ -0,0 +1,113 @@
+import { User, Bell } from 'lucide-react';
+import Avatar from './avatar.jsx';
+
+// Avatar component story configuration
+export default {
+	title: 'Atoms/Avatar',
+	component: Avatar,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the avatar.',
+			control: 'select',
+			options: [ 'primary', 'dark', 'primaryLight', 'white', 'gray' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'primary' },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the avatar.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		border: {
+			name: 'Border',
+			description: 'Defines the border of the avatar.',
+			control: 'select',
+			options: [ 'subtle', 'none', 'ring' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'subtle' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		url: {
+			name: 'URL',
+			description: 'The URL of the Avatar image',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		children: {
+			name: 'Children',
+			control: 'object',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+	args: {
+		variant: 'primary',
+		children: 'Avatar',
+	},
+};
+
+export const White = {
+	args: {
+		variant: 'white',
+		children: 'Avatar',
+	},
+};
+
+export const Gray = {
+	args: {
+		variant: 'gray',
+		children: <User />,
+	},
+};
+
+export const PrimaryLight = {
+	args: {
+		variant: 'primaryLight',
+		children: <Bell />,
+	},
+};
+
+export const Dark = {
+	args: {
+		variant: 'dark',
+		children: 'Avatar',
+	},
+};
+
+export const URLAvatar = {
+	args: {
+		variant: 'primary',
+		url: 'https://0.gravatar.com/avatar/05d8f4a5468440075f82adcea83d5cc3?s=128&d=mm&r=g',
+	},
+};
diff --git a/src/components/avatar/index.js b/src/components/avatar/index.js
new file mode 100644
index 00000000..04500400
--- /dev/null
+++ b/src/components/avatar/index.js
@@ -0,0 +1 @@
+export { default } from './avatar.jsx';
diff --git a/src/components/avatar/readme.md b/src/components/avatar/readme.md
new file mode 100644
index 00000000..7feace13
--- /dev/null
+++ b/src/components/avatar/readme.md
@@ -0,0 +1,67 @@
+# Avatar Component Documentation
+
+## Description
+
+The `Avatar` component is a visual representation of a user or entity, typically displayed as a small image or icon. Avatars are commonly used in user profiles, messaging apps, social networks, and anywhere user identity needs to be visually indicated.
+
+## Props
+
+### `variant`
+- **Type:** `string`
+- **Default:** `"primary"`
+- **Description:** Defines the style variant of the avatar. Options include:
+  - `"white"` 
+  - `"gray"`
+  - `"primary"`
+  - `"primaryLight"`
+  - `"dark"`
+
+### `size`
+- **Type:** `string`
+- **Default:** `"md"`
+- **Description:** Defines the size of the avatar. Options include:
+  - `"xs"`
+  - `"sm"`
+  - `"md"`
+  - `"lg"`
+
+### `border`
+- **Type:** `string`
+- **Default:** `"subtle"`
+- **Description:** Defines the border of the avatar. Options include:
+  - `"none"`
+  - `"subtle"`
+  - `"ring"`
+
+### `url`
+- **Type:** `string`
+- **Description:** URL of image to be used as the background image of the avatar.
+
+### `children`
+- **Type:** `string` or `ReactNode`
+- **Description:** An icon, string, or image element to be displayed inside the avatar.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the button.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import Avatar from './Avatar';
+import { ReactComponent as ExampleIcon } from './icons/example.svg';
+import userImg from './user.png';
+
+const App = () => (
+  <div>
+    <Avatar size="xs" variant="gray" border="ring">username</ Avatar>
+    <Avatar size="sm" variant="primaryLight">{<ExampleIcon />}</ Avatar>
+    <Avatar size="lg" url="https://example.com/my-avatar.jpg"/>
+    <Avatar size="lg" url={userImg}/>
+  </div>
+);
+
+export default App;
+```
\ No newline at end of file
diff --git a/src/components/badge/badge.jsx b/src/components/badge/badge.jsx
new file mode 100644
index 00000000..771b4235
--- /dev/null
+++ b/src/components/badge/badge.jsx
@@ -0,0 +1,107 @@
+import { forwardRef } from 'react';
+import { cn } from '@/utilities/functions';
+import { X } from 'lucide-react';
+
+/**
+ * Badge component.
+ */
+
+const BadgeComponent = ( props, ref ) => {
+	const {
+		label = '',
+		size = 'sm', // xs, sm, md, lg
+		className = '',
+		type = 'pill', // pill, rounded
+		variant = 'neutral', // neutral, red, yellow, green, blue, inverse
+		icon = null,
+		disabled = false,
+		onClose = () => {},
+		closable = false,
+		onMouseDown = () => {},
+	} = props;
+
+	// Base classes. - Mandatory classes.
+	const baseClasses =
+		'font-medium border-badge-border-gray flex gap-1 items-center justify-center border border-solid';
+
+	// Size classes - Based on the size prop.
+	const sizeClasses = {
+		xs: 'py-0.5 px-1 text-xs',
+		sm: 'py-1 px-1.5 text-xs',
+		md: 'py-1 px-1.5 text-sm',
+		lg: 'py-1 px-1.5 text-base',
+	};
+
+	// Type classes - Based on the type prop.
+	const typeClasses = {
+		pill: 'rounded-full',
+		rounded: 'rounded',
+	};
+
+	// Variant classes - Based on the variant prop.
+	const variantClasses = {
+		neutral:
+			'bg-badge-background-gray hover:bg-badge-hover-gray text-badge-color-gray border-badge-border-gray',
+		red: 'bg-badge-background-red hover:bg-badge-hover-red text-badge-color-red border-badge-border-red',
+		yellow: 'bg-badge-background-yellow hover:bg-badge-hover-yellow text-badge-color-yellow border-badge-border-yellow',
+		green: 'bg-badge-background-green hover:bg-badge-hover-green text-badge-color-green border-badge-border-green',
+		blue: 'bg-badge-background-sky hover:bg-badge-hover-sky text-badge-color-sky border-badge-border-sky',
+		inverse:
+			'bg-background-inverse hover:bg-badge-hover-inverse text-text-inverse border-background-inverse',
+		disabled:
+			'bg-badge-background-disabled hover:bg-badge-hover-disabled text-badge-color-disabled border-badge-border-disabled disabled cursor-not-allowed',
+	};
+
+	let filteredClasses = '';
+	let buttonClasses =
+		'group relative justify-center flex items-center [&>svg]:h-4 [&>svg]:w-4 cursor-pointer';
+
+	if ( disabled ) {
+		filteredClasses = variantClasses.disabled;
+		buttonClasses += ' cursor-not-allowed disabled';
+	} else {
+		filteredClasses = variantClasses[ variant ];
+	}
+
+	if ( ! label ) {
+		return null;
+	}
+
+	return (
+		<span
+			className={ cn(
+				baseClasses,
+				sizeClasses[ size ],
+				typeClasses[ type ],
+				filteredClasses,
+				className
+			) }
+			ref={ ref }
+		>
+			{ icon ? (
+				<span className="justify-center flex items-center [&>svg]:h-4 [&>svg]:w-4">
+					{ icon }
+				</span>
+			) : null }
+			{ label }
+			{ closable && (
+				<span
+					className={ buttonClasses }
+					onClick={ ! disabled ? onClose : null }
+					onMouseDown={ onMouseDown }
+					role="button"
+					tabIndex={ 0 }
+				>
+					<span className="sr-only">{ `Remove ${ label }` }</span>
+					<X />
+					<span className="absolute -inset-1" />
+				</span>
+			) }
+		</span>
+	);
+};
+
+const Badge = forwardRef( BadgeComponent );
+Badge.displayName = 'Badge';
+
+export default Badge;
diff --git a/src/components/badge/badge.stories.js b/src/components/badge/badge.stories.js
new file mode 100644
index 00000000..84026d2f
--- /dev/null
+++ b/src/components/badge/badge.stories.js
@@ -0,0 +1,173 @@
+import Badge from './badge.jsx';
+import { Info } from 'lucide-react';
+
+// Badge component story configuration
+export default {
+	title: 'Atoms/Badge',
+	component: Badge,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the badge.',
+			control: 'select',
+			options: [ 'neutral', 'red', 'yellow', 'green', 'blue', 'inverse' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'neutral' },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the badge.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		type: {
+			name: 'Type',
+			description: 'Defines the type of the badge.',
+			control: 'select',
+			options: [ 'pill', 'rounded' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'pill' },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Defines if the badge is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		closable: {
+			name: 'Closable',
+			description: 'Defines if the badge is closable.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+		label: {
+			control: 'text',
+			name: 'Label',
+			description: 'Defines the Label of the badge.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'Badge' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		onClose: {
+			name: 'On Close Event',
+			description: 'Callback function for close event',
+			control: 'function',
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+		},
+		onMouseDown: {
+			name: 'On Mouse Down Event',
+			description: 'Callback function for mouse down event',
+			control: 'function',
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+		},
+		icon: {
+			name: 'Icon',
+			description: 'Custom Icon for the badge.',
+			control: 'object',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: <Info /> },
+			},
+		},
+	},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Neutral = {
+	args: {
+		variant: 'neutral',
+		icon: <Info />,
+		type: 'pill',
+		size: 'sm',
+		label: 'Badge',
+	},
+};
+
+export const Disabled = {
+	args: {
+		variant: 'neutral',
+		type: 'pill',
+		size: 'sm',
+		label: 'Badge',
+		disabled: true,
+	},
+};
+
+export const Red = {
+	args: {
+		variant: 'red',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+	},
+};
+
+export const Yellow = {
+	args: {
+		variant: 'yellow',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+	},
+};
+
+export const Green = {
+	args: {
+		variant: 'green',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+	},
+};
+
+export const Blue = {
+	args: {
+		variant: 'blue',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+	},
+};
+
+export const Inverse = {
+	args: {
+		variant: 'inverse',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+	},
+};
diff --git a/src/components/badge/index.js b/src/components/badge/index.js
new file mode 100644
index 00000000..676489a0
--- /dev/null
+++ b/src/components/badge/index.js
@@ -0,0 +1 @@
+export { default } from './badge.jsx';
diff --git a/src/components/badge/readme.md b/src/components/badge/readme.md
new file mode 100644
index 00000000..9383b16c
--- /dev/null
+++ b/src/components/badge/readme.md
@@ -0,0 +1,87 @@
+# Badge Component Documentation
+
+## Description
+
+The `Badge` component can show notifications, counts, or status information on navigation items and icons.
+
+## Props
+
+### `variant`
+- **Type:** `string`
+- **Default:** `"primary"`
+- **Description:** Defines the style variant of the button. Options include:
+  - `"neutral"`
+  - `"red"`
+  - `"yellow"`
+  - `"green"`
+  - `"blue"`
+  - `"inverse"`
+
+### `size`
+- **Type:** `string`
+- **Default:** `"md"`
+- **Description:** Defines the size of the badge. Options include:
+  - `"xs"`
+  - `"sm"`
+  - `"md"`
+  - `"lg"`
+
+### `type`
+- **Type:** `string`
+- **Default:** `"pill"`
+- **Description:** Defines the type of the badge. Options include:
+  - `"pill"`
+  - `"rounded"`
+
+### `label`
+- **Type:** `string`
+- **Default:** `""`
+- **Description:** Label of the Badge.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the button.
+
+### `disabled`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Defines whether the badge is disabled.
+
+### `closable`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Defines whether the badge is closable or not. This parameter will decide if the cross icon is shown or not.
+
+### `icon`
+- **Type:** `ReactNode`
+- **Default:** null
+- **Description:** An icon component to be displayed left of the Badge.
+
+### `onClose`
+- **Type:** `React callback function`
+- **Description:** Callback function that triggers when the cross icon is clicked.
+
+### `onMouseDown`
+- **Type:** `React callback function`
+- **Description:** Callback function that triggers when the cross icon is clicked.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import Badge from './Badge';
+import { ReactComponent as ExampleIcon } from './icons/example.svg';
+
+const App = () => (
+  <div>
+    <Badge label={'Badge'} size="xs" type="rounded" variant="red"/>
+    <Badge label={'Badge'} size="md" type="rounded" variant="green"/>
+    <Badge label={'Badge'} size="sm" variant="blue"/>
+  </div>
+);
+
+export default App;
+```
+
+
diff --git a/src/components/breadcrumb/breadcrumb.jsx b/src/components/breadcrumb/breadcrumb.jsx
new file mode 100644
index 00000000..308a625d
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.jsx
@@ -0,0 +1,116 @@
+import React, { createContext, useContext } from 'react';
+import { cn } from '@/utilities/functions';
+import { ChevronRight, Ellipsis } from 'lucide-react';
+
+const BreadcrumbContext = createContext();
+
+const sizeClasses = {
+	sm: {
+		text: 'text-sm',
+		separator: 'text-sm',
+		separatorIconSize: 16,
+	},
+	md: {
+		text: 'text-base',
+		separator: 'text-base',
+		separatorIconSize: 18,
+	},
+};
+
+const Breadcrumb = ( { children, size = 'sm' } ) => {
+	const sizes = sizeClasses[ size ] || sizeClasses.sm;
+
+	return (
+		<BreadcrumbContext.Provider value={ { sizes } }>
+			<nav className="flex m-0" aria-label="Breadcrumb">
+				<ul className="m-0 inline-flex items-center space-x-1 md:space-x-1">
+					{ children }
+				</ul>
+			</nav>
+		</BreadcrumbContext.Provider>
+	);
+};
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = ( { children } ) => {
+	return <>{ children }</>;
+};
+BreadcrumbList.displayName = 'Breadcrumb.List';
+
+const BreadcrumbItem = ( { children } ) => {
+	return <li className="m-0 inline-flex items-center gap-2">{ children }</li>;
+};
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
+
+const BreadcrumbLink = ( {
+	href,
+	children,
+	className,
+	as: AsElement = 'a',
+	...props
+} ) => {
+	const { sizes } = useContext( BreadcrumbContext );
+	return (
+		<AsElement
+			href={ href }
+			className={ cn(
+				sizes.text,
+				'px-1 font-medium no-underline text-text-tertiary hover:text-text-primary hover:underline',
+				'focus:outline-none focus:ring-1 focus:ring-border-interactive focus:border-border-interactive focus:rounded-sm',
+				'transition-all duration-200',
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</AsElement>
+	);
+};
+BreadcrumbLink.displayName = 'Breadcrumb.Link';
+
+const BreadcrumbSeparator = ( { type } ) => {
+	const { sizes } = useContext( BreadcrumbContext );
+	const separatorIcons = {
+		slash: <span className={ cn( 'mx-1', sizes.separator ) }>/</span>,
+		arrow: <ChevronRight size={ sizes.separatorIconSize } />,
+	};
+
+	return (
+		<span className="flex items-center text-text-tertiary mx-2">
+			{ separatorIcons[ type ] || separatorIcons.arrow }
+		</span>
+	);
+};
+BreadcrumbSeparator.displayName = 'Breadcrumb.Separator';
+
+const BreadcrumbEllipsis = () => {
+	const { sizes } = useContext( BreadcrumbContext );
+
+	return (
+		<Ellipsis
+			className="mt-[2px] cursor-pointer text-text-tertiary hover:text-text-primary"
+			size={ sizes.separatorIconSize + 4 }
+		/>
+	);
+};
+BreadcrumbEllipsis.displayName = 'Breadcrumb.Ellipsis';
+
+const BreadcrumbPage = ( { children } ) => {
+	const { sizes } = useContext( BreadcrumbContext );
+
+	return (
+		<span className={ cn( sizes.text, 'font-medium text-text-primary' ) }>
+			{ children }
+		</span>
+	);
+};
+BreadcrumbPage.displayName = 'Breadcrumb.Page';
+
+export default Object.assign( Breadcrumb, {
+	List: BreadcrumbList,
+	Item: BreadcrumbItem,
+	Link: BreadcrumbLink,
+	Separator: BreadcrumbSeparator,
+	Ellipsis: BreadcrumbEllipsis,
+	Page: BreadcrumbPage,
+} );
diff --git a/src/components/breadcrumb/breadcrumb.stories.js b/src/components/breadcrumb/breadcrumb.stories.js
new file mode 100644
index 00000000..13536547
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.stories.js
@@ -0,0 +1,60 @@
+// Breadcrumb.stories.js
+
+import Breadcrumb from './breadcrumb'; // Adjust the import path as needed
+
+export default {
+	title: 'Atoms/Breadcrumb',
+	component: Breadcrumb,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			control: { type: 'select' },
+			options: [ 'sm', 'md' ],
+			description: 'Size of the breadcrumb component',
+			defaultValue: 'sm',
+		},
+		separatorType: {
+			control: { type: 'select' },
+			options: [ 'arrow', 'slash' ],
+			description: 'Type of separator between breadcrumb items',
+			defaultValue: 'arrow',
+		},
+	},
+};
+
+const Template = ( args ) => (
+	<Breadcrumb size={ args.size }>
+		<Breadcrumb.List>
+			<Breadcrumb.Item>
+				<Breadcrumb.Link href="#">Home</Breadcrumb.Link>
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator type={ args.separatorType } />
+			<Breadcrumb.Item>
+				<Breadcrumb.Ellipsis />
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator type={ args.separatorType } />
+			<Breadcrumb.Item>
+				<Breadcrumb.Link href="#">Category</Breadcrumb.Link>
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator type={ args.separatorType } />
+			<Breadcrumb.Item>
+				<Breadcrumb.Page>Current Page</Breadcrumb.Page>
+			</Breadcrumb.Item>
+		</Breadcrumb.List>
+	</Breadcrumb>
+);
+
+export const Basic = Template.bind( {} );
+Basic.args = {
+	size: 'sm',
+	separatorType: 'arrow',
+};
+
+export const MediumSizeWithSlashSeparator = Template.bind( {} );
+MediumSizeWithSlashSeparator.args = {
+	size: 'md',
+	separatorType: 'slash',
+};
diff --git a/src/components/breadcrumb/index.js b/src/components/breadcrumb/index.js
new file mode 100644
index 00000000..f939ff31
--- /dev/null
+++ b/src/components/breadcrumb/index.js
@@ -0,0 +1 @@
+export { default } from './breadcrumb.jsx';
diff --git a/src/components/breadcrumb/readme.md b/src/components/breadcrumb/readme.md
new file mode 100644
index 00000000..e84c5e8a
--- /dev/null
+++ b/src/components/breadcrumb/readme.md
@@ -0,0 +1,84 @@
+# Breadcrumb Component
+
+## `Breadcrumb` Props
+- **Description:** Wrapper for breadcrumb items.  
+
+### children
+- **type:** `ReactNode`
+- **description:** The breadcrumb items to be displayed inside the breadcrumb navigation.
+
+### size (optional)
+- **type:** `string`
+- **default value:** `sm`
+- **description:** The size of the breadcrumb, can be `sm` or `md`.
+
+## `Breadcrumb.List` Props
+- **Description:** Wrapper for the breadcrumb list.  
+
+### children
+- **type:** `ReactNode`
+- **description:** The child items to be rendered as a list of breadcrumb items.
+
+## `Breadcrumb.Item` Props
+- **Description:** Represents a single breadcrumb item.  
+
+### children
+- **type:** `ReactNode`
+- **description:** The content for the breadcrumb item, usually containing a link or static text.
+
+## `Breadcrumb.Link` Props
+- **Description:** The clickable link within a breadcrumb item.
+
+### href (required)
+- **type:** `string`
+- **description:** The URL the breadcrumb item will link to.
+
+### children
+- **type:** `ReactNode`
+- **description:** The content to be displayed as the breadcrumb link.
+
+### className (optional)
+- **type:** `string`
+- **description:** Additional classes to customize the link styles.
+
+### as (optional)
+- **type:** `string` or `ReactComponent`
+- **default value:** `a`
+- **description:** Used as a wrapper for breadcrumb links. Defaults to an anchor `('a')`, but can be customized with components like `Link` from React Router.
+
+## `Breadcrumb.Separator` Props
+- **Description:** Separator used between breadcrumb items.
+
+### type (optional)
+- **type:** `string`
+- **default value:** `arrow`
+- **description:** The type of separator between breadcrumb items, can be either `slash` ("/") or `arrow` (">").
+
+## `BreadcrumbEllipsis` Props
+- **Description:** Displays an ellipsis when the breadcrumb list is too long, or represents hidden items.
+
+## `Breadcrumb.Page` Props
+- **Description:** Represents the current page in the breadcrumb trail, displayed as static text instead of a link.
+
+### children
+- **type:** `ReactNode`
+- **description:** The content representing the current page.
+
+### Example:
+
+```jsx
+<Breadcrumb>
+	<Breadcrumb.List>
+        <Breadcrumb.Item>
+            <Breadcrumb.Link href="/home">Home</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator type="slash" />
+        <Breadcrumb.Item>
+            <Breadcrumb.Link href="/category">Category</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+            <Breadcrumb.Page>Current Page</Breadcrumb.Page>
+        </Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb>
diff --git a/src/components/button-group/button-group.jsx b/src/components/button-group/button-group.jsx
new file mode 100644
index 00000000..709a0014
--- /dev/null
+++ b/src/components/button-group/button-group.jsx
@@ -0,0 +1,187 @@
+import React, {
+	useCallback,
+	forwardRef,
+	isValidElement,
+	createContext,
+	useContext,
+} from 'react';
+import { cn } from '@/utilities/functions';
+
+/**
+ * Context for managing the ButtonGroup state.
+ */
+const ButtonGroupContext = createContext();
+
+/**
+ * Hook to use the ButtonGroup context.
+ * @return {Object} The context value of the ButtonGroup.
+ */
+const useButtonGroup = () => useContext( ButtonGroupContext );
+
+/**
+ * ButtonGroup component to wrap Button components.
+ * @param {Object}          props                       - The properties passed to the component.
+ * @param {React.ReactNode} props.children              - The children elements, expected to be Button components.
+ * @param {string|null}     [props.activeItem=null]     - The currently active item in the group.
+ * @param {Function}        [props.onChange]            - Callback when the active item changes.
+ * @param {string}          [props.className]           - Additional class names for styling.
+ * @param {string}          [props.size='md']           - Size of the buttons in the group ('xs', 'sm', 'md').
+ * @param {string}          [props.iconPosition='left'] - Position of the icon in the button ('left' or 'right').
+ */
+const ButtonGroup = ( props ) => {
+	const {
+		children,
+		activeItem = null,
+		onChange,
+		className,
+		size = 'md',
+		iconPosition = 'left',
+	} = props;
+
+	const handleChange = useCallback(
+		( event, value ) => {
+			if ( onChange ) {
+				onChange( { event, value } );
+			}
+		},
+		[ onChange ]
+	);
+
+	const groupClassName = cn(
+		'box-border flex border border-border-subtle border-solid rounded',
+		className
+	);
+
+	return (
+		<div className={ groupClassName }>
+			<ButtonGroupContext.Provider
+				value={ {
+					activeItem,
+					onChange: handleChange,
+					size,
+					iconPosition,
+				} }
+			>
+				{ React.Children.map( children, ( child, index ) => {
+					if ( ! isValidElement( child ) ) {
+						return null;
+					}
+					const isFirstChild = index === 0;
+					const isLastChild =
+						index === React.Children.count( children ) - 1;
+					return React.cloneElement( child, {
+						index,
+						isFirstChild,
+						isLastChild,
+					} );
+				} ) }
+			</ButtonGroupContext.Provider>
+		</div>
+	);
+};
+
+/**
+ * Button component to be used within a ButtonGroup.
+ * @param {Object}          props                  - The properties passed to the component.
+ * @param {string}          props.slug             - Unique identifier for the button.
+ * @param {string}          props.text             - Text to be displayed inside the button.
+ * @param {React.ReactNode} [props.icon]           - Optional icon to be displayed inside the button.
+ * @param {string}          [props.className]      - Additional class names for styling.
+ * @param {boolean}         props.isFirstChild     - Flag indicating if this button is the first child in the group.
+ * @param {boolean}         props.isLastChild      - Flag indicating if this button is the last child in the group.
+ * @param {boolean}         [props.disabled=false] - Flag indicating if the button is disabled.
+ * @param {Object}          [props.rest]           - Other properties to be passed to the button element.
+ * @param {React.Ref}       ref                    - Reference to the button element.
+ */
+const ButtonComponent = ( props, ref ) => {
+	const providerValue = useButtonGroup();
+	const {
+		slug,
+		text,
+		icon,
+		className,
+		disabled = false,
+		isFirstChild,
+		isLastChild,
+		...rest
+	} = props;
+
+	if ( ! providerValue ) {
+		throw new Error( 'Button should be used inside Button Group' );
+	}
+
+	const { activeItem, onChange, size, iconPosition } = providerValue;
+
+	const sizes = {
+		xs: 'py-1 px-1 text-sm gap-0.5 [&>svg]:h-4 [&>svg]:w-4',
+		sm: 'py-2 px-2 text-base gap-1 [&>svg]:h-4 [&>svg]:w-4',
+		md: 'py-2.5 px-2.5 text-base gap-1 [&>svg]:h-5 [&>svg]:w-5',
+	};
+
+	const baseClasses =
+		'bg-background-primary text-primary cursor-pointer flex items-center justify-center';
+
+	// Button hover classes.
+	const hoverClasses = 'hover:bg-button-tertiary-hover';
+
+	// Button focus classes.
+	const focusClasses = 'focus:outline-none';
+
+	// Button disabled classes.
+	const disabledClasses = disabled
+		? 'text-text-disabled cursor-not-allowed'
+		: '';
+
+	const firstChildClasses = isFirstChild
+		? 'rounded-tl rounded-bl border-0 border-r border-border-subtle'
+		: '';
+	const lastChildClasses = isLastChild
+		? 'rounded-tr rounded-br border-0'
+		: '';
+	const borderClasses = 'border-0 border-r border-border-subtle border-solid';
+	const activeClasses = activeItem === slug ? 'bg-button-disabled' : '';
+
+	const buttonClassName = cn(
+		baseClasses,
+		hoverClasses,
+		focusClasses,
+		disabledClasses,
+		sizes[ size ],
+		borderClasses,
+		activeClasses,
+		firstChildClasses,
+		lastChildClasses,
+		className
+	);
+
+	const handleClick = ( event ) => {
+		onChange( event, { slug, text } );
+	};
+
+	return (
+		<button
+			ref={ ref }
+			className={ buttonClassName }
+			disabled={ disabled }
+			onClick={ handleClick }
+			{ ...rest }
+		>
+			{ iconPosition === 'left' && icon && (
+				<span className="mr-1">{ icon }</span>
+			) }
+			{ text }
+			{ iconPosition === 'right' && icon && (
+				<span className="ml-1">{ icon }</span>
+			) }
+		</button>
+	);
+};
+const Button = forwardRef( ButtonComponent );
+Button.displayName = 'Button';
+
+const exports = {
+	Group: ButtonGroup,
+	Button,
+};
+
+export default exports;
diff --git a/src/components/button-group/index.js b/src/components/button-group/index.js
new file mode 100644
index 00000000..50c8daa4
--- /dev/null
+++ b/src/components/button-group/index.js
@@ -0,0 +1 @@
+export { default } from './button-group.jsx';
diff --git a/src/components/button-group/readme.md b/src/components/button-group/readme.md
new file mode 100644
index 00000000..c07a5417
--- /dev/null
+++ b/src/components/button-group/readme.md
@@ -0,0 +1,74 @@
+# ButtonGroup Component Documentation
+
+## Description
+
+The `ButtonGroup` and Button components are designed to work together to create a flexible and customizable group of buttons. The ButtonGroup component manages the state and styling of multiple Button components.
+
+## ButtonGroup Props
+
+### `children`
+- **Type:** `React.ReactNode`
+- **Description:** The child elements, expected to be Button components.
+
+### `activeItem`
+- **Type:** `string | null`
+- **Default:** `null`
+- **Description:** The currently active item in the group.
+
+### `onChange`
+- **Type:** `function`
+- **Description:** Callback function triggered when the active item changes. Receives an object with event and value.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional class names for styling the button group.
+
+### `size`
+- **Type:** `string`
+- **Default:** `"md"`
+- **Description:** Size of the buttons in the group. Options include:
+  - `"xs"`
+  - `"sm"`
+  - `"md"`
+
+### `iconPosition`
+- **Type:** `string`
+- **Default:** `"left"`
+- **Description:** Position of the icon in the button. Options include:
+  - `"left"`
+  - `"right"`
+
+## Button Props
+
+### `slug`
+- **Type:** `string`
+- **Description:** Unique identifier for the button.
+
+### `text`
+- **Type:** `string`
+- **Description:** Text to be displayed inside the button.
+
+### `icon`
+- **Type:** `React.ReactNode`
+- **Description:** Optional icon to be displayed inside the button.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional class names for styling the button.
+
+### `isFirstChild`
+- **Type:** `boolean`
+- **Description:** Flag indicating if this button is the first child in the group.
+
+### `isLastChild`
+- **Type:** `boolean`
+- **Description:** Flag indicating if this button is the last child in the group.
+
+### `disabled`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Defines whether the button is disabled.
+
+### `...rest`
+- **Type:** `object`
+- **Description:** Any additional props will be spread onto the button element.
diff --git a/src/components/button/button.jsx b/src/components/button/button.jsx
new file mode 100644
index 00000000..07d7aa05
--- /dev/null
+++ b/src/components/button/button.jsx
@@ -0,0 +1,93 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utilities/functions';
+
+const Button = forwardRef( ( props, ref ) => {
+	const {
+		variant = 'primary', // primary, secondary, outline, ghost, link
+		size = 'md', // xs, sm, md, lg
+		type = 'button',
+		tag = 'button',
+		className,
+		children,
+		disabled = false,
+		destructive = false, // true, false
+		icon = null, // icon component
+		iconPosition = 'left', // left, right,
+		loading = false,
+		...rest
+	} = props;
+
+	const commonClass =
+		'border border-solid cursor-pointer transition-colors duration-300 ease-in-out text-xs font-semibold focus:ring-2 focus:ring-toggle-on focus:ring-offset-2 disabled:text-text-disabled';
+
+	const loadingClass = loading
+		? 'opacity-50 disabled:cursor-not-allowed'
+		: '';
+
+	const variantClassNames = {
+		primary:
+			'text-text-on-color bg-button-primary hover:bg-button-primary-hover border-button-primary hover:border-button-primary-hover disabled:bg-button-disabled disabled:border-button-disabled',
+		secondary:
+			'text-text-on-color bg-button-secondary hover:bg-button-secondary-hover border-button-secondary hover:border-button-secondary-hover disabled:bg-button-disabled disabled:border-button-disabled',
+		outline:
+			'text-button-tertiary-color border border-border-subtle bg-button-tertiary hover:bg-button-tertiary-hover hover:border-border-subtle disabled:bg-button-tertiary disabled:border-border-disabled',
+		ghost: 'text-text-primary bg-transparent border border-transparent hover:bg-button-tertiary-hover',
+		link: 'text-link-primary bg-transparent hover:text-link-primary-hover hover:underline p-0 border-0 leading-none',
+	}?.[ variant ];
+
+	const destructiveClassNames =
+		destructive && ! disabled
+			? {
+				primary:
+						'bg-button-danger hover:bg-button-danger-hover border-button-danger hover:border-button-danger-hover',
+				outline:
+						'text-button-danger border border-button-danger hover:border-button-danger bg-button-tertiary hover:bg-field-background-error',
+				ghost: 'text-button-danger hover:bg-field-background-error',
+				link: 'text-button-danger hover:text-button-danger-secondary',
+			}?.[ variant ]
+			: '';
+
+	const sizeClassNames = {
+		xs: 'p-1 rounded-sm [&>svg]:h-4 [&>svg]:w-4',
+		sm: 'p-2 rounded-sm [&>svg]:h-4 [&>svg]:w-4',
+		md: 'p-2.5 rounded-md text-sm [&>svg]:h-5 [&>svg]:w-5',
+		lg: 'p-3 rounded-lg text-base [&>svg]:h-6 [&>svg]:w-6',
+	}?.[ size ];
+
+	let iconLeft,
+		iconRight = null;
+	let iconClass = '';
+	if ( icon ) {
+		iconClass = 'flex items-center justify-center gap-1';
+		if ( iconPosition === 'left' ) {
+			iconLeft = icon;
+		} else {
+			iconRight = icon;
+		}
+	}
+
+	const Tag = tag;
+	return (
+		<Tag
+			ref={ ref }
+			type={ type }
+			className={ cn(
+				iconClass,
+				commonClass,
+				sizeClassNames,
+				variantClassNames,
+				destructiveClassNames,
+				loadingClass,
+				className
+			) }
+			disabled={ disabled }
+			{ ...rest }
+		>
+			{ iconLeft }
+			{ children }
+			{ iconRight }
+		</Tag>
+	);
+} );
+
+export default Button;
diff --git a/src/components/button/button.stories.js b/src/components/button/button.stories.js
new file mode 100644
index 00000000..6f31d7c8
--- /dev/null
+++ b/src/components/button/button.stories.js
@@ -0,0 +1,156 @@
+import Button from './button.jsx';
+import { Plus } from 'lucide-react';
+
+// Button component story configuration
+export default {
+	title: 'Atoms/Button',
+	component: Button,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the button.',
+			control: 'select',
+			options: [ 'primary', 'secondary', 'outline', 'ghost', 'link' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'primary' },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the button.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		type: {
+			name: 'Type',
+			description: 'Defines the type of the button.',
+			control: 'select',
+			options: [ 'button', 'submit', 'reset' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'button' },
+			},
+		},
+		tag: {
+			name: 'Tag',
+			description: 'Defines the tag of the button.',
+			control: 'select',
+			// Add 6 to 10 closable tags
+			options: [
+				'button',
+				'a',
+				'div',
+				'span',
+				'p',
+				'h1',
+				'h2',
+				'h3',
+				'h4',
+				'h5',
+			],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'button' },
+			},
+		},
+		iconPosition: {
+			name: 'Icon Position',
+			description: 'Defines the position of the icon.',
+			control: 'select',
+			options: [ 'left', 'right' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'left' },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Defines if the button is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		destructive: {
+			name: 'Destructive',
+			description: 'Defines if the button is destructive.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		icon: {
+			name: 'Icon',
+			description: 'Custom Icon for the button.',
+			control: 'object',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: 'null' },
+			},
+		},
+		children: {
+			name: 'Children',
+			control: 'object',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+	args: {
+		variant: 'primary',
+		children: 'Button',
+		icon: <Plus />,
+		iconPosition: 'left',
+	},
+};
+
+export const Disabled = {
+	args: {
+		...Primary.args,
+		disabled: true,
+	},
+};
+
+export const Secondary = {
+	args: {
+		...Primary.args,
+		variant: 'secondary',
+	},
+};
+
+export const Ghost = {
+	args: {
+		...Primary.args,
+		variant: 'ghost',
+	},
+};
+
+export const Outline = {
+	args: {
+		...Primary.args,
+		variant: 'outline',
+	},
+};
+
+export const Link = {
+	args: {
+		...Primary.args,
+		variant: 'link',
+	},
+};
diff --git a/src/components/button/index.js b/src/components/button/index.js
new file mode 100644
index 00000000..22469004
--- /dev/null
+++ b/src/components/button/index.js
@@ -0,0 +1 @@
+export { default } from './button.jsx';
diff --git a/src/components/button/readme.md b/src/components/button/readme.md
new file mode 100644
index 00000000..b603c1ff
--- /dev/null
+++ b/src/components/button/readme.md
@@ -0,0 +1,103 @@
+# Button Component Documentation
+
+## Description
+
+The `Button` component is a versatile, customizable button component built with Tailwind CSS. It supports various variants, sizes, types, and additional properties to suit different use cases.
+
+## Props
+
+### `variant`
+- **Type:** `string`
+- **Default:** `"primary"`
+- **Description:** Defines the style variant of the button. Options include:
+  - `"primary"`
+  - `"secondary"`
+  - `"outline"`
+  - `"ghost"`
+  - `"link"`
+
+### `size`
+- **Type:** `string`
+- **Default:** `"md"`
+- **Description:** Defines the size of the button. Options include:
+  - `"xs"`
+  - `"sm"`
+  - `"md"`
+  - `"lg"`
+
+### `type`
+- **Type:** `string`
+- **Default:** `"button"`
+- **Description:** Defines the HTML `type` attribute for the button element. Common values are `"button"`, `"submit"`, and `"reset"`.
+
+### `tag`
+- **Type:** `string`
+- **Default:** `"button"`
+- **Description:** Defines the HTML tag to be used for the button. This allows using the button styles for different elements like `a` (anchor), `div`, etc.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the button.
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** The content to be displayed inside the button.
+
+### `disabled`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Defines whether the button is disabled.
+
+### `destructive`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** When set to `true`, applies destructive styles to the button. This is useful for actions that are potentially harmful (e.g., delete actions).
+
+### `icon`
+- **Type:** `ReactNode`
+- **Description:** An icon component to be displayed inside the button.
+
+### `iconPosition`
+- **Type:** `string`
+- **Default:** `"left"`
+- **Description:** Defines the position of the icon inside the button. Options include:
+  - `"left"`
+  - `"right"`
+
+### `loading`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Determines whether to show the loader icon. If `true`, the loader icon is displayed. The loader is shown only for button variants: `primary`, `secondary`, `outline`, and `ghost`. The loader is not shown if the button is disabled.
+  - `true`: Show the loader icon.
+  - `false`: Hide the loader icon.
+
+### `loaderIcon`
+- **Type:** `ReactNode`
+- **Default:** `null`
+- **Description:** The loader icon to be displayed when the button is in the loading state. If not provided, a default loader icon is displayed.
+
+### `...rest`
+- **Type:** `object`
+- **Description:** Any additional props will be spread onto the button element.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import Button from './Button';
+import { ReactComponent as ExampleIcon } from './icons/example.svg';
+
+const App = () => (
+  <div>
+    <Button variant="primary" size="m">
+      Primary Button
+    </Button>
+    <Button variant="secondary" size="l" icon={<ExampleIcon />}>
+      Secondary Button
+    </Button>
+  </div>
+);
+
+export default App;
+```
diff --git a/src/components/checkbox/checkbox.jsx b/src/components/checkbox/checkbox.jsx
new file mode 100644
index 00000000..77ace6f5
--- /dev/null
+++ b/src/components/checkbox/checkbox.jsx
@@ -0,0 +1,159 @@
+import {
+	useState,
+	useCallback,
+	useMemo,
+	forwardRef,
+	isValidElement,
+} from 'react';
+import { nanoid } from 'nanoid';
+import { cn } from '@/utilities/functions';
+import { Check, Minus } from 'lucide-react';
+
+const CheckboxComponent = (
+	{
+		id,
+		label,
+		defaultChecked = false,
+		checked,
+		onChange,
+		value,
+		indeterminate,
+		disabled,
+		size = 'md',
+		...props
+	},
+	ref
+) => {
+	const checkboxId = useMemo( () => id || `checkbox-${ nanoid() }`, [ id ] );
+	const isControlled = useMemo(
+		() => typeof checked !== 'undefined',
+		[ checked ]
+	);
+	const [ isChecked, setIsChecked ] = useState( defaultChecked || false );
+	const color = 'primary';
+
+	const sizeClassNames = {
+		sm: {
+			checkbox: 'size-4 rounded-sm',
+			icon: 'size-3',
+		},
+		md: {
+			checkbox: 'size-5 rounded',
+			icon: 'size-4',
+		},
+	};
+	const colorClassNames = {
+		primary: {
+			checkbox:
+				'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-4 focus:ring-focus',
+			icon: 'text-white',
+		},
+	};
+	const disabledClassNames = {
+		checkbox:
+			'disabled:bg-white checked:disabled:bg-white disabled:border-border-disabled checked:disabled:border-border-disabled',
+		icon: 'peer-disabled:text-border-disabled',
+	};
+
+	const getValue = useCallback(
+		() => ( isControlled ? checked : isChecked ),
+		[ isControlled, checked, isChecked ]
+	);
+
+	const handleChange = ( event ) => {
+		if ( disabled ) {
+			return;
+		}
+
+		const newValue = event.target.checked;
+		if ( ! isControlled ) {
+			setIsChecked( newValue );
+		}
+
+		if ( typeof onChange !== 'function' ) {
+			return;
+		}
+		onChange( newValue );
+	};
+
+	const renderLabel = useCallback( () => {
+		if ( isValidElement( label ) ) {
+			return label;
+		}
+
+		if ( ! label.heading && ! label.description ) {
+			return null;
+		}
+
+		return (
+			<div className="space-y-1.5">
+				{ label.heading && (
+					<p className="text-text-primary text-base font-medium leading-4 m-0">
+						{ label.heading }
+					</p>
+				) }
+				{ label.description && (
+					<p className="text-text-secondary text-sm font-normal leading-5 m-0">
+						{ label.description }
+					</p>
+				) }
+			</div>
+		);
+	}, [ label ] );
+
+	return (
+		<div
+			className={ cn( 'inline-flex items-center', !! label && 'items-start' ) }
+		>
+			<label
+				className={ cn(
+					'relative flex items-center rounded-full',
+					! disabled && 'cursor-pointer'
+				) }
+				htmlFor={ checkboxId }
+			>
+				<input
+					ref={ ref }
+					id={ checkboxId }
+					type="checkbox"
+					className={ cn(
+						"peer relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden !border-1.5 border-solid",
+						colorClassNames[ color ].checkbox,
+						sizeClassNames[ size ].checkbox,
+						disabled && disabledClassNames.checkbox
+					) }
+					checked={ getValue() }
+					onChange={ handleChange }
+					disabled={ disabled }
+					{ ...props }
+				/>
+				<span
+					className={ cn(
+						'pointer-events-none inline-flex items-center absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100',
+						colorClassNames[ color ].icon,
+						disabled && disabledClassNames.icon
+					) }
+				>
+					{ indeterminate ? (
+						<Minus className={ cn( sizeClassNames[ size ]?.icon ) } />
+					) : (
+						<Check className={ cn( sizeClassNames[ size ]?.icon ) } />
+					) }
+				</span>
+			</label>
+			{ !! label && (
+				<label
+					className={ cn( 'ml-3', ! disabled && 'cursor-pointer' ) }
+					htmlFor={ checkboxId }
+				>
+					{ renderLabel() }
+				</label>
+			) }
+		</div>
+	);
+};
+
+const Checkbox = forwardRef( CheckboxComponent );
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;
diff --git a/src/components/checkbox/checkbox.stories.jsx b/src/components/checkbox/checkbox.stories.jsx
new file mode 100644
index 00000000..0cc2ccd2
--- /dev/null
+++ b/src/components/checkbox/checkbox.stories.jsx
@@ -0,0 +1,126 @@
+import Checkbox from './checkbox.jsx';
+
+// Avatar component story configuration
+export default {
+	title: 'Atoms/Checkbox',
+	component: Checkbox,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		id: {
+			name: 'ID',
+			description: 'Defines the ID of the checkbox.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		label: {
+			name: 'Label',
+			description: 'Defines the label of the checkbox',
+			control: 'object',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: {
+					summary: {
+						heading: 'Checkbox Label',
+						descriptio: 'Checkbox Description',
+					},
+				},
+			},
+		},
+		defaultChecked: {
+			name: 'Default Checked value.',
+			control: 'boolean',
+			defaultValue: false,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		checked: {
+			name: 'Checked',
+			description: 'Defines the checked/unchecked value.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		onChange: {
+			name: 'On Change',
+			description: 'Defines the onChange callback.',
+			control: 'function',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: {
+					summary: ( value ) => {
+						return value;
+					},
+				},
+			},
+		},
+		indeterminate: {
+			name: 'Indeterminate',
+			description: 'Defines if the checkbox is indeterminate.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Defines if the checkbox is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the sizes of the checkbox.',
+			control: 'select',
+			options: [ 'sm', 'md' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+	},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Small = {
+	args: {
+		size: 'sm',
+		label: {
+			heading: 'Checkbox Label',
+			description: 'Checkbox Description',
+		},
+	},
+};
+
+export const Medium = {
+	args: {
+		size: 'md',
+		label: {
+			heading: 'Checkbox Label',
+			description: 'Checkbox Description',
+		},
+	},
+};
+
+export const Disabled = {
+	args: {
+		label: {
+			heading: 'Checkbox Label',
+			description: 'Checkbox Description',
+		},
+		disabled: true,
+	},
+};
diff --git a/src/components/checkbox/index.js b/src/components/checkbox/index.js
new file mode 100644
index 00000000..0794e570
--- /dev/null
+++ b/src/components/checkbox/index.js
@@ -0,0 +1 @@
+export { default } from './checkbox.jsx';
diff --git a/src/components/checkbox/readme.md b/src/components/checkbox/readme.md
new file mode 100644
index 00000000..39f06f95
--- /dev/null
+++ b/src/components/checkbox/readme.md
@@ -0,0 +1,62 @@
+# Checkbox
+
+## Props
+
+### id (optional)
+- **type:** `string`
+- **description:** By default it will generate and assign an id.
+
+### name (optional)
+- **type:** `string`
+
+### label (optional)
+**type:** `object` || `ReactComponent`
+- **Object properties/format:** `{heading: 'Label heading', description:** 'Label description'}`
+The label also accepts a React component.
+
+###	defaultChecked (For uncontrolled component)
+- **type:** `boolean`
+- **default value:** `false`
+- **description:** Use this prop when the you want to use the component as uncontrolled component.
+
+###	checked (for controlled component)
+- **type:** `boolean`
+- **default value:** `undefined`
+
+###	onChange `(value) => void`
+- **type:** `function`
+- **description:** Event handler function to listen to the change. 
+
+###	value
+- **type:** `any`
+- **description:** Value that will be used for forms.
+
+###	indeterminate
+- **type:** `boolean`
+- **default value:** `false`
+- **Description:** Used to present the indeterminate state of the checkbox.
+
+### disabled
+- **type:**`boolean`
+- **default value:** `false`
+- **description:** The `disabled` prop will disable the component.
+
+### size
+- **type:** `string`
+- **default value:** `md`
+- **description:** For different sizes.
+- **Available sizes:** `sm` and `md`
+
+### required (optional)
+- **type:** `boolean`
+- **default value:** `undefined`
+- **description:** For form validation required prop value can be set to true.
+
+### Example:
+```
+<Checkbox
+    defaultChecked={ true }
+    size="sm"
+    onChange={ ( value ) => console.log( value ) }
+/>
+```
\ No newline at end of file
diff --git a/src/components/container/container-styles.js b/src/components/container/container-styles.js
new file mode 100644
index 00000000..766a50df
--- /dev/null
+++ b/src/components/container/container-styles.js
@@ -0,0 +1,512 @@
+export const gridColumnClassNames = {
+	sm: {
+		1: 'grid-cols-1',
+		2: 'grid-cols-2',
+		3: 'grid-cols-3',
+		4: 'grid-cols-4',
+		5: 'grid-cols-5',
+		6: 'grid-cols-6',
+		7: 'grid-cols-7',
+		8: 'grid-cols-8',
+		9: 'grid-cols-9',
+		10: 'grid-cols-10',
+		11: 'grid-cols-11',
+		12: 'grid-cols-12',
+	},
+	md: {
+		1: 'md:grid-cols-1',
+		2: 'md:grid-cols-2',
+		3: 'md:grid-cols-3',
+		4: 'md:grid-cols-4',
+		5: 'md:grid-cols-5',
+		6: 'md:grid-cols-6',
+		7: 'md:grid-cols-7',
+		8: 'md:grid-cols-8',
+		9: 'md:grid-cols-9',
+		10: 'md:grid-cols-10',
+		11: 'md:grid-cols-11',
+		12: 'md:grid-cols-12',
+	},
+	lg: {
+		1: 'lg:grid-cols-1',
+		2: 'lg:grid-cols-2',
+		3: 'lg:grid-cols-3',
+		4: 'lg:grid-cols-4',
+		5: 'lg:grid-cols-5',
+		6: 'lg:grid-cols-6',
+		7: 'lg:grid-cols-7',
+		8: 'lg:grid-cols-8',
+		9: 'lg:grid-cols-9',
+		10: 'lg:grid-cols-10',
+		11: 'lg:grid-cols-11',
+		12: 'lg:grid-cols-12',
+	},
+};
+
+export const gapClassNames = {
+	sm: {
+		xs: 'gap-2',
+		sm: 'gap-4',
+		md: 'gap-5',
+		lg: 'gap-6',
+		xl: 'gap-6',
+		'2xl': 'gap-8',
+	},
+	md: {
+		xs: 'md:gap-2',
+		sm: 'md:gap-4',
+		md: 'md:gap-5',
+		lg: 'md:gap-6',
+		xl: 'md:gap-6',
+		'2xl': 'md:gap-8',
+	},
+	lg: {
+		xs: 'lg:gap-2',
+		sm: 'lg:gap-4',
+		md: 'lg:gap-5',
+		lg: 'lg:gap-6',
+		xl: 'lg:gap-6',
+		'2xl': 'lg:gap-8',
+	},
+};
+
+export const gapXClassNames = {
+	sm: {
+		xs: 'gap-x-2',
+		sm: 'gap-x-4',
+		md: 'gap-x-5',
+		lg: 'gap-x-6',
+		xl: 'gap-x-6',
+		'2xl': 'gap-x-8',
+	},
+	md: {
+		xs: 'md:gap-x-2',
+		sm: 'md:gap-x-4',
+		md: 'md:gap-x-5',
+		lg: 'md:gap-x-6',
+		xl: 'md:gap-x-6',
+		'2xl': 'md:gap-x-8',
+	},
+	lg: {
+		xs: 'lg:gap-x-2',
+		sm: 'lg:gap-x-4',
+		md: 'lg:gap-x-5',
+		lg: 'lg:gap-x-6',
+		xl: 'lg:gap-x-6',
+		'2xl': 'lg:gap-x-8',
+	},
+};
+
+export const gapYClassNames = {
+	sm: {
+		xs: 'gap-y-2',
+		sm: 'gap-y-4',
+		md: 'gap-y-5',
+		lg: 'gap-y-6',
+		xl: 'gap-y-6',
+		'2xl': 'gap-y-8',
+	},
+	md: {
+		xs: 'md:gap-y-2',
+		sm: 'md:gap-y-4',
+		md: 'md:gap-y-5',
+		lg: 'md:gap-y-6',
+		xl: 'md:gap-y-6',
+		'2xl': 'md:gap-y-8',
+	},
+	lg: {
+		xs: 'lg:gap-y-2',
+		sm: 'lg:gap-y-4',
+		md: 'lg:gap-y-5',
+		lg: 'lg:gap-y-6',
+		xl: 'lg:gap-y-6',
+		'2xl': 'lg:gap-y-8',
+	},
+};
+
+export const gridColSpanClassNames = {
+	sm: {
+		1: 'col-span-1',
+		2: 'col-span-2',
+		3: 'col-span-3',
+		4: 'col-span-4',
+		5: 'col-span-5',
+		6: 'col-span-6',
+		7: 'col-span-7',
+		8: 'col-span-8',
+		9: 'col-span-9',
+		10: 'col-span-10',
+		11: 'col-span-11',
+		12: 'col-span-12',
+	},
+	md: {
+		1: 'md:col-span-1',
+		2: 'md:col-span-2',
+		3: 'md:col-span-3',
+		4: 'md:col-span-4',
+		5: 'md:col-span-5',
+		6: 'md:col-span-6',
+		7: 'md:col-span-7',
+		8: 'md:col-span-8',
+		9: 'md:col-span-9',
+		10: 'md:col-span-10',
+		11: 'md:col-span-11',
+		12: 'md:col-span-12',
+	},
+	lg: {
+		1: 'lg:col-span-1',
+		2: 'lg:col-span-2',
+		3: 'lg:col-span-3',
+		4: 'lg:col-span-4',
+		5: 'lg:col-span-5',
+		6: 'lg:col-span-6',
+		7: 'lg:col-span-7',
+		8: 'lg:col-span-8',
+		9: 'lg:col-span-9',
+		10: 'lg:col-span-10',
+		11: 'lg:col-span-11',
+		12: 'lg:col-span-12',
+	},
+};
+
+export const gridColStartClassNames = {
+	sm: {
+		1: 'col-start-1',
+		2: 'col-start-2',
+		3: 'col-start-3',
+		4: 'col-start-4',
+		5: 'col-start-5',
+		6: 'col-start-6',
+		7: 'col-start-7',
+		8: 'col-start-8',
+		9: 'col-start-9',
+		10: 'col-start-10',
+		11: 'col-start-11',
+		12: 'col-start-12',
+	},
+	md: {
+		1: 'md:col-start-1',
+		2: 'md:col-start-2',
+		3: 'md:col-start-3',
+		4: 'md:col-start-4',
+		5: 'md:col-start-5',
+		6: 'md:col-start-6',
+		7: 'md:col-start-7',
+		8: 'md:col-start-8',
+		9: 'md:col-start-9',
+		10: 'md:col-start-10',
+		11: 'md:col-start-11',
+		12: 'md:col-start-12',
+	},
+	lg: {
+		1: 'lg:col-start-1',
+		2: 'lg:col-start-2',
+		3: 'lg:col-start-3',
+		4: 'lg:col-start-4',
+		5: 'lg:col-start-5',
+		6: 'lg:col-start-6',
+		7: 'lg:col-start-7',
+		8: 'lg:col-start-8',
+		9: 'lg:col-start-9',
+		10: 'lg:col-start-10',
+		11: 'lg:col-start-11',
+		12: 'lg:col-start-12',
+	},
+};
+
+export const gridFlowClassNames = {
+	sm: {
+		row: 'grid-flow-row',
+		column: 'grid-flow-col',
+		'row-dense': 'grid-flow-row-dense',
+		'column-dense': 'grid-flow-col-dense',
+	},
+	md: {
+		row: 'md:grid-flow-row',
+		column: 'md:grid-flow-col',
+		'row-dense': 'md:grid-flow-row-dense',
+		'column-dense': 'md:grid-flow-col-dense',
+	},
+	lg: {
+		row: 'lg:grid-flow-row',
+		column: 'lg:grid-flow-col',
+		'row-dense': 'lg:grid-flow-row-dense',
+		'column-dense': 'lg:grid-flow-col-dense',
+	},
+};
+
+export const justifyClassNames = {
+	sm: {
+		normal: 'justify-normal',
+		start: 'justify-start',
+		end: 'justify-end',
+		center: 'justify-center',
+		between: 'justify-between',
+		around: 'justify-around',
+		evenly: 'justify-evenly',
+		stretch: 'justify-stretch',
+	},
+	md: {
+		normal: 'md:justify-normal',
+		start: 'md:justify-start',
+		end: 'md:justify-end',
+		center: 'md:justify-center',
+		between: 'md:justify-between',
+		around: 'md:justify-around',
+		evenly: 'md:justify-evenly',
+		stretch: 'md:justify-stretch',
+	},
+	lg: {
+		normal: 'lg:justify-normal',
+		start: 'lg:justify-start',
+		end: 'lg:justify-end',
+		center: 'lg:justify-center',
+		between: 'lg:justify-between',
+		around: 'lg:justify-around',
+		evenly: 'lg:justify-evenly',
+		stretch: 'lg:justify-stretch',
+	},
+};
+
+export const alignClassNames = {
+	sm: {
+		start: 'items-start',
+		end: 'items-end',
+		center: 'items-center',
+		baseline: 'items-baseline',
+		stretch: 'items-stretch',
+	},
+	md: {
+		start: 'md:items-start',
+		end: 'md:items-end',
+		center: 'md:items-center',
+		baseline: 'md:items-baseline',
+		stretch: 'md:items-stretch',
+	},
+	lg: {
+		start: 'lg:items-start',
+		end: 'lg:items-end',
+		center: 'lg:items-center',
+		baseline: 'lg:items-baseline',
+		stretch: 'lg:items-stretch',
+	},
+};
+
+export const alignSelfClassNames = {
+	sm: {
+		start: 'self-start',
+		end: 'self-end',
+		center: 'self-center',
+		baseline: 'self-baseline',
+		stretch: 'self-stretch',
+	},
+	md: {
+		start: 'md:self-start',
+		end: 'md:self-end',
+		center: 'md:self-center',
+		baseline: 'md:self-baseline',
+		stretch: 'md:self-stretch',
+	},
+	lg: {
+		start: 'lg:self-start',
+		end: 'lg:self-end',
+		center: 'lg:self-center',
+		baseline: 'lg:self-baseline',
+		stretch: 'lg:self-stretch',
+	},
+};
+
+export const justifySelfClassNames = {
+	sm: {
+		auto: 'justify-self-auto',
+		start: 'justify-self-start',
+		end: 'justify-self-end',
+		center: 'justify-self-center',
+		baseline: 'justify-self-baseline',
+		stretch: 'justify-self-stretch',
+	},
+	md: {
+		auto: 'md:justify-self-auto',
+		start: 'md:justify-self-start',
+		end: 'md:justify-self-end',
+		center: 'md:justify-self-center',
+		baseline: 'md:justify-self-baseline',
+		stretch: 'md:justify-self-stretch',
+	},
+	lg: {
+		auto: 'lg:justify-self-auto',
+		start: 'lg:justify-self-start',
+		end: 'lg:justify-self-end',
+		center: 'lg:justify-self-center',
+		baseline: 'lg:justify-self-baseline',
+		stretch: 'lg:justify-self-stretch',
+	},
+};
+
+export const flexDirectionClassNames = {
+	sm: {
+		row: 'flex-row',
+		'row-reverse': 'flex-row-reverse',
+		column: 'flex-col',
+		'column-reverse': 'flex-col-reverse',
+	},
+	md: {
+		row: 'md:flex-row',
+		'row-reverse': 'md:flex-row-reverse',
+		column: 'md:flex-col',
+		'column-reverse': 'md:flex-col-reverse',
+	},
+	lg: {
+		row: 'lg:flex-row',
+		'row-reverse': 'lg:flex-row-reverse',
+		column: 'lg:flex-col',
+		'column-reverse': 'lg:flex-col-reverse',
+	},
+};
+
+export const flexWrapClassNames = {
+	sm: {
+		wrap: 'flex-wrap',
+		'wrap-reverse': 'flex-wrap-reverse',
+		nowrap: 'flex-nowrap',
+	},
+	md: {
+		wrap: 'md:flex-wrap',
+		'wrap-reverse': 'md:flex-wrap-reverse',
+		nowrap: 'md:flex-nowrap',
+	},
+	lg: {
+		wrap: 'lg:flex-wrap',
+		'wrap-reverse': 'lg:flex-wrap-reverse',
+		nowrap: 'lg:flex-nowrap',
+	},
+};
+
+export const flexColumnClassNames = {
+	sm: {
+		1: 'w-full',
+		2: 'w-1/2',
+		3: 'w-1/3',
+		4: 'w-1/4',
+		5: 'w-1/5',
+		6: 'w-1/6',
+		7: 'w-1/7',
+		8: 'w-1/8',
+		9: 'w-1/9',
+		10: 'w-1/10',
+		11: 'w-1/11',
+		12: 'w-1/12',
+	},
+	md: {
+		1: 'md:w-full',
+		2: 'md:w-1/2',
+		3: 'md:w-1/3',
+		4: 'md:w-1/4',
+		5: 'md:w-1/5',
+		6: 'md:w-1/6',
+		7: 'md:w-1/7',
+		8: 'md:w-1/8',
+		9: 'md:w-1/9',
+		10: 'md:w-1/10',
+		11: 'md:w-1/11',
+		12: 'md:w-1/12',
+	},
+	lg: {
+		1: 'lg:w-full',
+		2: 'lg:w-1/2',
+		3: 'lg:w-1/3',
+		4: 'lg:w-1/4',
+		5: 'lg:w-1/5',
+		6: 'lg:w-1/6',
+		7: 'lg:w-1/7',
+		8: 'lg:w-1/8',
+		9: 'lg:w-1/9',
+		10: 'lg:w-1/10',
+		11: 'lg:w-1/11',
+		12: 'lg:w-1/12',
+	},
+};
+
+export const flexOrderClassNames = {
+	sm: {
+		1: 'order-1',
+		2: 'order-2',
+		3: 'order-3',
+		4: 'order-4',
+		5: 'order-5',
+		6: 'order-6',
+		7: 'order-7',
+		8: 'order-8',
+		9: 'order-9',
+		10: 'order-10',
+		11: 'order-11',
+		12: 'order-12',
+		first: 'order-first',
+		last: 'order-last',
+		none: 'order-none',
+	},
+	md: {
+		1: 'md:order-1',
+		2: 'md:order-2',
+		3: 'md:order-3',
+		4: 'md:order-4',
+		5: 'md:order-5',
+		6: 'md:order-6',
+		7: 'md:order-7',
+		8: 'md:order-8',
+		9: 'md:order-9',
+		10: 'md:order-10',
+		11: 'md:order-11',
+		12: 'md:order-12',
+		first: 'md:order-first',
+		last: 'md:order-last',
+		none: 'md:order-none',
+	},
+	lg: {
+		1: 'lg:order-1',
+		2: 'lg:order-2',
+		3: 'lg:order-3',
+		4: 'lg:order-4',
+		5: 'lg:order-5',
+		6: 'lg:order-6',
+		7: 'lg:order-7',
+		8: 'lg:order-8',
+		9: 'lg:order-9',
+		10: 'lg:order-10',
+		11: 'lg:order-11',
+		12: 'lg:order-12',
+		first: 'lg:order-first',
+		last: 'lg:order-last',
+		none: 'lg:order-none',
+	},
+};
+
+export const flexGrowClassNames = {
+	sm: {
+		0: 'grow-0',
+		1: 'grow',
+	},
+	md: {
+		0: 'md:grow-0',
+		1: 'md:grow',
+	},
+	lg: {
+		0: 'lg:grow-0',
+		1: 'lg:grow',
+	},
+};
+
+export const flexShrinkClassNames = {
+	sm: {
+		0: 'shrink-0',
+		1: 'shrink',
+	},
+	md: {
+		0: 'md:shrink-0',
+		1: 'md:shrink',
+	},
+	lg: {
+		0: 'lg:shrink-0',
+		1: 'lg:shrink',
+	},
+};
diff --git a/src/components/container/container-utils.js b/src/components/container/container-utils.js
new file mode 100644
index 00000000..7a809ada
--- /dev/null
+++ b/src/components/container/container-utils.js
@@ -0,0 +1,42 @@
+export const getClassNames = (
+	valueKeys,
+	classNames,
+	defaultValueKeys,
+	defaultScreenSize = 'sm'
+) => {
+	const classNamesArray = [];
+
+	switch ( typeof valueKeys ) {
+		case 'object':
+			for ( const [ screenSize, valueKey ] of Object.entries( valueKeys ) ) {
+				if ( classNames[ screenSize ] ) {
+					classNamesArray.push(
+						classNames?.[ screenSize ]?.[ valueKey ] ??
+							classNames?.[ screenSize ]?.[
+								defaultValueKeys?.[ screenSize ]
+							] ??
+							''
+					);
+				}
+			}
+			break;
+		case 'string':
+		case 'number':
+			const screenSize = defaultScreenSize;
+			classNamesArray.push(
+				classNames?.[ screenSize ]?.[ valueKeys ] ??
+					classNames?.[ screenSize ]?.[
+						defaultValueKeys?.[ screenSize ]
+					] ??
+					''
+			);
+			break;
+		default:
+			classNamesArray.push(
+				classNames?.[ defaultScreenSize ]?.[ defaultValueKeys ] ?? ''
+			);
+			break;
+	}
+
+	return classNamesArray.join( ' ' );
+};
diff --git a/src/components/container/container.jsx b/src/components/container/container.jsx
new file mode 100644
index 00000000..2cd81213
--- /dev/null
+++ b/src/components/container/container.jsx
@@ -0,0 +1,162 @@
+import React, { createContext, useContext } from 'react';
+import { cn } from '@/utilities/functions';
+import GridContainer from './grid-container';
+import { getClassNames } from './container-utils';
+import {
+	alignClassNames,
+	alignSelfClassNames,
+	flexColumnClassNames,
+	flexDirectionClassNames,
+	flexGrowClassNames,
+	flexOrderClassNames,
+	flexShrinkClassNames,
+	flexWrapClassNames,
+	gapClassNames,
+	gapXClassNames,
+	gapYClassNames,
+	justifyClassNames,
+	justifySelfClassNames,
+} from './container-styles';
+
+const ContainerContext = createContext();
+const useContainerState = () => useContext( ContainerContext );
+
+const Container = ( props ) => {
+	const {
+		containerType = 'flex', // flex, (grid - functionality not implemented)
+		gap = 'sm', // xs, sm, md, lg, xl, 2xl
+		gapX = '',
+		gapY = '',
+		direction = '', // row, row-reverse, column, column reverse
+		justify = '', // justify-content (normal, start, end, center, between, around, evenly, stretch)
+		align = '', // align-items (start, end, center, baseline, stretch)
+		wrap, // nowrap, wrap, wrap-reverse
+		cols = '',
+		className,
+		children,
+		...extraProps
+	} = props;
+
+	if ( containerType === 'grid' ) {
+		const { containerType: type, ...rest } = props;
+		return (
+			<ContainerContext.Provider
+				value={ {
+					containerType: type,
+				} }
+			>
+				<GridContainer { ...rest } />
+			</ContainerContext.Provider>
+		);
+	}
+
+	const wrapClassName = getClassNames( wrap, flexWrapClassNames, '' );
+	const gapClassName = getClassNames( gap, gapClassNames, 'sm' );
+	const gapXClassName = getClassNames( gapX, gapXClassNames, '' );
+	const gapYClassName = getClassNames( gapY, gapYClassNames, '' );
+	const directionClassName = getClassNames(
+		direction,
+		flexDirectionClassNames,
+		''
+	);
+	const justifyContentClassName = getClassNames(
+		justify,
+		justifyClassNames,
+		''
+	);
+	const alignItemsClassName = getClassNames( align, alignClassNames, '' );
+
+	const combinedClasses = cn(
+		'flex',
+		wrapClassName,
+		gapClassName,
+		gapXClassName,
+		gapYClassName,
+		directionClassName,
+		justifyContentClassName,
+		alignItemsClassName,
+		className
+	);
+
+	const renderContainerBasedOnType = () => {
+		if ( containerType === 'grid' ) {
+			return <GridContainer { ...props } />;
+		}
+
+		return (
+			<div className={ combinedClasses } { ...extraProps }>
+				{ children }
+			</div>
+		);
+	};
+
+	return (
+		<ContainerContext.Provider
+			value={ {
+				containerType,
+				cols,
+			} }
+		>
+			{ renderContainerBasedOnType() }
+		</ContainerContext.Provider>
+	);
+};
+
+const Item = ( props ) => {
+	const {
+		grow,
+		shrink,
+		order,
+		alignSelf,
+		justifySelf,
+		className,
+		children,
+		...extraProps
+	} = props;
+	const { containerType, cols } = useContainerState();
+
+	if ( containerType === 'grid' ) {
+		const { ...rest } = props;
+		return <GridContainer.Item { ...rest } />;
+	}
+
+	const alignSelfClassName = getClassNames(
+		alignSelf,
+		alignSelfClassNames,
+		''
+	);
+	const justifySelfClassName = getClassNames(
+		justifySelf,
+		justifySelfClassNames,
+		''
+	);
+	const growClassName = getClassNames( grow, flexGrowClassNames, 0 );
+	const shrinkClassName = getClassNames( shrink, flexShrinkClassNames, 0 );
+	const orderClassName = getClassNames( order, flexOrderClassNames, 0 );
+	const columnClassName = getClassNames( cols, flexColumnClassNames, 1 );
+
+	return (
+		<div
+			className={ cn(
+				'box-border',
+				growClassName,
+				shrinkClassName,
+				orderClassName,
+				alignSelfClassName,
+				justifySelfClassName,
+				columnClassName,
+				className
+			) }
+			{ ...extraProps }
+		>
+			{ children }
+		</div>
+	);
+};
+
+Container.Item = Item;
+
+Container.displayName = 'Container';
+Container.Item.displayName = 'Container.Item';
+
+export default Container;
diff --git a/src/components/container/container.stories.jsx b/src/components/container/container.stories.jsx
new file mode 100644
index 00000000..eaa38589
--- /dev/null
+++ b/src/components/container/container.stories.jsx
@@ -0,0 +1,288 @@
+import React from 'react';
+import Container from './container.jsx';
+
+export default {
+	title: 'Atoms/Container',
+	component: Container,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		containerType: {
+			name: 'Container Type',
+			description: 'Defines the type of container.',
+			control: 'select',
+			options: [ 'flex', 'grid' ],
+			defaultValue: 'flex',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'flex' },
+			},
+		},
+		cols: {
+			name: 'Columns',
+			description: 'Defines the number of columns in the grid.',
+			control: 'select',
+			options: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],
+			defaultValue: 3,
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: 1 },
+			},
+			if: { arg: 'containerType', eq: 'grid' },
+		},
+		autoRows: {
+			name: 'Auto Rows',
+			description: 'Defines the auto rows in the grid.',
+			control: 'boolean',
+			defaultValue: false,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+			if: { arg: 'containerType', eq: 'grid' },
+		},
+		autoCols: {
+			name: 'Auto Columns',
+			description: 'Defines the auto columns in the grid.',
+			control: 'boolean',
+			defaultValue: false,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+			if: { arg: 'containerType', eq: 'grid' },
+		},
+		colsSubGrid: {
+			name: 'Columns Sub Grid',
+			description: 'Defines the sub grid columns in the grid.',
+			control: 'boolean',
+			defaultValue: false,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+			if: { arg: 'containerType', eq: 'grid' },
+		},
+		rowsSubGrid: {
+			name: 'Rows Sub Grid',
+			description: 'Defines the sub grid rows in the grid.',
+			control: 'boolean',
+			defaultValue: false,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+			if: { arg: 'containerType', eq: 'grid' },
+		},
+		gridAutoFlow: {
+			name: 'Grid Auto Flow',
+			description: 'Defines the grid auto flow in the grid.',
+			control: 'select',
+			options: [ 'row', 'column', 'row-dense', 'column-dense' ],
+			defaultValue: 'row',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+			if: { arg: 'containerType', eq: 'grid' },
+		},
+		gap: {
+			name: 'Gap',
+			description: 'Defines the gap between items.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ],
+			defaultValue: 'sm',
+			table: {
+				type: {
+					summary: 'string',
+					detail: 'xs | sm | md | lg | xl | 2xl',
+				},
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		direction: {
+			name: 'Direction',
+			description: 'Defines the direction of flex items.',
+			control: 'select',
+			options: [ 'row', 'row-reverse', 'column', 'column-reverse' ],
+			defaultValue: 'row',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'row' },
+			},
+			if: { arg: 'containerType', eq: 'flex' },
+		},
+		justify: {
+			name: 'Justify Content',
+			description:
+				'Specifies how flex items are aligned along the main axis.',
+			control: 'select',
+			options: [
+				'start',
+				'center',
+				'end',
+				'between',
+				'around',
+				'evenly',
+				'stretch',
+			],
+			defaultValue: 'start',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'start' },
+			},
+		},
+		align: {
+			name: 'Align Items',
+			description:
+				'Specifies how flex items are aligned along the cross axis.',
+			control: 'select',
+			options: [ 'start', 'center', 'end', 'stretch' ],
+			defaultValue: 'stretch',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'stretch' },
+			},
+		},
+		itemGrow: {
+			name: 'Container.Item: Grow',
+			description:
+				'Specifies how much a flex item should grow relative to the rest of the flex items. (This will apply for first item only for demo)',
+			control: 'select',
+			options: [ 0, 1 ],
+			defaultValue: 0,
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: 0 },
+			},
+			if: { arg: 'containerType', eq: 'flex' },
+		},
+		itemShrink: {
+			name: 'Container.Item: Shrink',
+			description:
+				'Specifies how much a flex item should shrink relative to the rest of the flex items.',
+			control: 'select',
+			options: [ 0, 1 ],
+			defaultValue: 1,
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: 1 },
+			},
+			if: { arg: 'containerType', eq: 'flex' },
+		},
+		itemOrder: {
+			name: 'Container.Item: Order',
+			description: 'Defines the order of the flex item in the container.',
+			control: 'select',
+			options: [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6,
+				7,
+				8,
+				9,
+				10,
+				11,
+				12,
+				'first',
+				'last',
+				'none',
+			],
+			defaultValue: 'none',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'none' },
+			},
+			if: { arg: 'containerType', eq: 'flex' },
+		},
+		itemAlignSelf: {
+			name: 'Container.Item: Align Self',
+			description:
+				'Allows the default alignment to be overridden for individual flex items.',
+			control: 'select',
+			options: [ 'auto', 'start', 'end', 'center', 'stretch', 'baseline' ],
+			defaultValue: 'auto',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'auto' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+export const ResponsiveFlex = {
+	args: {
+		containerType: 'flex',
+		cols: 3,
+		gap: 'sm',
+		justify: 'start',
+		align: 'stretch',
+		direction: 'row',
+		itemGrow: 0,
+		itemShrink: 1,
+		itemOrder: 'none',
+		itemAlignSelf: 'auto',
+		className: 'bg-gray-200 p-4',
+		autoRows: false,
+		autoCols: false,
+		colsSubGrid: false,
+		rowsSubGrid: false,
+		gridAutoFlow: '',
+	},
+	render: ( args ) => {
+		let containerStyle;
+		if ( args.containerType === 'grid' ) {
+			containerStyle = { width: `${ +args.cols * 6 }rem`, height: '8rem' };
+		} else if ( args.direction === 'row' ) {
+			containerStyle = { height: '8rem' };
+		} else {
+			containerStyle = { width: '8rem' };
+		}
+		const itemStyle =
+			args.direction === 'row' ? { height: '4rem' } : { width: '4rem' };
+
+		return (
+			<Container
+				containerType={ args.containerType }
+				cols={ args.cols }
+				gap={ args.gap }
+				direction={ args.direction }
+				justify={ args.justify }
+				align={ args.align }
+				className={ args.className }
+				style={ containerStyle }
+			>
+				<Container.Item
+					grow={ args.itemGrow }
+					shrink={ args.itemShrink }
+					order={ args.itemOrder }
+					alignSelf={ args.itemAlignSelf }
+					className="bg-red-500 p-4 text-wrap"
+					style={ itemStyle }
+				>
+					Item 1
+				</Container.Item>
+				<Container.Item className="bg-green-500 p-4" style={ itemStyle }>
+					Item 2
+				</Container.Item>
+				<Container.Item className="bg-blue-500 p-4" style={ itemStyle }>
+					Item 3
+				</Container.Item>
+			</Container>
+		);
+	},
+};
diff --git a/src/components/container/grid-container.jsx b/src/components/container/grid-container.jsx
new file mode 100644
index 00000000..9e7abf97
--- /dev/null
+++ b/src/components/container/grid-container.jsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { cn } from '@/utilities/functions';
+import {
+	gridColumnClassNames,
+	gridColSpanClassNames,
+	gridColStartClassNames,
+	gapClassNames,
+	gapXClassNames,
+	gapYClassNames,
+	gridFlowClassNames,
+	alignClassNames,
+	justifyClassNames,
+	alignSelfClassNames,
+	justifySelfClassNames,
+} from './container-styles.js';
+import { getClassNames } from './container-utils.js';
+
+const GridContainer = ( {
+	className,
+	cols,
+	gap,
+	gapX,
+	gapY,
+	align,
+	justify,
+	gridFlow = '',
+	colsSubGrid = false,
+	rowsSubGrid = false,
+	autoRows = false,
+	autoCols = false,
+	children,
+	...props
+} ) => {
+	const columnClassName = getClassNames( cols, gridColumnClassNames, 1 );
+	const gapClassName = getClassNames( gap, gapClassNames, 'sm' );
+	const gapXClassName = getClassNames( gapX, gapXClassNames, '' );
+	const gapYClassName = getClassNames( gapY, gapYClassNames, '' );
+	const alignClassName = getClassNames( align, alignClassNames, '' );
+	const justifyClassName = getClassNames( justify, justifyClassNames, '' );
+	const gridFlowClassName = getClassNames( gridFlow, gridFlowClassNames, '' );
+
+	return (
+		<div
+			className={ cn(
+				'grid',
+				{
+					'grid-cols-subgrid': colsSubGrid,
+					'grid-rows-subgrid': rowsSubGrid,
+					'auto-cols-auto': autoCols,
+					'auto-rows-auto': autoRows,
+				},
+				columnClassName,
+				gapClassName,
+				gapXClassName,
+				gapYClassName,
+				alignClassName,
+				justifyClassName,
+				gridFlowClassName,
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</div>
+	);
+};
+
+export const GridItem = ( {
+	className,
+	children,
+	colSpan,
+	colStart,
+	alignSelf,
+	justifySelf,
+	...props
+} ) => {
+	const colSpanClassName = getClassNames( colSpan, gridColSpanClassNames, 0 );
+	const colStartClassName = getClassNames(
+		colStart,
+		gridColStartClassNames,
+		0
+	);
+	const alignSelfClassName = getClassNames(
+		alignSelf,
+		alignSelfClassNames,
+		''
+	);
+	const justifySelfClassName = getClassNames(
+		justifySelf,
+		justifySelfClassNames,
+		''
+	);
+
+	return (
+		<div
+			className={ cn(
+				colSpanClassName,
+				colStartClassName,
+				alignSelfClassName,
+				justifySelfClassName,
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</div>
+	);
+};
+
+Object.assign( GridContainer, { Item: GridItem } );
+
+export default GridContainer;
diff --git a/src/components/container/index.js b/src/components/container/index.js
new file mode 100644
index 00000000..cf4b4ae7
--- /dev/null
+++ b/src/components/container/index.js
@@ -0,0 +1 @@
+export { default } from './container.jsx';
diff --git a/src/components/container/readme.md b/src/components/container/readme.md
new file mode 100644
index 00000000..fc823510
--- /dev/null
+++ b/src/components/container/readme.md
@@ -0,0 +1,399 @@
+# Container
+
+## Description
+
+The `Container` component is a flexible layout component that can be used to create grid or flexbox-based layouts.
+
+## `Container` Props
+
+### containerType
+- **Type:** `string`
+- **Default:** `"flex"`
+- **Description:** Specifies the type of container
+    - `"flex"`
+    - `"grid"`
+
+### gap
+- **Type:** `string` | `object`
+- **Default:** `"sm"`
+- **Description:** Defines the gap between grid or flex items.
+- Available options:
+    - `"xs"`
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+    - `"xl"`
+    - `"2xl"`
+- Object format:
+    ```jsx
+    {
+        sm: "md",
+        md: "lg",
+        lg: "xl",
+    }
+    ```
+
+### gapX
+- **Type:** `string` | `object`
+- **Default:** `"sm"`
+- **Description:** Defines the gap between grid or flex items.
+- Available options:
+    - `"xs"`
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+    - `"xl"`
+    - `"2xl"`
+- Object format:
+    ```jsx
+    {
+        sm: "md",
+        md: "lg",
+        lg: "xl",
+    }
+    ```
+
+### gapY
+- **Type:** `string` | `object`
+- **Default:** `"sm"`
+- **Description:** Defines the gap between grid or flex items.
+- Available options:
+    - `"xs"`
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+    - `"xl"`
+    - `"2xl"`
+- Object format:
+    ```jsx
+    {
+        sm: "md",
+        md: "lg",
+        lg: "xl",
+    }
+    ```
+
+### justify
+- **Type:** `string` | `object`
+- **Default:** `""`
+- **Description:** Specifies how flex items are aligned along the main axis.
+- Available options:
+    - `"normal"`
+    - `"start"`
+    - `"end"`
+    - `"center"`
+    - `"between"`
+    - `"around"`
+    - `"evenly"`
+    - `"stretch"`
+- Object format:
+    ```jsx
+    {
+        sm: "start",
+        md: "center",
+        lg: "end",
+    }
+    ```
+
+### align
+- **Type:** `string` | `object`
+- **Default:** `""`
+- **Description:** Specifies how flex items are aligned along the cross axis.
+- Available options:
+    - `"start"`
+    - `"end"`
+    - `"center"`
+    - `"baseline"`
+    - `"stretch"`
+- Object format:
+    ```jsx
+    {
+        sm: "start",
+        md: "center",
+        lg: "end",
+    }
+    ```
+
+### cols
+- **Type:** `number` | `object`
+- **Default:** `""`
+- **Description:** Specifies the number of columns for desktop view (applies to flexbox layouts). The column width is dynamically calculated based on the number of columns and the gap size.
+- Available options:
+    - `1`
+    - `2`
+    - `3`
+    - `4`
+    - `5`
+    - `6`
+    - `7`
+    - `8`
+    - `9`
+    - `10`
+    - `11`
+    - `12`
+- Object format:
+    ```jsx
+    {
+        sm: 1,
+        md: 2,
+        lg: 3,
+    }
+    ```
+
+### className
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the container.
+
+### children
+- **Type:** `ReactNode`
+- **Description:** The content to be rendered inside the container.
+
+### extraProps
+- **Type:** `object`
+- **Description:** Additional props to be passed to the container's root element.
+
+## `Container` Flexbox Props
+
+### direction
+- **Type:** `string` | `object`
+- **Default:** `""`
+- **Description:** Defines the direction of flex items (applicable only for flex containers).
+- Available options:
+    - `"row"`
+    - `"row-reverse"`
+    - `"column"`
+    - `"column-reverse"`
+- Object format:
+    ```jsx
+    {
+        sm: "row",
+        md: "column",
+        lg: "row-reverse",
+    }
+    ```
+
+### wrap
+- **Type:** `string` | `object`
+- **Description:** Defines how flex items should wrap in the container. If no wrap is specified, it will automatically wrap if any column props (cols, tabCols, mCols) are provided.
+- Available options:
+    - `"nowrap"`
+    - `"wrap"`
+    - `"wrap-reverse"`
+- Object format:
+    ```jsx
+    {
+        sm: "wrap",
+        md: "nowrap",
+        lg: "wrap-reverse",
+    }
+    ```
+
+## `Container` Grid Props
+
+### `gridFlow`
+- **Type:** `string` | `object`
+- **Default:** `""`
+- **Description:** Specifies the direction of the grid items.
+- Available options:
+    - `"row"`
+    - `"column"`
+    - `"row-dense"`
+    - `"column-dense"`
+- Object format:
+    ```jsx
+    {
+        sm: "row",
+        md: "column",
+        lg: "row-dense",
+    }
+    ```
+### `colsSubGrid`
+- **Type:** `boolean` 
+- **Default:** `false`
+- **Description:** Specifies whether the grid items should be placed in a subgrid.
+
+### `rowsSubGrid`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Specifies whether the grid items should be placed in a subgrid.
+
+### `autoRows`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Specifies whether the grid should automatically generate rows.
+
+### `autoCols`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Specifies whether the grid should automatically generate columns.
+
+## `Container.Item` Props
+
+### alignSelf
+- **Type:** `string` | `object`
+- **Description:** Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
+- Available options:
+    - `"auto"`
+    - `"start"`
+    - `"end"`
+    - `"stretch"`
+    - `"baseline"`
+- Object format:
+    ```jsx
+    {
+        sm: "start",
+        md: "center",
+        lg: "end",
+    }
+    ```
+
+### justifySelf
+- **Type:** `string` | `object`
+- **Description:** Allows the default alignment (or the one specified by justify-content) to be overridden for individual flex items.
+- Available options:
+    - `"auto"`
+    - `"start"`
+    - `"end"`
+    - `"center"`
+    - `"stretch"`
+    - `"baseline"`
+- Object format:
+    ```jsx
+    {
+        sm: "start",
+        md: "center",
+        lg: "end",
+    }
+    ```
+
+## `Container.Item` Flexbox Props
+
+### grow
+- **Type:** `number` | `object`
+- **Description:** Specifies how much a flex item should grow relative to the rest of the flex items.
+- Available options:
+    - `"0"`
+    - `"1"`
+- Object format:
+    ```jsx
+    {
+        sm: 1,
+        md: 2,
+        lg: 3,
+    }
+    ```
+
+### shrink
+- **Type:** `number` | `object`
+- **Description:** Specifies how much a flex item should shrink relative to the rest of the flex items.
+- Available options:
+    - `"0"`
+    - `"1"`
+- Object format:
+    ```jsx
+    {
+        sm: 1,
+        md: 2,
+        lg: 3,
+    }
+    ```
+
+### order
+- **Type:** `string` | `object`
+- **Description:** Defines the order of the flex item in the container.
+- Available options:
+    - `"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"`
+    - `"first"`
+    - `"last"`
+    - `"none"`
+- Object format:
+    ```jsx
+    {
+        sm: "first",
+        md: 2,
+        lg: "last",
+    }
+    ```
+
+## `Container.Item` Grid Props
+
+### `colSpan`
+- **Type:** `number` | `object`
+- **Description:** Specifies the number of columns the grid item should span.
+- Available options:
+    - `1`
+    - `2`
+    - `3`
+    - `4`
+    - `5`
+    - `6`
+    - `7`
+    - `8`
+    - `9`
+    - `10`
+    - `11`
+    - `12`
+- Object format:
+    ```jsx
+    {
+        sm: 1,
+        md: 2,
+        lg: 3,
+    }
+    ```
+
+### `colStart`
+- **Type:** `number` | `object`
+- **Description:** Specifies the column line the grid item should start at.
+- Available options:
+    - `1`
+    - `2`
+    - `3`
+    - `4`
+    - `5`
+    - `6`
+    - `7`
+    - `8`
+    - `9`
+    - `10`
+    - `11`
+    - `12`
+- Object format:
+    ```jsx
+    {
+        sm: 1,
+        md: 2,
+        lg: 3,
+    }
+    ```
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { Container } from '@bsf/force-ui';
+
+const App = () => (
+    <>
+        {/* Default Flex Behavior */}
+        <Container justify="end" align="start" gap="xs" className="bg-orange-300 h-60">
+            <Container.Item grow={1}>Item 1</Container.Item>
+            <Container.Item>Item 2</Container.Item>
+            <Container.Item grow={1}>Item 3</Container.Item>
+        </Container>
+
+        {/* Responsive Behavior */}
+        <Container cols={5} className="bg-pink-200 p-4 gap-0">
+            <Container.Item className="bg-red-500 p-4">Item 1</Container.Item>
+            <Container.Item className="bg-green-500 p-4">Item 2</Container.Item>
+            <Container.Item className="bg-blue-500 p-4">Item 3</Container.Item>
+            <Container.Item className="bg-yellow-500 p-4">Item 4</Container.Item>
+            <Container.Item className="bg-purple-500 p-4">Item 5</Container.Item>
+            <Container.Item className="bg-pink-500 p-4">Item 6</Container.Item>
+        </Container>
+    </>
+);
+
+export default App;
+```
\ No newline at end of file
diff --git a/src/components/dialog/dialog.jsx b/src/components/dialog/dialog.jsx
new file mode 100644
index 00000000..b5ca9992
--- /dev/null
+++ b/src/components/dialog/dialog.jsx
@@ -0,0 +1,365 @@
+import {
+	cloneElement,
+	createContext,
+	Fragment,
+	isValidElement,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { callAll, cn } from '@/utilities/functions';
+import { X } from 'lucide-react';
+import { createPortal } from 'react-dom';
+
+const DialogContext = createContext();
+const useDialogState = () => useContext( DialogContext );
+
+const animationVariants = {
+	open: {
+		opacity: 1,
+	},
+	exit: {
+		opacity: 0,
+	},
+};
+const TRANSITION_DURATION = { duration: 0.2 };
+
+// Dialog component.
+const Dialog = ( {
+	open,
+	setOpen,
+	children,
+	trigger,
+	className,
+	exitOnClickOutside = false,
+	exitOnEsc = true,
+	design = 'simple',
+	scrollLock = true,
+} ) => {
+	const isControlled = open !== undefined && setOpen !== undefined;
+	const [ isOpen, setIsOpen ] = useState( false );
+	const dialogRef = useRef( null );
+	const dialogContainerRef = useRef( null );
+
+	const openState = useMemo(
+		() => ( isControlled ? open : isOpen ),
+		[ open, isOpen ]
+	);
+	const setOpenState = useMemo(
+		() => ( isControlled ? setOpen : setIsOpen ),
+		[ setIsOpen, setIsOpen ]
+	);
+
+	const handleOpen = () => {
+		if ( openState ) {
+			return;
+		}
+
+		setOpenState( true );
+	};
+
+	const handleClose = () => {
+		if ( ! openState ) {
+			return;
+		}
+
+		setOpenState( false );
+	};
+
+	const renderTrigger = useCallback( () => {
+		if ( isValidElement( trigger ) ) {
+			return cloneElement( trigger, {
+				onClick: callAll( handleOpen, trigger.props.onClick ),
+			} );
+		}
+
+		if ( typeof trigger === 'function' ) {
+			return trigger( { onClick: handleOpen } );
+		}
+
+		return null;
+	}, [ trigger, handleOpen, handleClose ] );
+
+	const handleKeyDown = ( event ) => {
+		switch ( event.key ) {
+			case 'Escape':
+				if ( exitOnEsc ) {
+					handleClose();
+				}
+				break;
+			default:
+				break;
+		}
+	};
+
+	const handleClickOutside = ( event ) => {
+		if (
+			exitOnClickOutside &&
+			dialogRef.current &&
+			! dialogRef.current.contains( event.target )
+		) {
+			handleClose();
+		}
+	};
+
+	useEffect( () => {
+		window.addEventListener( 'keydown', handleKeyDown );
+		document.addEventListener( 'mousedown', handleClickOutside );
+
+		return () => {
+			window.removeEventListener( 'keydown', handleKeyDown );
+			document.removeEventListener( 'mousedown', handleClickOutside );
+		};
+	}, [ openState ] );
+
+	// Prevent scrolling when dialog is open.
+	useEffect( () => {
+		if ( ! scrollLock ) {
+			return;
+		}
+		if ( openState ) {
+			document.querySelector( 'html' ).style.overflow = 'hidden';
+		}
+
+		return () => {
+			document.querySelector( 'html' ).style.overflow = '';
+		};
+	}, [ openState ] );
+
+	return (
+		<>
+			{ renderTrigger() }
+			<DialogContext.Provider
+				value={ {
+					open: openState,
+					setOpen: setOpenState,
+					handleClose,
+					design,
+					dialogContainerRef,
+					dialogRef,
+				} }
+			>
+				<div
+					ref={ dialogContainerRef }
+					className={ cn(
+						'fixed z-999999 w-0 h-0 overflow-visible',
+						className
+					) }
+				>
+					{ children }
+				</div>
+			</DialogContext.Provider>
+		</>
+	);
+};
+Dialog.displayName = 'Dialog';
+
+const DialogPanel = ( { children, className } ) => {
+	const { open, handleClose, dialogRef } = useDialogState();
+
+	return (
+		<AnimatePresence>
+			{ open && (
+				<motion.div
+					className="fixed inset-0 overflow-y-auto"
+					initial="exit"
+					animate="open"
+					exit="exit"
+					variants={ animationVariants }
+					role="dialog"
+					transition={ TRANSITION_DURATION }
+				>
+					<div className="flex items-center justify-center min-h-full">
+						<div
+							ref={ dialogRef }
+							className={ cn(
+								'flex flex-col gap-5 w-120 h-fit bg-background-primary border border-solid border-border-subtle rounded-xl shadow-soft-shadow-2xl my-5 overflow-hidden',
+								className
+							) }
+						>
+							{ typeof children === 'function'
+								? children( { close: handleClose } )
+								: children }
+						</div>
+					</div>
+				</motion.div>
+			) }
+		</AnimatePresence>
+	);
+};
+DialogPanel.displayName = 'Dialog.Panel';
+
+// Backdrop for the dialog.
+const DialogBackdrop = ( { className, ...props } ) => {
+	const { open, dialogContainerRef } = useDialogState();
+
+	return (
+		dialogContainerRef.current &&
+		createPortal(
+			<AnimatePresence>
+				{ open && (
+					<motion.div
+						className={ cn(
+							'fixed inset-0 -z-10 bg-background-inverse/90 backdrop-blur-sm',
+							className
+						) }
+						{ ...props }
+						initial="exit"
+						animate="open"
+						exit="exit"
+						variants={ animationVariants }
+						transition={ TRANSITION_DURATION }
+					/>
+				) }
+			</AnimatePresence>,
+			dialogContainerRef.current
+		)
+	);
+};
+DialogBackdrop.displayName = 'Dialog.Backdrop';
+
+// Dialog header wrapper.
+const DialogHeader = ( { children, className, ...props } ) => {
+	return (
+		<div className={ cn( 'space-y-2 px-5 pt-5 pb-1', className ) } { ...props }>
+			{ children }
+		</div>
+	);
+};
+DialogHeader.displayName = 'Dialog.Header';
+
+// Dialog title.
+const DialogTitle = ( { children, as: Tag = 'h3', className, ...props } ) => {
+	return (
+		<Tag
+			className={ cn(
+				'text-base font-semibold text-text-primary m-0 p-0',
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</Tag>
+	);
+};
+DialogTitle.displayName = 'Dialog.Title';
+
+// Dialog description.
+const DialogDescription = ( {
+	children,
+	as: Tag = 'p',
+	className,
+	...props
+} ) => {
+	return (
+		<Tag
+			className={ cn(
+				'text-sm font-normal text-text-secondary my-0 ml-0 mr-1 p-0',
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</Tag>
+	);
+};
+DialogDescription.displayName = 'Dialog.Description';
+
+// Default close button for the dialog.
+const DefaultCloseButton = ( { className, ...props } ) => {
+	return (
+		<button
+			className={ cn(
+				'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-none outline-none shadow-none',
+				className
+			) }
+			aria-label="Close dialog"
+			{ ...props }
+		>
+			<X className="size-4 text-text-primary shrink-0" />
+		</button>
+	);
+};
+
+// Close button for the dialog.
+const DialogCloseButton = ( { children, as: Tag = Fragment, ...props } ) => {
+	const { handleClose } = useDialogState();
+
+	if ( ! isValidElement( children ) || ! children ) {
+		return <DefaultCloseButton onClick={ handleClose } { ...props } />;
+	}
+
+	if ( Tag === Fragment ) {
+		if ( typeof children === 'function' ) {
+			return children( { close: handleClose } );
+		}
+
+		return cloneElement( children, {
+			onClick: handleClose,
+		} );
+	}
+
+	return (
+		<Tag { ...props } onClick={ handleClose }>
+			{ children }
+		</Tag>
+	);
+};
+DialogCloseButton.displayName = 'Dialog.CloseButton';
+
+// Dialog body.
+const DialogBody = ( { children, className, ...props } ) => {
+	return (
+		<div className={ cn( 'px-5', className ) } { ...props }>
+			{ children }
+		</div>
+	);
+};
+DialogBody.displayName = 'Dialog.Body';
+
+// Dialog footer.
+const DialogFooter = ( { children, className } ) => {
+	const { design, handleClose } = useDialogState();
+
+	const renderChildren = () => {
+		if ( ! children ) {
+			return null;
+		}
+
+		if ( typeof children === 'function' ) {
+			return children( { close: handleClose } );
+		}
+
+		return children;
+	};
+
+	return (
+		<div
+			className={ cn(
+				'p-4 flex justify-end gap-3',
+				{
+					'bg-background-secondary': design === 'footer-divided',
+				},
+				className
+			) }
+		>
+			{ renderChildren() }
+		</div>
+	);
+};
+DialogFooter.displayName = 'Dialog.Footer';
+
+export default Object.assign( Dialog, {
+	Panel: DialogPanel,
+	Backdrop: DialogBackdrop,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	CloseButton: DialogCloseButton,
+	Header: DialogHeader,
+	Body: DialogBody,
+	Footer: DialogFooter,
+} );
diff --git a/src/components/dialog/dialog.stories.js b/src/components/dialog/dialog.stories.js
new file mode 100644
index 00000000..ea79612e
--- /dev/null
+++ b/src/components/dialog/dialog.stories.js
@@ -0,0 +1,223 @@
+import React, { useState } from 'react';
+import Dialog from './dialog';
+import Button from '../button';
+
+export default {
+	title: 'Organisms/Dialog',
+	component: Dialog,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	tags: [ 'autodocs' ],
+	decorators: [
+		( Story ) => (
+			<div className="font-sans [&_*]:font-sans h-[600px] flex items-center justify-center">
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		open: {
+			name: 'Open',
+			description:
+				'Control the dialog open state. If not provided, the dialog will be controlled internally.',
+			control: 'none',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		setOpen: {
+			name: 'Set Open',
+			description:
+				'Control the dialog open state. If not provided, the dialog will be controlled internally.',
+			control: 'none',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		design: {
+			name: 'Design',
+			description: 'Design of the dialog.',
+			control: 'select',
+			options: [ 'simple', 'footer-divided' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'simple' },
+			},
+		},
+		exitOnEsc: {
+			name: 'Exit on Esc',
+			description: 'Close the dialog on pressing the escape key.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+		exitOnClickOutside: {
+			name: 'Exit on Click Outside',
+			description: 'Close the dialog on clicking outside the dialog.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		trigger: {
+			name: 'Trigger Button',
+			description: 'Button to trigger the dialog.',
+			control: 'none',
+			table: {
+				type: { summary: 'node' },
+			},
+			defaultValue: <Button>Open Dialog</Button>,
+		},
+		scrollLock: {
+			name: 'Scroll Lock',
+			description: 'Lock the scroll when the dialog is open.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+	},
+};
+
+const Template = ( args ) => {
+	const [ open, setOpen ] = useState( false );
+
+	return (
+		<Dialog { ...args } open={ open } setOpen={ setOpen }>
+			<Dialog.Backdrop />
+			<Dialog.Panel>
+				<Dialog.Header>
+					<div className="flex items-center justify-between">
+						<Dialog.Title>Dialog Title</Dialog.Title>
+						<Dialog.CloseButton />
+					</div>
+					<Dialog.Description>
+						Lorem ipsum dolor sit amet consectetur. Aliquam sed
+						scelerisque et arcu nibh a massa.
+					</Dialog.Description>
+				</Dialog.Header>
+				<Dialog.Body>
+					<p className="m-0 text-text-secondary">Body content</p>
+				</Dialog.Body>
+				<Dialog.Footer>
+					<Button onClick={ () => setOpen( false ) }>Close</Button>
+				</Dialog.Footer>
+			</Dialog.Panel>
+		</Dialog>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	trigger: <Button>Open Dialog</Button>,
+	exitOnEsc: true,
+	exitOnClickOutside: false,
+	scrollLock: true,
+	design: 'simple',
+};
+
+const ControlledTemplate = ( args ) => {
+	const [ open, setOpen ] = useState( false );
+
+	return (
+		<>
+			<Button onClick={ () => setOpen( true ) }>
+				Open Controlled Dialog
+			</Button>
+			<Dialog open={ open } setOpen={ setOpen } { ...args }>
+				<Dialog.Panel>
+					<Dialog.Header>
+						<div className="flex items-center justify-between">
+							<Dialog.Title>Dialog Title</Dialog.Title>
+							<Dialog.CloseButton />
+						</div>
+						<Dialog.Description>
+							Lorem ipsum dolor sit amet consectetur. Aliquam sed
+							scelerisque et arcu nibh a massa.
+						</Dialog.Description>
+					</Dialog.Header>
+					<Dialog.Body>
+						<h1 className="m-0">Dialog Content</h1>
+					</Dialog.Body>
+					<Dialog.Footer>
+						<div className="mr-auto inline-flex items-center">
+							Other option
+						</div>
+						<Button variant="ghost">Details</Button>
+						<Button
+							onClick={ () => setOpen( false ) }
+							variant="outline"
+						>
+							Cancel
+						</Button>
+						<Button variant="primary">Save</Button>
+					</Dialog.Footer>
+				</Dialog.Panel>
+				<Dialog.Backdrop />
+			</Dialog>
+		</>
+	);
+};
+
+export const Controlled = ControlledTemplate.bind( {} );
+Controlled.args = {};
+
+const UncontrolledTemplate = ( args ) => (
+	<Dialog { ...args }>
+		<Dialog.Panel>
+			{ ( { close } ) => (
+				<>
+					<Dialog.Header>
+						<div className="flex items-center justify-between">
+							<Dialog.Title>Dialog Title</Dialog.Title>
+							<Dialog.CloseButton />
+						</div>
+						<Dialog.Description>
+							Lorem ipsum dolor sit amet consectetur. Aliquam sed
+							scelerisque et arcu nibh a massa.
+						</Dialog.Description>
+					</Dialog.Header>
+					<Dialog.Body>
+						<h1 className="m-0">Dialog Content</h1>
+					</Dialog.Body>
+					<Dialog.Footer>
+						<div className="mr-auto inline-flex items-center">
+							Other option
+						</div>
+						<Button variant="ghost">Details</Button>
+						<Button onClick={ close } variant="outline">
+							Cancel
+						</Button>
+						<Button variant="primary">Save</Button>
+					</Dialog.Footer>
+					<Dialog.Backdrop />
+				</>
+			) }
+		</Dialog.Panel>
+	</Dialog>
+);
+
+export const Uncontrolled = UncontrolledTemplate.bind( {} );
+Uncontrolled.args = {
+	trigger: <Button>Open Uncontrolled Dialog</Button>,
+};
+Uncontrolled.parameters = {
+	docs: { source: { type: 'code' } },
+};
+
+export const Simple = Template.bind( {} );
+Simple.args = {
+	trigger: <Button>Open Dialog</Button>,
+	design: 'simple',
+};
+
+export const FooterDivided = Template.bind( {} );
+FooterDivided.args = {
+	trigger: <Button>Open Dialog</Button>,
+	design: 'footer-divided',
+};
diff --git a/src/components/dialog/index.js b/src/components/dialog/index.js
new file mode 100644
index 00000000..2ec065d7
--- /dev/null
+++ b/src/components/dialog/index.js
@@ -0,0 +1 @@
+export { default } from './dialog.jsx';
diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md
new file mode 100644
index 00000000..53a9b35c
--- /dev/null
+++ b/src/components/dialog/readme.md
@@ -0,0 +1,304 @@
+# Dialog Component Documentation
+
+## Description
+
+The `Dialog` component is a versatile, customizable dialog component built with Tailwind CSS. It supports various design, customization and additional properties to suit different use cases.
+
+## `Dialog` Props
+
+### `open` (Required for controlled dialog)
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+-   **Description:** Defines whether the dialog is open or closed.
+-   **Note:** This prop is required when using the dialog in controlled mode.
+
+### `setOpen` (Required for controlled dialog)
+
+-   **Type:** `function`
+-   **Description:** A function to set the `open` state of the dialog.
+-   **Note:** This prop is required when using the dialog in controlled mode.
+-   **Example:** `(isOpen) => setOpen(isOpen)`
+
+### `trigger` (Required for uncontrolled dialog)
+
+-   **Type:** `ReactNode`
+-   **Description:** The element that triggers the dialog to open when clicked. This can be a button, link, or any other element.
+-   **Note:** If the setOpen and open props are not provided, the dialog will be uncontrolled and will open when the trigger element is clicked. The onClick handler will be automatically added to the trigger element.
+-   **Example:** `<button>Open Dialog</button>`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the dialog.
+-   **Default:** `""`
+
+### `exitOnClickOutside`
+
+-   **Type:** `boolean`
+-   **Description:** Defines whether the dialog should close when clicked outside the dialog.
+-   **Default:** `false`
+
+### `exitOnEsc`
+
+-   **Type:** `boolean`
+-   **Description:** Defines whether the dialog should close when the `Esc` key is pressed.
+-   **Default:** `true`
+
+### `design`
+
+-   **Type:** `string`
+-   **Description:** Defines the design of the dialog. Options include:
+    -   `"simple"`: A simple dialog with a white background and shadow.
+    -   `"footer-divided"`: A dialog with a footer that has a background color different from the main dialog.
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the dialog.
+
+### `scrollLock`
+-  **Type:** `boolean`
+- **Description:** Defines whether the body should be locked when the dialog is open.
+- **Default:** `true`
+- **Note:** When the dialog is open, the body will be locked, and scrolling will be disabled.
+
+## `Dialog.Panel` Props
+
+### `className`
+-   **Type:** `string`
+-  **Description:** Additional custom classes to be added to the panel.
+- **Default:** `""`
+- **Note:** The panel is the main container of the dialog. To change the width, height, or other styles of the dialog, you can add custom classes to the panel.
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the dialog.
+
+## `Dialog.Header` Props
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the header.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the header.
+
+## `Dialog.Header` Props
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the header.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the header.
+
+## `Dialog.Title` Props
+
+### `as` (Optional)
+
+-   **Type:** `string` | `React.ElementType`
+-   **Default:** `"h3"`
+-   **Description:** The HTML tag or React component to be used for the title.
+-   **Example:** `"h1"`, `"h2"`, `CustomComponent`
+-   **Note:** The title is usually rendered as an `h3` element by default.
+-   **Example:** `<Dialog.Title as="h1">Dialog Title</Dialog.Title>`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the title.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the title.
+-   **Example:** `"Dialog Title"`
+
+## `Dialog.Description` Props
+
+### `as` (Optional)
+
+-   **Type:** `string` | `React.ElementType`
+-   **Default:** `"p"`
+-   **Description:** The HTML tag or React component to be used for the description.
+-   **Example:** `<Dialog.Description as="h1">Dialog Title</Dialog.Description>`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the description.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the description.
+-   **Example:** `"This is a description."`
+
+## `Dialog.CloseButton` Props (Can be used for controlled and uncontrolled dialogs)
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the close button.
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the close button.
+-   **Default:** `"×"`
+
+### `as` (Optional)
+
+-   **Type:** `string` | `React.ElementType`
+-   **Default:** `"button"`
+-   **Description:** The HTML tag or React component to be used for the close button.
+-   **Example:** `"button"`, `"a"`, `CustomComponent`
+-   **Note:** The close button is usually rendered as a `button` element by default.
+
+## `Dialog.Body` Props
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the body.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the body.
+
+## `Dialog.Footer`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the body.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode` | `ReactNode[]` | `function`
+-   **Description:** The content to be displayed inside the body.
+-   Note: close
+
+## `Dialog.Backdrop`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the backdrop.
+-   **Default:** `""`
+
+## Usage
+
+### Controlled Dialog
+
+```jsx
+import React, { useState } from 'react';
+import { Dialog } from '@force-ai/ui';
+
+const MyComponent = () => {
+  const [openDialog, setOpenDialog] = useState(false);
+
+  return (
+			<div className="flex items-center gap-10">
+				<div className="space-y-2">
+					<div>Dialog with trigger button (Uncontrolled)</div>
+					<Dialog
+						trigger={ <Button>Open Dialog</Button> }
+						exitOnClickOutside={ false }
+						design="footer-divided"
+					>
+						<Dialog.Header>
+							<div className="flex items-center justify-between">
+								<Dialog.Title>Dialog Title</Dialog.Title>
+								<Dialog.CloseButton />
+							</div>
+							<Dialog.Description>
+								Lorem ipsum dolor sit amet consectetur. Aliquam
+								sed scelerisque et arcu nibh a massa.
+							</Dialog.Description>
+						</Dialog.Header>
+						<Dialog.Body>
+							<h1 className="m-0">Dialog Content</h1>
+						</Dialog.Body>
+						<Dialog.Footer>
+							{ ( { close } ) => (
+								<>
+									<div className="mr-auto inline-flex items-center">
+										Other option
+									</div>
+									<Button variant="ghost">Details</Button>
+									<Button onClick={ close } variant="outline">
+										Cancel
+									</Button>
+									<Button variant="primary">Save</Button>
+								</>
+							) }
+						</Dialog.Footer>
+						<Dialog.Backdrop />
+					</Dialog>
+				</div>
+        { /* Another Example */ }
+				<div className="space-y-2">
+					<div>Dialog (Controlled)</div>
+					<Button
+						onClick={ () => {
+							setOpenDialog( true );
+						} }
+					>
+						Open Dialog
+					</Button>
+					<Dialog
+						open={ openDialog }
+						setOpen={ setOpenDialog }
+						exitOnClickOutside={ false }
+						exitOnEsc={ false }
+						design="footer-divided"
+					>
+						<Dialog.Header>
+							<div className="flex items-center justify-between">
+								<Dialog.Title>Dialog Title</Dialog.Title>
+								<Dialog.CloseButton />
+							</div>
+							<Dialog.Description>
+								Lorem ipsum dolor sit amet consectetur. Aliquam
+								sed scelerisque et arcu nibh a massa.
+							</Dialog.Description>
+						</Dialog.Header>
+						<Dialog.Body>
+							<h1 className="m-0">Dialog Content</h1>
+						</Dialog.Body>
+						<Dialog.Footer>
+							<div className="mr-auto inline-flex items-center">
+								Other option
+							</div>
+							<Button variant="ghost">Details</Button>
+							<Button
+								onClick={ () => setOpenDialog( false ) }
+								variant="outline"
+							>
+								Cancel
+							</Button>
+							<Button variant="primary">Save</Button>
+						</Dialog.Footer>
+						<Dialog.Backdrop />
+					</Dialog>
+				</div>
+  );
+};
+
+```
diff --git a/src/components/drawer/drawer-backdrop.jsx b/src/components/drawer/drawer-backdrop.jsx
new file mode 100644
index 00000000..6e453280
--- /dev/null
+++ b/src/components/drawer/drawer-backdrop.jsx
@@ -0,0 +1,45 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { useDrawerState } from './drawer';
+import { createPortal } from 'react-dom';
+import { cn } from '@/utilities/functions';
+
+const backdropAnimationVariants = {
+	open: {
+		opacity: 1,
+	},
+	exit: {
+		opacity: 0,
+	},
+};
+
+// Backdrop for the drawer.
+const DrawerBackdrop = ( { className, ...props } ) => {
+	const { open, drawerContainerRef, transitionDuration } = useDrawerState();
+
+	return (
+		drawerContainerRef.current &&
+		createPortal(
+			<AnimatePresence>
+				{ open && (
+					<motion.div
+						className={ cn(
+							'fixed inset-0 -z-10 bg-background-inverse/90 backdrop-blur-sm',
+							className
+						) }
+						{ ...props }
+						initial="exit"
+						animate="open"
+						exit="exit"
+						variants={ backdropAnimationVariants }
+						transition={ transitionDuration }
+					/>
+				) }
+			</AnimatePresence>,
+			drawerContainerRef.current
+		)
+	);
+};
+
+export default Object.assign( DrawerBackdrop, {
+	displayName: 'Drawer.Backdrop',
+} );
diff --git a/src/components/drawer/drawer-body.jsx b/src/components/drawer/drawer-body.jsx
new file mode 100644
index 00000000..711a0cea
--- /dev/null
+++ b/src/components/drawer/drawer-body.jsx
@@ -0,0 +1,20 @@
+import { cn } from '@/utilities/functions';
+
+// Drawer body.
+const DrawerBody = ( { children, className, ...props } ) => {
+	return (
+		<div
+			className={ cn(
+				'px-5 flex flex-col flex-1 overflow-y-auto overflow-x-hidden',
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</div>
+	);
+};
+
+export default Object.assign( DrawerBody, {
+	displayName: 'Drawer.Body',
+} );
diff --git a/src/components/drawer/drawer-close-button.jsx b/src/components/drawer/drawer-close-button.jsx
new file mode 100644
index 00000000..a8088a16
--- /dev/null
+++ b/src/components/drawer/drawer-close-button.jsx
@@ -0,0 +1,49 @@
+import { cloneElement, Fragment, isValidElement } from 'react';
+import { useDrawerState } from './drawer';
+import { cn } from '@/utilities/functions';
+import { X } from 'lucide-react';
+
+// Default close button for the drawer.
+const DefaultCloseButton = ( { className, ...props } ) => {
+	return (
+		<button
+			className={ cn(
+				'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-none outline-none shadow-none',
+				className
+			) }
+			aria-label="Close drawer"
+			{ ...props }
+		>
+			<X className="size-4 text-text-primary shrink-0" />
+		</button>
+	);
+};
+
+// Close button for the drawer.
+const DrawerCloseButton = ( { children, as: Tag = Fragment, ...props } ) => {
+	const { handleClose } = useDrawerState();
+
+	if ( ! isValidElement( children ) || ! children ) {
+		return <DefaultCloseButton onClick={ handleClose } { ...props } />;
+	}
+
+	if ( Tag === Fragment ) {
+		if ( typeof children === 'function' ) {
+			return children( { close: handleClose } );
+		}
+
+		return cloneElement( children, {
+			onClick: handleClose,
+		} );
+	}
+
+	return (
+		<Tag { ...props } onClick={ handleClose }>
+			{ children }
+		</Tag>
+	);
+};
+
+export default Object.assign( DrawerCloseButton, {
+	displayName: 'Drawer.CloseButton',
+} );
diff --git a/src/components/drawer/drawer-description.jsx b/src/components/drawer/drawer-description.jsx
new file mode 100644
index 00000000..548d3e27
--- /dev/null
+++ b/src/components/drawer/drawer-description.jsx
@@ -0,0 +1,25 @@
+import { cn } from '@/utilities/functions';
+
+// Drawer description.
+const DrawerDescription = ( {
+	children,
+	as: Tag = 'p',
+	className,
+	...props
+} ) => {
+	return (
+		<Tag
+			className={ cn(
+				'text-sm font-normal text-text-secondary my-0 ml-0 mr-1 p-0',
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</Tag>
+	);
+};
+
+export default Object.assign( DrawerDescription, {
+	displayName: 'Drawer.Description',
+} );
diff --git a/src/components/drawer/drawer-footer.jsx b/src/components/drawer/drawer-footer.jsx
new file mode 100644
index 00000000..1193be70
--- /dev/null
+++ b/src/components/drawer/drawer-footer.jsx
@@ -0,0 +1,37 @@
+import { cn } from '@/utilities/functions';
+import { useDrawerState } from './drawer';
+
+// Drawer footer.
+const DrawerFooter = ( { children, className } ) => {
+	const { design, handleClose } = useDrawerState();
+
+	const renderChildren = () => {
+		if ( ! children ) {
+			return null;
+		}
+
+		if ( typeof children === 'function' ) {
+			return children( { close: handleClose } );
+		}
+
+		return children;
+	};
+
+	return (
+		<div
+			className={ cn(
+				'p-5 flex justify-end gap-3 mt-auto',
+				{
+					'bg-background-secondary': design === 'footer-divided',
+				},
+				className
+			) }
+		>
+			{ renderChildren() }
+		</div>
+	);
+};
+
+export default Object.assign( DrawerFooter, {
+	displayName: 'Drawer.Footer',
+} );
diff --git a/src/components/drawer/drawer-header.jsx b/src/components/drawer/drawer-header.jsx
new file mode 100644
index 00000000..36b6652b
--- /dev/null
+++ b/src/components/drawer/drawer-header.jsx
@@ -0,0 +1,14 @@
+import { cn } from '@/utilities/functions';
+
+// Drawer header wrapper.
+const DrawerHeader = ( { children, className, ...props } ) => {
+	return (
+		<div className={ cn( 'space-y-2 px-5 pt-5 pb-1', className ) } { ...props }>
+			{ children }
+		</div>
+	);
+};
+
+export default Object.assign( DrawerHeader, {
+	displayName: 'Drawer.Header',
+} );
diff --git a/src/components/drawer/drawer-panel.jsx b/src/components/drawer/drawer-panel.jsx
new file mode 100644
index 00000000..d93a4a61
--- /dev/null
+++ b/src/components/drawer/drawer-panel.jsx
@@ -0,0 +1,66 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { useDrawerState } from './drawer';
+import { cn } from '@/utilities/functions';
+
+const animationVariants = {
+	left: {
+		open: {
+			x: 0,
+		},
+		exit: {
+			x: '-100%',
+		},
+	},
+	right: {
+		open: {
+			x: 0,
+		},
+		exit: {
+			x: '100%',
+		},
+	},
+};
+
+const DrawerPanel = ( { children, className } ) => {
+	const { open, position, handleClose, drawerRef, transitionDuration } =
+		useDrawerState();
+
+	return (
+		<AnimatePresence>
+			{ open && (
+				<div className="fixed inset-0">
+					<div
+						className={ cn(
+							'flex items-center justify-center h-full',
+							{
+								'justify-start': position === 'left',
+								'justify-end': position === 'right',
+							}
+						) }
+					>
+						<motion.div
+							ref={ drawerRef }
+							className={ cn(
+								'flex flex-col gap-5 w-120 h-full bg-background-primary shadow-2xl my-5 overflow-hidden',
+								className
+							) }
+							initial="exit"
+							animate="open"
+							exit="exit"
+							variants={ animationVariants[ position ] }
+							transition={ transitionDuration }
+						>
+							{ typeof children === 'function'
+								? children( { close: handleClose } )
+								: children }
+						</motion.div>
+					</div>
+				</div>
+			) }
+		</AnimatePresence>
+	);
+};
+
+export default Object.assign( DrawerPanel, {
+	displayName: 'Drawer.Panel',
+} );
diff --git a/src/components/drawer/drawer-title.jsx b/src/components/drawer/drawer-title.jsx
new file mode 100644
index 00000000..0c77bbaa
--- /dev/null
+++ b/src/components/drawer/drawer-title.jsx
@@ -0,0 +1,20 @@
+import { cn } from '@/utilities/functions';
+
+// Drawer title.
+const DrawerTitle = ( { children, as: Tag = 'h3', className, ...props } ) => {
+	return (
+		<Tag
+			className={ cn(
+				'text-base font-semibold text-text-primary m-0 p-0',
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</Tag>
+	);
+};
+
+export default Object.assign( DrawerTitle, {
+	displayName: 'Drawer.Title',
+} );
diff --git a/src/components/drawer/drawer.jsx b/src/components/drawer/drawer.jsx
new file mode 100644
index 00000000..73232a6f
--- /dev/null
+++ b/src/components/drawer/drawer.jsx
@@ -0,0 +1,156 @@
+import {
+	cloneElement,
+	createContext,
+	isValidElement,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { callAll, cn } from '@/utilities/functions';
+
+const DrawerContext = createContext();
+export const useDrawerState = () => useContext( DrawerContext );
+
+const TRANSITION_DURATION = 0.2;
+
+// Drawer component.
+const Drawer = ( {
+	open,
+	setOpen,
+	children,
+	trigger,
+	className,
+	exitOnClickOutside = false,
+	exitOnEsc = true,
+	design = 'simple',
+	position = 'right',
+	transitionDuration = TRANSITION_DURATION,
+	scrollLock = true,
+} ) => {
+	const isControlled = open !== undefined && setOpen !== undefined;
+	const [ isOpen, setIsOpen ] = useState( false );
+	const drawerRef = useRef( null );
+	const drawerContainerRef = useRef( null );
+
+	const openState = useMemo(
+		() => ( isControlled ? open : isOpen ),
+		[ open, isOpen ]
+	);
+	const setOpenState = useMemo(
+		() => ( isControlled ? setOpen : setIsOpen ),
+		[ setIsOpen, setIsOpen ]
+	);
+
+	const handleOpen = () => {
+		if ( openState ) {
+			return;
+		}
+
+		setOpenState( true );
+	};
+
+	const handleClose = () => {
+		if ( ! openState ) {
+			return;
+		}
+
+		setOpenState( false );
+	};
+
+	const renderTrigger = useCallback( () => {
+		if ( isValidElement( trigger ) ) {
+			return cloneElement( trigger, {
+				onClick: callAll( handleOpen, trigger.props.onClick ),
+			} );
+		}
+
+		if ( typeof trigger === 'function' ) {
+			return trigger( { onClick: handleOpen } );
+		}
+
+		return null;
+	}, [ trigger, handleOpen, handleClose ] );
+
+	const handleKeyDown = ( event ) => {
+		switch ( event.key ) {
+			case 'Escape':
+				if ( exitOnEsc ) {
+					handleClose();
+				}
+				break;
+			default:
+				break;
+		}
+	};
+
+	const handleClickOutside = ( event ) => {
+		if (
+			exitOnClickOutside &&
+			drawerRef.current &&
+			! drawerRef.current.contains( event.target )
+		) {
+			handleClose();
+		}
+	};
+
+	useEffect( () => {
+		window.addEventListener( 'keydown', handleKeyDown );
+		document.addEventListener( 'mousedown', handleClickOutside );
+
+		return () => {
+			window.removeEventListener( 'keydown', handleKeyDown );
+			document.removeEventListener( 'mousedown', handleClickOutside );
+		};
+	}, [ openState ] );
+
+	// Prevent scrolling when drawer is open.
+	useEffect( () => {
+		if ( ! scrollLock ) {
+			return;
+		}
+
+		if ( openState ) {
+			document.querySelector( 'html' ).style.overflow = 'hidden';
+		}
+
+		return () => {
+			document.querySelector( 'html' ).style.overflow = '';
+		};
+	}, [ openState ] );
+
+	return (
+		<>
+			{ renderTrigger() }
+			<DrawerContext.Provider
+				value={ {
+					open: openState,
+					setOpen: setOpenState,
+					handleClose,
+					design,
+					position,
+					drawerContainerRef,
+					drawerRef,
+					transitionDuration: { duration: transitionDuration },
+				} }
+			>
+				<div
+					className={ cn(
+						'fixed z-999999 w-0 h-0 overflow-visible',
+						className
+					) }
+					role="dialog"
+					ref={ drawerContainerRef }
+				>
+					{ children }
+				</div>
+			</DrawerContext.Provider>
+		</>
+	);
+};
+
+export default Object.assign( Drawer, {
+	displayName: 'Drawer',
+} );
diff --git a/src/components/drawer/drawer.stories.js b/src/components/drawer/drawer.stories.js
new file mode 100644
index 00000000..3f911b38
--- /dev/null
+++ b/src/components/drawer/drawer.stories.js
@@ -0,0 +1,299 @@
+import React, { useState, Fragment } from 'react';
+import Drawer from '@/components/drawer';
+import Button from '../button';
+
+export default {
+	title: 'Organisms/Drawer',
+	component: Drawer,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { expanded: true },
+	},
+	tags: [ 'autodocs' ],
+	decorators: [
+		( Story ) => (
+			<div className="font-sans [&_*]:font-sans h-[600px] flex items-center justify-center">
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		open: {
+			name: 'Open',
+			description:
+				'Control the drawer open state. If not provided, the drawer will be controlled internally.',
+			control: 'none',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		setOpen: {
+			name: 'Set Open',
+			description:
+				'Control the drawer open state. If not provided, the drawer will be controlled internally.',
+			control: 'none',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		design: {
+			name: 'Design',
+			description: 'The design of the drawer.',
+			control: 'select',
+			options: [ 'simple', 'footer-divided' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'simple' },
+			},
+		},
+		exitOnEsc: {
+			name: 'Exit on Esc',
+			description:
+				'Whether to close the drawer when the escape key is pressed.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+		exitOnClickOutside: {
+			name: 'Exit on Click Outside',
+			description: 'Whether to close the drawer when clicked outside.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		trigger: {
+			name: 'Trigger Button',
+			description: 'The trigger button to open the drawer.',
+			control: 'none',
+			table: {
+				type: { summary: 'node' },
+			},
+			defaultValue: <Button>Open Drawer</Button>,
+		},
+		position: {
+			name: 'Position',
+			description: 'From which side the drawer should appear.',
+			control: 'select',
+			options: [ 'left', 'right' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'right' },
+			},
+		},
+		transitionDuration: {
+			name: 'Transition Duration',
+			description:
+				'The duration of drawer opening and closing animation.',
+			control: 'number',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '0.2' },
+			},
+		},
+		scrollLock: {
+			name: 'Scroll Lock',
+			description:
+				'Whether to lock the window scroll when the drawer is open.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+	},
+};
+
+const Logo = ( { className } ) => (
+	<svg
+		width="116"
+		height="24"
+		viewBox="0 0 116 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		className={ className }
+	>
+		<g clipPath="url(#clip0_6645_69725)">
+			<path
+				d="M12.0002 24C18.6278 24 24.0002 18.6276 24.0002 12V3.6C24.0002 2.64522 23.621 1.72955 22.9458 1.05442C22.2707 0.379285 21.355 0 20.4002 0L12.6002 0V5.2644C12.6002 6.4656 12.6734 7.71 13.3034 8.7324C13.7545 9.46513 14.3578 10.0923 15.0725 10.5713C15.7873 11.0503 16.5967 11.37 17.4458 11.5086L17.6756 11.5458C17.7704 11.5782 17.8526 11.6394 17.9109 11.7208C17.9691 11.8023 18.0004 11.8999 18.0004 12C18.0004 12.1001 17.9691 12.1977 17.9109 12.2792C17.8526 12.3606 17.7704 12.4218 17.6756 12.4542L17.4458 12.4914C16.2052 12.6941 15.0595 13.2813 14.1705 14.1703C13.2816 15.0592 12.6943 16.2049 12.4916 17.4456L12.4544 17.6754C12.4221 17.7701 12.3609 17.8524 12.2794 17.9106C12.198 17.9688 12.1004 18.0002 12.0002 18.0002C11.9001 18.0002 11.8025 17.9688 11.7211 17.9106C11.6396 17.8524 11.5784 17.7701 11.546 17.6754L11.5088 17.4456C11.3702 16.5965 11.0505 15.7871 10.5715 15.0723C10.0925 14.3576 9.46535 13.7542 8.73265 13.3032C7.71025 12.6732 6.46585 12.6 5.26465 12.6H0.0146484C0.328448 18.9486 5.57425 24 12.0002 24Z"
+				fill="#9333EA"
+			/>
+			<path
+				d="M0 11.4H5.2644C6.4656 11.4 7.71 11.3268 8.7324 10.6968C9.53161 10.2044 10.2044 9.53161 10.6968 8.7324C11.3268 7.71 11.4 6.4656 11.4 5.2644V0H3.6C2.64522 0 1.72955 0.379285 1.05442 1.05442C0.379285 1.72955 0 2.64522 0 3.6L0 11.4Z"
+				fill="#9333EA"
+			/>
+		</g>
+		<path
+			d="M31.328 18V6.8H35.024C35.792 6.8 36.4533 6.91733 37.008 7.152C37.5733 7.38667 38.0107 7.73867 38.32 8.208C38.6293 8.66667 38.784 9.24267 38.784 9.936C38.784 10.416 38.6667 10.848 38.432 11.232C38.208 11.616 37.888 11.936 37.472 12.192C38.016 12.4587 38.432 12.816 38.72 13.264C39.008 13.712 39.152 14.2453 39.152 14.864C39.152 15.5253 39.0027 16.0907 38.704 16.56C38.4053 17.0293 37.984 17.3867 37.44 17.632C36.896 17.8773 36.2507 18 35.504 18H31.328ZM33.152 16.336H35.36C35.9467 16.336 36.4107 16.192 36.752 15.904C37.0933 15.616 37.264 15.2267 37.264 14.736C37.264 14.2027 37.072 13.7867 36.688 13.488C36.3147 13.1893 35.7867 13.04 35.104 13.04H33.152V16.336ZM33.152 11.504H35.184C35.7173 11.504 36.1333 11.3653 36.432 11.088C36.7413 10.8 36.896 10.4053 36.896 9.904C36.896 9.392 36.72 9.00267 36.368 8.736C36.0267 8.45867 35.5467 8.32 34.928 8.32H33.152V11.504ZM41.9729 13.744C41.9729 12.88 42.1382 12.1707 42.4689 11.616C42.7995 11.0613 43.2262 10.6507 43.7489 10.384C44.2822 10.1067 44.8369 9.968 45.4129 9.968V11.68C44.9222 11.68 44.4582 11.7493 44.0209 11.888C43.5942 12.016 43.2475 12.2293 42.9809 12.528C42.7142 12.8267 42.5809 13.2213 42.5809 13.712L41.9729 13.744ZM40.7889 18V10H42.5809V18H40.7889ZM51.4814 18L51.4014 16.496V13.888C51.4014 13.344 51.3427 12.8907 51.2254 12.528C51.1187 12.1547 50.9374 11.872 50.6814 11.68C50.436 11.4773 50.1054 11.376 49.6894 11.376C49.3054 11.376 48.9694 11.456 48.6814 11.616C48.3934 11.776 48.148 12.0267 47.9454 12.368L46.3774 11.792C46.548 11.44 46.772 11.1147 47.0494 10.816C47.3374 10.5067 47.6947 10.2613 48.1214 10.08C48.5587 9.89867 49.0814 9.808 49.6894 9.808C50.468 9.808 51.1187 9.96267 51.6414 10.272C52.164 10.5707 52.548 11.0027 52.7934 11.568C53.0494 12.1333 53.1774 12.816 53.1774 13.616L53.1294 18H51.4814ZM49.1774 18.192C48.2174 18.192 47.4707 17.9787 46.9374 17.552C46.4147 17.1253 46.1534 16.5227 46.1534 15.744C46.1534 14.912 46.4307 14.2773 46.9854 13.84C47.5507 13.4027 48.3347 13.184 49.3374 13.184H51.4814V14.56H49.9134C49.1987 14.56 48.6974 14.6613 48.4094 14.864C48.1214 15.056 47.9774 15.3333 47.9774 15.696C47.9774 16.0053 48.1 16.2507 48.3454 16.432C48.6014 16.6027 48.9534 16.688 49.4014 16.688C49.8067 16.688 50.1587 16.5973 50.4574 16.416C50.756 16.2347 50.9854 15.9947 51.1454 15.696C51.316 15.3973 51.4014 15.0613 51.4014 14.688H51.9294C51.9294 15.776 51.7107 16.6347 51.2734 17.264C50.836 17.8827 50.1374 18.192 49.1774 18.192ZM54.992 18V10H56.672L56.784 11.472V18H54.992ZM60.416 18V13.904H62.208V18H60.416ZM60.416 13.904C60.416 13.264 60.3413 12.7733 60.192 12.432C60.0533 12.08 59.8507 11.8347 59.584 11.696C59.328 11.5573 59.024 11.488 58.672 11.488C58.0747 11.4773 57.6107 11.6747 57.28 12.08C56.9493 12.4853 56.784 13.0667 56.784 13.824H56.112C56.112 12.9813 56.2347 12.2613 56.48 11.664C56.7253 11.056 57.0773 10.5973 57.536 10.288C57.9947 9.968 58.5387 9.808 59.168 9.808C59.808 9.808 60.352 9.936 60.8 10.192C61.2587 10.448 61.6053 10.848 61.84 11.392C62.0853 11.9253 62.208 12.624 62.208 13.488V13.904H60.416ZM69.7993 18L69.7193 16.512V6.8H71.4953V18H69.7993ZM67.1913 18.192C66.4659 18.192 65.8313 18.0213 65.2873 17.68C64.7539 17.328 64.3326 16.8373 64.0233 16.208C63.7246 15.5787 63.5753 14.8427 63.5753 14C63.5753 13.1467 63.7246 12.4107 64.0233 11.792C64.3326 11.1627 64.7539 10.6773 65.2873 10.336C65.8313 9.984 66.4659 9.808 67.1913 9.808C67.8633 9.808 68.4393 9.984 68.9193 10.336C69.4099 10.6773 69.7833 11.1627 70.0393 11.792C70.2953 12.4107 70.4233 13.1467 70.4233 14C70.4233 14.8427 70.2953 15.5787 70.0393 16.208C69.7833 16.8373 69.4099 17.328 68.9193 17.68C68.4393 18.0213 67.8633 18.192 67.1913 18.192ZM67.6393 16.56C68.0446 16.56 68.4019 16.4533 68.7113 16.24C69.0313 16.016 69.2766 15.712 69.4473 15.328C69.6286 14.944 69.7193 14.5013 69.7193 14C69.7193 13.4987 69.6286 13.056 69.4473 12.672C69.2766 12.288 69.0313 11.9893 68.7113 11.776C68.4019 11.5627 68.0393 11.456 67.6233 11.456C67.1966 11.456 66.8179 11.5627 66.4873 11.776C66.1566 11.9893 65.8953 12.288 65.7033 12.672C65.5219 13.056 65.4259 13.4987 65.4153 14C65.4259 14.5013 65.5219 14.944 65.7033 15.328C65.8953 15.712 66.1566 16.016 66.4873 16.24C66.8286 16.4533 67.2126 16.56 67.6393 16.56ZM73.8124 18V6.8H75.7324L81.6844 14.896V6.8H83.5404V18H81.6844L75.6684 9.808V18H73.8124ZM90.747 18L90.667 16.496V13.888C90.667 13.344 90.6083 12.8907 90.491 12.528C90.3843 12.1547 90.203 11.872 89.947 11.68C89.7017 11.4773 89.371 11.376 88.955 11.376C88.571 11.376 88.235 11.456 87.947 11.616C87.659 11.776 87.4137 12.0267 87.211 12.368L85.643 11.792C85.8137 11.44 86.0377 11.1147 86.315 10.816C86.603 10.5067 86.9603 10.2613 87.387 10.08C87.8243 9.89867 88.347 9.808 88.955 9.808C89.7337 9.808 90.3843 9.96267 90.907 10.272C91.4297 10.5707 91.8137 11.0027 92.059 11.568C92.315 12.1333 92.443 12.816 92.443 13.616L92.395 18H90.747ZM88.443 18.192C87.483 18.192 86.7363 17.9787 86.203 17.552C85.6803 17.1253 85.419 16.5227 85.419 15.744C85.419 14.912 85.6963 14.2773 86.251 13.84C86.8163 13.4027 87.6003 13.184 88.603 13.184H90.747V14.56H89.179C88.4643 14.56 87.963 14.6613 87.675 14.864C87.387 15.056 87.243 15.3333 87.243 15.696C87.243 16.0053 87.3657 16.2507 87.611 16.432C87.867 16.6027 88.219 16.688 88.667 16.688C89.0723 16.688 89.4243 16.5973 89.723 16.416C90.0217 16.2347 90.251 15.9947 90.411 15.696C90.5817 15.3973 90.667 15.0613 90.667 14.688H91.195C91.195 15.776 90.9763 16.6347 90.539 17.264C90.1017 17.8827 89.403 18.192 88.443 18.192ZM94.2576 18V10H95.9376L96.0176 11.072C96.263 10.656 96.5776 10.3413 96.9616 10.128C97.3456 9.91467 97.783 9.808 98.2736 9.808C98.9136 9.808 99.4576 9.952 99.9056 10.24C100.354 10.528 100.679 10.9653 100.882 11.552C101.116 10.9867 101.447 10.5547 101.874 10.256C102.3 9.95733 102.802 9.808 103.378 9.808C104.306 9.808 105.02 10.1067 105.522 10.704C106.023 11.2907 106.268 12.1973 106.258 13.424V18H104.482V13.904C104.482 13.264 104.412 12.7733 104.274 12.432C104.135 12.08 103.948 11.8347 103.714 11.696C103.479 11.5573 103.207 11.488 102.898 11.488C102.343 11.4773 101.911 11.6747 101.602 12.08C101.303 12.4853 101.154 13.0667 101.154 13.824V18H99.3616V13.904C99.3616 13.264 99.2923 12.7733 99.1536 12.432C99.0256 12.08 98.8443 11.8347 98.6096 11.696C98.375 11.5573 98.103 11.488 97.7936 11.488C97.239 11.4773 96.807 11.6747 96.4976 12.08C96.199 12.4853 96.0496 13.0667 96.0496 13.824V18H94.2576ZM111.654 18.192C110.875 18.192 110.182 18.016 109.574 17.664C108.976 17.3013 108.502 16.8053 108.15 16.176C107.808 15.5467 107.638 14.8213 107.638 14C107.638 13.1787 107.814 12.4533 108.166 11.824C108.518 11.1947 108.998 10.704 109.606 10.352C110.224 9.98933 110.928 9.808 111.718 9.808C112.432 9.808 113.078 9.99467 113.654 10.368C114.23 10.7307 114.683 11.2587 115.014 11.952C115.355 12.6453 115.526 13.472 115.526 14.432H109.238L109.478 14.208C109.478 14.6987 109.584 15.1253 109.798 15.488C110.011 15.84 110.294 16.112 110.646 16.304C110.998 16.496 111.387 16.592 111.814 16.592C112.304 16.592 112.71 16.4853 113.03 16.272C113.35 16.048 113.6 15.76 113.782 15.408L115.366 16.08C115.142 16.5067 114.854 16.88 114.502 17.2C114.16 17.52 113.75 17.7653 113.27 17.936C112.8 18.1067 112.262 18.192 111.654 18.192ZM109.59 13.28L109.334 13.056H113.846L113.606 13.28C113.606 12.8427 113.51 12.4853 113.318 12.208C113.126 11.92 112.88 11.7067 112.582 11.568C112.294 11.4187 111.99 11.344 111.67 11.344C111.35 11.344 111.03 11.4187 110.71 11.568C110.39 11.7067 110.123 11.92 109.91 12.208C109.696 12.4853 109.59 12.8427 109.59 13.28Z"
+			fill="#111827"
+		/>
+		<defs>
+			<clipPath id="clip0_6645_69725">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+);
+
+const Template = ( props ) => ( args ) => {
+	const [ open, setOpen ] = useState( false );
+
+	return (
+		<Drawer { ...args } open={ open } setOpen={ setOpen }>
+			<Drawer.Panel>
+				<Drawer.Header>
+					<div className="flex items-center justify-between">
+						<Drawer.Title as={ props?.titleTag }>
+							{ props?.title ?? 'Drawer Title' }
+						</Drawer.Title>
+						<Drawer.CloseButton />
+					</div>
+					<Drawer.Description>
+						Lorem ipsum dolor sit amet consectetur. Aliquam sed
+						scelerisque et arcu nibh a massa.
+					</Drawer.Description>
+				</Drawer.Header>
+				<Drawer.Body className="overflow-x-hidden">
+					<div className="w-full h-full flex items-center justify-center border border-border-subtle border-dashed rounded-md bg-background-secondary">
+						<p className="m-0 text-text-secondary">Body content</p>
+					</div>
+				</Drawer.Body>
+				<Drawer.Footer>
+					<Button variant="outline" onClick={ () => setOpen( false ) }>
+						Close
+					</Button>
+					<Button onClick={ () => setOpen( false ) }>Save</Button>
+				</Drawer.Footer>
+			</Drawer.Panel>
+			<Drawer.Backdrop />
+		</Drawer>
+	);
+};
+
+export const Default = Template().bind( {} );
+Default.args = {
+	trigger: <Button>Open Drawer</Button>,
+	design: 'simple',
+	position: 'right',
+	transitionDuration: 0.2,
+	exitOnClickOutside: false,
+	exitOnEsc: true,
+	scrollLock: true,
+};
+
+export const LogoInPlaceOfTheTitle = Template( {
+	title: <Logo className="w-24 h-6" />,
+	titleTag: Fragment,
+} ).bind( {} );
+LogoInPlaceOfTheTitle.args = {
+	trigger: <Button>Open Drawer</Button>,
+	design: 'simple',
+	position: 'right',
+	transitionDuration: 0.2,
+	exitOnClickOutside: false,
+	exitOnEsc: true,
+	scrollLock: false,
+};
+
+const ControlledTemplate = ( args ) => {
+	const [ open, setOpen ] = useState( false );
+
+	return (
+		<>
+			<Button onClick={ () => setOpen( true ) }>
+				Open Controlled Drawer
+			</Button>
+			<Drawer open={ open } setOpen={ setOpen } { ...args }>
+				<Drawer.Panel>
+					<Drawer.Header>
+						<div className="flex items-center justify-between">
+							<Drawer.Title>Drawer Title</Drawer.Title>
+							<Drawer.CloseButton />
+						</div>
+						<Drawer.Description>
+							Lorem ipsum dolor sit amet consectetur. Aliquam sed
+							scelerisque et arcu nibh a massa.
+						</Drawer.Description>
+					</Drawer.Header>
+					<Drawer.Body className="overflow-x-hidden">
+						<div className="w-full h-full mx-5 flex items-center justify-center border border-border-subtle border-dashed rounded-md bg-background-secondary">
+							<p className="m-0 text-text-secondary">
+								Body content
+							</p>
+						</div>
+					</Drawer.Body>
+					<Drawer.Footer>
+						<div className="mr-auto inline-flex items-center">
+							Other option
+						</div>
+						<Button variant="ghost">Details</Button>
+						<Button
+							onClick={ () => setOpen( false ) }
+							variant="outline"
+						>
+							Cancel
+						</Button>
+						<Button variant="primary">Save</Button>
+					</Drawer.Footer>
+				</Drawer.Panel>
+				<Drawer.Backdrop />
+			</Drawer>
+		</>
+	);
+};
+
+export const Controlled = ControlledTemplate.bind( {} );
+Controlled.args = {
+	scrollLock: false,
+};
+
+const UncontrolledTemplate = ( args ) => (
+	<Drawer { ...args }>
+		<Drawer.Panel>
+			{ ( { close } ) => (
+				<>
+					<Drawer.Header>
+						<div className="flex items-center justify-between">
+							<Drawer.Title>Drawer Title</Drawer.Title>
+							<Drawer.CloseButton />
+						</div>
+						<Drawer.Description>
+							Lorem ipsum dolor sit amet consectetur. Aliquam sed
+							scelerisque et arcu nibh a massa.
+						</Drawer.Description>
+					</Drawer.Header>
+					<Drawer.Body className="overflow-x-hidden">
+						<div className="w-full h-full mx-5 flex items-center justify-center border border-border-subtle border-dashed rounded-md bg-background-secondary">
+							<p className="m-0 text-text-secondary">
+								Body content
+							</p>
+						</div>
+					</Drawer.Body>
+					<Drawer.Footer>
+						<div className="mr-auto inline-flex items-center">
+							Other option
+						</div>
+						<Button variant="ghost">Details</Button>
+						<Button onClick={ close } variant="outline">
+							Cancel
+						</Button>
+						<Button variant="primary">Save</Button>
+					</Drawer.Footer>
+				</>
+			) }
+		</Drawer.Panel>
+		<Drawer.Backdrop />
+	</Drawer>
+);
+
+export const Uncontrolled = UncontrolledTemplate.bind( {} );
+Uncontrolled.args = {
+	trigger: <Button>Open Uncontrolled Drawer</Button>,
+	scrollLock: false,
+};
+Uncontrolled.parameters = {
+	docs: { source: { type: 'code' } },
+};
diff --git a/src/components/drawer/index.js b/src/components/drawer/index.js
new file mode 100644
index 00000000..b41a47b4
--- /dev/null
+++ b/src/components/drawer/index.js
@@ -0,0 +1,20 @@
+import Drawer from './drawer';
+import DrawerPanel from './drawer-panel';
+import DrawerHeader from './drawer-header';
+import DrawerTitle from './drawer-title';
+import DrawerDescription from './drawer-description';
+import DrawerBody from './drawer-body';
+import DrawerFooter from './drawer-footer';
+import DrawerCloseButton from './drawer-close-button';
+import DrawerBackdrop from './drawer-backdrop';
+
+export default Object.assign( Drawer, {
+	Panel: DrawerPanel,
+	Header: DrawerHeader,
+	Title: DrawerTitle,
+	Description: DrawerDescription,
+	Body: DrawerBody,
+	CloseButton: DrawerCloseButton,
+	Footer: DrawerFooter,
+	Backdrop: DrawerBackdrop,
+} );
diff --git a/src/components/drawer/readme.md b/src/components/drawer/readme.md
new file mode 100644
index 00000000..8dad4825
--- /dev/null
+++ b/src/components/drawer/readme.md
@@ -0,0 +1,300 @@
+# Drawer Component Documentation
+
+## Description
+
+The `Drawer` component is a versatile, customizable drawer component built with Tailwind CSS. It supports various design, customization and additional properties to suit different use cases. The drawer can be used in controlled or uncontrolled mode, and can be triggered by a button, link, or any other element.
+
+## `Drawer` Props
+
+### `open` (Required for controlled drawer)
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+-   **Description:** Defines whether the drawer is open or closed.
+-   **Note:** This prop is required when using the drawer in controlled mode.
+
+### `setOpen` (Required for controlled drawer)
+
+-   **Type:** `function`
+-   **Description:** A function to set the `open` state of the drawer.
+-   **Note:** This prop is required when using the drawer in controlled mode.
+-   **Example:** `(isOpen) => setOpen(isOpen)`
+
+### `trigger` (Required for uncontrolled drawer)
+
+-   **Type:** `ReactNode`
+-   **Description:** The element that triggers the drawer to open when clicked. This can be a button, link, or any other element.
+-   **Note:** If the setOpen and open props are not provided, the drawer will be uncontrolled and will open when the trigger element is clicked. The onClick handler will be automatically added to the trigger element.
+-   **Example:** `<button>Open Drawer</button>`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the drawer.
+-   **Default:** `""`
+
+### `exitOnClickOutside`
+
+-   **Type:** `boolean`
+-   **Description:** Defines whether the drawer should close when clicked outside the drawer.
+-   **Default:** `false`
+
+### `exitOnEsc`
+
+-   **Type:** `boolean`
+-   **Description:** Defines whether the drawer should close when the `Esc` key is pressed.
+-   **Default:** `true`
+
+### `design`
+
+-   **Type:** `string`
+-   **Description:** Defines the design of the drawer. Options include:
+    -   `"simple"`: A simple drawer with a white background and shadow.
+    -   `"footer-divided"`: A drawer with a footer that has a background color different from the main drawer.
+
+### `position`
+-   **Type:** `string`
+-  **Description:** Defines the position of the drawer. Options include:
+	-   `"left"`: The drawer will be positioned on the left side of the screen.
+	-   `"right"`: The drawer will be positioned on the right side of the screen.
+-   **Default:** `"right"`
+-  **Note:** The default position of the drawer is on the right side of the screen.
+
+### `transitionDuration`
+-  **Type:** `string`
+- **Description:** Defines the duration of the transition when the drawer opens or closes.
+- **Default:** `"200ms"`
+- **Note:** The default duration of the transition is 200ms.
+
+### `scrollLock`
+-  **Type:** `boolean`
+- **Description:** Defines whether the body should be locked when the drawer is open.
+- **Default:** `true`
+- **Note:** When the drawer is open, the body will be locked, and scrolling will be disabled.
+
+## `Drawer.Panel` Props
+
+### `className`
+-   **Type:** `string`
+-  **Description:** Additional custom classes to be added to the panel.
+- **Default:** `""`
+- **Note:** The panel is the main container of the drawer. To change the width, height, or other styles of the drawer, you can add custom classes to the panel.
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the drawer.
+
+## `Drawer.Header` Props
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the header.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the header.
+
+## `Drawer.Title` Props
+
+### `as` (Optional)
+
+-   **Type:** `string` | `React.ElementType`
+-   **Default:** `"h3"`
+-   **Description:** The HTML tag or React component to be used for the title.
+-   **Example:** `"h1"`, `"h2"`, `CustomComponent`
+-   **Note:** The title is usually rendered as an `h3` element by default.
+-   **Example:** `<Drawer.Title as="h1">Drawer Title</Drawer.Title>`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the title.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the title.
+-   **Example:** `"Drawer Title"`
+
+## `Drawer.Description` Props
+
+### `as` (Optional)
+
+-   **Type:** `string` | `React.ElementType`
+-   **Default:** `"p"`
+-   **Description:** The HTML tag or React component to be used for the description.
+-   **Example:** `<Drawer.Description as="h1">Drawer Title</Drawer.Description>`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the description.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the description.
+-   **Example:** `"This is a description."`
+
+## `Drawer.CloseButton` Props (Can be used for controlled and uncontrolled drawers)
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the close button.
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the close button.
+-   **Default:** `"×"`
+
+### `as` (Optional)
+
+-   **Type:** `string` | `React.ElementType`
+-   **Default:** `"button"`
+-   **Description:** The HTML tag or React component to be used for the close button.
+-   **Example:** `"button"`, `"a"`, `CustomComponent`
+-   **Note:** The close button is usually rendered as a `button` element by default.
+
+## `Drawer.Body` Props
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the body.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode`
+-   **Description:** The content to be displayed inside the body.
+
+## `Drawer.Footer`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the body.
+-   **Default:** `""`
+
+### `children`
+
+-   **Type:** `ReactNode` | `ReactNode[]` | `function`
+-   **Description:** The content to be displayed inside the body.
+-   Note: close
+
+## `Drawer.Backdrop`
+
+### `className`
+
+-   **Type:** `string`
+-   **Description:** Additional custom classes to be added to the backdrop.
+-   **Default:** `""`
+
+## Usage
+
+### Controlled Drawer
+
+```jsx
+import React, { useState } from 'react';
+import { Drawer } from '@force-ai/ui';
+
+const MyComponent = () => {
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  return (
+			<div className="flex items-center gap-10">
+				<div className="space-y-2">
+					<div>Drawer with trigger button (Uncontrolled)</div>
+					<Drawer
+						trigger={ <Button>Open Drawer</Button> }
+						exitOnClickOutside={ false }
+						design="footer-divided"
+					>
+						<Drawer.Header>
+							<div className="flex items-center justify-between">
+								<Drawer.Title>Drawer Title</Drawer.Title>
+								<Drawer.CloseButton />
+							</div>
+							<Drawer.Description>
+								Lorem ipsum dolor sit amet consectetur. Aliquam
+								sed scelerisque et arcu nibh a massa.
+							</Drawer.Description>
+						</Drawer.Header>
+						<Drawer.Body>
+							<h1 className="m-0">Drawer Content</h1>
+						</Drawer.Body>
+						<Drawer.Footer>
+							{ ( { close } ) => (
+								<>
+									<div className="mr-auto inline-flex items-center">
+										Other option
+									</div>
+									<Button variant="ghost">Details</Button>
+									<Button onClick={ close } variant="outline">
+										Cancel
+									</Button>
+									<Button variant="primary">Save</Button>
+								</>
+							) }
+						</Drawer.Footer>
+						<Drawer.Backdrop />
+					</Drawer>
+				</div>
+        { /* Another Example */ }
+				<div className="space-y-2">
+					<div>Drawer (Controlled)</div>
+					<Button
+						onClick={ () => {
+							setOpenDrawer( true );
+						} }
+					>
+						Open Drawer
+					</Button>
+					<Drawer
+						open={ openDrawer }
+						setOpen={ setOpenDrawer }
+						exitOnClickOutside={ false }
+						exitOnEsc={ false }
+						design="footer-divided"
+					>
+						<Drawer.Header>
+							<div className="flex items-center justify-between">
+								<Drawer.Title>Drawer Title</Drawer.Title>
+								<Drawer.CloseButton />
+							</div>
+							<Drawer.Description>
+								Lorem ipsum dolor sit amet consectetur. Aliquam
+								sed scelerisque et arcu nibh a massa.
+							</Drawer.Description>
+						</Drawer.Header>
+						<Drawer.Body>
+							<h1 className="m-0">Drawer Content</h1>
+						</Drawer.Body>
+						<Drawer.Footer>
+							<div className="mr-auto inline-flex items-center">
+								Other option
+							</div>
+							<Button variant="ghost">Details</Button>
+							<Button
+								onClick={ () => setOpenDrawer( false ) }
+								variant="outline"
+							>
+								Cancel
+							</Button>
+							<Button variant="primary">Save</Button>
+						</Drawer.Footer>
+						<Drawer.Backdrop />
+					</Drawer>
+				</div>
+  );
+};
+
+```
diff --git a/src/components/editor-input/editor-input-style.js b/src/components/editor-input/editor-input-style.js
new file mode 100644
index 00000000..ad2c1e63
--- /dev/null
+++ b/src/components/editor-input/editor-input-style.js
@@ -0,0 +1,34 @@
+export const editableContentAreaCommonClassNames =
+	'w-full min-h-[1.625rem] [&>p]:w-full [&>p]:m-0';
+
+export const editorCommonClassNames =
+	'border border-solid focus-within:ring-2 focus-within:ring-offset-2 border-field-border hover:border-border-strong focus-within:!border-focus-border focus-within:ring-focus transition duration-150 ease-in-out';
+
+export const editorDisabledClassNames =
+	'bg-field-secondary-background border-field-border-disabled hover:border-field-border-disabled [&_p]:text-badge-color-disabled cursor-not-allowed';
+
+export const editorInputClassNames = {
+	sm: 'py-1.5 px-2 rounded [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.625rem]',
+	md: 'py-2 px-2.5 rounded-md [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.625rem]',
+	lg: 'py-2.5 px-3 rounded-md [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.6875rem]',
+};
+
+export const comboboxDropdownCommonClassNames =
+	'absolute inset-x-0 top-full mt-2 mx-0 mb-0 w-full h-auto overflow-y-auto overflow-x-hidden z-10 bg-background-primary border border-solid border-border-subtle shadow-lg';
+
+export const comboboxDropdownClassNames = {
+	sm: 'p-1.5 rounded-md max-h-[10.75rem]',
+	md: 'p-2 rounded-lg max-h-[13.5rem]',
+	lg: 'p-2 rounded-lg max-h-[13.5rem]',
+};
+
+export const comboboxItemCommonClassNames =
+	'm-0 text-text-primary cursor-pointer';
+
+export const comboboxItemClassNames = {
+	sm: 'p-1.5 rounded text-sm leading-5 font-normal',
+	md: 'p-2 rounded-md text-base leading-6 font-normal',
+	lg: 'p-2 rounded-md text-base leading-6 font-normal',
+};
+
+export const comboboxSelectedItemClassNames = 'bg-button-tertiary-hover';
diff --git a/src/components/editor-input/editor-input.jsx b/src/components/editor-input/editor-input.jsx
new file mode 100644
index 00000000..6a6f3572
--- /dev/null
+++ b/src/components/editor-input/editor-input.jsx
@@ -0,0 +1,140 @@
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { EditorRefPlugin } from '@lexical/react/LexicalEditorRefPlugin';
+import { cn } from '@/utilities/functions';
+import {
+	editableContentAreaCommonClassNames,
+	editorCommonClassNames,
+	editorDisabledClassNames,
+	editorInputClassNames,
+} from './editor-input-style';
+import MentionPlugin from './mention-plugin/mention-plugin';
+import MentionNode from './mention-plugin/mention-node';
+import editorTheme from './editor-theme';
+import EditorPlaceholder from './editor-placeholder';
+import { forwardRef, isValidElement } from 'react';
+
+function onError( error ) {
+	// eslint-disable-next-line no-console
+	console.error( error );
+}
+
+const EMPTY_CONTENT = `{
+    "root": {
+        "children": [
+            {
+                "children": [],
+                "direction": null,
+                "format": "",
+                "indent": 0,
+                "type": "paragraph",
+                "version": 1,
+                "textFormat": 0,
+                "textStyle": ""
+            }
+        ],
+        "direction": null,
+        "format": "",
+        "indent": 0,
+        "type": "root",
+        "version": 1
+    }
+}`;
+
+const EditorInputComponent = (
+	{
+		defaultValue = '',
+		placeholder = 'Press @ to view variable suggestions',
+		onChange,
+		size = 'md',
+		autoFocus = false,
+		options = [],
+		by = 'name',
+		trigger = '@',
+		menuComponent,
+		menuItemComponent,
+		className,
+		disabled = false,
+	},
+	ref
+) => {
+	const initialConfig = {
+		namespace: 'Editor',
+		editorTheme,
+		onError,
+		nodes: [ MentionNode ],
+		editorState: defaultValue ? defaultValue : EMPTY_CONTENT,
+		editable: disabled ? false : true,
+	};
+
+	const handleOnChange = ( editorState, editor ) => {
+		if ( typeof onChange !== 'function' ) {
+			return;
+		}
+		onChange( editorState, editor );
+	};
+
+	let menuComponentToUse;
+	let menuItemComponentToUse;
+	if ( isValidElement( menuComponent ) ) {
+		menuComponentToUse = menuComponent;
+	}
+	if ( isValidElement( menuItemComponent ) ) {
+		menuItemComponentToUse = menuItemComponent;
+	}
+
+	return (
+		<div
+			className={ cn(
+				'relative w-full',
+				editorCommonClassNames,
+				editorInputClassNames[ size ],
+				disabled && editorDisabledClassNames
+			) }
+		>
+			<LexicalComposer initialConfig={ initialConfig }>
+				<div className="relative w-full [&_p]:m-0">
+					<PlainTextPlugin
+						contentEditable={
+							<ContentEditable
+								className={ cn(
+									'editor-content focus-visible:outline-none outline-none',
+									editableContentAreaCommonClassNames,
+									className
+								) }
+							/>
+						}
+						placeholder={
+							<EditorPlaceholder content={ placeholder } />
+						}
+						ErrorBoundary={ LexicalErrorBoundary }
+					/>
+				</div>
+				<HistoryPlugin />
+				<MentionPlugin
+					menuComponent={ menuComponentToUse }
+					menuItemComponent={ menuItemComponentToUse }
+					size={ size }
+					by={ by }
+					optionsArray={ options }
+					trigger={ trigger }
+				/>
+				<OnChangePlugin
+					onChange={ handleOnChange }
+					ignoreSelectionChange
+				/>
+				{ ref && <EditorRefPlugin editorRef={ ref } /> }
+				{ autoFocus && <AutoFocusPlugin /> }
+			</LexicalComposer>
+		</div>
+	);
+};
+const EditorInput = forwardRef( EditorInputComponent );
+EditorInput.displayName = 'EditorInput';
+
+export default EditorInput;
diff --git a/src/components/editor-input/editor-input.stories.jsx b/src/components/editor-input/editor-input.stories.jsx
new file mode 100644
index 00000000..23866629
--- /dev/null
+++ b/src/components/editor-input/editor-input.stories.jsx
@@ -0,0 +1,165 @@
+import EditorInput from './editor-input.jsx';
+
+// Avatar component story configuration
+export default {
+	title: 'Atoms/EditorInput',
+	component: EditorInput,
+	tags: [ 'autodocs' ],
+	argTypes: {
+		by: {
+			name: 'By',
+			description:
+				'The key to be used to display the label of the option in the editor input and in the editor after selecting any mention/tag option.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'name' },
+			},
+		},
+		options: {
+			name: 'Options',
+			description:
+				'Array of options to be displayed in the editor input. Each option should be an object  or string.',
+			control: 'array',
+			table: {
+				type: { summary: 'array' },
+				defaultValue: {
+					summary: [
+						'Red',
+						'Orange',
+						'Yellow',
+						'Green',
+						'Cyan',
+						'Blue',
+						'Purple',
+						'Pink',
+					],
+				},
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Defines if the editor input is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		autoFocus: {
+			name: 'Auto Focus',
+			description:
+				'Defines if the editor input is focused automatically.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
+		onChange: {
+			name: 'On Change',
+			description:
+				'Callback function that is called when the value of the input changes. The function receives the updated value as an argument.',
+			control: 'function',
+			table: {
+				type: { summary: 'object' },
+				defaultValue: {
+					summary: ( value ) => {
+						return value;
+					},
+				},
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the sizes of the editor input.',
+			control: 'select',
+			options: [ 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		defaultValue: {
+			name: 'Default Value',
+			description: 'Default value for the editor input field.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		placeholder: {
+			name: 'Placeholder',
+			description: 'Placeholder text for the editor input field.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: {
+					summary: 'Press @ to view variable suggestions',
+				},
+			},
+		},
+		trigger: {
+			name: 'Trigger',
+			description: 'Trigger text for the editor input field.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '@' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Custom class name to be added to the editor input.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div style={ { maxWidth: '900px', height: '200px' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+const options = [
+	'Red',
+	'Orange',
+	'Yellow',
+	'Green',
+	'Cyan',
+	'Blue',
+	'Purple',
+	'Pink',
+];
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Small = {
+	args: {
+		size: 'sm',
+		options,
+		onChange: ( editorState ) => editorState.toJSON(),
+	},
+};
+
+export const Medium = {
+	args: {
+		size: 'md',
+		options,
+		onChange: ( editorState ) => editorState.toJSON(),
+	},
+};
+
+export const Large = {
+	args: {
+		size: 'lg',
+		options,
+		onChange: ( editorState ) => editorState.toJSON(),
+	},
+};
diff --git a/src/components/editor-input/editor-placeholder.jsx b/src/components/editor-input/editor-placeholder.jsx
new file mode 100644
index 00000000..d380115b
--- /dev/null
+++ b/src/components/editor-input/editor-placeholder.jsx
@@ -0,0 +1,7 @@
+const EditorPlaceholder = ( { content } ) => (
+	<div className="pointer-events-none absolute inset-0 flex items-center justify-start text-field-placeholder">
+		{ content }
+	</div>
+);
+
+export default EditorPlaceholder;
diff --git a/src/components/editor-input/editor-theme.js b/src/components/editor-input/editor-theme.js
new file mode 100644
index 00000000..c6029769
--- /dev/null
+++ b/src/components/editor-input/editor-theme.js
@@ -0,0 +1,72 @@
+const editorTheme = {
+	ltr: 'ltr',
+	rtl: 'rtl',
+	paragraph: 'editor-paragraph',
+	quote: 'editor-quote',
+	heading: {
+		h1: 'editor-heading-h1',
+		h2: 'editor-heading-h2',
+		h3: 'editor-heading-h3',
+		h4: 'editor-heading-h4',
+		h5: 'editor-heading-h5',
+		h6: 'editor-heading-h6',
+	},
+	list: {
+		nested: {
+			listitem: 'editor-nested-listitem',
+		},
+		ol: 'editor-list-ol',
+		ul: 'editor-list-ul',
+		listitem: 'editor-listItem',
+		listitemChecked: 'editor-listItemChecked',
+		listitemUnchecked: 'editor-listItemUnchecked',
+	},
+	hashtag: 'editor-hashtag',
+	image: 'editor-image',
+	link: 'editor-link',
+	text: {
+		bold: 'editor-textBold',
+		code: 'editor-textCode',
+		italic: 'editor-textItalic',
+		strikethrough: 'editor-textStrikethrough',
+		subscript: 'editor-textSubscript',
+		superscript: 'editor-textSuperscript',
+		underline: 'editor-textUnderline',
+		underlineStrikethrough: 'editor-textUnderlineStrikethrough',
+	},
+	code: 'editor-code',
+	codeHighlight: {
+		atrule: 'editor-tokenAttr',
+		attr: 'editor-tokenAttr',
+		boolean: 'editor-tokenProperty',
+		builtin: 'editor-tokenSelector',
+		cdata: 'editor-tokenComment',
+		char: 'editor-tokenSelector',
+		class: 'editor-tokenFunction',
+		'class-name': 'editor-tokenFunction',
+		comment: 'editor-tokenComment',
+		constant: 'editor-tokenProperty',
+		deleted: 'editor-tokenProperty',
+		doctype: 'editor-tokenComment',
+		entity: 'editor-tokenOperator',
+		function: 'editor-tokenFunction',
+		important: 'editor-tokenVariable',
+		inserted: 'editor-tokenSelector',
+		keyword: 'editor-tokenAttr',
+		namespace: 'editor-tokenVariable',
+		number: 'editor-tokenProperty',
+		operator: 'editor-tokenOperator',
+		prolog: 'editor-tokenComment',
+		property: 'editor-tokenProperty',
+		punctuation: 'editor-tokenPunctuation',
+		regex: 'editor-tokenVariable',
+		selector: 'editor-tokenSelector',
+		string: 'editor-tokenSelector',
+		symbol: 'editor-tokenProperty',
+		tag: 'editor-tokenProperty',
+		url: 'editor-tokenOperator',
+		variable: 'editor-tokenVariable',
+	},
+};
+
+export default editorTheme;
diff --git a/src/components/editor-input/index.js b/src/components/editor-input/index.js
new file mode 100644
index 00000000..57b6ec90
--- /dev/null
+++ b/src/components/editor-input/index.js
@@ -0,0 +1 @@
+export { default } from './editor-input';
diff --git a/src/components/editor-input/mention-plugin/mention-combobox.jsx b/src/components/editor-input/mention-plugin/mention-combobox.jsx
new file mode 100644
index 00000000..074a14b0
--- /dev/null
+++ b/src/components/editor-input/mention-plugin/mention-combobox.jsx
@@ -0,0 +1,47 @@
+import { cn } from '@/utilities/functions';
+import {
+	comboboxDropdownClassNames,
+	comboboxDropdownCommonClassNames,
+	comboboxItemClassNames,
+	comboboxItemCommonClassNames,
+	comboboxSelectedItemClassNames,
+} from '../editor-input-style';
+import { forwardRef } from 'react';
+
+const EditorComboboxWrapper = ( { size, className, children } ) => (
+	<ul
+		role="menu"
+		className={ cn(
+			comboboxDropdownCommonClassNames,
+			comboboxDropdownClassNames[ size ],
+			className
+		) }
+	>
+		{ children }
+	</ul>
+);
+
+const EditorComboboxItem = forwardRef(
+	( { size, children, selected = false, className, ...props }, ref ) => (
+		<li
+			role="option"
+			ref={ ref }
+			className={ cn(
+				comboboxItemCommonClassNames,
+				comboboxItemClassNames[ size ],
+				selected && comboboxSelectedItemClassNames,
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</li>
+	)
+);
+EditorComboboxItem.displayName = 'Item';
+
+const EditorCombobox = Object.assign( EditorComboboxWrapper, {
+	Item: EditorComboboxItem,
+} );
+
+export default EditorCombobox;
diff --git a/src/components/editor-input/mention-plugin/mention-component.jsx b/src/components/editor-input/mention-plugin/mention-component.jsx
new file mode 100644
index 00000000..c7d1c50d
--- /dev/null
+++ b/src/components/editor-input/mention-plugin/mention-component.jsx
@@ -0,0 +1,58 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNodeByKey } from 'lexical';
+import { Badge } from '@/components';
+
+const mapSizeToBadgeSize = ( size ) => {
+	switch ( size ) {
+		case 'sm':
+			return 'xs';
+		case 'md':
+			return 'sm';
+		case 'lg':
+			return 'md';
+		default:
+			return 'sm';
+	}
+};
+
+const MentionComponent = ( { data, by, size, nodeKey } ) => {
+	const [ editor ] = useLexicalComposerContext();
+	const disabled = ! editor.isEditable();
+
+	const removeMention = ( event ) => {
+		event.stopPropagation();
+		event.preventDefault();
+
+		if ( disabled ) {
+			return;
+		}
+
+		editor.update( () => {
+			const node = $getNodeByKey( nodeKey );
+			if ( ! node ) {
+				return;
+			}
+			node.remove();
+		} );
+	};
+
+	let renderLabel = data;
+	if ( typeof data === 'object' ) {
+		renderLabel = data[ by ];
+	}
+
+	return (
+		<Badge
+			className="inline-flex"
+			type="rounded"
+			size={ mapSizeToBadgeSize( size ) }
+			label={ renderLabel }
+			icon={ null }
+			closable={ true }
+			onClose={ removeMention }
+			disabled={ disabled }
+		/>
+	);
+};
+
+export default MentionComponent;
diff --git a/src/components/editor-input/mention-plugin/mention-hooks.js b/src/components/editor-input/mention-plugin/mention-hooks.js
new file mode 100644
index 00000000..398f5b15
--- /dev/null
+++ b/src/components/editor-input/mention-plugin/mention-hooks.js
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+
+const mentionsCache = new Map();
+
+function useMentionLookupService( options, mentionString, by = 'name' ) {
+	const [ results, setResults ] = useState( [] );
+
+	useEffect( () => {
+		if ( mentionString === null ) {
+			setResults( [] );
+			return;
+		}
+
+		const cachedResults = mentionsCache.get( mentionString );
+		if ( cachedResults === null ) {
+			return;
+		} else if ( cachedResults !== undefined ) {
+			setResults( cachedResults );
+			return;
+		}
+
+		mentionsCache.set( mentionString, null );
+		lookupService.search(
+			options,
+			mentionString,
+			( newResults ) => {
+				mentionsCache.set( mentionString, newResults );
+				setResults( newResults );
+			},
+			by
+		);
+	}, [ mentionString ] );
+
+	return results;
+}
+
+const lookupService = {
+	search( options, string, callback, by ) {
+		setTimeout( () => {
+			const results = options.filter( ( mention ) => {
+				if ( typeof mention === 'string' ) {
+					return mention.toLowerCase().includes( string.toLowerCase() );
+				}
+
+				const strValue = mention?.[ by ]?.toString();
+				if ( ! strValue ) {
+					return false;
+				}
+				return strValue.toLowerCase().includes( string.toLowerCase() );
+			} );
+			callback( results );
+		}, 500 );
+	},
+};
+
+export default useMentionLookupService;
diff --git a/src/components/editor-input/mention-plugin/mention-node.jsx b/src/components/editor-input/mention-plugin/mention-node.jsx
new file mode 100644
index 00000000..c4fb7089
--- /dev/null
+++ b/src/components/editor-input/mention-plugin/mention-node.jsx
@@ -0,0 +1,74 @@
+import { DecoratorNode } from 'lexical';
+import MentionComponent from './mention-component';
+
+class MentionNode extends DecoratorNode {
+	__data;
+	__by;
+	__size;
+
+	constructor( data, by, size, key ) {
+		super( key );
+		this.__data = data;
+		this.__by = by;
+		this.__size = size;
+	}
+
+	static getType() {
+		return 'mention';
+	}
+
+	static clone( node ) {
+		return new MentionNode( node.__data, node.__by, node.__size, node.__key );
+	}
+
+	static importJSON( serializeNode ) {
+		const node = $createMentionNode(
+			serializeNode.data,
+			serializeNode.by,
+			serializeNode.size
+		);
+		return node;
+	}
+
+	createDOM() {
+		return document.createElement( 'span' );
+	}
+
+	updateDOM() {
+		return false;
+	}
+
+	exportDOM() {
+		const element = document.createElement( 'span' );
+
+		return { element };
+	}
+
+	exportJSON() {
+		return {
+			type: MentionNode.getType(),
+			data: this.__data,
+			by: this.__by,
+			size: this.__size,
+			version: 1,
+		};
+	}
+
+	decorate() {
+		return (
+			<MentionComponent
+				data={ this.__data }
+				by={ this.__by }
+				size={ this.__size }
+				nodeKey={ this.__key }
+			/>
+		);
+	}
+}
+
+export const $createMentionNode = ( data, by, size ) =>
+	new MentionNode( data, by, size );
+
+export const $isMentionNode = ( node ) => node instanceof MentionNode;
+
+export default MentionNode;
diff --git a/src/components/editor-input/mention-plugin/mention-option-item.js b/src/components/editor-input/mention-plugin/mention-option-item.js
new file mode 100644
index 00000000..41d2861d
--- /dev/null
+++ b/src/components/editor-input/mention-plugin/mention-option-item.js
@@ -0,0 +1,10 @@
+class OptionItem {
+	data;
+	ref = { current: null };
+
+	constructor( data ) {
+		this.data = data;
+	}
+}
+
+export default OptionItem;
diff --git a/src/components/editor-input/mention-plugin/mention-plugin.jsx b/src/components/editor-input/mention-plugin/mention-plugin.jsx
new file mode 100644
index 00000000..99fb30ea
--- /dev/null
+++ b/src/components/editor-input/mention-plugin/mention-plugin.jsx
@@ -0,0 +1,139 @@
+import { useCallback, useState, useMemo } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { $createMentionNode } from './mention-node';
+import OptionItem from './mention-option-item';
+import useMentionLookupService from './mention-hooks';
+import EditorCombobox from './mention-combobox';
+
+const MentionPlugin = ( {
+	optionsArray,
+	by = 'name',
+	size = 'md',
+	trigger = '@', // Default trigger value
+	menuComponent: MenuComponent = EditorCombobox,
+	menuItemComponent: MenuItemComponent = EditorCombobox.Item,
+} ) => {
+	// Define PUNCTUATION and other necessary variables inside the component
+	const PUNCTUATION =
+		'\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+
+	const TRIGGERS = [ trigger ].join( '' ); // Use the trigger prop dynamically
+
+	const VALID_CHARS = '[^' + TRIGGERS + PUNCTUATION + '\\s]';
+
+	const VALID_JOINS =
+		'(?:' +
+		'\\.[ |$]|' + // E.g. "r. " in "Mr. Smith"
+		' |' + // E.g. " " in "Josh Duck"
+		'[' +
+		PUNCTUATION +
+		']|' + // E.g. "-' in "Salier-Hellendag"
+		')';
+
+	const LENGTH_LIMIT = 75;
+
+	const AtSignMentionsRegex = new RegExp(
+		`(^|\\s|\\()([${ TRIGGERS }]((?:${ VALID_CHARS }${ VALID_JOINS }){0,${ LENGTH_LIMIT }}))$`
+	);
+
+	// 50 is the longest alias length limit
+	const ALIAS_LENGTH_LIMIT = 50;
+
+	// Regex used to match alias
+	const AtSignMentionsRegexAliasRegex = new RegExp(
+		`(^|\\s|\\()([${ TRIGGERS }]((?:${ VALID_CHARS }){0,${ ALIAS_LENGTH_LIMIT }}))$`
+	);
+
+	// Define checkForAtSignMentions function inside the component where it has access to the regex
+	const checkForAtSignMentions = ( text ) => {
+		let match = AtSignMentionsRegex.exec( text );
+
+		if ( match === null ) {
+			match = AtSignMentionsRegexAliasRegex.exec( text );
+		}
+		if ( match !== null ) {
+			// The strategy ignores leading whitespace but we need to know its
+			// length to add it to the leadOffset
+			const maybeLeadingWhitespace = match[ 1 ];
+
+			const matchingString = match[ 3 ];
+			if ( matchingString.length >= 0 ) {
+				return {
+					leadOffset: match.index + maybeLeadingWhitespace.length,
+					matchingString,
+					replaceableString: match[ 2 ],
+				};
+			}
+		}
+		return null;
+	};
+
+	const [ editor ] = useLexicalComposerContext();
+	const [ queryString, setQueryString ] = useState( null );
+
+	// Use the hook to get lookup results
+	const results = useMentionLookupService( optionsArray, queryString, by );
+
+	const onSelectOption = useCallback(
+		( selectedOption, nodeToReplace, closeMenu ) => {
+			editor.update( () => {
+				const mentionNode = $createMentionNode(
+					selectedOption.data,
+					by,
+					size
+				);
+				if ( nodeToReplace ) {
+					nodeToReplace.replace( mentionNode );
+				}
+				closeMenu();
+			} );
+		},
+		[ editor ]
+	);
+
+	const options = useMemo( () => {
+		return results.map( ( result ) => new OptionItem( result ) );
+	}, [ editor, results ] );
+
+	return (
+		<LexicalTypeaheadMenuPlugin
+			onQueryChange={ setQueryString }
+			onSelectOption={ onSelectOption }
+			triggerFn={ checkForAtSignMentions } // Use the locally defined function
+			options={ options }
+			menuRenderFn={ (
+				anchorElementRef,
+				{ selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }
+			) => {
+				return (
+					anchorElementRef.current &&
+					!! options?.length && (
+						<MenuComponent size={ size }>
+							{ options.map( ( option, index ) => (
+								<MenuItemComponent
+									key={ index }
+									ref={ option.ref }
+									size={ size }
+									selected={ index === selectedIndex }
+									onMouseEnter={ () => {
+										setHighlightedIndex( index );
+									} }
+									onClick={ () =>
+										selectOptionAndCleanUp( option )
+									}
+								>
+									{ typeof option.data === 'string'
+										? option.data
+										: option.data?.[ by ] }
+								</MenuItemComponent>
+							) ) }
+						</MenuComponent>
+					)
+				);
+			} }
+		/>
+	);
+};
+
+export default MentionPlugin;
diff --git a/src/components/editor-input/readme.md b/src/components/editor-input/readme.md
new file mode 100644
index 00000000..92a84369
--- /dev/null
+++ b/src/components/editor-input/readme.md
@@ -0,0 +1,221 @@
+# Editor Input
+
+## Description
+The Editor Input component is a text input field that allows users to input text as well as tags/mentions from the combobox.
+
+## Props
+
+### defaultValue
+- **Type:** `json string`
+- **Default:** `""`
+- Description: The default value of the editor input field. The value should be a JSON string.
+- Example:
+```json
+{
+    "root": {
+        "children": [
+            {
+                "children": [
+                    {
+                        "detail": 0,
+                        "format": 0,
+                        "mode": "normal",
+                        "style": "",
+                        "text": "Employee name: ",
+                        "type": "text",
+                        "version": 1
+                    },
+                    {
+                        "type": "mention",
+                        "data": {
+                            "id": 3,
+                            "label": "Catherine"
+                        },
+                        "version": 1
+                    }
+                ],
+                "direction": "ltr",
+                "format": "",
+                "indent": 0,
+                "type": "paragraph",
+                "version": 1,
+                "textFormat": 0,
+                "textStyle": ""
+            }
+        ],
+        "direction": "ltr",
+        "format": "",
+        "indent": 0,
+        "type": "root",
+        "version": 1
+    }
+}
+```
+
+
+### onChange
+- **Type:** `function`
+- **params:** `editorState` & `editor`
+- **Description:** Callback function that is called when the value of the input changes. The function receives the updated value as an argument.
+
+### placeholder
+- **Type:** `string`
+- **Default:** `Press @ to view variable suggestions`
+- **Description:** Placeholder text for the editor input field.
+
+### size
+- **Type:** `string`
+- **Default:** `"sm"`
+- **Description:** Defines the size of the editor input field
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+
+### options
+- **Type:** `array`
+- **Default:** `[]`
+- **Description:** Array of options to be displayed in the combobox. Each option should be an object  or string.
+
+### by
+- **Type:** `string`
+- **Default:** `"name"`
+- **Description:** The key to be used to display the label of the option in the combobox and in the editor after selecting any mention/tag option.
+
+### autoFocus
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** If `true`, the editor input field will be focused when the component is mounted.
+
+### className
+- **Type:** `string`
+- **Default:** `""`
+- **Description:** Additional classes to be added to the editor input field.
+- Example:
+```jsx
+    <EditorInput
+        ...
+        className="..."
+    />
+```
+
+### disabled
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** If `true`, the editor input field will be disabled.
+- Example:
+```jsx
+    <EditorInput
+        ...
+        disabled
+    />
+```
+
+### menuComponent
+- **Type:** `React.ReactNode`
+- **Description:** Custom component to be rendered in the combobox. The function should return a React component.
+- usage:
+```jsx
+    const MenuComponent = ( { size, className, children } ) => (
+    	<ul
+    		className="..."
+    	>
+    		{ children }
+    	</ul>
+    );
+
+...
+    
+    <EditorInput
+        ...
+        menuComponent={MenuComponent}
+    />
+```
+
+### menuItemComponent
+- **Type:** `React.ReactNode`
+- **Description:** Custom component to be rendered for each option in the combobox. The function should return a React component.
+- usage:
+```jsx
+    const MenuItemComponent = forwardRef(
+    	( { size, children, selected = false, className, ...props }, ref ) => (
+    		<li
+    			ref={ ref }
+    			className="..."
+    			{ ...props }
+    		>
+    			{ children }
+    		</li>
+    	)
+    );
+
+...
+
+    <EditorInput
+        ...
+        menuItemComponent={MenuItemComponent}
+    />
+```
+
+### Access editor ref
+To access the editor ref, you can use the `useRef` hook. The editor ref can be accessed using the `current` property of the ref object.
+
+```jsx
+import { useRef } from 'react';
+import { EditorInput } from '@bsf/force-ui';
+
+const App = () => {
+    const editorRef = useRef();
+
+    return (
+        <div className="max-w-sm my-10">
+            <EditorInput
+                ref={ editorRef }
+                ...
+            />
+        </div>
+    );
+};
+```
+
+
+#### usage
+```jsx
+import { EditorInput } from '@bsf/force-ui';
+
+const App = () => (
+  <div className="max-w-sm my-10">
+    <EditorInput
+        size="md"
+        by='label'
+        options={ [
+            {
+                id: 1,
+                label: 'Anton'
+            },
+            {
+                id: 2,
+                label: 'Boris'
+            },
+            {
+                id: 3,
+                label: 'Catherine'
+            },
+            {
+                id: 4,
+                label: 'Dmitri'
+            },
+            {
+                id: 5,
+                label: 'Felix'
+            },
+            {
+                id: 6,
+                label: 'Gina'
+            }
+        ] }
+        onChange={ ( editorState ) =>
+            console.log( editorState.toJSON() )
+        }
+    />
+  </div>
+);
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 00000000..494a1f67
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,28 @@
+export { default as Button } from './button/index';
+export { default as Switch } from './switch/index';
+export { default as Checkbox } from './checkbox/index';
+export { default as RadioButton } from './radio-button-group/index';
+export { default as Badge } from './badge/index';
+export { default as TextArea } from './textarea/index';
+export { default as Avatar } from './avatar/index';
+export { default as Input } from './input/index';
+export { default as Label } from './label/index';
+export { default as Title } from './title/index';
+export { default as Loader } from './loader/index';
+export { default as ProgressBar } from './progress-bar/index';
+export { default as Tooltip } from './tooltip/index';
+export { default as ButtonGroup } from './button-group/index';
+export { default as Tabs } from './tabs/index';
+export { default as Select } from './select/index';
+export * from './toaster/index';
+export { default as Container } from './container/index';
+export { default as Alert } from './alert/index';
+export { default as EditorInput } from './editor-input/index';
+export { default as ProgressSteps } from './progress-steps/index';
+export { default as Skeleton } from './skeleton/index';
+export { default as Menu } from './menu-item/index';
+export { default as Sidebar } from './sidebar/index';
+export { default as Breadcrumb } from './breadcrumb/index';
+export { default as Dialog } from './dialog/index';
+export { default as Topbar } from './topbar/index';
+export { default as Drawer } from './drawer/index';
diff --git a/src/components/input/index.js b/src/components/input/index.js
new file mode 100644
index 00000000..aa4c8ce5
--- /dev/null
+++ b/src/components/input/index.js
@@ -0,0 +1 @@
+export { default } from './input.jsx';
diff --git a/src/components/input/input.jsx b/src/components/input/input.jsx
new file mode 100644
index 00000000..79ca22bd
--- /dev/null
+++ b/src/components/input/input.jsx
@@ -0,0 +1,205 @@
+import { useState, useCallback, useMemo, forwardRef } from 'react';
+import { nanoid } from 'nanoid';
+import { cn } from '@/utilities/functions';
+import { Upload } from 'lucide-react';
+
+const InputComponent = (
+	{
+		id,
+		type = 'text',
+		defaultValue = '',
+		value,
+		size = 'sm', // sm, md, lg
+		className = '',
+		disabled = false,
+		onChange = () => {},
+		error = false,
+		onError = () => {},
+		prefix = null,
+		suffix = null,
+		...props
+	},
+	ref
+) => {
+	const inputId = useMemo( () => id || `input-${ type }-${ nanoid() }`, [ id ] );
+	const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
+	const [ inputValue, setInputValue ] = useState( defaultValue );
+	const [ selectedFile, setSelectedFile ] = useState( null );
+
+	const getValue = useCallback(
+		() => ( isControlled ? value : inputValue ),
+		[ isControlled, value, inputValue ]
+	);
+
+	const handleChange = ( event ) => {
+		if ( disabled ) {
+			return;
+		}
+
+		let newValue;
+		if ( type === 'file' ) {
+			newValue = event.target.files;
+			if ( newValue.length > 0 ) {
+				setSelectedFile( newValue[ 0 ].name );
+			} else {
+				setSelectedFile( null );
+			}
+		} else {
+			newValue = event.target.value;
+		}
+
+		if ( ! isControlled && type !== 'file' ) {
+			setInputValue( newValue );
+		}
+
+		if ( typeof onChange !== 'function' ) {
+			return;
+		}
+		onChange( newValue );
+	};
+
+	const baseClasses =
+		'border border-solid border-border-subtle bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary w-full focus:outline-none';
+	const sizeClasses = {
+		sm: 'px-2 py-2 rounded',
+		md: 'px-2.5 py-2.5 rounded-md',
+		lg: 'px-3 py-3 rounded-lg',
+	};
+	const textClasses = {
+		sm: 'text-xs',
+		md: 'text-base',
+		lg: 'text-base',
+	};
+	const sizeClassesWithPrefix = {
+		sm: prefix ? 'pl-8' : '',
+		md: prefix ? 'pl-9' : '',
+		lg: prefix ? 'pl-10' : '',
+	};
+	const sizeClassesWithSuffix = {
+		sm: suffix ? 'pr-8' : '',
+		md: suffix ? 'pr-9' : '',
+		lg: suffix ? 'pr-10' : '',
+	};
+
+	const hoverClasses = disabled
+		? 'hover:border-border-disabled'
+		: 'hover:border-border-strong';
+	const focusClasses =
+		'focus:border-focus-border focus:ring-2 focus:ring-toggle-on focus:ring-offset-2';
+	const errorClasses = error
+		? 'focus:border-focus-error-border focus:ring-field-color-error bg-field-background-error'
+		: '';
+	const errorFileClasses = error
+		? 'focus:border-focus-error-border focus:ring-field-color-error'
+		: '';
+	const disabledClasses = disabled
+		? 'border-border-disabled bg-field-background-disabled cursor-not-allowed text-text-disabled'
+		: '';
+	const disabledUploadFileClasses = disabled
+		? 'border-border-disabled cursor-not-allowed text-text-disabled file:text-text-tertiary'
+		: '';
+	const iconClasses =
+		'font-normal placeholder-text-tertiary text-text-primary pointer-events-none absolute inset-y-0 flex flex-1 items-center [&>svg]:h-4 [&>svg]:w-4';
+	const uploadIconClasses = disabled
+		? 'font-normal placeholder-text-tertiary text-icon-disabled pointer-events-none absolute inset-y-0 flex flex-1 items-center'
+		: 'font-normal placeholder-text-tertiary text-field-placeholder pointer-events-none absolute inset-y-0 flex flex-1 items-center';
+
+	const uploadIconSizeClasses = {
+		sm: '[&>svg]:h-4 [&>svg]:w-4',
+		md: '[&>svg]:h-5 [&>svg]:w-5',
+		lg: '[&>svg]:h-6 [&>svg]:w-6',
+	};
+
+	const getPrefix = () => {
+		if ( ! prefix ) {
+			return null;
+		}
+		return (
+			<div className={ cn( iconClasses, 'left-0 pl-3', textClasses[ size ] ) }>
+				{ prefix }
+			</div>
+		);
+	};
+
+	const getSuffix = () => {
+		if ( ! suffix ) {
+			return null;
+		}
+		return (
+			<div className={ cn( iconClasses, 'right-0 pr-3', textClasses[ size ] ) }>
+				{ suffix }
+			</div>
+		);
+	};
+
+	const fileClasses = selectedFile
+		? 'file:border-0 file:bg-transparent'
+		: 'text-text-tertiary file:border-0 file:bg-transparent';
+
+	if ( type === 'file' ) {
+		return (
+			<div className={ cn( 'relative flex focus-within:z-10', className ) }>
+				<input
+					ref={ ref }
+					id={ inputId }
+					type="file"
+					className={ cn(
+						baseClasses,
+						disabledUploadFileClasses,
+						sizeClasses[ size ],
+						textClasses[ size ],
+						focusClasses,
+						hoverClasses,
+						errorFileClasses,
+						fileClasses
+					) }
+					disabled={ disabled }
+					onChange={ handleChange }
+					onInvalid={ onError }
+					{ ...props }
+				/>
+				<div
+					className={ cn(
+						uploadIconClasses,
+						'right-0 pr-3',
+						uploadIconSizeClasses[ size ]
+					) }
+				>
+					<Upload />
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className={ cn( 'relative flex focus-within:z-10', className ) }>
+			{ getPrefix() }
+			<input
+				ref={ ref }
+				id={ inputId }
+				type={ type }
+				className={ cn(
+					baseClasses,
+					disabledClasses,
+					sizeClasses[ size ],
+					textClasses[ size ],
+					sizeClassesWithPrefix[ size ],
+					sizeClassesWithSuffix[ size ],
+					focusClasses,
+					hoverClasses,
+					errorClasses
+				) }
+				disabled={ disabled }
+				onChange={ handleChange }
+				onInvalid={ onError }
+				value={ getValue() }
+				{ ...props }
+			/>
+			{ getSuffix() }
+		</div>
+	);
+};
+const Input = forwardRef( InputComponent );
+Input.displayName = 'Input';
+
+export default Input;
diff --git a/src/components/input/input.stories.js b/src/components/input/input.stories.js
new file mode 100644
index 00000000..9f29b21e
--- /dev/null
+++ b/src/components/input/input.stories.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import Input from './input.jsx';
+import { Phone } from 'lucide-react';
+
+export default {
+	title: 'Atoms/Input',
+	component: Input,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		type: {
+			name: 'Type',
+			description: 'Defines the input type.',
+			control: 'select',
+			options: [ 'text', 'password', 'email', 'file' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'text' },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the input.',
+			control: 'select',
+			options: [ 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Defines if the input is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		error: {
+			name: 'Error',
+			description: 'Defines if the input has an error state.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		defaultValue: {
+			name: 'Default Value',
+			description: 'Initial value of the input.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		prefix: {
+			name: 'Prefix',
+			description: 'Prefix element for the input.',
+			control: 'text',
+			table: {
+				type: { summary: 'ReactNode' },
+			},
+		},
+		suffix: {
+			name: 'Suffix',
+			description: 'Suffix element for the input.',
+			control: 'text',
+			table: {
+				type: { summary: 'ReactNode' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		onChange: {
+			name: 'On Change Event',
+			description: 'Callback function for change event',
+			control: 'function',
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+		},
+		onError: {
+			name: 'On Error Event',
+			description: 'Callback function for error event',
+			control: 'function',
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+		},
+	},
+};
+
+// Basic Input
+export const Basic = {
+	args: {
+		type: 'text',
+		size: 'sm',
+		disabled: false,
+		error: false,
+		defaultValue: 'Basic Input',
+	},
+};
+
+// Input with Error
+export const ErrorState = {
+	args: {
+		type: 'text',
+		size: 'sm',
+		disabled: false,
+		error: true,
+		defaultValue: 'Input with Error',
+	},
+};
+
+// Disabled Input
+export const Disabled = {
+	args: {
+		type: 'text',
+		size: 'sm',
+		disabled: true,
+		error: false,
+		defaultValue: 'Disabled Input',
+	},
+};
+
+// File Input
+export const FileInput = {
+	args: {
+		type: 'file',
+		size: 'md',
+		disabled: false,
+		error: false,
+	},
+};
+
+// Input with Prefix and Suffix
+export const WithPrefixSuffix = {
+	args: {
+		type: 'text',
+		size: 'md',
+		disabled: false,
+		error: false,
+		prefix: <Phone />,
+		suffix: '#',
+		defaultValue: '',
+	},
+};
diff --git a/src/components/input/readme.md b/src/components/input/readme.md
new file mode 100644
index 00000000..4837cd6a
--- /dev/null
+++ b/src/components/input/readme.md
@@ -0,0 +1,90 @@
+# Input
+
+## Description
+
+Easily create input with different styles using this component based on React and styled with Tailwind CSS. It is useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
+
+## Props
+
+### type
+- **Type:** `string`
+- **Default:** `"text"`
+- **Description:** Type of the input field - tel/number/url/email/text/password/file
+
+### value
+- **Type:** `string`
+- **Default:** `""`
+- **Description:** The value of the input field. Not applicable for `type="file"`.
+
+### size
+- **Type:** `string`
+- **Default:** `"sm"`
+- **Description:** Defines the size of the input field
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+
+### className
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the input.
+
+### disabled
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Disabled State of the input field
+    - `true`
+    - `false`
+
+### onChange
+- **Type:** `function`
+- **Description:** Callback function triggered when the input value changes. For `type="file"`, it returns the selected file(s).
+
+### error
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** If true, applies error styles to the input.
+
+### prefix
+- **Type:** `ReactNode`
+- **Description:** A prefix icon or element that appears inside the input field.
+
+### suffix
+- **Type:** `ReactNode`
+- **Description:** A suffix icon or element that appears inside the input field.
+
+### inputProps
+- **Type:** `object`
+- **Description:** Any additional props will be spread onto the input element. Ex, given below
+    - `required`
+    - `placeholder`
+    - `cols`
+    - `rows`
+
+## File Input Behavior
+- When `type="file"` is specified:
+- The default text "No file chosen" is replaced with the name of the selected file.
+- The text color changes when a file is selected.
+- The component handles file selection, and the onChange callback returns the selected file(s).
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { Input } from '@bsf/force-ui';
+
+const App = () => (
+  <div>
+    <Input inputProps={
+        {
+            required: true,
+            placeholder: "Hello There"
+        }} size="sm"/>
+    <Input size="lg" value={textval} onChange={((e)=>{console.log(e.target.value)})}/>
+    <Input disabled={ true } size="md"/>
+    <Input type="file" size="md" onChange={handleFileChange} />
+  </div>
+);
+
+export default App;
+```
diff --git a/src/components/label/index.js b/src/components/label/index.js
new file mode 100644
index 00000000..11bff63b
--- /dev/null
+++ b/src/components/label/index.js
@@ -0,0 +1 @@
+export { default } from './label.jsx';
diff --git a/src/components/label/label.jsx b/src/components/label/label.jsx
new file mode 100644
index 00000000..722c17d3
--- /dev/null
+++ b/src/components/label/label.jsx
@@ -0,0 +1,72 @@
+import { cn } from '@/utilities/functions';
+import React, { forwardRef } from 'react';
+
+/**
+ * Label component.
+ */
+
+const Label = forwardRef(
+	(
+		{
+			children = null,
+			tag = 'label',
+			size = 'sm', // xs, sm, md
+			className = '',
+			variant = 'neutral', // neutral, help, error, disabled
+			required = false,
+			...props
+		},
+		ref
+	) => {
+		// Base classes. - Mandatory classes.
+		const baseClasses =
+			'font-medium text-field-label flex items-center gap-0.5';
+
+		// Size classes - Based on the size prop.
+		const sizeClasses = {
+			xs: 'text-xs [&>*]:text-xs [&>svg]:h-3 [&>svg]:w-3',
+			sm: 'text-sm [&>*]:text-sm [&>svg]:h-4 [&>svg]:w-4',
+			md: 'text-base [&>*]:text-base [&>svg]:h-5 [&>svg]:w-5',
+		};
+
+		// Variant classes - Based on the variant prop.
+		const variantClasses = {
+			neutral: 'text-field-label [&>*]:text-field-label',
+			help: 'text-field-helper [&>*]:text-field-helper',
+			error: 'text-support-error [&>*]:text-support-error',
+			disabled:
+				'text-field-color-disabled disabled cursor-not-allowed [&>*]:text-field-color-disabled',
+		};
+
+		if ( ! children ) {
+			return null;
+		}
+
+		let requiredClasses = '';
+
+		if ( required ) {
+			requiredClasses =
+				"after:content-['*'] after:text-field-required after:ml-0.5";
+		}
+
+		const Tag = tag;
+
+		return (
+			<Tag
+				ref={ ref }
+				className={ cn(
+					baseClasses,
+					sizeClasses[ size ],
+					variantClasses[ variant ],
+					requiredClasses,
+					className
+				) }
+				{ ...props }
+			>
+				{ children }
+			</Tag>
+		);
+	}
+);
+
+export default Label;
diff --git a/src/components/label/label.stories.js b/src/components/label/label.stories.js
new file mode 100644
index 00000000..6e370cfc
--- /dev/null
+++ b/src/components/label/label.stories.js
@@ -0,0 +1,110 @@
+import Label from './label.jsx';
+
+export default {
+	title: 'Atoms/Label',
+	component: Label,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the label.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the label.',
+			control: 'select',
+			options: [ 'neutral', 'help', 'error', 'disabled' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'neutral' },
+			},
+		},
+		required: {
+			name: 'Required',
+			description: 'Defines if the label is required.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		tag: {
+			name: 'Tag',
+			description: 'Defines the tag of the button.',
+			control: 'select',
+			// Add 6 to 10 closable tags
+			options: [ 'label', 'p' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'label' },
+			},
+		},
+		children: {
+			name: 'Children',
+			description: 'The label text or content.',
+			control: 'object',
+			table: {
+				type: { summary: 'onject' },
+				defaultValue: { summary: 'Label Text' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+// Basic Label
+export const Basic = {
+	args: {
+		size: 'sm',
+		variant: 'neutral',
+		required: false,
+		children: 'Basic Label',
+	},
+};
+
+// Required Label
+export const Required = {
+	args: {
+		size: 'sm',
+		variant: 'neutral',
+		required: true,
+		children: 'Required Label',
+	},
+};
+
+// Error Variant
+export const Error = {
+	args: {
+		size: 'sm',
+		variant: 'error',
+		required: false,
+		children: 'Error Label',
+	},
+};
+
+// Disabled Variant
+export const Disabled = {
+	args: {
+		size: 'sm',
+		variant: 'disabled',
+		required: false,
+		children: 'Disabled Label',
+	},
+};
diff --git a/src/components/label/readme.md b/src/components/label/readme.md
new file mode 100644
index 00000000..1b82d97d
--- /dev/null
+++ b/src/components/label/readme.md
@@ -0,0 +1,59 @@
+# Label
+
+## Description
+
+Labels component - These are the basic atoms used for the form elements with input, checkboxes and radios and more.
+
+## Props
+
+### size
+- **Type:** `string`
+- **Default:** `"sm"`
+- **Description:** Defines the size of the label field
+    - `"xs"`
+    - `"sm"`
+    - `"md"`
+
+### tag
+- **Type:** `string`
+- **Default:** `"label"`
+- **Description:** The HTML tag - label, span, title, etc.
+
+
+### children
+- **Type:** `ReactNode`
+- **Description:** The content to be displayed inside the label.
+
+### className
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the label.
+
+### variant
+- **Type:** `string`
+- **Default:** `"neutral"`
+- **Description:** Variant of the label
+    - `neutral`
+    - `help`
+    - `error`
+    - `disabled`
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { Label } from '@bsf/force-ui';
+
+const App = () => (
+    <div>
+        <Label size='xs'>Vrunda <MapPinPlusInside/> Kansara </Label>
+        <Label size='sm'>Label</Label>
+        <Label size='sm' variant='disabled'><MapPinPlusInside/> Label</Label>
+        <Label size='md' variant="help">Another Label <MapPinPlusInside/></Label>
+        <Label variant="error">An error label with a <a href="#">link</a>.</Label>
+    </div>
+);
+
+export default App;
+```
+
diff --git a/src/components/loader/index.js b/src/components/loader/index.js
new file mode 100644
index 00000000..ef131ce7
--- /dev/null
+++ b/src/components/loader/index.js
@@ -0,0 +1 @@
+export { default } from './loader.jsx';
diff --git a/src/components/loader/loader.jsx b/src/components/loader/loader.jsx
new file mode 100644
index 00000000..33aced21
--- /dev/null
+++ b/src/components/loader/loader.jsx
@@ -0,0 +1,31 @@
+import { cn } from '@/utilities/functions';
+import { LoaderCircle } from 'lucide-react';
+
+const Loader = ( {
+	variant = 'primary', // primary, secondary
+	size = 'md', // sm, md, lg, xl,
+	icon = null,
+	className = '',
+} ) => {
+	const variantClassNames = {
+		primary: 'text-brand-primary-600 bg-background-primary',
+		secondary: 'text-background-primary bg-brand-primary-600',
+	}?.[ variant ];
+
+	const sizeClassNames = {
+		sm: '[&>svg]:h-4 [&>svg]:w-4',
+		md: '[&>svg]:h-5 [&>svg]:w-5',
+		lg: '[&>svg]:h-6 [&>svg]:w-6',
+		xl: '[&>svg]:h-8 [&>svg]:w-8',
+	}?.[ size ];
+
+	return (
+		<span
+			className={ cn( 'flex', sizeClassNames, variantClassNames, className ) }
+		>
+			{ icon ? icon : <LoaderCircle className="animate-spin" /> }
+		</span>
+	);
+};
+
+export default Loader;
diff --git a/src/components/loader/loader.stories.jsx b/src/components/loader/loader.stories.jsx
new file mode 100644
index 00000000..e6c2265a
--- /dev/null
+++ b/src/components/loader/loader.stories.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import Loader from './loader.jsx';
+import { LoaderPinwheel } from 'lucide-react';
+
+export default {
+	title: 'Atoms/Loader',
+	component: Loader,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the variant style of the loader.',
+			control: 'select',
+			options: [ 'primary', 'secondary' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'primary' },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the loader.',
+			control: 'select',
+			options: [ 'sm', 'md', 'lg', 'xl' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		icon: {
+			name: 'Icon',
+			description: 'Custom icon for the loader.',
+			control: 'none',
+			table: {
+				type: { summary: 'ReactNode' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+// Basic
+export const Basic = {
+	args: {
+		variant: 'primary',
+		size: 'md',
+		icon: null,
+	},
+};
+
+// Secondary Variant
+export const Secondary = {
+	args: {
+		variant: 'secondary',
+		size: 'md',
+		icon: null,
+	},
+};
+
+// Large Size
+export const Large = {
+	args: {
+		variant: 'primary',
+		size: 'lg',
+		icon: null,
+	},
+};
+
+// Custom Icon
+export const CustomIcon = {
+	args: {
+		variant: 'primary',
+		size: 'md',
+		icon: <LoaderPinwheel className="animate-spin" />,
+	},
+};
diff --git a/src/components/loader/readme.md b/src/components/loader/readme.md
new file mode 100644
index 00000000..2faf30d3
--- /dev/null
+++ b/src/components/loader/readme.md
@@ -0,0 +1,71 @@
+# Loader
+
+## Description
+
+Loader is a component that displays a loading state to the user while the app is fetching data or performing some other asynchronous operation. This loading state can take many forms, such as a loading spinner, a loader icon, or even a full-screen loading animation. The main purpose of a loading component is to provide feedback to the user that the app is working on their request and to keep them engaged while they wait.
+
+## Props
+
+### variant
+- **Type:** `string`
+- **Default:** `"text"`
+- **Description:** Type of the loader - Primary/ Secondary
+    - `"primary"`
+    - `"secondary"`
+
+### size
+- **Type:** `string`
+- **Default:** `"md"`
+- **Description:** Defines the size of the loader
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+    - `"xl"`
+
+### className
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the loader.
+
+### icon
+- **Type:** `JSX Component`
+- **Description:** Custom loader Icon
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { Loader } from '@bsf/force-ui';
+import { Ellipsis, RefreshCw, LoaderPinwheel, Loader as LCLoader } from 'lucide-react';
+
+const App = () => (
+  <div>
+    /**
+     * Primary Loader
+     * /
+    <Loader size='sm' />
+    <Loader size='md' />
+    <Loader size='lg' />
+    <Loader size='xl' />
+
+    /**
+     * Secondary Loader.
+     * /
+    <Loader size='sm' variant='secondary' />
+    <Loader size='md' variant='secondary' />
+    <Loader size='lg' variant='secondary' />
+    <Loader size='xl' variant='secondary' />
+
+    /**
+     * Custom Icon.
+     * /
+    <Loader size='sm' icon= { <LCLoader className="animate-spin" /> } />
+    <Loader size='md' icon= { <Ellipsis className="animate-pulse" /> } />
+    <Loader size='lg' icon= { <RefreshCw className="animate-spin" /> } />
+    <Loader size='xl' variant='secondary' icon= { <LoaderPinwheel className="animate-spin" /> } />
+  </div>
+);
+
+export default App;
+```
+
diff --git a/src/components/menu-item/index.js b/src/components/menu-item/index.js
new file mode 100644
index 00000000..354ff356
--- /dev/null
+++ b/src/components/menu-item/index.js
@@ -0,0 +1 @@
+export { default } from './menu-item.jsx';
diff --git a/src/components/menu-item/menu-item.jsx b/src/components/menu-item/menu-item.jsx
new file mode 100644
index 00000000..a16e363b
--- /dev/null
+++ b/src/components/menu-item/menu-item.jsx
@@ -0,0 +1,185 @@
+import React, { useState, createContext, useContext } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/utilities/functions';
+
+const MenuContext = createContext();
+const useMenuContext = () => useContext( MenuContext );
+
+const Menu = ( { size = 'md', children, className } ) => {
+	const baseClasses = 'w-64 flex flex-col bg-background-primary p-2';
+
+	return (
+		<MenuContext.Provider value={ { size } }>
+			<div className={ cn( baseClasses, className ) }>{ children }</div>
+		</MenuContext.Provider>
+	);
+};
+
+const MenuList = ( {
+	heading,
+	arrow = false,
+	open: initialOpen = false,
+	onClick,
+	children,
+	className,
+} ) => {
+	const [ isOpen, setIsOpen ] = useState( initialOpen );
+	const { size } = useMenuContext();
+
+	const baseClasses =
+		'text-text-primary bg-transparent cursor-pointer flex justify-between items-center p-1 gap-1';
+
+	const sizeClasses = {
+		sm: 'text-xs',
+		md: 'text-sm',
+	}?.[ size ];
+	const iconSizeClasses = {
+		sm: '[&>svg]:size-4',
+		md: '[&>svg]:size-5',
+	}?.[ size ];
+
+	const handleToggle = () => {
+		setIsOpen( ! isOpen );
+		if ( onClick ) {
+			onClick( ! isOpen );
+		}
+	};
+
+	const arrowAnimationVariants = {
+		open: { rotate: 180 },
+		closed: { rotate: 0 },
+	};
+
+	const listAnimationVariants = {
+		open: { height: 'auto', opacity: 1 },
+		closed: { height: 0, opacity: 0 },
+	};
+
+	return (
+		<div>
+			<div
+				role="button"
+				tabIndex="0"
+				onClick={ handleToggle }
+				onKeyPress={ ( event ) => {
+					if ( event.key === 'Enter' || event.key === ' ' ) {
+						handleToggle();
+					}
+				} }
+				className={ cn( baseClasses, sizeClasses, className ) }
+				aria-expanded={ isOpen }
+			>
+				<span className="text-text-tertiary">{ heading }</span>
+
+				{ arrow && (
+					<motion.span
+						variants={ arrowAnimationVariants }
+						animate={ isOpen ? 'open' : 'closed' }
+						transition={ { duration: 0.15 } }
+						className={ cn(
+							'flex items-center text-border-strong',
+							iconSizeClasses
+						) }
+					>
+						<ChevronDown />
+					</motion.span>
+				) }
+			</div>
+
+			<AnimatePresence initial={ false }>
+				{ isOpen && (
+					<motion.ul
+						variants={ listAnimationVariants }
+						initial="closed"
+						animate="open"
+						exit="closed"
+						transition={ { duration: 0.3, ease: 'easeInOut' } }
+						className="overflow-hidden flex gap-0.5 flex-col m-0 bg-white rounded-md p-0"
+					>
+						{ children }
+					</motion.ul>
+				) }
+			</AnimatePresence>
+		</div>
+	);
+};
+
+const MenuItem = ( {
+	disabled = false,
+	active,
+	onClick,
+	children,
+	className,
+} ) => {
+	const { size } = useMenuContext();
+
+	const baseClasses =
+		'flex p-1 gap-1 items-center bg-transparent w-full border-none rounded text-text-secondary cursor-pointer m-0';
+	const sizeClasses = {
+		sm: '[&>svg]:size-4 [&>svg]:m-1 [&>*:not(svg)]:mx-1 [&>*:not(svg)]:my-0.5 text-sm',
+		md: '[&>svg]:size-5 [&>svg]:m-1.5 [&>*:not(svg)]:m-1 text-base',
+	}?.[ size ];
+	const hoverClasses =
+		'hover:bg-background-secondary hover:text-text-primary';
+	const disabledClasses = disabled
+		? 'text-text-disabled hover:text-text-disabled cursor-not-allowed hover:bg-transparent'
+		: '';
+	const activeClasses = active
+		? 'text-icon-primary [&>svg]:text-icon-interactive bg-background-secondary'
+		: '';
+	const transitionClasses = 'transition-colors duration-300 ease-in-out';
+
+	return (
+		<li
+			role="menuitem"
+			tabIndex="0"
+			onClick={ onClick }
+			onKeyPress={ ( event ) => {
+				if ( event.key === 'Enter' || event.key === ' ' ) {
+					onClick();
+				}
+			} }
+			className={ cn(
+				baseClasses,
+				sizeClasses,
+				hoverClasses,
+				disabledClasses,
+				activeClasses,
+				transitionClasses,
+				className
+			) }
+		>
+			{ children }
+		</li>
+	);
+};
+
+const MenuSeparator = ( { variant = 'solid', className } ) => {
+	const variantClasses = {
+		solid: 'border-solid',
+		dashed: 'border-dashed',
+		dotted: 'border-dotted',
+		double: 'border-double',
+		hidden: 'border-hidden',
+		none: 'border-none',
+	}?.[ variant ];
+
+	return (
+		<>
+			<hr
+				className={ cn(
+					'w-full border-0 border-t border-border-subtle',
+					variantClasses,
+					className
+				) }
+			/>
+		</>
+	);
+};
+
+Menu.List = MenuList;
+Menu.Item = MenuItem;
+Menu.Separator = MenuSeparator;
+
+export default Menu;
diff --git a/src/components/menu-item/menu.stories.js b/src/components/menu-item/menu.stories.js
new file mode 100644
index 00000000..2a1eff86
--- /dev/null
+++ b/src/components/menu-item/menu.stories.js
@@ -0,0 +1,126 @@
+import Menu from './menu-item.jsx';
+import {
+	Store,
+	PenTool,
+	ShoppingBag,
+	ShoppingCart,
+	Truck,
+	CreditCard,
+	MousePointer,
+	ChartNoAxesColumnIncreasing,
+	Layers,
+	CloudUpload,
+	Bell,
+} from 'lucide-react';
+
+Menu.displayName = 'Menu';
+Menu.List.displayName = 'Menu.List';
+Menu.Item.displayName = 'Menu.Item';
+export default {
+	title: 'Molecules/Menu',
+	component: Menu,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			name: 'Size',
+			description:
+				'Specifies the size of the Menu Item components inside Menu',
+			control: { type: 'select' },
+			options: [ 'sm', 'md' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		menuItemActive: {
+			name: 'Menu.Item: Active',
+			description:
+				'Controls if the Menu Item is active. (This will apply to "Store Settings" item only for demo)',
+			control: { type: 'boolean' },
+		},
+		menuItemDisabled: {
+			name: 'Menu.Item: Disabled',
+			description:
+				'Disables the Menu Item. (This will apply to "Store Settings" item only for demo)',
+			control: { type: 'boolean' },
+		},
+		menuItemContent: {
+			name: 'Menu.Item: Content',
+			description: 'Content inside the Menu Item',
+			control: { type: 'text' },
+		},
+	},
+};
+
+const Template = ( args ) => (
+	<Menu size={ args.size }>
+		<Menu.List heading="Store" open={ true } arrow={ true }>
+			<Menu.Item
+				active={ args.menuItemActive }
+				disabled={ args.menuItemDisabled }
+			>
+				<Store />
+				<div>{ args.menuItemContent || 'Store Settings' }</div>
+			</Menu.Item>
+			<Menu.Item disabled>
+				<PenTool />
+				<div>Design & Branding</div>
+			</Menu.Item>
+		</Menu.List>
+		<Menu.List heading="Orders & Sales" open={ true } arrow={ true }>
+			<Menu.Item>
+				<ShoppingBag />
+				<div>Orders & Receipts</div>
+			</Menu.Item>
+			<Menu.Item>
+				<ShoppingCart />
+				<div>Abandoned Checkout</div>
+			</Menu.Item>
+			<Menu.Item>
+				<Truck />
+				<div>Shipping</div>
+			</Menu.Item>
+			<Menu.Item>
+				<CreditCard />
+				<div>Payment Processors</div>
+			</Menu.Item>
+		</Menu.List>
+		<Menu.Separator />
+		<Menu.List heading="Customers" open={ true } arrow={ true }>
+			<Menu.Item>
+				<MousePointer />
+				<div>Affiliates</div>
+			</Menu.Item>
+			<Menu.Item>
+				<ChartNoAxesColumnIncreasing />
+				<div>Subscriptions Saver</div>
+			</Menu.Item>
+		</Menu.List>
+		<Menu.List heading="Others" open={ true } arrow={ true }>
+			<Menu.Item>
+				<Layers />
+				<div>Data Export</div>
+			</Menu.Item>
+			<Menu.Item>
+				<CloudUpload />
+				<div>Connection</div>
+			</Menu.Item>
+			<Menu.Item>
+				<Bell />
+				<div>Notification</div>
+			</Menu.Item>
+		</Menu.List>
+	</Menu>
+);
+
+export const CombinedMenu = Template.bind( {} );
+
+CombinedMenu.args = {
+	size: 'md',
+	menuItemActive: false,
+	menuItemDisabled: false,
+	menuItemContent: 'Store Settings',
+};
diff --git a/src/components/menu-item/readme.md b/src/components/menu-item/readme.md
new file mode 100644
index 00000000..a78d1764
--- /dev/null
+++ b/src/components/menu-item/readme.md
@@ -0,0 +1,109 @@
+# Menu Item Sidebar Component Documentation
+
+## Description
+
+The `Menu` component provides container for displaying a list of navigational or interactive items. It is used in combination with the Menu.List, Menu.Item, and Menu.Separator components to build sidebars, or any other menu-based user interface.
+
+## `Menu` Props
+
+### `size`
+- **Type:** `string`
+- **Default:** `"md"`
+- **Description:** Defines the size of Menu.Item and Menu.List components. Options include:
+  - `"sm"`
+  - `"md"`
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Accepts the Menu.List, Menu.Item, or any other custom children to be rendered within the menu.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to style the Menu.
+
+
+The `Menu.List` component organizes Menu.Item components under a heading. It supports collapsible sections with an optional arrow, which can be toggled to show or hide the list of items.
+
+## `Menu.List` Props
+
+### `heading`
+- **Type:** `string`
+- **Description:** Title or label for the Menu.List
+
+### `arrow`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** If true, displays an arrow that can be used to expand or collapse the Menu.List
+
+### `open`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Controls whether the Menu.List is initially open or closed
+
+### `onClick`
+- **Type:** `function`
+- **Description:** Callback function that is called when the Menu.List heading is clicked.
+
+
+The `Menu.Item` component represents an individual clickable item in the Menu.List. It can handle various states like active or disabled, and accepts icons, text, or other content passed as children.
+
+## `Menu.Item` Props
+
+### `disabled`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Disables the Menu.Item, making it non-interactive and preventing hover and click events.
+
+### `active`
+- **Type:** `boolean`
+- **Description:** Marks the Menu.Item as active, changing its styling to indicate selection.
+
+### `onClick`
+- **Type:** `function`
+- **Description:** Callback function triggered when the Menu.Item is clicked.
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** The content of the Menu.Item, which can include text, icons, or other elements.
+
+## `Menu.Separator` Props
+
+### `variant`
+- **Type:** `string`
+- **Default:** `"solid"`
+- **Description:** Defines the style of the separator. Options include:
+  - `"solid"`
+  - `"dashed"`
+  - `"dotted"`
+  - `"double"`
+  - `"none"`
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to style the Menu.Separator.
+
+```jsx
+import { Menu } from '@bsf/force-ui';
+import { User, Store, CreditCard } from 'lucide-react';
+
+const App = () => (
+    <Menu>
+        <Menu.List heading="Store" open={true} arrow={true}>
+            <Menu.Item>
+                <User />
+                <div>Profile</div>
+            </Menu.Item>
+            <Menu.Item active={true}>
+                <Store />
+                <div>Store Settings</div>
+            </Menu.Item>
+            <Menu.Item>
+                <CreditCard />
+                <div>Payment Processors</div>
+            </Menu.Item>
+        </Menu.List>
+    </Menu>
+);
+
+export default App;
+```
\ No newline at end of file
diff --git a/src/components/progress-bar/index.js b/src/components/progress-bar/index.js
new file mode 100644
index 00000000..cac214fe
--- /dev/null
+++ b/src/components/progress-bar/index.js
@@ -0,0 +1 @@
+export { default } from './progress-bar.jsx';
diff --git a/src/components/progress-bar/progress-bar.jsx b/src/components/progress-bar/progress-bar.jsx
new file mode 100644
index 00000000..9a364d9a
--- /dev/null
+++ b/src/components/progress-bar/progress-bar.jsx
@@ -0,0 +1,43 @@
+import { cn } from '@/utilities/functions';
+
+const ProgressBar = ( {
+	progress = 0, // 0-100
+	speed = 200,
+	className = '',
+} ) => {
+	if ( ! progress ) {
+		return null;
+	}
+	let percent = progress;
+	if ( progress < 0 ) {
+		percent = 0;
+	}
+	if ( progress > 100 ) {
+		percent = 100;
+	}
+
+	const translateProperty = `translateX(-${ 100 - percent }%)`;
+	const innerClasses = `h-2 rounded-full bg-background-brand absolute left-0 top-0 w-full bottom-0 origin-left transition-transform duration-${ speed } ease-linear`;
+
+	return (
+		<div
+			className={ cn(
+				'h-2 rounded-full bg-misc-progress-background overflow-hidden relative',
+				className
+			) }
+			role="progressbar"
+			aria-valuenow={ percent }
+			aria-valuemin="0"
+			aria-valuemax="100"
+		>
+			<div
+				className={ innerClasses }
+				style={ {
+					transform: translateProperty,
+				} }
+			/>
+		</div>
+	);
+};
+
+export default ProgressBar;
diff --git a/src/components/progress-bar/progress-bar.stories.jsx b/src/components/progress-bar/progress-bar.stories.jsx
new file mode 100644
index 00000000..0e26b26a
--- /dev/null
+++ b/src/components/progress-bar/progress-bar.stories.jsx
@@ -0,0 +1,78 @@
+import ProgressBar from './progress-bar';
+
+export default {
+	title: 'Atoms/ProgressBar',
+	component: ProgressBar,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		progress: {
+			name: 'Progress',
+			description: 'Defines the progress percentage of the bar (0-100).',
+			control: { type: 'range', min: 0, max: 100 },
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: 0 },
+			},
+		},
+		speed: {
+			name: 'Speed',
+			description: 'Defines the animation speed in milliseconds.',
+			control: { type: 'number' },
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: 200 },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Additional custom classes for the progress bar.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div style={ { width: '400px' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+// Basic ProgressBar
+export const Basic = {
+	args: {
+		progress: 50,
+		speed: 200,
+	},
+};
+
+// Full Progress
+export const FullProgress = {
+	args: {
+		progress: 100,
+		speed: 200,
+	},
+};
+
+// Slow ProgressBar
+export const SlowProgress = {
+	args: {
+		progress: 75,
+		speed: 1000,
+	},
+};
+
+// Zero Progress
+export const ZeroProgress = {
+	args: {
+		progress: 0,
+		speed: 200,
+	},
+};
diff --git a/src/components/progress-bar/readme.md b/src/components/progress-bar/readme.md
new file mode 100644
index 00000000..04c8c3e0
--- /dev/null
+++ b/src/components/progress-bar/readme.md
@@ -0,0 +1,36 @@
+# ProgressBar
+
+## Description
+
+Linear progress bars.
+
+## Props
+
+### progress
+- **Type:** `number`
+- **Default:** `0`
+- **Description:** Progress of the progress bar.
+    - `0 - 100`
+
+### speed
+- **Type:** `number`
+- **Default:** `200`
+- **Description:** The speed of the animation in milli seconds.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { ProgressBar } from '@bsf/force-ui';
+
+const App = () => (
+    <div>
+        <ProgressBar progress={79}/>
+        <ProgressBar progress={50} speed={400}/>
+    </div>
+);
+
+export default App;
+```
+
diff --git a/src/components/progress-steps/index.js b/src/components/progress-steps/index.js
new file mode 100644
index 00000000..5d108df9
--- /dev/null
+++ b/src/components/progress-steps/index.js
@@ -0,0 +1 @@
+export { default } from './progress-steps.jsx';
diff --git a/src/components/progress-steps/progress-steps.jsx b/src/components/progress-steps/progress-steps.jsx
new file mode 100644
index 00000000..d29c61af
--- /dev/null
+++ b/src/components/progress-steps/progress-steps.jsx
@@ -0,0 +1,244 @@
+import React from 'react';
+import { cn } from '@/utilities/functions';
+import { Plus, Check } from 'lucide-react';
+import {
+	getVariantClasses,
+	completedStepCommonClasses,
+	stepWrapperClasses,
+} from './utils';
+
+const ProgressSteps = ( {
+	variant = 'dot',
+	size = 'sm',
+	type = 'inline',
+	currentStep = 1,
+	children,
+	className,
+	...rest
+} ) => {
+	const totalSteps = React.Children.count( children );
+
+	const sizeClasses = {
+		sm: {
+			dot: 'size-2.5',
+			ring: 'size-5',
+			numberIcon: 'size-5 text-tiny',
+			icon: 'size-5',
+			label: 'text-xs',
+		},
+		md: {
+			dot: 'size-3',
+			ring: 'size-6',
+			numberIcon: 'size-6 text-sm',
+			icon: 'size-6',
+			label: 'text-sm',
+		},
+		lg: {
+			dot: 'size-3.5',
+			ring: 'size-7',
+			numberIcon: 'size-7 text-md',
+			icon: 'size-7',
+			label: 'text-sm',
+		},
+	};
+
+	const steps = React.Children.map( children, ( child, index ) => {
+		const isCompleted = index + 1 < currentStep;
+		const isCurrent = index + 1 === currentStep;
+		const isLast = index + 1 === totalSteps;
+
+		const stepProps = {
+			isCompleted,
+			isCurrent,
+			sizeClasses,
+			size,
+			variant,
+			type,
+			isLast,
+			index,
+		};
+
+		return (
+			<React.Fragment key={ index }>
+				{ React.cloneElement( child, stepProps ) }
+			</React.Fragment>
+		);
+	} );
+
+	return (
+		<div
+			className={ cn(
+				'flex w-full',
+				className,
+				type === 'inline' ? 'items-center justify-between' : ''
+			) }
+			{ ...rest }
+		>
+			{ steps }
+		</div>
+	);
+};
+
+// ProgressStep component as {ProgressSteps.Step}
+const ProgressStep = ( {
+	labelText,
+	icon = <Plus />,
+	stepClasses,
+	isCurrent,
+	isCompleted,
+	className,
+	type,
+	variant,
+	sizeClasses,
+	size,
+	isLast,
+	index,
+	...rest
+} ) => {
+	const stepContent = createStepContent(
+		variant,
+		isCompleted,
+		isCurrent,
+		sizeClasses,
+		size,
+		icon,
+		index
+	);
+
+	const stackSizeOffset = {
+		lg: 'left-[calc(50%+14px)] right-[calc(-50%+14px)]',
+		md: 'left-[calc(50%+12px)] right-[calc(-50%+12px)]',
+		sm: 'left-[calc(50%+10px)] right-[calc(-50%+10px)]',
+	};
+
+	const topClass = {
+		lg: 'top-3.5',
+		md: 'top-3',
+		sm: 'top-2.5',
+	};
+
+	const renderLabel = () => {
+		if ( labelText ) {
+			const labelClasses = cn(
+				sizeClasses[ size ].label,
+				'text-text-tertiary',
+				isCurrent ? 'text-brand-primary-600' : '',
+				'break-word', // max width for inline and stack
+				type === 'stack' ? 'mt-2 transform max-w-xs' : 'mx-2 max-w-32'
+			);
+			return <span className={ labelClasses }>{ labelText }</span>;
+		}
+		return null;
+	};
+
+	const renderConnectingLine = () => {
+		if ( ! isLast ) {
+			const lineClasses = cn(
+				'block',
+				isCompleted
+					? 'border-brand-primary-600'
+					: 'border-border-subtle'
+			);
+
+			if ( type === 'stack' ) {
+				return (
+					<div
+						className={ cn(
+							'relative',
+							'flex',
+							'border-solid',
+							'border-y',
+							'absolute',
+							isCompleted
+								? 'border-brand-primary-600'
+								: 'border-border-subtle',
+							topClass[ size ],
+							stackSizeOffset[ size ]
+						) }
+					>
+						<span className="block"></span>
+					</div>
+				);
+			}
+			return (
+				<div className="flex-1">
+					<span
+						className={ cn(
+							lineClasses,
+							'mr-2',
+							'border-y border-solid'
+						) }
+					></span>
+				</div>
+			);
+		}
+		return null;
+	};
+
+	// Main return logic based on type
+	if ( type === 'stack' ) {
+		return (
+			<div className="relative flex-1 justify-center">
+				<div
+					className={ cn( 'flex items-center flex-col', className ) }
+					{ ...rest }
+				>
+					{ stepContent }
+					{ renderLabel() }
+				</div>
+				{ renderConnectingLine() }
+			</div>
+		);
+	}
+	return (
+		<>
+			<div className={ cn( 'flex items-center', className ) } { ...rest }>
+				{ stepContent }
+				{ renderLabel() }
+			</div>
+			{ renderConnectingLine() }
+		</>
+	);
+};
+
+// Create step content
+const createStepContent = (
+	variant,
+	isCompleted,
+	isCurrent,
+	sizeClasses,
+	size,
+	icon,
+	index
+) => {
+	if ( isCompleted ) {
+		return (
+			<Check className={ completedStepCommonClasses( sizeClasses, size ) } />
+		);
+	}
+
+	const commonClasses = stepWrapperClasses( isCurrent, sizeClasses, size );
+	const variantClasses = getVariantClasses(
+		variant,
+		isCurrent,
+		sizeClasses,
+		size
+	);
+
+	let content = null;
+	if ( variant === 'number' ) {
+		content = index + 1;
+	} else if ( variant === 'icon' && icon ) {
+		content = icon;
+	}
+
+	return (
+		<span className={ commonClasses }>
+			<span className={ variantClasses }>{ content }</span>
+		</span>
+	);
+};
+
+ProgressSteps.Step = ProgressStep;
+
+export default ProgressSteps;
diff --git a/src/components/progress-steps/progress-steps.stories.jsx b/src/components/progress-steps/progress-steps.stories.jsx
new file mode 100644
index 00000000..f0ead613
--- /dev/null
+++ b/src/components/progress-steps/progress-steps.stories.jsx
@@ -0,0 +1,86 @@
+import ProgressSteps from './progress-steps';
+import { Check } from 'lucide-react';
+
+export default {
+	title: 'Atoms/ProgressSteps',
+	component: ProgressSteps,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			control: 'select',
+			options: [ 'dot', 'number', 'icon' ],
+			description:
+				'Defines the style of the step indicator. Choose between "dot", "number", or "icon".',
+		},
+		size: {
+			control: 'select',
+			options: [ 'sm', 'md', 'lg' ],
+			description:
+				'Sets the size of the step indicator. Options are "small", "medium", or "large".',
+		},
+		type: {
+			control: 'select',
+			options: [ 'inline', 'stack' ],
+			description:
+				'Defines the layout of the steps. "inline" places them horizontally, "stack" places them vertically.',
+		},
+		currentStep: {
+			control: { type: 'number', min: 1, max: 5 },
+			description:
+				'Indicates the active step (1-based index). The step number will be highlighted.',
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div style={ { width: '700px', margin: '0 auto' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+const Template = ( args ) => (
+	<ProgressSteps { ...args }>
+		<ProgressSteps.Step labelText="Step 1" />
+		<ProgressSteps.Step labelText="Step 2" />
+		<ProgressSteps.Step labelText="Step 3" />
+		<ProgressSteps.Step labelText="Step 4" />
+		<ProgressSteps.Step labelText="Step 5" />
+	</ProgressSteps>
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	variant: 'dot',
+	size: 'md',
+	type: 'inline',
+	currentStep: 2,
+};
+
+export const NumberVariant = Template.bind( {} );
+NumberVariant.args = {
+	variant: 'number',
+	size: 'md',
+	type: 'inline',
+	currentStep: 3,
+};
+
+export const IconVariant = Template.bind( {} );
+IconVariant.args = {
+	variant: 'icon',
+	size: 'md',
+	type: 'inline',
+	currentStep: 4,
+	icon: <Check />,
+};
+
+export const StackType = Template.bind( {} );
+StackType.args = {
+	variant: 'dot',
+	size: 'md',
+	type: 'stack',
+	currentStep: 3,
+};
diff --git a/src/components/progress-steps/readme.md b/src/components/progress-steps/readme.md
new file mode 100644
index 00000000..4aaef9b4
--- /dev/null
+++ b/src/components/progress-steps/readme.md
@@ -0,0 +1,80 @@
+# ProgressSteps Component
+
+## Description
+
+The `ProgressSteps` component renders a sequence of steps, typically used in multi-step processes like forms, wizards, or onboarding flows. The component supports different variants (dot, number, icon), sizes, and layouts (inline, stack). It also allows customization with icons and labels.
+
+## Props
+
+### `variant`
+- **Type:** `string`
+- **Default:** `"dot"`
+- **Description:** Defines the style of the step indicator.
+  - `"dot"`: Small dots represent each step.
+  - `"number"`: Numbers represent each step.
+  - `"icon"`: Icons represent each step.
+
+### `size`
+- **Type:** `string`
+- **Default:** `"sm"`
+- **Description:** Defines the size of the step indicator.
+  - `"sm"`: Small size.
+  - `"md"`: Medium size.
+  - `"lg"`: Large size.
+
+### `type`
+- **Type:** `string`
+- **Default:** `"inline"`
+- **Description:** Defines the layout of the steps.
+  - `"inline"`: Steps are laid out horizontally.
+  - `"stack"`: Steps are stacked vertically, with labels below the indicators.
+
+### `currentStep`
+- **Type:** `number`
+- **Default:** `1`
+- **Description:** The index of the currently active step (1-based index).
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the `ProgressSteps` container.
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** The individual `ProgressStep` components that make up the steps.
+
+## `ProgressStep` Props
+
+### `labelText`
+- **Type:** `string`
+- **Description:** The label text to display for each step.
+
+### `icon`
+- **Type:** `JSX.Element`
+- **Default** `<Plus />`
+- **Description:** The icon to display for the step when using the `icon` variant. This prop can also be used with the `number` variant to replace the number with an icon.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the individual step container.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { ProgressSteps } from '@bsf/force-ui';
+import { Plus } from 'lucide-react';
+
+const App = () => (
+    <div>
+        <h2>Progress Example</h2>
+        <ProgressSteps type="inline" variant="number" currentStep={2} size="md">
+            <ProgressSteps.Step labelText="Step 1"/>
+            <ProgressSteps.Step labelText="Step 2"/>
+            <ProgressSteps.Step labelText="Step 3"/>
+            <ProgressSteps.Step labelText="Step 4"/>
+        </ProgressSteps>
+    </div>
+);
+
+export default App;
diff --git a/src/components/progress-steps/utils.jsx b/src/components/progress-steps/utils.jsx
new file mode 100644
index 00000000..c790fa88
--- /dev/null
+++ b/src/components/progress-steps/utils.jsx
@@ -0,0 +1,72 @@
+import { cn } from '@/utilities/functions';
+
+/**
+ * Helper function to generate classes for different step variants.
+ *
+ * @param {'dot' | 'number' | 'icon'} variant     - The type of step indicator.
+ * @param {boolean}                   isCurrent   - Whether the step is the current step.
+ * @param {Object}                    sizeClasses - The size classes for different step sizes.
+ * @param {'sm' | 'md' | 'lg'}        size        - The size of the step indicator.
+ * @return {string} The combined class names.
+ */
+export const getVariantClasses = ( variant, isCurrent, sizeClasses, size ) => {
+	const baseClass = `absolute rounded-full transition-colors duration-500 ${ sizeClasses[ size ].dot }`;
+
+	if ( variant === 'dot' ) {
+		return cn(
+			baseClass,
+			sizeClasses[ size ].dot,
+			isCurrent ? 'bg-brand-primary-600' : 'bg-text-tertiary'
+		);
+	}
+
+	if ( variant === 'number' ) {
+		return cn(
+			baseClass,
+			sizeClasses[ size ].dot,
+			isCurrent ? 'text-brand-primary-600' : 'text-text-tertiary',
+			'flex items-center justify-center'
+		);
+	}
+
+	if ( variant === 'icon' ) {
+		return cn(
+			baseClass,
+			isCurrent ? 'text-brand-primary-600' : 'text-text-tertiary',
+			'flex items-center justify-center'
+		);
+	}
+
+	return '';
+};
+
+/**
+ * Helper function to generate common classes for step indicators.
+ *
+ * @param {boolean}            isCurrent   - Whether the step is the current step.
+ * @param {Object}             sizeClasses - The size classes for different step sizes.
+ * @param {'sm' | 'md' | 'lg'} size        - The size of the step indicator.
+ * @return {string} The combined class names.
+ */
+export const stepWrapperClasses = ( isCurrent, sizeClasses, size ) => {
+	return cn(
+		'relative flex items-center rounded-full justify-center transition-colors z-10 duration-500 ring-1',
+		isCurrent ? 'ring-brand-primary-600' : 'ring-border-subtle',
+		sizeClasses[ size ].ring
+	);
+};
+
+/**
+ * Helper function to generate common classes for completed steps.
+ *
+ * @param {Object}             sizeClasses - The size classes for different step sizes.
+ * @param {'sm' | 'md' | 'lg'} size        - The size of the step indicator.
+ * @return {string} The combined class names.
+ */
+export const completedStepCommonClasses = ( sizeClasses, size ) => {
+	return cn(
+		'rounded-full text-brand-primary-600 transition-colors duration-300',
+		sizeClasses[ size ].dot,
+		sizeClasses[ size ].ring
+	);
+};
diff --git a/src/components/radio-button-group/index.js b/src/components/radio-button-group/index.js
new file mode 100644
index 00000000..7d2edabe
--- /dev/null
+++ b/src/components/radio-button-group/index.js
@@ -0,0 +1 @@
+export { default } from './radio-button-group.jsx';
diff --git a/src/components/radio-button-group/radio-button-group.jsx b/src/components/radio-button-group/radio-button-group.jsx
new file mode 100644
index 00000000..0f99cb8e
--- /dev/null
+++ b/src/components/radio-button-group/radio-button-group.jsx
@@ -0,0 +1,461 @@
+import React, {
+	useState,
+	useCallback,
+	useMemo,
+	forwardRef,
+	isValidElement,
+	createContext,
+	useContext,
+	Fragment,
+} from 'react';
+import { nanoid } from 'nanoid';
+import { Check } from 'lucide-react';
+
+import { cn, columnClasses } from '@/utilities/functions';
+import Switch from '../switch';
+import {
+	colorClassNames,
+	disabledClassNames,
+	sizeClassNames,
+	sizes,
+	borderClasses,
+	baseClasses,
+	hoverClasses,
+	focusClasses,
+} from './styles';
+
+const RadioButtonContext = createContext();
+const useRadioButton = () => useContext( RadioButtonContext );
+
+const RadioButtonGroup = ( {
+	children,
+	name,
+	style = 'simple',
+	size = 'md',
+	value,
+	defaultValue,
+	by = 'id',
+	as: AsElement = 'div',
+	onChange,
+	className,
+	disableGroup = false,
+	vertical = false,
+	columns = 4,
+	multiSelection = false,
+} ) => {
+	const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
+	const nameAttr = useMemo(
+		() => name || `radio-button-group-${ nanoid() }`,
+		[ name ]
+	);
+	let initialSelectedValue;
+	if ( isControlled ) {
+		initialSelectedValue = value;
+	} else if ( multiSelection ) {
+		initialSelectedValue = defaultValue ?? [];
+	} else {
+		initialSelectedValue = defaultValue;
+	}
+
+	const [ selectedValue, setSelectedValue ] = useState( initialSelectedValue );
+
+	const handleChange = useCallback(
+		( newValue ) => {
+			if ( multiSelection ) {
+				// Handles multi-selection logic
+				setSelectedValue( ( prevValue ) => {
+					const isAlreadySelected = prevValue.includes( newValue );
+					const updatedValue = isAlreadySelected
+						? prevValue.filter( ( val ) => val !== newValue )
+						: [ ...prevValue, newValue ];
+
+					if ( typeof onChange === 'function' ) {
+						onChange( updatedValue );
+					}
+					return updatedValue;
+				} );
+			} else {
+				// Handles single selection logic
+				if ( ! isControlled ) {
+					setSelectedValue( newValue );
+				}
+				if ( typeof onChange !== 'function' ) {
+					return;
+				}
+				onChange( newValue );
+			}
+		},
+		[ onChange ]
+	);
+	className = cn(
+		`grid grid-cols-4 gap-2`,
+		columnClasses[ columns ],
+		style === 'tile' && 'gap-0',
+		vertical && 'grid-cols-1',
+		className
+	);
+
+	const groupClassName = cn(
+		style === 'tile'
+			? 'border border-border-subtle border-solid rounded-md shadow-sm'
+			: 'gap-6',
+		className
+	);
+
+	const renderRadioButtonContext = () => (
+		<RadioButtonContext.Provider
+			value={ {
+				name: nameAttr,
+				value: isControlled ? value : selectedValue,
+				by,
+				onChange: handleChange,
+				isControlled,
+				disableAll: disableGroup,
+				style,
+				columns,
+				multiSelection,
+				size,
+			} }
+		>
+			{ React.Children.map( children, ( child ) => {
+				if ( ! isValidElement( child ) ) {
+					return null;
+				}
+				return child;
+			} ) }
+		</RadioButtonContext.Provider>
+	);
+
+	return (
+		<>
+			{ style === 'tile' ? (
+				<div className={ groupClassName }>
+					{ renderRadioButtonContext() }
+				</div>
+			) : (
+				<AsElement { ...( AsElement === Fragment ? {} : { className } ) }>
+					{ renderRadioButtonContext() }
+				</AsElement>
+			) }
+		</>
+	);
+};
+RadioButtonGroup.displayName = 'RadioButton.Group';
+
+const RadioButtonComponent = (
+	{
+		id,
+		label,
+		value,
+		children,
+		disabled,
+		icon = null,
+		inlineIcon = false,
+		hideSelection = false,
+		reversePosition = false,
+		borderOn = false,
+		badgeItem = null,
+		useSwitch = false,
+		...props
+	},
+	ref
+) => {
+	const providerValue = useRadioButton();
+	const {
+		name,
+		value: selectedValue,
+		by,
+		onChange,
+		disableAll,
+		checked,
+		multiSelection,
+		size,
+	} = providerValue;
+
+	const color = 'primary';
+	const radioButtonId = useMemo( () => id || `radio-button-${ nanoid() }`, [ id ] ),
+		isDisabled = useMemo(
+			() => disableAll || disabled,
+			[ disableAll, disabled ]
+		);
+	const checkedValue = useMemo( () => {
+		if ( multiSelection ) {
+			return (
+				Array.isArray( selectedValue ) && selectedValue.includes( value )
+			);
+		}
+		if ( typeof checked !== 'undefined' ) {
+			return checked;
+		}
+
+		if ( typeof selectedValue !== typeof value ) {
+			return false;
+		}
+		if ( typeof selectedValue === 'string' ) {
+			return selectedValue === value;
+		}
+
+		if ( Array.isArray( selectedValue ) ) {
+			return selectedValue.includes( value );
+		}
+
+		return selectedValue[ by ] === value[ by ];
+	}, [ selectedValue, value, checked ] );
+
+	const renderLabel = useCallback( () => {
+		if ( isValidElement( label ) ) {
+			return label;
+		}
+
+		if ( ! label.heading ) {
+			return null;
+		}
+		return (
+			<div
+				className={ cn(
+					! inlineIcon && 'space-y-1.5 mt-[2px]',
+					reversePosition && ( useSwitch ? 'ml-10' : 'ml-4' ),
+					inlineIcon && 'flex gap-2'
+				) }
+			>
+				{ icon && <span>{ icon } </span> }
+				<div className={ cn( 'space-y-1.5' ) }>
+					<p
+						className={ cn(
+							'text-text-primary text-sm font-medium leading-4 m-0',
+							icon && 'mt-1'
+						) }
+					>
+						{ label.heading }
+					</p>
+					{ label.description && (
+						<p className="text-text-tertiary text-sm font-normal leading-5 m-0">
+							{ label.description }
+						</p>
+					) }
+				</div>
+			</div>
+		);
+	}, [ label ] );
+
+	if ( providerValue.style === 'tile' ) {
+		return (
+			<ButtonGroupItem
+				id={ id }
+				label={ label }
+				value={ value }
+				disabled={ disabled }
+				size={ size }
+			>
+				{ children }
+			</ButtonGroupItem>
+		);
+	}
+	const handleLabelClick = () => {
+		if ( ! isDisabled ) {
+			if ( multiSelection ) {
+				// In multi-selection, toggle each individual selection
+				onChange( value, ! checkedValue ); // Pass the toggled value
+			} else {
+				// In single selection, only one can be selected
+				onChange( value ); // Trigger onChange with the selected value
+			}
+		}
+	};
+
+	return (
+		<label
+			className={ cn(
+				'inline-flex items-center relative cursor-pointer transition-all duration-300',
+				!! label && 'items-start justify-between min-w-[180px] ',
+				borderOn &&
+					'border border-border-subtle border-solid rounded-md shadow-sm hover:ring-2 hover:ring-border-interactive',
+				borderOn && checkedValue && 'ring-2 ring-border-interactive',
+				size === 'sm' ? 'px-3 py-3' : 'px-4 py-4',
+				'pr-12',
+				isDisabled && 'cursor-not-allowed'
+			) }
+			htmlFor={ radioButtonId }
+			/** js */
+			onClick={ handleLabelClick } // Toggle switch when label is clicked
+		>
+			{ !! label && (
+				<label
+					className={ cn(
+						'cursor-pointer',
+						isDisabled && 'cursor-not-allowed'
+					) }
+					htmlFor={ radioButtonId }
+				>
+					{ renderLabel() }
+				</label>
+			) }
+			<label
+				className={ cn(
+					'absolute mr-[2px] right-3 flex items-center cursor-pointer rounded-full',
+					reversePosition && 'left-0',
+					isDisabled && 'cursor-not-allowed'
+				) }
+			>
+				{ !! badgeItem && badgeItem }
+				{ ! hideSelection &&
+					( useSwitch ? (
+						<Switch
+							defaultValue={ false }
+							size={ size === 'md' ? 'lg' : 'sm' }
+							onChange={ () => {
+								if ( ! multiSelection ) {
+									// In single selection, only one can be on
+									onChange( value ); // Update the state to select this option
+								} else {
+									// In multi-selection, toggle the current state
+									onChange( value, ! checkedValue );
+								}
+							} }
+							checked={ checkedValue }
+						/>
+					) : (
+						<span className="relative">
+							<input
+								ref={ ref }
+								id={ radioButtonId }
+								type={ multiSelection ? 'checkbox' : 'radio' }
+								className={ cn(
+									"peer flex relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden !border-1.5 border-solid",
+									! multiSelection && 'rounded-full',
+									colorClassNames[ color ].checkbox,
+									sizeClassNames[ size ].checkbox,
+									isDisabled && disabledClassNames.checkbox
+								) }
+								name={ name }
+								value={ value }
+								onChange={ ( e ) => onChange( e.target.value ) }
+								checked={ checkedValue }
+								disabled={ isDisabled }
+								{ ...props }
+							/>
+							<span
+								className={ cn(
+									'inline-flex items-center absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100',
+									colorClassNames[ color ].icon,
+									isDisabled && disabledClassNames.icon
+								) }
+							>
+								{ multiSelection ? (
+									<Check
+										className={
+											size === 'sm' ? 'size-3' : 'size-4'
+										}
+									/>
+								) : (
+									<div
+										className={ cn(
+											'rounded-full bg-current',
+											size === 'sm' && 'mt-[2px]',
+											sizeClassNames[ size ]?.icon
+										) }
+									/>
+								) }
+							</span>
+						</span>
+					) ) }
+			</label>
+		</label>
+	);
+};
+const RadioButton = forwardRef( RadioButtonComponent );
+RadioButton.displayName = 'RadioButton.Button';
+
+const ButtonGroupItem = ( {
+	id,
+	children,
+	value,
+	disabled,
+	size = 'md',
+	...props
+} ) => {
+	const providerValue = useRadioButton();
+
+	const {
+		name,
+		value: selectedValue,
+		by,
+		onChange,
+		disableAll,
+		checked,
+	} = providerValue || {};
+
+	const radioButtonId = useMemo( () => id || `radio-button-${ nanoid() }`, [ id ] );
+	const isDisabled = useMemo(
+		() => disableAll || disabled,
+		[ disableAll, disabled ]
+	);
+
+	const checkedValue = useMemo( () => {
+		if ( typeof checked !== 'undefined' ) {
+			return checked;
+		}
+
+		if ( typeof selectedValue !== typeof value ) {
+			return false;
+		}
+		if ( typeof selectedValue === 'string' ) {
+			return selectedValue === value;
+		}
+
+		if ( Array.isArray( selectedValue ) ) {
+			return selectedValue.includes( value );
+		}
+
+		return selectedValue[ by ] === value[ by ];
+	}, [ selectedValue, value, checked, by ] );
+
+	const handleClick = () => {
+		if ( onChange ) {
+			onChange( value );
+		}
+	};
+
+	const disabledClasses = isDisabled
+		? 'text-text-disabled cursor-not-allowed'
+		: '';
+	const buttonClassName = cn(
+		baseClasses,
+		hoverClasses,
+		focusClasses,
+		disabledClasses,
+		sizes[ size ],
+		borderClasses
+	);
+
+	return (
+		<>
+			<button
+				type="button"
+				id={ radioButtonId }
+				className={ cn(
+					buttonClassName,
+					'first:rounded-tl first:rounded-bl first:border-0 first:border-r first:border-border-subtle last:rounded-tr last:rounded-br last:border-0',
+					checkedValue && 'bg-button-disabled'
+				) }
+				onClick={ handleClick }
+				disabled={ isDisabled }
+				{ ...props }
+			>
+				<input
+					type="hidden"
+					value={ value }
+					name={ name }
+					checked={ checkedValue }
+					onChange={ onChange }
+				/>
+				{ children }
+			</button>
+		</>
+	);
+};
+
+export default Object.assign( RadioButton, {
+	Group: RadioButtonGroup,
+	Button: RadioButton,
+} );
diff --git a/src/components/radio-button-group/radio-button-group.stories.js b/src/components/radio-button-group/radio-button-group.stories.js
new file mode 100644
index 00000000..6275ded7
--- /dev/null
+++ b/src/components/radio-button-group/radio-button-group.stories.js
@@ -0,0 +1,289 @@
+import React, { useState } from 'react';
+import RadioButton from './radio-button-group.jsx';
+import { Plus, Smile } from 'lucide-react';
+import Badge from '../badge/badge.jsx';
+
+export default {
+	title: 'Atoms/RadioButton',
+	component: RadioButton.Group,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		name: {
+			description: 'The name prop used for form control.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		style: {
+			description:
+				'Defines the style of the RadioGroup group. Options are "simple" and "tile".',
+			control: { type: 'select' },
+			options: [ 'simple', 'tile' ],
+			table: {
+				defaultValue: { summary: 'simple' },
+			},
+		},
+		size: {
+			control: { type: 'select' },
+			options: [ 'sm', 'md' ],
+			description: 'Defines the size of the Select component.',
+			defaultValue: 'md',
+		},
+		as: {
+			description:
+				'Specifies the wrapper element for the radio button group.',
+			control: {
+				type: 'text',
+			},
+			table: {
+				type: { summary: 'string | React.ElementType' },
+				defaultValue: { summary: 'div' },
+			},
+		},
+		value: {
+			description:
+				'The currently selected value in the RadioGroup group.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		defaultValue: {
+			description:
+				'The default value to be selected in the RadioGroup group.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		by: {
+			description: 'Used to compare the checked value. Typically "id".',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'id' },
+			},
+		},
+		disableGroup: {
+			description: 'Disables all buttons in the group when set to true.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		vertical: {
+			description: 'Arranges radio buttons vertically.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		columns: {
+			description:
+				'Sets the number of columns for arranging the radio buttons.',
+			control: 'number',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: 4 },
+			},
+		},
+		multiSelection: {
+			description: 'Allows selecting more than one option.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		onChange: {
+			description: 'Event handler function to listen to the change.',
+			action: 'changed',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		label: {
+			description:
+				'`RadioButton.Button` : Object containing heading and description for each RadioButton.',
+			control: {
+				type: 'object',
+			},
+			defaultValue: {
+				heading: 'Option',
+				description: 'Description',
+			},
+			table: {
+				type: { summary: 'object' },
+				defaultValue: {
+					summary: `{ heading: 'Option', description: 'Description' }`,
+				},
+			},
+		},
+		borderOn: {
+			description:
+				'`RadioButton.Button` : Adds a border around the button.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		useSwitch: {
+			description: '`RadioButton.Button` :Uses a switch for selection.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		icon: {
+			description:
+				'`RadioButton.Button` :Custom icon component to be displayed.',
+			control: {
+				type: 'text',
+			},
+			defaultValue: null,
+		},
+		inlineIcon: {
+			description:
+				'`RadioButton.Button` : Positions icon inline to the label.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		hideSelection: {
+			description:
+				'`RadioButton.Button` : Positions icon inline to the label.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		reversePosition: {
+			description:
+				'`RadioButton.Button` : Positions icon inline to the label.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		badgeItem: {
+			description: '`RadioButton.Button` : Badge Item to be displayed.',
+			control: {
+				type: 'text',
+			},
+			defaultValue: null,
+		},
+		disabled: {
+			description: '`RadioButton.Button` : Disables radio button.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+	},
+};
+
+const Template = ( args ) => {
+	const [ value, setValue ] = useState( args.value || args.defaultValue );
+
+	return (
+		<RadioButton.Group
+			{ ...args }
+			value={ value }
+			columns={ ( args.columns ?? args.style === 'tile' ) ? 6 : 3 }
+			onChange={ ( val ) => {
+				setValue( val );
+				args.onChange( val );
+			} }
+		>
+			{ [ 1, 2, 3, 4, 5, 6 ].map( ( num ) =>
+				args.style === 'tile' ? (
+					<RadioButton.Button
+						value={ `option${ num }` }
+						key={ num }
+						disabled={ args.disabled }
+					>
+						<Plus />
+					</RadioButton.Button>
+				) : (
+					<RadioButton.Button
+						key={ num }
+						value={ `option${ num }` }
+						label={
+							args.label ?? {
+								heading: `Option ${ num }`,
+								description: `Description ${ num }`,
+							}
+						}
+						borderOn={ args.borderOn }
+						disabled={ args.disabled }
+						useSwitch={ args.useSwitch }
+						icon={ args.icon ? <Smile /> : null }
+						inlineIcon={ args.inlineIcon }
+						hideSelection={ args.hideSelection }
+						reversePosition={ args.reversePosition }
+						badgeItem={
+							args.badgeItem ? (
+								<Badge
+									type="rounded"
+									label={ args.badgeItem }
+									icon={ null }
+									className="mr-2"
+									size="sm"
+									variant="green"
+									closable={ false }
+								/>
+							) : null
+						}
+					/>
+				)
+			) }
+		</RadioButton.Group>
+	);
+};
+
+export const SimpleRadioMd = ( args ) => <Template { ...args } />;
+SimpleRadioMd.args = {};
+SimpleRadioMd.storyName = 'Simple Radio Group - size md';
+
+export const SimpleRadioMulti = ( args ) => <Template { ...args } />;
+SimpleRadioMulti.args = {
+	borderOn: true,
+	icon: true,
+	multiSelection: true,
+};
+SimpleRadioMulti.storyName = 'Multi Selection';
+
+// Example 2: Tile Radio Group with more options
+export const TileRadio = ( args ) => <Template { ...args } style="tile" />;
+TileRadio.args = {
+	style: 'tile',
+	columns: 6,
+};
+TileRadio.storyName = 'Tile Radio Group';
+
+export const SimpleRadioSwitch = ( args ) => <Template { ...args } />;
+SimpleRadioSwitch.args = {
+	borderOn: true,
+	useSwitch: true,
+	multiSelection: true,
+};
+SimpleRadioSwitch.storyName = 'Switch Selection';
+
+export const SimpleRadioInline = ( args ) => <Template { ...args } />;
+SimpleRadioInline.args = {
+	borderOn: true,
+	icon: true,
+	inlineIcon: true,
+	label: { heading: 'Option' },
+	multiSelection: true,
+};
+SimpleRadioInline.storyName = 'Inline Icon';
diff --git a/src/components/radio-button-group/readme.md b/src/components/radio-button-group/readme.md
new file mode 100644
index 00000000..ce329f3e
--- /dev/null
+++ b/src/components/radio-button-group/readme.md
@@ -0,0 +1,182 @@
+# Radio Button Group
+
+## `RadioButton.Group` Props
+- **Description:** Wrapper for the button group.  
+
+### name (optional)
+- **type:** `string`
+- **description:** The name prop will be used for form.
+
+### value (For controlled component)
+- **type:** `boolean`
+- **default value:** `undefined`
+
+### defaultValue (For uncontrolled component)
+- **type:** `boolean`
+- **default value:** `false`
+
+### by (for comparing checked value)
+- **type:** `string`
+- **default value:** `id`
+- **description:** If value used in the component is an object that time for comparing checked value `by` will be used to check object property for the comparison.
+
+### as (optional)
+- **type:** `string` or `ReactComponent`
+- **default value:** `Fragment`
+- **description:** It will be used as a container for button groups. But by default it will not create any `div` or other wrapper since the default value is set to `Fragment`.
+
+###	onChange `(value) => void`
+- **type:** `function`
+- **description:** Event handler function to listen to the change. 
+
+### className
+- **type:** `string`
+- **default value:** undefined
+- **description:** Used to customize the container when as value is not equal to a `Fragment`.
+
+### style
+- **type:** `string`
+- **default value:** `simple`
+- **description:** Defines the style of the radio buttons. It can be set to `simple` for standard radio buttons or `tile` for button-style radio tiles.
+
+### size
+- **type:** `string`
+- **default value:** `md`
+- **Available sizes:** `sm` and `md`.
+
+### disableGroup
+- **type:**`boolean`
+- **default value:** `false`
+- **description:** The `disableGroup` prop will disable the component.
+
+### vertical
+- **type:**`boolean`
+- **default value:** `false`
+- **description:** The `vertical` prop arranges radio buttons in a vertical layout when `true`.
+
+### columns
+- **type:**`number`
+- **default value:** `4`
+- **description:** The `columns` prop sets the number of columns for arranging the radio buttons.
+
+### multiSelection
+- **type:**`boolean`
+- **default value:** `false`
+- **description:** The `multiSelection` prop allows selecting more than one option when set to `true`.
+
+
+## `RadioButton.Button` Props
+
+### id (optional)
+- **type:** `string`
+- **description:** By default it will generate and assign an id.
+
+### label (optional)
+- **type:** `object` || `ReactComponent`
+- **Object properties/format:** `{heading: 'Label heading', description:** 'Label description'}`
+The label also accepts a React component.
+
+### checked (optional)
+- **type:** `boolean`
+- **default value:** `undefined`
+- **description:** For manual comparison.
+
+
+### value
+- **type:** `boolean`
+- **default value:** `undefined`
+
+### disabled
+- **type:**`boolean`
+- **default value:** `false`
+- **description:** The `disabled` prop will disable the component.
+
+### required (optional)
+- **type:** `boolean`
+- **default value:** `undefined`
+- **description:** For form validation required prop value can be set to `true`.
+
+### icon
+- **type:** `String` or `ReactNode`
+- **default value:** `null`
+- **description:** Sets an icon to display on top of the label.
+
+### inlineIcon
+- **type:** `boolean`
+- **default value:** `false`
+- **description:** Sets icon position inline with the lable when `true`.
+
+### hideSelection
+- **type:** `boolean`
+- **default value:** `false`
+- **description:** Hides the radio selection when set to `true`.
+
+### reversePosition
+- **type:** `boolean`
+- **default value:** `false`
+- **description:** Switches the positions of the label and the radio button when set to `true`.
+
+### borderOn
+- **type:** `boolean`
+- **default value:** `false`
+- **description:** Adds a border to the radio button when set to `true`.
+
+### badgeItem
+- **type:** `String` or `ReactNode`
+- **default value:** `null`
+- **description:** Sets a badge to display for the radio button.
+
+### useSwitch
+- **type:** `boolean`
+- **default value:** `false`
+- **description:** Used Switch as radio button when set to `true`.
+
+## `RadioButton.Button` Props of Style `tile`
+
+### id (optional)
+- **type:** `string`
+- **description:** By default it will generate and assign an id.
+
+### value
+- **type:** `boolean`
+- **default value:** `undefined`
+
+### size
+- **type:** `string`
+- **default value:** `md`
+- **Available sizes:** `xs`, `sm` and `md`.
+
+### disabled
+- **type:**`boolean`
+- **default value:** `false`
+- **description:** The `disabled` prop will disable the component.
+
+### children
+- **Type:** `string` or `ReactNode`
+- **Description:** The children prop can be used to pass additional content, such as icons or custom elements, that will be displayed within the button.
+
+### Example:
+
+```
+<RadioButton.Group
+    name="food"
+    defaultValue="food-1"
+    onChange={ ( value ) => console.log( value ) }
+>
+    <RadioButton.Button value="food-1" />
+    <RadioButton.Button value="food-2" />
+    <RadioButton.Button value="food-3" />
+</RadioButton.Group>
+
+<RadioButton.Group
+    value={selectedValue}   
+    onChange={handleRadioChange}
+    style='tile'
+>
+    <RadioButton.Button value="option1"><Plus /></RadioButton.Button>
+    <RadioButton.Button value="option2"><Plus /></RadioButton.Button>
+    <RadioButton.Button value="option3"><Plus /></RadioButton.Button>
+</RadioButton.Group>
+
+
+```
\ No newline at end of file
diff --git a/src/components/radio-button-group/styles.js b/src/components/radio-button-group/styles.js
new file mode 100644
index 00000000..ad74941d
--- /dev/null
+++ b/src/components/radio-button-group/styles.js
@@ -0,0 +1,37 @@
+export const colorClassNames = {
+	primary: {
+		checkbox:
+			'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-4 focus:ring-focus',
+		icon: 'text-white',
+	},
+};
+export const disabledClassNames = {
+	checkbox:
+		'disabled:bg-white checked:disabled:bg-white disabled:border-border-disabled checked:disabled:border-border-disabled cursor-not-allowed',
+	icon: 'peer-disabled:text-border-disabled cursor-not-allowed',
+};
+
+export const sizeClassNames = {
+	sm: {
+		checkbox: 'size-4',
+		icon: 'size-1.5',
+	},
+	md: {
+		checkbox: 'size-5',
+		icon: 'size-2',
+	},
+};
+
+export const sizes = {
+	xs: 'py-1 px-1 text-sm gap-0.5 [&>svg]:h-4 [&>svg]:w-4',
+	sm: 'py-2 px-2 text-base gap-1 [&>svg]:h-4 [&>svg]:w-4',
+	md: 'py-2.5 px-2.5 text-base gap-1 [&>svg]:h-5 [&>svg]:w-5',
+};
+
+export const borderClasses =
+	'border-0 border-r border-border-subtle border-solid';
+
+export const baseClasses =
+	'bg-background-primary text-primary cursor-pointer flex items-center justify-center';
+export const hoverClasses = 'hover:bg-button-tertiary-hover';
+export const focusClasses = 'focus:outline-none';
diff --git a/src/components/select/component-style.js b/src/components/select/component-style.js
new file mode 100644
index 00000000..d57bfa96
--- /dev/null
+++ b/src/components/select/component-style.js
@@ -0,0 +1,51 @@
+export const sizeClassNames = {
+	sm: {
+		icon: '[&>svg]:size-4',
+		searchIcon: '[&>svg]:size-4',
+		selectButton:
+			'px-2 py-2 rounded text-xs font-medium leading-4 min-h-[2.25rem]',
+		multiSelect: 'pl-2 pr-2 py-1.5',
+		displaySelected: 'text-xs font-normal',
+		dropdown: 'rounded-md',
+		dropdownItemsWrapper: 'p-1.5',
+		searchbarWrapper: 'p-3 flex items-center gap-0.5',
+		searchbar: 'font-medium text-xs',
+		searchbarIcon: '[&>svg]:size-4',
+		label: 'text-xs font-medium',
+	},
+	md: {
+		icon: '[&>svg]:size-5',
+		searchIcon: '[&>svg]:size-5',
+		selectButton:
+			'px-2.5 py-2.5 rounded-md text-xs font-medium leading-4 min-h-[2.5rem]',
+		multiSelect: 'pl-2 pr-2.5 py-2',
+		displaySelected: 'text-sm font-normal',
+		dropdown: 'rounded-lg',
+		dropdownItemsWrapper: 'p-2',
+		searchbarWrapper: 'p-2.5 flex items-center gap-1',
+		searchbar: 'font-medium text-sm',
+		searchbarIcon: '[&>svg]:size-5',
+		label: 'text-sm font-medium',
+	},
+	lg: {
+		icon: '[&>svg]:size-6',
+		searchIcon: '[&>svg]:size-5',
+		selectButton:
+			'px-3 py-3 rounded-lg text-sm font-medium leading-5 min-h-[3rem]',
+		multiSelect: 'pl-2.5 pr-3 py-2.5',
+		displaySelected: 'text-sm font-normal',
+		dropdown: 'rounded-lg',
+		dropdownItemsWrapper: 'p-2',
+		searchbarWrapper: 'p-2.5 flex items-center gap-1',
+		searchbar: 'font-medium text-sm',
+		searchbarIcon: '[&>svg]:size-5',
+		label: 'text-base font-medium',
+	},
+};
+
+export const disabledClassNames = {
+	selectButton:
+		'group disabled:border-field-border-disabled [&:hover:has(:disabled)]:border-field-border-disabled',
+	icon: 'group-disabled:text-icon-disabled',
+	text: 'group-disabled:text-field-color-disabled',
+};
diff --git a/src/components/select/index.js b/src/components/select/index.js
new file mode 100644
index 00000000..8518c3bb
--- /dev/null
+++ b/src/components/select/index.js
@@ -0,0 +1 @@
+export { default } from './select.jsx';
diff --git a/src/components/select/readme.md b/src/components/select/readme.md
new file mode 100644
index 00000000..1a7fd90a
--- /dev/null
+++ b/src/components/select/readme.md
@@ -0,0 +1,162 @@
+# Select Component Documentation
+
+## Description
+
+The `Select` component is a versatile, customizable select component built with Tailwind CSS. It supports various sizes, types, and additional properties to suit different use cases.
+
+## `Select` Props
+
+### `id`
+- **Type:** `string`
+- **Default:** `undefined`
+- **Description:** The `id` attribute of the select element.
+
+### `value`
+- **Type:** `string | number | object | undefined`
+- **Default:** `undefined`
+- **Description:** Value of the select (for controlled component).
+
+### `defaultValue`
+- **Type:** `string | number | object | undefined`
+- **Default:** `undefined`
+- **Description:** Default value of the select (for uncontrolled component).
+
+### `onChange`
+- **Type:** `function`
+- **Default:** `undefined`
+- **Description:** Callback function to handle the change event.
+- **Signature:** `function(value: string | number | object): void`
+- **Parameters:**
+    - `value`: The selected value.
+
+### `by`
+- **Type:** `string`
+- **Default:** `"id"`
+- **Description:** Used to identify the selected value when value type is an `object`. Default is `"id"`.
+
+### `multiple`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** If true, it will allow multiple selection.
+
+### `combobox`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** If true, it will show a search box.
+
+### `size`
+- **Type:** `string`
+- **Default:** `"md"`
+- **Description:** Defines the style variant of the button. Options include:
+  - `"sm"`
+  - `"md"`
+  - `"lg"`
+
+### `disabled`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** If true, the select will be disabled.
+- **Default:** `false`
+
+
+## `Select.Button` Props
+
+### `icon`
+- **Type:** `ReactNode`
+- **Default:** `null`
+- **Description:** Icon to show in the select button.
+
+### `placeholder`
+- **Type:** `string`
+- **Default:** `"Select an option"`
+- **Description:** Placeholder text when there's no option selected.
+
+### `optionIcon`
+- **Type:** `ReactNode`
+- **Default:** `null`
+- **Description:** Icon to show in the selected option (for multi-select only).
+
+### `displayBy`
+- **Type:** `string`
+- **Default:** `"name"`
+- **Description:** Key that will be used to display the value when selected value is an object. Default is `"name"`.
+
+### `label`
+- **Type:** `string`
+- **Default:** `undefined`
+- **Description:** Label for the select component.
+
+## `Select.Options` Props
+
+### `searchBy` 
+- **Type:** `string`
+- **Default:** `"id"`
+- **Description:** The key that will be used to identify searched value using the key. Default is `"id"`.
+
+### `searchPlaceholder`
+- **Type:** `string`
+- **Default:** `"Search..."`
+- **Description:** Placeholder text for search box.
+- **Default:** `"Search..."`
+
+### `dropdownPortalRoot`
+- **Type:** `HTMLElement | null`
+- **Default:** `null`
+- **Description:** Root element where the dropdown will be rendered. It's helpful when the dropdown is rendered outside the parent container and scopped Tailwind CSS styles.
+
+### `dropdownPortalId`
+- **Type:** `string`
+- **Default:** `""`
+- **Description:** Id of the dropdown portal where the dropdown will be rendered. It's helpful when the dropdown is rendered outside the parent container and scopped Tailwind CSS styles.
+
+
+## `Select.Option` Props
+
+### `value`
+- **Type:** `string | number | object`
+- **Default:** `undefined`
+- **Description:** Value of the option.
+
+### `selected`
+- **Type:** `boolean | undefined`
+- **Default:** `undefined`
+- **Description:** If true, the option will be selected.
+
+### Basic Example
+
+```jsx
+import Select from './Select';
+
+const options = [
+	'Red',
+	'Orange',
+	'Yellow',
+	'Green',
+	'Cyan',
+	'Blue',
+	'Purple',
+	'Pink',
+];
+
+const App = () => (
+  <div>
+    <Select
+        onChange={ ( value ) => console.log( value ) }
+        multiple
+    >
+        <Select.Button label="Color" />
+        <Select.Options
+            dropdownPortalId="wpcontent"
+        >
+            { options.map( ( option, index ) => (
+                <Select.Option key={ index } value={ option }>
+                    { option }
+                </Select.Option>
+            ) ) }
+        </Select.Options>
+    </Select>
+  </div>
+);
+
+export default App;
+```
\ No newline at end of file
diff --git a/src/components/select/select-atom.stories.jsx b/src/components/select/select-atom.stories.jsx
new file mode 100644
index 00000000..4d3ec97a
--- /dev/null
+++ b/src/components/select/select-atom.stories.jsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import Select from './select';
+
+const options = [
+	{ id: '1', name: 'Red' },
+	{ id: '2', name: 'Orange' },
+	{ id: '3', name: 'Yellow' },
+	{ id: '4', name: 'Green' },
+	{ id: '5', name: 'Cyan' },
+	{ id: '6', name: 'Blue' },
+	{ id: '7', name: 'Purple' },
+	{ id: '8', name: 'Pink' },
+];
+
+export default {
+	title: 'Atoms/Select',
+	component: Select,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'atoms', 'autodocs' ],
+	argTypes: {
+		size: {
+			control: { type: 'radio' },
+			options: [ 'sm', 'md', 'lg' ],
+			description: 'Defines the size of the Select component.',
+			defaultValue: 'md',
+		},
+		multiple: {
+			control: { type: 'boolean' },
+			description: 'If true, multiple options can be selected.',
+			defaultValue: false,
+		},
+		combobox: {
+			control: { type: 'boolean' },
+			description: 'If true, it will enable search functionality.',
+			defaultValue: false,
+		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'If true, disables the Select component.',
+			defaultValue: false,
+		},
+		onChange: {
+			action: 'onChange',
+			description: 'Callback function when the selection changes.',
+		},
+		value: {
+			control: { type: 'text' },
+			description: 'Controlled value for the select component.',
+			defaultValue: undefined,
+		},
+		defaultValue: {
+			control: { type: 'text' },
+			description:
+				'Default value for the select (for uncontrolled component).',
+			defaultValue: undefined,
+		},
+		placeholder: {
+			control: { type: 'text' },
+			description: 'Placeholder text when no option is selected.',
+			defaultValue: 'Select an option',
+		},
+		label: {
+			control: { type: 'text' },
+			description: 'Label for the Select component.',
+			defaultValue: 'Select Color',
+		},
+	},
+};
+
+// Single Select Story
+export const SingleSelect = ( args ) => (
+	<div style={ { width: '300px' } }>
+		<Select { ...args }>
+			<Select.Button label={ args.label } />
+			<Select.Options dropdownPortalId="wpcontent">
+				{ options.map( ( option ) => (
+					<Select.Option key={ option.id } value={ option }>
+						{ option.name }
+					</Select.Option>
+				) ) }
+			</Select.Options>
+		</Select>
+	</div>
+);
+
+SingleSelect.args = {
+	size: 'md',
+	multiple: false,
+	combobox: false,
+	disabled: false,
+	defaultValue: undefined,
+	placeholder: 'Select an option',
+	label: 'Select Color',
+};
+
+// Multi-select Story
+export const MultiSelect = ( args ) => (
+	<div style={ { width: '300px' } }>
+		<Select { ...args } multiple>
+			<Select.Button label={ args.label } />
+			<Select.Options dropdownPortalId="wpcontent">
+				{ options.map( ( option ) => (
+					<Select.Option key={ option.id } value={ option }>
+						{ option.name }
+					</Select.Option>
+				) ) }
+			</Select.Options>
+		</Select>
+	</div>
+);
+
+MultiSelect.args = {
+	size: 'md',
+	multiple: true,
+	combobox: false,
+	disabled: false,
+	defaultValue: undefined,
+	placeholder: 'Select multiple options',
+	label: 'Select Multiple Colors',
+};
+
+export const SelectWithSearch = ( args ) => (
+	<div style={ { width: '300px' } }>
+		<Select { ...args } combobox>
+			<Select.Button label={ args.label } />
+			<Select.Options
+				searchBy="name"
+				dropdownPortalId="wpcontent"
+				searchPlaceholder={ args.placeholder }
+			>
+				{ options.map( ( option ) => (
+					<Select.Option key={ option.id } value={ option }>
+						{ option.name }
+					</Select.Option>
+				) ) }
+			</Select.Options>
+		</Select>
+	</div>
+);
+
+SelectWithSearch.args = {
+	size: 'md',
+	multiple: false,
+	combobox: true,
+	disabled: false,
+	defaultValue: undefined,
+	placeholder: 'Search...',
+	label: 'Search Color',
+};
diff --git a/src/components/select/select.jsx b/src/components/select/select.jsx
new file mode 100644
index 00000000..a128d1c0
--- /dev/null
+++ b/src/components/select/select.jsx
@@ -0,0 +1,707 @@
+import {
+	useState,
+	useCallback,
+	useMemo,
+	useRef,
+	createContext,
+	useContext,
+	Children,
+	cloneElement,
+	isValidElement,
+	useEffect,
+	useLayoutEffect,
+} from 'react';
+import { cn } from '@/utilities/functions';
+import { CheckIcon, ChevronDown, ChevronsUpDown, Search } from 'lucide-react';
+import {
+	useFloating,
+	useClick,
+	useDismiss,
+	useRole,
+	useListNavigation,
+	useInteractions,
+	FloatingFocusManager,
+	useTypeahead,
+	offset,
+	flip,
+	size,
+	autoUpdate,
+	FloatingPortal,
+} from '@floating-ui/react';
+import Badge from '../badge';
+import { nanoid } from 'nanoid';
+import { disabledClassNames, sizeClassNames } from './component-style';
+
+// Context to manage the state of the select component.
+const SelectContext = createContext();
+const useSelectContext = () => useContext( SelectContext );
+
+function SelectButton( {
+	children,
+	icon = null, // Icon to show in the select button.
+	placeholder = 'Select an option', // Placeholder text.
+	optionIcon = null, // Icon to show in the selected option.
+	displayBy = 'name', // Used to display the value. Default is 'name'.
+	label, // Label for the select component.
+} ) {
+	const {
+		sizeValue,
+		getReferenceProps,
+		getValues,
+		selectId,
+		refs,
+		isOpen,
+		multiple,
+		combobox,
+		setSelected,
+		onChange,
+		isControlled,
+		disabled,
+		by,
+	} = useSelectContext();
+
+	const badgeSize = {
+		sm: 'xs',
+		md: 'sm',
+		lg: 'md',
+	}?.[ sizeValue ];
+
+	// Get icon based on the Select component type and user provided icon.
+	const getIcon = useCallback( () => {
+		if ( icon ) {
+			return icon;
+		}
+
+		const iconClassNames =
+			'text-field-placeholder ' + disabledClassNames.icon;
+
+		return combobox ? (
+			<ChevronsUpDown className={ iconClassNames } />
+		) : (
+			<ChevronDown className={ iconClassNames } />
+		);
+	}, [ icon ] );
+
+	const renderSelected = useCallback( () => {
+		const selectedValue = getValues();
+
+		if ( ! selectedValue ) {
+			return null;
+		}
+
+		if ( typeof children === 'function' ) {
+			const childProps = {
+				value: selectedValue,
+				...( multiple ? { onClose: handleOnCloseItem } : {} ),
+			};
+			return children( childProps );
+		}
+
+		if ( multiple ) {
+			return selectedValue.map( ( valueItem, index ) => (
+				<Badge
+					icon={ optionIcon }
+					type="rounded"
+					key={ index }
+					size={ badgeSize }
+					onMouseDown={ handleOnCloseItem( valueItem ) }
+					label={
+						typeof valueItem === 'object'
+							? valueItem[ displayBy ]
+							: valueItem
+					}
+					closable={ true }
+					disabled={ disabled }
+				/>
+			) );
+		}
+
+		let renderValue =
+			typeof selectedValue === 'object'
+				? selectedValue[ displayBy ]
+				: selectedValue;
+
+		if ( isValidElement( children ) ) {
+			renderValue = children;
+		}
+
+		return (
+			<span
+				className={ cn(
+					sizeClassNames[ sizeValue ].displaySelected,
+					disabledClassNames.text
+				) }
+			>
+				{ renderValue }
+			</span>
+		);
+	}, [ getValues ] );
+
+	const handleOnCloseItem = ( value ) => ( event ) => {
+		event?.preventDefault();
+		event?.stopPropagation();
+
+		const selectedValues = [ ...( getValues() ?? [] ) ];
+		const selectedIndex = selectedValues.findIndex( ( val ) => {
+			if ( typeof val === 'object' ) {
+				return val[ by ] === value[ by ];
+			}
+			return val === value;
+		} );
+
+		if ( selectedIndex === -1 ) {
+			return;
+		}
+
+		selectedValues.splice( selectedIndex, 1 );
+
+		if ( ! isControlled ) {
+			setSelected( selectedValues );
+		}
+		if ( typeof onChange === 'function' ) {
+			onChange( selectedValues );
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-start gap-1.5 [&_*]:box-border box-border">
+			<label
+				className={ cn(
+					sizeClassNames[ sizeValue ]?.label,
+					'text-field-label'
+				) }
+				htmlFor={ selectId }
+			>
+				{ label }
+			</label>
+			<button
+				id={ selectId }
+				ref={ refs.setReference }
+				className={ cn(
+					'flex items-center justify-between border border-solid w-full box-border transition-colors duration-150 bg-white',
+					'border focus-visible:outline-none border-solid border-field-border',
+					! isOpen &&
+						'focus:ring-2 focus:ring-offset-4 focus:border-focus-border focus:ring-focus [&:hover:not(:focus):not(:disabled)]:border-border-strong',
+					sizeClassNames[ sizeValue ].selectButton,
+					multiple && sizeClassNames[ sizeValue ].multiSelect,
+					disabledClassNames.selectButton
+				) }
+				aria-labelledby="select-label"
+				tabIndex={ 0 }
+				disabled={ disabled }
+				{ ...getReferenceProps() }
+			>
+				{ /* Input and selected item container */ }
+				<div
+					className={ cn(
+						'flex-1 grid items-center justify-start gap-1.5 ',
+						getValues() && 'flex flex-wrap'
+					) }
+				>
+					{ /* Show Selected item/items (Multiselector) */ }
+					{ renderSelected() }
+
+					{ /* Placeholder */ }
+					{ ( multiple ? ! getValues()?.length : ! getValues() ) && (
+						<div
+							className={ cn(
+								'[grid-area:1/1/2/3] text-field-input',
+								sizeClassNames[ sizeValue ].displaySelected,
+								disabledClassNames.text
+							) }
+						>
+							{ placeholder }
+						</div>
+					) }
+				</div>
+				{ /* Suffix Icon */ }
+				<div
+					className={ cn(
+						'flex items-center [&>svg]:shrink-0',
+						sizeClassNames[ sizeValue ].icon
+					) }
+				>
+					{ getIcon() }
+				</div>
+			</button>
+		</div>
+	);
+}
+
+function SelectOptions( {
+	children,
+	searchBy = 'id', // Used to identify searched value using the key. Default is 'id'.
+	searchPlaceholder = 'Search...', // Placeholder text for search box.
+	dropdownPortalRoot = null, // Root element where the dropdown will be rendered.
+	dropdownPortalId = '', // Id of the dropdown portal where the dropdown will be rendered.
+} ) {
+	const {
+		isOpen,
+		context,
+		refs,
+		combobox,
+		floatingStyles,
+		getFloatingProps,
+		sizeValue,
+		setSearchKeyword,
+		setActiveIndex,
+		setSelectedIndex,
+		value,
+		selected,
+		getValues,
+		searchKeyword,
+		listContentRef,
+		by,
+	} = useSelectContext();
+
+	const initialSelectedValueIndex = useMemo( () => {
+		const currentValue = getValues();
+		let indexValue = 0;
+
+		if ( currentValue ) {
+			indexValue = Children.toArray( children ).findIndex( ( child ) => {
+				if ( typeof child.props.value === 'object' ) {
+					return child.props.value[ by ] === currentValue[ by ];
+				}
+				return child.props.value === currentValue;
+			} );
+		}
+
+		return indexValue === -1 ? 0 : indexValue;
+	}, [ value, selected, children ] );
+
+	useLayoutEffect( () => {
+		setActiveIndex( initialSelectedValueIndex );
+		setSelectedIndex( initialSelectedValueIndex );
+	}, [] );
+
+	// Render children based on the search keyword.
+	const renderChildren = useMemo( () => {
+		return Children.map( children, ( child, index ) => {
+			if ( ! isValidElement( child ) ) {
+				return null;
+			}
+			if ( searchKeyword ) {
+				const valueProp = child.props.value;
+				if ( typeof valueProp === 'object' ) {
+					if (
+						valueProp[ searchBy ]
+							.toLowerCase()
+							.indexOf( searchKeyword.toLowerCase() ) === -1
+					) {
+						return null;
+					}
+				} else if (
+					valueProp
+						.toLowerCase()
+						.indexOf( searchKeyword.toLowerCase() ) === -1
+				) {
+					return null;
+				}
+			}
+			return cloneElement( child, {
+				...child.props,
+				index,
+			} );
+		} );
+	}, [ searchKeyword, value, selected, children ] );
+	const childrenCount = Children.count( renderChildren );
+
+	// Update the content list reference.
+	useEffect( () => {
+		listContentRef.current = [];
+		Children.forEach( children, ( child ) => {
+			if ( ! isValidElement( child ) ) {
+				return;
+			}
+			if ( child.props.value ) {
+				if ( searchKeyword ) {
+					const valueProp = child.props.value;
+					if ( typeof valueProp === 'object' ) {
+						if (
+							valueProp[ searchBy ]
+								.toLowerCase()
+								.indexOf( searchKeyword.toLowerCase() ) === -1
+						) {
+							return;
+						}
+					} else if (
+						valueProp
+							.toLowerCase()
+							.indexOf( searchKeyword.toLowerCase() ) === -1
+					) {
+						return;
+					}
+				}
+
+				listContentRef.current.push( child.props.value );
+			}
+		} );
+	}, [ searchKeyword ] );
+
+	return (
+		<>
+			{ /* Dropdown */ }
+			{ isOpen && (
+				<FloatingPortal id={ dropdownPortalId } root={ dropdownPortalRoot }>
+					<FloatingFocusManager context={ context } modal={ false }>
+						{ /* Dropdown Wrapper */ }
+						<div
+							ref={ refs.setFloating }
+							className={ cn(
+								'box-border [&_*]:box-border w-full bg-white outline-none shadow-lg border border-solid border-border-subtle overflow-hidden',
+								combobox &&
+									'grid grid-cols-1 grid-rows-[auto_1fr] divide-y divide-x-0 divide-solid divide-border-subtle',
+								sizeClassNames[ sizeValue ].dropdown,
+								! combobox && 'h-full'
+							) }
+							style={ {
+								...floatingStyles,
+							} }
+							{ ...getFloatingProps() }
+						>
+							{ /* Searchbox */ }
+							{ combobox && (
+								<div
+									className={ cn(
+										sizeClassNames[ sizeValue ]
+											.searchbarWrapper
+									) }
+								>
+									<Search
+										className={ cn(
+											'text-icon-secondary shrink-0',
+											sizeClassNames[ sizeValue ]
+												.searchbarIcon
+										) }
+									/>
+									<input
+										className={ cn(
+											'px-1 w-full placeholder:text-field-placeholder border-0 focus:outline-none focus:shadow-none',
+											sizeClassNames[ sizeValue ].searchbar
+										) }
+										type="search"
+										name="keyword"
+										placeholder={ searchPlaceholder }
+										onChange={ ( event ) =>
+											setSearchKeyword( event.target.value )
+										}
+										autoComplete="off"
+									/>
+								</div>
+							) }
+							{ /* Dropdown Items Wrapper */ }
+							<div
+								className={ cn(
+									'overflow-y-auto',
+									! combobox && 'w-full h-full',
+									sizeClassNames[ sizeValue ]
+										.dropdownItemsWrapper
+								) }
+							>
+								{ /* Dropdown Items */ }
+								{ !! childrenCount && renderChildren }
+
+								{ /* No items found */ }
+								{ ! childrenCount && (
+									<div className="p-2 text-center text-base font-medium text-field-placeholder">
+										No items found
+									</div>
+								) }
+							</div>
+						</div>
+					</FloatingFocusManager>
+				</FloatingPortal>
+			) }
+		</>
+	);
+}
+
+function SelectItem( { value, selected, children, ...props } ) {
+	const {
+		sizeValue,
+		getItemProps,
+		onKeyDownItem,
+		onClickItem,
+		activeIndex,
+		selectedIndex,
+		updateListRef,
+		getValues,
+		by,
+		multiple,
+	} = useSelectContext();
+	const { index: indx } = props;
+
+	const selectItemClassNames = {
+		sm: 'py-1.5 px-2 text-sm font-normal',
+		md: 'p-2 text-base font-normal',
+		lg: 'p-2 text-base font-normal',
+	};
+	const selectedIconClassName = {
+		sm: 'size-4',
+		md: 'size-5',
+		lg: 'size-5',
+	};
+
+	const multipleChecked = useMemo( () => {
+		if ( ! multiple ) {
+			return false;
+		}
+		const currentValue = getValues();
+		if ( ! currentValue ) {
+			return false;
+		}
+		return currentValue.some( ( val ) => {
+			if ( typeof val === 'object' ) {
+				return val[ by ] === value[ by ];
+			}
+			return val === value;
+		} );
+	}, [ value, getValues ] );
+
+	const isChecked = useMemo( () => {
+		if ( typeof selected === 'boolean' ) {
+			return selected;
+		}
+
+		if ( multiple ) {
+			return multipleChecked;
+		}
+
+		return indx === selectedIndex;
+	}, [ multipleChecked, selectedIndex, selected ] );
+
+	return (
+		<div
+			className={ cn(
+				'w-full flex items-center justify-between text-text-primary hover:bg-button-tertiary-hover rounded-md transition-all duration-150 cursor-pointer',
+				selectItemClassNames[ sizeValue ],
+				indx === activeIndex && 'bg-button-tertiary-hover'
+			) }
+			ref={ ( node ) => {
+				updateListRef( indx, node );
+			} }
+			role="option"
+			tabIndex={ indx === activeIndex ? 0 : -1 }
+			aria-selected={ isChecked && indx === activeIndex }
+			{ ...getItemProps( {
+				// Handle pointer select.
+				onClick() {
+					onClickItem( indx, value );
+				},
+				// Handle keyboard select.
+				onKeyDown( event ) {
+					onKeyDownItem( event, indx, value );
+				},
+			} ) }
+		>
+			<span className="w-full truncate">{ children }</span>
+			{ isChecked && (
+				<CheckIcon
+					className={ cn(
+						'text-icon-on-color-disabled',
+						selectedIconClassName[ sizeValue ]
+					) }
+				/>
+			) }
+		</div>
+	);
+}
+
+const Select = ( {
+	id,
+	size: sizeValue = 'md', // sm, md, lg
+	value, // Value of the select (for controlled component).
+	defaultValue, // Default value of the select (for uncontrolled component).
+	onChange, // Callback function to handle the change event.
+	by = 'id', // Used to identify the select component. Default is 'id'.
+	children,
+	multiple = false, // If true, it will allow multiple selection.
+	combobox = false, // If true, it will show a search box.
+	disabled = false, // If true, it will disable the select component.
+} ) => {
+	const selectId = useMemo( () => id || `select-${ nanoid() }`, [ id ] );
+	const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
+	const [ selected, setSelected ] = useState( defaultValue );
+	const [ searchKeyword, setSearchKeyword ] = useState( '' );
+
+	const getValues = useCallback( () => {
+		if ( isControlled ) {
+			return value;
+		}
+		return selected;
+	}, [ isControlled, value, selected ] );
+
+	// Dropdown position related code (Start)
+	const [ isOpen, setIsOpen ] = useState( false );
+	const [ activeIndex, setActiveIndex ] = useState();
+	const [ selectedIndex, setSelectedIndex ] = useState();
+
+	const dropdownMaxHeightBySize = {
+		sm: combobox ? 256 : 172,
+		md: combobox ? 256 : 216,
+		lg: combobox ? 256 : 216,
+	};
+
+	const { refs, floatingStyles, context } = useFloating( {
+		placement: 'bottom-start',
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset( 5 ),
+			flip( { padding: 10 } ),
+			size( {
+				apply( { rects, elements, availableHeight } ) {
+					Object.assign( elements.floating.style, {
+						maxHeight: `min(${ availableHeight }px, ${ dropdownMaxHeightBySize[ sizeValue ] }px)`,
+						maxWidth: `${ rects.reference.width }px`,
+					} );
+				},
+				padding: 10,
+			} ),
+		],
+	} );
+
+	const listRef = useRef( [] );
+	const listContentRef = useRef( [] );
+	const isTypingRef = useRef( false );
+
+	const click = useClick( context, { event: 'mousedown' } );
+	const dismiss = useDismiss( context );
+	const role = useRole( context, { role: 'listbox' } );
+	const listNav = useListNavigation( context, {
+		listRef,
+		activeIndex,
+		selectedIndex,
+		onNavigate: setActiveIndex,
+		// This is a large list, allow looping.
+		loop: true,
+	} );
+	const typeahead = useTypeahead( context, {
+		listRef: listContentRef,
+		activeIndex,
+		selectedIndex,
+		onMatch: isOpen ? setActiveIndex : setSelectedIndex,
+		onTypingChange( isTyping ) {
+			isTypingRef.current = isTyping;
+		},
+	} );
+
+	const { getReferenceProps, getFloatingProps, getItemProps } =
+		useInteractions( [
+			dismiss,
+			role,
+			listNav,
+			click,
+			...( ! combobox ? [ typeahead ] : [] ),
+		] );
+
+	const handleMultiSelect = ( index, newValue ) => {
+		const selectedValues = [ ...( getValues() ?? [] ) ];
+		const valueIndex = selectedValues.findIndex( ( selectedValue ) => {
+			if ( typeof selectedValue === 'object' ) {
+				return selectedValue[ by ] === newValue[ by ];
+			}
+			return selectedValue === newValue;
+		} );
+
+		if ( valueIndex !== -1 ) {
+			return;
+		}
+		selectedValues.push( newValue );
+
+		if ( ! isControlled ) {
+			setSelected( selectedValues );
+		}
+		setSelectedIndex( index );
+		refs.reference.current.focus();
+		setIsOpen( false );
+		setSearchKeyword( '' );
+		if ( typeof onChange === 'function' ) {
+			onChange( selectedValues );
+		}
+	};
+
+	const handleSelect = ( index, newValue ) => {
+		if ( multiple ) {
+			return handleMultiSelect( index, newValue );
+		}
+		setSelectedIndex( index );
+		if ( ! isControlled ) {
+			setSelected( newValue );
+		}
+		refs.reference.current.focus();
+		setIsOpen( false );
+		setSearchKeyword( '' );
+		if ( typeof onChange === 'function' ) {
+			onChange( newValue );
+		}
+	};
+	// Dropdown position related code (End)
+
+	const updateListRef = useCallback( ( index, node ) => {
+		listRef.current[ index ] = node;
+	}, [] );
+
+	const onClickItem = ( index, newValue ) => {
+		handleSelect( index, newValue );
+	};
+
+	const onKeyDownItem = ( event, index, newValue ) => {
+		if ( event.key === 'Enter' ) {
+			event.preventDefault();
+			handleSelect( index, newValue );
+		}
+
+		if ( event.key === ' ' && ! isTypingRef.current ) {
+			event.preventDefault();
+			handleSelect( index, newValue );
+		}
+	};
+
+	return (
+		<SelectContext.Provider
+			value={ {
+				selectedIndex,
+				setSelectedIndex,
+				activeIndex,
+				setActiveIndex,
+				selected,
+				setSelected,
+				handleSelect,
+				combobox,
+				sizeValue,
+				multiple,
+				onChange,
+				isTypingRef,
+				getItemProps,
+				onClickItem,
+				onKeyDownItem,
+				getValues,
+				selectId,
+				getReferenceProps,
+				isOpen,
+				value,
+				updateListRef,
+				refs,
+				listContentRef,
+				by,
+				getFloatingProps,
+				floatingStyles,
+				context,
+				searchKeyword,
+				setSearchKeyword,
+				disabled,
+			} }
+		>
+			{ children }
+		</SelectContext.Provider>
+	);
+};
+
+Select.Button = SelectButton;
+Select.Options = SelectOptions;
+Select.Option = SelectItem;
+
+export default Select;
diff --git a/src/components/select/select.stories.js b/src/components/select/select.stories.js
new file mode 100644
index 00000000..f36166d8
--- /dev/null
+++ b/src/components/select/select.stories.js
@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import Select from './select.jsx';
+import Label from '../label/label.jsx';
+
+export default {
+	title: 'Molecules/Select',
+	component: Select,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			name: 'Size',
+			description: 'Defines the size variant of the select',
+			control: { type: 'select' },
+			options: [ 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		multiple: {
+			name: 'Multiple',
+			description: 'If true, it will allow multiple selection.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		combobox: {
+			name: 'Combobox',
+			description: 'If true, it will show a search box.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		id: {
+			name: 'ID',
+			description: 'The `id` attribute of the select element.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		onChange: {
+			name: 'On Change Event',
+			description: 'Callback function to handle the change event.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		by: {
+			name: 'By',
+			description:
+				'Used to identify the selected value when value type is an `object`. Default is `"id"`.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'If true, the select will be disabled.',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+	},
+};
+
+const options = [
+	'Select Item 1',
+	'Select Item 2',
+	'Select Item 3',
+	'Select Item 4',
+	'Select Item 5',
+];
+
+const Template = ( args ) => {
+	const [ selected, setSelected ] = useState( args.multiple ? [] : '' );
+
+	return (
+		<div style={ { width: '260px' } }>
+			<Select { ...args } onChange={ setSelected } selected={ selected }>
+				<Select.Button label="Label" />
+				<Select.Options dropdownPortalId="surerank-dashboard">
+					{ options.map( ( option, index ) => (
+						<Select.Option key={ index } value={ option }>
+							{ option }
+						</Select.Option>
+					) ) }
+				</Select.Options>
+			</Select>
+			<Label size="sm" variant="help">
+				Hint text can be added here.
+				<a href="https://example.com">Link</a>.
+			</Label>
+		</div>
+	);
+};
+
+export const BasicSelect = ( args ) => Template( { ...args } );
+BasicSelect.args = {
+	size: 'md',
+	multiple: false,
+};
+
+export const Combobox = ( args ) => Template( { ...args } );
+Combobox.args = {
+	size: 'md',
+	combobox: true,
+	multiple: false,
+};
+
+export const Multiselect = ( args ) => Template( { ...args } );
+Multiselect.args = {
+	size: 'md',
+	multiple: true,
+};
+
+export const MultiselectCombobox = ( args ) => Template( { ...args } );
+MultiselectCombobox.args = {
+	size: 'md',
+	multiple: true,
+	combobox: true,
+};
diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js
new file mode 100644
index 00000000..82b730a4
--- /dev/null
+++ b/src/components/sidebar/index.js
@@ -0,0 +1 @@
+export { default } from './sidebar.jsx';
diff --git a/src/components/sidebar/readme.md b/src/components/sidebar/readme.md
new file mode 100644
index 00000000..5b16ae9d
--- /dev/null
+++ b/src/components/sidebar/readme.md
@@ -0,0 +1,94 @@
+# Sidebar Component Documentation
+
+## Description
+
+The `Sidebar`  component is a flexible left panel that enhances user navigation, featuring a `Header` for titles, a `Body` for interactive elements, and a `Footer` for additional actions. Customizable with props like `className` and `screenHeight`, it adapts to various screen sizes, ensuring optimal usability on both desktop and mobile devices.
+
+## `Sidebar` Props
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Elements to render inside the Sidebar container, typically the `Sidebar.Header`, `Sidebar.Body`, and `Sidebar.Footer` components.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional classes to customize the Sidebar container's styles.
+
+### `onCollapseChange`
+- **Type:** `(collapsed: boolean) => void`
+- **Description:** Callback function triggered when the Sidebar's collapse state changes. Use this to handle custom logic based on whether the Sidebar is collapsed or expanded.
+
+### `screenHeight`
+- **Type:** `boolean`
+- **default value:** `true`
+- **Description:** Controls whether the Sidebar should take up the full screen height. If `true`, the Sidebar will have a height equal to the viewport.
+
+### `borderOn`
+- **Type:** `boolean`
+- **default value:** `true`
+- **Description:** Controls whether the Sidebar should have border. If `true`, the Sidebar will have a border on the right.
+
+### `collapsible`
+- **Type:** `boolean`
+- **default value:** `true`
+- **Description:** Controls whether the Sidebar should collapsible. If `true`, the Sidebar will have a collapse button.
+
+## `Sidebar.Header` Props
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Elements to render inside the `Sidebar.Header` container, usually icons, logos, or navigation items.
+
+## `Sidebar.Body` Props
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Elements to render inside the `Sidebar.Body` container, usually navigation links, buttons, or other interactive elements.
+
+## `Sidebar.Footer` Props
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Elements to render inside the `Sidebar.Footer` container, typically icons, user profile, badges, or help buttons.
+
+## `Sidebar.Item` Props
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Content or components to render inside the `Sidebar.Item`.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional classes to customize the Item styling.
+
+```jsx
+    <Sidebar>
+        <Sidebar.Header>
+            <Sidebar.Item>
+                <Logo />
+            </Sidebar.Item>
+        </Sidebar.Header>
+
+        <Sidebar.Body align="Header">
+            <Sidebar.Item>
+                <div className='flex gap-2'>
+                    <div>Nav Item 1</div>
+                    <div>Nav item 2</div>
+                    <div>Nav Item 3</div>
+                </div>
+            </Sidebar.Item>
+            <Sidebar.Item>
+                <Button>Upgrade to Pro</Button>
+            </Sidebar.Item>
+        </Sidebar.Body>
+
+        <Sidebar.Footer>
+            <Sidebar.Item>
+                <Badge  />
+            </Sidebar.Item>
+            <Sidebar.Item>
+                <Avatar />
+            </Sidebar.Item>
+        </Sidebar.Footer>
+    </Sidebar>
+```
\ No newline at end of file
diff --git a/src/components/sidebar/sidebar.jsx b/src/components/sidebar/sidebar.jsx
new file mode 100644
index 00000000..69aba72e
--- /dev/null
+++ b/src/components/sidebar/sidebar.jsx
@@ -0,0 +1,161 @@
+import React, {
+	createContext,
+	useContext,
+	useState,
+	useRef,
+	useEffect,
+} from 'react';
+import { cn } from '@/utilities/functions';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import Tooltip from '../tooltip';
+const SidebarContext = createContext();
+
+const Sidebar = ( {
+	children,
+	className,
+	onCollapseChange,
+	collapsible = true,
+	screenHeight = true,
+	borderOn = true,
+	...props
+} ) => {
+	const sideBarRef = useRef( null );
+	const [ isCollapsed, setIsCollapsed ] = useState( () => {
+		const storedState = localStorage.getItem( 'sidebar-collapsed' );
+		const isSmallScreen = window.innerWidth < 1280;
+		if ( storedState ) {
+			return JSON.parse( storedState );
+		}
+		return isSmallScreen;
+	} );
+
+	useEffect( () => {
+		if ( onCollapseChange ) {
+			onCollapseChange( isCollapsed );
+		}
+	}, [ isCollapsed, onCollapseChange ] );
+
+	useEffect( () => {
+		const handleScreenResize = () => {
+			const isSmallScreen = window.innerWidth < 1280;
+			if ( ! collapsible ) {
+				setIsCollapsed( false );
+				localStorage.removeItem( 'sidebar-collapsed' );
+			} else if ( isSmallScreen ) {
+				setIsCollapsed( true );
+				localStorage.setItem(
+					'sidebar-collapsed',
+					JSON.stringify( true )
+				);
+			} else {
+				const storedState =
+						localStorage.getItem( 'sidebar-collapsed' );
+				setIsCollapsed(
+					storedState ? JSON.parse( storedState ) : false
+				);
+			}
+
+			if ( sideBarRef.current ) {
+				if ( !! screenHeight ) {
+					sideBarRef.current.style.height = `${ window.innerHeight }px`;
+				} else {
+					sideBarRef.current.style.height = 'auto';
+				}
+			}
+		};
+
+		window.addEventListener( 'resize', handleScreenResize );
+		handleScreenResize();
+
+		return () => {
+			window.removeEventListener( 'resize', handleScreenResize );
+		};
+	}, [ screenHeight, collapsible ] );
+
+	return (
+		<SidebarContext.Provider
+			value={ { isCollapsed, setIsCollapsed, collapsible } }
+		>
+			<div
+				ref={ sideBarRef }
+				className={ cn(
+					'overflow-auto w-72 px-4 py-4 gap-4 flex flex-col bg-background-primary',
+					borderOn &&
+						'border-0 border-r border-solid border-border-subtle',
+					!! screenHeight && 'h-screen',
+					'transition-all duration-200',
+					isCollapsed && 'w-16 px-2',
+					className
+				) }
+				{ ...props }
+			>
+				{ children }
+			</div>
+		</SidebarContext.Provider>
+	);
+};
+Sidebar.displayName = 'Sidebar';
+
+const SidebarHeader = ( { children } ) => {
+	return <div className="space-y-2">{ children }</div>;
+};
+SidebarHeader.displayName = 'Sidebar.Header';
+
+const SidebarBody = ( { children } ) => {
+	return <div className={ cn( 'space-y-4 grow items-start' ) }>{ children }</div>;
+};
+SidebarBody.displayName = 'Sidebar.Body';
+
+const SidebarFooter = ( { children } ) => {
+	const { isCollapsed, setIsCollapsed, collapsible } =
+		useContext( SidebarContext );
+	return (
+		<div className="space-y-4">
+			{ children }
+			{ collapsible && (
+				<button
+					className={ cn(
+						'bg-transparent w-full border-0 p-0 m-0 flex items-center gap-2 text-base cursor-pointer',
+						isCollapsed && 'justify-center'
+					) }
+					onClick={ () => {
+						setIsCollapsed( ! isCollapsed );
+
+						localStorage.setItem(
+							'sidebar-collapsed',
+							JSON.stringify( ! isCollapsed )
+						);
+					} }
+					aria-label={
+						isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'
+					}
+				>
+					{ isCollapsed ? (
+						<>
+							<Tooltip title="Expand" placement="right">
+								<PanelLeftOpen className="size-5" />
+							</Tooltip>
+						</>
+					) : (
+						<>
+							<PanelLeftClose className="size-5" /> Collapse
+						</>
+					) }
+				</button>
+			) }
+		</div>
+	);
+};
+SidebarFooter.displayName = 'Sidebar.Footer';
+
+const SidebarItem = ( { children, className } ) => {
+	return <div className={ cn( 'w-full', className ) }>{ children }</div>;
+};
+SidebarItem.displayName = 'Sidebar.Item';
+
+export default Object.assign( Sidebar, {
+	Header: SidebarHeader,
+	Body: SidebarBody,
+	Footer: SidebarFooter,
+	Item: SidebarItem,
+} );
diff --git a/src/components/sidebar/sidebar.stories.js b/src/components/sidebar/sidebar.stories.js
new file mode 100644
index 00000000..982adec4
--- /dev/null
+++ b/src/components/sidebar/sidebar.stories.js
@@ -0,0 +1,186 @@
+import Sidebar from './sidebar';
+import Button from '../button';
+import { useState } from 'react';
+import {
+	Store,
+	PenTool,
+	ShoppingBag,
+	ShoppingCart,
+	Tag,
+	Truck,
+	CreditCard,
+	MousePointer,
+	RefreshCcw,
+	ChartNoAxesColumnIncreasing,
+} from 'lucide-react';
+
+export default {
+	title: 'Organisms/Sidebar',
+	component: Sidebar,
+	parameters: {
+		layout: 'left',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		children: {
+			description:
+				'Content to render inside the Sidebar. This typically includes `Sidebar.Header`, `Sidebar.Body`, and `Sidebar.Footer` components.',
+			control: { type: 'none' },
+		},
+		className: {
+			description:
+				'Optional custom CSS classes to apply to the Sidebar container for styling.',
+			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		borderOn: {
+			description:
+				'Controls whether a border should appear on the right of the Sidebar.',
+			control: { type: 'boolean' },
+			defaultValue: true,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: true },
+			},
+		},
+		collapsible: {
+			description:
+				'Determines if the Sidebar can be collapsed or not. If `true`, a collapse button is shown.',
+			control: { type: 'boolean' },
+			defaultValue: true,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: true },
+			},
+		},
+		screenHeight: {
+			description:
+				'Determines whether the Sidebar should occupy the full screen height.',
+			control: { type: 'boolean' },
+			defaultValue: true,
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: true },
+			},
+		},
+		onCollapseChange: {
+			description:
+				'Callback function triggered when the Sidebar collapse state changes. Use this to handle logic based on collapse/expand states.',
+			action: 'onCollapseChange',
+		},
+	},
+};
+
+const Template = ( args ) => {
+	const menuData = [
+		{
+			heading: 'Store',
+			items: [
+				{ icon: <Store size={ 20 } />, label: 'Store Settings' },
+				{
+					icon: <PenTool size={ 20 } />,
+					label: 'Design & Branding',
+					disabled: true,
+				},
+			],
+		},
+		{
+			heading: 'Orders & Sales',
+			items: [
+				{ icon: <ShoppingBag size={ 20 } />, label: 'Orders & Receipts' },
+				{
+					icon: <ShoppingCart size={ 20 } />,
+					label: 'Abandoned Checkout',
+					active: true,
+				},
+				{ icon: <Tag size={ 20 } />, label: 'Taxes' },
+				{ icon: <Truck size={ 20 } />, label: 'Shipping' },
+				{ icon: <CreditCard size={ 20 } />, label: 'Payment Processors' },
+			],
+		},
+		{
+			heading: 'Customers',
+			items: [
+				{ icon: <MousePointer size={ 20 } />, label: 'Affiliates' },
+				{ icon: <RefreshCcw size={ 20 } />, label: 'Subscriptions' },
+				{
+					icon: <ChartNoAxesColumnIncreasing size={ 20 } />,
+					label: 'Subscriptions Saver',
+				},
+			],
+		},
+	];
+	const [ sidebarCollapsed, setSidebarCollapsed ] = useState( false );
+	return (
+		<Sidebar
+			{ ...args }
+			onCollapseChange={ ( isCollapsed ) => {
+				setSidebarCollapsed( isCollapsed );
+			} }
+		>
+			<Sidebar.Header>
+				<Sidebar.Item
+					className={ sidebarCollapsed && 'flex justify-center' }
+				>
+					<img
+						width={ sidebarCollapsed ? '40px' : '180px' }
+						alt="Logo"
+						src={
+							sidebarCollapsed
+								? 'https://avatars.githubusercontent.com/u/4979824?s=200&v=4'
+								: 'https://wordpress.org/five-for-the-future/files/2019/09/bsf-logo-.png'
+						}
+					/>
+				</Sidebar.Item>
+			</Sidebar.Header>
+			<Sidebar.Body>
+				<Sidebar.Item>
+					<div className="flex flex-col gap-2">
+						{ menuData.map( ( section, sectionIndex ) => (
+							<div key={ sectionIndex }>
+								<p className="text-slate-500">
+									{ ! sidebarCollapsed && section.heading }
+								</p>
+								<div>
+									{ section.items.map( ( item, itemIndex ) => (
+										<div
+											key={ itemIndex }
+											className={ `px-2 py-1 flex items-center gap-2 cursor-pointer rounded-md hover:bg-slate-100 ${ sidebarCollapsed && 'justify-center' }` }
+										>
+											<span className="mt-[4px]">
+												{ item.icon }
+											</span>
+											{ ! sidebarCollapsed && (
+												<span className="text-base">
+													{ item.label }
+												</span>
+											) }
+										</div>
+									) ) }
+								</div>
+							</div>
+						) ) }
+					</div>
+				</Sidebar.Item>
+			</Sidebar.Body>
+			<Sidebar.Footer>
+				<Sidebar.Item>
+					<Button className="w-full">
+						{ sidebarCollapsed ? 'Pro' : 'Pro Version' }
+					</Button>
+				</Sidebar.Item>
+			</Sidebar.Footer>
+		</Sidebar>
+	);
+};
+
+export const DefaultSidebar = Template.bind( {} );
+DefaultSidebar.args = {
+	screenHeight: true,
+	borderOn: true,
+	collapsible: true,
+};
+
+DefaultSidebar.storyName = 'Sidebar';
diff --git a/src/components/skeleton/index.js b/src/components/skeleton/index.js
new file mode 100644
index 00000000..2b27ed8f
--- /dev/null
+++ b/src/components/skeleton/index.js
@@ -0,0 +1 @@
+export { default } from './skeleton.jsx';
diff --git a/src/components/skeleton/readme.md b/src/components/skeleton/readme.md
new file mode 100644
index 00000000..1ff3f15c
--- /dev/null
+++ b/src/components/skeleton/readme.md
@@ -0,0 +1,40 @@
+# Skeleton Component Documentation
+
+## Description
+
+The `Skeleton` component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video.
+
+## Props
+
+### `variant`
+- **Type:** `string`
+- **Default:** `"rectangular"`
+- **Description:** Defines the style variant of the skeleton. Options include:
+  - `"rectangular"` 
+  - `"circular"`
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the skeleton component, allowing for further customization with Tailwind CSS.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { Skeleton } from '@bsf/force-ui';
+
+const App = () => (
+    <div>
+        {/* Rectangular skeleton representing a text block */}
+        <Skeleton variant="rectangular" className="w-full h-4" />
+        {/* Circular skeleton representing an avatar */}
+        <Skeleton variant="circular" className="w-10 h-10 " />
+        {/* Rectangular skeleton representing a image or video*/}
+        <Skeleton variant="rectangular" className="w-64 h-12" />
+    </div>
+);
+
+export default App;
+```
+
diff --git a/src/components/skeleton/skeleton.jsx b/src/components/skeleton/skeleton.jsx
new file mode 100644
index 00000000..70ab0b91
--- /dev/null
+++ b/src/components/skeleton/skeleton.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { cn } from '@/utilities/functions';
+
+const Skeleton = ( {
+	variant = 'rectangular', // rectangular, circular
+	className,
+	...props
+} ) => {
+	const variantClasses = {
+		circular: 'rounded-full bg-gray-200 ',
+		rectangular: 'rounded-md bg-gray-200',
+	}?.[ variant ];
+
+	const defaultWidth = {
+		circular: 'size-10',
+		rectangular: 'w-96 h-3',
+	}?.[ variant ];
+
+	return (
+		<div
+			className={ cn(
+				variantClasses,
+				'animate-pulse',
+				defaultWidth,
+				className
+			) }
+			{ ...props }
+		></div>
+	);
+};
+
+export default Skeleton;
diff --git a/src/components/skeleton/skeleton.stories.js b/src/components/skeleton/skeleton.stories.js
new file mode 100644
index 00000000..3fc52de9
--- /dev/null
+++ b/src/components/skeleton/skeleton.stories.js
@@ -0,0 +1,44 @@
+import Skeleton from './skeleton.jsx';
+
+export default {
+	title: 'Atoms/Skeleton',
+	component: Skeleton,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the skeleton.',
+			control: 'select',
+			options: [ 'rectangular', 'circular' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'rectangular' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description:
+				'Allows you to pass custom classes to control the size and styles',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+export const Rectangular = ( args ) => <Skeleton { ...args } />;
+
+Rectangular.args = {
+	variant: 'rectangular',
+};
+
+export const Circular = ( args ) => <Skeleton { ...args } />;
+
+Circular.args = {
+	variant: 'circular',
+};
diff --git a/src/components/switch/index.js b/src/components/switch/index.js
new file mode 100644
index 00000000..9acc9465
--- /dev/null
+++ b/src/components/switch/index.js
@@ -0,0 +1 @@
+export { default } from './switch.jsx';
diff --git a/src/components/switch/readme.md b/src/components/switch/readme.md
new file mode 100644
index 00000000..71ca81ef
--- /dev/null
+++ b/src/components/switch/readme.md
@@ -0,0 +1,50 @@
+# Switch
+## Props
+
+### id (optional)
+- ****type:**** `string`
+- **description:** By default it will generate and assign an id.
+
+### name (optional)
+- **type:** `string`
+
+### label (optional)
+**type:** `object` || `ReactComponent`
+- **Object properties/format:** `{heading: 'Label heading,' description: 'Label description'}`
+The label also accepts a React component.
+
+### value (For controlled component)
+- **type:** `boolean`
+- **default value:** `undefined`
+
+### defaultValue (For uncontrolled component)
+- **type:** `boolean`
+- **default value:** `false`
+
+### onChange (Event handler)
+- **type:** `function`
+
+### size
+- **type:** `string`
+- **default value:** `lg`
+- **description:** For different sizes.
+- **Available sizes:** `sm` and `lg`
+
+### disabled
+- **type:**`boolean`
+- **default value:** `false`
+- **description:** The `disabled` prop will disable the component.
+
+### required (optional)
+- **type:** `boolean`
+- **default value:** `undefined`
+- **description:** For form validation required prop value can be set to true.
+
+#### Example:
+
+```
+<Switch
+    defaultValue={ true }
+    onChange={ ( value ) => console.log( value ) }
+ />
+```
diff --git a/src/components/switch/switch.jsx b/src/components/switch/switch.jsx
new file mode 100644
index 00000000..64a3170f
--- /dev/null
+++ b/src/components/switch/switch.jsx
@@ -0,0 +1,168 @@
+import {
+	useState,
+	useMemo,
+	useCallback,
+	forwardRef,
+	isValidElement,
+} from 'react';
+import { nanoid } from 'nanoid';
+import { cn } from '@/utilities/functions';
+
+const SwitchLabel = ( { label, switchId, disabled = false, children } ) => {
+	const isLabelAComponent = isValidElement( label );
+	if ( isLabelAComponent ) {
+		return (
+			<div
+				className={ cn( 'inline-flex items-center gap-3', 'items-start' ) }
+			>
+				{ children }
+				{ label }
+			</div>
+		);
+	}
+	const renderLabel = () => {
+		const { heading = '', description = '' } = label || {};
+		return (
+			<div className="space-y-1.5">
+				{ heading && (
+					<p className="text-text-primary text-base font-medium leading-4 m-0">
+						{ heading }
+					</p>
+				) }
+				{ description && (
+					<p className="text-text-secondary text-sm font-normal leading-5 m-0">
+						{ description }
+					</p>
+				) }
+			</div>
+		);
+	};
+
+	const isEmptyLabel = ! label?.heading && ! label?.description;
+	const alignmentClass =
+		! label?.heading || ! label?.description ? 'items-center' : 'items-start';
+
+	if ( isEmptyLabel ) {
+		return children;
+	}
+
+	return (
+		<div className={ cn( 'inline-flex', alignmentClass, 'gap-3' ) }>
+			{ children }
+			<label
+				htmlFor={ switchId }
+				className={ cn( ! disabled && 'cursor-pointer' ) }
+			>
+				{ renderLabel() }
+			</label>
+		</div>
+	);
+};
+
+const SwitchComponent = (
+	{
+		id,
+		onChange,
+		value,
+		defaultValue = false,
+		size = 'lg',
+		disabled = false,
+		label = { heading: '', description: '' },
+		name,
+		className,
+		...props
+	},
+	ref
+) => {
+	const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
+	const switchId = useMemo( () => ( id ? id : `switch-${ nanoid() }` ), [] );
+	const [ checked, setChecked ] = useState( defaultValue );
+	const color = 'primary';
+
+	const getValue = useCallback(
+		() => ( isControlled ? value : checked ),
+		[ isControlled, value, checked ]
+	);
+
+	const handleChange = ( event ) => {
+		if ( disabled ) {
+			return;
+		}
+
+		const newValue = event.target.checked;
+		if ( ! isControlled ) {
+			setChecked( newValue );
+		}
+
+		if ( typeof onChange !== 'function' ) {
+			return;
+		}
+		onChange( newValue );
+	};
+
+	const colorClassNames = {
+		primary: {
+			input: 'bg-toggle-off hover:bg-toggle-off-hover checked:bg-toggle-on checked:hover:bg-toggle-on-hover focus:ring focus:ring-toggle-on focus:ring-offset-4 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-none checked:focus:border-toggle-on-border focus:border-toggle-off-border',
+			toggleDial: 'bg-toggle-dial-background shadow-toggleDial',
+		},
+	};
+
+	const sizeClassNames = {
+		lg: {
+			container: 'w-11 h-6',
+			toggleDial:
+				'size-4 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-5 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4',
+		},
+		sm: {
+			container: 'w-9 h-5',
+			toggleDial:
+				'size-3 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4',
+		},
+	};
+
+	const disabledClassNames = {
+		input: 'bg-toggle-off-disabled disabled:border-transparent shadow-none disabled:cursor-not-allowed',
+		toggleDial: 'peer-disabled:cursor-not-allowed',
+	};
+
+	return (
+		<SwitchLabel label={ label } switchId={ switchId } disabled={ disabled }>
+			<div
+				className={ cn(
+					'relative inline-block cursor-pointer rounded-full shrink-0',
+					sizeClassNames[ size ].container,
+					className
+				) }
+			>
+				<input
+					ref={ ref }
+					id={ switchId }
+					type="checkbox"
+					className={ cn(
+						"peer appearance-none absolute bg-blue-gray-100 rounded-full cursor-pointer transition-colors duration-300 h-full w-full  before:content-[''] checked:before:content-[''] m-0 checked:[background-image:none]",
+						colorClassNames[ color ].input,
+						disabled && disabledClassNames.input
+					) }
+					checked={ getValue() }
+					onChange={ handleChange }
+					disabled={ disabled }
+					name={ name }
+					{ ...props }
+				/>
+				<label
+					htmlFor={ switchId }
+					className={ cn(
+						"bg-white border border-blue-gray-100 rounded-full absolute cursor-pointer shadow-md before:content[''] before:transition-opacity before:opacity-0 hover:before:opacity-10 before:hidden border-none transition-all duration-300",
+						sizeClassNames[ size ].toggleDial,
+						colorClassNames[ color ].toggleDial,
+						disabled && disabledClassNames.toggleDial
+					) }
+				/>
+			</div>
+		</SwitchLabel>
+	);
+};
+const Switch = forwardRef( SwitchComponent );
+Switch.displayName = 'Switch';
+
+export default Switch;
diff --git a/src/components/switch/switch.stories.js b/src/components/switch/switch.stories.js
new file mode 100644
index 00000000..ed9b502e
--- /dev/null
+++ b/src/components/switch/switch.stories.js
@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react';
+import Switch from './switch.jsx';
+
+export default {
+	title: 'Atoms/Switch',
+	component: Switch,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the switch.',
+			control: 'radio',
+			options: [ 'sm', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'lg' },
+			},
+		},
+		disabled: {
+			name: 'Sisabled',
+			description: 'Defines if the switch is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		label: {
+			name: 'Label',
+			description:
+				'Defines the label and description of the switch. Can be an object or a React element.',
+			table: {
+				type: { summary: 'object | ReactNode' },
+			},
+		},
+		name: {
+			name: 'Name',
+			description: 'Name attribute of the input element.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		onChange: {
+			name: 'On Change Event',
+			description:
+				'Callback function fired when the switch state changes.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		defaultValue: {
+			name: 'Default Value',
+			description: 'Default value for uncontrolled switch (true/false).',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+const Template = ( { defaultValue, size, ...args } ) => {
+	const [ checked, setChecked ] = useState( defaultValue );
+
+	useEffect( () => {
+		setChecked( defaultValue );
+	}, [ defaultValue ] );
+
+	const handleChange = ( newValue ) => {
+		setChecked( newValue );
+		if ( args.onChange ) {
+			args.onChange( newValue );
+		}
+	};
+
+	return (
+		<Switch { ...args } size={ size } value={ checked } onChange={ handleChange } />
+	);
+};
+
+export const Basic = ( args ) => Template( { ...args } );
+Basic.args = {
+	defaultValue: false,
+	size: 'lg',
+	disabled: false,
+};
+
+export const WithLabel = ( args ) => Template( { ...args } );
+WithLabel.args = {
+	defaultValue: true,
+	size: 'lg',
+	disabled: false,
+	label: { heading: 'Switch Label', description: 'Switch Description' },
+};
+
+export const Disabled = ( args ) => Template( { ...args } );
+Disabled.args = {
+	size: 'lg',
+	disabled: true,
+	label: {
+		heading: 'Disabled Switch',
+		description: 'This switch is disabled.',
+	},
+};
diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js
new file mode 100644
index 00000000..4792f9dc
--- /dev/null
+++ b/src/components/tabs/index.js
@@ -0,0 +1 @@
+export { default } from './tabs.jsx';
diff --git a/src/components/tabs/readme.md b/src/components/tabs/readme.md
new file mode 100644
index 00000000..08c87266
--- /dev/null
+++ b/src/components/tabs/readme.md
@@ -0,0 +1,108 @@
+# Tabs Component Documentation
+
+## Description
+
+The `Tabs` component is a flexible and customizable component built with Tailwind CSS. It supports various orientations, variants, sizes, and additional properties to suit different use cases.
+
+## Tabs.Group Props
+
+### `orientation`
+- **Type:** `string`
+- **Default:** `"horizontal"`
+- **Description:** Defines the orientation of the tabs. Options include:
+  - `"horizontal"`
+  - `"vertical"`
+
+### `variant`
+- **Type:** `string`
+- **Default:** `"pill"`
+- **Description:** Defines the style variant of the tabs. Options include:
+  - `"pill"`
+  - `"rounded"`
+  - `"underline"`
+
+### `size`
+- **Type:** `string`
+- **Default:** `"sm"`
+- **Description:** Defines the size of the tabs. Options include:
+  - `"xs"`
+  - `"sm"`
+  - `"md"`
+  - `"lg"`
+
+### `iconPosition`
+- **Type:** `string`
+- **Default:** `"left"`
+- **Description:** Defines the position of the icon inside the tab. Options include:
+  - `"left"`
+  - `"right"`
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the tabs.
+
+### `width`
+- **Type:** `string`
+- **Default:** `"auto"`
+- **Description:** Defines the width of the tabs. Options include:
+  - `"auto"`
+  - `"full"`
+
+### `activeItem`
+- **Type:** `string|null`
+- **Default:** `null`
+- **Description:** The currently active item in the group.
+
+### `onChange`
+- **Type:** `Function`
+- **Description:** Callback when the active item changes.
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** The content to be displayed inside the tabs.
+
+## Tabs.Tab Props
+
+### `slug`
+- **Type:** `string`
+- **Description:** Unique identifier for the tab.
+
+### `text`
+- **Type:** `string`
+- **Description:** Text to be displayed inside the tab.
+
+### `icon`
+- **Type:** `ReactNode`
+- **Description:** An optional icon to be displayed inside the tab.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the tab.
+
+### `disabled`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Defines whether the tab is disabled.
+
+### `badge`
+- **Type:** `ReactNode`
+- **Description:** An optional badge to be displayed alongside the tab text.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import Tabs from './Tabs';
+import { ReactComponent as ExampleIcon } from './icons/example.svg';
+
+const App = () => (
+  <div>
+    <Tabs.Group variant="rounded" size="md" orientation="horizontal">
+      <Tabs.Tab slug="tab1" text="Tab 1" icon={<ExampleIcon />} />
+      <Tabs.Tab slug="tab2" text="Tab 2" icon={<ExampleIcon />} />
+    </Tabs.Group>
+  </div>
+);
+
+export default App;
diff --git a/src/components/tabs/tabs.jsx b/src/components/tabs/tabs.jsx
new file mode 100644
index 00000000..82f02e0f
--- /dev/null
+++ b/src/components/tabs/tabs.jsx
@@ -0,0 +1,255 @@
+import React, {
+	useCallback,
+	forwardRef,
+	isValidElement,
+	createContext,
+	useContext,
+} from 'react';
+import { cn } from '@/utilities/functions';
+import { motion } from 'framer-motion';
+
+// Context for managing the TabsGroup state.
+const TabsGroupContext = createContext();
+
+// Hook to use the TabsGroup context.
+const useTabsGroup = () => useContext( TabsGroupContext );
+
+// TabsGroup component to wrap Tab components.
+const TabsGroup = ( props ) => {
+	const {
+		children,
+		activeItem = null, // The currently active item in the group.
+		onChange, // Callback when the active item changes.
+		className, // Additional class names for styling.
+		size = 'sm', // Size of the tabs in the group ('xs', 'sm', 'md', 'lg').
+		orientation = 'horizontal', // Orientation of the tabs ('horizontal', 'vertical').
+		variant = 'pill', // Style variant of the tabs ('pill', 'rounded', 'underline').
+		iconPosition = 'left', // Position of the icon in the tab ('left' or 'right').
+		width = 'full', // Width of the tabs ('auto' or 'full').
+	} = props;
+
+	// Handle change event.
+	const handleChange = useCallback(
+		( event, value ) => {
+			if ( onChange ) {
+				onChange( { event, value } );
+			}
+		},
+		[ onChange ]
+	);
+
+	// Determine styles based on the variant and orientation.
+	let borderRadius = 'rounded-full',
+		padding = 'p-1',
+		gap,
+		border = 'border border-tab-border border-solid';
+
+	if ( orientation === 'vertical' ) {
+		gap = 'gap-0.5';
+	} else if ( variant === 'rounded' || variant === 'pill' ) {
+		if ( size === 'xs' || size === 'sm' ) {
+			gap = 'gap-0.5';
+		} else if ( size === 'md' || size === 'lg' ) {
+			gap = 'gap-1';
+		}
+	}
+
+	if ( variant === 'rounded' || orientation === 'vertical' ) {
+		borderRadius = 'rounded-md';
+	} else if ( variant === 'underline' ) {
+		borderRadius = 'rounded-none';
+		padding = 'p-0';
+		border =
+			'border-t-0 border-r-0 border-l-0 border-b border-solid border-tab-border';
+		if ( size === 'xs' ) {
+			gap = 'gap-0';
+		} else if ( size === 'sm' ) {
+			gap = 'gap-2.5';
+		} else if ( size === 'md' || size === 'lg' ) {
+			gap = 'gap-3';
+		}
+	}
+
+	// Determine width classes.
+	const widthClasses = width === 'full' ? 'w-full' : '';
+	// Determine orientation classes.
+	const orientationClasses = orientation === 'vertical' ? 'flex-col' : '';
+
+	// Base classes for the TabsGroup.
+	const baseClasses = `box-border [&>*]:box-border flex items-center ${ widthClasses } ${ orientationClasses }`;
+
+	// Container background color.
+	const backgroundColorClass =
+		variant !== 'underline' ? 'bg-tab-background' : '';
+
+	// Merge classes.
+	const groupClassName = cn(
+		baseClasses,
+		borderRadius,
+		padding,
+		gap,
+		border,
+		backgroundColorClass,
+		className
+	);
+
+	return (
+		<div className={ groupClassName }>
+			<TabsGroupContext.Provider
+				value={ {
+					activeItem,
+					onChange: handleChange,
+					size,
+					variant,
+					orientation,
+					iconPosition,
+					width,
+				} }
+			>
+				{ React.Children.map( children, ( child ) => {
+					if ( ! isValidElement( child ) ) {
+						return null;
+					}
+					return React.cloneElement( child );
+				} ) }
+			</TabsGroupContext.Provider>
+		</div>
+	);
+};
+
+// Tab component to be used within a TabsGroup.
+const TabComponent = ( props, ref ) => {
+	const providerValue = useTabsGroup();
+	const {
+		slug,
+		text,
+		icon,
+		className,
+		disabled = false,
+		badge = null,
+		...rest
+	} = props;
+
+	if ( ! providerValue ) {
+		throw new Error( 'Tab should be used inside Tabs Group' );
+	}
+
+	const {
+		activeItem,
+		onChange,
+		size,
+		variant,
+		orientation,
+		iconPosition,
+		width,
+	} = providerValue;
+
+	// Determine size classes.
+	const sizes = {
+		xs: 'px-1.5 py-0.5 text-xs [&_svg]:size-3',
+		sm:
+			variant === 'underline'
+				? 'py-1.5 text-sm [&_svg]:size-4'
+				: 'px-3 py-1.5 text-sm [&_svg]:size-4',
+		md:
+			variant === 'underline'
+				? 'py-2 text-base [&_svg]:size-5'
+				: 'px-3.5 py-1.5 text-base [&_svg]:size-5',
+		lg:
+			variant === 'underline'
+				? 'p-2.5 text-lg [&_svg]:size-6'
+				: 'px-3.5 py-1.5 text-lg [&_svg]:size-6',
+	}[ size ];
+
+	// Determine width and orientation classes for tabs.
+	const fullWidth = width === 'full' ? 'flex-1' : '';
+	const orientationClasses =
+		orientation === 'vertical' ? 'w-full justify-between' : '';
+
+	// Base classes for the Tab.
+	const baseClasses = cn(
+		'relative border-none bg-transparent text-text-secondary cursor-pointer flex items-center justify-center transition-[box-shadow,color,background-color] duration-200',
+		fullWidth,
+		orientationClasses
+	);
+
+	const borderClasses = 'border-none';
+
+	let variantClasses = 'rounded-full';
+	if ( variant === 'rounded' ) {
+		variantClasses = 'rounded-md';
+	} else if ( variant === 'underline' ) {
+		variantClasses = 'rounded-none';
+	}
+
+	// Additional classes.
+	const hoverClasses = 'hover:text-text-primary group';
+	const focusClasses = 'focus:outline-none';
+	const disabledClasses = disabled
+		? 'text-text-disabled cursor-not-allowed'
+		: '';
+	const activeClasses =
+		activeItem === slug
+			? 'bg-background-primary text-text-primary shadow-sm'
+			: '';
+
+	// Merge classes.
+	const tabClassName = cn(
+		baseClasses,
+		borderClasses,
+		variantClasses,
+		hoverClasses,
+		focusClasses,
+		disabledClasses,
+		sizes,
+		activeClasses,
+		className
+	);
+
+	const iconParentClasses = 'flex items-center gap-1';
+
+	// Handle click event.
+	const handleClick = ( event ) => {
+		onChange( event, { slug, text } );
+	};
+
+	return (
+		<button
+			ref={ ref }
+			className={ tabClassName }
+			disabled={ disabled }
+			onClick={ handleClick }
+			{ ...rest }
+		>
+			{ activeItem === slug && variant === 'underline' && (
+				<motion.span
+					layoutId="underline"
+					className="absolute right-0 left-0 -bottom-px h-px bg-border-interactive"
+				/>
+			) }
+			<span className={ iconParentClasses }>
+				{ iconPosition === 'left' && icon && (
+					<span className="mr-1 contents center-center group-hover:text-text-primary">
+						{ icon }
+					</span>
+				) }
+				{ text }
+				{ iconPosition === 'right' && icon && (
+					<span className="ml-1 contents center-center group-hover:text-text-primary">
+						{ icon }
+					</span>
+				) }
+			</span>
+			{ badge && isValidElement( badge ) && badge }
+		</button>
+	);
+};
+const Tab = forwardRef( TabComponent );
+Tab.displayName = 'Tab';
+
+const exports = {
+	Group: TabsGroup,
+	Tab,
+};
+
+export default exports;
diff --git a/src/components/tabs/tabs.stories.jsx b/src/components/tabs/tabs.stories.jsx
new file mode 100644
index 00000000..6773a5db
--- /dev/null
+++ b/src/components/tabs/tabs.stories.jsx
@@ -0,0 +1,166 @@
+import { useState } from 'react';
+import Tabs from './tabs.jsx';
+import { House } from 'lucide-react';
+
+export default {
+	title: 'Atoms/Tabs',
+	component: Tabs.Group,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the tabs.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the tabs.',
+			control: 'select',
+			options: [ 'pill', 'rounded', 'underline' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'pill' },
+			},
+		},
+		orientation: {
+			name: 'Orientation',
+			description: 'Defines the orientation of the tabs.',
+			control: 'select',
+			options: [ 'horizontal', 'vertical' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'horizontal' },
+			},
+		},
+		width: {
+			name: 'Width',
+			description: 'Defines the width of the tabs.',
+			control: 'select',
+			options: [ 'auto', 'full' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'auto' },
+			},
+		},
+		iconPosition: {
+			name: 'Icon Position',
+			description: 'Defines the position of the icon.',
+			control: 'select',
+			options: [ 'left', 'right' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'left' },
+			},
+		},
+		defaultValue: {
+			name: 'Default Value',
+			description: 'Default value for Tab (true/false).',
+			control: 'string',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'string',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+const Template = ( args ) => {
+	const [ activeTab, setActiveTab ] = useState( args.defaultValue || 'tab1' );
+
+	const handleTabChange = ( data ) => {
+		const activeSlugName = data?.value?.slug || 'tab1';
+		if ( data && activeSlugName ) {
+			setActiveTab( activeSlugName );
+			if ( args.onChange ) {
+				args.onChange( activeSlugName );
+			}
+		}
+	};
+
+	return (
+		<Tabs.Group { ...args } activeItem={ activeTab } onChange={ handleTabChange }>
+			<Tabs.Tab slug="tab1" text="Tab 1" icon={ <House /> } />
+			<Tabs.Tab slug="tab2" text="Tab 2" icon={ <House /> } />
+			<Tabs.Tab slug="tab3" text="Tab 3" icon={ <House /> } />
+		</Tabs.Group>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	size: 'sm',
+	variant: 'pill',
+	orientation: 'horizontal',
+	width: 'auto',
+	iconPosition: 'left',
+	defaultValue: 'tab1',
+};
+
+// Basic Tabs Story
+export const Basic = {
+	args: {
+		size: 'sm',
+		variant: 'pill',
+		orientation: 'horizontal',
+		width: 'auto',
+		iconPosition: 'left',
+		defaultValue: 'tab1',
+	},
+	render: Template,
+};
+
+// Tabs with Rounded Variant
+export const Rounded = {
+	args: {
+		size: 'md',
+		variant: 'rounded',
+		orientation: 'horizontal',
+		width: 'auto',
+		iconPosition: 'left',
+		defaultValue: 'tab2',
+	},
+	render: Template,
+};
+
+// Vertical Tabs
+export const Vertical = {
+	args: {
+		size: 'lg',
+		variant: 'underline',
+		orientation: 'vertical',
+		width: 'full',
+		iconPosition: 'right',
+		defaultValue: 'tab2',
+	},
+	render: Template,
+};
+
+// Tabs with Custom Icons
+export const WithCustomIcons = {
+	args: {
+		size: 'sm',
+		variant: 'pill',
+		orientation: 'horizontal',
+		width: 'auto',
+		iconPosition: 'right',
+		defaultValue: 'tab3',
+	},
+	render: Template,
+};
diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js
new file mode 100644
index 00000000..0e857c15
--- /dev/null
+++ b/src/components/textarea/index.js
@@ -0,0 +1 @@
+export { default } from './textarea.jsx';
diff --git a/src/components/textarea/readme.md b/src/components/textarea/readme.md
new file mode 100644
index 00000000..36402d45
--- /dev/null
+++ b/src/components/textarea/readme.md
@@ -0,0 +1,62 @@
+# Text Area
+
+## Description
+
+Easily create Textarea with different styles using this component based on React and styled with Tailwind CSS. It is useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
+
+## Props
+
+### value
+- **Type:** `string`
+- **Default:** `""`
+- **Description:** Value of the input textarea field
+
+### size
+- **Type:** `string`
+- **Default:** `"sm"`
+- **Description:** Defines the size of the textarea field
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+
+### className
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the textarea.
+
+### disabled
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Disabled State of the text area
+    - `true`
+    - `false`
+
+### inputProps
+- **Type:** `object`
+- **Description:** Any additional props will be spread onto the textarea element. Ex, given below
+    - `required`
+    - `placeholder`
+    - `cols`
+    - `rows`
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { TextArea } from '@bsf/force-ui';
+
+const App = () => (
+  <div>
+    <TextArea inputProps={
+        {
+            required: true,
+            placeholder: "Hello There"
+        }} size="sm"/>
+    <TextArea size="lg" value={textval} onChange={((e)=>{console.log(e.target.value)})}/>
+    <TextArea disabled={ true } size="md"/>
+  </div>
+);
+
+export default App;
+```
+
diff --git a/src/components/textarea/textarea.jsx b/src/components/textarea/textarea.jsx
new file mode 100644
index 00000000..0fb3afd5
--- /dev/null
+++ b/src/components/textarea/textarea.jsx
@@ -0,0 +1,89 @@
+import { useState, useCallback, useMemo, forwardRef } from 'react';
+import { nanoid } from 'nanoid';
+import { cn } from '@/utilities/functions';
+
+const TextAreaComponent = (
+	{
+		id,
+		defaultValue = '',
+		value,
+		size = 'sm', // sm, md, lg
+		className = '',
+		disabled = false,
+		onChange = () => {},
+		error = false,
+		onError = () => {},
+		...props
+	},
+	ref
+) => {
+	const inputId = useMemo( () => id || `input-textarea-${ nanoid() }`, [ id ] );
+	const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
+	const [ inputValue, setInputValue ] = useState( defaultValue );
+
+	const getValue = useCallback(
+		() => ( isControlled ? value : inputValue ),
+		[ isControlled, value, inputValue ]
+	);
+
+	const handleChange = ( event ) => {
+		if ( disabled ) {
+			return;
+		}
+
+		const newValue = event.target.value;
+		if ( ! isControlled ) {
+			setInputValue( newValue );
+		}
+
+		if ( typeof onChange !== 'function' ) {
+			return;
+		}
+		onChange( newValue );
+	};
+
+	const baseClasses =
+		'py-2 rounded border border-solid border-border-subtle bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary';
+	const sizeClasses = {
+		sm: 'px-3 rounded text-xs',
+		md: 'px-3 rounded-md text-sm',
+		lg: 'px-4 rounded-lg text-base',
+	};
+
+	const hoverClasses = disabled
+		? 'hover:border-border-disabled'
+		: 'hover:border-border-strong';
+	const focusClasses =
+		'focus:border-focus-border focus:ring-2 focus:ring-toggle-on focus:ring-offset-2';
+	const errorClasses = error
+		? 'focus:border-focus-error-border focus:ring-field-color-error bg-field-background-error'
+		: '';
+	const disabledClasses = disabled
+		? 'border-border-disabled bg-field-background-disabled cursor-not-allowed text-text-disabled'
+		: '';
+
+	return (
+		<textarea
+			ref={ ref }
+			id={ inputId }
+			className={ cn(
+				baseClasses,
+				disabledClasses,
+				sizeClasses[ size ],
+				focusClasses,
+				hoverClasses,
+				errorClasses,
+				className
+			) }
+			disabled={ disabled }
+			onChange={ handleChange }
+			onInvalid={ onError }
+			value={ getValue() }
+			{ ...props }
+		/>
+	);
+};
+const TextArea = forwardRef( TextAreaComponent );
+TextArea.displayName = 'TextArea';
+
+export default TextArea;
diff --git a/src/components/textarea/textarea.stories.jsx b/src/components/textarea/textarea.stories.jsx
new file mode 100644
index 00000000..a544d56f
--- /dev/null
+++ b/src/components/textarea/textarea.stories.jsx
@@ -0,0 +1,122 @@
+import TextArea from './textarea.jsx';
+
+export default {
+	title: 'Atoms/TextArea',
+	component: TextArea,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the text area.',
+			control: 'select',
+			options: [ 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Disables the text area.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		error: {
+			name: 'Error',
+			description: 'Shows the error state of the text area.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		defaultValue: {
+			name: 'Default Value',
+			description: 'Initial value of the text area.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		value: {
+			name: 'Value',
+			description: 'Controlled value of the text area.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		onChange: {
+			name: 'On Change Event',
+			description: 'Callback when the value changes.',
+			action: 'changed',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		onError: {
+			name: 'On Error Event',
+			description: 'Callback when error occurs.',
+			action: 'changed',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Defines the extra classes',
+			control: 'string',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+};
+
+// Basic TextArea Story
+export const Basic = {
+	args: {
+		size: 'sm',
+		disabled: false,
+		error: false,
+		defaultValue: 'Basic TextArea',
+	},
+};
+
+// Disabled TextArea Story
+export const Disabled = {
+	args: {
+		size: 'md',
+		disabled: true,
+		error: false,
+		defaultValue: 'Disabled TextArea',
+	},
+};
+
+// TextArea with Error State Story
+export const ErrorState = {
+	args: {
+		size: 'md',
+		disabled: false,
+		error: true,
+		defaultValue: 'TextArea with Error',
+	},
+};
+
+// Large TextArea Story
+export const Large = {
+	args: {
+		size: 'lg',
+		disabled: false,
+		error: false,
+		defaultValue: 'Large TextArea',
+	},
+};
diff --git a/src/components/title/index.js b/src/components/title/index.js
new file mode 100644
index 00000000..3f4ef64c
--- /dev/null
+++ b/src/components/title/index.js
@@ -0,0 +1 @@
+export { default } from './title.jsx';
diff --git a/src/components/title/readme.md b/src/components/title/readme.md
new file mode 100644
index 00000000..f4c57ad6
--- /dev/null
+++ b/src/components/title/readme.md
@@ -0,0 +1,62 @@
+# Title
+
+## Description
+
+Title component - Title with icon and description.
+
+## Props
+
+### size
+- **Type:** `string`
+- **Default:** `"sm"`
+- **Description:** Defines the size of the title field
+    - `"xs"`
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+
+### tag
+- **Type:** `string`
+- **Default:** `"h2"`
+- **Description:** The HTML tag - h1, h2, h3, h4, h5, h6.
+
+
+### title
+- **Type:** `string`
+- **Description:** The content to be displayed inside the title.
+
+### description
+- **Type:** `string`
+- **Description:** The description wil be shown below the title.
+
+### className
+- **Type:** `string`
+- **Description:** Additional custom classes to be added to the title.
+
+### icon
+- **Type:** `ReactComponent`
+- **Default:** `null`
+- **Description:** Icon shown beside title
+
+### iconPosition
+- **Type:** `string`
+- **Description:** Position of the icon
+    - `before`
+    - `after`
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { Title } from '@bsf/force-ui';
+
+const App = () => (
+    <div>
+        <Title size="xs" title={'Extra Small Title'} icon={<House />} iconPosition={'left'} description={'this is a description'} />
+    </div>
+);
+
+export default App;
+```
+
diff --git a/src/components/title/title.jsx b/src/components/title/title.jsx
new file mode 100644
index 00000000..abb00c87
--- /dev/null
+++ b/src/components/title/title.jsx
@@ -0,0 +1,106 @@
+import { cn } from '@/utilities/functions';
+
+/**
+ * Title component.
+ */
+
+const Title = ( {
+	title = null,
+	description = null,
+	icon = null,
+	iconPosition = 'right', // left, right
+	tag = 'h2', // h1, h2, h3, h4, h5, h6
+	size = 'sm', // xs, sm, md, lg
+	className = '',
+} ) => {
+	// Base classes. - Mandatory classes.
+	const iconGap = {
+		xs: 'gap-1 [&>svg]:size-3.5',
+		sm: 'gap-1 [&>svg]:size-4',
+		md: 'gap-1.5 [&>svg]:size-5',
+		lg: 'gap-1.5 [&>svg]:size-5',
+	};
+
+	if ( ! title ) {
+		return null;
+	}
+
+	const getTitle = () => {
+		const Tag = tag;
+		const titleCommonClasses = 'font-semibold p-0 m-0';
+		// Size classes - Based on the size prop.
+		const sizeClasses = {
+			xs: 'text-base [&>*]:text-base gap-1',
+			sm: 'text-lg [&>*]:text-lg gap-1',
+			md: 'text-xl [&>*]:text-xl gap-1.5',
+			lg: 'text-2xl [&>*]:text-2xl gap-1.5',
+		};
+		return (
+			<Tag className={ cn( titleCommonClasses, sizeClasses[ size ] ) }>
+				{ title }
+			</Tag>
+		);
+	};
+
+	const getDescription = () => {
+		const descriptionClasses = {
+			xs: 'text-base',
+			sm: 'text-lg',
+			md: 'text-xl',
+			lg: 'text-2xl',
+		};
+		return (
+			<span
+				className={ cn(
+					'text-text-secondary font-normal',
+					descriptionClasses[ size ]
+				) }
+			>
+				{ description }
+			</span>
+		);
+	};
+
+	if ( description ) {
+		return (
+			<div className={ className }>
+				<div>
+					{ icon && iconPosition === 'left' && (
+						<div className={ cn( 'flex items-center', iconGap[ size ] ) }>
+							{ icon }
+							{ getTitle() }
+						</div>
+					) }
+					{ icon && iconPosition === 'right' && (
+						<div className={ cn( 'flex items-center', iconGap[ size ] ) }>
+							{ getTitle() }
+							{ icon }
+						</div>
+					) }
+					{ ! icon && getTitle() }
+				</div>
+				{ getDescription() }
+			</div>
+		);
+	}
+
+	return (
+		<div className={ className }>
+			{ icon && iconPosition === 'left' && (
+				<div className={ cn( 'flex items-center', iconGap[ size ] ) }>
+					{ icon }
+					{ getTitle() }
+				</div>
+			) }
+			{ icon && iconPosition === 'right' && (
+				<div className={ cn( 'flex items-center', iconGap[ size ] ) }>
+					{ getTitle() }
+					{ icon }
+				</div>
+			) }
+			{ ! icon && getTitle() }
+		</div>
+	);
+};
+
+export default Title;
diff --git a/src/components/title/title.stories.jsx b/src/components/title/title.stories.jsx
new file mode 100644
index 00000000..15b60d99
--- /dev/null
+++ b/src/components/title/title.stories.jsx
@@ -0,0 +1,123 @@
+import Title from './title.jsx';
+import { House } from 'lucide-react';
+
+export default {
+	title: 'Atoms/Title',
+	component: Title,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the title.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		tag: {
+			name: 'Tag',
+			description: 'Defines the HTML tag used for the title.',
+			control: 'select',
+			options: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'h2' },
+			},
+		},
+		title: {
+			name: 'Title',
+			description: 'The content to be displayed inside the title.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		description: {
+			name: 'Description',
+			description: 'The description displayed below the title.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		icon: {
+			name: 'Icon',
+			description: 'Icon displayed beside the title.',
+			control: 'none', // No direct control, will pass ReactNode
+			table: {
+				type: { summary: 'ReactNode' },
+			},
+		},
+		iconPosition: {
+			name: 'Icon Position',
+			description: 'Position of the icon relative to the title.',
+			control: 'select',
+			options: [ 'left', 'right' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'right' },
+			},
+		},
+		className: {
+			name: 'Class Name',
+			description: 'Additional custom classes for styling.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+	},
+};
+
+// Basic Title Story
+export const Basic = {
+	args: {
+		size: 'sm',
+		tag: 'h2',
+		title: 'Basic Title',
+		description: '',
+		icon: null,
+		iconPosition: 'right',
+	},
+};
+
+// Title with Description
+export const WithDescription = {
+	args: {
+		size: 'md',
+		tag: 'h2',
+		title: 'Title with Description',
+		description: 'This is a description below the title.',
+		icon: null,
+		iconPosition: 'right',
+	},
+};
+
+// Title with Icon on Left
+export const WithIconLeft = {
+	args: {
+		size: 'sm',
+		tag: 'h2',
+		title: 'Title with Icon',
+		description: '',
+		icon: <House />,
+		iconPosition: 'left',
+	},
+};
+
+// Title with Icon on Right
+export const WithIconRight = {
+	args: {
+		size: 'lg',
+		tag: 'h2',
+		title: 'Large Title with Icon',
+		description: 'This is a description with an icon on the right.',
+		icon: <House />,
+		iconPosition: 'right',
+	},
+};
diff --git a/src/components/toaster/component-style.js b/src/components/toaster/component-style.js
new file mode 100644
index 00000000..c54f56df
--- /dev/null
+++ b/src/components/toaster/component-style.js
@@ -0,0 +1,31 @@
+// Available positions: top-left, top-right, bottom-left, bottom-right
+export const positionClassNames = {
+	'top-left': 'top-0 bottom-0 left-0 justify-start items-start',
+	'top-right': 'top-0 bottom-0 right-0 justify-start items-end',
+	'bottom-left': 'top-0 bottom-0 left-0 justify-end items-start',
+	'bottom-right': 'top-0 bottom-0 right-0 justify-end items-end',
+};
+
+export const containerVariantClassNames = {
+	stack: 'w-[22.5rem]',
+	inline: 'lg:w-[47.5rem] w-full',
+};
+
+// Variant classes - Based on the variant prop.
+export const variantClassNames = {
+	light: {
+		neutral: 'border-alert-border-neutral bg-alert-background-neutral',
+		custom: 'border-alert-border-neutral bg-alert-background-neutral',
+		info: 'border-alert-border-info bg-alert-background-info',
+		success: 'border-alert-border-green bg-alert-background-green',
+		warning: 'border-alert-border-warning bg-alert-background-warning',
+		error: 'border-alert-border-danger bg-alert-background-danger',
+	},
+	dark: 'bg-background-inverse border-background-inverse',
+};
+
+// Close icon class names.
+export const closeIconClassNames = {
+	light: 'text-icon-secondary',
+	dark: 'text-icon-inverse',
+};
diff --git a/src/components/toaster/controller.js b/src/components/toaster/controller.js
new file mode 100644
index 00000000..dc61b129
--- /dev/null
+++ b/src/components/toaster/controller.js
@@ -0,0 +1,195 @@
+let toastCounter = 1;
+
+class ToastController {
+	#toasts;
+	#subscribers;
+
+	constructor() {
+		this.#toasts = [];
+		this.#subscribers = [];
+	}
+
+	// Subscriber pattern.
+	subscribe( callback ) {
+		this.#subscribers.push( callback );
+
+		// Return a callback for unsubscribe.
+		return () => {
+			this.#subscribers = this.#subscribers.filter(
+				( subscriber ) => subscriber !== callback
+			);
+		};
+	}
+
+	// Notify subscribers.
+	notify() {
+		this.#subscribers.forEach( ( subscriber ) => subscriber( this.#toasts ) );
+	}
+
+	// Publish a new toast.
+	publish( toast ) {
+		this.#subscribers.forEach( ( subscriber ) => subscriber( toast ) );
+	}
+
+	// Add a new toast.
+	add( toast ) {
+		this.#toasts.push( toast );
+
+		// Publish the new toast.
+		this.publish( toast );
+	}
+
+	// Remove a toast.
+	remove( id ) {
+		this.#toasts = this.#toasts.filter( ( toast ) => toast.id !== id );
+
+		return id;
+	}
+
+	// Create a new toast.
+	create( data ) {
+		const {
+			id = undefined,
+			message = '',
+			jsx = undefined,
+			...restData
+		} = data;
+
+		if ( ! message && typeof jsx !== 'function' ) {
+			return;
+		}
+
+		const toastId = typeof id === 'number' ? id : toastCounter++;
+		const toastExists = this.#toasts.find( ( toast ) => toast.id === toastId );
+
+		if ( toastExists ) {
+			// Update the existing toast.
+			this.#toasts = this.#toasts.map( ( toast ) => {
+				if ( toast.id === toastId ) {
+					this.publish( {
+						...toast,
+						title: message,
+						jsx,
+						...restData,
+					} );
+					return { ...toast, title: message, jsx, ...restData };
+				}
+				return toast;
+			} );
+		}
+
+		// Create a new toast.
+		this.add( { id: toastId, title: message, jsx, ...restData } );
+
+		return toastId;
+	}
+
+	// Update a toast.
+	update( id, data ) {
+		const { render = undefined } = data;
+		let updatedData = data;
+		switch ( typeof render ) {
+			case 'function':
+				updatedData = {
+					jsx: render,
+					...data,
+				};
+				break;
+			case 'string':
+				updatedData = {
+					title: render,
+					...data,
+				};
+				break;
+			default:
+				break;
+		}
+
+		this.#toasts = this.#toasts.map( ( toast ) => {
+			if ( toast.id === id ) {
+				this.publish( { ...toast, ...updatedData } );
+				return { ...toast, ...updatedData };
+			}
+			return toast;
+		} );
+	}
+
+	// Dismiss toast.
+	dismiss( id ) {
+		if ( ! id ) {
+			this.#toasts.forEach( ( toast ) =>
+				this.#subscribers.forEach( ( subscriber ) =>
+					subscriber( { id: toast.id, dismiss: true } )
+				)
+			);
+		}
+
+		this.#subscribers.forEach( ( subscriber ) =>
+			subscriber( { id, dismiss: true } )
+		);
+		return id;
+	}
+
+	// History of toasts.
+	history() {
+		return this.#toasts;
+	}
+
+	// Types of toasts.
+
+	// Default toast.
+	default( message = '', options = {} ) {
+		return this.create( { message, type: 'neutral', ...options } );
+	}
+
+	// Success toast.
+	success( message = '', options = {} ) {
+		return this.create( { message, type: 'success', ...options } );
+	}
+
+	// Error toast.
+	error( message = '', options = {} ) {
+		return this.create( { message, type: 'error', ...options } );
+	}
+
+	// Warning toast.
+	warning( message = '', options = {} ) {
+		return this.create( { message, type: 'warning', ...options } );
+	}
+
+	// Info toast
+	info( message = '', options = {} ) {
+		return this.create( { message, type: 'info', ...options } );
+	}
+
+	// Custom toast.
+	custom( jsx = () => {}, options = {} ) {
+		return this.create( {
+			jsx,
+			type: 'custom',
+			...options,
+		} );
+	}
+}
+
+export const ToastState = new ToastController();
+
+const defaultToast = ( message, options ) => ToastState.default( message, options );
+
+export const toast = Object.seal(
+	Object.assign(
+		defaultToast,
+		{
+			success: ToastState.success.bind( ToastState ),
+			error: ToastState.error.bind( ToastState ),
+			warning: ToastState.warning.bind( ToastState ),
+			info: ToastState.info.bind( ToastState ),
+			custom: ToastState.custom.bind( ToastState ),
+			dismiss: ToastState.dismiss.bind( ToastState ),
+			update: ToastState.update.bind( ToastState ),
+		},
+		{
+			getHistory: ToastState.history.bind( ToastState ),
+		}
+	)
+);
diff --git a/src/components/toaster/index.js b/src/components/toaster/index.js
new file mode 100644
index 00000000..de877515
--- /dev/null
+++ b/src/components/toaster/index.js
@@ -0,0 +1,2 @@
+export { default as Toaster } from './toaster';
+export { toast } from './controller';
diff --git a/src/components/toaster/readme.md b/src/components/toaster/readme.md
new file mode 100644
index 00000000..ec1e4a1e
--- /dev/null
+++ b/src/components/toaster/readme.md
@@ -0,0 +1,321 @@
+# Toaster Component Documentation
+
+## Description
+
+The `Toaster` component is a simple component that displays a message to the user. The message is displayed in a toast-like manner, appearing at the top of the screen and disappearing after a set amount of time.
+
+## `Toaster` Props
+
+### `position`
+- **Type:** `string`
+- **Default:** `'top-right'`
+- **Description:** The position of the toast notification. Possible values are: 
+    - `top-right`
+    - `top-left`
+    - `bottom-right` 
+    - `bottom-left`
+
+### `design`
+- **Type:** `string`
+- **Default:** `'stack'`
+- **Description:** The design layout of the toast notification. Possible values are: 
+    - `stack` 
+    - `inline`
+
+### `theme`
+- **Type:** `string`
+- **Default:** `'light'`
+- **Description:** The theme of the toast notification. Possible values are: 
+    - `light`
+    - `dark`
+
+### `className`
+- **Type:** `string`
+- **Default:** `''`
+- **Description:** Additional CSS class names to apply to the toast notification. For example, you can use this prop to apply gaps between toast notifications and view port edges.
+
+### `autoDismiss`
+- **Type:** `boolean`
+- **Default:** `true`
+- **Description:** Whether the toast notification should automatically dismiss after a certain time.
+
+### `dismissAfter`
+- **Type:** `number`
+- **Default:** `5000`
+- **Description:** The time in milliseconds after which the toast notification will be dismissed.
+
+
+## `toast` Function
+
+The `Toaster` component also exposes a `toast` function that can be used to display a toast notification programmatically. The function accepts the following parameters:
+
+### `options` Object
+- **Type:** `object`
+- **Description:** An object containing the following properties:
+    - `description`: The description to display in the toast notification.
+    - `icon`: Custom icon for the toast.
+    - `theme`: The theme of the toast notification. Possible values are: 
+        - `light`
+        - `dark`
+    - `autoDismiss`: Whether the toast notification should automatically dismiss after a certain time.
+    - `dismissAfter`: The time in milliseconds after which the toast notification will be dismissed.
+    - `action`: To show an action button in the toast notification.
+        - `label`: The label of the action button.
+        - `onClick`: The function to call when the action button is clicked.
+            - parameters: 
+                - `close`: A function to close the toast notification.
+        - `type`: The type of the action button. Possible values are: 
+            - `button`
+            - `link`
+- **Example:**
+    ```javascript
+    toast('Hello world title!', {
+        description: 'Hello World description!',
+        theme: 'light',
+        autoDismiss: true,
+        dismissAfter: 5000,
+        action: {
+            label: 'Undo',
+            onClick: (close) => {
+                console.log('Undo clicked');
+                close();
+            },
+            type: 'button'
+        }
+    });
+    ```
+
+### `Neutral toast`
+- **parameters:** 
+    - `content`: The content/title of the warning toast notification.
+    - `options`: An option object.
+- **usage:** `toast('Hello World!')`
+
+### `Success toast`
+- **parameters:** 
+    - `content`: The content/title of the warning toast notification.
+    - `options`: An option object.
+- **usage:** `toast.success('Hello World!')`
+
+### `Error toast`
+- **parameters:** 
+    - `content`: The content/title of the warning toast notification.
+    - `options`: An option object.
+- **usage:** `toast.error('Hello World!')`
+
+### `Warning toast`
+- **parameters:** 
+    - `content`: The content/title of the warning toast notification.
+    - `options`: An option object.
+- **usage:** `toast.warning('Hello World!')`
+
+### `Info toast`
+- **usage:** `toast.info('Hello World!')`
+
+### `Custom toast`
+- **parameters:** 
+    - `content`: A function that returns the content of the custom toast notification.
+        - Available parameters: 
+            - `close`: A function to close the toast notification.
+            - `action`: An object containing the action button properties.
+    - `options`: An option object.
+- **usage:** 
+
+```jsx
+toast.custom(
+    ({ close }) => (
+        <div className="text-black">
+            <p>Hello, I am a custom toast</p>
+            <button onClick={close}>Close</button>
+        </div>
+    ),
+    {
+        autoDismiss: false,
+    }
+);
+```
+
+### Example
+
+```jsx
+import React from 'react';
+import {Toaster, toast} from '@bsf/force-ui';
+
+const App = () => {
+    return (
+        <div className="flex gap-3 items-center justify-start flex-wrap m-4 p-4">
+            <Toaster dismissAfter={ 3000 } />
+            { /* Stack */ }
+            <div className="flex items-center justify-start gap-1 [&_*]:shrink-0">
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.success( 'Success stack toast', {
+                            description: 'This is a success description',
+                        } );
+                    } }
+                >
+                    Show Success Toast
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.info( 'Info stack toast', {
+                            description: 'This is an info description',
+                        } );
+                    } }
+                >
+                    Show Info Toast
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.warning( 'Warning stack toast', {
+                            description: 'This is a warning description',
+                        } );
+                    } }
+                >
+                    Show Warning Toast
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.error( 'Error stack toast', {
+                            description: 'This is an error description',
+                        } );
+                    } }
+                >
+                    Show Error Toast
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast( 'Default stack toast', {
+                            description: 'This is a default description',
+                        } );
+                    } }
+                >
+                    Show Default Toast
+                </Button>
+            </div>
+            { /* Dark */ }
+            <div className="flex items-center justify-start gap-1 [&_*]:shrink-0">
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.success( 'Success toast', {
+                            description: 'This is a success description',
+                            theme: 'dark',
+                        } );
+                    } }
+                >
+                    Show Dark Success Toast
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.info( 'Info toast', {
+                            description: 'This is an info description',
+                            theme: 'dark',
+                        } );
+                    } }
+                >
+                    Show Dark Info Toast
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.warning( 'Warning toast', {
+                            description: 'This is a warning description',
+                            theme: 'dark',
+                        } );
+                    } }
+                >
+                    Show Dark Warning Toast
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.error( 'Error toast', {
+                            description: 'This is an error description',
+                            theme: 'dark',
+                        } );
+                    } }
+                >
+                    Show Dark Error Toast
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast( 'Default toast', {
+                            description: 'This is a default description',
+                            theme: 'dark',
+                        } );
+                    } }
+                >
+                    Show Dark Default Toast
+                </Button>
+            </div>
+            <div className="flex items-center justify-start gap-1 [&_*]:shrink-0">
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.success( 'Success toast', {
+                            description: 'This is a success description',
+                            theme: 'light',
+                            action: {
+                                label: 'Undo',
+                                onClick: ( close ) => {
+                                    close();
+                                },
+                                type: 'button',
+                            },
+                        } );
+                    } }
+                >
+                    Show Light Success Toast with Action button
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.success( 'Success toast', {
+                            description: 'This is a success description',
+                            theme: 'dark',
+                            action: {
+                                label: 'Undo',
+                                onClick: ( close ) => {
+                                    close();
+                                },
+                                type: 'button',
+                            },
+                        } );
+                    } }
+                >
+                    Show Dark Success Toast with Action button
+                </Button>
+                <Button
+                    size="xs"
+                    onClick={ () => {
+                        toast.custom(
+                            ( { close } ) => (
+                                <div className="text-black">
+                                    <p>Hello, I am a custom toast</p>
+                                    <button onClick={ close }>Close</button>
+                                </div>
+                            ),
+                            {
+                                autoDismiss: false,
+                            }
+                        );
+                    } }
+                >
+                    Show Custom Toast
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+
+
+
diff --git a/src/components/toaster/toaster.jsx b/src/components/toaster/toaster.jsx
new file mode 100644
index 00000000..b9593f8b
--- /dev/null
+++ b/src/components/toaster/toaster.jsx
@@ -0,0 +1,275 @@
+import { useEffect, useRef, useState } from 'react';
+import { X } from 'lucide-react';
+import { ToastState } from './controller';
+import { withSingleton } from '@/hoc';
+import { cn } from '@/utilities/functions';
+import { getIcon, getAction, getContent, getTitle } from './utils';
+import {
+	closeIconClassNames,
+	containerVariantClassNames,
+	positionClassNames,
+	variantClassNames,
+} from './component-style';
+import { flushSync } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const Toaster = ( {
+	position = 'top-right', // top-right/top-left/bottom-right/bottom-left
+	design = 'stack', // stack/inline
+	theme = 'light', // light/dark
+	className = '',
+	autoDismiss = true, // Auto dismiss the toast after a certain time.
+	dismissAfter = 5000, // Time in milliseconds after which the toast will be dismissed.
+} ) => {
+	const [ toasts, setToasts ] = useState( [] );
+
+	useEffect( () => {
+		ToastState.subscribe( ( toastItem ) => {
+			if ( toastItem?.dismiss ) {
+				setToasts( ( prevToasts ) =>
+					prevToasts.map( ( tItem ) =>
+						tItem.id === toastItem.id
+							? { ...tItem, dismiss: true }
+							: tItem
+					)
+				);
+				return;
+			}
+
+			setTimeout( () => {
+				flushSync( () =>
+					setToasts( ( prevToasts ) => {
+						const itemExists = prevToasts.findIndex(
+							( tItem ) => tItem.id === toastItem.id
+						);
+						// Update the existing toast.
+						if ( itemExists !== -1 ) {
+							return prevToasts.map( ( tItem ) => {
+								if ( tItem.id === toastItem.id ) {
+									return { ...tItem, ...toastItem };
+								}
+								return tItem;
+							} );
+						}
+						return [ ...prevToasts, toastItem ];
+					} )
+				);
+			} );
+		} );
+	}, [] );
+
+	const removeToast = ( id ) => {
+		setToasts( ( prevToasts ) => prevToasts.filter( ( t ) => t.id !== id ) );
+	};
+
+	return (
+		<ul
+			className={ cn(
+				'fixed flex flex-col list-none z-20 p-10 pointer-events-none [&>li]:pointer-events-auto gap-3',
+				positionClassNames[ position ] ?? positionClassNames[ 'top-right' ],
+				className
+			) }
+		>
+			{ /* Main container */ }
+			<AnimatePresence initial={ false }>
+				{ toasts.map( ( toastItem ) => (
+					<motion.li
+						key={ toastItem.id }
+						positionTransition
+						initial={ { opacity: 0, y: 50, scale: 0.7 } }
+						animate={ { opacity: 1, y: 0, scale: 1 } }
+						exit={ {
+							opacity: 0,
+							scale: 0.6,
+							transition: { duration: 0.15 },
+						} }
+						layoutId={ `toast-${ toastItem.id }` }
+					>
+						<Toast
+							toastItem={ toastItem }
+							title={ toastItem.title }
+							content={ toastItem?.description }
+							icon={ toastItem?.icon ?? null }
+							design={ toastItem?.design ?? design }
+							autoDismiss={ toastItem?.autoDismiss ?? autoDismiss }
+							dismissAfter={
+								toastItem?.dismissAfter ?? dismissAfter
+							}
+							removeToast={ removeToast }
+							variant={ toastItem.type }
+							theme={ toastItem?.theme ?? theme }
+						/>
+					</motion.li>
+				) ) }
+			</AnimatePresence>
+		</ul>
+	);
+};
+
+export const Toast = ( {
+	toastItem,
+	title = null,
+	content = null,
+	autoDismiss = true,
+	dismissAfter = 5000,
+	theme = 'light', // light/dark
+	design = 'stack', // inline/stack
+	icon = null,
+	variant = 'neutral', // neutral/info/success/warning/danger
+	removeToast, // Function to remove the toast.
+} ) => {
+	const closeTimerStart = useRef( 0 );
+	const lastCloseTimerStart = useRef( 0 );
+	const timeoutId = useRef( 0 );
+
+	const startTimer = ( tItem, remainingTime = dismissAfter ) => {
+		// If auto dismiss is disabled, or the dismissAfter is less than 0, return.
+		if ( ! autoDismiss || dismissAfter < 0 ) {
+			return;
+		}
+
+		closeTimerStart.current = new Date().getTime();
+		return setTimeout( () => {
+			removeToast( tItem.id );
+		}, remainingTime );
+	};
+
+	const pauseTimer = () => {
+		clearTimeout( timeoutId.current );
+		lastCloseTimerStart.current = new Date().getTime();
+	};
+
+	const continueTimer = () => {
+		timeoutId.current = startTimer(
+			toastItem,
+			dismissAfter -
+				( lastCloseTimerStart.current - closeTimerStart.current )
+		);
+	};
+
+	// Start the timer when the component mounts.
+	useEffect( () => {
+		const remainingTime = dismissAfter;
+
+		timeoutId.current = startTimer( toastItem, remainingTime );
+		return () => {
+			clearTimeout( timeoutId.current );
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( ! toastItem?.dismiss ) {
+			return;
+		}
+		removeToast( toastItem.id );
+	}, [ toastItem ] );
+
+	const handleAction = () => {
+		toastItem?.action?.onClick?.( () => removeToast( toastItem.id ) );
+	};
+
+	let render = null;
+	if ( design === 'stack' ) {
+		render = (
+			<div
+				className={ cn(
+					'flex items-center justify-start p-4 gap-2 relative border border-solid rounded-md shadow-lg',
+					theme === 'dark'
+						? variantClassNames.dark
+						: variantClassNames.light?.[ variant ],
+					containerVariantClassNames.stack
+				) }
+				onMouseEnter={ pauseTimer }
+				onMouseLeave={ continueTimer }
+			>
+				{ toastItem.type !== 'custom' ? (
+					<>
+						<div className="self-start flex items-center justify-center [&_svg]:size-5 shrink-0">
+							{ getIcon( { variant, icon, theme } ) }
+						</div>
+						<div className="flex flex-col items-start justify-start gap-0.5">
+							{ getTitle( { title, theme } ) }
+							{ getContent( { content, theme } ) }
+							{
+								toastItem?.action?.label &&
+									typeof toastItem?.action?.onClick ===
+										'function' && (
+								/* eslint-disable */
+										<div className="mt-2.5">
+											{getAction({
+												actionLabel:
+													toastItem?.action?.label,
+												actionType:
+													toastItem?.action?.type ??
+													'button',
+												onAction: handleAction,
+												theme,
+											})}
+										</div>
+									)
+								/* eslint-enable */
+							}
+						</div>
+						<div className="absolute right-4 top-4 [&_svg]:size-5">
+							<button
+								className={ cn(
+									'bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer',
+									closeIconClassNames[ theme ] ??
+										closeIconClassNames.light
+								) }
+								onClick={ () => removeToast( toastItem.id ) }
+							>
+								<X />
+							</button>
+						</div>
+					</>
+				) : (
+					toastItem?.jsx?.( {
+						close: () => removeToast( toastItem.id ),
+						action: toastItem?.action
+							? { ...toastItem?.action, onClick: handleAction }
+							: null,
+					} )
+				) }
+			</div>
+		);
+	}
+
+	if ( design === 'inline' ) {
+		render = (
+			<div
+				className={ cn(
+					'flex items-center justify-start p-3 gap-2 relative border border-solid rounded-md shadow-lg',
+					theme === 'dark'
+						? variantClassNames.dark
+						: variantClassNames.light?.[ variant ],
+					containerVariantClassNames.inline
+				) }
+			>
+				<div className="self-start flex items-center justify-center [&_svg]:size-5 shrink-0">
+					{ getIcon( { variant, icon, theme } ) }
+				</div>
+				<div className="flex items-start justify-start gap-1 mr-10 [&>span:first-child]:shrink-0">
+					{ getTitle( { title, theme } ) }
+					{ getContent( { content, theme } ) }
+				</div>
+				<div className="absolute right-3 top-3 [&_svg]:size-5">
+					<button
+						className={ cn(
+							'bg-transparent m-0 p-0 border-none focus:outline-none active:outline-none cursor-pointer',
+							closeIconClassNames[ theme ] ??
+								closeIconClassNames.light
+						) }
+						onClick={ () => removeToast( toastItem.id ) }
+					>
+						<X />
+					</button>
+				</div>
+			</div>
+		);
+	}
+
+	return render;
+};
+
+export default withSingleton( Toaster );
diff --git a/src/components/toaster/toaster.stories.jsx b/src/components/toaster/toaster.stories.jsx
new file mode 100644
index 00000000..93379d06
--- /dev/null
+++ b/src/components/toaster/toaster.stories.jsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import Toaster from './toaster';
+import { toast } from './controller';
+
+export default {
+	title: 'Atoms/Toaster',
+	component: Toaster,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		position: {
+			control: 'select',
+			options: [ 'top-right', 'top-left', 'bottom-right', 'bottom-left' ],
+			description: 'The position of the toast notification.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'top-right' },
+			},
+		},
+		design: {
+			control: 'select',
+			options: [ 'stack', 'inline' ],
+			description: 'The design layout of the toast notification.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'stack' },
+			},
+		},
+		theme: {
+			control: 'select',
+			options: [ 'light', 'dark' ],
+			description: 'The theme of the toast notification.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'light' },
+			},
+		},
+		autoDismiss: {
+			control: 'boolean',
+			description:
+				'Whether the toast notification should automatically dismiss after a certain time.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+		dismissAfter: {
+			control: { type: 'number', min: 1000, max: 10000, step: 500 },
+			description:
+				'The time in milliseconds after which the toast notification will be dismissed.',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '5000' },
+			},
+		},
+		className: {
+			control: 'text',
+			description:
+				'Additional CSS class names to apply to the toast notification.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					width: '900px',
+					height: '500px',
+					position: 'relative',
+					margin: '0 auto',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+
+const Template = ( args ) => {
+	return (
+		<div>
+			<Toaster { ...args } key={ args.position } />
+			<div
+				style={ {
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100vh',
+				} }
+			>
+				<div className="flex gap-2">
+					<button
+						onClick={ () =>
+							toast.success( 'Success toast!', {
+								description: 'This is a success message',
+							} )
+						}
+					>
+						Show Success Toast
+					</button>
+					<button
+						onClick={ () =>
+							toast.error( 'Error toast!', {
+								description: 'This is an error message',
+							} )
+						}
+					>
+						Show Error Toast
+					</button>
+					<button
+						onClick={ () =>
+							toast.info( 'Info toast!', {
+								description: 'This is an info message',
+							} )
+						}
+					>
+						Show Info Toast
+					</button>
+					<button
+						onClick={ () =>
+							toast.warning( 'Warning toast!', {
+								description: 'This is a warning message',
+							} )
+						}
+					>
+						Show Warning Toast
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	position: 'top-right',
+	design: 'stack',
+	theme: 'light',
+	autoDismiss: true,
+	dismissAfter: 5000,
+	singleTon: false,
+};
diff --git a/src/components/toaster/utils.jsx b/src/components/toaster/utils.jsx
new file mode 100644
index 00000000..cb0728c8
--- /dev/null
+++ b/src/components/toaster/utils.jsx
@@ -0,0 +1,163 @@
+import { cloneElement, isValidElement } from 'react';
+import { Check, Info, AlertTriangle, Trash2 } from 'lucide-react';
+import { cn } from '@/utilities/functions';
+import Button from '../button/button.jsx';
+
+const DEFAULT_THEME = 'light';
+const DEFAULT_VARIANT = 'neutral';
+const DEFAULT_ACTION_TYPE = 'button';
+
+export const getIcon = ( {
+	icon = null,
+	theme = DEFAULT_THEME,
+	variant = DEFAULT_VARIANT,
+} ) => {
+	const commonClasses = '[&>svg]:h-5 [&>svg]:w-5';
+	const nColor =
+		theme === 'light' ? 'text-icon-secondary' : 'text-icon-inverse';
+	if ( icon && isValidElement( icon ) ) {
+		const updatedIcon = cloneElement( icon, {
+			className: cn( commonClasses, nColor, icon.props.className ),
+		} );
+		return updatedIcon;
+	}
+
+	switch ( variant ) {
+		case 'neutral':
+			return <Info className={ cn( commonClasses, nColor ) } />;
+		case 'info':
+			const iColor =
+				theme === 'light'
+					? 'text-support-info'
+					: 'text-support-info-inverse';
+			return <Info className={ cn( commonClasses, iColor ) } />;
+		case 'success':
+			const sColor =
+				theme === 'light'
+					? 'text-support-success'
+					: 'text-support-success-inverse';
+			return <Check className={ cn( commonClasses, sColor ) } />;
+		case 'warning':
+			const wColor =
+				theme === 'light'
+					? 'text-support-warning'
+					: 'text-support-warning-inverse';
+			return <AlertTriangle className={ cn( commonClasses, wColor ) } />;
+		case 'error':
+			const dColor =
+				theme === 'light'
+					? 'text-support-error'
+					: 'text-support-error-inverse';
+			return <Trash2 className={ cn( commonClasses, dColor ) } />;
+		default:
+			return null;
+	}
+};
+
+export const getAction = ( {
+	actionType = DEFAULT_ACTION_TYPE,
+	onAction = () => {},
+	actionLabel = '',
+	theme = DEFAULT_THEME,
+} ) => {
+	const commonClassNames =
+		'focus:ring-0 focus:ring-offset-0 ring-offset-0 focus:outline-none';
+	let classNames =
+		'text-button-primary border-button-primary hover:border-button-primary hover:text-button-primary-hover';
+	if ( theme === 'dark' ) {
+		classNames =
+			'text-text-inverse border-text-inverse hover:border-text-inverse hover:text-text-inverse';
+	}
+	switch ( actionType ) {
+		case 'button':
+			return (
+				<Button
+					variant="outline"
+					size="xs"
+					onClick={ onAction }
+					className={ cn(
+						'rounded',
+						commonClassNames,
+						classNames,
+						theme === 'dark'
+							? 'bg-transparent hover:bg-transparent'
+							: 'bg-white hover:bg-white'
+					) }
+				>
+					{ actionLabel }
+				</Button>
+			);
+		case 'link':
+			return (
+				<Button
+					variant="link"
+					size="xs"
+					onClick={ onAction }
+					className={ cn( commonClassNames, classNames ) }
+				>
+					{ actionLabel }
+				</Button>
+			);
+		default:
+			return null;
+	}
+};
+
+export const getTitle = ( { theme = DEFAULT_THEME, title = '' } ) => {
+	if ( ! title && isNaN( title ) ) {
+		return null;
+	}
+	const titleClasses = {
+		light: 'text-text-primary',
+		dark: 'text-text-inverse',
+	};
+	return (
+		<span
+			className={ cn(
+				'block',
+				titleClasses[ theme ],
+				'text-sm leading-5 font-semibold'
+			) }
+		>
+			{ title }
+		</span>
+	);
+};
+
+export const getContent = ( { theme = DEFAULT_THEME, content = '' } ) => {
+	if ( ! content && isNaN( content ) ) {
+		return null;
+	}
+	const contentClasses = {
+		light: 'text-text-primary',
+		dark: 'text-text-inverse',
+	};
+	return (
+		<span
+			className={ cn(
+				contentClasses[ theme ],
+				'block text-sm [&_*]:text-sm leading-5 [&_*]:leading-5 font-normal'
+			) }
+		>
+			{ content }
+		</span>
+	);
+};
+
+/**
+ * Merge all refs into a single function.
+ * @param {...Function} refs
+ *
+ * @return {Function} A function that will call all refs with the node.
+ */
+export const mergeRefs = ( ...refs ) => {
+	return ( node ) => {
+		refs.forEach( ( ref ) => {
+			if ( typeof ref === 'function' ) {
+				ref( node );
+			} else if ( ref ) {
+				ref.current = node;
+			}
+		} );
+	};
+};
diff --git a/src/components/tooltip/index.js b/src/components/tooltip/index.js
new file mode 100644
index 00000000..ece5a5da
--- /dev/null
+++ b/src/components/tooltip/index.js
@@ -0,0 +1 @@
+export { default } from './tooltip.jsx';
diff --git a/src/components/tooltip/readme.md b/src/components/tooltip/readme.md
new file mode 100644
index 00000000..1cb3c66c
--- /dev/null
+++ b/src/components/tooltip/readme.md
@@ -0,0 +1,185 @@
+# Tooltip Component Documentation
+
+## Description
+
+The `Tooltips` are small, interactive pop-up boxes that provide brief, informative messages when users hover over, focus on, or tap an element. They are typically used to offer additional context or explanation for a specific component, such as buttons, icons, or links, without cluttering the interface.
+
+## Props
+
+### `variant`
+- **Type:** `string`
+- **Default:** `"dark"`
+- **Description:** Defines the style variant of the tooltip. Options include:
+  - `"light"` 
+  - `"dark"`
+
+### `placement`
+- **Type:** `string`
+- **Default:** `"bottom"`
+- **Description:** Defines the position of the tooltip. Options include:
+  - `"top"`
+  - `"top-start"`
+  - `"top-end"`
+  - `"right"`
+  - `"right-start"`
+  - `"right-end"`
+  - `"bottom"`
+  - `"bottom-start"`
+  - `"bottom-end"`
+  - `"left"`
+  - `"left-start"`
+  - `"left-end"`
+
+### `title`
+- **Type:** `string`
+- **Description:** Defines the title of the tooltip. 
+
+### `content`
+- **Type:** `HTML content`
+- **Description:** Content of tooltip - description of tooltip in more detail.
+
+### `arrow`
+- **Type:** `boolean`
+- **Default:** `"false"`
+- **Description:** Defines whether the tooltip is displayed with an arrow or not. Options include:
+  - `"false"` 
+  - `"true"`
+
+### `open`
+- **Type:** `boolean`
+- **Description:** Controls the open state of the tooltip. When provided, it manages the visibility of the tooltip.
+
+### `setOpen`
+- **Type:** `function`
+- **Description:** Event handler for setting the open state of the tooltip.
+
+### `boundary`
+- **Type:** `HTMLElement`
+- default: `clippingAncestors`
+- **Description:** The element that the tooltip is positioned relative to. When provided, the tooltip will be positioned within the boundary of the element.
+- **Example:** `boundary={document.getElementById('boundary')}`
+
+### `strategy`
+- **Type:** `string`
+- **Default:** `"fixed"`
+- **Description:** Defines the positioning strategy of the tooltip. Options include:
+  - `"absolute"` 
+  - `"fixed"`
+- **Note:** The `"fixed"` strategy is recommended for most use cases.
+
+### `offset`
+- **Type:** `number` | `object`
+- **Description:** Defines the offset of the tooltip from the target element. The offset can be set as a number or an object with the following properties:
+  - mainAxis?: number;
+  - crossAxis?: number;
+  - alignmentAxis?: number | null;
+
+### `tooltipPortalRoot`
+- **Type:** `HTMLElement | null`
+- **Default:** `null`
+- **Description:** Root element where the tooltip will be rendered. It's helpful when the tooltip is rendered outside the parent container and scopped Tailwind CSS styles.
+
+### `tooltipPortalId`
+- **Type:** `string`
+- **Default:** `""`
+- **Description:** Id of the tooltip portal where the tooltip will be rendered. It's helpful when the tooltip is rendered outside the parent container and scopped Tailwind CSS styles.
+
+### `triggers`
+- **Type:** `string[]`
+- **Default:** `["hover", "focus"]`
+- **Description:** Defines the events that trigger the tooltip. Options include:
+  - `"hover"` 
+  - `"focus"`
+  - `"click"`
+
+### `interactive`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** When true, the tooltip is interactive and will not close when the user hovers away from the tooltip.
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** The elements that trigger the tooltip. Typically, this could be buttons, icons, or links.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional custom class names to style the tooltip container.
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { Tooltip } from '@bsf/force-ui';
+
+const App = () => (
+	<div>
+		<Tooltip
+			title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
+			arrow
+		>
+			<button>Hover over me</button>
+		</Tooltip>
+
+		{/* Click only mode */}
+		<Tooltip
+			title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
+			triggers={['click']}
+			arrow
+		>
+			<button>Click me</button>
+		</Tooltip>
+
+		{/* Interactive Tooltip */}
+		<Tooltip
+			title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
+			arrow
+			interactive
+		>
+			<button>Hover over me</button>
+		</Tooltip>
+		{/* Controlled tooltip */}
+		<Tooltip
+			title="Tooltip Title"
+			content={
+				<span>
+					<strong>Tooltips</strong> are used to describe or identify
+					an element. In most scenarios, tooltips help the user
+					understand meaning, function or alt-text.
+				</span>
+			}
+			arrow
+			interactive
+			placement="top-start"
+			variant="dark"
+			open={open}
+			setOpen={handleOpen}
+		>
+			<button>Hover over me</button>
+		</Tooltip>
+	</div>
+);
+
+export default App;
+```
\ No newline at end of file
diff --git a/src/components/tooltip/tooltip.jsx b/src/components/tooltip/tooltip.jsx
new file mode 100644
index 00000000..8809cb3b
--- /dev/null
+++ b/src/components/tooltip/tooltip.jsx
@@ -0,0 +1,166 @@
+import React, {
+	useRef,
+	useState,
+	isValidElement,
+	cloneElement,
+	useMemo,
+} from 'react';
+import {
+	useFloating,
+	autoUpdate,
+	offset,
+	flip,
+	shift,
+	useHover,
+	useFocus,
+	useDismiss,
+	useClick,
+	safePolygon,
+	useRole,
+	arrow as floatingArrow,
+	FloatingPortal,
+	FloatingArrow,
+	useInteractions,
+	useTransitionStyles,
+} from '@floating-ui/react';
+import { cn } from '@/utilities/functions';
+import { mergeRefs } from '../toaster/utils';
+
+const Tooltip = ( {
+	variant = 'dark', // 'light' | 'dark';
+	placement = 'bottom', //  | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+	title = '',
+	content,
+	arrow = false,
+	open,
+	setOpen,
+	children,
+	className,
+	tooltipPortalRoot = null, // Root element where the dropdown will be rendered.
+	tooltipPortalId = '', // Id of the dropdown portal where the dropdown will be rendered.
+	boundary = 'clippingAncestors',
+	strategy = 'fixed', // 'fixed' | 'absolute';
+	offset: offsetValue = 8, // Offset option or number value. Default is 8.
+	triggers = [ 'hover', 'focus' ], // 'click' | 'hover' | 'focus';
+	interactive = false,
+} ) => {
+	const isControlled = useMemo(
+		() => typeof open === 'boolean' && typeof setOpen === 'function',
+		[ open, setOpen ]
+	);
+
+	const [ isOpen, setIsOpen ] = useState( false );
+	const arrowRef = useRef( null );
+
+	const { refs, floatingStyles, context } = useFloating( {
+		open: isControlled ? open : isOpen,
+		onOpenChange: isControlled ? setOpen : setIsOpen,
+		placement,
+		strategy,
+		middleware: [
+			offset( offsetValue ),
+			flip( {
+				boundary,
+			} ),
+			shift( {
+				boundary,
+			} ),
+			floatingArrow( { element: arrowRef } ),
+		],
+		whileElementsMounted: autoUpdate,
+	} );
+
+	const click = useClick( context, {
+		enabled: ! isControlled && triggers.includes( 'click' ),
+	} );
+	const hover = useHover( context, {
+		move: false,
+		enabled: ! isControlled && triggers.includes( 'hover' ),
+		...( interactive && { handleClose: safePolygon() } ),
+	} );
+	const focus = useFocus( context, {
+		enabled: ! isControlled && triggers.includes( 'focus' ),
+	} );
+	const dismiss = useDismiss( context );
+	const role = useRole( context, { role: 'tooltip' } );
+
+	const { getReferenceProps, getFloatingProps } = useInteractions( [
+		click,
+		hover,
+		focus,
+		dismiss,
+		role,
+	] );
+
+	// Fade-in and fade-out transition.
+	const { isMounted, styles } = useTransitionStyles( context, {
+		duration: 150,
+		initial: { opacity: 0 },
+		open: { opacity: 1 },
+		close: { opacity: 0 },
+	} );
+
+	const tooltipClasses =
+		'absolute z-20 py-2 px-3 rounded-md text-xs leading-4 shadow-soft-shadow-lg';
+
+	const variantClasses = {
+		light: 'bg-tooltip-background-light text-text-primary',
+		dark: 'bg-tooltip-background-dark text-text-on-color',
+	}?.[ variant ];
+
+	const arrowClasses =
+		variant === 'dark'
+			? 'text-tooltip-background-dark'
+			: 'text-tooltip-background-light';
+
+	const widthClasses = 'max-w-80 w-fit';
+
+	return (
+		<>
+			{ isValidElement( children ) &&
+				cloneElement( children, {
+					...children.props,
+					ref: mergeRefs( children.ref, refs.setReference ),
+					className: cn( children.props.className ),
+					...getReferenceProps(),
+				} ) }
+			<FloatingPortal id={ tooltipPortalId } root={ tooltipPortalRoot }>
+				{ isMounted && (
+					<div
+						className={ cn(
+							tooltipClasses,
+							variantClasses,
+							widthClasses,
+							className
+						) }
+						ref={ refs.setFloating }
+						style={ {
+							...floatingStyles,
+							...styles,
+						} }
+						{ ...getFloatingProps() }
+					>
+						<div>
+							{ !! title && (
+								<span className="font-semibold">{ title }</span>
+							) }
+							{ !! content && (
+								<div className="font-normal">{ content }</div>
+							) }
+						</div>
+						{ arrow && (
+							<FloatingArrow
+								ref={ arrowRef }
+								context={ context }
+								placement={ placement }
+								className={ cn( 'fill-current', arrowClasses ) }
+							/>
+						) }
+					</div>
+				) }
+			</FloatingPortal>
+		</>
+	);
+};
+
+export default Tooltip;
diff --git a/src/components/tooltip/tooltip.stories.js b/src/components/tooltip/tooltip.stories.js
new file mode 100644
index 00000000..59a73b7a
--- /dev/null
+++ b/src/components/tooltip/tooltip.stories.js
@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+import Tooltip from './tooltip.jsx';
+import { CircleHelp } from 'lucide-react';
+import Label from '../label/label.jsx';
+
+export default {
+	title: 'Molecules/Tooltip',
+	component: Tooltip,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			description: 'Defines the style variant of the tooltip.',
+			control: { type: 'select' },
+			options: [ 'light', 'dark' ],
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		placement: {
+			description: 'The placement of the tooltip relative to the target.',
+			control: { type: 'select' },
+			options: [
+				'top',
+				'top-start',
+				'top-end',
+				'bottom',
+				'bottom-start',
+				'bottom-end',
+				'right',
+				'right-start',
+				'right-end',
+				'left',
+				'left-start',
+				'left-end',
+			],
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		title: {
+			description: 'Title for the tooltip.',
+			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		content: {
+			description:
+				'Content of tooltip - description of tooltip in more detail.',
+			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		arrow: {
+			description:
+				'Defines whether the tooltip is displayed with an arrow or not.',
+			control: { type: 'boolean' },
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		open: {
+			description:
+				'Controls the open state when controlled mode is used.',
+			control: { type: 'boolean' },
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		triggers: {
+			description: 'Triggers to open the tooltip (hover, focus, click).',
+			control: { type: 'select' },
+			options: [ 'click', 'hover', 'focus' ],
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		interactive: {
+			description:
+				'If set to true, the tooltip is interactive and will not close when the user hovers over the tooltip.',
+			control: { type: 'boolean' },
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		offset: {
+			description:
+				'Defines the offset of the tooltip from the target element.',
+			control: { type: 'number' },
+			table: {
+				type: { summary: 'number' },
+			},
+		},
+		tooltipPortalRoot: {
+			description:
+				"Root element where the tooltip will be rendered. It's helpful when the tooltip is rendered outside the parent container and scopped Tailwind CSS styles.",
+			table: {
+				type: { summary: 'HTMLElement | null' },
+			},
+		},
+		tooltipPortalId: {
+			description:
+				"Root element where the tooltip will be rendered. It's helpful when the tooltip is rendered outside the parent container and scopped Tailwind CSS styles.",
+			table: {
+				type: { summary: 'HTMLElement | null' },
+			},
+		},
+		boundary: {
+			description:
+				'The element that the tooltip is positioned relative to. When provided, the tooltip will be positioned within the boundary of the element.',
+			table: {
+				type: { summary: 'HTMLElement' },
+			},
+		},
+		strategy: {
+			description:
+				'Defines the positioning strategy of the tooltip. Options include: `absolute` and `fixed`. The `fixed` strategy is recommended for most use cases.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+	},
+};
+
+export const DefaultTooltip = ( args ) => {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	return (
+		<div>
+			<Tooltip
+				{ ...args }
+				open={ args.open !== undefined ? args.open : isOpen }
+				setOpen={ args.open !== undefined ? setIsOpen : undefined }
+			>
+				<CircleHelp />
+			</Tooltip>
+		</div>
+	);
+};
+
+DefaultTooltip.args = {
+	variant: 'dark',
+	placement: 'bottom',
+	title: 'Tooltip Title',
+	content: 'This is the content of the tooltip.',
+	arrow: true,
+	triggers: [ 'hover', 'focus' ],
+	interactive: false,
+};
+
+export const DarkTooltipWithIcon = ( args ) => (
+	<div
+		style={ {
+			display: 'grid',
+			gridTemplateColumns: '1fr 1fr 1fr',
+			gap: '10px',
+			justifyContent: 'center',
+			padding: '20px',
+		} }
+	>
+		{ [ 'top-end', 'top', 'top-start', 'left', 'bottom', 'right' ].map(
+			( placement ) => (
+				<div
+					style={ {
+						display: 'flex',
+						justifyContent: 'center',
+						padding: '30px',
+					} }
+					key={ placement }
+				>
+					<Tooltip key={ placement } { ...args } placement={ placement }>
+						<CircleHelp
+							style={ { fontSize: '2rem', cursor: 'pointer' } }
+						/>
+					</Tooltip>
+				</div>
+			)
+		) }
+	</div>
+);
+
+DarkTooltipWithIcon.storyName = 'Tooltip with icon';
+
+DarkTooltipWithIcon.args = {
+	variant: 'dark',
+	title: 'Tooltip',
+	arrow: true,
+};
+
+export const DarkTooltipWithLabel = ( args ) => (
+	<div
+		style={ {
+			display: 'grid',
+			gridTemplateColumns: '1fr 1fr 1fr',
+			gap: '10px',
+			justifyContent: 'center',
+			padding: '20px',
+		} }
+	>
+		{ [ 'top-end', 'top', 'top-start', 'left', 'bottom', 'right' ].map(
+			( placement ) => (
+				<div
+					style={ {
+						display: 'flex',
+						justifyContent: 'center',
+						padding: '30px',
+					} }
+					key={ placement }
+				>
+					<Tooltip key={ placement } { ...args } placement={ placement }>
+						<Label size="md">Label</Label>
+					</Tooltip>
+				</div>
+			)
+		) }
+	</div>
+);
+
+DarkTooltipWithLabel.storyName = 'Tooltip with label';
+
+DarkTooltipWithLabel.args = {
+	variant: 'dark',
+	title: 'Tooltip',
+	arrow: true,
+};
diff --git a/src/components/topbar/index.js b/src/components/topbar/index.js
new file mode 100644
index 00000000..e66d4fa9
--- /dev/null
+++ b/src/components/topbar/index.js
@@ -0,0 +1 @@
+export { default } from './topbar.jsx';
diff --git a/src/components/topbar/readme.md b/src/components/topbar/readme.md
new file mode 100644
index 00000000..5ff01e22
--- /dev/null
+++ b/src/components/topbar/readme.md
@@ -0,0 +1,139 @@
+# Topbar Component Documentation
+
+## Description
+
+The `Topbar` is a flexible navigation bar component that provides three sections: `Left`, `Middle`, and `Right`. It allows easy alignment and placement of items within each section.
+
+## `Topbar` Props
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Elements to render inside the Topbar container, typically the `Topbar.Left`, `Topbar.Middle`, and `Topbar.Right` components.
+
+### gap
+- **Type:** `string`
+- **Default:** `"lg"`
+- **Description:** Defines the gap between Topbar sections.
+    - `"0"`
+    - `"xxs"`
+    - `"xs"`
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+    - `"xl"`
+    - `"2xl"`
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional classes to customize the Topbar container's styles.
+
+## `Topbar.Left` Props
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Elements to render inside the `Topbar.Left` container, usually icons, logos, or navigation items.
+
+### gap
+- **Type:** `string`
+- **Default:** `"sm"`
+- **Description:** Defines the gap between Topbar.Left items.
+    - `"0"`
+    - `"xxs"`
+    - `"xs"`
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+    - `"xl"`
+    - `"2xl"`
+
+## `Topbar.Middle` Props
+
+### `align`
+- **Type:** `string`
+- **Default:** `"center"`
+- **Description:** Defines how the content inside the Middle section is aligned. Options include:
+  - `"left"`
+  - `"center"`
+  - `"right"`
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Elements to render inside the `Topbar.Middle` container, usually navigation links, buttons, or other interactive elements.
+
+### gap
+- **Type:** `string`
+- **Default:** `"md"`
+- **Description:** Defines the gap between Topbar.Middle items.
+    - `"0"`
+    - `"xxs"`
+    - `"xs"`
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+    - `"xl"`
+    - `"2xl"`
+
+## `Topbar.Right` Props
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Elements to render inside the `Topbar.Right` container, typically icons, user profile, badges, or help buttons.
+
+### gap
+- **Type:** `string`
+- **Default:** `"sm"`
+- **Description:** Defines the gap between Topbar.Right items.
+    - `"0"`
+    - `"xxs"`
+    - `"xs"`
+    - `"sm"`
+    - `"md"`
+    - `"lg"`
+    - `"xl"`
+    - `"2xl"`
+
+## `Topbar.Item` Props
+
+### `children`
+- **Type:** `ReactNode`
+- **Description:** Content or components to render inside the `Topbar.Item`.
+
+### `className`
+- **Type:** `string`
+- **Description:** Additional classes to customize the Item styling.
+
+```jsx
+    <Topbar>
+        <Topbar.Left>
+            <Topbar.Item>
+                <Logo />
+            </Topbar.Item>
+        </Topbar.Left>
+
+        <Topbar.Middle align="left">
+            <Topbar.Item>
+                <div className='flex gap-2'>
+                    <div>Nav Item 1</div>
+                    <div>Nav item 2</div>
+                    <div>Nav Item 3</div>
+                </div>
+            </Topbar.Item>
+            <Topbar.Item>
+                <Button>Upgrade to Pro</Button>
+            </Topbar.Item>
+        </Topbar.Middle>
+
+        <Topbar.Right>
+            <Topbar.Item>
+                <Badge  />
+            </Topbar.Item>
+            <Topbar.Item className='flex gap-2'>
+                <CircleHelp />
+                <Megaphone />
+            </Topbar.Item>
+            <Topbar.Item>
+                <Avatar />
+            </Topbar.Item>
+        </Topbar.Right>
+    </Topbar>
+```
\ No newline at end of file
diff --git a/src/components/topbar/topbar.jsx b/src/components/topbar/topbar.jsx
new file mode 100644
index 00000000..84665e26
--- /dev/null
+++ b/src/components/topbar/topbar.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { cn, getGapClass } from '@/utilities/functions';
+
+const Topbar = ( { children, gap = 'lg', className, ...props } ) => {
+	return (
+		<div
+			className={ cn(
+				'w-full flex items-center justify-between bg-background-primary p-5 min-h-16',
+				getGapClass( gap ),
+				className
+			) }
+			{ ...props }
+		>
+			{ children }
+		</div>
+	);
+};
+
+const Left = ( { gap = 'sm', children, className } ) => {
+	return (
+		<div className={ cn( 'flex items-center', getGapClass( gap ), className ) }>
+			{ children }
+		</div>
+	);
+};
+
+const Middle = ( { gap = 'md', children, align = 'center', className } ) => {
+	const alignmentClass = {
+		left: 'justify-start',
+		center: 'justify-center',
+		right: 'justify-end',
+	}?.[ align ];
+
+	return (
+		<div
+			className={ cn(
+				'flex items-center grow',
+				getGapClass( gap ),
+				alignmentClass,
+				className
+			) }
+		>
+			{ children }
+		</div>
+	);
+};
+
+const Right = ( { gap = 'sm', children, className } ) => {
+	return (
+		<div className={ cn( 'flex items-center', getGapClass( gap ), className ) }>
+			{ children }
+		</div>
+	);
+};
+
+const Item = ( { children, className } ) => {
+	return (
+		<div
+			className={ cn( 'flex items-center [&>svg]:block h-full', className ) }
+		>
+			{ children }
+		</div>
+	);
+};
+
+Topbar.Left = Left;
+Topbar.Middle = Middle;
+Topbar.Right = Right;
+Topbar.Item = Item;
+
+export default Topbar;
diff --git a/src/components/topbar/topbar.stories.js b/src/components/topbar/topbar.stories.js
new file mode 100644
index 00000000..7502c2af
--- /dev/null
+++ b/src/components/topbar/topbar.stories.js
@@ -0,0 +1,268 @@
+import React from 'react';
+import Topbar from './topbar.jsx';
+import Button from '../button/button.jsx';
+import { ArrowUpRight, CircleHelp, Megaphone, User } from 'lucide-react';
+import Badge from '../badge/badge.jsx';
+import Avatar from '../avatar/avatar.jsx';
+
+Topbar.displayName = 'Topbar';
+Topbar.Left.displayName = 'Topbar.Left';
+Topbar.Middle.displayName = 'Topbar.Middle';
+Topbar.Right.displayName = 'Topbar.Right';
+Topbar.Item.displayName = 'Topbar.Item';
+
+export default {
+	title: 'Organisms/Topbar',
+	component: Topbar,
+	tags: [ 'autodocs' ],
+	argTypes: {
+		gap: {
+			description: 'Defines the gap between Topbar sections.',
+			control: { type: 'select' },
+			options: [ '0', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'lg' },
+			},
+		},
+		topbarLeftGap: {
+			name: 'Topbar.Left: Gap',
+			description:
+				'Defines the gap between Topbar items in Topbar.Left sections',
+			control: { type: 'select' },
+			options: [ '0', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		topbarMiddleGap: {
+			name: 'Topbar.Middle: Gap',
+			description:
+				'Defines the gap between Topbar items in Topbar.Middle sections',
+			control: { type: 'select' },
+			options: [ '0', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		topbarRightGap: {
+			name: 'Topbar.Right: Gap',
+			description:
+				'Defines the gap between Topbar items in Topbar.Right sections',
+			control: { type: 'select' },
+			options: [ '0', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		topbarMiddleAlign: {
+			name: 'Topbar.Middle: Align',
+			description:
+				'Defines how the content inside the Middle section is aligned.',
+			control: { type: 'select' },
+			options: [ 'left', 'center', 'right' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'center' },
+			},
+		},
+	},
+};
+
+export const WithMiddleAlignment = ( args ) => (
+	<Topbar gap={ args.gap }>
+		<Topbar.Left gap={ args.topbarLeftGap }>
+			<Topbar.Item>
+				<svg
+					width="25"
+					height="24"
+					viewBox="0 0 25 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M12.5 24C19.1275 24 24.5 18.6273 24.5 11.9999C24.5 5.37255 19.1275 0 12.5 0C5.87259 0 0.5 5.37255 0.5 11.9999C0.5 18.6273 5.87259 24 12.5 24ZM12.5517 5.99996C11.5882 5.99996 10.2547 6.55101 9.5734 7.23073L7.7229 9.07688H16.9465L20.0307 5.99996H12.5517ZM15.4111 16.7692C14.7298 17.4489 13.3964 17.9999 12.4328 17.9999H4.95388L8.03804 14.923H17.2616L15.4111 16.7692ZM18.4089 10.6153H6.18418L5.60673 11.1923C4.23941 12.423 4.64495 13.3846 6.5598 13.3846H18.8176L19.3952 12.8076C20.7492 11.5841 20.3237 10.6153 18.4089 10.6153Z"
+						fill="#0D7EE8"
+					/>
+				</svg>
+			</Topbar.Item>
+		</Topbar.Left>
+
+		<Topbar.Middle
+			align={ args.topbarMiddleAlign }
+			gap={ args.topbarMiddleGap }
+		>
+			<Topbar.Item>
+				<div className="flex gap-2">
+					<div>Nav Item 1</div>
+					<div>Nav Item 2</div>
+					<div>Nav Item 3</div>
+				</div>
+			</Topbar.Item>
+			<Topbar.Item>
+				<Button
+					variant="ghost"
+					icon={ <ArrowUpRight /> }
+					iconPosition="right"
+				>
+					Upgrade to Pro
+				</Button>
+			</Topbar.Item>
+		</Topbar.Middle>
+
+		<Topbar.Right gap={ args.topbarRightGap }>
+			<Topbar.Item>
+				<Badge
+					label="V 0.0 2"
+					size="xs"
+					variant="neutral"
+					closable={ false }
+				/>
+			</Topbar.Item>
+			<Topbar.Item className="gap-2">
+				<CircleHelp />
+				<Megaphone />
+			</Topbar.Item>
+			<Topbar.Item>
+				<Avatar size="sm" border="ring">
+					<User />
+				</Avatar>
+			</Topbar.Item>
+		</Topbar.Right>
+	</Topbar>
+);
+
+WithMiddleAlignment.storyName = 'Topbar with Center-Aligned Middle Section';
+
+export const WithLeftAlignment = ( args ) => (
+	<Topbar gap={ args.gap }>
+		<Topbar.Left gap={ args.topbarLeftGap }>
+			<Topbar.Item>
+				<svg
+					width="25"
+					height="24"
+					viewBox="0 0 25 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M12.5 24C19.1275 24 24.5 18.6273 24.5 11.9999C24.5 5.37255 19.1275 0 12.5 0C5.87259 0 0.5 5.37255 0.5 11.9999C0.5 18.6273 5.87259 24 12.5 24ZM12.5517 5.99996C11.5882 5.99996 10.2547 6.55101 9.5734 7.23073L7.7229 9.07688H16.9465L20.0307 5.99996H12.5517ZM15.4111 16.7692C14.7298 17.4489 13.3964 17.9999 12.4328 17.9999H4.95388L8.03804 14.923H17.2616L15.4111 16.7692ZM18.4089 10.6153H6.18418L5.60673 11.1923C4.23941 12.423 4.64495 13.3846 6.5598 13.3846H18.8176L19.3952 12.8076C20.7492 11.5841 20.3237 10.6153 18.4089 10.6153Z"
+						fill="#0D7EE8"
+					/>
+				</svg>
+			</Topbar.Item>
+		</Topbar.Left>
+
+		<Topbar.Middle align="left" gap={ args.topbarMiddleGap }>
+			<Topbar.Item>
+				<div className="flex gap-2">
+					<div>Nav Item 1</div>
+					<div>Nav Item 2</div>
+					<div>Nav Item 3</div>
+				</div>
+			</Topbar.Item>
+			<Topbar.Item>
+				<Button
+					variant="ghost"
+					icon={ <ArrowUpRight /> }
+					iconPosition="right"
+				>
+					Upgrade to Pro
+				</Button>
+			</Topbar.Item>
+		</Topbar.Middle>
+
+		<Topbar.Right gap={ args.topbarRightGap }>
+			<Topbar.Item>
+				<Badge
+					label="V 0.0 2"
+					size="xs"
+					variant="neutral"
+					closable={ false }
+				/>
+			</Topbar.Item>
+			<Topbar.Item className="gap-2">
+				<CircleHelp />
+				<Megaphone />
+			</Topbar.Item>
+			<Topbar.Item>
+				<Avatar size="sm" border="ring">
+					<User />
+				</Avatar>
+			</Topbar.Item>
+		</Topbar.Right>
+	</Topbar>
+);
+
+WithLeftAlignment.storyName = 'Topbar with Left-Aligned Middle Section';
+
+export const WithRightAlignment = ( args ) => (
+	<Topbar gap={ args.gap }>
+		<Topbar.Left>
+			<Topbar.Item>
+				<svg
+					width="25"
+					height="24"
+					viewBox="0 0 25 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M12.5 24C19.1275 24 24.5 18.6273 24.5 11.9999C24.5 5.37255 19.1275 0 12.5 0C5.87259 0 0.5 5.37255 0.5 11.9999C0.5 18.6273 5.87259 24 12.5 24ZM12.5517 5.99996C11.5882 5.99996 10.2547 6.55101 9.5734 7.23073L7.7229 9.07688H16.9465L20.0307 5.99996H12.5517ZM15.4111 16.7692C14.7298 17.4489 13.3964 17.9999 12.4328 17.9999H4.95388L8.03804 14.923H17.2616L15.4111 16.7692ZM18.4089 10.6153H6.18418L5.60673 11.1923C4.23941 12.423 4.64495 13.3846 6.5598 13.3846H18.8176L19.3952 12.8076C20.7492 11.5841 20.3237 10.6153 18.4089 10.6153Z"
+						fill="#0D7EE8"
+					/>
+				</svg>
+			</Topbar.Item>
+		</Topbar.Left>
+
+		<Topbar.Middle align="right">
+			<Topbar.Item>
+				<div className="flex gap-2">
+					<div>Nav Item 1</div>
+					<div>Nav Item 2</div>
+					<div>Nav Item 3</div>
+				</div>
+			</Topbar.Item>
+			<Topbar.Item>
+				<Button
+					variant="ghost"
+					icon={ <ArrowUpRight /> }
+					iconPosition="right"
+				>
+					Upgrade to Pro
+				</Button>
+			</Topbar.Item>
+		</Topbar.Middle>
+
+		<Topbar.Right>
+			<Topbar.Item>
+				<Badge
+					label="V 0.0 2"
+					size="xs"
+					variant="neutral"
+					closable={ false }
+				/>
+			</Topbar.Item>
+			<Topbar.Item className="gap-2">
+				<CircleHelp />
+				<Megaphone />
+			</Topbar.Item>
+			<Topbar.Item>
+				<Avatar size="sm" border="ring">
+					<User />
+				</Avatar>
+			</Topbar.Item>
+		</Topbar.Right>
+	</Topbar>
+);
+
+WithRightAlignment.storyName = 'Topbar with Right-Aligned Middle Section';
diff --git a/src/hoc/index.js b/src/hoc/index.js
new file mode 100644
index 00000000..ef097cba
--- /dev/null
+++ b/src/hoc/index.js
@@ -0,0 +1 @@
+export { default as withSingleton } from './withSingleton';
diff --git a/src/hoc/withSingleton.jsx b/src/hoc/withSingleton.jsx
new file mode 100644
index 00000000..17a6a15d
--- /dev/null
+++ b/src/hoc/withSingleton.jsx
@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+let hasRendered = false;
+
+const withSingleton = ( WrappedComponent ) => {
+	const SingletonComponent = memo( ( props ) => {
+		const isSingleTon = props.singleTon; // singleTon is a prop passed to the component to check if it is a singleton component
+		if ( hasRendered && isSingleTon ) {
+			return null; // or return an alternative component
+		}
+		hasRendered = true;
+		return <WrappedComponent { ...props } />;
+	} );
+
+	return SingletonComponent;
+};
+
+export default withSingleton;
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..fb9ac544
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,2 @@
+import './tailwind.css';
+export * from './components';
diff --git a/src/molecules/input-field/input-field.stories.js b/src/molecules/input-field/input-field.stories.js
new file mode 100644
index 00000000..4cfe9669
--- /dev/null
+++ b/src/molecules/input-field/input-field.stories.js
@@ -0,0 +1,61 @@
+import Label from '../../components/label/label.jsx';
+import Input from '../../components/input/input.jsx';
+import TextArea from '../../components/textarea/textarea.jsx';
+import Container from '../../components/container/container.jsx';
+import { Info } from 'lucide-react';
+
+export const InputField = {
+	render: () => (
+		<div style={ { width: '800px' } }>
+			<Container direction="column" gap="xs">
+				<Label size="md">Label</Label>
+				<Input type="text" placeholder="Placeholder" />
+				<Label size="xs" variant="help">
+					<Info /> Help label with a{ ' ' }
+					<a href="https://example.com">link</a>.
+				</Label>
+			</Container>
+		</div>
+	),
+};
+
+export const TextAreaField = {
+	render: () => (
+		<div style={ { width: '800px' } }>
+			<Container direction="column" gap="xs">
+				<Label size="md">Label</Label>
+				<TextArea size="md" placeholder="Placeholder" />
+				<Label size="xs" variant="help">
+					<Info /> Help label with a{ ' ' }
+					<a href="https://example.com">link</a>.
+				</Label>
+			</Container>
+		</div>
+	),
+};
+
+// Badge component story configuration
+export const InputFileField = {
+	render: () => (
+		<div style={ { width: '800px' } }>
+			<Container direction="column" gap="xs">
+				<Label size="md">Label</Label>
+				<Input type="file" />
+				<Label size="xs" variant="help">
+					<Info /> Help label with a{ ' ' }
+					<a href="https://example.com">link</a>.
+				</Label>
+			</Container>
+		</div>
+	),
+};
+
+// Badge component story configuration
+export default {
+	title: 'Molecules/Input Field',
+	component: InputField,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+};
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 00000000..3a489be7
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1 @@
+// export * from "./settings/index";
diff --git a/src/tailwind.css b/src/tailwind.css
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/src/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/theme/default-config.js b/src/theme/default-config.js
new file mode 100644
index 00000000..b2d0bf1a
--- /dev/null
+++ b/src/theme/default-config.js
@@ -0,0 +1,212 @@
+const defaultTheme = {
+	content: [ 'node_modules/@bsf/force-ui/dist/force-ui.js' ],
+	theme: {
+		extend: {
+			colors: {
+				// brand
+				'brand-background-50': '#EFF6FF',
+				'brand-background-hover-100': '#DBEAFE',
+				'brand-200': '#BFDBFE',
+				'brand-border-300': '#93C5FD',
+				'brand-400': '#60A5FA',
+				'brand-500': '#3B82F6',
+				'brand-primary-600': '#2563EB',
+				'brand-hover-700': '#1D4ED8',
+				'brand-800': '#1E40AF',
+				'brand-900': '#1E3A8A',
+				'brand-text-950': '#172554',
+				// background
+				'background-primary': '#FFFFFF',
+				'background-secondary': '#F3F4F6',
+				'background-inverse': '#111827',
+				'background-brand': '#2563EB',
+				// field
+				'field-primary-background': '#F9FAFB',
+				'field-secondary-background': '#FFFFFF',
+				'field-primary-hover': '#F3F4F6',
+				'field-secondary-hover': '#F3F4F6',
+				'field-dropzone-background': '#FFFFFF',
+				'field-border': '#E5E7EB',
+				'field-dropzone-background-hover': '#F9FAFB',
+				'field-dropzone-color': '#2563EB',
+				'field-label': '#111827',
+				'field-input': '#111827',
+				'field-helper': '#9CA3AF',
+				'field-background-disabled': '#F9FAFB',
+				'field-color-disabled': '#D1D5DB',
+				'field-placeholder': '#6B7280',
+				'field-border-disabled': '#F3F4F6',
+				'field-color-error': '#DC2626',
+				'field-border-error': '#FECACA',
+				'field-background-error': '#FEF2F2',
+				'field-required': '#DC2626',
+				// border
+				'border-interactive': '#2563EB',
+				'border-subtle': '#E5E7EB',
+				'border-strong': '#6B7280',
+				'border-inverse': '#374151',
+				'border-disabled': '#E5E7EB',
+				'border-muted': '#E5E7EB',
+				'border-error': '#DC2626',
+				'border-transparent-subtle': '#37415114',
+				'border-white': '#FFFFFF',
+				// text
+				'text-primary': '#111827',
+				'text-secondary': '#4B5563',
+				'text-tertiary': '#9CA3AF',
+				'text-on-color': '#FFFFFF',
+				'text-error': '#DC2626',
+				'text-error-inverse': '#F87171',
+				'text-inverse': '#FFFFFF',
+				'text-disabled': '#D1D5DB',
+				'text-on-button-disabled': '#9CA3AF',
+				// link
+				'link-primary': '#2563EB',
+				'link-primary-hover': '#1D4ED8',
+				'link-inverse': '#38BDF8',
+				'link-visited': '#7C3AED',
+				'link-visited-inverse': '#A78BFA',
+				'link-inverse-hover': '#7DD3FC',
+				// icon
+				'icon-primary': '#111827',
+				'icon-secondary': '#4B5563',
+				'icon-on-color': '#FFFFFF',
+				'icon-inverse': '#FFFFFF',
+				'icon-interactive': '#2563EB',
+				'icon-on-color-disabled': '#9CA3AF',
+				'icon-disabled': '#D1D5DB',
+				// support
+				'support-error': '#DC2626',
+				'support-success': '#16A34A',
+				'support-warning': '#EAB308',
+				'support-info': '#0284C7',
+				'support-error-inverse': '#F87171',
+				'support-success-inverse': '#4ADE80',
+				'support-warning-inverse': '#FDE047',
+				'support-info-inverse': '#38BDF8',
+				// button
+				'button-primary': '#2563EB',
+				'button-primary-hover': '#1D4ED8',
+				'button-secondary': '#1F2937',
+				'button-secondary-hover': '#374151',
+				'button-tertiary': '#FFFFFF',
+				'button-tertiary-hover': '#F9FAFB',
+				'button-danger': '#DC2626',
+				'button-danger-secondary': '#DC2626',
+				'button-danger-hover': '#B91C1C',
+				'button-disabled': '#F3F4F6',
+				'button-tertiary-border': '#E5E7EB',
+				'button-tertiary-color': '#111827',
+				// focus
+				focus: '#2563EB',
+				'focus-inset': '#FFFFFF',
+				'focus-inverse': '#38BDF8',
+				'focus-inverse-inset': '#111827',
+				'focus-error': '#DC2626',
+				'focus-border': '#BFDBFE',
+				'focus-error-border': '#FECACA',
+				// misc
+				'misc-highlight': '#BFDBFE',
+				'misc-overlay': '#11182780',
+				'misc-skeleton-background': '#F3F4F6',
+				'misc-skeleton-element': '#D1D5DB',
+				'misc-popup-button-hover': '#1118270D',
+				'misc-tab-item-hover': '#E5E7EB',
+				'misc-dropdown-hover': '#F3F4F6',
+				'misc-loader-base': '#1118270D',
+				'misc-loader-color': '#2563EB',
+				'misc-progress-background': '#E5E7EB',
+				// badge
+				'badge-background-gray': '#F9FAFB',
+				'badge-color-gray': '#1F2937',
+				'badge-hover-gray': '#F3F4F6',
+				'badge-border-gray': '#E5E7EB',
+				'badge-background-red': '#FEF2F2',
+				'badge-color-red': '#B91C1C',
+				'badge-hover-red': '#FEE2E2',
+				'badge-border-red': '#FECACA',
+				'badge-background-yellow': '#FEFCE8',
+				'badge-color-yellow': '#A16207',
+				'badge-hover-yellow': '#FEF9C3',
+				'badge-border-yellow': '#FEF08A',
+				'badge-hover-green': '#DCFCE7',
+				'badge-border-green': '#BBF7D0',
+				'badge-background-green': '#F0FDF4',
+				'badge-color-green': '#15803D',
+				'badge-background-sky': '#F0F9FF',
+				'badge-color-sky': '#0369A1',
+				'badge-hover-sky': '#E0F2FE',
+				'badge-border-sky': '#BAE6FD',
+				'badge-background-disabled': '#F3F4F6',
+				'badge-color-disabled': '#D1D5DB',
+				'badge-hover-disabled': '#F3F4F6',
+				'badge-border-disabled': '#E5E7EB',
+				// alert
+				'alert-background-neutral': '#FFFFFF',
+				'alert-border-neutral': '#E5E7EB',
+				'alert-background-danger': '#FEF2F2',
+				'alert-border-danger': '#FECACA',
+				'alert-background-warning': '#FEFCE8',
+				'alert-border-warning': '#FEF08A',
+				'alert-background-green': '#F0FDF4',
+				'alert-border-green': '#BBF7D0',
+				'alert-background-info': '#F0F9FF',
+				'alert-border-info': '#BAE6FD',
+				// tab
+				'tab-background': '#F3F4F6',
+				'tab-border': '#E5E7EB',
+				// tooltip
+				'tooltip-background-light': '#FFFFFF',
+				'tooltip-background-dark': '#111827',
+				// toggle
+				'toggle-off': '#E5E7EB',
+				'toggle-on': '#2563EB',
+				'toggle-dial-background': '#FFFFFF',
+				'toggle-off-hover': '#D1D5DB',
+				'toggle-off-border': '#D1D5DB',
+				'toggle-on-hover': '#3B82F6',
+				'toggle-on-border': '#60A5FA',
+				'toggle-off-disabled': '#F3F4F6',
+			},
+			width: {
+				'1/7': '14.2857143%',
+				'1/8': '12.5%',
+				'1/9': '11.1111111%',
+				'1/10': '10%',
+				'1/11': '9.0909091%',
+				'1/12': '8.3333333%',
+			},
+			boxShadow: {
+				'soft-shadow-sm':
+					'0px 6px 32px -12px rgba(149, 160, 178, 0.12)',
+				'soft-shadow': '0px 8px 32px -12px rgba(149, 160, 178, 0.16)',
+				'soft-shadow-md':
+					'0px 10px 32px -12px rgba(149, 160, 178, 0.2)',
+				'soft-shadow-lg':
+					'0px 12px 32px -12px rgba(149, 160, 178, 0.24)',
+				'soft-shadow-xl':
+					'0px 16px 32px -12px rgba(149, 160, 178, 0.32)',
+				'soft-shadow-2xl':
+					'0px 24px 64px -12px rgba(149, 160, 178, 0.32)',
+			},
+			fontSize: {
+				tiny: '0.625rem',
+			},
+			spacing: {
+				120: '30rem', // 480px
+				95: '23.75rem', // 380px
+				141.5: '35.375rem', // 566px
+				188: '47rem', // 752px
+			},
+			zIndex: {
+				999999: '999999',
+			},
+		},
+	},
+	plugins: [],
+	corePlugins: {
+		preflight: false,
+	},
+};
+
+module.exports = defaultTheme;
diff --git a/src/utilities/functions.js b/src/utilities/functions.js
new file mode 100644
index 00000000..2883741c
--- /dev/null
+++ b/src/utilities/functions.js
@@ -0,0 +1,52 @@
+import { twMerge } from 'tailwind-merge';
+import { clsx } from 'clsx';
+
+export function prefix() {
+	return 'force-ui-';
+}
+
+/**
+ * For Conditional classNames and merging TailwindCSS classes.
+ * @param {...any} classNames
+ * @return  {string} - Merged TailwindCSS classes.
+ */
+export const cn = ( ...classNames ) => twMerge( clsx( ...classNames ) );
+
+/**
+ * Call provided functions with the given arguments.
+ * @param {...Function} fns
+ * @return {Function} - Function that calls all provided functions.
+ */
+export const callAll = ( ...fns ) => {
+	return ( ...args ) => fns.forEach( ( fn ) => fn?.( ...args ) );
+};
+
+export const getGapClass = ( gap ) => {
+	const gapClasses = {
+		0: 'gap-0',
+		xxs: 'gap-1',
+		xs: 'gap-2',
+		sm: 'gap-3',
+		md: 'gap-4',
+		lg: 'gap-5',
+		xl: 'gap-6',
+		'2xl': 'gap-8',
+	};
+
+	return gapClasses[ gap ] || gapClasses.md;
+};
+
+export const columnClasses = {
+	1: 'grid-cols-1',
+	2: 'grid-cols-2',
+	3: 'grid-cols-3',
+	4: 'grid-cols-4',
+	5: 'grid-cols-5',
+	6: 'grid-cols-6',
+	7: 'grid-cols-7',
+	8: 'grid-cols-8',
+	9: 'grid-cols-9',
+	10: 'grid-cols-10',
+	11: 'grid-cols-11',
+	12: 'grid-cols-12',
+};
diff --git a/src/utilities/withTW.js b/src/utilities/withTW.js
new file mode 100644
index 00000000..a13f06a8
--- /dev/null
+++ b/src/utilities/withTW.js
@@ -0,0 +1,9 @@
+const deepmerge = require( 'deepmerge' );
+
+const libraryConfig = require( '../theme/default-config' );
+
+const withTW = ( tailwindConfig ) => {
+	return deepmerge( libraryConfig, { ...tailwindConfig } );
+};
+
+module.exports = withTW;
diff --git a/version.json b/version.json
new file mode 100644
index 00000000..6f3ec6ad
--- /dev/null
+++ b/version.json
@@ -0,0 +1,3 @@
+{
+	"force-ui": "0.0.6"
+}