react-ui89 0.29.2 → 0.29.4

package/dist/esm/index.js

@@ -22,14 +22,6 @@ var Ui89Look;
     Ui89Look["side"] = "side";
 })(Ui89Look || (Ui89Look = {}));
 
-var styles$h = ".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));}";
-
-var typoStyles = ".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;}";
-
-var resetStyles = ".a{text-decoration:none;}";
-
-var chosenThemeStyles = ".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));
@@ -56,22 +48,18 @@ function Ui89BreadcrumbsItem({ index, item, onSelect, }) {
             }
         }
     };
-    return (React__default.createElement("a", { className: `${resetStyles.a} ${styles$h.breadcrumbsItem}`, href: item.url, style: style, onClick: onClick },
-        React__default.createElement("div", { className: styles$h.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: `${styles$h.breadcrumbs} ${typoStyles.special} ${chosenThemeStyles[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 })))));
 }
 
-var styles$g = ".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);}";
-
-var styles$f = ".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: styles$f.hoverShadow },
-        React__default.createElement("span", { className: styles$f.hoverShadowBottom }),
-        React__default.createElement("span", { className: styles$f.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));
 }
 
@@ -130,53 +118,49 @@ function Ui89Button({ theme = Ui89Theme.primary, size = Ui89ButtonPropsSize.stan
         }
     }
     let containerClass = [
-        styles$g.container,
-        styles$g["container--size-" + size],
+        'ui89-button',
+        `ui89-button--size-${size}`,
     ].join(" ");
     let buttonClass = [
-        styles$g.button,
-        typoStyles.special,
-        chosenThemeStyles[theme],
-        activated ? styles$g.active : undefined,
-        block ? styles$g.block : undefined,
-        disabled ? styles$g.disabled : undefined,
-        clicking ? styles$g.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: `${resetStyles.a} ${buttonClass}`, role: "button", href: href, onClick: onAnchorClick },
-                    React__default.createElement("span", { className: styles$g.click }),
-                    React__default.createElement("span", { className: styles$g.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: styles$g.click }),
-                    React__default.createElement("span", { className: styles$g.buttonContent }, children)))));
+                    React__default.createElement("span", { className: "ui89-button__button__click" }),
+                    React__default.createElement("span", null, children)))));
     }
 }
 
-var styles$e = ".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: `${styles$e.container} ${hasTopContent ? styles$e.containerHasTop : ""}` },
-        React__default.createElement("div", { className: styles$e.inside },
-            topLeftCenter && (React__default.createElement("div", { className: styles$e.topLeftCenter }, topLeftCenter)),
-            topCenter && React__default.createElement("div", { className: styles$e.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: `${styles$e.cardHorizontalConnection} ${overflow ? styles$e["cardHorizontalConnection--overflow"] : ""}` }, children));
+    return (React__default.createElement("div", { className: `ui89-card__horizontal-connection ${overflow ? 'ui89-card__horizontal-connection--overflow' : ""}` }, children));
 }
 
-var inputBoxStyles = ".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) {
@@ -184,7 +168,7 @@ function Ui89DateTimePicker(props) {
         }
     }
     return (React__default.createElement("span", { className: "ui89-date-time-picker" },
-        React__default.createElement(DatePicker, { className: [inputBoxStyles.inputBox, typoStyles.normal].join(" "), calendarClassName: typoStyles.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 }) => {
@@ -228,18 +212,14 @@ function Ui89DigitalClock({ format = "HH:mm:ss", }) {
     function render({ now }) {
         return dateFormat(now, format);
     }
-    return (React__default.createElement("span", { className: `${typoStyles.special}` },
+    return (React__default.createElement("span", { className: "ui89-typo-special" },
         React__default.createElement(TimeAnimation, null, render)));
 }
 
-var style$3 = ".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: `${style$3.container} ${chosenThemeStyles[theme]} ${block ? style$3["container--block"] : null}` }, children));
+    return (React__default.createElement("span", { className: `ui89-highlight-text ui89-chosen-theme-${theme} ${block ? "ui89-highlight-text--block" : null}` }, children));
 }
 
-var style$2 = ".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";
@@ -248,14 +228,10 @@ var Ui89HrPropsLook;
     Ui89HrPropsLook["double"] = "double";
 })(Ui89HrPropsLook || (Ui89HrPropsLook = {}));
 function Ui89Hr({ look = "straight", theme }) {
-    return (React__default.createElement("div", { className: `${style$2.hr} ${style$2[`hr--${look}`]} ${theme !== undefined ? style$2["hr--use-theme"] : ""} ${theme !== undefined ? chosenThemeStyles[theme] : ""}` },
-        React__default.createElement("div", { className: style$2.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" })));
 }
 
-var styles$d = ".inputFileUpload{display:flex;gap:calc(var(--ui89-safe-space) * 1);align-items:center;}.inputFileUpload__info{min-width:0;}";
-
-var textStyles = ".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) {
@@ -279,14 +255,12 @@ function Ui89InputFileUpload({ value, onChange, }) {
         inputRef.current.click();
     }
     return (React__default.createElement("div", null,
-        React__default.createElement("input", { ref: inputRef, className: typoStyles.special, type: "file", onChange: implOnChange, hidden: true }),
-        value ? (React__default.createElement("div", { className: styles$d.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: `${styles$d.inputFileUpload__info} ${textStyles.singleLine} ${textStyles["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"))));
 }
 
-var styles$c = ".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) {
@@ -321,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: `${styles$c.inputSelect}` },
+    return (React__default.createElement("div", { className: "ui89-input-select" },
         React__default.createElement("div", { className: [
-                inputBoxStyles.inputBox,
-                inputBoxStyles["inputBox--unselectable"],
-                inputBoxStyles["inputBox--clickable"],
-                textStyles.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: [styles$c.menu].join(" "), tabIndex: 0 },
-            React__default.createElement("div", { className: styles$c.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: [
-                        styles$c.menuItem,
-                        isSelected ? styles$c.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: [styles$c.menuItem, styles$c["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, }) {
@@ -348,7 +322,7 @@ function Ui89InputPassword({ value, placeholder, onChange, }) {
         }
     };
     return (React__default.createElement("div", null,
-        React__default.createElement("input", { type: "password", className: `${inputBoxStyles.inputBox} ${typoStyles.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;
@@ -443,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: `${inputBoxStyles.inputBox} ${typoStyles.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) {
@@ -510,8 +484,6 @@ emptyValue = null, value, min, max, onChange, precision, }) {
     return (React__default.createElement(Ui89InputText, { value: intermediateValue, onChange: implOnChange, onTyping: setIsTyping }));
 }
 
-var styles$b = ".link{color:currentColor;text-decoration:underline;}.link:hover{color:currentColor;}";
-
 function Ui89LinkUnderline(props) {
     const overrides = useUi89Overrides();
     const [clicking, setClicking] = useState(false);
@@ -545,54 +517,40 @@ function Ui89LinkUnderline(props) {
             setClicking(false);
         }
     }
-    let containerClass = [styles$b.link].join(" ");
-    return (React__default.createElement("a", { className: `${resetStyles.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));
 }
 
-var styles$a = ".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);}";
-
-var scrollbarStyles = ".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: `${styles$a.menuBar} ${typoStyles.special} ${scrollbarStyles.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: styles$a.menuBarItem, onClick: onNativeClick }, item.label));
+        return (React__default.createElement("div", { key: index, className: "ui89-menu-bar__item", onClick: onNativeClick }, item.label));
     })));
 }
 
-var styles$9 = ".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;}}";
-
-var styles$8 = ".scene{background-color:var(--ui89-scene-bg-color);color:var(--ui89-scene-text-color);overflow:visible;}";
-
-var lookStyles = ".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: `${styles$8.scene} ${lookStyles[look]} ${typoStyles.normal} ${scrollbarStyles.container}` }, children));
+    return (React__default.createElement("div", { className: `ui89-scene ui-89-look-${look} ui89-typo-normal ui89-scrollbar` }, children));
 }
 
-var styles$7 = ".gridExpandTrick{display:grid;}.gridExpandTrick>*{min-height:0;min-width:0;}";
-
 function GridExpandTrick({ children, }) {
-    return React__default.createElement("span", { className: styles$7.gridExpandTrick }, children);
+    return React__default.createElement("span", { className: "ui89-grid-expand-trick" }, children);
 }
 
-var styles$6 = ".scrollContainer{overflow:auto;}";
-
 function ScrollContainer({ children, }) {
-    return React__default.createElement("span", { className: styles$6.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 [styles$9.dialog, open ? styles$9["dialog--open"] : ""].join(" ");
+        return ["ui89-modal-dialog", open ? "ui89-modal-dialog--open" : ""].join(" ");
     }, [size, open]);
     const dialogBoxClass = useMemo(() => {
-        return [styles$9.dialogBox, styles$9[`dialogBox--size-${size}`]].join(" ");
+        return ["ui89-modal-dialog__box", `ui89-modal-dialog__box--size-${size}`].join(" ");
     }, [size, open]);
     function onClickBackdrop() {
         if (onRequestClose !== undefined) {
@@ -600,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: styles$9.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: styles$9.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,
@@ -611,20 +569,16 @@ function Ui89ModalDialog({ open, size = "medium", children, topCenter, onRequest
     return portalRoot !== null ? createPortal(vdom, portalRoot) : vdom;
 }
 
-var style$1 = ".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: style$1.nameValuePair },
-        React__default.createElement("div", { className: style$1.nameValuePair__nameWrapper, style: { maxWidth: `${leftMaxWidth}px` } },
-            React__default.createElement("div", { className: style$1.nameValuePair__name }, name),
-            React__default.createElement("div", { className: style$1.nameValuePair__dots })),
-        React__default.createElement("div", { className: style$1.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" }));
 
-var styles$5 = ".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})`,
@@ -636,13 +590,13 @@ function Ui89Shortcut({ imageUrl, label, onClick = () => { }, }) {
     function onNativeClick() {
         onClick();
     }
-    return (React__default.createElement("div", { className: styles$5.container, onClick: onNativeClick },
-        React__default.createElement("div", { className: styles$5.imageContainer },
-            React__default.createElement("img", { className: styles$5.image, src: imageUrl }),
-            React__default.createElement("div", { className: styles$5.shortcutIconContainer },
-                React__default.createElement(SvgShortcut, { className: styles$5.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: `${styles$5.label} ${typoStyles.smallBold}`, onClick: onNativeClick }, label)));
+        React__default.createElement("div", { className: `ui89-shortcut__label ui89-typo-small-bold`, onClick: onNativeClick }, label)));
 }
 
 function Ui89SpacePadding(props) {
@@ -656,19 +610,17 @@ function Ui89SpacePadding(props) {
     return React__default.createElement("div", { style: style }, props.children);
 }
 
-var styles$4 = ".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: [
-            styles$4.navigation,
-            stretch ? styles$4["navigation--stretch"] : "",
+            "ui89-tabs",
+            stretch ? "ui89-tabs--stretch" : "",
         ].join(" ") }, options.map((option) => (React__default.createElement("div", { className: [
-            styles$4.navigationItem,
-            typoStyles.smallBold,
-            selected === option.value ? styles$4.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)))));
 }
 
@@ -686,38 +638,30 @@ function Ui89TabbedCard({ selected, onChange, options = [], }) {
         React__default.createElement(React__default.Fragment, { key: renderKey }, render())));
 }
 
-var style = ".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: `${style.container} ${typoStyles.special} ${chosenThemeStyles[theme]}` }, children));
+    return (React__default.createElement("div", { className: `ui89-tag-box ui89-typo-special ui89-chosen-theme-${theme}` }, children));
 }
 
-var styles$3 = ".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: `${styles$3.background} ${chosenThemeStyles[theme]}` }, children));
+    return (React__default.createElement("div", { className: `ui89-theme-background ui89-chosen-theme-${theme}` }, children));
 }
 
-var styles$2 = ".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: `${styles$2.container} ${typoStyles.special}` },
-        React__default.createElement("div", { className: `${styles$2.inside} ${textStyles.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)));
 }
 
-var styles$1 = ".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: `${styles$1.container} ${typoStyles.special}` },
-        React__default.createElement("div", { className: `${styles$1.inside} ${textStyles.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", typoStyles.normal];
+            const classNames = ["ui89-toaster", "ui89-typo-normal"];
             if (options.theme !== undefined) {
-                classNames.push(chosenThemeStyles[options.theme]);
+                classNames.push(`ui89-chosen-theme-${options.theme}`);
             }
             let autoClose = 5000;
             if (options.duration !== undefined) {
@@ -743,8 +687,6 @@ function Ui89Toaster() {
     return React__default.createElement(ToastContainer, null);
 }
 
-var styles = ".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(() => {
@@ -777,30 +719,30 @@ function Ui89VirtualTable(props) {
         return columnIndex === columns.length - 1;
     }
     function getColumnClass(columnIndex, rowIndex) {
-        const classes = [styles.cell];
+        const classes = ["ui89-virtual-table__cell"];
         if (rowIndex === 0) {
-            classes.push(styles["cell--row-first"]);
+            classes.push("ui89-virtual-table__cell--row-first");
         }
         if (rowIndex === rows.length) {
-            classes.push(styles["cell--row-last"]);
+            classes.push("ui89-virtual-table__cell--row-last");
         }
         if (columnIndex === 0) {
-            classes.push(styles["cell--column-first"]);
+            classes.push("ui89-virtual-table__cell--column-first");
         }
         if (isLastColumn(columnIndex)) {
-            classes.push(styles["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: styles.tableHeader },
-            columns.map((column, index) => (React__default.createElement("div", { key: index, className: [getColumnClass(index, 0), typoStyles.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: styles.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)) {
@@ -814,13 +756,13 @@ function Ui89VirtualTable(props) {
             right: 0,
             width: undefined,
         };
-        return React__default.createElement("div", { className: styles.rowBorder, style: rowBorderStyle });
+        return React__default.createElement("div", { className: "ui89-virtual-table__row-border", style: rowBorderStyle });
     }
-    return (React__default.createElement("div", { className: styles.table }, rows.length > 0 ? (React__default.createElement("div", { className: styles.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: styles.empty },
+            renderRowBorder(columnIndex, style)))))))) : (React__default.createElement("div", { className: "ui89-virtual-table__empty" },
         React__default.createElement(Ui89TagBox, { theme: "warning" }, "Empty")))));
 }