@arcanejs/toolkit-frontend 0.4.0 → 0.6.0

package/dist/components/index.js

@@ -2,7 +2,7 @@
 
 
 
-var _chunkKNYDA6D6js = require('../chunk-KNYDA6D6.js');
+var _chunkT3QSZARMjs = require('../chunk-T3QSZARM.js');
 
 
 
@@ -11,14 +11,12 @@ var _chunkKNYDA6D6js = require('../chunk-KNYDA6D6.js');
 
 
 
+var _chunkWVMAJYGIjs = require('../chunk-WVMAJYGI.js');
 
-var _chunkY5UYS6EXjs = require('../chunk-Y5UYS6EX.js');
 
 
 
-
-var _chunkXEIKOLS2js = require('../chunk-XEIKOLS2.js');
-require('../chunk-MLKGABMK.js');
+var _chunk7VTNOX5Ojs = require('../chunk-7VTNOX5O.js');
 
 // src/components/index.tsx
 var _core = require('@arcanejs/protocol/core');
@@ -57,7 +55,7 @@ var ButtonLabel = _styledcomponents.styled.span`
 `;
 var Button = (props) => {
   const { sendMessage } = _react2.default.useContext(StageContext);
-  const { touching, handlers } = _chunkXEIKOLS2js.usePressable.call(void 0, 
+  const { touching, handlers } = _chunk7VTNOX5Ojs.usePressable.call(void 0, 
     () => _optionalChain([sendMessage, 'optionalCall', _ => _({
       type: "component-message",
       namespace: "core",
@@ -69,7 +67,7 @@ var Button = (props) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: _chunkXEIKOLS2js.calculateClass.call(void 0, 
+      className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
         props.className,
         touching || state.state === "pressed" ? TOUCHING_CLASS : null,
         state.state === "error" && ERROR_CLASS
@@ -79,7 +77,7 @@ var Button = (props) => {
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: TOUCH_INDICATOR_CLASS }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonContents, { children: [
-          props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKNYDA6D6js.Icon, { icon: props.info.icon }),
+          props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT3QSZARMjs.Icon, { icon: props.info.icon }),
           props.info.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonLabel, { children: props.info.text })
         ] })
       ]
@@ -87,26 +85,26 @@ var Button = (props) => {
   );
 };
 var StyledButton = _styledcomponents.styled.call(void 0, Button)`
-  ${_chunkY5UYS6EXjs.rectButton}
+  ${_chunkWVMAJYGIjs.rectButton}
   outline: none;
   height: 30px;
   position: relative;
   overflow: visible;
 
   .${TOUCH_INDICATOR_CLASS} {
-    ${_chunkY5UYS6EXjs.touchIndicatorNormal}
+    ${_chunkWVMAJYGIjs.touchIndicatorNormal}
   }
 
   &.${ERROR_CLASS} {
-    color: ${_chunkY5UYS6EXjs.THEME.colorRed};
-    border-color: ${_chunkY5UYS6EXjs.THEME.colorRed};
+    color: ${(p) => p.theme.colorRed};
+    border-color: ${(p) => p.theme.colorRed};
   }
 
   &.${TOUCHING_CLASS} {
-    ${_chunkY5UYS6EXjs.buttonStateNormalActive}
+    ${_chunkWVMAJYGIjs.buttonStateNormalActive}
 
     .${TOUCH_INDICATOR_CLASS} {
-      ${_chunkY5UYS6EXjs.touchIndicatorTouching}
+      ${_chunkWVMAJYGIjs.touchIndicatorTouching}
     }
   }
 `;
@@ -135,40 +133,40 @@ function nextColor(currentColor) {
 var LastNestedColor = _react2.default.createContext("dark");
 var NestedContent = ({ className, children }) => {
   const color = _react2.default.useContext(LastNestedColor);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkXEIKOLS2js.calculateClass.call(void 0, className, `color-${color}`), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LastNestedColor.Provider, { value: nextColor(color), children }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, `color-${color}`), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LastNestedColor.Provider, { value: nextColor(color), children }) });
 };
 NestedContent.displayName = "NestedContent";
 var StyledNestedContent = _styledcomponents.styled.call(void 0, NestedContent)`
-  padding: ${_chunkY5UYS6EXjs.THEME.sizingPx.spacing / 2}px;
-  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+  padding: ${(p) => p.theme.sizingPx.spacing / 2}px;
+  box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
 
   &.color-dark {
-    background: ${_chunkY5UYS6EXjs.THEME.bgDark1};
+    background: ${(p) => p.theme.bgDark1};
   }
 
   &.color-lighter {
-    background: ${_chunkY5UYS6EXjs.THEME.bg};
+    background: ${(p) => p.theme.bg};
   }
 
   &.color-lighterer {
-    background: ${_chunkY5UYS6EXjs.THEME.bgLight1};
+    background: ${(p) => p.theme.bgLight1};
   }
 `;
 
 // src/components/group.tsx
 
-var CollapseIcon = _styledcomponents.styled.call(void 0, (0, _chunkKNYDA6D6js.Icon))({
+var CollapseIcon = _styledcomponents.styled.call(void 0, (0, _chunkT3QSZARMjs.Icon))({
   cursor: "pointer"
 });
 var Header = _styledcomponents.styled.div`
   display: flex;
   align-items: center;
   padding: 5px 2px;
-  background: ${_chunkY5UYS6EXjs.THEME.borderDark};
-  border-bottom: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+  background: ${(p) => p.theme.borderDark};
+  border-bottom: 1px solid ${(p) => p.theme.borderDark};
 
   &.touching {
-    background: ${_chunkY5UYS6EXjs.THEME.bgDark1};
+    background: ${(p) => p.theme.bgDark1};
   }
 
   &.collapsed {
@@ -182,8 +180,8 @@ var Header = _styledcomponents.styled.div`
 var Label = _styledcomponents.styled.span`
   display: inline-block;
   border-radius: 3px;
-  background: ${_chunkY5UYS6EXjs.THEME.bg};
-  border: 1px solid ${_chunkY5UYS6EXjs.THEME.bgLight1};
+  background: ${(p) => p.theme.bg};
+  border: 1px solid ${(p) => p.theme.bgLight1};
   padding: 3px 4px;
 `;
 var Grow = _styledcomponents.styled.span({
@@ -201,7 +199,7 @@ var GroupChildren = _styledcomponents.styled.div`
   ${(p) => p.info.direction === "vertical" ? "" : "align-items: center;"}
 
   > * {
-    margin: ${_chunkY5UYS6EXjs.THEME.sizingPx.spacing / 2}px;
+    margin: ${(p) => p.theme.sizingPx.spacing / 2}px;
   }
 `;
 var EditableTitle = _styledcomponents.styled.span`
@@ -216,14 +214,14 @@ var EditableTitle = _styledcomponents.styled.span`
   }
 
   > .icon {
-    color: ${_chunkY5UYS6EXjs.THEME.bg};
+    color: ${(p) => p.theme.textMuted};
   }
 
   &:hover {
-    background: ${_chunkY5UYS6EXjs.THEME.bg};
+    background: ${(p) => p.theme.bg};
 
     > .icon {
-      color: ${_chunkY5UYS6EXjs.THEME.hint};
+      color: ${(p) => p.theme.hint};
     }
   }
 `;
@@ -231,7 +229,7 @@ var TitleInput = _styledcomponents.styled.input`
   background: none;
   border: none;
   outline: none;
-  color: ${_chunkY5UYS6EXjs.THEME.textNormal};
+  color: ${(p) => p.theme.textNormal};
 `;
 var GroupStateContext = _react2.default.createContext({
   isCollapsed: () => {
@@ -269,7 +267,7 @@ var Group = ({ className, info }) => {
   const children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GroupChildren, { info, children: info.children.map(renderComponent) });
   const collapsible = !!info.defaultCollapsibleState;
   const collapsed = info.defaultCollapsibleState ? groupState.isCollapsed(info.key, info.defaultCollapsibleState) : false;
-  const collapsePressable = _chunkXEIKOLS2js.usePressable.call(void 0, 
+  const collapsePressable = _chunk7VTNOX5Ojs.usePressable.call(void 0, 
     () => groupState.toggleCollapsed(info.key)
   );
   const showTitle = info.title || info.editableTitle;
@@ -296,11 +294,11 @@ var Group = ({ className, info }) => {
   };
   const hasBorder = info.border || displayHeader;
   const childrenElements = hasBorder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledNestedContent, { children }) : children;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkXEIKOLS2js.calculateClass.call(void 0, className, !hasBorder && "no-border"), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, !hasBorder && "no-border"), children: [
     displayHeader ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       Header,
       {
-        className: _chunkXEIKOLS2js.calculateClass.call(void 0, 
+        className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
           collapsePressable.touching && "touching",
           collapsible && collapsed && "collapsed"
         ),
@@ -323,7 +321,7 @@ var Group = ({ className, info }) => {
             }
           ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, EditableTitle, { onClick: () => setEditingTitle(true), children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKNYDA6D6js.Icon, { className: "icon", icon: "edit" })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT3QSZARMjs.Icon, { className: "icon", icon: "edit" })
           ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title })),
           collapsible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseBar, { ...collapsePressable.handlers }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Grow, {}),
           _optionalChain([info, 'access', _12 => _12.headers, 'optionalAccess', _13 => _13.map, 'call', _14 => _14((h) => h.children.map((c) => renderComponent(c)))])
@@ -335,12 +333,12 @@ var Group = ({ className, info }) => {
 };
 Group.displayName = "Group";
 var StyledGroup = _styledcomponents.styled.call(void 0, Group)`
-  border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+  border: 1px solid ${(p) => p.theme.borderDark};
 
   > .title {
     padding: 5px;
-    background: ${_chunkY5UYS6EXjs.THEME.borderDark};
-    border-bottom: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+    background: ${(p) => p.theme.borderDark};
+    border-bottom: 1px solid ${(p) => p.theme.borderDark};
   }
 
   &.no-border {
@@ -367,10 +365,10 @@ var Wrapper = _styledcomponents.styled.div`
   height: 30px;
   border-radius: 3px;
   overflow: hidden;
-  background: url('${_chunkKNYDA6D6js.TRANSPARENCY_SVG_URI}');
+  background: url('${_chunkT3QSZARMjs.TRANSPARENCY_SVG_URI}');
   background-repeat: repeat;
   background-size: 10px;
-  border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+  border: 1px solid ${(p) => p.theme.borderDark};
 
   &.${CLS_GROW} {
     flex-grow: 1;
@@ -380,7 +378,7 @@ var Inner = _styledcomponents.styled.div`
   width: 100%;
   height: 100%;
 `;
-var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Wrapper, { className: _chunkXEIKOLS2js.calculateClass.call(void 0, className, info.grow && CLS_GROW), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Inner, { style: { backgroundColor: info.color } }) });
+var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Wrapper, { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, info.grow && CLS_GROW), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Inner, { style: { backgroundColor: info.color } }) });
 
 // src/components/slider-button.tsx
 
@@ -480,7 +478,7 @@ var SliderButton = ({ info, className }) => {
         touch.pageX
       );
       const start = onDown(cursorPosition);
-      _chunkXEIKOLS2js.trackTouch.call(void 0, 
+      _chunk7VTNOX5Ojs.trackTouch.call(void 0, 
         touch,
         (p) => {
           const amntDiff = (p.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
@@ -517,12 +515,12 @@ var SliderButton = ({ info, className }) => {
   const valueCSSPercent = value ? (value - info.min) / (info.max - info.min) * 100 + "%" : "0";
   const gradientStops = info.gradient && info.gradient.map((g) => `${g.color} ${g.position * 100}%`);
   const sliderGradient = gradientStops ? {
-    background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkKNYDA6D6js.TRANSPARENCY_SVG_URI})`
+    background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkT3QSZARMjs.TRANSPARENCY_SVG_URI})`
   } : void 0;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
-      className: _chunkXEIKOLS2js.calculateClass.call(void 0, 
+      className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
         className,
         `state-${state.state}`,
         info.grow && CLASS_GROW
@@ -550,7 +548,7 @@ var SliderButton = ({ info, className }) => {
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "div",
               {
-                className: _chunkXEIKOLS2js.calculateClass.call(void 0, 
+                className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
                   CLASS_SLIDER_DISPLAY,
                   sliderGradient && CLASS_GRADIENT
                 ),
@@ -586,11 +584,11 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
     cursor: pointer;
     transition: all 200ms;
     border-radius: 3px;
-    border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
-    ${_chunkY5UYS6EXjs.buttonStateNormal}
+    border: 1px solid ${(p) => p.theme.borderDark};
+    ${_chunkWVMAJYGIjs.buttonStateNormal}
 
     > input {
-      color: ${_chunkY5UYS6EXjs.THEME.textNormal};
+      color: ${(p) => p.theme.textNormal};
       opacity: 0;
       margin: 0 -9px;
       padding: 6px 8px;
@@ -598,22 +596,22 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
       pointer-events: none;
       transition: all 200ms;
       border-radius: 3px;
-      background: ${_chunkY5UYS6EXjs.THEME.bgDark1};
-      border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+      background: ${(p) => p.theme.bgDark1};
+      border: 1px solid ${(p) => p.theme.borderDark};
       overflow: hidden;
-      box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+      box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
     }
 
     > .${CLASS_SLIDER_DISPLAY} {
       flex-grow: 1;
       margin: 0 ${SLIDER_PADDING / 2}px;
       height: 4px;
-      background: ${_chunkY5UYS6EXjs.THEME.bgDark1};
-      border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+      background: ${(p) => p.theme.bgDark1};
+      border: 1px solid ${(p) => p.theme.borderDark};
 
       > .inner {
         height: 100%;
-        background: ${_chunkY5UYS6EXjs.THEME.hint};
+        background: ${(p) => p.theme.hint};
       }
 
       &.${CLASS_GRADIENT} {
@@ -622,7 +620,7 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
         > .inner {
           position: relative;
           background: none;
-          border-right: 2px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+          border-right: 2px solid ${(p) => p.theme.borderDark};
 
           &::before {
             content: '';
@@ -631,7 +629,7 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
             top: -5px;
             bottom: -5px;
             right: -3px;
-            background: ${_chunkY5UYS6EXjs.THEME.borderDark};
+            background: ${(p) => p.theme.borderDark};
           }
 
           &::after {
@@ -641,7 +639,7 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
             top: -4px;
             bottom: -4px;
             right: -2px;
-            background: ${_chunkY5UYS6EXjs.THEME.textNormal};
+            background: ${(p) => p.theme.textNormal};
           }
         }
       }
@@ -656,13 +654,13 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
     }
 
     &:hover {
-      ${_chunkY5UYS6EXjs.buttonStateNormalHover}
+      ${_chunkWVMAJYGIjs.buttonStateNormalHover}
     }
   }
 
   &.state-mouse-down {
     > .inner {
-      ${_chunkY5UYS6EXjs.buttonPressed}
+      ${_chunkWVMAJYGIjs.buttonPressed}
     }
   }
 
@@ -681,7 +679,7 @@ var StyledSliderButton = _styledcomponents.styled.call(void 0, SliderButton)`
     z-index: 100;
 
     .inner {
-      background: ${_chunkY5UYS6EXjs.THEME.bgDark1};
+      background: ${(p) => p.theme.bgDark1};
       width: ${OPEN_SLIDER_WIDTH}px;
 
       > .${CLASS_SLIDER_VALUE} {
@@ -730,7 +728,7 @@ var Switch = ({ className, info }) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: _chunkXEIKOLS2js.calculateClass.call(void 0, className, touching && CLASS_TOUCHING),
+      className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, className, touching && CLASS_TOUCHING),
       onClick,
       onTouchStart,
       onTouchEnd,
@@ -759,7 +757,7 @@ var StyledSwitch = _styledcomponents.styled.call(void 0, Switch)`
     min-width: ${BUTTON_WIDTH + TEXT_WIDTH}px;
     height: ${SWITCH_HEIGHT}px;
     border-radius: 3px;
-    border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+    border: 1px solid ${(p) => p.theme.borderDark};
 
     > .slider {
       position: absolute;
@@ -781,7 +779,7 @@ var StyledSwitch = _styledcomponents.styled.call(void 0, Switch)`
         text-align: center;
         top: 0;
         line-height: ${SWITCH_HEIGHT - 2}px;
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+        text-shadow: ${(p) => p.theme.shadows.textShadowActive};
         box-shadow:
           inset 0 1px 2px rgba(0, 0, 0, 0.2),
           0 1px 0 0 rgba(255, 255, 255, 0.15);
@@ -789,26 +787,22 @@ var StyledSwitch = _styledcomponents.styled.call(void 0, Switch)`
 
       > .on-text {
         left: -40px;
-        background: linear-gradient(
-          to bottom,
-          ${_chunkY5UYS6EXjs.THEME.hintDark1},
-          ${_chunkY5UYS6EXjs.THEME.hint}
-        );
+        background: ${(p) => p.theme.gradients.hintPressed};
       }
 
       > .button {
         top: -1px;
         left: -1px;
         width: ${BUTTON_WIDTH}px;
-        background: linear-gradient(to bottom, #4f5053, #343436);
-        text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+        background: ${(p) => p.theme.gradients.button};
+        text-shadow: ${(p) => p.theme.shadows.textShadow};
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
         border-radius: 3px;
-        border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+        border: 1px solid ${(p) => p.theme.borderDark};
       }
 
       > .off-text {
-        background: linear-gradient(to bottom, #242525, #37383a);
+        background: ${(p) => p.theme.gradients.buttonActive};
         left: ${BUTTON_WIDTH - 2}px;
       }
 
@@ -817,18 +811,18 @@ var StyledSwitch = _styledcomponents.styled.call(void 0, Switch)`
       }
 
       &:hover > .button {
-        background: linear-gradient(to bottom, #5e6064, #393a3b);
+        background: ${(p) => p.theme.gradients.buttonHover};
       }
     }
   }
 
   .${TOUCH_INDICATOR_CLASS2} {
-    ${_chunkY5UYS6EXjs.touchIndicatorNormal}
+    ${_chunkWVMAJYGIjs.touchIndicatorNormal}
   }
 
   &.${CLASS_TOUCHING} {
     .${TOUCH_INDICATOR_CLASS2} {
-      ${_chunkY5UYS6EXjs.touchIndicatorTouching}
+      ${_chunkWVMAJYGIjs.touchIndicatorTouching}
     }
   }
 `;
@@ -840,37 +834,37 @@ var StyledSwitch = _styledcomponents.styled.call(void 0, Switch)`
 var Wrapper2 = _styledcomponents.styled.div`
   display: flex;
   flex-direction: column;
-  background: ${_chunkY5UYS6EXjs.THEME.borderDark};
-  border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+  background: ${(p) => p.theme.borderDark};
+  border: 1px solid ${(p) => p.theme.borderDark};
 `;
 var TabList = _styledcomponents.styled.div`
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+  border-bottom: 1px solid ${(p) => p.theme.borderDark};
 `;
 var TabItem = _styledcomponents.styled.div`
-  height: ${_chunkY5UYS6EXjs.THEME.sizingPx.spacing * 3}px;
+  height: ${(p) => p.theme.sizingPx.spacing * 3}px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 ${_chunkY5UYS6EXjs.THEME.sizingPx.spacing}px;
+  padding: 0 ${(p) => p.theme.sizingPx.spacing}px;
   cursor: pointer;
-  background: ${_chunkY5UYS6EXjs.THEME.bgDark1};
+  background: ${(p) => p.theme.bgDark1};
   margin-right: 1px;
 
   &:hover,
   &.touching {
-    background: ${_chunkY5UYS6EXjs.THEME.bgLight1};
+    background: ${(p) => p.theme.bgLight1};
   }
 
   &.current {
-    color: ${_chunkY5UYS6EXjs.THEME.hint};
+    color: ${(p) => p.theme.hint};
 
     &::after {
       content: '';
-      border-bottom: 2px solid ${_chunkY5UYS6EXjs.THEME.hint};
+      border-bottom: 2px solid ${(p) => p.theme.hint};
       display: block;
-      margin-top: ${_chunkY5UYS6EXjs.THEME.sizingPx.spacing / 2}px;
+      margin-top: ${(p) => p.theme.sizingPx.spacing / 2}px;
     }
   }
 `;
@@ -883,7 +877,7 @@ var Tabs = (props) => {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabList, { children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       TabItem,
       {
-        className: _chunkXEIKOLS2js.calculateClass.call(void 0, 
+        className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, 
           touching === i && "touching",
           currentTab === i && "current"
         ),
@@ -938,12 +932,12 @@ var StyledTextInput = _styledcomponents.styled.call(void 0, TextInput)`
   box-sizing: border-box;
   padding: 6px 8px;
   border-radius: 3px;
-  background: ${_chunkY5UYS6EXjs.THEME.bgDark1};
-  border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
+  background: ${(p) => p.theme.bgDark1};
+  border: 1px solid ${(p) => p.theme.borderDark};
   overflow: hidden;
-  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
-  color: ${_chunkY5UYS6EXjs.THEME.textNormal};
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
+  color: ${(p) => p.theme.textNormal};
+  text-shadow: ${(p) => p.theme.shadows.textShadow};
 
   @media (max-width: 500px) {
     flex-basis: 100%;
@@ -969,18 +963,18 @@ var SourceData = _styledcomponents.styled.div`
   align-items: end;
   justify-content: center;
 `;
-var IndicatorIcon = _styledcomponents.styled.call(void 0, _chunkKNYDA6D6js.Icon)`
+var IndicatorIcon = _styledcomponents.styled.call(void 0, _chunkT3QSZARMjs.Icon)`
   font-size: 40px;
 `;
 var Bar = _styledcomponents.styled.div`
   width: 100%;
   height: 10px;
-  border: 1px solid ${_chunkY5UYS6EXjs.THEME.borderDark};
-  background: ${_chunkY5UYS6EXjs.THEME.borderDark};
+  border: 1px solid ${(p) => p.theme.borderDark};
+  background: ${(p) => p.theme.borderDark};
 `;
 var Fill = _styledcomponents.styled.div`
   height: 100%;
-  background: ${_chunkY5UYS6EXjs.THEME.hint};
+  background: ${(p) => p.theme.hint};
 `;
 var Title = _styledcomponents.styled.div`
   font-size: 1.5em;
@@ -1098,4 +1092,4 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
 
 
 
-exports.Button = StyledButton; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = StyledGroup; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = StyledLabel; exports.NestedContent = StyledNestedContent; exports.Rect = Rect; exports.SliderButton = StyledSliderButton; exports.StageContext = StageContext; exports.Switch = StyledSwitch; exports.Tabs = Tabs; exports.TextInput = StyledTextInput; exports.Timeline = Timeline; exports.code = _chunkKNYDA6D6js.core_exports;
+exports.Button = StyledButton; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = StyledGroup; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = StyledLabel; exports.NestedContent = StyledNestedContent; exports.Rect = Rect; exports.SliderButton = StyledSliderButton; exports.StageContext = StageContext; exports.Switch = StyledSwitch; exports.Tabs = Tabs; exports.TextInput = StyledTextInput; exports.Timeline = Timeline; exports.code = _chunkT3QSZARMjs.core_exports;