react-ui89 0.29.3 → 0.29.4

package/dist/esm/index.js

@@ -7,10 +7,6 @@ import { toast, ToastContainer } from 'react-toastify';
 import { VariableSizeGrid } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-const sheet$w = new CSSStyleSheet();sheet$w.replaceSync(":root{--ui89-palette-black:#000000;--ui89-palette-dark-blue:#0000aa;--ui89-palette-dark-green:#00aa00;--ui89-palette-dark-cyan:#00aaaa;--ui89-palette-dark-red:#aa0000;--ui89-palette-dark-pink:#aa00aa;--ui89-palette-dark-yellow:#aa5500;--ui89-palette-light-gray:#aaaaaa;--ui89-palette-dark-gray:#555555;--ui89-palette-light-blue:#5454ff;--ui89-palette-light-green:#55ff55;--ui89-palette-light-cyan:#55ffff;--ui89-palette-light-red:#ff5555;--ui89-palette-light-pink:#ff55ff;--ui89-palette-light-yellow:#ffff55;--ui89-palette-white:#ffffff;--ui89-theme-primary-text-color:var(--ui89-palette-black);--ui89-theme-primary-bg-color:var(--ui89-palette-light-yellow);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-white);--ui89-theme-success-text-color:var(--ui89-palette-white);--ui89-theme-success-bg-color:var(--ui89-palette-dark-green);--ui89-theme-info-text-color:var(--ui89-palette-white);--ui89-theme-info-bg-color:var(--ui89-palette-light-blue);--ui89-theme-warning-text-color:var(--ui89-palette-white);--ui89-theme-warning-bg-color:var(--ui89-palette-dark-yellow);--ui89-theme-danger-text-color:var(--ui89-palette-white);--ui89-theme-danger-bg-color:var(--ui89-palette-dark-red);--ui89-safe-space:8px;--ui89-input-height:32px;--ui89-font-size-huge:32px;--ui89-font-size-big:20px;--ui89-font-size-normal:16px;--ui89-font-size-small:14px;--ui89-font-size-tiny:10px;--ui89-input-bg-color:var(--ui89-palette-black);--ui89-input-text-color:var(--ui89-palette-light-yellow);--ui89-animation-speed:100ms;--ui89-cursor-default:default;--ui89-cursor-pointer:pointer;--ui89-box-shadow:10px 10px 0px black;}");
-
-const sheet$v = new CSSStyleSheet();sheet$v.replaceSync(".ui89-toaster::before{content:\"\";position:absolute;inset:0;border:var(--ui89-toaster-border-width) solid var(--ui89-chosen-theme-text-color);margin:var(--ui89-safe-space);}.ui89-toaster::after{content:\"\";display:block;position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--ui89-chosen-theme-bg-color);color:var(--ui89-chosen-theme-text-color);padding:0 var(--ui89-safe-space);}.ui89-toaster.Toastify__toast--default{--ui89-toaster-border-width:1px;display:block;min-height:auto;padding:calc(var(--ui89-safe-space) * 2 + var(--ui89-toaster-border-width));border-radius:0;box-shadow:var(--ui89-box-shadow);background:var(--ui89-chosen-theme-bg-color);color:var(--ui89-chosen-theme-text-color);}.ui89-toaster .Toastify__progress-bar--wrp{border-radius:0;}");
-
 var Ui89Theme;
 (function (Ui89Theme) {
     Ui89Theme["primary"] = "primary";
@@ -26,14 +22,6 @@ var Ui89Look;
     Ui89Look["side"] = "side";
 })(Ui89Look || (Ui89Look = {}));
 
-const sheet$u = new CSSStyleSheet();sheet$u.replaceSync(".breadcrumbs{display:flex;flex-direction:row-reverse;justify-content:flex-end;overflow:hidden;padding:var(--ui89-safe-space);}.breadcrumbsItem{display:block;color:var(--ui89-chosen-theme-text-color);padding-left:calc(var(--ui89-safe-space) * 3);padding-right:calc(var(--ui89-safe-space) * 2);margin:calc(var(--ui89-safe-space) * -1);position:relative;clip-path:polygon(0% 0%,calc(100% - var(--ui89-safe-space)) 0%,100% 50%,calc(100% - var(--ui89-safe-space)) 100%,0% 100%);animation:appear var(--ui89-animation-speed);}.breadcrumbsItem:last-child{padding-left:calc(var(--ui89-safe-space) * 2);}@keyframes appear{from{transform:translateX(-100%);}to{transform:translateX(0%);}}.breadcrumbsItemBackground{position:absolute;z-index:-1;inset:0;background-color:var(--ui89-chosen-theme-bg-color);filter:brightness(calc(1 - var(--ui89-index) * 0.1));}");
-
-const sheet$t = new CSSStyleSheet();sheet$t.replaceSync(".big{font-family:monospace;font-size:var(--ui89-font-size-big);line-height:25px;}.normal{font-family:monospace;font-size:var(--ui89-font-size-normal);line-height:16px;}.normalBold{font-family:monospace;font-size:var(--ui89-font-size-normal);line-height:16px;font-weight:bold;}.small{font-family:monospace;font-size:var(--ui89-font-size-small);line-height:16px;}.smallBold{font-family:monospace;font-size:var(--ui89-font-size-small);line-height:16px;font-weight:bold;}.special{font-family:monospace;font-size:var(--ui89-font-size-small);font-weight:bold;}");
-
-const sheet$s = new CSSStyleSheet();sheet$s.replaceSync(".a{text-decoration:none;}");
-
-const sheet$r = new CSSStyleSheet();sheet$r.replaceSync(".primary{--ui89-chosen-theme-text-color:var(--ui89-theme-primary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-primary-bg-color);}.secondary{--ui89-chosen-theme-text-color:var(--ui89-theme-secondary-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-secondary-bg-color);}.info{--ui89-chosen-theme-text-color:var(--ui89-theme-info-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-info-bg-color);}.success{--ui89-chosen-theme-text-color:var(--ui89-theme-success-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-success-bg-color);}.warning{--ui89-chosen-theme-text-color:var(--ui89-theme-warning-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-warning-bg-color);}.danger{--ui89-chosen-theme-text-color:var(--ui89-theme-danger-text-color);--ui89-chosen-theme-bg-color:var(--ui89-theme-danger-bg-color);}");
-
 const Ui89OverrideContext = createContext({});
 const Ui89OverrideProvider = ({ routerPush, children, }) => {
     return (React__default.createElement(Ui89OverrideContext.Provider, { value: { routerPush } }, children));
@@ -60,22 +48,18 @@ function Ui89BreadcrumbsItem({ index, item, onSelect, }) {
             }
         }
     };
-    return (React__default.createElement("a", { className: `${sheet$s.a} ${sheet$u.breadcrumbsItem}`, href: item.url, style: style, onClick: onClick },
-        React__default.createElement("div", { className: sheet$u.breadcrumbsItemBackground }),
+    return (React__default.createElement("a", { className: `ui-89-reset-a ui89-breadcrumbs__item`, href: item.url, style: style, onClick: onClick },
+        React__default.createElement("div", { className: "ui89-breadcrumbs__item__background" }),
         item.label));
 }
 function Ui89Breadcrumbs({ theme = Ui89Theme.primary, items, onSelect, }) {
-    return (React__default.createElement("div", { className: `${sheet$u.breadcrumbs} ${sheet$t.special} ${sheet$r[theme]}` }, [...items.entries()].reverse().map(([index, item]) => (React__default.createElement(Ui89BreadcrumbsItem, { key: index, index: index, item: item, onSelect: onSelect })))));
+    return (React__default.createElement("div", { className: `ui89-breadcrumbs ui89-typo-special ui89-chosen-theme-${theme}` }, [...items.entries()].reverse().map(([index, item]) => (React__default.createElement(Ui89BreadcrumbsItem, { key: index, index: index, item: item, onSelect: onSelect })))));
 }
 
-const sheet$q = new CSSStyleSheet();sheet$q.replaceSync(".container{display:inline-grid;height:fit-content;}.container--size-standard .button{height:22px;padding:0 calc(var(--ui89-safe-space) * 2);min-width:60px;}.container--size-square{width:fit-content;}.container--size-square .button{width:22px;height:22px;flex-basis:22px;overflow:hidden;}.button{display:inline-flex;justify-content:center;align-items:center;border:0;color:var(--ui89-chosen-theme-text-color);background-color:var(--ui89-chosen-theme-bg-color);border-radius:1px;font-weight:bold;user-select:none;text-align:center;box-sizing:border-box;border:1px solid #00000010;transition:transform var(--ui89-animation-speed);position:relative;cursor:var(--ui89-cursor-pointer);}.button:before{position:absolute;inset:0;}.block{display:flex;}.button:hover:not(.disabled):not(.active):before{content:\"\";background-color:#ffffff40;cursor:var(--ui89-cursor-pointer);}.button:active:not(.disabled),.active{transform:translate3d(calc(var(--ui89-safe-space) / 2),calc(var(--ui89-safe-space) / 2),0);}.button:active:not(.disabled):not(.active):before{content:none;background-color:#00000040;cursor:var(--ui89-cursor-pointer);}.disabled{opacity:0.5;cursor:var(--ui89-cursor-default);}.click{position:absolute;inset:0;}.button:active:not(.disabled)>.click,.active>.click{transform:translate3d(calc(var(--ui89-safe-space) / 2 * -1),calc(var(--ui89-safe-space) / 2 * -1),0);}");
-
-const sheet$p = new CSSStyleSheet();sheet$p.replaceSync(".hoverShadow{display:grid;padding-right:var(--ui89-safe-space);padding-bottom:var(--ui89-safe-space);position:relative;}.hoverShadowRight{display:block;position:absolute;right:0;bottom:0;height:calc(100% - var(--ui89-safe-space));width:var(--ui89-safe-space);box-sizing:border-box;background:black;z-index:0;}.hoverShadowBottom{display:block;position:absolute;right:0;bottom:0;width:calc(100% - var(--ui89-safe-space));height:var(--ui89-safe-space);box-sizing:border-box;background:black;z-index:0;}");
-
 function HoverShadow({ children, }) {
-    return (React__default.createElement("span", { className: sheet$p.hoverShadow },
-        React__default.createElement("span", { className: sheet$p.hoverShadowBottom }),
-        React__default.createElement("span", { className: sheet$p.hoverShadowRight }),
+    return (React__default.createElement("span", { className: "ui89-hover-shadow" },
+        React__default.createElement("span", { className: "ui89-hover-shadow__bottom" }),
+        React__default.createElement("span", { className: "ui89-hover-shadow__right" }),
         children));
 }
 
@@ -134,57 +118,49 @@ function Ui89Button({ theme = Ui89Theme.primary, size = Ui89ButtonPropsSize.stan
         }
     }
     let containerClass = [
-        sheet$q.container,
-        sheet$q["container--size-" + size],
+        'ui89-button',
+        `ui89-button--size-${size}`,
     ].join(" ");
     let buttonClass = [
-        sheet$q.button,
-        sheet$t.special,
-        sheet$r[theme],
-        activated ? sheet$q.active : undefined,
-        block ? sheet$q.block : undefined,
-        disabled ? sheet$q.disabled : undefined,
-        clicking ? sheet$q.active : undefined,
+        'ui89-button__button',
+        'ui89-typo-special',
+        `ui89-chosen-theme-${theme}`,
+        activated ? 'ui89-button__button--active' : undefined,
+        block ? 'ui89-button__button--block' : undefined,
+        disabled ? 'ui89-button__button--disabled' : undefined,
+        clicking ? 'ui89-button__button--active' : undefined,
     ].join(" ");
     if (href) {
         return (React__default.createElement("span", { className: containerClass },
             React__default.createElement(HoverShadow, null,
-                React__default.createElement("a", { className: `${sheet$s.a} ${buttonClass}`, role: "button", href: href, onClick: onAnchorClick },
-                    React__default.createElement("span", { className: sheet$q.click }),
-                    React__default.createElement("span", { className: sheet$q.buttonContent }, children)))));
+                React__default.createElement("a", { className: `ui-89-reset-a ${buttonClass}`, role: "button", href: href, onClick: onAnchorClick },
+                    React__default.createElement("span", { className: "ui89-button__button__click" }),
+                    React__default.createElement("span", null, children)))));
     }
     else {
         return (React__default.createElement("span", { className: containerClass },
             React__default.createElement(HoverShadow, null,
                 React__default.createElement("button", { className: buttonClass, type: "button", onClick: onButtonClick, disabled: localDisabled },
-                    React__default.createElement("span", { className: sheet$q.click }),
-                    React__default.createElement("span", { className: sheet$q.buttonContent }, children)))));
+                    React__default.createElement("span", { className: "ui89-button__button__click" }),
+                    React__default.createElement("span", null, children)))));
     }
 }
 
-const sheet$o = new CSSStyleSheet();sheet$o.replaceSync(".container{background:var(--ui89-scene-card-bg-color);color:var(--ui89-scene-card-text-color);border-radius:var(--ui89-box-border-radius);position:relative;box-shadow:rgb(0 0 0 / 5%) 0px 1px 2px 0px;border-top:calc(var(--ui89-safe-space)) solid #ffffff20;border-left:calc(var(--ui89-safe-space)) solid #ffffff20;border-right:calc(var(--ui89-safe-space)) solid #00000040;border-bottom:calc(var(--ui89-safe-space)) solid #00000040;padding:calc(var(--ui89-safe-space) / 4) calc(var(--ui89-safe-space) / 2);border:1px solid var(--ui89-scene-card-text-color);display:flex;flex-direction:column;}.container>*{flex:1;}.containerHasTop{margin-top:var(--ui89-safe-space);}.inside{border:1px solid white;padding:calc(var(--ui89-safe-space));}.topLeftCenter{position:absolute;bottom:100%;left:0;padding-left:var(--ui89-safe-space);transform:translateY(50%);}.topCenter{position:absolute;top:0;transform:translateY(-50%);left:var(--ui89-safe-space);right:var(--ui89-safe-space);display:flex;justify-content:center;}.cardHorizontalConnection{margin:0 calc(var(--ui89-safe-space) * -1);background:var(--ui89-scene-card-bg-color);}.cardHorizontalConnection--overflow{margin:0 calc(var(--ui89-safe-space) * -1 - 1px);}");
-
 function Ui89Card({ topLeftCenter, topCenter, children, }) {
     const hasTopContent = topLeftCenter || topCenter;
-    return (React__default.createElement("div", { className: `${sheet$o.container} ${hasTopContent ? sheet$o.containerHasTop : ""}` },
-        React__default.createElement("div", { className: sheet$o.inside },
-            topLeftCenter && (React__default.createElement("div", { className: sheet$o.topLeftCenter }, topLeftCenter)),
-            topCenter && React__default.createElement("div", { className: sheet$o.topCenter }, topCenter),
+    return (React__default.createElement("div", { className: `ui89-card ${hasTopContent ? 'ui89-card--has-top' : ""}` },
+        React__default.createElement("div", { className: "ui89-card__inside" },
+            topLeftCenter && (React__default.createElement("div", { className: "ui89-card__top-left-center" }, topLeftCenter)),
+            topCenter && React__default.createElement("div", { className: "ui89-card__top-center" }, topCenter),
             hasTopContent && React__default.createElement("div", { className: "space-vertical-1" }),
             children,
             hasTopContent && React__default.createElement("div", { className: "space-vertical-1" }))));
 }
 
 function Ui89CardHorizontalConnection({ children, overflow, }) {
-    return (React__default.createElement("div", { className: `${sheet$o.cardHorizontalConnection} ${overflow ? sheet$o["cardHorizontalConnection--overflow"] : ""}` }, children));
+    return (React__default.createElement("div", { className: `ui89-card__horizontal-connection ${overflow ? 'ui89-card__horizontal-connection--overflow' : ""}` }, children));
 }
 
-const sheet$n = new CSSStyleSheet();sheet$n.replaceSync("@charset \"UTF-8\";.react-datepicker__navigation-icon::before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:\"\";display:block;height:9px;position:absolute;top:6px;width:9px;}.react-datepicker-wrapper{display:inline-block;padding:0;border:0;}.react-datepicker{font-family:\"Helvetica Neue\",helvetica,arial,sans-serif;font-size:0.8rem;background-color:#fff;color:#000;border:1px solid #aeaeae;border-radius:0.3rem;display:inline-block;position:relative;line-height:initial;}.react-datepicker--time-only .react-datepicker__time-container{border-left:0;}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:0.3rem;border-bottom-right-radius:0.3rem;}.react-datepicker-popper{z-index:1;line-height:0;}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae;}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0;}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff;}.react-datepicker__header{text-align:center;background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:0.3rem;padding:8px 0;position:relative;}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px;}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0;}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:0.3rem;}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 15px;}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:#000;font-weight:bold;font-size:0.944rem;}h2.react-datepicker__current-month{padding:0;margin:0;}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:2px;padding:0;border:none;z-index:1;height:32px;width:32px;text-indent:-999em;overflow:hidden;}.react-datepicker__navigation--previous{left:2px;}.react-datepicker__navigation--next{right:2px;}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px;}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto;}.react-datepicker__navigation--years-previous{top:4px;}.react-datepicker__navigation--years-upcoming{top:-4px;}.react-datepicker__navigation:hover *::before{border-color:rgb(165.75,165.75,165.75);}.react-datepicker__navigation-icon{position:relative;top:-1px;font-size:20px;width:0;}.react-datepicker__navigation-icon--next{left:-2px;}.react-datepicker__navigation-icon--next::before{transform:rotate(45deg);left:-7px;}.react-datepicker__navigation-icon--previous{right:-2px;}.react-datepicker__navigation-icon--previous::before{transform:rotate(225deg);right:-7px;}.react-datepicker__month-container{float:left;}.react-datepicker__year{margin:0.4rem;text-align:center;}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px;}.react-datepicker__year .react-datepicker__year-text{display:inline-block;width:4rem;margin:2px;}.react-datepicker__month{margin:0.4rem;text-align:center;}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:2px;}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:5px 0 10px 15px;text-align:left;}.react-datepicker__input-time-container .react-datepicker-time__caption{display:inline-block;}.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:5px;display:inline-block;}.react-datepicker__time-container{float:right;border-left:1px solid #aeaeae;width:85px;}.react-datepicker__time-container--with-today-button{display:inline;border:1px solid #aeaeae;border-radius:0.3rem;position:absolute;right:-87px;top:0;}.react-datepicker__time-container .react-datepicker__time{position:relative;background:white;border-bottom-right-radius:0.3rem;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:85px;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:0.3rem;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(195px + 1.7rem / 2);overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:#f0f0f0;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:white;font-weight:bold;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:transparent;}.react-datepicker__week-number{color:#ccc;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:0.166rem;}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer;}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover{border-radius:0.3rem;background-color:#f0f0f0;}.react-datepicker__week-number--selected{border-radius:0.3rem;background-color:#216ba5;color:#fff;}.react-datepicker__week-number--selected:hover{background-color:rgb(28.75,93.2196969697,143.75);}.react-datepicker__day-names{white-space:nowrap;margin-bottom:-8px;}.react-datepicker__week{white-space:nowrap;}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:#000;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:0.166rem;}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer;}.react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover{border-radius:0.3rem;background-color:#f0f0f0;}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:bold;}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{border-radius:0.3rem;background-color:#3dcc4a;color:#fff;}.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover{background-color:rgb(49.8551020408,189.6448979592,62.5632653061);}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:magenta;}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green;}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{position:relative;border-radius:0.3rem;background-color:#ff6803;color:#fff;}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity 0.3s ease-in-out;}.react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover{background-color:rgb(207,82.9642857143,0);}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{visibility:visible;opacity:1;}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{border-radius:0.3rem;background-color:#216ba5;color:#fff;}.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover{background-color:rgb(28.75,93.2196969697,143.75);}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{border-radius:0.3rem;background-color:rgb(186.25,217.0833333333,241.25);color:rgb(0,0,0);}.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover{background-color:rgb(28.75,93.2196969697,143.75);}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:rgba(33,107,165,0.5);}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000;}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:#ccc;}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{position:absolute;bottom:70%;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity 0.3s ease-in-out;}.react-datepicker__input-container{position:relative;display:inline-block;width:100%;}.react-datepicker__input-container .react-datepicker__calendar-icon{position:absolute;padding:0.5rem;box-sizing:content-box;}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px;}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid transparent;border-radius:0.3rem;position:relative;}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer;}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:rgb(178.5,178.5,178.5);}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{transform:rotate(135deg);right:-16px;top:0;}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:#f0f0f0;position:absolute;width:50%;left:25%;top:30px;z-index:1;text-align:center;border-radius:0.3rem;border:1px solid #aeaeae;}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer;}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:150px;overflow-y:scroll;}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:20px;width:100%;display:block;margin-left:auto;margin-right:auto;}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:0.3rem;border-top-right-radius:0.3rem;}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:0.3rem;border-bottom-right-radius:0.3rem;}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc;}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:rgb(178.5,178.5,178.5);}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:rgb(178.5,178.5,178.5);}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:15px;}.react-datepicker__close-icon{cursor:pointer;background-color:transparent;border:0;outline:0;padding:0 6px 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle;}.react-datepicker__close-icon::after{cursor:pointer;background-color:#216ba5;color:#fff;border-radius:50%;height:16px;width:16px;padding:2px;font-size:12px;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:\"×\";}.react-datepicker__close-icon--disabled{cursor:default;}.react-datepicker__close-icon--disabled::after{cursor:default;background-color:#ccc;}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;cursor:pointer;text-align:center;font-weight:bold;padding:5px 0;clear:left;}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:rgba(0,0,0,0.8);left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647;}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem;}@media (max-width:400px),(max-height:550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem;}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem;}.react-datepicker__children-container{width:13.8rem;margin:0.4rem;padding-right:0.2rem;padding-left:0.2rem;height:auto;}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap;}.react-datepicker__calendar-icon{width:1em;height:1em;vertical-align:-0.125em;}");
-
-const sheet$m = new CSSStyleSheet();sheet$m.replaceSync(".ui89-date-time-picker>.react-datepicker-wrapper{display:block;}.ui89-date-time-picker .react-datepicker__triangle{display:none;}.ui89-date-time-picker .react-datepicker{color:var(--ui89-scene-text-color);background:var(--ui89-scene-bg-color);border:1px solid currentColor;border-radius:0;box-shadow:var(--ui89-box-shadow);}.ui89-date-time-picker .react-datepicker__current-month{margin-top:calc(var(--ui89-safe-space) / 2);margin-bottom:calc(var(--ui89-safe-space) / 2);}.ui89-date-time-picker .react-datepicker__current-month,.ui89-date-time-picker .react-datepicker-time__header,.ui89-date-time-picker .react-datepicker-year-header{color:currentColor;}.ui89-date-time-picker .react-datepicker__day-name,.ui89-date-time-picker .react-datepicker__day,.ui89-date-time-picker .react-datepicker__time-name{color:currentColor;}.ui89-date-time-picker .react-datepicker__day--outside-month{color:var(--ui89-scene-text-subtle-color);}.ui89-date-time-picker .react-datepicker__header{background:transparent;border:0;}.ui89-date-time-picker .react-datepicker__time-container .react-datepicker__time{background:transparent;}.ui89-date-time-picker .react-datepicker__day--keyboard-selected,.ui89-date-time-picker .react-datepicker__month-text--keyboard-selected,.ui89-date-time-picker .react-datepicker__quarter-text--keyboard-selected,.ui89-date-time-picker .react-datepicker__year-text--keyboard-selected{color:var(--ui89-theme-secondary-text-color);background:var(--ui89-theme-secondary-bg-color);}.ui89-date-time-picker .react-datepicker__day--selected,.ui89-date-time-picker .react-datepicker__day--in-selecting-range,.ui89-date-time-picker .react-datepicker__day--in-range,.ui89-date-time-picker .react-datepicker__month-text--selected,.ui89-date-time-picker .react-datepicker__month-text--in-selecting-range,.ui89-date-time-picker .react-datepicker__month-text--in-range,.ui89-date-time-picker .react-datepicker__quarter-text--selected,.ui89-date-time-picker .react-datepicker__quarter-text--in-selecting-range,.ui89-date-time-picker .react-datepicker__quarter-text--in-range,.ui89-date-time-picker .react-datepicker__year-text--selected,.ui89-date-time-picker .react-datepicker__year-text--in-selecting-range,.ui89-date-time-picker .react-datepicker__year-text--in-range{border-radius:0;color:var(--ui89-theme-primary-text-color);background:var(--ui89-theme-primary-bg-color);}.ui89-date-time-picker .react-datepicker__day--selected:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__day--in-selecting-range:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__day--in-range:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__month-text--selected:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__month-text--in-selecting-range:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__month-text--in-range:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__quarter-text--selected:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__quarter-text--in-range:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__year-text--selected:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__year-text--in-selecting-range:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__year-text--in-range:not([aria-disabled=\"true\"]):hover{color:var(--ui89-theme-primary-text-color);background:var(--ui89-theme-primary-bg-color);}.ui89-date-time-picker .react-datepicker__day:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__month-text:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__quarter-text:not([aria-disabled=\"true\"]):hover,.ui89-date-time-picker .react-datepicker__year-text:not([aria-disabled=\"true\"]):hover{border-radius:0;color:var(--ui89-theme-secondary-text-color);background:var(--ui89-theme-secondary-bg-color);}.ui89-date-time-picker .react-datepicker__month-container{border-right:1px solid currentColor;}.ui89-date-time-picker .react-datepicker__time-container{border-left:0;}.ui89-date-time-picker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:auto;}.ui89-date-time-picker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{color:var(--ui89-theme-primary-text-color);background:var(--ui89-theme-primary-bg-color);}.ui89-date-time-picker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{color:var(--ui89-theme-secondary-text-color);background:var(--ui89-theme-secondary-bg-color);}");
-
-const sheet$l = new CSSStyleSheet();sheet$l.replaceSync(".inputBox{box-sizing:border-box;display:block;width:100%;height:var(--ui89-input-height);line-height:var(--ui89-input-height);padding:0 var(--ui89-safe-space);border:0;border-radius:0;outline:none;background:var(--ui89-input-bg-color);color:var(--ui89-input-text-color);}.inputBox--unselectable{user-select:none;}.inputBox--clickable{cursor:var(--ui89-cursor-pointer);}");
-
 function Ui89DateTimePicker(props) {
     function datepickerOnChange(value) {
         if (props.onChange) {
@@ -192,7 +168,7 @@ function Ui89DateTimePicker(props) {
         }
     }
     return (React__default.createElement("span", { className: "ui89-date-time-picker" },
-        React__default.createElement(DatePicker, { className: [sheet$l.inputBox, sheet$t.normal].join(" "), calendarClassName: sheet$t.normal, showTimeSelect: true, dateFormat: "MM/dd/yyyy HH:mm:ss", timeFormat: "HH:mm", selected: props.value, onChange: datepickerOnChange, popperPlacement: "bottom-start" })));
+        React__default.createElement(DatePicker, { className: ["ui89-input-box", "ui89-typo-normal"].join(" "), calendarClassName: "ui89-typo-normal", showTimeSelect: true, dateFormat: "MM/dd/yyyy HH:mm:ss", timeFormat: "HH:mm", selected: props.value, onChange: datepickerOnChange, popperPlacement: "bottom-start" })));
 }
 
 const TimeAnimation = ({ children }) => {
@@ -236,18 +212,14 @@ function Ui89DigitalClock({ format = "HH:mm:ss", }) {
     function render({ now }) {
         return dateFormat(now, format);
     }
-    return (React__default.createElement("span", { className: `${sheet$t.special}` },
+    return (React__default.createElement("span", { className: "ui89-typo-special" },
         React__default.createElement(TimeAnimation, null, render)));
 }
 
-const sheet$k = new CSSStyleSheet();sheet$k.replaceSync(".container{color:var(--ui89-chosen-theme-text-color);background-color:var(--ui89-chosen-theme-bg-color);}.container--block{display:block;}");
-
 function Ui89HighlightText({ theme, block, children, }) {
-    return (React__default.createElement("span", { className: `${sheet$k.container} ${sheet$r[theme]} ${block ? sheet$k["container--block"] : null}` }, children));
+    return (React__default.createElement("span", { className: `ui89-highlight-text ui89-chosen-theme-${theme} ${block ? "ui89-highlight-text--block" : null}` }, children));
 }
 
-const sheet$j = new CSSStyleSheet();sheet$j.replaceSync(".hr{--ui89-hr-color:var(--ui89-scene-card-text-color);}.hr--straight{border-top:1px solid var(--ui89-hr-color);}.hr--dotted{border-top:1px dotted var(--ui89-hr-color);}.hr--dashed{border-top:1px dashed var(--ui89-hr-color);}.hr--double{border-top:1px solid var(--ui89-hr-color);}.hr--double .hrDouble{margin-top:4px;border-top:1px solid var(--ui89-hr-color);}.hr--use-theme{--ui89-hr-color:var(--ui89-chosen-theme-bg-color);}");
-
 var Ui89HrPropsLook;
 (function (Ui89HrPropsLook) {
     Ui89HrPropsLook["straight"] = "straight";
@@ -256,14 +228,10 @@ var Ui89HrPropsLook;
     Ui89HrPropsLook["double"] = "double";
 })(Ui89HrPropsLook || (Ui89HrPropsLook = {}));
 function Ui89Hr({ look = "straight", theme }) {
-    return (React__default.createElement("div", { className: `${sheet$j.hr} ${sheet$j[`hr--${look}`]} ${theme !== undefined ? sheet$j["hr--use-theme"] : ""} ${theme !== undefined ? sheet$r[theme] : ""}` },
-        React__default.createElement("div", { className: sheet$j.hrDouble })));
+    return (React__default.createElement("div", { className: `ui-89-hr ${`ui-89-hr--${look}`} ${theme !== undefined ? "ui-89-hr--use-theme" : ""} ${theme !== undefined ? `ui89-chosen-theme-${theme}` : ""}` },
+        React__default.createElement("div", { className: "ui-89-hr__double" })));
 }
 
-const sheet$i = new CSSStyleSheet();sheet$i.replaceSync(".inputFileUpload{display:flex;gap:calc(var(--ui89-safe-space) * 1);align-items:center;}.inputFileUpload__info{min-width:0;}");
-
-const sheet$h = new CSSStyleSheet();sheet$h.replaceSync(".unbreakable{white-space:nowrap;}.ellipsis{overflow:hidden;text-overflow:ellipsis;}.singleLine{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.singleLine--ellipsisLeft{direction:rtl;}");
-
 function Ui89InputFileUpload({ value, onChange, }) {
     const inputRef = useRef(null);
     function implOnChange(e) {
@@ -287,14 +255,12 @@ function Ui89InputFileUpload({ value, onChange, }) {
         inputRef.current.click();
     }
     return (React__default.createElement("div", null,
-        React__default.createElement("input", { ref: inputRef, className: sheet$t.special, type: "file", onChange: implOnChange, hidden: true }),
-        value ? (React__default.createElement("div", { className: sheet$i.inputFileUpload },
+        React__default.createElement("input", { ref: inputRef, className: "ui89-typo-special", type: "file", onChange: implOnChange, hidden: true }),
+        value ? (React__default.createElement("div", { className: "ui89-input-file-upload" },
             React__default.createElement(Ui89Button, { onClick: onClick }, "Change"),
-            React__default.createElement("span", { className: `${sheet$i.inputFileUpload__info} ${sheet$h.singleLine} ${sheet$h["singleLine--ellipsisLeft"]}`, title: value.name }, value.name))) : (React__default.createElement(Ui89Button, { onClick: onClick }, "Upload"))));
+            React__default.createElement("span", { className: `ui89-input-file-upload__info ui89-text-single-line ui89-text-single-line--ellipsis-left`, title: value.name }, value.name))) : (React__default.createElement(Ui89Button, { onClick: onClick }, "Upload"))));
 }
 
-const sheet$g = new CSSStyleSheet();sheet$g.replaceSync(".inputSelect{position:relative;}.menu{position:absolute;top:100%;left:0;width:100%;max-height:300px;overflow:auto;display:none;background:var(--ui89-input-bg-color);color:var(--ui89-input-text-color);z-index:1;}.menuContent{display:inline-flex;flex-direction:column;min-width:100%;}.inputSelect:focus-within .menu{display:block;animation:appear var(--ui89-animation-speed);}@keyframes appear{from{transform:translateY(-5px);}to{transform:translateY(0%);}}.menuItem{display:inline-flex;align-items:center;background:var(--ui89-input-bg-color);color:var(--ui89-input-text-color);height:var(--ui89-input-height);padding:0 var(--ui89-safe-space);white-space:nowrap;user-select:none;}.menuItem:not(.menuItem--disabled){cursor:pointer;}.menuItem:not(.menuItem--disabled):hover,.menuItem.selected{background:var(--ui89-input-text-color);color:var(--ui89-input-bg-color);}.menuItem--disabled{color:var(--ui89-palette-white);}");
-
 function Ui89InputSelect({ options, value, onChange, }) {
     const realOptions = useMemo(() => {
         if (options === undefined) {
@@ -329,21 +295,21 @@ function Ui89InputSelect({ options, value, onChange, }) {
     function optionTitle(option) {
         return typeof option.label === "string" ? option.label : undefined;
     }
-    return (React__default.createElement("div", { className: `${sheet$g.inputSelect}` },
+    return (React__default.createElement("div", { className: "ui89-input-select" },
         React__default.createElement("div", { className: [
-                sheet$l.inputBox,
-                sheet$l["inputBox--unselectable"],
-                sheet$l["inputBox--clickable"],
-                sheet$h.singleLine,
+                "ui89-input-box",
+                "ui89-input-box--unselectable",
+                "ui89-input-box--clickable",
+                "ui89-text-single-line",
             ].join(" "), tabIndex: 0, title: selectedOption !== null ? optionTitle(selectedOption) : undefined }, selectedOption !== null ? React__default.createElement(React__default.Fragment, null, selectedOption.label) : React__default.createElement(React__default.Fragment, null, "Select...")),
-        React__default.createElement("div", { className: [sheet$g.menu].join(" "), tabIndex: 0 },
-            React__default.createElement("div", { className: sheet$g.menuContent }, realOptions.length > 0 ? (realOptions.map((o) => {
+        React__default.createElement("div", { className: "ui89-input-select__menu", tabIndex: 0 },
+            React__default.createElement("div", { className: "ui89-input-select__menu__content" }, realOptions.length > 0 ? (realOptions.map((o) => {
                 const isSelected = selectedOption && selectedOption.value === o.value;
                 return (React__default.createElement("div", { className: [
-                        sheet$g.menuItem,
-                        isSelected ? sheet$g.selected : null,
+                        'ui89-input-select__menu__item',
+                        isSelected ? 'ui89-input-select__menu__item--selected' : null,
                     ].join(" "), title: optionTitle(o), key: o.value, onClick: () => selectOption(o) }, o.label));
-            })) : (React__default.createElement("div", { className: [sheet$g.menuItem, sheet$g["menuItem--disabled"]].join(" ") }, "<empty>"))))));
+            })) : (React__default.createElement("div", { className: ['ui89-input-select__menu__item', 'ui89-input-select__menu__item--disabled'].join(" ") }, "<empty>"))))));
 }
 
 function Ui89InputPassword({ value, placeholder, onChange, }) {
@@ -356,7 +322,7 @@ function Ui89InputPassword({ value, placeholder, onChange, }) {
         }
     };
     return (React__default.createElement("div", null,
-        React__default.createElement("input", { type: "password", className: `${sheet$l.inputBox} ${sheet$t.special}`, role: "textbox", value: intermediateValue, onChange: implOnChange, placeholder: placeholder })));
+        React__default.createElement("input", { type: "password", className: `ui89-input-box ui89-typo-special`, role: "textbox", value: intermediateValue, onChange: implOnChange, placeholder: placeholder })));
 }
 
 let uniqueId = 0;
@@ -451,7 +417,7 @@ function Ui89InputText({ value, placeholder, autoTrim = true, onChange, onTyping
         onChangeRef.current(newVal);
     }
     return (React__default.createElement("div", null,
-        React__default.createElement("input", { ref: inputRef, value: intermediateValue, className: `${sheet$l.inputBox} ${sheet$t.special}`, type: "text", onChange: implOnChange, placeholder: placeholder })));
+        React__default.createElement("input", { ref: inputRef, value: intermediateValue, className: `ui89-input-box ui89-typo-special`, type: "text", onChange: implOnChange, placeholder: placeholder })));
 }
 
 function stringRemoveAllWhitespace(str) {
@@ -518,8 +484,6 @@ emptyValue = null, value, min, max, onChange, precision, }) {
     return (React__default.createElement(Ui89InputText, { value: intermediateValue, onChange: implOnChange, onTyping: setIsTyping }));
 }
 
-const sheet$f = new CSSStyleSheet();sheet$f.replaceSync(".link{color:currentColor;text-decoration:underline;}.link:hover{color:currentColor;}");
-
 function Ui89LinkUnderline(props) {
     const overrides = useUi89Overrides();
     const [clicking, setClicking] = useState(false);
@@ -553,54 +517,40 @@ function Ui89LinkUnderline(props) {
             setClicking(false);
         }
     }
-    let containerClass = [sheet$f.link].join(" ");
-    return (React__default.createElement("a", { className: `${sheet$s.a} ${containerClass}`, role: "link", href: props.href, onClick: onClick }, props.children));
+    let containerClass = ['ui89-link-underline'].join(" ");
+    return (React__default.createElement("a", { className: `ui-89-reset-a ${containerClass}`, role: "link", href: props.href, onClick: onClick }, props.children));
 }
 
-const sheet$e = new CSSStyleSheet();sheet$e.replaceSync(".menuBar{display:flex;height:16px;color:var(--ui89-theme-primary-text-color);background:var(--ui89-theme-primary-bg-color);}.menuBarItem{cursor:var(--ui89-cursor-pointer);padding:0 calc(var(--ui89-safe-space) * 2);}.menuBarItem:hover,.menuBarItem:active{color:var(--ui89-theme-primary-bg-color);background:var(--ui89-theme-primary-text-color);}");
-
-const sheet$d = new CSSStyleSheet();sheet$d.replaceSync(".container ::-webkit-scrollbar{background:var(--ui89-scene-bg-color);width:calc(var(--ui89-safe-space) * 2);}.container ::-webkit-scrollbar-track{background:var(--ui89-scene-bg-color);background:var(--ui89-palette-dark-gray);border:1px solid var(--ui89-palette-dark-gray);}.container ::-webkit-scrollbar-thumb{background:var(--ui89-palette-light-gray);border:1px solid transparent;}.container ::-webkit-scrollbar-thumb:vertical{border-top-color:var(--ui89-palette-dark-gray);border-bottom-color:var(--ui89-palette-dark-gray);}.container ::-webkit-scrollbar-thumb:horizontal{border-left-color:var(--ui89-palette-dark-gray);border-right-color:var(--ui89-palette-dark-gray);}.container ::-webkit-scrollbar-button:single-button{background-color:#bbbbbb;display:block;border-style:solid;height:calc(var(--ui89-safe-space) * 2);}.container ::-webkit-scrollbar-button:single-button:vertical:decrement{border-width:0 var(--ui89-safe-space) var(--ui89-safe-space) var(--ui89-safe-space);border-color:transparent transparent var(--ui89-palette-black) transparent;}.container ::-webkit-scrollbar-button:single-button:vertical:decrement:active{background:var(--ui89-palette-dark-gray);}.container ::-webkit-scrollbar-button:single-button:vertical:increment{border-width:var(--ui89-safe-space) var(--ui89-safe-space) 0 var(--ui89-safe-space);border-color:var(--ui89-palette-black) transparent transparent transparent;}.container ::-webkit-scrollbar-button:single-button:vertical:increment:active{background:var(--ui89-palette-dark-gray);}.container ::-webkit-scrollbar-button:single-button:horizontal:decrement{border-width:var(--ui89-safe-space) var(--ui89-safe-space) var(--ui89-safe-space) 0;border-color:transparent var(--ui89-palette-black) transparent transparent;}.container ::-webkit-scrollbar-button:single-button:horizontal:decrement:active{background:var(--ui89-palette-dark-gray);}.container ::-webkit-scrollbar-button:single-button:horizontal:increment{border-width:var(--ui89-safe-space) 0 var(--ui89-safe-space) var(--ui89-safe-space);border-color:transparent transparent transparent var(--ui89-palette-black);}.container ::-webkit-scrollbar-button:single-button:horizontal:increment:active{background:var(--ui89-palette-dark-gray);}");
-
 function Ui89MenuBar({ items }) {
-    return (React__default.createElement("div", { className: `${sheet$e.menuBar} ${sheet$t.special} ${sheet$d.container}` }, items.map((item, index) => {
+    return (React__default.createElement("div", { className: `ui89-menu-bar ui89-typo-special ui89-scrollbar` }, items.map((item, index) => {
         function onNativeClick() {
             if (item.onClick !== undefined) {
                 item.onClick();
             }
         }
-        return (React__default.createElement("div", { key: index, className: sheet$e.menuBarItem, onClick: onNativeClick }, item.label));
+        return (React__default.createElement("div", { key: index, className: "ui89-menu-bar__item", onClick: onNativeClick }, item.label));
     })));
 }
 
-const sheet$c = new CSSStyleSheet();sheet$c.replaceSync(".dialog{position:fixed;inset:0px;display:none;animation:appear var(--ui89-animation-speed);}.dialog--open{display:block;}.dialogBackdrop{position:absolute;inset:0px;background-color:rgba(0,0,0,0.4);}.dialogBox{position:absolute;inset:0;border:none;border-radius:0;outline:none;margin:auto;word-break:break-word;max-height:100%;min-height:0;bottom:auto;overflow:auto;display:flex;flex-direction:column;}.spacer{min-height:0;height:100px;}.dialogBox>*:not(.spacer){flex:1 0;min-height:0;}.dialogBox--size-big{max-width:700px;}.dialogBox--size-medium{max-width:500px;}.dialogBox--size-small{max-width:300px;}@keyframes appear{from{opacity:0;}to{opacity:1;}}");
-
-const sheet$b = new CSSStyleSheet();sheet$b.replaceSync(".scene{background-color:var(--ui89-scene-bg-color);color:var(--ui89-scene-text-color);overflow:visible;}");
-
-const sheet$a = new CSSStyleSheet();sheet$a.replaceSync(".main{--ui89-scene-text-color:var(--ui89-palette-white);--ui89-scene-text-subtle-color:var(--ui89-palette-light-gray);--ui89-scene-bg-color:var(--ui89-palette-dark-blue);--ui89-scene-highlight-color:rgba(255,255,255,0.2);--ui89-scene-card-bg-color:var(--ui89-palette-dark-blue);--ui89-scene-card-text-color:var(--ui89-palette-white);--ui89-theme-primary-text-color:var(--ui89-palette-white);--ui89-theme-primary-bg-color:var(--ui89-palette-light-blue);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-light-gray);}.side{--ui89-scene-text-color:var(--ui89-palette-white);--ui89-scene-text-subtle-color:var(--ui89-palette-dark-gray);--ui89-scene-bg-color:var(--ui89-palette-light-gray);--ui89-scene-highlight-color:rgba(255,255,255,0.2);--ui89-scene-card-bg-color:var(--ui89-palette-light-gray);--ui89-scene-card-text-color:var(--ui89-palette-white);--ui89-theme-primary-text-color:var(--ui89-palette-white);--ui89-theme-primary-bg-color:var(--ui89-palette-light-blue);--ui89-theme-secondary-text-color:var(--ui89-palette-black);--ui89-theme-secondary-bg-color:var(--ui89-palette-white);}");
-
 function Ui89Scene({ look = Ui89Look.main, children }) {
-    return (React__default.createElement("div", { className: `${sheet$b.scene} ${sheet$a[look]} ${sheet$t.normal} ${sheet$d.container}` }, children));
+    return (React__default.createElement("div", { className: `ui89-scene ui-89-look-${look} ui89-typo-normal ui89-scrollbar` }, children));
 }
 
-const sheet$9 = new CSSStyleSheet();sheet$9.replaceSync(".gridExpandTrick{display:grid;}.gridExpandTrick>*{min-height:0;min-width:0;}");
-
 function GridExpandTrick({ children, }) {
-    return React__default.createElement("span", { className: sheet$9.gridExpandTrick }, children);
+    return React__default.createElement("span", { className: "ui89-grid-expand-trick" }, children);
 }
 
-const sheet$8 = new CSSStyleSheet();sheet$8.replaceSync(".scrollContainer{overflow:auto;}");
-
 function ScrollContainer({ children, }) {
-    return React__default.createElement("span", { className: sheet$8.scrollContainer }, children);
+    return React__default.createElement("span", { className: "ui89-scroll-container" }, children);
 }
 
 const portalRoot = typeof document !== "undefined" ? document.body : null;
 function Ui89ModalDialog({ open, size = "medium", children, topCenter, onRequestClose, }) {
     const dialogClass = useMemo(() => {
-        return [sheet$c.dialog, open ? sheet$c["dialog--open"] : ""].join(" ");
+        return ["ui89-modal-dialog", open ? "ui89-modal-dialog--open" : ""].join(" ");
     }, [size, open]);
     const dialogBoxClass = useMemo(() => {
-        return [sheet$c.dialogBox, sheet$c[`dialogBox--size-${size}`]].join(" ");
+        return ["ui89-modal-dialog__box", `ui89-modal-dialog__box--size-${size}`].join(" ");
     }, [size, open]);
     function onClickBackdrop() {
         if (onRequestClose !== undefined) {
@@ -608,9 +558,9 @@ function Ui89ModalDialog({ open, size = "medium", children, topCenter, onRequest
         }
     }
     const vdom = (React__default.createElement("div", { className: dialogClass, role: "dialog" },
-        React__default.createElement("div", { className: sheet$c.dialogBackdrop, role: "presentation", onClick: onClickBackdrop }),
+        React__default.createElement("div", { className: "ui89-modal-dialog__backdrop", role: "presentation", onClick: onClickBackdrop }),
         React__default.createElement("div", { className: dialogBoxClass },
-            React__default.createElement("div", { className: sheet$c.spacer }),
+            React__default.createElement("div", { className: "ui89-modal-dialog__spacer" }),
             React__default.createElement(HoverShadow, null,
                 React__default.createElement(GridExpandTrick, null,
                     React__default.createElement(Ui89Scene, null,
@@ -619,20 +569,16 @@ function Ui89ModalDialog({ open, size = "medium", children, topCenter, onRequest
     return portalRoot !== null ? createPortal(vdom, portalRoot) : vdom;
 }
 
-const sheet$7 = new CSSStyleSheet();sheet$7.replaceSync(".nameValuePair{display:flex;}.nameValuePair__nameWrapper{display:flex;flex:1;}.nameValuePair__dots{flex:1 1;min-width:calc(var(--ui89-safe-space) * 2);border-bottom:1px dashed currentColor;height:calc(1em * 0.75);margin:0 2px;}");
-
 function Ui89NameValuePair({ name, value, leftMaxWidth, }) {
-    return (React__default.createElement("div", { className: sheet$7.nameValuePair },
-        React__default.createElement("div", { className: sheet$7.nameValuePair__nameWrapper, style: { maxWidth: `${leftMaxWidth}px` } },
-            React__default.createElement("div", { className: sheet$7.nameValuePair__name }, name),
-            React__default.createElement("div", { className: sheet$7.nameValuePair__dots })),
-        React__default.createElement("div", { className: sheet$7.nameValuePair__value }, value)));
+    return (React__default.createElement("div", { className: "ui-89-name-value-pair" },
+        React__default.createElement("div", { className: "ui-89-name-value-pair__name-wrapper", style: { maxWidth: `${leftMaxWidth}px` } },
+            React__default.createElement("div", { className: "ui-89-name-value-pair__name" }, name),
+            React__default.createElement("div", { className: "ui-89-name-value-pair__dots" })),
+        React__default.createElement("div", { className: "ui-89-name-value-pair__value" }, value)));
 }
 
 const SvgShortcut = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 100, height: 100, viewBox: "0 0 100 100", ...props }, /* @__PURE__ */ React.createElement("rect", { x: 0, y: 0, width: 100, height: 100, fill: "white" }), /* @__PURE__ */ React.createElement("line", { x1: 80, y1: 80, x2: 20, y2: 20, stroke: "black", strokeWidth: 15 }), /* @__PURE__ */ React.createElement("line", { x1: 20, y1: 20, x2: 50, y2: 20, stroke: "black", strokeWidth: 15, strokeLinecap: "round" }), /* @__PURE__ */ React.createElement("line", { x1: 20, y1: 20, x2: 20, y2: 50, stroke: "black", strokeWidth: 15, strokeLinecap: "round" }));
 
-const sheet$6 = new CSSStyleSheet();sheet$6.replaceSync(".container{display:inline-flex;flex-direction:column;position:relative;text-align:center;box-sizing:border-box;user-select:none;cursor:var(--ui89-cursor-pointer);}.label{max-width:140px;}.container:hover{border-color:currentColor;}.container:hover .label{background:var(--ui89-scene-text-color);color:var(--ui89-scene-bg-color);}.imageContainer{display:flex;align-items:flex-end;justify-content:center;position:relative;}.image{display:block;width:140px;height:140px;}.shortcutIconContainer{position:relative;width:0;}.shortcutIcon{position:absolute;bottom:0;right:0;pointer-events:none;}");
-
 function Ui89SpaceVertical({ gap = 1 }) {
     const style = {
         paddingTop: `calc(var(--ui89-safe-space) * ${gap})`,
@@ -644,13 +590,13 @@ function Ui89Shortcut({ imageUrl, label, onClick = () => { }, }) {
     function onNativeClick() {
         onClick();
     }
-    return (React__default.createElement("div", { className: sheet$6.container, onClick: onNativeClick },
-        React__default.createElement("div", { className: sheet$6.imageContainer },
-            React__default.createElement("img", { className: sheet$6.image, src: imageUrl }),
-            React__default.createElement("div", { className: sheet$6.shortcutIconContainer },
-                React__default.createElement(SvgShortcut, { className: sheet$6.shortcutIcon, width: 16, height: 16 }))),
+    return (React__default.createElement("div", { className: "ui89-shortcut", onClick: onNativeClick },
+        React__default.createElement("div", { className: "ui89-shortcut__image-container" },
+            React__default.createElement("img", { className: "ui89-shortcut__image", src: imageUrl }),
+            React__default.createElement("div", { className: "ui89-shortcut__shortcut-icon-container" },
+                React__default.createElement(SvgShortcut, { className: "ui89-shortcut__shortcut-icon", width: 16, height: 16 }))),
         React__default.createElement(Ui89SpaceVertical, { gap: 1 }),
-        React__default.createElement("div", { className: `${sheet$6.label} ${sheet$t.smallBold}`, onClick: onNativeClick }, label)));
+        React__default.createElement("div", { className: `ui89-shortcut__label ui89-typo-small-bold`, onClick: onNativeClick }, label)));
 }
 
 function Ui89SpacePadding(props) {
@@ -664,19 +610,17 @@ function Ui89SpacePadding(props) {
     return React__default.createElement("div", { style: style }, props.children);
 }
 
-const sheet$5 = new CSSStyleSheet();sheet$5.replaceSync(".navigation{display:flex;flex-wrap:wrap;}.navigation--stretch .navigationItem{flex-grow:1;}.navigationItem{color:var(--ui89-scene-text-color);background-color:var(--ui89-scene-bg-color);padding:0 calc(var(--ui89-safe-space) * 3);cursor:var(--ui89-cursor-pointer);text-align:center;}.navigationItem:hover,.navigationItemSelected{background-color:var(--ui89-scene-text-color);color:var(--ui89-scene-bg-color);}");
-
 function Ui89Tabs({ selected, onChange = () => { }, options = [], stretch, }) {
     function handleOnChange(value) {
         onChange(value);
     }
     return (React__default.createElement("div", { className: [
-            sheet$5.navigation,
-            stretch ? sheet$5["navigation--stretch"] : "",
+            "ui89-tabs",
+            stretch ? "ui89-tabs--stretch" : "",
         ].join(" ") }, options.map((option) => (React__default.createElement("div", { className: [
-            sheet$5.navigationItem,
-            sheet$t.smallBold,
-            selected === option.value ? sheet$5.navigationItemSelected : "",
+            "ui89-tabs__item",
+            "ui89-typo-small-bold",
+            selected === option.value ? "ui89-tabs__item--selected" : "",
         ].join(" "), key: option.value, onClick: () => handleOnChange(option.value) }, option.label)))));
 }
 
@@ -694,38 +638,30 @@ function Ui89TabbedCard({ selected, onChange, options = [], }) {
         React__default.createElement(React__default.Fragment, { key: renderKey }, render())));
 }
 
-const sheet$4 = new CSSStyleSheet();sheet$4.replaceSync(".container{color:var(--ui89-chosen-theme-text-color);background-color:var(--ui89-chosen-theme-bg-color);display:inline-block;padding:calc(var(--ui89-safe-space) / 2) calc(var(--ui89-safe-space) * 2);border-radius:var(--box-border-radius);line-height:1;}");
-
 function Ui89TagBox({ theme, children }) {
-    return (React__default.createElement("div", { className: `${sheet$4.container} ${sheet$t.special} ${sheet$r[theme]}` }, children));
+    return (React__default.createElement("div", { className: `ui89-tag-box ui89-typo-special ui89-chosen-theme-${theme}` }, children));
 }
 
-const sheet$3 = new CSSStyleSheet();sheet$3.replaceSync(".background{color:var(--ui89-chosen-theme-text-color);background-color:var(--ui89-chosen-theme-bg-color);--ui89-scene-card-bg-color:var(--ui89-chosen-theme-bg-color);--ui89-scene-card-text-color:var(--ui89-chosen-theme-text-color);}");
-
 function Ui89ThemeBackground({ theme = Ui89Theme.primary, children, }) {
-    return (React__default.createElement("div", { className: `${sheet$3.background} ${sheet$r[theme]}` }, children));
+    return (React__default.createElement("div", { className: `ui89-theme-background ui89-chosen-theme-${theme}` }, children));
 }
 
-const sheet$2 = new CSSStyleSheet();sheet$2.replaceSync(".container{display:flex;}.inside{min-width:0;color:var(--ui89-scene-bg-color);background-color:var(--ui89-scene-text-color);padding:0px var(--ui89-safe-space);}");
-
 function Ui89TitleBox({ children }) {
-    return (React__default.createElement("div", { className: `${sheet$2.container} ${sheet$t.special}` },
-        React__default.createElement("div", { className: `${sheet$2.inside} ${sheet$h.singleLine}` }, children)));
+    return (React__default.createElement("div", { className: `ui89-title-box ui89-typo-special` },
+        React__default.createElement("div", { className: `ui89-title-box__inside ui89-text-single-line` }, children)));
 }
 
-const sheet$1 = new CSSStyleSheet();sheet$1.replaceSync(".container{display:flex;line-height:1;}.inside{min-width:0;border-bottom:1px solid;position:relative;padding-bottom:calc(var(--ui89-safe-space) / 2);}.inside:after{content:\"\";position:absolute;inset:0;transform:translateY(-2px);border-bottom:1px solid;z-index:0;}");
-
 function Ui89TitleUnderline({ children }) {
-    return (React__default.createElement("div", { className: `${sheet$1.container} ${sheet$t.special}` },
-        React__default.createElement("div", { className: `${sheet$1.inside} ${sheet$h.singleLine}` }, children)));
+    return (React__default.createElement("div", { className: `ui89-title-underline ui89-typo-special` },
+        React__default.createElement("div", { className: `ui89-title-underline__inside ui89-text-single-line` }, children)));
 }
 
 function useUi89Toaster() {
     return {
         toast(content, options = { theme: Ui89Theme.primary }) {
-            const classNames = ["ui89-toaster", sheet$t.normal];
+            const classNames = ["ui89-toaster", "ui89-typo-normal"];
             if (options.theme !== undefined) {
-                classNames.push(sheet$r[options.theme]);
+                classNames.push(`ui89-chosen-theme-${options.theme}`);
             }
             let autoClose = 5000;
             if (options.duration !== undefined) {
@@ -751,8 +687,6 @@ function Ui89Toaster() {
     return React__default.createElement(ToastContainer, null);
 }
 
-const sheet = new CSSStyleSheet();sheet.replaceSync(".table{display:flex;flex-direction:column;overflow:auto;height:100%;box-sizing:border-box;}.table>.tableBody,.table>.empty{flex:1;}.tableHeader{position:absolute;top:0;z-index:2;min-width:100%;display:flex;}.rowBorder{margin-top:-2px;border-bottom:2px solid var(--ui89-scene-text-color);position:absolute;left:0;right:0;pointer-events:none;}.empty{display:flex;align-items:center;justify-content:center;text-align:center;}.cell{display:flex;align-items:center;padding:var(--ui89-safe-space);border-bottom:2px solid var(--ui89-scene-text-color);box-sizing:border-box;overflow:hidden;background:var(--ui89-scene-bg-color);}.cell--column-first{padding-left:var(--ui89-safe-space);}.cell--column-last{padding-right:var(--ui89-safe-space);}.cell--row-first{border-top:none;}.cell--row-last{}");
-
 const HEADER_HEIGHT = 30;
 function Ui89VirtualTable(props) {
     const rows = useMemo(() => {
@@ -785,30 +719,30 @@ function Ui89VirtualTable(props) {
         return columnIndex === columns.length - 1;
     }
     function getColumnClass(columnIndex, rowIndex) {
-        const classes = [sheet.cell];
+        const classes = ["ui89-virtual-table__cell"];
         if (rowIndex === 0) {
-            classes.push(sheet["cell--row-first"]);
+            classes.push("ui89-virtual-table__cell--row-first");
         }
         if (rowIndex === rows.length) {
-            classes.push(sheet["cell--row-last"]);
+            classes.push("ui89-virtual-table__cell--row-last");
         }
         if (columnIndex === 0) {
-            classes.push(sheet["cell--column-first"]);
+            classes.push("ui89-virtual-table__cell--column-first");
         }
         if (isLastColumn(columnIndex)) {
-            classes.push(sheet["cell--column-last"]);
+            classes.push("ui89-virtual-table__cell--column-last");
         }
         return classes.join(" ");
     }
     // This is the secret to having sticky headers.
     const innerElementType = forwardRef(({ children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, ...rest },
-        React__default.createElement("div", { className: sheet.tableHeader },
-            columns.map((column, index) => (React__default.createElement("div", { key: index, className: [getColumnClass(index, 0), sheet$t.normalBold].join(" "), style: {
+        React__default.createElement("div", { className: "ui89-virtual-table__header" },
+            columns.map((column, index) => (React__default.createElement("div", { key: index, className: [getColumnClass(index, 0), "ui89-typo-normal-bold"].join(" "), style: {
                     left: getColumnHorizontalOffset(index),
                     width: getColumnWidth(index) + "px",
                     height: getRowHeight(0) + "px",
                 } }, column.renderHeader !== undefined && (React__default.createElement(column.renderHeader, { index: index, column: column }))))),
-            React__default.createElement("div", { className: sheet.rowBorder, style: { top: 0, transform: `translateY(${getRowHeight(0) + "px"})` } })),
+            React__default.createElement("div", { className: "ui89-virtual-table__row-border", style: { top: 0, transform: `translateY(${getRowHeight(0) + "px"})` } })),
         children)));
     function renderRowBorder(columnIndex, style) {
         if (!isLastColumn(columnIndex)) {
@@ -822,13 +756,13 @@ function Ui89VirtualTable(props) {
             right: 0,
             width: undefined,
         };
-        return React__default.createElement("div", { className: sheet.rowBorder, style: rowBorderStyle });
+        return React__default.createElement("div", { className: "ui89-virtual-table__row-border", style: rowBorderStyle });
     }
-    return (React__default.createElement("div", { className: sheet.table }, rows.length > 0 ? (React__default.createElement("div", { className: sheet.tableBody },
+    return (React__default.createElement("div", { className: "ui89-virtual-table" }, rows.length > 0 ? (React__default.createElement("div", { className: "ui89-virtual-table__body" },
         React__default.createElement(AutoSizer, null, ({ height, width }) => (React__default.createElement(VariableSizeGrid, { columnCount: columns.length, columnWidth: getColumnWidth, rowCount: rows.length + 1, rowHeight: getRowHeight, width: width, height: height, innerElementType: innerElementType }, ({ columnIndex, rowIndex, style }) => (React__default.createElement(React__default.Fragment, null,
             React__default.createElement("div", { className: getColumnClass(columnIndex, rowIndex), style: style }, rowIndex !== 0 &&
                 [columns[columnIndex].renderBody].map((BodyContent) => (React__default.createElement(BodyContent, { key: rowIndex, index: rowIndex - 1, row: rows[rowIndex - 1] })))),
-            renderRowBorder(columnIndex, style)))))))) : (React__default.createElement("div", { className: sheet.empty },
+            renderRowBorder(columnIndex, style)))))))) : (React__default.createElement("div", { className: "ui89-virtual-table__empty" },
         React__default.createElement(Ui89TagBox, { theme: "warning" }, "Empty")))));
 }